feat: 🎪 Playground! (#2)

Author: antfu

.gitignore

@@ -102,3 +102,5 @@ dist
 
 # TernJS port file
 .tern-port
+
+.DS_Store

README.md

@@ -29,7 +29,7 @@ Inspired by [react-codemod](https://github.com/reactjs/react-codemod).
 - [ ] Built-in transformations need to support TypeScript
 - [ ] Built-in transformations need to support module systems other than ES module, and those without modules
 - [ ] Define an interface for transformation of template blocks (may use [`vue-eslint-parser`](https://github.com/mysticatea/vue-eslint-parser/) for this)
-- [ ] A playground for writing transformations
+- [x] A playground for writing transformations - `yarn playground` and visit http://localhost:3000
 
 ## Included Transformations
 

package.json

@@ -11,6 +11,7 @@
   "scripts": {
     "build": "tsc",
     "prepublishOnly": "tsc",
+    "playground": "npm -C ./playground run dev",
     "test": "jest"
   },
   "repository": {

playground/api/app.ts

@@ -0,0 +1,25 @@
+import Koa from 'koa'
+import http from 'http'
+import { router } from './router'
+import json from 'koa-json'
+import bodyParser from 'koa-bodyparser'
+import error from 'koa-error'
+
+const app = new Koa()
+const server = http.createServer(app.callback())
+
+app
+  .use(error({
+    env: 'development'
+  }))
+  .use(bodyParser({
+    enableTypes: ['json', 'text']
+  }))
+  .use(json())
+  .use(router.routes())
+  .use(router.allowedMethods())
+
+export {
+  app,
+  server
+}

playground/api/constants.ts

@@ -0,0 +1,5 @@
+import path from "path"
+
+export const API_PORT = process.env.API_PORT || process.env.PORT || 3002
+export const ROOT_DIR = path.resolve(__dirname, '../..')
+export const TRANS_DIR = path.resolve(ROOT_DIR, 'transformations')

playground/api/controllers.ts

@@ -0,0 +1,37 @@
+import fg from 'fast-glob'
+import { TRANS_DIR, API_PORT, ROOT_DIR } from './constants'
+import path from 'path'
+
+export async function getTransformations() {
+  const files = await fg('*.ts', {
+    cwd: TRANS_DIR,
+    onlyFiles: true,
+  })
+
+  // remove .ts extension and filter out index.ts
+  return files.map((f) => f.slice(0, -3)).filter((f) => f !== 'index')
+}
+
+export async function getMeta() {
+  const transformations = await getTransformations()
+
+  const fixtures: any = {}
+
+  for (const t of transformations) {
+    const files = await fg('*.{vue,ts,js}', {
+      cwd: path.join(TRANS_DIR, '__testfixtures__', t),
+      onlyFiles: true,
+    })
+
+    if (files.length) {
+      fixtures[t] = files
+    }
+  }
+
+  return {
+    apiPort: API_PORT,
+    rootPath: ROOT_DIR,
+    transformations,
+    fixtures,
+  }
+}

playground/api/index.ts

@@ -0,0 +1,6 @@
+import { server } from './app'
+import './watcher'
+import { API_PORT } from './constants'
+
+console.log(`Vue Codemode Playground API Started at http://localhost:${API_PORT}`)
+server.listen(API_PORT)

playground/api/router.ts

@@ -0,0 +1,53 @@
+import Router from '@koa/router'
+import path from 'path'
+import fs from 'fs-extra'
+import { ROOT_DIR } from './constants'
+import { spawnSync } from 'child_process'
+import { getMeta } from './controllers'
+
+const router = new Router()
+
+router.get('/', (ctx) => {
+  ctx.body = 'Hello'
+})
+
+router.get('/meta', async (ctx) => {
+  ctx.body = await getMeta()
+})
+
+router.get('/files/(.*)', async (ctx) => {
+  const filepath = path.join(ROOT_DIR, ctx.params[0])
+  if (fs.existsSync(filepath)) {
+    ctx.body = await fs.readFile(filepath, 'utf-8')
+  } else {
+    ctx.status = 404
+  }
+})
+
+router.post('/files/(.*)', async (ctx) => {
+  const filepath = path.join(ROOT_DIR, ctx.params[0])
+  await fs.ensureDir(path.dirname(filepath))
+  await fs.writeFile(filepath, ctx.request.body, 'utf-8')
+  ctx.status = 200
+})
+
+router.post('/run/:trans', async (ctx) => {
+  const name = ctx.params.trans
+  const input = ctx.request.body
+  const script = path.resolve(__dirname, 'transfrom.ts')
+
+  const result = spawnSync('ts-node', ['-T', script, name], {
+    input,
+    encoding: 'utf-8',
+  })
+
+  const { stderr, stdout } = result
+
+  if (stderr) {
+    ctx.body = `/* ERROR */\n\n${stderr}\n`
+  } else {
+    ctx.body = stdout
+  }
+})
+
+export { router }

playground/api/transfrom.ts

@@ -0,0 +1,26 @@
+import runTransformation from '../../src/run-transformation'
+
+const transfrom = process.argv[2]
+const options = JSON.parse(process.argv[3] || '{}')
+
+let input = ''
+process.stdin.on('data', (e) => {
+  input += e.toString()
+})
+
+process.stdin.on('end', () => {
+  try {
+    console.log(
+      runTransformation(
+        {
+          source: input,
+          path: 'anonymous.vue',
+        },
+        require(`../../transformations/${transfrom}.ts`),
+        options
+      )
+    )
+  } catch (e) {
+    console.error(e)
+  }
+})

playground/api/watcher.ts

@@ -0,0 +1,29 @@
+import WebSocket from 'ws'
+import { server } from './app'
+import chokidar from 'chokidar'
+import { TRANS_DIR } from './constants'
+import path from 'path'
+
+const wss = new WebSocket.Server({ server })
+
+const clients: WebSocket[] = []
+
+wss.on('connection', (ws) => {
+  clients.push(ws)
+  ws.on('close', () => {
+    clients.splice(clients.indexOf(ws), 1)
+  })
+})
+
+chokidar.watch(TRANS_DIR, {ignoreInitial: true}).on('all', (event, filepath) => {
+  const relative = path.relative(TRANS_DIR, filepath)
+  console.log(event, relative)
+  clients.forEach((ws) => {
+    ws.send(
+      JSON.stringify({
+        event,
+        path: relative,
+      })
+    )
+  })
+})