als-layout 2.2.0 → 2.4.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

@@ -1,5 +1,4 @@
 function componentHierarchy(elements) {
-
    const entries = elements
       .map(el => ([el, el.getAttribute('component'), el.ancestors]))
       .sort((a, b) => a[2].length - b[2].length)
@@ -7,19 +6,13 @@ function componentHierarchy(elements) {
    const result = []
    while(entries.length > 0) {
       const [element, componentName, ancestors] = entries.shift()
-      if(element.getAttribute('part') !== null) {
+      const partsInside = element.$$('[component]')
+      if(element.getAttribute('publish') === null) {
          element.removeAttribute('component')
-         element.removeAttribute('part')
+         element.removeAttribute('publish')
          continue
       }
-      const partsInside = element.$$('[component][part]')
-      partsInside.forEach(element => { element.removeAttribute('part') });
-      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.`);
-         }
-      });
+      partsInside.forEach(element => { element.setAttribute('publish','') });
       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.4.0",
   "description": "Html layout constructor",
   "main": "index.js",
   "directories": {

package/readme.md

@@ -5,9 +5,6 @@
 ### What is it?
 `als-layout` is a JavaScript library designed to simplify and enhance the process of constructing and managing web page layouts. It provides a comprehensive API for modifying HTML documents dynamically, allowing developers to add, update, and manipulate various elements such as meta tags, styles, scripts, and more.
 
-### Why is it needed?
-Managing HTML document structures and their contents can often become repetitive and error-prone when done manually. `als-modular` offers a structured and reusable approach, reducing development time and improving code maintainability.
-
 ### What can you do with it and where can it be used?
 The `als-layout` library is versatile, suitable for:
 - Building dynamic web pages that require frequent updates to their metadata, styles, or scripts.
@@ -25,8 +22,16 @@ npm i als-layout
 ```js
 const Layout = require('als-layout')
 ```
-
+
 ## Change Log 
+* V2.4.0
+  * child components published issue fixed
+  * removed throwing error for recursive components
+* 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
@@ -90,7 +98,7 @@ Example how it works:
 ```js
 const layout = new Layout().charset().viewport().title('On load').onload()
 layout.body.innerHTML = /*html*/`<div onload="this.innerHTML = 'new content'">original content</div>`
-```
+```
 ## Cloning Functionality
 
 ### What is Cloning and Why is it Necessary?
@@ -110,7 +118,7 @@ const newLayout = layout.clone;
 
 Cloning is particularly useful in scenarios where templates or base layouts are used repeatedly with slight variations, providing a robust and scalable solution for web page generation.
 
-
+
 ## Advanced Usage
 
 The `als-layout` library allows for sophisticated manipulation of web page layouts, providing robust tools for creating dynamic and complex web pages. Below is an advanced example demonstrating various capabilities of the library:
@@ -154,7 +162,7 @@ In this example:
 
 This advanced example illustrates how `als-layout` can be used to handle complex scenarios and requirements in web development, enhancing the flexibility and power at your disposal.
 
-
+
 ## Rendering
 
 Each instance of `Layout` comes equipped with a `render` method that compiles the HTML structure and embeds a JavaScript object to manage the page dynamically. This object, known as `window.$App`, allows for real-time interaction and updates within the page.
@@ -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>
@@ -46,6 +46,6 @@ describe('Basic tests', () => {
          </div>
       </div>`)
       
-      assert.throws(() => componentHierarchy(shuffleArray(root.$$('[component]'))))
+      assert.doesNotThrow(() => componentHierarchy(shuffleArray(root.$$('[component]'))))
    })
 })

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) => {};