npm - @alepha/react - Versions diffs - 0.8.0 → 0.8.1 - Mend

@alepha/react 0.8.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md +153 -1
package/dist/index.browser.js +47 -14
package/dist/index.browser.js.map +1 -1
package/dist/index.cjs +162 -18
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +163 -29
package/dist/index.d.cts.map +1 -1
package/dist/index.d.ts +157 -23
package/dist/index.d.ts.map +1 -1
package/dist/index.js +167 -19
package/dist/index.js.map +1 -1
package/package.json +8 -7
package/src/components/NestedView.tsx +3 -1
package/src/descriptors/$page.ts +40 -40
package/src/hooks/RouterHookApi.ts +17 -0
package/src/hooks/useRouter.ts +1 -0
package/src/index.shared.ts +1 -0
package/src/index.ts +125 -3
package/src/providers/PageDescriptorProvider.ts +18 -13
package/src/providers/ReactBrowserProvider.ts +37 -4
package/src/providers/ReactBrowserRenderer.ts +20 -0
package/src/providers/ReactServerProvider.ts +4 -4

package/dist/index.cjs CHANGED Viewed

@@ -314,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;
@@ -412,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, "/") : "/";
@@ -439,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
@@ -447,6 +447,7 @@ var PageDescriptorProvider = class {
 				}
 				forceRefresh = true;
 			}
+			if (!route$1.resolve) continue;
 			try {
 				const props = await route$1.resolve?.({
 					...request,
@@ -493,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;
 			}
@@ -509,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 {
@@ -577,8 +579,8 @@ var PageDescriptorProvider = class {
 			};
 			for (const { value, key } of pages) value[__alepha_core.OPTIONS].name ??= key;
 			for (const { value } of pages) {
-				if (hasParent(value)) 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({
@@ -654,7 +656,7 @@ var ReactServerProvider = class {
 		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);
@@ -694,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()) {
@@ -975,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 = [];
@@ -1002,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;
@@ -1046,6 +1057,7 @@ var ReactBrowserProvider = class {
 				hydration
 			});
 			window.addEventListener("popstate", () => {
+				if (this.state.pathname === location.pathname) return;
 				this.render();
 			});
 		}
@@ -1055,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;
 	}
@@ -1138,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
@@ -1258,10 +1279,132 @@ 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
+*
+* **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);
+* ```
 *
-* Alepha React Module contains a router for client-side navigation and server-side rendering.
-* Routes can be defined using the `$page` descriptor.
+* **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
@@ -1279,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;