From cf07abb420281fc7974cbce27a4d8a79a8116aa5 Mon Sep 17 00:00:00 2001 From: Rafael Almeida Date: Fri, 11 Oct 2019 02:12:50 -0300 Subject: [PATCH 1/5] Update inferno examples to v7.3 --- examples/using-inferno/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/using-inferno/package.json b/examples/using-inferno/package.json index 50688becd898a..abdd25ff7ead7 100644 --- a/examples/using-inferno/package.json +++ b/examples/using-inferno/package.json @@ -7,9 +7,9 @@ "start": "NODE_ENV=production node server.js" }, "dependencies": { - "inferno": "^1.4.0", - "inferno-compat": "^1.4.0", - "inferno-server": "^1.4.0", + "inferno": "7.3.2", + "inferno-compat": "7.3.2", + "inferno-server": "7.3.2", "module-alias": "^2.0.0", "next": "latest", "react": "^16.7.0", From cd9bdca5f682be33e4806beadb216a48bcfa6309 Mon Sep 17 00:00:00 2001 From: Rafael Almeida Date: Fri, 11 Oct 2019 03:09:40 -0300 Subject: [PATCH 2/5] Add polyfill for React.createContext --- examples/using-inferno/README.md | 1 + examples/using-inferno/lib/inferno-compat.js | 11 +++++++++++ examples/using-inferno/package.json | 1 + examples/using-inferno/server.js | 5 +++-- 4 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 examples/using-inferno/lib/inferno-compat.js diff --git a/examples/using-inferno/README.md b/examples/using-inferno/README.md index efbf117936b27..aaa47ca585949 100644 --- a/examples/using-inferno/README.md +++ b/examples/using-inferno/README.md @@ -44,3 +44,4 @@ This example uses [Inferno](https://github.com/infernojs/inferno), an insanely f Here's how we did it: - Use `next.config.js` to customize our webpack config to support [inferno-compat](https://www.npmjs.com/package/inferno-compat) +- Create `lib/inferno-compat.js` to polyfill the `React.createContext` API (required by Next.js) that is not available by `inferno-compat` diff --git a/examples/using-inferno/lib/inferno-compat.js b/examples/using-inferno/lib/inferno-compat.js new file mode 100644 index 0000000000000..e21320e5f6f56 --- /dev/null +++ b/examples/using-inferno/lib/inferno-compat.js @@ -0,0 +1,11 @@ +const React = require('inferno-compat') +const createContext = require('create-react-context/lib/implementation') + +Object.keys(React).forEach(key => { + if (key === 'default' || key === '__esModule') return + exports[key] = React[key] +}) + +// bypass export of React.createContext +exports.createContext = createContext +exports.default = React.default diff --git a/examples/using-inferno/package.json b/examples/using-inferno/package.json index abdd25ff7ead7..2f74fa7bf5cc7 100644 --- a/examples/using-inferno/package.json +++ b/examples/using-inferno/package.json @@ -7,6 +7,7 @@ "start": "NODE_ENV=production node server.js" }, "dependencies": { + "create-react-context": "0.3.0", "inferno": "7.3.2", "inferno-compat": "7.3.2", "inferno-server": "7.3.2", diff --git a/examples/using-inferno/server.js b/examples/using-inferno/server.js index 86b0cdcdee2f4..0e351d2cc4649 100644 --- a/examples/using-inferno/server.js +++ b/examples/using-inferno/server.js @@ -1,13 +1,14 @@ const port = parseInt(process.env.PORT, 10) || 3000 const dev = process.env.NODE_ENV !== 'production' const moduleAlias = require('module-alias') +const path = require('path') // 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', path.resolve('./lib/inferno-compat.js')) moduleAlias.addAlias('react-dom/server', 'inferno-server') - moduleAlias.addAlias('react-dom', 'inferno-compat') + moduleAlias.addAlias('react-dom', path.resolve('./lib/inferno-compat.js')) } const { createServer } = require('http') From fb74ebfba15937a6569324afc69dcd2dba388e44 Mon Sep 17 00:00:00 2001 From: Rafael Almeida Date: Sat, 12 Oct 2019 00:38:13 -0300 Subject: [PATCH 3/5] Alias react and react-dom with inferno-compat --- examples/using-inferno/next.config.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/examples/using-inferno/next.config.js b/examples/using-inferno/next.config.js index f05f1bc5aab22..749f254557f6e 100644 --- a/examples/using-inferno/next.config.js +++ b/examples/using-inferno/next.config.js @@ -1,5 +1,7 @@ +const path = require('path') + module.exports = { - webpack: function (config, { dev }) { + webpack: function(config, { dev }) { // For the development version, we'll use React. // Because, it support react hot loading and so on. if (dev) { @@ -8,9 +10,11 @@ module.exports = { config.resolve.alias = { ...config.resolve.alias, - react: 'inferno-compat', - 'react-dom': 'inferno-compat' + react: path.resolve('./lib/inferno-compat.js'), + 'react-dom': path.resolve('./lib/inferno-compat.js'), + 'react-dom/server': 'inferno-server', } + return config - } + }, } From ece656f740bf7334b527ef4ddedb2c66287d712c Mon Sep 17 00:00:00 2001 From: Rafael Almeida Date: Sat, 12 Oct 2019 15:51:17 -0300 Subject: [PATCH 4/5] Fix linter errors --- examples/using-inferno/next.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/using-inferno/next.config.js b/examples/using-inferno/next.config.js index 749f254557f6e..c4f32880fbd14 100644 --- a/examples/using-inferno/next.config.js +++ b/examples/using-inferno/next.config.js @@ -1,7 +1,7 @@ const path = require('path') module.exports = { - webpack: function(config, { dev }) { + webpack: function (config, { dev }) { // For the development version, we'll use React. // Because, it support react hot loading and so on. if (dev) { @@ -12,9 +12,9 @@ module.exports = { ...config.resolve.alias, react: path.resolve('./lib/inferno-compat.js'), 'react-dom': path.resolve('./lib/inferno-compat.js'), - 'react-dom/server': 'inferno-server', + 'react-dom/server': 'inferno-server' } return config - }, + } } From 05be49b20a77bb66386a769ea580085200fdd9fa Mon Sep 17 00:00:00 2001 From: Rafael Almeida Date: Tue, 15 Oct 2019 02:19:40 -0300 Subject: [PATCH 5/5] Add warning about hooks and suspense support --- examples/using-inferno/README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/using-inferno/README.md b/examples/using-inferno/README.md index aaa47ca585949..5671e91d0ce53 100644 --- a/examples/using-inferno/README.md +++ b/examples/using-inferno/README.md @@ -1,4 +1,6 @@ -# Hello World example +# Inferno example + +> **Important**: Inferno does not support hooks nor Suspense. It may work on development where React is utilized instead of Inferno, but it will break as soon as you try to build it or start it out of development. ## How to use @@ -39,7 +41,7 @@ now ## The idea behind the example -This example uses [Inferno](https://github.com/infernojs/inferno), an insanely fast, 9kb React-like library for building high-performance user interfaces on both the client and server. Here we've customized Next.js to use Inferno instead of React. +This example uses [Inferno](https://github.com/infernojs/inferno), an insanely fast, 9kb React-like library for building high-performance user interfaces on both the client and server. Here we've customized Next.js to use Inferno instead of React in the production build. Here's how we did it: