@servlyadmin/runtime-react 0.1.31 → 0.1.34

package/dist/index.cjs

@@ -41,6 +41,11 @@ 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");
+if (typeof document !== "undefined") {
+  (0, import_runtime_core.injectTailwind)({ usePlayCdn: true }).catch((err) => {
+    console.warn("[ServlyComponent React] Failed to inject Tailwind:", err);
+  });
+}
 var LoadingSkeleton = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "div",
   {
@@ -126,7 +131,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 +141,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 +168,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 +201,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 +236,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 +246,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 +268,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.js

@@ -3,9 +3,17 @@ import { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import { createPortal } from "react-dom";
 import {
   render,
-  fetchComponent
+  fetchComponent,
+  waitForTailwind,
+  markElementReady,
+  injectTailwind
 } from "@servlyadmin/runtime-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+if (typeof document !== "undefined") {
+  injectTailwind({ usePlayCdn: true }).catch((err) => {
+    console.warn("[ServlyComponent React] Failed to inject Tailwind:", err);
+  });
+}
 var LoadingSkeleton = ({ className }) => /* @__PURE__ */ jsx(
   "div",
   {
@@ -91,7 +99,8 @@ function ServlyComponent({
   cacheStrategy = "memory",
   retryConfig,
   eventHandlers,
-  children
+  children,
+  waitForStyles = true
 }) {
   const containerRef = useRef(null);
   const renderResultRef = useRef(null);
@@ -100,7 +109,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 +136,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 +169,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 +204,7 @@ function ServlyComponent({
         setIsRendered(false);
       }
     };
-  }, [state.data, eventHandlers]);
+  }, [state.data, eventHandlers, waitForStyles]);
   useEffect(() => {
     if (!renderResultRef.current || !state.data) return;
     const context = {
@@ -191,7 +214,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 +236,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.31",
+  "version": "0.1.34",
   "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.31"
+    "@servlyadmin/runtime-core": "^0.1.44"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",