@alepha/react 0.8.1 → 0.9.1

package/README.md

@@ -23,127 +23,6 @@ The React module enables building modern React applications using the `$page` de
 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);
-```
-
-**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>
-    ),
-  });
-}
-```
-
 ## API Reference
 
 ### Descriptors

package/dist/index.browser.js

@@ -1,4 +1,4 @@
-import { $hook, $inject, $logger, Alepha, KIND, NotImplementedError, OPTIONS, __bind, __descriptor, t } from "@alepha/core";
+import { $env, $hook, $inject, $logger, $module, Alepha, Descriptor, KIND, NotImplementedError, createDescriptor, t } from "@alepha/core";
 import { AlephaServer } from "@alepha/server";
 import { AlephaServerLinks, LinkProvider } from "@alepha/server-links";
 import { RouterProvider } from "@alepha/router";
@@ -7,21 +7,25 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createRoot, hydrateRoot } from "react-dom/client";
 
 //#region src/descriptors/$page.ts
-const KEY = "PAGE";
 /**
 * Main descriptor for defining a React route in the application.
 */
 const $page = (options) => {
-	__descriptor(KEY);
-	return {
-		[KIND]: KEY,
-		[OPTIONS]: options,
-		render: () => {
-			throw new NotImplementedError(KEY);
-		}
-	};
+	return createDescriptor(PageDescriptor, options);
 };
-$page[KIND] = KEY;
+var PageDescriptor = class extends Descriptor {
+	get name() {
+		return this.options.name ?? this.config.propertyKey;
+	}
+	/**
+	* For testing or build purposes, this will render the page (with or without the HTML layout) and return the HTML and context.
+	* Only valid for server-side rendering, it will throw an error if called on the client-side.
+	*/
+	async render(options) {
+		throw new NotImplementedError("");
+	}
+};
+$page[KIND] = PageDescriptor;
 
 //#endregion
 //#region src/components/NotFound.tsx
@@ -67,23 +71,11 @@ const ClientOnly = (props) => {
 };
 var ClientOnly_default = ClientOnly;
 
-//#endregion
-//#region src/contexts/RouterContext.ts
-const RouterContext = createContext(void 0);
-
-//#endregion
-//#region src/hooks/useAlepha.ts
-const useAlepha = () => {
-	const routerContext = useContext(RouterContext);
-	if (!routerContext) throw new Error("useAlepha must be used within a RouterProvider");
-	return routerContext.alepha;
-};
-
 //#endregion
 //#region src/components/ErrorViewer.tsx
-const ErrorViewer = ({ error }) => {
+const ErrorViewer = ({ error, alepha }) => {
 	const [expanded, setExpanded] = useState(false);
-	const isProduction = useAlepha().isProduction();
+	const isProduction = alepha.isProduction();
 	if (isProduction) return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
 	const stackLines = error.stack?.split("\n") ?? [];
 	const previewLines = stackLines.slice(0, 5);
@@ -227,6 +219,10 @@ const ErrorViewerProduction = () => {
 	});
 };
 
+//#endregion
+//#region src/contexts/RouterContext.ts
+const RouterContext = createContext(void 0);
+
 //#endregion
 //#region src/contexts/RouterLayerContext.ts
 const RouterLayerContext = createContext(void 0);
@@ -337,7 +333,7 @@ var RedirectionError = class extends Error {
 const envSchema$1 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
 var PageDescriptorProvider = class {
 	log = $logger();
-	env = $inject(envSchema$1);
+	env = $env(envSchema$1);
 	alepha = $inject(Alepha);
 	pages = [];
 	getPages() {
@@ -510,7 +506,10 @@ var PageDescriptorProvider = class {
 		return void 0;
 	}
 	renderError(error) {
-		return createElement(ErrorViewer_default, { error });
+		return createElement(ErrorViewer_default, {
+			error,
+			alepha: this.alepha
+		});
 	}
 	renderEmptyView() {
 		return createElement(NestedView_default, {});
@@ -543,18 +542,17 @@ var PageDescriptorProvider = class {
 		on: "configure",
 		handler: () => {
 			let hasNotFoundHandler = false;
-			const pages = this.alepha.getDescriptorValues($page);
+			const pages = this.alepha.descriptors($page);
 			const hasParent = (it) => {
 				for (const page of pages) {
-					const children = page.value[OPTIONS].children ? Array.isArray(page.value[OPTIONS].children) ? page.value[OPTIONS].children : page.value[OPTIONS].children() : [];
+					const children = page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : [];
 					if (children.includes(it)) return true;
 				}
 			};
-			for (const { value, key } of pages) value[OPTIONS].name ??= key;
-			for (const { value } of pages) {
-				if (value[OPTIONS].path === "/*") hasNotFoundHandler = true;
-				if (hasParent(value)) continue;
-				this.add(this.map(pages, value));
+			for (const page of pages) {
+				if (page.options.path === "/*") hasNotFoundHandler = true;
+				if (hasParent(page)) continue;
+				this.add(this.map(pages, page));
 			}
 			if (!hasNotFoundHandler && pages.length > 0) this.add({
 				path: "/*",
@@ -568,9 +566,10 @@ var PageDescriptorProvider = class {
 		}
 	});
 	map(pages, target) {
-		const children = target[OPTIONS].children ? Array.isArray(target[OPTIONS].children) ? target[OPTIONS].children : target[OPTIONS].children() : [];
+		const children = target.options.children ? Array.isArray(target.options.children) ? target.options.children : target.options.children() : [];
 		return {
-			...target[OPTIONS],
+			...target.options,
+			name: target.name,
 			parent: void 0,
 			children: children.map((it) => this.map(pages, it))
 		};
@@ -808,7 +807,7 @@ var ReactBrowserProvider = class {
 				hydration
 			});
 			window.addEventListener("popstate", () => {
-				if (this.state.pathname === location.pathname) return;
+				if (this.state.pathname === this.url) return;
 				this.render();
 			});
 		}
@@ -821,7 +820,7 @@ const envSchema = t.object({ REACT_ROOT_ID: t.string({ default: "root" }) });
 var ReactBrowserRenderer = class {
 	browserProvider = $inject(ReactBrowserProvider);
 	browserRouterProvider = $inject(BrowserRouterProvider);
-	env = $inject(envSchema);
+	env = $env(envSchema);
 	log = $logger();
 	root;
 	options = { scrollRestoration: "top" };
@@ -948,9 +947,9 @@ const useRouter = () => {
 	const layer = useContext(RouterLayerContext);
 	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
 	const pages = useMemo(() => {
-		return ctx.alepha.get(PageDescriptorProvider).getPages();
+		return ctx.alepha.inject(PageDescriptorProvider).getPages();
 	}, []);
-	return useMemo(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0), [layer]);
+	return useMemo(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, ctx.alepha.isBrowser() ? ctx.alepha.inject(ReactBrowserProvider) : void 0), [layer]);
 };
 
 //#endregion
@@ -958,11 +957,11 @@ const useRouter = () => {
 const Link = (props) => {
 	React.useContext(RouterContext);
 	const router = useRouter();
-	const to = typeof props.to === "string" ? props.to : props.to[OPTIONS].path;
+	const to = typeof props.to === "string" ? props.to : props.to.options.path;
 	if (!to) return null;
-	const can = typeof props.to === "string" ? void 0 : props.to[OPTIONS].can;
+	const can = typeof props.to === "string" ? void 0 : props.to.options.can;
 	if (can && !can()) return null;
-	const name = typeof props.to === "string" ? void 0 : props.to[OPTIONS].name;
+	const name = typeof props.to === "string" ? void 0 : props.to.options.name;
 	const anchorProps = {
 		...props,
 		to: void 0
@@ -1009,12 +1008,20 @@ const useActive = (path) => {
 	};
 };
 
+//#endregion
+//#region src/hooks/useAlepha.ts
+const useAlepha = () => {
+	const routerContext = useContext(RouterContext);
+	if (!routerContext) throw new Error("useAlepha must be used within a RouterProvider");
+	return routerContext.alepha;
+};
+
 //#endregion
 //#region src/hooks/useInject.ts
 const useInject = (clazz) => {
 	const ctx = useContext(RouterContext);
 	if (!ctx) throw new Error("useRouter must be used within a <RouterProvider>");
-	return useMemo(() => ctx.alepha.get(clazz), []);
+	return useMemo(() => ctx.alepha.inject(clazz), []);
 };
 
 //#endregion
@@ -1069,12 +1076,18 @@ const useRouterState = () => {
 
 //#endregion
 //#region src/index.browser.ts
-var AlephaReact = class {
-	name = "alepha.react";
-	$services = (alepha) => alepha.with(AlephaServer).with(AlephaServerLinks).with(PageDescriptorProvider).with(ReactBrowserProvider).with(BrowserRouterProvider).with(ReactBrowserRenderer);
-};
-__bind($page, AlephaReact);
+const AlephaReact = $module({
+	name: "alepha.react",
+	descriptors: [$page],
+	services: [
+		PageDescriptorProvider,
+		ReactBrowserRenderer,
+		BrowserRouterProvider,
+		ReactBrowserProvider
+	],
+	register: (alepha) => alepha.with(AlephaServer).with(AlephaServerLinks).with(PageDescriptorProvider).with(ReactBrowserProvider).with(BrowserRouterProvider).with(ReactBrowserRenderer)
+});
 
 //#endregion
-export { $page, AlephaReact, BrowserRouterProvider, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptorProvider, ReactBrowserProvider, RedirectionError, RouterContext, RouterHookApi, RouterLayerContext, isPageRoute, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState };
+export { $page, AlephaReact, BrowserRouterProvider, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptor, PageDescriptorProvider, ReactBrowserProvider, RedirectionError, RouterContext, RouterHookApi, RouterLayerContext, isPageRoute, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState };
 //# sourceMappingURL=index.browser.js.map