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

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@wavemaker-ai/react-runtime",
+  "version": "1.0.0-next.27766",
+  "description": "React runtime package for Wavemaker",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wavemaker/react-runtime.git"
+  },
+  "engines": {
+    "node": "22.18.0"
+  },
+  "keywords": [
+    "react",
+    "runtime",
+    "wavemaker"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "build:lib": "node scripts/build.js post-build",
+    "sync-docs": "node scripts/sync-docs.js",
+    "build:local": "npm run build:lib -- --production=false",
+    "build:watch": "node scripts/build.js watch",
+    "format": "prettier --write .",
+    "start": "next start",
+    "lint": "next lint",
+    "build:charts": "node scripts/generate-chart-assets.js",
+    "prepare": "husky",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "build:preview-esbuild": "node config/esbuild.preview.config.mjs"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@base-ui-components/react": "1.0.0-alpha.8",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/modifiers": "9.0.0",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
+    "@fullcalendar/core": "6.1.15",
+    "@fullcalendar/daygrid": "6.1.15",
+    "@fullcalendar/google-calendar": "6.1.15",
+    "@fullcalendar/interaction": "6.1.15",
+    "@fullcalendar/list": "6.1.15",
+    "@fullcalendar/moment": "6.1.15",
+    "@fullcalendar/timegrid": "6.1.15",
+    "@mui/icons-material": "6.3.1",
+    "@mui/material": "6.3.1",
+    "@mui/x-date-pickers": "8.5.3",
+    "@reduxjs/toolkit": "2.9.1",
+    "@tanstack/react-table": "8.21.3",
+    "@wavemaker-ai/react-codegen": "1.0.0-next.27766",
+    "@wavemaker-ai/variables": "1.0.0-next.27766",
+    "@wavemaker/nvd3": "1.8.16",
+    "axios": "1.15.1",
+    "d3": "7.8.5",
+    "dompurify": "3.2.3",
+    "events": "3.3.0",
+    "execa": "9.6.0",
+    "husky": "9.1.7",
+    "jodit-react": "5.2.19",
+    "js-cookie": "3.0.5",
+    "lint-staged": "16.2.0",
+    "lodash-es": "4.17.21",
+    "moment-timezone": "0.6.0",
+    "next": "16.1.1",
+    "qrcodejs2": "0.0.2",
+    "react": "19.2.3",
+    "react-color": "2.19.3",
+    "react-dom": "19.2.3",
+    "react-hook-form": "7.73.1",
+    "react-redux": "9.2.0",
+    "react-router-dom": "7.5.0",
+    "sucrase": "3.35.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "3",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.1",
+    "@types/d3": "7.4.3",
+    "@types/jest-axe": "3.5.9",
+    "@types/js-cookie": "3.0.6",
+    "@types/lodash-es": "4.17.12",
+    "@types/node": "20",
+    "@types/react": "19.2.8",
+    "@types/react-color": "3.0.13",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.1.4",
+    "@vitest/coverage-v8": "3.2.4",
+    "axe-core": "4.11.1",
+    "esbuild": "0.27.5",
+    "eslint": "9",
+    "eslint-config-next": "15.1.4",
+    "eslint-plugin-testing-library": "7.16.0",
+    "fs-extra": "11.3.2",
+    "jest-axe": "10.0.0",
+    "jsdom": "28.1.0",
+    "msw": "2.12.10",
+    "prettier": "3.4.2",
+    "typescript": "5",
+    "vitest": "3.2.4",
+    "yargs": "18.0.0"
+  },
+  "main": "index",
+  "module": "index",
+  "exports": {
+    "./": "./"
+  }
+}

package/providers/AppProviders.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import { WmThemeProvider } from "../mui-config/theme-provider";
+import { ToastProvider } from "../actions/toast-provider";
+const AppProviders = ({ children }) => {
+  return /* @__PURE__ */ jsx(
+    LocalizationProvider,
+    {
+      dateAdapter: AdapterMoment,
+      adapterLocale: "en",
+      localeText: {
+        calendarViewSwitchingButtonAriaLabel: (view) => view === "year" ? "year view is open, switch to calendar view" : "calendar view is open, switch to year view"
+      },
+      children: /* @__PURE__ */ jsx(WmThemeProvider, { children: /* @__PURE__ */ jsx(ToastProvider, { children }) })
+    }
+  );
+};
+var AppProviders_default = AppProviders;
+export {
+  AppProviders,
+  AppProviders_default as default
+};

package/runtime-dynamic/App.d.ts

@@ -0,0 +1,7 @@
+import { createAppRouter } from "./routes";
+/**
+ * Must run after `initializeApp()` so Redux `appConfig.appProperties` (wmProperties)
+ * exists before `createAppRouter` reads prefab vs application routes.
+ */
+export declare function initPreviewRuntimeRouter(router: ReturnType<typeof createAppRouter>): void;
+export declare function App(): import("react/jsx-runtime").JSX.Element;

package/runtime-dynamic/App.js

@@ -0,0 +1,116 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Provider } from "react-redux";
+import { RouterProvider } from "react-router-dom";
+import { store } from "../store";
+import { BaseApp } from "../higherOrder/BaseApp";
+import appstore from "../core/appstore";
+import formatters from "../core/formatters";
+import { VALIDATOR, MATCH_MODES } from "../core/util";
+import LocalizationProvider from "../context/LocalizationProvider";
+import { WmThemeProvider } from "../mui-config/theme-provider";
+import { ToastProvider } from "../actions/toast-provider";
+import { setRouter } from "../store/middleware/navigationMiddleware";
+import {
+  transpileVariableDefinitions,
+  serializeVariablesToCode
+} from "@wavemaker-ai/react-codegen/transpiler";
+import {
+  getAppScript,
+  getAppVariablesJson,
+  getCustomFormatters,
+  getProjectConfig
+} from "./app-initializer";
+import { buildStartupInfo } from "./factories/startup-info";
+import { transpileAndBuildGetVariables } from "./services/variable-transpiler";
+import { isRuntimePreviewPrefab } from "./preview-mode";
+import { toPreviewRouterPath } from "./preview-navigation";
+appstore.set("CONSTANTS", { VALIDATOR, MATCH_MODES });
+appstore.set("formatters", formatters);
+let formattersRegistered = false;
+const AppInner = ({ children }) => {
+  if (!formattersRegistered) {
+    const customFmt = getCustomFormatters();
+    Object.keys(customFmt).forEach((k) => {
+      formatters.set(`custom.${k}`, customFmt[k]);
+    });
+    formattersRegistered = true;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+function addAppScript(app) {
+  const scriptFn = getAppScript();
+  if (scriptFn) {
+    scriptFn(app);
+  }
+}
+let cachedGetAppVariables = null;
+let cachedGetAppVariablesPrefabMode = null;
+function getAppVariables(appProxy) {
+  const rawJson = getAppVariablesJson();
+  if (!rawJson || Object.keys(rawJson).length === 0) {
+    return { Variables: {}, Actions: {} };
+  }
+  const isPrefabPreview = isRuntimePreviewPrefab();
+  if (!cachedGetAppVariables || cachedGetAppVariablesPrefabMode !== isPrefabPreview) {
+    cachedGetAppVariablesPrefabMode = isPrefabPreview;
+    const appUrl = getProjectConfig().deployUrl || "./";
+    const transpiledVars = transpileVariableDefinitions(rawJson, appUrl, "App");
+    const variablesCode = serializeVariablesToCode(transpiledVars, "App", {
+      isPrefabApp: isPrefabPreview,
+      isPrefabScope: false,
+      addEntityProvider: false
+    });
+    cachedGetAppVariables = transpileAndBuildGetVariables(variablesCode, rawJson);
+  }
+  return cachedGetAppVariables(appProxy);
+}
+let cachedAppStartupInfo = null;
+function getAppStartupInfo() {
+  if (!cachedAppStartupInfo) {
+    cachedAppStartupInfo = buildStartupInfo(getAppVariablesJson());
+  }
+  return cachedAppStartupInfo;
+}
+const WmApp = BaseApp(AppInner, addAppScript, getAppVariables, {
+  componentName: "App",
+  get startUpVariables() {
+    return getAppStartupInfo().startUpVariables;
+  },
+  get startUpActions() {
+    return getAppStartupInfo().startUpActions;
+  },
+  get autoUpdateVariables() {
+    return getAppStartupInfo().autoUpdateVariables;
+  },
+  type: "App"
+});
+let previewRouter = null;
+function initPreviewRuntimeRouter(router) {
+  previewRouter = router;
+  function navigateWithSearchParams(path, options) {
+    const [pathname, search] = toPreviewRouterPath(path).split("?");
+    const navigationPayload = {
+      pathname: pathname || "/",
+      search: search ? `?${search}` : ""
+    };
+    router.navigate(navigationPayload, options);
+  }
+  setRouter({
+    push: (path) => navigateWithSearchParams(path),
+    replace: (path) => navigateWithSearchParams(path, { replace: true }),
+    back: () => router.navigate(-1),
+    forward: () => router.navigate(1)
+  });
+}
+function App() {
+  if (!previewRouter) {
+    throw new Error(
+      "initPreviewRuntimeRouter() must be called after initializeApp() and before render."
+    );
+  }
+  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(LocalizationProvider, { children: /* @__PURE__ */ jsx(WmThemeProvider, { children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(WmApp, { children: /* @__PURE__ */ jsx(RouterProvider, { router: previewRouter }) }) }) }) }) });
+}
+export {
+  App,
+  initPreviewRuntimeRouter
+};

package/runtime-dynamic/app-initializer.d.ts

@@ -0,0 +1,15 @@
+interface ProjectConfig {
+    cdnUrl: string;
+    apiUrl: string;
+    deployUrl: string;
+    /** Mirrors Angular `initializeProjectDetails` in `runtime-dynamic` `app.config.ts` (`_WM_APP_PROJECT.isPreview`). */
+    isPreview: boolean;
+    fontConfig?: string;
+}
+export declare function getProjectConfig(): ProjectConfig;
+export declare function getAppScript(): ((app: unknown) => void) | null;
+export declare function getAppVariablesJson(): Record<string, unknown>;
+export declare function getPartialNames(): string[];
+export declare function getCustomFormatters(): Record<string, any>;
+export declare function initializeApp(): Promise<void>;
+export {};

package/runtime-dynamic/app-initializer.js

@@ -0,0 +1,254 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import axios from "axios";
+import appstore from "../core/appstore";
+import { store } from "../store";
+import { updateConfig } from "../store/slices/appConfigSlice";
+import {
+  loadSecurityInfo,
+  setSecurityConfig
+} from "../store/slices/authSlice";
+import {
+  loadWmProperties,
+  setupAxiosInterceptors
+} from "../core/app.service";
+import { loadLocaleBundle } from "../store/slices/i18nSlice";
+import { initAppModes } from "../core/util/utils";
+import { appendStylesheetLink, getMetaContent } from "./utils";
+import { isRuntimePreviewPrefab } from "./preview-mode";
+import { createLazyPartial } from "./services/variable-registry";
+import { resolvePreviewFetchUrl } from "./preview-resource-base";
+import { fetchResource } from "./services/resource-manager";
+async function fetchOptionalText(url) {
+  var _a;
+  try {
+    const response = await axios.get(resolvePreviewFetchUrl(url), { responseType: "text" });
+    return (_a = response.data) != null ? _a : void 0;
+  } catch (e) {
+    return void 0;
+  }
+}
+let projectConfig = {
+  cdnUrl: "",
+  apiUrl: "",
+  deployUrl: "",
+  isPreview: true
+};
+function getProjectConfig() {
+  return projectConfig;
+}
+function initializeProjectDetails() {
+  const deployUrlMeta = getMetaContent("deployUrl").trim();
+  const isPreview = !deployUrlMeta;
+  const resolvedCdn = deployUrlMeta || getMetaContent("cdnUrl").trim();
+  const cdnUrl = resolvedCdn || "ng-bundle/";
+  projectConfig = {
+    cdnUrl,
+    apiUrl: getMetaContent("apiUrl") || "./services",
+    deployUrl: deployUrlMeta || "./",
+    isPreview,
+    fontConfig: void 0
+  };
+}
+async function loadFontConfig() {
+  const text = await fetchOptionalText("./font.config.js");
+  if (text !== void 0) {
+    projectConfig.fontConfig = text;
+  }
+}
+let appScriptFn = null;
+let appVariablesJson = {};
+let partialNames = [];
+let customFormatters = {};
+function getAppScript() {
+  return appScriptFn;
+}
+function getAppVariablesJson() {
+  return appVariablesJson;
+}
+function getPartialNames() {
+  return partialNames;
+}
+function getCustomFormatters() {
+  return customFormatters;
+}
+async function loadAppScript() {
+  const scriptText = await fetchOptionalText("./app.js");
+  if (scriptText) {
+    appScriptFn = new Function("App", scriptText);
+  } else if (scriptText === void 0) {
+    console.warn("app.js not found or failed to load");
+  }
+}
+async function loadAppVariables() {
+  var _a;
+  return (_a = await fetchResource("./app.variables.json", true)) != null ? _a : {};
+}
+async function loadCustomFormatters() {
+  const js = await fetchOptionalText("./extensions/formatters.js");
+  if (!js) return {};
+  const fn = new Function(
+    `${js}
+return typeof WM_CUSTOM_FORMATTERS !== 'undefined' ? WM_CUSTOM_FORMATTERS : {};`
+  );
+  const result = fn();
+  Object.keys(result).forEach((k) => {
+    var _a;
+    if ((_a = result[k]) == null ? void 0 : _a.formatter) {
+      result[k].format = result[k].formatter;
+    }
+  });
+  return result;
+}
+const PARTIAL_TYPES = /* @__PURE__ */ new Set([
+  "PARTIAL",
+  "LEFTNAV",
+  "POPOVER",
+  "TEMPLATE",
+  "HEADER",
+  "FOOTER",
+  "TOPNAV",
+  "RIGHTNAV"
+]);
+async function loadPagesConfig(appProperties) {
+  try {
+    const response = await axios.get(
+      resolvePreviewFetchUrl("./pages/pages-config.json")
+    );
+    const all = Array.isArray(response.data) ? response.data : [];
+    return {
+      pages: all.filter((c) => c.type === "PAGE"),
+      partials: all.filter((c) => PARTIAL_TYPES.has(c.type))
+    };
+  } catch (e) {
+    return buildFallbackPageConfig(appProperties);
+  }
+}
+function buildFallbackPageConfig(appProperties) {
+  const pages = [];
+  const seen = /* @__PURE__ */ new Set();
+  const addPage = (name, permission = "PermitAll") => {
+    if (!name || seen.has(name)) return;
+    seen.add(name);
+    pages.push({ name, type: "PAGE", permission, allowedRoles: [] });
+  };
+  addPage(appProperties == null ? void 0 : appProperties.homePage);
+  addPage("Login");
+  addPage("Main");
+  return { pages, partials: [] };
+}
+async function dispatchInitialConfig() {
+  const appProperties = await loadWmProperties(projectConfig.deployUrl).catch(
+    () => ({ defaultLanguage: "en", defaultTimezone: "UTC" })
+  );
+  const { pages, partials } = await loadPagesConfig(appProperties);
+  partialNames = partials.map((p) => p.name);
+  const normalizedUrl = projectConfig.deployUrl.replace(/\/+$/, "");
+  store.dispatch(
+    updateConfig({
+      serviceDefs: {},
+      appConfig: {
+        url: normalizedUrl,
+        appProperties,
+        pages,
+        partials,
+        isPreview: projectConfig.isPreview
+      }
+    })
+  );
+  if (!isRuntimePreviewPrefab()) {
+    try {
+      await store.dispatch(loadSecurityInfo(projectConfig.deployUrl)).unwrap();
+    } catch (e) {
+    }
+  }
+  enforceSecurityDisabled();
+}
+function enforceSecurityDisabled() {
+  let overriding = false;
+  const forceDisable = () => {
+    var _a;
+    if (overriding) return;
+    const secConfig = (_a = store.getState().auth) == null ? void 0 : _a.securityConfig;
+    if (secConfig == null ? void 0 : secConfig.isSecurityEnabled) {
+      overriding = true;
+      store.dispatch(setSecurityConfig(__spreadProps(__spreadValues({}, secConfig), { isSecurityEnabled: false })));
+      overriding = false;
+    }
+  };
+  forceDisable();
+  store.subscribe(forceDisable);
+}
+function syncAppstoreCommonPartial(isPrefabPreview) {
+  appstore.set("AppConfig", {
+    partials: isPrefabPreview ? [] : [{ name: "Common", component: createLazyPartial("Common") }],
+    appVariables: () => ({ Variables: {}, Actions: {} })
+  });
+}
+async function initializeApp() {
+  initializeProjectDetails();
+  initAppModes();
+  setupAxiosInterceptors();
+  await dispatchInitialConfig();
+  const isPrefabPreview = isRuntimePreviewPrefab();
+  syncAppstoreCommonPartial(isPrefabPreview);
+  if (!isPrefabPreview) {
+    await loadFontConfig();
+    loadPreviewCustomIcons();
+  }
+  const [loadedVariables, , loadedFormatters] = await Promise.all([
+    loadAppVariables(),
+    loadAppScript(),
+    isPrefabPreview ? Promise.resolve({}) : loadCustomFormatters()
+    // loadAppExtensions(),
+  ]);
+  appVariablesJson = loadedVariables;
+  customFormatters = loadedFormatters;
+  try {
+    await store.dispatch(loadLocaleBundle()).unwrap();
+  } catch (e) {
+  }
+}
+function getIconCssPathsFromFontConfig() {
+  const source = projectConfig.fontConfig;
+  if (!source) {
+    return [];
+  }
+  return [...source.matchAll(/"csspath":\s*"([^"]+)"/g)].map((match) => match[1]);
+}
+function resolvePreviewIconStylesheetUrl(csspath) {
+  if (/^https?:\/\//i.test(csspath) || csspath.startsWith("//")) {
+    return csspath;
+  }
+  return resolvePreviewFetchUrl(csspath);
+}
+function loadPreviewCustomIcons() {
+  getIconCssPathsFromFontConfig().forEach((csspath) => {
+    appendStylesheetLink(resolvePreviewIconStylesheetUrl(csspath));
+  });
+}
+export {
+  getAppScript,
+  getAppVariablesJson,
+  getCustomFormatters,
+  getPartialNames,
+  getProjectConfig,
+  initializeApp
+};

package/runtime-dynamic/components/ErrorBoundary.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+type BoundaryScope = "page" | "partial" | "prefab";
+interface ErrorBoundaryProps {
+    children: React.ReactNode;
+    scope?: BoundaryScope;
+    componentName?: string;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class ComponentErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/runtime-dynamic/components/ErrorBoundary.js

@@ -0,0 +1,76 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import ErrorFallback from "../../components/page/error-boundary";
+const INLINE_ERROR_STYLES = {
+  padding: "12px 16px",
+  margin: "8px 0",
+  border: "1px solid #f5c6cb",
+  borderRadius: "4px",
+  backgroundColor: "#fff3f3",
+  color: "#721c24",
+  fontSize: "13px"
+};
+function InlineErrorFallback({
+  scope,
+  componentName,
+  error
+}) {
+  const label = componentName ? `${scope} "${componentName}"` : scope;
+  return /* @__PURE__ */ jsxs("div", { style: INLINE_ERROR_STYLES, role: "alert", children: [
+    /* @__PURE__ */ jsxs("strong", { children: [
+      "Error in ",
+      label,
+      ":"
+    ] }),
+    " ",
+    /* @__PURE__ */ jsx("span", { children: (error == null ? void 0 : error.message) || "Something went wrong." })
+  ] });
+}
+class ComponentErrorBoundary extends React.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", { hasError: false, error: null });
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, info) {
+    const scope = this.props.scope || "page";
+    const name = this.props.componentName || "unknown";
+    console.error(`[ErrorBoundary:${scope}:${name}]`, error, info.componentStack);
+  }
+  render() {
+    var _a, _b;
+    if (!this.state.hasError) {
+      return this.props.children;
+    }
+    const scope = this.props.scope || "page";
+    if (scope === "partial" || scope === "prefab") {
+      return /* @__PURE__ */ jsx(
+        InlineErrorFallback,
+        {
+          scope,
+          componentName: this.props.componentName,
+          error: this.state.error
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      ErrorFallback,
+      {
+        error: {
+          message: ((_a = this.state.error) == null ? void 0 : _a.message) || "Something went wrong!",
+          stack: (_b = this.state.error) == null ? void 0 : _b.stack
+        },
+        title: "Something went wrong!",
+        subtitle: "Don't worry, you can try again or go back to the home page."
+      }
+    );
+  }
+}
+export {
+  ComponentErrorBoundary
+};

package/runtime-dynamic/components/PageWrapper.d.ts

@@ -0,0 +1 @@
+export declare function PageWrapper(): import("react/jsx-runtime").JSX.Element;

package/runtime-dynamic/components/PageWrapper.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useParams } from "react-router-dom";
+import ErrorFallback from "../../components/page/error-boundary";
+import { AppSpinner } from "../../components/common";
+import { ComponentType } from "../services/fragment-url";
+import { ComponentErrorBoundary } from "./ErrorBoundary";
+import { useDynamicComponent } from "./use-dynamic-component";
+function PageWrapper() {
+  const { pageName } = useParams();
+  const { Component, isLoading, error } = useDynamicComponent(pageName, ComponentType.PAGE);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(AppSpinner, { show: true, spinnermessages: ["Loading page..."] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      ErrorFallback,
+      {
+        error,
+        title: `Failed to load "${pageName}"`,
+        subtitle: "The page could not be loaded. Please try again."
+      }
+    );
+  }
+  if (!Component) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ComponentErrorBoundary, { scope: "page", componentName: pageName, children: /* @__PURE__ */ jsx(Component, {}) });
+}
+export {
+  PageWrapper
+};

package/runtime-dynamic/components/PrefabPreview.d.ts

@@ -0,0 +1 @@
+export declare function PrefabPreview(): import("react/jsx-runtime").JSX.Element;