wirejs-scripts 3.0.190 → 3.0.191

package/README.md

@@ -103,12 +103,12 @@ export async function generate(context: Context) {
 	</html>`;
 }
 
-export function hydrate() {
+export function onload() {
 	wireHydrate('counter', () => Counter());
 }
 ```
 
-`generate()` is used for the server-side render. The exported `hydrate()` function is used as the browser entrypoint. This lets a module share selected components/functions between server generation and the client bundle while keeping server-only code inside `generate()` or behind server-only imports.
+`generate()` is used for the server-side render. The exported `onload()` function is used as the browser entrypoint. This lets a module share selected components/functions between server generation and the client bundle while keeping server-only code inside `generate()` or behind server-only imports.
 
 If `generate()` returns a DOM/document-like value, hosting serializes it as HTML. If it returns a string or other non-DOM body, hosting sends that body with a content type inferred from the requested extension when possible, unless `context.responseHeaders['content-type']` overrides it.
 
@@ -116,6 +116,7 @@ Routing notes:
 
 - Request paths are matched against compiled `.js` files under `dist/ssr/`.
 - `%` in an SSR filename acts as a wildcard pattern.
+- Wildcard SSR routes use a canonical encoded client script path such as `/wild/%25.client.js`, so all instances of the route share one cacheable browser bundle.
 - Direct `/ssr` and `/ssr/*` static-file access is blocked; SSR modules are executable server code, not public assets.
 - If SSR code changes `context.location`, hosting can emit a redirect-style response when no explicit `responseCode` is set.
 - Pre-extension filenames work for SSR non-HTML responses: `src/ssr/feed.xml.ts` compiles to a handler for `/feed.xml`; `src/ssr/data.json.ts` handles `/data.json`.
@@ -126,7 +127,7 @@ SSR/SSG pages may register browser-side hydration through the DOM package used b
 
 For SSR, the compiled server module lives under `dist/ssr/*.js` and the browser bundle is served through the corresponding `*.client.js` path when hydration is needed.
 
-For SSG HTML outputs, `wirejs-scripts` probes for an exported `hydrate` path and emits a browser IIFE bundle only when appropriate. If no hydrate export exists, it emits a no-op client bundle rather than failing the whole SSG build. Non-HTML SSG outputs do not receive sibling browser JS bundles.
+For SSG HTML outputs, `wirejs-scripts` emits a browser IIFE bundle for the page module. The generated HTML references that bundle only when the server/build module exports `onload()`. Non-HTML SSG outputs do not receive sibling browser JS bundles.
 
 A useful pattern is to split code by what can safely run in both places:
 
@@ -141,12 +142,12 @@ export async function generate(context) {
 }
 
 // browser-only entrypoint: attaches behavior to generated markup
-export function hydrate() {
+export function onload() {
 	wireHydrate('todos', () => TodoList());
 }
 ```
 
-Because the browser bundle starts from the exported `hydrate()` entrypoint, you can avoid pulling server-only dependencies into the client by keeping them out of the functions imported/called by `hydrate()`.
+Because the browser bundle starts from the exported `onload()` entrypoint, you can avoid pulling server-only dependencies into the client by keeping them out of the functions imported/called by `onload()`.
 
 ## SSG handling
 
@@ -161,7 +162,7 @@ export async function generate() {
 }
 ```
 
-SSG uses the same shared-component pattern as SSR. For static HTML with browser behavior, export both `generate()` and `hydrate()` from the page module. The server/build side calls `generate()` once, and the emitted client bundle calls `hydrate()` in the browser.
+SSG uses the same shared-component pattern as SSR. For static HTML with browser behavior, export an `onload()` function from the page module and call your DOM library's hydration registration there. The server/build side calls `generate()` once, and the emitted client bundle imports the page module and calls exported `onload()` in the browser.
 
 ### Non-HTML SSG outputs
 

package/bin.js

@@ -299,6 +299,7 @@ async function compile(watch = false) {
 	const staticDir = path.join(CWD, 'static');
 	const distDir = path.join(CWD, 'dist');
 	const ssrOutDir = path.join(distDir, 'ssr');
+	const preSsrClientWrapperDir = path.join(CWD, 'pre-dist', '.wirejs', 'ssr-client-wrappers');
 
 	/**
 	 * Find all .ts files recursively in a directory.
@@ -326,6 +327,25 @@ async function compile(watch = false) {
 		return explicitExt || 'html';
 	}
 
+	async function createPageClientWrapper(sourceFile, sourceRoot, wrapperRoot) {
+		const relativeToSource = path.relative(sourceRoot, sourceFile);
+		const wrapperPath = path.join(wrapperRoot, relativeToSource);
+		await fs.promises.mkdir(path.dirname(wrapperPath), { recursive: true });
+
+		const rawImportPath = path.relative(path.dirname(wrapperPath), sourceFile).replace(/\\/g, '/');
+		const importPath = rawImportPath.startsWith('.') ? rawImportPath : `./${rawImportPath}`;
+		const wrapperSource = [
+			`import * as page from ${JSON.stringify(importPath)};`,
+			'',
+			'if (typeof page["onload"] === "function") {',
+			'\tpage["onload"]();',
+			'}',
+		].join('\n');
+
+		await fs.promises.writeFile(wrapperPath, wrapperSource, 'utf8');
+		return wrapperPath;
+	}
+
 	/**
 	 * Build SSG files and write the generated HTML to dist/.
 	 * Also produces browser-compatible IIFE bundles at dist/*.js so that
@@ -340,33 +360,6 @@ async function compile(watch = false) {
 		const preDist = path.join(CWD, 'pre-dist');
 		const configuredSsgExternals = await resolveSsgExternals();
 
-		async function createSsgHydrateWrapper(ssgFile, withHydrateImport) {
-			const relativeToSsg = path.relative(ssgDir, ssgFile);
-			const wrapperPath = path.join(preSsgHydrateWrapperDir, relativeToSsg);
-			await fs.promises.mkdir(path.dirname(wrapperPath), { recursive: true });
-
-			const rawImportPath = path.relative(path.dirname(wrapperPath), ssgFile).replace(/\\/g, '/');
-			const importPath = rawImportPath.startsWith('.') ? rawImportPath : `./${rawImportPath}`;
-			const wrapperSource = withHydrateImport
-				? [
-					`import { hydrate } from ${JSON.stringify(importPath)};`,
-					'',
-					'if (typeof hydrate === "function") {',
-					'\thydrate();',
-					'}',
-				].join('\n')
-				: '// No hydrate export in source; this client bundle is intentionally a no-op.\n';
-
-			await fs.promises.writeFile(wrapperPath, wrapperSource, 'utf8');
-			return wrapperPath;
-		}
-
-		function isMissingHydrateExportError(error) {
-			const messages = [error?.message ?? '', ...((error?.errors ?? []).map(e => e?.text ?? ''))]
-				.join('\n')
-				.toLowerCase();
-			return messages.includes('no matching export') && messages.includes('hydrate');
-		}
 
 		async function buildSsgHydrationIife(entryPoint, browserExternal) {
 			await esbuild.build({
@@ -380,9 +373,9 @@ async function compile(watch = false) {
 				conditions: ['wirejs:client'],
 				external: browserExternal,
 				sourcemap: true,
-				// This path intentionally probes named hydrate exports and falls back to no-op.
-				// Keep probe failures out of stdout/stderr and handle them in catch logic.
-				logLevel: 'silent',
+				logOverride: {
+					'import-is-undefined': 'silent',
+				},
 			});
 		}
 
@@ -411,14 +404,8 @@ async function compile(watch = false) {
 			// 2. Build browser-side bundles only for HTML SSG outputs.
 			//    Non-HTML artifacts should not emit a sibling .js bundle.
 			if (outputExtension === 'html') {
-				let hydrateWrapperFile = await createSsgHydrateWrapper(ssgFile, true);
-				try {
-					await buildSsgHydrationIife(hydrateWrapperFile, browserExternal);
-				} catch (error) {
-					if (!isMissingHydrateExportError(error)) throw error;
-					hydrateWrapperFile = await createSsgHydrateWrapper(ssgFile, false);
-					await buildSsgHydrationIife(hydrateWrapperFile, browserExternal);
-				}
+				const clientWrapperFile = await createPageClientWrapper(ssgFile, ssgDir, preSsgHydrateWrapperDir);
+				await buildSsgHydrationIife(clientWrapperFile, browserExternal);
 			}
 		}
 
@@ -513,13 +500,33 @@ async function compile(watch = false) {
 				outbase: ssrDir,
 				entryNames: '[dir]/[name]',
 				bundle: true,
-				platform: 'browser',
+				platform: 'node',
 				format: 'esm',
 				conditions: ['wirejs:client'],
 				sourcemap: true,
 			});
 			await ssrCtx.rebuild();
 			ssrCtx.watch();
+
+			const ssrClientWrapperFiles = await Promise.all(ssrFiles.map(ssrFile =>
+				createPageClientWrapper(ssrFile, ssrDir, preSsrClientWrapperDir)
+			));
+			const ssrClientCtx = await esbuild.context({
+				entryPoints: ssrClientWrapperFiles,
+				outdir: ssrOutDir,
+				outbase: preSsrClientWrapperDir,
+				entryNames: '[dir]/[name].client',
+				bundle: true,
+				platform: 'browser',
+				format: 'esm',
+				conditions: ['wirejs:client'],
+				sourcemap: true,
+				logOverride: {
+					'import-is-undefined': 'silent',
+				},
+			});
+			await ssrClientCtx.rebuild();
+			ssrClientCtx.watch();
 		}
 
 		// SSG watch (debounced + queued to avoid overlapping rebuilds)
@@ -656,16 +663,22 @@ async function compile(watch = false) {
 				// preserveSymlinks: true,
 			});
 			// client bundle
+			const ssrClientWrapperFiles = await Promise.all(ssrFiles.map(ssrFile =>
+				createPageClientWrapper(ssrFile, ssrDir, preSsrClientWrapperDir)
+			));
 			await esbuild.build({
-				entryPoints: ssrFiles,
+				entryPoints: ssrClientWrapperFiles,
 				outdir: ssrOutDir,
-				outbase: ssrDir,
+				outbase: preSsrClientWrapperDir,
 				entryNames: '[dir]/[name].client',
 				bundle: true,
 				platform: 'browser',
-				format: 'iife',
+				format: 'esm',
 				conditions: ['wirejs:client'],
 				sourcemap: true,
+				logOverride: {
+					'import-is-undefined': 'silent',
+				},
 				// preserveSymlinks: true,
 			});
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wirejs-scripts",
-	"version": "3.0.190",
+	"version": "3.0.191",
 	"description": "Basic build and start commands for wirejs apps",
 	"type": "module",
 	"bin": {
@@ -28,7 +28,7 @@
 		"node-cron": "^4.2.1",
 		"rimraf": "^6.0.1",
 		"wirejs-dom": "^1.0.44",
-		"wirejs-hosting": "^0.1.192",
-		"wirejs-resources": "^0.1.192"
+		"wirejs-hosting": "^0.1.193",
+		"wirejs-resources": "^0.1.193"
 	}
 }

package/ssg.js

@@ -36,13 +36,7 @@ async function build(filename, outputExtension = 'html') {
 			const doc = generated;
 			const doctype = doc?.parentNode?.doctype?.name || '';
 
-			let hydrationsFound = 0;
-			while (globalThis.pendingDehydrations?.length > 0) {
-				globalThis.pendingDehydrations.shift()(doc);
-				hydrationsFound++;
-			}
-
-			if (hydrationsFound) {
+			if (typeof module.onload === 'function') {
 				const script = doc.parentNode.createElement('script');
 				script.src = filename.substring((`${SRC_DIR}/ssg`).length);
 				doc.parentNode.body.appendChild(script);