add react-redux example

gaearon · Jul 10, 2019 · b0ee8db · b0ee8db
1 parent 9c87cbc
commit b0ee8db
Show file tree

Hide file tree

Showing 11 changed files with 11,315 additions and 0 deletions.
diff --git a/examples/redux/.babelrc b/examples/redux/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["env", "react"],
+  "plugins": ["react-hot-loader/babel", "transform-class-properties", "dynamic-import-node"]
+}
diff --git a/examples/redux/.gitignore b/examples/redux/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/examples/redux/index_csp.html b/examples/redux/index_csp.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Webpack App</title>
+    <meta http-equiv="Content-Security-Policy" content="default-src http:">
+</head>
+<body>
+</body>
+</html>
diff --git a/examples/redux/package.json b/examples/redux/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "hot-styled-components",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "NODE_ENV=development webpack-dev-server --hot",
+    "start:cold": "NODE_ENV=development webpack-dev-server",
+    "start:prod": "NODE_ENV=production webpack-dev-server --hot",
+    "start:link": "cp -R ../../dist ./node_modules/react-hot-loader && cp -R ../../*.js ./node_modules/react-hot-loader",
+    "start:hot": "cp -R ../../../hot/react-dom/target/cjs ./node_modules/react-dom"
+  },
+  "devDependencies": {
+    "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": "^3.2.0",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "emotion": "^8.0.12",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-emotion": "^9.2.12",
+    "react-hot-loader": "^4.12.5",
+    "react-redux": "^7.1.0",
+    "react-spring": "^8.0.25",
+    "redux": "^4.0.3",
+    "styled-components": "^4.0.3"
+  }
+}
diff --git a/examples/redux/src/App.js b/examples/redux/src/App.js
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import { hot } from 'react-hot-loader/root';
+
+import { MyComponent } from './MyComponent';
+import { HookComponent } from './HookComponent';
+
+const App = () => {
+  const [state] = useState(42);
+  const [effect, setEffect] = useState(42);
+
+  useEffect(() => {
+    setEffect(effect + 1);
+  }, []);
+
+  useEffect(
+    () => {
+      setEffect(effect + 0.1);
+    },
+    ['hot'],
+  );
+
+  return (
+    <div>
+      <MyComponent>
+        test {state} : {effect}
+      </MyComponent>
+      <HookComponent />
+    </div>
+  );
+};
+
+export default hot(App);
diff --git a/examples/redux/src/HookComponent.js b/examples/redux/src/HookComponent.js
@@ -0,0 +1,7 @@
+import { useSelector } from 'react-redux';
+
+export function HookComponent() {
+  const notifications = useSelector(() => true);
+
+  return null;
+}
diff --git a/examples/redux/src/MyComponent.js b/examples/redux/src/MyComponent.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+export class MyComponent1 extends React.Component {
+  render() {
+    return <div>{this.props.children}</div>;
+  }
+}
+
+export const MyComponent = connect(state => state, undefined, undefined, { pure: false })(MyComponent1);
diff --git a/examples/redux/src/index.js b/examples/redux/src/index.js
@@ -0,0 +1,18 @@
+import 'babel-polyfill';
+import React from 'react';
+import {Provider} from 'react-redux';
+import {createStore, combineReducers} from 'redux';
+
+import {render} from 'react-dom';
+import App from './App';
+
+const root = document.createElement('div');
+document.body.appendChild(root);
+
+const store =createStore(combineReducers({}));
+
+render(
+  <Provider store={store}>
+    <App/>
+  </Provider>
+  , root);
diff --git a/examples/redux/webpack.config.babel.js b/examples/redux/webpack.config.babel.js
@@ -0,0 +1,43 @@
+/* eslint-disable */
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: ['./src/index'],
+  mode: process.env.NODE_ENV || 'development',
+  //devtool: false,
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        exclude: /packages/, // should work without exclude
+        test: /\.js$/,
+        use: ['react-hot-loader/webpack', 'babel-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    alias: {
+      // 'react-dom': '@hot-loader/react-dom',
+      // react: path.resolve(path.join(__dirname, './node_modules/react')),
+      // 'react-hot-loader': path.resolve(
+      //   path.join(__dirname, './node_modules/react-hot-loader'),
+      // ),
+      // 'babel-core': path.resolve(
+      //   path.join(__dirname, './node_modules/@babel/core'),
+      // ),
+    },
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      // uncomment this line to test RHL in "secure" env
+      // template: "index_csp.html",
+    }),
+    new webpack.NamedModulesPlugin(),
+  ],
+};