Update

kevinvdburgt-archive · Mar 26, 2020 · 4f263de · 4f263de
1 parent 642fd59
commit 4f263de
Show file tree

Hide file tree

Showing 15 changed files with 1,040 additions and 67 deletions.
diff --git a/packages/spa/package.json b/packages/spa/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@react-hooks-issue/spa",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "NODE_ENV=development webpack-dev-server --mode development --host 127.0.0.1"
+  },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "styled-components": "^5.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.25",
+    "@types/react-dom": "^16.9.5",
+    "html-webpack-plugin": "^4.0.1",
+    "ts-loader": "^6.2.2",
+    "typescript": "^3.8.3",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  }
+}
diff --git a/packages/spa/src/index.html b/packages/spa/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>SPA</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/spa/src/index.tsx b/packages/spa/src/index.tsx
@@ -0,0 +1,8 @@
+import React, { Fragment } from 'react';
+import ReactDOM from 'react-dom';
+
+import { Example } from '@react-hooks-issue/uikit';
+
+ReactDOM.render(<Fragment>
+  <Example />
+</Fragment>, document.getElementById('root'));
diff --git a/packages/spa/tsconfig.json b/packages/spa/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "target": "es6",
+    "jsx": "react"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/packages/spa/webpack.config.js b/packages/spa/webpack.config.js
@@ -0,0 +1,51 @@
+const { resolve } = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  devtool: 'source-map',
+
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+  },
+
+  entry: resolve(__dirname, 'src', 'index.tsx'),
+
+  output: {
+    path: resolve(__dirname, 'dist'),
+    filename: '[name].[hash].js',
+    publicPath: '/',
+  },
+
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      minChunks: 1,
+    },
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.ts(x?)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader',
+          },
+        ],
+      },
+    ],
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: resolve(__dirname, 'src', 'index.html'),
+      filename: 'index.html',
+      inject: 'body',
+    }),
+  ],
+
+  devServer: {
+    historyApiFallback: true,
+  },
+};
diff --git a/packages/uikit/package.json b/packages/uikit/package.json
@@ -8,15 +8,11 @@
     "build": "webpack --mode production",
     "build:dev": "webpack --mode development"
   },
-  "dependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "styled-components": "^5.0.1"
+  "peerDependencies": {
+    "react": "^16.13.1"
   },
   "devDependencies": {
     "@types/react": "^16.9.25",
-    "@types/react-dom": "^16.9.5",
-    "@types/styled-components": "^5.0.1",
     "ts-loader": "^6.2.2",
     "typescript": "^3.8.3",
     "webpack": "^4.42.1",

diff --git a/packages/uikit/src/components/Example/Example.tsx b/packages/uikit/src/components/Example/Example.tsx
@@ -0,0 +1,13 @@
+import React, { FunctionComponent, useState } from 'react';
+
+const Example: FunctionComponent = () => {
+  const [counter, setCounter] = useState(0);
+
+  return <div>
+    <button onClick={() => setCounter(counter - 1)}>-</button>
+    <span>{counter}</span>
+    <button onClick={() => setCounter(counter + 1)}>+</button>
+  </div>;
+};
+
+export default Example;
diff --git a/packages/uikit/src/components/Example/index.ts b/packages/uikit/src/components/Example/index.ts
@@ -0,0 +1 @@
+export { default as Example } from './Example';
diff --git a/packages/uikit/src/components/Faq/Faq.tsx b/packages/uikit/src/components/Faq/Faq.tsx
diff --git a/packages/uikit/src/components/Faq/index.ts b/packages/uikit/src/components/Faq/index.ts
diff --git a/packages/uikit/src/index.ts b/packages/uikit/src/index.ts
@@ -1 +1 @@
-export * from './components/Faq';
+export * from './components/Example';
diff --git a/packages/uikit/webpack.config.js b/packages/uikit/webpack.config.js
@@ -10,15 +10,15 @@ module.exports = {
   entry: resolve(__dirname, 'src', 'index.ts'),
 
   externals: {
-    'styled-components': {
-      commonjs: 'styled-components',
+    'react': {
+      commonjs: 'react',
     },
   },
 
   output: {
     path: resolve(__dirname, 'dist'),
     filename: 'index.js',
-    library: '',
+    // library: '',
     libraryTarget: 'commonjs',
   },
 

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -9,11 +9,21 @@
     "next": "^9.3.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "styled-components": "^5.0.1",
     "styled-reset": "^4.1.2"
   },
   "devDependencies": {
     "@types/react": "^16.9.25",
     "@types/react-dom": "^16.9.5",
+    "@types/styled-components": "^5.0.1",
     "typescript": "^3.8.3"
+  },
+  "workspaces": {
+    "nohoist": [
+      "react",
+      "react/**",
+      "react-dom",
+      "react-dom/**"
+    ]
   }
 }
diff --git a/packages/website/pages/index.tsx b/packages/website/pages/index.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import { NextPage } from 'next';
-import { Faq } from '@react-hooks-issue/uikit';
+import { Example } from '@react-hooks-issue/uikit';
 
 const Index: NextPage = () => {
   return <div>
-    <Faq title="Hello">
-      World
-    </Faq>
+    <Example />
   </div>;
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Example } from './Example';
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from './components/Faq';
		export * from './components/Example';