chore: regenerate the playground projects

Author: haoqunjiang

index.js

@@ -9,17 +9,12 @@ import prompts from 'prompts'
 import { red, green, bold } from 'kolorist'
 
 import renderTemplate from './utils/renderTemplate.js'
-import {
-  postOrderDirectoryTraverse,
-  preOrderDirectoryTraverse
-} from './utils/directoryTraverse.js'
+import { postOrderDirectoryTraverse, preOrderDirectoryTraverse } from './utils/directoryTraverse.js'
 import generateReadme from './utils/generateReadme.js'
 import getCommand from './utils/getCommand.js'
 
 function isValidPackageName(projectName) {
-  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
-    projectName
-  )
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName)
 }
 
 function toValidPackageName(projectName) {
@@ -66,14 +61,8 @@ async function init() {
   // if any of the feature flags is set, we would skip the feature prompts
   // use `??` instead of `||` once we drop Node.js 12 support
   const isFeatureFlagsUsed =
-    typeof (
-      argv.default ||
-      argv.ts ||
-      argv.jsx ||
-      argv.router ||
-      argv.vuex ||
-      argv.tests
-    ) === 'boolean'
+    typeof (argv.default || argv.ts || argv.jsx || argv.router || argv.vuex || argv.tests) ===
+    'boolean'
 
   let targetDir = argv._[0]
   const defaultProjectName = !targetDir ? 'vue-project' : targetDir
@@ -99,18 +88,14 @@ async function init() {
           type: targetDir ? null : 'text',
           message: 'Project name:',
           initial: defaultProjectName,
-          onState: (state) =>
-            (targetDir = String(state.value).trim() || defaultProjectName)
+          onState: (state) => (targetDir = String(state.value).trim() || defaultProjectName)
         },
         {
           name: 'shouldOverwrite',
-          type: () =>
-            canSafelyOverwrite(targetDir) || forceOverwrite ? null : 'confirm',
+          type: () => (canSafelyOverwrite(targetDir) || forceOverwrite ? null : 'confirm'),
           message: () => {
             const dirForPrompt =
-              targetDir === '.'
-                ? 'Current directory'
-                : `Target directory "${targetDir}"`
+              targetDir === '.' ? 'Current directory' : `Target directory "${targetDir}"`
 
             return `${dirForPrompt} is not empty. Remove existing files and continue?`
           }
@@ -129,8 +114,7 @@ async function init() {
           type: () => (isValidPackageName(targetDir) ? null : 'text'),
           message: 'Package name:',
           initial: () => toValidPackageName(targetDir),
-          validate: (dir) =>
-            isValidPackageName(dir) || 'Invalid package.json name'
+          validate: (dir) => isValidPackageName(dir) || 'Invalid package.json name'
         },
         {
           name: 'needsTypeScript',
@@ -206,10 +190,7 @@ async function init() {
   console.log(`\nScaffolding project in ${root}...`)
 
   const pkg = { name: packageName, version: '0.0.0' }
-  fs.writeFileSync(
-    path.resolve(root, 'package.json'),
-    JSON.stringify(pkg, null, 2)
-  )
+  fs.writeFileSync(path.resolve(root, 'package.json'), JSON.stringify(pkg, null, 2))
 
   const templateRoot = new URL('./template', import.meta.url).pathname
   const render = function render(templateName) {
@@ -267,21 +248,15 @@ async function init() {
         if (filepath.endsWith('.js')) {
           fs.renameSync(filepath, filepath.replace(/\.js$/, '.ts'))
         } else if (path.basename(filepath) === 'jsconfig.json') {
-          fs.renameSync(
-            filepath,
-            filepath.replace(/jsconfig\.json$/, 'tsconfig.json')
-          )
+          fs.renameSync(filepath, filepath.replace(/jsconfig\.json$/, 'tsconfig.json'))
         }
       }
     )
 
     // Rename entry in `index.html`
     const indexHtmlPath = path.resolve(root, 'index.html')
     const indexHtmlContent = fs.readFileSync(indexHtmlPath, 'utf8')
-    fs.writeFileSync(
-      indexHtmlPath,
-      indexHtmlContent.replace('src/main.js', 'src/main.ts')
-    )
+    fs.writeFileSync(indexHtmlPath, indexHtmlContent.replace('src/main.js', 'src/main.ts'))
   }
 
   if (!needsTests) {

playground/default/README.md

@@ -13,17 +13,17 @@ See [Vite Configuration Reference](https://vitejs.dev/config/).
 ## Project Setup
 
 ```sh
-npm install
+pnpm install
 ```
 
 ### Compile and Hot-Reload for Development
 
 ```sh
-npm run dev
+pnpm dev
 ```
 
 ### Compile and Minify for Production
 
 ```sh
-npm run build
+pnpm build
 ```

playground/default/src/App.vue

@@ -1,13 +1,6 @@
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
-import IntroductionItem from './components/IntroductionItem.vue'
-import ColorSchemeSwitch from './components/ColorSchemeSwitch.vue'
-
-import DocumentationIcon from './components/icons/Documentation.vue'
-import ToolingIcon from './components/icons/Tooling.vue'
-import EcosystemIcon from './components/icons/Ecosystem.vue'
-import CommunityIcon from './components/icons/Community.vue'
-import SupportIcon from './components/icons/Support.vue'
+import Welcome from './components/Welcome.vue'
 </script>
 
 <template>
@@ -16,85 +9,11 @@ import SupportIcon from './components/icons/Support.vue'
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
-      <ColorSchemeSwitch />
     </div>
   </header>
 
   <main>
-    <IntroductionItem>
-      <template #icon>
-        <DocumentationIcon />
-      </template>
-      <template #heading>Documentation</template>
-
-      Widely regarded as one of the best, Vue’s
-      <a target="_blank" href="https://v3.vuejs.org/">official documentation</a>
-      will provide you with all information you need to get started. Whether you’re already a Vue
-      veteran or just trying the framework out, great chances are you’ll find the answer to your
-      next question there.
-    </IntroductionItem>
-
-    <IntroductionItem>
-      <template #icon>
-        <ToolingIcon />
-      </template>
-      <template #heading>Tooling</template>
-
-      This project is served and bundled with
-      <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
-      setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
-      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to
-      test your components and web pages, check out
-      <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-      <a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
-        >Cypress Component Testing</a
-      >.
-
-      <br />
-
-      More instructions are available in <code>README.md</code>.
-    </IntroductionItem>
-
-    <IntroductionItem>
-      <template #icon>
-        <EcosystemIcon />
-      </template>
-      <template #heading>Ecosystem</template>
-
-      Get official tools and libraries for your project:
-      <a target="_blank" href="https://next.vuex.vuejs.org/">Vuex</a>,
-      <a target="_blank" href="https://next.router.vuejs.org/">Vue Router</a>,
-      <a target="_blank" href="https://next.vue-test-utils.vuejs.org/">Vue Test Utils</a>, and
-      <a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need
-      more resources, we suggest paying
-      <a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
-      a visit.
-    </IntroductionItem>
-
-    <IntroductionItem>
-      <template #icon>
-        <CommunityIcon />
-      </template>
-      <template #heading>Community</template>
-
-      Got stuck? Ask your question on
-      <a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
-      <a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
-      You should also subscribe to
-      <a target="_blank" href="https://news.vuejs.org">our mailing list</a> for latest news in the
-      Vue world.
-    </IntroductionItem>
-
-    <IntroductionItem>
-      <template #icon>
-        <SupportIcon />
-      </template>
-      <template #heading>Support Vue</template>
-
-      As an independent project, Vue relies on community backing for its sustainability. You can
-      help us by
-      <a target="_blank" href="https://vuejs.org/support-vuejs/">becoming a sponsor</a>.
-    </IntroductionItem>
+    <Welcome />
   </main>
 </template>
 

playground/default/src/assets/base.css

@@ -12,7 +12,7 @@
 
   --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
   --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65);
   --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
 
   --vt-c-text-light-1: var(--vt-c-indigo);
@@ -36,16 +36,18 @@
   --section-gap: 160px;
 }
 
-[data-color-scheme='dark'] {
-  --color-background: var(--vt-c-black);
-  --color-background-soft: var(--vt-c-black-soft);
-  --color-background-mute: var(--vt-c-black-mute);
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
 
-  --color-border: var(--vt-c-divider-dark-2);
-  --color-border-hover: var(--vt-c-divider-dark-1);
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
 
-  --color-heading: var(--vt-c-text-dark-1);
-  --color-text: var(--vt-c-text-dark-2);
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
 }
 
 *,