Implement preact/inferno SSR (vercel#1346)

timneutkens · rauchg · commit 5947716ff782 · 2017-03-04T17:47:56.000-08:00
* Use module-alias to alias preact server side

* Use module-alias to alias inferno server side

* Remove unneeded routes example
diff --git a/examples/using-inferno/next.config.js b/examples/using-inferno/next.config.js
@@ -1,5 +1,11 @@
 module.exports = {
-  webpack: function (config) {
+  webpack: function (config, { dev }) {
+    // For the development version, we'll use React.
+    // Because, it support react hot loading and so on.
+    if (dev) {
+      return config
+    }
+
     config.resolve.alias = {
       'react': 'inferno-compat',
       'react-dom': 'inferno-compat'
diff --git a/examples/using-inferno/package.json b/examples/using-inferno/package.json
@@ -2,13 +2,15 @@
   "name": "using-inferno",
   "version": "1.0.0",
   "scripts": {
-    "dev": "next",
+    "dev": "node server.js",
     "build": "next build",
-    "start": "next start"
+    "start": "NODE_ENV=production node server.js"
   },
   "dependencies": {
     "inferno": "^1.0.7",
     "inferno-compat": "^1.0.7",
+    "inferno-server": "^1.3.0-rc.9",
+    "module-alias": "^2.0.0",
     "next": "^2.0.0-beta",
     "react": "^15.4.2",
     "react-dom": "^15.4.2"
diff --git a/examples/using-inferno/server.js b/examples/using-inferno/server.js
@@ -0,0 +1,29 @@
+const dev = process.env.NODE_ENV !== 'production'
+const moduleAlias = require('module-alias')
+
+// For the development version, we'll use React.
+// Because, it support react hot loading and so on.
+if (!dev) {
+  moduleAlias.addAlias('react', 'inferno-compat')
+  moduleAlias.addAlias('react-dom/server', 'inferno-server')
+  moduleAlias.addAlias('react-dom', 'inferno-compat')
+}
+
+const { createServer } = require('http')
+const { parse } = require('url')
+const next = require('next')
+
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare()
+.then(() => {
+  createServer((req, res) => {
+    const parsedUrl = parse(req.url, true)
+    handle(req, res, parsedUrl)
+  })
+  .listen(3000, (err) => {
+    if (err) throw err
+    console.log('> Ready on http://localhost:3000')
+  })
+})
diff --git a/examples/using-preact/next.config.js b/examples/using-preact/next.config.js
@@ -1,9 +1,26 @@
 module.exports = {
-  webpack: function (config) {
+  webpack: function (config, { dev }) {
+    // For the development version, we'll use React.
+    // Because, it support react hot loading and so on.
+    if (dev) {
+      return config
+    }
+
     config.resolve.alias = {
       'react': 'preact-compat/dist/preact-compat',
       'react-dom': 'preact-compat/dist/preact-compat'
     }
+
+    // Disable uglify. This has been fixed in https://github.com/developit/preact-compat/issues/155.
+    // Can be removed once there is a new preact-compat release.
+    config.plugins = config.plugins.filter((plugin) => {
+      if (plugin.constructor.name === 'UglifyJsPlugin') {
+        return false
+      } else {
+        return true
+      }
+    })
+
     return config
   }
 }
diff --git a/examples/using-preact/package.json b/examples/using-preact/package.json
@@ -2,11 +2,12 @@
   "name": "hello-world",
   "version": "1.0.0",
   "scripts": {
-    "dev": "next",
+    "dev": "node server.js",
     "build": "next build",
-    "start": "next start"
+    "start": "NODE_ENV=production node server.js"
   },
   "dependencies": {
+    "module-alias": "^2.0.0",
     "next": "^2.0.0-beta",
     "preact": "^7.1.0",
     "preact-compat": "^3.9.4",
diff --git a/examples/using-preact/server.js b/examples/using-preact/server.js
@@ -0,0 +1,28 @@
+const dev = process.env.NODE_ENV !== 'production'
+const moduleAlias = require('module-alias')
+
+// For the development version, we'll use React.
+// Because, it support react hot loading and so on.
+if (dev) {
+  moduleAlias.addAlias('react', 'preact-compat')
+  moduleAlias.addAlias('react-dom', 'preact-compat')
+}
+
+const { createServer } = require('http')
+const { parse } = require('url')
+const next = require('next')
+
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare()
+.then(() => {
+  createServer((req, res) => {
+    const parsedUrl = parse(req.url, true)
+    handle(req, res, parsedUrl)
+  })
+  .listen(3000, (err) => {
+    if (err) throw err
+    console.log('> Ready on http://localhost:3000')
+  })
+})
