jsxte - npm Package Compare versions

Comparing version 3.1.10-canary-5d95b153702c285c28febd4f5a03090a21cd6ef5.0 to 3.1.10-canary-8b30b441724204f88dd56707d088ba9b7c12823e.0

dist/legacy/component-api/component-api.js

@@ -6,2 +6,3 @@ "use strict";
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -20,2 +21,6 @@ for (var name in all)
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 
@@ -111,12 +116,14 @@ // src/component-api/component-api.ts
 var ComponentApi = class _ComponentApi {
-  constructor(attributeMap, accessor) {
-    this.attributeMap = attributeMap;
+  constructor(options, accessor) {
+    this.options = options;
+    /** Access to the current context data. */
+    __publicField(this, "ctx");
     this.ctx = accessor ?? new ContextAccessor();
   }
   static create(options) {
-    return new _ComponentApi(options?.attributeMap);
+    return new _ComponentApi(options);
   }
   static clone(original) {
     return new _ComponentApi(
-      original.attributeMap,
+      original.options,
       ContextAccessor.clone(original.ctx)
@@ -131,5 +138,3 @@ );
   render(component) {
-    return (0, import_jsx_elem_to_html.jsxElemToHtmlSync)(component, this, {
-      attributeMap: this.attributeMap
-    });
+    return (0, import_jsx_elem_to_html.jsxElemToHtmlSync)(component, this, this.options);
   }
@@ -139,11 +144,7 @@ async renderAsync(component) {
     return Promise.resolve(component).then(
-      (c) => (0, import_jsx_elem_to_html.jsxElemToHtmlAsync)(c, thisCopy, {
-        attributeMap: thisCopy.attributeMap
-      })
+      (c) => (0, import_jsx_elem_to_html.jsxElemToHtmlAsync)(c, thisCopy, this.options)
     );
   }
   renderToJson(component) {
-    return (0, import_jsx_elem_to_json.jsxElemToJsonSync)(component, this, {
-      attributeMap: this.attributeMap
-    });
+    return (0, import_jsx_elem_to_json.jsxElemToJsonSync)(component, this, this.options);
   }
@@ -153,5 +154,3 @@ async renderToJsonAsync(component) {
     return Promise.resolve(component).then(
-      (c) => (0, import_jsx_elem_to_json.jsxElemToJsonAsync)(c, thisCopy, {
-        attributeMap: thisCopy.attributeMap
-      })
+      (c) => (0, import_jsx_elem_to_json.jsxElemToJsonAsync)(c, thisCopy, this.options)
     );
@@ -162,13 +161,13 @@ }
   constructor() {
-    this.id = Symbol();
-    this.Provider = (props, componentApi) => {
+    __publicField(this, "id", Symbol());
+    __publicField(this, "Provider", (props, componentApi) => {
       componentApi.ctx.set(this, props.value);
       return (0, import_jsx_runtime.jsx)("", { children: props.children });
-    };
-    this.Consumer = (props, componentApi) => {
+    });
+    __publicField(this, "Consumer", (props, componentApi) => {
       const value = componentApi.ctx.get(this);
       return props.render(value);
-    };
+    });
   }
 };
 var defineContext = () => new ContextDefinition();

dist/legacy/error-boundary/error-boundary.js

@@ -6,2 +6,3 @@ "use strict";
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -20,2 +21,6 @@ for (var name in all)
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 
@@ -43,2 +48,2 @@ // src/error-boundary/error-boundary.ts
 };
-ErrorBoundary._baseName = "ErrorBoundary";
+__publicField(ErrorBoundary, "_baseName", "ErrorBoundary");

dist/legacy/html-renderer/jsx-elem-to-html.js

@@ -31,17 +31,4 @@ "use strict";
 var import_join = require("../utilities/join.js");
+var import_self_closing_tag_list = require("../utilities/self-closing-tag-list.js");
 var import_attribute_to_html_tag_string = require("./attribute-to-html-tag-string.js");
-var import_self_closing_tag_list = require("../utilities/self-closing-tag-list.js");
-function leftPad(str, padLength) {
-  const pad = " ".repeat(padLength);
-  let result = pad;
-  for (let i = 0; i < str.length; i++) {
-    const char = str[i];
-    if (char === "\n" && i + 1 < str.length) {
-      result += char + pad;
-    } else {
-      result += char;
-    }
-  }
-  return result;
-}
 var BaseHtmlGenerator = class {
@@ -51,45 +38,168 @@ constructor(options) {
   }
-  prepareContent(content) {
-    if (content.length === 0)
-      return void 0;
-    if (this.options?.compact === true) {
-      return (0, import_join.join)(content);
-    }
-    return leftPad((0, import_join.join)(content, "\n"), 2);
-  }
   generateTag(tag, attributes, content) {
     if (attributes) {
       attributes = " " + attributes;
+    } else {
+      attributes = "";
     }
-    if (!content) {
+    if (!content || content.length === 0) {
       if (import_self_closing_tag_list.SELF_CLOSING_TAG_LIST.includes(tag)) {
-        return `<${tag}${attributes} />`;
+        return [{
+          type: "tag-inline",
+          tag,
+          content: `<${tag}${attributes} />`
+        }];
       } else {
-        return `<${tag}${attributes}></${tag}>`;
+        return [{
+          type: "tag-inline",
+          tag,
+          content: `<${tag}${attributes}></${tag}>`
+        }];
       }
     }
     if (this.options?.compact === true) {
-      return `<${tag}${attributes}>${content}</${tag}>`;
+      return [
+        {
+          type: "tag-open",
+          tag,
+          content: `<${tag}${attributes}>`
+        },
+        ...content,
+        {
+          type: "tag-close",
+          tag,
+          content: `</${tag}>`
+        }
+      ];
     }
     if (tag === "pre") {
-      return `<${tag}${attributes}>${content}</${tag}>`;
+      return [
+        {
+          type: "tag-open",
+          tag,
+          content: `<${tag}${attributes}>`
+        },
+        ...content,
+        {
+          type: "tag-close",
+          tag,
+          content: `</${tag}>`
+        }
+      ];
     }
-    return `<${tag}${attributes}>
-${content}
-</${tag}>`;
+    return [
+      {
+        type: "tag-open",
+        tag,
+        content: `<${tag}${attributes}>`
+      },
+      ...content,
+      {
+        type: "tag-close",
+        tag,
+        content: `</${tag}>`
+      }
+    ];
   }
+  flattenChildren(children) {
+    const result = [];
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child.length === 1 && child[0].type === "text") {
+        const last = result.at(-1);
+        if (last?.type === "text") {
+          last.content += child[0].content;
+          continue;
+        }
+      }
+      const lasIdx = result.length;
+      for (let j = 0; j < child.length; j++) {
+        result[lasIdx + j] = child[j];
+      }
+    }
+    return result;
+  }
 };
 var HtmlGenerator = class extends BaseHtmlGenerator {
   createTextNode(text) {
-    return String(text);
+    return [{ type: "text", content: String(text) }];
   }
   createElement(type, attributes, children) {
     const attributesString = (0, import_attribute_to_html_tag_string.mapAttributesToHtmlTagString)(attributes);
-    const content = this.prepareContent(children);
+    const content = this.flattenChildren(children);
     return this.generateTag(type, attributesString, content);
   }
   createFragment(children) {
-    return this.prepareContent(children) ?? "";
+    return this.flattenChildren(children);
   }
 };
+var leftPad = (str, pad) => {
+  if (!str.includes("\n")) {
+    return pad + str;
+  } else {
+    const lines = str.split("\n");
+    for (let i = 0; i < lines.length; i++) {
+      lines[i] = pad + lines[i];
+    }
+    return (0, import_join.join)(lines);
+  }
+};
+var concatHtmlLines = (lines, options) => {
+  let result = "";
+  if (options?.compact === true) {
+    let inPre2 = 0;
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      if (inPre2 > 0) {
+        if (line.tag === "pre" && line.type === "tag-close") {
+          inPre2 -= 1;
+        }
+        result += line.content;
+      } else {
+        if (line.tag === "pre" && line.type === "tag-open") {
+          inPre2 += 1;
+        }
+        let content = line.content.trim();
+        if (line.type === "text") {
+          content = content.replaceAll("\n", " ");
+        }
+        result += content;
+      }
+    }
+    return result;
+  }
+  const indentLength = options?.indent ?? 2;
+  const singleIndent = " ".repeat(indentLength);
+  let currentIndent = "";
+  let inPre = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.type === "tag-close") {
+      currentIndent = currentIndent.substring(indentLength);
+    }
+    if (inPre > 0) {
+      if (line.tag === "pre" && line.type === "tag-close") {
+        inPre -= 1;
+      }
+      const isLast = lines[i + 1]?.type === "tag-close" && lines[i + 1]?.tag === "pre";
+      if (isLast) {
+        result += line.content;
+      } else {
+        result += line.content + "\n";
+      }
+    } else {
+      const content = line.content.trim();
+      if (line.tag === "pre" && line.type === "tag-open") {
+        inPre += 1;
+        result += currentIndent + content;
+      } else {
+        result += leftPad(content, currentIndent) + "\n";
+      }
+    }
+    if (line.type === "tag-open") {
+      currentIndent += singleIndent;
+    }
+  }
+  return result;
+};
 var jsxElemToHtmlSync = (element, componentApi, options) => {
@@ -101,3 +211,4 @@ const renderer = new import_renderer.JsxteRenderer(
   );
-  return renderer.render(element);
+  const lines = renderer.render(element);
+  return concatHtmlLines(lines, options);
 };
@@ -108,3 +219,3 @@ var AsyncHtmlGenerator = class extends BaseHtmlGenerator {
       const attributesString = (0, import_attribute_to_html_tag_string.mapAttributesToHtmlTagString)(attributes);
-      const content = this.prepareContent(children2);
+      const content = this.flattenChildren(children2);
       return this.generateTag(type, attributesString, content);
@@ -114,7 +225,7 @@ });
   createTextNode(text) {
-    return String(text);
+    return [{ type: "text", content: String(text) }];
   }
   createFragment(children) {
     return Promise.resolve(children).then((c) => Promise.all(c)).then((children2) => {
-      return this.prepareContent(children2) ?? "";
+      return this.flattenChildren(children2);
     });
@@ -129,3 +240,4 @@ }
   );
-  return renderer.render(element);
+  const lines = renderer.render(element);
+  return Promise.resolve(lines).then((lines2) => concatHtmlLines(lines2, options));
 };

dist/legacy/index.js

@@ -24,2 +24,3 @@ "use strict";
 __export(src_exports, {
+  DomRenderer: () => import_dom_renderer.DomRenderer,
   ErrorBoundary: () => import_error_boundary.ErrorBoundary,
@@ -40,9 +41,10 @@ JsxteRenderError: () => import_jsxte_render_error.JsxteRenderError,
 __reExport(src_exports, require("./jsx/jsx.types.js"), module.exports);
+var import_component_api = require("./component-api/component-api.js");
+var import_dom_renderer = require("./dom-renderer/dom-renderer.js");
 var import_error_boundary = require("./error-boundary/error-boundary.js");
-var import_component_api = require("./component-api/component-api.js");
 var import_render_to_html = require("./html-renderer/render-to-html.js");
 var import_render_to_json = require("./json-renderer/render-to-json.js");
-var import_memo = require("./utilities/memo.js");
 var import_jsx_runtime = require("./jsx/jsx-runtime.js");
 var import_jsxte_render_error = require("./jsxte-render-error.js");
 var import_renderer = require("./renderer/renderer.js");
+var import_memo = require("./utilities/memo.js");

dist/legacy/jsx-runtime.js

@@ -20,3 +20,3 @@ "use strict";
 module.exports = __toCommonJS(jsx_runtime_exports);
+__reExport(jsx_runtime_exports, require("./jsx/jsx-runtime.js"), module.exports);
 __reExport(jsx_runtime_exports, require("./jsx/jsx.types.js"), module.exports);
-__reExport(jsx_runtime_exports, require("./jsx/jsx-runtime.js"), module.exports);

dist/legacy/jsxte-render-error.js

@@ -6,2 +6,3 @@ "use strict";
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -20,2 +21,6 @@ for (var name in all)
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 
@@ -38,4 +43,4 @@ // src/jsxte-render-error.ts
     super(message, { cause: causedBy });
-    this.baseMessage = "";
-    this.parentTags = [];
+    __publicField(this, "baseMessage", "");
+    __publicField(this, "parentTags", []);
     this.name = "JsxteRenderError";
@@ -42,0 +47,0 @@ this.baseMessage = message;

dist/legacy/renderer/renderer.js

@@ -6,2 +6,3 @@ "use strict";
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -20,2 +21,6 @@ for (var name in all)
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 
@@ -40,2 +45,5 @@ // src/renderer/renderer.ts
 }
+function isPromiseLike(obj) {
+  return obj instanceof Promise || typeof obj === "object" && obj !== null && typeof obj.then === "function" && typeof obj.catch === "function";
+}
 function asyncError() {
@@ -49,2 +57,9 @@ throw new import_jsxte_render_error.JsxteRenderError(
     this.options = options;
+    __publicField(this, "stringTagHandler");
+    __publicField(this, "functionTagHandler");
+    __publicField(this, "classTagHandler");
+    __publicField(this, "fragmentHandler");
+    __publicField(this, "textHandler");
+    __publicField(this, "primitiveHandler");
+    __publicField(this, "handleError");
   }
@@ -111,3 +126,3 @@ matchSyncElem(element, context) {
         const result = func.apply(null, args);
-        if (result instanceof Promise) {
+        if (isPromiseLike(result)) {
           return result.catch((err) => {
@@ -152,3 +167,3 @@ return this.handleError(err, args[2], args[1]);
   match(element, context) {
-    if (element instanceof Promise) {
+    if (isPromiseLike(element)) {
       if (this.options.allowAsync === false) {
@@ -176,3 +191,3 @@ asyncError();
       );
-      if (r instanceof Promise) {
+      if (isPromiseLike(r)) {
         if (this.options.allowAsync === false) {
@@ -201,6 +216,7 @@ asyncError();
 var JsxteRenderer = class {
-  constructor(generator, options = { allowAsync: false }, rootComponentApi = import_component_api.ComponentApi.create()) {
+  constructor(generator, options = { allowAsync: false }, rootComponentApi = import_component_api.ComponentApi.create(options)) {
     this.generator = generator;
     this.options = options;
     this.rootComponentApi = rootComponentApi;
+    __publicField(this, "matcher");
     this.matcher = new ElementMatcher(options);
@@ -322,3 +338,3 @@ const renderer = this;
     }
-    if (result instanceof Promise) {
+    if (isPromiseLike(result)) {
       return result.then((result2) => {
@@ -325,0 +341,0 @@ if (result2 === NIL) {

dist/legacy/utilities/cache.js

@@ -6,2 +6,3 @@ "use strict";
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -20,2 +21,6 @@ for (var name in all)
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 
@@ -32,3 +37,4 @@ // src/utilities/cache.ts
     this.maxAge = maxAge;
-    this.createdAt = Date.now();
+    __publicField(this, "createdAt", Date.now());
+    __publicField(this, "props");
     this.props = new Map(Object.entries(props));
@@ -55,5 +61,5 @@ }
     this.maxEntries = maxEntries;
-    this.lastInvalidate = Date.now();
-    this.invalidationInterval = 5 * 60 * 1e3;
-    this.entries = [];
+    __publicField(this, "lastInvalidate", Date.now());
+    __publicField(this, "invalidationInterval", 5 * 60 * 1e3);
+    __publicField(this, "entries", []);
     if (maxEntries < 1) {
@@ -81,4 +87,5 @@ throw new Error("Cache maxEntries must be greater than 0");
     );
-    if (cacheEntry && !cacheEntry.isExpired(Date.now()))
+    if (cacheEntry && !cacheEntry.isExpired(Date.now())) {
       return cacheEntry.value;
+    }
     return void 0;
@@ -85,0 +92,0 @@ }

dist/legacy/utilities/memo.js

@@ -26,9 +26,4 @@ "use strict";
 module.exports = __toCommonJS(memo_exports);
-var import_render_to_html = require("../html-renderer/render-to-html.js");
 var import_jsx_runtime = require("../jsx-runtime.js");
 var import_cache = require("./cache.js");
-var ReplaceMap = (props, context) => {
-  context.ctx.replace(props.context.ctx);
-  return (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}, props.children);
-};
 var memo = (Component, options) => {
@@ -47,8 +42,4 @@ const {
         return cachedResult;
-      const result = await (0, import_render_to_html.renderToHtmlAsync)(
-        (0, import_jsx_runtime.jsx)(
-          ReplaceMap,
-          { context },
-          (0, import_jsx_runtime.jsx)(Component, { ...propsNoChildren }, children)
-        )
+      const result = await context.renderAsync(
+        (0, import_jsx_runtime.createElement)(Component, { ...propsNoChildren }, children)
       );
@@ -69,8 +60,4 @@ const textNode = {
       return cachedResult;
-    const result = (0, import_render_to_html.renderToHtml)(
-      (0, import_jsx_runtime.jsx)(
-        ReplaceMap,
-        { context },
-        (0, import_jsx_runtime.jsx)(Component, { ...propsNoChildren }, children)
-      )
+    const result = context.render(
+      (0, import_jsx_runtime.createElement)(Component, { ...propsNoChildren }, children)
     );
@@ -77,0 +64,0 @@ const textNode = {

dist/types/component-api/component-api.d.ts

@@ -1,2 +0,2 @@
-import type { RendererOptions } from "../renderer/renderer";
+import type { HtmlRenderOptions } from "../html-renderer/render-to-html";
 export declare class ContextAccessor {
@@ -32,4 +32,4 @@ private map;
 export declare class ComponentApi {
-    private attributeMap?;
-    static create(options?: RendererOptions): ComponentApi;
+    private options?;
+    static create(options?: HtmlRenderOptions): ComponentApi;
     static clone(original: ComponentApi): ComponentApi;
@@ -36,0 +36,0 @@ /** Access to the current context data. */

dist/types/html-renderer/jsx-elem-to-html.d.ts

 import type { ComponentApi } from "../component-api/component-api";
 import { type ElementGenerator } from "../renderer/renderer";
 import type { HtmlRenderOptions } from "./render-to-html";
+type HtmlLine = {
+    content: string;
+    type: "tag-open" | "tag-close" | "tag-inline" | "text";
+    tag?: string;
+};
 declare class BaseHtmlGenerator {
     protected options?: HtmlRenderOptions | undefined;
     constructor(options?: HtmlRenderOptions | undefined);
-    protected prepareContent(content: string[]): string | undefined;
-    protected generateTag(tag: string, attributes?: string, content?: string): string;
+    protected generateTag(tag: string, attributes?: string, content?: HtmlLine[]): HtmlLine[];
+    protected flattenChildren(children: HtmlLine[][]): HtmlLine[];
 }
-export declare class HtmlGenerator extends BaseHtmlGenerator implements ElementGenerator<string> {
-    createTextNode(text: string | number | bigint): string;
-    createElement(type: string, attributes: [attributeName: string, attributeValue: any][], children: string[]): string;
-    createFragment(children: string[]): string;
+export declare class HtmlGenerator extends BaseHtmlGenerator implements ElementGenerator<HtmlLine[]> {
+    createTextNode(text: string | number | bigint): HtmlLine[];
+    createElement(type: string, attributes: [attributeName: string, attributeValue: any][], children: HtmlLine[][]): HtmlLine[];
+    createFragment(children: HtmlLine[][]): HtmlLine[];
 }
 export declare const jsxElemToHtmlSync: (element: JSX.Element, componentApi?: ComponentApi, options?: HtmlRenderOptions) => string;
-export declare class AsyncHtmlGenerator extends BaseHtmlGenerator implements ElementGenerator<string | Promise<string>> {
-    createElement(type: string, attributes: [attributeName: string, attributeValue: any][], children: Promise<Array<string>> | Array<string | Promise<string>>): Promise<string>;
-    createTextNode(text: string | number | bigint): string;
-    createFragment(children: Promise<Array<string>> | Array<string | Promise<string>>): Promise<string>;
+export declare class AsyncHtmlGenerator extends BaseHtmlGenerator implements ElementGenerator<HtmlLine[] | Promise<HtmlLine[]>> {
+    createElement(type: string, attributes: [attributeName: string, attributeValue: any][], children: Promise<Array<HtmlLine[]>> | Array<HtmlLine[] | Promise<HtmlLine[]>>): Promise<HtmlLine[]>;
+    createTextNode(text: string | number | bigint): HtmlLine[];
+    createFragment(children: Promise<Array<HtmlLine[]>> | Array<HtmlLine[] | Promise<HtmlLine[]>>): Promise<HtmlLine[]>;
 }
 export declare const jsxElemToHtmlAsync: (element: JSX.Element, componentApi?: ComponentApi, options?: HtmlRenderOptions) => Promise<string>;
 export {};

dist/types/html-renderer/render-to-html.d.ts

 export type HtmlRenderOptions = {
+    /**
+     * The number of spaces to use for indentation.
+     * @default 2
+     */
+    indent?: number;
     attributeMap?: Record<string, string>;
+    /**
+     * If true, the generated html will be compacted, removing all unnecessary
+     * whitespace.
+     */
     compact?: boolean;
@@ -4,0 +13,0 @@ };

dist/types/index.d.ts

 import "./utilities/array-flat-polyfill";
 export * from "./express/index";
 export * from "./jsx/jsx.types";
+export { defineContext } from "./component-api/component-api";
+export { DomRenderer } from "./dom-renderer/dom-renderer";
 export { ErrorBoundary } from "./error-boundary/error-boundary";
-export { defineContext } from "./component-api/component-api";
 export { renderToHtml, renderToHtmlAsync, } from "./html-renderer/render-to-html";
 export { renderToJson, renderToJsonAsync, } from "./json-renderer/render-to-json";
-export { memo } from "./utilities/memo";
 export { createElement } from "./jsx/jsx-runtime";
 export { JsxteRenderError } from "./jsxte-render-error";
-export type { ElementGenerator, RendererOptions } from "./renderer/renderer";
 export { JsxteRenderer } from "./renderer/renderer";
-export type { ContextDefinition, ComponentApi, } from "./component-api/component-api";
+export { memo } from "./utilities/memo";
+export type { ComponentApi, ContextDefinition, } from "./component-api/component-api";
+export type { DomRenderOptions } from "./dom-renderer/dom-renderer";
+export type { HtmlRenderOptions } from "./html-renderer/render-to-html";
+export type { JsxteJson } from "./json-renderer/jsx-elem-to-json";
+export type { JsonRenderOptions } from "./json-renderer/render-to-json";
 export type { AttributeBool, HTMLProps } from "./jsx/base-html-tag-props";
+export type { InputType } from "./jsx/prop-types/input-jsx-props";
 export type { Crossorigin } from "./jsx/prop-types/shared/crossorigin";
 export type { RefererPolicy } from "./jsx/prop-types/shared/referer-policy";
 export type { Target } from "./jsx/prop-types/shared/target";
-export type { JsxteJson } from "./json-renderer/jsx-elem-to-json";
-export type { InputType } from "./jsx/prop-types/input-jsx-props";
-export type { HtmlRenderOptions } from "./html-renderer/render-to-html";
-export type { JsonRenderOptions } from "./json-renderer/render-to-json";
+export type { ElementGenerator, RendererOptions } from "./renderer/renderer";

dist/types/jsx-runtime.d.ts

@@ -0,2 +1,2 @@
+export * from "./jsx/jsx-runtime";
 export * from "./jsx/jsx.types";
-export * from "./jsx/jsx-runtime";

dist/types/jsx/jsx-dev-runtime.d.ts

@@ -5,2 +5,2 @@ import type { ComponentApi } from "../component-api/component-api";
 declare const jsxDEV: (tag: string | ((props: any, contextMap: ComponentApi) => JSX.Element) | ((props: any, contextMap: ComponentApi) => Promise<JSX.Element>), props?: CreateElementProps) => JSX.Element;
-export { Fragment, jsx, jsxs, jsxDEV };
+export { Fragment, jsx, jsxDEV, jsxs };

jsx-dev-runtime.js

@@ -8,4 +8,4 @@ "use strict";
   if ((from && typeof from === "object") || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
+    for (let key of __getOwnPropNames(from)) {
+      if (!__hasOwnProp.call(to, key) && key !== except) {
         __defProp(to, key, {
@@ -15,2 +15,4 @@ get: () => from[key],
         });
+      }
+    }
   }
@@ -21,3 +23,3 @@ return to;
   __copyProps(target, mod, "default"),
-  secondTarget && __copyProps(secondTarget, mod, "default")
+    secondTarget && __copyProps(secondTarget, mod, "default")
 );
@@ -24,0 +26,0 @@ var __toCommonJS = (mod) =>

jsx-runtime.js

@@ -8,4 +8,4 @@ "use strict";
   if ((from && typeof from === "object") || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
+    for (let key of __getOwnPropNames(from)) {
+      if (!__hasOwnProp.call(to, key) && key !== except) {
         __defProp(to, key, {
@@ -15,2 +15,4 @@ get: () => from[key],
         });
+      }
+    }
   }
@@ -21,3 +23,3 @@ return to;
   __copyProps(target, mod, "default"),
-  secondTarget && __copyProps(secondTarget, mod, "default")
+    secondTarget && __copyProps(secondTarget, mod, "default")
 );
@@ -24,0 +26,0 @@ var __toCommonJS = (mod) =>

package.json

 {
   "name": "jsxte",
-  "version": "3.1.10-canary-5d95b153702c285c28febd4f5a03090a21cd6ef5.0",
+  "version": "3.1.10-canary-8b30b441724204f88dd56707d088ba9b7c12823e.0",
   "description": "JSX-based html templating engine for browsers or Node environments.",
@@ -39,3 +39,6 @@ "license": "MIT",
     "test:tsc": "tsc --noEmit",
-    "test:unit": "vitest run"
+    "test:unit": "vitest run",
+    "test:fmt": "dprint check",
+    "fmt": "dprint fmt",
+    "prepare": "husky install"
   },
@@ -51,16 +54,15 @@ "author": {
     "@ncpa0cpl/nodepack": "~2.3.0",
+    "@types/jsdom": "^21.1.6",
     "@types/node": "^20.10.6",
-    "@typescript-eslint/eslint-plugin": "~6.15.0",
-    "@typescript-eslint/parser": "~6.13.1",
+    "@typescript-eslint/eslint-plugin": "~6.19.1",
+    "@typescript-eslint/parser": "~6.19.1",
     "axios": "~1.6.0",
+    "dprint": "^0.45.0",
     "esbuild": "~0.19.5",
-    "eslint": "~8.55.0",
-    "eslint-config-prettier": "~9.1.0",
-    "eslint-plugin-prettier": "~5.0.1",
-    "git-hook-tasks": "ncpa0cpl/git-hook-tasks",
+    "eslint": "~8.56.0",
+    "git-hook-tasks": "git+https://github.com/ncpa0cpl/git-hook-tasks#0.0.1",
     "husky": "~8.0.3",
+    "jsdom": "^24.0.0",
     "node-os-walk": "~1.0.2",
     "pr-changelog-gen": "~1.1.3",
-    "prettier": "~3.1.0",
-    "prettier-plugin-jsdoc": "~1.1.1",
     "typescript": "latest",
@@ -67,0 +69,0 @@ "vitest": "^1.1.1"

README.md

@@ -18,8 +18,10 @@ # JSX Template Engine
 6. [toHtmlTag symbol](#tohtmltag-symbol)
-7. [Extending the typings](#extending-the-typings)
+7. [DomRenderer](#domrenderer)
+8. [JsxteRenderer](#jsxterenderer)
+9. [Extending the typings](#extending-the-typings)
    1. [Adding custom web component tags](#adding-custom-web-component-tags)
    2. [Adding a global html attribute](#adding-a-global-html-attribute)
-8. [Express JS View Engine](#express-js-view-engine)
-9. [Monkey-Patching type definitions](#monkey-patching-type-definitions)
-10. [Contributing](#contributing)
+10. [Express JS View Engine](#express-js-view-engine)
+11. [Monkey-Patching type definitions](#monkey-patching-type-definitions)
+12. [Contributing](#contributing)
 
@@ -60,3 +62,3 @@ ## Getting started
 ```tsx
-import { renderToHtml, createElement } from "jsxte";
+import { createElement, renderToHtml } from "jsxte";
 
@@ -285,2 +287,79 @@ const Header: JSXTE.Component<{ label: string }> = (props) => {
 
+## DomRenderer
+
+`DomRenderer` renders given JSX into a DOM object. It requires a window object to be passed to the constructor.
+
+```tsx
+import { DomRenderer } from "jsxte";
+
+const renderer = new DomRenderer(window);
+const divElement = renderer.render(<div>Hello World!</div>);
+
+divElement.outerHTML; // <div>Hello World!</div>
+window.document.body.appendChild(divElement);
+```
+
+## JsxteRenderer
+
+`JsxteRenderer` is a base class around which HTML and JSON renderer are built upon. This renderer requires a specific interface that provides methods for creating the final output format:
+
+```ts
+// T is the type of the renderer return value
+export interface ElementGenerator<T> {
+  createElement(
+    type: string,
+    attributes: Array<[attributeName: string, attributeValue: any]>,
+    children: Array<T>,
+  ): T;
+  createTextNode(text: string | number | bigint): T;
+  createFragment(children: Array<T>): T;
+}
+```
+
+It is possible to render to other formats than HTML or JSON by providing a custom `ElementGenerator` implementation to the renderer.
+
+### Example
+
+```tsx
+import { JsxteRenderer } from "jsxte";
+
+class DomGenerator
+  implements ElementGenerator<HTMLElement | Text | DocumentFragment>
+{
+  createElement(
+    type: string,
+    attributes: Array<[attributeName: string, attributeValue: any]>,
+    children: Array<HTMLElement | Text | DocumentFragment>,
+  ): HTMLElement | Text | DocumentFragment {
+    const element = document.createElement(type);
+    for (const [name, value] of attributes) {
+      element.setAttribute(name, value);
+    }
+    for (const child of children) {
+      element.appendChild(child);
+    }
+    return element;
+  }
+
+  createTextNode(
+    text: string | number | bigint,
+  ): HTMLElement | Text | DocumentFragment {
+    return document.createTextNode(String(text));
+  }
+
+  createFragment(
+    children: Array<HTMLElement | Text | DocumentFragment>,
+  ): HTMLElement | Text | DocumentFragment {
+    const fragment = document.createDocumentFragment();
+    for (const child of children) {
+      fragment.appendChild(child);
+    }
+    return fragment;
+  }
+}
+
+const renderer = new JsxteRenderer(new DomGenerator());
+const divElement = renderer.render(<div>Hello World!</div>);
+```
+
 ## Extending the typings
@@ -308,3 +387,4 @@
 const MyComponent: JSXTE.Component = () => (
-  <my-custom-web-component data-example-attribute="Hello"></my-custom-web-component>
+  <my-custom-web-component data-example-attribute="Hello">
+  </my-custom-web-component>
 );
@@ -311,0 +391,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

289314

increased by9.81%

Dev dependency count

16

decreased by-5.88%

Number of package files

311

increased by1.63%

Lines of code

7450

increased by10.03%

Number of lines in readme file

478

increased by20.1%

No dependency changes