@tachui/devtools 0.8.0-alpha → 0.8.5-alpha
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/README.md +10 -1
- package/dist/debug/index.d.ts +1 -0
- package/dist/debug/index.d.ts.map +1 -1
- package/dist/debug/index.js +0 -1
- package/dist/import-guide.d.ts +50 -0
- package/dist/import-guide.d.ts.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +741 -1
- package/dist/index.prod.d.ts +87 -0
- package/dist/index.prod.d.ts.map +1 -0
- package/dist/index.prod.js +120 -0
- package/dist/inspector/index.js +0 -1
- package/dist/modifier-metadata.d.ts +4 -0
- package/dist/modifier-metadata.d.ts.map +1 -0
- package/dist/modifier-parameter-system.d.ts +69 -0
- package/dist/modifier-parameter-system.d.ts.map +1 -0
- package/dist/profiler/index.js +0 -1
- package/dist/runtime-modifier-validation.d.ts +72 -0
- package/dist/runtime-modifier-validation.d.ts.map +1 -0
- package/dist/testing/index.js +0 -1
- package/dist/vite-plugin-import-optimizer.d.ts +33 -0
- package/dist/vite-plugin-import-optimizer.d.ts.map +1 -0
- package/dist/vscode-extension/modifier-intellisense.d.ts +36 -0
- package/dist/vscode-extension/modifier-intellisense.d.ts.map +1 -0
- package/package.json +17 -4
- package/dist/debug/index.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/inspector/index.js.map +0 -1
- package/dist/profiler/index.js.map +0 -1
- package/dist/testing/index.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -212161,6 +212161,743 @@ if (typeof window === "undefined" && process.env.NODE_ENV !== "production") {
|
|
|
212161
212161
|
configureBuildTimeValidation(envConfig);
|
|
212162
212162
|
}
|
|
212163
212163
|
}
|
|
212164
|
+
class ImportGuidanceSystem {
|
|
212165
|
+
guides = /* @__PURE__ */ new Map();
|
|
212166
|
+
constructor() {
|
|
212167
|
+
this.initializeGuides();
|
|
212168
|
+
}
|
|
212169
|
+
initializeGuides() {
|
|
212170
|
+
this.guides.set("core", {
|
|
212171
|
+
title: "TachUI Core Import Guide",
|
|
212172
|
+
description: "Optimize core framework imports for minimal bundle size",
|
|
212173
|
+
rules: [
|
|
212174
|
+
{
|
|
212175
|
+
pattern: /^@tachui\/core$/,
|
|
212176
|
+
recommendation: "Use specific subpaths instead of main export",
|
|
212177
|
+
example: "@tachui/core/reactive instead of @tachui/core",
|
|
212178
|
+
bundleImpact: "Can save 20-35KB by avoiding unused code",
|
|
212179
|
+
category: "reactive"
|
|
212180
|
+
},
|
|
212181
|
+
{
|
|
212182
|
+
pattern: /createSignal|createEffect|createComputed/,
|
|
212183
|
+
recommendation: "Import reactive functions from @tachui/core/reactive",
|
|
212184
|
+
example: "import { createSignal } from '@tachui/core/reactive'",
|
|
212185
|
+
bundleImpact: "Saves ~33KB vs full core import",
|
|
212186
|
+
category: "reactive"
|
|
212187
|
+
}
|
|
212188
|
+
],
|
|
212189
|
+
examples: {
|
|
212190
|
+
good: [
|
|
212191
|
+
"import { createSignal, createEffect } from '@tachui/core/reactive'",
|
|
212192
|
+
"import { withComponentContext } from '@tachui/core/runtime'",
|
|
212193
|
+
"import { Assets } from '@tachui/core/assets'"
|
|
212194
|
+
],
|
|
212195
|
+
avoid: [
|
|
212196
|
+
"import { createSignal, VStack, Button } from '@tachui/core'",
|
|
212197
|
+
"import * as TachUI from '@tachui/core'"
|
|
212198
|
+
]
|
|
212199
|
+
}
|
|
212200
|
+
});
|
|
212201
|
+
this.guides.set("primitives", {
|
|
212202
|
+
title: "TachUI Primitives Import Guide",
|
|
212203
|
+
description: "Import UI components with optimal granularity",
|
|
212204
|
+
rules: [
|
|
212205
|
+
{
|
|
212206
|
+
pattern: /VStack|HStack|Spacer/,
|
|
212207
|
+
recommendation: "Import layout components from @tachui/primitives/layout",
|
|
212208
|
+
example: "import { VStack, HStack } from '@tachui/primitives/layout'",
|
|
212209
|
+
bundleImpact: "Saves ~27KB by avoiding display/control components",
|
|
212210
|
+
category: "layout"
|
|
212211
|
+
},
|
|
212212
|
+
{
|
|
212213
|
+
pattern: /Text|Image|ScrollView/,
|
|
212214
|
+
recommendation: "Import display components from @tachui/primitives/display",
|
|
212215
|
+
example: "import { Text, Image } from '@tachui/primitives/display'",
|
|
212216
|
+
bundleImpact: "Saves ~23KB by avoiding layout/control components",
|
|
212217
|
+
category: "display"
|
|
212218
|
+
},
|
|
212219
|
+
{
|
|
212220
|
+
pattern: /Button|TextField|Toggle/,
|
|
212221
|
+
recommendation: "Import form controls from @tachui/primitives/controls",
|
|
212222
|
+
example: "import { Button } from '@tachui/primitives/controls'",
|
|
212223
|
+
bundleImpact: "Saves ~20KB by avoiding layout/display components",
|
|
212224
|
+
category: "forms"
|
|
212225
|
+
}
|
|
212226
|
+
],
|
|
212227
|
+
examples: {
|
|
212228
|
+
good: [
|
|
212229
|
+
"import { VStack, HStack } from '@tachui/primitives/layout'",
|
|
212230
|
+
"import { Text } from '@tachui/primitives/display'",
|
|
212231
|
+
"import { Button } from '@tachui/primitives/controls'"
|
|
212232
|
+
],
|
|
212233
|
+
avoid: [
|
|
212234
|
+
"import { VStack, Text, Button } from '@tachui/primitives'",
|
|
212235
|
+
"import * from '@tachui/primitives'"
|
|
212236
|
+
]
|
|
212237
|
+
}
|
|
212238
|
+
});
|
|
212239
|
+
this.guides.set("bundle-optimization", {
|
|
212240
|
+
title: "Bundle Size Optimization Guide",
|
|
212241
|
+
description: "Minimize your bundle size with smart import strategies",
|
|
212242
|
+
rules: [
|
|
212243
|
+
{
|
|
212244
|
+
pattern: /minimal|essential/,
|
|
212245
|
+
recommendation: "Use bundle variants for production builds",
|
|
212246
|
+
example: "import { createSignal } from '@tachui/core/minimal'",
|
|
212247
|
+
bundleImpact: "45KB → 15KB for basic reactive apps",
|
|
212248
|
+
category: "reactive"
|
|
212249
|
+
}
|
|
212250
|
+
],
|
|
212251
|
+
examples: {
|
|
212252
|
+
good: [
|
|
212253
|
+
"// Production calculator app",
|
|
212254
|
+
"import { createSignal } from '@tachui/core/minimal'",
|
|
212255
|
+
"import { VStack } from '@tachui/primitives/layout'",
|
|
212256
|
+
"",
|
|
212257
|
+
"// Complex dashboard app",
|
|
212258
|
+
"import { createSignal } from '@tachui/core/reactive'",
|
|
212259
|
+
"import '@tachui/modifiers/effects' // Only if animations needed"
|
|
212260
|
+
],
|
|
212261
|
+
avoid: [
|
|
212262
|
+
"// Avoid importing everything",
|
|
212263
|
+
"import '@tachui/core'",
|
|
212264
|
+
"import '@tachui/primitives'",
|
|
212265
|
+
"import '@tachui/modifiers/effects' // Unless you need animations"
|
|
212266
|
+
]
|
|
212267
|
+
}
|
|
212268
|
+
});
|
|
212269
|
+
}
|
|
212270
|
+
/**
|
|
212271
|
+
* Get import guidance for specific imports
|
|
212272
|
+
*/
|
|
212273
|
+
getGuidance(importPath, namedImports = []) {
|
|
212274
|
+
const matchingRules = [];
|
|
212275
|
+
for (const guide of this.guides.values()) {
|
|
212276
|
+
for (const rule of guide.rules) {
|
|
212277
|
+
if (rule.pattern.test(importPath) || namedImports.some((imp) => rule.pattern.test(imp))) {
|
|
212278
|
+
matchingRules.push(rule);
|
|
212279
|
+
}
|
|
212280
|
+
}
|
|
212281
|
+
}
|
|
212282
|
+
return matchingRules;
|
|
212283
|
+
}
|
|
212284
|
+
/**
|
|
212285
|
+
* Generate import documentation for a specific package
|
|
212286
|
+
*/
|
|
212287
|
+
generatePackageGuide(packageName) {
|
|
212288
|
+
const guide = this.guides.get(packageName);
|
|
212289
|
+
if (!guide) return `No guidance available for package: ${packageName}`;
|
|
212290
|
+
let docs = `# ${guide.title}
|
|
212291
|
+
|
|
212292
|
+
${guide.description}
|
|
212293
|
+
|
|
212294
|
+
`;
|
|
212295
|
+
docs += `## ✅ Recommended Imports
|
|
212296
|
+
|
|
212297
|
+
`;
|
|
212298
|
+
for (const good of guide.examples.good) {
|
|
212299
|
+
docs += `\`\`\`typescript
|
|
212300
|
+
${good}
|
|
212301
|
+
\`\`\`
|
|
212302
|
+
|
|
212303
|
+
`;
|
|
212304
|
+
}
|
|
212305
|
+
docs += `## ❌ Avoid These Patterns
|
|
212306
|
+
|
|
212307
|
+
`;
|
|
212308
|
+
for (const avoid of guide.examples.avoid) {
|
|
212309
|
+
docs += `\`\`\`typescript
|
|
212310
|
+
${avoid}
|
|
212311
|
+
\`\`\`
|
|
212312
|
+
|
|
212313
|
+
`;
|
|
212314
|
+
}
|
|
212315
|
+
docs += `## 📦 Bundle Impact
|
|
212316
|
+
|
|
212317
|
+
`;
|
|
212318
|
+
for (const rule of guide.rules) {
|
|
212319
|
+
docs += `- **${rule.recommendation}**: ${rule.bundleImpact}
|
|
212320
|
+
`;
|
|
212321
|
+
}
|
|
212322
|
+
return docs;
|
|
212323
|
+
}
|
|
212324
|
+
/**
|
|
212325
|
+
* Interactive import helper for CLI
|
|
212326
|
+
*/
|
|
212327
|
+
async getInteractiveRecommendations(imports) {
|
|
212328
|
+
const recommendations = [];
|
|
212329
|
+
let totalSavings = 0;
|
|
212330
|
+
for (const importPath of imports) {
|
|
212331
|
+
const guidance = this.getGuidance(importPath);
|
|
212332
|
+
for (const rule of guidance) {
|
|
212333
|
+
recommendations.push(`${rule.recommendation} (${rule.bundleImpact})`);
|
|
212334
|
+
const match = rule.bundleImpact.match(/(\d+)KB/);
|
|
212335
|
+
if (match) totalSavings += parseInt(match[1]);
|
|
212336
|
+
}
|
|
212337
|
+
}
|
|
212338
|
+
return {
|
|
212339
|
+
recommendations: [...new Set(recommendations)],
|
|
212340
|
+
// Dedupe
|
|
212341
|
+
potentialSavings: `~${totalSavings}KB`
|
|
212342
|
+
};
|
|
212343
|
+
}
|
|
212344
|
+
/**
|
|
212345
|
+
* Generate import cheat sheet
|
|
212346
|
+
*/
|
|
212347
|
+
generateCheatSheet() {
|
|
212348
|
+
return `# TachUI Import Cheat Sheet 📚
|
|
212349
|
+
|
|
212350
|
+
## 🏗️ Layout Components (8KB)
|
|
212351
|
+
\`\`\`typescript
|
|
212352
|
+
import { VStack, HStack, Spacer } from '@tachui/primitives/layout'
|
|
212353
|
+
\`\`\`
|
|
212354
|
+
|
|
212355
|
+
## 🎨 Display Components (12KB)
|
|
212356
|
+
\`\`\`typescript
|
|
212357
|
+
import { Text, Image, ScrollView } from '@tachui/primitives/display'
|
|
212358
|
+
\`\`\`
|
|
212359
|
+
|
|
212360
|
+
## 🎛️ Control Components (15KB)
|
|
212361
|
+
\`\`\`typescript
|
|
212362
|
+
import { Button, TextField, Toggle } from '@tachui/primitives/controls'
|
|
212363
|
+
\`\`\`
|
|
212364
|
+
|
|
212365
|
+
## ⚡ Reactive System (12KB)
|
|
212366
|
+
\`\`\`typescript
|
|
212367
|
+
import { createSignal, createEffect } from '@tachui/core/reactive'
|
|
212368
|
+
\`\`\`
|
|
212369
|
+
|
|
212370
|
+
## 🎭 Effects & Animations (Only if needed!)
|
|
212371
|
+
\`\`\`typescript
|
|
212372
|
+
import '@tachui/modifiers/effects' // Adds 25KB
|
|
212373
|
+
\`\`\`
|
|
212374
|
+
|
|
212375
|
+
## 📱 Mobile UI Patterns
|
|
212376
|
+
\`\`\`typescript
|
|
212377
|
+
import { ActionSheet, Alert } from '@tachui/mobile'
|
|
212378
|
+
\`\`\`
|
|
212379
|
+
|
|
212380
|
+
## 🧩 Flow Control
|
|
212381
|
+
\`\`\`typescript
|
|
212382
|
+
import { Show, ForEach } from '@tachui/flow-control'
|
|
212383
|
+
\`\`\`
|
|
212384
|
+
|
|
212385
|
+
## 📊 Bundle Variants for Production
|
|
212386
|
+
|
|
212387
|
+
### Calculator/Simple Apps (15KB total)
|
|
212388
|
+
\`\`\`typescript
|
|
212389
|
+
import { createSignal } from '@tachui/core/minimal'
|
|
212390
|
+
import { VStack } from '@tachui/primitives/layout'
|
|
212391
|
+
\`\`\`
|
|
212392
|
+
|
|
212393
|
+
### Complex Apps (45KB total)
|
|
212394
|
+
\`\`\`typescript
|
|
212395
|
+
import { createSignal } from '@tachui/core/reactive'
|
|
212396
|
+
import '@tachui/modifiers/effects'
|
|
212397
|
+
\`\`\`
|
|
212398
|
+
|
|
212399
|
+
## 🚫 Anti-Patterns to Avoid
|
|
212400
|
+
|
|
212401
|
+
❌ \`import { everything } from '@tachui/core'\` (45KB)
|
|
212402
|
+
✅ \`import { createSignal } from '@tachui/core/reactive'\` (12KB)
|
|
212403
|
+
|
|
212404
|
+
❌ \`import * from '@tachui/primitives'\` (35KB)
|
|
212405
|
+
✅ \`import { VStack } from '@tachui/primitives/layout'\` (8KB)
|
|
212406
|
+
`;
|
|
212407
|
+
}
|
|
212408
|
+
}
|
|
212409
|
+
function logImportGuidance(importPath, namedImports = []) {
|
|
212410
|
+
const system = new ImportGuidanceSystem();
|
|
212411
|
+
const guidance = system.getGuidance(importPath, namedImports);
|
|
212412
|
+
if (guidance.length === 0) {
|
|
212413
|
+
console.log(`✅ Import path "${importPath}" looks optimal`);
|
|
212414
|
+
return;
|
|
212415
|
+
}
|
|
212416
|
+
console.group(`💡 TachUI Import Suggestions for "${importPath}"`);
|
|
212417
|
+
for (const rule of guidance) {
|
|
212418
|
+
console.log(`📦 ${rule.recommendation}`);
|
|
212419
|
+
console.log(`💰 ${rule.bundleImpact}`);
|
|
212420
|
+
console.log(`📝 Example: ${rule.example}`);
|
|
212421
|
+
console.log("---");
|
|
212422
|
+
}
|
|
212423
|
+
console.groupEnd();
|
|
212424
|
+
}
|
|
212425
|
+
class ModifierParameterRegistry {
|
|
212426
|
+
modifiers = /* @__PURE__ */ new Map();
|
|
212427
|
+
constructor() {
|
|
212428
|
+
this.registerCoreModifiers();
|
|
212429
|
+
this.registerPrimitivesModifiers();
|
|
212430
|
+
this.registerEffectsModifiers();
|
|
212431
|
+
this.registerResponsiveModifiers();
|
|
212432
|
+
this.registerModifiersPackage();
|
|
212433
|
+
}
|
|
212434
|
+
registerCoreModifiers() {
|
|
212435
|
+
this.register({
|
|
212436
|
+
name: "padding",
|
|
212437
|
+
plugin: "@tachui/core",
|
|
212438
|
+
category: "layout",
|
|
212439
|
+
description: "Adds padding inside the element boundaries",
|
|
212440
|
+
parameters: [
|
|
212441
|
+
{
|
|
212442
|
+
name: "value",
|
|
212443
|
+
type: "string | number | EdgeInsets",
|
|
212444
|
+
required: true,
|
|
212445
|
+
description: "Padding value - can be uniform or per-edge",
|
|
212446
|
+
examples: [
|
|
212447
|
+
"'16px'",
|
|
212448
|
+
"24",
|
|
212449
|
+
"{ top: 16, bottom: 16, leading: 8, trailing: 8 }"
|
|
212450
|
+
],
|
|
212451
|
+
validation: {
|
|
212452
|
+
pattern: /^(\d+(\.\d+)?(px|em|rem|%)?|\{.*\})$/
|
|
212453
|
+
},
|
|
212454
|
+
category: "layout",
|
|
212455
|
+
plugin: "@tachui/core",
|
|
212456
|
+
swiftUIEquivalent: ".padding()"
|
|
212457
|
+
}
|
|
212458
|
+
],
|
|
212459
|
+
usage: {
|
|
212460
|
+
basic: [".padding('16px')", ".padding(20)"],
|
|
212461
|
+
advanced: [
|
|
212462
|
+
".padding({ top: 16, bottom: 16, leading: 8, trailing: 8 })",
|
|
212463
|
+
".padding('1em 2em')"
|
|
212464
|
+
]
|
|
212465
|
+
},
|
|
212466
|
+
relatedModifiers: ["margin"],
|
|
212467
|
+
swiftUIEquivalent: ".padding()",
|
|
212468
|
+
bundleSize: "<1KB"
|
|
212469
|
+
});
|
|
212470
|
+
this.register({
|
|
212471
|
+
name: "backgroundColor",
|
|
212472
|
+
plugin: "@tachui/core",
|
|
212473
|
+
category: "appearance",
|
|
212474
|
+
description: "Sets the background color of the element",
|
|
212475
|
+
parameters: [
|
|
212476
|
+
{
|
|
212477
|
+
name: "color",
|
|
212478
|
+
type: "string | ColorAsset | LinearGradient",
|
|
212479
|
+
required: true,
|
|
212480
|
+
description: "Background color value",
|
|
212481
|
+
examples: [
|
|
212482
|
+
"'#FF6B6B'",
|
|
212483
|
+
"'rgba(255, 107, 107, 0.8)'",
|
|
212484
|
+
"Assets.colors.primary",
|
|
212485
|
+
"LinearGradient(['#FF6B6B', '#4ECDC4'])"
|
|
212486
|
+
],
|
|
212487
|
+
validation: {
|
|
212488
|
+
pattern: /^(#[0-9A-Fa-f]{3,8}|rgba?\(.*\)|hsla?\(.*\)|[a-zA-Z]+)$/
|
|
212489
|
+
},
|
|
212490
|
+
category: "appearance",
|
|
212491
|
+
plugin: "@tachui/core",
|
|
212492
|
+
swiftUIEquivalent: ".background()"
|
|
212493
|
+
}
|
|
212494
|
+
],
|
|
212495
|
+
usage: {
|
|
212496
|
+
basic: [".backgroundColor('#FF6B6B')", ".backgroundColor('red')"],
|
|
212497
|
+
advanced: [
|
|
212498
|
+
".backgroundColor(Assets.colors.primary)",
|
|
212499
|
+
".backgroundColor(LinearGradient(['#FF6B6B', '#4ECDC4']))"
|
|
212500
|
+
]
|
|
212501
|
+
},
|
|
212502
|
+
relatedModifiers: ["foregroundColor", "background"],
|
|
212503
|
+
swiftUIEquivalent: ".background()",
|
|
212504
|
+
bundleSize: "<1KB"
|
|
212505
|
+
});
|
|
212506
|
+
this.register({
|
|
212507
|
+
name: "fixedSize",
|
|
212508
|
+
plugin: "@tachui/modifiers",
|
|
212509
|
+
category: "layout",
|
|
212510
|
+
description: "Prevents element from growing beyond intrinsic content size",
|
|
212511
|
+
parameters: [
|
|
212512
|
+
{
|
|
212513
|
+
name: "horizontal",
|
|
212514
|
+
type: "boolean",
|
|
212515
|
+
required: false,
|
|
212516
|
+
description: "Fix width to content size",
|
|
212517
|
+
defaultValue: true,
|
|
212518
|
+
examples: ["true", "false"],
|
|
212519
|
+
category: "layout",
|
|
212520
|
+
plugin: "@tachui/modifiers",
|
|
212521
|
+
swiftUIEquivalent: ".fixedSize(horizontal:)"
|
|
212522
|
+
},
|
|
212523
|
+
{
|
|
212524
|
+
name: "vertical",
|
|
212525
|
+
type: "boolean",
|
|
212526
|
+
required: false,
|
|
212527
|
+
description: "Fix height to content size",
|
|
212528
|
+
defaultValue: true,
|
|
212529
|
+
examples: ["true", "false"],
|
|
212530
|
+
category: "layout",
|
|
212531
|
+
plugin: "@tachui/modifiers",
|
|
212532
|
+
swiftUIEquivalent: ".fixedSize(vertical:)"
|
|
212533
|
+
}
|
|
212534
|
+
],
|
|
212535
|
+
usage: {
|
|
212536
|
+
basic: [
|
|
212537
|
+
".fixedSize()",
|
|
212538
|
+
".fixedSize({ horizontal: true, vertical: false })"
|
|
212539
|
+
],
|
|
212540
|
+
advanced: [".fixedSize({ horizontal: true }).frame({ minWidth: 100 })"]
|
|
212541
|
+
},
|
|
212542
|
+
swiftUIEquivalent: ".fixedSize(horizontal:vertical:)",
|
|
212543
|
+
bundleSize: "<1KB"
|
|
212544
|
+
});
|
|
212545
|
+
}
|
|
212546
|
+
registerPrimitivesModifiers() {
|
|
212547
|
+
this.register({
|
|
212548
|
+
name: "frame",
|
|
212549
|
+
plugin: "@tachui/primitives",
|
|
212550
|
+
category: "layout",
|
|
212551
|
+
description: "Sets the frame size and alignment of the element",
|
|
212552
|
+
parameters: [
|
|
212553
|
+
{
|
|
212554
|
+
name: "width",
|
|
212555
|
+
type: "number | string | undefined",
|
|
212556
|
+
required: false,
|
|
212557
|
+
description: "Fixed width of the element",
|
|
212558
|
+
examples: ["200", "'100%'", "undefined"],
|
|
212559
|
+
category: "layout",
|
|
212560
|
+
plugin: "@tachui/primitives"
|
|
212561
|
+
},
|
|
212562
|
+
{
|
|
212563
|
+
name: "height",
|
|
212564
|
+
type: "number | string | undefined",
|
|
212565
|
+
required: false,
|
|
212566
|
+
description: "Fixed height of the element",
|
|
212567
|
+
examples: ["100", "'50vh'", "undefined"],
|
|
212568
|
+
category: "layout",
|
|
212569
|
+
plugin: "@tachui/primitives"
|
|
212570
|
+
},
|
|
212571
|
+
{
|
|
212572
|
+
name: "minWidth",
|
|
212573
|
+
type: "number | string | undefined",
|
|
212574
|
+
required: false,
|
|
212575
|
+
description: "Minimum width constraint",
|
|
212576
|
+
examples: ["50", "'10em'"],
|
|
212577
|
+
category: "layout",
|
|
212578
|
+
plugin: "@tachui/primitives"
|
|
212579
|
+
},
|
|
212580
|
+
{
|
|
212581
|
+
name: "maxWidth",
|
|
212582
|
+
type: "number | string | undefined",
|
|
212583
|
+
required: false,
|
|
212584
|
+
description: "Maximum width constraint",
|
|
212585
|
+
examples: ["500", "'80vw'"],
|
|
212586
|
+
category: "layout",
|
|
212587
|
+
plugin: "@tachui/primitives"
|
|
212588
|
+
},
|
|
212589
|
+
{
|
|
212590
|
+
name: "alignment",
|
|
212591
|
+
type: "Alignment",
|
|
212592
|
+
required: false,
|
|
212593
|
+
description: "How to align the element within its frame",
|
|
212594
|
+
examples: ["'center'", "'topLeading'", "'bottomTrailing'"],
|
|
212595
|
+
validation: {
|
|
212596
|
+
enum: [
|
|
212597
|
+
"center",
|
|
212598
|
+
"leading",
|
|
212599
|
+
"trailing",
|
|
212600
|
+
"top",
|
|
212601
|
+
"bottom",
|
|
212602
|
+
"topLeading",
|
|
212603
|
+
"topTrailing",
|
|
212604
|
+
"bottomLeading",
|
|
212605
|
+
"bottomTrailing"
|
|
212606
|
+
]
|
|
212607
|
+
},
|
|
212608
|
+
category: "layout",
|
|
212609
|
+
plugin: "@tachui/primitives"
|
|
212610
|
+
}
|
|
212611
|
+
],
|
|
212612
|
+
usage: {
|
|
212613
|
+
basic: [
|
|
212614
|
+
".frame({ width: 200, height: 100 })",
|
|
212615
|
+
".frame({ minWidth: 50, maxWidth: 300 })"
|
|
212616
|
+
],
|
|
212617
|
+
advanced: [
|
|
212618
|
+
".frame({ width: 200, height: 100, alignment: 'center' })",
|
|
212619
|
+
".frame({ minWidth: 100, maxHeight: 200 }).backgroundColor('#f0f0f0')"
|
|
212620
|
+
]
|
|
212621
|
+
},
|
|
212622
|
+
relatedModifiers: ["fixedSize", "layoutPriority"],
|
|
212623
|
+
swiftUIEquivalent: ".frame(width:height:alignment:)",
|
|
212624
|
+
bundleSize: "2KB"
|
|
212625
|
+
});
|
|
212626
|
+
}
|
|
212627
|
+
registerEffectsModifiers() {
|
|
212628
|
+
this.register({
|
|
212629
|
+
name: "shadow",
|
|
212630
|
+
plugin: "@tachui/modifiers/effects",
|
|
212631
|
+
category: "appearance",
|
|
212632
|
+
description: "Adds a drop shadow to the element",
|
|
212633
|
+
parameters: [
|
|
212634
|
+
{
|
|
212635
|
+
name: "color",
|
|
212636
|
+
type: "string",
|
|
212637
|
+
required: false,
|
|
212638
|
+
description: "Shadow color",
|
|
212639
|
+
defaultValue: "'rgba(0, 0, 0, 0.3)'",
|
|
212640
|
+
examples: ["'rgba(0, 0, 0, 0.5)'", "'#333'"],
|
|
212641
|
+
category: "appearance",
|
|
212642
|
+
plugin: "@tachui/modifiers/effects"
|
|
212643
|
+
},
|
|
212644
|
+
{
|
|
212645
|
+
name: "radius",
|
|
212646
|
+
type: "number",
|
|
212647
|
+
required: false,
|
|
212648
|
+
description: "Blur radius of the shadow",
|
|
212649
|
+
defaultValue: 3,
|
|
212650
|
+
examples: ["5", "10", "0"],
|
|
212651
|
+
validation: { min: 0, max: 50 },
|
|
212652
|
+
category: "appearance",
|
|
212653
|
+
plugin: "@tachui/modifiers/effects"
|
|
212654
|
+
},
|
|
212655
|
+
{
|
|
212656
|
+
name: "x",
|
|
212657
|
+
type: "number",
|
|
212658
|
+
required: false,
|
|
212659
|
+
description: "Horizontal offset",
|
|
212660
|
+
defaultValue: 0,
|
|
212661
|
+
examples: ["2", "-2", "0"],
|
|
212662
|
+
category: "appearance",
|
|
212663
|
+
plugin: "@tachui/modifiers/effects"
|
|
212664
|
+
},
|
|
212665
|
+
{
|
|
212666
|
+
name: "y",
|
|
212667
|
+
type: "number",
|
|
212668
|
+
required: false,
|
|
212669
|
+
description: "Vertical offset",
|
|
212670
|
+
defaultValue: 2,
|
|
212671
|
+
examples: ["4", "-4", "0"],
|
|
212672
|
+
category: "appearance",
|
|
212673
|
+
plugin: "@tachui/modifiers/effects"
|
|
212674
|
+
}
|
|
212675
|
+
],
|
|
212676
|
+
usage: {
|
|
212677
|
+
basic: [".shadow()", ".shadow({ radius: 10 })"],
|
|
212678
|
+
advanced: [
|
|
212679
|
+
".shadow({ color: 'rgba(255, 0, 0, 0.5)', radius: 8, x: 2, y: 4 })",
|
|
212680
|
+
".shadow({ radius: 20, y: 10 }).opacity(0.9)"
|
|
212681
|
+
]
|
|
212682
|
+
},
|
|
212683
|
+
relatedModifiers: ["blur", "opacity"],
|
|
212684
|
+
swiftUIEquivalent: ".shadow(color:radius:x:y:)",
|
|
212685
|
+
bundleSize: "3KB"
|
|
212686
|
+
});
|
|
212687
|
+
this.register({
|
|
212688
|
+
name: "hover",
|
|
212689
|
+
plugin: "@tachui/modifiers/effects",
|
|
212690
|
+
category: "interaction",
|
|
212691
|
+
description: "Applies styles on hover state",
|
|
212692
|
+
parameters: [
|
|
212693
|
+
{
|
|
212694
|
+
name: "modifiers",
|
|
212695
|
+
type: "ModifierChain",
|
|
212696
|
+
required: true,
|
|
212697
|
+
description: "Modifiers to apply on hover",
|
|
212698
|
+
examples: [
|
|
212699
|
+
"backgroundColor('#FF6B6B')",
|
|
212700
|
+
"scale(1.1).shadow({ radius: 10 })"
|
|
212701
|
+
],
|
|
212702
|
+
category: "interaction",
|
|
212703
|
+
plugin: "@tachui/modifiers/effects"
|
|
212704
|
+
}
|
|
212705
|
+
],
|
|
212706
|
+
usage: {
|
|
212707
|
+
basic: [".hover(backgroundColor('#FF6B6B'))", ".hover(scale(1.05))"],
|
|
212708
|
+
advanced: [
|
|
212709
|
+
".hover(backgroundColor('#FF6B6B').scale(1.1).shadow({ radius: 8 }))",
|
|
212710
|
+
".hover(transform({ scale: 1.1, rotate: '5deg' }))"
|
|
212711
|
+
]
|
|
212712
|
+
},
|
|
212713
|
+
relatedModifiers: ["active", "focus", "disabled"],
|
|
212714
|
+
bundleSize: "2KB"
|
|
212715
|
+
});
|
|
212716
|
+
}
|
|
212717
|
+
registerResponsiveModifiers() {
|
|
212718
|
+
this.register({
|
|
212719
|
+
name: "responsive",
|
|
212720
|
+
plugin: "@tachui/responsive",
|
|
212721
|
+
category: "responsive",
|
|
212722
|
+
description: "Applies different modifiers at different breakpoints",
|
|
212723
|
+
parameters: [
|
|
212724
|
+
{
|
|
212725
|
+
name: "breakpoints",
|
|
212726
|
+
type: "ResponsiveBreakpoints",
|
|
212727
|
+
required: true,
|
|
212728
|
+
description: "Modifier configurations for different screen sizes",
|
|
212729
|
+
examples: [
|
|
212730
|
+
"{ sm: padding(8), md: padding(16), lg: padding(24) }",
|
|
212731
|
+
"{ mobile: fontSize(14), tablet: fontSize(16), desktop: fontSize(18) }"
|
|
212732
|
+
],
|
|
212733
|
+
category: "responsive",
|
|
212734
|
+
plugin: "@tachui/responsive"
|
|
212735
|
+
}
|
|
212736
|
+
],
|
|
212737
|
+
usage: {
|
|
212738
|
+
basic: [
|
|
212739
|
+
".responsive({ sm: padding(8), md: padding(16), lg: padding(24) })",
|
|
212740
|
+
".responsive({ mobile: fontSize(14), desktop: fontSize(18) })"
|
|
212741
|
+
],
|
|
212742
|
+
advanced: [
|
|
212743
|
+
".responsive({ sm: padding(8).fontSize(14), md: padding(16).fontSize(16), lg: padding(24).fontSize(18) })"
|
|
212744
|
+
]
|
|
212745
|
+
},
|
|
212746
|
+
relatedModifiers: ["breakpoint"],
|
|
212747
|
+
bundleSize: "4KB"
|
|
212748
|
+
});
|
|
212749
|
+
}
|
|
212750
|
+
registerModifiersPackage() {
|
|
212751
|
+
}
|
|
212752
|
+
register(signature) {
|
|
212753
|
+
this.modifiers.set(signature.name, signature);
|
|
212754
|
+
}
|
|
212755
|
+
getModifier(name) {
|
|
212756
|
+
return this.modifiers.get(name);
|
|
212757
|
+
}
|
|
212758
|
+
getAllModifiers() {
|
|
212759
|
+
return Array.from(this.modifiers.values());
|
|
212760
|
+
}
|
|
212761
|
+
getModifiersByPlugin(plugin) {
|
|
212762
|
+
return this.getAllModifiers().filter((mod) => mod.plugin === plugin);
|
|
212763
|
+
}
|
|
212764
|
+
getModifiersByCategory(category) {
|
|
212765
|
+
return this.getAllModifiers().filter((mod) => mod.category === category);
|
|
212766
|
+
}
|
|
212767
|
+
searchModifiers(query) {
|
|
212768
|
+
const normalizedQuery = query.toLowerCase();
|
|
212769
|
+
return this.getAllModifiers().filter(
|
|
212770
|
+
(mod) => mod.name.toLowerCase().includes(normalizedQuery) || mod.description.toLowerCase().includes(normalizedQuery) || mod.parameters.some(
|
|
212771
|
+
(param) => param.name.toLowerCase().includes(normalizedQuery) || param.description.toLowerCase().includes(normalizedQuery)
|
|
212772
|
+
)
|
|
212773
|
+
);
|
|
212774
|
+
}
|
|
212775
|
+
/**
|
|
212776
|
+
* Generate parameter hints for IDE integration
|
|
212777
|
+
*/
|
|
212778
|
+
generateParameterHints(modifierName) {
|
|
212779
|
+
const modifier = this.getModifier(modifierName);
|
|
212780
|
+
if (!modifier) return [];
|
|
212781
|
+
return modifier.parameters.map((param) => {
|
|
212782
|
+
const type = param.type;
|
|
212783
|
+
const required = param.required ? "" : "?";
|
|
212784
|
+
const defaultVal = param.defaultValue !== void 0 ? ` = ${JSON.stringify(param.defaultValue)}` : "";
|
|
212785
|
+
return `${param.name}${required}: ${type}${defaultVal} // ${param.description}`;
|
|
212786
|
+
});
|
|
212787
|
+
}
|
|
212788
|
+
/**
|
|
212789
|
+
* Validate modifier parameters at runtime (dev mode)
|
|
212790
|
+
*/
|
|
212791
|
+
validateParameters(modifierName, params) {
|
|
212792
|
+
const modifier = this.getModifier(modifierName);
|
|
212793
|
+
if (!modifier)
|
|
212794
|
+
return { valid: false, errors: [`Unknown modifier: ${modifierName}`] };
|
|
212795
|
+
const errors = [];
|
|
212796
|
+
for (const param of modifier.parameters) {
|
|
212797
|
+
const value = params[param.name];
|
|
212798
|
+
if (param.required && (value === void 0 || value === null)) {
|
|
212799
|
+
errors.push(`Parameter '${param.name}' is required`);
|
|
212800
|
+
continue;
|
|
212801
|
+
}
|
|
212802
|
+
if (value !== void 0 && param.validation) {
|
|
212803
|
+
const validation = param.validation;
|
|
212804
|
+
if (validation.pattern && typeof value === "string" && !validation.pattern.test(value)) {
|
|
212805
|
+
errors.push(
|
|
212806
|
+
`Parameter '${param.name}' does not match expected pattern`
|
|
212807
|
+
);
|
|
212808
|
+
}
|
|
212809
|
+
if (validation.enum && !validation.enum.includes(value)) {
|
|
212810
|
+
errors.push(
|
|
212811
|
+
`Parameter '${param.name}' must be one of: ${validation.enum.join(", ")}`
|
|
212812
|
+
);
|
|
212813
|
+
}
|
|
212814
|
+
if (typeof value === "number") {
|
|
212815
|
+
if (validation.min !== void 0 && value < validation.min) {
|
|
212816
|
+
errors.push(
|
|
212817
|
+
`Parameter '${param.name}' must be >= ${validation.min}`
|
|
212818
|
+
);
|
|
212819
|
+
}
|
|
212820
|
+
if (validation.max !== void 0 && value > validation.max) {
|
|
212821
|
+
errors.push(
|
|
212822
|
+
`Parameter '${param.name}' must be <= ${validation.max}`
|
|
212823
|
+
);
|
|
212824
|
+
}
|
|
212825
|
+
}
|
|
212826
|
+
}
|
|
212827
|
+
}
|
|
212828
|
+
return { valid: errors.length === 0, errors };
|
|
212829
|
+
}
|
|
212830
|
+
/**
|
|
212831
|
+
* Generate comprehensive documentation for all modifiers
|
|
212832
|
+
*/
|
|
212833
|
+
generateDocumentation() {
|
|
212834
|
+
let docs = "# TachUI Modifier Reference\n\n";
|
|
212835
|
+
const categories = [...new Set(this.getAllModifiers().map((m) => m.category))];
|
|
212836
|
+
for (const category of categories.sort()) {
|
|
212837
|
+
docs += `## ${category.charAt(0).toUpperCase() + category.slice(1)} Modifiers
|
|
212838
|
+
|
|
212839
|
+
`;
|
|
212840
|
+
const categoryModifiers = this.getModifiersByCategory(category).sort(
|
|
212841
|
+
(a, b) => a.name.localeCompare(b.name)
|
|
212842
|
+
);
|
|
212843
|
+
for (const modifier of categoryModifiers) {
|
|
212844
|
+
docs += `### \`.${modifier.name}()\`
|
|
212845
|
+
|
|
212846
|
+
`;
|
|
212847
|
+
docs += `**Plugin**: \`${modifier.plugin}\`
|
|
212848
|
+
`;
|
|
212849
|
+
docs += `**Bundle Size**: ${modifier.bundleSize}
|
|
212850
|
+
|
|
212851
|
+
`;
|
|
212852
|
+
docs += `${modifier.description}
|
|
212853
|
+
|
|
212854
|
+
`;
|
|
212855
|
+
if (modifier.swiftUIEquivalent) {
|
|
212856
|
+
docs += `**SwiftUI Equivalent**: \`${modifier.swiftUIEquivalent}\`
|
|
212857
|
+
|
|
212858
|
+
`;
|
|
212859
|
+
}
|
|
212860
|
+
docs += `**Parameters**:
|
|
212861
|
+
|
|
212862
|
+
`;
|
|
212863
|
+
for (const param of modifier.parameters) {
|
|
212864
|
+
const required = param.required ? "**(required)**" : "*(optional)*";
|
|
212865
|
+
const defaultVal = param.defaultValue !== void 0 ? ` - Default: \`${JSON.stringify(param.defaultValue)}\`` : "";
|
|
212866
|
+
docs += `- \`${param.name}: ${param.type}\` ${required}${defaultVal}
|
|
212867
|
+
`;
|
|
212868
|
+
docs += ` ${param.description}
|
|
212869
|
+
|
|
212870
|
+
`;
|
|
212871
|
+
}
|
|
212872
|
+
docs += `**Usage**:
|
|
212873
|
+
|
|
212874
|
+
`;
|
|
212875
|
+
docs += `\`\`\`typescript
|
|
212876
|
+
`;
|
|
212877
|
+
docs += modifier.usage.basic.map((usage) => `component.${usage}`).join("\n");
|
|
212878
|
+
docs += `
|
|
212879
|
+
\`\`\`
|
|
212880
|
+
|
|
212881
|
+
`;
|
|
212882
|
+
if (modifier.usage.advanced.length > 0) {
|
|
212883
|
+
docs += `**Advanced Usage**:
|
|
212884
|
+
|
|
212885
|
+
`;
|
|
212886
|
+
docs += `\`\`\`typescript
|
|
212887
|
+
`;
|
|
212888
|
+
docs += modifier.usage.advanced.map((usage) => `component.${usage}`).join("\n");
|
|
212889
|
+
docs += `
|
|
212890
|
+
\`\`\`
|
|
212891
|
+
|
|
212892
|
+
`;
|
|
212893
|
+
}
|
|
212894
|
+
docs += "---\n\n";
|
|
212895
|
+
}
|
|
212896
|
+
}
|
|
212897
|
+
return docs;
|
|
212898
|
+
}
|
|
212899
|
+
}
|
|
212900
|
+
const modifierParameterRegistry = new ModifierParameterRegistry();
|
|
212164
212901
|
class PerformanceMonitor {
|
|
212165
212902
|
static instance;
|
|
212166
212903
|
options = {
|
|
@@ -216134,8 +216871,10 @@ export {
|
|
|
216134
216871
|
ErrorSuggestionEngine,
|
|
216135
216872
|
ErrorTemplates,
|
|
216136
216873
|
FallbackManager,
|
|
216874
|
+
ImportGuidanceSystem,
|
|
216137
216875
|
MemoryProfiler,
|
|
216138
216876
|
MockProvider,
|
|
216877
|
+
ModifierParameterRegistry,
|
|
216139
216878
|
OptimizedPluginErrorHandler,
|
|
216140
216879
|
PerformanceImpactAnalyzer,
|
|
216141
216880
|
PerformanceMonitor,
|
|
@@ -216207,6 +216946,8 @@ export {
|
|
|
216207
216946
|
isDevelopmentEnvironment,
|
|
216208
216947
|
isEnhancedValidationEnabled,
|
|
216209
216948
|
lifecycleValidator,
|
|
216949
|
+
logImportGuidance,
|
|
216950
|
+
modifierParameterRegistry,
|
|
216210
216951
|
modifierPatterns,
|
|
216211
216952
|
performanceMonitor,
|
|
216212
216953
|
performanceOptimizer,
|
|
@@ -216226,4 +216967,3 @@ export {
|
|
|
216226
216967
|
withMonitoredValidation,
|
|
216227
216968
|
withPerformanceMonitoring
|
|
216228
216969
|
};
|
|
216229
|
-
//# sourceMappingURL=index.js.map
|