atom.io 0.6.7 → 0.6.9

package/src/react-devtools/Updates.tsx

@@ -1,145 +0,0 @@
-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,311 +0,0 @@
-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: #444;
-    --bg-color: #ddd;
-    --bg-tint1: #e3e3e3;
-  }
-  box-sizing: border-box;
-  color: var(--fg-color);
-  background-color: var(--bg-color);
-  border: 2px solid var(--fg-color);
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  height: 100%;
-  display: flex;
-  flex-flow: column;
-  max-height: 800px;
-  width: 100%;
-  max-width: 500px;
-  overflow-y: scroll;
-  * {
-    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;
-    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-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;
-        }
-      }
-    }
-  }
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    button {
-      cursor: pointer;
-      background: none;
-      border: none;
-      padding: none;
-      position: absolute;
-      right: 0;
-      bottom: 0;
-    }
-  }
-
-  .json_editor {
-    input {
-      // font-size: 20px;
-      font-family: theia;
-      border: none;
-      border-bottom: 1px solid;
-      background: none;
-      &:disabled {
-        border: none;
-      }
-    }
-    button {
-      background: none;
-      margin-left: auto;
-      color: #777;
-      border: none;
-      font-family: theia;
-      font-size: 14px;
-      margin: none;
-      padding: 4px;
-      padding-bottom: 6px;
-      cursor: pointer;
-      &:hover {
-        color: #333;
-        background-color: #aaa;
-      }
-    }
-    select {
-      font-family: theia;
-      font-size: 14px;
-      background: none;
-      border: none;
-      color: #777;
-      @media (prefers-color-scheme: light) {
-        color: #999;
-      }
-    }
-    .json_editor_unofficial {
-      background-color: #777;
-      button {
-        color: #333;
-      }
-    }
-    .json_editor_missing {
-      background-color: #f055;
-    }
-    .json_editor_key {
-      padding-right: 10px;
-      input {
-        color: #999;
-        @media (prefers-color-scheme: light) {
-          color: #777;
-        }
-      }
-    }
-    .json_editor_object {
-      border-left: 2px solid #333;
-      padding-left: 20px;
-      @media (prefers-color-scheme: light) {
-        border-color: #ccc;
-      }
-      .json_editor_properties {
-        > * {
-          border-bottom: var(--fg-border);
-          margin-bottom: 2px;
-        }
-      }
-    }
-  }
-}

package/src/react-devtools/index.ts

@@ -1,72 +0,0 @@
-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,
-})