nartc / automapper-transformer-plugin

Typescript Transformer Plugin for @nartc/automapper

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.