npm - als-layout - Versions diffs - 3.0.0 → 4.0.0 - Mend

als-layout 3.0.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/docs/0-change-log.md +8 -0
package/docs/1-basic-usage.md +0 -1
package/docs/4-render.md +22 -17
package/index.js +163 -1
package/package.json +6 -9
package/readme.md +30 -18
package/tests/constructor.test.js +2 -14
package/tests/description.test.js +33 -0
package/tests/favicon.test.js +36 -0
package/tests/image.test.js +42 -0
package/tests/{layout.test.js → integrative.test.js} +1 -2
package/tests/keywords.test.js +47 -0
package/tests/link.test.js +83 -0
package/tests/render/counter/App.js +8 -0
package/tests/render/counter/Counter.js +9 -0
package/tests/render/counter/build.js +12 -0
package/tests/render.test.js +8 -15
package/tests/script.test.js +57 -0
package/tests/style.test.js +41 -0
package/tests/url.test.js +50 -0
package/tests/viewport.test.js +41 -0
package/lib/elements/add-meta.js +0 -11
package/lib/elements/charset.js +0 -8
package/lib/elements/description.js +0 -9
package/lib/elements/favicon.js +0 -10
package/lib/elements/image.js +0 -11
package/lib/elements/index.js +0 -15
package/lib/elements/keywords.js +0 -20
package/lib/elements/link.js +0 -13
package/lib/elements/script.js +0 -18
package/lib/elements/style.js +0 -30
package/lib/elements/title.js +0 -11
package/lib/elements/url.js +0 -17
package/lib/elements/viewport.js +0 -8
package/lib/layout.js +0 -30
package/lib/onload.js +0 -9
package/lib/render.js +0 -12
package/tests/counter/App.js +0 -6
package/tests/counter/build.js +0 -14
package/tests/counter/counter.js +0 -14
package/tests/elements.test.js +0 -437
/package/tests/render/{App.js → render/App.js} +0 -0
/package/tests/render/{Some.js → render/Some.js} +0 -0

package/tests/render/counter/App.js ADDED Viewed

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

package/tests/render/counter/Counter.js ADDED Viewed

@@ -0,0 +1,9 @@
+function Counter({count}) {
+   return (<div>
+      <button onclick={() => this.update({count:count+1})}>Increase</button>
+      <span>{count}</span>
+      <button onclick={() => this.update({count:count-1})}>Decrease</button>
+   </div>)
+}
+module.exports = Counter

package/tests/render/counter/build.js ADDED Viewed

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

package/tests/render.test.js CHANGED Viewed

@@ -1,31 +1,24 @@
 const assert = require('assert');
 const { describe, it,beforeEach } = require('node:test')
-const Layout = require('../lib/layout')
+const Layout = require('../index')
 describe('Basic tests', () => {
    let layout
    beforeEach(() => layout = new Layout())
    it('Should render without bundle',() => {
-      const { rawHtml } = layout.render('./render/App', 'body')
+      layout.$('body').render('./render/render/App',{},false)
       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)
+'<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><div component="App"><div>Hello from App!</div>\n' +
+    '      <div component="Some">Hello From Some!</div></div></body></html>'
+      assert(layout.rawHtml === expected)
    })
    it('Should render with bundle',() => {
-      const { rawHtml } = layout.render('./render/App', 'body',{})
-      assert(rawHtml.includes('<script>'))
+      layout.$('body').render('./render/render/App')
+      assert(layout.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)
+      assert.throws(() => layout.$('main').render('./render/render/App'))
    })
 })

package/tests/script.test.js ADDED Viewed

@@ -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 &');
+   });
+})

package/tests/style.test.js ADDED Viewed

@@ -0,0 +1,41 @@
+const assert = require('assert');
+const { describe, it, beforeEach } = require('node:test')
+const Layout = require('../index');
+const uglifycss = require('uglifycss');
+describe('Styles', () => {
+   let layout;
+   beforeEach(() => layout = new Layout());
+   it('should not add style if styles are invalid', () => {
+      assert.throws(() => layout.style(123))
+      // layout.style(123);
+      // assert.strictEqual(layout.root.$('style'), null, 'Style should not be added when styles are invalid');
+   });
+   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 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 add minified style', () => {
+      const styles = 'body { color: blue; } div { font-size: 12px; }';
+      const uglified = uglifycss.processString(styles);
+      layout.style(styles,true);
+      assert(layout.root.$('style').innerHTML === uglified, 'Styles should be minified');
+   });
+})

package/tests/url.test.js ADDED Viewed

@@ -0,0 +1,50 @@
+const assert = require('assert');
+const { describe, it, beforeEach } = require('node:test')
+const Layout = require('../index');
+describe('Url', () => {
+   let layout;
+   beforeEach(() => layout = new Layout());
+   it('should not add canonical URL if URL is invalid', () => {
+      layout.url('not-a-url', 'aa');
+      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');
+   });
+})

package/tests/viewport.test.js ADDED Viewed

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

package/lib/elements/add-meta.js DELETED Viewed

@@ -1,11 +0,0 @@
-const { SingleNode } = require('als-document')
-function addMeta(props, layout) {
-   const entries = Object.entries(props)
-   const [name, value] = entries[0]
-   const selector = `meta[${name}="${value}"]`
-   const metaElement = layout.root.$(selector)
-   if (metaElement) entries.forEach(([name, v]) => metaElement.setAttribute(name, props[name]))
-   else layout.head.insert(2, new SingleNode('meta', props))
-}
-module.exports = addMeta

package/lib/elements/charset.js DELETED Viewed

@@ -1,8 +0,0 @@
-const { SingleNode } = require('als-document')
-module.exports = function (charset = 'UTF-8', layout) {
-   const charsetElement = layout.head.$('meta[charset]')
-   if (charsetElement) charsetElement.setAttribute('charset', charset)
-   else layout.head.insert(2, new SingleNode('meta', { charset }))
-   return layout
-}

package/lib/elements/description.js DELETED Viewed

@@ -1,9 +0,0 @@
-const addMeta = require('./add-meta')
-function addDescription(description, layout) {
-   addMeta({ name: 'description', content: description }, layout)
-   addMeta({ property: 'og:description', content: description }, layout)
-   addMeta({ property: 'twitter:description', content: description }, layout)
-   return layout
-}
-module.exports = addDescription

package/lib/elements/favicon.js DELETED Viewed

@@ -1,10 +0,0 @@
-const { SingleNode } = require('als-document')
-function addFavicon(href,layout) {
-   const faviconElement = layout.root.$('link[rel=icon][type=image/x-icon]')
-   if(faviconElement) faviconElement.setAttribute('href',href)
-   else layout.head.insert(2,new SingleNode('link',{rel:'icon',href,type:'image/x-icon'}))
-   return layout
-}
-module.exports = addFavicon

package/lib/elements/image.js DELETED Viewed

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

package/lib/elements/index.js DELETED Viewed

@@ -1,15 +0,0 @@
-const addKeywords = require('./keywords')
-const addStyle = require('./style')
-const addDescription = require('./description')
-const addTitle = require('./title')
-const addImage = require('./image')
-const addUrl = require('./url')
-const addFavicon = require('./favicon')
-const addScript = require('./script')
-const addLink = require('./link')
-const charset = require('./charset')
-const viewport = require('./viewport')
-module.exports = {
-   addKeywords, addStyle, addDescription, addTitle, addImage,
-   addUrl, addFavicon, addScript,addLink,charset,viewport
-}

package/lib/elements/keywords.js DELETED Viewed

@@ -1,20 +0,0 @@
-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' })
-   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())
-      layout.head.insert(2, keywordsElement)
-   }
-   return layout
-}
-module.exports = keywords

package/lib/elements/link.js DELETED Viewed

@@ -1,13 +0,0 @@
-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
-   linkElement = new SingleNode('link', { rel: 'stylesheet', href })
-   layout.head.insert(2, linkElement)
-   return layout
-}
-module.exports = addLink

package/lib/elements/script.js DELETED Viewed

@@ -1,18 +0,0 @@
-const { Node } = require('als-document')
-function addScript(attrs = {}, innerHTML = '', head = true, version, layout) {
-   if(typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) attrs = {}
-   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(Object.keys(attrs).length || innerHTML) {
-      const script = new Node('script', attrs)
-      if(innerHTML) script.innerHTML = innerHTML
-      if (head) layout.head.insert(2, script)
-      else layout.body.insert(3, script)
-   }
-   return layout
-}
-module.exports = addScript

package/lib/elements/style.js DELETED Viewed

@@ -1,30 +0,0 @@
-const CssParser = require('als-css-parser');
-const Simple = require('als-simple-css')
-const { Node } = require('als-document')
-function checkStyles(styles, minified) {
-   if (Array.isArray(styles)) styles = new Simple(styles).stylesheet(minified)
-   else if(typeof styles === 'string') {
-      styles = styles.trim()
-      if (minified) {
-         const cssParser = new CssParser(styles);
-         styles = cssParser.minified()
-      }
-   } else return null
-   return styles
-}
-function addStyle(styles, minified=false,layout) {
-   styles = checkStyles(styles,minified)
-   if(!styles) return layout
-   let styleElement = layout.root.$('style')
-   if(!styleElement) {
-      styleElement = new Node('style')
-      styleElement.innerHTML = styles
-      layout.head.insert(2, styleElement)
-   } else {
-      styleElement.innerHTML = styleElement.innerHTML + '\n' + styles
-   }
-   return layout
-}
-module.exports = addStyle

package/lib/elements/title.js DELETED Viewed

@@ -1,11 +0,0 @@
-const addMeta = require('./add-meta')
-function addTitle(title,layout) {
-   const element = layout.root.$('title')
-   if(element) element.innerHTML = title
-   else layout.head.insert(2,/*html*/`<title>${title}</title>`)
-   addMeta({property:'og:title',content:title},layout)
-   return layout
-}
-module.exports = addTitle

package/lib/elements/url.js DELETED Viewed

@@ -1,17 +0,0 @@
-const addMeta = require('./add-meta')
-const { SingleNode } = require('als-document')
-function getUrl(url, host, layout) {
-   try {
-      url = new URL(url, host).href.replace(/\/$/, '')
-      addMeta({ property: 'og:url', content: url }, layout)
-      const canonicalElement = layout.root.$('link[rel="canonical"]')
-      if (canonicalElement) canonicalElement.setAttribute('href', url)
-      else layout.head.insert(2, new SingleNode('link', { rel: 'canonical', href: url }))
-   } catch (error) {
-      console.log(`url ${url} with host ${host} is not valid url`)
-   }
-   return layout
-}
-module.exports = getUrl

package/lib/elements/viewport.js DELETED Viewed

@@ -1,8 +0,0 @@
-const { SingleNode } = require('als-document')
-module.exports = function (viewport, layout) {
-   const element = layout.root.$('meta[name="viewport"]')
-   if (element) element.setAttribute('content', viewport)
-   else layout.head.insert(2, new SingleNode('meta', { name: 'viewport', content: viewport }))
-   return layout
-}

package/lib/layout.js DELETED Viewed

@@ -1,30 +0,0 @@
-const { Document } = require('als-document')
-const onload = require('./onload')
-const render = require('./render')
-const {
-   addKeywords, addStyle, addDescription, addTitle, addImage,
-   addUrl, addFavicon, addScript, addLink, charset, viewport
-} = require('./elements/index')
-class Layout extends Document {
-   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) }
-   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) }
-   url(url, host = this.URL) { 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) }
-   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) }
-   render(path, selector, makeBundle) {return render(path, selector, makeBundle,this)}
-}
-module.exports = Layout

package/lib/onload.js DELETED Viewed

@@ -1,9 +0,0 @@
-module.exports = `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');
-   });
-});`

package/lib/render.js DELETED Viewed

@@ -1,12 +0,0 @@
-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/tests/counter/App.js DELETED Viewed

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

package/tests/counter/build.js DELETED Viewed

@@ -1,14 +0,0 @@
-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 DELETED Viewed

@@ -1,14 +0,0 @@
-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