als-layout 7.0.0 → 7.1.0

package/index.mjs

@@ -1,83 +1,91 @@
 import { Document, SingleNode, Node } from 'als-document';
-export class Layout extends Document {
-   constructor(html, host) { super(html, host); this.root = this.html; }
-   get rawHtml() { return this.innerHTML }
-   get clone() { return new this.constructor(new Document(this, this.URL), this.host) }
-   lang(lang) { this.html.setAttribute('lang', lang); return this }
-   link(href, attributes = { rel: "stylesheet", type: "text/css" }) {
-      if (!href || typeof href !== 'string') throw new Error(`href attribute must be a string`)
-      if (!this.root.querySelector(`link[rel=stylesheet][href^="${href}"]`)) 
-         this.head.insert(2, new SingleNode('link', { href, ...attributes }))
-      return this
-   }
-   keywords(keywords = []) {
-      let el = this.root.$('meta[name=keywords]') || new SingleNode('meta', { name: 'keywords' })
-      keywords = new Set([...(el.getAttribute('content') || '').split(','),...keywords.map(k => k.trim())].filter(Boolean))
-      if (keywords.size) el.setAttribute('content', Array.from(keywords).join(','))
-      if(keywords.size && !el.parent) this.head.insert(2, el)
-      return this
-   }
-   style(styles) {
-      if (typeof styles !== 'string') throw 'styles parameter should be string';
-      let el = this.root.$('style') || this.head.insert(2, new Node('style'))
-      el.innerHTML = el.innerHTML + '\n' + styles;
-      return this
-   }
-   url(url, host = this.URL) {
-      try {
-         url = (host ? new URL(url, host) : new URL(url)).href.replace(/\/$/, '')
-         this.meta({ property: 'og:url', content: url })
-         const el = this.root.$('link[rel="canonical"]') || this.head.insert(2, new SingleNode('link', { rel: 'canonical', href: url }))
-         el.setAttribute('href', url)
-      } catch (error) { error.info = `url "${url}" with host "${host}" is not valid url`; throw error; }
-      return this
-   }
-   meta(props) {
-      const entries = Object.entries(props)
-      const [name, value] = entries[0]
-      const metaElement = this.root.querySelector(`meta[${name}="${value}"]`) || this.head.insert(2, new SingleNode('meta', props))
-      entries.forEach(([name, v]) => metaElement.setAttribute(name, props[name]))
-      return this
-   }
-   script(attrs = {}, innerHTML = '', head = true) {
-      if (typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) attrs = {}
-      if (attrs.src && this.root.querySelector(`script[src="${attrs.src}"]`)) return this
-      if (Object.keys(attrs).length || innerHTML) {
-         const script = new Node('script', attrs)
-         if (innerHTML) script.innerHTML = innerHTML
-         if (head) this.head.insert(2, script)
-         else this.html.insert(2, script)
-      }
-      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 el = this.root.$('link[rel=icon][type=image/x-icon]')
-      if (el) el.setAttribute('href', href)
-      else this.head.insert(2, new SingleNode('link', { rel: 'icon', href, type: 'image/x-icon' }))
-      return this
-   }
-   viewport(viewport = 'width=device-width, initial-scale=1.0') {
-      const el = this.root.$('meta[name="viewport"]')
-      if (el) el.setAttribute('content', viewport)
-      else this.head.insert(2, new SingleNode('meta', { name: 'viewport', content: viewport }))
-      return this
-   }
-   image(image) {
-      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
-   }
-   title(title) {
-      super.title // create title tag if not exists
-      super.title = title
-      this.meta({ property: 'og:title', content: title })
-      return this
-   }
+export class Layout extends Document {
+   constructor(html, host) { super(html, host); this.root = this.html; }
+   get rawHtml() { return this.innerHTML }
+   get clone() { return new this.constructor(new Document(this, this.URL), this.URL) }
+   lang(lang) { this.html.setAttribute('lang', lang); return this }
+   link(href, attributes = { rel: "stylesheet", type: "text/css" }) {
+      if (!href || typeof href !== 'string') throw new Error(`href attribute must be a string`)
+      if (!this.root.querySelector(`link[rel=stylesheet][href^="${href}"]`))
+         this.head.insert(2, new SingleNode('link', { href, ...attributes }))
+      return this
+   }
+   keywords(keywords = []) {
+      let el = this.root.$('meta[name=keywords]') || new SingleNode('meta', { name: 'keywords' })
+      keywords = new Set([...(el.getAttribute('content') || '').split(','),...keywords.map(k => k.trim())].filter(Boolean))
+      if (keywords.size) el.setAttribute('content', Array.from(keywords).join(','))
+      if(keywords.size && !el.parent) this.head.insert(2, el)
+      return this
+   }
+   style(styles) {
+      if (typeof styles !== 'string') throw 'styles parameter should be string';
+      let el = this.root.$('style') || this.head.insert(2, new Node('style'))
+      el.innerHTML = el.innerHTML + '\n' + styles;
+      return this
+   }
+   url(url, host = this.URL) {
+      try {
+         this.urlObj = (host ? new URL(url, host) : new URL(url))
+         url = this.urlObj.href
+         this.meta({ property: 'og:url', content: url })
+         const el = this.root.$('link[rel="canonical"]') || this.head.insert(2, new SingleNode('link', { rel: 'canonical', href: url }))
+         el.setAttribute('href', url)
+      } catch (error) { error.info = `url "${url}" with host "${host}" is not valid url`; throw error; }
+      return this
+   }
+   meta(props) {
+      const entries = Object.entries(props)
+      const [name, value] = entries[0]
+      const metaElement = this.root.querySelector(`meta[${name}="${value}"]`) || this.head.insert(2, new SingleNode('meta', props))
+      entries.forEach(([name, v]) => metaElement.setAttribute(name, props[name]))
+      return this
+   }
+   script(attrs = {}, innerHTML = '', head = true) {
+      if (typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) attrs = {}
+      if (attrs.src && this.root.querySelector(`script[src="${attrs.src}"]`)) return this
+      if (Object.keys(attrs).length || innerHTML) {
+         const script = new Node('script', attrs)
+         if (innerHTML) script.innerHTML = innerHTML
+         if (head) this.head.insert(2, script)
+         else this.html.insert(2, script)
+      }
+      return this
+   }
+   description(description) {
+      this.meta({ name: 'description', content: description })
+      this.meta({ property: 'og:description', content: description })
+      this.meta({ name: 'twitter:description', content: description })
+      return this
+   }
+   favicon(href) {
+      const el = this.root.$('link[rel=icon][type=image/x-icon]')
+      if (el) el.setAttribute('href', href)
+      else this.head.insert(2, new SingleNode('link', { rel: 'icon', href, type: 'image/x-icon' }))
+      return this
+   }
+   viewport(viewport = 'width=device-width, initial-scale=1.0') {
+      const el = this.root.$('meta[name="viewport"]')
+      if (el) el.setAttribute('content', viewport)
+      else this.head.insert(2, new SingleNode('meta', { name: 'viewport', content: viewport }))
+      return this
+   }
+   image(image) {
+      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
+   }
+   title(title) {
+      super.title // create title tag if not exists
+      super.title = title
+      this.meta({ property: 'og:title', content: title })
+      return this
+   }
+   toDocument() {
+      if (typeof window === 'undefined' || typeof document === 'undefined') return this
+      document.querySelector('title')?.remove()
+      document.head.innerHTML = this.head.innerHTML
+      document.body.outerHTML = this.body.outerHTML
+      return this
+   }
 }

package/layout.js

@@ -43,85 +43,93 @@ function cacheDoc(doc){
   const props=['isSingle','tagName','attributes']
   fu
 return { parseHTML,Node,Query,TextNode,SingleNode,buildFromCache,cacheDoc,Root,Document }
 })()
 const { Document, SingleNode, Node } = alsDocument
-class Layout extends Document {
-   constructor(html, host) { super(html, host); this.root = this.html; }
-   get rawHtml() { return this.innerHTML }
-   get clone() { return new this.constructor(new Document(this, this.URL), this.host) }
-   lang(lang) { this.html.setAttribute('lang', lang); return this }
-   link(href, attributes = { rel: "stylesheet", type: "text/css" }) {
-      if (!href || typeof href !== 'string') throw new Error(`href attribute must be a string`)
-      if (!this.root.querySelector(`link[rel=stylesheet][href^="${href}"]`)) 
-         this.head.insert(2, new SingleNode('link', { href, ...attributes }))
-      return this
-   }
-   keywords(keywords = []) {
-      let el = this.root.$('meta[name=keywords]') || new SingleNode('meta', { name: 'keywords' })
-      keywords = new Set([...(el.getAttribute('content') || '').split(','),...keywords.map(k => k.trim())].filter(Boolean))
-      if (keywords.size) el.setAttribute('content', Array.from(keywords).join(','))
-      if(keywords.size && !el.parent) this.head.insert(2, el)
-      return this
-   }
-   style(styles) {
-      if (typeof styles !== 'string') throw 'styles parameter should be string';
-      let el = this.root.$('style') || this.head.insert(2, new Node('style'))
-      el.innerHTML = el.innerHTML + '\n' + styles;
-      return this
-   }
-   url(url, host = this.URL) {
-      try {
-         url = (host ? new URL(url, host) : new URL(url)).href.replace(/\/$/, '')
-         this.meta({ property: 'og:url', content: url })
-         const el = this.root.$('link[rel="canonical"]') || this.head.insert(2, new SingleNode('link', { rel: 'canonical', href: url }))
-         el.setAttribute('href', url)
-      } catch (error) { error.info = `url "${url}" with host "${host}" is not valid url`; throw error; }
-      return this
-   }
-   meta(props) {
-      const entries = Object.entries(props)
-      const [name, value] = entries[0]
-      const metaElement = this.root.querySelector(`meta[${name}="${value}"]`) || this.head.insert(2, new SingleNode('meta', props))
-      entries.forEach(([name, v]) => metaElement.setAttribute(name, props[name]))
-      return this
-   }
-   script(attrs = {}, innerHTML = '', head = true) {
-      if (typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) attrs = {}
-      if (attrs.src && this.root.querySelector(`script[src="${attrs.src}"]`)) return this
-      if (Object.keys(attrs).length || innerHTML) {
-         const script = new Node('script', attrs)
-         if (innerHTML) script.innerHTML = innerHTML
-         if (head) this.head.insert(2, script)
-         else this.html.insert(2, script)
-      }
-      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 el = this.root.$('link[rel=icon][type=image/x-icon]')
-      if (el) el.setAttribute('href', href)
-      else this.head.insert(2, new SingleNode('link', { rel: 'icon', href, type: 'image/x-icon' }))
-      return this
-   }
-   viewport(viewport = 'width=device-width, initial-scale=1.0') {
-      const el = this.root.$('meta[name="viewport"]')
-      if (el) el.setAttribute('content', viewport)
-      else this.head.insert(2, new SingleNode('meta', { name: 'viewport', content: viewport }))
-      return this
-   }
-   image(image) {
-      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
-   }
-   title(title) {
-      super.title // create title tag if not exists
-      super.title = title
-      this.meta({ property: 'og:title', content: title })
-      return this
-   }
+class Layout extends Document {
+   constructor(html, host) { super(html, host); this.root = this.html; }
+   get rawHtml() { return this.innerHTML }
+   get clone() { return new this.constructor(new Document(this, this.URL), this.URL) }
+   lang(lang) { this.html.setAttribute('lang', lang); return this }
+   link(href, attributes = { rel: "stylesheet", type: "text/css" }) {
+      if (!href || typeof href !== 'string') throw new Error(`href attribute must be a string`)
+      if (!this.root.querySelector(`link[rel=stylesheet][href^="${href}"]`))
+         this.head.insert(2, new SingleNode('link', { href, ...attributes }))
+      return this
+   }
+   keywords(keywords = []) {
+      let el = this.root.$('meta[name=keywords]') || new SingleNode('meta', { name: 'keywords' })
+      keywords = new Set([...(el.getAttribute('content') || '').split(','),...keywords.map(k => k.trim())].filter(Boolean))
+      if (keywords.size) el.setAttribute('content', Array.from(keywords).join(','))
+      if(keywords.size && !el.parent) this.head.insert(2, el)
+      return this
+   }
+   style(styles) {
+      if (typeof styles !== 'string') throw 'styles parameter should be string';
+      let el = this.root.$('style') || this.head.insert(2, new Node('style'))
+      el.innerHTML = el.innerHTML + '\n' + styles;
+      return this
+   }
+   url(url, host = this.URL) {
+      try {
+         this.urlObj = (host ? new URL(url, host) : new URL(url))
+         url = this.urlObj.href
+         this.meta({ property: 'og:url', content: url })
+         const el = this.root.$('link[rel="canonical"]') || this.head.insert(2, new SingleNode('link', { rel: 'canonical', href: url }))
+         el.setAttribute('href', url)
+      } catch (error) { error.info = `url "${url}" with host "${host}" is not valid url`; throw error; }
+      return this
+   }
+   meta(props) {
+      const entries = Object.entries(props)
+      const [name, value] = entries[0]
+      const metaElement = this.root.querySelector(`meta[${name}="${value}"]`) || this.head.insert(2, new SingleNode('meta', props))
+      entries.forEach(([name, v]) => metaElement.setAttribute(name, props[name]))
+      return this
+   }
+   script(attrs = {}, innerHTML = '', head = true) {
+      if (typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) attrs = {}
+      if (attrs.src && this.root.querySelector(`script[src="${attrs.src}"]`)) return this
+      if (Object.keys(attrs).length || innerHTML) {
+         const script = new Node('script', attrs)
+         if (innerHTML) script.innerHTML = innerHTML
+         if (head) this.head.insert(2, script)
+         else this.html.insert(2, script)
+      }
+      return this
+   }
+   description(description) {
+      this.meta({ name: 'description', content: description })
+      this.meta({ property: 'og:description', content: description })
+      this.meta({ name: 'twitter:description', content: description })
+      return this
+   }
+   favicon(href) {
+      const el = this.root.$('link[rel=icon][type=image/x-icon]')
+      if (el) el.setAttribute('href', href)
+      else this.head.insert(2, new SingleNode('link', { rel: 'icon', href, type: 'image/x-icon' }))
+      return this
+   }
+   viewport(viewport = 'width=device-width, initial-scale=1.0') {
+      const el = this.root.$('meta[name="viewport"]')
+      if (el) el.setAttribute('content', viewport)
+      else this.head.insert(2, new SingleNode('meta', { name: 'viewport', content: viewport }))
+      return this
+   }
+   image(image) {
+      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
+   }
+   title(title) {
+      super.title // create title tag if not exists
+      super.title = title
+      this.meta({ property: 'og:title', content: title })
+      return this
+   }
+   toDocument() {
+      if (typeof window === 'undefined' || typeof document === 'undefined') return this
+      document.querySelector('title')?.remove()
+      document.head.innerHTML = this.head.innerHTML
+      document.body.outerHTML = this.body.outerHTML
+      return this
+   }
 }

package/package.json

@@ -1,12 +1,24 @@
 {
   "name": "als-layout",
-  "version": "7.0.0",
-  "main": "./main/layout.js",
+  "version": "7.1.0",
+  "main": "./src/layout.js",
   "module": "./index.mjs",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./src/layout.js"
+    }
+  },
+  "files": [
+    "index.mjs",
+    "layout.js",
+    "src/layout.js",
+    "readme.md"
+  ],
   "scripts": {
+    "build": "node build.js",
     "test": "node --test --experimental-test-coverage ./tests/**.*",
-    "report": "node --test --experimental-test-coverage --test-reporter=lcov --test-reporter-destination=lcov.info",
-    "docs": "node ./scripts/build-readme.js"
+    "report": "node --test --experimental-test-coverage --test-reporter=lcov --test-reporter-destination=lcov.info"
   },
   "keywords": [
     "html",