rias exports (#11)

* ⬆️ Upgrades Deps * ✨ Adds $rias magic
ekwoka · Sep 13, 2023 · 893ce0d · 893ce0d
1 parent 95bd270
commit 893ce0d
Show file tree

Hide file tree

Showing 9 changed files with 239 additions and 217 deletions.
diff --git a/package.json b/package.json
@@ -25,23 +25,23 @@
   "devDependencies": {
     "@milahu/patch-package": "6.4.14",
     "@trivago/prettier-plugin-sort-imports": "4.2.0",
-    "@types/node": "20.5.1",
-    "@typescript-eslint/eslint-plugin": "6.4.0",
-    "@typescript-eslint/parser": "6.4.0",
-    "@vitest/ui": "0.34.2",
+    "@types/node": "20.6.0",
+    "@typescript-eslint/eslint-plugin": "6.7.0",
+    "@typescript-eslint/parser": "6.7.0",
+    "@vitest/ui": "0.34.4",
     "esbuild": "0.19.2",
-    "eslint": "8.47.0",
-    "happy-dom": "9.1.9",
+    "eslint": "8.49.0",
+    "happy-dom": "11.0.5",
     "husky": "8.0.3",
-    "lint-staged": "14.0.0",
+    "lint-staged": "14.0.1",
     "npm-run-all": "4.1.5",
-    "prettier": "3.0.2",
+    "prettier": "3.0.3",
     "pretty-bytes": "6.1.1",
-    "typescript": "5.1.6",
+    "typescript": "5.2.2",
     "vite": "4.4.9",
-    "vite-plugin-dts": "3.5.2",
-    "vite-tsconfig-paths": "4.2.0",
-    "vitest": "0.34.2",
+    "vite-plugin-dts": "3.5.3",
+    "vite-tsconfig-paths": "4.2.1",
+    "vitest": "0.34.4",
     "vitest-dom": "0.1.0"
   },
   "lint-staged": {

diff --git a/packages/xajax/package.json b/packages/xajax/package.json
@@ -38,7 +38,7 @@
     "test": "vitest"
   },
   "devDependencies": {
-    "@types/alpinejs": "3.7.1"
+    "@types/alpinejs": "3.7.2"
   },
   "peerDependencies": {
     "alpinejs": "3.x"

diff --git a/packages/xrias/package.json b/packages/xrias/package.json
@@ -40,7 +40,7 @@
     "test": "vitest"
   },
   "devDependencies": {
-    "@types/alpinejs": "3.7.1"
+    "@types/alpinejs": "3.7.2"
   },
   "peerDependencies": {
     "alpinejs": "3.x"

diff --git a/packages/xrias/src/index.ts b/packages/xrias/src/index.ts
@@ -1,6 +1,6 @@
 import { Alpine } from 'alpinejs';
 import { observer } from './resizeObserver.js';
-import { getURLMaker } from './utils.js';
+import { getURLMaker, makeSrcSet } from './utils.js';
 
 export default function (OPTIONS: Config) {
   const {
@@ -13,25 +13,21 @@ export default function (OPTIONS: Config) {
   return (Alpine: Alpine) => {
     Alpine.directive(
       'rias',
-      (el: HTMLImageElement, { expression }, { effect, evaluateLater }) => {
+      (el, { expression }, { effect, evaluateLater, cleanup }) => {
+        if (!(el instanceof HTMLImageElement))
+          return console.warn('x-rias only works on img elements');
+        cleanup(() => observer.unobserve(el));
         if (!expression) return autoSize && observer.observe(el);
         const evaluate = evaluateLater(expression);
 
         (effect as (fn: () => void) => void)(() => {
           evaluate((value: string) => {
             if (!value || typeof value !== 'string') return;
             const makeImg = getURLMaker(value, shopify, cloudURL);
+            const max = maxSize || Number(el.dataset.maxSize) || Infinity;
 
-            const widths = [
-              180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2160, 2376,
-              2592, 2808, 3024,
-            ].filter(
-              (w) =>
-                !(maxSize || el.dataset.maxSize) ||
-                w <= (maxSize || Number(el.dataset.maxSize)),
-            );
-            const src = makeImg(widths[1] || widths[0]);
-            const srcset = widths.map((w) => `${makeImg(w)} ${w}w`).join(',');
+            const src = makeImg(Math.min(max, 360));
+            const srcset = makeSrcSet(makeImg, max);
             Alpine.mutateDom(() => {
               el.src = src;
               el.srcset = srcset;
@@ -42,6 +38,16 @@ export default function (OPTIONS: Config) {
         });
       },
     );
+
+    const $rias = {
+      srcset(value: string) {
+        return makeSrcSet(getURLMaker(value, shopify, cloudURL), maxSize);
+      },
+      observe: observer.observe.bind(observer),
+      unobserve: observer.unobserve.bind(observer),
+    };
+
+    Alpine.magic('rias', () => $rias);
   };
 }
 

diff --git a/packages/xrias/src/utils.ts b/packages/xrias/src/utils.ts
@@ -31,4 +31,19 @@ export const getShopifyUrl = (value: string): ((width: number) => string) => {
   };
 };
 
+export const widths = [
+  180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2160, 2376, 2592, 2808,
+  3024,
+];
+
+export const makeSrcSet = (
+  urlGenerator: (v: number) => string,
+  maxSize = Infinity,
+): string => {
+  return widths
+    .filter((w) => w <= maxSize)
+    .map((w) => `${urlGenerator(w)} ${w}w`)
+    .join(',');
+};
+
 const regexp = /_\d+x(\.jpg|\.png)/;
diff --git a/packages/xrias/testSite/index.html b/packages/xrias/testSite/index.html
@@ -14,7 +14,7 @@
       };
       Alpine.plugin(RIAS(RIASConfig));
       Alpine.data('testImage', () => ({
-        image: '/testSite/placekitten.png',
+        image: './placekitten_1x.png',
       }));
       Alpine.start();
     </script>

diff --git a/packages/xrouter/package.json b/packages/xrouter/package.json
@@ -37,7 +37,7 @@
     "test": "vitest"
   },
   "devDependencies": {
-    "@types/alpinejs": "3.7.1"
+    "@types/alpinejs": "3.7.2"
   },
   "peerDependencies": {
     "alpinejs": "3.x"