feat: 支持 ssr (#29)

Author: gd4Ark

README-zh.md

@@ -26,6 +26,7 @@
 - 支持云服务
   - [x] 阿里云
   - [x] 七牛
+- 支持 SSR
 
 ## Install
 

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)
 

package.json

@@ -35,9 +35,7 @@
     "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",

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

@@ -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"