dexie/dexie-website

Website dexie.org

dexie-website's Issues

Provide samples of using the StorageManager API

The new storage API in browsers allows for offline-first applications to allow persisted storage and query storage quotas etc. This API can be relevant for many indexedDB users and therefore we should point to it from the dexie documents somehow.

I would love to have samples in the dexie docs about how to use it together with Dexie.js.

missing orderBy

on https://dexie.org/docs/API-Reference#query-items

// This query is equal to:
//   select * from friends where firstName='Angela' order by lastName
const angelasSortedByLastName = await db.friends
    .where('[firstName+lastName]')
    .between([["Angela", ""], ["Angela", "\uffff"])
    .toArray()

Is it really the same as the orderby? If so, can you document why, or correct it if it's simply missing the orderby. Thx.

Mistake in Vue tutorial? Queried data is assigned to 'items' instead of 'friends'

The link: https://dexie.org/docs/Tutorial/Vue#5-create-a-component-that-queries-data

Error is at line 20 (or 4 too).

Here:

v-for="friend in friends"

items: useObservable(
  liveQuery(() => db.friends.toArray())
),

Because of that, the list never gets updated.

Provide DBCore documentation with more samples

Need help providing more samples and better flow documentation of the DBCore interface and all its methods and related interfaces.

There is a skelleton of docs around the DBCore interface right now that is not very easy to follow. It would be a great help for others if someone had the time to provide more samples. My wish would be to provide the docs with some samples of middlewares and link to the samples from the docs of DBCore, Dexie.use() and DBCoreTable.

How to use dexie in nuxt3?

I wrote db.ts and inserted it in composables folder.
and, I adjusted the dexie in nuxt3, but i got the error like this.

I imported the module itself. it worked well. I think that composable way is bug or something wrong.

Below is source code of composable way.
Please help me!

Uncaught (in promise) SyntaxError: Identifier 'MySubClassedDexie' has already been declared

• db.ts

// db.ts
import Dexie, { Table } from "dexie";

export interface Friend {
  id?: number;
  name: string;
  age: number;
}

export class MySubClassedDexie extends Dexie {
  // 'friends' is added by dexie when declaring the stores()
  // We just tell the typing system this is the case
  friends!: Table<Friend>;

  constructor() {
    super("myDatabase");
    this.version(1).stores({
      friends: "++id, name, age", // Primary key and indexed props
    });
  }
}

const db = new MySubClassedDexie();
export default db;

• App.vue

<template>
  <fieldset>
    <legend>Add new friend</legend>
    <label>
      Name:
      <input v-model="friendName" type="text" />
    </label>
    <br />
    <label>
      Age:
      <input v-model="friendAge" type="number" />
    </label>
    <br />
    <button @click="addFriend">Add Friend</button>
    <p>{{ status }}</p>
  </fieldset>
</template>
<script setup lang="ts">
import { ref } from "vue";

const status = ref("");
const friendName = ref("");
const friendAge = ref(20);
const addFriend = async () => {
  try {
    // Add the new friend!
    const id = await db.friends.add({
      name: friendName.value,
      age: friendAge.value,
    });

    status.value = `Friend ${friendName.value}
          successfully added. Got id ${id}`;

    // Reset form:
    friendName.value = "";
    friendAge.value = 10;
  } catch (error) {
    status.value = `Failed to add
          ${friendName.value}: ${error}`;
  }
};
</script>

Typo in the Table.hook('updating') docs

https://dexie.org/docs/Table/Table.hook('updating')#parameters

modifications.hasOwnPropert(propName)

Angular-cli project safari indexedb polyfill not works

We have implementing progressive web app for all browsers. we used dexie.js for our application but it not work with safari/crome on ipad ios9. Can you help how we make it usable.
We have more than 20 objectstores it works all browsers except ipad

Direct edit links not working

Links which implicitly point to an index.html page point to the directory when we click on edit (For example the edit link on the home page).

The other links point to .html pages which obviously don't exist. Should point to .md pages.

This could help jekyll/jekyll#633

Improve grammar, consistency, and clarity

Thanks for your work on Dexie, @dfahlander. I've thoroughly enjoyed using it.

For the most part, the documentation has been very useful and illustrative. That said, I've noticed in several places that there are grammatical errors, inconsistencies, and areas where clarity and readability can be improved.

I'm happy to take on this task and make the changes myself, but they're likely to be quite widespread (even if typically small) and I wanted to be sure it was something you'd approve of before I put in the work.

Dexie is excellent and, to the best of my ability, I want the site and documentation to reflect that.

I've included a few examples below.

On the main page, in the Performant section:

Dexie has an near-native performance. It's' bulk operations utilize a rarely used feature in indexedDB - to ignore success callbacks when possible.

Though they're small mistakes, it's unfortunate for them to be among the first things one might see when investigating the possible use of Dexie:

Dexie has near-native performance. Its bulk operations utilize a rarely used feature in IndexedDB, ignoring success callbacks when possible.

This can be taken a step further stylistically, which improves how it flows when reading:

Dexie has near-native performance. Its bulk operations utilize an often-overlooked feature in IndexedDB, ignoring success callbacks when possible.

In the documentation on Table.bulkPut():

If some operations fail, bulkPut() will ignore those failures but return a rejected Promise with a Dexie.BulkError referencing failures. If caller does not catch that error, transaction will abort. If caller wants to ignore the failures, the bulkPut() operations must be caught.

Clarity and readability can be improved with a few small additions and changes:

If some operations fail, bulkPut() will ignore those failures and return a rejected Promise with a Dexie.BulkError referencing the failures. If the caller does not catch the error, the transaction will abort. If the caller wants to ignore the failures, the bulkPut() operations must be caught.

Support HTTPS

GitHub Pages support HTTPS on custom domains, it just need to be enabled.

/docs/ is not available offline

When offline is enabled, you can't click the docs link on the front page, it leads to this:

The workaround is to turn offline off temporarily

Update build size

Project website says "only ~16k minified and gzipped" but according to BundlePhobia latest stable version (2.0.4) is 18.2k minified and gzipped.

Perform version upgrades after importing a database

Feature Request
Available Version.upgrade could be run when using importInto.

Use Case
I am using Dexie export to let my users locally save and share their work. After a model upgrade, a run into the issue of version incompatibility.
Dexie has a very nice version upgrade feature that I have been happily leveraging when creating my database from indexedDB, unfortunately it won't work when using importInto.

Current Workaround

async function import(file: File) {
  // Completely delete the current data base. Import should overwrite
  // everything anyway.
  await db.delete();
  // Export file may be outdated. For this reason, we cannot use
  // importInto. Instead, we import the new database in a new (default)
  // Dexie instance to save the potentially outdated data in instance db.
  let newDb = await importDB(file);
  await newDb.close();
  // Recreate the database using our custom database class. This
  // will trigger the version upgrade if needed.
  db = new Database();
  await db.open();
}

where with multiple column and anyof()

I have table data as mentioned below.
Id Name Type
1 ABC SCAN
2 BDC SCAN
3 ABC MANUAL
4 BDC EXTDEV
5 ABC EXTDEV

As per the above Tbl data want ABC data including all 3 types.

I have tried below function
export const getInventoryScanProductByAccNameAndType = async (
accName
) => await db.InventoryScans
.where(['AccountName', 'ProductEnterType']).anyOf(accName, ['SCAN', 'MANUAL', 'EXTDEVICE']).toArray();

Can anyone help me to get the data below?

Id Name Type
1 ABC SCAN
2 ABC MANUAL
3 ABC EXTDEV

Some samples are missing from the Samples page

I could add those after we publish the docs to dexie.org

better typescript integration

in the getting started guide in case user is using TypeScript it is advised to create custom database class extending dexie one and define table fields there like that

// db.ts
import Dexie, { Table } from 'dexie';

export interface Friend {
  id?: number;
  name: string;
  age: number;
}

export class MySubClassedDexie extends Dexie {
  // 'friends' is added by dexie when declaring the stores()
  // We just tell the typing system this is the case
  friends!: Table<Friend>;

  constructor() {
    super('myDatabase');
    this.version(1).stores({
      friends: '++id, name, age' // Primary key and indexed props
    });
  }
}

export const db = new MySubClassedDexie();

I wonder why not just using global types? this way we can benefit from ts interface merging. it looks something like that somewhere in the global.d.ts of the project

import 'dexie';

declare module 'dexie' {
  import { SubscriptionModel } from '@/subscriptions/models/subscription.model.ts';
  import { Table } from 'dexie';

  interface Dexie {
    subscriptions: Table<SubscriptionModel>;
  }
}

it will result in the same types, but will have less footprint and overall seems to be more minimal.

what do you think? If you agree with the idea I can create PR to update docs

Import export leads to browser crashes if the IndexDB data size is > 300 MB

Also observer that dexie delete() api is also crashing if the size of data to be be deleted > ~700 MB.
Is the delete API tested for huge data sets ? Are there any bench marks for the delete api?

Local operation

How do I run these documents locally for preview?

The releasing dexie page seems unmaintained

It seems to me that some things there are no longer up to date. There are also a couple of "FIXMEs" and "TODOs". Is that page still relevant or can we remove it?

Docs are missing for Promise.then()

This function is linked from multiple wiki pages but don't seem to exist. We either should remove the links or add the pages or use external links to MDN.

isOpen() returns false

Hello,

isOpen() returns false when I redirect from a different url. I'm using SSO login, so after successful login and navigating back to my application, it returns false. Could you please let me know when isOpen() returns false?

Click to download button image broken on http://dexie.org/docs

The markdown code is as follows:

[![Click to download](https://dl.dropboxusercontent.com/u/8907080/dexie/download-button.png)](Download)

which in addition to being a broken link, just seems wrong that is is linked to dropbox.

Broken sentence in docs

https://github.com/dfahlander/dexie.js-web/blob/gh-pages/docs/Tutorial/Migrating-existing-DB-to-Dexie.md
"Then just navigate to the dump-database.html page and copy the generated code from the output and your with your app."

very confusing

Provide rest-api endpoints as a swagger/OpenAPI document

Since there are tools for OpenAPI to generate clients and test API calls, it'd be nice to have the rest-api documentation available in that format.

On a somewhat related note, I imagine you'll want SDKs for different programming languages (PHP, python, ruby, c#, etc.), perhaps an OpenAPI spec would make it easier for 3rd-party developers.

dexie-cloud looks very exiting, congrats and good luck on the release!

Unable to add event listener to 'error' event

Version: 2.0.4

In Dexie.VersionError.md, the switch example shows some code subscribing to an error event but will throw the following error:

Uncaught TypeError: Cannot read property 'subscribe' of undefined

Docs page for Table.each() is blank

https://dexie.org/docs/Table/Table.each()

PROPOSAL: Enable Table.reverse and Collection.reverse params (true | false)

It will make easier to build queries like:

db[table].orderBy(order)
	.reverse(reverse)
	.offset(current_page * 50)
	.limit(50)
	.with(includes)

And should preserve the current behavior without params

Headings to the left in Docs layout

I think we should use a layout with improved overview for dexie docs. It seems quite common to have a left navigation div with headers like get started API reference etc and put in the content to the right.

Simple layout

• http://i18next.com/docs/

React layout (more advanced, but still clean):

• https://facebook.github.io/react/docs/hello-world.html

I hope to fix this as soon as I have the time, unless anyone else feels eager to do it.

Docs missing for various error types

Currently these seem to be missing:

• AbortError
• ConstraintError
• DatabaseClosedError
• DataCloneError
• DataError
• InternalError
• InvalidAccessError
• InvalidArgumentError
• InvalidStateError
• NoSuchDatabaseError
• NotFoundError
• QuotaExceededError
• ReadOnlyError
• SubTransactionError
• TimeoutError
• TransactionInactiveError
• UnknownError
• UnsupportedError
• VersionError (maybe this is the VersionChangeError?)

These errors are listed in DexieError. No clue which ones are actually relevant.

Multiple add in multiple table

Hello,

I would like to add many entry in many tables (4000 entries by table)
What is the best practice to do that ?

I try something like this, thats works but sometime entries does not work :(

db.transaction('rw', db.client, function() {

	for (i = 0; i < count; i++) {
	
		idClient = objClient.idClient[i];
		nomClient = objClient.nomClient[i];
		idInterne = objClient.idInterne[i];
		remise = objClient.remise[i];
		zoneprix = objClient.zoneprix[i];
		zoneprixbis = objClient.zoneprixbis[i];
		ville = objClient.ville[i];
		code_postal = objClient.code_postal[i];
		pays = objClient.pays[i];

		db.client.add({
			idClient: "" + idClient + "",
			idInterne: "" + idInterne + "",
			nomClient: "" + nomClient + "",
			remise: "" + remise + "",
			zoneprix: "" + zoneprix + "",
			zoneprixbis: "" + zoneprixbis + "",
			ville: "" + ville + "",
			code_postal: "" + code_postal + "",
			pays: "" + pays + ""

		});
	}
});

Thank you for help

Understanding the basics is incomplete

Maybe we should remove this for now until someone finds time to write it

Drop jQuery dependency in documentation/examples

On https://dexie.org/docs/Dexie/Dexie.on.populate#ajax-populate-sample

 return new Promise(function (resolve, reject) {
                $.ajax(url, {
                    type: 'get',
                    dataType: 'json',
                    error: function (xhr, textStatus) {
                        // Rejecting promise to make db.open() fail.
                        reject(textStatus);
                    },
                    success: function (data) {
                        // Resolving Promise will launch then() below.
                        resolve(data);
                    }
                });

fetch() is supported on all browsers that support IndexedDB, using jquery in the documentation makes this library seem a bit "old-school", back when jquery was used to harmonize all the different ways ajax calls were made.

I think developers may simply cut and paste when getting started, so using something that works everywhere and was also a best practice for handling errors would be better than requiring jQuery.

Thanks.

mapToClass is not working for ES6 class modules

I have a class like this:

export default class MyClass {
  constructor(options) {
    this.prop = null;

    if(options) {
      this.prop = options.prop || this.prop;
    }
  }
}

Then I set it up like:

import MyClass from './some/loc/MyClass';

db.MyTable.mapToClass(MyClass);

When I call the mapToClass, I have the imported Class ready - but it does not work. I call the data with 'get' and just get the raw data. It seems to just ignore it all together. Am I just not understanding how this works?