@electric-sql/pglite-repl 0.0.1-alpha.0

package/dist/Repl.js

@@ -0,0 +1,726 @@
+import './style.css';
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { defaultKeymap } from "@codemirror/commands";
+import { keymap } from "@codemirror/view";
+import { PostgreSQL, schemaCompletionSource, keywordCompletionSource } from "@codemirror/lang-sql";
+import { LanguageSupport } from "@codemirror/language";
+import { describe } from "psql-describe";
+import { xcodeLight, xcodeDark } from "@uiw/codemirror-theme-xcode";
+const describeCompletions = [
+  {
+    label: "\\d",
+    type: "function",
+    displayLabel: "\\d[S+] [ pattern ]",
+    detail: "PSQL Describe"
+  },
+  {
+    label: "\\da",
+    type: "function",
+    displayLabel: "\\da[S] [ pattern ]",
+    detail: "Lists aggregate functions"
+  },
+  {
+    label: "\\dA",
+    type: "function",
+    displayLabel: "\\dA[+] [ pattern ]",
+    detail: "Lists access methods"
+  },
+  {
+    label: "\\dAc",
+    type: "function",
+    displayLabel: "\\dAc[+] [access-method-pattern [input-type-pattern]]",
+    detail: "Lists operator classes"
+  },
+  {
+    label: "\\dAf",
+    type: "function",
+    displayLabel: "\\dAf[+] [access-method-pattern [input-type-pattern]]",
+    detail: "Lists operator families"
+  },
+  {
+    label: "\\dAo",
+    type: "function",
+    displayLabel: "\\dAo[+] [access-method-pattern [operator-family-pattern]]",
+    detail: "Lists operators associated with operator families"
+  },
+  {
+    label: "\\dAp",
+    type: "function",
+    displayLabel: "\\dAp[+] [access-method-pattern [operator-family-pattern]]",
+    detail: "Lists support functions associated with operator families"
+  },
+  {
+    label: "\\db",
+    type: "function",
+    displayLabel: "\\db[+] [ pattern ]",
+    detail: "Lists tablespaces"
+  },
+  {
+    label: "\\dc",
+    type: "function",
+    displayLabel: "\\dc[S+] [ pattern ]",
+    detail: "Lists conversions between character-set encodings"
+  },
+  {
+    label: "\\dconfig",
+    type: "function",
+    displayLabel: "\\dconfig[+] [ pattern ]",
+    detail: "Lists server configuration parameters and their values"
+  },
+  {
+    label: "\\dC",
+    type: "function",
+    displayLabel: "\\dC[+] [ pattern ]",
+    detail: "Lists type casts"
+  },
+  {
+    label: "\\dd",
+    type: "function",
+    displayLabel: "\\dd[S] [ pattern ]",
+    detail: "Shows the descriptions of objects of type constraint, operator class, operator family, rule, and trigger"
+  },
+  {
+    label: "\\dD",
+    type: "function",
+    displayLabel: "\\dD[S+] [ pattern ]",
+    detail: "Lists domains"
+  },
+  {
+    label: "\\ddp",
+    type: "function",
+    displayLabel: "\\ddp [ pattern ]",
+    detail: "Lists default access privilege settings"
+  },
+  {
+    label: "\\dE",
+    type: "function",
+    displayLabel: "\\dE[S+] [ pattern ]",
+    detail: "Lists foreign tables"
+  },
+  {
+    label: "\\di",
+    type: "function",
+    displayLabel: "\\di[S+] [ pattern ]",
+    detail: "Lists indexes"
+  },
+  {
+    label: "\\dm",
+    type: "function",
+    displayLabel: "\\dm[S+] [ pattern ]",
+    detail: "Lists materialized views"
+  },
+  {
+    label: "\\ds",
+    type: "function",
+    displayLabel: "\\ds[S+] [ pattern ]",
+    detail: "Lists sequences"
+  },
+  {
+    label: "\\dt",
+    type: "function",
+    displayLabel: "\\dt[S+] [ pattern ]",
+    detail: "Lists tables"
+  },
+  {
+    label: "\\dv",
+    type: "function",
+    displayLabel: "\\dv[S+] [ pattern ]",
+    detail: "Lists views"
+  },
+  {
+    label: "\\des",
+    type: "function",
+    displayLabel: "\\des[+] [ pattern ]",
+    detail: "Lists foreign servers"
+  },
+  {
+    label: "\\det",
+    type: "function",
+    displayLabel: "\\det[+] [ pattern ]",
+    detail: "Lists foreign tables"
+  },
+  {
+    label: "\\deu",
+    type: "function",
+    displayLabel: "\\deu[+] [ pattern ]",
+    detail: "Lists user mappings"
+  },
+  {
+    label: "\\dew",
+    type: "function",
+    displayLabel: "\\dew[+] [ pattern ]",
+    detail: "Lists foreign-data wrappers"
+  },
+  {
+    label: "\\df",
+    type: "function",
+    displayLabel: "\\df[anptwS+] [ pattern [ arg_pattern ... ] ]",
+    detail: "Lists functions"
+  },
+  {
+    label: "\\dF",
+    type: "function",
+    displayLabel: "\\dF[+] [ pattern ]",
+    detail: "Lists text search configurations"
+  },
+  {
+    label: "\\dFd",
+    type: "function",
+    displayLabel: "\\dFd[+] [ pattern ]",
+    detail: "Lists text search dictionaries"
+  },
+  {
+    label: "\\dFp",
+    type: "function",
+    displayLabel: "\\dFp[+] [ pattern ]",
+    detail: "Lists text search parsers"
+  },
+  {
+    label: "\\dFt",
+    type: "function",
+    displayLabel: "\\dFt[+] [ pattern ]",
+    detail: "Lists text search templates"
+  },
+  {
+    label: "\\dg",
+    type: "function",
+    displayLabel: "\\dg[S+] [ pattern ]",
+    detail: "Lists database roles"
+  },
+  {
+    label: "\\dl",
+    type: "function",
+    displayLabel: "\\dl[+] ",
+    detail: "List large objects"
+  },
+  {
+    label: "\\dL",
+    type: "function",
+    displayLabel: "\\dL[S+] [ pattern ]",
+    detail: "Lists procedural languages"
+  },
+  {
+    label: "\\dn",
+    type: "function",
+    displayLabel: "\\dn[S+] [ pattern ]",
+    detail: "Lists schemas"
+  },
+  {
+    label: "\\do",
+    type: "function",
+    displayLabel: "\\do[S+] [ pattern [ arg_pattern [ arg_pattern ] ] ]",
+    detail: "Lists operators with their operand and result types"
+  },
+  {
+    label: "\\dO",
+    type: "function",
+    displayLabel: "\\dO[S+] [ pattern ]",
+    detail: "Lists collations"
+  },
+  {
+    label: "\\dp",
+    type: "function",
+    displayLabel: "\\dp[S] [ pattern ]",
+    detail: "Lists tables, views and sequences with their associated access privileges"
+  },
+  {
+    label: "\\dP",
+    type: "function",
+    displayLabel: "\\dP[itn+] [ pattern ]",
+    detail: "Lists partitioned relations"
+  },
+  {
+    label: "\\drds",
+    type: "function",
+    displayLabel: "\\drds [ role-pattern [ database-pattern ] ]",
+    detail: "Lists defined configuration settings"
+  },
+  {
+    label: "\\drg",
+    type: "function",
+    displayLabel: "\\drg[S] [ pattern ]",
+    detail: "Lists information about each granted role membership"
+  },
+  {
+    label: "\\dRp",
+    type: "function",
+    displayLabel: "\\dRp[+] [ pattern ]",
+    detail: "Lists replication publications"
+  },
+  {
+    label: "\\dRs",
+    type: "function",
+    displayLabel: "\\dRs[+] [ pattern ]",
+    detail: "Lists replication subscriptions"
+  },
+  {
+    label: "\\dT",
+    type: "function",
+    displayLabel: "\\dT[S+] [ pattern ]",
+    detail: "Lists data types"
+  },
+  {
+    label: "\\du",
+    type: "function",
+    displayLabel: "\\du[S+] [ pattern ]",
+    detail: "Lists database roles"
+  },
+  {
+    label: "\\dx",
+    type: "function",
+    displayLabel: "\\dx[+] [ pattern ]",
+    detail: "Lists installed extensions"
+  },
+  {
+    label: "\\dX",
+    type: "function",
+    displayLabel: "\\dX [ pattern ]",
+    detail: "Lists extended statistics"
+  },
+  {
+    label: "\\dy",
+    type: "function",
+    displayLabel: "\\dy[+] [ pattern ]",
+    detail: "Lists event triggers"
+  }
+];
+function describeCompletionsAutoComplete(context) {
+  const word = context.matchBefore(/\\\w*/);
+  if (!word || word.from === word.to) return null;
+  return {
+    from: word.from,
+    options: describeCompletions
+  };
+}
+function makeSqlExt(config = {}) {
+  let lang = config.dialect || PostgreSQL;
+  return new LanguageSupport(lang.language, [
+    // schemaCompletion(config),
+    config.schema ? lang.language.data.of({
+      autocomplete: schemaCompletionSource(config)
+    }) : [],
+    // keywordCompletion(lang, !!config.upperCaseKeywords)
+    lang.language.data.of({
+      autocomplete: keywordCompletionSource(lang, !!config.upperCaseKeywords)
+    }),
+    lang.language.data.of({
+      autocomplete: describeCompletionsAutoComplete
+    })
+  ]);
+}
+async function runQuery(query, pg) {
+  if (query.trim().toLowerCase().startsWith("\\")) {
+    return runDescribe(query, pg);
+  }
+  const start = performance.now();
+  try {
+    const result = await pg.exec(query, {
+      rowMode: "array"
+    });
+    const elapsed = performance.now() - start;
+    return {
+      query,
+      results: result,
+      time: elapsed
+    };
+  } catch (err) {
+    return {
+      query,
+      error: err.message,
+      time: performance.now() - start
+    };
+  }
+}
+async function runDescribe(query, pg) {
+  const start = performance.now();
+  let out;
+  let ret;
+  const { promise, cancel: _cancel } = describe(
+    query,
+    "postgres",
+    async (sql) => {
+      ret = (await pg.exec(sql, { rowMode: "array" }))[0];
+      return {
+        rows: ret.rows,
+        fields: ret.fields,
+        rowCount: ret.rows.length
+      };
+    },
+    (output) => {
+      out = output;
+    }
+  );
+  await promise;
+  const elapsed = performance.now() - start;
+  if (!out) {
+    return {
+      query,
+      error: "No output",
+      time: elapsed
+    };
+  } else if (typeof out === "string") {
+    if (out.startsWith("ERROR:")) {
+      return {
+        query,
+        error: out,
+        time: elapsed
+      };
+    } else {
+      return {
+        query,
+        text: out,
+        time: elapsed
+      };
+    }
+  } else {
+    return {
+      query,
+      text: out.title,
+      results: [ret],
+      time: elapsed
+    };
+  }
+}
+async function getSchema(pg) {
+  const ret = await pg.query(`
+    SELECT 
+      table_schema AS schema,
+      table_name AS table,
+      array_agg(column_name) AS columns
+    FROM 
+      information_schema.columns
+    GROUP BY 
+      table_schema, table_name
+    ORDER BY 
+      table_schema, table_name;
+  `);
+  const schema = {};
+  for (const row of ret.rows) {
+    schema[`${row.schema}.${row.table}`] = Array.isArray(row.columns) ? row.columns : row.columns.slice(1, -1).split(",");
+  }
+  return schema;
+}
+const tableRowIncrement = 100;
+const maxCellLength = 200;
+function cellClass(value) {
+  if (value === null) {
+    return "PGliteRepl-null";
+  } else if (typeof value === "number") {
+    return "PGliteRepl-number";
+  } else if (typeof value === "boolean") {
+    return "PGliteRepl-boolean";
+  } else {
+    return "";
+  }
+}
+function cellValue(value) {
+  let str;
+  if (value === null) {
+    str = "null";
+  } else if (typeof value === "number") {
+    str = value.toString();
+  } else if (typeof value === "boolean") {
+    str = value ? "true" : "false";
+  } else if (value instanceof Date) {
+    str = value.toISOString();
+  } else if (Array.isArray(value)) {
+    str = `[${value.map(cellValue).join(", ")}]`;
+  } else if (typeof value === "object") {
+    str = JSON.stringify(value);
+  } else if (ArrayBuffer.isView(value)) {
+    str = `${value.byteLength} bytes`;
+  } else {
+    str = value.toString();
+  }
+  return str.length > maxCellLength ? str.slice(0, maxCellLength) + "…" : str;
+}
+function ReplTable({ result }) {
+  const [maxRows, setMaxRows] = useState(tableRowIncrement);
+  const rows = result.rows.slice(0, maxRows);
+  useEffect(() => {
+    setMaxRows(tableRowIncrement);
+  }, [result]);
+  const showMore = () => {
+    setMaxRows((prev) => prev + tableRowIncrement);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "PGliteRepl-table-scroll", children: /* @__PURE__ */ jsxs("table", { className: "PGliteRepl-table", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: result.fields.map((col, i) => /* @__PURE__ */ jsx("th", { children: col.name }, i)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx("tr", { children: row.map((col, j) => /* @__PURE__ */ jsx("td", { className: cellClass(col), children: cellValue(col) }, j)) }, i)) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "PGliteRepl-table-row-count", children: [
+      result.rows.length > maxRows ? `${maxRows} of ` : "",
+      result.rows.length,
+      " rows",
+      " ",
+      result.rows.length > maxRows && /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "",
+          onClick: (e) => {
+            e.preventDefault();
+            showMore();
+          },
+          children: "Show more"
+        }
+      )
+    ] })
+  ] });
+}
+function OutLine({ result }) {
+  return /* @__PURE__ */ jsx("div", { className: "PGliteRepl-line", children: result.fields.length > 0 ? /* @__PURE__ */ jsx(ReplTable, { result }) : /* @__PURE__ */ jsx("div", { className: "PGliteRepl-null", children: "null" }) });
+}
+function ReplResponse({
+  response,
+  showTime
+}) {
+  var _a;
+  let out;
+  if (response.error) {
+    out = /* @__PURE__ */ jsx("div", { className: "PGliteRepl-line PGliteRepl-error", children: response.error });
+  } else {
+    out = /* @__PURE__ */ jsx(Fragment, { children: (_a = response.results) == null ? void 0 : _a.map((result, i) => /* @__PURE__ */ jsx(OutLine, { result }, i)) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("pre", { className: "PGliteRepl-line PGliteRepl-query", children: response.query }),
+    response.text && /* @__PURE__ */ jsx("div", { className: "PGliteRepl-line PGliteRepl-text", children: response.text }),
+    out,
+    /* @__PURE__ */ jsxs("div", { className: "PGliteRepl-divider", children: [
+      /* @__PURE__ */ jsx("hr", {}),
+      showTime && /* @__PURE__ */ jsxs("div", { className: "PGliteRepl-time", children: [
+        response.time.toFixed(1),
+        "ms"
+      ] })
+    ] })
+  ] });
+}
+const baseKeymap = defaultKeymap.filter((key) => key.key !== "Enter");
+function Repl({
+  pg,
+  border = false,
+  lightTheme = xcodeLight,
+  darkTheme = xcodeDark,
+  theme = "auto",
+  showTime = false,
+  disableUpdateSchema = false
+}) {
+  const [value, setValue] = useState("");
+  const valueNoHistory = useRef("");
+  const [loading, setLoading] = useState(true);
+  const [output, setOutput] = useState([]);
+  const outputRef = useRef(null);
+  const [schema, setSchema] = useState({});
+  const historyPos = useRef(-1);
+  const rcm = useRef(null);
+  const [themeToUse, setThemeToUse] = useState(
+    theme === "dark" ? darkTheme : lightTheme
+  );
+  const [styles, setStyles] = useState({});
+  useEffect(() => {
+    let ignore = false;
+    const init = async () => {
+      await pg.waitReady;
+      if (ignore) return;
+      setLoading(false);
+    };
+    setLoading(true);
+    init();
+    return () => {
+      ignore = true;
+    };
+  }, [pg]);
+  useEffect(() => {
+    if (theme === "auto") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      setThemeToUse(systemTheme === "dark" ? darkTheme : lightTheme);
+      const listener = (e) => {
+        setThemeToUse(e.matches ? darkTheme : lightTheme);
+        setTimeout(() => {
+          extractStyles();
+        }, 0);
+      };
+      window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", listener);
+      return () => {
+        window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", listener);
+      };
+    } else {
+      setThemeToUse(theme === "dark" ? darkTheme : lightTheme);
+      setTimeout(() => {
+        extractStyles();
+      }, 0);
+    }
+  }, [theme, lightTheme, darkTheme]);
+  const onChange = useCallback((val, _viewUpdate) => {
+    extractStyles();
+    setValue(val);
+    if (historyPos.current === -1) {
+      valueNoHistory.current = val;
+    }
+  }, []);
+  const extensions = useMemo(
+    () => [
+      keymap.of([
+        {
+          key: "Enter",
+          preventDefault: true,
+          run: () => {
+            if (value.trim() === "") return false;
+            runQuery(value, pg).then((response) => {
+              setOutput((prev) => [...prev, response]);
+              if (outputRef.current) {
+                setTimeout(() => {
+                  outputRef.current.scrollTop = outputRef.current.scrollHeight;
+                }, 0);
+              }
+              if (!disableUpdateSchema) {
+                getSchema(pg).then(setSchema);
+              }
+            });
+            historyPos.current = -1;
+            valueNoHistory.current = "";
+            setValue("");
+            return true;
+          }
+        },
+        {
+          key: "ArrowUp",
+          run: (view) => {
+            const state = view.state;
+            const cursorLine = state.doc.lineAt(
+              state.selection.main.head
+            ).number;
+            if (cursorLine === 1) {
+              const currentPos = historyPos.current;
+              historyPos.current++;
+              if (historyPos.current >= output.length) {
+                historyPos.current = output.length - 1;
+              }
+              if (historyPos.current < -1) {
+                historyPos.current = -1;
+              }
+              if (historyPos.current === currentPos) return true;
+              if (historyPos.current === -1) {
+                setValue(valueNoHistory.current);
+              } else {
+                setValue(output[output.length - historyPos.current - 1].query);
+              }
+              return true;
+            }
+            return false;
+          }
+        },
+        {
+          key: "ArrowDown",
+          run: (view) => {
+            const state = view.state;
+            const cursorLine = state.doc.lineAt(
+              state.selection.main.head
+            ).number;
+            const lastLine = state.doc.lines;
+            if (cursorLine === lastLine) {
+              const currentPos = historyPos.current;
+              historyPos.current--;
+              if (historyPos.current >= output.length) {
+                historyPos.current = output.length - 1;
+              }
+              if (historyPos.current < -1) {
+                historyPos.current = -1;
+              }
+              if (historyPos.current === currentPos) return true;
+              if (historyPos.current === -1) {
+                setValue(valueNoHistory.current);
+              } else {
+                setValue(output[output.length - historyPos.current - 1].query);
+              }
+              return true;
+            }
+            return false;
+          }
+        },
+        ...baseKeymap
+      ]),
+      makeSqlExt({
+        dialect: PostgreSQL,
+        schema,
+        tables: [
+          {
+            label: "d",
+            displayLabel: "\\d"
+          }
+        ],
+        defaultSchema: "public"
+      })
+    ],
+    [pg, schema, value, output]
+  );
+  const extractStyles = () => {
+    var _a;
+    const cmEditorEl = (_a = rcm.current) == null ? void 0 : _a.editor.querySelector(".cm-editor");
+    const gutterEl = cmEditorEl.querySelector(".cm-gutters");
+    const cmEditorElComputedStyles = window.getComputedStyle(cmEditorEl);
+    const foregroundColor = cmEditorElComputedStyles.color;
+    const backgroundColor = cmEditorElComputedStyles.backgroundColor;
+    const gutterElComputedStyles = window.getComputedStyle(gutterEl);
+    const gutterBorder = gutterElComputedStyles.borderRight;
+    const borderWidth = parseInt(gutterElComputedStyles.borderRightWidth) || 0;
+    const borderColor = borderWidth ? gutterElComputedStyles.borderRightColor : foregroundColor.replace("rgb", "rgba").replace(")", ", 0.15)");
+    const border2 = borderWidth ? gutterElComputedStyles.borderRight : `1px solid ${borderColor}`;
+    setStyles({
+      "--PGliteRepl-foreground-color": foregroundColor,
+      "--PGliteRepl-background-color": backgroundColor,
+      "--PGliteRepl-border": border2,
+      "--PGliteRepl-gutter-border": gutterBorder,
+      "--PGliteRepl-border-color": borderColor
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `
+      PGliteRepl-root
+      ${border ? "PGliteRepl-root-border" : ""}
+    `,
+      style: styles,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "PGliteRepl-output",
+            ref: (ref) => outputRef.current = ref,
+            children: [
+              loading && /* @__PURE__ */ jsx("div", { className: "PGliteRepl-loading-msg", children: "Loading..." }),
+              output.map((response, i) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ReplResponse, { response: response || [], showTime }) }, i))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CodeMirror,
+          {
+            ref: rcm,
+            className: `PGliteRepl-input ${loading ? "PGliteRepl-input-loading" : ""}`,
+            width: "100%",
+            value,
+            basicSetup: {
+              defaultKeymap: false
+            },
+            extensions,
+            theme: themeToUse,
+            onChange,
+            editable: !loading,
+            onCreateEditor: () => {
+              extractStyles();
+              setTimeout(extractStyles, 0);
+              getSchema(pg).then(setSchema);
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Repl
+};
+//# sourceMappingURL=Repl.js.map