cosha - npm Package Compare versions

Comparing version 1.1.1 to 2.0.0

changelog.md

@@ -0,1 +1,8 @@
+# v2.0.0
+_2022-01-15_
+
+* drop ie
+* clean up injected css
+* simplify api
+
 # v1.1.1
@@ -2,0 +9,0 @@ _2021-05-10_

package.json

 {
   "name": "cosha",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "Colorful shadows for your images. 🎨",
-  "main": "public/cosha.cjs.js",
-  "module": "public/cosha.esm.js",
-  "unpkg": "public/cosha.iife.js",
+  "main": "public/cosha.esm.js",
+  "browser": "public/cosha.iife.js",
   "types": "types/index.d.ts",
@@ -24,8 +23,7 @@ "homepage": "https://npm.robinloeffel.ch/cosha",
   "devDependencies": {
-    "@rbnlffl/rollup-plugin-eslint": "^2.0.0",
-    "@rollup/plugin-buble": "^0.21.3",
-    "eslint": "^7.26.0",
-    "eslint-config-sweet": "^5.0.0",
-    "rollup": "^2.47.0",
-    "rollup-plugin-livereload": "^2.0.0",
+    "@rbnlffl/rollup-plugin-eslint": "^3.0.0",
+    "eslint": "^8.6.0",
+    "eslint-config-sweet": "^8.0.1",
+    "rollup": "^2.64.0",
+    "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-serve": "^1.1.0",
@@ -32,0 +30,0 @@ "rollup-plugin-terser": "^7.0.2"

public/cosha.esm.js

@@ -1,33 +0,42 @@
-var cosha = function (ref) {
-  if ( ref === void 0 ) ref = {};
-  var className = ref.className; if ( className === void 0 ) className = 'cosha';
-  var blur = ref.blur; if ( blur === void 0 ) blur = '5px';
-  var brightness = ref.brightness; if ( brightness === void 0 ) brightness = 1;
-  var saturation = ref.saturation; if ( saturation === void 0 ) saturation = 1;
-  var x = ref.x; if ( x === void 0 ) x = 0;
-  var y = ref.y; if ( y === void 0 ) y = 0;
+var index = (className = 'cosha', {
+  blur = '5px',
+  brightness = 1,
+  saturation = 1,
+  x = 0,
+  y = 0
+} = {}) => {
+  const images = document.querySelectorAll(`.${className}`);
+  const styles = document.createElement('style');
 
-  if (!('-ms-filter' in document.body.style)) {
-    var images = document.querySelectorAll(("." + className));
-    var styles = document.createElement('style');
+  styles.textContent = `
+    .${className}-wrapper {
+      position: relative;
+      display: grid;
+      place-content: center;
+    }
 
-    styles.textContent = "\n      ." + className + "-wrapper {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      ." + className + "-clone {\n        filter: blur(" + blur + ") brightness(" + brightness + ") saturate(" + saturation + ");\n        position: absolute;\n        width: 100%;\n        z-index: -1;\n        transform: translate3d(" + x + ", " + y + ", 0);\n      }\n    ";
-    document.head.append(styles);
+    .${className}-clone {
+      position: absolute;
+      z-index: -1;
+      transform: translate3d(${x}, ${y}, 0);
+      filter: blur(${blur}) brightness(${brightness}) saturate(${saturation});
+    }
+  `;
+  document.head.append(styles);
 
-    images.forEach(function (image) {
-      var clone = image.cloneNode(true);
-      var wrapper = document.createElement('div');
+  images.forEach(original => {
+    const cloned = original.cloneNode(true);
+    const wrapper = document.createElement('div');
 
-      wrapper.classList.add((className + "-wrapper"));
-      clone.classList.add((className + "-clone"));
-      clone.classList.remove(className);
+    cloned.classList.remove(className);
+    cloned.classList.add(`${className}-clone`);
 
-      image.replaceWith(wrapper);
-      wrapper.append(image, clone);
-      wrapper.querySelectorAll('img')[1].alt = '';
-    });
-  }
+    wrapper.classList.add(`${className}-wrapper`);
+    wrapper.append(original.cloneNode(true), cloned);
+    wrapper.querySelectorAll('img')[1].alt = '';
+
+    original.replaceWith(wrapper);
+  });
 };
 
-export default cosha;
-//# sourceMappingURL=cosha.esm.js.map
+export { index as default };

public/cosha.iife.js

@@ -1,1 +0,1 @@
-var cosha=function(){"use strict";return function(e){void 0===e&&(e={});var n=e.className;void 0===n&&(n="cosha");var t=e.blur;void 0===t&&(t="5px");var a=e.brightness;void 0===a&&(a=1);var r=e.saturation;void 0===r&&(r=1);var i=e.x;void 0===i&&(i=0);var o=e.y;if(void 0===o&&(o=0),!("-ms-filter"in document.body.style)){var s=document.querySelectorAll("."+n),l=document.createElement("style");l.textContent="\n      ."+n+"-wrapper {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      ."+n+"-clone {\n        filter: blur("+t+") brightness("+a+") saturate("+r+");\n        position: absolute;\n        width: 100%;\n        z-index: -1;\n        transform: translate3d("+i+", "+o+", 0);\n      }\n    ",document.head.append(l),s.forEach((function(e){var t=e.cloneNode(!0),a=document.createElement("div");a.classList.add(n+"-wrapper"),t.classList.add(n+"-clone"),t.classList.remove(n),e.replaceWith(a),a.append(e,t),a.querySelectorAll("img")[1].alt=""}))}}}();
+var cosha=function(){"use strict";return(e="cosha",{blur:n="5px",brightness:t=1,saturation:r=1,x:a=0,y:o=0}={})=>{const s=document.querySelectorAll(`.${e}`),c=document.createElement("style");c.textContent=`\n    .${e}-wrapper {\n      position: relative;\n      display: grid;\n      place-content: center;\n    }\n\n    .${e}-clone {\n      position: absolute;\n      z-index: -1;\n      transform: translate3d(${a}, ${o}, 0);\n      filter: blur(${n}) brightness(${t}) saturate(${r});\n    }\n  `,document.head.append(c),s.forEach((n=>{const t=n.cloneNode(!0),r=document.createElement("div");t.classList.remove(e),t.classList.add(`${e}-clone`),r.classList.add(`${e}-wrapper`),r.append(n.cloneNode(!0),t),r.querySelectorAll("img")[1].alt="",n.replaceWith(r)}))}}();

readme.md

@@ -9,3 +9,2 @@ <p align="center">
 [![npm downloads a month](https://img.shields.io/npm/dm/cosha)](https://www.npmjs.com/package/cosha)
-[![dependency status](https://img.shields.io/david/robinloeffel/cosha)](https://david-dm.org/robinloeffel/cosha)
 [![package license](https://img.shields.io/npm/l/cosha)](license)
@@ -15,3 +14,3 @@
 
-[`cosha`](https://npm.robinloeffel.ch/cosha) lets you add **co**lorful **sha**dows to your images. Try it out and look for yourself—the bundle is less than 1kb heavy and it really couldn't be easier to set up!
+[`cosha`](https://npm.robinloeffel.ch/cosha) lets you add **co**lorful **sha**dows to your images. Try it out and look for yourself—it really couldn't be easier to set up!
 
@@ -39,4 +38,3 @@ ## How
 
-cosha({
-  className: 'colorful-shadow',
+cosha('colorful-shadow', {
   blur: '10px',
@@ -55,3 +53,3 @@ brightness: '125%',
 <script>
-  cosha({ className: 'colorful-shadow' });
+  cosha('colorful-shadow');
 </script>
@@ -64,2 +62,6 @@ ```
 
+```js
+cosha(className, { options });
+```
+
 ### `className`
@@ -72,3 +74,3 @@
 
-### `blur`
+### `options.blur`
 
@@ -80,3 +82,3 @@ Type: `number` or `string`<br>
 
-### `brightness`
+### `options.brightness`
 
@@ -88,3 +90,3 @@ Type: `number` or `string`<br>
 
-### `saturation`
+### `options.saturation`
 
@@ -96,3 +98,3 @@ Type: `number` or `string`<br>
 
-### `x`
+### `options.x`
 
@@ -104,3 +106,3 @@ Type: `number` or `string`<br>
 
-### `y`
+### `options.y`
 
@@ -114,3 +116,3 @@ Type: `number` or `string`<br>
 
-It runs in every browser except Internet Explorer. This is because of missing support for standard [CSS `filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility) functions. In case cosha detects it's running in a browser that supports [`-ms-filter`](https://docs.microsoft.com/en-us/previous-versions/ms530752(v=vs.85)), the non-standard implementation of Microsoft available only on IE, it simply doesn't do anything. And since the bundle gets passed through [`buble`](https://github.com/rollup/plugins/tree/master/packages/buble), you don't have to worry about things breaking because of `const` declarations in the source code and whatnot.
+It runs in every browser except Internet Explorer. This is because of missing support for standard [CSS `filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility) functions.
 
@@ -117,0 +119,0 @@ ## License

source/index.js

@@ -1,3 +0,2 @@
-const cosha = ({
-  className = 'cosha',
+export default (className = 'cosha', {
   blur = '5px',
@@ -9,39 +8,34 @@ brightness = 1,
 } = {}) => {
-  if (!('-ms-filter' in document.body.style)) {
-    const images = document.querySelectorAll(`.${className}`);
-    const styles = document.createElement('style');
+  const images = document.querySelectorAll(`.${className}`);
+  const styles = document.createElement('style');
 
-    styles.textContent = `
-      .${className}-wrapper {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-      }
+  styles.textContent = `
+    .${className}-wrapper {
+      position: relative;
+      display: grid;
+      place-content: center;
+    }
 
-      .${className}-clone {
-        filter: blur(${blur}) brightness(${brightness}) saturate(${saturation});
-        position: absolute;
-        width: 100%;
-        z-index: -1;
-        transform: translate3d(${x}, ${y}, 0);
-      }
-    `;
-    document.head.append(styles);
+    .${className}-clone {
+      position: absolute;
+      z-index: -1;
+      transform: translate3d(${x}, ${y}, 0);
+      filter: blur(${blur}) brightness(${brightness}) saturate(${saturation});
+    }
+  `;
+  document.head.append(styles);
 
-    images.forEach(image => {
-      const clone = image.cloneNode(true);
-      const wrapper = document.createElement('div');
+  images.forEach(original => {
+    const cloned = original.cloneNode(true);
+    const wrapper = document.createElement('div');
 
-      wrapper.classList.add(`${className}-wrapper`);
-      clone.classList.add(`${className}-clone`);
-      clone.classList.remove(className);
+    cloned.classList.remove(className);
+    cloned.classList.add(`${className}-clone`);
 
-      image.replaceWith(wrapper);
-      wrapper.append(image, clone);
-      wrapper.querySelectorAll('img')[1].alt = '';
-    });
-  }
+    wrapper.classList.add(`${className}-wrapper`);
+    wrapper.append(original.cloneNode(true), cloned);
+    wrapper.querySelectorAll('img')[1].alt = '';
+
+    original.replaceWith(wrapper);
+  });
 };
-
-export default cosha;

types/index.d.ts

 interface CoshaOptions {
   /**
-   * @description The class the plugin looks for. This should be on the original `img` or `picture` node(s).
-   * @default 'cosha'
-   */
-  className?: string,
-
-  /**
    * @description The amount of blur to apply to the image. See the CSS `blur` function docs on MDN for more details.
@@ -24,3 +18,3 @@ * @default '5px'
    */
-  saturation?: number | string,
+  saturation?: number | string,
 
@@ -33,3 +27,3 @@ /**
 
-    /**
+  /**
    * @description The amount of vertical translation to apply to the image. See the CSS `translate` function docs on MDN for more details.
@@ -41,2 +35,2 @@ * @default 0
 
-export default function cosha(options?: CoshaOptions): undefined;
+export default function cosha(className?: string, options?: CoshaOptions): undefined;

No alert changes

Improved metrics

Dev dependency count

7

-12.5%

Number of lines in readme file

111

1.83%

Worsened metrics

Total package byte prevSize

13279

-38.82%

Number of package files

9

-25%

Lines of code

100

-25.37%

No dependency changes