als-component

als-component being tested not for use

Frontend

To show colored html code inside string, use es6-string-html plugin for Vscode.

Example:

<!-- Add Component class -->
   <script src="/component.js"></script>
<!-- Add Initial element with component name and input for changing state -->
   <input id="input" type="text" oninput="test.state.name=this.value; test.update()">
   <div component="test"></div>

<script>
   let test = new Component(
      'test', // component name
      function() { //function for generating component's html
         return /*html*/`<div component="test">
            Hello ${this.state.name}
         </div>`
      },
      {name:'Alex'}, // initial state
      {update:[ // hooks object with update hook
         function(state,init) {
            if(init) document.getElementById('input').value = state.name
         }
      ]}
   )
// find element [component=test] and update it 
   test.update()
</script>

Syntax:

let component = new Component(name,component,state = {},hooks={update:[],remove:[],add:[]})
component.fn // component function
component.state // component state
component.hooks // component hooks

Exceptions for component name: state,import,export,convert,script.

Component inside component

<ul component="todos"></ul>
<script>
   let todos = [{id:1,name:'do something'},{id:2,name:'do else'}]

// todo component
   let todoComponent = new Component('todo',function({name,id}) {
      return /*html*/`<li component="todo" id="${id}">${name}</li>`
   })

// todos component
   let todosComponent = new Component('todos',function() {
      return /*html*/`
      <ul component="todos">
         ${this.state.todos.map(todo => todoComponent.fn(todo)).join('')}   
      </ul>`
   },{todos})

   todosComponent.update()
</script>

Actions

remove,apdate, add, addBefore, addAfter

Hooks

remove,apdate, add init

component.state

Component.state - Combine states

Node.js

import

export