Merge pull request #1344 from maratfakhreev/fix-typescript-example

Make typescript example work with latest react-hot-loader environment
gaearon · Sep 17, 2019 · 5c7cadc · 5c7cadc
2 parents 7500b0e + 666eaff
commit 5c7cadc
Show file tree

Hide file tree

Showing 6 changed files with 2,710 additions and 2,245 deletions.
diff --git a/examples/typescript/package.json b/examples/typescript/package.json
@@ -6,26 +6,27 @@
     "start": "webpack-dev-server --hot"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.0.0",
-    "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/core": "^7.6.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.0.0",
-    "@types/react": "^16.4.6",
-    "@types/react-dom": "^16.0.6",
-    "babel-loader": "^8.0.0",
-    "fork-ts-checker-webpack-plugin": "^0.4.2",
+    "@babel/preset-typescript": "^7.6.0",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "babel-loader": "^8.0.6",
+    "fork-ts-checker-webpack-plugin": "^1.5.0",
     "html-webpack-plugin": "^3.2.0",
-    "typescript": "^2.9.1",
-    "webpack": "^4.14.0",
-    "webpack-cli": "^3.0.8",
-    "webpack-dev-server": "^3.1.4"
+    "typescript": "^3.6.3",
+    "webpack": "^4.40.2",
+    "webpack-cli": "^3.3.8",
+    "webpack-dev-server": "^3.8.1"
   },
   "dependencies": {
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-hot-loader": "^4.3.3"
+    "core-js": "^3.2.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-hot-loader": "^4.12.13",
+    "regenerator-runtime": "^0.13.3"
   }
 }
diff --git a/examples/typescript/src/App.tsx b/examples/typescript/src/App.tsx
@@ -1,16 +1,12 @@
-import {hot} from 'react-hot-loader/root';
+import { hot } from 'react-hot-loader/root'
 import * as React from 'react'
 import Counter from './Counter'
 
 const App = () => (
-    <div>
-      <h1>Hello, world.</ h1>
-      <Counter/>
-    </div>
-  )
-
-;(async () => {
-  console.log('You have async support if you read this instead of "ReferenceError: regeneratorRuntime is not defined" error.');
-})()
+  <div>
+    <h1>Hello, world.</ h1>
+    <Counter/>
+  </div>
+)
 
 export default hot(App)
diff --git a/examples/typescript/src/Counter.tsx b/examples/typescript/src/Counter.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 class Counter extends React.Component<{}, { count: number }> {
-  interval: number;
+  interval: number
 
   constructor(props : any) {
     super(props)
@@ -16,11 +16,11 @@ class Counter extends React.Component<{}, { count: number }> {
   }
 
   generateString1() {
-    return "1";
+    return "1"
   }
 
   generateString2 = ()  => {
-    return "1";
+    return "1"
   }
 
   componentWillUnmount() {

diff --git a/examples/typescript/src/index.tsx b/examples/typescript/src/index.tsx
@@ -1,3 +1,5 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
 import * as React from 'react'
 import { render } from 'react-dom'
 import App from './App'

diff --git a/examples/typescript/webpack.config.babel.js b/examples/typescript/webpack.config.babel.js
@@ -1,34 +1,26 @@
-/* eslint-disable */
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 module.exports = {
   mode: 'development',
-  entry: {
-    vendor: [
-      // Required to support async/await
-      '@babel/polyfill',
-    ],
-    main: ['./src/index'],
-  },
+  entry: ['./src/index'],
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: '[name].js',
+    filename: 'bundle.js',
   },
-  devtool: false,
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    modules: ['node_modules'],
     alias: {
-      'react-hot-loader': path.resolve(path.join(__dirname, './../../')),
-      react: path.resolve(path.join(__dirname, './node_modules/react')),
+      'react-dom': '@hot-loader/react-dom',
     },
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
   },
   module: {
     rules: [
       {
-        test: /\.(j|t)sx?$/,
+        test: /\.(j|t)s(x)?$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
@@ -54,5 +46,6 @@ module.exports = {
       },
     ],
   },
+  devtool: 'eval-source-map',
   plugins: [new ForkTsCheckerWebpackPlugin(), new webpack.NamedModulesPlugin(), new HtmlWebpackPlugin()],
 };