@dxos/plugin-script 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/dist/lib/browser/ScriptContainer-U3BFT76B.mjs

@@ -0,0 +1,713 @@
+import {
+  templates
+} from "./chunk-PZPYF7M4.mjs";
+import {
+  DebugPanel
+} from "./chunk-5SXOHNAK.mjs";
+import {
+  SCRIPT_PLUGIN
+} from "./chunk-FVVCAWNP.mjs";
+
+// packages/plugins/experimental/plugin-script/src/components/ScriptContainer.tsx
+import React3, { useMemo as useMemo3 } from "react";
+import { createDocAccessor, getSpace as getSpace2 } from "@dxos/react-client/echo";
+import { useIdentity } from "@dxos/react-client/halo";
+import { createDataExtensions, listener, stackItemContentEditorClassNames } from "@dxos/react-ui-editor";
+import { StackItem } from "@dxos/react-ui-stack";
+import { mx } from "@dxos/react-ui-theme";
+
+// packages/plugins/experimental/plugin-script/src/components/ScriptToolbar/ScriptToolbar.tsx
+import React, { useCallback as useCallback5 } from "react";
+import { fullyQualifiedId } from "@dxos/react-client/echo";
+import { ElevationProvider } from "@dxos/react-ui";
+import { stackItemContentToolbarClassNames } from "@dxos/react-ui-editor";
+import { createGapSeparator, MenuProvider, ToolbarMenu, useMenuActions } from "@dxos/react-ui-menu";
+
+// packages/plugins/experimental/plugin-script/src/hooks/deploy.ts
+import { useCallback, useEffect, useMemo } from "react";
+import { FunctionType, getInvocationUrl, getUserFunctionUrlInMetadata, incrementSemverPatch, setUserFunctionUrlInMetadata, uploadWorkerFunction } from "@dxos/functions";
+import { Bundler } from "@dxos/functions/bundler";
+import { log } from "@dxos/log";
+import { useClient } from "@dxos/react-client";
+import { Filter, create, getMeta, getSpace, makeRef, useQuery } from "@dxos/react-client/echo";
+import { useTranslation } from "@dxos/react-ui";
+import { createMenuAction } from "@dxos/react-ui-menu";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-script/src/hooks/deploy.ts";
+var createDeploy = (state) => {
+  const errorItem = createMenuAction("error", {
+    label: state.error ?? [
+      "no error label",
+      {
+        ns: SCRIPT_PLUGIN
+      }
+    ],
+    icon: "ph--warning-circle--regular",
+    hidden: !state.error
+  });
+  const deployAction = createMenuAction("deploy", {
+    type: "deploy",
+    label: [
+      state.deploying ? "pending label" : "deploy label",
+      {
+        ns: SCRIPT_PLUGIN
+      }
+    ],
+    icon: state.deploying ? "ph--spinner-gap--regular" : "ph--cloud-arrow-up--regular",
+    disabled: state.deploying,
+    classNames: state.deploying ? "[&_svg]:animate-spin" : ""
+  });
+  const copyAction = createMenuAction("copy", {
+    type: "copy",
+    label: [
+      "copy link label",
+      {
+        ns: SCRIPT_PLUGIN
+      }
+    ],
+    icon: "ph--link--regular",
+    disabled: !state.functionUrl
+  });
+  return {
+    nodes: [
+      errorItem,
+      deployAction,
+      copyAction
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "error"
+      },
+      {
+        source: "root",
+        target: "deploy"
+      },
+      {
+        source: "root",
+        target: "copy"
+      }
+    ]
+  };
+};
+var useDeployDeps = ({ state, script }) => {
+  const space = getSpace(script);
+  const [fn] = useQuery(space, Filter.schema(FunctionType, {
+    source: script
+  }));
+  const client = useClient();
+  const existingFunctionUrl = useMemo(() => fn && getUserFunctionUrlInMetadata(getMeta(fn)), [
+    fn
+  ]);
+  return {
+    space,
+    fn,
+    client,
+    existingFunctionUrl
+  };
+};
+var useDeployState = ({ state, script }) => {
+  const { space, client, existingFunctionUrl } = useDeployDeps({
+    state,
+    script
+  });
+  useEffect(() => {
+    if (!existingFunctionUrl) {
+      return;
+    }
+    state.functionUrl = getInvocationUrl(existingFunctionUrl, client.config.values.runtime?.services?.edge?.url ?? "", {
+      spaceId: space?.id
+    });
+  }, [
+    existingFunctionUrl,
+    space
+  ]);
+  useEffect(() => {
+    state.deployed = Boolean(existingFunctionUrl) && !script.changed;
+  }, [
+    script.changed,
+    existingFunctionUrl
+  ]);
+};
+var useDeployHandler = ({ state, script }) => {
+  const { space, fn, client, existingFunctionUrl } = useDeployDeps({
+    state,
+    script
+  });
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  return useCallback(async () => {
+    if (!script.source || !space) {
+      return;
+    }
+    state.error = void 0;
+    state.deploying = true;
+    try {
+      const existingFunctionId = existingFunctionUrl?.split("/").at(-1);
+      const bundler = new Bundler({
+        platform: "browser",
+        sandboxedModules: [],
+        remoteModules: {}
+      });
+      const buildResult = await bundler.bundle({
+        source: script.source.target.content
+      });
+      if (buildResult.error || !buildResult.bundle) {
+        throw buildResult.error;
+      }
+      const { functionId, version, meta } = await uploadWorkerFunction({
+        client,
+        spaceId: space.id,
+        version: fn ? incrementSemverPatch(fn.version) : "0.0.1",
+        functionId: existingFunctionId,
+        source: buildResult.bundle
+      });
+      if (functionId === void 0 || version === void 0) {
+        throw new Error(`Upload didn't return expected data: functionId=${functionId}, version=${version}`);
+      }
+      log.info("function uploaded", {
+        functionId,
+        version
+      }, {
+        F: __dxlog_file,
+        L: 124,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      if (fn) {
+        fn.version = version;
+      }
+      const deployedFunction = fn ?? space.db.add(create(FunctionType, {
+        name: functionId,
+        version,
+        source: makeRef(script)
+      }));
+      script.changed = false;
+      if (script.description !== void 0 && script.description.trim() !== "") {
+        deployedFunction.description = script.description;
+      } else if (meta.description) {
+        deployedFunction.description = meta.description;
+      } else {
+        log.verbose("no description in function metadata", {
+          functionId
+        }, {
+          F: __dxlog_file,
+          L: 138,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+      }
+      if (meta.inputSchema) {
+        deployedFunction.inputSchema = meta.inputSchema;
+      } else {
+        log.verbose("no input schema in function metadata", {
+          functionId
+        }, {
+          F: __dxlog_file,
+          L: 144,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+      }
+      if (meta.outputSchema) {
+        deployedFunction.outputSchema = meta.outputSchema;
+      } else {
+        log.verbose("no output schema in function metadata", {
+          functionId
+        }, {
+          F: __dxlog_file,
+          L: 149,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+      }
+      setUserFunctionUrlInMetadata(getMeta(deployedFunction), `/${space.id}/${functionId}`);
+      state.view = "split";
+    } catch (err) {
+      log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 156,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      state.error = t("upload failed label");
+    }
+    state.deploying = false;
+  }, [
+    fn,
+    client,
+    t,
+    existingFunctionUrl,
+    script,
+    script.name,
+    script.source,
+    space?.id ?? null
+  ]);
+};
+var useCopyHandler = ({ state }) => useCallback(async () => {
+  if (!state.functionUrl) {
+    return;
+  }
+  await navigator.clipboard.writeText(state.functionUrl);
+}, [
+  state.functionUrl
+]);
+
+// packages/plugins/experimental/plugin-script/src/hooks/format.ts
+import { format } from "prettier";
+import prettierPluginEstree from "prettier/plugins/estree";
+import prettierPluginTypescript from "prettier/plugins/typescript";
+import { useCallback as useCallback2 } from "react";
+import { log as log2 } from "@dxos/log";
+import { createMenuAction as createMenuAction2 } from "@dxos/react-ui-menu";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-script/src/hooks/format.ts";
+var createFormat = () => {
+  const formatAction = createMenuAction2("format", {
+    label: [
+      "format label",
+      {
+        ns: SCRIPT_PLUGIN
+      }
+    ],
+    icon: "ph--magic-wand--regular"
+  });
+  return {
+    nodes: [
+      formatAction
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "format"
+      }
+    ]
+  };
+};
+var useFormatHandler = ({ script }) => useCallback2(async () => {
+  if (!script.source) {
+    return;
+  }
+  try {
+    script.source.target.content = await format(script.source.target.content, {
+      parser: "typescript",
+      plugins: [
+        prettierPluginEstree,
+        prettierPluginTypescript
+      ],
+      semi: true,
+      singleQuote: true
+    });
+  } catch (err) {
+    log2.catch(err, void 0, {
+      F: __dxlog_file2,
+      L: 45,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+}, [
+  script.source
+]);
+
+// packages/plugins/experimental/plugin-script/src/hooks/template.ts
+import { useCallback as useCallback3 } from "react";
+import { FUNCTIONS_PRESET_META_KEY } from "@dxos/functions";
+import { getMeta as getMeta2 } from "@dxos/live-object";
+import { createMenuItemGroup, createMenuAction as createMenuAction3 } from "@dxos/react-ui-menu";
+var createTemplateSelectGroup = () => {
+  return createMenuItemGroup("template-select", {
+    label: [
+      "template select group label",
+      {
+        ns: SCRIPT_PLUGIN
+      }
+    ],
+    variant: "dropdownMenu"
+  });
+};
+var createTemplateSelectActions = () => {
+  return templates.map((template) => {
+    return createMenuAction3(`template--${template.id}`, {
+      label: template.name,
+      value: template.id,
+      type: "template"
+    });
+  });
+};
+var createTemplateSelect = () => {
+  const templateSelectGroup = createTemplateSelectGroup();
+  const templateSelectActions = createTemplateSelectActions();
+  return {
+    nodes: [
+      templateSelectGroup,
+      ...templateSelectActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "template-select"
+      },
+      ...templateSelectActions.map((action) => ({
+        source: "template-select",
+        target: action.id
+      }))
+    ]
+  };
+};
+var useTemplateSelectHandler = ({ script }) => {
+  return useCallback3((templateId) => {
+    const template = templates.find((template2) => template2.id === templateId);
+    if (template) {
+      script.name = template.name;
+      script.source.target.content = template.source;
+      const metaKeys = getMeta2(script).keys;
+      const oldPresetIndex = metaKeys.findIndex((key) => key.source === FUNCTIONS_PRESET_META_KEY);
+      if (oldPresetIndex >= 0) {
+        metaKeys.splice(oldPresetIndex, 1);
+      }
+      if (template.presetId) {
+        metaKeys.push({
+          source: FUNCTIONS_PRESET_META_KEY,
+          id: template.presetId
+        });
+      }
+    }
+  }, [
+    script
+  ]);
+};
+
+// packages/plugins/experimental/plugin-script/src/hooks/view.ts
+import { createMenuAction as createMenuAction4, createMenuItemGroup as createMenuItemGroup2 } from "@dxos/react-ui-menu";
+var views = {
+  editor: "ph--code--regular",
+  split: "ph--square-split-vertical--regular",
+  debug: "ph--bug--regular"
+};
+var createViewGroupItem = (state) => {
+  return createMenuItemGroup2("view", {
+    label: [
+      "view group label",
+      {
+        ns: SCRIPT_PLUGIN
+      }
+    ],
+    variant: "dropdownMenu",
+    applyActive: true,
+    value: state.view
+  });
+};
+var createViewActions = (state) => {
+  return Object.entries(views).map(([viewType, icon]) => {
+    return createMenuAction4(`view--${viewType}`, {
+      type: "view",
+      value: viewType,
+      label: [
+        `view ${viewType} label`,
+        {
+          ns: SCRIPT_PLUGIN
+        }
+      ],
+      icon,
+      checked: state.view === viewType
+    });
+  });
+};
+var createView = (state) => {
+  const viewGroupItem = createViewGroupItem(state);
+  const viewActions = createViewActions(state);
+  return {
+    nodes: [
+      viewGroupItem,
+      ...viewActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "view"
+      },
+      ...viewActions.map((action) => ({
+        source: "view",
+        target: action.id
+      }))
+    ]
+  };
+};
+
+// packages/plugins/experimental/plugin-script/src/hooks/useToolbarAction.ts
+import { useCallback as useCallback4 } from "react";
+import { log as log3 } from "@dxos/log";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-script/src/hooks/useToolbarAction.ts";
+var useToolbarAction = (props) => {
+  const handleTemplateSelect = useTemplateSelectHandler(props);
+  const handleFormat = useFormatHandler(props);
+  const handleDeploy = useDeployHandler(props);
+  const handleCopy = useCopyHandler(props);
+  return useCallback4((action) => {
+    switch (action.properties.type) {
+      case "template":
+        handleTemplateSelect(action.properties.value);
+        break;
+      case "view":
+        props.state.view = action.properties.value;
+        break;
+      case "format":
+        void handleFormat();
+        break;
+      case "deploy":
+        void handleDeploy();
+        break;
+      case "copy":
+        void handleCopy();
+        break;
+      default:
+        log3.error("Unknown action type", action, {
+          F: __dxlog_file3,
+          L: 49,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+    }
+  }, [
+    handleTemplateSelect,
+    handleFormat,
+    handleDeploy,
+    handleCopy
+  ]);
+};
+
+// packages/plugins/experimental/plugin-script/src/hooks/useToolbarState.ts
+import { useMemo as useMemo2 } from "react";
+import { create as create2 } from "@dxos/live-object";
+var useToolbarState = (initialState = {}) => {
+  return useMemo2(() => create2(initialState), []);
+};
+
+// packages/plugins/experimental/plugin-script/src/components/ScriptToolbar/ScriptToolbar.tsx
+var createToolbar = (state) => {
+  const templateSelect = createTemplateSelect();
+  const format2 = createFormat();
+  const gap = createGapSeparator();
+  const deploy = createDeploy(state);
+  const view = createView(state);
+  return {
+    nodes: [
+      ...templateSelect.nodes,
+      ...format2.nodes,
+      ...gap.nodes,
+      ...deploy.nodes,
+      ...view.nodes
+    ],
+    edges: [
+      ...templateSelect.edges,
+      ...format2.edges,
+      ...gap.edges,
+      ...deploy.edges,
+      ...view.edges
+    ]
+  };
+};
+var ScriptToolbar = ({ script, role, state, classNames }) => {
+  const handleAction = useToolbarAction({
+    state,
+    script
+  });
+  const toolbarCreator = useCallback5(() => createToolbar(state), [
+    state
+  ]);
+  const menu = useMenuActions(toolbarCreator);
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: stackItemContentToolbarClassNames(role)
+  }, /* @__PURE__ */ React.createElement(ElevationProvider, {
+    elevation: role === "section" ? "positioned" : "base"
+  }, /* @__PURE__ */ React.createElement(MenuProvider, {
+    ...menu,
+    onAction: handleAction,
+    attendableId: fullyQualifiedId(script)
+  }, /* @__PURE__ */ React.createElement(ToolbarMenu, {
+    classNames
+  }))));
+};
+
+// packages/plugins/experimental/plugin-script/src/components/TypescriptEditor/TypescriptEditor.tsx
+import { javascript } from "@codemirror/lang-javascript";
+import { defaultHighlightStyle } from "@codemirror/language";
+import { Prec } from "@codemirror/state";
+import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
+import { keymap } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+import { continueKeymap } from "@valtown/codemirror-continue";
+import { tsSync, tsFacet, tsLinter, tsAutocomplete, tsHover } from "@valtown/codemirror-ts";
+import React2 from "react";
+import { useThemeContext } from "@dxos/react-ui";
+import { autocomplete, createBasicExtensions, createThemeExtensions, editorFullWidth, editorMonospace, EditorView, folding, InputModeExtensions, useTextEditor } from "@dxos/react-ui-editor";
+import { isNonNullable } from "@dxos/util";
+var TypescriptEditor = ({ id, env, className, initialValue, extensions, scrollTo, selection, toolbar, inputMode = "vscode" }) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef, focusAttributes } = useTextEditor(() => ({
+    id,
+    initialValue,
+    extensions: [
+      extensions,
+      createBasicExtensions({
+        highlightActiveLine: true,
+        indentWithTab: true,
+        lineNumbers: true,
+        lineWrapping: false,
+        scrollPastEnd: true
+      }),
+      createThemeExtensions({
+        themeMode,
+        syntaxHighlighting: true,
+        slots: {
+          content: {
+            className: editorFullWidth
+          }
+        }
+      }),
+      // NOTE: Not using default editor gutter because folding for code works best right beside text.
+      EditorView.theme({
+        ".cm-gutters": {
+          // Match margin from content.
+          marginTop: "16px"
+        }
+      }),
+      InputModeExtensions[inputMode],
+      folding(),
+      // Continues block comments when you hit Enter.
+      Prec.high(keymap.of(continueKeymap)),
+      // TODO(burdon): Factor out.
+      [
+        editorMonospace,
+        javascript({
+          typescript: true
+        }),
+        // https://github.com/val-town/codemirror-ts
+        autocomplete({
+          override: env ? [
+            tsAutocomplete()
+          ] : []
+        }),
+        env ? [
+          tsFacet.of({
+            env,
+            path: `/src/${id}.ts`
+          }),
+          tsSync(),
+          tsLinter(),
+          tsHover({
+            renderTooltip: createTooltipRenderer(themeMode)
+          })
+        ] : []
+      ]
+    ].filter(isNonNullable),
+    selection,
+    scrollTo
+  }), [
+    id,
+    extensions,
+    themeMode,
+    inputMode,
+    selection,
+    scrollTo
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
+    ref: parentRef,
+    "data-toolbar": toolbar ? "enabled" : "disabled",
+    className,
+    ...focusAttributes
+  });
+};
+var createTooltipRenderer = (themeMode) => {
+  const theme = themeMode === "dark" ? oneDarkHighlightStyle : defaultHighlightStyle;
+  const classFromKind = (_kind) => {
+    const kind = _kind.endsWith("Name") ? "name" : _kind;
+    const validTag = kind in tags;
+    if (!validTag) {
+      return "";
+    }
+    const tag = tags[kind];
+    if (typeof tag === "function") {
+      return "";
+    }
+    return theme.style([
+      tag
+    ]) ?? "";
+  };
+  return (info) => {
+    const div = document.createElement("div");
+    div.className = "p-1 rounded border border-separator bg-baseSurface xs:max-w-80 max-w-lg";
+    if (info.quickInfo?.displayParts) {
+      for (const part of info.quickInfo.displayParts) {
+        const span = div.appendChild(document.createElement("span"));
+        span.className = classFromKind(part.kind);
+        span.innerText = part.text;
+      }
+    }
+    return {
+      dom: div
+    };
+  };
+};
+
+// packages/plugins/experimental/plugin-script/src/components/ScriptContainer.tsx
+var ScriptContainer = ({ role, classNames, script, settings = {
+  editorInputMode: "vscode"
+}, env }) => {
+  const identity = useIdentity();
+  const space = getSpace2(script);
+  const extensions = useMemo3(() => [
+    listener({
+      onChange: (text) => {
+        if (script.source.target && script.source.target.content !== text) {
+          script.changed = true;
+        }
+      }
+    }),
+    createDataExtensions({
+      id: script.id,
+      text: script.source.target && createDocAccessor(script.source.target, [
+        "content"
+      ]),
+      space,
+      identity
+    })
+  ], [
+    script,
+    script.source.target,
+    space,
+    identity
+  ]);
+  const state = useToolbarState({
+    view: "editor"
+  });
+  useDeployState({
+    state,
+    script
+  });
+  return /* @__PURE__ */ React3.createElement(StackItem.Content, {
+    toolbar: true
+  }, /* @__PURE__ */ React3.createElement(ScriptToolbar, {
+    state,
+    role,
+    script
+  }), /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: mx("flex flex-col w-full overflow-hidden divide-y divide-separator", classNames)
+  }, state.view !== "debug" && /* @__PURE__ */ React3.createElement(TypescriptEditor, {
+    id: script.id,
+    env,
+    initialValue: script.source?.target?.content,
+    extensions,
+    className: stackItemContentEditorClassNames(role),
+    inputMode: settings.editorInputMode,
+    toolbar: true
+  }), state.view !== "editor" && /* @__PURE__ */ React3.createElement(DebugPanel, {
+    functionUrl: state.functionUrl
+  })));
+};
+var ScriptContainer_default = ScriptContainer;
+export {
+  ScriptContainer,
+  ScriptContainer_default as default
+};
+//# sourceMappingURL=ScriptContainer-U3BFT76B.mjs.map