Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request]: postgres.wasm, postgres.data, extension.tar.gz asset paths (Chrome Extension Use Case) #426

Open
f0rr0 opened this issue Nov 15, 2024 · 0 comments

Comments

@f0rr0
Copy link

f0rr0 commented Nov 15, 2024

Currently, Pglite does not provide a neat mechanism (or if it does, it is not well documented) to properly handle serving wasm or the tar.gz assets when building a Chrome extension. I encounter fetch errors because the required files are not found in the desired paths unless manually configured.

Given this:

import { OpfsAhpFS } from "@electric-sql/pglite/opfs-ahp";
import { PGlite } from "@electric-sql/pglite";
import { vector } from '@electric-sql/pglite/vector';

export const getDatabase = async () => {
  const pg = new PGlite({
    fs: new OpfsAhpFS('test.db'),
    extensions: { vector }
  });
  return pg;
};

To ensure the files are accessible, I need to use the following viteStaticCopy configuration:

viteStaticCopy({
  targets: [
    {
      src: "node_modules/@electric-sql/pglite/dist/postgres.wasm",
      dest: env.mode === "production" ? "assets" : "",
    },
    {
      src: "node_modules/@electric-sql/pglite/dist/postgres.data",
      dest: env.mode === "production" ? "assets" : "",
    },
    {
      src: "node_modules/@electric-sql/pglite/dist/vector.tar.gz",
      dest: "",
    },
  ],
}),

The worker importing the assets is present at ./assets/worker.js.

This workaround helps in making the necessary files available in the desired output paths, but it feels cumbersome and not as clean as it could be.

Suggestion:
An approach similar to what is used by web-tree-sitter may improve developer experience. The library solves for similar issues using a locateFile function, as documented here.

locateFile(scriptName: string, scriptDirectory: string) {
  return scriptName;
}

I am then able to do:

import webTreeSitterWasmUrl from "web-tree-sitter/tree-sitter.wasm?url";

await Parser.init({
    locateFile: () => webTreeSitterWasmUrl,
});

Would it be possible to either provide a built-in mechanism within Pglite to handle asset serving more cleanly or to document an approach that integrates better with bundlers such as Vite for building Chrome extensions?

@f0rr0 f0rr0 changed the title wasm / tar.gz asset paths (Chrome Extension Use Case) postgres.wasm / postgres.data / extension.tar.gz asset paths (Chrome Extension Use Case) Nov 15, 2024
@f0rr0 f0rr0 changed the title postgres.wasm / postgres.data / extension.tar.gz asset paths (Chrome Extension Use Case) postgres.wasm, postgres.data, extension.tar.gz asset paths (Chrome Extension Use Case) Nov 15, 2024
@f0rr0 f0rr0 changed the title postgres.wasm, postgres.data, extension.tar.gz asset paths (Chrome Extension Use Case) [Feature Request]: postgres.wasm, postgres.data, extension.tar.gz asset paths (Chrome Extension Use Case) Nov 15, 2024
@f0rr0 f0rr0 changed the title [Feature Request]: postgres.wasm, postgres.data, extension.tar.gz asset paths (Chrome Extension Use Case) [Feature Request]: postgres.wasm, postgres.data, extension.tar.gz asset paths (Chrome Extension Use Case) Nov 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants