@matthesketh/utopia-compiler 0.5.0 → 0.7.0
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/index.cjs +17 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +17 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -418,7 +418,7 @@ function classifyDirective(name, value) {
|
|
|
418
418
|
return null;
|
|
419
419
|
}
|
|
420
420
|
function isDirectiveKind(s) {
|
|
421
|
-
return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model";
|
|
421
|
+
return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model" || s === "transition";
|
|
422
422
|
}
|
|
423
423
|
var CodeGenerator = class {
|
|
424
424
|
constructor(options) {
|
|
@@ -547,6 +547,9 @@ ${fnBody}
|
|
|
547
547
|
case "model":
|
|
548
548
|
this.genModel(elVar, dir, scope);
|
|
549
549
|
break;
|
|
550
|
+
case "transition":
|
|
551
|
+
this.genTransition(elVar, dir);
|
|
552
|
+
break;
|
|
550
553
|
}
|
|
551
554
|
}
|
|
552
555
|
genOn(elVar, dir, scope) {
|
|
@@ -595,6 +598,19 @@ ${fnBody}
|
|
|
595
598
|
this.emit(`createEffect(() => setAttr(${elVar}, 'value', ${signalRef}()))`);
|
|
596
599
|
this.emit(`addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`);
|
|
597
600
|
}
|
|
601
|
+
// ---- u-transition ---------------------------------------------------------
|
|
602
|
+
genTransition(elVar, dir) {
|
|
603
|
+
this.helpers.add("createTransition");
|
|
604
|
+
const name = dir.arg || dir.expression || "fade";
|
|
605
|
+
let durationOpt = "";
|
|
606
|
+
for (const mod of dir.modifiers) {
|
|
607
|
+
if (mod.startsWith("duration-")) {
|
|
608
|
+
const ms = mod.slice("duration-".length);
|
|
609
|
+
durationOpt = `, duration: ${ms}`;
|
|
610
|
+
}
|
|
611
|
+
}
|
|
612
|
+
this.emit(`createTransition(${elVar}, { name: '${escapeStr(name)}'${durationOpt} })`);
|
|
613
|
+
}
|
|
598
614
|
// ---- Structural: u-if ---------------------------------------------------
|
|
599
615
|
genIf(node, dir, scope, elseIfChain, elseNode) {
|
|
600
616
|
this.helpers.add("createIf");
|
package/dist/index.d.cts
CHANGED
|
@@ -85,7 +85,7 @@ interface Directive {
|
|
|
85
85
|
expression: string;
|
|
86
86
|
modifiers: string[];
|
|
87
87
|
}
|
|
88
|
-
type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'else-if' | 'for' | 'model';
|
|
88
|
+
type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'else-if' | 'for' | 'model' | 'transition';
|
|
89
89
|
/** Exported for testing — parse a template string into an AST. */
|
|
90
90
|
declare function parseTemplate(source: string): TemplateNode[];
|
|
91
91
|
|
package/dist/index.d.ts
CHANGED
|
@@ -85,7 +85,7 @@ interface Directive {
|
|
|
85
85
|
expression: string;
|
|
86
86
|
modifiers: string[];
|
|
87
87
|
}
|
|
88
|
-
type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'else-if' | 'for' | 'model';
|
|
88
|
+
type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'else-if' | 'for' | 'model' | 'transition';
|
|
89
89
|
/** Exported for testing — parse a template string into an AST. */
|
|
90
90
|
declare function parseTemplate(source: string): TemplateNode[];
|
|
91
91
|
|
package/dist/index.js
CHANGED
|
@@ -385,7 +385,7 @@ function classifyDirective(name, value) {
|
|
|
385
385
|
return null;
|
|
386
386
|
}
|
|
387
387
|
function isDirectiveKind(s) {
|
|
388
|
-
return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model";
|
|
388
|
+
return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model" || s === "transition";
|
|
389
389
|
}
|
|
390
390
|
var CodeGenerator = class {
|
|
391
391
|
constructor(options) {
|
|
@@ -514,6 +514,9 @@ ${fnBody}
|
|
|
514
514
|
case "model":
|
|
515
515
|
this.genModel(elVar, dir, scope);
|
|
516
516
|
break;
|
|
517
|
+
case "transition":
|
|
518
|
+
this.genTransition(elVar, dir);
|
|
519
|
+
break;
|
|
517
520
|
}
|
|
518
521
|
}
|
|
519
522
|
genOn(elVar, dir, scope) {
|
|
@@ -562,6 +565,19 @@ ${fnBody}
|
|
|
562
565
|
this.emit(`createEffect(() => setAttr(${elVar}, 'value', ${signalRef}()))`);
|
|
563
566
|
this.emit(`addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`);
|
|
564
567
|
}
|
|
568
|
+
// ---- u-transition ---------------------------------------------------------
|
|
569
|
+
genTransition(elVar, dir) {
|
|
570
|
+
this.helpers.add("createTransition");
|
|
571
|
+
const name = dir.arg || dir.expression || "fade";
|
|
572
|
+
let durationOpt = "";
|
|
573
|
+
for (const mod of dir.modifiers) {
|
|
574
|
+
if (mod.startsWith("duration-")) {
|
|
575
|
+
const ms = mod.slice("duration-".length);
|
|
576
|
+
durationOpt = `, duration: ${ms}`;
|
|
577
|
+
}
|
|
578
|
+
}
|
|
579
|
+
this.emit(`createTransition(${elVar}, { name: '${escapeStr(name)}'${durationOpt} })`);
|
|
580
|
+
}
|
|
565
581
|
// ---- Structural: u-if ---------------------------------------------------
|
|
566
582
|
genIf(node, dir, scope, elseIfChain, elseNode) {
|
|
567
583
|
this.helpers.add("createIf");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@matthesketh/utopia-compiler",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "Compiler for .utopia single-file components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"dist"
|
|
40
40
|
],
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@matthesketh/utopia-core": "0.
|
|
42
|
+
"@matthesketh/utopia-core": "0.7.0"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"build": "tsup src/index.ts --format esm,cjs --dts",
|