alchemy 0.68.0 → 0.69.1

package/templates/tanstack-start/tsconfig.json

@@ -1,31 +1,28 @@
 {
-  "include": [
-    "alchemy.run.ts",
-    "types/**/*.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
+  "include": ["**/*.ts", "**/*.tsx"],
   "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
+    "target": "ES2022",
     "jsx": "react-jsx",
     "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "isolatedModules": true,
-    "resolveJsonModule": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "@cloudflare/workers-types"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+
+    /* Linting */
     "skipLibCheck": true,
-    "target": "ES2022",
-    "allowJs": true,
-    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./src/*"]
-    },
-    "noEmit": true,
-    "types": [
-      "@cloudflare/workers-types",
-      "./types/env.d.ts"
-    ]
+      "@/*": ["./src/*"],
+    }
   }
 }

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

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

package/templates/tanstack-start/vite.config.ts

@@ -1,30 +1,21 @@
-import tailwindcss from "@tailwindcss/vite";
-import { tanstackStart } from "@tanstack/react-start/plugin/vite";
-import viteReact from "@vitejs/plugin-react";
-import alchemy from "alchemy/cloudflare/tanstack-start";
-import { defineConfig, PluginOption } from "vite";
-import tsConfigPaths from "vite-tsconfig-paths";
+import tailwindcss from '@tailwindcss/vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+import alchemy from 'alchemy/cloudflare/tanstack-start'
+import { defineConfig, type PluginOption } from 'vite'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
 
-export default defineConfig({
-  server: {
-    port: 3000,
-  },
-  build: {
-    target: "esnext",
-    rollupOptions: {
-      external: ["node:async_hooks", "cloudflare:workers"],
-    },
-  },
+const config = defineConfig({
   plugins: [
-    tailwindcss() as PluginOption,
-    alchemy(),
-    tsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
-    tanstackStart({
-      target: "cloudflare-module",
-      customViteReactPlugin: true,
+    // this is the plugin that enables path aliases
+    viteTsConfigPaths({
+      projects: ['./tsconfig.json'],
     }),
+    tailwindcss(),
+    alchemy() as PluginOption,
+    tanstackStart(),
     viteReact(),
   ],
-});
+})
+
+export default config

package/workers/tunnel-proxy.js

@@ -34,7 +34,7 @@ var h={async fetch(e,r){let n=new URL(e.url);n.host=r.TUNNEL_HOST;let l=new Head
             Alchemy</a>.</p>
       </div>
       <div class="bg-slate-200 px-5 py-3 flex flex-col w-full max-w-lg">
-        <p class="text-sm text-slate-500">Alchemy 0.68.0</p>
+        <p class="text-sm text-slate-500">Alchemy 0.69.1</p>
       </div>
     </div>
   </body>

package/templates/tanstack-start/_prettierignore

@@ -1,4 +0,0 @@
-**/build
-**/public
-pnpm-lock.yaml
-routeTree.gen.ts

package/templates/tanstack-start/public/site.webmanifest

@@ -1,19 +0,0 @@
-{
-  "name": "",
-  "short_name": "",
-  "icons": [
-    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}

package/templates/tanstack-start/src/components/DefaultCatchBoundary.tsx

@@ -1,53 +0,0 @@
-import {
-  ErrorComponent,
-  Link,
-  rootRouteId,
-  useMatch,
-  useRouter,
-} from '@tanstack/react-router'
-import type { ErrorComponentProps } from '@tanstack/react-router'
-
-export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
-  const router = useRouter()
-  const isRoot = useMatch({
-    strict: false,
-    select: (state) => state.id === rootRouteId,
-  })
-
-  console.error('DefaultCatchBoundary Error:', error)
-
-  return (
-    <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
-      <ErrorComponent error={error} />
-      <div className="flex gap-2 items-center flex-wrap">
-        <button
-          onClick={() => {
-            router.invalidate()
-          }}
-          className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
-        >
-          Try Again
-        </button>
-        {isRoot ? (
-          <Link
-            to="/"
-            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
-          >
-            Home
-          </Link>
-        ) : (
-          <Link
-            to="/"
-            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
-            onClick={(e) => {
-              e.preventDefault()
-              window.history.back()
-            }}
-          >
-            Go Back
-          </Link>
-        )}
-      </div>
-    </div>
-  )
-}

package/templates/tanstack-start/src/components/NotFound.tsx

@@ -1,25 +0,0 @@
-import { Link } from '@tanstack/react-router'
-
-export function NotFound({ children }: { children?: any }) {
-  return (
-    <div className="space-y-2 p-2">
-      <div className="text-gray-600 dark:text-gray-400">
-        {children || <p>The page you are looking for does not exist.</p>}
-      </div>
-      <p className="flex items-center gap-2 flex-wrap">
-        <button
-          onClick={() => window.history.back()}
-          className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
-        >
-          Go back
-        </button>
-        <Link
-          to="/"
-          className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
-        >
-          Start Over
-        </Link>
-      </p>
-    </div>
-  )
-}

package/templates/tanstack-start/src/components/PostError.tsx

@@ -1,5 +0,0 @@
-import { ErrorComponent, ErrorComponentProps } from '@tanstack/react-router'
-
-export function PostErrorComponent({ error }: ErrorComponentProps) {
-  return <ErrorComponent error={error} />
-}

package/templates/tanstack-start/src/components/UserError.tsx

@@ -1,5 +0,0 @@
-import { ErrorComponent, ErrorComponentProps } from '@tanstack/react-router'
-
-export function UserErrorComponent({ error }: ErrorComponentProps) {
-  return <ErrorComponent error={error} />
-}

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

@@ -1,10 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-export const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-a')(
-  {
-    component: LayoutAComponent,
-  },
-)
-
-function LayoutAComponent() {
-  return <div>I'm A!</div>
-}

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

@@ -1,10 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-export const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-b')(
-  {
-    component: LayoutBComponent,
-  },
-)
-
-function LayoutBComponent() {
-  return <div>I'm B!</div>
-}

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

@@ -1,34 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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/posts.$postId.tsx

@@ -1,34 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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>
-  )
-}