Skip to content

Commit

Permalink
feat: upgrade to support Vue 3 (#114)
Browse files Browse the repository at this point in the history
Co-authored-by: EGOIST <0x142857@gmail.com>

BREAKING CHANGE:

Require Vue 3
  • Loading branch information
LeBenLeBen committed Jan 18, 2021
1 parent 3a49886 commit 007bde6
Show file tree
Hide file tree
Showing 15 changed files with 2,786 additions and 1,967 deletions.
15 changes: 8 additions & 7 deletions .babelrc
@@ -1,11 +1,12 @@
{
"presets": [
["@babel/preset-env",{
"modules": false,
"loose": true
}]
[
"@babel/preset-env",
{
"modules": false,
"loose": true
}
]
],
"plugins": [
"transform-vue-jsx"
]
"plugins": ["@vue/babel-plugin-jsx"]
}
34 changes: 18 additions & 16 deletions README.md
Expand Up @@ -20,8 +20,12 @@ This is a Vue port for [react-content-loader](https://github.com/danilowoz/react

## Install

Note: For Vue 2, use `vue-content-loader@^0.2` instead.

```bash
yarn add vue-content-loader
# For Vue 2
# yarn add vue-content-loader@^0.2
```

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

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

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

## API

### Props


|Prop|Type|Default|Description|
|---|---|---|---|
|width|number|`400`||
|height|number|`130`||
|speed|number|`2`||
|preserveAspectRatio|string|`'xMidYMid meet'`||
|primaryColor|string|`'#f9f9f9'`||
|secondaryColor|string|`'#ecebeb'`||
|uniqueKey|string|`randomId()`|Unique ID, you need to make it consistent for SSR|
|animate|boolean|`true`||
|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).|
|primaryOpacity|number|`1`|Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari|
|secondaryOpacity|number|`1`|Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari|

| Prop | Type | Default | Description |
| ------------------- | ------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| width | number | `400` | |
| height | number | `130` | |
| speed | number | `2` | |
| preserveAspectRatio | string | `'xMidYMid meet'` | |
| primaryColor | string | `'#f9f9f9'` | |
| secondaryColor | string | `'#ecebeb'` | |
| uniqueKey | string | `randomId()` | Unique ID, you need to make it consistent for SSR |
| animate | boolean | `true` | |
| 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). |
| primaryOpacity | number | `1` | Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari |
| secondaryOpacity | number | `1` | Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari |

## Credits

Expand Down
9 changes: 9 additions & 0 deletions bili.config.js
@@ -0,0 +1,9 @@
/** @type {import('bili').Config} */
module.exports = {
externals: ['vue'],
output: {
format: ['cjs', 'es', 'umd', 'umd-min'],
fileName: 'vue-content-loader.[format][min][ext]',
moduleName: 'contentLoaders'
}
}
26 changes: 13 additions & 13 deletions package.json
Expand Up @@ -8,17 +8,17 @@
},
"main": "dist/vue-content-loader.cjs.js",
"module": "dist/vue-content-loader.es.js",
"cdn": "dist/vue-content-loader.min.js",
"unpkg": "dist/vue-content-loader.min.js",
"jsdelivr": "dist/vue-content-loader.min.js",
"cdn": "dist/vue-content-loader.umd.min.js",
"unpkg": "dist/vue-content-loader.umd.min.js",
"jsdelivr": "dist/vue-content-loader.umd.min.js",
"files": [
"dist"
],
"sideEffects": false,
"scripts": {
"prepublishOnly": "npm run build",
"test": "echo fine",
"build": "bili --format cjs,es,umd,umd-min --module-name contentLoaders",
"build": "bili",
"storybook": "poi -so --config stories/poi.config.js",
"build:storybook": "poi --prod --config stories/poi.config.js"
},
Expand All @@ -29,15 +29,15 @@
"license": "MIT",
"devDependencies": {
"@types/poi": "^12.5.0",
"babel-plugin-transform-vue-jsx": "^4",
"bili": "^3.0.12",
"poi": "^12.6.10",
"vue": "^2.6.10",
"vue-router": "^3.0.6",
"vue-template-compiler": "^2.6.10",
"vue-test-utils": "^1.0.0-beta.9"
"@vue/babel-plugin-jsx": "^1.0.2",
"@vue/compiler-sfc": "^3.0.5",
"bili": "^5.0.5",
"poi": "12.10.3",
"vue": "^3.0.5",
"vue-loader": "^16.1.2",
"vue-router": "^4.0.3"
},
"dependencies": {
"babel-helper-vue-jsx-merge-props": "^2.0.3"
"peerDependencies": {
"vue": "^3"
}
}
32 changes: 15 additions & 17 deletions src/BulletListLoader.js
@@ -1,20 +1,18 @@
import ContentLoader from './ContentLoader'

export default {
name: 'BulletListLoader',
functional: true,
render(h, { data }) {
return (
<ContentLoader {...data}>
<circle cx="10" cy="20" r="8" />
<rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="50" r="8" />
<rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="80" r="8" />
<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="110" r="8" />
<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
</ContentLoader>
)
}
const BulletListLoader = (props, { attrs }) => {
return (
<ContentLoader {...attrs}>
<circle cx="10" cy="20" r="8" />
<rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="50" r="8" />
<rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="80" r="8" />
<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="110" r="8" />
<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
</ContentLoader>
)
}

export default BulletListLoader
34 changes: 16 additions & 18 deletions src/CodeLoader.js
@@ -1,24 +1,22 @@
import ContentLoader from './ContentLoader'

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

<rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
<rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
<rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
<rect x="155" y="20" rx="3" ry="3" width="130" height="10" />

<rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
<rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
<rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
<rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
<rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
<rect x="185" y="40" rx="3" ry="3" width="60" height="10" />

<rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
</ContentLoader>
)
}
<rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
</ContentLoader>
)
}

export default CodeLoader

0 comments on commit 007bde6

Please sign in to comment.