@jackie_qian/create-vue-app 1.0.0

package/dist/templates/renderViteConfig.js

@@ -0,0 +1,118 @@
+import { renderViteConfigJs } from "./renderViteConfigJs.js";
+export function renderViteConfig(language, featureSet) {
+  if (language === "js") return renderViteConfigJs(featureSet);
+  const formatStringArray = (items) =>
+    `[${items.map((i) => `'${i}'`).join(", ")}]`;
+  const indent = (input, spaces) => {
+    const pad = " ".repeat(spaces);
+    return input
+      .split("\n")
+      .map((line) => `${pad}${line}`)
+      .join("\n");
+  };
+  const isTs = true;
+  const usePages = featureSet.has("pages");
+  const useAutoImport = featureSet.has("autoImport");
+  const useComponents = featureSet.has("components");
+  const useVant = featureSet.has("vant");
+  const useElementPlus = featureSet.has("elementPlus");
+  const useUno = featureSet.has("unocss");
+  const useEslint = featureSet.has("eslintAntfu");
+  const externalImports = [];
+  externalImports.push({
+    source: "@vitejs/plugin-vue",
+    line: `import vue from '@vitejs/plugin-vue'`,
+  });
+  externalImports.push({
+    source: "vite",
+    line: `import { defineConfig } from 'vite'`,
+  });
+  if (useVant)
+    externalImports.push({
+      source: "@vant/auto-import-resolver",
+      line: `import { VantResolver } from '@vant/auto-import-resolver'`,
+    });
+  if (useUno)
+    externalImports.push({
+      source: "unocss/vite",
+      line: `import UnoCSS from 'unocss/vite'`,
+    });
+  if (useAutoImport)
+    externalImports.push({
+      source: "unplugin-auto-import/vite",
+      line: `import AutoImport from 'unplugin-auto-import/vite'`,
+    });
+  if (useElementPlus)
+    externalImports.push({
+      source: "unplugin-vue-components/resolvers",
+      line: `import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'`,
+    });
+  if (useComponents)
+    externalImports.push({
+      source: "unplugin-vue-components/vite",
+      line: `import Components from 'unplugin-vue-components/vite'`,
+    });
+  if (usePages)
+    externalImports.push({
+      source: "vite-plugin-pages",
+      line: `import Pages from 'vite-plugin-pages'`,
+    });
+  externalImports.sort((a, b) => a.source.localeCompare(b.source));
+  const importLines = [
+    `import { fileURLToPath, URL } from 'node:url'`,
+    ...externalImports.map((i) => i.line),
+  ];
+  const plugins = [];
+  if (usePages) {
+    const dirs = isTs ? "src/pages" : "src/views";
+    const extensions = isTs ? `['vue', 'ts']` : `['vue', 'js']`;
+    plugins.push(`Pages({
+  dirs: '${dirs}',
+  extensions: ${extensions},
+  importMode: 'async'
+})`);
+  }
+  const resolverItems = [];
+  if (useVant) resolverItems.push("VantResolver()");
+  if (useElementPlus) resolverItems.push("ElementPlusResolver()");
+  const resolvers = resolverItems.length
+    ? `[${resolverItems.join(", ")}]`
+    : `[]`;
+  if (useAutoImport) {
+    const imports = ["vue"];
+    if (featureSet.has("router")) imports.push("vue-router");
+    if (featureSet.has("pinia")) imports.push("pinia");
+    const eslintrc = useEslint
+      ? `,
+  eslintrc: { enabled: true }`
+      : "";
+    plugins.push(`AutoImport({
+  resolvers: ${resolvers},
+  imports: ${formatStringArray(imports)},
+  dts: 'src/types/auto-import.d.ts',
+  vueTemplate: true${eslintrc}
+})`);
+  }
+  if (useComponents) {
+    plugins.push(`Components({
+  resolvers: ${resolvers},
+  dts: 'src/types/components.d.ts'
+})`);
+  }
+  if (useUno) plugins.push(`UnoCSS()`);
+  plugins.push("vue()");
+  const pluginsBlock = plugins.map((p) => indent(p, 4)).join(",\n");
+  return `${importLines.join("\n")}
+
+export default defineConfig({
+  plugins: [
+${pluginsBlock}
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
+`;
+}

package/dist/templates/renderViteConfigJs.js

@@ -0,0 +1,104 @@
+export function renderViteConfigJs(featureSet) {
+  const usePages = featureSet.has("pages");
+  const useAutoImport = featureSet.has("autoImport");
+  const useComponents = featureSet.has("components");
+  const useUno = featureSet.has("unocss");
+  const useVant = featureSet.has("vant");
+  const useElementPlus = featureSet.has("elementPlus");
+  const externalImports = [];
+  externalImports.push({
+    source: "@vitejs/plugin-vue",
+    line: `import vue from '@vitejs/plugin-vue'`,
+  });
+  externalImports.push({
+    source: "vite",
+    line: `import { defineConfig } from 'vite'`,
+  });
+  externalImports.push({
+    source: "vite-plugin-vue-devtools",
+    line: `import vueDevTools from 'vite-plugin-vue-devtools'`,
+  });
+  if (useVant)
+    externalImports.push({
+      source: "@vant/auto-import-resolver",
+      line: `import { VantResolver } from '@vant/auto-import-resolver'`,
+    });
+  if (useUno)
+    externalImports.push({
+      source: "unocss/vite",
+      line: `import UnoCSS from 'unocss/vite'`,
+    });
+  if (useAutoImport)
+    externalImports.push({
+      source: "unplugin-auto-import/vite",
+      line: `import AutoImport from 'unplugin-auto-import/vite'`,
+    });
+  if (useElementPlus)
+    externalImports.push({
+      source: "unplugin-vue-components/resolvers",
+      line: `import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'`,
+    });
+  if (useComponents)
+    externalImports.push({
+      source: "unplugin-vue-components/vite",
+      line: `import Components from 'unplugin-vue-components/vite'`,
+    });
+  if (usePages)
+    externalImports.push({
+      source: "vite-plugin-pages",
+      line: `import Pages from 'vite-plugin-pages'`,
+    });
+  externalImports.sort((a, b) => a.source.localeCompare(b.source));
+  const importLines = [
+    `import { fileURLToPath, URL } from 'node:url'`,
+    ...externalImports.map((i) => i.line),
+  ];
+  const plugins = [];
+  const resolverItems = [];
+  if (useVant) resolverItems.push("VantResolver()");
+  if (useElementPlus) resolverItems.push("ElementPlusResolver()");
+  const resolvers = resolverItems.length
+    ? `[${resolverItems.join(", ")}]`
+    : "[]";
+  if (usePages) {
+    plugins.push(`Pages({
+      dirs: 'src/views',
+      extensions: ['vue', 'ts'],
+      importMode: 'async'
+    })`);
+  }
+  if (useComponents) {
+    plugins.push(`Components({
+      resolvers: ${resolvers},
+      dts: 'src/types/components.d.ts',
+      dirs: ['src/components']
+    })`);
+  }
+  if (useAutoImport) {
+    const imports = featureSet.has("pinia") ? `['vue', 'pinia']` : `['vue']`;
+    plugins.push(`AutoImport({
+      resolvers: ${resolvers},
+      imports: ${imports},
+      dts: 'src/types/auto-import.d.ts',
+      dirs: ['src/hooks'],
+      vueTemplate: true
+    })`);
+  }
+  if (useUno) plugins.push(`UnoCSS()`);
+  plugins.push(`vue()`);
+  plugins.push(`vueDevTools()`);
+  return `${importLines.join("\n")}
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    ${plugins.join(",\n    ")}
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
+`;
+}

package/dist/templates/renderVsCodeSettings.js

@@ -0,0 +1,55 @@
+export function renderVsCodeSettings() {
+  return `{
+  "eslint.useFlatConfig": true,
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "stylelint.validate": [
+    "css",
+    "postcss",
+    "scss",
+    "vue"
+  ],
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ],
+  "css.lint.unknownAtRules": "ignore",
+  "scss.lint.unknownAtRules": "ignore",
+  "scss.lint.unknownProperties": "ignore",
+  "cSpell.enabled": false
+}
+`;
+}
+export function renderVsCodeExtensions(language, features) {
+  const recommendations = new Set();
+  recommendations.add("Vue.volar");
+  recommendations.add("EditorConfig.EditorConfig");
+  if (features.has("eslintAntfu"))
+    recommendations.add("dbaeumer.vscode-eslint");
+  if (features.has("stylelint"))
+    recommendations.add("stylelint.vscode-stylelint");
+  if (features.has("unocss")) recommendations.add("antfu.unocss");
+  const sorted = Array.from(recommendations).sort((a, b) => a.localeCompare(b));
+  const lines = [
+    "{",
+    '  "recommendations": [',
+    ...sorted.map(
+      (id, idx) => `    "${id}"${idx === sorted.length - 1 ? "" : ","}`,
+    ),
+    "  ]",
+    "}",
+    "",
+  ];
+  return lines.join("\n");
+}