search

jakearchibald / idb

IndexedDB, but with promises
https://www.npmjs.com/package/idb
ISC License
6.29k stars 353 forks source link

Basic html/javascript installation Issue #208

Closed mjoycemilburn closed 3 years ago

mjoycemilburn commented 3 years ago

Following the "Using external script reference" "Directly In a browser" installation instructions gives me an "openDB is not defined" error when I run the "Article store" example in Chrome.

Now, this is probably down to my minimal Javascript skills but, even so, I'd be very grateful if you could put me straight as I can't see that I've done anything completely stupid. (for once at least).

Looking at the code for the library and playing around with the Chrome console I could see that openDB was defined as a method on idb. Changing the demo code from

const db = await openDB('Articles', 1, { ........ to'...................... const db = await idb. openDB('Articles', 1, {

cleared the undefined function problem and I got console output showing that the datastore had been created and records added. The demo code still failed later in the cursor-handling section (Uncaught (in promise) TypeError: index.iterate(...) is not a function or its return value is not async iterable) - but I'm less bothered about that as I need only basic functionality.

So, at least I know that I can make this work, but advice on where I'm going wrong with the demo as published would be most welcome.

jakearchibald commented 3 years ago

Following the "Using external script reference" "Directly In a browser" installation instructions gives me an "openDB is not defined" error when I run the "Article store" example in Chrome.

When you use the non-module version, a global idb is created containing all the module exports. This limits the pollution of the global scope.

The demo code still failed later in the cursor-handling section (Uncaught (in promise) TypeError: index.iterate(...) is not a function or its return value is not async iterable

The async iteration stuff is an optional extra, and requires a different script.

I've made a small change to the docs that'll hopefully make this clearer https://github.com/jakearchibald/idb/commit/958a4dde64abf8d241c583f96b75d4b180e31285

mjoycemilburn commented 3 years ago

Hi Jake. Many thanks for picking this up so promptly.

Sorry to be a nuisance, but though I'm now using the new src for external scripts, the problem persists. To illustrate, I've put a couple of files: jake1.html http://ngatesystems.com/jake1.html http://ngatesystems.com/jake1.htmland jake2.html http://ngatesystems.com/jake2.html on my website at ngatesystems.com. The code for jake1 is:

<!DOCTYPE html>

As you can see I'm using the new external script source. However, if you give the link a click, you'll see that the openDB still fails with "openDB is undefined". The second script is identical to the first but uses idb.openDB instead of plain openDB. This one works and creates my object stores. What am I missing? Maybe I should just learn how to use modules - indexedDB is proving so useful to me that I can see my javascript programs getting a whole lot bigger now. But it would be nice to get this one sorted. On another tack, could I make another request? I was really pleased when I saw that your excellent version of openDB automatically catches the case where a datasource already exists. But I can't put off the need for error handling indefinitely. Further into my code I have to handle the case where Imay inadvertently add a duplicate key to a store that expects uniqueness. I've done this with a catch block as follows: // Add the text in a transaction so we can check if it's already there { const tx = db.transaction('texts', 'readwrite'); try { await Promise.all([ tx.store.add(textObject), tx.done, ]); } catch (e) { const textAlreadyExists = 'Key already exists in the object store.'; if (e.toString().indexOf(textAlreadyExists) != -1) { return; } else { console.error(e); } } } This works, but I'm not confident that you'd be impressed with the style. Since error-handling arrangements are so important in async designs, would it be possible for you to add an illustration to your examples showing the recommended way of coding this? With best wishes (and many thanks for your elegant and wonderfully useful code). MartinJ On Tue, 1 Dec 2020 at 10:22, Jake Archibald wrote: > Closed #208 . > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > , or > unsubscribe > > . >
mjoycemilburn commented 3 years ago

Just to clarify. The issue here for me is that I'm expecting the example in the Readme to work exactly as displayed. At the moment, unless I'm missing something, it doesn't (at least not in my circs). Same goes for the cursor issue. I'm fine if you tell me the examples are just meant to be illustrative, but it would be great if they were more prescriptive.

M

On Tue, 1 Dec 2020 at 10:22, Jake Archibald notifications@github.com wrote:

Closed #208 https://github.com/jakearchibald/idb/issues/208.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jakearchibald/idb/issues/208#event-4056356834, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADIP2IQY7GXX7FQ7FH7O6GDSSS7W7ANCNFSM4UGQUMTQ .

jakearchibald commented 3 years ago

The examples work as-is, but you need to need to complete the prerequisites.

For instance, if you don't load the library, the examples won't work.

The examples assume you import the library exports using their default names. If you do:

import { openDB as bloopyBloobyKaboom } from 'https://unpkg.com/idb?module';

…then the examples will not work as is. You'd have to replace calls to openDB with bloopyBloobyKaboom. Similarly, if you don't import one of the used functions, the examples won't work as-is.

If you use a plain script tag, then you need to note the differences that causes https://github.com/jakearchibald/idb/blob/master/README.md#using-external-script-reference. If you ignore that, then the examples won't work as-is.

If you want to use the async iterator methods, then you need to note the extra steps in https://github.com/jakearchibald/idb/blob/master/README.md#async-iterators. If you ignore those, then the examples won't work as is.

mjoycemilburn commented 3 years ago

Many thanks Jake. I'll bone up on modules. Goodness me but it's a full-time job just keeping up to date these days! But things are getting better all the time. Your api, for eg - head and shoulders over anything else I've seen .

All the best, MartinJ

On Wed, 2 Dec 2020 at 14:58, Jake Archibald notifications@github.com wrote:

The examples work as-is, but you need to need to complete the prerequisites.

For instance, if you don't load the library, the examples won't work.

The examples assumes you import the library exports. If you do:

import { openDB as bloopyBloobyKaboom } from 'https://unpkg.com/idb?module';

…then the examples will not work as is. You'd have to replace calls to openDB with bloopyBloobyKaboom. Similarly, if you don't import one of the used functions, the examples won't work as-is.

If you use a plain script tag, then you need to note the differences that causes https://github.com/jakearchibald/idb/blob/master/README.md#using-external-script-reference. If you ignore that, then the examples won't work as-is.

If you want to use the async iterator methods, then you need to note the extra steps in https://github.com/jakearchibald/idb/blob/master/README.md#async-iterators. If you ignore those, then the examples won't work as is.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jakearchibald/idb/issues/208#issuecomment-737283168, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADIP2ITXIEQJRB4JOWN73BDSSZI3DANCNFSM4UGQUMTQ .