@khanglvm/react 1.2.0

package/dist/libs/createContextState.js

@@ -0,0 +1,231 @@
+"use client";
+import { jsx as g, jsxs as B } from "react/jsx-runtime";
+import { createContext as N, memo as J, useRef as l, useCallback as f, forwardRef as K, useEffect as b, useSyncExternalStore as R, useContext as Q } from "react";
+import { deepClone as T } from "../helpers/deepClone.js";
+import { createCacheStorage as Z } from "../helpers/createCacheStorage.js";
+import { comparePropsForMemo as tt } from "../helpers/react.js";
+import { enableMapSet as et, enablePatches as nt, produceWithPatches as st, produce as D, applyPatches as ot } from "immer";
+et();
+nt();
+const rt = `
+❌ Compute function validation failed: Non-pure function detected
+
+🔍 ISSUE:
+Your compute function returns different values on consecutive calls with the same input.
+This will cause infinite re-renders and performance issues.
+
+📝 WHAT IS A PURE FUNCTION?
+A pure function always returns the same output for the same input and has no side effects.
+
+✅ VALID EXAMPLES:
+  useContextState(state => state.user.name)                    // ✓ Simple property access
+  useContextState(state => state.todos.length)                // ✓ Deterministic computation
+  useContextState(state => state.todos.filter(t => t.done))   // ✓ Array operations on state
+  useContextState(state => ({                                 // ✓ Object creation with static values
+    user: state.user,
+    isLoggedIn: !!state.user,
+    staticData: 'constant'
+  }))
+
+❌ INVALID EXAMPLES:
+  useContextState(state => Math.random())                     // ✗ Random values
+  useContextState(state => new Date())                        // ✗ Current time
+  useContextState(state => ({ id: Math.random() }))          // ✗ Non-deterministic object properties
+  useContextState(state => state.todos.map(t => ({           // ✗ Creating new objects with random IDs
+    ...t,
+    tempId: Math.random()
+  })))
+
+🛠️ HOW TO FIX:
+1. Remove any calls to Math.random(), Date.now(), new Date(), etc.
+2. Avoid creating objects with non-deterministic properties
+3. Only use state data and constants in your compute function
+4. Move side effects outside the compute function
+
+💡 TIP: If you need random values or timestamps, generate them in event handlers or effects,
+then store them in state and access them in your compute function.
+`.trim(), j = (u) => u;
+function X() {
+  var u, i;
+  return typeof globalThis == "object" && "process" in globalThis ? (i = (u = globalThis.process) == null ? void 0 : u.env) == null ? void 0 : i.NODE_ENV : void 0;
+}
+function ht(u) {
+  const { cache: i, clear: v, uid: h } = Z(), I = () => ({
+    stateInstance: h(),
+    getSnapshotFunction: h(),
+    snapshotInstance: h()
+  }), m = u || h();
+  let S, p;
+  typeof window > "u" ? (S = {}, p = N(null)) : (window.__CONTEXT_STATE__ || (window.__CONTEXT_STATE__ = /* @__PURE__ */ new Map()), window.__CONTEXT_STATE__.get(m) || window.__CONTEXT_STATE__.set(m, {
+    state: {},
+    instance: N(null)
+  }), S = window.__CONTEXT_STATE__.get(m).state, p = window.__CONTEXT_STATE__.get(m).instance);
+  const P = /* @__PURE__ */ new Set(), L = {
+    getStateValue: (e = !0) => e ? T(S) : S,
+    subscribe: () => () => {
+    },
+    setState: () => () => {
+    },
+    setStateFast: () => () => {
+    },
+    emitChanges: () => {
+    },
+    setPostFlush: () => {
+    }
+  }, d = () => {
+    const e = Q(p);
+    if (!e) {
+      if (X() === "development") {
+        const t = u || "unknown";
+        P.has(t) || (P.add(t), console.warn(`ContextState not found for ${t}. Returning dummy context.`));
+      }
+      return L;
+    }
+    return e;
+  };
+  function k(e, t, n, ...s) {
+    const r = i(t(e), n, ...s), a = i(t(e), n, ...s);
+    if (r !== a)
+      throw new Error(rt);
+  }
+  function H(e) {
+    const t = l(e ?? S), n = f(
+      (o = !0) => o ? T(t.current) : t.current,
+      []
+    ), s = l(/* @__PURE__ */ new Set()), r = l(null), a = l(!1), C = typeof queueMicrotask == "function" ? queueMicrotask : (o) => {
+      Promise.resolve().then(o);
+    };
+    function c() {
+      a.current || (a.current = !0, C(() => {
+        a.current = !1, r.current && (t.current = D(t.current, r.current));
+        for (const o of s.current)
+          o();
+      }));
+    }
+    const x = f((o) => {
+      r.current = o;
+    }, []), z = f((o) => (s.current.add(o), () => s.current.delete(o)), []), U = f((o) => {
+      const _ = typeof o == "function" ? o : ($) => {
+        Object.keys(o).forEach((O) => {
+          $[O] = T(o[O]);
+        });
+      }, [E, , w] = st(t.current, _), Y = () => {
+        t.current = ot(t.current, w), c();
+      };
+      return t.current = E, c(), Y;
+    }, []), q = f((o) => {
+      const _ = typeof o == "function" ? o : (E) => {
+        Object.keys(o).forEach((w) => {
+          E[w] = T(o[w]);
+        });
+      };
+      return t.current = D(t.current, _), c(), () => {
+      };
+    }, []);
+    return {
+      getStateValue: n,
+      subscribe: z,
+      setState: U,
+      setStateFast: q,
+      emitChanges: c,
+      setPostFlush: x
+    };
+  }
+  const F = J(
+    function({
+      initialState: t,
+      children: n
+    }) {
+      return /* @__PURE__ */ g(p.Provider, { value: H(t), children: n });
+    },
+    tt(["children", "initialState"])
+  );
+  function y(e) {
+    function t(n) {
+      const s = e.getStateValue(!1);
+      return n ? n(s) : s;
+    }
+    return t;
+  }
+  function G(e = j, t = !0) {
+    const n = d(), s = l(I()), r = (c, x) => i(c, x, s.current.stateInstance);
+    b(() => {
+      const c = s.current.stateInstance;
+      return () => v(c);
+    }, []);
+    const a = () => r(e(n.getStateValue(!1)), s.current.getSnapshotFunction);
+    return [R(
+      n.subscribe,
+      a,
+      () => r(e(n.getStateValue(!1)), s.current.snapshotInstance)
+    ), t ? n.setState : n.setStateFast, y(n)];
+  }
+  function W(e = j) {
+    const t = d(), n = l(I()), s = f(
+      (a, C) => i(a, C, n.current.stateInstance),
+      []
+    );
+    b(() => {
+      const a = n.current.stateInstance;
+      return () => v(a);
+    }, []), X() === "development" && k(t.getStateValue(!1), e, "computeFunction", n.current.stateInstance);
+    const r = () => s(e(t.getStateValue(!1)), "getSnapshotWithComputeFunction");
+    return R(
+      t.subscribe,
+      r,
+      () => s(e(t.getStateValue(!1)), "hasComputeFunctionSnapshot")
+    );
+  }
+  function V(e = !0) {
+    const t = d();
+    return e ? t.setState : t.setStateFast;
+  }
+  function A({
+    updateStateOnDataChanged: e,
+    data: t
+  }) {
+    const n = l(!1), s = V();
+    return b(() => {
+      if (!n.current) {
+        n.current = !0;
+        return;
+      }
+      !e || !t || s((r) => e(r, t));
+    }, [e, t]), null;
+  }
+  function M(e, t = {}) {
+    return K((n, s) => {
+      var r;
+      return /* @__PURE__ */ B(F, { initialState: (r = t.initialState) == null ? void 0 : r.call(t, n), children: [
+        /* @__PURE__ */ g(A, { updateStateOnDataChanged: t.bindPropToState, data: n }),
+        /* @__PURE__ */ g(e, { ...n, ref: s })
+      ] });
+    });
+  }
+  return {
+    /** React component to provide state context */
+    Provider: F,
+    /** Hook for full state access (read + write + computed values) */
+    useContextState: G,
+    /** Hook for read-only state access with computed values */
+    useContextStateValue: W,
+    /** Hook for write-only state access */
+    useSetContextState: V,
+    /** Hook for synchronous state snapshot access */
+    useStateSnapshotGetter: () => {
+      const e = d();
+      return y(e);
+    },
+    /** Hook to register a postFlush callback (runs once per batch before subscribers) */
+    useSetPostFlush: () => d().setPostFlush,
+    /** Component for syncing external props to state */
+    StateSynchronizer: A,
+    /** @deprecated - renamed to withContextProvider */
+    withStateProvider: M,
+    /** HOC to automatically wrap components with state provider */
+    withContextProvider: M
+  };
+}
+export {
+  ht as createContextState
+};

package/dist/libs/createEventMethod.d.ts

@@ -0,0 +1,24 @@
+type TEventData = {
+    [field: string]: unknown;
+};
+type TEventFunction = (data?: {
+    [field: string]: unknown;
+}) => any | Promise<any>;
+type TEventHandler = (data: TEventData, signal?: AbortSignal) => any | Promise<any>;
+declare global {
+    interface Window {
+        __LVMK_EVENT_LISTENER__: Map<symbol, {
+            event: string;
+            handle: TEventHandler;
+        }>;
+    }
+}
+type IsFunction<T> = T extends (...args: any[]) => any ? true : false;
+type ExtractReturnType<T> = T extends (...args: any[]) => infer R ? Awaited<R> : never;
+type ExtractParamType<T> = T extends (arg: infer P) => any ? P : T extends () => any ? never : never;
+type HasParameters<T> = T extends () => any ? false : T extends (arg: any) => any ? true : false;
+export declare function createEventMethod<CustomEventDef extends Record<string, unknown | TEventFunction>>(): {
+    useEventListener: <EventKey extends keyof CustomEventDef & string>(event: EventKey, handle: IsFunction<CustomEventDef[EventKey]> extends true ? HasParameters<CustomEventDef[EventKey]> extends true ? (eventData: ExtractParamType<CustomEventDef[EventKey]>, signal?: AbortSignal) => ExtractReturnType<CustomEventDef[EventKey]> | Promise<ExtractReturnType<CustomEventDef[EventKey]>> : (signal?: AbortSignal) => ExtractReturnType<CustomEventDef[EventKey]> | Promise<ExtractReturnType<CustomEventDef[EventKey]>> : (eventData: CustomEventDef[EventKey], signal?: AbortSignal) => Promise<void> | void) => void;
+    emitEvent: <EventKey extends keyof CustomEventDef & string>(event: EventKey, ...args: IsFunction<CustomEventDef[EventKey]> extends true ? HasParameters<CustomEventDef[EventKey]> extends true ? [data: ExtractParamType<CustomEventDef[EventKey]>] : [] : CustomEventDef[EventKey] extends undefined ? [] : [data: CustomEventDef[EventKey]]) => Promise<IsFunction<CustomEventDef[EventKey]> extends true ? ExtractReturnType<CustomEventDef[EventKey]>[] : void>;
+};
+export {};

package/dist/libs/createEventMethod.js

@@ -0,0 +1,51 @@
+"use client";
+import { useRef as c, useCallback as u, useEffect as E } from "react";
+function f() {
+  function i(o, s) {
+    const t = c(null), l = c(s);
+    l.current = s;
+    const n = u(async (e) => {
+      try {
+        return t.current = new AbortController(), await l.current(e, t.current.signal);
+      } catch (r) {
+        if (r instanceof Error && r.name === "AbortError")
+          return;
+        throw console.error("Event handler error:", r), r;
+      }
+    }, []);
+    E(() => {
+      if (typeof window > "u") return () => {
+      };
+      window.__LVMK_EVENT_LISTENER__ || (window.__LVMK_EVENT_LISTENER__ = /* @__PURE__ */ new Map());
+      const e = Symbol();
+      return window.__LVMK_EVENT_LISTENER__.set(e, {
+        event: o,
+        handle: n
+      }), () => {
+        t.current && t.current.abort(), window.__LVMK_EVENT_LISTENER__.delete(e);
+      };
+    }, [o, n]);
+  }
+  async function _(o, ...s) {
+    if (!window.__LVMK_EVENT_LISTENER__)
+      return [];
+    const t = [], l = s[0], n = [];
+    for (const [, e] of window.__LVMK_EVENT_LISTENER__.entries()) {
+      if (e.event !== o) continue;
+      const r = e.handle(l);
+      n.push(Promise.resolve(r));
+    }
+    try {
+      const e = await Promise.allSettled(n);
+      for (const r of e)
+        r.status === "fulfilled" ? t.push(r.value) : console.error("Event handler failed:", r.reason);
+    } catch (e) {
+      console.error("Unexpected error in emitEvent:", e);
+    }
+    return t;
+  }
+  return { useEventListener: i, emitEvent: _ };
+}
+export {
+  f as createEventMethod
+};

package/dist/libs/createStateManager.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Backward-compatible wrapper around createContextState.
+ *
+ * @deprecated Prefer createContextState for new code.
+ */
+export declare function createStateManager<State extends Record<string | number, unknown>>(instanceId?: string): {
+    useState: <ComputedValue = State>(compute?: (state: import('../helpers/types.js').TDeepReadonly<State>) => ComputedValue, enableRevert?: boolean) => [import('../helpers/types.js').TDeepMutable<ComputedValue>, <T extends Partial<State> | ((draft: import('immer').Draft<State>) => void)>(valueOrUpdater: T) => () => void, {
+        <ComputedSnapshotValue>(compute: (input: State) => ComputedSnapshotValue): ComputedSnapshotValue;
+        (compute?: undefined): State;
+    }];
+    useStateValue: <ComputedValue = State>(compute?: (state: import('../helpers/types.js').TDeepReadonly<State>) => ComputedValue) => import('../helpers/types.js').TDeepMutable<ComputedValue>;
+    useSetState: (enableRevert?: boolean) => <T extends Partial<State> | ((draft: import('immer').Draft<State>) => void)>(valueOrUpdater: T) => () => void;
+    useSnapshot: () => {
+        <ComputedSnapshotValue>(compute: (input: State) => ComputedSnapshotValue): ComputedSnapshotValue;
+        (compute?: undefined): State;
+    };
+    withProvider: <ComponentProps>(WrappedComponent: import('react').ComponentType<ComponentProps>, config?: {
+        initialState?: ((props: import('react').PropsWithoutRef<ComponentProps>) => Partial<State>) | undefined;
+        bindPropToState?: ((draft: import('immer').Draft<State>, data: import('react').PropsWithoutRef<ComponentProps>) => void) | undefined;
+    }) => import('react').ForwardRefExoticComponent<import('react').PropsWithoutRef<ComponentProps> & import('react').RefAttributes<unknown>>;
+    Provider: import('react').NamedExoticComponent<import('react').PropsWithChildren<{
+        initialState?: Partial<State> | undefined;
+    }>>;
+    useContextState: <ComputedValue = State>(compute?: (state: import('../helpers/types.js').TDeepReadonly<State>) => ComputedValue, enableRevert?: boolean) => [import('../helpers/types.js').TDeepMutable<ComputedValue>, <T extends Partial<State> | ((draft: import('immer').Draft<State>) => void)>(valueOrUpdater: T) => () => void, {
+        <ComputedSnapshotValue>(compute: (input: State) => ComputedSnapshotValue): ComputedSnapshotValue;
+        (compute?: undefined): State;
+    }];
+    useContextStateValue: <ComputedValue = State>(compute?: (state: import('../helpers/types.js').TDeepReadonly<State>) => ComputedValue) => import('../helpers/types.js').TDeepMutable<ComputedValue>;
+    useSetContextState: (enableRevert?: boolean) => <T extends Partial<State> | ((draft: import('immer').Draft<State>) => void)>(valueOrUpdater: T) => () => void;
+    useStateSnapshotGetter: () => {
+        <ComputedSnapshotValue>(compute: (input: State) => ComputedSnapshotValue): ComputedSnapshotValue;
+        (compute?: undefined): State;
+    };
+    useSetPostFlush: () => (callback: (draft: import('immer').Draft<State>) => void) => void;
+    StateSynchronizer: <ComponentProps>({ updateStateOnDataChanged, data }: {
+        data?: ComponentProps | undefined;
+        updateStateOnDataChanged?: ((draft: import('immer').Draft<State>, data: ComponentProps) => void) | undefined;
+    }) => null;
+    withStateProvider: <ComponentProps>(WrappedComponent: import('react').ComponentType<ComponentProps>, config?: {
+        initialState?: ((props: import('react').PropsWithoutRef<ComponentProps>) => Partial<State>) | undefined;
+        bindPropToState?: ((draft: import('immer').Draft<State>, data: import('react').PropsWithoutRef<ComponentProps>) => void) | undefined;
+    }) => import('react').ForwardRefExoticComponent<import('react').PropsWithoutRef<ComponentProps> & import('react').RefAttributes<unknown>>;
+    withContextProvider: <ComponentProps>(WrappedComponent: import('react').ComponentType<ComponentProps>, config?: {
+        initialState?: ((props: import('react').PropsWithoutRef<ComponentProps>) => Partial<State>) | undefined;
+        bindPropToState?: ((draft: import('immer').Draft<State>, data: import('react').PropsWithoutRef<ComponentProps>) => void) | undefined;
+    }) => import('react').ForwardRefExoticComponent<import('react').PropsWithoutRef<ComponentProps> & import('react').RefAttributes<unknown>>;
+};
+export type TStateManager = ReturnType<typeof createStateManager>;

package/dist/libs/createStateManager.js

@@ -0,0 +1,16 @@
+"use client";
+import { createContextState as a } from "./createContextState.js";
+function n(e) {
+  const t = a(e);
+  return {
+    ...t,
+    useState: t.useContextState,
+    useStateValue: t.useContextStateValue,
+    useSetState: t.useSetContextState,
+    useSnapshot: t.useStateSnapshotGetter,
+    withProvider: t.withContextProvider
+  };
+}
+export {
+  n as createStateManager
+};

package/dist/libs/createTranslator.d.ts

@@ -0,0 +1,120 @@
+import { TDeepReadonly } from '../helpers/index.js';
+
+/**
+ * Generic translation item type that accepts any language enum/union
+ * @template Languages - Language type (enum or union of strings)
+ */
+export type LocalizedString<Languages extends string> = {
+    [Language in Languages]: string;
+};
+/**
+ * Generic translation definition type that supports nested namespaces
+ * @template Languages - Language type (enum or union of strings)
+ */
+export type TranslationNamespace<Languages extends string> = {
+    [key: string]: LocalizedString<Languages> | TranslationNamespace<Languages>;
+};
+/**
+ * Creates a translation function for a specific language with interpolation support
+ *
+ * This function creates a translator that:
+ * - Selects text for the specified language
+ * - Handles placeholder replacement using {key} syntax
+ * - Supports string and number interpolation
+ * - Falls back to empty string if language not found
+ *
+ * @template Language - The language type (string literal or union)
+ * @param currentLanguage - The language to translate to
+ * @returns Translation function that processes LocalizedString objects
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * const t = createTranslator('en')
+ * const greeting = t({ en: "Hello", vi: "Xin chào" })
+ * // Returns: "Hello"
+ *
+ * // With interpolation
+ * const personalGreeting = t(
+ *   { en: "Hello {name}, you have {count} messages", vi: "Xin chào {name}, bạn có {count} tin nhắn" },
+ *   { name: "John", count: 5 }
+ * )
+ * // Returns: "Hello John, you have 5 messages"
+ *
+ * // Fallback behavior
+ * const t2 = createTranslator('fr')
+ * const text = t2({ en: "Hello", vi: "Xin chào" })
+ * // Returns: "" (empty string fallback)
+ * ```
+ */
+export declare const createTranslator: <Language extends string>(currentLanguage: Language) => <Translation extends LocalizedString<Language>>(translation: Translation, replace?: Record<string, string | number>) => string;
+/**
+ * Creates a locale-specific translation factory with type safety
+ *
+ * This function returns a set of utilities for working with translations in a specific
+ * set of languages. It provides type-safe translation definitions, hooks, and functions
+ * that are bound to your language configuration.
+ *
+ * @template Languages - Union type of supported language strings
+ * @returns Object containing translation utilities for the specified languages
+ *
+ * @example
+ * ```typescript
+ * // Define your supported languages
+ * type AppLanguages = 'en' | 'vi' | 'fr'
+ *
+ * // Create locale-specific utilities
+ * const { assertTranslation, createTranslatorHook, createTranslator } = defineLocale<AppLanguages>()
+ *
+ * // Use assertTranslation for type-safe translation definitions
+ * const translations = assertTranslation({
+ *   welcome: { en: "Welcome", vi: "Chào mừng", fr: "Bienvenue" },
+ *   goodbye: { en: "Goodbye", vi: "Tạm biệt", fr: "Au revoir" }
+ * })
+ *
+ * // Create a translator for a specific language
+ * const t = createTranslator('en')
+ * console.log(t(translations.welcome)) // "Welcome"
+ * ```
+ */
+export declare const defineLocale: <Languages extends string>() => {
+    assertTranslation: <T extends Record<string, LocalizedString<Languages> | TranslationNamespace<Languages>>>(translation: T) => TDeepReadonly<T>;
+    createTranslatorHook: <R extends Record<string, LocalizedString<Languages> | TranslationNamespace<Languages>>>({ translation, usePreferredLanguage }: {
+        translation: R;
+        usePreferredLanguage: () => Languages;
+    }) => {
+        useTranslator: {
+            (): {
+                t: ReturnType<typeof createTranslator>;
+                d: TDeepReadonly<R>;
+                language: Languages;
+            };
+            <S>(selector: (dict: TDeepReadonly<R>) => S): {
+                t: ReturnType<typeof createTranslator>;
+                d: TDeepReadonly<S>;
+                language: Languages;
+            };
+            <K extends keyof R>(key: K): {
+                t: ReturnType<typeof createTranslator>;
+                d: TDeepReadonly<R[K]>;
+                language: Languages;
+            };
+            <K extends keyof R>(selector: ReadonlyArray<K>): {
+                t: ReturnType<typeof createTranslator>;
+                d: { [P in K]: TDeepReadonly<R[P]>; };
+                language: Languages;
+            };
+            <K extends keyof R>(firstKey: K, ...restKeys: K[]): {
+                t: ReturnType<typeof createTranslator>;
+                d: { [P in K]: TDeepReadonly<R[P]>; };
+                language: Languages;
+            };
+        };
+        createNamespacedTranslatorHook: <K extends keyof R>(namespace: K) => () => {
+            t: <Translation extends LocalizedString<Languages>>(translation: Translation, replace?: Record<string, string | number>) => string;
+            d: TDeepReadonly<R[K]>;
+            language: Languages;
+        };
+    };
+    createTranslator: (currentLanguage: Languages) => <Translation extends LocalizedString<Languages>>(translation: Translation, replace?: Record<string, string | number>) => string;
+};

package/dist/libs/createTranslator.js

@@ -0,0 +1,78 @@
+"use client";
+import { useCallback as T } from "react";
+const f = (i) => (g, a) => {
+  const r = g[i] || "";
+  if (!a)
+    return r;
+  const o = Object.keys(a);
+  if (o.length === 0)
+    return r;
+  const d = Object.fromEntries(
+    o.map((n) => [n.toLowerCase(), a[n]])
+  ), t = new RegExp(o.join("|"), "gi");
+  return r.replace(t, (n) => {
+    const e = d[n.toLowerCase()];
+    return e !== void 0 ? e.toString() : n;
+  });
+}, k = () => {
+  function i(a) {
+    return a;
+  }
+  function g({
+    translation: a,
+    usePreferredLanguage: r
+  }) {
+    function o(t, ...n) {
+      const e = r(), s = T(() => f(e), [e]), u = a;
+      if (t === void 0)
+        return {
+          t: s(),
+          d: u,
+          language: e
+        };
+      if (typeof t == "function") {
+        const c = t(u);
+        return {
+          t: s(),
+          d: c,
+          language: e
+        };
+      } else {
+        const c = Array.isArray(t) ? t : [t, ...n];
+        if (c.length === 1) {
+          const l = c[0];
+          return {
+            t: s(),
+            d: u[l],
+            language: e
+          };
+        }
+        const p = {};
+        return c.forEach((l) => {
+          p[l] = u[l];
+        }), {
+          t: s(),
+          d: p,
+          language: e
+        };
+      }
+    }
+    return { useTranslator: o, createNamespacedTranslatorHook: (t) => () => {
+      const n = r();
+      return {
+        t: T(() => f(n), [n])(),
+        d: a[t],
+        language: n
+      };
+    } };
+  }
+  return {
+    assertTranslation: i,
+    createTranslatorHook: g,
+    createTranslator: f
+  };
+};
+export {
+  f as createTranslator,
+  k as defineLocale
+};