feat: nitro endpoint for viewing _vfs (#362)

nitrojs · Jul 23, 2021 · edd67c5 · edd67c5
1 parent cab8faa
commit edd67c5
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/src/server/dev.ts b/src/server/dev.ts
@@ -4,14 +4,15 @@ import { loading as loadingTemplate } from '@nuxt/design'
 import chokidar, { FSWatcher } from 'chokidar'
 import debounce from 'debounce'
 import { stat } from 'fs-extra'
-import { createApp, Middleware } from 'h3'
+import { createApp, Middleware, useBase } from 'h3'
 import { createProxy } from 'http-proxy'
 import { listen, Listener, ListenOptions } from 'listhen'
 import servePlaceholder from 'serve-placeholder'
 import serveStatic from 'serve-static'
 import { resolve } from 'upath'
 import type { Server } from 'connect'
 import type { NitroContext } from '../context'
+import { handleVfs } from './vfs'
 
 export function createDevServer (nitroContext: NitroContext) {
   // Worker
@@ -57,6 +58,9 @@ export function createDevServer (nitroContext: NitroContext) {
   app.use(nitroContext._nuxt.publicPath, serveStatic(resolve(nitroContext._nuxt.buildDir, 'dist/client')))
   app.use(nitroContext._nuxt.routerBase, serveStatic(resolve(nitroContext._nuxt.publicDir)))
 
+  // debugging endpoint to view vfs
+  app.use('/_vfs', useBase('/_vfs', handleVfs(nitroContext)))
+
   // Dynamic Middlwware
   const legacyMiddleware = createDynamicMiddleware()
   const devMiddleware = createDynamicMiddleware()

diff --git a/src/server/vfs.ts b/src/server/vfs.ts
@@ -0,0 +1,53 @@
+import { createError, Handle } from 'h3'
+import { NitroContext } from '..'
+
+export function handleVfs (ctx: NitroContext): Handle {
+  return (req) => {
+    if (req.url === '/') {
+      return '<!doctype html><html><body><ul>' + Object.keys(ctx.vfs).map((key) => {
+        const url = encodeURIComponent(key)
+        return `<li><a href="/_vfs/${url}">${key.replace(ctx._nuxt.rootDir, '')}</a></li>`
+      }).join('\n') + '</ul></body></html>'
+    }
+    const param = decodeURIComponent(req.url.slice(1))
+    if (param in ctx.vfs) {
+      return editorTemplate({
+        readOnly: true,
+        language: param.endsWith('html') ? 'html' : 'javascript',
+        theme: 'vs-dark',
+        value: ctx.vfs[param]
+      })
+    }
+    return createError({ message: 'File not found', statusCode: 404 })
+  }
+}
+
+const monacoVersion = '0.20.0'
+const monacoUrl = `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/${monacoVersion}/min`
+const vsUrl = `${monacoUrl}/vs`
+
+const editorTemplate = (options: Record<string, any>) => `
+<!doctype html>
+<html>
+<head>
+    <link rel="stylesheet" data-name="vs/editor/editor.main" href="${vsUrl}/editor/editor.main.min.css">
+</head>
+<body style="margin: 0">
+<div id="editor" style="height:100vh"></div>
+<script src="${vsUrl}/loader.min.js"></script>
+<script>
+  require.config({ paths: { vs: '${vsUrl}' } })
+
+  const proxy = URL.createObjectURL(new Blob([\`
+    self.MonacoEnvironment = { baseUrl: '${monacoUrl}' }
+    importScripts('${vsUrl}/base/worker/workerMain.min.js')
+  \`], { type: 'text/javascript' }))
+  window.MonacoEnvironment = { getWorkerUrl: () => proxy }
+
+  require(['vs/editor/editor.main'], function () {
+    monaco.editor.create(document.getElementById('editor'), ${JSON.stringify(options)})
+  })
+</script>
+</body>
+</html>
+`