init

yyx990803 · yyx990803 · commit 820c2cfbefd3 · 2020-04-20T04:00:10.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+node_modules
+TODOs.md
+playground
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+semi: false
+singleQuote: true
+printWidth: 80
+trailingComma: none
diff --git a/bin/vds.js b/bin/vds.js
@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('../lib/server')
diff --git a/lib/fileWatcher.js b/lib/fileWatcher.js
@@ -0,0 +1,54 @@
+const fs = require('fs')
+const path = require('path')
+const chokidar = require('chokidar')
+const { parseSFC } = require('./parseSFC')
+
+exports.createFileWatcher = (notify) => {
+  const fileWatcher = chokidar.watch(process.cwd(), {
+    ignored: [/node_modules/]
+  })
+
+  fileWatcher.on('change', (file) => {
+    if (file.endsWith('.vue')) {
+      // check which part of the file changed
+      const [descriptor, prevDescriptor] = parseSFC(file)
+      const resourcePath = '/' + path.relative(process.cwd(), file)
+
+      if (!prevDescriptor) {
+        // the file has never been accessed yet
+        return
+      }
+
+      if (
+        (descriptor.script && descriptor.script.content) !==
+        (prevDescriptor.script && prevDescriptor.script.content)
+      ) {
+        console.log(`[hmr] <script> for ${resourcePath} changed. Triggering component reload.`)
+        notify({
+          type: 'reload',
+          path: resourcePath
+        })
+        return
+      }
+
+      if (
+        (descriptor.template && descriptor.template.content) !==
+        (prevDescriptor.template && prevDescriptor.template.content)
+      ) {
+        console.log(`[hmr] <template> for ${resourcePath} changed. Triggering component re-render.`)
+        notify({
+          type: 'rerender',
+          path: resourcePath
+        })
+        return
+      }
+
+      // TODO styles
+    } else {
+      console.log(`[hmr] script file ${resourcePath} changed. Triggering full page reload.`)
+      notify({
+        type: 'full-reload'
+      })
+    }
+  })
+}
diff --git a/lib/hmrProxy.js b/lib/hmrProxy.js
@@ -0,0 +1,42 @@
+// This file runs in the browser.
+
+const socket = new WebSocket(`ws://${location.host}`)
+
+// Listen for messages
+socket.addEventListener('message', ({ data }) => {
+  const { type, path, index } = JSON.parse(data)
+  switch (type) {
+    case 'connected':
+      console.log(`[vds] connected.`)
+      break
+    case 'reload':
+      import(`${path}?t=${Date.now()}`).then(m => {
+        __VUE_HMR_RUNTIME__.reload(path, m.default)
+        console.log(`[vds][hmr] ${path} reloaded.`)
+      })
+      break
+    case 'rerender':
+      import(`${path}?type=template&t=${Date.now()}`).then(m => {
+        __VUE_HMR_RUNTIME__.rerender(path, m.render)
+        console.log(`[vds][hmr] ${path} template updated.`)
+      })
+      break
+    case 'update-style':
+      import(`${path}?type=style&index=${index}&t=${Date.now()}`).then(m => {
+        // TODO style hmr
+      })
+      break
+    case 'full-reload':
+      location.reload()
+  }
+})
+
+// ping server
+socket.addEventListener('close', () => {
+  console.log(`[vds] server connection lost. polling for restart...`)
+  setInterval(() => {
+    new WebSocket(`ws://${location.host}`).addEventListener('open', () => {
+      location.reload()
+    })
+  }, 1000)
+})
diff --git a/lib/parseSFC.js b/lib/parseSFC.js
@@ -0,0 +1,19 @@
+const fs = require('fs')
+const { parse } = require('@vue/compiler-sfc')
+
+const cache = new Map()
+
+exports.parseSFC = filename => {
+  const content = fs.readFileSync(filename, 'utf-8')
+  const { descriptor, errors } = parse(content, {
+    filename
+  })
+
+  if (errors) {
+    // TODO
+  }
+
+  const prev = cache.get(filename)
+  cache.set(filename, descriptor)
+  return [descriptor, prev]
+}
diff --git a/lib/server.js b/lib/server.js
@@ -0,0 +1,40 @@
+const fs = require('fs')
+const path = require('path')
+const http = require('http')
+const url = require('url')
+const ws = require('ws')
+const serve = require('serve-handler')
+const vue = require('./vueMiddleware')
+const { createFileWatcher } = require('./fileWatcher')
+const { sendJS } = require('./utils')
+
+const hmrProxy = fs.readFileSync(path.resolve(__dirname, './hmrProxy.js'))
+
+const server = http.createServer((req, res) => {
+  const pathname = url.parse(req.url).pathname
+  if (pathname === '/__hmrProxy') {
+    sendJS(res, hmrProxy)
+  } else if (pathname.endsWith('.vue')) {
+    vue(req, res)
+  } else {
+    serve(req, res)
+  }
+})
+
+const wss = new ws.Server({ server })
+const sockets = new Set()
+wss.on('connection', (socket) => {
+  sockets.add(socket)
+  socket.send(JSON.stringify({ type: 'connected'}))
+  socket.on('close', () => {
+    sockets.delete(socket)
+  })
+})
+
+createFileWatcher((payload) =>
+  sockets.forEach((s) => s.send(JSON.stringify(payload)))
+)
+
+server.listen(3000, () => {
+  console.log('Running at http://localhost:3000')
+})
diff --git a/lib/utils.js b/lib/utils.js
@@ -0,0 +1,11 @@
+function send(res, source, mime) {
+  res.setHeader('Content-Type', mime)
+  res.end(source)
+}
+
+function sendJS(res, source) {
+  send(res, source, 'application/javascript')
+}
+
+exports.send = send
+exports.sendJS = sendJS
diff --git a/lib/vueMiddleware.js b/lib/vueMiddleware.js
@@ -0,0 +1,58 @@
+const fs = require('fs')
+const url = require('url')
+const path = require('path')
+const qs = require('querystring')
+const { parseSFC } = require('./parseSFC')
+const { compileTemplate } = require('@vue/compiler-sfc')
+const { sendJS } = require('./utils')
+
+module.exports = (req, res) => {
+  const parsed = url.parse(req.url, true)
+  const query = parsed.query
+  const filename = path.join(process.cwd(), parsed.pathname.slice(1))
+  const [descriptor] = parseSFC(filename)
+  if (!query.type) {
+    let code = ``
+    // TODO use more robust rewrite
+    if (descriptor.script) {
+      code += descriptor.script.content.replace(
+        `export default`,
+        'const script ='
+      )
+      code += `\nexport default script`
+    }
+    if (descriptor.template) {
+      code += `\nimport { render } from ${JSON.stringify(
+        parsed.pathname + `?type=template${query.t ? `&t=${query.t}` : ``}`
+      )}`
+      code += `\nscript.render = render`
+    }
+    if (descriptor.style) {
+      // TODO
+    }
+    code += `\nscript.__hmrId = ${JSON.stringify(parsed.pathname)}`
+    return sendJS(res, code)
+  }
+
+  if (query.type === 'template') {
+    const { code, errors } = compileTemplate({
+      source: descriptor.template.content,
+      filename,
+      compilerOptions: {
+        runtimeModuleName: '/vue.js'
+      }
+    })
+
+    if (errors) {
+      // TODO
+    }
+    return sendJS(res, code)
+  }
+
+  if (query.type === 'style') {
+    // TODO
+    return
+  }
+
+  // TODO custom blocks
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@vue/dev-server",
+  "version": "0.2.0",
+  "bin": {
+    "vds": "bin/vds.js"
+  },
+  "dependencies": {
+    "@vue/compiler-sfc": "^3.0.0-beta.2",
+    "chokidar": "^3.3.1",
+    "serve-handler": "^6.1.2",
+    "ws": "^7.2.3"
+  }
+}
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+#!/usr/bin/env node`
	`2`	`+require('../lib/server')`