Skip to content

draft: typesafety #12752

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

draft: typesafety #12752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f8382e0
wip
pcattori Jan 8, 2025
f3d594c
use route ids
pcattori Jan 10, 2025
3bb0ea6
Routes type working!
pcattori Jan 15, 2025
5945583
types for route exports
pcattori Jan 15, 2025
345f1da
wip: href works!
pcattori Jan 15, 2025
759a11a
wip: fix tests
pcattori Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions integration/helpers/vite-5-template/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
{
"include": [
"env.d.ts",
"**/*.ts",
"**/*.tsx",
".react-router/types/**/*.d.ts"
],
"include": ["env.d.ts", "**/*.ts", "**/*.tsx", ".react-router/types/**/*.ts"],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"verbatimModuleSyntax": true,
Expand Down
7 changes: 1 addition & 6 deletions integration/helpers/vite-6-template/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
{
"include": [
"env.d.ts",
"**/*.ts",
"**/*.tsx",
".react-router/types/**/*.d.ts"
],
"include": ["env.d.ts", "**/*.ts", "**/*.tsx", ".react-router/types/**/*.ts"],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"verbatimModuleSyntax": true,
Expand Down
2 changes: 1 addition & 1 deletion integration/helpers/vite-cloudflare-template/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
"include": ["env.d.ts", "**/*.ts", "**/*.tsx", ".react-router/types/**/*.ts"],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"types": ["vite/client"],
Expand Down
178 changes: 137 additions & 41 deletions integration/typegen-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,12 @@ test.describe("typegen", () => {
import type { Route } from "./+types/product"

export function loader({ params }: Route.LoaderArgs) {
type Test1 = Expect<Equal<typeof params.id, string>>
type Test2 = Expect<Equal<typeof params.asdf, string | undefined>>
type Assert = Expect<Equal<typeof params, { id: string }>>
return { planet: "world" }
}

export default function Component({ loaderData }: Route.ComponentProps) {
type Test = Expect<Equal<typeof loaderData.planet, string>>
type Assert = Expect<Equal<typeof loaderData, { planet: string }>>
return <h1>Hello, {loaderData.planet}!</h1>
}
`,
Expand Down Expand Up @@ -90,8 +89,7 @@ test.describe("typegen", () => {
import type { Route } from "./+types/repeated-params"

export function loader({ params }: Route.LoaderArgs) {
type Expected = [string, string | undefined, string]
type Test = Expect<Equal<typeof params.id, Expected>>
type Assert = Expect<Equal<typeof params, { id: string }>>
return null
}
`,
Expand All @@ -118,7 +116,7 @@ test.describe("typegen", () => {
import type { Route } from "./+types/splat"

export function loader({ params }: Route.LoaderArgs) {
type Test = Expect<Equal<typeof params["*"], string>>
type Assert = Expect<Equal<typeof params, { "*": string }>>
return null
}
`,
Expand Down Expand Up @@ -146,7 +144,7 @@ test.describe("typegen", () => {
import type { Route } from "./+types/param-with-ext"

export function loader({ params }: Route.LoaderArgs) {
type Test = Expect<Equal<typeof params["lang"], string>>
type Assert = Expect<Equal<typeof params, { "lang": string }>>
return null
}
`,
Expand All @@ -155,7 +153,7 @@ test.describe("typegen", () => {
import type { Route } from "./+types/optional-param-with-ext"

export function loader({ params }: Route.LoaderArgs) {
type Test = Expect<Equal<typeof params["user"], string | undefined>>
type Assert = Expect<Equal<typeof params, { user?: string }>>
return null
}
`,
Expand Down Expand Up @@ -189,7 +187,7 @@ test.describe("typegen", () => {
}

export default function Component({ loaderData }: Route.ComponentProps) {
type Test = Expect<Equal<typeof loaderData, { client: string }>>
type Assert = Expect<Equal<typeof loaderData, { client: string }>>
return <h1>Hello from {loaderData.client}!</h1>
}
`,
Expand All @@ -214,12 +212,12 @@ test.describe("typegen", () => {
import type { Route } from "./+types/products.$id"

export function loader({ params }: Route.LoaderArgs) {
type Test = Expect<Equal<typeof params.id, string>>
type Assert = Expect<Equal<typeof params, { id: string }>>
return { planet: "world" }
}

export default function Component({ loaderData }: Route.ComponentProps) {
type Test = Expect<Equal<typeof loaderData.planet, string>>
type Assert = Expect<Equal<typeof loaderData, { planet: string }>>
return <h1>Hello, {loaderData.planet}!</h1>
}
`,
Expand All @@ -242,7 +240,10 @@ test.describe("typegen", () => {
export default [
route("parent1/:parent1", "routes/parent1.tsx", [
route("parent2/:parent2", "routes/parent2.tsx", [
route("current", "routes/current.tsx")
route("current", "routes/current.tsx", [
route("childA/:a", "routes/childA.tsx"),
route("childB/:b?", "routes/childB.tsx"),
])
])
])
] satisfies RouteConfig;
Expand Down Expand Up @@ -287,40 +288,135 @@ test.describe("typegen", () => {
return { current: 3 }
}

export function meta({ matches }: Route.MetaArgs) {
const parent1 = matches[1]
type Test1 = Expect<Equal<typeof parent1.data, { parent1: number }>>

const parent2 = matches[2]
type Test2 = Expect<Equal<typeof parent2.data, { parent2: number }>>

const current = matches[3]
type Test3 = Expect<Equal<typeof current.data, { current: number }>>
type Expected = [
{
id: "root";
params:
| { parent1: string }
| {
parent1: string;
parent2: string;
}
| {
parent1: string;
parent2: string;
a: string;
}
| {
parent1: string;
parent2: string;
b?: string;
};
data: undefined;
},
{
id: "routes/parent1";
params:
| {
parent1: string;
parent2: string;
}
| {
parent1: string;
parent2: string;
a: string;
}
| {
parent1: string;
parent2: string;
b?: string;
};
data: {
parent1: number;
};
},
{
id: "routes/parent2";
params:
| {
parent1: string;
parent2: string;
}
| {
parent1: string;
parent2: string;
a: string;
}
| {
parent1: string;
parent2: string;
b?: string;
};
},
{
id: "routes/current";
params:
| {
parent1: string;
parent2: string;
}
| {
parent1: string;
parent2: string;
a: string;
}
| {
parent1: string;
parent2: string;
b?: string;
};
data: {
current: number;
};
},
(
| {
id: "routes/childA";
params: {
parent1: string;
parent2: string;
a: string;
};
data: {
childA: number;
};
}
| {
id: "routes/childB";
params: {
parent1: string;
parent2: string;
b?: string;
};
data: {
childB: number;
};
}
)
]

const child1 = matches[4]
type Test4a = Expect<undefined extends typeof child1 ? true : false>
if (child1) {
type Test4b = Expect<Equal<typeof child1.data, unknown>>
}
export function meta({ matches }: Route.MetaArgs) {
type Test = Expect<typeof matches extends Expected ? true : false>
return []
}

export default function Component({ matches }: Route.ComponentProps) {
const parent1 = matches[1]
type Test1 = Expect<Equal<typeof parent1.data, { parent1: number }>>

const parent2 = matches[2]
type Test2 = Expect<Equal<typeof parent2.data, { parent2: number }>>

const current = matches[3]
type Test3 = Expect<Equal<typeof current.data, { current: number }>>
type Test = Expect<typeof matches extends Expected ? true : false>
}
`,
"app/routes/childA.tsx": tsx`
export function loader() {
return { childA: 4 }
}

const child1 = matches[4]
type Test4a = Expect<undefined extends typeof child1 ? true : false>
if (child1) {
type Test4b = Expect<Equal<typeof child1.data, unknown>>
}
export default function Component() {}
`,
"app/routes/childB.tsx": tsx`
export function loader() {
return { childB: 4 }
}

export default function Component() {}
`,
});
const proc = typecheck(cwd);
Expand All @@ -346,12 +442,12 @@ test.describe("typegen", () => {
import type { Route } from "./+types/absolute"

export function loader({ params }: Route.LoaderArgs) {
type Test = Expect<Equal<typeof params.id, string>>
type Assert = Expect<Equal<typeof params, { id: string }>>
return { planet: "world" }
}

export default function Component({ loaderData }: Route.ComponentProps) {
type Test = Expect<Equal<typeof loaderData.planet, string>>
type Assert = Expect<Equal<typeof loaderData, { planet: string }>>
return <h1>Hello, {loaderData.planet}!</h1>
}
`,
Expand Down
Loading
Loading