@void/svelte 0.0.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@void/svelte",
+  "version": "0.0.0",
+  "files": [
+    "dist",
+    "src/runtime"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "svelte": "./src/runtime/index.ts",
+      "default": "./src/runtime/index.ts"
+    },
+    "./plugin": {
+      "types": "./dist/plugin.d.mts",
+      "import": "./dist/plugin.mjs"
+    },
+    "./runtime": {
+      "svelte": "./src/runtime/index.ts",
+      "default": "./src/runtime/index.ts"
+    },
+    "./App.svelte": {
+      "svelte": "./src/runtime/App.svelte",
+      "default": "./src/runtime/App.svelte"
+    },
+    "./prefetch": {
+      "default": "./src/runtime/prefetch.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsgo --noEmit"
+  },
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "pathe": "catalog:",
+    "svelte": "^5.55.5",
+    "tsdown": "catalog:",
+    "vite": "catalog:",
+    "void": "workspace:*"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "vite": "catalog:",
+    "void": "workspace:*"
+  }
+}

package/src/runtime/App.svelte

@@ -0,0 +1,81 @@
+<script>
+  import { setContext, onMount, untrack } from "svelte";
+  import { createRouterFacade, idleNavigationState } from "void/pages-client";
+
+  let props = $props();
+
+  // Extract initial values without reactive tracking.
+  // These are one-time snapshots used to seed $state — on the client,
+  // store subscriptions in onMount take over reactivity.
+  const init = untrack(() => ({
+    page: props.page,
+    layouts: props.layouts,
+    pageProps: props.pageProps,
+    shared: props.shared,
+    errors: props.errors,
+    router: props.router,
+    routeUrl: props.routeUrl,
+    navigation: props.navigation,
+    stores: props.stores,
+  }));
+
+  // Local reactive state — initialized from props, updated by stores on client
+  let currentPage = $state(init.page);
+  let currentLayouts = $state(init.layouts);
+  let currentPageProps = $state(init.pageProps);
+  let shared = $state(init.shared);
+  let errors = $state(init.errors);
+  let routeUrl = $state(init.routeUrl || "/");
+  let navigation = $state(init.navigation || idleNavigationState());
+  const router = createRouterFacade(init.router, () => routeUrl);
+
+  // Capitalized alias for dynamic component rendering
+  let Page = $derived(currentPage);
+
+  // Provide context for child components (useShared, useRouter, useForm)
+  setContext("__void_shared", {
+    get value() { return shared; },
+  });
+  setContext("__void_errors", {
+    get value() { return errors; },
+  });
+  setContext("__void_router", router);
+  setContext("__void_navigation", {
+    get value() { return navigation; },
+  });
+
+  // Client mode: subscribe to stores for live updates after hydration.
+  // onMount only runs on the client, not during SSR.
+  onMount(() => {
+    if (!init.stores) {return;}
+    const unsubs = [
+      init.stores.page.subscribe((v) => { currentPage = v; }),
+      init.stores.props.subscribe((v) => { currentPageProps = v; }),
+      init.stores.layouts.subscribe((v) => { currentLayouts = v; }),
+      init.stores.shared.subscribe((v) => { shared = v; }),
+      init.stores.errors.subscribe((v) => { errors = v; }),
+      init.stores.route.subscribe((v) => { routeUrl = v; }),
+      init.stores.navigation.subscribe((v) => { navigation = v; }),
+    ];
+    return () => unsubs.forEach((u) => u());
+  });
+</script>
+
+{#if Page}
+  {#if currentLayouts.length > 0}
+    {@render layoutChain(currentLayouts, 0)}
+  {:else}
+    <Page {...currentPageProps} />
+  {/if}
+{/if}
+
+{#snippet layoutChain(layouts, index)}
+  {#if index < layouts.length}
+    {@const Layout = layouts[index]}
+    <Layout>
+      {@render layoutChain(layouts, index + 1)}
+    </Layout>
+  {:else}
+    <Page {...currentPageProps} />
+  {/if}
+{/snippet}

package/src/runtime/Link.svelte

@@ -0,0 +1,316 @@
+<script lang="ts">
+  import { getContext, onDestroy, onMount, type Snippet } from "svelte";
+  import type { VoidRouter } from "void/pages-client";
+
+  type PrefetchStrategy = "hover" | "click" | "mount" | "visible";
+  type LinkMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+  type NavigateEvent = { preventDefault(): void };
+  type EventHandler<T extends Event> = (event: T) => void;
+  type PrefetchOptions = {
+    cacheFor?: number | string | [string, string];
+    method?: LinkMethod;
+  };
+
+  let {
+    href,
+    method = "GET",
+    data = undefined,
+    preserveScroll = false,
+    preserveState = false,
+    replace = false,
+    reloadDocument = false,
+    viewTransition = undefined,
+    prefetch: prefetchProp = false,
+    cacheFor = undefined,
+    onNavigate = undefined,
+    children,
+    onclick: onclickProp = undefined,
+    onmouseenter: onMouseEnterProp = undefined,
+    onmouseleave: onMouseLeaveProp = undefined,
+    onfocus: onFocusProp = undefined,
+    onmousedown: onMouseDownProp = undefined,
+    ontouchstart: onTouchStartProp = undefined,
+    style = undefined,
+    ...rest
+  }: {
+    href: string;
+    method?: LinkMethod | Lowercase<LinkMethod>;
+    data?: Record<string, unknown>;
+    preserveScroll?: boolean;
+    preserveState?: boolean;
+    replace?: boolean;
+    reloadDocument?: boolean;
+    viewTransition?: boolean;
+    prefetch?: boolean | PrefetchStrategy | Array<PrefetchStrategy>;
+    cacheFor?: number | string | [string, string];
+    onNavigate?: (event: NavigateEvent) => void;
+    children?: Snippet;
+    onclick?: EventHandler<MouseEvent>;
+    onmouseenter?: EventHandler<MouseEvent>;
+    onmouseleave?: EventHandler<MouseEvent>;
+    onfocus?: EventHandler<FocusEvent>;
+    onmousedown?: EventHandler<MouseEvent>;
+    ontouchstart?: EventHandler<TouchEvent>;
+    style?: string;
+    [key: string]: unknown;
+  } = $props();
+
+  const router = getContext<VoidRouter>("__void_router");
+
+  function appendQueryValue(params: URLSearchParams, key: string, value: unknown): boolean {
+    if (value === null || value === undefined) {
+      return false;
+    }
+    if (value instanceof Date) {
+      params.append(key, value.toISOString());
+      return true;
+    }
+    if (Array.isArray(value)) {
+      let appended = false;
+      for (const item of value) {
+        appended = appendQueryValue(params, key, item) || appended;
+      }
+      return appended;
+    }
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      params.append(key, String(value));
+      return true;
+    }
+    throw new Error(
+      `Link: GET data only supports primitive values and arrays. Remove nested data for '${key}'.`,
+    );
+  }
+
+  function mergeDataIntoHref(hrefValue: string, dataValue?: Record<string, unknown>): string {
+    if (!dataValue) {
+      return hrefValue;
+    }
+
+    const hashIndex = hrefValue.indexOf("#");
+    const beforeHash = hashIndex === -1 ? hrefValue : hrefValue.slice(0, hashIndex);
+    const hash = hashIndex === -1 ? "" : hrefValue.slice(hashIndex);
+    const searchIndex = beforeHash.indexOf("?");
+    const path = searchIndex === -1 ? beforeHash : beforeHash.slice(0, searchIndex);
+    const search = searchIndex === -1 ? "" : beforeHash.slice(searchIndex + 1);
+    const params = new URLSearchParams(search);
+    let appended = false;
+
+    for (const [key, value] of Object.entries(dataValue)) {
+      appended = appendQueryValue(params, key, value) || appended;
+    }
+
+    if (!appended) {
+      return hrefValue;
+    }
+
+    const query = params.toString();
+    return `${path}${query ? `?${query}` : ""}${hash}`;
+  }
+
+  function hasPrefetch(prefetch: boolean | PrefetchStrategy | Array<PrefetchStrategy>): boolean {
+    return prefetch !== false;
+  }
+
+  function isModifiedEvent(e: MouseEvent): boolean {
+    const target = (e.currentTarget as HTMLElement).getAttribute("target");
+    return (
+      (target !== null && target !== "_self") ||
+      e.ctrlKey ||
+      e.metaKey ||
+      e.shiftKey ||
+      e.altKey ||
+      e.button !== 0
+    );
+  }
+
+  function getStrategies(): Array<PrefetchStrategy> {
+    if (hasPrefetch(prefetchProp) && !isGet) {
+      throw new Error(
+        'Link: prefetch only supports GET links. Remove `prefetch` or use method="GET".',
+      );
+    }
+    if (reloadDocument && !isGet) {
+      throw new Error("Link: reloadDocument only supports GET links.");
+    }
+    if (prefetchProp === false || reloadDocument) {
+      return [];
+    }
+    if (prefetchProp === true) {
+      return ["hover"];
+    }
+    if (typeof prefetchProp === "string") {
+      return [prefetchProp];
+    }
+    return prefetchProp;
+  }
+
+  function doPrefetch() {
+    if (!router?.prefetch) {
+      return;
+    }
+    const current = window.location.pathname + window.location.search;
+    if (hrefWithData === current) {
+      return;
+    }
+    const options: PrefetchOptions = {};
+    if (cacheFor !== undefined) {
+      options.cacheFor = cacheFor;
+    }
+    if (normalizedMethod) {
+      options.method = normalizedMethod;
+    }
+    router.prefetch(hrefWithData, options);
+  }
+
+  function onClick(e: MouseEvent) {
+    onclickProp?.(e);
+    if (reloadDocument || !router || e.defaultPrevented || isModifiedEvent(e)) {
+      return;
+    }
+    if ((e.currentTarget as HTMLElement).hasAttribute("download")) {
+      return;
+    }
+    const url = new URL(hrefWithData, window.location.origin);
+    if (url.origin !== window.location.origin) {
+      return;
+    }
+
+    let navigatePrevented = false;
+    onNavigate?.({
+      preventDefault() {
+        navigatePrevented = true;
+      },
+    });
+    if (navigatePrevented) {
+      e.preventDefault();
+      return;
+    }
+
+    e.preventDefault();
+    router.visit(hrefWithData, {
+      method: normalizedMethod,
+      data: isGet ? undefined : data,
+      preserveScroll,
+      preserveState,
+      replace,
+      viewTransition,
+    });
+  }
+
+  let hoverTimer: ReturnType<typeof setTimeout> | null = null;
+  let observer: IntersectionObserver | null = null;
+  let el = $state<HTMLElement | null>(null);
+
+  function onMouseEnter(e: MouseEvent) {
+    onMouseEnterProp?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (hoverTimer) {
+      clearTimeout(hoverTimer);
+    }
+    hoverTimer = setTimeout(doPrefetch, router?._hoverDelay ?? 75);
+  }
+
+  function onMouseLeave(e: MouseEvent) {
+    onMouseLeaveProp?.(e);
+    if (hoverTimer) {
+      clearTimeout(hoverTimer);
+      hoverTimer = null;
+    }
+  }
+
+  function onFocus(e: FocusEvent) {
+    onFocusProp?.(e);
+    if (!e.defaultPrevented) {
+      doPrefetch();
+    }
+  }
+
+  function onMouseDown(e: MouseEvent) {
+    onMouseDownProp?.(e);
+    if (!e.defaultPrevented) {
+      doPrefetch();
+    }
+  }
+
+  function onTouchStart(e: TouchEvent) {
+    onTouchStartProp?.(e);
+    if (!e.defaultPrevented) {
+      doPrefetch();
+    }
+  }
+
+  onMount(() => {
+    if (strategies.includes("mount")) {
+      doPrefetch();
+    }
+    if (strategies.includes("visible") && el) {
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (entries.some((e) => e.isIntersecting)) {
+            doPrefetch();
+            observer?.disconnect();
+            observer = null;
+          }
+        },
+        { rootMargin: "0px" },
+      );
+      observer.observe(el);
+    }
+  });
+
+  onDestroy(() => {
+    if (hoverTimer) {
+      clearTimeout(hoverTimer);
+    }
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  });
+
+  const normalizedMethod = $derived(method.toUpperCase() as LinkMethod);
+  const isGet = $derived(normalizedMethod === "GET");
+  const hrefWithData = $derived(isGet ? mergeDataIntoHref(href, data) : href);
+  const strategies = $derived(getStrategies());
+  const resolvedStyle = $derived(
+    style ? `touch-action: manipulation; ${style}` : "touch-action: manipulation",
+  );
+</script>
+
+{#if isGet}
+  <a
+    bind:this={el}
+    href={hrefWithData}
+    {...rest}
+    style={resolvedStyle}
+    onclick={onClick}
+    onmouseenter={strategies.includes("hover") ? onMouseEnter : onMouseEnterProp}
+    onmouseleave={strategies.includes("hover") ? onMouseLeave : onMouseLeaveProp}
+    onfocus={strategies.includes("hover") ? onFocus : onFocusProp}
+    onmousedown={strategies.includes("click") ? onMouseDown : onMouseDownProp}
+    ontouchstart={strategies.includes("hover") || strategies.includes("click")
+      ? onTouchStart
+      : onTouchStartProp}
+  >
+    {@render children()}
+  </a>
+{:else}
+  <button
+    bind:this={el}
+    type="button"
+    {...rest}
+    style={resolvedStyle}
+    onclick={onClick}
+    onmouseenter={strategies.includes("hover") ? onMouseEnter : onMouseEnterProp}
+    onmouseleave={strategies.includes("hover") ? onMouseLeave : onMouseLeaveProp}
+    onfocus={strategies.includes("hover") ? onFocus : onFocusProp}
+    onmousedown={strategies.includes("click") ? onMouseDown : onMouseDownProp}
+    ontouchstart={strategies.includes("hover") || strategies.includes("click")
+      ? onTouchStart
+      : onTouchStartProp}
+  >
+    {@render children()}
+  </button>
+{/if}

package/src/runtime/action.ts

@@ -0,0 +1,50 @@
+import { submitAction, type ActionResult, type VoidRouter } from 'void/pages-client';
+import type { ActionUrl, ResolveActionBody, ResolveActionParams } from 'void/routes';
+
+type ActionMethod = 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+type HasParams<U extends string> = [ResolveActionParams<U>] extends [never] ? false : true;
+
+type ActionOptions<U extends string> = {
+  data?: ResolveActionBody<U>;
+  method?: ActionMethod;
+} & (HasParams<U> extends true ? { params: ResolveActionParams<U> } : { params?: never });
+
+let _router: VoidRouter | null = null;
+
+/** Called during app initialization to store the router instance */
+export function setActionRouter(router: VoidRouter): void {
+  _router = router;
+}
+
+/** Programmatic one-shot page action call with Inertia page update */
+export async function action<U extends ActionUrl & string>(
+  url: U,
+  ...args: HasParams<U> extends true ? [options: ActionOptions<U>] : [options?: ActionOptions<U>]
+): Promise<ActionResult> {
+  if (!_router) {
+    throw new Error('action(): called before router initialization.');
+  }
+
+  const options = args[0] as ActionOptions<U> | undefined;
+  const data = options?.data;
+  const method = options?.method || 'POST';
+
+  let resolvedUrl: string = url;
+  let actionQuery = '';
+
+  const qIdx = resolvedUrl.indexOf('?');
+  if (qIdx !== -1) {
+    actionQuery = resolvedUrl.slice(qIdx);
+    resolvedUrl = resolvedUrl.slice(0, qIdx);
+  }
+
+  if (options?.params) {
+    for (const [key, value] of Object.entries(options.params)) {
+      resolvedUrl = resolvedUrl.replace(`:${key}`, encodeURIComponent(value as string));
+    }
+  }
+
+  resolvedUrl = resolvedUrl + actionQuery;
+  return submitAction(_router, resolvedUrl, { method, data });
+}

package/src/runtime/index.ts

@@ -0,0 +1,8 @@
+export { default as Link } from './Link.svelte';
+export { useRouter } from './use-router.ts';
+export { useShared } from './use-shared.ts';
+export { useForm } from './use-form.svelte.ts';
+export { useNavigation } from './use-navigation.ts';
+export { useIslandForm } from './use-island-form.svelte.ts';
+export { action, setActionRouter } from './action.ts';
+export type { DeferredState as Deferred, InferProps } from 'void';

package/src/runtime/prefetch.ts

@@ -0,0 +1,2 @@
+export { PrefetchCache, parseCacheFor } from 'void/pages-prefetch';
+export type { CacheForResult, CacheForInput, CacheEntry } from 'void/pages-prefetch';