diff --git a/README.md b/README.md index ceb8fe68..3a527855 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,29 @@ that accepts "contextual components" as arguments: {{!-- ...or more directly... --}} <@tag class="my-tag">hello world! ``` +### Glint usage + +Helpers `{{element}}` has proper [Glint](https://github.com/typed-ember/glint) types, +which allow you when using TypeScript to get strict type checking in your templates. + +Unless you are using [strict mode](http://emberjs.github.io/rfcs/0496-handlebars-strict-mode.html) templates +(via [first class component templates](http://emberjs.github.io/rfcs/0779-first-class-component-templates.html)), +you need to import the addon's Glint template registry and extend your app's registry declaration +as described in the [Using Addons](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons) documentation: + +```ts +import '@glint/environment-ember-loose'; +import type EmberElementHelperRegistry from 'ember-element-helper/template-registry'; +declare module '@glint/environment-ember-loose/registry' { + export default interface Registry extends EmberElementHelperRegistry, /* other addon registries */ { + // local entries + } +} +``` + +> **Note:** Glint itself is still under active development, and as such breaking changes might occur. +> Therefore, Glint support by this addon is also considered experimental, and not covered by our SemVer contract! + Contributing ------------------------------------------------------------------------------ diff --git a/ember-element-helper/src/helpers/element.d.ts b/ember-element-helper/src/helpers/element.d.ts new file mode 100644 index 00000000..8b9b2122 --- /dev/null +++ b/ember-element-helper/src/helpers/element.d.ts @@ -0,0 +1,11 @@ +import Helper from '@ember/component/helper'; +import type { ComponentReturn } from '@glint/template/-private/integration'; + +interface ElementHelperSignature { + Args: { + Positional: [tagName: keyof HTMLElementTagNameMap]; + }; + Return: (...positional: unknown[]) => ComponentReturn; +} + +export default class ElementHelper extends Helper {} \ No newline at end of file diff --git a/ember-element-helper/template-registry.d.ts b/ember-element-helper/template-registry.d.ts new file mode 100644 index 00000000..8c0f0db1 --- /dev/null +++ b/ember-element-helper/template-registry.d.ts @@ -0,0 +1,5 @@ +import type ElementHelper from "./src/helpers/element"; + +export default interface EmberElementHelperRegistry { + 'element': typeof ElementHelper; +} \ No newline at end of file diff --git a/package.json b/package.json index 0f4a7496..5126a843 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,12 @@ "yarn": "1.22.17" }, "devDependencies": { + "@glint/template": "^1.0.0-beta.3", "concurrently": "^7.2.2" }, + "peerDependencies": { + "@glint/template": "^1.0.0-beta.3" + }, "resolutions": { "eslint-plugin-decorator-position": "^4.0.0" } diff --git a/yarn.lock b/yarn.lock index 46eca50f..70f4eaf6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2389,6 +2389,11 @@ "@glimmer/interfaces" "^0.42.2" "@glimmer/util" "^0.42.2" +"@glint/template@1.0.0-beta.3": + version "1.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@glint/template/-/template-1.0.0-beta.3.tgz#5866c0ffc1d8273f2e9b2fd186b65f5d4e6dbc15" + integrity sha512-jxn4yGzNZ1A4NGzvjYht0NlVziHyzjj/rm4rGsP1mVUO2Dd/LHhhxR6NUlSw9MFDZ0fCinULVwQtAKQLEpIpPw== + "@handlebars/parser@~2.0.0": version "2.0.0" resolved "https://registry.yarnpkg.com/@handlebars/parser/-/parser-2.0.0.tgz#5e8b7298f31ff8f7b260e6b7363c7e9ceed7d9c5"