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.