@frontmcp/react 0.0.1

package/esm/api/index.mjs

@@ -0,0 +1,379 @@
+// libs/react/src/api/useApiClient.ts
+import { useContext, useEffect, useRef } from "react";
+
+// libs/react/src/provider/FrontMcpContext.ts
+import { createContext } from "react";
+
+// libs/react/src/components/ComponentRegistry.ts
+var ComponentRegistry = class {
+  entries = /* @__PURE__ */ new Map();
+  register(uri, component, meta) {
+    const name = extractName(uri);
+    this.entries.set(uri, { uri, name, component, description: meta?.description });
+  }
+  registerAll(map) {
+    for (const [uri, component] of Object.entries(map)) {
+      this.register(uri, component);
+    }
+  }
+  get(uri) {
+    return this.entries.get(uri)?.component;
+  }
+  /**
+   * Resolve a shorthand name like `'UserCard'` by trying
+   * `component://UserCard`, `element://UserCard`, `page://UserCard`.
+   */
+  resolve(type) {
+    const exact = this.entries.get(type);
+    if (exact) return exact.component;
+    for (const protocol of ["component://", "element://", "page://"]) {
+      const entry = this.entries.get(`${protocol}${type}`);
+      if (entry) return entry.component;
+    }
+    return void 0;
+  }
+  has(uri) {
+    return this.entries.has(uri);
+  }
+  list() {
+    return Array.from(this.entries.values()).map(({ uri, name, description }) => ({
+      uri,
+      name,
+      description
+    }));
+  }
+  clear() {
+    this.entries.clear();
+  }
+};
+function extractName(uri) {
+  const idx = uri.indexOf("://");
+  return idx >= 0 ? uri.slice(idx + 3) : uri;
+}
+
+// libs/react/src/registry/DynamicRegistry.ts
+var DynamicRegistry = class {
+  tools = /* @__PURE__ */ new Map();
+  resources = /* @__PURE__ */ new Map();
+  toolRefCounts = /* @__PURE__ */ new Map();
+  resourceRefCounts = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  version = 0;
+  /**
+   * Register a dynamic tool. Returns an unregister function
+   * suitable for useEffect cleanup.
+   *
+   * Multiple registrations of the same name are ref-counted:
+   * subsequent registrations update the definition but the tool
+   * is only removed when every registrant has unregistered.
+   */
+  registerTool(def) {
+    const existing = this.toolRefCounts.get(def.name) ?? 0;
+    this.toolRefCounts.set(def.name, existing + 1);
+    this.tools.set(def.name, def);
+    if (existing === 0) {
+      this.notify();
+    }
+    let called = false;
+    return () => {
+      if (called) return;
+      called = true;
+      this.unregisterTool(def.name);
+    };
+  }
+  unregisterTool(name) {
+    const count = this.toolRefCounts.get(name);
+    if (count == null) return;
+    if (count <= 1) {
+      this.toolRefCounts.delete(name);
+      this.tools.delete(name);
+      this.notify();
+    } else {
+      this.toolRefCounts.set(name, count - 1);
+    }
+  }
+  /**
+   * Register a dynamic resource. Returns an unregister function
+   * suitable for useEffect cleanup.
+   *
+   * Multiple registrations of the same URI are ref-counted.
+   */
+  registerResource(def) {
+    const existing = this.resourceRefCounts.get(def.uri) ?? 0;
+    this.resourceRefCounts.set(def.uri, existing + 1);
+    this.resources.set(def.uri, def);
+    if (existing === 0) {
+      this.notify();
+    }
+    let called = false;
+    return () => {
+      if (called) return;
+      called = true;
+      this.unregisterResource(def.uri);
+    };
+  }
+  unregisterResource(uri) {
+    const count = this.resourceRefCounts.get(uri);
+    if (count == null) return;
+    if (count <= 1) {
+      this.resourceRefCounts.delete(uri);
+      this.resources.delete(uri);
+      this.notify();
+    } else {
+      this.resourceRefCounts.set(uri, count - 1);
+    }
+  }
+  /** Update the execute function for an existing tool (for stale closure prevention). */
+  updateToolExecute(name, execute) {
+    const existing = this.tools.get(name);
+    if (existing) {
+      existing.execute = execute;
+    }
+  }
+  /** Update the read function for an existing resource and notify subscribers. */
+  updateResourceRead(uri, read) {
+    const existing = this.resources.get(uri);
+    if (existing) {
+      existing.read = read;
+      this.notify();
+    }
+  }
+  getTools() {
+    return [...this.tools.values()];
+  }
+  getResources() {
+    return [...this.resources.values()];
+  }
+  findTool(name) {
+    return this.tools.get(name);
+  }
+  findResource(uri) {
+    return this.resources.get(uri);
+  }
+  hasTool(name) {
+    return this.tools.has(name);
+  }
+  hasResource(uri) {
+    return this.resources.has(uri);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  getVersion() {
+    return this.version;
+  }
+  clear() {
+    if (this.tools.size === 0 && this.resources.size === 0) return;
+    this.tools.clear();
+    this.resources.clear();
+    this.toolRefCounts.clear();
+    this.resourceRefCounts.clear();
+    this.notify();
+  }
+  notify() {
+    this.version++;
+    this.listeners.forEach((l) => {
+      l();
+    });
+  }
+};
+
+// libs/react/src/provider/FrontMcpContext.ts
+var defaultDynamicRegistry = new DynamicRegistry();
+var FrontMcpContext = createContext({
+  name: "default",
+  registry: new ComponentRegistry(),
+  dynamicRegistry: defaultDynamicRegistry,
+  getDynamicRegistry: () => defaultDynamicRegistry,
+  connect: async () => {
+  }
+});
+
+// libs/react/src/api/createFetchClient.ts
+function createFetchClient(fetchFn) {
+  const fn = fetchFn ?? globalThis.fetch.bind(globalThis);
+  return {
+    async request(config) {
+      const fetchOptions = {
+        method: config.method,
+        headers: config.headers
+      };
+      if (config.body !== void 0) {
+        fetchOptions.body = JSON.stringify(config.body);
+        const headers = fetchOptions.headers;
+        if (headers && !headers["Content-Type"] && !headers["content-type"]) {
+          headers["Content-Type"] = "application/json";
+        }
+      }
+      const response = await fn(config.url, fetchOptions);
+      const responseText = await response.text();
+      let data;
+      try {
+        data = JSON.parse(responseText);
+      } catch {
+        data = responseText;
+      }
+      return {
+        status: response.status,
+        statusText: response.statusText,
+        data
+      };
+    }
+  };
+}
+
+// libs/react/src/api/useApiClient.ts
+function interpolatePath(path, params) {
+  return path.replace(/\{(\w+)\}/g, (_, key) => {
+    const value = params[key];
+    return value != null ? encodeURIComponent(String(value)) : `{${key}}`;
+  });
+}
+function useApiClient(options) {
+  const { baseUrl, operations, headers, prefix = "api", client, fetch: customFetch } = options;
+  const { getDynamicRegistry } = useContext(FrontMcpContext);
+  const dynamicRegistry = getDynamicRegistry(options.server);
+  const headersRef = useRef(headers);
+  headersRef.current = headers;
+  const clientRef = useRef(client ?? createFetchClient(customFetch));
+  clientRef.current = client ?? createFetchClient(customFetch);
+  useEffect(() => {
+    const cleanups = [];
+    for (const op of operations) {
+      const toolName = `${prefix}_${op.operationId}`;
+      const execute = async (args) => {
+        const resolvedHeaders = {
+          "Content-Type": "application/json",
+          ...typeof headersRef.current === "function" ? headersRef.current() : headersRef.current ?? {}
+        };
+        const url = baseUrl + interpolatePath(op.path, args);
+        const body = args["body"];
+        const method = op.method;
+        const requestConfig = {
+          method,
+          url,
+          headers: resolvedHeaders
+        };
+        if (body !== void 0 && method !== "GET" && method !== "HEAD") {
+          requestConfig.body = body;
+        }
+        const response = await clientRef.current.request(requestConfig);
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify({
+                status: response.status,
+                statusText: response.statusText,
+                data: response.data
+              })
+            }
+          ],
+          isError: response.status >= 400
+        };
+      };
+      cleanups.push(
+        dynamicRegistry.registerTool({
+          name: toolName,
+          description: op.description,
+          inputSchema: op.inputSchema,
+          execute
+        })
+      );
+    }
+    return () => {
+      cleanups.forEach((fn) => {
+        fn();
+      });
+    };
+  }, [dynamicRegistry, baseUrl, operations, prefix, client, customFetch]);
+}
+
+// libs/react/src/api/parseOpenApiSpec.ts
+var HTTP_METHODS = ["get", "post", "put", "delete", "patch", "options", "head"];
+function parseOpenApiSpec(spec) {
+  const paths = spec["paths"];
+  if (!paths) return [];
+  const operations = [];
+  const usedIds = /* @__PURE__ */ new Set();
+  for (const [path, pathItem] of Object.entries(paths)) {
+    if (!pathItem || typeof pathItem !== "object") continue;
+    for (const method of HTTP_METHODS) {
+      const operation = pathItem[method];
+      if (!operation || typeof operation !== "object") continue;
+      const rawOperationId = operation["operationId"];
+      let operationId = typeof rawOperationId === "string" ? rawOperationId : `${method}_${path.replace(/[^a-zA-Z0-9]/g, "_")}`;
+      if (usedIds.has(operationId)) {
+        let suffix = 1;
+        while (usedIds.has(`${operationId}_${suffix}`)) suffix++;
+        operationId = `${operationId}_${suffix}`;
+      }
+      usedIds.add(operationId);
+      const rawSummary = operation["summary"];
+      const rawDescription = operation["description"];
+      const description = (typeof rawSummary === "string" ? rawSummary : void 0) ?? (typeof rawDescription === "string" ? rawDescription : void 0) ?? `${method.toUpperCase()} ${path}`;
+      const properties = /* @__PURE__ */ Object.create(null);
+      const required = [];
+      const rawPathParams = pathItem["parameters"];
+      const rawOpParams = operation["parameters"];
+      const pathParams = Array.isArray(rawPathParams) ? rawPathParams.filter(Boolean) : [];
+      const opParams = Array.isArray(rawOpParams) ? rawOpParams.filter(Boolean) : [];
+      const paramMap = /* @__PURE__ */ new Map();
+      for (const param of pathParams) {
+        if (typeof param === "object" && param !== null && param.name) {
+          paramMap.set(`${param.in}:${param.name}`, param);
+        }
+      }
+      for (const param of opParams) {
+        if (typeof param === "object" && param !== null && param.name) {
+          paramMap.set(`${param.in}:${param.name}`, param);
+        }
+      }
+      const propertyLocations = /* @__PURE__ */ new Map();
+      for (const param of paramMap.values()) {
+        if (param.name === "__proto__" || param.name === "constructor" || param.name === "prototype") continue;
+        const existingIn = propertyLocations.get(param.name);
+        if (existingIn && existingIn !== param.in) {
+          throw new Error(
+            `Parameter "${param.name}" appears in both "${existingIn}" and "${param.in}" \u2014 ambiguous mapping`
+          );
+        }
+        propertyLocations.set(param.name, param.in);
+        properties[param.name] = {
+          ...param.schema ?? { type: "string" },
+          description: param.description
+        };
+        if (param.required) required.push(param.name);
+      }
+      const requestBody = operation["requestBody"];
+      if (requestBody) {
+        const content = requestBody["content"];
+        const jsonContent = content?.["application/json"];
+        if (jsonContent?.["schema"]) {
+          properties["body"] = {
+            ...jsonContent["schema"],
+            description: "Request body"
+          };
+          if (requestBody["required"]) required.push("body");
+        }
+      }
+      const inputSchema = {
+        type: "object",
+        properties
+      };
+      if (required.length > 0) {
+        inputSchema["required"] = required;
+      }
+      operations.push({ operationId, description, method: method.toUpperCase(), path, inputSchema });
+    }
+  }
+  return operations;
+}
+export {
+  createFetchClient,
+  parseOpenApiSpec,
+  useApiClient
+};