New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

als-component

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

als-component - npm Package Compare versions

Comparing version

0.3.1
to
0.4.0

19

component.js
class Component {
constructor(componentName,fn,data={}) {
constructor(componentName,fn,data) {
this.componentName = componentName

@@ -9,7 +9,18 @@ this.fn = fn

update(id=this.componentName,data=this.data) {
document.getElementById(id).outerHTML = this.fn(id,data)
update(data,id,updateElement=true) {
let selector = `[component=${this.componentName}]`.toLowerCase()
if(id) {
if(this[id] == undefined) this[id] = data
else if(data == undefined) data = this[id]
selector += `#${id}`
} else {
if(this.data == undefined) this.data = data
else if(data == undefined) data = this.data
}
let element = document.querySelector(selector)
if(element !== null && updateElement) element.outerHTML = this.fn(data,id)
else return this.fn(data,id)
}
}
try {module.exports = Component} catch{}

5

export.js

@@ -5,3 +5,4 @@ function exportComponents(components = res.components,fns=res.fns) {

fns.forEach(fn => {
result += `Component.${fn.name} = ${fn.toString()}`
result += `
Component.${fn.name} = ${fn.toString()}`
});

@@ -12,3 +13,3 @@ for(let componentName in components) {

result += `
let ${varName} = new Component('${componentName}',${fn.toString()},${JSON.stringify(data)})
let ${varName} = new Component('${varName}',${fn.toString()},${JSON.stringify(data)})
${update ? `${varName}.update()` : ''}

@@ -15,0 +16,0 @@ `

2

package.json
{
"name": "als-component",
"version": "0.3.1",
"version": "0.4.0",
"description": "Managing components and states.",

@@ -5,0 +5,0 @@ "main": "export.js",

225

readme.md

@@ -6,34 +6,85 @@ # Als-component

**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`.
To show html colored code inside string in js, use es6-string-html plugin in vsCode and /*html*/`html code`.
There are two files:
There are 3 files:
1. component.js - for frontend usage
2. export.js - for node.js usage
3. router.js - for frontend routing
## Component.js
Syntax:
```javascript
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:
```html
<div component="some" id="some"></div>
<input type="text" oninput="Some.update('some',{test:'Hello again'})">
<!-- Include component.js -->
<script src="/node_moduls/als-component/component.js"></script>
<!-- Here will appear App component-->
<div component="app"></div>
<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>
// 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>
```
## Todo application
The example above, creates 2 components(App,Test) and inserting it to ``<div component="app"></div>``.
**data.js**
## 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):
```javascript
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{}
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}
`)
})
```

@@ -43,17 +94,12 @@

```javascript
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>
`
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>`
}
try {module.exports = todo} catch{}
```

@@ -63,46 +109,31 @@

```javascript
function todos(id,data) {
module.exports = function (data,id){
return /*html*/`
<div component="todos" id="todos">
${data.map(el => Component.todo.fn(el.id)).join('')}
<div component="todos">
${data.map(todo=> Component.Todo.update(
todo,
`todo${(Math.random() + 1).toString(36).substring(7)}`
)).join('')}
</div>
`
}
try {module.exports = todos} catch{}
```
**data.js**
```javascript
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**
```javascript
function addNew(title) {
let ids = data.map(obj => obj.id)
let id = Math.max(...ids) +1
data.push({id,title,completed:false})
Todos.update()
module.exports = function addNew(element) {
Component.Todos.data.unshift({title:element.value,completed:false})
Component.Todos.update()
}
try {module.exports = addNew} catch{}
```
## Frontend usage
```html
<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>
```
## Express usage
**server.js**

@@ -114,12 +145,8 @@ ```javascript

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)
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>
return res.end(/*html*/`<!DOCTYPE html>
<html lang="en">

@@ -130,7 +157,4 @@ <head>

<body>
<div>
Add new
<input type="text" onchange="Component.addNew(this.value)">
</div>
<div component="todos" id="todos"></div>
<div component="todos"></div>
<input type="text" onchange="Component.addNew(this)">
${res.exportComponents()}

@@ -143,2 +167,3 @@ </body>

## router.js

@@ -148,2 +173,7 @@

**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:

@@ -157,11 +187,3 @@

<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>
<title>Some</title>
</head>

@@ -173,20 +195,27 @@ <body>

</nav>
<main id="main"></main>
<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 file
**test1.js**
```javascript
new Componenet('test',/*html*/`
<main id="main">Hello from test1.js</main>
`).update('main')
new Componenet('Test',/*html*/`
<main component="main">Hello from test1.js</main>
`).update()
```
home.js file
**home.js**
```javascript
let main = document.getElementById('main')
main.innerHTML = /*html*/`
<main>Home page - default page if route not found.</main>
document.querySelector(['component=main']).innerHTML = /*html*/`
Home page - default page if route not found.
`
```