feat: move webpack plugin into this package, better workflow

Author: JounQin

README.md

@@ -1,11 +1,15 @@
 # react-server-renderer
 
 [![Greenkeeper badge](https://badges.greenkeeper.io/JounQin/react-server-renderer.svg)](https://greenkeeper.io/)
+[![Travis](https://img.shields.io/travis/JounQin/react-server-renderer.svg)](https://travis-ci.org/JounQin/react-server-renderer)
+[![David](https://img.shields.io/david/JounQin/react-server-renderer.svg)](https://david-dm.org/JounQin/react-server-renderer)
+[![David Dev](https://img.shields.io/david/dev/JounQin/react-server-renderer.svg)](https://david-dm.org/JounQin/react-server-renderer?type=dev)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
 Yet another simple React SSR solution inspired by vue-server-render with:
 
 1. Server bundle with hot reload on development and source map support
-2. prefetch/preload client injection with ClientManifest, generated by [ssr-webpack-plugin](https://github.com/JounQin/ssr-webpack-plugin)
+2. prefetch/preload client injection with ClientManifest, generated by webpack-plugin inside
 3. server css support with [react-style-loader](https://github.com/JounQin/react-style-loader)
 4. Async component support with [react-async-component](https://github.com/ctrlplusb/react-async-component) and [react-async-bootstrapper](https://github.com/ctrlplusb/react-async-bootstrapper)
 5. custom dynamic head management for better SEO
@@ -18,7 +22,7 @@ Yet another simple React SSR solution inspired by vue-server-render with:
 
 This module is heavily inspired by [vue-server-render](https://ssr.vuejs.org), it is recommended to read about [bundle-renderer](https://ssr.vuejs.org/en/bundle-renderer.html).
 
-If you're using [react-router](https://github.com/ReactTraining/react-router), you should read about [Server Rendering](https://reacttraining.com/react-router/web/guides/server-rendering).
+It uses [react-router](https://github.com/ReactTraining/react-router) on server, so you should read about [Server Rendering](https://reacttraining.com/react-router/web/guides/server-rendering).
 
 And also, data injection should be implement with [asyncBootstrap](https://github.com/ctrlplusb/react-async-bootstrapper).
 
@@ -30,7 +34,7 @@ And also, data injection should be implement with [asyncBootstrap](https://githu
 import webpack from 'webpack'
 import merge from 'webpack-merge'
 import nodeExternals from 'webpack-node-externals'
-import { SSRServerPlugin } from 'ssr-webpack-plugin'
+import { ReactSSRServerPlugin } from 'react-server-renderer/server-plugin'
 
 import { resolve } from './config'
 
@@ -58,7 +62,7 @@ export default merge.smart(base, {
   // and generates a smaller bundle file.
   externals: nodeExternals({
     // do not externalize dependencies that need to be processed by webpack.
-    // you can add more file types here e.g. raw *.vue files
+    // you can add more file types here
     // you should also whitelist deps that modifies `global` (e.g. polyfills)
     whitelist: /\.s?css$/,
   }),
@@ -70,8 +74,8 @@ export default merge.smart(base, {
     }),
     // This is the plugin that turns the entire output of the server build
     // into a single JSON file. The default file name will be
-    // `ssr-server-bundle.json`
-    new SSRServerPlugin(),
+    // `react-ssr-server-bundle.json`
+    new ReactSSRServerPlugin(),
   ],
 })
 ```
@@ -83,7 +87,7 @@ import webpack from 'webpack'
 import merge from 'webpack-merge'
 // do not need 'html-webpack-plugin' any more because we will render html from server
 // import HtmlWebpackPlugin from 'html-webpack-plugin'
-import { SSRClientPlugin } from 'ssr-webpack-plugin'
+import { ReactSSRClientPlugin } from 'react-server-renderer/client-plugin'
 
 import { __DEV__, publicPath, resolve } from './config'
 
@@ -92,15 +96,6 @@ import base from './base'
 export default merge.smart(base, {
   entry: {
     app: [resolve('src/entry-client.js')],
-    vendors: [
-      'react',
-      'react-dom',
-      'react-redux',
-      'react-router',
-      'react-router-redux',
-      'react-router-config',
-      'react-router-dom',
-    ],
   },
   output: {
     publicPath,
@@ -112,14 +107,11 @@ export default merge.smart(base, {
       'process.env.REACT_ENV': '"client"',
       __SERVER__: false,
     }),
-    new webpack.optimize.CommonsChunkPlugin({
-      names: ['vendors', 'manifest'],
-    }),
-    // This plugins generates `ssr-client-manifest.json` in the
+    // This plugins generates `react-ssr-client-manifest.json` in the
     // output directory.
-    new SSRClientPlugin({
-      // path relative to your output path, default to be `ssr-client-manifest.json`
-      filename: '../ssr-client-manifest.json',
+    new ReactSSRClientPlugin({
+      // path relative to your output path, default to be `react-ssr-client-manifest.json`
+      filename: '../react-ssr-client-manifest.json',
     }),
   ],
 })
@@ -131,8 +123,8 @@ You can then use the generated client manifest, together with a page template:
 const { createBundleRenderer } = require('react-server-renderer')
 
 const template = require('fs').readFileSync('/path/to/template.html', 'utf-8')
-const serverBundle = require('/path/to/vue-ssr-server-bundle.json')
-const clientManifest = require('/path/to/vue-ssr-client-manifest.json')
+const serverBundle = require('/path/to/react-ssr-server-bundle.json')
+const clientManifest = require('/path/to/react-ssr-client-manifest.json')
 
 const renderer = createBundleRenderer(serverBundle, {
   template,
@@ -349,8 +341,8 @@ Then `react-server-renderer` will automatically collect user styles and title on
 
 Notes:
 
-* Use double-mustache (HTML-escaped interpolation) to avoid XSS attacks.
-* You should provide a default title when creating the context object in case no component has set a title during render.
+- Use double-mustache (HTML-escaped interpolation) to avoid XSS attacks.
+- You should provide a default title when creating the context object in case no component has set a title during render.
 
 Using the same strategy, you can easily expand it into a generic head management utility.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-server-renderer",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "simple React SSR solution inspired by vue-server-render",
   "repository": "git@github.com:JounQin/react-server-renderer.git",
   "main": "lib/index.js",
@@ -9,11 +9,27 @@
   "license": "MIT",
   "scripts": {
     "lint": "tslint -p . -t stylish",
-    "prepublishOnly": "tsc"
+    "build": "tsc"
   },
   "files": [
     "lib"
   ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "pre-push": "tsc"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "tslint -t stylish --fix",
+      "git add"
+    ],
+    "*.{md,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
   "prettier": {
     "semi": false,
     "singleQuote": true,
@@ -24,20 +40,27 @@
     "react-dom": "^16.4.2"
   },
   "dependencies": {
+    "hash-sum": "^1.0.2",
     "lodash": "^4.17.11",
+    "lodash.uniq": "^4.5.0",
     "resolve": "^1.8.1",
     "serialize-javascript": "^1.5.0",
     "source-map": "^0.7.0"
   },
   "devDependencies": {
+    "@types/hash-sum": "^1.0.0",
+    "@types/lodash.uniq": "^4.5.4",
     "@types/node": "^10.11.7",
     "@types/react": "^16.4.16",
     "@types/react-dom": "^16.0.9",
+    "husky": "^1.1.2",
+    "lint-staged": "^7.3.0",
     "prettier": "^1.14.3",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",
+    "tslint-config-standard": "^8.0.1",
     "tslint-plugin-prettier": "^2.0.0",
     "typescript": "^3.1.3"
   }

src/bundle-renderer/create-bundle-renderer.ts

@@ -56,7 +56,7 @@ export function createBundleRendererCreator(
         bundle = fs.readFileSync(bundle, 'utf-8')
         if (isJSON) {
           try {
-            bundle = JSON.parse(bundle as string)
+            bundle = JSON.parse(bundle)
           } catch (e) {
             throw new Error(`Invalid JSON bundle file: ${bundle}`)
           }

src/client-plugin.ts

@@ -0,0 +1 @@
+export { ReactSSRClientPlugin } from './webpack-plugin/client'

src/index.ts

@@ -1,13 +1,5 @@
-// tslint:disable no-unused-variable
-import { PassThrough } from 'stream'
-
-import {
-  RenderBundle,
-  createBundleRendererCreator,
-} from './bundle-renderer/create-bundle-renderer'
+import { createBundleRendererCreator } from './bundle-renderer/create-bundle-renderer'
 import { createRenderer } from './create-renderer'
-import { TemplateRendererOptions } from './template-renderer'
-import { UserContext } from './util'
 
 process.env.REACT_ENV = 'server'
 

src/server-plugin.ts

@@ -0,0 +1 @@
+export { ReactSSRServerPlugin } from './webpack-plugin/server'

src/template-renderer/template-stream.ts

@@ -26,7 +26,7 @@ export default class TemplateStream extends Transform {
     this.inject = renderer.inject
   }
 
-  _transform(data: Buffer | string, encoding: string, done: () => void) {
+  _transform(data: Buffer | string, _encoding: string, done: () => void) {
     if (!this.started) {
       this.emit('beforeStart')
       this.start()

src/webpack-plugin/client.ts

@@ -0,0 +1,83 @@
+import hash from 'hash-sum'
+import uniq from 'lodash.uniq'
+import { isCSS, isJS, onEmit } from './util'
+
+export class ReactSSRClientPlugin {
+  options: {
+    filename?: string
+  }
+
+  constructor(options = {}) {
+    this.options = Object.assign(
+      {
+        filename: 'react-ssr-client-manifest.json',
+      },
+      options,
+    )
+  }
+
+  apply(compiler) {
+    onEmit(compiler, 'react-client-plugin', (compilation, cb) => {
+      const stats = compilation.getStats().toJson()
+
+      const allFiles = uniq<string>(stats.assets.map(a => a.name))
+
+      const initialFiles = uniq(
+        Object.keys(stats.entrypoints)
+          .map(name => stats.entrypoints[name].assets)
+          .reduce((assets, all) => all.concat(assets), [])
+          .filter(file => isJS(file) || isCSS(file)),
+      )
+
+      const asyncFiles = allFiles
+        .filter(file => isJS(file) || isCSS(file))
+        .filter(file => initialFiles.indexOf(file) < 0)
+
+      const manifest = {
+        publicPath: stats.publicPath,
+        all: allFiles,
+        initial: initialFiles,
+        async: asyncFiles,
+        modules: {
+          /* [identifier: string]: Array<index: number> */
+        },
+      }
+
+      const assetModules = stats.modules.filter(m => m.assets.length)
+      const fileToIndex = file => manifest.all.indexOf(file)
+      stats.modules.forEach(m => {
+        // ignore modules duplicated in multiple chunks
+        if (m.chunks.length === 1) {
+          const cid = m.chunks[0]
+          const chunk = stats.chunks.find(c => c.id === cid)
+          if (!chunk || !chunk.files) {
+            return
+          }
+          const id = m.identifier.replace(/\s\w+$/, '') // remove appended hash
+          const files = (manifest.modules[hash(id)] = chunk.files.map(
+            fileToIndex,
+          ))
+          // find all asset modules associated with the same chunk
+          assetModules.forEach(module => {
+            if (module.chunks.some(chunkId => chunkId === cid)) {
+              files.push.apply(files, module.assets.map(fileToIndex))
+            }
+          })
+        }
+      })
+
+      // const debug = (file, obj) => {
+      //   require('fs').writeFileSync(__dirname + '/' + file, JSON.stringify(obj, null, 2))
+      // }
+      // debug('stats.json', stats)
+      // debug('client-manifest.json', manifest)
+
+      const json = JSON.stringify(manifest, null, 2)
+      compilation.assets[this.options.filename] = {
+        source: () => json,
+        size: () => json.length,
+      }
+      cb()
+    })
+  }
+}

src/webpack-plugin/server.ts

@@ -0,0 +1,75 @@
+import { isJS, onEmit, validate } from './util'
+
+export class ReactSSRServerPlugin {
+  options: {
+    filename?: string
+  }
+
+  constructor(options = {}) {
+    this.options = Object.assign(
+      {
+        filename: 'react-ssr-server-bundle.json',
+      },
+      options,
+    )
+  }
+
+  apply(compiler) {
+    validate(compiler)
+
+    onEmit(compiler, 'react-server-plugin', (compilation, cb) => {
+      const stats = compilation.getStats().toJson()
+      const entryName = Object.keys(stats.entrypoints)[0]
+      const entryInfo = stats.entrypoints[entryName]
+
+      if (!entryInfo) {
+        // #5553
+        return cb()
+      }
+
+      const entryAssets = entryInfo.assets.filter(isJS)
+
+      if (entryAssets.length > 1) {
+        throw new Error(
+          `Server-side bundle should have one single entry file. ` +
+            `Avoid using CommonsChunkPlugin in the server config.`,
+        )
+      }
+
+      const entry = entryAssets[0]
+      if (!entry || typeof entry !== 'string') {
+        throw new Error(
+          `Entry "${entryName}" not found. Did you specify the correct entry option?`,
+        )
+      }
+
+      const bundle = {
+        entry,
+        files: {},
+        maps: {},
+      }
+
+      stats.assets.forEach(asset => {
+        if (asset.name.match(/\.js$/)) {
+          bundle.files[asset.name] = compilation.assets[asset.name].source()
+        } else if (asset.name.match(/\.js\.map$/)) {
+          bundle.maps[asset.name.replace(/\.map$/, '')] = JSON.parse(
+            compilation.assets[asset.name].source(),
+          )
+        }
+        // do not emit anything else for server
+        delete compilation.assets[asset.name]
+      })
+
+      const json = JSON.stringify(bundle, null, 2)
+      const filename = this.options.filename
+
+      compilation.assets[filename] = {
+        source: () => json,
+        size: () => json.length,
+      }
+
+      cb()
+    })
+  }
+}