next-blurhash-previews 0.0.3-beta15 → 0.0.3-beta18

package/components/imagePreviewBootstrap.tsx

@@ -1,7 +1,7 @@
-import { createElement } from "react";
-import Script from "next/script";
+const { createElement } = require("react");
+const Script = require("next/script");
 
-export const imagePreviewBootstrap = createElement(Script, {
+module.exports = createElement(Script, {
   dangerouslySetInnerHTML: { __html: `(() => { /*HERE*/ })();` },
   strategy: "beforeInteractive",
 });

package/imagePreviewBootstrap.cjs

@@ -1,9 +1,7 @@
 const { createElement } = require("react");
 const Script = require("next/script");
 
-module.exports.bootstrap = createElement(Script, {
-  dangerouslySetInnerHTML: {
-    __html: `(() => { "=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],u=t=>{let e=0;for(let s=0;s<t.length;s++){const n=t[s],r=P.indexOf(n);e=e*83+r}return e},w=t=>{let e=t/255;return e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)},b=t=>{let e=Math.max(0,Math.min(1,t));return e<=.0031308?Math.round(e*12.92*255+.5):Math.round((1.055*Math.pow(e,.4166666666666667)-.055)*255+.5)},R=t=>t<0?-1:1,p=(t,e)=>R(t)*Math.pow(Math.abs(t),e);class q extends Error{constructor(e){super(e),this.name="ValidationError",this.message=e}}const T=t=>{if(!t||t.length<6)throw new q("The blurhash string must be at least 6 characters");const e=u(t[0]),s=Math.floor(e/9)+1,n=e%9+1;if(t.length!==4+2*n*s)throw new q(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*n*s}\`)},A=t=>{const e=t>>16,s=t>>8&255,n=t&255;return[w(e),w(s),w(n)]},G=(t,e)=>{const s=Math.floor(t/361),n=Math.floor(t/19)%19,r=t%19;return[p((s-9)/9,2)*e,p((n-9)/9,2)*e,p((r-9)/9,2)*e]},I=(t,e,s,n)=>{T(t),n=n|1;const r=u(t[0]),a=Math.floor(r/9)+1,c=r%9+1,y=(u(t[1])+1)/166,d=new Array(c*a);for(let o=0;o<d.length;o++)if(o===0){const i=u(t.substring(2,6));d[o]=A(i)}else{const i=u(t.substring(4+o*2,6+o*2));d[o]=G(i,y*n)}const l=e*4,h=new Uint8ClampedArray(l*s);for(let o=0;o<s;o++)for(let i=0;i<e;i++){let v=0,x=0,C=0;for(let g=0;g<a;g++)for(let m=0;m<c;m++){const f=Math.cos(Math.PI*i*m/e)*Math.cos(Math.PI*o*g/s);let M=d[m+g*c];v+=M[0]*f,x+=M[1]*f,C+=M[2]*f}let B=b(v),E=b(x),L=b(C);h[4*i+0+o*l]=B,h[4*i+1+o*l]=E,h[4*i+2+o*l]=L,h[4*i+3+o*l]=255}return h};class D extends HTMLElement{sd;mo;static observedAttributes=["preview"];get#t(){return this.querySelector("img")}get#e(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#s=()=>{if(this.#t&&this.#e)return this.mo?.disconnect(),this.#t.complete?this.#n():(this.#o(),this.#t.addEventListener("load",this.#n)),!0};connectedCallback(){this.#s()||(this.mo=new MutationObserver(this.#s),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#n=()=>{this.sd.innerHTML='<slot name="image"></slot>'};attributeChangedCallback(e){this.#e&&e==="preview"&&this.#o()}#o(){const e=JSON.parse(this.getAttribute("preview"));H(this.#e,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",D);function H(t,e){const{w:s,h:n}=e;t.width=s,t.height=n;const r=I(e.blurhash,s,n),a=t.getContext("2d"),c=a.createImageData(s,n);c.data.set(r),a.putImageData(c,0,0)} })();`,
-  },
+module.exports = createElement(Script, {
+  dangerouslySetInnerHTML: { __html: `(() => { "use strict";const P=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],u=t=>{let e=0;for(let s=0;s<t.length;s++){const n=t[s],r=P.indexOf(n);e=e*83+r}return e},w=t=>{let e=t/255;return e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)},b=t=>{let e=Math.max(0,Math.min(1,t));return e<=.0031308?Math.round(e*12.92*255+.5):Math.round((1.055*Math.pow(e,.4166666666666667)-.055)*255+.5)},R=t=>t<0?-1:1,p=(t,e)=>R(t)*Math.pow(Math.abs(t),e);class q extends Error{constructor(e){super(e),this.name="ValidationError",this.message=e}}const T=t=>{if(!t||t.length<6)throw new q("The blurhash string must be at least 6 characters");const e=u(t[0]),s=Math.floor(e/9)+1,n=e%9+1;if(t.length!==4+2*n*s)throw new q(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*n*s}\`)},A=t=>{const e=t>>16,s=t>>8&255,n=t&255;return[w(e),w(s),w(n)]},G=(t,e)=>{const s=Math.floor(t/361),n=Math.floor(t/19)%19,r=t%19;return[p((s-9)/9,2)*e,p((n-9)/9,2)*e,p((r-9)/9,2)*e]},I=(t,e,s,n)=>{T(t),n=n|1;const r=u(t[0]),a=Math.floor(r/9)+1,c=r%9+1,y=(u(t[1])+1)/166,d=new Array(c*a);for(let o=0;o<d.length;o++)if(o===0){const i=u(t.substring(2,6));d[o]=A(i)}else{const i=u(t.substring(4+o*2,6+o*2));d[o]=G(i,y*n)}const l=e*4,h=new Uint8ClampedArray(l*s);for(let o=0;o<s;o++)for(let i=0;i<e;i++){let v=0,x=0,C=0;for(let g=0;g<a;g++)for(let m=0;m<c;m++){const f=Math.cos(Math.PI*i*m/e)*Math.cos(Math.PI*o*g/s);let M=d[m+g*c];v+=M[0]*f,x+=M[1]*f,C+=M[2]*f}let B=b(v),E=b(x),L=b(C);h[4*i+0+o*l]=B,h[4*i+1+o*l]=E,h[4*i+2+o*l]=L,h[4*i+3+o*l]=255}return h};class D extends HTMLElement{sd;mo;static observedAttributes=["preview"];get#t(){return this.querySelector("img")}get#e(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#s=()=>{if(this.#t&&this.#e)return this.mo?.disconnect(),this.#t.complete?this.#n():(this.#o(),this.#t.addEventListener("load",this.#n)),!0};connectedCallback(){this.#s()||(this.mo=new MutationObserver(this.#s),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#n=()=>{this.sd.innerHTML='<slot name="image"></slot>'};attributeChangedCallback(e){this.#e&&e==="preview"&&this.#o()}#o(){const e=JSON.parse(this.getAttribute("preview"));H(this.#e,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",D);function H(t,e){const{w:s,h:n}=e;t.width=s,t.height=n;const r=I(e.blurhash,s,n),a=t.getContext("2d"),c=a.createImageData(s,n);c.data.set(r),a.putImageData(c,0,0)} })();` },
   strategy: "beforeInteractive",
 });

package/index.js

@@ -1,3 +1,3 @@
-import { imagePreviewBootstrap } from "./imagePreviewBootstrap.js";
+import imagePreviewBootstrap from "./imagePreviewBootstrap.cjs";
 
 export { imagePreviewBootstrap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-blurhash-previews",
-  "version": "0.0.3-beta15",
+  "version": "0.0.3-beta18",
   "description": "",
   "main": "index.js",
   "module": "index.js",

package/util/setBootstrap.js

@@ -16,7 +16,7 @@ export default function writeBootstrapScript() {
         "/*HERE*/",
         bootstrapScript.replace(/[\r\n]\s*$/, "").replace(/`/g, "\\`")
       ).replace(/\${/g, "\\${");
-      fs.writeFileSync("./imagePreviewBootstrap.js", BootstrapModule);
+      fs.writeFileSync("./imagePreviewBootstrap.cjs", BootstrapModule);
     },
   };
 }

package/imagePreviewBootstrap.js

@@ -1,7 +0,0 @@
-import { createElement } from "react";
-import Script from "next/script";
-
-export const imagePreviewBootstrap = createElement(Script, {
-  dangerouslySetInnerHTML: { __html: `(() => { "use strict";const P=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],u=t=>{let e=0;for(let s=0;s<t.length;s++){const n=t[s],r=P.indexOf(n);e=e*83+r}return e},w=t=>{let e=t/255;return e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)},b=t=>{let e=Math.max(0,Math.min(1,t));return e<=.0031308?Math.round(e*12.92*255+.5):Math.round((1.055*Math.pow(e,.4166666666666667)-.055)*255+.5)},R=t=>t<0?-1:1,p=(t,e)=>R(t)*Math.pow(Math.abs(t),e);class q extends Error{constructor(e){super(e),this.name="ValidationError",this.message=e}}const T=t=>{if(!t||t.length<6)throw new q("The blurhash string must be at least 6 characters");const e=u(t[0]),s=Math.floor(e/9)+1,n=e%9+1;if(t.length!==4+2*n*s)throw new q(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*n*s}\`)},A=t=>{const e=t>>16,s=t>>8&255,n=t&255;return[w(e),w(s),w(n)]},G=(t,e)=>{const s=Math.floor(t/361),n=Math.floor(t/19)%19,r=t%19;return[p((s-9)/9,2)*e,p((n-9)/9,2)*e,p((r-9)/9,2)*e]},I=(t,e,s,n)=>{T(t),n=n|1;const r=u(t[0]),a=Math.floor(r/9)+1,c=r%9+1,y=(u(t[1])+1)/166,d=new Array(c*a);for(let o=0;o<d.length;o++)if(o===0){const i=u(t.substring(2,6));d[o]=A(i)}else{const i=u(t.substring(4+o*2,6+o*2));d[o]=G(i,y*n)}const l=e*4,h=new Uint8ClampedArray(l*s);for(let o=0;o<s;o++)for(let i=0;i<e;i++){let v=0,x=0,C=0;for(let g=0;g<a;g++)for(let m=0;m<c;m++){const f=Math.cos(Math.PI*i*m/e)*Math.cos(Math.PI*o*g/s);let M=d[m+g*c];v+=M[0]*f,x+=M[1]*f,C+=M[2]*f}let B=b(v),E=b(x),L=b(C);h[4*i+0+o*l]=B,h[4*i+1+o*l]=E,h[4*i+2+o*l]=L,h[4*i+3+o*l]=255}return h};class D extends HTMLElement{sd;mo;static observedAttributes=["preview"];get#t(){return this.querySelector("img")}get#e(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#s=()=>{if(this.#t&&this.#e)return this.mo?.disconnect(),this.#t.complete?this.#n():(this.#o(),this.#t.addEventListener("load",this.#n)),!0};connectedCallback(){this.#s()||(this.mo=new MutationObserver(this.#s),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#n=()=>{this.sd.innerHTML='<slot name="image"></slot>'};attributeChangedCallback(e){this.#e&&e==="preview"&&this.#o()}#o(){const e=JSON.parse(this.getAttribute("preview"));H(this.#e,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",D);function H(t,e){const{w:s,h:n}=e;t.width=s,t.height=n;const r=I(e.blurhash,s,n),a=t.getContext("2d"),c=a.createImageData(s,n);c.data.set(r),a.putImageData(c,0,0)} })();` },
-  strategy: "beforeInteractive",
-});