refactor: significant packaging changes (#438)

BREAKING CHANGE: There is no longer a need to amend `moduleNameMapper` in your jest.config - you should remove any entry for `@nuxtjs/composition-api` there.

BREAKING CHANGE: `defineNuxtConfig`, `defineNuxtModule` and `defineNuxtServerMiddleware` have been removed.

BREAKING CHANGE: `@nuxtjs/composition-api/babel` has been renamed to `@nuxtjs/composition-api/dist/babel-plugin`.

* This library is now located within `node_modules` rather than being templated, with a limited template for the config.
* There is no longer a need to amend `moduleNameMapper` in your jest.config. When used outside a Nuxt context, the module will 'auto-mock' and use https://github.com/nuxt-community/composition-api/blob/be94d4f4e1321565864dd3d3d5e850f7cabf6ca9/src/globals.ts instead of live Nuxt configuration.
* The ESM version of the library is now `.mjs` (but we polyfill support for this and other `.mjs` files in webpack 4).
* `defineNuxtConfig`, `defineNuxtModule` and `defineNuxtServerMiddleware` have been removed from this library. You can create your own helper with the following code:
```ts
import { Module, ServerMiddleware, NuxtConfig } from '@nuxt/types'

export const defineNuxtModule = <T extends Record<string, unknown>>(module: Module<T>) => module
export const defineNuxtServerMiddleware = (serverMiddleware: ServerMiddleware) => serverMiddleware
export const defineNuxtConfig = (config: NuxtConfig) => config
```

Co-authored-by: Pooya Parsa <[email protected]>

Author: danielroe

babel.js

@@ -3,7 +3,7 @@ title: Quick start
 description: 'Getting started with the Nuxt Composition API.'
 category: Getting started
 position: 2
-version: 0.161
+version: 0.225
 ---
 
 ## Quick start
@@ -58,13 +58,3 @@ version: 0.161
 - For convenience, this package also exports the [`@vue/composition-api`](https://github.com/vuejs/composition-api) methods and hooks, so you can import directly from `@nuxtjs/composition-api`.
 
 </alert>
-
-## Testing with Jest
-
-If you need to use jest tests with this module installed, just add the following lines to your `jest.config.js`:
-
-```js{}[jest.config.js]
-moduleNameMapper: {
-  '@nuxtjs/composition-api': '@nuxtjs/composition-api/entrypoint',
-},
-```

docs/content/en/getting-started/setup.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/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.
+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/dist/babel-plugin` to your Babel plugins.
 
 </alert>
 

docs/content/en/helpers/ssrPromise.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/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.
+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/dist/babel-plugin` to your Babel plugins.
 
 </alert>
 

docs/content/en/helpers/ssrRef.md

@@ -3,27 +3,13 @@ title: defineNuxt*
 description: 'You can get automatic type-hinting for Nuxt configuration, plugins, middleware, modules and serverMiddleware.'
 category: Typings
 position: 10
-version: 0.201
+version: 0.225
 ---
 
 There are some helpers to optimize developer experience when creating Nuxt plugins, middleware, server middleware and modules.
 
 These helpers simply return the function or object passed into them, adding the correct typings.
 
-## defineNuxtConfig
-
-Create your `nuxt.config.js` with types with:
-
-```ts
-import { defineNuxtConfig } from '@nuxtjs/composition-api'
-
-export default defineNuxtConfig({
-  // your nuxt config
-})
-```
-
-<alert type="warning">Note that if you define your Nuxt config this way you will need to ensure that `@nuxtjs/composition-api` is present in your `dependencies` rather than `devDependencies`.</alert>
-
 ## defineNuxtPlugin
 
 Create a plugin with types with:
@@ -47,27 +33,3 @@ export default defineNuxtMiddleware(ctx => {
   // do stuff
 })
 ```
-
-## defineNuxtModule
-
-Create a Nuxt module with types with:
-
-```ts
-import { defineNuxtModule } from '@nuxtjs/composition-api'
-
-export default defineNuxtModule<{ myOption: boolean }>(moduleOptions => {
-  // do stuff
-})
-```
-
-## defineNuxtServerMiddleware
-
-Create server middleware with types with:
-
-```ts
-import { defineNuxtServerMiddleware } from '@nuxtjs/composition-api'
-
-export default defineNuxtServerMiddleware((req, res, next) => {
-  // do stuff
-})
-```

docs/content/en/typings/definitionHelpers.md

@@ -1,9 +1,12 @@
 module.exports = {
-  verbose: true,
   testEnvironment: 'node',
-  coveragePathIgnorePatterns: ['test', '.babelrc.js'],
+  collectCoverage: true,
+  verbose: true,
   transform: {
     '^.+\\.(js|ts)$': 'babel-jest',
   },
   setupFiles: ['<rootDir>/test/unit/setup'],
+  moduleNameMapper: {
+    '@nuxtjs/composition-api/dist/globals': '<rootDir>/src/globals',
+  },
 }

entrypoint.js

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

jest.config.js

@@ -18,29 +18,28 @@
     "url": "https://roe.dev"
   },
   "exports": {
-    "./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"
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./module": "./dist/module.js",
+    "./package.json": "./package.json",
+    "./dist/babel-plugin": "./dist/babel-plugin.js",
+    "./dist/globals": "./dist/globals.js",
+    "./dist/runtime/templates/*": "./dist/runtime/templates/*"
   },
-  "types": "lib/entrypoint.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
-    "lib/**/*",
-    "lib/index.d.ts",
-    "babel.js",
-    "entrypoint.js",
-    "module.js",
-    "!**/*.map"
+    "dist",
+    "module.js"
   ],
   "scripts": {
-    "build": "yarn clean && yarn compile",
-    "clean": "rimraf lib/*",
-    "clean:fixture": "rimraf dist/ test/fixture/.nuxt",
-    "compile": "siroc build",
+    "build": "siroc build",
+    "clean:fixture": "rimraf test/fixture/dist/ test/fixture/.nuxt",
     "dev": "nuxt dev test/fixture",
-    "fixture:generate": "yarn fixture:generate:export && yarn http-server -s -p 5000 dist",
+    "fixture:generate": "yarn fixture:generate:export && yarn http-server -s -p 5000 test/fixture/dist",
     "fixture:generate:export": "yarn clean:fixture && cross-env GENERATE=true PORT=6000 CMD=generate yarn nuxt-run",
     "fixture:prod": "yarn clean:fixture && cross-env CMD=build yarn nuxt-run && cross-env CMD=start yarn nuxt-run",
     "lint": "run-s lint:all:*",
@@ -59,7 +58,7 @@
     "test:e2e-ssr": "cross-env PORT=4000 start-server-and-test fixture:prod 4000 \"testcafe firefox:headless test/e2e\"",
     "test:types": "tsd",
     "test:unit": "jest",
-    "watch": "yarn compile -w"
+    "watch": "yarn build -w"
   },
   "dependencies": {
     "@vue/composition-api": "1.0.0-rc.6",
@@ -73,7 +72,9 @@
     "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-typescript": "^7.13.0",
+    "@nuxt/test-utils": "^0.2.1",
     "@nuxt/types": "^2.15.4",
+    "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/module-test-utils": "^1.6.3",
     "@release-it/conventional-changelog": "^2.0.1",
     "@types/fs-extra": "^9.0.10",

module.js

@@ -1,27 +1,7 @@
 import { defineSirocConfig } from 'siroc'
-import replace from '@rollup/plugin-replace'
-import { resolve } from 'upath'
-
-import jiti from 'jiti'
-
-const getFile = jiti()
 
 export default defineSirocConfig({
-  hooks: {
-    'build:extendRollup'(pkg, { rollupConfig }) {
-      rollupConfig.forEach(config => {
-        if (!config.plugins) return
-        config.plugins.push(
-          replace({
-            preventAssignment: true,
-            values: {
-              __HELPER_FUNCTIONS__: JSON.stringify(
-                Object.keys(getFile(resolve(__dirname, './src/entrypoint.ts')))
-              ),
-            },
-          })
-        )
-      })
-    },
+  rollup: {
+    externals: ['@nuxtjs/composition-api/dist/globals'],
   },
 })

package.json

@@ -0,0 +1,2 @@
+// eslint-disable-next-line
+module.exports = require('jiti')(__dirname)('./babel-plugin.ts')

siroc.config.js

@@ -14,10 +14,10 @@ export function registerBabelPlugin(this: ModuleThis) {
 
   if (nuxtOptions.build.babel.plugins instanceof Function) {
     console.warn(
-      'Unable to automatically add Babel plugin. Make sure your custom `build.babel.plugins` returns `@nuxtjs/composition-api/babel`'
+      'Unable to automatically add Babel plugin. Make sure your custom `build.babel.plugins` returns `@nuxtjs/composition-api/dist/babel-plugin`'
     )
   } else {
-    nuxtOptions.build.babel.plugins.push(resolveRelativePath('babel'))
+    nuxtOptions.build.babel.plugins.push(resolveRelativePath('babel-plugin'))
   }
 
   /**

src/babel-plugin.js

@@ -0,0 +1,41 @@
+import type { ModuleThis } from '@nuxt/types/config/module'
+import { withTrailingSlash } from 'ufo'
+
+import { prepareUseStatic } from './static'
+import {
+  addResolvedTemplate,
+  getNuxtGlobals,
+  isFullStatic,
+  isUrl,
+} from './utils'
+
+export function addGlobalsFile(this: ModuleThis) {
+  const nuxtOptions = this.options
+
+  const { staticPath } = prepareUseStatic.call(this)
+  const { globalContext, globalNuxt } = getNuxtGlobals.call(this)
+
+  const routerBase = withTrailingSlash(nuxtOptions.router.base)
+  const publicPath = withTrailingSlash(nuxtOptions.build.publicPath)
+
+  const globals = {
+    // useFetch
+    isFullStatic: isFullStatic(nuxtOptions),
+    // useStatic
+    staticPath,
+    publicPath: isUrl(publicPath) ? publicPath : routerBase,
+    // Throughout
+    globalContext,
+    globalNuxt,
+  }
+
+  const contents = Object.entries(globals)
+    .map(([key, value]) => `export const ${key} = ${JSON.stringify(value)}`)
+    .join('\n')
+
+  const globalsFile = addResolvedTemplate.call(this, 'globals.js', {
+    contents,
+  })
+
+  nuxtOptions.alias['@nuxtjs/composition-api/dist/globals'] = globalsFile
+}

src/babel.ts src/babel-plugin.ts

@@ -0,0 +1,11 @@
+// This is a shim for runtime/templates/globals.js
+
+export const globalNuxt = '$nuxt'
+
+export const globalContext = '__NUXT__'
+
+export const isFullStatic = false
+
+export const staticPath = '/static-path'
+
+export const publicPath = '/_nuxt/'

src/module/babel.ts src/babel-register.ts

@@ -1,3 +1 @@
-import compositionApiModule from './module'
-
-export default compositionApiModule
+export * from './runtime/composables'