@servlyadmin/runtime-react 0.1.30 → 0.1.33

package/dist/index.cjs

@@ -126,7 +126,8 @@ function ServlyComponent({
   cacheStrategy = "memory",
   retryConfig,
   eventHandlers,
-  children
+  children,
+  waitForStyles = true
 }) {
   const containerRef = (0, import_react.useRef)(null);
   const renderResultRef = (0, import_react.useRef)(null);
@@ -135,7 +136,9 @@ function ServlyComponent({
   const [state, setState] = (0, import_react.useState)({
     loading: true,
     error: null,
-    data: null
+    data: null,
+    stylesReady: !waitForStyles
+    // If not waiting, styles are "ready"
   });
   const slotElements = useSlotElements(containerRef, isRendered);
   const effectiveSlots = (0, import_react.useMemo)(() => {
@@ -160,24 +163,26 @@ function ServlyComponent({
     };
     try {
       const result = await (0, import_runtime_core.fetchComponent)(id, fetchOptions);
-      setState({
+      setState((prev) => ({
+        ...prev,
         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({
+      setState((prev) => ({
+        ...prev,
         loading: false,
         error: err,
         data: null,
         views: void 0,
         registry: void 0
-      });
+      }));
       onError?.(err);
     }
   }, [id, version, cacheStrategy, retryConfig, onLoad, onError]);
@@ -191,24 +196,34 @@ function ServlyComponent({
   }, [loadComponent]);
   (0, import_react.useEffect)(() => {
     if (!state.data || !containerRef.current) return;
-    const context = {
-      props,
-      state: {},
-      context: {}
+    const doRender = async () => {
+      if (waitForStyles) {
+        await (0, import_runtime_core.waitForTailwind)();
+        setState((prev) => ({ ...prev, stylesReady: true }));
+      }
+      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,
+        views: state.views,
+        componentRegistry: state.registry
+      });
+      if (containerRef.current) {
+        (0, import_runtime_core.markElementReady)(containerRef.current);
+      }
+      setIsRendered(true);
     };
-    if (renderResultRef.current) {
-      renderResultRef.current.update(context);
-      return;
-    }
-    renderResultRef.current = (0, import_runtime_core.render)({
-      container: containerRef.current,
-      elements: state.data.layout,
-      context,
-      eventHandlers,
-      views: state.views,
-      componentRegistry: state.registry
-    });
-    setIsRendered(true);
+    doRender();
     return () => {
       if (renderResultRef.current) {
         renderResultRef.current.destroy();
@@ -216,7 +231,7 @@ function ServlyComponent({
         setIsRendered(false);
       }
     };
-  }, [state.data, eventHandlers]);
+  }, [state.data, eventHandlers, waitForStyles]);
   (0, import_react.useEffect)(() => {
     if (!renderResultRef.current || !state.data) return;
     const context = {
@@ -226,7 +241,7 @@ function ServlyComponent({
     };
     renderResultRef.current.update(context);
   }, [props, state.data]);
-  if (state.loading) {
+  if (state.loading || waitForStyles && !state.stylesReady) {
     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;
@@ -248,7 +263,7 @@ function ServlyComponent({
       "div",
       {
         ref: containerRef,
-        className: `servly-component ${className || ""}`,
+        className: `servly-component servly-ready ${className || ""}`,
         style,
         "data-servly-id": id,
         "data-servly-version": state.data?.version

package/dist/index.d.cts

@@ -0,0 +1,54 @@
+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 with slot support
+ */
+
+/**
+ * Slot content type - React nodes keyed by slot name
+ */
+type SlotContent = Record<string, React.ReactNode>;
+/**
+ * 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;
+    /** Slot content - React nodes to portal into named slots */
+    slots?: SlotContent;
+    /** 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>>;
+    /** Children - rendered into default slot if no slots prop */
+    children?: React.ReactNode;
+    /** Wait for Tailwind CSS to load before showing component (prevents FOUC) */
+    waitForStyles?: boolean;
+}
+/**
+ * ServlyComponent - React wrapper for Servly runtime with slot support
+ */
+declare function ServlyComponent<P = Record<string, any>>({ id, version, props, slots, fallback, onError, onLoad, className, style, showSkeleton, cacheStrategy, retryConfig, eventHandlers, children, waitForStyles, }: ServlyComponentProps<P>): React.ReactElement | null;
+
+export { ServlyComponent, type ServlyComponentProps, ServlyComponent as default };

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+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 with slot support
+ */
+
+/**
+ * Slot content type - React nodes keyed by slot name
+ */
+type SlotContent = Record<string, React.ReactNode>;
+/**
+ * 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;
+    /** Slot content - React nodes to portal into named slots */
+    slots?: SlotContent;
+    /** 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>>;
+    /** Children - rendered into default slot if no slots prop */
+    children?: React.ReactNode;
+    /** Wait for Tailwind CSS to load before showing component (prevents FOUC) */
+    waitForStyles?: boolean;
+}
+/**
+ * ServlyComponent - React wrapper for Servly runtime with slot support
+ */
+declare function ServlyComponent<P = Record<string, any>>({ id, version, props, slots, fallback, onError, onLoad, className, style, showSkeleton, cacheStrategy, retryConfig, eventHandlers, children, waitForStyles, }: ServlyComponentProps<P>): React.ReactElement | null;
+
+export { ServlyComponent, type ServlyComponentProps, ServlyComponent as default };

package/dist/index.js

@@ -3,7 +3,9 @@ import { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import { createPortal } from "react-dom";
 import {
   render,
-  fetchComponent
+  fetchComponent,
+  waitForTailwind,
+  markElementReady
 } from "@servlyadmin/runtime-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var LoadingSkeleton = ({ className }) => /* @__PURE__ */ jsx(
@@ -91,7 +93,8 @@ function ServlyComponent({
   cacheStrategy = "memory",
   retryConfig,
   eventHandlers,
-  children
+  children,
+  waitForStyles = true
 }) {
   const containerRef = useRef(null);
   const renderResultRef = useRef(null);
@@ -100,7 +103,9 @@ function ServlyComponent({
   const [state, setState] = useState({
     loading: true,
     error: null,
-    data: null
+    data: null,
+    stylesReady: !waitForStyles
+    // If not waiting, styles are "ready"
   });
   const slotElements = useSlotElements(containerRef, isRendered);
   const effectiveSlots = useMemo(() => {
@@ -125,24 +130,26 @@ function ServlyComponent({
     };
     try {
       const result = await fetchComponent(id, fetchOptions);
-      setState({
+      setState((prev) => ({
+        ...prev,
         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({
+      setState((prev) => ({
+        ...prev,
         loading: false,
         error: err,
         data: null,
         views: void 0,
         registry: void 0
-      });
+      }));
       onError?.(err);
     }
   }, [id, version, cacheStrategy, retryConfig, onLoad, onError]);
@@ -156,24 +163,34 @@ function ServlyComponent({
   }, [loadComponent]);
   useEffect(() => {
     if (!state.data || !containerRef.current) return;
-    const context = {
-      props,
-      state: {},
-      context: {}
+    const doRender = async () => {
+      if (waitForStyles) {
+        await waitForTailwind();
+        setState((prev) => ({ ...prev, stylesReady: true }));
+      }
+      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
+      });
+      if (containerRef.current) {
+        markElementReady(containerRef.current);
+      }
+      setIsRendered(true);
     };
-    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);
+    doRender();
     return () => {
       if (renderResultRef.current) {
         renderResultRef.current.destroy();
@@ -181,7 +198,7 @@ function ServlyComponent({
         setIsRendered(false);
       }
     };
-  }, [state.data, eventHandlers]);
+  }, [state.data, eventHandlers, waitForStyles]);
   useEffect(() => {
     if (!renderResultRef.current || !state.data) return;
     const context = {
@@ -191,7 +208,7 @@ function ServlyComponent({
     };
     renderResultRef.current.update(context);
   }, [props, state.data]);
-  if (state.loading) {
+  if (state.loading || waitForStyles && !state.stylesReady) {
     if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
     if (showSkeleton) return /* @__PURE__ */ jsx(LoadingSkeleton, { className });
     return null;
@@ -213,7 +230,7 @@ function ServlyComponent({
       "div",
       {
         ref: containerRef,
-        className: `servly-component ${className || ""}`,
+        className: `servly-component servly-ready ${className || ""}`,
         style,
         "data-servly-id": id,
         "data-servly-version": state.data?.version

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servlyadmin/runtime-react",
-  "version": "0.1.30",
+  "version": "0.1.33",
   "description": "React wrapper for Servly runtime renderer",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -36,7 +36,7 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@servlyadmin/runtime-core": "^0.1.29"
+    "@servlyadmin/runtime-core": "^0.1.43"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
@@ -46,4 +46,4 @@
     "tsup": "^8.0.0",
     "typescript": "^5.3.0"
   }
-}
+}