@@ -3,7 +3,7 @@ ember-template-imports
33
44This addon provides the build tooling required to support Ember's next-gen component authoring format:
55
6- ``` js
6+ ``` gjs
77import { on } from '@ember/modifier';
88import FancyButton from './fancy-button';
99
@@ -143,7 +143,7 @@ syntax, templates are defined in JavaScript files directly.
143143This example defines a template-only component, which is the default export of
144144` hello.gjs ` :
145145
146- ``` js
146+ ``` gjs
147147// components/hello.gjs
148148<template>
149149 <span>Hello, {{@name}}!</span>
@@ -152,7 +152,7 @@ This example defines a template-only component, which is the default export of
152152
153153You would be able to use this component in another component like so:
154154
155- ``` js
155+ ``` gjs
156156// components/hello-world.gjs
157157import Hello from './hello';
158158
@@ -163,7 +163,7 @@ import Hello from './hello';
163163
164164You can also export the component explicitly:
165165
166- ``` js
166+ ``` gjs
167167// components/hello.gjs
168168export default <template>
169169 <span>Hello, {{@name}}!</span>
@@ -174,7 +174,7 @@ Omitting the `export default` is just syntactic sugar. In addition, you can
174174define template-only components and assign them to variables, allowing you to
175175export components with named exports:
176176
177- ``` js
177+ ``` gjs
178178export const First = <template>First</template>;
179179
180180export const Second = <template>Second</template>;
@@ -185,7 +185,7 @@ export const Third = <template>Third</template>;
185185This also allows you to create components that are only used locally, in the
186186same file:
187187
188- ``` js
188+ ``` gjs
189189const Option = <template>
190190 <option selected={{@selected}} value={{@value}}>
191191 {{or @title @value}}
@@ -207,7 +207,7 @@ export const CustomSelect = <template>
207207Helpers and modifiers can also be defined in the same file as your components,
208208making them very flexible:
209209
210- ``` js
210+ ``` gjs
211211import { modifier } from 'ember-modifier';
212212
213213const plusOne = (num) => num + 1;
@@ -228,7 +228,7 @@ const setScrollPosition = modifier((element, [position]) => {
228228Finally, to associate a template with a class-based component, you can use the
229229template syntax directly in the class body:
230230
231- ``` js
231+ ``` gjs
232232import Component from '@glimmer/component';
233233import { tracked } from '@glimmer/tracking';
234234import { on } from '@ember/modifier';
@@ -257,7 +257,7 @@ Template tag components can also be used for writing tests. In fact, this aligne
257257
258258Just like in app code, the template tag has access to the outer scope. This means you can reference variables directly in your tests:
259259
260- ``` js
260+ ``` gjs
261261// tests/integration/components/hello-test.gjs
262262import Hello from 'example-app/components/hello';
263263import { module, test } from 'qunit';
@@ -323,7 +323,7 @@ the import path:
323323
324324For example:
325325
326- ` ` ` js
326+ ` ` ` gjs
327327import BasicDropdown from ' ember-basic-dropdown/components/basic-dropdown' ;
328328
329329< template>
@@ -345,7 +345,7 @@ solutions, and work together as a community as we explored the design space.
345345The main alternative explored in a previous version was template literals,
346346similar to the existing ` hbs` helper in tests:
347347
348- ` ` ` js
348+ ` ` ` gjs
349349import { hbs } from ' ember-template-imports' ;
350350import MyComponent from ' ./my-component' ;
351351
0 commit comments