deleight - npm Package Compare versions

Comparing version 5.7.2 to 5.8.0

dist/cjs/dom/builder/builder.d.ts

@@ -54,3 +54,3 @@ /**
     parents?: Set<IBuilder>;
-    constructor(tag: T);
+    constructor(tag: T, ...children: IElementChild[]);
     set(attrs: {
@@ -68,3 +68,3 @@ [key: string]: any;
     replaceComponents(...components: IComponent[]): this;
-    render(): string;
+    render(indent?: number): string;
     build(): InstanceType<U>;
@@ -79,2 +79,15 @@ create(): InstanceType<U>;
 }
+export type IBuilderMethods = IMethods<IBuilder>;
+export type IBuilders = {
+    builders: Iterable<IBuilder>;
+    self?: IBuilders;
+} & {
+    [key in keyof IBuilderMethods]: (...args: Parameters<IBuilderMethods[key]>) => ReturnType<IBuilderMethods[key]> extends IBuilder ? IBuilders : ReturnType<IBuilderMethods[key]>[];
+};
+export type ICallable = (...args: any[]) => any;
+export type IMethods<T> = {
+    [key in keyof T]: T[key] extends ICallable ? T[key] : never;
+};
+export declare function builders(...builders: Builder<string, typeof Element>[]): IBuilders;
+export declare const b: typeof builders;
 export declare class HTMLElementBuilder<T extends string & keyof HTMLElementTagNameMap> extends Builder<T, IConstructor<HTMLElementTagNameMap[T]>> {
@@ -106,3 +119,3 @@ create(): HTMLElementTagNameMap[T];
  */
-export declare function html<T extends string & keyof HTMLElementTagNameMap>(tag: T): HTMLElementBuilder<T>;
+export declare function html<T extends string & keyof HTMLElementTagNameMap>(tag: T, ...children: IElementChild[]): HTMLElementBuilder<T>;
 export type IHtml = typeof html & {
@@ -112,2 +125,6 @@ [key in keyof HTMLElementTagNameMap]: HTMLElementBuilder<key>;
 export declare const h: IHtml;
+export type IHtml2 = typeof html & {
+    [key in keyof HTMLElementTagNameMap]: (...children: IElementChild[]) => HTMLElementBuilder<key>;
+};
+export declare const hh: IHtml2;
 export declare class SVGElementBuilder<T extends string & keyof SVGElementTagNameMap> extends Builder<T, IConstructor<SVGElementTagNameMap[T]>> {
@@ -122,3 +139,3 @@ create(): SVGElementTagNameMap[T];
  */
-export declare function svg<T extends string & keyof SVGElementTagNameMap>(tag: T): SVGElementBuilder<T>;
+export declare function svg<T extends string & keyof SVGElementTagNameMap>(tag: T, ...children: IElementChild[]): SVGElementBuilder<T>;
 export type ISvg = typeof svg & {
@@ -128,2 +145,6 @@ [key in keyof SVGElementTagNameMap]: SVGElementBuilder<key>;
 export declare const s: ISvg;
+export type ISvg2 = typeof svg & {
+    [key in keyof SVGElementTagNameMap]: (...children: IElementChild[]) => SVGElementBuilder<key>;
+};
+export declare const ss: ISvg2;
 export declare class MathMLElementBuilder<T extends string & keyof MathMLElementTagNameMap> extends Builder<T, IConstructor<MathMLElementTagNameMap[T]>> {
@@ -138,3 +159,3 @@ create(): MathMLElementTagNameMap[T];
  */
-export declare function math<T extends string & keyof MathMLElementTagNameMap>(tag: T): MathMLElementBuilder<T>;
+export declare function math<T extends string & keyof MathMLElementTagNameMap>(tag: T, ...children: IElementChild[]): MathMLElementBuilder<T>;
 export type IMath = typeof math & {
@@ -144,1 +165,5 @@ [key in keyof MathMLElementTagNameMap]: MathMLElementBuilder<key>;
 export declare const m: IMath;
+export type IMath2 = typeof math & {
+    [key in keyof MathMLElementTagNameMap]: (...children: IElementChild[]) => MathMLElementBuilder<key>;
+};
+export declare const mm: IMath2;

dist/cjs/dom/builder/builder.js

@@ -36,3 +36,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.m = exports.math = exports.MathMLElementBuilder = exports.s = exports.svg = exports.SVGElementBuilder = exports.h = exports.html = exports.HTMLElementBuilder = exports.Builder = void 0;
+exports.mm = exports.m = exports.math = exports.MathMLElementBuilder = exports.ss = exports.s = exports.svg = exports.SVGElementBuilder = exports.hh = exports.h = exports.html = exports.HTMLElementBuilder = exports.b = exports.builders = exports.Builder = void 0;
 /**
@@ -44,3 +44,3 @@ * This will escape all input strings so it is safe by
 class Builder {
-    constructor(tag) {
+    constructor(tag, ...children) {
         this.attrs = {};
@@ -53,2 +53,3 @@ this.nsAttrs = {};
         this.tag = tag;
+        this.append(...children);
     }
@@ -99,11 +100,9 @@ set(attrs) {
     }
-    render() {
+    render(indent = 0) {
         const attrs = Object.entries(this.attrs);
         const nsAttrs = Object.entries(this.nsAttrs);
-        return `
-<${this.tag}${attrs.length ? ` ${attrs.map(([k, v]) => `${k}="${v.replaceAll('"', '&quot;')}"`).join(' ')}` : ``}${nsAttrs.length ? ` ${nsAttrs.map(([ns, attrs]) => attrs.map(([k, v]) => `${ns}:${k}="${v.replaceAll('"', '&quot;')}"`).join(' ')).join(' ')}` : ``}>
-    ${this.children.map(c => c instanceof Builder ? c.render : `${c}`.replaceAll('<', '&lt;').replaceAll('>', '&gt;')).join(`
-    `)}
-</${this.tag}>
-        `;
+        const pad = new Array(indent).fill(' ').join('');
+        return `${pad}<${this.tag}${attrs.length ? ` ${attrs.map(([k, v]) => `${k}="${v.replaceAll('"', '&quot;')}"`).join(' ')}` : ``}${nsAttrs.length ? ` ${nsAttrs.map(([ns, attrs]) => attrs.map(([k, v]) => `${ns}:${k}="${v.replaceAll('"', '&quot;')}"`).join(' ')).join(' ')}` : ``}>
+${this.children.map(c => c instanceof Builder ? c.render(indent + 4) : `${pad}    ${c}`.replaceAll('<', '&lt;').replaceAll('>', '&gt;')).join(`\n${pad}`)}
+${pad}</${this.tag}>`;
     }
@@ -198,2 +197,20 @@ build() {
 exports.Builder = Builder;
+const IBuildersProxy = {
+    get(target, p) {
+        return ((...args) => {
+            const result = [];
+            for (let builder of target.builders)
+                result.push(builder[p](...args));
+            if (result.length && !(result[0] instanceof Builder))
+                return result;
+            else
+                return target.self || (target.self = new Proxy(target, IBuildersProxy));
+        });
+    }
+};
+function builders(...builders) {
+    return new Proxy({ builders }, IBuildersProxy);
+}
+exports.builders = builders;
+exports.b = builders;
 class HTMLElementBuilder extends Builder {
@@ -228,4 +245,4 @@ create() {
  */
-function html(tag) {
-    return new HTMLElementBuilder(tag);
+function html(tag, ...children) {
+    return new HTMLElementBuilder(tag, ...children);
 }
@@ -238,2 +255,7 @@ exports.html = html;
 });
+exports.hh = new Proxy(html, {
+    get(target, p) {
+        return (...children) => html(p, ...children);
+    }
+});
 class SVGElementBuilder extends Builder {
@@ -251,4 +273,4 @@ create() {
  */
-function svg(tag) {
-    return new SVGElementBuilder(tag);
+function svg(tag, ...children) {
+    return new SVGElementBuilder(tag, ...children);
 }
@@ -261,2 +283,7 @@ exports.svg = svg;
 });
+exports.ss = new Proxy(svg, {
+    get(target, p) {
+        return (...children) => svg(p, ...children);
+    }
+});
 class MathMLElementBuilder extends Builder {
@@ -274,4 +301,4 @@ create() {
  */
-function math(tag) {
-    return new MathMLElementBuilder(tag);
+function math(tag, ...children) {
+    return new MathMLElementBuilder(tag, ...children);
 }
@@ -284,1 +311,6 @@ exports.math = math;
 });
+exports.mm = new Proxy(math, {
+    get(target, p) {
+        return (...children) => math(p, ...children);
+    }
+});

dist/esm/dom/builder/builder.d.ts

@@ -54,3 +54,3 @@ /**
     parents?: Set<IBuilder>;
-    constructor(tag: T);
+    constructor(tag: T, ...children: IElementChild[]);
     set(attrs: {
@@ -68,3 +68,3 @@ [key: string]: any;
     replaceComponents(...components: IComponent[]): this;
-    render(): string;
+    render(indent?: number): string;
     build(): InstanceType<U>;
@@ -79,2 +79,15 @@ create(): InstanceType<U>;
 }
+export type IBuilderMethods = IMethods<IBuilder>;
+export type IBuilders = {
+    builders: Iterable<IBuilder>;
+    self?: IBuilders;
+} & {
+    [key in keyof IBuilderMethods]: (...args: Parameters<IBuilderMethods[key]>) => ReturnType<IBuilderMethods[key]> extends IBuilder ? IBuilders : ReturnType<IBuilderMethods[key]>[];
+};
+export type ICallable = (...args: any[]) => any;
+export type IMethods<T> = {
+    [key in keyof T]: T[key] extends ICallable ? T[key] : never;
+};
+export declare function builders(...builders: Builder<string, typeof Element>[]): IBuilders;
+export declare const b: typeof builders;
 export declare class HTMLElementBuilder<T extends string & keyof HTMLElementTagNameMap> extends Builder<T, IConstructor<HTMLElementTagNameMap[T]>> {
@@ -106,3 +119,3 @@ create(): HTMLElementTagNameMap[T];
  */
-export declare function html<T extends string & keyof HTMLElementTagNameMap>(tag: T): HTMLElementBuilder<T>;
+export declare function html<T extends string & keyof HTMLElementTagNameMap>(tag: T, ...children: IElementChild[]): HTMLElementBuilder<T>;
 export type IHtml = typeof html & {
@@ -112,2 +125,6 @@ [key in keyof HTMLElementTagNameMap]: HTMLElementBuilder<key>;
 export declare const h: IHtml;
+export type IHtml2 = typeof html & {
+    [key in keyof HTMLElementTagNameMap]: (...children: IElementChild[]) => HTMLElementBuilder<key>;
+};
+export declare const hh: IHtml2;
 export declare class SVGElementBuilder<T extends string & keyof SVGElementTagNameMap> extends Builder<T, IConstructor<SVGElementTagNameMap[T]>> {
@@ -122,3 +139,3 @@ create(): SVGElementTagNameMap[T];
  */
-export declare function svg<T extends string & keyof SVGElementTagNameMap>(tag: T): SVGElementBuilder<T>;
+export declare function svg<T extends string & keyof SVGElementTagNameMap>(tag: T, ...children: IElementChild[]): SVGElementBuilder<T>;
 export type ISvg = typeof svg & {
@@ -128,2 +145,6 @@ [key in keyof SVGElementTagNameMap]: SVGElementBuilder<key>;
 export declare const s: ISvg;
+export type ISvg2 = typeof svg & {
+    [key in keyof SVGElementTagNameMap]: (...children: IElementChild[]) => SVGElementBuilder<key>;
+};
+export declare const ss: ISvg2;
 export declare class MathMLElementBuilder<T extends string & keyof MathMLElementTagNameMap> extends Builder<T, IConstructor<MathMLElementTagNameMap[T]>> {
@@ -138,3 +159,3 @@ create(): MathMLElementTagNameMap[T];
  */
-export declare function math<T extends string & keyof MathMLElementTagNameMap>(tag: T): MathMLElementBuilder<T>;
+export declare function math<T extends string & keyof MathMLElementTagNameMap>(tag: T, ...children: IElementChild[]): MathMLElementBuilder<T>;
 export type IMath = typeof math & {
@@ -144,2 +165,6 @@ [key in keyof MathMLElementTagNameMap]: MathMLElementBuilder<key>;
 export declare const m: IMath;
+export type IMath2 = typeof math & {
+    [key in keyof MathMLElementTagNameMap]: (...children: IElementChild[]) => MathMLElementBuilder<key>;
+};
+export declare const mm: IMath2;
 //# sourceMappingURL=builder.d.ts.map

dist/esm/dom/builder/builder.js

@@ -40,3 +40,3 @@ /**
 export class Builder {
-    constructor(tag) {
+    constructor(tag, ...children) {
         this.attrs = {};
@@ -49,2 +49,3 @@ this.nsAttrs = {};
         this.tag = tag;
+        this.append(...children);
     }
@@ -95,11 +96,9 @@ set(attrs) {
     }
-    render() {
+    render(indent = 0) {
         const attrs = Object.entries(this.attrs);
         const nsAttrs = Object.entries(this.nsAttrs);
-        return `
-<${this.tag}${attrs.length ? ` ${attrs.map(([k, v]) => `${k}="${v.replaceAll('"', '&quot;')}"`).join(' ')}` : ``}${nsAttrs.length ? ` ${nsAttrs.map(([ns, attrs]) => attrs.map(([k, v]) => `${ns}:${k}="${v.replaceAll('"', '&quot;')}"`).join(' ')).join(' ')}` : ``}>
-    ${this.children.map(c => c instanceof Builder ? c.render : `${c}`.replaceAll('<', '&lt;').replaceAll('>', '&gt;')).join(`
-    `)}
-</${this.tag}>
-        `;
+        const pad = new Array(indent).fill(' ').join('');
+        return `${pad}<${this.tag}${attrs.length ? ` ${attrs.map(([k, v]) => `${k}="${v.replaceAll('"', '&quot;')}"`).join(' ')}` : ``}${nsAttrs.length ? ` ${nsAttrs.map(([ns, attrs]) => attrs.map(([k, v]) => `${ns}:${k}="${v.replaceAll('"', '&quot;')}"`).join(' ')).join(' ')}` : ``}>
+${this.children.map(c => c instanceof Builder ? c.render(indent + 4) : `${pad}    ${c}`.replaceAll('<', '&lt;').replaceAll('>', '&gt;')).join(`\n${pad}`)}
+${pad}</${this.tag}>`;
     }
@@ -193,2 +192,19 @@ build() {
 }
+const IBuildersProxy = {
+    get(target, p) {
+        return ((...args) => {
+            const result = [];
+            for (let builder of target.builders)
+                result.push(builder[p](...args));
+            if (result.length && !(result[0] instanceof Builder))
+                return result;
+            else
+                return target.self || (target.self = new Proxy(target, IBuildersProxy));
+        });
+    }
+};
+export function builders(...builders) {
+    return new Proxy({ builders }, IBuildersProxy);
+}
+export const b = builders;
 export class HTMLElementBuilder extends Builder {
@@ -222,4 +238,4 @@ create() {
  */
-export function html(tag) {
-    return new HTMLElementBuilder(tag);
+export function html(tag, ...children) {
+    return new HTMLElementBuilder(tag, ...children);
 }
@@ -231,2 +247,7 @@ export const h = new Proxy(html, {
 });
+export const hh = new Proxy(html, {
+    get(target, p) {
+        return (...children) => html(p, ...children);
+    }
+});
 export class SVGElementBuilder extends Builder {
@@ -243,4 +264,4 @@ create() {
  */
-export function svg(tag) {
-    return new SVGElementBuilder(tag);
+export function svg(tag, ...children) {
+    return new SVGElementBuilder(tag, ...children);
 }
@@ -252,2 +273,7 @@ export const s = new Proxy(svg, {
 });
+export const ss = new Proxy(svg, {
+    get(target, p) {
+        return (...children) => svg(p, ...children);
+    }
+});
 export class MathMLElementBuilder extends Builder {
@@ -264,4 +290,4 @@ create() {
  */
-export function math(tag) {
-    return new MathMLElementBuilder(tag);
+export function math(tag, ...children) {
+    return new MathMLElementBuilder(tag, ...children);
 }
@@ -273,1 +299,6 @@ export const m = new Proxy(math, {
 });
+export const mm = new Proxy(math, {
+    get(target, p) {
+        return (...children) => math(p, ...children);
+    }
+});

package.json

 {
   "name": "deleight",
-  "version": "5.7.2",
+  "version": "5.8.0",
   "description": "A library with 9 modules for writing more expressive web applications with traditional HTML, CSS and JavaScript.",
@@ -5,0 +5,0 @@ "type": "module",

readme.md

@@ -1,2 +0,2 @@
-# Deleight (v5.7.2)
+# Deleight (v5.8.0)
 
@@ -7,14 +7,10 @@ ![Logo](https://github.com/mksunny1/deleight/blob/main/docs/assets/logos/logo.png?raw=true)
 
-## New in v5.7
-
-Added `deleight/dom/builder` submodule which provides a better DX, more safety and more versatility than both `deleight/dom/element` and `deleight/dom/html` for building elements or rendering their text representations.
-
 ## Usage
 
 ```js
-import { addTo, attr, selectMembers } from 'deleight/dom/components'
+import { addTo, attr } from 'deleight/dom/components'
 import { apply } from 'deleight/dom/apply'
 import { sets } from 'deleight/object/shared'
-import { range, map, chain } from 'deleight/generators';
 
+/* Add behavior to elements created on the server. */
 document.body.innerHTML = `
@@ -27,5 +23,3 @@ <div>I am a div</div>
 `;
-
-const obj = { };    // a reactive object
-
+const obj = {};
 apply({ 
@@ -36,13 +30,20 @@ section: { button: addTo(obj, 'a', attr) },
 });
-selectMembers()
-
 sets(obj, 'yellow');
-// document.querySelector('button').getAttribute('a');   // yellow
-// document.body.aside.textContent;   // yellow
-// document.body.lastElementChild.lastElementChild.style.color;  // yellow
+sets(obj, 'green');
 
-sets(obj, 'green');
-// document.querySelector('button').getAttribute('a');   // green
-// document.body.aside.textContent;   // green
-// document.body.lastElementChild.lastElementChild.style.color;  // green
+// Build the elements directly:
+import { b, hh } from "deleight/dom/builder.js";
+b(
+    hh.div('I am a div'),
+    hh.p('I am a paragraph'),
+    hh.section('I am a section ', hh.button('Btn1').apply(addTo(obj, 'a', attr))),
+    hh.aside('I am a section ', hh.button('Btn1').apply(addTo(obj, 'textContent')))
+      .set({'m-ember':'aside'}),
+    hh.article('I am an article ', hh.button('Btn2').apply(addTo(obj, 'color', 'style')))
+).appendTo(document.body);
+
+// dom/builder is also very effective for server renedeing where you just call 
+// `render` instead of `build`...
+
+*/
 ```
@@ -49,0 +50,0 @@

No alert changes

Improved metrics

Total package byte prevSize

595068

1.04%

Lines of code

16746

0.68%

Number of lines in readme file

213

0.47%

No dependency changes