@lovrozagar/flare 0.5.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lovrozagar/flare",
-	"version": "0.5.1",
+	"version": "0.7.0",
 	"description": "Solid meta-framework. Server-driven, NDJSON streaming, renderToStream.",
 	"keywords": [
 		"flare",
@@ -130,10 +130,10 @@
 	"peerDependencies": {
 		"@babel/parser": ">=8.0.0",
 		"@formatjs/intl-localematcher": ">=0.6.0",
-		"@solidjs/vite-plugin": ">=3.0.0-next.0",
-		"@solidjs/web": ">=2.0.0-rc.0",
+		"@solidjs/vite-plugin": ">=3.0.0-next.47",
+		"@solidjs/web": ">=2.0.0-rc.13",
 		"@tanstack/query-broadcast-client-experimental": ">=5.0.0",
-		"@tanstack/solid-query": ">=6.0.0-rc.0",
+		"@tanstack/solid-query": ">=6.0.0-rc.5",
 		"isbot": ">=5.0.0",
 		"magic-string": ">=0.30.0",
 		"negotiator": ">=1.0.0",
@@ -141,7 +141,7 @@
 		"oxc-parser": ">=0.139.0",
 		"oxc-resolver": ">=11.23.0",
 		"sharp": ">=0.33.0",
-		"solid-js": ">=2.0.0-rc.0",
+		"solid-js": ">=2.0.0-rc.13",
 		"tailwindcss": ">=4.0.0",
 		"vite": ">=8.0.0"
 	},

package/src/components/index.ts

@@ -11,7 +11,7 @@ export {
 } from "./await.tsx";
 export { DirectionScript, type DirectionScriptProps } from "./direction-script.tsx";
 export { ResetCSS } from "./reset-css.tsx";
-export { SSRContextProvider, type SSRContextValue, setSSRContext, useSSRContext } from "./ssr-context.tsx";
+export { SSRContextProvider, type SSRContextValue, useSSRContext } from "./ssr-context.tsx";
 export { ThemeScript, type ThemeScriptProps } from "./theme-script.tsx";
 export { ViewTransitionCSS, type ViewTransitionCSSProps } from "./view-transition-css.tsx";
 

package/src/components/ssr-context.tsx

@@ -18,9 +18,6 @@ export interface SSRContextValue {
 
 const SSRCtx = createContext<SSRContextValue | null>(null);
 
-/** @deprecated Wrap the tree with SSRContextProvider. Solid 2 has no sharedConfig.context. */
-export function setSSRContext(_value: SSRContextValue): void {}
-
 export function useSSRContext(): SSRContextValue | undefined {
 	return useContext(SSRCtx) ?? undefined;
 }

package/src/direction/index.tsx

@@ -1,4 +1,4 @@
-import { createContext, createEffect, createSignal, onSettled, sharedConfig, untrack, useContext } from "solid-js";
+import { createContext, createEffect, createSignal, isHydrating, onSettled, untrack, useContext } from "solid-js";
 import { isServer, type JSX } from "@solidjs/web";
 
 export type Direction = "ltr" | "rtl";
@@ -61,7 +61,7 @@ export function DirectionProvider(props: { children: JSX.Element; config?: Direc
 		storageKey: props.config?.storageKey ?? DEFAULT_CONFIG.storageKey,
 	};
 
-	const hydrating = isServer || !!sharedConfig.hydrating;
+	const hydrating = isServer || isHydrating();
 
 	/* During SSR + hydration, start from defaultDir so the tree matches.
 	   DirectionScript already applied localStorage to <html> before first paint. */

package/src/lazy/index.tsx

@@ -1,6 +1,6 @@
 import type { JSX } from "@solidjs/web";
 import { Dynamic, isServer } from "@solidjs/web";
-import { type Component, createSignal, onSettled, Show, sharedConfig, untrack } from "solid-js";
+import { type Component, createSignal, isHydrating, onSettled, Show, untrack } from "solid-js";
 import { retryImport } from "../internal.ts";
 import { warn } from "../logger.ts";
 import { GLOBAL_LAZY_LOADED, GLOBAL_LAZY_PENDING } from "../protocol.ts";
@@ -56,7 +56,7 @@ export function lazy<P extends Record<string, unknown>>(options: LazyOptions<P>)
 	getGlobalPending().add(loadPromise);
 
 	return ((props: P) => {
-		const isSSR = isServer || !!sharedConfig.hydrating;
+		const isSSR = isServer || isHydrating();
 
 		/* Pre-known error at render time → throw from component body */
 		if (loadError) throw loadError;
@@ -116,7 +116,7 @@ export function clientLazy<P extends Record<string, unknown>>(
 	}
 
 	return ((props: P & { pending?: Component<P> }) => {
-		const isSSR = isServer || !!sharedConfig.hydrating;
+		const isSSR = isServer || isHydrating();
 
 		/* Pre-known error at render time → throw from component body */
 		if (loadError) throw loadError;

package/src/plugins/server-fn.ts

@@ -605,7 +605,7 @@ export function createServerFnPlugin(_config?: { ignorePrefix?: string }): ViteP
 				if (hasServerFnCalls(transformed)) {
 					transformed = replaceServerFnConfigs(transformed, (content) => {
 						const fnId = computeFnId(id, content);
-						return ` __id: "${fnId}",${content}`;
+						return ` __client: true, __id: "${fnId}",${content}`;
 					});
 				}
 

package/src/server-fn/index.ts

@@ -1,4 +1,5 @@
 import { FORM_FN_FIELD, parseServerFnPathname, serverFnPath } from "../protocol.ts";
+import { callServerFnOverHttp } from "./rpc.ts";
 import {
 	isNotFoundError,
 	isRedirectResponse,
@@ -26,6 +27,8 @@ import { runValidator } from "../validation/index.ts";
 export type { Validator } from "../validation/index.ts";
 
 export interface ServerFnConfig {
+	/** Set by the client build transform: calls go over HTTP, the handler body is gone. */
+	__client?: boolean;
 	__id?: string;
 	method?: "get" | "post";
 	name: string;
@@ -87,6 +90,7 @@ export interface ServerFnStreamRegistration extends ServerFnRegistrationBase {
 export type ServerFnRegistration = ServerFnHandlerRegistration | ServerFnStreamRegistration;
 
 interface BuilderState {
+	__client?: boolean;
 	__id?: string;
 	authenticate: boolean;
 	authorizeFn?: (ctx: { auth: unknown; input: unknown }) => boolean | Promise<boolean>;
@@ -139,6 +143,14 @@ function createBuilderTerminal<TAuth, TInput, TOutput>(
 				name: state.name,
 			};
 
+			if (state.__client) {
+				/* browser: the server validates, authenticates, and runs the handler */
+				const clientFn: ServerFn<TInput, TOutput> = async (input: TInput): Promise<TOutput> =>
+					(await callServerFnOverHttp<TOutput>(registration, input)).data;
+				clientFn._registration = registration;
+				return clientFn;
+			}
+
 			const serverFn: ServerFn<TInput, TOutput> = async (_input: TInput): Promise<TOutput> => {
 				if (state.authenticate) {
 					throw new Error(
@@ -271,6 +283,7 @@ function createBuilder<TAuth, TInput, TOutput>(state: BuilderState): ServerFnBui
 
 export function createServerFn(config: ServerFnConfig): ServerFnBuilder<null, void, unknown> {
 	return createBuilder<null, void, unknown>({
+		__client: config.__client,
 		__id: config.__id,
 		authenticate: false,
 		method: config.method ?? "post",

package/src/server-fn/rpc.ts

@@ -0,0 +1,41 @@
+/**
+ * Browser side of a server fn call: one HTTP request to `/_flare/server-fn/{id}/{name}`.
+ * Client-safe — must not import server-context or anything that reaches node:*.
+ */
+
+import { serverFnPath } from "../protocol.ts";
+import { serverFnGetUrl } from "./get-input.ts";
+import { throwServerFnHttpError } from "./http-error.ts";
+
+export interface ServerFnTarget {
+	id?: string;
+	method?: string;
+	name: string;
+}
+
+export interface ServerFnEnvelope<TOutput> {
+	data: TOutput;
+	queries?: Array<{ data: unknown; key: unknown[] }>;
+	revalidatedTags?: string[];
+}
+
+export async function callServerFnOverHttp<TOutput>(
+	target: ServerFnTarget,
+	input: unknown,
+): Promise<ServerFnEnvelope<TOutput>> {
+	const url = serverFnPath(target.id ?? target.name, target.name);
+	const res =
+		target.method === "get"
+			? await fetch(serverFnGetUrl(url, input))
+			: await fetch(url, {
+					body: input !== undefined ? JSON.stringify(input) : undefined,
+					headers: { "content-type": "application/json" },
+					method: "POST",
+				});
+
+	if (!res.ok) {
+		const body: unknown = await res.json().catch(() => null);
+		throwServerFnHttpError(body, res.status, target.name);
+	}
+	return (await res.json()) as ServerFnEnvelope<TOutput>;
+}

package/src/server-fn-query.ts

@@ -4,9 +4,7 @@
  * to avoid pulling in node:async_hooks on the client.
  */
 
-import { serverFnGetUrl } from "./server-fn/get-input.ts";
-import { throwServerFnHttpError } from "./server-fn/http-error.ts";
-import { serverFnPath } from "./protocol.ts";
+import { callServerFnOverHttp } from "./server-fn/rpc.ts";
 
 export interface PiggybackedQuery {
 	data: unknown;
@@ -52,28 +50,7 @@ export function serverFnQueryOptions<TInput, TOutput>(
 				return serverFn(config?.input as TInput);
 			}
 
-			const url = serverFnPath(id, name);
-			const method = reg?.method ?? "post";
-
-			const res =
-				method === "get"
-					? await fetch(serverFnGetUrl(url, config?.input))
-					: await fetch(url, {
-							body: config?.input !== undefined ? JSON.stringify(config.input) : undefined,
-							headers: { "content-type": "application/json" },
-							method: "POST",
-						});
-
-			if (!res.ok) {
-				const body: unknown = await res.json().catch(() => null);
-				throwServerFnHttpError(body, res.status, name);
-			}
-
-			const json = (await res.json()) as {
-				data: TOutput;
-				queries?: Array<{ data: unknown; key: unknown[] }>;
-				revalidatedTags?: string[];
-			};
+			const json = await callServerFnOverHttp<TOutput>({ id, method: reg?.method ?? "post", name }, config?.input);
 
 			if (json.queries && config?.queryClient) {
 				for (const q of json.queries) {
@@ -117,23 +94,8 @@ export function serverFnMutationOptions<TInput, TOutput>(
 				return serverFn(input);
 			}
 
-			const url = serverFnPath(id, name);
-			const res = await fetch(url, {
-				body: input !== undefined ? JSON.stringify(input) : undefined,
-				headers: { "content-type": "application/json" },
-				method: "POST",
-			});
-
-			if (!res.ok) {
-				const body: unknown = await res.json().catch(() => null);
-				throwServerFnHttpError(body, res.status, name);
-			}
-
-			const json = (await res.json()) as {
-				data: TOutput;
-				queries?: Array<{ data: unknown; key: unknown[] }>;
-				revalidatedTags?: string[];
-			};
+			/* mutations always POST, whatever the fn's own method */
+			const json = await callServerFnOverHttp<TOutput>({ id, method: "post", name }, input);
 
 			if (json.queries && config?.queryClient) {
 				for (const q of json.queries) {

package/src/theme/index.tsx

@@ -3,8 +3,8 @@ import {
 	createEffect,
 	createMemo,
 	createSignal,
+	isHydrating,
 	onSettled,
-	sharedConfig,
 	untrack,
 	useContext,
 } from "solid-js";
@@ -68,7 +68,7 @@ export function ThemeProvider(props: { children: JSX.Element; config?: ThemeConf
 		themes: props.config?.themes ?? DEFAULT_CONFIG.themes,
 	};
 
-	const hydrating = isServer || !!sharedConfig.hydrating;
+	const hydrating = isServer || isHydrating();
 
 	/* During SSR + hydration, always start from defaultTheme so the tree matches.
 	   ThemeScript already applied localStorage to <html> before first paint.