@servlyadmin/runtime-react 0.1.7 → 0.1.9

package/README.md

@@ -0,0 +1,292 @@
+# @servlyadmin/runtime-react
+
+React wrapper for Servly runtime renderer. Render Servly components in your React applications with full support for props, slots, and event handling.
+
+## Installation
+
+```bash
+npm install @servlyadmin/runtime-react @servlyadmin/runtime-core
+# or
+yarn add @servlyadmin/runtime-react @servlyadmin/runtime-core
+# or
+pnpm add @servlyadmin/runtime-react @servlyadmin/runtime-core
+```
+
+## Quick Start
+
+```tsx
+import { ServlyComponent } from '@servlyadmin/runtime-react';
+
+function App() {
+  return (
+    <ServlyComponent
+      id="my-component"
+      version="latest"
+      props={{ title: 'Hello World' }}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `string` | required | Component ID from the registry |
+| `version` | `string` | `'latest'` | Version specifier |
+| `props` | `object` | `{}` | Props to pass to the component |
+| `slots` | `Record<string, ReactNode>` | - | Slot content |
+| `fallback` | `ReactNode` | - | Loading/error fallback |
+| `onError` | `(error: Error) => void` | - | Error callback |
+| `onLoad` | `() => void` | - | Load complete callback |
+| `className` | `string` | - | Wrapper class name |
+| `style` | `CSSProperties` | - | Wrapper styles |
+| `showSkeleton` | `boolean` | `true` | Show loading skeleton |
+| `cacheStrategy` | `CacheStrategy` | `'memory'` | Cache strategy |
+| `eventHandlers` | `object` | - | Event handlers by element ID |
+| `children` | `ReactNode` | - | Default slot content |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { ServlyComponent } from '@servlyadmin/runtime-react';
+
+function MyPage() {
+  return (
+    <ServlyComponent
+      id="hero-section"
+      props={{
+        title: 'Welcome',
+        subtitle: 'Get started today',
+      }}
+    />
+  );
+}
+```
+
+### With Slots
+
+```tsx
+function CardExample() {
+  return (
+    <ServlyComponent
+      id="card-component"
+      slots={{
+        header: <h2>Card Title</h2>,
+        footer: <button>Learn More</button>,
+      }}
+    >
+      {/* Children go to default slot */}
+      <p>This is the card content.</p>
+    </ServlyComponent>
+  );
+}
+```
+
+### With Event Handlers
+
+```tsx
+function InteractiveExample() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <ServlyComponent
+      id="counter-component"
+      props={{ count }}
+      eventHandlers={{
+        'increment-btn': {
+          click: () => setCount(c => c + 1),
+        },
+        'decrement-btn': {
+          click: () => setCount(c => c - 1),
+        },
+      }}
+    />
+  );
+}
+```
+
+### Loading States
+
+```tsx
+function WithLoadingState() {
+  return (
+    <ServlyComponent
+      id="data-component"
+      fallback={<div>Loading...</div>}
+      onLoad={() => console.log('Component loaded!')}
+      onError={(error) => console.error('Failed to load:', error)}
+    />
+  );
+}
+```
+
+### Custom Loading Skeleton
+
+```tsx
+function WithCustomSkeleton() {
+  return (
+    <ServlyComponent
+      id="profile-card"
+      showSkeleton={false}
+      fallback={
+        <div className="animate-pulse">
+          <div className="h-32 bg-gray-200 rounded" />
+          <div className="h-4 bg-gray-200 rounded mt-4 w-3/4" />
+        </div>
+      }
+    />
+  );
+}
+```
+
+### Version Pinning
+
+```tsx
+function VersionedComponent() {
+  return (
+    <>
+      {/* Exact version */}
+      <ServlyComponent id="my-component" version="1.2.3" />
+      
+      {/* Version range */}
+      <ServlyComponent id="my-component" version="^1.0.0" />
+      
+      {/* Latest */}
+      <ServlyComponent id="my-component" version="latest" />
+    </>
+  );
+}
+```
+
+### Cache Control
+
+```tsx
+function CacheExample() {
+  return (
+    <>
+      {/* Memory cache (default) */}
+      <ServlyComponent id="comp1" cacheStrategy="memory" />
+      
+      {/* Persist to localStorage */}
+      <ServlyComponent id="comp2" cacheStrategy="localStorage" />
+      
+      {/* No caching */}
+      <ServlyComponent id="comp3" cacheStrategy="none" />
+    </>
+  );
+}
+```
+
+### Dynamic Props
+
+```tsx
+function DynamicPropsExample() {
+  const [theme, setTheme] = useState('light');
+  const [user, setUser] = useState({ name: 'Guest' });
+
+  return (
+    <ServlyComponent
+      id="themed-component"
+      props={{
+        theme,
+        userName: user.name,
+        timestamp: Date.now(),
+      }}
+    />
+  );
+}
+```
+
+### Error Boundary Integration
+
+```tsx
+import { ErrorBoundary } from 'react-error-boundary';
+
+function SafeComponent() {
+  return (
+    <ErrorBoundary fallback={<div>Something went wrong</div>}>
+      <ServlyComponent
+        id="risky-component"
+        onError={(error) => {
+          // Log to error tracking service
+          logError(error);
+        }}
+      />
+    </ErrorBoundary>
+  );
+}
+```
+
+## TypeScript
+
+Full TypeScript support:
+
+```tsx
+import { ServlyComponent, type ServlyComponentProps } from '@servlyadmin/runtime-react';
+
+interface MyComponentProps {
+  title: string;
+  count: number;
+}
+
+function TypedExample() {
+  return (
+    <ServlyComponent<MyComponentProps>
+      id="typed-component"
+      props={{
+        title: 'Hello',
+        count: 42,
+      }}
+    />
+  );
+}
+```
+
+## Server-Side Rendering
+
+The component handles SSR gracefully by rendering the fallback on the server and hydrating on the client.
+
+```tsx
+// Works with Next.js, Remix, etc.
+function SSRPage() {
+  return (
+    <ServlyComponent
+      id="ssr-component"
+      fallback={<div>Loading component...</div>}
+    />
+  );
+}
+```
+
+## Performance Tips
+
+1. **Use version pinning** in production to leverage caching
+2. **Prefetch components** that will be needed soon
+3. **Use `cacheStrategy="localStorage"`** for components that rarely change
+4. **Memoize event handlers** to prevent unnecessary re-renders
+
+```tsx
+import { useMemo, useCallback } from 'react';
+
+function OptimizedExample() {
+  const eventHandlers = useMemo(() => ({
+    'btn': {
+      click: () => console.log('clicked'),
+    },
+  }), []);
+
+  return (
+    <ServlyComponent
+      id="optimized"
+      eventHandlers={eventHandlers}
+    />
+  );
+}
+```
+
+## License
+
+MIT

package/dist/index.js

@@ -1,11 +1,46 @@
-// src/ServlyComponent.tsx
-import { useRef, useEffect, useState, useCallback } from "react";
-import {
-  render,
-  fetchComponent
-} from "@servlyadmin/runtime-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var LoadingSkeleton = ({ className }) => /* @__PURE__ */ jsx(
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/runtime-react/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ServlyComponent: () => ServlyComponent,
+  clearAllCaches: () => import_runtime_core2.clearAllCaches,
+  compareVersions: () => import_runtime_core2.compareVersions,
+  default: () => ServlyComponent_default,
+  fetchComponent: () => import_runtime_core2.fetchComponent,
+  getRegistryUrl: () => import_runtime_core2.getRegistryUrl,
+  invalidateCache: () => import_runtime_core2.invalidateCache,
+  isComponentAvailable: () => import_runtime_core2.isComponentAvailable,
+  parseVersion: () => import_runtime_core2.parseVersion,
+  prefetchComponents: () => import_runtime_core2.prefetchComponents,
+  resolveVersion: () => import_runtime_core2.resolveVersion,
+  satisfiesVersion: () => import_runtime_core2.satisfiesVersion,
+  setRegistryUrl: () => import_runtime_core2.setRegistryUrl
+});
+module.exports = __toCommonJS(index_exports);
+
+// packages/runtime-react/src/ServlyComponent.tsx
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_runtime_core = require("@servlyadmin/runtime-core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var LoadingSkeleton = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "div",
   {
     className: `servly-skeleton ${className || ""}`,
@@ -15,7 +50,7 @@ var LoadingSkeleton = ({ className }) => /* @__PURE__ */ jsx(
       minHeight: "100px",
       animation: "servly-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
     },
-    children: /* @__PURE__ */ jsx("style", { children: `
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
       @keyframes servly-pulse {
         0%, 100% { opacity: 1; }
         50% { opacity: 0.5; }
@@ -23,7 +58,7 @@ var LoadingSkeleton = ({ className }) => /* @__PURE__ */ jsx(
     ` })
   }
 );
-var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ jsxs(
+var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   "div",
   {
     className: `servly-error ${className || ""}`,
@@ -35,9 +70,9 @@ var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ jsx
       ...style
     },
     children: [
-      /* @__PURE__ */ jsx("p", { style: { margin: 0, fontWeight: 500 }, children: "Failed to load component" }),
-      /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0", fontSize: "14px", color: "#991b1b" }, children: error.message }),
-      onRetry && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontWeight: 500 }, children: "Failed to load component" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "8px 0 0", fontSize: "14px", color: "#991b1b" }, children: error.message }),
+      onRetry && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
         {
           onClick: onRetry,
@@ -57,10 +92,30 @@ var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ jsx
     ]
   }
 );
+function useSlotElements(containerRef, isRendered) {
+  const [slotElements, setSlotElements] = (0, import_react.useState)({});
+  (0, import_react.useEffect)(() => {
+    if (!isRendered || !containerRef.current) {
+      setSlotElements({});
+      return;
+    }
+    const found = {};
+    const slots = containerRef.current.querySelectorAll("[data-slot]");
+    slots.forEach((el) => {
+      const slotName = el.getAttribute("data-slot");
+      if (slotName) {
+        found[slotName] = el;
+      }
+    });
+    setSlotElements(found);
+  }, [isRendered, containerRef]);
+  return slotElements;
+}
 function ServlyComponent({
   id,
   version = "latest",
   props = {},
+  slots,
   fallback,
   onError,
   onLoad,
@@ -69,22 +124,33 @@ function ServlyComponent({
   showSkeleton = true,
   cacheStrategy = "memory",
   retryConfig,
-  eventHandlers
+  eventHandlers,
+  children
 }) {
-  const containerRef = useRef(null);
-  const renderResultRef = useRef(null);
-  const abortControllerRef = useRef(null);
-  const [state, setState] = useState({
+  const containerRef = (0, import_react.useRef)(null);
+  const renderResultRef = (0, import_react.useRef)(null);
+  const abortControllerRef = (0, import_react.useRef)(null);
+  const [isRendered, setIsRendered] = (0, import_react.useState)(false);
+  const [state, setState] = (0, import_react.useState)({
     loading: true,
     error: null,
     data: null
   });
-  const loadComponent = useCallback(async () => {
+  const slotElements = useSlotElements(containerRef, isRendered);
+  const effectiveSlots = (0, import_react.useMemo)(() => {
+    const result = { ...slots };
+    if (children && !result.default) {
+      result.default = children;
+    }
+    return result;
+  }, [slots, children]);
+  const loadComponent = (0, import_react.useCallback)(async () => {
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
     abortControllerRef.current = new AbortController();
     setState((prev) => ({ ...prev, loading: true, error: null }));
+    setIsRendered(false);
     const fetchOptions = {
       version,
       cacheStrategy,
@@ -92,11 +158,13 @@ function ServlyComponent({
       signal: abortControllerRef.current.signal
     };
     try {
-      const result = await fetchComponent(id, fetchOptions);
+      const result = await (0, import_runtime_core.fetchComponent)(id, fetchOptions);
       setState({
         loading: false,
         error: null,
-        data: result.data
+        data: result.data,
+        views: result.views,
+        registry: result.registry
       });
       onLoad?.();
     } catch (error) {
@@ -105,12 +173,14 @@ function ServlyComponent({
       setState({
         loading: false,
         error: err,
-        data: null
+        data: null,
+        views: void 0,
+        registry: void 0
       });
       onError?.(err);
     }
   }, [id, version, cacheStrategy, retryConfig, onLoad, onError]);
-  useEffect(() => {
+  (0, import_react.useEffect)(() => {
     loadComponent();
     return () => {
       if (abortControllerRef.current) {
@@ -118,7 +188,7 @@ function ServlyComponent({
       }
     };
   }, [loadComponent]);
-  useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (!state.data || !containerRef.current) return;
     const context = {
       props,
@@ -129,20 +199,24 @@ function ServlyComponent({
       renderResultRef.current.update(context);
       return;
     }
-    renderResultRef.current = render({
+    renderResultRef.current = (0, import_runtime_core.render)({
       container: containerRef.current,
       elements: state.data.layout,
       context,
-      eventHandlers
+      eventHandlers,
+      views: state.views,
+      componentRegistry: state.registry
     });
+    setIsRendered(true);
     return () => {
       if (renderResultRef.current) {
         renderResultRef.current.destroy();
         renderResultRef.current = null;
+        setIsRendered(false);
       }
     };
-  }, [state.data, props, eventHandlers]);
-  useEffect(() => {
+  }, [state.data, eventHandlers]);
+  (0, import_react.useEffect)(() => {
     if (!renderResultRef.current || !state.data) return;
     const context = {
       props,
@@ -152,13 +226,13 @@ function ServlyComponent({
     renderResultRef.current.update(context);
   }, [props, state.data]);
   if (state.loading) {
-    if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
-    if (showSkeleton) return /* @__PURE__ */ jsx(LoadingSkeleton, { className });
+    if (fallback) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
+    if (showSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingSkeleton, { className });
     return null;
   }
   if (state.error) {
-    if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
-    return /* @__PURE__ */ jsx(
+    if (fallback) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ErrorDisplay,
       {
         error: state.error,
@@ -168,39 +242,34 @@ function ServlyComponent({
       }
     );
   }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: `servly-component ${className || ""}`,
-      style,
-      "data-servly-id": id,
-      "data-servly-version": state.data?.version
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className: `servly-component ${className || ""}`,
+        style,
+        "data-servly-id": id,
+        "data-servly-version": state.data?.version
+      }
+    ),
+    Object.entries(effectiveSlots).map(([slotName, content]) => {
+      const slotEl = slotElements[slotName];
+      if (!slotEl || !content) return null;
+      return (0, import_react_dom.createPortal)(content, slotEl, `slot-${slotName}`);
+    })
+  ] });
 }
 var ServlyComponent_default = ServlyComponent;
 
-// src/index.ts
-import {
-  fetchComponent as fetchComponent2,
-  prefetchComponents,
-  isComponentAvailable,
-  setRegistryUrl,
-  getRegistryUrl,
-  invalidateCache,
-  clearAllCaches,
-  parseVersion,
-  compareVersions,
-  satisfiesVersion,
-  resolveVersion
-} from "@servlyadmin/runtime-core";
-export {
+// packages/runtime-react/src/index.ts
+var import_runtime_core2 = require("@servlyadmin/runtime-core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   ServlyComponent,
   clearAllCaches,
   compareVersions,
-  ServlyComponent_default as default,
-  fetchComponent2 as fetchComponent,
+  fetchComponent,
   getRegistryUrl,
   invalidateCache,
   isComponentAvailable,
@@ -209,4 +278,4 @@ export {
   resolveVersion,
   satisfiesVersion,
   setRegistryUrl
-};
+});

package/dist/index.mjs

@@ -0,0 +1,259 @@
+// packages/runtime-react/src/ServlyComponent.tsx
+import { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import { createPortal } from "react-dom";
+import {
+  render,
+  fetchComponent
+} from "@servlyadmin/runtime-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LoadingSkeleton = ({ className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: `servly-skeleton ${className || ""}`,
+    style: {
+      backgroundColor: "#f3f4f6",
+      borderRadius: "8px",
+      minHeight: "100px",
+      animation: "servly-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+    },
+    children: /* @__PURE__ */ jsx("style", { children: `
+      @keyframes servly-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+    ` })
+  }
+);
+var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `servly-error ${className || ""}`,
+    style: {
+      padding: "16px",
+      color: "#ef4444",
+      backgroundColor: "#fef2f2",
+      borderRadius: "8px",
+      ...style
+    },
+    children: [
+      /* @__PURE__ */ jsx("p", { style: { margin: 0, fontWeight: 500 }, children: "Failed to load component" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0", fontSize: "14px", color: "#991b1b" }, children: error.message }),
+      onRetry && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onRetry,
+          style: {
+            marginTop: "12px",
+            padding: "8px 16px",
+            backgroundColor: "#ef4444",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+            fontSize: "14px"
+          },
+          children: "Retry"
+        }
+      )
+    ]
+  }
+);
+function useSlotElements(containerRef, isRendered) {
+  const [slotElements, setSlotElements] = useState({});
+  useEffect(() => {
+    if (!isRendered || !containerRef.current) {
+      setSlotElements({});
+      return;
+    }
+    const found = {};
+    const slots = containerRef.current.querySelectorAll("[data-slot]");
+    slots.forEach((el) => {
+      const slotName = el.getAttribute("data-slot");
+      if (slotName) {
+        found[slotName] = el;
+      }
+    });
+    setSlotElements(found);
+  }, [isRendered, containerRef]);
+  return slotElements;
+}
+function ServlyComponent({
+  id,
+  version = "latest",
+  props = {},
+  slots,
+  fallback,
+  onError,
+  onLoad,
+  className,
+  style,
+  showSkeleton = true,
+  cacheStrategy = "memory",
+  retryConfig,
+  eventHandlers,
+  children
+}) {
+  const containerRef = useRef(null);
+  const renderResultRef = useRef(null);
+  const abortControllerRef = useRef(null);
+  const [isRendered, setIsRendered] = useState(false);
+  const [state, setState] = useState({
+    loading: true,
+    error: null,
+    data: null
+  });
+  const slotElements = useSlotElements(containerRef, isRendered);
+  const effectiveSlots = useMemo(() => {
+    const result = { ...slots };
+    if (children && !result.default) {
+      result.default = children;
+    }
+    return result;
+  }, [slots, children]);
+  const loadComponent = useCallback(async () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    setState((prev) => ({ ...prev, loading: true, error: null }));
+    setIsRendered(false);
+    const fetchOptions = {
+      version,
+      cacheStrategy,
+      retryConfig,
+      signal: abortControllerRef.current.signal
+    };
+    try {
+      const result = await fetchComponent(id, fetchOptions);
+      setState({
+        loading: false,
+        error: null,
+        data: result.data,
+        views: result.views,
+        registry: result.registry
+      });
+      onLoad?.();
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      if (err.message === "Fetch aborted") return;
+      setState({
+        loading: false,
+        error: err,
+        data: null,
+        views: void 0,
+        registry: void 0
+      });
+      onError?.(err);
+    }
+  }, [id, version, cacheStrategy, retryConfig, onLoad, onError]);
+  useEffect(() => {
+    loadComponent();
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, [loadComponent]);
+  useEffect(() => {
+    if (!state.data || !containerRef.current) return;
+    const context = {
+      props,
+      state: {},
+      context: {}
+    };
+    if (renderResultRef.current) {
+      renderResultRef.current.update(context);
+      return;
+    }
+    renderResultRef.current = render({
+      container: containerRef.current,
+      elements: state.data.layout,
+      context,
+      eventHandlers,
+      views: state.views,
+      componentRegistry: state.registry
+    });
+    setIsRendered(true);
+    return () => {
+      if (renderResultRef.current) {
+        renderResultRef.current.destroy();
+        renderResultRef.current = null;
+        setIsRendered(false);
+      }
+    };
+  }, [state.data, eventHandlers]);
+  useEffect(() => {
+    if (!renderResultRef.current || !state.data) return;
+    const context = {
+      props,
+      state: {},
+      context: {}
+    };
+    renderResultRef.current.update(context);
+  }, [props, state.data]);
+  if (state.loading) {
+    if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    if (showSkeleton) return /* @__PURE__ */ jsx(LoadingSkeleton, { className });
+    return null;
+  }
+  if (state.error) {
+    if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    return /* @__PURE__ */ jsx(
+      ErrorDisplay,
+      {
+        error: state.error,
+        onRetry: loadComponent,
+        className,
+        style
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: `servly-component ${className || ""}`,
+        style,
+        "data-servly-id": id,
+        "data-servly-version": state.data?.version
+      }
+    ),
+    Object.entries(effectiveSlots).map(([slotName, content]) => {
+      const slotEl = slotElements[slotName];
+      if (!slotEl || !content) return null;
+      return createPortal(content, slotEl, `slot-${slotName}`);
+    })
+  ] });
+}
+var ServlyComponent_default = ServlyComponent;
+
+// packages/runtime-react/src/index.ts
+import {
+  fetchComponent as fetchComponent2,
+  prefetchComponents,
+  isComponentAvailable,
+  setRegistryUrl,
+  getRegistryUrl,
+  invalidateCache,
+  clearAllCaches,
+  parseVersion,
+  compareVersions,
+  satisfiesVersion,
+  resolveVersion
+} from "@servlyadmin/runtime-core";
+export {
+  ServlyComponent,
+  clearAllCaches,
+  compareVersions,
+  ServlyComponent_default as default,
+  fetchComponent2 as fetchComponent,
+  getRegistryUrl,
+  invalidateCache,
+  isComponentAvailable,
+  parseVersion,
+  prefetchComponents,
+  resolveVersion,
+  satisfiesVersion,
+  setRegistryUrl
+};

package/package.json

@@ -1,16 +1,14 @@
 {
   "name": "@servlyadmin/runtime-react",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "React wrapper for Servly runtime renderer",
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     }
   },
   "files": [
@@ -34,8 +32,7 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@servlyadmin/runtime-core": "^0.1.7",
-    "@servlyadmin/runtime-react": "^0.1.6"
+    "@servlyadmin/runtime-core": "^0.1.9"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",

package/dist/index.cjs

@@ -1,235 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  ServlyComponent: () => ServlyComponent,
-  clearAllCaches: () => import_runtime_core2.clearAllCaches,
-  compareVersions: () => import_runtime_core2.compareVersions,
-  default: () => ServlyComponent_default,
-  fetchComponent: () => import_runtime_core2.fetchComponent,
-  getRegistryUrl: () => import_runtime_core2.getRegistryUrl,
-  invalidateCache: () => import_runtime_core2.invalidateCache,
-  isComponentAvailable: () => import_runtime_core2.isComponentAvailable,
-  parseVersion: () => import_runtime_core2.parseVersion,
-  prefetchComponents: () => import_runtime_core2.prefetchComponents,
-  resolveVersion: () => import_runtime_core2.resolveVersion,
-  satisfiesVersion: () => import_runtime_core2.satisfiesVersion,
-  setRegistryUrl: () => import_runtime_core2.setRegistryUrl
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/ServlyComponent.tsx
-var import_react = require("react");
-var import_runtime_core = require("@servlyadmin/runtime-core");
-var import_jsx_runtime = require("react/jsx-runtime");
-var LoadingSkeleton = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "div",
-  {
-    className: `servly-skeleton ${className || ""}`,
-    style: {
-      backgroundColor: "#f3f4f6",
-      borderRadius: "8px",
-      minHeight: "100px",
-      animation: "servly-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-    },
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
-      @keyframes servly-pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.5; }
-      }
-    ` })
-  }
-);
-var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-  "div",
-  {
-    className: `servly-error ${className || ""}`,
-    style: {
-      padding: "16px",
-      color: "#ef4444",
-      backgroundColor: "#fef2f2",
-      borderRadius: "8px",
-      ...style
-    },
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontWeight: 500 }, children: "Failed to load component" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "8px 0 0", fontSize: "14px", color: "#991b1b" }, children: error.message }),
-      onRetry && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          onClick: onRetry,
-          style: {
-            marginTop: "12px",
-            padding: "8px 16px",
-            backgroundColor: "#ef4444",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
-            fontSize: "14px"
-          },
-          children: "Retry"
-        }
-      )
-    ]
-  }
-);
-function ServlyComponent({
-  id,
-  version = "latest",
-  props = {},
-  fallback,
-  onError,
-  onLoad,
-  className,
-  style,
-  showSkeleton = true,
-  cacheStrategy = "memory",
-  retryConfig,
-  eventHandlers
-}) {
-  const containerRef = (0, import_react.useRef)(null);
-  const renderResultRef = (0, import_react.useRef)(null);
-  const abortControllerRef = (0, import_react.useRef)(null);
-  const [state, setState] = (0, import_react.useState)({
-    loading: true,
-    error: null,
-    data: null
-  });
-  const loadComponent = (0, import_react.useCallback)(async () => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-    abortControllerRef.current = new AbortController();
-    setState((prev) => ({ ...prev, loading: true, error: null }));
-    const fetchOptions = {
-      version,
-      cacheStrategy,
-      retryConfig,
-      signal: abortControllerRef.current.signal
-    };
-    try {
-      const result = await (0, import_runtime_core.fetchComponent)(id, fetchOptions);
-      setState({
-        loading: false,
-        error: null,
-        data: result.data
-      });
-      onLoad?.();
-    } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      if (err.message === "Fetch aborted") return;
-      setState({
-        loading: false,
-        error: err,
-        data: null
-      });
-      onError?.(err);
-    }
-  }, [id, version, cacheStrategy, retryConfig, onLoad, onError]);
-  (0, import_react.useEffect)(() => {
-    loadComponent();
-    return () => {
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
-    };
-  }, [loadComponent]);
-  (0, import_react.useEffect)(() => {
-    if (!state.data || !containerRef.current) return;
-    const context = {
-      props,
-      state: {},
-      context: {}
-    };
-    if (renderResultRef.current) {
-      renderResultRef.current.update(context);
-      return;
-    }
-    renderResultRef.current = (0, import_runtime_core.render)({
-      container: containerRef.current,
-      elements: state.data.layout,
-      context,
-      eventHandlers
-    });
-    return () => {
-      if (renderResultRef.current) {
-        renderResultRef.current.destroy();
-        renderResultRef.current = null;
-      }
-    };
-  }, [state.data, props, eventHandlers]);
-  (0, import_react.useEffect)(() => {
-    if (!renderResultRef.current || !state.data) return;
-    const context = {
-      props,
-      state: {},
-      context: {}
-    };
-    renderResultRef.current.update(context);
-  }, [props, state.data]);
-  if (state.loading) {
-    if (fallback) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
-    if (showSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingSkeleton, { className });
-    return null;
-  }
-  if (state.error) {
-    if (fallback) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      ErrorDisplay,
-      {
-        error: state.error,
-        onRetry: loadComponent,
-        className,
-        style
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ref: containerRef,
-      className: `servly-component ${className || ""}`,
-      style,
-      "data-servly-id": id,
-      "data-servly-version": state.data?.version
-    }
-  );
-}
-var ServlyComponent_default = ServlyComponent;
-
-// src/index.ts
-var import_runtime_core2 = require("@servlyadmin/runtime-core");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ServlyComponent,
-  clearAllCaches,
-  compareVersions,
-  fetchComponent,
-  getRegistryUrl,
-  invalidateCache,
-  isComponentAvailable,
-  parseVersion,
-  prefetchComponents,
-  resolveVersion,
-  satisfiesVersion,
-  setRegistryUrl
-});

package/dist/index.d.cts

@@ -1,44 +0,0 @@
-import React from 'react';
-import { CacheStrategy, RetryConfig } from '@servlyadmin/runtime-core';
-export { BindingContext, CacheStrategy, ComponentData, FetchOptions, LayoutElement, PropDefinition, RetryConfig, clearAllCaches, compareVersions, fetchComponent, getRegistryUrl, invalidateCache, isComponentAvailable, parseVersion, prefetchComponents, resolveVersion, satisfiesVersion, setRegistryUrl } from '@servlyadmin/runtime-core';
-
-/**
- * ServlyComponent
- * React wrapper for Servly runtime renderer
- */
-
-/**
- * Props for ServlyComponent
- */
-interface ServlyComponentProps<P = Record<string, any>> {
-    /** Component ID from the registry */
-    id: string;
-    /** Version specifier (exact, range, or "latest") */
-    version?: string;
-    /** Props to pass to the component */
-    props?: P;
-    /** Fallback UI while loading or on error */
-    fallback?: React.ReactNode;
-    /** Error callback */
-    onError?: (error: Error) => void;
-    /** Load complete callback */
-    onLoad?: () => void;
-    /** Custom className for wrapper */
-    className?: string;
-    /** Custom styles for wrapper */
-    style?: React.CSSProperties;
-    /** Show loading skeleton */
-    showSkeleton?: boolean;
-    /** Cache strategy */
-    cacheStrategy?: CacheStrategy;
-    /** Retry configuration */
-    retryConfig?: Partial<RetryConfig>;
-    /** Event handlers keyed by element ID then event name */
-    eventHandlers?: Record<string, Record<string, (e: Event) => void>>;
-}
-/**
- * ServlyComponent - React wrapper for Servly runtime
- */
-declare function ServlyComponent<P = Record<string, any>>({ id, version, props, fallback, onError, onLoad, className, style, showSkeleton, cacheStrategy, retryConfig, eventHandlers, }: ServlyComponentProps<P>): React.ReactElement | null;
-
-export { ServlyComponent, type ServlyComponentProps, ServlyComponent as default };

package/dist/index.d.ts

@@ -1,44 +0,0 @@
-import React from 'react';
-import { CacheStrategy, RetryConfig } from '@servlyadmin/runtime-core';
-export { BindingContext, CacheStrategy, ComponentData, FetchOptions, LayoutElement, PropDefinition, RetryConfig, clearAllCaches, compareVersions, fetchComponent, getRegistryUrl, invalidateCache, isComponentAvailable, parseVersion, prefetchComponents, resolveVersion, satisfiesVersion, setRegistryUrl } from '@servlyadmin/runtime-core';
-
-/**
- * ServlyComponent
- * React wrapper for Servly runtime renderer
- */
-
-/**
- * Props for ServlyComponent
- */
-interface ServlyComponentProps<P = Record<string, any>> {
-    /** Component ID from the registry */
-    id: string;
-    /** Version specifier (exact, range, or "latest") */
-    version?: string;
-    /** Props to pass to the component */
-    props?: P;
-    /** Fallback UI while loading or on error */
-    fallback?: React.ReactNode;
-    /** Error callback */
-    onError?: (error: Error) => void;
-    /** Load complete callback */
-    onLoad?: () => void;
-    /** Custom className for wrapper */
-    className?: string;
-    /** Custom styles for wrapper */
-    style?: React.CSSProperties;
-    /** Show loading skeleton */
-    showSkeleton?: boolean;
-    /** Cache strategy */
-    cacheStrategy?: CacheStrategy;
-    /** Retry configuration */
-    retryConfig?: Partial<RetryConfig>;
-    /** Event handlers keyed by element ID then event name */
-    eventHandlers?: Record<string, Record<string, (e: Event) => void>>;
-}
-/**
- * ServlyComponent - React wrapper for Servly runtime
- */
-declare function ServlyComponent<P = Record<string, any>>({ id, version, props, fallback, onError, onLoad, className, style, showSkeleton, cacheStrategy, retryConfig, eventHandlers, }: ServlyComponentProps<P>): React.ReactElement | null;
-
-export { ServlyComponent, type ServlyComponentProps, ServlyComponent as default };