🎪 Playground!

.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,
+      })
+    )
+  })
+})

playground/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vue Codemod Playground</title>
+  <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.55.0/lib/codemirror.css">
+  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.55.0/lib/codemirror.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.55.0/addon/mode/overlay.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.55.0/addon/mode/simple.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.55.0/addon/selection/selection-pointer.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.55.0/mode/xml/xml.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.55.0/mode/css/css.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.55.0/mode/vue/vue.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.55.0/mode/htmlmixed/htmlmixed.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.55.0/mode/javascript/javascript.js"></script>
+</head>
+<body>
+  <div id="app" class="h-screen grid grid-rows-fix-auto"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>

playground/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "vue-codemod-playground",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "concurrently \"npm:api\" \"npm:vite\"",
+    "vite": "vite",
+    "api": "ts-node-dev --respawn --transpileOnly ./api"
+  },
+  "dependencies": {
+    "tailwindcss": "^1.4.6",
+    "vue": "^3.0.0-beta.15"
+  },
+  "devDependencies": {
+    "@koa/router": "^9.0.1",
+    "@types/fs-extra": "^9.0.1",
+    "@types/koa-json": "^2.0.18",
+    "@types/koa__router": "^8.0.2",
+    "@types/ws": "^7.2.6",
+    "@vue/compiler-sfc": "^3.0.0-beta.15",
+    "chokidar": "^3.4.0",
+    "concurrently": "^5.2.0",
+    "fast-glob": "^3.2.4",
+    "fs-extra": "^9.0.1",
+    "koa-bodyparser": "^4.3.0",
+    "koa-error": "^3.2.0",
+    "koa-json": "^2.0.2",
+    "ts-node": "^8.10.2",
+    "ts-node-dev": "1.0.0-pre.50",
+    "vite": "^1.0.0-beta.3",
+    "ws": "^7.3.0"
+  }
+}

playground/postcss.config.js

@@ -0,0 +1,23 @@
+const purgecss = require('@fullhuman/postcss-purgecss')({
+  // Specify the paths to all of the template files in your project
+  content: [
+    './index.html',
+    './src/App.vue',
+    './src/components/**/*.vue',
+    './src/views/**/*.vue',
+    './src/main.js',
+    './src/**/*.js',
+    // etc.
+  ],
+
+  // Include any special characters you're using in this regular expression
+  defaultExtractor: (content) => content.match(/[\w-/.:]+(?<!:)/g) || [],
+})
+
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    ...(process.env.NODE_ENV == 'production' ? [purgecss] : []),
+  ],
+}

playground/src/App.vue

@@ -0,0 +1,15 @@
+<template>
+  <Navbar />
+  <TransformView />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { store } from './store'
+
+export default defineComponent({
+  setup() {
+    return store
+  },
+})
+</script>