Dpisani/afp 215 pass webpack options fix build

.changeset/9619af8b/changes.json

@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "@brisk-docs/website", "type": "patch" }],
+  "dependents": []
+}

.changeset/9619af8b/changes.md

@@ -0,0 +1 @@
+- sodjfsdfds

docs.config.js

@@ -1,9 +1,26 @@
-const defaultWebpackConfig = require('./default.webpack.config');
+const test = file => {
+  const nextServerFiles = new RegExp(`^${__dirname}/packages/website/`);
+  const sourceFiles = /\.(ts|tsx|js|jsx)$/;
+  return file.match(sourceFiles) && !file.match(nextServerFiles);
+};
+
+const webpack = config => {
+  config.module.rules.push({
+    test,
+    exclude: /node_modules/,
+    loader: 'babel-loader',
+    options: {
+      root: __dirname,
+    },
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};
 
 module.exports = () => ({
   docs: './packages/website/docs',
   packages: ['./packages/*'],
   useManifests: false,
-  webpackConfiguration: defaultWebpackConfig,
+  webpack,
   siteName: 'Brisk Docs Docs',
 });

package.json

@@ -17,7 +17,7 @@
         "delete:dist": "bolt ws exec --parallel -- rm -rf dist",
         "delete:modules": "bolt ws exec --parallel -- rm -rf node_modules && rm -rf node_modules",
         "docs": "node packages/website/bin/index.js dev",
-        "start": "bolt w @brisk-docs/website run start -p 8080",
+        "start": "bolt w @brisk-docs/website run start",
         "prettier": "prettier --write \"**/*.js\"",
         "lint:prettier": "prettier --list-different \"**/*.js\"",
         "lint:eslint": "yarn eslint .",
@@ -83,6 +83,7 @@
         "lodash.capitalize": "^4.2.1",
         "lodash.debounce": "^4.0.8",
         "lodash.flatmap": "^4.5.0",
+        "lodash.identity": "^3.0.0",
         "lodash.snakecase": "^4.1.1",
         "next": "^7.0.2",
         "outdent": "^0.7.0",

packages/website/__fixtures__/custom-babel-project/docs.config.js

@@ -1,9 +1,22 @@
 const path = require('path');
-const webpackConfiguration = require('./webpack.config');
+
+const webpack = config => {
+  config.module.rules.push({
+    test: new RegExp(`${__dirname}/.*\\.(js|jsx)$`),
+    exclude: /node_modules/,
+    use: {
+      loader: 'babel-loader',
+      options: {
+        root: __dirname,
+      },
+    },
+  });
+  return config;
+};
 
 module.exports = () => ({
   packages: path.join(__dirname, 'weird-babel-package'),
   docs: path.join(__dirname, 'docs'),
   siteName: 'Babel/webpack Test Docs',
-  webpackConfiguration,
+  webpack,
 });

packages/website/__fixtures__/custom-webpack-project/docs.config.js

@@ -1,9 +1,14 @@
 const path = require('path');
-const webpackConfiguration = require('./webpack.config');
+
+const webpack = config => {
+  config.resolve.modules.push(path.join(__dirname, 'packages'));
+
+  return config;
+};
 
 module.exports = () => ({
   packages: path.join(__dirname, 'packages', '*'),
   docs: path.join(__dirname, 'docs'),
   siteName: 'Webpack Test Docs',
-  webpackConfiguration,
+  webpack,
 });

packages/website/__fixtures__/index.js

@@ -0,0 +1,5 @@
+// This utility is to reduce the need to litter usages
+// of __dirname across our tests which make it hard to
+// move files
+
+module.exports.fixturesPath = __dirname;

packages/website/__fixtures__/typescript-project/docs.config.js

@@ -1,9 +1,17 @@
 const path = require('path');
-const webpackConfiguration = require('./webpack.config');
+
+const webpack = config => {
+  config.module.rules.push({
+    test: /\.tsx?$/,
+    loader: 'babel-loader!ts-loader',
+  });
+
+  return config;
+};
 
 module.exports = () => ({
   packages: path.join(__dirname, 'typescript-package'),
   docs: path.join(__dirname, 'docs'),
   siteName: 'Typescript/webpack Test Docs',
-  webpackConfiguration,
+  webpack,
 });

packages/website/bin/generate-pages.js

@@ -22,14 +22,12 @@ module.exports = async ({
     packageRoot,
     './components/page-templates',
   );
-  const bundlesPath = path.resolve(packageRoot, './bundles');
 
   const pagesList = await generatePages(
     packagesPaths,
     docsPath,
     pagesPath,
     componentsPath,
-    bundlesPath,
     {
       useManifests,
       webpackConfiguration,

packages/website/bin/handle-config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const fse = require('fs-extra');
+const identity = require('lodash.identity');
 
 /**
  * Validates a config entry specifying a path or paths and normalises
@@ -20,29 +21,11 @@ const resolvePathsConfig = entry => {
   throw new Error('entry must be an array or a string');
 };
 
-const defaultWebpackConfig = {
-  mode: 'development',
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env', '@babel/preset-react'],
-          },
-        },
-      },
-    ],
-  },
-};
-
 const defaultConfig = {
   docs: './docs',
   packages: ['./packages/*'],
   useManifests: false,
-  webpackConfiguration: defaultWebpackConfig,
+  webpack: identity,
 };
 
 /**
@@ -61,13 +44,13 @@ const processConfig = (cwd, providedConfig = {}) => {
     path.resolve(cwd, packagesPath),
   );
 
-  const { useManifests, webpackConfiguration } = config;
+  const { useManifests, webpack } = config;
 
   return {
     docsPath,
     packagesPaths,
     useManifests,
-    webpackConfiguration,
+    webpack,
   };
 };
 

packages/website/bin/handle-config.test.js

@@ -11,7 +11,7 @@ describe('website configuration processor', () => {
       packagesPaths: ['/c/w/d/packages/*'],
       docsPath: '/c/w/d/docs',
       useManifests: false,
-      webpackConfiguration: expect.anything(),
+      webpack: expect.any(Function),
     });
   });
 
@@ -43,6 +43,13 @@ describe('website configuration processor', () => {
 
     expect(config.useManifests).toEqual(true);
   });
+
+  it('accepts a webpack function', () => {
+    const dummyWebpack = _ => _;
+
+    const config = processConfig(mockCwd, { webpack: dummyWebpack });
+    expect(config.webpack).toBe(dummyWebpack);
+  });
 });
 
 describe('loadConfig', () => {

packages/website/bin/index.js

@@ -1,55 +1,40 @@
 #!/usr/bin/env node
-const { spawnSync } = require('child_process');
-const path = require('path');
 const commandLineArgs = require('command-line-args');
 
-const generatePages = require('./generate-pages');
-const handleConfig = require('./handle-config');
+const { dev, build, start } = require('./run-website');
 
 const mainDefinitions = [{ name: 'command', defaultOption: true }];
 const mainOptions = commandLineArgs(mainDefinitions, {
   stopAtFirstUnknown: true,
 });
 
-const nextRoot = path.resolve(__dirname, '..');
-
 // We have no control over this dangling underscore
 // eslint-disable-next-line no-underscore-dangle
 const argv = mainOptions._unknown || [];
 
 const cliOptions = [{ name: 'config', type: String }];
 const options = commandLineArgs(cliOptions, { argv, camelCase: true });
-const cwd = process.cwd();
 
-const spawnNextProcess = command => {
-  spawnSync(
-    `PATH=$(npm bin):$PATH; NODE_PATH=$NODE_PATH:$PWD/src next ${command}`,
-    [],
-    {
-      stdio: 'inherit',
-      shell: true,
-      env: { ...process.env, FORCE_EXTRACT_REACT_TYPES: true },
-      cwd: nextRoot,
-    },
-  );
-};
+if (mainOptions.command === undefined) {
+  throw new Error(`No command supplied`);
+}
 
-const preNextScripts = async () => {
-  const config = handleConfig(cwd, options.config);
-  await generatePages(config);
+const handleError = err => {
+  console.error(err);
+  process.exit(1);
 };
 
 switch (mainOptions.command) {
   case 'dev': {
-    preNextScripts().then(() => spawnNextProcess('dev'));
+    dev(options.config).catch(handleError);
     break;
   }
   case 'build': {
-    preNextScripts().then(() => spawnNextProcess('build'));
+    build(options.config).catch(handleError);
     break;
   }
   case 'start': {
-    spawnNextProcess('start');
+    start(options.config).catch(handleError);
     break;
   }
   default: