refactor: use async fs + expose createServer API

bin/vds.js

@@ -1,2 +1,5 @@
 #!/usr/bin/env node
-require('../lib/server')
+const { createServer } = require('../lib/server')
+
+// TODO pass cli args
+createServer()

lib/hmrWatcher.js

@@ -8,12 +8,12 @@ exports.createFileWatcher = (notify) => {
     ignored: [/node_modules/]
   })
 
-  fileWatcher.on('change', (file) => {
+  fileWatcher.on('change', async (file) => {
     const resourcePath = '/' + path.relative(process.cwd(), file)
 
     if (file.endsWith('.vue')) {
       // check which part of the file changed
-      const [descriptor, prevDescriptor] = parseSFC(file)
+      const [descriptor, prevDescriptor] = await parseSFC(file)
       if (!prevDescriptor) {
         // the file has never been accessed yet
         return

lib/moduleMiddleware.js

@@ -1,23 +1,24 @@
-const fs = require('fs')
 const path = require('path')
-const { sendJS } = require('./utils')
+const resolve = require('resolve-cwd')
+const { sendJSStream } = require('./utils')
 
 exports.moduleMiddleware = (id, res) => {
   let modulePath
-  // try node resolve first
+  // TODO support custom imports map e.g. for snowpack web_modules
+
+  // fallback to node resolve
   try {
-    modulePath = require.resolve(id)
+    modulePath = resolve(id)
+    if (id === 'vue') {
+      modulePath = path.join(
+        path.dirname(modulePath),
+        'dist/vue.runtime.esm-browser.js'
+      )
+    }
   } catch (e) {
     res.setStatus(404)
     res.end()
   }
 
-  // TODO resolve snowpack web_modules
-
-  if (id === 'vue') {
-    // modulePath = path.relative(modulePath, 'dist/vue.runtime.esm-browser.js')
-    modulePath = path.resolve(__dirname, 'vue.js')
-  }
-
-  sendJS(res, fs.readFileSync(modulePath))
+  sendJSStream(res, modulePath)
 }

lib/parseSFC.js

@@ -1,10 +1,10 @@
-const fs = require('fs')
+const fs = require('fs').promises
 const { parse } = require('@vue/compiler-sfc')
 
 const cache = new Map()
 
-exports.parseSFC = (filename, saveCache = false) => {
-  const content = fs.readFileSync(filename, 'utf-8')
+exports.parseSFC = async (filename, saveCache = false) => {
+  const content = await fs.readFile(filename, 'utf-8')
   const { descriptor, errors } = parse(content, {
     filename
   })

lib/server.js

@@ -1,4 +1,4 @@
-const fs = require('fs')
+const fs = require('fs').promises
 const path = require('path')
 const http = require('http')
 const url = require('url')
@@ -10,44 +10,77 @@ const { createFileWatcher } = require('./hmrWatcher')
 const { sendJS } = require('./utils')
 const { rewrite } = require('./moduleRewriter')
 
-const hmrClientCode = fs.readFileSync(path.resolve(__dirname, './hmrClient.js'))
-
-const server = http.createServer((req, res) => {
-  const pathname = url.parse(req.url).pathname
-  if (pathname === '/__hmrClient') {
-    return sendJS(res, hmrClientCode)
-  } else if (pathname.startsWith('/__modules/')) {
-    return moduleMiddleware(pathname.replace('/__modules/', ''), res)
-  } else if (pathname.endsWith('.vue')) {
-    return vue(req, res)
-  } else if (pathname.endsWith('.js')) {
-    const filename = path.join(process.cwd(), pathname.slice(1))
-    if (fs.existsSync(filename)) {
-      const content = rewrite(fs.readFileSync(filename, 'utf-8'))
-      return sendJS(res, content)
+exports.createServer = async ({ port = 3000 } = {}) => {
+  const hmrClientCode = await fs.readFile(
+    path.resolve(__dirname, './hmrClient.js')
+  )
+
+  const server = http.createServer(async (req, res) => {
+    const pathname = url.parse(req.url).pathname
+    if (pathname === '/__hmrClient') {
+      return sendJS(res, await hmrClientCode)
+    } else if (pathname.startsWith('/__modules/')) {
+      return moduleMiddleware(pathname.replace('/__modules/', ''), res)
+    } else if (pathname.endsWith('.vue')) {
+      return vue(req, res)
+    } else if (pathname.endsWith('.js')) {
+      const filename = path.join(process.cwd(), pathname.slice(1))
+      try {
+        const content = await fs.readFile(filename, 'utf-8')
+        return sendJS(res, rewrite(content))
+      } catch (e) {
+        if (e.code === 'ENOENT') {
+          // fallthrough to serve-handler
+        } else {
+          console.error(e)
+        }
+      }
     }
-  }
 
-  serve(req, res, {
-    rewrites: [{ source: '**', destination: '/index.html' }]
+    serve(req, res, {
+      rewrites: [{ source: '**', destination: '/index.html' }]
+    })
   })
-})
-
-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)
+
+  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)))
-)
+  wss.on('error', (e) => {
+    if (e.code !== 'EADDRINUSE') {
+      console.error(e)
+    }
+  })
 
-// TODO customized port
-server.listen(3000, () => {
-  console.log('Running at http://localhost:3000')
-})
+  createFileWatcher((payload) =>
+    sockets.forEach((s) => s.send(JSON.stringify(payload)))
+  )
+
+  return new Promise((resolve, reject) => {
+    server.on('error', (e) => {
+      if (e.code === 'EADDRINUSE') {
+        console.log(`port ${port} is in use, trying another one...`)
+        setTimeout(() => {
+          server.close()
+          server.listen(++port)
+        }, 100)
+      } else {
+        console.error(e)
+      }
+    })
+
+    server.on('listening', () => {
+      console.log(`Running at http://localhost:${port}`)
+      resolve()
+    })
+
+    server.listen(port)
+  })
+}

lib/utils.js

@@ -1,3 +1,5 @@
+const fs = require('fs')
+
 function send(res, source, mime) {
   res.setHeader('Content-Type', mime)
   res.end(source)
@@ -7,5 +9,17 @@ function sendJS(res, source) {
   send(res, source, 'application/javascript')
 }
 
+function sendJSStream(res, file) {
+  res.setHeader('Content-Type', 'application/javascript')
+  const stream = fs.createReadStream(file)
+  stream.on('open', () => {
+    stream.pipe(res)
+  })
+  stream.on('error', (err) => {
+    res.end(err)
+  })
+}
+
 exports.send = send
 exports.sendJS = sendJS
+exports.sendJSStream = sendJSStream