import './ReactDOMClientInjection';
import { findDOMNode, render, hydrate, unmountComponentAtNode } from './ReactDOMLegacy';
import { createRoot, createBlockingRoot } from './ReactDOMRoot';
import {
batchedEventUpdates,
batchedUpdates,
discreteUpdates,
flushDiscreteUpdates,
flushSync,
attemptSynchronousHydration,
attemptUserBlockingHydration,
attemptContinuousHydration,
attemptHydrationAtCurrentPriority,
} from 'react-reconciler/src/ReactFiberReconciler';
import { createPortal as createPortalImpl } from 'react-reconciler/src/ReactPortal';
import { restoreControlledState } from './ReactDOMComponent';
import {
setAttemptSynchronousHydration,
setAttemptUserBlockingHydration,
setAttemptContinuousHydration,
setAttemptHydrationAtCurrentPriority,
} from '../events/ReactDOMEventReplaying';
import { setBatchingImplementation } from '../events/ReactDOMUpdateBatching';
import { setRestoreImplementation } from '../events/ReactDOMControlledComponent';
setAttemptSynchronousHydration(attemptSynchronousHydration);
setAttemptUserBlockingHydration(attemptUserBlockingHydration);
setAttemptContinuousHydration(attemptContinuousHydration);
setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
setRestoreImplementation(restoreControlledState);
setBatchingImplementation(
batchedUpdates,
discreteUpdates,
flushDiscreteUpdates,
batchedEventUpdates
);
function createPortal(children, container, key) {
return createPortalImpl(children, container, null, key);
}
export {
createPortal,
flushSync,
findDOMNode,
hydrate,
render,
unmountComponentAtNode,
createRoot,
createBlockingRoot,
};
const data = `
/**
* Copyright (c) Facebook, Inc. and its 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 {ReactNodeList} from 'shared/ReactTypes';
import type {Container} from './ReactDOMHostConfig';
import '../shared/checkReact';
import './ReactDOMClientInjection';
import {
findDOMNode,
render,
hydrate,
unstable_renderSubtreeIntoContainer,
unmountComponentAtNode,
} from './ReactDOMLegacy';
import {createRoot, createBlockingRoot, isValidContainer} from './ReactDOMRoot';
import {
batchedEventUpdates,
batchedUpdates,
discreteUpdates,
flushDiscreteUpdates,
flushSync,
flushControlled,
injectIntoDevTools,
flushPassiveEffects,
IsThisRendererActing,
attemptSynchronousHydration,
attemptUserBlockingHydration,
attemptContinuousHydration,
attemptHydrationAtCurrentPriority,
} from 'react-reconciler/src/ReactFiberReconciler';
import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
import {canUseDOM} from 'shared/ExecutionEnvironment';
import {
eventNameDispatchConfigs,
injectEventPluginsByName,
} from 'legacy-events/EventPluginRegistry';
import ReactVersion from 'shared/ReactVersion';
import invariant from 'shared/invariant';
import {warnUnstableRenderSubtreeIntoContainer} from 'shared/ReactFeatureFlags';
import {
getInstanceFromNode,
getNodeFromInstance,
getFiberCurrentPropsFromNode,
getClosestInstanceFromNode,
} from './ReactDOMComponentTree';
import {restoreControlledState} from './ReactDOMComponent';
import {dispatchEvent} from '../events/ReactDOMEventListener';
import {
setAttemptSynchronousHydration,
setAttemptUserBlockingHydration,
setAttemptContinuousHydration,
setAttemptHydrationAtCurrentPriority,
queueExplicitHydrationTarget,
} from '../events/ReactDOMEventReplaying';
import {setBatchingImplementation} from '../events/ReactDOMUpdateBatching';
import {
setRestoreImplementation,
enqueueStateRestore,
restoreStateIfNeeded,
} from '../events/ReactDOMControlledComponent';
setAttemptSynchronousHydration(attemptSynchronousHydration);
setAttemptUserBlockingHydration(attemptUserBlockingHydration);
setAttemptContinuousHydration(attemptContinuousHydration);
setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
let didWarnAboutUnstableCreatePortal = false;
let didWarnAboutUnstableRenderSubtreeIntoContainer = false;
if (__DEV__) {
if (
typeof Map !== 'function' ||
// $FlowIssue Flow incorrectly thinks Map has no prototype
Map.prototype == null ||
typeof Map.prototype.forEach !== 'function' ||
typeof Set !== 'function' ||
// $FlowIssue Flow incorrectly thinks Set has no prototype
Set.prototype == null ||
typeof Set.prototype.clear !== 'function' ||
typeof Set.prototype.forEach !== 'function'
) {
console.error(
'React depends on Map and Set built-in types. Make sure that you load a ' +
'polyfill in older browsers. https://fb.me/react-polyfills',
);
}
}
setRestoreImplementation(restoreControlledState);
setBatchingImplementation(
batchedUpdates,
discreteUpdates,
flushDiscreteUpdates,
batchedEventUpdates,
);
function createPortal(
children: ReactNodeList,
container: Container,
key: ?string = null,
): React$Portal {
invariant(
isValidContainer(container),
'Target container is not a DOM element.',
);
// TODO: pass ReactDOM portal implementation as third argument
// $FlowFixMe The Flow type is opaque but there's no way to actually create it.
return createPortalImpl(children, container, null, key);
}
function scheduleHydration(target: Node) {
if (target) {
queueExplicitHydrationTarget(target);
}
}
function renderSubtreeIntoContainer(
parentComponent: React$Component<any, any>,
element: React$Element<any>,
containerNode: Container,
callback: ?Function,
) {
if (__DEV__) {
if (
warnUnstableRenderSubtreeIntoContainer &&
!didWarnAboutUnstableRenderSubtreeIntoContainer
) {
didWarnAboutUnstableRenderSubtreeIntoContainer = true;
console.warn(
'ReactDOM.unstable_renderSubtreeIntoContainer() is deprecated ' +
'and will be removed in a future major release. Consider using ' +
'React Portals instead.',
);
}
}
return unstable_renderSubtreeIntoContainer(
parentComponent,
element,
containerNode,
callback,
);
}
function unstable_createPortal(
children: ReactNodeList,
container: Container,
key: ?string = null,
) {
if (__DEV__) {
if (!didWarnAboutUnstableCreatePortal) {
didWarnAboutUnstableCreatePortal = true;
console.warn(
'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
'and will be removed in React 17+. Update your code to use ' +
'ReactDOM.createPortal() instead. It has the exact same API, ' +
'but without the "unstable_" prefix.',
);
}
}
return createPortal(children, container, key);
}
const Internals = {
// Keep in sync with ReactTestUtils.js, and ReactTestUtilsAct.js.
// This is an array for better minification.
Events: [
getInstanceFromNode,
getNodeFromInstance,
getFiberCurrentPropsFromNode,
injectEventPluginsByName,
eventNameDispatchConfigs,
enqueueStateRestore,
restoreStateIfNeeded,
dispatchEvent,
flushPassiveEffects,
IsThisRendererActing,
],
};
export {
createPortal,
batchedUpdates as unstable_batchedUpdates,
flushSync,
Internals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
ReactVersion as version,
// Disabled behind disableLegacyReactDOMAPIs
findDOMNode,
hydrate,
render,
unmountComponentAtNode,
// exposeConcurrentModeAPIs
createRoot,
createBlockingRoot,
discreteUpdates as unstable_discreteUpdates,
flushDiscreteUpdates as unstable_flushDiscreteUpdates,
flushControlled as unstable_flushControlled,
scheduleHydration as unstable_scheduleHydration,
// Disabled behind disableUnstableRenderSubtreeIntoContainer
renderSubtreeIntoContainer as unstable_renderSubtreeIntoContainer,
// Disabled behind disableUnstableCreatePortal
// Temporary alias since we already shipped React 16 RC with it.
// TODO: remove in React 17.
unstable_createPortal,
};
const foundDevTools = injectIntoDevTools({
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: __DEV__ ? 1 : 0,
version: ReactVersion,
rendererPackageName: 'react-dom',
});
if (__DEV__) {
if (!foundDevTools && canUseDOM && window.top === window.self) {
// If we're in Chrome or Firefox, provide a download link if not installed.
if (
(navigator.userAgent.indexOf('Chrome') > -1 &&
navigator.userAgent.indexOf('Edge') === -1) ||
navigator.userAgent.indexOf('Firefox') > -1
) {
const protocol = window.location.protocol;
// Don't warn in exotic cases like chrome-extension://.
if (/^(https?|file):$/.test(protocol)) {
// eslint-disable-next-line react-internal/no-production-logging
console.info(
'%cDownload the React DevTools ' +
'for a better development experience: ' +
'https://fb.me/react-devtools' +
(protocol === 'file:'
? '\nYou might need to use a local HTTP server (instead of file://): ' +
'https://fb.me/react-devtools-faq'
: ''),
'font-weight:bold',
);
}
}
}
}
`;
/**
* @param {string} character
*/
const tokenizer = (character) => {
if (character.match(/\n/)) {
return "newline";
}
if (character.match(/\s/)) {
return "space";
}
return character.charCodeAt(0);
};
const tokens = data.split(/\w/).map((character) => {
return tokenizer(character);
});
const entryPoint = document.getElementById("entry");
const colors = ["#a9def9", "#ede7b1", "#f694c1", "#e4c1f9", "#d3f8e2"];
tokens.forEach((token) => {
const block = document.createElement("div");
if (token.toString() !== "newline") {
block.className = `block ${token.toString()}`;
const color = colors[Math.floor(Math.random() * colors.length)];
block.style.background = color;
} else block.className = "newline";
entryPoint.appendChild(block);
});
