0.0.3 • Published 6 years ago
ts-plugin-mmlpx v0.0.3
ts-plugin-mmlpx
Generate mmlpx ViewModel/Store name automatically, also suit for mobx actions. Compatible with ts-loader(^2.2.0) and awesome-typescript-loader(^3.1.3)
Transpilation
input
import { Store } from 'mmlpx';
@Store
export default class UserStore {
}
output
import { Store } from 'mmlpx';
@Store('${filePath}/UserStore')
export default class UserStore {
}
Configuration
import createMmlpxTransformer from 'ts-plugin-mmlpx';
var config = {
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
transpileOnly: true,
compilerOptions: {
module: 'es2015'
},
getCustomTransformers: () => ({
before: [
// transform Store/ViewModel of mmlpx by default
createMmlpxTransformer(),
// manual config mobx action
createMmlpxTransformer([
{ libraryName: 'mobx', bindings: ['action'] }
]),
]
})
}
}
]
}
}
API
createTransformer
const defaultOptions = {
libraryName: 'mmlpx',
bindings: ['Store', 'ViewModel'],
};
function createTransformer(options: Array<Partial<Options>> = [defaultOptions]): ts.TransformerFactory<ts.SourceFile>
Options
type Options = {
libraryName?: string;
bindings?: string[];
};
Notes
As we use ${fileName}/${decoratedClassName}
as the id of Store/ViewModel, we should name our Store/ViewModel and file name more descriptive, such as UserStore.ts/UserStore.
Avoid naming file name as index.ts and Store/ViewModel as Index class, keep then unique.