This is the main content of the page.
25 | *Welcome to My Website
22 | *Hello {name}, you are {age} years old
;
16 | * }
17 | * `);
18 | */
19 | export type StaticTypeScriptFile = File;
20 |
21 | export async function StaticTypeScriptFile(
22 | id: string,
23 | ...args: [content: string] | [path: string, content: string]
24 | ): Promise{children}
13 |
14 |
15 | );
16 |
--------------------------------------------------------------------------------
/examples/cloudflare-redwood/src/app/headers.ts:
--------------------------------------------------------------------------------
1 | import { IS_DEV } from "rwsdk/constants";
2 | import type { RouteMiddleware } from "rwsdk/router";
3 |
4 | export const setCommonHeaders =
5 | (): RouteMiddleware =>
6 | ({ headers, rw: { nonce } }) => {
7 | if (!IS_DEV) {
8 | // Forces browsers to always use HTTPS for a specified time period (2 years)
9 | headers.set(
10 | "Strict-Transport-Security",
11 | "max-age=63072000; includeSubDomains; preload",
12 | );
13 | }
14 |
15 | // Forces browser to use the declared content-type instead of trying to guess/sniff it
16 | headers.set("X-Content-Type-Options", "nosniff");
17 |
18 | // Stops browsers from sending the referring webpage URL in HTTP headers
19 | headers.set("Referrer-Policy", "no-referrer");
20 |
21 | // Explicitly disables access to specific browser features/APIs
22 | headers.set(
23 | "Permissions-Policy",
24 | "geolocation=(), microphone=(), camera=()",
25 | );
26 |
27 | // Defines trusted sources for content loading and script execution:
28 | headers.set(
29 | "Content-Security-Policy",
30 | `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; frame-src https://challenges.cloudflare.com; object-src 'none';`,
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/examples/cloudflare-redwood/src/app/pages/Home.tsx:
--------------------------------------------------------------------------------
1 | import type { RequestInfo } from "rwsdk/worker";
2 | import { users } from "../../db/schema.js";
3 |
4 | export async function Home({ ctx }: RequestInfo) {
5 | const allUsers = await ctx.db.select().from(users).all();
6 | return (
7 |
8 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/examples/cloudflare-redwood/src/app/shared/links.ts:
--------------------------------------------------------------------------------
1 | import { defineLinks } from "rwsdk/router";
2 |
3 | export const link = defineLinks(["/"]);
4 |
--------------------------------------------------------------------------------
/examples/cloudflare-redwood/src/client.tsx:
--------------------------------------------------------------------------------
1 | import { initClient } from "rwsdk/client";
2 |
3 | initClient();
4 |
--------------------------------------------------------------------------------
/examples/cloudflare-redwood/src/db/schema.ts:
--------------------------------------------------------------------------------
1 | // schema.ts
2 | import { int, sqliteTable, text } from "drizzle-orm/sqlite-core";
3 |
4 | export const users = sqliteTable("users", {
5 | id: int().primaryKey({ autoIncrement: true }),
6 | name: text().notNull(),
7 | email: text().notNull().unique(),
8 | });
9 |
--------------------------------------------------------------------------------
/examples/cloudflare-redwood/src/db/seed.ts:
--------------------------------------------------------------------------------
1 | import { drizzle } from "drizzle-orm/d1";
2 | import { defineScript } from "rwsdk/worker";
3 | import { users } from "./schema.js";
4 |
5 | export default defineScript(async ({ env }) => {
6 | const db = drizzle(env.DB);
7 |
8 | // Insert a user
9 | await db.insert(users).values({
10 | name: "__change me__",
11 | email: "__change me__",
12 | });
13 |
14 | // Verify the insert by selecting all users
15 | const result = await db.select().from(users).all();
16 |
17 | console.log("🌱 Finished seeding");
18 |
19 | return Response.json(result);
20 | });
21 |
--------------------------------------------------------------------------------
/examples/cloudflare-redwood/src/worker.tsx:
--------------------------------------------------------------------------------
1 | import { env } from "cloudflare:workers";
2 | import { drizzle } from "drizzle-orm/d1";
3 | import { index, render } from "rwsdk/router";
4 | import { defineApp } from "rwsdk/worker";
5 | import { Document } from "src/Document";
6 | import { setCommonHeaders } from "src/headers";
7 | import { Home } from "src/pages/Home";
8 |
9 | export interface Env {
10 | DB: D1Database;
11 | }
12 |
13 | export type AppContext = {
14 | db: ReturnTypeHello World
9 |{JSON.stringify(allUsers, null, 2)}
10 |
6 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/components/PostError.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ErrorComponent,
3 | type ErrorComponentProps,
4 | } from "@tanstack/react-router";
5 |
6 | export function PostErrorComponent({ error }: ErrorComponentProps) {
7 | return
7 | {children ||
9 | The page you are looking for does not exist.
} 8 |10 | 16 | 20 | Start Over 21 | 22 |
23 |
10 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/_pathlessLayout/_nested-layout.tsx:
--------------------------------------------------------------------------------
1 | import { Link, Outlet, createFileRoute } from "@tanstack/react-router";
2 |
3 | export const Route = createFileRoute("/_pathlessLayout/_nested-layout")({
4 | component: LayoutComponent,
5 | });
6 |
7 | function LayoutComponent() {
8 | return (
9 | I'm a layout
11 |
12 |
14 |
10 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/_pathlessLayout/_nested-layout/route-a.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 |
3 | export const Route = createFileRoute("/_pathlessLayout/_nested-layout/route-a")(
4 | {
5 | component: LayoutAComponent,
6 | },
7 | );
8 |
9 | function LayoutAComponent() {
10 | return I'm a nested layout
11 |
12 |
18 | Go to route A
19 |
20 |
26 | Go to route B
27 |
28 |
29 |
30 |
32 | I'm A!
;
11 | }
12 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/_pathlessLayout/_nested-layout/route-b.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 |
3 | export const Route = createFileRoute("/_pathlessLayout/_nested-layout/route-b")(
4 | {
5 | component: LayoutBComponent,
6 | },
7 | );
8 |
9 | function LayoutBComponent() {
10 | return I'm B!
;
11 | }
12 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/api/users.$id.ts:
--------------------------------------------------------------------------------
1 | import { json } from "@tanstack/react-start";
2 | import { createAPIFileRoute } from "@tanstack/react-start/api";
3 | import type { User } from "../../utils/users.js";
4 |
5 | export const APIRoute = createAPIFileRoute("/api/users/$id")({
6 | GET: async ({ request, params }) => {
7 | console.info(`Fetching users by id=${params.id}... @`, request.url);
8 | try {
9 | const res = await fetch(
10 | `https://jsonplaceholder.typicode.com/users/${params.id}`,
11 | );
12 | if (!res.ok) {
13 | throw new Error("Failed to fetch user");
14 | }
15 |
16 | const user = (await res.json()) as User;
17 |
18 | return json({
19 | id: user.id,
20 | name: user.name,
21 | email: user.email,
22 | });
23 | } catch (e) {
24 | console.error(e);
25 | return json({ error: "User not found" }, { status: 404 });
26 | }
27 | },
28 | });
29 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/api/users.ts:
--------------------------------------------------------------------------------
1 | import { json } from "@tanstack/react-start";
2 | import { createAPIFileRoute } from "@tanstack/react-start/api";
3 | import type { User } from "../../utils/users.js";
4 |
5 | export const APIRoute = createAPIFileRoute("/api/users")({
6 | GET: async ({ request }) => {
7 | console.info("Fetching users... @", request.url);
8 | const res = await fetch("https://jsonplaceholder.typicode.com/users");
9 | if (!res.ok) {
10 | throw new Error("Failed to fetch users");
11 | }
12 |
13 | const data = (await res.json()) as Array
10 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/posts.$postId.tsx:
--------------------------------------------------------------------------------
1 | import { Link, createFileRoute } from "@tanstack/react-router";
2 | import { fetchPost } from "../utils/posts.js";
3 | import { NotFound } from "~/components/NotFound";
4 | import { PostErrorComponent } from "~/components/PostError";
5 |
6 | export const Route = createFileRoute("/posts/$postId")({
7 | loader: ({ params: { postId } }) => fetchPost({ data: postId }),
8 | errorComponent: PostErrorComponent,
9 | component: PostComponent,
10 | notFoundComponent: () => {
11 | return Welcome Home!!!
11 |
20 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/posts.index.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 |
3 | export const Route = createFileRoute("/posts/")({
4 | component: PostsIndexComponent,
5 | });
6 |
7 | function PostsIndexComponent() {
8 | return {post.title}
21 |{post.body}
22 |
30 | Deep View
31 |
32 | Select a post.
;
9 | }
10 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/posts.route.tsx:
--------------------------------------------------------------------------------
1 | import { Link, Outlet, createFileRoute } from "@tanstack/react-router";
2 | import { fetchPosts } from "../utils/posts.js";
3 |
4 | export const Route = createFileRoute("/posts")({
5 | loader: async () => fetchPosts(),
6 | component: PostsLayoutComponent,
7 | });
8 |
9 | function PostsLayoutComponent() {
10 | const posts = Route.useLoaderData();
11 |
12 | return (
13 |
14 |
35 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/posts_.$postId.deep.tsx:
--------------------------------------------------------------------------------
1 | import { Link, createFileRoute } from "@tanstack/react-router";
2 | import { fetchPost } from "../utils/posts.js";
3 | import { PostErrorComponent } from "~/components/PostError";
4 |
5 | export const Route = createFileRoute("/posts_/$postId/deep")({
6 | loader: async ({ params: { postId } }) =>
7 | fetchPost({
8 | data: postId,
9 | }),
10 | errorComponent: PostErrorComponent,
11 | component: PostDeepComponent,
12 | });
13 |
14 | function PostDeepComponent() {
15 | const post = Route.useLoaderData();
16 |
17 | return (
18 | -
15 | {[...posts, { id: "i-do-not-exist", title: "Non-existent Post" }].map(
16 | (post) => {
17 | return (
18 |
-
19 |
27 | {post.title.substring(0, 20)}28 | 29 |
30 | );
31 | },
32 | )}
33 |
35 |
19 |
23 | ← All Posts
24 |
25 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/redirect.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute, redirect } from "@tanstack/react-router";
2 |
3 | export const Route = createFileRoute("/redirect")({
4 | beforeLoad: async () => {
5 | throw redirect({
6 | to: "/posts",
7 | });
8 | },
9 | });
10 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/users.$userId.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 | import type { User } from "~/utils/users";
3 | import { DEPLOY_URL } from "~/utils/users";
4 | import { NotFound } from "~/components/NotFound";
5 | import { UserErrorComponent } from "~/components/UserError";
6 |
7 | export const Route = createFileRoute("/users/$userId")({
8 | loader: async ({ params: { userId } }) => {
9 | try {
10 | const res = await fetch(`${DEPLOY_URL}/api/users/${userId}`);
11 | if (!res.ok) {
12 | throw new Error("Unexpected status code");
13 | }
14 |
15 | const data = (await res.json()) as User;
16 |
17 | return data;
18 | } catch {
19 | throw new Error("Failed to fetch user");
20 | }
21 | },
22 | errorComponent: UserErrorComponent,
23 | component: UserComponent,
24 | notFoundComponent: () => {
25 | return {post.title}
26 |{post.body}
27 |
34 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/users.index.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 |
3 | export const Route = createFileRoute("/users/")({
4 | component: UsersIndexComponent,
5 | });
6 |
7 | function UsersIndexComponent() {
8 | return {user.name}
35 |{user.email}
36 | Select a user.
;
9 | }
10 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/routes/users.route.tsx:
--------------------------------------------------------------------------------
1 | import { Link, Outlet, createFileRoute } from "@tanstack/react-router";
2 | import { DEPLOY_URL } from "../utils/users.js";
3 | import type { User } from "../utils/users.js";
4 |
5 | export const Route = createFileRoute("/users")({
6 | loader: async () => {
7 | try {
8 | const res = await fetch(`${DEPLOY_URL}/api/users`);
9 | if (!res.ok) {
10 | throw new Error("Unexpected status code");
11 | }
12 |
13 | const data = (await res.json()) as Array
28 |
50 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/examples/cloudflare-tanstack-start/src/ssr.tsx:
--------------------------------------------------------------------------------
1 | /// -
29 | {[
30 | ...users,
31 | { id: "i-do-not-exist", name: "Non-existent User", email: "" },
32 | ].map((user) => {
33 | return (
34 |
-
35 |
43 | {user.name}44 | 45 |
46 | );
47 | })}
48 |
50 |
Vite + React
20 |
21 |
24 |
28 |
25 | Edit src/App.tsx and save to test HMR
26 |
29 | Click on the Vite and React logos to learn more 30 |
31 | 32 | ); 33 | } 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /examples/cloudflare-vite/src/auth/subjects.ts: -------------------------------------------------------------------------------- 1 | import { createSubjects } from "@openauthjs/openauth/subject"; 2 | import type { InferOutput } from "valibot"; 3 | import { object, string } from "valibot"; 4 | 5 | export type User = InferOutput