als-layout 3.0.1 → 4.1.0

package/docs/0-change-log.md

@@ -1,5 +1,15 @@
 ## Change Log 
 
+* V4.1.0
+  * Render removed
+* V4.0.0
+  * All code rebuilded and refactored
+  * No als-simple-css for style
+  * No charset method
+  * minifying for style and inner scripts
+  * updated render version
+  * render as element's method instead layout's method
+
 * V3.0.0
   * render switched to als-render
   * updated bug with meta tags after body

package/docs/1-basic-usage.md

@@ -13,7 +13,6 @@ Once you have your `Layout` instance, you can easily add or modify various eleme
 
 ```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

package/index.js

@@ -1,3 +1,152 @@
-const Layout = require('./lib/layout')
+const { Document, SingleNode, Node } = require('als-document');
+const UglifyJS = require("uglify-js");
+const uglifycss = require('uglifycss');
+
+const onloadScript = /*js*/`document.addEventListener('DOMContentLoaded', function() {
+   const elements = document.querySelectorAll('[onload]');
+   elements.forEach(element => {
+       const onloadCode = element.getAttribute('onload');
+       const func = Function('"use strict"; return function() { ' + onloadCode + ' }');
+       func().call(element);
+       element.removeAttribute('onload');
+   });
+});`;
+
+class Layout extends Document {
+   get rawHtml() { return this.innerHTML }
+   get clone() { return new Layout(new Document(this), this.URL, this.minified) }
+   lang(lang) { this.html.setAttribute('lang', lang); return this }
+   version(v) { this.v = v; return this; }
+
+   constructor(html, host, minified = false) {
+      super(html, host);
+      this.minified = minified
+      this.root = this.html
+   }
+
+   onload() {
+      if (this.onloadAdded) return
+      this.script({}, onloadScript);
+      this.onloadAdded = true
+      return this
+   }
+
+   title(title) {
+      super.title // create title tag if not exists
+      super.title = title
+      this.meta({ property: 'og:title', content: title })
+      return this
+   }
+
+   description(description) {
+      this.meta({ name: 'description', content: description })
+      this.meta({ property: 'og:description', content: description })
+      this.meta({ property: 'twitter:description', content: description })
+      return this
+   }
+
+   favicon(href) {
+      const faviconElement = this.root.$('link[rel=icon][type=image/x-icon]')
+      if (faviconElement) faviconElement.setAttribute('href', href)
+      else this.head.insert(2, new SingleNode('link', { rel: 'icon', href, type: 'image/x-icon' }))
+      return this
+   }
+
+   meta(props) {
+      const entries = Object.entries(props)
+      const [name, value] = entries[0]
+      const selector = `meta[${name}="${value}"]`
+      const metaElement = this.root.$(selector)
+      if (metaElement) entries.forEach(([name, v]) => metaElement.setAttribute(name, props[name]))
+      else this.head.insert(2, new SingleNode('meta', props))
+   }
+
+   keywords(keywords = []) {
+      let keywordsElement = this.root.$('meta[name=keywords]')
+      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)
+      });
+      if (existingKeywords.length) {
+         keywordsElement.setAttribute('content', existingKeywords.join())
+         this.head.insert(2, keywordsElement)
+      }
+      return this
+   }
+
+   viewport(viewport = 'width=device-width, initial-scale=1.0') {
+      const element = this.root.$('meta[name="viewport"]')
+      if (element) element.setAttribute('content', viewport)
+      else this.head.insert(2, new SingleNode('meta', { name: 'viewport', content: viewport }))
+      return this
+   }
+
+   image(image, version = this.v) {
+      if (image && version) image += (image.includes('?') ? '&' : '?') + `v=${version}`
+      this.meta({ property: 'og:image', content: image })
+      this.meta({ name: 'twitter:image', content: image })
+      this.meta({ name: 'twitter:card', content: 'summary_large_image' })
+      return this
+   }
+
+   style(styles, minified = this.minified) {
+      if (typeof styles !== 'string') throw 'styles parameter should be string';
+      if (minified) styles = uglifycss.processString(styles);
+      let styleElement = this.root.$('style')
+      if (styleElement) styleElement.innerHTML = styleElement.innerHTML + '\n' + styles
+      else {
+         styleElement = new Node('style')
+         styleElement.innerHTML = styles
+         this.head.insert(2, styleElement)
+      }
+      return this
+   }
+
+   url(url, host = this.URL) {
+      try {
+         url = new URL(url, host).href.replace(/\/$/, '')
+         this.meta({ property: 'og:url', content: url })
+         const canonicalElement = this.root.$('link[rel="canonical"]')
+         if (canonicalElement) canonicalElement.setAttribute('href', url)
+         else this.head.insert(2, new SingleNode('link', { rel: 'canonical', href: url }))
+      } catch (error) {
+         console.log(`url ${url} with host ${host} is not valid url`)
+      }
+      return this
+   }
+
+   script(attrs = {}, innerHTML = '', head = true, version = this.v,minified = this.minified) {
+      if (typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) attrs = {}
+      if (attrs.src) {
+         const selector = `script[src="${attrs.src}"]`
+         if (attrs.src && this.root.$(selector)) return this
+         if (attrs.src && version) attrs.src += (attrs.src.includes('?') ? '&' : '?') + `v=${version}`
+      }
+      if (Object.keys(attrs).length || innerHTML) {
+         const script = new Node('script', attrs)
+         if (innerHTML) {
+            if (minified) innerHTML = UglifyJS.minify(innerHTML).code
+            script.innerHTML = innerHTML
+         }
+         if (head) this.head.insert(2, script)
+         else this.body.insert(3, script)
+      }
+      return this
+   }
+
+   link(href, version = this.v) {
+      if (!href || typeof href !== 'string') return this
+      if (href && version) href += (href.includes('?') ? '&' : '?') + `v=${version}`
+      const selector = `link[rel=stylesheet][href^="${href}"]`
+      let linkElement = this.root.$(selector)
+      if (linkElement) return
+      linkElement = new SingleNode('link', { rel: 'stylesheet', href })
+      this.head.insert(2, linkElement)
+      return this
+   }
+}
 
 module.exports = Layout

package/package.json

@@ -1,22 +1,18 @@
 {
   "name": "als-layout",
-  "version": "3.0.1",
-  "description": "Html layout constructor",
+  "version": "4.1.0",
   "main": "index.js",
-  "directories": {
-    "lib": "lib"
-  },
   "scripts": {
     "test": "node --test --experimental-test-coverage",
     "report": "node --test --experimental-test-coverage --test-reporter=lcov --test-reporter-destination=lcov.info"
   },
   "keywords": [],
   "author": "Alex Sorkin",
-  "license": "ISC",
+  "license": "MIT",
+  "description": "Html layout constructor",
   "dependencies": {
-    "als-css-parser": "^0.5.0",
     "als-document": "^1.4.0",
-    "als-render": "^0.2.4",
-    "als-simple-css": "^9.1.0"
+    "uglify-js": "^3.19.2",
+    "uglifycss": "^0.0.29"
   }
 }

package/readme.md

@@ -20,6 +20,16 @@ const Layout = require('als-layout')
 
 ## Change Log 
 
+* V4.1.0
+  * Render removed
+* V4.0.0
+  * All code rebuilded and refactored
+  * No als-simple-css for style
+  * No charset method
+  * minifying for style and inner scripts
+  * updated render version
+  * render as element's method instead layout's method
+
 * V3.0.0
   * render switched to als-render
   * updated bug with meta tags after body
@@ -40,7 +50,6 @@ Once you have your `Layout` instance, you can easily add or modify various eleme
 
 ```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
@@ -137,48 +146,3 @@ 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
-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/constructor.test.js

@@ -1,7 +1,6 @@
 const assert = require('assert');
 const { describe, it } = require('node:test')
-const Layout = require('../lib/layout');
-const { Root,cacheDoc } = require('als-document')
+const Layout = require('../index');
 
 describe('Layout Initialization', () => {
     it('should create an instance of Layout', () => {
@@ -16,25 +15,14 @@ describe('Layout Initialization', () => {
 
     it('should allow setting a custom language', () => {
         const customLang = 'fr';
-        const layout = new Layout(undefined, { lang: customLang });
+        const layout = new Layout(undefined).lang(customLang);
         layout.lang(customLang)
         assert(layout.html.getAttribute('lang') === customLang, `language is not set to ${customLang}`);
     });
 
-    it('should initialize development mode as undefined or false', () => {
-        const layout = new Layout();
-        assert.strictEqual(layout.dev, undefined, 'dev is not undefined or false by default');
-    });
-
-    it('should initialize host as undefined', () => {
-        const layout = new Layout();
-        assert.strictEqual(layout.host, undefined, 'host is not undefined by default');
-    });
-
     it('should allow setting a custom host', () => {
         const customHost = 'http://localhost';
         const layout = new Layout(undefined,customHost);
-        console.log(layout.URL)
         assert.strictEqual(layout.URL, customHost, `host is not set to ${customHost}`);
     });
 });

package/tests/description.test.js

@@ -0,0 +1,33 @@
+const assert = require('assert');
+const { describe, it,beforeEach } = require('node:test')
+const Layout = require('../index');
+
+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 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');
+   });
+
+   it('should add title if no title tag', () => {
+      layout.$('title').remove()
+      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/favicon.test.js

@@ -0,0 +1,36 @@
+const assert = require('assert');
+const { describe, it, beforeEach } = require('node:test')
+const { SingleNode } = require('als-document')
+const Layout = require('../index');
+
+describe('Favicon tests', () => {
+   let layout;
+
+   beforeEach(() => {
+      layout = new Layout();
+      // layout.head.insert(1, new SingleNode('title', {})); // Добавляем элемент title для проверки позиции
+   });
+
+   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 the end of head if not present', () => {
+      const faviconHref = 'favicon.ico';
+      layout.favicon(faviconHref);
+      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', () => {
+      const faviconHref = 'favicon.ico';
+      layout.favicon(faviconHref);
+      assert.strictEqual(layout.root.$('link[rel="icon"]').getAttribute('href'), faviconHref, 'Favicon not set correctly');
+   });
+
+});

package/tests/image.test.js

@@ -0,0 +1,42 @@
+const assert = require('assert');
+const { describe, it,beforeEach } = require('node:test')
+const Layout = require('../index');
+
+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);
+      assert.strictEqual(layout.root.$('meta[property="og:image"]').getAttribute('content'), imageUrl, 'Image not set correctly');
+      assert.strictEqual(layout.root.$('meta[name="twitter:image"]').getAttribute('content'), imageUrl, 'Image 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 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');
+   });
+});

package/tests/{layout.test.js → integrative.test.js}

@@ -1,7 +1,6 @@
 const assert = require('assert');
 const { describe, it, beforeEach } = require('node:test')
-const Layout = require('../lib/layout');
-const { buildFromCache } = require('als-document')
+const Layout = require('../index');
 
 describe('Layout Integrative tests', () => {
    let layout;

package/tests/keywords.test.js

@@ -0,0 +1,47 @@
+const assert = require('assert');
+const { describe, it, beforeEach } = require('node:test')
+const Layout = require('../index');
+const { SingleNode } = require('als-document')
+
+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'];
+      layout.keywords(additionalKeywords);
+      const expectedContent = 'initial,keyword1,keyword2';
+      assert.strictEqual(layout.root.$('meta[name="keywords"]').getAttribute('content'), expectedContent, 'Existing keywords not updated correctly');
+   });
+
+   it('should not add duplicate keywords', () => {
+      layout.head.insert(2, new SingleNode('meta', { name: 'keywords', content: 'keyword1,keyword2' }));
+      const additionalKeywords = ['keyword2', 'keyword3'];
+      layout.keywords(additionalKeywords);
+      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 '];
+      layout.keywords(messyKeywords);
+      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', () => {
+      const keywords = ['keyword1', 'keyword2'];
+      layout.keywords(keywords);
+      assert(layout.root.$('meta[name="keywords"]').getAttribute('content') === keywords.join(), 'Keywords not set correctly');
+   });
+
+   it('should handle empty keywords array', () => {
+      layout.keywords([]);
+      assert(!layout.root.$('meta[name="keywords"]'), 'Meta tag for empty keywords should not be created');
+   });
+
+});

package/tests/link.test.js

@@ -0,0 +1,83 @@
+const assert = require('assert');
+const { describe, it, beforeEach } = require('node:test')
+const Layout = require('../index');
+
+
+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 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 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');
+   });
+
+})

package/tests/script.test.js

@@ -0,0 +1,57 @@
+const assert = require('assert');
+const { describe, it, beforeEach } = require('node:test')
+const Layout = require('../index');
+
+describe('Scripts', () => {
+   let layout;
+
+   beforeEach(() => layout = new Layout());
+
+   it('should not add script if attributes are not an object', () => {
+      layout.script("not-an-object");
+      assert.strictEqual(layout.root.$('script'), null, 'Script should not be added when attributes are not an object');
+   });
+
+   it('should not add script if src already exists', () => {
+      layout.script({ src: 'existingscript.js' }, 'console.log("test");');
+      layout.script({ src: 'existingscript.js' }, 'console.log("duplicate");');
+      assert.strictEqual(layout.root.$$(`script[src="existingscript.js"]`).length, 1, 'Duplicate script should not be added');
+   });
+
+   it('should handle empty innerHTML correctly', () => {
+      layout.script({ src: 'test.js' }, '');
+      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.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 &');
+   });
+  
+})