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

package/runtime-dynamic/services/compile-render.js

@@ -0,0 +1,142 @@
+import React from "react";
+import { transform } from "sucrase";
+import { getComponent } from "../registry/component-registry";
+import { formatMessage, _get, toNumber } from "../../core/util";
+import { getPartialNames } from "../app-initializer";
+import { createLazyPartial } from "./variable-registry";
+const compiledCache = /* @__PURE__ */ new Map();
+const componentNameCache = /* @__PURE__ */ new Map();
+const UTIL_SCOPE = {
+  formatMessage,
+  _get,
+  toNumber
+};
+const lazyPartialCache = /* @__PURE__ */ new Map();
+function markupErrorNode(className, message) {
+  return React.createElement("div", { className }, message);
+}
+function extractMarkupComponents(markup) {
+  const cached = componentNameCache.get(markup);
+  if (cached) return cached;
+  const matches = markup.match(/\bWm[A-Z]\w*/g);
+  const result = matches ? [...new Set(matches)] : [];
+  componentNameCache.set(markup, result);
+  return result;
+}
+function resolveScope(imports, appState, markup) {
+  const fragment = appState;
+  const names = ["React", "fragment", "Widgets", "Variables"];
+  const values = [React, appState, fragment == null ? void 0 : fragment.Widgets, fragment == null ? void 0 : fragment.Variables];
+  const seen = /* @__PURE__ */ new Set(["React", "fragment", "Widgets", "Variables"]);
+  const knownPartials = new Set(getPartialNames());
+  for (const importDef of imports) {
+    const name = importDef.as || importDef.name;
+    if (seen.has(name)) continue;
+    const component = getComponent(name);
+    if (component) {
+      seen.add(name);
+      names.push(name);
+      values.push(component);
+      continue;
+    }
+    const partialName = [...knownPartials].find((p) => p.toLowerCase() === name.toLowerCase());
+    if (partialName) {
+      if (!lazyPartialCache.has(partialName)) {
+        lazyPartialCache.set(partialName, createLazyPartial(partialName));
+      }
+      seen.add(name);
+      names.push(name);
+      values.push(lazyPartialCache.get(partialName));
+    }
+  }
+  if (markup) {
+    for (const name of extractMarkupComponents(markup)) {
+      if (seen.has(name)) continue;
+      const component = getComponent(name);
+      if (component) {
+        seen.add(name);
+        names.push(name);
+        values.push(component);
+      }
+    }
+  }
+  for (const [name, value] of Object.entries(UTIL_SCOPE)) {
+    if (!seen.has(name)) {
+      seen.add(name);
+      names.push(name);
+      values.push(value);
+    }
+  }
+  return { names, values };
+}
+function compileJsx(jsxCode) {
+  const result = transform(jsxCode, {
+    transforms: ["typescript", "jsx"],
+    jsxRuntime: "classic",
+    production: true
+  });
+  return result.code;
+}
+function renderTranspiledMarkup(transpiled, appState) {
+  const cacheKey = transpiled.markup;
+  let cached = compiledCache.get(cacheKey);
+  if (!cached) {
+    const jsxString = transpiled.markup;
+    const jsxWrapped = `function __render__() { return (<React.Fragment>${jsxString.trim() || "null"}</React.Fragment>); }`;
+    let compiledCode;
+    try {
+      const compiled = compileJsx(jsxWrapped);
+      compiledCode = `${compiled}
+return __render__();`;
+    } catch (compileError) {
+      console.error("[markup-transpiler] Compilation failed:", compileError);
+      console.error("[markup-transpiler] JSX input:", jsxWrapped);
+      return markupErrorNode("wm-transpile-error", "Transpilation error");
+    }
+    const { names, values } = resolveScope(transpiled.imports, appState, jsxWrapped);
+    let renderFn;
+    try {
+      renderFn = new Function(...names, compiledCode);
+    } catch (constructionError) {
+      console.error("[markup-transpiler] Function compilation failed:", constructionError);
+      console.error("[markup-transpiler] Compiled code:", compiledCode);
+      return markupErrorNode("wm-transpile-error", "Compilation error");
+    }
+    const reactIdx = names.indexOf("React");
+    const fragmentIdx = names.indexOf("fragment");
+    const widgetsIdx = names.indexOf("Widgets");
+    const variablesIdx = names.indexOf("Variables");
+    cached = {
+      renderFn,
+      scopeNames: names,
+      runtimeValues: values,
+      reactIdx,
+      fragmentIdx,
+      widgetsIdx,
+      variablesIdx
+    };
+    compiledCache.set(cacheKey, cached);
+  }
+  const runtimeFragment = appState;
+  cached.runtimeValues[cached.reactIdx] = React;
+  cached.runtimeValues[cached.fragmentIdx] = appState;
+  cached.runtimeValues[cached.widgetsIdx] = runtimeFragment == null ? void 0 : runtimeFragment.Widgets;
+  cached.runtimeValues[cached.variablesIdx] = runtimeFragment == null ? void 0 : runtimeFragment.Variables;
+  try {
+    return cached.renderFn(...cached.runtimeValues);
+  } catch (renderError) {
+    console.error("[markup-transpiler] Render failed:", renderError);
+    return markupErrorNode("wm-render-error", "Render error");
+  }
+}
+function clearCompiledCache() {
+  compiledCache.clear();
+  componentNameCache.clear();
+  lazyPartialCache.clear();
+}
+export {
+  clearCompiledCache,
+  compileJsx,
+  renderTranspiledMarkup,
+  resolveScope
+};

package/runtime-dynamic/services/component-ref-provider.js

@@ -1,149 +1,95 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.clearComponentRefCache = clearComponentRefCache;
-exports.getComponentRef = getComponentRef;
-exports.getPrefabConfig = getPrefabConfig;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _isString = _interopRequireDefault(require("lodash-es/isString"));
-var _transpiler = require("@wavemaker-ai/react-codegen/transpiler");
-var _resourceManager = require("./resource-manager");
-var _fragmentUrl = require("./fragment-url");
-var _cache = require("./cache");
-var _utils = require("../utils");
-var _prefabResources = require("./prefab-resources");
-var _markupTranspiler = require("./markup-transpiler");
-var _variableTranspiler = require("./variable-transpiler");
-/** Deduplicate in-flight loads for the same cache key (fragment JSON, prefab config, etc.). */
+import isString from "lodash-es/isString";
+import { transformEx } from "@wavemaker-ai/react-codegen/transpiler";
+import { fetchResource, clearResourceCache } from "./resource-manager";
+import { getFragmentUrl, getPrefabConfigUrl } from "./fragment-url";
+import {
+  getFragmentFromCache,
+  setFragmentInCache,
+  deleteFragmentFromCache,
+  clearAllCaches,
+  getPrefabConfigFromCache,
+  setPrefabConfigInCache,
+  deletePrefabConfigFromCache
+} from "./cache";
+import { decodeURIComponentSafe, parseJsonSafe } from "../utils";
+import { clearPrefabResourcesLoaded, loadPrefabResourcesFromConfig } from "./prefab-resources";
+import { clearTranspileCache } from "./markup-transpiler";
+import { clearVariablesCache } from "./variable-transpiler";
 function getOrCreateCachedPromise(get, set, del, key, create) {
-  var existing = get(key);
+  const existing = get(key);
   if (existing) return existing;
-  var pending = create();
+  const pending = create();
   set(key, pending);
-  pending["catch"](function () {
-    return del(key);
-  });
+  pending.catch(() => del(key));
   return pending;
 }
 function decodeFragment(raw) {
   return {
-    markup: (0, _utils.decodeURIComponentSafe)(raw.markup || ""),
-    script: (0, _utils.decodeURIComponentSafe)(raw.script || ""),
-    styles: (0, _utils.decodeURIComponentSafe)(raw.styles || ""),
-    variables: (0, _utils.parseJsonSafe)((0, _utils.decodeURIComponentSafe)(raw.variables || "{}")),
-    config: raw.config ? (0, _utils.parseJsonSafe)((0, _utils.decodeURIComponentSafe)(raw.config)) : undefined
+    markup: decodeURIComponentSafe(raw.markup || ""),
+    script: decodeURIComponentSafe(raw.script || ""),
+    styles: decodeURIComponentSafe(raw.styles || ""),
+    variables: parseJsonSafe(decodeURIComponentSafe(raw.variables || "{}")),
+    config: raw.config ? parseJsonSafe(decodeURIComponentSafe(raw.config)) : void 0
   };
 }
-function loadFragment(_x, _x2, _x3) {
-  return _loadFragment.apply(this, arguments);
+async function loadFragment(componentName, componentType, prefabName) {
+  const url = getFragmentUrl(componentName, componentType, prefabName);
+  return getOrCreateCachedPromise(
+    getFragmentFromCache,
+    setFragmentInCache,
+    deleteFragmentFromCache,
+    url,
+    () => fetchResource(url, true).then(decodeFragment)
+  );
 }
-function _loadFragment() {
-  _loadFragment = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(componentName, componentType, prefabName) {
-    var url;
-    return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          url = (0, _fragmentUrl.getFragmentUrl)(componentName, componentType, prefabName);
-          return _context.abrupt("return", getOrCreateCachedPromise(_cache.getFragmentFromCache, _cache.setFragmentInCache, _cache.deleteFragmentFromCache, url, function () {
-            return (0, _resourceManager.fetchResource)(url, true).then(decodeFragment);
-          }));
-        case 2:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _loadFragment.apply(this, arguments);
-}
-function getComponentRef(_x4, _x5, _x6) {
-  return _getComponentRef.apply(this, arguments);
-}
-function _getComponentRef() {
-  _getComponentRef = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(componentName, componentType, options) {
-    return _regenerator["default"].wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          return _context2.abrupt("return", loadFragment(componentName, componentType, options === null || options === void 0 ? void 0 : options.prefabName));
-        case 1:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  }));
-  return _getComponentRef.apply(this, arguments);
+async function getComponentRef(componentName, componentType, options) {
+  return loadFragment(componentName, componentType, options == null ? void 0 : options.prefabName);
 }
 function buildDynamicPrefabProps(result) {
-  var _result$properties;
-  var dynamicProps = {};
-  var props = (_result$properties = result.properties) !== null && _result$properties !== void 0 ? _result$properties : {};
-  for (var _i = 0, _Object$keys = Object.keys(props); _i < _Object$keys.length; _i++) {
-    var k = _Object$keys[_i];
-    var value = props[k].value;
-    var type = props[k].type;
+  var _a;
+  const dynamicProps = {};
+  const props = (_a = result.properties) != null ? _a : {};
+  for (const k of Object.keys(props)) {
+    let value = props[k].value;
+    const type = props[k].type;
     if (type === "number" || type === "integer") {
       value = Number(value);
     }
     if (type === "boolean") {
       value = Boolean(value);
     }
-    if ((0, _isString["default"])(value) && value.startsWith("bind:")) {
-      var exStr = decodeURIComponent(value.substring(5));
-      dynamicProps[k] = "".concat((0, _transpiler.transformEx)(exStr, "fragment", "attr"));
+    if (isString(value) && value.startsWith("bind:")) {
+      const exStr = decodeURIComponent(value.substring(5));
+      dynamicProps[k] = `${transformEx(exStr, "fragment", "attr")}`;
     } else {
-      dynamicProps[k] = value === undefined ? null : value;
+      dynamicProps[k] = value === void 0 ? null : value;
     }
   }
   return dynamicProps;
 }
-function getPrefabConfig(_x7) {
-  return _getPrefabConfig.apply(this, arguments);
-}
-/**
- * Clears fetched fragments, built components, resource HTTP cache, prefab injected assets,
- * transpiled markup cache, and compiled variable factories so the next load rebuilds from disk.
- */
-function _getPrefabConfig() {
-  _getPrefabConfig = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(prefabName) {
-    var url;
-    return _regenerator["default"].wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          url = (0, _fragmentUrl.getPrefabConfigUrl)(prefabName);
-          return _context4.abrupt("return", getOrCreateCachedPromise(_cache.getPrefabConfigFromCache, _cache.setPrefabConfigInCache, _cache.deletePrefabConfigFromCache, url, /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-            var raw;
-            return _regenerator["default"].wrap(function _callee3$(_context3) {
-              while (1) switch (_context3.prev = _context3.next) {
-                case 0:
-                  _context3.next = 2;
-                  return (0, _resourceManager.fetchResource)(url, true);
-                case 2:
-                  raw = _context3.sent;
-                  _context3.next = 5;
-                  return (0, _prefabResources.loadPrefabResourcesFromConfig)(prefabName, raw);
-                case 5:
-                  return _context3.abrupt("return", buildDynamicPrefabProps(raw));
-                case 6:
-                case "end":
-                  return _context3.stop();
-              }
-            }, _callee3);
-          }))));
-        case 2:
-        case "end":
-          return _context4.stop();
-      }
-    }, _callee4);
-  }));
-  return _getPrefabConfig.apply(this, arguments);
+async function getPrefabConfig(prefabName) {
+  const url = getPrefabConfigUrl(prefabName);
+  return getOrCreateCachedPromise(
+    getPrefabConfigFromCache,
+    setPrefabConfigInCache,
+    deletePrefabConfigFromCache,
+    url,
+    async () => {
+      const raw = await fetchResource(url, true);
+      await loadPrefabResourcesFromConfig(prefabName, raw);
+      return buildDynamicPrefabProps(raw);
+    }
+  );
 }
 function clearComponentRefCache() {
-  (0, _resourceManager.clearResourceCache)();
-  (0, _cache.clearAllCaches)();
-  (0, _prefabResources.clearPrefabResourcesLoaded)();
-  (0, _markupTranspiler.clearTranspileCache)();
-  (0, _variableTranspiler.clearVariablesCache)();
-}
+  clearResourceCache();
+  clearAllCaches();
+  clearPrefabResourcesLoaded();
+  clearTranspileCache();
+  clearVariablesCache();
+}
+export {
+  clearComponentRefCache,
+  getComponentRef,
+  getPrefabConfig
+};

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

@@ -1,53 +1,52 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.removeComponentStyles = removeComponentStyles;
-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();
+const scopedCssCache = /* @__PURE__ */ new Map();
+function isWmAppScopedInStyles(styles) {
+  return /\.wm-app(?![\w-])/.test(styles);
+}
 function prefixSelectors(css, scope) {
-  return css.replace(/([^{}@]+)\{/g, function (match, selectorsStr) {
+  return css.replace(/([^{}@]+)\{/g, (match, selectorsStr) => {
     if (selectorsStr.trim().startsWith("@")) return match;
-    var selectors = selectorsStr.split(",");
-    var prefixed = selectors.map(function (selector) {
-      var trimmed = selector.trim();
+    const selectors = selectorsStr.split(",");
+    const prefixed = selectors.map((selector) => {
+      const trimmed = selector.trim();
       if (!trimmed) return selector;
       if (trimmed.startsWith(":root") || trimmed.startsWith("html") || trimmed.startsWith("body")) {
         return selector;
       }
-      return "".concat(scope, " ").concat(trimmed);
+      return `${scope} ${trimmed}`;
     });
-    return "".concat(prefixed.join(", "), " {");
+    return `${prefixed.join(", ")} {`;
   });
 }
 function scopeComponentStyles(componentName, componentType, styles) {
-  var _styleElement$textCon;
+  var _a;
   if (!styles) return "";
-  var scopeSelector = ".wm-app";
-  var scopeAttribute = "".concat(componentType, "-").concat(componentName);
-  var cacheKey = "".concat(scopeSelector, "::").concat(styles);
-  var scopedCss = scopedCssCache.get(cacheKey);
+  const isWmAppScoped = isWmAppScopedInStyles(styles);
+  const scopeSelector = isWmAppScoped ? "" : `.wm-app`;
+  const scopeAttribute = `${componentType}-${componentName}`;
+  const cacheKey = `${scopeSelector}::${styles}`;
+  let 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");
+  const styleElement = document.createElement("style");
   styleElement.setAttribute("data-wm-scope", scopeAttribute);
   styleElement.textContent = scopedCss;
-  var existing = document.querySelector("style[data-wm-scope=\"".concat(scopeAttribute, "\"]"));
+  const existing = document.querySelector(`style[data-wm-scope="${scopeAttribute}"]`);
   if (existing) {
     existing.remove();
   }
   document.head.appendChild(styleElement);
-  return (_styleElement$textCon = styleElement.textContent) !== null && _styleElement$textCon !== void 0 ? _styleElement$textCon : "";
+  return (_a = styleElement.textContent) != null ? _a : "";
 }
 function removeComponentStyles(componentName, componentType) {
-  var scopeAttribute = "".concat(componentType, "-").concat(componentName);
-  var existing = document.querySelector("style[data-wm-scope=\"".concat(scopeAttribute, "\"]"));
+  const scopeAttribute = `${componentType}-${componentName}`;
+  const existing = document.querySelector(`style[data-wm-scope="${scopeAttribute}"]`);
   if (existing) {
     existing.remove();
   }
-}
+}
+export {
+  removeComponentStyles,
+  scopeComponentStyles
+};

package/runtime-dynamic/services/fragment-url.js

@@ -1,74 +1,61 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ComponentType = void 0;
-exports.getFragmentUrl = getFragmentUrl;
-exports.getPrefabBaseUrl = getPrefabBaseUrl;
-exports.getPrefabConfigUrl = void 0;
-exports.isPrefabSelfPreview = isPrefabSelfPreview;
-var _appInitializer = require("../app-initializer");
-var ComponentType = exports.ComponentType = /*#__PURE__*/function (ComponentType) {
-  ComponentType["PAGE"] = "PAGE";
-  ComponentType["PARTIAL"] = "PARTIAL";
-  ComponentType["PREFAB"] = "PREFAB";
-  ComponentType["WIDGET"] = "WIDGET";
-  return ComponentType;
-}({});
-/** Same as Angular `isPrefabInPreview` (runtime-base `util/utils.ts`). */
+import { getProjectConfig } from "../app-initializer";
+var ComponentType = /* @__PURE__ */ ((ComponentType2) => {
+  ComponentType2["PAGE"] = "PAGE";
+  ComponentType2["PARTIAL"] = "PARTIAL";
+  ComponentType2["PREFAB"] = "PREFAB";
+  ComponentType2["WIDGET"] = "WIDGET";
+  return ComponentType2;
+})(ComponentType || {});
 function isPrefabSelfPreview(prefabName) {
   return prefabName === "__self__";
 }
-
-/**
- * Same rules as Angular `getPrefabBaseUrl` (runtime-base `util/utils.ts`):
- * preview + `__self__` → `.`; preview + named prefab → `app/prefabs/{name}`;
- * non-preview → `{cdnUrl}resources/{name}`.
- */
 function getPrefabBaseUrl(prefabName) {
   if (isPrefabSelfPreview(prefabName)) {
     return ".";
   }
-  var isPreview = (0, _appInitializer.getProjectConfig)().isPreview;
-  var cdn = ((0, _appInitializer.getProjectConfig)().cdnUrl || "").replace(/\/+$/, "");
+  const cfg = getProjectConfig();
+  const isPreview = cfg.isPreview;
+  const cdn = (cfg.cdnUrl || "").replace(/\/+$/, "");
   if (isPreview) {
-    return "app/prefabs/".concat(prefabName);
+    return `app/prefabs/${prefabName}`;
   }
-  return "".concat(cdn, "resources/").concat(prefabName);
+  return `${cdn}resources/${prefabName}`;
 }
-
-/** Join deployUrl with prefab-relative path; handles `getPrefabBaseUrl` === `.` like Angular. */
 function deployPlusPrefabPath(prefabName, pathUnderPrefab) {
-  var deployRaw = (0, _appInitializer.getProjectConfig)().deployUrl || "./";
-  var deploy = deployRaw.replace(/\/+$/, "");
-  var pb = getPrefabBaseUrl(prefabName);
+  const deployRaw = getProjectConfig().deployUrl || "./";
+  const deploy = deployRaw.replace(/\/+$/, "");
+  const pb = getPrefabBaseUrl(prefabName);
   if (pb === ".") {
     if (deploy === "." || deploy === "") {
-      return "./".concat(pathUnderPrefab);
+      return `./${pathUnderPrefab}`;
     }
-    return "".concat(deploy, "/").concat(pathUnderPrefab);
+    return `${deploy}/${pathUnderPrefab}`;
   }
   if (deploy === "." || deploy === "") {
-    return "".concat(pb, "/").concat(pathUnderPrefab);
+    return `${pb}/${pathUnderPrefab}`;
   }
-  return "".concat(deploy, "/").concat(pb, "/").concat(pathUnderPrefab);
+  return `${deploy}/${pb}/${pathUnderPrefab}`;
 }
 function getFragmentUrl(componentName, componentType, prefabName) {
-  var baseUrl = (0, _appInitializer.getProjectConfig)().deployUrl || "./";
-  var pageJsonPath = "pages/".concat(componentName, "/page.min.json");
+  const baseUrl = getProjectConfig().deployUrl || "./";
+  const pageJsonPath = `pages/${componentName}/page.min.json`;
   switch (componentType) {
-    case ComponentType.PAGE:
-    case ComponentType.PARTIAL:
-      return prefabName ? deployPlusPrefabPath(prefabName, pageJsonPath) : "".concat(baseUrl).concat(pageJsonPath);
-    case ComponentType.PREFAB:
+    case "PAGE" /* PAGE */:
+    case "PARTIAL" /* PARTIAL */:
+      return prefabName ? deployPlusPrefabPath(prefabName, pageJsonPath) : `${baseUrl}${pageJsonPath}`;
+    case "PREFAB" /* PREFAB */:
       return deployPlusPrefabPath(componentName, "pages/Main/page.min.json");
-    case ComponentType.WIDGET:
-      return "".concat(baseUrl, "custom-widgets/").concat(componentName, "/page.min.json");
+    case "WIDGET" /* WIDGET */:
+      return `${baseUrl}custom-widgets/${componentName}/page.min.json`;
     default:
-      return "".concat(baseUrl).concat(pageJsonPath);
+      return `${baseUrl}${pageJsonPath}`;
   }
 }
-var getPrefabConfigUrl = exports.getPrefabConfigUrl = function getPrefabConfigUrl(prefabName) {
-  return deployPlusPrefabPath(prefabName, "config.json");
-};
+const getPrefabConfigUrl = (prefabName) => deployPlusPrefabPath(prefabName, "config.json");
+export {
+  ComponentType,
+  getFragmentUrl,
+  getPrefabBaseUrl,
+  getPrefabConfigUrl,
+  isPrefabSelfPreview
+};