add html attribute validation & completions

.eslintignore

@@ -4,4 +4,3 @@
 
 dist/
 __fixtures__
-

.eslintrc

@@ -9,6 +9,9 @@
     "prefer-const": "off",
     "require-yield": "off"
   },
+  "env": {
+    "es6": true
+  },
   "overrides": [
     {
       "files": ["*.js", "*.cjs", "*.mjs"],

package.json

@@ -5,6 +5,7 @@
   "repository": "https://github.com/typed-ember/glint",
   "scripts": {
     "build": "tsc --build",
+    "build:vscode": "pnpm --filter '@glint/core' --filter '@glint/tsserver-plugin' build && pnpm --filter 'glint-vscode' build",
     "build:watch": "tsc --build --watch",
     "format": "prettier --write .",
     "link:build": "node ./bin/link-build.mjs",
@@ -32,7 +33,12 @@
     "glob": "^10.2.4",
     "prettier": "^3.3.2",
     "release-plan": "^0.16.0",
-    "typescript": ">=5.6.0"
+    "typescript": ">=5.6.0",
+    "aria-attributes": "^2.0.1",
+    "html-element-attributes": "^3.3.0",
+    "html-event-attributes": "^2.2.0",
+    "svg-element-attributes": "^2.1.0",
+    "svg-event-attributes": "^2.0.2"
   },
   "packageManager": "pnpm@10.6.2",
   "volta": {

packages/core/src/transform/template/template-to-typescript.ts

@@ -4,7 +4,7 @@
 import ScopeStack from './scope-stack.js';
 import { GlintEmitMetadata, GlintSpecialForm } from '@glint/core/config-types';
 import { TextContent } from './glimmer-ast-mapping-tree.js';
 import { Directive } from './transformed-module.js';
 import { DirectiveKind } from './transformed-module.js';
 
 const SPLATTRIBUTES = '...attributes';
@@ -60,6 +60,7 @@
   return mapTemplateContents(originalTemplate, { embeddingSyntax }, (ast, mapper) => {
     let { rangeForNode } = mapper;
     let scope = new ScopeStack([]);
+    let inHtmlContext: 'svg' | 'math' | 'default' = 'default';
 
     emitTemplateBoilerplate(() => {
       for (let statement of ast?.body ?? []) {
@@ -184,6 +185,12 @@
       } else if (kind === 'nocheck') {
         // Push to the directives array on the record
         mapper.directive(node, 'nocheck');
+      } else if (kind === 'in-svg') {
+        inHtmlContext = 'svg';
+      } else if (kind === 'in-mathml') {
+        inHtmlContext = 'math';
+      } else if (kind === 'out-svg' || kind === 'out-mathml') {
+        inHtmlContext = 'default';
       } else {
         // Push an error on the record
         mapper.error(`Unknown directive @glint-${kind}`, location);
@@ -878,15 +885,29 @@
       mapper.forNode(node, () => {
         const directivesWeakMap = assignDirectivesToElementOpenTagPieces(node);
 
+        if (node.tag === 'svg') {
+          inHtmlContext = 'svg';
+        }
+
+        if (node.tag === 'math') {
+          inHtmlContext = 'math';
+        }
+
         mapper.text('{');
         mapper.newline();
         mapper.indent();
 
-        mapper.text('const __glintY__ = __glintDSL__.emitElement(');
+        if (inHtmlContext === 'default') {
+          mapper.text('const __glintY__ = __glintDSL__.emitElement("');
+        } else if (inHtmlContext === 'svg') {
+          mapper.text('const __glintY__ = __glintDSL__.emitSVGElement("');
+        } else if (inHtmlContext === 'math') {
+          mapper.text('const __glintY__ = __glintDSL__.emitMathMlElement("');
+        }
         mapper.forNode(node.path, () => {
-          mapper.text(JSON.stringify(node.tag));
+          mapper.text(node.tag);
         });
-        mapper.text(');');
+        mapper.text('");');
         mapper.newline();
 
         emitAttributesAndModifiers(node, directivesWeakMap);
@@ -899,6 +920,10 @@
           emitTopLevelStatement(child);
         }
 
+        if (node.tag === 'svg' || node.tag === 'math') {
+          inHtmlContext = 'default';
+        }
+
         mapper.dedent();
         mapper.text('}');
         mapper.newline();
@@ -909,32 +934,24 @@
       node: AST.ElementNode,
       directivesWeakMap: WeakMap<AST.Node, DirectiveKind>,
     ): void {
-      let nonArgAttributes = node.attributes.filter((attr) => !attr.name.startsWith('@'));
-      if (!nonArgAttributes.length && !node.modifiers.length) {
-        // Avoid unused-symbol diagnostics
-        // TODO: With Volar you can simply disable `verification` on the CodeInformation
-        // to prevent diagnostics from mapping back upwards. Perhaps we should use that
-        // instead of preserving these empty statements/expressions.
-        mapper.text('__glintY__;');
-        mapper.newline();
-      } else {
-        emitSplattributes(node);
-        emitPlainAttributes(node, directivesWeakMap);
-        emitModifiers(node, directivesWeakMap);
-      }
+      emitSplattributes(node);
+      emitPlainAttributes(node, directivesWeakMap);
+      emitModifiers(node, directivesWeakMap);
     }
 
     function emitPlainAttributes(
       node: AST.ElementNode,
       directivesWeakMap: WeakMap<AST.Node, DirectiveKind>,
     ): void {
       let attributes = node.attributes.filter(
         (attr) => !attr.name.startsWith('@') && attr.name !== SPLATTRIBUTES,
       );
 
       mapper.text('__glintDSL__.applyAttributes(__glintY__.element, {');
-
-      mapper.forNodeWithSpan(node, node.openTag, () => {
+      const attrsSpan = node.openTag
+        .withStart(node.path.loc.getEnd())
+        .withEnd(node.openTag.getEnd().move(-1));
+      mapper.forNodeWithSpan(node, attrsSpan, () => {
         mapper.newline();
         mapper.indent();
 
@@ -961,17 +978,12 @@
 
           mapper.terminateDirectiveAreaOfEffect('emitPlainAttributes');
         }
-
-        // in case there are no attributes, this would allow completions to trigger
-        if (attributes.length === 0) {
-          mapper.text(' ');
-          mapper.newline();
-        }
-
-        mapper.dedent();
-        mapper.text('});');
         mapper.newline();
       });
+      mapper.newline();
+      mapper.dedent();
+      mapper.text('});');
+      mapper.newline();
     }
 
     function emitSplattributes(node: AST.ElementNode): void {
@@ -994,7 +1006,7 @@
 
     function emitModifiers(
       node: AST.ElementNode,
       directivesWeakMap: WeakMap<AST.Node, DirectiveKind>,
     ): void {
       for (let modifier of node.modifiers) {
         mapper.forNode(modifier, () => {