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

Typescript + Angular (webpack) #52

Open
HarelM opened this issue Nov 26, 2018 · 4 comments
Open

Typescript + Angular (webpack) #52

HarelM opened this issue Nov 26, 2018 · 4 comments

Comments

@HarelM
Copy link

HarelM commented Nov 26, 2018

I have an issue with pouch db that causes the UI thread to be sluggish when using put().
I was hoping to use this plugin to fix this.
I had issues make PouchDB work and I hope this isn't the root cause.

  1. in tsconfig.json add "allowSyntheticDefaultImports": true
  2. import PouchDB from "pouchdb";
  3. let db = new PouchDB("db");
    So far the original setup which works on the UI thread.
    Now when doing the following
...
import "worker-pouch";
...
let db= new PouchDB("db", { adapter: "worker" });

I'm getting an error: Invalid Adapter: worker
When using:

var PouchDB = require('pouchdb');
PouchDB.adapter('worker', require('worker-pouch'));

I'm getting an error: PouchDB.adapter is not a function

I've also tried with PouchDB.plugin(require('worker-pouch')) but it didn't work too, something with immutable...

Help would be appreciated, I'm probably missing a simple thing...

@dschnelldavis
Copy link

I'm pretty sure "PouchDB.adapter is not a function" is a TypeScript compilation error caused by the @types/pouchdb definitions for PouchDB, which don't appear to include a definition for "adapter".

The correct long-term fix is to update @types/pouchdb and add the adapter definition.

In the meantime, as a crude short-term band-aid fix, you can temporarily bypass type checking, like so:

import PouchDB from 'pouchdb-browser';
import WorkerPouch from 'worker-pouch';
(<any>PouchDB).adapter('worker', WorkerPouch);

or, for other people who have "allowSyntheticDefaultImports" = false:

import * as PouchDB from 'pouchdb-browser';
import * as WorkerPouch from 'worker-pouch';
(<any>PouchDB).adapter('worker', WorkerPouch);

@HarelM
Copy link
Author

HarelM commented Nov 28, 2018

I'm not sure it uses the workers but here's the code that I managed to make it run without errors:
https://stackblitz.com/edit/angular-worker-pouch
When using import * as PouchDB from 'pouchdb-browser';
I'm getting an error: PouchDB is not a constructor, probably something I'm getting wrong with all this import syntax... :-/
I don't see any reference to worker adapter when creating the database and adding {adapter: "worker"} fails...
I'll test it tonight in my application to make sure it does work with the workers.

I would recommend adding all this info above to the readme.md file to help other developers using this package easily :-)

Thanks for the quick response!

@HarelM
Copy link
Author

HarelM commented Nov 28, 2018

Ok, I think I managed to make it work without the import * as...:
https://stackblitz.com/edit/angular-worker-pouch-working?file=src/app/app.module.ts
Although, when running it for the first time and error is written to the console although I have a error handler for the promise... not sure if this is stackblitz specific or not...

@HarelM
Copy link
Author

HarelM commented Nov 29, 2018

I now see that issue #50 describes the error I'm seeing.
In any case, the only change I would make to the documentation is just the entire code that need to run in order to make this package work - even the following stackblitz link in the docs can show someone who just got here how to use the package.
The bare minimum would be to add the var db = new PouchDB("db", { adapter: "worker"}) to the section: Setup via Browserify/Webpack/etc.
I understood from reading it that you only need to code the two lines that are there, I might be dumb, but I'm probably not the only one :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants