Merge pull request #41 from mbicknese/demo-upgrades

Demo upgrades

examples/demo/.gitignore

@@ -4,3 +4,6 @@
 .env.test.local
 .env.production.local
 .env.local
+
+# Fresh build directory
+_fresh/

examples/demo/README.md

@@ -9,3 +9,9 @@ deno task start
 ```
 
 This will watch the project directory and restart as necessary.
+
+
+### Testing locally
+
+Swap out "x-pentagon" and "pentagon" in the `import_map.json` to switch between testing the local library or the latest
+release.

examples/demo/components/ui/button.tsx

@@ -1,56 +1,12 @@
 import { JSX } from "preact";
-import {
-  cva,
-  type VariantProps,
-} from "https://esm.sh/[email protected]";
-// import { cva, type VariantProps } from "npm:class-variance-authority"
-import { twMerge } from "https://esm.sh/[email protected]";
 
-const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline text-primary",
-      },
-      size: {
-        default: "h-10 py-2 px-4",
-        sm: "h-9 px-3 rounded-md",
-        lg: "h-11 px-8 rounded-md",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends
-    JSX.HTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = (
-  { className, variant, size, asChild = false, ...props }: ButtonProps,
-) => {
-  // const Comp = asChild ? Slot : "button"
+export default function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
   return (
     <button
-      className={twMerge(buttonVariants({ variant, size, className }))}
       {...props}
+      class={`px-3 py-2 bg-white rounded border(gray-500 2) hover:bg-gray-200 active:bg-gray-300 disabled:(opacity-50 cursor-not-allowed) ${
+        props.class ?? ""
+      }`}
     />
   );
-};
-
-export { Button, buttonVariants };
+}

examples/demo/components/ui/input.tsx

@@ -1,19 +1,12 @@
 import { JSX } from "preact";
-import { twMerge } from "https://esm.sh/[email protected]";
 
-export interface InputProps extends JSX.HTMLAttributes<HTMLInputElement> {}
-
-const Input = ({ className, type, ...props }: InputProps) => {
+export default function Input(props: JSX.HTMLAttributes<HTMLInputElement>) {
   return (
     <input
-      type={type}
-      className={twMerge(
-        "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className as string,
-      )}
       {...props}
+      class={`px-3 py-2 bg-white rounded border(gray-500 2) disabled:(opacity-50 cursor-not-allowed) ${
+        props.class ?? ""
+      }`}
     />
   );
-};
-
-export { Input };
+}

examples/demo/deno.json

@@ -1,11 +1,12 @@
 {
   "lock": false,
   "tasks": {
-    "start": "deno run --unstable -A --watch=static/,routes/ dev.ts"
+    "start": "deno run --unstable -A --watch=static/,routes/ dev.ts",
+    "build": "deno run -A dev.ts build",
+    "preview": "deno run -A main.ts"
   },
+  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
   "importMap": "./import_map.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact"
-  }
+  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
+  "exclude": ["**/_fresh/*"]
 }

examples/demo/fresh.gen.ts

@@ -1,28 +1,21 @@
-// DO NOT EDIT. This file is generated by fresh.
+// DO NOT EDIT. This file is generated by Fresh.
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import config from "./deno.json" assert { type: "json" };
-import * as $0 from "./routes/[name].tsx";
-import * as $1 from "./routes/_middleware.ts";
-import * as $2 from "./routes/api/joke.ts";
-import * as $3 from "./routes/index.tsx";
-import * as $$0 from "./islands/Counter.tsx";
-import * as $$1 from "./islands/SubmitTask.tsx";
+import * as $_app from "./routes/_app.tsx";
+import * as $_middleware from "./routes/_middleware.ts";
+import * as $index from "./routes/index.tsx";
+
+import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
-    "./routes/[name].tsx": $0,
-    "./routes/_middleware.ts": $1,
-    "./routes/api/joke.ts": $2,
-    "./routes/index.tsx": $3,
-  },
-  islands: {
-    "./islands/Counter.tsx": $$0,
-    "./islands/SubmitTask.tsx": $$1,
+    "./routes/_app.tsx": $_app,
+    "./routes/_middleware.ts": $_middleware,
+    "./routes/index.tsx": $index,
   },
+  islands: {},
   baseUrl: import.meta.url,
-  config,
-};
+} satisfies Manifest;
 
 export default manifest;

examples/demo/import_map.json

@@ -1,13 +1,17 @@
 {
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.1.6/",
-    "preact": "https://esm.sh/preact@10.13.1",
-    "preact/": "https://esm.sh/preact@10.13.1/",
+    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
+    "preact": "https://esm.sh/preact@10.19.2",
+    "preact/": "https://esm.sh/preact@10.19.2/",
     "preact-render-to-string": "https://esm.sh/*[email protected]",
-    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
-    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
-    "twind": "https://esm.sh/[email protected]",
-    "twind/": "https://esm.sh/[email protected]/",
-    "$std/": "https://deno.land/[email protected]/"
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "tailwindcss": "npm:[email protected]",
+    "tailwindcss/": "npm:/[email protected]/",
+    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
+    "$std/": "https://deno.land/[email protected]/",
+    "pentagon": "https://deno.land/x/[email protected]/mod.ts",
+    "x-pentagon": "../../mod.ts",
+    "zod": "https://deno.land/x/[email protected]/mod.ts"
   }
 }

examples/demo/lib/db.ts

@@ -1,14 +1,14 @@
-import { createPentagon } from "https://deno.land/x/pentagon@v0.0.2/mod.ts";
-import { z } from "https://deno.land/x/zod@v3.21.4/mod.ts";
+import { createPentagon } from "pentagon";
+import { z } from "zod";
 
 export const User = z.object({
-  id: z.string().uuid().describe("primary, unique"),
+  id: z.string().uuid().describe("primary"),
   createdAt: z.date(),
   name: z.string(),
 });
 
 export const TodoTask = z.object({
-  id: z.string().uuid().describe("primary, unique"),
+  id: z.string().uuid().describe("primary"),
   userId: z.string().uuid(),
   createdAt: z.date(),
   description: z.string(),
@@ -21,7 +21,7 @@ export const db = createPentagon(kv, {
   users: {
     schema: User,
     relations: {
-      tasks: ["tasks", [TodoTask], undefined, "userId"],
+      tasks: ["tasks", [TodoTask], "", "userId"],
     },
   },
   tasks: {
@@ -32,12 +32,12 @@ export const db = createPentagon(kv, {
   },
 });
 
-export async function createUser() {
-  return await db.users.create({
+export function createUser() {
+  return db.users.create({
     data: {
       id: crypto.randomUUID(),
       createdAt: new Date(),
-      name: "Random",
+      name: "Anonymous",
     },
   });
 }

examples/demo/main.ts

@@ -3,13 +3,13 @@
 /// <reference lib="dom.iterable" />
 /// <reference lib="dom.asynciterable" />
 /// <reference lib="deno.ns" />
+/// <reference lib="deno.unstable" />
 
 import "$std/dotenv/load.ts";
 
 import { start } from "$fresh/server.ts";
 import manifest from "./fresh.gen.ts";
 
-import twindPlugin from "$fresh/plugins/twind.ts";
-import twindConfig from "./twind.config.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
 
-await start(manifest, { plugins: [twindPlugin(twindConfig)] });
+await start(manifest, { plugins: [tailwind()] });

examples/demo/routes/_app.tsx

@@ -0,0 +1,17 @@
+import { PageProps } from "$fresh/server.ts";
+
+export default function App({ Component }: PageProps) {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="/styles.css" />
+        <title>demo</title>
+      </head>
+      <body>
+        <Component />
+      </body>
+    </html>
+  );
+}

examples/demo/routes/_middleware.ts

@@ -1,29 +1,39 @@
-import { MiddlewareHandlerContext } from "$fresh/server.ts";
-import { createUser } from "../lib/db.ts";
+import { getCookies, setCookie } from "$std/http/cookie.ts";
+import { FreshContext } from "$fresh/server.ts";
+import { createUser, db } from "../lib/db.ts";
 
-interface State {
-  data: string;
-}
+type State = {
+  user: { id: string };
+};
 
 export async function handler(
-  _: Request,
-  ctx: MiddlewareHandlerContext<State>,
+  req: Request,
+  ctx: FreshContext<State>,
 ) {
-  const resp = await ctx.next();
-  const userId = resp.headers.get("userid");
-
-  if (!userId) {
-    const createdUser = await createUser();
-    if (!createdUser) {
-      return new Response(`Oops! Something went wrong!`, { status: 500 });
+  const cookies = getCookies(req.headers);
+  if (ctx.destination !== "route" || cookies.userid != null) {
+    if (cookies.userid) {
+      ctx.state.user = await db.users.findFirst({
+        where: { id: cookies.userid },
+      });
     }
-    const expirationDate = new Date();
-    expirationDate.setMonth(expirationDate.getMonth() + 1);
-    resp.headers.set(
-      `set-cookie`,
-      `userid=${createdUser.id}; Path=/; Expires=${expirationDate.toUTCString()}; HttpOnly`,
-    );
+    return ctx.next();
   }
 
+  const createdUser = await createUser();
+  if (!createdUser) {
+    return new Response(`Oops! Something went wrong!`, { status: 500 });
+  }
+  ctx.state.user = createdUser;
+
+  const resp = await ctx.next();
+  const expirationDate = new Date();
+  expirationDate.setMonth(expirationDate.getMonth() + 1);
+  setCookie(resp.headers, {
+    name: "userid",
+    value: createdUser.id,
+    expires: expirationDate,
+  });
+
   return resp;
 }