@constela/compiler 0.15.21 → 0.16.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Program, ConstelaError, Expression, IslandStrategy, IslandStrategyOptions, StylePreset, LayoutProgram, ComponentDef, ViewNode } from '@constela/core';
+import { Program, ConstelaError, Expression, TransitionDirective, IslandStrategy, IslandStrategyOptions, StylePreset, LayoutProgram, ComponentDef, ViewNode } from '@constela/core';
 export { createUndefinedVarError } from '@constela/core';
 
 /**
@@ -27,6 +27,7 @@ interface AnalyzePassSuccess {
     ok: true;
     ast: Program;
     context: AnalysisContext;
+    warnings: ConstelaError[];
 }
 interface AnalyzePassFailure {
     ok: false;
@@ -417,6 +418,7 @@ interface CompiledTextNode {
 interface CompiledIfNode {
     kind: 'if';
     condition: CompiledExpression;
+    transition?: TransitionDirective;
     then: CompiledNode;
     else?: CompiledNode;
 }
@@ -426,6 +428,7 @@ interface CompiledEachNode {
     as: string;
     index?: string;
     key?: CompiledExpression;
+    transition?: TransitionDirective;
     body: CompiledNode;
 }
 interface CompiledMarkdownNode {
@@ -581,6 +584,7 @@ declare function transformPass(ast: Program, _context: AnalysisContext, importDa
 interface CompileSuccess {
     ok: true;
     program: CompiledProgram;
+    warnings?: ConstelaError[];
 }
 interface CompileFailure {
     ok: false;

package/dist/index.js

@@ -14,6 +14,151 @@ function validatePass(input) {
   };
 }
 
+// src/passes/a11y-validate.ts
+import {
+  createA11yImgNoAltError,
+  createA11yButtonNoLabelError,
+  createA11yAnchorNoLabelError,
+  createA11yInputNoLabelError,
+  createA11yHeadingSkipError,
+  createA11yPositiveTabindexError,
+  createA11yDuplicateIdError
+} from "@constela/core";
+var HEADING_RE = /^h([1-6])$/;
+function getHeadingLevel(tag) {
+  const match = HEADING_RE.exec(tag);
+  return match ? Number(match[1]) : 0;
+}
+var FORM_INPUT_TAGS = /* @__PURE__ */ new Set(["input", "textarea", "select"]);
+function hasTextChild(children) {
+  if (!children) return false;
+  return children.some((child) => child.kind === "text");
+}
+function validateElementNode(node, path, ctx) {
+  const { tag, props, children } = node;
+  if (tag === "img") {
+    if (!props || !("alt" in props)) {
+      ctx.warnings.push(createA11yImgNoAltError(path));
+    }
+  }
+  if (tag === "button") {
+    const hasAriaLabel = props != null && "aria-label" in props;
+    if (!hasAriaLabel && !hasTextChild(children)) {
+      ctx.warnings.push(createA11yButtonNoLabelError(path));
+    }
+  }
+  if (tag === "a") {
+    const hasAriaLabel = props != null && "aria-label" in props;
+    if (!hasAriaLabel && !hasTextChild(children)) {
+      ctx.warnings.push(createA11yAnchorNoLabelError(path));
+    }
+  }
+  if (FORM_INPUT_TAGS.has(tag)) {
+    const hasAriaLabel = props != null && "aria-label" in props;
+    const hasAriaLabelledby = props != null && "aria-labelledby" in props;
+    if (!hasAriaLabel && !hasAriaLabelledby) {
+      ctx.warnings.push(createA11yInputNoLabelError(tag, path));
+    }
+  }
+  const headingLevel = getHeadingLevel(tag);
+  if (headingLevel > 0) {
+    if (ctx.maxHeadingLevel > 0 && headingLevel > ctx.maxHeadingLevel + 1) {
+      ctx.warnings.push(
+        createA11yHeadingSkipError(headingLevel, ctx.maxHeadingLevel + 1, path)
+      );
+    }
+    ctx.maxHeadingLevel = Math.max(ctx.maxHeadingLevel, headingLevel);
+  }
+  if (props && "tabindex" in props) {
+    const tabindexExpr = props["tabindex"];
+    if (tabindexExpr && tabindexExpr.expr === "lit" && typeof tabindexExpr.value === "number" && tabindexExpr.value > 0) {
+      ctx.warnings.push(
+        createA11yPositiveTabindexError(tabindexExpr.value, path)
+      );
+    }
+  }
+  if (props && "id" in props) {
+    const idExpr = props["id"];
+    if (idExpr && idExpr.expr === "lit" && typeof idExpr.value === "string") {
+      if (ctx.seenIds.has(idExpr.value)) {
+        ctx.warnings.push(createA11yDuplicateIdError(idExpr.value, path));
+      } else {
+        ctx.seenIds.add(idExpr.value);
+      }
+    }
+  }
+}
+function validateNode(node, path, ctx) {
+  switch (node.kind) {
+    case "element":
+      validateElementNode(node, path, ctx);
+      if (node.children) {
+        for (let i = 0; i < node.children.length; i++) {
+          const child = node.children[i];
+          if (child) {
+            validateNode(child, `${path}/children/${i}`, ctx);
+          }
+        }
+      }
+      break;
+    case "text":
+      break;
+    case "if":
+      validateNode(node.then, `${path}/then`, ctx);
+      if (node.else) {
+        validateNode(node.else, `${path}/else`, ctx);
+      }
+      break;
+    case "each":
+      validateNode(node.body, `${path}/body`, ctx);
+      break;
+    case "component":
+      if (node.children) {
+        for (let i = 0; i < node.children.length; i++) {
+          const child = node.children[i];
+          if (child) {
+            validateNode(child, `${path}/children/${i}`, ctx);
+          }
+        }
+      }
+      break;
+    case "slot":
+    case "markdown":
+    case "code":
+      break;
+    case "portal":
+      if (node.children) {
+        for (let i = 0; i < node.children.length; i++) {
+          const child = node.children[i];
+          if (child) {
+            validateNode(child, `${path}/children/${i}`, ctx);
+          }
+        }
+      }
+      break;
+    case "island":
+      validateNode(node.content, `${path}/content`, ctx);
+      break;
+    case "suspense":
+      validateNode(node.fallback, `${path}/fallback`, ctx);
+      validateNode(node.content, `${path}/content`, ctx);
+      break;
+    case "errorBoundary":
+      validateNode(node.fallback, `${path}/fallback`, ctx);
+      validateNode(node.content, `${path}/content`, ctx);
+      break;
+  }
+}
+function validateA11y(program) {
+  const ctx = {
+    warnings: [],
+    maxHeadingLevel: 0,
+    seenIds: /* @__PURE__ */ new Set()
+  };
+  validateNode(program.view, "/view", ctx);
+  return ctx.warnings;
+}
+
 // src/passes/analyze.ts
 import {
   createUndefinedStateError,
@@ -1307,6 +1452,7 @@ function analyzePass(programAst) {
       insideLayout: isLayout
     })
   );
+  const a11yWarnings = validateA11y(programAst);
   if (errors.length > 0) {
     return {
       ok: false,
@@ -1316,7 +1462,8 @@ function analyzePass(programAst) {
   return {
     ok: true,
     ast: programAst,
-    context
+    context,
+    warnings: a11yWarnings
   };
 }
 
@@ -1929,6 +2076,9 @@ function transformViewNode(node, ctx) {
         condition: transformExpression(node.condition, ctx),
         then: transformViewNode(node.then, ctx)
       };
+      if (node.transition) {
+        compiledIf.transition = node.transition;
+      }
       if (node.else) {
         compiledIf.else = transformViewNode(node.else, ctx);
       }
@@ -1941,6 +2091,9 @@ function transformViewNode(node, ctx) {
         as: node.as,
         body: transformViewNode(node.body, ctx)
       };
+      if (node.transition) {
+        compiledEach.transition = node.transition;
+      }
       if (node.index) {
         compiledEach.index = node.index;
       }
@@ -2215,7 +2368,8 @@ function compile(input) {
   const program = transformPass(analyzeResult.ast, analyzeResult.context);
   return {
     ok: true,
-    program
+    program,
+    warnings: analyzeResult.warnings
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/compiler",
-  "version": "0.15.21",
+  "version": "0.16.0",
   "description": "Compiler for Constela UI framework - AST to Program transformation",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,7 +15,7 @@
     "dist"
   ],
   "dependencies": {
-    "@constela/core": "0.22.0"
+    "@constela/core": "0.23.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",