@lukekaalim/act-insight 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @lukekaalim/act-insight
 
+## 1.1.0
+
+### Minor Changes
+
+- bcbd299: SSR API for @lukekaalim/act-web
+- beec21c: Fixed Web text element rehydration, remove nodejs dependencies from dehydration
+
+### Patch Changes
+
+- Updated dependencies [bcbd299]
+- Updated dependencies [beec21c]
+  - @lukekaalim/act-web@5.0.0
+  - @lukekaalim/act-recon@3.1.0
+  - @lukekaalim/act@4.1.0
+  - @lukekaalim/act-debug@1.0.1
+
 ## 1.0.0
 
 ### Major Changes

package/InsightApp.ts

@@ -12,6 +12,8 @@ export type InsightAppProps = {
   bus: ReconcilerDebugEventBus,
 
   document: Document,
+
+  onReady(): void,
 };
 
 export type InsightAppState = {
@@ -23,15 +25,30 @@ export type InsightAppState = {
   paused: boolean,
 }
 
-export const InsightApp: Component<InsightAppProps> = ({ controller, bus, document = window.document }) => {
+const INSIGHT_SETTINGS_LOCALSTORAGE_KEY = `INSIGHT_SETTINGS`;
+
+export const InsightApp: Component<InsightAppProps> = ({ onReady, controller, bus, document = window.document }) => {
   const [c, setRenderCounter] = useState(0);
 
+  const storedState = useMemo(() => {
+    const settings = window.localStorage.getItem(INSIGHT_SETTINGS_LOCALSTORAGE_KEY)
+    if (!settings)
+      return;
+    return JSON.parse(settings) as { breakOnAfterUpdate: boolean, breakOnBeforeUpdate: boolean };
+  }, [])
+
   const [insightState, setInsightState] = useState<InsightAppState>({
     commitBreakpoints: new Set(),
-    breakOnAfterUpdate: false,
-    breakOnBeforeUpdate: false,
+    breakOnAfterUpdate: storedState ? storedState.breakOnAfterUpdate : false,
+    breakOnBeforeUpdate: storedState ? storedState.breakOnBeforeUpdate : false,
     paused: false,
   });
+  useEffect(() => {
+    window.localStorage.setItem(INSIGHT_SETTINGS_LOCALSTORAGE_KEY, JSON.stringify({
+      breakOnAfterUpdate: insightState.breakOnAfterUpdate,
+      breakOnBeforeUpdate: insightState.breakOnBeforeUpdate,
+    }))
+  }, [insightState])
 
   const commitCache = useRef(() => new CommitLookupCache()).current;
   const deltaCache = useRef(() => new ThreadLookupCache(commitCache)).current;
@@ -44,9 +61,20 @@ export const InsightApp: Component<InsightAppProps> = ({ controller, bus, docume
   useEffect(() => {
     console.log('[Insight] Populate Cache')
 
+    bus.externalUpdate = () => {
+      const delta  = controller.getDelta();
+      const thread = controller.getThread();
+
+      commitCache.setTree(controller.getTree())
+
+      deltaCache.ingestDelta(delta);
+      deltaCache.ingestThread(thread);
+      setRenderCounter(c => c + 1);
+    }
+
     bus.onThreadDone = (thread, delta) => {
       console.log('[Insight] ThreadDone')
-
+      commitCache.ingest(delta);
       deltaCache.ingestDelta(delta);
       deltaCache.ingestThread(thread);
       deltaCache.prevTask = null;
@@ -64,8 +92,7 @@ export const InsightApp: Component<InsightAppProps> = ({ controller, bus, docume
         if (insightState.breakOnBeforeUpdate)
           controller.scheduler.intercept = true;
 
-        if (deltaCache.report)
-          commitCache.ingest(deltaCache.report);
+        commitCache.setTree(controller.getTree())
         
         deltaCache.reset();
         deltaCache.ingestThread(thread);
@@ -101,6 +128,8 @@ export const InsightApp: Component<InsightAppProps> = ({ controller, bus, docume
           deltaCache.prevTask = prevTask;
       }
     }
+
+    onReady();
   }, [controller, bus, insightState]);
 
   const cacheSubscribers = useRef<Set<() => void>>(new Set()).current;
@@ -180,6 +209,15 @@ export const InsightApp: Component<InsightAppProps> = ({ controller, bus, docume
     ])
   }, [])
 
+  const reload = () => {
+    commitCache.setTree(controller.getTree())
+    deltaCache.reset();
+    deltaCache.ingestDelta(controller.getDelta());
+    deltaCache.ingestThread(controller.getThread());
+
+    setRenderCounter(c => c + 1)
+  }
+
   const viewportRef = useRef<HTMLElement | null>(null);
 
   const [selectedCommitId, setSelectedCommitId] = useState<CommitID | null>(null)
@@ -208,6 +246,7 @@ export const InsightApp: Component<InsightAppProps> = ({ controller, bus, docume
         state: insightState,
         onStateChange: setInsightState,
       }),
+      h('button', { onClick: reload}, 'Reload'),
     ]),
     h('div', { style: { flex: 1, overflow: 'hidden', background: '#c0d7ddff', display: 'flex' } }, [
       h('div', { style: { flex: 1 } },

package/lookup.ts

@@ -28,7 +28,7 @@ export class MutableCommitRef {
   }
 
   resolve(lookupMap: Map<CommitID, MutableCommitRef>) {
-    if (this.report.parent)
+    if (this.report.parent !== null)
       this.linkParent(this.report.parent, lookupMap);
     this.linkChildren(this.report.children, lookupMap);
   }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@lukekaalim/act-insight",
   "main": "index.ts",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "scripts": {},
   "dependencies": {
     "@lukekaalim/act": "*",
-    "@lukekaalim/act-recon": "3.0.0",
-    "@lukekaalim/act-web": "4.0.0",
-    "@lukekaalim/act-debug": "1.0.0",
+    "@lukekaalim/act-recon": "3.1.0",
+    "@lukekaalim/act-web": "5.0.0",
+    "@lukekaalim/act-debug": "1.0.1",
     "@sindresorhus/string-hash": "^2.0.0",
     "@types/firefox-webext-browser": "^120.0.4",
     "lodash-es": "^4.17.21"

package/utils.ts

@@ -34,7 +34,7 @@ export const renderDEV = (node: Node, builders: NodeBuilder<any, any>[], { mode
 }
 
 
-export const createDebugPopup = (reconciler: DebugReconciler) => {
+export const createDebugPopup = async (reconciler: DebugReconciler) => {
   const newWindow = window.open('', "DevTools", "popup");
   if (!newWindow)
     throw new Error(`Unable to make/find new window!`);
@@ -52,10 +52,13 @@ export const createDebugPopup = (reconciler: DebugReconciler) => {
       element.href = src.href;
       newWindow.document.head.appendChild(element)
     }
+    
+  return new Promise<void>(onReady => {
+    render(
+      h(InsightApp, { controller: reconciler.controller, bus: reconciler.debugBus, document: newWindow.document, onReady }),
+      body,
+      { window: newWindow }
+    );
+  })
 
-  render(
-    h(InsightApp, { controller: reconciler.controller, bus: reconciler.debugBus, document: newWindow.document }),
-    body,
-    { window: newWindow }
-  );
 }