@nuraly/runtime 0.1.9 → 0.1.10

package/dist/{python-DLI1ji08.js → python-B-WcGqFq.js}

@@ -1,4 +1,4 @@
-import { m as o } from "./CodeEditor-B1gNuvPb.js";
+import { m as o } from "./CodeEditor-ChuFC0ex.js";
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Version: 0.52.2(404545bded1df6ffa41ea0af4e8ddb219018c6c1)

package/dist/{razor-oAnIJsrL.js → razor-JGACy1mz.js}

@@ -1,4 +1,4 @@
-import { m } from "./CodeEditor-B1gNuvPb.js";
+import { m } from "./CodeEditor-ChuFC0ex.js";
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Version: 0.52.2(404545bded1df6ffa41ea0af4e8ddb219018c6c1)

package/dist/runtime.js

@@ -1,9 +1,11 @@
-import { $ as $components, u as updateComponentHandler, r as removeComponentToCurrentPageAction, a as $hoveredComponent, b as $hoveredComponentId, c as $showShareApplicationModal, d as $permissionsState, e as $applicationPermission, f as $currentApplication, g as updateApplicationActionHandler, h as $showCreateApplicationModal, F as FRONT_API_URLS, i as $editorState, j as $environment, k as addPageHandler, l as $currentPageId, m as $currentPageViewPort, n as $resizing, o as $showBorder, p as $pageSize, q as $pages, s as $pageZoom } from './BaseElement-BNBn_IJk.js';
-export { w as $applicationComponents, a1 as $applicationPages, Y as $applications, L as $componentById, G as $componentRuntimeValueByKey, D as $componentRuntimeValuesById, A as $componentWithChildren, H as $componentsByUUIDs, a3 as $context, _ as $contextMenuEvent, y as $currentComponentId, Z as $currentPage, a6 as $debug, z as $draggingComponentInfo, a0 as $microAppCurrentPage, a7 as $providers, B as $runtimeStyles, I as $runtimeStylescomponentStyleByID, C as $runtimeValues, x as $selectedComponent, a5 as $toasts, ae as BaseElement, ae as BaseElementBlock, af as BaseElementCore, ab as ComponentRegistry, bl as EMPTY_STRING, t as Editor, E as ExecuteInstance, b7 as FORBIDDEN_FUNCTIONS, b5 as FORBIDDEN_GLOBALS, b6 as FORBIDDEN_PROPERTIES, bc as GenerateName, aT as LOG_LEVELS, aP as Logger, bk as NO_EVENT_LISTENER, aZ as RuntimeContextHelpers, v as RuntimeHelpers, R as RuntimeInstance, b8 as VALIDATION_ERROR_MESSAGES, a4 as ViewMode, ag as addComponentAction, aC as addComponentHandler, ah as addComponentToCurrentPageAction, az as addGeneratedComponents, ar as addPageToApplicationAction, aL as addPermission, as as addTempApplication, aA as addlogDebug, S as clearAllRuntimeValues, bf as clearAllToasts, T as clearComponentRuntimeStyleAttributes, Q as clearComponentRuntimeValue, P as clearComponentRuntimeValues, aw as closeCreateApplicationModalAction, aa as compileHandlerFunction, aV as copyCpmponentToClipboard, aJ as createApplicationAction, aK as deleteApplicationAction, ai as deleteComponentAction, aD as deleteComponentActionHandler, ao as deletePageAction, aG as deletePageHandler, aS as enableBenchmarking, aR as enableLogging, aU as eventDispatcher, a8 as executeHandler, X as extractAllChildrenIds, W as extractChildresIds, V as fillApplicationComponents, U as fillComponentChildren, b9 as formatValidationErrors, aY as generateNuralyClipboardStructure, J as getAllChildrenRecursive, a9 as getContextFromComponent, K as getDirectChildren, b4 as getErrorMessage, ba as getNestedAttribute, bb as hasOnlyEmptyObjects, be as hideToast, aM as invokeFunctionHandler, b2 as isAllowedGlobal, b3 as isForbiddenFunction, b0 as isForbiddenGlobal, b1 as isForbiddenProperty, aN as loadFunctionsHandler, aI as loadOrRefreshApplications, aj as moveDraggedComponent, ax as openEditorTab, aW as pasteComponentFromClipboard, a2 as refreshPageStoreVar, aH as refreshPagesActionHandler, ac as registerComponent, ad as registerComponents, aO as renderComponent, aB as resetComponentDebug, at as setApplication, M as setComponentRuntimeValue, N as setComponentRuntimeValues, ap as setContextMenuEvent, ak as setCurrentComponentIdAction, ay as setCurrentEditorTab, al as setDraggingComponentInfo, aQ as setLogLevel, au as setPermissionMessage, O as setcomponentRuntimeStyleAttribute, bh as showError, bj as showInfo, bg as showSuccess, bd as showToast, bi as showWarning, aX as traitCompoentFromSchema, av as updateApplication, an as updateComponentAttributes, am as updateComponentName, aq as updatePageAction, aF as updatePageHandler, aE as validateAndEmitErrors, a$ as validateComponentHandlers, a_ as validateHandlerCode } from './BaseElement-BNBn_IJk.js';
+import { $ as $components, u as updateComponentHandler, r as removeComponentToCurrentPageAction, a as $hoveredComponent, b as $hoveredComponentId, c as $showShareApplicationModal, d as $permissionsState, e as $applicationPermission, f as $currentApplication, g as updateApplicationActionHandler, h as $showCreateApplicationModal, F as FRONT_API_URLS, i as $editorState, j as $environment, k as addPageHandler, l as $currentPageId, m as $currentPageViewPort, n as $resizing, o as $showBorder, p as $pageSize, q as $pages, s as $pageZoom } from './BaseElement-pS6m_x6Q.js';
+export { w as $applicationComponents, a1 as $applicationPages, Y as $applications, L as $componentById, G as $componentRuntimeValueByKey, D as $componentRuntimeValuesById, A as $componentWithChildren, H as $componentsByUUIDs, a3 as $context, _ as $contextMenuEvent, y as $currentComponentId, Z as $currentPage, a6 as $debug, z as $draggingComponentInfo, a0 as $microAppCurrentPage, a7 as $providers, B as $runtimeStyles, I as $runtimeStylescomponentStyleByID, C as $runtimeValues, x as $selectedComponent, a5 as $toasts, ae as BaseElement, ae as BaseElementBlock, af as BaseElementCore, ab as ComponentRegistry, t as Editor, E as ExecuteInstance, ba as FORBIDDEN_FUNCTIONS, b8 as FORBIDDEN_GLOBALS, b9 as FORBIDDEN_PROPERTIES, bf as GenerateName, aW as LOG_LEVELS, aS as Logger, b0 as RuntimeContextHelpers, v as RuntimeHelpers, R as RuntimeInstance, bb as VALIDATION_ERROR_MESSAGES, a4 as ViewMode, ag as addComponentAction, aA as addComponentHandler, ah as addComponentToCurrentPageAction, ar as addPageToApplicationAction, aJ as addPermission, ay as addlogDebug, S as clearAllRuntimeValues, bi as clearAllToasts, T as clearComponentRuntimeStyleAttributes, Q as clearComponentRuntimeValue, P as clearComponentRuntimeValues, av as closeCreateApplicationModalAction, aa as compileHandlerFunction, aY as copyCpmponentToClipboard, aH as createApplicationAction, aI as deleteApplicationAction, ai as deleteComponentAction, aB as deleteComponentActionHandler, ao as deletePageAction, aE as deletePageHandler, aV as enableBenchmarking, aU as enableLogging, aX as eventDispatcher, a8 as executeHandler, X as extractAllChildrenIds, W as extractChildresIds, V as fillApplicationComponents, U as fillComponentChildren, bc as formatValidationErrors, a$ as generateNuralyClipboardStructure, J as getAllChildrenRecursive, aR as getAvailableComponents, a9 as getContextFromComponent, K as getDirectChildren, b7 as getErrorMessage, bd as getNestedAttribute, be as hasOnlyEmptyObjects, bh as hideToast, aK as invokeFunctionHandler, b5 as isAllowedGlobal, aQ as isComponentLoaded, b6 as isForbiddenFunction, b3 as isForbiddenGlobal, b4 as isForbiddenProperty, aO as loadComponent, aP as loadComponents, aL as loadFunctionsHandler, aG as loadOrRefreshApplications, aj as moveDraggedComponent, aw as openEditorTab, aZ as pasteComponentFromClipboard, a2 as refreshPageStoreVar, aF as refreshPagesActionHandler, ac as registerComponent, ad as registerComponents, aM as renderComponent, aN as renderComponentAsync, az as resetComponentDebug, as as setApplication, M as setComponentRuntimeValue, N as setComponentRuntimeValues, ap as setContextMenuEvent, ak as setCurrentComponentIdAction, ax as setCurrentEditorTab, al as setDraggingComponentInfo, aT as setLogLevel, at as setPermissionMessage, O as setcomponentRuntimeStyleAttribute, bk as showError, bm as showInfo, bj as showSuccess, bg as showToast, bl as showWarning, a_ as traitCompoentFromSchema, au as updateApplication, an as updateComponentAttributes, am as updateComponentName, aq as updatePageAction, aD as updatePageHandler, aC as validateAndEmitErrors, b2 as validateComponentHandlers, b1 as validateHandlerCode } from './BaseElement-pS6m_x6Q.js';
 import { v4 } from 'uuid';
 import 'acorn';
 import 'acorn-walk';
 import 'fast-deep-equal';
+export { b as addGeneratedComponents, a as addTempApplication } from './aitchat-DjX5s7_8.js';
+export { E as EMPTY_STRING, N as NO_EVENT_LISTENER } from './constants-Bs_KQRi_.js';
 
 function addComponentAsChildOf(componentId, parentComponentId, application_id) {
   const componentsStore = $components.get();

package/dist/{tsMode-D_PMsbjK.js → tsMode-lzBM1oT2.js}

@@ -1,4 +1,4 @@
-import { t as L, m as O } from "./CodeEditor-B1gNuvPb.js";
+import { t as L, m as O } from "./CodeEditor-ChuFC0ex.js";
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Version: 0.52.2(404545bded1df6ffa41ea0af4e8ddb219018c6c1)

package/dist/{typescript-Bu3ZbtQI.js → typescript-CuL5pdO2.js}

@@ -1,4 +1,4 @@
-import { m as s } from "./CodeEditor-B1gNuvPb.js";
+import { m as s } from "./CodeEditor-ChuFC0ex.js";
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Version: 0.52.2(404545bded1df6ffa41ea0af4e8ddb219018c6c1)

package/dist/{xml-CNSSkPqy.js → xml-D1tacAKD.js}

@@ -1,4 +1,4 @@
-import { m as r } from "./CodeEditor-B1gNuvPb.js";
+import { m as r } from "./CodeEditor-ChuFC0ex.js";
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Version: 0.52.2(404545bded1df6ffa41ea0af4e8ddb219018c6c1)

package/dist/{yaml-5RF_PGNe.js → yaml-CjPB1g7v.js}

@@ -1,4 +1,4 @@
-import { m as l } from "./CodeEditor-B1gNuvPb.js";
+import { m as l } from "./CodeEditor-ChuFC0ex.js";
 /*!-----------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Version: 0.52.2(404545bded1df6ffa41ea0af4e8ddb219018c6c1)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuraly/runtime",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Nuraly Visual App Builder Runtime - State management, handler execution, and component system with bundled micro-app support",
   "type": "module",
   "main": "./index.ts",

package/utils/index.ts

@@ -7,7 +7,10 @@
 import { setupChangeDetection } from '../components/ui/components/base/BaseElement/base-change-detection';
 
 // Component Rendering
-export { renderComponent } from './render-util';
+export { renderComponent, renderComponentAsync } from './render-util';
+
+// Lazy Component Loader
+export { loadComponent, loadComponents, isComponentLoaded, getAvailableComponents } from './lazy-component-loader';
 
 // Component Registry
 export {

package/utils/lazy-component-loader.ts

@@ -0,0 +1,120 @@
+/**
+ * Lazy Component Loader
+ *
+ * Dynamically loads wrapper components on-demand when they are first used.
+ * This prevents loading @nuralyui packages that aren't needed by the app.
+ */
+
+// Track which components have been loaded
+const loadedComponents = new Set<string>();
+const loadingPromises = new Map<string, Promise<void>>();
+
+// Component import map - maps component tag names to their module paths
+const componentImports: Record<string, () => Promise<any>> = {
+  // Layout components with @nuralyui dependencies
+  'grid-row-block': () => import('../components/ui/components/layout/Grid/Row'),
+  'grid-col-block': () => import('../components/ui/components/layout/Grid/Col'),
+  'panel-block': () => import('../components/ui/components/layout/Panel/Panel'),
+  'tabs-block': () => import('../components/ui/components/layout/Tabs/Tabs'),
+  'card-block': () => import('../components/ui/components/layout/Card/Card'),
+
+  // Input components with @nuralyui dependencies
+  'select-block': () => import('../components/ui/components/inputs/Select/Select'),
+  'button-block': () => import('../components/ui/components/inputs/Button/Button'),
+  'checkbox-block': () => import('../components/ui/components/inputs/Checkbox/Checkbox'),
+  'radio-button-block': () => import('../components/ui/components/inputs/RadioButton/Radio-button'),
+  'color-picker-block': () => import('../components/ui/components/inputs/ColorPicker/colorpicker'),
+  'date-picker-block': () => import('../components/ui/components/inputs/DatePicker/DatePicker'),
+  'dropdown-block': () => import('../components/ui/components/inputs/Dropdown/Dropdown'),
+  'text-input-block': () => import('../components/ui/components/inputs/TextInput/TextInput'),
+  'number-input-block': () => import('../components/ui/components/inputs/NumberInput/NumberInput'),
+  'textarea-block': () => import('../components/ui/components/inputs/Textarea/Textarea'),
+  'slider-block': () => import('../components/ui/components/inputs/Slider/Slider'),
+  'file-upload-block': () => import('../components/ui/components/inputs/FileUpload/FileUpload'),
+  'form-block': () => import('../components/ui/components/inputs/Form/Form'),
+  'icon-button-block': () => import('../components/ui/components/inputs/IconButton/iconbutton'),
+
+  // Display components with @nuralyui dependencies
+  'table-block': () => import('../components/ui/components/display/Table/Table'),
+  'icon-block': () => import('../components/ui/components/display/Icon/Icon'),
+  'image-block': () => import('../components/ui/components/display/Image/Image'),
+  'divider-block': () => import('../components/ui/components/display/Divider/Divider'),
+  'text-label-block': () => import('../components/ui/components/display/TextLabel/TextLabel'),
+  'badge-block': () => import('../components/ui/components/display/Badge/Badge'),
+  'tag-block': () => import('../components/ui/components/display/Tag/Tag'),
+  'video-block': () => import('../components/ui/components/display/Video/Video'),
+  'code-block': () => import('../components/ui/components/display/Code/Code'),
+
+  // Navigation components
+  'menu-block': () => import('../components/ui/components/navigation/Menu/Menu'),
+  'link-block': () => import('../components/ui/components/navigation/Link/Link'),
+  'embed-url-block': () => import('../components/ui/components/navigation/EmbedURL/EmbedURL'),
+
+  // Advanced components
+  'ai-chat-block': () => import('../components/ui/components/advanced/AIChat/AIChat'),
+  'collapse-block': () => import('../components/ui/components/advanced/Collapse/Collapse'),
+  'collection-viewer': () => import('../components/ui/components/advanced/Collections/Collections'),
+  'ref-component-container-block': () => import('../components/ui/components/advanced/RefComponent/RefComponent'),
+  'rich-text-block': () => import('../components/ui/components/advanced/RichText/RichText'),
+  'micro-app-block': () => import('../components/ui/components/advanced/MicroApp/MicroApp'),
+
+  // Utility components
+  'document-block': () => import('../components/ui/components/utility/Document/Document'),
+  'vertical-container-block': () => import('../components/ui/components/layout/Containers/Container'),
+  'toast-container': () => import('../components/ui/components/ToastContainer/ToastContainer'),
+};
+
+/**
+ * Load a component by its tag name
+ */
+export async function loadComponent(tagName: string): Promise<void> {
+  // Already loaded
+  if (loadedComponents.has(tagName)) {
+    return;
+  }
+
+  // Already loading - wait for it
+  if (loadingPromises.has(tagName)) {
+    return loadingPromises.get(tagName);
+  }
+
+  const importFn = componentImports[tagName];
+  if (!importFn) {
+    console.warn(`[LazyLoader] No import found for component: ${tagName}`);
+    return;
+  }
+
+  const loadPromise = importFn()
+    .then(() => {
+      loadedComponents.add(tagName);
+      loadingPromises.delete(tagName);
+    })
+    .catch((error) => {
+      console.warn(`[LazyLoader] Failed to load component ${tagName}:`, error);
+      loadingPromises.delete(tagName);
+    });
+
+  loadingPromises.set(tagName, loadPromise);
+  return loadPromise;
+}
+
+/**
+ * Load multiple components in parallel
+ */
+export async function loadComponents(tagNames: string[]): Promise<void> {
+  await Promise.all(tagNames.map(loadComponent));
+}
+
+/**
+ * Check if a component is loaded
+ */
+export function isComponentLoaded(tagName: string): boolean {
+  return loadedComponents.has(tagName);
+}
+
+/**
+ * Get all available component tag names
+ */
+export function getAvailableComponents(): string[] {
+  return Object.keys(componentImports);
+}

package/utils/register-components.ts

@@ -1,41 +1,15 @@
-// Runtime component registration (side-effects for custom element definition)
-import "../components/ui/components/layout/Tabs/Tabs";
-import "../components/ui/components/layout/Containers/Container";
-import "../components/ui/components/layout/Card/Card";
-import "../components/ui/components/layout/Panel/Panel";
-import "../components/ui/components/layout/Grid/Row";
-import "../components/ui/components/layout/Grid/Col";
-import "../components/ui/components/navigation/Menu/Menu";
-import "../components/ui/components/navigation/EmbedURL/EmbedURL";
-import "../components/ui/components/navigation/Link/Link";
-import "../components/ui/components/inputs/ColorPicker/colorpicker";
-import "../components/ui/components/inputs/NumberInput/NumberInput";
-import "../components/ui/components/inputs/TextInput/TextInput";
-import "../components/ui/components/inputs/IconButton/iconbutton";
-import "../components/ui/components/inputs/Select/Select";
-import "../components/ui/components/inputs/Checkbox/Checkbox";
-import "../components/ui/components/inputs/Dropdown/Dropdown";
-import "../components/ui/components/inputs/DatePicker/DatePicker";
-import "../components/ui/components/inputs/RadioButton/Radio-button";
-import "../components/ui/components/inputs/Button/Button";
-import "../components/ui/components/inputs/FileUpload/FileUpload";
-import "../components/ui/components/inputs/Textarea/Textarea";
-import "../components/ui/components/inputs/Slider/Slider";
-import "../components/ui/components/inputs/Form/Form";
-import "../components/ui/components/display/Table/Table";
-import "../components/ui/components/display/Icon/Icon";
-import "../components/ui/components/display/Image/Image";
-import "../components/ui/components/display/Divider/Divider";
-import "../components/ui/components/display/TextLabel/TextLabel";
-import "../components/ui/components/display/Code/Code";
-import "../components/ui/components/display/Video/Video";
-import "../components/ui/components/display/Badge/Badge";
-import "../components/ui/components/display/Tag/Tag";
-import "../components/ui/components/advanced/AIChat/AIChat";
-import "../components/ui/components/advanced/MicroApp/MicroApp";
-import "../components/ui/components/advanced/Collapse/Collapse";
-import "../components/ui/components/advanced/Collections/Collections";
-import "../components/ui/components/advanced/RefComponent/RefComponent";
-import "../components/ui/components/advanced/RichText/RichText";
-import "../components/ui/components/utility/Document/Document";
+/**
+ * Runtime component registration
+ *
+ * Components are now loaded lazily on-demand via lazy-component-loader.ts
+ * This file is kept for backwards compatibility and to load essential components.
+ *
+ * Components that depend on @nuralyui packages are NOT imported here.
+ * They are loaded dynamically when first used via the lazy loader.
+ */
+
+// Only import components that DON'T have @nuralyui dependencies
+// or are essential for the runtime to work
+
+// Toast is needed globally
 import "../components/ui/components/ToastContainer/ToastContainer";

package/utils/render-util.ts

@@ -1,6 +1,69 @@
 import { type ComponentElement, ComponentType } from '../redux/store/component/component.interface';
 import { html, type TemplateResult } from "lit";
 import { ComponentRegistry, type ComponentRenderProps } from './component-registry';
+import { loadComponent } from './lazy-component-loader';
+
+// Map ComponentType to tag name for lazy loading
+const componentTypeToTagName: Record<string, string> = {
+  [ComponentType.Select]: 'select-block',
+  [ComponentType.IconButton]: 'icon-button-block',
+  [ComponentType.ColorPicker]: 'color-picker-block',
+  [ComponentType.NumberInput]: 'number-input-block',
+  [ComponentType.TextInput]: 'text-input-block',
+  [ComponentType.TextLabel]: 'text-label-block',
+  [ComponentType.Button]: 'button-block',
+  [ComponentType.Tabs]: 'tabs-block',
+  [ComponentType.Menu]: 'menu-block',
+  [ComponentType.Table]: 'table-block',
+  [ComponentType.Container]: 'vertical-container-block',
+  [ComponentType.Collection]: 'collection-viewer',
+  [ComponentType.Checkbox]: 'checkbox-block',
+  [ComponentType.DatePicker]: 'date-picker-block',
+  [ComponentType.Divider]: 'divider-block',
+  [ComponentType.Icon]: 'icon-block',
+  [ComponentType.Image]: 'image-block',
+  [ComponentType.RadioButton]: 'radio-button-block',
+  [ComponentType.AI]: 'ai-chat-block',
+  [ComponentType.MicroApp]: 'micro-app-block',
+  [ComponentType.Collapse]: 'collapse-block',
+  [ComponentType.Dropdown]: 'dropdown-block',
+  [ComponentType.RefComponent]: 'ref-component-container-block',
+  [ComponentType.Code]: 'code-block',
+  [ComponentType.RichText]: 'rich-text-block',
+  [ComponentType.EmbedURL]: 'embed-url-block',
+  [ComponentType.Link]: 'link-block',
+  [ComponentType.FileUpload]: 'file-upload-block',
+  [ComponentType.Video]: 'video-block',
+  [ComponentType.Document]: 'document-block',
+  [ComponentType.Textarea]: 'textarea-block',
+  [ComponentType.Badge]: 'badge-block',
+  [ComponentType.Card]: 'card-block',
+  [ComponentType.Tag]: 'tag-block',
+  [ComponentType.Slider]: 'slider-block',
+  [ComponentType.Panel]: 'panel-block',
+  [ComponentType.GridRow]: 'grid-row-block',
+  [ComponentType.GridCol]: 'grid-col-block',
+  [ComponentType.Form]: 'form-block',
+};
+
+// Preload components used by a component tree
+async function preloadComponents(components: ComponentElement[]): Promise<void> {
+  const tagNames = new Set<string>();
+
+  function collectTagNames(comps: ComponentElement[]) {
+    for (const comp of comps) {
+      const tagName = componentTypeToTagName[comp?.component_type];
+      if (tagName) {
+        tagNames.add(tagName);
+      }
+    }
+  }
+
+  collectTagNames(components);
+
+  // Load all required components in parallel
+  await Promise.all(Array.from(tagNames).map(loadComponent));
+}
 
 const selectTemplate = (props: any, isViewMode: boolean)  => html`<select-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></select-block>`;
 const iconButtonTemplate = (props: any, isViewMode: boolean)  => html`<icon-button-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></icon-button-block>`;
@@ -143,6 +206,27 @@ function getComponentTemplate(component: ComponentElement, commonProps: any, isV
 
 export function renderComponent(components: ComponentElement[], item?: any, isViewMode?: boolean, parent?:ComponentElement ): TemplateResult {
   if (!components || !components.length) return html``;
+
+  // Trigger lazy loading for components (fire and forget - they will be defined before render completes)
+  preloadComponents(components);
+
+  return html`
+    ${components.map((component: ComponentElement) => {
+    const commonProps = { item: { ...item }, component , parent : { ...parent } };
+    return renderComponentElement(component, commonProps, isViewMode );
+  })}
+  `;
+}
+
+/**
+ * Async version of renderComponent that waits for components to load
+ */
+export async function renderComponentAsync(components: ComponentElement[], item?: any, isViewMode?: boolean, parent?:ComponentElement ): Promise<TemplateResult> {
+  if (!components || !components.length) return html``;
+
+  // Wait for all components to load
+  await preloadComponents(components);
+
   return html`
     ${components.map((component: ComponentElement) => {
     const commonProps = { item: { ...item }, component , parent : { ...parent } };