@pulse-js/svelte 0.1.0 → 0.1.1

package/dist/index.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.d.cts

@@ -0,0 +1,35 @@
+import { Readable } from 'svelte/store';
+import { Source, Guard, 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.
+ */
+declare function usePulse<T>(unit: Source<T>): {
+    value: T;
+};
+declare function usePulse<T>(unit: Guard<T>): GuardState<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.d.ts

@@ -1,11 +1,35 @@
-import { type Readable } from 'svelte/store';
-import type { Guard, Source, GuardState } from '@pulse-js/core';
+import { Readable } from 'svelte/store';
+import { Source, Guard, GuardState } from '@pulse-js/core';
+
 /**
- * Hook to consume a Pulse Unit (Source or Guard) as a Svelte Store.
+ * 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.
  */
-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.
+ * 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 declare function useGuard<T>(guard: Guard<T>): Readable<GuardState<T>>;
+declare function usePulse<T>(unit: Source<T>): {
+    value: T;
+};
+declare function usePulse<T>(unit: Guard<T>): GuardState<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.js

@@ -1,15 +1,49 @@
-// src/index.ts
+// src/index.svelte.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);
-  });
+  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
+  usePulse,
+  usePulseStore
 };

package/package.json

@@ -1,15 +1,24 @@
 {
   "name": "@pulse-js/svelte",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
+  "svelte": "src/index.svelte.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./src/index.svelte.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "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 --entry.index=src/index.svelte.ts --format esm,cjs --clean --dts --external svelte,@pulse-js/core",
     "lint": "bun x tsc --noEmit"
   },
   "peerDependencies": {