@pronto-tools-and-more/pronto 12.28.0 → 12.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pronto-tools-and-more/pronto",
-  "version": "12.28.0",
+  "version": "12.29.0",
   "description": "",
   "main": "src/main.js",
   "type": "module",
@@ -17,16 +17,16 @@
     "@lvce-editor/ipc": "^13.7.0",
     "@lvce-editor/json-rpc": "^5.4.0",
     "@lvce-editor/verror": "^1.6.0",
-    "@pronto-tools-and-more/file-watcher": "12.28.0",
-    "@pronto-tools-and-more/files": "12.28.0",
-    "@pronto-tools-and-more/network-process": "12.28.0",
-    "@pronto-tools-and-more/sass-compiler": "12.28.0",
-    "@pronto-tools-and-more/components-renderer": "12.28.0",
-    "@pronto-tools-and-more/components": "12.28.0",
-    "@pronto-tools-and-more/schema-process": "12.28.0",
-    "@pronto-tools-and-more/diff-process": "12.28.0",
-    "@pronto-tools-and-more/type-checker": "12.28.0",
-    "@pronto-tools-and-more/custom-js-functions": "12.28.0",
+    "@pronto-tools-and-more/file-watcher": "12.29.0",
+    "@pronto-tools-and-more/files": "12.29.0",
+    "@pronto-tools-and-more/network-process": "12.29.0",
+    "@pronto-tools-and-more/sass-compiler": "12.29.0",
+    "@pronto-tools-and-more/components-renderer": "12.29.0",
+    "@pronto-tools-and-more/components": "12.29.0",
+    "@pronto-tools-and-more/schema-process": "12.29.0",
+    "@pronto-tools-and-more/diff-process": "12.29.0",
+    "@pronto-tools-and-more/type-checker": "12.29.0",
+    "@pronto-tools-and-more/custom-js-functions": "12.29.0",
     "execa": "^9.5.2",
     "express": "^4.21.2"
   },

package/src/parts/App/App.js

@@ -2,6 +2,7 @@ import express from "express";
 import { join } from "node:path";
 import * as FilesPath from "../FilesPath/FilesPath.js";
 import * as HandleApi from "../HandleApi/HandleApi.js";
+import * as HandleCommonJs from "../HandleCommonJs/HandleCommonJs.js";
 import * as HandleConfigLoader from "../HandleConfigLoader/HandleConfigLoader.js";
 import * as HandleCss from "../HandleCss/HandleCss.js";
 import * as HandleCustomServer from "../HandleCustomServer/HandleCustomServer.js";
@@ -31,6 +32,7 @@ export const create = ({
   injectCustomJs,
   shimConfigLoader,
   apiUrl,
+  supportNormalHtmlElements,
 }) => {
   const app = express();
   const storeFrontPath = join(root, "src", "default", "storefront");
@@ -68,6 +70,17 @@ export const create = ({
       mode,
     })
   );
+  if (supportNormalHtmlElements) {
+    app.get(
+      "/modules/common.js",
+      HandleCommonJs.handleCommonJs({
+        storeFrontPath,
+        filesPath: FilesPath.filesPath,
+        mode,
+      })
+    );
+  }
+
   app.get(
     "/assets/views.json",
     HandleViews.handleViews({

package/src/parts/Config/Config.js

@@ -118,5 +118,8 @@ export const injectCustomJs = config.injectCustomJs || false;
 
 export const shimConfigLoader = config.shimConfigLoader || false;
 
+export const supportNormalHtmlElements =
+  config.supportNormalHtmlElements || false;
+
 export const apiUrl =
   process.env.API_URL || "https://catalog.purplemanager.com/graphql";

package/src/parts/CreateServer/CreateServer.js

@@ -30,6 +30,7 @@ export const createServer = async (root, errorColor) => {
     shimConfigLoader: Config.shimConfigLoader,
     releaseAppId: Config.releaseAppId,
     apiUrl: Config.apiUrl,
+    supportNormalHtmlElements: Config.supportNormalHtmlElements,
   });
   const server = http.createServer(app);
   const webSocketServer = new ws.WebSocketServer({

package/src/parts/GetBasePath/GetBasePath.js

@@ -0,0 +1,8 @@
+import { join } from "node:path";
+
+export const getBasePath = (mode, storeFrontPath, filesPath) => {
+  if (mode === "slim") {
+    return join(filesPath, "framework", "src", "default", "storefront");
+  }
+  return storeFrontPath;
+};

package/src/parts/GetCommonJsSnippet/GetCommonJsSnippet.js

@@ -0,0 +1,13 @@
+import { join } from "path";
+import * as FilesPath from "../FilesPath/FilesPath.js";
+import { readFile } from "fs/promises";
+
+export const getCommonJsSnippet = async () => {
+  const snippetPath = join(
+    FilesPath.filesPath,
+    "assets",
+    "hack-normal-html-elements.js"
+  );
+  const snippetContent = await readFile(snippetPath, "utf8");
+  return snippetContent;
+};

package/src/parts/GetNewCommonJsContent/GetNewCommonJsContent.js

@@ -0,0 +1,115 @@
+import * as ReplaceNeedle from "../ReplaceNeedle/ReplaceNeedle.js";
+
+const RE_THIS = /(\w+)(\s*)=(\s*)(this)/;
+
+// monkeypatch common.js to support normal html elements
+export const getNewCommonJsContent = ({ content, normalHtmlSnippet }) => {
+  const needle0 = '"use strict"';
+  const needle1 = `tag:"div"`;
+  const needle2 = `tag: "div"`;
+  const needle3 = "ngOnInit(){";
+  const needle4 = "ngOnInit() {";
+  const needle5 = "onConfigChanges(){";
+  const needle6 = "onConfigChanges() {";
+  const needle7 = "=this";
+  const needle8 = "= this";
+  const needle9 = "changeDetectorRef.markForCheck()";
+
+  let newContent = content;
+
+  const indexStrict = newContent.indexOf(needle0);
+
+  if (indexStrict === -1) {
+    throw new Error("needle not found");
+  }
+
+  const occurrence0 = '"use strict"';
+  const replacement0 = normalHtmlSnippet;
+  newContent = ReplaceNeedle.replaceNeedle(
+    newContent,
+    indexStrict,
+    occurrence0,
+    replacement0
+  );
+
+  const needles = [needle1, needle2];
+  let index = -1;
+  for (const needle of needles) {
+    index = newContent.indexOf(needle);
+    if (index !== -1) {
+      index += needle.length;
+      break;
+    }
+  }
+  if (index === -1) {
+    throw new Error("no needle found (1)");
+  }
+
+  let initIndex = newContent.indexOf(needle3, index);
+  if (initIndex === -1) {
+    initIndex = newContent.indexOf(needle4, index);
+  }
+  if (initIndex === -1) {
+    throw new Error("no needle found (2)");
+  }
+  let this1Index = newContent.indexOf(needle7, initIndex);
+  if (this1Index === -1) {
+    this1Index = newContent.indexOf(needle8, initIndex);
+  }
+
+  if (this1Index === -1) {
+    throw new Error("no needle found (3)");
+  }
+
+  const occurence1 = "this";
+  const replacement1 = `this;globalThis.HACK__NORMAL_HTML_ELEMENTS_CHECK(this);`;
+
+  newContent = ReplaceNeedle.replaceNeedle(
+    newContent,
+    this1Index,
+    occurence1,
+    replacement1
+  );
+  let configIndex = newContent.indexOf(needle5, this1Index);
+  if (configIndex === -1) {
+    configIndex = newContent.indexOf(needle6, this1Index);
+  }
+  if (configIndex === -1) {
+    throw new Error("no needle found (4)");
+  }
+  let this2Index = newContent.indexOf(needle7, configIndex);
+  if (this2Index === -1) {
+    this2Index = newContent.indexOf(needle8, configIndex);
+  }
+  if (this2Index === -1) {
+    throw new Error("no needle found (5)");
+  }
+  const match = newContent.slice(configIndex).match(RE_THIS);
+  if (!match) {
+    throw new Error("match not found (6)");
+  }
+  const varName = match[0];
+  const occurrence2 = "this";
+  const replacement2 = `this;globalThis.HACK__NORMAL_HTML_ELEMENTS_CHECK(this);`;
+
+  newContent = ReplaceNeedle.replaceNeedle(
+    newContent,
+    this2Index,
+    occurrence2,
+    replacement2
+  );
+
+  const checkIndex = newContent.indexOf(needle9, configIndex);
+  if (checkIndex === -1) {
+    throw new Error("no needle found (7)");
+  }
+  const occurrence3 = "changeDetectorRef.markForCheck()";
+  const replacement3 = `changeDetectorRef.markForCheck();globalThis.HACK__NORMAL_HTML_ELEMENTS_RENDER(${varName});`;
+  newContent = ReplaceNeedle.replaceNeedle(
+    newContent,
+    checkIndex,
+    occurrence3,
+    replacement3
+  );
+  return newContent;
+};

package/src/parts/HandleCommonJs/HandleCommonJs.js

@@ -0,0 +1,21 @@
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import * as GetBasePath from "../GetBasePath/GetBasePath.js";
+import * as GetCommonJsSnippet from "../GetCommonJsSnippet/GetCommonJsSnippet.js";
+import * as GetNewCommonJsContent from "../GetNewCommonJsContent/GetNewCommonJsContent.js";
+
+export const handleCommonJs =
+  ({ storeFrontPath, filesPath, mode }) =>
+  async (req, res) => {
+    const basePath = GetBasePath.getBasePath(mode, storeFrontPath, filesPath);
+    // TODO use etag
+    const commonPath = join(basePath, "modules", "common.js");
+    const content = await readFile(commonPath, "utf8");
+    const normalHtmlSnippet = await GetCommonJsSnippet.getCommonJsSnippet();
+    const newContent = GetNewCommonJsContent.getNewCommonJsContent({
+      content,
+      normalHtmlSnippet,
+    });
+    res.setHeader("content-type", "application/javascript");
+    res.end(newContent);
+  };

package/src/parts/HandleMainJs/HandleMainJs.js

@@ -1,15 +1,9 @@
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import * as GetNewMainJsContent from "../GetNewMainJsContent/GetNewMainJsContent.js";
+import * as GetBasePath from "../GetBasePath/GetBasePath.js";
 import * as GetPdfViewerSnippet from "../GetPdfViewerSnippet/GetPdfViewerSnippet.js";
 
-const getBasePath = (mode, storeFrontPath, filesPath) => {
-  if (mode === "slim") {
-    return join(filesPath, "framework", "src", "default", "storefront");
-  }
-  return storeFrontPath;
-};
-
 export const handleMainJs =
   ({
     storeFrontPath,
@@ -22,7 +16,7 @@ export const handleMainJs =
     mode,
   }) =>
   async (req, res) => {
-    const basePath = getBasePath(mode, storeFrontPath, filesPath);
+    const basePath = GetBasePath.getBasePath(mode, storeFrontPath, filesPath);
     // TODO use etag
     const mainPath = join(basePath, "modules", "main.js");
     const content = await readFile(mainPath, "utf8");

package/src/parts/PushCodeTo/PushCodeTo.js

@@ -9,7 +9,7 @@ import * as GetZipUploadMessage from "../GetZipUploadMessage/GetZipUploadMessage
 import * as NetworkProcess from "../NetworkProcess/NetworkProcess.js";
 import * as UploadZip from "../UploadZip/UploadZip.js";
 
-const maxRetries = 20;
+const maxRetries = 50;
 const waitBetweenRetries = 60_000;
 
 export const pushCodeTo = async ({ preview, appId }) => {

package/src/parts/ReplaceNeedle/ReplaceNeedle.js

@@ -0,0 +1,10 @@
+export const replaceNeedle = (content, startIndex, needle, replacement) => {
+  const index = content.indexOf(needle, startIndex);
+  if (index === -1) {
+    throw new Error(`needle replacement: needle not found ${needle}`);
+  }
+  const pre = content.slice(0, index);
+  const post = content.slice(index);
+  const newContent = pre + replacement + post.slice(needle.length);
+  return newContent;
+};

package/src/parts/Version/Version.js

@@ -1 +1 @@
-export const version = '12.28.0'
+export const version = '12.29.0'