atom.io 0.6.5 → 0.6.7

package/src/react-devtools/StateIndex.tsx

@@ -0,0 +1,153 @@
+import type { AtomToken, ReadonlySelectorToken, SelectorToken } from "atom.io"
+import { getState, selectorFamily } from "atom.io"
+import { useO, useIO } from "atom.io/react"
+import type { FC } from "react"
+
+import { isJson, refineJsonType } from "~/packages/anvl/src/json"
+
+import { findViewIsOpenState, primitiveRefinery } from "."
+import { button } from "./Button"
+import { StoreEditor } from "./StateEditor"
+import type { FamilyNode, StateTokenIndex } from "../introspection"
+
+const findStateTypeState = selectorFamily<string, { key: string }>({
+	key: `👁‍🗨 State Type`,
+	get: (token) => ({ get }) => {
+		let state: unknown
+		try {
+			state = get(token as any)
+		} catch (error) {
+			return `error`
+		}
+		if (state === undefined) return `undefined`
+		if (isJson(state)) return refineJsonType(state).type
+		return Object.getPrototypeOf(state).constructor.name
+	},
+})
+
+export const StateIndexLeafNode: FC<{
+	node:
+		| AtomToken<unknown>
+		| ReadonlySelectorToken<unknown>
+		| SelectorToken<unknown>
+	isOpenState: AtomToken<boolean>
+	typeState: ReadonlySelectorToken<string>
+}> = ({ node, isOpenState, typeState }) => {
+	const [isOpen, setIsOpen] = useIO(isOpenState)
+	const state = useO(node)
+	const stateType = useO(typeState)
+
+	const isPrimitive = Boolean(primitiveRefinery.refine(state))
+
+	return (
+		<>
+			<header>
+				<button.OpenClose
+					isOpen={isOpen && !isPrimitive}
+					setIsOpen={setIsOpen}
+					disabled={isPrimitive}
+				/>
+				<label
+					onClick={() => console.log(node, getState(node))}
+					onKeyUp={() => console.log(node, getState(node))}
+				>
+					<h2>{node.family?.subKey ?? node.key}</h2>
+					<span className="type detail">({stateType})</span>
+				</label>
+				{isPrimitive ? <StoreEditor token={node} /> : null}
+			</header>
+			{isOpen && !isPrimitive ? (
+				<main>
+					<StoreEditor token={node} />
+				</main>
+			) : null}
+		</>
+	)
+}
+export const StateIndexTreeNode: FC<{
+	node: FamilyNode<
+		AtomToken<unknown> | ReadonlySelectorToken<unknown> | SelectorToken<unknown>
+	>
+	isOpenState: AtomToken<boolean>
+}> = ({ node, isOpenState }) => {
+	const [isOpen, setIsOpen] = useIO(isOpenState)
+	Object.entries(node.familyMembers).forEach(([key, childNode]) => {
+		findViewIsOpenState(key)
+		findStateTypeState(childNode)
+	})
+	return (
+		<>
+			<header>
+				<button.OpenClose isOpen={isOpen} setIsOpen={setIsOpen} />
+				<label>
+					<h2>{node.key}</h2>
+					<span className="type detail"> (family)</span>
+				</label>
+			</header>
+			{isOpen
+				? Object.entries(node.familyMembers).map(([key, childNode]) => (
+						<StateIndexNode
+							key={key}
+							node={childNode}
+							isOpenState={findViewIsOpenState(childNode.key)}
+							typeState={findStateTypeState(childNode)}
+						/>
+				  ))
+				: null}
+		</>
+	)
+}
+
+export const StateIndexNode: FC<{
+	node: StateTokenIndex<
+		AtomToken<unknown> | ReadonlySelectorToken<unknown> | SelectorToken<unknown>
+	>[string]
+	isOpenState: AtomToken<boolean>
+	typeState: ReadonlySelectorToken<string>
+}> = ({ node, isOpenState, typeState }) => {
+	if (node.key.startsWith(`👁‍🗨`)) {
+		return null
+	}
+	return (
+		<section className="node state">
+			{`type` in node ? (
+				<StateIndexLeafNode
+					node={node}
+					isOpenState={isOpenState}
+					typeState={typeState}
+				/>
+			) : (
+				<StateIndexTreeNode node={node} isOpenState={isOpenState} />
+			)}
+		</section>
+	)
+}
+
+export const StateIndex: FC<{
+	tokenIndex: ReadonlySelectorToken<
+		StateTokenIndex<
+			| AtomToken<unknown>
+			| ReadonlySelectorToken<unknown>
+			| SelectorToken<unknown>
+		>
+	>
+}> = ({ tokenIndex }) => {
+	const tokenIds = useO(tokenIndex)
+	return (
+		<article className="index state_index">
+			{Object.entries(tokenIds)
+				.filter(([key]) => !key.startsWith(`👁‍🗨`))
+				.sort()
+				.map(([key, node]) => {
+					return (
+						<StateIndexNode
+							key={key}
+							node={node}
+							isOpenState={findViewIsOpenState(node.key)}
+							typeState={findStateTypeState(node)}
+						/>
+					)
+				})}
+		</article>
+	)
+}

package/src/react-devtools/TimelineIndex.tsx

@@ -0,0 +1,92 @@
+import {
+	undo,
+	type AtomToken,
+	type ReadonlySelectorToken,
+	type TimelineToken,
+	redo,
+} from "atom.io"
+import { useIO, useO } from "atom.io/react"
+import { Fragment, type FC } from "react"
+
+import { findTimelineState, findViewIsOpenState, timelineIndex } from "."
+import { button } from "./Button"
+import { article } from "./Updates"
+import type { Timeline } from "../internal"
+
+export const YouAreHere: FC = () => {
+	return <span className="you_are_here">you are here</span>
+}
+
+export const TimelineLog: FC<{
+	token: TimelineToken
+	isOpenState: AtomToken<boolean>
+	timelineState: ReadonlySelectorToken<Timeline>
+}> = ({ token, isOpenState, timelineState }) => {
+	const timeline = useO(timelineState)
+	const [isOpen, setIsOpen] = useIO(isOpenState)
+
+	return (
+		<section className="node timeline_log">
+			<header>
+				<button.OpenClose isOpen={isOpen} setIsOpen={setIsOpen} />
+				<label>
+					<h2>{token.key}</h2>
+					<span className="detail length">
+						({timeline.at}/{timeline.history.length})
+					</span>
+					<span className="gap" />
+					<nav>
+						<button
+							type="button"
+							onClick={() => undo(token)}
+							disabled={timeline.at === 0}
+						>
+							undo
+						</button>
+						<button
+							type="button"
+							onClick={() => redo(token)}
+							disabled={timeline.at === timeline.history.length}
+						>
+							redo
+						</button>
+					</nav>
+				</label>
+			</header>
+			{isOpen ? (
+				<main>
+					{timeline.history.map((update, index) => (
+						<Fragment key={update.key + index + timeline.at}>
+							{index === timeline.at ? <YouAreHere /> : null}
+							<article.TimelineUpdate timelineUpdate={update} />
+							{index === timeline.history.length - 1 &&
+							timeline.at === timeline.history.length ? (
+								<YouAreHere />
+							) : null}
+						</Fragment>
+					))}
+				</main>
+			) : null}
+		</section>
+	)
+}
+
+export const TimelineIndex: FC = () => {
+	const tokenIds = useO(timelineIndex)
+	return (
+		<article className="index timeline_index">
+			{tokenIds
+				.filter((token) => !token.key.startsWith(`👁‍🗨`))
+				.map((token) => {
+					return (
+						<TimelineLog
+							key={token.key}
+							token={token}
+							isOpenState={findViewIsOpenState(token.key)}
+							timelineState={findTimelineState(token.key)}
+						/>
+					)
+				})}
+		</article>
+	)
+}

package/src/react-devtools/TransactionIndex.tsx

@@ -0,0 +1,70 @@
+import type {
+	AtomToken,
+	ReadonlySelectorToken,
+	TransactionToken,
+	TransactionUpdate,
+} from "atom.io"
+import { useIO, useO } from "atom.io/react"
+import type { FC } from "react"
+
+import type { ƒn } from "~/packages/anvl/src/function"
+
+import {
+	findTransactionLogState,
+	findViewIsOpenState,
+	transactionIndex,
+} from "."
+import { button } from "./Button"
+import { article } from "./Updates"
+
+export const TransactionLog: FC<{
+	token: TransactionToken<ƒn>
+	isOpenState: AtomToken<boolean>
+	logState: ReadonlySelectorToken<TransactionUpdate<ƒn>[]>
+}> = ({ token, isOpenState, logState }) => {
+	const log = useO(logState)
+	const [isOpen, setIsOpen] = useIO(isOpenState)
+
+	return (
+		<section className="node transaction_log">
+			<header>
+				<button.OpenClose isOpen={isOpen} setIsOpen={setIsOpen} />
+				<label>
+					<h2>{token.key}</h2>
+					<span className="detail length">({log.length})</span>
+				</label>
+			</header>
+			{isOpen ? (
+				<main>
+					{log.map((update, index) => (
+						<article.TransactionUpdate
+							key={update.key + index}
+							serialNumber={index}
+							transactionUpdate={update}
+						/>
+					))}
+				</main>
+			) : null}
+		</section>
+	)
+}
+
+export const TransactionIndex: FC = () => {
+	const tokenIds = useO(transactionIndex)
+	return (
+		<article className="index transaction_index">
+			{tokenIds
+				.filter((token) => !token.key.startsWith(`👁‍🗨`))
+				.map((token) => {
+					return (
+						<TransactionLog
+							key={token.key}
+							token={token}
+							isOpenState={findViewIsOpenState(token.key)}
+							logState={findTransactionLogState(token.key)}
+						/>
+					)
+				})}
+		</article>
+	)
+}

package/src/react-devtools/Updates.tsx

@@ -0,0 +1,145 @@
+import type { ƒn } from "~/packages/anvl/src/function"
+import { discoverType } from "~/packages/anvl/src/refinement/refinery"
+
+import { prettyJson } from "."
+import type { KeyedStateUpdate } from "../subscribe"
+import type { TimelineUpdate } from "../timeline"
+import type { TransactionUpdate } from "../transaction"
+
+const AtomUpdateFC: React.FC<{
+	serialNumber: number
+	atomUpdate: KeyedStateUpdate<unknown>
+}> = ({ atomUpdate }) => {
+	return (
+		<article
+			key={atomUpdate.key}
+			className="node atom_update"
+			onClick={() => console.log(atomUpdate)}
+			onKeyUp={() => console.log(atomUpdate)}
+		>
+			<span className="detail">{atomUpdate.key}: </span>
+			<span>
+				<span className="summary">
+					{prettyJson.diff(atomUpdate.oldValue, atomUpdate.newValue).summary}
+				</span>
+			</span>
+		</article>
+	)
+}
+
+const TransactionUpdateFC: React.FC<{
+	serialNumber: number
+	transactionUpdate: TransactionUpdate<ƒn>
+}> = ({ serialNumber, transactionUpdate }) => {
+	return (
+		<article className="node transaction_update">
+			<header>
+				<h4>{serialNumber}</h4>
+			</header>
+			<main>
+				<section className="transaction_params">
+					<span className="detail">params: </span>
+					{transactionUpdate.params.map((param, index) => {
+						return (
+							<article
+								key={`param` + index}
+								className="node transaction_param"
+								onClick={() => console.log(transactionUpdate)}
+								onKeyUp={() => console.log(transactionUpdate)}
+							>
+								<span className="detail">{discoverType(param)}: </span>
+								<span className="summary">
+									{typeof param === `object` &&
+									`type` in param &&
+									`target` in param ? (
+										<>{JSON.stringify(param.type)}</>
+									) : (
+										<>{JSON.stringify(param)}</>
+									)}
+								</span>
+							</article>
+						)
+					})}
+				</section>
+				<section className="node transaction_output">
+					<span className="detail">output: </span>
+					<span className="detail">
+						{discoverType(transactionUpdate.output)}
+					</span>
+					{transactionUpdate.output ? (
+						<span className="summary">
+							: {JSON.stringify(transactionUpdate.output)}
+						</span>
+					) : null}
+				</section>
+				<section className="transaction_impact">
+					<span className="detail">impact: </span>
+					{transactionUpdate.atomUpdates
+						.filter((token) => !token.key.startsWith(`👁‍🗨`))
+						.map((atomUpdate, index) => {
+							return (
+								<article.AtomUpdate
+									key={`${transactionUpdate.key}:${index}:${atomUpdate.key}`}
+									serialNumber={index}
+									atomUpdate={atomUpdate}
+								/>
+							)
+						})}
+				</section>
+			</main>
+		</article>
+	)
+}
+
+export const TimelineUpdateFC: React.FC<{
+	timelineUpdate: TimelineUpdate
+}> = ({ timelineUpdate }) => {
+	return (
+		<article className="node timeline_update">
+			<header>
+				<h4>
+					{timelineUpdate.timestamp}: {timelineUpdate.type} ({timelineUpdate.key}
+					)
+				</h4>
+			</header>
+			<main>
+				{timelineUpdate.type === `transaction_update` ? (
+					timelineUpdate.atomUpdates
+						.filter((token) => !token.key.startsWith(`👁‍🗨`))
+						.map((atomUpdate, index) => {
+							return (
+								<article.AtomUpdate
+									key={`${timelineUpdate.key}:${index}:${atomUpdate.key}`}
+									serialNumber={index}
+									atomUpdate={atomUpdate}
+								/>
+							)
+						})
+				) : timelineUpdate.type === `selector_update` ? (
+					timelineUpdate.atomUpdates
+						.filter((token) => !token.key.startsWith(`👁‍🗨`))
+						.map((atomUpdate, index) => {
+							return (
+								<article.AtomUpdate
+									key={`${timelineUpdate.key}:${index}:${atomUpdate.key}`}
+									serialNumber={index}
+									atomUpdate={atomUpdate}
+								/>
+							)
+						})
+				) : timelineUpdate.type === `atom_update` ? (
+					<article.AtomUpdate
+						serialNumber={timelineUpdate.timestamp}
+						atomUpdate={timelineUpdate}
+					/>
+				) : null}
+			</main>
+		</article>
+	)
+}
+
+export const article = {
+	AtomUpdate: AtomUpdateFC,
+	TransactionUpdate: TransactionUpdateFC,
+	TimelineUpdate: TimelineUpdateFC,
+}

package/src/react-devtools/devtools.scss

@@ -1,9 +1,12 @@
 main.atom_io_devtools {
   --fg-color: #eee;
   --bg-color: #111;
+  --bg-tint1: #222;
+  --fg-border: 1px solid var(--fg-color);
   @media (prefers-color-scheme: light) {
-    --fg-color: #222;
-    --bg-color: #ccc;
+    --fg-color: #444;
+    --bg-color: #ddd;
+    --bg-tint1: #e3e3e3;
   }
   box-sizing: border-box;
   color: var(--fg-color);
@@ -17,31 +20,208 @@ main.atom_io_devtools {
   flex-flow: column;
   max-height: 800px;
   width: 100%;
-  max-width: 460px;
+  max-width: 500px;
   overflow-y: scroll;
-  padding: 5px;
-  header {
+  * {
+    font-size: 16px;
+    font-family: theia, monospace;
+  }
+  > header {
+    padding: 5px;
+    padding-left: 10px;
+    padding-bottom: 0;
     display: flex;
     justify-content: space-between;
     h1 {
       font-size: inherit;
       margin: 0;
+      font-size: 24px;
+      font-family: charter;
+    }
+    nav {
+      display: flex;
+      flex-flow: row nowrap;
+      button {
+        cursor: pointer;
+        background: none;
+        border: none;
+        padding: none;
+        margin-bottom: -2px;
+        z-index: 1000;
+        &:disabled {
+          cursor: default;
+          background-color: var(--bg-tint1);
+          color: var(--fg-color);
+          border: var(--fg-border);
+          border-bottom: none;
+        }
+      }
     }
   }
+  > main {
+    background: var(--bg-tint1);
+  }
   main {
     overflow-y: scroll;
     flex-grow: 1;
-    section {
-      margin-top: 30px;
-      h2 {
-        font-size: inherit;
-        margin: 0;
+    display: flex;
+    flex-flow: column;
+    gap: 0;
+    article.index {
+      .node .node {
+        border-right: var(--fg-border);
+        padding-right: 0;
+        background: #fff3;
+      }
+      .node > .node {
+        margin: 5px 0;
+        margin-left: 12px;
+        border-left: var(--fg-border);
       }
       .node {
-        border: 1px solid var(--fg-color);
-        padding: 5px;
-        margin: 5px;
+        border-top: var(--fg-border);
         overflow-x: scroll;
+        padding: 5px;
+        &:last-of-type {
+          border-bottom: var(--fg-border);
+        }
+        &.transaction_update {
+          padding: 0;
+        }
+        header {
+          display: flex;
+          flex-flow: row;
+          gap: 5px;
+          position: sticky;
+          z-index: 999;
+          top: 0;
+          button.carat {
+            cursor: pointer;
+            background: none;
+            border: none;
+            width: 20px;
+            &.open {
+              transform: rotate(90deg);
+            }
+            &:disabled {
+              cursor: default;
+            }
+          }
+          label {
+            display: flex;
+            flex-flow: row;
+            gap: 5px;
+            cursor: help;
+            h2 {
+              display: inline-block;
+              margin: 0;
+            }
+            .detail {
+              color: #777;
+              @media (prefers-color-scheme: light) {
+                color: #999;
+              }
+            }
+          }
+        }
+        main {
+          margin-left: 15px;
+        }
+      }
+      section.transaction_log {
+        margin-top: 0;
+        header: {
+          padding: 5px;
+        }
+        main {
+          display: flex;
+          flex-flow: row wrap;
+          gap: 5px;
+          .transaction_update {
+            width: 100%;
+            display: flex;
+            flex-flow: row;
+            align-items: flex-start;
+            justify-content: flex-start;
+            justify-items: flex-start;
+            align-content: flex-start;
+            border-left: var(--fg-border);
+            border-top: var(--fg-border);
+            header {
+              padding: 5px;
+              h4 {
+                margin: 0;
+                padding: 0;
+                font-size: inherit;
+              }
+            }
+            main {
+              margin-left: 0;
+              display: flex;
+              flex-flow: column;
+              gap: 0px;
+              border-left: 1px solid #333;
+              section ~ section {
+                border-top: 1px solid #333;
+              }
+              section {
+                padding: 5px;
+                &.transaction_output {
+                  border-right: none;
+                }
+                &.transaction_impact {
+                  padding: 5px;
+                }
+                margin: 0;
+                article {
+                  border-left: var(--fg-border);
+                  border-right: var(--fg-border);
+                  .summary {
+                    white-space: nowrap;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      section.timeline_log {
+        header {
+          display: flex;
+          label {
+            display: flex;
+            width: 100%;
+            flex-grow: 1;
+            .gap {
+              flex-grow: 1;
+            }
+            nav {
+              display: flex;
+              flex-flow: row nowrap;
+              gap: 5px;
+            }
+          }
+        }
+        .timeline_update {
+          padding: 5px;
+          border-left: var(--fg-border);
+          h4 {
+            margin: 0;
+            padding: 0;
+            font-size: inherit;
+          }
+          main {
+            margin: 0;
+            .node.atom_update {
+              border-left: var(--fg-border);
+            }
+          }
+        }
+        .you_are_here {
+          background: var(--fg-color);
+          color: var(--bg-color);
+          text-align: center;
+        }
       }
     }
   }
@@ -61,7 +241,7 @@ main.atom_io_devtools {
 
   .json_editor {
     input {
-      font-size: 20px;
+      // font-size: 20px;
       font-family: theia;
       border: none;
       border-bottom: 1px solid;
@@ -106,6 +286,7 @@ main.atom_io_devtools {
       background-color: #f055;
     }
     .json_editor_key {
+      padding-right: 10px;
       input {
         color: #999;
         @media (prefers-color-scheme: light) {
@@ -121,7 +302,7 @@ main.atom_io_devtools {
       }
       .json_editor_properties {
         > * {
-          border-bottom: 2px solid #333;
+          border-bottom: var(--fg-border);
           margin-bottom: 2px;
         }
       }