fix: fix various bugs (#857)

* safe define displayName, fix #845 * stand children did not exists, fix #843 * improve TS documentation * add SSR+HRM example * subrender - fix deferred updates * dont fix package version * should have react as a peer dep * use didMount instead of will, related to #860
gaearon · Feb 16, 2018 · 8fa1d42 · 8fa1d42
1 parent 99da77b
commit 8fa1d42
Show file tree

Hide file tree

Showing 25 changed files with 5,242 additions and 235 deletions.
diff --git a/README.md b/README.md
@@ -127,6 +127,19 @@ Just add babel-loader into your webpack configuration, with RHL-only config.
 }
 ```
 
+You **also have to modify tsconfig**
+
+```json
+{
+   ...
+   "module": "commonjs", // module should be commonjs, as long "imports" in TS and Babel works differently.
+   "target": "es6", // target should be es6, or RHL will be unable to change some class members
+   ...
+}
+```
+
+Yet again - module = es6 **will not work**.
+
 ### Parcel Bundler
 
 Parcel's HRM is a bit different.

diff --git a/examples/SSR/.babelrc b/examples/SSR/.babelrc
@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "env",
+    "react"
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "transform-class-properties",
+    "dynamic-import-node"
+  ]
+}
diff --git a/examples/SSR/.gitignore b/examples/SSR/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/examples/SSR/package.json b/examples/SSR/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "react-hot-loader-ssr",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "build": "webpack",
+    "start": "babel-node ./src/server.js",
+    "start:webpack": "webpack-dev-server --hot"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "html-webpack-plugin": "^2.30.1",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.9.7"
+  },
+  "dependencies": {
+    "babel-cli": "^6.26.0",
+    "express": "^4.16.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-hot-loader": "next",
+    "react-portal": "^4.1.2"
+  }
+}
diff --git a/examples/SSR/src/App.js b/examples/SSR/src/App.js
@@ -0,0 +1,19 @@
+import { hot, setConfig } from 'react-hot-loader'
+import * as React from 'react'
+import Counter from './Counter'
+// import hidden from './HiddenComponent';
+
+const App = () => (
+  <h1>
+    <p>{40}!</p>
+    <Counter />
+    <div>
+      {/*{hidden().counter}*/}
+      SSR, and I work fine!
+    </div>
+  </h1>
+)
+
+setConfig({ logLevel: 'debug' })
+
+export default hot(module)(App)
diff --git a/examples/SSR/src/Counter.js b/examples/SSR/src/Counter.js
@@ -0,0 +1,29 @@
+import React from 'react'
+
+const RAND = 1 //Math.round(Math.random() * 1000)
+
+class Counter extends React.Component {
+  state = { count: 0 }
+  gen = 0
+
+  componentDidMount() {
+    this.setState({
+      count: RAND,
+    })
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  render() {
+    // gen should change. count - no.
+    return (
+      <span>
+        {this.state.count}:{this.gen++}
+      </span>
+    )
+  }
+}
+
+export default Counter
diff --git a/examples/SSR/src/HiddenComponent.js b/examples/SSR/src/HiddenComponent.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Counter from './Counter'
+
+const hidden = function() {
+  return {
+    counter: () => (
+      <div>
+        this is hidden counter(<Counter />)
+      </div>
+    ),
+  }
+}
+
+export default hidden
diff --git a/examples/SSR/src/index.js b/examples/SSR/src/index.js
@@ -0,0 +1,10 @@
+import 'babel-polyfill'
+import React from 'react'
+import { hydrate } from 'react-dom'
+import App from './App'
+
+//const root = document.createElement('div')
+//document.body.appendChild(root)
+
+const root = document.getElementById('root');
+hydrate(<App />, root)
diff --git a/examples/SSR/src/server.js b/examples/SSR/src/server.js
@@ -0,0 +1,25 @@
+import express from 'express'
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import App from './App'
+import template from './template'
+
+const server = express()
+
+server.use('/dist', express.static('dist'))
+
+server.get('/', (req, res) => {
+  const app = <App />
+
+  const appString = renderToString(app)
+
+  res.send(
+    template({
+      body: appString,
+    }),
+  )
+})
+
+server.listen(8080)
+
+console.log('server ready')
diff --git a/examples/SSR/src/template.js b/examples/SSR/src/template.js
@@ -0,0 +1,15 @@
+export default ({ body }) => {
+  return `
+    <!DOCTYPE html>
+    <html>
+      <head>
+      </head>
+      
+      <body>
+        <div id="root">${body}</div>
+      </body>
+      
+      <script src="/dist/bundle.js"></script>
+    </html>
+  `
+}
diff --git a/examples/SSR/webpack.config.babel.js b/examples/SSR/webpack.config.babel.js
@@ -0,0 +1,26 @@
+/* eslint-disable */
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: ['webpack/hot/dev-server', './src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        //exclude: /node_modules|packages/,  // should work without exclude
+        test: /\.js$/,
+        use: 'babel-loader',
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin(),
+    new webpack.NamedModulesPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+  ],
+}