diff --git a/.changeset/show-if-attr-error.md b/.changeset/show-if-attr-error.md new file mode 100644 index 00000000000..f09421dc16e --- /dev/null +++ b/.changeset/show-if-attr-error.md @@ -0,0 +1,5 @@ +--- +"@marko/runtime-tags": patch +--- + +Improve the `` missing-`value=` error when the condition was written as another attribute: `` now suggests `` and points the code frame at the offending attribute. diff --git a/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-dom.debug.txt b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-dom.debug.txt new file mode 100644 index 00000000000..21b6508dca4 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-dom.debug.txt @@ -0,0 +1,6 @@ + + at packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/template.marko:2:7 + 1 | + > 2 | Hello + | ^^^^^^^ The [`` tag](https://markojs.com/docs/reference/core-tag#show) requires the [`value=` attribute](https://markojs.com/docs/reference/language#shorthand-value). Use `` instead of ``. + 3 | \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-dom.txt b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-dom.txt new file mode 100644 index 00000000000..21b6508dca4 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-dom.txt @@ -0,0 +1,6 @@ + + at packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/template.marko:2:7 + 1 | + > 2 | Hello + | ^^^^^^^ The [`` tag](https://markojs.com/docs/reference/core-tag#show) requires the [`value=` attribute](https://markojs.com/docs/reference/language#shorthand-value). Use `` instead of ``. + 3 | \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-html.debug.txt b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-html.debug.txt new file mode 100644 index 00000000000..21b6508dca4 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-html.debug.txt @@ -0,0 +1,6 @@ + + at packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/template.marko:2:7 + 1 | + > 2 | Hello + | ^^^^^^^ The [`` tag](https://markojs.com/docs/reference/core-tag#show) requires the [`value=` attribute](https://markojs.com/docs/reference/language#shorthand-value). Use `` instead of ``. + 3 | \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-html.txt b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-html.txt new file mode 100644 index 00000000000..21b6508dca4 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/__snapshots__/error-compile-html.txt @@ -0,0 +1,6 @@ + + at packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/template.marko:2:7 + 1 | + > 2 | Hello + | ^^^^^^^ The [`` tag](https://markojs.com/docs/reference/core-tag#show) requires the [`value=` attribute](https://markojs.com/docs/reference/language#shorthand-value). Use `` instead of ``. + 3 | \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/template.marko b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/template.marko new file mode 100644 index 00000000000..53e64cf9a97 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/template.marko @@ -0,0 +1,2 @@ + +Hello diff --git a/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/test.ts b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/test.ts new file mode 100644 index 00000000000..87d511a1f39 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/error-show-wrong-attr/test.ts @@ -0,0 +1,5 @@ +import type { TestConfig } from "../../main.test"; + +export const config: TestConfig = { + error_compiler: true, +}; diff --git a/packages/runtime-tags/src/translator/core/show.ts b/packages/runtime-tags/src/translator/core/show.ts index 1547ed22940..63dd5a4cf20 100644 --- a/packages/runtime-tags/src/translator/core/show.ts +++ b/packages/runtime-tags/src/translator/core/show.ts @@ -382,11 +382,13 @@ function assertHasValueAttribute(tag: t.NodePath) { !t.isMarkoAttribute(valueAttr) || !(valueAttr.default || valueAttr.name === "value") ) { - throw tag - .get("name") - .buildCodeFrameError( - `The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#show) requires a [\`value=\` attribute](https://markojs.com/docs/reference/language#shorthand-value).`, - ); + // `` is the common miss, so name the rename. + const wrongName = t.isMarkoAttribute(valueAttr) && valueAttr.name; + throw ( + wrongName ? tag.get("attributes")[0] : tag.get("name") + ).buildCodeFrameError( + `The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#show) requires the [\`value=\` attribute](https://markojs.com/docs/reference/language#shorthand-value).${wrongName ? ` Use \`<${getTagName(tag)}=condition>\` instead of \`<${getTagName(tag)} ${wrongName}=condition>\`.` : ""}`, + ); } if (node.attributes.length > 1) { diff --git a/skills/marko-best-practices/SKILL.md b/skills/marko-best-practices/SKILL.md index d3ad9f4b325..ac8623ef66b 100644 --- a/skills/marko-best-practices/SKILL.md +++ b/skills/marko-best-practices/SKILL.md @@ -24,6 +24,7 @@ Documentation and this skill target **Marko 6**. Do not use Marko 5 syntax. - [ ] Uses Marko 6 syntax only (no scriptlets, old event syntax, or Marko 5 blocks). - [ ] `