feat: download template support generate package.json with user input

Author: zhixiaoqiang

package.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "@vue/repl": "^1.0.0",
     "file-saver": "^2.0.5",
-    "jszip": "^3.6.0",
+    "jszip": "^3.9.1",
     "vue": "3.2.31"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -6,17 +6,21 @@ import pkg from './template/package.json?raw'
 import config from './template/vite.config.js?raw'
 import readme from './template/README.md?raw'
 
-export async function downloadProject (store: any) {
+import { handlePackageJson } from './utils'
+import type { ReplStore } from 'src/store'
+
+export async function downloadProject (store: ReplStore) {
+  console.warn('pkg', handlePackageJson(pkg, store))
   if (!confirm('Download project files?')) {
     return
   }
 
   const { default: JSZip } = await import('jszip')
   const zip = new JSZip()
-
+  console.warn('pkg', pkg)
   // basic structure
   zip.file('index.html', index)
-  zip.file('package.json', pkg)
+  zip.file('package.json', handlePackageJson(pkg, store))
   zip.file('vite.config.js', config)
   zip.file('README.md', readme)
 

src/download/download.ts

@@ -1,12 +1,15 @@
 {
-  "name": "vite-vant-starter",
+  "name": "vant-starter",
   "version": "0.0.0",
   "scripts": {
     "build": "vite build",
     "dev": "vite",
     "serve": "vite preview"
   },
   "dependencies": {
+    "@vant/popperjs": "1.1.0",
+    "@vant/touch-emulator": "1.3.2",
+    "@vant/use": "1.3.6",
     "vant": "^3.4.6",
     "vue": "^3.2.0"
   },

src/download/template/package.json

@@ -0,0 +1,61 @@
+import type { ReplStore } from 'src/store'
+
+const DEFAULT_VERSION = '*'
+
+/**
+ * get version map form importMap,
+ *
+ * e.g. {
+ *
+ *  "vue": "https://cdn.jsdelivr.net/npm/@vue/[email protected]/dist/runtime-dom.esm-browser.js",
+
+ *  "@vant/use": "https://cdn.jsdelivr.net/npm/@vant/use/dist/index.esm.js"
+ *
+ * }
+ *
+ * @returns { "vue": "3.2.31", "@vant/use": "*" }
+ */
+export function getPackageVersionMap (imports: Record<string, string>) {
+  return Object.entries(imports).reduce((resultImportMap, [pkgName, pkgPath]) => {
+    const version = `${pkgPath}/`.match(/@((?=\d).+?)(?=\/)/)?.[1]
+    resultImportMap[pkgName] = version ?? DEFAULT_VERSION
+    return resultImportMap
+  }, {} as Record<string, string>)
+}
+
+interface PackageJsonType {
+  'name': string,
+  'version': string,
+  'dependencies': Record<string, string>,
+  'devDependencies': Record<string, string>,
+  [key: string]: any
+}
+
+/**
+ * generate package.json with user input
+ * @param pckJsonStr package.json stringify
+ * @param store {ReplStore}
+ * @returns
+ */
+export function handlePackageJson (pckJsonStr: string, store: ReplStore) {
+  let pkgJson: Partial<PackageJsonType> = {}
+  try {
+    pkgJson = JSON.parse(pckJsonStr)
+  } catch (error) {
+    console.warn('parse package.json error:', error)
+  }
+
+  const imports = store.getImportMap()?.imports
+  if (imports) {
+    const pkgVersionMap = getPackageVersionMap(imports)
+
+    Object.entries(pkgVersionMap).forEach(([pkgName, version]) => {
+      pkgJson.dependencies = {
+        ...pkgJson.dependencies,
+        [pkgName]: version !== DEFAULT_VERSION ? version : pkgJson.dependencies?.[pkgName] ?? version
+      }
+    })
+  }
+
+  return JSON.stringify(pkgJson, null, 2)
+}