From 207d6bf4a0710fae5f8773f570dd8b27fab69274 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pyapar@gmail.com>
Date: Fri, 22 Jan 2021 18:58:46 +0100
Subject: [PATCH 1/3] feat(nuxt-img): responsive prop

---
 playground/pages/index.vue          |  2 +-
 src/runtime/components/nuxt-img.vue | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index f4f6ce42f..faef6e969 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -29,7 +29,7 @@
       <NuxtImg src="https://nuxtjs.org/logos/nuxt.svg" width="400" height="400" />
 
       <h2>JPEG image inside project</h2>
-      <NuxtImg src="/images/damavand.jpg" />
+      <NuxtImg responsive src="/images/damavand.jpg" />
 
       <h2>JPEG image from remote url</h2>
       <NuxtImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Aconcagua2016.jpg/600px-Aconcagua2016.jpg" />
diff --git a/src/runtime/components/nuxt-img.vue b/src/runtime/components/nuxt-img.vue
index 308497eeb..b1c8aacae 100644
--- a/src/runtime/components/nuxt-img.vue
+++ b/src/runtime/components/nuxt-img.vue
@@ -4,6 +4,7 @@
     :height="height"
     :src="nSrc"
     :alt="nAlt"
+    v-bind="nAttrs"
   >
 </template>
 
@@ -32,7 +33,8 @@ export default {
 
     // options
     preset: { type: String, required: false, default: undefined },
-    provider: { type: String, required: false, default: undefined }
+    provider: { type: String, required: false, default: undefined },
+    responsive: { type: Boolean, required: false, default: false }
   },
   data () {
     return {
@@ -53,6 +55,20 @@ export default {
         modifiers: this.modifiers
       }).url
     },
+    nAttrs () {
+      const attrs: any = {}
+      if (this.responsive) {
+        const sizes = this.$img.getSizes(this.src, {
+          sizes: this.sizes,
+          width: this.nWidth,
+          height: this.nHeight,
+          modifiers: this.modifiers
+        })
+        attrs.sizes = sizes.map(({ width }) => `(max-width: ${width}px) ${width}px`)
+        attrs.srcSet = sizes.map(({ width, src }) => `${src} ${width}w`)
+      }
+      return attrs
+    },
     modifiers () {
       return {
         width: this.width,

From b397b8f9f601f88a30d4856e00314f5173988912 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pyapar@gmail.com>
Date: Fri, 22 Jan 2021 19:01:39 +0100
Subject: [PATCH 2/3] fix: force compute responsive for static server

---
 src/runtime/components/nuxt-img.vue | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/nuxt-img.vue b/src/runtime/components/nuxt-img.vue
index b1c8aacae..4ed38d99c 100644
--- a/src/runtime/components/nuxt-img.vue
+++ b/src/runtime/components/nuxt-img.vue
@@ -58,14 +58,9 @@ export default {
     nAttrs () {
       const attrs: any = {}
       if (this.responsive) {
-        const sizes = this.$img.getSizes(this.src, {
-          sizes: this.sizes,
-          width: this.nWidth,
-          height: this.nHeight,
-          modifiers: this.modifiers
-        })
-        attrs.sizes = sizes.map(({ width }) => `(max-width: ${width}px) ${width}px`)
-        attrs.srcSet = sizes.map(({ width, src }) => `${src} ${width}w`)
+        const { sizes, srcSet } = this.getResponsive()
+        attrs.sizes = sizes
+        attrs.srcSet = srcSet
       }
       return attrs
     },
@@ -80,6 +75,12 @@ export default {
       }
     }
   },
+  created () {
+    if (process.server && process.static) {
+      // Force compute sources into ssrContext
+      this.getResponsive()
+    }
+  },
   mounted () {
     if (this.usePlaceholder) {
       this.observe()
@@ -89,6 +90,18 @@ export default {
     this.unobserve()
   },
   methods: {
+    getResponsive () {
+      const sizes = this.$img.getSizes(this.src, {
+        sizes: this.sizes,
+        width: this.nWidth,
+        height: this.nHeight,
+        modifiers: this.modifiers
+      })
+      return {
+        sizes: sizes.map(({ width }) => `(max-width: ${width}px) ${width}px`),
+        srcSet: sizes.map(({ width, src }) => `${src} ${width}w`)
+      }
+    },
     observe () {
       this._removeObserver = useObserver(this.$el, () => {
         this.usePlaceholder = false

From f51f822703b6c592ce90865f3651ab657dcff9a7 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pyapar@gmail.com>
Date: Fri, 22 Jan 2021 19:07:15 +0100
Subject: [PATCH 3/3] fix: width/height

---
 src/runtime/components/nuxt-img.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/nuxt-img.vue b/src/runtime/components/nuxt-img.vue
index 4ed38d99c..2ca763043 100644
--- a/src/runtime/components/nuxt-img.vue
+++ b/src/runtime/components/nuxt-img.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { generateAlt, useObserver } from '~image'
+import { generateAlt, useObserver, parseSize } from '~image'
 
 const EMPTY_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
 
@@ -93,8 +93,8 @@ export default {
     getResponsive () {
       const sizes = this.$img.getSizes(this.src, {
         sizes: this.sizes,
-        width: this.nWidth,
-        height: this.nHeight,
+        width: parseSize(this.width),
+        height: parseSize(this.height),
         modifiers: this.modifiers
       })
       return {