feat: update and include useImageSizes

.playground/app.vue

@@ -4,10 +4,10 @@
 			fit="cover"
 			width="400"
 			height="200"
+      sizes="<1080:100vw 1080px"
 			ratio="0.5"
 			class="w-auto h-[400px]"
 			src="/media/dj2bhlba/_hyt6524.jpg?rxy=0.5,0.5&width=2044&height=3072&rnd=133222323420230000"
-			:modifiers="{ fish: 'png' }"
 			@click="() => {}"
 			@click.native="() => {}"
 		/>

.playground/assets/js/breakpoints.js

@@ -9,14 +9,14 @@ const rootFontSize = 16;
 	something, you are of course free to un-
 	comment it.
 */
-module.exports = [568, 605, 760, 990].reduce(
-	(acc, value) => ({
-		...acc,
+module.exports = [568, 605, 760, 990, 1080].reduce(
+  (acc, value) => ({
+    ...acc,
 
-		[`${value}`]: {
-			px: value,
-			em: value / rootFontSize,
-		},
-	}),
-	{}
+    [`${value}`]: {
+      px: value,
+      em: value / rootFontSize,
+    },
+  }),
+  {}
 );

.playground/nuxt.config.js

@@ -1,3 +1,16 @@
+import breakpoints from "./assets/js/breakpoints";
+
+const mappedBreakpoints = {};
+for (const [key, value] of Object.entries(breakpoints)) {
+  mappedBreakpoints[`<${key}`] = value.px - 1;
+}
+
 export default defineNuxtConfig({
   extends: "..",
+
+  image: {
+    screens: {
+      ...mappedBreakpoints,
+    },
+  },
 });

README.md

@@ -3,7 +3,7 @@
 Adds the `@nuxt/image-edge` module but configured to utilize the image processor used by our Umbraco backend ([ImageSharp](https://docs.sixlabors.com/api/ImageSharp/SixLabors.ImageSharp.html)). Also adds extended components expanding the ones provided by `@nuxt/image-edge`:
 
 * `NuxtPictureExt`
-* (`NuxtImgExt` could be added as well down the line)
+* (`NuxtImgExt` could/should be added as well down the line, but doesn't currently exist)
 
 These components should for the most part work as their counter-components with a few added nicities to match our setup.
 So the [`@nuxt/image-edge` documentation](https://image.nuxtjs.org/components/nuxt-picture) should be highly usable.
@@ -15,4 +15,4 @@ Supports the base functionality of `NuxtPicture` so generally follow its [docume
 * Aspect ratio when it is needed
 * Automatically setting the right `object-fit` on the image
 * `object-position` on the image when a `rxy` value is set in the src url params
-
+* `sizes`-property conversion transforming strings like `<1080:100vw 1080px` to something `@nuxt/image-edge` can use as well as spreading out the `vw`-rules to all smaller screen sizes defined in `nuxt.config.js`.

components/NuxtPictureExt.vue

@@ -8,7 +8,7 @@
 		:fit="fit"
 		:src="src"
 		:alt="alt"
-		:sizes="sizes"
+		:sizes="sizes ? useImageSizes(sizes) : null"
 		:width="width"
 		:height="height"
 		:modifiers="{

composables/useImageSizes.js

@@ -0,0 +1,64 @@
+/**
+ * Helper to smartly fill in responsive sizes for images.
+ * @param {string} sizes The sizes to fill in between.
+ */
+export function useImageSizes(sizes) {
+  const screens = { ...useImage().options.screens };
+  let breakpointList = [...new Set(Object.values(screens))]
+    .map((value) => +value)
+    .filter((value) => !isNaN(value));
+  breakpointList.sort((a, b) => a - b);
+
+  let _return = sizes;
+  if (sizes) {
+    const splitSizes = sizes
+      .split(" ")
+      .map((val) => {
+        if (!String(val).includes(":")) {
+          return `${getScreenKey(Math.max(...breakpointList))}:${val.trim()}`;
+        }
+        return String(val).trim();
+      })
+      .filter((val) => {
+        return Boolean(val) && val.split(":").filter(Boolean).length === 2;
+      });
+    splitSizes.sort((a, b) => {
+      a = parseInt(a.split(":")[0].replace(/\D/g, ""), 10);
+      b = parseInt(b.split(":")[0].replace(/\D/g, ""), 10);
+
+      return a - b;
+    });
+
+    if (sizes.includes("vw") && breakpointList.length) {
+      const output = [];
+
+      for (let i = 0; i < splitSizes.length; i++) {
+        const size = splitSizes[i].split(":")[1];
+        const breakpoint = parseInt(
+          splitSizes[i].split(":")[0].replace(/\D/g, ""),
+          10
+        );
+
+        if (splitSizes[i].includes("vw")) {
+          const midList = breakpointList
+            .filter((val) => val < breakpoint)
+            .map((val) => {
+              return `${getScreenKey(val)}:${size}`;
+            });
+          midList.length && output.push(...midList);
+        }
+
+        breakpointList = breakpointList.filter((val) => val > breakpoint);
+        output.push(splitSizes[i]);
+      }
+      _return = output.join(" ");
+    } else {
+      _return = splitSizes.join(" ");
+    }
+  }
+  return _return;
+
+  function getScreenKey(size) {
+    return Object.keys(screens).find((key) => screens[key] === size);
+  }
+}

nuxt.config.js

@@ -7,7 +7,9 @@ export default defineNuxtConfig({
   modules: ["@nuxt/image-edge"],
 
   image: {
-    screens: {},
+    screens: {
+      // Remove the defaults
+    },
     provider: "umbracoImageProcessor",
     providers: {
       umbracoImageProcessor: {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@limbo-works/image",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "./nuxt.config.js",
   "scripts": {
     "dev": "nuxi prepare & nuxi dev .playground",
@@ -12,12 +12,10 @@
     "test": "exit 0"
   },
   "dependencies": {
-    "@nuxt/image-edge": "^1.0.0-27968280.9739e4d"
+    "@nuxt/image-edge": "1.0.0-rc.1-28139579.37395b7"
   },
   "devDependencies": {
-    "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "eslint": "^8.28.0",
-    "nuxt": "^3.0.0",
-    "typescript": "^4.9.3"
+    "nuxt": "^3.0.0"
   }
 }