Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d8a73b5eb6 | ||
|
|
741aa17a33 | ||
|
|
95c2b49543 | ||
|
|
55cf14f98e | ||
|
|
29b7b775f2 | ||
|
|
b668168d4d | ||
|
|
619cdfc624 |
23
.babelrc
Normal file
23
.babelrc
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"presets": ["react"],
|
||||
"ignore": ["third_party"],
|
||||
"plugins": [
|
||||
"transform-class-properties",
|
||||
"syntax-trailing-function-commas",
|
||||
["transform-object-rest-spread", { "useBuiltIns": true }],
|
||||
"transform-es2015-template-literals",
|
||||
"transform-es2015-literals",
|
||||
"transform-es2015-arrow-functions",
|
||||
"transform-es2015-block-scoped-functions",
|
||||
["transform-es2015-classes", { "loose": true }],
|
||||
"transform-es2015-object-super",
|
||||
"transform-es2015-shorthand-properties",
|
||||
"transform-es2015-computed-properties",
|
||||
"transform-es2015-for-of",
|
||||
"check-es2015-constants",
|
||||
["transform-es2015-spread", { "loose": true }],
|
||||
"transform-es2015-parameters",
|
||||
["transform-es2015-destructuring", { "loose": true }],
|
||||
["transform-es2015-block-scoping", { "throwIfClosureRequired": true }]
|
||||
]
|
||||
}
|
||||
@@ -1,538 +1,48 @@
|
||||
version: 2
|
||||
|
||||
aliases:
|
||||
- &docker
|
||||
- image: circleci/openjdk:8-jdk-node-browsers
|
||||
|
||||
- &environment
|
||||
TZ: /usr/share/zoneinfo/America/Los_Angeles
|
||||
|
||||
- &restore_yarn_cache
|
||||
restore_cache:
|
||||
name: Restore node_modules cache
|
||||
keys:
|
||||
- v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
- v2-node-{{ arch }}-{{ .Branch }}-
|
||||
- v2-node-{{ arch }}-
|
||||
- &run_yarn
|
||||
run:
|
||||
name: Install Packages
|
||||
command: yarn --frozen-lockfile
|
||||
|
||||
- &attach_workspace
|
||||
at: build
|
||||
|
||||
- &process_artifacts
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: node ./scripts/rollup/consolidateBundleSizes.js
|
||||
- run: ./scripts/circleci/pack_and_store_artifact.sh
|
||||
- store_artifacts:
|
||||
path: ./node_modules.tgz
|
||||
- store_artifacts:
|
||||
path: ./build.tgz
|
||||
- store_artifacts:
|
||||
path: ./build/bundle-sizes.json
|
||||
- store_artifacts:
|
||||
# TODO: Update release script to use local file instead of pulling
|
||||
# from artifacts.
|
||||
path: ./scripts/error-codes/codes.json
|
||||
- persist_to_workspace:
|
||||
root: build
|
||||
paths:
|
||||
- bundle-sizes.json
|
||||
|
||||
jobs:
|
||||
setup:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
build:
|
||||
|
||||
docker:
|
||||
- image: circleci/openjdk:8-jdk-node-browsers
|
||||
|
||||
environment:
|
||||
TZ: /usr/share/zoneinfo/America/Los_Angeles
|
||||
TRAVIS_REPO_SLUG: facebook/react
|
||||
|
||||
parallelism: 4
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
|
||||
- run: echo $CIRCLE_COMPARE_URL | cut -d/ -f7
|
||||
|
||||
- restore_cache:
|
||||
name: Restore node_modules cache
|
||||
keys:
|
||||
- v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
- v1-node-{{ arch }}-{{ .Branch }}-
|
||||
- v1-node-{{ arch }}-
|
||||
|
||||
- run:
|
||||
name: Nodejs Version
|
||||
command: node --version
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
|
||||
- run:
|
||||
name: Install Packages
|
||||
command: yarn install --frozen-lockfile
|
||||
|
||||
- run:
|
||||
name: Test Packages
|
||||
command: ./scripts/circleci/test_entry_point.sh
|
||||
|
||||
- save_cache:
|
||||
name: Save node_modules cache
|
||||
key: v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
key: v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- ~/.cache/yarn
|
||||
|
||||
yarn_lint:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: node ./scripts/prettier/index
|
||||
- run: node ./scripts/tasks/eslint
|
||||
- run: ./scripts/circleci/check_license.sh
|
||||
- run: ./scripts/circleci/check_modules.sh
|
||||
- run: ./scripts/circleci/test_print_warnings.sh
|
||||
|
||||
yarn_flow:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: node ./scripts/tasks/flow-ci
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_test:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=stable --ci
|
||||
|
||||
yarn_test:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --ci
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_test_www:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=www-classic --ci
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_test_www_variant:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=www-classic --variant --ci
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_test_prod_www:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=www-classic --prod --ci
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_test_prod_www_variant:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=www-classic --prod --variant --ci
|
||||
|
||||
yarn_test_www:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=www-modern --ci
|
||||
|
||||
yarn_test_www_variant:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=www-modern --variant --ci
|
||||
|
||||
yarn_test_prod_www:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=www-modern --prod --ci
|
||||
|
||||
yarn_test_prod_www_variant:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=www-modern --prod --variant --ci
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_test_persistent:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=stable --persistent --ci
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_test_prod:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=stable --prod --ci
|
||||
|
||||
yarn_test_prod:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=experimental --prod --ci
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_build:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
parallelism: 20
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: |
|
||||
./scripts/circleci/add_build_info_json.sh
|
||||
./scripts/circleci/update_package_versions.sh
|
||||
yarn build
|
||||
- run: echo "stable" >> build/RELEASE_CHANNEL
|
||||
- persist_to_workspace:
|
||||
root: build
|
||||
paths:
|
||||
- RELEASE_CHANNEL
|
||||
- facebook-www
|
||||
- facebook-react-native
|
||||
- node_modules
|
||||
- react-native
|
||||
- dist
|
||||
- sizes/*.json
|
||||
|
||||
yarn_build:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
parallelism: 20
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: experimental
|
||||
command: |
|
||||
./scripts/circleci/add_build_info_json.sh
|
||||
./scripts/circleci/update_package_versions.sh
|
||||
yarn build
|
||||
- run: echo "experimental" >> build/RELEASE_CHANNEL
|
||||
- persist_to_workspace:
|
||||
root: build
|
||||
paths:
|
||||
- RELEASE_CHANNEL
|
||||
- facebook-www
|
||||
- facebook-react-native
|
||||
- node_modules
|
||||
- react-native
|
||||
- dist
|
||||
- sizes/*.json
|
||||
|
||||
build_devtools_and_process_artifacts:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
parallelism: 20
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: experimental
|
||||
command: ./scripts/circleci/pack_and_store_devtools_artifacts.sh
|
||||
- store_artifacts:
|
||||
path: ./build/devtools.tgz
|
||||
path: ./node_modules.tgz
|
||||
|
||||
# These jobs are named differently so we can distinguish the stable and
|
||||
# and experimental artifacts
|
||||
process_artifacts: *process_artifacts
|
||||
process_artifacts_experimental: *process_artifacts
|
||||
|
||||
sizebot_stable:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
# This runs in the process_artifacts job, too, but it's faster to run
|
||||
# this step in both jobs instead of running the jobs sequentially
|
||||
- run: node ./scripts/rollup/consolidateBundleSizes.js
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: node ./scripts/tasks/danger
|
||||
|
||||
sizebot_experimental:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
# This runs in the process_artifacts job, too, but it's faster to run
|
||||
# this step in both jobs instead of running the jobs sequentially
|
||||
- run: node ./scripts/rollup/consolidateBundleSizes.js
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: experimental
|
||||
command: node ./scripts/tasks/danger
|
||||
|
||||
yarn_lint_build:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn lint-build
|
||||
- run: scripts/circleci/check_minified_errors.sh
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_lint_build:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: yarn lint-build
|
||||
- run: scripts/circleci/check_minified_errors.sh
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_test_build:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=stable --build --ci
|
||||
|
||||
yarn_test_build:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=experimental --build --ci
|
||||
|
||||
yarn_test_build_devtools:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --project=devtools --build --ci
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- run:
|
||||
name: Run DOM fixture tests
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: |
|
||||
cd fixtures/dom
|
||||
yarn --frozen-lockfile
|
||||
yarn prestart
|
||||
yarn test --maxWorkers=2
|
||||
|
||||
test_fuzz:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
name: Run fuzz tests
|
||||
command: |
|
||||
FUZZ_TEST_SEED=$RANDOM yarn test fuzz --ci
|
||||
FUZZ_TEST_SEED=$RANDOM yarn test --prod fuzz --ci
|
||||
|
||||
RELEASE_CHANNEL_stable_yarn_test_build_prod:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=stable --build --prod --ci
|
||||
|
||||
yarn_test_build_prod:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn test --release-channel=experimental --build --prod --ci
|
||||
|
||||
workflows:
|
||||
version: 2
|
||||
stable:
|
||||
jobs:
|
||||
- setup
|
||||
- yarn_lint:
|
||||
requires:
|
||||
- setup
|
||||
- yarn_flow:
|
||||
requires:
|
||||
- setup
|
||||
- RELEASE_CHANNEL_stable_yarn_test:
|
||||
requires:
|
||||
- setup
|
||||
- RELEASE_CHANNEL_stable_yarn_test_prod:
|
||||
requires:
|
||||
- setup
|
||||
- RELEASE_CHANNEL_stable_yarn_test_persistent:
|
||||
requires:
|
||||
- setup
|
||||
- RELEASE_CHANNEL_stable_yarn_test_www:
|
||||
requires:
|
||||
- setup
|
||||
- RELEASE_CHANNEL_stable_yarn_test_www_variant:
|
||||
requires:
|
||||
- setup
|
||||
- RELEASE_CHANNEL_stable_yarn_test_prod_www:
|
||||
requires:
|
||||
- setup
|
||||
- RELEASE_CHANNEL_stable_yarn_test_prod_www_variant:
|
||||
requires:
|
||||
- setup
|
||||
- RELEASE_CHANNEL_stable_yarn_build:
|
||||
requires:
|
||||
- setup
|
||||
- process_artifacts:
|
||||
requires:
|
||||
- RELEASE_CHANNEL_stable_yarn_build
|
||||
- sizebot_stable:
|
||||
requires:
|
||||
- RELEASE_CHANNEL_stable_yarn_build
|
||||
- RELEASE_CHANNEL_stable_yarn_lint_build:
|
||||
requires:
|
||||
- RELEASE_CHANNEL_stable_yarn_build
|
||||
- RELEASE_CHANNEL_stable_yarn_test_build:
|
||||
requires:
|
||||
- RELEASE_CHANNEL_stable_yarn_build
|
||||
- RELEASE_CHANNEL_stable_yarn_test_build_prod:
|
||||
requires:
|
||||
- RELEASE_CHANNEL_stable_yarn_build
|
||||
- RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
|
||||
requires:
|
||||
- RELEASE_CHANNEL_stable_yarn_build
|
||||
|
||||
experimental:
|
||||
jobs:
|
||||
- setup
|
||||
- yarn_test:
|
||||
requires:
|
||||
- setup
|
||||
- yarn_test_prod:
|
||||
requires:
|
||||
- setup
|
||||
- yarn_test_www:
|
||||
requires:
|
||||
- setup
|
||||
- yarn_test_www_variant:
|
||||
requires:
|
||||
- setup
|
||||
- yarn_test_prod_www:
|
||||
requires:
|
||||
- setup
|
||||
- yarn_test_prod_www_variant:
|
||||
requires:
|
||||
- setup
|
||||
- yarn_build:
|
||||
requires:
|
||||
- setup
|
||||
- process_artifacts_experimental:
|
||||
requires:
|
||||
- yarn_build
|
||||
- sizebot_experimental:
|
||||
requires:
|
||||
- yarn_build
|
||||
- yarn_test_build:
|
||||
requires:
|
||||
- yarn_build
|
||||
- yarn_test_build_prod:
|
||||
requires:
|
||||
- yarn_build
|
||||
- yarn_lint_build:
|
||||
requires:
|
||||
- yarn_build
|
||||
- yarn_test_build_devtools:
|
||||
requires:
|
||||
- yarn_build
|
||||
# FIXME: Temporarily disabled to unblock master.
|
||||
# - build_devtools_and_process_artifacts:
|
||||
# requires:
|
||||
# - yarn_build
|
||||
|
||||
fuzz_tests:
|
||||
triggers:
|
||||
- schedule:
|
||||
# Fuzz tests run hourly
|
||||
cron: "0 * * * *"
|
||||
filters:
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
jobs:
|
||||
- setup
|
||||
- test_fuzz:
|
||||
requires:
|
||||
- setup
|
||||
- store_artifacts:
|
||||
path: ./scripts/error-codes/codes.json
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
|
||||
"buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,scheduler/index,scheduler/tracing",
|
||||
"publishDirectory": {
|
||||
"react": "build/node_modules/react",
|
||||
"react-dom": "build/node_modules/react-dom",
|
||||
"scheduler": "build/node_modules/scheduler"
|
||||
},
|
||||
"sandboxes": ["new"]
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
# https://editorconfig.org
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
|
||||
@@ -12,10 +12,3 @@ scripts/bench/benchmarks/**/*.js
|
||||
|
||||
# React repository clone
|
||||
scripts/bench/remote-repo/
|
||||
|
||||
packages/react-devtools-core/dist
|
||||
packages/react-devtools-extensions/chrome/build
|
||||
packages/react-devtools-extensions/firefox/build
|
||||
packages/react-devtools-extensions/shared/build
|
||||
packages/react-devtools-inline/dist
|
||||
packages/react-devtools-shell/dist
|
||||
86
.eslintrc.js
86
.eslintrc.js
@@ -5,22 +5,25 @@ const {
|
||||
esNextPaths,
|
||||
} = require('./scripts/shared/pathsByLanguageVersion');
|
||||
|
||||
const restrictedGlobals = require('confusing-browser-globals');
|
||||
|
||||
const OFF = 0;
|
||||
const ERROR = 2;
|
||||
|
||||
module.exports = {
|
||||
extends: ['fbjs', 'prettier'],
|
||||
extends: 'fbjs',
|
||||
|
||||
// Stop ESLint from looking for a configuration file in parent folders
|
||||
root: true,
|
||||
'root': true,
|
||||
|
||||
plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
|
||||
plugins: [
|
||||
'jest',
|
||||
'no-for-of-loops',
|
||||
'react',
|
||||
'react-internal',
|
||||
],
|
||||
|
||||
parser: 'babel-eslint',
|
||||
parser: 'espree',
|
||||
parserOptions: {
|
||||
ecmaVersion: 8,
|
||||
ecmaVersion: 2017,
|
||||
sourceType: 'script',
|
||||
ecmaFeatures: {
|
||||
experimentalObjectRestSpread: true,
|
||||
@@ -32,26 +35,25 @@ module.exports = {
|
||||
rules: {
|
||||
'accessor-pairs': OFF,
|
||||
'brace-style': [ERROR, '1tbs'],
|
||||
'comma-dangle': [ERROR, 'always-multiline'],
|
||||
'consistent-return': OFF,
|
||||
'dot-location': [ERROR, 'property'],
|
||||
// We use console['error']() as a signal to not transform it:
|
||||
'dot-notation': [ERROR, {allowPattern: '^(error|warn)$'}],
|
||||
'dot-notation': ERROR,
|
||||
'eol-last': ERROR,
|
||||
eqeqeq: [ERROR, 'allow-null'],
|
||||
indent: OFF,
|
||||
'eqeqeq': [ERROR, 'allow-null'],
|
||||
'indent': OFF,
|
||||
'jsx-quotes': [ERROR, 'prefer-double'],
|
||||
'keyword-spacing': [ERROR, {after: true, before: true}],
|
||||
'no-bitwise': OFF,
|
||||
'no-inner-declarations': [ERROR, 'functions'],
|
||||
'no-multi-spaces': ERROR,
|
||||
'no-restricted-globals': [ERROR].concat(restrictedGlobals),
|
||||
'no-restricted-syntax': [ERROR, 'WithStatement'],
|
||||
'no-shadow': ERROR,
|
||||
'no-unused-expressions': ERROR,
|
||||
'no-unused-vars': [ERROR, {args: 'none'}],
|
||||
'no-use-before-define': OFF,
|
||||
'no-use-before-define': [ERROR, {functions: false, variables: false}],
|
||||
'no-useless-concat': OFF,
|
||||
quotes: [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
|
||||
'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
|
||||
'space-before-blocks': ERROR,
|
||||
'space-before-function-paren': OFF,
|
||||
'valid-typeof': [ERROR, {requireStringLiterals: true}],
|
||||
@@ -63,12 +65,6 @@ module.exports = {
|
||||
'no-var': ERROR,
|
||||
strict: ERROR,
|
||||
|
||||
// Enforced by Prettier
|
||||
// TODO: Prettier doesn't handle long strings or long comments. Not a big
|
||||
// deal. But I turned it off because loading the plugin causes some obscure
|
||||
// syntax error and it didn't seem worth investigating.
|
||||
'max-len': OFF,
|
||||
|
||||
// React & JSX
|
||||
// Our transforms set this automatically
|
||||
'react/jsx-boolean-value': [ERROR, 'always'],
|
||||
@@ -82,10 +78,7 @@ module.exports = {
|
||||
'react/react-in-jsx-scope': ERROR,
|
||||
'react/self-closing-comp': ERROR,
|
||||
// We don't care to do this
|
||||
'react/jsx-wrap-multilines': [
|
||||
ERROR,
|
||||
{declaration: false, assignment: false},
|
||||
],
|
||||
'react/jsx-wrap-multilines': [ERROR, {declaration: false, assignment: false}],
|
||||
|
||||
// Prevent for...of loops because they require a Symbol polyfill.
|
||||
// You can disable this rule for code that isn't shipped (e.g. build scripts and tests).
|
||||
@@ -95,10 +88,7 @@ module.exports = {
|
||||
// the second argument of warning/invariant should be a literal string
|
||||
'react-internal/no-primitive-constructors': ERROR,
|
||||
'react-internal/no-to-warn-dev-within-to-throw': ERROR,
|
||||
'react-internal/invariant-args': ERROR,
|
||||
'react-internal/warning-args': ERROR,
|
||||
'react-internal/no-production-logging': ERROR,
|
||||
'react-internal/no-cross-fork-imports': ERROR,
|
||||
'react-internal/warning-and-invariant-args': ERROR,
|
||||
},
|
||||
|
||||
overrides: [
|
||||
@@ -122,12 +112,10 @@ module.exports = {
|
||||
files: esNextPaths,
|
||||
parser: 'babel-eslint',
|
||||
parserOptions: {
|
||||
ecmaVersion: 8,
|
||||
sourceType: 'module',
|
||||
},
|
||||
rules: {
|
||||
'no-var': ERROR,
|
||||
'prefer-const': ERROR,
|
||||
strict: OFF,
|
||||
},
|
||||
},
|
||||
@@ -136,49 +124,15 @@ module.exports = {
|
||||
rules: {
|
||||
// https://github.com/jest-community/eslint-plugin-jest
|
||||
'jest/no-focused-tests': ERROR,
|
||||
'jest/valid-expect': ERROR,
|
||||
'jest/valid-expect-in-promise': ERROR,
|
||||
},
|
||||
},
|
||||
{
|
||||
files: [
|
||||
'**/__tests__/**/*.js',
|
||||
'scripts/**/*.js',
|
||||
'packages/*/npm/**/*.js',
|
||||
'packages/dom-event-testing-library/**/*.js',
|
||||
'packages/react-devtools*/**/*.js',
|
||||
],
|
||||
rules: {
|
||||
'react-internal/no-production-logging': OFF,
|
||||
'react-internal/warning-args': OFF,
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['packages/react-native-renderer/**/*.js'],
|
||||
globals: {
|
||||
nativeFabricUIManager: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['packages/react-transport-dom-webpack/**/*.js'],
|
||||
globals: {
|
||||
__webpack_chunk_load__: true,
|
||||
__webpack_require__: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
globals: {
|
||||
SharedArrayBuffer: true,
|
||||
|
||||
spyOnDev: true,
|
||||
spyOnDevAndProd: true,
|
||||
spyOnProd: true,
|
||||
__PROFILE__: true,
|
||||
__UMD__: true,
|
||||
__EXPERIMENTAL__: true,
|
||||
__VARIANT__: true,
|
||||
gate: true,
|
||||
trustedTypes: true,
|
||||
},
|
||||
};
|
||||
|
||||
14
.github/ISSUE_TEMPLATE.md
vendored
Normal file
14
.github/ISSUE_TEMPLATE.md
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
<!--
|
||||
Note: if the issue is about documentation or the website, please file it at:
|
||||
https://github.com/reactjs/reactjs.org/issues/new
|
||||
-->
|
||||
|
||||
**Do you want to request a *feature* or report a *bug*?**
|
||||
|
||||
**What is the current behavior?**
|
||||
|
||||
**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:**
|
||||
|
||||
**What is the expected behavior?**
|
||||
|
||||
**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**
|
||||
41
.github/ISSUE_TEMPLATE/bug_report.md
vendored
41
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@@ -1,41 +0,0 @@
|
||||
---
|
||||
name: "🐛 Bug Report"
|
||||
about: Report a reproducible bug or regression.
|
||||
title: 'Bug: '
|
||||
labels: 'Status: Unconfirmed'
|
||||
|
||||
---
|
||||
|
||||
<!--
|
||||
Please provide a clear and concise description of what the bug is. Include
|
||||
screenshots if needed. Please test using the latest version of the relevant
|
||||
React packages to make sure your issue has not already been fixed.
|
||||
-->
|
||||
|
||||
React version:
|
||||
|
||||
## Steps To Reproduce
|
||||
|
||||
1.
|
||||
2.
|
||||
|
||||
<!--
|
||||
Your bug will get fixed much faster if we can run your code and it doesn't
|
||||
have dependencies other than React. Issues without reproduction steps or
|
||||
code examples may be immediately closed as not actionable.
|
||||
-->
|
||||
|
||||
Link to code example:
|
||||
|
||||
<!--
|
||||
Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
|
||||
repository on GitHub, or provide a minimal code example that reproduces the
|
||||
problem. You may provide a screenshot of the application if you think it is
|
||||
relevant to your bug report. Here are some tips for providing a minimal
|
||||
example: https://stackoverflow.com/help/mcve.
|
||||
-->
|
||||
|
||||
## The current behavior
|
||||
|
||||
|
||||
## The expected behavior
|
||||
7
.github/ISSUE_TEMPLATE/config.yml
vendored
7
.github/ISSUE_TEMPLATE/config.yml
vendored
@@ -1,7 +0,0 @@
|
||||
contact_links:
|
||||
- name: 📃 Documentation Issue
|
||||
url: https://github.com/reactjs/reactjs.org/issues/new
|
||||
about: This issue tracker is not for documentation issues. Please file documentation issues here.
|
||||
- name: 🤔 Questions and Help
|
||||
url: https://reactjs.org/community/support.html
|
||||
about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.
|
||||
37
.github/PULL_REQUEST_TEMPLATE.md
vendored
37
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -1,27 +1,14 @@
|
||||
<!--
|
||||
Thanks for submitting a pull request!
|
||||
We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.
|
||||
**Before submitting a pull request,** please make sure the following is done:
|
||||
|
||||
Before submitting a pull request, please make sure the following is done:
|
||||
1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
|
||||
2. Run `yarn` in the repository root.
|
||||
3. If you've fixed a bug or added code that should be tested, add tests!
|
||||
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
|
||||
5. Run `yarn test-prod` to test in the production environment. It supports the same options as `yarn test`.
|
||||
6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect".
|
||||
7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
|
||||
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
|
||||
9. Run the [Flow](https://flowtype.org/) typechecks (`yarn flow`).
|
||||
10. If you haven't already, complete the CLA.
|
||||
|
||||
1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
|
||||
2. Run `yarn` in the repository root.
|
||||
3. If you've fixed a bug or added code that should be tested, add tests!
|
||||
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
|
||||
5. Run `yarn test-prod` to test in the production environment. It supports the same options as `yarn test`.
|
||||
6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect".
|
||||
7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
|
||||
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
|
||||
9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
|
||||
10. If you haven't already, complete the CLA.
|
||||
|
||||
Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html
|
||||
-->
|
||||
|
||||
## Summary
|
||||
|
||||
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
|
||||
|
||||
## Test Plan
|
||||
|
||||
<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. -->
|
||||
**Learn more about contributing:** https://reactjs.org/docs/how-to-contribute.html
|
||||
|
||||
34
.github/stale.yml
vendored
34
.github/stale.yml
vendored
@@ -1,34 +0,0 @@
|
||||
# Configuration for probot-stale - https://github.com/probot/stale
|
||||
# Number of days of inactivity before an issue becomes stale
|
||||
daysUntilStale: 90
|
||||
# Number of days of inactivity before a stale issue is closed
|
||||
daysUntilClose: 7
|
||||
# Issues with these labels will never be considered stale
|
||||
exemptLabels:
|
||||
- "Partner"
|
||||
- "React Core Team"
|
||||
- "Resolution: Backlog"
|
||||
- "Type: Bug"
|
||||
- "Type: Discussion"
|
||||
- "Type: Needs Investigation"
|
||||
- "Type: Regression"
|
||||
# Label to use when marking an issue as stale
|
||||
staleLabel: "Resolution: Stale"
|
||||
issues:
|
||||
# Comment to post when marking an issue as stale.
|
||||
markComment: >
|
||||
This issue has been automatically marked as stale.
|
||||
**If this issue is still affecting you, please leave any comment** (for example, "bump"), and we'll keep it open.
|
||||
We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
|
||||
# Comment to post when closing a stale issue.
|
||||
closeComment: >
|
||||
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!
|
||||
pulls:
|
||||
# Comment to post when marking a pull request as stale.
|
||||
markComment: >
|
||||
This pull request has been automatically marked as stale.
|
||||
**If this pull request is still relevant, please leave any comment** (for example, "bump"), and we'll keep it open.
|
||||
We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.
|
||||
# Comment to post when closing a stale pull request.
|
||||
closeComment: >
|
||||
Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!
|
||||
13
.gitignore
vendored
13
.gitignore
vendored
@@ -1,7 +1,6 @@
|
||||
.DS_STORE
|
||||
node_modules
|
||||
scripts/flow/*/.flowconfig
|
||||
.flowconfig
|
||||
*~
|
||||
*.pyc
|
||||
.grunt
|
||||
@@ -23,15 +22,3 @@ chrome-user-data
|
||||
.vscode
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
packages/react-devtools-core/dist
|
||||
packages/react-devtools-extensions/chrome/build
|
||||
packages/react-devtools-extensions/chrome/*.crx
|
||||
packages/react-devtools-extensions/chrome/*.pem
|
||||
packages/react-devtools-extensions/firefox/build
|
||||
packages/react-devtools-extensions/firefox/*.xpi
|
||||
packages/react-devtools-extensions/firefox/*.pem
|
||||
packages/react-devtools-extensions/shared/build
|
||||
packages/react-devtools-extensions/.tempUserDataDir
|
||||
packages/react-devtools-inline/dist
|
||||
packages/react-devtools-shell/dist
|
||||
1
.mailmap
1
.mailmap
@@ -88,7 +88,6 @@ Kevin Coughlin <kevintcoughlin@gmail.com> <kevincoughlin@tumblr.com>
|
||||
Krystian Karczewski <karcz.k@gmail.com>
|
||||
Kunal Mehta <k.mehta@berkeley.edu> <kunalm@fb.com>
|
||||
Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
|
||||
Lea Rosema <terabaud@gmail.com>
|
||||
Marcin K. <katzoo@github.mail>
|
||||
Mark Anderson <undernewmanagement@users.noreply.github.com>
|
||||
Mark Funk <mfunk86@gmail.com> <mark@boomtownroi.com>
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
packages/react-devtools-core/dist
|
||||
packages/react-devtools-extensions/chrome/build
|
||||
packages/react-devtools-extensions/firefox/build
|
||||
packages/react-devtools-extensions/shared/build
|
||||
packages/react-devtools-inline/dist
|
||||
packages/react-devtools-shell/dist
|
||||
@@ -8,7 +8,7 @@ module.exports = {
|
||||
jsxBracketSameLine: true,
|
||||
trailingComma: 'es5',
|
||||
printWidth: 80,
|
||||
parser: 'babel',
|
||||
parser: 'babylon',
|
||||
|
||||
overrides: [
|
||||
{
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
|
||||
173
CHANGELOG.md
173
CHANGELOG.md
@@ -1,155 +1,10 @@
|
||||
## 16.13.1 (March 19, 2020)
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix bug in legacy mode Suspense where effect clean-up functions are not fired. This only affects users who use Suspense for data fetching in legacy mode, which is not technically supported. ([@acdlite](https://github.com/acdlite) in [#18238](https://github.com/facebook/react/pull/18238))
|
||||
* Revert warning for cross-component updates that happen inside class render lifecycles (`componentWillReceiveProps`, `shouldComponentUpdate`, and so on). ([@gaearon](https://github.com/gaearon) in [#18330](https://github.com/facebook/react/pull/18330))
|
||||
|
||||
## 16.13.0 (February 26, 2020)
|
||||
|
||||
### React
|
||||
|
||||
* Warn when a string ref is used in a manner that's not amenable to a future codemod ([@lunaruan](https://github.com/lunaruan) in [#17864](https://github.com/facebook/react/pull/17864))
|
||||
* Deprecate `React.createFactory()` ([@trueadm](https://github.com/trueadm) in [#17878](https://github.com/facebook/react/pull/17878))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Warn when changes in `style` may cause an unexpected collision ([@sophiebits](https://github.com/sophiebits) in [#14181](https://github.com/facebook/react/pull/14181), [#18002](https://github.com/facebook/react/pull/18002))
|
||||
* Warn when a function component is updated during another component's render phase ([@acdlite](https://github.com/acdlite) in [#17099](https://github.com/facebook/react/pull/17099))
|
||||
* Deprecate `unstable_createPortal` ([@trueadm](https://github.com/trueadm) in [#17880](https://github.com/facebook/react/pull/17880))
|
||||
* Fix `onMouseEnter` being fired on disabled buttons ([@AlfredoGJ](https://github.com/AlfredoGJ) in [#17675](https://github.com/facebook/react/pull/17675))
|
||||
* Call `shouldComponentUpdate` twice when developing in `StrictMode` ([@bvaughn](https://github.com/bvaughn) in [#17942](https://github.com/facebook/react/pull/17942))
|
||||
* Add `version` property to ReactDOM ([@ealush](https://github.com/ealush) in [#15780](https://github.com/facebook/react/pull/15780))
|
||||
* Don't call `toString()` of `dangerouslySetInnerHTML` ([@sebmarkbage](https://github.com/sebmarkbage) in [#17773](https://github.com/facebook/react/pull/17773))
|
||||
* Show component stacks in more warnings ([@gaearon](https://github.com/gaearon) in [#17922](https://github.com/facebook/react/pull/17922), [#17586](https://github.com/facebook/react/pull/17586))
|
||||
|
||||
### Concurrent Mode (Experimental)
|
||||
|
||||
* Warn for problematic usages of `ReactDOM.createRoot()` ([@trueadm](https://github.com/trueadm) in [#17937](https://github.com/facebook/react/pull/17937))
|
||||
* Remove `ReactDOM.createRoot()` callback params and added warnings on usage ([@bvaughn](https://github.com/bvaughn) in [#17916](https://github.com/facebook/react/pull/17916))
|
||||
* Don't group Idle/Offscreen work with other work ([@sebmarkbage](https://github.com/sebmarkbage) in [#17456](https://github.com/facebook/react/pull/17456))
|
||||
* Adjust `SuspenseList` CPU bound heuristic ([@sebmarkbage](https://github.com/sebmarkbage) in [#17455](https://github.com/facebook/react/pull/17455))
|
||||
* Add missing event plugin priorities ([@trueadm](https://github.com/trueadm) in [#17914](https://github.com/facebook/react/pull/17914))
|
||||
* Fix `isPending` only being true when transitioning from inside an input event ([@acdlite](https://github.com/acdlite) in [#17382](https://github.com/facebook/react/pull/17382))
|
||||
* Fix `React.memo` components dropping updates when interrupted by a higher priority update ([@acdlite]((https://github.com/acdlite)) in [#18091](https://github.com/facebook/react/pull/18091))
|
||||
* Don't warn when suspending at the wrong priority ([@gaearon](https://github.com/gaearon) in [#17971](https://github.com/facebook/react/pull/17971))
|
||||
* Fix a bug with rebasing updates ([@acdlite](https://github.com/acdlite) and [@sebmarkbage](https://github.com/sebmarkbage) in [#17560](https://github.com/facebook/react/pull/17560), [#17510](https://github.com/facebook/react/pull/17510), [#17483](https://github.com/facebook/react/pull/17483), [#17480](https://github.com/facebook/react/pull/17480))
|
||||
|
||||
## 16.12.0 (November 14, 2019)
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix passive effects (`useEffect`) not being fired in a multi-root app. ([@acdlite](https://github.com/acdlite) in [#17347](https://github.com/facebook/react/pull/17347))
|
||||
|
||||
### React Is
|
||||
|
||||
* Fix `lazy` and `memo` types considered elements instead of components ([@bvaughn](https://github.com/bvaughn) in [#17278](https://github.com/facebook/react/pull/17278))
|
||||
|
||||
## 16.11.0 (October 22, 2019)
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix `mouseenter` handlers from firing twice inside nested React containers. [@yuanoook](https://github.com/yuanoook) in [#16928](https://github.com/facebook/react/pull/16928)
|
||||
* Remove `unstable_createRoot` and `unstable_createSyncRoot` experimental APIs. (These are available in the Experimental channel as `createRoot` and `createSyncRoot`.) ([@acdlite](http://github.com/acdlite) in [#17088](https://github.com/facebook/react/pull/17088))
|
||||
|
||||
## 16.10.2 (October 3, 2019)
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix regression in react-native-web by restoring order of arguments in event plugin extractors ([@necolas](https://github.com/necolas) in [#16978](https://github.com/facebook/react/pull/16978))
|
||||
|
||||
## 16.10.1 (September 28, 2019)
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix regression in Next.js apps by allowing Suspense mismatch during hydration to silently proceed ([@sebmarkbage](https://github.com/sebmarkbage) in [#16943](https://github.com/facebook/react/pull/16943))
|
||||
|
||||
## 16.10.0 (September 27, 2019)
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix edge case where a hook update wasn't being memoized. ([@sebmarkbage](http://github.com/sebmarkbage) in [#16359](https://github.com/facebook/react/pull/16359))
|
||||
* Fix heuristic for determining when to hydrate, so we don't incorrectly hydrate during an update. ([@sebmarkbage](http://github.com/sebmarkbage) in [#16739](https://github.com/facebook/react/pull/16739))
|
||||
* Clear additional fiber fields during unmount to save memory. ([@trueadm](http://github.com/trueadm) in [#16807](https://github.com/facebook/react/pull/16807))
|
||||
* Fix bug with required text fields in Firefox. ([@halvves](http://github.com/halvves) in [#16578](https://github.com/facebook/react/pull/16578))
|
||||
* Prefer `Object.is` instead of inline polyfill, when available. ([@ku8ar](http://github.com/ku8ar) in [#16212](https://github.com/facebook/react/pull/16212))
|
||||
* Fix bug when mixing Suspense and error handling. ([@acdlite](http://github.com/acdlite) in [#16801](https://github.com/facebook/react/pull/16801))
|
||||
|
||||
|
||||
### Scheduler (Experimental)
|
||||
|
||||
* Improve queue performance by switching its internal data structure to a min binary heap. ([@acdlite](http://github.com/acdlite) in [#16245](https://github.com/facebook/react/pull/16245))
|
||||
* Use `postMessage` loop with short intervals instead of attempting to align to frame boundaries with `requestAnimationFrame`. ([@acdlite](http://github.com/acdlite) in [#16214](https://github.com/facebook/react/pull/16214))
|
||||
|
||||
### useSubscription
|
||||
|
||||
* Avoid tearing issue when a mutation happens and the previous update is still in progress. ([@bvaughn](http://github.com/bvaughn) in [#16623](https://github.com/facebook/react/pull/16623))
|
||||
|
||||
## 16.9.0 (August 8, 2019)
|
||||
|
||||
### React
|
||||
|
||||
* Add `<React.Profiler>` API for gathering performance measurements programmatically. ([@bvaughn](https://github.com/bvaughn) in [#15172](https://github.com/facebook/react/pull/15172))
|
||||
* Remove `unstable_ConcurrentMode` in favor of `unstable_createRoot`. ([@acdlite](https://github.com/acdlite) in [#15532](https://github.com/facebook/react/pull/15532))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Deprecate old names for the `UNSAFE_*` lifecycle methods. ([@bvaughn](https://github.com/bvaughn) in [#15186](https://github.com/facebook/react/pull/15186) and [@threepointone](https://github.com/threepointone) in [#16103](https://github.com/facebook/react/pull/16103))
|
||||
* Deprecate `javascript:` URLs as a common attack surface. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15047](https://github.com/facebook/react/pull/15047))
|
||||
* Deprecate uncommon "module pattern" (factory) components. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15145](https://github.com/facebook/react/pull/15145))
|
||||
* Add support for the `disablePictureInPicture` attribute on `<video>`. ([@eek](https://github.com/eek) in [#15334](https://github.com/facebook/react/pull/15334))
|
||||
* Add support for `onLoad` event for `<embed>`. ([@cherniavskii](https://github.com/cherniavskii) in [#15614](https://github.com/facebook/react/pull/15614))
|
||||
* Add support for editing `useState` state from DevTools. ([@bvaughn](https://github.com/bvaughn) in [#14906](https://github.com/facebook/react/pull/14906))
|
||||
* Add support for toggling Suspense from DevTools. ([@gaearon](https://github.com/gaearon) in [#15232](https://github.com/facebook/react/pull/15232))
|
||||
* Warn when `setState` is called from `useEffect`, creating a loop. ([@gaearon](https://github.com/gaearon) in [#15180](https://github.com/facebook/react/pull/15180))
|
||||
* Fix a memory leak. ([@paulshen](https://github.com/paulshen) in [#16115](https://github.com/facebook/react/pull/16115))
|
||||
* Fix a crash inside `findDOMNode` for components wrapped in `<Suspense>`. ([@acdlite](https://github.com/acdlite) in [#15312](https://github.com/facebook/react/pull/15312))
|
||||
* Fix pending effects from being flushed too late. ([@acdlite](https://github.com/acdlite) in [#15650](https://github.com/facebook/react/pull/15650))
|
||||
* Fix incorrect argument order in a warning message. ([@brickspert](https://github.com/brickspert) in [#15345](https://github.com/facebook/react/pull/15345))
|
||||
* Fix hiding Suspense fallback nodes when there is an `!important` style. ([@acdlite](https://github.com/acdlite) in [#15861](https://github.com/facebook/react/pull/15861) and [#15882](https://github.com/facebook/react/pull/15882))
|
||||
* Slightly improve hydration performance. ([@bmeurer](https://github.com/bmeurer) in [#15998](https://github.com/facebook/react/pull/15998))
|
||||
|
||||
### React DOM Server
|
||||
|
||||
* Fix incorrect output for camelCase custom CSS property names. ([@bedakb](https://github.com/bedakb) in [#16167](https://github.com/facebook/react/pull/16167))
|
||||
|
||||
### React Test Utilities and Test Renderer
|
||||
|
||||
* Add `act(async () => ...)` for testing asynchronous state updates. ([@threepointone](https://github.com/threepointone) in [#14853](https://github.com/facebook/react/pull/14853))
|
||||
* Add support for nesting `act` from different renderers. ([@threepointone](https://github.com/threepointone) in [#16039](https://github.com/facebook/react/pull/16039) and [#16042](https://github.com/facebook/react/pull/16042))
|
||||
* Warn in Strict Mode if effects are scheduled outside an `act()` call. ([@threepointone](https://github.com/threepointone) in [#15763](https://github.com/facebook/react/pull/15763) and [#16041](https://github.com/facebook/react/pull/16041))
|
||||
* Warn when using `act` from the wrong renderer. ([@threepointone](https://github.com/threepointone) in [#15756](https://github.com/facebook/react/pull/15756))
|
||||
|
||||
### ESLint Plugin: React Hooks
|
||||
|
||||
* Report Hook calls at the top level as a violation. ([gaearon](https://github.com/gaearon) in [#16455](https://github.com/facebook/react/pull/16455))
|
||||
|
||||
## 16.8.6 (March 27, 2019)
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix an incorrect bailout in `useReducer()`. ([@acdlite](https://github.com/acdlite) in [#15124](https://github.com/facebook/react/pull/15124))
|
||||
* Fix iframe warnings in Safari DevTools. ([@renanvalentin](https://github.com/renanvalentin) in [#15099](https://github.com/facebook/react/pull/15099))
|
||||
* Warn if `contextType` is set to `Context.Consumer` instead of `Context`. ([@aweary](https://github.com/aweary) in [#14831](https://github.com/facebook/react/pull/14831))
|
||||
* Warn if `contextType` is set to invalid values. ([@gaearon](https://github.com/gaearon) in [#15142](https://github.com/facebook/react/pull/15142))
|
||||
|
||||
## 16.8.5 (March 22, 2019)
|
||||
|
||||
### React DOM
|
||||
|
||||
* Don't set the first option as selected in select tag with `size` attribute. ([@kulek1](https://github.com/kulek1) in [#14242](https://github.com/facebook/react/pull/14242))
|
||||
* Improve the `useEffect(async () => ...)` warning message. ([@gaearon](https://github.com/gaearon) in [#15118](https://github.com/facebook/react/pull/15118))
|
||||
* Improve the error message sometimes caused by duplicate React. ([@jaredpalmer](https://github.com/jaredpalmer) in [#15139](https://github.com/facebook/react/pull/15139))
|
||||
|
||||
### React DOM Server
|
||||
|
||||
* Improve the `useLayoutEffect` warning message when server rendering. ([@gaearon](https://github.com/gaearon) in [#15158](https://github.com/facebook/react/pull/15158))
|
||||
|
||||
### React Shallow Renderer
|
||||
|
||||
* Fix `setState` in shallow renderer to work with Hooks. ([@gaearon](https://github.com/gaearon) in [#15120](https://github.com/facebook/react/pull/15120))
|
||||
* Fix shallow renderer to support `React.memo`. ([@aweary](https://github.com/aweary) in [#14816](https://github.com/facebook/react/pull/14816))
|
||||
* Fix shallow renderer to support Hooks inside `forwardRef`. ([@eps1lon](https://github.com/eps1lon) in [#15100](https://github.com/facebook/react/pull/15100))
|
||||
## [Unreleased]
|
||||
<details>
|
||||
<summary>
|
||||
Changes that have landed in master but are not yet released.
|
||||
Click to see more.
|
||||
</summary>
|
||||
</details>
|
||||
|
||||
## 16.8.4 (March 5, 2019)
|
||||
|
||||
@@ -161,15 +16,11 @@
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix a bug that caused inputs to behave incorrectly in UMD builds. ([@gaearon](https://github.com/gaearon) in [#14914](https://github.com/facebook/react/pull/14914))
|
||||
* Fix a bug that caused render phase updates to be discarded. ([@gaearon](https://github.com/gaearon) in [#14852](https://github.com/facebook/react/pull/14852))
|
||||
- Fix a bug that caused inputs to behave incorrectly in UMD builds. ([@gaearon](https://github.com/gaearon) in [#14914](https://github.com/facebook/react/pull/14914))
|
||||
- Fix a bug that caused render phase updates to be discarded. ([@gaearon](https://github.com/gaearon) in [#14852](https://github.com/facebook/react/pull/14852))
|
||||
|
||||
### React DOM Server
|
||||
* Unwind the context stack when a stream is destroyed without completing, to prevent incorrect values during a subsequent render. ([@overlookmotel](https://github.com/overlookmotel) in [#14706](https://github.com/facebook/react/pull/14706/))
|
||||
|
||||
### ESLint Plugin for React Hooks
|
||||
|
||||
* Add a new recommended `exhaustive-deps` rule. ([@gaearon](https://github.com/gaearon) in [#14636](https://github.com/facebook/react/pull/14636))
|
||||
- Unwind the context stack when a stream is destroyed without completing, to prevent incorrect values during a subsequent render. ([@overlookmotel](https://github.com/overlookmotel) in [#14706](https://github.com/facebook/react/pull/14706/))
|
||||
|
||||
## 16.8.2 (February 14, 2019)
|
||||
|
||||
@@ -563,7 +414,7 @@ This release was published in a broken state and should be skipped.
|
||||
* Fix an issue with `this.state` of different components getting mixed up. ([@sophiebits](https://github.com/sophiebits) in [#12323](https://github.com/facebook/react/pull/12323))
|
||||
* Provide a better message when component type is undefined. ([@HeroProtagonist](https://github.com/HeroProtagonist) in [#11966](https://github.com/facebook/react/pull/11966))
|
||||
|
||||
### React Test Renderer
|
||||
## React Test Renderer
|
||||
|
||||
* Fix handling of fragments in `toTree()`. ([@maciej-ka](https://github.com/maciej-ka) in [#12107](https://github.com/facebook/react/pull/12107) and [@gaearon](https://github.com/gaearon) in [#12154](https://github.com/facebook/react/pull/12154))
|
||||
* Shallow renderer should assign state to `null` for components that don't set it. ([@jwbay](https://github.com/jwbay) in [#11965](https://github.com/facebook/react/pull/11965))
|
||||
@@ -782,7 +633,7 @@ Starting with 16.1.0, we will no longer be publishing new releases on Bower. You
|
||||
* Fix bug in QtWebKit when wrapping synthetic events in proxies. ([@walrusfruitcake](https://github.com/walrusfruitcake) in [#10115](https://github.com/facebook/react/pull/10011))
|
||||
* Prevent event handlers from receiving extra argument in development. ([@aweary](https://github.com/aweary) in [#10115](https://github.com/facebook/react/pull/8363))
|
||||
* Fix cases where `onChange` would not fire with `defaultChecked` on radio inputs. ([@jquense](https://github.com/jquense) in [#10156](https://github.com/facebook/react/pull/10156))
|
||||
* Add support for `controlList` attribute to allowed DOM properties ([@nhunzaker](https://github.com/nhunzaker) in [#9940](https://github.com/facebook/react/pull/9940))
|
||||
* Add support for `controlList` attribute to DOM property whitelist ([@nhunzaker](https://github.com/nhunzaker) in [#9940](https://github.com/facebook/react/pull/9940))
|
||||
* Fix a bug where creating an element with a ref in a constructor did not throw an error in development. ([@iansu](https://github.com/iansu) in [#10025](https://github.com/facebook/react/pull/10025))
|
||||
|
||||
## 15.6.1 (June 14, 2017)
|
||||
|
||||
@@ -1,76 +1,3 @@
|
||||
# Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as
|
||||
contributors and maintainers pledge to make participation in our project and
|
||||
our community a harassment-free experience for everyone, regardless of age, body
|
||||
size, disability, ethnicity, sex characteristics, gender identity and expression,
|
||||
level of experience, education, socio-economic status, nationality, personal
|
||||
appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment
|
||||
include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or
|
||||
advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic
|
||||
address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable
|
||||
behavior and are expected to take appropriate and fair corrective action in
|
||||
response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or
|
||||
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||
permanently any contributor for other behaviors that they deem inappropriate,
|
||||
threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies within all project spaces, and it also applies when
|
||||
an individual is representing the project or its community in public spaces.
|
||||
Examples of representing a project or community include using an official
|
||||
project e-mail address, posting via an official social media account, or acting
|
||||
as an appointed representative at an online or offline event. Representation of
|
||||
a project may be further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported by contacting the project team at <opensource-conduct@fb.com>. All
|
||||
complaints will be reviewed and investigated and will result in a response that
|
||||
is deemed necessary and appropriate to the circumstances. The project team is
|
||||
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||
Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good
|
||||
faith may face temporary or permanent repercussions as determined by other
|
||||
members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
||||
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
||||
|
||||
[homepage]: https://www.contributor-covenant.org
|
||||
|
||||
For answers to common questions about this code of conduct, see
|
||||
https://www.contributor-covenant.org/faq
|
||||
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.fb.com/codeofconduct/) so that you can understand what actions will and will not be tolerated.
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
# [React](https://reactjs.org/) · [](https://github.com/facebook/react/blob/master/LICENSE) [](https://www.npmjs.com/package/react) [](https://circleci.com/gh/facebook/react) [](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
|
||||
# [React](https://reactjs.org/) · [](https://github.com/facebook/react/blob/master/LICENSE) [](https://www.npmjs.com/package/react) [](https://coveralls.io/github/facebook/react?branch=master) [](https://circleci.com/gh/facebook/react) [](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
|
||||
|
||||
React is a JavaScript library for building user interfaces.
|
||||
|
||||
* **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
|
||||
* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
|
||||
* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using [React Native](https://reactnative.dev/).
|
||||
* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
|
||||
|
||||
[Learn how to use React in your own project](https://reactjs.org/docs/getting-started.html).
|
||||
|
||||
@@ -16,7 +16,7 @@ React has been designed for gradual adoption from the start, and **you can use a
|
||||
* [Add React to a Website](https://reactjs.org/docs/add-react-to-a-website.html) as a `<script>` tag in one minute.
|
||||
* [Create a New React App](https://reactjs.org/docs/create-a-new-react-app.html) if you're looking for a powerful JavaScript toolchain.
|
||||
|
||||
You can use React as a `<script>` tag from a [CDN](https://reactjs.org/docs/cdn-links.html), or as a `react` package on [npm](https://www.npmjs.com/package/react).
|
||||
You can use React as a `<script>` tag from a [CDN](https://reactjs.org/docs/cdn-links.html), or as a `react` package on [npm](https://www.npmjs.com/).
|
||||
|
||||
## Documentation
|
||||
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
# Reporting Security Issues
|
||||
|
||||
If you believe you have found a security vulnerability in React, we encourage you to let us know right away. We will investigate all legitimate reports and do our best to quickly fix the problem.
|
||||
|
||||
Please refer to the following page for our responsible disclosure policy, reward guidelines, and those things that should not be reported:
|
||||
|
||||
https://www.facebook.com/whitehat
|
||||
@@ -1,27 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
'@babel/plugin-syntax-jsx',
|
||||
'@babel/plugin-transform-react-jsx',
|
||||
'@babel/plugin-transform-flow-strip-types',
|
||||
['@babel/plugin-proposal-class-properties', {loose: true}],
|
||||
'syntax-trailing-function-commas',
|
||||
[
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
{loose: true, useBuiltIns: true},
|
||||
],
|
||||
['@babel/plugin-transform-template-literals', {loose: true}],
|
||||
'@babel/plugin-transform-literals',
|
||||
'@babel/plugin-transform-arrow-functions',
|
||||
'@babel/plugin-transform-block-scoped-functions',
|
||||
'@babel/plugin-transform-object-super',
|
||||
'@babel/plugin-transform-shorthand-properties',
|
||||
'@babel/plugin-transform-computed-properties',
|
||||
'@babel/plugin-transform-for-of',
|
||||
['@babel/plugin-transform-spread', {loose: true, useBuiltIns: true}],
|
||||
'@babel/plugin-transform-parameters',
|
||||
['@babel/plugin-transform-destructuring', {loose: true, useBuiltIns: true}],
|
||||
['@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}],
|
||||
],
|
||||
};
|
||||
@@ -25,34 +25,22 @@
|
||||
//
|
||||
// `DANGER_GITHUB_API_TOKEN=[ENV_ABOVE] yarn danger pr https://github.com/facebook/react/pull/11865
|
||||
|
||||
const {markdown, danger, warn} = require('danger');
|
||||
const {markdown, danger} = require('danger');
|
||||
const fetch = require('node-fetch');
|
||||
|
||||
const {generateResultsArray} = require('./scripts/rollup/stats');
|
||||
const {existsSync, readFileSync} = require('fs');
|
||||
const {exec} = require('child_process');
|
||||
|
||||
// This must match the name of the CI job that creates the build artifacts
|
||||
const RELEASE_CHANNEL =
|
||||
process.env.RELEASE_CHANNEL === 'experimental' ? 'experimental' : 'stable';
|
||||
const artifactsJobName =
|
||||
process.env.RELEASE_CHANNEL === 'experimental'
|
||||
? 'process_artifacts_experimental'
|
||||
: 'process_artifacts';
|
||||
|
||||
if (!existsSync('./build/bundle-sizes.json')) {
|
||||
if (!existsSync('./scripts/rollup/results.json')) {
|
||||
// This indicates the build failed previously.
|
||||
// In that case, there's nothing for the Dangerfile to do.
|
||||
// Exit early to avoid leaving a redundant (and potentially confusing) PR comment.
|
||||
warn(
|
||||
'No bundle size information found. This indicates the build ' +
|
||||
'job failed.'
|
||||
);
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
const currentBuildResults = JSON.parse(
|
||||
readFileSync('./build/bundle-sizes.json')
|
||||
readFileSync('./scripts/rollup/results.json')
|
||||
);
|
||||
|
||||
/**
|
||||
@@ -120,75 +108,18 @@ function git(args) {
|
||||
// Use git locally to grab the commit which represents the place
|
||||
// where the branches differ
|
||||
const upstreamRepo = danger.github.pr.base.repo.full_name;
|
||||
if (upstreamRepo !== 'facebook/react') {
|
||||
// Exit unless we're running in the main repo
|
||||
return;
|
||||
}
|
||||
|
||||
markdown(`## Size changes (${RELEASE_CHANNEL})`);
|
||||
|
||||
const upstreamRef = danger.github.pr.base.ref;
|
||||
await git(`remote add upstream https://github.com/facebook/react.git`);
|
||||
await git(`remote add upstream https://github.com/${upstreamRepo}.git`);
|
||||
await git('fetch upstream');
|
||||
const baseCommit = await git(`merge-base HEAD upstream/${upstreamRef}`);
|
||||
const mergeBaseCommit = await git(`merge-base HEAD upstream/${upstreamRef}`);
|
||||
|
||||
let previousBuildResults = null;
|
||||
try {
|
||||
let baseCIBuildId = null;
|
||||
const statusesResponse = await fetch(
|
||||
`https://api.github.com/repos/facebook/react/commits/${baseCommit}/status`
|
||||
);
|
||||
const {statuses, state} = await statusesResponse.json();
|
||||
if (state === 'failure') {
|
||||
warn(`Base commit is broken: ${baseCommit}`);
|
||||
return;
|
||||
}
|
||||
for (let i = 0; i < statuses.length; i++) {
|
||||
const status = statuses[i];
|
||||
if (status.context === `ci/circleci: ${artifactsJobName}`) {
|
||||
if (status.state === 'success') {
|
||||
baseCIBuildId = /\/facebook\/react\/([0-9]+)/.exec(
|
||||
status.target_url
|
||||
)[1];
|
||||
break;
|
||||
}
|
||||
if (status.state === 'pending') {
|
||||
warn(`Build job for base commit is still pending: ${baseCommit}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (baseCIBuildId === null) {
|
||||
warn(`Could not find build artifacts for base commit: ${baseCommit}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const baseArtifactsInfoResponse = await fetch(
|
||||
`https://circleci.com/api/v1.1/project/github/facebook/react/${baseCIBuildId}/artifacts`
|
||||
);
|
||||
const baseArtifactsInfo = await baseArtifactsInfoResponse.json();
|
||||
|
||||
for (let i = 0; i < baseArtifactsInfo.length; i++) {
|
||||
const info = baseArtifactsInfo[i];
|
||||
if (info.path.endsWith('bundle-sizes.json')) {
|
||||
const resultsResponse = await fetch(info.url);
|
||||
previousBuildResults = await resultsResponse.json();
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
warn(`Failed to fetch build artifacts for base commit: ${baseCommit}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (previousBuildResults === null) {
|
||||
warn(`Could not find build artifacts for base commit: ${baseCommit}`);
|
||||
return;
|
||||
}
|
||||
const commitURL = sha =>
|
||||
`http://react.zpao.com/builds/master/_commits/${sha}/results.json`;
|
||||
const response = await fetch(commitURL(mergeBaseCommit));
|
||||
|
||||
// Take the JSON of the build response and
|
||||
// make an array comparing the results for printing
|
||||
const previousBuildResults = await response.json();
|
||||
const results = generateResultsArray(
|
||||
currentBuildResults,
|
||||
previousBuildResults
|
||||
@@ -281,7 +212,7 @@ function git(args) {
|
||||
<details>
|
||||
<summary>Details of bundled changes.</summary>
|
||||
|
||||
<p>Comparing: ${baseCommit}...${danger.github.pr.head.sha}</p>
|
||||
<p>Comparing: ${mergeBaseCommit}...${danger.github.pr.head.sha}</p>
|
||||
|
||||
|
||||
${allTables.join('\n')}
|
||||
@@ -289,7 +220,5 @@ function git(args) {
|
||||
</details>
|
||||
`;
|
||||
markdown(summary);
|
||||
} else {
|
||||
markdown('No significant bundle size changes to report.');
|
||||
}
|
||||
})();
|
||||
|
||||
1
fixtures/attribute-behavior/src/App.css
Normal file
1
fixtures/attribute-behavior/src/App.css
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
@@ -461,7 +461,9 @@ function prepareState(initGlobals) {
|
||||
hasSameBehaviorForAll,
|
||||
rowPatternHash,
|
||||
// "Good enough" id that we can store in localStorage
|
||||
rowIdHash: `${attribute.name} ${attribute.tagName} ${attribute.overrideStringValue}`,
|
||||
rowIdHash: `${attribute.name} ${attribute.tagName} ${
|
||||
attribute.overrideStringValue
|
||||
}`,
|
||||
};
|
||||
const rowGroup = rowPatternHashes.get(rowPatternHash) || new Set();
|
||||
rowGroup.add(row);
|
||||
@@ -864,12 +866,14 @@ class App extends React.Component {
|
||||
// Sort
|
||||
switch (sortOrder) {
|
||||
case ALPHABETICAL:
|
||||
return filteredAttributes.sort((attr1, attr2) =>
|
||||
attr1.name.toLowerCase() < attr2.name.toLowerCase() ? -1 : 1
|
||||
return filteredAttributes.sort(
|
||||
(attr1, attr2) =>
|
||||
attr1.name.toLowerCase() < attr2.name.toLowerCase() ? -1 : 1
|
||||
);
|
||||
case REV_ALPHABETICAL:
|
||||
return filteredAttributes.sort((attr1, attr2) =>
|
||||
attr1.name.toLowerCase() < attr2.name.toLowerCase() ? 1 : -1
|
||||
return filteredAttributes.sort(
|
||||
(attr1, attr2) =>
|
||||
attr1.name.toLowerCase() < attr2.name.toLowerCase() ? 1 : -1
|
||||
);
|
||||
case GROUPED_BY_ROW_PATTERN: {
|
||||
return filteredAttributes.sort((attr1, attr2) => {
|
||||
|
||||
@@ -255,7 +255,7 @@ const attributes = [
|
||||
{
|
||||
name: 'cite',
|
||||
tagName: 'blockquote',
|
||||
overrideStringValue: 'https://reactjs.com/',
|
||||
overrideStringValue: 'http://reactjs.com/',
|
||||
},
|
||||
{name: 'class', read: getAttribute('class')},
|
||||
{name: 'classID', tagName: 'object', read: getAttribute('classid')},
|
||||
@@ -448,16 +448,6 @@ const attributes = [
|
||||
read: getSVGAttribute('direction'),
|
||||
},
|
||||
{name: 'disabled', tagName: 'input'},
|
||||
{
|
||||
name: 'disablePictureInPicture',
|
||||
tagName: 'video',
|
||||
read: getProperty('disablepictureinpicture'),
|
||||
},
|
||||
{
|
||||
name: 'disableRemotePlayback',
|
||||
tagName: 'video',
|
||||
read: getProperty('disableremoteplayback'),
|
||||
},
|
||||
{
|
||||
name: 'display',
|
||||
tagName: 'svg',
|
||||
|
||||
@@ -268,7 +268,7 @@ async-each@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
|
||||
|
||||
async@^1.5.2:
|
||||
async@^1.4.0, async@^1.5.2:
|
||||
version "1.5.2"
|
||||
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
|
||||
|
||||
@@ -1448,10 +1448,6 @@ commander@2.11.x, commander@~2.11.0:
|
||||
version "2.11.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
|
||||
|
||||
commander@~2.20.3:
|
||||
version "2.20.3"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
|
||||
|
||||
commondir@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
|
||||
@@ -2842,14 +2838,14 @@ handle-thing@^1.2.5:
|
||||
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
|
||||
|
||||
handlebars@^4.0.3:
|
||||
version "4.5.3"
|
||||
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
|
||||
version "4.0.10"
|
||||
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.10.tgz#3d30c718b09a3d96f23ea4cc1f403c4d3ba9ff4f"
|
||||
dependencies:
|
||||
neo-async "^2.6.0"
|
||||
async "^1.4.0"
|
||||
optimist "^0.6.1"
|
||||
source-map "^0.6.1"
|
||||
source-map "^0.4.4"
|
||||
optionalDependencies:
|
||||
uglify-js "^3.1.4"
|
||||
uglify-js "^2.6"
|
||||
|
||||
har-schema@^1.0.5:
|
||||
version "1.0.5"
|
||||
@@ -4184,10 +4180,6 @@ negotiator@0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
|
||||
|
||||
neo-async@^2.6.0:
|
||||
version "2.6.1"
|
||||
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
|
||||
|
||||
no-case@^2.2.0:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"
|
||||
@@ -5704,9 +5696,11 @@ source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, sourc
|
||||
version "0.5.7"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
|
||||
|
||||
source-map@^0.6.1, source-map@~0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||
source-map@^0.4.4:
|
||||
version "0.4.4"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
|
||||
dependencies:
|
||||
amdefine ">=0.0.4"
|
||||
|
||||
source-map@~0.2.0:
|
||||
version "0.2.0"
|
||||
@@ -6096,7 +6090,7 @@ uglify-js@3.0.x, uglify-js@^3.0.13:
|
||||
commander "~2.11.0"
|
||||
source-map "~0.5.1"
|
||||
|
||||
uglify-js@^2.8.29:
|
||||
uglify-js@^2.6, uglify-js@^2.8.29:
|
||||
version "2.8.29"
|
||||
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
|
||||
dependencies:
|
||||
@@ -6105,13 +6099,6 @@ uglify-js@^2.8.29:
|
||||
optionalDependencies:
|
||||
uglify-to-browserify "~1.0.0"
|
||||
|
||||
uglify-js@^3.1.4:
|
||||
version "3.7.3"
|
||||
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
|
||||
dependencies:
|
||||
commander "~2.20.3"
|
||||
source-map "~0.6.1"
|
||||
|
||||
uglify-to-browserify@~1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
SKIP_PREFLIGHT_CHECK=true
|
||||
@@ -1,77 +0,0 @@
|
||||
{
|
||||
"posts": [
|
||||
{
|
||||
"id": 1,
|
||||
"userId": 2,
|
||||
"title": "Welcome",
|
||||
"body": "Hello, world!"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"userId": 3,
|
||||
"title": "A Guide to useEffect",
|
||||
"body": "Let me tell you everything about useEffect"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"userId": 1,
|
||||
"title": "Here and There",
|
||||
"body": "Browsers are smart"
|
||||
}
|
||||
],
|
||||
"comments": [
|
||||
{
|
||||
"id": 1,
|
||||
"body": "Hey there",
|
||||
"postId": 1,
|
||||
"userId": 1
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"body": "Welcome to the chat",
|
||||
"postId": 1,
|
||||
"userId": 2
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"body": "What editor/font are you using?",
|
||||
"postId": 2,
|
||||
"userId": 2
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"body": "It's always been hard",
|
||||
"postId": 3,
|
||||
"userId": 1
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"body": "It's still easy",
|
||||
"postId": 3,
|
||||
"userId": 2
|
||||
}
|
||||
],
|
||||
"users": [{
|
||||
"id": 1,
|
||||
"name": "Sebastian",
|
||||
"bioId": 10
|
||||
}, {
|
||||
"id": 2,
|
||||
"name": "Sophie",
|
||||
"bioId": 20
|
||||
}, {
|
||||
"id": 3,
|
||||
"name": "Dan",
|
||||
"bioId": 30
|
||||
}],
|
||||
"bios": [{
|
||||
"id": 10,
|
||||
"text": "I like European movies"
|
||||
}, {
|
||||
"id": 20,
|
||||
"text": "I like math puzzles"
|
||||
}, {
|
||||
"id": 30,
|
||||
"text": "I like reading twitter"
|
||||
}]
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
module.exports = (req, res, next) => {
|
||||
if (req.query.delay) {
|
||||
setTimeout(next, Number(req.query.delay));
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
{
|
||||
"name": "blocks",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"proxy": "http://localhost:3001/",
|
||||
"dependencies": {
|
||||
"concurrently": "^5.2.0",
|
||||
"json-server": "^0.16.1",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-scripts": "3.4.1"
|
||||
},
|
||||
"scripts": {
|
||||
"prestart": "cp -r ../../build/node_modules/* ./node_modules/",
|
||||
"prebuild": "cp -r ../../build/node_modules/* ./node_modules/",
|
||||
"start": "concurrently \"npm run start:client\" \"npm run start:api\"",
|
||||
"start:api": "json-server --watch db.json --port 3001 --delay 1000 --middlewares delay.js",
|
||||
"start:client": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Blocks Fixture</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,105 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import React, {
|
||||
useReducer,
|
||||
useEffect,
|
||||
unstable_useTransition as useTransition,
|
||||
useCallback,
|
||||
useMemo,
|
||||
Suspense,
|
||||
} from 'react';
|
||||
import {createCache, CacheProvider} from 'react/unstable-cache';
|
||||
import {RouterProvider} from './client/RouterContext';
|
||||
// TODO: can't really import a server component on the client.
|
||||
import App from './server/App';
|
||||
|
||||
const initialUrl = window.location.pathname;
|
||||
const initialState = {
|
||||
// TODO: use this for invalidation.
|
||||
cache: createCache(),
|
||||
url: initialUrl,
|
||||
pendingUrl: initialUrl,
|
||||
root: <App route={initialUrl} />,
|
||||
};
|
||||
|
||||
function reducer(state, action) {
|
||||
switch (action.type) {
|
||||
case 'startNavigation':
|
||||
return {
|
||||
...state,
|
||||
pendingUrl: action.url,
|
||||
};
|
||||
case 'completeNavigation':
|
||||
// TODO: cancel previous fetch?
|
||||
return {
|
||||
...state,
|
||||
url: action.url,
|
||||
pendingUrl: action.url,
|
||||
root: action.root,
|
||||
};
|
||||
default:
|
||||
throw new Error();
|
||||
}
|
||||
}
|
||||
|
||||
function Router() {
|
||||
const [state, dispatch] = useReducer(reducer, initialState);
|
||||
const [startTransition, isPending] = useTransition({
|
||||
timeoutMs: 1500,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.cursor = isPending ? 'wait' : '';
|
||||
}, [isPending]);
|
||||
|
||||
const navigate = useCallback(
|
||||
url => {
|
||||
startTransition(() => {
|
||||
// TODO: Here, There, and Everywhere.
|
||||
// TODO: Instant Transitions, somehow.
|
||||
dispatch({
|
||||
type: 'completeNavigation',
|
||||
root: <App route={url} />,
|
||||
url,
|
||||
});
|
||||
});
|
||||
dispatch({
|
||||
type: 'startNavigation',
|
||||
url,
|
||||
});
|
||||
},
|
||||
[startTransition]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const listener = () => {
|
||||
navigate(window.location.pathname);
|
||||
};
|
||||
window.addEventListener('popstate', listener);
|
||||
return () => window.removeEventListener('popstate', listener);
|
||||
}, [navigate]);
|
||||
|
||||
const routeContext = useMemo(
|
||||
() => ({
|
||||
pendingUrl: state.pendingUrl,
|
||||
url: state.url,
|
||||
navigate,
|
||||
}),
|
||||
[state.url, state.pendingUrl, navigate]
|
||||
);
|
||||
|
||||
return (
|
||||
<Suspense fallback={<h2>Loading...</h2>}>
|
||||
<CacheProvider value={state.cache}>
|
||||
<RouterProvider value={routeContext}>{state.root}</RouterProvider>
|
||||
</CacheProvider>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
export default Router;
|
||||
@@ -1,25 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import {useRouter} from './RouterContext';
|
||||
|
||||
export default function Link({to, children, ...rest}) {
|
||||
const {navigate} = useRouter();
|
||||
return (
|
||||
<a
|
||||
href={to}
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
window.history.pushState(null, null, to);
|
||||
navigate(to);
|
||||
}}
|
||||
{...rest}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint-disable import/first */
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
import {TabBar, TabLink} from '../client/TabNav';
|
||||
|
||||
export default function ProfileNav({userId}) {
|
||||
// TODO: Don't hardcode ID.
|
||||
return (
|
||||
<TabBar>
|
||||
<TabLink to={`/profile/${userId}`}>Timeline</TabLink>
|
||||
<TabLink to={`/profile/${userId}/bio`}>Bio</TabLink>
|
||||
</TabBar>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import {createContext, useContext} from 'react';
|
||||
|
||||
const RouterContext = createContext(null);
|
||||
|
||||
export const RouterProvider = RouterContext.Provider;
|
||||
|
||||
export function useRouter() {
|
||||
return useContext(RouterContext);
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import {TabBar, TabLink} from './TabNav';
|
||||
|
||||
// TODO: Error Boundaries.
|
||||
|
||||
function MainTabNav() {
|
||||
return (
|
||||
<TabBar>
|
||||
<TabLink to="/">Home</TabLink>
|
||||
<TabLink to="/profile/3" partial={true}>
|
||||
Profile
|
||||
</TabLink>
|
||||
</TabBar>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Shell({children}) {
|
||||
return (
|
||||
<>
|
||||
<MainTabNav />
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import Link from './Link';
|
||||
import {useRouter} from './RouterContext';
|
||||
|
||||
export function TabBar({children}) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #aaa',
|
||||
padding: 20,
|
||||
marginBottom: 20,
|
||||
width: 500,
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TabLink({to, partial, children}) {
|
||||
const {pendingUrl: activeUrl} = useRouter();
|
||||
const active = partial ? activeUrl.startsWith(to) : activeUrl === to;
|
||||
if (active) {
|
||||
return (
|
||||
<b
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
marginRight: 20,
|
||||
}}>
|
||||
{children}
|
||||
</b>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
marginRight: 20,
|
||||
}}
|
||||
to={to}>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
body {
|
||||
font-family: Helvetica;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {unstable_createRoot as createRoot} from 'react-dom';
|
||||
import './index.css';
|
||||
import Router from './Router';
|
||||
|
||||
createRoot(document.getElementById('root')).render(<Router />);
|
||||
@@ -1,28 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint-disable import/first */
|
||||
|
||||
import * as React from 'react';
|
||||
import {matchRoute} from './ServerRouter';
|
||||
import FeedPage from './FeedPage';
|
||||
import ProfilePage from './ProfilePage';
|
||||
|
||||
// TODO: Replace with asset reference.
|
||||
import Shell from '../client/Shell';
|
||||
|
||||
// TODO: Router component?
|
||||
const AppRoutes = {
|
||||
'/': props => <FeedPage {...props} key="home" />,
|
||||
'/profile/:userId/*': props => (
|
||||
<ProfilePage {...props} key={`profile-${props.userId}`} />
|
||||
),
|
||||
};
|
||||
|
||||
export default function App(props) {
|
||||
const match = matchRoute(props, AppRoutes);
|
||||
return <Shell>{match}</Shell>;
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint-disable import/first */
|
||||
|
||||
import * as React from 'react';
|
||||
import {fetch} from 'react-fetch';
|
||||
|
||||
// TODO: Replace with asset reference.
|
||||
import Link from '../client/Link';
|
||||
|
||||
export default function Comments({postId}) {
|
||||
const comments = fetch(`/comments?postId=${postId}&_expand=user`).json();
|
||||
return (
|
||||
<>
|
||||
<h5>Comments</h5>
|
||||
<ul>
|
||||
{comments.slice(0, 5).map(comment => (
|
||||
<li key={comment.id}>
|
||||
{comment.body}
|
||||
{' • '}
|
||||
<Link to={`/profile/${comment.user.id}`}>{comment.user.name}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint-disable import/first */
|
||||
|
||||
import * as React from 'react';
|
||||
import {fetch} from 'react-fetch';
|
||||
import PostList from './PostList';
|
||||
|
||||
export default function Feed() {
|
||||
const posts = fetch('/posts?_expand=user').json();
|
||||
return (
|
||||
<>
|
||||
<h2>Feed</h2>
|
||||
<PostList posts={posts} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint-disable import/first */
|
||||
|
||||
import * as React from 'react';
|
||||
import {Suspense} from 'react';
|
||||
import PostGlimmer from './PostGlimmer';
|
||||
import Feed from './Feed';
|
||||
|
||||
export default function FeedPage() {
|
||||
return (
|
||||
<Suspense fallback={<PostGlimmer />}>
|
||||
<Feed />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint-disable import/first */
|
||||
|
||||
import * as React from 'react';
|
||||
import {Suspense} from 'react';
|
||||
import Comments from './Comments';
|
||||
|
||||
// TODO: Replace with asset reference.
|
||||
import Link from '../client/Link';
|
||||
|
||||
export default function Post({post}) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #aaa',
|
||||
borderRadius: 10,
|
||||
marginBottom: 20,
|
||||
padding: 20,
|
||||
maxWidth: 500,
|
||||
}}>
|
||||
<h4 style={{marginTop: 0}}>
|
||||
{post.title}
|
||||
{' by '}
|
||||
<Link to={`/profile/${post.user.id}`}>{post.user.name}</Link>
|
||||
</h4>
|
||||
<p>{post.body}</p>
|
||||
<Suspense
|
||||
fallback={<h5>Loading comments...</h5>}
|
||||
unstable_avoidThisFallback={true}>
|
||||
<Comments postId={post.id} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint-disable import/first */
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
export default function PostGlimmer() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #aaa',
|
||||
borderRadius: 10,
|
||||
marginBottom: 20,
|
||||
padding: 20,
|
||||
maxWidth: 500,
|
||||
height: 180,
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 20,
|
||||
width: '50%',
|
||||
height: 20,
|
||||
background: '#ddd',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 20,
|
||||
width: '60%',
|
||||
height: 20,
|
||||
background: '#eee',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 20,
|
||||
width: '50%',
|
||||
height: 20,
|
||||
background: '#eee',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 20,
|
||||
width: '60%',
|
||||
height: 20,
|
||||
background: '#eee',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint-disable import/first */
|
||||
|
||||
import * as React from 'react';
|
||||
import {Suspense, unstable_SuspenseList as SuspenseList} from 'react';
|
||||
import {preload} from 'react-fetch';
|
||||
import PostGlimmer from './PostGlimmer';
|
||||
import Post from './Post';
|
||||
|
||||
export default function PostList({posts}) {
|
||||
return (
|
||||
<SuspenseList revealOrder="forwards" tail="collapsed">
|
||||
{posts.map(post => {
|
||||
preload(`/comments?postId=${post.id}&_expand=user`);
|
||||
return (
|
||||
<Suspense key={post.id} fallback={<PostGlimmer />}>
|
||||
<Post post={post} />
|
||||
</Suspense>
|
||||
);
|
||||
})}
|
||||
</SuspenseList>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint-disable import/first */
|
||||
|
||||
import * as React from 'react';
|
||||
import {fetch} from 'react-fetch';
|
||||
|
||||
export default function ProfileBio({userId}) {
|
||||
const user = fetch(`/users/${userId}`).json();
|
||||
const bio = fetch(`/bios/${user.bioId}`).json().text;
|
||||
return (
|
||||
<>
|
||||
<h3>{user.name}'s Bio</h3>
|
||||
<p>{bio}</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import {Suspense} from 'react';
|
||||
import {fetch} from 'react-fetch';
|
||||
import {matchRoute} from './ServerRouter';
|
||||
import ProfileTimeline from './ProfileTimeline';
|
||||
import ProfileBio from './ProfileBio';
|
||||
|
||||
// TODO: Replace with asset reference.
|
||||
import ProfileNav from '../client/ProfileNav';
|
||||
|
||||
// TODO: Router component?
|
||||
const ProfileRoutes = {
|
||||
'/': props => <ProfileTimeline {...props} key="timeline" />,
|
||||
'/bio': props => <ProfileBio {...props} key="bio" />,
|
||||
};
|
||||
|
||||
export default function ProfilePage(props) {
|
||||
const user = fetch(`/users/${props.userId}`).json();
|
||||
const match = matchRoute(props, ProfileRoutes);
|
||||
return (
|
||||
<>
|
||||
<h2>{user.name}</h2>
|
||||
<ProfileNav userId={user.id} />
|
||||
<Suspense fallback={<h3>Loading...</h3>}>{match}</Suspense>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint-disable import/first */
|
||||
|
||||
import * as React from 'react';
|
||||
import {fetch} from 'react-fetch';
|
||||
import PostList from './PostList';
|
||||
|
||||
export default function ProfileTimeline({userId}) {
|
||||
const posts = fetch(`/posts?userId=${userId}&_expand=user`).json();
|
||||
return <PostList posts={posts} />;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint-disable import/first */
|
||||
|
||||
function tryMatch(props, def) {
|
||||
const defSegments = def.split('/').filter(Boolean);
|
||||
const routeSegments = props.route.split('/').filter(Boolean);
|
||||
let innerProps = {...props};
|
||||
while (routeSegments.length > 0) {
|
||||
if (defSegments.length === 0) {
|
||||
return null;
|
||||
}
|
||||
const urlSegment = routeSegments.shift();
|
||||
const defSegment = defSegments.shift();
|
||||
if (urlSegment === defSegment) {
|
||||
continue;
|
||||
}
|
||||
if (defSegment[0] === ':') {
|
||||
innerProps[defSegment.slice(1)] = urlSegment;
|
||||
continue;
|
||||
}
|
||||
if (defSegment === '*') {
|
||||
innerProps.route = '/' + urlSegment + routeSegments.join('/');
|
||||
return innerProps;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
if (defSegments.length === 0) {
|
||||
return innerProps;
|
||||
}
|
||||
if (defSegments.length === 1 && defSegments[0] === '*') {
|
||||
innerProps.route = '/';
|
||||
return innerProps;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function matchRoute(props, defs) {
|
||||
for (let def in defs) {
|
||||
if (!defs.hasOwnProperty(def)) {
|
||||
continue;
|
||||
}
|
||||
const innerProps = tryMatch(props, def);
|
||||
if (innerProps) {
|
||||
const match = defs[def](innerProps);
|
||||
return match;
|
||||
}
|
||||
}
|
||||
throw Error('Not found.');
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 14.9</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@0.14.9/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@0.14.9/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/14.9.html">http://localhost:3000/14.9.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.0</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.0/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.0/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.0.html">http://localhost:3000/15.0.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.1</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.1/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.1/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.1.html">http://localhost:3000/15.1.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.2</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.2/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.2/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.2.html">http://localhost:3000/15.2.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.3</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.3/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.3/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.3.html">http://localhost:3000/15.3.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.4</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.4/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.4/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.4.html">http://localhost:3000/15.4.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.5</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.5/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.5/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.5.html">http://localhost:3000/15.5.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.6</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.6/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.6/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.6.html">http://localhost:3000/15.6.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.0</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@16.0/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.0/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.0.html">http://localhost:3000/16.0.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.1</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@16.1/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.1/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.1.html">http://localhost:3000/16.1.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.2</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@16.2/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.2/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.2.html">http://localhost:3000/16.2.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.3</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@16.3/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.3/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.3.html">http://localhost:3000/16.3.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.4</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@16.4/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.4/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.4.html">http://localhost:3000/16.4.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.5</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/schedule@0.5.0/umd/schedule.development.js"></script>
|
||||
<script src="https://unpkg.com/schedule@0.5.0/umd/schedule-tracing.development.js"></script>
|
||||
<script src="https://unpkg.com/react@16.5/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.5/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.5.html">http://localhost:3000/16.5.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.6</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler.development.js"></script>
|
||||
<script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler-tracing.development.js"></script>
|
||||
<script src="https://unpkg.com/react@16.6/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.6/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/react-cache@2.0.0-alpha.1/umd/react-cache.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.6.html">http://localhost:3000/16.6.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.7</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler.development.js"></script>
|
||||
<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler-tracing.development.js"></script>
|
||||
<script src="https://unpkg.com/react@16.7/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.7/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/react-cache@2.0.0-alpha.1/umd/react-cache.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.7.html">http://localhost:3000/16.7.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React canary</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/scheduler@canary/umd/scheduler.development.js"></script>
|
||||
<script src="https://unpkg.com/scheduler@canary/umd/scheduler-tracing.development.js"></script>
|
||||
<script src="https://unpkg.com/react@canary/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@canary/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/canary.html">http://localhost:3000/canary.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React DevTools regression test</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="canary.html"></iframe>
|
||||
<iframe src="next.html"></iframe>
|
||||
<iframe src="16.7.html"></iframe>
|
||||
<iframe src="16.6.html"></iframe>
|
||||
<iframe src="16.5.html"></iframe>
|
||||
<iframe src="16.4.html"></iframe>
|
||||
<iframe src="16.3.html"></iframe>
|
||||
<iframe src="16.2.html"></iframe>
|
||||
<iframe src="16.1.html"></iframe>
|
||||
<iframe src="16.0.html"></iframe>
|
||||
<iframe src="15.6.html"></iframe>
|
||||
<iframe src="15.5.html"></iframe>
|
||||
<iframe src="15.4.html"></iframe>
|
||||
<iframe src="15.3.html"></iframe>
|
||||
<iframe src="15.2.html"></iframe>
|
||||
<iframe src="15.1.html"></iframe>
|
||||
<iframe src="15.0.html"></iframe>
|
||||
<iframe src="14.9.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React next</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
|
||||
<script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
|
||||
<script src="https://unpkg.com/react@next/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@next/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/next.html">http://localhost:3000/next.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,16 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const finalhandler = require('finalhandler');
|
||||
const http = require('http');
|
||||
const serveStatic = require('serve-static');
|
||||
|
||||
// Serve fixtures folder
|
||||
const serve = serveStatic(__dirname, {index: 'index.html'});
|
||||
|
||||
// Create server
|
||||
const server = http.createServer(function onRequest(req, res) {
|
||||
serve(req, res, finalhandler(req, res));
|
||||
});
|
||||
|
||||
// Listen
|
||||
server.listen(3000);
|
||||
@@ -1,328 +0,0 @@
|
||||
/* eslint-disable no-fallthrough, react/react-in-jsx-scope, react/jsx-no-undef */
|
||||
/* global React ReactCache ReactDOM SchedulerTracing ScheduleTracing */
|
||||
|
||||
const apps = [];
|
||||
|
||||
const pieces = React.version.split('.');
|
||||
const major =
|
||||
pieces[0] === '0' ? parseInt(pieces[1], 10) : parseInt(pieces[0], 10);
|
||||
const minor =
|
||||
pieces[0] === '0' ? parseInt(pieces[2], 10) : parseInt(pieces[1], 10);
|
||||
|
||||
// Convenience wrapper to organize API features in DevTools.
|
||||
function Feature({children, label, version}) {
|
||||
return (
|
||||
<div className="Feature">
|
||||
<div className="FeatureHeader">
|
||||
<code className="FeatureCode">{label}</code>
|
||||
<small>{version}</small>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Simplify interaction tracing for tests below.
|
||||
let trace = null;
|
||||
if (typeof SchedulerTracing !== 'undefined') {
|
||||
trace = SchedulerTracing.unstable_trace;
|
||||
} else if (typeof ScheduleTracing !== 'undefined') {
|
||||
trace = ScheduleTracing.unstable_trace;
|
||||
} else {
|
||||
trace = (_, __, callback) => callback();
|
||||
}
|
||||
|
||||
// https://github.com/facebook/react/blob/master/CHANGELOG.md
|
||||
switch (major) {
|
||||
case 16:
|
||||
switch (minor) {
|
||||
case 7:
|
||||
if (typeof React.useState === 'function') {
|
||||
// Hooks
|
||||
function Hooks() {
|
||||
const [count, setCount] = React.useState(0);
|
||||
const incrementCount = React.useCallback(
|
||||
() => setCount(count + 1),
|
||||
[count]
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
count: {count}{' '}
|
||||
<button onClick={incrementCount}>increment</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
apps.push(
|
||||
<Feature key="Hooks" label="Hooks" version="16.7+">
|
||||
<Hooks />
|
||||
</Feature>
|
||||
);
|
||||
}
|
||||
case 6:
|
||||
// memo
|
||||
function LabelComponent({label}) {
|
||||
return <label>{label}</label>;
|
||||
}
|
||||
const AnonymousMemoized = React.memo(({label}) => (
|
||||
<label>{label}</label>
|
||||
));
|
||||
const Memoized = React.memo(LabelComponent);
|
||||
const CustomMemoized = React.memo(LabelComponent);
|
||||
CustomMemoized.displayName = 'MemoizedLabelFunction';
|
||||
apps.push(
|
||||
<Feature key="memo" label="memo" version="16.6+">
|
||||
<AnonymousMemoized label="AnonymousMemoized" />
|
||||
<Memoized label="Memoized" />
|
||||
<CustomMemoized label="CustomMemoized" />
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// Suspense
|
||||
const loadResource = ([text, ms]) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve(text);
|
||||
}, ms);
|
||||
});
|
||||
};
|
||||
const getResourceKey = ([text, ms]) => text;
|
||||
const Resource = ReactCache.unstable_createResource(
|
||||
loadResource,
|
||||
getResourceKey
|
||||
);
|
||||
class Suspending extends React.Component {
|
||||
state = {useSuspense: false};
|
||||
useSuspense = () => this.setState({useSuspense: true});
|
||||
render() {
|
||||
if (this.state.useSuspense) {
|
||||
const text = Resource.read(['loaded', 2000]);
|
||||
return text;
|
||||
} else {
|
||||
return <button onClick={this.useSuspense}>load data</button>;
|
||||
}
|
||||
}
|
||||
}
|
||||
apps.push(
|
||||
<Feature key="Suspense" label="Suspense" version="16.6+">
|
||||
<React.Suspense fallback={<div>loading...</div>}>
|
||||
<Suspending />
|
||||
</React.Suspense>
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// lazy
|
||||
const LazyWithDefaultProps = React.lazy(
|
||||
() =>
|
||||
new Promise(resolve => {
|
||||
function FooWithDefaultProps(props) {
|
||||
return (
|
||||
<h1>
|
||||
{props.greeting}, {props.name}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
FooWithDefaultProps.defaultProps = {
|
||||
name: 'World',
|
||||
greeting: 'Bonjour',
|
||||
};
|
||||
resolve({
|
||||
default: FooWithDefaultProps,
|
||||
});
|
||||
})
|
||||
);
|
||||
apps.push(
|
||||
<Feature key="lazy" label="lazy" version="16.6+">
|
||||
<React.Suspense fallback={<div>loading...</div>}>
|
||||
<LazyWithDefaultProps greeting="Hello" />
|
||||
</React.Suspense>
|
||||
</Feature>
|
||||
);
|
||||
case 5:
|
||||
case 4:
|
||||
// unstable_Profiler
|
||||
class ProfilerChild extends React.Component {
|
||||
state = {count: 0};
|
||||
incrementCount = () =>
|
||||
this.setState(prevState => ({count: prevState.count + 1}));
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
count: {this.state.count}{' '}
|
||||
<button onClick={this.incrementCount}>increment</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
const onRender = (...args) => {};
|
||||
const Profiler = React.unstable_Profiler || React.Profiler;
|
||||
apps.push(
|
||||
<Feature
|
||||
key="unstable_Profiler"
|
||||
label="unstable_Profiler"
|
||||
version="16.4+">
|
||||
<Profiler id="count" onRender={onRender}>
|
||||
<div>
|
||||
<ProfilerChild />
|
||||
</div>
|
||||
</Profiler>
|
||||
</Feature>
|
||||
);
|
||||
case 3:
|
||||
// createContext()
|
||||
const LocaleContext = React.createContext();
|
||||
LocaleContext.displayName = 'LocaleContext';
|
||||
const ThemeContext = React.createContext();
|
||||
apps.push(
|
||||
<Feature key="createContext" label="createContext" version="16.3+">
|
||||
<ThemeContext.Provider value="blue">
|
||||
<ThemeContext.Consumer>
|
||||
{theme => <div>theme: {theme}</div>}
|
||||
</ThemeContext.Consumer>
|
||||
</ThemeContext.Provider>
|
||||
<LocaleContext.Provider value="en-US">
|
||||
<LocaleContext.Consumer>
|
||||
{locale => <div>locale: {locale}</div>}
|
||||
</LocaleContext.Consumer>
|
||||
</LocaleContext.Provider>
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// forwardRef()
|
||||
const AnonymousFunction = React.forwardRef((props, ref) => (
|
||||
<div ref={ref}>{props.children}</div>
|
||||
));
|
||||
const NamedFunction = React.forwardRef(function named(props, ref) {
|
||||
return <div ref={ref}>{props.children}</div>;
|
||||
});
|
||||
const CustomName = React.forwardRef((props, ref) => (
|
||||
<div ref={ref}>{props.children}</div>
|
||||
));
|
||||
CustomName.displayName = 'CustomNameForwardRef';
|
||||
apps.push(
|
||||
<Feature key="forwardRef" label="forwardRef" version="16.3+">
|
||||
<AnonymousFunction>AnonymousFunction</AnonymousFunction>
|
||||
<NamedFunction>NamedFunction</NamedFunction>
|
||||
<CustomName>CustomName</CustomName>
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// StrictMode
|
||||
class StrictModeChild extends React.Component {
|
||||
render() {
|
||||
return 'StrictModeChild';
|
||||
}
|
||||
}
|
||||
apps.push(
|
||||
<Feature key="StrictMode" label="StrictMode" version="16.3+">
|
||||
<React.StrictMode>
|
||||
<StrictModeChild />
|
||||
</React.StrictMode>
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// unstable_AsyncMode (later renamed to unstable_ConcurrentMode, then ConcurrentMode)
|
||||
const ConcurrentMode =
|
||||
React.ConcurrentMode ||
|
||||
React.unstable_ConcurrentMode ||
|
||||
React.unstable_AsyncMode;
|
||||
apps.push(
|
||||
<Feature
|
||||
key="AsyncMode/ConcurrentMode"
|
||||
label="AsyncMode/ConcurrentMode"
|
||||
version="16.3+">
|
||||
<ConcurrentMode>
|
||||
<div>
|
||||
unstable_AsyncMode was added in 16.3, renamed to
|
||||
unstable_ConcurrentMode in 16.5, and then renamed to
|
||||
ConcurrentMode in 16.7
|
||||
</div>
|
||||
</ConcurrentMode>
|
||||
</Feature>
|
||||
);
|
||||
case 2:
|
||||
// Fragment
|
||||
apps.push(
|
||||
<Feature key="Fragment" label="Fragment" version="16.4+">
|
||||
<React.Fragment>
|
||||
<div>one</div>
|
||||
<div>two</div>
|
||||
</React.Fragment>
|
||||
</Feature>
|
||||
);
|
||||
case 1:
|
||||
case 0:
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case 15:
|
||||
break;
|
||||
case 14:
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
function Even() {
|
||||
return <small>(even)</small>;
|
||||
}
|
||||
|
||||
// Simple stateful app shared by all React versions
|
||||
class SimpleApp extends React.Component {
|
||||
state = {count: 0};
|
||||
incrementCount = () => {
|
||||
const updaterFn = prevState => ({count: prevState.count + 1});
|
||||
trace('Updating count', performance.now(), () => this.setState(updaterFn));
|
||||
};
|
||||
render() {
|
||||
const {count} = this.state;
|
||||
return (
|
||||
<div>
|
||||
{count % 2 === 0 ? (
|
||||
<span>
|
||||
count: {count} <Even />
|
||||
</span>
|
||||
) : (
|
||||
<span>count: {count}</span>
|
||||
)}{' '}
|
||||
<button onClick={this.incrementCount}>increment</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
apps.push(
|
||||
<Feature key="Simple stateful app" label="Simple stateful app" version="any">
|
||||
<SimpleApp />
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// This component, with the version prop, helps organize DevTools at a glance.
|
||||
function TopLevelWrapperForDevTools({version}) {
|
||||
let header = <h1>React {version}</h1>;
|
||||
if (version.includes('canary')) {
|
||||
const commitSha = version.match(/.+canary-(.+)/)[1];
|
||||
header = (
|
||||
<h1>
|
||||
React canary{' '}
|
||||
<a href={`https://github.com/facebook/react/commit/${commitSha}`}>
|
||||
{commitSha}
|
||||
</a>
|
||||
</h1>
|
||||
);
|
||||
} else if (version.includes('alpha')) {
|
||||
header = <h1>React next</h1>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{header}
|
||||
{apps}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
TopLevelWrapperForDevTools.displayName = 'React';
|
||||
|
||||
ReactDOM.render(
|
||||
<TopLevelWrapperForDevTools version={React.version} />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
@@ -1,37 +0,0 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.Feature {
|
||||
margin: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.FeatureHeader {
|
||||
font-size: 16px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.FeatureCode {
|
||||
background-color: #eee;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
@@ -1,313 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>TODO List</title>
|
||||
|
||||
<!-- DevTools -->
|
||||
<script src="http://localhost:8097"></script>
|
||||
|
||||
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/immutable@4.0.0-rc.12/dist/immutable.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
.Input {
|
||||
font-size: 1rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.IconButton {
|
||||
padding: 0.25rem;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.List {
|
||||
margin: 0.5rem 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ListItem {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.Label {
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
color: #555;
|
||||
}
|
||||
.Label:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.IconButton {
|
||||
padding: 0.25rem;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="text/babel">
|
||||
const { Fragment, useCallback, useState } = React;
|
||||
|
||||
function List(props) {
|
||||
const [newItemText, setNewItemText] = useState("");
|
||||
const [items, setItems] = useState([
|
||||
{ id: 1, isComplete: true, text: "First" },
|
||||
{ id: 2, isComplete: true, text: "Second" },
|
||||
{ id: 3, isComplete: false, text: "Third" }
|
||||
]);
|
||||
const [uid, setUID] = useState(4);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (newItemText !== "") {
|
||||
setItems([
|
||||
...items,
|
||||
{
|
||||
id: uid,
|
||||
isComplete: false,
|
||||
text: newItemText
|
||||
}
|
||||
]);
|
||||
setUID(uid + 1);
|
||||
setNewItemText("");
|
||||
}
|
||||
}, [newItemText, items, uid]);
|
||||
|
||||
const handleKeyPress = useCallback(
|
||||
event => {
|
||||
if (event.key === "Enter") {
|
||||
handleClick();
|
||||
}
|
||||
},
|
||||
[handleClick]
|
||||
);
|
||||
|
||||
const handleChange = useCallback(
|
||||
event => {
|
||||
setNewItemText(event.currentTarget.value);
|
||||
},
|
||||
[setNewItemText]
|
||||
);
|
||||
|
||||
const removeItem = useCallback(
|
||||
itemToRemove => setItems(items.filter(item => item !== itemToRemove)),
|
||||
[items]
|
||||
);
|
||||
|
||||
const toggleItem = useCallback(
|
||||
itemToToggle => {
|
||||
const index = items.indexOf(itemToToggle);
|
||||
|
||||
setItems(
|
||||
items
|
||||
.slice(0, index)
|
||||
.concat({
|
||||
...itemToToggle,
|
||||
isComplete: !itemToToggle.isComplete
|
||||
})
|
||||
.concat(items.slice(index + 1))
|
||||
);
|
||||
},
|
||||
[items]
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<h1>List</h1>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="New list item..."
|
||||
className="Input"
|
||||
value={newItemText}
|
||||
onChange={handleChange}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
<button
|
||||
className="IconButton"
|
||||
disabled={newItemText === ""}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<span role="img" aria-label="Add item">
|
||||
➕
|
||||
</span>
|
||||
</button>
|
||||
<ul className="List">
|
||||
{items.map(item => (
|
||||
<ListItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
removeItem={removeItem}
|
||||
toggleItem={toggleItem}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
function ListItem({ item, removeItem, toggleItem }) {
|
||||
const handleDelete = useCallback(() => {
|
||||
removeItem(item);
|
||||
}, [item, removeItem]);
|
||||
|
||||
const handleToggle = useCallback(() => {
|
||||
toggleItem(item);
|
||||
}, [item, toggleItem]);
|
||||
|
||||
return (
|
||||
<li className="ListItem">
|
||||
<button className="IconButton" onClick={handleDelete}>
|
||||
🗑
|
||||
</button>
|
||||
<label className="Label">
|
||||
<input
|
||||
className="Input"
|
||||
checked={item.isComplete}
|
||||
onChange={handleToggle}
|
||||
type="checkbox"
|
||||
/>{" "}
|
||||
{item.text}
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function SimpleValues() {
|
||||
return (
|
||||
<ChildComponent
|
||||
string="abc"
|
||||
emptyString=""
|
||||
number={123}
|
||||
undefined={undefined}
|
||||
null={null}
|
||||
nan={NaN}
|
||||
infinity={Infinity}
|
||||
true={true}
|
||||
false={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
class Custom {
|
||||
_number = 42;
|
||||
get number() {
|
||||
return this._number;
|
||||
}
|
||||
}
|
||||
|
||||
function CustomObject() {
|
||||
return <ChildComponent customObject={new Custom()} />;
|
||||
}
|
||||
|
||||
const object = {
|
||||
string: "abc",
|
||||
longString: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890",
|
||||
emptyString: "",
|
||||
number: 123,
|
||||
boolean: true,
|
||||
undefined: undefined,
|
||||
null: null
|
||||
};
|
||||
|
||||
function ObjectProps() {
|
||||
return (
|
||||
<ChildComponent
|
||||
object={{
|
||||
outer: {
|
||||
inner: object
|
||||
}
|
||||
}}
|
||||
array={["first", "second", "third"]}
|
||||
objectInArray={[object]}
|
||||
arrayInObject={{ array: ["first", "second", "third"] }}
|
||||
deepObject={{
|
||||
// Known limitation: we won't go deeper than several levels.
|
||||
// In the future, we might offer a way to request deeper access on demand.
|
||||
a: {
|
||||
b: {
|
||||
c: {
|
||||
d: {
|
||||
e: {
|
||||
f: {
|
||||
g: {
|
||||
h: {
|
||||
i: {
|
||||
j: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const set = new Set(['abc', 123]);
|
||||
const map = new Map([['name', 'Brian'], ['food', 'sushi']]);
|
||||
const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);
|
||||
const mapOfMaps = new Map([['first', map], ['second', map]]);
|
||||
const typedArray = Int8Array.from([100, -100, 0]);
|
||||
const immutable = Immutable.fromJS({
|
||||
a: [{ hello: 'there' }, 'fixed', true],
|
||||
b: 123,
|
||||
c: {
|
||||
'1': 'xyz',
|
||||
xyz: 1,
|
||||
},
|
||||
});
|
||||
|
||||
function UnserializableProps() {
|
||||
return (
|
||||
<ChildComponent
|
||||
map={map}
|
||||
set={set}
|
||||
mapOfMaps={mapOfMaps}
|
||||
setOfSets={setOfSets}
|
||||
typedArray={typedArray}
|
||||
immutable={immutable}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ChildComponent(props: any) {
|
||||
return null;
|
||||
}
|
||||
|
||||
function InspectableElements() {
|
||||
return (
|
||||
<Fragment>
|
||||
<SimpleValues />
|
||||
<ObjectProps />
|
||||
<UnserializableProps />
|
||||
<CustomObject />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Fragment>
|
||||
<List />
|
||||
<InspectableElements />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
4
fixtures/dom/.gitignore
vendored
4
fixtures/dom/.gitignore
vendored
@@ -8,16 +8,12 @@ coverage
|
||||
|
||||
# production
|
||||
build
|
||||
public/scheduler-unstable_mock.development.js
|
||||
public/scheduler-unstable_mock.production.min.js
|
||||
public/react.development.js
|
||||
public/react.production.min.js
|
||||
public/react-dom.development.js
|
||||
public/react-dom.production.min.js
|
||||
public/react-dom-server.browser.development.js
|
||||
public/react-dom-server.browser.production.min.js
|
||||
public/react-dom-test-utils.development.js
|
||||
public/react-dom-test-utils.production.min.js
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
||||
@@ -7,11 +7,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/standalone": "^7.0.0",
|
||||
"art": "^0.10.3",
|
||||
"classnames": "^2.2.5",
|
||||
"codemirror": "^5.40.0",
|
||||
"core-js": "^2.4.1",
|
||||
"jest-diff": "^25.1.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"query-string": "^4.2.3",
|
||||
"react": "^15.4.1",
|
||||
@@ -20,7 +18,7 @@
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"prestart": "cp ../../build/node_modules/scheduler/umd/scheduler-unstable_mock.development.js ../../build/node_modules/scheduler/umd/scheduler-unstable_mock.production.min.js ../../build/node_modules/react/umd/react.development.js ../../build/node_modules/react-dom/umd/react-dom.development.js ../../build/node_modules/react/umd/react.production.min.js ../../build/node_modules/react-dom/umd/react-dom.production.min.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.development.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.production.min.js public/ && cp -a ../../build/node_modules/. node_modules",
|
||||
"prestart": "cp ../../build/node_modules/react/umd/react.development.js ../../build/node_modules/react-dom/umd/react-dom.development.js ../../build/node_modules/react/umd/react.production.min.js ../../build/node_modules/react-dom/umd/react-dom.production.min.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js public/",
|
||||
"build": "react-scripts build && cp build/index.html build/200.html",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>sanity test for ReactTestUtils.act</title>
|
||||
</head>
|
||||
<body>
|
||||
this page tests whether act runs properly in a browser.
|
||||
<br />
|
||||
your console should say "5"
|
||||
<script src="scheduler-unstable_mock.development.js"></script>
|
||||
<script src="react.development.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler =
|
||||
window.SchedulerMock;
|
||||
</script>
|
||||
<script src="react-dom.development.js"></script>
|
||||
<script src="react-dom-test-utils.development.js"></script>
|
||||
<script>
|
||||
// from ReactTestUtilsAct-test.js
|
||||
function App() {
|
||||
let [state, setState] = React.useState(0);
|
||||
async function ticker() {
|
||||
await null;
|
||||
setState(x => x + 1);
|
||||
}
|
||||
React.useEffect(() => {
|
||||
ticker();
|
||||
}, [Math.min(state, 4)]);
|
||||
return state;
|
||||
}
|
||||
|
||||
async function testAsyncAct() {
|
||||
const el = document.createElement("div");
|
||||
await ReactTestUtils.act(async () => {
|
||||
ReactDOM.render(React.createElement(App), el);
|
||||
});
|
||||
// all 5 ticks present and accounted for
|
||||
console.log(el.innerHTML);
|
||||
}
|
||||
|
||||
testAsyncAct();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -13,30 +13,6 @@
|
||||
var renders = 0;
|
||||
var failed = false;
|
||||
|
||||
var needsReactDOM = getBooleanQueryParam('needsReactDOM');
|
||||
var needsCreateElement = getBooleanQueryParam('needsCreateElement');
|
||||
|
||||
function unmountComponent(node) {
|
||||
// ReactDOM was moved into a separate package in 0.14
|
||||
if (needsReactDOM) {
|
||||
ReactDOM.unmountComponentAtNode(node);
|
||||
} else if (React.unmountComponentAtNode) {
|
||||
React.unmountComponentAtNode(node);
|
||||
} else {
|
||||
// Unmounting for React 0.4 and lower
|
||||
React.unmountAndReleaseReactRootNode(node);
|
||||
}
|
||||
}
|
||||
|
||||
function createElement(value) {
|
||||
// React.createElement replaced function invocation in 0.12
|
||||
if (needsCreateElement) {
|
||||
return React.createElement(value);
|
||||
} else {
|
||||
return value();
|
||||
}
|
||||
}
|
||||
|
||||
function getQueryParam(key) {
|
||||
var pattern = new RegExp(key + '=([^&]+)(&|$)');
|
||||
var matches = window.location.search.match(pattern);
|
||||
@@ -59,56 +35,20 @@
|
||||
function prerender() {
|
||||
setStatus('Generating markup');
|
||||
|
||||
return Promise.resolve()
|
||||
.then(function() {
|
||||
const element = createElement(Fixture);
|
||||
output.innerHTML = ReactDOMServer.renderToString(
|
||||
React.createElement(Fixture)
|
||||
);
|
||||
|
||||
// Server rendering moved to a separate package along with ReactDOM
|
||||
// in 0.14.0
|
||||
if (needsReactDOM) {
|
||||
return ReactDOMServer.renderToString(element);
|
||||
}
|
||||
|
||||
// React.renderComponentToString was renamed in 0.12
|
||||
if (React.renderToString) {
|
||||
return React.renderToString(element);
|
||||
}
|
||||
|
||||
// React.renderComponentToString became synchronous in React 0.9.0
|
||||
if (React.renderComponentToString.length === 1) {
|
||||
return React.renderComponentToString(element);
|
||||
}
|
||||
|
||||
// Finally, React 0.4 and lower emits markup in a callback
|
||||
return new Promise(function(resolve) {
|
||||
React.renderComponentToString(element, resolve);
|
||||
});
|
||||
})
|
||||
.then(function(string) {
|
||||
output.innerHTML = string;
|
||||
setStatus('Markup only (No React)');
|
||||
})
|
||||
.catch(handleError);
|
||||
setStatus('Markup only (No React)');
|
||||
}
|
||||
|
||||
function render() {
|
||||
setStatus('Hydrating');
|
||||
|
||||
var element = createElement(Fixture);
|
||||
|
||||
// ReactDOM was split out into another package in 0.14
|
||||
if (needsReactDOM) {
|
||||
// Hydration changed to a separate method in React 16
|
||||
if (ReactDOM.hydrate) {
|
||||
ReactDOM.hydrate(element, output);
|
||||
} else {
|
||||
ReactDOM.render(element, output);
|
||||
}
|
||||
} else if (React.render) {
|
||||
// React.renderComponent was renamed in 0.12
|
||||
React.render(element, output);
|
||||
if (ReactDOM.hydrate) {
|
||||
ReactDOM.hydrate(React.createElement(Fixture), output);
|
||||
} else {
|
||||
React.renderComponent(element, output);
|
||||
ReactDOM.render(React.createElement(Fixture), output);
|
||||
}
|
||||
|
||||
setStatus(renders > 0 ? 'Re-rendered (' + renders + 'x)' : 'Hydrated');
|
||||
@@ -145,17 +85,17 @@
|
||||
setStatus('Failed');
|
||||
output.innerHTML = 'Please name your root component "Fixture"';
|
||||
} else {
|
||||
prerender().then(function() {
|
||||
if (getBooleanQueryParam('hydrate')) {
|
||||
render();
|
||||
}
|
||||
});
|
||||
prerender();
|
||||
|
||||
if (getBooleanQueryParam('hydrate')) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reloadFixture(code) {
|
||||
renders = 0;
|
||||
unmountComponent(output);
|
||||
ReactDOM.unmountComponentAtNode(output);
|
||||
injectFixture(code);
|
||||
}
|
||||
|
||||
@@ -169,12 +109,12 @@
|
||||
|
||||
loadScript(getQueryParam('reactPath'))
|
||||
.then(function() {
|
||||
if (needsReactDOM) {
|
||||
return Promise.all([
|
||||
loadScript(getQueryParam('reactDOMPath')),
|
||||
loadScript(getQueryParam('reactDOMServerPath')),
|
||||
]);
|
||||
}
|
||||
return getBooleanQueryParam('needsReactDOM')
|
||||
? loadScript(getQueryParam('reactDOMPath'))
|
||||
: null;
|
||||
})
|
||||
.then(function() {
|
||||
return loadScript(getQueryParam('reactDOMServerPath'));
|
||||
})
|
||||
.then(function() {
|
||||
if (failed) {
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @emails react-core
|
||||
*/
|
||||
|
||||
let React;
|
||||
let DOMAct;
|
||||
let TestRenderer;
|
||||
let TestAct;
|
||||
|
||||
global.__DEV__ = process.env.NODE_ENV !== 'production';
|
||||
|
||||
expect.extend(require('../toWarnDev'));
|
||||
|
||||
describe('unmocked scheduler', () => {
|
||||
beforeEach(() => {
|
||||
jest.resetModules();
|
||||
React = require('react');
|
||||
DOMAct = require('react-dom/test-utils').act;
|
||||
TestRenderer = require('react-test-renderer');
|
||||
TestAct = TestRenderer.act;
|
||||
});
|
||||
|
||||
it('flushes work only outside the outermost act() corresponding to its own renderer', () => {
|
||||
let log = [];
|
||||
function Effecty() {
|
||||
React.useEffect(() => {
|
||||
log.push('called');
|
||||
}, []);
|
||||
return null;
|
||||
}
|
||||
// in legacy mode, this tests whether an act only flushes its own effects
|
||||
TestAct(() => {
|
||||
DOMAct(() => {
|
||||
TestRenderer.create(<Effecty />);
|
||||
});
|
||||
expect(log).toEqual([]);
|
||||
});
|
||||
expect(log).toEqual(['called']);
|
||||
|
||||
log = [];
|
||||
// for doublechecking, we flip it inside out, and assert on the outermost
|
||||
DOMAct(() => {
|
||||
TestAct(() => {
|
||||
TestRenderer.create(<Effecty />);
|
||||
});
|
||||
expect(log).toEqual(['called']);
|
||||
});
|
||||
expect(log).toEqual(['called']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('mocked scheduler', () => {
|
||||
beforeEach(() => {
|
||||
jest.resetModules();
|
||||
jest.mock('scheduler', () =>
|
||||
require.requireActual('scheduler/unstable_mock')
|
||||
);
|
||||
React = require('react');
|
||||
DOMAct = require('react-dom/test-utils').act;
|
||||
TestRenderer = require('react-test-renderer');
|
||||
TestAct = TestRenderer.act;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.unmock('scheduler');
|
||||
});
|
||||
|
||||
it('flushes work only outside the outermost act()', () => {
|
||||
let log = [];
|
||||
function Effecty() {
|
||||
React.useEffect(() => {
|
||||
log.push('called');
|
||||
}, []);
|
||||
return null;
|
||||
}
|
||||
// with a mocked scheduler, this tests whether it flushes all work only on the outermost act
|
||||
TestAct(() => {
|
||||
DOMAct(() => {
|
||||
TestRenderer.create(<Effecty />);
|
||||
});
|
||||
expect(log).toEqual([]);
|
||||
});
|
||||
expect(log).toEqual(['called']);
|
||||
|
||||
log = [];
|
||||
// for doublechecking, we flip it inside out, and assert on the outermost
|
||||
DOMAct(() => {
|
||||
TestAct(() => {
|
||||
TestRenderer.create(<Effecty />);
|
||||
});
|
||||
expect(log).toEqual([]);
|
||||
});
|
||||
expect(log).toEqual(['called']);
|
||||
});
|
||||
});
|
||||
@@ -1,201 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @emails react-core
|
||||
*/
|
||||
|
||||
let React;
|
||||
let ReactDOM;
|
||||
let ReactART;
|
||||
let TestUtils;
|
||||
let ARTSVGMode;
|
||||
let ARTCurrentMode;
|
||||
let TestRenderer;
|
||||
let ARTTest;
|
||||
|
||||
global.__DEV__ = process.env.NODE_ENV !== 'production';
|
||||
global.__EXPERIMENTAL__ = process.env.RELEASE_CHANNEL === 'experimental';
|
||||
|
||||
expect.extend(require('../toWarnDev'));
|
||||
|
||||
function App(props) {
|
||||
return 'hello world';
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
jest.resetModules();
|
||||
React = require('react');
|
||||
ReactDOM = require('react-dom');
|
||||
TestUtils = require('react-dom/test-utils');
|
||||
ReactART = require('react-art');
|
||||
ARTSVGMode = require('art/modes/svg');
|
||||
ARTCurrentMode = require('art/modes/current');
|
||||
TestRenderer = require('react-test-renderer');
|
||||
|
||||
ARTCurrentMode.setCurrent(ARTSVGMode);
|
||||
|
||||
ARTTest = function ARTTestComponent(props) {
|
||||
return (
|
||||
<ReactART.Surface width={150} height={200}>
|
||||
<ReactART.Group>
|
||||
<ReactART.Shape
|
||||
d="M0,0l50,0l0,50l-50,0z"
|
||||
fill={new ReactART.LinearGradient(['black', 'white'])}
|
||||
key="a"
|
||||
width={50}
|
||||
height={50}
|
||||
x={50}
|
||||
y={50}
|
||||
opacity={0.1}
|
||||
/>
|
||||
<ReactART.Shape
|
||||
fill="#3C5A99"
|
||||
key="b"
|
||||
scale={0.5}
|
||||
x={50}
|
||||
y={50}
|
||||
title="This is an F"
|
||||
cursor="pointer">
|
||||
M64.564,38.583H54l0.008-5.834c0-3.035,0.293-4.666,4.657-4.666
|
||||
h5.833V16.429h-9.33c-11.213,0-15.159,5.654-15.159,15.16v6.994
|
||||
h-6.99v11.652h6.99v33.815H54V50.235h9.331L64.564,38.583z
|
||||
</ReactART.Shape>
|
||||
</ReactART.Group>
|
||||
</ReactART.Surface>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
it("doesn't warn when you use the right act + renderer: dom", () => {
|
||||
TestUtils.act(() => {
|
||||
ReactDOM.render(<App />, document.createElement('div'));
|
||||
});
|
||||
});
|
||||
|
||||
it("doesn't warn when you use the right act + renderer: test", () => {
|
||||
TestRenderer.act(() => {
|
||||
TestRenderer.create(<App />);
|
||||
});
|
||||
});
|
||||
|
||||
it('resets correctly across renderers', () => {
|
||||
function Effecty() {
|
||||
React.useEffect(() => {}, []);
|
||||
return null;
|
||||
}
|
||||
TestUtils.act(() => {
|
||||
TestRenderer.act(() => {});
|
||||
expect(() => {
|
||||
TestRenderer.create(<Effecty />);
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"], {
|
||||
withoutStack: true,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('warns when using the wrong act version - test + dom: render', () => {
|
||||
expect(() => {
|
||||
TestRenderer.act(() => {
|
||||
ReactDOM.render(<App />, document.createElement('div'));
|
||||
});
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"], {
|
||||
withoutStack: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('warns when using the wrong act version - test + dom: updates', () => {
|
||||
let setCtr;
|
||||
function Counter(props) {
|
||||
const [ctr, _setCtr] = React.useState(0);
|
||||
setCtr = _setCtr;
|
||||
return ctr;
|
||||
}
|
||||
ReactDOM.render(<Counter />, document.createElement('div'));
|
||||
expect(() => {
|
||||
TestRenderer.act(() => {
|
||||
setCtr(1);
|
||||
});
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"], {
|
||||
withoutStack: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('warns when using the wrong act version - dom + test: .create()', () => {
|
||||
expect(() => {
|
||||
TestUtils.act(() => {
|
||||
TestRenderer.create(<App />);
|
||||
});
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"], {
|
||||
withoutStack: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('warns when using the wrong act version - dom + test: .update()', () => {
|
||||
const root = TestRenderer.create(<App key="one" />);
|
||||
expect(() => {
|
||||
TestUtils.act(() => {
|
||||
root.update(<App key="two" />);
|
||||
});
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"], {
|
||||
withoutStack: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('warns when using the wrong act version - dom + test: updates', () => {
|
||||
let setCtr;
|
||||
function Counter(props) {
|
||||
const [ctr, _setCtr] = React.useState(0);
|
||||
setCtr = _setCtr;
|
||||
return ctr;
|
||||
}
|
||||
TestRenderer.create(<Counter />);
|
||||
expect(() => {
|
||||
TestUtils.act(() => {
|
||||
setCtr(1);
|
||||
});
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"], {
|
||||
withoutStack: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('does not warn when nesting react-act inside react-dom', () => {
|
||||
TestUtils.act(() => {
|
||||
ReactDOM.render(<ARTTest />, document.createElement('div'));
|
||||
});
|
||||
});
|
||||
|
||||
it('does not warn when nesting react-act inside react-test-renderer', () => {
|
||||
TestRenderer.act(() => {
|
||||
TestRenderer.create(<ARTTest />);
|
||||
});
|
||||
});
|
||||
|
||||
it("doesn't warn if you use nested acts from different renderers", () => {
|
||||
TestRenderer.act(() => {
|
||||
TestUtils.act(() => {
|
||||
TestRenderer.create(<App />);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
if (__EXPERIMENTAL__) {
|
||||
it('warns when using createRoot() + .render', () => {
|
||||
const root = ReactDOM.unstable_createRoot(document.createElement('div'));
|
||||
expect(() => {
|
||||
TestRenderer.act(() => {
|
||||
root.render(<App />);
|
||||
});
|
||||
}).toWarnDev(
|
||||
[
|
||||
'In Concurrent or Sync modes, the "scheduler" module needs to be mocked',
|
||||
"It looks like you're using the wrong act()",
|
||||
],
|
||||
{
|
||||
withoutStack: true,
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
@@ -4,15 +4,13 @@ import '../style.css';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<Fixtures />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<Fixtures />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import {parse, stringify} from 'query-string';
|
||||
import VersionPicker from './VersionPicker';
|
||||
|
||||
import getVersionTags from '../tags';
|
||||
const React = window.React;
|
||||
|
||||
class Header extends React.Component {
|
||||
@@ -10,12 +9,18 @@ class Header extends React.Component {
|
||||
const version = query.version || 'local';
|
||||
const production = query.production || false;
|
||||
const versions = [version];
|
||||
|
||||
this.state = {version, versions, production};
|
||||
}
|
||||
handleVersionChange(version) {
|
||||
componentWillMount() {
|
||||
getVersionTags().then(tags => {
|
||||
let versions = tags.map(tag => tag.name.slice(1));
|
||||
versions = [`local`, ...versions];
|
||||
this.setState({versions});
|
||||
});
|
||||
}
|
||||
handleVersionChange(event) {
|
||||
const query = parse(window.location.search);
|
||||
query.version = version;
|
||||
query.version = event.target.value;
|
||||
if (query.version === 'local') {
|
||||
delete query.version;
|
||||
}
|
||||
@@ -43,10 +48,7 @@ class Header extends React.Component {
|
||||
width="20"
|
||||
height="20"
|
||||
/>
|
||||
<a href="/">
|
||||
DOM Test Fixtures (v
|
||||
{React.version})
|
||||
</a>
|
||||
<a href="/">DOM Test Fixtures (v{React.version})</a>
|
||||
</span>
|
||||
|
||||
<div className="header-controls">
|
||||
@@ -71,10 +73,8 @@ class Header extends React.Component {
|
||||
<option value="/text-inputs">Text Inputs</option>
|
||||
<option value="/number-inputs">Number Input</option>
|
||||
<option value="/password-inputs">Password Input</option>
|
||||
<option value="/email-inputs">Email Input</option>
|
||||
<option value="/selects">Selects</option>
|
||||
<option value="/textareas">Textareas</option>
|
||||
<option value="/progress">Progress</option>
|
||||
<option value="/input-change-events">
|
||||
Input change events
|
||||
</option>
|
||||
@@ -88,17 +88,19 @@ class Header extends React.Component {
|
||||
<option value="/mouse-events">Mouse Events</option>
|
||||
<option value="/selection-events">Selection Events</option>
|
||||
<option value="/suspense">Suspense</option>
|
||||
<option value="/form-state">Form State</option>
|
||||
</select>
|
||||
</label>
|
||||
<label htmlFor="global_version">
|
||||
<label htmlFor="react_version">
|
||||
<span className="sr-only">Select a version to test</span>
|
||||
<VersionPicker
|
||||
id="global_version"
|
||||
name="global_version"
|
||||
version={this.state.version}
|
||||
onChange={this.handleVersionChange}
|
||||
/>
|
||||
<select
|
||||
value={this.state.version}
|
||||
onChange={this.handleVersionChange}>
|
||||
{this.state.versions.map(version => (
|
||||
<option key={version} value={version}>
|
||||
{version}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -55,4 +55,4 @@ class IframeSubtree extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default ReactDOM.createPortal ? IframePortal : IframeSubtree;
|
||||
export default (ReactDOM.createPortal ? IframePortal : IframeSubtree);
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
import getVersionTags from '../tags';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class VersionPicker extends 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} = this.props;
|
||||
const {versions} = this.state;
|
||||
|
||||
return (
|
||||
<select id={id} name={name} value={version} onChange={this.onChange}>
|
||||
{versions.map(version => (
|
||||
<option key={version} value={version}>
|
||||
{version}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default VersionPicker;
|
||||
@@ -13,7 +13,7 @@ export default class ButtonTestCases extends React.Component {
|
||||
<FixtureSet title="Buttons">
|
||||
<TestCase
|
||||
title="onClick with disabled buttons"
|
||||
description="The onClick event handler should not be invoked when clicking on a disabled button">
|
||||
description="The onClick event handler should not be invoked when clicking on a disabled buyaton">
|
||||
<TestCase.Steps>
|
||||
<li>Click on the disabled button</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class EmailDisabledAttributesTestCase extends React.Component {
|
||||
state = {value: 'a@fb.com'};
|
||||
onChange = event => {
|
||||
this.setState({value: event.target.value});
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<Fixture>
|
||||
<div>{this.props.children}</div>
|
||||
|
||||
<div className="control-box">
|
||||
<fieldset>
|
||||
<legend>Controlled</legend>
|
||||
<input
|
||||
type="email"
|
||||
value={this.state.value}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<span className="hint">
|
||||
{' '}
|
||||
Value: {JSON.stringify(this.state.value)}
|
||||
</span>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Uncontrolled</legend>
|
||||
<input type="email" defaultValue="" />
|
||||
</fieldset>
|
||||
</div>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default EmailDisabledAttributesTestCase;
|
||||
@@ -1,48 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class EmailAttributesTestCase extends React.Component {
|
||||
state = {value: 'a@fb.com'};
|
||||
onChange = event => {
|
||||
this.setState({value: event.target.value});
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<Fixture>
|
||||
<div>{this.props.children}</div>
|
||||
|
||||
<div className="control-box">
|
||||
<fieldset>
|
||||
<legend>Controlled</legend>
|
||||
<input
|
||||
type="email"
|
||||
pattern=".+@fb.com"
|
||||
maxlength={17}
|
||||
multiple={true}
|
||||
value={this.state.value}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<span className="hint">
|
||||
{' '}
|
||||
Value: {JSON.stringify(this.state.value)}
|
||||
</span>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Uncontrolled</legend>
|
||||
<input
|
||||
type="email"
|
||||
defaultValue=""
|
||||
pattern=".+@fb.com"
|
||||
maxlength={17}
|
||||
multiple={true}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default EmailAttributesTestCase;
|
||||
@@ -1,39 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class JumpingCursorTestCase extends React.Component {
|
||||
state = {value: ''};
|
||||
onChange = event => {
|
||||
this.setState({value: event.target.value});
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<Fixture>
|
||||
<div>{this.props.children}</div>
|
||||
|
||||
<div className="control-box">
|
||||
<fieldset>
|
||||
<legend>Controlled</legend>
|
||||
<input
|
||||
type="email"
|
||||
value={this.state.value}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<span className="hint">
|
||||
{' '}
|
||||
Value: {JSON.stringify(this.state.value)}
|
||||
</span>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Uncontrolled</legend>
|
||||
<input type="email" defaultValue="" />
|
||||
</fieldset>
|
||||
</div>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default JumpingCursorTestCase;
|
||||
@@ -1,68 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
import JumpingCursorTestCase from './JumpingCursorTestCase';
|
||||
import EmailEnabledAttributesTestCase from './EmailEnabledAttributesTestCase';
|
||||
import EmailDisabledAttributesTestCase from './EmailDisabledAttributesTestCase';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
function EmailInputs() {
|
||||
return (
|
||||
<FixtureSet title="Email inputs">
|
||||
<TestCase
|
||||
title="Spaces in email inputs"
|
||||
description={`
|
||||
Some browsers are trying to remove spaces from email inputs and after
|
||||
doing this place cursor to the beginning.
|
||||
`}
|
||||
affectedBrowsers="Chrome">
|
||||
<TestCase.Steps>
|
||||
<li>Type space and character</li>
|
||||
<li>Type character, space, character, delete last character</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>Cursor not moving.</TestCase.ExpectedResult>
|
||||
|
||||
<JumpingCursorTestCase />
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Attributes enabled"
|
||||
description={`
|
||||
Test enabled pattern, maxlength, multiple attributes.
|
||||
`}>
|
||||
<TestCase.Steps>
|
||||
<li>Type after existing text ',b@tt.com'</li>
|
||||
<li>Try to type spaces after typed text</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
Spaces not added. When cursor hovered over input, popup "Please match
|
||||
the requested format." is showed.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<EmailEnabledAttributesTestCase />
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Attributes disabled"
|
||||
description={`
|
||||
Test disabled maxlength, multiple attributes.
|
||||
`}>
|
||||
<TestCase.Steps>
|
||||
<li>Type after existing text ',b@tt.com'</li>
|
||||
<li>Try to type spaces after typed text</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
Spaces are added freely. When cursor hovered over input, popup "A part
|
||||
following '@' should not contain the symbol ','." is showed.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<EmailDisabledAttributesTestCase />
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
|
||||
export default EmailInputs;
|
||||
@@ -1,60 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
const React = window.React;
|
||||
|
||||
class ControlledFormFixture extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {name: '', email: ''};
|
||||
|
||||
this.handleEmailChange = this.handleEmailChange.bind(this);
|
||||
this.handleNameChange = this.handleNameChange.bind(this);
|
||||
}
|
||||
|
||||
handleEmailChange(event) {
|
||||
this.setState({email: event.target.value});
|
||||
}
|
||||
|
||||
handleNameChange(event) {
|
||||
this.setState({name: event.target.value});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fixture>
|
||||
<form>
|
||||
<label>
|
||||
Name:
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.name}
|
||||
onChange={this.handleNameChange}
|
||||
name="name"
|
||||
x-autocompletetype="name"
|
||||
/>
|
||||
</label>
|
||||
<br />
|
||||
<label>
|
||||
Email:
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.email}
|
||||
onChange={this.handleEmailChange}
|
||||
name="email"
|
||||
x-autocompletetype="email"
|
||||
/>
|
||||
</label>
|
||||
</form>
|
||||
<br />
|
||||
<div>
|
||||
<span>States</span>
|
||||
<br />
|
||||
<span>Name: {this.state.name}</span>
|
||||
<br />
|
||||
<span>Email: {this.state.email}</span>
|
||||
</div>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ControlledFormFixture;
|
||||
@@ -1,60 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
import ControlledFormFixture from './ControlledFormFixture';
|
||||
const React = window.React;
|
||||
|
||||
export default class FormStateCases extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet title="Form State">
|
||||
<TestCase
|
||||
title="Form state autofills from browser"
|
||||
description="Form start should autofill/autocomplete if user has autocomplete/autofill information saved. The user may need to set-up autofill or autocomplete with their specific browser.">
|
||||
<TestCase.Steps>
|
||||
<li>
|
||||
Set up autofill/autocomplete for your browser.
|
||||
<br />
|
||||
Instructions:
|
||||
<ul>
|
||||
<li>
|
||||
<SafeLink
|
||||
href="https://support.google.com/chrome/answer/142893?co=GENIE.Platform%3DDesktop&hl=en"
|
||||
text="Google Chrome"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<SafeLink
|
||||
href="https://support.mozilla.org/en-US/kb/autofill-logins-firefox"
|
||||
text="Mozilla FireFox"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<SafeLink
|
||||
href="https://support.microsoft.com/en-us/help/4027718/microsoft-edge-automatically-fill-info"
|
||||
text="Microsoft Edge"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click into any input.</li>
|
||||
<li>Select any autofill option.</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Autofill options should appear when clicking into fields. Selected
|
||||
autofill options should change state (shown underneath, under
|
||||
"States").
|
||||
</TestCase.ExpectedResult>
|
||||
<ControlledFormFixture />
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SafeLink = ({text, href}) => {
|
||||
return (
|
||||
<a target="_blank" rel="noreferrer" href={href}>
|
||||
{text}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
@@ -33,8 +33,7 @@ export default function Home() {
|
||||
<td>
|
||||
<a href="https://www.mozilla.org/en-US/firefox/organizations/">
|
||||
ESR<sup>†</sup>
|
||||
</a>
|
||||
, Latest
|
||||
</a>, Latest
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import {findDOMNode} from '../../../find-dom-node';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
export class CodeEditor extends React.Component {
|
||||
@@ -8,8 +6,6 @@ export class CodeEditor extends React.Component {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.textarea = findDOMNode(this);
|
||||
|
||||
// Important: CodeMirror incorrectly lays out the editor
|
||||
// if it executes before CSS has loaded
|
||||
// https://github.com/graphql/graphiql/issues/33#issuecomment-318188555
|
||||
@@ -48,6 +44,7 @@ export class CodeEditor extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<textarea
|
||||
ref={ref => (this.textarea = ref)}
|
||||
defaultValue={this.props.code}
|
||||
autoComplete="off"
|
||||
hidden={true}
|
||||
@@ -75,10 +72,6 @@ export class CodeError extends React.Component {
|
||||
if (supportsDetails) {
|
||||
const [summary, ...body] = error.message.split(/\n+/g);
|
||||
|
||||
if (body.length >= 0) {
|
||||
return <div className={className}>{summary}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<details className={className}>
|
||||
<summary>{summary}</summary>
|
||||
|
||||
@@ -22,7 +22,6 @@
|
||||
|
||||
.hydration-options label {
|
||||
font-size: 13px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.hydration-options input[type=checkbox] {
|
||||
@@ -31,11 +30,6 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hydration-options select {
|
||||
margin-left: 10px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.hydration .CodeMirror {
|
||||
font-size: 13px;
|
||||
padding-top: 8px;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import './hydration.css';
|
||||
import VersionPicker from '../../VersionPicker';
|
||||
import {SAMPLE_CODE} from './data';
|
||||
import {CodeEditor, CodeError} from './Code';
|
||||
import {compile} from './code-transformer';
|
||||
@@ -7,17 +6,12 @@ import {reactPaths} from '../../../react-loader';
|
||||
import qs from 'query-string';
|
||||
|
||||
const React = window.React;
|
||||
// The Hydration fixture can render at a different version than the parent
|
||||
// app. This allows rendering for versions of React older than the DOM
|
||||
// test fixtures can support.
|
||||
const initialVersion = qs.parse(window.location.search).version || 'local';
|
||||
|
||||
class Hydration extends React.Component {
|
||||
state = {
|
||||
error: null,
|
||||
code: SAMPLE_CODE,
|
||||
hydrate: true,
|
||||
version: initialVersion,
|
||||
};
|
||||
|
||||
ready = false;
|
||||
@@ -78,14 +72,9 @@ class Hydration extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
setVersion = version => {
|
||||
this.setState({version});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {code, error, hydrate, version} = this.state;
|
||||
const src =
|
||||
'/renderer.html?' + qs.stringify({hydrate, ...reactPaths(version)});
|
||||
const {code, error, hydrate} = this.state;
|
||||
const src = '/renderer.html?' + qs.stringify({hydrate, ...reactPaths()});
|
||||
|
||||
return (
|
||||
<div className="hydration">
|
||||
@@ -100,16 +89,6 @@ class Hydration extends React.Component {
|
||||
/>
|
||||
Auto-Hydrate
|
||||
</label>
|
||||
|
||||
<label htmlFor="hydration_version">
|
||||
Version:
|
||||
<VersionPicker
|
||||
id="hydration_version"
|
||||
name="hydration_version"
|
||||
version={version}
|
||||
onChange={this.setVersion}
|
||||
/>
|
||||
</label>
|
||||
</header>
|
||||
|
||||
<CodeEditor code={code} onChange={this.setCode} />
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import MouseMovement from './mouse-movement';
|
||||
import MouseEnter from './mouse-enter';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
@@ -9,7 +8,6 @@ class MouseEvents extends React.Component {
|
||||
return (
|
||||
<FixtureSet title="Mouse Events">
|
||||
<MouseMovement />
|
||||
<MouseEnter />
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
import TestCase from '../../TestCase';
|
||||
|
||||
const React = window.React;
|
||||
const ReactDOM = window.ReactDOM;
|
||||
|
||||
const MouseEnter = () => {
|
||||
const containerRef = React.useRef();
|
||||
|
||||
React.useEffect(function() {
|
||||
const hostEl = containerRef.current;
|
||||
ReactDOM.render(<MouseEnterDetect />, hostEl, () => {
|
||||
ReactDOM.render(<MouseEnterDetect />, hostEl.childNodes[1]);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<TestCase
|
||||
title="Mouse Enter"
|
||||
description=""
|
||||
affectedBrowsers="Chrome, Safari, Firefox">
|
||||
<TestCase.Steps>
|
||||
<li>Mouse enter the boxes below, from different borders</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Mouse enter call count should equal to 1; <br />
|
||||
Issue{' '}
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
href="https://github.com/facebook/react/issues/16763">
|
||||
#16763
|
||||
</a>{' '}
|
||||
should not happen.
|
||||
<br />
|
||||
</TestCase.ExpectedResult>
|
||||
<div ref={containerRef} />
|
||||
</TestCase>
|
||||
);
|
||||
};
|
||||
|
||||
const MouseEnterDetect = () => {
|
||||
const [log, setLog] = React.useState({});
|
||||
const firstEl = React.useRef();
|
||||
const siblingEl = React.useRef();
|
||||
|
||||
const onMouseEnter = e => {
|
||||
const timeStamp = e.timeStamp;
|
||||
setLog(log => {
|
||||
const callCount = 1 + (log.timeStamp === timeStamp ? log.callCount : 0);
|
||||
return {
|
||||
timeStamp,
|
||||
callCount,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div
|
||||
ref={firstEl}
|
||||
onMouseEnter={onMouseEnter}
|
||||
style={{
|
||||
border: '1px solid #d9d9d9',
|
||||
padding: '20px 20px',
|
||||
}}>
|
||||
Mouse enter call count: {log.callCount || ''}
|
||||
</div>
|
||||
<div ref={siblingEl} />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default MouseEnter;
|
||||
@@ -1,87 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class ProgressFixture extends React.Component {
|
||||
state = {value: 0, max: 1, enabled: false, backwards: false};
|
||||
|
||||
startTest = () => {
|
||||
this.setState({enabled: true}, () => {
|
||||
this.progressIntervalId = setInterval(() => {
|
||||
if (this.state.backwards) {
|
||||
if (this.state.value > 0) {
|
||||
this.setState({value: this.state.value - this.state.max / 100});
|
||||
} else {
|
||||
if (this.state.max === 10000) {
|
||||
this.resetTest();
|
||||
} else {
|
||||
this.setState({max: this.state.max * 100, backwards: false});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.state.value < this.state.max) {
|
||||
this.setState({value: this.state.value + this.state.max / 100});
|
||||
} else {
|
||||
this.setState({backwards: true});
|
||||
}
|
||||
}
|
||||
}, 10);
|
||||
});
|
||||
};
|
||||
|
||||
resetTest = () => {
|
||||
clearInterval(this.progressIntervalId);
|
||||
this.setState({value: 0, max: 1, enabled: false, backwards: false});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet title="Progress">
|
||||
<TestCase title="Fill and reset progress bar">
|
||||
<TestCase.Steps>
|
||||
<li>Press enable button</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
When enabled, bar value should increase from 0% to 100% and
|
||||
backwards during three step loop: 0-1, 0-100, 0-10000. Reset button
|
||||
stops loop, sets value to 0 and max to 1.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<Fixture>
|
||||
<div className="control-box">
|
||||
<fieldset>
|
||||
<legend>Controlled</legend>
|
||||
<progress
|
||||
value={this.state.value}
|
||||
max={this.state.max}></progress>
|
||||
<button
|
||||
onClick={
|
||||
this.state.enabled ? this.resetTest : this.startTest
|
||||
}>
|
||||
{this.state.enabled ? 'Reset' : 'Enable'}
|
||||
</button>
|
||||
<br />
|
||||
<span className="hint">
|
||||
{' '}
|
||||
max: {JSON.stringify(this.state.max)}
|
||||
</span>
|
||||
<span className="hint">
|
||||
{' '}
|
||||
value:{' '}
|
||||
{JSON.stringify(
|
||||
Math.round((this.state.value + Number.EPSILON) * 100) / 100
|
||||
)}
|
||||
</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</Fixture>
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ProgressFixture;
|
||||
@@ -172,7 +172,7 @@ class SelectFixture extends React.Component {
|
||||
<option value="monkey">monkey</option>
|
||||
<option value="lion">lion</option>
|
||||
<option value="mongoose">mongoose</option>
|
||||
<option value="tiger">tiger</option>
|
||||
<option value="tiger">tiget</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
@@ -202,34 +202,6 @@ class SelectFixture extends React.Component {
|
||||
</select>
|
||||
</div>
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="A select with the size attribute should not set first option as selected"
|
||||
relatedIssues="14239"
|
||||
introducedIn="16.0.0">
|
||||
<TestCase.ExpectedResult>
|
||||
No options should be selected.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<div className="test-fixture">
|
||||
<select size="3">
|
||||
<option>0</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p className="footnote">
|
||||
<b>Notes:</b> This happens if <code>size</code> is assigned after
|
||||
options are selected. The select element picks the first item by
|
||||
default, then it is expanded to show more options when{' '}
|
||||
<code>size</code> is assigned, preserving the default selection.
|
||||
</p>
|
||||
<p className="footnote">
|
||||
This was introduced in React 16.0.0 when options were added before
|
||||
select attribute assignment.
|
||||
</p>
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user