Skip to content

Commit 0acf5f3

Browse files
committed
feat: just make it gjs already
1 parent 0ec7814 commit 0acf5f3

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

guides/release/components/template-tag-format.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ The following template-only component was created in a [previous section](../com
2222

2323
This layout can be turned into a template tag component by wrapping the code in a `<template>` tag and changing the file extension to `.gjs`.
2424

25-
```text {data-filename="app/components/avatar.gjs"}
25+
```gjs {data-filename="app/components/avatar.gjs"}
2626
<template>
2727
<aside>
2828
<div class="avatar" title={{@title}}>{{@initial}}</div>
@@ -32,7 +32,7 @@ This layout can be turned into a template tag component by wrapping the code in
3232

3333
The top-level template tag is exported as the default component from the file. You *can* write this export explicitly, but it's not necessary. The following example is equivalent to the previous one.
3434

35-
```text {data-filename="app/components/avatar.gjs"}
35+
```gjs {data-filename="app/components/avatar.gjs"}
3636
export default <template>
3737
<aside>
3838
<div class="avatar" title={{@title}}>{{@initial}}</div>
@@ -44,7 +44,7 @@ export default <template>
4444

4545
A `<template>` tag can also be embedded inside a class definition of a component. This is useful when you need to add state or other logic to your component. Take for example the following "Avatar" component, where a default title is added when the `title` argument is not provided.
4646

47-
```text {data-filename="app/components/avatar.gjs"}
47+
```gjs {data-filename="app/components/avatar.gjs"}
4848
import Component from '@glimmer/component';
4949
5050
export default class Avatar extends Component {
@@ -69,7 +69,7 @@ In Ember templates, **“invokables”** are things you can *invoke* in a templa
6969

7070
When making use of the "Avatar" component as defined before in a different component file, it first needs to be imported. This is done using the `import` statement, just like you would import any other JavaScript module.
7171

72-
```text {data-filename="app/components/message.gjs"}
72+
```gjs {data-filename="app/components/message.gjs"}
7373
import Avatar from './avatar';
7474
7575
<template>
@@ -114,7 +114,7 @@ For example, when moving the "Avatar" component to the `app/components/messages`
114114

115115
This quirk is no longer necessary with the template tag format. Instead, importing now works the same as importing any other JavaScript module.
116116

117-
```text {data-filename="app/components/avatar-usage.gjs"}
117+
```gjs {data-filename="app/components/avatar-usage.gjs"}
118118
import Avatar from './messages/avatar';
119119
120120
<template>
@@ -131,7 +131,7 @@ Importing helpers and modifiers from your own app also follows the same principl
131131

132132
Prior to the template tag format, helpers and modifiers were referenced based on their name in the "kebab-case" convention. For example, a `randomNumber` function as helper would be referenced as `{{random-number}}` in a template. In the new way of doing things, standard module import conventions are used. This means that the helper is referenced using the name it is exported as, which is `randomNumber` in this case.
133133

134-
```text {data-filename="app/components/random-number.gjs"}
134+
```gjs {data-filename="app/components/random-number.gjs"}
135135
import randomNumber from '../helpers/random-number';
136136
137137
<template>
@@ -145,7 +145,7 @@ Just as with components, helpers, and modifiers from your own app, external invo
145145

146146
The structure of files within Ember addons is mostly standardized. This means that the path to import from can be derived from the addon's name. For example, an addon that is named `ember-foo` will likely have its components, helpers, and modifiers available as default import from the following locations:
147147

148-
```text
148+
```gjs
149149
ember-foo/components/example-component
150150
ember-foo/helpers/example-helper
151151
ember-foo/modifiers/example-modifier
@@ -216,7 +216,7 @@ The template tag format follows JavaScript module syntax. Any value that isn't e
216216

217217
In the following example, a "Square" component is defined that calculates the square of a number. The `value` constant is defined locally, and the `square` helper function is only available within the component.
218218

219-
```text {data-filename="app/components/square.gjs"}
219+
```gjs {data-filename="app/components/square.gjs"}
220220
const value = 2;
221221
222222
function square(number) {
@@ -236,7 +236,7 @@ The template tag format allows defining multiple components within a single file
236236

237237
The following example defines a "CustomSelect" component that renders a `<select>` element with a list of options. The locally-defined "Option" component is used to render each option in the list.
238238

239-
```text {data-filename="app/components/custom-select.gjs"}
239+
```gjs {data-filename="app/components/custom-select.gjs"}
240240
const Option = <template>
241241
<option selected={{@selected}} value={{@value}}>
242242
{{@value}}
@@ -265,7 +265,7 @@ Historically, Ember's integration tests have been written using the `hbs` tagged
265265

266266
The following example showcases how the "Avatar" component can be tested using the template tag format.
267267

268-
```text {data-filename="tests/integration/components/avatar-test.gjs"}
268+
```gjs {data-filename="tests/integration/components/avatar-test.gjs"}
269269
import Avatar from 'app/components/avatar';
270270
import { module, test } from 'qunit';
271271
import { setupRenderingTest } from 'ember-qunit';

0 commit comments

Comments
 (0)