@leo-h/create-nodejs-app 1.0.68 → 1.0.69

package/templates/react-vite-tanstack-router/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/react-vite-tanstack-router/src/api/errors.ts

@@ -0,0 +1,17 @@
+export class ApiError {
+  public readonly name: string;
+  public readonly statusCode: number;
+  public readonly message: string;
+
+  constructor(data: { name: string; statusCode: number; message: string }) {
+    this.name = data.name;
+    this.statusCode = data.statusCode;
+    this.message = data.message;
+  }
+}
+
+export class ApiUnknownError {
+  static readonly message =
+    "Houve uma falha inesperada ao se comunicar com nosso servidor. Tente novamente em alguns segundos ou nos contate se o problema persistir.";
+  public message = ApiUnknownError.message;
+}

package/templates/react-vite-tanstack-router/src/api/swr-fetcher.ts

@@ -0,0 +1,100 @@
+import { env } from "@/env";
+import { ApiError, ApiUnknownError } from "./errors";
+
+export type RequestConfig<Input = unknown> = {
+  url: string;
+  method: "GET" | "PUT" | "PATCH" | "POST" | "DELETE";
+  params?: object;
+  data?: Input | FormData;
+  responseType?:
+    | "arraybuffer"
+    | "blob"
+    | "document"
+    | "json"
+    | "text"
+    | "stream";
+  signal?: AbortSignal;
+  headers?: HeadersInit;
+};
+
+export type ResponseConfig<Output = unknown> = {
+  body: Output;
+  response: Response;
+};
+
+export type ResponseErrorConfig<Error> = Error;
+
+async function swrFetcher<Output, _Error = unknown, Input = unknown>(
+  config: RequestConfig<Input>,
+): Promise<ResponseConfig<Output>> {
+  const url = getFullApiUrlByEndpointUrl(config.url, config.params);
+  let response: Response;
+
+  try {
+    response = await fetch(url, {
+      credentials: "include",
+      method: config.method,
+      headers: config.headers,
+      signal: config.signal,
+      body: config.data as FormData,
+      ...(!(config.data instanceof FormData) && {
+        body: JSON.stringify(config.data),
+        headers: {
+          ...config.headers,
+          "content-type": "application/json",
+        },
+      }),
+    });
+  } catch {
+    throw new ApiUnknownError();
+  }
+  let body: unknown = null;
+
+  if (
+    response.headers.get("Content-Type")?.includes("application/json") &&
+    response.status !== 204
+  ) {
+    try {
+      body = await response.json();
+    } catch {
+      body = null;
+    }
+  }
+
+  if (!response.ok) {
+    const error = body as ApiError | null;
+
+    if (error) throw new ApiError(error);
+
+    throw new ApiUnknownError();
+  }
+
+  return {
+    body: body as Output,
+    response,
+  };
+}
+
+function getFullApiUrlByEndpointUrl(endpointUrl: string, queryParams?: object) {
+  const url = new URL(env.PUBLIC_API_BASE_URL);
+
+  if (url.pathname.endsWith("/")) {
+    url.pathname = endpointUrl;
+  } else {
+    url.pathname += endpointUrl;
+  }
+
+  if (queryParams) {
+    for (const queryParamKey of Object.keys(queryParams)) {
+      const searchParamValue =
+        queryParams[queryParamKey as keyof typeof queryParams];
+
+      if (searchParamValue)
+        url.searchParams.set(queryParamKey, searchParamValue);
+    }
+  }
+
+  return url;
+}
+
+export default swrFetcher;

package/templates/react-vite-tanstack-router/src/env.ts

@@ -0,0 +1,16 @@
+import { treeifyError, z } from "zod";
+
+const schema = z.object({
+  PUBLIC_APP_NAME: z.string(),
+  PUBLIC_API_BASE_URL: z.url().transform((url) => new URL(url)),
+});
+
+const parsedEnv = schema.safeParse(import.meta.env);
+
+if (!parsedEnv.success) {
+  console.error(treeifyError(parsedEnv.error));
+
+  throw new Error("Invalid environment variables.");
+}
+
+export const env = parsedEnv.data;

package/templates/react-vite-tanstack-router/src/index.css

@@ -0,0 +1,29 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-size: 1.6rem;
+  line-height: 1.5;
+
+  @media (max-width: 640px) {
+    font-size: 1.5rem;
+  }
+}
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 62.5%;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  background-color: #0d0d0d;
+  color: #d4d4d8;
+}
+
+a {
+  text-decoration: none;
+}

package/templates/react-vite-tanstack-router/src/lib/swr-config.ts

@@ -0,0 +1,8 @@
+import type { SWRConfiguration } from "swr";
+
+export const swrConfig: SWRConfiguration = {
+  errorRetryCount: 3,
+  errorRetryInterval: 3500,
+  shouldRetryOnError: false,
+  revalidateOnFocus: false,
+};

package/templates/react-vite-tanstack-router/src/lib/tanstack-router-instance.ts

@@ -0,0 +1,16 @@
+import { routeTree } from "@/route-tree.gen";
+import { createRouter } from "@tanstack/react-router";
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof tanstackRouterInstance;
+  }
+}
+
+export const tanstackRouterInstance = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+});

package/templates/react-vite-tanstack-router/src/lib/zod-config.ts

@@ -0,0 +1,97 @@
+import prettyBytes from "pretty-bytes";
+import { z } from "zod";
+import { ZodCustomErrorMap } from "./zod-custom-error-map";
+
+const zodUserFriendlyErrorsPtBr = new ZodCustomErrorMap({
+  required: `O campo é obrigatório.`,
+  types: {
+    default: {
+      invalid: ({ expected }) =>
+        `O tipo do campo é inválido. É esperado que seja: "${expected}".`,
+      too_small: "O campo é inválido.",
+      too_big: "O campo é inválido.",
+    },
+    string: {
+      invalid: "O campo deve ser um texto.",
+      greater_than_or_equal: ({ minimum }) =>
+        `O campo deve conter no mínimo ${minimum} caractere(s).`,
+      less_than_or_equal: ({ maximum }) =>
+        `O campo deve conter no máximo ${maximum} caractere(s).`,
+      exact: ({ minimum, maximum }) =>
+        `O campo deve conter exatamente ${minimum ?? maximum} caractere(s).`,
+    },
+    number: {
+      invalid: "O campo deve ser um número.",
+      greater_than: ({ minimum }) => `O número deve ser maior que ${minimum}.`,
+      greater_than_or_equal: ({ minimum }) =>
+        `O número deve ser maior ou igual a ${minimum}.`,
+      less_than: ({ maximum }) => `O número deve ser menor que ${maximum}.`,
+      less_than_or_equal: ({ maximum }) =>
+        `O número deve ser menor ou igual a ${maximum}.`,
+      not_multiple_of: ({ divisor }) =>
+        `O número deve ser múltiplo de ${divisor}.`,
+    },
+    date: {
+      invalid: "O campo deve ser uma data.",
+      greater_than_or_equal: ({ minimum }) =>
+        `A data deve ser maior ou igual a ${minimum.toLocaleString("pt-BR")}.`,
+      less_than_or_equal: ({ maximum }) =>
+        `A data deve ser menor ou igual a ${maximum.toLocaleString("pt-BR")}.`,
+    },
+    array: {
+      invalid: "O campo deve ser uma lista.",
+      greater_than: ({ minimum }) =>
+        `Adicione no mínimo ${minimum} ${minimum > 1 ? "itens" : "item"}.`,
+      less_than: ({ maximum }) =>
+        `Adicione no máximo ${maximum} ${maximum > 1 ? "itens" : "item"}.`,
+      exact: ({ minimum, maximum }) =>
+        `Adicione exatamente ${minimum ?? maximum} ${((minimum ?? maximum) as number) > 1 ? "itens" : "item"}.`,
+    },
+    file: {
+      invalid: "O campo deve ser um arquivo.",
+      greater_than_or_equal: ({ minimum }) =>
+        `O arquivo deve possuir no mínimo ${prettyBytes(minimum, { locale: "pt" })}.`,
+      less_than_or_equal: ({ maximum }) =>
+        `O arquivo deve possuir no máximo ${prettyBytes(maximum, { locale: "pt" })}.`,
+    },
+    boolean: { invalid: "O campo deve ser verdadeiro ou falso." },
+    undefined: { invalid: "O campo deve estar vazio." },
+    null: { invalid: "O campo deve estar vazio." },
+  },
+  formats: {
+    default: `O formato do campo é inválido.`,
+
+    // common
+    email: "O e-mail é inválido.",
+    url: "A URL é inválida.",
+    regex: "O campo é inválido.",
+    date: "A data é inválida.",
+    time: "A hora é inválida.",
+    datetime: "A data e a hora são inválidos.",
+    emoji: "Emoji inválido.",
+    starts_with: ({ prefix }) => `O campo deve iniciar com "${prefix}".`,
+    ends_with: ({ suffix }) => `O campo deve terminar com "${suffix}".`,
+    includes: ({ includes }) => `O campo deve incluir "${includes}".`,
+
+    // programming
+    uuid: "O UUID é inválido.",
+    cuid: "O CUID é inválido.",
+    nanoid: "O Nano ID é inválido.",
+    base64: "Base64 inválido.",
+    base64url: "Base64Url inválido.",
+    jwt: "JSON Web Token inválido.",
+    ipv4: "Endereço IPv4 inválido.",
+    ipv6: "Endereço IPv6 inválido.",
+    json_string: "JSON inválido.",
+  },
+  others: {
+    default: "O campo é inválido.",
+    custom: "O campo é inválido.",
+    invalid_value: ({ values }) => `O campo deve ser exatamente "${values}".`,
+    invalid_union: "O tipo do campo é inválido.",
+  },
+});
+
+z.config({
+  customError: (issue) => zodUserFriendlyErrorsPtBr.map(issue),
+});

package/templates/react-vite-tanstack-router/src/lib/zod-custom-error-map.ts

@@ -0,0 +1,259 @@
+import type { OverrideProperties } from "type-fest";
+import type {
+  $ZodIssueCode,
+  $ZodIssueCustom,
+  $ZodIssueInvalidElement,
+  $ZodIssueInvalidKey,
+  $ZodIssueInvalidStringFormat,
+  $ZodIssueInvalidType,
+  $ZodIssueInvalidUnion,
+  $ZodIssueInvalidValue,
+  $ZodIssueNotMultipleOf,
+  $ZodIssueStringEndsWith,
+  $ZodIssueStringIncludes,
+  $ZodIssueStringInvalidJWT,
+  $ZodIssueStringInvalidRegex,
+  $ZodIssueStringStartsWith,
+  $ZodIssueTooBig,
+  $ZodIssueTooSmall,
+  $ZodIssueUnrecognizedKeys,
+  $ZodRawIssue,
+  $ZodStringFormats,
+  $ZodType,
+} from "zod/v4/core";
+
+type ZodIssueTooSmallOrTooBigExact = ($ZodIssueTooSmall | $ZodIssueTooBig) & {
+  minimum?: number | bigint;
+  maximum?: number | bigint;
+};
+
+type ZodCustomErrorMapData = {
+  required: string | ((issue: $ZodIssueInvalidType) => string);
+  types: OverrideProperties<
+    Partial<
+      Record<
+        $ZodType["_zod"]["def"]["type"],
+        {
+          invalid: string | ((issue: $ZodIssueInvalidType) => string);
+        }
+      >
+    >,
+    {
+      default: {
+        invalid: string | ((issue: $ZodIssueInvalidType) => string);
+        too_small: string | ((issue: $ZodIssueTooSmall) => string);
+        too_big: string | ((issue: $ZodIssueTooBig) => string);
+      };
+      string: {
+        invalid: string | ((issue: $ZodIssueInvalidType) => string);
+        greater_than_or_equal: string | ((issue: $ZodIssueTooSmall) => string);
+        less_than_or_equal: string | ((issue: $ZodIssueTooBig) => string);
+        exact: string | ((issue: ZodIssueTooSmallOrTooBigExact) => string);
+      };
+      number: {
+        invalid: string | ((issue: $ZodIssueInvalidType) => string);
+        greater_than: string | ((issue: $ZodIssueTooSmall) => string);
+        greater_than_or_equal: string | ((issue: $ZodIssueTooSmall) => string);
+        less_than: string | ((issue: $ZodIssueTooBig) => string);
+        less_than_or_equal: string | ((issue: $ZodIssueTooBig) => string);
+        not_multiple_of: string | ((issue: $ZodIssueNotMultipleOf) => string);
+      };
+      date: {
+        invalid: string | ((issue: $ZodIssueInvalidType) => string);
+        greater_than_or_equal:
+          | string
+          | ((
+              issue: OverrideProperties<$ZodIssueTooSmall, { minimum: Date }>,
+            ) => string);
+        less_than_or_equal:
+          | string
+          | ((
+              issue: OverrideProperties<$ZodIssueTooBig, { maximum: Date }>,
+            ) => string);
+      };
+      array: {
+        invalid: string | ((issue: $ZodIssueInvalidType) => string);
+        greater_than: string | ((issue: $ZodIssueTooSmall) => string);
+        less_than: string | ((issue: $ZodIssueTooBig) => string);
+        exact: string | ((issue: ZodIssueTooSmallOrTooBigExact) => string);
+      };
+      file: {
+        invalid: string | ((issue: $ZodIssueInvalidType) => string);
+        greater_than_or_equal: string | ((issue: $ZodIssueTooSmall) => string);
+        less_than_or_equal: string | ((issue: $ZodIssueTooBig) => string);
+      };
+    }
+  >;
+  formats: OverrideProperties<
+    Partial<
+      Record<
+        $ZodStringFormats,
+        string | ((issue: $ZodIssueInvalidStringFormat) => string)
+      >
+    >,
+    {
+      regex?: string | ((issue: $ZodIssueStringInvalidRegex) => string);
+      jwt?: string | ((issue: $ZodIssueStringInvalidJWT) => string);
+      includes?: string | ((issue: $ZodIssueStringIncludes) => string);
+      starts_with?: string | ((issue: $ZodIssueStringStartsWith) => string);
+      ends_with?: string | ((issue: $ZodIssueStringEndsWith) => string);
+    }
+  > & {
+    default: string | ((issue: $ZodIssueInvalidStringFormat) => string);
+  };
+  others: {
+    custom?: string | ((issue: $ZodIssueCustom) => string);
+    invalid_value?: string | ((issue: $ZodIssueInvalidValue) => string);
+    invalid_union?: string | ((issue: $ZodIssueInvalidUnion) => string);
+    invalid_element?: string | ((issue: $ZodIssueInvalidElement) => string);
+    invalid_key?: string | ((issue: $ZodIssueInvalidKey) => string);
+    unrecognized_keys?: string | ((issue: $ZodIssueUnrecognizedKeys) => string);
+  } & {
+    default:
+      | string
+      | ((
+          issue: Exclude<
+            $ZodIssueCode,
+            | "invalid_type"
+            | "too_small"
+            | "too_big"
+            | "invalid_format"
+            | "not_multiple_of"
+          >,
+        ) => string);
+  };
+};
+
+export class ZodCustomErrorMap {
+  private data: ZodCustomErrorMapData;
+
+  public constructor(data: ZodCustomErrorMapData) {
+    this.data = data;
+  }
+
+  private getCustomMessage<
+    // biome-ignore lint/suspicious/noExplicitAny: The issue here is specific.
+    Value extends string | ((issue: any) => string),
+    Issue,
+  >(value: Value, issue: Issue): string {
+    if (typeof value === "function") return value(issue);
+
+    return value;
+  }
+
+  public map(issue: $ZodRawIssue) {
+    switch (issue.code) {
+      case "invalid_type": {
+        if (issue.input === undefined || issue.input === null) {
+          return this.getCustomMessage(this.data.required, issue);
+        }
+
+        const messageDefinition =
+          this.data.types[issue.expected] ?? this.data.types.default;
+
+        return this.getCustomMessage(messageDefinition.invalid, issue);
+      }
+
+      case "too_small": {
+        const { types } = this.data;
+
+        if (issue.origin === "string") {
+          if (issue.exact)
+            return this.getCustomMessage(types.string.exact, issue);
+
+          return this.getCustomMessage(
+            types.string.greater_than_or_equal,
+            issue,
+          );
+        }
+
+        if (["number", "int", "bigint"].includes(issue.origin)) {
+          if (issue.inclusive)
+            return this.getCustomMessage(
+              types.number.greater_than_or_equal,
+              issue,
+            );
+
+          return this.getCustomMessage(types.number.greater_than, issue);
+        }
+
+        if (issue.origin === "array") {
+          if (issue.exact)
+            return this.getCustomMessage(types.array.exact, issue);
+
+          return this.getCustomMessage(types.array.greater_than, issue);
+        }
+
+        if (issue.origin === "date") {
+          return this.getCustomMessage(types.date.greater_than_or_equal, issue);
+        }
+
+        if (issue.origin === "file") {
+          return this.getCustomMessage(types.file.greater_than_or_equal, issue);
+        }
+
+        return this.getCustomMessage(types.default.too_small, issue);
+      }
+
+      case "too_big": {
+        const { types } = this.data;
+
+        if (issue.origin === "string") {
+          if (issue.exact)
+            return this.getCustomMessage(types.string.exact, issue);
+
+          return this.getCustomMessage(types.string.less_than_or_equal, issue);
+        }
+
+        if (["number", "int", "bigint"].includes(issue.origin)) {
+          if (issue.inclusive)
+            return this.getCustomMessage(
+              types.number.less_than_or_equal,
+              issue,
+            );
+
+          return this.getCustomMessage(types.number.less_than, issue);
+        }
+
+        if (issue.origin === "array") {
+          if (issue.exact)
+            return this.getCustomMessage(types.array.exact, issue);
+
+          return this.getCustomMessage(types.array.less_than, issue);
+        }
+
+        if (issue.origin === "date") {
+          return this.getCustomMessage(types.date.less_than_or_equal, issue);
+        }
+
+        if (issue.origin === "file") {
+          return this.getCustomMessage(types.file.less_than_or_equal, issue);
+        }
+
+        return this.getCustomMessage(types.default.too_big, issue);
+      }
+
+      case "invalid_format": {
+        const definitionMessage =
+          this.data.formats[
+            issue.format as keyof ZodCustomErrorMapData["formats"]
+          ] ?? this.data.formats.default;
+
+        return this.getCustomMessage(definitionMessage, issue);
+      }
+
+      case "not_multiple_of": {
+        return this.getCustomMessage(
+          this.data.types.number.not_multiple_of,
+          issue,
+        );
+      }
+    }
+
+    const definitionMessage =
+      this.data.others[issue.code as keyof typeof this.data.others] ??
+      this.data.others.default;
+
+    return this.getCustomMessage(definitionMessage, issue);
+  }
+}

package/templates/react-vite-tanstack-router/src/main.tsx

@@ -0,0 +1,20 @@
+import { RouterProvider } from "@tanstack/react-router";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { SWRConfig } from "swr";
+import "./index.css";
+import { swrConfig } from "./lib/swr-config";
+import { tanstackRouterInstance } from "./lib/tanstack-router-instance";
+import "./lib/zod-config";
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) throw new Error("Root element is not defined.");
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <SWRConfig value={swrConfig}>
+      <RouterProvider router={tanstackRouterInstance} />
+    </SWRConfig>
+  </StrictMode>,
+);

package/templates/react-vite-tanstack-router/src/pages/__root.tsx

@@ -0,0 +1,12 @@
+import { createRootRoute, HeadContent, Outlet } from "@tanstack/react-router";
+
+export const Route = createRootRoute({ component: RootLayout });
+
+function RootLayout() {
+  return (
+    <>
+      <HeadContent />
+      <Outlet />
+    </>
+  );
+}

package/templates/react-vite-tanstack-router/src/pages/_app/index.tsx

@@ -0,0 +1,24 @@
+import { env } from "@/env";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import "./styles.css";
+
+export const Route = createFileRoute("/_app/")({
+  component: RouteComponent,
+  head: () => ({
+    meta: [
+      {
+        title: `Dashboard | ${env.PUBLIC_APP_NAME}`,
+      },
+    ],
+  }),
+});
+
+function RouteComponent() {
+  return (
+    <div className="dashboard-wrapper">
+      <h1>Hello world!</h1>
+
+      <Link to="/sign-in">Sign out</Link>
+    </div>
+  );
+}

package/templates/react-vite-tanstack-router/src/pages/_app/layout.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_app")({
+  component: AppLayout,
+});
+
+function AppLayout() {
+  return (
+    <div>
+      <h1>App layout</h1>
+
+      <Outlet />
+    </div>
+  );
+}

package/templates/react-vite-tanstack-router/src/pages/_app/styles.css

@@ -0,0 +1,40 @@
+.dashboard-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.dashboard-wrapper > h1 {
+  font-size: 4.2rem;
+  line-height: 1.2;
+  letter-spacing: 0.8px;
+  font-weight: 800;
+  color: #fff;
+  margin-bottom: 4rem;
+
+  @media (max-width: 640px) {
+    font-size: 3.6rem;
+    line-height: 1.3;
+  }
+}
+
+.dashboard-wrapper > a {
+  display: inline-block;
+  padding: 1rem 1.6rem;
+  font-weight: 800;
+  text-align: center;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background-color: #fff;
+  color: #000;
+  cursor: pointer;
+  transition: opacity 150ms ease-in-out;
+}
+
+.dashboard-wrapper > a:hover {
+  opacity: 0.8;
+}

package/templates/react-vite-tanstack-router/src/pages/_auth/layout.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_auth")({
+  component: AuthLayout,
+});
+
+function AuthLayout() {
+  return (
+    <div>
+      <h1>Auth layout</h1>
+
+      <Outlet />
+    </div>
+  );
+}