svelte-imgix - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/index.js

@@ -828,31 +828,2 @@ (function (global, factory) {
 
-    /**
-     * Adapted from https://github.com/imgix/imgix.js/blob/main/src/targetWidths.js
-     */
-    const INCREMENT_PERCENTAGE = 8;
-    const MAX_SIZE = 8192;
-    function targetWidths() {
-        const resolutions = [];
-        let prev = 100;
-        while (prev <= MAX_SIZE) {
-            resolutions.push(2 * Math.round(prev / 2));
-            prev *= 1 + (INCREMENT_PERCENTAGE / 100) * 2;
-        }
-        return resolutions;
-    }
-
-    function trimSrc(src) {
-        return src.split(/[?#]/)[0];
-    }
-    function generateSrcset(src, imgixParams) {
-        const widths = targetWidths(), sets = [];
-        for (var i = 0; i < widths.length; i++) {
-            const params = Object.assign(Object.assign(Object.assign({}, imgixParams), { w: widths[i] }), (imgixParams.h
-                ? { h: Math.round(widths[i] * (imgixParams.h / imgixParams.w)) }
-                : {}));
-            sets.push(`${trimSrc(src)}?${queryString.stringify(params)} ${widths[i]}w`);
-        }
-        return sets.join(', ');
-    }
-
     /* Imgix.svelte generated by Svelte v3.29.7 */
@@ -909,2 +880,9 @@
 
+    const INCREMENT_PERCENTAGE = 8;
+    const MAX_SIZE = 8192;
+
+    function trimSrc(src) {
+    	return src.split(/[?#]/)[0];
+    }
+
     function instance($$self, $$props, $$invalidate) {
@@ -919,14 +897,37 @@ let { src } = $$props;
     	const placeholder = `${baseSrc}?blur=200&px=16&auto=format`;
+    	const resolutions = [];
 
-    	const observerCallback = (entries, observer) => {
-    		entries.forEach(entry => {
-    			if (entry.isIntersecting) {
-    				$$invalidate(2, intersected = true);
-    				observer.unobserve(imgElement);
-    			}
-    		});
-    	};
+    	function generateSrcset(src, imgixParams) {
+    		const sets = [];
 
+    		for (var i = 0; i < resolutions.length; i++) {
+    			const params = Object.assign(Object.assign(Object.assign({}, imgixParams), { w: resolutions[i] }), imgixParams.h
+    			? {
+    					h: Math.round(resolutions[i] * (imgixParams.h / imgixParams.w))
+    				}
+    			: {});
+
+    			sets.push(`${trimSrc(src)}?${queryString.stringify(params)} ${resolutions[i]}w`);
+    		}
+
+    		return sets.join(", ");
+    	}
+
+    	let prev = 100;
+
+    	while (prev <= MAX_SIZE) {
+    		resolutions.push(2 * Math.round(prev / 2));
+    		prev *= 1 + INCREMENT_PERCENTAGE / 100 * 2;
+    	}
+
     	onMount(() => {
-    		observer = new IntersectionObserver(observerCallback);
+    		observer = new IntersectionObserver((entries, observer) => {
+    				entries.forEach(entry => {
+    					if (entry.isIntersecting) {
+    						$$invalidate(2, intersected = true);
+    						observer.unobserve(imgElement);
+    					}
+    				});
+    			});
+
     		observer.observe(imgElement);
@@ -933,0 +934,0 @@

package.json

 {
   "name": "svelte-imgix",
   "description": "Responsive, lazily loaded images with Svelte and Imgix",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "svelte": "./Imgix.svelte",
+  "svelte": "Imgix.svelte",
   "scripts": {
@@ -34,6 +34,4 @@ "build": "rollup -c",
   "devDependencies": {
-    "@babel/runtime": "^7.12.5",
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
-    "@rollup/plugin-typescript": "^6.1.0",
     "imgix.js": "^3.4.2",
@@ -46,3 +44,2 @@ "prettier": "^2.1.2",
     "svelte-preprocess": "^4.5.2",
-    "svelte-types-writer": "^1.0.1",
     "tslib": "^2.0.3",
@@ -49,0 +46,0 @@ "typescript": "^4.0.5"

README.md

@@ -26,2 +26,22 @@ # Svelte Imgix
 
+#### Svelte-preprocess
+
+`svelte-meta` is written in Typescript, and requires Svelte's preprocessing to be enabled. If you're using [Sapper](https://sapper.svelte.dev/) this comes enabled by default.
+
+To enable preprocessing, install `svelte-preprocess` and include it in the svelte config in your `rollup.config.js` or `webpack.config.js`
+
+```sh
+npm i svelte-preprocess
+```
+
+```js
+import autoPreprocess from 'svelte-preprocess';
+
+svelte({
+  preprocess: autoPreprocess()
+});
+```
+
+See the [svelte-preprocess docs](https://github.com/sveltejs/svelte-preprocess) for more.
+
 ### Adding Sizes
@@ -28,0 +48,0 @@

No alert changes

Improved metrics

Dev dependency count

11

-21.43%

Number of lines in readme file

73

37.74%

Worsened metrics

Total package byte prevSize

58942

-0.47%

Number of package files

5

-37.5%

Lines of code

1688

-2.65%

No dependency changes