@servlyadmin/runtime-react 0.1.7 → 0.1.8

package/dist/index.cjs

@@ -38,6 +38,7 @@ module.exports = __toCommonJS(index_exports);
 
 // 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)(
@@ -92,10 +93,30 @@ var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ (0,
     ]
   }
 );
+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,
@@ -104,22 +125,33 @@ function ServlyComponent({
   showSkeleton = true,
   cacheStrategy = "memory",
   retryConfig,
-  eventHandlers
+  eventHandlers,
+  children
 }) {
   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 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,
@@ -170,13 +202,15 @@ function ServlyComponent({
       context,
       eventHandlers
     });
+    setIsRendered(true);
     return () => {
       if (renderResultRef.current) {
         renderResultRef.current.destroy();
         renderResultRef.current = null;
+        setIsRendered(false);
       }
     };
-  }, [state.data, props, eventHandlers]);
+  }, [state.data, eventHandlers]);
   (0, import_react.useEffect)(() => {
     if (!renderResultRef.current || !state.data) return;
     const context = {
@@ -203,16 +237,23 @@ function ServlyComponent({
       }
     );
   }
-  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
-    }
-  );
+  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;
 

package/dist/index.d.cts

@@ -4,9 +4,13 @@ export { BindingContext, CacheStrategy, ComponentData, FetchOptions, LayoutEleme
 
 /**
  * ServlyComponent
- * React wrapper for Servly runtime renderer
+ * React wrapper for Servly runtime renderer with slot support
  */
 
+/**
+ * Slot content type - React nodes keyed by slot name
+ */
+type SlotContent = Record<string, React.ReactNode>;
 /**
  * Props for ServlyComponent
  */
@@ -17,6 +21,8 @@ interface ServlyComponentProps<P = Record<string, any>> {
     version?: string;
     /** Props to pass to the component */
     props?: P;
+    /** Slot content - React nodes to portal into named slots */
+    slots?: SlotContent;
     /** Fallback UI while loading or on error */
     fallback?: React.ReactNode;
     /** Error callback */
@@ -35,10 +41,12 @@ interface ServlyComponentProps<P = Record<string, any>> {
     retryConfig?: Partial<RetryConfig>;
     /** Event handlers keyed by element ID then event name */
     eventHandlers?: Record<string, Record<string, (e: Event) => void>>;
+    /** Children - rendered into default slot if no slots prop */
+    children?: React.ReactNode;
 }
 /**
- * ServlyComponent - React wrapper for Servly runtime
+ * ServlyComponent - React wrapper for Servly runtime with slot support
  */
-declare function ServlyComponent<P = Record<string, any>>({ id, version, props, fallback, onError, onLoad, className, style, showSkeleton, cacheStrategy, retryConfig, eventHandlers, }: ServlyComponentProps<P>): React.ReactElement | null;
+declare function ServlyComponent<P = Record<string, any>>({ id, version, props, slots, fallback, onError, onLoad, className, style, showSkeleton, cacheStrategy, retryConfig, eventHandlers, children, }: ServlyComponentProps<P>): React.ReactElement | null;
 
 export { ServlyComponent, type ServlyComponentProps, ServlyComponent as default };

package/dist/index.d.ts

@@ -4,9 +4,13 @@ export { BindingContext, CacheStrategy, ComponentData, FetchOptions, LayoutEleme
 
 /**
  * ServlyComponent
- * React wrapper for Servly runtime renderer
+ * React wrapper for Servly runtime renderer with slot support
  */
 
+/**
+ * Slot content type - React nodes keyed by slot name
+ */
+type SlotContent = Record<string, React.ReactNode>;
 /**
  * Props for ServlyComponent
  */
@@ -17,6 +21,8 @@ interface ServlyComponentProps<P = Record<string, any>> {
     version?: string;
     /** Props to pass to the component */
     props?: P;
+    /** Slot content - React nodes to portal into named slots */
+    slots?: SlotContent;
     /** Fallback UI while loading or on error */
     fallback?: React.ReactNode;
     /** Error callback */
@@ -35,10 +41,12 @@ interface ServlyComponentProps<P = Record<string, any>> {
     retryConfig?: Partial<RetryConfig>;
     /** Event handlers keyed by element ID then event name */
     eventHandlers?: Record<string, Record<string, (e: Event) => void>>;
+    /** Children - rendered into default slot if no slots prop */
+    children?: React.ReactNode;
 }
 /**
- * ServlyComponent - React wrapper for Servly runtime
+ * ServlyComponent - React wrapper for Servly runtime with slot support
  */
-declare function ServlyComponent<P = Record<string, any>>({ id, version, props, fallback, onError, onLoad, className, style, showSkeleton, cacheStrategy, retryConfig, eventHandlers, }: ServlyComponentProps<P>): React.ReactElement | null;
+declare function ServlyComponent<P = Record<string, any>>({ id, version, props, slots, fallback, onError, onLoad, className, style, showSkeleton, cacheStrategy, retryConfig, eventHandlers, children, }: ServlyComponentProps<P>): React.ReactElement | null;
 
 export { ServlyComponent, type ServlyComponentProps, ServlyComponent as default };

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/ServlyComponent.tsx
-import { useRef, useEffect, useState, useCallback } from "react";
+import { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import { createPortal } from "react-dom";
 import {
   render,
   fetchComponent
@@ -57,10 +58,30 @@ var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ jsx
     ]
   }
 );
+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,
@@ -69,22 +90,33 @@ function ServlyComponent({
   showSkeleton = true,
   cacheStrategy = "memory",
   retryConfig,
-  eventHandlers
+  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,
@@ -135,13 +167,15 @@ function ServlyComponent({
       context,
       eventHandlers
     });
+    setIsRendered(true);
     return () => {
       if (renderResultRef.current) {
         renderResultRef.current.destroy();
         renderResultRef.current = null;
+        setIsRendered(false);
       }
     };
-  }, [state.data, props, eventHandlers]);
+  }, [state.data, eventHandlers]);
   useEffect(() => {
     if (!renderResultRef.current || !state.data) return;
     const context = {
@@ -168,16 +202,23 @@ 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__ */ 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;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servlyadmin/runtime-react",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "React wrapper for Servly runtime renderer",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -34,8 +34,7 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@servlyadmin/runtime-core": "^0.1.7",
-    "@servlyadmin/runtime-react": "^0.1.6"
+    "@servlyadmin/runtime-core": "^0.1.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",