@servlyadmin/runtime-react 0.1.35 → 0.1.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +25 -35
  2. package/dist/index.d.cts +1 -3
  3. package/dist/index.d.ts +1 -3
  4. package/dist/index.js +25 -36
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -128,11 +128,10 @@ function ServlyComponent({
128
128
  className,
129
129
  style,
130
130
  showSkeleton = true,
131
- cacheStrategy = "memory",
131
+ cacheStrategy = "localStorage",
132
132
  retryConfig,
133
133
  eventHandlers,
134
- children,
135
- waitForStyles = true
134
+ children
136
135
  }) {
137
136
  const containerRef = (0, import_react.useRef)(null);
138
137
  const renderResultRef = (0, import_react.useRef)(null);
@@ -141,9 +140,7 @@ function ServlyComponent({
141
140
  const [state, setState] = (0, import_react.useState)({
142
141
  loading: true,
143
142
  error: null,
144
- data: null,
145
- stylesReady: !waitForStyles
146
- // If not waiting, styles are "ready"
143
+ data: null
147
144
  });
148
145
  const slotElements = useSlotElements(containerRef, isRendered);
149
146
  const effectiveSlots = (0, import_react.useMemo)(() => {
@@ -201,34 +198,27 @@ function ServlyComponent({
201
198
  }, [loadComponent]);
202
199
  (0, import_react.useEffect)(() => {
203
200
  if (!state.data || !containerRef.current) return;
204
- const doRender = async () => {
205
- if (waitForStyles) {
206
- await (0, import_runtime_core.waitForTailwind)();
207
- setState((prev) => ({ ...prev, stylesReady: true }));
208
- }
209
- const context = {
210
- props,
211
- state: {},
212
- context: {}
213
- };
214
- if (renderResultRef.current) {
215
- renderResultRef.current.update(context);
216
- return;
217
- }
218
- renderResultRef.current = (0, import_runtime_core.render)({
219
- container: containerRef.current,
220
- elements: state.data.layout,
221
- context,
222
- eventHandlers,
223
- views: state.views,
224
- componentRegistry: state.registry
225
- });
226
- if (containerRef.current) {
227
- (0, import_runtime_core.markElementReady)(containerRef.current);
228
- }
229
- setIsRendered(true);
201
+ const context = {
202
+ props,
203
+ state: {},
204
+ context: {}
230
205
  };
231
- doRender();
206
+ if (renderResultRef.current) {
207
+ renderResultRef.current.update(context);
208
+ return;
209
+ }
210
+ renderResultRef.current = (0, import_runtime_core.render)({
211
+ container: containerRef.current,
212
+ elements: state.data.layout,
213
+ context,
214
+ eventHandlers,
215
+ views: state.views,
216
+ componentRegistry: state.registry
217
+ });
218
+ if (containerRef.current) {
219
+ (0, import_runtime_core.markElementReady)(containerRef.current);
220
+ }
221
+ setIsRendered(true);
232
222
  return () => {
233
223
  if (renderResultRef.current) {
234
224
  renderResultRef.current.destroy();
@@ -236,7 +226,7 @@ function ServlyComponent({
236
226
  setIsRendered(false);
237
227
  }
238
228
  };
239
- }, [state.data, eventHandlers, waitForStyles]);
229
+ }, [state.data, state.views, state.registry, eventHandlers]);
240
230
  (0, import_react.useEffect)(() => {
241
231
  if (!renderResultRef.current || !state.data) return;
242
232
  const context = {
@@ -246,7 +236,7 @@ function ServlyComponent({
246
236
  };
247
237
  renderResultRef.current.update(context);
248
238
  }, [props, state.data]);
249
- if (state.loading || waitForStyles && !state.stylesReady) {
239
+ if (state.loading) {
250
240
  if (fallback) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
251
241
  if (showSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingSkeleton, { className });
252
242
  return null;
package/dist/index.d.cts CHANGED
@@ -43,12 +43,10 @@ interface ServlyComponentProps<P = Record<string, any>> {
43
43
  eventHandlers?: Record<string, Record<string, (e: Event) => void>>;
44
44
  /** Children - rendered into default slot if no slots prop */
45
45
  children?: React.ReactNode;
46
- /** Wait for Tailwind CSS to load before showing component (prevents FOUC) */
47
- waitForStyles?: boolean;
48
46
  }
49
47
  /**
50
48
  * ServlyComponent - React wrapper for Servly runtime with slot support
51
49
  */
52
- 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;
50
+ 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;
53
51
 
54
52
  export { ServlyComponent, type ServlyComponentProps, ServlyComponent as default };
package/dist/index.d.ts CHANGED
@@ -43,12 +43,10 @@ interface ServlyComponentProps<P = Record<string, any>> {
43
43
  eventHandlers?: Record<string, Record<string, (e: Event) => void>>;
44
44
  /** Children - rendered into default slot if no slots prop */
45
45
  children?: React.ReactNode;
46
- /** Wait for Tailwind CSS to load before showing component (prevents FOUC) */
47
- waitForStyles?: boolean;
48
46
  }
49
47
  /**
50
48
  * ServlyComponent - React wrapper for Servly runtime with slot support
51
49
  */
52
- 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;
50
+ 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;
53
51
 
54
52
  export { ServlyComponent, type ServlyComponentProps, ServlyComponent as default };
package/dist/index.js CHANGED
@@ -4,7 +4,6 @@ import { createPortal } from "react-dom";
4
4
  import {
5
5
  render,
6
6
  fetchComponent,
7
- waitForTailwind,
8
7
  markElementReady,
9
8
  injectTailwind
10
9
  } from "@servlyadmin/runtime-core";
@@ -96,11 +95,10 @@ function ServlyComponent({
96
95
  className,
97
96
  style,
98
97
  showSkeleton = true,
99
- cacheStrategy = "memory",
98
+ cacheStrategy = "localStorage",
100
99
  retryConfig,
101
100
  eventHandlers,
102
- children,
103
- waitForStyles = true
101
+ children
104
102
  }) {
105
103
  const containerRef = useRef(null);
106
104
  const renderResultRef = useRef(null);
@@ -109,9 +107,7 @@ function ServlyComponent({
109
107
  const [state, setState] = useState({
110
108
  loading: true,
111
109
  error: null,
112
- data: null,
113
- stylesReady: !waitForStyles
114
- // If not waiting, styles are "ready"
110
+ data: null
115
111
  });
116
112
  const slotElements = useSlotElements(containerRef, isRendered);
117
113
  const effectiveSlots = useMemo(() => {
@@ -169,34 +165,27 @@ function ServlyComponent({
169
165
  }, [loadComponent]);
170
166
  useEffect(() => {
171
167
  if (!state.data || !containerRef.current) return;
172
- const doRender = async () => {
173
- if (waitForStyles) {
174
- await waitForTailwind();
175
- setState((prev) => ({ ...prev, stylesReady: true }));
176
- }
177
- const context = {
178
- props,
179
- state: {},
180
- context: {}
181
- };
182
- if (renderResultRef.current) {
183
- renderResultRef.current.update(context);
184
- return;
185
- }
186
- renderResultRef.current = render({
187
- container: containerRef.current,
188
- elements: state.data.layout,
189
- context,
190
- eventHandlers,
191
- views: state.views,
192
- componentRegistry: state.registry
193
- });
194
- if (containerRef.current) {
195
- markElementReady(containerRef.current);
196
- }
197
- setIsRendered(true);
168
+ const context = {
169
+ props,
170
+ state: {},
171
+ context: {}
198
172
  };
199
- doRender();
173
+ if (renderResultRef.current) {
174
+ renderResultRef.current.update(context);
175
+ return;
176
+ }
177
+ renderResultRef.current = render({
178
+ container: containerRef.current,
179
+ elements: state.data.layout,
180
+ context,
181
+ eventHandlers,
182
+ views: state.views,
183
+ componentRegistry: state.registry
184
+ });
185
+ if (containerRef.current) {
186
+ markElementReady(containerRef.current);
187
+ }
188
+ setIsRendered(true);
200
189
  return () => {
201
190
  if (renderResultRef.current) {
202
191
  renderResultRef.current.destroy();
@@ -204,7 +193,7 @@ function ServlyComponent({
204
193
  setIsRendered(false);
205
194
  }
206
195
  };
207
- }, [state.data, eventHandlers, waitForStyles]);
196
+ }, [state.data, state.views, state.registry, eventHandlers]);
208
197
  useEffect(() => {
209
198
  if (!renderResultRef.current || !state.data) return;
210
199
  const context = {
@@ -214,7 +203,7 @@ function ServlyComponent({
214
203
  };
215
204
  renderResultRef.current.update(context);
216
205
  }, [props, state.data]);
217
- if (state.loading || waitForStyles && !state.stylesReady) {
206
+ if (state.loading) {
218
207
  if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
219
208
  if (showSkeleton) return /* @__PURE__ */ jsx(LoadingSkeleton, { className });
220
209
  return null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servlyadmin/runtime-react",
3
- "version": "0.1.35",
3
+ "version": "0.1.37",
4
4
  "description": "React wrapper for Servly runtime renderer",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",