refactor: playground (vue-terminal#4)

Author: webfansplz

.npmrc

@@ -1,2 +1 @@
-shamefully-hoist=true
 strict-peer-dependencies=false

.prettierignore

@@ -0,0 +1,4 @@
+__build__
+dist
+coverage
+auto-imports.d.ts

package.json

@@ -9,8 +9,11 @@
   },
   "scripts": {
     "release": "node scripts/release.mjs",
+    "dev": "pnpm run -r --filter './packages/{core,vite-plugin-vue-termui,cli}' dev",
     "build": "pnpm run -r --filter './packages/{core,vite-plugin-vue-termui,cli}' build",
-    "lint": "pnpm run -r lint",
+    "play:dev": "pnpm run --filter  './packages/playground' dev",
+    "lint": "prettier --check packages README.md",
+    "lint:fix": "prettier --write packages README.md",
     "types": "pnpm run -r types",
     "test": "pnpm run --parallel -r test --coverage",
     "docs": "pnpm run -r dev --filter ./packages/docs",
@@ -21,7 +24,7 @@
   },
   "devDependencies": {
     "@types/node": "^16.11.29",
-    "@vitejs/plugin-vue": "^2.3.1",
+    "@vitejs/plugin-vue": "^3.0.3",
     "@vue/compiler-sfc": "^3.2.33",
     "@vue/runtime-core": "^3.2.33",
     "c8": "^7.11.2",
@@ -36,11 +39,12 @@
     "semver": "^7.3.7",
     "tsup": "^5.12.6",
     "typescript": "^4.6.3",
-    "unplugin-auto-import": "^0.7.1",
-    "unplugin-vue-components": "^0.19.5",
-    "vite": "^2.9.6",
+    "unplugin-auto-import": "^0.11.2",
+    "unplugin-vue-components": "^0.22.4",
+    "vite": "^3.0.9",
     "vitest": "^0.10.0",
     "vue": "^3.2.33",
-    "vue-tsc": "^0.34.10"
+    "vue-tsc": "^0.34.10",
+    "unbuild": "^0.8.9"
   }
 }

packages/cli/package.json

@@ -7,21 +7,20 @@
   "type": "module",
   "version": "0.0.14",
   "scripts": {
-    "dev": "esmo src/cli.ts dev demo/main.ts",
-    "demo:build": "esmo src/cli.ts build demo/main.ts",
-    "build": "rimraf dist && rollup -c --environment NODE_ENV:production",
-    "build:dev": "rimraf dist && rollup -c -w",
+    "dev": "unbuild --stub",
+    "build": "tsup",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . -l @vue-termui/cli -r 1"
   },
   "exports": {
     ".": {
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
     "./*": "./*"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "bin": {
     "vtui": "./vtui.mjs"
@@ -56,11 +55,11 @@
   "homepage": "https://github.com/posva-sponsors/vue-termui#readme",
   "dependencies": {
     "picocolors": "^1.0.0",
-    "vite-node": "^0.10.0",
+    "vite-node": "^0.22.1",
     "ws": "^8.5.0"
   },
   "peerDependencies": {
-    "vite": "^2.8.6",
+    "vite": "^3.0.9",
     "vite-plugin-vue-termui": ">=0.0.8",
     "vue-termui": ">=0.0.10"
   },
@@ -83,5 +82,15 @@
     "vite-plugin-inspect": "^0.5.0",
     "vite-plugin-vue-termui": "workspace:*",
     "vue-termui": "workspace:*"
+  },
+  "unbuild": {
+    "entries": [
+      "src/cli",
+      "src/index"
+    ],
+    "rollup": {
+      "emitCJS": true
+    },
+    "clean": true
   }
 }

packages/cli/rollup.config.mjs

@@ -13,7 +13,11 @@ export async function runDevServer(entryFile: string = 'src/main.ts') {
   })
   await server.pluginContainer.buildStart({})
 
-  const node = new ViteNodeServer(server, {})
+  const node = new ViteNodeServer(server, {
+    deps: {
+      fallbackCJS: true,
+    },
+  })
 
   const runner = new ViteNodeRunner({
     root: server.config.root,
@@ -122,7 +126,7 @@ export async function runDevServer(entryFile: string = 'src/main.ts') {
   const entryPointId = `/${entryFile}`
   const entryPoint = resolve('.' + entryPointId)
 
-  server.watcher.on('change', async (fullPath) => {
+  server.watcher.on('change', async (fullPath: string) => {
     const existingModule = hotModulesMap.get(fullPath)
 
     // full reload, tell the app to stop

packages/cli/src/commands/dev/index.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  clean: true,
+  target: 'node14',
+  format: ['esm', 'cjs'],
+  dts: true,
+  esbuildOptions(options) {
+    if (options.format === 'esm') options.outExtension = { '.js': '.mjs' }
+  },
+  entry: [
+    // commands because why not
+    'src/index.ts',
+    // cli app
+    'src/cli.ts',
+  ],
+  external: [
+    'vite-node/server',
+    'vite-node/client',
+    'vite-node/utils',
+    'path', // huh?
+  ],
+})

packages/cli/tsup.config.ts

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import('./dist/cli.js')
+import('./dist/cli.mjs')

packages/cli/vite.config.ts

@@ -1,5 +1,5 @@
 // Generated by 'unplugin-auto-import'
-// We suggest you to commit this file into source control
+export {}
 declare global {
   const afterAll: typeof import('vitest')['afterAll']
   const afterEach: typeof import('vitest')['afterEach']
@@ -15,4 +15,3 @@ declare global {
   const vi: typeof import('vitest')['vi']
   const vitest: typeof import('vitest')['vitest']
 }
-export {}