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

package/dist-webcomponent/src/Repl.d.ts

@@ -0,0 +1,14 @@
+import { Extension } from '@uiw/react-codemirror';
+import { PGlite } from '@electric-sql/pglite';
+
+export type ReplTheme = "light" | "dark" | "auto";
+export interface ReplProps {
+    pg: PGlite;
+    border?: boolean;
+    lightTheme?: Extension;
+    darkTheme?: Extension;
+    theme?: ReplTheme;
+    showTime?: boolean;
+    disableUpdateSchema?: boolean;
+}
+export declare function Repl({ pg, border, lightTheme, darkTheme, theme, showTime, disableUpdateSchema, }: ReplProps): import("react/jsx-runtime").JSX.Element;

package/dist-webcomponent/src-webcomponent/main.d.ts

@@ -0,0 +1,20 @@
+import { ReplProps, ReplTheme } from '../src/Repl';
+import { PGlite } from '@electric-sql/pglite';
+import { Extension } from '@uiw/react-codemirror';
+
+export type { ReplProps, ReplTheme };
+export declare class PGliteREPL extends HTMLElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(_name: string, oldValue: any, newValue: any): void;
+    disconnectedCallback(): void;
+    get pg(): PGlite | undefined;
+    set pg(pg: PGlite | undefined);
+    get lightTheme(): Extension | undefined;
+    set lightTheme(lightTheme: Extension | undefined);
+    get darkTheme(): Extension | undefined;
+    set darkTheme(darkTheme: Extension | undefined);
+    render(): void;
+}

package/dist-webcomponent/style.css

@@ -0,0 +1 @@
+.PGliteRepl-root{--fg: var(--PGliteRepl-foreground-color);--bg: var(--PGliteRepl-background-color);--border: var(--PGliteRepl-border);--border-color: var(--PGliteRepl-border-color);--font-size: var(--PGliteRepl-font-size, 12px);display:flex;flex-direction:column;height:100%;width:100%;font-size:var(--font-size);color:var(--fg);background-color:var(--bg)}.PGliteRepl-loading-msg{opacity:.5}.PGliteRepl-root table{font-size:var(--font-size)}.PGliteRepl-root-border{border:var(--border)}.PGliteRepl-output{flex:1;overflow-y:auto;padding:.5em 0 .5em .5em;border-bottom:var(--border)}.PGliteRepl-root hr{margin:.5em 0;border:none;border-top:var(--border)}.PGliteRepl-input{display:flex;min-height:60px;max-height:50%;width:100%}.PGliteRepl-input .cm-editor.cm-focused{outline:none}.PGliteRepl-input-loading{pointer-events:none}.PGliteRepl-table-scroll{overflow-x:auto}.PGliteRepl-table{border-collapse:collapse}.PGliteRepl-line{margin:0 0 0 1em;position:relative}.PGliteRepl-line:before{display:block;width:.7em;text-align:center;content:"❮";margin-right:.5em;color:var(--border-color);position:absolute;left:-1em}.PGliteRepl-line+.PGliteRepl-line{margin-top:.25em}.PGliteRepl-query{margin:0 0 .25em 1em}.PGliteRepl-query:before{content:"❯"}.PGliteRepl-table th{text-align:center;font-weight:600}.PGliteRepl-table td{text-align:left;max-width:400px;overflow:hidden;text-overflow:ellipsis}.PGliteRepl-table .PGliteRepl-number{text-align:right;font-variant-numeric:tabular-nums}.PGliteRepl-table .PGliteRepl-boolean{text-align:center}.PGliteRepl-table .PGliteRepl-json{font-family:monospace}.PGliteRepl-table th,.PGliteRepl-table td{padding:0 .2em;border:var(--border)}.PGliteRepl-divider{font-size:9px;display:flex;align-items:center;color:var(--border-color);padding-right:.5em}.PGliteRepl-divider hr{margin:0;flex-grow:1}.PGliteRepl-time{margin:0 .5em}.PGliteRepl-null{color:var(--border-color)}.PGliteRepl-error{color:#c33}.PGliteRepl-error:before{content:"!";color:#c33;font-weight:700}.PGliteRepl-table-row-count a{text-decoration:none}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@electric-sql/pglite-repl",
+  "version": "0.0.1-alpha.0",
+  "author": "Electric DB Limited",
+  "license": "Apache-2.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "dist-webcomponent"
+  ],
+  "module": "dist/Repl.js",
+  "exports": {
+    ".": {
+      "import": "./dist/Repl.js"
+    },
+    "./webcomponent": {
+      "import": "./dist-webcomponent/Repl.js"
+    }
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.16.2",
+    "@codemirror/commands": "^6.6.0",
+    "@codemirror/lang-sql": "^6.6.4",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/view": "^6.28.1",
+    "@uiw/codemirror-theme-xcode": "^4.22.2",
+    "@uiw/react-codemirror": "^4.22.2",
+    "psql-describe": "^0.1.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "@electric-sql/pglite": "^0.2.0-alpha.0"
+  },
+  "peerDependenciesMeta": {
+    "@electric-sql/pglite": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "terser": "^5.31.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-libcss": "^1.1.1",
+    "@electric-sql/pglite": "^0.2.0-alpha.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build:react": "tsc && vite build",
+    "build:webcomp": "vite build --config vite.webcomp.config.ts",
+    "build": "pnpm run build:react && pnpm run build:webcomp",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "format": "prettier --write ./src && prettier --write ./src-webcomponent"
+  }
+}