Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

fix(bridge): add docs links and warnings for data composables #2010

Merged
merged 3 commits into from
Nov 19, 2021
Merged

fix(bridge): add docs links and warnings for data composables #2010

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d1337e2
fix(bridge): add docs links and warnings for data composables
danielroe Nov 18, 2021
0e5a646
docs: add link/deprecation for `useMeta` and `wrapProperty`
danielroe Nov 18, 2021
6bbca44
fix: remove specific docs links
danielroe Nov 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/content/1.getting-started/4.bridge-composition-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,12 @@ For typescript support, you can use `@nuxt/types`:
import type { Plugin } from '@nuxt/types'

export default <Plugin> function (ctx, inject) {}

```

::alert
You may wish to [migrate your plugins to Nuxt 3-style plugins](/getting-started/bridge#new-plugins-format-optional) as a next (optional) step.
::

### `onGlobalSetup`

This function has been removed, but many use cases can be met by using `useNuxtApp` or `useState` within `defineNuxtPlugin`. You can also run any custom code within the `setup()` function of a layout.
Expand Down
36 changes: 19 additions & 17 deletions packages/bridge/src/runtime/capi.legacy.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export { ref }

// Common deprecation utils
// TODO: Add migration guide docs to @nuxtjs/composition-api
const checkDocsMsg = 'Please see https://go.nuxtjs.dev/bridge-capi for more information.'
const checkDocsMsg = 'Please see https://v3.nuxtjs.org/getting-started/bridge-composition-api for more information.'
const msgPrefix = '[bridge] [legacy capi]'
const unsupported = message => () => { throw new Error(`${msgPrefix} ${message} ${checkDocsMsg}`) }
const _warned = {}
Expand All @@ -73,24 +73,23 @@ const warnOnce = (id, message) => {
}
}

// TODO: Add warning back once we had replacement for useAsync and useMeta
// Warn in case of having any imports from `@nuxtjs/composition-api`
// warnOnce('import', `\`@nuxtjs/composition-api\` is deprecated. ${checkDocsMsg}`)
warnOnce('import', `\`@nuxtjs/composition-api\` is deprecated. ${checkDocsMsg}`)

// Stub functions that provided type support
export const defineNuxtMiddleware = unsupported('You are using `defineNuxtMiddleware`, which is not supported. You can remove wrapper function to keep using Nuxt 2 middleware.')
export const defineNuxtPlugin = unsupported('You are using `defineNuxtPlugin`, which can be replaced with `defineNuxtPlugin` (import from `#app`).')
export const defineNuxtMiddleware = unsupported('You are using `defineNuxtMiddleware`, which is not supported. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#definenuxtmiddleware).')
pi0 marked this conversation as resolved.
Show resolved Hide resolved
export const defineNuxtPlugin = unsupported('You are using `defineNuxtPlugin`, which has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#definenuxtplugin).')

// Internal exports
export const setMetaPlugin = unsupported('`setMetaPlugin` is an internal function that is no longer used.')
export const setSSRContext = unsupported('`setSSRContext` is an internal function that is no longer used.')
export const globalPlugin = unsupported('`globalPlugin` is an internal function that is no longer used.')

// Deprecated functions
export const withContext = unsupported('`withContext` is a deprecated method that is no longer provided and can be replaced with `useNuxtApp` (import from `#app`).')
export const withContext = unsupported('`withContext` is a deprecated method that is no longer provided, but which has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#usecontext-and-withcontext).')
export const useStatic = unsupported('`useStatic` is a deprecated method that is no longer provided.')
export const reqRef = unsupported('`reqRef` is a deprecated method that is no longer provided and can be replaced with `ref` (import from `@vue/composition-api`).')
export const reqSsrRef = unsupported('`reqSsrRef` is no longer provided and can be replaced with `useState` (import from `#app`).')
export const reqRef = unsupported('`reqRef` is a deprecated method that is no longer provided, but which has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#ssrref-and-shallowssrref).')
export const reqSsrRef = unsupported('`reqSsrRef` is no longer provided, but has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#ssrref-and-shallowssrref).')

// ssrRef helpers
const sanitise = val => (val && JSON.parse(JSON.stringify(val))) || val
Expand All @@ -100,13 +99,13 @@ export const ssrRef = (value, key) => {
const vm = getVM()
if (!vm) { throw new Error('ssrRef no longer supports global/ambient context and must be called within a setup() function') }

warnOnce('ssrRef', '`ssrRef` is deprecated and can be replaced with `useState` (import from `#app`).')
warnOnce('ssrRef', '`ssrRef` is deprecated and has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#ssrref-and-shallowssrref).')

return useState(key, value instanceof Function ? value : () => value)
}

export const shallowSsrRef = (value, key) => {
warnOnce('shallowSsrRef', '`shallowSsrRef` is deprecated and can be replaced with `useState` (import from `#app`).')
warnOnce('shallowSsrRef', '`shallowSsrRef` is deprecated and has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#ssrref-and-shallowssrref).')

const ref = ssrRef(value, key)

Expand All @@ -118,7 +117,7 @@ export const shallowSsrRef = (value, key) => {
}

export const ssrPromise = (value, key) => {
warnOnce('ssrPromise', 'ssrPromise is deprecated. Please use an alternative implementation.')
warnOnce('ssrPromise', 'ssrPromise is deprecated. Please see https://v3.nuxtjs.org/getting-started/bridge-composition-api#ssrpromise).')

const ssrRefs = useSSRRefs()
const promise = Promise.resolve(isHMR() ? getValue(value) : ssrRefs[key] ?? getValue(value))
Expand All @@ -129,13 +128,13 @@ export const ssrPromise = (value, key) => {

// Composition API functions
export const onGlobalSetup = (fn) => {
warnOnce('onGlobalSetup', '`onGlobalSetup` is deprecated and can be replaced with `defineNuxtPlugin(nuxtApp => nuxtApp.provide)` (import from `#app`).')
warnOnce('onGlobalSetup', '`onGlobalSetup` is deprecated. Please see https://v3.nuxtjs.org/getting-started/bridge-composition-api#onglobalsetup).')
const app = useNuxtApp()
app._setupFns.push(fn)
}

export const useAsync = (cb, key) => {
warnOnce('useAsync', 'You are using `useAsync`, which is deprecated.')
warnOnce('useAsync', 'You are using `useAsync`, which has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#useasync-and-usefetch).')

const _ref = isRef(key) ? key : ssrRef(null, key)

Expand All @@ -148,7 +147,7 @@ export const useAsync = (cb, key) => {
}

export const useContext = () => {
warnOnce('useContext', 'You are using `useContext`, which can be replaced with `useNuxtApp` (import from `#app`).')
warnOnce('useContext', 'You are using `useContext`, which has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#usecontext-and-withcontext).')

const route = useRoute()
const nuxt = useNuxtApp()
Expand Down Expand Up @@ -215,6 +214,7 @@ export const defineComponent = (options) => {
}

export const useMeta = (init) => {
warnOnce('useMeta', 'You are using `useMeta`, which has a replacement provided by Nuxt Bridge. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#usemeta).')
const vm = getCurrentInstance()
const refreshMeta = () => vm.$meta().refresh()

Expand Down Expand Up @@ -242,23 +242,24 @@ export const useMeta = (init) => {

// Wrapped properties
export const wrapProperty = (property, makeComputed = true) => () => {
warnOnce('wrapProperty', 'You are using `wrapProperty`, which is deprecated. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#wrapproperty).')
const vm = getCurrentInstance()
return makeComputed ? computed(() => vm[property]) : vm[property]
}

export const useRouter = () => {
warnOnce('useRouter', 'You are using `useRouter`, which can be replaced with `useRouter` (import from `#app`).')
warnOnce('useRouter', 'You are using `useRouter`, which has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#userouter-and-useroute).')
return _useRouter()
}

export const useRoute = () => {
warnOnce('useRoute', 'You are using `useRoute`, which can be replaced with `useRoute` (import from `#app`).')
warnOnce('useRoute', 'You are using `useRoute`, which has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#userouter-and-useroute).')
const vm = getCurrentInstance()
return computed(() => vm.$route)
}

export const useStore = () => {
warnOnce('useRoute', 'You are using `useStore`, which can be replaced with `useNuxtApp` (import from `#app`).')
warnOnce('useRoute', 'You are using `useStore`, which has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#usestore).')
return getCurrentInstance().$store
}

Expand Down Expand Up @@ -484,6 +485,7 @@ async function callFetches () {
const isSsrHydration = vm => vm.$vnode?.elm?.dataset?.fetchKey

export const useFetch = (callback) => {
warnOnce('useFetch', 'You are using `useFetch`, which has a Nuxt 3-compatible replacement. See https://v3.nuxtjs.org/getting-started/bridge-composition-api#useasync-and-usefetch).')
const vm = getCurrentInstance()
const nuxt = useNuxtApp()

Expand Down