als-component - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

component.js

 class Component {
    constructor(componentName,fn,data) {
-      this.start = Component.genId()
+      this.start = Component.$genId()
       this.$id=0
-      componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
-      this.componentName = componentName
+      this.componentName = Component.$firstUpper(componentName)
       this.fn = fn
       this.data = data
-      Component[componentName] = this
+      Component[this.componentName] = this
    }
 
+   get(data,id) {this.update(data,id,false)}
+
    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 {
@@ -22,3 +21,3 @@ if(this.data == undefined) this.data = data
       }
-      let element = document.querySelector(selector)
+      let element = this.element(id)
       if(element !== null && updateElement) {
@@ -29,2 +28,9 @@ element.outerHTML = this.fn(data,id)
 
+   element(id) {
+      let selector = `[component=${this.componentName}]`.toLowerCase()
+      if(id) selector += `#${id}`
+      try {return document.querySelector(selector)
+      } catch {return null}
+   }
+
    genId(start=this.start) {
@@ -35,4 +41,15 @@ let id = start+this.$id
    }
-   static genId(start='id') {return`${start}${(Math.random() + 1).toString(36).substring(7)}`}
+   static $genId = (start='id') => `${start}${(Math.random() + 1).toString(36).substring(7)}`
+   static $firstUpper = (string)  => string[0].toUpperCase() + string.substring(1)
+   static $ = (selector,source=document) => source.querySelector(selector)
+   static $$ = (selector,source=document) => [...source.querySelectorAll(selector)]
+   static $next = (element) => element.nextElementSibling
+   static $prev = (element) => element.previousElementSibling
+   static $parent = (element) => element.parentNode
+	static $var(varName,varValue) {
+		if(varValue == undefined) return getComputedStyle(document.documentElement).getPropertyValue('--'+varName)
+		else document.documentElement.style.setProperty('--'+varName,varValue)
+		return varValue
+	}
 }
 try {module.exports = Component} catch{}

package.json

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

readme.md

 # Als-component
 
 ## About
-Als-component allows you to manage dom content with JavaScript.
+Als-component allows you to manage dom content as components with JavaScript.
 
-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 
+```js
+/*html*/`html code`
+```
 
@@ -12,3 +15,17 @@ *new in 0.5*
 
+*new in 0.6*
+* component(object) methods:
+  * get method
+  * element method
+* Component (class) methods
+  * $genId
+  * $firstUpper
+  * $
+  * $$
+  * $next
+  * $prev
+  * $parent
+  * $var
 
+
 There are 3 files:
@@ -24,2 +41,3 @@ 1. component.js - for frontend usage
    .update(data,id,updateElement=true)
+   .get(data,id) // => update(data,id,false)
 ```
@@ -44,3 +62,10 @@
 
-Example:
+
+### Name convention
+   Component.Upper - Component
+   Component.lower - fn
+   Component.$fn - $utility
+
+
+### Example
 ```html
@@ -67,3 +92,3 @@ <!-- Include component.js -->
    return /*html*/`<div component="app">
-      ${Test.update({testing,some:'some variable'})}
+      ${Test.get({testing,some:'some variable'},'test-id')}
       <input type="text" value="${testing}"
@@ -77,2 +102,7 @@ oninput="
 }).update() // updating component App in html
+
+// element method
+App.element() // return app html element
+Test.element('test-id') // return test html element
+
 </script>
@@ -84,2 +114,20 @@ ```
 
+### utility methods
+
+```js
+let {$genId,$firstUpper,$qs,$qsa,$next,$prev,$parent,$var} = Component
+$genId() //  idsxiz5j
+$genId('test-') //  test-sxiz5j
+$firstUpper('some'), // Some
+$('#test'), // $(selector,source=document) = document.querySelctor(selector)
+$$('.some'), // $$(selector,source=document) = document.querySelctorAll(selector)
+$next(dom), // = dom.nextElementSibling
+$prev(dom), // = dom.previousElementSibling
+$parent(dom), // = dom.parentNode
+$var('bg-color'), // getting value for css variable var(--bg-color)
+$var('bg-color','blue'), // set new value to var(--bg-color)
+```
+
+
+
 ## export.js
@@ -101,2 +149,10 @@ For using export with express you need to add it as middleware:
 
+Let's see how todo application will work with Component. The files we will need:
+1. todo.js - component for single todo
+2. todos.js - component for all todos, which will use component todo
+3. data.js - with todos array
+4. addnew.js - action for adding new todo
+5. server.js - server using express and running the app
+
+
 **todo.js**
@@ -120,3 +176,3 @@ ```javascript
    return /*html*/`<div component="todos">
-      ${data.map(todo=> Component.Todo.update(
+      ${data.map(todo=> Component.Todo.get(
          todo,
@@ -219,5 +275,5 @@ Component.Todo.genId('todo')
 ```javascript
-document.querySelector(['component=main']).innerHTML = /*html*/`
+Component.$(['component=main']).innerHTML = /*html*/`
 Home page - default page if route not found.
 `
 ```

router.js

@@ -13,6 +13,4 @@ function router(routes,byDefault) {
       let route = routeMatch[0].split('=')[1]
-      if(Object.keys(routes).includes(route)) {
-         runRoute(routes[route])
-      }
+      if(Object.keys(routes).includes(route)) runRoute(routes[route])
    } else if(byDefault) runRoute(byDefault)
 }

No alert changes

Improved metrics

Total package byte prevSize

11348

23.55%

Lines of code

89

17.11%

Number of lines in readme file

271

26.05%

No dependency changes