Skip to content

chore: migrate whole repo to webpack 5 #24542

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Hotell merged 8 commits into from
Oct 4, 2022
Merged

chore: migrate whole repo to webpack 5 #24542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
930c1b8
chore: migrate web-components to webpack5 and apply single version po…
Hotell Aug 26, 2022
e3cc1c1
chore: remove nohoist for stylis
Hotell Sep 26, 2022
9c0cd6e
chore: generate change files
Hotell Sep 26, 2022
e1aa9c5
chore: undo @storybook/html single version policy move
Hotell Sep 26, 2022
8068cdb
chore: dedup wepback 5
Hotell Sep 26, 2022
e97b540
chore: bump tsconfig-paths to resolve TS violations
Hotell Sep 26, 2022
f1b6957
chore: dedupe terser
Hotell Sep 26, 2022
88616f2
chore: update karma to run with webpack 5
Hotell Sep 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-public-docsite-setup-9acd83ab-61a3-497d-bbc0-33048cdf8ad4.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "chore: apply single version policy",
"packageName": "@fluentui/public-docsite-setup",
"email": "martinhochel@microsoft.com",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@fluentui-web-components-94178686-c003-4a62-80f6-b438a0982031.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "chore: migrate to webpack5 and apply single version policy",
"packageName": "@fluentui/web-components",
"email": "martinhochel@microsoft.com",
"dependentChangeType": "none"
}
27 changes: 14 additions & 13 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"check:change": "beachball check",
"check:modified-files": "yarn workspace @fluentui/scripts just check-for-modified-files",
"check:affected-package": "node ./scripts/monorepo/checkIfPackagesAffected.js",
"check:installed-dependencies-versions": "satisfied --skip-invalid --ignore \"prettier|angular|lit|sass|@storybook/web-components|@storybook/html|@storybook/mdx2-csf|svelte|@testing-library|vue|@cypress/react|cypress|@swc/wasm|@cactuslab/usepubsub\"",

@Hotell Hotell Sep 26, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

storybook/web-components doesnt exist - removed

"check:installed-dependencies-versions": "satisfied --skip-invalid --ignore \"prettier|angular|lit|sass|@storybook/html|@storybook/mdx2-csf|svelte|@testing-library|vue|@cypress/react|cypress|@swc/wasm|@cactuslab/usepubsub\"",
"clean": "lage clean --verbose",
"code-style": "lage code-style --verbose",
"codepen": "cd packages/react && node ../../scripts/local-codepen.js",
Expand Down Expand Up @@ -258,13 +258,21 @@
"react-is": "17.0.2",
"react-test-renderer": "17.0.2",
"request-promise-native": "1.0.9",
"rollup": "2.45.2",
"rollup-plugin-commonjs": "10.1.0",
"rollup-plugin-filesize": "8.0.2",
"rollup-plugin-node-resolve": "5.2.0",
"rollup-plugin-terser": "5.3.1",
"rollup-plugin-transform-tagged-template": "0.0.3",
"rollup-plugin-typescript2": "0.27.1",
"sass": "1.49.11",
"sass-loader": "12.4.0",
"satisfied": "^1.1.1",
"scheduler": "0.20.2",
"schema-utils": "3.1.1",
"screener-storybook": "0.23.0",
"semver": "^6.2.0",
"source-map-loader": "4.0.0",
"storybook-addon-export-to-codesandbox": "0.7.0",
"storybook-addon-performance": "0.16.1",
"strip-ansi": "6.0.0",
Expand All @@ -279,13 +287,13 @@
"ts-jest": "26.5.6",
"ts-loader": "9.3.1",
"ts-node": "10.9.1",
"tsconfig-paths": "3.9.0",
"tsconfig-paths-webpack-plugin": "3.5.2",
"tsconfig-paths": "4.1.0",

@Hotell Hotell Sep 26, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bump needed as 3.x contains incompatible type definitions with latest webpack

"tsconfig-paths-webpack-plugin": "4.0.0",
"tslib": "2.4.0",
"typescript": "4.3.5",
"webpack": "5.44.0",
"webpack": "5.74.0",
"webpack-bundle-analyzer": "4.4.2",
"webpack-cli": "4.7.2",
"webpack-cli": "4.10.0",
"webpack-dev-middleware": "4.2.0",
"webpack-dev-server": "4.7.4",
"webpack-hot-middleware": "2.25.1",
Expand All @@ -310,14 +318,7 @@
"typings"
],
"nohoist": [
"@fluentui/react-northstar-fela-renderer/stylis",
Comment thread
layershifter marked this conversation as resolved.
"@fluentui/react-northstar-emotion-renderer/@types/stylis",
"@fluentui/react-northstar-emotion-renderer/stylis",
"@fluentui/web-components/@microsoft/eslint-config-fast-dna",
"@fluentui/web-components/@storybook/html",
"@fluentui/web-components/ts-loader",
"@fluentui/web-components/ts-loader/**",
"@fluentui/web-components/webpack"
"@fluentui/web-components/@storybook/html"

@Hotell Hotell Sep 26, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is needed until we gonna use nx storybook executor or custom alias to determine framework (html/react/angular) etc

]
},
"resolutions": {
Expand Down
4 changes: 1 addition & 3 deletions packages/fluentui/local-sandbox/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@
"dependencies": {
"@fluentui/react-northstar": "^0.64.0"
},
"devDependencies": {
"source-map-loader": "2.0.0"

@Hotell Hotell Sep 26, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

single version policy

},
"devDependencies": {},
"publishConfig": {
"access": "public"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/fluentui/react-northstar-fela-renderer/src/felaStylisEnhancer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { FelaRenderer, FelaRendererChange } from './types';

// `stylis@3` is a CJS library, there are known issues with them:
// https://github.com/rollup/rollup/issues/1267#issuecomment-446681320
const Stylis = (_Stylis as any).default || _Stylis;
const Stylis: typeof import('stylis') = (_Stylis as any).default || _Stylis;

@Hotell Hotell Sep 26, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

enabling type checking

@Hotell Hotell Sep 26, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

enabling type checking


// We use Stylis only for vendor prefixing, all other capabilities are disabled
const stylis = new Stylis({
Expand Down
4 changes: 1 addition & 3 deletions packages/public-docsite-setup/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,7 @@
"license": "MIT",
"devDependencies": {
"@fluentui/eslint-plugin": "*",
"@fluentui/scripts": "^1.0.0",
"rollup": "^2.7.6",

@Hotell Hotell Sep 26, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

single version policy

"rollup-plugin-terser": "^5.3.0"
"@fluentui/scripts": "^1.0.0"
},
"dependencies": {}
}
4 changes: 2 additions & 2 deletions packages/web-components/.storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ module.exports = {
stories: ['../src/**/*.stories.@(ts|mdx)'],
staticDirs: ['../public'],
core: {
builder: 'webpack4',
builder: 'webpack5',
},
addons: [
{
Expand All @@ -25,7 +25,7 @@ module.exports = {
test: /\.ts$/,
use: [
{
loader: require.resolve('ts-loader'),
loader: 'ts-loader',
},
],
});
Expand Down
11 changes: 3 additions & 8 deletions packages/web-components/karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ module.exports = function (config) {
basePath,
browserDisconnectTimeout: 10000,
processKillTimeout: 10000,
frameworks: ['source-map-support', 'mocha'],
frameworks: ['source-map-support', 'mocha', 'webpack'],
plugins: [
require('karma-mocha'),
require('karma-mocha-reporter'),
Expand Down Expand Up @@ -65,19 +65,16 @@ module.exports = function (config) {
hints: false,
},
optimization: {
namedModules: false,

@Hotell Hotell Sep 26, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

invalid props since webpack 5 https://webpack.js.org/migrate/5/#update-outdated-options

namedChunks: false,
nodeEnv: false,
usedExports: true,
flagIncludedChunks: false,
occurrenceOrder: false,
sideEffects: true,
concatenateModules: true,
splitChunks: {
name: false,
},
runtimeChunk: false,
noEmitOnErrors: false,
emitOnErrors: true,
checkWasmTypes: false,
minimize: false,
},
Expand All @@ -89,12 +86,10 @@ module.exports = function (config) {
},
{
test: /\.js$/,
enforce: 'pre',
use: [
{
loader: 'source-map-loader',
options: {
enforce: 'pre',
},
},
],
},
Expand Down
65 changes: 26 additions & 39 deletions packages/web-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,18 @@
"clean": "node ./build/clean.js dist",
"doc": "api-extractor run --local",
"doc:ci": "api-extractor run --local",
"build": "tsc -p ./tsconfig.json && rollup -c && npm run doc",
"build": "tsc -p ./tsconfig.json && rollup -c && yarn doc",
"dev": "tsc -p ./tsconfig.json -w",
"tdd": "npm run dev & npm run test-chrome:watch",
"tdd": "yarn dev & yarn test-chrome:watch",
"prepare": "yarn clean && yarn build",
"lint": "eslint . --ext .ts",
"lint:fix": "eslint . --ext .ts --fix",
"prettier": "prettier --config ../../prettier.config.js --write 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore",
"prettier:diff": "prettier --config ../../prettier.config.js 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore --list-different",
"code-style": "npm run prettier && npm run lint",
"format": "prettier -w 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore",

@Hotell Hotell Sep 26, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

simplified aliases / aligned to use consistent vocabulary within repo

"format:check": "yarn format -c",
"code-style": "yarn format:check && yarn lint",
"start": "yarn start-storybook -p 6006 --docs",
"start-storybook": "node node_modules/@storybook/html/bin/index.js",
"build-storybook": "node node_modules/@storybook/html/bin/build.js -o ./dist/storybook --docs",
"start-storybook": "node node_modules/@storybook/html/bin/index",
"build-storybook": "node node_modules/@storybook/html/bin/build -o ./dist/storybook --docs",
"test": "yarn doc:ci && yarn test-chrome:verbose",
"test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
"test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
Expand All @@ -48,41 +48,28 @@
},
"devDependencies": {
"@storybook/html": "6.5.5",
"@types/chai": "^4.2.11",
"@types/chai-spies": "^1.0.1",
"@types/karma": "^5.0.0",
"@types/mocha": "^7.0.2",
"chai": "^4.2.0",
"@types/chai": "4.3.3",
"@types/chai-spies": "1.0.3",
"@types/karma": "6.3.3",
"@types/mocha": "7.0.2",
"chai": "4.3.6",
"chai-spies": "1.0.0",
"circular-dependency-plugin": "^5.0.2",
"eslint-plugin-import": "^2.22.1",
"esm": "^3.2.25",
"ignore-loader": "^0.1.2",
"istanbul": "^0.4.5",
"istanbul-instrumenter-loader": "^3.0.1",
"esm": "3.2.25",
"ignore-loader": "0.1.2",
"istanbul": "0.4.5",
"istanbul-instrumenter-loader": "3.0.1",
"jsdom-global": "3.0.2",
"karma": "^6.3.0",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^2.0.2",
"karma-coverage-istanbul-reporter": "^3.0.0",
"karma": "6.4.0",
"karma-chrome-launcher": "3.1.1",
"karma-coverage": "2.2.0",
"karma-coverage-istanbul-reporter": "3.0.3",
"karma-firefox-launcher": "^1.3.0",
"karma-mocha": "^2.0.1",
"karma-mocha-reporter": "^2.2.5",
"karma-source-map-support": "^1.4.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^4.0.2",
"mocha": "^7.1.2",
"rollup": "^2.41.0",
"rollup-plugin-commonjs": "^10.1.0",

@Hotell Hotell Sep 26, 2022 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all rollup* packages were propagated to single version policy approach, karma will be moved in another PR

"rollup-plugin-filesize": "^8.0.2",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^5.3.0",
"rollup-plugin-transform-tagged-template": "^0.0.3",
"rollup-plugin-typescript2": "^0.27.0",
"source-map": "^0.7.3",
"source-map-loader": "^0.2.4",
"ts-loader": "^7.0.2",
"webpack": "^4.43.0"
"karma-mocha": "2.0.1",
"karma-mocha-reporter": "2.2.5",
"karma-source-map-support": "1.4.0",
"karma-sourcemap-loader": "0.3.8",
"karma-webpack": "5.0.0",
"mocha": "7.2.0"
},
"dependencies": {
"@microsoft/fast-colors": "^5.3.0",
Expand Down
2 changes: 2 additions & 0 deletions scripts/dangerjs/checkStorybookVersions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const scriptFilename = path.relative(config.paths.base(), __filename);
* If two dependencies specified in the same package.json (the workspace root in our case) define a `bin`
* with the same name, it's **nondeterministic** which one "wins."
*
* Github Issue https://github.com/storybookjs/storybook/issues/3980#issuecomment-411328585
*
* The simplest and most reliable fix is that since `@storybook/html` is used only by web-components,
* it should be specified there, with a `nohoist` entry in the root workspace config to ensure it's
* installed under web-components rather than at the root.
Expand Down
Loading