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 ```bash npm i aurelia-dynamic-html ``` or via the Aurelia CLI ```bash 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: ```bash au install aurelia-dynamic-html ``` or if you have already installed and only need to add the dependency to aurelia.json: ```bash au import aurelia-dynamic-html ``` alternatively you can manually add the dependency to your vendor.bundles: ```json "dependencies": {

"name": "aurelia-dynamic-html",

"path": "../node_modules/aurelia-dynamic-html/dist/amd",

"main": "aurelia-dynamic-html"

} ```

Configuration

```typescript 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

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

• Output

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

Html variable, implicit $this context

• Input

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

• Output

```html ```

Html variable, explicit $this context

• Input

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

• Output

```html ```

Html variable, context variable

• Input

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

• Output

```html ```

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

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

• Output

```html ```

Erroneous html, do not render errors

• Input

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

• Output

```html ```

Erroneous html, render errors

• Input

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

• Output

```html ```

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 ```