@alepha/react 0.13.1 → 0.13.3

package/dist/core/index.js

@@ -1,4 +1,4 @@
-import { $atom, $env, $hook, $inject, $module, $use, Alepha, AlephaError, Atom, Descriptor, KIND, createDescriptor, t } from "alepha";
+import { $atom, $env, $hook, $inject, $module, $use, Alepha, AlephaError, Atom, KIND, Primitive, createPrimitive, t } from "alepha";
 import { AlephaDateTime, DateTimeProvider } from "alepha/datetime";
 import { AlephaServer, HttpClient, ServerProvider, ServerRouterProvider, ServerTimingProvider } from "alepha/server";
 import { AlephaServerCache } from "alepha/server/cache";
@@ -23,11 +23,11 @@ var ReactPageService = class {
 };
 
 //#endregion
-//#region src/core/descriptors/$page.ts
+//#region src/core/primitives/$page.ts
 /**
-* Main descriptor for defining a React route in the application.
+* Main primitive for defining a React route in the application.
 *
-* The $page descriptor is the core building block for creating type-safe, SSR-enabled React routes.
+* The $page primitive is the core building block for creating type-safe, SSR-enabled React routes.
 * It provides a declarative way to define pages with powerful features:
 *
 * **Routing & Navigation**
@@ -113,9 +113,9 @@ var ReactPageService = class {
 * ```
 */
 const $page = (options) => {
-	return createDescriptor(PageDescriptor, options);
+	return createPrimitive(PagePrimitive, options);
 };
-var PageDescriptor = class extends Descriptor {
+var PagePrimitive = class extends Primitive {
 	reactPageService = $inject(ReactPageService);
 	onInit() {
 		if (this.options.static) this.options.cache ??= { store: {
@@ -145,7 +145,7 @@ var PageDescriptor = class extends Descriptor {
 		return this.options.path || "";
 	}
 };
-$page[KIND] = PageDescriptor;
+$page[KIND] = PagePrimitive;
 
 //#endregion
 //#region src/core/components/ClientOnly.tsx
@@ -400,9 +400,9 @@ const useEvents = (opts, deps) => {
 function useStore(target, defaultValue) {
 	const alepha = useAlepha();
 	useMemo(() => {
-		if (defaultValue != null && alepha.state.get(target) == null) alepha.state.set(target, defaultValue);
+		if (defaultValue != null && alepha.store.get(target) == null) alepha.store.set(target, defaultValue);
 	}, [defaultValue]);
-	const [state, setState] = useState(alepha.state.get(target));
+	const [state, setState] = useState(alepha.store.get(target));
 	useEffect(() => {
 		if (!alepha.isBrowser()) return;
 		const key = target instanceof Atom ? target.key : target;
@@ -411,7 +411,7 @@ function useStore(target, defaultValue) {
 		});
 	}, []);
 	return [state, (value) => {
-		alepha.state.set(target, value);
+		alepha.store.set(target, value);
 	}];
 }
 
@@ -487,7 +487,8 @@ const NestedView = (props) => {
 	useEvents({
 		"react:transition:begin": async ({ previous, state: state$1 }) => {
 			const layer = previous.layers[index];
-			if (`${state$1.url.pathname}/`.startsWith(`${layer?.path}/`)) return;
+			if (!layer) return;
+			if (`${state$1.url.pathname}/`.startsWith(`${layer.path}/`)) return;
 			const animationExit = parseAnimation(layer.route?.animation, state$1, "exit");
 			if (animationExit) {
 				const duration = animationExit.duration || 200;
@@ -579,25 +580,35 @@ function parseAnimation(animationLike, state, type = "enter") {
 //#endregion
 //#region src/core/components/NotFound.tsx
 function NotFoundPage(props) {
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		style: {
-			height: "100vh",
+			width: "100%",
+			minHeight: "90vh",
+			boxSizing: "border-box",
 			display: "flex",
 			flexDirection: "column",
 			justifyContent: "center",
 			alignItems: "center",
 			textAlign: "center",
-			fontFamily: "sans-serif",
-			padding: "1rem",
+			fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+			padding: "2rem",
 			...props.style
 		},
-		children: /* @__PURE__ */ jsx("h1", {
+		children: [/* @__PURE__ */ jsx("div", {
 			style: {
-				fontSize: "1rem",
-				marginBottom: "0.5rem"
+				fontSize: "6rem",
+				fontWeight: 200,
+				lineHeight: 1
 			},
-			children: "404 - This page does not exist"
-		})
+			children: "404"
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: "0.875rem",
+				marginTop: "1rem",
+				opacity: .6
+			},
+			children: "Page not found"
+		})]
 	});
 }
 
@@ -626,6 +637,7 @@ var ReactPageProvider = class {
 						if (!path.includes(":") && !path.includes("*")) pages.push({
 							...page,
 							name: params[Object.keys(params)[0]],
+							staticName: page.name,
 							path,
 							...entry
 						});
@@ -856,7 +868,7 @@ var ReactPageProvider = class {
 		on: "configure",
 		handler: () => {
 			let hasNotFoundHandler = false;
-			const pages = this.alepha.descriptors($page);
+			const pages = this.alepha.primitives($page);
 			const hasParent = (it) => {
 				if (it.options.parent) return true;
 				for (const page of pages) if ((page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : []).includes(it)) return true;
@@ -969,8 +981,8 @@ var ReactServerProvider = class {
 	onConfigure = $hook({
 		on: "configure",
 		handler: async () => {
-			const ssrEnabled = this.alepha.descriptors($page).length > 0 && this.env.REACT_SSR_ENABLED !== false;
-			this.alepha.state.set("alepha.react.server.ssr", ssrEnabled);
+			const ssrEnabled = this.alepha.primitives($page).length > 0 && this.env.REACT_SSR_ENABLED !== false;
+			this.alepha.store.set("alepha.react.server.ssr", ssrEnabled);
 			if (this.alepha.isViteDev()) {
 				await this.configureVite(ssrEnabled);
 				return;
@@ -1011,8 +1023,7 @@ var ReactServerProvider = class {
 	async registerPages(templateLoader) {
 		const template = await templateLoader();
 		if (template) this.preprocessedTemplate = this.preprocessTemplate(template);
-		for (const page of this.pageApi.getPages()) {
-			if (page.children?.length) continue;
+		for (const page of this.pageApi.getPages()) if (page.component || page.lazy) {
 			this.log.debug(`+ ${page.match} -> ${page.name}`);
 			this.serverRouterProvider.createRoute({
 				...page,
@@ -1076,7 +1087,7 @@ var ReactServerProvider = class {
 			redirect
 		};
 		if (!options.html) {
-			this.alepha.state.set("alepha.react.router.state", state);
+			this.alepha.store.set("alepha.react.router.state", state);
 			return {
 				state,
 				html: renderToString(this.pageApi.root(state))
@@ -1109,13 +1120,15 @@ var ReactServerProvider = class {
 				onError: () => null,
 				layers: []
 			};
-			if (this.alepha.has(ServerLinksProvider)) this.alepha.state.set("alepha.server.request.apiLinks", await this.alepha.inject(ServerLinksProvider).getUserApiLinks({
+			state.name = route.name;
+			if (this.alepha.has(ServerLinksProvider)) this.alepha.store.set("alepha.server.request.apiLinks", await this.alepha.inject(ServerLinksProvider).getUserApiLinks({
 				user: serverRequest.user,
 				authorization: serverRequest.headers.authorization
 			}));
 			let target = route;
 			while (target) {
 				if (route.can && !route.can()) {
+					this.log.warn(`Access to page '${route.name}' is forbidden by can() check`);
 					reply.status = 403;
 					reply.headers["content-type"] = "text/plain";
 					return "Forbidden";
@@ -1129,7 +1142,10 @@ var ReactServerProvider = class {
 			this.serverTimingProvider.beginTiming("createLayers");
 			const { redirect } = await this.pageApi.createLayers(route, state);
 			this.serverTimingProvider.endTiming("createLayers");
-			if (redirect) return reply.redirect(redirect);
+			if (redirect) {
+				this.log.debug("Resolver resulted in redirection", { redirect });
+				return reply.redirect(redirect);
+			}
 			reply.headers["content-type"] = "text/html";
 			reply.headers["cache-control"] = "no-store, no-cache, must-revalidate, proxy-revalidate";
 			reply.headers.pragma = "no-cache";
@@ -1137,8 +1153,10 @@ var ReactServerProvider = class {
 			const html = this.renderToHtml(template, state);
 			if (html instanceof Redirection) {
 				reply.redirect(typeof html.redirect === "string" ? html.redirect : this.pageApi.href(html.redirect));
+				this.log.debug("Rendering resulted in redirection", { redirect: html.redirect });
 				return;
 			}
+			this.log.trace("Page rendered to HTML successfully");
 			const event = {
 				request: serverRequest,
 				state,
@@ -1152,7 +1170,7 @@ var ReactServerProvider = class {
 	}
 	renderToHtml(template, state, hydration = true) {
 		const element = this.pageApi.root(state);
-		this.alepha.state.set("alepha.react.router.state", state);
+		this.alepha.store.set("alepha.react.router.state", state);
 		this.serverTimingProvider.beginTiming("renderToString");
 		let app = "";
 		try {
@@ -1284,13 +1302,14 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 		};
 		await this.alepha.events.emit("react:action:begin", { type: "transition" });
 		await this.alepha.events.emit("react:transition:begin", {
-			previous: this.alepha.state.get("alepha.react.router.state"),
+			previous: this.alepha.store.get("alepha.react.router.state"),
 			state
 		});
 		try {
 			const { route, params } = this.match(pathname);
 			const query = {};
 			if (search) for (const [key, value] of new URLSearchParams(search).entries()) query[key] = String(value);
+			state.name = route?.page.name;
 			state.query = query;
 			state.params = params ?? {};
 			if (isPageRoute(route)) {
@@ -1326,7 +1345,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 			const layer = previous[i];
 			if (state.layers[i]?.name !== layer.name) this.pageApi.page(layer.name)?.onLeave?.();
 		}
-		this.alepha.state.set("alepha.react.router.state", state);
+		this.alepha.store.set("alepha.react.router.state", state);
 		await this.alepha.events.emit("react:action:end", { type: "transition" });
 		await this.alepha.events.emit("react:transition:end", { state });
 	}
@@ -1364,7 +1383,7 @@ var ReactBrowserProvider = class {
 	}
 	transitioning;
 	get state() {
-		return this.alepha.state.get("alepha.react.router.state");
+		return this.alepha.store.get("alepha.react.router.state");
 	}
 	/**
 	* Accessor for Document DOM API.
@@ -1481,7 +1500,7 @@ var ReactBrowserProvider = class {
 			const hydration = this.getHydrationState();
 			const previous = hydration?.layers ?? [];
 			if (hydration) {
-				for (const [key, value] of Object.entries(hydration)) if (key !== "layers") this.alepha.state.set(key, value);
+				for (const [key, value] of Object.entries(hydration)) if (key !== "layers") this.alepha.store.set(key, value);
 			}
 			await this.render({ previous });
 			const element = this.router.root(this.state);
@@ -1506,7 +1525,7 @@ var ReactRouter = class {
 	alepha = $inject(Alepha);
 	pageApi = $inject(ReactPageProvider);
 	get state() {
-		return this.alepha.state.get("alepha.react.router.state");
+		return this.alepha.store.get("alepha.react.router.state");
 	}
 	get pages() {
 		return this.pageApi.getPages();
@@ -1523,6 +1542,15 @@ var ReactRouter = class {
 		if (options.startWith && !isActive) isActive = current.startsWith(href);
 		return isActive;
 	}
+	node(name, config = {}) {
+		const page = this.pageApi.page(name);
+		return {
+			...page,
+			label: page.label ?? page.name,
+			href: this.path(name, config),
+			children: void 0
+		};
+	}
 	path(name, config = {}) {
 		return this.pageApi.pathname(name, {
 			params: {
@@ -2001,7 +2029,7 @@ const decode = (alepha, schema, data) => {
 /**
 * 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.
+* The React module enables building modern React applications using the `$page` primitive 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.
 *
@@ -2010,7 +2038,7 @@ const decode = (alepha, schema, data) => {
 */
 const AlephaReact = $module({
 	name: "alepha.react",
-	descriptors: [$page],
+	primitives: [$page],
 	services: [
 		ReactServerProvider,
 		ReactPageProvider,
@@ -2025,5 +2053,5 @@ const AlephaReact = $module({
 });
 
 //#endregion
-export { $page, AlephaContext, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, ErrorViewer_default as ErrorViewer, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptor, ReactBrowserProvider, ReactPageProvider, ReactRouter, ReactServerProvider, Redirection, RouterLayerContext, isPageRoute, reactBrowserOptions, reactServerOptions, ssrSchemaLoading, useAction, useActive, useAlepha, useClient, useEvents, useInject, useQueryParams, useRouter, useRouterState, useSchema, useStore };
+export { $page, AlephaContext, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, ErrorViewer_default as ErrorViewer, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PagePrimitive, ReactBrowserProvider, ReactPageProvider, ReactRouter, ReactServerProvider, Redirection, RouterLayerContext, isPageRoute, reactBrowserOptions, reactServerOptions, ssrSchemaLoading, useAction, useActive, useAlepha, useClient, useEvents, useInject, useQueryParams, useRouter, useRouterState, useSchema, useStore };
 //# sourceMappingURL=index.js.map