Skip to content

Commit ff0143e

Browse files
antfuantfu
authored
docs: guide users to use versioned CDN (#397)
1 parent 56c6074 commit ff0143e

File tree

4 files changed

+47
-15
lines changed

4 files changed

+47
-15
lines changed

Diff for: ‎README.md

+11-4
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ npm install @vue/composition-api
1717
yarn add @vue/composition-api
1818
```
1919

20-
You must install `@vue/composition-api` via `Vue.use()` before you can use the [Composition API](https://composition-api.vuejs.org/) to compose your component.
20+
You 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.
2121

2222
```js
2323
import Vue from 'vue'
@@ -27,17 +27,24 @@ Vue.use(VueCompositionApi)
2727
```
2828

2929
```js
30-
// in components
30+
// use the APIs
3131
import { ref, reactive } from '@vue/composition-api'
3232
```
3333

34+
> :bulb: When you migrate to Vue 3, just replacing `@vue/composition-api` to `vue` and your code should just work.
35+
3436
### CDN
3537

38+
Add the following lines in your `<head>` to import Vue and `@vue/composition-api`.
39+
40+
<!--cdn-links-start-->
3641
```html
37-
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>
42+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
43+
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
3844
```
45+
<!--cdn-links-end-->
3946

40-
The package will be exposed to global variable `window.vueCompositionApi`
47+
`@vue/composition-api` will be exposed to global variable `window.vueCompositionApi` and you have to install it before using the APIs.
4148

4249
```js
4350
// install the plugin

Diff for: ‎README.zh-CN.md

+4-10
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,6 @@ Vue 2 插件用于提供 Vue 3 中的 **组合式 API**.
1111

1212
---
1313

14-
# 导航
15-
16-
- [安装](#安装)
17-
- [使用](#使用)
18-
- [TypeScript](#TypeScript)
19-
- [TSX](#tsx)
20-
- [限制](#限制)
21-
- [更新日志](https://github.com/vuejs/composition-api/blob/master/CHANGELOG.md)
22-
2314
# 安装
2415

2516
**npm**
@@ -36,9 +27,12 @@ yarn add @vue/composition-api
3627

3728
**CDN**
3829

30+
<!--cdn-links-start-->
3931
```html
40-
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>
32+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
33+
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
4134
```
35+
<!--cdn-links-end-->
4236

4337
通过全局变量 `window.vueCompositionApi` 来使用。
4438

Diff for: ‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
},
1414
"main": "dist/vue-composition-api.js",
1515
"umd:main": "dist/vue-composition-api.umd.js",
16+
"browser": "dist/vue-composition-api.umd.js",
1617
"module": "dist/vue-composition-api.module.js",
1718
"typings": "dist/index.d.ts",
1819
"author": {
@@ -31,10 +32,11 @@
3132
"test": "yarn test-dts && yarn test-unit",
3233
"test-unit": "cross-env NODE_ENV=test jest",
3334
"test-dts": "tsc -p ./test-dts/tsconfig.json && yarn build && tsc -p ./test-dts/tsconfig.build.json",
35+
"update-readme": "node ./scripts/update-readme.js",
3436
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
3537
"prepublish": "yarn test",
3638
"postpublish": "yarn release-gh",
37-
"version": "yarn changelog && git add CHANGELOG.md",
39+
"version": "yarn changelog && yarn update-readme && git add CHANGELOG.md README.*",
3840
"release": "yarn version && git push --follow-tags && yarn publish --non-interactive",
3941
"release-gh": "conventional-github-releaser -p angular"
4042
},

Diff for: ‎scripts/update-readme.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const { promises: fs } = require('fs')
2+
const path = require('path')
3+
const { version } = require('../package.json')
4+
5+
const files = ['../README.md', '../README.zh-CN.md']
6+
7+
const MakeLinks = (version, vueVersion = '2.6') =>
8+
`
9+
\`\`\`html
10+
<script src="https://cdn.jsdelivr.net/npm/vue@${vueVersion}"></script>
11+
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@${version}"></script>
12+
\`\`\`
13+
`
14+
15+
;(async () => {
16+
const links = MakeLinks(version)
17+
18+
for (const file of files) {
19+
const filepath = path.resolve(__dirname, file)
20+
const raw = await fs.readFile(filepath, 'utf-8')
21+
22+
const updated = raw.replace(
23+
/<!--cdn-links-start-->([\s\S]*)<!--cdn-links-end-->/g,
24+
`<!--cdn-links-start-->${links}<!--cdn-links-end-->`
25+
)
26+
27+
await fs.writeFile(filepath, updated, 'utf-8')
28+
}
29+
})()

0 commit comments

Comments
 (0)