feat: support client side only template

Author: marconi1992

saofile.js

@@ -11,23 +11,43 @@ module.exports = {
       },
       {
         name: 'description',
-        message: 'How would you descripe the new project',
+        message: 'How would you describe the new project',
         default: `Another Hypernova React project`
-      }
+      },
+      {
+        name: 'hasSSR',
+        type: 'confirm',
+        message: 'Do you want to include Server-Side Rendering (SSR)',
+        default: true
+      },
     ]
   },
-  actions: [
-    {
-      type: 'add',
-      files: '**'
-    },
-    {
-      type: 'move',
-      patterns: {
-        gitignore: '.gitignore'
+  actions: function() {
+    return [
+      {
+        type: 'add',
+        files: '**',
+        filters: {
+          'webpack.client.config.js': !this.answers.hasSSR,
+          'package.client.json': !this.answers.hasSSR
+        }
+      },
+      {
+        type: 'move',
+        patterns: {
+          'webpack.client.config.js' : 'webpack.config.js',
+          'package.client.json' : 'package.json',
+          [`src/${this.answers.hasSSR ? 'index': 'client'}.js`]: 'src/index.js'
+        }
+      },
+      {
+        type: 'move',
+        patterns: {
+          gitignore: '.gitignore'
+        }
       }
-    }
-  ],
+    ]
+  },
   async completed() {
     await this.npmInstall()
     this.showProjectTips()

template/package.client.json

@@ -0,0 +1,34 @@
+{
+  "name": "<%= name %>",
+  "description": "<%= description %>",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "webpack --mode production",
+    "dev": "webpack-dev-server --mode development",
+    "lint": "eslint ./ --ignore-pattern dist/"
+  },
+  "dependencies": {
+    "express": "^4.17.1",
+    "hypernova": "^2.5.0",
+    "nova-react": "^1.0.2",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/runtime": "^7.5.5",
+    "babel-loader": "^8.0.6",
+    "babel-preset-airbnb": "^4.0.1",
+    "css-loader": "^2.1.1",
+    "eslint": "^5.14.1",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "webpack": "^4.29.5",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.8.0"
+  }
+}

template/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "express": "^4.17.1",
     "hypernova": "^2.5.0",
-    "nova-react": "^1.0.2-alpha.0",
+    "nova-react": "^1.0.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.3",
     "react-dom": "^16.8.3"

template/src/client.js

@@ -1,5 +1,21 @@
-import { renderReact } from 'nova-react';
+import { mountComponent, loadById, load } from 'nova-react';
 
 import Example from './components/Example';
 
-renderReact('Example', Example);
+const render = (name, { node, data }) => {
+  if (name === 'Example') {
+    return mountComponent(Example, node, data)
+  }
+}
+
+document.addEventListener('NovaMount', ({ detail }) => {
+  const { name, id } = detail
+
+  const payload = loadById(name, id)
+
+  if (payload) {
+    render(name, payload)
+  }
+})
+
+load('Example').forEach(render.bind(null, 'Example'))

template/webpack.client.config.js

@@ -0,0 +1,25 @@
+const path = require('path');
+
+module.exports = {
+  target: 'web',
+  node: {
+    fs: 'empty',
+    module: 'empty',
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'client.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js|\.jsx$/,
+        exclude: /node_modules/,
+        use: 'babel-loader',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+};