Skip to content

Commit 11a79c2

Browse files
miroslavstastnymiroslavstastny
committed
Merge remote-tracking branch 'upstream/master' into feat/theme-updates
2 parents ecc78f1 + 02c7384 commit 11a79c2

97 files changed

Lines changed: 575 additions & 246 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/recipes-react-components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
},
1818
"dependencies": {
1919
"@fluentui/react-components": "^9.21.0",
20-
"@fluentui/react-icons": "^2.0.196",
20+
"@fluentui/react-icons": "^2.0.203",
2121
"@fluentui/react-theme": "^9.1.8",
2222
"@fluentui/react-provider": "^9.7.2",
2323
"@fluentui/react-storybook-addon": "9.0.0-rc.1",

‎apps/stress-test/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"dependencies": {
1313
"@fluentui/react": "^8.110.3",
1414
"@fluentui/react-components": "^9.21.0",
15-
"@fluentui/react-icons": "^2.0.196",
15+
"@fluentui/react-icons": "^2.0.203",
1616
"@fluentui/web-components": "^2.5.15",
1717
"@microsoft/fast-element": "^1.11.1",
1818
"afterframe": "1.0.2",

‎apps/test-bundles/just.config.ts‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,35 @@
1-
import { preset, task, resolveCwd } from '@fluentui/scripts-tasks';
1+
import * as path from 'path';
2+
import { preset, task, series } from '@fluentui/scripts-tasks';
23
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
34
// @ts-ignore - parallel-webpack has no types
45
import { run } from 'parallel-webpack';
56

7+
import { bundleSizeCollect } from './scripts/bundle-size-collect';
8+
import { mergeBundleSizes } from './scripts/merge-bundlesizes';
9+
610
preset();
711

812
// This pacakge doesn't currently have any files that are included in the eslint task
913
// (it only runs on src, not config files)
1014
task('code-style', 'prettier');
1115

16+
task('bundle-size-collect', () => {
17+
const packageName = process.env.PACKAGE ?? '';
18+
bundleSizeCollect({ packageName });
19+
});
20+
1221
task('bundle', done => {
13-
run(resolveCwd('webpack.config.js'), {}, done);
22+
const configPath = path.join(__dirname, 'webpack.config.js');
23+
const options = {};
24+
run(configPath, options, done);
1425
});
26+
27+
task('bundle-size-merge', () => {
28+
const root = path.join(__dirname, 'dist');
29+
mergeBundleSizes(
30+
[path.join(root, 'react/bundlesize.json'), path.join(root, 'react-northstar/bundlesize.json')],
31+
path.join(root, 'bundlesizes.json'),
32+
);
33+
});
34+
35+
task('bundle-size', series('bundle', 'bundle-size-collect'));

‎apps/test-bundles/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@
55
"private": true,
66
"license": "MIT",
77
"scripts": {
8-
"bundle:size": "just-scripts bundle",
8+
"bundle-size-auditor": "just-scripts bundle-size",
99
"clean": "just-scripts clean",
1010
"code-style": "just-scripts code-style",
1111
"just": "just-scripts"
1212
},
1313
"devDependencies": {
1414
"@fluentui/eslint-plugin": "*",
15-
"parallel-webpack": "^2.6.0",
1615
"@fluentui/scripts-tasks": "*",
1716
"@fluentui/scripts-webpack": "*"
1817
}

‎apps/test-bundles/scripts/bundle-size-collect.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as fs from 'fs';
2+
import * as path from 'path';
3+
4+
/**
5+
*
6+
* collates bundle size information from minified files in apps/test-bundles/dist/<packageName> and writes to apps/test-bundles/dist/<packageName>/bundlesizes.json.
7+
*
8+
* It is uploaded as an artifact by the build definition in Azure Dev Ops and used to compare baseline and PR file size information which gets reported by Size Auditor
9+
*/
10+
export function bundleSizeCollect(config: { packageName: string; filename?: string }) {
11+
const { packageName, filename: outputFilename = 'bundlesize.json' } = config;
12+
13+
if (!packageName) {
14+
throw new Error('🚨 No packageName provided! Set it via env variable name "PACKAGE"');
15+
}
16+
17+
const distRoot = path.join(__dirname, '../dist', packageName.replace('@fluentui/', ''));
18+
19+
const sizes: Record<string, number> = {};
20+
21+
const items = fs.readdirSync(distRoot);
22+
items.forEach(item => {
23+
const file = path.join(distRoot, item);
24+
25+
const isMinifiedJavascriptFile = item.match(/.min.js$/);
26+
if (isMinifiedJavascriptFile) {
27+
sizes[getComponentName(item)] = getFilesizeInBytes(file);
28+
}
29+
});
30+
31+
fs.writeFileSync(path.join(distRoot, outputFilename), JSON.stringify({ sizes }));
32+
33+
function getFilesizeInBytes(fileName: string) {
34+
return fs.statSync(fileName).size;
35+
}
36+
37+
function getComponentName(fileName: string) {
38+
return path.basename(fileName, '.min.js');
39+
}
40+
}

‎apps/test-bundles/scripts/merge-bundlesizes.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as fs from 'fs';
2+
3+
export function mergeBundleSizes(configPaths: string[], mergeConfigPath: string) {
4+
const result: { sizes: { [entryName: string]: number } } = {
5+
sizes: {},
6+
};
7+
8+
configPaths.forEach(configPath => {
9+
const json = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
10+
Object.assign(result.sizes, json.sizes);
11+
});
12+
13+
fs.writeFileSync(mergeConfigPath, JSON.stringify(result));
14+
}

‎apps/test-bundles/webpack.config.js‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* eslint-disable no-shadow */
2+
13
// @ts-check
24
const {
35
buildEntries,
@@ -8,21 +10,38 @@ const {
810
createEntry,
911
} = require('./webpackUtils');
1012

11-
const packageName = process.env.PACKAGE;
13+
/**
14+
*
15+
* @param {string} packageName
16+
* @returns
17+
*/
18+
function getEntries(packageName) {
19+
if (packageName === '@fluentui/react-northstar') {
20+
createFluentNorthstarFixtures();
21+
const entries = buildEntries('@fluentui/react-northstar');
22+
return entries;
23+
}
24+
25+
if (packageName === '@fluentui/react') {
26+
createFluentReactFixtures();
27+
createEntry('@fluentui/keyboard-key');
28+
29+
const entries = buildEntries('@fluentui/react');
30+
entries['keyboard-key'] = buildEntry('@fluentui/keyboard-key');
31+
return entries;
32+
}
33+
34+
console.error('🚨 packageName needs to be one of `@fluentui/react` or `@fluentui/react-northstar`!');
35+
process.exit(1);
36+
}
1237

13-
let entries;
14-
if (packageName === '@fluentui/react-northstar') {
15-
createFluentNorthstarFixtures();
16-
entries = buildEntries('@fluentui/react-northstar');
17-
} else if (packageName === '@fluentui/react') {
18-
createFluentReactFixtures();
19-
createEntry('@fluentui/keyboard-key');
38+
const packageName = process.env.PACKAGE ?? '';
2039

21-
entries = buildEntries('@fluentui/react');
22-
entries['keyboard-key'] = buildEntry('@fluentui/keyboard-key');
23-
} else {
24-
console.error('🚨 No packageName provided!');
40+
if (!packageName) {
41+
console.error('🚨 No packageName provided! Set it via env variable name "PACKAGE"');
2542
process.exit(1);
2643
}
44+
const entries = getEntries(packageName);
45+
const config = createWebpackConfig(entries, packageName);
2746

28-
module.exports = createWebpackConfig(entries, packageName);
47+
module.exports = config;

‎apps/test-bundles/webpackUtils.js‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@ const TerserPlugin = require('terser-webpack-plugin');
77

88
const FIXTURE_PATH = 'temp/fixtures/';
99

10+
/**
11+
*
12+
* @param {{[entryName:string]:{entryPath:string, includeStats:boolean}}} entries
13+
* @param {string} packageName
14+
* @returns
15+
*/
1016
function createWebpackConfig(entries, packageName) {
17+
const normalizedPkgName = packageName.replace('@fluentui/', '');
1118
return Object.keys(entries).map(entryName => {
1219
/** @type {BundleAnalyzerPlugin.Options} */
1320
let anaylizerPluginOptions = {
@@ -53,6 +60,10 @@ function createWebpackConfig(entries, packageName) {
5360
entry: {
5461
[entryName]: entryPath,
5562
},
63+
output: {
64+
filename: `[name].min.js`,
65+
path: path.resolve(__dirname, 'dist', normalizedPkgName),
66+
},
5667
externals: {
5768
react: 'React',
5869
'react-dom': 'ReactDOM',
@@ -130,6 +141,9 @@ function createFluentReactFixtures() {
130141
});
131142
}
132143

144+
/**
145+
* @param {string} packageName
146+
*/
133147
function createEntry(packageName) {
134148
try {
135149
// import everything from a single package
@@ -145,11 +159,13 @@ function createEntry(packageName) {
145159
/**
146160
* Build webpack entries from created fixtures.
147161
*
162+
* @param {string} packageName
163+
* @param {{[entryName:string]:{entryPath:string, includeStats:boolean}}} [entries]
148164
* @param {boolean} [includeStats] - Stats are generated and used by the size auditor report
149-
* to check more details on what caused the bundle size change. Due to stats generation being slow,
150-
* and therefore slowing down CI significantly, setting this to true to avoid stats generation.
151-
* If bundle size is changed unexpectedly, developers can drill down deeper on the problem by
152-
* locally running bundle tests.
165+
to check more details on what caused the bundle size change. Due to stats generation being slow,
166+
and therefore slowing down CI significantly, setting this to true to avoid stats generation.
167+
If bundle size is changed unexpectedly, developers can drill down deeper on the problem by
168+
locally running bundle tests.
153169
*/
154170
function buildEntries(packageName, entries = {}, includeStats = true) {
155171
const folderName = getFolderName(packageName);
@@ -169,6 +185,8 @@ function buildEntries(packageName, entries = {}, includeStats = true) {
169185

170186
/**
171187
* Build entries for single fixture with top level import.
188+
* @param {string} packageName
189+
* @param {boolean} [includeStats]
172190
*/
173191
function buildEntry(packageName, includeStats = true) {
174192
const folderName = getFolderName(packageName);
@@ -179,6 +197,9 @@ function buildEntry(packageName, includeStats = true) {
179197
};
180198
}
181199

200+
/**
201+
* @param {string} packageName
202+
*/
182203
function getFolderName(packageName) {
183204
return packageName.replace('@fluentui/', '');
184205
}

‎apps/vr-tests-react-components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"@fluentui/react-dialog": "^9.5.9",
3333
"@fluentui/react-divider": "^9.2.15",
3434
"@fluentui/react-field": "^9.1.6",
35-
"@fluentui/react-icons": "^2.0.196",
35+
"@fluentui/react-icons": "^2.0.203",
3636
"@fluentui/react-image": "^9.1.12",
3737
"@fluentui/react-infobutton": "9.0.0-beta.34",
3838
"@fluentui/react-input": "^9.4.16",

0 commit comments

Comments
 (0)