@glint/template 1.4.1-unstable.b6f19ff → 1.4.1-unstable.bb2c7cd

package/-private/dsl/emit.d.ts

@@ -9,7 +9,12 @@ import {
   TemplateContext,
   NamedArgs,
 } from '../integration';
-import { ElementForTagName } from './types';
+import {
+  AttributesForElement,
+  ElementForTagName,
+  MathMlElementForTagName,
+  SVGElementForTagName,
+} from './types';
 
 /**
  * Used during emit to denote an object literal that corresponds
@@ -38,15 +43,29 @@ export declare function emitContent(value: ContentValue): void;
  *
  * Would produce code like:
  *
- *     emitElement('div', (𝛄) => {
- *       applySplattributes(𝚪.element, 𝛄.element);
- *       applyAttributes(𝛄.element, { class: 'hello' });
- *       applyModifier(𝛄.element, resolve(on)({}, 'click', this.clicked));
+ *     emitElement('div', (__glintY__) => {
+ *       applySplattributes(__glintRef__.element, __glintY__.element);
+ *       applyAttributes(__glintY__.element, { class: 'hello' });
+ *       applyModifier(__glintY__.element, resolve(on)({}, 'click', this.clicked));
  *     });
  */
-export declare function emitElement<Name extends string>(
+export declare function emitElement<Name extends keyof HTMLElementTagNameMap | 'math' | 'svg'>(
+  name: Name,
+): {
+  element: Name extends 'math'
+    ? MathMlElementForTagName<'math'>
+    : Name extends 'svg'
+      ? SVGElementForTagName<'svg'>
+      : ElementForTagName<Name>;
+};
+
+export declare function emitSVGElement<Name extends keyof SVGElementTagNameMap>(
+  name: Name,
+): { element: SVGElementForTagName<Name> };
+
+export declare function emitMathMlElement<Name extends keyof MathMLElementTagNameMap>(
   name: Name,
-): { element: ElementForTagName<Name> };
+): { element: MathMlElementForTagName<Name> };
 
 /*
  * Emits the given value as an entity that expects to receive blocks
@@ -60,8 +79,8 @@ export declare function emitElement<Name extends string>(
  * This form of invocation is the only one in a template that may have
  * blocks bound to it. The final line above would produce code like:
  *
- *     emitComponent(resolve(Value)({ foo: bar })), (𝛄) => {
- *       applyModifier(𝛄.element, resolve(baz)({}));
+ *     emitComponent(resolve(Value)({ foo: bar })), (__glintY__) => {
+ *       applyModifier(__glintY__.element, resolve(baz)({}));
  *     });
  */
 export declare function emitComponent<T extends ComponentReturn<any, any>>(
@@ -81,7 +100,9 @@ export declare function emitComponent<T extends ComponentReturn<any, any>>(
 export declare function templateExpression<
   Signature extends AnyFunction = () => ComponentReturn<{}>,
   Context extends AnyContext = TemplateContext<void, {}, {}, void>,
->(f: (𝚪: Context, χ: never) => void): new () => InvokableInstance<Signature> & HasContext<Context>;
+>(
+  f: (__glintRef__: Context, __glintDSL__: never) => void,
+): new () => InvokableInstance<Signature> & HasContext<Context>;
 
 /*
  * Wraps a template body that's backed by a known value (typically a class), either
@@ -98,7 +119,7 @@ export declare function templateExpression<
  */
 export declare function templateForBackingValue<Args extends unknown[], Context extends AnyContext>(
   backingValue: abstract new (...args: Args) => HasContext<Context>,
-  body: (𝚪: Context, χ: never) => void,
+  body: (__glintRef__: Context, __glintDSL__: never) => void,
 ): abstract new () => unknown;
 
 /*
@@ -108,10 +129,10 @@ export declare function templateForBackingValue<Args extends unknown[], Context
  *
  * Is equivalent to:
  *
- *     yieldToBlock(𝚪, 'name')(foo, bar);
+ *     yieldToBlock(__glintRef__, 'name')(foo, bar);
  */
 export declare function yieldToBlock<Context extends AnyContext, K extends keyof Context['blocks']>(
-  𝚪: Context,
+  __glintRef__: Context,
   to: K,
 ): (...values: NonNullable<Context['blocks'][K]>) => void;
 
@@ -133,7 +154,10 @@ export declare function applySplattributes<
  *     <div foo={{bar}}></div>
  *     <AnotherComponent foo={{bar}} />
  */
-export declare function applyAttributes(element: Element, attrs: Record<string, AttrValue>): void;
+export declare function applyAttributes<T extends Element>(
+  element: T,
+  attrs: Partial<AttributesForElement<T>>,
+): void;
 
 /*
  * Applies a modifier to an element or component.

package/-private/dsl/lib.dom.augmentation.d.ts

@@ -0,0 +1,508 @@
+//generated by scrips/build-augmentations.mjs
+export const GlintSymbol: unique symbol = Symbol();
+
+declare global {
+  interface HTMLAnchorElement {
+    [GlintSymbol]: 'HTMLAnchorElement';
+  }
+
+  interface HTMLElement {
+    [GlintSymbol]: 'HTMLElement';
+  }
+
+  interface HTMLAreaElement {
+    [GlintSymbol]: 'HTMLAreaElement';
+  }
+
+  interface HTMLAudioElement {
+    [GlintSymbol]: 'HTMLAudioElement';
+  }
+
+  interface HTMLBaseElement {
+    [GlintSymbol]: 'HTMLBaseElement';
+  }
+
+  interface HTMLQuoteElement {
+    [GlintSymbol]: 'HTMLQuoteElement';
+  }
+
+  interface HTMLBodyElement {
+    [GlintSymbol]: 'HTMLBodyElement';
+  }
+
+  interface HTMLBRElement {
+    [GlintSymbol]: 'HTMLBRElement';
+  }
+
+  interface HTMLButtonElement {
+    [GlintSymbol]: 'HTMLButtonElement';
+  }
+
+  interface HTMLCanvasElement {
+    [GlintSymbol]: 'HTMLCanvasElement';
+  }
+
+  interface HTMLTableCaptionElement {
+    [GlintSymbol]: 'HTMLTableCaptionElement';
+  }
+
+  interface HTMLTableColElement {
+    [GlintSymbol]: 'HTMLTableColElement';
+  }
+
+  interface HTMLDataElement {
+    [GlintSymbol]: 'HTMLDataElement';
+  }
+
+  interface HTMLDataListElement {
+    [GlintSymbol]: 'HTMLDataListElement';
+  }
+
+  interface HTMLModElement {
+    [GlintSymbol]: 'HTMLModElement';
+  }
+
+  interface HTMLDetailsElement {
+    [GlintSymbol]: 'HTMLDetailsElement';
+  }
+
+  interface HTMLDialogElement {
+    [GlintSymbol]: 'HTMLDialogElement';
+  }
+
+  interface HTMLDivElement {
+    [GlintSymbol]: 'HTMLDivElement';
+  }
+
+  interface HTMLDListElement {
+    [GlintSymbol]: 'HTMLDListElement';
+  }
+
+  interface HTMLEmbedElement {
+    [GlintSymbol]: 'HTMLEmbedElement';
+  }
+
+  interface HTMLFieldSetElement {
+    [GlintSymbol]: 'HTMLFieldSetElement';
+  }
+
+  interface HTMLFormElement {
+    [GlintSymbol]: 'HTMLFormElement';
+  }
+
+  interface HTMLHeadingElement {
+    [GlintSymbol]: 'HTMLHeadingElement';
+  }
+
+  interface HTMLHeadElement {
+    [GlintSymbol]: 'HTMLHeadElement';
+  }
+
+  interface HTMLHRElement {
+    [GlintSymbol]: 'HTMLHRElement';
+  }
+
+  interface HTMLHtmlElement {
+    [GlintSymbol]: 'HTMLHtmlElement';
+  }
+
+  interface HTMLIFrameElement {
+    [GlintSymbol]: 'HTMLIFrameElement';
+  }
+
+  interface HTMLImageElement {
+    [GlintSymbol]: 'HTMLImageElement';
+  }
+
+  interface HTMLInputElement {
+    [GlintSymbol]: 'HTMLInputElement';
+  }
+
+  interface HTMLLabelElement {
+    [GlintSymbol]: 'HTMLLabelElement';
+  }
+
+  interface HTMLLegendElement {
+    [GlintSymbol]: 'HTMLLegendElement';
+  }
+
+  interface HTMLLIElement {
+    [GlintSymbol]: 'HTMLLIElement';
+  }
+
+  interface HTMLLinkElement {
+    [GlintSymbol]: 'HTMLLinkElement';
+  }
+
+  interface HTMLMapElement {
+    [GlintSymbol]: 'HTMLMapElement';
+  }
+
+  interface HTMLMenuElement {
+    [GlintSymbol]: 'HTMLMenuElement';
+  }
+
+  interface HTMLMetaElement {
+    [GlintSymbol]: 'HTMLMetaElement';
+  }
+
+  interface HTMLMeterElement {
+    [GlintSymbol]: 'HTMLMeterElement';
+  }
+
+  interface HTMLObjectElement {
+    [GlintSymbol]: 'HTMLObjectElement';
+  }
+
+  interface HTMLOListElement {
+    [GlintSymbol]: 'HTMLOListElement';
+  }
+
+  interface HTMLOptGroupElement {
+    [GlintSymbol]: 'HTMLOptGroupElement';
+  }
+
+  interface HTMLOptionElement {
+    [GlintSymbol]: 'HTMLOptionElement';
+  }
+
+  interface HTMLOutputElement {
+    [GlintSymbol]: 'HTMLOutputElement';
+  }
+
+  interface HTMLParagraphElement {
+    [GlintSymbol]: 'HTMLParagraphElement';
+  }
+
+  interface HTMLPictureElement {
+    [GlintSymbol]: 'HTMLPictureElement';
+  }
+
+  interface HTMLPreElement {
+    [GlintSymbol]: 'HTMLPreElement';
+  }
+
+  interface HTMLProgressElement {
+    [GlintSymbol]: 'HTMLProgressElement';
+  }
+
+  interface HTMLScriptElement {
+    [GlintSymbol]: 'HTMLScriptElement';
+  }
+
+  interface HTMLSelectElement {
+    [GlintSymbol]: 'HTMLSelectElement';
+  }
+
+  interface HTMLSlotElement {
+    [GlintSymbol]: 'HTMLSlotElement';
+  }
+
+  interface HTMLSourceElement {
+    [GlintSymbol]: 'HTMLSourceElement';
+  }
+
+  interface HTMLSpanElement {
+    [GlintSymbol]: 'HTMLSpanElement';
+  }
+
+  interface HTMLStyleElement {
+    [GlintSymbol]: 'HTMLStyleElement';
+  }
+
+  interface HTMLTableElement {
+    [GlintSymbol]: 'HTMLTableElement';
+  }
+
+  interface HTMLTableSectionElement {
+    [GlintSymbol]: 'HTMLTableSectionElement';
+  }
+
+  interface HTMLTableCellElement {
+    [GlintSymbol]: 'HTMLTableCellElement';
+  }
+
+  interface HTMLTemplateElement {
+    [GlintSymbol]: 'HTMLTemplateElement';
+  }
+
+  interface HTMLTextAreaElement {
+    [GlintSymbol]: 'HTMLTextAreaElement';
+  }
+
+  interface HTMLTimeElement {
+    [GlintSymbol]: 'HTMLTimeElement';
+  }
+
+  interface HTMLTitleElement {
+    [GlintSymbol]: 'HTMLTitleElement';
+  }
+
+  interface HTMLTableRowElement {
+    [GlintSymbol]: 'HTMLTableRowElement';
+  }
+
+  interface HTMLTrackElement {
+    [GlintSymbol]: 'HTMLTrackElement';
+  }
+
+  interface HTMLUListElement {
+    [GlintSymbol]: 'HTMLUListElement';
+  }
+
+  interface HTMLVideoElement {
+    [GlintSymbol]: 'HTMLVideoElement';
+  }
+
+  interface SVGAElement {
+    [GlintSymbol]: 'SVGAElement';
+  }
+
+  interface SVGAnimateElement {
+    [GlintSymbol]: 'SVGAnimateElement';
+  }
+
+  interface SVGAnimateMotionElement {
+    [GlintSymbol]: 'SVGAnimateMotionElement';
+  }
+
+  interface SVGAnimateTransformElement {
+    [GlintSymbol]: 'SVGAnimateTransformElement';
+  }
+
+  interface SVGCircleElement {
+    [GlintSymbol]: 'SVGCircleElement';
+  }
+
+  interface SVGClipPathElement {
+    [GlintSymbol]: 'SVGClipPathElement';
+  }
+
+  interface SVGDefsElement {
+    [GlintSymbol]: 'SVGDefsElement';
+  }
+
+  interface SVGDescElement {
+    [GlintSymbol]: 'SVGDescElement';
+  }
+
+  interface SVGEllipseElement {
+    [GlintSymbol]: 'SVGEllipseElement';
+  }
+
+  interface SVGFEBlendElement {
+    [GlintSymbol]: 'SVGFEBlendElement';
+  }
+
+  interface SVGFEColorMatrixElement {
+    [GlintSymbol]: 'SVGFEColorMatrixElement';
+  }
+
+  interface SVGFEComponentTransferElement {
+    [GlintSymbol]: 'SVGFEComponentTransferElement';
+  }
+
+  interface SVGFECompositeElement {
+    [GlintSymbol]: 'SVGFECompositeElement';
+  }
+
+  interface SVGFEConvolveMatrixElement {
+    [GlintSymbol]: 'SVGFEConvolveMatrixElement';
+  }
+
+  interface SVGFEDiffuseLightingElement {
+    [GlintSymbol]: 'SVGFEDiffuseLightingElement';
+  }
+
+  interface SVGFEDisplacementMapElement {
+    [GlintSymbol]: 'SVGFEDisplacementMapElement';
+  }
+
+  interface SVGFEDistantLightElement {
+    [GlintSymbol]: 'SVGFEDistantLightElement';
+  }
+
+  interface SVGFEDropShadowElement {
+    [GlintSymbol]: 'SVGFEDropShadowElement';
+  }
+
+  interface SVGFEFloodElement {
+    [GlintSymbol]: 'SVGFEFloodElement';
+  }
+
+  interface SVGFEFuncAElement {
+    [GlintSymbol]: 'SVGFEFuncAElement';
+  }
+
+  interface SVGFEFuncBElement {
+    [GlintSymbol]: 'SVGFEFuncBElement';
+  }
+
+  interface SVGFEFuncGElement {
+    [GlintSymbol]: 'SVGFEFuncGElement';
+  }
+
+  interface SVGFEFuncRElement {
+    [GlintSymbol]: 'SVGFEFuncRElement';
+  }
+
+  interface SVGFEGaussianBlurElement {
+    [GlintSymbol]: 'SVGFEGaussianBlurElement';
+  }
+
+  interface SVGFEImageElement {
+    [GlintSymbol]: 'SVGFEImageElement';
+  }
+
+  interface SVGFEMergeElement {
+    [GlintSymbol]: 'SVGFEMergeElement';
+  }
+
+  interface SVGFEMergeNodeElement {
+    [GlintSymbol]: 'SVGFEMergeNodeElement';
+  }
+
+  interface SVGFEMorphologyElement {
+    [GlintSymbol]: 'SVGFEMorphologyElement';
+  }
+
+  interface SVGFEOffsetElement {
+    [GlintSymbol]: 'SVGFEOffsetElement';
+  }
+
+  interface SVGFEPointLightElement {
+    [GlintSymbol]: 'SVGFEPointLightElement';
+  }
+
+  interface SVGFESpecularLightingElement {
+    [GlintSymbol]: 'SVGFESpecularLightingElement';
+  }
+
+  interface SVGFESpotLightElement {
+    [GlintSymbol]: 'SVGFESpotLightElement';
+  }
+
+  interface SVGFETileElement {
+    [GlintSymbol]: 'SVGFETileElement';
+  }
+
+  interface SVGFETurbulenceElement {
+    [GlintSymbol]: 'SVGFETurbulenceElement';
+  }
+
+  interface SVGFilterElement {
+    [GlintSymbol]: 'SVGFilterElement';
+  }
+
+  interface SVGForeignObjectElement {
+    [GlintSymbol]: 'SVGForeignObjectElement';
+  }
+
+  interface SVGGElement {
+    [GlintSymbol]: 'SVGGElement';
+  }
+
+  interface SVGImageElement {
+    [GlintSymbol]: 'SVGImageElement';
+  }
+
+  interface SVGLineElement {
+    [GlintSymbol]: 'SVGLineElement';
+  }
+
+  interface SVGLinearGradientElement {
+    [GlintSymbol]: 'SVGLinearGradientElement';
+  }
+
+  interface SVGMarkerElement {
+    [GlintSymbol]: 'SVGMarkerElement';
+  }
+
+  interface SVGMaskElement {
+    [GlintSymbol]: 'SVGMaskElement';
+  }
+
+  interface SVGMetadataElement {
+    [GlintSymbol]: 'SVGMetadataElement';
+  }
+
+  interface SVGMPathElement {
+    [GlintSymbol]: 'SVGMPathElement';
+  }
+
+  interface SVGPathElement {
+    [GlintSymbol]: 'SVGPathElement';
+  }
+
+  interface SVGPatternElement {
+    [GlintSymbol]: 'SVGPatternElement';
+  }
+
+  interface SVGPolygonElement {
+    [GlintSymbol]: 'SVGPolygonElement';
+  }
+
+  interface SVGPolylineElement {
+    [GlintSymbol]: 'SVGPolylineElement';
+  }
+
+  interface SVGRadialGradientElement {
+    [GlintSymbol]: 'SVGRadialGradientElement';
+  }
+
+  interface SVGRectElement {
+    [GlintSymbol]: 'SVGRectElement';
+  }
+
+  interface SVGScriptElement {
+    [GlintSymbol]: 'SVGScriptElement';
+  }
+
+  interface SVGSetElement {
+    [GlintSymbol]: 'SVGSetElement';
+  }
+
+  interface SVGStopElement {
+    [GlintSymbol]: 'SVGStopElement';
+  }
+
+  interface SVGStyleElement {
+    [GlintSymbol]: 'SVGStyleElement';
+  }
+
+  interface SVGSVGElement {
+    [GlintSymbol]: 'SVGSVGElement';
+  }
+
+  interface SVGSwitchElement {
+    [GlintSymbol]: 'SVGSwitchElement';
+  }
+
+  interface SVGSymbolElement {
+    [GlintSymbol]: 'SVGSymbolElement';
+  }
+
+  interface SVGTextElement {
+    [GlintSymbol]: 'SVGTextElement';
+  }
+
+  interface SVGTextPathElement {
+    [GlintSymbol]: 'SVGTextPathElement';
+  }
+
+  interface SVGTitleElement {
+    [GlintSymbol]: 'SVGTitleElement';
+  }
+
+  interface SVGTSpanElement {
+    [GlintSymbol]: 'SVGTSpanElement';
+  }
+
+  interface SVGUseElement {
+    [GlintSymbol]: 'SVGUseElement';
+  }
+
+  interface SVGViewElement {
+    [GlintSymbol]: 'SVGViewElement';
+  }
+}

package/-private/dsl/types.d.ts

@@ -1,3 +1,7 @@
+import { HtmlElementAttributes, SvgElementAttributes } from './elements';
+import { AttrValue } from '../index';
+import { GlintSymbol } from './lib.dom.augmentation';
+
 /**
  * A utility for constructing the type of an environment's `resolveOrReturn` from
  * the type of its `resolve` function.
@@ -9,9 +13,25 @@ export type ResolveOrReturn<T> = T & (<U>(item: U) => () => U);
  * NOTE: This will return a union for elements that exist both in HTML and SVG. Technically, this will be too permissive.
  */
 export type ElementForTagName<Name extends string> = Name extends keyof HTMLElementTagNameMap
-  ? Name extends keyof SVGElementTagNameMap
-    ? HTMLElementTagNameMap[Name] & SVGElementTagNameMap[Name]
-    : HTMLElementTagNameMap[Name]
-  : Name extends keyof SVGElementTagNameMap
-    ? SVGElementTagNameMap[Name]
-    : Element;
+  ? HTMLElementTagNameMap[Name]
+  : Element;
+
+export type SVGElementForTagName<Name extends string> = Name extends keyof SVGElementTagNameMap
+  ? SVGElementTagNameMap[Name]
+  : Element;
+
+export type MathMlElementForTagName<Name extends string> =
+  Name extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[Name] : Element;
+
+type WithDataAttributes<T> = T & Record<`data-${string}`, AttrValue>;
+
+export type AttributesForElement<
+  Elem extends Element,
+  K = Elem[typeof GlintSymbol],
+> = K extends keyof HtmlElementAttributes.HtmlElements
+  ? WithDataAttributes<HtmlElementAttributes.HtmlElements[K]>
+  : K extends keyof SvgElementAttributes.SvgElements
+    ? WithDataAttributes<SvgElementAttributes.SvgElements[K]>
+    : K extends keyof SvgElementAttributes.SvgElements
+      ? WithDataAttributes<SvgElementAttributes.SvgElements[K]>
+      : Record<string, AttrValue>;

package/package.json

@@ -1,11 +1,19 @@
 {
   "name": "@glint/template",
-  "version": "1.4.1-unstable.b6f19ff",
+  "version": "1.4.1-unstable.bb2c7cd",
   "repository": "typed-ember/glint",
   "description": "Type definitions to back typechecking for Glimmer templates",
   "license": "MIT",
   "author": "Dan Freeman (https://github.com/dfreeman)",
   "types": "-private/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./-private/index.d.ts"
+    },
+    "./*": {
+      "types": "./*.d.ts"
+    }
+  },
   "scripts": {
     "test": "echo 'no standalone tests within this project'",
     "test:typecheck": "tsc --project __tests__",
@@ -18,9 +26,15 @@
   ],
   "devDependencies": {
     "@glimmer/component": "^1.1.2",
-    "@types/ember__component": "~4.0.8",
     "expect-type": "^0.15.0",
-    "sums-up": "^2.1.0"
+    "sums-up": "^2.1.0",
+    "ember-source": "^6.2.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"
   },
   "publishConfig": {
     "access": "public"