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

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@pronto-tools-and-more/components-renderer",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "",
   "main": "src/componentsRendererMain.js",
   "type": "module",
   "scripts": {
-    "test": "echo ok",
+    "test": "node --unhandled-rejections=warn --experimental-vm-modules ./node_modules/jest/bin/jest.js --detectOpenHandles --forceExit",
+    "test:watch": "node --unhandled-rejections=warn --experimental-vm-modules ./node_modules/jest/bin/jest.js --watch",
     "type-check": "tsc"
   },
   "keywords": [],
@@ -19,6 +20,7 @@
     "@swc-node/register": "^1.10.9"
   },
   "devDependencies": {
-    "@types/node": "^22.5.0"
+    "@types/node": "^22.5.0",
+    "jest": "^29.7.0"
   }
 }

package/src/parts/CreateElement/CreateElement.js

@@ -0,0 +1,7 @@
+export const createElement = (tag, props, ...children) => {
+  return {
+    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/CreateViews/CreateViews.js

@@ -0,0 +1,19 @@
+import { VError } from "@lvce-editor/verror";
+import * as React from "../React/React.js";
+
+const createView = (value) => {
+  try {
+    return {
+      path: value.path,
+      name: value.name,
+      content: [value.component()],
+    };
+  } catch (error) {
+    throw new VError(error, `Failed to create view`);
+  }
+};
+
+export const createViews = (values) => {
+  globalThis.React = React.React;
+  return values.map(createView);
+};

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/IsHtml/IsHtml.js

@@ -0,0 +1,5 @@
+const htmlTags = ["h1", "h2", "div", "section"];
+
+export const isHtml = (tag) => {
+  return htmlTags.includes(tag);
+};

package/src/parts/LoadSwc/LoadSwc.js

@@ -1,7 +1,12 @@
 import { VError } from "@lvce-editor/verror";
+import * as Assert from "../Assert/Assert.js";
 
-export const loadSwc = async (swcNodePath) => {
+export const loadSwc = async (swcNodePath, tsconfigPath) => {
   try {
+    Assert.string(swcNodePath);
+    Assert.string(tsconfigPath);
+    // @ts-ignore
+    process.env.TS_NODE_PROJECT = tsconfigPath;
     await import(swcNodePath);
   } catch (error) {
     throw new VError(error, `Failed to load swc`);

package/src/parts/React/React.js

@@ -0,0 +1,5 @@
+import * as CreateElement from "../CreateElement/CreateElement.js";
+
+export const React = {
+  createElement: CreateElement.createElement,
+};

package/src/parts/RenderElement/RenderElement.js

@@ -0,0 +1,28 @@
+import * as CreateFakeSection from "../CreateFakeSection/CreateFakeSection.js";
+import * as HasComplexChildren from "../HasComplexChildren/HasComplexChildren.js";
+
+export const renderElement = (element) => {
+  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,22 +1,73 @@
+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) => {
-  await LoadSwc.loadSwc(SwcNodePath.swcNodePath);
+export const renderViews = async (componentsPathMain, tsconfigPath) => {
+  Assert.string(componentsPathMain);
+  Assert.string(tsconfigPath);
+  await LoadSwc.loadSwc(SwcNodePath.swcNodePath, tsconfigPath);
   const module = await LoadRoutes.loadRoutes(componentsPathMain);
-  console.log(module);
-  // TODO
-  // 1. enable swc loader
-  // 2. load components url
-  // 3. render views to json
-  // 4. render json to views.json
-  return [
+  const values = Object.values(module);
+  // TODO return views string instead of json for faster performance?
+  const views = CreateViews.createViews(values);
+  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 = [
     {
-      path: "/test",
+      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;
 };
-
-renderViews("/home/simon/.cache/repos/elternsein/src/components/src/main.ts");