@ramesesinc/platform-core 0.1.3 → 0.1.4

package/dist/components/common/UIComponent.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { compile } from "expression-eval";
 import { useEffect, useState } from "react";
 import { usePageContext } from "../../core/PageContext";
 const UIComponent = (props) => {
@@ -20,7 +21,8 @@ const UIComponent = (props) => {
                 return JSON.stringify(val !== null && val !== void 0 ? val : null);
             });
             // eslint-disable-next-line no-new-func
-            return Boolean(new Function(`return (${jsExpr})`)());
+            // return Boolean(new Function(`return (${jsExpr})`)());
+            return Boolean(compile(jsExpr)(context));
         }
         catch (e) {
             console.warn("visibleWhen eval error:", e);

package/dist/components/common/UIComponent.tsx

@@ -1,3 +1,4 @@
+import { compile } from "expression-eval";
 import { useEffect, useState } from "react";
 import { usePageContext } from "../../core/PageContext";
 
@@ -28,7 +29,8 @@ const UIComponent = (props: UIComponentProps) => {
         return JSON.stringify(val ?? null);
       });
       // eslint-disable-next-line no-new-func
-      return Boolean(new Function(`return (${jsExpr})`)());
+      // return Boolean(new Function(`return (${jsExpr})`)());
+      return Boolean(compile(jsExpr)(context));
     } catch (e) {
       console.warn("visibleWhen eval error:", e);
       return true;

package/dist/components/output/Label.d.ts

@@ -1,5 +1,4 @@
 type LabelProps = {
-    label?: string;
     depends?: string;
     expr?: string;
     html?: boolean;

package/dist/components/output/Label.tsx

@@ -5,7 +5,6 @@ import { render } from "../../lib/utils/ExprUtil";
 import UIComponent from "../common/UIComponent";
 
 type LabelProps = {
-  label?: string;
   depends?: string;
   expr?: string;
   html?: boolean;

package/dist/components/view/HtmlForm.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DynamicComponent } from "../../core/DynamicComponent";
+import { localAPI } from "@ramesesinc/lib/local-api";
+import React, { useEffect, useMemo, useState } from "react";
 import { useApp } from "../../core/AppContext";
+import { DynamicComponent } from "../../core/DynamicComponent";
 import useDependHandler from "../../core/UIDependHandler";
-import { localAPI } from "@ramesesinc/lib/local-api";
-import { useEffect, useMemo, useState } from "react";
 import UIComponent from "../common/UIComponent";
-import React from "react";
 // ─────────────────────────────────────────────────────────────────────────────
 // Attr Parser
 // Handles both strict JSON {"key":"value"} and JS object literals {key: "value"}
@@ -19,7 +18,9 @@ function parseAttr(attrStr) {
     catch (_a) {
         try {
             // eslint-disable-next-line no-new-func
-            return new Function(`"use strict"; return (${attrStr})`)();
+            // return new Function(`"use strict"; return (${attrStr})`)();
+            const normalized = attrStr.replace(/([{,]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)(\s*:)/g, '$1"$2"$3').replace(/'([^'\\]*(\\.[^'\\]*)*)'/g, '"$1"');
+            return JSON.parse(normalized);
         }
         catch (_b) {
             console.warn("HtmlForm: could not parse attr →", attrStr);
@@ -59,9 +60,7 @@ function domAttrsToProps(el) {
         if (["component", "attr"].includes(attr.name))
             continue;
         const reactName = (_a = ATTR_MAP[attr.name]) !== null && _a !== void 0 ? _a : attr.name;
-        props[reactName] = attr.name === "style"
-            ? styleStringToObject(attr.value)
-            : attr.value;
+        props[reactName] = attr.name === "style" ? styleStringToObject(attr.value) : attr.value;
     }
     return props;
 }
@@ -95,16 +94,14 @@ function walkNode(node, parentTag) {
         if (tag === "span" && componentName) {
             const attr = parseAttr(el.getAttribute("attr"));
             const config = { component: componentName, attr };
-            return (_jsx(DynamicComponent, { config: config }, nextKey()));
+            return _jsx(DynamicComponent, { config: config }, nextKey());
         }
         // ── Regular element → recurse ──────────────────────────────────────────
         const props = Object.assign(Object.assign({}, domAttrsToProps(el)), { key: nextKey() });
         const children = Array.from(el.childNodes)
             .map((child) => walkNode(child, tag)) // pass current tag as parentTag
             .filter((n) => n !== null && n !== undefined);
-        return children.length > 0
-            ? React.createElement(tag, props, ...children)
-            : React.createElement(tag, props);
+        return children.length > 0 ? React.createElement(tag, props, ...children) : React.createElement(tag, props);
     }
     return null;
 }

package/dist/components/view/HtmlForm.tsx

@@ -1,10 +1,9 @@
-import { DynamicComponent } from "../../core/DynamicComponent";
+import { localAPI } from "@ramesesinc/lib/local-api";
+import React, { useEffect, useMemo, useState } from "react";
 import { useApp } from "../../core/AppContext";
+import { DynamicComponent } from "../../core/DynamicComponent";
 import useDependHandler from "../../core/UIDependHandler";
-import { localAPI } from "@ramesesinc/lib/local-api";
-import { useEffect, useMemo, useState } from "react";
 import UIComponent from "../common/UIComponent";
-import React from "react";
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -33,7 +32,9 @@ function parseAttr(attrStr: string | null): any {
   } catch {
     try {
       // eslint-disable-next-line no-new-func
-      return new Function(`"use strict"; return (${attrStr})`)();
+      // return new Function(`"use strict"; return (${attrStr})`)();
+      const normalized = attrStr.replace(/([{,]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)(\s*:)/g, '$1"$2"$3').replace(/'([^'\\]*(\\.[^'\\]*)*)'/g, '"$1"');
+      return JSON.parse(normalized);
     } catch {
       console.warn("HtmlForm: could not parse attr →", attrStr);
       return {};
@@ -74,9 +75,7 @@ function domAttrsToProps(el: Element): Record<string, any> {
   for (const attr of Array.from(el.attributes)) {
     if (["component", "attr"].includes(attr.name)) continue;
     const reactName = ATTR_MAP[attr.name] ?? attr.name;
-    props[reactName] = attr.name === "style"
-      ? styleStringToObject(attr.value)
-      : attr.value;
+    props[reactName] = attr.name === "style" ? styleStringToObject(attr.value) : attr.value;
   }
   return props;
 }
@@ -116,23 +115,16 @@ function walkNode(node: ChildNode, parentTag?: string): React.ReactNode {
     if (tag === "span" && componentName) {
       const attr: any = parseAttr(el.getAttribute("attr"));
       const config: SentinelConfig = { component: componentName, attr };
-      return (
-        <DynamicComponent
-          key={nextKey()}
-          config={config}
-        />
-      );
+      return <DynamicComponent key={nextKey()} config={config} />;
     }
 
     // ── Regular element → recurse ──────────────────────────────────────────
     const props = { ...domAttrsToProps(el), key: nextKey() };
     const children: React.ReactNode[] = Array.from(el.childNodes)
-      .map((child) => walkNode(child, tag))  // pass current tag as parentTag
+      .map((child) => walkNode(child, tag)) // pass current tag as parentTag
       .filter((n) => n !== null && n !== undefined);
 
-    return children.length > 0
-      ? React.createElement(tag, props, ...children)
-      : React.createElement(tag, props);
+    return children.length > 0 ? React.createElement(tag, props, ...children) : React.createElement(tag, props);
   }
 
   return null;
@@ -176,11 +168,9 @@ const HtmlForm = (props: HtmlFormProps) => {
 
   return (
     <UIComponent {...(props ?? {})}>
-      <div className="h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto">
-        {reactTree}
-      </div>
+      <div className="h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto">{reactTree}</div>
     </UIComponent>
   );
 };
 
-export default HtmlForm;
+export default HtmlForm;

package/dist/components/view/HtmlView.js

@@ -8,37 +8,26 @@ import { render } from "../../lib/utils/ExprUtil";
 import UIComponent from "../common/UIComponent";
 const Html = (props) => {
     const { depends, expr, templateid } = props !== null && props !== void 0 ? props : {};
-    const [htmlTemplate, setHtmlTemplate] = useState(""); // Store the raw template
-    const [renderedHtml, setRenderedHtml] = useState(""); // Store the rendered HTML
-    const [resData, setResData] = useState({});
+    const [htmlTemplate, setHtmlTemplate] = useState(""); // raw template
+    const [renderedHtml, setRenderedHtml] = useState(""); // rendered output
     const pageContext = usePageContext();
     const binding = pageContext === null || pageContext === void 0 ? void 0 : pageContext.binding;
     const { tenant, module } = useApp();
-    const loadHtmlContent = async (tempid) => {
+    // ← single render function used everywhere
+    const renderTemplate = (template) => {
         var _a;
+        if (!template)
+            return "";
         try {
-            const htmlContent = await localAPI.useMgmt(tenant, module).get("html_templates", tempid);
-            if (htmlContent != null) {
-                // Store the raw template
-                setHtmlTemplate(htmlContent.htmlCode);
-                // Fetch data from API
-                const data = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()) !== null && _a !== void 0 ? _a : {};
-                // Render the template with the data
-                const rendered = render(htmlContent.htmlCode, data);
-                setRenderedHtml(rendered);
-            }
-            else {
-                setHtmlTemplate("");
-                setRenderedHtml("");
-            }
+            const data = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()) !== null && _a !== void 0 ? _a : {};
+            return render(template, data);
         }
         catch (error) {
-            console.error("Error loading HTML template:", error);
-            setHtmlTemplate("");
-            setRenderedHtml("");
+            console.error("Template render error:", error);
+            return template;
         }
     };
-    // Render the expression using ExprUtil
+    // ← single expression render
     const renderExpression = (expression) => {
         var _a;
         if (!expression)
@@ -52,34 +41,46 @@ const Html = (props) => {
             return expression;
         }
     };
-    const initialValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
-    const [value, setValue] = useState(initialValue);
-    const onRefresh = () => {
-        const newValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
-        setValue(newValue);
-        // Re-render the HTML template if data changes
-        if (htmlTemplate && resData) {
-            const rendered = render(htmlTemplate, resData);
-            setRenderedHtml(rendered);
-        }
-    };
-    useDependHandler({ name: depends, onRefresh });
+    // ← load template only once when templateid changes
     useEffect(() => {
-        if (templateid != null && templateid.trim() !== "") {
-            loadHtmlContent(templateid);
-        }
+        if (templateid == null || templateid.trim() === "")
+            return;
+        const loadHtmlContent = async () => {
+            try {
+                const htmlContent = await localAPI.useMgmt(tenant, module).get("html_templates", templateid);
+                if (htmlContent != null) {
+                    setHtmlTemplate(htmlContent.htmlCode); // ← just store raw template
+                }
+                else {
+                    setHtmlTemplate("");
+                }
+            }
+            catch (error) {
+                console.error("Error loading HTML template:", error);
+                setHtmlTemplate("");
+            }
+        };
+        loadHtmlContent();
     }, [templateid]);
+    // ← re-render whenever template OR binding data changes
     useEffect(() => {
-        const newValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
-        setValue(newValue);
-    }, [binding === null || binding === void 0 ? void 0 : binding.raw, expr]);
-    // Re-render template when data changes
-    useEffect(() => {
-        if (htmlTemplate && resData && Object.keys(resData).length > 0) {
-            const rendered = render(htmlTemplate, resData);
-            setRenderedHtml(rendered);
+        if (htmlTemplate) {
+            setRenderedHtml(renderTemplate(htmlTemplate));
         }
-    }, [resData, htmlTemplate]);
+        else if (expr) {
+            setRenderedHtml(renderExpression(expr));
+        }
+    }, [htmlTemplate, binding === null || binding === void 0 ? void 0 : binding.raw]); // ← binding.raw triggers when data changes
+    // ← onRefresh called when depends changes
+    const onRefresh = () => {
+        if (htmlTemplate) {
+            setRenderedHtml(renderTemplate(htmlTemplate));
+        }
+        else if (expr) {
+            setRenderedHtml(renderExpression(expr));
+        }
+    };
+    useDependHandler({ name: depends, onRefresh });
     return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsx("div", { className: "h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto", dangerouslySetInnerHTML: { __html: renderedHtml } }) })));
 };
 export default Html;

package/dist/components/view/HtmlView.tsx

@@ -16,39 +16,26 @@ type HtmlLabelProps = {
 
 const Html = (props: HtmlLabelProps) => {
   const { depends, expr, templateid } = props ?? {};
-  const [htmlTemplate, setHtmlTemplate] = useState(""); // Store the raw template
-  const [renderedHtml, setRenderedHtml] = useState(""); // Store the rendered HTML
-  const [resData, setResData] = useState<Record<string, any>>({});
+
+  const [htmlTemplate, setHtmlTemplate] = useState(""); // raw template
+  const [renderedHtml, setRenderedHtml] = useState(""); // rendered output
   const pageContext = usePageContext();
   const binding = pageContext?.binding;
   const { tenant, module } = useApp();
 
-  const loadHtmlContent = async (tempid: string) => {
+  // ← single render function used everywhere
+  const renderTemplate = (template: string) => {
+    if (!template) return "";
     try {
-      const htmlContent = await localAPI.useMgmt(tenant!, module!).get("html_templates", tempid);
-
-      if (htmlContent != null) {
-        // Store the raw template
-        setHtmlTemplate(htmlContent.htmlCode);
-
-        // Fetch data from API
-        const data = pageContext?.getAllData() ?? {};
-
-        // Render the template with the data
-        const rendered = render(htmlContent.htmlCode, data);
-        setRenderedHtml(rendered);
-      } else {
-        setHtmlTemplate("");
-        setRenderedHtml("");
-      }
+      const data = pageContext?.getAllData() ?? {};
+      return render(template, data);
     } catch (error) {
-      console.error("Error loading HTML template:", error);
-      setHtmlTemplate("");
-      setRenderedHtml("");
+      console.error("Template render error:", error);
+      return template;
     }
   };
 
-  // Render the expression using ExprUtil
+  // ← single expression render
   const renderExpression = (expression: string) => {
     if (!expression) return "";
     try {
@@ -60,52 +47,49 @@ const Html = (props: HtmlLabelProps) => {
     }
   };
 
-  const initialValue = renderExpression(expr ?? "");
-  const [value, setValue] = useState(initialValue);
-
-  const onRefresh = () => {
-    const newValue = renderExpression(expr ?? "");
-    setValue(newValue);
-
-    // Re-render the HTML template if data changes
-    if (htmlTemplate && resData) {
-      const rendered = render(htmlTemplate, resData);
-      setRenderedHtml(rendered);
-    }
-  };
-
-  useDependHandler({ name: depends, onRefresh });
-
+  // ← load template only once when templateid changes
   useEffect(() => {
-    if (templateid != null && templateid.trim() !== "") {
-      loadHtmlContent(templateid);
-    }
+    if (templateid == null || templateid.trim() === "") return;
+
+    const loadHtmlContent = async () => {
+      try {
+        const htmlContent = await localAPI.useMgmt(tenant!, module!).get("html_templates", templateid);
+        if (htmlContent != null) {
+          setHtmlTemplate(htmlContent.htmlCode); // ← just store raw template
+        } else {
+          setHtmlTemplate("");
+        }
+      } catch (error) {
+        console.error("Error loading HTML template:", error);
+        setHtmlTemplate("");
+      }
+    };
+
+    loadHtmlContent();
   }, [templateid]);
 
+  // ← re-render whenever template OR binding data changes
   useEffect(() => {
-    const newValue = renderExpression(expr ?? "");
-    setValue(newValue);
-  }, [binding?.raw, expr]);
+    if (htmlTemplate) {
+      setRenderedHtml(renderTemplate(htmlTemplate));
+    } else if (expr) {
+      setRenderedHtml(renderExpression(expr));
+    }
+  }, [htmlTemplate, binding?.raw]); // ← binding.raw triggers when data changes
 
-  // Re-render template when data changes
-  useEffect(() => {
-    if (htmlTemplate && resData && Object.keys(resData).length > 0) {
-      const rendered = render(htmlTemplate, resData);
-      setRenderedHtml(rendered);
+  // ← onRefresh called when depends changes
+  const onRefresh = () => {
+    if (htmlTemplate) {
+      setRenderedHtml(renderTemplate(htmlTemplate));
+    } else if (expr) {
+      setRenderedHtml(renderExpression(expr));
     }
-  }, [resData, htmlTemplate]);
+  };
+
+  useDependHandler({ name: depends, onRefresh });
 
   return (
     <UIComponent {...(props ?? {})}>
-      {/* Debug info - remove in production */}
-      {/* <details style={{ marginBottom: "20px" }}>
-        <summary>Debug Data</summary>
-        <pre style={{ fontSize: "10px", maxHeight: "200px", overflow: "auto" }}>
-          {JSON.stringify(resData, null, 2)}
-        </pre>
-      </details> */}
-
-      {/* Rendered HTML */}
       <div className="h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto" dangerouslySetInnerHTML={{ __html: renderedHtml }} />
     </UIComponent>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramesesinc/platform-core",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Platform Core Library",
   "author": "Rameses Systems Inc.",
   "license": "MIT",
@@ -28,12 +28,12 @@
     "copy-res": "node -e \"const fs=require('fs');const apps=['etracs','agos','filipizen'];apps.forEach(a=>{const d='../../apps/'+a+'/public/_res';fs.cpSync('src/public/_res',d,{recursive:true,force:true})})\""
   },
   "peerDependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.553.0",
     "next": ">=13.5.6 <15.0.0",
     "nunjucks": "^3.2.4",
     "react": ">=18.2.0",
-    "react-dom": ">=18.2.0",
-    "lucide-react": "^0.553.0",
-    "clsx": "^2.1.1"
+    "react-dom": ">=18.2.0"
   },
   "devDependencies": {
     "@ramesesinc/app-forms": "0.1.0",
@@ -50,13 +50,14 @@
     "clsx": "^2.1.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.9",
+    "next": ">=13.5.6 <15.0.0",
     "postcss": "^8",
     "postcss-cli": "^11.0.1",
     "supports-color": "^10.2.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5",
-    "next": ">=13.5.6 <15.0.0"
+    "expression-eval": "^5.0.1",
+    "typescript": "^5"
   },
   "keywords": [
     "ramesesinc-platform-core"