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

package/higherOrder/BasePage.js

@@ -1,210 +1,190 @@
-"use strict";
 "use client";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withPageContext = exports["default"] = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _navigation = require("next/navigation");
-var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
-var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
-var _merge = _interopRequireDefault(require("lodash-es/merge"));
-var _compare = _interopRequireDefault(require("../core/util/compare"));
-var _WidgetProvider = require("@wavemaker-ai/react-runtime/context/WidgetProvider");
-var _spinner = require("@wavemaker-ai/react-runtime/components/basic/spinner");
-var _appVariablesStore = require("@wavemaker-ai/react-runtime/core/appVariablesStore");
-var _store = require("@wavemaker-ai/react-runtime/store");
-var _AppContext = require("@wavemaker-ai/react-runtime/context/AppContext");
-var _useAccess2 = _interopRequireDefault(require("@wavemaker-ai/react-runtime/hooks/useAccess"));
-var _authSlice = require("@wavemaker-ai/react-runtime/store/slices/authSlice");
-var _types = require("@wavemaker-ai/react-runtime/types");
-var _proxyService = require("@wavemaker-ai/react-runtime/core/proxy-service");
-var _helper = require("@wavemaker-ai/react-runtime/higherOrder/helper");
-var _toast = require("@wavemaker-ai/react-runtime/actions/toast.service");
-var _appstore = _interopRequireDefault(require("@wavemaker-ai/react-runtime/core/appstore"));
-var _scriptRegistry = require("@wavemaker-ai/react-runtime/core/script-registry");
-var _formatters = _interopRequireDefault(require("../core/formatters"));
-var _AppContext2 = require("../context/AppContext");
-var _pageParamsUtil = require("../utils/page-params-util");
-var _AppSpinnerProvider = require("../context/AppSpinnerProvider");
-var _get = _interopRequireDefault(require("lodash-es/get"));
-var _events = require("../core/constants/events");
-var _libErrorSkipper = require("../utils/lib-error-skipper");
-var _viewport = require("../store/viewport.service");
-var _util = require("../core/util");
-var _utils = require("../core/util/utils");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var withPageContext = exports.withPageContext = function withPageContext(WrappedComponent, addPageScript, getVariables, componentInfo, prefabInfo) {
-  var PageContextComponent = function PageContextComponent(props) {
-    var _useAppSpinner, _info$appConfig;
-    var dispatch = (0, _store.useAppDispatch)();
-    var _ref = (_useAppSpinner = (0, _AppSpinnerProvider.useAppSpinner)()) !== null && _useAppSpinner !== void 0 ? _useAppSpinner : {},
-      show = _ref.show,
-      hide = _ref.hide;
-    var i18n = (0, _store.useAppSelector)(function (state) {
-      return state.i18n;
-    });
-    var info = (0, _store.useAppSelector)(function (state) {
-      return state.info;
-    });
-    var pageParams = (0, _navigation.useSearchParams)();
-    // Get app context if available (when used within BaseApp)
-    var appContext = (0, _AppContext.useAppContext)();
-    var appProxy = (0, _AppContext2.useAppProxy)();
-
-    // Use optimized access hook instead of useAccess
-    var _useAccess = (0, _useAccess2["default"])({
-        componentName: (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName) || "Main",
-        type: (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) || "PAGE"
-      }),
-      hasAccess = _useAccess.hasAccess,
-      accessLoading = _useAccess.loading,
-      accessError = _useAccess.error;
-
-    // Get security status for debugging
-    var isSecurityEnabled = (0, _store.useAppSelector)(function (state) {
-      var _state$auth$securityC;
-      return (_state$auth$securityC = state.auth.securityConfig) === null || _state$auth$securityC === void 0 ? void 0 : _state$auth$securityC.isSecurityEnabled;
-    });
-    var securityConfig = (0, _store.useAppSelector)(function (state) {
-      return state.auth.securityConfig;
-    });
-    var isAuthenticated = (0, _store.useAppSelector)(function (state) {
-      var _state$auth$loggedInU;
-      return (_state$auth$loggedInU = state.auth.loggedInUser) === null || _state$auth$loggedInU === void 0 ? void 0 : _state$auth$loggedInU.isAuthenticated;
-    });
-    var loggedInUser = (0, _store.useAppSelector)(function (state) {
-      return state.auth.loggedInUser;
-    });
-    var appConfig = (0, _store.useAppSelector)(function (state) {
-      return state.info.appConfig;
-    });
-    var pendingAccordionExpansion = (0, _store.useAppSelector)(function (state) {
-      return state.navigation.pendingAccordionExpansion;
-    });
-    var pendingTabSelection = (0, _store.useAppSelector)(function (state) {
-      return state.navigation.pendingTabSelection;
+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 { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { useSearchParams } from "next/navigation";
+import isEqual from "lodash-es/isEqual";
+import cloneDeep from "lodash-es/cloneDeep";
+import merge from "lodash-es/merge";
+import compare from "../core/util/compare";
+import { WidgetProvider } from "../context/WidgetProvider";
+import { WmSpinner } from "../components/basic/spinner";
+import { getAppVariablesInstance } from "../core/appVariablesStore";
+import { useAppSelector, useAppDispatch } from "../store";
+import { useAppContext } from "../context/AppContext";
+import useAccess from "../hooks/useAccess";
+import { redirectToLogin } from "../store/slices/authSlice";
+import {
+  VariableEvents
+} from "../types";
+import { createStateProxy } from "../core/proxy-service";
+import {
+  accordionExpansionHandler,
+  mergeVariablesAndActions,
+  tabSelectionHandler
+} from "./helper";
+import { toastService } from "../actions/toast.service";
+import appstore from "../core/appstore";
+import {
+  createOverriddenPropsRegistry,
+  withSuspendedTracking
+} from "../core/script-registry";
+import formatters from "../core/formatters";
+import { useAppProxy } from "../context/AppContext";
+import {
+  computeMergedPageParams,
+  computePartialParamKey,
+  extractPartialParamValues
+} from "../utils/page-params-util";
+import { useAppSpinner } from "../context/AppSpinnerProvider";
+import get from "lodash-es/get";
+import { EVENTEMITTER_METHODS } from "../core/constants/events";
+import { wrapWithThirdPartyErrorGuard } from "../utils/lib-error-skipper";
+import { viewportService } from "../store/viewport.service";
+import { formatMessage } from "../core/util";
+const withPageContext = (WrappedComponent, addPageScript, getVariables, componentInfo, prefabInfo) => {
+  const PageContextComponent = (props) => {
+    var _a, _b, _c;
+    const dispatch = useAppDispatch();
+    const { show, hide } = (_a = useAppSpinner()) != null ? _a : {};
+    const i18n = useAppSelector((state) => state.i18n);
+    const info = useAppSelector((state) => state.info);
+    const pageParams = useSearchParams();
+    const appContext = useAppContext();
+    const appProxy = useAppProxy();
+    const {
+      hasAccess,
+      loading: accessLoading,
+      error: accessError
+    } = useAccess({
+      componentName: (componentInfo == null ? void 0 : componentInfo.componentName) || "Main",
+      type: (componentInfo == null ? void 0 : componentInfo.componentType) || "PAGE"
     });
-
-    // Initialization state management
-    var _useState = (0, _react.useState)(false),
-      isInitialized = _useState[0],
-      setIsInitialized = _useState[1];
-    var _useState2 = (0, _react.useState)(false),
-      startupComplete = _useState2[0],
-      setStartupComplete = _useState2[1];
-    var _useState3 = (0, _react.useState)(false),
-      isLayoutReady = _useState3[0],
-      setIsLayoutReady = _useState3[1];
-
-    // Refs for managing component lifecycle
-    var redirectHandledRef = (0, _react.useRef)(false);
-    var subscriptionsRef = (0, _react.useRef)([]);
-    var pendingStartupOpsRef = (0, _react.useRef)(new Set());
-    var startUpVariableLoadedRef = (0, _react.useRef)(false);
-    var pageProxyRef = (0, _react.useRef)(null);
-    var urlTabProcessedRef = (0, _react.useRef)(false); // Track if URL tab parameter has been processed
-    var isInitializingRef = (0, _react.useRef)(false);
-    var isMountedRef = (0, _react.useRef)(true);
-    var appVarSubscriptionsDoneRef = (0, _react.useRef)(false);
-    var subscribedVariableNamesRef = (0, _react.useRef)(new Set());
-    var overriddenPropsRegistryRef = (0, _react.useRef)(null);
-    var onStartupCompletedRef = (0, _react.useRef)(false);
-    var _useState4 = (0, _react.useState)(false),
-      isPageReady = _useState4[0],
-      setIsPageReady = _useState4[1];
-    var pageReady = (0, _react.useCallback)(function () {
+    const isSecurityEnabled = useAppSelector(
+      (state) => {
+        var _a2;
+        return (_a2 = state.auth.securityConfig) == null ? void 0 : _a2.isSecurityEnabled;
+      }
+    );
+    const securityConfig = useAppSelector((state) => state.auth.securityConfig);
+    const isAuthenticated = useAppSelector(
+      (state) => {
+        var _a2;
+        return (_a2 = state.auth.loggedInUser) == null ? void 0 : _a2.isAuthenticated;
+      }
+    );
+    const appConfig = useAppSelector((state) => state.info.appConfig);
+    const pendingAccordionExpansion = useAppSelector(
+      (state) => state.navigation.pendingAccordionExpansion
+    );
+    const pendingTabSelection = useAppSelector(
+      (state) => state.navigation.pendingTabSelection
+    );
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [isLayoutReady, setIsLayoutReady] = useState(false);
+    const redirectHandledRef = useRef(false);
+    const subscriptionsRef = useRef([]);
+    const pendingStartupOpsRef = useRef(/* @__PURE__ */ new Set());
+    const startUpVariableLoadedRef = useRef(false);
+    const pageProxyRef = useRef(null);
+    const urlTabProcessedRef = useRef(false);
+    const isInitializingRef = useRef(false);
+    const isMountedRef = useRef(true);
+    const appVarSubscriptionsDoneRef = useRef(false);
+    const subscribedVariableNamesRef = useRef(/* @__PURE__ */ new Set());
+    const overriddenPropsRegistryRef = useRef(null);
+    const onStartupCompletedRef = useRef(false);
+    const [isPageReady, setIsPageReady] = useState(false);
+    const pageReady = useCallback(() => {
       setIsPageReady(true);
     }, []);
-
-    // Initial page context state
-    var _useState5 = (0, _react.useState)(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-        Widgets: {},
-        Variables: {},
-        Actions: {},
-        onReady: function onReady() {},
-        serviceDefinitions: (0, _cloneDeep["default"])((prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.serviceDefs) || (appContext === null || appContext === void 0 ? void 0 : appContext.serviceDefinitions) || {}),
-        pageParams: props.pageParams || {},
-        baseUrl: (prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.baseUrl) || (info === null || info === void 0 || (_info$appConfig = info.appConfig) === null || _info$appConfig === void 0 ? void 0 : _info$appConfig.url) || "",
-        appConfig: appContext === null || appContext === void 0 ? void 0 : appContext.appConfig,
-        notification: {},
-        toaster: _toast.toastService,
-        onContentReady: onContentReady,
-        onChange: updateWidgetState,
-        pageReady: pageReady,
-        App: {},
-        eval: appContext === null || appContext === void 0 ? void 0 : appContext.eval,
-        appLocale: (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.appLocale) || i18n.appLocale || {},
-        localeFormats: {
-          date: i18n.dateFormat,
-          time: i18n.timeFormat,
-          currency: i18n.currencyCode
-        }
-      }, prefabInfo), props), componentInfo), {}, {
-        executeStartup: executeStartup,
-        formatters: _formatters["default"],
-        Viewport: _viewport.viewportService.getViewport(),
-        formatMessage: _util.formatMessage,
-        overriddenPropsRegistryRef: overriddenPropsRegistryRef.current,
-        layoutReady: layoutReady,
-        activePageName: componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName
-      })),
-      pageContext = _useState5[0],
-      setPageContext = _useState5[1];
-    // Enhanced initial app config that inherits from app context if available
-    var initialAppConfig = (0, _react.useMemo)(function () {
-      return appContext;
-    }, [appContext]);
-
-    // Compute a stable key from partial param values for dependency tracking
-    var partialParamValuesKey = (0, _pageParamsUtil.computePartialParamKey)(componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType, props.params, props);
-    var authLoggedInUser = (0, _store.useAppSelector)(function (state) {
-      return state.auth.loggedInUser;
-    });
-    (0, _react.useEffect)(function () {
+    const [pageContext, setPageContext] = useState(__spreadProps(__spreadValues(__spreadValues(__spreadValues({
+      Widgets: {},
+      Variables: {},
+      Actions: {},
+      onReady: () => {
+      },
+      serviceDefinitions: cloneDeep(
+        (prefabInfo == null ? void 0 : prefabInfo.serviceDefs) || (appContext == null ? void 0 : appContext.serviceDefinitions) || {}
+      ),
+      pageParams: props.pageParams || {},
+      baseUrl: (prefabInfo == null ? void 0 : prefabInfo.baseUrl) || ((_b = info == null ? void 0 : info.appConfig) == null ? void 0 : _b.url) || "",
+      appConfig: appContext == null ? void 0 : appContext.appConfig,
+      notification: {},
+      toaster: toastService,
+      onContentReady,
+      onChange: updateWidgetState,
+      pageReady,
+      App: {},
+      eval: appContext == null ? void 0 : appContext.eval,
+      appLocale: (componentInfo == null ? void 0 : componentInfo.appLocale) || i18n.appLocale || {},
+      localeFormats: {
+        date: i18n.dateFormat,
+        time: i18n.timeFormat,
+        currency: i18n.currencyCode
+      }
+    }, prefabInfo), props), componentInfo), {
+      executeStartup,
+      formatters,
+      Viewport: viewportService.getViewport(),
+      formatMessage,
+      overriddenPropsRegistryRef: overriddenPropsRegistryRef.current,
+      layoutReady,
+      activePageName: componentInfo == null ? void 0 : componentInfo.componentName
+    }));
+    const initialAppConfig = useMemo(() => appContext, [appContext]);
+    const partialParamValuesKey = computePartialParamKey(
+      componentInfo == null ? void 0 : componentInfo.componentType,
+      props.params,
+      props
+    );
+    const authLoggedInUser = useAppSelector((state) => state.auth.loggedInUser);
+    useEffect(() => {
       if (!pageProxyRef.current) return;
       pageProxyRef.current.appConfig.loggedInUser = authLoggedInUser;
-      setPageContext(function (prev) {
-        return _objectSpread(_objectSpread({}, prev), {}, {
-          appConfig: _objectSpread(_objectSpread({}, prev.appConfig), {}, {
-            loggedInUser: authLoggedInUser
-          })
-        });
-      });
+      setPageContext((prev) => __spreadProps(__spreadValues({}, prev), {
+        appConfig: __spreadProps(__spreadValues({}, prev.appConfig), { loggedInUser: authLoggedInUser })
+      }));
     }, [authLoggedInUser]);
-    (0, _react.useEffect)(function () {
-      pageContext.serviceDefinitions = (0, _cloneDeep["default"])((prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.serviceDefs) || (appContext === null || appContext === void 0 ? void 0 : appContext.serviceDefinitions) || {});
-      setPageContext(function (prev) {
-        return _objectSpread(_objectSpread({}, prev), {}, {
-          serviceDefinitions: (0, _cloneDeep["default"])((prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.serviceDefs) || (appContext === null || appContext === void 0 ? void 0 : appContext.serviceDefinitions) || {})
-        });
-      });
-    }, [appContext === null || appContext === void 0 ? void 0 : appContext.serviceDefinitions, prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.serviceDefs]);
-    // Subscribe for partial params changes - sync prop values to pageParams
-    (0, _react.useEffect)(function () {
-      if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) !== "PARTIAL" || !pageProxyRef.current) {
+    useEffect(() => {
+      pageContext.serviceDefinitions = cloneDeep(
+        (prefabInfo == null ? void 0 : prefabInfo.serviceDefs) || (appContext == null ? void 0 : appContext.serviceDefinitions) || {}
+      );
+      setPageContext((prev) => __spreadProps(__spreadValues({}, prev), {
+        serviceDefinitions: cloneDeep(
+          (prefabInfo == null ? void 0 : prefabInfo.serviceDefs) || (appContext == null ? void 0 : appContext.serviceDefinitions) || {}
+        )
+      }));
+    }, [appContext == null ? void 0 : appContext.serviceDefinitions, prefabInfo == null ? void 0 : prefabInfo.serviceDefs]);
+    useEffect(() => {
+      if ((componentInfo == null ? void 0 : componentInfo.componentType) !== "PARTIAL" || !pageProxyRef.current) {
         return;
       }
-      var paramValues = (0, _pageParamsUtil.extractPartialParamValues)(props.params || [], props);
-
-      // Update pageParams for each param key when prop values change
-      Object.entries(paramValues).forEach(function (_ref2) {
-        var _pageProxyRef$current;
-        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
-          key = _ref3[0],
-          newValue = _ref3[1];
-        if (!(0, _isEqual["default"])((_pageProxyRef$current = pageProxyRef.current.pageParams) === null || _pageProxyRef$current === void 0 ? void 0 : _pageProxyRef$current[key], newValue)) {
+      const paramValues = extractPartialParamValues(
+        props.params || [],
+        props
+      );
+      Object.entries(paramValues).forEach(([key, newValue]) => {
+        var _a2;
+        if (!isEqual((_a2 = pageProxyRef.current.pageParams) == null ? void 0 : _a2[key], newValue)) {
           if (!pageProxyRef.current.pageParams) {
             pageProxyRef.current.pageParams = {};
           }
@@ -212,70 +192,57 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
         }
       });
     }, [partialParamValuesKey]);
-
-    // Handle redirect to login if authentication is required
-    (0, _react.useEffect)(function () {
-      var _appConfig$pages;
-      if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) !== "PAGE" || redirectHandledRef.current || accessLoading || !isSecurityEnabled) {
+    useEffect(() => {
+      var _a2;
+      if ((componentInfo == null ? void 0 : componentInfo.componentType) !== "PAGE" || redirectHandledRef.current || accessLoading || !isSecurityEnabled) {
         return;
       }
-
-      // Check if page requires authentication
-      var pageConfig = appConfig === null || appConfig === void 0 || (_appConfig$pages = appConfig.pages) === null || _appConfig$pages === void 0 ? void 0 : _appConfig$pages.find(function (p) {
-        var _componentInfo$compon;
-        return p.name.toLowerCase() === (componentInfo === null || componentInfo === void 0 || (_componentInfo$compon = componentInfo.componentName) === null || _componentInfo$compon === void 0 ? void 0 : _componentInfo$compon.toLowerCase());
-      });
-
-      // Redirect to login if page requires authentication and user is not authenticated
-      var requiresAuth = (pageConfig === null || pageConfig === void 0 ? void 0 : pageConfig.permission) === "Authenticated" || (pageConfig === null || pageConfig === void 0 ? void 0 : pageConfig.permission) === "Role";
+      const pageConfig = (_a2 = appConfig == null ? void 0 : appConfig.pages) == null ? void 0 : _a2.find(
+        (p) => {
+          var _a3;
+          return p.name.toLowerCase() === ((_a3 = componentInfo == null ? void 0 : componentInfo.componentName) == null ? void 0 : _a3.toLowerCase());
+        }
+      );
+      const requiresAuth = (pageConfig == null ? void 0 : pageConfig.permission) === "Authenticated" || (pageConfig == null ? void 0 : pageConfig.permission) === "Role";
       if (requiresAuth && !isAuthenticated) {
         redirectHandledRef.current = true;
-        dispatch((0, _authSlice.redirectToLogin)({
-          redirectTo: componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName,
-          securityConfig: securityConfig
-        }));
+        dispatch(
+          redirectToLogin({
+            redirectTo: componentInfo == null ? void 0 : componentInfo.componentName,
+            securityConfig
+          })
+        );
       }
-    }, [accessLoading, isSecurityEnabled, isAuthenticated, appConfig, componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType, componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName, dispatch, securityConfig]);
-
-    // Check if we should proceed with initialization
-    var shouldInitialize = (0, _react.useMemo)(function () {
-      // Wait for app to be ready (if app context exists)
+    }, [
+      accessLoading,
+      isSecurityEnabled,
+      isAuthenticated,
+      appConfig,
+      componentInfo == null ? void 0 : componentInfo.componentType,
+      componentInfo == null ? void 0 : componentInfo.componentName,
+      dispatch,
+      securityConfig
+    ]);
+    const shouldInitialize = useMemo(() => {
       if (appContext && !appContext.isAppReady) {
         return false;
       }
-
-      // Wait for access check to complete
       if (accessLoading) {
         return false;
       }
-
-      // Don't initialize if no access
-      if (!hasAccess && isSecurityEnabled) {
-        if (isAuthenticated) {
-          var _pageContext$appLocal;
-          appContext === null || appContext === void 0 || appContext.notifyApp((pageContext === null || pageContext === void 0 || (_pageContext$appLocal = pageContext.appLocale) === null || _pageContext$appLocal === void 0 || (_pageContext$appLocal = _pageContext$appLocal.LABELS) === null || _pageContext$appLocal === void 0 ? void 0 : _pageContext$appLocal.ACCESS_DENIED) || "Access Denied", "Error");
-        }
-        return false;
-      }
       return true;
-    }, [appContext === null || appContext === void 0 ? void 0 : appContext.isAppReady, accessLoading, hasAccess, isSecurityEnabled, isAuthenticated]);
-
-    // Update page context with app variables when app context changes
-    (0, _react.useEffect)(function () {
-      if (!(appContext !== null && appContext !== void 0 && appContext.isAppReady) || !pageProxyRef.current) {
+    }, [appContext == null ? void 0 : appContext.isAppReady, accessLoading, hasAccess, isSecurityEnabled, isAuthenticated]);
+    useEffect(() => {
+      if (!(appContext == null ? void 0 : appContext.isAppReady) || !pageProxyRef.current) {
         return;
       }
-
-      // Update page context with app variables without triggering re-initialization
-      setPageContext(function (prev) {
-        var updatedVariables = _objectSpread(_objectSpread({}, prev.Variables), appContext.Variables || {});
-        var updatedActions = _objectSpread(_objectSpread({}, prev.Actions), appContext.Actions || {});
-
-        // Update proxy with the same object references
+      setPageContext((prev) => {
+        const updatedVariables = __spreadValues(__spreadValues({}, prev.Variables), appContext.Variables || {});
+        const updatedActions = __spreadValues(__spreadValues({}, prev.Actions), appContext.Actions || {});
         pageProxyRef.current.Variables = updatedVariables;
         pageProxyRef.current.Actions = updatedActions;
-        return _objectSpread(_objectSpread({}, prev), {}, {
-          App: _objectSpread(_objectSpread({}, prev.App), {}, {
+        return __spreadProps(__spreadValues({}, prev), {
+          App: __spreadProps(__spreadValues({}, prev.App), {
             Variables: appContext.Variables || {},
             Actions: appContext.Actions || {}
           }),
@@ -283,135 +250,93 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
           Actions: updatedActions
         });
       });
-    }, [appContext === null || appContext === void 0 ? void 0 : appContext.isAppReady, appContext === null || appContext === void 0 ? void 0 : appContext.Variables, appContext === null || appContext === void 0 ? void 0 : appContext.Actions]);
-
-    // Main initialization effect - runs only when conditions are met
-    (0, _react.useEffect)(function () {
-      // Early returns for non-initialization cases
+    }, [appContext == null ? void 0 : appContext.isAppReady, appContext == null ? void 0 : appContext.Variables, appContext == null ? void 0 : appContext.Actions]);
+    useEffect(() => {
       if (!shouldInitialize || isInitialized || isInitializingRef.current || !isMountedRef.current) {
         return;
       }
-
-      // Set initialization flag
       isInitializingRef.current = true;
-      var initializeComponent = /*#__PURE__*/function () {
-        var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-          var pageProxy, pageVariables, appVariables, APP_VARIABLES, _mergeVariablesAndAct, Variables, Actions, urlParams, newParams, localeFormats, _pageName;
-          return _regenerator["default"].wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                try {
-                  // Create overridden props registry
-                  overriddenPropsRegistryRef.current = (0, _scriptRegistry.createOverriddenPropsRegistry)();
-                  // Create page proxy
-                  pageProxy = (0, _proxyService.createStateProxy)(pageContext, [], setPageContext, overriddenPropsRegistryRef.current);
-                  pageProxyRef.current = pageProxy;
-
-                  // Initialize variables and actions
-                  pageVariables = getVariables(pageProxy); // Handle app variables based on app context availability
-                  appVariables = {
-                    Variables: {},
-                    Actions: {}
-                  };
-                  if (appContext !== null && appContext !== void 0 && appContext.isAppReady) {
-                    // If app context is available and ready, use app variables directly
-                    appVariables = {
-                      Variables: appContext.Variables || {},
-                      Actions: appContext.Actions || {}
-                    };
-                  } else {
-                    // Fallback to traditional app variable initialization
-                    // @ts-ignore
-                    APP_VARIABLES = _appstore["default"].get("AppConfig").appVariables;
-                    appVariables = APP_VARIABLES ? (0, _appVariablesStore.getAppVariablesInstance)(pageProxy, APP_VARIABLES) : {
-                      Variables: {},
-                      Actions: {}
-                    };
-                  }
-                  _mergeVariablesAndAct = (0, _helper.mergeVariablesAndActions)(pageVariables, appVariables), Variables = _mergeVariablesAndAct.Variables, Actions = _mergeVariablesAndAct.Actions; // Compute page params from URL and include partial params when applicable
-                  urlParams = Object.fromEntries(pageParams.entries());
-                  newParams = (0, _pageParamsUtil.computeMergedPageParams)(urlParams, {
-                    componentType: componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType,
-                    props: props
-                  });
-                  appProxy.appLocale = i18n.appLocale || {};
-                  localeFormats = {
-                    date: i18n.dateFormat,
-                    time: i18n.timeFormat,
-                    currency: i18n.currencyCode
-                  };
-                  appProxy.localeFormats = localeFormats;
-                  pageProxy.localeFormats = localeFormats;
-
-                  // Update proxy with merged variables and actions
-                  pageProxy.Variables = Variables;
-                  pageProxy.Actions = Actions;
-                  pageProxy.pageParams = _objectSpread({}, newParams);
-                  pageProxy.pageReady = pageReady;
-                  pageProxy.App = _objectSpread(_objectSpread({}, appProxy), initialAppConfig);
-                  pageProxy.selectedLocale = i18n.selectedLocale || "en";
-                  pageProxy.overriddenPropsRegistry = overriddenPropsRegistryRef.current;
-
-                  // Setup variable event handlers
-                  setupVariableSubscriptions(pageVariables.Variables);
-                  if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PAGE" && appProxy) {
-                    _pageName = componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName;
-                    appProxy.updateActivePage(_pageName);
-                    appProxy.activePage = pageProxy;
-                    appProxy.activePageName = _pageName;
-                    appProxy.Widgets = (0, _utils.mergeProxies)(appProxy.Widgets, pageProxy.Widgets);
-                  } else if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName) === "Common" && (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PARTIAL" && appProxy) {
-                    appProxy.Widgets = (0, _utils.mergeProxies)(appProxy.Widgets, pageProxy.Widgets);
-                  }
-
-                  // Initialize page script
-                  addPageScript(appProxy, pageProxy);
-
-                  // Gaurd for unsupported third party functionality
-                  (0, _libErrorSkipper.wrapWithThirdPartyErrorGuard)(pageProxy, appContext, (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName) || "Prefab");
-
-                  // Setup global wm object for pages
-                  if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PAGE") {
-                    global.wm = appProxy ? _objectSpread(_objectSpread({}, pageProxy), {}, {
-                      App: appProxy
-                    }) : pageProxy;
-                  }
-
-                  // Mark as initialized
-                  setIsInitialized(true);
-                } catch (error) {
-                  console.error("Error during component initialization:", error);
-                  // Still mark as initialized to prevent hanging
-                  setIsInitialized(true);
-                } finally {
-                  isInitializingRef.current = false;
-                }
-              case 1:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        return function initializeComponent() {
-          return _ref4.apply(this, arguments);
-        };
-      }();
+      const initializeComponent = async () => {
+        var _a2;
+        try {
+          overriddenPropsRegistryRef.current = createOverriddenPropsRegistry();
+          const pageProxy = createStateProxy(
+            pageContext,
+            [],
+            setPageContext,
+            overriddenPropsRegistryRef.current
+          );
+          pageProxyRef.current = pageProxy;
+          const pageVariables = getVariables(pageProxy);
+          let appVariables = { Variables: {}, Actions: {} };
+          if (appContext == null ? void 0 : appContext.isAppReady) {
+            appVariables = {
+              Variables: appContext.Variables || {},
+              Actions: appContext.Actions || {}
+            };
+          } else {
+            const APP_VARIABLES = appstore.get("AppConfig").appVariables;
+            appVariables = APP_VARIABLES ? getAppVariablesInstance(pageProxy, APP_VARIABLES) : { Variables: {}, Actions: {} };
+          }
+          const { Variables, Actions } = mergeVariablesAndActions(pageVariables, appVariables);
+          const urlParams = Object.fromEntries(pageParams.entries());
+          const newParams = computeMergedPageParams(urlParams, {
+            componentType: componentInfo == null ? void 0 : componentInfo.componentType,
+            props
+          });
+          pageProxy.pageParams = newParams;
+          if ((componentInfo == null ? void 0 : componentInfo.componentType) !== "PAGE") {
+            pageProxy.partialParams = newParams;
+            (_a2 = props.onLoad) == null ? void 0 : _a2.call(props, pageProxy);
+          }
+          appProxy.appLocale = i18n.appLocale || {};
+          const localeFormats = {
+            date: i18n.dateFormat,
+            time: i18n.timeFormat,
+            currency: i18n.currencyCode
+          };
+          appProxy.localeFormats = localeFormats;
+          pageProxy.localeFormats = localeFormats;
+          pageProxy.Variables = Variables;
+          pageProxy.Actions = Actions;
+          pageProxy.pageReady = pageReady;
+          pageProxy.App = __spreadValues(__spreadValues({}, appProxy), initialAppConfig);
+          pageProxy.selectedLocale = i18n.selectedLocale || "en";
+          pageProxy.overriddenPropsRegistry = overriddenPropsRegistryRef.current;
+          setupVariableSubscriptions(pageVariables.Variables);
+          if ((componentInfo == null ? void 0 : componentInfo.componentType) === "PAGE" && appProxy) {
+            const pageName2 = componentInfo == null ? void 0 : componentInfo.componentName;
+            appProxy.updateActivePage(pageName2);
+            appProxy.activePage = pageProxy;
+            appProxy.activePageName = pageName2;
+            Object.assign(appProxy.Widgets, pageProxy.Widgets);
+          } else if ((componentInfo == null ? void 0 : componentInfo.componentName) === "Common" && (componentInfo == null ? void 0 : componentInfo.componentType) === "PARTIAL" && appProxy) {
+            Object.assign(appProxy.Widgets, pageProxy.Widgets);
+          }
+          addPageScript(appProxy, pageProxy);
+          wrapWithThirdPartyErrorGuard(
+            pageProxy,
+            appContext,
+            (componentInfo == null ? void 0 : componentInfo.componentName) || "Prefab"
+          );
+          if ((componentInfo == null ? void 0 : componentInfo.componentType) === "PAGE") {
+            global.wm = appProxy ? __spreadProps(__spreadValues({}, pageProxy), { App: appProxy }) : pageProxy;
+          }
+          setIsInitialized(true);
+        } catch (error) {
+          console.error("Error during component initialization:", error);
+          setIsInitialized(true);
+        } finally {
+          isInitializingRef.current = false;
+        }
+      };
       initializeComponent();
-
-      // Cleanup function
-      return function () {
-        var _overriddenPropsRegis;
-        // Cancel all pending page operations
+      return () => {
+        var _a2;
         if (pageProxyRef.current) {
-          var _ref5 = getVariables(pageProxyRef.current) || {},
-            _ref5$Variables = _ref5.Variables,
-            Variables = _ref5$Variables === void 0 ? {} : _ref5$Variables,
-            _ref5$Actions = _ref5.Actions,
-            Actions = _ref5$Actions === void 0 ? {} : _ref5$Actions;
-
-          // Cancel page variables
-          Object.values(Variables).forEach(function (variable) {
-            if (variable !== null && variable !== void 0 && variable.cancel && typeof variable.cancel === "function") {
+          const { Variables = {}, Actions = {} } = getVariables(pageProxyRef.current) || {};
+          Object.values(Variables).forEach((variable) => {
+            if ((variable == null ? void 0 : variable.cancel) && typeof variable.cancel === "function") {
               try {
                 variable.cancel();
               } catch (error) {
@@ -419,10 +344,8 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
               }
             }
           });
-
-          // Cancel page actions
-          Object.values(Actions).forEach(function (action) {
-            if (action !== null && action !== void 0 && action.cancel && typeof action.cancel === "function") {
+          Object.values(Actions).forEach((action) => {
+            if ((action == null ? void 0 : action.cancel) && typeof action.cancel === "function") {
               try {
                 action.cancel();
               } catch (error) {
@@ -431,135 +354,99 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
             }
           });
         }
-
-        // Clear pending startup operations
         pendingStartupOpsRef.current.clear();
-        (_overriddenPropsRegis = overriddenPropsRegistryRef.current) === null || _overriddenPropsRegis === void 0 || _overriddenPropsRegis.clear();
-        // clearOverriddenProps();
-
-        // Unsubscribe from events
-        subscriptionsRef.current.forEach(function (_ref6) {
-          var variable = _ref6.variable,
-            event = _ref6.event,
-            handler = _ref6.handler;
-          if (variable !== null && variable !== void 0 && variable.unsubscribe) {
+        (_a2 = overriddenPropsRegistryRef.current) == null ? void 0 : _a2.clear();
+        subscriptionsRef.current.forEach(({ variable, event, handler }) => {
+          if (variable == null ? void 0 : variable.unsubscribe) {
             try {
               variable.unsubscribe(event, handler);
             } catch (error) {
-              console.warn("Failed to unsubscribe from ".concat(event, ":"), error);
+              console.warn(`Failed to unsubscribe from ${event}:`, error);
             }
           }
         });
         subscriptionsRef.current = [];
       };
-    }, [shouldInitialize]); // Only depend on shouldInitialize
-
-    // Subscribe to app-level variables when app becomes ready
-    // This MUST happen before executeStartAppOperations() is called (via executeStartup)
-    // so that widgets can receive loading state updates when app variables are invoked
-    (0, _react.useEffect)(function () {
-      if (!(appContext !== null && appContext !== void 0 && appContext.isAppReady) || !pageProxyRef.current || appVarSubscriptionsDoneRef.current) {
+    }, [shouldInitialize]);
+    useEffect(() => {
+      if (!(appContext == null ? void 0 : appContext.isAppReady) || !pageProxyRef.current || appVarSubscriptionsDoneRef.current) {
         return;
       }
       try {
-        var _ref7 = getVariables(pageProxyRef.current) || {
-            Variables: {}
-          },
-          _ref7$Variables = _ref7.Variables,
-          pageVars = _ref7$Variables === void 0 ? {} : _ref7$Variables;
-        var pageVarNames = new Set(Object.keys(pageVars || {}));
-        subscribeAppVariablesIfNeeded(appContext.Variables || {}, pageVarNames);
+        const { Variables: pageVars = {} } = getVariables(pageProxyRef.current) || {
+          Variables: {}
+        };
+        const pageVarNames = new Set(Object.keys(pageVars || {}));
+        subscribeAppVariablesIfNeeded(
+          appContext.Variables || {},
+          pageVarNames
+        );
         appVarSubscriptionsDoneRef.current = true;
       } catch (e) {
-        // no-op
       }
-    }, [appContext === null || appContext === void 0 ? void 0 : appContext.isAppReady]);
-
-    // Prefab state sync
-    (0, _react.useEffect)(function () {
-      if (prefabInfo && (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PREFAB") {
-        var handlePrefabStateRefresh = function handlePrefabStateRefresh(data) {
-          var proxy = pageProxyRef.current;
-          Object.keys(data).forEach(function (key) {
-            var _data$key$newValue;
-            var propKey = data[key].key;
-            var newValue = (_data$key$newValue = data[key].newValue) !== null && _data$key$newValue !== void 0 ? _data$key$newValue : data[key].oldValue;
-            if (newValue && (0, _typeof2["default"])(newValue) === "object") {
-              newValue = (0, _cloneDeep["default"])(newValue);
+    }, [appContext == null ? void 0 : appContext.isAppReady]);
+    useEffect(() => {
+      if (prefabInfo && (componentInfo == null ? void 0 : componentInfo.componentType) === "PREFAB") {
+        const handlePrefabStateRefresh = (data) => {
+          const proxy = pageProxyRef.current;
+          Object.keys(data).forEach((key) => {
+            var _a2;
+            const propKey = data[key].key;
+            let newValue = (_a2 = data[key].newValue) != null ? _a2 : data[key].oldValue;
+            if (newValue && typeof newValue === "object") {
+              newValue = cloneDeep(newValue);
             }
-
-            // Call onPropertyChange if available
             if (proxy && proxy.onPropertyChange) {
               proxy[propKey] = newValue;
               proxy.onPropertyChange(propKey, newValue, data[key].oldValue);
             }
           });
         };
-        _events.EVENTEMITTER_METHODS.PREFAB_STATE_SYNC_ON(prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.name, handlePrefabStateRefresh);
-        return function () {
-          _events.EVENTEMITTER_METHODS.PREFAB_STATE_SYNC_OFF(prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.name, handlePrefabStateRefresh);
+        EVENTEMITTER_METHODS.PREFAB_STATE_SYNC_ON(prefabInfo == null ? void 0 : prefabInfo.name, handlePrefabStateRefresh);
+        return () => {
+          EVENTEMITTER_METHODS.PREFAB_STATE_SYNC_OFF(prefabInfo == null ? void 0 : prefabInfo.name, handlePrefabStateRefresh);
         };
       }
-    }, [prefabInfo, componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType]);
-
-    // Setup variable subscriptions
-    var setupVariableSubscriptions = function setupVariableSubscriptions(variables) {
-      var handleVariableEvent = function handleVariableEvent(variableName, event, variable) {
-        // not required because while unmounting page,variables invocation get cancelled and state update will not happen
-
-        var updateState = variable;
-        updateState.loading = event === _types.VariableEvents.BEFORE_INVOKE;
-        updateState.error = event === _types.VariableEvents.ERROR ? variable : null;
-        if ((0, _get["default"])(variable, "spinnerContext") === "page") {
+    }, [prefabInfo, componentInfo == null ? void 0 : componentInfo.componentType]);
+    const setupVariableSubscriptions = (variables) => {
+      const handleVariableEvent = (variableName, event, variable) => {
+        const updateState = variable;
+        updateState.loading = event === VariableEvents.BEFORE_INVOKE;
+        updateState.error = event === VariableEvents.ERROR ? variable : null;
+        if (get(variable, "spinnerContext") === "page") {
           if (updateState.loading) {
-            var message = (0, _get["default"])(variable, "spinnerMessage");
+            const message = get(variable, "spinnerMessage");
             show(message);
           } else {
             hide();
           }
         }
-        setPageContext(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            Variables: _objectSpread(_objectSpread({}, prev.Variables), {}, (0, _defineProperty2["default"])({}, variableName, updateState))
-          });
-        });
-        if (event === _types.VariableEvents.AFTER_INVOKE) {
-          pendingStartupOpsRef.current["delete"](variableName);
+        setPageContext((prev) => __spreadProps(__spreadValues({}, prev), {
+          Variables: __spreadProps(__spreadValues({}, prev.Variables), {
+            [variableName]: updateState
+          })
+        }));
+        if (event === VariableEvents.AFTER_INVOKE) {
+          pendingStartupOpsRef.current.delete(variableName);
         }
       };
-
-      // Set up subscriptions (avoid duplicates by name)
-      Object.entries(variables).forEach(function (_ref8) {
-        var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
-          name = _ref9[0],
-          variable = _ref9[1];
+      Object.entries(variables).forEach(([name, variable]) => {
         if (subscribedVariableNamesRef.current.has(name)) {
           return;
         }
-        Object.values(_types.VariableEvents).forEach(function (event) {
-          var handler = function handler() {
-            return handleVariableEvent(name, event, variable);
-          };
+        Object.values(VariableEvents).forEach((event) => {
+          const handler = () => handleVariableEvent(name, event, variable);
           if (variable && typeof variable.subscribe === "function") {
             variable.subscribe(event, handler);
-            subscriptionsRef.current.push({
-              variable: variable,
-              event: event,
-              handler: handler
-            });
+            subscriptionsRef.current.push({ variable, event, handler });
           }
         });
         subscribedVariableNamesRef.current.add(name);
       });
     };
-
-    // Subscribe to app-level variables that are not shadowed by page variables
-    var subscribeAppVariablesIfNeeded = function subscribeAppVariablesIfNeeded(appVars, pageVarNames) {
-      var appVarsOnly = {};
-      Object.entries(appVars || {}).forEach(function (_ref0) {
-        var _ref1 = (0, _slicedToArray2["default"])(_ref0, 2),
-          name = _ref1[0],
-          variable = _ref1[1];
+    const subscribeAppVariablesIfNeeded = (appVars, pageVarNames) => {
+      const appVarsOnly = {};
+      Object.entries(appVars || {}).forEach(([name, variable]) => {
         if (!pageVarNames.has(name) && !subscribedVariableNamesRef.current.has(name)) {
           appVarsOnly[name] = variable;
         }
@@ -568,203 +455,111 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
         setupVariableSubscriptions(appVarsOnly);
       }
     };
-
-    // Execute startup operations
-    var executeStartupOperations = /*#__PURE__*/function () {
-      var _ref10 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(Variables, Actions) {
-        var _ref11, _ref11$startUpActions, startUpActions, _ref11$startUpVariabl, startUpVariables, variablePromises;
-        return _regenerator["default"].wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _ref11 = componentInfo || {}, _ref11$startUpActions = _ref11.startUpActions, startUpActions = _ref11$startUpActions === void 0 ? [] : _ref11$startUpActions, _ref11$startUpVariabl = _ref11.startUpVariables, startUpVariables = _ref11$startUpVariabl === void 0 ? [] : _ref11$startUpVariabl; // Track startup operations
-              startUpVariables.forEach(function (name) {
-                return pendingStartupOpsRef.current.add(name);
-              });
-              startUpActions.forEach(function (name) {
-                return pendingStartupOpsRef.current.add(name);
-              });
-
-              // If no startup operations, mark as complete immediately
-              if (!(startUpActions.length === 0 && startUpVariables.length === 0)) {
-                _context2.next = 5;
-                break;
-              }
-              return _context2.abrupt("return");
-            case 5:
-              _context2.prev = 5;
-              // Execute startup actions
-              startUpActions.forEach(function (actionName) {
-                var _Actions$actionName;
-                if ((_Actions$actionName = Actions[actionName]) !== null && _Actions$actionName !== void 0 && _Actions$actionName.invoke) {
-                  Actions[actionName].invoke();
-                }
-                pendingStartupOpsRef.current["delete"](String(actionName));
-              });
-
-              // Execute startup variables
-              variablePromises = startUpVariables.map(function (varName) {
-                var _Variables$varName;
-                if ((_Variables$varName = Variables[varName]) !== null && _Variables$varName !== void 0 && _Variables$varName.invoke) {
-                  return Variables[varName].invoke()["catch"](function (error) {
-                    console.log("Error invoking ".concat(varName, ":"), error);
-                    return null;
-                  });
-                }
-                return Promise.resolve();
-              });
-              _context2.next = 10;
-              return Promise.allSettled(variablePromises);
-            case 10:
-              startUpVariableLoadedRef.current = true;
-              pendingStartupOpsRef.current.clear();
-              setTimeout(function () {
-                if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PAGE") {
-                  appContext === null || appContext === void 0 || appContext.notify("page-variables-data-loaded", {
-                    pageName: componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName
-                  });
-                }
-              }, 0);
-              _context2.next = 18;
-              break;
-            case 15:
-              _context2.prev = 15;
-              _context2.t0 = _context2["catch"](5);
-              console.error("Error during startup operations:", _context2.t0);
-            case 18:
-            case "end":
-              return _context2.stop();
+    const executeStartupOperations = async (Variables, Actions) => {
+      const { startUpActions = [], startUpVariables = [] } = componentInfo || {};
+      startUpVariables.forEach((name) => pendingStartupOpsRef.current.add(name));
+      startUpActions.forEach((name) => pendingStartupOpsRef.current.add(name));
+      if (startUpActions.length === 0 && startUpVariables.length === 0) {
+        return;
+      }
+      try {
+        startUpActions.forEach((actionName) => {
+          var _a2;
+          if ((_a2 = Actions[actionName]) == null ? void 0 : _a2.invoke) {
+            Actions[actionName].invoke();
           }
-        }, _callee2, null, [[5, 15]]);
-      }));
-      return function executeStartupOperations(_x, _x2) {
-        return _ref10.apply(this, arguments);
-      };
-    }();
+          pendingStartupOpsRef.current.delete(String(actionName));
+        });
+        const variablePromises = startUpVariables.map((varName) => {
+          var _a2;
+          if ((_a2 = Variables[varName]) == null ? void 0 : _a2.invoke) {
+            return Variables[varName].invoke().catch((error) => {
+              console.log(`Error invoking ${varName}:`, error);
+              return null;
+            });
+          }
+          return Promise.resolve();
+        });
+        await Promise.allSettled(variablePromises);
+        startUpVariableLoadedRef.current = true;
+        pendingStartupOpsRef.current.clear();
+        setTimeout(() => {
+          if ((componentInfo == null ? void 0 : componentInfo.componentType) === "PAGE") {
+            appContext == null ? void 0 : appContext.notify("page-variables-data-loaded", {
+              pageName: componentInfo == null ? void 0 : componentInfo.componentName
+            });
+          }
+        }, 0);
+      } catch (error) {
+        console.error("Error during startup operations:", error);
+      }
+    };
     function layoutReady() {
       setIsLayoutReady(true);
     }
-
-    // Widget state update function
     function updateWidgetState(widgetName, newProps) {
       if (!widgetName || !newProps || Object.keys(newProps).length === 0) return;
-      if ((0, _compare["default"])(pageContext.Widgets[widgetName], newProps)) return;
-      var registry = overriddenPropsRegistryRef.current;
+      if (compare(pageContext.Widgets[widgetName], newProps)) return;
+      const registry = overriddenPropsRegistryRef.current;
       if (registry) {
-        Object.keys(newProps).forEach(function (key) {
-          if (newProps[key] !== undefined) {
+        Object.keys(newProps).forEach((key) => {
+          if (newProps[key] !== void 0) {
             registry.trackInternalUpdate(widgetName, key, newProps[key]);
           }
         });
       }
-      setPageContext(function (prev) {
-        return _objectSpread(_objectSpread({}, prev), {}, {
-          Widgets: _objectSpread(_objectSpread({}, prev.Widgets), {}, (0, _defineProperty2["default"])({}, widgetName, _objectSpread(_objectSpread({}, prev.Widgets[widgetName]), newProps)))
-        });
-      });
-
-      // Suspend tracking to prevent internal state updates from being tracked as script overrides
-      (0, _scriptRegistry.withSuspendedTracking)(overriddenPropsRegistryRef.current, function () {
-        Object.keys(newProps).forEach(function (key) {
-          var _pageContext$Widgets$;
-          if (!(0, _isEqual["default"])((_pageContext$Widgets$ = pageContext.Widgets[widgetName]) === null || _pageContext$Widgets$ === void 0 ? void 0 : _pageContext$Widgets$[key], newProps === null || newProps === void 0 ? void 0 : newProps[key]) && (newProps === null || newProps === void 0 ? void 0 : newProps[key]) !== undefined) {
-            var _pageProxyRef$current2;
-            if ((_pageProxyRef$current2 = pageProxyRef.current) !== null && _pageProxyRef$current2 !== void 0 && (_pageProxyRef$current2 = _pageProxyRef$current2.Widgets) !== null && _pageProxyRef$current2 !== void 0 && _pageProxyRef$current2[widgetName]) {
+      setPageContext((prev) => __spreadProps(__spreadValues({}, prev), {
+        Widgets: __spreadProps(__spreadValues({}, prev.Widgets), {
+          [widgetName]: __spreadValues(__spreadValues({}, prev.Widgets[widgetName]), newProps)
+        })
+      }));
+      withSuspendedTracking(overriddenPropsRegistryRef.current, () => {
+        Object.keys(newProps).forEach((key) => {
+          var _a2, _b2, _c2;
+          if (!isEqual((_a2 = pageContext.Widgets[widgetName]) == null ? void 0 : _a2[key], newProps == null ? void 0 : newProps[key]) && (newProps == null ? void 0 : newProps[key]) !== void 0) {
+            if ((_c2 = (_b2 = pageProxyRef.current) == null ? void 0 : _b2.Widgets) == null ? void 0 : _c2[widgetName]) {
               pageProxyRef.current.Widgets[widgetName][key] = newProps[key];
             }
           }
         });
       });
     }
-
-    // Content ready callback
-    function onContentReady() {
-      return _onContentReady.apply(this, arguments);
-    }
-    function _onContentReady() {
-      _onContentReady = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-        return _regenerator["default"].wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
-            case 0:
-              if (!pageContext.onReady) {
-                _context4.next = 3;
-                break;
-              }
-              _context4.next = 3;
-              return pageContext.onReady();
-            case 3:
-              if (appContext !== null && appContext !== void 0 && appContext.onPageReady && pageContext.componentType === "PAGE") {
-                appContext.onPageReady(pageContext.componentName, pageProxyRef.current, undefined);
-              }
-              return _context4.abrupt("return", Promise.resolve());
-            case 5:
-            case "end":
-              return _context4.stop();
-          }
-        }, _callee4);
-      }));
-      return _onContentReady.apply(this, arguments);
-    }
-    function executeStartup() {
-      return _executeStartup.apply(this, arguments);
+    async function onContentReady() {
+      if (pageContext.onReady) {
+        await pageContext.onReady();
+      }
+      if ((appContext == null ? void 0 : appContext.onPageReady) && pageContext.componentType === "PAGE") {
+        appContext.onPageReady(pageContext.componentName, pageProxyRef.current, void 0);
+      }
+      return Promise.resolve();
     }
-    function _executeStartup() {
-      _executeStartup = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-        return _regenerator["default"].wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
-            case 0:
-              _context5.next = 2;
-              return appContext === null || appContext === void 0 ? void 0 : appContext.executeStartAppOperations();
-            case 2:
-            case "end":
-              return _context5.stop();
-          }
-        }, _callee5);
-      }));
-      return _executeStartup.apply(this, arguments);
+    async function executeStartup() {
+      await (appContext == null ? void 0 : appContext.executeStartAppOperations());
     }
-    function executePageStartup() {
-      return _executePageStartup.apply(this, arguments);
-    } // Update pageContext.appLocale when i18n.appLocale changes
-    function _executePageStartup() {
-      _executePageStartup = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
-        return _regenerator["default"].wrap(function _callee6$(_context6) {
-          while (1) switch (_context6.prev = _context6.next) {
-            case 0:
-              _context6.next = 2;
-              return executeStartupOperations(pageContext.Variables, pageContext.Actions);
-            case 2:
-            case "end":
-              return _context6.stop();
-          }
-        }, _callee6);
-      }));
-      return _executePageStartup.apply(this, arguments);
+    async function executePageStartup() {
+      await executeStartupOperations(pageContext.Variables, pageContext.Actions);
     }
-    (0, _react.useEffect)(function () {
-      var newAppLocale = (0, _merge["default"])({}, i18n.appLocale || {}, (prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.appLocale) || {});
-      if (!(0, _isEqual["default"])(pageContext.appLocale, newAppLocale)) {
-        var _pageProxyRef$current3;
-        setPageContext(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            appLocale: newAppLocale
-          });
-        });
-        if ((_pageProxyRef$current3 = pageProxyRef.current) !== null && _pageProxyRef$current3 !== void 0 && _pageProxyRef$current3.App) {
+    useEffect(() => {
+      var _a2;
+      const newAppLocale = merge({}, i18n.appLocale || {}, (prefabInfo == null ? void 0 : prefabInfo.appLocale) || {});
+      if (!isEqual(pageContext.appLocale, newAppLocale)) {
+        setPageContext((prev) => __spreadProps(__spreadValues({}, prev), {
+          appLocale: newAppLocale
+        }));
+        if ((_a2 = pageProxyRef.current) == null ? void 0 : _a2.App) {
           pageProxyRef.current.App.appLocale = newAppLocale;
         }
       }
     }, [i18n.appLocale]);
-    (0, _react.useEffect)(function () {
-      var localeFormats = {
+    useEffect(() => {
+      const localeFormats = {
         date: i18n.dateFormat,
         time: i18n.timeFormat,
         currency: i18n.currencyCode
       };
-      setPageContext(function (prev) {
-        return _objectSpread(_objectSpread({}, prev), {}, {
-          localeFormats: localeFormats
-        });
-      });
+      setPageContext((prev) => __spreadProps(__spreadValues({}, prev), {
+        localeFormats
+      }));
       if (pageProxyRef.current) {
         pageProxyRef.current.localeFormats = localeFormats;
         if (pageProxyRef.current.App) {
@@ -772,138 +567,77 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
         }
       }
     }, [i18n.dateFormat, i18n.timeFormat, i18n.currencyCode]);
-    var pageName = (appProxy === null || appProxy === void 0 ? void 0 : appProxy.activePageName) || "";
-    (0, _react.useEffect)(function () {
-      if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PARTIAL" && pageName) {
-        // update the app active page name
-        setPageContext(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            App: _objectSpread(_objectSpread({}, prev.App), {}, {
-              activePageName: pageName
-            })
-          });
-        });
+    const pageName = (appProxy == null ? void 0 : appProxy.activePageName) || "";
+    useEffect(() => {
+      if ((componentInfo == null ? void 0 : componentInfo.componentType) === "PARTIAL" && pageName) {
+        setPageContext((prev) => __spreadProps(__spreadValues({}, prev), {
+          App: __spreadProps(__spreadValues({}, prev.App), {
+            activePageName: pageName
+          })
+        }));
       }
     }, [pageName]);
-
-    // Execute startup when both conditions are met:
-    // 1. Page is initialized (context ready)
-    // 2. Page component has called pageReady() after widgets have rendered and subscribed
-    (0, _react.useEffect)(function () {
+    useEffect(() => {
       if (isInitialized && isPageReady && isMountedRef.current && !onStartupCompletedRef.current && pageProxyRef.current) {
-        var runStartup = /*#__PURE__*/function () {
-          var _ref12 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-            var tabNameFromUrl, tabNameToSelect;
-            return _regenerator["default"].wrap(function _callee3$(_context3) {
-              while (1) switch (_context3.prev = _context3.next) {
-                case 0:
-                  if (isMountedRef.current) {
-                    _context3.next = 2;
-                    break;
-                  }
-                  return _context3.abrupt("return");
-                case 2:
-                  if (!(securityConfig !== null && securityConfig !== void 0 && securityConfig.authenticated && appProxy !== null && appProxy !== void 0 && appProxy.executeSessionFailureRequests)) {
-                    _context3.next = 5;
-                    break;
-                  }
-                  _context3.next = 5;
-                  return appProxy.executeSessionFailureRequests();
-                case 5:
-                  _context3.next = 7;
-                  return executeStartup();
-                case 7:
-                  _context3.next = 9;
-                  return onContentReady();
-                case 9:
-                  _context3.next = 11;
-                  return executePageStartup();
-                case 11:
-                  onStartupCompletedRef.current = true;
-                  // Handle pending accordion expansion from navigation using Redux
-                  if (pendingAccordionExpansion) {
-                    (0, _helper.accordionExpansionHandler)(pageProxyRef, pendingAccordionExpansion, dispatch);
-                  }
-
-                  // Handle tab selection from URL query parameter or Redux
-                  // URL parameter is only processed once on initial page load
-                  // Redux state is used for programmatic navigation
-                  tabNameFromUrl = !urlTabProcessedRef.current ? pageParams === null || pageParams === void 0 ? void 0 : pageParams.get("tabName") : null;
-                  tabNameToSelect = tabNameFromUrl || pendingTabSelection;
-                  if (tabNameToSelect) {
-                    (0, _helper.tabSelectionHandler)(pageProxyRef, tabNameToSelect, dispatch);
-                  }
-                case 16:
-                case "end":
-                  return _context3.stop();
-              }
-            }, _callee3);
-          }));
-          return function runStartup() {
-            return _ref12.apply(this, arguments);
-          };
-        }();
+        const runStartup = async () => {
+          if (!isMountedRef.current) return;
+          if ((securityConfig == null ? void 0 : securityConfig.authenticated) && (appProxy == null ? void 0 : appProxy.executeSessionFailureRequests)) {
+            await appProxy.executeSessionFailureRequests();
+          }
+          await executeStartup();
+          await onContentReady();
+          await executePageStartup();
+          onStartupCompletedRef.current = true;
+          if (pendingAccordionExpansion) {
+            accordionExpansionHandler(pageProxyRef, pendingAccordionExpansion, dispatch);
+          }
+          const tabNameFromUrl = !urlTabProcessedRef.current ? pageParams == null ? void 0 : pageParams.get("tabName") : null;
+          const tabNameToSelect = tabNameFromUrl || pendingTabSelection;
+          if (tabNameToSelect) {
+            tabSelectionHandler(pageProxyRef, tabNameToSelect, dispatch);
+          }
+        };
         runStartup();
       }
     }, [isInitialized, isPageReady]);
-    // Call onContentReady when startup operations are complete
-    (0, _react.useEffect)(function () {
-      if (startupComplete && (pageContext.type === "PAGE" ? isLayoutReady : true)) {
-        onContentReady();
-      }
-    }, [startupComplete, isLayoutReady]);
-    (0, _react.useEffect)(function () {
+    useEffect(() => {
       isMountedRef.current = true;
-      return function () {
+      return () => {
         isMountedRef.current = false;
-        // Cleanup viewport service when component unmounts
-        _viewport.viewportService.destroy();
+        viewportService.destroy();
       };
     }, []);
-
-    // Handle access denied case
-    if (!accessLoading && !hasAccess && !(componentInfo !== null && componentInfo !== void 0 && componentInfo.isPartOfPrefab)) {
+    if (!accessLoading && !hasAccess && !(componentInfo == null ? void 0 : componentInfo.isPartOfPrefab)) {
       return null;
     }
-
-    // Handle access error case
     if (accessError && !accessLoading) {
-      console.error("Access check failed for ".concat(componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName, ":"), accessError);
+      console.error(`Access check failed for ${componentInfo == null ? void 0 : componentInfo.componentName}:`, accessError);
       return null;
     }
-
-    // Show loading spinner while checking access or app is not ready
     if (accessLoading || appContext && !appContext.isAppReady || !isInitialized) {
-      return __jsx(_spinner.WmSpinner, {
-        name: "page",
-        caption: "",
-        listener: {}
-      });
+      return /* @__PURE__ */ jsx(WmSpinner, { name: "page", caption: "", listener: {} });
     }
-    if (appContext !== null && appContext !== void 0 && appContext.autoUpdateVariables && onStartupCompletedRef.current) {
-      var appVariables = appContext.Variables;
-      appContext.autoUpdateVariables.forEach(function (value) {
-        var _appVariables$value, _appVariables$value2;
-        ((_appVariables$value = appVariables[value]) === null || _appVariables$value === void 0 ? void 0 : _appVariables$value.invokeOnParamChange) && ((_appVariables$value2 = appVariables[value]) === null || _appVariables$value2 === void 0 ? void 0 : _appVariables$value2.invokeOnParamChange());
+    if ((appContext == null ? void 0 : appContext.autoUpdateVariables) && onStartupCompletedRef.current) {
+      const appVariables = appContext.Variables;
+      appContext.autoUpdateVariables.forEach((value) => {
+        var _a2, _b2;
+        ((_a2 = appVariables[value]) == null ? void 0 : _a2.invokeOnParamChange) && ((_b2 = appVariables[value]) == null ? void 0 : _b2.invokeOnParamChange());
       });
     }
-    if (pageContext.autoUpdateVariables && onStartupCompletedRef.current) {
-      var pageVariables = pageContext.Variables;
-      componentInfo === null || componentInfo === void 0 || componentInfo.autoUpdateVariables.forEach(function (value) {
-        var _pageVariables$value, _pageVariables$value$;
-        (_pageVariables$value = pageVariables[value]) === null || _pageVariables$value === void 0 || (_pageVariables$value$ = _pageVariables$value.invokeOnParamChange) === null || _pageVariables$value$ === void 0 || _pageVariables$value$.call(_pageVariables$value);
+    if (((_c = componentInfo == null ? void 0 : componentInfo.autoUpdateVariables) == null ? void 0 : _c.length) && onStartupCompletedRef.current) {
+      const pageVariables = pageContext.Variables;
+      componentInfo.autoUpdateVariables.forEach((value) => {
+        var _a2, _b2;
+        (_b2 = (_a2 = pageVariables[value]) == null ? void 0 : _a2.invokeOnParamChange) == null ? void 0 : _b2.call(_a2);
       });
     }
-
-    // Render the component
-    return __jsx(_WidgetProvider.WidgetProvider, {
-      value: {
-        value: pageContext,
-        proxy: pageProxyRef.current
-      }
-    }, __jsx(WrappedComponent, props));
+    return /* @__PURE__ */ jsx(WidgetProvider, { value: { value: pageContext, proxy: pageProxyRef.current }, children: /* @__PURE__ */ jsx(WrappedComponent, __spreadValues({}, props)) });
   };
-  PageContextComponent.displayName = "WithPageContext(".concat(WrappedComponent.displayName || WrappedComponent.name || "Component", ")");
+  PageContextComponent.displayName = `WithPageContext(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
   return PageContextComponent;
 };
-var _default = exports["default"] = withPageContext;
+var BasePage_default = withPageContext;
+export {
+  BasePage_default as default,
+  withPageContext
+};