dexie / dexie-website

Website dexie.org
https://dexie.org
Apache License 2.0
33 stars 291 forks source link

mapToClass is not working for ES6 class modules #75

Open gimzani opened 3 years ago

gimzani commented 3 years ago

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?

dfahlander commented 3 years ago

mapToClass() should work with ES6 classes. Please link to an example in jsitor.com or similar showing what you do and explain what you were expecting.

gimzani commented 3 years ago

I can't find an online code editor that allows JS module imports.

I'm using WebPack and I'm importing one file into another:

The Module in this case is "Friend.js"

// 'models/Friend.js'
//----------------------------------------------
export default class Friend {
  constructor(options) {
    this.id = 0;
    this.name = null;
    this.shoeSize = null;

    if(options) {
      this.id = options.id || this.id;
      this.name = options.name || this.name;
      this.shoeSize = options.shoeSize || this.shoeSize;
    }
  }
}

The main file is 'main.js' - (from your example)

// main.js
//----------------------------------------------
import Dexie from 'dexie';
import Friend from './models/Friend'

var db = new Dexie("FriendsDB");
db.version(1).stores({
    friends: "++id,name,shoeSize,address.city"
});

db.friends.mapToClass(Friend);  // it's like this gets ignored - or maybe it can't call constructor()?

db.friends.where("name").startsWithIgnoreCase("d").each(function(friend) {

    assert (friend instanceof Friend);  // = false

    friend.log();
}).catch(function (e) {
    console.error(e);
});
dfahlander commented 3 years ago

ok thanks. I'll try repro it. In jsitor you can just include dexie in a script tag in the html part. For webpack style online editor, check codesandbox. For example cloning this Dexie-based project