als-component
Advanced tools
Als-component allows you to manage dom content with JavaScript.
new in V0.3 : router.js
To show html colored code inside string in js, use es6-string-html plugin in vsCode and /html/html code.
There are two files:
<div component="some" id="some"></div>
<input type="text" oninput="Some.update('some',{test:'Hello again'})">
<script src="/node_moduls/als-component/component.js"></script>
<script>
let componentName = 'some'
let data = {test:'hello world'}
let fn = (id,data) => /*html*/`<div component="some" id="some">${data.test}</div>`
let Some = new Component(componentName,fn,data)
<script>
data.js
let data = [
{"userId": 1,"id": 1,"title": "delectus aut autem","completed": false},
{"userId": 1,"id": 2,"title": "quis ut nam facilis et officia qui","completed": false},
{"userId": 1,"id": 3,"title": "fugiat veniam minus","completed": false}
]
try {module.exports = data} catch{}
todo.js
function todo(id) {
let Todos = Component.todos
let index = Todos.data.findIndex(todo => todo.id === id);
let todo = Todos.data[index]
return /*html*/`
<div component="todo" id="${id}">
<span onclick="Todos.data[${index}].completed = !Todos.data[${index}].completed; Todo.update(${id})"
style="color:${todo.completed ? 'green' : 'blue'}">
${todo.title}
</span>
<button onclick="Todos.data.splice(${index}, 1); Todos.update()">x</button>
</div>
`
}
try {module.exports = todo} catch{}
todos.js
function todos(id,data) {
return /*html*/`
<div component="todos" id="todos">
${data.map(el => Component.todo.fn(el.id)).join('')}
</div>
`
}
try {module.exports = todos} catch{}
addnew.js
function addNew(title) {
let ids = data.map(obj => obj.id)
let id = Math.max(...ids) +1
data.push({id,title,completed:false})
Todos.update()
}
try {module.exports = addNew} catch{}
<script src="/node_moduls/als-component/component.js"></script>
<div>
Add new
<input type="text" onchange="addNew(this.value)">
</div>
<div component="todos" id="todos"></div>
<script src="data.js"></script>
<script src="todo.js"></script>
<script src="todos.js"></script>
<script>
let Todo = new Component('todo',todo)
let Todos = new Component('todos',todos,data)
Todos.update()
</script>
server.js
const express = require('express')
let app = express()
app.use(require('als-component').mw)
app.get('/',(req,res) => {
let data = require('./data')
let data = require('./todo')
let data = require('./todos')
let data = require('./addnew')
res.fns.push(addNew)
res.component('todo',todo)
res.component('todos',todos,data,true)
return res.end(/*html*/`
<!DOCTYPE html>
<html lang="en">
<head>
<title>Todos</title>
</head>
<body>
<div>
Add new
<input type="text" onchange="Component.addNew(this.value)">
</div>
<div component="todos" id="todos"></div>
${res.exportComponents()}
</body>
</html>`)
})
app.listen(3000)
router.js has function router(routes,defaultRoute). The function allows you to use html layout for js files and functions.
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>
<script>
router({
test1:'/test1.js',
test:() => new Componenet('test',/*html*/`
<main id="main">Hello from test fn</main>
`).update('main')
},'/home.js')
</script>
<title>Todos</title>
</head>
<body>
<nav>
<a href="?route=test">test</a>
<a href="?route=test1">test1</a>
</nav>
<main id="main"></main>
</body>
</html>
test1.js file
new Componenet('test',/*html*/`
<main id="main">Hello from test1.js</main>
`).update('main')
home.js file
let main = document.getElementById('main')
main.innerHTML = /*html*/`
<main>Home page - default page if route not found.</main>
`
FAQs
lightweight JavaScript library for creating reactive, server-rendered, and browser-based components.
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.
Security News
Security experts warn that recent classification changes obscure the true scope of the NVD backlog as CVE volume hits all-time highs.
Security Fundamentals
Attackers use obfuscation to hide malware in open source packages. Learn how to spot these techniques across npm, PyPI, Maven, and more.
Security News
Join Socket for exclusive networking events, rooftop gatherings, and one-on-one meetings during BSidesSF and RSA 2025 in San Francisco.