feat(scripts-babel): implement v9 babel preset to properly resolve griffel module mappings (#27313)

Author: Hotell

.babelrc-v9.json

@@ -1,22 +1,9 @@
 {
   "presets": [
     [
-      "@griffel",
+      "@fluentui/scripts-babel/preset-v9",
       {
-        "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"
-                }
-              }
-            ]
-          ]
-        }
+        "tsBaseConfigPath": "./tsconfig.base.json"
       }
     ]
   ]

.github/CODEOWNERS

@@ -52,6 +52,7 @@
 /yarn.lock @microsoft/fluentui-react-build
 /*.config.js @microsoft/fluentui-react-build
 /typings @microsoft/fluentui-react-build
+/.babelrc-v9.json @microsoft/fluentui-react-build
 
 #### NX related files
 /nx.json @microsoft/fluentui-react-build

scripts/babel/jest.config.js

@@ -9,6 +9,12 @@ module.exports = {
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      isolatedModules: true,
+    },
+  },
   coverageDirectory: './coverage',
   testEnvironment: 'node',
 };

scripts/babel/preset-v9.js

@@ -0,0 +1,68 @@
+const fs = require('fs');
+const path = require('path');
+
+const { workspaceRoot } = require('@nrwl/devkit');
+
+const cwd = process.cwd();
+const rootOffset = path.relative(cwd, workspaceRoot);
+
+/**
+ *
+ * @param {{tsBaseConfigPath:string}} options
+ * @returns
+ */
+function createModuleResolverAliases(options) {
+  const { tsBaseConfigPath } = options;
+  const tsBaseConfigPathAbsolute = path.join(workspaceRoot, tsBaseConfigPath);
+  const tsConfigBase = JSON.parse(fs.readFileSync(tsBaseConfigPathAbsolute, 'utf-8'));
+
+  /**
+   * @type {Record<string,[string]>}
+   */
+  const allPathAliases = tsConfigBase.compilerOptions.paths;
+  return Object.entries(allPathAliases).reduce((acc, [packageName, aliasTuple]) => {
+    const tsSourceRoot = aliasTuple[0];
+    const jsSourceRoot = tsSourceRoot.replace('src', 'lib').replace('.ts', '.js');
+    const aliasRegex = `^${packageName}$`;
+    acc[aliasRegex] = `${rootOffset}/${jsSourceRoot}`;
+    return acc;
+  }, /** @type {Record<string,string>} */ ({}));
+}
+
+/** @type {Array<import('./types').BabelPluginItem>} */
+const presets = [];
+
+/** @type {Array<import('./types').BabelPluginItem>} */
+const plugins = [];
+
+/**
+ * @param {import('@babel/core').ConfigAPI} api
+ * @param {import('./types').BabelPresetOptions} options
+ */
+const preset = (api, options) => {
+  const moduleResolverAliasMappings = createModuleResolverAliases(options);
+  /** @type {Array<import('./types').BabelPluginItem>} */
+  const dynamicPresets = [
+    [
+      '@griffel',
+      {
+        babelOptions: {
+          plugins: [
+            [
+              'babel-plugin-module-resolver',
+              {
+                alias: moduleResolverAliasMappings,
+              },
+            ],
+          ],
+        },
+      },
+    ],
+  ];
+
+  presets.push(...dynamicPresets);
+
+  return { presets, plugins };
+};
+
+module.exports = preset;

scripts/babel/preset-v9.spec.ts

@@ -0,0 +1,44 @@
+import preset from './preset-v9';
+
+describe(`babel preset v9`, () => {
+  const babelMockedApi = {
+    assertVersion: jest.fn(),
+    caller: jest.fn(),
+    env: jest.fn(),
+    cache: {},
+    version: '0',
+  } as unknown as import('@babel/core').ConfigAPI;
+  it(`should generate module-resolve alias mappings for @griffel preset`, () => {
+    const presetConfig = preset(babelMockedApi, { tsBaseConfigPath: './tsconfig.base.json' });
+
+    const griffelPreset = presetConfig.presets.find(presetItem => presetItem[0] === '@griffel')!;
+    const griffelPresetConfig = griffelPreset[1];
+
+    expect(griffelPresetConfig).toEqual({
+      babelOptions: {
+        plugins: [
+          [
+            'babel-plugin-module-resolver',
+            {
+              alias: expect.any(Object),
+            },
+          ],
+        ],
+      },
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const alias = (griffelPresetConfig as any).babelOptions.plugins[0][1].alias;
+    const aliasesEntries = Object.entries(alias);
+
+    /**
+     * we pick 5th entry from the big list of path aliases entries. there is nothing special about it and we can pick any existing entry index.
+     * I chose to not pick first nor last. In general this is an integration test that checks if we would introduce some violation within tsconfig.base.json path aliases config
+     */
+    const aliasDeclaration = aliasesEntries[5];
+    const [aliasKey, aliasPath] = aliasDeclaration;
+
+    expect(aliasKey).toEqual(expect.stringContaining('^@fluentui/'));
+    expect(aliasPath).toEqual(expect.stringMatching(/[../]+[a-z-/]+\/lib\/index\.js/));
+  });
+});

scripts/babel/types.ts

@@ -0,0 +1,7 @@
+import type { PluginTarget } from '@babel/core';
+
+export interface BabelPresetOptions {
+  tsBaseConfigPath: string;
+}
+
+export type BabelPluginItem = [PluginTarget, Record<string, unknown>];