);
+ });
+}
diff --git a/chrome-extension/src/types.ts b/chrome-extension/src/types.ts
new file mode 100644
index 0000000..fa78dcb
--- /dev/null
+++ b/chrome-extension/src/types.ts
@@ -0,0 +1,7 @@
+export const eventInit = "stalo-init";
+export const eventRecord = "stalo-record";
+export const eventUpdate = "stalo-update";
+
+export interface StaloEvent extends Event {
+ detail: string;
+}
diff --git a/chrome-extension/tsconfig.json b/chrome-extension/tsconfig.json
new file mode 100644
index 0000000..dd97108
--- /dev/null
+++ b/chrome-extension/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+
+ "types": ["chrome"]
+ }
+}
diff --git a/chrome-extension/vite.config.ts b/chrome-extension/vite.config.ts
new file mode 100644
index 0000000..27c2507
--- /dev/null
+++ b/chrome-extension/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import manifest from "./manifest";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react(), manifest],
+ optimizeDeps: { exclude: ["fsevents"] },
+ build: {
+ sourcemap: true,
+ },
+});
diff --git a/cspell.json b/cspell.json
index 52c20b3..c79972b 100644
--- a/cspell.json
+++ b/cspell.json
@@ -1,10 +1,14 @@
{
"words": [
+ "codemirror",
"immer",
+ "okaidia",
"stalo",
"todomvc",
"todos",
+ "treeshake",
"tsbuildinfo",
+ "webext",
"wouter",
"zustand"
]
diff --git a/devtools-ui/.gitignore b/devtools-ui/.gitignore
new file mode 100644
index 0000000..685b187
--- /dev/null
+++ b/devtools-ui/.gitignore
@@ -0,0 +1 @@
+/lib/
\ No newline at end of file
diff --git a/devtools-ui/dev/Components.tsx b/devtools-ui/dev/Components.tsx
new file mode 100644
index 0000000..4f5384e
--- /dev/null
+++ b/devtools-ui/dev/Components.tsx
@@ -0,0 +1,50 @@
+import create from "stalo";
+import Panel from "../src/Panel";
+import { compose } from "stalo/lib/utils";
+import devtools, { description, name } from "stalo/lib/devtools";
+import immer from "stalo/lib/immer";
+
+const initStat = 0;
+
+const [useCount, baseSetCount] = create(initStat);
+
+const setCount = compose(baseSetCount, immer, devtools(initStat));
+
+export function App() {
+ return (
+
+ );
+}
+
+export function Counter() {
+ return (
+
+ );
+}
diff --git a/devtools-ui/dev/index.tsx b/devtools-ui/dev/index.tsx
new file mode 100644
index 0000000..3d57bbb
--- /dev/null
+++ b/devtools-ui/dev/index.tsx
@@ -0,0 +1,20 @@
+import ReactDOM from "react-dom/client";
+import connect from "../src/connect";
+import { App } from "./Components";
+import { StrictMode } from "react";
+
+connect();
+
+setup();
+
+function setup() {
+ const root = document.createElement("div");
+
+ document.body.appendChild(root);
+
+ ReactDOM.createRoot(root).render(
+
+
+
+ );
+}
diff --git a/devtools-ui/index.html b/devtools-ui/index.html
new file mode 100644
index 0000000..1c4dd32
--- /dev/null
+++ b/devtools-ui/index.html
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/devtools-ui/package.json b/devtools-ui/package.json
new file mode 100644
index 0000000..0ae2af1
--- /dev/null
+++ b/devtools-ui/package.json
@@ -0,0 +1,32 @@
+{
+ "name": "@stalo/devtools-ui",
+ "version": "0.0.1",
+ "description": "UI for stalo devtools",
+ "type": "module",
+ "scripts": {
+ "start": "vite --open",
+ "build": "tsc -b"
+ },
+ "main": "./lib/index.js",
+ "exports": {
+ ".": "./lib/index.js"
+ },
+ "files": [
+ "./lib"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/ysmood/stalo/tree/main/packages/devtools-ui"
+ },
+ "dependencies": {
+ "@codemirror/lang-json": "^6.0.1",
+ "@emotion/css": "^11.13.4",
+ "@uiw/codemirror-theme-okaidia": "^4.23.5",
+ "@uiw/react-codemirror": "^4.23.5",
+ "deep-equal": "^2.2.3",
+ "stalo": "file:.."
+ },
+ "devDependencies": {
+ "@types/deep-equal": "^1.0.4"
+ }
+}
diff --git a/devtools-ui/src/Components.tsx b/devtools-ui/src/Components.tsx
new file mode 100644
index 0000000..4f82bef
--- /dev/null
+++ b/devtools-ui/src/Components.tsx
@@ -0,0 +1,109 @@
+import { css, cx } from "@emotion/css";
+import { initName, noName } from "stalo/lib/devtools";
+import { commitName } from "./store";
+
+export function Button({
+ text,
+ onClick,
+ className,
+}: {
+ text: string;
+ onClick?: () => void;
+ className?: string;
+}) {
+ return (
+
+ {text}
+
+ );
+}
+
+const buttonStyle = css({
+ backgroundColor: "#333",
+ padding: "5px 10px",
+ borderRadius: "3px",
+ cursor: "pointer",
+ transition: "background-color 0.3s, transform 0.1s",
+ userSelect: "none",
+
+ "&:hover": {
+ backgroundColor: "#555",
+ },
+
+ "&:active": {
+ backgroundColor: "#222",
+ transform: "scale(0.95)",
+ },
+});
+
+export function Title({
+ text,
+ className,
+}: {
+ text: string;
+ className?: string;
+}) {
+ return {text}
;
+}
+
+const titleStyle = css({
+ fontSize: 16,
+});
+
+export function Time({
+ time,
+ className,
+}: {
+ time: number;
+ className?: string;
+}) {
+ return (
+
+ {new Date(time).toLocaleString()}
+
+ );
+}
+
+const timeStyle = css({
+ color: "#777",
+});
+
+export function Name({
+ name,
+ className,
+}: {
+ name: symbol;
+ className?: string;
+}) {
+ return (
+
+ {(() => {
+ switch (name) {
+ case initName:
+ return
Initial State
;
+ case noName:
+ return
No name
;
+ case commitName:
+ return
Commit
;
+ default:
+ return
{name.toString()}
;
+ }
+ })()}
+
+
+
+ {useHistoryIDs().map((id) => {
+ return
+
selectRecord(id)}
+ >
+
+
+ {rec.description === undefined ? NoDescription() : rec.description}
+
+
+ {duration < 0 ? "-" : "+"}
+ {hrs > 0 ? {hrs}h : null}
+ {min > 0 ? {min % 60}m : null}
+ {(sec % 60).toFixed(2)}s
+
+ );
+}
+
+function NoDescription() {
+ return No description;
+}
+
+const style = css({
+ label: "History",
+ height: "100%",
+ overflowY: "scroll",
+ boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+ gridArea: "history",
+
+ ".border-bottom": {
+ borderBottom: "1px solid #3c3c3c",
+ },
+
+ ".title": {
+ padding: 10,
+ },
+
+ ".item": {
+ cursor: "pointer",
+ display: "flex",
+ flexDirection: "column",
+ gap: 5,
+ padding: "5px 0",
+
+ "&:hover, &.selected": {
+ background: "#3c3c3c",
+ },
+
+ ".line": {
+ padding: "0 10px",
+ },
+
+ ".light": {
+ color: "#ccc",
+ fontSize: 10,
+ },
+
+ ".title": {
+ alignItems: "center",
+ display: "flex",
+ gap: 10,
+ color: "#ccc",
+
+ ".min": {
+ color: "#d84685",
+ },
+ },
+
+ ".name": {
+ flex: 1,
+ },
+
+ ".no-desc": {
+ color: "#777",
+ },
+ },
+});
diff --git a/devtools-ui/src/Panel.tsx b/devtools-ui/src/Panel.tsx
new file mode 100644
index 0000000..5da087a
--- /dev/null
+++ b/devtools-ui/src/Panel.tsx
@@ -0,0 +1,37 @@
+import { css } from "@emotion/css";
+import Staging from "./Staging";
+import History from "./History";
+import { CurrentRecord } from "./RecordDetails";
+
+export default function Panel() {
+ return (
+
+
+
+
+
+ );
+}
+
+const style = css({
+ label: "Panel",
+
+ display: "grid",
+ gridTemplateColumns: "300px 1fr",
+ gridTemplateRows: "auto 1fr",
+ gridTemplateAreas: `
+ "history record-details"
+ "history staging"
+ `,
+
+ gap: 10,
+ height: "100%",
+ color: "#fff",
+ fontFamily: "Arial, sans-serif",
+ fontSize: 12,
+ backgroundColor: "#282828",
+
+ "h1, h2, h3": {
+ fontWeight: "lighter",
+ },
+});
diff --git a/devtools-ui/src/RecordDetails.tsx b/devtools-ui/src/RecordDetails.tsx
new file mode 100644
index 0000000..75f1450
--- /dev/null
+++ b/devtools-ui/src/RecordDetails.tsx
@@ -0,0 +1,52 @@
+import { css } from "@emotion/css";
+import { Name, Time } from "./Components";
+import { useRecord, useSelected } from "./store";
+
+export function CurrentRecord() {
+ const id = useSelected();
+ const record = useRecord(id);
+ return (
+
+
+
+
+ Name:
+
+
+ Description:
+
{record.description}
+
+
+ Created At:
+
+
+
+
+
+
+
+
+ {
+ setStaging(val);
+ }}
+ />
+
+
= {
+ name: symbol;
+ state: S;
+ description?: string;
+ createdAt: number;
+};
+
+export const noName = Symbol("no-name");
+
+export const initName = Symbol("init");
+
+export default function devtools(init: S): Middleware {
+ return (set) => {
+ const subscribers = new Set>();
+
+ Object.assign(window, {
+ [devtoolsKey]: new Devtools(
+ { name: initName, state: init, createdAt: Date.now() },
+ set,
+ subscribers
+ ),
+ });
+
+ window.dispatchEvent(new CustomEvent(devtoolsKey));
+
+ return (ns, options?: DevtoolsOptions) => {
+ const produce = producer(ns);
+ set((prev) => {
+ const curr = produce(prev);
+
+ subscribers.forEach((s) =>
+ s({
+ state: curr,
+ name: options && options[name] ? options[name] : noName,
+ description: options?.[description],
+ createdAt: Date.now(),
+ })
+ );
+
+ return curr;
+ }, options);
+ };
+ };
+}
+
+export function getDevtools(): Devtools | undefined {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ return (window as any)[devtoolsKey];
+}
+
+type Subscriber = (record: Record) => void;
+
+export class Devtools {
+ constructor(
+ readonly initRecord: Record,
+ private set: SetStore,
+ private subscribers: Set>
+ ) {}
+
+ subscribe(cb: (record: Record) => void) {
+ this.subscribers.add(cb);
+
+ return () => {
+ this.subscribers.delete(cb);
+ };
+ }
+
+ /**
+ * Set the current state without creating history.
+ */
+ set state(s: S) {
+ this.set(() => s);
+ }
+}
diff --git a/src/index.ts b/src/index.ts
index 6f1564a..bb8e45e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -61,7 +61,7 @@ export default function create(init: S) {
const setStore: SetStore = (ns: NextState) => {
// update val with the new value
- state = producer(ns)(state) as S;
+ state = producer(ns)(state);
// notify all listeners
for (const listener of listeners) {
@@ -76,6 +76,6 @@ export default function create(init: S) {
* Converts a NextState to a Produce function.
* @returns
*/
-export function producer(ns: NextState): Produce {
- return ns instanceof Function ? ns : () => ns;
+export function producer(ns: NextState): (s: S) => S {
+ return ns instanceof Function ? (ns as (s: S) => S) : () => ns;
}
diff --git a/src/persistent.ts b/src/persistent.ts
index 6688c96..d9a08a6 100644
--- a/src/persistent.ts
+++ b/src/persistent.ts
@@ -30,7 +30,7 @@ export function urlStorage(storage: URLStorage): Middleware {
return (ns, opts?: URLStorageOptions) => {
const produce = producer(ns);
set((state) => {
- const s = produce(state) as S;
+ const s = produce(state);
storage.set(s, opts?.[saveHistory]);
return s;
}, opts);
diff --git a/tsconfig.examples.json b/tsconfig.examples.json
index 2388ff3..732b297 100644
--- a/tsconfig.examples.json
+++ b/tsconfig.examples.json
@@ -23,5 +23,5 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
- "include": ["examples", "src"]
+ "include": ["examples"]
}
diff --git a/tsconfig.lib.json b/tsconfig.lib.json
index b000f04..e17ab46 100644
--- a/tsconfig.lib.json
+++ b/tsconfig.lib.json
@@ -10,6 +10,7 @@
"rootDir": "./src",
"outDir": "./lib",
"declaration": true,
+ "jsx": "react-jsx",
/* Linting */
"strict": true,
@@ -17,5 +18,5 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
- "include": ["src/**/*.ts"]
+ "include": ["src/**/*.ts", "src/**/*.tsx"]
}