Skip to content

Commit ee3b5b0

Browse files
sergey-panovsergey-panov
committed
Convert to v2, refactor to use static imports, TS
1 parent 8f65879 commit ee3b5b0

File tree

87 files changed

+12076
-7732
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+12076
-7732
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,15 @@ jobs:
2929
cache: pnpm
3030
- name: Install Dependencies
3131
run: pnpm install --frozen-lockfile
32-
- name: Lint
32+
- name: Lint Addon
3333
run: pnpm lint
34+
working-directory: addon
35+
- name: Lint Test App
36+
run: pnpm lint
37+
working-directory: test-app
3438
- name: Run Tests
3539
run: pnpm test:ember
40+
working-directory: test-app
3641

3742
floating:
3843
name: "Floating Dependencies"

‎.github/workflows/publish.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ jobs:
5353
- run: pnpm install --frozen-lockfile
5454
- name: npm publish
5555
run: pnpm release-plan publish
56+
working-directory: addon
5657

5758
env:
5859
GITHUB_AUTH: ${{ secrets.GITHUB_TOKEN }}

‎.gitignore‎

Lines changed: 4 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,5 @@
1-
# See https://help.github.com/ignore-files/ for more about ignoring files.
1+
node_modules
22

3-
# compiled output
4-
/dist/
5-
/tmp/
6-
7-
# dependencies
8-
/bower_components/
9-
/node_modules/
10-
11-
# misc
12-
/.env*
13-
/.pnp*
14-
/.sass-cache
15-
/.eslintcache
16-
/connect.lock
17-
/coverage/
18-
/libpeerconnection.log
19-
/npm-debug.log*
20-
/testem.log
21-
/yarn-error.log
22-
23-
# ember-try
24-
/.node_modules.ember-try/
25-
/bower.json.ember-try
26-
/npm-shrinkwrap.json.ember-try
27-
/package.json.ember-try
28-
/package-lock.json.ember-try
29-
/yarn.lock.ember-try
30-
31-
# broccoli-debug
32-
/DEBUG/
3+
.pnpm-debug.log
4+
.DS_Store
5+
.idea

‎README.md‎

Lines changed: 57 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
[![Build Status](https://github.com/ronco/ember-cli-head/workflows/Build/badge.svg?branch=master)](https://github.com/ronco/ember-cli-head/actions?query=branch%3Amaster+workflow%3A%22Build%22)
2-
31
# ember-cli-head
42

53
This addon lets you populate `<head>` tag from your Ember code without any direct hacky DOM manipulation. It also provides [ember-cli-fastboot](https://github.com/ember-fastboot/ember-cli-fastboot) compatibility for generating head tags in server-rendered apps.
@@ -25,54 +23,36 @@ ember install ember-cli-head
2523

2624
Add `<HeadLayout />` to the top of your application template.
2725

28-
```handlebars
29-
{{!-- app/templates/application.hbs --}}
30-
31-
<HeadLayout />
32-
33-
{{outlet}}
34-
```
26+
```gjs
27+
// app/templates/application.gjs
3528
29+
import { HeadLayout } from 'ember-cli-head';
3630
37-
### Version
38-
39-
Take into account that version >= 0.3 of this addon require Ember 2.10+ and fastboot >=1.0.rc1. Please use 0.2.X if you don't fulfill both requirements.
40-
41-
42-
## Usage
31+
<template>
32+
<HeadLayout>
33+
<meta property="og:title" content="My App">
34+
</HeadLayout>
4335
44-
### Head template
45-
46-
By installing this addon, you will find a new template added to your app, called `head`:
47-
48-
```
49-
app/templates/head.hbs
36+
{{outlet}}
37+
</template>
5038
```
5139

52-
The contents of this template will be inserted into the `<head>` element of the page.
53-
54-
55-
### Head data service
56-
57-
The addon provides `model` that is scoped to the `head` template. The `model` is actually an alias of the `head-data` service. You can set whatever data you want to be available to the `head` template on this service.
58-
59-
⚠️ Warning for Octane apps
60-
61-
Because `model` refers to the `head-data` service (and not what a route's `model` hook returns), it is important to use `this.model` (not `@model`) in the `head` template.
62-
40+
The contents of HeadLayout's defaukt block will be inserted into the `<head>` element of the page.
6341

6442
## Example
6543

6644
### Setting content data in route
6745

68-
```javascript
69-
// app/routes/application.js
46+
```typescript
47+
// app/routes/application.ts
7048

7149
import Route from '@ember/routing/route';
72-
import { inject as service } from '@ember/service';
50+
import { service } from '@ember/service';
51+
52+
import HeadDataService from 'app/services/head-data';
7353

7454
export default class ApplicationRoute extends Route {
75-
@service headData;
55+
@service declare headData: HeadDataService;
7656

7757
afterModel() {
7858
this.headData.title = 'Demo App';
@@ -82,25 +62,49 @@ export default class ApplicationRoute extends Route {
8262

8363
### Declare `title` as a tracked property on the `head-data` service
8464

85-
```javascript
86-
// app/services/head-data.js
65+
```typescript
66+
// app/services/head-data.ts
8767

68+
import Route from '@ember/routing/route';
8869
import Service from '@ember/service';
89-
import { tracked } from '@glimmer/tracking';
70+
import { tracked } from '@glimmer/tracking';}
9071

9172
export default class HeadDataService extends Service {
92-
@tracked title;
73+
@tracked declare title: string;
9374
}
9475
```
9576

96-
### Using the service in head template
77+
### Using the service in the component
78+
79+
```gts
80+
// app/services/head-data.gts
81+
82+
import { service } from '@ember/service';
83+
import Component from '@glimmer/component';
9784
98-
```handlebars
99-
{{!-- app/templates/head.hbs --}}
85+
export default class Head extends Component {
86+
@service('head-data') declare model: HeadDataService;
10087
101-
<meta property="og:title" content={{this.model.title}} />
88+
<template>
89+
<meta property="og:title" content={{this.model.title}} />
90+
</template>
91+
}
10292
```
10393

94+
### Using the component in the template
95+
96+
```gjs
97+
// app/templates/application.gts
98+
99+
import { HeadLayout } from 'ember-cli-head';
100+
import Head from 'app/components/head';
101+
102+
<template>
103+
<HeadLayout><Head /></HeadLayout>
104+
105+
{{outlet}}
106+
</template>
107+
```
104108

105109
### Checking head tag
106110

@@ -145,6 +149,15 @@ module.exports = function(environment) {
145149

146150
If you use `suppressBrowserRender`, the content of `<head>` will be the static FastBoot-rendered content throughout your app's lifecycle.
147151

152+
## Upgrade from 2.x to 3.x
153+
154+
As of 3.x you need `ember-auto-import` installed and configured to use this addon with Ember CLI applications. See the [ember-auto-import](https://github.com/embroider-build/ember-auto-import) documentation for details.
155+
156+
The addon doesn't provide any boilerplate code anymore. You will need to create your own head component and inject the `headData` service.
157+
158+
1. Move your head.hbs template to components.
159+
2. In your new head component, add `@service headData` injection.
160+
3. If you don't have head-data service, you will have to create it.
148161

149162
## Upgrade to 0.4.x
150163

‎addon/.gitignore‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# The authoritative copies of these live in the monorepo root (because they're
2+
# more useful on github that way), but the build copies them into here so they
3+
# will also appear in published NPM packages.
4+
/README.md
5+
/LICENSE.md
6+
7+
# compiled output
8+
/dist/
9+
/tmp/
10+
/declarations/
11+
12+
# dependencies
13+
/node_modules/
14+
15+
# misc
16+
/.env*
17+
/.pnp*
18+
/.sass-cache
19+
/.eslintcache
20+
/connect.lock
21+
/coverage/
22+
/libpeerconnection.log
23+
/npm-debug.log*
24+
/testem.log
25+
/yarn-error.log
26+
27+
# ember-try
28+
/.node_modules.ember-try/
29+
/npm-shrinkwrap.json.ember-try
30+
/package.json.ember-try
31+
/package-lock.json.ember-try
32+
/yarn.lock.ember-try
33+
34+
# broccoli-debug
35+
/DEBUG/

.prettierignore renamed to addon/.prettierignore

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
/tmp/
88

99
# dependencies
10-
/bower_components/
1110
/node_modules/
1211

1312
# misc
@@ -18,7 +17,6 @@
1817

1918
# ember-try
2019
/.node_modules.ember-try/
21-
/bower.json.ember-try
2220
/npm-shrinkwrap.json.ember-try
2321
/package.json.ember-try
2422
/package-lock.json.ember-try

‎addon/.prettierrc.cjs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use strict';
2+
3+
module.exports = {
4+
plugins: ['prettier-plugin-ember-template-tag'],
5+
overrides: [
6+
{
7+
files: '*.{js,gjs,ts,gts,mjs,mts,cjs,cts}',
8+
options: {
9+
singleQuote: true,
10+
templateSingleQuote: false,
11+
},
12+
},
13+
],
14+
};

.template-lintrc.js renamed to addon/.template-lintrc.js

File renamed without changes.

‎addon/addon-main.cjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
const { addonV1Shim } = require('@embroider/addon-shim');
2+
module.exports = addonV1Shim(__dirname);

‎addon/babel.config.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"plugins": [
3+
[
4+
"@babel/plugin-transform-typescript",
5+
{
6+
"allExtensions": true,
7+
"onlyRemoveTypeImports": true,
8+
"allowDeclareFields": true
9+
}
10+
],
11+
[
12+
"module:decorator-transforms",
13+
{ "runtime": { "import": "decorator-transforms/runtime" } }
14+
]
15+
]
16+
}

0 commit comments

Comments
 (0)