[TESTING] Browser matrix-based transpilation

apps/perf-test-react-components/.swcrc

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "env": {
+    "targets": {
+      "chrome": "84",
+      "edge": "84",
+      "firefox": "75",
+      "opera": "73",
+      "safari": "14.1"
+    }
+  },
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "target": "es2019",
+    "externalHelpers": true
+  },
+  "minify": false,
+  "sourceMaps": true
+}

apps/recipes-react-components/.swcrc

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "env": {
+    "targets": {
+      "chrome": "84",
+      "edge": "84",
+      "firefox": "75",
+      "opera": "73",
+      "safari": "14.1"
+    }
+  },
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "target": "es2019",
+    "externalHelpers": true
+  },
+  "minify": false,
+  "sourceMaps": true
+}

apps/ssr-tests-v9/.swcrc

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "env": {
+    "targets": {
+      "chrome": "84",
+      "edge": "84",
+      "firefox": "75",
+      "opera": "73",
+      "safari": "14.1"
+    }
+  },
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "target": "es2019",
+    "externalHelpers": true
+  },
+  "minify": false,
+  "sourceMaps": true
+}

apps/ts-minbar-test-react-components/.swcrc

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "env": {
+    "targets": {
+      "chrome": "84",
+      "edge": "84",
+      "firefox": "75",
+      "opera": "73",
+      "safari": "14.1"
+    }
+  },
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "target": "es2019",
+    "externalHelpers": true
+  },
+  "minify": false,
+  "sourceMaps": true
+}

apps/vr-tests-react-components/.storybook/main.js

@@ -1,8 +1,9 @@
 const path = require('path');
 const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
+const rootMain = require('../../../.storybook/main');
 
 module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConfig} */ ({
-  addons: ['@fluentui/react-storybook-addon'],
+  addons: [...rootMain.addons, '@fluentui/react-storybook-addon'],
 
   stories: ['../src/**/*.stories.tsx'],
   core: {

apps/vr-tests-react-components/.storybook/preview.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { setAddon } from '@storybook/react';
 import { webLightTheme, teamsHighContrastTheme, webDarkTheme } from '@fluentui/react-theme';
 import { FluentProvider } from '@fluentui/react-provider';
+import { withFluentProvider } from '@fluentui/react-storybook-addon';
 
 /**
  * @deprecated https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-setaddon
@@ -67,3 +68,5 @@ setAddon({
 
 /** @type {import("@fluentui/react-storybook-addon").FluentParameters} */
 export const parameters = { layout: 'none', mode: 'vr-test' };
+
+export const decorators = [withFluentProvider];

apps/vr-tests-react-components/.swcrc

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "env": {
+    "targets": {
+      "chrome": "84",
+      "edge": "84",
+      "firefox": "75",
+      "opera": "73",
+      "safari": "14.1"
+    }
+  },
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "target": "es2019",
+    "externalHelpers": true
+  },
+  "minify": false,
+  "sourceMaps": true
+}

package.json

@@ -124,6 +124,7 @@
     "@storybook/manager-webpack5": "6.5.15",
     "@storybook/react": "6.5.15",
     "@storybook/theming": "6.5.15",
+    "@swc/cli": "0.1.59",
     "@swc/core": "1.2.220",
     "@swc/helpers": "0.4.11",
     "@testing-library/dom": "8.11.3",
@@ -196,6 +197,7 @@
     "babel-plugin-annotate-pure-imports": "1.0.0-1",
     "babel-plugin-iife-wrap-react-components": "1.0.0-5",
     "babel-plugin-lodash": "3.3.4",
+    "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-tester": "10.1.0",
     "beachball": "2.31.0",
     "chalk": "4.1.0",
@@ -265,6 +267,7 @@
     "json-schema": "0.4.0",
     "json-stable-stringify-without-jsonify": "1.0.1",
     "just-scripts": "1.8.2",
+    "just-scripts-utils": "1.1.5",
     "lage": "1.8.8",
     "lerna": "5.5.2",
     "lerna-alias": "3.0.3-0",

packages/react-charting/src/components/DonutChart/DonutChart.base.tsx

@@ -207,7 +207,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
         // mapping data to the format Legends component needs
         const legend: ILegend = {
           title: point.legend!,
-          color: color,
+          color,
           action: () => {
             if (this.state.selectedLegend === point.legend) {
               this.setState({ selectedLegend: '' });

packages/react-charting/src/components/DonutChart/DonutChart.test.tsx

@@ -37,7 +37,7 @@ const points: IChartDataPoint[] = [
 const chartTitle = 'Stacked Bar chart example';
 
 const chartPoints: IChartProps = {
-  chartTitle: chartTitle,
+  chartTitle,
   chartData: points,
 };
 

packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx

@@ -181,7 +181,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       this._calloutAnchorPoint = point;
       this.setState({
         isCalloutVisible: true,
-        hoverValue: hoverValue,
+        hoverValue,
         lineColor: point.color!,
         legend: point.legend!,
         refSelected: currentHoveredElement!.refElement,

packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx

@@ -210,8 +210,8 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
 
       this._classNames = getClassNames(styles!, {
         theme: this.props.theme!,
-        shouldHighlight: shouldHighlight,
-        href: href,
+        shouldHighlight,
+        href,
         variant: this.props.variant,
         hideLabels: this.props.hideLabels,
       });
@@ -345,7 +345,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
           isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend!,
           calloutLegend: point.legend!,
           dataForHoverCard: pointData,
-          color: color,
+          color,
           xCalloutValue: point.xAxisCalloutData!,
           yCalloutValue: point.yAxisCalloutData!,
           dataPointCalloutProps: point,
@@ -364,9 +364,9 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     this._classNames = getClassNames(styles!, {
       legendColor: this.state.color,
       theme: theme!,
-      width: width,
+      width,
       className,
-      barHeight: barHeight,
+      barHeight,
     });
   };
 
@@ -394,7 +394,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
             }
             const legend: ILegend = {
               title: point.legend!,
-              color: color,
+              color,
               action: () => {
                 this._onClick(point.legend!);
               },
@@ -420,7 +420,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
           }
           const legend: ILegend = {
             title: point.legend!,
-            color: color,
+            color,
             action: () => {
               this._onClick(point.legend!);
             },
@@ -481,7 +481,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
         isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend!,
         calloutLegend: point.legend!,
         dataForHoverCard: pointData,
-        color: color,
+        color,
         xCalloutValue: point.xAxisCalloutData!,
         yCalloutValue: point.yAxisCalloutData!,
         dataPointCalloutProps: point,

packages/react-components/babel-preset-global-context/.swcrc

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "env": {
+    "targets": {
+      "chrome": "84",
+      "edge": "84",
+      "firefox": "75",
+      "opera": "73",
+      "safari": "14.1"
+    }
+  },
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "target": "es2019",
+    "externalHelpers": true
+  },
+  "minify": false,
+  "sourceMaps": true
+}

packages/react-components/babel-preset-global-context/package.json

@@ -36,7 +36,9 @@
     "@babel/traverse": "^7.12.13",
     "@emotion/hash": "^0.8.0",
     "find-up": "^5.0.0",
-    "tslib": "^2.1.0"
+    "tslib": "^2.1.0",
+    "@swc/core": "^1.3.24",
+    "@swc/helpers": "^0.4.11"
   },
   "peerDependencies": {
     "@fluentui/global-context": "9.0.0-beta.13"

packages/react-components/global-context/.swcrc

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "env": {
+    "targets": {
+      "chrome": "84",
+      "edge": "84",
+      "firefox": "75",
+      "opera": "73",
+      "safari": "14.1"
+    }
+  },
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "target": "es2019",
+    "externalHelpers": true
+  },
+  "minify": false,
+  "sourceMaps": true
+}

packages/react-components/global-context/package.json

@@ -33,7 +33,9 @@
   "dependencies": {
     "@fluentui/react-context-selector": "^9.1.6",
     "@fluentui/react-utilities": "^9.5.0",
-    "tslib": "^2.1.0"
+    "tslib": "^2.1.0",
+    "@swc/core": "^1.3.24",
+    "@swc/helpers": "^0.4.11"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",