@lovrozagar/flare 0.9.12 → 0.9.14

package/README.md

@@ -380,6 +380,8 @@ export const route = createLayout("_root_/(blog)")
 	));
 ```
 
+A layout stays mounted while navigation changes only params its own path does not declare (`/blog/a` → `/blog/b` keeps `(blog)`; `[locale]` layouts remount on a locale switch). Its loader still re-runs and `props.loaderData` updates reactively, so read data in JSX or memos, not once in the render body. Pages remount on any param change.
+
 ```ts
 import { createPathSegment } from "@lovrozagar/flare/path-segment";
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lovrozagar/flare",
-	"version": "0.9.12",
+	"version": "0.9.14",
 	"description": "Solid meta-framework. Server-driven, NDJSON streaming, renderToStream.",
 	"keywords": [
 		"flare",

package/src/form/index.tsx

@@ -50,8 +50,9 @@ interface FormOwnProps<TInput, TOutput> {
 	onSuccess?: (data: TOutput) => void;
 }
 
+/* The element's own `onError` (an ErrorEvent) gives way to the action's. */
 export type FormProps<TInput, TOutput> = FormOwnProps<TInput, TOutput> &
-	Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "action" | "children" | "enctype" | "method">;
+	Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "action" | "children" | "enctype" | "method" | "onError">;
 
 /** Seed `form.error()` after a no-JS PE POST with form-level validation errors. */
 export function seedFormErrorFromSsr(ssrCtx: FormActionContext | undefined): Error | null {
@@ -66,7 +67,7 @@ export function seedFormErrorFromSsr(ssrCtx: FormActionContext | undefined): Err
 
 export function Form<TInput, TOutput>(props: FormProps<TInput, TOutput>): JSX.Element {
 	const local = props as FormOwnProps<TInput, TOutput> & Record<string, unknown>;
-	const rest = omit(local, "action", "children", "enctype", "onError", "onSuccess");
+	const rest = omit(local, "action", "children", "enctype", "onError", "onSubmit", "onSuccess");
 
 	const reg = createMemo(() => local.action._registration);
 	const fnId = createMemo(() => reg()?.id ?? "");
@@ -107,6 +108,12 @@ export function Form<TInput, TOutput>(props: FormProps<TInput, TOutput>): JSX.El
 	};
 
 	async function handleSubmit(event: SubmitEvent): Promise<void> {
+		/* The consumer's handler runs first (client validation, e.g. Base UI Form composed through
+		   `render`); preventing the default cancels the server call. */
+		const consumer = props.onSubmit as JSX.EventHandlerUnion<HTMLFormElement, SubmitEvent> | undefined;
+		if (typeof consumer === "function") consumer(event as never);
+		else if (Array.isArray(consumer)) (consumer[0] as (data: unknown, event: SubmitEvent) => void)(consumer[1], event);
+		if (event.defaultPrevented) return;
 		event.preventDefault();
 		if (pending()) return;
 

package/src/navigation/index.ts

@@ -42,6 +42,7 @@ import { executeRewriteInput, executeRewriteOutput, type LocationRewrite } from
 import type { HeadConfig } from "../route-builder/types.ts";
 import {
 	computeMatchId,
+	deriveParams,
 	isRootLayoutPath,
 	matchRoute,
 	matchRoutePartial,
@@ -629,10 +630,13 @@ function commitCachedShell(
 	return { hadShell: true, keepMatchIds };
 }
 
-function sameRouteParams(a: Record<string, string | string[]>, b: Record<string, string | string[]>): boolean {
-	const keys = Object.keys(a);
-	if (keys.length !== Object.keys(b).length) return false;
-	for (const key of keys) {
+/** Whether the params a route's own path declares kept their values. */
+function ownParamsUnchanged(
+	virtualPath: string,
+	a: Record<string, string | string[]>,
+	b: Record<string, string | string[]>,
+): boolean {
+	for (const key of deriveParams(virtualPath)) {
 		const av = a[key];
 		const bv = b[key];
 		if (av === bv) continue;
@@ -655,7 +659,7 @@ function buildClientMatches(
 	params: Record<string, string | string[]>,
 ) {
 	const current = ctx?.matches() ?? [];
-	const paramsUnchanged = sameRouteParams(ctx?.params() ?? {}, params);
+	const prevParams = ctx?.params() ?? {};
 	return allModules.map((mod, i) => {
 		const matchId = matchIdForModule(mod, search, params);
 		const cached = ctx?.matchCache.get(matchId);
@@ -676,15 +680,17 @@ function buildClientMatches(
 		};
 		/* Reuse the previous object when the route slot is unchanged so
 		   Outlet <Show keyed when={match()}> does not remount (local page
-		   signals). Param changes are a new page instance — render bodies
-		   that snapshot loaderData (translators, query keys) must re-run.
-		   Search-only updates keep identity and refresh via matchesEpoch.
-		   Error identity must change — Errored stays in fallback if the same
-		   object is mutated from error to success. */
+		   signals). A change to a param the route's own path declares is a
+		   new instance — render bodies that snapshot loaderData (translators,
+		   query keys) must re-run. A layout whose own params did not change
+		   stays mounted when a child param changes; like search-only updates,
+		   its data refreshes via matchesEpoch. Error identity must change —
+		   Errored stays in fallback if the same object is mutated from error
+		   to success. */
 		const prev = current[i];
 		if (
 			prev &&
-			paramsUnchanged &&
+			ownParamsUnchanged(mod.virtualPath, prevParams, params) &&
 			prev.virtualPath === next.virtualPath &&
 			prev._type === next._type &&
 			prev.error === next.error