npm - wcz-test - Versions diffs - 1.1.0 → 1.2.0 - Mend

wcz-test 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/package.json +3 -2
package/src/api.ts +6 -0
package/src/client.tsx +8 -0
package/src/components/DefaultCatchBoundary.tsx +53 -0
package/src/components/MyComponent.tsx +6 -0
package/src/components/NotFound.tsx +25 -0
package/src/components/PostError.tsx +5 -0
package/src/components/UserError.tsx +5 -0
package/src/global-middleware.ts +6 -0
package/src/index.ts +1 -0
package/src/routeTree.gen.ts +483 -0
package/src/router.tsx +22 -0
package/src/routes/__root.tsx +139 -0
package/src/routes/_pathlessLayout/_nested-layout/route-a.tsx +11 -0
package/src/routes/_pathlessLayout/_nested-layout/route-b.tsx +11 -0
package/src/routes/_pathlessLayout/_nested-layout.tsx +34 -0
package/src/routes/_pathlessLayout.tsx +16 -0
package/src/routes/api/users.$id.ts +24 -0
package/src/routes/api/users.ts +17 -0
package/src/routes/deferred.tsx +62 -0
package/src/routes/index.tsx +13 -0
package/src/routes/posts.$postId.tsx +34 -0
package/src/routes/posts.index.tsx +9 -0
package/src/routes/posts.route.tsx +38 -0
package/src/routes/posts_.$postId.deep.tsx +29 -0
package/src/routes/redirect.tsx +9 -0
package/src/routes/users.$userId.tsx +33 -0
package/src/routes/users.index.tsx +10 -0
package/src/routes/users.route.tsx +48 -0
package/src/ssr.tsx +13 -0
package/src/styles/app.css +22 -0
package/src/utils/loggingMiddleware.tsx +41 -0
package/src/utils/posts.tsx +36 -0
package/src/utils/seo.ts +33 -0
package/src/utils/users.tsx +7 -0

package/src/routes/__root.tsx ADDED Viewed

@@ -0,0 +1,139 @@
+import {
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import * as React from 'react'
+import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
+import { NotFound } from '~/components/NotFound'
+import appCss from '~/styles/app.css?url'
+import { seo } from '~/utils/seo'
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      ...seo({
+        title:
+          'TanStack Start | Type-Safe, Client-First, Full-Stack React Framework',
+        description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,
+      }),
+    ],
+    links: [
+      { rel: 'stylesheet', href: appCss },
+      {
+        rel: 'apple-touch-icon',
+        sizes: '180x180',
+        href: '/apple-touch-icon.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '32x32',
+        href: '/favicon-32x32.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '16x16',
+        href: '/favicon-16x16.png',
+      },
+      { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
+      { rel: 'icon', href: '/favicon.ico' },
+    ],
+  }),
+  errorComponent: (props) => {
+    return (
+      <RootDocument>
+        <DefaultCatchBoundary {...props} />
+      </RootDocument>
+    )
+  },
+  notFoundComponent: () => <NotFound />,
+  component: RootComponent,
+})
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  )
+}
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <div className="p-2 flex gap-2 text-lg">
+          <Link
+            to="/"
+            activeProps={{
+              className: 'font-bold',
+            }}
+            activeOptions={{ exact: true }}
+          >
+            Home
+          </Link>{' '}
+          <Link
+            to="/posts"
+            activeProps={{
+              className: 'font-bold',
+            }}
+          >
+            Posts
+          </Link>{' '}
+          <Link
+            to="/users"
+            activeProps={{
+              className: 'font-bold',
+            }}
+          >
+            Users
+          </Link>{' '}
+          <Link
+            to="/route-a"
+            activeProps={{
+              className: 'font-bold',
+            }}
+          >
+            Pathless Layout
+          </Link>{' '}
+          <Link
+            to="/deferred"
+            activeProps={{
+              className: 'font-bold',
+            }}
+          >
+            Deferred
+          </Link>{' '}
+          <Link
+            // @ts-expect-error
+            to="/this-route-does-not-exist"
+            activeProps={{
+              className: 'font-bold',
+            }}
+          >
+            This Route Does Not Exist
+          </Link>
+        </div>
+        <hr />
+        {children}
+        <TanStackRouterDevtools position="bottom-right" />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/src/routes/_pathlessLayout/_nested-layout/route-a.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+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/src/routes/_pathlessLayout/_nested-layout/route-b.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+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/src/routes/_pathlessLayout/_nested-layout.tsx ADDED Viewed

@@ -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/src/routes/_pathlessLayout.tsx ADDED Viewed

@@ -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/src/routes/api/users.$id.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { json } from '@tanstack/react-start'
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+import axios from 'redaxios'
+import type { User } from '../../utils/users'
+export const APIRoute = createAPIFileRoute('/api/users/$id')({
+  GET: async ({ request, params }) => {
+    console.info(`Fetching users by id=${params.id}... @`, request.url)
+    try {
+      const res = await axios.get<User>(
+        'https://jsonplaceholder.typicode.com/users/' + params.id,
+      )
+      return json({
+        id: res.data.id,
+        name: res.data.name,
+        email: res.data.email,
+      })
+    } catch (e) {
+      console.error(e)
+      return json({ error: 'User not found' }, { status: 404 })
+    }
+  },
+})

package/src/routes/api/users.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { json } from '@tanstack/react-start'
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+import axios from 'redaxios'
+import type { User } from '../../utils/users'
+export const APIRoute = createAPIFileRoute('/api/users')({
+  GET: async ({ request }) => {
+    console.info('Fetching users... @', request.url)
+    const res = await axios.get<Array<User>>(
+      'https://jsonplaceholder.typicode.com/users',
+    )
+    const list = res.data.slice(0, 10)
+    return json(list.map((u) => ({ id: u.id, name: u.name, email: u.email })))
+  },
+})

package/src/routes/deferred.tsx ADDED Viewed

@@ -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/src/routes/index.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+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/src/routes/posts.$postId.tsx ADDED Viewed

@@ -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="block py-1 text-blue-800 hover:text-blue-600"
+      >
+        Deep View
+      </Link>
+    </div>
+  )
+}

package/src/routes/posts.index.tsx ADDED Viewed

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

package/src/routes/posts.route.tsx ADDED Viewed

@@ -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: PostsLayoutComponent,
+})
+function PostsLayoutComponent() {
+  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/src/routes/posts_.$postId.deep.tsx ADDED Viewed

@@ -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/src/routes/redirect.tsx ADDED Viewed

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

package/src/routes/users.$userId.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import axios from 'redaxios'
+import type { User } from '~/utils/users'
+import { DEPLOY_URL } from '~/utils/users'
+import { NotFound } from '~/components/NotFound'
+import { UserErrorComponent } from '~/components/UserError'
+export const Route = createFileRoute('/users/$userId')({
+  loader: async ({ params: { userId } }) => {
+    return await axios
+      .get<User>(DEPLOY_URL + '/api/users/' + userId)
+      .then((r) => r.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>
+  )
+}

package/src/routes/users.index.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { MyComponent } from '~/components/MyComponent'
+export const Route = createFileRoute('/users/')({
+  component: UsersIndexComponent,
+})
+function UsersIndexComponent() {
+  return <div><MyComponent /></div>
+}

package/src/routes/users.route.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+import axios from 'redaxios'
+import { DEPLOY_URL } from '../utils/users'
+import type { User } from '../utils/users'
+export const Route = createFileRoute('/users')({
+  loader: async () => {
+    return await axios
+      .get<Array<User>>(DEPLOY_URL + '/api/users')
+      .then((r) => r.data)
+      .catch(() => {
+        throw new Error('Failed to fetch users')
+      })
+  },
+  component: UsersLayoutComponent,
+})
+function UsersLayoutComponent() {
+  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/src/ssr.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+/// <reference types="vinxi/types/server" />
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from '@tanstack/react-start/server'
+import { getRouterManifest } from '@tanstack/react-start/router-manifest'
+import { createRouter } from './router'
+export default createStartHandler({
+  createRouter,
+  getRouterManifest,
+})(defaultStreamHandler)

package/src/styles/app.css ADDED Viewed

@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  html {
+    color-scheme: light dark;
+  }
+  * {
+    @apply border-gray-200 dark:border-gray-800;
+  }
+  html,
+  body {
+    @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
+  }
+  .using-mouse * {
+    outline: none !important;
+  }
+}

package/src/utils/loggingMiddleware.tsx ADDED Viewed

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

package/src/utils/posts.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+import { notFound } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import axios from 'redaxios'
+export type PostType = {
+  id: string
+  title: string
+  body: string
+}
+export const fetchPost = createServerFn({ method: 'GET' })
+  .validator((d: string) => d)
+  .handler(async ({ data }) => {
+    console.info(`Fetching post with id ${data}...`)
+    const post = await axios
+      .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${data}`)
+      .then((r) => r.data)
+      .catch((err) => {
+        console.error(err)
+        if (err.status === 404) {
+          throw notFound()
+        }
+        throw err
+      })
+    return post
+  })
+export const fetchPosts = createServerFn({ method: 'GET' }).handler(
+  async () => {
+    console.info('Fetching posts...')
+    return axios
+      .get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts')
+      .then((r) => r.data.slice(0, 10))
+  },
+)