Website dexie.org
dfahlander / dexie.js-web Goto Github PK
View Code? Open in Web Editor NEWWebsite dexie.org
Home Page: https://dexie.org
License: Apache License 2.0
Website dexie.org
Home Page: https://dexie.org
License: Apache License 2.0
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.
How do I run these documents locally for preview?
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?
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.
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.
GitHub Pages support HTTPS on custom domains, it just need to be enabled.
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
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
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
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.
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?
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
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;
<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>
Currently these seem to be missing:
These errors are listed in DexieError. No clue which ones are actually relevant.
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.
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.
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.
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?
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
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!
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
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
Project website says "only ~16k minified and gzipped" but according to BundlePhobia latest stable version (2.0.4) is 18.2k minified and gzipped.
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();
}
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?
I could add those after we publish the docs to dexie.org
Maybe we should remove this for now until someone finds time to write it
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
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.
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.
https://dexie.org/docs/Table/Table.hook('updating')#parameters
modifications.hasOwnPropert(propName)
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
React layout (more advanced, but still clean):
I hope to fix this as soon as I have the time, unless anyone else feels eager to do it.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.