tutuca 0.9.49 → 0.9.51

package/README.md

@@ -73,11 +73,9 @@ in the storybook shape `{ title, description?, items: [{ title, description?, va
 
 ```sh
 npm install --save-dev tutuca
-# prettier is optional, only needed for --pretty
-npm install --save-dev prettier
 ```
 
-The package exposes `tutuca` via `bin`, so `npx tutuca` (or a global `npm i -g tutuca`) just works. `jsdom` ships as a regular dependency (it's needed by `render` and `lint`) and is installed automatically.
+The package exposes `tutuca` via `bin`, so `npx tutuca` (or a global `npm i -g tutuca`) just works. `jsdom` (needed by `render` and `lint`) and `prettier` (used by `--pretty`) ship as regular dependencies and are installed automatically.
 
 ### Commands
 

package/dist/tutuca-cli.js

@@ -7755,6 +7755,22 @@ function replaceNameSuggestion(name, candidates) {
   const close = closestName(name, candidates);
   return close ? { kind: "replace-name", from: name, to: close } : null;
 }
+function classifyBadValue(value) {
+  if (typeof value !== "string")
+    return null;
+  const s = value.trim();
+  if (s === "")
+    return null;
+  if (/\s\?\s.+\s:\s/.test(s))
+    return "ternary";
+  if (/===|!==|==|!=|<=|>=|\s<\s|\s>\s/.test(s))
+    return "comparison";
+  if (/&&|\|\|/.test(s))
+    return "logical";
+  if (/^\.[A-Za-z_]\w*\s+\S/.test(s))
+    return "call-with-args";
+  return null;
+}
 function checkComponent(Comp, lx = new LintContext) {
   return lx.push({ componentName: Comp.name }, () => {
     const referencedAlters = new Set;
@@ -7790,6 +7806,13 @@ function checkParseIssues(lx, view) {
     const id = PARSE_ISSUE_KIND_TO_LINT_ID[kind];
     if (!id)
       continue;
+    if (kind === "bad-value") {
+      const detected = classifyBadValue(info.value);
+      if (detected) {
+        lx.error(UNSUPPORTED_EXPR_SYNTAX, { ...info, detected }, { kind: "rephrase", from: info.value, text: UNSUPPORTED_EXPR_GUIDANCE[detected] });
+        continue;
+      }
+    }
     const atPrefixKnown = AT_PREFIX_HINT_KNOWN_BY_KIND[kind];
     const isAtPrefixedTypo = atPrefixKnown && info.name?.startsWith("@") && atPrefixKnown.has(info.name.slice(1));
     let suggestion = null;
@@ -8126,7 +8149,7 @@ class LintContext {
     this.reports.push({ id, info, level, context: { ...this.frame }, suggestion });
   }
 }
-var KNOWN_DIRECTIVE_NAMES, ALT_HANDLER_NOT_DEFINED = "ALT_HANDLER_NOT_DEFINED", ALT_HANDLER_NOT_REFERENCED = "ALT_HANDLER_NOT_REFERENCED", RENDER_IT_OUTSIDE_OF_LOOP = "RENDER_IT_OUTSIDE_OF_LOOP", UNKNOWN_EVENT_MODIFIER = "UNKNOWN_EVENT_MODIFIER", UNKNOWN_HANDLER_ARG_NAME = "UNKNOWN_HANDLER_ARG_NAME", INPUT_HANDLER_NOT_IMPLEMENTED = "INPUT_HANDLER_NOT_IMPLEMENTED", INPUT_HANDLER_NOT_REFERENCED = "INPUT_HANDLER_NOT_REFERENCED", INPUT_HANDLER_METHOD_NOT_IMPLEMENTED = "INPUT_HANDLER_METHOD_NOT_IMPLEMENTED", INPUT_HANDLER_FOR_INPUT_HANDLER_METHOD = "INPUT_HANDLER_FOR_INPUT_HANDLER_METHOD", INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER = "INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER", FIELD_VAL_NOT_DEFINED = "FIELD_VAL_NOT_DEFINED", DUPLICATE_ATTR_DEFINITION = "DUPLICATE_ATTR_DEFINITION", IF_NO_BRANCH_SET = "IF_NO_BRANCH_SET", UNKNOWN_REQUEST_NAME = "UNKNOWN_REQUEST_NAME", UNKNOWN_COMPONENT_NAME = "UNKNOWN_COMPONENT_NAME", UNKNOWN_MACRO_ARG = "UNKNOWN_MACRO_ARG", UNKNOWN_DIRECTIVE = "UNKNOWN_DIRECTIVE", UNKNOWN_X_OP = "UNKNOWN_X_OP", UNKNOWN_X_ATTR = "UNKNOWN_X_ATTR", MAYBE_DROP_AT_PREFIX = "MAYBE_DROP_AT_PREFIX", BAD_VALUE = "BAD_VALUE", PARSE_ISSUE_KIND_TO_LINT_ID, X_KNOWN_OP_NAMES, X_KNOWN_ATTR_NAMES, AT_PREFIX_HINT_KNOWN_BY_KIND, LEVEL_WARN2 = "warn", LEVEL_ERROR2 = "error", LEVEL_HINT = "hint", PARSE_ISSUE_KIND_TO_KNOWN_NAMES, HTML_LINT_OPTS, NO_WRAPPERS, KNOWN_HANDLER_NAMES, NODE_KIND_TO_CTX, LintParseContext;
+var KNOWN_DIRECTIVE_NAMES, ALT_HANDLER_NOT_DEFINED = "ALT_HANDLER_NOT_DEFINED", ALT_HANDLER_NOT_REFERENCED = "ALT_HANDLER_NOT_REFERENCED", RENDER_IT_OUTSIDE_OF_LOOP = "RENDER_IT_OUTSIDE_OF_LOOP", UNKNOWN_EVENT_MODIFIER = "UNKNOWN_EVENT_MODIFIER", UNKNOWN_HANDLER_ARG_NAME = "UNKNOWN_HANDLER_ARG_NAME", INPUT_HANDLER_NOT_IMPLEMENTED = "INPUT_HANDLER_NOT_IMPLEMENTED", INPUT_HANDLER_NOT_REFERENCED = "INPUT_HANDLER_NOT_REFERENCED", INPUT_HANDLER_METHOD_NOT_IMPLEMENTED = "INPUT_HANDLER_METHOD_NOT_IMPLEMENTED", INPUT_HANDLER_FOR_INPUT_HANDLER_METHOD = "INPUT_HANDLER_FOR_INPUT_HANDLER_METHOD", INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER = "INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER", FIELD_VAL_NOT_DEFINED = "FIELD_VAL_NOT_DEFINED", DUPLICATE_ATTR_DEFINITION = "DUPLICATE_ATTR_DEFINITION", IF_NO_BRANCH_SET = "IF_NO_BRANCH_SET", UNKNOWN_REQUEST_NAME = "UNKNOWN_REQUEST_NAME", UNKNOWN_COMPONENT_NAME = "UNKNOWN_COMPONENT_NAME", UNKNOWN_MACRO_ARG = "UNKNOWN_MACRO_ARG", UNKNOWN_DIRECTIVE = "UNKNOWN_DIRECTIVE", UNKNOWN_X_OP = "UNKNOWN_X_OP", UNKNOWN_X_ATTR = "UNKNOWN_X_ATTR", MAYBE_DROP_AT_PREFIX = "MAYBE_DROP_AT_PREFIX", BAD_VALUE = "BAD_VALUE", UNSUPPORTED_EXPR_SYNTAX = "UNSUPPORTED_EXPR_SYNTAX", PARSE_ISSUE_KIND_TO_LINT_ID, X_KNOWN_OP_NAMES, X_KNOWN_ATTR_NAMES, AT_PREFIX_HINT_KNOWN_BY_KIND, LEVEL_WARN2 = "warn", LEVEL_ERROR2 = "error", LEVEL_HINT = "hint", PARSE_ISSUE_KIND_TO_KNOWN_NAMES, UNSUPPORTED_EXPR_GUIDANCE, HTML_LINT_OPTS, NO_WRAPPERS, KNOWN_HANDLER_NAMES, NODE_KIND_TO_CTX, LintParseContext;
 var init_lint_check = __esm(() => {
   init_anode();
   init_htmllinter();
@@ -8169,6 +8192,12 @@ var init_lint_check = __esm(() => {
     "unknown-x-op": X_KNOWN_OP_NAMES,
     "unknown-x-attr": X_KNOWN_ATTR_NAMES
   };
+  UNSUPPORTED_EXPR_GUIDANCE = {
+    ternary: "Ternary expressions aren't supported in dynamic attributes. Define a method or computed field on the component that returns the value, then reference it as '.methodName'.",
+    comparison: "Comparisons aren't supported in dynamic attributes. Define a method like '.isFooSelected' that returns the boolean, then reference it as '.isFooSelected'.",
+    logical: "Logical operators aren't supported in dynamic attributes. Combine the conditions in a method on the component and reference it as '.methodName'.",
+    "call-with-args": "Method calls with arguments aren't supported here. Reference a no-arg method ('.methodName') and read what you need from component state, or split into per-case methods."
+  };
   HTML_LINT_OPTS = {
     fragmentContext: "template",
     transparentTagPrefixes: ["x"]
@@ -14336,7 +14365,6 @@ GLOBAL FLAGS
   -o, --output <file>        Write to <file> instead of stdout.
       --pretty               Pretty-print HTML (md/html formats) via
                              prettier; JSON formatter uses indent 2.
-                             Requires \`prettier\` to be installed.
   -h, --help                 Show this help.
       --module <path>        Alternative to first-positional module path.
 
@@ -14347,9 +14375,6 @@ EXIT CODES
   3   render crash
   4   test failures
 
-ENVIRONMENT
-  \`prettier\` is an optional peer dep, only used by --pretty.
-
 EXAMPLES
   # Inspect a module
   tutuca ./src/components.js info
@@ -14470,6 +14495,28 @@ function makeFormatter(name, table) {
 }
 
 // tools/format/lint.js
+var UNSUPPORTED_EXPR_LABEL = {
+  ternary: "ternary expression",
+  comparison: "comparison",
+  logical: "logical expression",
+  "call-with-args": "method call with arguments"
+};
+function unsupportedExprMessage(info) {
+  const v = JSON.stringify(info.value);
+  const label = UNSUPPORTED_EXPR_LABEL[info.detected] ?? "expression";
+  switch (info.role) {
+    case "attr":
+      return `Unsupported ${label} ${v} in dynamic attribute ':${info.attr}'`;
+    case "directive":
+      return `Unsupported ${label} ${v} in directive '@${info.directive}'`;
+    case "if":
+      return `Unsupported ${label} ${v} in '@if.${info.attr}' condition`;
+    case "x-op":
+      return `Unsupported ${label} ${v} in <x ${info.op}>`;
+    default:
+      return `Unsupported ${label} ${v}`;
+  }
+}
 function badValueMessage(info) {
   const v = JSON.stringify(info.value);
   switch (info.role) {
@@ -14573,6 +14620,8 @@ function lintIdToMessage(id, info) {
     }
     case "BAD_VALUE":
       return `${badValueMessage(info)}${fmtTagSuffix(info)}`;
+    case "UNSUPPORTED_EXPR_SYNTAX":
+      return `${unsupportedExprMessage(info)}${fmtTagSuffix(info)}`;
     case "HTML_TAG_NAME_HAS_UPPERCASE":
       return `Tag <${info.raw}> will be lowercased to <${info.lowercased}>${fmtLocationSuffix(info)}`;
     case "HTML_SVG_TAG_WILL_LOWERCASE":
@@ -14631,6 +14680,8 @@ function suggestionToMessage(suggestion) {
       return `use '${suggestion.to}' instead of '${suggestion.from}'`;
     case "wrap":
       return `wrap it in ${suggestion.to}`;
+    case "rephrase":
+      return suggestion.text ?? null;
     default:
       return null;
   }

package/dist/tutuca-dev.js

@@ -7310,6 +7310,7 @@ var UNKNOWN_X_OP = "UNKNOWN_X_OP";
 var UNKNOWN_X_ATTR = "UNKNOWN_X_ATTR";
 var MAYBE_DROP_AT_PREFIX = "MAYBE_DROP_AT_PREFIX";
 var BAD_VALUE = "BAD_VALUE";
+var UNSUPPORTED_EXPR_SYNTAX = "UNSUPPORTED_EXPR_SYNTAX";
 var PARSE_ISSUE_KIND_TO_LINT_ID = {
   "unknown-directive": UNKNOWN_DIRECTIVE,
   "unknown-x-op": UNKNOWN_X_OP,
@@ -7366,6 +7367,28 @@ function replaceNameSuggestion(name, candidates) {
   const close = closestName(name, candidates);
   return close ? { kind: "replace-name", from: name, to: close } : null;
 }
+function classifyBadValue(value) {
+  if (typeof value !== "string")
+    return null;
+  const s = value.trim();
+  if (s === "")
+    return null;
+  if (/\s\?\s.+\s:\s/.test(s))
+    return "ternary";
+  if (/===|!==|==|!=|<=|>=|\s<\s|\s>\s/.test(s))
+    return "comparison";
+  if (/&&|\|\|/.test(s))
+    return "logical";
+  if (/^\.[A-Za-z_]\w*\s+\S/.test(s))
+    return "call-with-args";
+  return null;
+}
+var UNSUPPORTED_EXPR_GUIDANCE = {
+  ternary: "Ternary expressions aren't supported in dynamic attributes. Define a method or computed field on the component that returns the value, then reference it as '.methodName'.",
+  comparison: "Comparisons aren't supported in dynamic attributes. Define a method like '.isFooSelected' that returns the boolean, then reference it as '.isFooSelected'.",
+  logical: "Logical operators aren't supported in dynamic attributes. Combine the conditions in a method on the component and reference it as '.methodName'.",
+  "call-with-args": "Method calls with arguments aren't supported here. Reference a no-arg method ('.methodName') and read what you need from component state, or split into per-case methods."
+};
 function checkComponent(Comp, lx = new LintContext) {
   return lx.push({ componentName: Comp.name }, () => {
     const referencedAlters = new Set;
@@ -7405,6 +7428,13 @@ function checkParseIssues(lx, view) {
     const id = PARSE_ISSUE_KIND_TO_LINT_ID[kind];
     if (!id)
       continue;
+    if (kind === "bad-value") {
+      const detected = classifyBadValue(info.value);
+      if (detected) {
+        lx.error(UNSUPPORTED_EXPR_SYNTAX, { ...info, detected }, { kind: "rephrase", from: info.value, text: UNSUPPORTED_EXPR_GUIDANCE[detected] });
+        continue;
+      }
+    }
     const atPrefixKnown = AT_PREFIX_HINT_KNOWN_BY_KIND[kind];
     const isAtPrefixedTypo = atPrefixKnown && info.name?.startsWith("@") && atPrefixKnown.has(info.name.slice(1));
     let suggestion = null;
@@ -8215,6 +8245,28 @@ function reportTestReportToConsole(report) {
 }
 
 // tools/format/lint.js
+var UNSUPPORTED_EXPR_LABEL = {
+  ternary: "ternary expression",
+  comparison: "comparison",
+  logical: "logical expression",
+  "call-with-args": "method call with arguments"
+};
+function unsupportedExprMessage(info) {
+  const v = JSON.stringify(info.value);
+  const label = UNSUPPORTED_EXPR_LABEL[info.detected] ?? "expression";
+  switch (info.role) {
+    case "attr":
+      return `Unsupported ${label} ${v} in dynamic attribute ':${info.attr}'`;
+    case "directive":
+      return `Unsupported ${label} ${v} in directive '@${info.directive}'`;
+    case "if":
+      return `Unsupported ${label} ${v} in '@if.${info.attr}' condition`;
+    case "x-op":
+      return `Unsupported ${label} ${v} in <x ${info.op}>`;
+    default:
+      return `Unsupported ${label} ${v}`;
+  }
+}
 function badValueMessage(info) {
   const v = JSON.stringify(info.value);
   switch (info.role) {
@@ -8318,6 +8370,8 @@ function lintIdToMessage(id, info) {
     }
     case "BAD_VALUE":
       return `${badValueMessage(info)}${fmtTagSuffix(info)}`;
+    case "UNSUPPORTED_EXPR_SYNTAX":
+      return `${unsupportedExprMessage(info)}${fmtTagSuffix(info)}`;
     case "HTML_TAG_NAME_HAS_UPPERCASE":
       return `Tag <${info.raw}> will be lowercased to <${info.lowercased}>${fmtLocationSuffix(info)}`;
     case "HTML_SVG_TAG_WILL_LOWERCASE":
@@ -8376,6 +8430,8 @@ function suggestionToMessage(suggestion) {
       return `use '${suggestion.to}' instead of '${suggestion.from}'`;
     case "wrap":
       return `wrap it in ${suggestion.to}`;
+    case "rephrase":
+      return suggestion.text ?? null;
     default:
       return null;
   }
@@ -15062,6 +15118,7 @@ export {
   compileClassesToStyle,
   checkComponent,
   check,
+  UNSUPPORTED_EXPR_SYNTAX,
   UNKNOWN_X_OP,
   UNKNOWN_X_ATTR,
   UNKNOWN_REQUEST_NAME,