als-layout 1.3.3 → 2.0.0

package/lib/build-app.js

@@ -0,0 +1,19 @@
+const componentHierarchy = require('./component-hierarchy')
+module.exports = function(done=[],layout) {
+   const strComponents = 'components:{'+componentHierarchy(done).map(componentName => {
+      return `"${componentName}":${layout.components[componentName].toString()}`
+   }).join(',')+'}'
+   const updateFn = `update:function ${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/build-root.js

@@ -4,7 +4,7 @@ function buildRoot(item) {
    const root = 
    (item instanceof Root) ? buildFromCache(cacheDoc(item))
    : (typeof item === 'string') ? parseHTML(item) 
-   : (typeof item === 'object') ? buildFromCache(item) 
+   : (typeof item === 'object' && item.tagName) ? buildFromCache(item) 
    : new Root()
    
    const firstNode = root.childNodes[0]

package/lib/component-hierarchy.js

@@ -0,0 +1,20 @@
+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()
+      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(!result.includes(componentName)) result.push(componentName)
+   }
+   return result
+}
+
+module.exports = componentHierarchy

package/lib/elements/image.js

@@ -1,6 +1,6 @@
 const addMeta = require('./add-meta')
 function addImage(image,version, layout) {
-   if (image && version) image += src.includes('?') ? '&' : '?' + `v=${version}`
+   if (image && version) image += (image.includes('?') ? '&' : '?') + `v=${version}`
 
    addMeta({property:'og:image',content:image},layout)
    addMeta({name:'twitter:image',content:image},layout)

package/lib/elements/keywords.js

@@ -3,17 +3,17 @@ const { SingleNode } = require('als-document')
 function keywords(keywords = [], layout) {
    const { root } = layout
    let keywordsElement = root.$('meta[name=keywords]')
-   if (!keywordsElement) {
-      keywordsElement = new SingleNode('meta', { name: 'keywords' })
-      layout.head.insert(2, keywordsElement)
-   }
+   if (!keywordsElement) keywordsElement = new SingleNode('meta', { name: 'keywords' })
    const content = keywordsElement.getAttribute('content')
    const existingKeywords = content ? content.split(',') : []
    keywords.forEach(keyword => {
       keyword = keyword.trim()
       if (!existingKeywords.includes(keyword)) existingKeywords.push(keyword)
    });
-   keywordsElement.setAttribute('content', existingKeywords.join())
+   if(existingKeywords.length) {
+      keywordsElement.setAttribute('content', existingKeywords.join())
+      layout.head.insert(2, keywordsElement)
+   }
    return layout
 }
 

package/lib/elements/link.js

@@ -1,10 +1,10 @@
 const { SingleNode } = require('als-document')
 function addLink(href, version, layout) {
    if(!href || typeof href !== 'string') return layout
+   if (href && version) href += (href.includes('?') ? '&' : '?') + `v=${version}`
    const selector = `link[rel=stylesheet][href^="${href}"]`
    let linkElement = layout.root.$(selector)
    if (linkElement) return
-   if (href && version) href += href.includes('?') ? '&' : '?' + `v=${version}`
    linkElement = new SingleNode('link', { rel: 'stylesheet', href })
    layout.head.insert(2, linkElement)
    return layout

package/lib/elements/script.js

@@ -4,7 +4,7 @@ function addScript(attrs = {}, innerHTML = '', head = true, version, layout) {
    if(attrs.src) {
       const selector = `script[src="${attrs.src}"]`
       if (attrs.src && layout.root.$(selector)) return layout
-      if (attrs.src && version) attrs.src += attrs.src.includes('?') ? '&' : '?' + `v=${version}`
+      if (attrs.src && version) attrs.src += (attrs.src.includes('?') ? '&' : '?') + `v=${version}`
    }
    if(Object.keys(attrs).length || innerHTML) {
       const script = new Node('script', attrs)

package/lib/layout.js

@@ -3,6 +3,7 @@ const {
    addKeywords, addStyle, addDescription, addTitle, addImage,
    addUrl, addFavicon, addScript, addLink, charset, viewport
 } = require('./elements/index')
+const build$App = require('./build-app')
 const buildRoot = require('./build-root')
 
 class Layout {
@@ -10,40 +11,67 @@ class Layout {
       this.options = options
       this.root = buildRoot(layout)
       this.body; this.head;
+      this.components = {}
+      this.data = {}
+      this.actions = {}
+      this.utils = {}
    }
 
    get html() {
       const lang = this.options.lang || 'en'
-      if (!this.root.$('html')) this.root.insert(2,`<html></html>`)
+      if (!this.root.$('html')) this.root.insert(2, `<html></html>`)
       const htmlElement = this.root.$('html')
-      if(lang && htmlElement.getAttribute('lang') !== lang) {
-         htmlElement.setAttribute('lang',lang)
+      if (lang && htmlElement.getAttribute('lang') !== lang) {
+         htmlElement.setAttribute('lang', lang)
       }
       return htmlElement
    }
    get body() {
-      if (!this.root.body) this.html.insert(2,`<body></body>`)
+      if (!this.root.body) this.html.insert(2, `<body></body>`)
       return this.root.body
    }
    get head() {
-      if (!this.root.head) this.html.insert(1,`<head></head>`)
+      if (!this.root.head) this.html.insert(1, `<head></head>`)
       return this.root.head
    }
 
+   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
+            fn(element, this)
+            done.push(element)
+            this.update(element, done)
+         });
+      }
+   }
+
+   render() {
+      const done = []
+      this.update(this.root, done)
+      this.script({}, build$App(done,this),false)
+      return this.rawHtml
+   }
+
    get rawHtml() { return this.root.innerHTML }
    get cached() { return cacheDoc(this.root) }
    get clone() { return new Layout(this.root, this.options) }
 
-   version(v) {this.v = v; return this;}
+   version(v) { this.v = v; return this; }
    keywords(keywords = []) { return addKeywords(keywords, this) }
    description(description) { return addDescription(description, this) }
    title(title) { return addTitle(title, this) }
    style(styles, minified) { return addStyle(styles, minified, this) }
-   image(image,v=this.v) { return addImage(image, v, this) }
+   image(image, v = this.v) { return addImage(image, v, this) }
    url(url, host = this.options.host) { return addUrl(url, host, this) }
    favicon(href) { return addFavicon(href, this) }
-   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) }
+   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) }
    charset(newCharset = 'UTF-8') { return charset(newCharset, this) }
    viewport(newViewport = 'width=device-width, initial-scale=1.0') { return viewport(newViewport, this) }
 }

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "als-layout",
-  "version": "1.3.3",
+  "version": "2.0.0",
   "description": "Html layout constructor",
   "main": "index.js",
   "directories": {
     "lib": "lib"
   },
   "scripts": {
-    "test": "node --test --experimental-test-coverage"
+    "test": "node --test --experimental-test-coverage",
+    "report": "node --test --experimental-test-coverage --test-reporter=lcov --test-reporter-destination=lcov.info"
   },
   "keywords": [],
   "author": "Alex Sorkin",

package/readme.md

@@ -1,20 +1,19 @@
 # Als-layout
 
-Html layout constructor.
+`Als-layout` is an HTML layout constructor for Node.js that allows you to manage HTML elements, styles, and scripts through JavaScript. It's perfect for server-side HTML generation or dynamic page modifications before delivery to the client.
 
-## Change log
-  * styles as separated tags
-  * version method
-  * script,link,image - version parameter
-  * updated als-document version
+## What's New
 
-## install
+- **Rendering Capability**: Added the ability to render HTML dynamically, updating elements based on component attributes.
+- **Bug Fixes**: Various bug fixes improving stability and performance.
+
+## Install
 
 ```bash
 npm i als-layout
 ```
 
-## Basic usage
+## Basic Usage
 
 ```js
 const Layout = require('als-layout')
@@ -23,30 +22,29 @@ const layout = new Layout()
    .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
+   .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; backgroung-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
+   .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
 layout.cached // cached DOM
-layout.clone // new layout object clone for curent object
+layout.clone // new layout object clone for current object
 ```
 
-In image, script.src and link, last parameter is version which using 'layout.v' (defined by layout.version(v)) if not defined. 
-
-## Advanced usage
+## Advanced Usage
 
 ```js
 const Layout = require('./lib/layout')
@@ -56,14 +54,73 @@ const options = {
   host:'http://example.com', // host for url method
   lang:'fr' // for <html lang="fr"></html>
 }
-const layout = new Layout(raw,options)
+const layout = new Layout(raw, options)
 console.log(layout.rawHtml) 
 // <!DOCTYPE html><html lang="fr"><head></head><body></body></html>
 
 const homePage = layout.clone
 homePage.title('Home page')
 homePage.body.innerHTML = /*html*/`<h1>Home page</h1>`
-console.log(homePage.rawHtml) 
+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>
 ```
 
+## Rendering
+
+Each layout instance has a render method and the following objects:
+```js
+layout.data
+layout.components
+layout.utils
+layout.actions
+```
+
+The render method returns raw HTML after building elements with the attribute component. It will create HTML raw which will include a `window.$App` object with the following:
+
+```js
+window.$App = {
+   data,
+   components,
+   utils,
+   actions,
+   $(selector, parent=document), // querySelector
+   $$(selector, parent=document), // querySelectorAll
+   update(element), // update element if it has component attribute
+}
+```
+
+
+## Counter Example
+
+```js
+const fs = require('fs')
+const Layout = require('als-layout')
+
+const layout = new Layout().charset().viewport().title('Counter')
+layout.data.counter = 0
+layout.components.counter = function(element, $App) {
+   element.innerHTML = `${$App.data.counter}`
+}
+
+layout.actions = {
+   increase: () => { $App.data.counter++; $App.update($App.$('[component=counter]')) },
+   decrease: () => { $App.data.counter--; $App.update($App.$('[component=counter]')) }
+}
+
+layout.body.innerHTML = /*html*/`
+<button onclick="$App.actions.increase()">Increase</button>
+<span component="counter"></span>
+<button onclick="$App.actions.decrease()">Decrease</button>
+`
+const time1 = performance.now()
+const rawHtml = layout.render()
+const time2 = performance.now()
+console.log(`${time2 - time1}ms`) // e.g., 1.0649ms
+
+fs.writeFileSync('counter.html', rawHtml, 'utf-8')
+```
+
+Each component gets a `componentIndex` which is available inside the component function.
+```js
+element.componentIndex
+```

package/tests/build-app.test.js

@@ -0,0 +1,69 @@
+const assert = require('assert');
+const { describe, it } = require('node:test');
+const build$App = require('../lib/build-app');
+
+describe('build-$App Functionality', () => {
+   it('should handle empty input arrays correctly', () => {
+      const done = [];
+      const layout = {
+         components: {},
+         update: () => { }
+      };
+      const result = build$App(done, layout);
+      assert.strictEqual(result, 'window.$App = {browser:true,data:undefined,components:{},actions:{},utils:{},update:function () => { },$:function $(selector,parent = document) {return parent.querySelector(selector)},$$:function $$(selector,parent = document) {return [...parent.querySelectorAll(selector)]}}');
+   });
+
+   it('should process multiple components correctly', () => {
+      const done = [
+         { getAttribute: () => 'comp1',ancestors:2 },
+         { getAttribute: () => 'comp2',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/build-root.test.js

@@ -22,4 +22,24 @@ describe('Basic tests', function () {
       const root = buildRoot()
       assert(root.childNodes[0].tagName === '!DOCTYPE')
    });
-})
+
+   it('should create an instance of Root from HTML string', () => {
+      const htmlString = '<html><head><title>Test</title></head><body></body></html>';
+      const root = buildRoot(htmlString);
+      assert(root instanceof Root);
+      assert.strictEqual(root.childNodes.length > 0, true);
+      assert.strictEqual(root.childNodes[0].tagName, '!DOCTYPE');
+   });
+
+   it('should create an instance of Root from object', () => {
+      const docObject = cacheDoc('<html></html>')
+      const root = buildRoot(docObject);
+      assert(root instanceof Root);
+   });
+
+   it('should create an empty Root if object does not have tagName', () => {
+      const root = buildRoot({});
+      assert(root instanceof Root);
+   });
+})
+

package/tests/component-hierarchy.test.js

@@ -0,0 +1,51 @@
+const { parseHTML } = require('als-document')
+const assert = require('assert');
+const { describe, it } = require('node:test')
+const componentHierarchy = require('../lib/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">
+         <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.throws(() => componentHierarchy(shuffleArray(root.$$('[component]'))))
+   })
+})

package/tests/elements.test.js

@@ -2,31 +2,80 @@ const assert = require('assert');
 const Layout = require('../lib/layout');
 const { describe, it, beforeEach } = require('node:test')
 const Simple = require('als-simple-css')
-describe('Elements Integration', () => {
+const { SingleNode } = require('als-document')
+const keywords = require('../lib/elements/keywords')
+
+describe('Charset tests', () => {
    let layout;
 
    beforeEach(() => layout = new Layout());
 
+   it('should update charset if meta[charset] already exists', () => {
+      layout.head.insert(1, new SingleNode('meta', { charset: 'old-charset' }));
+      const newCharset = 'new-charset';
+      layout.charset(newCharset);
+      assert.strictEqual(layout.root.$('meta[charset]').getAttribute('charset'), newCharset, 'Charset should be updated');
+   });
+
+   it('should insert charset at second position if not present', () => {
+      layout.head.insert(1, new SingleNode('title', {}));
+      const charset = 'UTF-8';
+      layout.charset(charset);
+      assert.strictEqual(layout.head.childNodes[1].tagName, 'meta', 'Meta should be at second position');
+      assert.strictEqual(layout.head.childNodes[1].getAttribute('charset'), charset, 'Charset not set correctly');
+   });
+
    it('should add charset correctly', () => {
       const charset = 'test';
       layout.charset(charset);
       assert.strictEqual(layout.root.$('meta[charset]').getAttribute('charset'), charset, 'Charset not set correctly');
    });
+});
 
-   it('should add description correctly', () => {
-      const description = 'Test Description';
-      layout.description(description);
-      assert.strictEqual(layout.root.$('meta[name="description"]').getAttribute('content'), description, 'Description not set correctly');
-      assert.strictEqual(layout.root.$('meta[property="og:description"]').getAttribute('content'), description, 'Description not set correctly');
-      assert.strictEqual(layout.root.$('meta[property="twitter:description"]').getAttribute('content'), description, 'Description not set correctly');
+describe('Favicon tests', () => {
+   let layout;
+
+   beforeEach(() => {
+      layout = new Layout();
+      layout.head.insert(1, new SingleNode('title', {})); // Добавляем элемент title для проверки позиции
    });
 
-   it('should add favicon correctly', function () {
+   it('should update favicon href if link[rel="icon"] already exists', () => {
+      const oldHref = 'old-favicon.ico';
+      layout.head.insert(2, new SingleNode('link', { rel: 'icon', href: oldHref, type: 'image/x-icon' }));
+      const newHref = 'new-favicon.ico';
+      layout.favicon(newHref);
+      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', () => {
+      const faviconHref = 'favicon.ico';
+      layout.favicon(faviconHref);
+      assert.strictEqual(layout.head.childNodes[1].tagName, 'link', 'Favicon link should be at second position');
+      assert.strictEqual(layout.head.childNodes[1].getAttribute('href'), faviconHref, 'Favicon href not set correctly');
+   });
+
+   it('should add favicon correctly', () => {
       const faviconHref = 'favicon.ico';
       layout.favicon(faviconHref);
       assert.strictEqual(layout.root.$('link[rel="icon"]').getAttribute('href'), faviconHref, 'Favicon not set correctly');
    });
 
+});
+
+describe('Image tests', () => {
+   let layout;
+
+   beforeEach(() => {
+      layout = new Layout();
+   });
+
+   it('should add twitter:card meta tag', () => {
+      const imageUrl = 'test-image.jpg';
+      layout.image(imageUrl);
+      assert.strictEqual(layout.root.$('meta[name="twitter:card"]').getAttribute('content'), 'summary_large_image', 'twitter:card not set correctly');
+   });
+
    it('should add image correctly', () => {
       const imageUrl = 'test-image.jpg';
       layout.image(imageUrl);
@@ -34,30 +83,53 @@ describe('Elements Integration', () => {
       assert.strictEqual(layout.root.$('meta[name="twitter:image"]').getAttribute('content'), imageUrl, 'Image not set correctly');
    });
 
-   it('should add link correctly', () => {
-      const href = 'style.css';
-      layout.link(href);
-      assert.strictEqual(layout.root.$('link[rel="stylesheet"]').getAttribute('href'), href, 'Link not set correctly');
+   it('should handle cases where image URL already has query parameters', () => {
+      const imageUrl = 'test-image.jpg?existing=param';
+      const version = '456';
+      layout.image(imageUrl, version);
+      const expectedUrl = imageUrl + '&v=' + version;
+      const img = layout.root.$('meta[property="og:image"]').getAttribute('content')
+      assert(img === expectedUrl, 'Versioned image URL with existing parameters not set correctly');
    });
 
-   it('should add script correctly', () => {
-      const scriptContent = 'console.log("Hello, world!");';
-      layout.script({}, scriptContent);
-      assert.strictEqual(layout.root.$('script').innerHTML, scriptContent, 'Script content not set correctly');
+   it('should add version parameter to image URL if version is provided', () => {
+      const imageUrl = 'test-image.jpg';
+      const version = '123';
+      layout.image(imageUrl, version);
+      const expectedUrl = imageUrl + '?v=' + version;
+      assert.strictEqual(layout.root.$('meta[property="og:image"]').getAttribute('content'), expectedUrl, 'Versioned image URL not set correctly in og:image');
+      assert.strictEqual(layout.root.$('meta[name="twitter:image"]').getAttribute('content'), expectedUrl, 'Versioned image URL not set correctly in twitter:image');
    });
+});
 
-   it('should add title correctly', () => {
-      const title = 'Test Title';
-      layout.title(title);
-      assert(layout.root.$('title').innerHTML === title, 'Title not set correctly');
-      assert(layout.root.$('[property="og:title"]').getAttribute('content') === title, 'Title not set correctly');
+describe('Keywords tests', () => {
+   let layout;
+
+   beforeEach(() => {
+      layout = new Layout();
    });
 
+   it('should add new keywords to an existing meta tag', () => {
+      layout.head.insert(2, new SingleNode('meta', { name: 'keywords', content: 'initial' }));
+      const additionalKeywords = ['keyword1', 'keyword2'];
+      keywords(additionalKeywords, layout);
+      const expectedContent = 'initial,keyword1,keyword2';
+      assert.strictEqual(layout.root.$('meta[name="keywords"]').getAttribute('content'), expectedContent, 'Existing keywords not updated correctly');
+   });
 
-   it('should add url correctly', () => {
-      const url = 'http://localhost';
-      layout.url(url);
-      assert(layout.root.$('link[rel="canonical"]').getAttribute('href') === url, 'Canonical URL not set correctly');
+   it('should not add duplicate keywords', () => {
+      layout.head.insert(2, new SingleNode('meta', { name: 'keywords', content: 'keyword1,keyword2' }));
+      const additionalKeywords = ['keyword2', 'keyword3'];
+      keywords(additionalKeywords, layout);
+      const expectedContent = 'keyword1,keyword2,keyword3';
+      assert.strictEqual(layout.root.$('meta[name="keywords"]').getAttribute('content'), expectedContent, 'Duplicate keywords were added');
+   });
+
+   it('should handle keywords with leading or trailing spaces', () => {
+      const messyKeywords = [' keyword1', 'keyword2 '];
+      keywords(messyKeywords, layout);
+      const expectedContent = 'keyword1,keyword2';
+      assert.strictEqual(layout.root.$('meta[name="keywords"]').getAttribute('content'), expectedContent, 'Keywords with spaces not trimmed correctly');
    });
 
    it('should add keywords correctly', () => {
@@ -66,39 +138,91 @@ describe('Elements Integration', () => {
       assert(layout.root.$('meta[name="keywords"]').getAttribute('content') === keywords.join(), 'Keywords not set correctly');
    });
 
-   it('should add viewport correctly', () => {
-      const viewportContent = 'width=device-width, initial-scale=1.0';
-      layout.viewport(viewportContent);
-      assert.strictEqual(layout.root.$('meta[name="viewport"]').getAttribute('content'), viewportContent, 'Viewport not set correctly');
+   it('should handle empty keywords array', () => {
+      keywords([], layout);
+      assert(!layout.root.$('meta[name="keywords"]'), 'Meta tag for empty keywords should not be created');
    });
 
-   it('should add style correctly', () => {
-      const styles = 'body { background-color: black; }';
-      layout.style(styles);
-      assert(layout.root.$('style').innerHTML.includes(styles), 'Styles not set correctly');
+});
+
+describe('Link', () => {
+   let layout;
+   beforeEach(() => layout = new Layout());
+
+   it('should add a new link element without version', () => {
+      const href = 'style.css';
+      layout.link(href);
+      assert.strictEqual(layout.root.$('link[rel="stylesheet"]').getAttribute('href'), href, 'Link href should match the provided href');
    });
 
-   it('Should add simple styles', () => {
-      const styles = [{ body: { bgc: 'black' } }]
-      const css = new Simple(styles).stylesheet()
-      layout.style(styles);
-      assert(layout.root.$('style').innerHTML.includes(css), 'Styles not set correctly');
-   })
+   it('should add a new link element with version', () => {
+      const href = 'style.css';
+      const version = '1.0';
+      layout.link(href, version);
+      assert.strictEqual(layout.root.$('link[rel="stylesheet"]').getAttribute('href'), `${href}?v=${version}`, 'Link href should include version query parameter');
+   });
 
-   it('should add styles to existing style tag', () => {
-      assert(layout.root.$$('style').length === 0)
-      const styles1 = 'body { background-color: black; }';
-      const styles2 = 'body { margin: 0; }';
-      layout.style(styles1);
-      assert(layout.root.$$('style').length === 1)
-      layout.style(styles2);
-      assert(layout.root.$$('style').length === 1)
-      const inner = layout.root.$('style').innerHTML
-      assert(inner.includes(styles1));
-      assert(inner.includes(styles2));
+   it('should not add a link if one with the same href and version already exists', () => {
+      const href = 'style.css';
+      const version = '1.0';
+      layout.link(href, version);
+      layout.link(href, version);
+      assert.strictEqual(layout.root.$$(`link[rel="stylesheet"][href="${href}?v=${version}"]`).length, 1, 'Should not add duplicate link with the same version');
    });
 
-});
+   it('should handle invalid href or version correctly', () => {
+      layout.link('', '1.0');
+      layout.link(null, '1.0');
+      // layout.link('style.css', '');
+      // layout.link('style.css', null);
+      assert.strictEqual(layout.root.$('link[rel="stylesheet"]'), null, 'Should not add a link when href or version are invalid');
+   });
+
+   it('should add link correctly', () => {
+      const href = 'style.css';
+      layout.link(href);
+      assert.strictEqual(layout.root.$('link[rel="stylesheet"]').getAttribute('href'), href, 'Link not set correctly');
+   });
+
+   it('should not add a new link element if one already exists with the same href and no version', () => {
+      const href = 'style.css';
+      layout.link(href);  // Добавление ссылки без версии
+      layout.link(href);  // Повторное добавление той же ссылки без версии
+      assert.strictEqual(layout.root.$$(`link[rel="stylesheet"][href="${href}"]`).length, 1, 'Should not add duplicate link without version');
+   });
+
+   it('should not add a link if href is undefined or null', () => {
+      layout.link(undefined, '1.0');
+      layout.link(null);
+      assert.strictEqual(layout.root.$('link[rel="stylesheet"]'), null, 'Should not add a link when href is undefined or null');
+   });
+
+   it('should handle different versions for the same href', () => {
+      const href = 'style.css';
+      const version1 = '1.0';
+      const version2 = '1.1';
+      layout.link(href, version1);
+      layout.link(href, version2);
+      assert.strictEqual(layout.root.$$(`link[rel="stylesheet"]`).length, 2, 'Should add different links for different versions');
+      assert.strictEqual(layout.root.$$(`link[rel="stylesheet"][href="${href}?v=${version1}"]`).length, 1, 'First version link should exist');
+      assert.strictEqual(layout.root.$$(`link[rel="stylesheet"][href="${href}?v=${version2}"]`).length, 1, 'Second version link should exist');
+   });
+
+   it('should correctly add version when href already has parameters', () => {
+      const href = 'style.css?param=value';
+      const version = '1.0';
+      layout.link(href, version);
+      assert.strictEqual(layout.root.$('link[rel="stylesheet"]').getAttribute('href'), `${href}&v=${version}`, 'Href should include version appended with &');
+   });
+
+   it('should not add a link when one with a similar href prefix exists', () => {
+      const href = 'style.css';
+      layout.link(href);
+      layout.link(href + '?param=value', '1.0');
+      assert.strictEqual(layout.root.$$(`link[rel="stylesheet"]`).length, 2, 'Should recognize different full hrefs as different links');
+   });
+
+})
 
 describe('Scripts', () => {
    let layout;
@@ -121,6 +245,37 @@ describe('Scripts', () => {
       assert.strictEqual(layout.root.$('script').innerHTML, '', 'Script innerHTML should be empty');
    });
 
+   it('should add script correctly', () => {
+      const scriptContent = 'console.log("Hello, world!");';
+      layout.script({}, scriptContent);
+      assert.strictEqual(layout.root.$('script').innerHTML, scriptContent, 'Script content not set correctly');
+   });
+
+   it('should add version to script src', () => {
+      const src = 'script.js';
+      const version = '1.0';
+      layout.script({ src }, '', true, version);
+      assert.strictEqual(layout.root.$('script').getAttribute('src'), `${src}?v=${version}`, 'Script src should include version');
+   });
+
+   it('should not add script if no attributes and no innerHTML', () => {
+      layout.script({}, '');
+      assert.strictEqual(layout.root.$('script'), null, 'Script should not be added if there are no attributes and no innerHTML');
+   });
+
+   it('should add script after body when head is false', () => {
+      const scriptContent = 'console.log("Script in body");';
+      layout.script({ src: 'scriptbody.js' }, scriptContent, false);
+      assert.strictEqual(layout.body.next.$('script').innerHTML, scriptContent, 'Script should be added to body');
+   });
+
+   it('should append version parameter correctly when src already has parameters', () => {
+      const srcWithParams = 'script.js?existing=param';
+      const version = '1.0';
+      layout.script({ src: srcWithParams }, '', true, version);
+      assert.strictEqual(layout.root.$('script').getAttribute('src'), `${srcWithParams}&v=${version}`, 'Version parameter should be appended with &');
+   });
+  
 })
 
 describe('Styles', () => {
@@ -138,6 +293,32 @@ describe('Styles', () => {
       console.log(layout.root.$('style').innerHTML)
       assert.strictEqual(layout.root.$('style').innerHTML, 'body{color:blue}div{font-size:12px}', 'Styles should be minified');
    });
+
+   it('should add style correctly', () => {
+      const styles = 'body { background-color: black; }';
+      layout.style(styles);
+      assert(layout.root.$('style').innerHTML.includes(styles), 'Styles not set correctly');
+   });
+
+   it('Should add simple styles', () => {
+      const styles = [{ body: { bgc: 'black' } }]
+      const css = new Simple(styles).stylesheet()
+      layout.style(styles);
+      assert(layout.root.$('style').innerHTML.includes(css), 'Styles not set correctly');
+   })
+
+   it('should add styles to existing style tag', () => {
+      assert(layout.root.$$('style').length === 0)
+      const styles1 = 'body { background-color: black; }';
+      const styles2 = 'body { margin: 0; }';
+      layout.style(styles1);
+      assert(layout.root.$$('style').length === 1)
+      layout.style(styles2);
+      assert(layout.root.$$('style').length === 1)
+      const inner = layout.root.$('style').innerHTML
+      assert(inner.includes(styles1));
+      assert(inner.includes(styles2));
+   });
 })
 
 describe('Url', () => {
@@ -149,39 +330,101 @@ describe('Url', () => {
       assert.strictEqual(layout.root.$('link[rel="canonical"]'), null, 'Canonical URL should not be added for invalid URLs');
    });
 
+   
+   it('should add url correctly', () => {
+      const url = 'http://localhost';
+      layout.url(url);
+      assert(layout.root.$('link[rel="canonical"]').getAttribute('href') === url, 'Canonical URL not set correctly');
+   });
+
+   it('should add og:url meta correctly', () => {
+      const url = 'http://example.com';
+      const host = 'http://example.com';
+      layout.url(url, host);
+      assert.strictEqual(layout.root.$('meta[property="og:url"]').getAttribute('content'), url, 'og:url meta not set correctly');
+   });
+   
+   it('should add canonical link if not already present', () => {
+      const url = 'http://example.com';
+      const host = 'http://example.com';
+      layout.url(url, host);
+      assert.strictEqual(layout.root.$('link[rel="canonical"]').getAttribute('href'), url, 'Canonical link should be added if not present');
+   });
+   
+   it('should update existing canonical link', () => {
+      const initialUrl = 'http://example.com/initial';
+      const newUrl = 'http://example.com/new';
+      const host = 'http://example.com';
+      layout.url(initialUrl, host);
+      layout.url(newUrl, host);
+      assert.strictEqual(layout.root.$('link[rel="canonical"]').getAttribute('href'), newUrl, 'Canonical link should be updated with new URL');
+   });
+   
+   it('should handle invalid URL with valid host', () => {
+      layout.url('http://', 'http://example.com');
+      assert.strictEqual(layout.root.$('meta[property="og:url"]'), null, 'Meta og:url should not be added for invalid URL');
+      assert.strictEqual(layout.root.$('link[rel="canonical"]'), null, 'Canonical link should not be added for invalid URL');
+   });
+   
+
 })
 
-describe('Link', () => {
+describe('layout.viewport',() => {
    let layout;
+
    beforeEach(() => layout = new Layout());
 
-   it('should add a new link element without version', () => {
-      const href = 'style.css';
-      layout.link(href);
-      assert.strictEqual(layout.root.$('link[rel="stylesheet"]').getAttribute('href'), href, 'Link href should match the provided href');
+   it('should update existing viewport meta correctly', () => {
+      // Добавляем изначальный viewport
+      const initialContent = 'width=device-width, initial-scale=1.0';
+      layout.viewport(initialContent);
+   
+      // Обновляем viewport
+      const updatedContent = 'width=device-width, initial-scale=2.0';
+      layout.viewport(updatedContent);
+   
+      // Проверяем, что содержимое meta обновлено
+      assert.strictEqual(layout.root.$('meta[name="viewport"]').getAttribute('content'), updatedContent, 'Existing viewport meta content should be updated');
    });
-
-   it('should add a new link element with version', () => {
-      const href = 'style.css';
-      const version = '1.0';
-      layout.link(href, version);
-      assert.strictEqual(layout.root.$('link[rel="stylesheet"]').getAttribute('href'), `${href}?v=${version}`, 'Link href should include version query parameter');
+   
+   it('should not add a second viewport meta if one already exists', () => {
+      // Добавляем изначальный viewport
+      const initialContent = 'width=device-width, initial-scale=1.0';
+      layout.viewport(initialContent);
+   
+      // Пытаемся добавить ещё один
+      const secondContent = 'width=device-width, initial-scale=2.0';
+      layout.viewport(secondContent);
+   
+      // Проверяем, что в документе только один элемент meta viewport
+      assert.strictEqual(layout.root.$$(`meta[name="viewport"]`).length, 1, 'Only one viewport meta should exist');
+   });
+   
+   it('should add viewport correctly', () => {
+      const viewportContent = 'width=device-width, initial-scale=1.0';
+      layout.viewport(viewportContent);
+      assert.strictEqual(layout.root.$('meta[name="viewport"]').getAttribute('content'), viewportContent, 'Viewport not set correctly');
    });
+})
 
-   it('should not add a link if one with the same href and version already exists', () => {
-      const href = 'style.css';
-      const version = '1.0';
-      layout.link(href, version);
-      layout.link(href, version);
-      assert.strictEqual(layout.root.$$(`link[rel="stylesheet"][href="${href}?v=${version}"]`).length, 1, 'Should not add duplicate link with the same version');
+describe('description and title', () => {
+   let layout;
+
+   beforeEach(() => layout = new Layout());
+
+   it('should add description correctly', () => {
+      const description = 'Test Description';
+      layout.description(description);
+      assert.strictEqual(layout.root.$('meta[name="description"]').getAttribute('content'), description, 'Description not set correctly');
+      assert.strictEqual(layout.root.$('meta[property="og:description"]').getAttribute('content'), description, 'Description not set correctly');
+      assert.strictEqual(layout.root.$('meta[property="twitter:description"]').getAttribute('content'), description, 'Description not set correctly');
    });
 
-   it('should handle invalid href or version correctly', () => {
-      layout.link('', '1.0');
-      layout.link(null, '1.0');
-      // layout.link('style.css', '');
-      // layout.link('style.css', null);
-      assert.strictEqual(layout.root.$('link[rel="stylesheet"]'), null, 'Should not add a link when href or version are invalid');
+   it('should add title correctly', () => {
+      const title = 'Test Title';
+      layout.title(title);
+      assert(layout.root.$('title').innerHTML === title, 'Title not set correctly');
+      assert(layout.root.$('[property="og:title"]').getAttribute('content') === title, 'Title not set correctly');
    });
 
-})
+});

package/tests/layout.test.js

@@ -0,0 +1,160 @@
+const assert = require('assert');
+const { describe, it, beforeEach } = require('node:test')
+const Layout = require('../lib/layout');
+const { buildFromCache } = require('als-document')
+
+describe('Layout Integrative tests', () => {
+   let layout;
+
+   beforeEach(() => layout = new Layout());
+
+   it('should integrate multiple elements correctly', () => {
+      layout.title('Test Title');
+      layout.description('Test Description');
+      layout.keywords(['keyword1', 'keyword2']);
+
+      assert(layout.root.$('title').innerHTML === 'Test Title', 'Title not integrated correctly');
+      assert(layout.root.$('meta[name="description"]').getAttribute('content') === 'Test Description', 'Description not integrated correctly');
+      assert(layout.root.$('meta[name="keywords"]').getAttribute('content') === 'keyword1,keyword2', 'Keywords not integrated correctly');
+   });
+
+   it('should update elements correctly when added multiple times', () => {
+      layout.title('First Title');
+      assert(layout.root.$('title').innerHTML === 'First Title', 'Title did not update correctly when added multiple times');
+      layout.title('Second Title');
+      assert(layout.root.$('title').innerHTML === 'Second Title', 'Title did not update correctly when added multiple times');
+   });
+
+   it('should remove elements correctly', () => {
+      layout.title('Test Title');
+      layout.root.$('title').remove();
+      assert(layout.root.$('title') === null, 'Title element was not removed correctly');
+   });
+
+});
+
+describe('HTML Structure Initialization', () => {
+   let layout;
+
+   beforeEach(() => {
+      layout = new Layout();
+   });
+
+   it('should initialize html element correctly', () => {
+      assert.strictEqual(layout.html.tagName, 'html', 'HTML element should be initialized');
+   });
+
+   it('should not recreate html element if it already exists', () => {
+      const existingHtml = layout.html; // вызовем один раз
+      assert.strictEqual(layout.html, existingHtml, 'HTML element should not be recreated');
+   });
+
+   it('should initialize body element correctly', () => {
+      assert.strictEqual(layout.body.tagName, 'body', 'Body element should be initialized');
+   });
+
+   it('should not recreate body element if it already exists', () => {
+      const existingBody = layout.body; // вызовем один раз
+      assert.strictEqual(layout.body, existingBody, 'Body element should not be recreated');
+   });
+
+   it('should initialize head element correctly', () => {
+      assert.strictEqual(layout.head.tagName, 'head', 'Head element should be initialized');
+   });
+
+   it('should not recreate head element if it already exists', () => {
+      const existingHead = layout.head; // вызовем один раз
+      assert.strictEqual(layout.head, existingHead, 'Head element should not be recreated');
+   });
+});
+
+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">
+         <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')
+   })
+
+});
+
+describe('Cache and Clone Testing', () => {
+   let layout;
+   beforeEach(() => {
+      layout = new Layout();
+   });
+
+   it('should retrieve cached version of the layout', () => {
+      const cachedVersion = layout.cached;
+      assert.doesNotThrow(() => JSON.stringify(cachedVersion)) // should be object without recursions
+      assert(buildFromCache(cachedVersion).innerHTML === layout.rawHtml)
+   });
+
+   it('should clone the layout correctly', () => {
+      const clone = layout.clone;
+      assert(clone instanceof Layout, 'Clone should be an instance of Layout');
+      assert.notStrictEqual(clone, layout, 'Clone should not be the same instance as the original');
+   });
+});
+
+describe('Version method tests', () => {
+   let layout;
+
+   beforeEach(() => {
+      layout = new Layout();
+   });
+
+   it('should set the version correctly', () => {
+      const version = '1.0.0';
+      layout.version(version);
+      assert.strictEqual(layout.v, version, 'Version should be set correctly');
+   });
+});

package/tests/integrative.test.js

@@ -1,33 +0,0 @@
-const assert = require('assert');
-const { describe, it, beforeEach } = require('node:test')
-const Layout = require('../lib/layout');
-
-describe('Layout Integrative tests', () => {
-   let layout;
-
-   beforeEach(() => layout = new Layout());
-
-   it('should integrate multiple elements correctly', () => {
-      layout.title('Test Title');
-      layout.description('Test Description');
-      layout.keywords(['keyword1', 'keyword2']);
-
-      assert(layout.root.$('title').innerHTML === 'Test Title', 'Title not integrated correctly');
-      assert(layout.root.$('meta[name="description"]').getAttribute('content') === 'Test Description', 'Description not integrated correctly');
-      assert(layout.root.$('meta[name="keywords"]').getAttribute('content') === 'keyword1,keyword2', 'Keywords not integrated correctly');
-   });
-
-   it('should update elements correctly when added multiple times', () => {
-      layout.title('First Title');
-      assert(layout.root.$('title').innerHTML === 'First Title', 'Title did not update correctly when added multiple times');
-      layout.title('Second Title');
-      assert(layout.root.$('title').innerHTML === 'Second Title', 'Title did not update correctly when added multiple times');
-   });
-
-   it('should remove elements correctly', () => {
-      layout.title('Test Title');
-      layout.root.$('title').remove();
-      assert(layout.root.$('title') === null, 'Title element was not removed correctly');
-   });
-
-});