diff --git a/guides/release/components/template-tag-format.md b/guides/release/components/template-tag-format.md index 6754e4cfec..490ce7a23f 100644 --- a/guides/release/components/template-tag-format.md +++ b/guides/release/components/template-tag-format.md @@ -259,6 +259,46 @@ export default CustomSelect; This can be a powerful refactoring technique to break up large components into smaller ones. (where it makes sense!) +## Low-level format + +All of template-tag format can be represented in it's pure-javascript form using `template` from either `@ember/template-compiler` or `@ember/template-compiler/runtime`. + +Creating a template-only component via the runtime compiler: + +```gjs +import { template } from '@ember/template-compiler/runtime'; + +const hello = 'Greetings'; + +export default template(`{{hello}}`, { + scope: () => ({ hello }), +}); +``` + +And a class-component: + +```gjs +import { template } from "@ember/template-compiler"; + +const message = "Hello there"; + +class Example extends Component { + static { + template( + "Hello {{message}}", + { + component: this, + scope: () => ({ message }), + }, + ); + } + +} +``` + +If in an environment with compilation, omitting the `/runtime` at the end of the import allows ahead-of-time compilation to occur on components created with `template()` for better runtime performance. + + ## Testing Historically, Ember's integration tests have been written using the `hbs` tagged template literal. This is no longer necessary with the template tag format. Instead, use the `