Skip to content

Commit d4f4533

Browse files
mayank1513mayank1513
committed
docs(changeset): Remove console.logs from the persist plugin
1 parent 8792279 commit d4f4533

File tree

8 files changed

+239
-15
lines changed

8 files changed

+239
-15
lines changed

‎.changeset/four-tools-sing.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"kosha": patch
3+
---
4+
5+
Remove console.logs from the persist plugin

‎lib/src/middleware/persist.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export const persist =
3131
if (!persistedVal) return;
3232
const parsed = JSON.parse(persistedVal);
3333
if (options.version === undefined || options.version === parsed.version) {
34-
console.log({ parsed });
3534
set(parsed.state);
3635
} else if (options.migrate) {
3736
const newState = options.migrate(parsed.state, parsed.version);
@@ -57,7 +56,6 @@ export const persist =
5756
set(newState);
5857
};
5958
const persistGetter = () => {
60-
console.log("persist getter called --- ");
6159
if (!isSynced && typeof window !== "undefined") {
6260
onStorageChange();
6361
window.addEventListener("storage", onStorageChange);

‎packages/shared/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,9 @@
4646
"nextjs-darkmode": "^1.0.10",
4747
"nextjs-themes": "^4.0.6",
4848
"r18gs": "^3.0.1",
49+
"react-error-boundary": "^6.0.0",
4950
"react-live": "^4.1.8",
50-
"react18-loaders": "^1.1.4"
51+
"react18-loaders": "^1.1.4",
52+
"zustand": "^5.0.5"
5153
}
5254
}

‎packages/shared/src/client/demo/compare/compare.module.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.compare {
2+
display: flex;
3+
}
4+
5+
.compare__store {
6+
flex-grow: 1;
7+
padding: 10px 20px;
8+
}

‎packages/shared/src/client/demo/compare/index.tsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { useRef } from "react";
2+
import { getStore, ICompareStore, ICompareStoreActions } from "./store";
3+
import { ErrorBoundary } from "react-error-boundary";
4+
import styles from "./compare.module.scss";
5+
6+
interface StoreTypeProps {
7+
type: "zustand" | "kosha";
8+
}
9+
10+
type ComponentProps = ICompareStore & ICompareStoreActions;
11+
12+
const P1 = ({ p1, setP1 }: Pick<ComponentProps, "p1" | "setP1">) => {
13+
const renderCountRef = useRef(0);
14+
renderCountRef.current++;
15+
return (
16+
<div>
17+
<p className="display">
18+
p1:
19+
<button onClick={() => setP1(crypto.randomUUID())}>Update</button>
20+
{p1.slice(25)} | renderCount is {renderCountRef.current}
21+
</p>
22+
</div>
23+
);
24+
};
25+
26+
const P2 = ({ p2, setP2 }: Pick<ComponentProps, "p2" | "setP2">) => {
27+
const renderCountRef = useRef(0);
28+
renderCountRef.current++;
29+
return (
30+
<div>
31+
<p className="display">
32+
p2:
33+
<button onClick={() => setP2(Math.random())}>Update</button>
34+
{p2.toFixed(6)} | renderCount is {renderCountRef.current}
35+
</p>
36+
</div>
37+
);
38+
};
39+
40+
const P1ExtractAsObj = ({ type }: StoreTypeProps) => {
41+
const { p1, setP1 } = getStore(type)(({ p1, setP1 }) => ({ p1, setP1 }));
42+
return <P1 {...{ p1, setP1 }} />;
43+
};
44+
45+
const P1ExtractAsArray = ({ type }: StoreTypeProps) => {
46+
const [p1, setP1] = getStore(type)(({ p1, setP1 }) => [p1, setP1] as const);
47+
return <P1 {...{ p1, setP1 }} />;
48+
};
49+
50+
const P1ExtractIndividually = ({ type }: StoreTypeProps) => {
51+
const p1 = getStore(type)(({ p1 }) => p1);
52+
const setP1 = getStore(type)(({ setP1 }) => setP1);
53+
return <P1 {...{ p1, setP1 }} />;
54+
};
55+
56+
const P2ExtractAsObj = ({ type }: StoreTypeProps) => {
57+
const { p2, setP2 } = getStore(type)(({ p2, setP2 }) => ({ p2, setP2 }));
58+
return <P2 {...{ p2, setP2 }} />;
59+
};
60+
61+
const P2ExtractAsArray = ({ type }: StoreTypeProps) => {
62+
const [p2, setP2] = getStore(type)(({ p2, setP2 }) => [p2, setP2] as const);
63+
return <P2 {...{ p2, setP2 }} />;
64+
};
65+
66+
const P2ExtractIndividually = ({ type }: StoreTypeProps) => {
67+
const p2 = getStore(type)(({ p2 }) => p2);
68+
const setP2 = getStore(type)(({ setP2 }) => setP2);
69+
return <P2 {...{ p2, setP2 }} />;
70+
};
71+
72+
export const Compare = () => (
73+
<div className={styles.compare}>
74+
<div className={styles.compare__store}>
75+
<h2>Kosha</h2>
76+
<h4>Extract as Object</h4>
77+
<code>{`const { p2, setP2 } = myStore(({ p2, setP2 }) => ({ p2, setP2 }))`}</code>
78+
<P1ExtractAsObj type="kosha" />
79+
<P2ExtractAsObj type="kosha" />
80+
<hr />
81+
<h4>Extract as Array</h4>
82+
<code>{`const [p2, setP2] = myStore(({ p2, setP2 }) => [p2, setP2] as const)`}</code>
83+
<P1ExtractAsArray type="kosha" />
84+
<P2ExtractAsArray type="kosha" />
85+
<hr />
86+
<h4>Extract individually</h4>
87+
<code>{`const p2 = myStore(({ p2 }) => p2)`}</code>
88+
<P1ExtractIndividually type="kosha" />
89+
<P2ExtractIndividually type="kosha" />
90+
</div>
91+
<div className={styles.compare__store}>
92+
<h2>Zustand</h2>
93+
<h4>Extract as Object</h4>
94+
<code>{`const { p2, setP2 } = myStore(({ p2, setP2 }) => ({ p2, setP2 }))`}</code>
95+
<ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
96+
<P1ExtractAsObj type="zustand" />
97+
</ErrorBoundary>
98+
<ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
99+
<P2ExtractAsObj type="zustand" />
100+
</ErrorBoundary>
101+
<hr />
102+
<h4>Extract as Array</h4>
103+
<code>{`const [p2, setP2] = myStore(({ p2, setP2 }) => [p2, setP2] as const)`}</code>
104+
<ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
105+
<P1ExtractAsArray type="zustand" />
106+
</ErrorBoundary>
107+
<ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
108+
<P2ExtractAsArray type="zustand" />
109+
</ErrorBoundary>
110+
<hr />
111+
<h4>Extract individually</h4>
112+
<code>{`const p2 = myStore(({ p2 }) => p2)`}</code>
113+
<P1ExtractIndividually type="zustand" />
114+
<P2ExtractIndividually type="zustand" />
115+
</div>
116+
</div>
117+
);

‎packages/shared/src/client/demo/compare/store.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { create as createKosha } from "kosha";
2+
import { create as createZustand } from "zustand";
3+
4+
type SetStateAction<T> = (state: T | ((s: T) => T)) => void;
5+
6+
export interface ICompareStore {
7+
p1: string;
8+
p2: number;
9+
o: {
10+
a: string;
11+
b: number;
12+
};
13+
a: string[];
14+
}
15+
16+
export interface ICompareStoreActions {
17+
setP1: (p1: string) => void;
18+
setP2: (p2: number) => void;
19+
setO: (o: { a: string; b: number }) => void;
20+
setA: (a: string[]) => void;
21+
}
22+
23+
const defaultState: ICompareStore = {
24+
p1: "hi",
25+
p2: 0,
26+
o: { a: "hi", b: 0 },
27+
a: [],
28+
};
29+
30+
const storeCreator = (
31+
set: SetStateAction<Partial<ICompareStore & ICompareStoreActions>>,
32+
): ICompareStore & ICompareStoreActions => ({
33+
...defaultState,
34+
setP1: p1 => set({ p1 }),
35+
setP2: p2 => set({ p2 }),
36+
setO: o => set({ o }),
37+
setA: a => set({ a }),
38+
});
39+
40+
const useKosha = createKosha<ICompareStore & ICompareStoreActions>(storeCreator);
41+
const useZustand = createZustand<ICompareStore & ICompareStoreActions>()(storeCreator);
42+
43+
export const getStore = (type: "zustand" | "kosha") => (type === "kosha" ? useKosha : useZustand);

‎packages/shared/src/client/demo/demo.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@ import headerCode from "./with-selectors/header.tsx?raw";
1414
import userDataCode from "./with-selectors/user-data.tsx?raw";
1515
import { PersistedCounter } from "./persist";
1616
import PersistedCounterCode from "./persist?raw";
17+
import { Compare } from "./compare";
18+
import compareCode from "./compare?raw";
19+
import compareStoreCode from "./compare/store?raw";
20+
21+
const compareExCode = [
22+
{ filename: "compare.tsx", code: compareCode },
23+
{ filename: "store.ts", code: compareStoreCode },
24+
];
1725

1826
const basicExCode = [
1927
{ filename: "counter.tsx", code: counterCode },
@@ -37,6 +45,10 @@ export function Demo() {
3745
<h2 className={styles.preview}>A tiny yet powerful store for modern react libraries.</h2>
3846
<img src="https://img.shields.io/bundlephobia/minzip/kosha" alt="NPM Bundle Size" />
3947
</div>
48+
<div className={styles.demo}>
49+
<Compare />
50+
<CodeDisplay code={compareExCode} />
51+
</div>
4052
<div className={styles.demo}>
4153
<BasicExample />
4254
<CodeDisplay code={basicExCode} />

‎pnpm-lock.yaml‎

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

0 commit comments

Comments
 (0)