@void/svelte 0.7.4 → 0.7.6

package/README.md

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

package/dist/plugin.mjs

@@ -2,7 +2,7 @@ import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { existsSync, readFileSync, readdirSync } from "node:fs";
 import { normalizePath } from "vite";
 import { generateComponentManifest, resolveEffectiveLayoutChain, resolveStaticPageDataBuildOptions, scanPages } from "void/pages";
-import { ISLANDS_CLIENT_ENTRY_ID, ISLANDS_RENDERER_ID, computePagesNeedingClientJS, configureIslandCssServer, extractCssImports, fileHasCssImports, needsIslandClientBundle, rebuildIslandCssMap, resolveSpecifier, rewriteCssImportForVirtualModule, watchPagesForRescan } from "void/pages-islands-plugin";
+import { ISLANDS_CLIENT_ENTRY_ID, ISLANDS_RENDERER_ID, computePagesNeedingClientJS, extractCssImports, needsIslandClientBundle, resolveSpecifier, rewriteCssImportForVirtualModule, watchPagesForRescan } from "void/pages-islands-plugin";
 //#region ../../node_modules/.pnpm/pathe@2.0.3/node_modules/pathe/dist/shared/pathe.M-eThtNZ.mjs
 const _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
 function normalizeWindowsPath(input = "") {
@@ -153,13 +153,7 @@ function islandsPlugin(pagesDir) {
 	const islandCssFiles = /* @__PURE__ */ new Set();
 	let isDev = false;
 	let viteRoot = "";
-	const islandCssMap = /* @__PURE__ */ new Map();
 	let resolvedConfig = null;
-	/** Rebuild islandCssMap from current file contents (re-runs fileHasCssImports). */
-	function rebuildIslandCssMap$1() {
-		if (!pageScan) return;
-		rebuildIslandCssMap(pageScan, pagesDir, islandCssMap, fileHasCssImports);
-	}
 	function computePagesNeedingClientJS$1() {
 		if (!pageScan) return /* @__PURE__ */ new Set();
 		return computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig);
@@ -173,10 +167,8 @@ function islandsPlugin(pagesDir) {
 			isDev = config.command === "serve";
 		},
 		configureServer(server) {
-			configureIslandCssServer(server, islandCssFiles, viteRoot, rebuildIslandCssMap$1);
 			watchPagesForRescan(server, pagesDir, root, (scan) => {
 				pageScan = scan;
-				rebuildIslandCssMap$1();
 			});
 		},
 		async buildStart() {
@@ -224,7 +216,6 @@ function islandsPlugin(pagesDir) {
 					const layoutChain = resolveEffectiveLayoutChain(page, pageScan.layouts, pageScan.namedLayouts);
 					for (const layout of layoutChain) islandCssFiles.add(normalizePath(resolve(pagesDir, layout.filePath)));
 				}
-				rebuildIslandCssMap$1();
 			}
 		},
 		resolveId: {
@@ -250,7 +241,7 @@ function islandsPlugin(pagesDir) {
 					const mdPlugin = resolvedConfig?.plugins?.find((p) => p.name === "void-md");
 					const mdScriptIds = new Set(mdPlugin?.api?.getClientScripts?.()?.keys() ?? []);
 					const needsJS = computePagesNeedingClientJS$1();
-					return generateIslandRenderer(pageScan, pagesDir, isDev, islandCssMap, viteRoot, mdScriptIds, needsJS);
+					return generateIslandRenderer(pageScan, pagesDir, mdScriptIds, needsJS);
 				}
 				if (id === "\0" + ISLANDS_CLIENT_ENTRY_ID) {
 					if (!pageScan) return "";
@@ -350,13 +341,7 @@ function generateWrapperComponent(id) {
 </div>
 `;
 }
-function generateIslandRenderer(scan, pagesDir, isDev, islandCssMap, viteRoot, mdScriptIds, pagesNeedingClientJS) {
-	let cssMapCode = "";
-	if (isDev && islandCssMap.size > 0) {
-		const cssMapObj = {};
-		for (const [compId, paths] of islandCssMap) cssMapObj[compId] = paths.map((p) => "/" + normalizePath(relative(viteRoot, p)) + ".css");
-		cssMapCode = `const __cssPaths = ${JSON.stringify(cssMapObj)};`;
-	}
+function generateIslandRenderer(scan, pagesDir, mdScriptIds, pagesNeedingClientJS) {
 	const mdScriptIdsCode = `const __mdClientScriptIds = new Set(${JSON.stringify([...mdScriptIds])});`;
 	const needsJSCode = `const __pagesNeedingClientJS = new Set(${JSON.stringify([...pagesNeedingClientJS])});`;
 	return `
@@ -365,7 +350,6 @@ import App from "@void/svelte/App.svelte";
 import { renderHeadToString, renderHtmlAttrs, renderBodyAttrs } from "void/pages-head";
 
 ${generateComponentManifest(scan, pagesDir)}
-${cssMapCode}
 ${mdScriptIdsCode}
 ${needsJSCode}
 
@@ -387,6 +371,7 @@ export async function renderIslandPage(pageObj, assetTags) {
       pageProps: pageObj.props,
       shared: pageObj.shared || {},
       errors: pageObj.errors || {},
+      params: pageObj.params || {},
       router: null,
       stores: null,
     },
@@ -399,7 +384,7 @@ export async function renderIslandPage(pageObj, assetTags) {
 
   return \`<!doctype html>
 <html\${htmlAttrs}>
-<head>\${headHtml}\${typeof __cssPaths !== "undefined" ? (__cssPaths[pageObj.component] || []).map(url => '<link rel="stylesheet" href="' + url + '">').join("\\n") : ""}\${head}\${assetTags.css}\${__pagesNeedingClientJS.has(pageObj.component) ? assetTags.preloads : ""}</head>
+<head>\${headHtml}\${head}\${assetTags.css}\${__pagesNeedingClientJS.has(pageObj.component) ? assetTags.preloads : ""}</head>
 <body\${bodyAttrs}>
   <div id="app"\${__mdScriptAttr}>\${html}</div>
   \${__pagesNeedingClientJS.has(pageObj.component) ? assetTags.body : ""}
@@ -548,7 +533,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 +574,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 +591,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 +615,7 @@ const { router, initialPageData, initialComponent, initialLayouts, start } =
     },
   });
 
-const reactiveRouter = createRouterFacade(router, () => routeUrl);
+const reactiveRouter = createRouterFacade(router, () => routeUrl, () => routeParams);
 
 setActionRouter(reactiveRouter);
 
@@ -634,6 +624,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 +636,7 @@ hydrate(App, {
     pageProps: initialPageData.props,
     shared: initialPageData.shared || {},
     errors: initialPageData.errors || {},
+    params: initialPageData.params || {},
     router,
     routeUrl,
     navigation: idleNavigationState(),
@@ -653,6 +646,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.4",
+  "version": "0.7.6",
   "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.4"
+    "void": "0.7.6"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.1.20",
-    "void": "0.7.4"
+    "void": "0.7.6"
   },
   "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;
+}