Skip to content

Commit 9d89017

Browse files
theoephraimtheoephraim
committed
cleaning up tanstack example
1 parent d2b98c5 commit 9d89017

9 files changed

Lines changed: 247 additions & 15575 deletions

File tree

‎examples/tanstack-start/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
2+
[CLOUDFLARE DEPLOYED EXAMPLE](tanstack-start-varlock-example.dmno.workers.dev)
3+
4+
15
Welcome to your new TanStack Start app!
26

37
# Getting Started

‎examples/tanstack-start/package.json‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@
99
"dev": "vite dev --port 3000",
1010
"build": "vite build",
1111
"preview": "vite preview",
12+
"dev:cf": "USE_CF=1 vite dev --port 3000",
13+
"build:cf": "USE_CF=1 vite build",
14+
"preview:cf": "USE_CF=1 vite preview",
15+
"deploy:cf": "USE_CF=1 varlock-wrangler deploy",
1216
"test": "vitest run",
13-
"deploy": "npm run build && varlock-wrangler deploy",
1417
"cf-typegen": "varlock-wrangler types"
1518
},
1619
"dependencies": {
@@ -22,11 +25,12 @@
2225
"@tanstack/react-router-ssr-query": "^1.166.10",
2326
"@tanstack/react-start": "^1.167.3",
2427
"@tanstack/router-plugin": "^1.167.3",
25-
"@varlock/cloudflare-integration": "link:../../../varlock/packages/integrations/cloudflare",
26-
"react": "^19.2.0",
28+
"@varlock/cloudflare-integration": "https://pkg.pr.new/@varlock/cloudflare-integration@622",
29+
"@varlock/vite-integration": "0.2.10",
30+
"react": "^19.2.5",
2731
"react-dom": "^19.2.0",
2832
"tailwindcss": "^4.1.18",
29-
"varlock": "link:../../../varlock/packages/varlock",
33+
"varlock": "https://pkg.pr.new/varlock@622",
3034
"wrangler": "^4.76.0"
3135
},
3236
"devDependencies": {

‎examples/tanstack-start/pnpm-lock.yaml‎

Lines changed: 115 additions & 65 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/tanstack-start/src/cf-stub.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// Stub for cloudflare:workers when not running on Cloudflare
2+
export const env = {} as Record<string, string | undefined>;

‎examples/tanstack-start/src/routes/api-route.tsx‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { useState } from 'react'
33
import { ENV } from 'varlock/env'
44
import { env } from 'cloudflare:workers'
55

6+
declare const __USE_CF__: boolean
7+
68
function redact(val: string | undefined) {
79
if (val === undefined || val === null) return { set: false, length: 0 }
810
return { set: true, length: val.length }
@@ -20,27 +22,32 @@ export const Route = createFileRoute('/api-route')({
2022
vars: {
2123
SENSITIVE_VAR: {
2224
varlock: redact(ENV.SENSITIVE_VAR),
23-
cloudflare: redact(env.SENSITIVE_VAR),
25+
processEnv: redact(process.env.SENSITIVE_VAR),
26+
...(__USE_CF__ && { cloudflare: redact(env.SENSITIVE_VAR) }),
2427
importMeta: redact(import.meta.env.SENSITIVE_VAR),
2528
},
2629
ANOTHER_SECRET: {
2730
varlock: redact(ENV.ANOTHER_SECRET),
28-
cloudflare: redact(env.ANOTHER_SECRET),
31+
processEnv: redact(process.env.ANOTHER_SECRET),
32+
...(__USE_CF__ && { cloudflare: redact(env.ANOTHER_SECRET) }),
2933
importMeta: redact(import.meta.env.ANOTHER_SECRET),
3034
},
3135
PUBLIC_ITEM: {
3236
varlock: redact(ENV.PUBLIC_ITEM),
33-
cloudflare: redact(env.PUBLIC_ITEM),
37+
processEnv: redact(process.env.PUBLIC_ITEM),
38+
...(__USE_CF__ && { cloudflare: redact(env.PUBLIC_ITEM) }),
3439
importMeta: redact(import.meta.env.PUBLIC_ITEM),
3540
},
3641
PUBLIC_OTHER: {
3742
varlock: redact(ENV.PUBLIC_OTHER),
38-
cloudflare: redact(env.PUBLIC_OTHER),
43+
processEnv: redact(process.env.PUBLIC_OTHER),
44+
...(__USE_CF__ && { cloudflare: redact(env.PUBLIC_OTHER) }),
3945
importMeta: redact(import.meta.env.PUBLIC_OTHER),
4046
},
4147
VITE_PREFIXED_ITEM: {
4248
varlock: redact(ENV.VITE_PREFIXED_ITEM),
43-
cloudflare: redact(env.VITE_PREFIXED_ITEM),
49+
processEnv: redact(process.env.VITE_PREFIXED_ITEM),
50+
...(__USE_CF__ && { cloudflare: redact(env.VITE_PREFIXED_ITEM) }),
4451
importMeta: redact(import.meta.env.VITE_PREFIXED_ITEM),
4552
},
4653
},
@@ -52,13 +59,13 @@ export const Route = createFileRoute('/api-route')({
5259
})
5360

5461
type RedactedInfo = { set: boolean; length: number }
55-
type EnvResult = {
56-
leaked: string | undefined
57-
vars: Record<string, { varlock: RedactedInfo; cloudflare: RedactedInfo; importMeta: RedactedInfo }>
58-
}
62+
type VarRow = { varlock: RedactedInfo; processEnv: RedactedInfo; cloudflare?: RedactedInfo; importMeta: RedactedInfo }
5963

6064
function ApiRoutePage() {
61-
const [data, setData] = useState<EnvResult | null>(null)
65+
const [data, setData] = useState<{
66+
leaked: string | undefined
67+
vars: Record<string, VarRow>
68+
} | null>(null)
6269
const [loading, setLoading] = useState(false)
6370

6471
const handleFetch = async (leak: boolean) => {
@@ -71,6 +78,9 @@ function ApiRoutePage() {
7178
}
7279
}
7380

81+
const varNames = ['SENSITIVE_VAR', 'ANOTHER_SECRET', 'PUBLIC_ITEM', 'PUBLIC_OTHER', 'VITE_PREFIXED_ITEM'] as const
82+
const showCf = data ? 'cloudflare' in data.vars[varNames[0]] : false
83+
7484
return (
7585
<main className="page-wrap px-4 pb-8 pt-14">
7686
<h1 className="display-title mb-6 text-3xl font-bold text-[var(--sea-ink)]">
@@ -112,13 +122,14 @@ function ApiRoutePage() {
112122
<thead>
113123
<tr className="border-b border-[var(--line)]">
114124
<th className="py-2 pr-4">Variable</th>
115-
<th className="py-2 pr-4 font-mono text-xs">ENV.xx</th>
116-
<th className="py-2 pr-4 font-mono text-xs">env.xx</th>
117-
<th className="py-2 font-mono text-xs">import.meta.env.xx</th>
125+
<th className="py-2 pr-4 font-mono text-xs"><code>ENV</code> (varlock)</th>
126+
<th className="py-2 pr-4 font-mono text-xs"><code>process.env</code></th>
127+
{showCf && <th className="py-2 pr-4 font-mono text-xs"><code>env</code> (cloudflare)</th>}
128+
<th className="py-2 font-mono text-xs"><code>import.meta.env</code></th>
118129
</tr>
119130
</thead>
120131
<tbody>
121-
{(['SENSITIVE_VAR', 'ANOTHER_SECRET', 'PUBLIC_ITEM', 'PUBLIC_OTHER', 'VITE_PREFIXED_ITEM'] as const).map((name) => {
132+
{varNames.map((name) => {
122133
const row = data.vars[name]
123134
if (!row) return null
124135
return (
@@ -127,7 +138,8 @@ function ApiRoutePage() {
127138
{name}
128139
</td>
129140
<td className="py-2 pr-4"><RedactedCell info={row.varlock} /></td>
130-
<td className="py-2 pr-4"><RedactedCell info={row.cloudflare} /></td>
141+
<td className="py-2 pr-4"><RedactedCell info={row.processEnv} /></td>
142+
{showCf && <td className="py-2 pr-4"><RedactedCell info={row.cloudflare} /></td>}
131143
<td className="py-2"><RedactedCell info={row.importMeta} /></td>
132144
</tr>
133145
)
@@ -140,7 +152,8 @@ function ApiRoutePage() {
140152
)
141153
}
142154

143-
function RedactedCell({ info }: { info: RedactedInfo }) {
155+
function RedactedCell({ info }: { info: RedactedInfo | undefined }) {
156+
if (!info) return <span className="font-mono text-xs text-gray-400">—</span>
144157
return (
145158
<span className="font-mono text-xs">
146159
{info.set ? (

‎examples/tanstack-start/src/routes/server-action.tsx‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { useState } from 'react'
44
import { ENV } from 'varlock/env'
55
import { env } from 'cloudflare:workers'
66

7+
declare const __USE_CF__: boolean
8+
79
export const Route = createFileRoute('/server-action')({
810
component: ServerActionPage,
911
})
@@ -17,27 +19,32 @@ function getEnvVars() {
1719
return {
1820
SENSITIVE_VAR: {
1921
varlock: redact(ENV.SENSITIVE_VAR),
20-
cloudflare: redact(env.SENSITIVE_VAR),
22+
processEnv: redact(process.env.SENSITIVE_VAR),
23+
...(__USE_CF__ && { cloudflare: redact(env.SENSITIVE_VAR) }),
2124
importMeta: redact(import.meta.env.SENSITIVE_VAR),
2225
},
2326
ANOTHER_SECRET: {
2427
varlock: redact(ENV.ANOTHER_SECRET),
25-
cloudflare: redact(env.ANOTHER_SECRET),
28+
processEnv: redact(process.env.ANOTHER_SECRET),
29+
...(__USE_CF__ && { cloudflare: redact(env.ANOTHER_SECRET) }),
2630
importMeta: redact(import.meta.env.ANOTHER_SECRET),
2731
},
2832
PUBLIC_ITEM: {
2933
varlock: redact(ENV.PUBLIC_ITEM),
30-
cloudflare: redact(env.PUBLIC_ITEM),
34+
processEnv: redact(process.env.PUBLIC_ITEM),
35+
...(__USE_CF__ && { cloudflare: redact(env.PUBLIC_ITEM) }),
3136
importMeta: redact(import.meta.env.PUBLIC_ITEM),
3237
},
3338
PUBLIC_OTHER: {
3439
varlock: redact(ENV.PUBLIC_OTHER),
35-
cloudflare: redact(env.PUBLIC_OTHER),
40+
processEnv: redact(process.env.PUBLIC_OTHER),
41+
...(__USE_CF__ && { cloudflare: redact(env.PUBLIC_OTHER) }),
3642
importMeta: redact(import.meta.env.PUBLIC_OTHER),
3743
},
3844
VITE_PREFIXED_ITEM: {
3945
varlock: redact(ENV.VITE_PREFIXED_ITEM),
40-
cloudflare: redact(env.VITE_PREFIXED_ITEM),
46+
processEnv: redact(process.env.VITE_PREFIXED_ITEM),
47+
...(__USE_CF__ && { cloudflare: redact(env.VITE_PREFIXED_ITEM) }),
4148
importMeta: redact(import.meta.env.VITE_PREFIXED_ITEM),
4249
},
4350
}
@@ -52,13 +59,13 @@ const fetchAllEnvWithLeak = createServerFn({ method: 'GET' }).handler(() => {
5259
})
5360

5461
type RedactedInfo = { set: boolean; length: number }
55-
type EnvResult = {
56-
leaked: string | undefined
57-
vars: Record<string, { varlock: RedactedInfo; cloudflare: RedactedInfo; importMeta: RedactedInfo }>
58-
}
62+
type VarRow = { varlock: RedactedInfo; processEnv: RedactedInfo; cloudflare?: RedactedInfo; importMeta: RedactedInfo }
5963

6064
function ServerActionPage() {
61-
const [data, setData] = useState<EnvResult | null>(null)
65+
const [data, setData] = useState<{
66+
leaked: string | undefined
67+
vars: Record<string, VarRow>
68+
} | null>(null)
6269
const [loading, setLoading] = useState(false)
6370

6471
const handleFetch = async (leak: boolean) => {
@@ -70,6 +77,9 @@ function ServerActionPage() {
7077
}
7178
}
7279

80+
const varNames = ['SENSITIVE_VAR', 'ANOTHER_SECRET', 'PUBLIC_ITEM', 'PUBLIC_OTHER', 'VITE_PREFIXED_ITEM'] as const
81+
const showCf = data ? 'cloudflare' in data.vars[varNames[0]] : false
82+
7383
return (
7484
<main className="page-wrap px-4 pb-8 pt-14">
7585
<h1 className="display-title mb-6 text-3xl font-bold text-[var(--sea-ink)]">
@@ -111,13 +121,14 @@ function ServerActionPage() {
111121
<thead>
112122
<tr className="border-b border-[var(--line)]">
113123
<th className="py-2 pr-4">Variable</th>
114-
<th className="py-2 pr-4 font-mono text-xs">ENV.xx</th>
115-
<th className="py-2 pr-4 font-mono text-xs">env.xx</th>
116-
<th className="py-2 font-mono text-xs">import.meta.env.xx</th>
124+
<th className="py-2 pr-4 font-mono text-xs"><code>ENV</code> (varlock)</th>
125+
<th className="py-2 pr-4 font-mono text-xs"><code>process.env</code></th>
126+
{showCf && <th className="py-2 pr-4 font-mono text-xs"><code>env</code> (cloudflare)</th>}
127+
<th className="py-2 font-mono text-xs"><code>import.meta.env</code></th>
117128
</tr>
118129
</thead>
119130
<tbody>
120-
{(['SENSITIVE_VAR', 'ANOTHER_SECRET', 'PUBLIC_ITEM', 'PUBLIC_OTHER', 'VITE_PREFIXED_ITEM'] as const).map((name) => {
131+
{varNames.map((name) => {
121132
const row = data.vars[name]
122133
if (!row) return null
123134
return (
@@ -126,7 +137,8 @@ function ServerActionPage() {
126137
{name}
127138
</td>
128139
<td className="py-2 pr-4"><RedactedCell info={row.varlock} /></td>
129-
<td className="py-2 pr-4"><RedactedCell info={row.cloudflare} /></td>
140+
<td className="py-2 pr-4"><RedactedCell info={row.processEnv} /></td>
141+
{showCf && <td className="py-2 pr-4"><RedactedCell info={row.cloudflare} /></td>}
130142
<td className="py-2"><RedactedCell info={row.importMeta} /></td>
131143
</tr>
132144
)
@@ -139,7 +151,8 @@ function ServerActionPage() {
139151
)
140152
}
141153

142-
function RedactedCell({ info }: { info: RedactedInfo }) {
154+
function RedactedCell({ info }: { info: RedactedInfo | undefined }) {
155+
if (!info) return <span className="font-mono text-xs text-gray-400">—</span>
143156
return (
144157
<span className="font-mono text-xs">
145158
{info.set ? (

‎examples/tanstack-start/src/routes/server-loader.tsx‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { createServerFn } from '@tanstack/react-start'
33
import { ENV } from 'varlock/env'
44
import { env } from 'cloudflare:workers'
55

6+
declare const __USE_CF__: boolean
7+
68
export const Route = createFileRoute('/server-loader')({
79
validateSearch: (search: Record<string, unknown>) => ({
810
leak: search.leak === 'true' || search.leak === true,
@@ -21,27 +23,32 @@ function getEnvVars() {
2123
return {
2224
SENSITIVE_VAR: {
2325
varlock: redact(ENV.SENSITIVE_VAR),
24-
cloudflare: redact(env.SENSITIVE_VAR),
26+
processEnv: redact(process.env.SENSITIVE_VAR),
27+
...(__USE_CF__ && { cloudflare: redact(env.SENSITIVE_VAR) }),
2528
importMeta: redact(import.meta.env.SENSITIVE_VAR),
2629
},
2730
ANOTHER_SECRET: {
2831
varlock: redact(ENV.ANOTHER_SECRET),
29-
cloudflare: redact(env.ANOTHER_SECRET),
32+
processEnv: redact(process.env.ANOTHER_SECRET),
33+
...(__USE_CF__ && { cloudflare: redact(env.ANOTHER_SECRET) }),
3034
importMeta: redact(import.meta.env.ANOTHER_SECRET),
3135
},
3236
PUBLIC_ITEM: {
3337
varlock: redact(ENV.PUBLIC_ITEM),
34-
cloudflare: redact(env.PUBLIC_ITEM),
38+
processEnv: redact(process.env.PUBLIC_ITEM),
39+
...(__USE_CF__ && { cloudflare: redact(env.PUBLIC_ITEM) }),
3540
importMeta: redact(import.meta.env.PUBLIC_ITEM),
3641
},
3742
PUBLIC_OTHER: {
3843
varlock: redact(ENV.PUBLIC_OTHER),
39-
cloudflare: redact(env.PUBLIC_OTHER),
44+
processEnv: redact(process.env.PUBLIC_OTHER),
45+
...(__USE_CF__ && { cloudflare: redact(env.PUBLIC_OTHER) }),
4046
importMeta: redact(import.meta.env.PUBLIC_OTHER),
4147
},
4248
VITE_PREFIXED_ITEM: {
4349
varlock: redact(ENV.VITE_PREFIXED_ITEM),
44-
cloudflare: redact(env.VITE_PREFIXED_ITEM),
50+
processEnv: redact(process.env.VITE_PREFIXED_ITEM),
51+
...(__USE_CF__ && { cloudflare: redact(env.VITE_PREFIXED_ITEM) }),
4552
importMeta: redact(import.meta.env.VITE_PREFIXED_ITEM),
4653
},
4754
}
@@ -55,11 +62,18 @@ const getServerEnvDataWithLeak = createServerFn({ method: 'GET' }).handler(() =>
5562
return { leaked: ENV.SENSITIVE_VAR as string | undefined, vars: getEnvVars() }
5663
})
5764

65+
type RedactedInfo = { set: boolean; length: number }
66+
type VarRow = { varlock: RedactedInfo; processEnv: RedactedInfo; cloudflare?: RedactedInfo; importMeta: RedactedInfo }
67+
5868
function ServerLoaderPage() {
5969
const data = Route.useLoaderData()
6070
const { leak } = Route.useSearch()
6171
const navigate = useNavigate()
6272

73+
const varNames = ['SENSITIVE_VAR', 'ANOTHER_SECRET', 'PUBLIC_ITEM', 'PUBLIC_OTHER', 'VITE_PREFIXED_ITEM'] as const
74+
const firstRow = data.vars[varNames[0]] as VarRow
75+
const showCf = 'cloudflare' in firstRow
76+
6377
return (
6478
<main className="page-wrap px-4 pb-8 pt-14">
6579
<h1 className="display-title mb-6 text-3xl font-bold text-[var(--sea-ink)]">
@@ -94,21 +108,23 @@ function ServerLoaderPage() {
94108
<thead>
95109
<tr className="border-b border-[var(--line)]">
96110
<th className="py-2 pr-4">Variable</th>
97-
<th className="py-2 pr-4 font-mono text-xs">ENV.xx</th>
98-
<th className="py-2 pr-4 font-mono text-xs">env.xx</th>
99-
<th className="py-2 font-mono text-xs">import.meta.env.xx</th>
111+
<th className="py-2 pr-4 font-mono text-xs"><code>ENV</code> (varlock)</th>
112+
<th className="py-2 pr-4 font-mono text-xs"><code>process.env</code></th>
113+
{showCf && <th className="py-2 pr-4 font-mono text-xs"><code>env</code> (cloudflare)</th>}
114+
<th className="py-2 font-mono text-xs"><code>import.meta.env</code></th>
100115
</tr>
101116
</thead>
102117
<tbody>
103-
{(['SENSITIVE_VAR', 'ANOTHER_SECRET', 'PUBLIC_ITEM', 'PUBLIC_OTHER', 'VITE_PREFIXED_ITEM'] as const).map((name) => {
104-
const row = data.vars[name]
118+
{varNames.map((name) => {
119+
const row = data.vars[name] as VarRow
105120
return (
106121
<tr key={name} className="border-b border-[var(--line)]">
107122
<td className="py-2 pr-4 font-mono text-xs font-semibold">
108123
{name}
109124
</td>
110125
<td className="py-2 pr-4"><RedactedCell info={row.varlock} /></td>
111-
<td className="py-2 pr-4"><RedactedCell info={row.cloudflare} /></td>
126+
<td className="py-2 pr-4"><RedactedCell info={row.processEnv} /></td>
127+
{showCf && <td className="py-2 pr-4"><RedactedCell info={row.cloudflare} /></td>}
112128
<td className="py-2"><RedactedCell info={row.importMeta} /></td>
113129
</tr>
114130
)
@@ -120,7 +136,8 @@ function ServerLoaderPage() {
120136
)
121137
}
122138

123-
function RedactedCell({ info }: { info: { set: boolean; length: number } }) {
139+
function RedactedCell({ info }: { info: RedactedInfo | undefined }) {
140+
if (!info) return <span className="font-mono text-xs text-gray-400">—</span>
124141
return (
125142
<span className="font-mono text-xs">
126143
{info.set ? (

0 commit comments

Comments
 (0)