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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pronto-tools-and-more/components-renderer",
-  "version": "5.0.2",
+  "version": "5.1.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,28 @@
+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] || "";
+    return CreateFakeSection.createFakeSection([
+      {
+        type: "html",
+        tag: element.tag,
+        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

@@ -1,7 +1,9 @@
 import * as Assert from "../Assert/Assert.js";
 import * as CreateViews from "../CreateViews/CreateViews.js";
+import * as FakeNode from "../FakeNode/FakeNode.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 +14,60 @@ 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);
+  console.log(JSON.stringify(views, null, 2));
+  // console.log(JSON.stringify(rendered, null, 2));
+  if (Math) {
+    return rendered;
+  }
+  const newViews = [
+    {
+      content: [
+        {
+          type: "section",
+          content: [
+            FakeNode.fakeNode,
+            {
+              type: "html",
+              tag: "div",
+              className: "outer",
+              content: "",
+            },
+            {
+              type: "html",
+              tag: "div",
+              className: "inner",
+              content: "child",
+            },
+            // {
+            //   type: "section",
+            //   content: [
+            //     FakeNode.fakeNode,
+            //     {
+            //       type: "html",
+            //       tag: "p",
+            //       content: "inner",
+            //     },
+            //   ],
+            // },
+          ],
+        },
+        // {
+        //   type: "section",
+        //   content: [
+        //     FakeNode.fakeNode,
+        //     {
+        //       type: "html",
+        //       tag: "div",
+        //       content: "23",
+        //     },
+        //   ],
+        // },
+      ],
+      name: "test",
+      path: "test",
+      appBar: "login",
+    },
+  ];
+  return newViews;
 };