Fix MathML emit

packages/template/__tests__/emit-mathml.test.ts

@@ -0,0 +1,20 @@
+import { expectTypeOf } from 'expect-type';
+import { emitMathMlElement } from '../-private/dsl';
+
+{
+  let math = emitMathMlElement('math');
+
+  expectTypeOf(math).not.toBeAny();
+  expectTypeOf(math).not.toBeUnknown();
+  expectTypeOf(math.element).not.toEqualTypeOf<Element>();
+  expectTypeOf(math.element).toEqualTypeOf<MathMLElement>();
+}
+
+{
+  let mi = emitMathMlElement('mi');
+
+  expectTypeOf(mi).not.toBeAny();
+  expectTypeOf(mi).not.toBeUnknown();
+  expectTypeOf(mi.element).not.toEqualTypeOf<Element>();
+  expectTypeOf(mi.element).toEqualTypeOf<MathMLElement>();
+}

test-packages/package-test-core/__tests__/language-server/diagnostics.test.ts

@@ -661,6 +661,39 @@ describe('Language Server: Diagnostics (ts plugin)', () => {
     expect(diagnostics.length).toBe(0);
   });
 
+  test('mathml does not produce false positives', async () => {
+    let componentA = stripIndent`
+      export const MathMLExample = <template>
+        <span>x</span>
+
+        <math display="block">
+          <mfrac>
+            <mrow>
+              <mi>a</mi>
+              <mo>+</mo>
+              <mn>2</mn>
+            </mrow>
+            <mrow>
+              <mn>3</mn>
+              <mo>−</mo>
+              <mi>b</mi>
+            </mrow>
+          </mfrac>
+        </math>
+
+        <span>x</span>
+      </template>
+      `;
+
+    const diagnostics = await requestTsserverDiagnostics(
+      'ts-template-imports-app/src/ephemeral-index.gts',
+      'glimmer-ts',
+      componentA,
+    );
+
+    expect(diagnostics).toMatchInlineSnapshot(`[]`);
+  });
+
   test('errors with modifiers are properly reported', async () => {
     const code = stripIndent`
     import Component from '@glimmer/component';

test-packages/package-test-core/__tests__/language-server/hover.test.ts

@@ -130,6 +130,25 @@ describe.skip('Language Server: Hover (ts plugin)', () => {
       }
     `);
   });
+
+  describe('MathML', () => {
+    test('empty <math>', async () => {
+      const [offset, content] = extractCursor(stripIndent`
+        <template>
+          <ma%th>
+          </math>
+        </template>
+      `);
+
+      const doc = await prepareDocument(
+        'ts-template-imports-app/src/ephemeral.gts',
+        'glimmer-ts',
+        content,
+      );
+
+      expect(await performHoverRequest(doc, offset)).toMatchInlineSnapshot();
+    });
+  });
 });
 
 async function performHoverRequest(document: TextDocument, offset: number): Promise<any> {

test-packages/package-test-core/__tests__/transform/template-to-typescript.test.ts

@@ -939,6 +939,26 @@ describe('Transform: rewriteTemplate', () => {
   });
 
   describe('plain elements', () => {
+    describe('MathML', () => {
+      test('with static contents', () => {
+        let template = '<math><mi>x</mi><mo>=</mo><mi>y</mi></math>';
+
+        expect(templateBody(template)).toMatchInlineSnapshot(`
+          "{
+          const __glintY__ = __glintDSL__.emitMathMlElement("math");
+          {
+          const __glintY__ = __glintDSL__.emitMathMlElement("mi");
+          }
+          {
+          const __glintY__ = __glintDSL__.emitMathMlElement("mo");
+          }
+          {
+          const __glintY__ = __glintDSL__.emitMathMlElement("mi");
+          }
+          }"
+        `);
+      });
+    });
     test('with programmatic contents', () => {
       let template = '<div>{{@foo}}</div>';
 

test-packages/ts-template-imports-app/src/math-ml.gts

@@ -0,0 +1,16 @@
+export const MathMLExample = <template>
+  <math display="block">
+    <mfrac>
+      <mrow>
+        <mi>a</mi>
+        <mo>+</mo>
+        <mn>2</mn>
+      </mrow>
+      <mrow>
+        <mn>3</mn>
+        <mo>−</mo>
+        <mi>b</mi>
+      </mrow>
+    </mfrac>
+  </math>
+</template>