Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-26 07:32:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: nitro endpoint for viewing _vfs (#362)

Browse Source
This commit is contained in:
Daniel Roe 2021-07-23 15:41:36 +01:00 committed by GitHub
parent 7fee983b52
commit 5d5516dd1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/nitro/src/server/dev.ts
View File

@ -4,7 +4,7 @@ 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'
@ -12,6 +12,7 @@ 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()

53
packages/nitro/src/server/vfs.ts Normal file
View File

@ -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>
`