@pulse-js/vue 0.1.0

package/README.md

@@ -0,0 +1,62 @@
+# @pulse-js/vue
+
+The standard Vue 3 integration for Pulse.
+
+[![npm version](https://img.shields.io/npm/v/@pulse-js/vue.svg)](https://www.npmjs.com/package/@pulse-js/vue)
+
+## Features
+
+- **Composable API**: `usePulse` returns standard Vue `Ref` or `ComputedRef` objects.
+- **Reactive Unwrapping**: Use `.value` or unwrapping in templates just like native Vue signals.
+- **Type Safety**: Full TypeScript support.
+
+## Installation
+
+```bash
+npm install @pulse-js/core @pulse-js/vue
+```
+
+## Usage
+
+### Using Sources
+
+Map Pulse sources to Vue definitions.
+
+```vue
+<script setup lang="ts">
+import { source } from "@pulse-js/core";
+import { usePulse } from "@pulse-js/vue";
+
+const count = source(0);
+// Returns a Ref<number>
+const countRef = usePulse(count);
+
+function increment() {
+  count.set(count.value + 1);
+}
+</script>
+
+<template>
+  <button @click="increment">Count is {{ countRef }}</button>
+</template>
+```
+
+### Using Guards
+
+Guards are mapped to DeepReadonly Refs containing the full state.
+
+```vue
+<script setup lang="ts">
+import { guard } from "@pulse-js/core";
+import { usePulse } from "@pulse-js/vue";
+
+const isAdult = guard(() => age.value >= 18);
+const state = usePulse(isAdult);
+// state is Ref<GuardState<boolean>>
+</script>
+
+<template>
+  <div v-if="state.status === 'ok'">Allowed: {{ state.value }}</div>
+  <div v-else-if="state.status === 'fail'">Blocked: {{ state.reason }}</div>
+</template>
+```

package/dist/index.cjs

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useGuard: () => useGuard,
+  usePulse: () => usePulse
+});
+module.exports = __toCommonJS(index_exports);
+var import_vue = require("vue");
+function usePulse(unit) {
+  const isGuard = unit !== null && typeof unit === "function" && "state" in unit;
+  const state = (0, import_vue.shallowRef)(isGuard ? unit.state() : unit());
+  const unsub = unit.subscribe((newVal) => {
+    state.value = newVal;
+  });
+  (0, import_vue.onUnmounted)(unsub);
+  return state;
+}
+function useGuard(guard) {
+  return usePulse(guard);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useGuard,
+  usePulse
+});

package/dist/index.d.cts

@@ -0,0 +1,14 @@
+import { Ref } from 'vue';
+import { Source, Guard, GuardState } from '@pulse-js/core';
+
+/**
+ * Hook to consume a Pulse Unit (Source or Guard) in a Vue component.
+ */
+declare function usePulse<T>(unit: Source<T>): Ref<T>;
+declare function usePulse<T>(unit: Guard<T>): Ref<GuardState<T>>;
+/**
+ * Explicit hook for Pulse Guards in Vue.
+ */
+declare function useGuard<T>(guard: Guard<T>): Ref<GuardState<T>>;
+
+export { useGuard, usePulse };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'vue';
+import { Source, Guard, GuardState } from '@pulse-js/core';
+
+/**
+ * Hook to consume a Pulse Unit (Source or Guard) in a Vue component.
+ */
+declare function usePulse<T>(unit: Source<T>): Ref<T>;
+declare function usePulse<T>(unit: Guard<T>): Ref<GuardState<T>>;
+/**
+ * Explicit hook for Pulse Guards in Vue.
+ */
+declare function useGuard<T>(guard: Guard<T>): Ref<GuardState<T>>;
+
+export { useGuard, usePulse };

package/dist/index.js

@@ -0,0 +1,18 @@
+// src/index.ts
+import { shallowRef, onUnmounted } from "vue";
+function usePulse(unit) {
+  const isGuard = unit !== null && typeof unit === "function" && "state" in unit;
+  const state = shallowRef(isGuard ? unit.state() : unit());
+  const unsub = unit.subscribe((newVal) => {
+    state.value = newVal;
+  });
+  onUnmounted(unsub);
+  return state;
+}
+function useGuard(guard) {
+  return usePulse(guard);
+}
+export {
+  useGuard,
+  usePulse
+};

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@pulse-js/vue",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun x tsup src/index.ts --format esm,cjs --dts --clean --external vue,@pulse-js/core",
+    "lint": "bun x tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@pulse-js/core": "^0.1.8"
+  },
+  "devDependencies": {
+    "vue": "^3.5.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}