From e6fa415e5a4a97dadd9ff7aa3339952c9f25dbe0 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Tue, 3 Nov 2020 21:51:11 +0100 Subject: [PATCH] feat: working cloudflare with vue2 and async chunks --- packages/nitro/src/nuxt-deploy.ts | 21 ++++++++---------- packages/nitro/src/rollup.config.ts | 3 ++- packages/nitro/src/runtime/server.ts | 7 +++--- packages/nitro/src/runtime/vue2.basic.ts | 13 +++++++++++ packages/nitro/src/targets/cli/index.ts | 2 +- .../nitro/src/targets/cloudflare/entry.ts | 22 +++++++++---------- .../nitro/src/targets/cloudflare/index.ts | 11 ++++++++-- packages/nitro/src/targets/vercel/index.ts | 2 +- 8 files changed, 49 insertions(+), 32 deletions(-) create mode 100644 packages/nitro/src/runtime/vue2.basic.ts diff --git a/packages/nitro/src/nuxt-deploy.ts b/packages/nitro/src/nuxt-deploy.ts index 748493c938..63cc99e815 100644 --- a/packages/nitro/src/nuxt-deploy.ts +++ b/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) } } diff --git a/packages/nitro/src/rollup.config.ts b/packages/nitro/src/rollup.config.ts index 687214a11e..5c0292e1b5 100644 --- a/packages/nitro/src/rollup.config.ts +++ b/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' }), {}) diff --git a/packages/nitro/src/runtime/server.ts b/packages/nitro/src/runtime/server.ts index 512b24d3fc..ddc15dbfe5 100644 --- a/packages/nitro/src/runtime/server.ts +++ b/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) diff --git a/packages/nitro/src/runtime/vue2.basic.ts b/packages/nitro/src/runtime/vue2.basic.ts new file mode 100644 index 0000000000..4c4bb8eabd --- /dev/null +++ b/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) + }) + }) +} diff --git a/packages/nitro/src/targets/cli/index.ts b/packages/nitro/src/targets/cli/index.ts index c1e4b06ec0..a1ecef69d7 100644 --- a/packages/nitro/src/targets/cli/index.ts +++ b/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]\``) } } diff --git a/packages/nitro/src/targets/cloudflare/entry.ts b/packages/nitro/src/targets/cloudflare/entry.ts index b27f83034c..8143bfaa36 100644 --- a/packages/nitro/src/targets/cloudflare/entry.ts +++ b/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 }) + } } diff --git a/packages/nitro/src/targets/cloudflare/index.ts b/packages/nitro/src/targets/cloudflare/index.ts index f8df33757c..c6d384669b 100644 --- a/packages/nitro/src/targets/cloudflare/index.ts +++ b/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' } } diff --git a/packages/nitro/src/targets/vercel/index.ts b/packages/nitro/src/targets/vercel/index.ts index ff115845d6..74824ee1fd 100644 --- a/packages/nitro/src/targets/vercel/index.ts +++ b/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!') } }