react Architecture Docs
Home / File/ CompareDocumentPositionFragmentContainer.js — react Source File

CompareDocumentPositionFragmentContainer.js — react Source File

Architecture documentation for CompareDocumentPositionFragmentContainer.js, a javascript file in the react codebase. 0 imports, 2 dependents.

File javascript BabelCompiler Optimization 2 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  443b1272_3be6_b576_ea29_eeb3576c3c99["CompareDocumentPositionFragmentContainer.js"]
  a9262b9a_dffc_fb68_c0ef_7ba585994573["CompareDocumentPositionCase.js"]
  a9262b9a_dffc_fb68_c0ef_7ba585994573 --> 443b1272_3be6_b576_ea29_eeb3576c3c99
  f361f511_643d_fef8_84d3_4e38e9129616["TextNodesCase.js"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> 443b1272_3be6_b576_ea29_eeb3576c3c99
  style 443b1272_3be6_b576_ea29_eeb3576c3c99 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

const React = window.React;
const {Fragment, useRef, useState} = React;

const POSITION_FLAGS = {
  DISCONNECTED: 0x01,
  PRECEDING: 0x02,
  FOLLOWING: 0x04,
  CONTAINS: 0x08,
  CONTAINED_BY: 0x10,
  IMPLEMENTATION_SPECIFIC: 0x20,
};

function getPositionDescription(bitmask) {
  const flags = [];
  if (bitmask & POSITION_FLAGS.DISCONNECTED) flags.push('DISCONNECTED');
  if (bitmask & POSITION_FLAGS.PRECEDING) flags.push('PRECEDING');
  if (bitmask & POSITION_FLAGS.FOLLOWING) flags.push('FOLLOWING');
  if (bitmask & POSITION_FLAGS.CONTAINS) flags.push('CONTAINS');
  if (bitmask & POSITION_FLAGS.CONTAINED_BY) flags.push('CONTAINED_BY');
  if (bitmask & POSITION_FLAGS.IMPLEMENTATION_SPECIFIC)
    flags.push('IMPLEMENTATION_SPECIFIC');
  return flags.length > 0 ? flags.join(' | ') : 'SAME';
}

function ResultRow({label, result, color}) {
  if (!result) return null;

  return (
    <div
      style={{
        padding: '10px 14px',
        marginBottom: '8px',
        backgroundColor: '#f8f9fa',
        borderLeft: `4px solid ${color}`,
        borderRadius: '4px',
      }}>
      <div
        style={{
          fontWeight: 'bold',
          marginBottom: '6px',
          color: '#333',
        }}>
        {label}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'auto 1fr',
          gap: '4px 12px',
          fontSize: '13px',
          fontFamily: 'monospace',
        }}>
        <span style={{color: '#666'}}>Raw value:</span>
        <span style={{color: '#333'}}>{result.raw}</span>
        <span style={{color: '#666'}}>Flags:</span>
        <span style={{color: color, fontWeight: 500}}>
          {getPositionDescription(result.raw)}
        </span>
      </div>
    </div>
// ... (187 more lines)

Domain

Subdomains

Functions

Imported By

Source

Frequently Asked Questions

What does CompareDocumentPositionFragmentContainer.js do?
CompareDocumentPositionFragmentContainer.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Optimization subdomain.
What functions are defined in CompareDocumentPositionFragmentContainer.js?
CompareDocumentPositionFragmentContainer.js defines 3 function(s): CompareDocumentPositionFragmentContainer, ResultRow, getPositionDescription.
What files import CompareDocumentPositionFragmentContainer.js?
CompareDocumentPositionFragmentContainer.js is imported by 2 file(s): CompareDocumentPositionCase.js, TextNodesCase.js.
Where is CompareDocumentPositionFragmentContainer.js in the architecture?
CompareDocumentPositionFragmentContainer.js is located at fixtures/dom/src/components/fixtures/fragment-refs/CompareDocumentPositionFragmentContainer.js (domain: BabelCompiler, subdomain: Optimization, directory: fixtures/dom/src/components/fixtures/fragment-refs).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free