refactor(scripts): separate /storybook and /webpack and introduce barrel api within /webpack

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';

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');
 

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');
 

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}

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 {

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',

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(
   {

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'],
 });

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"
+}

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"
+}

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: {

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"]
 }

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';

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',

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

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

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
 

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": ["*"]
 }

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';
+```

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;

scripts/webpack/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+  ...require('./storybook-webpack.config'),
+  ...require('./getResolveAlias'),
+  resources: require('./webpack-resources'),
+};

scripts/storybook/webpack.config.js → 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;

scripts/webpack/tsconfig.json

@@ -3,5 +3,6 @@
   "compilerOptions": {
     "types": ["node"]
   },
-  "include": ["*"]
+  "include": ["*"],
+  "files": ["../../typings/ignore-not-found-export-webpack-plugin/index.d.ts"]
 }

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