Technical/issue 11 config refactor

.github/CONTRIBUTING.md

@@ -26,4 +26,8 @@ To develop for the project, you'll want to follow these steps:
 Unit tests have been written that can be run using
 ```shell
 $ yarn test
-```
+```
+
+Note, you can use the following to adjust how many mocha tests get run:
+- `describe.only` / `it.only`: only run this block
+- `xdescribe` / `xit`: dont run this block

package.json

@@ -11,8 +11,8 @@
     "lint": "eslint \"./packages/**/**/*.js\" \"./test/**/**/*.js\"",
     "build": "node ./packages/cli/index.js build",
     "serve": "yarn clean && yarn build && cd ./public && ws",
-    "develop": "node ./packages/cli/index.js develop",
-    "test": "mocha --timeout 15000"
+    "develop": "yarn clean && node ./packages/cli/index.js develop",
+    "test": "yarn clean && mocha --timeout 15000"
   },
   "dependencies": {
     "@babel/core": "^7.4.0",

packages/cli/config/webpack.config.common.js

@@ -1,24 +1,13 @@
+const fs = require('fs');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
-const fs = require('fs');
 const webpack = require('webpack');
 
 const isDirectory = source => fs.lstatSync(source).isDirectory();
 const getUserWorkspaceDirectories = (source) => {
   return fs.readdirSync(source).map(name => path.join(source, name)).filter(isDirectory);
 };
-
-// TODO get userWorkspace and pagesDir from greenwood config?
-// https://github.com/ProjectEvergreen/greenwood/issues/11
-const userWorkspace = fs.existsSync(path.join(process.cwd(), 'src'))
-  ? path.join(process.cwd(), 'src')
-  : path.join(__dirname, '..', 'templates/');
-
-const pagesDir = fs.existsSync(path.join(process.cwd(), 'src', 'pages'))
-  ? path.join(process.cwd(), 'src', 'pages/')
-  : path.join(__dirname, '..', 'templates/');
-
-const mappedUserDirectoriesForWebpack = getUserWorkspaceDirectories(userWorkspace).map((userPath) => {
+const mapUserWorkspaceDirectory = (userPath) => {
   const directory = userPath.split('/')[userPath.split('/').length - 1];
 
   return new webpack.NormalModuleReplacementPlugin(
@@ -32,80 +21,88 @@ const mappedUserDirectoriesForWebpack = getUserWorkspaceDirectories(userWorkspac
       if (additionalNestedPathIndex > -1) {
         resource.request = resource.request.substring(additionalNestedPathIndex + 2, resource.request.length);
       }
-    });
-});
+    }
+  );
+};
 
-module.exports = {
+module.exports = (context) => {
+  // dynamically map all the user's workspace directories for resolution by webpack
+  // this essentially helps us keep watch over changes from the user, and greenwood's build pipeline
+  const mappedUserDirectoriesForWebpack = getUserWorkspaceDirectories(context.userWorkspace).map(mapUserWorkspaceDirectory);
 
-  entry: {
-    index: path.join(process.cwd(), '.greenwood', 'app', 'app.js')
-  },
+  return {
 
-  output: {
-    path: path.join(process.cwd(), 'public'),
-    filename: '[name].[hash].bundle.js',
-    publicPath: '/'
-  },
+    entry: {
+      index: path.join(context.scratchDir, 'app', 'app.js')
+    },
 
-  module: {
-    rules: [{
-      test: /\.js$/,
-      enforce: 'pre',
-      loader: 'eslint-loader',
-      options: {
-        configFile: path.join(__dirname, './.eslintrc')
-      }
-    }, {
-      test: /\.js$/,
-      loader: 'babel-loader',
-      options: {
-        presets: ['@babel/preset-env'],
-        plugins: [
-          ['babel-plugin-transform-builtin-classes', {
-            globals: ['LitElement']
-          }]
-        ]
-      }
-    }, {
-      test: /\.md$/,
-      loaders: [
-        'babel-loader',
-        'wc-markdown-loader'
-      ]
-    }, {
-      test: /\.css$/,
-      loaders: [
-        { loader: 'css-to-string-loader' },
-        { loader: 'css-loader' }, 
-        { loader: 'postcss-loader', options: 
-          {
-            config: {
-              path: path.join(__dirname) 
-            }
-          } 
+    output: {
+      path: context.publicDir,
+      filename: '[name].[hash].bundle.js',
+      publicPath: '/'
+    },
+
+    module: {
+      rules: [{
+        test: /\.js$/,
+        enforce: 'pre',
+        loader: 'eslint-loader',
+        options: {
+          configFile: path.join(__dirname, './.eslintrc')
         }
-      ]
-    }, {
-      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-      loader: 'url-loader?limit=10000&mimetype=application/font-woff'
-    }, {
-      test: /\.(ttf|eot|svg|jpe?g|png|gif|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-      loader: 'file-loader'
-    }]
-  },
+      }, {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env'],
+          plugins: [
+            ['babel-plugin-transform-builtin-classes', {
+              globals: ['LitElement']
+            }]
+          ]
+        }
+      }, {
+        test: /\.md$/,
+        loaders: [
+          'babel-loader',
+          'wc-markdown-loader'
+        ]
+      }, {
+        test: /\.css$/,
+        loaders: [
+          { loader: 'css-to-string-loader' },
+          { loader: 'css-loader' }, 
+          { loader: 'postcss-loader', options: 
+            {
+              config: {
+                path: path.join(__dirname) 
+              }
+            } 
+          }
+        ]
+      }, {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
+      }, {
+        test: /\.(ttf|eot|svg|jpe?g|png|gif|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'file-loader'
+      }]
+    },
 
-  plugins: [
-    ...mappedUserDirectoriesForWebpack,
+    plugins: [
+      ...mappedUserDirectoriesForWebpack,
 
-    new webpack.NormalModuleReplacementPlugin(
-      /\.md/,
-      (resource) => {
-        resource.request = resource.request.replace(/^\.\//, pagesDir);
-      }),
-
-    new HtmlWebpackPlugin({
-      template: path.join(process.cwd(), '.greenwood', 'index.html'),
-      chunksSortMode: 'dependency'
-    })
-  ]
+      new webpack.NormalModuleReplacementPlugin(
+        /\.md/,
+        (resource) => {
+          resource.request = resource.request.replace(/^\.\//, context.pagesDir);
+        }
+      ),
+
+      new HtmlWebpackPlugin({
+        template: path.join(context.scratchDir, 'index.html'),
+        chunksSortMode: 'dependency'
+      })
+    ]
+  };
 };

packages/cli/config/webpack.config.develop.js

@@ -1,81 +1,81 @@
-const fs = require('fs');
 const path = require('path');
-const commonConfig = require('./webpack.config.common');
-const webpackMerge = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const FilewatcherPlugin = require('filewatcher-webpack-plugin');
-const generateBuild = require('../lib/generate');
+const generateCompilation = require('../lib/compile');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require(path.join(__dirname, '..', './config/webpack.config.common.js'));
 
 const host = 'localhost';
 const port = 1981;
-const publicPath = commonConfig.publicPath;
 let isRebuilding = false;
 
-// TODO get userWorkspace and pagesDir from greenwood config?
-// https://github.com/ProjectEvergreen/greenwood/issues/11
-
-const userWorkspace = fs.existsSync(path.join(process.cwd(), 'src'))
-  ? path.join(process.cwd(), 'src')
-  : path.join(__dirname, '..', 'templates/');
-
 const rebuild = async() => {
   if (!isRebuilding) {
     isRebuilding = true;
+
     // rebuild web components
-    await generateBuild();
+    await generateCompilation();
+
     // debounce
     setTimeout(() => {
       isRebuilding = false;
     }, 1000);
   }
 };
 
-module.exports = webpackMerge(commonConfig, {
-
-  mode: 'development',
+module.exports = (context) => {
+  const configWithContext = commonConfig(context);
+  const publicPath = configWithContext.output.publicPath;
+
+  return webpackMerge(configWithContext, {
+
+    mode: 'development',
 
-  entry: [
-    `webpack-dev-server/client?http://${host}:${port}`,
-    path.join(process.cwd(), '.greenwood', 'app', 'app.js')
-  ],
+    entry: [
+      `webpack-dev-server/client?http://${host}:${port}`,
+      path.join(context.scratchDir, 'app', 'app.js')
+    ],
 
-  devServer: {
-    port,
-    host,
-    historyApiFallback: true,
-    hot: false,
-    inline: true
-  },
+    devServer: {
+      port,
+      host,
+      historyApiFallback: true,
+      hot: false,
+      inline: true
+    },
 
-  plugins: [
-    // new webpack.HotModuleReplacementPlugin(),
-    new FilewatcherPlugin({
-      watchFileRegex: [`/${userWorkspace}/`], 
-      onReadyCallback: () => { 
-        console.log(`Now serving Development Server available at http://${host}:${port}`);
-      },
-      // eslint-disable-next-line no-unused-vars
-      onChangeCallback: async (path) => {
-        rebuild();
-      },
-      usePolling: true,
-      atomic: true,
-      ignored: '/node_modules/'
-    }),
-    new ManifestPlugin({
-      fileName: 'manifest.json',
-      publicPath
-    }),
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: '.greenwood/index.dev.html',
-      publicPath
-    }),
-    new HtmlWebpackPlugin({
-      filename: '404.html',
-      template: '.greenwood/404.dev.html',
-      publicPath
-    })
-  ]
-});
+    plugins: [
+      // new webpack.HotModuleReplacementPlugin(),
+      new FilewatcherPlugin({
+        watchFileRegex: [`/${context.userWorkspace}/`], 
+        onReadyCallback: () => { 
+          console.log(`Now serving Development Server available at http://${host}:${port}`);
+        },
+        // eslint-disable-next-line no-unused-vars
+        onChangeCallback: async () => {
+          rebuild();
+        },
+        usePolling: true,
+        atomic: true,
+        ignored: '/node_modules/'
+      }),
+      new ManifestPlugin({
+        fileName: 'manifest.json',
+        publicPath
+      }),
+      // TODO magic string paths (index.html)
+      new HtmlWebpackPlugin({
+        filename: 'index.html',
+        template: path.join(context.scratchDir, 'index.dev.html'),
+        publicPath
+      }),
+      // TODO magic string paths (404.html)
+      new HtmlWebpackPlugin({
+        filename: '404.html',
+        template: path.join(context.scratchDir, '404.dev.html'),
+        publicPath
+      })
+    ]
+  });
+};