kuudere v0.0.8

Kuudere ·

Kuudere is a ultra-lightweight (only 9.9kb!) JavaScript framework that provides simple, yet powerful abstractions.

Documentation

Documentation is availible here.

Example (WebScript)

import * as Kuudere from 'kuudere';

class App extends Kuudere.Component<null>
{
	constructor(el: Kuudere.HTMLKuudereComponent<ThisType<null>>, args: Kuudere.Arguments<null>)
	{
		super(el, args);

		const { div } = Kuudere.WebScript.HTML();

		el.appendChild
		(
			div.class`example-app`(
				Kuudere.constructComponent('div', Hello, { constructor: 'world' }))
		);
	}
}

class Hello extends Kuudere.Component<string>
{
	constructor(el: Kuudere.HTMLKuudereComponent<ThisType<string>>, args: Kuudere.Arguments<string>)
	{
		super(el, args);

		const { span } = Kuudere.WebScript.HTML();

		el.appendChild(span.class`waving-hand``👋`);
		el.appendChild(span.class`hello-thing``Hello ${args.constructor}!`);
	}
}

Example (JsDom)

import * as Kuudere from 'kuudere';

class App extends Kuudere.Component<null>
{
	constructor(el: Kuudere.HTMLKuudereComponent<ThisType<null>>, args: Kuudere.Arguments<null>)
	{
		super(el, args);

		new Kuudere.JsDom
		([
			{ '': 'div', $: { 'class': 'example-app' }, '...': [
				Kuudere.constructComponent('div', Hello, { constructor: 'world' }),
			] },
		]).appendTo(el);
	}
}

class Hello extends Kuudere.Component<string>
{
	constructor(el: HTMLKuudereComponent<ThisType<string>>, args: Kuudere.Arguments<string>)
	{
		super(el, args);
		
		new Kuudere.JsDom
		([
			{ '': 'span', $: { 'class': 'waving-hand' }, '...': [ '👋' ] },
			{ '': 'span', $: { 'class': 'hello-thing' }, '...': [ `Hello ${args.constructor}!` ] },
		]).appendTo(el);
	}
}

document.body.appendChild(Kuudere.constructComponent('div', App, { constructor: null }));