Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
ember-template-imports
Advanced tools
This addon provides the build tooling required to support Ember's next-gen component authoring format:
import { on } from '@ember/modifier';
import FancyButton from './fancy-button';
function greet() {
alert("AHOY!")
}
<template>
<p>Hello, {{@name}}!</p>
<FancyButton @label="Say hello!" {{on "click" greet}} />
</template>
This design uses <template>
to allow us to author JavaScript or TypeScript in
the same file as templates, while keeping a clear separation between the
template language and the JavaScript around it.
This "next-gen" format is the official future of Ember's authoring story, and is stable and usable today. (It is already being used in some of the largest Ember apps in the world!) We expect it to become the recommended way of authoring all Ember apps in the near future, once we are satisfied that we have sufficiently polished up all the corners of the implementation.
Install this package and the supporting Prettier plugin:
pnpm:
pnpm add --save-dev ember-template-imports prettier-plugin-ember-template-tag
Yarn:
yarn add --dev ember-template-imports prettier-plugin-ember-template-tag
npm:
npm add --save-dev ember-template-imports prettier-plugin-ember-template-tag
Then configure the Prettier plugin following the instructions from its README. Additionally, make sure you are using at least v5.8.0 of ember-template-lint and v11.6.0 of eslint-plugin-ember, so your linting tools will work correctly.
Additionally, if you are using TypeScript, you will also want to set up
Glint, following its setup instructions. (Make sure you
include @glint/environment-ember-template-imports
!)
ember-cli-htmlbars
6.3.0 or aboveTo get syntax highlighting inside embedded templates and support for the GJS file extension, you may need to configure your editor.
The Ember.js extension pack bundles everything you need to get started.
Example Neovim Config with support for good highlighting of embedded templates in JS and TS, using:
Additionally, when using the eslint-lsp, you'll need to tell ESLint to activate when javascript.glimmer
and typescript.glimmer
files are loaded. Example.
local lsp = require('lspconfig')
-- ✂️
local eslint = lsp['eslint']
eslint.setup({
filetypes = {
"javascript", "typescript",
"typescript.glimmer", "javascript.glimmer",
"json",
"markdown"
},
on_attach = function(client, bufnr)
vim.api.nvim_create_autocmd("BufWritePre", {
buffer = bufnr,
command = "EslintFixAll",
})
end,
})
For other editors, you may be able to get support using one of these other syntax definitions:
.gjs
/.gts
FilesThe new <template>
tag format is available in .gjs
and .gts
files. These
file extensions represent a new file format "GlimmerJS" and "GlimmerTS", which
are supersets of standard JavaScript and TypeScript respectively. In this
syntax, templates are defined in JavaScript files directly.
This example defines a template-only component, which is the default export of
hello.gjs
:
// components/hello.gjs
<template>
<span>Hello, {{@name}}!</span>
</template>
You would be able to use this component in another component like so:
// components/hello-world.gjs
import Hello from './hello';
<template>
<Hello @name="world" />
</template>
You can also export the component explicitly:
// components/hello.gjs
export default <template>
<span>Hello, {{@name}}!</span>
</template>;
Omitting the export default
is just syntactic sugar. In addition, you can
define template-only components and assign them to variables, allowing you to
export components with named exports:
export const First = <template>First</template>;
export const Second = <template>Second</template>;
export const Third = <template>Third</template>;
This also allows you to create components that are only used locally, in the same file:
const Option = <template>
<option selected={{@selected}} value={{@value}}>
{{or @title @value}}
</option>
</template>;
export const CustomSelect = <template>
<select>
{{#each @options as |opt|}}
<Option
@value={{opt.value}}
@selected={{eq opt @selectedOption}}
/>
{{/each}}
</select>
</template>;
Helpers and modifiers can also be defined in the same file as your components, making them very flexible:
import { modifier } from 'ember-modifier';
const plusOne = (num) => num + 1;
const setScrollPosition = modifier((element, [position]) => {
element.scrollTop = position
});
<template>
<div class="scroll-container" {{setScrollPosition @scrollPos}}>
{{#each @items as |item index|}}
Item #{{plusOne index}}: {{item}}
{{/each}}
</div>
</template>
Finally, to associate a template with a class-based component, you can use the template syntax directly in the class body:
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';
// components/hello.gjs
export default class Hello extends Component {
@tracked count = 0;
increment = () => {
this.count += 1;
};
decrement = () => {
this.count -= 1;
};
<template>
<button {{on "click" this.increment}}>+</button>
Count: {{this.count}}
<button {{on "click" this.decrement}}>−</button>
</template>
}
As implemented as part of the Strict Mode Templates RFC, the built in helpers, modifiers and components are available for import:
array
(import { array } from '@ember/helper';
)concat
(import { concat } from '@ember/helper';
)fn
(import { fn } from '@ember/helper';
)get
(import { get } from '@ember/helper';
)hash
(import { hash } from '@ember/helper';
)on
(import { on } from '@ember/modifier';
)Input
(import { Input } from '@ember/component';
)LinkTo
(import { LinkTo } from '@ember/routing';
)Textarea
(import { Textarea } from '@ember/component';
)Like Glimmer components, the primitive APIs for supporting imports were built before we decided on a final format for their high level usage in RFC 0779. There were a number of different ideas for how we can integrate imports with templates, and the idea behind this addon was that it could be a test bed for them all. This allowed us to share common tooling between solutions, and work together as a community as we explored the design space.
The main alternative explored in a previous version was template literals,
similar to the existing hbs
helper in tests:
import { hbs } from 'ember-template-imports';
import MyComponent from './my-component';
export default hbs`
<MyComponent/>
`;
For the previous version of this addon, see this repository. And huge thanks to @patricklx for his contributions here!
As of RFC 0779, we decided on <template>
over hbs
; see the RFC for the full rationale. The hbs
format is still technically supported by this repo for transition purposes for the early adopters who helped us get here, but will be removed at some point in the near future!hbs
has been removed -- if you rely on this feature, please use ember-template-imports @ < v4
, until migrated to <template>
See the Contributing guide for details.
This project is licensed under the MIT License.
v4.0.0 (2023-10-18)
content-tag
for your <template>
parsing / location mapping needs.content-tag
if you're using addon.gjs()
from @embroider/addon-dev
, and this change doesn't affect v2 addons.<template>
. See https://github.com/emberjs/rfcs/pull/779ie 11
from browser targets in dummy
app (@bertdeblock)extends Component
in readme example (@StephanH90)ie 11
from browser targets in dummy
app (@bertdeblock)FAQs
Tooling support for gjs and gts component authoring
The npm package ember-template-imports receives a total of 55,941 weekly downloads. As such, ember-template-imports popularity was classified as popular.
We found that ember-template-imports demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.