refactor: change how library is imported (#418)

BREAKING CHANGE: `@nuxtjs/composition-api/module` is now how the module should be imported in `nuxt.config`

* module exports are now identical in node versions with/without support for package.json exports. There are three public entrypoints:
  - `@nuxtjs/composition-api/babel` (for babel plugin which normally shouldn't be invoked by user)
  - `@nuxtjs/composition-api/entrypoint` (for jest config)
  - `@nuxtjs/composition-api/module` (the new module path, which MUST be updated in your `nuxt.config`)

This also solves a regression with using this module with `nuxt-vite`.

babel.js

@@ -0,0 +1,2 @@
+// stub file for node versions without support for package exports
+module.exports = require('./lib/babel')

docs/content/en/getting-started/setup.md

@@ -31,7 +31,7 @@ version: 0.161
    ```js[nuxt.config.js]
    {
      buildModules: [
-       '@nuxtjs/composition-api'
+       '@nuxtjs/composition-api/module'
      ]
    }
    ```
@@ -65,8 +65,6 @@ If you need to use jest tests with this module installed, just add the following
 
 ```js{}[jest.config.js]
 moduleNameMapper: {
-  '@nuxtjs/composition-api': '@nuxtjs/composition-api/lib/entrypoint.js',
-  // alternatively, depending on your node version
-  // '@nuxtjs/composition-api': '@nuxtjs/composition-api/entrypoint',
+  '@nuxtjs/composition-api': '@nuxtjs/composition-api/entrypoint',
 },
 ```

docs/content/en/helpers/ssrPromise.md

@@ -36,7 +36,7 @@ export default defineComponent({
 
 <alert type="info">
 
-Under the hood, `ssrPromise` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
+Under the hood, `ssrPromise` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api/module` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
 
 </alert>
 

docs/content/en/helpers/ssrRef.md

@@ -30,7 +30,7 @@ const val2 = ssrRef(myExpensiveSetterFunction)
 
 <alert type="info">
 
-Under the hood, `ssrRef` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
+Under the hood, `ssrRef` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api/module` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
 
 </alert>
 

entrypoint.js

@@ -0,0 +1,2 @@
+// stub file for node versions without support for package exports
+module.exports = require('./lib/entrypoint')

example/nuxt.config.js

@@ -16,7 +16,7 @@ export default {
       publicPath: 'example',
     },
   } : {}),
-  buildModules: ['@nuxtjs/composition-api'],
+  buildModules: ['@nuxtjs/composition-api/module'],
   generate: {
     interval: 2000,
     async routes() {

module.js

@@ -0,0 +1,2 @@
+// stub file for node versions without support for package exports
+module.exports = require('./lib/index')

package.json

@@ -18,24 +18,20 @@
     "url": "https://roe.dev"
   },
   "exports": {
-    ".": "./lib/index.js",
-    "./babel": {
-      "require": "./lib/babel.js",
-      "import": "./lib/babel.es.js"
-    },
-    "./entrypoint": {
-      "require": "./lib/entrypoint.js",
-      "import": "./lib/entrypoint.es.js"
-    },
-    "./templates/*": "./lib/templates/*",
-    "./": "./"
+    "./babel": "./lib/babel.js",
+    "./entrypoint": "./lib/entrypoint.js",
+    "./module": "./lib/index.js",
+    "./lib/entrypoint.es": "./lib/entrypoint.es.js",
+    "./lib/templates/*": "./lib/templates/*",
+    "./package.json": "./package.json"
   },
-  "main": "lib/index.js",
   "types": "lib/entrypoint.d.ts",
   "files": [
     "lib/**/*",
     "lib/index.d.ts",
-    "templates",
+    "babel.js",
+    "entrypoint.js",
+    "module.js",
     "!**/*.map"
   ],
   "scripts": {

src/composables/async.ts

@@ -13,7 +13,7 @@ import { validateKey } from './utils'
  *
  * **At the moment, `useAsync` is only suitable for one-offs, unless you provide your own unique key.**
  * @param cb The async function that will populate the ref this function returns.
- * @param key Under the hood, `useAsync` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
+ * @param key Under the hood, `useAsync` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api/module` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
  * 
  * @example
   ```ts

src/composables/ssr-ref.ts

@@ -75,7 +75,7 @@ const ssrValue = <T>(
 /**
  * `ssrRef` will automatically add ref values to `window.__NUXT__` on SSR if they have been changed from their initial value. It can be used outside of components, such as in shared utility functions, and it supports passing a factory function that will generate the initial value of the ref. **At the moment, an `ssrRef` is only suitable for one-offs, unless you provide your own unique key.**
  * @param value This can be an initial value or a factory function that will be executed on server-side to get the initial value.
- * @param key Under the hood, `ssrRef` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
+ * @param key Under the hood, `ssrRef` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api/module` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
  * @example
   ```ts
   import { ssrRef } from '@nuxtjs/composition-api'
@@ -141,7 +141,7 @@ export const ssrRef = <T>(value: T | (() => T), key?: string): Ref<T> => {
 /**
  * This helper creates a [`shallowRef`](https://vue-composition-api-rfc.netlify.app/api.html#shallowref) (a ref that tracks its own .value mutation but doesn't make its value reactive) that is synced between client & server.
  * @param value This can be an initial value or a factory function that will be executed on server-side to get the initial value.
- * @param key Under the hood, `shallowSsrRef` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
+ * @param key Under the hood, `shallowSsrRef` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api/module` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
 
  * @example
   ```ts
@@ -188,7 +188,7 @@ export const shallowSsrRef = <T>(
 /**
  * `ssrPromise` runs a promise on the server and serialises the result as a resolved promise for the client. It needs to be run within the `setup()` function but note that it returns a promise which will require special handling. (For example, you cannot just return a promise from setup and use it in the template.)
  * @param value This can be an initial value or a factory function that will be executed on server-side to get the initial value.
- * @param key Under the hood, `ssrPromise` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
+ * @param key Under the hood, `ssrPromise` requires a key to ensure that the ref values match between client and server. If you have added `@nuxtjs/composition-api/module` to your `buildModules`, this will be done automagically by an injected Babel plugin. If you need to do things differently, you can specify a key manually or add `@nuxtjs/composition-api/babel` to your Babel plugins.
  * @example
 
     ```ts

src/module/index.ts

@@ -32,7 +32,7 @@ const compositionApiModule: Module<never> = function compositionApiModule() {
   const routerBase = withTrailingSlash(nuxtOptions.router.base)
   const publicPath = withTrailingSlash(nuxtOptions.build.publicPath)
 
-  const entryFile = addResolvedTemplate.call(this, 'entrypoint', {
+  const entryFile = addResolvedTemplate.call(this, 'lib/entrypoint.es', {
     // useFetch
     isFullStatic: isFullStatic(nuxtOptions),
     // useStatic
@@ -59,7 +59,7 @@ const compositionApiModule: Module<never> = function compositionApiModule() {
 
   // Register the Vue Composition API before any other layouts
 
-  this.addLayout(resolveRelativePath('./templates/layout'), '0')
+  this.addLayout(resolveRelativePath('lib/templates/layout.js'), '0')
 
   // If we're using nuxt-vite, register vite plugin & inject configuration
 
@@ -80,12 +80,12 @@ const compositionApiModule: Module<never> = function compositionApiModule() {
 
   // Add appropriate corejs polyfill for IE support
 
-  addResolvedTemplate.call(this, 'templates/polyfill.client.js', {
+  addResolvedTemplate.call(this, 'lib/templates/polyfill.client.js', {
     corejsPolyfill: resolveCoreJsVersion.call(this),
   })
 
   // Plugin to allow running onGlobalSetup
-  const globalPlugin = addResolvedTemplate.call(this, 'templates/plugin.js')
+  const globalPlugin = addResolvedTemplate.call(this, 'lib/templates/plugin.js')
 
   this.nuxt.hook('modules:done', () => {
     nuxtOptions.plugins.unshift(globalPlugin)
@@ -99,7 +99,7 @@ const compositionApiModule: Module<never> = function compositionApiModule() {
     !nuxtOptions.modules.includes('@nuxtjs/pwa')
   ) {
     nuxtOptions.plugins.push(
-      addResolvedTemplate.call(this, 'templates/meta.js')
+      addResolvedTemplate.call(this, 'lib/templates/meta.js')
     )
   } else if (nuxtOptions.dev) {
     console.warn(
@@ -120,10 +120,10 @@ compositionApiModule.meta = {
 
 const warnToAddModule = () => {
   console.error(
-    'You need to add `@nuxtjs/composition-api` to your buildModules in order to use it. See https://composition-api.nuxtjs.org/getting-started/setup.'
+    'You need to add `@nuxtjs/composition-api/module` to your buildModules in order to use it. See https://composition-api.nuxtjs.org/getting-started/setup.'
   )
   throw new Error(
-    'You need to add `@nuxtjs/composition-api` to your buildModules in order to use it. See https://composition-api.nuxtjs.org/getting-started/setup.'
+    'You need to add `@nuxtjs/composition-api/module` to your buildModules in order to use it. See https://composition-api.nuxtjs.org/getting-started/setup.'
   )
 }
 

src/module/utils.ts

@@ -16,15 +16,7 @@ export function isUrl(url: string) {
 }
 
 export function resolveRelativePath(id: string) {
-  let src
-
-  try {
-    src = require.resolve(`@nuxtjs/composition-api/${id}`)
-  } catch {
-    src = require.resolve(join(__dirname, `./${id}`))
-  }
-
-  return src
+  return require.resolve(`@nuxtjs/composition-api/${id}`)
 }
 
 export function addResolvedTemplate(

test/fixture/nuxt.config.ts

@@ -63,7 +63,11 @@ export default <NuxtConfig>{
   build: {
     publicPath: isPublic ? 'fixture' : undefined,
   },
-  buildModules: [process.env.NODE_ENV === 'test' ? require('../..') : rootDir],
+  buildModules: [
+    process.env.NODE_ENV === 'test'
+      ? require('../../module')
+      : resolve(rootDir, './module.js'),
+  ],
   pwa: {
     icon: false,
     manifest: false,