alchemy 0.69.0 → 0.69.1

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>
-  )
-}

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

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

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

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

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

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

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

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