als-layout 2.5.1 → 3.0.0

package/docs/#.md

@@ -1,19 +1,11 @@
 # als-layout Documentation
 
-## Library Description
-
-### 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.
 - Creating templating systems where multiple page layouts share similar structures but differ in content or styling.
 - Developing web applications that need to dynamically adjust their UI based on user interactions or data changes.
-This library is particularly useful in environments where rapid development and modular design are prioritized.
 
 ## Installation and Adding
 To use the `als-layout` library in your project, you can install it via npm and then include it in your JavaScript files:

package/docs/0-change-log.md

@@ -1,23 +1,6 @@
 ## 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
-  * Now each Layout extends Document (als-document)
-  * layout.$ and layout.$$
-    * Also $App.$ and $App.$$ on backend too
-  * no langs validation any more
-    * 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
+* V3.0.0
+  * render switched to als-render
+  * updated bug with meta tags after body
 

package/docs/1-basic-usage.md

@@ -44,6 +44,6 @@ By adding onload attribute, you can run scripts for each element after dom conte
 
 Example how it works:
 ```js
-const layout = new Layout().charset().viewport().title('On load').onload()
+const layout = new Layout().viewport().title('On load').onload()
 layout.body.innerHTML = /*html*/`<div onload="this.innerHTML = 'new content'">original content</div>`
 ```

package/docs/4-render.md

@@ -1,71 +1,44 @@
 ## Rendering
+Since version 3.0 , `als-layout` using `als-render` for 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.
-
-### Structure
-The layout object houses several key properties that facilitate dynamic content management:
-
-- `layout.data`: Stores the data that can be used across the page, such as state variables or configuration settings.
-- `layout.components`: Holds functions that define the behavior and rendering logic for components identified by specific attributes in the HTML.
-- `layout.utils`: Contains utility functions that can be used throughout the page for common tasks.
-- `layout.actions`: Methods that can be triggered by user interaction, often modifying `layout.data` and updating the page accordingly.
+### Counter Example
+To demonstrate dynamic interaction, consider a counter that can be increased or decreased through user input:
 
-### The Render Method
-The `render` method processes all elements with a `component` attribute, dynamically generating their content and behavior based on the defined components. After rendering, the page includes the `window.$App` JavaScript object, which provides methods and properties to interact with the page elements and data:
+The App.js
+```jsx
+const Counter = require('./counter')
+function App() {
+   context.count = 0
+   return (<Counter />)
+}
+module.exports = App
+```
 
-```js
-window.$App = {
-   data,              // Access to the layout data object
-   components,        // Access to components functions
-   utils,             // Access to utility functions
-   actions,           // Access to action functions
-   $(selector, parent = document),   // Equivalent to querySelector
-   $$(selector, parent = document),  // Equivalent to querySelectorAll
-   update(element) {  // Updates the element if it has a component attribute
-       // Update logic here
+counter.js
+```jsx
+function Counter() {
+   function change(m=1) {
+      context.count += 1*m
+      Counter.update()
    }
+
+   return (<div>
+      <button onclick={() => change(1)}>Increase</button>
+      <span component="counter">{context.count}</span>
+      <button onclick={() => change(-1)}>Decrease</button>
+   </div>)
 }
-```
 
-### Counter Example
-To demonstrate dynamic interaction, consider a counter that can be increased or decreased through user input:
+module.exports = Counter
+```
 
+build.js
 ```js
 const fs = require('fs')
 const Layout = require('als-layout')
-
-// Create and configure the layout
-const layout = new Layout().title('Counter')
-layout.data.counter = 0  // Initialize counter data
-
-// Define a component for displaying the counter
-layout.components.counter = function(element, $App) {
-   element.innerHTML = `${$App.data.counter}`
-}
-
-// Define actions for increasing and decreasing the counter
-layout.actions = {
-   increase: () => { $App.data.counter++; $App.update($App.$('[component=counter]')); },
-   decrease: () => { $We render the html page to measure and write to a document.app.data.counter--; $Page updates are shown in real-time on the rendered HTML.$App.update($App.$('[component=counter]')); }
-}
-
-// Add buttons and the counter display to the body
-layout.body.innerHTML = /*html*/`
-<button onclick="$App.actions.increase()">Increase</button>
-<span component="counter" publish></span>
-<button onclick="$App.actions.decrease()">Decrease</button>
-`
-
-// Measure render time and generate HTML
-const time1 = performance.now()
-const rawHtml = layout.render()
-const time2 = performance.now()
-console.log(`${time2 - time1}ms`) // e.g., 1.0649ms
-
-// Write the output to a file
-fs.writeFileSync('counter.html', rawHtml, 'utf-8')
+const layout = new Layout()
+   .title('Counter')
+   .render('./App', 'body', {minified:true,update:true})
+fs.writeFileSync('counter.html', layout.rawHtml, 'utf-8') // Write the output to a file
 ```
 
-### Advanced Rendering Details
-- **Component Indexing:** Each component is assigned a `componentIndex` during rendering, providing a unique index within its parent 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

@@ -1,26 +1,15 @@
 const { Document } = require('als-document')
-const build$App = require('./render/build-app')
 const onload = require('./onload')
-const update = require('./render/update')
+const render = require('./render')
 const {
-   addKeywords, addStyle, addDescription, addTitle, addImage, 
-   addUrl, addFavicon, addScript,addLink,charset,viewport
+   addKeywords, addStyle, addDescription, addTitle, addImage,
+   addUrl, addFavicon, addScript, addLink, charset, viewport
 } = require('./elements/index')
 
 class Layout extends Document {
-   constructor(html,url,doc = {}) {
-      super(html,url)
-      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}
+   constructor(html, url) {super(html, url); this.root = this.html}
+   onload() { this.script({}, onload); return this }
+   lang(lang) { this.html.setAttribute('lang', lang); return this }
    version(v) { this.v = v; return this; }
    charset(newCharset = 'UTF-8') { return charset(newCharset, this) }
    keywords(keywords = []) { return addKeywords(keywords, this) }
@@ -33,14 +22,9 @@ class Layout extends Document {
    script(attributes, innerHTML, head = true, v = this.v) { return addScript(attributes, innerHTML, head, v, this) }
    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,this)}
-   render() {
-      const done = []
-      this.update(this.root, done)
-      this.script({}, build$App(done,this),false)
-      return this.rawHtml
-   }
+   get rawHtml() { return this.innerHTML }
+   get clone() { return new Layout(new Document(this), this.URL) }
+   render(path, selector, makeBundle) {return render(path, selector, makeBundle,this)}
 }
 
 module.exports = Layout

package/lib/render.js

@@ -0,0 +1,12 @@
+const render = require('als-render')
+module.exports = function (path, selector, makeBundle, layout) {
+   const element = layout.$(selector)
+   if (!element) return layout
+   const { rawHtml, bundle } = render(path)
+   element.innerHTML = rawHtml
+   if (typeof makeBundle === 'object') {
+      const { update = true, minified = true } = makeBundle
+      layout.script({}, bundle(selector, update, minified), false)
+   }
+   return layout
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "als-layout",
-  "version": "2.5.1",
+  "version": "3.0.0",
   "description": "Html layout constructor",
   "main": "index.js",
   "directories": {
@@ -16,6 +16,7 @@
   "dependencies": {
     "als-css-parser": "^0.5.0",
     "als-document": "^1.4.0",
+    "als-render": "0.2.31",
     "als-simple-css": "^9.1.0"
   }
 }

package/readme.md

@@ -0,0 +1,184 @@
+# als-layout Documentation
+
+`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.
+
+The `als-layout` library is versatile, suitable for:
+- Building dynamic web pages that require frequent updates to their metadata, styles, or scripts.
+- Creating templating systems where multiple page layouts share similar structures but differ in content or styling.
+- Developing web applications that need to dynamically adjust their UI based on user interactions or data changes.
+
+## Installation and Adding
+To use the `als-layout` library in your project, you can install it via npm and then include it in your JavaScript files:
+
+```bash
+npm i als-layout
+```
+
+```js
+const Layout = require('als-layout')
+```
+
+## Change Log 
+
+* V3.0.0
+  * render switched to als-render
+  * updated bug with meta tags after body
+
+
+## Basic Usage
+
+### Initialization
+To start using `als-layout`, you first need to create a new instance of `Layout`. This instance will serve as the foundation for building and modifying your web page.
+
+```js
+const Layout = require('als-layout');
+const layout = new Layout();
+```
+
+### Adding Different Elements
+Once you have your `Layout` instance, you can easily add or modify various elements of your web page. Here are some examples of how you can use the library to customize your layout:
+
+```js
+const layout = new Layout()
+   .charset() // default UTF-8
+   .viewport() // default width=device-width, initial-scale=1.0
+   .title('Test title') // adding/updating title and meta[og:title]
+   .favicon('/favicon.png') // adding/updating link[rel=icon][type=image/x-icon] with new href
+   .keywords(['some', 'keyword']) // adding/updating meta[name=keywords]. not adding existing keywords
+   .image('/main-image.png', '1.5') // adding/updating meta - og:image, twitter:image, twitter:card
+   .description('Cool site') // adding/updating meta og:description, twitter:description, and description tag
+   .version('1.0.0') // adds version parameter to link, script.src, and image
+   .url('/some', 'http://site.com') // adding/updating meta[og:url] and link[rel="canonical"]
+   .style([{body:{m:0, bgc:'whitesmoke'}}]) // adding as simple-css styles to existing/new style tag
+   .style('body {margin:0; background-color:whitesmoke;}', true) // adding css styles to existing/new style tag. Second parameter is minified (default=false).
+   .link('/styles.css', '2.0') // adding link[rel=stylesheet] if such href not exists
+   .script({src:'/app.js'}, '', true, '3.0') // set script with src to head if such src not exists
+   .script({}, 'console.log("hello world")', false) // set script with script code to footer
+
+// Accessors for document parts
+layout.body // getter for body element (if not exists, created)
+layout.head // getter for head element (if not exists, created)
+layout.html // getter for html Element (if not exists, created)
+
+// Outputs
+layout.rawHtml // raw HTML of the document
+layout.clone // creates a new layout object clone for current object
+```
+
+### onload
+
+By adding onload attribute, you can run scripts for each element after dom content has loaded. 
+
+Example how it works:
+```js
+const layout = new Layout().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?
+Cloning in the `als-layout` library refers to creating a complete, independent copy of the existing `Layout` instance. This functionality is crucial when you need to generate multiple pages or versions of a page from a single base layout without affecting the original setup.
+
+### How to Use Cloning
+To clone a `Layout` instance, simply use the `clone` method. This method creates a new `Layout` instance with the same properties and settings as the original, allowing for independent modifications without interference.
+
+```js
+const newLayout = layout.clone;
+```
+
+### Benefits of Cloning
+- **Efficiency:** Cloning is highly efficient, especially for creating pages with similar structures but different content or styles. It avoids the overhead of reinitializing and reconfiguring a new `Layout` instance from scratch.
+- **Speed:** Cloning is fast, typically taking less than 20ms even for large pages. This makes it ideal for high-performance web applications that need to dynamically generate content.
+- **Isolation:** Changes made to a cloned `Layout` do not affect the original, ensuring that each instance can be modified independently based on specific requirements.
+
+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:
+
+```js
+const Layout = require('als-layout')
+
+// Starting with a basic HTML template and specifying the host for URL methods
+const raw = /*html*/`<html></html>`
+const host = 'http://example.com';
+const layout = new Layout(raw, host).lang('fr')
+console.log(layout.rawHtml) 
+// <!DOCTYPE html><html lang="fr"><head></p></head><body></body></html>
+
+// Cloning the initial layout to create a specialized page
+const homePage = layout.clone
+homeAutoReload = layout.clone
+homePage.title('Home page')
+homePage.body.innerHTML = /*html*/`<h1>Home page</h1>`
+console.log(homePage.rawHtml)
+// <!DOCTYPE html><html lang="fr"><head><title>Home page</title><meta property="og:title" content="Home page"></head><body><h1>Home page</h1></body></html>
+
+// Adding script that reloads the page every minute
+homeAutoReload.script({}, 'setTimeout(function() { window.location.reload(); }, 60000);', false)
+console.log(homeAutoReload.rawHtml)
+// <!DOCTYPE html><html lang="fr"><head><title>Automatic Reload Page</title><meta property="og:title" content="Automatic Reload Page"></head><body><script>setTimeout(function() { window.location.reload(); }, 60000);</script></body></html>
+
+// Demonstrating dynamic stylesheet linkage with versioning
+const styleVersion = '1.1';
+homePage.link('/css/main.css', styleVersion)
+console.log(homePage.rawHtml)
+// Includes link to the stylesheet with version parameter to ensure fresh cache
+```
+
+In this example:
+- We start with a basic HTML template and use the `lang` method to set the language.
+- We use the `clone` method to create two versions of the base layout: one for the home page and another that automatically reloads every minute.
+- We manipulate the `body` of the `homePage` to include custom HTML.
+- We add a script to `homeAutoReload` that sets up an automatic page reload, showcasing how to insert JavaScript dynamically.
+- We dynamically add a versioned link to a stylesheet in the `homePage`, demonstrating control over caching and resource management.
+
+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
+Since version 3.0 , `als-layout` using `als-render` for rendering. 
+
+### Counter Example
+To demonstrate dynamic interaction, consider a counter that can be increased or decreased through user input:
+
+The App.js
+```jsx
+const Counter = require('./counter')
+function App() {
+   context.count = 0
+   return (<Counter />)
+}
+module.exports = App
+```
+
+counter.js
+```jsx
+function Counter() {
+   function change(m=1) {
+      context.count += 1*m
+      Counter.update()
+   }
+
+   return (<div>
+      <button onclick={() => change(1)}>Increase</button>
+      <span component="counter">{context.count}</span>
+      <button onclick={() => change(-1)}>Decrease</button>
+   </div>)
+}
+
+module.exports = Counter
+```
+
+build.js
+```js
+const fs = require('fs')
+const Layout = require('als-layout')
+const layout = new Layout()
+   .title('Counter')
+   .render('./App', 'body', {minified:true,update:true})
+fs.writeFileSync('counter.html', layout.rawHtml, 'utf-8') // Write the output to a file
+```
+

package/tests/counter/App.js

@@ -0,0 +1,6 @@
+const Counter = require('./counter')
+function App() {
+   context.count = 0
+   return (<Counter />)
+}
+module.exports = App

package/tests/counter/build.js

@@ -0,0 +1,14 @@
+const fs = require('fs')
+const Layout = require('../../lib/layout')
+
+// Create and configure the layout
+const layout = new Layout().title('Counter')
+
+// Measure render time and generate HTML
+const time1 = performance.now()
+const { rawHtml } = layout.render('./App', 'body', {minified:true})
+const time2 = performance.now()
+console.log(`${time2 - time1}ms`) // e.g., 1.0649ms
+
+// Write the output to a file
+fs.writeFileSync('counter.html', rawHtml, 'utf-8')

package/tests/counter/counter.js

@@ -0,0 +1,14 @@
+function Counter() {
+   function change(m=1) {
+      context.count += 1*m
+      Counter.update()
+   }
+
+   return (<div>
+      <button onclick={() => change(1)}>Increase</button>
+      <span component="counter">{context.count}</span>
+      <button onclick={() => change(-1)}>Decrease</button>
+   </div>)
+}
+
+module.exports = Counter

package/tests/elements.test.js

@@ -47,11 +47,12 @@ describe('Favicon tests', () => {
       assert.strictEqual(layout.root.$('link[rel="icon"]').getAttribute('href'), newHref, 'Favicon href should be updated');
    });
 
-   it('should insert favicon at second position if not present', () => {
+   it('should insert favicon at the end of head if not present', () => {
       const faviconHref = 'favicon.ico';
       layout.favicon(faviconHref);
-      assert.strictEqual(layout.head.childNodes[0].tagName, 'LINK', 'Favicon link should be at second position');
-      assert.strictEqual(layout.head.childNodes[0].getAttribute('href'), faviconHref, 'Favicon href not set correctly');
+      const element = layout.head.childNodes[layout.head.childNodes.length - 1]
+      assert.strictEqual(element.tagName, 'LINK', 'Favicon link should be at second position');
+      assert.strictEqual(element.getAttribute('href'), faviconHref, 'Favicon href not set correctly');
    });
 
    it('should add favicon correctly', () => {

package/tests/layout.test.js

@@ -74,107 +74,6 @@ describe('HTML Structure Initialization', () => {
    });
 });
 
-describe('Component Updating', () => {
-   let layout;
-
-   beforeEach(() => {
-      layout = new Layout();
-   });
-
-   it('should correctly update components', () => {
-      layout.components.test2 = (element, $App) => {
-         assert(element.componentIndex === 0)
-         element.innerHTML = 'test2 success'
-      }
-      layout.components.test1 = (element, $App) => {
-         assert(element.componentIndex === 0)
-         element.insert(2, 'test1 success')
-      }
-      layout.body.innerHTML = /*html*/`<div component="test1">
-         <div component="test2">failed</div>
-      </div>`
-
-      const done = []
-      layout.update(layout.root, done)
-      assert(done.length === 2)
-      assert(layout.rawHtml.includes('test1 success'))
-      assert(layout.rawHtml.includes('test2 success'))
-   })
-
-   it('should correctly render components', () => {
-      layout.components.test2 = (element, $App) => {
-         assert(element.componentIndex === 0)
-         element.innerHTML = 'test2 success'
-      }
-      layout.components.test1 = (element, $App) => {
-         assert(element.componentIndex === 0)
-         element.insert(2, 'test1 success')
-      }
-      layout.data.test = 'hello'
-      layout.body.innerHTML = /*html*/`<div component="test1" publish>
-         <div component="test2">failed</div>
-      </div>`
-
-      const rawHtml = layout.render()
-      assert(rawHtml.includes('test1 success'))
-      assert(rawHtml.includes('test2 success'))
-
-      const script = rawHtml.match(/<[^>]*?script.*?>[^<]*<\/[^>]*?script.*?>/g)[0]
-         .replace('<script>window.$App = ', '')
-         .replace('</script>', '')
-      const fn = new Function(`return ${script}`)
-      const { browser, data, components, actions, utils, updata, $, $$ } = fn()
-      assert(browser === true)
-      assert.deepStrictEqual(Object.keys(components), ['test1', 'test2'])
-      assert(components.test1.toString() === layout.components.test1.toString())
-      assert(data.test === 'hello')
-   })
-
-   it('should add part to $App if it is component`s descendant', () => {
-      layout.body.innerHTML = /*html*/`
-         <div component="parent" publish>
-            <div component="child"></div>
-         </div>`;
-      layout.components.parent = (element, $App) => {};
-      layout.components.child = (element, $App) => {};
-
-      const rawHtml = layout.render();
-      const script = rawHtml.match(/<[^>]*?script.*?>[^<]*<\/[^>]*?script.*?>/g)[0]
-      .replace('<script>window.$App = ', '')
-      .replace('</script>', '')
-      const fn = new Function(`return ${script}`)
-
-      const {components} = fn()
-      assert(components.parent !== undefined)
-      assert(components.child !== undefined)
-   });
-
-   it('should not add part to $App if it has no component ancestor', () => {
-      layout.body.innerHTML = /*html*/`
-      <div component="comp1" publish></div>
-      <div component="comp2"></div>
-      `;
-      layout.components.comp1 = (element, $App) => {};
-      layout.components.comp2 = (element, $App) => {};
-
-      const rawHtml = layout.render();
-      const script = rawHtml.match(/<[^>]*?script.*?>[^<]*<\/[^>]*?script.*?>/g)[0]
-      .replace('<script>window.$App = ', '')
-      .replace('</script>', '')
-      const fn = new Function(`return ${script}`)
-
-      const {components} = fn()
-      assert(components.comp1 !== undefined)
-      assert(components.comp2 === undefined)
-   });
-
-   it('If no components, should add empty update function to $App', () => {
-      const rawHtml = layout.render();
-      assert( rawHtml.includes('update:()=>{}'));
-   });
-
-});
-
 describe('Clone Testing', () => {
    let layout;
    beforeEach(() => {

package/tests/render/App.js

@@ -0,0 +1,10 @@
+const Some = require('./Some')
+
+function App() {
+   return (<div>
+      <div>Hello from App!</div>
+      <Some/>
+   </div>)
+}
+
+module.exports = App

package/tests/render/Some.js

@@ -0,0 +1,8 @@
+function Some() {
+   return (<div>
+      Hello From Some!
+
+   </div>)
+}
+
+module.exports = Some

package/tests/render.test.js

@@ -0,0 +1,31 @@
+const assert = require('assert');
+const { describe, it,beforeEach } = require('node:test')
+const Layout = require('../lib/layout')
+
+describe('Basic tests', () => {
+   let layout
+   beforeEach(() => layout = new Layout())
+   it('Should render without bundle',() => {
+      const { rawHtml } = layout.render('./render/App', 'body')
+      const expected = 
+      '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><div>\n' +
+      '      <div>Hello from App!</div>\n' +
+      '      <div component="Some">\n' +
+      '      Hello From Some!\n' +
+      '   </div>\n' +
+      '   </div></body></html>'
+
+      assert(rawHtml === expected)
+   })
+
+   it('Should render with bundle',() => {
+      const { rawHtml } = layout.render('./render/App', 'body',{})
+      assert(rawHtml.includes('<script>'))
+   })
+
+   it('Should do nothing if element not exists',() => {
+      const { rawHtml } = layout.render('./render/App', 'main')
+      const expected = '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body></body></html>'
+      assert(rawHtml === expected)
+   })
+})

package/lib/render/build-app.js

@@ -1,23 +0,0 @@
-const componentHierarchy = require('./component-hierarchy')
-module.exports = function(done=[],layout) {
-   let strComponents = 'components:{}', updateFn = 'update:()=>{}'
-   const components = componentHierarchy(done)
-   if(components.length) {
-      strComponents = 'components:{'+components.map(componentName => {
-         return `"${componentName}":${layout.components[componentName].toString()}`
-      }).join(',')+'}'
-      updateFn = `update:${layout.update.toString()}`
-   }
-   const strData = 'data:'+JSON.stringify(layout.data)
-   const $ = 'function $(selector,parent = document) {return parent.querySelector(selector)}'
-   const $$ = 'function $$(selector,parent = document) {return [...parent.querySelectorAll(selector)]}'
-   let actions = 'actions:{'
-   for(const actionName in layout.actions) {
-      actions += `${actionName}:${layout.actions[actionName].toString()},`
-   }
-   let utils = 'utils:{'
-   for(const utilsName in layout.utils) {
-      utils += `${utilsName}:${layout.utils[utilsName].toString()},`
-   }
-   return `window.$App = {browser:true,${strData},${strComponents},${actions}},${utils}},${updateFn},$:${$},$$:${$$}}`
-}

package/lib/render/component-hierarchy.js

@@ -1,21 +0,0 @@
-function componentHierarchy(elements) {
-   const entries = elements
-      .map(el => ([el, el.getAttribute('component'), el.ancestors]))
-      .sort((a, b) => a[2].length - b[2].length)
-
-   const result = []
-   while(entries.length > 0) {
-      const [element, componentName, ancestors] = entries.shift()
-      const partsInside = element.$$('[component]')
-      if(element.getAttribute('publish') === null) {
-         element.removeAttribute('component')
-         element.removeAttribute('publish')
-         continue
-      }
-      partsInside.forEach(element => { element.setAttribute('publish','') });
-      if(!result.includes(componentName)) result.push(componentName)
-   }
-   return result
-}
-
-module.exports = componentHierarchy

package/lib/render/update.js

@@ -1,19 +0,0 @@
-function update(element, done = []) {
-   for (const componentName in this.components) {
-      const fn = this.components[componentName]
-      let components = element.getAttribute('component') === componentName
-         ? [element]
-         : [...element.querySelectorAll(`[component=${componentName}]`)]
-      components = components.filter(el => !done.includes(el))
-      components.forEach((element, i) => {
-         element.componentIndex = i
-         const result = fn(element, this)
-         if(typeof result === 'string') element.innerHTML = result
-         done.push(element)
-         this.update(element, done)
-      });
-   }
-}
-
-
-module.exports = update

package/tests/build-app.test.js

@@ -1,80 +0,0 @@
-const assert = require('assert');
-const { describe, it } = require('node:test');
-const build$App = require('../lib/render/build-app');
-
-describe('build-$App Functionality', () => {
-   
-   it('should handle empty input arrays correctly', () => {
-      const done = [];
-      const layout = {
-         components: {},
-      };
-      const result = build$App(done, layout);
-      assert.strictEqual(result, 'window.$App = {browser:true,data:undefined,components:{},actions:{},utils:{},update:()=>{},$:function $(selector,parent = document) {return parent.querySelector(selector)},$$:function $$(selector,parent = document) {return [...parent.querySelectorAll(selector)]}}');
-   });
-
-   it('should process multiple components correctly', () => {
-      const called = []
-      const done = [
-         { 
-            getAttribute: (attr) => attr === 'component' ? 'comp1' : attr === 'publish' ? '' : null,
-            removeAttribute(att) {called.push(att)},
-            $$(){return []},
-            ancestors:2 
-         },
-         { 
-            getAttribute: (attr) => attr === 'component' ? 'comp2' : attr === 'publish' ? '' : null,
-            removeAttribute(att) {called.push(att)},
-            $$(){return []},
-            ancestors:2 
-         }
-      ];
-      const layout = {
-         components: {
-            comp1: () => 'Component1',
-            comp2: () => 'Component2'
-         },
-         actions: {},
-         utils: {},
-         data: {},
-         update: function update() { }
-      };
-      const result = build$App(done, layout);
-      assert(result.includes(`"comp1":${layout.components.comp1.toString()}`))
-      assert(result.includes(`"comp2":${layout.components.comp2.toString()}`))
-   });
-
-   it('should add action functions correctly', () => {
-      const done = [];
-      const layout = {
-         components: {},
-         actions: {
-            action1: () => console.log('Action 1'),
-            action2: () => console.log('Action 2')
-         },
-         utils: {},
-         data: {},
-         update: function update() { }
-      };
-      const result = build$App(done, layout);
-      assert(result.includes(`action1:${layout.actions.action1.toString()}`))
-      assert(result.includes(`action2:${layout.actions.action2.toString()}`))
-   });
-
-   it('should integrate utilities correctly', () => {
-      const done = [];
-      const layout = {
-         components: {},
-         actions: {},
-         utils: {
-            util1: () => console.log('Utility 1'),
-            util2: () => console.log('Utility 2')
-         },
-         data: {},
-         update: function update() { }
-      };
-      const result = build$App(done, layout);
-      assert(result.includes(`util1:${layout.utils.util1.toString()}`))
-      assert(result.includes(`util2:${layout.utils.util2.toString()}`))
-   });
-});

package/tests/component-hierarchy.test.js

@@ -1,51 +0,0 @@
-const { parseHTML } = require('als-document')
-const assert = require('assert');
-const { describe, it } = require('node:test')
-const componentHierarchy = require('../lib/render/component-hierarchy')
-
-function shuffleArray(array) {
-   for (let i = array.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1)); // Получаем случайный индекс от 0 до i
-      [array[i], array[j]] = [array[j], array[i]]; // Обмен элементов местами
-   }
-   return array;
-}
-
-describe('Basic tests', () => {
-   it('should build correct hierarchy', () => {
-      const root = parseHTML(/*html*/`<div component="some" publish>
-         <div>
-            <div component="some1"></div>
-            <div>
-               <div component="some2">
-                  <div component="some3"></div>
-               </div>
-               <div component="some2"></div>
-            </div>
-      
-         </div>
-      </div>`)
-      
-      const result = componentHierarchy(shuffleArray(root.$$('[component]')))
-      assert.deepStrictEqual(result,[ 'some', 'some1', 'some2', 'some3' ])
-   })
-
-   it('should build correct hierarchy', () => {
-      const root = parseHTML(/*html*/`<div component="some">
-         <div>
-            <div component="some1"></div>
-            <div>
-               <div component="some2">
-                  <div component="some3"></div>
-               </div>
-               <div component="some2">
-                  <div component="some"></div>
-               </div>
-            </div>
-      
-         </div>
-      </div>`)
-      
-      assert.doesNotThrow(() => componentHierarchy(shuffleArray(root.$$('[component]'))))
-   })
-})

package/tests/run-tests.js

@@ -1,6 +0,0 @@
-const { execSync } = require('child_process');
-let [,, path] = process.argv;
-
-execSync(`node --test ./tests/${path}.test.js`, { stdio: 'inherit' });
-
-// Example: npm test mw.cookie