PGLite 反应组件

用于 PGlite 浏览器中的 REPL,或终端, 允许您在页面中与您的 WASM Postgres 交互会话 .

特征 :

• 作为 React.js 组件和 Web 组件可用
• 代码 输入编辑
• 自动完成,包括数据库中的表格和列名称
• 输入历史( 上下键)
• \d PSQL 命令( 通过 psql 描述(中文(简体) )

如何使用反应

npm install @electric-sql/pglite-repl

然后在一页中包含:

import { PGlite } from "@electric-sql/pglite";
import { Repl } from "@electric-sql/pglite-repl";

function MyComponent() {
  const pg = new PGlite();

  return <>
    <Repl pg={pg} />
  </>
}

道具给 <Repl> 组件由此接口描述 :

// The theme to use, auto is auto switching based on the system
type ReplTheme = "light" | "dark" | "auto";

interface ReplProps {
  pg: PGlite;  // PGlite db instance
  border?: boolean;  // Outer border on the component, defaults to false
  lightTheme?: Extension;
  darkTheme?: Extension;
  theme?: ReplTheme;  // Defaults to "auto"
}

这个 lightTheme 财务报告和审定财务报表 darkTheme 应为 反弹代码 主题.

如何用作网络组件

尽管PGlite REPL是用React来构建的,但它也作为网络组件提供,以方便地被收录到任何页面或其他框架中.

<script src="https://cdn.jsdelivr.net/npm/@electric-sql/pglite/dist-webcomponent/Repl.js" type="module"></script>

<!-- Include the Repl web component in your page -->
<pglite-repl id="repl"></pglite-repl>

<script type="module">
  import { PGlite } from "https://cdn.jsdelivr.net/npm/@electric-sql/pglite/dist/index.js";

  // Create a PGlite instance
  const pg = new PGlite();

  // Retrieve the Repl element
  const repl = document.getElementById('repl');

  // REPL to your PGlite instance
  repl.pg = pg;
</script>

发展

从软件包目录中检查此 repo :

# Install deps
pnpm install

# Run dev server
pnpm dev
# then open a browser to the url shown

# Build the lib
pnpm build