@void/svelte 0.7.3 → 0.7.5

package/README.md

@@ -34,6 +34,7 @@ Main runtime APIs live at `@void/svelte`:
 
 - `Link`
 - `useRouter()`
+- `useParams()`
 - `useNavigation()`
 - `useShared()`
 - `useForm()`

package/dist/plugin.mjs

@@ -387,6 +387,7 @@ export async function renderIslandPage(pageObj, assetTags) {
       pageProps: pageObj.props,
       shared: pageObj.shared || {},
       errors: pageObj.errors || {},
+      params: pageObj.params || {},
       router: null,
       stores: null,
     },
@@ -548,7 +549,8 @@ export async function renderPage(pageObj, assetTags) {
       pageProps: pageObj.props,
       shared: pageObj.shared || {},
       errors: pageObj.errors || {},
-      router: createSsrRouter(pageObj.url || "/"),
+      params: pageObj.params || {},
+      router: createSsrRouter(pageObj.url || "/", pageObj.params || {}),
       routeUrl: pageObj.url || "/",
       navigation: idleNavigationState(),
       stores: null,
@@ -588,7 +590,9 @@ const propsStore = writable({});
 const layoutsStore = writable([]);
 const sharedStore = writable({});
 const errorsStore = writable({});
+const paramsStore = writable({});
 let routeUrl = window.location.pathname + window.location.search + window.location.hash;
+let routeParams = {};
 const routeStore = writable(routeUrl);
 const navigationStore = writable(idleNavigationState());
 
@@ -603,6 +607,8 @@ const { router, initialPageData, initialComponent, initialLayouts, start } =
         propsStore.set(pageData.props);
         sharedStore.update((s) => ({ ...s, ...(pageData.shared || {}) }));
         errorsStore.set(pageData.errors || {});
+        routeParams = pageData.params || {};
+        paramsStore.set(routeParams);
         layoutsStore.set(layouts);
         pageStore.set(comp);
       },
@@ -625,7 +631,7 @@ const { router, initialPageData, initialComponent, initialLayouts, start } =
     },
   });
 
-const reactiveRouter = createRouterFacade(router, () => routeUrl);
+const reactiveRouter = createRouterFacade(router, () => routeUrl, () => routeParams);
 
 setActionRouter(reactiveRouter);
 
@@ -634,6 +640,8 @@ propsStore.set(initialPageData.props);
 layoutsStore.set(initialLayouts);
 sharedStore.set(initialPageData.shared || {});
 errorsStore.set(initialPageData.errors || {});
+routeParams = initialPageData.params || {};
+paramsStore.set(routeParams);
 
 const appEl = document.getElementById("app");
 hydrate(App, {
@@ -644,6 +652,7 @@ hydrate(App, {
     pageProps: initialPageData.props,
     shared: initialPageData.shared || {},
     errors: initialPageData.errors || {},
+    params: initialPageData.params || {},
     router,
     routeUrl,
     navigation: idleNavigationState(),
@@ -653,6 +662,7 @@ hydrate(App, {
       layouts: layoutsStore,
       shared: sharedStore,
       errors: errorsStore,
+      params: paramsStore,
       route: routeStore,
       navigation: navigationStore,
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@void/svelte",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/voidzero-dev/void.git",
@@ -44,12 +44,12 @@
     "svelte": "^5.55.5",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.1.20",
     "vite-plus": "^0.1.20",
-    "void": "0.7.3"
+    "void": "0.7.5"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.1.20",
-    "void": "0.7.3"
+    "void": "0.7.5"
   },
   "scripts": {
     "build": "vp pack",

package/src/runtime/App.svelte

@@ -13,6 +13,7 @@
     pageProps: props.pageProps,
     shared: props.shared,
     errors: props.errors,
+    params: props.params,
     router: props.router,
     routeUrl: props.routeUrl,
     navigation: props.navigation,
@@ -25,9 +26,10 @@
   let currentPageProps = $state(init.pageProps);
   let shared = $state(init.shared);
   let errors = $state(init.errors);
+  let params = $state(init.params || {});
   let routeUrl = $state(init.routeUrl || "/");
   let navigation = $state(init.navigation || idleNavigationState());
-  const router = createRouterFacade(init.router, () => routeUrl);
+  const router = createRouterFacade(init.router, () => routeUrl, () => params);
 
   // Capitalized alias for dynamic component rendering
   let Page = $derived(currentPage);
@@ -39,6 +41,9 @@
   setContext("__void_errors", {
     get value() { return errors; },
   });
+  setContext("__void_params", {
+    get value() { return params; },
+  });
   setContext("__void_router", router);
   setContext("__void_navigation", {
     get value() { return navigation; },
@@ -54,6 +59,7 @@
       init.stores.layouts.subscribe((v) => { currentLayouts = v; }),
       init.stores.shared.subscribe((v) => { shared = v; }),
       init.stores.errors.subscribe((v) => { errors = v; }),
+      init.stores.params.subscribe((v) => { params = v; }),
       init.stores.route.subscribe((v) => { routeUrl = v; }),
       init.stores.navigation.subscribe((v) => { navigation = v; }),
     ];

package/src/runtime/index.ts

@@ -1,5 +1,6 @@
 export { default as Link } from './Link.svelte';
 export { useRouter } from './use-router.ts';
+export { useParams } from './use-params.ts';
 export { useShared } from './use-shared.ts';
 export { useForm } from './use-form.svelte.ts';
 export { useNavigation } from './use-navigation.ts';

package/src/runtime/use-params.ts

@@ -0,0 +1,9 @@
+import { getContext } from 'svelte';
+
+export function useParams<T extends Record<string, string> = Record<string, string>>(): T {
+  const ctx = getContext<{ value: T }>('__void_params');
+  if (!ctx) {
+    throw new Error('useParams(): must be used inside a Void page.');
+  }
+  return ctx.value;
+}