jotai-state-tree 0.1.0

package/dist/react.mjs

@@ -0,0 +1,372 @@
+import {
+  __toCommonJS,
+  getSnapshot,
+  getStateTreeNode,
+  hasStateTreeNode,
+  init_tree,
+  onLifecycleChange,
+  onSnapshot,
+  tree_exports
+} from "./chunk-XXZK62DD.mjs";
+
+// src/react.ts
+init_tree();
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  forwardRef,
+  memo,
+  useCallback,
+  useSyncExternalStore
+} from "react";
+function observer(Component, options) {
+  const displayName = Component.displayName || Component.name || "Component";
+  const ObserverComponent = memo((props) => {
+    const [, forceUpdate] = useState({});
+    const disposersRef = useRef(/* @__PURE__ */ new Set());
+    const trackedNodesRef = useRef(/* @__PURE__ */ new Set());
+    const trackNode = (node) => {
+      if (hasStateTreeNode(node) && !trackedNodesRef.current.has(node)) {
+        trackedNodesRef.current.add(node);
+        const disposer = onSnapshot(node, () => {
+          forceUpdate({});
+        });
+        disposersRef.current.add(disposer);
+      }
+    };
+    const createTrackingProxy = (target) => {
+      if (!target || typeof target !== "object") return target;
+      if (hasStateTreeNode(target)) {
+        trackNode(target);
+      }
+      return new Proxy(target, {
+        get(obj, prop) {
+          const value = obj[prop];
+          if (value && typeof value === "object" && hasStateTreeNode(value)) {
+            trackNode(value);
+            return createTrackingProxy(value);
+          }
+          return value;
+        }
+      });
+    };
+    useEffect(() => {
+      return () => {
+        disposersRef.current.forEach((d) => d());
+        disposersRef.current.clear();
+        trackedNodesRef.current.clear();
+      };
+    }, []);
+    const trackedProps = useMemo(() => {
+      const tracked = {};
+      for (const [key, value] of Object.entries(props)) {
+        if (value && typeof value === "object") {
+          tracked[key] = createTrackingProxy(value);
+        } else {
+          tracked[key] = value;
+        }
+      }
+      return tracked;
+    }, [props]);
+    return React.createElement(Component, trackedProps);
+  });
+  ObserverComponent.displayName = `Observer(${displayName})`;
+  if (options?.forwardRef) {
+    const ForwardedComponent = forwardRef((props, ref) => {
+      const propsWithRef = Object.assign({}, props, { ref });
+      return React.createElement(
+        ObserverComponent,
+        propsWithRef
+      );
+    });
+    ForwardedComponent.displayName = `ForwardRef(${displayName})`;
+    return ForwardedComponent;
+  }
+  return ObserverComponent;
+}
+var Observer = observer(({ children }) => {
+  return React.createElement(React.Fragment, null, children());
+});
+function useObserver(fn) {
+  const [, forceUpdate] = useState({});
+  const disposersRef = useRef([]);
+  const trackedNodes = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    return () => {
+      disposersRef.current.forEach((d) => d());
+      disposersRef.current = [];
+    };
+  }, []);
+  const result = useMemo(() => {
+    trackedNodes.current.clear();
+    disposersRef.current.forEach((d) => d());
+    disposersRef.current = [];
+    const value = fn();
+    return value;
+  }, [fn]);
+  return result;
+}
+function useLocalObservable(initializer, dependencies = []) {
+  const [, forceUpdate] = useState({});
+  const storeRef = useRef(null);
+  const disposerRef = useRef(null);
+  if (storeRef.current === null) {
+    storeRef.current = initializer();
+    if (hasStateTreeNode(storeRef.current)) {
+      disposerRef.current = onSnapshot(storeRef.current, () => {
+        forceUpdate({});
+      });
+    }
+  }
+  useEffect(() => {
+    return () => {
+      disposerRef.current?.();
+    };
+  }, []);
+  useEffect(() => {
+    if (dependencies.length > 0) {
+      disposerRef.current?.();
+      storeRef.current = initializer();
+      if (hasStateTreeNode(storeRef.current)) {
+        disposerRef.current = onSnapshot(storeRef.current, () => {
+          forceUpdate({});
+        });
+      }
+    }
+  }, dependencies);
+  return storeRef.current;
+}
+function useSyncedStore(store) {
+  const snapshotRef = useRef(null);
+  const subscribe = useCallback(
+    (callback) => {
+      if (!hasStateTreeNode(store)) {
+        return () => {
+        };
+      }
+      return onSnapshot(store, () => {
+        snapshotRef.current = getSnapshot(store);
+        callback();
+      });
+    },
+    [store]
+  );
+  const getSnapshotValue = useCallback(() => {
+    if (!hasStateTreeNode(store)) {
+      return null;
+    }
+    if (snapshotRef.current === null) {
+      snapshotRef.current = getSnapshot(store);
+    }
+    return snapshotRef.current;
+  }, [store]);
+  useSyncExternalStore(subscribe, getSnapshotValue, getSnapshotValue);
+  return store;
+}
+var StoreContext = React.createContext(
+  null
+);
+function Provider({
+  store,
+  children
+}) {
+  const value = useMemo(() => ({ store }), [store]);
+  return React.createElement(StoreContext.Provider, { value }, children);
+}
+function useStore() {
+  const context = React.useContext(StoreContext);
+  if (!context) {
+    throw new Error(
+      "[jotai-state-tree] useStore must be used within a Provider"
+    );
+  }
+  return context.store;
+}
+function useStoreSnapshot(selector) {
+  const store = useStore();
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    if (hasStateTreeNode(store)) {
+      return onSnapshot(store, () => {
+        forceUpdate({});
+      });
+    }
+    return () => {
+    };
+  }, [store]);
+  if (selector) {
+    return selector(store);
+  }
+  return store;
+}
+function createStoreContext() {
+  const Context = React.createContext(null);
+  function StoreProvider({
+    store,
+    children
+  }) {
+    return React.createElement(Context.Provider, { value: store }, children);
+  }
+  function useTypedStore() {
+    const store = React.useContext(Context);
+    if (store === null) {
+      throw new Error(
+        "[jotai-state-tree] useStore must be used within a Provider"
+      );
+    }
+    return store;
+  }
+  function useTypedStoreSnapshot(selector) {
+    const store = useTypedStore();
+    const [, forceUpdate] = useState({});
+    useEffect(() => {
+      if (hasStateTreeNode(store)) {
+        return onSnapshot(store, () => {
+          forceUpdate({});
+        });
+      }
+      return () => {
+      };
+    }, [store]);
+    if (selector) {
+      return selector(store);
+    }
+    return store;
+  }
+  function useTypedIsAlive() {
+    const store = useTypedStore();
+    return useIsAlive(store);
+  }
+  return {
+    Provider: StoreProvider,
+    useStore: useTypedStore,
+    useStoreSnapshot: useTypedStoreSnapshot,
+    useIsAlive: useTypedIsAlive,
+    Context
+  };
+}
+function useSnapshot(target) {
+  const [snapshot, setSnapshot] = useState(() => getSnapshot(target));
+  useEffect(() => {
+    const disposer = onSnapshot(target, (newSnapshot) => {
+      setSnapshot(newSnapshot);
+    });
+    return disposer;
+  }, [target]);
+  return snapshot;
+}
+function useWatchPath(target, path, defaultValue) {
+  const [value, setValue] = useState(() => {
+    const snapshot = getSnapshot(target);
+    const parts = path.split(".");
+    let current = snapshot;
+    for (const part of parts) {
+      if (current && typeof current === "object" && part in current) {
+        current = current[part];
+      } else {
+        return defaultValue;
+      }
+    }
+    return current;
+  });
+  useEffect(() => {
+    const disposer = onSnapshot(target, (newSnapshot) => {
+      const snapshot = newSnapshot;
+      const parts = path.split(".");
+      let current = snapshot;
+      for (const part of parts) {
+        if (current && typeof current === "object" && part in current) {
+          current = current[part];
+        } else {
+          setValue(defaultValue);
+          return;
+        }
+      }
+      setValue(current);
+    });
+    return disposer;
+  }, [target, path, defaultValue]);
+  return value;
+}
+function usePatches(target, callback) {
+  useEffect(() => {
+    const { onPatch } = (init_tree(), __toCommonJS(tree_exports));
+    const disposer = onPatch(target, callback);
+    return disposer;
+  }, [target, callback]);
+}
+function useAction(action) {
+  return useMemo(() => action, [action]);
+}
+function useActions(actions) {
+  return useMemo(() => actions, [actions]);
+}
+var batchDepth = 0;
+var pendingUpdates = /* @__PURE__ */ new Set();
+function batch(fn) {
+  batchDepth++;
+  try {
+    fn();
+  } finally {
+    batchDepth--;
+    if (batchDepth === 0 && pendingUpdates.size > 0) {
+      const updates = pendingUpdates;
+      pendingUpdates = /* @__PURE__ */ new Set();
+      updates.forEach((update) => update());
+    }
+  }
+}
+function scheduleUpdate(update) {
+  if (batchDepth > 0) {
+    pendingUpdates.add(update);
+  } else {
+    update();
+  }
+}
+function useIsAlive(target) {
+  const [isAlive, setIsAlive] = useState(() => {
+    if (!hasStateTreeNode(target)) return false;
+    return getStateTreeNode(target).$isAlive;
+  });
+  useEffect(() => {
+    if (!hasStateTreeNode(target)) return;
+    const node = getStateTreeNode(target);
+    setIsAlive(node.$isAlive);
+    const disposer = onLifecycleChange(node, (alive) => {
+      setIsAlive(alive);
+    });
+    return disposer;
+  }, [target]);
+  return isAlive;
+}
+function useCleanup(cleanupFn) {
+  const cleanupRef = useRef(cleanupFn);
+  cleanupRef.current = cleanupFn;
+  useEffect(() => {
+    return () => {
+      cleanupRef.current();
+    };
+  }, []);
+}
+export {
+  Observer,
+  Provider,
+  batch,
+  createStoreContext,
+  observer,
+  scheduleUpdate,
+  useAction,
+  useActions,
+  useCleanup,
+  useIsAlive,
+  useLocalObservable,
+  useObserver,
+  usePatches,
+  useSnapshot,
+  useStore,
+  useStoreSnapshot,
+  useSyncedStore,
+  useWatchPath
+};

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "jotai-state-tree",
+  "version": "0.1.0",
+  "description": "MobX-State-Tree API compatible library powered by Jotai",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts src/react.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts src/react.ts --format cjs,esm --dts --watch",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "docs": "typedoc",
+    "docs:watch": "typedoc --watch"
+  },
+  "keywords": [
+    "jotai",
+    "mobx-state-tree",
+    "mst",
+    "state-management",
+    "react",
+    "typescript",
+    "state-tree"
+  ],
+  "author": "Brandon Martel",
+  "license": "MIT",
+  "peerDependencies": {
+    "jotai": ">=2.0.0",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.0",
+    "eslint": "^8.55.0",
+    "jotai": "^2.6.0",
+    "jsdom": "^27.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.3.1",
+    "semantic-release": "^25.0.2",
+    "tsup": "^8.0.0",
+    "typedoc": "^0.28.15",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bmartel/jotai-state-tree"
+  }
+}