Better Data Binding

[minecrawler]

Improve data-binding by offering a this.$('.selector').bind('propertyName') method.

A quick brainstorm (code non-functional):

type PropsCoercedToPOrNeverOnO<O, P> = { [k in keyof O]: O[k] extends P ? k : never }[keyof O];
export type PropsOfTypePOnO<P, O> = { [k in PropsCoercedToPOrNeverOnO<P, O>]: O };

class Parent {
    danger = ''

    foo<T extends Parent = this>(this: T, propOfChild: Exclude<keyof PropsOfTypePOnO<T, string>, keyof Parent>) {

    }
}

class Child extends Parent {
    field = ''
    field2 = true
    field3 = 3

    bar() {
        this.foo('field')
    }
}

see playground

[minecrawler]

to be honest, I'm thinking about removing data-binding and leaving it to a library more specialized. I'm currently working on a project which puts Preact into Slim-Fit. The result is very nice and builds with Vite.

I also noticed that using Slim-Fit as a small web components wrapper for Tauri Apps (instead of going with StencilJS or similar) opens up a lot of possibilities and I'm only missing IO and state management for web components. Since we finally have a more finalized version of decorators, I may go that route in the future :)

Preact/Slim-Fit example I use inside my Tauri App

import {render} from "preact";
import {SlimFit} from "@maruru/slim-fit";

export class Foo extends SlimFit {
    protected render(): Promise<void> | void {
        const containerEle = document.createDocumentFragment();
        render(
            <h1>Hello World!</h1>,
            containerEle
        );
        this.draw(containerEle, 'h1 { color: red; }');
    }
}

Foo.registerTag('wc-foo');

Top it of with CSS-in-JS, like JSS, and off you go :)