create-slidev 0.46.3 → 0.47.1

package/build.mjs

@@ -1,31 +1,36 @@
-import { copyFileSync, existsSync, mkdirSync, rmSync } from 'node:fs'
-import * as url from 'node:url'
-import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+import fs from 'fs-extra'
 
-const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
 const __templateDir = resolve(__dirname, 'template')
 const __pagesDir = resolve(__templateDir, 'pages')
 
-const shouldCreatePagesDict = () => !existsSync(__pagesDir)
+const shouldCreatePagesDict = () => !fs.existsSync(__pagesDir)
 
 // key: copy to (relative ./)
 // value: origin (relative ./template)
 const needCopyFiles = {
   'slides.md': '../../../demo/starter/slides.md',
   'pages/multiple-entries.md': '../../../demo/starter/pages/multiple-entries.md',
+  'snippets/external.ts': '../../../demo/starter/snippets/external.ts',
 }
 
-function main() {
+async function main() {
   if (shouldCreatePagesDict())
-    mkdirSync(__pagesDir)
-  Object.keys(needCopyFiles).forEach((relativeTargetPath) => {
-    const sourcePath = resolve(__templateDir, needCopyFiles[relativeTargetPath])
-    const targetPath = resolve(__templateDir, relativeTargetPath)
-    const exist = existsSync(targetPath)
-    if (exist)
-      rmSync(targetPath)
-    copyFileSync(sourcePath, targetPath)
-  })
+    await fs.ensureDir(__pagesDir)
+
+  await Promise.all(
+    Object.keys(needCopyFiles).map(async (relativeTargetPath) => {
+      const sourcePath = resolve(__templateDir, needCopyFiles[relativeTargetPath])
+      const targetPath = resolve(__templateDir, relativeTargetPath)
+      if (fs.existsSync(targetPath))
+        await fs.rm(targetPath)
+
+      await fs.ensureDir(dirname(targetPath))
+      await fs.copy(sourcePath, targetPath)
+    }),
+  )
   // eslint-disable-next-line no-console
   console.log('done...')
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-slidev",
   "type": "module",
-  "version": "0.46.3",
+  "version": "0.47.1",
   "description": "Create starter template for Slidev",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",

package/template/package.json

@@ -8,7 +8,7 @@
     "export": "slidev export"
   },
   "dependencies": {
-    "@slidev/cli": "^0.46.3",
+    "@slidev/cli": "^0.47.1",
     "@slidev/theme-default": "latest",
     "@slidev/theme-seriph": "latest"
   }

package/template/slides.md

@@ -2,7 +2,7 @@
 theme: seriph
 background: https://source.unsplash.com/collection/94734566/1920x1080
 class: text-center
-highlighter: shikiji
+highlighter: shiki
 lineNumbers: false
 info: |
   ## Slidev Starter Template
@@ -11,6 +11,8 @@ info: |
   Learn more at [Sli.dev](https://sli.dev)
 drawings:
   persist: false
+defaults:
+  foo: true
 transition: slide-left
 title: Welcome to Slidev
 mdc: true
@@ -130,38 +132,31 @@ image: https://source.unsplash.com/collection/94734566/1920x1080
 
 Use code snippets and get the highlighting directly, and even types hover![^1]
 
-```ts {all|5|1-6|9|all} twoslash
-// TwoSlash enables TypeScript hover information and errors in markdown code blocks
-// Learn more at https://www.typescriptlang.org/dev/twoslash/
-function getUser(id: number): User {
-  return undefined as any
-}
-function saveUser(id: number, user: User) {
-  // ...
-}
-// ---cut---
-interface User {
-  id: number
-  firstName: string
-  lastName: string
-  role: string
-// ^?
-}
+```ts {all|5|7|7-8|10|all} twoslash
+// TwoSlash enables TypeScript hover information
+// and errors in markdown code blocks
+// More at https://shiki.style/packages/twoslash
 
-function updateUser(id: number, update: User) {
-  const user = getUser(id)
-  const newUser = { ...user, ...update }
-  saveUser(id, newUser)
-}
+import { computed, ref } from 'vue'
+
+const count = ref(0)
+const doubled = computed(() => count.value * 2)
+
+doubled.value = 2
 ```
 
-<arrow v-click="[3, 4]" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1" />
+<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
+
+<!-- This allow you to embed external code blocks -->
+<<< @/snippets/external.ts#snippet
 
+<!-- Footer -->
 [^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)
 
+<!-- Inline style -->
 <style>
 .footnotes-sep {
-  @apply mt-20 opacity-10;
+  @apply mt-5 opacity-10;
 }
 .footnotes {
   @apply text-sm opacity-75;

package/template/snippets/external.ts

@@ -0,0 +1,9 @@
+/* eslint-disable no-console */
+
+// #region snippet
+function hello() {
+  console.log('Hello from snippets/external.ts')
+}
+// #endregion snippet
+
+export default hello