@wavemaker-ai/react-runtime 1.0.0-rc.332 → 1.0.0-rc.334

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker-ai/react-runtime",
-  "version": "1.0.0-rc.332",
+  "version": "1.0.0-rc.334",
   "description": "React runtime package for Wavemaker",
   "license": "MIT",
   "repository": {
@@ -58,8 +58,8 @@
     "@mui/x-date-pickers": "8.5.3",
     "@reduxjs/toolkit": "2.9.1",
     "@tanstack/react-table": "8.21.3",
-    "@wavemaker-ai/react-codegen": "1.0.0-rc.332",
-    "@wavemaker-ai/variables": "1.0.0-rc.332",
+    "@wavemaker-ai/react-codegen": "1.0.0-rc.334",
+    "@wavemaker-ai/variables": "1.0.0-rc.334",
     "@wavemaker/nvd3": "1.8.16",
     "axios": "1.15.1",
     "d3": "7.8.5",

package/runtime-dynamic/components/PageWrapper.js

@@ -9,7 +9,7 @@ function PageWrapper() {
   const { pageName } = useParams();
   const { Component, isLoading, error } = useDynamicComponent(pageName, ComponentType.PAGE);
   if (isLoading) {
-    return /* @__PURE__ */ jsx(AppSpinner, { show: true, spinnermessages: ["Loading page..."] });
+    return /* @__PURE__ */ jsx("div", { className: "app-loader", children: /* @__PURE__ */ jsx(AppSpinner, { show: true }) });
   }
   if (error) {
     return /* @__PURE__ */ jsx(

package/runtime-dynamic/components/PrefabPreview.js

@@ -33,7 +33,7 @@ function PrefabPreview() {
     ComponentType.PREFAB
   );
   if (isLoading) {
-    return /* @__PURE__ */ jsx(AppSpinner, { show: true, spinnermessages: ["Loading prefab\u2026"] });
+    return /* @__PURE__ */ jsx("div", { className: "app-loader", children: /* @__PURE__ */ jsx(AppSpinner, { show: true }) });
   }
   if (error) {
     return /* @__PURE__ */ jsx(

package/runtime-dynamic/components/partial-content.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
-import { memo, useCallback } from "react";
+import { memo, useCallback, useContext, useEffect } from "react";
 import clsx from "clsx";
 import Container from "@mui/material/Container";
 import isEqual from "lodash-es/isEqual";
@@ -26,10 +26,26 @@ import { registerComponent } from "../registry/store";
 import { ComponentType } from "../services/fragment-url";
 import { ComponentErrorBoundary } from "./ErrorBoundary";
 import { useDynamicComponent } from "./use-dynamic-component";
+import { WmContainerContext } from "../../components/container";
 const WmPartialContent = memo(
   (props) => {
     var _a;
     const { Component } = useDynamicComponent(props == null ? void 0 : props.content, ComponentType.PARTIAL);
+    const containerContext = useContext(WmContainerContext);
+    const partialKey = props.partialName || props.prefabName;
+    useEffect(() => {
+      var _a2;
+      if (partialKey) {
+        const pageParams = {};
+        (_a2 = props.params) == null ? void 0 : _a2.forEach((param) => {
+          pageParams[param] = props[param];
+        });
+        containerContext == null ? void 0 : containerContext.registerPartial(partialKey, __spreadProps(__spreadValues({}, props), {
+          pageParams,
+          partialParams: pageParams
+        }));
+      }
+    }, [containerContext, partialKey]);
     const handleOnLoad = useCallback(
       (widget) => {
         if (props.onLoad) {

package/runtime-dynamic/factories/build-base-page-like-component.js

@@ -21,6 +21,7 @@ import React from "react";
 import BasePage from "../../higherOrder/BasePage";
 import { ScriptScope } from "../services/script-executor";
 import { buildDynamicComponent } from "./utils";
+import { store } from "../../store";
 async function buildBasePageLikeComponent(kind, name, fragment) {
   const isPage = kind === "page";
   const WrappedComponent = await buildDynamicComponent(fragment, {
@@ -28,13 +29,16 @@ async function buildBasePageLikeComponent(kind, name, fragment) {
     componentType: isPage ? "page" : "partial",
     scriptScope: isPage ? ScriptScope.PAGE : ScriptScope.PARTIAL,
     hoc: BasePage,
-    componentInfo: (startupInfo) => __spreadProps(__spreadValues({
-      componentName: name,
-      componentType: isPage ? "PAGE" : "PARTIAL"
-    }, startupInfo), {
-      isPartOfPrefab: false,
-      appLocale: {}
-    })
+    componentInfo: (startupInfo) => {
+      var _a;
+      return __spreadProps(__spreadValues({
+        componentName: name,
+        componentType: isPage ? "PAGE" : "PARTIAL"
+      }, startupInfo), {
+        isPartOfPrefab: false,
+        appLocale: (_a = store.getState().i18n) == null ? void 0 : _a.appLocale
+      });
+    }
   });
   const MemoizedComponent = React.memo(WrappedComponent);
   MemoizedComponent.displayName = isPage ? `BasePage(${name})` : `BasePage_Partial(${name})`;

package/runtime-dynamic/factories/dynamic-component.js

@@ -85,13 +85,7 @@ function createDynamicComponent({
       }
       let id = null;
       if (appState) {
-        if (componentType.toLowerCase() === "page") {
-          id = setTimeout(() => {
-            appState.pageReady();
-          }, 1e3);
-        } else {
-          appState.pageReady();
-        }
+        appState.pageReady();
       }
       return () => {
         if (id) clearTimeout(id);

package/runtime-dynamic/routes.js

@@ -18,24 +18,28 @@ function getBasename() {
   var _a;
   const baseEl = document.querySelector("base");
   const baseHref = ((_a = baseEl == null ? void 0 : baseEl.getAttribute("href")) == null ? void 0 : _a.trim()) || "";
-  if (baseHref && baseHref !== "" && !baseHref.startsWith(".")) {
+  if (baseHref && !baseHref.startsWith(".")) {
     return baseHref.endsWith("/") ? baseHref.slice(0, -1) : baseHref;
   }
   const pathname = window.location.pathname;
+  const marker = `/${PREVIEW_ROUTING_BASEPATH}`;
+  const markerIndex = pathname.indexOf(`${marker}/`);
+  if (markerIndex >= 0) {
+    return pathname.slice(0, markerIndex) || "/";
+  }
+  if (pathname.endsWith(marker)) {
+    return pathname.slice(0, pathname.length - marker.length) || "/";
+  }
   const segments = pathname.split("/").filter(Boolean);
   const isRoot = pathname.endsWith("/");
-  if (isRoot) {
-    return "/" + segments.join("/");
-  }
-  return "/" + segments.slice(0, -1).join("/");
+  return isRoot ? "/" + segments.join("/") : "/" + segments.slice(0, -1).join("/");
 }
 function HomeRedirect() {
   var _a, _b, _c;
   const homePage = ((_c = (_b = (_a = store.getState().info) == null ? void 0 : _a.appConfig) == null ? void 0 : _b.appProperties) == null ? void 0 : _c.homePage) || FALLBACK_PAGE;
-  const hash = typeof window !== "undefined" ? window.location.hash : "";
-  const hashPageMatch = hash.match(/^#\/([^?&/]+)/);
+  const hashPageMatch = window.location.hash.match(/^#\/([^?&/]+)/);
   const targetPage = hashPageMatch ? hashPageMatch[1] : homePage;
-  const search = typeof window !== "undefined" ? window.location.search : "";
+  const search = window.location.search;
   const redirectTo = `/${PREVIEW_ROUTING_BASEPATH}/${targetPage}${search}`;
   return React.createElement(Navigate, {
     to: redirectTo,
@@ -63,6 +67,11 @@ function buildPreviewRouteTree() {
   } else {
     root.children = [
       { index: true, element: React.createElement(HomeRedirect) },
+      {
+        // pageName omitted — fall back to the same homePage redirect as the app root.
+        path: PREVIEW_ROUTING_BASEPATH,
+        element: React.createElement(HomeRedirect)
+      },
       {
         path: `${PREVIEW_ROUTING_BASEPATH}/:pageName`,
         element: React.createElement(PageWrapper)

package/utils/page-params-util.js

@@ -53,11 +53,32 @@ const extractPartialParamValues = (params, props) => {
     return acc;
   }, {});
 };
+let nextRefTag = 1;
+const refTags = /* @__PURE__ */ new WeakMap();
+const tagForRef = (value) => {
+  let tag = refTags.get(value);
+  if (tag === void 0) {
+    tag = nextRefTag++;
+    refTags.set(value, tag);
+  }
+  return tag;
+};
+const fingerprintParamValue = (value) => {
+  if (value === null || typeof value !== "object" && typeof value !== "function") {
+    return value;
+  }
+  return `#ref${tagForRef(value)}`;
+};
 const computePartialParamKey = (componentType, params, props) => {
   if (componentType !== "PARTIAL") {
     return null;
   }
-  return JSON.stringify(extractPartialParamValues(params || [], props));
+  const paramValues = extractPartialParamValues(params || [], props);
+  const fingerprint = Object.keys(paramValues).reduce((acc, key) => {
+    acc[key] = fingerprintParamValue(paramValues[key]);
+    return acc;
+  }, {});
+  return JSON.stringify(fingerprint);
 };
 export {
   computeMergedPageParams,

package/utils/partial-host-util.d.ts

@@ -0,0 +1,40 @@
+/**
+ * How a loaded partial is published onto its host page's widget registry.
+ *
+ * Angular's `BasePartialComponent` keeps `Page.Widgets[<containerName>]` as the *container
+ * widget* and hangs a fixed set of namespaces off it (`registerWidgets` / `initVariables` in
+ * runtime-base/src/components/base-partial.component.ts):
+ *
+ *   containerWidget.Widgets    = this.Widgets;
+ *   containerWidget.Variables  = this.Variables;
+ *   containerWidget.Actions    = this.Actions;
+ *   containerWidget.pageParams = this.pageParams;
+ *
+ * So `Page.Widgets.foo.Widgets.bar` resolves, while the partial *scope*'s own members stay
+ * private to the partial. Publishing the whole scope instead makes every scope method
+ * visible on the container, which breaks host-side capability checks: a script that calls
+ * `Widgets[name].handler?.(...)` to hand off to a *different* partial then finds the
+ * calling partial's own identically-named handler and recurses until the stack overflows.
+ *
+ * `pageParams` is published as the live object reference (not copied), so a host script that
+ * mutates `Widgets[name].pageParams.foo = bar` after load is mutating the same object the
+ * partial reads via `Partial.pageParams.foo` - no extra plumbing needed for updates to flow.
+ */
+/** The only namespaces a partial publishes onto its host container widget. */
+export declare const PARTIAL_HOST_NAMESPACES: readonly ["Widgets", "Variables", "Actions", "pageParams"];
+/** A container's own props, minus the React plumbing, for use as its registry entry. */
+export declare const toHostWidgetProps: (containerProps: Record<string, any>) => Record<string, any>;
+/**
+ * Mutates `hostEntry` in place to expose the partial's namespaces, mirroring Angular's
+ * `containerWidget.Widgets = ...` assignments. Mutating (rather than replacing the entry)
+ * keeps the container widget's identity and any properties other registrars put there.
+ *
+ * @returns false when there is no entry to publish onto, so callers can fall back.
+ */
+export declare const publishPartialNamespaces: (hostEntry: any, partialScope: Record<string, any> | undefined | null) => boolean;
+/**
+ * Prefabs still publish their whole scope. Angular exposes a prefab's *declared* methods on
+ * its container through an explicit metadata-driven allowlist (base-prefab.component.ts),
+ * and React has no equivalent yet, so narrowing a prefab here would hide those methods.
+ */
+export declare const isPrefabScope: (scope: Record<string, any> | undefined | null) => boolean;

package/utils/partial-host-util.js

@@ -0,0 +1,41 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const PARTIAL_HOST_NAMESPACES = ["Widgets", "Variables", "Actions", "pageParams"];
+const NON_WIDGET_PROPS = ["listener", "renderPartial", "children", "onLoad"];
+const toHostWidgetProps = (containerProps) => {
+  const entry = __spreadValues({}, containerProps);
+  NON_WIDGET_PROPS.forEach((key) => delete entry[key]);
+  return entry;
+};
+const publishPartialNamespaces = (hostEntry, partialScope) => {
+  if (!hostEntry || typeof hostEntry !== "object" || !partialScope) {
+    return false;
+  }
+  PARTIAL_HOST_NAMESPACES.forEach((namespace) => {
+    if (partialScope[namespace] !== void 0) {
+      hostEntry[namespace] = partialScope[namespace];
+    }
+  });
+  return true;
+};
+const isPrefabScope = (scope) => typeof (scope == null ? void 0 : scope.componentType) === "string" && scope.componentType.toLowerCase() === "prefab";
+export {
+  PARTIAL_HOST_NAMESPACES,
+  isPrefabScope,
+  publishPartialNamespaces,
+  toHostWidgetProps
+};

package/variables/model-variable.d.ts

@@ -8,5 +8,7 @@ export declare class ModelVariable extends ModelVariable_base {
     constructor(config: VariableConfig);
     invoke(params?: any, onSuccess?: Function, onError?: Function): any;
     invokeOnParamChange(obj?: any, newVal?: any, oldVal?: any): Promise<this>;
+    addItem(value: any, options?: any): any;
+    removeItem(index: any, options?: any): any;
 }
 export {};

package/variables/model-variable.js

@@ -70,6 +70,20 @@ class ModelVariable extends _ModelVariable {
     }
     return Promise.resolve(this);
   }
+  // addItem/removeItem (inherited from @wavemaker-ai/variables) mutate `dataSet` in place
+  // and return it, with no notification - that's precisely the bug being fixed here.
+  addItem(value, options) {
+    this.dataSet = Array.isArray(this.dataSet) ? [...this.dataSet] : __spreadValues({}, this.dataSet);
+    const result = super.addItem(value, options);
+    this.notify(VariableEvents.AFTER_INVOKE, [this, this.dataSet]);
+    return result;
+  }
+  removeItem(index, options) {
+    this.dataSet = Array.isArray(this.dataSet) ? [...this.dataSet] : __spreadValues({}, this.dataSet);
+    const result = super.removeItem(index, options);
+    this.notify(VariableEvents.AFTER_INVOKE, [this, this.dataSet]);
+    return result;
+  }
 }
 export {
   ModelVariable