als-layout 2.2.0 → 2.3.0

package/docs/0-change-log.md

@@ -1,4 +1,9 @@
 ## Change Log 
+* V2.3.0
+  * Default, component will not be included in $App, if not [publish] attribute
+  * When cloning, components and other staff cloned too
+    * Reference does not change
+
 * V2.2.0
   * fixed empty update function if no components for $App
   * if component function return string, it will element.innerHTML = string
@@ -9,8 +14,10 @@
     * lang method instead
   * no layout.cached
   * charset meta tag allready exists by default
+
 * V2.1.0
   * updated als-document version
   * [part] attribute for static components
   * onload() method
-  * bugs fixed
+  * bugs fixed
+

package/docs/4-render.md

@@ -52,7 +52,7 @@ layout.actions = {
 // Add buttons and the counter display to the body
 layout.body.innerHTML = /*html*/`
 <button onclick="$App.actions.increase()">Increase</button>
-<span component="counter"></span>
+<span component="counter" publish></span>
 <button onclick="$App.actions.decrease()">Decrease</button>
 `
 
@@ -68,4 +68,4 @@ fs.writeFileSync('counter.html', rawHtml, 'utf-8')
 
 ### Advanced Rendering Details
 - **Component Indexing:** Each component is assigned a `componentIndex` during rendering, providing a unique index within its parent component.
-- **Part Attribute:** Using the `part` attribute in a component prevents it from being added to `$App.components`, unless it is nested within another component.
+- **Publish Attribute:** Using the `publish` attribute in a component make it being added to `$App.components`, unless it is nested within another component.

package/lib/layout.js

@@ -8,15 +8,17 @@ const {
 } = require('./elements/index')
 
 class Layout extends Document {
-   constructor(html,url) {
+   constructor(html,url,doc = {}) {
       super(html,url)
-      this.components = {}
-      this.data = {}
-      this.actions = {}
-      this.utils = {}
+      const {components = {},data = {},actions = {},utils = {}} = doc
+      this.components = components
+      this.data = data
+      this.actions = actions
+      this.utils = utils
       this.root = this.html
       this.update = update
    }
+
    onload() {this.script({},onload); return this}
    lang(lang) {this.html.setAttribute('lang',lang); return this}
    version(v) { this.v = v; return this; }
@@ -32,7 +34,7 @@ class Layout extends Document {
    link(href, v = this.v) { return addLink(href, v, this) }
    viewport(newViewport = 'width=device-width, initial-scale=1.0') { return viewport(newViewport, this) }
    get rawHtml() {return this.innerHTML}
-   get clone() {return new Layout(new Document(this),this.URL)}
+   get clone() {return new Layout(new Document(this),this.URL,this)}
    render() {
       const done = []
       this.update(this.root, done)

package/lib/render/component-hierarchy.js

@@ -7,19 +7,19 @@ function componentHierarchy(elements) {
    const result = []
    while(entries.length > 0) {
       const [element, componentName, ancestors] = entries.shift()
-      if(element.getAttribute('part') !== null) {
-         element.removeAttribute('component')
-         element.removeAttribute('part')
-         continue
-      }
-      const partsInside = element.$$('[component][part]')
-      partsInside.forEach(element => { element.removeAttribute('part') });
+      const partsInside = element.$$('[component]')
+      partsInside.forEach(element => { element.setAttribute('publish','') });
       entries.forEach(entry => {
          if(entry[1] !== componentName) return
          if(entry[2].includes(element)) {
             throw new Error(`The component '${componentName}' acts as both a parent and a child, which may complicate rendering.`);
          }
       });
+      if(element.getAttribute('publish') === null) {
+         element.removeAttribute('component')
+         element.removeAttribute('publish')
+         continue
+      }
       if(!result.includes(componentName)) result.push(componentName)
    }
    return result

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "als-layout",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Html layout constructor",
   "main": "index.js",
   "directories": {

package/readme.md

@@ -27,6 +27,11 @@ const Layout = require('als-layout')
 ```
 
 ## Change Log 
+* V2.3.0
+  * Default, component will not be included in $App, if not [publish] attribute
+  * When cloning, components and other staff cloned too
+    * Reference does not change
+
 * V2.2.0
   * fixed empty update function if no components for $App
   * if component function return string, it will element.innerHTML = string
@@ -37,11 +42,14 @@ const Layout = require('als-layout')
     * lang method instead
   * no layout.cached
   * charset meta tag allready exists by default
+
 * V2.1.0
   * updated als-document version
   * [part] attribute for static components
   * onload() method
-  * bugs fixed
+  * bugs fixed
+
+
 ## Basic Usage
 
 ### Initialization
@@ -209,7 +217,7 @@ layout.actions = {
 // Add buttons and the counter display to the body
 layout.body.innerHTML = /*html*/`
 <button onclick="$App.actions.increase()">Increase</button>
-<span component="counter"></span>
+<span component="counter" publish></span>
 <button onclick="$App.actions.decrease()">Decrease</button>
 `
 
@@ -225,4 +233,4 @@ fs.writeFileSync('counter.html', rawHtml, 'utf-8')
 
 ### Advanced Rendering Details
 - **Component Indexing:** Each component is assigned a `componentIndex` during rendering, providing a unique index within its parent component.
-- **Part Attribute:** Using the `part` attribute in a component prevents it from being added to `$App.components`, unless it is nested within another component.
+- **Publish Attribute:** Using the `publish` attribute in a component make it being added to `$App.components`, unless it is nested within another component.

package/tests/build-app.test.js

@@ -17,13 +17,13 @@ describe('build-$App Functionality', () => {
       const called = []
       const done = [
          { 
-            getAttribute: (attr) => attr === 'component' ? 'comp1' : null,
+            getAttribute: (attr) => attr === 'component' ? 'comp1' : attr === 'publish' ? '' : null,
             removeAttribute(att) {called.push(att)},
             $$(){return []},
             ancestors:2 
          },
          { 
-            getAttribute: (attr) => attr === 'component' ? 'comp2' : null,
+            getAttribute: (attr) => attr === 'component' ? 'comp2' : attr === 'publish' ? '' : null,
             removeAttribute(att) {called.push(att)},
             $$(){return []},
             ancestors:2 

package/tests/component-hierarchy.test.js

@@ -13,7 +13,7 @@ function shuffleArray(array) {
 
 describe('Basic tests', () => {
    it('should build correct hierarchy', () => {
-      const root = parseHTML(/*html*/`<div component="some">
+      const root = parseHTML(/*html*/`<div component="some" publish>
          <div>
             <div component="some1"></div>
             <div>

package/tests/layout.test.js

@@ -111,7 +111,7 @@ describe('Component Updating', () => {
          element.insert(2, 'test1 success')
       }
       layout.data.test = 'hello'
-      layout.body.innerHTML = /*html*/`<div component="test1">
+      layout.body.innerHTML = /*html*/`<div component="test1" publish>
          <div component="test2">failed</div>
       </div>`
 
@@ -132,8 +132,8 @@ describe('Component Updating', () => {
 
    it('should add part to $App if it is component`s descendant', () => {
       layout.body.innerHTML = /*html*/`
-         <div component="parent">
-            <div component="child" part></div>
+         <div component="parent" publish>
+            <div component="child"></div>
          </div>`;
       layout.components.parent = (element, $App) => {};
       layout.components.child = (element, $App) => {};
@@ -151,8 +151,8 @@ describe('Component Updating', () => {
 
    it('should not add part to $App if it has no component ancestor', () => {
       layout.body.innerHTML = /*html*/`
-      <div component="comp1"></div>
-      <div component="comp2" part></div>
+      <div component="comp1" publish></div>
+      <div component="comp2"></div>
       `;
       layout.components.comp1 = (element, $App) => {};
       layout.components.comp2 = (element, $App) => {};