@wavemaker-ai/react-runtime 1.0.0-rc.309

package/store/slices/i18nSlice.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setTimezone = exports.setTimeFormat = exports.setSelectedLocaleAndLoadBundle = exports.setDateFormat = exports.setCurrencyCode = exports.setAppLocale = exports.loadLocaleBundle = exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toolkit = require("@reduxjs/toolkit");
+var _axios = _interopRequireDefault(require("axios"));
+var _toLower = _interopRequireDefault(require("lodash-es/toLower"));
+var _map = _interopRequireDefault(require("lodash-es/map"));
+var _lodashEs = require("lodash-es");
+var _util = require("@wavemaker-ai/react-runtime/core/util");
+var _dom = require("@wavemaker-ai/react-runtime/core/util/dom");
+var _store = require("@wavemaker-ai/react-runtime/store");
+var _appstore = _interopRequireDefault(require("@wavemaker-ai/react-runtime/core/appstore"));
+var APP_LOCALE_ROOT_PATH = "/resources/i18n";
+var RTL_LANGUAGE_CODES = ["ar", "ar-001", "ar-ae", "ar-bh", "ar-dz", "ar-eg", "ar-iq", "ar-jo", "ar-kw", "ar-lb", "ar-ly", "ar-ma", "ar-om", "ar-qa", "ar-sa", "ar-sd", "ar-sy", "ar-tn", "ar-ye", "arc", "bcc", "bqi", "ckb", "dv", "fa", "glk", "he", "ku", "mzn", "pnb", "ps", "sd", "ug", "ur", "yi"];
+var initialState = {
+  selectedLocale: "",
+  defaultSupportedLocale: "en",
+  appLocale: {},
+  dateFormat: "MMM d, y",
+  timeFormat: "h:mm:ss a",
+  dateTimeFormat: "MMM d, y h:mm:ss a",
+  currencyCode: "USD",
+  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC",
+  isLoading: false,
+  error: null,
+  prefabMessages: {}
+};
+
+// check and change the direction
+function updateLocaleDirection(locale) {
+  var direction = "ltr";
+  if (RTL_LANGUAGE_CODES.includes(locale)) {
+    direction = "rtl";
+  }
+  (0, _dom.setCSS)(document.body, "direction", direction);
+}
+
+// Async thunk for loading locale bundle
+var loadLocaleBundle = exports.loadLocaleBundle = (0, _toolkit.createAsyncThunk)("i18n/loadLocaleBundle", /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(_, _ref) {
+    var rejectWithValue, appProperties, getAcceptedLanguages, _acceptLang, _defaultLanguage, preferBrowserLang, _supportedLang, _selectedDefaultLang, sessionLanguage, localLanguage, locale, url, path, response;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          getAcceptedLanguages = function _getAcceptedLanguages() {
+            var _languages;
+            var languages = decodeURIComponent(appProperties.preferredLanguage || "");
+            languages = (_languages = languages) === null || _languages === void 0 || (_languages = _languages.split(",")) === null || _languages === void 0 ? void 0 : _languages.map(function (locale) {
+              return locale === null || locale === void 0 ? void 0 : locale.split(";")[0];
+            });
+            return (0, _map["default"])(languages, _toLower["default"]);
+          };
+          rejectWithValue = _ref.rejectWithValue;
+          appProperties = _store.store.getState().info.appConfig.appProperties;
+          _acceptLang = getAcceptedLanguages();
+          _defaultLanguage = appProperties.defaultLanguage;
+          _acceptLang.push(_defaultLanguage);
+
+          // checks whether user preference is based on browser set languages or default language set in project
+          preferBrowserLang = appProperties.preferBrowserLang;
+          if (!preferBrowserLang) {
+            // when preferBrowserLang is not defined, set to its default value
+            preferBrowserLang = true;
+          } else {
+            // convert stringified boolean values recieved from BE to booleans
+            preferBrowserLang = preferBrowserLang === "true" || preferBrowserLang === true ? true : false;
+          }
+          _supportedLang = (Object === null || Object === void 0 ? void 0 : Object.keys(appProperties.supportedLanguages)) || [initialState.defaultSupportedLocale];
+          _selectedDefaultLang = preferBrowserLang ? undefined : _defaultLanguage;
+          sessionLanguage = (0, _util.getSessionStorageItem)("selectedLocale");
+          localLanguage = (0, _lodashEs.includes)(_supportedLang, sessionLanguage) && sessionLanguage;
+          locale = localLanguage || _selectedDefaultLang || (0, _lodashEs.intersection)(_acceptLang, _supportedLang)[0] || initialState.defaultSupportedLocale;
+          _context.prev = 13;
+          url = _store.store.getState().info.appConfig.url;
+          path = "".concat((url !== null && url !== void 0 ? url : "") + APP_LOCALE_ROOT_PATH, "/").concat(locale, ".json");
+          _context.next = 18;
+          return _axios["default"].get(path);
+        case 18:
+          response = _context.sent;
+          // update session language
+          (0, _util.setSessionStorageItem)("selectedLocale", locale);
+          // change direction if required
+          updateLocaleDirection(locale);
+          _appstore["default"].set("i18nService", response.data);
+          return _context.abrupt("return", {
+            data: response.data,
+            locale: locale
+          });
+        case 25:
+          _context.prev = 25;
+          _context.t0 = _context["catch"](13);
+          console.warn("Error loading locale resource: ".concat(_context.t0));
+          return _context.abrupt("return", rejectWithValue("Failed to load locale bundle"));
+        case 29:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[13, 25]]);
+  }));
+  return function (_x, _x2) {
+    return _ref2.apply(this, arguments);
+  };
+}());
+
+// Async thunk to set locale and load locale bundle
+var setSelectedLocaleAndLoadBundle = exports.setSelectedLocaleAndLoadBundle = (0, _toolkit.createAsyncThunk)("i18n/setSelectedLocaleAndLoadBundle", /*#__PURE__*/function () {
+  var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(_ref3, _ref4) {
+    var locale, dispatch, getState, localeValue, appProperties, supportedLocales, currentLocale;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          locale = _ref3.locale;
+          dispatch = _ref4.dispatch, getState = _ref4.getState;
+          localeValue = (0, _lodashEs.isObject)(locale) ? locale.datavalue : locale;
+          appProperties = _store.store.getState().info.appConfig.appProperties;
+          supportedLocales = Object.keys(appProperties.supportedLanguages);
+          if ((0, _lodashEs.includes)(supportedLocales, localeValue)) {
+            _context2.next = 7;
+            break;
+          }
+          return _context2.abrupt("return", null);
+        case 7:
+          if (!(!localeValue || localeValue === getState().i18n.selectedLocale)) {
+            _context2.next = 9;
+            break;
+          }
+          return _context2.abrupt("return", null);
+        case 9:
+          currentLocale = (0, _util.getSessionStorageItem)("selectedLocale");
+          if (!(currentLocale === localeValue)) {
+            _context2.next = 12;
+            break;
+          }
+          return _context2.abrupt("return", null);
+        case 12:
+          // Update session storage with new locale
+          (0, _util.setSessionStorageItem)("selectedLocale", localeValue);
+
+          // Change direction if required
+          updateLocaleDirection(localeValue);
+
+          // Load the locale bundle
+          _context2.next = 16;
+          return dispatch(loadLocaleBundle());
+        case 16:
+          return _context2.abrupt("return", localeValue);
+        case 17:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function (_x3, _x4) {
+    return _ref5.apply(this, arguments);
+  };
+}());
+var i18nSlice = (0, _toolkit.createSlice)({
+  name: "i18n",
+  initialState: initialState,
+  reducers: {
+    setTimezone: function setTimezone(state, action) {
+      state.timezone = action.payload;
+    },
+    setAppLocale: function setAppLocale(state, action) {
+      state.appLocale = action.payload;
+    },
+    setDateFormat: function setDateFormat(state, action) {
+      state.dateFormat = action.payload;
+      state.dateTimeFormat = "".concat(action.payload, " ").concat(state.timeFormat);
+    },
+    setTimeFormat: function setTimeFormat(state, action) {
+      state.timeFormat = action.payload;
+      state.dateTimeFormat = "".concat(state.dateFormat, " ").concat(action.payload);
+    },
+    setCurrencyCode: function setCurrencyCode(state, action) {
+      state.currencyCode = action.payload;
+    }
+  },
+  extraReducers: function extraReducers(builder) {
+    builder.addCase(loadLocaleBundle.fulfilled, function (state, action) {
+      var _action$payload$data$, _action$payload$data$2, _action$payload$data$3;
+      state.appLocale = action.payload.data.messages || {};
+      state.dateFormat = ((_action$payload$data$ = action.payload.data.formats) === null || _action$payload$data$ === void 0 ? void 0 : _action$payload$data$.date) || state.dateFormat;
+      state.timeFormat = ((_action$payload$data$2 = action.payload.data.formats) === null || _action$payload$data$2 === void 0 ? void 0 : _action$payload$data$2.time) || state.timeFormat;
+      state.currencyCode = ((_action$payload$data$3 = action.payload.data.formats) === null || _action$payload$data$3 === void 0 ? void 0 : _action$payload$data$3.currency) || state.currencyCode;
+      state.dateTimeFormat = "".concat(state.dateFormat, " ").concat(state.timeFormat);
+      state.prefabMessages = action.payload.data.prefabMessages || {};
+      state.selectedLocale = action.payload.locale || state.selectedLocale;
+    }).addCase(loadLocaleBundle.rejected, function (state, action) {
+      state.error = action.payload;
+    });
+  }
+});
+var _i18nSlice$actions = i18nSlice.actions,
+  setTimezone = exports.setTimezone = _i18nSlice$actions.setTimezone,
+  setAppLocale = exports.setAppLocale = _i18nSlice$actions.setAppLocale,
+  setDateFormat = exports.setDateFormat = _i18nSlice$actions.setDateFormat,
+  setTimeFormat = exports.setTimeFormat = _i18nSlice$actions.setTimeFormat,
+  setCurrencyCode = exports.setCurrencyCode = _i18nSlice$actions.setCurrencyCode;
+var _default = exports["default"] = i18nSlice.reducer;

package/store/slices/navigationSlice.d.ts

@@ -0,0 +1,7 @@
+export interface NavigationState {
+    pendingAccordionExpansion: string | null;
+    pendingTabSelection: string | null;
+}
+export declare const setPendingAccordionExpansion: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string, "navigation/setPendingAccordionExpansion">, clearPendingAccordionExpansion: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"navigation/clearPendingAccordionExpansion">, setPendingTabSelection: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string, "navigation/setPendingTabSelection">, clearPendingTabSelection: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"navigation/clearPendingTabSelection">;
+declare const _default: import("redux").Reducer<NavigationState>;
+export default _default;

package/store/slices/navigationSlice.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setPendingTabSelection = exports.setPendingAccordionExpansion = exports["default"] = exports.clearPendingTabSelection = exports.clearPendingAccordionExpansion = void 0;
+var _toolkit = require("@reduxjs/toolkit");
+var initialState = {
+  pendingAccordionExpansion: null,
+  pendingTabSelection: null
+};
+var navigationSlice = (0, _toolkit.createSlice)({
+  name: "navigation",
+  initialState: initialState,
+  reducers: {
+    setPendingAccordionExpansion: function setPendingAccordionExpansion(state, action) {
+      state.pendingAccordionExpansion = action.payload;
+    },
+    clearPendingAccordionExpansion: function clearPendingAccordionExpansion(state) {
+      state.pendingAccordionExpansion = null;
+    },
+    setPendingTabSelection: function setPendingTabSelection(state, action) {
+      state.pendingTabSelection = action.payload;
+    },
+    clearPendingTabSelection: function clearPendingTabSelection(state) {
+      state.pendingTabSelection = null;
+    }
+  }
+});
+var _navigationSlice$acti = navigationSlice.actions,
+  setPendingAccordionExpansion = exports.setPendingAccordionExpansion = _navigationSlice$acti.setPendingAccordionExpansion,
+  clearPendingAccordionExpansion = exports.clearPendingAccordionExpansion = _navigationSlice$acti.clearPendingAccordionExpansion,
+  setPendingTabSelection = exports.setPendingTabSelection = _navigationSlice$acti.setPendingTabSelection,
+  clearPendingTabSelection = exports.clearPendingTabSelection = _navigationSlice$acti.clearPendingTabSelection;
+var _default = exports["default"] = navigationSlice.reducer;

package/store/viewport.service.d.ts

@@ -0,0 +1,45 @@
+import EventNotifier from "@/core/event-notifier";
+export declare const enum ViewportEvent {
+    ORIENTATION_CHANGE = "orientationchange",
+    RESIZE = "resize"
+}
+export interface IViewportService {
+    notify: (eventname: ViewportEvent, options?: Array<any>) => void;
+    subscribe: (eventname: ViewportEvent, callback: (data: any) => void) => () => void;
+}
+export declare class ViewportService implements IViewportService {
+    orientation: {
+        isPortrait: boolean;
+        isLandscape: boolean;
+    };
+    isMobileType: boolean;
+    isTabletType: boolean;
+    private type;
+    _eventNotifier: EventNotifier;
+    private screenWidth;
+    private screenHeight;
+    private selectedViewPort;
+    private boundResizeFn;
+    constructor();
+    update(selectedViewPort: object): void;
+    private orientationChange;
+    private resizeFn;
+    subscribe(eventName: string, callback: (data: any) => void): () => void;
+    notify(eventName: string, ...data: Array<any>): void;
+    private setScreenType;
+    getViewport(): {
+        screenWidth: number;
+        screenHeight: number;
+        windowWidth: number;
+        windowHeight: number;
+        isMobile: boolean;
+        isTablet: boolean;
+        isDesktop: boolean;
+        orientation: {
+            isPortrait: boolean;
+            isLandscape: boolean;
+        };
+    };
+    destroy(): void;
+}
+export declare const viewportService: ViewportService;

package/store/viewport.service.js

@@ -0,0 +1,255 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.viewportService = exports.ViewportService = exports.ViewportEvent = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _eventNotifier = _interopRequireDefault(require("../core/event-notifier"));
+var _get = _interopRequireDefault(require("lodash-es/get"));
+var MINIMUM_MOBILE_WIDTH = 480;
+var MINIMUM_TAB_WIDTH = 768;
+var MINIMUM_LARGE_SCREEN_WIDTH = 1200;
+var SCREEN_TYPE = /*#__PURE__*/function (SCREEN_TYPE) {
+  SCREEN_TYPE[SCREEN_TYPE["MOBILE"] = 0] = "MOBILE";
+  SCREEN_TYPE[SCREEN_TYPE["TABLET"] = 1] = "TABLET";
+  SCREEN_TYPE[SCREEN_TYPE["LARGE_SCREEN_DEVICES"] = 2] = "LARGE_SCREEN_DEVICES";
+  return SCREEN_TYPE;
+}(SCREEN_TYPE || {});
+var ViewportEvent = exports.ViewportEvent = /*#__PURE__*/function (ViewportEvent) {
+  ViewportEvent["ORIENTATION_CHANGE"] = "orientationchange";
+  ViewportEvent["RESIZE"] = "resize";
+  return ViewportEvent;
+}({});
+var isAndroid = function isAndroid() {
+  if (typeof navigator === "undefined") return false;
+  return /Android/i.test(navigator.userAgent);
+};
+var isAndroidTablet = function isAndroidTablet() {
+  if (typeof navigator === "undefined") return false;
+  return /android|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent);
+};
+var isIos = function isIos() {
+  if (typeof navigator === "undefined") return false;
+  return /iPad|iPhone|iPod/.test(navigator.userAgent);
+};
+var ViewportService = exports.ViewportService = /*#__PURE__*/function () {
+  function ViewportService() {
+    var _this = this;
+    (0, _classCallCheck2["default"])(this, ViewportService);
+    (0, _defineProperty2["default"])(this, "orientation", {
+      isPortrait: false,
+      isLandscape: false
+    });
+    (0, _defineProperty2["default"])(this, "isMobileType", false);
+    (0, _defineProperty2["default"])(this, "isTabletType", false);
+    (0, _defineProperty2["default"])(this, "type", void 0);
+    (0, _defineProperty2["default"])(this, "_eventNotifier", new _eventNotifier["default"]());
+    (0, _defineProperty2["default"])(this, "screenWidth", 0);
+    (0, _defineProperty2["default"])(this, "screenHeight", 0);
+    (0, _defineProperty2["default"])(this, "selectedViewPort", void 0);
+    (0, _defineProperty2["default"])(this, "boundResizeFn", null);
+    if (typeof window === "undefined") return;
+    this.setScreenType();
+    this.boundResizeFn = this.resizeFn.bind(this);
+    window.addEventListener(ViewportEvent.RESIZE, this.boundResizeFn);
+    var query = window.matchMedia("(orientation: portrait)");
+    if (query.matches) {
+      this.orientation.isPortrait = true;
+    } else {
+      this.orientation.isLandscape = true;
+    }
+
+    // Add a media query change listener
+    // addEventListener is not supported ios browser
+    if (query.addEventListener) {
+      query.addEventListener("change", function ($event) {
+        return _this.orientationChange($event, !$event.matches);
+      });
+    } else if (query.addListener) {
+      query.addListener(function ($event) {
+        return _this.orientationChange($event, !$event.matches);
+      });
+    }
+  }
+  return (0, _createClass2["default"])(ViewportService, [{
+    key: "update",
+    value: function update(selectedViewPort) {
+      this.selectedViewPort = selectedViewPort;
+      this.setScreenType();
+    }
+  }, {
+    key: "orientationChange",
+    value: function orientationChange($event, isLandscape) {
+      if (isLandscape !== this.orientation.isLandscape) {
+        this.orientation.isPortrait = !isLandscape;
+        this.orientation.isLandscape = isLandscape;
+        this.notify(ViewportEvent.ORIENTATION_CHANGE, {
+          $event: $event,
+          data: {
+            isPortrait: !isLandscape,
+            isLandscape: isLandscape
+          }
+        });
+      }
+    }
+  }, {
+    key: "resizeFn",
+    value: function resizeFn($event) {
+      var $el = document.querySelector(".wm-app");
+      if (!$el) {
+        return;
+      }
+      this.setScreenType();
+      this.orientationChange($event, this.screenWidth >= this.screenHeight);
+      this.notify(ViewportEvent.RESIZE, {
+        $event: $event,
+        data: {
+          screenWidth: this.screenWidth,
+          screenHeight: this.screenHeight
+        }
+      });
+    }
+  }, {
+    key: "subscribe",
+    value: function subscribe(eventName, callback) {
+      return this._eventNotifier.subscribe(eventName, callback);
+    }
+  }, {
+    key: "notify",
+    value: function notify(eventName) {
+      for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        data[_key - 1] = arguments[_key];
+      }
+      this._eventNotifier.notify(eventName, data);
+    }
+  }, {
+    key: "setScreenType",
+    value: function setScreenType() {
+      if (typeof window === "undefined") {
+        return;
+      }
+      var $el = document.querySelector(".wm-app");
+      if (!$el) return;
+      this.screenWidth = $el.clientWidth;
+      this.screenHeight = $el.clientHeight;
+      this.isTabletType = false;
+      this.isMobileType = false;
+      if ((0, _get["default"])(this.selectedViewPort, "deviceCategory")) {
+        var deviceCategory = this.selectedViewPort.deviceCategory;
+        if (deviceCategory === "Tab") {
+          this.isTabletType = true;
+        } else if (deviceCategory === "Smartphone") {
+          this.isMobileType = true;
+        }
+      } else {
+        MINIMUM_MOBILE_WIDTH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--screen-xs")) || 480;
+        MINIMUM_TAB_WIDTH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--screen-sm")) || 768;
+        MINIMUM_LARGE_SCREEN_WIDTH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--screen-lg")) || 1200;
+        if (this.screenWidth >= MINIMUM_LARGE_SCREEN_WIDTH) {
+          this.isTabletType = isAndroid() || isIos() || isAndroidTablet();
+          this.isMobileType = false;
+        } else if (this.screenWidth >= MINIMUM_TAB_WIDTH) {
+          this.type = SCREEN_TYPE.TABLET;
+          this.isTabletType = true;
+        } else {
+          this.type = SCREEN_TYPE.MOBILE;
+          this.isMobileType = true;
+        }
+      }
+    }
+  }, {
+    key: "getViewport",
+    value: function getViewport() {
+      return {
+        screenWidth: this.screenWidth,
+        screenHeight: this.screenHeight,
+        windowWidth: typeof window !== "undefined" ? window.innerWidth : 0,
+        windowHeight: typeof window !== "undefined" ? window.innerHeight : 0,
+        isMobile: this.isMobileType,
+        isTablet: this.isTabletType,
+        isDesktop: !this.isMobileType && !this.isTabletType,
+        orientation: this.orientation
+      };
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this._eventNotifier.destroy();
+      if (typeof window !== "undefined" && this.boundResizeFn) {
+        window.removeEventListener("resize", this.boundResizeFn);
+      }
+    }
+  }]);
+}(); // Lazy singleton initialization - only create instance when first accessed
+var viewportServiceInstance = null;
+
+// SSR-safe stub that matches ViewportService interface
+var createSSRStub = function createSSRStub() {
+  var stub = {
+    orientation: {
+      isPortrait: false,
+      isLandscape: false
+    },
+    isMobileType: false,
+    isTabletType: false,
+    type: undefined,
+    _eventNotifier: new _eventNotifier["default"](),
+    screenWidth: 0,
+    screenHeight: 0,
+    selectedViewPort: undefined,
+    boundResizeFn: null,
+    subscribe: function subscribe() {
+      return function () {};
+    },
+    notify: function notify() {},
+    update: function update() {},
+    getViewport: function getViewport() {
+      return {
+        screenWidth: 0,
+        screenHeight: 0,
+        windowWidth: 0,
+        windowHeight: 0,
+        isMobile: false,
+        isTablet: false,
+        isDesktop: true,
+        orientation: {
+          isPortrait: false,
+          isLandscape: false
+        }
+      };
+    },
+    destroy: function destroy() {}
+  };
+  return stub;
+};
+function getViewportService() {
+  if (typeof window === "undefined") {
+    // During SSR, return stub without creating real instance
+    if (!viewportServiceInstance) {
+      viewportServiceInstance = createSSRStub();
+    }
+    return viewportServiceInstance;
+  }
+  if (!viewportServiceInstance) {
+    viewportServiceInstance = new ViewportService();
+  }
+  return viewportServiceInstance;
+}
+
+// Export singleton instance with lazy initialization using Proxy
+var viewportService = exports.viewportService = new Proxy({}, {
+  get: function get(_target, prop) {
+    var service = getViewportService();
+    var value = service[prop];
+    // Bind methods to maintain correct 'this' context
+    if (typeof value === "function") {
+      return value.bind(service);
+    }
+    return value;
+  }
+});