add support for runtime plugin options (#1192)

* add support for runtime plugin options * unify plugin types * update tests * update tests with new unified types * fix lint issues
TrueCar · May 10, 2018 · b9a8977 · b9a8977
1 parent e42ba60
commit b9a8977
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 65 deletions.
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
@@ -182,8 +182,8 @@ describe('renderer/render', () => {
 
     it('should prepare plugins and pass it to EntryWrapper', () => {
       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 {
@@ -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', () => {

diff --git a/packages/gluestick/src/renderer/middleware.js b/packages/gluestick/src/renderer/middleware.js
@@ -6,6 +6,7 @@ import type {
   RenderOutput,
   CacheManager,
   RenderMethod,
+  Plugin,
 } from '../types';
 
 import hooks from './helpers/hooks';
@@ -162,9 +163,9 @@ const middleware: Middleware = async (req, res, { assets }) => {
     const statusCode: number = getStatusCode(store, currentRoute);
 
     // Get runtime plugins that will be passed to EntryWrapper.
-    const runtimePlugins: Object[] = entriesPlugins
-      .filter((plugin: Object) => plugin.type === 'runtime')
-      .map((plugin: Object) => plugin.ref);
+    const runtimePlugins: Plugin[] = entriesPlugins.filter(
+      (plugin: Object) => plugin.meta.type === 'runtime',
+    );
 
     const outputBeforeHooks: RenderOutput = await render(
       { config, logger },

diff --git a/packages/gluestick/src/renderer/render.js b/packages/gluestick/src/renderer/render.js
@@ -1,5 +1,11 @@
 /* @flow */
-import type { Context, Request, RenderOutput, RenderMethod } from '../types';
+import type {
+  Context,
+  Request,
+  RenderOutput,
+  RenderMethod,
+  Plugin,
+} from '../types';
 
 const React = require('react');
 const { RouterContext } = require('react-router');
@@ -29,7 +35,7 @@ type WrappersRequirements = {
   BodyWrapper: Object,
   entryWrapperConfig: Object,
   envVariables: any[],
-  entriesPlugins: { plugin: Function, meta: Object }[],
+  entriesPlugins: Plugin[],
 };
 type AssetsCacheOpts = {
   assets: Object,
@@ -60,9 +66,7 @@ module.exports = async function render(
   );
   const isEmail = !!currentRoute.email;
   const routerContext = <RouterContext {...renderProps} />;
-  const rootWrappers = entriesPlugins
-    .filter(plugin => plugin.meta.wrapper)
-    .map(({ plugin }) => plugin);
+  const rootWrappers = entriesPlugins.filter(plugin => plugin.meta.wrapper);
   const entryWrapper = (
     <EntryWrapper
       store={store}

diff --git a/packages/gluestick/src/types.js b/packages/gluestick/src/types.js
@@ -212,7 +212,7 @@ export type Plugin = {
     [key: string]: any,
   },
   body: Function | null,
-  options: Object,
+  options?: Object,
 };
 
 export type ConfigPlugin = {