atom.io 0.6.4 → 0.6.6

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;
         }
       }

package/src/react-devtools/index.ts

@@ -1 +1,72 @@
+import { isPlainObject } from "~/packages/anvl/src/object"
+import { Refinery } from "~/packages/anvl/src/refinement/refinery"
+import {
+	diffArray,
+	diffBoolean,
+	diffNumber,
+	diffObject,
+	diffString,
+	Differ,
+} from "~/packages/anvl/src/tree/differ"
+
+import { atom, atomFamily } from ".."
+import { attachIntrospectionStates } from "../introspection"
+import { lazyLocalStorageEffect } from "../web-effects"
+
 export * from "./AtomIODevtools"
+
+export const {
+	atomIndex,
+	selectorIndex,
+	transactionIndex,
+	findTransactionLogState,
+	timelineIndex,
+	findTimelineState,
+} = attachIntrospectionStates()
+
+export const devtoolsAreOpenState = atom<boolean>({
+	key: `👁‍🗨 Devtools Are Open`,
+	default: true,
+	effects: [lazyLocalStorageEffect(`👁‍🗨 Devtools Are Open`)],
+})
+
+type DevtoolsView = `atoms` | `selectors` | `timelines` | `transactions`
+
+export const devtoolsViewSelectionState = atom<DevtoolsView>({
+	key: `👁‍🗨 Devtools View Selection`,
+	default: `atoms`,
+	effects: [lazyLocalStorageEffect(`👁‍🗨 Devtools View`)],
+})
+
+export const devtoolsViewOptionsState = atom<DevtoolsView[]>({
+	key: `👁‍🗨 Devtools View Options`,
+	default: [`atoms`, `selectors`, `transactions`, `timelines`],
+	effects: [lazyLocalStorageEffect(`👁‍🗨 Devtools View Options`)],
+})
+
+export const findViewIsOpenState = atomFamily<boolean, string>({
+	key: `👁‍🗨 Devtools View Is Open`,
+	default: false,
+	effects: (key) => [lazyLocalStorageEffect(key + `:view-is-open`)],
+})
+
+export const primitiveRefinery = new Refinery({
+	number: (input: unknown): input is number => typeof input === `number`,
+	string: (input: unknown): input is string => typeof input === `string`,
+	boolean: (input: unknown): input is boolean => typeof input === `boolean`,
+	null: (input: unknown): input is null => input === null,
+})
+
+export const jsonTreeRefinery = new Refinery({
+	object: isPlainObject,
+	array: (input: unknown): input is unknown[] => Array.isArray(input),
+})
+
+export const prettyJson = new Differ(primitiveRefinery, jsonTreeRefinery, {
+	number: diffNumber,
+	string: diffString,
+	boolean: diffBoolean,
+	null: () => ({ summary: `No Change` }),
+	object: diffObject,
+	array: diffArray,
+})

package/src/react-explorer/AtomIOExplorer.tsx

@@ -151,7 +151,6 @@ export const composeExplorer = ({
 		const spaceLayout = useO(findSpaceLayoutNode(spaceId))
 		const viewIds = useO(findSpaceViewsState(spaceId))
 		const focusedViewId = useO(findSpaceFocusedViewState(spaceId))
-		console.log({ spaceLayout, viewIds, focusedViewId })
 		return (
 			<div className="spaces">
 				{spaceLayout.childSpaceIds.length === 0 ? (

package/src/react-explorer/explorer-effects.ts

@@ -1,5 +1,3 @@
-import { isString } from "fp-ts/lib/string"
-
 import { isArray } from "~/packages/anvl/src/array"
 import { parseJson, stringifyJson } from "~/packages/anvl/src/json"
 
@@ -10,7 +8,9 @@ export const persistStringSetAtom = persistAtom<Set<string>>(localStorage)({
 	parse: (string) => {
 		try {
 			const json = parseJson(string)
-			const array = isArray(isString)(json) ? json : []
+			const array = isArray((v): v is string => typeof v === `string`)(json)
+				? json
+				: []
 			return new Set(array)
 		} catch (thrown) {
 			console.error(`Error parsing spaceIndexState from localStorage`)

package/src/react-explorer/explorer-states.ts

@@ -31,7 +31,7 @@ export const makeViewsPerSpaceState = (
 ): AtomToken<Join<null, `viewId`, `spaceId`>> =>
 	atom<Join<null, `viewId`, `spaceId`>>({
 		key: `${key}:views_per_space`,
-		default: new Join({ relationType: `1:n` }),
+		default: new Join({ relationType: `1:n` }).from(`viewId`).to(`spaceId`),
 		effects: [
 			persistAtom<Join<null, `viewId`, `spaceId`>>(localStorage)({
 				stringify: (index) => JSON.stringify(index.toJSON()),

package/src/react-explorer/space-states.ts

@@ -1,5 +1,3 @@
-import { isNumber } from "fp-ts/lib/number"
-
 import { Join } from "~/packages/anvl/src/join"
 import { parseJson, stringifyJson } from "~/packages/anvl/src/json"
 import { hasExactProperties } from "~/packages/anvl/src/object"
@@ -23,7 +21,9 @@ export const makeSpaceLayoutState = (
 ): AtomToken<Join<{ size: number }, `parent`, `child`>> =>
 	atom({
 		key: `${key}:space_layout`,
-		default: new Join({ relationType: `1:n` }),
+		default: new Join<{ size: number }>({ relationType: `1:n` })
+			.from(`parent`)
+			.to(`child`),
 		effects: [
 			persistAtom<Join<{ size: number }, `parent`, `child`>>(localStorage)({
 				stringify: (join) => stringifyJson(join.toJSON()),
@@ -31,7 +31,9 @@ export const makeSpaceLayoutState = (
 					try {
 						const json = parseJson(string)
 						const join = Join.fromJSON(json, {
-							isContent: hasExactProperties({ size: isNumber }),
+							isContent: hasExactProperties({
+								size: (v): v is number => typeof v === `number`,
+							}),
 							from: `parent`,
 							to: `child`,
 						})

package/src/react-explorer/view-states.ts

@@ -1,7 +1,5 @@
 import type { Location } from "react-router-dom"
 
-import { key } from "~/packages/anvl/src/object"
-
 import { persistStringSetAtom } from "./explorer-effects"
 import type { AtomToken } from ".."
 import type { AtomFamily } from "../atom"

package/realtime-testing/dist/index.d.mts

@@ -1,49 +0,0 @@
-import { RenderResult } from '@testing-library/react';
-import * as AtomIO from 'atom.io';
-import * as React from 'react';
-import * as SocketIO from 'socket.io';
-
-type TestSetupOptions = {
-    server: (tools: {
-        socket: SocketIO.Socket;
-        silo: AtomIO.Silo;
-    }) => void;
-};
-type TestSetupOptions__SingleClient = TestSetupOptions & {
-    client: React.FC;
-};
-type TestSetupOptions__MultiClient<ClientNames extends string> = TestSetupOptions & {
-    clients: {
-        [K in ClientNames]: React.FC;
-    };
-};
-type RealtimeTestTools = {
-    name: string;
-    silo: AtomIO.Silo;
-    dispose: () => void;
-};
-type RealtimeTestClient = RealtimeTestTools & {
-    renderResult: RenderResult;
-    prettyPrint: () => void;
-    reconnect: () => void;
-    disconnect: () => void;
-};
-type RealtimeTestServer = RealtimeTestTools & {
-    port: number;
-};
-type RealtimeTestAPI = {
-    server: RealtimeTestServer;
-    teardown: () => void;
-};
-type RealtimeTestAPI__SingleClient = RealtimeTestAPI & {
-    client: RealtimeTestClient;
-};
-type RealtimeTestAPI__MultiClient<ClientNames extends string> = RealtimeTestAPI & {
-    clients: Record<ClientNames, RealtimeTestClient>;
-};
-declare const setupRealtimeTestServer: (options: TestSetupOptions) => RealtimeTestServer;
-declare const setupRealtimeTestClient: (options: TestSetupOptions__SingleClient, name: string, port: number) => RealtimeTestClient;
-declare const singleClient: (options: TestSetupOptions__SingleClient) => RealtimeTestAPI__SingleClient;
-declare const multiClient: <ClientNames extends string>(options: TestSetupOptions__MultiClient<ClientNames>) => RealtimeTestAPI__MultiClient<ClientNames>;
-
-export { RealtimeTestAPI, RealtimeTestAPI__MultiClient, RealtimeTestAPI__SingleClient, RealtimeTestClient, RealtimeTestServer, RealtimeTestTools, TestSetupOptions, TestSetupOptions__MultiClient, TestSetupOptions__SingleClient, multiClient, setupRealtimeTestClient, setupRealtimeTestServer, singleClient };

package/realtime-testing/dist/index.d.ts

@@ -1,49 +0,0 @@
-import { RenderResult } from '@testing-library/react';
-import * as AtomIO from 'atom.io';
-import * as React from 'react';
-import * as SocketIO from 'socket.io';
-
-type TestSetupOptions = {
-    server: (tools: {
-        socket: SocketIO.Socket;
-        silo: AtomIO.Silo;
-    }) => void;
-};
-type TestSetupOptions__SingleClient = TestSetupOptions & {
-    client: React.FC;
-};
-type TestSetupOptions__MultiClient<ClientNames extends string> = TestSetupOptions & {
-    clients: {
-        [K in ClientNames]: React.FC;
-    };
-};
-type RealtimeTestTools = {
-    name: string;
-    silo: AtomIO.Silo;
-    dispose: () => void;
-};
-type RealtimeTestClient = RealtimeTestTools & {
-    renderResult: RenderResult;
-    prettyPrint: () => void;
-    reconnect: () => void;
-    disconnect: () => void;
-};
-type RealtimeTestServer = RealtimeTestTools & {
-    port: number;
-};
-type RealtimeTestAPI = {
-    server: RealtimeTestServer;
-    teardown: () => void;
-};
-type RealtimeTestAPI__SingleClient = RealtimeTestAPI & {
-    client: RealtimeTestClient;
-};
-type RealtimeTestAPI__MultiClient<ClientNames extends string> = RealtimeTestAPI & {
-    clients: Record<ClientNames, RealtimeTestClient>;
-};
-declare const setupRealtimeTestServer: (options: TestSetupOptions) => RealtimeTestServer;
-declare const setupRealtimeTestClient: (options: TestSetupOptions__SingleClient, name: string, port: number) => RealtimeTestClient;
-declare const singleClient: (options: TestSetupOptions__SingleClient) => RealtimeTestAPI__SingleClient;
-declare const multiClient: <ClientNames extends string>(options: TestSetupOptions__MultiClient<ClientNames>) => RealtimeTestAPI__MultiClient<ClientNames>;
-
-export { RealtimeTestAPI, RealtimeTestAPI__MultiClient, RealtimeTestAPI__SingleClient, RealtimeTestClient, RealtimeTestServer, RealtimeTestTools, TestSetupOptions, TestSetupOptions__MultiClient, TestSetupOptions__SingleClient, multiClient, setupRealtimeTestClient, setupRealtimeTestServer, singleClient };