vanio-ts-components

Simple TypeScript component system

Usage no npm install needed!

<script type="module">
  import vanioTsComponents from 'https://cdn.skypack.dev/vanio-ts-components';
</script>

README

Vanio TypeScript Components

License

npm install --save vanio-ts-components

Simple TypeScript component system.

// Hello.ts
import {component} from 'vanio-ts-components';

interface HelloOptions
{
    text?: string;
}

@component('HelloComponent')
export default class Hello
{
    private element: HTMLElement;

    public constructor(element: HTMLElement, options: HelloOptions = {})
    {
        this.element = element;
        this.element.innerText = options.text || 'Hello';
    }
}
<!doctype html>
<html lang="en">
<head>
    <meta charset=utf-8>
</head>
<body>
    <p data-component-hello-component='{"text": "Hello world!"}'></p>
    <script src="index.js"></script>
</body>
</html>
// index.ts
import {register} from 'vanio-ts-components';
import 'Hello';

register(document.body);