aurelia-dynamic-html

Aurelia custom element that takes (server- or client side) generated html and compiles it into a fully functional Aurelia View.

View LIVE DEMO

Installation

Install the npm dependency via

npm i aurelia-dynamic-html

or via the Aurelia CLI

au install aurelia-dynamic-html

Aurelia-CLI

For Aurelia-CLI projects based on RequireJS or SystemJS, the following will install and declare the dependency in your aurelia.json:

au install aurelia-dynamic-html

or if you have already installed and only need to add the dependency to aurelia.json:

au import aurelia-dynamic-html

alternatively you can manually add the dependency to your vendor.bundles:

"dependencies": [
  {
    "name": "aurelia-dynamic-html",
    "path": "../node_modules/aurelia-dynamic-html/dist/amd",
    "main": "aurelia-dynamic-html"
  }
]

Configuration

import { Aurelia } from "aurelia-framework";
 
export function configure(au: Aurelia) {
  au.use.standardConfiguration();
 
  au.use.plugin("aurelia-dynamic-html"); // don't forget PLATFORM.moduleName if you're using webpack
 
  au.start().then(() => au.setRoot());
}

Usage

Inline html, implicit $this context

• Input

export class App {
  message = "Hello world!";
}

<template>
  <dynamic-html html.bind="${message}"></dynamic-html>
</template>

• Output

<div>Hello world!</div>

Note: the variants below also apply to inline html, but are omitted for brevity

Html variable, implicit $this context

• Input

export class App {
  message = "Hello world!";
  html = "${message}";
}

<template>
  <dynamic-html html.bind="html"></dynamic-html>
</template>

• Output

<div>Hello world!</div>

Html variable, explicit $this context

• Input

export class App {
  message = "Hello world!";
  html = "${message}";
}

<template>
  <dynamic-html html.bind="html" context.bind="$this"></dynamic-html>
</template>

• Output

<div>Hello world!</div>

Html variable, context variable

• Input

export class App {
  context = { message: "Hello world!" };
  html = "${message}";
}

<template>
  <dynamic-html html.bind="html" context.bind="context"></dynamic-html>
</template>

• Output

<div>Hello world!</div>

Html variable, context variable (complex / nested)

The html and context can come from any source, be of arbitrary complexity, and work for any Aurelia feature.

• Input

export class App {
  context = { message: "Hello world!", html: "${message}" };
  html = "<dynamic-html html.bind=\"context.html\" context.bind=\"context\"></dynamic-html>";
}

<template>
  <dynamic-html html.bind="html" context.bind="$this"></dynamic-html>
</template>

• Output

<div><dynamic-html html.bind="context.html" context.bind="context">Hello world!</dynamic-html></div>

Erroneous html, do not render errors

• Input

export class App {
  context = { message: "Hello world!" };
  html = "${message"; // missing closing brace
}

<template>
  <dynamic-html html.bind="html" context.bind="context"></dynamic-html>
</template>

• Output

<div></div>

Erroneous html, render errors

• Input

export class App {
  context = { message: "Hello world!" };
  html = "${message"; // missing closing brace
}

<template>
  <dynamic-html html.bind="html" context.bind="context" render-errors=true></dynamic-html>
</template>

• Output

<div>Parser Error: Missing expected token } (...)</div>

Building The Code

1. From the project folder, execute the following command:

yarn/npm install

1. To build the code:

npm run build

Running The Tests

1. To run the tests

npm run test

1. To continuously run the tests

npm run develop