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

package/runtime-dynamic/components/PrefabPreview.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useRef } from "react";
+import ErrorFallback from "../../components/page/error-boundary";
+import { AppSpinner } from "../../components/common";
+import { WidgetProvider } from "../../context/WidgetProvider";
+import { ComponentType } from "../services/fragment-url";
+import { ComponentErrorBoundary } from "./ErrorBoundary";
+import { useDynamicComponent } from "./use-dynamic-component";
+const PREFAB_PREVIEW_NAME = "__self__";
+function PrefabPreviewWidgetHost({ children }) {
+  const proxy = useRef({
+    Widgets: {},
+    App: { Widgets: {} },
+    layoutReady: () => {
+    }
+  });
+  const pageShell = useMemo(
+    () => ({
+      type: "PAGE",
+      componentType: "PAGE",
+      componentName: "PrefabPreview",
+      Widgets: {},
+      App: { Widgets: {} }
+    }),
+    []
+  );
+  const providerValue = useMemo(() => ({ value: pageShell, proxy: proxy.current }), [pageShell]);
+  return /* @__PURE__ */ jsx(WidgetProvider, { value: providerValue, children });
+}
+function PrefabPreview() {
+  const { Component, isLoading, error } = useDynamicComponent(
+    PREFAB_PREVIEW_NAME,
+    ComponentType.PREFAB
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(AppSpinner, { show: true, spinnermessages: ["Loading prefab\u2026"] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      ErrorFallback,
+      {
+        error,
+        title: "Failed to load prefab preview",
+        subtitle: "The prefab could not be loaded. Please try again."
+      }
+    );
+  }
+  if (!Component) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ComponentErrorBoundary, { scope: "prefab", componentName: PREFAB_PREVIEW_NAME, children: /* @__PURE__ */ jsx(PrefabPreviewWidgetHost, { children: /* @__PURE__ */ jsx("div", { className: "prefab-preview row", children: /* @__PURE__ */ jsx(Component, { prefabname: "" }) }) }) });
+}
+export {
+  PrefabPreview
+};

package/runtime-dynamic/components/partial-content.d.ts

@@ -0,0 +1,14 @@
+import { Prettify, BaseProps } from "@wavemaker-ai/react-runtime/higherOrder/props";
+export interface WmPartialContentProp {
+    prefab?: boolean;
+    content: string;
+    partialName?: string;
+    params?: string[];
+    onLoad?: (widget: {
+        viewParent?: Record<string, unknown>;
+    }, partialName?: string) => void;
+    onRender?: (commonComponent: any) => void;
+}
+export type WmPartialContentProps = Prettify<WmPartialContentProp & BaseProps>;
+declare const WmPartialContent: import("react").MemoExoticComponent<(props: WmPartialContentProps) => import("react/jsx-runtime").JSX.Element>;
+export default WmPartialContent;

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

@@ -0,0 +1,70 @@
+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 { jsx } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import clsx from "clsx";
+import Container from "@mui/material/Container";
+import isEqual from "lodash-es/isEqual";
+import { registerComponent } from "../registry/store";
+import { ComponentType } from "../services/fragment-url";
+import { ComponentErrorBoundary } from "./ErrorBoundary";
+import { useDynamicComponent } from "./use-dynamic-component";
+const WmPartialContent = memo(
+  (props) => {
+    const { Component } = useDynamicComponent(props == null ? void 0 : props.content, ComponentType.PARTIAL);
+    const handleOnLoad = useCallback(
+      (widget) => {
+        if (props.onLoad) {
+          props.onLoad(widget, props.partialName || props.prefabName);
+        }
+      },
+      [props.onLoad, props.partialName, props.prefabName]
+    );
+    const mergedProps = __spreadProps(__spreadValues({}, props), {
+      onLoad: handleOnLoad
+    });
+    return /* @__PURE__ */ jsx("div", { className: clsx(props.content && `app-partial-${props.content}`), children: /* @__PURE__ */ jsx(Container, { className: "partial-container", children: /* @__PURE__ */ jsx(ComponentErrorBoundary, { scope: "partial", componentName: props.content, children: Component && /* @__PURE__ */ jsx(Component, __spreadValues({}, mergedProps)) }) }) });
+  },
+  (prevProps, nextProps) => {
+    const staticKeys = [
+      "content",
+      "prefab",
+      "prefabName",
+      "partialName",
+      "styles",
+      "params"
+    ];
+    const staticEqual = staticKeys.every((key) => {
+      if (key === "styles") {
+        return isEqual(prevProps[key], nextProps[key]);
+      }
+      return prevProps[key] === nextProps[key];
+    });
+    if (!staticEqual) return false;
+    const paramNames = nextProps.params || [];
+    return paramNames.every((p) => prevProps[p] === nextProps[p]);
+  }
+);
+WmPartialContent.displayName = "WmPartialContent";
+registerComponent("WmPartialContent", WmPartialContent);
+var partial_content_default = WmPartialContent;
+export {
+  partial_content_default as default
+};

package/runtime-dynamic/components/prefab-content.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type PrefabContentProps = {
+    prefabname: string;
+    content: string;
+    params: Record<string, unknown>;
+    onRender: (component: React.ComponentType<any>) => void;
+    listener: any;
+};
+declare const PrefabContent: (props: PrefabContentProps) => import("react/jsx-runtime").JSX.Element;
+export default PrefabContent;

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

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+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;
+};
+import { jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { WmSpinner } from "../../components/basic/spinner";
+import { ComponentType } from "../services/fragment-url";
+import { ComponentErrorBoundary } from "./ErrorBoundary";
+import { useDynamicComponent } from "./use-dynamic-component";
+const PrefabContent = (props) => {
+  const { Component } = useDynamicComponent(props == null ? void 0 : props.prefabname, ComponentType.PREFAB, {
+    prefabName: props == null ? void 0 : props.prefabname
+  });
+  return /* @__PURE__ */ jsx(ComponentErrorBoundary, { scope: "prefab", componentName: props.prefabname, children: /* @__PURE__ */ jsx(
+    Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx(WmSpinner, { show: true, listener: props.listener, name: "prefab-spinner" }),
+      children: Component && /* @__PURE__ */ jsx(Component, __spreadValues({}, props))
+    }
+  ) });
+};
+var prefab_content_default = PrefabContent;
+export {
+  prefab_content_default as default
+};

package/runtime-dynamic/components/use-dynamic-component.d.ts

@@ -0,0 +1,10 @@
+import { ComponentType } from "../services/fragment-url";
+interface DynamicComponentState {
+    Component: React.ComponentType<any> | null;
+    isLoading: boolean;
+    error: Error | null;
+}
+export declare function useDynamicComponent(componentName: string | undefined, componentType: ComponentType, options?: {
+    prefabName?: string;
+}): DynamicComponentState;
+export {};

package/runtime-dynamic/components/use-dynamic-component.js

@@ -0,0 +1,58 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { getComponentRef, getPrefabConfig } from "../services/component-ref-provider";
+import { ComponentType } from "../services/fragment-url";
+import { buildBasePageLikeComponent } from "../factories/build-base-page-like-component";
+import { buildPrefabComponent } from "../factories/prefab-factory";
+const builders = {
+  [ComponentType.PAGE]: (name, fragment) => buildBasePageLikeComponent("page", name, fragment),
+  [ComponentType.PARTIAL]: (name, fragment) => buildBasePageLikeComponent("partial", name, fragment),
+  [ComponentType.PREFAB]: (name, fragment, prefabOutboundDefaults) => buildPrefabComponent(name, fragment, prefabOutboundDefaults != null ? prefabOutboundDefaults : {})
+};
+function useDynamicComponent(componentName, componentType, options) {
+  const [state, setState] = useState({
+    Component: null,
+    isLoading: !!componentName,
+    error: null
+  });
+  const activeRequestRef = useRef(0);
+  const load = useCallback(
+    async (name) => {
+      const requestId = ++activeRequestRef.current;
+      setState({ Component: null, isLoading: true, error: null });
+      try {
+        const fetchOptions = componentType === ComponentType.PREFAB ? { prefabName: (options == null ? void 0 : options.prefabName) || name } : void 0;
+        let prefabOutboundDefaults;
+        if (componentType === ComponentType.PREFAB) {
+          prefabOutboundDefaults = await getPrefabConfig(name) || {};
+        }
+        const fragment = await getComponentRef(name, componentType, fetchOptions);
+        if (!fragment) {
+          if (requestId === activeRequestRef.current) {
+            setState({ Component: null, isLoading: false, error: null });
+          }
+          return;
+        }
+        const builder = builders[componentType];
+        if (!builder) throw new Error(`No builder registered for component type: ${componentType}`);
+        const Component = await builder(name, fragment, prefabOutboundDefaults);
+        if (requestId === activeRequestRef.current) {
+          setState({ Component, isLoading: false, error: null });
+        }
+      } catch (err) {
+        if (requestId !== activeRequestRef.current) return;
+        const error = err instanceof Error ? err : new Error(`Failed to load ${componentType}`);
+        console.error(`Failed to load ${componentType} "${name}":`, err);
+        setState({ Component: null, isLoading: false, error });
+      }
+    },
+    [componentType, options == null ? void 0 : options.prefabName]
+  );
+  useEffect(() => {
+    if (!componentName) return;
+    load(componentName);
+  }, [componentName, load, componentType]);
+  return state;
+}
+export {
+  useDynamicComponent
+};

package/runtime-dynamic/factories/build-base-page-like-component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { DecodedFragment } from "../services/component-ref-provider";
+export type BasePageLikeKind = "page" | "partial";
+/**
+ * Shared path for dynamically loaded pages and partials: both wrap codegen output
+ * with {@link BasePage}, differing only in script scope and startup metadata labels.
+ */
+export declare function buildBasePageLikeComponent(kind: BasePageLikeKind, name: string, fragment: DecodedFragment): Promise<React.ComponentType<any>>;

package/runtime-dynamic/factories/build-base-page-like-component.js

@@ -0,0 +1,45 @@
+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 React from "react";
+import BasePage from "../../higherOrder/BasePage";
+import { ScriptScope } from "../services/script-executor";
+import { buildDynamicComponent } from "./utils";
+async function buildBasePageLikeComponent(kind, name, fragment) {
+  const isPage = kind === "page";
+  const WrappedComponent = await buildDynamicComponent(fragment, {
+    componentName: name,
+    componentType: isPage ? "page" : "partial",
+    scriptScope: isPage ? ScriptScope.PAGE : ScriptScope.PARTIAL,
+    hoc: BasePage,
+    componentInfo: (startupInfo) => __spreadProps(__spreadValues({
+      componentName: name,
+      componentType: isPage ? "PAGE" : "PARTIAL"
+    }, startupInfo), {
+      isPartOfPrefab: false,
+      appLocale: {}
+    })
+  });
+  const MemoizedComponent = React.memo(WrappedComponent);
+  MemoizedComponent.displayName = isPage ? `BasePage(${name})` : `BasePage_Partial(${name})`;
+  return MemoizedComponent;
+}
+export {
+  buildBasePageLikeComponent
+};

package/runtime-dynamic/factories/dynamic-component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { TranspiledOutput } from "../services/markup-transpiler";
+export interface InnerComponentConfig {
+    componentName: string;
+    componentType: "page" | "partial" | "prefab";
+    transpiled: TranspiledOutput | null;
+    styles: string;
+}
+export declare function createDynamicComponent({ componentName, componentType, transpiled, styles, }: InnerComponentConfig): React.FC<any>;

package/runtime-dynamic/factories/dynamic-component.js

@@ -0,0 +1,127 @@
+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 { jsx } from "react/jsx-runtime";
+import React, { useEffect, useReducer, useRef } from "react";
+import WmPrefab from "../../components/prefab";
+import { useAppState } from "../../context/WidgetProvider";
+import { useAppContext } from "../../context/AppContext";
+import { renderTranspiledMarkup } from "../services/markup-transpiler";
+import {
+  scopeComponentStyles,
+  removeComponentStyles,
+  resolvePrefabScopeName
+} from "../services/css-scoping";
+function useCrossScopeDataRefresh(appContext, componentType) {
+  const [, forceRender] = useReducer((count) => count + 1, 0);
+  useEffect(() => {
+    if (componentType === "page") return;
+    const subscribe = appContext == null ? void 0 : appContext.subscribe;
+    if (typeof subscribe !== "function") return;
+    const unsubscribePage = subscribe("page-variables-data-loaded", forceRender);
+    const unsubscribeApp = subscribe("app-variables-data-loaded", forceRender);
+    return () => {
+      unsubscribePage == null ? void 0 : unsubscribePage();
+      unsubscribeApp == null ? void 0 : unsubscribeApp();
+    };
+  }, [appContext, componentType]);
+}
+function usePageEvents(appState, componentType) {
+  const appStateRef = useRef(appState);
+  appStateRef.current = appState;
+  useEffect(() => {
+    var _a, _b;
+    if (componentType !== "page") return;
+    (_b = (_a = appStateRef.current) == null ? void 0 : _a.attach) == null ? void 0 : _b.call(_a);
+    const onOrientationChange = () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = appStateRef.current) == null ? void 0 : _a2.orientationchange) == null ? void 0 : _b2.call(_a2);
+    };
+    const onResize = () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = appStateRef.current) == null ? void 0 : _a2.resize) == null ? void 0 : _b2.call(_a2);
+    };
+    window.addEventListener("orientationchange", onOrientationChange);
+    window.addEventListener("resize", onResize);
+    return () => {
+      var _a2, _b2;
+      window.removeEventListener("orientationchange", onOrientationChange);
+      window.removeEventListener("resize", onResize);
+      (_b2 = (_a2 = appStateRef.current) == null ? void 0 : _a2.destroy) == null ? void 0 : _b2.call(_a2);
+    };
+  }, []);
+}
+function createDynamicComponent({
+  componentName,
+  componentType,
+  transpiled,
+  styles
+}) {
+  const InnerComponent = (props) => {
+    const appState = useAppState();
+    usePageEvents(appState, componentType);
+    const appContext = useAppContext();
+    useCrossScopeDataRefresh(appContext, componentType);
+    const notification = appContext == null ? void 0 : appContext.notification;
+    useEffect(() => {
+      if (styles) {
+        scopeComponentStyles(componentName, componentType, styles);
+      }
+      let id = null;
+      if (appState) {
+        if (componentType.toLowerCase() === "page") {
+          id = setTimeout(() => {
+            appState.pageReady();
+          }, 1e3);
+        } else {
+          appState.pageReady();
+        }
+      }
+      return () => {
+        if (id) clearTimeout(id);
+        removeComponentStyles(componentName, componentType);
+      };
+    }, []);
+    if (!transpiled) return null;
+    const renderState = notification ? __spreadProps(__spreadValues({}, appState), { notification }) : appState;
+    const markup = renderTranspiledMarkup(transpiled, renderState);
+    if (componentType === "prefab") {
+      return /* @__PURE__ */ jsx(
+        WmPrefab,
+        {
+          prefabname: resolvePrefabScopeName(componentName, props.prefabname),
+          onLoad: props.onLoad,
+          onDestroy: props.onDestroy,
+          onRender: props.onRender,
+          styles: props.styles,
+          width: props.width,
+          height: props.height,
+          listener: props.listener,
+          show: props.show,
+          children: markup
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(React.Fragment, { children: markup });
+  };
+  return InnerComponent;
+}
+export {
+  createDynamicComponent
+};

package/runtime-dynamic/factories/prefab-factory.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DecodedFragment } from "../services/component-ref-provider";
+export declare function buildPrefabComponent(prefabName: string, fragment: DecodedFragment, defaultPrefabProps: Record<string, unknown>): Promise<React.ComponentType<any>>;

package/runtime-dynamic/factories/prefab-factory.js

@@ -0,0 +1,61 @@
+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 { jsx } from "react/jsx-runtime";
+import React from "react";
+import BasePrefab from "../../higherOrder/BasePrefab";
+import { ScriptScope } from "../services/script-executor";
+import { buildDynamicComponent } from "./utils";
+async function buildPrefabComponent(prefabName, fragment, defaultPrefabProps) {
+  const BasePrefabComponent = await buildDynamicComponent(fragment, {
+    componentName: prefabName,
+    componentType: "prefab",
+    scriptScope: ScriptScope.PREFAB,
+    hoc: BasePrefab,
+    componentInfo: (startupInfo) => __spreadProps(__spreadValues({
+      type: "PREFAB",
+      componentName: prefabName,
+      componentType: "PREFAB"
+    }, startupInfo), {
+      partials: [],
+      pages: [],
+      prefabInfo: {}
+    }),
+    transpileOptions: { isPartOfPrefab: true, prefabName }
+  });
+  const DynamicPrefabShell = React.memo((props) => {
+    var _a, _b;
+    const resolvedName = (_b = (_a = props.name) != null ? _a : defaultPrefabProps.name) != null ? _b : prefabName;
+    return /* @__PURE__ */ jsx(
+      BasePrefabComponent,
+      __spreadProps(__spreadValues({
+        inbound: props,
+        outbound: defaultPrefabProps,
+        prefabname: prefabName
+      }, props), {
+        name: resolvedName
+      })
+    );
+  });
+  DynamicPrefabShell.displayName = `DynamicPrefab(${prefabName})`;
+  return DynamicPrefabShell;
+}
+export {
+  buildPrefabComponent
+};

package/runtime-dynamic/factories/startup-info.d.ts

@@ -0,0 +1,6 @@
+export interface StartupInfo {
+    startUpVariables: string[];
+    startUpActions: string[];
+    autoUpdateVariables: string[];
+}
+export declare function buildStartupInfo(variables: Record<string, unknown> | undefined): StartupInfo;

package/runtime-dynamic/factories/startup-info.js

@@ -0,0 +1,15 @@
+const TIMER_ACTION_CATEGORY = "wm.TimerAction";
+const AUTO_UPDATE_CATEGORIES = ["wm.Variable", "wm.LiveVariable"];
+function buildStartupInfo(variables) {
+  const varDefs = Object.values(variables || {});
+  return {
+    startUpVariables: varDefs.filter((v) => v.startUpdate && v.category !== TIMER_ACTION_CATEGORY).map((v) => v.name),
+    startUpActions: varDefs.filter((v) => v.startUpdate && v.category === TIMER_ACTION_CATEGORY).map((v) => v.name),
+    autoUpdateVariables: varDefs.filter(
+      (v) => v.autoUpdate || AUTO_UPDATE_CATEGORIES.includes(v.category || "") && v.dataBinding && v.dataBinding.length
+    ).map((v) => v.name)
+  };
+}
+export {
+  buildStartupInfo
+};

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { ScriptScope } from "../services/script-executor";
+import { buildStartupInfo } from "./startup-info";
+import type { TranspileOptions } from "../services/markup-transpiler";
+import type { DecodedFragment } from "../services/component-ref-provider";
+export interface DynamicComponentConfig {
+    componentName: string;
+    componentType: "page" | "partial" | "prefab";
+    scriptScope: ScriptScope;
+    hoc: (...args: any[]) => React.ComponentType<any>;
+    componentInfo: (startupInfo: ReturnType<typeof buildStartupInfo>) => Record<string, unknown>;
+    transpileOptions?: Partial<TranspileOptions>;
+    displayName?: string;
+}
+export declare function buildDynamicComponent(fragment: DecodedFragment, config: DynamicComponentConfig): Promise<React.ComponentType<any>>;

package/runtime-dynamic/factories/utils.js

@@ -0,0 +1,54 @@
+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 { buildAddPageScript } from "../services/script-executor";
+import { transpileAndBuildGetVariables } from "../services/variable-transpiler";
+import { transpileFragment } from "../services/markup-transpiler";
+import { yieldToMain } from "../utils";
+import { buildStartupInfo } from "./startup-info";
+import { createDynamicComponent } from "./dynamic-component";
+async function buildDynamicComponent(fragment, config) {
+  var _a;
+  const { markup, script, styles, variables } = fragment;
+  const { componentName, componentType, scriptScope, hoc, componentInfo, transpileOptions } = config;
+  const addPageScript = buildAddPageScript(script, scriptScope, componentName);
+  const transpiled = transpileFragment(
+    markup,
+    transpileOptions ? __spreadValues({ variables }, transpileOptions) : variables
+  );
+  await yieldToMain();
+  const variablesCodeString = (transpiled == null ? void 0 : transpiled.variables) || "";
+  const getVariables = transpileAndBuildGetVariables(variablesCodeString, variables);
+  await yieldToMain();
+  const InnerComponent = createDynamicComponent({
+    componentName,
+    componentType,
+    transpiled,
+    styles
+  });
+  InnerComponent.displayName = config.displayName || `Dynamic${componentType.charAt(0).toUpperCase() + componentType.slice(1)}(${componentName})`;
+  const startupInfo = buildStartupInfo(variables);
+  const info = __spreadProps(__spreadValues({}, componentInfo(startupInfo)), {
+    activePageDeps: (_a = transpiled == null ? void 0 : transpiled.activePageDeps) != null ? _a : []
+  });
+  return hoc(InnerComponent, addPageScript, getVariables, info);
+}
+export {
+  buildDynamicComponent
+};

package/runtime-dynamic/index.d.ts

@@ -0,0 +1,14 @@
+export { App, initPreviewRuntimeRouter } from "./App";
+export { createAppRouter } from "./routes";
+export { isRuntimePreviewPrefab, PREFAB_PREVIEW_PATH, PREFAB_PREVIEW_ROUTE_PATH, PREFAB_PREVIEW_ROUTE_SEGMENT, } from "./preview-mode";
+export { initializeApp, getProjectConfig } from "./app-initializer";
+export { getComponent, hasComponent, registerComponent, getAllComponentNames } from "./registry";
+export { registerCustomWidget, getCustomWidget, hasCustomWidget } from "./registry";
+export { transpileAndRender, transpileFragment, renderTranspiledMarkup, clearTranspileCache, } from "./services/markup-transpiler";
+export { transpileAndBuildGetVariables, clearVariablesCache } from "./services/variable-transpiler";
+export { getComponentRef, clearComponentRefCache, ComponentType } from "./services";
+export { buildBasePageLikeComponent, type BasePageLikeKind, } from "./factories/build-base-page-like-component";
+export { buildPrefabComponent } from "./factories/prefab-factory";
+export { PageWrapper } from "./components/PageWrapper";
+export { PrefabPreview } from "./components/PrefabPreview";
+export type { DecodedFragment, PageMinJSON } from "./services";