From 793998dc5f5cd9ba4385737ab34799a2b0136a3b Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 7 Nov 2023 12:10:21 +0100 Subject: [PATCH 01/14] docs: add template-imports page --- docs/ember/template-imports.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 docs/ember/template-imports.md diff --git a/docs/ember/template-imports.md b/docs/ember/template-imports.md new file mode 100644 index 000000000..e69de29bb From 36f20c8cdf92216a4b19a885aa01d7504636ab47 Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 7 Nov 2023 12:10:31 +0100 Subject: [PATCH 02/14] docs: add installation section --- docs/ember/template-imports.md | 44 ++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/docs/ember/template-imports.md b/docs/ember/template-imports.md index e69de29bb..34e6e5898 100644 --- a/docs/ember/template-imports.md +++ b/docs/ember/template-imports.md @@ -0,0 +1,44 @@ +If you're adding Glint into a project that uses `ember-template-imports`, there are several key factors to keep in mind. + +## Installation + +In addition to the `@glint/core`, `@glint/template` and `@glint/environment-ember-loose` packages, you also need to install the `@glint/environment-ember-template-imports` package and configure it in `tsconfig.json` under `glint.environment`: + +{% tabs %} +{% tab title="Yarn" %} + +```sh +yarn add --dev @glint/core @glint/template @glint/environment-ember-loose @glint/environment-ember-template-imports +``` + +{% endtab %} +{% tab title="npm" %} + +```sh +npm install -D @glint/core @glint/template @glint/environment-ember-loose @glint/environment-ember-template-imports +``` + +{% endtab %} +{% endtabs %} + +{% code title="tsconfig.json" %} + +```javascript +{ + "compilerOptions": { /* ... */ }, + "glint": { + "environment": [ + "ember-loose", + "ember-template-imports", + ] + } +} +``` + +Additionally, ensure you've added the following statement somewhere in your project's source files or ambient type declarations: + +```typescript +import '@glint/environment-ember-template-imports'; +``` + +{% endcode %} From 07d272073435dbaa1a937998dc0809f46c863e76 Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 7 Nov 2023 12:10:43 +0100 Subject: [PATCH 03/14] docs: add template-only components section --- docs/ember/template-imports.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/docs/ember/template-imports.md b/docs/ember/template-imports.md index 34e6e5898..0ad6fc52a 100644 --- a/docs/ember/template-imports.md +++ b/docs/ember/template-imports.md @@ -42,3 +42,30 @@ import '@glint/environment-ember-template-imports'; ``` {% endcode %} + +## Template-Only Components + +When using `ember-template-imports`, you can define a backing module using the `TOC` type: + +{% code title="app/components/shout.gts %} + +```typescript +import type { TOC } From '@ember/component/template-only'; + +interface ShoutSignature { + Element: HTMLDivElement; + Args: { message: string }; + Blocks: { + default: [shoutedMessage: string]; + }; +} + +const Shout: TOC = ; +export default Shout; +``` + +{% endcode %} From 7a7a971bddf22bcaf8c4f6194900edaa6607316e Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 7 Nov 2023 13:36:45 +0100 Subject: [PATCH 04/14] docs: add link to template-imports page --- docs/ember/template-only-components.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/ember/template-only-components.md b/docs/ember/template-only-components.md index 6df41ee59..04c308d18 100644 --- a/docs/ember/template-only-components.md +++ b/docs/ember/template-only-components.md @@ -26,6 +26,13 @@ declare module '@glint/environment-ember-loose/registry' { Note that the runtime content of this module (effectively `export default templateOnlyComponent();`) is exactly what Ember generates at build time when creating a backing module for a template-only component. +{% hint style="info" %} + +Using `ember-template-imports`? See [Ember: Template Imports][etitoc] on how to create a backing module for a template-import template-only component. + +[etitoc]: ../ember/template-imports.md#template-only-components +{% endhint %} + Due to the way TypeScript works, it's not possible to have a generic signature for template-only components: ```typescript From 6ae0ac061deb02def68f05c048c0696ed940099f Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 7 Nov 2023 13:36:57 +0100 Subject: [PATCH 05/14] docs: add link to template-imports page --- docs/ember/installation.md | 28 ++++------------------------ 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/docs/ember/installation.md b/docs/ember/installation.md index 07b1ae820..5a97b0d47 100644 --- a/docs/ember/installation.md +++ b/docs/ember/installation.md @@ -35,27 +35,13 @@ npm install -D @glint/core @glint/template @glint/environment-ember-loose {% endcode %} -
+{% hint style="info" %} -Using ember-template-imports? +Using `ember-template-imports`? See [Ember: Template Imports][etii] for additional installation steps. -If you are using `ember-template-imports` in your project, you also need to install the `@glint/environment-ember-template-imports` package and configure it in `tsconfig.json` under `glint.environment`: +[etii]: ../ember/installation.md#installation -{% code title="tsconfig.json" %} -```json -{ - "compilerOptions": { /* ... */ }, - "glint": { - "environment": [ - "ember-loose", - "ember-template-imports", - ] - } -} -``` -{% endcode %} - -
+{% endhint %} Note that, by default, Glint will assume you want it to analyze all templates in the codebase that are covered by your `tsconfig.json`. To ignore any type errors up front so that you can incrementally migrate your project to typesafe templates, consider using [the `auto-glint-nocheck` script](https://github.com/typed-ember/glint/tree/main/packages/scripts#auto-glint-nocheck) to add [`@glint-nocheck` comments](../directives.md#glint-nocheck) to your existing templates that would produce errors. @@ -65,12 +51,6 @@ Finally, ensure you've added the following statement somewhere in your project's import '@glint/environment-ember-loose'; ``` -If using `ember-template-imports`, add a corresponding line for that environment as well: - -```typescript -import '@glint/environment-ember-template-imports'; -``` - You may also choose to disable TypeScript's "unused symbol" warnings in your editor, since Glint will flag any symbols that are actually unused, while `tsserver` won't understand any symbol usage that only occurs in templates. {% hint style="info" %} From 5238ecdd773511b58d4d2276f21a9da04f089a08 Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 7 Nov 2023 13:37:55 +0100 Subject: [PATCH 06/14] docs: remove introduction --- docs/ember/template-imports.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/ember/template-imports.md b/docs/ember/template-imports.md index 0ad6fc52a..cf0e4609d 100644 --- a/docs/ember/template-imports.md +++ b/docs/ember/template-imports.md @@ -1,5 +1,3 @@ -If you're adding Glint into a project that uses `ember-template-imports`, there are several key factors to keep in mind. - ## Installation In addition to the `@glint/core`, `@glint/template` and `@glint/environment-ember-loose` packages, you also need to install the `@glint/environment-ember-template-imports` package and configure it in `tsconfig.json` under `glint.environment`: From 2cf6b8cf7a4c24ba2a629ffb9451aa32d8a9165a Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 7 Nov 2023 13:41:34 +0100 Subject: [PATCH 07/14] docs: update code example --- docs/ember/template-imports.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/ember/template-imports.md b/docs/ember/template-imports.md index cf0e4609d..862c6c99d 100644 --- a/docs/ember/template-imports.md +++ b/docs/ember/template-imports.md @@ -58,9 +58,11 @@ interface ShoutSignature { }; } +louderPlease = (message: string) => message.toUpperCase(); + const Shout: TOC = ; export default Shout; From 5545cb32b3da7f288f157bc2d1ee5228c1fb12df Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 7 Nov 2023 13:42:44 +0100 Subject: [PATCH 08/14] docs: write introduction --- docs/ember/template-imports.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/ember/template-imports.md b/docs/ember/template-imports.md index 862c6c99d..651e69926 100644 --- a/docs/ember/template-imports.md +++ b/docs/ember/template-imports.md @@ -1,3 +1,5 @@ +When adding Glint to an Ember project with `ember-template-imports` installed, there are a few additional things to consider. + ## Installation In addition to the `@glint/core`, `@glint/template` and `@glint/environment-ember-loose` packages, you also need to install the `@glint/environment-ember-template-imports` package and configure it in `tsconfig.json` under `glint.environment`: From 1298923c18a7baaa15e853b709940831add2d48b Mon Sep 17 00:00:00 2001 From: Lukas Nys Date: Tue, 7 Nov 2023 15:57:29 +0100 Subject: [PATCH 09/14] Update docs/ember/template-imports.md Co-authored-by: Dan Freeman --- docs/ember/template-imports.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ember/template-imports.md b/docs/ember/template-imports.md index 651e69926..08573a39b 100644 --- a/docs/ember/template-imports.md +++ b/docs/ember/template-imports.md @@ -45,7 +45,7 @@ import '@glint/environment-ember-template-imports'; ## Template-Only Components -When using `ember-template-imports`, you can define a backing module using the `TOC` type: +When using `ember-template-imports`, you can declare the type of a `