@jackie_qian/create-vue-app 1.0.0

package/dist/scaffold.js

@@ -0,0 +1,386 @@
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import {
+  applyLatestStableRanges,
+  pathExists,
+  readJson,
+  removePath,
+  sortObjectKeys,
+  writeFileEnsureDir,
+  writeJson,
+} from "./utils/util.js";
+import {
+  renderEnv,
+  renderJsConfig,
+  renderMainJs,
+  renderRouter,
+  renderStore,
+  renderViteConfig,
+} from "./templates/index.js";
+export function getExampleTemplateDir() {
+  return new URL("../gen-js/", import.meta.url).pathname;
+}
+export async function updateTsconfigTypes(projectDir, typesToAdd) {
+  const candidates = [
+    path.join(projectDir, "tsconfig.app.json"),
+    path.join(projectDir, "tsconfig.json"),
+  ];
+  for (const p of candidates) {
+    if (!(await pathExists(p))) continue;
+    const json = await readJson(p);
+    json.compilerOptions ??= {};
+    const current = Array.isArray(json.compilerOptions.types)
+      ? json.compilerOptions.types
+      : [];
+    const merged = Array.from(new Set([...current, ...typesToAdd]));
+    json.compilerOptions.types = merged;
+    await writeJson(p, json);
+    return;
+  }
+}
+export async function patchTsconfigApp(projectDir) {
+  const p = path.join(projectDir, "tsconfig.app.json");
+  if (!(await pathExists(p))) return;
+  const json = await readJson(p);
+  json.compilerOptions ??= {};
+  json.compilerOptions.baseUrl ??= ".";
+  json.compilerOptions.resolveJsonModule ??= true;
+  json.compilerOptions.paths ??= {};
+  json.compilerOptions.paths["#/*"] ??= ["./src/types/*"];
+  await writeJson(p, json);
+}
+export async function ensureCounterStoreInModules(targetDir, language) {
+  const ext = language === "ts" ? "ts" : "js";
+  const oldPath = path.join(targetDir, `src/stores/counter.${ext}`);
+  const newPath = path.join(targetDir, `src/stores/modules/counter.${ext}`);
+  const patchImportsInFile = async (filePath) => {
+    const raw = await fs.readFile(filePath, "utf8");
+    const next = raw.replace(
+      /((?:@\/|~\/|(?:\.\.?\/)+)stores\/)counter\b/g,
+      "$1modules/counter",
+    );
+    if (next !== raw) await fs.writeFile(filePath, next, "utf8");
+  };
+  const patchImportsInSrc = async () => {
+    const srcRoot = path.join(targetDir, "src");
+    if (!(await pathExists(srcRoot))) return;
+    const walk = async (dir) => {
+      const entries = await fs.readdir(dir, { withFileTypes: true });
+      for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+          await walk(fullPath);
+          continue;
+        }
+        if (!entry.isFile()) continue;
+        if (!/\.(?:[cm]?js|[cm]?ts|vue|jsx|tsx)$/.test(entry.name)) continue;
+        await patchImportsInFile(fullPath);
+      }
+    };
+    await walk(srcRoot);
+  };
+  if (await pathExists(newPath)) {
+    if (await pathExists(oldPath)) await removePath(oldPath);
+    await patchImportsInSrc();
+    return;
+  }
+  if (await pathExists(oldPath)) {
+    const raw = await fs.readFile(oldPath, "utf8");
+    await writeFileEnsureDir(newPath, raw);
+    await removePath(oldPath);
+    await patchImportsInSrc();
+    return;
+  }
+  await writeFileEnsureDir(
+    newPath,
+    `import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
+`,
+  );
+}
+export async function applyExampleTemplateJs(targetDir, projectName, features) {
+  const pkgPath = path.join(targetDir, "package.json");
+  const pkg = await readJson(pkgPath);
+  pkg.name = projectName;
+  pkg.dependencies ??= {};
+  pkg.devDependencies ??= {};
+  pkg.scripts ??= {};
+  const removeDep = (obj, name) => {
+    if (obj[name]) delete obj[name];
+  };
+  if (!features.has("router")) removeDep(pkg.dependencies, "vue-router");
+  if (!features.has("pinia")) {
+    removeDep(pkg.dependencies, "pinia");
+    removeDep(pkg.dependencies, "pinia-plugin-persistedstate");
+  } else if (!features.has("piniaPersist")) {
+    removeDep(pkg.dependencies, "pinia-plugin-persistedstate");
+  }
+  if (!features.has("vant")) removeDep(pkg.dependencies, "vant");
+  if (!features.has("elementPlus")) removeDep(pkg.dependencies, "element-plus");
+  if (features.has("vant")) pkg.dependencies.vant ??= "^4.9.22";
+  if (features.has("elementPlus"))
+    pkg.dependencies["element-plus"] ??= "^2.7.6";
+  if (!features.has("pages"))
+    removeDep(pkg.devDependencies, "vite-plugin-pages");
+  if (!features.has("autoImport"))
+    removeDep(pkg.devDependencies, "unplugin-auto-import");
+  if (!features.has("components"))
+    removeDep(pkg.devDependencies, "unplugin-vue-components");
+  if (features.has("vant"))
+    pkg.devDependencies["@vant/auto-import-resolver"] ??= "^1.3.0";
+  if (!features.has("unocss")) removeDep(pkg.devDependencies, "unocss");
+  if (!features.has("eslintAntfu")) {
+    removeDep(pkg.devDependencies, "eslint");
+    removeDep(pkg.devDependencies, "@antfu/eslint-config");
+  }
+  if (!features.has("stylelint")) {
+    removeDep(pkg.devDependencies, "stylelint");
+    removeDep(pkg.devDependencies, "@stylistic/stylelint-config");
+    removeDep(pkg.devDependencies, "stylelint-config-recess-order");
+    removeDep(pkg.devDependencies, "stylelint-config-standard-scss");
+    removeDep(pkg.devDependencies, "stylelint-config-standard-vue");
+    removeDep(pkg.devDependencies, "stylelint-scss");
+  }
+  if (!features.has("sassEmbedded"))
+    removeDep(pkg.devDependencies, "sass-embedded");
+  if (features.has("eslintAntfu") && features.has("stylelint")) {
+    pkg.scripts.lint = "npm-run-all -s lint:eslint lint:stylelint";
+    pkg.scripts["lint:eslint"] = "eslint --fix";
+    pkg.scripts["lint:stylelint"] = 'stylelint "src/**/*.{css,scss,vue}" --fix';
+  } else if (features.has("eslintAntfu")) {
+    pkg.scripts.lint = "eslint --fix";
+    delete pkg.scripts["lint:eslint"];
+    delete pkg.scripts["lint:stylelint"];
+  } else if (features.has("stylelint")) {
+    pkg.scripts.lint = 'stylelint "src/**/*.{css,scss,vue}" --fix';
+    delete pkg.scripts["lint:eslint"];
+    delete pkg.scripts["lint:stylelint"];
+  } else {
+    delete pkg.scripts.lint;
+    delete pkg.scripts["lint:eslint"];
+    delete pkg.scripts["lint:stylelint"];
+  }
+  if (!features.has("eslintAntfu") || !features.has("stylelint"))
+    removeDep(pkg.devDependencies, "npm-run-all2");
+  if (features.has("gitHooks")) {
+    pkg.devDependencies["simple-git-hooks"] ??= "^2.11.1";
+    pkg.devDependencies["lint-staged"] ??= "^15.2.0";
+    pkg.scripts.prepare = "simple-git-hooks";
+    pkg["simple-git-hooks"] = {
+      "pre-commit": "pnpm lint-staged",
+      preserveUnused: true,
+    };
+    pkg["lint-staged"] = { "*.{js,ts,vue}": "pnpm lint" };
+  } else {
+    removeDep(pkg.devDependencies, "simple-git-hooks");
+    removeDep(pkg.devDependencies, "lint-staged");
+    if (pkg.scripts.prepare === "simple-git-hooks") delete pkg.scripts.prepare;
+    delete pkg["simple-git-hooks"];
+    delete pkg["lint-staged"];
+  }
+  if (pkg.scripts) pkg.scripts = sortObjectKeys(pkg.scripts);
+  if (pkg.dependencies) pkg.dependencies = sortObjectKeys(pkg.dependencies);
+  if (pkg.devDependencies)
+    pkg.devDependencies = sortObjectKeys(pkg.devDependencies);
+  await applyLatestStableRanges(pkg, targetDir);
+  if (pkg.dependencies) pkg.dependencies = sortObjectKeys(pkg.dependencies);
+  if (pkg.devDependencies)
+    pkg.devDependencies = sortObjectKeys(pkg.devDependencies);
+  await writeJson(pkgPath, pkg);
+  await writeFileEnsureDir(
+    path.join(targetDir, "vite.config.js"),
+    renderViteConfig("js", features),
+  );
+  await writeFileEnsureDir(
+    path.join(targetDir, "src/main.js"),
+    renderMainJs(features),
+  );
+  await writeFileEnsureDir(
+    path.join(targetDir, ".env.development"),
+    renderEnv("TITLE"),
+  );
+  await writeFileEnsureDir(
+    path.join(targetDir, ".env.production"),
+    renderEnv("TITLE"),
+  );
+  await writeFileEnsureDir(
+    path.join(targetDir, "jsconfig.json"),
+    renderJsConfig(),
+  );
+  if (!features.has("unocss"))
+    await removePath(path.join(targetDir, "uno.config.js"));
+  if (!features.has("router")) {
+    await removePath(path.join(targetDir, "src/router"));
+    await writeFileEnsureDir(
+      path.join(targetDir, "src/App.vue"),
+      `<template>
+  <div>
+    <h1>Hello World</h1>
+  </div>
+</template>
+`,
+    );
+  } else {
+    const router = renderRouter("js", features.has("pages"));
+    await writeFileEnsureDir(
+      path.join(targetDir, router.fileName),
+      router.content,
+    );
+  }
+  if (!features.has("pinia")) {
+    await removePath(path.join(targetDir, "src/stores"));
+  } else {
+    const store = renderStore("js", features.has("piniaPersist"));
+    await writeFileEnsureDir(
+      path.join(targetDir, store.fileName),
+      store.content,
+    );
+    await ensureCounterStoreInModules(targetDir, "js");
+  }
+  if (!features.has("eslintAntfu"))
+    await removePath(path.join(targetDir, "eslint.config.js"));
+  if (!features.has("stylelint"))
+    await removePath(path.join(targetDir, "stylelint.config.js"));
+  if (!features.has("autoImport"))
+    await removePath(path.join(targetDir, "src/types/auto-import.d.ts"));
+  if (!features.has("components"))
+    await removePath(path.join(targetDir, "src/types/components.d.ts"));
+  if (!features.has("sassEmbedded"))
+    await removePath(path.join(targetDir, "src/assets/styles"));
+}
+export async function writeEslintConfig(targetDir, features) {
+  if (!features.has("eslintAntfu")) return;
+  const withAutoImportGlobals = features.has("autoImport");
+  const autoImportLine = withAutoImportGlobals
+    ? `import autoImportGlobals from './.eslintrc-auto-import.json' with { type: 'json' }\n\n`
+    : "";
+  const autoImportConfig = withAutoImportGlobals
+    ? `,
+  {
+    languageOptions: {
+      globals: autoImportGlobals.globals
+    }
+  }`
+    : "";
+  await writeFileEnsureDir(
+    path.join(targetDir, "eslint.config.js"),
+    `import antfu from '@antfu/eslint-config'
+${autoImportLine}export default antfu(
+  {
+    type: 'app',
+    ignores: [
+      'public',
+      'dist',
+      'node_modules'
+    ]
+  }${autoImportConfig}
+)
+`,
+  );
+}
+export async function writeStylelintConfig(targetDir, features) {
+  if (!features.has("stylelint")) return;
+  await writeFileEnsureDir(
+    path.join(targetDir, "stylelint.config.js"),
+    `export default {
+  extends: [
+    'stylelint-config-standard-scss',
+    'stylelint-config-standard-vue/scss',
+    'stylelint-config-recess-order',
+    '@stylistic/stylelint-config'
+  ],
+  plugins: [
+    'stylelint-scss'
+  ],
+  rules: {
+    'at-rule-no-unknown': null,
+    'no-descending-specificity': null,
+    'property-no-unknown': null,
+    'font-family-no-missing-generic-family-keyword': null,
+    'selector-class-pattern': null,
+    'function-no-unknown': [
+      true,
+      {
+        ignoreFunctions: [
+          'v-bind',
+          'map-get',
+          'lighten',
+          'darken'
+        ]
+      }
+    ],
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: [
+          '/^view-transition/'
+        ]
+      }
+    ],
+    'scss/double-slash-comment-empty-line-before': null,
+    'scss/no-global-function-names': null,
+    '@stylistic/max-line-length': null,
+    '@stylistic/block-closing-brace-newline-after': [
+      'always',
+      {
+        ignoreAtRules: [
+          'if',
+          'else'
+        ]
+      }
+    ]
+  },
+  allowEmptyInput: true,
+  ignoreFiles: [
+    'node_modules/**/*',
+    'dist*/**/*'
+  ]
+}
+`,
+  );
+}
+export async function patchMainFile(mainPath, patched) {
+  await fs.writeFile(mainPath, patched, "utf8");
+}
+export async function loadPackageJson(projectPkgPath) {
+  const pkg = await readJson(projectPkgPath);
+  pkg.scripts ??= {};
+  pkg.dependencies ??= {};
+  pkg.devDependencies ??= {};
+  return pkg;
+}
+export function addDep(obj, name, version) {
+  if (!obj[name]) obj[name] = version;
+}
+export async function finalizePackageJson(pkg, projectDir) {
+  if (pkg.scripts) pkg.scripts = sortObjectKeys(pkg.scripts);
+  if (pkg.dependencies) pkg.dependencies = sortObjectKeys(pkg.dependencies);
+  if (pkg.devDependencies)
+    pkg.devDependencies = sortObjectKeys(pkg.devDependencies);
+  await applyLatestStableRanges(pkg, projectDir);
+  if (pkg.dependencies) pkg.dependencies = sortObjectKeys(pkg.dependencies);
+  if (pkg.devDependencies)
+    pkg.devDependencies = sortObjectKeys(pkg.devDependencies);
+}
+export async function writePackageJson(projectPkgPath, pkg) {
+  await writeJson(projectPkgPath, pkg);
+}
+export async function readTextFile(filePath) {
+  return fs.readFile(filePath, "utf8");
+}
+export async function writeTextFile(filePath, content) {
+  await fs.writeFile(filePath, content, "utf8");
+}
+export function renderStoreFile(language, features) {
+  return renderStore(language, features.has("piniaPersist"));
+}

package/dist/templates/index.js

@@ -0,0 +1,17 @@
+export { patchMain } from "./patchMain.js";
+export { renderAppWithRouter } from "./renderAppWithRouter.js";
+export { renderEditorConfig } from "./renderEditorConfig.js";
+export { renderEnv } from "./renderEnv.js";
+export { renderHomeView } from "./renderHomeView.js";
+export { renderJsConfig } from "./renderJsConfig.js";
+export { renderMainJs } from "./renderMainJs.js";
+export { renderPagesIndex } from "./renderPagesIndex.js";
+export { renderRouter } from "./renderRouter.js";
+export { renderStore } from "./renderStore.js";
+export { renderUnoConfig } from "./renderUnoConfig.js";
+export {
+  renderVsCodeExtensions,
+  renderVsCodeSettings,
+} from "./renderVsCodeSettings.js";
+export { renderViteConfig } from "./renderViteConfig.js";
+export { renderViteConfigJs } from "./renderViteConfigJs.js";

package/dist/templates/patchMain.js

@@ -0,0 +1,42 @@
+export function patchMain(content, options) {
+  const mainImports = [];
+  const usesCreateApp = content.includes("createApp(");
+  if (!usesCreateApp) return content;
+  if (options.useUno && !content.includes("virtual:uno.css"))
+    mainImports.push(`import 'virtual:uno.css'`);
+  if (options.useVant && !content.includes("vant/lib/index.css"))
+    mainImports.push(`import 'vant/lib/index.css'`);
+  if (
+    options.useElementPlus &&
+    !content.includes("element-plus/dist/index.css")
+  )
+    mainImports.push(`import 'element-plus/dist/index.css'`);
+  if (options.useRouter && !content.includes("from './router'"))
+    mainImports.push(`import router from './router'`);
+  if (options.useStore && !content.includes("from './stores'"))
+    mainImports.push(`import store from './stores'`);
+  const importBlock = mainImports.length ? `${mainImports.join("\n")}\n` : "";
+  const useBlock = [
+    options.useStore ? "app.use(store)" : "",
+    options.useRouter ? "app.use(router)" : "",
+  ]
+    .filter(Boolean)
+    .join("\n");
+  const withUse = useBlock ? `\n${useBlock}\n` : "\n";
+  const replaced = content.replace(
+    /import\s+\{\s*createApp\s*\}\s+from\s+'vue'\s*\n/,
+    (match) => `${match}${importBlock}`,
+  );
+  if (useBlock) {
+    return replaced
+      .replace(/app\.mount\('#app'\)\s*\n?/, `app.mount('#app')\n`)
+      .replace(
+        /const\s+app\s*=\s*createApp\(App\)\s*\n([\s\S]*?)app\.mount\('#app'\)/,
+        (m, between) => {
+          if (between.includes("app.use(")) return m;
+          return m.replace("app.mount('#app')", `${withUse}app.mount('#app')`);
+        },
+      );
+  }
+  return replaced;
+}

package/dist/templates/renderAppWithRouter.js

@@ -0,0 +1,6 @@
+export function renderAppWithRouter() {
+  return `<template>
+  <RouterView />
+</template>
+`;
+}

package/dist/templates/renderEditorConfig.js

@@ -0,0 +1,16 @@
+export function renderEditorConfig() {
+  return `root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
+`;
+}

package/dist/templates/renderEnv.js

@@ -0,0 +1,8 @@
+export function renderEnv(title) {
+  return `# 页面标题
+VITE_APP_TITLE = ${title}
+
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VITE_APP_API_BASEURL = /
+`;
+}

package/dist/templates/renderHomeView.js

@@ -0,0 +1,8 @@
+export function renderHomeView() {
+  return `<template>
+  <div class="page">
+    <h1>Home</h1>
+  </div>
+</template>
+`;
+}

package/dist/templates/renderJsConfig.js

@@ -0,0 +1,17 @@
+export function renderJsConfig() {
+  return `{
+  "compilerOptions": {
+    "target": "ESNext",
+    "baseUrl": "./",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "allowJs": true
+  },
+  "include": ["src/*.js", "src/**/*.js", "src/**/*.vue", "src/**/*.d.ts"],
+  "exclude": ["node_modules"]
+}
+`;
+}

package/dist/templates/renderMainJs.js

@@ -0,0 +1,22 @@
+export function renderMainJs(featureSet) {
+  const lines = [];
+  lines.push(`import { createApp } from 'vue'`);
+  lines.push("");
+  lines.push(`import App from './App.vue'`);
+  if (featureSet.has("router")) lines.push(`import Router from './router'`);
+  if (featureSet.has("pinia")) lines.push(`import Pinia from './stores/index'`);
+  if (featureSet.has("vant")) lines.push(`import 'vant/lib/index.css'`);
+  if (featureSet.has("elementPlus"))
+    lines.push(`import 'element-plus/dist/index.css'`);
+  if (featureSet.has("sassEmbedded"))
+    lines.push(`import './assets/styles/main.scss'`);
+  lines.push("");
+  lines.push(`const app = createApp(App)`);
+  lines.push("");
+  if (featureSet.has("router")) lines.push(`app.use(Router)`);
+  if (featureSet.has("pinia")) lines.push(`app.use(Pinia)`);
+  lines.push("");
+  lines.push(`app.mount('#app')`);
+  lines.push("");
+  return `${lines.join("\n")}`;
+}

package/dist/templates/renderPagesIndex.js

@@ -0,0 +1,8 @@
+export function renderPagesIndex() {
+  return `<template>
+  <div class="page">
+    <h1>Home</h1>
+  </div>
+</template>
+`;
+}

package/dist/templates/renderRouter.js

@@ -0,0 +1,35 @@
+export function renderRouter(language, usePages) {
+  const ext = language === "ts" ? "ts" : "js";
+  if (usePages) {
+    return {
+      fileName: `src/router/index.${ext}`,
+      content: `import { createRouter, createWebHistory } from 'vue-router'
+import routes from '~pages'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router
+`,
+    };
+  }
+  const importRoutes = `import IndexView from '../views/index.vue'`;
+  const routesDecl = `[
+    { name: 'Index', path: '/', component: IndexView }
+  ]`;
+  return {
+    fileName: `src/router/index.${ext}`,
+    content: `import { createRouter, createWebHistory } from 'vue-router'
+${importRoutes}
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: ${routesDecl}
+})
+
+export default router
+`,
+  };
+}

package/dist/templates/renderStore.js

@@ -0,0 +1,19 @@
+export function renderStore(language, persisted) {
+  const ext = language === "ts" ? "ts" : "js";
+  const lines = [];
+  lines.push(`import { createPinia } from 'pinia'`);
+  if (persisted)
+    lines.push(
+      `import { createPersistedState } from 'pinia-plugin-persistedstate'`,
+    );
+  lines.push("");
+  lines.push("const store = createPinia()");
+  if (persisted) lines.push("store.use(createPersistedState())");
+  lines.push("");
+  lines.push("export default store");
+  lines.push("");
+  return {
+    fileName: `src/stores/index.${ext}`,
+    content: `${lines.join("\n")}`,
+  };
+}

package/dist/templates/renderUnoConfig.js

@@ -0,0 +1,19 @@
+export function renderUnoConfig(language) {
+  return `import { defineConfig, presetAttributify, presetWind3, transformerDirectives } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetAttributify(),
+    presetWind3()
+  ],
+  transformers: [
+    transformerDirectives()
+  ],
+  layers: {
+    components: -1,
+    default: 1,
+    utilities: 2
+  }
+})
+`;
+}