diff --git a/packages/omi-cli/template/component/DEV.md b/packages/omi-cli/template/component/DEV.md new file mode 100644 index 000000000..08bf962ca --- /dev/null +++ b/packages/omi-cli/template/component/DEV.md @@ -0,0 +1,31 @@ +# Counter + +> Counter + +## Install + +```bash +npm i +``` + +## Dev + +```bash +npm start +``` + +## Preview + +```bash +//html mode demo +http://localhost:3000 + +//jsx mode demo +http://localhost:3000/demo.html +``` + +## Release + +```bash +npm run build +``` diff --git a/packages/omi-cli/template/component/README.md b/packages/omi-cli/template/component/README.md index 08bf962ca..4a94100ca 100644 --- a/packages/omi-cli/template/component/README.md +++ b/packages/omi-cli/template/component/README.md @@ -1,31 +1,46 @@ -# Counter +# Counter_to_be_replace -> Counter +Description for component. -## Install +- [→ CodePen](https://codepen.io/omijs/pen/) -```bash -npm i +## Import + +```js +import '@omiu/counter_to_be_replace' ``` -## Dev +Or use script tag to ref it. -```bash -npm start +```html + ``` -## Preview +## Usage -```bash -//html mode demo -http://localhost:3000 - -//jsx mode demo -http://localhost:3000/demo.html +```html + ``` -## Release +## API -```bash -npm run build +### Props + +```tsx +{ + count?: number + onCountChanged?: (evt: CustomEvent) => void +} ``` + +### Default Props + +```tsx +{ + count: 1 +} +``` + +### Events + +- CountChanged diff --git a/packages/omi-cli/template/component/README.zh.md b/packages/omi-cli/template/component/README.zh.md new file mode 100644 index 000000000..164b9b0b0 --- /dev/null +++ b/packages/omi-cli/template/component/README.zh.md @@ -0,0 +1,49 @@ +# Counter_to_be_replace 计数器 + +计数器描述，待替换。 + + + +## 导入 + +```js +import '@omiu/counter_to_be_replace' +``` + +或者直接 script 标签引入。 + +```html + +``` + +## 使用 + +```html + +``` + +## API + +### 属性 + +```tsx +{ + count?: number + onCountChanged?: (evt: CustomEvent) => void +} +``` + +### 默认属性 + +```tsx +{ + count: 1 +} +``` + +### Events + +- CountChanged diff --git a/packages/omi-cli/template/component/package.json b/packages/omi-cli/template/component/package.json index 8df6aa738..e053433ff 100644 --- a/packages/omi-cli/template/component/package.json +++ b/packages/omi-cli/template/component/package.json @@ -1,20 +1,31 @@ { "name": "@omiu/counter_to_be_replace", + "description": "Description for component.", "version": "0.0.0", + "docsExtend": { + "cnName": "计数器", + "cnDescription": "计数器描述，待替换。", + "codepen": "", + "codepenHeight": 351, + "codepenDefaultTab": "html,result" + }, "main": "dist/index.es.js", "exports": { ".": "./dist/index.es.js" }, "types": "types/index.d.ts", "scripts": { - "start": "yarn watch & vite", - "dev": "yarn start", - "build": "vite build && yarn build:scss", + "start": "npm run watch & vite", + "clean": "rm -rf dist", + "dev": "npm run start", + "build": "vite build && npm run build:scss", "build:demo": "vite build", "build:scss": "sass src/index.scss src/index.css", + "docs": "esno ./scripts/docs-gen.ts", "watch": "sass --watch src/index.scss src/index.css --no-source-map", - "pretest": "yarn build", - "test": "web-test-runner \"test/*.js\" --node-resolve" + "pretest": "npm run build", + "test": "web-test-runner \"test/*.js\" --node-resolve", + "prepublishOnly": "npm run build" }, "files_to_be_replace": [ "dist", @@ -26,11 +37,12 @@ }, "devDependencies": { "@open-wc/testing": "^2.5.33", - "@types/node": "^16.7.13", + "@types/node": "^16.9.1", "@web/test-runner": "^0.13.17", - "sass": "^1.39.0", - "typescript": "^4.4.2", - "vite": "^2.5.4" + "esno": "^0.9.1", + "sass": "^1.41.0", + "typescript": "^4.4.3", + "vite": "^2.5.7" }, "license": "MIT", "keywords": [ diff --git a/packages/omi-cli/template/component/scripts/docs-gen.ts b/packages/omi-cli/template/component/scripts/docs-gen.ts new file mode 100644 index 000000000..b27a91e5a --- /dev/null +++ b/packages/omi-cli/template/component/scripts/docs-gen.ts @@ -0,0 +1,121 @@ +// 自动扫描 index.tsx 生成 README +import fs from 'fs' +// package 是严格模式下的保留字，使用 pkg 替代 +import pkg from '../package.json' +import { pascalCase, extract } from './utils' +import { generateAPIDocs, generateImportAndUsageDocs } from './docs' + +const srcFile = './src/index.tsx' +const content = fs.readFileSync(srcFile, 'utf-8') + +const propsStartWith = 'export type Attrs = {' +const props = extract(propsStartWith, content).replace( + propsStartWith.slice(0, -1), + '' +) + +const defaultPropsStartWith = 'static defaultProps = {' +const defaultProps = extract('static defaultProps = {', content) + .replace(defaultPropsStartWith.slice(0, -1), '') + .replace(/ }/g, '}') + .replace(/ /g, ' ') + +const eventContexts = content.match( + new RegExp('this.fire\\([\\s\\S]*?[,|)]', 'g') +) + +const pkgName = pkg.name +const name = pkgName.split('/')[1] + +const upperCaseName = pascalCase(name) +const tagName = 'o-' + name + +// fire 附近打标标记 event.detail 类型？ +let events: string[] +let eventMap: + | { + [key: string]: any + } + | undefined = undefined + +if (eventContexts) { + events = eventContexts.map((event) => { + return event.replace("this.fire('", '').replace("',", '').replace("')", '') + }) + eventMap = {} + events.forEach((event) => { + if (eventMap) { + eventMap[event] = 1 + } + }) +} + +const cnContent = `# ${upperCaseName} ${pkg.docsExtend.cnName} + +${pkg.docsExtend.cnDescription} + + + +${generateImportAndUsageDocs('zh', { + pkgName, + tagName +})} +${generateAPIDocs('zh', { + props, + defaultProps, + eventMap +})} +` + +// todo: write to docs +// fs.writeFileSync(`../docs-src/src/docs/zh-cn/${name}.md`, cnContent) +fs.writeFileSync('./README.zh.md', cnContent) + +const enContent = `# ${upperCaseName} + +${pkg.description} + + + +${generateImportAndUsageDocs('en', { + pkgName, + tagName +})} +${generateAPIDocs('en', { + props, + defaultProps, + eventMap +})} +` + +// fs.writeFileSync(`../docs-src/src/docs/en/${name}.md`, enContent) + +fs.writeFileSync( + `./README.md`, + enContent.replace( + //, + `- [→ CodePen](https://codepen.io/omijs/pen/${pkg.docsExtend.codepen})` + ) +) diff --git a/packages/omi-cli/template/component/scripts/docs.ts b/packages/omi-cli/template/component/scripts/docs.ts new file mode 100644 index 000000000..1f7a7833b --- /dev/null +++ b/packages/omi-cli/template/component/scripts/docs.ts @@ -0,0 +1,75 @@ +import { Language, t } from './locale' + +/** + * 生成 API 文档 + * @param locale + * @param params + * @returns + */ +export function generateAPIDocs( + locale: Language, + params: { + props: string + defaultProps: string + eventMap: any + } +) { + const { props, defaultProps, eventMap } = params + + let defaultPropsDocs = '' + if (defaultProps) { + defaultPropsDocs = `### ${t('defaultProps', locale)} + +\`\`\`tsx +${defaultProps} +\`\`\` +` + } + + let eventsDocs = '' + if (eventMap) { + eventsDocs = `### ${t('events', locale)}\n` + Object.keys(eventMap).forEach((event) => { + eventsDocs += `\n- ${event}` + }) + } + + return ` +## ${t('API', locale)} + +### ${t('props', locale)} + +\`\`\`tsx +${props} +\`\`\` + +${defaultPropsDocs} +${eventsDocs}` +} + +export function generateImportAndUsageDocs( + locale: Language, + params: { + pkgName: string + tagName: string + } +) { + const { pkgName, tagName } = params + return `## ${t('import', locale)} + +\`\`\`js +import '${pkgName}' +\`\`\` + +${t('importDescription', locale)} + +\`\`\`html + +\`\`\` + +## ${t('usage', locale)} + +\`\`\`html +<${tagName}> +\`\`\`` +} diff --git a/packages/omi-cli/template/component/scripts/locale.ts b/packages/omi-cli/template/component/scripts/locale.ts new file mode 100644 index 000000000..a8cd98bfb --- /dev/null +++ b/packages/omi-cli/template/component/scripts/locale.ts @@ -0,0 +1,22 @@ +export type Language = 'zh' | 'en' + +export const messages = { + en: { + defaultProps: 'Default Props', + importDescription: 'Or use script tag to ref it.' + }, + zh: { + import: '导入', + usage: '使用', + props: '属性', + defaultProps: '默认属性', + importDescription: '或者直接 script 标签引入。' + } +} + +export const t = (key: string, locale: Language) => { + return messages[locale][key] || key.charAt(0).toUpperCase() + key.slice(1) +} + +export const en = (key: string) => t(key, 'en') +export const zh = (key: string) => t(key, 'zh') diff --git a/packages/omi-cli/template/component/scripts/utils.ts b/packages/omi-cli/template/component/scripts/utils.ts new file mode 100644 index 000000000..b05c20343 --- /dev/null +++ b/packages/omi-cli/template/component/scripts/utils.ts @@ -0,0 +1,40 @@ +/** + * kekab-case to Pascal Case + * @param name + */ +export function pascalCase(name: string) { + return name + .split('-') + .map((item: string) => { + return item.charAt(0).toUpperCase() + item.slice(1) + }) + .join('') +} + +/** + * extract string from content + * @param startWith + * @param str + * @returns + */ +export function extract(startWith: string, str: string) { + const start = str.indexOf(startWith) + if (start === -1) return '' + let end = start + startWith.length + let stackCount = 1 + while (end < str.length) { + if (str[end] === '}') { + if (stackCount === 1) { + break + } else { + stackCount-- + } + } else if (str[end] === '{') { + stackCount++ + } + + end++ + } + + return str.substring(start, end + 1) +} diff --git a/packages/omi-cli/template/component/tsconfig.json b/packages/omi-cli/template/component/tsconfig.json index 1ac6df2b4..2581baa29 100644 --- a/packages/omi-cli/template/component/tsconfig.json +++ b/packages/omi-cli/template/component/tsconfig.json @@ -23,7 +23,7 @@ }, "include": [ "src/**/*.ts", - "src/**/*.tsx" + "src/**/*.tsx", ], "exclude": [] }