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

package/package.json

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

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

@@ -19,6 +19,8 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
 import { memo, useCallback } from "react";
+import clsx from "clsx";
+import Container from "@mui/material/Container";
 import isEqual from "lodash-es/isEqual";
 import { registerComponent } from "../registry/store";
 import { ComponentType } from "../services/fragment-url";
@@ -38,7 +40,7 @@ const WmPartialContent = memo(
     const mergedProps = __spreadProps(__spreadValues({}, props), {
       onLoad: handleOnLoad
     });
-    return /* @__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-${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)) }) }) });
   },
   (prevProps, nextProps) => {
     const staticKeys = [

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

@@ -19,10 +19,15 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
 import React, { useEffect, useReducer, useRef } from "react";
+import WmPrefab from "../../components/prefab";
 import { useAppState } from "../../context/WidgetProvider";
 import { useAppContext } from "../../context/AppContext";
 import { renderTranspiledMarkup } from "../services/markup-transpiler";
-import { scopeComponentStyles, removeComponentStyles } from "../services/css-scoping";
+import {
+  scopeComponentStyles,
+  removeComponentStyles,
+  resolvePrefabScopeName
+} from "../services/css-scoping";
 function useCrossScopeDataRefresh(appContext, componentType) {
   const [, forceRender] = useReducer((count) => count + 1, 0);
   useEffect(() => {
@@ -68,7 +73,7 @@ function createDynamicComponent({
   transpiled,
   styles
 }) {
-  const InnerComponent = () => {
+  const InnerComponent = (props) => {
     const appState = useAppState();
     usePageEvents(appState, componentType);
     const appContext = useAppContext();
@@ -95,7 +100,25 @@ function createDynamicComponent({
     }, []);
     if (!transpiled) return null;
     const renderState = notification ? __spreadProps(__spreadValues({}, appState), { notification }) : appState;
-    return /* @__PURE__ */ jsx(React.Fragment, { children: renderTranspiledMarkup(transpiled, renderState) });
+    const markup = renderTranspiledMarkup(transpiled, renderState);
+    if (componentType === "prefab") {
+      return /* @__PURE__ */ jsx(
+        WmPrefab,
+        {
+          prefabname: resolvePrefabScopeName(componentName, props.prefabname),
+          onLoad: props.onLoad,
+          onDestroy: props.onDestroy,
+          onRender: props.onRender,
+          styles: props.styles,
+          width: props.width,
+          height: props.height,
+          listener: props.listener,
+          show: props.show,
+          children: markup
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(React.Fragment, { children: markup });
   };
   return InnerComponent;
 }

package/runtime-dynamic/services/css-scoping.d.ts

@@ -1,2 +1,4 @@
+/** Resolves the prefab name used for CSS scope classes and `app-prefab-{name}` wrappers. */
+export declare function resolvePrefabScopeName(componentName: string, prefabname?: string): string;
 export declare function scopeComponentStyles(componentName: string, componentType: string, styles: string): string;
 export declare function removeComponentStyles(componentName: string, componentType: string): void;

package/runtime-dynamic/services/css-scoping.js

@@ -1,32 +1,50 @@
+import { fixURLPathAndScope } from "@wavemaker-ai/react-codegen/transpiler";
+import { store } from "../../store";
+import { getProjectConfig } from "../app-initializer";
+import { isPrefabSelfPreview } from "./fragment-url";
+function resolvePrefabScopeName(componentName, prefabname) {
+  var _a, _b;
+  if (prefabname) {
+    return prefabname;
+  }
+  if (isPrefabSelfPreview(componentName)) {
+    const appProps = (_b = (_a = store.getState().info) == null ? void 0 : _a.appConfig) == null ? void 0 : _b.appProperties;
+    return (appProps == null ? void 0 : appProps.displayName) || (appProps == null ? void 0 : appProps.name) || componentName;
+  }
+  return componentName;
+}
 const scopedCssCache = /* @__PURE__ */ new Map();
-function isWmAppScopedInStyles(styles) {
-  return /\.wm-app(?![\w-])/.test(styles);
+function getPreviewCssBasePath() {
+  var _a;
+  const deployUrl = ((_a = getProjectConfig().deployUrl) == null ? void 0 : _a.replace(/\/+$/, "")) || "";
+  if (!deployUrl || deployUrl === ".") {
+    return void 0;
+  }
+  return deployUrl;
 }
-function prefixSelectors(css, scope) {
-  return css.replace(/([^{}@]+)\{/g, (match, selectorsStr) => {
-    if (selectorsStr.trim().startsWith("@")) return match;
-    const selectors = selectorsStr.split(",");
-    const prefixed = selectors.map((selector) => {
-      const trimmed = selector.trim();
-      if (!trimmed) return selector;
-      if (trimmed.startsWith(":root") || trimmed.startsWith("html") || trimmed.startsWith("body")) {
-        return selector;
-      }
-      return `${scope} ${trimmed}`;
-    });
-    return `${prefixed.join(", ")} {`;
-  });
+function getCssScopeOptions(componentType, componentName) {
+  const normalizedType = componentType.toLowerCase();
+  if (normalizedType === "page") {
+    return { scopeType: "page", name: componentName };
+  }
+  if (normalizedType === "partial") {
+    return { scopeType: "partial", name: componentName };
+  }
+  if (normalizedType === "prefab") {
+    return { scopeType: "prefab", name: resolvePrefabScopeName(componentName) };
+  }
+  return void 0;
 }
 function scopeComponentStyles(componentName, componentType, styles) {
   var _a;
   if (!styles) return "";
-  const isWmAppScoped = isWmAppScopedInStyles(styles);
-  const scopeSelector = isWmAppScoped ? "" : `.wm-app`;
+  const scopeOptions = getCssScopeOptions(componentType, componentName);
+  const basePath = getPreviewCssBasePath();
   const scopeAttribute = `${componentType}-${componentName}`;
-  const cacheKey = `${scopeSelector}::${styles}`;
+  const cacheKey = `${scopeAttribute}::${basePath != null ? basePath : ""}::${styles}`;
   let scopedCss = scopedCssCache.get(cacheKey);
   if (!scopedCss) {
-    scopedCss = isWmAppScoped ? styles : prefixSelectors(styles, scopeSelector);
+    scopedCss = fixURLPathAndScope(styles, basePath, true, scopeOptions);
     scopedCssCache.set(cacheKey, scopedCss);
   }
   const styleElement = document.createElement("style");
@@ -48,5 +66,6 @@ function removeComponentStyles(componentName, componentType) {
 }
 export {
   removeComponentStyles,
+  resolvePrefabScopeName,
   scopeComponentStyles
 };

package/utils/custom-expression/parser.js

@@ -2,11 +2,19 @@ import React from "react";
 import { transform } from "sucrase";
 import { getComponent } from "../../runtime-dynamic/registry";
 import { formatMessage, _get, toNumber } from "../../core/util";
+import { useAppState } from "../../context/WidgetProvider";
 const UTIL_SCOPE = {
   formatMessage,
   _get,
-  toNumber
+  toNumber,
+  useAppState
 };
+function wrapCustomExpressionComponentBody(jsxInner) {
+  return `function __render__() {
+  const fragment = useAppState();
+  return (<React.Fragment>${jsxInner.trim() || "null"}</React.Fragment>);
+}`;
+}
 function stripLeadingArrow(markup) {
   const trimmed = markup.trim();
   const arrow = trimmed.match(/^\([^)]*\)\s*=>\s*/);
@@ -67,7 +75,7 @@ async function parseCustomExpressionToJsx(transformedMarkup, fragment) {
     return cache.get(markup);
   }
   const jsxInner = stripLeadingArrow(markup);
-  const jsxWrapped = `function __render__() { return (<React.Fragment>${jsxInner.trim() || "null"}</React.Fragment>); }`;
+  const jsxWrapped = wrapCustomExpressionComponentBody(jsxInner);
   let compiledCode;
   try {
     compiledCode = compileJsxToRenderBody(jsxWrapped);
@@ -106,7 +114,6 @@ ${jsxInner}`
     cache.set(markup, fallback);
     return fallback;
   }
-  const stopPropagation = (e) => e.stopPropagation();
   const renderComponent = (rowData) => {
     try {
       const args = templateValues.slice();
@@ -116,11 +123,7 @@ ${jsxInner}`
       if (fragmentIdx >= 0) args[fragmentIdx] = fragment;
       if (widgetsIdx >= 0) args[widgetsIdx] = fr == null ? void 0 : fr.Widgets;
       if (variablesIdx >= 0) args[variablesIdx] = fr == null ? void 0 : fr.Variables;
-      return React.createElement(
-        "span",
-        { className: "custom-expr-wrapper", onClick: stopPropagation },
-        renderFn(...args)
-      );
+      return React.createElement("span", { className: "custom-expr-wrapper" }, renderFn(...args));
     } catch (err) {
       console.error("[customExpressionParser] Render error:", err);
       return null;

package/utils/transformedDataset-utils.d.ts

@@ -14,7 +14,7 @@ export declare class DataSetItem {
     match?: string;
     dateformat?: string;
 }
-export declare const transformDataset: ((dataset: any, datafield: any, displayfield: any, displaylabel: any, displayexpression: any, orderby: any, groupby: any, dataPath: any, itemchildren?: any, match?: string) => DataSetItem[]) & import("lodash").MemoizedFunction;
+export declare const transformDataset: (dataset: any, datafield: any, displayfield: any, displaylabel: any, displayexpression: any, orderby: any, groupby: any, dataPath: any, itemchildren?: any, match?: string) => DataSetItem[];
 /**
  * function to get the ordered dataset based on the given orderby
  */
@@ -27,10 +27,10 @@ export declare const extractDataAsArray: (data: any) => any[];
 export declare const convertDataToObject: (dataResult: any) => any;
 export declare const transformFormData: (context: any, dataSet: any, myDataField: string, displayOptions?: any, startIndex?: number, scope?: any, dataPath?: string) => Array<DataSetItem>;
 export declare const getUniqObjsByDataField: (data: Array<DataSetItem>, dataField: string, displayField: string, allowEmptyFields?: boolean) => any;
-export declare const setItemByCompare: (datasetItems: Array<DataSetItem>, compareWithDataObj: Object, compareByField: string) => DataSetItem | undefined;
+export declare const setItemByCompare: (datasetItems: Array<DataSetItem>, compareWithDataObj: object, compareByField: string) => DataSetItem | undefined;
 export declare const datasetItems: (dataset: any, datafield: string, displayfield: string, displaylabel: string, displayexpression: string, orderby: string, groupby?: string, dataPath?: string, itemchildren?: any, match?: string) => DataSetItem[];
 export declare const groupData: (compRef: any, // In React, this would likely be component props or state
-data: Array<Object | DataSetItem>, groupby: string, match: string, orderby: string, dateformat?: string, innerItem?: string, AppDefaults?: any) => any[];
+data: Array<object | DataSetItem>, groupby: string, match: string, orderby: string, dateformat?: string, innerItem?: string, AppDefaults?: any) => any[];
 /**
  * Utility functions for list group operations
  */

package/utils/transformedDataset-utils.js

@@ -24,7 +24,6 @@ import {
   includes,
   isArray,
   isEqual,
-  memoize,
   isNull,
   isObject,
   isString,
@@ -116,7 +115,7 @@ const resolver = (...args) => {
     return JSON.stringify(arg);
   }).join("|");
 };
-const transformDataset = memoize(_internalTransformDataset, resolver);
+const transformDataset = _internalTransformDataset;
 const getOrderedDataset = (dataSet, orderBy, innerItem) => {
   if (!orderBy) {
     return cloneDeep(dataSet);