jsxte - npm Package Compare versions

Comparing version 3.1.9 to 3.1.10-canary-4a7246aa5726670c37ceab2a7b18e660f05db470.0

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

@@ -52,5 +52,3 @@ "use strict";
   }
-  /**
-   * Retrieve the context data for the specified context.
-   */
+  /** Retrieve the context data for the specified context. */
   get(ref) {
@@ -98,5 +96,3 @@ const value = this.map.get(ref.id);
   }
-  /**
-   * Check if the context data for the specified context is set.
-   */
+  /** Check if the context data for the specified context is set. */
   has(ref) {
@@ -103,0 +99,0 @@ return this.map.has(ref.id);

dist/legacy/express/index.js

@@ -28,15 +28,29 @@ "use strict";
 var import_jsx_runtime = require("../jsx/jsx-runtime.js");
-var __express = async (filePath, options, callback) => {
-  options ?? (options = {});
-  try {
-    const Component = require(filePath).default;
-    const html = await (0, import_render_to_html.renderToHtmlAsync)((0, import_jsx_runtime.createElement)(Component, options));
-    return callback(null, html);
-  } catch (e) {
-    callback(e);
+var expressTmplEngineFactory = (syncOnly) => {
+  if (syncOnly) {
+    return async function jsxteTemplateEngine(filePath, options, callback) {
+      options ?? (options = {});
+      try {
+        const Component = require(filePath).default;
+        const html = await (0, import_render_to_html.renderToHtml)((0, import_jsx_runtime.createElement)(Component, options));
+        return callback(null, html);
+      } catch (e) {
+        callback(e);
+      }
+    };
   }
+  return async function jsxteTemplateEngine(filePath, options, callback) {
+    options ?? (options = {});
+    try {
+      const Component = require(filePath).default;
+      const html = await (0, import_render_to_html.renderToHtmlAsync)((0, import_jsx_runtime.createElement)(Component, options));
+      return callback(null, html);
+    } catch (e) {
+      callback(e);
+    }
+  };
 };
-var expressExtend = (app) => {
-  app.engine("js", __express);
+var expressExtend = (app, opt) => {
+  app.engine("js", expressTmplEngineFactory(opt?.syncOnly ?? false));
   app.set("view engine", "js");
 };

dist/legacy/html-renderer/attribute-to-html-tag-string.js

@@ -27,2 +27,3 @@ "use strict";
 module.exports = __toCommonJS(attribute_to_html_tag_string_exports);
+var import_join = require("../utilities/join.js");
 var attributeToHtmlTagString = ([key, value]) => {
@@ -45,3 +46,3 @@ if (value === true) {
   }
-  return results;
+  return (0, import_join.join)(results, " ");
 };

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

@@ -23,2 +23,4 @@ "use strict";
 __export(jsx_elem_to_html_exports, {
+  AsyncHtmlGenerator: () => AsyncHtmlGenerator,
+  HtmlGenerator: () => HtmlGenerator,
   jsxElemToHtmlAsync: () => jsxElemToHtmlAsync,
@@ -28,331 +30,98 @@ jsxElemToHtmlSync: () => jsxElemToHtmlSync
 module.exports = __toCommonJS(jsx_elem_to_html_exports);
-var import_component_api = require("../component-api/component-api.js");
-var import_error_boundary = require("../error-boundary/error-boundary.js");
-var import_jsxte_render_error = require("../jsxte-render-error.js");
-var import_get_component_name = require("../utilities/get-component-name.js");
-var import_get_err_message = require("../utilities/get-err-message.js");
+var import_renderer = require("../renderer/renderer.js");
 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_get_html_struct = require("./get-html-struct.js");
-function assertSyncElem(e) {
+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 isTextNode = (e) => typeof e === "object" && e != null && "type" in e && e.type === "textNode";
-var jsxElemToHtmlSync = (element, _componentApi, options) => {
-  switch (typeof element) {
-    case "string":
-      return element;
-    case "bigint":
-    case "number":
-      return String(element);
-    case "boolean":
-    case "function":
-    case "symbol":
-    case "undefined":
-      return "";
+var BaseHtmlGenerator = class {
+  constructor(options) {
+    this.options = options;
   }
-  if (element === null)
-    return "";
-  const attributeMap = options?.attributeMap ?? {};
-  const currentIndent = options?.currentIndent ?? 0;
-  const indent = options?.indent ?? 2;
-  const componentApi = _componentApi ? import_component_api.ComponentApi.clone(_componentApi) : import_component_api.ComponentApi.create(options);
-  assertSyncElem(element);
-  if (element.type === "textNode") {
-    const indentPadding = " ".repeat(currentIndent);
-    return indentPadding + element.text;
+  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);
   }
-  if (typeof element.tag !== "string") {
-    if (import_error_boundary.ErrorBoundary._isErrorBoundary(element.tag)) {
-      const boundary = new element.tag(element.props);
-      try {
-        const subElem = boundary.render(
-          element.props,
-          componentApi
-        );
-        if (subElem instanceof Promise) {
-          throw new import_jsxte_render_error.JsxteRenderError(
-            `Encountered an async Component: [${element.tag.name}.render] Asynchronous Component's cannot be parsed by rendertoHTML. If you wante to use asynchronous components use renderToHtmlAsync instead.`,
-            (0, import_get_component_name.getComponentName)(element.tag)
-          );
-        }
-        return jsxElemToHtmlSync(subElem, componentApi, {
-          indent,
-          currentIndent,
-          attributeMap
-        });
-      } catch (e) {
-        try {
-          const fallbackElem = boundary.onError(e, element.props, componentApi);
-          if (fallbackElem instanceof Promise) {
-            throw new import_jsxte_render_error.JsxteRenderError(
-              `Encountered an async Component: [${element.tag.name}.onError] Asynchronous Component's cannot be parsed by rendertoHTML. If you wante to use asynchronous components use renderToHtmlAsync instead.`
-            );
-          }
-          return jsxElemToHtmlSync(fallbackElem, componentApi, {
-            indent,
-            currentIndent,
-            attributeMap
-          });
-        } catch (err) {
-          const tagname = (0, import_get_component_name.getComponentName)(element.tag) + ".onError";
-          if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-            throw new import_jsxte_render_error.JsxteRenderError(
-              "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-              tagname
-            );
-          }
-          err.pushParent(tagname);
-          throw err;
-        }
+  generateTag(tag, attributes, content) {
+    if (attributes) {
+      attributes = " " + attributes;
+    }
+    if (!content) {
+      if (import_self_closing_tag_list.SELF_CLOSING_TAG_LIST.includes(tag)) {
+        return `<${tag}${attributes} />`;
+      } else {
+        return `<${tag}${attributes}></${tag}>`;
       }
     }
-    if (typeof element.tag !== "function") {
-      throw new import_jsxte_render_error.JsxteRenderError("Encountered an invalid element.");
+    if (this.options?.compact === true) {
+      return `<${tag}${attributes}>${content}</${tag}>`;
     }
-    try {
-      const subElem = element.tag(
-        element.props,
-        componentApi
-      );
-      if (subElem instanceof Promise) {
-        throw new import_jsxte_render_error.JsxteRenderError(
-          `Encountered an async Component: [${element.tag.name}], Asynchronous Component's cannot be parsed by renderToHTML(). If you want to use asynchronous components use renderToHtmlAsync() instead.`
-        );
-      }
-      return jsxElemToHtmlSync(subElem, componentApi, {
-        indent,
-        currentIndent,
-        attributeMap
-      });
-    } catch (err) {
-      if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-        throw new import_jsxte_render_error.JsxteRenderError(
-          "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-          (0, import_get_component_name.getComponentName)(element.tag)
-        );
-      }
-      err.pushParent((0, import_get_component_name.getComponentName)(element.tag));
-      throw err;
+    if (tag === "pre") {
+      return `<${tag}${attributes}>${content}</${tag}>`;
     }
-  } else {
-    const htmlStruct = (0, import_get_html_struct.getHTMLStruct)(element, attributeMap);
-    if (htmlStruct.tag === "") {
-      try {
-        const results = [];
-        for (let i = 0; i < htmlStruct.children.length; i++) {
-          const child = htmlStruct.children[i];
-          const renderedChild = jsxElemToHtmlSync(child, componentApi, {
-            indent,
-            currentIndent: currentIndent + indent,
-            attributeMap
-          });
-          if (renderedChild.length > 0)
-            results.push(renderedChild);
-        }
-        return (0, import_join.join)(results);
-      } catch (err) {
-        if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-          throw new import_jsxte_render_error.JsxteRenderError(
-            "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-            htmlStruct.tag
-          );
-        }
-        err.pushParent(htmlStruct.tag);
-        throw err;
-      }
-    } else {
-      try {
-        const isSelfClosingTag = htmlStruct.children.length === 0 && import_self_closing_tag_list.SELF_CLOSING_TAG_LIST.includes(htmlStruct.tag);
-        const inlineTag = htmlStruct.children.length === 0 || htmlStruct.children.every(isTextNode);
-        const indentPadding = " ".repeat(currentIndent);
-        const attrString = (0, import_join.join)(
-          (0, import_attribute_to_html_tag_string.mapAttributesToHtmlTagString)(htmlStruct.attributes),
-          " "
-        );
-        const separator = attrString.length ? " " : "";
-        if (isSelfClosingTag) {
-          return `${indentPadding}<${htmlStruct.tag}` + separator + (0, import_join.join)((0, import_attribute_to_html_tag_string.mapAttributesToHtmlTagString)(htmlStruct.attributes), " ") + separator + "/>";
-        }
-        const startTag = `${indentPadding}<${htmlStruct.tag}` + separator + (0, import_join.join)((0, import_attribute_to_html_tag_string.mapAttributesToHtmlTagString)(htmlStruct.attributes), " ") + ">";
-        const endTag = `${inlineTag ? "" : indentPadding}</${htmlStruct.tag}>`;
-        const children = [];
-        for (let i = 0; i < htmlStruct.children.length; i++) {
-          const child = htmlStruct.children[i];
-          const renderedChild = jsxElemToHtmlSync(child, componentApi, {
-            indent: inlineTag ? 0 : indent,
-            currentIndent: inlineTag ? 0 : currentIndent + indent,
-            attributeMap
-          });
-          if (renderedChild.length > 0)
-            children.push(renderedChild);
-        }
-        if (inlineTag) {
-          return startTag + (0, import_join.join)(children, "") + endTag;
-        }
-        return (0, import_join.join)([startTag, ...children, endTag]);
-      } catch (err) {
-        if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-          throw new import_jsxte_render_error.JsxteRenderError(
-            "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-            htmlStruct.tag
-          );
-        }
-        err.pushParent(htmlStruct.tag);
-        throw err;
-      }
-    }
+    return `<${tag}${attributes}>
+${content}
+</${tag}>`;
   }
 };
-var jsxElemToHtmlAsync = async (element, _componentApi, options) => {
-  switch (typeof element) {
-    case "string":
-      return element;
-    case "bigint":
-    case "number":
-      return String(element);
-    case "boolean":
-    case "function":
-    case "symbol":
-    case "undefined":
-      return "";
+var HtmlGenerator = class extends BaseHtmlGenerator {
+  createTextNode(text) {
+    return String(text);
   }
-  if (element === null)
-    return "";
-  const { attributeMap = {}, currentIndent = 0, indent = 2 } = options ?? {};
-  const componentApi = _componentApi ? import_component_api.ComponentApi.clone(_componentApi) : import_component_api.ComponentApi.create(options);
-  assertSyncElem(element);
-  if (element.type === "textNode") {
-    const indentPadding = " ".repeat(currentIndent);
-    return indentPadding + element.text;
+  createElement(type, attributes, children) {
+    const attributesString = (0, import_attribute_to_html_tag_string.mapAttributesToHtmlTagString)(attributes);
+    const content = this.prepareContent(children);
+    return this.generateTag(type, attributesString, content);
   }
-  if (typeof element.tag !== "string") {
-    if (import_error_boundary.ErrorBoundary._isErrorBoundary(element.tag)) {
-      const boundary = new element.tag(element.props);
-      try {
-        const subElem = await boundary.render(
-          element.props,
-          componentApi
-        );
-        return await jsxElemToHtmlAsync(subElem, componentApi, {
-          indent,
-          currentIndent,
-          attributeMap
-        });
-      } catch (e) {
-        try {
-          const fallbackElem = await boundary.onError(
-            e,
-            element.props,
-            componentApi
-          );
-          return await jsxElemToHtmlAsync(fallbackElem, componentApi, {
-            indent,
-            currentIndent,
-            attributeMap
-          });
-        } catch (err) {
-          const tagname = (0, import_get_component_name.getComponentName)(element.tag) + ".onError";
-          if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-            throw new import_jsxte_render_error.JsxteRenderError(
-              "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-              tagname
-            );
-          }
-          err.pushParent(tagname);
-          throw err;
-        }
-      }
-    }
-    if (typeof element.tag !== "function") {
-      throw new import_jsxte_render_error.JsxteRenderError("Encountered an invalid element.");
-    }
-    try {
-      const subElem = await element.tag(
-        element.props,
-        componentApi
-      );
-      return await jsxElemToHtmlAsync(subElem, componentApi, {
-        indent,
-        currentIndent,
-        attributeMap
-      });
-    } catch (err) {
-      if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-        throw new import_jsxte_render_error.JsxteRenderError(
-          "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-          (0, import_get_component_name.getComponentName)(element.tag)
-        );
-      }
-      err.pushParent((0, import_get_component_name.getComponentName)(element.tag));
-      throw err;
-    }
-  } else {
-    const htmlStruct = (0, import_get_html_struct.getHTMLStruct)(element, attributeMap);
-    if (htmlStruct.tag === "") {
-      try {
-        const results = [];
-        for (let i = 0; i < htmlStruct.children.length; i++) {
-          const child = htmlStruct.children[i];
-          const renderedChild = await jsxElemToHtmlAsync(child, componentApi, {
-            indent,
-            currentIndent: currentIndent + indent,
-            attributeMap
-          });
-          if (renderedChild.length > 0)
-            results.push(renderedChild);
-        }
-        return (0, import_join.join)(results);
-      } catch (err) {
-        if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-          throw new import_jsxte_render_error.JsxteRenderError(
-            "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-            htmlStruct.tag
-          );
-        }
-        err.pushParent(htmlStruct.tag);
-        throw err;
-      }
-    } else {
-      try {
-        const isSelfClosingTag = htmlStruct.children.length === 0 && import_self_closing_tag_list.SELF_CLOSING_TAG_LIST.includes(htmlStruct.tag);
-        const inlineTag = htmlStruct.children.length === 0 || htmlStruct.children.every(isTextNode);
-        const indentPadding = " ".repeat(currentIndent);
-        const attrString = (0, import_join.join)(
-          (0, import_attribute_to_html_tag_string.mapAttributesToHtmlTagString)(htmlStruct.attributes),
-          " "
-        );
-        const separator = attrString.length ? " " : "";
-        if (isSelfClosingTag) {
-          return `${indentPadding}<${htmlStruct.tag}` + separator + (0, import_join.join)((0, import_attribute_to_html_tag_string.mapAttributesToHtmlTagString)(htmlStruct.attributes), " ") + separator + "/>";
-        }
-        const startTag = `${indentPadding}<${htmlStruct.tag}` + separator + attrString + ">";
-        const endTag = `${inlineTag ? "" : indentPadding}</${htmlStruct.tag}>`;
-        const children = [];
-        for (let i = 0; i < htmlStruct.children.length; i++) {
-          const child = htmlStruct.children[i];
-          const renderedChild = await jsxElemToHtmlAsync(child, componentApi, {
-            indent: inlineTag ? 0 : indent,
-            currentIndent: inlineTag ? 0 : currentIndent + indent,
-            attributeMap
-          });
-          if (renderedChild.length > 0)
-            children.push(renderedChild);
-        }
-        if (inlineTag) {
-          return startTag + (0, import_join.join)(children, "") + endTag;
-        }
-        return (0, import_join.join)([startTag, ...children, endTag]);
-      } catch (err) {
-        if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-          throw new import_jsxte_render_error.JsxteRenderError(
-            "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-            htmlStruct.tag
-          );
-        }
-        err.pushParent(htmlStruct.tag);
-        throw err;
-      }
-    }
+  createFragment(children) {
+    return this.prepareContent(children) ?? "";
   }
 };
+var jsxElemToHtmlSync = (element, componentApi, options) => {
+  const renderer = new import_renderer.JsxteRenderer(
+    new HtmlGenerator(),
+    { ...options, allowAsync: false },
+    componentApi
+  );
+  return renderer.render(element);
+};
+var AsyncHtmlGenerator = class extends BaseHtmlGenerator {
+  createElement(type, attributes, children) {
+    return Promise.resolve(children).then((c) => Promise.all(c)).then((children2) => {
+      const attributesString = (0, import_attribute_to_html_tag_string.mapAttributesToHtmlTagString)(attributes);
+      const content = this.prepareContent(children2);
+      return this.generateTag(type, attributesString, content);
+    });
+  }
+  createTextNode(text) {
+    return String(text);
+  }
+  createFragment(children) {
+    return Promise.resolve(children).then((c) => Promise.all(c)).then((children2) => {
+      return this.prepareContent(children2) ?? "";
+    });
+  }
+};
+var jsxElemToHtmlAsync = (element, componentApi, options) => {
+  const renderer = new import_renderer.JsxteRenderer(
+    new AsyncHtmlGenerator(options),
+    { ...options, allowAsync: true },
+    componentApi
+  );
+  return renderer.render(element);
+};

dist/legacy/index.js

@@ -24,7 +24,5 @@ "use strict";
 __export(src_exports, {
-  DefaultTemplateArrayCache: () => import_default_cache.DefaultTemplateArrayCache,
   ErrorBoundary: () => import_error_boundary.ErrorBoundary,
-  Interpolate: () => import_interpolate.Interpolate,
-  InterpolateTag: () => import_interpolate.InterpolateTag,
   JsxteRenderError: () => import_jsxte_render_error.JsxteRenderError,
+  JsxteRenderer: () => import_renderer.JsxteRenderer,
   createElement: () => import_jsx_runtime.createElement,
@@ -36,4 +34,3 @@ defineContext: () => import_component_api.defineContext,
   renderToJson: () => import_render_to_json.renderToJson,
-  renderToJsonAsync: () => import_render_to_json.renderToJsonAsync,
-  renderToStringTemplateTag: () => import_render_to_string_template_tag.renderToStringTemplateTag
+  renderToJsonAsync: () => import_render_to_json.renderToJsonAsync
 });
@@ -44,11 +41,9 @@ module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./jsx/jsx.types.js"), module.exports);
-var import_interpolate = require("./string-template-renderer/interpolate.js");
-var import_default_cache = require("./string-template-renderer/default-cache.js");
+var import_component_api = require("./component-api/component-api.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_render_to_string_template_tag = require("./string-template-renderer/render-to-string-template-tag.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/json-renderer/jsx-elem-to-json.js

@@ -23,2 +23,4 @@ "use strict";
 __export(jsx_elem_to_json_exports, {
+  AsyncJsonGenerator: () => AsyncJsonGenerator,
+  JsonGenerator: () => JsonGenerator,
   jsxElemToJsonAsync: () => jsxElemToJsonAsync,
@@ -28,229 +30,56 @@ jsxElemToJsonSync: () => jsxElemToJsonSync
 module.exports = __toCommonJS(jsx_elem_to_json_exports);
-var import_component_api = require("../component-api/component-api.js");
-var import_error_boundary = require("../error-boundary/error-boundary.js");
-var import_get_html_struct = require("../html-renderer/get-html-struct.js");
-var import_jsxte_render_error = require("../jsxte-render-error.js");
-var import_get_component_name = require("../utilities/get-component-name.js");
-var import_get_err_message = require("../utilities/get-err-message.js");
-function assertSyncElem(e) {
-}
-var jsxElemToJsonSync = (element, _componentApi, options) => {
-  switch (typeof element) {
-    case "string":
-      return element;
-    case "bigint":
-    case "number":
-      return String(element);
-    case "boolean":
-    case "function":
-    case "symbol":
-    case "undefined":
-      return "";
+var import_renderer = require("../renderer/renderer.js");
+var JsonGenerator = class {
+  createTextNode(text) {
+    return text;
   }
-  if (element === null)
-    return "";
-  const attributeMap = options?.attributeMap ?? {};
-  const componentApi = _componentApi ? import_component_api.ComponentApi.clone(_componentApi) : import_component_api.ComponentApi.create(options);
-  assertSyncElem(element);
-  if (element.type === "textNode") {
-    return element.text;
+  createElement(type, attributes, children) {
+    return {
+      element: type,
+      attributes,
+      children
+    };
   }
-  if (typeof element.tag !== "string") {
-    if (import_error_boundary.ErrorBoundary._isErrorBoundary(element.tag)) {
-      const boundary = new element.tag(element.props);
-      try {
-        const subElem = boundary.render(
-          element.props,
-          componentApi
-        );
-        if (subElem instanceof Promise) {
-          throw new import_jsxte_render_error.JsxteRenderError(
-            `Encountered an async Component: [${element.tag.name}.render] Asynchronous Component's cannot be parsed by rendertoHTML. If you wante to use asynchronous components use renderToHtmlAsync instead.`,
-            (0, import_get_component_name.getComponentName)(element.tag)
-          );
-        }
-        return jsxElemToJsonSync(subElem, componentApi, {
-          attributeMap
-        });
-      } catch (e) {
-        try {
-          const fallbackElem = boundary.onError(e, element.props, componentApi);
-          if (fallbackElem instanceof Promise) {
-            throw new import_jsxte_render_error.JsxteRenderError(
-              `Encountered an async Component: [${element.tag.name}.onError] Asynchronous Component's cannot be parsed by rendertoHTML. If you wante to use asynchronous components use renderToHtmlAsync instead.`
-            );
-          }
-          return jsxElemToJsonSync(fallbackElem, componentApi, {
-            attributeMap
-          });
-        } catch (err) {
-          const tagname = (0, import_get_component_name.getComponentName)(element.tag) + ".onError";
-          if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-            throw new import_jsxte_render_error.JsxteRenderError(
-              "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-              tagname
-            );
-          }
-          err.pushParent(tagname);
-          throw err;
-        }
-      }
-    }
-    if (typeof element.tag !== "function") {
-      throw new import_jsxte_render_error.JsxteRenderError("Encountered an invalid element.");
-    }
-    try {
-      const subElem = element.tag(
-        element.props,
-        componentApi
-      );
-      if (subElem instanceof Promise) {
-        throw new Error(
-          `Encountered an async Component: [${element.tag.name}] Asynchronous Component's cannot be parsed by rendertoHTML. If you wante to use asynchronous components use renderToHtmlAsync instead.`
-        );
-      }
-      return jsxElemToJsonSync(subElem, componentApi, {
-        attributeMap
-      });
-    } catch (err) {
-      if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-        throw new import_jsxte_render_error.JsxteRenderError(
-          "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-          (0, import_get_component_name.getComponentName)(element.tag)
-        );
-      }
-      err.pushParent((0, import_get_component_name.getComponentName)(element.tag));
-      throw err;
-    }
-  } else {
-    const htmlStruct = (0, import_get_html_struct.getHTMLStruct)(element, attributeMap);
-    const r = {
-      element: htmlStruct.tag,
-      attributes: htmlStruct.attributes,
-      children: []
+  createFragment(children) {
+    return {
+      element: "",
+      attributes: [],
+      children
     };
-    try {
-      for (let i = 0; i < htmlStruct.children.length; i++) {
-        const child = htmlStruct.children[i];
-        const rendered = jsxElemToJsonSync(child, componentApi, {
-          attributeMap
-        });
-        r.children.push(rendered);
-      }
-      return r;
-    } catch (err) {
-      if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-        throw new import_jsxte_render_error.JsxteRenderError(
-          "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-          htmlStruct.tag
-        );
-      }
-      err.pushParent(htmlStruct.tag);
-      throw err;
-    }
   }
 };
-var jsxElemToJsonAsync = async (element, _componentApi, options) => {
-  switch (typeof element) {
-    case "string":
-      return element;
-    case "bigint":
-    case "number":
-      return String(element);
-    case "boolean":
-    case "function":
-    case "symbol":
-    case "undefined":
-      return "";
+var jsxElemToJsonSync = (element, componentApi, options) => {
+  const renderer = new import_renderer.JsxteRenderer(
+    new JsonGenerator(),
+    { ...options, allowAsync: false },
+    componentApi
+  );
+  return renderer.render(element);
+};
+var AsyncJsonGenerator = class {
+  createTextNode(text) {
+    return text;
   }
-  if (element === null)
-    return "";
-  const attributeMap = options?.attributeMap ?? {};
-  const componentApi = _componentApi ? import_component_api.ComponentApi.clone(_componentApi) : import_component_api.ComponentApi.create(options);
-  assertSyncElem(element);
-  if (element.type === "textNode") {
-    return element.text;
+  async createElement(type, attributes, children) {
+    return {
+      element: type,
+      attributes,
+      children: await Promise.resolve(children).then((c) => Promise.all(c))
+    };
   }
-  if (typeof element.tag !== "string") {
-    if (import_error_boundary.ErrorBoundary._isErrorBoundary(element.tag)) {
-      const boundary = new element.tag(element.props);
-      try {
-        const subElem = await boundary.render(
-          element.props,
-          componentApi
-        );
-        return await jsxElemToJsonAsync(subElem, componentApi, {
-          attributeMap
-        });
-      } catch (e) {
-        try {
-          const fallbackElem = await boundary.onError(
-            e,
-            element.props,
-            componentApi
-          );
-          return await jsxElemToJsonAsync(fallbackElem, componentApi, {
-            attributeMap
-          });
-        } catch (err) {
-          const tagname = (0, import_get_component_name.getComponentName)(element.tag) + ".onError";
-          if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-            throw new import_jsxte_render_error.JsxteRenderError(
-              "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-              tagname
-            );
-          }
-          err.pushParent(tagname);
-          throw err;
-        }
-      }
-    }
-    if (typeof element.tag !== "function") {
-      throw new import_jsxte_render_error.JsxteRenderError("Encountered an invalid element.");
-    }
-    try {
-      const subElem = await element.tag(
-        element.props,
-        componentApi
-      );
-      return await jsxElemToJsonAsync(subElem, componentApi, {
-        attributeMap
-      });
-    } catch (err) {
-      if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-        throw new import_jsxte_render_error.JsxteRenderError(
-          "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-          (0, import_get_component_name.getComponentName)(element.tag)
-        );
-      }
-      err.pushParent((0, import_get_component_name.getComponentName)(element.tag));
-      throw err;
-    }
-  } else {
-    const htmlStruct = (0, import_get_html_struct.getHTMLStruct)(element, attributeMap);
-    const r = {
-      element: htmlStruct.tag,
-      attributes: htmlStruct.attributes,
-      children: []
+  async createFragment(children) {
+    return {
+      element: "",
+      attributes: [],
+      children: await Promise.resolve(children).then((c) => Promise.all(c))
     };
-    try {
-      for (let i = 0; i < htmlStruct.children.length; i++) {
-        const child = htmlStruct.children[i];
-        const rendered = await jsxElemToJsonAsync(child, componentApi, {
-          attributeMap
-        });
-        r.children.push(rendered);
-      }
-      return r;
-    } catch (err) {
-      if (!import_jsxte_render_error.JsxteRenderError.is(err)) {
-        throw new import_jsxte_render_error.JsxteRenderError(
-          "Rendering has failed due to an error: " + (0, import_get_err_message.getErrorMessage)(err),
-          htmlStruct.tag
-        );
-      }
-      err.pushParent(htmlStruct.tag);
-      throw err;
-    }
   }
 };
+var jsxElemToJsonAsync = (element, componentApi, options) => {
+  const renderer = new import_renderer.JsxteRenderer(
+    new AsyncJsonGenerator(),
+    { ...options, allowAsync: true },
+    componentApi
+  );
+  return renderer.render(element);
+};

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/utilities/cache.js

@@ -77,4 +77,5 @@ "use strict";
     );
-    if (cacheEntry && !cacheEntry.isExpired(Date.now()))
+    if (cacheEntry && !cacheEntry.isExpired(Date.now())) {
       return cacheEntry.value;
+    }
     return void 0;
@@ -81,0 +82,0 @@ }

dist/legacy/utilities/get-component-name.js

@@ -26,10 +26,13 @@ "use strict";
 module.exports = __toCommonJS(get_component_name_exports);
-var getComponentName = (component) => {
-  if ("displayName" in component && typeof component.displayName === "string") {
-    return component.displayName;
+var getComponentName = (element) => {
+  if (typeof element.tag === "string") {
+    return element.tag;
   }
-  if ("name" in component && typeof component.name === "string") {
-    return component.name;
+  if ("displayName" in element.tag && typeof element.tag.displayName === "string") {
+    return element.tag.displayName;
   }
+  if ("name" in element.tag && typeof element.tag.name === "string") {
+    return element.tag.name;
+  }
   return "AnonymousComponent";
 };

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,3 +0,2 @@
-import { type RendererInternalOptions } from "../html-renderer/jsx-elem-to-html";
-import { type JsxteJson } from "../json-renderer/jsx-elem-to-json";
+import type { RendererOptions } from "../renderer/renderer";
 export declare class ContextAccessor {
@@ -12,5 +11,3 @@ private map;
     getOrFail<T>(ref: ContextDefinition<T>): T;
-    /**
-     * Retrieve the context data for the specified context.
-     */
+    /** Retrieve the context data for the specified context. */
     get<T>(ref: ContextDefinition<T>): T | undefined;
@@ -32,5 +29,3 @@ /**
     set<T>(ref: ContextDefinition<T>, data: T): void;
-    /**
-     * Check if the context data for the specified context is set.
-     */
+    /** Check if the context data for the specified context is set. */
     has<T>(ref: ContextDefinition<T>): boolean;
@@ -40,7 +35,5 @@ }
     private attributeMap?;
-    static create(options?: RendererInternalOptions): ComponentApi;
+    static create(options?: RendererOptions): ComponentApi;
     static clone(original: ComponentApi): ComponentApi;
-    /**
-     * Access to the current context data.
-     */
+    /** Access to the current context data. */
     ctx: ContextAccessor;
@@ -55,4 +48,4 @@ private constructor();
     renderAsync(component: JSX.Element | Promise<JSX.Element>): Promise<string>;
-    renderToJson(component: JSX.Element): JsxteJson | string;
-    renderToJsonAsync(component: JSX.Element | Promise<JSX.Element>): Promise<JsxteJson | string>;
+    renderToJson(component: JSX.Element): string | number | bigint | import("../json-renderer/jsx-elem-to-json").JsxteJson;
+    renderToJsonAsync(component: JSX.Element | Promise<JSX.Element>): Promise<string | number | bigint | import("../json-renderer/jsx-elem-to-json").JsxteJson>;
 }
@@ -59,0 +52,0 @@ export declare class ContextDefinition<T> {

dist/types/express/index.d.ts

@@ -11,3 +11,5 @@ type ExpressApp = {
  */
-export declare const expressExtend: (app: ExpressApp) => void;
+export declare const expressExtend: (app: ExpressApp, opt?: {
+    syncOnly?: boolean;
+}) => void;
 export {};

dist/types/html-renderer/attribute-to-html-tag-string.d.ts

@@ -1,2 +0,1 @@
-import type { RendererHTMLAttributes } from "./types";
 export declare const attributeToHtmlTagString: ([key, value]: [
@@ -6,2 +5,2 @@ string,
 ]) => string;
-export declare const mapAttributesToHtmlTagString: (attributes: RendererHTMLAttributes) => string[];
+export declare const mapAttributesToHtmlTagString: (attributes: [string, any][]) => string;

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

@@ -1,8 +0,22 @@
-import { ComponentApi } from "../component-api/component-api";
-export type RendererInternalOptions = {
-    indent?: number;
-    currentIndent?: number;
-    attributeMap?: Record<string, string>;
-};
-export declare const jsxElemToHtmlSync: (element: JSX.Element, _componentApi?: ComponentApi, options?: RendererInternalOptions) => string;
-export declare const jsxElemToHtmlAsync: (element: JSX.Element, _componentApi?: ComponentApi, options?: RendererInternalOptions) => Promise<string>;
+import type { ComponentApi } from "../component-api/component-api";
+import { type ElementGenerator } from "../renderer/renderer";
+import type { HtmlRenderOptions } from "./render-to-html";
+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;
+}
+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 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 const jsxElemToHtmlAsync: (element: JSX.Element, componentApi?: ComponentApi, options?: HtmlRenderOptions) => Promise<string>;
+export {};

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

@@ -1,4 +0,4 @@
-type HtmlRenderOptions = {
-    indent?: number;
+export type HtmlRenderOptions = {
     attributeMap?: Record<string, string>;
+    compact?: boolean;
 };
@@ -16,2 +16,1 @@ /**
 export declare const renderToHtmlAsync: (component: JSX.Element | Promise<JSX.Element>, options?: HtmlRenderOptions) => Promise<string>;
-export {};

dist/types/index.d.ts

 import "./utilities/array-flat-polyfill";
 export * from "./express/index";
 export * from "./jsx/jsx.types";
-export { Interpolate, InterpolateTag, } from "./string-template-renderer/interpolate";
-export { DefaultTemplateArrayCache } from "./string-template-renderer/default-cache";
+export { defineContext } from "./component-api/component-api";
 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 { renderToStringTemplateTag } from "./string-template-renderer/render-to-string-template-tag";
-export { memo } from "./utilities/memo";
 export { createElement } from "./jsx/jsx-runtime";
 export { JsxteRenderError } from "./jsxte-render-error";
-export type { ContextDefinition, ComponentApi, } from "./component-api/component-api";
+export type { ElementGenerator, RendererOptions } from "./renderer/renderer";
+export { JsxteRenderer } from "./renderer/renderer";
+export { memo } from "./utilities/memo";
+export type { ComponentApi, ContextDefinition, } from "./component-api/component-api";
+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 { StringTemplateParserOptions } from "./string-template-renderer/render-to-string-template-tag";
+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";

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

@@ -1,11 +0,22 @@
-import { ComponentApi } from "../component-api/component-api";
-export type JsonRendererInternalOptions = {
-    attributeMap?: Record<string, string>;
-};
+import type { ComponentApi } from "../component-api/component-api";
+import { type ElementGenerator } from "../renderer/renderer";
+import type { JsonRenderOptions } from "./render-to-json";
 export type JsxteJson = {
     element: keyof JSX.IntrinsicElements | "";
     attributes: [attributeName: string, value?: string][];
-    children: Array<JsxteJson | string>;
+    children: Array<JsxteJson | number | bigint | string>;
 };
-export declare const jsxElemToJsonSync: (element: JSX.Element, _componentApi?: ComponentApi, options?: JsonRendererInternalOptions) => JsxteJson | string;
-export declare const jsxElemToJsonAsync: (element: JSX.Element, _componentApi?: ComponentApi, options?: JsonRendererInternalOptions) => Promise<JsxteJson | string>;
+export declare class JsonGenerator implements ElementGenerator<string | number | bigint | JsxteJson> {
+    createTextNode(text: string | number | bigint): string | number | bigint;
+    createElement(type: string, attributes: [attributeName: string, attributeValue: any][], children: (string | number | bigint | JsxteJson)[]): JsxteJson;
+    createFragment(children: (string | number | bigint | JsxteJson)[]): JsxteJson;
+}
+export declare const jsxElemToJsonSync: (element: JSX.Element, componentApi?: ComponentApi, options?: JsonRenderOptions) => JsxteJson | string | number | bigint;
+type AsyncResult = Promise<string | number | bigint | JsxteJson> | string | number | bigint | JsxteJson;
+export declare class AsyncJsonGenerator implements ElementGenerator<AsyncResult> {
+    createTextNode(text: string | number | bigint | JsxteJson): string | number | bigint | JsxteJson;
+    createElement(type: string, attributes: [attributeName: string, attributeValue: any][], children: AsyncResult[] | Promise<AsyncResult[]>): Promise<JsxteJson>;
+    createFragment(children: AsyncResult[] | Promise<AsyncResult[]>): Promise<JsxteJson>;
+}
+export declare const jsxElemToJsonAsync: (element: JSX.Element, componentApi?: ComponentApi, options?: JsonRenderOptions) => Promise<JsxteJson | string | number | bigint>;
+export {};

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

@@ -1,2 +0,2 @@
-type HtmlRenderOptions = {
+export type JsonRenderOptions = {
     attributeMap?: Record<string, string>;
@@ -8,3 +8,3 @@ };
  */
-export declare const renderToJson: (component: JSX.Element, options?: HtmlRenderOptions) => string | import("./jsx-elem-to-json").JsxteJson;
+export declare const renderToJson: (component: JSX.Element, options?: JsonRenderOptions) => string | number | bigint | import("./jsx-elem-to-json").JsxteJson;
 /**
@@ -14,3 +14,2 @@ * Renders the provided JSX component to a JSON structure. This function is
  */
-export declare const renderToJsonAsync: (component: JSX.Element, options?: HtmlRenderOptions) => Promise<string | import("./jsx-elem-to-json").JsxteJson>;
-export {};
+export declare const renderToJsonAsync: (component: JSX.Element, options?: JsonRenderOptions) => Promise<string | number | bigint | import("./jsx-elem-to-json").JsxteJson>;

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/base-html-tag-props.d.ts

 import type { ComponentApi } from "../component-api/component-api";
-import type { ErrorBoundaryElement } from "../error-boundary/error-boundary";
-import type { Rewrap } from "../html-renderer/types";
+type Rewrap<T extends object> = T extends infer OBJ ? {
+    [K in keyof OBJ]: OBJ[K] extends infer O ? O : never;
+} : never;
 export type AttributeBool = true | false | "true" | "false";
@@ -17,5 +18,15 @@ export type HTMLProps<T extends object = never> = Rewrap<ExtendBaseProps<[
         }
+        interface FunctionalComponent<P extends object = {}> {
+            (props: P, contextMap: ComponentApi): JSX.Element;
+        }
+        interface ClassComponent<P extends object = {}> {
+            new (props: P): {
+                props: P;
+                render(props: P, contextMap: ComponentApi): JSX.Element;
+                onError(error: unknown, originalProps: P, contextMap: ComponentApi): JSX.Element;
+            };
+        }
         type TagElement = {
             type: "tag";
-            tag: ((props: ElementProps, contextMap: ComponentApi) => JSX.Element) | ErrorBoundaryElement;
+            tag: FunctionalComponent<ElementProps> | ClassComponent<ElementProps> | string;
             props: ElementProps;
@@ -22,0 +33,0 @@ };

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 };

dist/types/utilities/get-component-name.d.ts

@@ -1,1 +0,1 @@
-export declare const getComponentName: (component: Function) => string;
+export declare const getComponentName: (element: JSXTE.TagElement) => string;

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.9",
+  "version": "3.1.10-canary-4a7246aa5726670c37ceab2a7b18e660f05db470.0",
   "description": "JSX-based html templating engine for browsers or Node environments.",
@@ -39,3 +39,5 @@ "license": "MIT",
     "test:tsc": "tsc --noEmit",
-    "test:jest": "jest --coverage"
+    "test:unit": "vitest run",
+    "test:fmt": "dprint check",
+    "fmt": "dprint fmt"
   },
@@ -51,19 +53,15 @@ "author": {
     "@ncpa0cpl/nodepack": "~2.3.0",
-    "@types/jest": "~29.5.7",
-    "@typescript-eslint/eslint-plugin": "~6.15.0",
-    "@typescript-eslint/parser": "~6.13.1",
+    "@types/node": "^20.10.6",
+    "@typescript-eslint/eslint-plugin": "~6.17.0",
+    "@typescript-eslint/parser": "~6.17.0",
     "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",
+    "eslint": "~8.56.0",
     "git-hook-tasks": "ncpa0cpl/git-hook-tasks",
     "husky": "~8.0.3",
-    "jest": "~29.7.0",
     "node-os-walk": "~1.0.2",
     "pr-changelog-gen": "~1.1.3",
-    "prettier": "~3.1.0",
-    "prettier-plugin-jsdoc": "~1.1.1",
-    "ts-jest": "~29.1.1",
-    "typescript": "latest"
+    "typescript": "latest",
+    "vitest": "^1.1.1"
   },
@@ -70,0 +68,0 @@ "packageManager": "yarn@1.22.19",

README.md

@@ -18,8 +18,7 @@ # JSX Template Engine
 6. [toHtmlTag symbol](#tohtmltag-symbol)
-7. [Extending the typings](#extending-the-typings)
+7. [JsxteRenderer](#jsxterenderer)
+8. [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. [Rendering to a string tag template](#rendering-to-a-string-tag-template)
-   1. [Example](#example-2)
+9. [Express JS View Engine](#express-js-view-engine)
 10. [Monkey-Patching type definitions](#monkey-patching-type-definitions)
@@ -62,3 +61,3 @@ 11. [Contributing](#contributing)
 ```tsx
-import { renderToHtml, createElement } from "jsxte";
+import { createElement, renderToHtml } from "jsxte";
 
@@ -287,2 +286,65 @@ const Header: JSXTE.Component<{ label: string }> = (props) => {
 
+## 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
@@ -310,3 +372,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>
 );
@@ -355,56 +418,2 @@ ```
 
-## Rendering to a string tag template
-
-A [string tag template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) is special type of function that can be used for custom parsing of template literals.
-
-JSXTE allows you to leverage any existing string tag templates but with a JSX syntax instead of a template literal.
-
-### Example
-
-```tsx
-// using template literal:
-import { html } from "some-library";
-const props = {
-  /* ... */
-};
-const result = html`<div class="${props.className}">
-  <h1>${props.header}</h1>
-</div>`;
-
-// using JSXTE:
-import { renderToStringTemplateTag } from "jsxte";
-import { html } from "some-library";
-const props = {
-  /* ... */
-};
-const result = renderToStringTemplateTag(
-  html,
-  <div class={props.className}>
-    <h1>{props.header}</h1>
-  </div>,
-);
-```
-
-If the string tag template function uses non standard html attribute names (ex. `className` instead of `class` or `@click` instead of `onclick`) you can map the attribute names render by this method by specifying mapping for those:
-
-```tsx
-const result = renderToStringTemplateTag(
-  html,
-  <div>
-    <button
-      class="my-class"
-      onclick={handler}
-    >
-      Click Me
-    </button>
-  </div>,
-  {
-    attributeMap: {
-      onclick: "@click",
-      class: "className",
-    },
-  },
-);
-```
-
 ## Monkey-Patching type definitions
@@ -411,0 +420,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

14

decreased by-22.22%

Number of lines in readme file

463

increased by1.98%

Worsened metrics

Total package byte prevSize

264903

decreased by-22.03%

Number of package files

307

decreased by-11.01%

Lines of code

6757

decreased by-20.92%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

7

increased by40%

No dependency changes