@json-render/svelte 0.6.1

package/dist/contexts/ActionProvider.svelte

@@ -0,0 +1,344 @@
+<script module lang="ts">
+  import { getContext } from "svelte";
+  import type {
+    ActionBinding,
+    ActionConfirm,
+    ActionHandler,
+    ResolvedAction,
+  } from "@json-render/core";
+
+  const ACTION_KEY = Symbol.for("json-render-actions");
+
+  /**
+   * Pending confirmation state
+   */
+  export interface PendingConfirmation {
+    action: ResolvedAction;
+    handler: ActionHandler;
+    resolve: () => void;
+    reject: () => void;
+  }
+
+  export interface CurrentValue<T> {
+    readonly current: T;
+  }
+
+  /**
+   * Action context value
+   */
+  export interface ActionContext {
+    /** Registered action handlers */
+    handlers: Record<string, ActionHandler>;
+    /** Currently loading action names */
+    loadingActions: Set<string>;
+    /** Pending confirmation dialog */
+    pendingConfirmation: PendingConfirmation | null;
+    /** Execute an action binding */
+    execute: (binding: ActionBinding) => Promise<void>;
+    /** Confirm the pending action */
+    confirm: () => void;
+    /** Cancel the pending action */
+    cancel: () => void;
+    /** Register an action handler */
+    registerHandler: (name: string, handler: ActionHandler) => void;
+  }
+
+  /**
+   * Get the action context from component tree
+   */
+  export function getActionContext(): ActionContext {
+    const ctx = getContext<ActionContext>(ACTION_KEY);
+    if (!ctx) {
+      throw new Error(
+        "getActionContext must be called within an ActionProvider",
+      );
+    }
+    return ctx;
+  }
+
+  /**
+   * Convenience helper to get a registered action handler by name
+   */
+  export function getAction(
+    name: string,
+  ): CurrentValue<ActionHandler | undefined> {
+    const context = getActionContext();
+    return {
+      get current() {
+        return context.handlers[name];
+      },
+    };
+  }
+
+  /**
+   * Props for ConfirmDialog component
+   */
+  export interface ConfirmDialogProps {
+    /** The confirmation config */
+    confirm: ActionConfirm;
+    /** Called when confirmed */
+    onConfirm: () => void;
+    /** Called when cancelled */
+    onCancel: () => void;
+  }
+
+  /**
+   * Generate a unique ID for use with the "$id" token.
+   */
+  let idCounter = 0;
+  function generateUniqueId(): string {
+    idCounter += 1;
+    return `${Date.now()}-${idCounter}`;
+  }
+
+  /**
+   * Deep-resolve dynamic value references within an object.
+   */
+  function deepResolveValue(
+    value: unknown,
+    get: (path: string) => unknown,
+  ): unknown {
+    if (value === null || value === undefined) return value;
+
+    if (value === "$id") {
+      return generateUniqueId();
+    }
+
+    if (typeof value === "object" && !Array.isArray(value)) {
+      const obj = value as Record<string, unknown>;
+      const keys = Object.keys(obj);
+
+      if (keys.length === 1 && typeof obj.$state === "string") {
+        return get(obj.$state as string);
+      }
+
+      if (keys.length === 1 && "$id" in obj) {
+        return generateUniqueId();
+      }
+    }
+
+    if (Array.isArray(value)) {
+      return value.map((item) => deepResolveValue(item, get));
+    }
+
+    if (typeof value === "object") {
+      const resolved: Record<string, unknown> = {};
+      for (const [key, val] of Object.entries(
+        value as Record<string, unknown>,
+      )) {
+        resolved[key] = deepResolveValue(val, get);
+      }
+      return resolved;
+    }
+
+    return value;
+  }
+</script>
+
+<script lang="ts">
+  import { setContext, type Snippet } from "svelte";
+  import {
+    resolveAction,
+    executeAction,
+    type ActionBinding as CoreActionBinding,
+    type ActionHandler as CoreActionHandler,
+  } from "@json-render/core";
+  import { getStateContext } from "./StateProvider.svelte";
+  import { getOptionalValidationContext } from "./ValidationProvider.svelte";
+  import { SvelteSet } from "svelte/reactivity";
+
+  interface Props {
+    handlers?: Record<string, CoreActionHandler>;
+    navigate?: (path: string) => void;
+    children?: Snippet;
+  }
+
+  let { handlers = {}, navigate, children }: Props = $props();
+
+  const stateCtx = getStateContext();
+  const validation = getOptionalValidationContext();
+
+  let registeredHandlers = $state.raw<Record<string, CoreActionHandler>>({});
+  let loadingActions = new SvelteSet<string>();
+  let pendingConfirmation = $state.raw<PendingConfirmation | null>(null);
+
+  const execute = async (binding: CoreActionBinding): Promise<void> => {
+    const resolved = resolveAction(binding, stateCtx.getSnapshot());
+
+    if (resolved.action === "setState" && resolved.params) {
+      const statePath = resolved.params.statePath as string;
+      const value = resolved.params.value;
+      if (statePath) {
+        stateCtx.set(statePath, value);
+      }
+      return;
+    }
+
+    if (resolved.action === "pushState" && resolved.params) {
+      const statePath = resolved.params.statePath as string;
+      const rawValue = resolved.params.value;
+      if (statePath) {
+        const resolvedValue = deepResolveValue(rawValue, stateCtx.get);
+        const arr = (stateCtx.get(statePath) as unknown[] | undefined) ?? [];
+        stateCtx.set(statePath, [...arr, resolvedValue]);
+        const clearStatePath = resolved.params.clearStatePath as
+          | string
+          | undefined;
+        if (clearStatePath) {
+          stateCtx.set(clearStatePath, "");
+        }
+      }
+      return;
+    }
+
+    if (resolved.action === "removeState" && resolved.params) {
+      const statePath = resolved.params.statePath as string;
+      const index = resolved.params.index as number;
+      if (statePath !== undefined && index !== undefined) {
+        const arr = (stateCtx.get(statePath) as unknown[] | undefined) ?? [];
+        stateCtx.set(
+          statePath,
+          arr.filter((_, i) => i !== index),
+        );
+      }
+      return;
+    }
+
+    if (resolved.action === "validateForm") {
+      if (!validation?.validateAll) {
+        console.warn(
+          "validateForm action was dispatched but no ValidationProvider is connected. " +
+            "Ensure ValidationProvider is rendered inside the provider tree.",
+        );
+        return;
+      }
+      const valid = validation.validateAll();
+      const errors: Record<string, string[]> = {};
+      for (const [path, fieldState] of Object.entries(validation.fieldStates)) {
+        if (fieldState.result && !fieldState.result.valid) {
+          errors[path] = fieldState.result.errors;
+        }
+      }
+      const statePath =
+        (resolved.params?.statePath as string) || "/formValidation";
+      stateCtx.set(statePath, { valid, errors });
+      return;
+    }
+
+    if (resolved.action === "push" && resolved.params) {
+      const screen = resolved.params.screen as string;
+      if (screen) {
+        const currentScreen = stateCtx.get("/currentScreen") as
+          | string
+          | undefined;
+        const navStack =
+          (stateCtx.get("/navStack") as string[] | undefined) ?? [];
+        if (currentScreen) {
+          stateCtx.set("/navStack", [...navStack, currentScreen]);
+        } else {
+          stateCtx.set("/navStack", [...navStack, ""]);
+        }
+        stateCtx.set("/currentScreen", screen);
+      }
+      return;
+    }
+
+    if (resolved.action === "pop") {
+      const navStack =
+        (stateCtx.get("/navStack") as string[] | undefined) ?? [];
+      if (navStack.length > 0) {
+        const previousScreen = navStack[navStack.length - 1];
+        stateCtx.set("/navStack", navStack.slice(0, -1));
+        if (previousScreen) {
+          stateCtx.set("/currentScreen", previousScreen);
+        } else {
+          stateCtx.set("/currentScreen", undefined);
+        }
+      }
+      return;
+    }
+
+    const handler =
+      registeredHandlers[resolved.action] ?? handlers[resolved.action];
+
+    if (!handler) {
+      console.warn(`No handler registered for action: ${resolved.action}`);
+      return;
+    }
+
+    if (resolved.confirm) {
+      return new Promise<void>((resolve, reject) => {
+        pendingConfirmation = {
+          action: resolved,
+          handler,
+          resolve: () => {
+            pendingConfirmation = null;
+            resolve();
+          },
+          reject: () => {
+            pendingConfirmation = null;
+            reject(new Error("Action cancelled"));
+          },
+        };
+      }).then(async () => {
+        loadingActions.add(resolved.action);
+        try {
+          await executeAction({
+            action: resolved,
+            handler,
+            setState: stateCtx.set,
+            navigate,
+            executeAction: async (name) => {
+              const subBinding: CoreActionBinding = { action: name };
+              await execute(subBinding);
+            },
+          });
+        } finally {
+          loadingActions.delete(resolved.action);
+        }
+      });
+    }
+
+    loadingActions.add(resolved.action);
+    try {
+      await executeAction({
+        action: resolved,
+        handler,
+        setState: stateCtx.set,
+        navigate,
+        executeAction: async (name) => {
+          const subBinding: CoreActionBinding = { action: name };
+          await execute(subBinding);
+        },
+      });
+    } finally {
+      loadingActions.delete(resolved.action);
+    }
+  };
+
+  const ctx: ActionContext = {
+    get handlers() {
+      return { ...handlers, ...registeredHandlers };
+    },
+    get loadingActions() {
+      return loadingActions;
+    },
+    get pendingConfirmation() {
+      return pendingConfirmation;
+    },
+    execute,
+    confirm: () => {
+      pendingConfirmation?.resolve();
+    },
+    cancel: () => {
+      pendingConfirmation?.reject();
+    },
+    registerHandler: (name: string, handler: CoreActionHandler) => {
+      registeredHandlers = { ...registeredHandlers, [name]: handler };
+    },
+  };
+
+  setContext(ACTION_KEY, ctx);
+</script>
+
+{@render children?.()}

package/dist/contexts/ActionProvider.svelte.d.ts

@@ -0,0 +1,62 @@
+import type { ActionBinding, ActionConfirm, ActionHandler, ResolvedAction } from "@json-render/core";
+/**
+ * Pending confirmation state
+ */
+export interface PendingConfirmation {
+    action: ResolvedAction;
+    handler: ActionHandler;
+    resolve: () => void;
+    reject: () => void;
+}
+export interface CurrentValue<T> {
+    readonly current: T;
+}
+/**
+ * Action context value
+ */
+export interface ActionContext {
+    /** Registered action handlers */
+    handlers: Record<string, ActionHandler>;
+    /** Currently loading action names */
+    loadingActions: Set<string>;
+    /** Pending confirmation dialog */
+    pendingConfirmation: PendingConfirmation | null;
+    /** Execute an action binding */
+    execute: (binding: ActionBinding) => Promise<void>;
+    /** Confirm the pending action */
+    confirm: () => void;
+    /** Cancel the pending action */
+    cancel: () => void;
+    /** Register an action handler */
+    registerHandler: (name: string, handler: ActionHandler) => void;
+}
+/**
+ * Get the action context from component tree
+ */
+export declare function getActionContext(): ActionContext;
+/**
+ * Convenience helper to get a registered action handler by name
+ */
+export declare function getAction(name: string): CurrentValue<ActionHandler | undefined>;
+/**
+ * Props for ConfirmDialog component
+ */
+export interface ConfirmDialogProps {
+    /** The confirmation config */
+    confirm: ActionConfirm;
+    /** Called when confirmed */
+    onConfirm: () => void;
+    /** Called when cancelled */
+    onCancel: () => void;
+}
+import { type Snippet } from "svelte";
+import { type ActionHandler as CoreActionHandler } from "@json-render/core";
+interface Props {
+    handlers?: Record<string, CoreActionHandler>;
+    navigate?: (path: string) => void;
+    children?: Snippet;
+}
+declare const ActionProvider: import("svelte").Component<Props, {}, "">;
+type ActionProvider = ReturnType<typeof ActionProvider>;
+export default ActionProvider;
+//# sourceMappingURL=ActionProvider.svelte.d.ts.map

package/dist/contexts/ActionProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/contexts/ActionProvider.svelte.ts"],"names":[],"mappings":"AAIE,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,aAAa,EACb,cAAc,EACf,MAAM,mBAAmB,CAAC;AAI3B;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACxC,qCAAqC;IACrC,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,kCAAkC;IAClC,mBAAmB,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAChD,gCAAgC;IAChC,OAAO,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,iCAAiC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,aAAa,CAQhD;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,GACX,YAAY,CAAC,aAAa,GAAG,SAAS,CAAC,CAOzC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,OAAO,EAAE,aAAa,CAAC;IACvB,4BAA4B;IAC5B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,4BAA4B;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAuDH,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAIH,KAAK,aAAa,IAAI,iBAAiB,EACxC,MAAM,mBAAmB,CAAC;AAM3B,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2MH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/contexts/FunctionsContextProvider.svelte

@@ -0,0 +1,44 @@
+<script module lang="ts">
+  import { getContext } from "svelte";
+  import type { ComputedFunction } from "@json-render/core";
+
+  const FUNCTIONS_KEY = Symbol.for("json-render-functions");
+  const EMPTY_FUNCTIONS: Record<string, ComputedFunction> = {};
+
+  /**
+   * Functions context value
+   */
+  export interface FunctionsContext {
+    /** Named functions for `$computed` expressions */
+    functions: Record<string, ComputedFunction>;
+  }
+
+  /**
+   * Get the functions context from component tree
+   */
+  export function getFunctions(): Record<string, ComputedFunction> {
+    const ctx = getContext<FunctionsContext>(FUNCTIONS_KEY);
+    return ctx?.functions ?? EMPTY_FUNCTIONS;
+  }
+</script>
+
+<script lang="ts">
+  import { setContext, type Snippet } from "svelte";
+
+  interface Props {
+    functions?: Record<string, ComputedFunction>;
+    children?: Snippet;
+  }
+
+  let { functions, children }: Props = $props();
+
+  const ctx: FunctionsContext = {
+    get functions() {
+      return functions ?? EMPTY_FUNCTIONS;
+    },
+  };
+
+  setContext(FUNCTIONS_KEY, ctx);
+</script>
+
+{@render children?.()}

package/dist/contexts/FunctionsContextProvider.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ComputedFunction } from "@json-render/core";
+/**
+ * Functions context value
+ */
+export interface FunctionsContext {
+    /** Named functions for `$computed` expressions */
+    functions: Record<string, ComputedFunction>;
+}
+/**
+ * Get the functions context from component tree
+ */
+export declare function getFunctions(): Record<string, ComputedFunction>;
+import { type Snippet } from "svelte";
+interface Props {
+    functions?: Record<string, ComputedFunction>;
+    children?: Snippet;
+}
+declare const FunctionsContextProvider: import("svelte").Component<Props, {}, "">;
+type FunctionsContextProvider = ReturnType<typeof FunctionsContextProvider>;
+export default FunctionsContextProvider;
+//# sourceMappingURL=FunctionsContextProvider.svelte.d.ts.map

package/dist/contexts/FunctionsContextProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunctionsContextProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/contexts/FunctionsContextProvider.svelte.ts"],"names":[],"mappings":"AAIE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAK1D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAG/D;AAGH,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGhD,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsBH,QAAA,MAAM,wBAAwB,2CAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/contexts/RepeatScopeProvider.svelte

@@ -0,0 +1,49 @@
+<script module lang="ts">
+  import { getContext, setContext, type Snippet } from "svelte";
+
+  const REPEAT_SCOPE_KEY = Symbol("json-render-repeat-scope");
+
+  /**
+   * Repeat scope value provided to child elements inside a repeated element.
+   */
+  export interface RepeatScopeValue {
+    /** The current array item object */
+    item: unknown;
+    /** Index of the current item in the array */
+    index: number;
+    /** Absolute state path to the current array item (e.g. "/todos/0") */
+    basePath: string;
+  }
+
+  /**
+   * Get the current repeat scope (or null if not inside a repeated element)
+   */
+  export function getRepeatScope(): RepeatScopeValue | null {
+    return getContext<RepeatScopeValue | null>(REPEAT_SCOPE_KEY) ?? null;
+  }
+</script>
+
+<script lang="ts">
+  interface Props {
+    item: unknown;
+    index: number;
+    basePath: string;
+    children: Snippet;
+  }
+
+  let { item, index, basePath, children }: Props = $props();
+
+  setContext(REPEAT_SCOPE_KEY, {
+    get item() {
+      return item;
+    },
+    get index() {
+      return index;
+    },
+    get basePath() {
+      return basePath;
+    },
+  });
+</script>
+
+{@render children()}

package/dist/contexts/RepeatScopeProvider.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Snippet } from "svelte";
+/**
+ * Repeat scope value provided to child elements inside a repeated element.
+ */
+export interface RepeatScopeValue {
+    /** The current array item object */
+    item: unknown;
+    /** Index of the current item in the array */
+    index: number;
+    /** Absolute state path to the current array item (e.g. "/todos/0") */
+    basePath: string;
+}
+/**
+ * Get the current repeat scope (or null if not inside a repeated element)
+ */
+export declare function getRepeatScope(): RepeatScopeValue | null;
+interface Props {
+    item: unknown;
+    index: number;
+    basePath: string;
+    children: Snippet;
+}
+declare const RepeatScopeProvider: import("svelte").Component<Props, {}, "">;
+type RepeatScopeProvider = ReturnType<typeof RepeatScopeProvider>;
+export default RepeatScopeProvider;
+//# sourceMappingURL=RepeatScopeProvider.svelte.d.ts.map

package/dist/contexts/RepeatScopeProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatScopeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/contexts/RepeatScopeProvider.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAI9D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,gBAAgB,GAAG,IAAI,CAExD;AAED,UAAU,KAAK;IACb,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAyBH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}