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

package/runtime-dynamic/app-initializer.js

@@ -12,6 +12,7 @@ exports.getProjectConfig = getProjectConfig;
 exports.initializeApp = initializeApp;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _axios = _interopRequireDefault(require("axios"));
@@ -21,7 +22,8 @@ var _appConfigSlice = require("@wavemaker-ai/react-runtime/store/slices/appConfi
 var _authSlice = require("@wavemaker-ai/react-runtime/store/slices/authSlice");
 var _app = require("@wavemaker-ai/react-runtime/core/app.service");
 var _i18nSlice = require("@wavemaker-ai/react-runtime/store/slices/i18nSlice");
-var _utils = require("./utils");
+var _utils = require("@wavemaker-ai/react-runtime/core/util/utils");
+var _utils2 = require("./utils");
 var _previewMode = require("./preview-mode");
 var _variableRegistry = require("./services/variable-registry");
 var _previewResourceBase = require("./preview-resource-base");
@@ -100,13 +102,13 @@ function getProjectConfig() {
  * CDN base: deployUrl meta, else cdnUrl meta, else `ng-bundle/`.
  */
 function initializeProjectDetails() {
-  var deployUrlMeta = (0, _utils.getMetaContent)("deployUrl").trim();
+  var deployUrlMeta = (0, _utils2.getMetaContent)("deployUrl").trim();
   var isPreview = !deployUrlMeta;
-  var resolvedCdn = deployUrlMeta || (0, _utils.getMetaContent)("cdnUrl").trim();
+  var resolvedCdn = deployUrlMeta || (0, _utils2.getMetaContent)("cdnUrl").trim();
   var cdnUrl = resolvedCdn || "ng-bundle/";
   projectConfig = {
     cdnUrl: cdnUrl,
-    apiUrl: (0, _utils.getMetaContent)("apiUrl") || "./services",
+    apiUrl: (0, _utils2.getMetaContent)("apiUrl") || "./services",
     deployUrl: deployUrlMeta || "./",
     isPreview: isPreview,
     fontConfig: undefined
@@ -402,46 +404,69 @@ function _initializeApp() {
       while (1) switch (_context9.prev = _context9.next) {
         case 0:
           initializeProjectDetails();
+          (0, _utils.initAppModes)();
           (0, _app.setupAxiosInterceptors)();
-          _context9.next = 4;
+          _context9.next = 5;
           return dispatchInitialConfig();
-        case 4:
+        case 5:
           isPrefabPreview = (0, _previewMode.isRuntimePreviewPrefab)();
           syncAppstoreCommonPartial(isPrefabPreview);
 
           // Prefab preview bundles do not ship `font.config.js` (Angular parity); skip the fetch.
           if (isPrefabPreview) {
-            _context9.next = 9;
+            _context9.next = 11;
             break;
           }
-          _context9.next = 9;
+          _context9.next = 10;
           return loadFontConfig();
-        case 9:
-          _context9.next = 11;
+        case 10:
+          loadPreviewCustomIcons();
+        case 11:
+          _context9.next = 13;
           return Promise.all([loadAppVariables(), loadAppScript(), isPrefabPreview ? Promise.resolve({}) : loadCustomFormatters()
           // loadAppExtensions(),
           ]);
-        case 11:
+        case 13:
           _yield$Promise$all = _context9.sent;
           _yield$Promise$all2 = (0, _slicedToArray2["default"])(_yield$Promise$all, 3);
           loadedVariables = _yield$Promise$all2[0];
           loadedFormatters = _yield$Promise$all2[2];
           appVariablesJson = loadedVariables;
           customFormatters = loadedFormatters;
-          _context9.prev = 17;
-          _context9.next = 20;
+          _context9.prev = 19;
+          _context9.next = 22;
           return _store.store.dispatch((0, _i18nSlice.loadLocaleBundle)()).unwrap();
-        case 20:
-          _context9.next = 24;
-          break;
         case 22:
-          _context9.prev = 22;
-          _context9.t0 = _context9["catch"](17);
+          _context9.next = 26;
+          break;
         case 24:
+          _context9.prev = 24;
+          _context9.t0 = _context9["catch"](19);
+        case 26:
         case "end":
           return _context9.stop();
       }
-    }, _callee9, null, [[17, 22]]);
+    }, _callee9, null, [[19, 24]]);
   }));
   return _initializeApp.apply(this, arguments);
+}
+function getIconCssPathsFromFontConfig() {
+  var source = projectConfig.fontConfig;
+  if (!source) {
+    return [];
+  }
+  return (0, _toConsumableArray2["default"])(source.matchAll(/"csspath":\s*"([^"]+)"/g)).map(function (match) {
+    return match[1];
+  });
+}
+function resolvePreviewIconStylesheetUrl(csspath) {
+  if (/^https?:\/\//i.test(csspath) || csspath.startsWith("//")) {
+    return csspath;
+  }
+  return (0, _previewResourceBase.resolvePreviewFetchUrl)(csspath);
+}
+function loadPreviewCustomIcons() {
+  getIconCssPathsFromFontConfig().forEach(function (csspath) {
+    (0, _utils2.appendStylesheetLink)(resolvePreviewIconStylesheetUrl(csspath));
+  });
 }

package/runtime-dynamic/components/partial-content.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Container = _interopRequireDefault(require("@mui/material/Container"));
 var _spinner = require("../../components/basic/spinner");
 var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
 var _store = require("@wavemaker-ai/react-runtime/runtime-dynamic/registry/store");
@@ -22,15 +21,13 @@ var WmPartialContent = /*#__PURE__*/(0, _react.memo)(function (props) {
   return __jsx(_ErrorBoundary.ComponentErrorBoundary, {
     scope: "partial",
     componentName: props.content
-  }, __jsx(_Container["default"], {
-    className: "partial-container"
   }, __jsx(_react.Suspense, {
     fallback: __jsx(_spinner.WmSpinner, {
       show: true,
       listener: props.listener,
       name: "partial-container-spinner"
     })
-  }, Component && __jsx(Component, props))));
+  }, Component && __jsx(Component, props)));
 }, function (prevProps, nextProps) {
   var staticKeys = ["content", "prefab", "prefabName", "partialName", "styles", "params"];
   var staticEqual = staticKeys.every(function (key) {

package/runtime-dynamic/factories/utils.js

@@ -54,13 +54,12 @@ function createDynamicInnerComponent(_ref) {
     transpiled = _ref.transpiled,
     styles = _ref.styles;
   var InnerComponent = function InnerComponent(props) {
-    var _useAppContext;
     var appState = (0, _WidgetProvider.useAppState)();
     var stateProxy = (0, _WidgetProvider.useProxy)();
     usePageEvents(appState, componentType);
     var appStateRef = (0, _react.useRef)(appState);
     appStateRef.current = appState;
-    var notification = (_useAppContext = (0, _AppContext.useAppContext)()) === null || _useAppContext === void 0 ? void 0 : _useAppContext.notification;
+    var notification = (0, _AppContext.useAppContext)().notification || {};
     (0, _react.useEffect)(function () {
       if (styles) {
         (0, _cssScoping.scopeComponentStyles)(componentName, componentType, styles);

package/runtime-dynamic/services/css-scoping.js

@@ -8,6 +8,9 @@ exports.scopeComponentStyles = scopeComponentStyles;
 // Cache scoped CSS strings keyed by `${scopeSelector}::${rawStyles}` to avoid
 // re-running the regex on every component mount for the same styles.
 var scopedCssCache = new Map();
+function isWmAppScopedInStyles(styles) {
+  return /\.wm-app(?![\w-])/.test(styles);
+}
 function prefixSelectors(css, scope) {
   return css.replace(/([^{}@]+)\{/g, function (match, selectorsStr) {
     if (selectorsStr.trim().startsWith("@")) return match;
@@ -26,12 +29,13 @@ function prefixSelectors(css, scope) {
 function scopeComponentStyles(componentName, componentType, styles) {
   var _styleElement$textCon;
   if (!styles) return "";
-  var scopeSelector = ".wm-app";
+  var isWmAppScoped = isWmAppScopedInStyles(styles);
+  var scopeSelector = isWmAppScoped ? "" : ".wm-app";
   var scopeAttribute = "".concat(componentType, "-").concat(componentName);
   var cacheKey = "".concat(scopeSelector, "::").concat(styles);
   var scopedCss = scopedCssCache.get(cacheKey);
   if (!scopedCss) {
-    scopedCss = prefixSelectors(styles, scopeSelector);
+    scopedCss = isWmAppScoped ? styles : prefixSelectors(styles, scopeSelector);
     scopedCssCache.set(cacheKey, scopedCss);
   }
   var styleElement = document.createElement("style");

package/runtime-dynamic/services/prefab-resources.js

@@ -10,6 +10,7 @@ exports.loadPrefabResourcesFromConfig = loadPrefabResourcesFromConfig;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _endsWith = _interopRequireDefault(require("lodash-es/endsWith"));
+var _utils = require("../utils");
 var _previewResourceBase = require("../preview-resource-base");
 var _fragmentUrl = require("./fragment-url");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
@@ -36,22 +37,11 @@ function getPrefabResourceUrl(resourcePath, resourceBasePath) {
   }
   return "".concat(resourceBasePath).concat(resourcePath);
 }
-function isStylesheetLoaded(href) {
-  var links = document.getElementsByTagName("link");
-  for (var i = 0; i < links.length; i++) {
-    var el = links[i];
-    if (el.rel === "stylesheet" && el.getAttribute("href") === href) return true;
-  }
-  return false;
-}
 function loadStyleSheetOnce(href) {
   var resolved = (0, _previewResourceBase.resolvePreviewFetchUrl)(href);
-  if (!resolved || isStylesheetLoaded(resolved)) return;
-  var link = document.createElement("link");
-  link.rel = "stylesheet";
-  link.type = "text/css";
-  link.href = resolved;
-  document.head.appendChild(link);
+  if (resolved) {
+    (0, _utils.appendStylesheetLink)(resolved);
+  }
 }
 function isScriptLoaded(src) {
   var scripts = document.getElementsByTagName("script");

package/runtime-dynamic/utils/index.d.ts

@@ -7,3 +7,5 @@ export declare function getMetaContent(name: string): string;
  * compilation phases. Prevents long-task jank (>50ms) that degrades INP.
  */
 export declare const yieldToMain: () => Promise<void>;
+/** Injects a stylesheet link if the href is not already present. */
+export declare function appendStylesheetLink(href: string): void;

package/runtime-dynamic/utils/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.appendStylesheetLink = appendStylesheetLink;
 exports.decodeURIComponentSafe = decodeURIComponentSafe;
 exports.getMetaContent = getMetaContent;
 exports.parseJsonSafe = parseJsonSafe;
@@ -37,4 +38,16 @@ var yieldToMain = exports.yieldToMain = function yieldToMain() {
   return new Promise(function (resolve) {
     return setTimeout(resolve, 0);
   });
-};
+};
+
+/** Injects a stylesheet link if the href is not already present. */
+function appendStylesheetLink(href) {
+  if (!href || document.querySelector("link[href=\"".concat(href, "\"]"))) {
+    return;
+  }
+  var link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.type = "text/css";
+  link.href = href;
+  document.head.appendChild(link);
+}