@rsdoctor/components 0.0.2-beta.0

package/dist/components/Loader/executions.js

@@ -0,0 +1,221 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ClockCircleOutlined } from "@ant-design/icons";
+import { Row, Space, Badge, Col, Typography, Button, Divider, Timeline, Tooltip, Empty, Tag } from "antd";
+import { useState } from "react";
+import { Constants } from "@rsdoctor/types";
+import Editor from "@monaco-editor/react";
+import dayjs from "dayjs";
+import { endsWith } from "lodash-es";
+import { formatCosts, getModifiedLanguage, useTheme, beautifyPath } from "../../utils";
+import { Title } from "../Title";
+import { Size } from "../../constants";
+import { CodeOpener } from "../Opener";
+import { DiffViewer } from "../CodeViewer";
+import { JSIsEqualTag } from "../worker/jsequal/client";
+const LoaderInfoItem = (_a) => {
+  var _b = _a, {
+    label,
+    value,
+    ellipsis = false
+  } = _b, textProps = __objRest(_b, [
+    "label",
+    "value",
+    "ellipsis"
+  ]);
+  return /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Col, { span: 6, children: /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(Badge, { status: "processing" }),
+      /* @__PURE__ */ jsx("div", { style: { width: 180 }, children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: label }) }),
+      /* @__PURE__ */ jsx(Divider, { type: "vertical" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Col, { span: 18, children: /* @__PURE__ */ jsx(Typography.Paragraph, __spreadProps(__spreadValues({ ellipsis, strong: true }, textProps), { children: value })) })
+  ] });
+};
+const LoaderExecutions = ({ data, cwd, index }) => {
+  const { loaders, resource } = data;
+  const [currentIndex, setCurrentIndex] = useState(index || 0);
+  const { theme } = useTheme();
+  const isLight = theme === "light";
+  const loader = loaders[currentIndex];
+  const before = loader.input || "";
+  const leftSpan = 5;
+  const hasError = loader.errors && loader.errors.length;
+  return /* @__PURE__ */ jsxs(Row, { style: { height: "100%" }, children: [
+    /* @__PURE__ */ jsx(
+      Col,
+      {
+        span: leftSpan,
+        style: { borderRight: isLight ? `1px solid #f0f0f0` : void 0, padding: Size.BasePadding },
+        children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx(Title, { text: "Executions" }),
+          /* @__PURE__ */ jsx(Timeline, { mode: "left", style: { marginTop: Size.BasePadding }, children: loaders.map((e, i, arr) => {
+            const { loader: loader2, isPitch } = e;
+            return /* @__PURE__ */ jsxs(
+              Timeline.Item,
+              {
+                dot: isPitch ? /* @__PURE__ */ jsx(Tag, { style: { marginLeft: 1, fontWeight: 500 }, children: "pitch" }) : /* @__PURE__ */ jsx(ClockCircleOutlined, {}),
+                style: { paddingBottom: 10, textAlign: "center" },
+                children: [
+                  /* @__PURE__ */ jsx(Row, { align: "middle", justify: "space-between", gutter: [0, 10], children: /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(Tooltip, { title: loader2, trigger: "hover", children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: i === currentIndex ? "primary" : "default",
+                      block: true,
+                      onClick: () => {
+                        setCurrentIndex(i);
+                      },
+                      style: { textAlign: "left" },
+                      children: /* @__PURE__ */ jsxs(Typography.Text, { ellipsis: true, style: { color: "inherit" }, children: [
+                        /* @__PURE__ */ jsx(Typography.Text, { strong: true, style: { color: "inherit" }, children: formatCosts(e.costs) }),
+                        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                        loader2
+                      ] })
+                    }
+                  ) }) }) }),
+                  i === arr.length - 1 ? null : /* @__PURE__ */ jsx("div", { style: { paddingTop: 10 }, children: /* @__PURE__ */ jsx(Typography.Text, { children: "⬇️" }) })
+                ]
+              },
+              i
+            );
+          }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Col, { span: 24 - leftSpan, style: { height: "100%" }, children: [
+      /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { padding: Size.BasePadding, wordBreak: "break-all" }, children: [
+        /* @__PURE__ */ jsxs(Row, { justify: "space-between", align: "middle", style: { paddingBottom: Size.BasePadding / 2 }, children: [
+          /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(Space, { children: [
+            /* @__PURE__ */ jsx(Title, { text: "Loader Details" }),
+            loader.isPitch ? /* @__PURE__ */ jsx(Typography.Text, { code: true, children: "pitch" }) : null,
+            loader.isPitch || hasError || !endsWith(resource.path, Constants.JSExtension) ? null : /* @__PURE__ */ jsx(JSIsEqualTag, { input: before, output: loader.result || "" })
+          ] }) }),
+          /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(Tag, { icon: /* @__PURE__ */ jsx(ClockCircleOutlined, {}), color: "default", children: dayjs(loader.startAt).format("YYYY-MM-DD HH:mm:ss") }) })
+        ] }),
+        /* @__PURE__ */ jsx(LoaderInfoItem, { label: "file path", value: beautifyPath(resource.path, cwd), code: true }),
+        /* @__PURE__ */ jsx(
+          LoaderInfoItem,
+          {
+            label: "resource path",
+            value: /* @__PURE__ */ jsx(CodeOpener, { cwd, url: resource.path, loc: "", disabled: true })
+          }
+        ),
+        /* @__PURE__ */ jsx(LoaderInfoItem, { label: "resource query", value: resource.queryRaw || "-" }),
+        /* @__PURE__ */ jsx(LoaderInfoItem, { label: "duration", value: formatCosts(loader.costs), mark: true }),
+        /* @__PURE__ */ jsx(LoaderInfoItem, { label: "loader name", value: loader.loader, code: true }),
+        /* @__PURE__ */ jsx(LoaderInfoItem, { label: "loader index", value: `${loader.loaderIndex}` }),
+        /* @__PURE__ */ jsx(LoaderInfoItem, { label: "loader path", value: /* @__PURE__ */ jsx(CodeOpener, { cwd, url: loader.path, loc: "", disabled: true }) }),
+        /* @__PURE__ */ jsx(
+          LoaderInfoItem,
+          {
+            label: "options",
+            value: JSON.stringify(loader.options || "-"),
+            copyable: true,
+            ellipsis: {
+              rows: 2,
+              expandable: true,
+              symbol: "more"
+            }
+          }
+        )
+      ] }) }),
+      hasError ? /* @__PURE__ */ jsxs(Col, { span: 24, style: { height: "53%", minHeight: 400 }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: Size.BasePadding,
+              borderTop: `1px solid ${isLight ? "#f0f0f0" : "rgba(253, 253, 253, 0.12)"}`,
+              borderBottom: `1px solid ${isLight ? "#f0f0f0" : "rgba(253, 253, 253, 0.12)"}`
+            },
+            children: /* @__PURE__ */ jsx(Title, { text: `the error stack of [${loader.loader}] ${loader.isPitch ? "pitch" : ""}` })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { height: "90%" }, children: /* @__PURE__ */ jsx(
+          Editor,
+          {
+            theme: "vs-dark",
+            options: {
+              readOnly: true,
+              domReadOnly: true,
+              fontSize: 14,
+              minimap: { enabled: false },
+              lineNumbers: "off"
+            },
+            value: loader.errors[0].message,
+            language: "javascript"
+          }
+        ) })
+      ] }) : /* @__PURE__ */ jsxs(Col, { span: 24, style: { height: "53%", minHeight: 400 }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: Size.BasePadding,
+              borderTop: `1px solid ${isLight ? "#f0f0f0" : "rgba(253, 253, 253, 0.12)"}`,
+              borderBottom: `1px solid ${isLight ? "#f0f0f0" : "rgba(253, 253, 253, 0.12)"}`
+            },
+            children: /* @__PURE__ */ jsx(Title, { text: `the result of [${loader.loader}] ${loader.isPitch ? "pitch" : ""}` })
+          }
+        ),
+        loader.isPitch ? loader.result ? /* @__PURE__ */ jsx("div", { style: { height: "90%" }, children: /* @__PURE__ */ jsx(
+          Editor,
+          {
+            theme: "vs-dark",
+            options: { readOnly: true, domReadOnly: true, fontSize: 14 },
+            value: loader.result,
+            language: getModifiedLanguage(resource.path)
+          }
+        ) }) : /* @__PURE__ */ jsx(Empty, {}) : /* @__PURE__ */ jsxs("div", { style: { height: "90%" }, children: [
+          /* @__PURE__ */ jsxs(Row, { children: [
+            /* @__PURE__ */ jsx(Col, { span: 12, style: { padding: `${Size.BasePadding / 2}px ${Size.BasePadding}px` }, children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Input" }) }),
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                span: 12,
+                style: {
+                  padding: `${Size.BasePadding / 2}px ${Size.BasePadding}px`
+                },
+                children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Output" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { height: "86%" }, children: /* @__PURE__ */ jsx(DiffViewer, { filepath: resource.path, before, after: loader.result || "" }) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  LoaderExecutions
+};

package/dist/components/Manifest/api.d.ts

@@ -0,0 +1,41 @@
+import { Manifest, SDK } from '@rsdoctor/types';
+import React from 'react';
+export type InferServerAPIBody<T> = SDK.ServerAPI.InferRequestBodyType<T> extends void ? {
+  body?: any;
+} : {
+  body: SDK.ServerAPI.InferRequestBodyType<T>;
+};
+type ServerAPIProviderProps<T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends> = {
+  manifestLoader?: () => Promise<Manifest.DoctorManifestWithShardingFiles>;
+  api: T;
+  children: (response: SDK.ServerAPI.InferResponseType<T>) => JSX.Element;
+  fallbackComponent?: React.FC;
+  showSkeleton?: boolean;
+} & InferServerAPIBody<T>;
+/**
+ * this component will request server api to the sdk of Rsdoctor in local development.
+ * otherwise it will fallback to load full manifest for the data.
+ *
+ * @example usage
+ * <ServerAPIProvider {...props}>
+ *   {(response) => {
+ *     <Component {...}></Component>
+ *   }}
+ * </ServerAPIProvider>
+ */
+export declare const ServerAPIProvider: <T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends>(props: ServerAPIProviderProps<T>) => JSX.Element | null;
+export declare function withServerAPI<T, P extends keyof T, A extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends>({
+  Component,
+  api,
+  responsePropName,
+  body: bodyInRoot,
+  fallbackComponent,
+  showSkeleton
+}: {
+  Component: React.FC<T>;
+  api: A;
+  responsePropName: P;
+  fallbackComponent?: React.FC;
+  showSkeleton?: boolean;
+} & Partial<Partial<InferServerAPIBody<A>>>): React.FC<Omit<T, P> & Partial<InferServerAPIBody<A>>>;
+export {};

package/dist/components/Manifest/api.js

@@ -0,0 +1,157 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { SDK } from "@rsdoctor/types";
+import { Skeleton, Spin } from "antd";
+import { useCallback, useEffect, useState } from "react";
+import { includes, isEqual, isNil, values } from "lodash-es";
+import { fetchManifest, useDataLoader } from "../../utils";
+import { ComponentState } from "../../constants";
+import { FailedStatus } from "../Status";
+const ServerAPIProvider = (props) => {
+  const {
+    manifestLoader = fetchManifest,
+    api,
+    children,
+    // default value of "body" must be "null" to avoid the response type not match when the socket received message.
+    body = null,
+    showSkeleton = true,
+    fallbackComponent
+  } = props;
+  let promise = manifestLoader();
+  const [manifest, setManifest] = useState();
+  const [state, setState] = useState(ComponentState.Pending);
+  const [res, setRes] = useState({});
+  const { loader } = useDataLoader(manifest);
+  function init(loader2) {
+    ensureManifest(promise).then(() => {
+      executeLoader(loader2);
+    });
+  }
+  const update = useCallback(
+    ({ req, res: response }) => {
+      if (req.api === api) {
+        if (isEqual(req.body, body) || isNil(req.body) && isNil(body)) {
+          if (!isEqual(res, response)) {
+            setRes(response);
+          }
+        }
+      }
+      setState(ComponentState.Success);
+    },
+    [res, api, body]
+  );
+  useEffect(() => {
+    init(loader);
+  }, [loader, api, body]);
+  useEffect(() => {
+    if (!loader)
+      return;
+    loader.onDataUpdate(api, update);
+    return () => {
+      loader.removeOnDataUpdate(api, update);
+    };
+  }, [loader, api, body]);
+  function ensureManifest(pro) {
+    return pro.then((manifest2) => {
+      setManifest(manifest2);
+    }).catch((err) => {
+      setState(ComponentState.Fail);
+      throw err;
+    });
+  }
+  function executeLoader(loader2) {
+    if (!loader2)
+      return;
+    const exts = values(SDK.ServerAPI.APIExtends);
+    if (includes(exts, api)) {
+      setState(ComponentState.Success);
+      return;
+    }
+    loader2.loadAPI(api, body).then((e) => {
+      if (isNil(e)) {
+        return;
+      }
+      setRes(e);
+      setState(ComponentState.Success);
+    }).catch((err) => {
+      console.error(err);
+      setState(ComponentState.Fail);
+    });
+  }
+  if (state === ComponentState.Pending) {
+    return showSkeleton ? /* @__PURE__ */ jsx(Skeleton, { active: true }) : null;
+  }
+  if (state === ComponentState.Fail) {
+    if (fallbackComponent)
+      return fallbackComponent;
+    return /* @__PURE__ */ jsx(
+      FailedStatus,
+      {
+        retry: () => {
+          setState(ComponentState.Pending);
+          promise = manifestLoader();
+          init();
+        }
+      }
+    );
+  }
+  if (state === ComponentState.Updating) {
+    return /* @__PURE__ */ jsx(Spin, { spinning: true, children: children(res) });
+  }
+  return children(res);
+};
+function withServerAPI({
+  Component,
+  api,
+  responsePropName,
+  body: bodyInRoot,
+  fallbackComponent,
+  showSkeleton
+}) {
+  return function _(props) {
+    const _a = props, { body = bodyInRoot } = _a, rest = __objRest(_a, ["body"]);
+    return (
+      // @ts-ignore
+      /* @__PURE__ */ jsx(ServerAPIProvider, { api, body, showSkeleton, fallbackComponent, children: (res) => {
+        const _props = __spreadProps(__spreadValues({}, rest), {
+          [responsePropName]: res
+        });
+        return /* @__PURE__ */ jsx(Component, __spreadValues({}, _props));
+      } })
+    );
+  };
+}
+export {
+  ServerAPIProvider,
+  withServerAPI
+};

package/dist/components/Manifest/data.d.ts

@@ -0,0 +1,8 @@
+import { Manifest } from '@rsdoctor/types';
+import React from 'react';
+type ExtractAlias<T> = T extends [property: string, alias: infer P][] ? `${P extends string ? P : never}` : never;
+/**
+ * @deprecated
+ */
+export declare function ConnectManifestData<Props extends object, Keys extends [property: `${Manifest.DoctorManifestMappingKeys}`, alias: keyof Props][] | [property: string, alias: keyof Props][]>(manifestLoader: () => Promise<Manifest.DoctorManifestWithShardingFiles>, keys: Keys, Component: React.FC<Props>): React.FC<Omit<Props, ExtractAlias<Keys>>>;
+export {};

package/dist/components/Manifest/data.js

@@ -0,0 +1,81 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { jsx } from "react/jsx-runtime";
+import { Skeleton } from "antd";
+import { useEffect, useState } from "react";
+import { useDataLoader } from "../../utils";
+import { PageState } from "../../constants";
+import { FailedStatus } from "../Status";
+function ConnectManifestData(manifestLoader, keys, Component) {
+  const promise = manifestLoader();
+  return function _() {
+    const [manifest, setManifest] = useState();
+    const [state, setState] = useState(PageState.Pending);
+    const [props, setProps] = useState({});
+    const { loader } = useDataLoader(manifest);
+    useEffect(() => {
+      ensureManifest(promise).then(() => {
+        executeLoader(loader);
+      });
+    }, [loader]);
+    function ensureManifest(pro) {
+      return pro.then((manifest2) => {
+        setManifest(manifest2);
+      }).catch(() => {
+        setState(PageState.Fail);
+      });
+    }
+    function executeLoader(loader2) {
+      if (!loader2)
+        return;
+      Promise.all(keys.map(([key]) => loader2.loadData(key))).then((e) => {
+        const p = e.reduce((t, val, i) => {
+          const [_key, alias] = keys[i];
+          t[alias] = val;
+          return t;
+        }, {});
+        setProps(p);
+        setState(PageState.Success);
+      }).catch((err) => {
+        console.error(err);
+        setState(PageState.Fail);
+      });
+    }
+    if (state === PageState.Pending) {
+      return /* @__PURE__ */ jsx(Skeleton, { active: true });
+    }
+    if (state === PageState.Fail) {
+      return /* @__PURE__ */ jsx(
+        FailedStatus,
+        {
+          retry: () => {
+            setState(PageState.Pending);
+            promise.then(() => {
+              executeLoader(loader);
+            }).catch(() => {
+              ensureManifest(manifestLoader());
+            });
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Component, __spreadValues({}, props));
+  };
+}
+export {
+  ConnectManifestData
+};

package/dist/components/Manifest/index.d.ts

@@ -0,0 +1,2 @@
+export * from './data';
+export * from './api';

package/dist/components/Manifest/index.js

@@ -0,0 +1,2 @@
+export * from "./data";
+export * from "./api";

package/dist/components/Opener/code.d.ts

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from 'react';
+interface CodeOpenerProps {
+  windowId?: number;
+  /**
+   * @example /xx/src/pages/home/index.ts + 100 modules
+   * @example /xx/src/pages/b/index.ts
+   */
+  url: string;
+  /**
+   * @example 1:0-10
+   * @example 1:1
+   */
+  loc?: string;
+  cwd: string;
+  label?: string;
+  disabled?: boolean;
+  code?: boolean;
+}
+export declare const CodeOpener: ({
+  cwd,
+  url,
+  loc,
+  windowId,
+  label,
+  disabled,
+  code
+}: PropsWithChildren<CodeOpenerProps>) => JSX.Element | null;
+export {};

package/dist/components/Opener/code.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Typography } from "antd";
+import path from "path";
+import { startsWith } from "lodash-es";
+import { VSCode, openVSCode } from "./vscode";
+function parseUrl(url) {
+  const strs = url.split(" ");
+  let res = "";
+  if (strs.length === 1) {
+    [res] = strs;
+  } else {
+    [res] = strs.filter((e) => path.isAbsolute(e) || startsWith(e, "./"));
+  }
+  return res || url;
+}
+function parseLoc(loc) {
+  if (!loc)
+    return { line: 1, column: 1 };
+  const [line, col = ""] = loc.split(":");
+  const [start = 1, end] = col.split("-");
+  return {
+    line,
+    columnStart: start,
+    columnEnd: end || start
+  };
+}
+const defaultWindowId = +Date.now().toString().slice(-4) + 1e3;
+const CodeOpener = ({
+  cwd,
+  url,
+  loc,
+  windowId = defaultWindowId,
+  label,
+  disabled,
+  code = false
+}) => {
+  const file = path.resolve(cwd, parseUrl(url));
+  const { line, columnStart } = parseLoc(loc);
+  return /* @__PURE__ */ jsxs("span", { style: { wordBreak: "break-all" }, children: [
+    /* @__PURE__ */ jsx(
+      Typography.Text,
+      {
+        copyable: {
+          text: file
+        },
+        children: /* @__PURE__ */ jsxs(
+          Typography.Text,
+          {
+            code,
+            onClick: () => {
+              if (disabled)
+                return;
+              openVSCode({ file, line, column: columnStart, windowId });
+            },
+            style: { cursor: disabled ? "revert" : "pointer" },
+            children: [
+              label || url,
+              loc ? `:${loc}` : ""
+            ]
+          }
+        )
+      }
+    ),
+    process.env.NODE_ENV === "development" ? /* @__PURE__ */ jsx(VSCode, { file, line, column: columnStart, windowId, style: { marginLeft: 3 } }) : /* @__PURE__ */ jsx("div", { style: { display: "inline-block" } })
+  ] });
+};
+export {
+  CodeOpener
+};

package/dist/components/Opener/index.d.ts

@@ -0,0 +1,2 @@
+export * from './code';
+export * from './vscode';

package/dist/components/Opener/index.js

@@ -0,0 +1,2 @@
+export * from "./code";
+export * from "./vscode";

package/dist/components/Opener/vscode.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface VSCodeProps {
+  file: string;
+  line?: number | string;
+  column?: number | string;
+  windowId?: number;
+  style?: React.CSSProperties;
+}
+export declare function openVSCode({
+  file,
+  line,
+  column,
+  windowId
+}: VSCodeProps): void;
+export declare const VSCode: (props: VSCodeProps) => JSX.Element;
+export {};