als-component - npm Package Compare versions

Comparing version 0.8.0 to 0.8.5

component.js

@@ -45,3 +45,4 @@ class Component {
          if(element !== null) {
-            element.outerHTML = this.fn(data,id)
+            // element.outerHTML = this.fn(data,id)
+            this.bindDom(this.fn(data,id),element)
             Component.mountList.forEach(({Cname,id,data}) => {
@@ -62,2 +63,16 @@ if(id) Component[Cname].element(id).data = data
    
+   bindDom(html,element) {
+      if(this.onDom !== undefined || Component.onDom !== undefined) {
+         let dom = document.createElement('template')
+         let child = document.createElement('div')
+         dom.appendChild(child)
+         child.outerHTML = html
+         if(this.onDom) this.onDom(dom.children[0],dom)
+         if(Component.onDom) Component.onDom(dom.children[0],dom)
+   
+         element.insertAdjacentElement('beforebegin',dom.children[0])
+         element.remove()
+      } else element.outerHTML = html
+   }
+
    ref(ref,add='') {
@@ -84,3 +99,3 @@ let selector = `[component=${this.componentName}]`.toLowerCase()
          } 
-      } else this.data = data
+      } else if(data !== undefined) this.data = data
    }
@@ -87,0 +102,0 @@

package.json

 {
   "name": "als-component",
-  "version": "0.8.0",
+  "version": "0.8.5",
   "description": "Managing components and states.",
-  "main": "component.js",
+  "main": "main.js",
   "author": "Alex Sorkin",
   "license": "MIT"
 }

readme.md

@@ -15,3 +15,5 @@ # Als-component
   - [Simple redux system](#simple-redux-system)
-  - [Highliting and snippets](#highliting-and-snippets)
+  - [Quick snippets](#quick-snippets)
+  - [Build with Vite](#build-with-vite)
+  - [Export in express](#export-in-express)
 
@@ -23,3 +25,7 @@
 
-**new in 0.08**
+**New in 0.8.5**
+* this.onDom and Component.onDom hook
+* export with express has returned
+
+**new in 0.8**
 * export.js for express removed
@@ -133,3 +139,4 @@ * ref(ref,add='') - add reference to dom elements
   3. this.fn(data,id)
-  4. this.onMount(data,id)
+  4. this.onDom(element,parentTemplate) / Component.onDom(element,parentTemplate)
+  5. this.onMount(data,id)
 
@@ -153,3 +160,3 @@ ```html
 
-  return /*html*/`<div>
+  return /*html*/`<div bgc="pink">
       <button onclick="$CCounter.update($CCounter.data+1)">+</button>
@@ -166,2 +173,9 @@ <span ref="counter">${this.data}</span>
 
+// The dom content ready, but still didn't mounted (not visible)
+$CTodos.onDom = function(element,parentTemplate) {
+  element.style.backgroundColor = element.getAttribute('bgc')
+}
+// If it's Component.onDom - it will related to all dom updates
+
+
 $CCounter.update(0)
@@ -278,16 +292,4 @@ </script>
 
-## Highliting and snippets
+## Quick snippets
 
-**Add Component highligting:**
-1. Install plugin ``Highlight`` : Fabio Spampinato
-2. Go to Extension settings > Edit in settings.json
-3. Add to "highlight.regexes"
-```json
-"(\\$C(\\w?)*)": {"decorations": [
-   {"color": "#00FFFF","fontWeight": "bold"},
-]},
-```
-
-**Add quick cnippets**
-
 1. Install plugin: ``es6-string-html plugin``.
@@ -310,1 +312,124 @@
 
+## Build with Vite
+You can use Vite for building projects as you do in React. 
+
+Just do the folowing:
+1. Install Vite with ``npm create vite@latest`` (choose vanila)
+2. install all packages for Vite (npm install) and then Component ``npm i als-component``
+3. Update main.js with the folowing:
+
+```javascript
+import {Component} from 'als-component'
+$C('app',function() {
+  return /*html*/`
+  <div>Hello From component App</div>
+  `
+}).update()
+```
+That's all!
+
+
+## Export in express
+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
+app.use(require('als-component').mw)
+app.get('/',(req,res) => {
+   res.component(componentName,fn,data,update=false) // creating components
+   res.fns // object for actions
+   return res.end(`
+      <some html>
+      ${res.exportComponents() // publishing components and functions}
+   `)
+})
+```
+
+
+Example:
+The folowing example using express and node-fetch with ``"type":"module""`` in package.json form import. 
+
+**todo.js**
+```javascript
+export default function(todo,id) {
+   let {title,completed} = todo
+   this.actions.handleClick = (todoid,id) => {
+      let index = $CTodos.data.findIndex(todo => todo.id == todoid)
+      $CTodos.data[index].completed = !$CTodos.data[index].completed
+      $CTodos.update($CTodos.data)
+   }
+
+   this.actions.delete = (id) => {
+      let data = $CTodos.data.filter(todo => todo.id !== id)
+      $CTodos.update(data)
+   }
+   if(completed) this.done++
+   return /*html*/`<div>
+      ${this.done == 1 ? /*html*/`<br><div>Done:</div><hr>` : ''}
+      <button onclick="$cTodo.delete(${todo.id})">&times;</button>
+      <span onclick="$cTodo.handleClick('${todo.id}','${id}')"
+      style="${completed ? 'text-decoration:line-through' : ''}">${title}</span>
+   </div>
+   `
+}
+```
+
+**todos.js**
+```javascript
+export default function() {
+   this.actions.addNew = function(event){
+      if(event.key === 'Enter') {
+         let newTodo = {
+            id:$CTodos.lastId++,
+            title:event.target.value,
+            completed:false
+         }
+         $CTodos.data.unshift(newTodo)
+         $CTodos.update($CTodos.data)
+      }
+   }
+   let todos = this.data
+   todos.sort((a,b) => a.completed < b.completed ? -1 : 1)
+   $CTodo.done = 0
+   return /*html*/`
+      <div bgc="pink">${todos.map(todo => 
+         $CTodo.get(todo,'todo'+todo.id)
+      ).join('')}</div>
+   `
+}
+```
+
+**server.js**
+```javascript
+import express from 'express'
+import component from 'als-component'
+import fetch from 'node-fetch'
+import todo from './todo.js'
+import todos from './todos.js'
+
+let app = express()
+app.use(component.mw)
+app.get('/',async (req,res) => {
+   let response = await fetch('https://jsonplaceholder.typicode.com/todos')
+   let data = await response.json()
+
+   res.component('todo',todo)
+   res.component('todos',todos,data,true)
+   
+   return res.end (/*html*/`<!DOCTYPE html>
+      <html lang="en">
+      <head>
+         <title>Component export</title>
+      </head>
+      <body>
+         <input type="text" onkeydown="$cTodos.addNew(event)">
+         <div component="todos"></div>
+      </body>
+      ${res.exportComponents()}
+      </html>
+   `)
+})
+
+app.listen(3000)
+```

No alert changes

Improved metrics

Total package byte prevSize

20388

37.39%

Number of package files

5

66.67%

Lines of code

186

34.78%

Number of lines in readme file

428

40.79%

No dependency changes