@servlyadmin/runtime-react 0.1.9 → 0.1.11

package/dist/{index.mjs → index.cjs}

@@ -1,12 +1,47 @@
-// packages/runtime-react/src/ServlyComponent.tsx
-import { useRef, useEffect, useState, useCallback, useMemo } from "react";
-import { createPortal } from "react-dom";
-import {
-  render,
-  fetchComponent
-} from "@servlyadmin/runtime-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var LoadingSkeleton = ({ className }) => /* @__PURE__ */ jsx(
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ServlyComponent: () => ServlyComponent,
+  clearAllCaches: () => import_runtime_core2.clearAllCaches,
+  compareVersions: () => import_runtime_core2.compareVersions,
+  default: () => ServlyComponent_default,
+  fetchComponent: () => import_runtime_core2.fetchComponent,
+  getRegistryUrl: () => import_runtime_core2.getRegistryUrl,
+  invalidateCache: () => import_runtime_core2.invalidateCache,
+  isComponentAvailable: () => import_runtime_core2.isComponentAvailable,
+  parseVersion: () => import_runtime_core2.parseVersion,
+  prefetchComponents: () => import_runtime_core2.prefetchComponents,
+  resolveVersion: () => import_runtime_core2.resolveVersion,
+  satisfiesVersion: () => import_runtime_core2.satisfiesVersion,
+  setRegistryUrl: () => import_runtime_core2.setRegistryUrl
+});
+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)(
   "div",
   {
     className: `servly-skeleton ${className || ""}`,
@@ -16,7 +51,7 @@ var LoadingSkeleton = ({ className }) => /* @__PURE__ */ jsx(
       minHeight: "100px",
       animation: "servly-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
     },
-    children: /* @__PURE__ */ jsx("style", { children: `
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
       @keyframes servly-pulse {
         0%, 100% { opacity: 1; }
         50% { opacity: 0.5; }
@@ -24,7 +59,7 @@ var LoadingSkeleton = ({ className }) => /* @__PURE__ */ jsx(
     ` })
   }
 );
-var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ jsxs(
+var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   "div",
   {
     className: `servly-error ${className || ""}`,
@@ -36,9 +71,9 @@ var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ jsx
       ...style
     },
     children: [
-      /* @__PURE__ */ jsx("p", { style: { margin: 0, fontWeight: 500 }, children: "Failed to load component" }),
-      /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0", fontSize: "14px", color: "#991b1b" }, children: error.message }),
-      onRetry && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontWeight: 500 }, children: "Failed to load component" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "8px 0 0", fontSize: "14px", color: "#991b1b" }, children: error.message }),
+      onRetry && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
         {
           onClick: onRetry,
@@ -59,8 +94,8 @@ var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ jsx
   }
 );
 function useSlotElements(containerRef, isRendered) {
-  const [slotElements, setSlotElements] = useState({});
-  useEffect(() => {
+  const [slotElements, setSlotElements] = (0, import_react.useState)({});
+  (0, import_react.useEffect)(() => {
     if (!isRendered || !containerRef.current) {
       setSlotElements({});
       return;
@@ -93,24 +128,24 @@ function ServlyComponent({
   eventHandlers,
   children
 }) {
-  const containerRef = useRef(null);
-  const renderResultRef = useRef(null);
-  const abortControllerRef = useRef(null);
-  const [isRendered, setIsRendered] = useState(false);
-  const [state, setState] = useState({
+  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 = useMemo(() => {
+  const effectiveSlots = (0, import_react.useMemo)(() => {
     const result = { ...slots };
     if (children && !result.default) {
       result.default = children;
     }
     return result;
   }, [slots, children]);
-  const loadComponent = useCallback(async () => {
+  const loadComponent = (0, import_react.useCallback)(async () => {
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
@@ -124,7 +159,7 @@ function ServlyComponent({
       signal: abortControllerRef.current.signal
     };
     try {
-      const result = await fetchComponent(id, fetchOptions);
+      const result = await (0, import_runtime_core.fetchComponent)(id, fetchOptions);
       setState({
         loading: false,
         error: null,
@@ -146,7 +181,7 @@ function ServlyComponent({
       onError?.(err);
     }
   }, [id, version, cacheStrategy, retryConfig, onLoad, onError]);
-  useEffect(() => {
+  (0, import_react.useEffect)(() => {
     loadComponent();
     return () => {
       if (abortControllerRef.current) {
@@ -154,7 +189,7 @@ function ServlyComponent({
       }
     };
   }, [loadComponent]);
-  useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (!state.data || !containerRef.current) return;
     const context = {
       props,
@@ -165,7 +200,7 @@ function ServlyComponent({
       renderResultRef.current.update(context);
       return;
     }
-    renderResultRef.current = render({
+    renderResultRef.current = (0, import_runtime_core.render)({
       container: containerRef.current,
       elements: state.data.layout,
       context,
@@ -182,7 +217,7 @@ function ServlyComponent({
       }
     };
   }, [state.data, eventHandlers]);
-  useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (!renderResultRef.current || !state.data) return;
     const context = {
       props,
@@ -192,13 +227,13 @@ function ServlyComponent({
     renderResultRef.current.update(context);
   }, [props, state.data]);
   if (state.loading) {
-    if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
-    if (showSkeleton) return /* @__PURE__ */ jsx(LoadingSkeleton, { className });
+    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;
   }
   if (state.error) {
-    if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
-    return /* @__PURE__ */ jsx(
+    if (fallback) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ErrorDisplay,
       {
         error: state.error,
@@ -208,8 +243,8 @@ function ServlyComponent({
       }
     );
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: containerRef,
@@ -222,32 +257,20 @@ function ServlyComponent({
     Object.entries(effectiveSlots).map(([slotName, content]) => {
       const slotEl = slotElements[slotName];
       if (!slotEl || !content) return null;
-      return createPortal(content, slotEl, `slot-${slotName}`);
+      return (0, import_react_dom.createPortal)(content, slotEl, `slot-${slotName}`);
     })
   ] });
 }
 var ServlyComponent_default = ServlyComponent;
 
-// packages/runtime-react/src/index.ts
-import {
-  fetchComponent as fetchComponent2,
-  prefetchComponents,
-  isComponentAvailable,
-  setRegistryUrl,
-  getRegistryUrl,
-  invalidateCache,
-  clearAllCaches,
-  parseVersion,
-  compareVersions,
-  satisfiesVersion,
-  resolveVersion
-} from "@servlyadmin/runtime-core";
-export {
+// src/index.ts
+var import_runtime_core2 = require("@servlyadmin/runtime-core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   ServlyComponent,
   clearAllCaches,
   compareVersions,
-  ServlyComponent_default as default,
-  fetchComponent2 as fetchComponent,
+  fetchComponent,
   getRegistryUrl,
   invalidateCache,
   isComponentAvailable,
@@ -256,4 +279,4 @@ export {
   resolveVersion,
   satisfiesVersion,
   setRegistryUrl
-};
+});

package/dist/index.js

@@ -1,46 +1,12 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/runtime-react/src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  ServlyComponent: () => ServlyComponent,
-  clearAllCaches: () => import_runtime_core2.clearAllCaches,
-  compareVersions: () => import_runtime_core2.compareVersions,
-  default: () => ServlyComponent_default,
-  fetchComponent: () => import_runtime_core2.fetchComponent,
-  getRegistryUrl: () => import_runtime_core2.getRegistryUrl,
-  invalidateCache: () => import_runtime_core2.invalidateCache,
-  isComponentAvailable: () => import_runtime_core2.isComponentAvailable,
-  parseVersion: () => import_runtime_core2.parseVersion,
-  prefetchComponents: () => import_runtime_core2.prefetchComponents,
-  resolveVersion: () => import_runtime_core2.resolveVersion,
-  satisfiesVersion: () => import_runtime_core2.satisfiesVersion,
-  setRegistryUrl: () => import_runtime_core2.setRegistryUrl
-});
-module.exports = __toCommonJS(index_exports);
-
-// packages/runtime-react/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)(
+// src/ServlyComponent.tsx
+import { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import { createPortal } from "react-dom";
+import {
+  render,
+  fetchComponent
+} from "@servlyadmin/runtime-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LoadingSkeleton = ({ className }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: `servly-skeleton ${className || ""}`,
@@ -50,7 +16,7 @@ var LoadingSkeleton = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.
       minHeight: "100px",
       animation: "servly-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+    children: /* @__PURE__ */ jsx("style", { children: `
       @keyframes servly-pulse {
         0%, 100% { opacity: 1; }
         50% { opacity: 0.5; }
@@ -58,7 +24,7 @@ var LoadingSkeleton = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.
     ` })
   }
 );
-var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ jsxs(
   "div",
   {
     className: `servly-error ${className || ""}`,
@@ -70,9 +36,9 @@ var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ (0,
       ...style
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontWeight: 500 }, children: "Failed to load component" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "8px 0 0", fontSize: "14px", color: "#991b1b" }, children: error.message }),
-      onRetry && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ jsx("p", { style: { margin: 0, fontWeight: 500 }, children: "Failed to load component" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0", fontSize: "14px", color: "#991b1b" }, children: error.message }),
+      onRetry && /* @__PURE__ */ jsx(
         "button",
         {
           onClick: onRetry,
@@ -93,8 +59,8 @@ var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ (0,
   }
 );
 function useSlotElements(containerRef, isRendered) {
-  const [slotElements, setSlotElements] = (0, import_react.useState)({});
-  (0, import_react.useEffect)(() => {
+  const [slotElements, setSlotElements] = useState({});
+  useEffect(() => {
     if (!isRendered || !containerRef.current) {
       setSlotElements({});
       return;
@@ -127,24 +93,24 @@ function ServlyComponent({
   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)({
+  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 = (0, import_react.useMemo)(() => {
+  const effectiveSlots = useMemo(() => {
     const result = { ...slots };
     if (children && !result.default) {
       result.default = children;
     }
     return result;
   }, [slots, children]);
-  const loadComponent = (0, import_react.useCallback)(async () => {
+  const loadComponent = useCallback(async () => {
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
@@ -158,7 +124,7 @@ function ServlyComponent({
       signal: abortControllerRef.current.signal
     };
     try {
-      const result = await (0, import_runtime_core.fetchComponent)(id, fetchOptions);
+      const result = await fetchComponent(id, fetchOptions);
       setState({
         loading: false,
         error: null,
@@ -180,7 +146,7 @@ function ServlyComponent({
       onError?.(err);
     }
   }, [id, version, cacheStrategy, retryConfig, onLoad, onError]);
-  (0, import_react.useEffect)(() => {
+  useEffect(() => {
     loadComponent();
     return () => {
       if (abortControllerRef.current) {
@@ -188,7 +154,7 @@ function ServlyComponent({
       }
     };
   }, [loadComponent]);
-  (0, import_react.useEffect)(() => {
+  useEffect(() => {
     if (!state.data || !containerRef.current) return;
     const context = {
       props,
@@ -199,7 +165,7 @@ function ServlyComponent({
       renderResultRef.current.update(context);
       return;
     }
-    renderResultRef.current = (0, import_runtime_core.render)({
+    renderResultRef.current = render({
       container: containerRef.current,
       elements: state.data.layout,
       context,
@@ -216,7 +182,7 @@ function ServlyComponent({
       }
     };
   }, [state.data, eventHandlers]);
-  (0, import_react.useEffect)(() => {
+  useEffect(() => {
     if (!renderResultRef.current || !state.data) return;
     const context = {
       props,
@@ -226,13 +192,13 @@ function ServlyComponent({
     renderResultRef.current.update(context);
   }, [props, state.data]);
   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 });
+    if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    if (showSkeleton) return /* @__PURE__ */ jsx(LoadingSkeleton, { className });
     return null;
   }
   if (state.error) {
-    if (fallback) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    return /* @__PURE__ */ jsx(
       ErrorDisplay,
       {
         error: state.error,
@@ -242,8 +208,8 @@ function ServlyComponent({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
         ref: containerRef,
@@ -256,20 +222,32 @@ function ServlyComponent({
     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}`);
+      return createPortal(content, slotEl, `slot-${slotName}`);
     })
   ] });
 }
 var ServlyComponent_default = ServlyComponent;
 
-// packages/runtime-react/src/index.ts
-var import_runtime_core2 = require("@servlyadmin/runtime-core");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+// src/index.ts
+import {
+  fetchComponent as fetchComponent2,
+  prefetchComponents,
+  isComponentAvailable,
+  setRegistryUrl,
+  getRegistryUrl,
+  invalidateCache,
+  clearAllCaches,
+  parseVersion,
+  compareVersions,
+  satisfiesVersion,
+  resolveVersion
+} from "@servlyadmin/runtime-core";
+export {
   ServlyComponent,
   clearAllCaches,
   compareVersions,
-  fetchComponent,
+  ServlyComponent_default as default,
+  fetchComponent2 as fetchComponent,
   getRegistryUrl,
   invalidateCache,
   isComponentAvailable,
@@ -278,4 +256,4 @@ var import_runtime_core2 = require("@servlyadmin/runtime-core");
   resolveVersion,
   satisfiesVersion,
   setRegistryUrl
-});
+};

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@servlyadmin/runtime-react",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "React wrapper for Servly runtime renderer",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
     }
   },
   "files": [
@@ -16,6 +19,7 @@
   ],
   "sideEffects": false,
   "scripts": {
+    "build:pkg": "tsup src/index.ts --format esm,cjs --clean --external react",
     "build": "tsup src/index.ts --format esm,cjs --dts --clean --external react",
     "dev": "tsup src/index.ts --format esm,cjs --dts --watch --external react"
   },
@@ -32,7 +36,7 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@servlyadmin/runtime-core": "^0.1.9"
+    "@servlyadmin/runtime-core": "^0.1.11"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
@@ -40,7 +44,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.3.0",
-    "vitest": "^1.0.0"
+    "typescript": "^5.3.0"
   }
 }