feat: add code for test contexts

LiasCode · LiasCode · commit 9073434e8ab1 · 2025-09-18T21:30:50.000-04:00
diff --git a/examples/basic/src/App.tsx b/examples/basic/src/App.tsx
@@ -0,0 +1,7 @@
+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>;
+}
diff --git a/examples/basic/src/components/Header.tsx b/examples/basic/src/components/Header.tsx
@@ -14,6 +14,14 @@ export function Header() {
               Home
             </Link>
           </li>
+          <li>
+            <Link
+              to="/users"
+              className="text-white hover:text-indigo-200 transition-colors font-medium"
+            >
+              Users
+            </Link>
+          </li>
           <li>
             <Link
               to="/about"
diff --git a/examples/basic/src/context/user-context.tsx b/examples/basic/src/context/user-context.tsx
@@ -0,0 +1,44 @@
+import { createContext } from "preact";
+import type { PropsWithChildren } from "preact/compat";
+import { useContext, useState } from "preact/hooks";
+
+type User = {
+  id: string;
+  name: string;
+  age: number;
+};
+
+const userContext = createContext<{
+  user: User | null;
+  setUser: (u: User | null) => void;
+}>({
+  user: null,
+  setUser() {},
+});
+
+export const UserProvider = (props: PropsWithChildren) => {
+  const [user, setUser] = useState<User | null>({
+    id: "1",
+    age: 20,
+    name: "Raul",
+  });
+
+  return (
+    <userContext.Provider
+      value={{
+        setUser: (u) => {
+          setUser(u);
+        },
+        user,
+      }}
+    >
+      {props.children}
+    </userContext.Provider>
+  );
+};
+
+export const useUserContext = () => {
+  const c = useContext(userContext);
+  if (!c) throw new Error("useUserContext should be inside of an UserProvider");
+  return c;
+};
diff --git a/examples/basic/src/entry-client.tsx b/examples/basic/src/entry-client.tsx
@@ -1,4 +1,9 @@
 import { mount, StartApp } from "pranx/client";
-import "./styles/styles.css";
+import { App } from "./App";
 
-mount(<StartApp />, document.body);
+mount(
+  <App>
+    <StartApp />
+  </App>,
+  document.body
+);
diff --git a/examples/basic/src/entry-server.tsx b/examples/basic/src/entry-server.tsx
@@ -1,5 +1,6 @@
 import type { ServerEntryProps } from "pranx";
 import { Meta, Scripts } from "pranx/server";
+import { App } from "./App";
 
 export default function ServerEntry({ children }: ServerEntryProps) {
   return (
@@ -35,7 +36,7 @@ export default function ServerEntry({ children }: ServerEntryProps) {
         <Meta />
       </head>
       <body class="dark">
-        {children}
+        <App>{children}</App>
         <Scripts />
       </body>
     </html>
diff --git a/examples/basic/src/pages/about/page.tsx b/examples/basic/src/pages/about/page.tsx
@@ -2,14 +2,28 @@ import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import type { GetStaticPropsFunction, InferStaticProps } from "pranx";
 import { Header } from "src/components/Header";
+import { useUserContext } from "src/context/user-context";
 import aboutStyles from "./about.module.css";
 
 export default function AboutPage(props: InferStaticProps<typeof getStaticProps>) {
+  const { setUser } = useUserContext();
   return (
     <div>
       <Header />
       <h1 className={aboutStyles.title}>About Page</h1>
       <pre>{props.file_content}</pre>
+      <button
+        type="button"
+        onClick={() => {
+          setUser({
+            id: "29",
+            age: Math.trunc(Math.random() * 20),
+            name: "Jose",
+          });
+        }}
+      >
+        Update info
+      </button>
     </div>
   );
 }
diff --git a/examples/basic/src/pages/users/page.tsx b/examples/basic/src/pages/users/page.tsx
@@ -0,0 +1,32 @@
+import { Header } from "src/components/Header";
+import { useUserContext } from "src/context/user-context";
+
+export default function UsersPage() {
+  const { user, setUser } = useUserContext();
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Header />
+
+      <div class="flex flex-col gap-4 p-6 max-w-3xl mx-auto">
+        <h1>Users Page</h1>
+        <span>ID: {user?.id}</span>
+        <span>Name: {user?.name}</span>
+        <span>Age: {user?.age}</span>
+
+        <button
+          type="button"
+          onClick={() => {
+            setUser({
+              id: "29",
+              age: Math.trunc(Math.random() * 20),
+              name: "Jose",
+            });
+          }}
+        >
+          Update info
+        </button>
+      </div>
+    </div>
+  );
+}
