@tamagui/cli 3.0.0-beta.637.1 → 3.0.0-beta.645.1
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.
- package/dist/build.cjs +17 -7
- package/dist/cli.cjs +10 -0
- package/dist/setup-prompt.cjs +158 -0
- package/package.json +9 -9
- package/src/build.ts +27 -6
- package/src/cli.ts +13 -0
- package/src/setup-prompt.ts +139 -0
- package/types/build.d.ts +1 -0
- package/types/build.d.ts.map +1 -1
- package/types/setup-prompt.d.ts +3 -0
- package/types/setup-prompt.d.ts.map +1 -0
package/dist/build.cjs
CHANGED
|
@@ -227,7 +227,20 @@ const build = async (options) => {
|
|
|
227
227
|
optimized: 0,
|
|
228
228
|
flattened: 0,
|
|
229
229
|
styled: 0,
|
|
230
|
-
found: 0
|
|
230
|
+
found: 0,
|
|
231
|
+
bailed: 0
|
|
232
|
+
};
|
|
233
|
+
const countedFiles = /* @__PURE__ */ new Set();
|
|
234
|
+
const addStats = (sourcePath, fileStats) => {
|
|
235
|
+
if (!countedFiles.has(sourcePath)) {
|
|
236
|
+
countedFiles.add(sourcePath);
|
|
237
|
+
stats.filesProcessed++;
|
|
238
|
+
}
|
|
239
|
+
stats.optimized += fileStats.lowered - fileStats.flattened;
|
|
240
|
+
stats.flattened += fileStats.flattened;
|
|
241
|
+
stats.styled += fileStats.styled;
|
|
242
|
+
stats.found += fileStats.found;
|
|
243
|
+
stats.bailed += fileStats.bailed;
|
|
231
244
|
};
|
|
232
245
|
if (options.debug) process.env.NODE_ENV ||= "development";
|
|
233
246
|
const sources = /* @__PURE__ */ new Map();
|
|
@@ -239,11 +252,7 @@ const build = async (options) => {
|
|
|
239
252
|
${sourcePath} [web]`);
|
|
240
253
|
const out = await compileTarget("web", sourcePath, originalSource);
|
|
241
254
|
if (out.output.changed || out.plan.stats.found > 0) {
|
|
242
|
-
stats
|
|
243
|
-
stats.optimized += out.plan.stats.lowered - out.plan.stats.flattened;
|
|
244
|
-
stats.flattened += out.plan.stats.flattened;
|
|
245
|
-
stats.styled += out.plan.stats.styled;
|
|
246
|
-
stats.found += out.plan.stats.found;
|
|
255
|
+
addStats(sourcePath, out.plan.stats);
|
|
247
256
|
if (isDryRun) {
|
|
248
257
|
if (out.plan.css) console.info(`
|
|
249
258
|
css:
|
|
@@ -276,6 +285,7 @@ ${out.output.code}`);
|
|
|
276
285
|
if (isDryRun) console.info(`
|
|
277
286
|
${sourcePath} [native]`);
|
|
278
287
|
const nativeOut = await compileTarget("native", sourcePath, originalSource);
|
|
288
|
+
if (nativeOut.output.changed || nativeOut.plan.stats.found > 0) addStats(sourcePath, nativeOut.plan.stats);
|
|
279
289
|
if (isDryRun) if (nativeOut.output.code) console.info(`
|
|
280
290
|
native:
|
|
281
291
|
${nativeOut.output.code}`);
|
|
@@ -316,7 +326,7 @@ ${nativeOut.output.code}`);
|
|
|
316
326
|
await Promise.all(targetPromises);
|
|
317
327
|
}
|
|
318
328
|
if (isDryRun) console.info(`
|
|
319
|
-
${stats.filesProcessed} files | ${stats.found} found | ${stats.optimized} optimized | ${stats.flattened} flattened | ${stats.styled} styled
|
|
329
|
+
${stats.filesProcessed} files | ${stats.found} found | ${stats.optimized} optimized | ${stats.flattened} flattened | ${stats.styled} styled | ${stats.bailed} bailed
|
|
320
330
|
`);
|
|
321
331
|
if (options.expectOptimizations !== void 0) {
|
|
322
332
|
const totalOptimizations = stats.optimized + stats.flattened;
|
package/dist/cli.cjs
CHANGED
|
@@ -223,6 +223,16 @@ const COMMAND_MAP = {
|
|
|
223
223
|
});
|
|
224
224
|
}
|
|
225
225
|
},
|
|
226
|
+
setup: {
|
|
227
|
+
shorthands: [],
|
|
228
|
+
description: `Print an AI-agent prompt for adding Tamagui to a project for the first time`,
|
|
229
|
+
usage: `$ tamagui setup`,
|
|
230
|
+
flags: { "--help": Boolean },
|
|
231
|
+
async run() {
|
|
232
|
+
const { printSetupPrompt } = require("./setup-prompt.cjs");
|
|
233
|
+
printSetupPrompt();
|
|
234
|
+
}
|
|
235
|
+
},
|
|
226
236
|
migrate: {
|
|
227
237
|
shorthands: [],
|
|
228
238
|
description: `Print an AI-agent prompt for migrating a Tamagui app to v3`,
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all) __defProp(target, name, {
|
|
8
|
+
get: all[name],
|
|
9
|
+
enumerable: true
|
|
10
|
+
});
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
15
|
+
get: () => from[key],
|
|
16
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var setup_prompt_exports = {};
|
|
23
|
+
__export(setup_prompt_exports, {
|
|
24
|
+
getSetupPrompt: () => getSetupPrompt,
|
|
25
|
+
printSetupPrompt: () => printSetupPrompt
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(setup_prompt_exports);
|
|
28
|
+
function printSetupPrompt() {
|
|
29
|
+
process.stdout.write(getSetupPrompt());
|
|
30
|
+
}
|
|
31
|
+
function getSetupPrompt() {
|
|
32
|
+
return `You are adding Tamagui v3 to a project that does not use it yet.
|
|
33
|
+
|
|
34
|
+
Work like a careful coding agent:
|
|
35
|
+
|
|
36
|
+
- Read the project first: package manager, bundler, framework, TypeScript config,
|
|
37
|
+
and whether it targets web, native, or both. Every choice below depends on it.
|
|
38
|
+
- Make the smallest install that actually runs, then verify it before adding more.
|
|
39
|
+
- Do not restyle existing components as part of setup.
|
|
40
|
+
- Do not publish packages, rotate secrets, or change production infrastructure.
|
|
41
|
+
- Stop and report if a step cannot be completed rather than guessing around it.
|
|
42
|
+
|
|
43
|
+
## 1. Check the baseline
|
|
44
|
+
|
|
45
|
+
Tamagui v3 requires React 19+, TypeScript 5+, and, for native apps, React Native
|
|
46
|
+
0.81+ with the New Architecture enabled. Web-only apps have no React Native
|
|
47
|
+
version requirement. If the project is below any of these, say so and stop.
|
|
48
|
+
|
|
49
|
+
## 2. Install
|
|
50
|
+
|
|
51
|
+
Tamagui v3 is currently a beta on the \`beta\` dist-tag. Resolve it once and pin
|
|
52
|
+
every package to the same version, because a mixed install silently produces two
|
|
53
|
+
copies of the runtime and styles that do nothing.
|
|
54
|
+
|
|
55
|
+
\`\`\`bash
|
|
56
|
+
V=$(npm view tamagui@beta version)
|
|
57
|
+
npm i tamagui@$V @tamagui/config@$V
|
|
58
|
+
\`\`\`
|
|
59
|
+
|
|
60
|
+
\`tamagui\` is a superset of \`@tamagui/core\`. Install \`@tamagui/core\` alone
|
|
61
|
+
only for a styling-only install with no UI kit.
|
|
62
|
+
|
|
63
|
+
## 3. Create the config
|
|
64
|
+
|
|
65
|
+
\`\`\`tsx
|
|
66
|
+
// tamagui.config.ts
|
|
67
|
+
import { defaultConfig } from '@tamagui/config/v6'
|
|
68
|
+
import { createTamagui } from 'tamagui'
|
|
69
|
+
|
|
70
|
+
export const config = createTamagui(defaultConfig)
|
|
71
|
+
|
|
72
|
+
declare module 'tamagui' {
|
|
73
|
+
interface TamaguiCustomConfig extends typeof config {}
|
|
74
|
+
}
|
|
75
|
+
\`\`\`
|
|
76
|
+
|
|
77
|
+
Pick an animation driver explicitly and import it from \`@tamagui/config\`:
|
|
78
|
+
\`animations-css\` (web), \`animations-rn\`, \`animations-reanimated\`, or
|
|
79
|
+
\`animations-motion\`. Do not install \`@tamagui/theme-builder\` or any v5 builder
|
|
80
|
+
package; they are not part of v3.
|
|
81
|
+
|
|
82
|
+
## 4. Wrap the app
|
|
83
|
+
|
|
84
|
+
\`\`\`tsx
|
|
85
|
+
import { TamaguiProvider, View } from 'tamagui'
|
|
86
|
+
import { config } from './tamagui.config'
|
|
87
|
+
|
|
88
|
+
export default function App() {
|
|
89
|
+
return (
|
|
90
|
+
<TamaguiProvider config={config} defaultTheme="light">
|
|
91
|
+
<View width={200} height={200} bg="background" />
|
|
92
|
+
</TamaguiProvider>
|
|
93
|
+
)
|
|
94
|
+
}
|
|
95
|
+
\`\`\`
|
|
96
|
+
|
|
97
|
+
## 5. Wire the bundler
|
|
98
|
+
|
|
99
|
+
Add the adapter for the bundler this project actually uses, and no others:
|
|
100
|
+
|
|
101
|
+
- Vite: \`@tamagui/vite-plugin\`, or \`@tamagui/cli/vite\`
|
|
102
|
+
- Metro: \`@tamagui/metro-plugin\`, or \`@tamagui/cli/metro\`
|
|
103
|
+
- Next.js: \`@tamagui/next-plugin\`
|
|
104
|
+
- Turbopack: the \`tamagui build\` precompile step
|
|
105
|
+
|
|
106
|
+
There is no Webpack plugin in v3.
|
|
107
|
+
|
|
108
|
+
The compiler is an optimization, not a requirement. If wiring it is not
|
|
109
|
+
straightforward, skip it, note that you skipped it, and confirm the app runs
|
|
110
|
+
first.
|
|
111
|
+
|
|
112
|
+
## 6. Write styles the v3 way
|
|
113
|
+
|
|
114
|
+
This is the part most likely to be written as if it were v2. In v3, token and
|
|
115
|
+
theme names are bare, and conditions are flat clauses inside the value:
|
|
116
|
+
|
|
117
|
+
\`\`\`tsx
|
|
118
|
+
<View bg="background hover:background-hover" p="4 sm:6" />
|
|
119
|
+
\`\`\`
|
|
120
|
+
|
|
121
|
+
- No \`$\` sigils: \`bg="background"\`, not \`bg="$background"\`.
|
|
122
|
+
- No condition objects: there is no \`hoverStyle={{ ... }}\` and no \`$sm={{ ... }}\`.
|
|
123
|
+
- Modifiers chain left to right and read as prefixes: \`hover:sm:small\`.
|
|
124
|
+
- Clauses work on variant props too, not just style props, so
|
|
125
|
+
\`size="large sm:small"\` selects a different variant value per condition.
|
|
126
|
+
- When two clauses both apply, the winner is decided by specificity, not by
|
|
127
|
+
source order: first by platform (\`ios:\` beats \`native:\` beats unprefixed),
|
|
128
|
+
then by how many conditions the clause carries, then by category
|
|
129
|
+
(media < container < theme < group < state). Writing a clause later in the
|
|
130
|
+
string does not make it win.
|
|
131
|
+
- A chain is capped at five distinct non-platform conditions.
|
|
132
|
+
|
|
133
|
+
## 7. Verify before reporting success
|
|
134
|
+
|
|
135
|
+
\`\`\`bash
|
|
136
|
+
npx tamagui check
|
|
137
|
+
\`\`\`
|
|
138
|
+
|
|
139
|
+
\`tamagui check\` reports version mismatches, duplicate installs, lockfile
|
|
140
|
+
problems, a missing config, and any v2 style syntax left in source. Then run the
|
|
141
|
+
project's own typecheck and build, and start the app and confirm a Tamagui
|
|
142
|
+
component renders with its styles applied. A passing typecheck is not sufficient:
|
|
143
|
+
flat values are strings, so a misspelled token compiles cleanly and only shows up
|
|
144
|
+
at runtime.
|
|
145
|
+
|
|
146
|
+
## 8. Give the agent the project's own vocabulary
|
|
147
|
+
|
|
148
|
+
Once the app runs, generate a description of this project's actual tokens,
|
|
149
|
+
themes, and components so later prompts do not guess at them:
|
|
150
|
+
|
|
151
|
+
\`\`\`bash
|
|
152
|
+
npx tamagui generate-prompt
|
|
153
|
+
\`\`\`
|
|
154
|
+
|
|
155
|
+
That writes \`tamagui-prompt.md\`. Keep it in the repo and regenerate it when the
|
|
156
|
+
config changes.
|
|
157
|
+
`;
|
|
158
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/cli",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.645.1",
|
|
4
4
|
"bin": {
|
|
5
5
|
"tama": "dist/index.cjs",
|
|
6
6
|
"tamagui": "dist/index.cjs"
|
|
@@ -51,12 +51,12 @@
|
|
|
51
51
|
"test:web": "bun run test"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@tamagui/generate-themes": "3.0.0-beta.
|
|
55
|
-
"@tamagui/metro-plugin": "3.0.0-beta.
|
|
56
|
-
"@tamagui/static": "3.0.0-beta.
|
|
57
|
-
"@tamagui/to-tailwind": "3.0.0-beta.
|
|
58
|
-
"@tamagui/types": "3.0.0-beta.
|
|
59
|
-
"@tamagui/vite-plugin": "3.0.0-beta.
|
|
54
|
+
"@tamagui/generate-themes": "3.0.0-beta.645.1",
|
|
55
|
+
"@tamagui/metro-plugin": "3.0.0-beta.645.1",
|
|
56
|
+
"@tamagui/static": "3.0.0-beta.645.1",
|
|
57
|
+
"@tamagui/to-tailwind": "3.0.0-beta.645.1",
|
|
58
|
+
"@tamagui/types": "3.0.0-beta.645.1",
|
|
59
|
+
"@tamagui/vite-plugin": "3.0.0-beta.645.1",
|
|
60
60
|
"arg": "^5.0.2",
|
|
61
61
|
"chalk": "^4.1.2",
|
|
62
62
|
"change-case": "^4.1.2",
|
|
@@ -75,10 +75,10 @@
|
|
|
75
75
|
"ts-morph": "^28.0.0",
|
|
76
76
|
"typescript": "~6.0.3",
|
|
77
77
|
"url": "^0.11.0",
|
|
78
|
-
"@tamagui/language-service": "3.0.0-beta.
|
|
78
|
+
"@tamagui/language-service": "3.0.0-beta.645.1"
|
|
79
79
|
},
|
|
80
80
|
"devDependencies": {
|
|
81
|
-
"@tamagui/build": "3.0.0-beta.
|
|
81
|
+
"@tamagui/build": "3.0.0-beta.645.1",
|
|
82
82
|
"@types/chokidar": "^2.1.3",
|
|
83
83
|
"@types/marked": "^5.0.0",
|
|
84
84
|
"vitest": "4.0.4"
|
package/src/build.ts
CHANGED
|
@@ -34,6 +34,7 @@ export type BuildStats = {
|
|
|
34
34
|
flattened: number
|
|
35
35
|
styled: number
|
|
36
36
|
found: number
|
|
37
|
+
bailed: number
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
export type TrackedFile = {
|
|
@@ -362,6 +363,26 @@ export const build = async (
|
|
|
362
363
|
flattened: 0,
|
|
363
364
|
styled: 0,
|
|
364
365
|
found: 0,
|
|
366
|
+
bailed: 0,
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
// both target passes report through here, so a `--target native` run stops
|
|
370
|
+
// summarizing itself as all zeros. a file counts once even when it compiles for
|
|
371
|
+
// both targets, otherwise `files` double-counts every shared component.
|
|
372
|
+
const countedFiles = new Set<string>()
|
|
373
|
+
const addStats = (
|
|
374
|
+
sourcePath: string,
|
|
375
|
+
fileStats: Awaited<ReturnType<typeof compileTarget>>['plan']['stats']
|
|
376
|
+
) => {
|
|
377
|
+
if (!countedFiles.has(sourcePath)) {
|
|
378
|
+
countedFiles.add(sourcePath)
|
|
379
|
+
stats.filesProcessed++
|
|
380
|
+
}
|
|
381
|
+
stats.optimized += fileStats.lowered - fileStats.flattened
|
|
382
|
+
stats.flattened += fileStats.flattened
|
|
383
|
+
stats.styled += fileStats.styled
|
|
384
|
+
stats.found += fileStats.found
|
|
385
|
+
stats.bailed += fileStats.bailed
|
|
365
386
|
}
|
|
366
387
|
|
|
367
388
|
if (options.debug) {
|
|
@@ -384,11 +405,7 @@ export const build = async (
|
|
|
384
405
|
const out = await compileTarget('web', sourcePath, originalSource)
|
|
385
406
|
|
|
386
407
|
if (out.output.changed || out.plan.stats.found > 0) {
|
|
387
|
-
stats
|
|
388
|
-
stats.optimized += out.plan.stats.lowered - out.plan.stats.flattened
|
|
389
|
-
stats.flattened += out.plan.stats.flattened
|
|
390
|
-
stats.styled += out.plan.stats.styled
|
|
391
|
-
stats.found += out.plan.stats.found
|
|
408
|
+
addStats(sourcePath, out.plan.stats)
|
|
392
409
|
|
|
393
410
|
if (isDryRun) {
|
|
394
411
|
if (out.plan.css) {
|
|
@@ -460,6 +477,10 @@ export const build = async (
|
|
|
460
477
|
// Use the ORIGINAL source, not what was just written to disk
|
|
461
478
|
const nativeOut = await compileTarget('native', sourcePath, originalSource)
|
|
462
479
|
|
|
480
|
+
if (nativeOut.output.changed || nativeOut.plan.stats.found > 0) {
|
|
481
|
+
addStats(sourcePath, nativeOut.plan.stats)
|
|
482
|
+
}
|
|
483
|
+
|
|
463
484
|
if (isDryRun) {
|
|
464
485
|
if (nativeOut.output.code) {
|
|
465
486
|
console.info(`\nnative:\n${nativeOut.output.code}`)
|
|
@@ -567,7 +588,7 @@ export const build = async (
|
|
|
567
588
|
|
|
568
589
|
if (isDryRun) {
|
|
569
590
|
console.info(
|
|
570
|
-
`\n${stats.filesProcessed} files | ${stats.found} found | ${stats.optimized} optimized | ${stats.flattened} flattened | ${stats.styled} styled\n`
|
|
591
|
+
`\n${stats.filesProcessed} files | ${stats.found} found | ${stats.optimized} optimized | ${stats.flattened} flattened | ${stats.styled} styled | ${stats.bailed} bailed\n`
|
|
571
592
|
)
|
|
572
593
|
}
|
|
573
594
|
|
package/src/cli.ts
CHANGED
|
@@ -242,6 +242,19 @@ const COMMAND_MAP = {
|
|
|
242
242
|
},
|
|
243
243
|
},
|
|
244
244
|
|
|
245
|
+
setup: {
|
|
246
|
+
shorthands: [],
|
|
247
|
+
description: `Print an AI-agent prompt for adding Tamagui to a project for the first time`,
|
|
248
|
+
usage: `$ tamagui setup`,
|
|
249
|
+
flags: {
|
|
250
|
+
'--help': Boolean,
|
|
251
|
+
},
|
|
252
|
+
async run() {
|
|
253
|
+
const { printSetupPrompt } = require('./setup-prompt')
|
|
254
|
+
printSetupPrompt()
|
|
255
|
+
},
|
|
256
|
+
},
|
|
257
|
+
|
|
245
258
|
migrate: {
|
|
246
259
|
shorthands: [],
|
|
247
260
|
description: `Print an AI-agent prompt for migrating a Tamagui app to v3`,
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
// The agent brief for setting Tamagui up in a project that has never had it.
|
|
2
|
+
// `tamagui migrate --from v2` is the sibling for projects that already run v2.
|
|
3
|
+
//
|
|
4
|
+
// Both are printed by the CLI rather than kept only in docs so that whatever
|
|
5
|
+
// version a user installs describes itself, instead of an agent reading a docs
|
|
6
|
+
// page written against a different release.
|
|
7
|
+
|
|
8
|
+
export function printSetupPrompt() {
|
|
9
|
+
process.stdout.write(getSetupPrompt())
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function getSetupPrompt() {
|
|
13
|
+
return `You are adding Tamagui v3 to a project that does not use it yet.
|
|
14
|
+
|
|
15
|
+
Work like a careful coding agent:
|
|
16
|
+
|
|
17
|
+
- Read the project first: package manager, bundler, framework, TypeScript config,
|
|
18
|
+
and whether it targets web, native, or both. Every choice below depends on it.
|
|
19
|
+
- Make the smallest install that actually runs, then verify it before adding more.
|
|
20
|
+
- Do not restyle existing components as part of setup.
|
|
21
|
+
- Do not publish packages, rotate secrets, or change production infrastructure.
|
|
22
|
+
- Stop and report if a step cannot be completed rather than guessing around it.
|
|
23
|
+
|
|
24
|
+
## 1. Check the baseline
|
|
25
|
+
|
|
26
|
+
Tamagui v3 requires React 19+, TypeScript 5+, and, for native apps, React Native
|
|
27
|
+
0.81+ with the New Architecture enabled. Web-only apps have no React Native
|
|
28
|
+
version requirement. If the project is below any of these, say so and stop.
|
|
29
|
+
|
|
30
|
+
## 2. Install
|
|
31
|
+
|
|
32
|
+
Tamagui v3 is currently a beta on the \`beta\` dist-tag. Resolve it once and pin
|
|
33
|
+
every package to the same version, because a mixed install silently produces two
|
|
34
|
+
copies of the runtime and styles that do nothing.
|
|
35
|
+
|
|
36
|
+
\`\`\`bash
|
|
37
|
+
V=$(npm view tamagui@beta version)
|
|
38
|
+
npm i tamagui@$V @tamagui/config@$V
|
|
39
|
+
\`\`\`
|
|
40
|
+
|
|
41
|
+
\`tamagui\` is a superset of \`@tamagui/core\`. Install \`@tamagui/core\` alone
|
|
42
|
+
only for a styling-only install with no UI kit.
|
|
43
|
+
|
|
44
|
+
## 3. Create the config
|
|
45
|
+
|
|
46
|
+
\`\`\`tsx
|
|
47
|
+
// tamagui.config.ts
|
|
48
|
+
import { defaultConfig } from '@tamagui/config/v6'
|
|
49
|
+
import { createTamagui } from 'tamagui'
|
|
50
|
+
|
|
51
|
+
export const config = createTamagui(defaultConfig)
|
|
52
|
+
|
|
53
|
+
declare module 'tamagui' {
|
|
54
|
+
interface TamaguiCustomConfig extends typeof config {}
|
|
55
|
+
}
|
|
56
|
+
\`\`\`
|
|
57
|
+
|
|
58
|
+
Pick an animation driver explicitly and import it from \`@tamagui/config\`:
|
|
59
|
+
\`animations-css\` (web), \`animations-rn\`, \`animations-reanimated\`, or
|
|
60
|
+
\`animations-motion\`. Do not install \`@tamagui/theme-builder\` or any v5 builder
|
|
61
|
+
package; they are not part of v3.
|
|
62
|
+
|
|
63
|
+
## 4. Wrap the app
|
|
64
|
+
|
|
65
|
+
\`\`\`tsx
|
|
66
|
+
import { TamaguiProvider, View } from 'tamagui'
|
|
67
|
+
import { config } from './tamagui.config'
|
|
68
|
+
|
|
69
|
+
export default function App() {
|
|
70
|
+
return (
|
|
71
|
+
<TamaguiProvider config={config} defaultTheme="light">
|
|
72
|
+
<View width={200} height={200} bg="background" />
|
|
73
|
+
</TamaguiProvider>
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
\`\`\`
|
|
77
|
+
|
|
78
|
+
## 5. Wire the bundler
|
|
79
|
+
|
|
80
|
+
Add the adapter for the bundler this project actually uses, and no others:
|
|
81
|
+
|
|
82
|
+
- Vite: \`@tamagui/vite-plugin\`, or \`@tamagui/cli/vite\`
|
|
83
|
+
- Metro: \`@tamagui/metro-plugin\`, or \`@tamagui/cli/metro\`
|
|
84
|
+
- Next.js: \`@tamagui/next-plugin\`
|
|
85
|
+
- Turbopack: the \`tamagui build\` precompile step
|
|
86
|
+
|
|
87
|
+
There is no Webpack plugin in v3.
|
|
88
|
+
|
|
89
|
+
The compiler is an optimization, not a requirement. If wiring it is not
|
|
90
|
+
straightforward, skip it, note that you skipped it, and confirm the app runs
|
|
91
|
+
first.
|
|
92
|
+
|
|
93
|
+
## 6. Write styles the v3 way
|
|
94
|
+
|
|
95
|
+
This is the part most likely to be written as if it were v2. In v3, token and
|
|
96
|
+
theme names are bare, and conditions are flat clauses inside the value:
|
|
97
|
+
|
|
98
|
+
\`\`\`tsx
|
|
99
|
+
<View bg="background hover:background-hover" p="4 sm:6" />
|
|
100
|
+
\`\`\`
|
|
101
|
+
|
|
102
|
+
- No \`$\` sigils: \`bg="background"\`, not \`bg="$background"\`.
|
|
103
|
+
- No condition objects: there is no \`hoverStyle={{ ... }}\` and no \`$sm={{ ... }}\`.
|
|
104
|
+
- Modifiers chain left to right and read as prefixes: \`hover:sm:small\`.
|
|
105
|
+
- Clauses work on variant props too, not just style props, so
|
|
106
|
+
\`size="large sm:small"\` selects a different variant value per condition.
|
|
107
|
+
- When two clauses both apply, the winner is decided by specificity, not by
|
|
108
|
+
source order: first by platform (\`ios:\` beats \`native:\` beats unprefixed),
|
|
109
|
+
then by how many conditions the clause carries, then by category
|
|
110
|
+
(media < container < theme < group < state). Writing a clause later in the
|
|
111
|
+
string does not make it win.
|
|
112
|
+
- A chain is capped at five distinct non-platform conditions.
|
|
113
|
+
|
|
114
|
+
## 7. Verify before reporting success
|
|
115
|
+
|
|
116
|
+
\`\`\`bash
|
|
117
|
+
npx tamagui check
|
|
118
|
+
\`\`\`
|
|
119
|
+
|
|
120
|
+
\`tamagui check\` reports version mismatches, duplicate installs, lockfile
|
|
121
|
+
problems, a missing config, and any v2 style syntax left in source. Then run the
|
|
122
|
+
project's own typecheck and build, and start the app and confirm a Tamagui
|
|
123
|
+
component renders with its styles applied. A passing typecheck is not sufficient:
|
|
124
|
+
flat values are strings, so a misspelled token compiles cleanly and only shows up
|
|
125
|
+
at runtime.
|
|
126
|
+
|
|
127
|
+
## 8. Give the agent the project's own vocabulary
|
|
128
|
+
|
|
129
|
+
Once the app runs, generate a description of this project's actual tokens,
|
|
130
|
+
themes, and components so later prompts do not guess at them:
|
|
131
|
+
|
|
132
|
+
\`\`\`bash
|
|
133
|
+
npx tamagui generate-prompt
|
|
134
|
+
\`\`\`
|
|
135
|
+
|
|
136
|
+
That writes \`tamagui-prompt.md\`. Keep it in the repo and regenerate it when the
|
|
137
|
+
config changes.
|
|
138
|
+
`
|
|
139
|
+
}
|
package/types/build.d.ts
CHANGED
package/types/build.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAkB,MAAM,gBAAgB,CAAA;AAuBxE,MAAM,MAAM,UAAU,GAAG;IACvB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAkB,MAAM,gBAAgB,CAAA;AAuBxE,MAAM,MAAM,UAAU,GAAG;IACvB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,UAAU,CAAA;IACjB,YAAY,EAAE,WAAW,EAAE,CAAA;CAC5B,CAAA;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAW5E;AAED,eAAO,MAAM,KAAK,YACP,kBAAkB,GAAG;IAC5B,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,KACA,OAAO,CAAC,WAAW,CA2iBrB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"setup-prompt.d.ts","sourceRoot":"","sources":["../src/setup-prompt.ts"],"names":[],"mappings":"AAOA,wBAAgB,gBAAgB,SAE/B;AAED,wBAAgB,cAAc,WA+H7B"}
|