@wavemaker/react-runtime 11.14.1-rc.236

package/utils/state-persistance.js

@@ -0,0 +1,343 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setWidgetState = exports.getWidgetState = exports.clearWidgetState = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lodashEs = require("lodash-es");
+// Storage keys
+var WM_STATE_KEY = "wm_state";
+var WM_STATE_URL_PARAM = "wm_state";
+// Default workspace name
+var DEFAULT_WORKSPACE = "ws";
+
+// Generate storage key for localStorage/sessionStorage (page-specific)
+var getStorageKey = function 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() {
+  if (typeof window === "undefined") return "";
+  var 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) {
+    if (obj === null) return "null";
+    if (obj === undefined) 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("_") + "*";
+    }
+    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 (pairs.length === 0) return "()";
+      return "(" + pairs.join("_") + ")";
+    }
+    return String(obj);
+  };
+  return customStringify(jsonObj);
+};
+
+// Decode URL-encoded format back to object
+var uriToJson = function uriToJson(encodedObj) {
+  try {
+    // First decode any URL encoding
+    var decoded = decodeURIComponent(encodedObj);
+
+    // Custom parser for our format
+    var parse = function parse(str) {
+      var startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      if (str[startIndex] === "(") {
+        // Parse object
+        var obj = {};
+        var i = startIndex + 1;
+        while (i < str.length && str[i] !== ")") {
+          // Check for empty object
+          if (str[i] === ")") break;
+
+          // Parse key
+          var key = "";
+          while (i < str.length && str[i] !== "~") {
+            key += str[i];
+            i++;
+          }
+          i++; // skip '~'
+
+          // Parse value
+          var _parse = parse(str, i),
+            _value = _parse.value,
+            endIndex = _parse.endIndex;
+          obj[key] = _value;
+          i = endIndex;
+          if (str[i] === "_") {
+            i++; // skip '_' separator
+          }
+        }
+        return {
+          value: obj,
+          endIndex: i + 1
+        }; // skip ')'
+      } else if (str[startIndex] === "!") {
+        // Parse array
+        var arr = [];
+        var _i2 = startIndex + 1;
+        while (_i2 < str.length && str[_i2] !== "*") {
+          var _parse2 = parse(str, _i2),
+            _value2 = _parse2.value,
+            _endIndex = _parse2.endIndex;
+          arr.push(_value2);
+          _i2 = _endIndex;
+          if (str[_i2] === "_") {
+            _i2++; // skip '_' separator
+          }
+        }
+        return {
+          value: arr,
+          endIndex: _i2 + 1
+        }; // skip '*'
+      } else {
+        // Parse primitive
+        var _value3 = "";
+        var _i3 = startIndex;
+        while (_i3 < str.length && str[_i3] !== "_" && str[_i3] !== ")" && str[_i3] !== "*") {
+          _value3 += str[_i3];
+          _i3++;
+        }
+
+        // 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
+          };
+        }
+        return {
+          value: _value3,
+          endIndex: _i3
+        };
+      }
+    };
+    var _parse3 = parse(decoded),
+      value = _parse3.value;
+    return value;
+  } catch (e) {
+    console.warn("Failed to parse state from URL:", e);
+    return {};
+  }
+};
+
+// Get all widget states from storage
+var getAllStates = function getAllStates(storage) {
+  switch (storage) {
+    case "localStorage":
+      var localData = localStorage.getItem(getStorageKey());
+      try {
+        return localData ? JSON.parse(localData) : {};
+      } catch (_unused) {
+        return {};
+      }
+    case "sessionStorage":
+      var sessionData = sessionStorage.getItem(getStorageKey());
+      try {
+        return sessionData ? JSON.parse(sessionData) : {};
+      } catch (_unused2) {
+        return {};
+      }
+    case "URL":
+      // Get the raw URL parameter value
+      var searchParams = window.location.search;
+      var match = searchParams.match(new RegExp("[?&]".concat(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) {
+  switch (storage) {
+    case "localStorage":
+      localStorage.setItem(getStorageKey(), JSON.stringify(states));
+      break;
+    case "sessionStorage":
+      sessionStorage.setItem(getStorageKey(), JSON.stringify(states));
+      break;
+    case "URL":
+      var url = new URL(window.location.href);
+      var urlParams = new URLSearchParams(url.search);
+      if ((0, _lodashEs.keys)(states).length > 0) {
+        // Use Angular's encoding approach
+        var encodedState = jsonToUri(states);
+
+        // Remove existing wm_state param
+        urlParams["delete"](WM_STATE_URL_PARAM);
+
+        // Build URL manually to avoid double encoding
+        var newSearch = urlParams.toString();
+        if (newSearch) {
+          newSearch += "&";
+        }
+        newSearch += "".concat(WM_STATE_URL_PARAM, "=").concat(encodedState);
+        url.search = newSearch ? "?" + newSearch : "";
+      } else {
+        urlParams["delete"](WM_STATE_URL_PARAM);
+        url.search = urlParams.toString();
+      }
+      window.history.replaceState({
+        path: url.toString()
+      }, "", url.toString());
+      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
+  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];
+    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;
+  }
+};
+var setWidgetState = exports.setWidgetState = function setWidgetState(config, value) {
+  var name = config.name,
+    type = config.type,
+    storage = config.storage;
+  if (storage === "none") {
+    return;
+  }
+  var allStates = getAllStates(storage);
+
+  // For URL storage, use flat structure (Angular style)
+  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);
+      } else {
+        allStates[DEFAULT_WORKSPACE][name] = value;
+      }
+    } else {
+      allStates[DEFAULT_WORKSPACE][name] = value;
+    }
+  } else {
+    // For localStorage/sessionStorage, use page-specific structure
+    var currentPageName = getCurrentPageName();
+
+    // Ensure the hierarchy exists: Page -> workspace -> widget
+    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);
+      } else {
+        allStates[currentPageName][DEFAULT_WORKSPACE][name] = value;
+      }
+    } else {
+      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;
+  if (storage === "none") {
+    return;
+  }
+  var allStates = getAllStates(storage);
+
+  // For URL storage, use flat structure
+  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) {
+        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]) {
+      delete allStates[currentPageName][DEFAULT_WORKSPACE][name];
+
+      // Clean up empty objects
+      if ((0, _lodashEs.keys)(allStates[currentPageName][DEFAULT_WORKSPACE]).length === 0) {
+        delete allStates[currentPageName][DEFAULT_WORKSPACE];
+      }
+      if ((0, _lodashEs.keys)(allStates[currentPageName]).length === 0) {
+        delete allStates[currentPageName];
+      }
+    }
+  }
+
+  // Save the updated state hierarchy
+  setAllStates(storage, allStates);
+};

package/utils/style-utils.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sanitizeStyleObject = exports.mergeStyleObjects = exports.isValidStyleObject = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+/**
+ * Utility functions for CSS style handling and validation
+ */
+
+/**
+ * Validates and sanitizes a style object to ensure it contains only valid CSS properties
+ * @param styleObj - The style object to sanitize
+ * @returns A sanitized style object with only valid CSS properties
+ */
+var sanitizeStyleObject = exports.sanitizeStyleObject = function sanitizeStyleObject(styleObj) {
+  if (!styleObj || (0, _typeof2["default"])(styleObj) !== "object") {
+    return {};
+  }
+
+  // Filter out invalid CSS properties and values
+  var validStyles = {};
+  Object.entries(styleObj).forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    // Skip if key is not a string or value is null/undefined
+    if (typeof key === "string" && value != null) {
+      // Convert camelCase to kebab-case for CSS properties if needed
+      // and ensure the value is a valid CSS value
+      if (typeof value === "string" || typeof value === "number") {
+        validStyles[key] = value;
+      }
+    }
+  });
+  return validStyles;
+};
+
+/**
+ * Merges multiple style objects safely, sanitizing each one
+ * @param styleObjects - Array of style objects to merge
+ * @returns A merged and sanitized style object
+ */
+var mergeStyleObjects = exports.mergeStyleObjects = function mergeStyleObjects() {
+  for (var _len = arguments.length, styleObjects = new Array(_len), _key = 0; _key < _len; _key++) {
+    styleObjects[_key] = arguments[_key];
+  }
+  var sanitizedStyles = styleObjects.map(sanitizeStyleObject);
+  return Object.assign.apply(Object, [{}].concat((0, _toConsumableArray2["default"])(sanitizedStyles)));
+};
+
+/**
+ * Validates if a value is a valid CSS style object
+ * @param value - The value to check
+ * @returns True if the value is a valid style object
+ */
+var isValidStyleObject = exports.isValidStyleObject = function isValidStyleObject(value) {
+  if (!value || (0, _typeof2["default"])(value) !== "object" || Array.isArray(value)) {
+    return false;
+  }
+
+  // Check if all keys are strings and values are valid CSS values
+  return Object.entries(value).every(function (_ref3) {
+    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+      key = _ref4[0],
+      val = _ref4[1];
+    return typeof key === "string" && val != null && (typeof val === "string" || typeof val === "number");
+  });
+};