feat(tools): scripts and generator updates to enable SWC transpilatio…

…n for v9 packages (#26527)

* chore: add swc/cli as dev dep

* feat(migrate-converged-pkg): implement setup to add swcrc config file

* feat(scripts): add swc.ts file which runs SWC CLI

* feat(scripts): add just-script preset build:react-components to be used by v9 packages to transpile based on browser matrix

* feat(migrate-converged-pkg): setup just config file to map just-scripts build to new build:react-components task

* test(migrate-converged-pkg): add test cases for added behaviors

* fix: deduplicate graceful-fs

* fix: deduplicate semver

* fix(migrate-converged-pkg): add justConfig to projectConfig paths

* feat: simplify v9 compilation flow with swc

* fixup! feat: simplify v9 compilation flow with swc

* fixup! fixup! feat: simplify v9 compilation flow with swc

* chore: update yarn.lock

* nit: remove unintended prettier changes

* fix: use babel-plugin-module-resolver version 4.1.0 which works with node 14 and above

* chore: manually dedupe resolve package

* chore: add .swcrc to files v-build owns

* chore: cleanup just preset.ts of unused code

* chore: cleanup commented out code

* chore: update yarn.lock after master merge

* feat: add monorepo root .babelrc-v9.json file and update migrate-converged-pkg generator to EXTEND that file within each respective v9 babelrc.json file

* chore: update yarn.lock

* fix(migrate-converged-generator): add react useBuiltIns config to swcrc to reduce bundle size

* test(migrate-converged): update test

* chore: add bugfixes: true to swcrc file to suppress bundle size increase caused by rest parameters being buggy in safari

* nit: remove ecma target from swcrc since it does nothing, browserlist targets always take precedence

* nit: use optional chaining instead of bang operator for just config task

* chore: add runtime:classic to swcrc

* test: update test to reflect swcrc addition

* fix: replace useBuiltIns with useSpread to spread react props instead of using Object.assign

---------

Co-authored-by: Martin Hochel <[email protected]>

.babelrc-v9.json

@@ -0,0 +1,23 @@
+{
+  "presets": [
+    [
+      "@griffel",
+      {
+        "babelOptions": {
+          "plugins": [
+            [
+              "babel-plugin-module-resolver",
+              {
+                "root": ["../../../"],
+                "alias": {
+                  "@fluentui/tokens": "packages/tokens/lib/index.js",
+                  "^@fluentui/(?!react-icons)(.+)": "packages/react-components/\\1/lib/index.js"
+                }
+              }
+            ]
+          ]
+        }
+      }
+    ]
+  ]
+}

.github/CODEOWNERS

@@ -292,3 +292,4 @@ packages/react-experiments/src/components/TileList @ThomasMichon
 **/cypress.config.ts @microsoft/fluentui-react-build
 **/api-extractor.json @microsoft/fluentui-react-build
 **/api-extractor.unstable.json @microsoft/fluentui-react-build
+**/.swcrc @microsoft/fluentui-react-build

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.3.30",
     "@swc/helpers": "0.4.14",
     "@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",

scripts/tasks/src/babel.ts

@@ -1,8 +1,9 @@
+import fs from 'fs';
+import path from 'path';
+
 import { BabelFileResult, transformAsync } from '@babel/core';
 import * as glob from 'glob';
-import fs from 'fs';
 import { logger } from 'just-scripts';
-import path from 'path';
 
 const EOL_REGEX = /\r?\n/g;
 
@@ -11,6 +12,10 @@ function addSourceMappingUrl(code: string, loc: string): string {
   return code + '\n//# sourceMappingURL=' + path.basename(loc);
 }
 
+export function hasBabel() {
+  return fs.existsSync(path.join(process.cwd(), '.babelrc.json'));
+}
+
 export async function babel() {
   const files = glob.sync('{lib,lib-commonjs}/**/*.js');
 

scripts/tasks/src/generate-api.ts

@@ -0,0 +1,17 @@
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+import { series } from 'just-scripts';
+
+import { apiExtractor } from './api-extractor';
+
+const execAsync = promisify(exec);
+
+export function generateApi() {
+  return series(generateTypeDeclarations, apiExtractor);
+}
+
+function generateTypeDeclarations() {
+  const cmd = 'tsc -p ./tsconfig.lib.json --emitDeclarationOnly';
+  return execAsync(cmd);
+}

scripts/tasks/src/presets.ts

@@ -5,18 +5,20 @@ import { isConvergedPackage, shipsAMD } from '@fluentui/scripts-monorepo';
 import { addResolvePath, condition, option, parallel, series, task } from 'just-scripts';
 
 import { apiExtractor } from './api-extractor';
-import { getJustArgv } from './argv';
-import { babel } from './babel';
+import { JustArgs, getJustArgv } from './argv';
+import { babel, hasBabel } from './babel';
 import { clean } from './clean';
 import { copy, copyCompiled } from './copy';
 import { eslint } from './eslint';
+import { generateApi } from './generate-api';
 import { jest as jestTask, jestWatch } from './jest';
 import { lintImportTaskAll, lintImportTaskAmdOnly } from './lint-imports';
 import { postprocessTask } from './postprocess';
 import { postprocessAmdTask } from './postprocess-amd';
 import { prettier } from './prettier';
-import { sass } from './sass';
+import { hasSass, sass } from './sass';
 import { buildStorybookTask, startStorybookTask } from './storybook';
+import { swc } from './swc';
 import { ts } from './ts';
 import { webpack, webpackDevServer } from './webpack';
 
@@ -69,6 +71,7 @@ export function preset() {
   task('storybook:start', startStorybookTask());
   task('storybook:build', buildStorybookTask());
   task('babel:postprocess', babel);
+  task('generate-api', generateApi);
 
   task('ts:compile', () => {
     const moduleFlag = args.module;
@@ -93,7 +96,7 @@ export function preset() {
       'ts:compile',
       'copy-compiled',
       'ts:postprocess',
-      condition('babel:postprocess', () => fs.existsSync(path.join(process.cwd(), '.babelrc.json'))),
+      condition('babel:postprocess', () => hasBabel()),
     );
   });
 
@@ -104,6 +107,19 @@ export function preset() {
 
   task('lint', 'eslint');
 
+  task('swc:commonjs', swc.commonjs);
+  task('swc:esm', swc.esm);
+  task('swc:amd', swc.amd);
+
+  task('swc:compile', () => {
+    const moduleFlag = args.module;
+    return series(
+      'swc:esm',
+      condition('babel:postprocess', () => hasBabel()),
+      resolveModuleCompilation(moduleFlag),
+    );
+  });
+
   task('code-style', series('prettier', 'lint'));
 
   task('dev:storybook', series('storybook:start'));
@@ -124,10 +140,34 @@ export function preset() {
     ),
   ).cached!();
 
+  task('build:react-components', () => {
+    return series(
+      'clean',
+      'copy',
+      condition('sass', () => hasSass()),
+      parallel('swc:compile', 'generate-api'),
+    );
+  }).cached!();
+
   task(
     'bundle',
     condition('webpack', () => fs.existsSync(path.join(process.cwd(), 'webpack.config.js'))),
   );
+
+  function resolveModuleCompilation(moduleFlag?: JustArgs['module']) {
+    // default behaviour
+    if (!moduleFlag) {
+      return parallel(
+        'swc:commonjs',
+        condition('swc:amd', () => !!args.production && !isConvergedPackage()),
+      );
+    }
+
+    return parallel(
+      condition('swc:commonjs', () => moduleFlag.cjs),
+      condition('swc:amd', () => moduleFlag.amd),
+    );
+  }
 }
 
 if (process.cwd() === __dirname) {

scripts/tasks/src/sass.ts

@@ -1,4 +1,5 @@
 import * as path from 'path';
+
 import * as glob from 'glob';
 import { sassTask } from 'just-scripts';
 import postcssModules from 'postcss-modules';
@@ -37,10 +38,14 @@ function getJSON(cssFileName: string, json: Record<string, string>) {
   _fileNameToClassMap[path.resolve(cssFileName)] = json;
 }
 
+export function hasSass() {
+  return glob.sync(path.join(process.cwd(), 'src/**/*.scss')).length > 0;
+}
+
 export function sass() {
   // small optimization: if there are no sass files, the task does nothing
   // (skip actually calling sassTask which must parse several extra dependencies)
-  if (!glob.sync(path.join(process.cwd(), 'src/**/*.scss')).length) {
+  if (!hasSass()) {
     return () => undefined;
   }
 

scripts/tasks/src/swc.ts

@@ -0,0 +1,55 @@
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+import type { Options as SwcOptions } from '@swc/core';
+import { logger } from 'just-scripts';
+
+const execAsync = promisify(exec);
+
+type Options = SwcOptions & { module: { type: 'es6' | 'commonjs' | 'amd' } };
+
+function swcCli(options: Options) {
+  const { outputPath, module } = options;
+  const swcCliBin = 'npx swc';
+  const sourceDirMap = {
+    es6: 'src',
+    commonjs: 'lib',
+    amd: 'lib',
+  };
+  const sourceDir = sourceDirMap[options.module.type];
+
+  const cmd = `${swcCliBin} ${sourceDir} --out-dir ${outputPath} --config module.type=${module?.type}`;
+  logger.info(`Running swc CLI: ${cmd}`);
+
+  return execAsync(cmd);
+}
+
+export const swc = {
+  commonjs: () => {
+    const options: Options = {
+      configFile: true,
+      outputPath: 'lib-commonjs',
+      module: { type: 'commonjs' },
+    };
+
+    return swcCli(options);
+  },
+  esm: () => {
+    const options: Options = {
+      configFile: true,
+      outputPath: 'lib',
+      module: { type: 'es6' },
+    };
+
+    return swcCli(options);
+  },
+  amd: () => {
+    const options: Options = {
+      configFile: true,
+      outputPath: 'lib-amd',
+      module: { type: 'amd' },
+    };
+
+    return swcCli(options);
+  },
+};