next-blurhash-previews 0.0.3-beta71 → 0.0.3-beta74

package/components/ImageWithPreview.tsx

@@ -76,6 +76,22 @@ const workerBlob = new Blob(
   [document.querySelector("#next-blurhash-worker-script")!.textContent!],
   { type: "text/javascript" }
 );
+const worker = new Worker(window.URL.createObjectURL(workerBlob));
+
+const emptyCanvas = document
+  .createElement("canvas")
+  // @ts-ignore
+  .transferControlToOffscreen();
+
+worker.postMessage(
+  {
+    canvas: emptyCanvas,
+    width: 25,
+    height: 25,
+    blurhash: "L05E$[offQofoffQfQfQfQfQfQfQ",
+  },
+  [emptyCanvas]
+);
 
 function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
   const { w: width, h: height, blurhash } = preview;
@@ -83,27 +99,6 @@ function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
   canvasEl.height = height;
 
   if (true) {
-    const worker = new Worker(window.URL.createObjectURL(workerBlob));
-
-    const s = +new Date();
-
-    const emptyCanv = document
-      .createElement("canvas")
-      // @ts-ignore
-      .transferControlToOffscreen();
-
-    worker.postMessage(
-      {
-        canvas: emptyCanv,
-        width: 50,
-        height: 50,
-        blurhash: "L05E$[offQofoffQfQfQfQfQfQfQ",
-      },
-      [emptyCanv]
-    );
-    const e = +new Date();
-    console.log("bootstrap", e - s);
-
     const offscreen = (canvasEl as any).transferControlToOffscreen();
     worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
       offscreen,

package/imagePreviewBootstrap.js

@@ -6,307 +6,9 @@ export const imagePreviewBootstrap = createElement(
   createElement("script", {
     id: "next-blurhash-worker-script",
     type: "javascript/worker",
-    dangerouslySetInnerHTML: { __html: `(() => { "use strict";
-const digitCharacters = [
-  "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",
-  "#",
-  "$",
-  "%",
-  "*",
-  "+",
-  ",",
-  "-",
-  ".",
-  ":",
-  ";",
-  "=",
-  "?",
-  "@",
-  "[",
-  "]",
-  "^",
-  "_",
-  "{",
-  "|",
-  "}",
-  "~"
-];
-const decode83 = (str) => {
-  let value = 0;
-  for (let i = 0; i < str.length; i++) {
-    const c = str[i];
-    const digit = digitCharacters.indexOf(c);
-    value = value * 83 + digit;
-  }
-  return value;
-};
-const sRGBToLinear = (value) => {
-  let v = value / 255;
-  if (v <= 0.04045) {
-    return v / 12.92;
-  } else {
-    return Math.pow((v + 0.055) / 1.055, 2.4);
-  }
-};
-const linearTosRGB = (value) => {
-  let v = Math.max(0, Math.min(1, value));
-  if (v <= 31308e-7) {
-    return Math.round(v * 12.92 * 255 + 0.5);
-  } else {
-    return Math.round((1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255 + 0.5);
-  }
-};
-const sign = (n) => n < 0 ? -1 : 1;
-const signPow = (val, exp) => sign(val) * Math.pow(Math.abs(val), exp);
-class ValidationError extends Error {
-  constructor(message) {
-    super(message);
-    this.name = "ValidationError";
-    this.message = message;
-  }
-}
-const validateBlurhash = (blurhash) => {
-  if (!blurhash || blurhash.length < 6) {
-    throw new ValidationError("The blurhash string must be at least 6 characters");
-  }
-  const sizeFlag = decode83(blurhash[0]);
-  const numY = Math.floor(sizeFlag / 9) + 1;
-  const numX = sizeFlag % 9 + 1;
-  if (blurhash.length !== 4 + 2 * numX * numY) {
-    throw new ValidationError(\`blurhash length mismatch: length is \${blurhash.length} but it should be \${4 + 2 * numX * numY}\`);
-  }
-};
-const decodeDC = (value) => {
-  const intR = value >> 16;
-  const intG = value >> 8 & 255;
-  const intB = value & 255;
-  return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];
-};
-const decodeAC = (value, maximumValue) => {
-  const quantR = Math.floor(value / (19 * 19));
-  const quantG = Math.floor(value / 19) % 19;
-  const quantB = value % 19;
-  const rgb = [
-    signPow((quantR - 9) / 9, 2) * maximumValue,
-    signPow((quantG - 9) / 9, 2) * maximumValue,
-    signPow((quantB - 9) / 9, 2) * maximumValue
-  ];
-  return rgb;
-};
-const decode = (blurhash, width, height, punch) => {
-  validateBlurhash(blurhash);
-  punch = punch | 1;
-  const sizeFlag = decode83(blurhash[0]);
-  const numY = Math.floor(sizeFlag / 9) + 1;
-  const numX = sizeFlag % 9 + 1;
-  const quantisedMaximumValue = decode83(blurhash[1]);
-  const maximumValue = (quantisedMaximumValue + 1) / 166;
-  const colors = new Array(numX * numY);
-  for (let i = 0; i < colors.length; i++) {
-    if (i === 0) {
-      const value = decode83(blurhash.substring(2, 6));
-      colors[i] = decodeDC(value);
-    } else {
-      const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));
-      colors[i] = decodeAC(value, maximumValue * punch);
-    }
-  }
-  const bytesPerRow = width * 4;
-  const pixels = new Uint8ClampedArray(bytesPerRow * height);
-  for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
-      let r = 0;
-      let g = 0;
-      let b = 0;
-      for (let j = 0; j < numY; j++) {
-        for (let i = 0; i < numX; i++) {
-          const basis = Math.cos(Math.PI * x * i / width) * Math.cos(Math.PI * y * j / height);
-          let color = colors[i + j * numX];
-          r += color[0] * basis;
-          g += color[1] * basis;
-          b += color[2] * basis;
-        }
-      }
-      let intR = linearTosRGB(r);
-      let intG = linearTosRGB(g);
-      let intB = linearTosRGB(b);
-      pixels[4 * x + 0 + y * bytesPerRow] = intR;
-      pixels[4 * x + 1 + y * bytesPerRow] = intG;
-      pixels[4 * x + 2 + y * bytesPerRow] = intB;
-      pixels[4 * x + 3 + y * bytesPerRow] = 255;
-    }
-  }
-  return pixels;
-};
-var decode$1 = decode;
-addEventListener("message", (evt) => {
-  console.log(evt);
-  const { canvas, width, height, blurhash } = evt.data;
-  console.log("Encoding", blurhash);
-  const start = +new Date();
-  const pixels = decode$1(blurhash, width, height);
-  const ctx = canvas.getContext("2d");
-  const imageData = ctx.createImageData(width, height);
-  imageData.data.set(pixels);
-  ctx.putImageData(imageData, 0, 0);
-  const end = +new Date();
-  console.log("Done Encoding", blurhash, end - start);
-}); })();` },
+    dangerouslySetInnerHTML: { __html: `(() => { "use strict";const I=["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 n=0;for(let o=0;o<t.length;o++){const e=t[o],c=I.indexOf(e);n=n*83+c}return n},D=t=>{let n=t/255;return n<=.04045?n/12.92:Math.pow((n+.055)/1.055,2.4)},b=t=>{let n=Math.max(0,Math.min(1,t));return n<=.0031308?Math.round(n*12.92*255+.5):Math.round((1.055*Math.pow(n,.4166666666666667)-.055)*255+.5)},P=t=>t<0?-1:1,p=(t,n)=>P(t)*Math.pow(Math.abs(t),n);class q extends Error{constructor(n){super(n),this.name="ValidationError",this.message=n}}const v=t=>{if(!t||t.length<6)throw new q("The blurhash string must be at least 6 characters");const n=u(t[0]),o=Math.floor(n/9)+1,e=n%9+1;if(t.length!==4+2*e*o)throw new q(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*e*o}\`)},A=t=>{const n=t>>16,o=t>>8&255,e=t&255;return[D(n),D(o),D(e)]},T=(t,n)=>{const o=Math.floor(t/361),e=Math.floor(t/19)%19,c=t%19;return[p((o-9)/9,2)*n,p((e-9)/9,2)*n,p((c-9)/9,2)*n]},V=(t,n,o,e)=>{v(t),e=e|1;const c=u(t[0]),i=Math.floor(c/9)+1,l=c%9+1,h=(u(t[1])+1)/166,r=new Array(l*i);for(let s=0;s<r.length;s++)if(s===0){const a=u(t.substring(2,6));r[s]=A(a)}else{const a=u(t.substring(4+s*2,6+s*2));r[s]=T(a,h*e)}const d=n*4,g=new Uint8ClampedArray(d*o);for(let s=0;s<o;s++)for(let a=0;a<n;a++){let B=0,E=0,R=0;for(let M=0;M<i;M++)for(let f=0;f<l;f++){const w=Math.cos(Math.PI*a*f/n)*Math.cos(Math.PI*s*M/o);let x=r[f+M*l];B+=x[0]*w,E+=x[1]*w,R+=x[2]*w}let C=b(B),G=b(E),y=b(R);g[4*a+0+s*d]=C,g[4*a+1+s*d]=G,g[4*a+2+s*d]=y,g[4*a+3+s*d]=255}return g};var $=V;addEventListener("message",t=>{console.log(t);const{canvas:n,width:o,height:e,blurhash:c}=t.data;console.log("Encoding",c);const i=+new Date,l=$(c,o,e),m=n.getContext("2d"),h=m.createImageData(o,e);h.data.set(l),m.putImageData(h,0,0);const r=+new Date;console.log("Done Encoding",c,r-i)}); })();` },
   }),
   createElement("script", {
-    dangerouslySetInnerHTML: { __html: `(() => { "use strict";
-class ImageWithPreview extends HTMLElement {
-  sd;
-  mo;
-  static observedAttributes = ["preview"];
-  #connected = false;
-  get #imgEl() {
-    return this.querySelector("img");
-  }
-  get #canvasEl() {
-    return this.querySelector("canvas");
-  }
-  constructor() {
-    super();
-    this.sd = this.attachShadow({
-      mode: "open"
-    });
-    this.sd.innerHTML = \`<slot name="preview"></slot>\`;
-  }
-  #checkReady = () => {
-    if (this.#imgEl && this.#canvasEl) {
-      this.mo?.disconnect();
-      if (this.#imgEl.complete) {
-        this.#imgLoad();
-      } else {
-        this.#updatePreview();
-        this.#imgEl.addEventListener("load", this.#imgLoad);
-      }
-      return 1;
-    }
-  };
-  connectedCallback() {
-    this.#connected = true;
-    if (!this.#checkReady()) {
-      this.mo = new MutationObserver(this.#checkReady);
-      this.mo.observe(this, {
-        subtree: true,
-        childList: true,
-        attributes: false
-      });
-    }
-  }
-  #imgLoad = () => {
-    this.sd.innerHTML = \`<slot name="image"></slot>\`;
-  };
-  attributeChangedCallback(name) {
-    if (this.#canvasEl && name === "preview") {
-      this.#updatePreview();
-    }
-  }
-  #updatePreview() {
-    if (!this.#connected || !this.getAttribute("preview")) {
-      return;
-    }
-    const previewObj = JSON.parse(this.getAttribute("preview"));
-    updateBlurHashPreview(this.#canvasEl, previewObj);
-  }
-}
-if (!customElements.get("blurhash-image")) {
-  customElements.define("blurhash-image", ImageWithPreview);
-}
-const workerBlob = new Blob([document.querySelector("#next-blurhash-worker-script").textContent], {
-  type: "text/javascript"
-});
-function updateBlurHashPreview(canvasEl, preview) {
-  const {
-    w: width,
-    h: height,
-    blurhash
-  } = preview;
-  canvasEl.width = width;
-  canvasEl.height = height;
-  {
-    const worker = new Worker(window.URL.createObjectURL(workerBlob));
-    const s = +new Date();
-    const emptyCanv = document.createElement("canvas").transferControlToOffscreen();
-    worker.postMessage({
-      canvas: emptyCanv,
-      width: 50,
-      height: 50,
-      blurhash: "L05E$[offQofoffQfQfQfQfQfQfQ"
-    }, [emptyCanv]);
-    const e = +new Date();
-    console.log("bootstrap", e - s);
-    const offscreen = canvasEl.transferControlToOffscreen();
-    worker.postMessage({
-      canvas: offscreen,
-      width,
-      height,
-      blurhash
-    }, [offscreen]);
-  }
-} })();` },
+    dangerouslySetInnerHTML: { __html: `(() => { "use strict";class a extends HTMLElement{sd;mo;static observedAttributes=["preview"];#s=!1;get#e(){return this.querySelector("img")}get#t(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#i=()=>{if(this.#e&&this.#t)return this.mo?.disconnect(),this.#e.complete?this.#r():(this.#n(),this.#e.addEventListener("load",this.#r)),1};connectedCallback(){this.#s=!0,this.#i()||(this.mo=new MutationObserver(this.#i),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#r=()=>{this.sd.innerHTML='<slot name="image"></slot>'};attributeChangedCallback(e){this.#t&&e==="preview"&&this.#n()}#n(){if(!this.#s||!this.getAttribute("preview"))return;const e=JSON.parse(this.getAttribute("preview"));u(this.#t,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",a);const c=new Blob([document.querySelector("#next-blurhash-worker-script").textContent],{type:"text/javascript"}),o=new Worker(window.URL.createObjectURL(c)),n=document.createElement("canvas").transferControlToOffscreen();o.postMessage({canvas:n,width:25,height:25,blurhash:"L05E$[offQofoffQfQfQfQfQfQfQ"},[n]);function u(t,e){const{w:s,h:i,blurhash:h}=e;t.width=s,t.height=i;{const r=t.transferControlToOffscreen();o.postMessage({canvas:r,width:s,height:i,blurhash:h},[r])}} })();` },
   })
 );

package/package.json

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

package/vite.wc.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
       fileName: () => "imageWithPreview.js",
       name: "imageWithPreview",
     },
-    minify: false,
+    //minify: false,
   },
   plugins: [react()],
 });

package/vite.worker.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
       fileName: () => "workerScript.js",
       name: "workerScript",
     },
-    minify: false,
+    //minify: false,
   },
   plugins: [react()],
 });