twobirds-core (original) (raw)

9.1.41 • Public • Published 2 years ago

twoBirds

twoBirds logo

Welcome Birdies ;-)

STATUSAs of v9.1 of the system is regarded production ready

CAVEAT

twoBirds is a ...

... javascript library that maps class instances to DOM nodes.

Micro Components

twoBirds uses a unique technology named "Micro Components" which I have a polyfill for and I plan to separate that into an RFC. Basically it adds an object/instance collection to the HTMLElement instances in the DOM. "Micro Component"s are the functional blocks that map to a dom node, and they can provide any functionality the dom offers. Also there is some functionality for easier coding included. You can use more than one "Micro Component" in one DOM node / HTML element, and you can use them in any other frontend library as well as these are not aware of them.

What you can do with it

Examples

import {TB, CE} from 'twobirds-core';

class MyTest extends TB{ constructor( target, init ){ super( target, init );

    // all properties set in the constructor will become observables automatically!
    this.bool = false;
}

oneConnected(){
    // this is the web component "onConnected" callback
    // all methods with 'on[A-Z]...' or 'one[A-Z]...' will be connected to their listeners automatically
    // methods with 'one[A-Z]...' will only run once

    // minifier help
    let that = this;

    // a simple property, not an observable!
    that.str = 'Hello World';

    // react on this.bool change
    that.bool.observe( (v) => console.log('this.bool has changed to', v) );

    // callback should be triggered...
    that.bool = true;
}

} // here it is: your first web component as a ready-to-use tag! new CE('my-test', MyTest); // from now on you can simply insert into your HTML and you have a working instance of this web component

and the same in typescript...

import {TB, CE} from 'twobirds-core';

interface MyTest { bool: any; // because observable str: string; }

class MyTest extends TB{ constructor( target, init ){ super( target, init ); this.bool = false; }

oneConnected(){
    let that = this;
    that.str = 'Hello World';
    that.bool.observe( (v) => console.log('this.bool has changed to', v) );
    that.bool = true;
}

}

new CE('my-test', MyTest);

Principles

tB strictly follows the KISS and DRY doctrines.

The tB core can be seen as an intermediate step between a simple wrapper/helper library like jQuery and a fully fledged JS framework.

Like the first, it has selectors for the DOM and reasonable modification methods.

Like the latter, it incorporates a higher level abstraction scheme for application objects.

tB technically aims to be the minimum possible toolkit to create an application.

API documentation

(docs pure typescript, not annotated yet)

Supplementary information // Outdated, To Be Done

Use Patreon to support this

Donate via PayPal

You can also contact me if you need a specific twoBirds plugin tailored for your needs or if a question arises.

Readme

Keywords