Merge branch 'develop' of https://github.com//TrueCar/gluestick into …

…feature/webpack-refactor
TrueCar · Jun 4, 2018 · 5bdec46 · 5bdec46
2 parents 5d6327d + 619e8cc
commit 5bdec46
Show file tree

Hide file tree

Showing 16 changed files with 321 additions and 237 deletions.
diff --git a/flow/application-config.js.flow b/flow/application-config.js.flow
@@ -33,6 +33,7 @@ declare module 'application-config' {
       changed: string[],
     },
     enableErrorOverlay: boolean,
+    inlineAllCss: boolean,
     [key: string]: any,
   };
 

diff --git a/packages/gluestick/src/__tests__/mocks/context.js b/packages/gluestick/src/__tests__/mocks/context.js
@@ -58,11 +58,15 @@ const gsConfig: GSConfig = {
     changed: [],
   },
   enableErrorOverlay: true,
+  inlineAllCss: false,
 };
 
 const client: WebpackConfig = {
   resolve: {},
   module: {},
+  output: {
+    publicPath: '/assets',
+  },
 };
 const server: WebpackConfig = {};
 

diff --git a/packages/gluestick/src/config/defaults/glueStickConfig.js b/packages/gluestick/src/config/defaults/glueStickConfig.js
@@ -66,6 +66,7 @@ const config: GSConfig = {
     ],
   },
   enableErrorOverlay: true,
+  inlineAllCss: false,
 };
 
 module.exports = config;
diff --git a/packages/gluestick/src/config/webpack/ChunksPlugin.js b/packages/gluestick/src/config/webpack/ChunksPlugin.js
@@ -1,19 +1,10 @@
 /* @flow */
-import type { WebpackConfig } from '../../types';
+import type { ChunksInfo, ChunkInfo, WebpackConfig } from '../../types';
 
 const path = require('path');
 const fs = require('fs');
 const mkdir = require('mkdirp');
 
-type ChunksInfo = {
-  javascript: {
-    [key: ?string]: string,
-  },
-  styles: {
-    [key: ?string]: string,
-  },
-};
-
 const chunkInfoFilePath = (
   webpackConfiguration: WebpackConfig,
   chunkInfoFilename?: string = 'webpack-chunks.json',
@@ -22,17 +13,17 @@ const chunkInfoFilePath = (
   return path.join(webpackConfiguration.output.path, chunkInfoFilename);
 };
 
-const getChunksInfoBody = (json: Object, publicPath: string): ChunksInfo => {
-  const assetsByChunk: Object = json.assetsByChunkName;
+const getChunksInfoBody = (stats: Object, publicPath: string): ChunksInfo => {
+  const assetsByChunk = stats.assetsByChunkName;
 
   const assetsChunks: ChunksInfo = {
     javascript: {},
     styles: {},
   };
 
   // gets asset paths by name and extension of their chunk
-  const getAssets = (chunkName: string, extension: string): string[] => {
-    let chunk: string | string[] = json.assetsByChunkName[chunkName];
+  const getAssets = (chunkName: string, extension: string): ChunkInfo[] => {
+    let chunk: string | string[] = stats.assetsByChunkName[chunkName];
 
     // a chunk could be a string or an array, so make sure it is an array
     if (!Array.isArray(chunk)) {
@@ -41,18 +32,18 @@ const getChunksInfoBody = (json: Object, publicPath: string): ChunksInfo => {
 
     return chunk
       .filter(name => path.extname(name) === `.${extension}`)
-      .map(name => `${publicPath}${name}`);
+      .map(name => ({ url: `${publicPath}${name}`, name }));
   };
 
   Object.keys(assetsByChunk).forEach((name: string) => {
     // The second asset is usually a source map
-    const jsAsset: string = getAssets(name, 'js')[0];
+    const jsAsset = getAssets(name, 'js')[0];
 
     if (jsAsset) {
       assetsChunks.javascript[name] = jsAsset;
     }
 
-    const styleAsset: string = getAssets(name, 'css')[0];
+    const styleAsset = getAssets(name, 'css')[0];
 
     if (styleAsset) {
       assetsChunks.styles[name] = styleAsset;
@@ -77,18 +68,18 @@ module.exports = class ChunksPlugin {
   }
 
   apply(compiler: Object): void {
-    const outputFilePath: string = chunkInfoFilePath(
+    const outputFilePath = chunkInfoFilePath(
       this.configuration,
       this.options.chunkInfoFilename,
     );
 
     compiler.plugin('done', (stats: Object) => {
-      const json: Object = stats.toJson({
+      const json = stats.toJson({
         context: this.configuration.context || process.cwd(),
         chunkModules: true,
       });
 
-      const publicPath: string =
+      const publicPath =
         process.env.NODE_ENV !== 'production' &&
         this.configuration.devServer &&
         typeof this.configuration.devServer.publicPath === 'string'

diff --git a/packages/gluestick/src/config/webpack/__tests__/ChunksPlugin.test.js b/packages/gluestick/src/config/webpack/__tests__/ChunksPlugin.test.js
@@ -4,11 +4,11 @@ jest.mock(
   'path/webpack-chunks',
   () => ({
     javascript: {
-      main: 'publicPath/main.js',
-      profile: 'publicPath/profile.js',
+      main: { name: 'main.js', url: 'publicPath/main.js' },
+      profile: { name: 'profile.js', url: 'publicPath/profile.js' },
     },
     styles: {
-      main: 'publicPath/main.css',
+      main: { name: 'main.css', url: 'publicPath/main.css' },
     },
   }),
   { virtual: true },
@@ -34,11 +34,11 @@ describe('ChunksPlugin', () => {
     });
     expect(JSON.parse(fs.readFileSync('path/webpack-chunks.json'))).toEqual({
       javascript: {
-        main: 'publicPath/main.js',
-        profile: 'publicPath/profile.js',
+        main: { name: 'main.js', url: 'publicPath/main.js' },
+        profile: { name: 'profile.js', url: 'publicPath/profile.js' },
       },
       styles: {
-        main: 'publicPath/main.css',
+        main: { name: 'main.css', url: 'publicPath/main.css' },
       },
     });
     fs.unlinkSync('path/webpack-chunks.json');
@@ -63,13 +63,13 @@ describe('ChunksPlugin', () => {
     });
     expect(JSON.parse(fs.readFileSync('path/webpack-chunks'))).toEqual({
       javascript: {
-        main: 'publicPath/main.js',
-        profile: 'publicPath/profile.js',
-        home: 'publicPath/home.js',
+        main: { name: 'main.js', url: 'publicPath/main.js' },
+        profile: { name: 'profile.js', url: 'publicPath/profile.js' },
+        home: { name: 'home.js', url: 'publicPath/home.js' },
       },
       styles: {
-        main: 'publicPath/main.css',
-        home: 'publicPath/home.css',
+        main: { name: 'main.css', url: 'publicPath/main.css' },
+        home: { name: 'home.css', url: 'publicPath/home.css' },
       },
     });
     fs.unlinkSync('path/webpack-chunks.json');

diff --git a/packages/gluestick/src/generator/predefined/clientEntryInit.js b/packages/gluestick/src/generator/predefined/clientEntryInit.js
@@ -49,12 +49,15 @@ if (typeof window === "object") {
     ${args =>
       args.plugins
         .filter(plugin => plugin.meta.wrapper)
-        .reduce((prev, curr, index) => {
-          return prev.concat(
-            `${index > 0 ? '    ' : ''}${convertToCamelCase(
-              curr.name,
-            )}.plugin,\n`,
-          );
+        .reduce((prev, curr) => {
+          return prev.concat(`
+    {
+      name: "${curr.meta ? curr.meta.name : curr.name || 'unknown'}",
+      meta: ${JSON.stringify(curr.meta)},
+      body: ${convertToCamelCase(curr.name)}.plugin,
+      options: ${JSON.stringify(curr.options)}
+    },\n
+          `);
         }, '')}
   ];
 

diff --git a/packages/gluestick/src/generator/predefined/serverEntries.js b/packages/gluestick/src/generator/predefined/serverEntries.js
@@ -31,15 +31,21 @@ ${args =>
 
 export const plugins = [
   ${args =>
-    args.plugins.reduce((prev, curr, index, arr) => {
+    args.plugins.reduce((prev, curr, index) => {
       return prev.concat(
         `${index > 0 ? '  ' : ''}` +
-          `{ ref: ${getPluginName(curr.name, curr.meta.type)}, type: "${curr
-            .meta.type}"` +
-          `${curr.options
-            ? `, options: ${JSON.stringify(curr.options)} },`
-            : ' },'}` +
-          `${arr.length - 1 !== index ? '\n' : ''}`,
+          `{
+          body: typeof ${getPluginName(
+            curr.name,
+            curr.meta.type,
+          )} === "function" ? ${getPluginName(
+            curr.name,
+            curr.meta.type,
+          )} : ${getPluginName(curr.name, curr.meta.type)}.plugin,
+          meta: ${JSON.stringify(curr.meta)},
+          options: ${JSON.stringify(curr.options)}
+          },
+          `,
       );
     }, '')}
 ];

diff --git a/packages/gluestick/src/generator/templates/EntryWrapper.js b/packages/gluestick/src/generator/templates/EntryWrapper.js
@@ -143,7 +143,9 @@ export default class EntryWrapper extends Component {
     } = this.props;
 
     return rootWrappers.reduce((prev, curr) => {
-      return curr(prev, rootWrappersOptions);
+      const plugin = curr.body;
+      const options = curr.options || {};
+      return plugin(prev, {...rootWrappersOptions, ...options});
     }, (
       <Root
         routerContext={routerContext}

diff --git a/packages/gluestick/src/plugins/__tests__/serverPlugins.test.js b/packages/gluestick/src/plugins/__tests__/serverPlugins.test.js
@@ -21,17 +21,14 @@ const plugin2Ref = () => {};
 plugin2Ref.meta = { type: 'runtime' };
 const validPlugins = [
   {
-    ref: plugin0Ref,
-    type: 'server',
+    body: plugin0Ref,
   },
   {
-    ref: plugin1Ref,
+    body: plugin1Ref,
     options: { prop: true },
-    type: 'server',
   },
   {
-    ref: plugin2Ref,
-    type: 'runtime',
+    body: plugin2Ref,
   },
 ];
 
@@ -43,19 +40,14 @@ describe('plugins/serverPlugins', () => {
   it('should return plugins array', () => {
     jest.doMock('project-entries', () => ({
       plugins: [
+        { body: plugin0Ref, meta: plugin0Ref.meta, name: plugin0Ref.meta.name },
         {
-          ref: plugin0Ref,
-          type: 'server',
-        },
-        {
-          ref: plugin1Ref,
+          body: plugin1Ref,
+          meta: plugin1Ref.meta,
+          name: plugin1Ref.meta.name,
           options: { prop: true },
-          type: 'server',
-        },
-        {
-          ref: plugin2Ref,
-          type: 'runtime',
         },
+        { body: plugin2Ref, meta: plugin2Ref.meta },
       ],
     }));
     const plugins = require('../serverPlugins');
@@ -74,7 +66,7 @@ describe('plugins/serverPlugins', () => {
     jest.doMock('project-entries', () => ({
       plugins: [
         {
-          ref: 'abc',
+          body: 'abc',
         },
       ],
     }));
@@ -96,8 +88,8 @@ describe('plugins/serverPlugins', () => {
     jest.doMock('project-entries', () => ({
       plugins: [
         {
-          ref: invalidPlugin,
-          type: 'server',
+          body: invalidPlugin,
+          meta: invalidPlugin.meta,
         },
       ],
     }));

diff --git a/packages/gluestick/src/plugins/serverPlugins.js b/packages/gluestick/src/plugins/serverPlugins.js
@@ -12,12 +12,6 @@ type CompilationResults = {
   error?: Error,
 };
 
-type PluginRef = {
-  ref: Function,
-  type: string,
-  options?: Object,
-};
-
 /**
  * Compile plugin.
  */
@@ -57,14 +51,11 @@ const prepareServerPlugins = (): ServerPlugin[] => {
   try {
     // Get server plugins only and perform necessry checks.
     const filteredPlugins = plugins.filter(
-      (plugin: PluginRef, index: number): boolean => {
-        if (
-          typeof plugin.ref !== 'function' &&
-          typeof plugin.ref.plugin !== 'function'
-        ) {
+      (plugin: Plugin, index: number): boolean => {
+        if (typeof plugin !== 'function' && typeof plugin.body !== 'function') {
           throw new Error(`Plugin at position ${index} must export a function`);
         }
-        return plugin.type === 'server';
+        return plugin.meta.type === 'server';
       },
     );
     if (!filteredPlugins.length) {
@@ -74,13 +65,11 @@ const prepareServerPlugins = (): ServerPlugin[] => {
     let logMessage: string = 'Compiling server plugins:\n';
     // Compile plugin, if compilation fails, further compilation is prevented.
     const compiledPlugins: ServerPlugin[] = filteredPlugins.map(
-      (value: PluginRef): ServerPlugin => {
+      (value: Plugin): ServerPlugin => {
         const normalizedPlugin: Plugin = {
-          name: value.ref.meta
-            ? value.ref.meta.name
-            : value.ref.name || 'unknown',
-          meta: value.ref.meta || {},
-          body: value.ref,
+          name: value.meta ? value.meta.name : value.name || 'unknown',
+          meta: value.meta || {},
+          body: value.body,
           options: value.options || {},
         };
         // Second `compilePlugin` argument is an object with gluestick utilities that

diff --git a/packages/gluestick/src/renderer/__tests__/render.test.js b/packages/gluestick/src/renderer/__tests__/render.test.js
@@ -180,10 +180,10 @@ describe('renderer/render', () => {
       };
     };
 
-    it('should prepare plugins and pass it to EntryWrapper', () => {
+    it('should prepare plugins and pass it to EntryWrapper', async () => {
       const entriesRuntimePlugins = [
-        { plugin: v => v, meta: { wrapper: true } },
-        { plugin: () => {}, meta: {} },
+        { name: 'plugin1', body: v => v, meta: { wrapper: true } },
+        { name: 'plugin2', body: () => {}, meta: {} },
       ];
       // eslint-disable-next-line react/no-multi-comp
       class MockEntryWrapper extends React.Component {
@@ -199,7 +199,7 @@ describe('renderer/render', () => {
       const currentRoute = clone(renderProps);
       currentRoute.email = false;
       currentRoute.cache = false;
-      render(
+      await render(
         context,
         request,
         {
@@ -220,9 +220,7 @@ describe('renderer/render', () => {
         { assets, loadjsConfig, cacheManager },
         {},
       );
-      expect(MockEntryWrapper.plugins).toEqual([
-        entriesRuntimePlugins[0].plugin,
-      ]);
+      expect(MockEntryWrapper.plugins).toEqual([entriesRuntimePlugins[0]]);
     });
 
     describe('when the route is an email route', () => {