Add size check to react-northstar build

apps/test-bundles/.gitignore

@@ -0,0 +1 @@
+fixtures/*

apps/test-bundles/package.json

@@ -16,7 +16,9 @@
     "@fluentui/react": "^8.0.0-beta.45",
     "@fluentui/react-button": "^1.0.0-beta.24",
     "@fluentui/react-compose": "^1.0.0-beta.11",
+    "@fluentui/react-northstar": "^0.52.0",
     "@fluentui/scripts": "^1.0.0",
+    "fs-extra": "^8.1.0",
     "parallel-webpack": "^2.6.0",
     "webpack-bundle-analyzer": "^4.4.0",
     "terser-webpack-plugin": "^5.1.1"

apps/test-bundles/webpack.config.js

@@ -1,8 +1,26 @@
 // @ts-check
-const { createWebpackConfig, buildEntries, buildEntry } = require('./webpackUtils');
+const {
+  buildEntries,
+  buildEntry,
+  createWebpackConfig,
+  createFluentFixtures,
+  createFluentNorthstarFixtures,
+  createEntry,
+} = require('./webpackUtils');
+
+// Create entries for all top level imports
+createFluentFixtures();
+createFluentNorthstarFixtures();
+
+// Create entries for single top level import.
+createEntry('@fluentui/react-compose');
+createEntry('@fluentui/keyboard-key');
+
+const entries = {
+  ...buildEntries('@fluentui/react'),
+  ...buildEntries('@fluentui/react-northstar'),
+};
 
-// Create entries for all top level imports.
-const entries = buildEntries('@fluentui/react');
 // If/when we start working in react-next again, the bundle size tests should be set up like this
 // so that only the components directly within react-next are tested.
 // buildEntries(
@@ -12,7 +30,6 @@ const entries = buildEntries('@fluentui/react');
 //   true /* onlyOwnComponents */,
 // );
 
-// Create entries for single top level import.
 entries['react-compose'] = buildEntry('@fluentui/react-compose');
 entries['keyboard-key'] = buildEntry('@fluentui/keyboard-key');
 

apps/test-bundles/webpackUtils.js

@@ -1,6 +1,6 @@
 // @ts-check
 const path = require('path');
-const fs = require('fs');
+const fs = require('fs-extra');
 const resources = require('@fluentui/scripts/webpack/webpack-resources');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const TerserPlugin = require('terser-webpack-plugin');
@@ -73,6 +73,59 @@ function createWebpackConfig(entries) {
 // Files which should not be considered top-level entries.
 const TopLevelEntryFileExclusions = ['index.js', 'version.js', 'index.bundle.js'];
 
+function createFluentNorthstarFixtures() {
+  const packageName = '@fluentui/react-northstar';
+  const distPath = path.dirname(require.resolve(packageName).replace('commonjs', 'es'));
+  const packagePath = path.resolve(distPath, 'components');
+  fs.readdirSync(packagePath).forEach(itemName => {
+    const isFolder = fs.statSync(path.join(packagePath, itemName)).isDirectory();
+
+    if (isFolder && itemName) {
+      const importStatement = `import { ${itemName} } from '${packageName}'; console.log(${itemName})`;
+      try {
+        const folderName = getFolderName(packageName);
+        const entryPath = path.join('fixtures/', folderName, `${itemName}.js`);
+        fs.outputFileSync(entryPath, importStatement, 'utf-8');
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  });
+}
+
+function createFluentFixtures() {
+  const packageName = '@fluentui/react';
+  const distPath = path.dirname(require.resolve(packageName).replace('lib-commonjs', 'lib'));
+  const packagePath = path.resolve(distPath);
+  fs.readdirSync(packagePath).forEach(itemName => {
+    const isFolder = fs.statSync(path.join(packagePath, itemName)).isDirectory();
+    const isAllowedFile = itemName && itemName.match(/.js$/) && !TopLevelEntryFileExclusions.includes(itemName);
+
+    if (isAllowedFile && !isFolder) {
+      const item = isFolder ? itemName : itemName.replace(/.js$/, '');
+      const importStatement = `import { ${item} } from '${packageName}'; console.log(${item})`;
+      try {
+        const folderName = getFolderName(packageName);
+        const entryPath = path.join('fixtures/', folderName, `${item}.js`);
+        fs.outputFileSync(entryPath, importStatement, 'utf-8');
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  });
+}
+
+function createEntry(packageName) {
+  try {
+    const importStatement = `import p from '${packageName}'; console.log(p)`;
+    const folderName = getFolderName(packageName);
+    const entryPath = path.join('fixtures/', folderName, 'index.js');
+    fs.outputFileSync(entryPath, importStatement, 'utf-8');
+  } catch (err) {
+    console.log(err);
+  }
+}
+
 /**
  * Build webpack entries based on top level imports available in a package.
  *
@@ -86,53 +139,42 @@ const TopLevelEntryFileExclusions = ['index.js', 'version.js', 'index.bundle.js'
  * for components which are just re-exported.
  */
 function buildEntries(packageName, entries = {}, includeStats = true, onlyOwnComponents = false) {
-  let packagePath = '';
-
-  try {
-    packagePath = path.dirname(require.resolve(packageName)).replace('lib-commonjs', 'lib');
-  } catch (e) {
-    console.log(`The package "${packageName}" could not be resolved. Add it as a dependency to this project.`);
-    console.log(e);
-    return;
-  }
+  const folderName = getFolderName(packageName);
+  const packagePath = path.join('fixtures/', folderName);
 
   fs.readdirSync(packagePath).forEach(itemName => {
-    const isAllowedFile =
-      // is JS
-      itemName.match(/.js$/) &&
-      // not excluded
-      !TopLevelEntryFileExclusions.includes(itemName) &&
-      // if requested, has component implementation within this package (not re-export)
-      (!onlyOwnComponents || fs.existsSync(path.join(packagePath, 'components', itemName.replace('.js', ''))));
-
-    if (isAllowedFile) {
-      const entryName = itemName.replace(/.js$/, '');
-
-      // Replace commonjs paths with lib paths.
-      const entryPath = path.join(packagePath, itemName);
-
-      entries[`${packageName.replace('@', '').replace('/', '-')}-${entryName}`] = {
-        entryPath,
-        includeStats,
-      };
-    }
+    const entryName = itemName.replace(/.js$/, '');
+    const entryPath = path.resolve(path.join(packagePath, itemName));
+    entries[`${packageName.replace('@', '').replace('/', '-')}-${entryName}`] = {
+      entryPath: entryPath,
+      includeStats,
+    };
   });
 
   return entries;
 }
 
 /**
- * Create entries for single top level import.
+ * Build entries for single top level import.
  */
 function buildEntry(packageName, includeStats = true) {
+  const folderName = getFolderName(packageName);
+  const entryPath = path.resolve(path.join('fixtures/', folderName));
   return {
-    entryPath: path.join(path.dirname(require.resolve(packageName)).replace('lib-commonjs', 'lib'), 'index.js'),
+    entryPath: `${entryPath}/index.js`,
     includeStats,
   };
 }
 
+function getFolderName(packageName) {
+  return packageName.replace('@fluentui/', '');
+}
+
 module.exports = {
-  createWebpackConfig,
   buildEntries,
   buildEntry,
+  createFluentFixtures,
+  createFluentNorthstarFixtures,
+  createEntry,
+  createWebpackConfig,
 };