@wavemaker-ai/react-runtime 1.0.0-rc.317 → 1.0.0-rc.319

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker-ai/react-runtime",
-  "version": "1.0.0-rc.317",
+  "version": "1.0.0-rc.319",
   "description": "React runtime package for Wavemaker",
   "license": "MIT",
   "repository": {
@@ -57,7 +57,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.317",
+    "@wavemaker-ai/react-codegen": "1.0.0-rc.319",
+    "@wavemaker-ai/variables": "1.0.0-rc.319",
     "@wavemaker/nvd3": "1.8.16",
     "axios": "1.15.1",
     "d3": "7.8.5",
@@ -96,7 +97,6 @@
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "5.1.4",
     "@vitest/coverage-v8": "3.2.4",
-    "@wavemaker-ai/variables": "1.0.0-rc.317",
     "axe-core": "4.11.1",
     "esbuild": "0.27.5",
     "eslint": "9",

package/runtime-dynamic/components/use-dynamic-component.js

@@ -3,7 +3,6 @@ import { getComponentRef, getPrefabConfig } from "../services/component-ref-prov
 import { ComponentType } from "../services/fragment-url";
 import { buildBasePageLikeComponent } from "../factories/build-base-page-like-component";
 import { buildPrefabComponent } from "../factories/prefab-factory";
-import { useAppContext } from "../../context/AppContext";
 const builders = {
   [ComponentType.PAGE]: (name, fragment) => buildBasePageLikeComponent("page", name, fragment),
   [ComponentType.PARTIAL]: (name, fragment) => buildBasePageLikeComponent("partial", name, fragment),
@@ -16,10 +15,8 @@ function useDynamicComponent(componentName, componentType, options) {
     error: null
   });
   const activeRequestRef = useRef(0);
-  const appContext = useAppContext();
   const load = useCallback(
     async (name) => {
-      var _a, _b;
       const requestId = ++activeRequestRef.current;
       setState({ Component: null, isLoading: true, error: null });
       try {
@@ -29,17 +26,15 @@ function useDynamicComponent(componentName, componentType, options) {
           prefabOutboundDefaults = await getPrefabConfig(name) || {};
         }
         const fragment = await getComponentRef(name, componentType, fetchOptions);
+        if (!fragment) {
+          if (requestId === activeRequestRef.current) {
+            setState({ Component: null, isLoading: false, error: null });
+          }
+          return;
+        }
         const builder = builders[componentType];
         if (!builder) throw new Error(`No builder registered for component type: ${componentType}`);
         const Component = await builder(name, fragment, prefabOutboundDefaults);
-        if ((fragment == null ? void 0 : fragment.error) && (fragment == null ? void 0 : fragment.error) == "Access Denied") {
-          setState({ Component, isLoading: false, error: null });
-          appContext == null ? void 0 : appContext.notifyApp(
-            ((_b = (_a = appContext == null ? void 0 : appContext.appLocale) == null ? void 0 : _a.LABELS) == null ? void 0 : _b.ACCESS_DENIED) || (fragment == null ? void 0 : fragment.error),
-            "Error"
-          );
-          return;
-        }
         if (requestId === activeRequestRef.current) {
           setState({ Component, isLoading: false, error: null });
         }

package/runtime-dynamic/main.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
 import { createRoot } from "react-dom/client";
 import wmGlobalsCss from "@wavemaker-ai/react-codegen/styles/wm-styles.css";
 import { App, initPreviewRuntimeRouter } from "./App";
@@ -30,8 +29,7 @@ async function bootstrap() {
     throw new Error("Root element #app-root not found");
   }
   const root = createRoot(container);
-  const tree = process.env.NODE_ENV === "development" ? /* @__PURE__ */ jsx(React.StrictMode, { children: /* @__PURE__ */ jsx(App, {}) }) : /* @__PURE__ */ jsx(App, {});
-  root.render(tree);
+  root.render(/* @__PURE__ */ jsx(App, {}));
   console.timeEnd("bootstrap");
   window.addEventListener("unload", () => {
     root.unmount();

package/runtime-dynamic/services/component-ref-provider.d.ts

@@ -18,7 +18,7 @@ export interface DecodedFragment {
 export interface GetComponentOptions {
     prefabName?: string;
 }
-export declare function getComponentRef(componentName: string, componentType: ComponentType, options?: GetComponentOptions): Promise<DecodedFragment>;
+export declare function getComponentRef(componentName: string, componentType: ComponentType, options?: GetComponentOptions): Promise<DecodedFragment | undefined>;
 export declare function getPrefabConfig(prefabName: string): Promise<Record<string, unknown>>;
 /**
  * Resets injected prefab assets and transpile/variable caches so the next

package/runtime-dynamic/services/component-ref-provider.js

@@ -6,17 +6,8 @@ import { decodeURIComponentSafe, parseJsonSafe } from "../utils";
 import { clearPrefabResourcesLoaded, loadPrefabResourcesFromConfig } from "./prefab-resources";
 import { clearTranspileCache } from "./markup-transpiler";
 import { clearVariablesCache } from "./variable-transpiler";
+import { appManager } from "@wavemaker-ai/variables";
 function decodeFragment(raw) {
-  if (!raw) {
-    return {
-      markup: "",
-      script: "",
-      styles: "",
-      variables: parseJsonSafe("{}"),
-      config: void 0,
-      error: "Access Denied"
-    };
-  }
   return {
     markup: decodeURIComponentSafe(raw.markup || ""),
     script: decodeURIComponentSafe(raw.script || ""),
@@ -26,8 +17,20 @@ function decodeFragment(raw) {
   };
 }
 async function loadFragment(componentName, componentType, prefabName) {
+  var _a, _b, _c;
   const url = getFragmentUrl(componentName, componentType, prefabName);
-  return fetchResource(url).then(decodeFragment);
+  try {
+    const raw = await fetchResource(url);
+    return decodeFragment(raw);
+  } catch (err) {
+    if (((_a = err.response) == null ? void 0 : _a.status) === 401) {
+      return void 0;
+    }
+    const errorMsg = isString(err) ? err : "";
+    console.error(`Failed to load ${componentType} component '${componentName}':`, err);
+    (_c = (_b = appManager) == null ? void 0 : _b.notifyApp) == null ? void 0 : _c.call(_b, errorMsg, "error");
+    return void 0;
+  }
 }
 async function getComponentRef(componentName, componentType, options) {
   return loadFragment(componentName, componentType, options == null ? void 0 : options.prefabName);

package/runtime-dynamic/services/resource-manager.js

@@ -1,8 +1,9 @@
 import axios from "axios";
 import { resolvePreviewFetchUrl } from "../preview-resource-base";
 import { handle401 } from "../../core/app.service";
+import { store } from "../../store";
 async function fetchResource(url, optional = false) {
-  var _a;
+  var _a, _b;
   const resolvedUrl = resolvePreviewFetchUrl(url);
   try {
     const response = await axios.get(resolvedUrl);
@@ -14,10 +15,15 @@ async function fetchResource(url, optional = false) {
     const status = (_a = error == null ? void 0 : error.response) == null ? void 0 : _a.status;
     if (status === 401) {
       handle401();
-    } else if (status === 403) {
-      return null;
+      throw error;
     }
-    throw error;
+    const appLocale = (_b = store.getState().i18n) == null ? void 0 : _b.appLocale;
+    const errorMessages = {
+      404: (appLocale == null ? void 0 : appLocale.MESSAGE_PAGE_NOT_FOUND) || "Page not available",
+      403: (appLocale == null ? void 0 : appLocale.LABEL_ACCESS_DENIED) || "Access Denied"
+    };
+    const errorMessage = errorMessages[status] || "An error occurred";
+    throw errorMessage || "Unknown error loading component";
   }
 }
 export {

package/runtime-dynamic/services/script-executor.js

@@ -45,7 +45,10 @@ function buildAddPageScript(script, scopeKind, componentName) {
   try {
     const cleanScript = prepareScript(script);
     const allNames = [...Object.keys(SCRIPT_GLOBALS), ...DEFERRED_GLOBALS];
-    const compiledFn = new Function("App", scopeKind, ...allNames, cleanScript);
+    const wrappedScript = `{
+${cleanScript}
+}`;
+    const compiledFn = new Function("App", scopeKind, ...allNames, wrappedScript);
     const staticValues = Object.keys(SCRIPT_GLOBALS).map((k) => SCRIPT_GLOBALS[k]);
     return (app, page) => {
       try {

package/runtime-dynamic/services/variable-registry.js

@@ -55,6 +55,9 @@ function createLazyPartial(partialName) {
     const { getComponentRef } = await import("./component-ref-provider");
     const { buildBasePageLikeComponent } = await import("../factories/build-base-page-like-component");
     const fragment = await getComponentRef(partialName, FType.PARTIAL);
+    if (!fragment) {
+      return { default: () => null };
+    }
     const Built = await buildBasePageLikeComponent("partial", partialName, fragment);
     return { default: Built };
   });

package/utils/attr.js

@@ -13,7 +13,6 @@ const INTERNAL_ATTRIBUTES = /* @__PURE__ */ new Set([
   "ref",
   "showindevice",
   "styles",
-  "viewParent",
   "onLeftPanelAnimationChange"
 ]);
 const SAFE_ATTRIBUTES = /* @__PURE__ */ new Set([

package/utils/format-util.js

@@ -194,11 +194,10 @@ const formatOnBlur = (datavalue, rawInputValue, trailingzero, decimalplaces) =>
 };
 const handleValidatedValueUpdate = (value, name, inputElCurrent, onChangeProp, listenerProp, prevDatavalueState, setPrevDatavalueState, widgetProps) => {
   const stringifiedValue = value === null ? "" : value.toString();
-  const widgetInfo = name && (listenerProp == null ? void 0 : listenerProp.Widgets) ? listenerProp.Widgets[name] : void 0;
   if (listenerProp == null ? void 0 : listenerProp.onChange) {
-    listenerProp.onChange(name, __spreadProps(__spreadValues({}, widgetInfo || widgetProps), {
+    listenerProp.onChange(name, {
       datavalue: stringifiedValue
-    }));
+    });
   }
   setPrevDatavalueState(value);
   const updatedProps = __spreadProps(__spreadValues({}, widgetProps), {

package/utils/form-state.util.d.ts

@@ -1,62 +0,0 @@
-/**
- * Form State Utility
- *
- * Handles form field registration and management within the widget context.
- * This utility provides centralized logic for registering form fields and form widgets
- * to their parent form context.
- */
-/**
- * Interface for widget properties related to form field registration
- */
-interface FormFieldWidget {
-    name?: string;
-    formName?: string;
-    field?: string;
-    fieldName?: string;
-    formKey?: string;
-    parentForm?: string;
-    [key: string]: any;
-}
-/**
- * Interface for the context structure where form fields are registered
- */
-interface WidgetsContext {
-    [formName: string]: {
-        formfields: Record<string, any>;
-        formWidgets: Record<string, any>;
-        [key: string]: any;
-    };
-}
-/**
- * Checks if a widget should be registered as a form field
- * @param widget - The widget object to check
- * @returns true if the widget should be registered as a form field
- */
-export declare const shouldRegisterFormField: (widget: FormFieldWidget) => boolean;
-/**
- * Registers a form field widget with its parent form in the context
- * This creates references in both formfields and formWidgets collections
- *
- * @param widgetsContext - The Widgets context object where forms are stored
- * @param widget - The widget/proxy to register
- * @param widgetProps - The widget properties containing form metadata
- */
-export declare const registerFormField: (widgetsContext: WidgetsContext, widget: any, widgetProps: FormFieldWidget, newContext: any) => void;
-/**
- * Ensures the form structure exists in the widgets context and registers a form field
- * with safe object spreading to merge properties
- *
- * @param widgetsContext - The Widgets context object where forms are stored
- * @param fieldProps - The field properties to register
- */
-export declare const registerFormFieldSafe: (widgetsContext: WidgetsContext, fieldProps: FormFieldWidget) => void;
-/**
- * Unregisters a form field from its parent form
- *
- * @param widgetsContext - The Widgets context object where forms are stored
- * @param formName - The name of the parent form
- * @param fieldName - The name of the field to unregister
- * @param formKey - Optional form key (defaults to fieldName if not provided)
- */
-export declare const unregisterFormField: (widgetsContext: WidgetsContext, formName: string, fieldName: string, formKey?: string) => void;
-export {};

package/utils/form-state.util.js

@@ -1,109 +0,0 @@
-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;
-};
-import get from "lodash-es/get";
-const isFormField = (widgetName) => {
-  return !(widgetName == null ? void 0 : widgetName.includes("formWidget"));
-};
-const shouldRegisterFormField = (widget) => {
-  const isField = get(widget, "field", "false") === "true";
-  const hasFormName = Boolean(widget.formName);
-  const isNotFormWidget = isFormField(widget.name);
-  return isField && hasFormName && isNotFormWidget;
-};
-const hasParentForm = (formName) => {
-  return Boolean();
-};
-const registerFormField = (widgetsContext, widget, widgetProps, newContext) => {
-  var _a;
-  const formName = widgetProps == null ? void 0 : widgetProps.formName;
-  if (!formName || !shouldRegisterFormField(widgetProps)) {
-    return;
-  }
-  const formKey = widgetProps.formKey || widgetProps.fieldName;
-  const fieldName = widgetProps.fieldName;
-  if (!formKey || !fieldName) {
-    return;
-  }
-  if (!widgetsContext[formName]) {
-    return;
-  }
-  widgetsContext[formName].formfields = widgetsContext[formName].formfields || {};
-  widgetsContext[formName].formWidgets = widgetsContext[formName].formWidgets || {};
-  widgetsContext[formName].formfields[formKey] = widget;
-  widgetsContext[formName].formWidgets[fieldName] = widget;
-  widgetsContext[formName].formfields[`${fieldName}_formWidget`] = widget;
-  widgetsContext[formName].formWidgets[`${fieldName}_formWidget`] = widget;
-  const parentFormName = (_a = widgetsContext[formName]) == null ? void 0 : _a.parentForm;
-  if (parentFormName && widgetsContext[parentFormName]) {
-    widgetsContext[parentFormName].formfields = widgetsContext[parentFormName].formfields || {};
-    widgetsContext[parentFormName].formWidgets = widgetsContext[parentFormName].formWidgets || {};
-    widgetsContext[parentFormName].formfields[formKey] = widget;
-    widgetsContext[parentFormName].formWidgets[fieldName] = widget;
-    widgetsContext[parentFormName].formfields[`${formKey}_formWidget`] = widget;
-    widgetsContext[parentFormName].formWidgets[`${fieldName}_formWidget`] = widget;
-  }
-};
-const registerFormFieldSafe = (widgetsContext, fieldProps) => {
-  var _a;
-  const formName = fieldProps == null ? void 0 : fieldProps.formName;
-  if (!formName || !shouldRegisterFormField(fieldProps)) {
-    return;
-  }
-  const formKey = fieldProps.formKey || fieldProps.fieldName;
-  const fieldName = fieldProps.fieldName;
-  if (!formKey || !fieldName) {
-    return;
-  }
-  function register(formName2, formKey2, fieldName2, fieldProps2) {
-    var _a2, _b, _c, _d, _e;
-    (_a2 = widgetsContext[formName2]) != null ? _a2 : widgetsContext[formName2] = {
-      formfields: {},
-      formWidgets: {}
-    };
-    (_c = (_b = widgetsContext[formName2]).formfields) != null ? _c : _b.formfields = {};
-    (_e = (_d = widgetsContext[formName2]).formWidgets) != null ? _e : _d.formWidgets = {};
-    widgetsContext[formName2].formfields[formKey2] = __spreadValues({}, fieldProps2);
-    widgetsContext[formName2].formWidgets[fieldName2] = __spreadValues({}, fieldProps2);
-    widgetsContext[formName2].formfields[`${fieldName2}_formWidget`] = __spreadValues({}, fieldProps2);
-    widgetsContext[formName2].formWidgets[`${fieldName2}_formWidget`] = __spreadValues({}, fieldProps2);
-  }
-  register(formName, formKey, fieldName, fieldProps);
-  const parentForm = (_a = widgetsContext[formName]) == null ? void 0 : _a.parentForm;
-  if (parentForm) {
-    register(parentForm, formKey, fieldName, fieldProps);
-  }
-};
-const unregisterFormField = (widgetsContext, formName, fieldName, formKey) => {
-  if (!widgetsContext[formName]) {
-    return;
-  }
-  const keyToRemove = formKey || fieldName;
-  if (widgetsContext[formName].formfields) {
-    delete widgetsContext[formName].formfields[keyToRemove];
-    delete widgetsContext[formName].formfields[`${fieldName}_formWidget`];
-  }
-  if (widgetsContext[formName].formWidgets) {
-    delete widgetsContext[formName].formWidgets[fieldName];
-    delete widgetsContext[formName].formWidgets[`${fieldName}_formWidget`];
-  }
-};
-export {
-  registerFormField,
-  registerFormFieldSafe,
-  shouldRegisterFormField,
-  unregisterFormField
-};