Skip to content

Instantly share code, notes, and snippets.

@gossi

gossi/ember-template-compilation.md

Last active January 27, 2023 16:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gossi/c89492375112e92c6578c8a0bcb0748b to your computer and use it in GitHub Desktop.
Save gossi/c89492375112e92c6578c8a0bcb0748b to your computer and use it in GitHub Desktop.
Download ZIP
Ember Template Compilation Pipeline
Raw
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment