@wavemaker-ai/react-runtime 1.0.0-next.27766

package/runtime-dynamic/routes.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { createBrowserRouter, Navigate } from "react-router-dom";
+import { store } from "../store";
+import { PREVIEW_ROUTING_BASEPATH } from "../core/constants";
+import {
+  isRuntimePreviewPrefab,
+  PREFAB_PREVIEW_PATH,
+  PREFAB_PREVIEW_ROUTE_PATH,
+  PREFAB_PREVIEW_ROUTE_SEGMENT
+} from "./preview-mode";
+import { PageWrapper } from "./components/PageWrapper";
+import { PrefabPreview } from "./components/PrefabPreview";
+const FALLBACK_PAGE = "Main";
+function PrefabPreviewEntryRedirect() {
+  return React.createElement(Navigate, { to: PREFAB_PREVIEW_PATH, replace: true });
+}
+function getBasename() {
+  var _a;
+  const baseEl = document.querySelector("base");
+  const baseHref = ((_a = baseEl == null ? void 0 : baseEl.getAttribute("href")) == null ? void 0 : _a.trim()) || "";
+  if (baseHref && baseHref !== "" && !baseHref.startsWith(".")) {
+    return baseHref.endsWith("/") ? baseHref.slice(0, -1) : baseHref;
+  }
+  const pathname = window.location.pathname;
+  const segments = pathname.split("/").filter(Boolean);
+  const isRoot = pathname.endsWith("/");
+  if (isRoot) {
+    return "/" + segments.join("/");
+  }
+  return "/" + segments.slice(0, -1).join("/");
+}
+function HomeRedirect() {
+  var _a, _b, _c;
+  const homePage = ((_c = (_b = (_a = store.getState().info) == null ? void 0 : _a.appConfig) == null ? void 0 : _b.appProperties) == null ? void 0 : _c.homePage) || FALLBACK_PAGE;
+  const hash = typeof window !== "undefined" ? window.location.hash : "";
+  const hashPageMatch = hash.match(/^#\/([^?&/]+)/);
+  const targetPage = hashPageMatch ? hashPageMatch[1] : homePage;
+  const search = typeof window !== "undefined" ? window.location.search : "";
+  const redirectTo = `/${PREVIEW_ROUTING_BASEPATH}/${targetPage}${search}`;
+  return React.createElement(Navigate, {
+    to: redirectTo,
+    replace: true
+  });
+}
+function buildPreviewRouteTree() {
+  const root = {
+    path: "/",
+    element: null,
+    children: []
+  };
+  if (isRuntimePreviewPrefab()) {
+    root.children = [
+      { index: true, element: React.createElement(PrefabPreviewEntryRedirect) },
+      {
+        path: PREFAB_PREVIEW_ROUTE_SEGMENT,
+        element: React.createElement(Navigate, { to: PREFAB_PREVIEW_PATH, replace: true })
+      },
+      {
+        path: PREFAB_PREVIEW_ROUTE_PATH,
+        element: React.createElement(PrefabPreview)
+      }
+    ];
+  } else {
+    root.children = [
+      { index: true, element: React.createElement(HomeRedirect) },
+      {
+        path: `${PREVIEW_ROUTING_BASEPATH}/:pageName`,
+        element: React.createElement(PageWrapper)
+      }
+    ];
+  }
+  return [root];
+}
+function createAppRouter() {
+  return createBrowserRouter(buildPreviewRouteTree(), { basename: getBasename() });
+}
+export {
+  createAppRouter
+};

package/runtime-dynamic/services/app-extension-provider.d.ts

@@ -0,0 +1 @@
+export declare function loadAppExtensions(): Promise<void>;

package/runtime-dynamic/services/app-extension-provider.js

@@ -0,0 +1,18 @@
+import axios from "axios";
+import { resolvePreviewFetchUrl } from "../preview-resource-base";
+async function loadAppExtensions() {
+  try {
+    const response = await axios.get(resolvePreviewFetchUrl("./app.extensions.js"), {
+      responseType: "text"
+    });
+    if (response.data) {
+      const script = document.createElement("script");
+      script.textContent = response.data;
+      document.head.appendChild(script);
+    }
+  } catch (e) {
+  }
+}
+export {
+  loadAppExtensions
+};

package/runtime-dynamic/services/autolayout-inject.d.ts

@@ -0,0 +1,4 @@
+export declare const AUTOLAYOUT_SCOPE = "autolayout-dynamic";
+export declare const injectedAutoLayoutRules: Set<string>;
+export declare function injectAutolayoutCss(rules: string[]): void;
+export declare function clearAutolayoutState(): void;

package/runtime-dynamic/services/autolayout-inject.js

@@ -0,0 +1,27 @@
+const AUTOLAYOUT_SCOPE = "autolayout-dynamic";
+const injectedAutoLayoutRules = /* @__PURE__ */ new Set();
+function injectAutolayoutCss(rules) {
+  const newRules = rules.filter((r) => !injectedAutoLayoutRules.has(r));
+  if (newRules.length === 0) return;
+  newRules.forEach((r) => injectedAutoLayoutRules.add(r));
+  let styleEl = document.querySelector(
+    `style[data-wm-scope="${AUTOLAYOUT_SCOPE}"]`
+  );
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    styleEl.setAttribute("data-wm-scope", AUTOLAYOUT_SCOPE);
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent += "\n" + newRules.join("\n\n") + "\n";
+}
+function clearAutolayoutState() {
+  injectedAutoLayoutRules.clear();
+  const styleEl = document.querySelector(`style[data-wm-scope="${AUTOLAYOUT_SCOPE}"]`);
+  if (styleEl) styleEl.remove();
+}
+export {
+  AUTOLAYOUT_SCOPE,
+  clearAutolayoutState,
+  injectAutolayoutCss,
+  injectedAutoLayoutRules
+};

package/runtime-dynamic/services/compile-render.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { TranspiledOutput } from "@wavemaker-ai/react-codegen/transpiler";
+export declare function resolveScope(imports: TranspiledOutput["imports"], appState: unknown, markup?: string): {
+    names: string[];
+    values: unknown[];
+};
+export declare function compileJsx(jsxCode: string): string;
+export declare function renderTranspiledMarkup(transpiled: TranspiledOutput, appState: unknown): React.ReactNode;
+export declare function clearCompiledCache(): void;

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

@@ -0,0 +1,143 @@
+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) {
+  console.error(`[markup-transpiler] ${className}: ${message}`);
+  return null;
+}
+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.d.ts

@@ -0,0 +1,27 @@
+import { ComponentType } from "./fragment-url";
+export interface PageMinJSON {
+    markup: string;
+    script: string;
+    styles: string;
+    variables: string;
+    config?: string;
+    error?: string;
+}
+export interface DecodedFragment {
+    markup: string;
+    script: string;
+    styles: string;
+    variables: Record<string, unknown>;
+    config?: Record<string, unknown>;
+    error?: string;
+}
+export interface GetComponentOptions {
+    prefabName?: string;
+}
+export declare function getComponentRef(componentName: string, componentType: ComponentType, options?: GetComponentOptions): Promise<DecodedFragment | undefined>;
+export declare function getPrefabConfig(prefabName: string): Promise<Record<string, unknown>>;
+/**
+ * Resets injected prefab assets and transpile/variable caches so the next
+ * load rebuilds from the server.
+ */
+export declare function clearComponentRefCache(): void;

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

@@ -0,0 +1,75 @@
+import isString from "lodash-es/isString";
+import { transformEx } from "@wavemaker-ai/react-codegen/transpiler";
+import { fetchResource } from "./resource-manager";
+import { getFragmentUrl, getPrefabConfigUrl } from "./fragment-url";
+import { decodeURIComponentSafe, parseJsonSafe } from "../utils";
+import { clearPrefabResourcesLoaded, loadPrefabResourcesFromConfig } from "./prefab-resources";
+import { clearTranspileCache } from "./markup-transpiler";
+import { clearVariablesCache } from "./variable-transpiler";
+import { appManager } from "@wavemaker-ai/variables";
+function decodeFragment(raw) {
+  return {
+    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
+  };
+}
+async function loadFragment(componentName, componentType, prefabName) {
+  var _a, _b, _c;
+  const url = getFragmentUrl(componentName, componentType, prefabName);
+  try {
+    const raw = await fetchResource(url);
+    return decodeFragment(raw);
+  } catch (err) {
+    if (((_a = err.response) == null ? void 0 : _a.status) === 401) {
+      return void 0;
+    }
+    const errorMsg = isString(err) ? err : "";
+    console.error(`Failed to load ${componentType} component '${componentName}':`, err);
+    (_c = (_b = appManager) == null ? void 0 : _b.notifyApp) == null ? void 0 : _c.call(_b, errorMsg, "error");
+    return void 0;
+  }
+}
+async function getComponentRef(componentName, componentType, options) {
+  return loadFragment(componentName, componentType, options == null ? void 0 : options.prefabName);
+}
+function buildDynamicPrefabProps(result) {
+  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 (isString(value) && value.startsWith("bind:")) {
+      const exStr = decodeURIComponent(value.substring(5));
+      dynamicProps[k] = `${transformEx(exStr, "fragment", "attr")}`;
+    } else {
+      dynamicProps[k] = value === void 0 ? null : value;
+    }
+  }
+  return dynamicProps;
+}
+async function getPrefabConfig(prefabName) {
+  const url = getPrefabConfigUrl(prefabName);
+  const raw = await fetchResource(url);
+  await loadPrefabResourcesFromConfig(prefabName, raw);
+  return buildDynamicPrefabProps(raw);
+}
+function clearComponentRefCache() {
+  clearPrefabResourcesLoaded();
+  clearTranspileCache();
+  clearVariablesCache();
+}
+export {
+  clearComponentRefCache,
+  getComponentRef,
+  getPrefabConfig
+};

package/runtime-dynamic/services/css-scoping.d.ts

@@ -0,0 +1,4 @@
+/** Resolves the prefab name used for CSS scope classes and `app-prefab-{name}` wrappers. */
+export declare function resolvePrefabScopeName(componentName: string, prefabname?: string): string;
+export declare function scopeComponentStyles(componentName: string, componentType: string, styles: string): string;
+export declare function removeComponentStyles(componentName: string, componentType: string): void;

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

@@ -0,0 +1,71 @@
+import { fixURLPathAndScope } from "@wavemaker-ai/react-codegen/transpiler";
+import { store } from "../../store";
+import { getProjectConfig } from "../app-initializer";
+import { isPrefabSelfPreview } from "./fragment-url";
+function resolvePrefabScopeName(componentName, prefabname) {
+  var _a, _b;
+  if (prefabname) {
+    return prefabname;
+  }
+  if (isPrefabSelfPreview(componentName)) {
+    const appProps = (_b = (_a = store.getState().info) == null ? void 0 : _a.appConfig) == null ? void 0 : _b.appProperties;
+    return (appProps == null ? void 0 : appProps.displayName) || (appProps == null ? void 0 : appProps.name) || componentName;
+  }
+  return componentName;
+}
+const scopedCssCache = /* @__PURE__ */ new Map();
+function getPreviewCssBasePath() {
+  var _a;
+  const deployUrl = ((_a = getProjectConfig().deployUrl) == null ? void 0 : _a.replace(/\/+$/, "")) || "";
+  if (!deployUrl || deployUrl === ".") {
+    return void 0;
+  }
+  return deployUrl;
+}
+function getCssScopeOptions(componentType, componentName) {
+  const normalizedType = componentType.toLowerCase();
+  if (normalizedType === "page") {
+    return { scopeType: "page", name: componentName };
+  }
+  if (normalizedType === "partial") {
+    return { scopeType: "partial", name: componentName };
+  }
+  if (normalizedType === "prefab") {
+    return { scopeType: "prefab", name: resolvePrefabScopeName(componentName) };
+  }
+  return void 0;
+}
+function scopeComponentStyles(componentName, componentType, styles) {
+  var _a;
+  if (!styles) return "";
+  const scopeOptions = getCssScopeOptions(componentType, componentName);
+  const basePath = getPreviewCssBasePath();
+  const scopeAttribute = `${componentType}-${componentName}`;
+  const cacheKey = `${scopeAttribute}::${basePath != null ? basePath : ""}::${styles}`;
+  let scopedCss = scopedCssCache.get(cacheKey);
+  if (!scopedCss) {
+    scopedCss = fixURLPathAndScope(styles, basePath, true, scopeOptions);
+    scopedCssCache.set(cacheKey, scopedCss);
+  }
+  const styleElement = document.createElement("style");
+  styleElement.setAttribute("data-wm-scope", scopeAttribute);
+  styleElement.textContent = scopedCss;
+  const existing = document.querySelector(`style[data-wm-scope="${scopeAttribute}"]`);
+  if (existing) {
+    existing.remove();
+  }
+  document.head.appendChild(styleElement);
+  return (_a = styleElement.textContent) != null ? _a : "";
+}
+function removeComponentStyles(componentName, componentType) {
+  const scopeAttribute = `${componentType}-${componentName}`;
+  const existing = document.querySelector(`style[data-wm-scope="${scopeAttribute}"]`);
+  if (existing) {
+    existing.remove();
+  }
+}
+export {
+  removeComponentStyles,
+  resolvePrefabScopeName,
+  scopeComponentStyles
+};

package/runtime-dynamic/services/fragment-url.d.ts

@@ -0,0 +1,16 @@
+export declare enum ComponentType {
+    PAGE = "PAGE",
+    PARTIAL = "PARTIAL",
+    PREFAB = "PREFAB",
+    WIDGET = "WIDGET"
+}
+/** Same as Angular `isPrefabInPreview` (runtime-base `util/utils.ts`). */
+export declare function isPrefabSelfPreview(prefabName: string): boolean;
+/**
+ * Same rules as Angular `getPrefabBaseUrl` (runtime-base `util/utils.ts`):
+ * preview + `__self__` → `.`; preview + named prefab → `app/prefabs/{name}`;
+ * non-preview → `{cdnUrl}resources/{name}`.
+ */
+export declare function getPrefabBaseUrl(prefabName: string): string;
+export declare function getFragmentUrl(componentName: string, componentType: ComponentType, prefabName?: string): string;
+export declare const getPrefabConfigUrl: (prefabName: string) => string;

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

@@ -0,0 +1,61 @@
+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__";
+}
+function getPrefabBaseUrl(prefabName) {
+  if (isPrefabSelfPreview(prefabName)) {
+    return ".";
+  }
+  const cfg = getProjectConfig();
+  const isPreview = cfg.isPreview;
+  const cdn = (cfg.cdnUrl || "").replace(/\/+$/, "");
+  if (isPreview) {
+    return `app/prefabs/${prefabName}`;
+  }
+  return `${cdn}resources/${prefabName}`;
+}
+function deployPlusPrefabPath(prefabName, pathUnderPrefab) {
+  const deployRaw = getProjectConfig().deployUrl || "./";
+  const deploy = deployRaw.replace(/\/+$/, "");
+  const pb = getPrefabBaseUrl(prefabName);
+  if (pb === ".") {
+    if (deploy === "." || deploy === "") {
+      return `./${pathUnderPrefab}`;
+    }
+    return `${deploy}/${pathUnderPrefab}`;
+  }
+  if (deploy === "." || deploy === "") {
+    return `${pb}/${pathUnderPrefab}`;
+  }
+  return `${deploy}/${pb}/${pathUnderPrefab}`;
+}
+function getFragmentUrl(componentName, componentType, prefabName) {
+  const baseUrl = getProjectConfig().deployUrl || "./";
+  const pageJsonPath = `pages/${componentName}/page.min.json`;
+  switch (componentType) {
+    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 "WIDGET" /* WIDGET */:
+      return `${baseUrl}custom-widgets/${componentName}/page.min.json`;
+    default:
+      return `${baseUrl}${pageJsonPath}`;
+  }
+}
+const getPrefabConfigUrl = (prefabName) => deployPlusPrefabPath(prefabName, "config.json");
+export {
+  ComponentType,
+  getFragmentUrl,
+  getPrefabBaseUrl,
+  getPrefabConfigUrl,
+  isPrefabSelfPreview
+};

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

@@ -0,0 +1,9 @@
+export { fetchResource } from "./resource-manager";
+export { ComponentType, getFragmentUrl, getPrefabBaseUrl, getPrefabConfigUrl, isPrefabSelfPreview, } from "./fragment-url";
+export { getComponentRef, clearComponentRefCache } from "./component-ref-provider";
+export { getPrefabResourceUrl } from "./prefab-resources";
+export { buildAddPageScript } from "./script-executor";
+export { transpileAndBuildGetVariables, clearVariablesCache } from "./variable-transpiler";
+export { scopeComponentStyles, removeComponentStyles } from "./css-scoping";
+export { loadAppExtensions } from "./app-extension-provider";
+export type { PageMinJSON, DecodedFragment } from "./component-ref-provider";

package/runtime-dynamic/services/index.js

@@ -0,0 +1,31 @@
+import { fetchResource } from "./resource-manager";
+import {
+  ComponentType,
+  getFragmentUrl,
+  getPrefabBaseUrl,
+  getPrefabConfigUrl,
+  isPrefabSelfPreview
+} from "./fragment-url";
+import { getComponentRef, clearComponentRefCache } from "./component-ref-provider";
+import { getPrefabResourceUrl } from "./prefab-resources";
+import { buildAddPageScript } from "./script-executor";
+import { transpileAndBuildGetVariables, clearVariablesCache } from "./variable-transpiler";
+import { scopeComponentStyles, removeComponentStyles } from "./css-scoping";
+import { loadAppExtensions } from "./app-extension-provider";
+export {
+  ComponentType,
+  buildAddPageScript,
+  clearComponentRefCache,
+  clearVariablesCache,
+  fetchResource,
+  getComponentRef,
+  getFragmentUrl,
+  getPrefabBaseUrl,
+  getPrefabConfigUrl,
+  getPrefabResourceUrl,
+  isPrefabSelfPreview,
+  loadAppExtensions,
+  removeComponentStyles,
+  scopeComponentStyles,
+  transpileAndBuildGetVariables
+};

package/runtime-dynamic/services/markup-transpiler.d.ts

@@ -0,0 +1,12 @@
+import type { TranspiledOutput } from "@wavemaker-ai/react-codegen/transpiler";
+export type { TranspiledOutput } from "@wavemaker-ai/react-codegen/transpiler";
+export { renderTranspiledMarkup, compileJsx, resolveScope } from "./compile-render";
+export { injectAutolayoutCss, AUTOLAYOUT_SCOPE, injectedAutoLayoutRules, } from "./autolayout-inject";
+export interface TranspileOptions {
+    variables?: Record<string, unknown>;
+    isPartOfPrefab?: boolean;
+    prefabName?: string;
+}
+export declare function transpileFragment(markup: string, variablesOrOptions?: Record<string, unknown> | TranspileOptions): TranspiledOutput | null;
+export declare function transpileAndRender(markup: string, appState: unknown, variables?: Record<string, unknown>): React.ReactNode;
+export declare function clearTranspileCache(): void;

package/runtime-dynamic/services/markup-transpiler.js

@@ -0,0 +1,58 @@
+import { transformMarkup } from "@wavemaker-ai/react-codegen/transpiler";
+import { getProjectConfig } from "../app-initializer";
+import { injectAutolayoutCss, clearAutolayoutState } from "./autolayout-inject";
+import { renderTranspiledMarkup, clearCompiledCache } from "./compile-render";
+import { renderTranspiledMarkup as renderTranspiledMarkup2, compileJsx, resolveScope } from "./compile-render";
+import {
+  injectAutolayoutCss as injectAutolayoutCss2,
+  AUTOLAYOUT_SCOPE,
+  injectedAutoLayoutRules
+} from "./autolayout-inject";
+const transpiledCache = /* @__PURE__ */ new Map();
+function transpileFragment(markup, variablesOrOptions) {
+  var _a, _b;
+  if (!(markup == null ? void 0 : markup.trim())) return null;
+  let variables;
+  let isPartOfPrefab = false;
+  let prefabName;
+  if (variablesOrOptions && ("isPartOfPrefab" in variablesOrOptions || "prefabName" in variablesOrOptions)) {
+    const opts = variablesOrOptions;
+    variables = opts.variables;
+    isPartOfPrefab = (_a = opts.isPartOfPrefab) != null ? _a : false;
+    prefabName = opts.prefabName;
+  } else {
+    variables = variablesOrOptions;
+  }
+  const cacheKey = prefabName ? `prefab:${prefabName}:${markup}` : markup;
+  const cached = transpiledCache.get(cacheKey);
+  if (cached) return cached;
+  const config = getProjectConfig();
+  const appUrl = config.deployUrl || "./";
+  const transpiled = transformMarkup(markup, { variables, appUrl, isPartOfPrefab, prefabName });
+  if ((_b = transpiled.autolayoutCss) == null ? void 0 : _b.length) {
+    injectAutolayoutCss(transpiled.autolayoutCss);
+  }
+  transpiledCache.set(cacheKey, transpiled);
+  return transpiled;
+}
+function transpileAndRender(markup, appState, variables) {
+  const transpiled = transpileFragment(markup, variables);
+  if (!transpiled) return null;
+  return renderTranspiledMarkup(transpiled, appState);
+}
+function clearTranspileCache() {
+  transpiledCache.clear();
+  clearCompiledCache();
+  clearAutolayoutState();
+}
+export {
+  AUTOLAYOUT_SCOPE,
+  clearTranspileCache,
+  compileJsx,
+  injectAutolayoutCss2 as injectAutolayoutCss,
+  injectedAutoLayoutRules,
+  renderTranspiledMarkup2 as renderTranspiledMarkup,
+  resolveScope,
+  transpileAndRender,
+  transpileFragment
+};