simplify hot

examples/hot/internal/webpack/webpack.development.config.js

@@ -28,6 +28,8 @@ function formatterForLineAndColumnUrlClicking(message, useColors) {
 const shared = require('./shared');
 const main = [
     'react-hot-loader/patch',
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
     'core-js',
     'whatwg-fetch',
     './src/index.tsx'
@@ -70,40 +72,10 @@ module.exports = {
             {
                 test: /.tsx?$/,
                 use: [
-                    { loader: 'react-hot-loader/webpack' },
                     { loader: 'ts-loader', options: { happyPackMode: true } }
                 ],
                 exclude: path.resolve(process.cwd(), 'node_modules'),
                 include: path.resolve(process.cwd(), "src"),
-            },
-            {
-                test: /\.scss$/,
-                use: [
-                    { loader: 'style-loader' },
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            modules: false,
-                            camelCase: true,
-                            importLoaders: 2
-                        }
-                    },
-                    { loader: 'resolve-url-loader' },
-                    { loader: "sass-loader?sourceMap" }
-                ]
-            },
-            {
-                test: /\.css$/,
-                use: [
-                    { loader: 'style-loader' },
-                    {
-                        loader: 'css-loader',
-                    },
-                ]
-            },
-            {
-                test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.woff$|\.woff2$|\.eot$|\.ttf$|\.wav$|\.mp3$/,
-                loader: 'file-loader?name=[name].[hash].[ext]'
             }
         ]
     },
@@ -112,7 +84,6 @@ module.exports = {
     },
     devtool: 'inline-source-map',
     devServer: {
-        // clientLogLevel: 'warning',
         open: true,
         hot: true,
         historyApiFallback: true,

examples/hot/internal/webpack/webpack.production.config.js

@@ -64,36 +64,6 @@ module.exports = {
                     { loader: 'ts-loader', options: { happyPackMode: true } }
                 ],
                 exclude: /node_modules/
-            },
-            {
-                test: /\.scss$/,
-                use: [
-                    { loader: 'style-loader' },
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            modules: false,
-                            camelCase: true,
-                            importLoaders: 2,
-                            minimize: true
-                        }
-                    },
-                    { loader: 'resolve-url-loader' },
-                    { loader: "sass-loader?sourceMap" }
-                ]
-            },
-            {
-            test: /\.css$/,
-                use: [
-                    { loader: 'style-loader' },
-                    {
-                        loader: 'css-loader',
-                    },
-                ]
-            },
-            {
-                test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.woff$|\.woff2$|\.eot$|\.ttf$|\.wav$|\.mp3$/,
-                loader: 'file-loader?name=[name].[hash].[ext]'
             }
         ]
     },

examples/hot/src/components/app.tsx → examples/hot/src/app.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { Layout } from './components/layout';
 
 export const App: React.SFC<{}> = _props => (
     <div className="ui container">
-        <h1>Heya, heya, heya!</h1>
+        <Layout />
     </div>
 );

examples/hot/src/components/__tests__/__snapshots__/app.tests.tsx.snap → examples/hot/src/components/__tests__/__snapshots__/layout.tests.tsx.snap

@@ -1,11 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`app component renders as expected 1`] = `
-<div
-  className="ui container"
->
-  <h1>
-    Heya, heya, heya!
-  </h1>
-</div>
+<h1>
+  Heya, heya, heya!!!
+</h1>
 `;

examples/hot/src/components/__tests__/app.tests.tsx → examples/hot/src/components/__tests__/layout.tests.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
-import { App } from '../app';
+import { Layout } from '../layout';
 
 describe('app', () => {
     it('component renders as expected', () => {
         const component = renderer.create(
-            <App />
+            <Layout />
         );
         let tree = component.toJSON();
         expect(tree).toMatchSnapshot();

examples/hot/src/components/layout.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export const Layout: React.SFC<{}> = _props => (
+    <h1>Heya, heya, heya!!!</h1>
+);

examples/hot/src/index.html

@@ -9,6 +9,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" />
 </head>
 

examples/hot/src/index.tsx

@@ -1,26 +1,21 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
-import { App } from './components/app';
-import './styles/styles.scss';
+import { App } from './app';
 
-/**
- * Render the app
- */
-function renderApp() {
-    const rootEl = document.getElementById('root');
-    ReactDOM.render(
-        <AppContainer>
-            <App />
-        </AppContainer>,
-        rootEl
-    );
-}
+const rootEl = document.getElementById('root');
+const render = (Component: React.SFC) =>
+  ReactDOM.render(
+    <AppContainer>
+      <Component />
+    </AppContainer>,
+    rootEl
+  );
 
-renderApp();
+render(App);
 
 // Hot Module Replacement API
 const anyModule: any = module;
 if (anyModule.hot) {
-    anyModule.hot.accept('./components/app', () => renderApp());
+    anyModule.hot.accept('./app', () => render(App));
 }