@alepha/react 0.7.7 → 0.8.1

package/dist/index.cjs

@@ -24,11 +24,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 const __alepha_core = __toESM(require("@alepha/core"));
 const __alepha_server = __toESM(require("@alepha/server"));
 const __alepha_server_cache = __toESM(require("@alepha/server-cache"));
+const __alepha_server_links = __toESM(require("@alepha/server-links"));
 const react = __toESM(require("react"));
 const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
 const node_fs = __toESM(require("node:fs"));
 const node_path = __toESM(require("node:path"));
-const __alepha_server_links = __toESM(require("@alepha/server-links"));
 const __alepha_server_static = __toESM(require("@alepha/server-static"));
 const react_dom_server = __toESM(require("react-dom/server"));
 const __alepha_router = __toESM(require("@alepha/router"));
@@ -40,11 +40,6 @@ const KEY = "PAGE";
 */
 const $page = (options) => {
 	(0, __alepha_core.__descriptor)(KEY);
-	if (options.children) for (const child of options.children) child[__alepha_core.OPTIONS].parent = { [__alepha_core.OPTIONS]: options };
-	if (options.parent) {
-		options.parent[__alepha_core.OPTIONS].children ??= [];
-		options.parent[__alepha_core.OPTIONS].children.push({ [__alepha_core.OPTIONS]: options });
-	}
 	return {
 		[__alepha_core.KIND]: KEY,
 		[__alepha_core.OPTIONS]: options,
@@ -319,7 +314,7 @@ const NestedView = (props) => {
 	const index = layer?.index ?? 0;
 	const [view, setView] = (0, react.useState)(app?.state.layers[index]?.element);
 	useRouterEvents({ onEnd: ({ state }) => {
-		setView(state.layers[index]?.element);
+		if (!state.layers[index]?.cache) setView(state.layers[index]?.element);
 	} }, [app]);
 	if (!app) throw new Error("NestedView must be used within a RouterContext.");
 	const element = view ?? props.children ?? null;
@@ -417,19 +412,18 @@ var PageDescriptorProvider = class {
 			const route$1 = it.route;
 			const config = {};
 			try {
-				config.query = route$1.schema?.query ? this.alepha.parse(route$1.schema.query, request.query) : request.query;
+				config.query = route$1.schema?.query ? this.alepha.parse(route$1.schema.query, request.query) : {};
 			} catch (e) {
 				it.error = e;
 				break;
 			}
 			try {
-				config.params = route$1.schema?.params ? this.alepha.parse(route$1.schema.params, request.params) : request.params;
+				config.params = route$1.schema?.params ? this.alepha.parse(route$1.schema.params, request.params) : {};
 			} catch (e) {
 				it.error = e;
 				break;
 			}
 			it.config = { ...config };
-			if (!route$1.resolve) continue;
 			const previous = request.previous;
 			if (previous?.[i] && !forceRefresh && previous[i].name === route$1.name) {
 				const url = (str) => str ? str.replace(/\/\/+/g, "/") : "/";
@@ -444,6 +438,7 @@ var PageDescriptorProvider = class {
 				if (prev === curr) {
 					it.props = previous[i].props;
 					it.error = previous[i].error;
+					it.cache = true;
 					context = {
 						...context,
 						...it.props
@@ -452,6 +447,7 @@ var PageDescriptorProvider = class {
 				}
 				forceRefresh = true;
 			}
+			if (!route$1.resolve) continue;
 			try {
 				const props = await route$1.resolve?.({
 					...request,
@@ -498,7 +494,7 @@ var PageDescriptorProvider = class {
 					element: this.renderView(i + 1, path, element$1, it.route),
 					index: i + 1,
 					path,
-					route
+					route: it.route
 				});
 				break;
 			}
@@ -514,7 +510,8 @@ var PageDescriptorProvider = class {
 				element: this.renderView(i + 1, path, element, it.route),
 				index: i + 1,
 				path,
-				route
+				route: it.route,
+				cache: it.cache
 			});
 		}
 		return {
@@ -570,14 +567,20 @@ var PageDescriptorProvider = class {
 		} }, element);
 	}
 	configure = (0, __alepha_core.$hook)({
-		name: "configure",
+		on: "configure",
 		handler: () => {
 			let hasNotFoundHandler = false;
 			const pages = this.alepha.getDescriptorValues($page);
+			const hasParent = (it) => {
+				for (const page of pages) {
+					const children = page.value[__alepha_core.OPTIONS].children ? Array.isArray(page.value[__alepha_core.OPTIONS].children) ? page.value[__alepha_core.OPTIONS].children : page.value[__alepha_core.OPTIONS].children() : [];
+					if (children.includes(it)) return true;
+				}
+			};
 			for (const { value, key } of pages) value[__alepha_core.OPTIONS].name ??= key;
 			for (const { value } of pages) {
-				if (value[__alepha_core.OPTIONS].parent) continue;
 				if (value[__alepha_core.OPTIONS].path === "/*") hasNotFoundHandler = true;
+				if (hasParent(value)) continue;
 				this.add(this.map(pages, value));
 			}
 			if (!hasNotFoundHandler && pages.length > 0) this.add({
@@ -592,7 +595,7 @@ var PageDescriptorProvider = class {
 		}
 	});
 	map(pages, target) {
-		const children = target[__alepha_core.OPTIONS].children ?? [];
+		const children = target[__alepha_core.OPTIONS].children ? Array.isArray(target[__alepha_core.OPTIONS].children) ? target[__alepha_core.OPTIONS].children : target[__alepha_core.OPTIONS].children() : [];
 		return {
 			...target[__alepha_core.OPTIONS],
 			parent: void 0,
@@ -649,11 +652,11 @@ var ReactServerProvider = class {
 	env = (0, __alepha_core.$inject)(envSchema);
 	ROOT_DIV_REGEX = new RegExp(`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`, "is");
 	onConfigure = (0, __alepha_core.$hook)({
-		name: "configure",
+		on: "configure",
 		handler: async () => {
 			const pages = this.alepha.getDescriptorValues($page);
 			const ssrEnabled = pages.length > 0 && this.env.REACT_SSR_ENABLED !== false;
-			this.alepha.state("ReactServerProvider.ssr", ssrEnabled);
+			this.alepha.state("react.server.ssr", ssrEnabled);
 			for (const { key, instance, value } of pages) {
 				const name = value[__alepha_core.OPTIONS].name ?? key;
 				instance[key].render = this.createRenderFunction(name);
@@ -693,7 +696,7 @@ var ReactServerProvider = class {
 		}
 	});
 	get template() {
-		return this.alepha.state("ReactServerProvider.template") ?? "<!DOCTYPE html><html lang='en'><head></head><body></body></html>";
+		return this.alepha.state("react.server.template") ?? "<!DOCTYPE html><html lang='en'><head></head><body></body></html>";
 	}
 	async registerPages(templateLoader) {
 		for (const page of this.pageDescriptorProvider.getPages()) {
@@ -868,7 +871,7 @@ var BrowserRouterProvider = class extends __alepha_router.RouterProvider {
 		this.pageDescriptorProvider.add(entry);
 	}
 	configure = (0, __alepha_core.$hook)({
-		name: "configure",
+		on: "configure",
 		handler: async () => {
 			for (const page of this.pageDescriptorProvider.getPages()) if (page.component || page.lazy) this.push({
 				path: page.match,
@@ -974,8 +977,17 @@ var ReactBrowserProvider = class {
 	get history() {
 		return window.history;
 	}
+	get location() {
+		return window.location;
+	}
 	get url() {
-		return window.location.pathname + window.location.search;
+		let url = this.location.pathname + this.location.search;
+		return url;
+	}
+	pushState(url, replace) {
+		let path = url;
+		if (replace) this.history.replaceState({}, "", path);
+		else this.history.pushState({}, "", path);
 	}
 	async invalidate(props) {
 		const previous = [];
@@ -1001,14 +1013,14 @@ var ReactBrowserProvider = class {
 	async go(url, options = {}) {
 		const result = await this.render({ url });
 		if (result.context.url.pathname !== url) {
-			this.history.replaceState({}, "", result.context.url.pathname);
+			this.pushState(result.context.url.pathname);
 			return;
 		}
 		if (options.replace) {
-			this.history.replaceState({}, "", url);
+			this.pushState(url);
 			return;
 		}
-		this.history.pushState({}, "", url);
+		this.pushState(url);
 	}
 	async render(options = {}) {
 		const previous = options.previous ?? this.state.layers;
@@ -1033,7 +1045,7 @@ var ReactBrowserProvider = class {
 		}
 	}
 	ready = (0, __alepha_core.$hook)({
-		name: "ready",
+		on: "ready",
 		handler: async () => {
 			const hydration = this.getHydrationState();
 			const previous = hydration?.layers ?? [];
@@ -1045,6 +1057,7 @@ var ReactBrowserProvider = class {
 				hydration
 			});
 			window.addEventListener("popstate", () => {
+				if (this.state.pathname === location.pathname) return;
 				this.render();
 			});
 		}
@@ -1054,12 +1067,21 @@ var ReactBrowserProvider = class {
 //#endregion
 //#region src/hooks/RouterHookApi.ts
 var RouterHookApi = class {
-	constructor(pages, state, layer, browser) {
+	constructor(pages, context, state, layer, browser) {
 		this.pages = pages;
+		this.context = context;
 		this.state = state;
 		this.layer = layer;
 		this.browser = browser;
 	}
+	getURL() {
+		if (!this.browser) return this.context.url;
+		return new URL(this.location.href);
+	}
+	get location() {
+		if (!this.browser) throw new Error("Browser is required");
+		return this.browser.location;
+	}
 	get current() {
 		return this.state;
 	}
@@ -1137,7 +1159,7 @@ const useRouter = () => {
 	const pages = (0, react.useMemo)(() => {
 		return ctx.alepha.get(PageDescriptorProvider).getPages();
 	}, []);
-	return (0, react.useMemo)(() => new RouterHookApi(pages, ctx.state, layer, ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0), [layer]);
+	return (0, react.useMemo)(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0), [layer]);
 };
 
 //#endregion
@@ -1257,17 +1279,139 @@ const useRouterState = () => {
 //#endregion
 //#region src/index.ts
 /**
-* Alepha React Module
+* Provides full-stack React development with declarative routing, server-side rendering, and client-side hydration.
+*
+* The React module enables building modern React applications using the `$page` descriptor on class properties.
+* It delivers seamless server-side rendering, automatic code splitting, and client-side navigation with full
+* type safety and schema validation for route parameters and data.
+*
+* **Key Features:**
+* - Declarative page definition with `$page` descriptor
+* - Server-side rendering (SSR) with automatic hydration
+* - Type-safe routing with parameter validation
+* - Schema-based data resolution and validation
+* - SEO-friendly meta tag management
+* - Automatic code splitting and lazy loading
+* - Client-side navigation with browser history
 *
-* Alepha React Module contains a router for client-side navigation and server-side rendering.
-* Routes can be defined using the `$page` descriptor.
+* **Basic Usage:**
+* ```ts
+* import { Alepha, run, t } from "alepha";
+* import { AlephaReact, $page } from "alepha/react";
+*
+* class AppRoutes {
+*   // Home page
+*   home = $page({
+*     path: "/",
+*     component: () => (
+*       <div>
+*         <h1>Welcome to Alepha</h1>
+*         <p>Build amazing React applications!</p>
+*       </div>
+*     ),
+*   });
+*
+*   // About page with meta tags
+*   about = $page({
+*     path: "/about",
+*     head: {
+*       title: "About Us",
+*       description: "Learn more about our mission",
+*     },
+*     component: () => (
+*       <div>
+*         <h1>About Us</h1>
+*         <p>Learn more about our mission.</p>
+*       </div>
+*     ),
+*   });
+* }
+*
+* const alepha = Alepha.create()
+*   .with(AlephaReact)
+*   .with(AppRoutes);
+*
+* run(alepha);
+* ```
+*
+* **Dynamic Routes with Parameters:**
+* ```tsx
+* class UserRoutes {
+*   userProfile = $page({
+*     path: "/users/:id",
+*     schema: {
+*       params: t.object({
+*         id: t.string(),
+*       }),
+*     },
+*     resolve: async ({ params }) => {
+*       // Fetch user data server-side
+*       const user = await getUserById(params.id);
+*       return { user };
+*     },
+*     head: ({ user }) => ({
+*       title: `${user.name} - Profile`,
+*       description: `View ${user.name}'s profile`,
+*     }),
+*     component: ({ user }) => (
+*       <div>
+*         <h1>{user.name}</h1>
+*         <p>Email: {user.email}</p>
+*       </div>
+*     ),
+*   });
+*
+*   userSettings = $page({
+*     path: "/users/:id/settings",
+*     schema: {
+*       params: t.object({
+*         id: t.string(),
+*       }),
+*     },
+*     component: ({ params }) => (
+*       <UserSettings userId={params.id} />
+*     ),
+*   });
+* }
+* ```
+*
+* **Static Generation:**
+* ```tsx
+* class BlogRoutes {
+*   blogPost = $page({
+*     path: "/blog/:slug",
+*     schema: {
+*       params: t.object({
+*         slug: t.string(),
+*       }),
+*     },
+*     static: {
+*       entries: [
+*         { params: { slug: "getting-started" } },
+*         { params: { slug: "advanced-features" } },
+*         { params: { slug: "deployment" } },
+*       ],
+*     },
+*     resolve: ({ params }) => {
+*       const post = getBlogPost(params.slug);
+*       return { post };
+*     },
+*     component: ({ post }) => (
+*       <article>
+*         <h1>{post.title}</h1>
+*         <div>{post.content}</div>
+*       </article>
+*     ),
+*   });
+* }
+* ```
 *
 * @see {@link $page}
 * @module alepha.react
 */
 var AlephaReact = class {
 	name = "alepha.react";
-	$services = (alepha) => alepha.with(__alepha_server.AlephaServer).with(__alepha_server_cache.AlephaServerCache).with(ReactServerProvider).with(PageDescriptorProvider);
+	$services = (alepha) => alepha.with(__alepha_server.AlephaServer).with(__alepha_server_cache.AlephaServerCache).with(__alepha_server_links.AlephaServerLinks).with(ReactServerProvider).with(PageDescriptorProvider);
 };
 (0, __alepha_core.__bind)($page, AlephaReact);
 
@@ -1278,6 +1422,7 @@ exports.ClientOnly = ClientOnly_default;
 exports.ErrorBoundary = ErrorBoundary_default;
 exports.Link = Link_default;
 exports.NestedView = NestedView_default;
+exports.NotFound = NotFoundPage;
 exports.PageDescriptorProvider = PageDescriptorProvider;
 exports.ReactBrowserProvider = ReactBrowserProvider;
 exports.ReactServerProvider = ReactServerProvider;