From dbfb85eb2ad7881681563d6964c795ab60803fe9 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Tue, 24 Jan 2023 12:54:42 +0100 Subject: [PATCH 1/5] feat(scripts-storybook): implement createPathAliasesConfig util for creating tsconfig with whole repo path aliases --- scripts/storybook/src/index.d.ts | 8 ++++++- scripts/storybook/src/utils.js | 41 ++++++++++++++++++++++++++++++-- 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/scripts/storybook/src/index.d.ts b/scripts/storybook/src/index.d.ts index 24a05405586b2e..8ed81d616695de 100644 --- a/scripts/storybook/src/index.d.ts +++ b/scripts/storybook/src/index.d.ts @@ -1 +1,7 @@ -export { getPackageStoriesGlob, getCodesandboxBabelOptions, loadWorkspaceAddon, registerTsPaths } from './utils'; +export { + getPackageStoriesGlob, + getCodesandboxBabelOptions, + loadWorkspaceAddon, + registerTsPaths, + createPathAliasesConfig, +} from './utils'; diff --git a/scripts/storybook/src/utils.js b/scripts/storybook/src/utils.js index abba3169d490bc..f568565738550d 100644 --- a/scripts/storybook/src/utils.js +++ b/scripts/storybook/src/utils.js @@ -2,8 +2,7 @@ const fs = require('fs'); const path = require('path'); const { isConvergedPackage, getAllPackageInfo, getProjectMetadata } = require('@fluentui/scripts-monorepo'); -const { stripIndents, offsetFromRoot } = require('@nrwl/devkit'); -const { workspaceRoot } = require('nx/src/utils/app-root'); +const { stripIndents, offsetFromRoot, workspaceRoot, readJsonFile, writeJsonFile } = require('@nrwl/devkit'); const semver = require('semver'); const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); @@ -206,7 +205,45 @@ function registerTsPaths(options) { return config; } +function createPathAliasesConfig() { + const { tsConfigAllPath } = createMergedTsConfig(); + const tsPaths = new TsconfigPathsPlugin({ + configFile: tsConfigAllPath, + }); + + return { tsPaths }; +} + +function createMergedTsConfig() { + const rootPath = workspaceRoot; + const baseConfigs = { + v0: readJsonFile(path.join(rootPath, 'tsconfig.base.v0.json')), + v8: readJsonFile(path.join(rootPath, 'tsconfig.base.v8.json')), + v9: readJsonFile(path.join(rootPath, 'tsconfig.base.json')), + }; + const mergedTsConfig = { + compilerOptions: { + moduleResolution: 'node', + forceConsistentCasingInFileNames: true, + skipLibCheck: true, + baseUrl: workspaceRoot, + paths: { + ...baseConfigs.v0.compilerOptions.paths, + ...baseConfigs.v8.compilerOptions.paths, + ...baseConfigs.v9.compilerOptions.paths, + }, + }, + }; + + const tsConfigAllPath = path.join(workspaceRoot, 'dist/tsconfig.base.all.json'); + + writeJsonFile(tsConfigAllPath, mergedTsConfig); + + return { tsConfigAllPath, mergedTsConfig }; +} + exports.getPackageStoriesGlob = getPackageStoriesGlob; exports.loadWorkspaceAddon = loadWorkspaceAddon; exports.getCodesandboxBabelOptions = getCodesandboxBabelOptions; exports.registerTsPaths = registerTsPaths; +exports.createPathAliasesConfig = createPathAliasesConfig; From 13c667a7581ea368d003ff80ea5b3935d4bd9e31 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Tue, 31 Jan 2023 10:34:39 +0100 Subject: [PATCH 2/5] chore(.storybook): replace babel-loader with swc in root storybook config --- .storybook/main.js | 41 +++++++++- package.json | 8 +- yarn.lock | 186 ++++++++++++++++++++++----------------------- 3 files changed, 134 insertions(+), 101 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index efb3b9e7fa081d..8d1d436cd93d75 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -37,6 +37,29 @@ module.exports = /** @type {Omit} */ ({ }, stories: [], addons: [ + { + name: 'storybook-addon-swc', + options: { + swcLoaderOptions: { + jsc: { + target: 'es2019', + parser: { + syntax: 'typescript', + tsx: true, + decorators: true, + dynamicImport: true, + }, + transform: { + decoratorMetadata: true, + legacyDecorator: true, + }, + keepClassNames: true, + externalHelpers: true, + loose: true, + }, + }, + }, + }, '@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-links', @@ -79,7 +102,7 @@ module.exports = /** @type {Omit} */ ({ config.module.rules.push(codesandboxRule); - overrideDefaultBabelLoader(/** @type {import("webpack").RuleSetRule[]} */ (config.module.rules)); + // overrideDefaultBabelLoader(/** @type {import("webpack").RuleSetRule[]} */ (config.module.rules)); } if ((process.env.CI || process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) && config.plugins) { @@ -114,6 +137,20 @@ function processBabelLoaderOptions(loaderConfig) { const customOptions = { customize: customLoaderPath }; Object.assign(loaderConfig, customOptions); + // tweak presets + const presets = [...(loaderConfig.presets ?? [])]; + const tsPresetIdx = presets.findIndex( + preset => typeof preset === 'string' && preset.includes('@babel/preset-typescript'), + ); + + // if (tsPresetIdx !== -1) { + // const tsPresetValue = presets[tsPresetIdx]; + // presets.splice(tsPresetIdx, 1); + + // presets.push(tsPresetValue); + // Object.assign(loaderConfig.presets, presets); + // } + return loaderConfig; } @@ -133,6 +170,8 @@ function processBabelLoaderOptions(loaderConfig) { */ function overrideDefaultBabelLoader(rules) { const loader = getBabelLoader(); + + console.log('AFTER:', { loader: JSON.stringify(loader.options.plugins, null, 2) }); processBabelLoaderOptions(loader.options); function getBabelLoader() { diff --git a/package.json b/package.json index 69a99273e3a669..c0325d6b8bf252 100644 --- a/package.json +++ b/package.json @@ -124,8 +124,8 @@ "@storybook/manager-webpack5": "6.5.15", "@storybook/react": "6.5.15", "@storybook/theming": "6.5.15", - "@swc/core": "1.2.220", - "@swc/helpers": "0.4.11", + "@swc/core": "1.3.30", + "@swc/helpers": "0.4.14", "@testing-library/dom": "8.11.3", "@testing-library/jest-dom": "5.16.1", "@testing-library/react": "12.1.2", @@ -321,6 +321,7 @@ "source-map-loader": "4.0.0", "storybook-addon-export-to-codesandbox": "0.8.1", "storybook-addon-performance": "0.16.1", + "storybook-addon-swc": "1.1.9", "storywright": "0.0.26-beta.1", "strip-ansi": "6.0.0", "style-loader": "2.0.0", @@ -377,7 +378,8 @@ "@types/jest-axe/axe-core": "4.4.3", "jest-axe/axe-core": "4.4.3", "eslint": "7.25.0", - "@mdx-js/loader/loader-utils": "~2.0.4" + "@mdx-js/loader/loader-utils": "~2.0.4", + "swc-loader": "^0.2.3" }, "syncpack": { "prod": true, diff --git a/yarn.lock b/yarn.lock index 93c1b2daf0e54c..d7bce0a9f0c855 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1317,12 +1317,12 @@ core-js-pure "^3.0.0" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": - version "7.18.3" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4" - integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug== +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": + version "7.20.13" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b" + integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA== dependencies: - regenerator-runtime "^0.13.4" + regenerator-runtime "^0.13.11" "@babel/standalone@7.18.9": version "7.18.9" @@ -4791,94 +4791,76 @@ source-map-support "^0.5.21" tslib "^2.4.1" -"@swc/core-android-arm-eabi@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-android-arm-eabi/-/core-android-arm-eabi-1.2.220.tgz#64d60daf569eacf060cb18b6d951d481bb1b2c2d" - integrity sha512-WjjQi9nEZNYeRcLbPBRSnP8PH+UlAxbEJ1SPOGSeBXhjxVYVoBfW98RdqeTBr5BRQ+6FSSD4PPvLPIp5jDn7WQ== - -"@swc/core-android-arm64@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-android-arm64/-/core-android-arm64-1.2.220.tgz#5de82a6cdc454473e141047cfc8bfec1b96def6a" - integrity sha512-Gg/rPvNpk0pBLt7gUAvZKugLdgmiMOkna38E5T3Tbzwgc8Lt8i5qT0AbwQuUOATnPCx8ahL+p27BVfvABeNnWA== - -"@swc/core-darwin-arm64@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.2.220.tgz#97031b9e72e7acc965065aeaf16d75e396e63435" - integrity sha512-C4GthYOHVuSXOGwjgkuKJqVsJHbMNLVXhfplNoNDcBYF7irBH/nYEHwYG/x2B1sqmJwCdW0e1Ss87MfRGcPVWw== - -"@swc/core-darwin-x64@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.2.220.tgz#276fba063616048829fe8b85c057cdd97664a2a8" - integrity sha512-oFVg9al5gnu9PxGMUAJHhWPvYNWY6YCCCYLGkq8ItY2PV9l00Uw8sHWov0JF1v+pHzXQknjXdpNAzOPTUaJldw== - -"@swc/core-freebsd-x64@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-freebsd-x64/-/core-freebsd-x64-1.2.220.tgz#9e999fd574b8bc439f64fa3b6d5bb1539ed394b9" - integrity sha512-JiOm7sM7sMa5c1Y8CW/yFv8VtzHN0ufFvIL6PW6YAFcNOsIOr0bd02JYKvLWMqM/8W+/XqNuevrbjiDWDpgb0Q== - -"@swc/core-linux-arm-gnueabihf@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.2.220.tgz#92f304d4894f0de3ba8c2b0e422782174cae8d9c" - integrity sha512-Jew+uez12YXzN3XiMGWHOPeBGY1xIrJtedmqBc0EaCkop1HrF8s7tCh8FY0RRYq6pCvmtbUBZ4vfAr0W9SS3QA== - -"@swc/core-linux-arm64-gnu@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.2.220.tgz#99625b0ead5d148614c37471cd09e79676ad2a96" - integrity sha512-/U4PMYXJeHOHowVm5QbqGjYOMnA66jGjGv5s3pczyzqEPHDyVV3x2YLJvSePlUKJzNK4aHybKB59wuGmwO4wfg== - -"@swc/core-linux-arm64-musl@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.2.220.tgz#14040fad59085fec6592b2f0d922a40c3bc77421" - integrity sha512-pbcN61oPrsmJyS3N+i921Z4KYlUSJEmMESTFkTtNjF0NWVF1ZqZC0+4Qx64QrOpE2V1p6HKWWtcllekiCdzpug== - -"@swc/core-linux-x64-gnu@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.2.220.tgz#e5ec498bb2c5130b3bf9022e260d6582c7229589" - integrity sha512-kBFsLrJFFw7zQkDcuXLBJ0wqbcRj6bY5yyjRiPWsK6rEXgwy+U9g6qvsdwbrHLoIKcbVzT7q0sum/ncSuQ3wfA== - -"@swc/core-linux-x64-musl@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.2.220.tgz#9df72c82dee57258f635e0090279e2b54c58895e" - integrity sha512-mLWQkvXbamUvQVh3StrAhI6b7JC8TiBbIEICnKERRxXsk/DSpJgaEuRYBNMSNLp/qayAMD4iRyW/2iq+RpSEDw== - -"@swc/core-win32-arm64-msvc@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.2.220.tgz#70ef47992c66b1a5328f80007669076bdfc5e4a8" - integrity sha512-kF9q7uSTp30krYJTap0V4MTjh4sgA2Fc2Pj9HoiEevwFW4LRux/R4oMMTIv22KUkHWG2GFCeYgJr5c/YUeZEmg== - -"@swc/core-win32-ia32-msvc@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.2.220.tgz#201e8d7f7826fd3fa52dbedb9a8e5cbffa6cc273" - integrity sha512-/A0xWnwVl3PfjE/VwmGNjdUTCevqMmrut3z+KPRpyqhyhCnUDjXkOE9FnnCbAaY6LIq49f2HdJKL7Vg67Uo1Dw== - -"@swc/core-win32-x64-msvc@1.2.220": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.2.220.tgz#441932e08922883320b6ffa8a921ad43a5edc337" - integrity sha512-f6bPnF7oACfnNT+ggZUcvvyWdAe5F+hW11o5kY74WMlnzICLP/BzumyQoXrzkDg+4WF83Rj0ckywXhtd8yT32A== - -"@swc/core@1.2.220", "@swc/core@^1.2.152": - version "1.2.220" - resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.2.220.tgz#3cc28c8cc56900c5458fbf914f31bc89ad761555" - integrity sha512-a0FNVqfpe1qaRuH05uZYJKv6OGTtsJlpxttpKOGJ7OnFtZZlhNx4riL9Q+bvhuv9JGS9vp8SwEIrTpR7rxPuUg== +"@swc/core-darwin-arm64@1.3.30": + version "1.3.30" + resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.30.tgz#fb9b20a46455f49597e760e4dfe829196e0fe12e" + integrity sha512-GZ4mZZbH77N8renK34A3Lkhl6x8z+c97SCbl43pn5E0Z0sifohA8WNhrtucKrUdid0svYibwotJzeFNpDtg7gQ== + +"@swc/core-darwin-x64@1.3.30": + version "1.3.30" + resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.3.30.tgz#2fd86123d697c024f7fe45995a3ef5a4e5e4eef0" + integrity sha512-ppGrAJmKpT3vFr2vGaxXFL8JqHsb6kSAj0dVYTNYicl3c6XOjnMiNSfu6HRbdmXt0VpFHhC5L/a7Ta89mQ1sJA== + +"@swc/core-linux-arm-gnueabihf@1.3.30": + version "1.3.30" + resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.30.tgz#a67ffdc80a63b68471bc176206237bd68576be40" + integrity sha512-XQYY/VNRnM0/779ehfMgh2poO3reOANvfzOprF8xmGK20+DxFqbMWjHhJutscQuEjLtdwk/LfgCkwmTaB1hhwg== + +"@swc/core-linux-arm64-gnu@1.3.30": + version "1.3.30" + resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.30.tgz#7f9b2f860b8abac6636b6ffb46004da4589b513f" + integrity sha512-ME4BjMYSXana0Lfswa3aQW0rTdmR9wa1NGQ3t6MYLdBVm+76Xwe29JKlOfnI1iCCtcbRBoWy4dlhyuxW8DN7cw== + +"@swc/core-linux-arm64-musl@1.3.30": + version "1.3.30" + resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.30.tgz#b917db1f71b8382e033b8bcbeccd8a326747c41b" + integrity sha512-h3X9Pn1m5kuFSW8lJyDiMB4ELNZFJ+QxLva5GCxZDArQttkNeY4tMNWFcaG44xUXeywffrgjpXO7Yj2JGzmG4g== + +"@swc/core-linux-x64-gnu@1.3.30": + version "1.3.30" + resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.30.tgz#fc63a70a34d444b0a9460caeb239c630e8cf905b" + integrity sha512-vfPR8cakx5IZQSpNuXPrpkRprBdVxXsvN5JWN3fpuNVIgFFo3q8njihaItujKvePIHQwov4achfBZlm4JRitWQ== + +"@swc/core-linux-x64-musl@1.3.30": + version "1.3.30" + resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.30.tgz#07003373a8813c3b82bd8ad2c2ea500a8cd6c9cd" + integrity sha512-jtfv8N+00E2RMTVjwfTfimeqzo0B9FmbbSkzlnLvkmV8xDAPyLmX7v/xL5YiVJRLeSrlJ7DmkCSxLzpJao73dw== + +"@swc/core-win32-arm64-msvc@1.3.30": + version "1.3.30" + resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.30.tgz#473eb708d2a162dd91bca2327e540ad3be57051d" + integrity sha512-fX3T6JzS5F8JJ/UZQWrZfdml8nLuSzgA0EFKetTNa5AHh1x9ltShmlFOJ3OPpD9BKI/QcQSLxyoAjxt7NtAnaQ== + +"@swc/core-win32-ia32-msvc@1.3.30": + version "1.3.30" + resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.30.tgz#7ea1b9b9d68d91050d25baf300a119f699ccb5a7" + integrity sha512-m88NjTcVFHFAciWRWTW7NbeQPrzjKKBzSoSPukhjvKSWQNk5v6BBbTAKpymNGQssPn5WLarC2QlQzCwjyh1QLA== + +"@swc/core-win32-x64-msvc@1.3.30": + version "1.3.30" + resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.30.tgz#43bd3cd1d48a0b7659a8834e0a3e5a3322cea8ca" + integrity sha512-HsePRjbdD5XsnS8NkN+MmhtUyjF16cU3COd92DjRYKsB1rMDE51itfacBvOeZPHFV6VkrLsakubAZCMc+3d/Ag== + +"@swc/core@1.3.30", "@swc/core@^1.2.152": + version "1.3.30" + resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.3.30.tgz#f4b3b55d37f766d6246829528b123bc4c8068866" + integrity sha512-pg6GWw615EwCh4vJ5k7xll1E4WJSPeINrRvF/EPyBvNNhlXR3s6+KZevJTx3PpA5PXjprDR0aqwi0/aigSCAPA== optionalDependencies: - "@swc/core-android-arm-eabi" "1.2.220" - "@swc/core-android-arm64" "1.2.220" - "@swc/core-darwin-arm64" "1.2.220" - "@swc/core-darwin-x64" "1.2.220" - "@swc/core-freebsd-x64" "1.2.220" - "@swc/core-linux-arm-gnueabihf" "1.2.220" - "@swc/core-linux-arm64-gnu" "1.2.220" - "@swc/core-linux-arm64-musl" "1.2.220" - "@swc/core-linux-x64-gnu" "1.2.220" - "@swc/core-linux-x64-musl" "1.2.220" - "@swc/core-win32-arm64-msvc" "1.2.220" - "@swc/core-win32-ia32-msvc" "1.2.220" - "@swc/core-win32-x64-msvc" "1.2.220" - -"@swc/helpers@0.4.11": - version "0.4.11" - resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de" - integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw== + "@swc/core-darwin-arm64" "1.3.30" + "@swc/core-darwin-x64" "1.3.30" + "@swc/core-linux-arm-gnueabihf" "1.3.30" + "@swc/core-linux-arm64-gnu" "1.3.30" + "@swc/core-linux-arm64-musl" "1.3.30" + "@swc/core-linux-x64-gnu" "1.3.30" + "@swc/core-linux-x64-musl" "1.3.30" + "@swc/core-win32-arm64-msvc" "1.3.30" + "@swc/core-win32-ia32-msvc" "1.3.30" + "@swc/core-win32-x64-msvc" "1.3.30" + +"@swc/helpers@0.4.14": + version "0.4.14" + resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74" + integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw== dependencies: tslib "^2.4.0" @@ -21995,10 +21977,10 @@ regenerator-runtime@^0.11.0: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== -regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7: - version "0.13.7" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55" - integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew== +regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7: + version "0.13.11" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" + integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== regenerator-transform@^0.15.1: version "0.15.1" @@ -23559,6 +23541,16 @@ storybook-addon-performance@0.16.1: tiny-invariant "^1.1.0" xstate "^4.22.0" +storybook-addon-swc@1.1.9: + version "1.1.9" + resolved "https://registry.yarnpkg.com/storybook-addon-swc/-/storybook-addon-swc-1.1.9.tgz#9f5c583be497582475d2b25b6c1e98eb90d11eb7" + integrity sha512-JmoPzJ5RA7ytPi58r5dKcRYNEESe57ZAMzJcUqnkMOwBuq0MZvBUH6gHWZxVagQe64RitS83ZOmZEJNxxc0ZWQ== + dependencies: + "@babel/runtime" "^7.17.2" + "@swc/core" "^1.2.152" + deepmerge "^4.2.2" + swc-loader "^0.1.15" + storywright@0.0.26-beta.1: version "0.0.26-beta.1" resolved "https://registry.yarnpkg.com/storywright/-/storywright-0.0.26-beta.1.tgz#2ded8936ae7f9495a85efa8a206660fef69298a4" @@ -24041,7 +24033,7 @@ swap-case@^1.1.0: lower-case "^1.1.1" upper-case "^1.1.1" -swc-loader@0.2.3: +swc-loader@0.2.3, swc-loader@^0.1.15, swc-loader@^0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/swc-loader/-/swc-loader-0.2.3.tgz#6792f1c2e4c9ae9bf9b933b3e010210e270c186d" integrity sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A== From a511e5278438605fc027147752dee0d38bd3e3a4 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Tue, 31 Jan 2023 11:23:49 +0100 Subject: [PATCH 3/5] feat(scripts-storybook): add registerRules helper and replace tsConfigPlugins within registerTsPaths if one already exists --- scripts/storybook/src/index.d.ts | 3 ++ scripts/storybook/src/index.js | 1 + scripts/storybook/src/rules.js | 58 ++++++++++++++++++++++++++++++++ scripts/storybook/src/utils.js | 40 +++++++++++++++++----- 4 files changed, 94 insertions(+), 8 deletions(-) create mode 100644 scripts/storybook/src/rules.js diff --git a/scripts/storybook/src/index.d.ts b/scripts/storybook/src/index.d.ts index 8ed81d616695de..994917d939b35e 100644 --- a/scripts/storybook/src/index.d.ts +++ b/scripts/storybook/src/index.d.ts @@ -3,5 +3,8 @@ export { getCodesandboxBabelOptions, loadWorkspaceAddon, registerTsPaths, + registerRules, createPathAliasesConfig, } from './utils'; + +export * as rules from './rules'; diff --git a/scripts/storybook/src/index.js b/scripts/storybook/src/index.js index 0e2bf4edd8a014..02502ecebf3567 100644 --- a/scripts/storybook/src/index.js +++ b/scripts/storybook/src/index.js @@ -1,3 +1,4 @@ module.exports = { ...require('./utils'), + rules: require('./rules'), }; diff --git a/scripts/storybook/src/rules.js b/scripts/storybook/src/rules.js new file mode 100644 index 00000000000000..ce4ee6f0c13d5d --- /dev/null +++ b/scripts/storybook/src/rules.js @@ -0,0 +1,58 @@ +/** + * v8 uses SCSS/CSS modules + * @type {import("webpack").RuleSetRule} + */ +const scssRule = { + test: /\.scss$/, + enforce: 'pre', + exclude: [/node_modules/], + use: [ + { + // creates style nodes from JS strings + loader: '@microsoft/loader-load-themed-styles', + }, + { + // translates CSS into CommonJS + loader: 'css-loader', + options: { + esModule: false, + modules: true, + importLoaders: 2, + }, + }, + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: ['autoprefixer'], + }, + }, + }, + { + loader: 'sass-loader', + }, + ], +}; + +/** + * + * @type {import("webpack").RuleSetRule} + */ +const griffelRule = { + test: /\.tsx?$/, + exclude: [/node_modules/], + enforce: 'post', + use: [ + { + loader: '@griffel/webpack-loader', + options: { + babelOptions: { + presets: ['@babel/preset-typescript'], + }, + }, + }, + ], +}; + +exports.scssRule = scssRule; +exports.griffelRule = griffelRule; diff --git a/scripts/storybook/src/utils.js b/scripts/storybook/src/utils.js index f568565738550d..773755092461f5 100644 --- a/scripts/storybook/src/utils.js +++ b/scripts/storybook/src/utils.js @@ -190,7 +190,7 @@ function getPackageStoriesGlob(options) { * register TsconfigPathsPlugin to webpack config * @param {Object} options * @param {string} options.tsConfigPath - absolute path to tsconfig that contains path aliases - * @param {import('webpack').Configuration} options.config + * @param {import('webpack').Configuration} options.config - webpack config * @returns */ function registerTsPaths(options) { @@ -201,21 +201,46 @@ function registerTsPaths(options) { config.resolve = config.resolve ?? {}; config.resolve.plugins = config.resolve.plugins ?? []; + + // remove existing to prevent multiple tspaths plugin + config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof TsconfigPathsPlugin)); + config.resolve.plugins.push(tsPaths); + + return config; +} + +/** + * + * register custom Webpack Rules to webpack config + * @param {Object} options + * @param {import('webpack').RuleSetRule[]} options.rules - webpack rules + * @param {import('webpack').Configuration} options.config - webpack config + * @returns + */ +function registerRules(options) { + const { config, rules } = options; + config.module = config.module ?? {}; + config.module.rules = config.module.rules ?? []; + config.module.rules.push(...rules); + return config; } +/** + * Create tsconfig.json with merged "compilerOptions.paths" from v0,v8,v9 tsconfigs. + * + * Main purpose of this is to be used for build-less DX in webpack in tandem with {@link registerTsPaths} + * @returns + */ function createPathAliasesConfig() { const { tsConfigAllPath } = createMergedTsConfig(); - const tsPaths = new TsconfigPathsPlugin({ - configFile: tsConfigAllPath, - }); - - return { tsPaths }; + return { tsConfigAllPath }; } function createMergedTsConfig() { const rootPath = workspaceRoot; + const tsConfigAllPath = path.join(rootPath, 'dist/tsconfig.base.all.json'); const baseConfigs = { v0: readJsonFile(path.join(rootPath, 'tsconfig.base.v0.json')), v8: readJsonFile(path.join(rootPath, 'tsconfig.base.v8.json')), @@ -235,8 +260,6 @@ function createMergedTsConfig() { }, }; - const tsConfigAllPath = path.join(workspaceRoot, 'dist/tsconfig.base.all.json'); - writeJsonFile(tsConfigAllPath, mergedTsConfig); return { tsConfigAllPath, mergedTsConfig }; @@ -246,4 +269,5 @@ exports.getPackageStoriesGlob = getPackageStoriesGlob; exports.loadWorkspaceAddon = loadWorkspaceAddon; exports.getCodesandboxBabelOptions = getCodesandboxBabelOptions; exports.registerTsPaths = registerTsPaths; +exports.registerRules = registerRules; exports.createPathAliasesConfig = createPathAliasesConfig; From 6dee5ba5a8c489b2d6ef1005c40dfeaf4c8c24fb Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Tue, 31 Jan 2023 11:26:10 +0100 Subject: [PATCH 4/5] chore(scripts-storybook): move logic from monorepo root /.storybook to package boundary --- .storybook/main.js | 119 +-------------- scripts/storybook/src/index.d.ts | 2 +- scripts/storybook/src/index.js | 17 ++- .../storybook/src/loaders}/custom-loader.js | 6 + scripts/storybook/src/rules.js | 8 ++ scripts/storybook/src/rules.spec.ts | 36 +++++ scripts/storybook/src/utils.js | 136 +++++++++++++++--- 7 files changed, 190 insertions(+), 134 deletions(-) rename {.storybook => scripts/storybook/src/loaders}/custom-loader.js (75%) create mode 100644 scripts/storybook/src/rules.spec.ts diff --git a/.storybook/main.js b/.storybook/main.js index 8d1d436cd93d75..f9d47235bccc96 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,8 +1,7 @@ const path = require('path'); const fs = require('fs'); -const exportToCodesandboxAddon = require('storybook-addon-export-to-codesandbox'); -const { loadWorkspaceAddon, getCodesandboxBabelOptions, registerTsPaths } = require('@fluentui/scripts-storybook'); +const { loadWorkspaceAddon, registerTsPaths, registerRules, rules } = require('@fluentui/scripts-storybook'); const tsConfigPath = path.resolve(__dirname, '../tsconfig.base.json'); @@ -20,14 +19,6 @@ const tsConfigPath = path.resolve(__dirname, '../tsconfig.base.json'); * } StorybookConfig */ -/** - * @typedef {{loader: string; options: { [index: string]: any }}} LoaderObjectDef - */ - -/** - * @typedef {import('@babel/core').TransformOptions & Partial<{customize: string | null}>} BabelLoaderOptions - */ - const previewHeadTemplate = fs.readFileSync(path.resolve(__dirname, 'preview-head-template.html'), 'utf8'); module.exports = /** @type {Omit} */ ({ @@ -39,7 +30,7 @@ module.exports = /** @type {Omit} */ ({ addons: [ { name: 'storybook-addon-swc', - options: { + options: /** @type {import('storybook-addon-swc').StoryBookAddonSwcOptions} */ ({ swcLoaderOptions: { jsc: { target: 'es2019', @@ -58,7 +49,7 @@ module.exports = /** @type {Omit} */ ({ loose: true, }, }, - }, + }), }, '@storybook/addon-essentials', '@storybook/addon-a11y', @@ -77,33 +68,8 @@ module.exports = /** @type {Omit} */ ({ loadWorkspaceAddon('@fluentui/react-storybook-addon', { tsConfigPath }), ], webpackFinal: config => { - registerTsPaths({ config, tsConfigPath }); - - if (config.module && config.module.rules) { - /** - * @type {import("webpack").RuleSetRule} - */ - const codesandboxRule = { - /** - * why the usage of 'post' ? - we need to run this loader after all storybook webpack rules/loaders have been executed. - * while we can use Array.prototype.unshift to "override" the indexes this approach is more declarative without additional hacks. - */ - enforce: 'post', - test: /\.stories\.tsx$/, - include: /stories/, - exclude: /node_modules/, - use: { - loader: 'babel-loader', - options: processBabelLoaderOptions({ - plugins: [[exportToCodesandboxAddon.babelPlugin, getCodesandboxBabelOptions()]], - }), - }, - }; - - config.module.rules.push(codesandboxRule); - - // overrideDefaultBabelLoader(/** @type {import("webpack").RuleSetRule[]} */ (config.module.rules)); - } + registerTsPaths({ config, configFile: tsConfigPath }); + registerRules({ config, rules: [rules.codesandboxRule] }); if ((process.env.CI || process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) && config.plugins) { // Disable ProgressPlugin in PR/CI builds to reduce log verbosity (warnings and errors are still logged) @@ -123,78 +89,3 @@ module.exports = /** @type {Omit} */ ({ */ previewHead: head => head + previewHeadTemplate, }); - -/** - * Adds custom config to any `babel-loader` usage. Needs to be used on all manually added rules with babel-loader to webpack configuration. - * - * Why is this needed: - * - `options.babelrc` is ignored by `babel-loader` thus we need to use `customize` api to exclude specific babel presets/plugins - * - * @param {BabelLoaderOptions} loaderConfig - */ -function processBabelLoaderOptions(loaderConfig) { - const customLoaderPath = path.resolve(__dirname, './custom-loader.js'); - const customOptions = { customize: customLoaderPath }; - Object.assign(loaderConfig, customOptions); - - // tweak presets - const presets = [...(loaderConfig.presets ?? [])]; - const tsPresetIdx = presets.findIndex( - preset => typeof preset === 'string' && preset.includes('@babel/preset-typescript'), - ); - - // if (tsPresetIdx !== -1) { - // const tsPresetValue = presets[tsPresetIdx]; - // presets.splice(tsPresetIdx, 1); - - // presets.push(tsPresetValue); - // Object.assign(loaderConfig.presets, presets); - // } - - return loaderConfig; -} - -/** - * Overrides storybooks babel-loader setup - * - * We might remove this once we'll came up with robust solution (or proper behaviors will be added to babel-loader). For more context @see https://github.com/microsoft/fluentui/issues/18775 - * - * Note: - * - this function mutates `rules` argument which is a reference to `modules.rules` webpack config property - * - to print used babel-loader config run: `yarn start-storybook --no-manager-cache --debug-webpack` and look for - * webpack rule set containing both: - * - `test: /\.(mjs|tsx?|jsx?)$/` - * - `node_modules/babel-loader/lib/index.js` as `loader` within module.rules - * - * @param {import("webpack").RuleSetRule[]} rules - */ -function overrideDefaultBabelLoader(rules) { - const loader = getBabelLoader(); - - console.log('AFTER:', { loader: JSON.stringify(loader.options.plugins, null, 2) }); - processBabelLoaderOptions(loader.options); - - function getBabelLoader() { - const ruleIdx = rules.findIndex(rule => { - return String(/** @type {import("webpack").RuleSetRule}*/ (rule).test) === '/\\.(mjs|tsx?|jsx?)$/'; - }); - - const rule = /** @type {import("webpack").RuleSetRule}*/ (rules[ruleIdx]); - - if (!Array.isArray(rule.use)) { - throw new Error('storybook webpack rules changed'); - } - - const loaderIdx = rule.use.findIndex(loaderConfig => { - return /** @type {LoaderObjectDef} */ (loaderConfig).loader.includes('babel-loader'); - }); - - const loader = /** @type {LoaderObjectDef}*/ (rule.use[loaderIdx]); - - if (!Object.prototype.hasOwnProperty.call(loader, 'options')) { - throw new Error('storybook webpack #module.rules changed!'); - } - - return loader; - } -} diff --git a/scripts/storybook/src/index.d.ts b/scripts/storybook/src/index.d.ts index 994917d939b35e..3b549d3d4dbff5 100644 --- a/scripts/storybook/src/index.d.ts +++ b/scripts/storybook/src/index.d.ts @@ -1,10 +1,10 @@ export { getPackageStoriesGlob, - getCodesandboxBabelOptions, loadWorkspaceAddon, registerTsPaths, registerRules, createPathAliasesConfig, + overrideDefaultBabelLoader, } from './utils'; export * as rules from './rules'; diff --git a/scripts/storybook/src/index.js b/scripts/storybook/src/index.js index 02502ecebf3567..7f12318ec27922 100644 --- a/scripts/storybook/src/index.js +++ b/scripts/storybook/src/index.js @@ -1,4 +1,17 @@ +const rules = require('./rules'); +const { + createPathAliasesConfig, + getPackageStoriesGlob, + loadWorkspaceAddon, + registerRules, + registerTsPaths, +} = require('./utils'); + module.exports = { - ...require('./utils'), - rules: require('./rules'), + createPathAliasesConfig, + getPackageStoriesGlob, + loadWorkspaceAddon, + registerRules, + registerTsPaths, + rules, }; diff --git a/.storybook/custom-loader.js b/scripts/storybook/src/loaders/custom-loader.js similarity index 75% rename from .storybook/custom-loader.js rename to scripts/storybook/src/loaders/custom-loader.js index 1973163b93043d..61437b7e9a26f2 100644 --- a/.storybook/custom-loader.js +++ b/scripts/storybook/src/loaders/custom-loader.js @@ -1,5 +1,11 @@ const excludePresets = ['@griffel']; +/** + * Custom babel loader used with [`customize` babel-loader config](https://github.com/babel/babel-loader#customized-loader) + * The customize prop is being set by {@link ./../utils#processBabelLoaderOptions} + * + * @returns + */ module.exports = () => { return { /** diff --git a/scripts/storybook/src/rules.js b/scripts/storybook/src/rules.js index ce4ee6f0c13d5d..8e2116b5e79604 100644 --- a/scripts/storybook/src/rules.js +++ b/scripts/storybook/src/rules.js @@ -1,3 +1,5 @@ +const { _createCodesandboxRule } = require('./utils'); + /** * v8 uses SCSS/CSS modules * @type {import("webpack").RuleSetRule} @@ -54,5 +56,11 @@ const griffelRule = { ], }; +/** + * @type {import("webpack").RuleSetRule} + */ +const codesandboxRule = _createCodesandboxRule(); + exports.scssRule = scssRule; exports.griffelRule = griffelRule; +exports.codesandboxRule = codesandboxRule; diff --git a/scripts/storybook/src/rules.spec.ts b/scripts/storybook/src/rules.spec.ts new file mode 100644 index 00000000000000..7d8709e3ad34d1 --- /dev/null +++ b/scripts/storybook/src/rules.spec.ts @@ -0,0 +1,36 @@ +import { getAllPackageInfo } from '@fluentui/scripts-monorepo'; +import * as semver from 'semver'; + +import { codesandboxRule } from './rules'; + +describe(`rules`, () => { + describe(`codesandbox`, () => { + it(`should generate rule definition with overridden babel loader`, () => { + const unstablePackage = Object.values(getAllPackageInfo()).find(metadata => { + return ( + metadata.packagePath.includes('packages/') && + metadata.packageJson.version.startsWith('9') && + semver.prerelease(metadata.packageJson.version) !== null + ); + }); + + const options = (codesandboxRule.use as { options: Record }).options; + expect(options).toEqual( + expect.objectContaining({ + customize: expect.stringContaining('loaders/custom-loader.js'), + plugins: [ + [ + expect.any(Function), + expect.objectContaining({ + '@fluentui/react-utilities': { replace: '@fluentui/react-components' }, + ...(unstablePackage + ? { [unstablePackage.packageJson.name]: { replace: '@fluentui/react-components/unstable' } } + : null), + }), + ], + ], + }), + ); + }); + }); +}); diff --git a/scripts/storybook/src/utils.js b/scripts/storybook/src/utils.js index 773755092461f5..c1c10f89b71d6c 100644 --- a/scripts/storybook/src/utils.js +++ b/scripts/storybook/src/utils.js @@ -4,6 +4,7 @@ const path = require('path'); const { isConvergedPackage, getAllPackageInfo, getProjectMetadata } = require('@fluentui/scripts-monorepo'); const { stripIndents, offsetFromRoot, workspaceRoot, readJsonFile, writeJsonFile } = require('@nrwl/devkit'); const semver = require('semver'); +const { babelPlugin } = require('storybook-addon-export-to-codesandbox'); const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); const loadWorkspaceAddonDefaultOptions = { workspaceRoot }; @@ -132,22 +133,44 @@ function loadWorkspaceAddon(addonName, options) { } /** - * @returns {import('storybook-addon-export-to-codesandbox').BabelPluginOptions} + * @private + * @param {ReturnType} allPackageInfo + * @returns {import("webpack").RuleSetRule} */ -function getCodesandboxBabelOptions() { - const allPackageInfo = getAllPackageInfo(); - - return Object.values(allPackageInfo).reduce((acc, cur) => { - if (isConvergedPackage({ packagePathOrJson: cur.packageJson, projectType: 'library' })) { - const isPrerelease = semver.prerelease(cur.packageJson.version) !== null; +function _createCodesandboxRule(allPackageInfo = getAllPackageInfo()) { + return { + /** + * why the usage of 'post' ? - we need to run this loader after all storybook webpack rules/loaders have been executed. + * while we can use Array.prototype.unshift to "override" the indexes this approach is more declarative without additional hacks. + */ + enforce: 'post', + test: /\.stories\.tsx$/, + include: /stories/, + exclude: /node_modules/, + use: { + loader: 'babel-loader', + options: _processBabelLoaderOptions({ + plugins: [[babelPlugin, getCodesandboxBabelOptions()]], + }), + }, + }; - acc[cur.packageJson.name] = isPrerelease - ? { replace: '@fluentui/react-components/unstable' } - : { replace: '@fluentui/react-components' }; - } + /** + * @returns {import('storybook-addon-export-to-codesandbox').BabelPluginOptions} + */ + function getCodesandboxBabelOptions() { + return Object.values(allPackageInfo).reduce((acc, cur) => { + if (isConvergedPackage({ packagePathOrJson: cur.packageJson, projectType: 'library' })) { + const isPrerelease = semver.prerelease(cur.packageJson.version) !== null; + + acc[cur.packageJson.name] = isPrerelease + ? { replace: '@fluentui/react-components/unstable' } + : { replace: '@fluentui/react-components' }; + } - return acc; - }, /** @type import('storybook-addon-export-to-codesandbox').BabelPluginOptions*/ ({})); + return acc; + }, /** @type import('storybook-addon-export-to-codesandbox').BabelPluginOptions*/ ({})); + } } /** @@ -189,14 +212,14 @@ function getPackageStoriesGlob(options) { * * register TsconfigPathsPlugin to webpack config * @param {Object} options - * @param {string} options.tsConfigPath - absolute path to tsconfig that contains path aliases + * @param {string} options.configFile - absolute path to tsconfig that contains path aliases * @param {import('webpack').Configuration} options.config - webpack config * @returns */ function registerTsPaths(options) { - const { config, tsConfigPath } = options; + const { config, configFile } = options; const tsPaths = new TsconfigPathsPlugin({ - configFile: tsConfigPath, + configFile, }); config.resolve = config.resolve ?? {}; @@ -227,6 +250,84 @@ function registerRules(options) { return config; } +/** + * @typedef {import('@babel/core').TransformOptions & Partial<{customize: string | null}>} BabelLoaderOptions + */ + +/** + * Adds custom config to any `babel-loader` usage. Needs to be used on all manually added rules with babel-loader to webpack configuration. + * + * Why is this needed: + * - `options.babelrc` is ignored by `babel-loader` thus we need to use `customize` api to exclude specific babel presets/plugins + * + * @private + * @param {BabelLoaderOptions} loaderConfig + */ +function _processBabelLoaderOptions(loaderConfig) { + const customLoaderPath = path.join(__dirname, './loaders/custom-loader.js'); + const customOptions = { customize: customLoaderPath }; + Object.assign(loaderConfig, customOptions); + + return loaderConfig; +} + +/** + * @typedef {{loader: string; options: { [index: string]: any }}} LoaderObjectDef + */ + +/** + * Overrides storybooks babel-loader setup + * + * We might remove this once we'll came up with robust solution (or proper behaviors will be added to babel-loader). For more context @see https://github.com/microsoft/fluentui/issues/18775 + * + * 📣 We don't use this override anymore as babel-loader is replaced by swc in whole webpack via `storybook-addon-swc` + * + * **Note:** + * - this function mutates `rules` argument which is a reference to `modules.rules` webpack config property + * - to print used babel-loader config run: `yarn start-storybook --no-manager-cache --debug-webpack` and look for + * webpack rule set containing both: + * - `test: /\.(mjs|tsx?|jsx?)$/` + * - `node_modules/babel-loader/lib/index.js` as `loader` within module.rules + * + * @param {Object} options + * @param {import('webpack').Configuration} options.config - webpack config + */ +function overrideDefaultBabelLoader(options) { + const { config } = options; + config.module = config.module ?? {}; + config.module.rules = config.module.rules ?? []; + + const loader = getBabelLoader(/** @type {import('webpack').RuleSetRule[]}*/ (config.module.rules)); + + _processBabelLoaderOptions(loader.options); + + function getBabelLoader(/** @type {import('webpack').RuleSetRule[]} */ rules) { + // eslint-disable-next-line no-shadow + const ruleIdx = rules.findIndex(rule => { + return String(rule.test) === '/\\.(mjs|tsx?|jsx?)$/'; + }); + + const rule = /** @type {import("webpack").RuleSetRule}*/ (rules[ruleIdx]); + + if (!Array.isArray(rule.use)) { + throw new Error('storybook webpack rules changed'); + } + + const loaderIdx = rule.use.findIndex(loaderConfig => { + return /** @type {LoaderObjectDef} */ (loaderConfig).loader.includes('babel-loader'); + }); + + // eslint-disable-next-line no-shadow + const loader = /** @type {LoaderObjectDef}*/ (rule.use[loaderIdx]); + + if (!Object.prototype.hasOwnProperty.call(loader, 'options')) { + throw new Error('storybook webpack #module.rules changed!'); + } + + return loader; + } +} + /** * Create tsconfig.json with merged "compilerOptions.paths" from v0,v8,v9 tsconfigs. * @@ -267,7 +368,8 @@ function createMergedTsConfig() { exports.getPackageStoriesGlob = getPackageStoriesGlob; exports.loadWorkspaceAddon = loadWorkspaceAddon; -exports.getCodesandboxBabelOptions = getCodesandboxBabelOptions; exports.registerTsPaths = registerTsPaths; exports.registerRules = registerRules; exports.createPathAliasesConfig = createPathAliasesConfig; +exports.overrideDefaultBabelLoader = overrideDefaultBabelLoader; +exports._createCodesandboxRule = _createCodesandboxRule; From ab0f72f156520736619f4de42639963b03486003 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Tue, 31 Jan 2023 11:30:18 +0100 Subject: [PATCH 5/5] chore(public-docsite-v9): enable build-less DX for storybook with swc --- apps/public-docsite-v9/.storybook/main.js | 17 +++++++++++++++-- apps/public-docsite-v9/README.md | 5 ++--- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js index 9a4c475b972bef..a460739ddccc70 100644 --- a/apps/public-docsite-v9/.storybook/main.js +++ b/apps/public-docsite-v9/.storybook/main.js @@ -1,5 +1,16 @@ +// @ts-check + +const { + getPackageStoriesGlob, + createPathAliasesConfig, + registerTsPaths, + rules, + registerRules, +} = require('@fluentui/scripts-storybook'); + const rootMain = require('../../../.storybook/main'); -const { getPackageStoriesGlob } = require('@fluentui/scripts-storybook'); + +const { tsConfigAllPath } = createPathAliasesConfig(); module.exports = /** @type {Omit} */ ({ ...rootMain, @@ -14,9 +25,11 @@ module.exports = /** @type {Omit { - const localConfig = { ...rootMain.webpackFinal(config, options) }; + const localConfig = /** @type config */ ({ ...rootMain.webpackFinal(config, options) }); // add your own webpack tweaks if needed + registerTsPaths({ configFile: tsConfigAllPath, config: localConfig }); + registerRules({ rules: [rules.scssRule], config: localConfig }); return localConfig; }, diff --git a/apps/public-docsite-v9/README.md b/apps/public-docsite-v9/README.md index 4bbbf7fa984dc2..4993868eb6e1ec 100644 --- a/apps/public-docsite-v9/README.md +++ b/apps/public-docsite-v9/README.md @@ -6,7 +6,6 @@ This app is official documentation for Fluentui react-components published to ht Fluent UI is a collection of projects that represent the Fluent design language in code. This website helps document the components and styles that make up Fluent UI. -## Build the website +## Start the website -1. Run `yarn lage build --to @fluentui/public-docsite-v9 --no-cache` -2. Run `yarn workspace @fluentui/public-docsite-v9 start` +Run `yarn workspace @fluentui/public-docsite-v9 start`