als-component

Als-component

About

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

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

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)

Parameters:

• new Component(ComponentName,fn,data)
  • ComponentName - Name of component, which will be available as Component.componentName
    • Has to start with capital
  • 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

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.update({testing,some:'some variable'})}
      <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
</script>

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

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}
   `)
})

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.update(
         todo,
         `todo${(Math.random() + 1).toString(36).substring(7)}`
         )).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

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