@pronto-tools-and-more/components-renderer 5.0.2 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pronto-tools-and-more/components-renderer",
-  "version": "5.0.2",
+  "version": "5.2.0",
   "description": "",
   "main": "src/componentsRendererMain.js",
   "type": "module",

package/src/parts/CreateElement/CreateElement.js

@@ -1,20 +1,5 @@
-import * as IsHtml from "../IsHtml/IsHtml.js";
-
-export const createElement = (tag, props, children) => {
-  if (IsHtml.isHtml(tag)) {
-    return {
-      type: "section",
-      content: [
-        {
-          type: "html",
-          tag: "div",
-          content: "abc",
-        },
-      ],
-    };
-  }
+export const createElement = (tag, props, ...children) => {
   return {
-    type: "section",
     tag,
     props,
     children,

package/src/parts/CreateFakeSection/CreateFakeSection.js

@@ -0,0 +1,8 @@
+import * as FakeNode from "../FakeNode/FakeNode.js";
+
+export const createFakeSection = (children) => {
+  return {
+    type: "section",
+    content: [FakeNode.fakeNode, ...children],
+  };
+};

package/src/parts/FakeNode/FakeNode.js

@@ -0,0 +1,6 @@
+// fake node (to allow using normal html)
+export const fakeNode = {
+  type: "html",
+  tag: "div",
+  content: '<img src="x" onerror="globalThis.fixRender(this)" />',
+};

package/src/parts/HasComplexChildren/HasComplexChildren.js

@@ -0,0 +1,7 @@
+const isComplex = (child) => {
+  return typeof child !== "string";
+};
+
+export const hasComplexChildren = (element) => {
+  return element.children.some(isComplex);
+};

package/src/parts/RenderElement/RenderElement.js

@@ -1,4 +1,33 @@
+import * as CreateFakeSection from "../CreateFakeSection/CreateFakeSection.js";
+import * as HasComplexChildren from "../HasComplexChildren/HasComplexChildren.js";
+
 export const renderElement = (element) => {
-  if (element.isReactComponent) {
+  if (typeof element === "string") {
+    return {
+      type: "html",
+      tag: "div",
+      content: element,
+    };
   }
+  if (element.tag) {
+    const hasComplexChildren = HasComplexChildren.hasComplexChildren(element);
+    const renderedChildren = hasComplexChildren
+      ? element.children.map(renderElement)
+      : [];
+    const content = hasComplexChildren ? "" : element.children[0] || "";
+    const className =
+      element.props && element.props.className
+        ? element.props.className
+        : undefined;
+    return CreateFakeSection.createFakeSection([
+      {
+        type: "html",
+        tag: element.tag,
+        class: className,
+        content,
+      },
+      ...renderedChildren,
+    ]);
+  }
+  return {};
 };

package/src/parts/RenderView/RenderView.js

@@ -0,0 +1,9 @@
+import * as RenderElement from "../RenderElement/RenderElement.js";
+
+export const renderView = (view) => {
+  return {
+    path: view.path,
+    name: view.name,
+    content: view.content.map(RenderElement.renderElement),
+  };
+};

package/src/parts/RenderViews/RenderViews.js

@@ -2,6 +2,7 @@ import * as Assert from "../Assert/Assert.js";
 import * as CreateViews from "../CreateViews/CreateViews.js";
 import * as LoadRoutes from "../LoadRoutes/LoadRoutes.js";
 import * as LoadSwc from "../LoadSwc/LoadSwc.js";
+import * as RenderView from "../RenderView/RenderView.js";
 import * as SwcNodePath from "../SwcNodePath/SwcNodePath.js";
 
 export const renderViews = async (componentsPathMain, tsconfigPath) => {
@@ -12,5 +13,6 @@ export const renderViews = async (componentsPathMain, tsconfigPath) => {
   const values = Object.values(module);
   // TODO return views string instead of json for faster performance?
   const views = CreateViews.createViews(values);
-  return views;
+  const rendered = views.map(RenderView.renderView);
+  return rendered;
 };