Skip to content

Commit 4491f3e

Browse files
DovydasNavickasDovydasNavickas
committed
WIP. Source maps, permanent field, group store changes emitting principle.
1 parent e768019 commit 4491f3e

File tree

14 files changed

+482
-174
lines changed

14 files changed

+482
-174
lines changed

‎.prettierrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
"tabWidth": 4,
44
"semi": true,
55
"singleQuote": false,
6-
"printWidth": 80
6+
"printWidth": 100
77
}

‎.vscode/settings.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
{
2-
"typescript.tsdk": "node_modules\\typescript\\lib"
2+
"typescript.tsdk": "node_modules\\typescript\\lib",
3+
"cSpell.words": [
4+
"Unregistering",
5+
"reactway",
6+
"unmounting"
7+
]
38
}

‎package-lock.json

Lines changed: 88 additions & 43 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,37 +12,43 @@
1212
"author": "ReactWay",
1313
"license": "AGPLv3",
1414
"devDependencies": {
15-
"@reactway/webpack-builder": "^1.0.0-alpha.6",
16-
"@reactway/webpack-builder-plugin-clean": "^1.0.0-alpha.6",
17-
"@reactway/webpack-builder-plugin-html": "^1.0.0-alpha.6",
18-
"@reactway/webpack-builder-plugin-images": "^1.0.0-alpha.6",
19-
"@reactway/webpack-builder-plugin-styles": "^1.0.0-alpha.6",
20-
"@reactway/webpack-builder-plugin-typescript": "^1.0.0-alpha.6",
21-
"@reactway/webpack-builder-plugin-web-dev": "^1.0.0-alpha.6",
22-
"@reactway/webpack-builder-plugin-write-file": "^1.0.0-alpha.6",
23-
"@types/copy-webpack-plugin": "^4.4.3",
24-
"@types/node": "11.11.3",
25-
"@types/react": "16.8.8",
26-
"@types/react-dom": "16.8.2",
27-
"@types/webpack": "4.4.25",
15+
"@reactway/webpack-builder": "1.0.0-alpha.6",
16+
"@reactway/webpack-builder-plugin-clean": "1.0.0-alpha.6",
17+
"@reactway/webpack-builder-plugin-html": "1.0.0-alpha.6",
18+
"@reactway/webpack-builder-plugin-images": "1.0.0-alpha.6",
19+
"@reactway/webpack-builder-plugin-styles": "1.0.0-alpha.6",
20+
"@reactway/webpack-builder-plugin-typescript": "1.0.0-alpha.6",
21+
"@reactway/webpack-builder-plugin-web-dev": "1.0.0-alpha.6",
22+
"@reactway/webpack-builder-plugin-write-file": "1.0.0-alpha.6",
23+
"@types/copy-webpack-plugin": "4.4.3",
24+
"@types/node": "11.12.2",
25+
"@types/object-hash": "^1.2.0",
26+
"@types/react": "16.8.10",
27+
"@types/react-dom": "16.8.3",
28+
"@types/webpack": "4.4.26",
29+
"babel-loader": "8.0.5",
2830
"babel-preset-react-app": "7.0.2",
29-
"copy-webpack-plugin": "^5.0.2",
31+
"copy-webpack-plugin": "5.0.2",
3032
"cross-env": "5.2.0",
31-
"node-sass": "^4.11.0",
32-
"simplr-tslint": "^1.0.0-alpha.14",
33-
"tslint": "^5.14.0",
34-
"tslint-language-service": "^0.9.9",
35-
"typescript": "3.4.0-rc",
36-
"webpack": "^4.29.6",
33+
"node-sass": "4.11.0",
34+
"object-hash": "^1.3.1",
35+
"simplr-tslint": "1.0.0-alpha.14",
36+
"tslint": "5.14.0",
37+
"tslint-language-service": "0.9.9",
38+
"typescript": "3.4.1",
39+
"webpack": "4.29.6",
3740
"webpack-cli": "3.3.0",
3841
"webpack-dev-server": "3.2.1"
3942
},
43+
"peerDependencies": {
44+
"react": "16.8.6",
45+
"react-dom": "16.8.6"
46+
},
4047
"dependencies": {
41-
"@babel/polyfill": "^7.4.0",
42-
"babel-loader": "8.0.5",
43-
"immer": "^2.1.4",
44-
"react": "16.8.4",
45-
"react-dom": "16.8.4",
46-
"saga": "^4.0.0-alpha"
48+
"@babel/polyfill": "7.4.0",
49+
"immer": "2.1.4",
50+
"react": "16.8.6",
51+
"react-dom": "16.8.6",
52+
"saga": "4.0.0-alpha"
4753
}
4854
}

‎src/app.scss

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ body,
55
#root {
66
display: flex;
77
flex: 1 0 auto;
8+
max-width: 100%;
89
}
910

1011
.error {
1112
background: lighten($color: red, $amount: 45);
1213
padding: 15px;
1314
margin: 10px;
14-
margin-right: 12px;
1515
border: 1px solid lighten($color: red, $amount: 25);
1616
font-family: "Open Sans", sans-serif;
1717
font-size: 18px;
@@ -27,6 +27,7 @@ body,
2727
}
2828

2929
.message {
30+
white-space: pre-wrap;
3031
font-weight: bold;
3132
}
3233

@@ -37,6 +38,17 @@ body,
3738
padding-top: 3px;
3839
}
3940
}
41+
42+
button {
43+
$background-color: #ccc;
44+
border: none;
45+
border: 1px solid black;
46+
padding: 10px 20px;
47+
48+
&:hover {
49+
background: lighten($color: $background-color, $amount: 10);
50+
}
51+
}
4052
}
4153

4254
.forms,

‎src/app.tsx

Lines changed: 58 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,72 @@
11
import "@babel/polyfill";
22

3-
import React, { useState, useEffect, ErrorInfo } from "react";
3+
import React, { useState, useEffect, ErrorInfo, useMemo, useCallback } from "react";
44
import ReactDOM from "react-dom";
5+
import { MD5 } from "object-hash";
56
import { GroupStoreMutable } from "./stores/group-store";
67
import { GroupContext, GroupContextObject } from "./contexts/group-context";
7-
import { useForceUpdate } from "./force-update";
8+
// import { useForceUpdate } from "./force-update";
9+
import { Test1 } from "./tests/test1";
810

911
import "./reset.scss";
1012
import "./app.scss";
11-
import { Test1 } from "./tests/test1";
1213

1314
const store = new GroupStoreMutable();
15+
16+
// tslint:disable-next-line:no-any
17+
(window as any).store = store;
18+
19+
function useStoreHash(): [TestState, () => void] {
20+
const [state, setState] = useState<TestState>({
21+
storeObject: undefined,
22+
store: {},
23+
hash: ""
24+
});
25+
26+
const updateStoreHash = useCallback(() => {
27+
const storeObject = store.toObject();
28+
const hash = MD5({
29+
storeHash: MD5(store),
30+
storeObjectHash: MD5(storeObject)
31+
});
32+
if (state.hash === hash) {
33+
return;
34+
}
35+
setState({
36+
storeObject: storeObject,
37+
store: store,
38+
hash: hash
39+
});
40+
}, [store]);
41+
42+
return [state, updateStoreHash];
43+
}
44+
45+
interface TestState {
46+
storeObject?: unknown;
47+
store: unknown;
48+
hash: string;
49+
}
50+
1451
const Test = () => {
15-
const forceUpdate = useForceUpdate();
52+
const [state, updateStoreHash] = useStoreHash();
1653
useEffect(() => {
1754
const listener = () => {
18-
forceUpdate();
55+
// console.log("State updated");
56+
updateStoreHash();
1957
};
20-
forceUpdate();
58+
updateStoreHash();
2159
store.addListener(listener);
2260
return () => store.removeListener(listener);
2361
}, []);
2462

63+
// const [groupId] = useState(undefined);
64+
const [groupId] = useState("person");
65+
2566
const groupContext: GroupContextObject = {
2667
store: store,
2768
test: "app",
28-
groupId: "person"
69+
groupId: groupId
2970
};
3071

3172
return (
@@ -38,7 +79,7 @@ const Test = () => {
3879
<div className="store">
3980
<pre>
4081
{JSON.stringify(
41-
store,
82+
state.store,
4283
// tslint:disable-next-line:no-any
4384
(_, value: any) => {
4485
if (typeof value !== "function") {
@@ -51,9 +92,7 @@ const Test = () => {
5192
)}
5293
</pre>
5394
</div>
54-
<pre className="store-result">
55-
{JSON.stringify(store.toObject(), null, 4)}
56-
</pre>
95+
<pre className="store-result">{JSON.stringify(state.storeObject, null, 4)}</pre>
5796
</>
5897
);
5998
};
@@ -77,18 +116,18 @@ class App extends React.Component {
77116
const { error } = this.state;
78117
if (error != null) {
79118
const info = this.state.info!;
80-
console.warn(error.message);
81-
console.log(info);
82119
return (
83120
<div className="error">
84-
<p className="disclaimer">
85-
Oops! An error has occurred! Here’s what we know…
86-
</p>
87-
<p className="message">{error.message}</p>
88-
<p className="component-stack">
121+
<p className="disclaimer">Oops! An error has occurred! Here’s what we know…</p>
122+
<pre className="message">{error.message}</pre>
123+
<div className="component-stack">
89124
Component stack:
90125
<pre>{info.componentStack.substr(1)}</pre>
91-
</p>
126+
</div>
127+
128+
<div>
129+
<button onClick={() => location.reload()}>Reload page</button>
130+
</div>
92131
</div>
93132
);
94133
}

‎src/components/permanent.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from "react";
2+
import { PermanentContext } from "../contexts/permanent-context";
3+
4+
interface Props {
5+
children: React.ReactNode;
6+
}
7+
8+
export const Permanent = (props: Props) => {
9+
return (
10+
<PermanentContext.Provider value={{ permanent: true }}>
11+
{props.children}
12+
</PermanentContext.Provider>
13+
);
14+
};

0 commit comments

Comments
 (0)