@pracht/core 0.1.0 → 0.2.1

package/README.md

@@ -16,6 +16,10 @@ npm install @pracht/core preact preact-render-to-string
 - `route()` — declare a route with path, component, loader, and rendering mode
 - `group()` — group routes under a shared shell or middleware
 
+Route modules may export the page as a function default export or as a named
+`Component` export. Named exports such as `loader`, `head`, `ErrorBoundary`, and
+`getStaticPaths` keep their special route-module behavior.
+
 ### Server
 
 - `handlePrachtRequest()` — server renderer that produces full HTML with hydration markers

package/dist/index.d.mts

@@ -169,7 +169,8 @@ type LoaderFn<TContext = any, TData = unknown> = (args: LoaderArgs<TContext>) =>
 interface RouteModule<TContext = any, TLoader extends LoaderLike = undefined> {
   loader?: LoaderFn<TContext>;
   head?: (args: HeadArgs<TLoader, TContext>) => MaybePromise<HeadMetadata>;
-  Component: FunctionComponent<RouteComponentProps<TLoader>>;
+  Component?: FunctionComponent<RouteComponentProps<TLoader>>;
+  default?: FunctionComponent<RouteComponentProps<TLoader>>;
   ErrorBoundary?: FunctionComponent<ErrorBoundaryProps>;
   getStaticPaths?: () => MaybePromise<RouteParams[]>;
 }
@@ -234,6 +235,14 @@ declare function forwardRef<P = {}>(fn: ((props: P, ref: any) => any) & {
   ref?: any;
 }>;
 //#endregion
+//#region src/hydration.d.ts
+/**
+ * Returns `true` once the initial hydration (including all Suspense
+ * boundaries) has fully resolved. During SSR and hydration this returns
+ * `false`.
+ */
+declare function useIsHydrated(): boolean;
+//#endregion
 //#region src/runtime.d.ts
 type PrachtRuntimeDiagnosticPhase = "match" | "middleware" | "loader" | "action" | "render" | "api";
 interface PrachtRuntimeDiagnostics {
@@ -384,4 +393,4 @@ interface InitClientRouterOptions {
 }
 declare function initClientRouter(options: InitClientRouterOptions): Promise<void>;
 //#endregion
-export { type ApiConfig, type ApiRouteHandler, type ApiRouteMatch, type ApiRouteModule, type BaseRouteArgs, type DataModule, type ErrorBoundaryProps, Form, type FormProps, type GroupDefinition, type GroupMeta, type HandlePrachtRequestOptions, type HeadArgs, type HeadMetadata, type HttpMethod, type ISGManifestEntry, type InitClientRouterOptions, type LoaderArgs, type LoaderData, type LoaderFn, type Location, type MiddlewareArgs, type MiddlewareFn, type MiddlewareModule, type MiddlewareResult, type ModuleImporter, type ModuleRef, type ModuleRegistry, type NavigateFn, type PrachtApp, type PrachtAppConfig, PrachtHttpError, type PrachtHydrationState, type PrachtRuntimeDiagnosticPhase, type PrachtRuntimeDiagnostics, PrachtRuntimeProvider, type PrefetchStrategy, type PrerenderAppOptions, type PrerenderAppResult, type PrerenderResult, type Register, type RenderMode, type ResolvedApiRoute, type ResolvedPrachtApp, type ResolvedRoute, type RouteComponentProps, type RouteConfig, type RouteDefinition, type RouteMatch, type RouteMeta, type RouteModule, type RouteParams, type RouteRevalidate, type RouteStateResult, type RouteTreeNode, type SerializedRouteError, type ShellModule, type ShellProps, type StartAppOptions, Suspense, type TimeRevalidatePolicy, applyDefaultSecurityHeaders, buildPathFromSegments, defineApp, forwardRef, group, handlePrachtRequest, initClientRouter, lazy, matchApiRoute, matchAppRoute, prerenderApp, readHydrationState, resolveApiRoutes, resolveApp, route, startApp, timeRevalidate, useLocation, useNavigate, useParams, useRevalidate, useRevalidateRoute, useRouteData };
+export { type ApiConfig, type ApiRouteHandler, type ApiRouteMatch, type ApiRouteModule, type BaseRouteArgs, type DataModule, type ErrorBoundaryProps, Form, type FormProps, type GroupDefinition, type GroupMeta, type HandlePrachtRequestOptions, type HeadArgs, type HeadMetadata, type HttpMethod, type ISGManifestEntry, type InitClientRouterOptions, type LoaderArgs, type LoaderData, type LoaderFn, type Location, type MiddlewareArgs, type MiddlewareFn, type MiddlewareModule, type MiddlewareResult, type ModuleImporter, type ModuleRef, type ModuleRegistry, type NavigateFn, type PrachtApp, type PrachtAppConfig, PrachtHttpError, type PrachtHydrationState, type PrachtRuntimeDiagnosticPhase, type PrachtRuntimeDiagnostics, PrachtRuntimeProvider, type PrefetchStrategy, type PrerenderAppOptions, type PrerenderAppResult, type PrerenderResult, type Register, type RenderMode, type ResolvedApiRoute, type ResolvedPrachtApp, type ResolvedRoute, type RouteComponentProps, type RouteConfig, type RouteDefinition, type RouteMatch, type RouteMeta, type RouteModule, type RouteParams, type RouteRevalidate, type RouteStateResult, type RouteTreeNode, type SerializedRouteError, type ShellModule, type ShellProps, type StartAppOptions, Suspense, type TimeRevalidatePolicy, applyDefaultSecurityHeaders, buildPathFromSegments, defineApp, forwardRef, group, handlePrachtRequest, initClientRouter, lazy, matchApiRoute, matchAppRoute, prerenderApp, readHydrationState, resolveApiRoutes, resolveApp, route, startApp, timeRevalidate, useIsHydrated, useLocation, useNavigate, useParams, useRevalidate, useRevalidateRoute, useRouteData };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { a as matchApiRoute, c as resolveApp, i as group, l as route, n as buildPathFromSegments, o as matchAppRoute, r as defineApp, s as resolveApiRoutes, u as timeRevalidate } from "./app-Cep0el7c.mjs";
 import { createContext, h, hydrate, options, render } from "preact";
-import { Suspense, lazy } from "preact-suspense";
 import { useContext, useEffect, useMemo, useState } from "preact/hooks";
+import { Suspense, lazy } from "preact-suspense";
 //#region src/forwardRef.ts
 let oldDiffHook = options.__b;
 options.__b = (vnode) => {
@@ -27,6 +27,54 @@ function forwardRef(fn) {
 	return Forwarded;
 }
 //#endregion
+//#region src/hydration.ts
+const MODE_HYDRATE = 32;
+let _hydrating = false;
+let _suspensionCount = 0;
+let _hydrated = false;
+const oldCatchError = options.__e;
+options.__e = (err, newVNode, oldVNode, errorInfo) => {
+	if (_hydrating && !_hydrated && err && err.then) {
+		if (!!(newVNode && newVNode.__u && newVNode.__u & MODE_HYDRATE) || !!(newVNode && newVNode.__h)) {
+			_suspensionCount++;
+			let settled = false;
+			const onSettled = () => {
+				if (settled) return;
+				settled = true;
+				_suspensionCount--;
+			};
+			err.then(onSettled, onSettled);
+		}
+	}
+	if (oldCatchError) oldCatchError(err, newVNode, oldVNode, errorInfo);
+};
+const oldCommit = options.__c;
+options.__c = (vnode, commitQueue) => {
+	if (_hydrating && !_hydrated && _suspensionCount <= 0) {
+		_hydrated = true;
+		_hydrating = false;
+	}
+	if (oldCommit) oldCommit(vnode, commitQueue);
+};
+/**
+* Mark the start of a hydration pass. Call this right before `hydrate()`.
+*/
+function markHydrating() {
+	if (!_hydrated) _hydrating = true;
+}
+/**
+* Returns `true` once the initial hydration (including all Suspense
+* boundaries) has fully resolved. During SSR and hydration this returns
+* `false`.
+*/
+function useIsHydrated() {
+	const [hydrated, setHydrated] = useState(_hydrated);
+	useEffect(() => {
+		setHydrated(true);
+	}, []);
+	return hydrated;
+}
+//#endregion
 //#region src/runtime.ts
 const SAFE_METHODS = new Set(["GET", "HEAD"]);
 const HYDRATION_STATE_ELEMENT_ID = "pracht-state";
@@ -305,9 +353,10 @@ async function handlePrachtRequest(options) {
 				modulePreloadUrls
 			}));
 		}
-		if (!routeModule.Component) throw new Error("Route has no Component export");
+		const DefaultComponent = typeof routeModule.default === "function" ? routeModule.default : void 0;
+		const Component = routeModule.Component ?? DefaultComponent;
+		if (!Component) throw new Error("Route has no Component or default export");
 		const { renderToStringAsync } = await import("preact-render-to-string");
-		const Component = routeModule.Component;
 		const Shell = shellModule?.Shell;
 		const componentProps = {
 			data,
@@ -868,7 +917,8 @@ async function initClientRouter(options) {
 		let Shell = null;
 		const resolvedShell = await (shellModPromise ?? startShellImport(match));
 		if (resolvedShell) Shell = resolvedShell.Shell;
-		const Component = state.error ? routeMod.ErrorBoundary : routeMod.Component;
+		const DefaultComponent = typeof routeMod.default === "function" ? routeMod.default : void 0;
+		const Component = state.error ? routeMod.ErrorBoundary : routeMod.Component ?? DefaultComponent;
 		if (!Component) return null;
 		const props = state.error ? { error: deserializeRouteError(state.error) } : {
 			data: state.data,
@@ -980,7 +1030,10 @@ async function initClientRouter(options) {
 		}
 		const tree = await buildRouteTree(initialMatch, state, void 0, initialShellPromise);
 		if (tree) if (initialMatch.route.render === "spa") render(tree, root);
-		else hydrate(tree, root);
+		else {
+			markHydrating();
+			hydrate(tree, root);
+		}
 	}
 	document.addEventListener("click", (e) => {
 		const anchor = e.target.closest?.("a");
@@ -1080,4 +1133,4 @@ var PrachtHttpError = class extends Error {
 	}
 };
 //#endregion
-export { Form, PrachtHttpError, PrachtRuntimeProvider, Suspense, applyDefaultSecurityHeaders, buildPathFromSegments, defineApp, forwardRef, group, handlePrachtRequest, initClientRouter, lazy, matchApiRoute, matchAppRoute, prerenderApp, readHydrationState, resolveApiRoutes, resolveApp, route, startApp, timeRevalidate, useLocation, useNavigate, useParams, useRevalidate, useRevalidateRoute, useRouteData };
+export { Form, PrachtHttpError, PrachtRuntimeProvider, Suspense, applyDefaultSecurityHeaders, buildPathFromSegments, defineApp, forwardRef, group, handlePrachtRequest, initClientRouter, lazy, matchApiRoute, matchAppRoute, prerenderApp, readHydrationState, resolveApiRoutes, resolveApp, route, startApp, timeRevalidate, useIsHydrated, useLocation, useNavigate, useParams, useRevalidate, useRevalidateRoute, useRouteData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pracht/core",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "homepage": "https://github.com/JoviDeCroock/pracht/tree/main/packages/framework",
   "bugs": {
     "url": "https://github.com/JoviDeCroock/pracht/issues"