Ember Template Compilation Pipeline

ember-template-compilation.md

Formats

• Component Colocation: HBS + (J|T)S
• SFC: G(J|T)S with template imports
• Merged Component: one JS file with setComponentTemplate and precompileTemplate
• Wire Format: Output of precompile

Processes

Embroider colocation merge

Input	Component Colocation
Output	Merged Component
Processor	babel + @embroider/addon-dev/template-colocation-plugin
Execution Context	Build
Usage	Addons v2

template-imports (babel)

Input	SFC
Output	Merged Component
Processor	babel + ember-template-imports
Execution Context	Build
Usage	Apps
RFC	779 - First Class Component Templates

template-imports (SWC)

Input	SFC
Output	Merged Component
Processor	babel + ember-template-imports
Execution Context	Build
Usage	Addons v2
RFC	779 - First Class Component Templates

precompile

Turn template string into wire format

Input	Merged Component
Output	Wire Format
Processor	babel + babel-plugin-ember-template-compilation
Execution Context	Build
Usage	Apps
RFC	496 - Handlebars Strict Mode

template

Make wire format available to ember for rehydration

Input	Wire Format
Output	?
Processor	createTemplateFactory() from @ember/template-factory
Execution Context	Runtime
Usage	Apps
RFC	496 - Handlebars Strict Mode

compile

Combination of precompile + template at runtime.