BindableProperty

src/components/bridge/index.ts

@@ -0,0 +1,41 @@
+import { html, customElement, TemplateResult, LitElement } from 'lit-element';
+import { TestText } from '../textcomponent';
+import { bindOn } from '../../tools/directives';
+
+@customElement('test-bridge')
+export class BridgeText extends LitElement {
+    textIn: TestText;
+
+    loaded: Promise<void>;
+    load: () => void;
+
+    constructor() {
+        super();
+        this.loaded = new Promise((resolv) => {
+            this.load = resolv;
+        });
+    }
+
+    firstUpdated(): void {
+        this.textIn = this.shadowRoot.querySelector('#inText');
+
+        this.load();
+    }
+
+    btnClick(): void {
+        this.textIn.textOut.next('Random');
+    }
+
+    public render(): TemplateResult {
+        return html`
+            <button @click="${this.btnClick}">Random</button>
+            <test-text id="inText"></test-text>
+            <test-textout
+                .text=${bindOn(() => this.textIn.textOut, this.loaded)}
+            ></test-textout>
+            <test-textout
+                .text=${bindOn(() => this.textIn.textOut, this.loaded)}
+            ></test-textout>
+        `;
+    }
+}

src/components/outputcomponent/index.ts

@@ -0,0 +1,16 @@
+import {
+    html,
+    property,
+    customElement,
+    TemplateResult,
+    LitElement,
+} from 'lit-element';
+
+@customElement('test-textout')
+export class TestTextOut extends LitElement {
+    @property() public text = 'default';
+
+    public render(): TemplateResult {
+        return html` <div>${this.text}</div> `;
+    }
+}

src/components/textcomponent/index.ts

@@ -0,0 +1,39 @@
+import {
+    html,
+    property,
+    customElement,
+    TemplateResult,
+    LitElement,
+} from 'lit-element';
+import { BindableProperty } from '../../tools/BindableProperty';
+
+@customElement('test-text')
+export class TestText extends LitElement {
+    @property()
+    public get text(): string {
+        return this.textOut.data;
+    }
+
+    public set text(val) {
+        this.textOut.next(val);
+    }
+
+    textOut = new BindableProperty<string>(oldVal => {
+        this.requestUpdate('textOut', oldVal);
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onChange(e: any): void {
+        this.textOut.next(e.srcElement.value);
+    }
+
+    public render(): TemplateResult {
+        return html`
+            <input
+                type="text"
+                .value="${this.textOut.data}"
+                @input="${this.onChange}"
+            />
+        `;
+    }
+}

src/tools/BindableProperty.ts

@@ -0,0 +1,60 @@
+// eslint-disable-next-line @typescript-eslint/interface-name-prefix
+export interface IBindableProperty {
+    complete(): void;
+    data: unknown;
+    items(): AsyncGenerator<unknown, unknown, unknown>;
+    next(value: unknown): void;
+}
+
+export class BindableProperty<T> implements IBindableProperty {
+    private _resolvers: ((value?: unknown) => void)[] = [];
+    private _data: T;
+    private _done = false;
+
+    constructor(private notifyChange?: (oldValue: T) => void) {}
+
+    public get data(): T {
+        return this._data;
+    }
+
+    public next(data: T): void {
+        if (this._done) return;
+
+        const oldVal = this._data;
+
+        this._data = data;
+        if (this._resolvers.length > 0) {
+            const oldResolvers = this._resolvers.slice();
+            this._resolvers = [];
+            for (const resolver of oldResolvers) {
+                resolver();
+            }
+        }
+
+        if (this.notifyChange !== undefined) this.notifyChange(oldVal);
+    }
+
+    public complete(): void {
+        this._done = true;
+
+        if (this._resolvers.length > 0) {
+            for (const resolver of this._resolvers.slice()) {
+                resolver();
+            }
+        }
+    }
+
+    public async *items(): AsyncGenerator<T, T, T> {
+        while (true) {
+            await new Promise(resolve => {
+                this._resolvers.push(resolve);
+            });
+
+            if (this._done) {
+                return;
+            } else {
+                yield this._data;
+            }
+        }
+    }
+}

src/tools/directives.ts

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { directive, PropertyPart } from 'lit-html';
+import { IBindableProperty } from './BindableProperty';
+
+export const bindOn = directive(
+    (
+        args,
+        promise: Promise<void> = new Promise((resolv) => {
+            setTimeout(() => {
+                resolv();
+            }, 1000);
+        }),
+        mainDirective = dataBindWorker
+    ) => (part: PropertyPart) => {
+        setTimeout(async () => {
+            await promise;
+            let val = args();
+            val = Array.isArray(val) ? val : [val];
+            mainDirective(...val)(part);
+        }, 0);
+    }
+);
+
+const dataBindWorker = directive(
+    (dataSource: IBindableProperty, _this?: unknown) => async (
+        part: PropertyPart
+    ) => {
+        for await (const element of dataSource.items.bind(
+            _this || dataSource
+        )()) {
+            part.setValue(element);
+            part.commit();
+        }
+    }
+);

src/tools/helpers.ts

@@ -0,0 +1,7 @@
+import { IBindableProperty } from './BindableProperty';
+
+export async function bind(prop: IBindableProperty, setter: (s: unknown) => void): Promise<void> {
+    for await (const element of prop.items()) {
+        setter(element);
+    }
+}