als-component
Advanced tools
Table of contents
Als-component allows you to manage dom content as components with JavaScript like you do it in React, but in more simple way. You can use sane Component on backend and on frontend.
New in 0.9.6
New in 0.9.5
als-front-importWe are closer than ever to final release!
npm i als-componentcomponent.js to your head inside html<head>
<script src="node_modules/als-component/component.js"></script>
</head>
Component classThe component.js has class Component which do all the magic behind the scenes. You need to create new component and then get it result or update it to existing html element.
The syntax:
// Static methods
Component.components // includes all components
Component.ref(ref,add='') // select dom element with ref="ref" and add (additional selector)
Component.qs(selector,dom=document) // dom.querySelector(selector)
Component.qsa(selector,dom=document) // [...dom.querySelectorAll(selector)]
Component.vars // empty object for variables
Component.actions // empty object for actions and $ method
Component.dispatch(componentName,action,data,id)
Component == window.$C // true - by default $C available as reference to Component
let c = new Component(ComponentName,fn,data)
c.update(data,id,updateElement=true) // return created dom html element
c.get(data,id) // return string html
c.element(id) // return component's element, if id - with specific id
c.ref(ref,add) // return element inside component's element with selector [ref=ref]add
c[id] = {update,get,data,element,id} // data and elements are getters
c.methods // object for methods
c.methods.$ // getter for component object - available as this.$ in method
c.actions // object for action functions
c.actions.dispatch(action,data,id)
c.actions.$ // getter for component object - available as this.$ in actions
c.vars // object for variables
Parameters:
new Component(ComponentName,fn,data)
Component.componentName.data or Component.componentName.ids.id.data if there is idupdate(data,id,updateElement=true)
get(data,id) - same as update(data,id,false)
element(id)
ref(ref,add='')
<div component="counter"></div>
<script>
new $C('counter',function() {
if(this.data <0) this.data = 0
return /*html*/`<div>
<button onclick="$C.Counter.update($C.Counter.data+1)">+</button>
<span>${this.data}</span>
<button onclick="$C.Counter.update($C.Counter.data-1)">-</button>
</div>`
}).update(0)
</script>
You can add functions for executing on different stages of binding process.
Life cycle for update/get
Here example for hooks:
<div component="counter"></div>
<script>
new $C('counter',function() {
if(this.data <0) this.data = 0
return /*html*/`<div>
<button onclick="$C.Counter.update($C.Counter.data+1)">+</button>
<span>${this.data}</span>
<button onclick="$C.Counter.update($C.Counter.data-1)">-</button>
</div>`
})
// Before running fn
$C.Counter.before = function(data,id) {
console.log('before',data)
}
// Then dom element is ready, but not mounted yet
// Runing in all components
Component.onDom = function(element) {
console.log('Component.onDom')
}
// Then dom element is ready, but not mounted yet
$C.Counter.onDom = function(element) {
console.log('Counter.onDom')
}
// Then dom mounted first time - runing only once
$C.Counter.onFirstMount = function(data,id) {
console.log('onFirstMount',data)
}
// Runing every time after dom has mounted
$C.Counter.onMount = function(data,id) {
console.log('onMount',data)
}
$C.Counter.update(0)
</script>
On example above, on first run youll get on console:
before 0
Component.onDom
Counter.onDom
onFirstMount 0
onMount 0
After clicking on minus:
before -1
Component.onDom
Counter.onDom
onMount 0
Each Component object has actions object.
You can add to this objects your actions for modifying data. The action has to return new data for update the component.
dispatch method which update component with data that action returnthis.$ which reference to Component's objectAlso you have Component.actions object and Component.dispatch(componentName,action,data,id) which update component with componentName with data that action will return.
Syntax
let Test = new Component('test',function() {})
Test.actions.testing = function(data,id) {
console.log(this.$) // Test component
return data
}
Test.dispatch('testing',{})
Let's see Todos app example that manage todos with localstorage and containes 3 files:
Part of index.html
<script src="/node_modules/als-component/component.js"></script>
<input type="text" placeholder="add todo"
onchange="Todos.dispatch('add',this)">
<div component="todos"></div>
<script src="todo.js"></script>
<script src="todos.js"></script>
todos.js
let Todos = new Component('todos',function(data) {
this.vars.isHr = true
return /*html*/`<div>
${data.map(todo => $C.Todo.get(todo,todo.id)).join('')}
</div>`
})
Todos.before = function(data,id) {
if(data == undefined) {
data = localStorage.getItem('todos') || {}
data = JSON.parse(data)
}
data.sort((a, b) => a.completed > b.completed ? 1 : -1);
localStorage.setItem('todos',JSON.stringify(data))
this.data = data
}
Todos.actions.add = function(element) {
let newTodo = {
name:element.value,
completed:false,
id:(Math.random() + 1).toString(36).substring(7)
}
element.value = ''
return [...this.$.data,newTodo]
}
Todos.actions.remove = function(id) {
return this.$.data.filter(obj => obj.id !== id)
}
Todos.actions.completed = function(id) {
return this.$.data.map(obj => {
if(obj.id == id) obj.completed = !obj.completed
return obj
})
}
Todos.update()
todo.js
new Component('todo',function({name,id,completed,hr=''}){
if(completed && Todos.vars.isHr) {
hr = /*html*/`<hr>`
Todos.vars.isHr = false
}
return /*html*/`<div>
${hr}
<button onclick="Todos.dispatch('remove','${id}')">×</button>
<span onclick="Todos.dispatch('completed','${id}')"
${completed ? 'style="text-decoration: line-through;"' : ''}
>${name}</span>
</div>`
})
To show html highlighted code inside string in js, use es6-string-html plugin in vsCode and
/*html*/`html code`
Install plugin: es6-string-html plugin.
File > Preferences > Configure user snippets > javascript
Add:
"html": {
"prefix": "html",
"body": ["/*html*/`$1`"],
"description": "colored html"
},
"rhtml": {
"prefix": "rhtml",
"body": ["return /*html*/`$1`"],
"description": "return colored html"
},
You can use Vite for building projects as you do in React.
Just do the folowing:
npm create vite@latest (choose vanila)npm i als-componentimport {Component} from 'als-component'
new Component('app',function() {
return /*html*/`
<div>Hello From component App</div>
`
}).update()
That's all!
You can use components inside your Express and then export them to frontend. Each time you add new Component, you need to export the updated Component class as shown on example below.
server.js
let express = require('express')
let app = express()
let {Component,Export} = require('als-component')
global.Component = $C = Component
app.get('/',[
(req,res,next) => {
require('./app')
next()
},
(req,res) => {
let name = 'Alex'
return res.end (/*html*/`<!DOCTYPE html>
<html lang="en">
<head>
<title>Component export</title>
</head>
<body>
<input type="text" value="${name}"
oninput="Component.App.update({name:this.value})">
${Component.App.get({name})}
</body>
<script>${Export(Component)}</script>
</html>
`)
}])
app.listen(3000)
app.js
new Component('app',function(data) {
return /*html*/`
<div>Hello ${data.name}</div>
`
})
$C.App.onLoad = function() {
console.log('hello')
}
Example above, showing the way for using Component on frontent and on backend. Here are the highlights:
FAQs
lightweight JavaScript library for creating reactive, server-rendered, and browser-based components.
The npm package als-component receives a total of 9 weekly downloads. As such, als-component popularity was classified as not popular.
We found that als-component demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.
Security News
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.
Security News
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.