diff --git a/.github/workflows/gh-pages.yaml b/.github/workflows/gh-pages.yaml index dbc64281..deb8ab87 100644 --- a/.github/workflows/gh-pages.yaml +++ b/.github/workflows/gh-pages.yaml @@ -23,18 +23,15 @@ jobs: - name: Generations of Components run: pnpm run build:comp - - name: Generations of Less - run: pnpm run build:less - - name: Build docs run: | pnpm run build:demo - cp ./demo/dist/index.html ./demo/dist/404.html + cp ./packages/yike-design-demo/dist/index.html ./packages/yike-design-demo/dist/404.html - name: Deploy site uses: JamesIves/github-pages-deploy-action@v4 with: clean: true branch: gh-pages - folder: ./demo/dist + folder: ./packages/yike-design-demo/dist token: ${{secrets.GIT_TOKEN}} diff --git a/.vscode/settings.json b/.vscode/settings.json index a0da4cda..66771c9d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,7 +3,6 @@ "editor.formatOnSave": true, "editor.tabSize": 2, "editor.codeActionsOnSave": { - "source.fixAll": "explicit", "source.fixAll.stylelint": "explicit" }, "[less]": { @@ -27,10 +26,10 @@ "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, - "[markdown]": { - "editor.wordWrap": "off", - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, + // "[markdown]": { + // "editor.wordWrap": "off", + // "editor.defaultFormatter": "esbenp.prettier-vscode" + // }, "references.preferredLocation": "peek", "stylelint.validate": ["vue", "less", "css"], "vue.codeActions.enabled": false, diff --git a/config/script/new-component.mjs b/config/script/new-component.mjs deleted file mode 100644 index eaa2caed..00000000 --- a/config/script/new-component.mjs +++ /dev/null @@ -1,265 +0,0 @@ -import fs from 'fs' -import path from 'path' -import chalk from 'chalk' -import readline from 'readline' - -const rl = readline.createInterface({ - input: process.stdin, - output: process.stdout, -}) -// component root path -const packagePath = 'packages/yike-design-ui/src' - -function mkdirSync(dirname) { - if (fs.existsSync(dirname)) { - return true - } - if (mkdirSync(path.dirname(dirname))) { - fs.mkdirSync(dirname) - return true - } - return false -} - -function log(...rest) { - console.log(chalk.bgGreen.black(`[INFO]`), ...rest) -} -function warn(msg) { - console.warn(chalk.bgRed.black(`[ERROR]`), msg) -} - -function logCreateFile(filename) { - log(`${filename} 生成完毕`) -} - -// yk-message -> YkMessage -function dashToCamelCase(str) { - return str - .replace(/-([a-z])/g, function (match, letter) { - return letter.toUpperCase() - }) - .replace(/^(.)/, function (match, letter) { - return letter.toUpperCase() - }) -} - -const componentLowDashName = process.argv[2] // component-name -const componentDescName = process.argv[3] // 组件名 -const upperRegex = /[A-Z]/ - -if (!componentLowDashName || upperRegex.test(componentLowDashName)) { - warn('请采用短横线为组件命名') - warn('如:npm run new back-top 回到顶部') - process.exit(233) -} - -if (!componentDescName) { - warn('请输入正确的组件名称') - warn('如:npm run new pagination 分页') - warn('如:npm run new back-top 回到顶部') - process.exit(233) -} - -const upperComponentName = dashToCamelCase(componentLowDashName) // ComponentName -const upperFullComponentName = 'Yk' + upperComponentName // YkComponentName -const tagName = 'yk-' + componentLowDashName // yk-component-name -const packageIndexFile = path.join(packagePath, 'index.ts') - -function createComponentMainFiles() { - const componentBaseDir = packagePath + '/components/' + componentLowDashName - - if (fs.existsSync(componentBaseDir)) { - warn(`${componentLowDashName}组件已存在,请检查是否存在冲突`) - process.exit(233) - } - - const childFIleList = [`/src`, `/style`] - - // create default folders - childFIleList.forEach((fileName) => { - mkdirSync(componentBaseDir + fileName) - }) - - const componentMainVuePath = `${componentBaseDir}/src/${componentLowDashName}.vue` - const componentMainPropsPath = `${componentBaseDir}/src/${componentLowDashName}.ts` - const componentMainLessPath = `${componentBaseDir}/style/index.less` - const componentMainStylePath = `${componentBaseDir}/style/index.ts` - - const propsName = `${upperComponentName}Props` - - const vueContent = ` - ${upperComponentName} - - - ` - - fs.writeFileSync(componentMainVuePath, vueContent) - logCreateFile(componentMainVuePath) - - // export default props content - const propsContent = `export type ${propsName} = { - id?: string; -}; - ` - - fs.writeFileSync(componentMainPropsPath, propsContent) - logCreateFile(componentMainPropsPath) - - const lessContent = `.yk-${componentLowDashName} { - -}` - // create default less content - fs.writeFileSync(componentMainLessPath, lessContent) - logCreateFile(componentMainLessPath) - - fs.writeFileSync(componentMainStylePath, `import './index.less';`) - logCreateFile(componentMainStylePath) - - const exportContent = `import ${upperComponentName} from './src/${componentLowDashName}.vue'; -import { withInstall } from '../utils/index'; -export const ${upperFullComponentName} = withInstall(${upperComponentName}); -export default ${upperFullComponentName}; -export * from './src/${componentLowDashName}'; - ` - // create index.ts - fs.writeFileSync(`${componentBaseDir}/index.ts`, exportContent) - logCreateFile(`${componentBaseDir}/index.ts`) -} - -function addComponentExport() { - // src/main.ts - // 将YkAlert前替换为添加新增组件后的语句 - const importReplacement = "import YkAlert from './components/alert';" - const newImport = `import ${upperFullComponentName} from './components/${componentLowDashName}';\n${importReplacement}` - // replace import and export component - const componentsReplacement = `YkAlert,` - // 读取文件内容 - fs.readFile(packageIndexFile, 'utf8', (err, data) => { - if (err) { - console.error(err) - return - } - const replacedData = data - .replace(importReplacement, newImport) - .replaceAll( - componentsReplacement, - `${upperFullComponentName},\n\t${componentsReplacement}`, - ) - fs.writeFile(packageIndexFile, replacedData, 'utf8', (err) => { - if (err) { - console.error(err) - return - } - log(`${packageIndexFile} 添加组件导出成功`) - }) - }) -} - -// add default demo file -function addDemoFile() { - const exampleBasePath = 'demo/src/examples/' - const examplePath = `${exampleBasePath}${componentLowDashName}/` - mkdirSync(examplePath) - const mdContent = `## ${upperFullComponentName} ${componentDescName} -:::snippet -基本用法 -这里展示基本用法 -<${upperComponentName}Primary/> -::: - ` - fs.writeFileSync(`${examplePath}doc.md`, mdContent) - logCreateFile(`${examplePath}doc.md`) - - fs.writeFileSync( - `${examplePath}/${componentLowDashName}-primary.vue`, - ` - <${tagName}>${tagName}> -`, - ) - log(`基础demo文件 生成完毕`) -} - -function selectAddRouter() { - const barFile = 'demo/src/router/config/components.json' - fs.readFile(barFile, 'utf8', (err, data) => { - if (err) { - warn('路由配置文件读取失败') - warn(err) - process.exit(233) - } - const barData = JSON.parse(data) - const titleList = barData.map( - (item, index) => `${index + 1}: ${item.title}`, - ) - // select and add classify routers - console.log( - chalk.yellow(`请选择${componentDescName}所属的组件分类:\n`), - titleList, - ) - rl.question(chalk.yellow('请输入您的选择 (数字):'), (answer) => { - barData[Number(answer) - 1].list.push({ - name: `${upperComponentName} ${componentDescName}`, - src: componentLowDashName, - }) - fs.writeFile(barFile, JSON.stringify(barData, null, 2), 'utf8', (err) => { - if (err) { - warn(err) - return - } - log( - `${barFile} ${componentDescName}组件已添加至${ - titleList[answer - 1] - }路由类目下`, - ) - }) - rl.close() - log('已完成组件目录及初始化文件的创建') - }) - }) -} - -function addRouter() { - // add doc.md into general.ts - const generalRouterPath = 'demo/src/router/modules/general.ts' - - const addRouterContent = ` { - path: '${componentLowDashName}', - component: () => import('@/examples/${componentLowDashName}/doc.md'), - }, -]` - fs.readFile(generalRouterPath, 'utf8', (err, data) => { - if (err) { - warn(err) - return - } - const replacedData = data.replace(']', addRouterContent) - fs.writeFile(generalRouterPath, replacedData, 'utf8', (err) => { - if (err) { - warn(err) - return - } - log(`${generalRouterPath} demo路由添加成功`) - selectAddRouter() - }) - }) -} - -createComponentMainFiles() - -addComponentExport() - -addDemoFile() - -addRouter() diff --git a/demo/env.d.ts b/demo/env.d.ts deleted file mode 100644 index 9b4e98bb..00000000 --- a/demo/env.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -/// - -declare module '*.md' { - import type { Component } from 'vue' - const Component: Component - export default Component -} diff --git a/demo/plugins/resolver.ts b/demo/plugins/resolver.ts deleted file mode 100644 index 7c73ea1a..00000000 --- a/demo/plugins/resolver.ts +++ /dev/null @@ -1,51 +0,0 @@ -import fs from 'fs'; - -const entry = '../packages/yike-design-ui/src/index.ts'; -const fileContent = fs.readFileSync(entry, 'utf-8'); -const yikeSrcPath = '@yike-design/ui/src'; -const compPaths = {}; - -parseImportStatements(fileContent); - -export default function YikeDevResolver(compName: string) { - if (compName.startsWith('Yk')) { - return { - name: compName, - from: yikeSrcPath, - sideEffects: sideEffects(compPaths[compName]), - }; - } - if (compName.startsWith('Icon')) { - return { - name: compName, - from: `${yikeSrcPath}/components/svg-icon`, - }; - } -} - -// 提取导入路径和组件名称 -function parseImportStatements(content: string) { - /** @see https://regex101.com/r/jJfLJO/1 */ - const importRegex = /import\s+({[^}]+}|[^{}\n]+)\s+from\s+['"](.+)['"]/g; - let match: RegExpExecArray; - - while ((match = importRegex.exec(content))) { - const [, compNames, _compPath] = match; - const compPath = _compPath.split('/').pop(); - - if (compNames.at(0) === '{') { - compNames - .replace(/[{\s}]/g, '') - .split(',') - .forEach((item) => { - if (item) compPaths[item] = compPath; - }); - } else { - compPaths[compNames.trim()] = compPath; - } - } -} - -function sideEffects(name: string) { - return `@yike-design/ui/src/components/${name}/style`; -} diff --git a/demo/src/examples/icon/icon-list.vue b/demo/src/examples/icon/icon-list.vue deleted file mode 100644 index 6b030971..00000000 --- a/demo/src/examples/icon/icon-list.vue +++ /dev/null @@ -1,109 +0,0 @@ - - - - - - {{ listItem.title }} - - - - - - {{ getRealName(listItem, item.name) }} - - - - - - - - - diff --git a/demo/src/views/develop/getting-started.md b/demo/src/views/develop/getting-started.md deleted file mode 100644 index 67dd4491..00000000 --- a/demo/src/views/develop/getting-started.md +++ /dev/null @@ -1,5 +0,0 @@ -## 快速上手 - -### 我们需要告诉别人如何去使用这套组件 - -这里编写组件的安装和使用说明 diff --git a/package.json b/package.json index bcb90627..ed72a318 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,9 @@ "private": true, "type": "module", "scripts": { - "prepare": "pnpm --filter @yike-design/build build && pnpm gen:icon", + "prepare": "pnpm --filter @yike-design/build build && pnpm --filter @yike-design/resolver build && pnpm gen:icon", "dev:demo": "pnpm --filter demo dev", + "test": "pnpm --filter demo-test dev", "build:demo": "pnpm --filter demo build", "preview:demo": "pnpm --filter demo preview", "eslint": "npx eslint --ext .ts,.tsx,.js,.jsx,.vue . --fix", @@ -16,11 +17,11 @@ "postinstall": "npx husky install", "preinstall": "npx only-allow pnpm", "version:release": "pnpm --filter @yike-design/ui release", - "build:comp": "pnpm --filter @yike-design/ui build:comp", - "build:less": "pnpm --filter @yike-design/ui build:less", + "build:comp": "pnpm --filter @yike-design/build build && pnpm --filter @yike-design/ui build:comp && pnpm --filter @yike-design/ui build:less", + "build:less": "pnpm --filter @yike-design/build build && pnpm --filter @yike-design/ui build:less", "gen:icon": "pnpm --filter @yike-design/ui gen:icon", - "test": "pnpm --filter @yike-design/test test", - "test:coverage": "pnpm --filter @yike-design/test test:coverage" + "gen:less": "pnpm --filter @yike-design/ui gen:less", + "build:resolver": "pnpm --filter @yike-design/resolver build" }, "dependencies": { "dayjs": "^1.11.9", @@ -31,6 +32,12 @@ "@types/node": "^18.11.12", "@typescript-eslint/eslint-plugin": "^6.2.1", "@typescript-eslint/parser": "^6.2.1", + "@babel/core": "^7.14.6", + "@babel/plugin-proposal-class-properties": "^7.14.5", + "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.15.0", + "@babel/preset-env": "^7.14.7", + "@babel/preset-typescript": "^7.14.5", "@vitejs/plugin-vue": "^4.2.3", "@vitejs/plugin-vue-jsx": "^3.0.1", "eslint": "^8.46.0", diff --git a/packages/demo-test/.gitignore b/packages/demo-test/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/packages/demo-test/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/demo-test/.vscode/extensions.json b/packages/demo-test/.vscode/extensions.json new file mode 100644 index 00000000..c0a6e5a4 --- /dev/null +++ b/packages/demo-test/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] +} diff --git a/packages/demo-test/README.md b/packages/demo-test/README.md new file mode 100644 index 00000000..ef72fd52 --- /dev/null +++ b/packages/demo-test/README.md @@ -0,0 +1,18 @@ +# Vue 3 + TypeScript + Vite + +This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` +