From 8d082ab303ba761f5e1bdbeabb3102730ca4dfd2 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 21 Dec 2022 22:04:44 +0100 Subject: [PATCH 1/2] refactor(scripts): separate /storybook and /webpack and introduce barell api within /webpack --- apps/public-docsite-resources/webpack.serve.config.js | 3 +-- apps/public-docsite/webpack.config.js | 2 +- apps/public-docsite/webpack.serve.config.js | 3 +-- apps/react-18-tests-v8/jest.config.js | 2 +- apps/react-18-tests-v8/webpack.config.js | 2 +- apps/ssr-tests/webpack.config.js | 3 +-- apps/theming-designer/webpack.serve.config.js | 3 +-- apps/vr-tests/.storybook/main.js | 4 ++-- packages/react-examples/.storybook/main.js | 4 ++-- packages/react-examples/.storybook/tsconfig.json | 10 ++-------- packages/react-monaco-editor/webpack.serve.config.js | 3 +-- packages/react/webpack.codepen.config.js | 3 +-- packages/react/webpack.mf.config.js | 7 +++++-- scripts/cypress/cypress.config.ts | 6 ++---- scripts/storybook/README.md | 6 +++--- scripts/storybook/tsconfig.json | 3 +-- scripts/webpack/README.md | 9 +++++++++ scripts/webpack/getResolveAlias.js | 6 +----- scripts/webpack/index.js | 5 +++++ .../storybook-webpack.config.js} | 8 +++++--- scripts/webpack/tsconfig.json | 3 ++- scripts/webpack/webpack-resources.js | 6 ++++-- 22 files changed, 52 insertions(+), 49 deletions(-) create mode 100644 scripts/webpack/README.md create mode 100644 scripts/webpack/index.js rename scripts/{storybook/webpack.config.js => webpack/storybook-webpack.config.js} (92%) diff --git a/apps/public-docsite-resources/webpack.serve.config.js b/apps/public-docsite-resources/webpack.serve.config.js index 00dfb3f33ec9c1..7a05ef9b0360a6 100644 --- a/apps/public-docsite-resources/webpack.serve.config.js +++ b/apps/public-docsite-resources/webpack.serve.config.js @@ -1,7 +1,6 @@ // @ts-check const path = require('path'); -const getResolveAlias = require('@fluentui/scripts/webpack/getResolveAlias'); -const resources = require('@fluentui/scripts/webpack/webpack-resources'); +const { resources, getResolveAlias } = require('@fluentui/scripts/webpack'); const { addMonacoWebpackConfig } = require('@fluentui/react-monaco-editor/scripts/addMonacoWebpackConfig'); const BUNDLE_NAME = 'demo-app'; diff --git a/apps/public-docsite/webpack.config.js b/apps/public-docsite/webpack.config.js index 62abf24fddceb2..369c53a4e47222 100644 --- a/apps/public-docsite/webpack.config.js +++ b/apps/public-docsite/webpack.config.js @@ -3,7 +3,7 @@ const path = require('path'); const webpack = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const resources = require('../../scripts/webpack/webpack-resources'); -const getResolveAlias = require('../../scripts/webpack/getResolveAlias'); +const { getResolveAlias } = require('../../scripts/webpack'); const { addMonacoWebpackConfig } = require('@fluentui/react-monaco-editor/scripts/addMonacoWebpackConfig'); const { getLoadSiteConfig } = require('@fluentui/public-docsite-setup/scripts/getLoadSiteConfig'); diff --git a/apps/public-docsite/webpack.serve.config.js b/apps/public-docsite/webpack.serve.config.js index 045eac2437c881..cf1a128c461c3c 100644 --- a/apps/public-docsite/webpack.serve.config.js +++ b/apps/public-docsite/webpack.serve.config.js @@ -4,8 +4,7 @@ const path = require('path'); const webpack = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const IgnoreNotFoundExportWebpackPlugin = require('ignore-not-found-export-webpack-plugin'); -const resources = require('../../scripts/webpack/webpack-resources'); -const getResolveAlias = require('../../scripts/webpack/getResolveAlias'); +const { getResolveAlias, resources } = require('../../scripts/webpack'); const { addMonacoWebpackConfig } = require('@fluentui/react-monaco-editor/scripts/addMonacoWebpackConfig'); const { getLoadSiteConfig } = require('@fluentui/public-docsite-setup/scripts/getLoadSiteConfig'); diff --git a/apps/react-18-tests-v8/jest.config.js b/apps/react-18-tests-v8/jest.config.js index 80fcf27512e6f9..f8a95eb9ae7262 100644 --- a/apps/react-18-tests-v8/jest.config.js +++ b/apps/react-18-tests-v8/jest.config.js @@ -1,7 +1,7 @@ // @ts-check const { resolveMergeStylesSerializer } = require('@fluentui/scripts/jest/jest-resources'); -const getResolveAlias = require('@fluentui/scripts/webpack/getResolveAlias'); +const { getResolveAlias } = require('@fluentui/scripts/webpack'); /** * @type {import('@jest/types').Config.InitialOptions} diff --git a/apps/react-18-tests-v8/webpack.config.js b/apps/react-18-tests-v8/webpack.config.js index 4639c0a818a7c5..b647f9b822d841 100644 --- a/apps/react-18-tests-v8/webpack.config.js +++ b/apps/react-18-tests-v8/webpack.config.js @@ -1,7 +1,7 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); -const getResolveAlias = require('@fluentui/scripts/webpack/getResolveAlias'); +const { getResolveAlias } = require('@fluentui/scripts/webpack'); module.exports = () => { return { diff --git a/apps/ssr-tests/webpack.config.js b/apps/ssr-tests/webpack.config.js index b1e0ed91b31091..23b807d596a071 100644 --- a/apps/ssr-tests/webpack.config.js +++ b/apps/ssr-tests/webpack.config.js @@ -1,5 +1,4 @@ -const resources = require('../../scripts/webpack/webpack-resources'); -const getResolveAlias = require('../../scripts/webpack/getResolveAlias'); +const { getResolveAlias, resources } = require('../../scripts/webpack'); module.exports = resources.createConfig('ssr-tests', false, { entry: './test/test.js', diff --git a/apps/theming-designer/webpack.serve.config.js b/apps/theming-designer/webpack.serve.config.js index 22b2cc4f95981d..92553df79fbd01 100644 --- a/apps/theming-designer/webpack.serve.config.js +++ b/apps/theming-designer/webpack.serve.config.js @@ -1,5 +1,4 @@ -const resources = require('../../scripts/webpack/webpack-resources'); -const getResolveAlias = require('../../scripts/webpack/getResolveAlias'); +const { getResolveAlias, resources } = require('../../scripts/webpack'); module.exports = resources.createServeConfig( { diff --git a/apps/vr-tests/.storybook/main.js b/apps/vr-tests/.storybook/main.js index ca7214ade7c275..f83c07bb65dbb0 100644 --- a/apps/vr-tests/.storybook/main.js +++ b/apps/vr-tests/.storybook/main.js @@ -1,4 +1,4 @@ -const custom = require('@fluentui/scripts/storybook/webpack.config'); +const { createStorybookWebpackConfig } = require('@fluentui/scripts/webpack'); module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConfig} */ ({ stories: ['../src/**/*.stories.tsx'], @@ -12,7 +12,7 @@ module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConf reactDocgen: false, }, webpackFinal: config => { - return custom(config); + return createStorybookWebpackConfig(config); }, addons: ['@storybook/addon-actions'], }); diff --git a/packages/react-examples/.storybook/main.js b/packages/react-examples/.storybook/main.js index 6fef96a2c4767d..8422c114e54472 100644 --- a/packages/react-examples/.storybook/main.js +++ b/packages/react-examples/.storybook/main.js @@ -1,4 +1,4 @@ -import custom from '@fluentui/scripts/storybook/webpack.config'; +import { createStorybookWebpackConfig } from '@fluentui/scripts/webpack'; import * as path from 'path'; import { merge } from 'webpack-merge'; @@ -19,7 +19,7 @@ const config = { reactDocgen: false, }, webpackFinal: config => { - const customConfig = custom(config); + const customConfig = createStorybookWebpackConfig(config); return merge(customConfig, { module: { diff --git a/packages/react-examples/.storybook/tsconfig.json b/packages/react-examples/.storybook/tsconfig.json index c69134e6ba0f36..aa6649e1176d0b 100644 --- a/packages/react-examples/.storybook/tsconfig.json +++ b/packages/react-examples/.storybook/tsconfig.json @@ -1,17 +1,11 @@ { - "extends": "../../../tsconfig.base.json", + "extends": "../../../tsconfig.base.v8.json", "compilerOptions": { "jsx": "preserve", "noEmit": true, "allowJs": true, "checkJs": true, - "allowSyntheticDefaultImports": true, - "baseUrl": "../../..", - "paths": { - "@fluentui/scripts/storybook/webpack.config": ["scripts/storybook/webpack.config.js"], - "@fluentui/font-icons-mdl2": ["packages/font-icons-mdl2/src/index.ts"], - "@fluentui/storybook": ["packages/storybook/src/index.ts"] - } + "allowSyntheticDefaultImports": true }, "include": ["**/*.js"] } diff --git a/packages/react-monaco-editor/webpack.serve.config.js b/packages/react-monaco-editor/webpack.serve.config.js index 22b94336a33026..dc36dfdd20bf65 100644 --- a/packages/react-monaco-editor/webpack.serve.config.js +++ b/packages/react-monaco-editor/webpack.serve.config.js @@ -1,7 +1,6 @@ // @ts-check const path = require('path'); -const resources = require('../../scripts/webpack/webpack-resources'); -const getResolveAlias = require('../../scripts/webpack/getResolveAlias'); +const { getResolveAlias, resources } = require('../../scripts/webpack'); const { addMonacoWebpackConfig } = require('@fluentui/monaco-editor/scripts/addMonacoWebpackConfig'); const BUNDLE_NAME = 'demo-app'; diff --git a/packages/react/webpack.codepen.config.js b/packages/react/webpack.codepen.config.js index f47fe1fe3b1d3d..3934597350e07f 100644 --- a/packages/react/webpack.codepen.config.js +++ b/packages/react/webpack.codepen.config.js @@ -1,5 +1,4 @@ -const resources = require('../../scripts/webpack/webpack-resources'); -const getResolveAlias = require('../../scripts/webpack/getResolveAlias'); +const { getResolveAlias, resources } = require('../../scripts/webpack'); module.exports = resources.createServeConfig({ entry: './src/index.bundle.ts', diff --git a/packages/react/webpack.mf.config.js b/packages/react/webpack.mf.config.js index 7e4848d50f3910..73a71a97fa87da 100644 --- a/packages/react/webpack.mf.config.js +++ b/packages/react/webpack.mf.config.js @@ -5,8 +5,11 @@ const path = require('path'); const fs = require('fs'); const webpack = require('webpack'); -const getResolveAlias = require('@fluentui/scripts/webpack/getResolveAlias'); -const { createServeConfig } = require('@fluentui/scripts/webpack/webpack-resources'); +const { + getResolveAlias, + resources: { createServeConfig }, +} = require('@fluentui/scripts/webpack'); + const { webpackMerge } = require('just-scripts'); // These shared are known vendor dependencies for the module federation plugin diff --git a/scripts/cypress/cypress.config.ts b/scripts/cypress/cypress.config.ts index 55781205be1d3f..7330b715dbb793 100644 --- a/scripts/cypress/cypress.config.ts +++ b/scripts/cypress/cypress.config.ts @@ -5,8 +5,7 @@ import * as fs from 'fs'; import * as jju from 'jju'; import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; -// use via CJS syntax which implies `any` because , as cypress doesn't properly resolves `esModuleInterop` setting -const applyV8WebpackConfig: (config: Configuration) => Configuration = require('../storybook/webpack.config'); +import { createStorybookWebpackConfig } from '../webpack'; const isLocalRun = !process.env.DEPLOYURL; @@ -39,14 +38,13 @@ const cypressWebpackConfig = (): Configuration => { }, }; - if (isV8()) { // For v8, reuse the storybook webpack config helper to add required options for building v8, // including the `resolve.alias` config that's currently REQUIRED to make tests re-run when a // component file in @fluentui/react is modified while running in open mode. // (This is different than the v9 config because v8 doesn't use tsconfig paths, so the only way // it can respond to file edits is by using `resolve.alias`, which doesn't work with esbuild.) - return applyV8WebpackConfig(webpackConfig); + return createStorybookWebpackConfig(webpackConfig); } // For v9, use tsconfig paths and esbuild-loader diff --git a/scripts/storybook/README.md b/scripts/storybook/README.md index 1181f72d50c1e7..da614280c07c8b 100644 --- a/scripts/storybook/README.md +++ b/scripts/storybook/README.md @@ -1,8 +1,8 @@ -# Storybook utils +# Storybook -This module contains solely v9 packages storybook tools. +Utils for storybook. -> **💡 NOTE:** only exception is `webpack.config.js` that is used for v8 +> **NOTE:** This module contains solely v9 packages storybook tools. # API diff --git a/scripts/storybook/tsconfig.json b/scripts/storybook/tsconfig.json index a82da7034d9903..640ace2f0f0a9e 100644 --- a/scripts/storybook/tsconfig.json +++ b/scripts/storybook/tsconfig.json @@ -3,6 +3,5 @@ "compilerOptions": { "types": ["node", "jest"] }, - "include": ["*"], - "files": ["../../typings/ignore-not-found-export-webpack-plugin/index.d.ts"] + "include": ["*"] } diff --git a/scripts/webpack/README.md b/scripts/webpack/README.md new file mode 100644 index 00000000000000..6bfdde570a2d67 --- /dev/null +++ b/scripts/webpack/README.md @@ -0,0 +1,9 @@ +# webpack + +Webpack utils and helpers for v8 (`@fluentui/react`) packages + +## Usage + +```js +import { resources, getResolveAlias } from '@fluentui/scripts/webpack'; +``` diff --git a/scripts/webpack/getResolveAlias.js b/scripts/webpack/getResolveAlias.js index d13f7de1613a0e..bc853ae1f19a77 100644 --- a/scripts/webpack/getResolveAlias.js +++ b/scripts/webpack/getResolveAlias.js @@ -84,8 +84,4 @@ function getResolveAlias(useLib, cwd) { return alias; } -module.exports = getResolveAlias; - -if (require.main === module) { - console.log(getResolveAlias()); -} +exports.getResolveAlias = getResolveAlias; diff --git a/scripts/webpack/index.js b/scripts/webpack/index.js new file mode 100644 index 00000000000000..fec733340b6bad --- /dev/null +++ b/scripts/webpack/index.js @@ -0,0 +1,5 @@ +module.exports = { + ...require('./storybook-webpack.config'), + ...require('./getResolveAlias'), + resources: require('./webpack-resources'), +}; diff --git a/scripts/storybook/webpack.config.js b/scripts/webpack/storybook-webpack.config.js similarity index 92% rename from scripts/storybook/webpack.config.js rename to scripts/webpack/storybook-webpack.config.js index a8c63033ef1766..b33f0d7a209396 100644 --- a/scripts/storybook/webpack.config.js +++ b/scripts/webpack/storybook-webpack.config.js @@ -2,15 +2,15 @@ const IgnoreNotFoundExportWebpackPlugin = require('ignore-not-found-export-webpa const path = require('path'); const webpack = require('webpack'); -const findGitRoot = require('../monorepo/findGitRoot'); -const getResolveAlias = require('../webpack/getResolveAlias'); +const { findGitRoot } = require('../monorepo'); +const { getResolveAlias } = require('./getResolveAlias'); /** * Updates the given webpack config to include resolutions and other options for v8 packages. * @param {webpack.Configuration} config webpack config, WILL BE MUTATED * @returns {webpack.Configuration} the same object that was passed in */ -module.exports = config => { +const createStorybookWebpackConfig = config => { config.resolveLoader = { ...config.resolveLoader, modules: [ @@ -103,3 +103,5 @@ module.exports = config => { return config; }; + +exports.createStorybookWebpackConfig = createStorybookWebpackConfig; diff --git a/scripts/webpack/tsconfig.json b/scripts/webpack/tsconfig.json index 976134383808f7..15be3ffb9a544c 100644 --- a/scripts/webpack/tsconfig.json +++ b/scripts/webpack/tsconfig.json @@ -3,5 +3,6 @@ "compilerOptions": { "types": ["node"] }, - "include": ["*"] + "include": ["*"], + "files": ["../../typings/ignore-not-found-export-webpack-plugin/index.d.ts"] } diff --git a/scripts/webpack/webpack-resources.js b/scripts/webpack/webpack-resources.js index 956212b5564c63..56585c1c30d23e 100644 --- a/scripts/webpack/webpack-resources.js +++ b/scripts/webpack/webpack-resources.js @@ -14,7 +14,7 @@ const webpackVersion = /** @type {string} */ (require('webpack/package.json').ve const { merge } = require('../utils'); const { getDefaultEnvironmentVars, findGitRoot } = require('../monorepo'); -const getResolveAlias = require('./getResolveAlias'); +const { getResolveAlias } = require('./getResolveAlias'); console.log(`Webpack version: ${webpackVersion}`); @@ -33,7 +33,7 @@ const cssRule = { */ const target = ['web', 'es5']; -module.exports = { +const api = { webpack, /** Get the list of node_modules directories where loaders should be resolved */ @@ -314,6 +314,8 @@ module.exports = { }, }; +module.exports = api; + /** * * @param {string} bundleName From be47b9a8871f4ac1172b4719cc768cf7b8f8f6a8 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 21 Dec 2022 22:34:13 +0100 Subject: [PATCH 2/2] generate change files --- ...luentui-react-83b1e053-10c3-427f-9ebe-159992e6ca02.json | 7 +++++++ ...monaco-editor-cc0e10b0-dc27-4b7c-af7f-bcae8d5c671a.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-83b1e053-10c3-427f-9ebe-159992e6ca02.json create mode 100644 change/@fluentui-react-monaco-editor-cc0e10b0-dc27-4b7c-af7f-bcae8d5c671a.json diff --git a/change/@fluentui-react-83b1e053-10c3-427f-9ebe-159992e6ca02.json b/change/@fluentui-react-83b1e053-10c3-427f-9ebe-159992e6ca02.json new file mode 100644 index 00000000000000..346ecaa35cfa92 --- /dev/null +++ b/change/@fluentui-react-83b1e053-10c3-427f-9ebe-159992e6ca02.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "refactor(scripts): separate /storybook and /webpack and introduce barell api within /webpack", + "packageName": "@fluentui/react", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-monaco-editor-cc0e10b0-dc27-4b7c-af7f-bcae8d5c671a.json b/change/@fluentui-react-monaco-editor-cc0e10b0-dc27-4b7c-af7f-bcae8d5c671a.json new file mode 100644 index 00000000000000..f3dd6cf0124c2d --- /dev/null +++ b/change/@fluentui-react-monaco-editor-cc0e10b0-dc27-4b7c-af7f-bcae8d5c671a.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "refactor(scripts): separate /storybook and /webpack and introduce barell api within /webpack", + "packageName": "@fluentui/react-monaco-editor", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +}