feat: add a template for vue (#2211)

* fix: preset-vue (#2143)

* fix: repository field may be empty

* fix: give unique filename for each demo

* fix: limit the resolve rule to the demo

* fix: vue jsx import isssue

* fix: multi vue instance issue in mfsu mode

* chore: remove comments

* feat: support lastest vue

* fix: vue live demo

* feat: using import instead of require for demo context

* fix: use singleton vue

* refactor: avoid unnecessary chunk split

* fix: illegal characters in the path under Windows

`:` should not allowed to be contained in `api.key` cause it may be used in `api.writeTmpFile`

#2188

* fix: the include/exclude in webpack needs to correspond to the path format of the system

* feat: add basic vue lib template

* feat: improve vue tempalte

* fix: template test file impact

suites/boilerplate/src/index.ts

@@ -47,6 +47,7 @@ export default async ({
         choices: [
           { title: 'Static Site', value: 'site' },
           { title: 'React Library', value: 'react' },
+          { title: 'Vue Library', value: 'vue' },
           { title: 'Theme Package', value: 'theme' },
         ],
         initial: 0,
@@ -75,6 +76,7 @@ export default async ({
   const descriptions = {
     site: 'A static site based on dumi',
     react: 'A react library developed with dumi',
+    vue: 'A vue library developed with dumi',
     theme: 'A theme package for dumi',
   };
   const questions: prompts.PromptObject[] = [
@@ -125,6 +127,16 @@ export default async ({
         return 'NPM package name is required';
       },
     });
+  } else if (type === 'vue') {
+    questions.unshift({
+      name: 'name',
+      type: 'text',
+      message: 'Input NPM package name',
+      validate: (value: string) => {
+        if (value && value.trim()) return true;
+        return 'NPM package name is required';
+      },
+    });
   }
 
   const generator = new BaseGenerator({

suites/boilerplate/templates/vue/.dumirc.ts.tpl

@@ -0,0 +1,13 @@
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  apiParser: {},
+  resolve: {
+    entryFile: 'src/index.ts',
+  },
+  outputPath: 'docs-dist',
+  themeConfig: {
+    name: '{{{ name }}}',
+  },
+  presets: [require.resolve('@dumijs/preset-vue')],
+});

suites/boilerplate/templates/vue/.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

suites/boilerplate/templates/vue/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  extends: ['plugin:vue/vue3-recommended'],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {},
+};

suites/boilerplate/templates/vue/.gitignore.tpl

@@ -0,0 +1,7 @@
+node_modules
+/dist
+.dumi/tmp
+.dumi/tmp-test
+.dumi/tmp-production
+.DS_Store
+/coverage

suites/boilerplate/templates/vue/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx commitlint --edit "${1}"

suites/boilerplate/templates/vue/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

suites/boilerplate/templates/vue/.prettierignore

@@ -0,0 +1,2 @@
+/dist
+*.yaml

suites/boilerplate/templates/vue/.prettierrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  pluginSearchDirs: false,
+  plugins: [
+    require.resolve('prettier-plugin-organize-imports'),
+    require.resolve('prettier-plugin-packagejson'),
+  ],
+  printWidth: 80,
+  proseWrap: 'never',
+  singleQuote: true,
+  trailingComma: 'all',
+  overrides: [
+    {
+      files: '*.md',
+      options: {
+        proseWrap: 'preserve',
+      },
+    },
+  ],
+};

suites/boilerplate/templates/vue/.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@umijs/lint/dist/config/stylelint"
+}

suites/boilerplate/templates/vue/LICENSE.tpl

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) {{{ author }}}
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

suites/boilerplate/templates/vue/README.md.tpl

@@ -0,0 +1,64 @@
+# {{{ name }}}
+
+[![NPM version](https://img.shields.io/npm/v/{{{ name }}}.svg?style=flat)](https://npmjs.org/package/{{{ name }}})
+[![NPM downloads](http://img.shields.io/npm/dm/{{{ name }}}.svg?style=flat)](https://npmjs.org/package/{{{ name }}})
+
+{{{ description }}}
+
+## Usage
+
+First, introduce css file:
+
+```ts
+import '{{ name }}/dist/style.css';
+```
+
+Then, introduce components:
+
+```html
+<script setup lang="ts">
+  import { Foo, Bar } from '{{ name }}';
+</script>
+```
+
+## Options
+
+TODO
+
+## Development
+
+```bash
+# install dependencies
+$ {{ npmClient }} install
+
+# develop library by docs demo
+$ {{ npmClient }} start
+
+# build library source code
+$ {{ npmClient }} run build
+
+# build library source code in watch mode
+$ {{ npmClient }} run build:watch
+
+# build docs
+$ {{ npmClient }} run docs:build
+
+# Locally preview the production build.
+$ {{ npmClient }} run docs:preview
+
+# check your project for potential problems
+$ {{ npmClient }} run doctor
+
+# Test
+$ {{ npmClient }} test
+
+# Coverage
+$ {{ npmClient }} test:cov
+
+# Lint
+$ {{ npmClient }} lint
+```
+
+## LICENSE
+
+MIT

suites/boilerplate/templates/vue/docs/guide.md

@@ -0,0 +1 @@
+This is a guide example.

suites/boilerplate/templates/vue/docs/index.md.tpl

@@ -0,0 +1,22 @@
+---
+hero:
+  title: library
+  description: {{{ description }}}
+  actions:
+    - text: Hello
+      link: /
+    - text: Vue
+      link: /
+features:
+  - title: Hello
+    emoji: 💎
+    description: Put hello description here
+  - title: Vue
+    emoji: 🌈
+    description: Put world description here
+  - title: '!'
+    emoji: 🚀
+    description: Put ! description here
+---
+
+{{{ name }}}

suites/boilerplate/templates/vue/package.json.tpl

@@ -0,0 +1,103 @@
+{
+  "name": "{{{ name }}}",
+  "version": "0.0.1",
+  "description": "{{{ description }}}",
+  "scripts": {
+    "build": "vite build && vue-tsc --project ./tsconfig.build.json",
+    "build:watch": "vite build --watch",
+    "dev": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:preview": "dumi preview",
+    "lint": "npm run lint:es && npm run lint:css",
+    "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
+    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx,vue}\"",
+    "prepare": "husky install && dumi setup",
+    "prepublishOnly": "npm run test && npm run build",
+    "start": "npm run dev",
+    "test": "vitest",
+    "test:cov": "vitest --coverage",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "authors": [{{#author}}
+    "{{{ author }}}"
+  {{/author}}],
+  "repository": {
+    "type": "git"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/typings/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/typings/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{md,json}": [
+      "prettier --write --no-error-on-unmatched-pattern"
+    ],
+    "*.{css,less}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@dumijs/preset-vue": "^2.4.12",
+    "@eslint/js": "^9.11.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "@umijs/lint": "^4.3.24",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vue/test-utils": "^2.4.6",
+    "dumi": "{{{ version }}}",
+    "eslint": "^8.57.1",
+    "eslint-plugin-vue": "^9.17.0",
+    "happy-dom": "^15.7.4",
+    "husky": "^8.0.1",
+    "less": "^4.2.0",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^3.0.0",
+    "prettier-plugin-packagejson": "^2.2.18",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "stylelint": "^14.9.1",
+    "typescript": "~5.5.4",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.1",
+    "vue": "^3.5.10",
+    "vue-tsc": "^2.1.6"
+  }
+}

suites/boilerplate/templates/vue/src/Bar/Bar.test.ts.tpl

@@ -0,0 +1,15 @@
+import { mount, type VueWrapper } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+import Bar from './RootBar.vue';
+
+describe('Bar', () => {
+  let wrapper: VueWrapper<InstanceType<typeof Bar>>;
+
+  beforeEach(() => {
+    wrapper = mount(Bar, { props: { icon: 'V' } });
+  });
+
+  it('should render', () => {
+    expect(wrapper.html()).contain('V');
+  });
+});