Enabled HMR; Reworked render-server.js; Bumped Crystal to 0.31.1

Author: noahlh

.babelrc

@@ -0,0 +1,27 @@
+const babelPresetEnv = require("@babel/preset-env");
+const babelPluginModuleResolver = require("babel-plugin-module-resolver");
+const path = require("path");
+
+module.exports = function(api) {
+  api.cache(true);
+
+  const presets = [
+    [
+      babelPresetEnv,
+      {
+        targets: { node: true }
+      }
+    ]
+  ];
+
+  const plugins = [
+    [
+      babelPluginModuleResolver,
+      {
+        root: [path.resolve(__dirname)]
+      }
+    ]
+  ];
+
+  return { presets, plugins };
+};

babel.config.js

@@ -1,12 +1,13 @@
 const path = require("path");
+const fs = require("fs");
 const VueLoaderPlugin = require("vue-loader/lib/plugin");
-const babelPresetEnv = require("babel-preset-env");
 
 module.exports = {
   resolve: {
     alias: {
       scripts: path.resolve(__dirname, "../../src/scripts/")
-    }
+    },
+    modules: [path.resolve(__dirname, "../../node_modules")]
   },
   resolveLoader: {
     modules: [path.resolve(__dirname, "../../node_modules")]
@@ -25,7 +26,7 @@ module.exports = {
         use: {
           loader: "babel-loader",
           options: {
-            presets: [babelPresetEnv]
+            rootMode: "upward"
           }
         }
       },

config/webpack/webpack-base-cfg.js

@@ -1,18 +1,17 @@
-const webpack = require('webpack')
-const merge = require('webpack-merge')
-const path = require('path')
-const baseConfig = require('./webpack-base-cfg.js')
-const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const path = require("path");
+const baseConfig = require("./webpack-base-cfg.js");
+const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
 
 module.exports = merge(baseConfig, {
-  name: 'vue-client',
+  name: "vue-client",
+  target: "web",
   entry: {
-    client: 'scripts/entry-client.js',
+    client: "scripts/entry-client.js"
   },
   output: {
-    filename: 'cvue.[name].js'
+    filename: "cvue.[name].[hash].js"
   },
-  plugins: [
-    new VueSSRClientPlugin()
-  ]
-})
+  plugins: [new VueSSRClientPlugin()]
+});

config/webpack/webpack-vue-client-cfg.js

@@ -5,19 +5,20 @@
   "author": "Noah Lehmann-Haupt <nlh@nlh.me>",
   "license": "MIT",
   "scripts": {
-    "build": "npx babel src/server -d build/server",
-    "dev": "npx nodemon --exec node build/server/render-server.js",
-    "prod": "node build/server/render-server.js",
+    "build": "rm -rf build/ && npx babel src/server -d build/server",
+    "dev": "NODE_ENV=development npx nodemon --exec node build/server/render-server.js",
+    "prod": "NODE_ENV=production node build/server/render-server.js",
     "predev": "yarn build",
     "preprod": "yarn build"
   },
   "dependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "7",
+    "@babel/cli": "^7.6.2",
+    "@babel/core": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "babel-loader": "^8.0.6",
     "babel-plugin-module-resolver": "^3.2.0",
-    "babel-preset-env": "^1.7.0",
     "css-loader": "^2.0.1",
+    "express": "^4.17.1",
     "nodemon": "^1.19.2",
     "vue": "^2.5.21",
     "vue-loader": "^15.4.2",

package.json

@@ -7,12 +7,13 @@ def get_logger
   Logger.new(STDOUT)
 end
 
-def run_spec_server(renderer, timeout = 5.seconds)
+def run_spec_server(renderer, timeout = 10.seconds)
   channel = Channel(Process).new
 
   IO.pipe do |reader, writer|
-    # multi = IO::MultiWriter.new(STDOUT, writer) ## uncomment for debugging
+    # multi = IO::MultiWriter.new(STDOUT, writer) # # uncomment for debugging
     now = Time.monotonic
+    # renderer.logger = Logger.new(multi) # uncomment for debugging
     renderer.logger = Logger.new(writer)
     spawn do
       proc = renderer.start_server
@@ -22,7 +23,8 @@ def run_spec_server(renderer, timeout = 5.seconds)
     begin
       proc = channel.receive
       loop do
-        break if reader.gets =~ /SSR renderer listening/
+        # break if reader.gets =~ /SSR renderer listening/
+        break if reader.gets =~ /Webpack compilation complete/
         raise "Node server failed to start within timeout" if ((Time.monotonic - now) > timeout)
         raise "Node server terminated due to fault" if proc.terminated?
         sleep 0.1