Nomadic People Migration

    aurelia-dynamic-html
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    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
    

    Install

    npm i aurelia-dynamic-html

    DownloadsWeekly Downloads

    7

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    472 kB

    Total Files

    82

    Last publish

    Collaborators

    • fkleuver