feat: working cloudflare with vue2 and async chunks

packages/nitro/src/nuxt-deploy.ts

@@ -56,33 +56,30 @@ async function main () {
       continue
     }
 
-    console.log('\n')
     consola.info(`Generating bundle for ${hl(target.target)}`)
 
-    const ctx: any = defu(
+    const _config: any = defu(
       target,
       config,
       tryImport(__dirname, `./targets/${target.target}`) || tryImport(config.rootDir, target.target)
     )
 
     const hooks = new Hookable()
-    hooks.addHooks(ctx.hooks)
+    hooks.addHooks(_config.hooks)
 
-    await hooks.callHook('rollup:prepare', ctx)
-    ctx.rollupConfig = getRollupConfig(ctx)
-    await hooks.callHook('rollup:config', ctx)
+    await hooks.callHook('config', _config)
 
-    await hooks.callHook('rollup:before', ctx)
-    const build = await rollup(ctx.rollupConfig)
-    await hooks.callHook('rollup:built', ctx, build)
+    _config.rollupConfig = getRollupConfig(_config)
+    await hooks.callHook('rollup:before', _config)
+    const build = await rollup(_config.rollupConfig)
 
-    const { output } = await build.write(ctx.rollupConfig.output as OutputOptions)
+    const { output } = await build.write(_config.rollupConfig.output as OutputOptions)
     const size = prettyBytes(output[0].code.length)
     const zSize = prettyBytes(await gzipSize(output[0].code))
-    consola.success('Generated', prettyPath((ctx.rollupConfig.output as any).file),
+    consola.success('Generated', prettyPath((_config.rollupConfig.output as any).file),
       chalk.gray(`(Size: ${size} Gzip: ${zSize})`)
     )
-    await hooks.callHook('rollup:done', ctx)
+    await hooks.callHook('done', _config)
   }
 }
 

packages/nitro/src/rollup.config.ts

@@ -78,10 +78,11 @@ export const getRollupConfig = (config) => {
   }))
 
   // https://github.com/rollup/plugins/tree/master/packages/alias
+  const renderer = config.renderer || (config.nuxt === 2 ? 'vue2' : 'vue3')
   options.plugins.push(alias({
     entries: {
       '~runtime': path.resolve(__dirname, 'runtime'),
-      '~rendertostring': config.nuxt === 2 ? require.resolve('./runtime/vue2') : require.resolve('./runtime/vue3'),
+      '~renderer': require.resolve('./runtime/' + renderer),
       '~build': config.buildDir,
       '~mock': require.resolve('./runtime/mock'),
       ...mocks.reduce((p, c) => ({ ...p, [c]: '~mock' }), {})

packages/nitro/src/runtime/server.ts

@@ -2,7 +2,7 @@ import { createRenderer } from 'vue-bundle-renderer'
 import devalue from '@nuxt/devalue'
 
 // @ts-ignore
-import { renderToString } from '~rendertostring'
+import { renderToString } from '~renderer'
 // @ts-ignore
 import server from '~build/dist/server/server'
 // @ts-ignore
@@ -15,7 +15,7 @@ const renderer = createRenderer(server, {
   renderToString
 })
 
-export async function render (url) {
+export async function render (url, ctx: any) {
   const start = process.hrtime()
 
   const ssrContext: any = {
@@ -23,7 +23,8 @@ export async function render (url) {
     runtimeConfig: {
       public: {},
       private: {}
-    }
+    },
+    ...ctx
   }
   const rendered = await renderer.renderToString(ssrContext)
 

packages/nitro/src/runtime/vue2.basic.ts

@@ -0,0 +1,13 @@
+
+import _renderToString from 'vue-server-renderer/basic.js'
+
+export function renderToString (component, context) {
+  return new Promise((resolve, reject) => {
+    _renderToString(component, context, (err, result) => {
+      if (err) {
+        return reject(err)
+      }
+      return resolve(result)
+    })
+  })
+}

packages/nitro/src/targets/cli/index.ts

@@ -4,7 +4,7 @@ import consola from 'consola'
 export default {
   entry: require.resolve('./entry'),
   hooks: {
-    'rollup:done' ({ rollupConfig }) {
+    'done' ({ rollupConfig }) {
       consola.info(`Usage: \`node ${relative(process.cwd(), rollupConfig.output.file)} [route]\``)
     }
   }

packages/nitro/src/targets/cloudflare/entry.ts

@@ -1,18 +1,16 @@
 // @ts-ignore
 import { render } from '~runtime/server'
 
-addEventListener('fetch', (event) => {
-  // @ts-ignore
-  event.respondWith(handleRequest(event.request))
+addEventListener('fetch', (event: any) => {
+  event.respondWith(handleEvent(event.request))
 })
 
-async function handleRequest (_request) {
-  // @ts-ignore
-  const html = await render()
-  return new Response(html, {
-    status: 200,
-    headers: {
-      'content-type': 'text/html;charset=UTF-8'
-    }
-  })
+async function handleEvent (request) {
+  try {
+    const url = new URL(request.url)
+    const { html, status, headers } = await render(url.pathname, { req: request })
+    return new Response(html, { status, headers })
+  } catch (error) {
+    return new Response('Internal Error: ' + error, { status: 500 })
+  }
 }

packages/nitro/src/targets/cloudflare/index.ts

@@ -2,8 +2,15 @@ export default {
   entry: require.resolve('./entry'),
   node: false,
   hooks: {
-    'rollup:config' ({ rollupConfig }) {
-      rollupConfig.output.intro += 'const global = {}; const exports = {}; const module = { exports }; const require = function() {};'
+    config (config) {
+      if (config.nuxt === 2) {
+        config.renderer = 'vue2.basic'
+      }
+    },
+    'rollup:before' ({ rollupConfig }) {
+      rollupConfig.output.intro =
+        'const global = {}; const exports = {}; const module = { exports }; const process = { env: {}, hrtime: () => [0,0]};' +
+      rollupConfig.output.intro
       rollupConfig.output.format = 'iife'
     }
   }

packages/nitro/src/targets/vercel/index.ts

@@ -4,7 +4,7 @@ export default {
   entry: require.resolve('./entry'),
   dynamicImporter: false,
   hooks: {
-    'rollup:done' (_ctx) {
+    'done' () {
       consola.info('Run `vercel deploy` to deploy!')
     }
   }