Add react-hot-boilerplate based on @gaearon's example

TypeStrong · Oct 22, 2017 · 300da75 · 300da75
1 parent 6d424f8
commit 300da75
Show file tree

Hide file tree

Showing 13 changed files with 3,602 additions and 0 deletions.
diff --git a/examples/react-hot-boilerplate/LICENSE b/examples/react-hot-boilerplate/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Dan Abramov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/examples/react-hot-boilerplate/README.md b/examples/react-hot-boilerplate/README.md
@@ -0,0 +1,27 @@
+react-hot-boilerplate
+=====================
+
+**adapted from https://github.com/gaearon/react-hot-boilerplate/**
+
+The minimal dev environment to enable live-editing React components.
+
+Based on the guide available at https://webpack.js.org/guides/hmr-react/
+
+### Usage
+
+```
+yarn install
+yarn start
+open http://localhost:3000
+```
+
+Now edit `src/App.tsx`.  
+Your changes will appear without reloading the browser like in [this video](http://vimeo.com/100010922).
+
+### Building
+
+A basic production script is included that builds your app to a `dist` folder
+
+```
+yarn build
+```
diff --git a/examples/react-hot-boilerplate/index.html b/examples/react-hot-boilerplate/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Sample App</title>
+  </head>
+  <body>
+    <div id='root'>
+    </div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/react-hot-boilerplate/package.json b/examples/react-hot-boilerplate/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "react-hot-boilerplate",
+  "version": "1.0.0",
+  "description": "Boilerplate for ReactJS project with hot code reloading",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "lint": "eslint src",
+    "prebuild": "rimraf dist",
+    "build": "cross-env NODE_ENV=production webpack -p --config webpack.config.production.js",
+    "postbuild": "copyfiles index.html dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gaearon/react-hot-boilerplate.git"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "boilerplate",
+    "hot",
+    "reload",
+    "hmr",
+    "live",
+    "edit",
+    "webpack"
+  ],
+  "author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gaearon/react-hot-boilerplate/issues"
+  },
+  "homepage": "https://github.com/gaearon/react-hot-boilerplate",
+  "devDependencies": {
+    "@types/node": "^8.0.46",
+    "@types/react": "^16.0.0",
+    "@types/react-dom": "^16.0.0",
+    "@types/react-hot-loader": "^3.0.4",
+    "copyfiles": "^1.2.0",
+    "cross-env": "^3.1.4",
+    "fork-ts-checker-webpack-plugin": "^0.2.8",
+    "react-hot-loader": "^3.0.0",
+    "rimraf": "^2.6.0",
+    "ts-loader": "^3.0.0",
+    "tslint": "^5.8.0",
+    "tslint-react": "^3.2.0",
+    "typescript": "^2.5.3",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
+  },
+  "dependencies": {
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  }
+}
diff --git a/examples/react-hot-boilerplate/src/App.tsx b/examples/react-hot-boilerplate/src/App.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Layout from './Layout';
+import Counter from './Counter';
+
+// If you use React Router, make this component
+// render <Router> with your routes. Currently,
+// only synchronous routes are hot reloaded, and
+// you will see a warning from <Router> on every reload.
+// You can ignore this warning. For details, see:
+// https://github.com/reactjs/react-router/issues/2182
+export default class App extends React.Component {
+  render() {
+    return (
+      <Layout>
+        <Counter />
+      </Layout>
+    );
+  }
+}
diff --git a/examples/react-hot-boilerplate/src/Counter.tsx b/examples/react-hot-boilerplate/src/Counter.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+export default class Counter extends React.Component<{}, { counter: number }> {
+  interval: number;
+  constructor(props: {}) {
+    super(props);
+    this.state = { counter: 1080 };
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(this.tick.bind(this), 1000);
+  }
+
+  tick() {
+    this.setState({ counter: this.state.counter + 1 });
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    return <h2>Counter: {this.state.counter}</h2>;
+  }
+}
diff --git a/examples/react-hot-boilerplate/src/Layout.tsx b/examples/react-hot-boilerplate/src/Layout.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+const Layout: React.SFC = ({ children }) => (
+  <div>
+    <h1>Hello, world!</h1>
+    {children}
+  </div>
+);
+
+export default Layout;
diff --git a/examples/react-hot-boilerplate/src/index.tsx b/examples/react-hot-boilerplate/src/index.tsx
@@ -0,0 +1,16 @@
+import { AppContainer } from 'react-hot-loader';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App from './App';
+
+const rootEl = document.getElementById('root');
+const render = (Component: typeof App) =>
+  ReactDOM.render(
+    <AppContainer>
+      <Component />
+    </AppContainer>,
+    rootEl
+  );
+
+render(App);
+if ((module as any).hot) (module as any).hot.accept('./App', () => render(App));
diff --git a/examples/react-hot-boilerplate/tsconfig.json b/examples/react-hot-boilerplate/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": false,
+    "target": "es5",
+    "downlevelIteration": true,
+    "importHelpers": true,
+    "sourceMap": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "allowJs": false,
+    "checkJs": false,
+    "lib": [
+      "dom",
+      "es2015",
+      "es2016",
+      "es2017",
+      "esnext"
+    ],
+    "forceConsistentCasingInFileNames": true,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "strictNullChecks": false,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}
diff --git a/examples/react-hot-boilerplate/tslint.json b/examples/react-hot-boilerplate/tslint.json
@@ -0,0 +1,127 @@
+{
+    "extends": [
+        "tslint-react"
+    ],
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "arguments",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": false,
+        "eofline": false,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": [
+            true,
+            "always-prefix"
+        ],
+        "jsdoc-format": true,
+        "jsx-no-lambda": false,
+        "jsx-no-multiline-js": false,
+        "jsx-self-close": false,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            160
+        ],
+        "member-ordering": [
+            true,
+            {
+                "order": [
+                    "fields-first"
+                ]
+            }
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": true,
+        "no-console": [
+            true,
+            "log",
+            "error",
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-consecutive-blank-lines": true,
+        "no-construct": true,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": true,
+        "no-eval": true,
+        "no-shadowed-variable": true,
+        "no-string-literal": false,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": false,
+        "no-unused-expression": true,
+        "no-use-before-declare": true,
+        "one-line": [
+            true,
+            "check-catch",
+            "check-else",
+            "check-open-brace",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "jsx-double"
+        ],
+        "radix": true,
+        "semicolon": [
+            true,
+            "always"
+        ],
+        "switch-default": true,
+        "trailing-comma": false,
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": [
+            true,
+            "parameter",
+            "property-declaration"
+        ],
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "variable-name": [
+            true,
+            "ban-keywords",
+            "check-format",
+            "allow-leading-underscore",
+            "allow-pascal-case"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-decl",
+            "check-module",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-typecast"
+        ]
+    }
+}