WIP. Source maps, permanent field, group store changes emitting principle.

Author: DovydasNavickas

.prettierrc

@@ -3,5 +3,5 @@
     "tabWidth": 4,
     "semi": true,
     "singleQuote": false,
-    "printWidth": 80
+    "printWidth": 100
 }

.vscode/settings.json

@@ -1,3 +1,8 @@
 {
-    "typescript.tsdk": "node_modules\\typescript\\lib"
+    "typescript.tsdk": "node_modules\\typescript\\lib",
+    "cSpell.words": [
+        "Unregistering",
+        "reactway",
+        "unmounting"
+    ]
 }

package-lock.json

@@ -12,37 +12,43 @@
     "author": "ReactWay",
     "license": "AGPLv3",
     "devDependencies": {
-        "@reactway/webpack-builder": "^1.0.0-alpha.6",
-        "@reactway/webpack-builder-plugin-clean": "^1.0.0-alpha.6",
-        "@reactway/webpack-builder-plugin-html": "^1.0.0-alpha.6",
-        "@reactway/webpack-builder-plugin-images": "^1.0.0-alpha.6",
-        "@reactway/webpack-builder-plugin-styles": "^1.0.0-alpha.6",
-        "@reactway/webpack-builder-plugin-typescript": "^1.0.0-alpha.6",
-        "@reactway/webpack-builder-plugin-web-dev": "^1.0.0-alpha.6",
-        "@reactway/webpack-builder-plugin-write-file": "^1.0.0-alpha.6",
-        "@types/copy-webpack-plugin": "^4.4.3",
-        "@types/node": "11.11.3",
-        "@types/react": "16.8.8",
-        "@types/react-dom": "16.8.2",
-        "@types/webpack": "4.4.25",
+        "@reactway/webpack-builder": "1.0.0-alpha.6",
+        "@reactway/webpack-builder-plugin-clean": "1.0.0-alpha.6",
+        "@reactway/webpack-builder-plugin-html": "1.0.0-alpha.6",
+        "@reactway/webpack-builder-plugin-images": "1.0.0-alpha.6",
+        "@reactway/webpack-builder-plugin-styles": "1.0.0-alpha.6",
+        "@reactway/webpack-builder-plugin-typescript": "1.0.0-alpha.6",
+        "@reactway/webpack-builder-plugin-web-dev": "1.0.0-alpha.6",
+        "@reactway/webpack-builder-plugin-write-file": "1.0.0-alpha.6",
+        "@types/copy-webpack-plugin": "4.4.3",
+        "@types/node": "11.12.2",
+        "@types/object-hash": "^1.2.0",
+        "@types/react": "16.8.10",
+        "@types/react-dom": "16.8.3",
+        "@types/webpack": "4.4.26",
+        "babel-loader": "8.0.5",
         "babel-preset-react-app": "7.0.2",
-        "copy-webpack-plugin": "^5.0.2",
+        "copy-webpack-plugin": "5.0.2",
         "cross-env": "5.2.0",
-        "node-sass": "^4.11.0",
-        "simplr-tslint": "^1.0.0-alpha.14",
-        "tslint": "^5.14.0",
-        "tslint-language-service": "^0.9.9",
-        "typescript": "3.4.0-rc",
-        "webpack": "^4.29.6",
+        "node-sass": "4.11.0",
+        "object-hash": "^1.3.1",
+        "simplr-tslint": "1.0.0-alpha.14",
+        "tslint": "5.14.0",
+        "tslint-language-service": "0.9.9",
+        "typescript": "3.4.1",
+        "webpack": "4.29.6",
         "webpack-cli": "3.3.0",
         "webpack-dev-server": "3.2.1"
     },
+    "peerDependencies": {
+        "react": "16.8.6",
+        "react-dom": "16.8.6"
+    },
     "dependencies": {
-        "@babel/polyfill": "^7.4.0",
-        "babel-loader": "8.0.5",
-        "immer": "^2.1.4",
-        "react": "16.8.4",
-        "react-dom": "16.8.4",
-        "saga": "^4.0.0-alpha"
+        "@babel/polyfill": "7.4.0",
+        "immer": "2.1.4",
+        "react": "16.8.6",
+        "react-dom": "16.8.6",
+        "saga": "4.0.0-alpha"
     }
 }

package.json

@@ -5,13 +5,13 @@ body,
 #root {
     display: flex;
     flex: 1 0 auto;
+    max-width: 100%;
 }
 
 .error {
     background: lighten($color: red, $amount: 45);
     padding: 15px;
     margin: 10px;
-    margin-right: 12px;
     border: 1px solid lighten($color: red, $amount: 25);
     font-family: "Open Sans", sans-serif;
     font-size: 18px;
@@ -27,6 +27,7 @@ body,
     }
 
     .message {
+        white-space: pre-wrap;
         font-weight: bold;
     }
 
@@ -37,6 +38,17 @@ body,
             padding-top: 3px;
         }
     }
+
+    button {
+        $background-color: #ccc;
+        border: none;
+        border: 1px solid black;
+        padding: 10px 20px;
+
+        &:hover {
+            background: lighten($color: $background-color, $amount: 10);
+        }
+    }
 }
 
 .forms,

src/app.scss

@@ -1,31 +1,72 @@
 import "@babel/polyfill";
 
-import React, { useState, useEffect, ErrorInfo } from "react";
+import React, { useState, useEffect, ErrorInfo, useMemo, useCallback } from "react";
 import ReactDOM from "react-dom";
+import { MD5 } from "object-hash";
 import { GroupStoreMutable } from "./stores/group-store";
 import { GroupContext, GroupContextObject } from "./contexts/group-context";
-import { useForceUpdate } from "./force-update";
+// import { useForceUpdate } from "./force-update";
+import { Test1 } from "./tests/test1";
 
 import "./reset.scss";
 import "./app.scss";
-import { Test1 } from "./tests/test1";
 
 const store = new GroupStoreMutable();
+
+// tslint:disable-next-line:no-any
+(window as any).store = store;
+
+function useStoreHash(): [TestState, () => void] {
+    const [state, setState] = useState<TestState>({
+        storeObject: undefined,
+        store: {},
+        hash: ""
+    });
+
+    const updateStoreHash = useCallback(() => {
+        const storeObject = store.toObject();
+        const hash = MD5({
+            storeHash: MD5(store),
+            storeObjectHash: MD5(storeObject)
+        });
+        if (state.hash === hash) {
+            return;
+        }
+        setState({
+            storeObject: storeObject,
+            store: store,
+            hash: hash
+        });
+    }, [store]);
+
+    return [state, updateStoreHash];
+}
+
+interface TestState {
+    storeObject?: unknown;
+    store: unknown;
+    hash: string;
+}
+
 const Test = () => {
-    const forceUpdate = useForceUpdate();
+    const [state, updateStoreHash] = useStoreHash();
     useEffect(() => {
         const listener = () => {
-            forceUpdate();
+            // console.log("State updated");
+            updateStoreHash();
         };
-        forceUpdate();
+        updateStoreHash();
         store.addListener(listener);
         return () => store.removeListener(listener);
     }, []);
 
+    // const [groupId] = useState(undefined);
+    const [groupId] = useState("person");
+
     const groupContext: GroupContextObject = {
         store: store,
         test: "app",
-        groupId: "person"
+        groupId: groupId
     };
 
     return (
@@ -38,7 +79,7 @@ const Test = () => {
             <div className="store">
                 <pre>
                     {JSON.stringify(
-                        store,
+                        state.store,
                         // tslint:disable-next-line:no-any
                         (_, value: any) => {
                             if (typeof value !== "function") {
@@ -51,9 +92,7 @@ const Test = () => {
                     )}
                 </pre>
             </div>
-            <pre className="store-result">
-                {JSON.stringify(store.toObject(), null, 4)}
-            </pre>
+            <pre className="store-result">{JSON.stringify(state.storeObject, null, 4)}</pre>
         </>
     );
 };
@@ -77,18 +116,18 @@ class App extends React.Component {
         const { error } = this.state;
         if (error != null) {
             const info = this.state.info!;
-            console.warn(error.message);
-            console.log(info);
             return (
                 <div className="error">
-                    <p className="disclaimer">
-                        Oops! An error has occurred! Here’s what we know…
-                    </p>
-                    <p className="message">{error.message}</p>
-                    <p className="component-stack">
+                    <p className="disclaimer">Oops! An error has occurred! Here’s what we know…</p>
+                    <pre className="message">{error.message}</pre>
+                    <div className="component-stack">
                         Component stack:
                         <pre>{info.componentStack.substr(1)}</pre>
-                    </p>
+                    </div>
+
+                    <div>
+                        <button onClick={() => location.reload()}>Reload page</button>
+                    </div>
                 </div>
             );
         }

src/app.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { PermanentContext } from "../contexts/permanent-context";
+
+interface Props {
+    children: React.ReactNode;
+}
+
+export const Permanent = (props: Props) => {
+    return (
+        <PermanentContext.Provider value={{ permanent: true }}>
+            {props.children}
+        </PermanentContext.Provider>
+    );
+};