Updated React and added to issues

Author: aeagle

demo/.env.analyse

@@ -0,0 +1 @@
+ANALYSE_BUNDLE=true

demo/config/webpack.config.js

@@ -27,6 +27,8 @@ const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpack
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const postcssNormalize = require('postcss-normalize');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -272,7 +274,7 @@ module.exports = function(webpackEnv) {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         'react-native': 'react-native-web',
-        react: path.resolve( '__dirname', '..',  'node_modules', 'react')
+        'react': path.resolve('./node_modules/react')
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
@@ -476,6 +478,8 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      new DuplicatePackageCheckerPlugin(),
+      process.env.ANALYSE_BUNDLE === 'true' && new BundleAnalyzerPlugin(),
       new MonacoWebpackPlugin({
         // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
         languages: ['typescript']

demo/package-lock.json

@@ -24,6 +24,7 @@
     "css-loader": "2.1.1",
     "dotenv": "6.2.0",
     "dotenv-expand": "4.2.0",
+    "env-cmd": "^9.0.3",
     "eslint": "^5.16.0",
     "eslint-config-react-app": "^4.0.1",
     "eslint-loader": "2.1.2",
@@ -53,10 +54,10 @@
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.6.0",
     "postcss-safe-parser": "4.0.1",
-    "react": "16.8.6",
+    "react": "^16.9.0",
     "react-app-polyfill": "^1.0.1",
     "react-dev-utils": "^9.0.1",
-    "react-dom": "16.8.6",
+    "react-dom": "^16.8.6",
     "react-ga": "^2.6.0",
     "react-monaco-editor": "^0.28.0",
     "react-spaces": "file:../react-spaces",
@@ -70,14 +71,17 @@
     "typescript": "^3.5.3",
     "url-loader": "1.1.2",
     "webpack": "4.29.6",
+    "webpack-bundle-analyser": "^1.4.0",
+    "webpack-bundle-analyzer": "^3.4.1",
     "webpack-dev-server": "3.2.1",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "4.2.0"
   },
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js"
+    "test": "node scripts/test.js",
+    "analyse": "env-cmd -f .env.analyse node scripts/build.js"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -144,5 +148,8 @@
     "presets": [
       "react-app"
     ]
+  },
+  "devDependencies": {
+    "duplicate-package-checker-webpack-plugin": "^3.0.0"
   }
 }

demo/package.json

@@ -6,6 +6,16 @@ export const KnownIssues = () => {
 			<h2 id="issues">Known issues / limitations</h2>
 
 			<ul>
+				<li>
+					The components in <strong>v0.1.13</strong> have been changed to use React Hooks. This can cause problems if there are
+					multiple versions of React loaded. If you are using webpack you can add to your webpack config:
+					
+					<pre style={{ marginTop: 15 }}>
+						{`alias: { 'react': path.resolve('./node_modules/react') }`}
+					</pre> 
+
+					This will ensure that all references to React resolve to the same version.
+				</li>
 				<li>
 					Rendering an anchored horizontal space and an anchored vertical space within the same parent space will cause a gap
 					to appear in the corner where the two anchored spaces meet. You can workaround this by using nested <strong>&lt;Fill /&gt;</strong>

demo/src/docs/KnownIssues.tsx

@@ -5,6 +5,17 @@ export const VersionHistory = () => {
 		<>
 			<h2 id="changes">Version history</h2>
 
+			<div>
+				<h3>0.1.13</h3> 
+				<ul>
+					<li>
+						Refactored spaces as functional component using hooks.
+					</li>
+					<li>
+						Fixed className type on &lt;ViewPort /&gt; component.
+					</li>
+				</ul>
+			</div>
 			<div>
 				<h3>0.1.11 - 0.1.12</h3> 
 				<ul>