@hirasso/thumbhash-custom-element - npm Package Compare versions

Comparing version 0.2.0 to 0.2.3

dist/index.modern.js

@@ -1,2 +0,2 @@
-import{thumbHashToRGBA as t,thumbHashToAverageRGBA as e,thumbHashToDataURL as a}from"thumbhash";function r(t){return Uint8Array.from(atob(t),t=>t.charCodeAt(0))}class s extends HTMLElement{constructor(){super(),this.shadowRoot=void 0,this.shadowRoot=this.attachShadow({mode:"open"}),this.setAttribute("aria-hidden","true")}static init(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",s)}connectedCallback(){const t=this.value.trim();if(t)switch(this.strategy){case"img":this.renderImage(t);break;case"average":this.renderAverage(t);break;default:this.renderCanvas(t)}}get value(){return this.getAttribute("value")||""}get strategy(){const t=(this.getAttribute("strategy")||"").trim();return"img"===t||"average"===t?t:"canvas"}get average(){return!!this.getAttribute("average")}renderCanvas(e){const{width:a,height:s,pixels:n}=function(e){const{w:a,h:s,rgba:n}=t(r(e));return{width:a,height:s,pixels:n}}(e),h=document.createElement("canvas");h.style.width="100%",h.style.height="100%";const i=h.getContext("2d");if(!i)return;h.width=a,h.height=s;const o=i.createImageData(a,s);o.data.set(n),i.putImageData(o,0,0),this.shadowRoot.appendChild(h)}renderAverage(t){const a=function(t){const{r:a,g:s,b:n}=e(r(t));return`rgb(${Math.round(255*a)} ${Math.round(255*s)} ${Math.round(255*n)})`}(t),s=document.createElement("div");s.style.width="100%",s.style.height="100%",s.style.background=a,this.shadowRoot.appendChild(s)}renderImage(t){const e=document.createElement("img");e.style.width="100%",e.style.height="100%",e.alt="",e.src=function(t){return a(r(t))}(t),this.shadowRoot.appendChild(e)}}export{s as default};
+import{thumbHashToRGBA as t,thumbHashToAverageRGBA as e,thumbHashToDataURL as a}from"thumbhash";function r(t){return Uint8Array.from(atob(t),t=>t.charCodeAt(0))}class s extends HTMLElement{constructor(){super(),this.shadowRoot=void 0,this.shadowRoot=this.attachShadow({mode:"open"}),this.setAttribute("aria-hidden","true")}static init(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",s)}connectedCallback(){const t=this.value.trim();if(t)switch(this.strategy){case"img":this.renderImage(t);break;case"average":this.renderAverage(t);break;default:this.renderCanvas(t)}}get value(){return this.getAttribute("value")||""}get strategy(){const t=(this.getAttribute("strategy")||"").trim();return"img"===t||"average"===t?t:"canvas"}get average(){return!!this.getAttribute("average")}renderCanvas(e){const{width:a,height:s,pixels:n}=function(e){const{w:a,h:s,rgba:n}=t(r(e));return{width:a,height:s,pixels:n}}(e),h=document.createElement("canvas");h.style.width="100%",h.style.height="100%";const i=h.getContext("2d");if(!i)return;h.width=a,h.height=s;const o=i.createImageData(a,s);o.data.set(n),i.putImageData(o,0,0),this.shadowRoot.appendChild(h)}renderAverage(t){const a=function(t){const{r:a,g:s,b:n}=e(r(t));return`rgb(${Math.round(255*a)} ${Math.round(255*s)} ${Math.round(255*n)})`}(t),s=document.createElement("div");s.style.width="100%",s.style.height="100%",s.style.background=a,this.shadowRoot.appendChild(s)}renderImage(t){const e=document.createElement("img");e.style.width="100%",e.style.height="100%",e.alt="",e.src=function(t){return a(r(t))}(t),this.shadowRoot.appendChild(e)}}export{s as ThumbHashElement};
 //# sourceMappingURL=index.modern.js.map

dist/index.module.js

@@ -1,2 +0,2 @@
-import{thumbHashToRGBA as t,thumbHashToAverageRGBA as e,thumbHashToDataURL as a}from"thumbhash";function r(t){return Uint8Array.from(atob(t),t=>t.charCodeAt(0))}class s extends HTMLElement{constructor(){super(),this.shadowRoot=void 0,this.shadowRoot=this.attachShadow({mode:"open"}),this.setAttribute("aria-hidden","true")}static init(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",s)}connectedCallback(){const t=this.value.trim();if(t)switch(this.strategy){case"img":this.renderImage(t);break;case"average":this.renderAverage(t);break;default:this.renderCanvas(t)}}get value(){return this.getAttribute("value")||""}get strategy(){const t=(this.getAttribute("strategy")||"").trim();return"img"===t||"average"===t?t:"canvas"}get average(){return!!this.getAttribute("average")}renderCanvas(e){const{width:a,height:s,pixels:n}=function(e){const{w:a,h:s,rgba:n}=t(r(e));return{width:a,height:s,pixels:n}}(e),h=document.createElement("canvas");h.style.width="100%",h.style.height="100%";const i=h.getContext("2d");if(!i)return;h.width=a,h.height=s;const o=i.createImageData(a,s);o.data.set(n),i.putImageData(o,0,0),this.shadowRoot.appendChild(h)}renderAverage(t){const a=function(t){const{r:a,g:s,b:n}=e(r(t));return`rgb(${Math.round(255*a)} ${Math.round(255*s)} ${Math.round(255*n)})`}(t),s=document.createElement("div");s.style.width="100%",s.style.height="100%",s.style.background=a,this.shadowRoot.appendChild(s)}renderImage(t){const e=document.createElement("img");e.style.width="100%",e.style.height="100%",e.alt="",e.src=function(t){return a(r(t))}(t),this.shadowRoot.appendChild(e)}}export{s as default};
+import{thumbHashToRGBA as t,thumbHashToAverageRGBA as e,thumbHashToDataURL as a}from"thumbhash";function r(t){return Uint8Array.from(atob(t),t=>t.charCodeAt(0))}class s extends HTMLElement{constructor(){super(),this.shadowRoot=void 0,this.shadowRoot=this.attachShadow({mode:"open"}),this.setAttribute("aria-hidden","true")}static init(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",s)}connectedCallback(){const t=this.value.trim();if(t)switch(this.strategy){case"img":this.renderImage(t);break;case"average":this.renderAverage(t);break;default:this.renderCanvas(t)}}get value(){return this.getAttribute("value")||""}get strategy(){const t=(this.getAttribute("strategy")||"").trim();return"img"===t||"average"===t?t:"canvas"}get average(){return!!this.getAttribute("average")}renderCanvas(e){const{width:a,height:s,pixels:n}=function(e){const{w:a,h:s,rgba:n}=t(r(e));return{width:a,height:s,pixels:n}}(e),h=document.createElement("canvas");h.style.width="100%",h.style.height="100%";const i=h.getContext("2d");if(!i)return;h.width=a,h.height=s;const o=i.createImageData(a,s);o.data.set(n),i.putImageData(o,0,0),this.shadowRoot.appendChild(h)}renderAverage(t){const a=function(t){const{r:a,g:s,b:n}=e(r(t));return`rgb(${Math.round(255*a)} ${Math.round(255*s)} ${Math.round(255*n)})`}(t),s=document.createElement("div");s.style.width="100%",s.style.height="100%",s.style.background=a,this.shadowRoot.appendChild(s)}renderImage(t){const e=document.createElement("img");e.style.width="100%",e.style.height="100%",e.alt="",e.src=function(t){return a(r(t))}(t),this.shadowRoot.appendChild(e)}}export{s as ThumbHashElement};
 //# sourceMappingURL=index.module.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t||self).ThumbhashCustomElement={})}(this,function(t){function e(t){let{PI:e,min:r,max:n,cos:o,round:a}=Math,i=t[0]|t[1]<<8|t[2]<<16,s=t[3]|t[4]<<8,h=(63&i)/63,l=(i>>6&63)/31.5-1,u=(i>>12&63)/31.5-1,d=(i>>18&31)/31,c=i>>23,f=(s>>3&63)/63,g=(s>>9&63)/63,m=s>>15,b=n(3,m?c?5:7:7&s),p=n(3,m?7&s:c?5:7),w=c?(15&t[5])/15:1,y=(t[5]>>4)/15,v=c?6:5,C=0,x=(e,r,n)=>{let o=[];for(let a=0;a<r;a++)for(let i=a?0:1;i*r<e*(r-a);i++)o.push(((t[v+(C>>1)]>>((1&C++)<<2)&15)/7.5-1)*n);return o},A=x(b,p,d),E=x(3,3,1.25*f),M=x(3,3,1.25*g),I=c&&x(5,5,y),R=function(t){let e=t[3],r=128&t[2],n=128&t[4];return(n?r?5:7:7&e)/(n?7&e:r?5:7)}(t),T=a(R>1?32:32*R),k=a(R>1?32/R:32),$=new Uint8Array(T*k*4),D=[],H=[];for(let t=0,a=0;t<k;t++)for(let i=0;i<T;i++,a+=4){let s=h,d=l,f=u,g=w;for(let t=0,r=n(b,c?5:3);t<r;t++)D[t]=o(e/T*(i+.5)*t);for(let r=0,a=n(p,c?5:3);r<a;r++)H[r]=o(e/k*(t+.5)*r);for(let t=0,e=0;t<p;t++)for(let r=t?0:1,n=2*H[t];r*p<b*(p-t);r++,e++)s+=A[e]*D[r]*n;for(let t=0,e=0;t<3;t++)for(let r=t?0:1,n=2*H[t];r<3-t;r++,e++){let t=D[r]*n;d+=E[e]*t,f+=M[e]*t}if(c)for(let t=0,e=0;t<5;t++)for(let r=t?0:1,n=2*H[t];r<5-t;r++,e++)g+=I[e]*D[r]*n;let m=s-2/3*d,y=(3*s-m+f)/2,v=y-f;$[a]=n(0,255*r(1,y)),$[a+1]=n(0,255*r(1,v)),$[a+2]=n(0,255*r(1,m)),$[a+3]=n(0,255*r(1,g))}return{w:T,h:k,rgba:$}}function r(t){return Uint8Array.from(atob(t),t=>t.charCodeAt(0))}class n extends HTMLElement{constructor(){super(),this.shadowRoot=void 0,this.shadowRoot=this.attachShadow({mode:"open"}),this.setAttribute("aria-hidden","true")}static init(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",n)}connectedCallback(){const t=this.value.trim();if(t)switch(this.strategy){case"img":this.renderImage(t);break;case"average":this.renderAverage(t);break;default:this.renderCanvas(t)}}get value(){return this.getAttribute("value")||""}get strategy(){const t=(this.getAttribute("strategy")||"").trim();return"img"===t||"average"===t?t:"canvas"}get average(){return!!this.getAttribute("average")}renderCanvas(t){const{width:n,height:o,pixels:a}=function(t){const{w:n,h:o,rgba:a}=e(r(t));return{width:n,height:o,pixels:a}}(t),i=document.createElement("canvas");i.style.width="100%",i.style.height="100%";const s=i.getContext("2d");if(!s)return;i.width=n,i.height=o;const h=s.createImageData(n,o);h.data.set(a),s.putImageData(h,0,0),this.shadowRoot.appendChild(i)}renderAverage(t){const e=function(t){const{r:e,g:n,b:o}=function(t){let{min:e,max:r}=Math,n=t[0]|t[1]<<8|t[2]<<16,o=(63&n)/63,a=(n>>12&63)/31.5-1,i=n>>23?(15&t[5])/15:1,s=o-2/3*((n>>6&63)/31.5-1),h=(3*o-s+a)/2,l=h-a;return{r:r(0,e(1,h)),g:r(0,e(1,l)),b:r(0,e(1,s)),a:i}}(r(t));return`rgb(${Math.round(255*e)} ${Math.round(255*n)} ${Math.round(255*o)})`}(t),n=document.createElement("div");n.style.width="100%",n.style.height="100%",n.style.background=e,this.shadowRoot.appendChild(n)}renderImage(t){const n=document.createElement("img");n.style.width="100%",n.style.height="100%",n.alt="",n.src=function(t){return function(t){let r=e(t);return function(t,e,r){let n=4*t+1,o=6+e*(5+n),a=[137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,t>>8,255&t,0,0,e>>8,255&e,8,6,0,0,0,0,0,0,0,o>>>24,o>>16&255,o>>8&255,255&o,73,68,65,84,120,1],i=[0,498536548,997073096,651767980,1994146192,1802195444,1303535960,1342533948,-306674912,-267414716,-690576408,-882789492,-1687895376,-2032938284,-1609899400,-1111625188],s=1,h=0;for(let t=0,o=0,i=n-1;t<e;t++,i+=n-1)for(a.push(t+1<e?0:1,255&n,n>>8,255&~n,n>>8^255,0),h=(h+s)%65521;o<i;o++){let t=255&r[o];a.push(t),s=(s+t)%65521,h=(h+s)%65521}a.push(h>>8,255&h,s>>8,255&s,0,0,0,0,0,0,0,0,73,69,78,68,174,66,96,130);for(let[t,e]of[[12,29],[37,41+o]]){let r=-1;for(let n=t;n<e;n++)r^=a[n],r=r>>>4^i[15&r],r=r>>>4^i[15&r];r=~r,a[e++]=r>>>24,a[e++]=r>>16&255,a[e++]=r>>8&255,a[e++]=255&r}return"data:image/png;base64,"+btoa(String.fromCharCode(...a))}(r.w,r.h,r.rgba)}(r(t))}(t),this.shadowRoot.appendChild(n)}}t.ThumbHashElement=n});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t||self).ThumbhashCustomElement=e()}(this,function(){function t(t){let{PI:e,min:r,max:n,cos:o,round:a}=Math,i=t[0]|t[1]<<8|t[2]<<16,s=t[3]|t[4]<<8,h=(63&i)/63,u=(i>>6&63)/31.5-1,l=(i>>12&63)/31.5-1,d=(i>>18&31)/31,c=i>>23,f=(s>>3&63)/63,g=(s>>9&63)/63,m=s>>15,b=n(3,m?c?5:7:7&s),p=n(3,m?7&s:c?5:7),w=c?(15&t[5])/15:1,y=(t[5]>>4)/15,v=c?6:5,C=0,A=(e,r,n)=>{let o=[];for(let a=0;a<r;a++)for(let i=a?0:1;i*r<e*(r-a);i++)o.push(((t[v+(C>>1)]>>((1&C++)<<2)&15)/7.5-1)*n);return o},x=A(b,p,d),E=A(3,3,1.25*f),M=A(3,3,1.25*g),I=c&&A(5,5,y),R=function(t){let e=t[3],r=128&t[2],n=128&t[4];return(n?r?5:7:7&e)/(n?7&e:r?5:7)}(t),k=a(R>1?32:32*R),T=a(R>1?32/R:32),$=new Uint8Array(k*T*4),D=[],S=[];for(let t=0,a=0;t<T;t++)for(let i=0;i<k;i++,a+=4){let s=h,d=u,f=l,g=w;for(let t=0,r=n(b,c?5:3);t<r;t++)D[t]=o(e/k*(i+.5)*t);for(let r=0,a=n(p,c?5:3);r<a;r++)S[r]=o(e/T*(t+.5)*r);for(let t=0,e=0;t<p;t++)for(let r=t?0:1,n=2*S[t];r*p<b*(p-t);r++,e++)s+=x[e]*D[r]*n;for(let t=0,e=0;t<3;t++)for(let r=t?0:1,n=2*S[t];r<3-t;r++,e++){let t=D[r]*n;d+=E[e]*t,f+=M[e]*t}if(c)for(let t=0,e=0;t<5;t++)for(let r=t?0:1,n=2*S[t];r<5-t;r++,e++)g+=I[e]*D[r]*n;let m=s-2/3*d,y=(3*s-m+f)/2,v=y-f;$[a]=n(0,255*r(1,y)),$[a+1]=n(0,255*r(1,v)),$[a+2]=n(0,255*r(1,m)),$[a+3]=n(0,255*r(1,g))}return{w:k,h:T,rgba:$}}function e(t){return Uint8Array.from(atob(t),t=>t.charCodeAt(0))}class r extends HTMLElement{constructor(){super(),this.shadowRoot=void 0,this.shadowRoot=this.attachShadow({mode:"open"}),this.setAttribute("aria-hidden","true")}static init(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",r)}connectedCallback(){const t=this.value.trim();if(t)switch(this.strategy){case"img":this.renderImage(t);break;case"average":this.renderAverage(t);break;default:this.renderCanvas(t)}}get value(){return this.getAttribute("value")||""}get strategy(){const t=(this.getAttribute("strategy")||"").trim();return"img"===t||"average"===t?t:"canvas"}get average(){return!!this.getAttribute("average")}renderCanvas(r){const{width:n,height:o,pixels:a}=function(r){const{w:n,h:o,rgba:a}=t(e(r));return{width:n,height:o,pixels:a}}(r),i=document.createElement("canvas");i.style.width="100%",i.style.height="100%";const s=i.getContext("2d");if(!s)return;i.width=n,i.height=o;const h=s.createImageData(n,o);h.data.set(a),s.putImageData(h,0,0),this.shadowRoot.appendChild(i)}renderAverage(t){const r=function(t){const{r:r,g:n,b:o}=function(t){let{min:e,max:r}=Math,n=t[0]|t[1]<<8|t[2]<<16,o=(63&n)/63,a=(n>>12&63)/31.5-1,i=n>>23?(15&t[5])/15:1,s=o-2/3*((n>>6&63)/31.5-1),h=(3*o-s+a)/2,u=h-a;return{r:r(0,e(1,h)),g:r(0,e(1,u)),b:r(0,e(1,s)),a:i}}(e(t));return`rgb(${Math.round(255*r)} ${Math.round(255*n)} ${Math.round(255*o)})`}(t),n=document.createElement("div");n.style.width="100%",n.style.height="100%",n.style.background=r,this.shadowRoot.appendChild(n)}renderImage(r){const n=document.createElement("img");n.style.width="100%",n.style.height="100%",n.alt="",n.src=function(r){return function(e){let r=t(e);return function(t,e,r){let n=4*t+1,o=6+e*(5+n),a=[137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,t>>8,255&t,0,0,e>>8,255&e,8,6,0,0,0,0,0,0,0,o>>>24,o>>16&255,o>>8&255,255&o,73,68,65,84,120,1],i=[0,498536548,997073096,651767980,1994146192,1802195444,1303535960,1342533948,-306674912,-267414716,-690576408,-882789492,-1687895376,-2032938284,-1609899400,-1111625188],s=1,h=0;for(let t=0,o=0,i=n-1;t<e;t++,i+=n-1)for(a.push(t+1<e?0:1,255&n,n>>8,255&~n,n>>8^255,0),h=(h+s)%65521;o<i;o++){let t=255&r[o];a.push(t),s=(s+t)%65521,h=(h+s)%65521}a.push(h>>8,255&h,s>>8,255&s,0,0,0,0,0,0,0,0,73,69,78,68,174,66,96,130);for(let[t,e]of[[12,29],[37,41+o]]){let r=-1;for(let n=t;n<e;n++)r^=a[n],r=r>>>4^i[15&r],r=r>>>4^i[15&r];r=~r,a[e++]=r>>>24,a[e++]=r>>16&255,a[e++]=r>>8&255,a[e++]=255&r}return"data:image/png;base64,"+btoa(String.fromCharCode(...a))}(r.w,r.h,r.rgba)}(e(r))}(r),this.shadowRoot.appendChild(n)}}return r});
 //# sourceMappingURL=index.umd.js.map

dist/types/index.d.ts

@@ -1,3 +0,5 @@
-import { ThumbHashElement } from "./ThumbHashElement.js";
-export default ThumbHashElement;
+import ThumbHashElement from "./ThumbHashElement.js";
+import type { Strategy } from "./support/defs.js";
+export { ThumbHashElement };
+export type { Strategy };
 //# sourceMappingURL=index.d.ts.map

dist/types/ThumbHashElement.d.ts

@@ -1,6 +0,6 @@
-type Strategy = "canvas" | "img" | "average";
+import type { Strategy } from "./support/defs.js";
 /**
  * A custom element that automatically renders a thumbhash placeholder
  */
-export declare class ThumbHashElement extends HTMLElement {
+export default class ThumbHashElement extends HTMLElement {
     shadowRoot: ShadowRoot;
@@ -29,3 +29,2 @@ constructor();
 }
-export {};
 //# sourceMappingURL=ThumbHashElement.d.ts.map

package.json

 {
   "name": "@hirasso/thumbhash-custom-element",
   "amdName": "ThumbhashCustomElement",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "description": "A custom element that renders a thumbhash placeholder for your lazy-loaded images 🎨",
@@ -69,4 +69,7 @@ "author": {
     "test:e2e:dev": "PLAYWRIGHT_ENV=dev pnpm run test:e2e --ui",
-    "test:e2e:install": "pnpm exec playwright install --with-deps"
+    "test:e2e:install": "pnpm exec playwright install --with-deps",
+    "release": "pnpm validate && pnpm bump && changeset publish",
+    "ci-version": "changeset version && pnpm install --no-frozen-lockfile",
+    "ci-publish": "pnpm build && pnpm test && changeset publish"
   }
 }

README.md

@@ -21,3 +21,3 @@ # <thumb-hash>
 ```js
-import ThumbHashElement from "thumbhash-custom-element";
+import { ThumbHashElement } from "thumbhash-custom-element";
 ThumbHashElement.init();
@@ -30,3 +30,3 @@ ```
 <script type="module">
-  import ThumbHashElement from "https://unpkg.com/@hirasso/thumbhash-custom-element@0?module";
+  import { ThumbHashElement } from "https://unpkg.com/@hirasso/thumbhash-custom-element@0?module";
   ThumbHashElement.init();
@@ -33,0 +33,0 @@ </script>

src/index.ts

@@ -1,3 +0,5 @@
-import { ThumbHashElement } from "./ThumbHashElement.js";
+import ThumbHashElement from "./ThumbHashElement.js";
+import type { Strategy } from "./support/defs.js";
 
-export default ThumbHashElement;
+export { ThumbHashElement };
+export type { Strategy };

src/ThumbHashElement.ts

@@ -7,3 +7,3 @@ import {
 
-type Strategy = "canvas" | "img" | "average";
+import type { Strategy } from "./support/defs.js";
 
@@ -13,3 +13,3 @@ /**
  */
-export class ThumbHashElement extends HTMLElement {
+export default class ThumbHashElement extends HTMLElement {
   shadowRoot: ShadowRoot;
@@ -16,0 +16,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

98149

increased by0.83%

Number of package files

23

increased by15%

Lines of code

220

increased by1.85%

No dependency changes