feat: refactor plugins, new browser plugins (#2)

gregberge · web-flow · commit 3b5dd2807f9f · 2019-02-21T15:37:39.000+01:00
diff --git a/examples/wordpress/package.json b/examples/wordpress/package.json
@@ -8,6 +8,7 @@
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
     "smooth-backend-wordpress": "latest",
+    "smooth-plugin-head-meta": "latest",
     "smooth-core": "latest"
   }
 }
diff --git a/examples/wordpress/smooth.config.js b/examples/wordpress/smooth.config.js
@@ -2,8 +2,9 @@ import path from 'path'
 
 module.exports = {
   plugins: [
+    { resolve: 'smooth-plugin-head-meta' },
     {
-      resolve: require.resolve('smooth-backend-wordpress'),
+      resolve: 'smooth-backend-wordpress',
       options: {
         basePath: path.join(__dirname, 'wordpress'),
         baseUrl: 'http://localhost:8000',
diff --git a/examples/wordpress/src/pages/index.js b/examples/wordpress/src/pages/index.js
@@ -6,8 +6,6 @@ import { Link } from 'smooth-core/router'
 export const contentFragment = gql`
   fragment PageProps on Page {
     title
-    date
-    dateTime
     book {
       metadata {
         slug
diff --git a/packages/smooth-backend-wordpress/package.json b/packages/smooth-backend-wordpress/package.json
@@ -2,7 +2,6 @@
   "name": "smooth-backend-wordpress",
   "description": "Wordpress backend for Smooth.js.",
   "version": "0.1.1-alpha.18",
-  "main": "lib/index.js",
   "repository": "https://github.com/smooth-code/smooth.js/tree/master/packages/smooth-backend-wordpress",
   "author": "Greg Bergé <berge.greg@gmail.com>",
   "publishConfig": {
diff --git a/packages/smooth-backend-wordpress/smooth-node.js b/packages/smooth-backend-wordpress/smooth-node.js
@@ -0,0 +1 @@
+module.exports = require('./lib/smooth-node')
diff --git a/packages/smooth-backend-wordpress/src/cpt/index.test.js b/packages/smooth-backend-wordpress/src/cpt/index.test.js
@@ -12,7 +12,7 @@ describe('#onBuild', () => {
 
   it('should generate config', async () => {
     const plugin = {
-      hooks: { onBuild },
+      node: { onBuild },
       options: {
         basePath: '/tmp',
       },
diff --git a/packages/smooth-backend-wordpress/src/smooth-node.js b/packages/smooth-backend-wordpress/src/smooth-node.js
diff --git a/packages/smooth-core/src/api/index.js b/packages/smooth-core/src/api/index.js
@@ -1,4 +1,4 @@
-import { callApi } from '../plugin'
+import { callApi } from '../plugin/node'
 
 export function createAPIClient({ config, lang }) {
   const defaultOptions = { lang }
diff --git a/packages/smooth-core/src/build/index.js b/packages/smooth-core/src/build/index.js
@@ -1,3 +1,4 @@
+import path from 'path'
 import webpack from 'webpack'
 import { applyAsyncHook } from '../plugin'
 import {
@@ -9,6 +10,30 @@ import { createCache } from './cache'
 import { Watcher, watchFs } from './watcher'
 import webpackMiddleware from './webpackMiddleware'
 
+function getPluginFileContent(config) {
+  const imports = []
+  const names = []
+  config.plugins
+    .filter(plugin => plugin.browser)
+    .forEach((plugin, index) => {
+      const name = `plugin${index}`
+      imports.push(
+        `import * as plugin${index} from '${path.join(
+          plugin.resolve,
+          'smooth-browser',
+        )}';`,
+      )
+      names.push(name)
+    })
+
+  return `${imports.join('\n')}\nexport default [${names.join(',')}];`
+}
+
+export async function buildBrowserPlugins({ config }) {
+  const cache = createCache({ config })
+  await cache.writeCacheFile('browser-plugins.js', getPluginFileContent(config))
+}
+
 export async function buildSchemaDefinition({ config }) {
   const schemaDefinition = await createSchemaDefinition({ config })
   const schema = makeExecutableSchema(schemaDefinition)
diff --git a/packages/smooth-core/src/cli/index.js b/packages/smooth-core/src/cli/index.js
@@ -5,6 +5,7 @@ import createLogger from 'progress-estimator'
 import { getConfig } from '../config'
 import { start } from '../server'
 import {
+  buildBrowserPlugins,
   watchSchema,
   buildSchema,
   watchWebpack,
@@ -60,6 +61,7 @@ async function devCommand() {
   clearConsole()
   console.log('> smooth.js 👨‍🚀')
   const config = await getConfig({ dev: true })
+  await logger(buildBrowserPlugins({ config }), 'Build plugins')
   watch({ config })
 }
 
diff --git a/packages/smooth-core/src/client/Page.js b/packages/smooth-core/src/client/Page.js
@@ -2,6 +2,7 @@ import React, { useRef } from 'react'
 import loadable from '@loadable/component'
 import App from '__smooth_app'
 import Content from '__smooth_content'
+import { applyHook } from '../plugin/browser'
 import PageContext from './PageContext'
 
 function getFileName(filePath) {
@@ -62,16 +63,29 @@ export default function Page({
   match,
   location,
 }) {
-  const Component = useRef()
+  const PageComponent = useRef()
+  const ContentComponent = useRef()
   return (
     <page.LoadableComponent>
       {pageModule => {
-        if (!Component.current) {
-          Component.current = page.isContent
-            ? function ContentWrapper() {
-                return <Content Component={pageModule.default} />
-              }
-            : pageModule.default
+        if (page.isContent) {
+          ContentComponent.current =
+            ContentComponent.current ||
+            (props => {
+              const Component = pageModule.default
+              const element = <Component {...props} />
+              return applyHook(
+                'wrapContentElement',
+                { element, props },
+                'element',
+              )
+            })
+
+          PageComponent.current =
+            PageComponent.current ||
+            (() => <Content Component={ContentComponent.current} />)
+        } else {
+          ContentComponent.current = pageModule.default
         }
 
         const pageContext = {
@@ -83,7 +97,7 @@ export default function Page({
         }
         return (
           <PageContext.Provider value={pageContext}>
-            <App {...pageContext} Component={Component.current} />
+            <App {...pageContext} Component={PageComponent.current} />
           </PageContext.Provider>
         )
       }}
diff --git a/packages/smooth-core/src/config/plugins.js b/packages/smooth-core/src/config/plugins.js
@@ -1,12 +1,36 @@
+import path from 'path'
+
+function hasFile(plugin, name) {
+  try {
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    require.resolve(path.join(plugin.resolve, name))
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+function loadFile(plugin, name) {
+  try {
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    return require(path.join(plugin.resolve, name))
+  } catch (error) {
+    return null
+  }
+}
+
 export function parsePlugins(plugins) {
   return plugins.map(plugin => {
     // eslint-disable-next-line global-require, import/no-dynamic-require
-    const hooks = require(plugin.resolve)
+    const node = loadFile(plugin, 'smooth-node')
+    const browser = hasFile(plugin, 'smooth-browser')
+    const options = plugin.options || {}
     return {
-      hooks,
-      options: hooks.resolveOptions
-        ? hooks.resolveOptions(plugin.options)
-        : plugin.options,
+      node,
+      browser,
+      resolve: plugin.resolve,
+      options:
+        node && node.resolveOptions ? node.resolveOptions(options) : options,
     }
   })
 }
diff --git a/packages/smooth-core/src/config/webpack.js b/packages/smooth-core/src/config/webpack.js
@@ -68,6 +68,7 @@ function getTargetConfig(target, { config, dev }) {
             config.cachePath,
             'fragmentTypes.json',
           ),
+          __smooth_plugins: path.join(config.cachePath, 'browser-plugins.js'),
           __smooth_app: getScriptPath(config, '_app.js'),
           __smooth_document: getScriptPath(config, '_document.js'),
           __smooth_error: getScriptPath(config, '_error.js'),
diff --git a/packages/smooth-core/src/content/Query.js b/packages/smooth-core/src/content/Query.js
@@ -6,6 +6,7 @@ import { Redirect } from 'react-router-dom'
 import { Query as ApolloQuery } from 'react-apollo'
 import PageContext from '../client/PageContext'
 import { HTTPError } from '../router'
+import { applyHook } from '../plugin/browser'
 import {
   getFragmentDefinition,
   getFragment,
@@ -23,8 +24,13 @@ function getQuery(page) {
   const type = getDefinitionType(fragmentDefinition)
   const queryField = getQueryField(type)
   const fragmentName = getDefinitionName(fragmentDefinition)
+  const fields = applyHook(
+    'onSelectContentFields',
+    { fields: [`...${fragmentName}`] },
+    'fields',
+  )
 
-  return gql`
+  const query = gql`
     query Content(
       $lang: String
       $slug: String!
@@ -37,12 +43,14 @@ function getQuery(page) {
         id: $id
         preview: $preview
       ) {
-        ...${fragmentName}
+        ${fields}
       }
     }
 
     ${fragment}
   `
+
+  return query
 }
 
 function getVariables(location, lang, slug = 'index') {
diff --git a/packages/smooth-core/src/graphql/schema/index.js b/packages/smooth-core/src/graphql/schema/index.js
@@ -8,7 +8,7 @@ import { parse } from 'graphql'
 import { definitions as baseDefinitions } from '../definitions'
 import { addBlockTypeDefinitions } from './blockType'
 import { addContentTypeDefinitions } from './contentType'
-import { applyAsyncHook } from '../../plugin'
+import { applyAsyncHook } from '../../plugin/node'
 import babelRequire from '../../babel/require'
 
 const exists = promisify(fs.exists)
diff --git a/packages/smooth-core/src/plugin/browser.js b/packages/smooth-core/src/plugin/browser.js
@@ -0,0 +1,20 @@
+import plugins from '__smooth_plugins'
+
+export function runHook(plugin, hook, args) {
+  return plugin[hook](args)
+}
+
+export function hasHook(plugin, hook) {
+  return plugin[hook]
+}
+
+export function applyHook(hook, args, resultKey) {
+  let result = args[resultKey]
+  for (const plugin of plugins) {
+    if (hasHook(plugin, hook)) {
+      // eslint-disable-next-line no-await-in-loop
+      result = runHook(plugin, hook, { ...args, [resultKey]: result })
+    }
+  }
+  return result
+}
diff --git a/packages/smooth-core/src/plugin/index.js b/packages/smooth-core/src/plugin/index.js
@@ -1,38 +1 @@
-import { types } from '../graphql'
-import * as validators from './validators'
-
-export async function runAsyncHook(plugin, hook, value) {
-  return plugin.hooks[hook]({ ...value, options: plugin.options })
-}
-
-export function hasHook(plugin, hook) {
-  return plugin.hooks[hook]
-}
-
-export async function applyAsyncHook(config, hook, value) {
-  const validate = validators[hook]
-
-  if (!validate) {
-    throw new Error(`Unknown hook "${hook}"`)
-  }
-
-  validate(value)
-
-  for (const plugin of config.plugins) {
-    if (hasHook(plugin, hook)) {
-      // eslint-disable-next-line no-await-in-loop
-      await runAsyncHook(plugin, hook, { ...value, config, types })
-    }
-  }
-  return value
-}
-
-export async function callApi(plugins, api, request) {
-  for (const plugin of plugins) {
-    if (plugin.hooks[api]) {
-      return plugin.hooks[api]({ request, options: plugin.options })
-    }
-  }
-
-  return null
-}
+export * from './node'
diff --git a/packages/smooth-core/src/plugin/node.js b/packages/smooth-core/src/plugin/node.js
@@ -0,0 +1,38 @@
+import { types } from '../graphql'
+import * as validators from './validators'
+
+export async function runAsyncHook(plugin, hook, value) {
+  return plugin.node[hook]({ ...value, options: plugin.options })
+}
+
+export function hasHook(plugin, hook) {
+  return plugin.node && plugin.node[hook]
+}
+
+export async function applyAsyncHook(config, hook, value) {
+  const validate = validators[hook]
+
+  if (!validate) {
+    throw new Error(`Unknown hook "${hook}"`)
+  }
+
+  validate(value)
+
+  for (const plugin of config.plugins) {
+    if (hasHook(plugin, hook)) {
+      // eslint-disable-next-line no-await-in-loop
+      await runAsyncHook(plugin, hook, { ...value, config, types })
+    }
+  }
+  return value
+}
+
+export async function callApi(plugins, api, request) {
+  for (const plugin of plugins) {
+    if (plugin.node[api]) {
+      return plugin.node[api]({ request, options: plugin.options })
+    }
+  }
+
+  return null
+}
diff --git a/packages/smooth-plugin-head-meta/package.json b/packages/smooth-plugin-head-meta/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "smooth-plugin-head-meta",
+  "description": "Head meta plugin for Smooth.js",
+  "version": "0.1.1-alpha.18",
+  "repository": "https://github.com/smooth-code/smooth.js/tree/master/packages/smooth-plugin-head-meta",
+  "author": "Greg Bergé <berge.greg@gmail.com>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "smooth-plugin",
+    "wordpress"
+  ],
+  "engines": {
+    "node": ">=8"
+  },
+  "license": "MIT",
+  "scripts": {
+    "prebuild": "shx rm -rf lib",
+    "build": "babel --root-mode upward -d lib --ignore \"**/*.test.js\" --copy-files src",
+    "prepublishOnly": "yarn run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "smooth-core": "^0.1.0"
+  },
+  "dependencies": {
+    "graphql-tag": "^2.10.1"
+  }
+}
diff --git a/packages/smooth-plugin-head-meta/smooth-browser.js b/packages/smooth-plugin-head-meta/smooth-browser.js
@@ -0,0 +1 @@
+module.exports = require('./lib/smooth-browser')
diff --git a/packages/smooth-plugin-head-meta/smooth-node.js b/packages/smooth-plugin-head-meta/smooth-node.js
@@ -0,0 +1 @@
+module.exports = require('./lib/smooth-node')
diff --git a/packages/smooth-plugin-head-meta/src/definitions/HeadMeta.js b/packages/smooth-plugin-head-meta/src/definitions/HeadMeta.js
diff --git a/packages/smooth-plugin-head-meta/src/smooth-browser.js b/packages/smooth-plugin-head-meta/src/smooth-browser.js
diff --git a/packages/smooth-plugin-head-meta/src/smooth-node.js b/packages/smooth-plugin-head-meta/src/smooth-node.js

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@`
`8`	`8`	`"react": "^16.8.2",`
`9`	`9`	`"react-dom": "^16.8.2",`
`10`	`10`	`"smooth-backend-wordpress": "latest",`
	`11`	`+ "smooth-plugin-head-meta": "latest",`
`11`	`12`	`"smooth-core": "latest"`
`12`	`13`	`}`
`13`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+module.exports = require('./lib/smooth-node')`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { callApi } from '../plugin'`
	`1`	`+import { callApi } from '../plugin/node'`
`2`	`2`
`3`	`3`	`export function createAPIClient({ config, lang }) {`
`4`	`4`	`const defaultOptions = { lang }`