@dxos/plugin-script 0.7.4-staging.f7e8224 → 0.7.5-labs.071a3e2

package/dist/lib/node/ScriptContainer-UI2MDBYG.cjs

@@ -0,0 +1,692 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ScriptContainer_UI2MDBYG_exports = {};
+__export(ScriptContainer_UI2MDBYG_exports, {
+  ScriptContainer: () => ScriptContainer,
+  default: () => ScriptContainer_default
+});
+module.exports = __toCommonJS(ScriptContainer_UI2MDBYG_exports);
+var import_chunk_T4TXCRN5 = require("./chunk-T4TXCRN5.cjs");
+var import_chunk_PKT5DD3O = require("./chunk-PKT5DD3O.cjs");
+var import_chunk_IID7WUQS = require("./chunk-IID7WUQS.cjs");
+var import_chunk_5UH3F7TA = require("./chunk-5UH3F7TA.cjs");
+var import_react = __toESM(require("react"));
+var import_echo = require("@dxos/react-client/echo");
+var import_halo = require("@dxos/react-client/halo");
+var import_react_ui_editor = require("@dxos/react-ui-editor");
+var import_react_ui_stack = require("@dxos/react-ui-stack");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_react2 = __toESM(require("react"));
+var import_echo2 = require("@dxos/react-client/echo");
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_editor2 = require("@dxos/react-ui-editor");
+var import_react_ui_menu = require("@dxos/react-ui-menu");
+var import_react3 = require("react");
+var import_functions = require("@dxos/functions");
+var import_log = require("@dxos/log");
+var import_react_client = require("@dxos/react-client");
+var import_echo3 = require("@dxos/react-client/echo");
+var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_menu2 = require("@dxos/react-ui-menu");
+var import_prettier = require("prettier");
+var import_estree = __toESM(require("prettier/plugins/estree"));
+var import_typescript = __toESM(require("prettier/plugins/typescript"));
+var import_react4 = require("react");
+var import_log2 = require("@dxos/log");
+var import_react_ui_menu3 = require("@dxos/react-ui-menu");
+var import_react5 = require("react");
+var import_functions2 = require("@dxos/functions");
+var import_live_object = require("@dxos/live-object");
+var import_react_ui_menu4 = require("@dxos/react-ui-menu");
+var import_react_ui_menu5 = require("@dxos/react-ui-menu");
+var import_react6 = require("react");
+var import_log3 = require("@dxos/log");
+var import_react7 = require("react");
+var import_live_object2 = require("@dxos/live-object");
+var import_lang_javascript = require("@codemirror/lang-javascript");
+var import_language = require("@codemirror/language");
+var import_state = require("@codemirror/state");
+var import_theme_one_dark = require("@codemirror/theme-one-dark");
+var import_view = require("@codemirror/view");
+var import_highlight = require("@lezer/highlight");
+var import_codemirror_continue = require("@valtown/codemirror-continue");
+var import_codemirror_ts = require("@valtown/codemirror-ts");
+var import_react8 = __toESM(require("react"));
+var import_react_ui3 = require("@dxos/react-ui");
+var import_react_ui_editor3 = require("@dxos/react-ui-editor");
+var import_util = require("@dxos/util");
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-script/src/hooks/deploy.ts";
+var createDeploy = (state) => {
+  const errorItem = (0, import_react_ui_menu2.createMenuAction)("error", {
+    label: state.error ?? [
+      "no error label",
+      {
+        ns: import_chunk_5UH3F7TA.SCRIPT_PLUGIN
+      }
+    ],
+    icon: "ph--warning-circle--regular",
+    hidden: !state.error
+  });
+  const deployAction = (0, import_react_ui_menu2.createMenuAction)("deploy", {
+    type: "deploy",
+    label: [
+      state.deploying ? "pending label" : "deploy label",
+      {
+        ns: import_chunk_5UH3F7TA.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 = (0, import_react_ui_menu2.createMenuAction)("copy", {
+    type: "copy",
+    label: [
+      "copy link label",
+      {
+        ns: import_chunk_5UH3F7TA.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 = (0, import_echo3.getSpace)(script);
+  const [fn] = (0, import_echo3.useQuery)(space, import_echo3.Filter.schema(import_functions.FunctionType, {
+    source: script
+  }));
+  const client = (0, import_react_client.useClient)();
+  const existingFunctionUrl = (0, import_react3.useMemo)(() => fn && (0, import_functions.getUserFunctionUrlInMetadata)((0, import_echo3.getMeta)(fn)), [
+    fn
+  ]);
+  return {
+    space,
+    fn,
+    client,
+    existingFunctionUrl
+  };
+};
+var useDeployState = ({ state, script }) => {
+  const { space, client, existingFunctionUrl } = useDeployDeps({
+    state,
+    script
+  });
+  (0, import_react3.useEffect)(() => {
+    if (!existingFunctionUrl) {
+      return;
+    }
+    state.functionUrl = (0, import_functions.getInvocationUrl)(existingFunctionUrl, client.config.values.runtime?.services?.edge?.url ?? "", {
+      spaceId: space?.id
+    });
+  }, [
+    existingFunctionUrl,
+    space
+  ]);
+  (0, import_react3.useEffect)(() => {
+    state.deployed = Boolean(existingFunctionUrl) && !script.changed;
+  }, [
+    script.changed,
+    existingFunctionUrl
+  ]);
+};
+var useDeployHandler = ({ state, script }) => {
+  const { space, fn, client, existingFunctionUrl } = useDeployDeps({
+    state,
+    script
+  });
+  const { t } = (0, import_react_ui2.useTranslation)(import_chunk_5UH3F7TA.SCRIPT_PLUGIN);
+  return (0, import_react3.useCallback)(async () => {
+    if (!script.source || !space) {
+      return;
+    }
+    state.error = void 0;
+    state.deploying = true;
+    try {
+      const existingFunctionId = existingFunctionUrl?.split("/").at(-1);
+      const bundler = new import_chunk_T4TXCRN5.Bundler({
+        platform: "browser",
+        sandboxedModules: [],
+        remoteModules: {}
+      });
+      const buildResult = await bundler.bundle(script.source.target.content);
+      if (buildResult.error || !buildResult.bundle) {
+        throw buildResult.error;
+      }
+      const { functionId, version, meta } = await (0, import_functions.uploadWorkerFunction)({
+        client,
+        spaceId: space.id,
+        version: fn ? (0, import_functions.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}`);
+      }
+      import_log.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((0, import_echo3.create)(import_functions.FunctionType, {
+        name: functionId,
+        version,
+        source: (0, import_echo3.makeRef)(script)
+      }));
+      script.changed = false;
+      deployedFunction.description = script.description;
+      if (meta.inputSchema) {
+        deployedFunction.inputSchema = meta.inputSchema;
+      } else {
+        import_log.log.verbose("no input schema in function metadata", {
+          functionId
+        }, {
+          F: __dxlog_file,
+          L: 138,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+      }
+      (0, import_functions.setUserFunctionUrlInMetadata)((0, import_echo3.getMeta)(deployedFunction), `/${space.id}/${functionId}`);
+      state.view = "split";
+    } catch (err) {
+      import_log.log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 145,
+        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 }) => (0, import_react3.useCallback)(async () => {
+  if (!state.functionUrl) {
+    return;
+  }
+  await navigator.clipboard.writeText(state.functionUrl);
+}, [
+  state.functionUrl
+]);
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-script/src/hooks/format.ts";
+var createFormat = () => {
+  const formatAction = (0, import_react_ui_menu3.createMenuAction)("format", {
+    label: [
+      "format label",
+      {
+        ns: import_chunk_5UH3F7TA.SCRIPT_PLUGIN
+      }
+    ],
+    icon: "ph--magic-wand--regular"
+  });
+  return {
+    nodes: [
+      formatAction
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "format"
+      }
+    ]
+  };
+};
+var useFormatHandler = ({ script }) => (0, import_react4.useCallback)(async () => {
+  if (!script.source) {
+    return;
+  }
+  try {
+    script.source.target.content = await (0, import_prettier.format)(script.source.target.content, {
+      parser: "typescript",
+      plugins: [
+        import_estree.default,
+        import_typescript.default
+      ],
+      semi: true,
+      singleQuote: true
+    });
+  } catch (err) {
+    import_log2.log.catch(err, void 0, {
+      F: __dxlog_file2,
+      L: 45,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+}, [
+  script.source
+]);
+var createTemplateSelectGroup = () => {
+  return (0, import_react_ui_menu4.createMenuItemGroup)("template-select", {
+    label: [
+      "template select group label",
+      {
+        ns: import_chunk_5UH3F7TA.SCRIPT_PLUGIN
+      }
+    ],
+    variant: "dropdownMenu"
+  });
+};
+var createTemplateSelectActions = () => {
+  return import_chunk_PKT5DD3O.templates.map((template) => {
+    return (0, import_react_ui_menu4.createMenuAction)(`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 (0, import_react5.useCallback)((templateId) => {
+    const template = import_chunk_PKT5DD3O.templates.find((template2) => template2.id === templateId);
+    if (template) {
+      script.name = template.name;
+      script.source.target.content = template.source;
+      const metaKeys = (0, import_live_object.getMeta)(script).keys;
+      const oldPresetIndex = metaKeys.findIndex((key) => key.source === import_functions2.FUNCTIONS_PRESET_META_KEY);
+      if (oldPresetIndex >= 0) {
+        metaKeys.splice(oldPresetIndex, 1);
+      }
+      if (template.presetId) {
+        metaKeys.push({
+          source: import_functions2.FUNCTIONS_PRESET_META_KEY,
+          id: template.presetId
+        });
+      }
+    }
+  }, [
+    script
+  ]);
+};
+var views = {
+  editor: "ph--code--regular",
+  split: "ph--square-split-vertical--regular",
+  debug: "ph--bug--regular"
+};
+var createViewGroupItem = (state) => {
+  return (0, import_react_ui_menu5.createMenuItemGroup)("view", {
+    label: [
+      "view group label",
+      {
+        ns: import_chunk_5UH3F7TA.SCRIPT_PLUGIN
+      }
+    ],
+    variant: "dropdownMenu",
+    applyActive: true,
+    value: state.view
+  });
+};
+var createViewActions = (state) => {
+  return Object.entries(views).map(([viewType, icon]) => {
+    return (0, import_react_ui_menu5.createMenuAction)(`view--${viewType}`, {
+      type: "view",
+      value: viewType,
+      label: [
+        `view ${viewType} label`,
+        {
+          ns: import_chunk_5UH3F7TA.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
+      }))
+    ]
+  };
+};
+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 (0, import_react6.useCallback)((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:
+        import_log3.log.error("Unknown action type", action, {
+          F: __dxlog_file3,
+          L: 49,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+    }
+  }, [
+    handleTemplateSelect,
+    handleFormat,
+    handleDeploy,
+    handleCopy
+  ]);
+};
+var useToolbarState = (initialState = {}) => {
+  return (0, import_react7.useMemo)(() => (0, import_live_object2.create)(initialState), []);
+};
+var createToolbar = (state) => {
+  const templateSelect = createTemplateSelect();
+  const format2 = createFormat();
+  const gap = (0, import_react_ui_menu.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 = (0, import_react2.useCallback)(() => createToolbar(state), [
+    state
+  ]);
+  const menu = (0, import_react_ui_menu.useMenuActions)(toolbarCreator);
+  return /* @__PURE__ */ import_react2.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_editor2.stackItemContentToolbarClassNames)(role)
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.ElevationProvider, {
+    elevation: role === "section" ? "positioned" : "base"
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_menu.MenuProvider, {
+    ...menu,
+    onAction: handleAction,
+    attendableId: (0, import_echo2.fullyQualifiedId)(script)
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_menu.ToolbarMenu, {
+    classNames
+  }))));
+};
+var TypescriptEditor = ({ id, env, className, initialValue, extensions, scrollTo, selection, toolbar, inputMode = "vscode" }) => {
+  const { themeMode } = (0, import_react_ui3.useThemeContext)();
+  const { parentRef, focusAttributes } = (0, import_react_ui_editor3.useTextEditor)(() => ({
+    id,
+    initialValue,
+    extensions: [
+      extensions,
+      (0, import_react_ui_editor3.createBasicExtensions)({
+        highlightActiveLine: true,
+        indentWithTab: true,
+        lineNumbers: true,
+        lineWrapping: false,
+        scrollPastEnd: true
+      }),
+      (0, import_react_ui_editor3.createThemeExtensions)({
+        themeMode,
+        syntaxHighlighting: true,
+        slots: {
+          content: {
+            className: import_react_ui_editor3.editorFullWidth
+          }
+        }
+      }),
+      // NOTE: Not using default editor gutter because folding for code works best right beside text.
+      import_react_ui_editor3.EditorView.theme({
+        ".cm-gutters": {
+          // Match margin from content.
+          marginTop: "16px"
+        }
+      }),
+      import_react_ui_editor3.InputModeExtensions[inputMode],
+      (0, import_react_ui_editor3.folding)(),
+      // Continues block comments when you hit Enter.
+      import_state.Prec.high(import_view.keymap.of(import_codemirror_continue.continueKeymap)),
+      // TODO(burdon): Factor out.
+      [
+        import_react_ui_editor3.editorMonospace,
+        (0, import_lang_javascript.javascript)({
+          typescript: true
+        }),
+        // https://github.com/val-town/codemirror-ts
+        (0, import_react_ui_editor3.autocomplete)({
+          override: env ? [
+            (0, import_codemirror_ts.tsAutocomplete)()
+          ] : []
+        }),
+        env ? [
+          import_codemirror_ts.tsFacet.of({
+            env,
+            path: `/src/${id}.ts`
+          }),
+          (0, import_codemirror_ts.tsSync)(),
+          (0, import_codemirror_ts.tsLinter)(),
+          (0, import_codemirror_ts.tsHover)({
+            renderTooltip: createTooltipRenderer(themeMode)
+          })
+        ] : []
+      ]
+    ].filter(import_util.nonNullable),
+    selection,
+    scrollTo
+  }), [
+    id,
+    extensions,
+    themeMode,
+    inputMode,
+    selection,
+    scrollTo
+  ]);
+  return /* @__PURE__ */ import_react8.default.createElement("div", {
+    ref: parentRef,
+    "data-toolbar": toolbar ? "enabled" : "disabled",
+    className,
+    ...focusAttributes
+  });
+};
+var createTooltipRenderer = (themeMode) => {
+  const theme = themeMode === "dark" ? import_theme_one_dark.oneDarkHighlightStyle : import_language.defaultHighlightStyle;
+  const classFromKind = (_kind) => {
+    const kind = _kind.endsWith("Name") ? "name" : _kind;
+    const validTag = kind in import_highlight.tags;
+    if (!validTag) {
+      return "";
+    }
+    const tag = import_highlight.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
+    };
+  };
+};
+var ScriptContainer = ({ role, classNames, script, settings = {
+  editorInputMode: "vscode"
+}, env }) => {
+  const identity = (0, import_halo.useIdentity)();
+  const space = (0, import_echo.getSpace)(script);
+  const extensions = (0, import_react.useMemo)(() => [
+    (0, import_react_ui_editor.listener)({
+      onChange: (text) => {
+        if (script.source.target && script.source.target.content !== text) {
+          script.changed = true;
+        }
+      }
+    }),
+    (0, import_react_ui_editor.createDataExtensions)({
+      id: script.id,
+      text: script.source.target && (0, import_echo.createDocAccessor)(script.source.target, [
+        "content"
+      ]),
+      space,
+      identity
+    })
+  ], [
+    script,
+    script.source.target,
+    space,
+    identity
+  ]);
+  const state = useToolbarState({
+    view: "editor"
+  });
+  useDeployState({
+    state,
+    script
+  });
+  return /* @__PURE__ */ import_react.default.createElement(import_react_ui_stack.StackItem.Content, {
+    toolbar: true
+  }, /* @__PURE__ */ import_react.default.createElement(ScriptToolbar, {
+    state,
+    role,
+    script
+  }), /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme.mx)("flex flex-col w-full overflow-hidden divide-y divide-separator", classNames)
+  }, state.view !== "debug" && /* @__PURE__ */ import_react.default.createElement(TypescriptEditor, {
+    id: script.id,
+    env,
+    initialValue: script.source?.target?.content,
+    extensions,
+    className: (0, import_react_ui_editor.stackItemContentEditorClassNames)(role),
+    inputMode: settings.editorInputMode,
+    toolbar: true
+  }), state.view !== "editor" && /* @__PURE__ */ import_react.default.createElement(import_chunk_IID7WUQS.DebugPanel, {
+    functionUrl: state.functionUrl
+  })));
+};
+var ScriptContainer_default = ScriptContainer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ScriptContainer
+});
+//# sourceMappingURL=ScriptContainer-UI2MDBYG.cjs.map