[ { "path": ".codesandbox/ci.json", "content": "{\n \"packages\": [\"packages/react-native-web\", \"packages/babel-plugin-react-native-web\"],\n \"buildCommand\": \"build\",\n \"sandboxes\": [\"/packages/react-native-web-examples/\"],\n \"node\": \"16\"\n}\n" }, { "path": ".github/CONTRIBUTING.md", "content": "# Contributing\n\n## Reporting Issues and Asking Questions\n\nBefore opening an issue, please search the [issue tracker](https://github.com/necolas/react-native-web/issues) to make sure your issue hasn't already been reported. Please note that your issue may be closed if it doesn't include the information requested in the issue template.\n\n## Getting started\n\nVisit the [Issue tracker](https://github.com/necolas/react-native-web/issues) to find a list of open issues that need attention.\n\nFork, then clone the repo:\n\n```\ngit clone https://github.com/your-username/react-native-web.git\n```\n\nInstall dependencies (requires Node.js >= 16.0):\n\n```\nnpm install\n```\n\n## Build\n\nBuild a specific package:\n\n```\nnpm run build -w \n```\n\nFor example, this will build `react-native-web`:\n\n```\nnpm run build -w react-native-web\n```\n\nBuild all packages that can be built:\n\n```\nnpm run build\n```\n\n## Develop\n\nDevelop a specific package:\n\n```\nnpm run dev -w \n```\n\nFor example, this command will watch and rebuild the `react-native-web` package:\n\n```\nnpm run dev -w react-native-web\n```\n\nAnd this command will watch and rebuild the `react-native-web-examples` package:\n\n```\nnpm run dev -w react-native-web-examples\n```\n\n## Test\n\nRun the monorepo linter:\n\n```\nnpm run lint\n```\n\nRun the monorepo type checker:\n\n```\nnpm run flow\n```\n\nRun the monorepo unit tests:\n\n```\nnpm run unit\n```\n\nRun all the automated tests:\n\n```\nnpm run test\n```\n\n## New Features\n\nPlease open an issue with a proposal for a new feature or refactoring before starting on the work. We don't want you to waste your efforts on a pull request that we won't want to accept.\n\n## Pull requests\n\n**Before submitting a pull request**, please make sure the following is done:\n\n1. Fork the repository and create your branch from `master`.\n2. If you've added code that should be tested, add tests!\n3. If you've changed APIs, update the documentation.\n4. Ensure the tests pass (`npm run test`).\n\nYou should see a pre-commit hook run before each commit.\n\nYou can now submit a pull request, referencing any issues it addresses.\n\nPlease try to keep your pull request focused in scope and avoid including unrelated commits.\n\nAfter you have submitted your pull request, it's recommended that **you** perform the first code review. We'll try to get back to you as soon as possible and may suggest changes.\n\nThank you for contributing!\n\n## Releases\n\nTo commit, publish, and push a final version:\n\n```\nnpm run release -- --otp=\n```\n\nRelease candidates or versions that you'd like to publish to npm, but do not want to produce a commit and push it to GitHub:\n\n```\nnpm run release -- --skip-git\n```\n" }, { "path": ".github/ISSUE_TEMPLATE/bug.yml", "content": "name: Bug report\ndescription: File a bug report\nlabels: [\"bug\"]\nbody:\n - type: markdown\n attributes:\n value: |\n Thank you for reporting an issue! Create a test case for your issue by forking this template https://codesandbox.io/s/6lx6ql1w5r\n - type: checkboxes\n attributes:\n label: Is there an existing issue for this?\n description: Please search to see if an issue already exists for the bug you encountered.\n options:\n - label: I have searched the existing issues\n required: true\n - type: textarea\n attributes:\n label: Describe the issue\n description: Please provide a concise description of what you're experiencing. Providing screenshots is also helpful.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Expected behavior\n description: Please provide a concise description of what you expected to happen.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Steps to reproduce\n description: Please describe the precise steps needed to reproduce the behavior.\n placeholder: |\n Mention package versions and environment (browser, etc)...\n 1. ...\n 2. ...\n validations:\n required: true\n - type: input\n attributes:\n label: Test case\n description: Please provide a link to a reduced test case that reproduces the issue.\n placeholder: \"https://codesandbox.io/s/6lx6ql1w5r\"\n validations:\n required: true\n - type: textarea\n attributes:\n label: Additional comments\n description: You're welcome to provide additional context and proposed solutions.\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\n" }, { "path": ".github/ISSUE_TEMPLATE/feature.yml", "content": "name: Feature request\ndescription: If you have a suggestion…\nlabels: [\"enhancement\"]\nbody:\n - type: markdown\n attributes:\n value: |\n Thank you for suggesting a feature!\n - type: checkboxes\n attributes:\n label: Is there an existing request?\n description: Please search open and closed issues to see if this request has already been made.\n options:\n - label: I have searched for this request\n required: true\n - type: textarea\n attributes:\n label: Describe the feature request\n description: Please provide a concise description of the request, potential solutions, and additional context.\n validations:\n required: true\n" }, { "path": ".github/labels-config.yml", "content": "# Configuration for Label Actions - https://github.com/marketplace/actions/label-actions\n\n\"needs: issue template\":\n comment: >\n :warning: This issue is missing required fields. To avoid this issue being closed, please provide the required information as described in the ISSUE TEMPLATE.\n\n\"resolution: no response\":\n comment: >\n This issue is being closed because the requested information has not been provided.\n close: true\n" }, { "path": ".github/workflows/labels.yml", "content": "name: labels\n\non:\n issues:\n types: [labeled, unlabeled]\n pull_request:\n types: [labeled, unlabeled]\n\npermissions:\n contents: read\n issues: write\n pull-requests: write\n\njobs:\n label-actions:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: dessant/label-actions@v3\n with:\n config-path: .github/labels-config.yml\n github-token: ${{ github.token }}\n" }, { "path": ".github/workflows/performance.yml", "content": "name: performance\n\non: [pull_request]\n\njobs:\n compressed-size:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: necolas/compressed-size-action@master\n with:\n build-script: \"compile\"\n exclude: \"./packages/react-native-web/dist/cjs/{index.js,**/*.js}\"\n pattern: \"./packages/react-native-web/dist/{index.js,**/*.js}\"\n repo-token: \"${{ secrets.GITHUB_TOKEN }}\"\n" }, { "path": ".github/workflows/react-integration.yml", "content": "name: react@next integration\n\non:\n schedule:\n # Run every Monday at 12:00 (see https://crontab.guru)\n - cron: '0 12 * * 1'\n\njobs:\n react-next:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 16\n - run: npm install\n # Update react-native-web to use react@next\n - run: npm install --force react@next react-dom@next -w react-native-web\n # Run the unit tests\n - run: npm run unit\n" }, { "path": ".github/workflows/tests.yml", "content": "name: tests\n\non:\n push:\n branches:\n - \"master\"\n pull_request:\n types: [opened, synchronize, reopened]\n\njobs:\n format:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 16\n - run: npm install\n - run: npm run format\n\n type-check:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 16\n - run: npm install\n - run: npm run flow\n\n lint:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 16\n - run: npm install\n - run: npm run lint\n\n unit-test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 16\n - run: npm install\n - run: npm run unit\n" }, { "path": ".gitignore", "content": ".next\nbuild\ncoverage\ndist\nnode_modules\n" }, { "path": ".watchmanconfig", "content": "{}\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) Nicolas Gallagher.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# Development monorepo\n\nThis is the development monorepo for \"React Native for Web\" and related projects.\n\n## Structure\n\n* `.github`\n * Contains workflows used by GitHub Actions.\n * Contains issue templates.\n* `configs`\n * Contains configuration files used by the monorepo tooling (compiling, linting, testing, etc.)\n* `packages`\n * [react-native-web](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web)\n * Contains the individual packages managed in the monorepo.\n* `scripts`\n * Contains Node.js scripts for miscellaneous tasks.\n\n## Tasks\n\n* `build`\n * Use `npm run build` to run the build script in every package.\n * Use `npm run build -w ` to run the build script for a specific package.\n* `dev`\n * Use `npm run dev` to run the dev script in every package.\n * Use `npm run dev -w ` to run the dev script for a specific package.\n* `test`\n * Use `npm run test` to run tests for every package.\n\nMore details can be found in the contributing guide below.\n\n## Contributing\n\nDevelopment happens in the open on GitHub and we are grateful for contributions including bugfixes, improvements, and ideas.\n\n### Code of conduct\n\nThis project expects all participants to adhere to Meta's OSS [Code of Conduct][code-of-conduct]. Please read the full text so that you can understand what actions will and will not be tolerated.\n\n### Contributing guide\n\nRead the [contributing guide][contributing-url] to learn about the development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native for Web.\n\n### Good first issues\n\nTo help you get you familiar with the contribution process, there is a list of [good first issues][good-first-issue-url] that contain bugs which have a relatively limited scope. This is a great place to get started.\n\n[contributing-url]: https://github.com/necolas/react-native-web/blob/master/.github/CONTRIBUTING.md\n[good-first-issue-url]: https://github.com/necolas/react-native-web/labels/good%20first%20issue\n[code-of-conduct]: https://opensource.fb.com/code-of-conduct/\n" }, { "path": "configs/.eslintignore", "content": "coverage\ndist\nflow-typed\nnode_modules\npackages/**/vendor/*\npackages/**/.next\n" }, { "path": "configs/.eslintrc", "content": "{\n \"settings\": {\n \"react\": {\n \"pragma\": \"React\",\n \"version\": \"18.0\",\n \"flowVersion\": \"0.148.0\" // Flow version\n }\n },\n // babel parser to support ES6/7 features\n \"parser\": \"@babel/eslint-parser\",\n \"parserOptions\": {\n \"ecmaVersion\": 7,\n \"ecmaFeatures\": {\n \"experimentalObjectRestSpread\": true,\n \"jsx\": true\n },\n \"requireConfigFile\": false,\n \"sourceType\": \"module\"\n },\n \"extends\": [\n \"plugin:flowtype/recommended\",\n \"prettier\"\n ],\n \"plugins\": [\n \"flowtype\",\n \"promise\",\n \"react\",\n \"react-hooks\"\n ],\n \"env\": {\n \"browser\": true,\n \"es6\": true,\n \"jest\": true,\n \"node\": true\n },\n \"ignorePatterns\": [\n \"coverage\",\n \"dist\",\n \"flow-typed\",\n \"node_modules\",\n \"packages/**/vendor/*\",\n \"packages/**/.next\"\n ],\n \"globals\": {\n\n },\n \"rules\": {\n \"camelcase\": 0,\n \"constructor-super\": 2,\n \"default-case\": [2, { \"commentPattern\": \"^no default$\" }],\n \"eqeqeq\": [2, \"allow-null\"],\n \"handle-callback-err\": [2, \"^(err|error)$\" ],\n \"new-cap\": [2, { \"newIsCap\": true, \"capIsNew\": false }],\n \"no-alert\": 1,\n \"no-array-constructor\": 2,\n \"no-caller\": 2,\n \"no-case-declarations\": 2,\n \"no-class-assign\": 2,\n \"no-cond-assign\": 2,\n \"no-const-assign\": 2,\n \"no-control-regex\": 2,\n \"no-debugger\": 2,\n \"no-delete-var\": 2,\n \"no-dupe-args\": 2,\n \"no-dupe-class-members\": 2,\n \"no-dupe-keys\": 2,\n \"no-duplicate-case\": 2,\n \"no-empty-character-class\": 2,\n \"no-empty-pattern\": 2,\n \"no-eval\": 2,\n \"no-ex-assign\": 2,\n \"no-extend-native\": 2,\n \"no-extra-bind\": 2,\n \"no-extra-boolean-cast\": 2,\n \"no-fallthrough\": 2,\n \"no-floating-decimal\": 2,\n \"no-func-assign\": 2,\n \"no-implied-eval\": 2,\n \"no-inner-declarations\": [2, \"functions\"],\n \"no-invalid-regexp\": 2,\n \"no-irregular-whitespace\": 2,\n \"no-iterator\": 2,\n \"no-label-var\": 2,\n \"no-labels\": [2, { \"allowLoop\": false, \"allowSwitch\": false }],\n \"no-lone-blocks\": 2,\n \"no-loop-func\": 2,\n \"no-multi-str\": 2,\n \"no-native-reassign\": 2,\n \"no-negated-in-lhs\": 2,\n \"no-new\": 2,\n \"no-new-func\": 2,\n \"no-new-object\": 2,\n \"no-new-require\": 2,\n \"no-new-symbol\": 2,\n \"no-new-wrappers\": 2,\n \"no-obj-calls\": 2,\n \"no-octal\": 2,\n \"no-octal-escape\": 2,\n \"no-path-concat\": 2,\n \"no-proto\": 2,\n \"no-redeclare\": 2,\n \"no-regex-spaces\": 2,\n \"no-return-assign\": [2, \"except-parens\"],\n \"no-script-url\": 2,\n \"no-self-assign\": 2,\n \"no-self-compare\": 2,\n \"no-sequences\": 2,\n \"no-shadow-restricted-names\": 2,\n \"no-sparse-arrays\": 2,\n \"no-this-before-super\": 2,\n \"no-throw-literal\": 2,\n \"no-undef\": 2,\n \"no-undef-init\": 2,\n \"no-unexpected-multiline\": 2,\n \"no-unmodified-loop-condition\": 2,\n \"no-unneeded-ternary\": [2, { \"defaultAssignment\": false }],\n \"no-unreachable\": 2,\n \"no-unsafe-finally\": 2,\n \"no-unused-vars\": [2, { \"vars\": \"all\", \"args\": \"none\" }],\n \"no-useless-call\": 2,\n \"no-useless-computed-key\": 2,\n \"no-useless-concat\": 2,\n \"no-useless-constructor\": 2,\n \"no-useless-escape\": 2,\n \"no-var\": 2,\n \"no-with\": 2,\n \"prefer-const\": 2,\n \"prefer-rest-params\": 2,\n \"quotes\": [2, \"single\", { \"avoidEscape\": true, \"allowTemplateLiterals\": true }],\n \"radix\": 2,\n \"use-isnan\": 2,\n \"valid-typeof\": 2,\n \"yoda\": [2, \"never\"],\n\n // flow\n \"flowtype/generic-spacing\": 0,\n \"flowtype/space-after-type-colon\": 0,\n\n // promise\n \"promise/param-names\": 2,\n\n // react\n \"react/display-name\": 0,\n \"react/jsx-no-bind\": 0,\n \"react/jsx-no-duplicate-props\": 2,\n \"react/jsx-no-undef\": 2,\n \"react/jsx-pascal-case\": 2,\n \"react/jsx-sort-props\": 2,\n \"react/jsx-uses-react\": 2,\n \"react/jsx-uses-vars\": 2,\n \"react/no-did-mount-set-state\": 0,\n \"react/no-did-update-set-state\": 2,\n \"react/no-direct-mutation-state\": 2,\n \"react/no-multi-comp\": 0,\n \"react/no-string-refs\": 2,\n \"react/no-unknown-property\": 2,\n \"react/prefer-es6-class\": 2,\n \"react/prop-types\": 0,\n \"react/react-in-jsx-scope\": 0,\n \"react/self-closing-comp\": 2,\n \"react/sort-comp\": 0,\n \"react/sort-prop-types\": 2,\n \"react/wrap-multilines\": 0,\n\n // react-hooks\n \"react-hooks/rules-of-hooks\": \"error\",\n \"react-hooks/exhaustive-deps\": \"warn\"\n }\n}\n" }, { "path": "configs/.flowconfig", "content": "[version]\n0.148.0\n\n[ignore]\n/.*/__tests__/.*\n/packages/.*/dist/.*\n/packages/react-native-web-docs/.*\n/packages/react-native-web-examples/.*\n\n[include]\n\n[declarations]\n.*/node_modules/.*\n\n[libs]\n\n[options]\nindexed_access=true\nmunge_underscores=true\n" }, { "path": "configs/.prettierignore", "content": "../coverage\n../**/dist\n../flow-typed\n../node_modules\n../packages/**/vendor/*\n../packages/**/.next\n" }, { "path": "configs/babel.config.js", "content": "const createConfig = ({ modules }) => {\n const plugins = [\n '@babel/plugin-transform-flow-strip-types',\n ['@babel/plugin-proposal-class-properties', { loose: true }],\n ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],\n '@babel/plugin-proposal-nullish-coalescing-operator',\n [\n '@babel/plugin-transform-runtime',\n {\n version: '7.18.6'\n }\n ]\n ].concat(modules ? ['babel-plugin-add-module-exports'] : []);\n\n return {\n assumptions: {\n iterableIsArray: true\n },\n comments: true,\n presets: [\n [\n '@babel/preset-env',\n {\n loose: true,\n modules,\n exclude: ['transform-typeof-symbol'],\n targets: {\n browsers: [\n 'chrome 49',\n // https://www.mozilla.org/en-US/firefox/all/#product-desktop-esr\n 'firefox 91',\n 'ios_saf 10',\n 'safari 10',\n // https://docs.microsoft.com/en-us/DeployEdge/microsoft-edge-support-lifecycle\n 'edge 94',\n 'opera 36'\n ]\n }\n }\n ],\n '@babel/preset-react',\n '@babel/preset-flow'\n ],\n plugins: plugins\n };\n};\n\nmodule.exports = function (api) {\n if (api) {\n api.cache(true);\n }\n\n return process.env.BABEL_ENV === 'commonjs' || process.env.NODE_ENV === 'test'\n ? createConfig({ modules: 'commonjs' })\n : createConfig({ modules: false });\n};\n" }, { "path": "configs/husky/pre-commit", "content": "#!/usr/bin/env sh\n. \"$(dirname -- \"$0\")/_/husky.sh\"\n\nnpx --no lint-staged\n" }, { "path": "configs/jest-setupFiles.dom.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n// JSDOM doesn't implement ResizeObserver\nclass ResizeObserver {\n disconnect() {}\n observe() {}\n unobserve() {}\n}\nwindow.ResizeObserver = ResizeObserver;\n\n// JSDOM doesn't provide values for 'clientWidth' etc\nObject.defineProperty(window.document.documentElement, 'clientHeight', {\n get: function () {\n return this._jsdomClientWidth || window.innerHeight;\n }\n});\nObject.defineProperty(window.document.documentElement, 'clientWidth', {\n get: function () {\n return this._jsdomClientWidth || window.innerWidth;\n }\n});\n" }, { "path": "configs/jest.config.js", "content": "'use strict';\n\nconst babelConfig = require('./babel.config.js');\n\nmodule.exports = {\n coveragePathIgnorePatterns: [\n '/node_modules/',\n '/packages/react-native-web/src/vendor/'\n ],\n fakeTimers: {\n enableGlobally: true\n },\n modulePathIgnorePatterns: [\n '/packages/benchmarks/',\n '/packages/react-native-web-docs/',\n '/packages/react-native-web-examples/',\n '/packages/react-native-web/dist/'\n ],\n rootDir: process.cwd(),\n roots: ['/packages'],\n setupFiles: [require.resolve('./jest-setupFiles.dom.js')],\n snapshotFormat: {\n printBasicPrototype: false\n },\n testEnvironment: 'jsdom',\n testMatch: ['**/__tests__/**/?(*-)+(spec|test).[jt]s?(x)'],\n transform: {\n '\\\\.[jt]sx?$': ['babel-jest', babelConfig()]\n }\n};\n" }, { "path": "configs/jest.config.node.js", "content": "'use strict';\n\nconst babelConfig = require('./babel.config.js');\n\nmodule.exports = {\n coveragePathIgnorePatterns: [\n '/node_modules/',\n '/packages/react-native-web/src/vendor/'\n ],\n fakeTimers: {\n enableGlobally: true\n },\n modulePathIgnorePatterns: [\n '/packages/benchmarks/',\n '/packages/react-native-web-docs/',\n '/packages/react-native-web-examples/',\n '/packages/react-native-web/dist/'\n ],\n rootDir: process.cwd(),\n roots: ['/packages'],\n snapshotFormat: {\n printBasicPrototype: false\n },\n testEnvironment: 'node',\n testMatch: ['**/__tests__/**/?(*-)+(spec|test).node.[jt]s?(x)'],\n transform: {\n '\\\\.[jt]sx?$': ['babel-jest', babelConfig()]\n }\n};\n" }, { "path": "flow-typed/npm/create-react-class_v15.x.x.js", "content": "// flow-typed signature: 59a949eac1b23f4800e93fe3c647f055\n// flow-typed version: c6154227d1/create-react-class_v15.x.x/flow_>=v0.104.x\n\ndeclare module \"create-react-class\" {\n declare module.exports: React$CreateClass;\n}\n" }, { "path": "flow-typed/npm/prop-types_v15.x.x.js", "content": "// flow-typed signature: c93a723cbeb4d2f95d6a472157f6052f\n// flow-typed version: 61b795e5b6/prop-types_v15.x.x/flow_>=v0.104.x\n\ntype $npm$propTypes$ReactPropsCheckType = (\n props: any,\n propName: string,\n componentName: string,\n href?: string\n) => ?Error;\n\n// Copied from: https://github.com/facebook/flow/blob/0938da8d7293d0077fbe95c3a3e0eebadb57b012/lib/react.js#L433-L449\ndeclare module 'prop-types' {\n declare var array: React$PropType$Primitive>;\n declare var bool: React$PropType$Primitive;\n declare var func: React$PropType$Primitive<(...a: Array) => mixed>;\n declare var number: React$PropType$Primitive;\n declare var object: React$PropType$Primitive<{ +[string]: mixed, ... }>;\n declare var string: React$PropType$Primitive;\n declare var symbol: React$PropType$Primitive;\n declare var any: React$PropType$Primitive;\n declare var arrayOf: React$PropType$ArrayOf;\n declare var element: React$PropType$Primitive;\n declare var elementType: React$PropType$Primitive;\n declare var instanceOf: React$PropType$InstanceOf;\n declare var node: React$PropType$Primitive;\n declare var objectOf: React$PropType$ObjectOf;\n declare var oneOf: React$PropType$OneOf;\n declare var oneOfType: React$PropType$OneOfType;\n declare var shape: React$PropType$Shape;\n\n declare function checkPropTypes(\n propTypes: { [key: $Keys]: $npm$propTypes$ReactPropsCheckType, ... },\n values: V,\n location: string,\n componentName: string,\n getStack: ?() => ?string\n ): void;\n}\n" }, { "path": "flow-typed/npm/styleq.js", "content": "type CompiledStyle = {\n $$css: boolean,\n [key: string]: string,\n};\n\ntype InlineStyle = {\n [key: string]: mixed,\n};\n\ntype EitherStyle = CompiledStyle | InlineStyle;\n\ntype StylesArray<+T> = T | $ReadOnlyArray>;\ntype Styles = StylesArray;\ntype Style<+T = EitherStyle> = StylesArray;\n\ntype StyleqOptions = {\n disableCache?: boolean,\n disableMix?: boolean,\n transform?: (EitherStyle) => EitherStyle,\n};\n\ntype StyleqResult = [string, InlineStyle | null];\ntype Styleq = (styles: Styles) => StyleqResult;\n\ntype IStyleq = {\n (...styles: $ReadOnlyArray): StyleqResult,\n factory: (options?: StyleqOptions) => Styleq,\n};\n\ndeclare module \"styleq\" {\n declare module.exports: {\n styleq: IStyleq\n };\n}\n\ndeclare module \"styleq/transform-localize-style\" {\n declare module.exports: {\n localizeStyle: (style: EitherStyle, isRTL: boolean) => EitherStyle\n };\n}\n" }, { "path": "package.json", "content": "{\n \"private\": true,\n \"version\": \"0.0.0\",\n \"name\": \"react-ui-monorepo\",\n \"scripts\": {\n \"clean\": \"del-cli ./packages/*/dist\",\n \"build\": \"npm run clean && npm run build --workspaces --if-present\",\n \"compile\": \"npm run build\",\n \"dev\": \"npm run dev --workspaces --if-present\",\n \"flow\": \"flow --flowconfig-name ./configs/.flowconfig\",\n \"format\": \"prettier --check --ignore-path ./configs/.prettierignore \\\"**/*.js\\\"\",\n \"format:fix\": \"prettier --write --ignore-path ./configs/.prettierignore \\\"**/*.js\\\"\",\n \"lint\": \"eslint configs packages scripts --config ./configs/.eslintrc\",\n \"lint:fix\": \"npm run lint -- --fix\",\n \"prerelease\": \"npm run test && npm run build\",\n \"release\": \"node ./scripts/releaseReactNativeWebPackages.js\",\n \"release:benchmarks\": \"git checkout gh-pages && rm -rf ./docs/benchmarks && mv packages/benchmarks/dist ./docs/benchmarks && git add -A && git commit -m \\\"Deploy benchmarks\\\" && git push origin gh-pages && git checkout -\",\n \"release:react-native-web-docs\": \"git checkout gh-pages && rm -rf ./docs && mv packages/react-native-web-docs/dist ./docs && git add ./docs && git commit -m \\\"Deploy documentation\\\" && git push origin gh-pages && git checkout -\",\n \"postrelease\": \"npm run release:react-native-web-docs && npm run release:benchmarks\",\n \"prepare\": \"husky install configs/husky\",\n \"test\": \"npm run flow && npm run format && npm run lint && npm run unit --runInBand\",\n \"unit\": \"npm-run-all \\\"unit:* {@}\\\" --\",\n \"unit:dom\": \"jest --config ./configs/jest.config.js\",\n \"unit:node\": \"jest --config ./configs/jest.config.node.js\"\n },\n \"devDependencies\": {\n \"@babel/cli\": \"^7.18.6\",\n \"@babel/core\": \"^7.18.6\",\n \"@babel/eslint-parser\": \"^7.18.2\",\n \"@babel/plugin-proposal-class-properties\": \"^7.18.6\",\n \"@babel/plugin-proposal-nullish-coalescing-operator\": \"^7.18.6\",\n \"@babel/plugin-proposal-object-rest-spread\": \"^7.18.6\",\n \"@babel/plugin-transform-runtime\": \"^7.18.6\",\n \"@babel/preset-env\": \"^7.18.6\",\n \"@babel/preset-flow\": \"^7.18.6\",\n \"@babel/preset-react\": \"^7.18.6\",\n \"@testing-library/react\": \"^16.3.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"babel-jest\": \"^29.7.0\",\n \"babel-plugin-add-module-exports\": \"^1.0.4\",\n \"babel-plugin-transform-react-remove-prop-types\": \"^0.4.24\",\n \"caniuse-api\": \"^3.0.0\",\n \"cross-env\": \"^7.0.3\",\n \"del-cli\": \"^4.0.1\",\n \"eslint\": \"^8.19.0\",\n \"eslint-config-prettier\": \"^8.5.0\",\n \"eslint-plugin-flowtype\": \"^8.0.3\",\n \"eslint-plugin-promise\": \"^6.0.0\",\n \"eslint-plugin-react\": \"^7.30.1\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"flow-bin\": \"0.148.0\",\n \"gen-flow-files\": \"^0.4.11\",\n \"glob\": \"^8.0.3\",\n \"husky\": \"^8.0.0\",\n \"jest\": \"^29.7.0\",\n \"jest-environment-jsdom\": \"^29.7.0\",\n \"lint-staged\": \"^13.0.3\",\n \"minimist\": \"^1.2.6\",\n \"npm-run-all\": \"^4.1.3\",\n \"prettier\": \"^2.7.1\"\n },\n \"workspaces\": [\n \"packages/react-native-web\",\n \"packages/*\"\n ],\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"lint-staged\"\n }\n },\n \"lint-staged\": {\n \"packages/react-native-web/src/index.js\": [\n \"node ./scripts/createBabelReactNativeWebModuleMap.js\",\n \"prettier --write ./packages/babel-plugin-react-native-web/src/moduleMap.js\"\n ],\n \"**/*.js\": [\n \"npm run format:fix\",\n \"npm run lint:fix\"\n ]\n },\n \"prettier\": {\n \"singleQuote\": true,\n \"trailingComma\": \"none\"\n },\n \"author\": \"Nicolas Gallagher\",\n \"license\": \"MIT\"\n}\n" }, { "path": "packages/babel-plugin-react-native-web/LICENSE", "content": "MIT License\n\nCopyright (c) Nicolas Gallagher.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "packages/babel-plugin-react-native-web/README.md", "content": "# babel-plugin-react-native-web\n\n[![npm version][package-badge]][package-url] [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)\n\nA Babel plugin that will alias `react-native` to `react-native-web` and exclude\nany modules not required by your app (keeping bundle size down).\n\n## Installation\n\n```\nnpm install --save-dev babel-plugin-react-native-web\n```\n\n## Usage\n\n**.babelrc**\n\n```\n{\n \"plugins\": [\n [\"react-native-web\", { commonjs: true }]\n ]\n}\n```\n\nYou should configure the plugin to match the module format used by your\nbundler. Most modern bundlers will use a package's ES modules by default (i.e.,\nif `package.json` has a `module` field). But if you need the plugin to rewrite\nimport paths to point to CommonJS modules, you must set the `commonjs` option\nto `true`.\n\n## Example\n\nNOTE: `react-native-web` internal paths are _not stable_ and you must not rely\non them. Always use the Babel plugin to optimize your build. What follows is an\nexample of the rewrite performed by the plugin.\n\n**Before**\n\n```js\nimport { StyleSheet, View } from 'react-native';\n```\n\n**After**\n\n```js\nimport StyleSheet from 'react-native-web/dist/exports/StyleSheet';\nimport View from 'react-native-web/dist/exports/View';\n```\n\n[package-badge]: https://img.shields.io/npm/v/babel-plugin-react-native-web.svg?style=flat\n[package-url]: https://www.npmjs.com/package/babel-plugin-react-native-web\n" }, { "path": "packages/babel-plugin-react-native-web/index.js", "content": "module.exports = require('./src');\n" }, { "path": "packages/babel-plugin-react-native-web/package.json", "content": "{\n \"publishConfig\": {\n \"registry\": \"https://registry.npmjs.org/\"\n },\n \"name\": \"babel-plugin-react-native-web\",\n \"version\": \"0.21.2\",\n \"description\": \"Babel plugin for React Native for Web\",\n \"main\": \"index.js\",\n \"devDependencies\": {\n \"babel-plugin-tester\": \"^10.1.0\"\n },\n \"author\": \"Nicolas Gallagher\",\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git://github.com/necolas/react-native-web.git\"\n }\n}\n" }, { "path": "packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Rewrite react-native to react-native-web export from \"react-native\": export from \"react-native\" 1`] = `\n\nexport { View } from 'react-native';\nexport { StyleSheet, Text, unstable_createElement } from 'react-native';\n\n ↓ ↓ ↓ ↓ ↓ ↓\n\nexport { default as View } from 'react-native-web/dist/exports/View';\nexport { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';\nexport { default as Text } from 'react-native-web/dist/exports/Text';\nexport { default as unstable_createElement } from 'react-native-web/dist/exports/createElement';\n\n\n`;\n\nexports[`Rewrite react-native to react-native-web export from \"react-native-web\": export from \"react-native-web\" 1`] = `\n\nexport { View } from 'react-native-web';\nexport { StyleSheet, Text, unstable_createElement } from 'react-native-web';\n\n ↓ ↓ ↓ ↓ ↓ ↓\n\nexport { default as View } from 'react-native-web/dist/exports/View';\nexport { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';\nexport { default as Text } from 'react-native-web/dist/exports/Text';\nexport { default as unstable_createElement } from 'react-native-web/dist/exports/createElement';\n\n\n`;\n\nexports[`Rewrite react-native to react-native-web import from \"react-native\": import from \"react-native\" 1`] = `\n\nimport ReactNative from 'react-native';\nimport { View } from 'react-native';\nimport { Invalid, View as MyView } from 'react-native';\nimport { useLocaleContext } from 'react-native';\nimport * as ReactNativeModules from 'react-native';\n\n ↓ ↓ ↓ ↓ ↓ ↓\n\nimport ReactNative from 'react-native-web/dist/index';\nimport View from 'react-native-web/dist/exports/View';\nimport { Invalid } from 'react-native-web/dist/index';\nimport MyView from 'react-native-web/dist/exports/View';\nimport useLocaleContext from 'react-native-web/dist/exports/useLocaleContext';\nimport * as ReactNativeModules from 'react-native-web/dist/index';\n\n\n`;\n\nexports[`Rewrite react-native to react-native-web import from \"react-native\": import from \"react-native\" 2`] = `\n\nimport ReactNative from 'react-native';\nimport { View } from 'react-native';\nimport { Invalid, View as MyView } from 'react-native';\nimport * as ReactNativeModules from 'react-native';\n\n ↓ ↓ ↓ ↓ ↓ ↓\n\nimport ReactNative from 'react-native-web/dist/cjs/index';\nimport View from 'react-native-web/dist/cjs/exports/View';\nimport { Invalid } from 'react-native-web/dist/cjs/index';\nimport MyView from 'react-native-web/dist/cjs/exports/View';\nimport * as ReactNativeModules from 'react-native-web/dist/cjs/index';\n\n\n`;\n\nexports[`Rewrite react-native to react-native-web import from \"react-native-web\": import from \"react-native-web\" 1`] = `\n\nimport { unstable_createElement } from 'react-native-web';\nimport { StyleSheet, View, Pressable, processColor } from 'react-native-web';\nimport * as ReactNativeModules from 'react-native-web';\n\n ↓ ↓ ↓ ↓ ↓ ↓\n\nimport unstable_createElement from 'react-native-web/dist/exports/createElement';\nimport StyleSheet from 'react-native-web/dist/exports/StyleSheet';\nimport View from 'react-native-web/dist/exports/View';\nimport Pressable from 'react-native-web/dist/exports/Pressable';\nimport processColor from 'react-native-web/dist/exports/processColor';\nimport * as ReactNativeModules from 'react-native-web/dist/index';\n\n\n`;\n\nexports[`Rewrite react-native to react-native-web require \"react-native\": require \"react-native\" 1`] = `\n\nconst ReactNative = require('react-native');\nconst { View } = require('react-native');\nconst { StyleSheet, Pressable } = require('react-native');\n\n ↓ ↓ ↓ ↓ ↓ ↓\n\nconst ReactNative = require('react-native-web/dist/index');\nconst View = require('react-native-web/dist/exports/View').default;\nconst StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;\nconst Pressable = require('react-native-web/dist/exports/Pressable').default;\n\n\n`;\n\nexports[`Rewrite react-native to react-native-web require \"react-native\": require \"react-native\" 2`] = `\n\nconst ReactNative = require('react-native');\nconst { View } = require('react-native');\nconst { StyleSheet, Pressable } = require('react-native');\n\n ↓ ↓ ↓ ↓ ↓ ↓\n\nconst ReactNative = require('react-native-web/dist/cjs/index');\nconst View = require('react-native-web/dist/cjs/exports/View').default;\nconst StyleSheet =\n require('react-native-web/dist/cjs/exports/StyleSheet').default;\nconst Pressable =\n require('react-native-web/dist/cjs/exports/Pressable').default;\n\n\n`;\n\nexports[`Rewrite react-native to react-native-web require \"react-native-web\": require \"react-native-web\" 1`] = `\n\nconst ReactNative = require('react-native-web');\nconst { unstable_createElement } = require('react-native-web');\nconst { StyleSheet, View, Pressable, processColor } = require('react-native-web');\n\n ↓ ↓ ↓ ↓ ↓ ↓\n\nconst ReactNative = require('react-native-web/dist/index');\nconst unstable_createElement =\n require('react-native-web/dist/exports/createElement').default;\nconst StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;\nconst View = require('react-native-web/dist/exports/View').default;\nconst Pressable = require('react-native-web/dist/exports/Pressable').default;\nconst processColor =\n require('react-native-web/dist/exports/processColor').default;\n\n\n`;\n" }, { "path": "packages/babel-plugin-react-native-web/src/__tests__/index-test.js", "content": "const plugin = require('..');\nconst pluginTester = require('babel-plugin-tester').default;\n\nconst tests = [\n // import react-native\n {\n title: 'import from \"react-native\"',\n code: `import ReactNative from 'react-native';\nimport { View } from 'react-native';\nimport { Invalid, View as MyView } from 'react-native';\nimport { useLocaleContext } from 'react-native';\nimport * as ReactNativeModules from 'react-native';`,\n snapshot: true\n },\n {\n title: 'import from \"react-native\"',\n code: `import ReactNative from 'react-native';\nimport { View } from 'react-native';\nimport { Invalid, View as MyView } from 'react-native';\nimport * as ReactNativeModules from 'react-native';`,\n snapshot: true,\n pluginOptions: { commonjs: true }\n },\n {\n title: 'import from \"react-native-web\"',\n code: `import { unstable_createElement } from 'react-native-web';\nimport { StyleSheet, View, Pressable, processColor } from 'react-native-web';\nimport * as ReactNativeModules from 'react-native-web';`,\n snapshot: true\n },\n {\n title: 'export from \"react-native\"',\n code: `export { View } from 'react-native';\nexport { StyleSheet, Text, unstable_createElement } from 'react-native';`,\n snapshot: true\n },\n {\n title: 'export from \"react-native-web\"',\n code: `export { View } from 'react-native-web';\nexport { StyleSheet, Text, unstable_createElement } from 'react-native-web';`,\n snapshot: true\n },\n // require react-native\n {\n title: 'require \"react-native\"',\n code: `const ReactNative = require('react-native');\nconst { View } = require('react-native');\nconst { StyleSheet, Pressable } = require('react-native');`,\n snapshot: true\n },\n {\n title: 'require \"react-native\"',\n code: `const ReactNative = require('react-native');\nconst { View } = require('react-native');\nconst { StyleSheet, Pressable } = require('react-native');`,\n snapshot: true,\n pluginOptions: { commonjs: true }\n },\n {\n title: 'require \"react-native-web\"',\n code: `const ReactNative = require('react-native-web');\nconst { unstable_createElement } = require('react-native-web');\nconst { StyleSheet, View, Pressable, processColor } = require('react-native-web');`,\n snapshot: true\n }\n];\n\npluginTester({\n babelOptions: {\n generatorOpts: {\n jsescOption: {\n quotes: 'single'\n }\n }\n },\n plugin,\n pluginName: 'Rewrite react-native to react-native-web',\n tests\n});\n" }, { "path": "packages/babel-plugin-react-native-web/src/index.js", "content": "const moduleMap = require('./moduleMap');\n\nconst isCommonJS = (opts) => opts.commonjs === true;\n\nconst getDistLocation = (importName, opts) => {\n const format = isCommonJS(opts) ? 'cjs/' : '';\n const internalName =\n importName === 'unstable_createElement' ? 'createElement' : importName;\n if (internalName === 'index') {\n return `react-native-web/dist/${format}index`;\n } else if (internalName && moduleMap[internalName]) {\n return `react-native-web/dist/${format}exports/${internalName}`;\n }\n};\n\nconst isReactNativeRequire = (t, node) => {\n const { declarations } = node;\n if (declarations.length > 1) {\n return false;\n }\n const { id, init } = declarations[0];\n return (\n (t.isObjectPattern(id) || t.isIdentifier(id)) &&\n t.isCallExpression(init) &&\n t.isIdentifier(init.callee) &&\n init.callee.name === 'require' &&\n init.arguments.length === 1 &&\n (init.arguments[0].value === 'react-native' ||\n init.arguments[0].value === 'react-native-web')\n );\n};\n\nconst isReactNativeModule = ({ source, specifiers }) =>\n source &&\n (source.value === 'react-native' || source.value === 'react-native-web') &&\n specifiers.length;\n\nmodule.exports = function ({ types: t }) {\n return {\n name: 'Rewrite react-native to react-native-web',\n visitor: {\n ImportDeclaration(path, state) {\n const { specifiers } = path.node;\n if (isReactNativeModule(path.node)) {\n const imports = specifiers\n .map((specifier) => {\n if (t.isImportSpecifier(specifier)) {\n const importName = specifier.imported.name;\n const distLocation = getDistLocation(importName, state.opts);\n\n if (distLocation) {\n return t.importDeclaration(\n [\n t.importDefaultSpecifier(\n t.identifier(specifier.local.name)\n )\n ],\n t.stringLiteral(distLocation)\n );\n }\n }\n return t.importDeclaration(\n [specifier],\n t.stringLiteral(getDistLocation('index', state.opts))\n );\n })\n .filter(Boolean);\n\n path.replaceWithMultiple(imports);\n }\n },\n ExportNamedDeclaration(path, state) {\n const { specifiers } = path.node;\n if (isReactNativeModule(path.node)) {\n const exports = specifiers\n .map((specifier) => {\n if (t.isExportSpecifier(specifier)) {\n const exportName = specifier.exported.name;\n const localName = specifier.local.name;\n const distLocation = getDistLocation(localName, state.opts);\n\n if (distLocation) {\n return t.exportNamedDeclaration(\n null,\n [\n t.exportSpecifier(\n t.identifier('default'),\n t.identifier(exportName)\n )\n ],\n t.stringLiteral(distLocation)\n );\n }\n }\n return t.exportNamedDeclaration(\n null,\n [specifier],\n t.stringLiteral(getDistLocation('index', state.opts))\n );\n })\n .filter(Boolean);\n\n path.replaceWithMultiple(exports);\n }\n },\n VariableDeclaration(path, state) {\n if (isReactNativeRequire(t, path.node)) {\n const { id } = path.node.declarations[0];\n if (t.isObjectPattern(id)) {\n const imports = id.properties\n .map((identifier) => {\n const distLocation = getDistLocation(\n identifier.key.name,\n state.opts\n );\n if (distLocation) {\n return t.variableDeclaration(path.node.kind, [\n t.variableDeclarator(\n t.identifier(identifier.value.name),\n t.memberExpression(\n t.callExpression(t.identifier('require'), [\n t.stringLiteral(distLocation)\n ]),\n t.identifier('default')\n )\n )\n ]);\n }\n })\n .filter(Boolean);\n\n path.replaceWithMultiple(imports);\n } else if (t.isIdentifier(id)) {\n const name = id.name;\n const importIndex = t.variableDeclaration(path.node.kind, [\n t.variableDeclarator(\n t.identifier(name),\n t.callExpression(t.identifier('require'), [\n t.stringLiteral(getDistLocation('index', state.opts))\n ])\n )\n ]);\n\n path.replaceWith(importIndex);\n }\n }\n }\n }\n };\n};\n" }, { "path": "packages/babel-plugin-react-native-web/src/moduleMap.js", "content": "// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.\nmodule.exports = {\n AccessibilityInfo: true,\n ActivityIndicator: true,\n Alert: true,\n Animated: true,\n AppRegistry: true,\n AppState: true,\n Appearance: true,\n BackHandler: true,\n Button: true,\n CheckBox: true,\n Clipboard: true,\n DeviceEventEmitter: true,\n Dimensions: true,\n Easing: true,\n FlatList: true,\n I18nManager: true,\n Image: true,\n ImageBackground: true,\n InputAccessoryView: true,\n InteractionManager: true,\n Keyboard: true,\n KeyboardAvoidingView: true,\n LayoutAnimation: true,\n Linking: true,\n LogBox: true,\n Modal: true,\n NativeEventEmitter: true,\n NativeModules: true,\n PanResponder: true,\n Picker: true,\n PixelRatio: true,\n Platform: true,\n Pressable: true,\n ProgressBar: true,\n RefreshControl: true,\n SafeAreaView: true,\n ScrollView: true,\n SectionList: true,\n Share: true,\n StatusBar: true,\n StyleSheet: true,\n Switch: true,\n Text: true,\n TextInput: true,\n Touchable: true,\n TouchableHighlight: true,\n TouchableNativeFeedback: true,\n TouchableOpacity: true,\n TouchableWithoutFeedback: true,\n UIManager: true,\n Vibration: true,\n View: true,\n VirtualizedList: true,\n YellowBox: true,\n createElement: true,\n findNodeHandle: true,\n processColor: true,\n render: true,\n unmountComponentAtNode: true,\n useColorScheme: true,\n useLocaleContext: true,\n useWindowDimensions: true\n};\n" }, { "path": "packages/benchmarks/LICENSE", "content": "MIT License\n\nCopyright (c) Nicolas Gallagher.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "packages/benchmarks/README.md", "content": "# Benchmarks\n\nTry the [benchmarks app](https://necolas.github.io/react-native-web/benchmarks) online.\n\nTo work on the benchmarks locally from monorepo root:\n\n```\nnpm run dev -w react-native-web\nnpm run build -w benchmarks\nopen ./packages/benchmarks/dist/index.html\n```\n\n## Notes\n\nThese benchmarks are approximations of extreme cases that libraries may\nencounter. Their purpose is to provide an early-warning signal for performance\nregressions. Each test report includes the mean and standard deviation of the\ntimings, and approximations of the time spent in scripting (S) and layout (L).\n\nThe components used in the render benchmarks are simple enough to be\nimplemented by multiple UI or style libraries. The benchmark implementations\nand the features of the style libraries are _only approximately equivalent in\nfunctionality_.\n\nNo benchmark will run for more than 20 seconds.\n\n### Mount deep/wide tree\n\nThese cases look at the performance of mounting and rendering large trees of\nelements that use static styles.\n\n### Update dynamic styles\n\nThis case looks at the performance of repeated style updates to a large mounted\ntree. Some libraries choose to inject new styles for each \"dynamic style\",\nwhereas others choose to use inline styles. Libraries without built-in support\nfor dynamic styles (i.e., they rely on user-authored inline styles) are not\nincluded.\n\n## Example results\n\n### MacBook Pro (2011)\n\nMacBook Pro (13-inch, Early 2011); 2.3 GHz Intel Core i5; 8 GB 1333 MHz DDR3 RAM. Google Chrome 72.\n\nTypical render timings: mean ± standard deviations.\n\n| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) |\n| :--- | ---: | ---: | ---: |\n| `css-modules` | `23.41` `±03.06` | `35.38` `±06.41` | - |\n| `react-native-web@0.11.0` | `28.37` `±04.39` | `41.50` `±05.75` | `23.13` `±03.51` |\n| `inline-styles` | `66.19` `±06.31` | `104.22` `±10.22` | `09.96` `±02.76` |\n\n### Moto G4\n\nMoto G4 (Android 7); Octa-core (4x1.5 GHz & 4x1.2 Ghz); 2 GB RAM. Google Chrome 72.\n\nTypical render timings: mean ± standard deviations.\n\n| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) |\n| :--- | ---: | ---: | ---: |\n| `css-modules` | `71.33` `±09.68` | `101.36` `±12.36` | - |\n| `react-native-web@0.11.0` | `83.65` `±12.40` | `123.59` `±14.40` | `75.41` `±07.74` |\n| `inline-styles` | `188.35` `±17.69` | `282.35` `±22.48` | `28.10` `±06.87` |\n" }, { "path": "packages/benchmarks/index.html", "content": "\n\n\n \n Performance tests\n \n \n\n\n
\n \n\n\n" }, { "path": "packages/benchmarks/package.json", "content": "{\n \"private\": true,\n \"name\": \"benchmarks\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"clean\": \"del-cli ./dist\",\n \"build\": \"NODE_ENV=production npm run dev\",\n \"dev\": \"npm run clean && mkdir -p dist && cp -f index.html dist/index.html && webpack --config ./webpack.config.js\"\n },\n \"dependencies\": {\n \"classnames\": \"^2.3.1\",\n \"d3-scale-chromatic\": \"^3.0.0\",\n \"prop-types\": \"^15.6.0\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"react-native-web\": \"0.18.10\"\n },\n \"devDependencies\": {\n \"babel-loader\": \"^8.2.5\",\n \"babel-plugin-react-native-web\": \"0.18.10\",\n \"css-loader\": \"^6.7.1\",\n \"style-loader\": \"^3.3.1\",\n \"url-loader\": \"^4.1.1\",\n \"webpack\": \"^5.76.0\",\n \"webpack-bundle-analyzer\": \"^4.5.0\",\n \"webpack-cli\": \"^4.10.0\"\n }\n}\n" }, { "path": "packages/benchmarks/src/app/App.js", "content": "import Benchmark from './Benchmark';\nimport { Picker, StyleSheet, ScrollView, Pressable, View } from 'react-native';\nimport React, { Component } from 'react';\nimport Button from './Button';\nimport { IconClear, IconEye } from './Icons';\nimport ReportCard from './ReportCard';\nimport Text from './Text';\nimport Layout from './Layout';\nimport { colors } from './theme';\n\nconst Overlay = () => ;\n\nexport default class App extends Component {\n static displayName = '@app/App';\n\n constructor(props, context) {\n super(props, context);\n const currentBenchmarkName = Object.keys(props.tests)[0];\n this.state = {\n currentBenchmarkName,\n currentLibraryName: 'react-native-web',\n status: 'idle',\n results: []\n };\n }\n\n render() {\n const { tests } = this.props;\n const { currentBenchmarkName, status, currentLibraryName, results } =\n this.state;\n const currentImplementation =\n tests[currentBenchmarkName][currentLibraryName];\n const { Component, Provider, getComponentProps, sampleCount } =\n currentImplementation;\n\n return (\n \n \n \n Library\n {currentLibraryName}\n\n \n {Object.keys(tests[currentBenchmarkName]).map(\n (libraryName) => (\n \n )\n )}\n \n \n \n \n Benchmark\n {currentBenchmarkName}\n \n {Object.keys(tests).map((test) => (\n \n ))}\n \n \n \n\n \n \n \n \n \n\n {status === 'running' ? : null}\n \n }\n listPanel={\n \n \n \n \n \n \n \n \n \n \n {results.map((r, i) => (\n \n ))}\n {status === 'running' ? (\n \n ) : null}\n \n \n {status === 'running' ? : null}\n \n }\n viewPanel={\n \n \n \n \n \n \n\n \n {status === 'running' ? (\n \n \n \n \n \n ) : (\n \n )}\n \n\n {status === 'running' ? : null}\n \n }\n />\n );\n }\n\n _handleChangeBenchmark = (value) => {\n this.setState(() => ({ currentBenchmarkName: value }));\n };\n\n _handleChangeLibrary = (value) => {\n this.setState(() => ({ currentLibraryName: value }));\n };\n\n _handleStart = () => {\n this.setState(\n () => ({ status: 'running' }),\n () => {\n if (this._shouldHideBenchmark && this._benchWrapperRef) {\n this._benchWrapperRef.style.opacity = 0;\n }\n this._benchmarkRef.start();\n this._scrollToEnd();\n }\n );\n };\n\n // hide the benchmark as it is performed (no flashing on screen)\n _handleVisuallyHideBenchmark = () => {\n this._shouldHideBenchmark = !this._shouldHideBenchmark;\n if (this._benchWrapperRef) {\n this._benchWrapperRef.style.opacity = this._shouldHideBenchmark ? 0 : 1;\n }\n };\n\n _createHandleComplete =\n ({ benchmarkName, libraryName, sampleCount }) =>\n (results) => {\n this.setState(\n (state) => ({\n results: state.results.concat([\n {\n ...results,\n benchmarkName,\n libraryName,\n libraryVersion:\n this.props.tests[benchmarkName][libraryName].version\n }\n ]),\n status: 'complete'\n }),\n this._scrollToEnd\n );\n // console.log(results);\n // console.log(results.samples.map(sample => sample.elapsed.toFixed(1)).join('\\n'));\n };\n\n _handleClear = () => {\n this.setState(() => ({ results: [] }));\n };\n\n _setBenchRef = (ref) => {\n this._benchmarkRef = ref;\n };\n\n _setBenchWrapperRef = (ref) => {\n this._benchWrapperRef = ref;\n };\n\n _setScrollRef = (ref) => {\n this._scrollRef = ref;\n };\n\n // scroll the most recent result into view\n _scrollToEnd = () => {\n window.requestAnimationFrame(() => {\n if (this._scrollRef) {\n this._scrollRef.scrollToEnd();\n }\n });\n };\n}\n\nconst styles = StyleSheet.create({\n viewPanel: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n overflow: 'hidden',\n backgroundColor: 'black'\n },\n iconEye: {\n color: 'white',\n height: 32\n },\n iconEyeContainer: {\n position: 'absolute',\n top: 10,\n right: 10,\n zIndex: 1\n },\n iconClearContainer: {\n height: '100%',\n marginLeft: 5\n },\n grow: {\n flex: 1\n },\n listPanel: {\n flex: 1,\n width: '100%',\n marginHorizontal: 'auto'\n },\n listBar: {\n padding: 5,\n alignItems: 'center',\n flexDirection: 'row',\n backgroundColor: colors.fadedGray,\n borderBottomWidth: 1,\n borderBottomColor: colors.mediumGray,\n justifyContent: 'flex-end'\n },\n pickers: {\n flexDirection: 'row'\n },\n pickerContainer: {\n flex: 1,\n padding: 5\n },\n pickerTitle: {\n fontSize: 12,\n color: colors.deepGray\n },\n picker: {\n ...StyleSheet.absoluteFillObject,\n appearance: 'none',\n opacity: 0,\n width: '100%'\n },\n button: {\n borderRadius: 0,\n flex: 1\n }\n});\n" }, { "path": "packages/benchmarks/src/app/Benchmark/index.js", "content": "/**\n * The MIT License (MIT)\n * Copyright (c) 2017 Paul Armstrong\n * https://github.com/paularmstrong/react-component-benchmark\n * @flow\n */\n\n/* global $Values */\n\nimport type { Node } from 'react';\n\nimport * as Timing from './timing';\nimport React, { Component } from 'react';\nimport { getMean, getMedian, getStdDev } from './math';\n\nimport type {\n BenchResultsType,\n FullSampleTimingType,\n SampleTimingType\n} from './types';\n\nexport const BenchmarkType = {\n MOUNT: 'mount',\n UPDATE: 'update',\n UNMOUNT: 'unmount'\n};\n\nconst shouldRender = (\n cycle: number,\n type: $Values\n): boolean => {\n switch (type) {\n // Render every odd iteration (first, third, etc)\n // Mounts and unmounts the component\n case BenchmarkType.MOUNT:\n case BenchmarkType.UNMOUNT:\n return !((cycle + 1) % 2);\n // Render every iteration (updates previously rendered module)\n case BenchmarkType.UPDATE:\n return true;\n default:\n return false;\n }\n};\n\nconst shouldRecord = (\n cycle: number,\n type: $Values\n): boolean => {\n switch (type) {\n // Record every odd iteration (when mounted: first, third, etc)\n case BenchmarkType.MOUNT:\n return !((cycle + 1) % 2);\n // Record every iteration\n case BenchmarkType.UPDATE:\n return true;\n // Record every even iteration (when unmounted)\n case BenchmarkType.UNMOUNT:\n return !(cycle % 2);\n default:\n return false;\n }\n};\n\nconst isDone = (\n cycle: number,\n sampleCount: number,\n type: $Values\n): boolean => {\n switch (type) {\n case BenchmarkType.MOUNT:\n return cycle >= sampleCount * 2 - 1;\n case BenchmarkType.UPDATE:\n return cycle >= sampleCount - 1;\n case BenchmarkType.UNMOUNT:\n return cycle >= sampleCount * 2;\n default:\n return true;\n }\n};\n\nconst sortNumbers = (a: number, b: number): number => a - b;\n\ntype BenchmarkPropsType = {\n component: typeof React.Component,\n forceLayout?: boolean,\n getComponentProps: Function,\n onComplete: (x: BenchResultsType) => void,\n sampleCount: number,\n timeout: number,\n type: $Values\n};\n\ntype BenchmarkStateType = {\n componentProps: Object,\n cycle: number,\n running: boolean\n};\n\n/**\n * Benchmark\n * TODO: documentation\n */\nexport default class Benchmark extends Component<\n BenchmarkPropsType,\n BenchmarkStateType\n> {\n _raf: ?Function;\n _startTime: number;\n _samples: Array;\n\n static displayName: ?string = 'Benchmark';\n\n static defaultProps: {|\n sampleCount: number,\n timeout: number,\n type: $PropertyType\n |} = {\n sampleCount: 50,\n timeout: 10000, // 10 seconds\n type: BenchmarkType.MOUNT\n };\n\n static Type: typeof BenchmarkType = BenchmarkType;\n\n constructor(props: BenchmarkPropsType, context?: {}) {\n super(props, context);\n const cycle = 0;\n const componentProps = props.getComponentProps({ cycle });\n this.state = {\n componentProps,\n cycle,\n running: false\n };\n this._startTime = 0;\n this._samples = [];\n }\n\n componentWillReceiveProps(nextProps: BenchmarkPropsType) {\n if (nextProps) {\n this.setState((state) => ({\n componentProps: nextProps.getComponentProps(state.cycle)\n }));\n }\n }\n\n componentWillUpdate(\n nextProps: BenchmarkPropsType,\n nextState: BenchmarkStateType\n ) {\n if (nextState.running && !this.state.running) {\n this._startTime = Timing.now();\n }\n }\n\n componentDidUpdate() {\n const { forceLayout, sampleCount, timeout, type } = this.props;\n const { cycle, running } = this.state;\n\n if (running && shouldRecord(cycle, type)) {\n this._samples[cycle].scriptingEnd = Timing.now();\n\n // force style recalc that would otherwise happen before the next frame\n if (forceLayout) {\n this._samples[cycle].layoutStart = Timing.now();\n if (document.body) {\n document.body.offsetWidth;\n }\n this._samples[cycle].layoutEnd = Timing.now();\n }\n }\n\n if (running) {\n const now = Timing.now();\n if (\n !isDone(cycle, sampleCount, type) &&\n now - this._startTime < timeout\n ) {\n this._handleCycleComplete();\n } else {\n this._handleComplete(now);\n }\n }\n }\n\n componentWillUnmount() {\n if (this._raf) {\n window.cancelAnimationFrame(this._raf);\n }\n }\n\n render(): Node {\n const { component: Component, type } = this.props;\n const { componentProps, cycle, running } = this.state;\n if (running && shouldRecord(cycle, type)) {\n this._samples[cycle] = { scriptingStart: Timing.now() };\n }\n return running && shouldRender(cycle, type) ? (\n \n ) : null;\n }\n\n start() {\n this._samples = [];\n this.setState(() => ({ running: true, cycle: 0 }));\n }\n\n _handleCycleComplete() {\n const { getComponentProps, type } = this.props;\n const { cycle } = this.state;\n\n let componentProps;\n if (getComponentProps) {\n // Calculate the component props outside of the time recording (render)\n // so that it doesn't skew results\n componentProps = getComponentProps({ cycle });\n // make sure props always change for update tests\n if (type === BenchmarkType.UPDATE) {\n componentProps['data-test'] = cycle;\n }\n }\n\n this._raf = window.requestAnimationFrame(() => {\n this.setState((state: BenchmarkStateType) => ({\n cycle: state.cycle + 1,\n componentProps\n }));\n });\n }\n\n getSamples(): Array {\n return this._samples.reduce(\n (\n memo: Array,\n {\n scriptingStart,\n scriptingEnd,\n layoutStart,\n layoutEnd\n }: SampleTimingType\n ): Array => {\n memo.push({\n start: scriptingStart,\n end: layoutEnd || scriptingEnd || 0,\n scriptingStart,\n scriptingEnd: scriptingEnd || 0,\n layoutStart,\n layoutEnd\n });\n return memo;\n },\n []\n );\n }\n\n _handleComplete(endTime: number) {\n const { onComplete } = this.props;\n const samples = this.getSamples();\n\n this.setState(() => ({ running: false, cycle: 0 }));\n\n const runTime = endTime - this._startTime;\n const sortedElapsedTimes = samples\n .map(({ start, end }) => end - start)\n .sort(sortNumbers);\n const sortedScriptingElapsedTimes = samples\n .map(({ scriptingStart, scriptingEnd }) => scriptingEnd - scriptingStart)\n .sort(sortNumbers);\n const sortedLayoutElapsedTimes = samples\n .map(\n ({ layoutStart, layoutEnd }) => (layoutEnd || 0) - (layoutStart || 0)\n )\n .sort(sortNumbers);\n\n onComplete({\n startTime: this._startTime,\n endTime,\n runTime,\n sampleCount: samples.length,\n samples: samples,\n max: sortedElapsedTimes[sortedElapsedTimes.length - 1],\n min: sortedElapsedTimes[0],\n median: getMedian(sortedElapsedTimes),\n mean: getMean(sortedElapsedTimes),\n stdDev: getStdDev(sortedElapsedTimes),\n meanLayout: getMean(sortedLayoutElapsedTimes),\n meanScripting: getMean(sortedScriptingElapsedTimes)\n });\n }\n}\n" }, { "path": "packages/benchmarks/src/app/Benchmark/math.js", "content": "// @flow\ntype ValuesType = Array;\n\nexport const getStdDev = (values: ValuesType): number => {\n const avg = getMean(values);\n\n const squareDiffs = values.map((value: number) => {\n const diff = value - avg;\n return diff * diff;\n });\n\n return Math.sqrt(getMean(squareDiffs));\n};\n\nexport const getMean = (values: ValuesType): number => {\n const sum = values.reduce((sum: number, value: number) => sum + value, 0);\n return sum / values.length;\n};\n\nexport const getMedian = (values: ValuesType): number => {\n if (values.length === 1) {\n return values[0];\n }\n\n const numbers = values.sort((a: number, b: number) => a - b);\n return (\n (numbers[(numbers.length - 1) >> 1] + numbers[numbers.length >> 1]) / 2\n );\n};\n" }, { "path": "packages/benchmarks/src/app/Benchmark/timing.js", "content": "// @flow\n\n// Returns a high resolution time (if possible) in milliseconds\nexport function now(): number {\n if (window && window.performance) {\n return window.performance.now();\n } else {\n return Date.now();\n }\n}\n" }, { "path": "packages/benchmarks/src/app/Benchmark/types.js", "content": "/**\n * @flow\n */\nexport type BenchResultsType = {\n startTime: number,\n endTime: number,\n runTime: number,\n sampleCount: number,\n samples: Array,\n max: number,\n min: number,\n median: number,\n mean: number,\n stdDev: number\n};\n\nexport type SampleTimingType = {\n scriptingStart: number,\n scriptingEnd?: number,\n layoutStart?: number,\n layoutEnd?: number\n};\n\nexport type FullSampleTimingType = {\n start: number,\n end: number,\n scriptingStart: number,\n scriptingEnd: number,\n layoutStart?: number,\n layoutEnd?: number\n};\n" }, { "path": "packages/benchmarks/src/app/Button.js", "content": "import { StyleSheet, TouchableHighlight, Text } from 'react-native';\nimport React, { Component } from 'react';\n\nexport default class Button extends Component<*> {\n static displayName = '@app/Button';\n\n render() {\n const {\n accessibilityLabel,\n color,\n disabled,\n onPress,\n style,\n textStyle,\n testID,\n title\n } = this.props;\n\n return (\n \n \n {title}\n \n \n );\n }\n}\n\nconst styles = StyleSheet.create({\n button: {\n backgroundColor: '#2196F3',\n borderRadius: 0,\n justifyContent: 'center'\n },\n text: {\n color: '#fff',\n fontSize: 20,\n fontWeight: '500',\n padding: 8,\n textAlign: 'center',\n textTransform: 'uppercase'\n },\n buttonDisabled: {\n backgroundColor: '#dfdfdf'\n },\n textDisabled: {\n color: '#a1a1a1'\n }\n});\n" }, { "path": "packages/benchmarks/src/app/Icons.js", "content": "import React, { Fragment } from 'react';\nimport {\n unstable_createElement as createElement,\n StyleSheet\n} from 'react-native';\n\nconst styles = StyleSheet.create({\n root: {\n display: 'inline-block',\n fill: 'currentcolor',\n height: '1.25em',\n maxWidth: '100%',\n position: 'relative',\n userSelect: 'none',\n textAlignVertical: 'text-bottom'\n }\n});\n\nconst createIcon = (children) => {\n const Icon = (props) =>\n createElement('svg', {\n children,\n style: [styles.root, props.style],\n width: 24,\n height: 24,\n viewBox: '0 0 24 24'\n });\n return Icon;\n};\n\nexport const IconClear = createIcon(\n \n \n \n \n);\n\nexport const IconEye = createIcon(\n \n \n \n \n \n);\n\nexport const IconCopy = createIcon(\n \n \n \n \n \n);\n" }, { "path": "packages/benchmarks/src/app/Layout.js", "content": "import { colors } from './theme';\nimport React, { Component } from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nexport default class Layout extends Component {\n state = {\n widescreen: false\n };\n\n render() {\n const { viewPanel, actionPanel, listPanel } = this.props;\n const { widescreen } = this.state;\n return (\n \n \n {viewPanel}\n \n \n {listPanel}\n \n {actionPanel}\n \n \n );\n }\n\n _handleLayout = ({ nativeEvent }) => {\n const { layout } = nativeEvent;\n const { width } = layout;\n if (width >= 740) {\n this.setState(() => ({ widescreen: true }));\n } else {\n this.setState(() => ({ widescreen: false }));\n }\n };\n}\n\nconst styles = StyleSheet.create({\n root: {\n height: '100%'\n },\n row: {\n flexDirection: 'row'\n },\n divider: {\n height: 10,\n backgroundColor: colors.fadedGray,\n borderBottomWidth: 1,\n borderTopWidth: 1,\n borderColor: colors.mediumGray\n },\n grow: {\n flex: 1\n },\n stackPanel: {\n height: '33.33%'\n },\n layer: {\n transform: [{ translateZ: '0' }]\n }\n});\n" }, { "path": "packages/benchmarks/src/app/ReportCard.js", "content": "/* @noflow */\n\nimport Text from './Text';\nimport { StyleSheet, View } from 'react-native';\nimport React, { Fragment } from 'react';\n\nconst fmt = (time: number) => {\n const i = Number(Math.round(time + 'e2') + 'e-2').toFixed(2);\n return 10 / i > 1 ? `0${i}` : i;\n};\n\nclass ReportCard extends React.PureComponent {\n render() {\n const {\n benchmarkName,\n libraryName,\n sampleCount,\n mean,\n meanLayout,\n meanScripting,\n stdDev,\n libraryVersion\n } = this.props;\n\n const sampleCountText = sampleCount != null ? `(${sampleCount})` : '';\n\n return (\n \n \n \n {`${libraryName}${libraryVersion ? '@' + libraryVersion : ''}`}\n \n \n {benchmarkName} {sampleCountText}\n \n \n \n {mean ? (\n \n \n {fmt(mean)} ±{fmt(stdDev)} ms\n \n \n (S/L) {fmt(meanScripting)}/{fmt(meanLayout)} ms\n \n \n ) : (\n In progress…\n )}\n \n \n );\n }\n}\n\nconst styles = StyleSheet.create({\n root: {\n flexDirection: 'row',\n alignItems: 'center',\n padding: 5,\n borderBottomWidth: 1,\n borderBottomColor: '#eee'\n },\n bold: {\n fontWeight: 'bold'\n },\n smallText: { fontSize: 12 },\n monoFont: {\n fontFamily: 'monospace'\n },\n centerText: {\n display: 'flex',\n alignItems: 'center'\n },\n left: {\n width: '50%'\n },\n right: {\n flex: 1,\n alignItems: 'flex-end'\n }\n});\n\nexport default ReportCard;\n" }, { "path": "packages/benchmarks/src/app/Text.js", "content": "import React from 'react';\nimport { StyleSheet, Text } from 'react-native';\nimport { bool } from 'prop-types';\nimport { colors } from './theme';\n\nclass AppText extends React.Component {\n static displayName = '@app/Text';\n\n static contextTypes = {\n isInAParentText: bool\n };\n\n render() {\n const { style, ...rest } = this.props;\n const { isInAParentText } = this.context;\n return (\n \n );\n }\n}\n\nconst styles = StyleSheet.create({\n baseText: {\n color: colors.textBlack,\n fontSize: '1rem',\n lineHeight: '1.3125em'\n }\n});\n\nexport default AppText;\n" }, { "path": "packages/benchmarks/src/app/theme.js", "content": "import { Dimensions, Platform } from 'react-native';\n\nconst baseFontSize = 14;\nconst baseUnit = 1.3125;\nconst canUseDOM = !!(\n typeof window !== 'undefined' &&\n window.document &&\n window.document.createElement\n);\n\nconst createPlatformLength = (multiplier) =>\n Platform.select({\n web: `${multiplier}rem`,\n default: multiplier * baseFontSize\n });\n\n/**\n * Exported variables\n */\n\nexport const borderRadii = {\n normal: Platform.select({ web: '0.35rem', default: 5 }),\n infinite: '9999px'\n};\n\nexport const breakpoints = {\n small: 360,\n medium: 600,\n large: 800,\n xLarge: 1100\n};\n\n/**\n * Color palette\n * DO NOT add new colors unless they are part of @design's color palette.\n * DO NOT use colors that are not specified here.\n * source: go/uicolors\n */\nexport const colors = {\n // Primary\n blue: '#1DA1F2',\n purple: '#794BC4',\n green: '#17BF63',\n yellow: '#FFAD1F',\n orange: '#F45D22',\n red: '#E0245E',\n // Text and interface grays\n textBlack: '#14171A',\n deepGray: '#657786',\n mediumGray: '#AAB8C2',\n lightGray: '#CCD6DD',\n fadedGray: '#E6ECF0',\n faintGray: '#F5F8FA',\n white: '#FFF',\n textBlue: '#1B95E0'\n};\n\nexport const fontFamilies = {\n normal: 'System',\n japan: Platform.select({\n web: 'Arial, \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", Osaka, \"メイリオ\", Meiryo, \"ＭＳ Ｐゴシック\", \"MS PGothic\", sans-serif',\n default: 'System'\n }),\n rtl: Platform.select({ web: 'Tahoma, Arial, sans-serif', default: 'System' })\n};\n\nexport const fontSizes = {\n // font scale\n small: createPlatformLength(0.85),\n normal: createPlatformLength(1),\n large: createPlatformLength(1.25),\n xLarge: createPlatformLength(1.5),\n jumbo: createPlatformLength(2)\n};\n\nexport const lineHeight = Platform.select({ web: `${baseUnit}` });\n\nexport const spaces = {\n // This set of space variables should be used for margin, padding\n micro: createPlatformLength(baseUnit * 0.125),\n xxSmall: createPlatformLength(baseUnit * 0.25),\n xSmall: createPlatformLength(baseUnit * 0.5),\n small: createPlatformLength(baseUnit * 0.75),\n medium: createPlatformLength(baseUnit),\n large: createPlatformLength(baseUnit * 1.5),\n xLarge: createPlatformLength(baseUnit * 2),\n xxLarge: createPlatformLength(baseUnit * 2.5),\n jumbo: createPlatformLength(baseUnit * 3)\n};\n\n// On web, change the root font-size at specific breakpoints to scale the UI\n// for larger viewports.\nif (Platform.OS === 'web' && canUseDOM) {\n const { medium, large } = breakpoints;\n const htmlElement = document.documentElement;\n const setFontSize = (width) => {\n const fontSize =\n width > medium ? (width > large ? '18px' : '17px') : '16px';\n if (htmlElement) {\n htmlElement.style.fontSize = fontSize;\n }\n };\n\n setFontSize(Dimensions.get('window').width);\n Dimensions.addEventListener('change', (dimensions) => {\n setFontSize(dimensions.window.width);\n });\n}\n" }, { "path": "packages/benchmarks/src/cases/SierpinskiTriangle.js", "content": "import { BenchmarkType } from '../app/Benchmark';\nimport React from 'react';\nimport {\n interpolatePurples,\n interpolateBuPu,\n interpolateRdPu\n} from 'd3-scale-chromatic';\n\nconst targetSize = 10;\n\nclass SierpinskiTriangle extends React.Component {\n static displayName = 'SierpinskiTriangle';\n\n static benchmarkType = BenchmarkType.UPDATE;\n\n static defaultProps = {\n depth: 0,\n renderCount: 0\n };\n\n render() {\n const { components, x, y, depth, renderCount } = this.props;\n let { s } = this.props;\n const { Dot } = components;\n\n if (Dot) {\n if (s <= targetSize) {\n let fn;\n switch (depth) {\n case 1:\n fn = interpolatePurples;\n break;\n case 2:\n fn = interpolateBuPu;\n break;\n case 3:\n default:\n fn = interpolateRdPu;\n }\n\n // introduce randomness to ensure that repeated runs don't produce the same colors\n const color = fn((renderCount * Math.random()) / 20);\n return (\n \n );\n }\n\n s /= 2;\n\n return (\n \n \n \n \n \n );\n } else {\n return (\n No implementation available\n );\n }\n }\n}\n\nexport default SierpinskiTriangle;\n" }, { "path": "packages/benchmarks/src/cases/Tree.js", "content": "import { BenchmarkType } from '../app/Benchmark';\nimport React, { Component } from 'react';\n\nclass Tree extends Component {\n static displayName = 'Tree';\n\n static benchmarkType = BenchmarkType.MOUNT;\n\n render() {\n const { breadth, components, depth, id, wrap } = this.props;\n const { Box } = components;\n\n let result = (\n \n {depth === 0 && }\n {depth !== 0 &&\n Array.from({ length: breadth }).map((el, i) => (\n \n ))}\n \n );\n for (let i = 0; i < wrap; i++) {\n result = {result};\n }\n return result;\n }\n}\n\nexport default Tree;\n" }, { "path": "packages/benchmarks/src/impl.js", "content": "/* @noflow */\n\nimport { type Component } from 'react';\nimport packageJson from '../package.json';\n\nconst context = require.context('./implementations/', true, /index\\.js$/);\nconst { dependencies } = packageJson;\n\ntype ComponentsType = {\n Box: Component,\n Dot: Component,\n Provider: Component,\n View: Component\n};\n\ntype ImplementationType = {\n components: ComponentsType,\n name: string,\n version: string\n};\n\nconst toImplementations = (context: Object): Array =>\n context.keys().map((path) => {\n const components = context(path).default;\n const name = path.split('/')[1];\n const version = dependencies[name] || '';\n return { components, name, version };\n });\n\nconst toObject = (impls: Array): Object =>\n impls.reduce((acc, impl) => {\n acc[impl.name] = impl;\n return acc;\n }, {});\n\nconst map = toObject(toImplementations(context));\n\nexport default map;\n" }, { "path": "packages/benchmarks/src/implementations/css-modules/Box.js", "content": "import classnames from 'classnames';\nimport React from 'react';\nimport View from './View';\nimport styles from './box-styles.css';\n\nconst Box = ({\n color,\n fixed = false,\n layout = 'column',\n outer = false,\n ...other\n}) => (\n \n);\n\nexport default Box;\n" }, { "path": "packages/benchmarks/src/implementations/css-modules/Dot.js", "content": "import React from 'react';\nimport styles from './dot-styles.css';\n\nconst Dot = ({ size, x, y, children, color }) => (\n \n {children}\n \n);\n\nexport default Dot;\n" }, { "path": "packages/benchmarks/src/implementations/css-modules/Provider.js", "content": "import View from './View';\nexport default View;\n" }, { "path": "packages/benchmarks/src/implementations/css-modules/View.js", "content": "import classnames from 'classnames';\nimport React from 'react';\nimport styles from './view-styles.css';\n\nclass View extends React.Component {\n render() {\n const props = this.props;\n return (\n
\n );\n }\n}\n\nexport default View;\n" }, { "path": "packages/benchmarks/src/implementations/css-modules/box-styles.css", "content": ".outer {\n align-self: flex-start;\n padding: 4px;\n}\n\n.row {\n flex-direction: row;\n}\n\n.color0 {\n background-color: #14171A;\n}\n\n.color1 {\n background-color: #AAB8C2;\n}\n\n.color2 {\n background-color: #E6ECF0;\n}\n\n.color3 {\n background-color: #FFAD1F;\n}\n\n.color4 {\n background-color: #F45D22;\n}\n\n.color5 {\n background-color: #E0245E;\n}\n\n.fixed {\n width: 6px;\n height: 6px;\n}\n" }, { "path": "packages/benchmarks/src/implementations/css-modules/dot-styles.css", "content": ".root {\n position: absolute;\n cursor: pointer;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n border-top-width: 0;\n transform: translate(50%, 50%);\n}\n" }, { "path": "packages/benchmarks/src/implementations/css-modules/index.js", "content": "import Box from './Box';\nimport Dot from './Dot';\nimport Provider from './Provider';\nimport View from './View';\n\nexport default {\n Box,\n Dot,\n Provider,\n View\n};\n" }, { "path": "packages/benchmarks/src/implementations/css-modules/view-styles.css", "content": ".initial {\n align-items: stretch;\n background-color: transparent;\n border-width: 0;\n border-style: solid;\n box-sizing: border-box;\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-shrink: 0;\n list-style: none;\n margin: 0;\n min-height: 0;\n min-width: 0;\n padding: 0;\n position: relative;\n z-index: 0;\n}\n" }, { "path": "packages/benchmarks/src/implementations/inline-styles/Box.js", "content": "import React from 'react';\nimport View from './View';\n\nconst Box = ({\n color,\n fixed = false,\n layout = 'column',\n outer = false,\n ...other\n}) => (\n \n);\n\nconst styles = {\n outer: {\n alignSelf: 'flex-start',\n padding: 4\n },\n row: {\n flexDirection: 'row'\n },\n color0: {\n backgroundColor: '#14171A'\n },\n color1: {\n backgroundColor: '#AAB8C2'\n },\n color2: {\n backgroundColor: '#E6ECF0'\n },\n color3: {\n backgroundColor: '#FFAD1F'\n },\n color4: {\n backgroundColor: '#F45D22'\n },\n color5: {\n backgroundColor: '#E0245E'\n },\n fixed: {\n width: 6,\n height: 6\n }\n};\n\nexport default Box;\n" }, { "path": "packages/benchmarks/src/implementations/inline-styles/Dot.js", "content": "import React from 'react';\n\nconst Dot = ({ size, x, y, children, color }) => (\n \n {children}\n
\n);\n\nconst styles = {\n root: {\n position: 'absolute',\n cursor: 'pointer',\n width: 0,\n height: 0,\n borderColor: 'transparent',\n borderStyle: 'solid',\n borderTopWidth: 0,\n transform: 'translate(50%, 50%)'\n }\n};\n\nexport default Dot;\n" }, { "path": "packages/benchmarks/src/implementations/inline-styles/Provider.js", "content": "import View from './View';\nexport default View;\n" }, { "path": "packages/benchmarks/src/implementations/inline-styles/View.js", "content": "import React from 'react';\n\nconst compose = (s1, s2) => {\n if (s1 && s2) {\n return { ...s1, ...s2 };\n } else {\n return s1 || s2;\n }\n};\n\nclass View extends React.Component {\n render() {\n const { style, ...other } = this.props;\n return
;\n }\n}\n\nconst viewStyle = {\n alignItems: 'stretch',\n backgroundColor: 'transparent',\n border: '0 solid black',\n boxSizing: 'border-box',\n display: 'flex',\n flexBasis: 'auto',\n flexDirection: 'column',\n flexShrink: 0,\n listStyle: 'none',\n margin: 0,\n minHeight: 0,\n minWidth: 0,\n padding: 0,\n position: 'relative',\n zIndex: 0\n};\n\nexport default View;\n" }, { "path": "packages/benchmarks/src/implementations/inline-styles/index.js", "content": "import Box from './Box';\nimport Dot from './Dot';\nimport Provider from './Provider';\nimport View from './View';\n\nexport default {\n Box,\n Dot,\n Provider,\n View\n};\n" }, { "path": "packages/benchmarks/src/implementations/react-native-web/Box.js", "content": "import React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nconst Box = ({\n color,\n fixed = false,\n layout = 'column',\n outer = false,\n ...other\n}) => (\n \n);\n\nconst styles = StyleSheet.create({\n outer: {\n alignSelf: 'flex-start',\n padding: 4\n },\n row: {\n flexDirection: 'row'\n },\n color0: {\n backgroundColor: '#14171A'\n },\n color1: {\n backgroundColor: '#AAB8C2'\n },\n color2: {\n backgroundColor: '#E6ECF0'\n },\n color3: {\n backgroundColor: '#FFAD1F'\n },\n color4: {\n backgroundColor: '#F45D22'\n },\n color5: {\n backgroundColor: '#E0245E'\n },\n fixed: {\n width: 6,\n height: 6\n }\n});\n\nexport default Box;\n" }, { "path": "packages/benchmarks/src/implementations/react-native-web/Dot.js", "content": "import {\n unstable_createElement as createElement,\n StyleSheet\n} from 'react-native';\n\nconst Dot = ({ size, x, y, children, color }) =>\n createElement('div', {\n children,\n style: [\n styles.root,\n {\n borderBottomColor: color,\n borderRightWidth: size / 2,\n borderBottomWidth: size / 2,\n borderLeftWidth: size / 2,\n marginLeft: x,\n marginTop: y\n }\n ]\n });\n\nconst styles = StyleSheet.create({\n root: {\n position: 'absolute',\n cursor: 'pointer',\n width: 0,\n height: 0,\n borderColor: 'transparent',\n borderStyle: 'solid',\n borderTopWidth: 0,\n transform: [{ translateX: '50%' }, { translateY: '50%' }]\n }\n});\n\nexport default Dot;\n" }, { "path": "packages/benchmarks/src/implementations/react-native-web/Provider.js", "content": "import { View } from 'react-native';\nexport default View;\n" }, { "path": "packages/benchmarks/src/implementations/react-native-web/index.js", "content": "import Box from './Box';\nimport Dot from './Dot';\nimport Provider from './Provider';\nimport { View } from 'react-native';\n\nexport default {\n Box,\n Dot,\n Provider,\n View\n};\n" }, { "path": "packages/benchmarks/src/implementations/styleq/Box.js", "content": "import React from 'react';\nimport View from './View';\n\nconst Box = ({\n color,\n fixed = false,\n layout = 'column',\n outer = false,\n ...other\n}) => (\n \n);\n\nconst styles = {\n outer: {\n $$css: true,\n alignSelf: 'r-k200y',\n padding: 'r-tuq35u'\n },\n row: {\n $$css: true,\n flexDirection: 'r-18u37iz'\n },\n color0: {\n $$css: true,\n backgroundColor: 'r-1810x6o'\n },\n color1: {\n $$css: true,\n backgroundColor: 'r-dkge59'\n },\n color2: {\n $$css: true,\n backgroundColor: 'r-18z3xeu'\n },\n color3: {\n $$css: true,\n backgroundColor: 'r-1vkxrha'\n },\n color4: {\n $$css: true,\n backgroundColor: 'r-18z3xeu'\n },\n color5: {\n $$css: true,\n backgroundColor: 'r-e84r5y'\n },\n fixed: {\n $$css: true,\n width: 'r-8hc5te',\n height: 'r-1xbve24'\n }\n};\n\nexport default Box;\n" }, { "path": "packages/benchmarks/src/implementations/styleq/Dot.js", "content": "import React from 'react';\nimport { styleq } from 'styleq';\n\nconst Dot = ({ size, x, y, children, color }) => {\n const [className, inlineStyle] = styleq([\n styles.root,\n {\n borderBottomColor: color,\n borderRightWidth: size / 2,\n borderBottomWidth: size / 2,\n borderLeftWidth: size / 2,\n marginLeft: x,\n marginTop: y\n }\n ]);\n\n return
;\n};\n\nconst styles = {\n root: {\n $$css: true,\n 'css-1co75s2': 'css-1co75s2'\n }\n};\n\nexport default Dot;\n" }, { "path": "packages/benchmarks/src/implementations/styleq/Provider.js", "content": "import View from './View';\nexport default View;\n" }, { "path": "packages/benchmarks/src/implementations/styleq/View.js", "content": "import React from 'react';\nimport { styleq } from 'styleq';\n\nconst q = styleq.factory({ disableCache: false });\n\nfunction View(props) {\n const [className, inlineStyle] = q([styles.root, props.style]);\n return
;\n}\n\nconst styles = {\n root: {\n $$css: true,\n 'css-wkmxpp': 'css-wkmxpp'\n }\n};\n\nexport default View;\n" }, { "path": "packages/benchmarks/src/implementations/styleq/index.js", "content": "import Box from './Box';\nimport Dot from './Dot';\nimport Provider from './Provider';\nimport View from './View';\n\nexport default {\n Box,\n Dot,\n Provider,\n View\n};\n" }, { "path": "packages/benchmarks/src/implementations/stylesheet/Box.js", "content": "import React from 'react';\nimport View from './View';\nimport { StyleSheet } from 'react-native-web';\n\nconst Box = ({\n color,\n fixed = false,\n layout = 'column',\n outer = false,\n ...other\n}) => (\n \n);\n\nconst styles = StyleSheet.create({\n outer: {\n alignSelf: 'flex-start',\n padding: 4\n },\n row: {\n flexDirection: 'row'\n },\n color0: {\n backgroundColor: '#14171A'\n },\n color1: {\n backgroundColor: '#AAB8C2'\n },\n color2: {\n backgroundColor: '#E6ECF0'\n },\n color3: {\n backgroundColor: '#FFAD1F'\n },\n color4: {\n backgroundColor: '#F45D22'\n },\n color5: {\n backgroundColor: '#E0245E'\n },\n fixed: {\n width: 6,\n height: 6\n }\n});\n\nexport default Box;\n" }, { "path": "packages/benchmarks/src/implementations/stylesheet/Dot.js", "content": "import React from 'react';\nimport { StyleSheet } from 'react-native-web';\n\nconst Dot = ({ size, x, y, children, color }) => {\n const [className, inlineStyle] = StyleSheet([\n styles.root$raw,\n {\n borderBottomColor: color,\n borderRightWidth: size / 2,\n borderBottomWidth: size / 2,\n borderLeftWidth: size / 2,\n marginLeft: x,\n marginTop: y\n }\n ]);\n\n return
;\n};\n\nconst styles = StyleSheet.create({\n root$raw: {\n position: 'absolute',\n cursor: 'pointer',\n width: 0,\n height: 0,\n borderColor: 'transparent',\n borderStyle: 'solid',\n borderTopWidth: 0,\n transform: 'translateX(50%) translateY(50%)'\n }\n});\n\nexport default Dot;\n" }, { "path": "packages/benchmarks/src/implementations/stylesheet/Provider.js", "content": "import View from './View';\nexport default View;\n" }, { "path": "packages/benchmarks/src/implementations/stylesheet/View.js", "content": "import React from 'react';\nimport { StyleSheet } from 'react-native-web';\n\nfunction View(props) {\n const [className, inlineStyle] = StyleSheet([styles.root$raw, props.style]);\n return
;\n}\n\nconst styles = StyleSheet.create({\n root$raw: {\n alignItems: 'stretch',\n backgroundColor: 'transparent',\n border: '0 solid black',\n boxSizing: 'border-box',\n display: 'flex',\n flexBasis: 'auto',\n flexDirection: 'column',\n flexShrink: 0,\n listStyle: 'none',\n margin: 0,\n minHeight: 0,\n minWidth: 0,\n padding: 0,\n position: 'relative',\n zIndex: 0\n }\n});\n\nexport default View;\n" }, { "path": "packages/benchmarks/src/implementations/stylesheet/index.js", "content": "import Box from './Box';\nimport Dot from './Dot';\nimport Provider from './Provider';\nimport View from './View';\n\nexport default {\n Box,\n Dot,\n Provider,\n View\n};\n" }, { "path": "packages/benchmarks/src/index.js", "content": "import App from './app/App';\nimport impl from './impl';\nimport Tree from './cases/Tree';\nimport SierpinskiTriangle from './cases/SierpinskiTriangle';\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\n\nconst implementations = impl;\nconst packageNames = Object.keys(implementations);\n\nconst createTestBlock = (fn) => {\n return packageNames.reduce((testSetups, packageName) => {\n const { name, components, version } = implementations[packageName];\n const {\n Component,\n getComponentProps,\n sampleCount,\n Provider,\n benchmarkType\n } = fn(components);\n\n testSetups[packageName] = {\n Component,\n getComponentProps,\n sampleCount,\n Provider,\n benchmarkType,\n version,\n name\n };\n return testSetups;\n }, {});\n};\n\nconst tests = {\n 'Mount deep tree': createTestBlock((components) => ({\n benchmarkType: 'mount',\n Component: Tree,\n getComponentProps: () => ({\n breadth: 2,\n components,\n depth: 7,\n id: 0,\n wrap: 1\n }),\n Provider: components.Provider,\n sampleCount: 50\n })),\n 'Mount wide tree': createTestBlock((components) => ({\n benchmarkType: 'mount',\n Component: Tree,\n getComponentProps: () => ({\n breadth: 6,\n components,\n depth: 3,\n id: 0,\n wrap: 2\n }),\n Provider: components.Provider,\n sampleCount: 50\n })),\n 'Update dynamic styles': createTestBlock((components) => ({\n benchmarkType: 'update',\n Component: SierpinskiTriangle,\n getComponentProps: ({ cycle }) => {\n return { components, s: 200, renderCount: cycle, x: 0, y: 0 };\n },\n Provider: components.Provider,\n sampleCount: 100\n }))\n};\n\nconst root = document.querySelector('.root');\nconst element = ;\n\ncreateRoot(root).render(element);\n" }, { "path": "packages/benchmarks/webpack.config.js", "content": "const BundleAnalyzerPlugin =\n require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\nconst path = require('path');\n\nconst appDirectory = path.resolve(__dirname);\n\nmodule.exports = {\n mode: 'production',\n context: __dirname,\n entry: './src/index',\n output: {\n path: path.resolve(appDirectory, 'dist'),\n filename: 'bundle.js'\n },\n optimization: {\n minimize: process.env.NODE_ENV === 'production'\n },\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n 'style-loader',\n {\n loader: 'css-loader',\n options: {\n modules: {\n localIdentName: '[hash:base64:8]'\n }\n }\n }\n ]\n },\n {\n test: /\\.js$/,\n include: [path.resolve(appDirectory, 'src')],\n use: {\n loader: 'babel-loader',\n options: {\n cacheDirectory: false,\n extends: path.resolve(appDirectory, '../../configs/babel.config')\n }\n }\n }\n ]\n },\n plugins: [\n new BundleAnalyzerPlugin({\n analyzerMode: 'static',\n openAnalyzer: false\n })\n ],\n resolve: {\n alias: {\n 'react-native': 'react-native-web'\n }\n }\n};\n" }, { "path": "packages/dom-event-testing-library/LICENSE", "content": "MIT License\n\nCopyright (c) Nicolas Gallagher.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "packages/dom-event-testing-library/README.md", "content": "# `dom-event-testing-library`\n\nA library for unit testing high-level interactions via simple pointer events, e.g., `pointerdown`, that produce realistic and complete DOM event sequences.\n\nThere are number of challenges involved in unit testing modules that work with DOM events.\n\n1. Testing environments with and without support for the `PointerEvent` API.\n2. Testing various user interaction modes including mouse, touch, and pen use.\n3. Testing against the event sequences browsers actually produce (e.g., emulated touch and mouse events.)\n4. Testing against the event properties DOM events include (i.e., more complete mock data)\n5. Testing against \"virtual\" events produced by tools like screen-readers.\n\nWriting unit tests to cover all these scenarios is tedious and error prone. This event testing library is designed to avoid these issues by allowing developers to more easily dispatch events in unit tests, and to more reliably test interactions while using an API based on `PointerEvent`.\n\n## Example\n\n```js\nimport {\n describeWithPointerEvent,\n testWithPointerType,\n clearPointers,\n createEventTarget,\n setPointerEvent,\n} from 'dom-event-testing-library';\n\ndescribeWithPointerEvent('useTap', hasPointerEvent => {\n beforeEach(() => {\n // basic PointerEvent mock\n setPointerEvent(hasPointerEvent);\n });\n\n afterEach(() => {\n // clear active pointers between test runs\n clearPointers();\n });\n\n // test all the pointer types supported by the environment\n testWithPointerType('pointer down', pointerType => {\n const ref = createRef(null);\n const onTapStart = jest.fn();\n\n // component to test\n function Component() {\n useTapEvents(ref, { onTapStart });\n return
\n }\n\n // render component\n act(() => {\n render();\n });\n\n // create an event target\n const target = createEventTarget(ref.current);\n\n // dispatch high-level pointer event\n act(() => {\n target.pointerdown({ pointerType });\n });\n\n // assertion\n expect(onTapStart).toBeCalled();\n });\n});\n```\n\nThe example above tests the interaction in multiple scenarios. In each case, a realistic DOM event sequence–with complete mock events–is produced. When running in a mock environment without the `PointerEvent` API, the test runs for both `mouse` and `touch` pointer types. When `touch` is the pointer type it produces emulated mouse events. When running in a mock environment with the `PointerEvent` API, the test runs for `mouse`, `touch`, and `pen` pointer types.\n\nIt's important to cover all these scenarios because it's very easy to introduce bugs – e.g., double calling of callbacks – if not accounting for emulated mouse events, differences in target capturing between `touch` and `mouse` pointers, and the different semantics of `button` across event APIs.\n\nDefault values are provided for the expected native events properties. They can also be customized as needed in a test.\n\n```js\ntarget.pointerdown({\n button: 0,\n buttons: 1,\n pageX: 10,\n pageY: 10,\n pointerType,\n // NOTE: use x,y instead of clientX,clientY\n x: 10,\n y: 10\n});\n```\n\nTests that dispatch multiple pointer events will dispatch multi-touch native events on the target.\n\n```js\n// first pointer is active\ntarget.pointerdown({pointerId: 1, pointerType});\n// second pointer is active\ntarget.pointerdown({pointerId: 2, pointerType});\n```\n\n## API\n\n### Target and events\n\nTo create a new event target pass the DOM node to `createEventTarget(node)`. This target can then be used to dispatch event sequences and customize the event payload. The following are currently supported:\n\n* `blur`\n* `click`\n* `contextmenu`\n* `focus` (includes the complete sequence of focus-related events)\n* `keydown`\n* `keyup`\n* `pointercancel`\n* `pointerdown`\n* `pointerhover` (moves when pointer is not down)\n* `pointermove` (moves when pointer is down)\n* `pointerover`\n* `pointerout`\n* `scroll`\n* `select`\n* `selectionchange`\n* `tap` (equivalent to `pointerdown` followed by `pointerup`)\n* `virtualclick`\n\nThe target also has `node` property equal to the node that was used to create the target, and a `setBoundClientRect({x,y,width,height})` method that can be used to mock the return value of `getBoundingClientRect`.\n\n### Jest helpers\n\n#### `describeWithPointerEvent`\n\nThis is just like `describe` but it will run the entire test suite twice, once in an environment with `PointerEvent` mocked and once without.\n\n```js\ndescribeWithPointerEvent('useTap', hasPointerEvent => {\n // test suite\n});\n```\n\n#### `testWithPointerType`\n\nThe is just like `test` but it will run the test for every pointer type supported by the environment. When `PointerEvent` is mocked, the pointer types will be `mouse`, `touch`, and `pen`; otherwise the pointer types will be `mouse` and `touch`.\n\n```js\ntestWithPointerType('pointer down', pointerType => {\n // test unit\n});\n```\n\n### jsdom environment helpers\n\n#### platform\n\nInteractions that account for Windows / macOS differences can change the platform by calling `platform.set(value)`, where `value` can be either `'mac'` or `'windows'`. To retreive the current platform call `platform.get()`, and the clear it call `platform.clear()`.\n\n#### hasPointerEvent / setPointerEvent\n\nInteractions implemented using `PointerEvent` can create a basic mock for jsdom by calling `setPointerEvent(true)` (disable with `setPointerEvent(false)`), and check whether `PointerEvent` is available by calling `hasPointerEvent()`.\n" }, { "path": "packages/dom-event-testing-library/index.js", "content": "export * from './src/index';\n" }, { "path": "packages/dom-event-testing-library/package.json", "content": "{\n \"private\": true,\n \"name\": \"dom-event-testing-library\",\n \"version\": \"0.0.0\",\n \"main\": \"index.js\",\n \"description\": \"Browser event sequences for unit tests\",\n \"author\": \"Nicolas Gallagher\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/necolas/react-native-web/tree/master/packages/dom-event-testing-library\"\n}\n" }, { "path": "packages/dom-event-testing-library/src/__tests__/__snapshots__/index-test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`describeWithPointerEvent: MouseEvent/TouchEvent provides boolean to tests 1`] = `false`;\n\nexports[`describeWithPointerEvent: MouseEvent/TouchEvent testWithPointerType: mouse 1`] = `\"mouse\"`;\n\nexports[`describeWithPointerEvent: MouseEvent/TouchEvent testWithPointerType: touch 1`] = `\"touch\"`;\n\nexports[`describeWithPointerEvent: PointerEvent provides boolean to tests 1`] = `true`;\n\nexports[`describeWithPointerEvent: PointerEvent testWithPointerType: mouse 1`] = `\"mouse\"`;\n\nexports[`describeWithPointerEvent: PointerEvent testWithPointerType: pen 1`] = `\"pen\"`;\n\nexports[`describeWithPointerEvent: PointerEvent testWithPointerType: touch 1`] = `\"touch\"`;\n" }, { "path": "packages/dom-event-testing-library/src/__tests__/index-test.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nimport { defaultBrowserChromeSize } from '../constants';\n\nimport {\n clearPointers,\n createEventTarget,\n describeWithPointerEvent,\n testWithPointerType\n} from '../index';\n\n/**\n * Unit test helpers\n */\ndescribeWithPointerEvent('describeWithPointerEvent', (pointerEvent) => {\n test('provides boolean to tests', () => {\n expect(pointerEvent).toMatchSnapshot();\n });\n\n testWithPointerType('testWithPointerType', (pointerType) => {\n expect(pointerType).toMatchSnapshot();\n });\n});\n\n/**\n * createEventTarget\n */\ndescribe('createEventTarget', () => {\n let node;\n beforeEach(() => {\n node = document.createElement('div');\n });\n\n afterEach(() => {\n node = null;\n clearPointers();\n });\n\n test('returns expected API', () => {\n const target = createEventTarget(node);\n expect(target.node).toEqual(node);\n expect(Object.keys(target)).toMatchInlineSnapshot(`\n [\n \"node\",\n \"blur\",\n \"click\",\n \"contextmenu\",\n \"error\",\n \"focus\",\n \"keydown\",\n \"keyup\",\n \"load\",\n \"pointercancel\",\n \"pointerdown\",\n \"pointerhover\",\n \"pointermove\",\n \"pointerover\",\n \"pointerout\",\n \"pointerup\",\n \"scroll\",\n \"select\",\n \"selectionchange\",\n \"tap\",\n \"virtualclick\",\n \"setBoundingClientRect\",\n ]\n `);\n });\n\n /**\n * Simple events\n */\n\n describe('.blur()', () => {\n test('default', () => {\n const target = createEventTarget(node);\n node.addEventListener('blur', (e) => {\n expect(e.relatedTarget).toBeNull();\n });\n target.blur();\n });\n\n test('custom payload', () => {\n const target = createEventTarget(node);\n const relatedTarget = document.createElement('div');\n node.addEventListener('blur', (e) => {\n expect(e.relatedTarget).toBe(relatedTarget);\n });\n target.blur({ relatedTarget });\n });\n });\n\n describe('.click()', () => {\n test('default', () => {\n const target = createEventTarget(node);\n node.addEventListener('click', (e) => {\n expect(e.altKey).toEqual(false);\n expect(e.button).toEqual(0);\n expect(e.buttons).toEqual(0);\n expect(e.clientX).toEqual(0);\n expect(e.clientY).toEqual(0);\n expect(e.ctrlKey).toEqual(false);\n expect(e.detail).toEqual(1);\n expect(typeof e.getModifierState).toEqual('function');\n expect(e.metaKey).toEqual(false);\n expect(e.movementX).toEqual(0);\n expect(e.movementY).toEqual(0);\n expect(e.offsetX).toEqual(0);\n expect(e.offsetY).toEqual(0);\n expect(e.pageX).toEqual(0);\n expect(e.pageY).toEqual(0);\n expect(typeof e.preventDefault).toEqual('function');\n expect(e.screenX).toEqual(0);\n expect(e.screenY).toEqual(defaultBrowserChromeSize);\n expect(e.shiftKey).toEqual(false);\n expect(typeof e.timeStamp).toEqual('number');\n });\n target.click();\n });\n\n test('custom payload', () => {\n const target = createEventTarget(node);\n node.addEventListener('click', (e) => {\n expect(e.altKey).toEqual(true);\n expect(e.button).toEqual(1);\n expect(e.buttons).toEqual(4);\n expect(e.clientX).toEqual(10);\n expect(e.clientY).toEqual(20);\n expect(e.ctrlKey).toEqual(true);\n expect(e.metaKey).toEqual(true);\n expect(e.movementX).toEqual(1);\n expect(e.movementY).toEqual(2);\n expect(e.offsetX).toEqual(5);\n expect(e.offsetY).toEqual(5);\n expect(e.pageX).toEqual(50);\n expect(e.pageY).toEqual(50);\n expect(e.screenX).toEqual(10);\n expect(e.screenY).toEqual(20 + defaultBrowserChromeSize);\n expect(e.shiftKey).toEqual(true);\n });\n target.click({\n altKey: true,\n button: 1,\n buttons: 4,\n x: 10,\n y: 20,\n ctrlKey: true,\n metaKey: true,\n movementX: 1,\n movementY: 2,\n offsetX: 5,\n offsetY: 5,\n pageX: 50,\n pageY: 50,\n shiftKey: true\n });\n });\n });\n\n describe('.focus()', () => {\n test('default', () => {\n const target = createEventTarget(node);\n node.addEventListener('focus', (e) => {\n expect(e.relatedTarget).toBeNull();\n });\n target.focus();\n });\n\n test('custom payload', () => {\n const target = createEventTarget(node);\n const relatedTarget = document.createElement('div');\n node.addEventListener('focus', (e) => {\n expect(e.relatedTarget).toBe(relatedTarget);\n });\n target.focus({ relatedTarget });\n });\n });\n\n describe('.keydown()', () => {\n test('default', () => {\n const target = createEventTarget(node);\n node.addEventListener('keydown', (e) => {\n expect(e.altKey).toEqual(false);\n expect(e.ctrlKey).toEqual(false);\n expect(typeof e.getModifierState).toEqual('function');\n expect(e.key).toEqual('');\n expect(e.metaKey).toEqual(false);\n expect(typeof e.preventDefault).toEqual('function');\n expect(e.shiftKey).toEqual(false);\n expect(typeof e.timeStamp).toEqual('number');\n });\n target.keydown();\n });\n\n test('custom payload', () => {\n const target = createEventTarget(node);\n node.addEventListener('keydown', (e) => {\n expect(e.altKey).toEqual(true);\n expect(e.ctrlKey).toEqual(true);\n expect(e.isComposing).toEqual(true);\n expect(e.key).toEqual('Enter');\n expect(e.metaKey).toEqual(true);\n expect(e.shiftKey).toEqual(true);\n });\n target.keydown({\n altKey: true,\n ctrlKey: true,\n isComposing: true,\n key: 'Enter',\n metaKey: true,\n shiftKey: true\n });\n });\n });\n\n describe('.keyup()', () => {\n test('default', () => {\n const target = createEventTarget(node);\n node.addEventListener('keyup', (e) => {\n expect(e.altKey).toEqual(false);\n expect(e.ctrlKey).toEqual(false);\n expect(typeof e.getModifierState).toEqual('function');\n expect(e.key).toEqual('');\n expect(e.metaKey).toEqual(false);\n expect(typeof e.preventDefault).toEqual('function');\n expect(e.shiftKey).toEqual(false);\n expect(typeof e.timeStamp).toEqual('number');\n });\n target.keydown();\n });\n\n test('custom payload', () => {\n const target = createEventTarget(node);\n node.addEventListener('keyup', (e) => {\n expect(e.altKey).toEqual(true);\n expect(e.ctrlKey).toEqual(true);\n expect(e.isComposing).toEqual(true);\n expect(e.key).toEqual('Enter');\n expect(e.metaKey).toEqual(true);\n expect(e.shiftKey).toEqual(true);\n });\n target.keyup({\n altKey: true,\n ctrlKey: true,\n isComposing: true,\n key: 'Enter',\n metaKey: true,\n shiftKey: true\n });\n });\n });\n\n describe('.scroll()', () => {\n test('default', () => {\n const target = createEventTarget(node);\n node.addEventListener('scroll', (e) => {\n expect(e.type).toEqual('scroll');\n });\n target.scroll();\n });\n });\n\n describe('.virtualclick()', () => {\n test('default', () => {\n const target = createEventTarget(node);\n node.addEventListener('click', (e) => {\n expect(e.altKey).toEqual(false);\n expect(e.button).toEqual(0);\n expect(e.buttons).toEqual(0);\n expect(e.clientX).toEqual(0);\n expect(e.clientY).toEqual(0);\n expect(e.ctrlKey).toEqual(false);\n expect(e.detail).toEqual(0);\n expect(typeof e.getModifierState).toEqual('function');\n expect(e.metaKey).toEqual(false);\n expect(e.movementX).toEqual(0);\n expect(e.movementY).toEqual(0);\n expect(e.offsetX).toEqual(0);\n expect(e.offsetY).toEqual(0);\n expect(e.pageX).toEqual(0);\n expect(e.pageY).toEqual(0);\n expect(typeof e.preventDefault).toEqual('function');\n expect(e.screenX).toEqual(0);\n expect(e.screenY).toEqual(0);\n expect(e.shiftKey).toEqual(false);\n expect(typeof e.timeStamp).toEqual('number');\n });\n target.virtualclick();\n });\n\n test('custom payload', () => {\n const target = createEventTarget(node);\n node.addEventListener('click', (e) => {\n // expect most of the custom payload to be ignored\n expect(e.altKey).toEqual(true);\n expect(e.button).toEqual(1);\n expect(e.buttons).toEqual(0);\n expect(e.clientX).toEqual(0);\n expect(e.clientY).toEqual(0);\n expect(e.ctrlKey).toEqual(true);\n expect(e.detail).toEqual(0);\n expect(e.metaKey).toEqual(true);\n expect(e.pageX).toEqual(0);\n expect(e.pageY).toEqual(0);\n expect(e.screenX).toEqual(0);\n expect(e.screenY).toEqual(0);\n expect(e.shiftKey).toEqual(true);\n });\n target.virtualclick({\n altKey: true,\n button: 1,\n buttons: 4,\n x: 10,\n y: 20,\n ctrlKey: true,\n metaKey: true,\n pageX: 50,\n pageY: 50,\n shiftKey: true\n });\n });\n });\n\n /**\n * TODO: Complex event sequences\n */\n\n /**\n * Other APIs\n */\n\n test('.setBoundingClientRect()', () => {\n const target = createEventTarget(node);\n expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`\n {\n \"bottom\": 0,\n \"height\": 0,\n \"left\": 0,\n \"right\": 0,\n \"top\": 0,\n \"width\": 0,\n \"x\": 0,\n \"y\": 0,\n }\n `);\n target.setBoundingClientRect({ x: 10, y: 20, width: 100, height: 200 });\n expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`\n {\n \"bottom\": 220,\n \"height\": 200,\n \"left\": 10,\n \"right\": 110,\n \"top\": 20,\n \"width\": 100,\n \"x\": 10,\n \"y\": 20,\n }\n `);\n });\n});\n" }, { "path": "packages/dom-event-testing-library/src/constants.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nexport const defaultPointerId = 1;\nexport const defaultPointerSize = 23;\nexport const defaultBrowserChromeSize = 50;\n\n/**\n * Button property\n * This property only guarantees to indicate which buttons are pressed during events caused by pressing or\n * releasing one or multiple buttons. As such, it is not reliable for events such as 'mouseenter', 'mouseleave',\n * 'mouseover', 'mouseout' or 'mousemove'. Furthermore, the semantics differ for PointerEvent, where the value\n * for 'pointermove' will always be -1.\n */\n\nexport const buttonType = {\n // no change since last event\n none: -1,\n // left-mouse\n // touch contact\n // pen contact\n primary: 0,\n // right-mouse\n // pen barrel button\n secondary: 2,\n // middle mouse\n auxiliary: 1,\n // back mouse\n back: 3,\n // forward mouse\n forward: 4,\n // pen eraser\n eraser: 5\n};\n\n/**\n * Buttons bitmask\n */\n\nexport const buttonsType = {\n none: 0,\n // left-mouse\n // touch contact\n // pen contact\n primary: 1,\n // right-mouse\n // pen barrel button\n secondary: 2,\n // middle mouse\n auxiliary: 4,\n // back mouse\n back: 8,\n // forward mouse\n forward: 16,\n // pen eraser\n eraser: 32\n};\n" }, { "path": "packages/dom-event-testing-library/src/createEvent.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nconst defaultConfig = {\n constructorType: 'Event',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n};\n\nconst eventConfigs = {\n blur: {\n constructorType: 'FocusEvent',\n defaultInit: { bubbles: false, cancelable: false, composed: true }\n },\n change: {\n constructorType: 'Event',\n defaultInit: { bubbles: true, cancelable: false }\n },\n click: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n compositionend: {\n constructorType: 'CompositionEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n compositionstart: {\n constructorType: 'CompositionEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n compositionupdate: {\n constructorType: 'CompositionEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n contextmenu: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n dblclick: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n drag: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n dragend: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: false, composed: true }\n },\n dragenter: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n dragexit: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: false, composed: true }\n },\n dragleave: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: false, composed: true }\n },\n dragover: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n dragstart: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n drop: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n error: {\n constructorType: 'Event',\n defaultInit: { bubbles: false, cancelable: false }\n },\n focus: {\n constructorType: 'FocusEvent',\n defaultInit: { bubbles: false, cancelable: false, composed: true }\n },\n focusin: {\n constructorType: 'FocusEvent',\n defaultInit: { bubbles: true, cancelable: false, composed: true }\n },\n focusout: {\n constructorType: 'FocusEvent',\n defaultInit: { bubbles: true, cancelable: false, composed: true }\n },\n input: {\n constructorType: 'InputEvent',\n defaultInit: { bubbles: true, cancelable: false, composed: true }\n },\n invalid: {\n constructorType: 'Event',\n defaultInit: { bubbles: false, cancelable: true }\n },\n keydown: {\n constructorType: 'KeyboardEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n keyup: {\n constructorType: 'KeyboardEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n load: {\n constructorType: 'UIEvent',\n defaultInit: { bubbles: false, cancelable: false }\n },\n mousedown: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n mouseenter: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: false, cancelable: false, composed: true }\n },\n mouseleave: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: false, cancelable: false, composed: true }\n },\n mousemove: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n mouseout: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n mouseover: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n mouseup: {\n constructorType: 'MouseEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n scroll: {\n constructorType: 'UIEvent',\n defaultInit: { bubbles: false, cancelable: false }\n },\n select: {\n constructorType: 'Event',\n defaultInit: { bubbles: true, cancelable: false }\n },\n submit: {\n constructorType: 'Event',\n defaultInit: { bubbles: true, cancelable: true }\n },\n touchcancel: {\n constructorType: 'TouchEvent',\n defaultInit: { bubbles: true, cancelable: false, composed: true }\n },\n touchend: {\n constructorType: 'TouchEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n touchmove: {\n constructorType: 'TouchEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n touchstart: {\n constructorType: 'TouchEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n // 'PointerEvent' constructor is not supported in jsdom\n gotpointercapture: {\n constructorType: 'Event',\n defaultInit: { bubbles: false, cancelable: false, composed: true }\n },\n lostpointercapture: {\n constructorType: 'Event',\n defaultInit: { bubbles: false, cancelable: false, composed: true }\n },\n pointercancel: {\n constructorType: 'Event',\n defaultInit: { bubbles: true, cancelable: false, composed: true }\n },\n pointerdown: {\n constructorType: 'Event',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n pointerenter: {\n constructorType: 'Event',\n defaultInit: { bubbles: false, cancelable: false }\n },\n pointerleave: {\n constructorType: 'Event',\n defaultInit: { bubbles: false, cancelable: false }\n },\n pointermove: {\n constructorType: 'Event',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n pointerout: {\n constructorType: 'Event',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n pointerover: {\n constructorType: 'Event',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n pointerup: {\n constructorType: 'Event',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n },\n wheel: {\n constructorType: 'WheelEvent',\n defaultInit: { bubbles: true, cancelable: true, composed: true }\n }\n};\n\nfunction getEventConfig(type) {\n return eventConfigs[type] || defaultConfig;\n}\n\nexport default function createEvent(type, init) {\n const config = getEventConfig(type);\n const { constructorType, defaultInit } = config;\n const eventInit = { ...defaultInit, ...init };\n\n const event = document.createEvent(constructorType);\n const { bubbles, cancelable, ...data } = eventInit;\n event.initEvent(type, bubbles, cancelable);\n\n if (data != null) {\n Object.keys(data).forEach((key) => {\n const value = data[key];\n // Ensure that mocks for 'preventDefault' can be called without interferring with\n // the native behavior of 'preventDefault' (inc for passive events)\n if (key === 'preventDefault' && typeof value === 'function') {\n const originalPreventDefault = event.preventDefault.bind(event);\n const preventDefault = function () {\n // call the original function\n originalPreventDefault();\n // call the mock function\n value();\n };\n Object.defineProperty(event, key, {\n configurable: true,\n value: preventDefault\n });\n } else if (value != null) {\n Object.defineProperty(event, key, { configurable: true, value });\n }\n });\n }\n return event;\n}\n" }, { "path": "packages/dom-event-testing-library/src/domEnvironment.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Change environment support for PointerEvent.\n */\n\nconst emptyFunction = function () {};\n\nexport function hasPointerEvent() {\n return global != null && global.PointerEvent != null;\n}\n\nexport function setPointerEvent(bool) {\n const pointerCaptureFn = (name) => (id) => {\n if (typeof id !== 'number') {\n if (process.env.NODE_ENV !== 'production') {\n console.error('A pointerId must be passed to \"%s\"', name);\n }\n }\n };\n global.PointerEvent = bool ? emptyFunction : undefined;\n global.HTMLElement.prototype.setPointerCapture = bool\n ? pointerCaptureFn('setPointerCapture')\n : undefined;\n global.HTMLElement.prototype.releasePointerCapture = bool\n ? pointerCaptureFn('releasePointerCapture')\n : undefined;\n}\n\n/**\n * Change environment host platform.\n */\n\nconst platformGetter = jest.spyOn(global.navigator, 'platform', 'get');\n\nexport const platform = {\n clear() {\n platformGetter.mockClear();\n },\n get() {\n return global.navigator.platform === 'MacIntel' ? 'mac' : 'windows';\n },\n set(name) {\n switch (name) {\n case 'mac': {\n platformGetter.mockReturnValue('MacIntel');\n break;\n }\n case 'windows': {\n platformGetter.mockReturnValue('Win32');\n break;\n }\n default: {\n break;\n }\n }\n }\n};\n" }, { "path": "packages/dom-event-testing-library/src/domEventSequences.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nimport {\n buttonType,\n buttonsType,\n defaultPointerId,\n defaultPointerSize,\n defaultBrowserChromeSize\n} from './constants';\nimport * as domEvents from './domEvents';\nimport { hasPointerEvent, platform } from './domEnvironment';\nimport * as touchStore from './touchStore';\n\n/**\n * Converts a PointerEvent payload to a Touch\n */\nfunction createTouch(target, payload) {\n const {\n height = defaultPointerSize,\n pageX,\n pageY,\n pointerId,\n pressure = 1,\n twist = 0,\n width = defaultPointerSize,\n x = 0,\n y = 0\n } = payload;\n\n return {\n clientX: x,\n clientY: y,\n force: pressure,\n identifier: pointerId,\n pageX: pageX || x,\n pageY: pageY || y,\n radiusX: width / 2,\n radiusY: height / 2,\n rotationAngle: twist,\n target,\n screenX: x,\n screenY: y + defaultBrowserChromeSize\n };\n}\n\n/**\n * Converts a PointerEvent to a TouchEvent\n */\nfunction createTouchEventPayload(target, touch, payload) {\n const {\n altKey = false,\n ctrlKey = false,\n metaKey = false,\n preventDefault,\n shiftKey = false,\n timeStamp\n } = payload;\n\n return {\n altKey,\n changedTouches: [touch],\n ctrlKey,\n metaKey,\n preventDefault,\n shiftKey,\n targetTouches: touchStore.getTargetTouches(target),\n timeStamp,\n touches: touchStore.getTouches()\n };\n}\n\nfunction getPointerType(payload) {\n let pointerType = 'mouse';\n if (payload != null && payload.pointerType != null) {\n pointerType = payload.pointerType;\n }\n return pointerType;\n}\n\n/**\n * Pointer events sequences.\n *\n * Creates representative browser event sequences for high-level gestures based on pointers.\n * This allows unit tests to be written in terms of simple pointer interactions while testing\n * that the responses to those interactions account for the complex sequence of events that\n * browsers produce as a result.\n *\n * Every time a new pointer touches the surface a 'touchstart' event should be dispatched.\n * - 'changedTouches' contains the new touch.\n * - 'targetTouches' contains all the active pointers for the target.\n * - 'touches' contains all the active pointers on the surface.\n *\n * Every time an existing pointer moves a 'touchmove' event should be dispatched.\n * - 'changedTouches' contains the updated touch.\n *\n * Every time an existing pointer leaves the surface a 'touchend' event should be dispatched.\n * - 'changedTouches' contains the released touch.\n * - 'targetTouches' contains any of the remaining active pointers for the target.\n */\n\nexport function contextmenu(target, defaultPayload = {}) {\n const dispatch = (arg) => target.dispatchEvent(arg);\n const pointerType = getPointerType(defaultPayload);\n\n const {\n ctrlKey,\n // eslint-disable-next-line\n pointerType: _,\n ...restPayload\n } = defaultPayload;\n\n const payload = {\n pointerId: defaultPointerId,\n ...restPayload,\n button: buttonType.primary,\n buttons: buttonsType.primary,\n pointerType\n };\n\n const preventDefault = payload.preventDefault;\n\n if (pointerType === 'touch') {\n if (hasPointerEvent()) {\n dispatch(domEvents.pointerdown(payload));\n }\n const touch = createTouch(target, payload);\n touchStore.addTouch(touch);\n const touchEventPayload = createTouchEventPayload(target, touch, payload);\n dispatch(domEvents.touchstart(touchEventPayload));\n dispatch(\n domEvents.mousemove({\n ...payload,\n button: buttonType.primary,\n buttons: buttonsType.none\n })\n );\n dispatch(\n domEvents.contextmenu({\n ...payload,\n button: buttonType.primary,\n buttons: buttonsType.none,\n preventDefault\n })\n );\n touchStore.removeTouch(touch);\n } else if (pointerType === 'mouse') {\n if (ctrlKey === true) {\n const { button, buttons } = payload;\n if (hasPointerEvent()) {\n dispatch(domEvents.pointerdown({ ...payload, ctrlKey }));\n }\n dispatch(domEvents.mousedown({ ...payload, ctrlKey }));\n if (platform.get() === 'mac') {\n dispatch(\n domEvents.contextmenu({ button, buttons, ctrlKey, preventDefault })\n );\n }\n } else {\n const button = buttonType.secondary;\n const buttons = buttonsType.secondary;\n if (hasPointerEvent()) {\n dispatch(domEvents.pointerdown({ ...payload, button, buttons }));\n }\n dispatch(domEvents.mousedown({ ...payload, button, buttons }));\n dispatch(\n domEvents.contextmenu({ ...payload, button, buttons, preventDefault })\n );\n }\n }\n}\n\nexport function focus(target, defaultPayload = {}) {\n const dispatch = (arg) => target.dispatchEvent(arg);\n const { relatedTarget, ...payload } = defaultPayload;\n const blurPayload = { ...payload, relatedTarget: target };\n const focusPayload = { ...payload, relatedTarget };\n if (relatedTarget) {\n relatedTarget.dispatchEvent(domEvents.focusout(blurPayload));\n }\n dispatch(domEvents.focusin(focusPayload));\n if (relatedTarget) {\n relatedTarget.dispatchEvent(domEvents.blur(blurPayload));\n }\n dispatch(domEvents.focus(focusPayload));\n}\n\nexport function pointercancel(target, defaultPayload) {\n const dispatchEvent = (arg) => target.dispatchEvent(arg);\n const pointerType = getPointerType(defaultPayload);\n\n const payload = {\n pointerId: defaultPointerId,\n pointerType,\n ...defaultPayload\n };\n\n if (hasPointerEvent()) {\n dispatchEvent(domEvents.pointercancel(payload));\n }\n if (pointerType === 'mouse') {\n dispatchEvent(domEvents.dragstart(payload));\n } else {\n const touch = createTouch(target, payload);\n touchStore.removeTouch(touch);\n const touchEventPayload = createTouchEventPayload(target, touch, payload);\n dispatchEvent(domEvents.touchcancel(touchEventPayload));\n }\n}\n\nexport function pointerdown(target, defaultPayload) {\n const dispatch = (arg) => target.dispatchEvent(arg);\n const pointerType = getPointerType(defaultPayload);\n\n const payload = {\n button: buttonType.primary,\n buttons: buttonsType.primary,\n pointerId: defaultPointerId,\n pointerType,\n ...defaultPayload\n };\n\n if (pointerType === 'mouse') {\n if (hasPointerEvent()) {\n dispatch(domEvents.pointerover(payload));\n dispatch(domEvents.pointerenter(payload));\n }\n dispatch(domEvents.mouseover(payload));\n dispatch(domEvents.mouseenter(payload));\n if (hasPointerEvent()) {\n dispatch(domEvents.pointerdown(payload));\n }\n dispatch(domEvents.mousedown(payload));\n focus(target);\n } else {\n if (hasPointerEvent()) {\n dispatch(domEvents.pointerover(payload));\n dispatch(domEvents.pointerenter(payload));\n dispatch(domEvents.pointerdown(payload));\n }\n const touch = createTouch(target, payload);\n touchStore.addTouch(touch);\n const touchEventPayload = createTouchEventPayload(target, touch, payload);\n dispatch(domEvents.touchstart(touchEventPayload));\n if (hasPointerEvent()) {\n dispatch(domEvents.gotpointercapture(payload));\n }\n }\n}\n\nexport function pointerover(target, defaultPayload) {\n const dispatch = (arg) => target.dispatchEvent(arg);\n\n const payload = {\n pointerId: defaultPointerId,\n ...defaultPayload\n };\n\n if (hasPointerEvent()) {\n // Pointer must move before it can dispatch \"over\"\n dispatch(domEvents.pointermove());\n dispatch(domEvents.pointerover(payload));\n dispatch(domEvents.pointerenter(payload));\n }\n dispatch(domEvents.mousemove());\n dispatch(domEvents.mouseover(payload));\n dispatch(domEvents.mouseenter(payload));\n}\n\nexport function pointerout(target, defaultPayload) {\n const dispatch = (arg) => target.dispatchEvent(arg);\n\n const payload = {\n pointerId: defaultPointerId,\n ...defaultPayload\n };\n\n const { relatedTarget } = payload;\n\n if (hasPointerEvent()) {\n dispatch(domEvents.pointerout(payload));\n // Only call the leave event if exiting the subtree\n if (!target.contains(relatedTarget)) {\n dispatch(domEvents.pointerleave(payload));\n }\n }\n dispatch(domEvents.mouseout(payload));\n if (!target.contains(relatedTarget)) {\n // Only call the leave event if exiting the subtree\n dispatch(domEvents.mouseleave(payload));\n }\n}\n\n// pointer is not down while moving\nexport function pointerhover(target, defaultPayload) {\n const dispatch = (arg) => target.dispatchEvent(arg);\n\n const payload = {\n pointerId: defaultPointerId,\n ...defaultPayload\n };\n\n if (hasPointerEvent()) {\n dispatch(domEvents.pointermove(payload));\n }\n dispatch(domEvents.mousemove(payload));\n}\n\n// pointer is down while moving\nexport function pointermove(target, defaultPayload) {\n const dispatch = (arg) => target.dispatchEvent(arg);\n const pointerType = getPointerType(defaultPayload);\n\n const payload = {\n button: buttonType.primary,\n buttons: buttonsType.primary,\n pointerId: defaultPointerId,\n pointerType,\n ...defaultPayload\n };\n\n if (pointerType === 'mouse') {\n if (hasPointerEvent()) {\n dispatch(\n domEvents.pointermove({ pressure: 0.5, button: -1, ...payload })\n );\n }\n dispatch(domEvents.mousemove(payload));\n } else {\n if (hasPointerEvent()) {\n dispatch(\n domEvents.pointermove({\n pressure: 1,\n button: -1,\n ...payload\n })\n );\n }\n const touch = createTouch(target, payload);\n touchStore.updateTouch(touch);\n const touchEventPayload = createTouchEventPayload(target, touch, payload);\n dispatch(domEvents.touchmove(touchEventPayload));\n }\n}\n\nexport function pointerup(target, defaultPayload) {\n const dispatch = (arg) => target.dispatchEvent(arg);\n const pointerType = getPointerType(defaultPayload);\n\n const payload = {\n pointerId: defaultPointerId,\n pointerType,\n ...defaultPayload\n };\n\n const isPrimaryButton = payload.button === buttonType.primary;\n const isContextMenuAction =\n platform.get() === 'mac' && payload.ctrlKey === true;\n\n if (pointerType === 'mouse') {\n if (hasPointerEvent()) {\n dispatch(domEvents.pointerup(payload));\n }\n dispatch(domEvents.mouseup(payload));\n if (isPrimaryButton && !isContextMenuAction) {\n dispatch(domEvents.click(payload));\n }\n } else {\n if (hasPointerEvent()) {\n dispatch(domEvents.pointerup(payload));\n dispatch(domEvents.lostpointercapture(payload));\n dispatch(domEvents.pointerout(payload));\n dispatch(domEvents.pointerleave(payload));\n }\n const touch = createTouch(target, payload);\n const isGesture = touchStore.removeTouch(touch);\n const touchEventPayload = createTouchEventPayload(target, touch, payload);\n dispatch(domEvents.touchend(touchEventPayload));\n // emulated mouse events don't occur for multi-touch or after 'touchmove'\n if (!isGesture) {\n dispatch(domEvents.mouseover(payload));\n dispatch(domEvents.mousemove(payload));\n dispatch(domEvents.mousedown(payload));\n }\n focus(target);\n if (!isGesture) {\n dispatch(domEvents.mouseup(payload));\n }\n if (isPrimaryButton && !isContextMenuAction) {\n dispatch(domEvents.click(payload));\n }\n }\n}\n\n/**\n * This function should be called after each test to ensure the touchStore is cleared\n * in cases where the mock pointers weren't released before the test completed\n * (e.g., a test failed or ran a partial gesture).\n */\nexport function clearPointers() {\n touchStore.clear();\n}\n" }, { "path": "packages/dom-event-testing-library/src/domEvents.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nimport createEvent from './createEvent';\nimport {\n buttonType,\n buttonsType,\n defaultPointerSize,\n defaultBrowserChromeSize\n} from './constants';\n\n/**\n * Native event object mocks for higher-level events.\n *\n * 1. Each event type defines the exact object that it accepts. This ensures\n * that no arbitrary properties can be assigned to events, and the properties\n * that don't exist on specific event types (e.g., 'pointerType') are not added\n * to the respective native event.\n *\n * 2. Properties that cannot be relied on due to inconsistent browser support (e.g., 'x' and 'y') are not\n * added to the native event. Others that shouldn't be arbitrarily customized (e.g., 'screenX')\n * are automatically inferred from associated values.\n *\n * 3. PointerEvent and TouchEvent fields are normalized (e.g., 'rotationAngle' -> 'twist')\n */\n\nfunction emptyFunction() {}\n\nfunction createGetModifierState(keyArg, data) {\n if (keyArg === 'Alt') {\n return data.altKey || false;\n }\n if (keyArg === 'Control') {\n return data.ctrlKey || false;\n }\n if (keyArg === 'Meta') {\n return data.metaKey || false;\n }\n if (keyArg === 'Shift') {\n return data.shiftKey || false;\n }\n}\n\n/**\n * KeyboardEvent\n */\n\nfunction createKeyboardEvent(\n type,\n {\n altKey = false,\n ctrlKey = false,\n isComposing = false,\n key = '',\n metaKey = false,\n preventDefault = emptyFunction,\n shiftKey = false\n } = {}\n) {\n const modifierState = { altKey, ctrlKey, metaKey, shiftKey };\n\n const eventPayload = {\n altKey,\n ctrlKey,\n getModifierState(keyArg) {\n return createGetModifierState(keyArg, modifierState);\n },\n isComposing,\n key,\n metaKey,\n preventDefault,\n shiftKey\n };\n\n if (isComposing) {\n eventPayload.keyCode = 229;\n }\n\n return createEvent(type, eventPayload);\n}\n\n/**\n * MouseEvent\n */\n\nfunction createMouseEvent(\n type,\n {\n altKey = false,\n button = buttonType.none,\n buttons = buttonsType.none,\n ctrlKey = false,\n detail = 1,\n metaKey = false,\n movementX = 0,\n movementY = 0,\n offsetX = 0,\n offsetY = 0,\n pageX,\n pageY,\n preventDefault = emptyFunction,\n relatedTarget,\n screenX,\n screenY,\n shiftKey = false,\n timeStamp,\n x = 0,\n y = 0\n } = {}\n) {\n const modifierState = { altKey, ctrlKey, metaKey, shiftKey };\n\n return createEvent(type, {\n altKey,\n button,\n buttons,\n clientX: x,\n clientY: y,\n ctrlKey,\n detail,\n getModifierState(keyArg) {\n return createGetModifierState(keyArg, modifierState);\n },\n metaKey,\n movementX,\n movementY,\n offsetX,\n offsetY,\n pageX: pageX || x,\n pageY: pageY || y,\n preventDefault,\n relatedTarget,\n screenX: screenX === 0 ? screenX : x,\n screenY: screenY === 0 ? screenY : y + defaultBrowserChromeSize,\n shiftKey,\n timeStamp\n });\n}\n\n/**\n * PointerEvent\n */\n\nfunction createPointerEvent(\n type,\n {\n altKey = false,\n button = buttonType.none,\n buttons = buttonsType.none,\n ctrlKey = false,\n detail = 1,\n height,\n metaKey = false,\n movementX = 0,\n movementY = 0,\n offsetX = 0,\n offsetY = 0,\n pageX,\n pageY,\n pointerId,\n pressure = 0,\n preventDefault = emptyFunction,\n pointerType = 'mouse',\n relatedTarget,\n screenX,\n screenY,\n shiftKey = false,\n tangentialPressure = 0,\n tiltX = 0,\n tiltY = 0,\n timeStamp,\n twist = 0,\n width,\n x = 0,\n y = 0\n } = {}\n) {\n const modifierState = { altKey, ctrlKey, metaKey, shiftKey };\n const isMouse = pointerType === 'mouse';\n\n return createEvent(type, {\n altKey,\n button,\n buttons,\n clientX: x,\n clientY: y,\n ctrlKey,\n detail,\n getModifierState(keyArg) {\n return createGetModifierState(keyArg, modifierState);\n },\n height: isMouse ? 1 : height != null ? height : defaultPointerSize,\n metaKey,\n movementX,\n movementY,\n offsetX,\n offsetY,\n pageX: pageX || x,\n pageY: pageY || y,\n pointerId,\n pointerType,\n pressure,\n preventDefault,\n relatedTarget,\n releasePointerCapture: emptyFunction,\n screenX: screenX === 0 ? screenX : x,\n screenY: screenY === 0 ? screenY : y + defaultBrowserChromeSize,\n setPointerCapture: emptyFunction,\n shiftKey,\n tangentialPressure,\n tiltX,\n tiltY,\n timeStamp,\n twist,\n width: isMouse ? 1 : width != null ? width : defaultPointerSize\n });\n}\n\n/**\n * TouchEvent\n */\n\nfunction createTouchEvent(type, payload) {\n return createEvent(type, {\n ...payload,\n detail: 0,\n sourceCapabilities: {\n firesTouchEvents: true\n }\n });\n}\n\n/**\n * DOM events\n */\n\nexport function blur({ relatedTarget } = {}) {\n return createEvent('blur', { relatedTarget });\n}\n\nexport function click(payload) {\n return createMouseEvent('click', {\n button: buttonType.primary,\n ...payload\n });\n}\n\nexport function contextmenu(payload) {\n return createMouseEvent('contextmenu', {\n ...payload,\n detail: 0\n });\n}\n\nexport function dragstart(payload) {\n return createMouseEvent('dragstart', {\n ...payload,\n detail: 0\n });\n}\n\nexport function error() {\n return createEvent('error');\n}\n\nexport function focus({ relatedTarget } = {}) {\n return createEvent('focus', { relatedTarget });\n}\n\nexport function focusin({ relatedTarget } = {}) {\n return createEvent('focusin', { relatedTarget });\n}\n\nexport function focusout({ relatedTarget } = {}) {\n return createEvent('focusout', { relatedTarget });\n}\n\nexport function gotpointercapture(payload) {\n return createPointerEvent('gotpointercapture', payload);\n}\n\nexport function keydown(payload) {\n return createKeyboardEvent('keydown', payload);\n}\n\nexport function keyup(payload) {\n return createKeyboardEvent('keyup', payload);\n}\n\nexport function load(payload) {\n return createEvent('load', payload);\n}\n\nexport function lostpointercapture(payload) {\n return createPointerEvent('lostpointercapture', payload);\n}\n\nexport function mousedown(payload) {\n // The value of 'button' and 'buttons' for 'mousedown' must not be none.\n const button =\n payload != null && payload.button !== buttonType.none\n ? payload.button\n : buttonType.primary;\n const buttons =\n payload != null && payload.buttons !== buttonsType.none\n ? payload.buttons\n : buttonsType.primary;\n\n return createMouseEvent('mousedown', {\n ...payload,\n button,\n buttons\n });\n}\n\nexport function mouseenter(payload) {\n return createMouseEvent('mouseenter', payload);\n}\n\nexport function mouseleave(payload) {\n return createMouseEvent('mouseleave', payload);\n}\n\nexport function mousemove(payload) {\n return createMouseEvent('mousemove', {\n // 0 is also the uninitialized value (i.e., don't assume it means primary button down)\n button: 0,\n buttons: 0,\n ...payload\n });\n}\n\nexport function mouseout(payload) {\n return createMouseEvent('mouseout', payload);\n}\n\nexport function mouseover(payload) {\n return createMouseEvent('mouseover', payload);\n}\n\nexport function mouseup(payload) {\n return createMouseEvent('mouseup', {\n button: buttonType.primary,\n ...payload,\n buttons: buttonsType.none\n });\n}\nexport function pointercancel(payload) {\n return createPointerEvent('pointercancel', {\n ...payload,\n buttons: 0,\n detail: 0,\n height: 1,\n pageX: 0,\n pageY: 0,\n pressure: 0,\n screenX: 0,\n screenY: 0,\n width: 1,\n x: 0,\n y: 0\n });\n}\n\nexport function pointerdown(payload) {\n const isTouch = payload != null && payload.pointerType === 'touch';\n return createPointerEvent('pointerdown', {\n button: buttonType.primary,\n buttons: buttonsType.primary,\n pressure: isTouch ? 1 : 0.5,\n ...payload\n });\n}\n\nexport function pointerenter(payload) {\n return createPointerEvent('pointerenter', payload);\n}\n\nexport function pointerleave(payload) {\n return createPointerEvent('pointerleave', payload);\n}\n\nexport function pointermove(payload) {\n return createPointerEvent('pointermove', {\n ...payload,\n button: buttonType.none,\n buttons: buttonsType.none\n });\n}\n\nexport function pointerout(payload) {\n return createPointerEvent('pointerout', payload);\n}\n\nexport function pointerover(payload) {\n return createPointerEvent('pointerover', payload);\n}\n\nexport function pointerup(payload) {\n return createPointerEvent('pointerup', {\n button: buttonType.primary,\n ...payload,\n buttons: buttonsType.none,\n pressure: 0\n });\n}\n\nexport function scroll() {\n return createEvent('scroll', { bubbles: false });\n}\n\nexport function select() {\n return createEvent('select');\n}\n\nexport function selectionchange() {\n return createEvent('selectionchange');\n}\n\nexport function touchcancel(payload) {\n return createTouchEvent('touchcancel', payload);\n}\n\nexport function touchend(payload) {\n return createTouchEvent('touchend', payload);\n}\n\nexport function touchmove(payload) {\n return createTouchEvent('touchmove', payload);\n}\n\nexport function touchstart(payload) {\n return createTouchEvent('touchstart', payload);\n}\n\nexport function virtualclick(payload) {\n return createMouseEvent('click', {\n button: 0,\n ...payload,\n buttons: 0,\n detail: 0,\n height: 1,\n pageX: 0,\n pageY: 0,\n pressure: 0,\n screenX: 0,\n screenY: 0,\n width: 1,\n x: 0,\n y: 0\n });\n}\n" }, { "path": "packages/dom-event-testing-library/src/index.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nimport { buttonType, buttonsType } from './constants';\nimport * as domEvents from './domEvents';\nimport * as domEventSequences from './domEventSequences';\nimport { hasPointerEvent, setPointerEvent, platform } from './domEnvironment';\nimport { describeWithPointerEvent, testWithPointerType } from './testHelpers';\n\nconst createEventTarget = (node) => ({\n node,\n /**\n * Simple events abstraction.\n */\n blur(payload) {\n node.dispatchEvent(domEvents.blur(payload));\n },\n click(payload) {\n node.dispatchEvent(domEvents.click(payload));\n },\n contextmenu(payload) {\n domEventSequences.contextmenu(node, payload);\n },\n error() {\n node.dispatchEvent(domEvents.error());\n },\n focus(payload) {\n domEventSequences.focus(node, payload);\n },\n keydown(payload) {\n node.dispatchEvent(domEvents.keydown(payload));\n },\n keyup(payload) {\n node.dispatchEvent(domEvents.keyup(payload));\n },\n load(payload) {\n node.dispatchEvent(domEvents.load(payload));\n },\n /**\n * PointerEvent abstraction.\n * Dispatches the expected sequence of PointerEvents, MouseEvents, and\n * TouchEvents for a given environment.\n */\n // node no longer receives events for the pointer\n pointercancel(payload) {\n domEventSequences.pointercancel(node, payload);\n },\n // node dispatches down events\n pointerdown(payload) {\n domEventSequences.pointerdown(node, payload);\n },\n // node dispatches move events (pointer is not down)\n pointerhover(payload) {\n domEventSequences.pointerhover(node, payload);\n },\n // node dispatches move events (pointer is down)\n pointermove(payload) {\n domEventSequences.pointermove(node, payload);\n },\n // node dispatches enter & over events\n pointerover(payload) {\n domEventSequences.pointerover(node, payload);\n },\n // node dispatches exit & leave events\n pointerout(payload) {\n domEventSequences.pointerout(node, payload);\n },\n // node dispatches up events\n pointerup(payload) {\n domEventSequences.pointerup(node, payload);\n },\n scroll(payload) {\n node.dispatchEvent(domEvents.scroll(payload));\n },\n select(payload) {\n node.dispatchEvent(domEvents.select(payload));\n },\n // selectionchange is only dispatched on 'document'\n selectionchange(payload) {\n document.dispatchEvent(domEvents.selectionchange(payload));\n },\n /**\n * Gesture abstractions.\n * Helpers for event sequences expected in a gesture.\n * target.tap({ pointerType: 'touch' })\n */\n tap(payload) {\n domEventSequences.pointerdown(payload);\n domEventSequences.pointerup(payload);\n },\n virtualclick(payload) {\n node.dispatchEvent(domEvents.virtualclick(payload));\n },\n /**\n * Utilities\n */\n setBoundingClientRect({ x, y, width, height }) {\n node.getBoundingClientRect = function () {\n return {\n width,\n height,\n left: x,\n right: x + width,\n top: y,\n bottom: y + height,\n x,\n y\n };\n };\n }\n});\n\nconst clearPointers = domEventSequences.clearPointers;\n\nexport {\n buttonType,\n buttonsType,\n clearPointers,\n createEventTarget,\n describeWithPointerEvent,\n platform,\n hasPointerEvent,\n setPointerEvent,\n testWithPointerType\n};\n" }, { "path": "packages/dom-event-testing-library/src/testHelpers.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nimport { hasPointerEvent, setPointerEvent } from './domEnvironment';\n\nexport function describeWithPointerEvent(message, describeFn) {\n const pointerEvent = 'PointerEvent';\n const fallback = 'MouseEvent/TouchEvent';\n describe.each`\n value | name\n ${true} | ${pointerEvent}\n ${false} | ${fallback}\n `(`${message}: $name`, (entry) => {\n const hasPointerEvents = entry.value;\n setPointerEvent(hasPointerEvents);\n describeFn(hasPointerEvents);\n });\n}\n\nexport function testWithPointerType(message, testFn) {\n const table = hasPointerEvent()\n ? ['mouse', 'touch', 'pen']\n : ['mouse', 'touch'];\n test.each(table)(`${message}: %s`, (pointerType) => {\n testFn(pointerType);\n });\n}\n" }, { "path": "packages/dom-event-testing-library/src/touchStore.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\n/**\n * Touch events state machine.\n *\n * Keeps track of the active pointers and allows them to be reflected in touch events.\n */\n\nlet isGesture = false;\nconst activeTouches = new Map();\n\nexport function addTouch(touch) {\n const identifier = touch.identifier;\n const target = touch.target;\n if (!activeTouches.has(target)) {\n activeTouches.set(target, new Map());\n }\n if (activeTouches.get(target).get(identifier)) {\n // Do not allow existing touches to be overwritten\n console.error(\n 'Touch with identifier %s already exists. Did not record touch start.',\n identifier\n );\n } else {\n activeTouches.get(target).set(identifier, touch);\n }\n isGesture = activeTouches.size > 1;\n}\n\nexport function updateTouch(touch) {\n const identifier = touch.identifier;\n const target = touch.target;\n if (activeTouches.get(target) != null) {\n activeTouches.get(target).set(identifier, touch);\n isGesture = true;\n } else {\n console.error(\n 'Touch with identifier %s does not exist. Cannot record touch move without a touch start.',\n identifier\n );\n }\n}\n\nexport function removeTouch(touch) {\n const identifier = touch.identifier;\n const target = touch.target;\n if (activeTouches.get(target) != null) {\n if (activeTouches.get(target).has(identifier)) {\n activeTouches.get(target).delete(identifier);\n } else {\n console.error(\n 'Touch with identifier %s does not exist. Cannot record touch end without a touch start.',\n identifier\n );\n }\n }\n return isGesture;\n}\n\nexport function getTouches() {\n const touches = [];\n activeTouches.forEach((_, target) => {\n touches.push(...getTargetTouches(target));\n });\n return touches;\n}\n\nexport function getTargetTouches(target) {\n if (activeTouches.get(target) != null) {\n return Array.from(activeTouches.get(target).values());\n }\n return [];\n}\n\nexport function clear() {\n activeTouches.clear();\n}\n" }, { "path": "packages/react-native-web/LICENSE", "content": "MIT License\n\nCopyright (c) Nicolas Gallagher.\nCopyright (c) Meta Platforms, Inc. and affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "packages/react-native-web/README.md", "content": "# React Native for Web\n\n[![npm version][package-badge]][package-url] [![Build Status][ci-badge]][ci-url] [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)\n\n\"React Native for Web\" makes it possible to run [React Native][react-native-url] components and APIs on the web using React DOM.\n\n## Documentation\n\nThe [documentation site](https://necolas.github.io/react-native-web/) ([source](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web-docs)) covers installation, guides, and APIs.\n\n## Example\n\nThe [examples app](https://p9t5cp.sse.codesandbox.io/) ([source](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web-examples)) demonstrates many available features. Fork the [codesandbox](https://codesandbox.io/s/github/necolas/react-native-web/tree/master/packages/react-native-web-examples) to make changes and see the results.\n\nYou'll notice that there is no reference to `react-dom` in components. The `App` component that is shown below is defined using the APIs and Components of React Native, but it can also be rendered on the web using React Native for Web.\n\n```js\n// Example component\nimport React from 'react';\nimport { AppRegistry, StyleSheet, Text, View } from 'react-native';\n\nclass App extends React.Component {\n render() {\n return (\n \n Hello, world!\n \n );\n }\n}\n\nconst styles = StyleSheet.create({\n box: { padding: 10 },\n text: { fontWeight: 'bold' }\n});\n\nAppRegistry.registerComponent('App', () => App);\nAppRegistry.runApplication('App', { rootTag: document.getElementById('react-root') });\n```\n\n## Contributing\n\nDevelopment happens in the open on GitHub and we are grateful for contributions including bugfixes, improvements, and ideas. Read below to learn how you can take part in improving React Native for Web.\n\n### Code of conduct\n\nThis project expects all participants to adhere to Meta's OSS [Code of Conduct][code-of-conduct]. Please read the full text so that you can understand what actions will and will not be tolerated.\n\n### Contributing guide\n\nRead the [contributing guide][contributing-url] to learn about the development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native for Web.\n\n### Good first issues\n\nTo help you get you familiar with the contribution process, there is a list of [good first issues][good-first-issue-url] that contain bugs which have a relatively limited scope. This is a great place to get started.\n\n## License\n\nReact Native for Web is [MIT licensed](./LICENSE). By contributing to React Native for Web, you agree that your contributions will be licensed under its MIT license.\n\n[package-badge]: https://img.shields.io/npm/v/react-native-web.svg?style=flat\n[package-url]: https://www.npmjs.com/package/react-native-web\n[ci-badge]: https://github.com/necolas/react-native-web/workflows/tests/badge.svg\n[ci-url]: https://github.com/necolas/react-native-web/actions\n[react-native-url]: https://reactnative.dev/\n[contributing-url]: https://github.com/necolas/react-native-web/blob/master/.github/CONTRIBUTING.md\n[good-first-issue-url]: https://github.com/necolas/react-native-web/labels/good%20first%20issue\n[code-of-conduct]: https://opensource.fb.com/code-of-conduct/\n" }, { "path": "packages/react-native-web/package.json", "content": "{\n \"publishConfig\": {\n \"registry\": \"https://registry.npmjs.org/\"\n },\n \"name\": \"react-native-web\",\n \"version\": \"0.21.2\",\n \"description\": \"React Native for Web\",\n \"module\": \"dist/index.js\",\n \"main\": \"dist/cjs/index.js\",\n \"sideEffects\": false,\n \"files\": [\n \"dist\",\n \"src\",\n \"!**/__tests__\"\n ],\n \"scripts\": {\n \"clean\": \"del-cli ./dist\",\n \"build\": \"npm-run-all clean -p \\\"build:* {@}\\\" --\",\n \"build:commonjs\": \"cross-env BABEL_ENV=commonjs babel src --config-file ../../configs/babel.config.js --out-dir dist/cjs --ignore \\\"**/__tests__\\\"\",\n \"build:es\": \"babel src --config-file ../../configs/babel.config.js --out-dir dist --ignore \\\"**/__tests__\\\"\",\n \"build:flow\": \"gen-flow-files ./src --out-dir ./dist\",\n \"dev\": \"npm-run-all clean -p \\\"build:* {@} -- --watch\\\"\"\n },\n \"dependencies\": {\n \"@babel/runtime\": \"^7.18.6\",\n \"@react-native/normalize-colors\": \"^0.74.1\",\n \"fbjs\": \"^3.0.4\",\n \"inline-style-prefixer\": \"^7.0.1\",\n \"memoize-one\": \"^6.0.0\",\n \"nullthrows\": \"^1.1.1\",\n \"postcss-value-parser\": \"^4.2.0\",\n \"styleq\": \"^0.1.3\"\n },\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\",\n \"react-dom\": \"^18.0.0 || ^19.0.0\"\n },\n \"author\": \"Nicolas Gallagher\",\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git://github.com/necolas/react-native-web.git\"\n },\n \"tags\": [\n \"react\"\n ],\n \"keywords\": [\n \"react\",\n \"react-component\",\n \"react-native\",\n \"web\"\n ]\n}\n" }, { "path": "packages/react-native-web/src/exports/AccessibilityInfo/index.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\n'use client';\n\nimport canUseDOM from '../../modules/canUseDom';\n\nfunction isScreenReaderEnabled(): Promise<*> {\n return new Promise((resolve, reject) => {\n resolve(true);\n });\n}\n\nconst prefersReducedMotionMedia =\n canUseDOM && typeof window.matchMedia === 'function'\n ? window.matchMedia('(prefers-reduced-motion: reduce)')\n : null;\n\nfunction isReduceMotionEnabled(): Promise<*> {\n return new Promise((resolve, reject) => {\n resolve(\n prefersReducedMotionMedia ? prefersReducedMotionMedia.matches : true\n );\n });\n}\n\nfunction addChangeListener(fn) {\n if (prefersReducedMotionMedia != null) {\n prefersReducedMotionMedia.addEventListener != null\n ? prefersReducedMotionMedia.addEventListener('change', fn)\n : prefersReducedMotionMedia.addListener(fn);\n }\n}\n\nfunction removeChangeListener(fn) {\n if (prefersReducedMotionMedia != null) {\n prefersReducedMotionMedia.removeEventListener != null\n ? prefersReducedMotionMedia.removeEventListener('change', fn)\n : prefersReducedMotionMedia.removeListener(fn);\n }\n}\n\nconst handlers = {};\n\nconst AccessibilityInfo = {\n /**\n * Query whether a screen reader is currently enabled.\n *\n * Returns a promise which resolves to a boolean.\n * The result is `true` when a screen reader is enabled and `false` otherwise.\n */\n isScreenReaderEnabled,\n\n /**\n * Query whether the user prefers reduced motion.\n *\n * Returns a promise which resolves to a boolean.\n * The result is `true` when a screen reader is enabled and `false` otherwise.\n */\n isReduceMotionEnabled,\n\n /**\n * Deprecated\n */\n fetch: isScreenReaderEnabled,\n\n /**\n * Add an event handler. Supported events: reduceMotionChanged\n */\n addEventListener: function (eventName: string, handler: Function): Object {\n if (eventName === 'reduceMotionChanged') {\n if (!prefersReducedMotionMedia) {\n return;\n }\n const listener = (event) => {\n handler(event.matches);\n };\n addChangeListener(listener);\n handlers[handler] = listener;\n }\n\n return {\n remove: () => AccessibilityInfo.removeEventListener(eventName, handler)\n };\n },\n\n /**\n * Set accessibility focus to a react component.\n */\n setAccessibilityFocus: function (reactTag: number): void {},\n\n /**\n * Post a string to be announced by the screen reader.\n */\n announceForAccessibility: function (announcement: string): void {},\n\n /**\n * Remove an event handler.\n */\n removeEventListener: function (eventName: string, handler: Function): void {\n if (eventName === 'reduceMotionChanged') {\n const listener = handlers[handler];\n if (!listener || !prefersReducedMotionMedia) {\n return;\n }\n removeChangeListener(listener);\n }\n return;\n }\n};\n\nexport default AccessibilityInfo;\n" }, { "path": "packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`components/ActivityIndicator prop \"accessibilityLabel\" value is set 1`] = `\n\n \n \n \n \n \n
\n
\n`;\n\nexports[`components/ActivityIndicator prop \"accessibilityLiveRegion\" value is set 1`] = `\n\n \n \n \n \n \n
\n
\n`;\n\nexports[`components/ActivityIndicator prop \"animating\" is \"false\" 1`] = `\n\n \n \n \n \n \n
\n
\n`;\n\nexports[`components/ActivityIndicator prop \"animating\" is \"true\" 1`] = `\n\n \n \n \n \n \n \n\n`;\n\nexports[`components/ActivityIndicator prop \"color\" 1`] = `\n\n \n \n\n`;\n\nexports[`components/ActivityIndicator prop \"dataSet\" value is set 1`] = `\n\n \n \n \n \n \n \n\n`;\n\nexports[`components/ActivityIndicator prop \"hidesWhenStopped\" is \"false\" 1`] = `\n\n \n \n \n \n \n \n\n`;\n\nexports[`components/ActivityIndicator prop \"hidesWhenStopped\" is \"true\" 1`] = `\n\n \n \n \n \n \n \n\n`;\n\nexports[`components/ActivityIndicator prop \"nativeID\" value is set 1`] = `\n\n \n \n \n \n \n \n\n`;\n\nexports[`components/ActivityIndicator prop \"size\" is \"large\" 1`] = `\n\n \n \n \n \n \n \n\n`;\n\nexports[`components/ActivityIndicator prop \"size\" is a number 1`] = `\n\n \n \n \n \n \n \n\n`;\n\nexports[`components/ActivityIndicator prop \"style\" value is set 1`] = `\n\n \n \n \n \n \n \n\n`;\n\nexports[`components/ActivityIndicator prop \"testID\" value is set 1`] = `\n\n \n \n \n \n \n \n\n`;\n" }, { "path": "packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport ActivityIndicator from '..';\nimport React from 'react';\nimport { createEventTarget } from 'dom-event-testing-library';\nimport { act, render } from '@testing-library/react';\n\ndescribe('components/ActivityIndicator', () => {\n describe('prop \"accessibilityLabel\"', () => {\n test('value is set', () => {\n const { container } = render(\n \n );\n expect(container.firstChild).toMatchSnapshot();\n });\n });\n\n describe('prop \"accessibilityLiveRegion\"', () => {\n test('value is set', () => {\n const { container } = render(\n \n );\n expect(container.firstChild).toMatchSnapshot();\n });\n });\n\n describe('prop \"animating\"', () => {\n test('is \"true\"', () => {\n const { container } = render();\n expect(container.firstChild).toMatchSnapshot();\n });\n\n test('is \"false\"', () => {\n const { container } = render();\n expect(container.firstChild).toMatchSnapshot();\n });\n });\n\n test('prop \"color\"', () => {\n const { container } = render();\n const svg = container.firstChild.querySelector('svg');\n expect(svg).toMatchSnapshot();\n });\n\n describe('prop \"dataSet\"', () => {\n test('value is set', () => {\n const { container } = render(\n \n );\n expect(container.firstChild).toMatchSnapshot();\n });\n });\n\n describe('prop \"hidesWhenStopped\"', () => {\n test('is \"true\"', () => {\n const { container } = render(\n \n );\n expect(container.firstChild).toMatchSnapshot();\n });\n\n test('is \"false\"', () => {\n const { container } = render(\n \n );\n expect(container.firstChild).toMatchSnapshot();\n });\n });\n\n describe('prop \"nativeID\"', () => {\n test('value is set', () => {\n const { container } = render();\n expect(container.firstChild).toMatchSnapshot();\n });\n });\n\n describe('prop \"onBlur\"', () => {\n test('is called', () => {\n const onBlur = jest.fn();\n const ref = React.createRef();\n act(() => {\n render();\n });\n const target = createEventTarget(ref.current);\n const body = createEventTarget(document.body);\n act(() => {\n target.focus();\n body.focus({ relatedTarget: target.node });\n });\n expect(onBlur).toBeCalled();\n });\n });\n\n describe('prop \"onFocus\"', () => {\n test('is called', () => {\n const onFocus = jest.fn();\n const ref = React.createRef();\n act(() => {\n render();\n });\n const target = createEventTarget(ref.current);\n act(() => {\n target.focus();\n });\n expect(onFocus).toBeCalled();\n });\n });\n\n describe('prop \"ref\"', () => {\n test('value is set', () => {\n const ref = jest.fn();\n render();\n expect(ref).toBeCalled();\n });\n });\n\n describe('prop \"size\"', () => {\n test('is \"large\"', () => {\n const { container } = render();\n expect(container.firstChild).toMatchSnapshot();\n });\n\n test('is a number', () => {\n const { container } = render();\n expect(container.firstChild).toMatchSnapshot();\n });\n });\n\n describe('prop \"style\"', () => {\n test('value is set', () => {\n const { container } = render(\n \n );\n expect(container.firstChild).toMatchSnapshot();\n });\n });\n\n describe('prop \"testID\"', () => {\n test('value is set', () => {\n const { container } = render();\n expect(container.firstChild).toMatchSnapshot();\n });\n });\n});\n" }, { "path": "packages/react-native-web/src/exports/ActivityIndicator/index.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\n'use client';\n\nimport type { ViewProps } from '../View';\n\nimport * as React from 'react';\nimport StyleSheet from '../StyleSheet';\nimport View from '../View';\n\nconst createSvgCircle = (style) => (\n \n);\n\ntype ActivityIndicatorProps = {\n ...ViewProps,\n animating?: boolean,\n color?: ?string,\n hidesWhenStopped?: boolean,\n size?: 'small' | 'large' | number\n};\n\nconst ActivityIndicator: React.AbstractComponent<\n ActivityIndicatorProps,\n React.ElementRef\n> = React.forwardRef((props, forwardedRef) => {\n const {\n animating = true,\n color = '#1976D2',\n hidesWhenStopped = true,\n size = 'small',\n style,\n ...other\n } = props;\n\n const svg = (\n \n {createSvgCircle({\n stroke: color,\n opacity: 0.2\n })}\n {createSvgCircle({\n stroke: color,\n strokeDasharray: 80,\n strokeDashoffset: 60\n })}\n \n );\n\n return (\n \n \n \n );\n});\n\nActivityIndicator.displayName = 'ActivityIndicator';\n\nconst styles = StyleSheet.create({\n container: {\n alignItems: 'center',\n justifyContent: 'center'\n },\n hidesWhenStopped: {\n visibility: 'hidden'\n },\n animation: {\n animationDuration: '0.75s',\n animationKeyframes: [\n {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' }\n }\n ],\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite'\n },\n animationPause: {\n animationPlayState: 'paused'\n }\n});\n\nconst indicatorSizes = StyleSheet.create({\n small: {\n width: 20,\n height: 20\n },\n large: {\n width: 36,\n height: 36\n }\n});\n\nexport default ActivityIndicator;\n" }, { "path": "packages/react-native-web/src/exports/Alert/index.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nclass Alert {\n static alert() {}\n}\n\nexport default Alert;\n" }, { "path": "packages/react-native-web/src/exports/Animated/__tests__/index-test.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nimport Animated from '..';\nimport Easing from '../../Easing';\nimport AnimatedImplementation from '../../../vendor/react-native/Animated/AnimatedImplementation';\n\nconst AnimatedInterpolation = Animated.Interpolation;\n\ndescribe('Animated', () => {\n describe('Interpolation', () => {\n describe('color value', () => {\n test.each([[['#1E1E1E', '#1E1E1F']], [[0x1e1e1e, 0x1e1e1f]]])(\n 'can interpolate %s',\n (outputRange) => {\n const config = {\n inputRange: [0, 1],\n outputRange\n };\n const animVal = new Animated.Value(0);\n const result = animVal.interpolate(config);\n expect(result).toBeInstanceOf(Animated.Interpolation);\n }\n );\n });\n\n it('should work with defaults', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: [0, 1]\n });\n\n expect(interpolation(0)).toBe(0);\n expect(interpolation(0.5)).toBe(0.5);\n expect(interpolation(0.8)).toBe(0.8);\n expect(interpolation(1)).toBe(1);\n });\n\n it('should work with output range', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: [100, 200]\n });\n\n expect(interpolation(0)).toBe(100);\n expect(interpolation(0.5)).toBe(150);\n expect(interpolation(0.8)).toBe(180);\n expect(interpolation(1)).toBe(200);\n });\n\n it('should work with input range', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [100, 200],\n outputRange: [0, 1]\n });\n\n expect(interpolation(100)).toBe(0);\n expect(interpolation(150)).toBe(0.5);\n expect(interpolation(180)).toBe(0.8);\n expect(interpolation(200)).toBe(1);\n });\n\n it('should throw for non monotonic input ranges', () => {\n expect(() =>\n AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 2, 1],\n outputRange: [0, 1, 2]\n })\n ).toThrow();\n\n expect(() =>\n AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1, 2],\n outputRange: [0, 3, 1]\n })\n ).not.toThrow();\n });\n\n it('should work with empty input range', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 10, 10],\n outputRange: [1, 2, 3],\n extrapolate: 'extend'\n });\n\n expect(interpolation(0)).toBe(1);\n expect(interpolation(5)).toBe(1.5);\n expect(interpolation(10)).toBe(2);\n expect(interpolation(10.1)).toBe(3);\n expect(interpolation(15)).toBe(3);\n });\n\n it('should work with empty output range', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [1, 2, 3],\n outputRange: [0, 10, 10],\n extrapolate: 'extend'\n });\n\n expect(interpolation(0)).toBe(-10);\n expect(interpolation(1.5)).toBe(5);\n expect(interpolation(2)).toBe(10);\n expect(interpolation(2.5)).toBe(10);\n expect(interpolation(3)).toBe(10);\n expect(interpolation(4)).toBe(10);\n });\n\n it('should work with easing', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: [0, 1],\n easing: Easing.quad\n });\n\n expect(interpolation(0)).toBe(0);\n expect(interpolation(0.5)).toBe(0.25);\n expect(interpolation(0.9)).toBe(0.81);\n expect(interpolation(1)).toBe(1);\n });\n\n it('should work with extrapolate', () => {\n let interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: [0, 1],\n extrapolate: 'extend',\n easing: Easing.quad\n });\n\n expect(interpolation(-2)).toBe(4);\n expect(interpolation(2)).toBe(4);\n\n interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: [0, 1],\n extrapolate: 'clamp',\n easing: Easing.quad\n });\n\n expect(interpolation(-2)).toBe(0);\n expect(interpolation(2)).toBe(1);\n\n interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: [0, 1],\n extrapolate: 'identity',\n easing: Easing.quad\n });\n\n expect(interpolation(-2)).toBe(-2);\n expect(interpolation(2)).toBe(2);\n });\n\n it('should work with keyframes with extrapolate', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 10, 100, 1000],\n outputRange: [0, 5, 50, 500],\n extrapolate: true\n });\n\n expect(interpolation(-5)).toBe(-2.5);\n expect(interpolation(0)).toBe(0);\n expect(interpolation(5)).toBe(2.5);\n expect(interpolation(10)).toBe(5);\n expect(interpolation(50)).toBe(25);\n expect(interpolation(100)).toBe(50);\n expect(interpolation(500)).toBe(250);\n expect(interpolation(1000)).toBe(500);\n expect(interpolation(2000)).toBe(1000);\n });\n\n it('should work with keyframes without extrapolate', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1, 2],\n outputRange: [0.2, 1, 0.2],\n extrapolate: 'clamp'\n });\n\n expect(interpolation(5)).toBeCloseTo(0.2);\n });\n\n it('should throw for an infinite input range', () => {\n expect(() =>\n AnimatedInterpolation.__createInterpolation({\n inputRange: [-Infinity, Infinity],\n outputRange: [0, 1]\n })\n ).toThrow();\n\n expect(() =>\n AnimatedInterpolation.__createInterpolation({\n inputRange: [-Infinity, 0, Infinity],\n outputRange: [1, 2, 3]\n })\n ).not.toThrow();\n });\n\n it('should work with negative infinite', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [-Infinity, 0],\n outputRange: [-Infinity, 0],\n easing: Easing.quad,\n extrapolate: 'identity'\n });\n\n expect(interpolation(-Infinity)).toBe(-Infinity);\n expect(interpolation(-100)).toBeCloseTo(-10000);\n expect(interpolation(-10)).toBeCloseTo(-100);\n expect(interpolation(0)).toBeCloseTo(0);\n expect(interpolation(1)).toBeCloseTo(1);\n expect(interpolation(100)).toBeCloseTo(100);\n });\n\n it('should work with positive infinite', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [5, Infinity],\n outputRange: [5, Infinity],\n easing: Easing.quad,\n extrapolate: 'identity'\n });\n\n expect(interpolation(-100)).toBeCloseTo(-100);\n expect(interpolation(-10)).toBeCloseTo(-10);\n expect(interpolation(0)).toBeCloseTo(0);\n expect(interpolation(5)).toBeCloseTo(5);\n expect(interpolation(6)).toBeCloseTo(5 + 1);\n expect(interpolation(10)).toBeCloseTo(5 + 25);\n expect(interpolation(100)).toBeCloseTo(5 + 95 * 95);\n expect(interpolation(Infinity)).toBe(Infinity);\n });\n\n it('should work with output ranges as string', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: ['rgba(0, 100, 200, 0)', 'rgba(50, 150, 250, 0.4)']\n });\n\n expect(interpolation(0)).toBe('rgba(0, 100, 200, 0)');\n expect(interpolation(0.5)).toBe('rgba(25, 125, 225, 0.2)');\n expect(interpolation(1)).toBe('rgba(50, 150, 250, 0.4)');\n });\n\n it('should work with output ranges as short hex string', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: ['#024', '#9BF']\n });\n\n expect(interpolation(0)).toBe('rgba(0, 34, 68, 1)');\n expect(interpolation(0.5)).toBe('rgba(77, 111, 162, 1)');\n expect(interpolation(1)).toBe('rgba(153, 187, 255, 1)');\n });\n\n it('should work with output ranges as long hex string', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: ['#FF9500', '#87FC70']\n });\n\n expect(interpolation(0)).toBe('rgba(255, 149, 0, 1)');\n expect(interpolation(0.5)).toBe('rgba(195, 201, 56, 1)');\n expect(interpolation(1)).toBe('rgba(135, 252, 112, 1)');\n });\n\n it('should work with output ranges with mixed hex and rgba strings', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: ['rgba(100, 120, 140, .4)', '#87FC70']\n });\n\n expect(interpolation(0)).toBe('rgba(100, 120, 140, 0.4)');\n expect(interpolation(0.5)).toBe('rgba(118, 186, 126, 0.7)');\n expect(interpolation(1)).toBe('rgba(135, 252, 112, 1)');\n });\n\n it('should work with negative and decimal values in string ranges', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: ['-100.5deg', '100deg']\n });\n\n expect(interpolation(0)).toBe('-100.5deg');\n expect(interpolation(0.5)).toBe('-0.25deg');\n expect(interpolation(1)).toBe('100deg');\n });\n\n it('should crash when chaining an interpolation that returns a string', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: [0, 1]\n });\n expect(() => {\n interpolation('45rad');\n }).toThrow();\n });\n\n it('should support a mix of color patterns', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1, 2],\n outputRange: ['rgba(0, 100, 200, 0)', 'rgb(50, 150, 250)', 'red']\n });\n\n expect(interpolation(0)).toBe('rgba(0, 100, 200, 0)');\n expect(interpolation(0.5)).toBe('rgba(25, 125, 225, 0.5)');\n expect(interpolation(1.5)).toBe('rgba(153, 75, 125, 1)');\n expect(interpolation(2)).toBe('rgba(255, 0, 0, 1)');\n });\n\n it('should crash when defining output range with different pattern', () => {\n expect(() =>\n AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: ['20deg', '30rad']\n })\n ).toThrow();\n });\n\n it('should round the alpha channel of a color to the nearest thousandth', () => {\n const interpolation = AnimatedInterpolation.__createInterpolation({\n inputRange: [0, 1],\n outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 1)']\n });\n\n expect(interpolation(1e-12)).toBe('rgba(0, 0, 0, 0)');\n expect(interpolation(2 / 3)).toBe('rgba(0, 0, 0, 0.667)');\n });\n });\n\n describe('sequence and loop', () => {\n it('supports restarting sequence after it was stopped during execution', () => {\n const anim1 = { start: jest.fn(), stop: jest.fn() };\n const anim2 = { start: jest.fn(), stop: jest.fn() };\n const cb = jest.fn();\n\n const seq = AnimatedImplementation.sequence([anim1, anim2]);\n\n seq.start(cb);\n\n anim1.start.mock.calls[0][0]({ finished: true });\n seq.stop();\n\n // anim1 should be finished so anim2 should also start\n expect(anim1.start).toHaveBeenCalledTimes(1);\n expect(anim2.start).toHaveBeenCalledTimes(1);\n\n seq.start(cb);\n\n // after restart the sequence should resume from the anim2\n expect(anim1.start).toHaveBeenCalledTimes(1);\n expect(anim2.start).toHaveBeenCalledTimes(2);\n });\n\n it('supports restarting sequence after it was finished without a reset', () => {\n const anim1 = { start: jest.fn(), stop: jest.fn() };\n const anim2 = { start: jest.fn(), stop: jest.fn() };\n const cb = jest.fn();\n\n const seq = AnimatedImplementation.sequence([anim1, anim2]);\n\n seq.start(cb);\n anim1.start.mock.calls[0][0]({ finished: true });\n anim2.start.mock.calls[0][0]({ finished: true });\n\n // sequence should be finished\n expect(cb).toBeCalledWith({ finished: true });\n\n seq.start(cb);\n\n // sequence should successfully restart from the anim1\n expect(anim1.start).toHaveBeenCalledTimes(2);\n expect(anim2.start).toHaveBeenCalledTimes(1);\n });\n\n it('restarts sequence normally in a loop if resetBeforeIteration is false', () => {\n const anim1 = { start: jest.fn(), stop: jest.fn() };\n const anim2 = { start: jest.fn(), stop: jest.fn() };\n const seq = AnimatedImplementation.sequence([anim1, anim2]);\n\n const loop = AnimatedImplementation.loop(seq, {\n resetBeforeIteration: false\n });\n\n loop.start();\n\n expect(anim1.start).toHaveBeenCalledTimes(1);\n\n anim1.start.mock.calls[0][0]({ finished: true });\n\n expect(anim2.start).toHaveBeenCalledTimes(1);\n\n anim2.start.mock.calls[0][0]({ finished: true });\n\n // after anim2 is finished, the sequence is finished,\n // hence the loop iteration is finished, so the next iteration starts\n expect(anim1.start).toHaveBeenCalledTimes(2);\n });\n });\n});\n" }, { "path": "packages/react-native-web/src/exports/Animated/index.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\n'use client';\n\nimport Animated from '../../vendor/react-native/Animated/Animated';\nexport default Animated;\n" }, { "path": "packages/react-native-web/src/exports/AppRegistry/AppContainer.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport * as React from 'react';\nimport StyleSheet from '../StyleSheet';\nimport View from '../View';\n\ntype Props = {\n WrapperComponent?: ?React.ComponentType<*>,\n // $FlowFixMe\n children?: React.Children,\n rootTag: any\n};\n\nconst RootTagContext: React.Context = React.createContext(null);\n\nconst AppContainer: React.AbstractComponent = React.forwardRef(\n (props: Props, forwardedRef?: React.Ref) => {\n const { children, WrapperComponent } = props;\n\n let innerView = (\n \n );\n\n if (WrapperComponent) {\n innerView = {innerView};\n }\n\n return (\n \n \n {innerView}\n \n \n );\n }\n);\n\nAppContainer.displayName = 'AppContainer';\n\nexport default AppContainer;\n\nconst styles = StyleSheet.create({\n appContainer: {\n flex: 1,\n pointerEvents: 'box-none'\n }\n});\n" }, { "path": "packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`AppRegistry runApplication styles roots in different documents 1`] = `\n[\n \"[stylesheet-group=\"0\"] {}\",\n \"body {margin: 0;}\",\n \"button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}\",\n \"html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}\",\n \"input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}\",\n \"[stylesheet-group=\"1\"] {}\",\n \".css-view-g5y9jx {align-content: flex-start; align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}\",\n \"[stylesheet-group=\"2\"] {}\",\n \".r-display-xoduu5 {display: inline-flex;}\",\n \".r-flex-13awgt0 {flex: 1;}\",\n \"[stylesheet-group=\"3\"] {}\",\n \".r-bottom-1p0dtai {bottom: 0px;}\",\n \".r-left-1d2f490 {left: 0px;}\",\n \".r-pointerEvents-105ug2t {pointer-events: auto !important;}\",\n \".r-pointerEvents-12vffkv>* {pointer-events: auto;}\",\n \".r-pointerEvents-12vffkv {pointer-events: none !important;}\",\n \".r-pointerEvents-633pao>* {pointer-events: none;}\",\n \".r-pointerEvents-633pao {pointer-events: none !important;}\",\n \".r-pointerEvents-ah5dr5>* {pointer-events: none;}\",\n \".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}\",\n \".r-position-u8s1d {position: absolute;}\",\n \".r-right-zchlnj {right: 0px;}\",\n \".r-top-ipm5af {top: 0px;}\",\n]\n`;\n\nexports[`AppRegistry runApplication styles roots in different documents 2`] = `\n[\n \"[stylesheet-group=\"0\"] {}\",\n \"body {margin: 0;}\",\n \"button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}\",\n \"html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}\",\n \"input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}\",\n \"[stylesheet-group=\"1\"] {}\",\n \".css-view-g5y9jx {align-content: flex-start; align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}\",\n \"[stylesheet-group=\"2\"] {}\",\n \".r-display-xoduu5 {display: inline-flex;}\",\n \".r-flex-13awgt0 {flex: 1;}\",\n \"[stylesheet-group=\"3\"] {}\",\n \".r-bottom-1p0dtai {bottom: 0px;}\",\n \".r-left-1d2f490 {left: 0px;}\",\n \".r-pointerEvents-105ug2t {pointer-events: auto !important;}\",\n \".r-pointerEvents-12vffkv>* {pointer-events: auto;}\",\n \".r-pointerEvents-12vffkv {pointer-events: none !important;}\",\n \".r-pointerEvents-633pao>* {pointer-events: none;}\",\n \".r-pointerEvents-633pao {pointer-events: none !important;}\",\n \".r-pointerEvents-ah5dr5>* {pointer-events: none;}\",\n \".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}\",\n \".r-position-u8s1d {position: absolute;}\",\n \".r-right-zchlnj {right: 0px;}\",\n \".r-top-ipm5af {top: 0px;}\",\n]\n`;\n" }, { "path": "packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport AppRegistry from '..';\nimport React from 'react';\nimport { act } from '@testing-library/react';\nconst NoopComponent = () => React.createElement('div');\n\ndescribe.each([['concurrent'], ['legacy']])('AppRegistry', (mode) => {\n describe('runApplication', () => {\n let rootTag;\n\n beforeEach(() => {\n rootTag = document.createElement('div');\n rootTag.id = 'react-root';\n document.body.appendChild(rootTag);\n });\n\n afterEach(() => {\n document.body.removeChild(rootTag);\n });\n\n test('callback after render', () => {\n const callback = jest.fn();\n AppRegistry.registerComponent('App', () => NoopComponent);\n act(() => {\n AppRegistry.runApplication('App', {\n initialProps: {},\n rootTag,\n callback,\n mode\n });\n });\n expect(callback).toHaveBeenCalledTimes(1);\n });\n\n test('unmount ran application', () => {\n const setMountedState = jest.fn();\n const MountedStateComponent = () => {\n React.useEffect(() => {\n setMountedState(true);\n return () => {\n setMountedState(false);\n };\n }, []);\n return ;\n };\n\n AppRegistry.registerComponent('App', () => MountedStateComponent);\n let application;\n act(() => {\n application = AppRegistry.runApplication('App', {\n initialProps: {},\n rootTag,\n mode\n });\n });\n expect(setMountedState).toHaveBeenCalledTimes(1);\n expect(setMountedState).toHaveBeenLastCalledWith(true);\n act(() => {\n application.unmount();\n });\n expect(setMountedState).toHaveBeenCalledTimes(2);\n expect(setMountedState).toHaveBeenLastCalledWith(false);\n });\n\n test('styles roots in different documents', () => {\n AppRegistry.registerComponent('App', () => NoopComponent);\n act(() => {\n AppRegistry.runApplication('App', { initialProps: {}, rootTag, mode });\n });\n // Create iframe context\n const iframe = document.createElement('iframe');\n document.body.appendChild(iframe);\n\n const iframeRootTag = document.createElement('div');\n iframeRootTag.id = 'react-iframe-root';\n iframe.contentWindow.document.body.appendChild(iframeRootTag);\n\n // Run in iframe\n AppRegistry.registerComponent('App', () => NoopComponent);\n act(() => {\n AppRegistry.runApplication('App', {\n initialProps: {},\n rootTag: iframeRootTag,\n mode\n });\n });\n\n const iframedoc = iframeRootTag.ownerDocument;\n expect(iframedoc).toBe(iframe.contentWindow.document);\n expect(iframedoc).not.toBe(document);\n\n const cssText = Array.prototype.slice\n .call(\n iframedoc.getElementById('react-native-stylesheet').sheet.cssRules\n )\n .map((cssRule) => cssRule.cssText);\n\n expect(cssText).toMatchSnapshot();\n });\n });\n});\n" }, { "path": "packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js", "content": "/**\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport AppRegistry from '..';\nimport React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport StyleSheet from '../../StyleSheet';\nimport Text from '../../Text';\nimport View from '../../View';\n\nconst NoopComponent = () => React.createElement('div');\n\ndescribe('AppRegistry', () => {\n describe('getApplication', () => {\n test('does not throw when missing appParameters', () => {\n AppRegistry.registerComponent('App', () => NoopComponent);\n expect(() => AppRegistry.getApplication('App')).not.toThrow();\n });\n\n test('returns \"element\" and \"getStyleElement\"', () => {\n AppRegistry.registerComponent('App', () => NoopComponent);\n const { element, getStyleElement } = AppRegistry.getApplication(\n 'App',\n {}\n );\n const styleElement = ReactDOMServer.renderToStaticMarkup(\n getStyleElement()\n );\n\n expect(element).toMatchInlineSnapshot(`\n \n \n \n `);\n expect(styleElement).toMatchInlineSnapshot(`\n \"\"\n `);\n });\n\n test('\"getStyleElement\" adds props to \n \n \n {% set jsinline %}\n {% include \"assets/inline.js\" %}\n {% endset %}\n \n \n\n\n
\n
\n {{ layoutContent | safe }}\n
\n
\n" }, { "path": "packages/react-native-web-docs/src/pages/404.md", "content": "---\ntitle: 404\npermalink: /404.html\nlayout: layouts/404.html\n---\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/_.md", "content": "---\ntitle: APIs\ndate: Last Modified\npermalink: false\neleventyNavigation:\n key: APIs\n title: APIs\n order: 30 \n---\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/animated.md", "content": "---\ntitle: Animated\ndate: Last Modified\npermalink: /docs/animated/index.html\neleventyNavigation:\n key: Animated\n parent: APIs\n---\n\n:::lead\nAnimated focuses on declarative relationships between inputs and outputs, configurable transforms in between, and start/stop methods to control time-based animation execution.\n:::\n\nThis API is the same JavaScript implementation as found in React Native. Please refer to the React Native documentation below:\n\n* [Animated](https://reactnative.dev/docs/animated)\n\n:::callout\n**Warning!** The React Native animation API is not optimized for the web. You may prefer to use external modules that are designed for multi-platform animations and provide better performance, e.g., [React Spring](https://www.react-spring.io/).\n:::\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/app-registry.md", "content": "---\ntitle: AppRegistry\ndate: Last Modified\npermalink: /docs/app-registry/index.html\neleventyNavigation:\n key: AppRegistry\n parent: APIs\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nAppRegistry is the control point for registering, running, prerendering, and unmounting all apps.\n:::\n\nApp root components should register themselves with `AppRegistry.`registerComponent. Apps can be run by invoking `AppRegistry.runApplication`.\n\n```js\nimport { AppRegistry } from 'react-native';\n```\n\n---\n\n## API\n\n### Static methods\n\n{% call macro.prop('getAppKeys', '() => Array') %}\nReturns an array of all registered app keys\n{% endcall %}\n\n{% call macro.prop('getApplication', '(key: string, params: AppParams) => ({ element, getStyleElement })') %}\nA web-only method for server-side rendering to HTML and CSS. It returns an object containing the given application's `element` and `getStyleElement` function to get styles once the element is rendered.\n{% endcall %}\n\n{% call macro.prop('registerComponent', '(key: string, getComponent: () => React.Element) => void') %}\nRegister a component provider under the given `key`.\n{% endcall %}\n\n{% call macro.prop('registerConfig', '(configs: Array) => void') %}\nRegister multiple applications.\n{% endcall %}\n\n{% call macro.prop('unmountApplicationComponentAtRootTag', 'rootTag: HTMLElement') %}\nCalled this function with the `rootTag` that was passed into `runApplication` in order to unmount it.\n{% endcall %}\n\n### AppConfig\n\n{% call macro.prop('appKey', 'string') %}\nThe `key` under which the component is registered.\n{% endcall %}\n\n{% call macro.prop('component', '() => React.Element') %}\nA function that returns a React element.\n{% endcall %}\n\n### AppParams\n\n{% call macro.prop('callback', '?() => void') %}\nCalled when React rendering has finished.\n{% endcall %}\n\n{% call macro.prop('hydrate', '?boolean') %}\nIf the client should hydrate server-rendered HTML.\n{% endcall %}\n\n{% call macro.prop('initialProps', '?Object') %}\nThe initial props passed to the root component.\n{% endcall %}\n\n{% call macro.prop('rootTag', 'HTMLElement') %}\nThe native element into which the application is rendered.\n{% endcall %}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/app-state.md", "content": "---\ntitle: AppState\ndate: Last Modified\npermalink: /docs/app-state/index.html\neleventyNavigation:\n key: AppState\n parent: APIs\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nAppState can tell you if the app is in the foreground or background, and notify you when the state changes.\n:::\n\nStates: active (the app is running in the foreground), background (the app is running in the background, i.e., the user has not focused the app's tab).\n\n\n```js\nimport { AppState } from 'react-native';\n```\n\n---\n\n## API\n\n### Static properties\n\n{% call macro.prop('isAvailable', 'boolean') %}\nWhether the browser environment supports `AppState`.\n{% endcall %}\n\n{% call macro.prop('currentState', '?(\"active\" | \"background\")') %}\nReturns the current state of the app.\n{% endcall %}\n\n### Static methods\n\n{% call macro.prop('addEventListener', '(type: ?string, listener: (boolean) => void) => ?EmitterSubscription') %}\nAdd a listener to `AppState` changes. Listen to the `\"change\"` event type. The handler is called with the app state value.\n{% endcall %}\n\n---\n\n## Examples\n\n{{ macro.codesandbox('app-state') }}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/appearance.md", "content": "---\ntitle: Appearance\ndate: Last Modified\npermalink: /docs/appearance/index.html\neleventyNavigation:\n key: Appearance\n parent: APIs\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nThe Appearance module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark).\n:::\n\n```js\nimport { Appearance } from 'react-native';\n```\n\n---\n\n## API\n\n### Static methods\n\n{% call macro.prop('addChangeListener', '(listener) => { remove: () => void }') %}\nAdd an event handler that is called with `{colorScheme: \"dark\" | \"light\"}` when appearance preferences change. Returns a `remove` method used to remove the change listener.\n{% endcall %}\n\n{% call macro.prop('getColorScheme', '() => (\"dark\" | \"light\")') %}\nYou can use the Appearance module to determine if the user prefers a dark color scheme. Although the color scheme is available immediately, this may change (e.g. scheduled color scheme change at sunrise or sunset). Any rendering logic or styles that depend on the user preferred color scheme should try to call this function on every render, rather than caching the value.\n{% endcall %}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/clipboard.md", "content": "---\ntitle: Clipboard\ndate: Last Modified\npermalink: /docs/clipboard/index.html\neleventyNavigation:\n key: Clipboard\n parent: APIs\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nClipboard gives you an interface for setting to the clipboard. (Getting clipboard content is not currently supported on web.)\n:::\n\n```js\nimport { Clipboard } from 'react-native';\n```\n\n---\n\n## API\n\n### Static methods\n\n{% call macro.prop('isAvailable', '() => boolean') %}\nDetermines whether the browser environment supports Clipboard at all.\n{% endcall %}\n\n{% call macro.prop('setString', '() => boolean') %}\nCopies a string to the clipboard. On web, some browsers may not support copying to the clipboard, therefore, this function returns a boolean to indicate if the copy was successful.\n{% endcall %}\n\n{% call macro.prop('getString', '() => Promise<\"\">') %}\nNot properly supported on Web. Returns a Promise of an empty string.\n{% endcall %}\n\n---\n\n## Examples\n\n{{ macro.codesandbox('clipboard') }}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/dimensions.md", "content": "---\ntitle: Dimensions\ndate: Last Modified\npermalink: /docs/dimensions/index.html\neleventyNavigation:\n key: Dimensions\n parent: APIs\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nRespond to changes in the viewport dimensions.\n:::\n\nDimensions may change (e.g., due to device rotation) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value.\n\n```js\nimport { Dimensions } from 'react-native';\n```\n\n---\n\n## API\n\n### Static methods\n\n{% call macro.prop('get', '(string: \"window\" | \"screen\") => Dimension') %}\nGet a dimension (e.g., window or screen).\n{% endcall %}\n\n{% call macro.prop('set', '(dimensions: { window: Dimension, screen: Dimension }) => void') %}\nThis should only be called server-side with an estimate for initial dimensions to be used when pre-rendering pages on the server.\n{% endcall %}\n\n{% call macro.prop('addEventListener', '(type: ?string, listener: (dimensions) => void) => ?EmitterSubscription') %}\nAdd a listener to `Dimensions` changes. Listen to the `\"change\"` event type. The handler is called with the dimensions state.\n{% endcall %}\n\n{% call macro.prop('removeEventListener', '(type: ?string, listener: (dimensions) => void) => void') %}\nRemove a listener from `Dimensions` changes.\n{% endcall %}\n\n### Dimension\n\n{% call macro.prop('height', 'number') %}\nThe height of the dimension.\n{% endcall %}\n\n{% call macro.prop('width', 'number') %}\nThe width of the dimension.\n{% endcall %}\n\n---\n\n## Examples\n\n{{ macro.codesandbox('dimensions') }}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/linking.md", "content": "---\ntitle: Linking\ndate: Last Modified\npermalink: /docs/linking/index.html\neleventyNavigation:\n key: Linking\n parent: APIs\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nLinking gives you a general interface for securely opening external URLs from JavaScript.\n:::\n\n```js\nimport { Linking } from 'react-native';\n```\n\n---\n\n## API\n\n### Static methods\n\n{% call macro.prop('canOpenURL', '(url) => Promise') %}\nReturns a `Promise` that resolves to a boolean indicating whether the app can open the URL.\n{% endcall %}\n\n{% call macro.prop('getInitialURL', '() => Promise') %}\nReturns a `Promise` that resolves to the string of the URL that initially loaded the app.\n{% endcall %}\n\n{% call macro.prop('openURL', '(url, target) => Promise<>') %}\nTry to open the given url in a secure fashion. The provided target (including `undefined`) will be passed as the window target, or \"_blank\" if no target included. The method returns a Promise object. If the url opens, the promise is resolved. If not, the promise is rejected.\n{% endcall %}\n\n---\n\n## Examples\n\n{{ macro.codesandbox('linking') }}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/pan-responder.md", "content": "---\ntitle: PanResponder\ndate: Last Modified\npermalink: /docs/pan-responder/index.html\neleventyNavigation:\n key: PanResponder\n parent: APIs\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nPanResponder reconciles several pointers into a single gesture. It makes single-pointer gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.\n:::\n\n:::callout\n**Note:** Using the `PanResponder` on components that contain text may cause native text selection events to interrupt the pan gesture. This can be avoided by setting `userSelect: 'none'` on the text elements while the gesture is active.\n:::\n\nPlease refer to the React Native documentation below:\n\n* [PanResponder](https://reactnative.dev/docs/panresponder)\n\n---\n\n## Examples\n\n{{ macro.codesandbox('pan-responder') }}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/pixel-ratio.md", "content": "---\ntitle: PixelRatio\ndate: Last Modified\npermalink: /docs/pixel-ratio/index.html\neleventyNavigation:\n key: PixelRatio\n parent: APIs\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\n`PixelRatio` class gives access to the device pixel density.\n:::\n\n```js\nimport { PixelRatio } from 'react-native';\n```\n\n---\n\n## API\n\n### Static methods\n\n{% call macro.prop('get', '() => number') %}\nReturns the device pixel density as a number.\n{% endcall %}\n\n{% call macro.prop('getFontScale', '() => number') %}\nOn web this returns the device pixel ratio as a number.\n{% endcall %}\n\n{% call macro.prop('getPixelSizeForLayoutSize', '(number) => number') %}\nConverts a layout size (dp) to pixel size (px). Guaranteed to return an integer number.\n{% endcall %}\n\n{% call macro.prop('roundToNearestPixel', '(number) => number') %}\nRounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels. For example, on a device with a PixelRatio of 3, `PixelRatio.roundToNearestPixel(8.4) = 8.33`, which corresponds to exactly (8.33 * 3) = 25 pixels.\n{% endcall %}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/platform.md", "content": "---\ntitle: Platform\ndate: Last Modified\npermalink: /docs/platform/index.html\neleventyNavigation:\n key: Platform\n parent: APIs\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nDetect what is the platform in which the app is running.\n:::\n\nThis piece of functionality can be useful when only small parts of a component are platform specific.\n\n```js\nimport { Platform } from 'react-native';\n```\n\n---\n\n## API\n\n### Static properties\n\n{% call macro.prop('OS', '\"web\"') %}\nThis value will be `\"web\"` when running in a Web browser.\n{% endcall %}\n\n### Static methods\n\n{% call macro.prop('select', '(config) => any') %}\nTakes an object containing `Platform.OS` values as keys and returns the value for the platform you are currently running on.\n{% endcall %}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md", "content": "---\ntitle: StyleSheet\ndate: Last Modified\npermalink: /docs/style-sheet/index.html\neleventyNavigation:\n key: StyleSheet\n parent: APIs\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nWork with strict styles that provide deterministic rendering and automatically adapt to localized writing direction.\n:::\n\nThe StyleSheet abstraction converts predefined styles to (vendor-prefixed) CSS without requiring a compile-time step. Styles that cannot be resolved outside of the render loop (e.g., dynamic positioning) are usually applied as inline styles.\n\n```js\nimport { StyleSheet } from 'react-native';\n```\n\n::: callout\n**Did you know?** StyleSheet automatically merges styles and produces \"utility\" CSS for lightweight, reliable, and performant styling. Read more in the [styling]({{ '/docs/styling' | url }}) guide.\n:::\n\n---\n\n## API\n\n### Static properties\n\n{% call macro.prop('absoluteFill', '?number') %}\nA very common pattern is to create overlays with position absolute and zero positioning, so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles.\n{% endcall %}\n\n{% call macro.prop('absoluteFillObject', '?Object') %}\nSometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be used to create a customized entry in a StyleSheet.\n{% endcall %}\n\n{% call macro.prop('hairlineWidth', '?Object') %}\nEqual to 1px. This is not implemented using screen density as browsers may round sub-pixel values down to `0`, causing the line not to be rendered.\n{% endcall %}\n\n### Static methods\n\n{% call macro.prop('create', '({ [key]: ruleset }) => ({ [key]: ruleset })') %}\nDefine style objects. Each key of the object passed to `create` must define a style object. These values should not be introspected at runtime.\n{% endcall %}\n\n{% call macro.prop('flatten', '(styles: Style) => Object') %}\nFlatten an array of styles into a single style object. **This is not recommended as it is not compatible with static extraction of styles to CSS.**\n{% endcall %}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/apis/vibration.md", "content": "---\ntitle: Vibration\ndate: Last Modified\npermalink: /docs/vibration/index.html\neleventyNavigation:\n key: Vibration\n parent: APIs\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nVibration is described as a pattern of on-off pulses, which may be of varying lengths. \n:::\n\nThe vibration pattern may consist of either a single integer, describing the number of milliseconds to vibrate, or an array of integers describing a pattern of vibrations and pauses. Vibration is controlled with a single method: `Vibration.vibrate()`.\n\n```js\nimport { Vibration } from 'react-native';\n```\n\n---\n\n## API\n\n### Static methods\n\n{% call macro.prop('cancel', '() => void') %}\nStop the vibration\n{% endcall %}\n\n{% call macro.prop('vibrate', '(number | Array) => void') %}\nStart the vibration pattern\n{% endcall %}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/appendix/_.md", "content": "---\ntitle: Appendix\ndate: Last Modified\npermalink: false\neleventyNavigation:\n key: Appendix\n title: Appendix\n order: 90\n---\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/appendix/about-project.md", "content": "---\ntitle: About the project\ndate: Last Modified\npermalink: /docs/about-project/index.html\ndescription:\neleventyNavigation:\n key: About the project\n parent: Appendix\n order: 2\n---\n\n:::lead\n{{ site.name }}'s origins, evolution, and development.\n:::\n\n{{ site.name }} was started in 2015 by [Nicolas Gallagher](http://nicolasgallagher.com) during the development of [Twitter's Progressive Web App](https://blog.twitter.com/engineering/en_us/topics/open-source/2017/how-we-built-twitter-lite.html). It has evolved from a framework inspired by React Native into a mature and pragmatic compatibility layer between React DOM and React Native.\n\n{{ site.name }} is currently used in production Web apps by companies including [Meta](https://www.meta.com/), [Twitter](https://twitter.com), and [Flipkart](https://twitter.com/naqvitalha/status/969577892991549440). Software engineers from Meta, Expo, and elsewhere continue to contribute design and patches to the project.\n\nDeveloping a Web compatibility layer for React Native involves balancing the needs of high-quality Web apps with the value of React Native API compatibility. There are instances where parts of the React Native API are co-opted to infer information that is necessary or beneficial to products running in Web browsers. Other times there are use cases that are not accomodated by the APIs provided; even when that information cannot be pragmatically incorporated into the existing React Native API design constraints, it still helps to inform which API changes are needed over the long term.\n\nThe evolution of React Native now involves developers who work on React Native for Android, iOS, Web, Windows, and macOS. We aim to help designers and developers with shared, platform-agnostic React APIs that reduce time to market for high-quality, multi-platform products.\n\nPlease browse the [source code]({{ site.githubUrl }}) and consider contributing your experience to the project.\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/appendix/unstable-apis.md", "content": "---\ntitle: Unstable APIs\ndate: Last Modified\npermalink: /docs/unstable-apis/index.html\ndescription:\neleventyNavigation:\n key: Unstable APIs\n parent: Appendix\n order: 1\n---\n\n:::lead\nThe following APIs are unstable and subject to breaking changes. Use at your own risk.\n:::\n\n## Use with existing React DOM components\n\nReact Native for Web exports a web-specific module called `unstable_createElement`, which can be used to wrap React DOM components. This allows you to use React Native's accessibility and style optimizations. Since this is a web-specific export it should always be imported from the `react-native-web` package.\n\nIn the example below, `Video` will now accept common React Native props such as `accessibilityLabel`, `accessible`, `style`, and even the Responder event props.\n\n```js\nimport { unstable_createElement } from 'react-native-web';\nconst Video = (props) => unstable_createElement('video', props);\n```\n\nThis also works with composite components defined in your existing component gallery or dependencies ([live example](https://www.webpackbin.com/bins/-KiTSGFw3fB9Szg7quLI)).\n\n```js\nimport RaisedButton from 'material-ui/RaisedButton';\nimport { unstable_createElement, useLocaleContext } from 'react-native-web';\nimport { StyleSheet, } from 'react-native';\n\nconst CustomButton = (props) => {\n const { direction } = useLocaleContext();\n return unstable_createElement(RaisedButton, {\n ...props,\n style: [ styles.button, props.style ]\n });\n}, { writingDirection: direction });\n\nconst styles = StyleSheet.create({\n button: {\n padding: 20\n }\n});\n```\n\nRemember that React Native styles are not the same as React DOM styles, and care needs to be taken not to pass React DOM styles into your React Native wrapped components.\n\n## Use as a library framework\n\nThe React Native (for Web) building blocks can be used to create higher-level components and abstractions. In the example below, a `styled` function provides an API inspired by styled-components ([live example](https://www.webpackbin.com/bins/-KjT9ziwv4O7FDZdvsnX)).\n\n```jsx\nimport { unstable_createElement } from 'react-native-web';\nimport { StyleSheet } from 'react-native';\n\n/**\n * styled API\n */\nconst styled = (Component, styler) => {\n const isDOMComponent = typeof Component === 'string';\n\n class Styled extends React.Component {\n static contextTypes = {\n getTheme: React.PropTypes.func\n };\n\n render() {\n const theme = this.context.getTheme && this.context.getTheme();\n const localProps = { ...this.props, theme };\n const nextProps = { ...this.props }\n const style = typeof styler === 'function' ? styler(localProps) : styler;\n nextProps.style = [ style, this.props.style ];\n\n return (\n isDOMComponent\n ? unstable_createElement(Component, nextProps)\n : \n );\n }\n }\n return Styled;\n}\n\nconst styles = StyleSheet.create({\n container: {\n alignItems: 'center',\n backgroundColor: '#2196F3',\n flex: 1,\n justifyContent: 'center'\n }\n});\n\nconst StyledView = styled(View, styles.container);\n```\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/components/_.md", "content": "---\ntitle: Components\ndate: Last Modified\npermalink: false\neleventyNavigation:\n key: Components\n title: Components\n order: 20 \n---\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/components/activity-indicator.md", "content": "---\ntitle: ActivityIndicator\ndate: Last Modified\npermalink: /docs/activity-indicator/index.html\neleventyNavigation:\n key: ActivityIndicator\n parent: Components\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nDisplays a customizable activity indicator.\n:::\n\n```jsx\nimport { ActivityIndicator } from 'react-native';\n\n;\n```\n\n---\n\n## API\n\n### Props\n\n{% call macro.prop('...ViewProps', '?ViewProps') %}\nAll the props supported by [View]({{ '/docs/view' | url }}).\n{% endcall %}\n\n{% call macro.prop('animating', '?boolean') %}\nDefault `true`. Set whether the activity indicator is animating.\n{% endcall %}\n\n{% call macro.prop('color', '?string') %}\nDefault `\"#1976D2\"`. Set the color of the activity indicator.\n{% endcall %}\n\n{% call macro.prop('hidesWhenStopped', '?boolean') %}\nDefault `true`. Set whether the activity indicator is hidden when not animating.\n{% endcall %}\n\n{% call macro.prop('size', '?(\"small\" | \"large\" | number)') %}\nDefault `\"small\"`. Set the size of the activity indicator.\n{% endcall %}\n\n---\n\n## Examples\n\n{{ macro.codesandbox('activity-indicator') }}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/components/checkbox.md", "content": "---\ntitle: CheckBox\ndate: Last Modified\npermalink: /docs/checkbox/index.html\neleventyNavigation:\n key: CheckBox\n parent: Components\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nAn accessible checkbox component with customizable appearance.\n:::\n\n`CheckBox` is a controlled component. The `onValueChange` callback should be used to update the `value` prop to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions.\n\n```jsx\nimport { CheckBox } from 'react-native-web';\n\n;\n```\n\n---\n\n## API\n\n### Props\n\n{% call macro.prop('...ViewProps', '?ViewProps') %}\nAll the props supported by [View]({{ '/docs/view' | url }}).\n{% endcall %}\n\n{% call macro.prop('color', '?string = \"#AAB8C2\"') %}\nSet the background color of the checkbox.\n{% endcall %}\n\n{% call macro.prop('disabled', '?boolean') %}\nPrevent all interactions with the checkbox.\n{% endcall %}\n\n{% call macro.prop('onChange', '?(e: ChangeEvent) => void') %}\nCalled when the state of the native checkbox changes.\n{% endcall %}\n\n{% call macro.prop('onValueChange', '?(value: boolean | \"mixed\") => void') %}\nCalled when the state of the native checkbox changes.\n{% endcall %}\n\n{% call macro.prop('value', '?(boolean | \"mixed\") = false') %}\nSet the value of the checkbox.\n{% endcall %}\n\n---\n\n## Examples\n\nNote that the size of the checkbox can be controlled by changing the `height` and `width` style properties.\n\n{{ macro.codesandbox('checkbox') }}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/components/image-background.md", "content": "---\ntitle: ImageBackground\ndate: Last Modified\npermalink: /docs/image-background/index.html\neleventyNavigation:\n key: ImageBackground\n parent: Components\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nAn image component with support for child content.\n:::\n\n```jsx\nimport { ImageBackground } from 'react-native';\n\n{children};\n```\n\n---\n\n## API\n\n### Props\n\n{% call macro.prop('...ImageProps', '?ImageProps') %}\nAll the props supported by [Image]({{ '/docs/image' | url }}).\n{% endcall %}\n\n{% call macro.prop('children', '?any') %}\nContent to display over the image.\n{% endcall %}\n\n{% call macro.prop('imageStyle', '?Style') %}\nStyles to forward to the image component.\n{% endcall %}\n\n## Examples\n\n{{ macro.codesandbox('image-background') }}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/components/image.md", "content": "---\ntitle: Image\ndate: Last Modified\npermalink: /docs/image/index.html\neleventyNavigation:\n key: Image\n parent: Components\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nAn accessible and responsive image component.\n:::\n\nThis component renders images with flexbox layout and `cover` object-fit (rather than `stretch`) by default.\n\n```jsx\nimport { Image } from 'react-native';\n\n;\n```\n\n---\n\n## API\n\n### Props\n\n{% call macro.prop('...ViewProps', '?ViewProps') %}\nAll the props supported by [View]({{ '/docs/view' | url }}).\n{% endcall %}\n\n{% call macro.prop('blurRadius', '?number') %}\nThe radius of the blur filter added to the image\n{% endcall %}\n\n{% call macro.prop('defaultSource', '?Source') %}\nA static image to display while loading the image source.\n{% endcall %}\n\n{% call macro.prop('draggable', '?boolean = false') %}\nSet whether the image can be dragged with native browser behavior. (Web-only)\n{% endcall %}\n\n{% call macro.prop('onError', '?({ nativeEvent: { error } }) => void') %}\nCalled when the image fails to load.\n{% endcall %}\n\n{% call macro.prop('onLoad', '?({ nativeEvent: LoadEvent ) => void') %}\nCalled when the image successfully loads.\n{% endcall %}\n\n{% call macro.prop('onLoadEnd', '?() => void') %}\nCalled when image loading ends.\n{% endcall %}\n\n{% call macro.prop('onLoadStart', '?() => void') %}\nCalled when the image loading starts.\n{% endcall %}\n\n{% call macro.prop('resizeMode', '?(\"center\" | \"cover\" | \"contain\" | \"none\" | \"stretch\") = \"cover\"') %}\nDetermines how the image source is resized to fit the layout of the image element.\n{% endcall %}\n\n{% call macro.prop('source', '?(string | Source)') %}\nThe image source. The string can be a path to an external resource or a base64 encoded resource.\n{% endcall %}\n\n#### Source\n\n{% call macro.prop('height', '?number') %}\nSet the styles of the view.\n{% endcall %}\n\n{% call macro.prop('uri', '?string') %}\nSet the styles of the view.\n{% endcall %}\n\n{% call macro.prop('width', '?number') %}\nSet the styles of the view.\n{% endcall %}\n\n### Statics\n\n{% call macro.prop('getSize', '?(url: string, complete, failure) => void') %}\nDownload an image and measure the width and height (in pixels) prior to displaying it. This method can fail if the image cannot be found, or fails to download.\nComplete callback: `(width: number, height: number) => void`.\nFailure callback: `() => void`.\n{% endcall %}\n\n{% call macro.prop('prefetch', '?(url: string) => Promise') %}\nPrefetches a remote image for later use by downloading it. Once an image has been prefetched it is assumed to be in native browser caches and available for immediate rendering.\n{% endcall %}\n\n{% call macro.prop('queryCache', '?(urls: Array) => Promise') %}\nPerforms cache interrogation. Returns a mapping from URL to cache status: \"disk\", \"memory\", \"disk/memory\". If a requested URL is not in the mapping, it means it's not in the cache.\n{% endcall %}\n\n---\n\n## Examples\n\n{{ macro.codesandbox('image') }}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/components/lists.md", "content": "---\ntitle: Lists\ndate: Last Modified\npermalink: /docs/lists/index.html\neleventyNavigation:\n key: Lists\n parent: Components\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nBasic support for FlatList, SectionList, and VirtualizedList.\n:::\n\nThese components are the same JavaScript implementations as those found in React Native. Please refer to the React Native documentation below:\n\n* [FlatList](https://reactnative.dev/docs/flatlist)\n* [SectionList](https://reactnative.dev/docs/sectionlist)\n* [VirtualizedList](https://reactnative.dev/docs/virtualizedlist)\n\n:::callout\n**Warning!** The React Native list components are not optimized for the web. You may prefer to use external modules that are designed for multi-platform lists and provide better performance, e.g., [RecyclerListView](https://github.com/Flipkart/recyclerlistview).\n:::\n\n---\n\n## Examples\n\n{{ macro.codesandbox('lists') }}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/components/modal.md", "content": "---\ntitle: Modal\ndate: Last Modified\npermalink: /docs/modal/index.html\neleventyNavigation:\n key: Modal\n parent: Components\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nA basic way to present content above an enclosing view. Modals may be nested within other Modals.\n:::\n\n```jsx\nimport { Modal } from 'react-native';\n\n{children};\n```\n\n---\n\n## API\n\n### Props\n\n{% call macro.prop('animationType', '?(\"fade\" | \"none\" | \"slide\")') %}\nDefault is `\"none\"`. This can be used to add an animation to the modal being opened or closed.\n{% endcall %}\n\n{% call macro.prop('children', '?any') %}\nThe children of a `Modal` element will be hidden or shown depending on the modal visibility.\n{% endcall %}\n\n{% call macro.prop('onDismiss', '?() => void') %}\nCalled after the modal has been dismissed and is no longer visible.\n{% endcall %}\n\n{% call macro.prop('onRequestClose', '?() => void') %}\nCalled when the user is attempting to close the modal like when they hit `Escape`. Only the top-most Modal responds to hitting `Escape`.\n{% endcall %}\n\n{% call macro.prop('onShow', '?() => void') %}\nCalled after the modal has been shown and may be visible.\n{% endcall %}\n\n{% call macro.prop('transparent', '?boolean = false') %}\nDetermines if the modal is rendered with a transparent backdrop or a white backdrop\n{% endcall %}\n\n{% call macro.prop('visible', '?boolean = true') %}\nDetermines if the modal and its content is rendered.\n{% endcall %}\n\n---\n\n## Examples\n\n{{ macro.codesandbox('modal') }}\n" }, { "path": "packages/react-native-web-docs/src/pages/docs/components/picker.md", "content": "---\ntitle: Picker\ndate: Last Modified\npermalink: /docs/picker/index.html\neleventyNavigation:\n key: Picker\n parent: Components\n---\n\n{% import \"fragments/macros.html\" as macro with context %}\n\n:::lead\nRenders the native `