# axeum-visual

> AxeumVisual Framework solves the reconciliation (diff) algorithm performance issues that modern virtual-DOM javascript frameworks have by using a built-in templating language. The templating language is interpreted once during a component's initialization

Latest version **0.1.0** (published 2021-10-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install axeum-visual
pnpm add axeum-visual
yarn add axeum-visual
bun add axeum-visual
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-10-01 |
| First published | 2021-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 71.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ed4553ddaf88858322df848ab6c4551a98b263dd4f32da6676c353cd86727cdb |
| Maintainers | axeum |

## Links

- npm: https://www.npmjs.com/package/axeum-visual
- Repository: https://github.com/axeumorg/axeum-visual
- Homepage: https://github.com/axeumorg/axeum-visual#readme
- Issues: https://github.com/axeumorg/axeum-visual/issues
- npm.io page: https://npm.io/package/axeum-visual

## Dependencies (1)

- [hashids](https://npm.io/package/hashids.md) ^2.2.8

## Recent versions

- 0.1.0 (latest) — 2021-10-01

## README

# AxeumVisual Framework

AxeumVisual Framework solves the reconciliation (diff) algorithm performance issues
that modern virtual-DOM javascript frameworks have by using a built-in templating language.
The templating language is interpreted once during a component's initialization
to provide instructions for how the component should update imperatively while
allowing the code to be written declaratively. This allows changes in state to update
the DOM without calling the render() function and running a reconciliation algorithm.

## Example Todo List App

```
import AV from 'axeum-visual'


class TodoList extends AV.Component {
    constructor(props, context) {
        super(props, context)
        this._.class = "TodoList"
        this._.id = "EXAMPLE1"
        this.App = this.context.create('App')
        this.rootClass = [this._.class]
        this.App.set('todoListItems', [
            {
                'title': 'first thing'
            },
            {
                'title': 'second thing'
            },
            {
                'title': 'third thing'
            }
        ])
    }
    onMount() {
        this.button.on('click', this.addToList)
    }
    addToList() {
        this.App.add('todoListItems',
            {
                'title': this.input.val()
            }
        )
    }
    render($) {
        return (
            <div class={$`rootClass|joinSpace`}>
                <div class="tools">
                    <input type="text" placeholder="New item..." ref="input" />
                    <button ref="button">Add</button>
                </div>
                <div class="list">
                    {$`if App.todoListItems.length`}
                        <div class="hasItems">
                            {$`for index, item of App.todoListItems`}
                                <TodoListItem index={$`index`} data={$`item`} />
                            {$`endfor`}
                        </div>
                    {$`else`}
                        <div class="noItems">
                            No items.
                        </div>
                    {$`endif`}
                </div>
            </div>
        )
    }
}


class TodoListItem extends AV.Component {
    constructor(props, context) {
        super(props, context)
        this._.class = "TodoListItem"
        this._.id = "EXAMPLE2"
        this.App = this.context.use('App')
        this.rootClass = [this._.class]
    }
    onMount() {
        this.removeButton.on('click', this.removeItem)
    }
    removeItem() {
        this.App.todoListItems.splice(this.index, 1)
        this.App.set('todoListItems')
    }
    render($) {
        return (
            <div class={$`rootClass|joinSpace`}>
                <span>{$`data.title`}</span>
                <span ref="removeButton">(x)</span>
            </div>
        )
    }
}


AV.init(TodoList, '#root')


```

## Notes

// there is a purpose for a full reconciliation algorithm for specific use cases; one can be implemented in this framework
// todo - explain more about specific use cases

## TODO

// TODO - explain separation of concerns
// TODO - explain context api
// TODO - explain templating language
// TODO - explain styling and scoping

----

MIT License

Copyright (c) 2021 ed4553ddaf88858322df848ab6c4551a98b263dd4f32da6676c353cd86727cdb

---
_Source: https://npm.io/package/axeum-visual · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._