als-layout 6.1.0 → 7.0.1

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "als-layout",
-  "version": "6.1.0",
-  "main": "index.js",
+  "version": "7.0.1",
+  "main": "./src/layout.js",
+  "module": "./index.mjs",
   "scripts": {
     "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"
+    "docs": "node ./scripts/build-readme.js"
   },
-  "keywords": [],
+  "keywords": [
+    "html",
+    "layout",
+    "document",
+    "meta",
+    "seo",
+    "als-document"
+  ],
   "author": "Alex Sorkin",
   "license": "MIT",
-  "description": "Html layout constructor",
+  "description": "HTML layout constructor with dynamic meta, styles, and scripts",
   "dependencies": {
-    "als-document": "^1.4.0",
-    "uglify-js": "^3.19.2",
-    "uglifycss": "^0.0.29"
+    "als-document": "^1.4.3"
   }
 }

package/readme.md

@@ -7,254 +7,157 @@ The `als-layout` library is versatile, suitable for:
 - Creating templating systems where multiple page layouts share similar structures but differ in content or styling.
 - Developing web applications that need to dynamically adjust their UI based on user interactions or data changes.
 
-## Installation and Adding
-To use the `als-layout` library in your project, you can install it via npm and then include it in your JavaScript files:
+---
+
+## Installation and Import
+
+Install via npm:
 
 ```bash
 npm i als-layout
 ```
 
+### Node (CommonJS)
 ```js
 const Layout = require('als-layout')
 ```
 
-## Change Log for V6
+### ESM (Module)
+```js
+import Layout from 'als-layout'
+```
+
+### Browser (with bundle)
+```html
+<script src="layout.js"></script>
+<script>
+   const layout = new Layout()
+</script>
+```
+
+---
+
+## Change Log for V7
 
-The code refactored.
+**⚠ Breaking changes: not backward compatible.**
 
 ### Removed
-  * no deepclone for options, using { ...Layout.options, ...options } instead
-  * no onload method
-### Added
-  * status
-  * end(res)
+- `uglify js and css`
+- `status` method
+- `end` method
+- `minified` attribute
+- `propsToClone`
+
+### Changed
+- All code is merged into a single file
+- Added **ESM module build** (`index.mjs`)
+- Added **browser bundle** (`layout.js`) that includes `als-document` and exposes a global `Layout`
+
+---
 
 ## Basic Usage
 
 ### Initialization
-To start using `als-layout`, you first need to create a new instance of `Layout`. This instance will serve as the foundation for building and modifying your web page.
-
 ```js
-const Layout = require('als-layout');
 const layout = new Layout();
 ```
 
-### Adding Different Elements
-Once you have your `Layout` instance, you can easily add or modify various elements of your web page. Here are some examples of how you can use the library to customize your layout:
-
+### Adding Elements
 ```js
 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
-   .url('/some', 'http://site.com') // adding/updating meta[og:url] and link[rel="canonical"]
-   .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') // adding link[rel=stylesheet] if such href not exists
-   .script({src:'/app.js'}, '', true) // 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)
+   .viewport() // default: width=device-width, initial-scale=1.0
+   .title('Test title') // sets <title> and meta[og:title]
+   .favicon('/favicon.png') // adds/updates favicon link
+   .keywords(['some', 'keyword']) // updates meta[name=keywords]
+   .image('/main-image.png') // sets og:image, twitter:image, twitter:card
+   .description('Cool site') // sets meta description tags
+   .url('/some', 'http://site.com') // sets canonical + og:url
+   .style('body {margin:0; background-color:whitesmoke;}') // appends CSS to style tag
+   .link('/styles.css') // adds stylesheet link if not already present
+   .script({src:'/app.js'}) // external script
+   .script({}, 'console.log("hello world")', false) // inline script in body
+
+// Accessors
+layout.body // getter for <body>
+layout.head // getter for <head>
+layout.html // getter for <html>
 
 // Outputs
-layout.rawHtml // raw HTML of the document
-layout.clone // creates a new layout object clone for current object
+layout.rawHtml // raw HTML string
+layout.clone   // cloned Layout instance
 ```
 
+---
 
-## Cloning Functionality
-
-### What is Cloning and Why is it Necessary?
-Cloning in the `als-layout` library refers to creating a complete, independent copy of the existing `Layout` instance. This functionality is crucial when you need to generate multiple pages or versions of a page from a single base layout without affecting the original setup.
+## Cloning
 
-### How to Use Cloning
-To clone a `Layout` instance, simply use the `clone` method. This method creates a new `Layout` instance with the same properties and settings as the original, allowing for independent modifications without interference.
+### Why Clone?
+Cloning creates a complete, independent copy of a `Layout` instance. Useful when generating multiple pages from a base template.
 
+### Example
 ```js
 const newLayout = layout.clone;
+newLayout.title('Cloned page');
 ```
 
-### Benefits of Cloning
-- **Efficiency:** Cloning is highly efficient, especially for creating pages with similar structures but different content or styles. It avoids the overhead of reinitializing and reconfiguring a new `Layout` instance from scratch.
-- **Speed:** Cloning is fast, typically taking less than 20ms even for large pages. This makes it ideal for high-performance web applications that need to dynamically generate content.
-- **Isolation:** Changes made to a cloned `Layout` do not affect the original, ensuring that each instance can be modified independently based on specific requirements.
-
-Cloning is particularly useful in scenarios where templates or base layouts are used repeatedly with slight variations, providing a robust and scalable solution for web page generation.
-
+- **Efficiency** – avoids rebuilding from scratch
+- **Isolation** – modifications to clones don’t affect the original
+- **Performance** – fast even for larger layouts
 
-### propsToClone
-
-You can add properties to add when cloning the object, by adding name of properties to `Layout.propsToClone` which is array.
-
-Example:
-
-```js
-Layout.propsToClone.push('projectName')
+---
 
-const layout = new Layout()
-layout.projectName = 'Cool project'
-
-const cloned = layout.clone
-console.log(cloned.projectName) // 'Cool project'
-```
 ## Advanced Usage
 
-The `als-layout` library allows for sophisticated manipulation of web page layouts, providing robust tools for creating dynamic and complex web pages. Below is an advanced example demonstrating various capabilities of the library:
-
 ```js
-const Layout = require('als-layout')
-
-// Starting with a basic HTML template and specifying the host for URL methods
 const raw = /*html*/`<html></html>`
 const host = 'http://example.com';
-const options = {
-   logger,
-   host, 
-   minified=false
-}
-const layout = new Layout(raw, options).lang('fr')
-console.log(layout.rawHtml)
-// <!DOCTYPE html><html lang="fr"><head></p></head><body></body></html>
-
-// Cloning the initial layout to create a specialized page
-const homePage = layout.clone
-homeAutoReload = layout.clone
-homePage.title('Home page')
-homePage.body.innerHTML = /*html*/`<h1>Home page</h1>`
-console.log(homePage.rawHtml)
-// <!DOCTYPE html><html lang="fr"><head><title>Home page</title><meta property="og:title" content="Home page"></head><body><h1>Home page</h1></body></html>
-
-// Adding script that reloads the page every minute
-homeAutoReload.script({}, 'setTimeout(function() { window.location.reload(); }, 60000);', false)
-console.log(homeAutoReload.rawHtml)
-// <!DOCTYPE html><html lang="fr"><head><title>Automatic Reload Page</title><meta property="og:title" content="Automatic Reload Page"></head><body><script>setTimeout(function() { window.location.reload(); }, 60000);</script></body></html>
-
-// Demonstrating dynamic stylesheet linkage with versioning
-homePage.link('/css/main.css')
-console.log(homePage.rawHtml)
-// Includes link to the stylesheet with version parameter to ensure fresh cache
-```
-
-In this example:
-
-- We start with a basic HTML template and use the `lang` method to set the language.
-- We use the `clone` method to create two versions of the base layout: one for the home page and another that automatically reloads every minute.
-- We manipulate the `body` of the `homePage` to include custom HTML.
-- We add a script to `homeAutoReload` that sets up an automatic page reload, showcasing how to insert JavaScript dynamically.
-- We dynamically add a versioned link to a stylesheet in the `homePage`, demonstrating control over caching and resource management.
 
-This advanced example illustrates how `als-layout` can be used to handle complex scenarios and requirements in web development, enhancing the flexibility and power at your disposal.
+const layout = new Layout(raw, host).lang('fr');
+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 = `<h1>Home page</h1>`;
+console.log(homePage.rawHtml);
 
-## Response with status
-
-In version 6, added two methods:
-1. `status(statusCode)` - adds the statusCode to `__status` property
-2. `end(res)` 
-   1. writes head with `__status, { 'Content-Type': 'text/html' }` 
-   2. runs `res.end(this.rawHtml)`
+const autoReload = layout.clone;
+autoReload.script({}, 'setTimeout(() => window.location.reload(), 60000);', false);
+```
 
+---
 
-The main idea, is to add quick way to response with layout. 
 ## API
 
 ### Constructor
-
-#### `new Layout(html: string, options: object)`
-
-Creates a new `Layout` instance.
-
-- **html**: The initial HTML document string.
-- **options**: Configuration options for the layout instance.
-  - **minified**: Boolean (default: `false`). Determines if inline CSS and JavaScript should be minified.
-  - **logger**: Function (default: `console`). Function for errors in minifiying and url method.
-  - **host**:  String (defult:`undefined`). String for url method. 
-
+```js
+new Layout(html?: string, host?: string)
+```
+- **html**: optional HTML string
+- **host**: base host for resolving relative URLs
 
 ### Properties
-
-#### `layout.rawHtml`
-
-Returns the inner HTML of the document.
-
-#### `layout.clone`
-
-Creates a clone of the current layout instance, preserving `options`.
-
-
-#### `__status`
-
-Stores the statusCode for `end` method.
+- `layout.rawHtml` – returns the current document as HTML string  
+- `layout.clone` – returns a cloned instance
 
 ### Methods
+- `lang(lang: string)` – sets `<html lang>`  
+- `title(title: string)` – sets document `<title>` and Open Graph title  
+- `description(description: string)` – sets description meta tags  
+- `favicon(href: string)` – sets or updates favicon  
+- `meta(props: object)` – sets or updates a `<meta>` tag  
+- `keywords(keywords: string[])` – sets or appends to `meta[name=keywords]`  
+- `viewport(viewport: string = 'width=device-width, initial-scale=1.0')` – sets viewport meta  
+- `image(image: string)` – sets OG and Twitter image meta tags  
+- `style(styles: string)` – appends CSS styles into `<style>`  
+- `url(url: string, host?: string)` – sets canonical + og:url  
+- `script(attrs: object = {}, innerHTML: string = '', head: boolean = true)` – adds `<script>` tag  
+- `link(href: string, attributes: object = { rel: "stylesheet", type: "text/css" })` – adds stylesheet link  
+
+---
+
+## Notes
+- Version 7 removed **status**, **end**, **minified**, and **propsToClone**.  
+- Use `clone` for creating independent layouts instead of extending clone properties.  
+- Use `layout.js` in the browser for quick setup (exposes global `Layout`).  
 
-#### `lang(lang: string): this`
-
-Sets the `lang` attribute on the `<html>` element.
-
-#### `title(title: string): this`
-
-Sets the document title and creates an Open Graph title meta tag.
-
-#### `description(description: string): this`
-
-Adds description meta tags for SEO and social platforms.
-
-#### `favicon(href: string): this`
-
-Sets or updates the favicon URL.
-
-#### `meta(props: object): this`
-
-Adds or updates a `<meta>` tag with specified attributes.
-
-- **props**: An object where each key-value pair corresponds to a meta attribute.
-
-#### `keywords(keywords: array): this`
-
-Sets or appends keywords in the `content` attribute of a `<meta name="keywords">` tag.
-
-#### `viewport(viewport: string): this`
-
-Sets the viewport meta tag. Default: `width=device-width, initial-scale=1.0`.
-
-#### `image(image: string): this`
-
-Sets meta tags for Open Graph and Twitter cards for an image.
-
-#### `style(styles: string, minified: boolean = this.options.minified): this`
-
-Adds inline CSS to the document. If `minified` is true, the CSS is minified.
-
-- **styles**: CSS string.
-- **minified**: Boolean (optional).
-
-#### `url(url: string, host: string = this.URL): this`
-
-Sets the canonical URL and Open Graph URL meta tags.
-
-#### `script(attrs: object = {}, innerHTML: string = '', head: boolean = true, minified: boolean = this.options.minified): this`
-
-Adds a `<script>` tag to the document.
-
-- **attrs**: Attributes for the `<script>` tag.
-- **innerHTML**: Inline JavaScript (optional).
-- **head**: Boolean (default: `true`). If `false`, the script is added to `<body>`.
-- **minified**: Boolean. If true, inline JavaScript is minified.
-
-#### `link(href: string, attributes: object = { rel: "stylesheet", type: "text/css" }): this`
-
-Adds a `<link>` tag for external stylesheets.
-
-#### `status(statusCode:number): this`
-
-Adds the statusCode to `__status` property
-
-#### `end(res):undefined`
-
-Response with res(rawHtml)

package/src/layout.js

@@ -0,0 +1,85 @@
+const { Document, SingleNode, Node } = require('als-document');
+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
+   }
+}
+
+module.exports = Layout

package/tests/constructor.test.js

@@ -1,6 +1,6 @@
 const assert = require('assert');
 const { describe, it } = require('node:test')
-const Layout = require('../index');
+const Layout = require('../src/layout.js');
 
 describe('Layout Initialization', () => {
     it('should create an instance of Layout', () => {
@@ -22,7 +22,7 @@ describe('Layout Initialization', () => {
 
     it('should allow setting a custom host', () => {
         const customHost = 'http://localhost';
-        const layout = new Layout(undefined,{host:customHost});
+        const layout = new Layout(undefined,customHost);
         assert.strictEqual(layout.URL, customHost, `host is not set to ${customHost}`);
     });
 });

package/tests/description.test.js

@@ -1,6 +1,6 @@
 const assert = require('assert');
 const { describe, it,beforeEach } = require('node:test')
-const Layout = require('../index');
+const Layout = require('../src/layout.js');
 
 describe('description and title', () => {
    let layout;

package/tests/favicon.test.js

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

package/tests/image.test.js

@@ -1,6 +1,6 @@
 const assert = require('assert');
 const { describe, it,beforeEach } = require('node:test')
-const Layout = require('../index');
+const Layout = require('../src/layout.js');
 
 describe('Image tests', () => {
    let layout;

package/tests/integrative.test.js

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

package/tests/keywords.test.js

@@ -1,6 +1,6 @@
 const assert = require('assert');
 const { describe, it, beforeEach } = require('node:test')
-const Layout = require('../index');
+const Layout = require('../src/layout.js');
 const { SingleNode } = require('als-document')
 
 describe('Keywords tests', () => {

package/tests/link.test.js

@@ -1,7 +1,6 @@
 const assert = require('assert');
 const { describe, it, beforeEach } = require('node:test')
-const Layout = require('../index');
-
+const Layout = require('../src/layout.js');
 
 describe('Link', () => {
    let layout;
@@ -13,12 +12,9 @@ describe('Link', () => {
       assert.strictEqual(layout.root.$('link[rel="stylesheet"]').getAttribute('href'), href, 'Link href should match the provided href');
    });
 
-   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 throw error for invalid href', () => {
+      assert.throws(() => layout.link(''));
+      assert.throws(() => layout.link(null));
    });
 
    it('should add link correctly', () => {
@@ -34,10 +30,4 @@ describe('Link', () => {
       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');
-   });
-
 })

package/tests/script.test.js

@@ -1,7 +1,6 @@
 const assert = require('assert');
 const { describe, it, beforeEach } = require('node:test')
-const Layout = require('../index');
-
+const Layout = require('../src/layout.js');
 describe('Scripts', () => {
    let layout;
 

package/tests/style.test.js

@@ -1,7 +1,7 @@
 const assert = require('assert');
 const { describe, it, beforeEach } = require('node:test')
-const Layout = require('../index');
-const uglifycss = require('uglifycss');
+const Layout = require('../src/layout.js');
+
 describe('Styles', () => {
    let layout;
    beforeEach(() => layout = new Layout());
@@ -31,11 +31,4 @@ describe('Styles', () => {
       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

@@ -1,14 +1,13 @@
 const assert = require('assert');
 const { describe, it, beforeEach } = require('node:test')
-const Layout = require('../index');
+const Layout = require('../src/layout.js');
 
 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 throw error if canonical URL if URL is invalid', () => {
+      assert.throws(() => layout.url('not-a-url', 'aa'));
    });
    
    it('should add url correctly', () => {
@@ -40,11 +39,4 @@ describe('Url', () => {
       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

@@ -1,6 +1,6 @@
 const assert = require('assert');
 const { describe, it, beforeEach } = require('node:test')
-const Layout = require('../index');
+const Layout = require('../src/layout.js');
 
 describe('layout.viewport',() => {
    let layout;