hotfix

packages/lothlorien-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@playableprints/lothlorien-react",
-    "version": "0.1.12",
+    "version": "0.1.13",
     "description": "",
     "private": false,
     "type": "module",
@@ -26,7 +26,7 @@
     },
     "homepage": "https://playableprints.github.io/lothlorien/index.html",
     "dependencies": {
-        "@playableprints/lothlorien": "^0.1.12",
+        "@playableprints/lothlorien": "^0.1.13",
         "valtio": "^1.6.3"
     },
     "peerDependencies": {

packages/lothlorien-react/src/depthmarker.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Tree } from "@playableprints/lothlorien";
-import { memo, ReactNode, HTMLAttributes, Fragment, useState, useEffect } from "react";
+import { memo, ReactNode, HTMLAttributes, Fragment, useState, useEffect, MutableRefObject } from "react";
 import { useSnapshot } from "valtio";
 
 // defaults are ascii art, becuase it's wonderful :3
@@ -40,7 +40,7 @@ const genericMemo: <T>(component: T) => T = memo;
  * ```
  */
 
-export type DepthMarkerProps<T> = { treeRef: T; nodeKey: string; spacer?: ReactNode; pipe?: ReactNode; elbow?: ReactNode; tee?: ReactNode; rtl?: boolean; skipFirst?: boolean };
+export type DepthMarkerProps<T> = { treeRef: MutableRefObject<T>; nodeKey: string; spacer?: ReactNode; pipe?: ReactNode; elbow?: ReactNode; tee?: ReactNode; rtl?: boolean; skipFirst?: boolean };
 
 /**
  * Renders the depth marker for a given tree node
@@ -63,7 +63,7 @@ export type DepthMarkerProps<T> = { treeRef: T; nodeKey: string; spacer?: ReactN
  */
 export const DepthMarker = genericMemo(<T extends Tree<any>>(props: DepthMarkerProps<T> & HTMLAttributes<HTMLSpanElement>) => {
     const { treeRef, nodeKey, rtl = false, spacer = DEFAULT_SPACER, pipe = DEFAULT_PIPE, elbow = DEFAULT_ELBOW, tee = DEFAULT_TEE, children, skipFirst = false, ...rest } = props;
-    const snapshot = useSnapshot(treeRef);
+    const snapshot = useSnapshot(treeRef.current);
     const [theKeys, setTheKeys] = useState<Shapes[]>(makeShapeList(nodeKey, snapshot, rtl, skipFirst));
 
     useEffect(() => {

packages/lothlorien-react/src/treeview.tsx

@@ -21,7 +21,7 @@ type PayloadOf<T> = T extends Tree<infer P> ? P : never;
 export type TreeNodeComponentProps<T extends Tree<any>, E extends object = never> = {
     nodeKey: string;
     value: PayloadOf<T>;
-    treeRef: T;
+    treeRef: MutableRefObject<T>;
     childNodes: ReactNode[];
 } & ([E] extends [never] ? unknown : E);
 
@@ -128,16 +128,16 @@ export type TreeViewProps<T extends Tree<any>, E extends object = never> = { val
 export const TreeView = <T extends Tree<any>, E extends object = never>({ value, renderer, nodeProps }: TreeViewProps<T, E>) => {
     const snapshot = useSnapshot(value.current);
     const npRef = useRef<E>(proxy(nodeProps));
-    const nP = useSnapshot(npRef);
+    const nP = useSnapshot(npRef.current);
     return snapshot.rootKeys().map((key) => {
-        return <NodeRenderWrapper<T, E> nodeProps={nP as E} renderer={renderer} nodeKey={key} key={key} treeRef={value.current} />;
+        return <NodeRenderWrapper<T, E> nodeProps={nP as E} renderer={renderer} nodeKey={key} key={key} treeRef={value} />;
     });
 };
 
 // Passthrough that uses our renderer prop and sets up pre-memoized props for it.
-const NodeRenderWrapper = genericMemo(<T extends Tree<any>, E extends object = never>(props: { nodeKey: string; renderer: TreeNodeComponent<T, E>; treeRef: T; nodeProps: E }) => {
+const NodeRenderWrapper = genericMemo(<T extends Tree<any>, E extends object = never>(props: { nodeKey: string; renderer: TreeNodeComponent<T, E>; treeRef: MutableRefObject<T>; nodeProps: E }) => {
     const { nodeKey, renderer: Renderer, treeRef, nodeProps } = props;
-    const snapshot = useSnapshot(treeRef);
+    const snapshot = useSnapshot(treeRef.current);
 
     const { children, value } = useMemo(() => {
         return snapshot.entry(nodeKey)!;

packages/lothlorien/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@playableprints/lothlorien",
-    "version": "0.1.12",
+    "version": "0.1.13",
     "description": "",
     "private": false,
     "type": "module",