als-component

Als-component

About

Als-component allows you to manage dom content as components with JavaScript.

To show html colored code inside string in js, use es6-string-html plugin in vsCode and

/*html*/`html code`

new in 0.5

• auto capitalize component name on constructor
• component.genId(start) method - generating id and increasing it automaticly

new in 0.6

• component(object) methods:
  • get method
  • element method
• Component (class) methods
  • $genId
  • $firstUpper
  • $
  • $$
  • $next
  • $prev
  • $parent
  • $var

There are 3 files:

• component.js - for frontend usage
• export.js - for node.js usage
• router.js - for frontend routing

Component.js

Syntax:

new Component(ComponentName,fn,data)
   .update(data,id,updateElement=true)
   .get(data,id) // => update(data,id,false)

Parameters:

• new Component(ComponentName,fn,data)
  • ComponentName - Name of component, which will be available as Component.componentName
    • Has to start with capital (constructor will capitalize first letter anyway)
  • fn - function(data,id) which has to return html code
    • html code has to be between <tag component="componentName" id="id"></tag>
    • id parameter necessary only then you use more then one component
  • data - "the state" for component
    • available as Component.componentName.data or Component.componentName.id if there is id
• update(data,id,updateElement=true)
  • data - updates the "state".
    • If data undefined, will be used data from component object (the state)
    • If data in component object undefined, data will update the "state"
  • id - specify which data to use and which element to update
  • updateElement - if false, update will return fn result only (without updating html element)
    • true by default - updating data and html element

Name convention

Component.Upper - Component Component.lower - fn Component.$fn - $utility

Example

<!-- Include component.js -->
<script src="/node_moduls/als-component/component.js"></script>

<!-- Here will appear App component-->
<div component="app"></div>

<script>
// Creating component Test (must be before App)
let Test = new Component('Test',function({testing,some},id) {
   return /*html*/`<div component="test">
      test component 
      <div>${testing}</div>
      <div>${some}</div>
   </div>`
})

// Creating component App with Test component inside
new Component('App',function(data,id) {
   let testing = 'testing variable'
   return /*html*/`<div component="app">
      ${Test.get({testing,some:'some variable'},'test-id')}
      <input type="text" value="${testing}"
         oninput="
         Test.data.testing = this.value
         Test.update()
         ">
      <div id="test">Hello from main component</div>
   </div>`
}).update() // updating component App in html

// element method
App.element() // return app html element
Test.element('test-id') // return test html element

</script>

The example above, creates 2 components(App,Test) and inserting it to <div component="app"></div>.

utility methods

let {$genId,$firstUpper,$qs,$qsa,$next,$prev,$parent,$var} = Component
$genId() //  idsxiz5j
$genId('test-') //  test-sxiz5j
$firstUpper('some'), // Some
$('#test'), // $(selector,source=document) = document.querySelctor(selector)
$$('.some'), // $$(selector,source=document) = document.querySelctorAll(selector)
$next(dom), // = dom.nextElementSibling
$prev(dom), // = dom.previousElementSibling
$parent(dom), // = dom.parentNode
$var('bg-color'), // getting value for css variable var(--bg-color)
$var('bg-color','blue'), // set new value to var(--bg-color)

export.js

For using export with express you need to add it as middleware: app.use(require('als-component').mw)

Now you have available some addition on response (res):

app.get('/',(req,res) => {
   res.component(componentName,fn,data,update=false) // creating components
   res.fns // array for functions which will be available on Component.fnName
   return res.end(`
      <some html>
      ${res.exportComponents() // publishing components and functions}
   `)
})

Let's see how todo application will work with Component. The files we will need:

• todo.js - component for single todo
• todos.js - component for all todos, which will use component todo
• data.js - with todos array
• addnew.js - action for adding new todo
• server.js - server using express and running the app

todo.js

module.exports = function(todo,id){
   return /*html*/`<div component="todo" id="${id}" 
      ${todo.completed ? 'style="text-decoration:line-through"' : ''}
      onclick="
         Todo['${id}'].completed = !Todo['${id}'].completed;
         Todo.update(undefined,'${id}')
         ">
      ${todo.title}
   </div>`
}

todos.js

module.exports = function (data,id){
   return /*html*/`<div component="todos">
      ${data.map(todo=> Component.Todo.get(
         todo,
         Component.Todo.genId('todo')
      )).join('')}
   </div>`
}

data.js

module.exports = [
   {title: "delectus aut autem",completed: true},
   {title: "quis ut nam facilis et officia qui",completed: false},
   {title: "fugiat veniam minus",completed: false}
]

addnew.js

module.exports = function addNew(element) {
   Component.Todos.data.unshift({title:element.value,completed:false})
   Component.Todos.update()
}

server.js

const express = require('express')
let app = express()
app.use(require('als-component').mw)
app.get('/',(req,res) => {
   res.fns.push(require('./addnew')) // Adding function
   // Defining components
   res.component('Todo',require('./todo'))
   res.component('Todos',require('./todos'),require('./data'),true)

   return res.end(/*html*/`<!DOCTYPE html>
<html lang="en">
<head>
   <title>Todos</title>
</head>
<body>
   <div component="todos"></div>
   <input type="text" onchange="Component.addNew(this)">   
   ${res.exportComponents()}
</body>
</html>`)
})
app.listen(3000)

router.js

router.js has function router(routes,defaultRoute). The function allows you to use html layout for js files and functions.

Parameters:

• routes - object where keys is a keys for ?route=key and value is a src of js file or function.
• defaultRoute - src of js file or function

Here is example:

<!DOCTYPE html>
<html lang="en">
<head>
   <script src="/node_modules/als-component/component.js"></script>
   <script src="/node_modules/als-component/router.js"></script>
   <title>Some</title>
</head>
<body>
   <nav>
      <a href="?route=test">test</a>
      <a href="?route=test1">test1</a>
   </nav>
   <main component="main"></main>
</body>
<script>
   router({
      test1:'/test1.js',
      test:() => new Componenet('test',/*html*/`
         <main component="main">Hello from test fn</main>
      `).update()
   },'/home.js')
</script>
</html>

test1.js

new Componenet('Test',/*html*/`
   <main component="main">Hello from test1.js</main>
`).update()

home.js

Component.$(['component=main']).innerHTML = /*html*/`
Home page - default page if route not found.
`