@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

package/utils/state-persistance.js

@@ -1,287 +1,195 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.setWidgetState = exports.markPageNavigationPending = exports.isPageNavigationPending = exports.getWidgetState = exports.clearWidgetState = exports.clearPageNavigationPending = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _lodashEs = require("lodash-es");
-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; }
-// Storage keys
-var WM_STATE_KEY = "wm_state";
-var WM_STATE_URL_PARAM = "wm_state";
-// Default workspace name
-var DEFAULT_WORKSPACE = "ws";
-
-// Page navigation tracking - prevents router.replace() from overwriting router.push()
-// when both are called during the same event (e.g., click on container inside list)
-var pageNavigationPending = false;
-var navigationClearTimeout = null;
-
-/**
- * Marks that a page navigation (router.push) is about to occur.
- * This prevents URL state persistence (router.replace) from overwriting the navigation.
- * Must be called SYNCHRONOUSLY before router.push() is invoked.
- * Auto-clears after 2 seconds to prevent getting stuck.
- */
-var markPageNavigationPending = exports.markPageNavigationPending = function markPageNavigationPending() {
+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 { keys, merge, isObject, isArray } from "lodash-es";
+const WM_STATE_KEY = "wm_state";
+const WM_STATE_URL_PARAM = "wm_state";
+const DEFAULT_WORKSPACE = "ws";
+let pageNavigationPending = false;
+let navigationClearTimeout = null;
+const markPageNavigationPending = () => {
   pageNavigationPending = true;
-
-  // Clear any existing timeout
   if (navigationClearTimeout) {
     clearTimeout(navigationClearTimeout);
   }
-
-  // Auto-clear after 2 seconds to prevent getting stuck
-  // (navigation should complete well before this)
-  navigationClearTimeout = setTimeout(function () {
+  navigationClearTimeout = setTimeout(() => {
     pageNavigationPending = false;
     navigationClearTimeout = null;
-  }, 2000);
+  }, 2e3);
 };
-
-/**
- * Clears the page navigation pending flag.
- * Called after navigation completes or is cancelled.
- */
-var clearPageNavigationPending = exports.clearPageNavigationPending = function clearPageNavigationPending() {
+const clearPageNavigationPending = () => {
   pageNavigationPending = false;
   if (navigationClearTimeout) {
     clearTimeout(navigationClearTimeout);
     navigationClearTimeout = null;
   }
 };
-
-/**
- * Checks if page navigation is currently pending.
- */
-var isPageNavigationPending = exports.isPageNavigationPending = function isPageNavigationPending() {
-  return pageNavigationPending;
-};
-
-// Generate storage key for localStorage/sessionStorage (page-specific)
-var getStorageKey = function getStorageKey() {
+const isPageNavigationPending = () => pageNavigationPending;
+const getStorageKey = () => {
   if (typeof window === "undefined") return WM_STATE_KEY;
   return window.location.pathname.replace(/\//g, "").replace("react-pages/", "") + "_" + WM_STATE_KEY;
 };
-
-// Get current page name from pathname
-var getCurrentPageName = function getCurrentPageName() {
+const getCurrentPageName = () => {
   if (typeof window === "undefined") return "";
-  var segments = window.location.pathname.split("/").filter(Boolean);
+  const segments = window.location.pathname.split("/").filter(Boolean);
   return segments[segments.length - 1] || "Main";
 };
-
-// Convert JSON to URL-friendly encoded format (no quotes needed)
-var jsonToUri = function jsonToUri(jsonObj) {
-  // Custom stringify that doesn't use quotes
-  var _customStringify = function customStringify(obj) {
+const jsonToUri = (jsonObj) => {
+  const customStringify = (obj) => {
     if (obj === null) return "null";
-    if (obj === undefined) return "undefined";
+    if (obj === void 0) return "undefined";
     if (typeof obj === "string") return obj;
     if (typeof obj === "number" || typeof obj === "boolean") return String(obj);
     if (Array.isArray(obj)) {
       if (obj.length === 0) return "!*";
-      return "!" + obj.map(_customStringify).join("_") + "*";
+      return "!" + obj.map(customStringify).join("_") + "*";
     }
-    if ((0, _typeof2["default"])(obj) === "object") {
-      var pairs = [];
-      for (var _i = 0, _Object$entries = Object.entries(obj); _i < _Object$entries.length; _i++) {
-        var _Object$entries$_i = (0, _slicedToArray2["default"])(_Object$entries[_i], 2),
-          key = _Object$entries$_i[0],
-          value = _Object$entries$_i[1];
-        pairs.push(key + "~" + _customStringify(value));
+    if (typeof obj === "object") {
+      const pairs = [];
+      for (const [key, value] of Object.entries(obj)) {
+        pairs.push(key + "~" + customStringify(value));
       }
       if (pairs.length === 0) return "()";
       return "(" + pairs.join("_") + ")";
     }
     return String(obj);
   };
-  return _customStringify(jsonObj);
+  return customStringify(jsonObj);
 };
-
-// Decode URL-encoded format back to object
-var uriToJson = function uriToJson(encodedObj) {
+const uriToJson = (encodedObj) => {
   try {
-    // First decode any URL encoding
-    var decoded = decodeURIComponent(encodedObj);
-
-    // Custom parser for our format
-    var _parse3 = function parse(str) {
-      var startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    const decoded = decodeURIComponent(encodedObj);
+    const parse = (str, startIndex = 0) => {
       if (str[startIndex] === "(") {
-        // Parse object
-        var obj = {};
-        var i = startIndex + 1;
+        const obj = {};
+        let i = startIndex + 1;
         while (i < str.length && str[i] !== ")") {
-          // Check for empty object
           if (str[i] === ")") break;
-
-          // Parse key
-          var key = "";
+          let key = "";
           while (i < str.length && str[i] !== "~") {
             key += str[i];
             i++;
           }
-          i++; // skip '~'
-
-          // Parse value
-          var _parse = _parse3(str, i),
-            _value = _parse.value,
-            endIndex = _parse.endIndex;
-          obj[key] = _value;
+          i++;
+          const { value: value2, endIndex } = parse(str, i);
+          obj[key] = value2;
           i = endIndex;
           if (str[i] === "_") {
-            i++; // skip '_' separator
+            i++;
           }
         }
-        return {
-          value: obj,
-          endIndex: i + 1
-        }; // skip ')'
+        return { value: obj, endIndex: i + 1 };
       } else if (str[startIndex] === "!") {
-        // Parse array
-        var arr = [];
-        var _i2 = startIndex + 1;
-        while (_i2 < str.length && str[_i2] !== "*") {
-          var _parse2 = _parse3(str, _i2),
-            _value2 = _parse2.value,
-            _endIndex = _parse2.endIndex;
-          arr.push(_value2);
-          _i2 = _endIndex;
-          if (str[_i2] === "_") {
-            _i2++; // skip '_' separator
+        const arr = [];
+        let i = startIndex + 1;
+        while (i < str.length && str[i] !== "*") {
+          const { value: value2, endIndex } = parse(str, i);
+          arr.push(value2);
+          i = endIndex;
+          if (str[i] === "_") {
+            i++;
           }
         }
-        return {
-          value: arr,
-          endIndex: _i2 + 1
-        }; // skip '*'
+        return { value: arr, endIndex: i + 1 };
       } else {
-        // Parse primitive
-        var _value3 = "";
-        var _i3 = startIndex;
-        while (_i3 < str.length && str[_i3] !== "_" && str[_i3] !== ")" && str[_i3] !== "*") {
-          _value3 += str[_i3];
-          _i3++;
+        let value2 = "";
+        let i = startIndex;
+        while (i < str.length && str[i] !== "_" && str[i] !== ")" && str[i] !== "*") {
+          value2 += str[i];
+          i++;
         }
-
-        // Convert to appropriate type
-        if (_value3 === "null") return {
-          value: null,
-          endIndex: _i3
-        };
-        if (_value3 === "undefined") return {
-          value: undefined,
-          endIndex: _i3
-        };
-        if (_value3 === "true") return {
-          value: true,
-          endIndex: _i3
-        };
-        if (_value3 === "false") return {
-          value: false,
-          endIndex: _i3
-        };
-
-        // Check if it's a number
-        var num = Number(_value3);
-        if (!isNaN(num) && _value3 !== "") {
-          return {
-            value: num,
-            endIndex: _i3
-          };
+        if (value2 === "null") return { value: null, endIndex: i };
+        if (value2 === "undefined") return { value: void 0, endIndex: i };
+        if (value2 === "true") return { value: true, endIndex: i };
+        if (value2 === "false") return { value: false, endIndex: i };
+        const num = Number(value2);
+        if (!isNaN(num) && value2 !== "") {
+          return { value: num, endIndex: i };
         }
-        return {
-          value: _value3,
-          endIndex: _i3
-        };
+        return { value: value2, endIndex: i };
       }
     };
-    var _parse4 = _parse3(decoded),
-      value = _parse4.value;
+    const { value } = parse(decoded);
     return value;
   } catch (e) {
     console.warn("Failed to parse state from URL:", e);
     return {};
   }
 };
-
-// URL state update batching - prevents Chrome IPC flooding (crbug.com/1038223) when many
-// widgets call replaceState during the same React commit phase (e.g., multiple tables mounting)
-var pendingUrlStates = null;
-var urlStateRafId = null;
-var flushPendingUrlState = function flushPendingUrlState() {
+let pendingUrlStates = null;
+let urlStateRafId = null;
+const flushPendingUrlState = () => {
   urlStateRafId = null;
   if (pendingUrlStates === null) return;
-  var states = pendingUrlStates;
+  const states = pendingUrlStates;
   pendingUrlStates = null;
-  var currentUrl = window.location.href;
-  var url = new URL(window.location.href);
-  var urlParams = new URLSearchParams(url.search);
-  if ((0, _lodashEs.keys)(states).length > 0) {
-    var encodedState = jsonToUri(states);
-    urlParams["delete"](WM_STATE_URL_PARAM);
-    var newSearch = urlParams.toString();
+  const currentUrl = window.location.href;
+  const url = new URL(window.location.href);
+  const urlParams = new URLSearchParams(url.search);
+  if (keys(states).length > 0) {
+    const encodedState = jsonToUri(states);
+    urlParams.delete(WM_STATE_URL_PARAM);
+    let newSearch = urlParams.toString();
     if (newSearch) newSearch += "&";
-    newSearch += "".concat(WM_STATE_URL_PARAM, "=").concat(encodedState);
+    newSearch += `${WM_STATE_URL_PARAM}=${encodedState}`;
     url.search = newSearch ? "?" + newSearch : "";
   } else {
-    urlParams["delete"](WM_STATE_URL_PARAM);
+    urlParams.delete(WM_STATE_URL_PARAM);
     url.search = urlParams.toString();
   }
   if (currentUrl !== url.toString() && !pageNavigationPending) {
-    var newPath = url.pathname + url.search;
-    window.history.replaceState(_objectSpread({}, window.history.state), "", newPath);
+    const newPath = url.pathname + url.search;
+    window.history.replaceState(__spreadValues({}, window.history.state), "", newPath);
   }
 };
-var scheduleUrlStateUpdate = function scheduleUrlStateUpdate(states) {
+const scheduleUrlStateUpdate = (states) => {
   pendingUrlStates = states;
   if (urlStateRafId === null) {
     urlStateRafId = requestAnimationFrame(flushPendingUrlState);
   }
 };
-
-// Get all widget states from storage
-var getAllStates = function getAllStates(storage) {
+const getAllStates = (storage) => {
   switch (storage) {
     case "localStorage":
-      var localData = localStorage.getItem(getStorageKey());
+      const localData = localStorage.getItem(getStorageKey());
       try {
         return localData ? JSON.parse(localData) : {};
-      } catch (_unused) {
+      } catch (e) {
         return {};
       }
     case "sessionStorage":
-      var sessionData = sessionStorage.getItem(getStorageKey());
+      const sessionData = sessionStorage.getItem(getStorageKey());
       try {
         return sessionData ? JSON.parse(sessionData) : {};
-      } catch (_unused2) {
+      } catch (e) {
         return {};
       }
     case "URL":
-      // Use pending state when available - ensures consistency when URL updates are batched
       if (pendingUrlStates !== null) {
-        return _objectSpread({}, pendingUrlStates);
+        return __spreadValues({}, pendingUrlStates);
       }
-      // Get the raw URL parameter value
-      var searchParams = window.location.search;
-      var match = searchParams.match(new RegExp("[?&]".concat(WM_STATE_URL_PARAM, "=([^&]+)")));
+      const searchParams = window.location.search;
+      const match = searchParams.match(new RegExp(`[?&]${WM_STATE_URL_PARAM}=([^&]+)`));
       if (!match || !match[1]) return {};
-
-      // Use Angular's decoding approach
       return uriToJson(match[1]);
     default:
       return {};
   }
 };
-
-// Set all widget states to storage
-var setAllStates = function setAllStates(storage, states) {
+const setAllStates = (storage, states) => {
   switch (storage) {
     case "localStorage":
       localStorage.setItem(getStorageKey(), JSON.stringify(states));
@@ -290,52 +198,37 @@ var setAllStates = function setAllStates(storage, states) {
       sessionStorage.setItem(getStorageKey(), JSON.stringify(states));
       break;
     case "URL":
-      // Batch URL updates via requestAnimationFrame to prevent Chrome IPC flooding
-      // when many widgets (tables, lists, etc.) update state during the same commit phase
       scheduleUrlStateUpdate(states);
       break;
   }
 };
-var getWidgetState = exports.getWidgetState = function getWidgetState(config) {
-  var name = config.name,
-    type = config.type,
-    storage = config.storage;
-  var allStates = getAllStates(storage);
-
-  // For URL storage, use flat structure (Angular style)
-  // For localStorage/sessionStorage, use page-specific structure
+const getWidgetState = (config) => {
+  var _a, _b, _c;
+  const { name, type, storage } = config;
+  const allStates = getAllStates(storage);
   if (storage === "URL") {
-    var _allStates$DEFAULT_WO;
-    var widgetData = (_allStates$DEFAULT_WO = allStates[DEFAULT_WORKSPACE]) === null || _allStates$DEFAULT_WO === void 0 ? void 0 : _allStates$DEFAULT_WO[name];
+    const widgetData = (_a = allStates[DEFAULT_WORKSPACE]) == null ? void 0 : _a[name];
     return widgetData || null;
   } else {
-    var _allStates$currentPag;
-    var currentPageName = getCurrentPageName();
-    var _widgetData = (_allStates$currentPag = allStates[currentPageName]) === null || _allStates$currentPag === void 0 || (_allStates$currentPag = _allStates$currentPag[DEFAULT_WORKSPACE]) === null || _allStates$currentPag === void 0 ? void 0 : _allStates$currentPag[name];
-    return _widgetData || null;
+    const currentPageName = getCurrentPageName();
+    const widgetData = (_c = (_b = allStates[currentPageName]) == null ? void 0 : _b[DEFAULT_WORKSPACE]) == null ? void 0 : _c[name];
+    return widgetData || null;
   }
 };
-var setWidgetState = exports.setWidgetState = function setWidgetState(config, value) {
-  var name = config.name,
-    type = config.type,
-    storage = config.storage;
+const setWidgetState = (config, value) => {
+  const { name, type, storage } = config;
   if (storage === "none") {
     return;
   }
-  var allStates = getAllStates(storage);
-
-  // For URL storage, use flat structure (Angular style)
+  const allStates = getAllStates(storage);
   if (storage === "URL") {
-    // Ensure the workspace exists
     if (!allStates[DEFAULT_WORKSPACE]) {
       allStates[DEFAULT_WORKSPACE] = {};
     }
-
-    // Update the specific widget state
-    if ((0, _lodashEs.isObject)(value) && !(0, _lodashEs.isArray)(value) && allStates[DEFAULT_WORKSPACE][name]) {
-      var existingValue = allStates[DEFAULT_WORKSPACE][name];
-      if ((0, _lodashEs.isObject)(existingValue) && !(0, _lodashEs.isArray)(existingValue)) {
-        (0, _lodashEs.merge)(existingValue, value);
+    if (isObject(value) && !isArray(value) && allStates[DEFAULT_WORKSPACE][name]) {
+      const existingValue = allStates[DEFAULT_WORKSPACE][name];
+      if (isObject(existingValue) && !isArray(existingValue)) {
+        merge(existingValue, value);
       } else {
         allStates[DEFAULT_WORKSPACE][name] = value;
       }
@@ -343,22 +236,17 @@ var setWidgetState = exports.setWidgetState = function setWidgetState(config, va
       allStates[DEFAULT_WORKSPACE][name] = value;
     }
   } else {
-    // For localStorage/sessionStorage, use page-specific structure
-    var currentPageName = getCurrentPageName();
-
-    // Ensure the hierarchy exists: Page -> workspace -> widget
+    const currentPageName = getCurrentPageName();
     if (!allStates[currentPageName]) {
       allStates[currentPageName] = {};
     }
     if (!allStates[currentPageName][DEFAULT_WORKSPACE]) {
       allStates[currentPageName][DEFAULT_WORKSPACE] = {};
     }
-
-    // Update the specific widget state
-    if ((0, _lodashEs.isObject)(value) && !(0, _lodashEs.isArray)(value) && allStates[currentPageName][DEFAULT_WORKSPACE][name]) {
-      var _existingValue = allStates[currentPageName][DEFAULT_WORKSPACE][name];
-      if ((0, _lodashEs.isObject)(_existingValue) && !(0, _lodashEs.isArray)(_existingValue)) {
-        (0, _lodashEs.merge)(_existingValue, value);
+    if (isObject(value) && !isArray(value) && allStates[currentPageName][DEFAULT_WORKSPACE][name]) {
+      const existingValue = allStates[currentPageName][DEFAULT_WORKSPACE][name];
+      if (isObject(existingValue) && !isArray(existingValue)) {
+        merge(existingValue, value);
       } else {
         allStates[currentPageName][DEFAULT_WORKSPACE][name] = value;
       }
@@ -366,46 +254,41 @@ var setWidgetState = exports.setWidgetState = function setWidgetState(config, va
       allStates[currentPageName][DEFAULT_WORKSPACE][name] = value;
     }
   }
-
-  // Save the updated state hierarchy
   setAllStates(storage, allStates);
 };
-var clearWidgetState = exports.clearWidgetState = function clearWidgetState(config) {
-  var name = config.name,
-    type = config.type,
-    storage = config.storage;
+const clearWidgetState = (config) => {
+  var _a;
+  const { name, type, storage } = config;
   if (storage === "none") {
     return;
   }
-  var allStates = getAllStates(storage);
-
-  // For URL storage, use flat structure
+  const allStates = getAllStates(storage);
   if (storage === "URL") {
     if (allStates[DEFAULT_WORKSPACE]) {
       delete allStates[DEFAULT_WORKSPACE][name];
-
-      // Clean up empty workspace
-      if ((0, _lodashEs.keys)(allStates[DEFAULT_WORKSPACE]).length === 0) {
+      if (keys(allStates[DEFAULT_WORKSPACE]).length === 0) {
         delete allStates[DEFAULT_WORKSPACE];
       }
     }
   } else {
-    var _allStates$currentPag2;
-    // For localStorage/sessionStorage, use page-specific structure
-    var currentPageName = getCurrentPageName();
-    if ((_allStates$currentPag2 = allStates[currentPageName]) !== null && _allStates$currentPag2 !== void 0 && _allStates$currentPag2[DEFAULT_WORKSPACE]) {
+    const currentPageName = getCurrentPageName();
+    if ((_a = allStates[currentPageName]) == null ? void 0 : _a[DEFAULT_WORKSPACE]) {
       delete allStates[currentPageName][DEFAULT_WORKSPACE][name];
-
-      // Clean up empty objects
-      if ((0, _lodashEs.keys)(allStates[currentPageName][DEFAULT_WORKSPACE]).length === 0) {
+      if (keys(allStates[currentPageName][DEFAULT_WORKSPACE]).length === 0) {
         delete allStates[currentPageName][DEFAULT_WORKSPACE];
       }
-      if ((0, _lodashEs.keys)(allStates[currentPageName]).length === 0) {
+      if (keys(allStates[currentPageName]).length === 0) {
         delete allStates[currentPageName];
       }
     }
   }
-
-  // Save the updated state hierarchy
   setAllStates(storage, allStates);
-};
+};
+export {
+  clearPageNavigationPending,
+  clearWidgetState,
+  getWidgetState,
+  isPageNavigationPending,
+  markPageNavigationPending,
+  setWidgetState
+};

package/utils/style-utils.d.ts

@@ -26,3 +26,5 @@ export declare const filterAutoLayoutClasses: (layoutClassName: string | undefin
  * (e.g. `100%`, `2rem`, `10px`).
  */
 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;