refactor: package changes

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

@@ -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/typings/definitionHelpers.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
-})
-```

jest.config.js

@@ -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',
+  },
 }

module.js

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

package.json

@@ -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",

siroc.config.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'],
   },
 })

src/babel-plugin.js

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

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

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

src/globals-register.ts

@@ -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/globals.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/index.ts

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

src/module.ts

@@ -0,0 +1,94 @@
+import type { Module, NuxtOptions } from '@nuxt/types'
+
+import { name, version } from '../package.json'
+
+import { registerBabelPlugin } from './babel-register'
+import { addGlobalsFile } from './globals-register'
+import {
+  addResolvedTemplate,
+  resolveCoreJsVersion,
+  resolveRelativePath,
+} from './utils'
+
+const compositionApiModule: Module<never> = function compositionApiModule() {
+  const nuxtOptions: NuxtOptions = this.nuxt.options
+
+  // Register globals file where Nuxt config can be accessed from live library
+
+  addGlobalsFile.call(this)
+
+  // Force transpilation of this library (to enable resolution of globals file)
+
+  nuxtOptions.build.transpile = nuxtOptions.build.transpile || []
+  nuxtOptions.build.transpile.push('@nuxtjs/composition-api', __dirname)
+
+  // Define @vue/composition-api resolution to prevent using different versions of @vue/composition-api
+
+  nuxtOptions.alias['@vue/composition-api'] = this.nuxt.resolver.resolveModule(
+    '@vue/composition-api/dist/vue-composition-api.esm.js'
+  )
+
+  // Turn off webpack4 module context for .mjs files (as it appears to have some issues)
+
+  this.extendBuild(config => {
+    if (!config.module) return
+
+    config.module.rules.unshift({
+      test: /\.mjs$/,
+      type: 'javascript/auto',
+      include: [/node_modules/],
+    })
+  })
+
+  // Register the Vue Composition API before any other layouts
+
+  this.addLayout(resolveRelativePath('runtime/templates/layout.js'), '0')
+
+  // 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())
+  })
+
+  // If we're using Babel, register Babel plugin for injecting keys
+
+  registerBabelPlugin.call(this)
+
+  // Add appropriate corejs polyfill for IE support
+
+  addResolvedTemplate.call(this, 'polyfill.client.js', {
+    corejsPolyfill: resolveCoreJsVersion.call(this),
+  })
+
+  // Plugin to allow running onGlobalSetup
+  const globalPlugin = addResolvedTemplate.call(this, 'plugin.js')
+
+  this.nuxt.hook('modules:done', () => {
+    nuxtOptions.plugins.unshift(globalPlugin)
+  })
+
+  // TODO: remove
+  // Allow setting head() within onGlobalSetup
+
+  if (
+    !nuxtOptions.buildModules.includes('@nuxtjs/pwa') &&
+    !nuxtOptions.modules.includes('@nuxtjs/pwa')
+  ) {
+    nuxtOptions.plugins.push(addResolvedTemplate.call(this, 'meta.js'))
+  } else if (nuxtOptions.dev) {
+    console.warn(
+      'useMeta is not supported in onGlobalSetup as @nuxtjs/pwa detected.\nSee https://github.com/nuxt-community/composition-api/issues/307'
+    )
+  }
+}
+
+// eslint-disable-next-line
+// @ts-ignore
+compositionApiModule.meta = {
+  name,
+  version,
+}
+
+export default compositionApiModule
+// export * from './defineHelpers'