Gathering detailed insights and metrics for babel-plugin-transform-typescript-metadata-macro
Gathering detailed insights and metrics for babel-plugin-transform-typescript-metadata-macro
Babel plugin to emit decorator metadata like typescript compiler
Installations
npm install babel-plugin-transform-typescript-metadata-macroDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.13.0
NPM Version
8.1.0
Score
67.2
Supply Chain
97.9
Quality
74.5
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Languages
2
JavaScript
TypeScript
JavaScript (53.58%)
TypeScript (46.42%)
Developer
intellild
Download Statistics
Total Downloads
25,725
Last Day
2
Last Week
13
Last Month
55
Last Year
584
GitHub Statistics
MIT License
80 Commits
20 Branches
1 Contributors
Updated on Feb 23, 2022
Bundle Size
5.94 kB
Minified
1.84 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.1.0
Package Id
babel-plugin-transform-typescript-metadata-macro@0.1.0
Unpacked Size
26.49 kB
Size
8.61 kB
File Count
21
NPM Version
8.1.0
Node Version
16.13.0
Total Downloads
Cumulative downloads
Total Downloads
25,725
Dependencies
1
Peer Dependencies
1
Dev Dependencies
21
@babel/cli@babel/core@babel/plugin-proposal-class-properties@babel/plugin-proposal-decorators@babel/plugin-transform-modules-commonjs@babel/preset-env@babel/preset-typescript@babel/template@babel/types@favoloso/conventional-changelog-emoji@release-it/conventional-changelog@types/babel-plugin-macros@types/jestbabel-plugin-macrosbabel-testconventional-changelog-clihuskyjestjest-file-snapshotrelease-ittypescript
babel-plugin-transform-typescript-metadata
Babel plugin to emit decorator metadata like typescript compiler
Motivation
TypeScript Decorators allows advanced reflection patterns when combined
with Reflect.metadata output.
Current @babel/preset-typescript implementation however just strips all types and
does not emit the relative Metadata in the output code.
Since this kind of information is used extensively in libraries like
Nest and TypeORM
to implement advanced features like Dependency Injection, I've thought it would
be awesome to be able to provide the same functionality that TypeScript
compiler experimentalDecorators and emitDecoratorMetadata
flags provide.
This means that code like:
1import { Injectable, Inject } from 'some-di-library'; // Just an example 2import { MyService } from './MyService'; 3import { Configuration } from './Configuration'; 4 5@Injectable() 6class AnotherService { 7 @Inject() 8 config: Configuration; 9 10 constructor(private service: MyService) {} 11}
will be interpreted like:
1import { MyService } from './MyService'; 2import { Configuration } from './Configuration'; 3 4@Injectable() 5@Reflect.metadata('design:paramtypes', [MyService]) 6class AnotherService { 7 @Inject() 8 @Reflect.metadata('design:type', Configuration) 9 config: Configuration; 10 11 constructor(private service: MyService) {} 12}
Parameter decorators
Since decorators in typescript supports also Parameters, this plugin also provides support for them, enabling the following syntax:
1@Injectable() 2class Some { 3 constructor(@Inject() private: SomeService); 4}
This will be roughly translated to:
1// ... 2Inject()(Some.prototype, undefined, 0);
Installation
With npm:
1npm install --dev --save babel-plugin-transform-typescript-metadata
or with Yarn:
1yarn add --dev babel-plugin-transform-typescript-metadata
Usage
With .babelrc:
Note: should be placed before
@babel/plugin-proposal-decorators.
1{ 2 "plugins": [ 3 "babel-plugin-transform-typescript-metadata", 4 ["@babel/plugin-proposal-decorators", { "legacy": true }], 5 ["@babel/plugin-proposal-class-properties", { "loose": true }], 6 ], 7 "presets": [ 8 "@babel/preset-typescript" 9 ] 10}
Usage with InversifyJS
If you are using normal dependency injection letting Inversify create your instances, you should be fine with all kind of decorators.
Instead, if you are using property injection, when the container does not create the instances, you would likely encounter errors since babel decorators are not exactly the same as TypeScript.
You can fix it by enhancing property decorators with the following function:
1import getDecorators from 'inversify-inject-decorators'; 2// setup the container... 3let { lazyInject: originalLazyInject } = getDecorators(container); 4 5// Additional function to make properties decorators compatible with babel. 6function fixPropertyDecorator<T extends Function>(decorator: T): T { 7 return ((...args: any[]) => ( 8 target: any, 9 propertyName: any, 10 ...decoratorArgs: any[] 11 ) => { 12 decorator(...args)(target, propertyName, ...decoratorArgs); 13 return Object.getOwnPropertyDescriptor(target, propertyName); 14 }) as any; 15} 16 17export const lazyInject = fixPropertyDecorator(originalLazyInject);
Current Pitfalls
-
If you are using webpack and it complains about missing exports due to types not being removed, you can switch from
import { MyType } from ...toimport type { MyType } from .... See #46 for details and examples. -
We cannot know if type annotations are just types (i.e.
IMyInterface) or concrete values (like classes, etc.). In order to resolve this, we emit the following:typeof Type === 'undefined' ? Object : Type. The code has the advantage of not throwing. If you know a better way to do this, let me know!
No vulnerabilities found.
No security vulnerabilities found.