The plugin doesn't work correctly for plain objects and arrays.
MaksHladki opened this issue · comments
Hi. Thanks for the wonderful idea to use custom transformers with the ts-loader to avoid some boilerplate code of using decorators. I really like it. Unfortunately, I found some issues there. In all cases, I used your example with the webpack build tool. Could you please take a look?
1. Using plain objects:
Changes in the index.ts file
...
const plainObj = JSON.parse(JSON.stringify(user));
const vm = Mapper.map(plainObj, UserVm, User);
console.log(vm);
When I run the command npm run build
, I see the exception throw new Error("Mapping not found for source " + mappingName);
. I guess the mapper couldn't find a rule to map the plain object of profile property to the Profile class. Then I added the directive to this property and it worked well.
export class User {
firstName!: string;
lastName!: string;
@AutoMap(() => Profile)
profile!: Profile;
}
The result has correct object types: UserVm for the class and ProfileVm for the property.
UserVm {
first: 'Chau',
last: 'Tran',
full: 'Chau Tran',
profile: ProfileVm { bioString: 'Developer', ageNumber: 28 } }
2. Using arrays of an object:
I modified a bit example to use an array of the Profile entity.
export class User {
firstName!: string;
lastName!: string;
profiles!: Profile[];
}
export class UserVm {
first!: string;
last!: string;
full!: string;
profiles!: ProfileVm[];
}
When I run the example I see the exception: TypeError: Cannot read property 'transformFlags' of undefined
.
Then I used the decorator, and it worked well.
export class User {
firstName!: string;
lastName!: string;
@AutoMap(() => Profile)
profiles!: Profile[];
}
export class UserVm {
first!: string;
last!: string;
full!: string;
@AutoMap(() => ProfileVm)
profiles!: ProfileVm[];
}
// index.ts
const user = new User();
user.firstName = 'Chau';
user.lastName = 'Tran';
user.profiles = [new Profile()];
user.profiles[0].bio = 'Developer';
user.profiles[0].age = 28;
const plainObj = JSON.parse(JSON.stringify(user));
const vm = Mapper.map(plainObj, UserVm, User);
console.log(vm);
The result:
UserVm {
profiles: [ ProfileVm { bioString: 'Developer', ageNumber: 28 } ],
first: 'Chau',
last: 'Tran',
full: 'Chau Tran' }
@MaksHladki Hi, thanks for reporting the issue. I have a hunch that Array wouldn't work. It means that I really need to up my TS Plugin game 😃. I'll take a look at the issue as early as next week since I'm doing a hackathon right now.
Thanks for the kind words!
@MaksHladki Latest version of both @nartc/automapper
and this plugin will have the problem fixed. Thanks again for bringing this to my attention. https://github.com/nartc/automapper-transformer-plugin-examples/blob/master/webpack-build/src/index.ts#L55
Wonderful, I'm going to spend some time for testing the plugin today.