Skip to content

Commit 007bde6

Browse files
LeBenLeBenLeBenLeBen
authored
feat: upgrade to support Vue 3 (#114)
Co-authored-by: EGOIST <[email protected]> BREAKING CHANGE: Require Vue 3
1 parent 3a49886 commit 007bde6

15 files changed

+2786
-1967
lines changed

‎.babelrc

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
{
22
"presets": [
3-
["@babel/preset-env",{
4-
"modules": false,
5-
"loose": true
6-
}]
3+
[
4+
"@babel/preset-env",
5+
{
6+
"modules": false,
7+
"loose": true
8+
}
9+
]
710
],
8-
"plugins": [
9-
"transform-vue-jsx"
10-
]
11+
"plugins": ["@vue/babel-plugin-jsx"]
1112
}

‎README.md

+18-16
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,12 @@ This is a Vue port for [react-content-loader](https://github.com/danilowoz/react
2020

2121
## Install
2222

23+
Note: For Vue 2, use `vue-content-loader@^0.2` instead.
24+
2325
```bash
2426
yarn add vue-content-loader
27+
# For Vue 2
28+
# yarn add vue-content-loader@^0.2
2529
```
2630

2731
CDN: [UNPKG](https://unpkg.com/vue-content-loader/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-content-loader/) (available as `window.contentLoaders`)
@@ -74,27 +78,25 @@ import {
7478

7579
This is also how [ListLoader](./src/ListLoader.js) is created.
7680

77-
You can also use the [online tool](http://danilowoz.com/create-vue-content-loader/ ) to create shapes for your custom loader.
81+
You can also use the [online tool](http://danilowoz.com/create-vue-content-loader/) to create shapes for your custom loader.
7882

7983
## API
8084

8185
### Props
8286

83-
84-
|Prop|Type|Default|Description|
85-
|---|---|---|---|
86-
|width|number|`400`||
87-
|height|number|`130`||
88-
|speed|number|`2`||
89-
|preserveAspectRatio|string|`'xMidYMid meet'`||
90-
|primaryColor|string|`'#f9f9f9'`||
91-
|secondaryColor|string|`'#ecebeb'`||
92-
|uniqueKey|string|`randomId()`|Unique ID, you need to make it consistent for SSR|
93-
|animate|boolean|`true`||
94-
|baseUrl|string|empty string|Required if you're using `<base url="/" />` in your `<head />`. Defaults to an empty string. This prop is common used as: `<content-loader :base-url="$route.fullPath" />` which will fill the SVG attribute with the relative path. Related [#14](https://github.com/egoist/vue-content-loader/issues/14).|
95-
|primaryOpacity|number|`1`|Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari|
96-
|secondaryOpacity|number|`1`|Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari|
97-
87+
| Prop | Type | Default | Description |
88+
| ------------------- | ------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
89+
| width | number | `400` | |
90+
| height | number | `130` | |
91+
| speed | number | `2` | |
92+
| preserveAspectRatio | string | `'xMidYMid meet'` | |
93+
| primaryColor | string | `'#f9f9f9'` | |
94+
| secondaryColor | string | `'#ecebeb'` | |
95+
| uniqueKey | string | `randomId()` | Unique ID, you need to make it consistent for SSR |
96+
| animate | boolean | `true` | |
97+
| baseUrl | string | empty string | Required if you're using `<base url="/" />` in your `<head />`. Defaults to an empty string. This prop is common used as: `<content-loader :base-url="$route.fullPath" />` which will fill the SVG attribute with the relative path. Related [#14](https://github.com/egoist/vue-content-loader/issues/14). |
98+
| primaryOpacity | number | `1` | Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari |
99+
| secondaryOpacity | number | `1` | Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari |
98100

99101
## Credits
100102

‎bili.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/** @type {import('bili').Config} */
2+
module.exports = {
3+
externals: ['vue'],
4+
output: {
5+
format: ['cjs', 'es', 'umd', 'umd-min'],
6+
fileName: 'vue-content-loader.[format][min][ext]',
7+
moduleName: 'contentLoaders'
8+
}
9+
}

‎package.json

+13-13
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@
88
},
99
"main": "dist/vue-content-loader.cjs.js",
1010
"module": "dist/vue-content-loader.es.js",
11-
"cdn": "dist/vue-content-loader.min.js",
12-
"unpkg": "dist/vue-content-loader.min.js",
13-
"jsdelivr": "dist/vue-content-loader.min.js",
11+
"cdn": "dist/vue-content-loader.umd.min.js",
12+
"unpkg": "dist/vue-content-loader.umd.min.js",
13+
"jsdelivr": "dist/vue-content-loader.umd.min.js",
1414
"files": [
1515
"dist"
1616
],
1717
"sideEffects": false,
1818
"scripts": {
1919
"prepublishOnly": "npm run build",
2020
"test": "echo fine",
21-
"build": "bili --format cjs,es,umd,umd-min --module-name contentLoaders",
21+
"build": "bili",
2222
"storybook": "poi -so --config stories/poi.config.js",
2323
"build:storybook": "poi --prod --config stories/poi.config.js"
2424
},
@@ -29,15 +29,15 @@
2929
"license": "MIT",
3030
"devDependencies": {
3131
"@types/poi": "^12.5.0",
32-
"babel-plugin-transform-vue-jsx": "^4",
33-
"bili": "^3.0.12",
34-
"poi": "^12.6.10",
35-
"vue": "^2.6.10",
36-
"vue-router": "^3.0.6",
37-
"vue-template-compiler": "^2.6.10",
38-
"vue-test-utils": "^1.0.0-beta.9"
32+
"@vue/babel-plugin-jsx": "^1.0.2",
33+
"@vue/compiler-sfc": "^3.0.5",
34+
"bili": "^5.0.5",
35+
"poi": "12.10.3",
36+
"vue": "^3.0.5",
37+
"vue-loader": "^16.1.2",
38+
"vue-router": "^4.0.3"
3939
},
40-
"dependencies": {
41-
"babel-helper-vue-jsx-merge-props": "^2.0.3"
40+
"peerDependencies": {
41+
"vue": "^3"
4242
}
4343
}

‎src/BulletListLoader.js

+15-17
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import ContentLoader from './ContentLoader'
22

3-
export default {
4-
name: 'BulletListLoader',
5-
functional: true,
6-
render(h, { data }) {
7-
return (
8-
<ContentLoader {...data}>
9-
<circle cx="10" cy="20" r="8" />
10-
<rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
11-
<circle cx="10" cy="50" r="8" />
12-
<rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
13-
<circle cx="10" cy="80" r="8" />
14-
<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
15-
<circle cx="10" cy="110" r="8" />
16-
<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
17-
</ContentLoader>
18-
)
19-
}
3+
const BulletListLoader = (props, { attrs }) => {
4+
return (
5+
<ContentLoader {...attrs}>
6+
<circle cx="10" cy="20" r="8" />
7+
<rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
8+
<circle cx="10" cy="50" r="8" />
9+
<rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
10+
<circle cx="10" cy="80" r="8" />
11+
<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
12+
<circle cx="10" cy="110" r="8" />
13+
<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
14+
</ContentLoader>
15+
)
2016
}
17+
18+
export default BulletListLoader

‎src/CodeLoader.js

+16-18
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
import ContentLoader from './ContentLoader'
22

3-
export default {
4-
name: 'CodeLoader',
5-
functional: true,
6-
render(h, { data }) {
7-
return (
8-
<ContentLoader {...data}>
9-
<rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
10-
<rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
11-
<rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
3+
const CodeLoader = (props, { attrs }) => {
4+
return (
5+
<ContentLoader {...attrs}>
6+
<rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
7+
<rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
8+
<rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
129

13-
<rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
14-
<rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
10+
<rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
11+
<rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
1512

16-
<rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
17-
<rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
18-
<rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
13+
<rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
14+
<rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
15+
<rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
1916

20-
<rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
21-
</ContentLoader>
22-
)
23-
}
17+
<rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
18+
</ContentLoader>
19+
)
2420
}
21+
22+
export default CodeLoader

0 commit comments

Comments
 (0)