Merge pull request #31 from FEMessage/dev

release

.all-contributorsrc

@@ -73,7 +73,17 @@
         "projectManagement",
         "ideas"
       ]
+    },
+    {
+      "login": "gd4Ark",
+      "name": "4Ark",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/27952659?v=4",
+      "profile": "https://4ark.me",
+      "contributions": [
+        "code"
+      ]
     }
   ],
-  "contributorsPerLine": 7
+  "contributorsPerLine": 7,
+  "skipCi": true
 }

README-zh.md

@@ -26,6 +26,7 @@
 - 支持云服务
   - [x] 阿里云
   - [x] 七牛
+- 支持 SSR
 
 ## Install
 
@@ -84,6 +85,7 @@ images/
 
 ## Links
 
+- [把图片优化指南做成一个组件：v-img 介绍](https://zhuanlan.zhihu.com/p/99769484)
 - [api](https://FEMessage.github.io/v-img/)
 - [设计文档](https://www.yuque.com/docs/share/6edaadbb-9260-4b49-90d7-0a8d8d03b1de)
 - [webp](https://developers.google.com/speed/webp)

README.md

@@ -28,6 +28,7 @@ This component aims to replace native img element and use webp!
 - Support cloud image service
   - [x] Alibaba
   - [x] Qiniu
+- Support SSR
 
 [⬆ Back to Top](#table-of-contents)
 
@@ -110,9 +111,22 @@ Please refer to our [contributing guide](https://github.com/FEMessage/.github/bl
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore -->
-<table><tr><td align="center"><a href="https://colmugx.github.io"><img src="https://avatars1.githubusercontent.com/u/21327913?v=4" width="100px;" alt="ColMugX"/><br /><sub><b>ColMugX</b></sub></a><br /><a href="https://github.com/FEMessage/v-img/commits?author=colmugx" title="Code">💻</a> <a href="https://github.com/FEMessage/v-img/commits?author=colmugx" title="Documentation">📖</a> <a href="https://github.com/FEMessage/v-img/commits?author=colmugx" title="Tests">⚠️</a> <a href="#translation-colmugx" title="Translation">🌍</a></td><td align="center"><a href="https://donaldshen.github.io/portfolio"><img src="https://avatars3.githubusercontent.com/u/19591950?v=4" width="100px;" alt="Donald Shen"/><br /><sub><b>Donald Shen</b></sub></a><br /><a href="https://github.com/FEMessage/v-img/commits?author=donaldshen" title="Code">💻</a> <a href="https://github.com/FEMessage/v-img/commits?author=donaldshen" title="Tests">⚠️</a> <a href="https://github.com/FEMessage/v-img/commits?author=donaldshen" title="Documentation">📖</a> <a href="#review-donaldshen" title="Reviewed Pull Requests">👀</a></td><td align="center"><a href="https://evila.me"><img src="https://avatars3.githubusercontent.com/u/19513289?v=4" width="100px;" alt="EVILLT"/><br /><sub><b>EVILLT</b></sub></a><br /><a href="https://github.com/FEMessage/v-img/commits?author=evillt" title="Code">💻</a> <a href="https://github.com/FEMessage/v-img/commits?author=evillt" title="Tests">⚠️</a> <a href="https://github.com/FEMessage/v-img/commits?author=evillt" title="Documentation">📖</a></td><td align="center"><a href="https://github.com/lianghx-319"><img src="https://avatars2.githubusercontent.com/u/27187946?v=4" width="100px;" alt="Han"/><br /><sub><b>Han</b></sub></a><br /><a href="https://github.com/FEMessage/v-img/commits?author=lianghx-319" title="Code">💻</a> <a href="https://github.com/FEMessage/v-img/issues?q=author%3Alianghx-319" title="Bug reports">🐛</a></td><td align="center"><a href="https://coldstone.fun"><img src="https://avatars1.githubusercontent.com/u/18013127?v=4" width="100px;" alt="Cold Stone"/><br /><sub><b>Cold Stone</b></sub></a><br /><a href="https://github.com/FEMessage/v-img/commits?author=xrr2016" title="Documentation">📖</a></td><td align="center"><a href="https://github.com/levy9527/blog"><img src="https://avatars3.githubusercontent.com/u/9384365?v=4" width="100px;" alt="levy"/><br /><sub><b>levy</b></sub></a><br /><a href="#projectManagement-levy9527" title="Project Management">📆</a> <a href="#ideas-levy9527" title="Ideas, Planning, & Feedback">🤔</a></td></tr></table>
-
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://colmugx.github.io"><img src="https://avatars1.githubusercontent.com/u/21327913?v=4" width="100px;" alt=""/><br /><sub><b>ColMugX</b></sub></a><br /><a href="https://github.com/FEMessage/v-img/commits?author=colmugx" title="Code">💻</a> <a href="https://github.com/FEMessage/v-img/commits?author=colmugx" title="Documentation">📖</a> <a href="https://github.com/FEMessage/v-img/commits?author=colmugx" title="Tests">⚠️</a> <a href="#translation-colmugx" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://donaldshen.github.io/portfolio"><img src="https://avatars3.githubusercontent.com/u/19591950?v=4" width="100px;" alt=""/><br /><sub><b>Donald Shen</b></sub></a><br /><a href="https://github.com/FEMessage/v-img/commits?author=donaldshen" title="Code">💻</a> <a href="https://github.com/FEMessage/v-img/commits?author=donaldshen" title="Tests">⚠️</a> <a href="https://github.com/FEMessage/v-img/commits?author=donaldshen" title="Documentation">📖</a> <a href="https://github.com/FEMessage/v-img/pulls?q=is%3Apr+reviewed-by%3Adonaldshen" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://evila.me"><img src="https://avatars3.githubusercontent.com/u/19513289?v=4" width="100px;" alt=""/><br /><sub><b>EVILLT</b></sub></a><br /><a href="https://github.com/FEMessage/v-img/commits?author=evillt" title="Code">💻</a> <a href="https://github.com/FEMessage/v-img/commits?author=evillt" title="Tests">⚠️</a> <a href="https://github.com/FEMessage/v-img/commits?author=evillt" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/lianghx-319"><img src="https://avatars2.githubusercontent.com/u/27187946?v=4" width="100px;" alt=""/><br /><sub><b>Han</b></sub></a><br /><a href="https://github.com/FEMessage/v-img/commits?author=lianghx-319" title="Code">💻</a> <a href="https://github.com/FEMessage/v-img/issues?q=author%3Alianghx-319" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://coldstone.fun"><img src="https://avatars1.githubusercontent.com/u/18013127?v=4" width="100px;" alt=""/><br /><sub><b>Cold Stone</b></sub></a><br /><a href="https://github.com/FEMessage/v-img/commits?author=xrr2016" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/levy9527/blog"><img src="https://avatars3.githubusercontent.com/u/9384365?v=4" width="100px;" alt=""/><br /><sub><b>levy</b></sub></a><br /><a href="#projectManagement-levy9527" title="Project Management">📆</a> <a href="#ideas-levy9527" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://4ark.me"><img src="https://avatars0.githubusercontent.com/u/27952659?v=4" width="100px;" alt=""/><br /><sub><b>4Ark</b></sub></a><br /><a href="https://github.com/FEMessage/v-img/commits?author=gd4Ark" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

netlify.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+echo "is netlify: $NETLIFY"
+echo "in branch: $BRANCH"
+echo "head: $HEAD"
+
+if [ "$NETLIFY" != "true" ]
+then
+  echo "this script only runs in netlify, bye"
+  exit 1
+fi
+
+if [ "$BRANCH" != "dev" ] && [ "$HEAD" != "dev" ]
+then
+  yarn doc
+else
+  echo "this script only runs in targeting dev's PR deploy preview, bye"
+fi

notify.sh

@@ -1,16 +1,32 @@
 #!/bin/sh
+# https://stackoverflow.com/questions/13872048/bash-script-what-does-bin-bash-mean
+echo "1/5: checking TRAVIS_TEST_RESULT"
 if [ "$TRAVIS_TEST_RESULT" != "0" ]
 then
   echo "build not success, bye"
   exit 1
 fi
 
-git remote add github https://$GITHUB_TOKEN@github.com/FEMessage/v-img.git > /dev/null 2>&1
+ORG_NAME=$(echo "$TRAVIS_REPO_SLUG" | cut -d '/' -f 1)
+REPO_NAME=$(echo "$TRAVIS_REPO_SLUG" | cut -d '/' -f 2)
+
+echo "2/5: pushing commit and tag to github"
+# 该命令很可能报错，但不影响实际进行，因而不能简单地在脚本开头 set -e 
+git remote add github https://$GITHUB_TOKEN@github.com/$TRAVIS_REPO_SLUG.git > /dev/null 2>&1
 git push github HEAD:master --follow-tags
 
+echo "3/5: generating github release notes"
 GREN_GITHUB_TOKEN=$GITHUB_TOKEN yarn release
 
-url=https://api.github.com/repos/FEMessage/v-img/releases/latest
+# 避免发送错误信息
+if [ $? -ne 0 ]
+then
+  echo "gren fails, bye"
+  exit 1
+fi
+
+echo "4/5: downloading github release info"
+url=https://api.github.com/repos/$TRAVIS_REPO_SLUG/releases/latest
 resp_tmp_file=resp.tmp
 
 curl -H "Authorization: token $GITHUB_TOKEN" $url > $resp_tmp_file
@@ -19,8 +35,11 @@ html_url=$(sed -n 5p $resp_tmp_file | sed 's/\"html_url\"://g' | awk -F '"' '{pr
 body=$(grep body < $resp_tmp_file | sed 's/\"body\"://g;s/\"//g')
 version=$(echo $html_url | awk -F '/' '{print $NF}')
 
-msg='{"msgtype": "markdown", "markdown": {"title": "v-img更新", "text": "@所有人\n# [v-img('$version')]('$html_url')\n'$body'"}}'
+echo "5/5: notifying with dingtalk bot"
+msg='{"msgtype": "markdown", "markdown": {"title": "'$REPO_NAME'更新", "text": "@所有人\n# ['$REPO_NAME'('$version')]('$html_url')\n'$body'"}}'
 
 curl -X POST https://oapi.dingtalk.com/robot/send\?access_token\=$DINGTALK_ROBOT_TOKEN -H 'Content-Type: application/json' -d "$msg"
 
 rm $resp_tmp_file
+
+echo "executing notify.sh successfully"

package.json

@@ -35,14 +35,12 @@
     "lint": "eslint \"**/*.@(js|vue)\" --fix",
     "release": "gren release --override"
   },
-  "dependencies": {
-    "lazysizes": "^5.1.1"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.4.3",
     "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
-    "@femessage/github-release-notes": "^0.19.0",
+    "@femessage/github-release-notes": "latest",
     "@femessage/img-preview": "^1.4.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.5",
@@ -78,7 +76,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "vue-sfc-cli": "1.10.12",
+  "vue-sfc-cli": "1.12.0",
   "engines": {
     "node": ">= 4.0.0",
     "npm": ">= 3.0.0"

src/background.js

@@ -1,4 +1,3 @@
-import 'lazysizes/plugins/bgset/ls.bgset'
 import getImageSrc from './provider-config'
 
 function getSrc(config) {

src/index.js

@@ -2,20 +2,29 @@
 import Component from './v-img.vue'
 import background from './background'
 import placeholder from './spinner.svg'
+import loadScript from './loadScript.js'
 
 const defaultOptions = {
   placeholder,
   error:
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAABSCAMAAADw8nOpAAAArlBMVEUAAAAAAAD///9paWkyMjL////////////29vb////09PTn5+fh4eGvr6/////6+vqZmZm8vLz39/fj4+P8/PyBgYH////////////////Gxsb////////////v7+/MzMzr6+v///+4uLj////o6OhNTU3Y2NjQ0ND9/f35+fn////////////t7e3////////////////z8/Pb29v////y8vLw8PDU1NT////////ym0LiAAAAOXRSTlMaAPooH+3z2LwFtYZ5QvXUNkvDgOAul49vV1RHGRKfWZThSPiMI2pf6szLva2ahHhPQa9wIamkYyJOAjtMAAAD1ElEQVRYw8WZ6XbaMBBGp/K+L4DBxUDZQkjInpB+7/9ipSapQPKGOT69PxNzbY3Go5FMP2rIxqPkPphrjGnz4D4ZjbO6X1QqJ2liQMJI0kk7pfW8YwD0eOrOvFBRVSX0Zu401gGw3bN1sXLyqAEsdiKSiJyYAdrj5CJlNvSBoDegEga9APCHWWOl9eQDZkSVRCbgP1nNlC8GYHtUi2cDxksDpTUEjJ/UiJ8GMLTqlO93YI5KDVEdhrv3auVYR39BF7DoQx9XKVMGW6GLUGywtFw5An7RxfwCRpKSG3vUgh53CsoUeKNWvAFpkXLM+DNe/pxsLCvfdR7HNvHU30WldQebill/Pph9ben3t/b0piwfbNxZgnKIfuHVA9dc4gS2dcLCXOpjeK58AVsUCacMEuyjSLpgeDlVWgacghGvdHDqpA4M60T5BEOVi8ItStE28vtu4IkrMx9y7XEZvvBN5+2nF0Yb94Pf5UGVHgF+9k85lGdb3eMIe/1cE8f79R2MrSLP+vBbOfEhVVwTR2wpaoqjISdeizUZ/uRL+QiTBKbIMaLCxPq6n6lKz/F4VFoaIjGOX78pS2z3mKuv4noEzcqVzwjEQLPjDFAps6PzRvhzgOdcuRPLhToXjTKb/K63ilg+dn+VE8YGYtLmo6ZKboqGPmBsclCmiIUp1QCIr7zMBw6I+RwjPSgT8V184NdWoeThscUBJgelIcy3suTDruQTB4SgRTB+UAa9KEge1dPHgRWdoSOjsRjKVz6eGtx80sVgjmmE6XkG6Tzhaljnl4bCazeiBO55EucRatYfmPLdXSR0jxmdssorQsOFUX4jZrinAJ4UyqZr5SIvckI1CmguBCPAAbfZ1HD07+cKMScNipwZm1plqIFzksYKNGI4r3r5UhBRLTOcMP/3WCpYsXJB9TjcuFzQibLlwPlaIoRegdZmeniDceTjNMaYFyfRiprg+bkxWAtJVJjqduO+EtBCIdWLX0hfbebcS3F3kZSUjU0zpbrFisSyUVLc9tTQuSCpuJWUYH9A7dCRlS0U+3bGCEbpcsa8VkoHSfmiG7dSxkgrWoPpRS7eGlQ1MG6b/c+uss1iFWsaH5fYZtU0g6XrxUzj/xKawbqW1Sx+mhX4dlNoWesba321lvvAIA8Lb5qExrq2/b/thee7vy2O2FTa/tdvUoLVzFMOdwkjvvvjcRY2KRdspZZ6g63UFRu+fc2Gr4NtaQeb5w62+B0cRHR0XHL9oU73R0/XH5B1c4zX/WEj5/f1R6LdH9xef7x8/SF410f1139Q+P+fPa74ONPBJ6Q/+TfzjGYmPq8AAAAASUVORK5CYII='
 }
 
+const lazysizes = 'https://cdn.jsdelivr.net/npm/lazysizes/lazysizes.min.js'
+const bgset =
+  'https://cdn.jsdelivr.net/npm/lazysizes/plugins/bgset/ls.bgset.min.js'
+
 // `Vue.use` automatically prevents you from using
 // the same plugin more than once,
 // so calling it multiple times on the same plugin
 // will install the plugin only once
 Component.install = (Vue, options = {}) => {
   Vue.prototype.$vImg = {...defaultOptions, ...options}
 
+  if (typeof window !== 'undefined' && !window.lazySizes) {
+    Promise.all([loadScript(lazysizes), loadScript(bgset)]).catch(console.error)
+  }
+
   Vue.component(Component.name, Component)
 
   Vue.directive('img', {

src/loadScript.js

@@ -0,0 +1,24 @@
+const loaded = new Set()
+
+export default function(script) {
+  return new Promise((resolve, reject) => {
+    if (!script) {
+      reject(new Error('Script is not found'))
+    }
+    if (loaded.has(script)) {
+      resolve(true)
+    } else {
+      const loadScript = document.createElement('script')
+      loadScript.onload = function() {
+        loaded.add(script)
+        resolve(true)
+      }
+      loadScript.onerror = function(err) {
+        loadScript.remove()
+        reject(err)
+      }
+      loadScript.src = script
+      document.body.appendChild(loadScript)
+    }
+  })
+}

src/provider-config.js

@@ -44,13 +44,14 @@ export const providerConfig = {
 
       if (!autocrop || is(svg, src) || !src) return vm
       const DPR = 2
-      let dpr = (window && window.devicePixelRatio) || DPR
+      let dpr =
+        (typeof window !== 'undefined' && window.devicePixelRatio) || DPR
       if (dpr === 1) {
         dpr = DPR
       }
       const actions = ['/resize']
-      const WIDTH = `w_${width * dpr}`
-      const HEIGHT = `h_${height * dpr}`
+      const WIDTH = `w_${parseInt(width * dpr)}`
+      const HEIGHT = `h_${parseInt(height * dpr)}`
       const AUTOCROP = `m_fill`
 
       if (isNaN(width) && isNaN(height)) {

src/v-img.vue

@@ -30,7 +30,6 @@ import {providerConfig, default as getSrc} from './provider-config'
  * 如果顺序是1 => 2，则是理想的
  * 如果顺序是2 => 1，则图片会被请求两次：一是原始src；二是转换为webp的src
  */
-import 'lazysizes'
 
 const STATUS_IDLE = 0
 // 目前没有必要区分 idle 和 loading，暂且保留标识符

yarn.lock

@@ -757,7 +757,7 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@femessage/github-release-notes@^0.19.0":
+"@femessage/github-release-notes@latest":
   version "0.19.0"
   resolved "https://registry.npmjs.org/@femessage/github-release-notes/-/github-release-notes-0.19.0.tgz#483767c6a52d3a1086000442580503fed72a0898"
   integrity sha512-p97YOnBoLfgiWknF5bzqlUOTHIBcBpI8L7bpekPls3annTV65TGfdkl2ICZZAvhjIcl9usDqGFj6pJWj+R+Rzw==
@@ -6749,11 +6749,6 @@ lazy-property@~1.0.0:
   resolved "https://registry.npmjs.org/lazy-property/-/lazy-property-1.0.0.tgz#84ddc4b370679ba8bd4cdcfa4c06b43d57111147"
   integrity sha1-hN3Es3Bnm6i9TNz6TAa0PVcREUc=
 
-lazysizes@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npm.taobao.org/lazysizes/download/lazysizes-5.1.1.tgz#7ca0266519d531ce740d6782e42faf700883646c"
-  integrity sha1-fKAmZRnVMc50DWeC5C+vcAiDZGw=
-
 lcid@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/lcid/download/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"