# aurelia-dynamic-html

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

Latest version **0.3.1** (published 2018-05-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install aurelia-dynamic-html
pnpm add aurelia-dynamic-html
yarn add aurelia-dynamic-html
bun add aurelia-dynamic-html
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2018-05-07 |
| First published | 2018-05-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 461 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Fred Kleuver |
| Maintainers | fkleuver |
| Keywords | aurelia, dynamic, generate, html, runtime, composition, enhance, compile |

## Links

- npm: https://www.npmjs.com/package/aurelia-dynamic-html
- Repository: https://github.com/aurelia-contrib/aurelia-dynamic-html
- Issues: https://github.com/aurelia-contrib/aurelia-dynamic-html/issues
- npm.io page: https://npm.io/package/aurelia-dynamic-html

## Dependencies (6)

- [aurelia-pal](https://npm.io/package/aurelia-pal.md) ^1.0.0
- [aurelia-binding](https://npm.io/package/aurelia-binding.md) ^1.0.0
- [aurelia-logging](https://npm.io/package/aurelia-logging.md) ^1.0.0
- [aurelia-task-queue](https://npm.io/package/aurelia-task-queue.md) ^1.0.0
- [aurelia-templating](https://npm.io/package/aurelia-templating.md) ^1.0.0
- [aurelia-dependency-injection](https://npm.io/package/aurelia-dependency-injection.md) ^1.0.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2018-05-07
- 0.3.0 — 2018-05-07
- 0.2.5 — 2018-05-07
- 0.2.4 — 2018-05-07
- 0.2.3 — 2018-05-06
- 0.2.2 — 2018-05-06
- 0.2.1 — 2018-05-06
- 0.2.0 — 2018-05-06

## README

# 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](https://aurelia-contrib.github.io/aurelia-dynamic-html/)

## 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
<template>
  <dynamic-html html.bind="${message}"></dynamic-html>
</template>
```

* Output

```html
<div>Hello world!</div>
```

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
<template>
  <dynamic-html html.bind="html"></dynamic-html>
</template>
```

* Output

```html
<div>Hello world!</div>
```

### Html variable, explicit $this context

* Input

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

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

* Output

```html
<div>Hello world!</div>
```


### Html variable, context variable

* Input

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

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

* Output

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

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

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

* Output

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

### Erroneous html, do not render errors

* Input

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

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

* Output

```html
<div></div>
```

### Erroneous html, render errors

* Input

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

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

* Output

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

## Building The Code


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

  ```
  yarn/npm install
  ```
2. To build the code:

  ```
  npm run build
  ```

## Running The Tests

1. To run the tests

  ```
  npm run test
  ```

2. To continuously run the tests

```
npm run develop
```

---
_Source: https://npm.io/package/aurelia-dynamic-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._