Merge pull request #1343 from maratfakhreev/fix-typescript-no-babel-e…

…xample

Make typescript-no-babel example work with latest react-hot-loader environment

examples/typescript-no-babel/package.json

@@ -1,27 +1,23 @@
 {
-  "name": "hot-pure-typescript",
+  "name": "hot-typescript-pure",
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
     "start": "webpack-dev-server --hot"
   },
   "devDependencies": {
-    "awesome-typescript-loader": "^3.4.1",
-    "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",
-    "typescript": "^2.6.2",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.7"
+    "awesome-typescript-loader": "^5.2.1",
+    "html-webpack-plugin": "^3.2.0",
+    "typescript": "^3.6.3",
+    "webpack": "^4.40.2",
+    "webpack-cli": "^3.3.8",
+    "webpack-dev-server": "^3.8.1"
   },
   "dependencies": {
-    "@types/react": "^16.0.31",
-    "@types/react-dom": "^16.0.3",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-hot-loader": "^4.0.1"
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-hot-loader": "^4.12.13"
   }
 }

examples/typescript-no-babel/src/App.tsx

@@ -1,10 +1,11 @@
+import { hot } from 'react-hot-loader/root'
 import * as React from 'react'
-import { hot } from 'react-hot-loader/root';
 import Counter from './Counter'
 
 const App = () => (
   <h1>
-    Hello, world!<br />
+    Hello, world!
+    <br />
     You can update this text, and it will work
     <Counter />
   </h1>

examples/typescript-no-babel/src/Counter.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 
 class Counter extends React.Component<{}, { count: number }> {
-  interval: number;
+  interval: number
 
-  constructor(props : any) {
+  constructor(props: any) {
     super(props)
     this.state = { count: 0 }
   }
@@ -17,12 +17,12 @@ class Counter extends React.Component<{}, { count: number }> {
 
   generateString1() {
     // you can update this method, and it will work
-    return "1";
+    return "1"
   }
 
   generateString2 = ()  => {
     // this one will not
-    return "1";
+    return "1"
   }
 
   componentWillUnmount() {

examples/typescript-no-babel/src/index.tsx

@@ -3,6 +3,7 @@ import { render } from 'react-dom'
 import App from './App'
 
 const root = document.createElement('div')
+
 document.body.appendChild(root)
 
 render(<App />, root)

examples/typescript-no-babel/webpack.config.babel.js → examples/typescript-no-babel/webpack.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -9,16 +8,21 @@ module.exports = {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
   },
+  resolve: {
+    modules: ['node_modules'],
+    alias: {
+      'react-dom': '@hot-loader/react-dom',
+    },
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
   module: {
     rules: [
       {
-        test: /\.tsx?$/,
+        test: /\.ts(x)?$/,
         use: ['awesome-typescript-loader'],
       },
     ],
   },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
-  },
+  devtool: 'eval-source-map',
   plugins: [new HtmlWebpackPlugin(), new webpack.NamedModulesPlugin()],
 };