@matthesketh/utopia-compiler 0.4.0 → 0.7.0

package/dist/index.cjs

@@ -32,16 +32,19 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/parser.ts
+var BLOCK_RE = /<(template|script|style|test)([\s][^>]*)?\s*>/g;
+var ATTR_RE = /([a-zA-Z_][\w-]*)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
 function parse(source, filename = "anonymous.utopia") {
   const descriptor = {
     template: null,
     script: null,
     style: null,
+    test: null,
     filename
   };
-  const blockRe = /<(template|script|style)([\s][^>]*)?\s*>/g;
+  BLOCK_RE.lastIndex = 0;
   let match;
-  while ((match = blockRe.exec(source)) !== null) {
+  while ((match = BLOCK_RE.exec(source)) !== null) {
     const tagName = match[1];
     const attrString = match[2] || "";
     const openTagStart = match.index;
@@ -72,11 +75,10 @@ function parse(source, filename = "anonymous.utopia") {
       );
     }
     descriptor[tagName] = block;
-    blockRe.lastIndex = blockEnd;
+    BLOCK_RE.lastIndex = blockEnd;
   }
   return descriptor;
 }
-var ATTR_RE = /([a-zA-Z_][\w-]*)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
 function parseAttributes(raw) {
   const attrs = {};
   let m;
@@ -113,6 +115,16 @@ var SFCParseError = class extends Error {
 };
 
 // src/template-compiler.ts
+var TAG_NAME_CHAR_RE = /[a-zA-Z0-9\-_]/;
+var ATTR_NAME_CHAR_RE = /[a-zA-Z0-9\-_:@.]/;
+var ATTR_VALUE_END_RE = /[\s/>]/;
+var WHITESPACE_RE = /\s/;
+var TAG_START_CHAR_RE = /[a-zA-Z]/;
+var U_FOR_EXPR_RE = /^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/;
+var COMPONENT_TAG_RE = /^[A-Z][a-zA-Z0-9_$]*$/;
+var BACKSLASH_RE = /\\/g;
+var SINGLE_QUOTE_RE = /'/g;
+var HTML_ENTITY_RE = /&(?:#(\d+)|#x([0-9a-fA-F]+)|(\w+));/g;
 function compileTemplate(template, options = {}) {
   const ast = parseTemplate(template);
   return generate(ast, options);
@@ -294,7 +306,7 @@ var TemplateParser = class {
   // ---- Low-level helpers --------------------------------------------------
   readTagName() {
     const start = this.pos;
-    while (this.pos < this.source.length && /[a-zA-Z0-9\-_]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && TAG_NAME_CHAR_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     const name = this.source.slice(start, this.pos);
@@ -303,7 +315,7 @@ var TemplateParser = class {
   }
   readAttributeName() {
     const start = this.pos;
-    while (this.pos < this.source.length && /[a-zA-Z0-9\-_:@.]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && ATTR_NAME_CHAR_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     return this.source.slice(start, this.pos);
@@ -320,13 +332,13 @@ var TemplateParser = class {
       return value;
     }
     const start = this.pos;
-    while (this.pos < this.source.length && !/[\s/>]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && !ATTR_VALUE_END_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     return this.source.slice(start, this.pos);
   }
   skipWhitespace() {
-    while (this.pos < this.source.length && /\s/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && WHITESPACE_RE.test(this.source[this.pos])) {
       this.pos++;
     }
   }
@@ -336,7 +348,7 @@ var TemplateParser = class {
   /** Returns true when the char after `<` looks like the start of a tag name. */
   peekTagStart() {
     const next = this.source[this.pos + 1];
-    return next !== void 0 && /[a-zA-Z]/.test(next);
+    return next !== void 0 && TAG_START_CHAR_RE.test(next);
   }
   expect(str) {
     if (!this.lookingAt(str)) {
@@ -406,7 +418,7 @@ function classifyDirective(name, value) {
   return null;
 }
 function isDirectiveKind(s) {
-  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model";
+  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model" || s === "transition";
 }
 var CodeGenerator = class {
   constructor(options) {
@@ -535,6 +547,9 @@ ${fnBody}
       case "model":
         this.genModel(elVar, dir, scope);
         break;
+      case "transition":
+        this.genTransition(elVar, dir);
+        break;
     }
   }
   genOn(elVar, dir, scope) {
@@ -583,6 +598,19 @@ ${fnBody}
     this.emit(`createEffect(() => setAttr(${elVar}, 'value', ${signalRef}()))`);
     this.emit(`addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`);
   }
+  // ---- u-transition ---------------------------------------------------------
+  genTransition(elVar, dir) {
+    this.helpers.add("createTransition");
+    const name = dir.arg || dir.expression || "fade";
+    let durationOpt = "";
+    for (const mod of dir.modifiers) {
+      if (mod.startsWith("duration-")) {
+        const ms = mod.slice("duration-".length);
+        durationOpt = `, duration: ${ms}`;
+      }
+    }
+    this.emit(`createTransition(${elVar}, { name: '${escapeStr(name)}'${durationOpt} })`);
+  }
   // ---- Structural: u-if ---------------------------------------------------
   genIf(node, dir, scope, elseIfChain, elseNode) {
     this.helpers.add("createIf");
@@ -657,9 +685,7 @@ ${fnBody}
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
     this.emit(`const ${anchorVar} = createComment('u-for')`);
-    const forMatch = dir.expression.match(
-      /^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/
-    );
+    const forMatch = dir.expression.match(U_FOR_EXPR_RE);
     if (!forMatch) {
       throw new Error(`Invalid u-for expression: "${dir.expression}"`);
     }
@@ -862,10 +888,10 @@ ${fnBody}
   }
 };
 function isComponentTag(tag) {
-  return /^[A-Z][a-zA-Z0-9_$]*$/.test(tag);
+  return COMPONENT_TAG_RE.test(tag);
 }
 function escapeStr(s) {
-  return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  return s.replace(BACKSLASH_RE, "\\\\").replace(SINGLE_QUOTE_RE, "\\'");
 }
 var ENTITY_MAP = {
   "&amp;": "&",
@@ -894,7 +920,8 @@ var ENTITY_MAP = {
   "&divide;": "\xF7"
 };
 function decodeEntities(text) {
-  return text.replace(/&(?:#(\d+)|#x([0-9a-fA-F]+)|(\w+));/g, (match, dec, hex, named) => {
+  HTML_ENTITY_RE.lastIndex = 0;
+  return text.replace(HTML_ENTITY_RE, (match, dec, hex, named) => {
     if (dec) {
       const code = parseInt(dec, 10);
       if (code >= 0 && code <= 1114111) {
@@ -927,6 +954,9 @@ function generate(ast, options) {
 }
 
 // src/style-compiler.ts
+var WHITESPACE_RE2 = /\s/;
+var KEYFRAMES_RE = /^@(?:-\w+-)?keyframes\b/;
+var PSEUDO_SELECTOR_RE = /(?:::?[\w-]+(?:\([^)]*\))?)+$/;
 function compileStyle(options) {
   const { source, filename, scoped, scopeId: overrideScopeId } = options;
   if (!scoped) {
@@ -947,7 +977,7 @@ function scopeSelectors(css, scopeId) {
   const result = [];
   let pos = 0;
   while (pos < css.length) {
-    if (/\s/.test(css[pos])) {
+    if (WHITESPACE_RE2.test(css[pos])) {
       result.push(css[pos]);
       pos++;
       continue;
@@ -996,7 +1026,7 @@ function consumeAtRule(css, pos, scopeId) {
     return { text: css.slice(start), end: css.length };
   }
   const header = css.slice(start, headerEnd);
-  const isKeyframes = /^@(?:-\w+-)?keyframes\b/.test(header.trim());
+  const isKeyframes = KEYFRAMES_RE.test(header.trim());
   depth = 1;
   let bodyStart = headerEnd + 1;
   let bodyEnd = headerEnd + 1;
@@ -1039,8 +1069,7 @@ function consumeRuleSet(css, pos, scopeId) {
 function scopeSingleSelector(selector, scopeId) {
   if (!selector) return selector;
   const attr = `[${scopeId}]`;
-  const pseudoRe = /(?:::?[\w-]+(?:\([^)]*\))?)+$/;
-  const pseudoMatch = selector.match(pseudoRe);
+  const pseudoMatch = selector.match(PSEUDO_SELECTOR_RE);
   if (pseudoMatch) {
     const beforePseudo = selector.slice(0, pseudoMatch.index);
     return `${beforePseudo}${attr}${pseudoMatch[0]}`;
@@ -1049,6 +1078,7 @@ function scopeSingleSelector(selector, scopeId) {
 }
 
 // src/a11y.ts
+var HEADING_LEVEL_RE = /^h([1-6])$/;
 var VALID_ARIA_ROLES = /* @__PURE__ */ new Set([
   "alert",
   "alertdialog",
@@ -1218,7 +1248,7 @@ var rules = {
     }
   },
   "heading-order"(node, warnings, ctx) {
-    const match = node.tag.match(/^h([1-6])$/);
+    const match = node.tag.match(HEADING_LEVEL_RE);
     if (!match) return;
     const level = parseInt(match[1], 10);
     if (ctx.lastHeadingLevel > 0 && level > ctx.lastHeadingLevel + 1) {

package/dist/index.d.cts

@@ -14,6 +14,7 @@ interface SFCDescriptor {
     template: SFCBlock | null;
     script: SFCBlock | null;
     style: SFCBlock | null;
+    test: SFCBlock | null;
     filename: string;
 }
 /**
@@ -84,7 +85,7 @@ interface Directive {
     expression: string;
     modifiers: string[];
 }
-type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'else-if' | 'for' | 'model';
+type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'else-if' | 'for' | 'model' | 'transition';
 /** Exported for testing — parse a template string into an AST. */
 declare function parseTemplate(source: string): TemplateNode[];
 

package/dist/index.d.ts

@@ -14,6 +14,7 @@ interface SFCDescriptor {
     template: SFCBlock | null;
     script: SFCBlock | null;
     style: SFCBlock | null;
+    test: SFCBlock | null;
     filename: string;
 }
 /**
@@ -84,7 +85,7 @@ interface Directive {
     expression: string;
     modifiers: string[];
 }
-type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'else-if' | 'for' | 'model';
+type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'else-if' | 'for' | 'model' | 'transition';
 /** Exported for testing — parse a template string into an AST. */
 declare function parseTemplate(source: string): TemplateNode[];
 

package/dist/index.js

@@ -1,14 +1,17 @@
 // src/parser.ts
+var BLOCK_RE = /<(template|script|style|test)([\s][^>]*)?\s*>/g;
+var ATTR_RE = /([a-zA-Z_][\w-]*)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
 function parse(source, filename = "anonymous.utopia") {
   const descriptor = {
     template: null,
     script: null,
     style: null,
+    test: null,
     filename
   };
-  const blockRe = /<(template|script|style)([\s][^>]*)?\s*>/g;
+  BLOCK_RE.lastIndex = 0;
   let match;
-  while ((match = blockRe.exec(source)) !== null) {
+  while ((match = BLOCK_RE.exec(source)) !== null) {
     const tagName = match[1];
     const attrString = match[2] || "";
     const openTagStart = match.index;
@@ -39,11 +42,10 @@ function parse(source, filename = "anonymous.utopia") {
       );
     }
     descriptor[tagName] = block;
-    blockRe.lastIndex = blockEnd;
+    BLOCK_RE.lastIndex = blockEnd;
   }
   return descriptor;
 }
-var ATTR_RE = /([a-zA-Z_][\w-]*)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
 function parseAttributes(raw) {
   const attrs = {};
   let m;
@@ -80,6 +82,16 @@ var SFCParseError = class extends Error {
 };
 
 // src/template-compiler.ts
+var TAG_NAME_CHAR_RE = /[a-zA-Z0-9\-_]/;
+var ATTR_NAME_CHAR_RE = /[a-zA-Z0-9\-_:@.]/;
+var ATTR_VALUE_END_RE = /[\s/>]/;
+var WHITESPACE_RE = /\s/;
+var TAG_START_CHAR_RE = /[a-zA-Z]/;
+var U_FOR_EXPR_RE = /^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/;
+var COMPONENT_TAG_RE = /^[A-Z][a-zA-Z0-9_$]*$/;
+var BACKSLASH_RE = /\\/g;
+var SINGLE_QUOTE_RE = /'/g;
+var HTML_ENTITY_RE = /&(?:#(\d+)|#x([0-9a-fA-F]+)|(\w+));/g;
 function compileTemplate(template, options = {}) {
   const ast = parseTemplate(template);
   return generate(ast, options);
@@ -261,7 +273,7 @@ var TemplateParser = class {
   // ---- Low-level helpers --------------------------------------------------
   readTagName() {
     const start = this.pos;
-    while (this.pos < this.source.length && /[a-zA-Z0-9\-_]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && TAG_NAME_CHAR_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     const name = this.source.slice(start, this.pos);
@@ -270,7 +282,7 @@ var TemplateParser = class {
   }
   readAttributeName() {
     const start = this.pos;
-    while (this.pos < this.source.length && /[a-zA-Z0-9\-_:@.]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && ATTR_NAME_CHAR_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     return this.source.slice(start, this.pos);
@@ -287,13 +299,13 @@ var TemplateParser = class {
       return value;
     }
     const start = this.pos;
-    while (this.pos < this.source.length && !/[\s/>]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && !ATTR_VALUE_END_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     return this.source.slice(start, this.pos);
   }
   skipWhitespace() {
-    while (this.pos < this.source.length && /\s/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && WHITESPACE_RE.test(this.source[this.pos])) {
       this.pos++;
     }
   }
@@ -303,7 +315,7 @@ var TemplateParser = class {
   /** Returns true when the char after `<` looks like the start of a tag name. */
   peekTagStart() {
     const next = this.source[this.pos + 1];
-    return next !== void 0 && /[a-zA-Z]/.test(next);
+    return next !== void 0 && TAG_START_CHAR_RE.test(next);
   }
   expect(str) {
     if (!this.lookingAt(str)) {
@@ -373,7 +385,7 @@ function classifyDirective(name, value) {
   return null;
 }
 function isDirectiveKind(s) {
-  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model";
+  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model" || s === "transition";
 }
 var CodeGenerator = class {
   constructor(options) {
@@ -502,6 +514,9 @@ ${fnBody}
       case "model":
         this.genModel(elVar, dir, scope);
         break;
+      case "transition":
+        this.genTransition(elVar, dir);
+        break;
     }
   }
   genOn(elVar, dir, scope) {
@@ -550,6 +565,19 @@ ${fnBody}
     this.emit(`createEffect(() => setAttr(${elVar}, 'value', ${signalRef}()))`);
     this.emit(`addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`);
   }
+  // ---- u-transition ---------------------------------------------------------
+  genTransition(elVar, dir) {
+    this.helpers.add("createTransition");
+    const name = dir.arg || dir.expression || "fade";
+    let durationOpt = "";
+    for (const mod of dir.modifiers) {
+      if (mod.startsWith("duration-")) {
+        const ms = mod.slice("duration-".length);
+        durationOpt = `, duration: ${ms}`;
+      }
+    }
+    this.emit(`createTransition(${elVar}, { name: '${escapeStr(name)}'${durationOpt} })`);
+  }
   // ---- Structural: u-if ---------------------------------------------------
   genIf(node, dir, scope, elseIfChain, elseNode) {
     this.helpers.add("createIf");
@@ -624,9 +652,7 @@ ${fnBody}
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
     this.emit(`const ${anchorVar} = createComment('u-for')`);
-    const forMatch = dir.expression.match(
-      /^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/
-    );
+    const forMatch = dir.expression.match(U_FOR_EXPR_RE);
     if (!forMatch) {
       throw new Error(`Invalid u-for expression: "${dir.expression}"`);
     }
@@ -829,10 +855,10 @@ ${fnBody}
   }
 };
 function isComponentTag(tag) {
-  return /^[A-Z][a-zA-Z0-9_$]*$/.test(tag);
+  return COMPONENT_TAG_RE.test(tag);
 }
 function escapeStr(s) {
-  return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  return s.replace(BACKSLASH_RE, "\\\\").replace(SINGLE_QUOTE_RE, "\\'");
 }
 var ENTITY_MAP = {
   "&amp;": "&",
@@ -861,7 +887,8 @@ var ENTITY_MAP = {
   "&divide;": "\xF7"
 };
 function decodeEntities(text) {
-  return text.replace(/&(?:#(\d+)|#x([0-9a-fA-F]+)|(\w+));/g, (match, dec, hex, named) => {
+  HTML_ENTITY_RE.lastIndex = 0;
+  return text.replace(HTML_ENTITY_RE, (match, dec, hex, named) => {
     if (dec) {
       const code = parseInt(dec, 10);
       if (code >= 0 && code <= 1114111) {
@@ -894,6 +921,9 @@ function generate(ast, options) {
 }
 
 // src/style-compiler.ts
+var WHITESPACE_RE2 = /\s/;
+var KEYFRAMES_RE = /^@(?:-\w+-)?keyframes\b/;
+var PSEUDO_SELECTOR_RE = /(?:::?[\w-]+(?:\([^)]*\))?)+$/;
 function compileStyle(options) {
   const { source, filename, scoped, scopeId: overrideScopeId } = options;
   if (!scoped) {
@@ -914,7 +944,7 @@ function scopeSelectors(css, scopeId) {
   const result = [];
   let pos = 0;
   while (pos < css.length) {
-    if (/\s/.test(css[pos])) {
+    if (WHITESPACE_RE2.test(css[pos])) {
       result.push(css[pos]);
       pos++;
       continue;
@@ -963,7 +993,7 @@ function consumeAtRule(css, pos, scopeId) {
     return { text: css.slice(start), end: css.length };
   }
   const header = css.slice(start, headerEnd);
-  const isKeyframes = /^@(?:-\w+-)?keyframes\b/.test(header.trim());
+  const isKeyframes = KEYFRAMES_RE.test(header.trim());
   depth = 1;
   let bodyStart = headerEnd + 1;
   let bodyEnd = headerEnd + 1;
@@ -1006,8 +1036,7 @@ function consumeRuleSet(css, pos, scopeId) {
 function scopeSingleSelector(selector, scopeId) {
   if (!selector) return selector;
   const attr = `[${scopeId}]`;
-  const pseudoRe = /(?:::?[\w-]+(?:\([^)]*\))?)+$/;
-  const pseudoMatch = selector.match(pseudoRe);
+  const pseudoMatch = selector.match(PSEUDO_SELECTOR_RE);
   if (pseudoMatch) {
     const beforePseudo = selector.slice(0, pseudoMatch.index);
     return `${beforePseudo}${attr}${pseudoMatch[0]}`;
@@ -1016,6 +1045,7 @@ function scopeSingleSelector(selector, scopeId) {
 }
 
 // src/a11y.ts
+var HEADING_LEVEL_RE = /^h([1-6])$/;
 var VALID_ARIA_ROLES = /* @__PURE__ */ new Set([
   "alert",
   "alertdialog",
@@ -1185,7 +1215,7 @@ var rules = {
     }
   },
   "heading-order"(node, warnings, ctx) {
-    const match = node.tag.match(/^h([1-6])$/);
+    const match = node.tag.match(HEADING_LEVEL_RE);
     if (!match) return;
     const level = parseInt(match[1], 10);
     if (ctx.lastHeadingLevel > 0 && level > ctx.lastHeadingLevel + 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-compiler",
-  "version": "0.4.0",
+  "version": "0.7.0",
   "description": "Compiler for .utopia single-file components",
   "type": "module",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "dist"
   ],
   "dependencies": {
-    "@matthesketh/utopia-core": "0.4.0"
+    "@matthesketh/utopia-core": "0.7.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",