https://github.com/mmlpxjs/ts-plugin-mmlpx
🤖 typescript plugin for automatic model and action name generation
https://github.com/mmlpxjs/ts-plugin-mmlpx
mobx mvvm typescript typescript-plugin
Last synced: 24 days ago
JSON representation
🤖 typescript plugin for automatic model and action name generation
- Host: GitHub
- URL: https://github.com/mmlpxjs/ts-plugin-mmlpx
- Owner: mmlpxjs
- License: mit
- Created: 2018-06-21T07:24:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-26T11:40:20.000Z (over 7 years ago)
- Last Synced: 2025-10-10T13:43:15.780Z (4 months ago)
- Topics: mobx, mvvm, typescript, typescript-plugin
- Language: TypeScript
- Homepage:
- Size: 63.5 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ts-plugin-mmlpx
[](https://www.npmjs.com/package/ts-plugin-mmlpx)
[](https://codecov.io/gh/mmlpxjs/ts-plugin-mmlpx)
[](https://www.npmjs.com/package/ts-plugin-mmlpx)
[](https://travis-ci.org/mmlpxjs/ts-plugin-mmlpx)
Generate mmlpx `Store` name automatically, suitable for mobx actions as well.
Compatible with ts-loader(^2.2.0) and awesome-typescript-loader(^3.1.3).
## Transpilation
### input
```ts
import { action } from 'mobx';
import { Store } from 'mmlpx';
@Store
export default class UserStore {
@action updateUser() {}
}
```
### output
```ts
import { action } from 'mobx';
import { Store } from 'mmlpx';
@Store('${filePath}/UserStore')
export default class UserStore {
@action updateUser() {}
}
```
If we had configured mobx action transpilation, the action name would be generated automatically.
```ts
import { action } from 'mobx';
import { Store } from 'mmlpx';
@Store('${filePath}/UserStore')
export default class UserStore {
@action('UserStore/updateUser') updateUser() {}
}
```
## Configuration
```js
const createMmlpxTransformer = require('ts-plugin-mmlpx').default;
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
```ts
const defaultOptions = {
libraryName: 'mmlpx',
bindings: ['Store', 'ViewModel'],
};
function createTransformer(options: Array> = [defaultOptions]): ts.TransformerFactory
```
### Options
```ts
type Options = {
libraryName?: string;
bindings?: string[];
};
```
## Notes
As we use `${fileName}/${decoratedClassName}` as the id of configured bindings, 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 like index.ts/Index after transpilation, make sure they're unique.