From 0bc2516a9abccb322a98b00060e902dbfa624995 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 11 May 2021 23:28:27 +0100 Subject: [PATCH 1/3] fix: use middleware for vite registration --- src/module.ts | 32 ++++++++++++++++++++++++++----- src/runtime/templates/register.js | 1 + src/vite-plugin.ts | 6 ++++++ 3 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 src/runtime/templates/register.js diff --git a/src/module.ts b/src/module.ts index 1df6378a..d80892df 100644 --- a/src/module.ts +++ b/src/module.ts @@ -1,15 +1,12 @@ import type { Module, NuxtOptions } from '@nuxt/types' +import { writeFile } from 'fs-extra' import { relative, resolve, sep } from 'upath' import { name, version } from '../package.json' import { registerBabelPlugin } from './babel-register' import { addGlobalsFile } from './globals-register' -import { - addResolvedTemplate, - resolveCoreJsVersion, - resolveRelativePath, -} from './utils' +import { addResolvedTemplate, resolveCoreJsVersion } from './utils' const compositionApiModule: Module = function compositionApiModule() { const nuxtOptions: NuxtOptions = this.nuxt.options @@ -49,11 +46,36 @@ const compositionApiModule: Module = function compositionApiModule() { }) }) + // Add dummy middleware file + + const middleware = addResolvedTemplate.call(this, 'register.js') + this.nuxt.hook( + 'build:templates', + ({ templateVars }: { templateVars: Record }) => { + templateVars.middleware.unshift({ + src: middleware, + dst: '.' + sep + relative(nuxtOptions.buildDir, middleware), + name: 'compositionApiRegistration', + }) + } + ) + // If we're using nuxt-vite, register vite plugin & inject configuration this.nuxt.hook('vite:extend', async (ctx: any) => { const { compositionApiPlugin } = await import('./vite-plugin') ctx.config.plugins.push(compositionApiPlugin()) + ctx.config.optimizeDeps.exclude.push('@nuxtjs/composition-api') + + await writeFile( + middleware, + ` + import Vue from 'vue'; + import CompositionApi from '@vue/composition-api'; + Vue.use(CompositionApi); + export default {}; + ` + ) }) // If we're using Babel, register Babel plugin for injecting keys diff --git a/src/runtime/templates/register.js b/src/runtime/templates/register.js new file mode 100644 index 00000000..b1c6ea43 --- /dev/null +++ b/src/runtime/templates/register.js @@ -0,0 +1 @@ +export default {} diff --git a/src/vite-plugin.ts b/src/vite-plugin.ts index f04d7b15..5e4a37fd 100644 --- a/src/vite-plugin.ts +++ b/src/vite-plugin.ts @@ -17,6 +17,12 @@ export function compositionApiPlugin(): Plugin & { enforce: 'pre' } { name: 'nuxt:composition-api', enforce: 'pre', transform(code: string, filename: string) { + // Remove auto-registration (we'll handle it within middleware) + code = code.replace( + /import .@nuxtjs\/composition-api\/dist\/register.;?/, + '' + ) + code = code.replace( /@nuxtjs[\\/]composition-api(?![\\/])/g, '~composition-api' From 8bd78b667007bc7d5bedd2bfff71a2586a64cba0 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 12 May 2021 11:33:18 +0100 Subject: [PATCH 2/3] fix: apply vite changes from https://github.com/nuxt-community/composition-api/pull/480 Co-authored-by: pooya parsa --- package.json | 5 ++++- src/module.ts | 13 ++----------- src/vite-plugin.ts | 15 +++------------ 3 files changed, 9 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 8db58e5c..786da619 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,10 @@ "./package.json": "./package.json", "./dist/babel-plugin": "./dist/babel-plugin.js", "./dist/globals": "./dist/globals.js", - "./dist/register": "./dist/register.js", + "./dist/register": { + "import": "./dist/register.mjs", + "require": "./dist/register.js" + }, "./dist/runtime/templates/*": "./dist/runtime/templates/*" }, "main": "./dist/index.js", diff --git a/src/module.ts b/src/module.ts index d80892df..d72ce43c 100644 --- a/src/module.ts +++ b/src/module.ts @@ -1,6 +1,6 @@ import type { Module, NuxtOptions } from '@nuxt/types' import { writeFile } from 'fs-extra' -import { relative, resolve, sep } from 'upath' +import { relative, sep } from 'upath' import { name, version } from '../package.json' @@ -15,18 +15,10 @@ const compositionApiModule: Module = function compositionApiModule() { addGlobalsFile.call(this) - // Add library alias for benefit of vite - - nuxtOptions.alias['~composition-api'] = resolve(__dirname, 'index.mjs') - // Force transpilation of this library (to enable resolution of globals file) nuxtOptions.build.transpile = nuxtOptions.build.transpile || [] - nuxtOptions.build.transpile.push( - '@nuxtjs/composition-api', - '~composition-api', - __dirname - ) + nuxtOptions.build.transpile.push('@nuxtjs/composition-api', __dirname) // Define @vue/composition-api resolution to prevent using different versions of @vue/composition-api @@ -65,7 +57,6 @@ const compositionApiModule: Module = function compositionApiModule() { this.nuxt.hook('vite:extend', async (ctx: any) => { const { compositionApiPlugin } = await import('./vite-plugin') ctx.config.plugins.push(compositionApiPlugin()) - ctx.config.optimizeDeps.exclude.push('@nuxtjs/composition-api') await writeFile( middleware, diff --git a/src/vite-plugin.ts b/src/vite-plugin.ts index 5e4a37fd..c68a4b47 100644 --- a/src/vite-plugin.ts +++ b/src/vite-plugin.ts @@ -17,17 +17,8 @@ export function compositionApiPlugin(): Plugin & { enforce: 'pre' } { name: 'nuxt:composition-api', enforce: 'pre', transform(code: string, filename: string) { - // Remove auto-registration (we'll handle it within middleware) - code = code.replace( - /import .@nuxtjs\/composition-api\/dist\/register.;?/, - '' - ) - - code = code.replace( - /@nuxtjs[\\/]composition-api(?![\\/])/g, - '~composition-api' - ) - const keyedFunctions = /(useStatic|shallowSsrRef|ssrPromise|ssrRef|reqSsrRef|useAsync)/ + const keyedFunctions = + /(useStatic|shallowSsrRef|ssrPromise|ssrRef|reqSsrRef|useAsync)/ if (!keyedFunctions.test(code)) { return { code, @@ -43,7 +34,7 @@ export function compositionApiPlugin(): Plugin & { enforce: 'pre' } { walk(ast, { enter(node) { - const { end } = (node as unknown) as { + const { end } = node as unknown as { end: number } const { callee, arguments: args = [] } = node as { From c90b5dd6e8424f357ab22f85e76182606e7ad82a Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 12 May 2021 12:54:55 +0100 Subject: [PATCH 3/3] fix: update `register` filename --- src/module.ts | 2 +- src/runtime/templates/{register.js => register.mjs} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/runtime/templates/{register.js => register.mjs} (100%) diff --git a/src/module.ts b/src/module.ts index 3951931d..c9f6b249 100644 --- a/src/module.ts +++ b/src/module.ts @@ -40,7 +40,7 @@ const compositionApiModule: Module = function compositionApiModule() { // Add dummy middleware file - const middleware = addResolvedTemplate.call(this, 'register.js') + const middleware = addResolvedTemplate.call(this, 'register.mjs') this.nuxt.hook( 'build:templates', ({ templateVars }: { templateVars: Record }) => { diff --git a/src/runtime/templates/register.js b/src/runtime/templates/register.mjs similarity index 100% rename from src/runtime/templates/register.js rename to src/runtime/templates/register.mjs