1.0.5 • Published 4 years ago
anno-cli v1.0.5
Anno-cli
What is Anno-cli
Anno-cli is a cli tool which can be used with Anno.js together.
Getting Started
Installation
Run $ npm i -g anno-cli
or $ npm i -save-dev anno-cli
to install the latest version of anno-cli.
Generate template
Run anno-cli t
to generate template.
Step 1 Choose a template
$ anno-cli t
? What template would you like to generate? (Use arrow keys)
❯ foo-bar(local)
foo-bar
Step 2 Input path
$ anno-cli t
? What template would you like to generate? foo-bar(local)
? What path would you like to generate to? path: foo-bar
Step 3 Input class name, and press enter. You will generate files according to your own defined template. NOTE: The class name can be defined in your own way.
$ anno-cli t
? What template would you like to generate? foo-bar(local)
? What path would you like to generate to? path: foo-bar
? What class name do you prefer? className: FooBar
$ anno-cli t
? What template would you like to generate? foo-bar(local)
? What path would you like to generate to? path: foo-bar
? What class name do you prefer? className: FooBar
/anno.js/tests/e2e/foo-bar/test.spec.js
/anno.js/src/foo-bar/bar/index.module.scss
/anno.js/src/foo-bar/bar/index.tsx
/anno.js/src/foo-bar/index.module.scss
/anno.js/src/foo-bar/index.page.tsx
/anno.js/tests/unit/foo-bar/test.spec.js
Define Your Own Template
You can define your own local template in your local folder ./templates
.
Step 1 Template folder structure
templates
├── foo-bar
├── e2e
│ └── test.spec.js
├── src
│ └── bar
│ │ ├── index.module.scss
│ │ └── index.tsx
│ ├── index.module.scss
│ └── index.page.tsx
├── unit
│ └── test.spec.js
└── config.json
Step 2 Config template
- config.map is used for matching the template path to the destination path.
config.prompts is used for defining variables which can be input in questions, which might be used in template later. For more detail, refer to inquirer.
config.js
const config = {
map: {
src: 'src',
e2e: 'tests/e2e',
unit: 'tests/unit',
},
prompts: [
{
name: 'className',
type: 'input',
message: 'What class name do you prefer? className:',
validate: function (input) {
if (/^([A-Za-z\-\_\d])+$/.test(input)) return true
else return 'Class name may only include letters, numbers, underscores and hashes.'
},
},
]
}
module.exports = config
Step 3 Edit template file
- We use ejs to render remplate. For more detail, refer to ejs.
- All variables are under root, like
root.className
, which should be same as it inconfig.js
. We can get path fromroot.$PATH
and get template which we selected fromroot.$TEMPLATE
.
templates/foo-bar/src/index.page.tsx
import { Component, Vue } from 'vue-property-decorator'
import Bar from './bar'
import style from './index.module.scss'
@Component
export default class <%=root.className%> extends Vue {
private render(h: CreateElement, context: any) {
return (
<div class={style.container} id="<%=root.className%>">
Welcome to <%=root.className%>
{h(Bar, {})}
</div>
)
}
}
Step 3 The generated files likes below.
NOTE:If you don't wanna generate test files, we cannot decide except you don't define it in template folder. About this, We will improve it later, like prompting a question to let you to decide whether you generate test files.
src/foo-bar/index.page.tsx
import { Component, Vue } from 'vue-property-decorator'
import Bar from './bar'
import style from './index.module.scss'
@Component
export default class FooBar extends Vue {
private render(h: CreateElement, context: any) {
return (
<div class={style.container} id="FooBar">
Welcome to FooBar
{h(Bar, {})}
</div>
)
}
}