@lukekaalim/act-insight 0.0.2-alpha.6 → 1.1.0

package/CommitViewer.ts

@@ -1,104 +0,0 @@
-import { Component, Deps, h, Ref, refSymbol, useState } from "@lukekaalim/act";
-import { Commit, CommitID, CommitTree, Reconciler } from "@lukekaalim/act-recon";
-import { hs } from "@lukekaalim/act-web"
-import { getElementName } from "./utils";
-import { CommitAttributeTag } from "./AttributeTag";
-import classes from './CommitViewer.module.css';
-import { CommitReport, CommitStateReport, ValueReport } from "@lukekaalim/act-debug";
-
-export type CommitViewerProps = {
-  commit: CommitReport,
-  state: CommitStateReport,
-};
-
-export const CommitViewer: Component<CommitViewerProps> = ({ commit, state }) => {
-
-  const isRef = (value: unknown): value is Ref<unknown> => (
-    typeof value === 'object' && !!value && (refSymbol in value)
-  );
-
-  //const refs = state && [...state.values]
-  //  .filter(([id, value]) => isRef(value))
-
-  const [, setRender] = useState(0);
-  const rerender = () => {
-    setRender(r => r + 1);
-  }
-
-  return hs('div', { className: classes.commitViewer }, [
-    hs('h3', {}, commit.element.type),
-    hs('div', {}, [
-      h(CommitAttributeTag, { name: 'Version', value: commit.version.toString() }),
-      h(CommitAttributeTag, { name: 'ID', value: commit.id.toString() }),
-      //!!state.props.key && [
-      //  h(CommitAttributeTag, { name: 'Key', value: getValueName(commit.element.props.key) }),
-      //]
-    ]),
-    state.props.length > 0 && [
-      hs('h4', {}, 'Props'),
-      hs('ul', {}, state.props.map(prop => 
-        hs('li', {}, [
-          h(CommitAttributeTag, { name: 'Key', value: prop.name }),
-          h(CommitAttributeTag, { name: 'Value', value: getTextForValue(prop.value) }),
-        ]))),
-    ],
-    state.values.length && [
-      hs('h4', {}, 'useState'),
-      hs('ul', {}, state.values.map(value => 
-        hs('li', {}, [
-          h(CommitAttributeTag, { name: 'Key', value: value.id.toString() }),
-          h(CommitAttributeTag, { name: 'Value', value: getTextForValue(value.value) }),
-        ]))),
-    ],
-  ])
-}
-
-export type ValueViewerProps = {
-  value: ValueReport,
-}
-
-export const getTextForValue = (value: ValueReport) => {
-  switch (value.type) {
-    case 'primitive':
-      switch (typeof value.value) {
-        case 'object':
-          return `null`;
-        case 'string':
-        case 'boolean':
-        case 'number':
-          return value.value.toString();
-      }
-    case 'complex':
-      return value.name;
-    case 'undefined':
-      return `undefined`;
-    default:
-      return `${value.type}`;
-  }
-}
-
-export const getValueName = (value: unknown) => {
-  switch (typeof value) {
-    case 'object':
-      if (!value)
-        return 'null';
-      if (Array.isArray(value))
-        return `Array[${value.length}]`;
-      if (value.constructor === ({}).constructor)
-        return JSON.stringify(value, null, 2);
-
-      return value.constructor.name;
-    case undefined:
-      return 'undefined';
-    case 'string':
-    case 'number':
-    case 'boolean':
-    case 'symbol':
-      return (value as string | number | boolean | symbol).toString();
-    case 'function':
-      return `${(value as Function).name || 'Function'}()`;
-    default:
-      console.log(value);
-      return typeof value
-  }
-}

package/ThreadControls.ts

@@ -1,22 +0,0 @@
-import { h } from "@lukekaalim/act";
-
-export type ThreadControlsProps = {
-  onPlay: () => void,
-  onPause: () => void,
-  onStep: () => void,
-  onPlay: () => void,
-};
-
-export const ThreadControls = () => {
-  return [
-    h('button', {}, 'Play'),
-    h('button', {}, 'Pause'),
-    h('button', {}, 'Step'),
-    h('button', {}, 'Play To End'),
-    h(PendingWorkNotifier),
-  ]
-};
-
-const PendingWorkNotifier = () => {
-  return 'pending';
-}

package/ThreadViewer.module.css

@@ -1,5 +0,0 @@
-.updateViewer {
-  background-color: rgb(204, 252, 202);
-  border-radius: 8px;
-  padding: 8px;
-}

package/ThreadViewer.ts

@@ -1,185 +0,0 @@
-import { Component, h, useMemo } from "@lukekaalim/act"
-import { Commit, CommitID, CommitPath, CommitRef, CommitTree, DeltaSet, Update, WorkReason, WorkThread } from "@lukekaalim/act-recon"
-import { hs } from "@lukekaalim/act-web"
-import { findCommonAncestor, getElementName } from "./utils"
-import { CommitAttributeTag } from "./AttributeTag"
-import { CommitPreview, TreeViewer } from "./TreeViewer"
-
-import classes from './ThreadViewer.module.css';
-
-export type ThreadViewerProps = {
-  thread: WorkThread,
-  tree: CommitTree,
-}
-
-export const ThreadViewer: Component<ThreadViewerProps> = ({ thread, tree }) => {
-  const appliedTree = useMemo(() => {
-    const tempTree = CommitTree.clone(tree);
-    DeltaSet.apply(thread.deltas, tempTree)
-    return tempTree;
-  }, [tree, thread]);
-
-  const fiberCommits = new Set([...thread.pendingUpdates].map(u => u.ref.id));
-
-  const nextUpdate = thread.pendingUpdates[thread.pendingUpdates.length - 1];
-
-  const getCommitColor = (commit: Commit) => {
-    const isUpdating = fiberCommits.has(commit.id);
-    const mustVisit = thread.mustVisit.has(commit.id);
-    const mustRender = thread.mustRender.has(commit.id);
-    const visited = thread.visited.has(commit.id);
-
-    if (visited)
-      return '#7efb8c';
-    if (isUpdating)
-      return 'blue'
-    if (mustRender)
-      return 'red';
-    if (mustVisit)
-      return 'orange';
-
-    return 'white';
-  }
-  
-
-  const renderCommit = (depth: number) => (commit: Commit) => {
-    const color = getCommitColor(commit);
-    console.log(color);
-    const commitNode = h(CommitPreview, {
-      commit,
-      tree: appliedTree,
-      depth,
-      renderCommit: renderCommit(depth + 1),
-      onSelectCommit: _ => {},
-      selectedCommits: new Set<CommitID>(),
-      color,
-    });
-
-    return commitNode
-  }
-  
-  return [
-    h('h3', {}, 'Next Update'),
-    nextUpdate ? h(UpdateViewer, { update: nextUpdate, tree, thread }) : 'Send to Renderer',
-    thread.reasons.map(reason => {
-      const commit = appliedTree.commits.get(reason.ref.id);
-      if (!commit)
-        return null;
-      return h(TreeViewer, { tree: appliedTree, roots: [commit], selectedCommits: new Set<CommitID>(), renderCommit: renderCommit(0) });
-    }),
-    hs('h3', {}, 'Fibers'),
-    hs('ul', {}, [...thread.pendingUpdates].map((update) => hs('li', {}, h(UpdateViewer, { update, tree })))),
-    hs('h3', {}, 'Visited'),
-    hs('ul', {}, [...thread.visited].map(([id, ref]) => hs('li', {}, id))),
-    hs('h3', {}, 'Must Visit'),
-    hs('ul', {}, [...thread.mustVisit].map((id) => hs('li', {}, id))),
-    hs('h3', {}, 'Must Render'),
-    hs('ul', {}, [...thread.mustRender].map(([id, ref]) => hs('li', {}, id))),
-    hs('h3', {}, 'Created'),
-    hs('ul', {}, thread.deltas.created.map(delta => hs('li', {}, [delta.next.id,' ', getElementName(delta.next.element)]))),
-    hs('h3', {}, 'Removed'),
-    hs('ul', {}, thread.deltas.removed.map(delta => hs('li', {}, [delta.ref.id,' ', getElementName(delta.prev.element)]))),
-    hs('h3', {}, 'Updated'),
-    hs('ul', {}, thread.deltas.updated.map(delta => hs('li', {}, [delta.next.id,' ', getElementName(delta.next.element)]))),
-    hs('h3', {}, 'Reasons'),
-    h(ReasonsListViewer, { reasons: thread.reasons, tree }),
-  ]
-}
-
-type DeltaViewerProps = {
-  deltas: DeltaSet,
-}
-
-const DeltaViewer = () => {
-
-}
-
-type UpdateViewerProps = {
-  tree: CommitTree,
-  thread: WorkThread,
-  update: Update,
-};
-
-const UpdateViewer: Component<UpdateViewerProps> = ({ update, tree, thread }) => {
-  const commit = tree.commits.get(update.ref.id);
-
-  const isEqual = update.next && update.prev && update.next.id === update.prev.element.id;
-  
-  return hs('div', { className: classes.updateViewer }, [
-    !isEqual && update.next && typeof update.next.type === 'function' && [
-      h('span', {}, `Calling render function for component: `),
-      h('pre', { style: { display: 'inline' } }, `"${update.next.type.name}"`),
-    ],
-    isEqual && [
-      thread.mustVisit.has(update.ref.id) ? [
-        thread.mustRender.has(update.ref.id) ?
-        h('span', {}, `Marked for rendering`) :
-        h('span', {}, `Visiting but not rendering`),
-      ] : [
-        h('span', {}, `Skipping render and visit - fiber ends here`)
-      ]
-    ],
-    h(CommitAttributeTag, { name: 'Type', value: getUpdateType(update) }),
-    h(CommitAttributeTag, { name: 'ID', value: update.ref.id.toString() }),
-    update.prev && h(CommitAttributeTag, { name: 'Prev ID', value: (update.prev && update.prev.id.toString()) || 'null' }),
-    update.next && h(CommitAttributeTag, { name: 'Next Element', value: (update.next && getElementName(update.next)) || 'null' }),
-  ])
-}
-
-const getUpdateType = (update: Update) => {
-  if (update.prev && !update.next)
-    return 'Remove';
-  if (update.prev && update.next)
-    if (update.moved)
-      return "Move & Update"
-    else
-      return "Update"
-  if (!update.prev && update.next)
-    return "Create";
-  return "???"
-};
-
-type ReasonsListViewerProps = {
-  reasons: WorkReason[],
-  tree: CommitTree,
-};
-
-const ReasonsListViewer: Component<ReasonsListViewerProps> = ({ reasons, tree }) => {
-  const firstReason = reasons[0];
-  if (!firstReason)
-    return null;
-
-  return [
-    h('p', {}, `Started rendering because:`),
-    h('p', {}, h(ReasonViewer, { reason: firstReason, tree })),
-    reasons.length > 1 && [
-      h('p', {}, `The following updates were also batched with this render:`),
-      h('ol', {}, reasons.slice(1).map(reason => {
-        return h('li', {}, h(ReasonViewer, { reason, tree }));
-      }))
-    ]
-  ]
-};
-
-type ReasonsViewerProps = {
-  reason: WorkReason,
-  tree: CommitTree,
-};
-
-const ReasonViewer: Component<ReasonsViewerProps> = ({ reason, tree }) => {
-  switch (reason.type) {
-    case 'mount':
-      return [
-        `Mounting a new tree using:`,
-        h('pre', { style: { display: 'inline' } }, getElementName(reason.element)),
-      ];
-    case 'target':
-      const targetCommit = tree.commits.get(reason.ref.id) as Commit;
-      return [
-        h(CommitAttributeTag, { name: 'CommitID', value: targetCommit.id.toString() }),
-        ` `,
-        h('pre', { style: { display: 'inline' } }, getElementName(targetCommit.element)),
-        ` requested a re-render`
-      ];
-  }
-}

package/debug.ts

@@ -1,80 +0,0 @@
-import { Commit, CommitTree, createReconciler, Scheduler, WorkID, WorkThread } from "@lukekaalim/act-recon";
-import { createId, h, Node } from "@lukekaalim/act";
-import { createRenderFunction, RenderFunction, RenderSpace } from "@lukekaalim/act-backstage";
-import { createDOMScheduler, createWebSpace, HTML, render } from "@lukekaalim/act-web";
-import { InsightApp } from "./InsightApp";
-
-export type DebugScheduler = {
-  isWorkPending(): boolean,
-  work(): void,
-
-  inner: Scheduler,
-}
-
-export const createDebugScheduler = (): DebugScheduler => {
-  const pending = new Map<WorkID, () => void>();
-
-  const inner: Scheduler = {
-    requestWork(callback) {
-      const id = createId<'WorkID'>();
-      pending.set(id, callback);
-      return id;
-    },
-    cancelWork(workId) {
-      pending.delete(workId)
-    },
-  }
-
-  return {
-    isWorkPending() {
-      return pending.size > 0;
-    },
-    work() {
-      const pendingWork = [...pending];
-      pending.clear();
-      for (const [,callback] of pendingWork)
-        callback();
-    },
-    inner,
-  }
-}
-
-export const renderDebug = (node: Node, createSpace: (tree: CommitTree) => RenderSpace) => {
-  const debugScheduler = createDebugScheduler();
-
-  const reconciler = createReconciler(debugScheduler.inner);
-
-  const threadCompleteSub = reconciler.on('on-thread-complete', (thread: WorkThread) => {
-    space.create(thread.deltas).configure();
-  });
-
-  const space = createSpace(reconciler.tree);
-
-  const onReady = () => {
-    reconciler.mount(node);
-  };
-
-  const debugWindow = window.open('', 'debug', 'popup');
-  if (debugWindow) {
-    const node = h(InsightApp, { reconciler, onReady, scheduler: debugScheduler });
-    const root = debugWindow.document.body;
-    for (const child of [...debugWindow.document.body.children, ...debugWindow.document.head.children])
-      child.remove()
-
-    for (const child of document.head.children) {
-      if (child instanceof HTMLStyleElement) {
-        debugWindow.document.head.append(child.cloneNode(true));
-      }
-    }
-    const renderWeb = createRenderFunction<HTMLElement>(
-      createDOMScheduler(),
-      (tree, root) => createWebSpace(tree, root, debugWindow)
-    )(h(HTML, {}, node), root);
-  }
-
-  return {
-    stop() {
-      threadCompleteSub.cancel();
-    },
-  }
-};

package/insight.test.ts

@@ -1,29 +0,0 @@
-import '@types/node';
-
-import { OpaqueID } from '@lukekaalim/act'
-import { CommitRef } from '@lukekaalim/act-recon'
-import { describe, it } from 'node:test'
-import { deepEqual } from 'node:assert/strict'
-import { findCommonAncestor } from './utils'
-
-describe('@lukekaalim/act-insight', () => {
-  describe('findCommonAncestor', () => {
-    it ('should find a common ancestor', () => {
-      const a: OpaqueID<'CommitID'> = 'A' as any;
-      const b: OpaqueID<'CommitID'> = 'B' as any;
-      const c: OpaqueID<'CommitID'> = 'C' as any;
-      const d: OpaqueID<'CommitID'> = 'D' as any;
-      const e: OpaqueID<'CommitID'> = 'E' as any;
-      const f: OpaqueID<'CommitID'> = 'F' as any;
-
-      const refZ = CommitRef.from([a]);
-      const refA = CommitRef.from([a, b]);
-      const refB = CommitRef.from([a, c]);
-      const refC = CommitRef.from([a, c, d, e]);
-      const refD = CommitRef.from([a, c, f]);
-
-      deepEqual(findCommonAncestor([refA, refB]), refZ)
-      deepEqual(findCommonAncestor([refB, refC, refD]), refB)
-    })
-  })
-})