Nozbe / WatermelonDB

🍉 Reactive & asynchronous database for powerful React and React Native apps ⚡️
https://watermelondb.dev
MIT License
10.62k stars 600 forks source link

Is it possible to use wmdb in a browser extension? #1527

Open paul-rchds opened 1 year ago

paul-rchds commented 1 year ago

I am attempting to use wmdb in a chrome extension but am running into issues. Instantiating the database gives me a instance of a class of the name Database where the number seems to be random. This seems very odd to me and I don't know how the class name is changing. Then when I add the DatabaseProvider the following fails: https://github.com/Nozbe/WatermelonDB/blob/1097096122078a1efff6c56ac0ac3ceb4c1653e5/src/DatabaseProvider/index.js#L16

here is a simplified copy of my code, the code is running in a chrome extension popup.

export const schema = appSchema({
    version: 1,
    tables: [
        tableSchema({
            name: "posts",
            columns: [
                { name: "title", type: "string" },
                { name: "subtitle", type: "string", isOptional: true },
                { name: "body", type: "string" },
                { name: "is_pinned", type: "boolean" },
            ],
        }),
        tableSchema({
            name: "comments",
            columns: [
                { name: "body", type: "string" },
                { name: "post_id", type: "string", isIndexed: true },
            ],
        }),
    ],
})

class Post extends Model {
    static table = "posts"
    static associations = {
        comments: { type: "has_many", foreignKey: "post_id" },
    }
}

class Comment extends Model {
    static table = "comments"
    static associations = {
        posts: { type: "belongs_to", key: "post_id" },
    }
}

const adapter = new LokiJSAdapter({
    schema,
    useWebWorker: false,
    useIncrementalIndexedDB: true,
    dbName: "recall",
})

export const database = new Database({
    adapter,
    modelClasses: [Post, Comment],
})

const Popup: React.FC = () => {

    return (
        <DatabaseProvider database={database}>
            <App />
        </DatabaseProvider>
    )
}

Any help will be greatly appreciated as I have been trying to get this to work for hours.

radex commented 1 year ago

I think maybe the way you're bundling it is causing problems? what's your setup?

paul-rchds commented 1 year ago

I am using esbuild which is adding the numbers. Thanks for the tip.

zctocm commented 1 year ago

I'm also working on this and we also want to try WatermelonDB in our Chrome extension