@hoosk/minisignals-react 1.0.3

package/dist/index.cjs

@@ -0,0 +1,69 @@
+"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, {
+  useSignal: () => useSignal,
+  useSignalValue: () => useSignalValue
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useSignalValue.ts
+var import_react = require("react");
+var import_minisignals = require("@hoosk/minisignals");
+function useSignalValue(sig) {
+  const subscribe = (0, import_react.useCallback)(
+    (onStoreChange) => {
+      let isInitialRun = true;
+      const unsubscribe = (0, import_minisignals.effect)(() => {
+        const _val = sig.value;
+        if (!isInitialRun) {
+          onStoreChange();
+        }
+        isInitialRun = false;
+      });
+      return unsubscribe;
+    },
+    [sig]
+  );
+  return (0, import_react.useSyncExternalStore)(
+    subscribe,
+    () => sig.value,
+    // getSnapshot
+    () => sig.value
+    // getServerSnapshot (SSR support)
+  );
+}
+
+// src/useSignal.ts
+var import_react2 = require("react");
+var import_minisignals2 = require("@hoosk/minisignals");
+function useSignal(initialValue) {
+  const signalRef = (0, import_react2.useRef)(null);
+  if (signalRef.current === null) {
+    signalRef.current = (0, import_minisignals2.signal)(initialValue);
+  }
+  return signalRef.current;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSignal,
+  useSignalValue
+});

package/dist/index.d.cts

@@ -0,0 +1,23 @@
+import { Signal, Computed } from '@hoosk/minisignals';
+
+/**
+ * A hook that subscribes to a signal or computed value and triggers
+ * a React re-render whenever the value changes.
+ * Uses React 18's useSyncExternalStore for tear-free concurrent rendering.
+ *
+ * @param sig The Signal or Computed to observe.
+ * @returns The current value of the signal.
+ */
+declare function useSignalValue<T>(sig: Signal<T> | Computed<T>): T;
+
+/**
+ * Creates a signal that is tied to the component's lifecycle.
+ * The signal instance is preserved across re-renders.
+ * NOTE: To trigger a re-render on value change, you must use `useSignalValue(sig)`.
+ *
+ * @param initialValue The starting value of the signal.
+ * @returns A stable Signal instance.
+ */
+declare function useSignal<T>(initialValue: T): Signal<T>;
+
+export { useSignal, useSignalValue };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import { Signal, Computed } from '@hoosk/minisignals';
+
+/**
+ * A hook that subscribes to a signal or computed value and triggers
+ * a React re-render whenever the value changes.
+ * Uses React 18's useSyncExternalStore for tear-free concurrent rendering.
+ *
+ * @param sig The Signal or Computed to observe.
+ * @returns The current value of the signal.
+ */
+declare function useSignalValue<T>(sig: Signal<T> | Computed<T>): T;
+
+/**
+ * Creates a signal that is tied to the component's lifecycle.
+ * The signal instance is preserved across re-renders.
+ * NOTE: To trigger a re-render on value change, you must use `useSignalValue(sig)`.
+ *
+ * @param initialValue The starting value of the signal.
+ * @returns A stable Signal instance.
+ */
+declare function useSignal<T>(initialValue: T): Signal<T>;
+
+export { useSignal, useSignalValue };

package/dist/index.js

@@ -0,0 +1,41 @@
+// src/useSignalValue.ts
+import { useSyncExternalStore, useCallback } from "react";
+import { effect } from "@hoosk/minisignals";
+function useSignalValue(sig) {
+  const subscribe = useCallback(
+    (onStoreChange) => {
+      let isInitialRun = true;
+      const unsubscribe = effect(() => {
+        const _val = sig.value;
+        if (!isInitialRun) {
+          onStoreChange();
+        }
+        isInitialRun = false;
+      });
+      return unsubscribe;
+    },
+    [sig]
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => sig.value,
+    // getSnapshot
+    () => sig.value
+    // getServerSnapshot (SSR support)
+  );
+}
+
+// src/useSignal.ts
+import { useRef } from "react";
+import { signal } from "@hoosk/minisignals";
+function useSignal(initialValue) {
+  const signalRef = useRef(null);
+  if (signalRef.current === null) {
+    signalRef.current = signal(initialValue);
+  }
+  return signalRef.current;
+}
+export {
+  useSignal,
+  useSignalValue
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@hoosk/minisignals-react",
+  "version": "1.0.3",
+  "description": "React adapter for @hoosk/minisignals",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "dependencies": {
+    "@hoosk/minisignals": "*"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.2.1",
+    "@types/node": "^24.6.0",
+    "@types/react": "^18.2.0",
+    "jsdom": "^24.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.5.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
+    "test": "vitest run"
+  },
+  "author": "Hoosk",
+  "license": "MIT"
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './useSignalValue';
+export * from './useSignal';

package/src/useSignal.ts

@@ -0,0 +1,20 @@
+import { useRef } from 'react';
+import { signal, Signal } from '@hoosk/minisignals';
+
+/**
+ * Creates a signal that is tied to the component's lifecycle.
+ * The signal instance is preserved across re-renders.
+ * NOTE: To trigger a re-render on value change, you must use `useSignalValue(sig)`.
+ * 
+ * @param initialValue The starting value of the signal.
+ * @returns A stable Signal instance.
+ */
+export function useSignal<T>(initialValue: T): Signal<T> {
+  const signalRef = useRef<Signal<T> | null>(null);
+
+  if (signalRef.current === null) {
+    signalRef.current = signal(initialValue);
+  }
+
+  return signalRef.current;
+}

package/src/useSignalValue.ts

@@ -0,0 +1,36 @@
+import { useSyncExternalStore, useCallback } from 'react';
+import { effect, Signal, Computed } from '@hoosk/minisignals';
+
+/**
+ * A hook that subscribes to a signal or computed value and triggers
+ * a React re-render whenever the value changes.
+ * Uses React 18's useSyncExternalStore for tear-free concurrent rendering.
+ * 
+ * @param sig The Signal or Computed to observe.
+ * @returns The current value of the signal.
+ */
+export function useSignalValue<T>(sig: Signal<T> | Computed<T>): T {
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      let isInitialRun = true;
+      
+      const unsubscribe = effect(() => {
+        const _val = sig.value;
+        
+        if (!isInitialRun) {
+          onStoreChange();
+        }
+        isInitialRun = false;
+      });
+
+      return unsubscribe;
+    },
+    [sig]
+  );
+
+  return useSyncExternalStore(
+    subscribe,
+    () => sig.value, // getSnapshot
+    () => sig.value  // getServerSnapshot (SSR support)
+  );
+}

package/tests/adapter.test.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { signal, computed } from '@hoosk/minisignals';
+import { useSignalValue, useSignal } from '../src/index.ts';
+
+describe('@hoosk/minisignals-react adapter', () => {
+  describe('useSignalValue()', () => {
+    it('should render the initial value of a signal', () => {
+      const count = signal(5);
+      
+      const TestComponent = () => {
+        const val = useSignalValue(count);
+        return <div>Value: {val}</div>;
+      };
+
+      render(<TestComponent />);
+      expect(screen.getByText('Value: 5')).toBeDefined();
+    });
+
+    it('should trigger a re-render when the signal mutates', () => {
+      const count = signal(10);
+      
+      const TestComponent = () => {
+        const val = useSignalValue(count);
+        return <div data-testid="display">{val}</div>;
+      };
+
+      render(<TestComponent />);
+      const display = screen.getByTestId('display');
+      expect(display.textContent).toBe('10');
+
+      act(() => {
+        count.value = 20;
+      });
+
+      expect(display.textContent).toBe('20');
+    });
+
+    it('should work seamlessly with computed signals', () => {
+      const name = signal('A');
+      const doubledName = computed(() => name.value + name.value);
+      
+      const TestComponent = () => {
+        const val = useSignalValue(doubledName);
+        return <div data-testid="computed-display">{val}</div>;
+      };
+
+      render(<TestComponent />);
+      const display = screen.getByTestId('computed-display');
+      expect(display.textContent).toBe('AA');
+
+      act(() => {
+        name.value = 'B';
+      });
+
+      expect(display.textContent).toBe('BB');
+    });
+  });
+
+  describe('useSignal()', () => {
+    it('should maintain state across re-renders', () => {
+      let renderCount = 0;
+      
+      const TestComponent = () => {
+        renderCount++;
+        // Create local signal
+        const localCount = useSignal(100);
+        // Subscribe to it to trigger re-renders
+        const val = useSignalValue(localCount);
+        
+        return (
+          <div>
+            <span data-testid="val">{val}</span>
+            <button onClick={() => localCount.value++}>Add</button>
+          </div>
+        );
+      };
+
+      render(<TestComponent />);
+      
+      const valSpan = screen.getByTestId('val');
+      const btn = screen.getByText('Add');
+
+      expect(valSpan.textContent).toBe('100');
+      expect(renderCount).toBe(1);
+
+      act(() => {
+        btn.click();
+      });
+
+      // The hook maintained the signal instance, and useSignalValue triggered the re-render
+      expect(valSpan.textContent).toBe('101');
+      expect(renderCount).toBe(2);
+    });
+  });
+});

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*"]
+}

package/vitest.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
+  resolve: {
+    alias: {
+      '@hoosk/minisignals': new URL('../core/src/index.ts', import.meta.url).pathname,
+    },
+  },
+});