create-slidev 52.14.1 → 52.15.0

package/index.mjs

@@ -18,6 +18,11 @@ const require = createRequire(import.meta.url)
 const __dirname = fileURLToPath(new URL('.', import.meta.url))
 const { version } = require('./package.json')
 
+const RE_VALID_PACKAGE_NAME = /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/
+const RE_WHITESPACE = /\s+/g
+const RE_LEADING_DOT_UNDERSCORE = /^[._]/
+const RE_NON_ALPHANUMERIC = /[^a-z0-9-~]+/g
+
 const renameFiles = {
   _gitignore: '.gitignore',
   _npmrc: '.npmrc',
@@ -74,12 +79,9 @@ async function init() {
   const templateDir = path.join(__dirname, 'template')
 
   const write = (file, content) => {
-    const targetPath = renameFiles[file]
-      ? path.join(root, renameFiles[file])
-      : path.join(root, file)
+    const targetPath = path.join(root, renameFiles[file] ?? file)
     if (content)
       fs.writeFileSync(targetPath, content)
-
     else
       copy(path.join(templateDir, file), targetPath)
   }
@@ -89,19 +91,27 @@ async function init() {
     write(file)
 
   const pkg = require(path.join(templateDir, 'package.json'))
-
   pkg.name = packageName
-
   write('package.json', JSON.stringify(pkg, null, 2))
 
-  const pkgManager = (/pnpm/.test(process.env.npm_execpath || '') || /pnpm/.test(process.env.npm_config_user_agent || ''))
-    ? 'pnpm'
-    : /yarn/.test(process.env.npm_execpath || '') ? 'yarn' : 'npm'
-
-  const related = path.relative(cwd, root)
-
   console.log(green('  Done.\n'))
 
+  function getPkgManager() {
+    const pm = []
+    if (typeof Deno !== 'undefined')
+      pm.push('deno')
+    if (typeof Bun !== 'undefined')
+      pm.push('bun')
+    const userAgent = process.env.npm_config_user_agent || ''
+    const execPath = process.env.npm_execpath || ''
+    if (execPath.includes('pnpm') || userAgent.includes('pnpm'))
+      pm.push('pnpm')
+    if (execPath.includes('yarn') || userAgent.includes('yarn'))
+      pm.push('yarn')
+    return pm.length === 1 ? pm[0] : null
+  }
+  const pkgManager = getPkgManager()
+
   /**
    * @type {{ yes: boolean }}
    */
@@ -109,48 +119,57 @@ async function init() {
     type: 'confirm',
     name: 'yes',
     initial: 'Y',
-    message: 'Install and start it now?',
+    message: `Install and start it now${pkgManager ? ` using ${pkgManager}` : ''}?`,
   })
 
   if (yes) {
-    const { agent } = await prompts({
+    const agent = pkgManager || (await prompts({
       name: 'agent',
       type: 'select',
       message: 'Choose the package manager',
       choices: ['npm', 'yarn', 'pnpm', 'bun', 'deno'].map(i => ({ value: i, title: i })),
-    })
+    }).agent)
 
     if (!agent)
       return
 
+    writeReadme(agent)
     await x(agent, ['install'], { nodeOptions: { stdio: 'inherit', cwd: root } })
     await x(agent, ['run', 'dev'], { nodeOptions: { stdio: 'inherit', cwd: root } })
   }
   else {
+    writeReadme(pkgManager)
     console.log(dim('\n  start it later by:\n'))
     if (root !== cwd)
-      console.log(blue(`  cd ${bold(related)}`))
+      console.log(blue(`  cd ${bold(path.relative(cwd, root))}`))
 
-    console.log(blue(`  ${pkgManager === 'yarn' ? 'yarn' : `${pkgManager} install`}`))
-    console.log(blue(`  ${pkgManager === 'yarn' ? 'yarn dev' : `${pkgManager} run dev`}`))
+    console.log(blue(`  ${pkgManager} install`))
+    console.log(blue(`  ${pkgManager} run dev`))
     console.log()
     console.log(`  ${cyan('●')} ${blue('■')} ${yellow('▲')}`)
     console.log()
   }
+
+  function writeReadme(pm = 'npm') {
+    const readmeTemplate = fs.readFileSync(path.join(templateDir, 'README.md'), 'utf-8')
+    const readmeContent = readmeTemplate
+      .replace('npm install', `${pm} install`)
+      .replace('npm run dev', `${pm} run dev`)
+    write('README.md', readmeContent)
+  }
 }
 
 function copy(src, dest) {
   const stat = fs.statSync(src)
   if (stat.isDirectory())
     copyDir(src, dest)
-
   else
     fs.copyFileSync(src, dest)
 }
 
 async function getValidPackageName(projectName) {
   projectName = path.basename(projectName)
-  const packageNameRegExp = /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/
+  const packageNameRegExp = RE_VALID_PACKAGE_NAME
   if (packageNameRegExp.test(projectName)) {
     return projectName
   }
@@ -158,9 +177,9 @@ async function getValidPackageName(projectName) {
     const suggestedPackageName = projectName
       .trim()
       .toLowerCase()
-      .replace(/\s+/g, '-')
-      .replace(/^[._]/, '')
-      .replace(/[^a-z0-9-~]+/g, '-')
+      .replace(RE_WHITESPACE, '-')
+      .replace(RE_LEADING_DOT_UNDERSCORE, '')
+      .replace(RE_NON_ALPHANUMERIC, '-')
 
     /**
      * @type {{ inputPackageName: string }}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-slidev",
   "type": "module",
-  "version": "52.14.1",
+  "version": "52.15.0",
   "description": "Create starter template for Slidev",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -21,13 +21,13 @@
     "template"
   ],
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.12.0"
   },
   "dependencies": {
     "ansis": "^4.2.0",
     "minimist": "^1.2.8",
     "prompts": "^2.4.2",
-    "tinyexec": "^1.0.2"
+    "tinyexec": "^1.1.1"
   },
   "scripts": {
     "build": "node build.mjs"

package/template/README.md

@@ -2,8 +2,8 @@
 
 To start the slide show:
 
-- `pnpm install`
-- `pnpm dev`
+- `npm install`
+- `npm run dev`
 - visit <http://localhost:3030>
 
 Edit the [slides.md](./slides.md) to see the changes.

package/template/package.json

@@ -8,9 +8,9 @@
     "export": "slidev export"
   },
   "dependencies": {
-    "@slidev/cli": "^52.14.1",
+    "@slidev/cli": "^52.15.0",
     "@slidev/theme-default": "latest",
     "@slidev/theme-seriph": "latest",
-    "vue": "^3.5.29"
+    "vue": "^3.5.33"
   }
 }

package/template/slides.md

@@ -268,7 +268,7 @@ const author = {
 
 You can use Vue components directly inside your slides.
 
-We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your custom components is also super easy.
+We have provided a few built-in components like `<Tweet/>`, `<BlueSky/>`, and `<Youtube/>` that you can use directly. And adding your custom components is also super easy.
 
 ```html
 <Counter :count="10" />
@@ -340,21 +340,46 @@ You can add `v-click` to elements to add a click animation.
 
 <div v-click>
 
-This shows up when you click the slide:
+This shows up when you press <kbd>space</kbd> or <kbd>right</kbd>, or click outside the slide on the right.
 
 ```html
-<div v-click>This shows up when you click the slide.</div>
+<div v-click>This shows up when you trigger a click animation.</div>
 ```
 
 </div>
 
-<br>
+<p v-click>
+You can also add modifiers to change the animation:
+</p>
+
+<div class="grid gap-3 mt-4 text-sm" style="grid-template-columns: repeat(3, 1fr) 1.5fr 1fr">
+  <div v-after.up class="p-3 rounded border border-primary/20 bg-primary/10">
+    <div class="font-mono text-xs opacity-60 mb-1">v-click.up</div>
+    <div>Slide from bottom</div>
+  </div>
+  <div v-click.fade-in class="p-3 rounded border border-primary/30 bg-primary/15">
+    <div class="font-mono text-xs opacity-60 mb-1">v-click.fade-in</div>
+    <div>Fade in</div>
+  </div>
+  <div v-click.fade class="p-3 rounded border border-primary/40 bg-primary/20">
+    <div class="font-mono text-xs opacity-60 mb-1">v-click.fade</div>
+    <div>Dim (0.5 opacity)</div>
+  </div>
+  <div v-click.fade.right.scale class="p-3 rounded border border-primary/50 bg-primary/25">
+    <div class="font-mono text-xs opacity-60 mb-1">v-click.fade.right.scale</div>
+    <div>Composed</div>
+  </div>
+  <div v-click.none class="p-3 rounded border border-primary/60 bg-primary/30">
+    <div class="font-mono text-xs opacity-60 mb-1">v-click.none</div>
+    <div>No transition</div>
+  </div>
+</div>
 
 <v-click>
 
-The <span v-mark.red="3"><code>v-mark</code> directive</span>
+The <span v-mark.red="7"><code>v-mark</code> directive</span>
 also allows you to add
-<span v-mark.circle.orange="4">inline marks</span>
+<span v-mark.circle.orange="8">inline marks</span>
 , powered by [Rough Notation](https://roughnotation.com/):
 
 ```html
@@ -363,7 +388,7 @@ also allows you to add
 
 </v-click>
 
-<div mt-20 v-click>
+<div v-click mt-12>
 
 [Learn more](https://sli.dev/guide/animations#click-animation)