chore(dev): add playground route

.eslintignore

@@ -17,3 +17,5 @@ cache
 
 common/icons/vue
 common/icons/types
+
+dev-server/play.vue

dev-server/.gitignore

@@ -1 +1,2 @@
 /router.ts
+play.vue

scripts/serve.ts

@@ -1,12 +1,10 @@
 import { resolve } from 'node:path'
+import { existsSync, readdirSync, statSync, writeFileSync } from 'node:fs'
 
-import fs from 'fs-extra'
 import minimist from 'minimist'
 import { format } from 'prettier'
 import { logger, prettierConfig, queryIdlePort, rootDir, run, specifyComponent } from './utils'
 
-const { readdirSync, statSync, existsSync, writeFileSync } = fs
-
 const args = minimist<{
   s?: boolean,
   sourcemap?: boolean,
@@ -69,6 +67,11 @@ async function serveComponent() {
           }`
           })
           .join(',\n')},
+        {
+          path: '/${demos.includes('play') ? '_' : ''}play',
+          name: 'playground',
+          component: () => import('../play.vue')
+        },
         {
           path: '/:catchAll(.*)',
           redirect: '/'
@@ -87,6 +90,25 @@ async function serveComponent() {
     'utf-8'
   )
 
+  const playPath = resolve(devDir, 'play.vue')
+
+  if (!existsSync(playPath)) {
+    writeFileSync(
+      playPath,
+      await format(
+        `<template>
+          <div></div>
+        </template>
+        
+        <script setup lang="ts">
+        // write something or copy from playground
+        </script>`,
+        { ...prettierConfig, parser: 'vue' }
+      ),
+      'utf-8'
+    )
+  }
+
   await run('pnpm', ['serve'], {
     cwd: devDir,
     stdio: 'inherit',