Introduce electron typescript example which works with react-hol-loader

gaearon · Sep 19, 2019 · abad707 · abad707
1 parent 9a8d0da
commit abad707
Show file tree

Hide file tree

Showing 12 changed files with 6,092 additions and 0 deletions.
diff --git a/examples/electron-typescript/.gitignore b/examples/electron-typescript/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+
+node_modules
+dist
diff --git a/examples/electron-typescript/README.md b/examples/electron-typescript/README.md
@@ -0,0 +1,27 @@
+# Electron typescript
+
+## Run application
+
+First you should start to watch application folder via webpack to enable hot-reloading
+
+```bash
+yarn watch
+```
+
+In another terminal window run application
+
+```bash
+yarn start
+```
+
+## Compile application
+
+```bash
+yarn build
+```
+
+In another terminal window run application
+
+```bash
+yarn start
+```
diff --git a/examples/electron-typescript/app/App.tsx b/examples/electron-typescript/app/App.tsx
@@ -0,0 +1,12 @@
+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>
+)
+
+export default hot(App)
diff --git a/examples/electron-typescript/app/Counter.tsx b/examples/electron-typescript/app/Counter.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react'
+
+class Counter extends React.Component<{}, { count: number }> {
+  interval: number
+
+  constructor(props : any) {
+    super(props)
+    this.state = { count: 0 }
+  }
+
+  componentDidMount() {
+    this.interval = window.setInterval(
+      () => this.setState(prevState => ({ count: prevState.count + 1 })),
+      200,
+    )
+  }
+
+  generateString1() {
+    return "1"
+  }
+
+  generateString2 = ()  => {
+    return "1"
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  render() {
+    return <span>{this.state.count} - {this.generateString1()} - {this.generateString2()}</span>
+  }
+}
+
+export default Counter
diff --git a/examples/electron-typescript/app/development.html b/examples/electron-typescript/app/development.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Electron typescript example</title>
+  </head>
+  <body>
+    <main id="app" class="app"></main>
+    <script src="http://localhost:8080/bundle.js"></script>
+    <script src="http://localhost:8080/webpack-dev-server.js"></script>
+  </body>
+</html>
diff --git a/examples/electron-typescript/app/index.tsx b/examples/electron-typescript/app/index.tsx
@@ -0,0 +1,7 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+import * as React from 'react'
+import { render } from 'react-dom'
+import App from './App'
+
+render(<App />, document.getElementById('app'))
diff --git a/examples/electron-typescript/app/production.html b/examples/electron-typescript/app/production.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Electron typescript example</title>
+  </head>
+  <body>
+    <main id="app" class="app"></main>
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/electron-typescript/main.js b/examples/electron-typescript/main.js
@@ -0,0 +1,37 @@
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+
+let mainWindow;
+
+const createWindow = () => {
+  mainWindow = new BrowserWindow({
+    width: 1000,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true,
+    },
+  });
+
+  mainWindow.loadFile(path.join(__dirname, 'dist/index.html'));
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show();
+    mainWindow.focus();
+  });
+};
+
+app.on('ready', () => {
+  createWindow();
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});
+
+app.on('activate', () => {
+  if (mainWindow === null) createWindow();
+});
diff --git a/examples/electron-typescript/package.json b/examples/electron-typescript/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "electron-typescript",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "watch": "rm -rf ./dist && mkdir ./dist && cp ./app/development.html ./dist/index.html && NODE_ENV=development webpack-dev-server --hot",
+    "build": "rm -rf ./dist && mkdir ./dist && cp ./app/production.html ./dist/index.html && NODE_ENV=development webpack",
+    "start": "electron main.js"
+  },
+  "main": "main.js",
+  "devDependencies": {
+    "@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.6.0",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "babel-loader": "^8.0.6",
+    "core-js": "^3.2.1",
+    "electron": "^6.0.8",
+    "fork-ts-checker-webpack-plugin": "^1.5.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-hot-loader": "^4.12.13",
+    "regenerator-runtime": "^0.13.3",
+    "typescript": "^3.6.3",
+    "webpack": "^4.40.2",
+    "webpack-cli": "^3.3.8",
+    "webpack-dev-server": "^3.8.1",
+    "webpack-merge": "^4.2.2"
+  }
+}
diff --git a/examples/electron-typescript/tsconfig.json b/examples/electron-typescript/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es6",
+    "jsx": "react"
+  },
+  "include": ["./app/**/*"]
+}
diff --git a/examples/electron-typescript/webpack.config.js b/examples/electron-typescript/webpack.config.js
@@ -0,0 +1,65 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+const env = process.env.NODE_ENV;
+
+const appConfig = {
+  mode: env || 'development',
+  entry: ['./app/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  resolve: {
+    modules: ['node_modules'],
+    alias: {
+      'react-dom': '@hot-loader/react-dom',
+    },
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  target: 'electron-renderer',
+  module: {
+    rules: [
+      {
+        test: /\.(j|t)s(x)?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+            babelrc: false,
+            presets: [
+              ['@babel/preset-env', { targets: { browsers: 'last 1 version' } }],
+              '@babel/preset-typescript',
+              '@babel/preset-react',
+            ],
+            plugins: [
+              // plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
+              ['@babel/plugin-proposal-decorators', { legacy: true }],
+              ['@babel/plugin-proposal-class-properties', { loose: true }],
+              'react-hot-loader/babel',
+            ],
+          },
+        },
+      },
+    ],
+  },
+};
+
+const developmentConfig = {
+  output: {
+    publicPath: 'http://localhost:8080/',
+  },
+  plugins: [new ForkTsCheckerWebpackPlugin(), new webpack.NamedModulesPlugin()],
+  devtool: 'eval-source-map',
+};
+
+const productionConfig = {
+  output: {
+    publicPath: '/',
+  },
+};
+
+module.exports = merge(appConfig, env === 'production' ? productionConfig : developmentConfig);