@pulse-js/svelte 0.1.0 → 0.1.2

package/dist/{index.cjs → index.svelte.cjs}

@@ -17,25 +17,60 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
+// src/index.svelte.ts
+var index_svelte_exports = {};
+__export(index_svelte_exports, {
   useGuard: () => useGuard,
-  usePulse: () => usePulse
+  usePulse: () => usePulse,
+  usePulseStore: () => usePulseStore
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(index_svelte_exports);
 var import_store = require("svelte/store");
 function usePulse(unit) {
   const isGuard = unit !== null && typeof unit === "function" && "state" in unit;
-  return (0, import_store.readable)(isGuard ? unit.state() : unit(), (set) => {
-    return unit.subscribe(set);
-  });
+  if (isGuard) {
+    const g = unit;
+    const container = $state({ data: g.state() });
+    $effect(() => {
+      return g.subscribe((v) => {
+        container.data = v;
+      });
+    });
+    return new Proxy({}, {
+      get(_, prop) {
+        return container.data[prop];
+      },
+      // Ensure spread operators and other object features work
+      ownKeys() {
+        return Reflect.ownKeys(container.data);
+      },
+      getOwnPropertyDescriptor(_, prop) {
+        return Reflect.getOwnPropertyDescriptor(container.data, prop);
+      }
+    });
+  } else {
+    const s = unit;
+    const box = $state({ value: s() });
+    $effect(() => {
+      return s.subscribe((v) => {
+        box.value = v;
+      });
+    });
+    return box;
+  }
 }
 function useGuard(guard) {
   return usePulse(guard);
 }
+function usePulseStore(unit) {
+  const isGuard = unit !== null && typeof unit === "function" && "state" in unit;
+  return (0, import_store.readable)(isGuard ? unit.state() : unit(), (set) => {
+    return unit.subscribe(set);
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useGuard,
-  usePulse
+  usePulse,
+  usePulseStore
 });

package/dist/index.svelte.d.cts

@@ -0,0 +1,35 @@
+import { Readable } from 'svelte/store';
+import { Guard, GuardState, Source } from '@pulse-js/core';
+
+/**
+ * Pulse-JS Svelte Integration
+ *
+ * This package provides two ways to consume Pulse state:
+ * 1. Runes (Svelte 5+): Native, fine-grained reactivity using $state and $effect.
+ * 2. Stores (Svelte 4/5): Legacy Svelte stores for backward compatibility.
+ */
+/**
+ * usePulse (Svelte 5 Runes)
+ *
+ * Returns a reactive wrapper for a Pulse Unit.
+ *
+ * - For Sources: Returns a stable object { value: T } where .value is reactive.
+ * - For Guards: Returns a proxy that behaves like the GuardState, but is reactive to updates.
+ */
+declare function usePulse<T>(unit: Guard<T>): GuardState<T>;
+declare function usePulse<T>(unit: Source<T>): {
+    value: T;
+};
+/**
+ * useGuard (Svelte 5 Runes)
+ * Alias for usePulse(guard).
+ */
+declare function useGuard<T>(guard: Guard<T>): GuardState<T>;
+/**
+ * usePulseStore (Legacy)
+ * Returns a Svelte Readable store. Use this in Svelte 4 or if you prefer store syntax.
+ */
+declare function usePulseStore<T>(unit: Source<T>): Readable<T>;
+declare function usePulseStore<T>(unit: Guard<T>): Readable<GuardState<T>>;
+
+export { useGuard, usePulse, usePulseStore };

package/dist/index.svelte.d.ts

@@ -0,0 +1,35 @@
+import { Readable } from 'svelte/store';
+import { Guard, GuardState, Source } from '@pulse-js/core';
+
+/**
+ * Pulse-JS Svelte Integration
+ *
+ * This package provides two ways to consume Pulse state:
+ * 1. Runes (Svelte 5+): Native, fine-grained reactivity using $state and $effect.
+ * 2. Stores (Svelte 4/5): Legacy Svelte stores for backward compatibility.
+ */
+/**
+ * usePulse (Svelte 5 Runes)
+ *
+ * Returns a reactive wrapper for a Pulse Unit.
+ *
+ * - For Sources: Returns a stable object { value: T } where .value is reactive.
+ * - For Guards: Returns a proxy that behaves like the GuardState, but is reactive to updates.
+ */
+declare function usePulse<T>(unit: Guard<T>): GuardState<T>;
+declare function usePulse<T>(unit: Source<T>): {
+    value: T;
+};
+/**
+ * useGuard (Svelte 5 Runes)
+ * Alias for usePulse(guard).
+ */
+declare function useGuard<T>(guard: Guard<T>): GuardState<T>;
+/**
+ * usePulseStore (Legacy)
+ * Returns a Svelte Readable store. Use this in Svelte 4 or if you prefer store syntax.
+ */
+declare function usePulseStore<T>(unit: Source<T>): Readable<T>;
+declare function usePulseStore<T>(unit: Guard<T>): Readable<GuardState<T>>;
+
+export { useGuard, usePulse, usePulseStore };

package/dist/index.svelte.js

@@ -0,0 +1,49 @@
+// src/index.svelte.ts
+import { readable } from "svelte/store";
+function usePulse(unit) {
+  const isGuard = unit !== null && typeof unit === "function" && "state" in unit;
+  if (isGuard) {
+    const g = unit;
+    const container = $state({ data: g.state() });
+    $effect(() => {
+      return g.subscribe((v) => {
+        container.data = v;
+      });
+    });
+    return new Proxy({}, {
+      get(_, prop) {
+        return container.data[prop];
+      },
+      // Ensure spread operators and other object features work
+      ownKeys() {
+        return Reflect.ownKeys(container.data);
+      },
+      getOwnPropertyDescriptor(_, prop) {
+        return Reflect.getOwnPropertyDescriptor(container.data, prop);
+      }
+    });
+  } else {
+    const s = unit;
+    const box = $state({ value: s() });
+    $effect(() => {
+      return s.subscribe((v) => {
+        box.value = v;
+      });
+    });
+    return box;
+  }
+}
+function useGuard(guard) {
+  return usePulse(guard);
+}
+function usePulseStore(unit) {
+  const isGuard = unit !== null && typeof unit === "function" && "state" in unit;
+  return readable(isGuard ? unit.state() : unit(), (set) => {
+    return unit.subscribe(set);
+  });
+}
+export {
+  useGuard,
+  usePulse,
+  usePulseStore
+};

package/package.json

@@ -1,15 +1,26 @@
 {
   "name": "@pulse-js/svelte",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/index.svelte.cjs",
+  "module": "dist/index.svelte.js",
+  "svelte": "src/index.svelte.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.svelte.d.ts",
+      "svelte": "./src/index.svelte.ts",
+      "import": "./dist/index.svelte.js",
+      "require": "./dist/index.svelte.cjs",
+      "default": "./dist/index.svelte.js"
+    }
+  },
+  "types": "dist/index.svelte.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
-    "build": "bun x tsup src/index.ts --format esm,cjs --clean --external svelte,@pulse-js/core && bun x tsc src/index.ts --declaration --emitDeclarationOnly --outDir dist --skipLibCheck",
+    "build": "bun x tsup src/index.svelte.ts --format esm,cjs --clean --dts --external svelte,@pulse-js/core",
     "lint": "bun x tsc --noEmit"
   },
   "peerDependencies": {

package/src/index.svelte.ts

@@ -0,0 +1,86 @@
+import { readable, type Readable } from 'svelte/store';
+import type { Guard, Source, GuardState } from '@pulse-js/core';
+
+/**
+ * Pulse-JS Svelte Integration
+ * 
+ * This package provides two ways to consume Pulse state:
+ * 1. Runes (Svelte 5+): Native, fine-grained reactivity using $state and $effect.
+ * 2. Stores (Svelte 4/5): Legacy Svelte stores for backward compatibility.
+ */
+
+/**
+ * usePulse (Svelte 5 Runes)
+ * 
+ * Returns a reactive wrapper for a Pulse Unit.
+ * 
+ * - For Sources: Returns a stable object { value: T } where .value is reactive.
+ * - For Guards: Returns a proxy that behaves like the GuardState, but is reactive to updates.
+ */
+export function usePulse<T>(unit: Guard<T>): GuardState<T>;
+export function usePulse<T>(unit: Source<T>): { value: T };
+export function usePulse<T>(unit: any): any {
+  const isGuard = unit !== null && typeof unit === 'function' && 'state' in unit;
+
+  if (isGuard) {
+    const g = unit as Guard<T>;
+    // In Svelte 5, to keep the identity of the returned object stable while
+    // the internal state changes, we use a container and a Proxy.
+    const container = $state({ data: g.state() });
+    
+    $effect(() => {
+        return g.subscribe(v => {
+            container.data = v;
+        });
+    });
+
+    return new Proxy({}, {
+      get(_, prop) {
+        // Accessing container.data[prop] inside the get trap ensures
+        // Svelte tracks the dependency on the 'container.data' property.
+        return container.data[prop as keyof GuardState<T>];
+      },
+      // Ensure spread operators and other object features work
+      ownKeys() {
+        return Reflect.ownKeys(container.data);
+      },
+      getOwnPropertyDescriptor(_, prop) {
+        return Reflect.getOwnPropertyDescriptor(container.data, prop);
+      }
+    });
+  } else {
+    const s = unit as Source<T>;
+    // For Sources, we return a "box" object. This is a common pattern in Svelte 5
+    // for primitive or frequently-swapped values.
+    const box = $state({ value: s() });
+    
+    $effect(() => {
+        return s.subscribe(v => {
+            box.value = v;
+        });
+    });
+
+    return box;
+  }
+}
+
+/**
+ * useGuard (Svelte 5 Runes)
+ * Alias for usePulse(guard).
+ */
+export function useGuard<T>(guard: Guard<T>): GuardState<T> {
+  return usePulse(guard);
+}
+
+/**
+ * usePulseStore (Legacy)
+ * Returns a Svelte Readable store. Use this in Svelte 4 or if you prefer store syntax.
+ */
+export function usePulseStore<T>(unit: Source<T>): Readable<T>;
+export function usePulseStore<T>(unit: Guard<T>): Readable<GuardState<T>>;
+export function usePulseStore<T>(unit: Guard<T> | Source<T>): Readable<any> {
+    const isGuard = unit !== null && typeof unit === 'function' && 'state' in unit;
+    return readable(isGuard ? (unit as Guard<any>).state() : (unit as Source<any>)(), (set) => {
+        return (unit as any).subscribe(set);
+    });
+}

package/dist/index.d.ts

@@ -1,11 +0,0 @@
-import { type Readable } from 'svelte/store';
-import type { Guard, Source, GuardState } from '@pulse-js/core';
-/**
- * Hook to consume a Pulse Unit (Source or Guard) as a Svelte Store.
- */
-export declare function usePulse<T>(unit: Source<T>): Readable<T>;
-export declare function usePulse<T>(unit: Guard<T>): Readable<GuardState<T>>;
-/**
- * Explicit hook for Pulse Guards in Svelte.
- */
-export declare function useGuard<T>(guard: Guard<T>): Readable<GuardState<T>>;

package/dist/index.js

@@ -1,15 +0,0 @@
-// src/index.ts
-import { readable } from "svelte/store";
-function usePulse(unit) {
-  const isGuard = unit !== null && typeof unit === "function" && "state" in unit;
-  return readable(isGuard ? unit.state() : unit(), (set) => {
-    return unit.subscribe(set);
-  });
-}
-function useGuard(guard) {
-  return usePulse(guard);
-}
-export {
-  useGuard,
-  usePulse
-};