Skip to content

Commit 608873a

Browse files
NullVoxPopuliNullVoxPopuli
authored
Merge pull request #107 from gossi/glint-support
Add glint support
2 parents 17c675e + eb41705 commit 608873a

File tree

27 files changed

+1116
-378
lines changed

27 files changed

+1116
-378
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ jobs:
5252
fail-fast: false
5353
matrix:
5454
try-scenario:
55-
- ember-lts-3.24
5655
- ember-lts-3.28
5756
- ember-lts-4.4
5857
- ember-lts-4.8
@@ -72,6 +71,33 @@ jobs:
7271
run: pnpm exec ember try:one ${{ matrix.try-scenario }} --skip-cleanup
7372
working-directory: test-app
7473

74+
typecheck:
75+
name: "${{ matrix.typescript-scenario }}"
76+
runs-on: ubuntu-latest
77+
needs: "test"
78+
timeout-minutes: 5
79+
continue-on-error: true
80+
strategy:
81+
fail-fast: true
82+
matrix:
83+
typescript-scenario:
84+
- typescript@4.8
85+
- typescript@4.9
86+
- typescript@5.0
87+
- typescript@5.1
88+
89+
steps:
90+
- name: Setup
91+
uses: wyvox/action@v1
92+
- name: "Change TS to ${{ matrix.typescript-scenario }}"
93+
run: "pnpm add --save-dev ${{ matrix.typescript-scenario}}"
94+
working-directory: ./test-app
95+
- name: "Type checking"
96+
run: |
97+
pnpm --filter "test-app*" exec tsc -v;
98+
pnpm --filter "test-app*" exec glint --version;
99+
pnpm --filter "test-app*" exec glint;
100+
75101
publish:
76102
name: Publish
77103
needs: test

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
# compiled output
44
dist/
5+
declarations/
56
tmp/
67

78
# dependencies

‎.npmrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
public-hoist-pattern[]=*prettier*
22
public-hoist-pattern[]=*eslint*
3-
public-hoist-pattern[]=!@typescript-eslint/*
3+
public-hoist-pattern[]=@typescript-eslint/*
44
public-hoist-pattern[]=*ember-template-lint*
55
public-hoist-pattern[]=*stylelint*
6+
public-hoist-pattern[]=*@glint*

‎README.md‎

Lines changed: 90 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
ember-element-helper
2-
==============================================================================
1+
# ember-element-helper
32

43
[![Build Status](https://github.com/tildeio/ember-element-helper/actions/workflows/ci.yml/badge.svg)](https://github.com/tildeio/ember-element-helper/actions/workflows/ci.yml)
54

@@ -18,15 +17,13 @@ this addon as a true polyfill for the feature, allowing the feature to be used
1817
on older Ember.js versions and be completely inert on newer versions where the
1918
official implementation is available.
2019

21-
Compatibility
22-
------------------------------------------------------------------------------
20+
## Compatibility
2321

2422
* Ember.js v3.24 or above
2523
* Ember CLI v3.24 or above
2624
* Node.js v12 or above
2725

28-
Limitations
29-
------------------------------------------------------------------------------
26+
## Limitations
3027

3128
This implementation has the following known limitations:
3229

@@ -52,15 +49,13 @@ This implementation has the following known limitations:
5249
which is first available on Ember 3.11. This is an Ember.js limitation,
5350
unrelated to this addon.
5451

55-
Installation
56-
------------------------------------------------------------------------------
52+
## Installation
5753

5854
```
5955
ember install ember-element-helper
6056
```
6157

62-
Usage
63-
------------------------------------------------------------------------------
58+
## Usage
6459

6560
```hbs
6661
{{#let (element this.tagName) as |Tag|}}
@@ -85,12 +80,93 @@ that accepts "contextual components" as arguments:
8580
<@tag class="my-tag">hello world!</@tag>
8681
```
8782

88-
Contributing
89-
------------------------------------------------------------------------------
83+
### Single File Components
84+
85+
Using the `(element)` helper with [first class component
86+
templates](http://emberjs.github.io/rfcs/0779-first-class-component-templates.html):
87+
88+
```gjs
89+
import { element } from 'ember-element-helper';
90+
91+
<template>
92+
{{#let (element @tagName) as |Tag|}}
93+
<Tag class="my-tag">hello world!</Tag>
94+
{{/let}}
95+
</template>
96+
```
97+
98+
### Glint Usage in Classic Mode
99+
100+
In order to use a typed `(element)` helper in classic mode, you need to import
101+
the addon's glint template registry and extend your app's registry declaration
102+
as described in the [Using
103+
Addons](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons)
104+
documentation:
105+
106+
```ts
107+
import '@glint/environment-ember-loose';
108+
import type EmberElementHelperRegistry from 'ember-element-helper/template-registry';
109+
110+
declare module '@glint/environment-ember-loose/registry' {
111+
export default interface Registry extends EmberElementHelperRegistry, /* other addon registries */ {
112+
// local entries
113+
}
114+
}
115+
```
116+
117+
> **Note:** Glint itself is still under active development, and as such breaking changes might occur.
118+
> Therefore, Glint support by this addon is also considered experimental, and not covered by our SemVer contract!
119+
120+
### Typing your Components
121+
122+
When your component accepts an element with the `(element)` helper, you want to
123+
give this argument a proper type. Here is how:
124+
125+
```ts
126+
import type { ElementSignature } from 'ember-element-helper';
127+
128+
interface YourComponentSignature<T extends string> {
129+
Element: HTMLSectionElement;
130+
Args: {
131+
element?: ElementSignature['Return'];
132+
};
133+
}
134+
```
135+
136+
When the `@element` argument influences the `Element` of your component:
137+
138+
```ts
139+
import type { ElementSignature, ElementFromTagName } from 'ember-element-helper';
140+
141+
interface YourComponentSignature<T extends string> {
142+
Element: ElementFromTagName<T>;
143+
Args: {
144+
element?: ElementSignature<T>['Return'];
145+
};
146+
}
147+
```
148+
149+
When your component already uses an element for a given condition. When
150+
the condition isn't met, a fallback element is used. The fallback can even be
151+
provided from the outside. Here is the type:
152+
153+
```ts
154+
import type { ElementSignature, ElementFromTagName } from 'ember-element-helper';
155+
156+
interface YourComponentSignature<
157+
T extends string = 'section'
158+
> {
159+
Element: HTMLButtonElement | HTMLAnchorElement | ElementFromTagName<T>;
160+
Args: {
161+
element?: ElementSignature<T>['Return'];
162+
};
163+
}
164+
```
165+
166+
## Contributing
90167

91168
See the [Contributing](CONTRIBUTING.md) guide for details.
92169

93-
License
94-
------------------------------------------------------------------------------
170+
## License
95171

96172
This project is licensed under the [MIT License](LICENSE.md).

‎ember-element-helper/README.md‎

Lines changed: 90 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
ember-element-helper
2-
==============================================================================
1+
# ember-element-helper
32

43
[![Build Status](https://github.com/tildeio/ember-element-helper/actions/workflows/ci.yml/badge.svg)](https://github.com/tildeio/ember-element-helper/actions/workflows/ci.yml)
54

@@ -18,15 +17,13 @@ this addon as a true polyfill for the feature, allowing the feature to be used
1817
on older Ember.js versions and be completely inert on newer versions where the
1918
official implementation is available.
2019

21-
Compatibility
22-
------------------------------------------------------------------------------
20+
## Compatibility
2321

2422
* Ember.js v3.24 or above
2523
* Ember CLI v3.24 or above
2624
* Node.js v12 or above
2725

28-
Limitations
29-
------------------------------------------------------------------------------
26+
## Limitations
3027

3128
This implementation has the following known limitations:
3229

@@ -52,15 +49,13 @@ This implementation has the following known limitations:
5249
which is first available on Ember 3.11. This is an Ember.js limitation,
5350
unrelated to this addon.
5451

55-
Installation
56-
------------------------------------------------------------------------------
52+
## Installation
5753

5854
```
5955
ember install ember-element-helper
6056
```
6157

62-
Usage
63-
------------------------------------------------------------------------------
58+
## Usage
6459

6560
```hbs
6661
{{#let (element this.tagName) as |Tag|}}
@@ -85,12 +80,93 @@ that accepts "contextual components" as arguments:
8580
<@tag class="my-tag">hello world!</@tag>
8681
```
8782

88-
Contributing
89-
------------------------------------------------------------------------------
83+
### Single File Components
84+
85+
Using the `(element)` helper with [first class component
86+
templates](http://emberjs.github.io/rfcs/0779-first-class-component-templates.html):
87+
88+
```gjs
89+
import { element } from 'ember-element-helper';
90+
91+
<template>
92+
{{#let (element @tagName) as |Tag|}}
93+
<Tag class="my-tag">hello world!</Tag>
94+
{{/let}}
95+
</template>
96+
```
97+
98+
### Glint Usage in Classic Mode
99+
100+
In order to use a typed `(element)` helper in classic mode, you need to import
101+
the addon's glint template registry and extend your app's registry declaration
102+
as described in the [Using
103+
Addons](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons)
104+
documentation:
105+
106+
```ts
107+
import '@glint/environment-ember-loose';
108+
import type EmberElementHelperRegistry from 'ember-element-helper/template-registry';
109+
110+
declare module '@glint/environment-ember-loose/registry' {
111+
export default interface Registry extends EmberElementHelperRegistry, /* other addon registries */ {
112+
// local entries
113+
}
114+
}
115+
```
116+
117+
> **Note:** Glint itself is still under active development, and as such breaking changes might occur.
118+
> Therefore, Glint support by this addon is also considered experimental, and not covered by our SemVer contract!
119+
120+
### Typing your Components
121+
122+
When your component accepts an element with the `(element)` helper, you want to
123+
give this argument a proper type. Here is how:
124+
125+
```ts
126+
import type { ElementSignature } from 'ember-element-helper';
127+
128+
interface YourComponentSignature<T extends string> {
129+
Element: HTMLSectionElement;
130+
Args: {
131+
element?: ElementSignature['Return'];
132+
};
133+
}
134+
```
135+
136+
When the `@element` argument influences the `Element` of your component:
137+
138+
```ts
139+
import type { ElementSignature, ElementFromTagName } from 'ember-element-helper';
140+
141+
interface YourComponentSignature<T extends string> {
142+
Element: ElementFromTagName<T>;
143+
Args: {
144+
element?: ElementSignature<T>['Return'];
145+
};
146+
}
147+
```
148+
149+
When your component already uses an element for a given condition. When
150+
the condition isn't met, a fallback element is used. The fallback can even be
151+
provided from the outside. Here is the type:
152+
153+
```ts
154+
import type { ElementSignature, ElementFromTagName } from 'ember-element-helper';
155+
156+
interface YourComponentSignature<
157+
T extends string = 'section'
158+
> {
159+
Element: HTMLButtonElement | HTMLAnchorElement | ElementFromTagName<T>;
160+
Args: {
161+
element?: ElementSignature<T>['Return'];
162+
};
163+
}
164+
```
165+
166+
## Contributing
90167

91168
See the [Contributing](CONTRIBUTING.md) guide for details.
92169

93-
License
94-
------------------------------------------------------------------------------
170+
## License
95171

96172
This project is licensed under the [MIT License](LICENSE.md).

‎ember-element-helper/babel.config.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"presets": ["@babel/preset-typescript"],
23
"plugins": [
34
"@embroider/addon-dev/template-colocation-plugin",
45
["@babel/plugin-proposal-decorators", { "legacy": true }],

0 commit comments

Comments
 (0)