feat: now can use PranxRouter and select application mode.

LiasCode · LiasCode · commit e8313e36b3b2 · 2025-09-21T22:52:06.000-04:00
fix: remove  server css output files
diff --git a/examples/basic/pranx.config.ts b/examples/basic/pranx.config.ts
@@ -1,6 +1,5 @@
 import { PranxConfig } from "pranx";
 
 export default {
-  csr: true,
   esbuild: {},
 } satisfies PranxConfig;
diff --git a/examples/basic/src/App.tsx b/examples/basic/src/App.tsx
@@ -1,7 +1,13 @@
+import { PranxRouter } from "pranx/client";
 import type { PropsWithChildren } from "preact/compat";
 import { UserProvider } from "./context/user-context";
 import "./styles/styles.css";
 
-export function App(props: PropsWithChildren) {
-  return <UserProvider>{props.children}</UserProvider>;
+export default function App(props: PropsWithChildren) {
+  return (
+    <UserProvider>
+      <PranxRouter mode="spa" />
+      {props.children}
+    </UserProvider>
+  );
 }
diff --git a/examples/basic/src/entry-client.tsx b/examples/basic/src/entry-client.tsx
@@ -1,9 +1,4 @@
-import { mount, StartApp } from "pranx/client";
-import { App } from "./App";
+import { mount } from "pranx/client";
+import App from "./App";
 
-mount(
-  <App>
-    <StartApp />
-  </App>,
-  document.body
-);
+mount(<App />, document.body);
diff --git a/examples/basic/src/entry-server.tsx b/examples/basic/src/entry-server.tsx
@@ -1,6 +1,6 @@
 import type { ServerEntryProps } from "pranx";
 import { Meta, Scripts } from "pranx/server";
-import { App } from "./App";
+import App from "./App";
 
 export default function ServerEntry({ children }: ServerEntryProps) {
   return (
diff --git a/packages/pranx/FEATURES.md b/packages/pranx/FEATURES.md
@@ -0,0 +1,21 @@
+# FEATURES ROADMAP
+
+-[X] FSR (File-System-Routing)
+-[X] SSR (Server Side Rendering)
+-[X] SSG (Static Side Generation)
+-[X] Hydratation (Full)
+-[X] CSR (Client-Side-Routing)
+-[X] API routes for server endpoints
+-[X] Extendable user config
+-[ ] ISG (Incremental Static Side Generation)
+-[ ] Per page Metadata
+-[ ] Client Metadata manipulation
+-[ ] Dev Mode
+-[ ] Sass Plugin
+-[ ] Tailwindcss support v3
+-[X] Tailwindcss support v4
+-[X] Css modules support
+-[ ] Layouts
+-[ ] Custom Error Pages
+-[ ] Websockets
+-[ ] Graphql
diff --git a/packages/pranx/biome.json b/packages/pranx/biome.json
@@ -19,11 +19,6 @@
     }
   },
   "files": {
-    "includes": [
-      "src/**/*",
-      "!dist/**/*",
-      "!src/client/shared/exec-match.ts",
-      "!**/node_modules/**/*"
-    ]
+    "includes": ["src/**/*", "!dist/**/*", "!**/node_modules/**/*"]
   }
 }
diff --git a/packages/pranx/src/build/bundle/browser.ts b/packages/pranx/src/build/bundle/browser.ts
@@ -65,7 +65,6 @@ export async function bundle_browser(options: { optimize: boolean; user_config:
 
     define: {
       ...(options.user_config.esbuild?.define || {}),
-      "window.pranx.csr_enabled": String(options.user_config.csr),
     },
 
     plugins: [
diff --git a/packages/pranx/src/build/bundle/server.ts b/packages/pranx/src/build/bundle/server.ts
@@ -1,6 +1,7 @@
 import { mdx_pranx_plugin } from "@/plugins/mdx-plugin";
 import { tailwindcss_plugin } from "@/plugins/tailwind-plugin";
 import esbuild from "esbuild";
+import fse from "fs-extra";
 import { glob } from "glob";
 import { join } from "pathe";
 import type { PranxConfig } from "types/index";
@@ -11,6 +12,7 @@ export async function bundle_server(options: { optimize: boolean; user_config: P
     [
       join(SOURCE_PAGES_DIR, "**/*{page,route}.{js,ts,tsx,jsx}"),
       join(SOURCE_DIR, "entry-server.{tsx,jsx}"),
+      join(SOURCE_DIR, "App.{tsx,jsx}"),
     ],
     {
       nodir: true,
@@ -74,5 +76,14 @@ export async function bundle_server(options: { optimize: boolean; user_config: P
     ],
   });
 
+  const css_emited = await glob([join(OUTPUT_BUNDLE_SERVER_DIR, "**/*.css")], {
+    nodir: true,
+    absolute: true,
+  });
+
+  for (const css_path of css_emited) {
+    await fse.remove(css_path);
+  }
+
   return server_bundle_result;
 }
diff --git a/packages/pranx/src/client/app-context.tsx b/packages/pranx/src/client/app-context.tsx
@@ -85,7 +85,7 @@ export const AppContextProvider = (props: PropsWithChildren) => {
 
 export const _useAppContext = () => {
   const c = useContext(_app_context);
-  if (!c) throw new Error("useAppContext must be used within a AppContextProvider");
+  if (!c) throw new Error("_useAppContext must be used within a AppContextProvider");
   return c;
 };
 
diff --git a/packages/pranx/src/client/components/link.tsx b/packages/pranx/src/client/components/link.tsx
@@ -10,7 +10,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, forwardedRe
     throw new Error("Link element must provide a `to` property");
   }
 
-  if (typeof window !== "undefined" && window.pranx.csr_enabled === true) {
+  if (typeof window !== "undefined" && window.pranx.router_mode === "spa") {
     const { set } = _useAppContext();
     return (
       <a
diff --git a/packages/pranx/src/client/public-exports.ts b/packages/pranx/src/client/public-exports.ts
@@ -1,4 +1,7 @@
 export { useAppContext } from "./app-context";
+
 export { Link } from "./components/link";
+
 export { mount } from "./mount";
-export { StartApp } from "./start-app";
+
+export { PranxRouter } from "./router";
diff --git a/packages/pranx/src/client/router.tsx b/packages/pranx/src/client/router.tsx
@@ -1,57 +1,29 @@
-import { ErrorBoundary, lazy, LocationProvider, Route, Router } from "preact-iso";
-import { _useAppContext } from "./app-context";
-import { NotFoundPage } from "./components/not-found-page";
-import { ServerPage } from "./components/server-page";
-
-export function AppRouter() {
-  const { onRouteWillChange } = _useAppContext();
-
-  return (
-    <LocationProvider>
-      <ErrorBoundary onError={console.error}>
-        <Router onRouteChange={(url) => onRouteWillChange(url)}>
-          {window.__PRANX_HYDRATE_DATA__.routes.map((r) => {
-            const Page = lazy(() => import(r.module));
-
-            return (
-              <Route
-                key={r.path}
-                path={r.path_parsed_for_routing}
-                component={() => {
-                  let props = r.props;
-
-                  if (r.rendering_kind === "server-side") {
-                    return (
-                      <ServerPage>
-                        <Page />
-                      </ServerPage>
-                    );
-                  }
-
-                  if (r.static_generated_routes.length === 0) {
-                    return <Page {...props} />;
-                  }
-
-                  // For static generated subroutes
-                  for (const route of r.static_generated_routes) {
-                    if (route.path === window.location.pathname) {
-                      props = route.props;
-                      break;
-                    }
-                  }
-
-                  return <Page {...props} />;
-                }}
-              />
-            );
-          })}
-
-          <Route
-            default
-            component={NotFoundPage}
-          />
-        </Router>
-      </ErrorBoundary>
-    </LocationProvider>
-  );
+import type { ComponentChildren, VNode } from "preact";
+import type { PranxRouterProps } from "types/client";
+import { AppContextProvider } from "./app-context";
+import { RouterMPA } from "./routing/router-mpa";
+import { RouterSPA } from "./routing/router-spa";
+
+export function PranxRouter(props: PranxRouterProps): VNode<any> | ComponentChildren {
+  const { mode = "spa", children } = props;
+
+  if (typeof window === "undefined") return children;
+
+  window.pranx = {
+    router_mode: mode,
+  };
+
+  if (mode === "mpa") {
+    return <RouterMPA />;
+  }
+
+  if (mode === "spa") {
+    return (
+      <AppContextProvider>
+        <RouterSPA />
+      </AppContextProvider>
+    );
+  }
+
+  throw new Error("The mode should be 'spa' or 'mpa'");
 }
diff --git a/packages/pranx/src/client/routing/router-mpa.tsx b/packages/pranx/src/client/routing/router-mpa.tsx
@@ -1,15 +1,16 @@
+import type { VNode } from "preact";
 import { lazy } from "preact-iso";
 import { Suspense } from "preact/compat";
-import { find_route } from "./shared/find-route";
+import { find_route } from "../shared/find-route";
 
-export function AppWithOutCsr() {
+export function RouterMPA() {
   const current_route = find_route(window.location.pathname);
 
   if (current_route === null) {
     throw new Error("Route not found");
   }
 
-  const Page = lazy(() => import(current_route.module));
+  const Page = lazy<() => VNode<any>>(() => import(current_route.module));
 
   let props = current_route.props;
 
diff --git a/packages/pranx/src/client/routing/router-spa.tsx b/packages/pranx/src/client/routing/router-spa.tsx
@@ -0,0 +1,58 @@
+import type { VNode } from "preact";
+import { ErrorBoundary, lazy, LocationProvider, Route, Router } from "preact-iso";
+import { _useAppContext } from "../app-context";
+import { NotFoundPage } from "../components/not-found-page";
+import { ServerPage } from "../components/server-page";
+
+export function RouterSPA() {
+  const { onRouteWillChange } = _useAppContext();
+
+  return (
+    <LocationProvider>
+      <ErrorBoundary onError={console.error}>
+        <Router onRouteChange={(url) => onRouteWillChange(url)}>
+          {window.__PRANX_HYDRATE_DATA__.routes.map((r) => {
+            const Page = lazy<() => VNode<any>>(() => import(r.module));
+
+            return (
+              <Route
+                key={r.path}
+                path={r.path_parsed_for_routing}
+                component={() => {
+                  let props = r.props;
+
+                  if (r.rendering_kind === "server-side") {
+                    return (
+                      <ServerPage>
+                        <Page />
+                      </ServerPage>
+                    );
+                  }
+
+                  if (r.static_generated_routes.length === 0) {
+                    return <Page {...props} />;
+                  }
+
+                  // For static generated subroutes
+                  for (const route of r.static_generated_routes) {
+                    if (route.path === window.location.pathname) {
+                      props = route.props;
+                      break;
+                    }
+                  }
+
+                  return <Page {...props} />;
+                }}
+              />
+            );
+          })}
+
+          <Route
+            default
+            component={NotFoundPage}
+          />
+        </Router>
+      </ErrorBoundary>
+    </LocationProvider>
+  );
+}
diff --git a/packages/pranx/src/client/shared/exec-match.ts b/packages/pranx/src/client/shared/exec-match.ts
@@ -1,4 +1,5 @@
 // @ts-nocheck
+/** biome-ignore-all lint/suspicious/noImplicitAnyLet: <> */
 
 export const exec_route_match = (url: string, route: string, matches = {}) => {
   url = url.split("/").filter(Boolean);
diff --git a/packages/pranx/src/client/start-app.tsx b/packages/pranx/src/client/start-app.tsx
diff --git a/packages/pranx/src/config/index.ts b/packages/pranx/src/config/index.ts
@@ -7,7 +7,6 @@ const DEFAULT_CONFIG: PranxConfig = {
     define: {},
     plugins: [],
   },
-  csr: true,
 };
 
 let UserPranxConfig: PranxConfig | null = null;
diff --git a/packages/pranx/types/client.d.ts b/packages/pranx/types/client.d.ts
@@ -1,4 +1,5 @@
 import { ComponentProps, FunctionalComponent, Ref, VNode } from "preact";
+import { PropsWithChildren } from "preact/compat";
 
 export type LinkProps = ComponentProps<"a"> & {
   to: string;
@@ -17,4 +18,11 @@ export declare const useAppContext: () => {
 
 export function mount(app: any, root: Element | DocumentFragment): void;
 
-export function StartApp(): VNode<any>;
+export type PranxRouterProps = PropsWithChildren & {
+  /**
+   * @default "spa"
+   */
+  mode: "spa" | "mpa";
+};
+
+export function PranxRouter(props: PranxRouterProps): VNode<any> | ComponentChildren;
diff --git a/packages/pranx/types/index.d.ts b/packages/pranx/types/index.d.ts
@@ -119,18 +119,13 @@ declare global {
     __PRANX_HYDRATE_DATA__: HYDRATE_DATA;
 
     pranx: {
-      csr_enabled: boolean;
+      router_mode: "spa" | "mpa";
     };
   }
 }
 
 // Config
 export declare type PranxConfig = {
-  /**
-   * Enable client side routing.
-   * If set to false, pranx don't will use `preact-iso` in the client for spa routing
-   */
-  csr?: boolean;
   /**
    * Extends esbuild config.
    */

Original file line number	Diff line number	Diff line change
`@@ -19,11 +19,6 @@`
`19`	`19`	`}`
`20`	`20`	`},`
`21`	`21`	`"files": {`
`22`		`- "includes": [`
`23`		`- "src/*/",`
`24`		`- "!dist/*/",`
`25`		`- "!src/client/shared/exec-match.ts",`
`26`		`- "!/node_modules//*"`
`27`		`- ]`
	`22`	`+ "includes": ["src/*/", "!dist/*/", "!/node_modules//*"]`
`28`	`23`	`}`
`29`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, forwardedRe`
`10`	`10`	throw new Error("Link element must provide a `to` property");
`11`	`11`	`}`
`12`	`12`
`13`		`- if (typeof window !== "undefined" && window.pranx.csr_enabled === true) {`
	`13`	`+ if (typeof window !== "undefined" && window.pranx.router_mode === "spa") {`
`14`	`14`	`const { set } = _useAppContext();`
`15`	`15`	`return (`
`16`	`16`	`<a`