alins-style

🚀 Alins: All-in-js web ui Framework，No jsx/template/vdom/css/html

中文 | Docs | VersionLog | FeedBacl | Gitee | MessageBoard

0 Quick Start

0.1 npm

npm i alins

import {div} from 'alins';
div('Hello World!').mount();

0.2 cdn

<script src="https://cdn.jsdelivr.net/npm/alins"></script>
<script>
  Alins.div('Hello World!').mount();
</script>

1. Features

Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css

1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
3. Good componentization support
4. Support for, if, show, switch, model controller
5. Support computed and watch
6. One-way data flow + two-way binding
7. Good TS support

For more detailed functions, please refer to Online Documentation

2. Samples

2.0 Application Based on Alins

Webos

2.1. Counter Playground

import { button, comp, click, $, mount } from 'alins';

function Count () {
    const count = $(0);
    return button(
        click(() => {count.value++;}),
        $`Count is ${count}`
    );
}

comp(Count).mount();

2.2. Components & Model Playground

import {
    button, comp, prop, click, $, input, span,
} from '../alins';

export function Count () {
    const count = $(0);
    return [
        span('input count'),
        input.model(count, 'number'),
        comp(CountProps)(prop({value: count})),
        button('add', click(() => {count.value++;})),
    ];
};

export function CountProps ({props}) {
    return span($`Count is ${props.value}`);
}

comp(Count).mount();

3. todolist Playground

import {comp, button, div, input, click, $} from '../alins';
import {style} from '../alins-style';


export function todoList () {
    const edit = $('');
    const list = $([]);
    const addItem = () => {
        list.push({content: edit.value, done: false});
        edit.value = '';
    };
    const removeItem = (index) => { list.splice(index.value, 1); };
    const finishItem = (item) => { item.done = !item.done.value; };

    const itemStyle = (item) => {
        return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
            .color(() => item.done.value ? '#888' : '#222');
    }

    return [
        input.model(edit),
        button('submit', click(addItem)),
        div('.todo-list',
            div.for(list)((item, index) => [
                itemStyle(item),
                $`${() => index.value + 1}:${item.content}`,
                button('delete', click(removeItem).args(index)),
                button(
                    $`${() => item.done.value ? 'undo' : 'done'}`,
                    click(finishItem).args(item)
                ),
            ]),
        ),
    ];
}
comp(todoList).mount();

4. css in js Playground

import {
    div, $ , button, hover, click, input, cls
} from 'alins';
import {css, style} from '../alins-style';

function Style () {
    const num = $(30);
    const active = $(false);

    css('.main')(
        style({
            color: '#888',
            marginLeft: $`${num}px`,
        }),
        ['&.active', style.fontSize(num)],
        ['.child', style.marginTop(num)]
    ).mount();

    return div(`parent.main`,
        cls({active}),
        hover('color: #f44'),
        input.model(num, 'number'),
        button('toggle active', click(() => active.value = !active.value)),
        div('child.child'),
    );
}

comp(Style).mount();