als-component - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

component.js

 class Component {
    constructor(componentName,fn,data) {
+      this.start = Component.genId()
+      this.$id=0
+      componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
       this.componentName = componentName
@@ -19,8 +22,15 @@ this.fn = fn
       }
-
       let element = document.querySelector(selector)
-      if(element !== null && updateElement) element.outerHTML = this.fn(data,id)
-      else return this.fn(data,id)
+      if(element !== null && updateElement) {
+         element.outerHTML = this.fn(data,id)
+      } else return this.fn(data,id)
    }
+
+   genId(start=this.start) {
+      let id = start+this.$id
+      this.$id++
+      return id
+   }
+   static genId(start='id') {return`${start}${(Math.random() + 1).toString(36).substring(7)}`}
 }
 try {module.exports = Component} catch{}

package.json

 {
   "name": "als-component",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Managing components and states.",
@@ -5,0 +5,0 @@ "main": "export.js",

readme.md

@@ -8,3 +8,7 @@ # Als-component
 
+*new in 0.5*
+* auto capitalize component name on constructor
+* ``component.genId(start)`` method - generating id and increasing it automaticly
 
+
 There are 3 files:
@@ -25,3 +29,3 @@ 1. component.js - for frontend usage
   * **ComponentName** - Name of component, which will be available as Component.componentName
-    * Has to start with capital
+    * Has to start with capital (constructor will capitalize first letter anyway)
   * **fn** - function(data,id) which has to return html code 
@@ -99,4 +103,4 @@ * html code has to be between ``<tag component="componentName" id="id"></tag>``
       onclick="
-         Todo[id].completed = !Todo[id].completed;
-         Todo.update(undefined,id)
+         Todo['${id}'].completed = !Todo['${id}'].completed;
+         Todo.update(undefined,'${id}')
          ">
@@ -111,10 +115,8 @@ ${todo.title}
 module.exports = function (data,id){
-   return /*html*/`
-   <div component="todos">
+   return /*html*/`<div component="todos">
       ${data.map(todo=> Component.Todo.update(
          todo,
-         `todo${(Math.random() + 1).toString(36).substring(7)}`
-         )).join('')}
-   </div>
-   `
+         Component.Todo.genId('todo')
+      )).join('')}
+   </div>`
 }
@@ -121,0 +123,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

9185

6.11%

Lines of code

76

15.15%

Number of lines in readme file

215

0.94%

No dependency changes