Skip to content

Commit bc9c7ff

Browse files
antfuantfu
committed
v0.1.0
1 parent 88936ec commit bc9c7ff

27 files changed

+329
-18
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -114,3 +114,7 @@ dist
114114
.yarn/build-state.yml
115115
.yarn/install-state.gz
116116
.pnp.*
117+
118+
119+
package-lock.json
120+
examples/**/yarn.lock

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020-present, Anthony Fu
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+20-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
# vue-demi
1+
<h1 align="center">Vue Demi</h1>
22

3-
> WIP
3+
<h4 align="center">
44

5-
`Vue Demi` (french "half") is a plugin dev utility that allows you to write Vue plugins for Vue 2 and 3 without worry about users' installed version. See more details in [this blog](https://antfu.me/posts/making-plugins-work-for-vue-2-and-3/).
5+
[![npm](https://img.shields.io/npm/v/vue-demi)](https://www.npmjs.com/package/vue-demi)
6+
7+
</h4>
8+
9+
`Vue Demi` ("half" in French) is a plugin development utility that allows you to write Vue plugins for Vue 2 and 3 without worry about users' installed version. See more details in [this blog](https://antfu.me/posts/make-libraries-working-with-vue-2-and-3).
10+
11+
> 🚧 Expiremental
612
713
## Usage
814

@@ -11,15 +17,23 @@ Install this as your plugin's dependency:
1117
```json
1218
{
1319
"dependencies": {
14-
"vue-demi": "*"
20+
"vue-demi": "latest"
1521
}
1622
}
1723
```
1824

19-
import every thing from it, it will redirect to `vue@2` `@vue/composition-api` or `vue@next` based on users' environments.
25+
Import everything related to Vue from it, it will redirect to `vue@2` `@vue/composition-api` or `vue@next` based on users' environments.
2026

2127
```ts
2228
import { ref, reactive, defineComponent } from 'vue-demi'
2329
```
2430

25-
Publish your plugin and all is done!
31+
Then publish your plugin and all is done!
32+
33+
## Examples
34+
35+
See [examples](./examples)
36+
37+
## License
38+
39+
MIT License © 2020 [Anthony Fu](https://github.com/antfu)

‎examples/@vue-demi/use-mouse/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# @vue-demi/use-mouse
2+
3+
This is a demonstration Vue plugin works for Vue 2 and 3 which is powered by [vue-demi](https://github.com/antfu/vue-demi).

‎examples/@vue-demi/use-mouse/package.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "@vue-demi/use-mouse",
3+
"version": "0.0.1",
4+
"main": "dist/cjs/index.js",
5+
"module": "dist/esm/index.js",
6+
"typings": "dist/esm/index.d.ts",
7+
"license": "MIT",
8+
"dependencies": {
9+
"vue-demi": "latest"
10+
},
11+
"devDependencies": {
12+
"typescript": "^3.9.5",
13+
"vue": "^2.6.11"
14+
},
15+
"scripts": {
16+
"build": "npx rimraf dist && npm run build:esm && npm run build:cjs",
17+
"build:esm": "tsc --module es2015 --outDir dist/esm -d",
18+
"build:cjs": "tsc --module commonjs --outDir dist/cjs"
19+
},
20+
"files": [
21+
"dist"
22+
]
23+
}

‎examples/@vue-demi/use-mouse/src/index.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ref, onMounted, onUnmounted } from 'vue-demi'
2+
3+
export function useMouse() {
4+
const x = ref(0)
5+
const y = ref(0)
6+
7+
const update = (e: MouseEvent) => {
8+
x.value = e.pageX
9+
y.value = e.pageY
10+
}
11+
12+
onMounted(() => {
13+
window.addEventListener('mousemove', update)
14+
})
15+
16+
onUnmounted(() => {
17+
window.removeEventListener('mousemove', update)
18+
})
19+
20+
return {
21+
x,
22+
y
23+
}
24+
}

‎examples/@vue-demi/use-mouse/tsconfig.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"compilerOptions": {
3+
"module": "ESNext",
4+
"lib": ["ESNext", "DOM"],
5+
"target": "es2016",
6+
"outDir": "dist",
7+
"rootDir": "./src",
8+
"moduleResolution": "node",
9+
},
10+
"exclude": [
11+
"node_modules",
12+
"**/node_modules/*"
13+
]
14+
}

‎examples/README.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Examples of Vue Demi
2+
3+
A demo Vue library is published as [`@vue-demo/use-mouse`](https://github.com/antfu/vue-demi/blob/master/examples/%40vue-demi/use-mouse/src/index.ts).
4+
5+
You can see it being imported by
6+
7+
- Vue 2 ([Vue CLI Project](./demo-vue-2-cli))
8+
- Vue 3 ([Vite Project](./demo-vue-3-vite))
9+
10+
And things just works.

‎examples/demo-vue-2-cli/.gitignore

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw?

‎examples/demo-vue-2-cli/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "demo-vue-2-cli",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build"
8+
},
9+
"dependencies": {
10+
"@vue-demi/use-mouse": "^0.0.1",
11+
"@vue/composition-api": "^1.0.0-beta.1",
12+
"vue": "^2.6.11"
13+
},
14+
"devDependencies": {
15+
"@vue/cli-plugin-typescript": "~4.4.0",
16+
"@vue/cli-service": "~4.4.0",
17+
"typescript": "~3.9.3",
18+
"vue-template-compiler": "^2.6.11"
19+
},
20+
"browserslist": [
21+
"> 1%",
22+
"last 2 versions",
23+
"not dead"
24+
]
25+
}

‎examples/demo-vue-2-cli/public/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title><%= htmlWebpackPlugin.options.title %></title>
8+
</head>
9+
<body>
10+
<noscript>
11+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
12+
</noscript>
13+
<div id="app"></div>
14+
<!-- built files will be auto injected -->
15+
</body>
16+
</html>

‎examples/demo-vue-2-cli/src/App.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<p>Mouse: {{x}}x{{y}}</p>
3+
</template>
4+
5+
<script>
6+
import { useMouse } from '@vue-demi/use-mouse'
7+
8+
export default {
9+
name: 'App',
10+
setup() {
11+
return useMouse()
12+
}
13+
}
14+
</script>

‎examples/demo-vue-2-cli/src/main.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
4+
Vue.config.productionTip = false
5+
6+
new Vue({
7+
render: h => h(App),
8+
}).$mount('#app')

‎examples/demo-vue-2-cli/src/shims-vue.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '*.vue' {
2+
import Vue from 'vue'
3+
export default Vue
4+
}

‎examples/demo-vue-2-cli/tsconfig.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "esnext",
5+
"strict": true,
6+
"importHelpers": true,
7+
"moduleResolution": "node",
8+
"esModuleInterop": true,
9+
"allowSyntheticDefaultImports": true,
10+
"sourceMap": true,
11+
"baseUrl": ".",
12+
"types": [
13+
"webpack-env"
14+
],
15+
"paths": {
16+
"@/*": [
17+
"src/*"
18+
]
19+
},
20+
"lib": [
21+
"esnext",
22+
"dom",
23+
"dom.iterable",
24+
"scripthost"
25+
]
26+
},
27+
"include": [
28+
"src/**/*.ts",
29+
"src/**/*.tsx",
30+
"src/**/*.vue",
31+
"tests/**/*.ts",
32+
"tests/**/*.tsx"
33+
],
34+
"exclude": [
35+
"node_modules"
36+
]
37+
}

‎examples/demo-vue-3-vite/.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
*.local

‎examples/demo-vue-3-vite/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Vue Demi with Vite</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.js"></script>
11+
</body>
12+
</html>

‎examples/demo-vue-3-vite/package.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "demo-vue-3-vite",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build"
8+
},
9+
"dependencies": {
10+
"@vue-demi/use-mouse": "^0.0.1",
11+
"vue": "^3.0.0-beta.15"
12+
},
13+
"devDependencies": {
14+
"@vue/compiler-sfc": "^3.0.0-beta.15",
15+
"vite": "^1.0.0-beta.3"
16+
}
17+
}

‎examples/demo-vue-3-vite/src/App.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<p>Mouse: {{x}}x{{y}}</p>
3+
</template>
4+
5+
<script>
6+
import { useMouse } from '@vue-demi/use-mouse'
7+
8+
export default {
9+
name: 'App',
10+
setup() {
11+
return useMouse()
12+
}
13+
}
14+
</script>

‎examples/demo-vue-3-vite/src/index.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#app {
2+
font-family: Avenir, Helvetica, Arial, sans-serif;
3+
-webkit-font-smoothing: antialiased;
4+
-moz-osx-font-smoothing: grayscale;
5+
text-align: center;
6+
color: #2c3e50;
7+
margin-top: 60px;
8+
}

‎examples/demo-vue-3-vite/src/main.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
import './index.css'
4+
5+
createApp(App).mount('#app')

‎lib/index.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export * from './v2'
1+
export * from './v2/index.d.ts'

‎lib/index.esm.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export * from './v2'
1+
export * from './v2/index.esm'

‎lib/v2/index.esm.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
import Vue from 'vue'
2+
import VueCompositionAPI from '@vue/composition-api'
3+
4+
Vue.use(VueCompositionAPI)
5+
26
export * from '@vue/composition-api'
37
export { Vue }

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "vue-demi",
3-
"version": "0.0.1",
3+
"version": "0.1.0",
44
"main": "lib/index.cjs.js",
5-
"type": "lib/index.d.ts",
5+
"typings": "lib/index.d.ts",
66
"module": "lib/index.esm.js",
77
"repository": "https://github.com/antfu/vue-demi.git",
88
"author": "Anthony Fu <[email protected]>",

0 commit comments

Comments
 (0)