A base class for creating ES6 Web Components using TypeScript and lit-html.
The API is not yet stable! Some things will change.
Please wait for a 1.0 release if you're not willing to update your code frequently.
yarn add --flat fabys-lit-element
// my-test.ts
import {FabysLitElement, html, TemplateResult} from '../node_modules/fabys-lit-element/lib/fabys-lit-element.js';
import {property, customElement, observer} from '../node_modules/fabys-lit-element/lib/fabys-lit-decorators.js';
@customElement("my-test")
export class MyTest extends FabysLitElement {
@property({type: String, reflectToAttribute: true})
test: String;
@property()
active: Boolean;
render(): TemplateResult {
return html`
<style>
div {
color: #ff0000;
}
</style>
<div on-click=${this._onDivClick}>This is my LIT ${this.test} APP.</div>
`;
}
constructor() {
super();
// default values
this.test = "Test";
this.active = false;
}
connectedCallback() {
this._onDivClick = this._onDivClick.bind(this);
super.connectedCallback();
}
_onDivClick() {
this.test = "Changed";
}
@observer(["test"])
_testChanged() {
console.log("test changed");
}
}<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script type="module" src="src/my-test.js"></script>
</head>
<body>
<my-test></my-test>
</body>
</html># install
npm install
# lint
npm run lint
# test
npm run test
# build
npm run build
Code and documentation released under the MIT license.