diff --git a/examples/using-inferno/README.md b/examples/using-inferno/README.md index efbf117936b2791cc691f327edd4b59b586cb37c..5671e91d0ce53e3a207dbf08b4fa5648b522fe4c 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,8 +41,9 @@ 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: - 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 0000000000000000000000000000000000000000..e21320e5f6f5641b915542c4ef279b32a89d46da --- /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/next.config.js b/examples/using-inferno/next.config.js index f05f1bc5aab220f99fcb07a2527945596833588f..c4f32880fbd14eeda8e6ab543f8885c532b33f12 100644 --- a/examples/using-inferno/next.config.js +++ b/examples/using-inferno/next.config.js @@ -1,3 +1,5 @@ +const path = require('path') + module.exports = { webpack: function (config, { dev }) { // For the development version, we'll use React. @@ -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 } } diff --git a/examples/using-inferno/package.json b/examples/using-inferno/package.json index 50688becd898ade6cbbfd6d0cf00cc8551f444a7..2f74fa7bf5cc70c85caa9d96c2cb25ec091f2859 100644 --- a/examples/using-inferno/package.json +++ b/examples/using-inferno/package.json @@ -7,9 +7,10 @@ "start": "NODE_ENV=production node server.js" }, "dependencies": { - "inferno": "^1.4.0", - "inferno-compat": "^1.4.0", - "inferno-server": "^1.4.0", + "create-react-context": "0.3.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", diff --git a/examples/using-inferno/server.js b/examples/using-inferno/server.js index 86b0cdcdee2f4969d3ad2c3b19c2e27e190e84c5..0e351d2cc4649e7792c8d0d36e5498121e9077f7 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')