diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 0613f3f0734b1..f89e1739ce872 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -126,7 +126,6 @@ apps/pr-deploy-site @microsoft/fluentui-react-build apps/public-docsite-v9 @microsoft/cxe-red @microsoft/fluentui-react-build apps/theming-designer @microsoft/fluentui-react apps/ssr-tests-v9 @microsoft/fluentui-react-build -apps/stress-test @microsoft/cxe-red @spmonahan @micahgodbolt apps/react-18-tests-v8 @microsoft/cxe-red @micahgodbolt apps/react-18-tests-v9 @microsoft/cxe-red @micahgodbolt apps/recipes-react-components @microsoft/cxe-red @microsoft/fluentui-react @sopranopillow diff --git a/apps/stress-test/.babelrc b/apps/stress-test/.babelrc deleted file mode 100644 index 64405d00007c7..0000000000000 --- a/apps/stress-test/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["@babel/env", "@babel/react", "@babel/typescript"], - "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]] -} \ No newline at end of file diff --git a/apps/stress-test/.eslintrc.json b/apps/stress-test/.eslintrc.json deleted file mode 100644 index b6719ff5c00cf..0000000000000 --- a/apps/stress-test/.eslintrc.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": ["plugin:@fluentui/eslint-plugin/node"], - "root": true, - "rules": { - "import/no-extraneous-dependencies": ["error", { "packageDir": ["../../", "./"] }], - "no-restricted-globals": "off" - } -} diff --git a/apps/stress-test/.gitignore b/apps/stress-test/.gitignore deleted file mode 100644 index 8756e1fe4b664..0000000000000 --- a/apps/stress-test/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -node_modules/ -dev-build/ -dist/ - -benchmarks/**/*.json -benchmarks/**/*.js - -yarn-error.log diff --git a/apps/stress-test/.npmignore b/apps/stress-test/.npmignore deleted file mode 100644 index 52d2a7273a151..0000000000000 --- a/apps/stress-test/.npmignore +++ /dev/null @@ -1,29 +0,0 @@ -.storybook/ -.vscode/ -bundle-size/ -config/ -coverage/ -e2e/ -etc/ -node_modules/ -src/ -dist/types/ -temp/ -__fixtures__ -__mocks__ -__tests__ - -*.api.json -*.log -*.spec.* -*.stories.* -*.test.* -*.yml - -# config files -*config.* -*rc.* -.editorconfig -.eslint* -.git* -.prettierignore diff --git a/apps/stress-test/CHANGELOG.json b/apps/stress-test/CHANGELOG.json deleted file mode 100644 index 3c99591c3fb54..0000000000000 --- a/apps/stress-test/CHANGELOG.json +++ /dev/null @@ -1,320 +0,0 @@ -{ - "name": "@fluentui/stress-test", - "entries": [ - { - "date": "Thu, 22 Sep 2022 07:43:45 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.96.1", - "commit": "483f160617f1037e672fe74b8e52abfee9378517" - } - ] - } - }, - { - "date": "Tue, 20 Sep 2022 07:47:16 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "undefined": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react-components to v9.3.0", - "commit": "ead191a8368bf64ecabffce5ea0e02565f449a95" - } - ] - } - }, - { - "date": "Mon, 19 Sep 2022 07:47:30 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.96.0", - "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" - }, - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react-components to v9.3.0", - "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" - }, - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/web-components to v2.5.6", - "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" - } - ] - } - }, - { - "date": "Fri, 16 Sep 2022 07:37:32 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.95.1", - "commit": "9077e0a7d3911096a3337d76ec65591d191a780a" - }, - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react-components to v9.3.0", - "commit": "9077e0a7d3911096a3337d76ec65591d191a780a" - } - ] - } - }, - { - "date": "Thu, 15 Sep 2022 19:15:27 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "minor": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.95.0", - "commit": "682ead9953a1d519133193033aafe392173009f5" - }, - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react-components to v9.3.0", - "commit": "682ead9953a1d519133193033aafe392173009f5" - } - ] - } - }, - { - "date": "Tue, 13 Sep 2022 07:41:03 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.94.4", - "commit": "a40ef34fa6d1122bdfdb708f79b90de9edb2827d" - } - ] - } - }, - { - "date": "Thu, 08 Sep 2022 20:52:16 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.94.3", - "commit": "38bd1c146cb2e635bc181cda1b2f11b17a07c4c4" - } - ] - } - }, - { - "date": "Wed, 07 Sep 2022 07:54:43 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.94.2", - "commit": "2f740624c4e43d6bfe1b488e9d479c95ed71da09" - }, - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/web-components to v2.5.5", - "commit": "2f740624c4e43d6bfe1b488e9d479c95ed71da09" - } - ] - } - }, - { - "date": "Mon, 05 Sep 2022 07:38:30 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.94.1", - "commit": "f9f7d0fb7506d2af70af355a26d7a44b49df5f58" - } - ] - } - }, - { - "date": "Fri, 02 Sep 2022 07:48:53 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.94.0", - "commit": "330aa6b960d371456667aae70cccbf116ed58cef" - } - ] - } - }, - { - "date": "Thu, 01 Sep 2022 07:48:11 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.93.1", - "commit": "53de352ec2079a333b712028364bca9632714050" - } - ] - } - }, - { - "date": "Tue, 30 Aug 2022 07:41:54 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/web-components to v2.5.4", - "commit": "1fe1f9bc178992056a8bc175f6e95675fb00321b" - } - ] - } - }, - { - "date": "Mon, 29 Aug 2022 07:44:38 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.93.0", - "commit": "a3081ce8cb9aef65dd64fe9328b84959d7b0e665" - } - ] - } - }, - { - "date": "Fri, 26 Aug 2022 07:39:58 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.92.1", - "commit": "744f8e5ccf138ef8c893929c77a1e85f484415d4" - } - ] - } - }, - { - "date": "Thu, 25 Aug 2022 07:41:03 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.92.0", - "commit": "4f36c51b9bde0c98b43da00ad13366a0cc0383cf" - } - ] - } - }, - { - "date": "Wed, 24 Aug 2022 16:36:06 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.91.1", - "commit": "5c15d8495a026efaa56e5d5444b211a5cb5280fe" - } - ] - } - }, - { - "date": "Wed, 24 Aug 2022 07:44:42 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.91.0", - "commit": "c868d64e3c84449d5e3d1235a5ef49f9eb0ec487" - } - ] - } - }, - { - "date": "Tue, 23 Aug 2022 07:22:50 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.90.2", - "commit": "d07e579fa3a6af05ee4ac036060653b098a92b37" - } - ] - } - }, - { - "date": "Mon, 22 Aug 2022 07:44:26 GMT", - "tag": "@fluentui/stress-test_v1.0.0", - "version": "1.0.0", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@fluentui/stress-test", - "comment": "Bump @fluentui/react to v8.90.1", - "commit": "5cb75a709fca139572428f6c7a2a0cecd256005b" - } - ] - } - } - ] -} diff --git a/apps/stress-test/CHANGELOG.md b/apps/stress-test/CHANGELOG.md deleted file mode 100644 index 4a4871c838aeb..0000000000000 --- a/apps/stress-test/CHANGELOG.md +++ /dev/null @@ -1,171 +0,0 @@ -# Change Log - @fluentui/stress-test - -This log was last generated on Thu, 22 Sep 2022 07:43:45 GMT and should not be manually modified. - - - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Thu, 22 Sep 2022 07:43:45 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.96.1 ([PR #24871](https://github.com/microsoft/fluentui/pull/24871) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Mon, 19 Sep 2022 07:47:30 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.96.0 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) -- Bump @fluentui/react-components to v9.3.0 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) -- Bump @fluentui/web-components to v2.5.6 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Fri, 16 Sep 2022 07:37:32 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.95.1 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball) -- Bump @fluentui/react-components to v9.3.0 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Thu, 15 Sep 2022 19:15:27 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Minor changes - -- Bump @fluentui/react to v8.95.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball) -- Bump @fluentui/react-components to v9.3.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Tue, 13 Sep 2022 07:41:03 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.94.4 ([PR #24615](https://github.com/microsoft/fluentui/pull/24615) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Thu, 08 Sep 2022 20:52:16 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.94.3 ([PR #24701](https://github.com/microsoft/fluentui/pull/24701) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Wed, 07 Sep 2022 07:54:43 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.94.2 ([PR #24663](https://github.com/microsoft/fluentui/pull/24663) by beachball) -- Bump @fluentui/web-components to v2.5.5 ([PR #24663](https://github.com/microsoft/fluentui/pull/24663) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Mon, 05 Sep 2022 07:38:30 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.94.1 ([PR #24372](https://github.com/microsoft/fluentui/pull/24372) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Fri, 02 Sep 2022 07:48:53 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.94.0 ([PR #24394](https://github.com/microsoft/fluentui/pull/24394) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Thu, 01 Sep 2022 07:48:11 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.93.1 ([PR #24599](https://github.com/microsoft/fluentui/pull/24599) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Tue, 30 Aug 2022 07:41:54 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/web-components to v2.5.4 ([PR #24577](https://github.com/microsoft/fluentui/pull/24577) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Mon, 29 Aug 2022 07:44:38 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.93.0 ([PR #24554](https://github.com/microsoft/fluentui/pull/24554) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Fri, 26 Aug 2022 07:39:58 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.92.1 ([PR #24492](https://github.com/microsoft/fluentui/pull/24492) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Thu, 25 Aug 2022 07:41:03 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.92.0 ([PR #24515](https://github.com/microsoft/fluentui/pull/24515) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Wed, 24 Aug 2022 16:36:06 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.91.1 ([PR #24485](https://github.com/microsoft/fluentui/pull/24485) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Wed, 24 Aug 2022 07:44:42 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.91.0 ([PR #24491](https://github.com/microsoft/fluentui/pull/24491) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Tue, 23 Aug 2022 07:22:50 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/stress-test_v1.0.0..@fluentui/stress-test_v1.0.0) - -### Patches - -- Bump @fluentui/react to v8.90.2 ([PR #24332](https://github.com/microsoft/fluentui/pull/24332) by beachball) - -## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/stress-test_v1.0.0) - -Mon, 22 Aug 2022 07:44:26 GMT - -### Patches - -- Bump @fluentui/react to v8.90.1 ([PR #24279](https://github.com/microsoft/fluentui/pull/24279) by beachball) diff --git a/apps/stress-test/README.md b/apps/stress-test/README.md index 192bed238c768..7ffa4669afce4 100644 --- a/apps/stress-test/README.md +++ b/apps/stress-test/README.md @@ -1,115 +1 @@ -# @fluentui/stress-test - -Stress Test is an application for testing Fluent UI components in "stressful" scenarios so we can evaluate performance. - -This application is configured to support Fluent UI v8, v9 and Web Components. - -## Usage - -Run tests by invoking the CLI: - -```shell -$ yarn workspace @fluentui/stress-test stress-test -``` - -This will show the help documentation that provides details for each command. - -### Building - -Building produces a static application that can be served with a simple HTTP server. - -```shell -# Build all the dependencies for this application (e.g., `@fluentui/react`, `@fluentui/web-components`) along with the application. -$ yarn workspace @fluentui/stress-test stress-test build --build-deps - -# Build only this application. -$ yarn workspace @fluentui/stress-test stress-test build -``` - -> NOTE: `build --build-deps` is much slower, but is required the first time you're building the application or if you've pulled in lots of changes. Use `build` if you don't need to build dependencies like `@fluentui/react` as it's much faster. - -### Examples - -```shell -# Run your "my-scenario" scenario with the "mount" and "inject-styles" test cases against Chrome and Firefox with small sizes. Target the "stress-tree" page with "button" renderers. -$ yarn workspace @fluentui/stress-test stress-test run --scenario my-scenario --test-cases mount inject-styles --browsers chrome firefox --sizes xs s --targets v8/stress-tree?r=button v9/stress-tree?r=button wc/stress-tree?r=button - -# Run your "my-scenario" scenario with the "mount" and "inject-styles" test cases against the default browsers at the default sizes and sample size. Target the "stress-tree" page with "button" renderers. -$ yarn workspace @fluentui/stress-test stress-test run --scenario my-scenario --test-cases mount inject-styles --targets v8/stress-tree?r=button v9/stress-tree?r=button wc/stress-tree?r=button -``` - -> NOTE: Tests should be run against production builds. While tests can be run against development builds, and this is useful for gathering quick results and debugging, the performance characteristics of development and production builds can differ quite a bit. - -## Glossary - -- **scenario**: A testing scenario for a specific line of investigation. For example, if you wanted to compare the performance of different `Button` implementations you might create a "button-test" scenario for various targets. -- **targets**: Different implementation targets. These are URLs that can accept query parameters. For example "v8/stress-tree?r=button", "wc/stress-tree?r=button". -- **test cases**: Different test cases to run against a given scenario. For example, you might want to test mounting performance for a scenario. -- **renderers**: Simple components that can be plugged into targets allowing easy customization of the component under test. - -## Development - -You can run a development server to see what is going to be tested and debugging/investigating issues with it by running the following command: - -```shell -$ yarn workspace @fluentui/stress-test stress-test dev -``` - -Please note that you'll need to add the correct modifiers to the localhost server so that you see the correct test you are trying to debug. If you do not add these modifiers you will most likely just get a page with the message `Cannot GET /`. - -For example, if you want to test mount performance for v8 button with a medium-sized fixture you would need to go to add `/v8/stress-tree/?r=button&test=mount&fixtureName=l_1` after `localhost:9000` in the browser. - -### Project layout - -The project is laid out with folders for each supported version of Fluent (`v8`, `v9`, `wc`) with subfolders in each folder representing a test case. In general there should be corresponding cases between all three versions of Fluent. - -The `shared` folder is for utilities that are shared across Fluent versions. - -The `components` folder is also split by supported Fluent versions and is where components that can be shared across test cases live. - -The `benchmarks` folder houses Tachometer configurations and test results; and helper scripts for generating configurations and processing results. - -The `scripts` folder house the Stress Test CLI app that is used to run tests. - -### Creating your own tests - -There are a few way you can create your own tests depending on what you want to do. - -#### Adding a new test with a renderer - -The simplest thing to do is use an existing test page like "stress-tree" but with your own renderer. A renderer is just a function that renders a component to be rendered. Renderers are specific to the UI library being tested so a Web Component renderer is different from a React one but conceptually they are the same. - -An example React renderer: - -```tsx -// myButton.tsx -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; -``` - -> Note: renderers need to be saved in the appropriate `src/renderers` subfolder. `v8` for Fluent V8, `v9` for Fluent V9, `wc` for Fluent Web Components - -In your test specify the renderer with the `r` query parameter: - -```shell -yarn workspace @fluentui/stress-test stress-test run my-button-scenario --test-cases mount --targets v9/stress-tree?r=myButton -``` - -#### Adding new test fixtures - -Test fixtures are used to drive tests. In the "stress-tree` page fixtures are used to control different sizes of DOM tree so tests can be run against "simple" to "complex" DOM trees. - -Fixtures can be generated with the `build-fixture` command: - -```shell -yarn workspace @fluentui/stress-test stress-test build-fixture --name my-fixture --option option1=value1 option2=value2 -``` - -Fixtures are saved in the `src/fixtures` folder. - -> Note: fixtures can become quite large so they are excluded from git. If you need others to be able to generate your fixture be sure to keep track of the options you use to create the fixture. - -#### Adding a new test page - -A page is a way to control the entire structure of your test. Currently, we ship a "stress-tree" page which loads a broad and deep DOM tree to simulate a complex real-world web application. If you need something different create a page to represent the situation you need to test. See `src/pages` for examples of how to create a page. +`stress-test` has been removed from this repo as it's functionality has moved to [`tensile-perf`](https://github.com/microsoft/tensile-perf). diff --git a/apps/stress-test/config/tests.js b/apps/stress-test/config/tests.js deleted file mode 100644 index 827a0eb717611..0000000000000 --- a/apps/stress-test/config/tests.js +++ /dev/null @@ -1,6 +0,0 @@ -/** Jest test setup file. */ - -// Clean up created files/folders on exit, even after exceptions -// (will not catch SIGINT on windows) -const tmp = require('tmp'); -tmp.setGracefulCleanup(); diff --git a/apps/stress-test/jest.config.js b/apps/stress-test/jest.config.js deleted file mode 100644 index c7b8c1451c4d8..0000000000000 --- a/apps/stress-test/jest.config.js +++ /dev/null @@ -1,21 +0,0 @@ -// @ts-check - -/** - * @type {import('@jest/types').Config.InitialOptions} - */ -module.exports = { - displayName: 'ssr-tests-v9', - preset: '../../jest.preset.js', - transform: { - '^.+\\.tsx?$': [ - 'ts-jest', - { - tsconfig: '/tsconfig.spec.json', - isolatedModules: true, - }, - ], - }, - testEnvironment: 'node', - coverageDirectory: './coverage', - setupFilesAfterEnv: ['./config/tests.js'], -}; diff --git a/apps/stress-test/just.config.ts b/apps/stress-test/just.config.ts deleted file mode 100644 index b10db31a6aca5..0000000000000 --- a/apps/stress-test/just.config.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { preset } from '@fluentui/scripts-tasks'; - -preset(); diff --git a/apps/stress-test/package.json b/apps/stress-test/package.json deleted file mode 100644 index b3cf3b55a3117..0000000000000 --- a/apps/stress-test/package.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "name": "@fluentui/stress-test", - "version": "1.0.0", - "private": true, - "main": "index.js", - "type": "module", - "license": "MIT", - "scripts": { - "stress-test": "ts-node-esm --project tsconfig.scripts.json ./scripts/stressTest.ts", - "type-check": "tsc -b tsconfig.type.json" - }, - "dependencies": { - "@fluentui/react": "*", - "@fluentui/react-components": "*", - "@fluentui/react-icons": "^2.0.237", - "@fluentui/web-components": "*", - "@microsoft/fast-element": "^1.11.1", - "afterframe": "1.0.2", - "react": "17.0.2", - "react-dom": "17.0.2", - "random-seedable": "1.0.8" - }, - "devDependencies": { - "@fluentui/scripts-tasks": "*", - "@fluentui/scripts-storybook": "*" - } -} diff --git a/apps/stress-test/project.json b/apps/stress-test/project.json deleted file mode 100644 index 0a12a627bdb8b..0000000000000 --- a/apps/stress-test/project.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "@fluentui/stress-test", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "projectType": "application", - "implicitDependencies": [] -} diff --git a/apps/stress-test/scenarios/default.js b/apps/stress-test/scenarios/default.js deleted file mode 100644 index d2ac6503704b3..0000000000000 --- a/apps/stress-test/scenarios/default.js +++ /dev/null @@ -1,55 +0,0 @@ -/** - * @typedef {Object} TestOptions - * @property {number} numStartNodes - * @property {number} numAddNodes - * @property {number} numRemoveNodes - */ - -/** - * @typedef {Object.} SizeMap - */ - -/** - * @typedef {Object} ScenarioConfig - * @property {string[]} [testCases] - * @property {SizeMap} [sizes] - * @property {string[]} [browsers] - * @property {number} [sampleSize] - * @property {string[]} [targets] - */ - -module.exports = { - testCases: ['mount', 'inject-styles', 'prop-update', 'remove-node', 'add-node'], - - sizes: { - xs: { - numStartNodes: 100, - numAddNodes: 100, - numRemoveNodes: 99, - }, - - s: { - numStartNodes: 250, - numAddNodes: 250, - numRemoveNodes: 249, - }, - - m: { - numStartNodes: 500, - numAddNodes: 500, - numRemoveNodes: 499, - }, - - l: { - numStartNodes: 750, - numAddNodes: 750, - numRemoveNodes: 749, - }, - - xl: { - numStartNodes: 1000, - numAddNodes: 1000, - numRemoveNodes: 999, - }, - }, -}; diff --git a/apps/stress-test/scripts/commands/build.ts b/apps/stress-test/scripts/commands/build.ts deleted file mode 100644 index 768f66e94575d..0000000000000 --- a/apps/stress-test/scripts/commands/build.ts +++ /dev/null @@ -1,93 +0,0 @@ -import * as yargs from 'yargs'; -import { CLIBuildOptions } from '../utils/types'; - -import { exec } from 'child_process'; -import { promisify } from 'util'; -import configureYargs from '../utils/configureYargs.js'; -import webpack from 'webpack'; -import webpackConfig from '../../webpack/webpack.config.js'; -import { buildDefaultFixtures } from '../utils/fixtures.js'; - -const execAsync = promisify(exec); - -const command = 'build'; - -const run: (argv: CLIBuildOptions) => Promise = async argv => { - if (argv.buildDeps) { - const deps = ['@fluentui/web-components']; - console.log('Building dependencies', deps.join(', ')); - const cmd = `lage build --to ${deps.join(' ')} ${argv.verbose ? '--verbose' : ''}`; - console.log(`Run: ${cmd}`); - await execAsync(cmd); - console.log(`Finished building dependencies!`); - } - - return new Promise((resolve, reject) => { - const config = webpackConfig(undefined, { griffelMode: argv.griffelMode, mode: argv.mode }); - webpack(config, (err, stats) => { - if (err) { - console.error(err.stack || err); - return reject(); - } - - if (stats && stats.hasErrors()) { - const { errors } = stats.toJson(); - errors && - errors.forEach(error => { - console.error(error.message); - if (argv.verbose) { - error.details && console.error(error.details); - error.stack && console.error(error.stack); - } - }); - - if (stats.hasWarnings()) { - const { warnings } = stats.toJson(); - warnings && - warnings.forEach(warning => { - console.warn(warning.message); - if (argv.verbose) { - warning.details && console.warn(warning.details); - warning.stack && console.warn(warning.stack); - } - }); - } - return reject(); - } - - if (stats) { - console.log( - stats.toString({ - colors: true, // Shows colors in the console - }), - ); - } - - resolve(); - }); - }); -}; - -const api: yargs.CommandModule = { - command, - describe: 'Builds the application.', - builder: y => { - return configureYargs(command, y); - }, - handler: argv => { - const args: CLIBuildOptions = { - griffelMode: argv.griffelMode as CLIBuildOptions['griffelMode'], - mode: argv.mode as CLIBuildOptions['mode'], - verbose: argv.verbose as boolean, - buildDeps: argv.buildDeps as boolean, - }; - - buildDefaultFixtures(); - - run(args).then(() => { - console.log('Build complete!'); - }); - }, -}; - -export default api; diff --git a/apps/stress-test/scripts/commands/buildFixture.ts b/apps/stress-test/scripts/commands/buildFixture.ts deleted file mode 100644 index 3562020b8b7de..0000000000000 --- a/apps/stress-test/scripts/commands/buildFixture.ts +++ /dev/null @@ -1,47 +0,0 @@ -import * as yargs from 'yargs'; -import { CLIBuildFixtureOptions } from '../utils/types'; -import configureYargs from '../utils/configureYargs.js'; -import { buildTreeFixture, cleanFixtures, isReservedName, reservedNames } from '../utils/fixtures.js'; - -type BuildFixture = (options: CLIBuildFixtureOptions) => void; - -const command = 'build-fixture'; - -const buildFixture: BuildFixture = ({ type, name, options }) => { - if (type === 'tree') { - buildTreeFixture(name, options); - } -}; - -const api: yargs.CommandModule = { - command, - describe: 'Builds a test fixture.', - builder: y => { - return configureYargs(command, y); - }, - handler: argv => { - const { $0, _, ...options } = argv; - - const opts = options as CLIBuildFixtureOptions; - - if (opts.clean) { - cleanFixtures(); - } else { - if (!opts.name) { - throw new Error(`"name" is required.`); - } else if (!opts.options) { - throw new Error(`"options" is required.`); - } - - if (isReservedName(opts.name)) { - throw new Error( - `"${opts.name}" is a reserved name. Please using a name other than ${reservedNames.map(n => n + '*')}`, - ); - } - - buildFixture(opts); - } - }, -}; - -export default api; diff --git a/apps/stress-test/scripts/commands/buildTestConfig.ts b/apps/stress-test/scripts/commands/buildTestConfig.ts deleted file mode 100644 index a7275502f5853..0000000000000 --- a/apps/stress-test/scripts/commands/buildTestConfig.ts +++ /dev/null @@ -1,117 +0,0 @@ -import * as yargs from 'yargs'; -import { CLIBuildTestConfigOptions, ConfigResult, TestOptions } from '../utils/types'; - -import fs from 'fs-extra'; -import * as path from 'path'; - -import { getConfigDir, getResultsDir, ensureClean } from '../utils/paths.js'; -import configureYargs from '../utils/configureYargs.js'; -import * as querystring from 'querystring'; - -type BuildTestConfig = (options: CLIBuildTestConfigOptions) => ConfigResult[]; -type MakeConfigJson = ( - scenario: string, - browser: string, - testCase: string, - sampleSize: number, - targets: string[], - size: string, - testOptions: TestOptions, - port: number, -) => string; - -const command = 'build-test-config'; - -const buildTestConfig: BuildTestConfig = options => { - const { scenario, browsers, testCases, sampleSize, targets, sizes, port, testOptions } = options; - const configDir = getConfigDir(scenario); - ensureClean(configDir); - - const configs = [] as ConfigResult[]; - - for (const browser of browsers) { - for (const testCase of testCases) { - for (const size of sizes) { - const json = makeConfigJson(scenario, browser, testCase, sampleSize, targets, size, testOptions, port); - const configName = [browser, testCase, size].join('.') + '.json'; - const configPath = path.join(configDir, configName); - fs.writeFileSync(configPath, json, { encoding: 'utf8' }); - - const resultsDir = getResultsDir(scenario); - const configResult = { - configDir, - resultsDir, - testFile: configPath, - resultsFile: path.join(resultsDir, configName), - }; - - configs.push(configResult); - } - } - } - - return configs; -}; - -const getUrl = (target: string, port: number): string => { - if (target.startsWith('http')) { - return target; - } - - return `http://localhost:${port}/${target}`; -}; - -const makeConfigJson: MakeConfigJson = (_scenario, browser, testCase, sampleSize, targets, size, testOptions, port) => { - const json = { - $schema: 'https://raw.githubusercontent.com/Polymer/tachometer/master/config.schema.json', - sampleSize, - timeout: 0, - benchmarks: [ - { - browser: { - name: browser, - }, - measurement: [ - { - mode: 'performance', - entryName: 'stress', - }, - ], - - expand: targets.map(target => { - const targetParams = target.includes('?') ? querystring.parse(target.substring(target.indexOf('?') + 1)) : {}; - const params = querystring.stringify({ - ...targetParams, - test: testCase, - fixtureName: `${size}_1`, - ...testOptions, - }); - - const targetWithoutParams = target.substring(0, target.includes('?') ? target.indexOf('?') : undefined); - - return { - name: `${target} - ${testCase} - ${size}`, - url: `${getUrl(targetWithoutParams, port)}/?${params}`, - }; - }), - }, - ], - }; - - return JSON.stringify(json, null, 4); -}; - -const api: yargs.CommandModule = { - command, - describe: 'Builds test configuration files.', - builder: y => { - return configureYargs(command, y); - }, - handler: argv => { - const { $0, _, ...rest } = argv; - buildTestConfig(rest as CLIBuildTestConfigOptions); - }, -}; - -export default api; -export { buildTestConfig }; diff --git a/apps/stress-test/scripts/commands/dev.ts b/apps/stress-test/scripts/commands/dev.ts deleted file mode 100644 index 02c89ce854157..0000000000000 --- a/apps/stress-test/scripts/commands/dev.ts +++ /dev/null @@ -1,56 +0,0 @@ -import * as yargs from 'yargs'; -import { CLIDevOptions } from '../utils/types'; - -import webpack from 'webpack'; -import WebpackDevServer from 'webpack-dev-server'; -import configureYargs from '../utils/configureYargs.js'; -import webpackConfig from '../../webpack/webpack.config.js'; -import { buildDefaultFixtures } from '../utils/fixtures.js'; - -const command = 'dev'; - -const shutdownServer = () => { - if (server) { - server.stop().then(() => { - console.log('Webpack dev server shutdown.'); - }); - } -}; - -let server: WebpackDevServer; - -type RunServer = (argv: CLIDevOptions) => void; - -const runServer: RunServer = async argv => { - const config = webpackConfig(undefined, argv); - const compiler = webpack(config); - - const serverOptions = { ...config.devServer, open: argv.open }; - server = new WebpackDevServer(serverOptions, compiler); - - process.on('uncaughtException', shutdownServer); - - console.log('Starting Webpack dev server...'); - await server.start(); -}; - -const api: yargs.CommandModule = { - command, - describe: 'Run the app in development mode', - builder: y => { - return configureYargs(command, y); - }, - handler: argv => { - const args = { - griffelMode: argv.griffelMode as CLIDevOptions['griffelMode'], - open: argv.open as boolean, - mode: argv.mode as CLIDevOptions['mode'], - }; - - buildDefaultFixtures(); - - runServer(args); - }, -}; - -export default api; diff --git a/apps/stress-test/scripts/commands/processResults.ts b/apps/stress-test/scripts/commands/processResults.ts deleted file mode 100644 index b80b809d670f3..0000000000000 --- a/apps/stress-test/scripts/commands/processResults.ts +++ /dev/null @@ -1,67 +0,0 @@ -import * as yargs from 'yargs'; -import { CLIProcessResultsOptions, ProcessedBrowserData, TachometerBenchmark } from '../utils/types'; -import fs from 'fs-extra'; -import * as path from 'path'; -import configureYargs from '../utils/configureYargs.js'; -import { getResultsDir, readDirJson } from '../utils/paths.js'; - -const command = 'process-results'; - -const handler: (argv: CLIProcessResultsOptions) => void = argv => { - const { scenario } = argv; - - const resultsDir = getResultsDir(scenario); - const files = readDirJson(resultsDir); - - const browserData: ProcessedBrowserData = { - scenario, - testCases: {}, - }; - - for (const file of files) { - const contents = fs.readFileSync(path.join(resultsDir, file), { - encoding: 'utf8', - }); - const json = JSON.parse(contents); - const benchmark = json.benchmarks[0]; - const browser = benchmark.browser.name; - - const [, testCase, size] = benchmark.name.split(' - '); - - browserData.testCases[testCase] = browserData.testCases[testCase] || { sizes: {} }; - browserData.testCases[testCase].sizes[size] = browserData.testCases[testCase].sizes[size] || { browsers: {} }; - - browserData.testCases[testCase].sizes[size].browsers[browser] = json.benchmarks.map((bm: TachometerBenchmark) => { - const [bmTarget, bmTestCase, bmSize] = bm.name.split(' - '); - - return { - name: bm.name, - mean: bm.mean, - differences: bm.differences, - samples: bm.samples, - target: bmTarget, - testCase: bmTestCase, - size: bmSize, - }; - }); - } - - const js = ` - export const data = ${JSON.stringify(browserData, null, 4)}; - `; - fs.writeFileSync(path.join(resultsDir, 'processed-results.js'), js, { encoding: 'utf8' }); -}; - -const api: yargs.CommandModule = { - command, - describe: 'Processes test results for display with charts and graphs.', - builder: y => { - return configureYargs(command, y); - }, - handler: argv => { - const args = { scenario: argv.scenario as string }; - handler(args); - }, -}; - -export default api; diff --git a/apps/stress-test/scripts/commands/run.ts b/apps/stress-test/scripts/commands/run.ts deleted file mode 100644 index 98bfb69436fb0..0000000000000 --- a/apps/stress-test/scripts/commands/run.ts +++ /dev/null @@ -1,47 +0,0 @@ -import * as yargs from 'yargs'; -import { CLIBuildTestConfigOptions, CLIRunOptions, CLIServerOptions, ConfigResult } from '../utils/types'; -import configureYargs from '../utils/configureYargs.js'; -import { startServer, stopServer } from '../utils/server.js'; -import runTachometer from '../utils/tachometer.js'; -import processResults from './processResults.js'; -import { buildTestConfig } from './buildTestConfig.js'; -import { buildDefaultFixtures } from '../utils/fixtures.js'; - -const command = 'run'; - -const run: (testConfigs: ConfigResult[], options: CLIServerOptions) => Promise = async (testConfigs, options) => { - const { port, root } = options; - await startServer({ port, root }); - await runTachometer(testConfigs); -}; - -const handler: (argv: CLIRunOptions) => Promise = async argv => { - const testConfigs = buildTestConfig(argv as CLIBuildTestConfigOptions); - - try { - await run(testConfigs, argv); - } finally { - stopServer(); - } -}; - -const api: yargs.CommandModule = { - command, - describe: 'Builds configs and runs stress testing.', - builder: y => { - return configureYargs(command, y); - }, - handler: async argv => { - buildDefaultFixtures(); - - const { $0, _, ...rest } = argv; - const args = rest as unknown as CLIRunOptions; - await handler(args); - - if (argv.processResults) { - processResults.handler(argv); - } - }, -}; - -export default api; diff --git a/apps/stress-test/scripts/commands/runServer.ts b/apps/stress-test/scripts/commands/runServer.ts deleted file mode 100644 index 6b3490487a1aa..0000000000000 --- a/apps/stress-test/scripts/commands/runServer.ts +++ /dev/null @@ -1,20 +0,0 @@ -import * as yargs from 'yargs'; - -import configureYargs from '../utils/configureYargs.js'; -import { startServer } from '../utils/server.js'; -import { CLIServerOptions } from '../utils/types'; - -const command = 'serve'; - -const api: yargs.CommandModule = { - command, - describe: 'Runs a test HTTP server.', - builder: y => { - return configureYargs(command, y); - }, - handler: argv => { - startServer(argv as CLIServerOptions); - }, -}; - -export default api; diff --git a/apps/stress-test/scripts/commands/runTachometer.ts b/apps/stress-test/scripts/commands/runTachometer.ts deleted file mode 100644 index 516bcf25978cb..0000000000000 --- a/apps/stress-test/scripts/commands/runTachometer.ts +++ /dev/null @@ -1,54 +0,0 @@ -import * as yargs from 'yargs'; -import { CLITachometerOptions, ConfigResult } from '../utils/types'; -import fs from 'fs-extra'; -import * as path from 'path'; - -import configureYargs from '../utils/configureYargs.js'; -import { getConfigDir, getResultsDir, readDirJson } from '../utils/paths.js'; -import runTachometer from '../utils/tachometer.js'; - -const command = 'tachometer'; - -const handler: (argv: CLITachometerOptions) => Promise = async argv => { - const { scenario } = argv; - - const configDir = getConfigDir(scenario); - const resultsDir = getResultsDir(scenario); - - if (!fs.existsSync(configDir)) { - throw new Error(`"${configDir} does not exist.`); - } - - const configs = [] as ConfigResult[]; - const files = readDirJson(configDir); - - for (const file of files) { - const configResult = { - configDir, - resultsDir, - testFile: path.join(configDir, file), - resultsFile: path.join(resultsDir, file), - }; - - configs.push(configResult); - } - - await runTachometer(configs); - console.log('Tachometer run complete!'); -}; - -const api: yargs.CommandModule = { - command, - describe: 'Runs Tachometer for a provided scenario.', - builder: y => { - return configureYargs(command, y); - }, - handler: argv => { - const args = { - scenario: argv.scenario as string, - }; - handler(args); - }, -}; - -export default api; diff --git a/apps/stress-test/scripts/stressTest.ts b/apps/stress-test/scripts/stressTest.ts deleted file mode 100644 index 716df4293ae60..0000000000000 --- a/apps/stress-test/scripts/stressTest.ts +++ /dev/null @@ -1,23 +0,0 @@ -import yargs from 'yargs'; -import build from './commands/build.js'; -import buildTestConfig from './commands/buildTestConfig.js'; -import dev from './commands/dev.js'; -import processResults from './commands/processResults.js'; -import run from './commands/run.js'; -import runServer from './commands/runServer.js'; -import runTachometer from './commands/runTachometer.js'; -import buildFixture from './commands/buildFixture.js'; - -yargs - .usage('Usage: $0 [options]') - .command(build) - .command(buildTestConfig) - .command(dev) - .command(processResults) - .command(run) - .command(runServer) - .command(runTachometer) - .command(buildFixture) - .demandCommand() - .help() - .parse(); diff --git a/apps/stress-test/scripts/utils/configureYargs.ts b/apps/stress-test/scripts/utils/configureYargs.ts deleted file mode 100644 index cf38d4cebd9a0..0000000000000 --- a/apps/stress-test/scripts/utils/configureYargs.ts +++ /dev/null @@ -1,247 +0,0 @@ -import * as yargs from 'yargs'; -import { getBrowsers } from './getBrowsers.js'; - -type YargsOptions = Record; -type Configure = (y: yargs.Argv, options: YargsOptions) => void; -type CongfigureYargs = (command: string, y: yargs.Argv) => yargs.Argv; - -const cliOptions = { - scenario: { - describe: 'Name applied to scenario that is about to be run', - demand: true, - }, - 'test-cases': { - describe: 'List of test cases to run for the scenario. E.g., mount inject-styles', - }, - sizes: { - describe: 'Sizes of each test case.', - default: ['s', 'm', 'l'], - }, - browsers: { - describe: 'List of browsers to run against.', - default: getBrowsers(), - }, - 'sample-size': { - describe: 'Number of samples to run for each test case.', - default: 25, - }, - targets: { - describe: 'Tests to target.', - demand: true, - }, - 'process-results': { - describe: 'Process the test results for display.', - default: true, - }, - port: { - describe: 'Port for test server.', - default: 8080, - }, - root: { - describe: 'Root folder for test server relative to package root.', - default: 'dist', - }, - 'griffel-mode': { - describe: 'Optimization mode for Griffel.', - default: 'buildtime', - }, - 'test-options': { - describe: 'Options to apply to each test. E.g., option1=value1 option2=value2', - coerce: (arg: string[]) => { - return arg.reduce((map: { [key: string]: string }, current) => { - const [key, value] = current.split('='); - if (!key || !value) { - throw new Error(`Invalid test option. Got ${current}. Expected the form "key=value".`); - } - - map[key] = value; - return map; - }, {}); - }, - default: [], - }, - mode: { - describe: 'Build mode.', - default: 'production', - }, - verbose: { - describe: 'Log more messages.', - default: false, - }, - 'build-deps': { - describe: 'Build dependencies for the app before building the app itself.', - default: false, - }, - open: { - describe: 'Open the dev server in a new browser window.', - default: false, - }, - type: { - describe: 'Type of fixture to build.', - default: 'tree', - }, - name: { - describe: 'Name of the fixture.', - }, - options: { - describe: 'Options for building the fixture. E.g., minBreadth=1 maxBreadth=20', - coerce: (arg: string[]) => { - return arg.reduce((map: { [key: string]: string }, current) => { - const [key, value] = current.split('='); - if (!key || !value) { - throw new Error(`Invalid test option. Got ${current}. Expected the form "key=value".`); - } - - map[key] = value; - return map; - }, {}); - }, - }, - clean: { - describe: 'Cleans fixtures.', - default: false, - }, -}; - -const configure: Configure = (y, options) => { - let _y = y.options(options); - - Object.keys(options).forEach(option => { - switch (option) { - case 'test-cases': - case 'browsers': - case 'targets': - case 'test-options': - case 'renderers': - case 'options': - _y = _y.array(option); - break; - - case 'sizes': - _y = _y.array(option).choices(option, ['xs', 's', 'm', 'l', 'xl']); - break; - - case 'sample-size': - case 'port': - _y = _y.number(option); - break; - - case 'process-results': - case 'verbose': - case 'build-deps': - case 'open': - case 'clean': - _y = _y.boolean(option); - break; - - case 'griffel-mode': - _y = _y.choices(option, ['runtime', 'buildtime', 'extraction']); - break; - - case 'mode': - _y = _y.choices(option, ['production', 'development']); - break; - - case 'type': - _y = _y.choices(option, ['tree']); - break; - } - }); -}; - -const configureYargs: CongfigureYargs = (command, y) => { - switch (command) { - case 'build-test-config': { - const { - scenario, - 'test-cases': testCases, - sizes, - browsers, - 'sample-size': sampleSize, - targets, - 'test-options': testOptions, - port, - } = cliOptions; - configure(y, { - scenario, - 'test-cases': testCases, - sizes, - browsers, - 'sample-size': sampleSize, - targets, - 'test-options': testOptions, - port, - }); - break; - } - - case 'run': { - const { - scenario, - 'test-cases': testCases, - sizes, - browsers, - 'sample-size': sampleSize, - targets, - 'test-options': testOptions, - 'process-results': processResults, - port, - root, - } = cliOptions; - configure(y, { - scenario, - 'test-cases': testCases, - sizes, - browsers, - 'sample-size': sampleSize, - targets, - 'test-options': testOptions, - 'process-results': processResults, - port, - root, - }); - break; - } - - case 'process-results': { - const { scenario } = cliOptions; - configure(y, { scenario }); - break; - } - - case 'serve': { - const { port, root } = cliOptions; - configure(y, { port, root }); - break; - } - - case 'tachometer': { - const { scenario } = cliOptions; - configure(y, { scenario }); - break; - } - - case 'build': { - const { 'griffel-mode': griffelMode, mode, verbose, 'build-deps': buildDeps } = cliOptions; - configure(y, { 'griffel-mode': griffelMode, mode, verbose, 'build-deps': buildDeps }); - break; - } - - case 'dev': { - const { mode, open, 'griffel-mode': griffelMode } = cliOptions; - mode.default = 'development'; - configure(y, { mode, open, 'griffel-mode': griffelMode }); - break; - } - - case 'build-fixture': { - const { type, name, options, clean } = cliOptions; - configure(y, { type, name, options, clean }); - break; - } - } - - return y; -}; - -export default configureYargs; diff --git a/apps/stress-test/scripts/utils/fixtures.ts b/apps/stress-test/scripts/utils/fixtures.ts deleted file mode 100644 index 745a66f3f7bd3..0000000000000 --- a/apps/stress-test/scripts/utils/fixtures.ts +++ /dev/null @@ -1,174 +0,0 @@ -import fs from 'fs-extra'; -import { join } from 'path'; -import { getFixturesDir, remove } from './paths.js'; -import { RandomTree } from './tree/RandomTree.js'; -import { RandomSelectorTreeNode } from '../../src/shared/tree/types.js'; -import { selectorTreeCreator } from './tree/RandomSelectorTreeNode.js'; -import glob from 'glob'; - -type BuildTreeFixture = (name: string, options: { [key: string]: string }) => void; -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type TreeJsonReplacer = (key: string, value: any) => any; -type DefaultFixture = 'xs_1' | 'xs_2' | 's_1' | 's_2' | 'm_1' | 'm_2' | 'l_1' | 'l_2' | 'xl_1' | 'xl_2'; -type DefaultFixtureOptions = { - [fixtureName in DefaultFixture]: { - [option: string]: string; - }; -}; - -const defaultFixtures = ['xs_1', 'xs_2', 's_1', 's_2', 'm_1', 'm_2', 'l_1', 'l_2', 'xl_1', 'xl_2']; -const defaultFixtureOptions: DefaultFixtureOptions = { - // eslint-disable-next-line @typescript-eslint/naming-convention - xs_1: { - minBreadth: '1', - maxBreadth: '5', - minDepth: '1', - maxDepth: '5', - targetSize: '250', - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - xs_2: { - minBreadth: '1', - maxBreadth: '5', - minDepth: '1', - maxDepth: '5', - targetSize: '250', - seed: '7032017', - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - s_1: { - minBreadth: '2', - maxBreadth: '10', - minDepth: '2', - maxDepth: '10', - targetSize: '500', - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - s_2: { - minBreadth: '2', - maxBreadth: '10', - minDepth: '2', - maxDepth: '10', - targetSize: '500', - seed: '7032017', - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - m_1: { - minBreadth: '4', - maxBreadth: '20', - minDepth: '4', - maxDepth: '20', - targetSize: '1000', - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - m_2: { - minBreadth: '4', - maxBreadth: '20', - minDepth: '4', - maxDepth: '20', - targetSize: '1000', - seed: '7032017', - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - l_1: { - minBreadth: '8', - maxBreadth: '40', - minDepth: '8', - maxDepth: '40', - targetSize: '2000', - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - l_2: { - minBreadth: '8', - maxBreadth: '40', - minDepth: '8', - maxDepth: '40', - targetSize: '2000', - seed: '7032017', - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - xl_1: { - minBreadth: '16', - maxBreadth: '80', - minDepth: '16', - maxDepth: '80', - targetSize: '4000', - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - xl_2: { - minBreadth: '16', - maxBreadth: '80', - minDepth: '16', - maxDepth: '80', - targetSize: '4000', - seed: '7032017', - }, -}; - -export const reservedNames = ['xs_', 's_', 'm_', 'l_', 'xl_']; -export const isReservedName = (name: string): boolean => { - return reservedNames.some(reservedName => { - return name.startsWith(reservedName); - }); -}; - -const treeJsonReplace: TreeJsonReplacer = (key, value) => { - if (key === 'parent') { - return undefined; - } - - return value; -}; - -export const cleanFixtures = () => { - const files = glob.sync(join(getFixturesDir(), '**', '*.js')); - files.forEach(file => remove(file)); -}; - -export const buildTreeFixture: BuildTreeFixture = (name, options) => { - const selectors = [] as string[]; - const treeBuilder = new RandomTree(options); - const tree = treeBuilder.build(selectorTreeCreator(selectors)); - - const jsonTree = JSON.stringify(tree, treeJsonReplace, 2); - - const data = { - tree: JSON.parse(jsonTree), - selectors: Array.from(new Set(selectors)), - }; - - const js = `export default ${JSON.stringify(data, null, 2)};`; - - fs.writeFileSync(join(getFixturesDir(), `${name}.js`), js, { encoding: 'utf8' }); -}; - -export const buildDefaultFixtures = () => { - const fixtures = defaultFixtures.map(f => { - return { - name: f as DefaultFixture, - path: join(getFixturesDir(), `${f}.js`), - }; - }); - - const missingFixtures = [] as DefaultFixture[]; - fixtures.forEach(f => { - if (!fs.existsSync(f.path)) { - missingFixtures.push(f.name); - } - }); - - if (missingFixtures.length === 0) { - return; - } - - console.log(`Missing fixtures: ${missingFixtures}.`); - console.log('Generating...'); - - missingFixtures.forEach(missingFixture => { - console.log(`Generating fixture ${missingFixture}...`); - buildTreeFixture(missingFixture, defaultFixtureOptions[missingFixture]); - console.log(`Done!`); - }); - - console.log('All default fixtures generated!'); -}; diff --git a/apps/stress-test/scripts/utils/getBrowsers.ts b/apps/stress-test/scripts/utils/getBrowsers.ts deleted file mode 100644 index dccf098433333..0000000000000 --- a/apps/stress-test/scripts/utils/getBrowsers.ts +++ /dev/null @@ -1,18 +0,0 @@ -import * as os from 'os'; - -type GetBrowsers = () => string[]; - -const getBrowsers: GetBrowsers = () => { - // https://github.com/Polymer/tachometer#webdriver-plugins - const browsers = ['chrome', 'firefox']; - - if (os.type() === 'Darwin') { - browsers.push('safari'); - } else if (os.type() === 'Windows_NT') { - browsers.push('edge'); - } - - return browsers; -}; - -export { getBrowsers }; diff --git a/apps/stress-test/scripts/utils/paths.ts b/apps/stress-test/scripts/utils/paths.ts deleted file mode 100644 index b3a1d5862fa12..0000000000000 --- a/apps/stress-test/scripts/utils/paths.ts +++ /dev/null @@ -1,46 +0,0 @@ -import fs from 'fs-extra'; -import { join } from 'path'; - -export const getPackageRoot: () => string = () => { - return process.cwd(); -}; - -export const getConfigDir: (scenario: string) => string = scenario => { - return join(getPackageRoot(), 'benchmarks', scenario, 'config'); -}; - -export const getResultsDir: (scenario: string) => string = scenario => { - return join(getPackageRoot(), 'benchmarks', scenario, 'results'); -}; - -export const getScenariosDir: () => string = () => { - return join(getPackageRoot(), 'scenarios'); -}; - -export const readDirJson: (dir: string) => string[] = dir => { - return fs.readdirSync(dir).filter((file: string) => file.endsWith('.json')); -}; - -export const remove: (path: string) => boolean = path => { - if (fs.pathExistsSync(path)) { - fs.removeSync(path); - return true; - } - - return false; -}; - -export const mkdirp: (path: string) => void = path => { - if (!fs.pathExistsSync(path)) { - fs.mkdirpSync(path); - } -}; - -export const ensureClean: (path: string) => void = path => { - remove(path); - mkdirp(path); -}; - -export const getFixturesDir: () => string = () => { - return join(getPackageRoot(), 'src', 'fixtures'); -}; diff --git a/apps/stress-test/scripts/utils/server.ts b/apps/stress-test/scripts/utils/server.ts deleted file mode 100644 index f39d44f457a74..0000000000000 --- a/apps/stress-test/scripts/utils/server.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { CLIServerOptions } from './types'; -import express from 'express'; -import { join } from 'path'; -import { Server } from 'http'; -import { getPackageRoot } from './paths.js'; - -const handleGracefulShutdown: (arg: unknown) => void = arg => { - console.log('Shutting down...'); - if (server && server.close) { - console.log('Closing HTTP server'); - server.close(); - process.off('uncaughtException', handleGracefulShutdown); - } - - if (arg instanceof Error) { - console.error('Error', arg); - process.exit(1); - } -}; - -let server: Server; -const startServer: (options: CLIServerOptions) => Promise = (options = {}) => { - return new Promise((resolve, reject) => { - if (server) { - return reject(new Error('Server already running.')); - } - - const { root = 'dist', port = 8080 } = options; - const rootPath = join(getPackageRoot(), root); - - const app = express(); - app.use(express.static(rootPath)); - - process.on('uncaughtException', handleGracefulShutdown); - - server = app.listen(port, () => { - console.log(`Server listening at http://localhost:${port}`); - console.log(`Serving directory: ${rootPath}`); - resolve(); - }); - }); -}; - -const stopServer = () => { - if (!server) { - throw new Error('No server running.'); - } - - server.close(); -}; - -export { startServer, stopServer }; diff --git a/apps/stress-test/scripts/utils/tachometer.ts b/apps/stress-test/scripts/utils/tachometer.ts deleted file mode 100644 index c4e40789caf55..0000000000000 --- a/apps/stress-test/scripts/utils/tachometer.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { ConfigResult } from './types'; -import { spawn } from 'child_process'; -import { ensureClean } from './paths.js'; - -type RunTachometer = (testConfigs: ConfigResult[]) => void; - -const maxAttempts = 3; - -const executeCommand = (cmd: string) => { - return new Promise((resolve, reject) => { - const tach = spawn(cmd, { shell: true }); - - tach.stdout.on('data', data => { - console.log(data.toString()); - }); - - tach.on('close', code => { - resolve(code); - }); - - tach.on('error', err => { - tach.kill(); - reject(err); - }); - }); -}; - -const runTachometer: RunTachometer = async testConfigs => { - // Everything will be going to the same results folder for a test run - const { resultsDir } = testConfigs[0]; - ensureClean(resultsDir); - - for (const testConfig of testConfigs) { - const { testFile, resultsFile } = testConfig; - console.log('\n--------------------\n'); - console.log(`Running test case "${testFile}...`); - const cmd = `tach --config ${testFile} --json-file ${resultsFile}`; - console.log(`Test command: ${cmd}`); - - let attempt = 0; - let done = false; - // Make sure we run these in sequence. - // We don't want to run several tests at once as they - // may unduly influence each other. - while (!done) { - try { - await executeCommand(cmd); - console.log(`Test complete! Results written to ${resultsFile}.`); - done = true; - } catch (err) { - if (attempt < maxAttempts) { - attempt++; - console.error(`Error running Tachometer!`); - console.error((err as Error).message); - console.log('----------'); - console.log(`Trying again. Attempt ${attempt} of ${maxAttempts}.`); - } else { - throw err; - } - } - } - } -}; - -export default runTachometer; diff --git a/apps/stress-test/scripts/utils/tree/RandomSelectorTreeNode.ts b/apps/stress-test/scripts/utils/tree/RandomSelectorTreeNode.ts deleted file mode 100644 index 3481dc455e8fd..0000000000000 --- a/apps/stress-test/scripts/utils/tree/RandomSelectorTreeNode.ts +++ /dev/null @@ -1,192 +0,0 @@ -import { LCG } from 'random-seedable'; -import { RandomSelector } from '../../../src/shared/css/RandomSelector.js'; -import { Attribute, RandomSelectorTreeNode, TreeNode, TreeNodeCreateCallback } from '../../../src/shared/tree/types'; - -const rando: LCG = new LCG(4212021); - -const coin = (pTrue: number = 0.5): boolean => rando.coin(pTrue); -const choice = (choices: T[]): T => rando.choice(choices); - -const randomSelector = new RandomSelector(); - -const chances: { [key: string]: number } = { - not: 0.05, - addClassName: 0.5, - addAttribute: 0.2, - buildDescendentSelector: 0.5, - addSibling: 0.1, - addPseudo: 0.1, - useDescendantCombinator: 0.2, - useNonMatchingSelector: 0.5, -}; - -const nonMatchingSelector = '.non-matching-selector'; - -const buildDescendentSelector = ( - node: TreeNode | null, - selector?: string, -): string => { - if (!node) { - return selector ?? ''; - } - - if (!selector) { - selector = choice(getSelectorsFromNode(node, { pseudos: false })); - } - - const parent = node.parent; - - if (!parent) { - return selector; - } - - let selectorChoices = getSelectorsFromNode(parent, { pseudos: false }); - if (coin(chances.useNonMatchingSelector)) { - selectorChoices = [...selectorChoices, nonMatchingSelector]; - } - - selector = ( - maybeNot(choice(selectorChoices)) + - (coin(chances.useDescendantCombinator) ? ' > ' : ' ') + - selector - ).trim(); - - if (coin(chances.buildDescendentSelector)) { - selector = buildDescendentSelector(node.parent, selector); - } - - return selector; -}; - -const getNodeClassNames = () => { - const nodeSelectors = [randomSelector.randomSelector(['class'])]; - if (coin(chances.addClassName)) { - nodeSelectors.push(randomSelector.randomSelector(['class'])); - } - - return nodeSelectors; -}; - -const maybeNot = (selector: string): string => { - if (coin(chances.not)) { - return `:not(${selector})`; - } - - return selector; -}; - -const getAttributes = () => { - const attributes = [] as Attribute[]; - if (coin(chances.addAttribute)) { - const selector = randomSelector.randomSelector(['attribute-name', 'attribute-value']); - const [key, value] = selector.replace(/(\[|\])/g, '').split('='); - attributes.push({ key, value, selector }); - } - - return attributes; -}; - -const getSiblingSelectors = ( - parent: TreeNode | null, - node: TreeNode, -) => { - const siblings = [] as string[]; - - if (parent && coin(chances.addSibling)) { - const combinator = choice(['nth-child', '~', '+']); - if (combinator === 'nth-child') { - siblings.push(randomSelector.randomSelector(['nth-child'])); - } else { - const sibling = choice(parent.children); - if (!sibling) { - return siblings; - } - const siblingSelectorType = choice(['classNames', 'attribute']); - let siblingSelector; - if (siblingSelectorType === 'classNames') { - siblingSelector = choice(sibling.value.classNames) ?? '*'; - } else { - siblingSelector = choice(sibling.value.attributes)?.selector ?? '*'; - } - - const nodeSelectorType = choice(['classNames', 'attribute']); - let nodeSelector; - if (nodeSelectorType === 'classNames') { - nodeSelector = choice(node.value.classNames) ?? '*'; - } else { - nodeSelector = choice(node.value.attributes)?.selector ?? '*'; - } - siblings.push(`${siblingSelector} ${combinator} ${nodeSelector}`); - } - } - - return siblings; -}; - -const getPseudoSelectors = () => { - const pseudo = [] as string[]; - - if (coin(chances.addPsuedo)) { - pseudo.push(randomSelector.randomSelector(['pseudo-element'])); - } - - return pseudo; -}; - -type IncludeOptions = { - [k in keyof RandomSelectorTreeNode]?: boolean; -}; -const getSelectorsFromNode = (node: TreeNode, include?: IncludeOptions): string[] => { - const { classNames = true, attributes = true, siblings = true, pseudos = true } = include ?? {}; - - let selectors = [] as string[]; - - if (classNames) { - selectors = selectors.concat(...node.value.classNames); - } - - if (attributes) { - selectors = selectors.concat(...node.value.attributes.map(attr => attr.selector)); - } - - if (siblings) { - selectors = selectors.concat(...node.value.siblings); - } - - if (pseudos) { - selectors = selectors.concat(...node.value.pseudos); - } - - return selectors; -}; - -export type RandomSelectorTreeCreator = (selectors: string[]) => TreeNodeCreateCallback; - -export const selectorTreeCreator: RandomSelectorTreeCreator = selectors => { - const createSelectorTree: TreeNodeCreateCallback = (parent, depth, breadth) => { - const node = { - value: { - name: `${depth}-${breadth}`, - classNames: getNodeClassNames(), - attributes: getAttributes(), - siblings: [] as string[], - pseudos: getPseudoSelectors(), - }, - children: [], - parent, - }; - - node.value.siblings = getSiblingSelectors(parent, node); - - if (coin(chances.buildDescendentSelector)) { - const descendentSelector = buildDescendentSelector(node); - selectors.push(descendentSelector); - } else { - selectors.push(...getSelectorsFromNode(node)); - } - - return node; - }; - - return createSelectorTree; -}; diff --git a/apps/stress-test/scripts/utils/tree/RandomTree.ts b/apps/stress-test/scripts/utils/tree/RandomTree.ts deleted file mode 100644 index 6c83d6922b9e2..0000000000000 --- a/apps/stress-test/scripts/utils/tree/RandomTree.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { TreeNode, TreeNodeCreateCallback } from '../../../src/shared/tree/types'; -import { TestTreeFixture } from '../../../src/shared/utils/testUtils.js'; -import { LCG } from 'random-seedable'; - -const defaultSeed = 4212021; - -type TreeParams = { - minDepth?: number; - maxDepth?: number; - minBreadth?: number; - maxBreadth?: number; - seed?: number; - targetSize?: number; -}; - -export class RandomTree { - private numNodes: number; - private minDepth: number; - private maxDepth: number; - private minBreadth: number; - private maxBreadth: number; - private targetSize: number; - - private rando: LCG; - - constructor({ - minDepth = 1, - maxDepth = 15, - minBreadth = 1, - maxBreadth = 15, - seed = defaultSeed, - targetSize, - }: TreeParams = {}) { - this.minDepth = Number(minDepth); - this.maxDepth = Number(maxDepth); - this.minBreadth = Number(minBreadth); - this.maxBreadth = Number(maxBreadth); - this.targetSize = targetSize ? Number(targetSize) : Infinity; - - this.rando = new LCG(seed); - this.numNodes = 0; - } - - public build = (createNode: TreeNodeCreateCallback): TreeNode => { - this.numNodes = 1; - const root = createNode(null, 0, 0); - let tree = this._doBuild(createNode, root, 1); - while (this.numNodes < this.targetSize) { - tree = this._doBuild(createNode, root, 1); - } - - return tree; - }; - - public fromFixture = (fixture: TestTreeFixture['tree'], parent: TreeNode | null = null): TreeNode => { - const root: TreeNode = { - value: fixture.value as T, - children: [], - parent, - }; - - for (const child of fixture.children) { - root.children.push(this.fromFixture(child, root)); - } - - return root; - }; - - private _randomDepth = (max?: number): number => { - return this.rando.randRange(this.minDepth, max ?? this.maxDepth); - }; - - private _randomBreadth = (max?: number): number => { - return this.rando.randRange(this.minBreadth, max ?? this.maxBreadth); - }; - - private _doBuild = ( - createNode: TreeNodeCreateCallback, - parent: TreeNode, - currentDepth: number, - currentBreadth: number = this.maxBreadth, - ): TreeNode => { - const breadth = this._randomBreadth(currentBreadth); - const depth = this._randomDepth(Math.max(this.maxDepth - currentDepth, this.minDepth)); - - for (let i = 0; i < breadth && this.numNodes < this.targetSize; i++) { - this.numNodes++; - const node = createNode(parent, currentDepth, breadth); - - parent.children.push(node); - - if (currentDepth < depth && this.numNodes < this.targetSize) { - this._doBuild(createNode, node, currentDepth + 1); - } - } - - return parent; - }; -} diff --git a/apps/stress-test/scripts/utils/types.ts b/apps/stress-test/scripts/utils/types.ts deleted file mode 100644 index 2343ce4f0c8a0..0000000000000 --- a/apps/stress-test/scripts/utils/types.ts +++ /dev/null @@ -1,108 +0,0 @@ -export type CLIBuildFixtureOptions = { - type: 'tree'; - name: string; - options: { [key: string]: string }; - clean: boolean; -}; - -export type CLIBuildOptions = { - griffelMode: GriffelMode; - mode: WebpackMode; - verbose: boolean; - buildDeps: boolean; -}; - -export type CLIBuildTestConfigOptions = { - scenario: string; - testCases: string[]; - sizes: string[]; - browsers: string[]; - sampleSize: number; - targets: string[]; - port: number; - testOptions: { [key: string]: string }; -}; - -export type CLIDevOptions = { - griffelMode: GriffelMode; - open: boolean; - mode: WebpackMode; -}; - -export type CLIProcessResultsOptions = { - scenario: string; -}; - -export type CLIRunOptions = { - scenario: string; - testCases: string[]; - sizes: string[]; - browsers: string[]; - sampleSize: number; - targets: string[]; - useConfig: boolean; - processResults: boolean; - port: number; - root: string; - testOptions: { [key: string]: string }; -}; - -export type CLIServerOptions = { - port?: number; - root?: string; -}; - -export type CLITachometerOptions = { - scenario: string; -}; - -export type ConfigResult = { - testFile: string; - resultsFile: string; - configDir: string; - resultsDir: string; -}; - -export type ProcessedBrowserBenchmarkDifference = { - absolute: { - low: number; - high: number; - }; - percentChange: { - low: number; - high: number; - }; -}; - -export type TachometerBenchmark = { - name: string; - mean: number; - differences: (ProcessedBrowserBenchmarkDifference | null)[]; - samples: number[]; - target: string; - testCase: string; - size: string; -}; - -export type ProcessedBrowserBenchmark = TachometerBenchmark; - -export type ProcessedBrowserData = { - scenario: string; - testCases: { - [testCase: string]: { - sizes: { - [size: string]: { - browsers: { - [browser: string]: ProcessedBrowserBenchmark[]; - }; - }; - }; - }; - }; -}; - -export type GriffelMode = 'runtime' | 'buildtime' | 'extraction'; - -export type TestOptions = Record; - -export type WebpackMode = 'development' | 'production' | 'none'; diff --git a/apps/stress-test/src/components/v8/StressApp.tsx b/apps/stress-test/src/components/v8/StressApp.tsx deleted file mode 100644 index 6e3da22b363d7..0000000000000 --- a/apps/stress-test/src/components/v8/StressApp.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -import { getTestOptions } from '../../shared/utils/testOptions'; -import { performanceMeasure } from '../../shared/utils/performanceMeasure'; -import { StressContainer } from './StressContainer'; - -export const StressApp = () => { - const [numChildren, setNumChildren] = React.useState(Number(getTestOptions().numStartNodes)); - - React.useEffect(() => { - const { test, numStartNodes, numAddNodes, numRemoveNodes } = getTestOptions(); - if (test === 'add-node') { - performanceMeasure('stress', 'start'); - setNumChildren(Number(numStartNodes) + Number(numAddNodes)); - } else if (test === 'removeNode') { - performanceMeasure('stress', 'start'); - setNumChildren(Number(numStartNodes) - Number(numRemoveNodes)); - } - }, []); - - return ; -}; diff --git a/apps/stress-test/src/components/v8/StressComponent.tsx b/apps/stress-test/src/components/v8/StressComponent.tsx deleted file mode 100644 index d64faa1fc4e83..0000000000000 --- a/apps/stress-test/src/components/v8/StressComponent.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import { - mergeStyleSets, - DefaultButton, - Separator, - Checkbox, - SpinButton, - Spinner, - DefaultPalette, -} from '@fluentui/react'; - -const styles = mergeStyleSets({ - stressComponent: { - display: 'flex', - flexDirection: 'column', - rowGap: '10px', - maxWidth: '300px', - border: `1px solid ${DefaultPalette.neutralLight}`, - borderRadius: '4px', - padding: '10px', - }, -}); - -export type StressComponentProps = { - id?: string; - checked: boolean; -}; - -export const StressComponent: React.FC = ({ id = '', checked }) => { - return ( -
- A button - - - - - - - -
- ); -}; diff --git a/apps/stress-test/src/components/v8/StressContainer.tsx b/apps/stress-test/src/components/v8/StressContainer.tsx deleted file mode 100644 index 03d06fda61889..0000000000000 --- a/apps/stress-test/src/components/v8/StressContainer.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { mergeStyleSets } from '@fluentui/react'; -import * as React from 'react'; -import { injectGlobalCss } from '../../shared/css/injectStyles'; -import { getTestOptions } from '../../shared/utils/testOptions'; -import { performanceMeasure } from '../../shared/utils/performanceMeasure'; -import { StressComponent } from './StressComponent'; - -const styles = mergeStyleSets({ - container: { - display: 'grid', - gridTemplateColumns: 'repeat(3, 1fr)', - gap: '10px', - }, -}); - -export type StressContainerProps = { - numChildren?: number; -}; - -export const StressContainer: React.FC = ({ numChildren = 10 }) => { - const [checked, setChecked] = React.useState(false); - - React.useEffect(() => { - const { test } = getTestOptions(); - if (test === 'mount') { - performanceMeasure('stress', 'start'); - } else if (test === 'inject-styles') { - setTimeout(() => { - performanceMeasure('stress', 'start'); - injectGlobalCss(''); - }, 2000); - } else if (test === 'prop-update') { - setTimeout(() => { - performanceMeasure('stress', 'start'); - setChecked(true); - }, 2000); - } - }, []); - - const kids = new Array(numChildren).fill('1'); - return ( -
- {kids.map((_, index) => { - return ; - })} -
- ); -}; diff --git a/apps/stress-test/src/components/v9/StressApp.tsx b/apps/stress-test/src/components/v9/StressApp.tsx deleted file mode 100644 index 32e02e406e22f..0000000000000 --- a/apps/stress-test/src/components/v9/StressApp.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { FluentProvider, webLightTheme } from '@fluentui/react-components'; -import { getTestOptions } from '../../shared/utils/testOptions'; -import { performanceMeasure } from '../../shared/utils/performanceMeasure'; -import { StressContainer } from './StressContainer'; - -export const StressApp = () => { - const [numChildren, setNumChildren] = React.useState(Number(getTestOptions().numStartNodes)); - - React.useEffect(() => { - const { test, numStartNodes, numAddNodes, numRemoveNodes } = getTestOptions(); - if (test === 'add-node') { - performanceMeasure('stress', 'start'); - setNumChildren(Number(numStartNodes) + Number(numAddNodes)); - } else if (test === 'removeNode') { - performanceMeasure('stress', 'start'); - setNumChildren(Number(numStartNodes) - Number(numRemoveNodes)); - } - }, []); - - return ( - - - - ); -}; - -export default StressApp; diff --git a/apps/stress-test/src/components/v9/StressComponent.tsx b/apps/stress-test/src/components/v9/StressComponent.tsx deleted file mode 100644 index 2823be21c778b..0000000000000 --- a/apps/stress-test/src/components/v9/StressComponent.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from 'react'; -import { - makeStyles, - tokens, - shorthands, - Button, - Divider, - Checkbox, - Label, - SpinButton, - Spinner, -} from '@fluentui/react-components'; - -const useStyles = makeStyles({ - stressComponent: { - display: 'flex', - flexDirection: 'column', - rowGap: '10px', - maxWidth: '300px', - ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1), - ...shorthands.borderRadius(tokens.borderRadiusMedium), - ...shorthands.padding('10px'), - }, -}); - -export type StressComponentProps = { - id?: string; - checked: boolean; -}; - -export const StressComponent: React.FC = ({ id = '', checked }) => { - const styles = useStyles(); - - return ( -
- - - - - - - - - -
- ); -}; diff --git a/apps/stress-test/src/components/v9/StressContainer.tsx b/apps/stress-test/src/components/v9/StressContainer.tsx deleted file mode 100644 index caeb16cd5b744..0000000000000 --- a/apps/stress-test/src/components/v9/StressContainer.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { makeStyles, shorthands } from '@fluentui/react-components'; -import * as React from 'react'; -import { injectGlobalCss } from '../../shared/css/injectStyles'; -import { getTestOptions } from '../../shared/utils/testOptions'; -import { performanceMeasure } from '../../shared/utils/performanceMeasure'; -import { StressComponent } from './StressComponent'; - -const useStyles = makeStyles({ - container: { - display: 'grid', - gridTemplateColumns: 'repeat(3, 1fr)', - ...shorthands.gap('10px'), - }, -}); - -export type StressContainerProps = { - numChildren?: number; -}; - -export const StressContainer: React.FC = ({ numChildren = 10 }) => { - const [checked, setChecked] = React.useState(false); - - React.useEffect(() => { - const { test } = getTestOptions(); - if (test === 'mount') { - performanceMeasure('stress', 'start'); - } else if (test === 'inject-styles') { - setTimeout(() => { - performanceMeasure('stress', 'start'); - injectGlobalCss(''); - }, 2000); - } else if (test === 'prop-update') { - setTimeout(() => { - performanceMeasure('stress', 'start'); - setChecked(true); - }, 2000); - } - }, []); - - const styles = useStyles(); - - const kids = new Array(numChildren).fill('1'); - return ( -
- {kids.map((_, index) => { - return ; - })} -
- ); -}; diff --git a/apps/stress-test/src/components/wc/stressApp.ts b/apps/stress-test/src/components/wc/stressApp.ts deleted file mode 100644 index 6b390c098085c..0000000000000 --- a/apps/stress-test/src/components/wc/stressApp.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { FASTElement, customElement, attr, html, css, repeat, ValueConverter } from '@microsoft/fast-element'; -import { getTestOptions } from '../../shared/utils/testOptions'; -import { performanceMeasure } from '../../shared/utils/performanceMeasure'; -import { StressComponent } from './stressComponent'; - -const styles = css` - :host { - width: 100%; - height: 100%; - } -`; - -const template = html` - - ${repeat( - el => new Array(el.numchildren), - html` ctx.parent.checked} - >`, - )} - -`; - -const numberConverter: ValueConverter = { - toView(value: any): string { - return String(value); - }, - - fromView(value: string): number { - return Number(value); - }, -}; - -@customElement({ - name: 'stress-app', - template, - styles, -}) -export class StressApp extends FASTElement { - @attr({ converter: numberConverter }) public numchildren: number = 10; - @attr({ mode: 'boolean' }) public checked: boolean = false; - - public connectedCallback(): void { - super.connectedCallback(); - - const { test, numStartNodes, numAddNodes, numRemoveNodes } = getTestOptions(); - - if (test === 'prop-update') { - setTimeout(() => { - performanceMeasure('stress', 'start'); - this.checked = true; - }, 2000); - } else if (test === 'add-node') { - setTimeout(() => { - performanceMeasure('stress', 'start'); - this.numchildren = Number(numStartNodes) + Number(numAddNodes); - }, 2000); - } else if (test === 'remove-node') { - setTimeout(() => { - performanceMeasure('stress', 'start'); - this.numchildren = Number(numStartNodes) - Number(numRemoveNodes); - }, 2000); - } - } -} diff --git a/apps/stress-test/src/components/wc/stressComponent.ts b/apps/stress-test/src/components/wc/stressComponent.ts deleted file mode 100644 index 63a0adb9a4f94..0000000000000 --- a/apps/stress-test/src/components/wc/stressComponent.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { FASTElement, customElement, attr, html, css } from '@microsoft/fast-element'; - -const styles = css` - .stress-component { - display: flex; - flex-direction: column; - row-gap: 10px; - max-width: 300px; - border: 1px solid var(--neutral-base-color); - border-radius: 4px; - padding: 10px; - } -`; - -const template = html` -
(el.id ? 'id="' + el.id + '"' : '')}> - A button - - el.checked}>Check me out - - - - - -
-`; - -@customElement({ - name: 'stress-component', - template, - styles, -}) -export class StressComponent extends FASTElement { - @attr public id: string = ''; - @attr({ mode: 'boolean' }) public checked: boolean = false; -} diff --git a/apps/stress-test/src/components/wc/stressContainer.ts b/apps/stress-test/src/components/wc/stressContainer.ts deleted file mode 100644 index 49507d8294c14..0000000000000 --- a/apps/stress-test/src/components/wc/stressContainer.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { FASTElement, customElement, html, css } from '@microsoft/fast-element'; -import { injectGlobalCss } from '../../shared/css/injectStyles'; -import { getTestOptions } from '../../shared/utils/testOptions'; -import { performanceMeasure } from '../../shared/utils/performanceMeasure'; - -const styles = css` - :host { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 10px; - } -`; - -const template = html``; - -@customElement({ - name: 'stress-container', - template, - styles, -}) -export class StressContainer extends FASTElement { - constructor() { - super(); - } - - public connectedCallback(): void { - super.connectedCallback(); - - const { test } = getTestOptions(); - - if (test === 'mount') { - performance.mark('start'); - } - - const slot = this.shadowRoot?.querySelector('slot'); - slot?.addEventListener( - 'slotchange', - e => { - if (test === 'inject-styles') { - setTimeout(() => { - performanceMeasure('stress', 'start'); - injectGlobalCss(); - }, 2000); - return; - } - - if (test === 'mount') { - // requestPostAnimationFrame polyfill - requestAnimationFrame(() => { - addEventListener( - 'message', - () => { - performance.measure('stress', 'start'); - }, - { once: true }, - ); - postMessage('', '*'); - }); - } - }, - { once: true }, - ); - } -} diff --git a/apps/stress-test/src/fixtures/.gitignore b/apps/stress-test/src/fixtures/.gitignore deleted file mode 100644 index a6c7c2852d068..0000000000000 --- a/apps/stress-test/src/fixtures/.gitignore +++ /dev/null @@ -1 +0,0 @@ -*.js diff --git a/apps/stress-test/src/pages/v8/simple-stress/index.html b/apps/stress-test/src/pages/v8/simple-stress/index.html deleted file mode 100644 index fb88d2f33a8b7..0000000000000 --- a/apps/stress-test/src/pages/v8/simple-stress/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - v8: Simple Stress - - -
- - diff --git a/apps/stress-test/src/pages/v8/simple-stress/index.tsx b/apps/stress-test/src/pages/v8/simple-stress/index.tsx deleted file mode 100644 index 434ef712f980f..0000000000000 --- a/apps/stress-test/src/pages/v8/simple-stress/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import { initializeIcons } from '@fluentui/react'; -import { StressApp } from '../../../components/v8/StressApp'; - -initializeIcons(); - -ReactDOM.render(, document.getElementById('root')); diff --git a/apps/stress-test/src/pages/v8/stress-tree/index.html b/apps/stress-test/src/pages/v8/stress-tree/index.html deleted file mode 100644 index 9ff4031b96219..0000000000000 --- a/apps/stress-test/src/pages/v8/stress-tree/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - v8: Stress Tree - - -
- - diff --git a/apps/stress-test/src/pages/v8/stress-tree/index.tsx b/apps/stress-test/src/pages/v8/stress-tree/index.tsx deleted file mode 100644 index 055cce6a62134..0000000000000 --- a/apps/stress-test/src/pages/v8/stress-tree/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import { initializeIcons, ThemeProvider } from '@fluentui/react'; -import { getTestOptions } from '../../../shared/utils/testOptions'; -import { ReactTest } from '../../../shared/react/ReactTest'; - -initializeIcons(); - -const { fixtureName, rendererName, r } = getTestOptions(); -document.title += ' | ' + r ?? rendererName; -ReactDOM.render( - - - , - document.getElementById('root'), -); diff --git a/apps/stress-test/src/pages/v9/simple-stress/index.html b/apps/stress-test/src/pages/v9/simple-stress/index.html deleted file mode 100644 index d9054d33304c6..0000000000000 --- a/apps/stress-test/src/pages/v9/simple-stress/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - v9: Simple Stress - - -
- - diff --git a/apps/stress-test/src/pages/v9/simple-stress/index.tsx b/apps/stress-test/src/pages/v9/simple-stress/index.tsx deleted file mode 100644 index 2153e12584a7e..0000000000000 --- a/apps/stress-test/src/pages/v9/simple-stress/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import { StressApp } from '../../../components/v9/StressApp'; - -ReactDOM.render(, document.getElementById('root')); diff --git a/apps/stress-test/src/pages/v9/stress-tree/index.html b/apps/stress-test/src/pages/v9/stress-tree/index.html deleted file mode 100644 index 5d99e8898db67..0000000000000 --- a/apps/stress-test/src/pages/v9/stress-tree/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - v9: Stress Tree - - -
- - diff --git a/apps/stress-test/src/pages/v9/stress-tree/index.tsx b/apps/stress-test/src/pages/v9/stress-tree/index.tsx deleted file mode 100644 index c8b0001571dc1..0000000000000 --- a/apps/stress-test/src/pages/v9/stress-tree/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; - -import { FluentProvider, webLightTheme } from '@fluentui/react-components'; -import { ReactTest } from '../../../shared/react/ReactTest'; -import { getTestOptions } from '../../../shared/utils/testOptions'; - -const { fixtureName, rendererName, r } = getTestOptions(); -document.title += ' | ' + r ?? rendererName; -ReactDOM.render( - - - , - document.getElementById('root'), -); diff --git a/apps/stress-test/src/pages/wc/simple-stress/index.html b/apps/stress-test/src/pages/wc/simple-stress/index.html deleted file mode 100644 index 636d2b924238d..0000000000000 --- a/apps/stress-test/src/pages/wc/simple-stress/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - WC: Simple Stress - - -
- -
- - diff --git a/apps/stress-test/src/pages/wc/simple-stress/index.ts b/apps/stress-test/src/pages/wc/simple-stress/index.ts deleted file mode 100644 index ff27e60b08a27..0000000000000 --- a/apps/stress-test/src/pages/wc/simple-stress/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { - fluentButton, - fluentDivider, - fluentCheckbox, - fluentProgressRing, - fluentNumberField, - provideFluentDesignSystem, -} from '@fluentui/web-components'; -import { StressApp } from '../../../components/wc/stressApp'; -import { StressComponent } from '../../../components/wc/stressComponent'; -import { StressContainer } from '../../../components/wc/stressContainer'; -import { getTestOptions } from '../../../shared/utils/testOptions'; - -const testOptions = getTestOptions(); - -document.querySelector('stress-app')?.setAttribute('numchildren', testOptions.numStartNodes.toString()); - -provideFluentDesignSystem().register( - fluentButton(), - fluentDivider(), - fluentCheckbox(), - fluentProgressRing(), - fluentNumberField(), -); - -typeof StressApp; -typeof StressComponent; -typeof StressContainer; diff --git a/apps/stress-test/src/pages/wc/stress-tree/index.html b/apps/stress-test/src/pages/wc/stress-tree/index.html deleted file mode 100644 index c20b268b0cb78..0000000000000 --- a/apps/stress-test/src/pages/wc/stress-tree/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - WC: Stress Tree - - -
- - diff --git a/apps/stress-test/src/pages/wc/stress-tree/index.ts b/apps/stress-test/src/pages/wc/stress-tree/index.ts deleted file mode 100644 index 09d14b03269fe..0000000000000 --- a/apps/stress-test/src/pages/wc/stress-tree/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { getTestOptions } from '../../../shared/utils/testOptions'; -import { wcTest } from '../../../shared/wc/WCTest'; - -wcTest().then(testNode => { - const { r, rendererName } = getTestOptions(); - document.title += ' | ' + r ?? rendererName; - - document.querySelector('#app')?.appendChild(testNode!); -}); diff --git a/apps/stress-test/src/renderers/v8/button.tsx b/apps/stress-test/src/renderers/v8/button.tsx deleted file mode 100644 index 74ca75be0686d..0000000000000 --- a/apps/stress-test/src/renderers/v8/button.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import { DefaultButton } from '@fluentui/react'; -import { ReactSelectorTreeComponentRenderer } from '../../shared/react/types'; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v8/checkbox.tsx b/apps/stress-test/src/renderers/v8/checkbox.tsx deleted file mode 100644 index d52032c41e091..0000000000000 --- a/apps/stress-test/src/renderers/v8/checkbox.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import { Checkbox } from '@fluentui/react'; -import { ReactSelectorTreeComponentRenderer } from '../../shared/react/types'; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v8/spinButton.tsx b/apps/stress-test/src/renderers/v8/spinButton.tsx deleted file mode 100644 index 1f0db14c83fb5..0000000000000 --- a/apps/stress-test/src/renderers/v8/spinButton.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import { SpinButton } from '@fluentui/react'; -import { ReactSelectorTreeComponentRenderer } from '../../shared/react/types'; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v8/stress.tsx b/apps/stress-test/src/renderers/v8/stress.tsx deleted file mode 100644 index 4bbd00d65c589..0000000000000 --- a/apps/stress-test/src/renderers/v8/stress.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; -import { - mergeStyleSets, - DefaultButton, - Separator, - Checkbox, - SpinButton, - Spinner, - DefaultPalette, -} from '@fluentui/react'; -import { ReactSelectorTreeComponentRenderer } from '../../shared/react/types'; - -const styles = mergeStyleSets({ - stressComponent: { - display: 'flex', - flexDirection: 'column', - rowGap: '10px', - maxWidth: '300px', - border: `1px solid ${DefaultPalette.neutralLight}`, - borderRadius: '4px', - padding: '10px', - }, -}); - -export type StressComponentProps = { - id?: string; - checked: boolean; -}; - -const StressComponent: React.FC = ({ id = '', checked }) => { - return ( -
- A button - - - - - - - -
- ); -}; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v8/textField.tsx b/apps/stress-test/src/renderers/v8/textField.tsx deleted file mode 100644 index 1d0d855cfae7a..0000000000000 --- a/apps/stress-test/src/renderers/v8/textField.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import { TextField } from '@fluentui/react'; -import { ReactSelectorTreeComponentRenderer } from '../../shared/react/types'; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v8/textarea.tsx b/apps/stress-test/src/renderers/v8/textarea.tsx deleted file mode 100644 index 2dbd15db5085e..0000000000000 --- a/apps/stress-test/src/renderers/v8/textarea.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import { TextField } from '@fluentui/react'; -import { ReactSelectorTreeComponentRenderer } from '../../shared/react/types'; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v9/btn/basic.tsx b/apps/stress-test/src/renderers/v9/btn/basic.tsx deleted file mode 100644 index 0c30dbc0592ac..0000000000000 --- a/apps/stress-test/src/renderers/v9/btn/basic.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react'; -import { useRootStyles } from './styles'; -import { ReactSelectorTreeComponentRenderer } from '../../../shared/react/types'; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - const rootStyles = useRootStyles(); - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v9/btn/idiomatic.tsx b/apps/stress-test/src/renderers/v9/btn/idiomatic.tsx deleted file mode 100644 index 8d5e66f36fc80..0000000000000 --- a/apps/stress-test/src/renderers/v9/btn/idiomatic.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import { - useButton_unstable, - renderButton_unstable, - ForwardRefComponent, - ButtonProps, - ButtonState, - mergeClasses, - buttonClassNames, -} from '@fluentui/react-components'; -import { ReactSelectorTreeComponentRenderer } from '../../../shared/react/types'; -import { useRootStyles, useRootDisabledStyles } from './styles'; - -const useButtonIdiomaticOverrideStyles = (state: ButtonState): ButtonState => { - const rootStyles = useRootStyles(); - const rootDisabledStyles = useRootDisabledStyles(); - - const { disabled, disabledFocusable } = state; - - state.root.className = mergeClasses( - buttonClassNames.root, - rootStyles.base, - rootStyles.highContrast, - (disabled || disabledFocusable) && rootDisabledStyles.base, - (disabled || disabledFocusable) && rootDisabledStyles.highContrast, - state.root.className, - ); - - return state; -}; - -const ButtonIdiomaticOverride: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useButton_unstable(props, ref); - - useButtonIdiomaticOverrideStyles(state); - - return renderButton_unstable(state); -}) as ForwardRefComponent; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return {`${node.value.name}, ${index}`}; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v9/btn/override.tsx b/apps/stress-test/src/renderers/v9/btn/override.tsx deleted file mode 100644 index 1e4daeeed1d3e..0000000000000 --- a/apps/stress-test/src/renderers/v9/btn/override.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import { Button, ButtonProps, makeStyles, mergeClasses } from '@fluentui/react-components'; -import { ReactSelectorTreeComponentRenderer } from '../../../shared/react/types'; -import { useRootStyles, useRootDisabledStyles } from './styles'; - -const useButtonOverridesStyles = makeStyles({ - base: { - fontWeight: 'initial', - minWidth: 'initial', - fontSize: 'unset', - lineHeight: 'normal', - }, -}); - -const ButtonOverride: React.FC = props => { - const rootStyles = useRootStyles(); - const rootDisabledStyles = useRootDisabledStyles(); - const buttonOverrideStyles = useButtonOverridesStyles(); - - const { className, disabled, disabledFocusable } = props; - const applyDisabledStyles = disabled || disabledFocusable; - - return ( - ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v9/checkbox.tsx b/apps/stress-test/src/renderers/v9/checkbox.tsx deleted file mode 100644 index 976203251a208..0000000000000 --- a/apps/stress-test/src/renderers/v9/checkbox.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import { Checkbox } from '@fluentui/react-components'; -import { ReactSelectorTreeComponentRenderer } from '../../shared/react/types'; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v9/input.tsx b/apps/stress-test/src/renderers/v9/input.tsx deleted file mode 100644 index 3a36f5c647e3c..0000000000000 --- a/apps/stress-test/src/renderers/v9/input.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import { Input } from '@fluentui/react-components'; -import { ReactSelectorTreeComponentRenderer } from '../../shared/react/types'; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v9/spinButton.tsx b/apps/stress-test/src/renderers/v9/spinButton.tsx deleted file mode 100644 index c32fa1ac1785b..0000000000000 --- a/apps/stress-test/src/renderers/v9/spinButton.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import { SpinButton } from '@fluentui/react-components'; -import { ReactSelectorTreeComponentRenderer } from '../../shared/react/types'; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v9/spinButton/noPseudos.tsx b/apps/stress-test/src/renderers/v9/spinButton/noPseudos.tsx deleted file mode 100644 index c4ffd670a7753..0000000000000 --- a/apps/stress-test/src/renderers/v9/spinButton/noPseudos.tsx +++ /dev/null @@ -1,483 +0,0 @@ -import * as React from 'react'; -import { - useSpinButton_unstable, - renderSpinButton_unstable, - ForwardRefComponent, - SpinButtonProps, - SpinButtonState, - makeStyles, - mergeClasses, - shorthands, - spinButtonClassNames, - tokens, - useInputStyles_unstable, -} from '@fluentui/react-components'; -import { ReactSelectorTreeComponentRenderer } from '../../../shared/react/types'; - -const spinButtonExtraClassNames = { - buttonActive: 'fui-SpinButton__button_active', -}; - -const useRootStyles = makeStyles({ - base: { - display: 'inline-grid', - gridTemplateColumns: `1fr 24px`, - gridTemplateRows: '1fr 1fr', - columnGap: tokens.spacingHorizontalXS, - rowGap: 0, - paddingRight: 0, - position: 'relative', - // Remove the border styles from react-input - ...shorthands.border('0'), - isolation: 'isolate', - - // Apply border styles on the ::before pseudo element. - // We cannot use ::after since react-input uses that - // for the selector styles. - // Using the pseudo element allows us to place the border - // above content in the component which ensures the buttons - // line up visually with the border as expected. Without this - // there is a bit of a gap which can become very noticeable - // at high zoom or when OS zoom levels are not divisible by 2 - // (e.g., 150% on Windows in Firefox) - // This is most noticeable on the "outline" appearance which is - // also the default so it feels worth the extra ceremony to get right. - '::before': { - content: '""', - boxSizing: 'border-box', - position: 'absolute', - top: 0, - right: 0, - bottom: 0, - left: 0, - ...shorthands.borderRadius(tokens.borderRadiusMedium), - pointerEvents: 'none', - zIndex: 10, - }, - - '::after': { - right: 0, - bottom: 0, - left: 0, - zIndex: 20, - }, - }, - - outline: { - '::before': { - ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1), - borderBottomColor: tokens.colorNeutralStrokeAccessible, - }, - }, - - outlineInteractive: { - ':hover': { - '::before': { - ...shorthands.borderColor(tokens.colorNeutralStroke1Hover), - borderBottomColor: tokens.colorNeutralStrokeAccessibleHover, - }, - }, - // DO NOT add a space between the selectors! It changes the behavior of make-styles. - ':active,:focus-within': { - '::before': { - ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed), - borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed, - }, - }, - }, - - underline: { - '::before': { - ...shorthands.borderRadius(0), // corners look strange if rounded - ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible), - }, - }, - - underlineInteractive: { - ':hover': { - '::before': { - borderBottomColor: tokens.colorNeutralStrokeAccessibleHover, - }, - }, - // DO NOT add a space between the selectors! It changes the behavior of make-styles. - ':active,:focus-within': { - '::before': { - borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed, - }, - }, - }, - - filled: { - '::before': { - ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke), - }, - }, - - filledInteractive: { - // DO NOT add a space between the selectors! It changes the behavior of make-styles. - ':hover,:focus-within': { - '::before': { - // also handles pressed border color (:active) - ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive), - }, - }, - }, - - disabled: { - '@media (forced-colors: active)': { - ...shorthands.borderColor('GrayText'), - }, - }, - - outlineDisabled: { - '::before': { - ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled), - ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius - }, - }, - - underlineDisabled: { - '::before': { - ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled), - }, - }, - - filledDisabled: { - '::before': { - ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled), - }, - }, -}); - -const useInputStyles = makeStyles({ - base: { - gridColumnStart: '1', - gridColumnEnd: '2', - gridRowStart: '1', - gridRowEnd: '3', - outlineStyle: 'none', - ...shorthands.padding(0), - }, -}); - -const useButtonStyles = makeStyles({ - base: { - display: 'inline-flex', - width: '24px', - alignItems: 'center', - justifyContent: 'center', - ...shorthands.border(0), - position: 'absolute', - - outlineStyle: 'none', - height: '100%', - - ':enabled:hover': { - cursor: 'pointer', - }, - - ':active': { - outlineStyle: 'none', - }, - - ':disabled': { - cursor: 'not-allowed', - }, - }, - - incrementButton: { - gridColumnStart: '2', - gridColumnEnd: '3', - gridRowStart: '1', - gridRowEnd: '2', - ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0), - }, - - // TODO: revisit these padding numbers for aligning the icon. - // Padding values aren't perfect. - // The icon doesn't align perfectly with the Figma designs. - // It's set in a 16x16px square but the artwork is inset from that - // so I've had to compute the numbers by handle. - // Additionally the design uses fractional values so these are - // rounded to the nearest integer. - incrementButtonSmall: { - ...shorthands.padding('3px', '5px', '0px', '5px'), - }, - - incrementButtonMedium: { - ...shorthands.padding('4px', '5px', '1px', '5px'), - }, - - decrementButton: { - gridColumnStart: '2', - gridColumnEnd: '3', - gridRowStart: '2', - gridRowEnd: '3', - ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0), - }, - - decrementButtonSmall: { - ...shorthands.padding('0px', '5px', '3px', '5px'), - }, - - decrementButtonMedium: { - ...shorthands.padding('1px', '5px', '4px', '5px'), - }, - - outline: { - backgroundColor: 'transparent', - color: tokens.colorNeutralForeground3, - ':enabled': { - ':hover': { - color: tokens.colorNeutralForeground3Hover, - backgroundColor: tokens.colorSubtleBackgroundHover, - }, - ':active': { - color: tokens.colorNeutralForeground3Pressed, - backgroundColor: tokens.colorSubtleBackgroundPressed, - }, - [`&.${spinButtonExtraClassNames.buttonActive}`]: { - color: tokens.colorNeutralForeground3Pressed, - backgroundColor: tokens.colorSubtleBackgroundPressed, - }, - }, - ':disabled': { - color: tokens.colorNeutralForegroundDisabled, - }, - }, - - underline: { - backgroundColor: 'transparent', - color: tokens.colorNeutralForeground3, - ':enabled': { - ':hover': { - color: tokens.colorNeutralForeground3Hover, - backgroundColor: tokens.colorSubtleBackgroundHover, - }, - ':active': { - color: tokens.colorNeutralForeground3Pressed, - backgroundColor: tokens.colorSubtleBackgroundPressed, - }, - [`&.${spinButtonExtraClassNames.buttonActive}`]: { - color: tokens.colorNeutralForeground3Pressed, - backgroundColor: tokens.colorSubtleBackgroundPressed, - }, - }, - ':disabled': { - color: tokens.colorNeutralForegroundDisabled, - }, - }, - 'filled-darker': { - backgroundColor: 'transparent', - color: tokens.colorNeutralForeground3, - - ':enabled': { - ':hover': { - color: tokens.colorNeutralForeground3Hover, - backgroundColor: tokens.colorNeutralBackground3Hover, - }, - ':active': { - color: tokens.colorNeutralForeground3Pressed, - backgroundColor: tokens.colorNeutralBackground3Pressed, - }, - [`&.${spinButtonExtraClassNames.buttonActive}`]: { - color: tokens.colorNeutralForeground3Pressed, - backgroundColor: tokens.colorNeutralBackground3Pressed, - }, - }, - ':disabled': { - color: tokens.colorNeutralForegroundDisabled, - }, - }, - 'filled-lighter': { - backgroundColor: 'transparent', - color: tokens.colorNeutralForeground3, - - ':enabled': { - ':hover': { - color: tokens.colorNeutralForeground3Hover, - backgroundColor: tokens.colorNeutralBackground1Hover, - }, - [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: { - color: tokens.colorNeutralForeground3Pressed, - backgroundColor: tokens.colorNeutralBackground1Pressed, - }, - }, - ':disabled': { - color: tokens.colorNeutralForegroundDisabled, - }, - }, -}); - -// Cannot just disable button as they need to remain -// exposed to ATs like screen readers. -const useButtonDisabledStyles = makeStyles({ - base: { - cursor: 'not-allowed', - - ':hover': { - cursor: 'not-allowed', - }, - }, - - outline: { - color: tokens.colorNeutralForegroundDisabled, - ':enabled': { - ':hover': { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - ':active': { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - [`&.${spinButtonExtraClassNames.buttonActive}`]: { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - }, - }, - - underline: { - color: tokens.colorNeutralForegroundDisabled, - ':enabled': { - ':hover': { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - ':active': { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - [`&.${spinButtonExtraClassNames.buttonActive}`]: { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - }, - }, - - 'filled-darker': { - color: tokens.colorNeutralForegroundDisabled, - ':enabled': { - ':hover': { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - ':active': { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - [`&.${spinButtonExtraClassNames.buttonActive}`]: { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - }, - }, - - 'filled-lighter': { - color: tokens.colorNeutralForegroundDisabled, - ':enabled': { - ':hover': { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - ':active': { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - [`&.${spinButtonExtraClassNames.buttonActive}`]: { - color: tokens.colorNeutralForegroundDisabled, - backgroundColor: 'transparent', - }, - }, - }, -}); - -/** - * Apply styling to the SpinButton slots based on the state - */ -export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => { - const { appearance, atBound, spinState, size } = state; - const disabled = state.input.disabled; - const filled = appearance.startsWith('filled'); - - const rootStyles = useRootStyles(); - const buttonStyles = useButtonStyles(); - const buttonDisabledStyles = useButtonDisabledStyles(); - const inputStyles = useInputStyles(); - - // Grab the root className here so we can be sure to merge is last - const rootClassName = state.root.className; - state.root.className = undefined; - // Reuse react-input's styles without re-using the Input component. - useInputStyles_unstable({ - size, - appearance, - input: state.input, - root: state.root, - components: { - root: 'span', - input: 'input', - contentBefore: 'span', - contentAfter: 'span', - }, - }); - - state.root.className = mergeClasses( - state.root.className, // Get the classes from useInputStyles_unstable - spinButtonClassNames.root, - rootStyles.base, - appearance === 'outline' && rootStyles.outline, - appearance === 'underline' && rootStyles.underline, - filled && rootStyles.filled, - !disabled && appearance === 'outline' && rootStyles.outlineInteractive, - !disabled && appearance === 'underline' && rootStyles.underlineInteractive, - !disabled && filled && rootStyles.filledInteractive, - disabled && rootStyles.disabled, - disabled && appearance === 'outline' && rootStyles.outlineDisabled, - disabled && appearance === 'underline' && rootStyles.underlineDisabled, - disabled && filled && rootStyles.filledDisabled, - rootClassName, // Make sure any original class name is applied last - ); - - state.incrementButton.className = mergeClasses( - spinButtonClassNames.incrementButton, - spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, - buttonStyles.base, - buttonStyles.incrementButton, - buttonStyles[appearance], - size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium, - (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, - (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], - state.incrementButton.className, - ); - state.decrementButton.className = mergeClasses( - spinButtonClassNames.decrementButton, - spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, - buttonStyles.base, - buttonStyles.decrementButton, - buttonStyles[appearance], - size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium, - (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, - (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], - state.decrementButton.className, - ); - - state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base); - - return state; -}; - -const SpinButtonNoPseudos: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useSpinButton_unstable(props, ref); - - useSpinButtonStyles_unstable(state); - - return renderSpinButton_unstable(state); -}) as ForwardRefComponent; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v9/spinButton/vanilla.tsx b/apps/stress-test/src/renderers/v9/spinButton/vanilla.tsx deleted file mode 100644 index 02451c886d9f0..0000000000000 --- a/apps/stress-test/src/renderers/v9/spinButton/vanilla.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ReactSelectorTreeComponentRenderer } from '../../../shared/react/types'; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v9/stress.tsx b/apps/stress-test/src/renderers/v9/stress.tsx deleted file mode 100644 index 3915d1cee0048..0000000000000 --- a/apps/stress-test/src/renderers/v9/stress.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import * as React from 'react'; -import { - makeStyles, - tokens, - shorthands, - Button, - Divider, - Checkbox, - Label, - SpinButton, - Spinner, -} from '@fluentui/react-components'; -import { ReactSelectorTreeComponentRenderer } from '../../shared/react/types'; - -const useStyles = makeStyles({ - stressComponent: { - display: 'flex', - flexDirection: 'column', - rowGap: '10px', - maxWidth: '300px', - ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1), - ...shorthands.borderRadius(tokens.borderRadiusMedium), - ...shorthands.padding('10px'), - }, -}); - -export type StressComponentProps = { - id?: string; - checked: boolean; -}; - -const StressComponent: React.FC = ({ id = '', checked }) => { - const styles = useStyles(); - - return ( -
- - - - - - - - - -
- ); -}; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return ; -}; - -export default componentRenderer; diff --git a/apps/stress-test/src/renderers/v9/textarea.tsx b/apps/stress-test/src/renderers/v9/textarea.tsx deleted file mode 100644 index 74e67548d06c9..0000000000000 --- a/apps/stress-test/src/renderers/v9/textarea.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import { Textarea } from '@fluentui/react-components'; -import { ReactSelectorTreeComponentRenderer } from '../../shared/react/types'; - -const componentRenderer: ReactSelectorTreeComponentRenderer = (node, depth, index) => { - return