BindableProperty

.envrc

@@ -0,0 +1,3 @@
+export HUSKY_SKIP_INSTALL=1
+use_nix
+

.eslintignore

@@ -0,0 +1,6 @@
+webpack.config.js
+gulpfile.js
+
+src/**/*.js
+
+dist/**

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+    root: true,
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+    ],
+    rules: {
+        // disable the rule for all files
+        '@typescript-eslint/explicit-member-accessibility': 'off',
+        'no-use-before-define': 'off',
+        '@typescript-eslint/no-use-before-define': ['off'],
+    },
+    overrides: [
+        {
+            // enable the rule specifically for TypeScript files
+            files: ['*.ts', '*.tsx'],
+            rules: {
+                '@typescript-eslint/explicit-member-accessibility': ['off'],
+            },
+        },
+    ],
+};

.gitignore

@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+  }

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+    "cSpell.words": [
+        "Cascadia",
+        "STARTMDPATH",
+        "appleboy",
+        "devtool",
+        "dockerregistry",
+        "dockerrepo",
+        "envs",
+        "markdowndoc",
+        "settag"
+    ],
+    "nixEnvSelector.nixShellConfig": "NOT_MODIFIED_ENV",
+    "cSpell.enabled": false
+}

README.md

@@ -0,0 +1 @@
+# BindableProperty

gulpfile.js

@@ -0,0 +1,24 @@
+var gulp = require('gulp');
+var ts = require('gulp-typescript');
+var sourcemaps = require('gulp-sourcemaps');
+var gulpif = require('gulp-if');
+var tsProject = ts.createProject('tsconfig.json');
+var del = require('del');
+
+builder = function (production = true) {
+    return function () {
+        return tsProject
+            .src()
+            .pipe(gulpif(!production, sourcemaps.init()))
+            .pipe(tsProject())
+            .js.pipe(gulpif(!production, sourcemaps.write()))
+            .pipe(gulp.dest('dist'));
+    };
+};
+
+gulp.task('clean', function () {
+    return del('dist');
+});
+
+gulp.task('build', builder(false));
+gulp.task('build:production', builder(true));

package.json

@@ -0,0 +1,37 @@
+{
+    "name": "bindable-property",
+    "version": "1.0.0",
+    "scripts": {
+        "build": "gulp build",
+        "clean": "gulp clean"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "BSD",
+    "description": "",
+    "devDependencies": {
+        "@types/lodash": "^4.14.150",
+        "@types/node": "^13.13.2",
+        "@typescript-eslint/eslint-plugin": "^2.29.0",
+        "@typescript-eslint/parser": "^2.29.0",
+        "del": "^5.1.0",
+        "eslint": "^6.8.0",
+        "gulp-copy": "^4.0.1",
+        "gulp-if": "^3.0.0",
+        "gulp-sourcemaps": "^2.6.5",
+        "ts-node": "^8.9.0",
+        "tsconfig-paths": "^3.9.0",
+        "typescript": "^3.8.3"
+    },
+    "dependencies": {
+        "cross-env": "^7.0.2",
+        "escape-string-regexp": "^4.0.0",
+        "gulp": "^4.0.2",
+        "gulp-typescript": "^6.0.0-alpha.1",
+        "lit-element": "^2.3.1",
+        "lodash": "^4.17.15"
+    },
+    "files": [
+        "dist"
+    ]
+}

shell.nix

@@ -0,0 +1,6 @@
+let nixpkgs = fetchTarball
+  https://releases.nixos.org/nixos/20.03/nixos-20.03.1445.95b9c99f6d0/nixexprs.tar.xz
+  ; pkgs = import <nixpkgs> {}
+  ; in
+pkgs.mkShell { buildInputs = with pkgs; [ nodejs-12_x ]
+             ; }

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);
+    }
+}

tsconfig.json

@@ -0,0 +1,52 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "declaration": true,
+        "noImplicitAny": false,
+        "lib": [ "DOM", "ESNext" ],
+        "module": "ESNext",
+        "target": "ESNext",
+        "allowJs": true,
+        "sourceMap": true,
+        "experimentalDecorators": true,
+        "moduleResolution": "node",
+        "rootDir": "./src",
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "**/*.spec.ts"]
+}
+
+//{
+//    "compilerOptions": {
+//      "strict": true,
+//      "jsx": "preserve",
+//      "importHelpers": true,
+//      "esModuleInterop": true,
+//      "allowSyntheticDefaultImports": true,
+//      "baseUrl": ".",
+//      "types": [
+//        "webpack-env"
+//      ],
+//      "paths": {
+//        "@/*": [
+//          "src/*"
+//        ]
+//      },
+//      "lib": [
+//        "esnext",
+//        "dom",
+//        "dom.iterable",
+//        "scripthost"
+//      ]
+//    },
+//    "include": [
+//      "src/**/*.ts",
+//      "src/**/*.tsx",
+//      "tests/**/*.ts",
+//      "tests/**/*.tsx"
+//    ],
+//    "exclude": [
+//      "node_modules"
+//    ]
+//  }
+