@servlyadmin/runtime-react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,235 @@
+"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_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 || ""}`,
+    style: {
+      backgroundColor: "#f3f4f6",
+      borderRadius: "8px",
+      minHeight: "100px",
+      animation: "servly-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+      @keyframes servly-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+    ` })
+  }
+);
+var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "div",
+  {
+    className: `servly-error ${className || ""}`,
+    style: {
+      padding: "16px",
+      color: "#ef4444",
+      backgroundColor: "#fef2f2",
+      borderRadius: "8px",
+      ...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)(
+        "button",
+        {
+          onClick: onRetry,
+          style: {
+            marginTop: "12px",
+            padding: "8px 16px",
+            backgroundColor: "#ef4444",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+            fontSize: "14px"
+          },
+          children: "Retry"
+        }
+      )
+    ]
+  }
+);
+function ServlyComponent({
+  id,
+  version = "latest",
+  props = {},
+  fallback,
+  onError,
+  onLoad,
+  className,
+  style,
+  showSkeleton = true,
+  cacheStrategy = "memory",
+  retryConfig,
+  eventHandlers
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const renderResultRef = (0, import_react.useRef)(null);
+  const abortControllerRef = (0, import_react.useRef)(null);
+  const [state, setState] = (0, import_react.useState)({
+    loading: true,
+    error: null,
+    data: null
+  });
+  const loadComponent = (0, import_react.useCallback)(async () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    setState((prev) => ({ ...prev, loading: true, error: null }));
+    const fetchOptions = {
+      version,
+      cacheStrategy,
+      retryConfig,
+      signal: abortControllerRef.current.signal
+    };
+    try {
+      const result = await (0, import_runtime_core.fetchComponent)(id, fetchOptions);
+      setState({
+        loading: false,
+        error: null,
+        data: result.data
+      });
+      onLoad?.();
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      if (err.message === "Fetch aborted") return;
+      setState({
+        loading: false,
+        error: err,
+        data: null
+      });
+      onError?.(err);
+    }
+  }, [id, version, cacheStrategy, retryConfig, onLoad, onError]);
+  (0, import_react.useEffect)(() => {
+    loadComponent();
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, [loadComponent]);
+  (0, import_react.useEffect)(() => {
+    if (!state.data || !containerRef.current) return;
+    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
+    });
+    return () => {
+      if (renderResultRef.current) {
+        renderResultRef.current.destroy();
+        renderResultRef.current = null;
+      }
+    };
+  }, [state.data, props, eventHandlers]);
+  (0, import_react.useEffect)(() => {
+    if (!renderResultRef.current || !state.data) return;
+    const context = {
+      props,
+      state: {},
+      context: {}
+    };
+    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 });
+    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)(
+      ErrorDisplay,
+      {
+        error: state.error,
+        onRetry: loadComponent,
+        className,
+        style
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className: `servly-component ${className || ""}`,
+      style,
+      "data-servly-id": id,
+      "data-servly-version": state.data?.version
+    }
+  );
+}
+var ServlyComponent_default = ServlyComponent;
+
+// 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,
+  fetchComponent,
+  getRegistryUrl,
+  invalidateCache,
+  isComponentAvailable,
+  parseVersion,
+  prefetchComponents,
+  resolveVersion,
+  satisfiesVersion,
+  setRegistryUrl
+});

package/dist/index.d.cts

@@ -0,0 +1,44 @@
+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
+ */
+
+/**
+ * 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;
+    /** 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>>;
+}
+/**
+ * ServlyComponent - React wrapper for Servly runtime
+ */
+declare function ServlyComponent<P = Record<string, any>>({ id, version, props, fallback, onError, onLoad, className, style, showSkeleton, cacheStrategy, retryConfig, eventHandlers, }: ServlyComponentProps<P>): React.ReactElement | null;
+
+export { ServlyComponent, type ServlyComponentProps, ServlyComponent as default };

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+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
+ */
+
+/**
+ * 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;
+    /** 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>>;
+}
+/**
+ * ServlyComponent - React wrapper for Servly runtime
+ */
+declare function ServlyComponent<P = Record<string, any>>({ id, version, props, fallback, onError, onLoad, className, style, showSkeleton, cacheStrategy, retryConfig, eventHandlers, }: ServlyComponentProps<P>): React.ReactElement | null;
+
+export { ServlyComponent, type ServlyComponentProps, ServlyComponent as default };

package/dist/index.js

@@ -0,0 +1,212 @@
+// src/ServlyComponent.tsx
+import { useRef, useEffect, useState, useCallback } from "react";
+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 || ""}`,
+    style: {
+      backgroundColor: "#f3f4f6",
+      borderRadius: "8px",
+      minHeight: "100px",
+      animation: "servly-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+    },
+    children: /* @__PURE__ */ jsx("style", { children: `
+      @keyframes servly-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+    ` })
+  }
+);
+var ErrorDisplay = ({ error, onRetry, className, style }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `servly-error ${className || ""}`,
+    style: {
+      padding: "16px",
+      color: "#ef4444",
+      backgroundColor: "#fef2f2",
+      borderRadius: "8px",
+      ...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(
+        "button",
+        {
+          onClick: onRetry,
+          style: {
+            marginTop: "12px",
+            padding: "8px 16px",
+            backgroundColor: "#ef4444",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+            fontSize: "14px"
+          },
+          children: "Retry"
+        }
+      )
+    ]
+  }
+);
+function ServlyComponent({
+  id,
+  version = "latest",
+  props = {},
+  fallback,
+  onError,
+  onLoad,
+  className,
+  style,
+  showSkeleton = true,
+  cacheStrategy = "memory",
+  retryConfig,
+  eventHandlers
+}) {
+  const containerRef = useRef(null);
+  const renderResultRef = useRef(null);
+  const abortControllerRef = useRef(null);
+  const [state, setState] = useState({
+    loading: true,
+    error: null,
+    data: null
+  });
+  const loadComponent = useCallback(async () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    setState((prev) => ({ ...prev, loading: true, error: null }));
+    const fetchOptions = {
+      version,
+      cacheStrategy,
+      retryConfig,
+      signal: abortControllerRef.current.signal
+    };
+    try {
+      const result = await fetchComponent(id, fetchOptions);
+      setState({
+        loading: false,
+        error: null,
+        data: result.data
+      });
+      onLoad?.();
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      if (err.message === "Fetch aborted") return;
+      setState({
+        loading: false,
+        error: err,
+        data: null
+      });
+      onError?.(err);
+    }
+  }, [id, version, cacheStrategy, retryConfig, onLoad, onError]);
+  useEffect(() => {
+    loadComponent();
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, [loadComponent]);
+  useEffect(() => {
+    if (!state.data || !containerRef.current) return;
+    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
+    });
+    return () => {
+      if (renderResultRef.current) {
+        renderResultRef.current.destroy();
+        renderResultRef.current = null;
+      }
+    };
+  }, [state.data, props, eventHandlers]);
+  useEffect(() => {
+    if (!renderResultRef.current || !state.data) return;
+    const context = {
+      props,
+      state: {},
+      context: {}
+    };
+    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 });
+    return null;
+  }
+  if (state.error) {
+    if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    return /* @__PURE__ */ jsx(
+      ErrorDisplay,
+      {
+        error: state.error,
+        onRetry: loadComponent,
+        className,
+        style
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: `servly-component ${className || ""}`,
+      style,
+      "data-servly-id": id,
+      "data-servly-version": state.data?.version
+    }
+  );
+}
+var ServlyComponent_default = ServlyComponent;
+
+// 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,
+  ServlyComponent_default as default,
+  fetchComponent2 as fetchComponent,
+  getRegistryUrl,
+  invalidateCache,
+  isComponentAvailable,
+  parseVersion,
+  prefetchComponents,
+  resolveVersion,
+  satisfiesVersion,
+  setRegistryUrl
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@servlyadmin/runtime-react",
+  "version": "0.1.0",
+  "description": "React wrapper for Servly runtime renderer",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch --external react",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "servly",
+    "runtime",
+    "react",
+    "component"
+  ],
+  "author": "Servly",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "dependencies": {
+    "@servlyadmin/runtime-core": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  }
+}