@dvirus-js/react 0.0.13

package/CHANGELOG.md

@@ -0,0 +1,37 @@
+## 0.0.12 (2026-05-31)
+
+This was a version bump only for react to align it with other projects, there were no code changes.
+
+## 0.0.11 (2026-05-31)
+
+This was a version bump only for react to align it with other projects, there were no code changes.
+
+## 0.0.10 (2026-05-31)
+
+This was a version bump only for react to align it with other projects, there were no code changes.
+
+## 0.0.9 (2026-05-31)
+
+This was a version bump only for react to align it with other projects, there were no code changes.
+
+## 0.0.8 (2026-05-31)
+
+### 🩹 Fixes
+
+- prepare first 0.0.701 release flow ([29a6e68](https://github.com/Dvirus97/dvirus-js/commit/29a6e68))
+- add  react package with jsDocs and ReadMe ([6cf3517](https://github.com/Dvirus97/dvirus-js/commit/6cf3517))
+
+### ❤️ Thank You
+
+- Dvir Cohen
+
+## 0.0.701 (2026-05-31)
+
+### 🩹 Fixes
+
+- prepare first 0.0.701 release flow ([0661450](https://github.com/Dvirus97/dvirus-js/commit/0661450))
+- add  react package with jsDocs and ReadMe ([6154549](https://github.com/Dvirus97/dvirus-js/commit/6154549))
+
+### ❤️ Thank You
+
+- Dvir Cohen

package/README.md

@@ -0,0 +1,23 @@
+# React Utils Library
+
+Small, framework-focused helpers for React apps.
+
+## Install
+
+```bash
+npm install @dvirus-js/react
+```
+
+## Exports
+
+- `cx`: join class names from strings and conditional maps.
+- `toDataAttributes`: map values into `data-*` attributes.
+
+## Example
+
+```ts
+import { cx, toDataAttributes } from '@dvirus-js/react';
+
+const className = cx('btn', { 'btn-primary': true, disabled: false });
+const dataAttrs = toDataAttributes({ state: 'active', index: 2 });
+```

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/cx';
+export * from './lib/to-data-attributes';
+export * from './lib/signals';

package/index.js

@@ -0,0 +1,118 @@
+import * as o from "react";
+function y(...e) {
+  const n = [];
+  for (const t of e)
+    if (t) {
+      if (typeof t == "string") {
+        n.push(t);
+        continue;
+      }
+      for (const [r, a] of Object.entries(t))
+        a && n.push(r);
+    }
+  return n.join(" ");
+}
+function h(e) {
+  const n = {};
+  for (const [t, r] of Object.entries(e))
+    r != null && (n[`data-${t}`] = String(r));
+  return n;
+}
+const f = /* @__PURE__ */ Symbol("SIGNAL");
+function O(e) {
+  return typeof e == "function" && f in e;
+}
+function d() {
+  let e, n = null, t = !1, r = null;
+  const a = () => e, i = (s) => {
+    (!t || !Object.is(e, s)) && (e = s, t = !0, r?.());
+  };
+  return {
+    get: Object.assign(() => e, {
+      [f]: !0,
+      set: (s) => {
+        i(s);
+      },
+      update: (s) => {
+        i(s(e));
+      },
+      asReadOnly: () => a
+    }),
+    // readOnlyGet,
+    // set: (newValue: T): void => {
+    //     setValue(newValue);
+    // },
+    // update: (updater: (prevValue: T) => T): void => {
+    //     setValue(updater(latestValue));
+    // },
+    bindNotifyChange: (s) => {
+      r = s;
+    },
+    computeIfNeeded: (s, u) => {
+      (!t || g(n, u)) && (e = s(), n = [...u], t = !0);
+    }
+  };
+}
+function p(e, n) {
+  const [, t] = o.useState(0), [r] = o.useState(
+    () => d()
+  );
+  return r.bindNotifyChange(() => t((a) => a > 1e3 ? 1 : a + 1)), r.computeIfNeeded(e, n), r;
+}
+function g(e, n) {
+  if (e === null || e.length !== n.length) return !0;
+  for (let t = 0; t < n.length; t += 1)
+    if (!Object.is(e[t], n[t])) return !0;
+  return !1;
+}
+function m(e, n) {
+  return S(e, n).asReadOnly();
+}
+function S(e, n) {
+  return p(e, n).get;
+}
+function b(e) {
+  let n;
+  return {
+    state: Object.assign(() => n, {
+      [f]: !0,
+      set: (t) => e(t),
+      update: (t) => e(t),
+      asReadOnly: () => () => n
+    }),
+    setLatest: (t) => {
+      n = t;
+    }
+  };
+}
+function l(e) {
+  const [n, t] = o.useState(e), [r] = o.useState(
+    () => b(t)
+  );
+  return r.setLatest(n), r.state;
+}
+function C(e) {
+  const n = l(e.defaultValue), t = l(!1), r = l(void 0), [a, i] = o.useState(0), s = o.useCallback(() => i((u) => u + 1), []);
+  return o.useEffect(() => {
+    let u = !1;
+    return t.set(!0), r.set(void 0), e.loader().then((c) => {
+      u || n.set(c);
+    }).catch((c) => {
+      u || r.set(c);
+    }).finally(() => {
+      u || t.set(!1);
+    }), () => {
+      u = !0;
+    };
+  }, [a, ...e.deps || []]), { value: n, isLoading: t, error: r, reload: s };
+}
+export {
+  f as USE_SIGNAL,
+  y as cx,
+  O as isSignalState,
+  h as toDataAttributes,
+  m as useComputed,
+  C as useResource,
+  l as useSignalState,
+  S as useWritableComputed
+};

package/lib/cx.d.ts

@@ -0,0 +1,2 @@
+export type ClassValue = string | null | undefined | false | Record<string, boolean | null | undefined>;
+export declare function cx(...values: ClassValue[]): string;

package/lib/signals/index.d.ts

@@ -0,0 +1,4 @@
+export * from './signals.type';
+export * from './useComputed';
+export * from './useSignal';
+export * from './useResource';

package/lib/signals/signals.type.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Marker symbol used to identify writable signal wrappers.
+ */
+export declare const USE_SIGNAL: unique symbol;
+/**
+ * Runtime type guard that checks whether a value is a signal.
+ */
+export declare function isSignalState<T>(val: unknown): val is Signal<T>;
+/**
+ * Read-only function-style signal.
+ * Call the function to read the current value.
+ */
+export interface Signal<S> {
+    (): S;
+}
+/**
+ * Writable signal with mutation helpers.
+ */
+export interface WritableSignal<S> extends Signal<S> {
+    /** Replace the current value. */
+    set: (newState: S) => void;
+    /** Update the current value from its previous value. */
+    update: (updater: (prevState: S) => S) => void;
+    /** Get a read-only view of this signal. */
+    asReadOnly: () => Signal<S>;
+}
+/**
+ * Options for the asynchronous resource hook.
+ */
+export interface UseResourceOptions<T> {
+    /** Dependency list used to re-run the loader. */
+    deps?: React.DependencyList;
+    /** Async loader that resolves the resource value. */
+    loader: () => Promise<T>;
+    /** Optional initial value before the first load resolves. */
+    defaultValue?: T;
+}
+/**
+ * Reactive references returned by the resource hook.
+ */
+export interface ResourceRef<T, E = Error> {
+    /** Current resource value. */
+    value: WritableSignal<T | undefined>;
+    /** Tracks whether a request is in-flight. */
+    isLoading: WritableSignal<boolean>;
+    /** Last request error when present. */
+    error: WritableSignal<E | undefined>;
+    /** Triggers a manual reload. */
+    reload: () => void;
+}

package/lib/signals/useComputed.d.ts

@@ -0,0 +1,33 @@
+import { Signal, WritableSignal } from './signals.type';
+import * as React from 'react';
+/**
+ * Creates a read-only computed signal.
+ *
+ * The value is lazily recomputed when dependencies change (using `Object.is`
+ * comparison semantics), otherwise the previously computed value is reused.
+ *
+ * This is the safe default when consumers should not be able to mutate the
+ * computed value directly.
+ *
+ * @template T Computed value type.
+ * @param compute Pure compute function used to derive the current value.
+ * @param deps Dependency list that controls recomputation.
+ * @returns A read-only signal function that returns the latest computed value.
+ */
+export declare function useComputed<T>(compute: () => T, deps: React.DependencyList): Signal<T>;
+/**
+ * Creates a writable computed signal.
+ *
+ * The signal starts from `compute()` and recomputes when `deps` change. In
+ * addition, callers can manually override the value via `set` or `update`.
+ * A later dependency change may replace that manual value with a newly
+ * computed result.
+ *
+ * ### Prefer `useComputed` unless you explicitly need imperative overrides.
+ *
+ * @template T Computed value type.
+ * @param compute Pure compute function used to derive the current value.
+ * @param deps Dependency list that controls recomputation.
+ * @returns A writable signal with `set`, `update`, and `asReadOnly` methods.
+ */
+export declare function useWritableComputed<T>(compute: () => T, deps: React.DependencyList): WritableSignal<T>;

package/lib/signals/useResource.d.ts

@@ -0,0 +1,34 @@
+import { ResourceRef, UseResourceOptions } from './signals.type';
+/**
+ * Loads asynchronous data and exposes request state as writable signals.
+ *
+ * The loader runs on mount, when any `options.deps` value changes, and when
+ * `reload()` is called. While running, `isLoading` is set to `true` and `error`
+ * is cleared. On success, `value` is updated. On failure, `error` is updated.
+ *
+ * Stale async resolutions are ignored after cleanup, preventing state writes
+ * from outdated requests.
+ *
+ * @template T Loaded value type.
+ * @template E Error type captured in the `error` signal.
+ * @param options Resource options:
+ * - `loader`: async function that resolves the next value.
+ * - `deps`: optional dependency list that triggers reloads.
+ * - `defaultValue`: optional initial value before first successful load.
+ * @returns Signal-backed resource reference with:
+ * - `value`: latest loaded value.
+ * - `isLoading`: request in-flight flag.
+ * - `error`: latest error value.
+ * - `reload`: function to manually trigger a new load.
+ *
+ * @example
+ * const users = useResource({
+ *   loader: () => fetch('/api/users').then((r) => r.json() as Promise<User[]>),
+ *   deps: [teamId],
+ *   defaultValue: [],
+ * });
+ *
+ * if (users.isLoading()) return;
+ * const list = users.value() ?? [];
+ */
+export declare function useResource<T, E = Error>(options: UseResourceOptions<T>): ResourceRef<T, E>;

package/lib/signals/useSignal.d.ts

@@ -0,0 +1,23 @@
+import { WritableSignal } from './signals.type';
+/**
+ * React state hook exposed as a writable signal API.
+ *
+ * Returns a function-style signal with stable identity:
+ * - call `signal()` to read the latest value,
+ * - call `signal.set(next)` to replace it,
+ * - call `signal.update((prev) => next)` to derive the next value,
+ * - call `signal.asReadOnly()` to hide mutation methods.
+ *
+ * This is useful when you want React state ergonomics plus signal-style
+ * composability.
+ *
+ * @template S State value type.
+ * @param initVal Initial state value or lazy initializer.
+ * @returns Writable signal backed by `React.useState`.
+ *
+ * @example
+ * const count = useSignalState(0);
+ * count.update((v) => v + 1);
+ * console.log(count()); // 1
+ */
+export declare function useSignalState<S>(initVal: S | (() => S)): WritableSignal<S>;

package/lib/to-data-attributes.d.ts

@@ -0,0 +1,4 @@
+type Primitive = string | number | boolean | null | undefined;
+export type DataSource = Record<string, Primitive>;
+export declare function toDataAttributes(source: DataSource): Record<string, string>;
+export {};

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@dvirus-js/react",
+  "version": "0.0.13",
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@types/react": "^19.2.15"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}