@servlyadmin/runtime-react 0.1.36 → 0.1.39

package/dist/index.cjs

@@ -131,8 +131,7 @@ function ServlyComponent({
   cacheStrategy = "localStorage",
   retryConfig,
   eventHandlers,
-  children,
-  waitForStyles = true
+  children
 }) {
   const containerRef = (0, import_react.useRef)(null);
   const renderResultRef = (0, import_react.useRef)(null);
@@ -141,9 +140,7 @@ function ServlyComponent({
   const [state, setState] = (0, import_react.useState)({
     loading: true,
     error: null,
-    data: null,
-    stylesReady: !waitForStyles
-    // If not waiting, styles are "ready"
+    data: null
   });
   const slotElements = useSlotElements(containerRef, isRendered);
   const effectiveSlots = (0, import_react.useMemo)(() => {
@@ -201,34 +198,27 @@ function ServlyComponent({
   }, [loadComponent]);
   (0, import_react.useEffect)(() => {
     if (!state.data || !containerRef.current) return;
-    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);
+    const context = {
+      props,
+      state: {},
+      context: {}
     };
-    doRender();
+    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);
     return () => {
       if (renderResultRef.current) {
         renderResultRef.current.destroy();
@@ -236,7 +226,7 @@ function ServlyComponent({
         setIsRendered(false);
       }
     };
-  }, [state.data, state.views, state.registry, eventHandlers, waitForStyles]);
+  }, [state.data, state.views, state.registry, eventHandlers]);
   (0, import_react.useEffect)(() => {
     if (!renderResultRef.current || !state.data) return;
     const context = {
@@ -246,7 +236,7 @@ function ServlyComponent({
     };
     renderResultRef.current.update(context);
   }, [props, state.data]);
-  if (state.loading || waitForStyles && !state.stylesReady) {
+  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;

package/dist/index.js

@@ -4,7 +4,6 @@ import { createPortal } from "react-dom";
 import {
   render,
   fetchComponent,
-  waitForTailwind,
   markElementReady,
   injectTailwind
 } from "@servlyadmin/runtime-core";
@@ -99,8 +98,7 @@ function ServlyComponent({
   cacheStrategy = "localStorage",
   retryConfig,
   eventHandlers,
-  children,
-  waitForStyles = true
+  children
 }) {
   const containerRef = useRef(null);
   const renderResultRef = useRef(null);
@@ -109,9 +107,7 @@ function ServlyComponent({
   const [state, setState] = useState({
     loading: true,
     error: null,
-    data: null,
-    stylesReady: !waitForStyles
-    // If not waiting, styles are "ready"
+    data: null
   });
   const slotElements = useSlotElements(containerRef, isRendered);
   const effectiveSlots = useMemo(() => {
@@ -169,34 +165,27 @@ function ServlyComponent({
   }, [loadComponent]);
   useEffect(() => {
     if (!state.data || !containerRef.current) return;
-    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);
+    const context = {
+      props,
+      state: {},
+      context: {}
     };
-    doRender();
+    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);
     return () => {
       if (renderResultRef.current) {
         renderResultRef.current.destroy();
@@ -204,7 +193,7 @@ function ServlyComponent({
         setIsRendered(false);
       }
     };
-  }, [state.data, state.views, state.registry, eventHandlers, waitForStyles]);
+  }, [state.data, state.views, state.registry, eventHandlers]);
   useEffect(() => {
     if (!renderResultRef.current || !state.data) return;
     const context = {
@@ -214,7 +203,7 @@ function ServlyComponent({
     };
     renderResultRef.current.update(context);
   }, [props, state.data]);
-  if (state.loading || waitForStyles && !state.stylesReady) {
+  if (state.loading) {
     if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
     if (showSkeleton) return /* @__PURE__ */ jsx(LoadingSkeleton, { className });
     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servlyadmin/runtime-react",
-  "version": "0.1.36",
+  "version": "0.1.39",
   "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.44"
+    "@servlyadmin/runtime-core": "^0.1.46"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
@@ -46,4 +46,4 @@
     "tsup": "^8.0.0",
     "typescript": "^5.3.0"
   }
-}
+}

package/dist/index.d.cts

@@ -1,54 +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 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

@@ -1,54 +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 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 };