Ember Template Imports

screenshot of Ember Template Imports

Template import support in Ember!

Overview:

The ember-template-imports addon provides the necessary build tooling for Ember's next-gen component authoring format. This format allows developers to use the <template> tag to write JavaScript or TypeScript in the same file as templates while maintaining a clear separation between the template language and the surrounding JavaScript code. The next-gen format is stable, usable, and is already being used in large Ember apps. It is expected to become the recommended way of authoring all Ember apps in the future.

Features:

  • Build tooling for Ember's next-gen component authoring format
  • Supports writing JavaScript or TypeScript in the same file as templates using the <template> tag
  • Clear separation between template language and JavaScript code

Summary:

The ember-template-imports addon provides the necessary build tooling for Ember's next-gen component authoring format. This format allows developers to write JavaScript or TypeScript in the same file as templates using the <template> tag, while maintaining a clear separation between the template language and the surrounding JavaScript code. The addon is compatible with Ember.js v3.27 or above, Ember CLI v3.27 or above, ember-cli-htmlbars 6.3.0 or above, and Node.js v12 or above. It also provides editor integrations for syntax highlighting and support for GJS file extension in Visual Studio Code and Neovim. With ember-template-imports, developers can embrace the official future of Ember's authoring story and improve the development experience.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.