@wavemaker-ai/react-runtime 1.0.0-rc.326 → 1.0.0-rc.330

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker-ai/react-runtime",
-  "version": "1.0.0-rc.326",
+  "version": "1.0.0-rc.330",
   "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.326",
-    "@wavemaker-ai/variables": "1.0.0-rc.326",
+    "@wavemaker-ai/react-codegen": "1.0.0-rc.330",
+    "@wavemaker-ai/variables": "1.0.0-rc.330",
     "@wavemaker/nvd3": "1.8.16",
     "axios": "1.15.1",
     "d3": "7.8.5",

package/runtime-dynamic/app-initializer.js

@@ -36,6 +36,7 @@ import { isRuntimePreviewPrefab } from "./preview-mode";
 import { createLazyPartial } from "./services/variable-registry";
 import { resolvePreviewFetchUrl } from "./preview-resource-base";
 import { fetchResource } from "./services/resource-manager";
+import { loadAppExtensions } from "./services/app-extension-provider";
 async function fetchOptionalText(url) {
   var _a;
   try {
@@ -207,6 +208,7 @@ async function initializeApp() {
   initAppModes();
   setupAxiosInterceptors();
   await dispatchInitialConfig();
+  await loadAppExtensions();
   const isPrefabPreview = isRuntimePreviewPrefab();
   syncAppstoreCommonPartial(isPrefabPreview);
   if (!isPrefabPreview) {
@@ -217,7 +219,6 @@ async function initializeApp() {
     loadAppVariables(),
     loadAppScript(),
     isPrefabPreview ? Promise.resolve({}) : loadCustomFormatters()
-    // loadAppExtensions(),
   ]);
   appVariablesJson = loadedVariables;
   customFormatters = loadedFormatters;

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

@@ -28,6 +28,7 @@ import { ComponentErrorBoundary } from "./ErrorBoundary";
 import { useDynamicComponent } from "./use-dynamic-component";
 const WmPartialContent = memo(
   (props) => {
+    var _a;
     const { Component } = useDynamicComponent(props == null ? void 0 : props.content, ComponentType.PARTIAL);
     const handleOnLoad = useCallback(
       (widget) => {
@@ -40,7 +41,7 @@ const WmPartialContent = memo(
     const mergedProps = __spreadProps(__spreadValues({}, props), {
       onLoad: handleOnLoad
     });
-    return /* @__PURE__ */ jsx("div", { className: clsx(props.content && `app-partial-${props.content}`), children: /* @__PURE__ */ jsx(Container, { className: "partial-container", children: /* @__PURE__ */ jsx(ComponentErrorBoundary, { scope: "partial", componentName: props.content, children: Component && /* @__PURE__ */ jsx(Component, __spreadValues({}, mergedProps)) }) }) });
+    return /* @__PURE__ */ jsx("div", { className: clsx(props.content && `app-partial-${(_a = props.content) == null ? void 0 : _a.toLocaleLowerCase()}`), children: /* @__PURE__ */ jsx(Container, { className: "partial-container", style: { height: "inherit" }, children: /* @__PURE__ */ jsx(ComponentErrorBoundary, { scope: "partial", componentName: props.content, children: Component && /* @__PURE__ */ jsx(Component, __spreadValues({}, mergedProps)) }) }) });
   },
   (prevProps, nextProps) => {
     const staticKeys = [

package/runtime-dynamic/components/wmx-placeholder.d.ts

@@ -0,0 +1,18 @@
+export type WmxComponentPlaceholderProps = {
+    /** Studio markup: componentname="MultiSelect" → renders as `<MultiSelect/>` */
+    componentname?: string;
+    componentName?: string;
+    name?: string;
+    className?: string;
+    class?: string;
+};
+/** Short widget label for placeholder text (e.g. MultiSelect, not WmxMultiSelect). */
+export declare function resolveWmxPlaceholderLabel(props: WmxComponentPlaceholderProps, scopeTag?: string): string;
+/**
+ * Generic fallback when a WMX widget is not registered in preview.
+ * Matches Studio placeholder: dashed box + `<ComponentName/>` in serif gray type.
+ */
+export declare function WmxComponentPlaceholder(props: WmxComponentPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace WmxComponentPlaceholder {
+    var displayName: string;
+}

package/runtime-dynamic/components/wmx-placeholder.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+function resolveWmxPlaceholderLabel(props, scopeTag) {
+  var _a;
+  const fromProp = (_a = props.componentname) != null ? _a : props.componentName;
+  if (fromProp) return String(fromProp);
+  if (scopeTag == null ? void 0 : scopeTag.startsWith("Wmx")) return scopeTag.slice(3);
+  if (scopeTag) return scopeTag;
+  return "Component";
+}
+const PLACEHOLDER_SX = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  minHeight: 120,
+  boxSizing: "border-box",
+  padding: 3,
+  backgroundColor: "#f2f2f2",
+  border: "1px dashed #8c8c8c",
+  fontFamily: 'Georgia, "Times New Roman", Times, serif',
+  fontSize: "2.25rem",
+  fontWeight: 400,
+  color: "#b8b8b8",
+  lineHeight: 1.2,
+  textAlign: "center"
+};
+function WmxComponentPlaceholder(props) {
+  const label = resolveWmxPlaceholderLabel(props);
+  const tagText = `<${label}/>`;
+  const className = ["wm-wmx-component-placeholder", props.className, props.class].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-wmx-component": label,
+      role: "status",
+      "aria-label": `WMX component placeholder: ${tagText}`,
+      sx: PLACEHOLDER_SX,
+      children: tagText
+    }
+  );
+}
+WmxComponentPlaceholder.displayName = "WmxComponentPlaceholder";
+export {
+  WmxComponentPlaceholder,
+  resolveWmxPlaceholderLabel
+};

package/runtime-dynamic/main.js

@@ -3,7 +3,13 @@ import { createRoot } from "react-dom/client";
 import wmGlobalsCss from "@wavemaker-ai/react-codegen/styles/wm-styles.css";
 import { App, initPreviewRuntimeRouter } from "./App";
 import { initializeApp } from "./app-initializer";
+import { registerCustomWidget, getCustomWidget, hasCustomWidget } from "./registry";
 import { createAppRouter } from "./routes";
+window.WMPreview = {
+  registerCustomWidget,
+  getCustomWidget,
+  hasCustomWidget
+};
 function injectGlobalStyles() {
   if (document.querySelector('style[data-wm-scope="globals"]')) return;
   const style = document.createElement("style");

package/runtime-dynamic/services/compile-render.js

@@ -1,11 +1,35 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import React from "react";
 import { transform } from "sucrase";
 import { getComponent } from "../registry/component-registry";
+import { getCustomWidget } from "../registry/custom-widget-registry";
+import {
+  WmxComponentPlaceholder
+} from "../components/wmx-placeholder";
 import { formatMessage, _get, toNumber } from "../../core/util";
 import { getPartialNames } from "../app-initializer";
 import { createLazyPartial } from "./variable-registry";
 const compiledCache = /* @__PURE__ */ new Map();
 const componentNameCache = /* @__PURE__ */ new Map();
+const wmxComponentNameCache = /* @__PURE__ */ new Map();
 const UTIL_SCOPE = {
   formatMessage,
   _get,
@@ -24,6 +48,47 @@ function extractMarkupComponents(markup) {
   componentNameCache.set(markup, result);
   return result;
 }
+function extractWmxComponents(markup) {
+  const cached = wmxComponentNameCache.get(markup);
+  if (cached) return cached;
+  const matches = markup.match(/\bWmx[A-Z]\w*/g);
+  const result = matches ? [...new Set(matches)] : [];
+  wmxComponentNameCache.set(markup, result);
+  return result;
+}
+function tryAddScopeComponent(name, seen, names, values) {
+  var _a;
+  if (seen.has(name)) return false;
+  const component = (_a = getComponent(name)) != null ? _a : getCustomWidget(name);
+  if (!component) return false;
+  seen.add(name);
+  names.push(name);
+  values.push(component);
+  return true;
+}
+function tryAddWmxScopeComponent(scopeName, seen, names, values) {
+  if (seen.has(scopeName)) return false;
+  const registered = getCustomWidget(scopeName);
+  if (registered) {
+    seen.add(scopeName);
+    names.push(scopeName);
+    values.push(registered);
+    return true;
+  }
+  const component = (props) => {
+    var _a, _b;
+    return React.createElement(WmxComponentPlaceholder, __spreadProps(__spreadValues({}, props), {
+      componentname: (_b = (_a = props.componentname) != null ? _a : props.componentName) != null ? _b : scopeName.replace(/^Wmx/, "")
+    }));
+  };
+  seen.add(scopeName);
+  names.push(scopeName);
+  values.push(component);
+  console.warn(
+    `[markup-transpiler] WMX "${scopeName}" not registered \u2014 placeholder shown. Load app.extensions.js.`
+  );
+  return true;
+}
 function resolveScope(imports, appState, markup) {
   const fragment = appState;
   const names = ["React", "fragment", "Widgets", "Variables"];
@@ -33,11 +98,11 @@ function resolveScope(imports, appState, markup) {
   for (const importDef of imports) {
     const name = importDef.as || importDef.name;
     if (seen.has(name)) continue;
-    const component = getComponent(name);
-    if (component) {
-      seen.add(name);
-      names.push(name);
-      values.push(component);
+    if (name.startsWith("Wmx")) {
+      tryAddWmxScopeComponent(name, seen, names, values);
+      continue;
+    }
+    if (tryAddScopeComponent(name, seen, names, values)) {
       continue;
     }
     const partialName = [...knownPartials].find((p) => p.toLowerCase() === name.toLowerCase());
@@ -52,13 +117,10 @@ function resolveScope(imports, appState, markup) {
   }
   if (markup) {
     for (const name of extractMarkupComponents(markup)) {
-      if (seen.has(name)) continue;
-      const component = getComponent(name);
-      if (component) {
-        seen.add(name);
-        names.push(name);
-        values.push(component);
-      }
+      tryAddScopeComponent(name, seen, names, values);
+    }
+    for (const name of extractWmxComponents(markup)) {
+      tryAddWmxScopeComponent(name, seen, names, values);
     }
   }
   for (const [name, value] of Object.entries(UTIL_SCOPE)) {
@@ -133,6 +195,7 @@ return __render__();`;
 function clearCompiledCache() {
   compiledCache.clear();
   componentNameCache.clear();
+  wmxComponentNameCache.clear();
   lazyPartialCache.clear();
 }
 export {

package/store/slices/i18nSlice.d.ts

@@ -1,7 +1,6 @@
 export interface I18nState {
     selectedLocale: string;
     /** Bumped on each bundle load so React trees can re-bind locale labels globally. */
-    localeRevision: number;
     defaultSupportedLocale: string;
     appLocale: any;
     dateFormat: string;

package/store/slices/i18nSlice.js

@@ -70,7 +70,6 @@ const RTL_LANGUAGE_CODES = [
 ];
 const initialState = {
   selectedLocale: "",
-  localeRevision: 0,
   defaultSupportedLocale: "en",
   appLocale: {},
   dateFormat: "MMM d, y",
@@ -189,7 +188,6 @@ const i18nSlice = createSlice({
       state.dateTimeFormat = `${state.dateFormat} ${state.timeFormat}`;
       state.prefabMessages = action.payload.data.prefabMessages || {};
       state.selectedLocale = action.payload.locale || state.selectedLocale;
-      state.localeRevision += 1;
     }).addCase(loadLocaleBundle.rejected, (state, action) => {
       state.error = action.payload;
     });

package/utils/layoutsize-util.js

@@ -1,12 +1,15 @@
 function applySize(el, key, nv) {
   const parent = el.parentElement;
   const parentStyle = parent ? getComputedStyle(parent) : null;
-  const isParentFlex = !!parentStyle && ["flex", "inline-flex"].includes(parentStyle.display);
-  let isMainAxis = false;
+  const isLayoutWrapper = !!parent && (parent.classList.contains("app-page-content") || parent.classList.contains("app-content-column"));
+  const isParentFlex = !isLayoutWrapper && !!parentStyle && ["flex", "inline-flex"].includes(parentStyle.display);
+  let isWidthMainAxis = false;
+  let isHeightMainAxis = false;
   if (isParentFlex) {
     const flexDir = parentStyle.flexDirection;
     const isRow = ["row", "row-reverse"].includes(flexDir);
-    isMainAxis = key === "width" && isRow || key === "height" && !isRow;
+    isWidthMainAxis = key === "width" && isRow;
+    isHeightMainAxis = key === "height" && !isRow;
   }
   const minKey = key === "width" ? "minWidth" : "minHeight";
   if (nv === "fill") {
@@ -14,9 +17,10 @@ function applySize(el, key, nv) {
       el.style[key] = "100%";
     } else {
       el.style[key] = "";
-      if (isMainAxis) {
+      if (isWidthMainAxis || isHeightMainAxis) {
         el.style.flexGrow = "1";
-        el.style.flexShrink = "";
+        el.style.flexShrink = "0";
+        el.style.flexBasis = isHeightMainAxis ? "" : "0";
         el.style[minKey] = "0";
       } else {
         el.style.alignSelf = "stretch";
@@ -27,8 +31,8 @@ function applySize(el, key, nv) {
       el.style[key] = "fit-content";
     }
     if (isParentFlex) {
-      if (isMainAxis) {
-        el.style.flexGrow = "";
+      if (isWidthMainAxis || isHeightMainAxis) {
+        el.style.flexBasis = "";
         el.style.flexShrink = "0";
         el.style[minKey] = "";
       } else {
@@ -37,6 +41,7 @@ function applySize(el, key, nv) {
     } else {
       el.style.flexGrow = "";
       el.style.flexShrink = "0";
+      el.style.flexBasis = "";
       el.style.alignSelf = "";
       el.style[minKey] = "";
     }

package/utils/style-utils.d.ts

@@ -28,3 +28,9 @@ export declare const filterAutoLayoutClasses: (layoutClassName: string | undefin
 export declare const toCssLength: (value: string | number) => string;
 /** Ensures a CSS `background-image` value is wrapped in `url(...)` when needed. */
 export declare const normalizeBackgroundImage: (value: string) => string;
+export declare function getFragmentCssScopeClass(appState: {
+    componentName?: string;
+    name?: string;
+    componentType?: string;
+    type?: string;
+} | null): string | undefined;

package/utils/style-utils.js

@@ -1,3 +1,4 @@
+import { getCurrentPath } from "../core/util/utils";
 const sanitizeStyleObject = (styleObj) => {
   if (!styleObj || typeof styleObj !== "object") {
     return {};
@@ -33,8 +34,17 @@ const filterAutoLayoutClasses = (layoutClassName, prefixesToGet, mode = "include
 };
 const toCssLength = (value) => typeof value === "number" ? `${value}px` : String(value);
 const normalizeBackgroundImage = (value) => value.includes("url(") ? value : `url(${value})`;
+function getFragmentCssScopeClass(appState) {
+  const name = ((appState == null ? void 0 : appState.componentName) || (appState == null ? void 0 : appState.name) || getCurrentPath().split("/").pop() || "").toLowerCase();
+  if (!name) return void 0;
+  const type = String((appState == null ? void 0 : appState.componentType) || (appState == null ? void 0 : appState.type) || "PAGE").toUpperCase();
+  if (type === "PARTIAL") return `app-partial-${name}`;
+  if (type === "PREFAB") return `app-prefab-${name}`;
+  return `app-page-${name}`;
+}
 export {
   filterAutoLayoutClasses,
+  getFragmentCssScopeClass,
   isValidStyleObject,
   mergeStyleObjects,
   normalizeBackgroundImage,

package/utils/wmx.utils.d.ts

@@ -0,0 +1,6 @@
+import { ComponentType } from "react";
+export type WmxComponentModule = Record<string, ComponentType<any>>;
+export declare const registerWmxComponents: (module: WmxComponentModule) => void;
+export declare const getWmxModule: () => WmxComponentModule | null;
+export declare const getWmxComponentName: (widgetName: string) => string | null;
+export declare const loadWmxComponent: (componentName: string) => Promise<ComponentType<any> | null>;

package/utils/wmx.utils.js

@@ -0,0 +1,41 @@
+let _registeredModule = null;
+const registerWmxComponents = (module) => {
+  _registeredModule = module;
+};
+const getWmxModule = () => _registeredModule;
+const getWmxComponentName = (widgetName) => {
+  var _a;
+  if (!(widgetName == null ? void 0 : widgetName.includes("wmx-"))) return null;
+  const componentName = (_a = widgetName.split("-")) == null ? void 0 : _a[1];
+  return componentName || null;
+};
+const resolveWmxComponent = (module, componentName) => {
+  const prefixedComponentName = `Wmx${componentName}`;
+  const namedExport = module[prefixedComponentName];
+  return namedExport;
+};
+const loadWmxComponent = async (componentName) => {
+  try {
+    const module = _registeredModule;
+    if (!module) {
+      console.warn("wmx modules not found");
+      const fallbackModule = await import("../components/input/text");
+      return fallbackModule.default;
+    }
+    const component = resolveWmxComponent(module, componentName);
+    if (!component) {
+      throw new Error(`WMX component "${componentName}" has no default export.`);
+    }
+    return component;
+  } catch (error) {
+    console.warn(`WMX component "${componentName}" failed to load, falling back to WmText.`, error);
+    const fallbackModule = await import("../components/input/text");
+    return fallbackModule.default;
+  }
+};
+export {
+  getWmxComponentName,
+  getWmxModule,
+  loadWmxComponent,
+  registerWmxComponents
+};

package/variables/crud-variable.js

@@ -59,7 +59,7 @@ class CrudVariable extends _CrudVariable {
       onError: (context, args) => {
         this.notify(VariableEvents.AFTER_INVOKE, [args.variable, args.data, args.options]);
         this.notify(VariableEvents.ERROR, [args.variable, args.data, args.options]);
-        if (args.data.includes("Violation")) {
+        if (args.data.includes("Violation") && !config.onError) {
           EventNotifier.ROOT.notify("SERVICE_ERROR", [args.variable, args.data, args.options]);
         }
         return config.onError && config.onError(args.variable, args.data, args.options);

package/variables/live-variable.js

@@ -62,7 +62,7 @@ class LiveVariable extends _LiveVariable {
       onError: (context, args) => {
         this.notify(VariableEvents.AFTER_INVOKE, [args.variable, args.data, args.options]);
         this.notify(VariableEvents.ERROR, [args.variable, args.data, args.options]);
-        if (args.data.includes("Violation")) {
+        if (args.data.includes("Violation") && !config.onError) {
           EventNotifier.ROOT.notify("SERVICE_ERROR", [args.variable, args.data, args.options]);
         }
         return config.onError && config.onError(args.variable, args.data, args.options);

package/variables/service-variable.js

@@ -20,8 +20,11 @@ class ServiceVariable extends _ServiceVariable {
     }
     let variableConfig = {
       name: config.name,
-      dataSet: config.paramProvider(),
-      // Default empty value
+      // List variables must start empty ([]), not with the request-parameter object
+      // paramProvider() builds (filters/offset/limit/sort etc.) — otherwise a table bound
+      // to this variable briefly renders that params object as a phantom row before the
+      // real response arrives. Non-list variables (e.g. forms) still seed from paramProvider.
+      dataSet: config.isList !== false ? [] : config.paramProvider(),
       dataBinding: {},
       firstRecord: {},
       lastRecord: {},
@@ -49,7 +52,7 @@ class ServiceVariable extends _ServiceVariable {
       onError: (context, args) => {
         this.notify(VariableEvents.AFTER_INVOKE, [args.variable, args.data, args.options]);
         this.notify(VariableEvents.ERROR, [args.variable, args.data, args.options]);
-        if (args.data.includes("Violation")) {
+        if (args.data.includes("Violation") || !config.onError) {
           EventNotifier.ROOT.notify("SERVICE_ERROR", [args.variable, args.data, args.options]);
         }
         return config.onError && config.onError(args.variable, args.data, args.options);