{"bugs":{"url":"https://github.com/vuejs/composition-api/issues"},"dist":{"shasum":"f75dc1e71bafd247b667df8782a8abeea9c301fc","tarball":"https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.1.0-beta.2.tgz","fileCount":14,"integrity":"sha512-AZpOhimDerXoXWclEtXP2rMjA6a5I9RJWhVwduvbm3K2uj69/pA4d3aLw116fxYyVE5ZZska1FudrV7lcy8LXg==","signatures":[{"sig":"MEYCIQDJ25zGLaOFRPn/sBn2TvXCRaCf+s8p/CQUxrnnvrC/8AIhAO5O7D8+P95IQJxMsqz3bbB5PK8gXgzxbolIfEB5O71P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":337568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8egSCRA9TVsSAnZWagAAQOsP/328mAziLsyjnvhnTzj5\nSPWIbdZ+aydJV6l+KiEh6btZuPxcskvSkgvrD8xsOYc4kkUqAle8Hr+h8xSl\nD5bIaWP8lfW9JnWapZZne1yYKqHSLq+cPgwNyk+9ZEWMHakpt5/seerepowb\nQaVPhDZBvQOMECI+aOK21PVYXMeod9nIf877SfgHqDe/Xyl9LszmsXb5sHkE\n+MbnXH7JXUz51XjCK0rSoBnod+VbfdseeSTkc+4FuT+jOuoTi8aDO9bZeYZ0\nj7rvUBFBiKcgDzBt45ehxnTr4dgzHA7F0phesxQD0W9kOQEHegAx9oBMvz1y\n5Jq41obhl7wQG4Pjj34bMTdMkXVdMqUNur/ZYu4Ea+YTq9on6FfOMhF/Ns2L\n4exVruCjHWihxHmXSsC6qbNX6uSc8I1khFTyX4Z6Ui3kPn9/Y6eCPYzoCkFT\nFRL4BeF2j1J2+9gjyfHAPTrc60WMbVAQpbOUORmt8fDFO8GQOnLEGSHQQIw5\n8jmR6xzTw3+BVKENWzZp9hOrvvndBpX2scW2QFt/5GTsbLfYX6MyL6ZISM6B\n9bES9LosBRKwoMBs0Hv8q1vMcK/rVbgYLBvkr0xyP1OMbruJoH4bbI/d47u8\nK8vOMjIQ0H7+v6897wn01wXxcVFzN0cyYU+1wt/r+FwUt4yEmCeHRY52O72o\nxN1e\r\n=D9WF\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"preset":"ts-jest","globals":{"__DEV__":true,"__VERSION__":"0.0.0"},"verbose":true,"testMatch":["/test/**/*.spec.{js,ts}"],"setupFiles":["/test/setupTest.js"],"setupFilesAfterEnv":["/test/helpers/wait-for-update.js"],"moduleFileExtensions":["ts","js"]},"main":"./index.js","name":"@vue/composition-api","husky":{"hooks":{"pre-commit":"lint-staged"}},"types":"./dist/index.d.ts","unpkg":"./dist/vue-composition-api.prod.js","author":{"name":"liximomo","email":"liximomo@gmail.com"},"module":"./dist/vue-composition-api.esm.js","readme":"# @vue/composition-api\n\nVue 2 plugin for **Composition API**\n\n[![npm](https://img.shields.io/npm/v/@vue/composition-api)](https://www.npmjs.com/package/@vue/composition-api)\n[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/vuejs/composition-api/Build%20&%20Test)](https://github.com/vuejs/composition-api/actions?query=workflow%3A%22Build+%26+Test%22)\n[![Minzipped size](https://badgen.net/bundlephobia/minzip/@vue/composition-api)](https://bundlephobia.com/result?p=@vue/composition-api)\n\nEnglish | [中文](./README.zh-CN.md) ・ [**Composition API Docs**](https://v3.vuejs.org/guide/composition-api-introduction.html)\n\n## Installation\n\n### NPM\n\n```bash\nnpm install @vue/composition-api\n# or\nyarn add @vue/composition-api\n```\n\nYou must install `@vue/composition-api` as a plugin via `Vue.use()` before you can use the [Composition API](https://composition-api.vuejs.org/) to compose your component.\n\n```js\nimport Vue from 'vue'\nimport VueCompositionAPI from '@vue/composition-api'\n\nVue.use(VueCompositionAPI)\n```\n\n```js\n// use the APIs\nimport { ref, reactive } from '@vue/composition-api'\n```\n\n> :bulb: When you migrate to Vue 3, just replacing `@vue/composition-api` to `vue` and your code should just work.\n\n### CDN\n\nInclude `@vue/composition-api` after Vue and it will install itself automatically.\n\n\n```html\n\n\n```\n\n\n`@vue/composition-api` will be exposed to global variable `window.VueCompositionAPI`.\n\n```ts\nconst { ref, reactive } = VueCompositionAPI\n```\n\n## TypeScript Support\n\n> TypeScript version **>3.5.1** is required\n\nTo let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent`\n\n```ts\nimport { defineComponent } from '@vue/composition-api'\n\nexport default defineComponent({\n // type inference enabled\n})\n```\n\n### JSX/TSX\n\nJSX is now officially supported on [vuejs/jsx](https://github.com/vuejs/jsx). You can enable it by following [this document](https://github.com/vuejs/jsx/tree/dev/packages/babel-preset-jsx#usage). A community maintained version can be found at [babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx) by [@luwanquan](https://github.com/luwanquan).\n\nTo support TSX, create a declaration file with the following content in your project.\n\n```ts\n// file: shim-tsx.d.ts\nimport Vue, { VNode } from 'vue';\nimport { ComponentRenderProxy } from '@vue/composition-api';\n\ndeclare global {\n namespace JSX {\n interface Element extends VNode {}\n interface ElementClass extends ComponentRenderProxy {}\n interface ElementAttributesProperty {\n $props: any; // specify the property name to use\n }\n interface IntrinsicElements {\n [elem: string]: any;\n }\n }\n}\n```\n\n## SSR\n\nEven if there is no definitive Vue 3 API for SSR yet, this plugin implements the `onServerPrefetch` lifecycle hook that allows you to use the `serverPrefetch` hook found in the classic API.\n\n```js\nimport { onServerPrefetch } from '@vue/composition-api'\n\nexport default {\n setup(props, { ssrContext }) {\n const result = ref()\n\n onServerPrefetch(async () => {\n result.value = await callApi(ssrContext.someId)\n })\n\n return {\n result,\n }\n }\n}\n```\n\n## Browser Compatibility\n\n`@vue/composition-api` supports all modern browsers and IE11+. For lower versions IE you should install `WeakMap` polyfill (for example from `core-js` package).\n\n## Limitations\n\n> :white_check_mark: Support     :x: Not Supported\n\n### `Ref` Unwrap\n\n
\n\n❌ Should NOT use ref in a plain object when working with Array\n\n\n```js\nconst a = {\n count: ref(0),\n}\nconst b = reactive({\n list: [a], // `a.count` will not unwrap!!\n})\n\n// no unwrap for `count`, `.value` is required\nb.list[0].count.value === 0 // true\n```\n\n```js\nconst b = reactive({\n list: [\n {\n count: ref(0), // no unwrap!!\n },\n ],\n})\n\n// no unwrap for `count`, `.value` is required\nb.list[0].count.value === 0 // true\n```\n\n
\n\n
\n\n✅ Should always use ref in a reactive when working with Array\n\n\n```js\nconst a = reactive({\n list: [\n reactive({\n count: ref(0),\n }),\n ]\n})\n// unwrapped\na.list[0].count === 0 // true\n\na.list.push(\n reactive({\n count: ref(1),\n })\n)\n// unwrapped\na.list[1].count === 1 // true\n```\n\n
\n\n
\n\n⚠️ set and del workaround for adding and deleting reactive properties\n\n\n> ⚠️ Warning: `set` and `del` do NOT exist in Vue 3. We provide them as a workaround here, due to the limitation of [Vue 2.x reactivity system](https://vuejs.org/v2/guide/reactivity.html#For-Objects).\n>\n> In Vue 2, you will need to call `set` to track new keys on an `object`(similar to `Vue.set` but for `reactive objects` created by the Composition API). In Vue 3, you can just assign them like normal objects.\n>\n> Similarly, in Vue 2 you will need to call `del` to [ensure a key deletion triggers view updates](https://vuejs.org/v2/api/#Vue-delete) in reactive objects (similar to `Vue.delete` but for `reactive objects` created by the Composition API). In Vue 3 you can just delete them by calling `delete foo.bar`.\n\n```ts\nimport { reactive, set } from '@vue/composition-api'\n\nconst a = reactive({\n foo: 1\n})\n\n// add new reactive key\nset(a, 'bar', 1)\n\n// remove a key and trigger reactivity\ndel(a, 'bar')\n```\n\n
\n\n### Template Refs\n\n
\n\n✅ String ref && return it from setup()\n\n\n```html\n\n\n\n```\n\n
\n\n
\n\n✅ String ref && return it from setup() && Render Function / JSX\n\n\n```jsx\nexport default {\n setup() {\n const root = ref(null)\n\n onMounted(() => {\n // the DOM element will be assigned to the ref after initial render\n console.log(root.value) //
\n })\n\n return {\n root,\n }\n },\n render() {\n // with JSX\n return () =>
\n },\n}\n```\n\n
\n\n
\n\n❌ Function ref\n\n\n```html\n\n\n\n```\n\n
\n\n
\n\n❌ Render Function / JSX in setup()\n\n\n```jsx\nexport default {\n setup() {\n const root = ref(null)\n\n return () =>\n h('div', {\n ref: root,\n })\n\n // with JSX\n return () =>
\n },\n}\n```\n\n
\n\n
\n\n⚠️ $refs accessing workaround\n\n\n
\n\n> :warning: **Warning**: The `SetupContext.refs` won't exist in `Vue 3.0`. `@vue/composition-api` provide it as a workaround here.\n\nIf you really want to use template refs in this case, you can access `vm.$refs` via `SetupContext.refs`\n\n```jsx\nexport default {\n setup(initProps, setupContext) {\n const refs = setupContext.refs\n onMounted(() => {\n // the DOM element will be assigned to the ref after initial render\n console.log(refs.root) //
\n })\n\n return () =>\n h('div', {\n ref: 'root',\n })\n\n // with JSX\n return () =>
\n },\n}\n```\n\n
\n\n### Reactive\n\n
\n\n⚠️ reactive() mutates the original object\n\n\n`reactive` uses `Vue.observable` underneath which will ***mutate*** the original object.\n\n> :bulb: In Vue 3, it will return an new proxy object.\n\n
\n\n### Watch\n\n
\n\n❌ onTrack and onTrigger are not available in WatchOptions\n\n\n```js\nwatch(() => {\n /* ... */\n}, {\n immediate: true,\n onTrack() {}, // not available\n onTrigger() {}, // not available\n})\n```\n\n
\n\n### `createApp`\n\n
\n\n⚠️ createApp() is global\n\n\nIn Vue 3, `createApp()` is introduced to provide context(plugin, components, etc.) isolation between app instances. Due the the design of Vue 2, in this plugin, we provide `createApp()` as a forward compatible API which is just an alias of the global.\n\n```ts\nconst app1 = createApp(RootComponent1)\napp1.component('Foo', Foo) // equivalent to Vue.component('Foo', Foo)\napp1.use(VueRouter) // equivalent to Vue.use(VueRouter)\n\nconst app2 = createApp(RootComponent2)\napp2.component('Bar', Bar) // equivalent to Vue.use('Bar', Bar)\n```\n\n
\n\n### `shallowReadonly`\n\n
\n\n⚠️ shallowReadonly() will create a new object and with the same root properties, new properties added will not be readonly or reactive.\n\n\n> :bulb: In Vue 3, it will return an new proxy object.\n\n
\n\n### `readonly`\n\n
\n\n⚠️ readonly() provides only type-level readonly check. \n\n\n`readonly()` is provided as API alignment with Vue 3 on type-level only. Use isReadonly() on it or it's properties can not be guaranteed.\n\n
\n\n### `props`\n\n
\n\n⚠️ toRefs(props.foo) will incorrectly warn when accessing nested levels of props.
\n    ⚠️ isReactive(props.foo) will return false.\n\n\n```ts\ndefineComponent({\n setup(props) {\n const { bar } = toRefs(props.foo) // it will `warn`\n\n // use this instead\n const { foo } = toRefs(props)\n const a = foo.value.bar\n }\n})\n```\n\n
\n\n### Missing APIs\n\nThe following APIs introduced in Vue 3 are not available in this plugin.\n\n- `onRenderTracked`\n- `onRenderTriggered`\n- `isProxy`\n\n### Reactive APIs in `data()`\n\n
\n\n❌ Passing ref, reactive or other reactive apis to data() would not work.\n\n\n```jsx\nexport default {\n data() {\n return {\n // will result { a: { value: 1 } } in template\n a: ref(1),\n }\n },\n}\n```\n\n
\n\n### `emits` Options\n\n
\n\n❌ emits option is provided in type-level only, in order to align with Vue 3's type interface. Does NOT have actual effects on the code.\n\n\n```ts\ndefineComponent({\n emits: {\n // has no effects\n submit: (eventOption) => {\n if (...) {\n return true\n } else {\n console.warn('Invalid submit event payload!')\n return false\n }\n }\n }\n})\n```\n\n
\n\n### Performance Impact\n\nDue the the limitation of Vue2's public API. `@vue/composition-api` inevitably introduces some performance overhead. Note that in most scenarios, this shouldn't be the source of performance issues.\n\nYou can check the [benchmark results](https://antfu.github.io/vue-composition-api-benchmark-results/) for more details.\n","exports":{".":{"import":"./dist/vue-composition-api.esm.js","require":"./index.js"}},"license":"MIT","scripts":{"lint":"prettier --write --parser typescript \"{src,test,test-dts}/**/*.ts?(x)\" && prettier --write \"{src,test}/**/*.js\"","test":"yarn test-dts && yarn test-unit","build":"rimraf dist typings && tsc --emitDeclarationOnly && rollup -c","start":"concurrently \"tsc --emitDeclarationOnly -w\" \"cross-env rollup -c -w\"","release":"yarn version && yarn test && yarn publish --non-interactive --tag next && git push --follow-tags","version":"yarn changelog && yarn update-readme && git add CHANGELOG.md README.*","test-dts":"tsc -p ./test-dts/tsconfig.json && yarn build && tsc -p ./test-dts/tsconfig.build.json","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s","test-unit":"cross-env NODE_ENV=test jest","release-gh":"conventional-github-releaser -p angular","update-readme":"node ./scripts/update-readme.js"},"_npmUser":{"name":"antfu","email":"anthonyfu117@hotmail.com"},"homepage":"https://github.com/vuejs/composition-api#readme","jsdelivr":"./dist/vue-composition-api.prod.js","keywords":["vue","composition-api"],"prettier":{"semi":false,"printWidth":80,"singleQuote":true},"repository":{"url":"git+https://github.com/vuejs/composition-api.git","type":"git"},"description":"Provide logic composition capabilities for Vue.","directories":{},"licenseText":"MIT License\n\nCopyright (c) 2019-present, liximomo(X.L)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","lint-staged":{"*.js":["prettier --write","git add"],"*.ts?(x)":["prettier --parser=typescript --write","git add"]},"maintainers":[{"name":"soda","email":"haoqunjiang+npm@gmail.com"},{"name":"linusborg","email":"t.luenborg@googlemail.com"},{"name":"antfu","email":"anthonyfu117@hotmail.com"},{"name":"pikax","email":"david-181@hotmail.com"}],"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.14","jest":"^26.6.3","husky":"^4.3.8","rimraf":"^3.0.2","rollup":"^2.52.7","ts-jest":"^26.5.5","prettier":"^2.3.2","cross-env":"^7.0.3","typescript":"^4.3.5","vue-router":"^3.5.2","@types/jest":"^26.0.23","@types/node":"^15.14.0","lint-staged":"^11.0.0","concurrently":"^6.2.0","rollup-plugin-dts":"^3.0.2","vue-server-renderer":"^2.6.14","rollup-plugin-terser":"^7.0.2","@rollup/plugin-replace":"^2.4.2","rollup-plugin-typescript2":"^0.30.0","conventional-changelog-cli":"^2.1.1","@rollup/plugin-node-resolve":"^13.0.0","conventional-github-releaser":"^3.1.5"},"peerDependencies":{"vue":">= 2.5 < 3"},"_npmOperationalInternal":{"tmp":"tmp/composition-api_1.1.0-beta.2_1626466322242_0.5715008603472604","host":"s3://npm-registry-packages"},"_id":"@vue/composition-api@1.1.0-beta.2","version":"1.1.0-beta.2"}