alchemy 0.37.2 → 0.38.0

package/templates/tanstack-start/src/routes/_pathlessLayout/_nested-layout.tsx

@@ -0,0 +1,34 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_pathlessLayout/_nested-layout')({
+  component: LayoutComponent,
+})
+
+function LayoutComponent() {
+  return (
+    <div>
+      <div>I'm a nested layout</div>
+      <div className="flex gap-2 border-b">
+        <Link
+          to="/route-a"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Go to route A
+        </Link>
+        <Link
+          to="/route-b"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Go to route B
+        </Link>
+      </div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}

package/templates/tanstack-start/src/routes/_pathlessLayout.tsx

@@ -0,0 +1,16 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_pathlessLayout')({
+  component: LayoutComponent,
+})
+
+function LayoutComponent() {
+  return (
+    <div className="p-2">
+      <div className="border-b">I'm a layout</div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}

package/templates/tanstack-start/src/routes/api/users.$userId.ts

@@ -0,0 +1,28 @@
+import { createServerFileRoute } from '@tanstack/react-start/server'
+import { json } from '@tanstack/react-start'
+import type { User } from '~/utils/users'
+
+export const ServerRoute = createServerFileRoute('/api/users/$userId').methods({
+  GET: async ({ params, request }) => {
+    console.info(`Fetching users by id=${params.userId}... @`, request.url)
+    try {
+      const res = await fetch(
+        'https://jsonplaceholder.typicode.com/users/' + params.userId,
+      )
+      if (!res.ok) {
+        throw new Error('Failed to fetch user')
+      }
+
+      const user = (await res.json()) as User
+
+      return json({
+        id: user.id,
+        name: user.name,
+        email: user.email,
+      })
+    } catch (e) {
+      console.error(e)
+      return json({ error: 'User not found' }, { status: 404 })
+    }
+  },
+})

package/templates/tanstack-start/src/routes/api/users.ts

@@ -0,0 +1,59 @@
+import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createMiddleware, json } from '@tanstack/react-start'
+import type { User } from '~/utils/users'
+
+const userLoggerMiddleware = createMiddleware({ type: 'request' }).server(
+  async ({ next, request }) => {
+    console.info('In: /users')
+    const result = await next()
+    result.response.headers.set('x-users', 'true')
+    console.info('Out: /users')
+    return result
+  },
+)
+
+const testParentMiddleware = createMiddleware({ type: 'request' }).server(
+  async ({ next, request }) => {
+    console.info('In: testParentMiddleware')
+    const result = await next()
+    result.response.headers.set('x-test-parent', 'true')
+    console.info('Out: testParentMiddleware')
+    return result
+  },
+)
+
+const testMiddleware = createMiddleware({ type: 'request' })
+  .middleware([testParentMiddleware])
+  .server(async ({ next, request }) => {
+    console.info('In: testMiddleware')
+    const result = await next()
+    result.response.headers.set('x-test', 'true')
+
+    // if (Math.random() > 0.5) {
+    //   throw new Response(null, {
+    //     status: 302,
+    //     headers: { Location: 'https://www.google.com' },
+    //   })
+    // }
+
+    console.info('Out: testMiddleware')
+    return result
+  })
+
+export const ServerRoute = createServerFileRoute('/api/users')
+  .middleware([testMiddleware, userLoggerMiddleware, testParentMiddleware])
+  .methods({
+    GET: async ({ request }) => {
+      console.info('Fetching users... @', request.url)
+      const res = await fetch('https://jsonplaceholder.typicode.com/users')
+      if (!res.ok) {
+        throw new Error('Failed to fetch users')
+      }
+
+      const data = (await res.json()) as Array<User>
+
+      const list = data.slice(0, 10)
+
+      return json(list.map((u) => ({ id: u.id, name: u.name, email: u.email })))
+    },
+  })

package/templates/tanstack-start/src/routes/customScript[.]js.ts

@@ -0,0 +1,10 @@
+import { createServerFileRoute } from '@tanstack/react-start/server'
+export const ServerRoute = createServerFileRoute('/customScript.js').methods({
+  GET: async ({ request }) => {
+    return new Response('console.log("Hello from customScript.js!")', {
+      headers: {
+        'Content-Type': 'application/javascript',
+      },
+    })
+  },
+})

package/templates/tanstack-start/src/routes/deferred.tsx

@@ -0,0 +1,62 @@
+import { Await, createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { Suspense, useState } from 'react'
+
+const personServerFn = createServerFn({ method: 'GET' })
+  .validator((d: string) => d)
+  .handler(({ data: name }) => {
+    return { name, randomNumber: Math.floor(Math.random() * 100) }
+  })
+
+const slowServerFn = createServerFn({ method: 'GET' })
+  .validator((d: string) => d)
+  .handler(async ({ data: name }) => {
+    await new Promise((r) => setTimeout(r, 1000))
+    return { name, randomNumber: Math.floor(Math.random() * 100) }
+  })
+
+export const Route = createFileRoute('/deferred')({
+  loader: async () => {
+    return {
+      deferredStuff: new Promise<string>((r) =>
+        setTimeout(() => r('Hello deferred!'), 2000),
+      ),
+      deferredPerson: slowServerFn({ data: 'Tanner Linsley' }),
+      person: await personServerFn({ data: 'John Doe' }),
+    }
+  },
+  component: Deferred,
+})
+
+function Deferred() {
+  const [count, setCount] = useState(0)
+  const { deferredStuff, deferredPerson, person } = Route.useLoaderData()
+
+  return (
+    <div className="p-2">
+      <div data-testid="regular-person">
+        {person.name} - {person.randomNumber}
+      </div>
+      <Suspense fallback={<div>Loading person...</div>}>
+        <Await
+          promise={deferredPerson}
+          children={(data) => (
+            <div data-testid="deferred-person">
+              {data.name} - {data.randomNumber}
+            </div>
+          )}
+        />
+      </Suspense>
+      <Suspense fallback={<div>Loading stuff...</div>}>
+        <Await
+          promise={deferredStuff}
+          children={(data) => <h3 data-testid="deferred-stuff">{data}</h3>}
+        />
+      </Suspense>
+      <div>Count: {count}</div>
+      <div>
+        <button onClick={() => setCount(count + 1)}>Increment</button>
+      </div>
+    </div>
+  )
+}

package/templates/tanstack-start/src/routes/index.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/')({
+  component: Home,
+})
+
+function Home() {
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!!!</h3>
+    </div>
+  )
+}

package/templates/tanstack-start/src/routes/posts.$postId.tsx

@@ -0,0 +1,34 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { fetchPost } from '../utils/posts'
+import { NotFound } from '~/components/NotFound'
+import { PostErrorComponent } from '~/components/PostError'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: ({ params: { postId } }) => fetchPost({ data: postId }),
+  errorComponent: PostErrorComponent,
+  component: PostComponent,
+  notFoundComponent: () => {
+    return <NotFound>Post not found</NotFound>
+  },
+})
+
+function PostComponent() {
+  const post = Route.useLoaderData()
+
+  return (
+    <div className="space-y-2">
+      <h4 className="text-xl font-bold underline">{post.title}</h4>
+      <div className="text-sm">{post.body}</div>
+      <Link
+        to="/posts/$postId/deep"
+        params={{
+          postId: post.id,
+        }}
+        activeProps={{ className: 'text-black font-bold' }}
+        className="inline-block py-1 text-blue-800 hover:text-blue-600"
+      >
+        Deep View
+      </Link>
+    </div>
+  )
+}

package/templates/tanstack-start/src/routes/posts.index.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/posts/')({
+  component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+  return <div>Select a post.</div>
+}

package/templates/tanstack-start/src/routes/posts.tsx

@@ -0,0 +1,38 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+import { fetchPosts } from '../utils/posts'
+
+export const Route = createFileRoute('/posts')({
+  loader: async () => fetchPosts(),
+  component: PostsComponent,
+})
+
+function PostsComponent() {
+  const posts = Route.useLoaderData()
+
+  return (
+    <div className="p-2 flex gap-2">
+      <ul className="list-disc pl-4">
+        {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(
+          (post) => {
+            return (
+              <li key={post.id} className="whitespace-nowrap">
+                <Link
+                  to="/posts/$postId"
+                  params={{
+                    postId: post.id,
+                  }}
+                  className="block py-1 text-blue-800 hover:text-blue-600"
+                  activeProps={{ className: 'text-black font-bold' }}
+                >
+                  <div>{post.title.substring(0, 20)}</div>
+                </Link>
+              </li>
+            )
+          },
+        )}
+      </ul>
+      <hr />
+      <Outlet />
+    </div>
+  )
+}

package/templates/tanstack-start/src/routes/posts_.$postId.deep.tsx

@@ -0,0 +1,29 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { fetchPost } from '../utils/posts'
+import { PostErrorComponent } from '~/components/PostError'
+
+export const Route = createFileRoute('/posts_/$postId/deep')({
+  loader: async ({ params: { postId } }) =>
+    fetchPost({
+      data: postId,
+    }),
+  errorComponent: PostErrorComponent,
+  component: PostDeepComponent,
+})
+
+function PostDeepComponent() {
+  const post = Route.useLoaderData()
+
+  return (
+    <div className="p-2 space-y-2">
+      <Link
+        to="/posts"
+        className="block py-1 text-blue-800 hover:text-blue-600"
+      >
+        ← All Posts
+      </Link>
+      <h4 className="text-xl font-bold underline">{post.title}</h4>
+      <div className="text-sm">{post.body}</div>
+    </div>
+  )
+}

package/templates/tanstack-start/src/routes/redirect.tsx

@@ -0,0 +1,9 @@
+import { redirect, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/redirect')({
+  beforeLoad: async () => {
+    throw redirect({
+      to: '/posts',
+    })
+  },
+})

package/templates/tanstack-start/src/routes/users.$userId.tsx

@@ -0,0 +1,44 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { NotFound } from 'src/components/NotFound'
+import { UserErrorComponent } from 'src/components/UserError'
+
+export const Route = createFileRoute('/users/$userId')({
+  loader: async ({ params: { userId } }) => {
+    try {
+      const res = await fetch('/api/users/' + userId)
+      if (!res.ok) {
+        throw new Error('Unexpected status code')
+      }
+
+      const data = await res.json()
+
+      return data
+    } catch {
+      throw new Error('Failed to fetch user')
+    }
+  },
+  errorComponent: UserErrorComponent,
+  component: UserComponent,
+  notFoundComponent: () => {
+    return <NotFound>User not found</NotFound>
+  },
+})
+
+function UserComponent() {
+  const user = Route.useLoaderData()
+
+  return (
+    <div className="space-y-2">
+      <h4 className="text-xl font-bold underline">{user.name}</h4>
+      <div className="text-sm">{user.email}</div>
+      <div>
+        <a
+          href={`/api/users/${user.id}`}
+          className="text-blue-800 hover:text-blue-600 underline"
+        >
+          View as JSON
+        </a>
+      </div>
+    </div>
+  )
+}

package/templates/tanstack-start/src/routes/users.index.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/users/')({
+  component: UsersIndexComponent,
+})
+
+function UsersIndexComponent() {
+  return (
+    <div>
+      Select a user or{' '}
+      <a
+        href="/api/users"
+        className="text-blue-800 hover:text-blue-600 underline"
+      >
+        view as JSON
+      </a>
+    </div>
+  )
+}

package/templates/tanstack-start/src/routes/users.tsx

@@ -0,0 +1,49 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+import type { User } from '../utils/users'
+
+export const Route = createFileRoute('/users')({
+  loader: async () => {
+    const res = await fetch('/api/users')
+
+    if (!res.ok) {
+      throw new Error('Unexpected status code')
+    }
+
+    const data = (await res.json()) as Array<User>
+
+    return data
+  },
+  component: UsersComponent,
+})
+
+function UsersComponent() {
+  const users = Route.useLoaderData()
+
+  return (
+    <div className="p-2 flex gap-2">
+      <ul className="list-disc pl-4">
+        {[
+          ...users,
+          { id: 'i-do-not-exist', name: 'Non-existent User', email: '' },
+        ].map((user) => {
+          return (
+            <li key={user.id} className="whitespace-nowrap">
+              <Link
+                to="/users/$userId"
+                params={{
+                  userId: String(user.id),
+                }}
+                className="block py-1 text-blue-800 hover:text-blue-600"
+                activeProps={{ className: 'text-black font-bold' }}
+              >
+                <div>{user.name}</div>
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+      <hr />
+      <Outlet />
+    </div>
+  )
+}

package/templates/tanstack-start/src/styles/app.css

@@ -0,0 +1,12 @@
+@import "tailwindcss";
+
+:root {
+	--border: var(--color-zinc-200);
+	--popover: var(--color-white);
+	--popover-foreground: var(--color-zinc-950);
+}
+
+@theme {
+	--font-sans: var(--font-sans, Inter), ui-sans-serif, system-ui, sans-serif,
+		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}

package/templates/tanstack-start/src/utils/loggingMiddleware.tsx

@@ -0,0 +1,41 @@
+import { createMiddleware } from '@tanstack/react-start'
+
+const preLogMiddleware = createMiddleware({ type: 'function' })
+  .client(async (ctx) => {
+    const clientTime = new Date()
+
+    return ctx.next({
+      context: {
+        clientTime,
+      },
+      sendContext: {
+        clientTime,
+      },
+    })
+  })
+  .server(async (ctx) => {
+    const serverTime = new Date()
+
+    return ctx.next({
+      sendContext: {
+        serverTime,
+        durationToServer:
+          serverTime.getTime() - ctx.context.clientTime.getTime(),
+      },
+    })
+  })
+
+export const logMiddleware = createMiddleware({ type: 'function' })
+  .middleware([preLogMiddleware])
+  .client(async (ctx) => {
+    const res = await ctx.next()
+
+    const now = new Date()
+    console.log('Client Req/Res:', {
+      duration: now.getTime() - res.context.clientTime.getTime(),
+      durationToServer: res.context.durationToServer,
+      durationFromServer: now.getTime() - res.context.serverTime.getTime(),
+    })
+
+    return res
+  })

package/templates/tanstack-start/src/utils/posts.tsx

@@ -0,0 +1,40 @@
+import { notFound } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+
+export type PostType = {
+  id: string
+  title: string
+  body: string
+}
+
+export const fetchPost = createServerFn()
+  .validator((d: string) => d)
+  .handler(async ({ data }) => {
+    console.info(`Fetching post with id ${data}...`)
+    const res = await fetch(
+      `https://jsonplaceholder.typicode.com/posts/${data}`,
+    )
+    if (!res.ok) {
+      if (res.status === 404) {
+        throw notFound()
+      }
+
+      throw new Error('Failed to fetch post')
+    }
+
+    const post = (await res.json()) as PostType
+
+    return post
+  })
+
+export const fetchPosts = createServerFn().handler(async () => {
+  console.info('Fetching posts...')
+  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!res.ok) {
+    throw new Error('Failed to fetch posts')
+  }
+
+  const posts = (await res.json()) as Array<PostType>
+
+  return posts.slice(0, 10)
+})

package/templates/tanstack-start/src/utils/seo.ts

@@ -0,0 +1,33 @@
+export const seo = ({
+  title,
+  description,
+  keywords,
+  image,
+}: {
+  title: string
+  description?: string
+  image?: string
+  keywords?: string
+}) => {
+  const tags = [
+    { title },
+    { name: 'description', content: description },
+    { name: 'keywords', content: keywords },
+    { name: 'twitter:title', content: title },
+    { name: 'twitter:description', content: description },
+    { name: 'twitter:creator', content: '@tannerlinsley' },
+    { name: 'twitter:site', content: '@tannerlinsley' },
+    { name: 'og:type', content: 'website' },
+    { name: 'og:title', content: title },
+    { name: 'og:description', content: description },
+    ...(image
+      ? [
+          { name: 'twitter:image', content: image },
+          { name: 'twitter:card', content: 'summary_large_image' },
+          { name: 'og:image', content: image },
+        ]
+      : []),
+  ]
+
+  return tags
+}

package/templates/tanstack-start/src/utils/users.tsx

@@ -0,0 +1,5 @@
+export type User = {
+  id: number
+  name: string
+  email: string
+}

package/templates/tanstack-start/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "include": [
+    "alchemy.run.ts",
+    "types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "ES2022",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+    "noEmit": true,
+    "types": [
+      "@cloudflare/workers-types",
+      "./types/env.d.ts"
+    ]
+  }
+}

package/templates/tanstack-start/types/env.d.ts

@@ -0,0 +1,16 @@
+// This file infers types for the cloudflare:workers environment from your Alchemy Worker.
+// @see https://alchemy.run/docs/concepts/bindings.html#type-safe-bindings
+
+import type { worker } from "../alchemy.run.ts";
+
+export type CloudflareEnv = typeof worker.Env;
+
+declare global {
+  type Env = CloudflareEnv;
+}
+
+declare module "cloudflare:workers" {
+  namespace Cloudflare {
+    export interface Env extends CloudflareEnv {}
+  }
+}