, {Component} from 'react';

import './Chrome.css';

export default class Chrome extends Component {
  render() {
    const assets = this.props.assets;
    return (
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="shortcut icon" href="favicon.ico" />
          <link rel="stylesheet" href={assets['main.css']} />
          <link rel="preconnect" href="https://fonts.googleapis.com" />

wap"
            rel="stylesheet"
          />
          <title>{this.props.title}</title>
        </head>
        <body>
          <noscript
            dangerouslySetInnerHTML={{
              __html: `<b>Enable JavaScript to run this app.</b>`,

         <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin=""
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=s


;

import {createPortal} from 'react-dom';

import SwipeRecognizer from './SwipeRecognizer.js';

import './Page.css';

import transitions from './Transitions.module.css';
import NestedReveal from './NestedReveal.js';

async function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const a = (

    <ViewTransition>

a

    </ViewTransition>

);

const b = (

    <ViewTransition>

b

    </ViewTransition>

);

be properly supported.
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      .roboto-font {
        font-family: "Roboto", serif;
        font-optical-sizing: auto;
        font-weight: 100;

function Component() {
  // Test inserting fonts with style tags using useInsertionEffect. This is not recommended but
  // used to test that gestures etc works with useInsertionEffect so that stylesheet based
  // libraries can


ine';
import TouchPanTimeline from 'animation-timelines/touch-pan-timeline';

const ua = typeof navigator === 'undefined' ? '' : navigator.userAgent;
const isSafariMobile =
  ua.indexOf('Safari') !== -1 &&
  (ua.indexOf('iPhone') !== -1 ||
    ua.indexOf('iPad') !== -1 ||
    ua.indexOf('iPod') !== -1);

// Example of a Component that can recognize swipe gestures using a ScrollTimeline
// without scrolling its own content. Allowing it to be used as an inert gesture
// recognizer to drive a View Transition.

t scrollRef = useRef(null);
  const activeGesture = useRef(null);
  const touchTimeline = useRef(null);

  function onTouchStart(event) {
    if (!isSafariMobile && typeof ScrollTimeline === 'function') {
      // If not Safari and native ScrollTimeline is

export default function SwipeRecognizer({
  action,
  children,
  direction,
  gesture,
}) {
  if (direction == null) {
    direction = 'left';
  }
  const axis = direction === 'left' || direction === 'right' ? 'x' : 'y';

  cons


/core';

const babelOptions = {
  babelrc: false,
  ignore: [/\/(build|node_modules)\//],
  plugins: [
    '@babel/plugin-syntax-import-meta',
    '@babel/plugin-transform-react-jsx',
  ],
};

export async function load(url, context, defaultLoad) {
  if (url.endsWith('.css')) {
    return {source: 'export default {}', format: 'module', shortCircuit: true};
  }
  const {format} = context;
  const result = await defaultLoad(url, context, defaultLoad);
  if (result.format === 'module') {
    const opt = Object

    source: Buffer.from(result.source).toString('utf8'),
        format: 'module',
      };
    }
    return {source: newResult.code, format: 'module'};
  }
  return defaultLoad(url, context, defaultLoad);
}

async function babelTransformSource(source, con

.assign({filename: url}, babelOptions);
    const newResult = await babel.transformAsync(result.source, opt);
    if (!newResult) {
      if (typeof result.source === 'string') {
        return result;
      }
      return {


unstable_ImmediatePriority;
    UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
    NormalPriority = Scheduler.unstable_NormalPriority;
    LowPriority = Scheduler.unstable_LowPriority;
    IdlePriority = Scheduler.unstable_IdlePriority;
    scheduleCallback = Scheduler.unstable_scheduleCallback;
    cancelCallback = Scheduler.unstable_cancelCallback;
    wrapCallback = Scheduler.unstable_wrapCallback;
    getCurrentPriorityLevel = Scheduler.unstable_getCurrentPriorityLevel;
    shouldYield

    waitForPaint = InternalTestUtils.waitForPaint;
  });

  it('flushes work incrementally', async () => {
    scheduleCallback(NormalPriority, () => Scheduler.log('A'));
    scheduleCallback(NormalPriority, () => Scheduler.log('B'));
    scheduleCallback

= Scheduler.unstable_shouldYield;

    const InternalTestUtils = require('internal-test-utils');
    waitForAll = InternalTestUtils.waitForAll;
    assertLog = InternalTestUtils.assertLog;
    waitFor = InternalTestUtils.waitFor;


lPriority;
let LowPriority;
let IdlePriority;
let scheduleCallback;
let cancelCallback;
// let wrapCallback;
// let getCurrentPriorityLevel;
// let shouldYield;
let waitForAll;
let waitFor;
let waitForThrow;

function priorityLevelToString(priorityLevel) {
  switch (priorityLevel) {
    case ImmediatePriority:
      return 'Immediate';
    case UserBlockingPriority:
      return 'User-blocking';
    case NormalPriority:
      return 'Normal';
    case LowPriority:
      return 'Low';
    case IdlePriority:

pply when profiling is on
    it('profiling APIs are not available', () => {
      Scheduler = require('scheduler');
      expect(Scheduler.unstable_Profiling).toBe(null);
    });
    return;
  }

  beforeEach(() => {
    jest.resetModules();
    jest.mock

      return 'Idle';
    default:
      return null;
  }
}

describe('Scheduler', () => {
  const {enableProfiling} = require('scheduler/src/SchedulerFeatureFlags');
  if (!enableProfiling) {
    // The tests in this suite only a


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @emails react-core
 * @jest-environment node
 */

'use strict';

let Scheduler;
let scheduleCallback;
let ImmediatePriority;
let UserBlockingPriority;
let NormalPriority;

describe('SchedulerNoDOM', () => {
  // Scheduler falls back to a naive implementation using setTimeout.
  // This is only meant to be used for testing purposes, like with jest's fake timer API.
  beforeEach(() => {
    jest.resetModules();
    jest

Priority = Scheduler.unstable_UserBlockingPriority;
    NormalPriority = Scheduler.unstable_NormalPriority;
  });

  it('runAllTimers flushes all scheduled callbacks', () => {
    const log = [];
    scheduleCallback(NormalPriority, () => {
      log.push(

.useFakeTimers();
    delete global.setImmediate;
    delete global.MessageChannel;
    jest.unmock('scheduler');

    Scheduler = require('scheduler');
    scheduleCallback = Scheduler.unstable_scheduleCallback;
    UserBlocking


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow strict-local
 */

'use strict';

import {type ViewConfig} from './ReactNativeTypes';

// Event configs
export const customBubblingEventTypes = {};
export const customDirectEventTypes = {};

const viewConfigCallbacks = new Map();
const viewConfigs = new Map();

function processEventTypes(viewConfig: ViewConfig): void {
  const {bubblingEventTypes, directEventTypes} = viewConfig;

  if (__DEV__) {
    if (bubbling

d bubbling: ${topLevelType}`,
          );
        }
      }
    }
  }

  if (bubblingEventTypes != null) {
    for (const topLevelType in bubblingEventTypes) {
      if (customBubblingEventTypes[topLevelType] == null) {
        customBubblingEventTypes[to

EventTypes != null && directEventTypes != null) {
      for (const topLevelType in directEventTypes) {
        if (bubblingEventTypes[topLevelType] != null) {
          throw new Error(
            `Event cannot be both direct an


* @nolint
 * @flow strict
 */

import type {
  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
  HostInstance as PublicInstance,
  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
  MeasureOnSuccessCallback,
  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
  PublicRootInstance,
  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
  PublicTextInstance,
} from 'react-native';

import * as React from 'react';

export type AttributeType<T, V> =
  | true
  | $ReadOnly<{
      diff?: (arg1: T, arg2: T) => bo

, $FlowFixMe>;

export type AttributeConfiguration = $ReadOnly<{
  [propName: string]: AnyAttributeType | void,
  style?: $ReadOnly<{
    [propName: string]: AnyAttributeType,
    ...
  }>,
  ...
}>;

export type ViewConfig = $ReadOnly<{
  Commands?: $Read

olean,
      process?: (arg1: V) => T,
    }>;

// We either force that `diff` and `process` always use mixed,
// or we allow them to define specific types and use this hack
export type AnyAttributeType = AttributeType<$FlowFixMe


 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
import type {
  DispatchConfig,
  ReactSyntheticEvent,
} from './ReactSyntheticEventType';
import type {TopLevelType} from './TopLevelEventTypes';

export type EventTypes = {[key: string]: DispatchConfig};

// Native events from C++ are plain

Event> = {
  eventTypes: EventTypes,
  extractEvents: (
    topLevelType: TopLevelType,
    targetInst: null | Fiber,
    nativeTarget: NativeEvent,
    nativeEventTarget: null | EventTarget,
    eventSystemFlags?: number,
    container?: null | EventTarge

objects with arbitrary properties,
// not DOM Event class instances.
export type AnyNativeEvent = {[string]: mixed};

export type PluginName = string;

export type EventSystemFlags = number;

export type LegacyPluginModule<Native


ight (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * Flow type for SyntheticEvent class that includes private properties
 * @flow
 */

import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
import type {TopLevelType} from './TopLevelEventTypes';

export type DispatchConfig = {
  dependencies?: Array<TopLevelType>,
  phasedRegistrationNames: {
    bubbled: null | string

n,
  },
  registrationName?: string,
  customEvent: true,
};

export type ReactSyntheticEvent = {
  dispatchConfig: DispatchConfig | CustomDispatchConfig,
  getPooled: (
    dispatchConfig: DispatchConfig | CustomDispatchConfig,
    targetInst: Fiber,

,
    captured: null | string,
    skipBubbling?: ?boolean,
  },
  registrationName?: string,
};

export type CustomDispatchConfig = {
  phasedRegistrationNames: {
    bubbled: null,
    captured: null,
    skipBubbling?: ?boolea


/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

export const TOP_TOUCH_START = 'topTouchStart';
export const TOP_TOUCH_MOVE = 'topTouchMove';
export const TOP_TOUCH_END = 'topTouchEnd';
export const TOP_TOUCH_CANCEL = 'topTouchCancel';
export const TOP_SCROLL = 'topScroll';
export const TOP_SELECTION_CHANGE = 'topSelectionChange';

export function isStar

d): boolean {
  return topLevelType === TOP_TOUCH_END || topLevelType === TOP_TOUCH_CANCEL;
}

export const startDependencies = [TOP_TOUCH_START];
export const moveDependencies = [TOP_TOUCH_MOVE];
export const endDependencies = [TOP_TOUCH_CANCEL, TOP_TOUCH

tish(topLevelType: mixed): boolean {
  return topLevelType === TOP_TOUCH_START;
}

export function isMoveish(topLevelType: mixed): boolean {
  return topLevelType === TOP_TOUCH_MOVE;
}

export function isEndish(topLevelType: mixe


import {isStartish, isMoveish, isEndish} from './ResponderTopLevelEventTypes';

/**
 * Tracks the position and time of each active touch by `touch.identifier`. We
 * should typically only see IDs in the range of 1-20 because IDs get recycled
 * when touches end and start again.
 */
type TouchRecord = {
  touchActive: boolean,
  startPageX: number,
  startPageY: number,
  startTimeStamp: number,
  currentPageX: number,
  currentPageY: number,
  currentTimeStamp: number,
  previousPageX: number,
  previousPag

ts location. This prevents
  // us having to loop through all of the touches all the time in the most
  // common case.
  indexOfSingleActiveTouch: -1,
  mostRecentTimeStamp: 0,
};

type Touch = {
  identifier: ?number,
  pageX: number,
  pageY: number,

eY: number,
  previousTimeStamp: number,
};

const MAX_TOUCH_BANK = 20;
const touchBank: Array<TouchRecord> = [];
const touchHistory = {
  touchBank,
  numberActiveTouches: 0,
  // If there is only one active touch, we remember i


 Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import isArray from 'shared/isArray';

/**
 * Accumulates items that must not be null or undefined into the first one. This
 * is used to conserve memory by avoiding array allocations, and thus sacrifices
 * API cleanness. Since `current` can be null before being passed in and not
 * null after this function, make sure to assign it

t: ?(Array<T> | T),
  next: T | Array<T>,
): T | Array<T> {
  if (next == null) {
    throw new Error('Accumulated items must not be null or undefined.');
  }

  if (current == null) {
    return next;
  }

  // Both are not empty. Warning: Never call x.co

 back to `current`:
 *
 * `a = accumulateInto(a, b);`
 *
 * This API should be sparingly used. Try `accumulate` for something cleaner.
 *
 * @return {*|array<*>} An accumulation of items.
 */

function accumulateInto<T>(
  curren


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import * as React from 'react';
import ReactVersion from 'shared/ReactVersion';
import {LegacyRoot, ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
import {
  createContainer,
  updateContainerSync,
  injectIntoDevTools,
  flushSyncWork,
  defaultOnUncaughtError,
  defaultOnCaughtError,
  defaultOnRecoverableError,
} from 'react-reconciler/src/ReactFiberReconciler';

import Transform from 'art/core/transform

ction defaultOnDefaultTransitionIndicator() {
  // Noop
}

Mode.setCurrent(
  // Change to 'art/modes/dom' for easier debugging via SVG
  FastNoSideEffects,
);

/** Declarative fill-type objects; API design not finalized */

const slice = Array.prototype.s

';
import Mode from 'art/modes/current';
import FastNoSideEffects from 'art/modes/fast-noSideEffects';
import {disableLegacyMode} from 'shared/ReactFeatureFlags';

import {TYPES, childrenAsString} from './ReactARTInternals';

fun


eactARTInternals';

import {
  DefaultEventPriority,
  NoEventPriority,
} from 'react-reconciler/src/ReactEventPriorities';
import type {ReactContext} from 'shared/ReactTypes';
import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';

export {default as rendererVersion} from 'shared/ReactVersion';
export const rendererPackageName = 'react-art';
export const extraDevToolsConfig = null;

const pooledTransform = new Transform();

const NO_CONTEXT = {};
if (__DEV__) {
  Object.freeze(NO_CONTEXT);
}

export type

listeners) {
    instance._listeners = {};
    instance._subscriptions = {};
  }

  instance._listeners[type] = listener;

  if (listener) {
    if (!instance._subscriptions[type]) {
      instance._subscriptions[type] = instance.subscribe(
        type,

TransitionStatus = mixed;

/** Helper Methods */

function addEventListeners(instance, type, listener) {
  // We need to explicitly unregister before unmount.
  // For this reason we need to track subscriptions.
  if (!instance._


mport ARTCurrentMode from 'art/modes/current';
// Since these are default exports, we need to import them using ESM.
// Since they must be on top, we need to import this before ReactDOM.
import Circle from 'react-art/Circle';
import Rectangle from 'react-art/Rectangle';
import Wedge from 'react-art/Wedge';

const {act} = require('internal-test-utils');

// Isolate DOM renderer.
jest.resetModules();
// share isomorphic
jest.mock('scheduler', () => Scheduler);
jest.mock('react', () => React);
const ReactDOMCl

(domNode.nodeName).toBe(expectedStructure.nodeName);
  for (const prop in expectedStructure) {
    if (!expectedStructure.hasOwnProperty(prop)) {
      continue;
    }
    if (prop !== 'nodeName' && prop !== 'children') {
      if (expectedStructure[prop]

ient = require('react-dom/client');

let Group;
let Shape;
let Surface;
let TestComponent;

let groupRef;

const Missing = {};

function testDOMNodeStructure(domNode, expectedStructure) {
  expect(domNode).toBeDefined();
  expect


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 * @typechecks
 *
 * Example usage:
 * <Rectangle
 *   width={50}
 *   height={50}
 *   stroke="green"
 *   fill="blue"
 * />
 *
 * Additional optional properties:
 *   (Number) radius
 *   (Number) radiusTopLeft
 *   (Number) radiusTopRight
 *   (Number) radiusBottomLeft
 *   (Number) radiusBottomRight
 *
 */

'use strict';

var assign = Object.assign;
var React = require(

r ReactART
 * components, it must be used in a <Surface>.
 */
var Rectangle = createReactClass({
  displayName: 'Rectangle',

  render: function render() {
    var width = this.props.width;
    var height = this.props.height;
    var radius = this.props.ra

'react');
var ReactART = require('react-art');

var createReactClass = require('create-react-class');

var Shape = ReactART.Shape;
var Path = ReactART.Path;

/**
 * Rectangle is a React component for drawing rectangles. Like othe


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import type {PriorityLevel} from './SchedulerPriorities';
import {enableProfiling} from './SchedulerFeatureFlags';

let runIdCounter: number = 0;
let mainThreadIdCounter: number = 0;

// Bytes per element is 4
const INITIAL_EVENT_LOG_SIZE = 131072;
const MAX_EVENT_LOG_SIZE = 524288; // Equivalent to 2 megabytes

let eventLogSize = 0;
let eventLogBuffer = null;
let eventLog = null;
let eventLogIndex = 0;

co

n logEvent(entries: Array<number | PriorityLevel>) {
  if (eventLog !== null) {
    const offset = eventLogIndex;
    eventLogIndex += entries.length;
    if (eventLogIndex + 1 > eventLogSize) {
      eventLogSize *= 2;
      if (eventLogSize > MAX_EVENT_L

nst TaskStartEvent = 1;
const TaskCompleteEvent = 2;
const TaskErrorEvent = 3;
const TaskCancelEvent = 4;
const TaskRunEvent = 5;
const TaskYieldEvent = 6;
const SchedulerSuspendEvent = 7;
const SchedulerResumeEvent = 8;

functio


ulerFeatureFlags;

// The Scheduler implementation uses browser APIs like `MessageChannel` and
// `setTimeout` to schedule work on the main thread. Most of our tests treat
// these as implementation details; however, the sequence and timing of these
// APIs are not precisely specified, and can vary across browsers.
//
// To prevent regressions, we need the ability to simulate specific edge cases
// that we may encounter in various browsers.
//
// This test suite mocks all browser methods used in our impleme

eduler');

    performance = global.performance;
    Scheduler = require('scheduler');
    cancelCallback = Scheduler.unstable_cancelCallback;
    scheduleCallback = Scheduler.unstable_scheduleCallback;
    NormalPriority = Scheduler.unstable_NormalPriorit

ntation. It
// assumes as little as possible about the order and timing of events.
describe('SchedulerBrowser', () => {
  beforeEach(() => {
    jest.resetModules();
    runtime = installMockBrowserRuntime();
    jest.unmock('sch


eout,
  enableRequestPaint,
  enableAlwaysYieldScheduler,
} from '../SchedulerFeatureFlags';

import {push, pop, peek} from '../SchedulerMinHeap';

// TODO: Use symbols?
import {
  ImmediatePriority,
  UserBlockingPriority,
  NormalPriority,
  LowPriority,
  IdlePriority,
} from '../SchedulerPriorities';
import {
  markTaskRun,
  markTaskYield,
  markTaskCompleted,
  markTaskCanceled,
  markTaskErrored,
  markSchedulerSuspended,
  markSchedulerUnsuspended,
  markTaskStart,
  stopLoggingProfilingEvents,
  st

  expirationTime: number,
  sortIndex: number,
  isQueued?: boolean,
};

let getCurrentTime: () => number | DOMHighResTimeStamp;
const hasPerformanceNow =
  // $FlowFixMe[method-unbinding]
  typeof performance === 'object' && typeof performance.now === 'f

artLoggingProfilingEvents,
} from '../SchedulerProfiling';

export type Callback = boolean => ?Callback;

export opaque type Task = {
  id: number,
  callback: Callback | null,
  priorityLevel: PriorityLevel,
  startTime: number,


nder the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @emails react-core
 * @jest-environment node
 */

'use strict';

let createReactNativeComponentClass;

describe('ReactNativeError', () => {
  beforeEach(() => {
    jest.resetModules();

    createReactNativeComponentClass =
      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
        .ReactNativeViewConfigRegistry.register;
  });

  it('should throw error if null component registra

   try {
        createReactNativeComponentClass('View', null);
      } catch (e) {
        throw new Error(e.toString());
      }
    }).toThrow(
      'View config getter callback for component `View` must be a function (received `null`)',
    );
  });
}

tion getter is used', () => {
    expect(() => {


chAccumulated from './forEachAccumulated';
import {HostComponent} from 'react-reconciler/src/ReactWorkTags';

/**
 * Instance of element that should respond to touch/move types of interactions,
 * as indicated explicitly by relevant callbacks.
 */
let responderInst = null;

/**
 * Count of current touches. A textInput should become responder iff the
 * selection changes while there is a touch on the screen.
 */
let trackedTouchCount = 0;

function changeResponder(nextResponderInst, blockHostResponder) {
  c

tResponderInst,
      blockHostResponder,
    );
  }
}

const eventTypes = {
  /**
   * On a `touchStart`/`mouseDown`, is it desired that this element become the
   * responder?
   */
  startShouldSetResponder: {
    phasedRegistrationNames: {
      bubble

onst oldResponderInst = responderInst;
  responderInst = nextResponderInst;
  if (ResponderEventPlugin.GlobalResponderHandler !== null) {
    ResponderEventPlugin.GlobalResponderHandler.onChange(
      oldResponderInst,
      nex


 Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import isArray from 'shared/isArray';

/**
 * Accumulates items that must not be null or undefined.
 *
 * This is used to conserve memory by avoiding array allocations.
 *
 * @return {*|array<*>} An accumulation of items.
 */
function accumulate<T>(
  current: ?(T | Array<T>),
  next: T | Array<T>,
): T | Array<T

 certain that x is an Array (x could be a string with concat method).
  if (isArray(current)) {
    // $FlowFixMe[incompatible-use] `isArray` does not ensure array is mutable
    return current.concat(next);
  }

  if (isArray(next)) {
    /* $FlowFixMe[in

> {
  if (next == null) {
    throw new Error('Accumulated items must not be null or undefined.');
  }

  if (current == null) {
    return next;
  }

  // Both are not empty. Warning: Never call x.concat(y) when you are not
  //


ource code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

/**
 * @param {array} arr an "accumulation" of items which is either an Array or
 * a single item. Useful when paired with the `accumulate` module. This is a
 * simple utility that allows us to reason about a collection of items, but
 * handling the case when there is exactly one item (and we do not need to
 * allocate an array).
 * @param {function} cb Callback invoked with

Scope used as `this` in a callback.
 */
function forEachAccumulated<T>(
  arr: ?(Array<T> | T),
  cb: (elem: T) => void,
  scope: ?any,
) {
  if (Array.isArray(arr)) {
    // $FlowFixMe[incompatible-call] if `T` is an array, `cb` cannot be called
    arr.f

each element or a collection.
 * @param {?} [scope]


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 * @typechecks
 *
 * Example usage:
 * <Wedge
 *   outerRadius={50}
 *   startAngle={0}
 *   endAngle={360}
 *   fill="blue"
 * />
 *
 * Additional optional property:
 *   (Int) innerRadius
 *
 */

'use strict';

var assign = Object.assign;
var React = require('react');
var ReactART = require('react-art');

var createReactClass = require('create-react-class');

var Shape = ReactART.Shape;
var Path = ReactART.Path;

/**
 * W

nsPerDegree: Math.PI / 180,

  /**
   * _degreesToRadians(degrees)
   *
   * Helper function to convert degrees to radians
   *
   * @param {number} degrees
   * @return {number}
   */
  _degreesToRadians: function _degreesToRadians(degrees) {
    if (degr

edge is a React component for drawing circles, wedges and arcs. Like other
 * ReactART components, it must be used in a <Surface>.
 */
var Wedge = createReactClass({
  displayName: 'Wedge',

  circleRadians: Math.PI * 2,

  radia


atePriority;
let NormalPriority;
let UserBlockingPriority;
let LowPriority;
let IdlePriority;
let shouldYield;

// The Scheduler postTask implementation uses a new postTask browser API to
// schedule work on the main thread. This test suite mocks all browser methods
// used in our implementation. It assumes as little as possible about the order
// and timing of events.
describe('SchedulerPostTask', () => {
  beforeEach(() => {
    jest.resetModules();
    jest.mock('scheduler', () =>
      jest.requireActua

eCallback = Scheduler.unstable_scheduleCallback;
    ImmediatePriority = Scheduler.unstable_ImmediatePriority;
    UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
    NormalPriority = Scheduler.unstable_NormalPriority;
    LowPriority = Sch

l('scheduler/unstable_post_task'),
    );

    runtime = installMockBrowserRuntime();
    performance = window.performance;
    Scheduler = require('scheduler');
    cancelCallback = Scheduler.unstable_cancelCallback;
    schedul


ct-core
 * @jest-environment node
 */

'use strict';

let Scheduler;
let runtime;
let performance;
let cancelCallback;
let scheduleCallback;
let NormalPriority;
let UserBlockingPriority;

// The Scheduler implementation uses browser APIs like `MessageChannel` and
// `setTimeout` to schedule work on the main thread. Most of our tests treat
// these as implementation details; however, the sequence and timing of these
// APIs are not precisely specified, and can vary across browsers.
//
// To prevent regressio

 and timing of events.
describe('SchedulerDOMSetImmediate', () => {
  beforeEach(() => {
    jest.resetModules();
    runtime = installMockBrowserRuntime();
    jest.unmock('scheduler');

    performance = global.performance;
    Scheduler = require('sched

ns, we need the ability to simulate specific edge cases
// that we may encounter in various browsers.
//
// This test suite mocks all browser methods used in our implementation. It
// assumes as little as possible about the order


ource code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

export type RNTopLevelEventType =
  | 'topMouseDown'
  | 'topMouseMove'
  | 'topMouseUp'
  | 'topScroll'
  | 'topSelectionChange'
  | 'topTouchCancel'
  | 'topTouchEnd'
  | 'topTouchMove'
  | 'topTouchStart';

export opaque type DOMTopLevelEventType = string;

// Do not use the below two methods directly!
// Instead use constants exported from DOMTopLevelEventTypes in ReactDO

ss these methods.)

export function unsafeCastStringToDOMTopLevelType(
  topLevelType: string,
): DOMTopLevelEventType {
  return topLevelType;
}

export function unsafeCastDOMTopLevelTypeToString(
  topLevelType: DOMTopLevelEventType,
): string {
  return

M.
// (It is the only module that is allowed to acce


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow strict
 */

type Heap<T: Node> = Array<T>;
type Node = {
  id: number,
  sortIndex: number,
  ...
};

export function push<T: Node>(heap: Heap<T>, node: T): void {
  const index = heap.length;
  heap.push(node);
  siftUp(heap, node, index);
}

export function peek<T: Node>(heap: Heap<T>): T | null {
  return heap.length === 0 ? null : heap[0];
}

export function

$FlowFixMe[incompatible-call]
    siftDown(heap, last, 0);
  }
  return first;
}

function siftUp<T: Node>(heap: Heap<T>, node: T, i: number): void {
  let index = i;
  while (index > 0) {
    const parentIndex = (index - 1) >>> 1;
    const parent = heap[

 pop<T: Node>(heap: Heap<T>): T | null {
  if (heap.length === 0) {
    return null;
  }
  const first = heap[0];
  const last = heap.pop();
  if (last !== first) {
    // $FlowFixMe[incompatible-type]
    heap[0] = last;
    //


eof performance === 'object' &&
    performance !== null &&
    typeof performance.now === 'function'
  ) {
    currentTimeStamp = () => performance.now();
  } else {
    currentTimeStamp = () => Date.now();
  }

  return currentTimeStamp();
};

/**
 * @interface Event
 * @see http://www.w3.org/TR/DOM-Level-3-Events/
 */
const EventInterface = {
  type: null,
  target: null,
  // currentTarget is set when dispatching; no use in copying it here
  currentTarget: function () {
    return null;
  },
  eventPhas

True() {
  return true;
}

function functionThatReturnsFalse() {
  return false;
}

/**
 * Synthetic events are dispatched by event plugins, typically in response to a
 * top-level event delegation handler.
 *
 * These systems should generally use pooling

e: null,
  bubbles: null,
  cancelable: null,
  timeStamp: function (event) {
    return event.timeStamp || event.timestamp || currentTimeStamp();
  },
  defaultPrevented: null,
  isTrusted: null,
};

function functionThatReturns


 Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

// Used as a way to call batchedUpdates when we don't have a reference to
// the renderer. Such as when we're dispatching events or if third party
// libraries need to call batchedUpdates. Eventually, this API will go away when
// everything is batched by default. We'll then have a similar API to opt-out of
// scheduled work and instead do syn

export function batchedUpdates(fn, bookkeeping) {
  if (isInsideEventHandler) {
    // If we are currently inside another batch, we need to wait until it
    // fully completes before restoring state.
    return fn(bookkeeping);
  }
  isInsideEventHandler

chronous work.

// Defaults
let batchedUpdatesImpl = function (fn, bookkeeping) {
  return fn(bookkeeping);
};
let discreteUpdatesImpl = function (fn, a, b, c, d) {
  return fn(a, b, c, d);
};

let isInsideEventHandler = false;


**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 * @typechecks
 *
 * Example usage:
 * <Circle
 *   radius={10}
 *   stroke="green"
 *   strokeWidth={3}
 *   fill="blue"
 * />
 *
 */

'use strict';

var assign = Object.assign;
var React = require('react');
var ReactART = require('react-art');

var createReactClass = require('create-react-class');

var Path = ReactART.Path

ction render() {
    var radius = this.props.radius;

    var path = Path()
      .moveTo(0, -radius)
      .arc(0, radius * 2, radius)
      .arc(0, radius * -2, radius)
      .close();
    return React.createElement(Shape, assign({}, this.props, {d: path

;
var Shape = ReactART.Shape;

/**
 * Circle is a React component for drawing circles. Like other ReactART
 * components, it must be used in a <Surface>.
 */
var Circle = createReactClass({
  displayName: 'Circle',

  render: fun


 Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 * @flow
 */

import type {ReactSyntheticEvent} from './ReactSyntheticEventType';
import accumulateInto from './accumulateInto';
import forEachAccumulated from './forEachAccumulated';
import {executeDispatchesInOrder, rethrowCaughtError} from './EventPluginUtils';

/**
 * Internal queue of events that have accumulated their dispatches and are
 * wa

ent Synthetic event to be dispatched.
 * @private
 */
function executeDispatchesAndRelease(event: ReactSyntheticEvent) {
  if (event) {
    executeDispatchesInOrder(event);

    if (!event.isPersistent()) {
      event.constructor.release(event);
    }
  }

iting to have their dispatches executed.
 */
let eventQueue: ?(Array<ReactSyntheticEvent> | ReactSyntheticEvent) = null;

/**
 * Dispatches an event and releases it back into the pool, unless persistent.
 *
 * @param {?object} ev


ent, commentSource}) {
  const currentUserID = comment.viewer.id;
  const environment = RelayEnvironment.forUser(currentUserID);
  const commentID = nullthrows(comment.id);
  useEffect(() => {
    const subscription = SubscriptionCounter.subscribeOnce(
      `StoreSubscription_${commentID}`,
      () =>
        StoreSubscription.subscribe(
          environment,
          {
            comment_id: commentID,
          },
          currentUserID,
          commentSource
        )
    );
    return () => subs

}
function UseEffectWithEmptyDependencies() {
  useEffect(() => {
    const local = {};
    console.log(local);
  }, []);
}

// OK because `props` wasn't defined.
function ComponentWithNoPropsDefined() {
  useEffect(() => {
    console.log(props.foo);
  },

cription.dispose();
  }, [commentID, commentSource, currentUserID, environment]);
}

// Valid because no dependencies
function UseEffectWithNoDependencies() {
  const local = {};
  useEffect(() => {
    console.log(local);
  });


t';

import * as React from 'react';
import {useFormStatus} from 'react-dom';
import ErrorBoundary from './ErrorBoundary.js';

const h = React.createElement;

function Status() {
  const {pending} = useFormStatus();
  return pending ? 'Saving...' : null;
}

export default function Form({action, children}) {
  const [isPending, setIsPending] = React.useState(false);
  return h(
    ErrorBoundary,
    null,
    h(
      'form',
      {
        action: action,
      },
      h(
        'label',
        {},

        h('input', {
          name: 'name',
        })
      ),
      h(
        'label',
        {},
        'File: ',
        h('input', {
          type: 'file',
          name: 'file',
        })
      ),
      h('button', {}, 'Say Hi'),
      h(Stat


 * as React from 'react';
import {use, Suspense, useState, startTransition} from 'react';
import ReactDOM from 'react-dom/client';
import {createFromFetch, encodeReply} from 'react-server-dom-esm/client';

const moduleBaseURL = '/src/';

function findSourceMapURL(fileName) {
  return (
    document.location.origin +
    '/source-maps?name=' +
    encodeURIComponent(fileName)
  );
}

let updateRoot;
async function callServer(id, args) {
  const response = fetch('/', {
    method: 'POST',
    headers: {

 // Refresh the tree with the new RSC payload.
  startTransition(() => {
    updateRoot(root);
  });
  return returnValue;
}

let data = createFromFetch(
  fetch('/', {
    headers: {
      Accept: 'text/x-component',
    },
  }),
  {
    callServer,
    m

 Accept: 'text/x-component',
      'rsc-action': id,
    },
    body: await encodeReply(args),
  });
  const {returnValue, root} = await createFromFetch(response, {
    callServer,
    moduleBaseURL,
    findSourceMapURL,
  });


esolve,
  load as reactLoad,
  getSource as getSourceImpl,
  transformSource as reactTransformSource,
} from 'react-server-dom-esm/node-loader';

export {resolve};

async function textLoad(url, context, defaultLoad) {
  const {format} = context;
  const result = await defaultLoad(url, context, defaultLoad);
  if (result.format === 'module') {
    if (typeof result.source === 'string') {
      return result;
    }
    return {
      source: Buffer.from(result.source).toString('utf8'),
      format: 'module',

, context, defaultTransformSource) {
  const {format} = context;
  if (format === 'module') {
    if (typeof source === 'string') {
      return {source};
    }
    return {
      source: Buffer.from(source).toString('utf8'),
    };
  }
  return defaultTra

    };
  }
  return result;
}

export async function load(url, context, defaultLoad) {
  return await reactLoad(url, context, (u, c) => {
    return textLoad(u, c, defaultLoad);
  });
}

async function textTransformSource(source


ompress = require('compression');
const chalk = require('chalk');
const express = require('express');
const http = require('http');
const React = require('react');

const {renderToPipeableStream} = require('react-dom/server');
const {createFromNodeStream} = require('react-server-dom-esm/client');

const moduleBasePath = new URL('../src', url.pathToFileURL(__filename)).href;

const app = express();

app.use(compress());

function request(options, body) {
  return new Promise((resolve, reject) => {
    const

al server.
  const proxiedHeaders = {
    'X-Forwarded-Host': req.hostname,
    'X-Forwarded-For': req.ips,
    'X-Forwarded-Port': 3000,
    'X-Forwarded-Proto': req.protocol,
  };
  // Proxy other headers as desired.
  if (req.get('rsc-action')) {
    pr

req = http.request(options, res => {
      resolve(res);
    });
    req.on('error', e => {
      reject(e);
    });
    body.pipe(req);
  });
}

app.all('/', async function (req, res, next) {
  // Proxy the request to the region


earlier Node versions.
  global.fetch = require('undici').fetch;
}

const express = require('express');
const bodyParser = require('body-parser');
const busboy = require('busboy');
const app = express();
const compress = require('compression');
const {Readable} = require('node:stream');

const nodeModule = require('node:module');

app.use(compress());

// Application

const {readFile} = require('fs').promises;

const React = require('react');

const moduleBasePath = new URL('../src', url.pathToFileURL(__fil

.createElement(App);
  // For client-invoked server actions we refresh the tree and return a return value.
  const payload = returnValue ? {returnValue, root} : root;
  const {pipe} = renderToPipeableStream(payload, moduleBasePath);
  pipe(res);
}

app.get

ename)).href;

async function renderApp(res, returnValue) {
  const {renderToPipeableStream} = await import('react-server-dom-esm/server');
  const m = await import('../src/App.js');

  const App = m.default;
  const root = React


quire('http');
const {Readable} = require('stream');
const webpack = require('webpack');

const {clientManifest, ssrManifest} = require('./webpack-mock');
const {
  renderFizzNode,
  renderFizzEdge,
  renderFlightFizzNode,
  renderFlightFizzEdge,
} = require('./render-helpers');
const {printGrid} = require('./print-helpers');

// ---------------------------------------------------------------------------
// Build
// ---------------------------------------------------------------------------

function build(

rs()) {
        reject(new Error(stats.toString({errors: true})));
        return;
      }
      console.log(
        stats.toString({colors: true, modules: false, entrypoints: false})
      );
      resolve();
    });
  });
}

// -------------------------

) {
  const config = require('./webpack.config');
  return new Promise(function (resolve, reject) {
    webpack(config, function (err, stats) {
      if (err) {
        reject(err);
        return;
      }
      if (stats.hasErro


omise(function (resolve, reject) {
    webpack(config, function (err, stats) {
      if (err) {
        reject(err);
        return;
      }
      if (stats.hasErrors()) {
        reject(new Error(stats.toString({errors: true})));
        return;
      }
      console.log(
        stats.toString({colors: true, modules: false, entrypoints: false})
      );
      resolve();
    });
  });
}

// ---------------------------------------------------------------------------
// Render helpers
// --------------------

ightFizzEdgeStream,
  nodeStreamToString,
  webStreamToString,
} = require('./render-helpers');
const {printGrid} = require('./print-helpers');

function renderFizzNode(AppComponent, itemCount) {
  return nodeStreamToString(renderFizzNodeStream(AppComponen

-------------------------------------------------------

const {
  renderFizzNode: renderFizzNodeStream,
  renderFizzEdge: renderFizzEdgeStream,
  renderFlightFizzNode: renderFlightFizzNodeStream,
  renderFlightFizzEdge: renderFl


;

function printGrid(colHeaders, rows, getValue, unit, note) {
  const labelWidth = Math.max(
    ...rows.map(function (r) {
      return r[0].length;
    })
  );
  const suffix = unit ? ' ' + unit : '';
  const fmtVal = function (v) {
    return (v.toFixed(1) + suffix).padStart(10 + suffix.length);
  };
  const fmtPct = function (v) {
    return ((v >= 0 ? '+' : '') + v.toFixed(1) + '%').padStart(8);
  };
  const fmtFactor = function (va, vb) {
    return ((vb / va).toFixed(2) + 'x').padStart(7);
  };
  c

console.log('  ' + header);
  console.log('  ' + '-'.repeat(header.length));
  for (const [label, a, b] of rows) {
    const va = getValue(a);
    const vb = getValue(b);
    const pct = ((vb - va) / va) * 100;
    console.log(
      '  ' +
        label.p

onst colWidth = 10 + suffix.length;

  const header =
    ''.padEnd(labelWidth) +
    '  ' +
    colHeaders
      .map(function (h) {
        return h.padStart(colWidth);
      })
      .join('  ') +
    '     Delta   Factor';


;
  const {renderToPipeableStream} = require('react-dom/server');

  const output = new PassThrough();
  const {pipe} = renderToPipeableStream(
    React.createElement(AppComponent, {itemCount}),
    {
      onShellReady() {
        pipe(output);
      },
      onError(e) {
        console.error('Fizz Node error:', e);
        output.destroy(e);
      },
    }
  );
  return output;
}

// ---------------------------------------------------------------------------
// Fizz (Edge) — renders App directly via web

ire('react');
  const {renderToReadableStream} = require('react-dom/server');

  return renderToReadableStream(React.createElement(AppComponent, {itemCount}));
}

// ---------------------------------------------------------------------------
// Flight + Fi

 streams.
// Returns a promise that resolves to a web ReadableStream of HTML.
// ---------------------------------------------------------------------------

function renderFizzEdge(AppComponent, itemCount) {
  const React = requ


use strict';

const url = require('url');

// Webpack loader that runs in the RSC compilation.
// When a module starts with 'use client', it replaces the entire source
// with a client module proxy. This makes the RSC renderer serialize a
// client reference into the Flight stream instead of rendering the component.
module.exports = function rscClientRefLoader(source) {
  const trimmed = source.trimStart();
  if (
    trimmed.startsWith("'use client'") ||
    trimmed.startsWith('"use client"')
  ) {
    con

pathToFileURL(this.resourcePath).href;
    return [
      `const { createClientModuleProxy } = require('react-server-dom-webpack/server');`,
      `module.exports = createClientModuleProxy(${JSON.stringify(href)});`,
    ].join('\n');
  }
  return source;


 = require('path');
const url = require('url');
const fs = require('fs');

const clientModules = {};
const clientManifest = {};
const ssrModuleMap = {};
let moduleIdx = 0;

function registerClientModule(modulePath) {
  const id = String(moduleIdx++);
  const chunkId = 'chunk-' + id;
  const absPath = path.resolve(__dirname, modulePath);
  const actualExports = require(absPath);
  clientModules[id] = actualExports;

  const href = url.pathToFileURL(absPath).href;
  clientManifest[href] = {id, chunks: [chunkI

(__dirname, 'src/components'),
];
for (const dir of srcDirs) {
  if (!fs.existsSync(dir)) continue;
  for (const file of fs.readdirSync(dir)) {
    if (!file.endsWith('.js')) continue;
    const filePath = path.join(dir, file);
    const source = fs.readFi

d, absPath], name: '*'};
  ssrModuleMap[id] = {'*': {id, chunks: [chunkId, absPath], name: '*'}};
}

// Auto-register all 'use client' components by scanning src/
const srcDirs = [
  path.resolve(__dirname, 'src'),
  path.resolve


;

const path = require('path');

module.exports = {
  name: 'rsc',
  target: 'node',
  entry: './src/entry-rsc.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'rsc-bundle.js',
    library: {type: 'commonjs2'},
    clean: true,
  },
  resolve: {
    // This is the key: react-server condition makes `react` resolve to the
    // server variant that supports async components, server references, etc.
    conditionNames: ['react-server', 'node', 'require'],
    extensions: ['.js', '.js

ude: /node_modules/,
        loader: path.resolve(__dirname, 'rsc-client-ref-loader.js'),
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['@

x'],
  },
  module: {
    rules: [
      {
        // Custom loader that replaces 'use client' modules with client
        // reference proxies. Must run before babel.
        enforce: 'pre',
        test: /\.jsx?$/,
        excl


ort StatsGrid from './StatsGrid';
import ProductTable from './ProductTable';
import ActivityFeed from './ActivityFeed';
import ChartPanel from './ChartPanel';
import {generateProducts, generateActivities, generateStats} from './data';

export default function Dashboard({itemCount}) {
  const products = generateProducts(itemCount);
  const activities = generateActivities(Math.min(itemCount, 50));
  const stats = generateStats();

  return (
    <main className="dashboard">
      <div className="dashboard-hea

className="dashboard-grid">

          <ProductTable products={products} />

          <ChartPanel title="Revenue" data={stats.revenueByMonth} type="bar" />

der">

Dashboard Overview

          Welcome back. Here is what is happening with your store today.

      <StatsGrid stats={stats} />
      <div


;
import TableHeader from './TableHeader';
import Pagination from './Pagination';
import ActivityItem from './ActivityItem';
import ChartPanel from './ChartPanel';
import Skeleton from './Skeleton';
import {generateProducts, generateActivities, generateStats} from './data';

function fetchData(generator, ...args) {
  return new Promise(resolve => {
    setTimeout(() => resolve(generator(...args)), 1);
  });
}

function fetchDelayed(value, delayMs) {
  return new Promise(resolve => {
    setTimeout(() => res

u', label: 'SKU'},
  {key: 'category', label: 'Category'},
  {key: 'price', label: 'Price'},
  {key: 'stock', label: 'Stock'},
  {key: 'status', label: 'Status'},
  {key: 'rating', label: 'Rating'},
];

async function AsyncProductRow({product, delay}) {

olve(value), delayMs);
  });
}

async function AsyncStatsSection() {
  const stats = await fetchData(generateStats);
  return <StatsGrid stats={stats} />;
}

const productColumns = [
  {key: 'name', label: 'Product'},
  {key: 'sk


 FooterLink from './FooterLink';

const footerSections = [
  {
    title: 'Product',
    links: ['Features', 'Pricing', 'Changelog', 'Docs', 'API Reference'],
  },
  {
    title: 'Company',
    links: ['About', 'Blog', 'Careers', 'Press', 'Partners'],
  },
  {
    title: 'Support',
    links: ['Help Center', 'Contact', 'Status', 'Community', 'Security'],
  },
  {
    title: 'Legal',
    links: ['Privacy', 'Terms', 'Cookie Policy', 'Licenses', 'GDPR'],
  },
];

export default function Footer() {
  return (

              {section.links.map(link => (
                <li key={link}>
                  <FooterLink
                    href={'/' + link.toLowerCase().replace(/\s+/g, '-')}>
                    {link}
                  </FooterLink>
                </

        {footerSections.map(section => (

{section.title}


 TableRow from './TableRow';
import TableHeader from './TableHeader';
import Badge from './Badge';
import Pagination from './Pagination';

const columns = [
  {key: 'name', label: 'Product'},
  {key: 'sku', label: 'SKU'},
  {key: 'category', label: 'Category'},
  {key: 'price', label: 'Price'},
  {key: 'stock', label: 'Stock'},
  {key: 'status', label: 'Status'},
  {key: 'rating', label: 'Rating'},
];

export default function ProductTable({products}) {
  return (
    <div className="product-table-container"

  {columns.map(col => (
              <TableHeader key={col.key} column={col} />
            ))}
          </tr>
        </thead>
        <tbody>
          {products.map(product => (
            <TableRow key={product.id} product={product} columns={columns

>

Products

        {products.length} items


ion from './SidebarSection';
import Badge from './Badge';

const navItems = [
  {href: '/', label: 'Dashboard', icon: 'home'},
  {href: '/products', label: 'Products', icon: 'box', count: 142},
  {href: '/orders', label: 'Orders', icon: 'cart', count: 38},
  {href: '/customers', label: 'Customers', icon: 'users'},
  {href: '/analytics', label: 'Analytics', icon: 'chart'},
  {href: '/settings', label: 'Settings', icon: 'gear'},
];

const recentItems = [
  {id: 1, label: 'Order #1234', status: 'pending'},
  {

e className="sidebar">
      <nav className="sidebar-nav">
        <SidebarSection title="Navigation">
          {navItems.map(item => (
            <NavLink key={item.href} href={item.href} icon={item.icon}>
              {item.label}
              {item.

id: 2, label: 'Order #1235', status: 'shipped'},
  {id: 3, label: 'Order #1236', status: 'delivered'},
  {id: 4, label: 'Return #891', status: 'processing'},
];

export default function Sidebar({itemCount}) {
  return (
    <asid


use client';

import Badge from './Badge';

export default function TableRow({product, columns}) {
  return (

      {columns.map(col => (

          {col.key === 'status' ? (
            <Badge count={product[col.key]} variant="status" />
          ) : col.key === 'price' ? (
            ${product[col.key]}
          ) : col.key === 'rating' ? (
            <span className="ra

lassName="product-name-cell">
              {product.name}
              {product.category}

          ) : (
            product[col.key]
          )}

ting">
              ★ {product[col.key]}
              ({product.reviewCount})

          ) : col.key === 'name' ? (
            <div c


const activityTypes = [
  'order_placed',
  'order_shipped',
  'order_delivered',
  'refund_requested',
  'review_posted',
  'product_added',
  'stock_alert',
  'payment_received',
];
const userNames = [
  'Alice Johnson',
  'Bob Williams',
  'Carol Davis',
  'Dan Miller',
  'Eve Wilson',
  'Frank Moore',
  'Grace Taylor',
  'Henry Anderson',
  'Iris Thomas',
  'Jack Jackson',
];
const reviewTexts = [
  'Great product, exactly what I needed. The quality exceeded my expectations and shipping was fast.',
  '

d highly recommend to anyone looking for this type of item.',
  'Average product, nothing special. Does what it says but nothing more than that.',
];

export function generateProducts(count) {
  const products = [];
  for (let i = 0; i < count; i++) {

Decent value for the price. Some minor issues with packaging but the product itself works well.',
  'Not what I expected based on the description. Returning this item for a refund.',
  'Outstanding quality and craftsmanship. Woul


nst React = global.React;
const ReactDOM = global.ReactDOM;

class Counter extends React.unstable_AsyncComponent {
  state = {counter: 0};
  onCommit() {
    setImmediate(() => {
      this.setState(state => ({
        counter: state.counter + 1,
      }));
    });
  }
  componentDidMount() {
    this.onCommit();
  }
  componentDidUpdate() {
    this.onCommit();
  }
  render() {
    return <h1>{this.state.counter}</h1>;
  }
}

const interval = 200;
function block() {
  const endTime = performance.now() + in

e (performance.now() < endTime) {}
}
setInterval(block, interval);

// Should render a counter that increments approximately every second (the
// expiration time of a low priority update).
ReactDOM.render(<Counter />, document.getElementById('root'));
bloc


 Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @emails react-core
 */

'use strict';

const path = require('path');

const {ESLint} = require('eslint');

function getESLintInstance(format) {
  return new ESLint({
    useEslintrc: false,
    overrideConfigFile:
      __dirname + `../../../scripts/rollup/validate/eslintrc.${format}.js`,
    ignore: false,
  });
}

const esLints = {
  cjs: g

lts = await eslint.lintFiles([
    __dirname + '/' + folder + '/cjs/react-jsx-dev-runtime.development.js',
    __dirname + '/' + folder + '/cjs/react-jsx-dev-runtime.production.min.js',
    __dirname + '/' + folder + '/cjs/react-jsx-runtime.development.js'

etESLintInstance('cjs'),
};

// Performs sanity checks on bundles *built* by Rollup.
// Helps catch Rollup regressions.
async function lint(folder) {
  console.log(`Linting ` + folder);
  const eslint = esLints.cjs;

  const resu


[') === 0) {
        // This looks like an uncaught error from invokeGuardedCallback() wrapper
        // in development that is reported by jsdom. Ignore because it's noisy.
        return true;
      }
      if (format.indexOf('The above error occurred') === 0) {
        // This looks like an error addendum from ReactFiberErrorLogger.
        // Ignore it too.
        return true;
      }
    }
  } else {
    if (
      format != null &&
      typeof format.message === 'string' &&
      typeof format.stac

 return false;
}

function normalizeCodeLocInfo(str) {
  if (typeof str !== 'string') {
    return str;
  }
  // This special case exists only for the special source location in
  // ReactElementValidator. That will go away if we remove source locations.

k === 'string' &&
      args.length === 0
    ) {
      // In production, ReactFiberErrorLogger logs error objects directly.
      // They are noisy too so we'll try to ignore them.
      return true;
    }
  }
  // Looks legit


extends React.Component {
  render() {
    return
;
  }
};
let RequiredPropComponent = class extends React.Component {
  render() {
    return {this.props.prop};
  }
};
RequiredPropComponent.displayName = 'RequiredPropComponent';
RequiredPropComponent.propTypes = {prop: PropTypes.string.isRequired};

it('works', () => {
  const container = document.createElement('div');
  ReactDOM.render(
hello
, container);
  expect(container.textContent).toBe('hello');
});

it('returns a comple

tion);
  expect(element.props).toEqual(expectation);
});

it('allows a lower-case to be passed as the string type', () => {
  const element = <div />;
  expect(element.type).toBe('div');
  expect(element.key).toBe(null);
  expect(element.ref).toBe(null);

te element according to spec', () => {
  const element = <Component />;
  expect(element.type).toBe(Component);
  expect(element.key).toBe(null);
  expect(element.ref).toBe(null);
  const expectation = {};
  Object.freeze(expecta


0xead2;
var REACT_PROVIDER_TYPE = 0xeacd;
var REACT_CONTEXT_TYPE = 0xeace;
var REACT_FORWARD_REF_TYPE = 0xead0;
var REACT_SUSPENSE_TYPE = 0xead1;
var REACT_SUSPENSE_LIST_TYPE = 0xead8;
var REACT_MEMO_TYPE = 0xead3;
var REACT_LAZY_TYPE = 0xead4;
var REACT_BLOCK_TYPE = 0xead9;
var REACT_SERVER_BLOCK_TYPE = 0xeada;
var REACT_FUNDAMENTAL_TYPE = 0xead5;
var REACT_SCOPE_TYPE = 0xead7;
var REACT_OPAQUE_ID_TYPE = 0xeae0;
var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
var REACT_OFFSCREEN_TYPE = 0xeae2;
var REACT_LEGACY

olFor('react.fragment');
  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
  REACT_PROFILER_TYPE = symbolFor('react.profiler');
  REACT_PROVIDER_TYPE = symbolFor('react.provider');
  REACT_CONTEXT_TYPE = symbolFor('react.context');
  REACT_FORWARD

_HIDDEN_TYPE = 0xeae3;

if (typeof Symbol === 'function' && Symbol.for) {
  var symbolFor = Symbol.for;
  REACT_ELEMENT_TYPE = symbolFor('react.element');
  REACT_PORTAL_TYPE = symbolFor('react.portal');
  exports.Fragment = symb


d2;
var REACT_PROVIDER_TYPE = 0xeacd;
var REACT_CONTEXT_TYPE = 0xeace;
var REACT_FORWARD_REF_TYPE = 0xead0;
var REACT_SUSPENSE_TYPE = 0xead1;
var REACT_SUSPENSE_LIST_TYPE = 0xead8;
var REACT_MEMO_TYPE = 0xead3;
var REACT_LAZY_TYPE = 0xead4;
var REACT_BLOCK_TYPE = 0xead9;
var REACT_SERVER_BLOCK_TYPE = 0xeada;
var REACT_FUNDAMENTAL_TYPE = 0xead5;
var REACT_SCOPE_TYPE = 0xead7;
var REACT_OPAQUE_ID_TYPE = 0xeae0;
var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
var REACT_OFFSCREEN_TYPE = 0xeae2;
var REACT_LEGACY_HID

r('react.fragment');
  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
  REACT_PROFILER_TYPE = symbolFor('react.profiler');
  REACT_PROVIDER_TYPE = symbolFor('react.provider');
  REACT_CONTEXT_TYPE = symbolFor('react.context');
  REACT_FORWARD_REF

DEN_TYPE = 0xeae3;

if (typeof Symbol === 'function' && Symbol.for) {
  var symbolFor = Symbol.for;
  REACT_ELEMENT_TYPE = symbolFor('react.element');
  REACT_PORTAL_TYPE = symbolFor('react.portal');
  exports.Fragment = symbolFo


RICT_MODE_TYPE = symbolFor('react.strict_mode');
  REACT_PROFILER_TYPE = symbolFor('react.profiler');
  REACT_PROVIDER_TYPE = symbolFor('react.provider');
  REACT_CONTEXT_TYPE = symbolFor('react.context');
  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
  REACT_MEMO_TYPE = symbolFor('react.memo');
  REACT_LAZY_TYPE = symbolFor('react.lazy');
  REACT_BLOCK_TYPE = symbolFor('react.blo

 REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
}

var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbo

ck');
  REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
  REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
  REACT_SCOPE_TYPE = symbolFor('react.scope');
  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');


_MODE_TYPE = symbolFor('react.strict_mode');
  REACT_PROFILER_TYPE = symbolFor('react.profiler');
  REACT_PROVIDER_TYPE = symbolFor('react.provider');
  REACT_CONTEXT_TYPE = symbolFor('react.context');
  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
  REACT_MEMO_TYPE = symbolFor('react.memo');
  REACT_LAZY_TYPE = symbolFor('react.lazy');
  REACT_BLOCK_TYPE = symbolFor('react.block')

CT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
}

var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.it

;
  REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
  REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
  REACT_SCOPE_TYPE = symbolFor('react.scope');
  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
  REA


= 0xeacb;
var REACT_STRICT_MODE_TYPE = 0xeacc;
var REACT_PROFILER_TYPE = 0xead2;
var REACT_PROVIDER_TYPE = 0xeacd;
var REACT_CONTEXT_TYPE = 0xeace;
var REACT_FORWARD_REF_TYPE = 0xead0;
var REACT_SUSPENSE_TYPE = 0xead1;
var REACT_SUSPENSE_LIST_TYPE = 0xead8;
var REACT_MEMO_TYPE = 0xead3;
var REACT_LAZY_TYPE = 0xead4;
var REACT_BLOCK_TYPE = 0xead9;
var REACT_SERVER_BLOCK_TYPE = 0xeada;
var REACT_FUNDAMENTAL_TYPE = 0xead5;
var REACT_SCOPE_TYPE = 0xead7;
var REACT_OPAQUE_ID_TYPE = 0xeae0;
var REACT_DEBUG_TRACIN

 REACT_PORTAL_TYPE = symbolFor('react.portal');
  exports.Fragment = symbolFor('react.fragment');
  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
  REACT_PROFILER_TYPE = symbolFor('react.profiler');
  REACT_PROVIDER_TYPE = symbolFor('react.provi

G_MODE_TYPE = 0xeae1;
var REACT_OFFSCREEN_TYPE = 0xeae2;
var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;

if (typeof Symbol === 'function' && Symbol.for) {
  var symbolFor = Symbol.for;
  REACT_ELEMENT_TYPE = symbolFor('react.element');


eacb;
var REACT_STRICT_MODE_TYPE = 0xeacc;
var REACT_PROFILER_TYPE = 0xead2;
var REACT_PROVIDER_TYPE = 0xeacd;
var REACT_CONTEXT_TYPE = 0xeace;
var REACT_FORWARD_REF_TYPE = 0xead0;
var REACT_SUSPENSE_TYPE = 0xead1;
var REACT_SUSPENSE_LIST_TYPE = 0xead8;
var REACT_MEMO_TYPE = 0xead3;
var REACT_LAZY_TYPE = 0xead4;
var REACT_BLOCK_TYPE = 0xead9;
var REACT_SERVER_BLOCK_TYPE = 0xeada;
var REACT_FUNDAMENTAL_TYPE = 0xead5;
var REACT_SCOPE_TYPE = 0xead7;
var REACT_OPAQUE_ID_TYPE = 0xeae0;
var REACT_DEBUG_TRACING_MO

CT_PORTAL_TYPE = symbolFor('react.portal');
  exports.Fragment = symbolFor('react.fragment');
  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
  REACT_PROFILER_TYPE = symbolFor('react.profiler');
  REACT_PROVIDER_TYPE = symbolFor('react.provider'

DE_TYPE = 0xeae1;
var REACT_OFFSCREEN_TYPE = 0xeae2;
var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;

if (typeof Symbol === 'function' && Symbol.for) {
  var symbolFor = Symbol.for;
  REACT_ELEMENT_TYPE = symbolFor('react.element');
  REA


ds React.Component {
  render() {
    return
;
  }
};
let RequiredPropComponent = class extends React.Component {
  render() {
    return {this.props.prop};
  }
};
RequiredPropComponent.displayName = 'RequiredPropComponent';
RequiredPropComponent.propTypes = {prop: PropTypes.string.isRequired};

it('works', () => {
  const container = document.createElement('div');
  ReactDOM.render(
hello
, container);
  expect(container.textContent).toBe('hello');
});

it('returns a complete ele

  expect(element.props).toEqual(expectation);
});

it('allows a lower-case to be passed as the string type', () => {
  const element = <div />;
  expect(element.type).toBe('div');
  expect(element.key).toBe(null);
  expect(element.ref).toBe(null);
  const

ment according to spec', () => {
  const element = <Component />;
  expect(element.type).toBe(Component);
  expect(element.key).toBe(null);
  expect(element.ref).toBe(null);
  const expectation = {};
  Object.freeze(expectation);


    read: getSVGAttribute('additive'),
  },
  {
    name: 'alignment-baseline',
    containerTagName: 'svg',
    tagName: 'textPath',
    read: getSVGAttribute('alignment-baseline'),
  },
  {
    name: 'alignmentBaseline',
    containerTagName: 'svg',
    tagName: 'textPath',
    read: getSVGAttribute('alignment-baseline'),
  },
  {
    name: 'allowFullScreen',
    tagName: 'iframe',
    read: getProperty('allowFullscreen'),
  },
  {
    name: 'allowfullscreen',
    tagName: 'iframe',
    read: getProperty

',
    containerTagName: 'svg',
    tagName: 'font-face',
    read: getSVGAttribute('alphabetic'),
  },
  {name: 'alt', tagName: 'img'},
  {
    name: 'amplitude',
    containerTagName: 'svg',
    tagName: 'feFuncA',
    read: getSVGProperty('amplitude'),

('allowFullscreen'),
  },
  {name: 'allowFullscreen', tagName: 'iframe'},
  {
    name: 'allowReorder',
    containerTagName: 'svg',
    tagName: 'switch',
    read: getSVGAttribute('allowReorder'),
  },
  {
    name: 'alphabetic


equire('fs');
const path = require('path');
const child_process = require('child_process');

const fixtureDirs = fs.readdirSync(__dirname).filter(file => {
  return fs.statSync(path.join(__dirname, file)).isDirectory();
});

const cmdArgs = [
  {cmd: 'yarn', args: ['install']},
  {cmd: 'yarn', args: ['build']},
];

function buildFixture(cmdArg, path) {
  const opts = {
    cwd: path,
    stdio: 'inherit',
  };
  const result = child_process.spawnSync(cmdArg.cmd, cmdArg.args, opts);
  if (result.status !== 0

to be built
    const devPath = path.join(__dirname, dir, 'dev');

    if (fs.existsSync(devPath)) {
      buildFixture(cmdArg, devPath);
    }
    const prodPath = path.join(__dirname, dir, 'prod');

    if (fs.existsSync(prodPath)) {
      buildFixture(c

) {
    throw new Error(`Failed to build fixtures!`);
  }
}

fixtureDirs.forEach(dir => {
  cmdArgs.forEach(cmdArg => {
    // we only care about directories that have DEV and PROD directories in
    // otherwise they don't need


bore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut en


 from 'react';
import {renderToPipeableStream} from 'react-dom/server';

import App from '../src/components/App.js';

let assets;
if (process.env.NODE_ENV === 'development') {
  // Use the bundle from create-react-app's server in development mode.
  assets = {
    'main.js': '/static/js/bundle.js',
    // 'main.css': '',
  };
} else {
  assets = require('../build/asset-manifest.json').files;
}

export default function render(url, res) {
  res.socket.on('error', error => {
    // Log fatal errors
    console

 // If something errored before we started streaming, we set the error code appropriately.
        res.statusCode = didError ? 500 : 200;
        res.setHeader('Content-type', 'text/html');
        pipe(res);
      },
      onShellError(x) {
        // Som

.error('Fatal', error);
  });
  let didError = false;
  const {pipe, abort} = renderToPipeableStream(
    <App assets={assets} initialURL={url} />,
    {
      bootstrapScripts: [assets['main.js']],
      onShellReady() {


or nisi in leo congue rutrum. Morbi sed ante posuere,
          aliquam lorem ac, imperdiet orci. Duis malesuada gravida pharetra.
          Cras facilisis arcu diam, id dictum lorem imperdiet a. Suspendisse
          aliquet tempus tortor et ultricies. Aliquam libero velit, posuere
          tempus ante sed, pellentesque tincidunt lorem. Nullam iaculis, eros a
          varius aliquet, tortor felis tempor metus, nec cursus felis eros
          aliquam nulla. Vivamus ut orci sed mauris congue lacinia. Cras

ta risus vitae
          pretium posuere. Fusce facilisis eros in lacus tincidunt congue.
        </p>
      </Suspense>
      <Suspense fallback={null}>
        <p>
          Pellentesque habitant morbi tristique senectus et netus et malesuada
          f

eget
          blandit neque. Pellentesque a massa in turpis ullamcorper volutpat vel
          at massa. Sed ante est, auctor non diam non, vulputate ultrices metus.
          Maecenas dictum fermentum quam id aliquam. Donec por


const babelRegister = require('babel-register');
const proxy = require('http-proxy-middleware');

babelRegister({
  ignore: /\/(build|node_modules)\//,
  presets: ['react-app'],
});

const express = require('express');
const path = require('path');

const app = express();

// Application
if (process.env.NODE_ENV === 'development') {
  app.get('/', function (req, res) {
    // In development mode we clear the module cache between each request to
    // get automatic hot reloading.
    for (var key in requir

der(req.url, res);
  });
}

// Static resources
app.use(express.static(path.resolve(__dirname, '..', 'build')));

// Proxy everything else to create-react-app's webpack development server
if (process.env.NODE_ENV === 'development') {
  app.use(
    '/',

e.cache) {
      delete require.cache[key];
    }
    const render = require('./render').default;
    render(req.url, res);
  });
} else {
  const render = require('./render').default;
  app.get('/', function (req, res) {
    ren


ent, commentSource}) {
  const currentUserID = comment.viewer.id;
  const environment = RelayEnvironment.forUser(currentUserID);
  const commentID = nullthrows(comment.id);
  useEffect(() => {
    const subscription = SubscriptionCounter.subscribeOnce(
      `StoreSubscription_${commentID}`,
      () =>
        StoreSubscription.subscribe(
          environment,
          {
            comment_id: commentID,
          },
          currentUserID,
          commentSource
        )
    );
    return () => subs

}
function UseEffectWithEmptyDependencies() {
  useEffect(() => {
    const local = {};
    console.log(local);
  }, []);
}

// OK because `props` wasn't defined.
function ComponentWithNoPropsDefined() {
  useEffect(() => {
    console.log(props.foo);
  },

cription.dispose();
  }, [commentID, commentSource, currentUserID, environment]);
}

// Valid because no dependencies
function UseEffectWithNoDependencies() {
  const local = {};
  useEffect(() => {
    console.log(local);
  });


ct, {Component} from 'react';

class Editor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      code: props.code,
    };
  }

  render() {
    return (
      <div
        style={{
          height: '100%',
          width: '100%',
        }}>
        <textarea
          value={this.state.code}
          onChange={e => this.setState({code: e.target.value})}
          style={{
            height: '80%',
            width: '100%',
            fontSize: '15px',
          }}

  <div style={{height: '20%', textAlign: 'center'}}>
          <button
            onClick={() => this.props.onClose(this.state.code)}
            style={{fontSize: 'large'}}>
            Run
          </button>
        </div>
      </div>
    );
  }
}

ex


();

function getFiberUniqueID(fiber) {
  if (!fiberIDMap.has(fiber)) {
    fiberIDMap.set(fiber, nextFiberID++);
  }
  return fiberIDMap.get(fiber);
}

function getFriendlyTag(tag) {
  switch (tag) {
    case 0:
      return '[indeterminate]';
    case 1:
      return '[fn]';
    case 2:
      return '[class]';
    case 3:
      return '[root]';
    case 4:
      return '[portal]';
    case 5:
      return '[host]';
    case 6:
      return '[text]';
    case 7:
      return '[coroutine]';
    case 8:

rk',
    2: 'Placement',
    4: 'Update',
    8: 'Deletion',
    16: 'Content reset',
    32: 'Callback',
    64: 'Err',
    128: 'Ref',
  };
  return Object.keys(effects)
    .filter(flag => flag & flags)
    .map(flag => effects[flag])
    .join(' & ');

  return '[handler]';
    case 9:
      return '[yield]';
    case 10:
      return '[frag]';
    default:
      throw new Error('Unknown tag.');
  }
}

function getFriendlyEffect(flags) {
  const effects = {
    1: 'Performed Wo


ion, useOptimistic} from 'react';
import {deleteTodo, setTodoComplete, type Todo as ITodo} from './actions';

export function TodoItem({
  todo,
  isSelected,
}: {
  todo: ITodo;
  isSelected: boolean;
}) {
  let [isOptimisticComplete, setOptimisticComplete] = useOptimistic(
    todo.isComplete,
  );

  return (
    <li data-selected={isSelected || undefined}>
      <input
        type="checkbox"
        checked={isOptimisticComplete}
        onChange={e => {
          startTransition(async () => {

     await setTodoComplete(todo.id, e.target.checked);
          });
        }}
      />
      <a
        href={`/todos/${todo.id}`}
        aria-current={isSelected ? 'page' : undefined}>
        {todo.title}
      </a>
      <button onClick={() => delete


Response,
} from 'express';
import {Readable} from 'node:stream';
import type {ReadableStream as NodeReadableStream} from 'stream/web';
import {
  renderToReadableStream,
  loadServerAction,
  decodeReply,
  decodeAction,
} from 'react-server-dom-parcel/server.edge';
import {injectRSCPayload} from 'rsc-html-stream/server';

// Client dependencies, used for SSR.
// These must run in the same environment as client components (e.g. same instance of React).
import {createFromReadableStream} from 'react-server-d

'react-client'};

// Page components. These must have "use server-entry" so they are treated as code splitting entry points.
import {Todos} from './Todos';

const app = express();

app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-M

om-parcel/client.edge' with {env: 'react-client'};
import {renderToReadableStream as renderHTMLToReadableStream} from 'react-dom/server.edge' with {env: 'react-client'};
import ReactClient, {ReactElement} from 'react' with {env:


var Circle = require('react-art/Circle');
var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Transform = ReactART.Transform;

var MOUSE_UP_DRAG = 0.978;
var MOUSE_DOWN_DRAG = 0.9;
var MAX_VEL = 11;
var CLICK_ACCEL = 3;
var BASE_VEL = 0.15;

/**
 * An animated SVG component.
 */
class VectorWidget extends React.Component {
  /**
   * Initialize state members.
   */
  state = {degrees: 0, velocity: 0,

ation loop that invokes our
   * method. Binding of `this.onTick` is not needed because all React methods
   * are automatically bound before being mounted.
   */
  componentDidMount() {
    this._interval = window.setInterval(this.onTick, 20);
  }

  comp

 drag: MOUSE_UP_DRAG};

  /**
   * When the component is mounted into the document - this is similar to a
   * constructor, but invoked when the instance is actually mounted into the
   * document. Here, we'll just set up an anim


nder the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

export default function Html({assets, children, title}) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="stylesheet" href={assets['main.css']} />
        <title>{title}</title>
      </head>
      <body>
        <noscript

 `<b>Enable JavaScript to run this app.</b>`,
          }}
        />
        {children}
        <script
          dangerouslySetInnerHTML={{
            __html: `assetManifest = ${JSON.stringify(assets)};`,
          }}
        />
      </body>
    </html

      dangerouslySetInnerHTML={{
            __html:


 Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import {createContext, useContext} from 'react';

// Note: this file does not demonstrate a real data fetching strategy.
// We only use this to simulate data fetching happening on the server
// while the cache is populated on the client. In a real app, you would
// instead use a data fetching library or Server Components

 streamed with the HTML.
// We haven't integrated this part yet, so we'll just use fake data.
const fakeData = [
  "Wait, it doesn't wait for React to load?",
  'How does this even work?',
  'I like marshmallows',
];

export function useData() {
  const ct

for this.

const DataContext = createContext(null);

export function DataProvider({children, data}) {
  return <DataContext.Provider value={data}>{children}</DataContext.Provider>;
}

// In a real implementation the data would be


alue: {
      toString() {
        return 'result of toString()';
      },
    },
    testDisplayValue: "{ toString() { return 'result of toString()'; } }",
  },
  {
    name: 'numeric string',
    testValue: '42',
    displayValue: "'42'",
  },
  {
    name: '-1',
    testValue: -1,
  },
  {
    name: '0',
    testValue: 0,
  },
  {
    name: 'integer',
    testValue: 1,
  },
  {
    name: 'NaN',
    testValue: NaN,
  },
  {
    name: 'float',
    testValue: 99.99,
  },
  {
    name: 'true',
    testValue:

e'",
  },
  {
    name: "string 'on'",
    testValue: 'on',
    displayValue: "'on'",
  },
  {
    name: "string 'off'",
    testValue: 'off',
    displayValue: "'off'",
  },
  {
    name: 'symbol',
    testValue: Symbol('foo'),
    testDisplayValue: "Symb

 true,
  },
  {
    name: 'false',
    testValue: false,
  },
  {
    name: "string 'true'",
    testValue: 'true',
    displayValue: "'true'",
  },
  {
    name: "string 'false'",
    testValue: 'false',
    displayValue: "'fals


const babelRegister = require('@babel/register');
const proxy = require('http-proxy-middleware');

babelRegister({
  ignore: [/\/(build|node_modules)\//],
  presets: ['react-app'],
});

const express = require('express');
const path = require('path');

const app = express();

// Application
if (process.env.NODE_ENV === 'development') {
  app.get('/', function (req, res) {
    // In development mode we clear the module cache between each request to
    // get automatic hot reloading.
    for (var key in req

, function (req, res) {
      render(req.url, res);
    });
  });
}

// Static resources
app.use(express.static(path.resolve(__dirname, '..', 'build')));

// Proxy everything else to create-react-app's webpack development server
if (process.env.NODE_ENV ==

uire.cache) {
      delete require.cache[key];
    }
    import('./render.js').then(({default: render}) => {
      render(req.url, res);
    });
  });
} else {
  import('./render.js').then(({default: render}) => {
    app.get('/'


, {Component} from 'react';

import Theme from './Theme';
import Suspend from './Suspend';

import './Page.css';

const autofocusedInputs = [
  <input key="0" autoFocus placeholder="Has auto focus" />,
  <input key="1" autoFocus placeholder="Has auto focus" />,
];

export default class Page extends Component {
  state = {active: false, value: ''};
  handleClick = e => {
    this.setState({active: true});
  };
  handleChange = e => {
    this.setState({value: e.target.value});
  };
  componentDidMount() {

text + '-box'}>
        <Suspend>

            A random number: {Math.random()}

Autofocus on page load: {autofocusedInputs}

{!this.state.active ? link : 'Thanks!'}</p

// Rerender on mount
    this.setState({mounted: true});
  }
  render() {
    const link = (

        Click Here

    );
    return (
      <div className={this.con


ibers from './describeFibers';

// The only place where we use it.
const ReactFiberInstrumentation =
  ReactNoop.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
    .ReactFiberInstrumentation;

function getFiberState(root, workInProgress) {
  if (!root) {
    return null;
  }
  return describeFibers(root.current, workInProgress);
}

const defaultCode = `
log('Render
Hello
');
ReactNoop.render(
Hello
);
ReactNoop.flush();

log('Render
Goodbye
');
ReactNoop.render(
Goodbye</h1

],
      currentStep: 0,
      show: {
        alt: false,
        child: true,
        sibling: true,
        return: false,
        fx: false,
      },
      graphSettings: {
        rankdir: 'TB',
        trackActive: true,
      },
    };
  }

  compon

>);
ReactNoop.flush();
`;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      code: localStorage.getItem('fiber-debugger-code') || defaultCode,
      isEditing: false,
      history: [


}

function Graph(props) {
  const {rankdir, trackActive} = props.settings;
  var g = new dagre.graphlib.Graph();
  g.setGraph({
    width: 1000,
    height: 1000,
    nodesep: 50,
    edgesep: 150,
    ranksep: 100,
    marginx: 100,
    marginy: 100,
    rankdir,
  });

  var edgeLabels = {};
  React.Children.forEach(props.children, function (child) {
    if (!child) {
      return;
    }
    if (child.type.isVertex) {
      g.setNode(child.key, {
        label: child,
        width: child.props.width,

ipKey] = [];
      }
      edgeLabels[relationshipKey].push(child);
    }
  });

  Object.keys(edgeLabels).forEach(key => {
    const children = edgeLabels[key];
    const child = children[0];
    g.setEdge(child.props.source, child.props.target, {
      l

       height: child.props.height,
      });
    } else if (child.type.isEdge) {
      const relationshipKey = child.props.source + ':' + child.props.target;
      if (!edgeLabels[relationshipKey]) {
        edgeLabels[relationsh


ight (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

'use strict';

const path = require('path');
const rimraf = require('rimraf');
const webpack = require('webpack');

const isProduction = process.env.NODE_ENV === 'production';
rimraf.sync(path.resolve(__dirname, '../build'));
webpack(
  {
    mode: isProduction ? 'production' : 'development',
    devtool: isProduction ? 'source

         test: /\.js$/,
          use: 'babel-loader',
          exclude: /node_modules/,
        },
      ],
    },
  },
  (err, stats) => {
    if (err) {
      console.error(err.stack || err);
      if (err.details) {
        console.error(err.details);

-map' : 'cheap-module-source-map',
    entry: [path.resolve(__dirname, '../src/index.js')],
    output: {
      path: path.resolve(__dirname, '../build'),
      filename: 'main.js',
    },
    module: {
      rules: [
        {


 Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import {Suspense, lazy} from 'react';
import {ErrorBoundary} from 'react-error-boundary';
import Html from './Html';
import Spinner from './Spinner';
import Layout from './Layout';
import NavBar from './NavBar';

const Comments = lazy(() => import('./Comments' /* webpackPrefetch: true */));
const Sidebar = lazy(() => import('./Sidebar' /* w

>
        <ErrorBoundary FallbackComponent={Error}>
          <Content />
        </ErrorBoundary>
      </Suspense>
    </Html>
  );
}

function Content() {
  return (
    <Layout>
      <NavBar />
      <aside className="sidebar">
        <Suspense fallb

ebpackPrefetch: true */));
const Post = lazy(() => import('./Post' /* webpackPrefetch: true */));

export default function App({assets}) {
  return (
    <Html assets={assets} title="Hello">
      <Suspense fallback={<Spinner />}


React from 'react';

import Button from './Button.js';
import Form from './Form.js';

import {like, greet} from './actions.js';

import {getServerState} from './ServerState.js';

const h = React.createElement;

export default async function App() {
  const res = await fetch('http://localhost:3001/todos');
  const todos = await res.json();
  return h(
    'html',
    {
      lang: 'en',
    },
    h(
      'head',
      null,
      h('meta', {
        charSet: 'utf-8',
      }),
      h('meta', {
        nam

})
    ),
    h(
      'body',
      null,
      h(
        'div',
        null,
        h('h1', null, getServerState()),
        h(
          'ul',
          null,
          todos.map(todo =>
            h(
              'li',
              {

e: 'viewport',
        content: 'width=device-width, initial-scale=1',
      }),
      h('title', null, 'Flight'),
      h('link', {
        rel: 'stylesheet',
        href: '/src/style.css',
        precedence: 'default',


from 'react';

import Chrome from './Chrome';
import Page from './Page';
import Page2 from './Page2';
import Theme from './Theme';

function LoadingIndicator() {
  let theme = useContext(Theme);
  return
Loading...
;
}

function Content() {
  let [CurrentPage, switchPage] = useState(() => Page);
  return (

Hello World

       switchPage(() => Page)}>
        Page 1

      {' | '}
      <a className="

   Page 2
      </a>
      <Suspense fallback={<LoadingIndicator />}>
        <CurrentPage />
      </Suspense>
    </div>
  );
}

export default function App({assets}) {
  return (
    <Chrome title="Hello World" assets={assets}>
      <Content />
    </C

link" onClick={() => switchPage(() => Page2)}>


Stream} from 'react-dom/server';
import {Writable} from 'stream';

import App from '../src/components/App';

let assets;
if (process.env.NODE_ENV === 'development') {
  // Use the bundle from create-react-app's server in development mode.
  assets = {
    'main.js': '/static/js/bundle.js',
    'main.css': '',
  };
} else {
  assets = require('../build/asset-manifest.json');
}

class ThrottledWritable extends Writable {
  constructor(destination) {
    super();
    this.destination = destination;
    this.de

imeout(write, this.delay);
        } else {
          callback(x);
        }
      });
    };
    setTimeout(write, this.delay);
  }

  _final(callback) {
    setTimeout(() => {
      this.destination.end(callback);
    }, this.delay);
  }
}

export defaul

lay = 10;
  }

  _write(chunk, encoding, callback) {
    let o = 0;
    const write = () => {
      this.destination.write(chunk.slice(o, o + 100), encoding, x => {
        o += 100;
        if (o < chunk.length) {
          setT


nt,
} from 'react';
import ReactDOM from 'react-dom/client';
import {
  createFromReadableStream,
  createFromFetch,
  encodeReply,
  setServerCallback,
} from 'react-server-dom-parcel/client';
import {rscStream} from 'rsc-html-stream/client';

// Stream in initial RSC payload embedded in the HTML.
let initialRSCPayload = createFromReadableStream<ReactElement>(rscStream);
let updateRoot:
  | ((root: ReactElement, cb?: (() => void) | null) => void)
  | null = null;

function Content() {
  // Store the curren

t, cb) => setRoot([root, cb ?? null]);
  useInsertionEffect(() => cb?.());
  return root;
}

// Hydrate initial page content.
startTransition(() => {
  ReactDOM.hydrateRoot(document, <Content />);
});

// A very simple router. When we navigate, we'll fetch

t root element in state, along with a callback
  // to call once rendering is complete.
  let [[root, cb], setRoot] = useState<[ReactElement, (() => void) | null]>([
    use(initialRSCPayload),
    null,
  ]);
  updateRoot = (roo


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

'use strict';

const babelRegister = require('@babel/register');
babelRegister({
  ignore: [/[\\\/](build|server\/server|node_modules)[\\\/]/],
  presets: [['react-app', {runtime: 'automatic'}]],
  plugins: ['@babel/transform-modules-commonjs'],
});

const express = require('express');
const compress = require('compression');
const {readFileSync} = require('fs');
co

.js')) {
    // Artificially delay serving JS
    // to demonstrate streaming HTML.
    setTimeout(next, JS_BUNDLE_DELAY);
  } else {
    next();
  }
});

app.use(compress());
app.get(
  '/',
  handleErrors(async function (req, res) {
    await waitForWebp

nst path = require('path');
const render = require('./render');
const {JS_BUNDLE_DELAY} = require('./delays');

const PORT = process.env.PORT || 4000;
const app = express();

app.use((req, res, next) => {
  if (req.url.endsWith('


entry';

import './client';
import './Todos.css';
import {Dialog} from './Dialog';
import {TodoDetail} from './TodoDetail';
import {TodoCreate} from './TodoCreate';
import {TodoList} from './TodoList';

export async function Todos({id}: {id?: number}) {
  return (

        <title>Todos</title>

Todos

          <Dialog trigger="+">

Add todo

            <TodoCreate />

log>

            <TodoList id={id} />

          {id != null ? <TodoDetail key={id} id={id} /> :
Select a todo
}

  );
}


 Suspense, startTransition} from 'react';

import Theme, {ThemeToggleButton} from './Theme';

import './Chrome.css';

import LargeContent from './LargeContent';

export default class Chrome extends Component {
  state = {theme: 'light'};
  render() {
    const assets = this.props.assets;
    return (
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="shortcut icon" href="favicon.ico" /

            __html: `<b>Enable JavaScript to run this app.</b>`,
            }}
          />
          <Suspense fallback="Loading...">
            <Theme.Provider value={this.state.theme}>
              <div>
                <ThemeToggleButton

>
          <link rel="stylesheet" href={assets['main.css']} />
          <title>{this.props.title}</title>
        </head>
        <body className={this.state.theme}>
          <noscript
            dangerouslySetInnerHTML={{


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import * as React from 'react';
// import {renderToString} from 'react-dom/server';
import {renderToPipeableStream} from 'react-dom/server';
import App from '../src/App';
import {DataProvider} from '../src/data';
import {API_DELAY, ABORT_DELAY} from './delays';

// In a real setup, you'd read it from webpack build stats.
let assets = {
  'main.js': '/main.js',
  'ma

/     <DataProvider data={data}>
  //       <App assets={assets} />
  //     </DataProvider>,
  //   )
  // );

  // The new wiring is a bit more involved.
  res.socket.on('error', error => {
    console.error('Fatal', error);
  });
  let didError = false;

in.css': '/main.css',
};

module.exports = function render(url, res) {
  const data = createServerData();
  // This is how you would wire it up previously:
  //
  // res.send(
  //   '<!DOCTYPE html>' +
  //   renderToString(
  /


, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import * as React from 'react';
import {renderToString} from 'react-dom/server';
import App from '../src/App';
import {API_DELAY, ABORT_DELAY} from './delays';
import {performance} from 'perf_hooks';

// In a real setup, you'd read it from webpack build stats.
let assets = {
  'main.js': '/main.js',
  'main.css': '/main.css',
};

let textEncoder = ne

rl, res) {
  let payload =
    '<!DOCTYPE html>' +
    renderToString(<App assets={assets} />) +
    '<script src="/main.js" async=""></script>';
  let arr = textEncoder.encode(payload);

  let buf = Buffer.from(arr);
  res.statusCode = 200;
  res.setHeade

w TextEncoder();

module.exports = function render(u


ct = window.React;

class Header extends React.Component {
  constructor(props, context) {
    super(props, context);
    const query = parse(window.location.search);
    const version = query.version || 'local';
    const production = query.production || false;
    const versions = [version];

    this.state = {version, versions, production};
  }
  handleVersionChange(version) {
    const query = parse(window.location.search);
    query.version = version;
    if (query.version === 'local') {
      delete q

     delete query.production;
    }
    window.location.search = stringify(query);
  }
  handleFixtureChange(event) {
    window.location.pathname = event.target.value;
  }
  render() {
    return (
      <header className="header">
        <div className=

uery.version;
    }
    window.location.search = stringify(query);
  }
  handleProductionChange(event) {
    const query = parse(window.location.search);
    query.production = event.target.checked;
    if (!query.production) {


= window.React;
const ReactDOM = window.ReactDOM;

class IframePortal extends React.Component {
  iframeRef = null;

  handleRef = ref => {
    if (ref !== this.iframeRef) {
      this.iframeRef = ref;
      if (ref) {
        if (ref.contentDocument && this.props.head) {
          ref.contentDocument.head.innerHTML = this.props.head;
        }
        // Re-render must take place in the next tick (Firefox)
        setTimeout(() => {
          this.forceUpdate();
        });
      }
    }
  };

  render() {

<div>
        <iframe
          title="Iframe portal"
          style={{border: 'none', height: this.props.height}}
          ref={this.handleRef}
        />
        {portal}
      </div>
    );
  }
}

class IframeSubtree extends React.Component {
  warned

    const ref = this.iframeRef;
    let portal = null;
    if (ref && ref.contentDocument) {
      portal = ReactDOM.createPortal(
        this.props.children,
        ref.contentDocument.body
      );
    }

    return (


ssueList from './IssueList';
import {parse} from 'query-string';
import {semverString} from './propTypes';

const React = window.React;

const propTypes = {
  children: PropTypes.node.isRequired,
  title: PropTypes.node.isRequired,
  resolvedIn: semverString,
  introducedIn: semverString,
  resolvedBy: PropTypes.string,
};

class TestCase extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      complete: false,
    };
  }

  handleChange = e => {
    thi

dren,
    } = this.props;

    let {complete} = this.state;

    const {version} = parse(window.location.search);
    const isTestFixed =
      !version || !resolvedIn || semver.gte(version, resolvedIn);

    complete = !isTestFixed || complete;

    retur

s.setState({
      complete: e.target.checked,
    });
  };

  render() {
    const {
      title,
      description,
      introducedIn,
      resolvedIn,
      resolvedBy,
      affectedBrowsers,
      relatedIssues,
      chil


s React.Component {
  constructor(props, context) {
    super(props, context);
    const version = props.version || 'local';
    const versions = [version];
    this.state = {versions};
  }

  componentWillMount() {
    getVersionTags().then(tags => {
      let versions = tags.map(tag => tag.name.slice(1));
      versions = [`local`, ...versions];
      this.setState({versions});
    });
  }

  onChange = event => {
    this.props.onChange(event.target.value);
  };

  render() {
    const {version, id, name

    return (
      <select id={id} name={name} value={version} onChange={this.onChange}>
        {versions.map(version => (
          <option key={version} value={version}>
            {version}
          </option>
        ))}
      </select>
    );
  }
}

} = this.props;
    const {versions} = this.state;


r">

DOM Test Fixtures

        Use this site to test browser quirks and other behavior that can not be
        captured through unit tests.

Tested Browsers

              Browser
              Versions

              Chrome - Desktop

                49*, Latest

                  ESR†

                , Latest

              Internet Explorer
              <

              Chrome - Android
              Latest

              Firefox Desktop


React = window.React;
const fixturePath = window.location.pathname;

/**
 * A simple routing component that renders the appropriate
 * fixture based on the location pathname.
 */
class FixturesPage extends React.Component {
  static defaultProps = {
    fixturePath: fixturePath === '/' ? '/home' : fixturePath,
  };

  state = {
    isLoading: true,
    error: null,
    Fixture: null,
  };

  componentDidMount() {
    this.loadFixture();
  }

  async loadFixture() {
    const {fixturePath} = this.props;

Loading: false});
    }
  }

  render() {
    const {Fixture, error, isLoading} = this.state;

    if (isLoading) {
      return null;
    }

    if (error) {
      return <FixtureError error={error} />;
    }

    return <Fixture />;
  }
}

function Fixtu

 try {
      const module = await import(`.${fixturePath}`);

      this.setState({Fixture: module.default});
    } catch (error) {
      console.error(error);
      this.setState({error});
    } finally {
      this.setState({is


../TestCase';
import Fixture from '../../Fixture';
import CompareDocumentPositionFragmentContainer from './CompareDocumentPositionFragmentContainer';

const React = window.React;

export default function CompareDocumentPositionCase() {
  return (
    <TestCase title="compareDocumentPosition">
      <TestCase.Steps>

Click the "Compare All Positions" button

      </TestCase.Steps>
      <TestCase.ExpectedResult>
        The compareDocumentPosition method compares the position of the fragment

ase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <CompareDocumentPositionFragmentContainer>
            <div
              style={{
                padding: '10px',
                backgroundColor: 'lightblue',
                borde

        relative to other elements in the DOM. The "Before Element" should be
        PRECEDING the fragment, and the "After Element" should be FOLLOWING.
        Elements inside the fragment should be CONTAINED_BY.
      </TestC


EMENTATION_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('I

   marginBottom: '8px',
        backgroundColor: '#f8f9fa',
        borderLeft: `4px solid ${color}`,
        borderRadius: '4px',
      }}>
      <div
        style={{
          fontWeight: 'bold',
          marginBottom: '6px',
          color: '#333',

MPLEMENTATION_SPECIFIC');
  return flags.length > 0 ? flags.join(' | ') : 'SAME';
}

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

  return (
    <div
      style={{
        padding: '10px 14px',


t;
const {Fragment, useRef, useState} = React;

function WrapperComponent(props) {
  return props.children;
}

const initialState = {
  child: false,
  parent: false,
  grandparent: false,
};

export default function EventListenerCase() {
  const fragmentRef = useRef(null);
  const [clickedState, setClickedState] = useState({...initialState});
  const [fragmentEventFired, setFragmentEventFired] = useState(false);
  const [bubblesState, setBubblesState] = useState(true);

  function setClick(id) {
    setCli

as regular click handlers, you can click each one to observe
          the status changing through standard bubbling.

Clear the clicked state

          Click the "Dispatch click event" button to dispatch a click

ckedState(prev => ({...prev, [id]: true}));
  }

  function fragmentClickHandler(e) {
    setFragmentEventFired(true);
  }

  return (
    <TestCase title="Event Dispatch">
      <TestCase.Steps>
        <li>
          Each box h


FragmentContainer({children}) {
  const fragmentRef = useRef(null);
  const [eventLog, setEventLog] = useState([]);
  const [listenerAdded, setListenerAdded] = useState(false);
  const [bubblesState, setBubblesState] = useState(true);

  const logEvent = message => {
    setEventLog(prev => [...prev, message]);
  };

  const fragmentClickHandler = () => {
    logEvent('Fragment event listener fired');
  };

  const addListener = () => {
    fragmentRef.current.addEventListener('click', fragmentClickHandler)

ogEvent('Removed click listener from fragment');
  };

  const dispatchClick = () => {
    fragmentRef.current.dispatchEvent(
      new MouseEvent('click', {bubbles: bubblesState})
    );
    logEvent(`Dispatched click event (bubbles: ${bubblesState})`);

;
    setListenerAdded(true);
    logEvent('Added click listener to fragment');
  };

  const removeListener = () => {
    fragmentRef.current.removeEventListener('click', fragmentClickHandler);
    setListenerAdded(false);
    l