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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker-ai/react-runtime",
-  "version": "1.0.0-rc.324",
+  "version": "1.0.0-rc.328",
   "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.328",
+    "@wavemaker-ai/variables": "1.0.0-rc.328",
     "@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

@@ -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";
@@ -26,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) => {
@@ -38,7 +41,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-${(_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/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/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/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/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/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/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/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);

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>;