Aurelia 2 Tooling, TemplateCompiler

Framework Knowledge
1

Hi,

would it be possible to use the new TemplateCompiler from Aurelia 2 outside the HTML runtime, e.g. for NodeJS based tooling such as VSCode plugins or linter plugins similar to GitHub - angular-eslint/angular-eslint: Monorepo for all the tooling related to using ESLint with Angular?

Thanks!

1 Like
2

The current implementation of the template compiler relies on a DOM like structure of the template given to it to compile into a set of instruction. It’s highly targeted for HTML, but it can still be used for any environment with a bit of mock. The Node APIs that are used:

  • Node.prototype.nodeType
  • Node.prototype.nodeName
  • Node.prototype.parentNode
  • Node.prototype.nextSibling
  • Node.prototype.firstChild
  • Node.prototype.childNodes
  • Node.prototype.removeChild
  • Node.prototype.insertBefore
  • Node.prototype.textContent
  • ====== Element APIs =========
  • Element.prototype.attributes
  • Element.prototype.getAttribute
  • Element.prototype.removeAttribute
  • Element.prototype.hasAttribute
  • Element.prototype.classList.prototype.add

With a basic implementation of Node/Element, you should be able to use the template compiler to compile into Aurelia instruction that you want. If you are looking for smaller implementation, with the constraints that it only compiles valid template, and does not require the above APIs, you can have a look at this https://github.com/bigopon/aurelia-fast/blob/master/src/template-compiler.ts (Example in the dist folder, run a web server at the dist folder to see the output, it’s a VDOM like structure)

1 Like
3

Thanks! Still a bit confused :upside_down_face: by aurelia-fast template syntax but will look into it.

1 Like