@tamagui/cli 2.7.7 → 3.0.0-0.canary.1791056644527
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/add.cjs +76 -87
- package/dist/build.cjs +421 -278
- package/dist/cli.cjs +410 -340
- package/dist/generate-prompt.cjs +37 -386
- package/dist/generate.cjs +45 -54
- package/dist/icons.cjs +263 -0
- package/dist/index.cjs +1 -1
- package/dist/migrate.cjs +443 -0
- package/dist/preview-theme.cjs +70 -0
- package/dist/setup-prompt.cjs +216 -0
- package/dist/to-tailwind-default-config.cjs +874 -0
- package/dist/to-tailwind.cjs +213 -0
- package/dist/update-template.cjs +43 -52
- package/dist/update.cjs +14 -18
- package/dist/upgrade.cjs +417 -401
- package/dist/utils.cjs +84 -101
- package/metro.cjs +1 -0
- package/metro.d.ts +1 -0
- package/metro.mjs +1 -0
- package/package.json +45 -14
- package/src/build.ts +579 -361
- package/src/cli.ts +171 -24
- package/src/generate-prompt.ts +18 -526
- package/src/icons.ts +308 -0
- package/src/migrate.ts +428 -0
- package/src/preview-theme.ts +54 -0
- package/src/setup-prompt.ts +192 -0
- package/src/to-tailwind-default-config.ts +852 -0
- package/src/to-tailwind.ts +313 -0
- package/src/upgrade.ts +30 -33
- package/src/utils.ts +11 -9
- package/types/add.d.ts +1 -1
- package/types/add.d.ts.map +1 -1
- package/types/build.d.ts +2 -1
- package/types/build.d.ts.map +1 -1
- package/types/generate-prompt.d.ts +2 -2
- package/types/generate-prompt.d.ts.map +1 -1
- package/types/icons.d.ts +14 -0
- package/types/icons.d.ts.map +1 -0
- package/types/migrate.d.ts +7 -0
- package/types/migrate.d.ts.map +1 -0
- package/types/preview-theme.d.ts +8 -0
- package/types/preview-theme.d.ts.map +1 -0
- package/types/setup-prompt.d.ts +5 -0
- package/types/setup-prompt.d.ts.map +1 -0
- package/types/to-tailwind-default-config.d.ts +53 -0
- package/types/to-tailwind-default-config.d.ts.map +1 -0
- package/types/to-tailwind.d.ts +16 -0
- package/types/to-tailwind.d.ts.map +1 -0
- package/types/upgrade.d.ts.map +1 -1
- package/types/utils.d.ts.map +1 -1
- package/vite.cjs +1 -0
- package/vite.d.ts +1 -0
- package/vite.mjs +1 -0
package/dist/generate-prompt.cjs
CHANGED
|
@@ -5,401 +5,52 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
|
5
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
7
|
var __export = (target, all) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
for (var name in all) __defProp(target, name, {
|
|
9
|
+
get: all[name],
|
|
10
|
+
enumerable: true
|
|
11
|
+
});
|
|
12
12
|
};
|
|
13
13
|
var __copyProps = (to, from, except, desc) => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
16
|
+
get: () => from[key],
|
|
17
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
return to;
|
|
21
21
|
};
|
|
22
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
26
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
27
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
28
|
-
value: mod,
|
|
29
|
-
enumerable: true
|
|
22
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
23
|
+
value: mod,
|
|
24
|
+
enumerable: true
|
|
30
25
|
}) : target, mod));
|
|
31
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
32
|
-
value: true
|
|
33
|
-
}), mod);
|
|
26
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
34
27
|
var generate_prompt_exports = {};
|
|
35
|
-
__export(generate_prompt_exports, {
|
|
36
|
-
generatePrompt: () => generatePrompt
|
|
37
|
-
});
|
|
28
|
+
__export(generate_prompt_exports, { generatePrompt: () => generatePrompt });
|
|
38
29
|
module.exports = __toCommonJS(generate_prompt_exports);
|
|
30
|
+
var import_static = require("@tamagui/static");
|
|
39
31
|
var import_node_path = require("node:path");
|
|
40
32
|
var FS = __toESM(require("fs-extra"));
|
|
41
33
|
async function generatePrompt(options) {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
console.info(`
|
|
34
|
+
const { paths, output } = options;
|
|
35
|
+
const { loadTamagui } = require("@tamagui/static/loadTamagui");
|
|
36
|
+
process.env.TAMAGUI_KEEP_THEMES = "1";
|
|
37
|
+
await loadTamagui({
|
|
38
|
+
...options.tamaguiOptions,
|
|
39
|
+
platform: "web"
|
|
40
|
+
}, true);
|
|
41
|
+
const configPath = (0, import_node_path.join)(paths.dotDir, "tamagui.config.json");
|
|
42
|
+
if (!FS.existsSync(configPath)) {
|
|
43
|
+
throw new Error(`Config file not found at ${configPath}. Please run 'tamagui generate' first.`);
|
|
44
|
+
}
|
|
45
|
+
const config = await FS.readJSON(configPath);
|
|
46
|
+
const configSetting = config.tamaguiConfig?.settings?.styleValueSyntax;
|
|
47
|
+
const explicitChoice = options.styleValueSyntax || process.env.TAMAGUI_STYLE_VALUE_SYNTAX || configSetting;
|
|
48
|
+
const { resolveStyleValueSyntax } = require("./setup-prompt.cjs");
|
|
49
|
+
const resolvedSyntax = await resolveStyleValueSyntax(explicitChoice);
|
|
50
|
+
const markdown = (0, import_static.generateConfigMarkdown)(config, { styleValueSyntax: resolvedSyntax });
|
|
51
|
+
const outputPath = output || (0, import_node_path.join)(process.cwd(), "tamagui-prompt.md");
|
|
52
|
+
await FS.writeFile(outputPath, markdown, "utf-8");
|
|
53
|
+
console.info(`
|
|
63
54
|
\u2713 Generated prompt file at ${outputPath}
|
|
64
55
|
`);
|
|
65
56
|
}
|
|
66
|
-
function generateMarkdown(config) {
|
|
67
|
-
const sections = [];
|
|
68
|
-
sections.push("# Tamagui Configuration\n\n");
|
|
69
|
-
sections.push("This document provides an overview of the Tamagui configuration for this project.\n\n");
|
|
70
|
-
const shorthands = config.tamaguiConfig?.shorthands || {};
|
|
71
|
-
const reverseShorthands = {};
|
|
72
|
-
for (const [short, full] of Object.entries(shorthands)) {
|
|
73
|
-
reverseShorthands[full] = short;
|
|
74
|
-
}
|
|
75
|
-
const getPropName = fullProp => {
|
|
76
|
-
const settings2 = config.tamaguiConfig?.settings || {};
|
|
77
|
-
if (settings2.onlyAllowShorthands && reverseShorthands[fullProp]) {
|
|
78
|
-
return reverseShorthands[fullProp];
|
|
79
|
-
}
|
|
80
|
-
return fullProp;
|
|
81
|
-
};
|
|
82
|
-
const settings = config.tamaguiConfig?.settings || {};
|
|
83
|
-
if (Object.keys(settings).length > 0) {
|
|
84
|
-
sections.push("## Configuration Settings\n\n");
|
|
85
|
-
sections.push("**IMPORTANT:** These settings affect how you write Tamagui code in this project.\n\n");
|
|
86
|
-
if (settings.defaultFont) {
|
|
87
|
-
sections.push(`### Default Font: \`${settings.defaultFont}\`
|
|
88
|
-
|
|
89
|
-
`);
|
|
90
|
-
sections.push(`All text components will use the "${settings.defaultFont}" font family by default.
|
|
91
|
-
|
|
92
|
-
`);
|
|
93
|
-
}
|
|
94
|
-
if (settings.onlyAllowShorthands !== void 0) {
|
|
95
|
-
sections.push(`### Only Allow Shorthands: \`${settings.onlyAllowShorthands}\`
|
|
96
|
-
|
|
97
|
-
`);
|
|
98
|
-
if (settings.onlyAllowShorthands) {
|
|
99
|
-
sections.push("**You MUST use shorthand properties in this project.**\n\n");
|
|
100
|
-
sections.push("Full property names are not allowed. For example:\n");
|
|
101
|
-
sections.push('- \u2705 `<View w="$10" />` (correct)\n');
|
|
102
|
-
sections.push('- \u274C `<View width="$10" />` (will error)\n\n');
|
|
103
|
-
sections.push("See the Shorthand Properties section below for all available shorthands.\n\n");
|
|
104
|
-
} else {
|
|
105
|
-
sections.push("You can use either shorthand or full property names.\n\n");
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
if (settings.themeClassNameOnRoot !== void 0) {
|
|
109
|
-
sections.push(`### Theme Class Name on Root: \`${settings.themeClassNameOnRoot}\`
|
|
110
|
-
|
|
111
|
-
`);
|
|
112
|
-
if (settings.themeClassNameOnRoot) {
|
|
113
|
-
sections.push("Theme classes are applied to the root HTML element.\n\n");
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
const platform = settings.platform || settings.defaultProps?.platform;
|
|
117
|
-
if (platform) {
|
|
118
|
-
sections.push(`### Platform Mode: \`${platform}\`
|
|
119
|
-
|
|
120
|
-
`);
|
|
121
|
-
if (platform === "web") {
|
|
122
|
-
sections.push("This project is configured for **web only**.\n\n");
|
|
123
|
-
} else if (platform === "native") {
|
|
124
|
-
sections.push("This project is configured for **React Native only**.\n\n");
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
if (settings.webContainerType) {
|
|
128
|
-
sections.push(`### Web Container Type: \`${settings.webContainerType}\`
|
|
129
|
-
|
|
130
|
-
`);
|
|
131
|
-
sections.push("Enables web-specific container query optimizations.\n\n");
|
|
132
|
-
}
|
|
133
|
-
const configString = JSON.stringify(config.tamaguiConfig);
|
|
134
|
-
if (configString.includes("semi-strict-web")) {
|
|
135
|
-
sections.push("### Mode: `semi-strict-web`\n\n");
|
|
136
|
-
sections.push("This configuration uses semi-strict-web mode, which:\n");
|
|
137
|
-
sections.push("- Optimizes for web performance\n");
|
|
138
|
-
sections.push("- May have limited React Native API support\n");
|
|
139
|
-
sections.push("- Focuses on web-first development\n\n");
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
const componentsSection = [];
|
|
143
|
-
const allComponents = [];
|
|
144
|
-
for (const componentModule of config.components) {
|
|
145
|
-
const componentNames = Object.keys(componentModule.nameToInfo);
|
|
146
|
-
allComponents.push(...componentNames);
|
|
147
|
-
}
|
|
148
|
-
const componentGroups = /* @__PURE__ */new Map();
|
|
149
|
-
const processed = /* @__PURE__ */new Set();
|
|
150
|
-
const sortedComponents = [...allComponents].sort((a, b) => a.length - b.length);
|
|
151
|
-
for (const name of sortedComponents) {
|
|
152
|
-
if (processed.has(name)) continue;
|
|
153
|
-
const children = allComponents.filter(other => other !== name && other.startsWith(name) && other[name.length]?.match(/[A-Z]/));
|
|
154
|
-
if (children.length > 0) {
|
|
155
|
-
componentGroups.set(name, new Set(children));
|
|
156
|
-
processed.add(name);
|
|
157
|
-
children.forEach(child => processed.add(child));
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
const standaloneComponents = allComponents.filter(name => !processed.has(name));
|
|
161
|
-
componentsSection.push("## Components\n\n");
|
|
162
|
-
componentsSection.push("The following components are available:\n\n");
|
|
163
|
-
const allBaseComponents = [...standaloneComponents, ...Array.from(componentGroups.keys())].sort();
|
|
164
|
-
for (const name of allBaseComponents) {
|
|
165
|
-
componentsSection.push(`- ${name}
|
|
166
|
-
`);
|
|
167
|
-
if (componentGroups.has(name)) {
|
|
168
|
-
const children = Array.from(componentGroups.get(name)).sort();
|
|
169
|
-
for (const child of children) {
|
|
170
|
-
const suffix = child.slice(name.length);
|
|
171
|
-
componentsSection.push(` - ${name}.${suffix}
|
|
172
|
-
`);
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
componentsSection.push("\n");
|
|
177
|
-
sections.push("## Shorthand Properties\n\n");
|
|
178
|
-
sections.push("These shorthand properties are available for styling:\n\n");
|
|
179
|
-
const shorthandEntries = Object.entries(shorthands).sort(([a], [b]) => a.localeCompare(b));
|
|
180
|
-
sections.push(shorthandEntries.map(([short, full]) => `- \`${short}\` \u2192 \`${full}\``).join("\n"));
|
|
181
|
-
sections.push("\n\n");
|
|
182
|
-
sections.push("## Themes\n\n");
|
|
183
|
-
const themes = config.tamaguiConfig?.themes || {};
|
|
184
|
-
const themeNames = Object.keys(themes).sort();
|
|
185
|
-
const hierarchy = {
|
|
186
|
-
level1: /* @__PURE__ */new Set(),
|
|
187
|
-
level2: /* @__PURE__ */new Set(),
|
|
188
|
-
level3: /* @__PURE__ */new Set(),
|
|
189
|
-
components: /* @__PURE__ */new Set()
|
|
190
|
-
};
|
|
191
|
-
for (const themeName of themeNames) {
|
|
192
|
-
const parts = themeName.split("_");
|
|
193
|
-
if (parts[0] === "light" || parts[0] === "dark") {
|
|
194
|
-
hierarchy.level1.add(parts[0]);
|
|
195
|
-
if (parts.length > 1 && parts[1] && !parts[1].startsWith("alt") && parts[1] !== "active") {
|
|
196
|
-
if (parts[1][0] === parts[1][0].toLowerCase()) {
|
|
197
|
-
hierarchy.level2.add(parts[1]);
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
for (const part of parts) {
|
|
201
|
-
if (part.startsWith("alt") || part === "active") {
|
|
202
|
-
hierarchy.level3.add(part);
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
for (const part of parts) {
|
|
206
|
-
if (part[0] && part[0] === part[0].toUpperCase() && part[0] !== part[0].toLowerCase()) {
|
|
207
|
-
hierarchy.components.add(part);
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
} else {
|
|
211
|
-
if (parts.length === 1) {
|
|
212
|
-
hierarchy.level1.add(themeName);
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
sections.push("Themes are organized hierarchically and can be combined:\n\n");
|
|
217
|
-
if (hierarchy.level1.size > 0) {
|
|
218
|
-
sections.push("**Level 1 (Base):**\n\n");
|
|
219
|
-
sections.push(Array.from(hierarchy.level1).sort().map(name => `- ${name}`).join("\n"));
|
|
220
|
-
sections.push("\n\n");
|
|
221
|
-
}
|
|
222
|
-
if (hierarchy.level2.size > 0) {
|
|
223
|
-
sections.push("**Level 2 (Color Schemes):**\n\n");
|
|
224
|
-
sections.push(Array.from(hierarchy.level2).sort().map(name => `- ${name}`).join("\n"));
|
|
225
|
-
sections.push("\n\n");
|
|
226
|
-
}
|
|
227
|
-
if (hierarchy.level3.size > 0) {
|
|
228
|
-
sections.push("**Level 3 (Variants):**\n\n");
|
|
229
|
-
sections.push(Array.from(hierarchy.level3).sort().map(name => `- ${name}`).join("\n"));
|
|
230
|
-
sections.push("\n\n");
|
|
231
|
-
}
|
|
232
|
-
if (hierarchy.components.size > 0) {
|
|
233
|
-
sections.push("**Component Themes:**\n\n");
|
|
234
|
-
sections.push(Array.from(hierarchy.components).sort().map(name => `- ${name}`).join("\n"));
|
|
235
|
-
sections.push("\n\n");
|
|
236
|
-
}
|
|
237
|
-
sections.push("### Theme Usage\n\n");
|
|
238
|
-
sections.push("Themes are combined hierarchically. For example, `light_blue_alt1_Button` combines:\n");
|
|
239
|
-
sections.push("- Base: `light`\n");
|
|
240
|
-
sections.push("- Color: `blue`\n");
|
|
241
|
-
sections.push("- Variant: `alt1`\n");
|
|
242
|
-
sections.push("- Component: `Button`\n\n");
|
|
243
|
-
sections.push("**Basic usage:**\n\n");
|
|
244
|
-
sections.push("```tsx\n");
|
|
245
|
-
sections.push("// Apply a theme to components\n");
|
|
246
|
-
sections.push("export default () => (\n");
|
|
247
|
-
sections.push(' <Theme name="dark">\n');
|
|
248
|
-
sections.push(" <Button>I'm a dark button</Button>\n");
|
|
249
|
-
sections.push(" </Theme>\n");
|
|
250
|
-
sections.push(")\n\n");
|
|
251
|
-
sections.push("// Themes nest and combine automatically\n");
|
|
252
|
-
sections.push("export default () => (\n");
|
|
253
|
-
sections.push(' <Theme name="dark">\n');
|
|
254
|
-
sections.push(' <Theme name="blue">\n');
|
|
255
|
-
sections.push(" <Button>Uses dark_blue theme</Button>\n");
|
|
256
|
-
sections.push(" </Theme>\n");
|
|
257
|
-
sections.push(" </Theme>\n");
|
|
258
|
-
sections.push(")\n");
|
|
259
|
-
sections.push("```\n\n");
|
|
260
|
-
sections.push("**Accessing theme values:**\n\n");
|
|
261
|
-
sections.push("Components can access theme values using `$` token syntax:\n\n");
|
|
262
|
-
sections.push("```tsx\n");
|
|
263
|
-
sections.push(`<View ${getPropName("backgroundColor")}="$background" ${getPropName("color")}="$color" />
|
|
264
|
-
`);
|
|
265
|
-
sections.push("```\n\n");
|
|
266
|
-
sections.push("**Special props:**\n\n");
|
|
267
|
-
sections.push("- `inverse`: Automatically swaps light \u2194 dark themes\n");
|
|
268
|
-
sections.push("- `reset`: Reverts to grandparent theme\n\n");
|
|
269
|
-
sections.push("## Tokens\n\n");
|
|
270
|
-
sections.push("Tokens are design system values that can be referenced using the `$` prefix.\n\n");
|
|
271
|
-
const tokens = config.tamaguiConfig?.tokens || {};
|
|
272
|
-
if (tokens.space) {
|
|
273
|
-
sections.push("### Space Tokens\n\n");
|
|
274
|
-
const spaceTokens = Object.entries(tokens.space).sort(([a], [b]) => {
|
|
275
|
-
const numA = parseFloat(a);
|
|
276
|
-
const numB = parseFloat(b);
|
|
277
|
-
if (!isNaN(numA) && !isNaN(numB)) {
|
|
278
|
-
return numA - numB;
|
|
279
|
-
}
|
|
280
|
-
return a.localeCompare(b);
|
|
281
|
-
});
|
|
282
|
-
sections.push(spaceTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
|
|
283
|
-
sections.push("\n\n");
|
|
284
|
-
}
|
|
285
|
-
if (tokens.size) {
|
|
286
|
-
sections.push("### Size Tokens\n\n");
|
|
287
|
-
const sizeTokens = Object.entries(tokens.size).sort(([a], [b]) => {
|
|
288
|
-
const numA = parseFloat(a);
|
|
289
|
-
const numB = parseFloat(b);
|
|
290
|
-
if (!isNaN(numA) && !isNaN(numB)) {
|
|
291
|
-
return numA - numB;
|
|
292
|
-
}
|
|
293
|
-
return a.localeCompare(b);
|
|
294
|
-
});
|
|
295
|
-
sections.push(sizeTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
|
|
296
|
-
sections.push("\n\n");
|
|
297
|
-
}
|
|
298
|
-
if (tokens.radius) {
|
|
299
|
-
sections.push("### Radius Tokens\n\n");
|
|
300
|
-
const radiusTokens = Object.entries(tokens.radius).sort(([a], [b]) => {
|
|
301
|
-
const numA = parseFloat(a);
|
|
302
|
-
const numB = parseFloat(b);
|
|
303
|
-
if (!isNaN(numA) && !isNaN(numB)) {
|
|
304
|
-
return numA - numB;
|
|
305
|
-
}
|
|
306
|
-
return a.localeCompare(b);
|
|
307
|
-
});
|
|
308
|
-
sections.push(radiusTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
|
|
309
|
-
sections.push("\n\n");
|
|
310
|
-
}
|
|
311
|
-
if (tokens.zIndex) {
|
|
312
|
-
sections.push("### Z-Index Tokens\n\n");
|
|
313
|
-
const zIndexTokens = Object.entries(tokens.zIndex).sort(([a], [b]) => {
|
|
314
|
-
const numA = parseFloat(a);
|
|
315
|
-
const numB = parseFloat(b);
|
|
316
|
-
if (!isNaN(numA) && !isNaN(numB)) {
|
|
317
|
-
return numA - numB;
|
|
318
|
-
}
|
|
319
|
-
return a.localeCompare(b);
|
|
320
|
-
});
|
|
321
|
-
sections.push(zIndexTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
|
|
322
|
-
sections.push("\n\n");
|
|
323
|
-
}
|
|
324
|
-
if (tokens.color) {
|
|
325
|
-
sections.push("### Color Tokens\n\n");
|
|
326
|
-
const colorTokens = Object.entries(tokens.color).sort(([a], [b]) => a.localeCompare(b));
|
|
327
|
-
sections.push(colorTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
|
|
328
|
-
sections.push("\n\n");
|
|
329
|
-
}
|
|
330
|
-
sections.push("### Token Usage\n\n");
|
|
331
|
-
sections.push("Tokens can be used in component props with the `$` prefix:\n\n");
|
|
332
|
-
sections.push("```tsx\n");
|
|
333
|
-
sections.push("// Space tokens - for margin, padding, gap\n");
|
|
334
|
-
sections.push(`<View ${getPropName("padding")}="$4" ${getPropName("gap")}="$2" ${getPropName("margin")}="$3" />
|
|
335
|
-
|
|
336
|
-
`);
|
|
337
|
-
sections.push("// Size tokens - for width, height, dimensions\n");
|
|
338
|
-
sections.push(`<View ${getPropName("width")}="$10" ${getPropName("height")}="$6" />
|
|
339
|
-
|
|
340
|
-
`);
|
|
341
|
-
sections.push("// Color tokens - for colors and backgrounds\n");
|
|
342
|
-
sections.push(`<View ${getPropName("backgroundColor")}="$blue5" ${getPropName("color")}="$gray12" />
|
|
343
|
-
|
|
344
|
-
`);
|
|
345
|
-
sections.push("// Radius tokens - for border-radius\n");
|
|
346
|
-
sections.push(`<View ${getPropName("borderRadius")}="$4" />
|
|
347
|
-
`);
|
|
348
|
-
sections.push("```\n\n");
|
|
349
|
-
if (config.tamaguiConfig?.media) {
|
|
350
|
-
sections.push("## Media Queries\n\n");
|
|
351
|
-
sections.push("Available responsive breakpoints:\n\n");
|
|
352
|
-
const media = config.tamaguiConfig.media;
|
|
353
|
-
const mediaEntries = Object.entries(media).sort(([a], [b]) => a.localeCompare(b));
|
|
354
|
-
for (const [name, query] of mediaEntries) {
|
|
355
|
-
sections.push(`- **${name}**: ${JSON.stringify(query)}
|
|
356
|
-
`);
|
|
357
|
-
}
|
|
358
|
-
sections.push("\n");
|
|
359
|
-
sections.push("### Media Query Usage\n\n");
|
|
360
|
-
sections.push("Media queries can be used as style props or with the `useMedia` hook:\n\n");
|
|
361
|
-
sections.push("```tsx\n");
|
|
362
|
-
sections.push("// As style props (prefix with $)\n");
|
|
363
|
-
const firstMediaName = mediaEntries[0]?.[0];
|
|
364
|
-
if (firstMediaName) {
|
|
365
|
-
sections.push(`<View ${getPropName("width")}="100%" $${firstMediaName}={{ ${getPropName("width")}: "50%" }} />
|
|
366
|
-
|
|
367
|
-
`);
|
|
368
|
-
}
|
|
369
|
-
sections.push("// Using the useMedia hook\n");
|
|
370
|
-
sections.push("const media = useMedia()\n");
|
|
371
|
-
if (firstMediaName) {
|
|
372
|
-
sections.push(`if (media.${firstMediaName}) {
|
|
373
|
-
`);
|
|
374
|
-
sections.push(" // Render for this breakpoint\n");
|
|
375
|
-
sections.push("}\n");
|
|
376
|
-
}
|
|
377
|
-
sections.push("```\n\n");
|
|
378
|
-
}
|
|
379
|
-
if (config.tamaguiConfig?.fonts) {
|
|
380
|
-
sections.push("## Fonts\n\n");
|
|
381
|
-
sections.push("Available font families:\n\n");
|
|
382
|
-
const fonts = config.tamaguiConfig.fonts;
|
|
383
|
-
const fontNames = Object.keys(fonts).sort();
|
|
384
|
-
sections.push(fontNames.map(name => `- ${name}`).join("\n"));
|
|
385
|
-
sections.push("\n\n");
|
|
386
|
-
}
|
|
387
|
-
if (config.tamaguiConfig?.animations) {
|
|
388
|
-
sections.push("## Animations\n\n");
|
|
389
|
-
sections.push("Available animation presets:\n\n");
|
|
390
|
-
const animations = config.tamaguiConfig.animations;
|
|
391
|
-
if (animations.animations) {
|
|
392
|
-
const animationNames = Object.keys(animations.animations).sort();
|
|
393
|
-
sections.push(animationNames.map(name => `- ${name}`).join("\n"));
|
|
394
|
-
sections.push("\n\n");
|
|
395
|
-
}
|
|
396
|
-
}
|
|
397
|
-
sections.push(...componentsSection);
|
|
398
|
-
return sections.join("");
|
|
399
|
-
}
|
|
400
|
-
function formatTokenValue(value) {
|
|
401
|
-
if (typeof value === "object" && value !== null && "val" in value) {
|
|
402
|
-
return String(value.val);
|
|
403
|
-
}
|
|
404
|
-
return String(value);
|
|
405
|
-
}
|
package/dist/generate.cjs
CHANGED
|
@@ -6,71 +6,62 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
8
|
var __export = (target, all) => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
for (var name in all) __defProp(target, name, {
|
|
10
|
+
get: all[name],
|
|
11
|
+
enumerable: true
|
|
12
|
+
});
|
|
13
13
|
};
|
|
14
14
|
var __copyProps = (to, from, except, desc) => {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
16
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
17
|
+
get: () => from[key],
|
|
18
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
22
22
|
};
|
|
23
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
27
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
28
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
29
|
-
value: mod,
|
|
30
|
-
enumerable: true
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
24
|
+
value: mod,
|
|
25
|
+
enumerable: true
|
|
31
26
|
}) : target, mod));
|
|
32
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
33
|
-
value: true
|
|
34
|
-
}), mod);
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
35
28
|
var generate_exports = {};
|
|
36
29
|
__export(generate_exports, {
|
|
37
|
-
|
|
38
|
-
|
|
30
|
+
generateTypes: () => generateTypes,
|
|
31
|
+
getTypes: () => getTypes
|
|
39
32
|
});
|
|
40
33
|
module.exports = __toCommonJS(generate_exports);
|
|
41
34
|
var import_fs_extra = __toESM(require("fs-extra"));
|
|
42
35
|
var import_ts_morph = require("ts-morph");
|
|
43
36
|
var import_utils = require("./utils.cjs");
|
|
44
37
|
async function generateTypes(options) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
spaces: 2
|
|
48
|
-
});
|
|
38
|
+
const types = await getTypes(options);
|
|
39
|
+
await import_fs_extra.default.writeJSON(options.paths.types, types, { spaces: 2 });
|
|
49
40
|
}
|
|
50
41
|
async function getTypes(options) {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}
|
|
42
|
+
const tamagui = await (0, import_utils.loadTamagui)(options.tamaguiOptions);
|
|
43
|
+
if (!tamagui) {
|
|
44
|
+
throw new Error(`No tamagui config`);
|
|
45
|
+
}
|
|
46
|
+
const nameToPaths = tamagui.nameToPaths || [];
|
|
47
|
+
const uniqueViewExportingPaths = new Set(Object.keys(nameToPaths).map((name) => {
|
|
48
|
+
return `${[...nameToPaths[name]][0]}.ts*`;
|
|
49
|
+
}));
|
|
50
|
+
const project = new import_ts_morph.Project({
|
|
51
|
+
compilerOptions: {
|
|
52
|
+
noEmit: false,
|
|
53
|
+
declaration: true,
|
|
54
|
+
emitDeclarationOnly: true
|
|
55
|
+
},
|
|
56
|
+
skipAddingFilesFromTsConfig: true,
|
|
57
|
+
tsConfigFilePath: options.tsconfigPath
|
|
58
|
+
});
|
|
59
|
+
const files = project.addSourceFilesAtPaths([...uniqueViewExportingPaths]);
|
|
60
|
+
return Object.fromEntries(files.flatMap((x) => {
|
|
61
|
+
return [...x.getExportedDeclarations()].map(([k, v]) => {
|
|
62
|
+
return [k, v[0].getType().getApparentType().getProperties().map((prop) => {
|
|
63
|
+
return [prop.getEscapedName(), prop.getValueDeclaration()?.getType().getText()];
|
|
64
|
+
})];
|
|
65
|
+
});
|
|
66
|
+
}));
|
|
67
|
+
}
|