From 23d751165f6def6fa6b3a5d7efd89b993a2780d8 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Tue, 8 Aug 2023 21:38:35 +0530
Subject: [PATCH] fix(cli): generate mjs file on init if type: module is not
 present

---
 package.json          |  1 +
 pnpm-lock.yaml        | 13 ++++++++++
 src/node/init/init.ts | 57 ++++++++++++++++++++++---------------------
 3 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index dea138ebd334..1f66db7cd210 100644
--- a/package.json
+++ b/package.json
@@ -124,6 +124,7 @@
     "@types/debug": "^4.1.8",
     "@types/escape-html": "^1.0.2",
     "@types/fs-extra": "^11.0.1",
+    "@types/lodash.template": "^4.5.1",
     "@types/mark.js": "^8.11.8",
     "@types/markdown-it": "^13.0.0",
     "@types/markdown-it-attrs": "^4.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80137906fc7a..efd3a981f07d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,6 +105,9 @@ importers:
       '@types/fs-extra':
         specifier: ^11.0.1
         version: 11.0.1
+      '@types/lodash.template':
+        specifier: ^4.5.1
+        version: 4.5.1
       '@types/mark.js':
         specifier: ^8.11.8
         version: 8.11.8
@@ -1048,6 +1051,16 @@ packages:
     resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
     dev: true
 
+  /@types/lodash.template@4.5.1:
+    resolution: {integrity: sha512-0y71S2dGgmwdkSsyW95JBp8HSZchgKCsjr6F0lsT3eSMtaT3Nn9rcMHU1U4UKu6XjQT3YC6/PNwgFI7k9f+ltw==}
+    dependencies:
+      '@types/lodash': 4.14.196
+    dev: true
+
+  /@types/lodash@4.14.196:
+    resolution: {integrity: sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==}
+    dev: true
+
   /@types/mark.js@8.11.8:
     resolution: {integrity: sha512-BoWCd9ydi1hZxDfu/lF0v1hHMsNUjuxZEDJsdHlmm6GlKk4qxlLya7D3FS81QmabwFbYPpoDOh9603JESUkHbA==}
     dependencies:
diff --git a/src/node/init/init.ts b/src/node/init/init.ts
index fd2c03f75dc8..f68ac3336072 100644
--- a/src/node/init/init.ts
+++ b/src/node/init/init.ts
@@ -11,7 +11,6 @@ import fs from 'fs-extra'
 import path from 'path'
 import { black, cyan, bgCyan, bold, yellow } from 'picocolors'
 import { fileURLToPath } from 'url'
-// @ts-ignore
 import template from 'lodash.template'
 
 export enum ScaffoldThemeType {
@@ -30,13 +29,13 @@ export interface ScaffoldOptions {
 }
 
 export async function init() {
-  intro(bgCyan(bold(black(` Welcome to VitePress! `))))
+  intro(bgCyan(bold(black(' Welcome to VitePress! '))))
 
   const options: ScaffoldOptions = await group(
     {
       root: () =>
         text({
-          message: `Where should VitePress initialize the config?`,
+          message: 'Where should VitePress initialize the config?',
           initialValue: './',
           validate(value) {
             // TODO make sure directory is inside
@@ -45,13 +44,13 @@ export async function init() {
 
       title: () =>
         text({
-          message: `Site title:`,
+          message: 'Site title:',
           placeholder: 'My Awesome Project'
         }),
 
       description: () =>
         text({
-          message: `Site description:`,
+          message: 'Site description:',
           placeholder: 'A VitePress Site'
         }),
 
@@ -60,22 +59,19 @@ export async function init() {
           message: 'Theme:',
           options: [
             {
-              // @ts-ignore
               value: ScaffoldThemeType.Default,
-              label: `Default Theme`,
-              hint: `Out of the box, good-looking docs`
+              label: 'Default Theme',
+              hint: 'Out of the box, good-looking docs'
             },
             {
-              // @ts-ignore
               value: ScaffoldThemeType.DefaultCustom,
-              label: `Default Theme + Customization`,
-              hint: `Add custom CSS and layout slots`
+              label: 'Default Theme + Customization',
+              hint: 'Add custom CSS and layout slots'
             },
             {
-              // @ts-ignore
               value: ScaffoldThemeType.Custom,
-              label: `Custom Theme`,
-              hint: `Build your own or use external`
+              label: 'Custom Theme',
+              hint: 'Build your own or use external'
             }
           ]
         }),
@@ -85,7 +81,7 @@ export async function init() {
 
       injectNpmScripts: () =>
         confirm({
-          message: `Add VitePress npm scripts to package.json?`
+          message: 'Add VitePress npm scripts to package.json?'
         })
     },
     {
@@ -122,11 +118,21 @@ export function scaffold({
       theme === ScaffoldThemeType.DefaultCustom
   }
 
+  const pkgPath = path.resolve('package.json')
+  const userPkg = fs.existsSync(pkgPath)
+    ? JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+    : {}
+
+  const useMjs = userPkg.type !== 'module'
+
   const renderFile = (file: string) => {
     const filePath = path.resolve(templateDir, file)
     let targetPath = path.resolve(resolvedRoot, file)
+    if (useMjs && targetPath.includes('.vitepress/config')) {
+      targetPath = targetPath.replace(/\.js$/, '.mjs')
+    }
     if (useTs) {
-      targetPath = targetPath.replace(/\.js$/, '.ts')
+      targetPath = targetPath.replace(/\.(m?)js$/, '.$1ts')
     }
     const src = fs.readFileSync(filePath, 'utf-8')
     const compiled = template(src)(data)
@@ -137,19 +143,19 @@ export function scaffold({
     'index.md',
     'api-examples.md',
     'markdown-examples.md',
-    `.vitepress/config.js`
+    '.vitepress/config.js'
   ]
 
   if (theme === ScaffoldThemeType.DefaultCustom) {
     filesToScaffold.push(
-      `.vitepress/theme/index.js`,
-      `.vitepress/theme/style.css`
+      '.vitepress/theme/index.js',
+      '.vitepress/theme/style.css'
     )
   } else if (theme === ScaffoldThemeType.Custom) {
     filesToScaffold.push(
-      `.vitepress/theme/index.js`,
-      `.vitepress/theme/style.css`,
-      `.vitepress/theme/Layout.vue`
+      '.vitepress/theme/index.js',
+      '.vitepress/theme/style.css',
+      '.vitepress/theme/Layout.vue'
     )
   }
 
@@ -158,14 +164,9 @@ export function scaffold({
   }
 
   const dir =
-    root === './' ? `` : ` ${root.replace(/^\.\//, '').replace(/[/\\]$/, '')}`
+    root === './' ? '' : ` ${root.replace(/^\.\//, '').replace(/[/\\]$/, '')}`
   const gitignorePrefix = dir ? `${dir}/.vitepress` : '.vitepress'
 
-  const pkgPath = path.resolve('package.json')
-  const userPkg = fs.existsSync(pkgPath)
-    ? JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
-    : {}
-
   const tips = []
   if (fs.existsSync('.git')) {
     tips.push(