next-blurhash-previews 0.0.3-beta51 → 0.0.3-beta54

package/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "vsicons.associations.files": [
+    {
+      "icon": "vite",
+      "extensions": ["vite.worker.config.ts"],
+      "filename": true
+    },
+    { "icon": "vite", "extensions": ["vite.wc.config.ts"], "filename": true }
+  ]
+}

package/components/ImageWithPreview.tsx

@@ -1,5 +1,3 @@
-import { decode } from "blurhash/dist/esm";
-
 type blurhash = { w: number; h: number; blurhash: string };
 
 class ImageWithPreview extends HTMLElement {
@@ -34,7 +32,7 @@ class ImageWithPreview extends HTMLElement {
         this.#imgEl.addEventListener("load", this.#imgLoad);
       }
 
-      return true;
+      return 1;
     }
   };
 
@@ -51,9 +49,7 @@ class ImageWithPreview extends HTMLElement {
   }
 
   #imgLoad = () => {
-    setTimeout(() => {
-      this.sd.innerHTML = `<slot name="image"></slot>`;
-    }, 19000);
+    this.sd.innerHTML = `<slot name="image"></slot>`;
   };
 
   attributeChangedCallback(name) {
@@ -81,17 +77,16 @@ function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
   canvasEl.width = width;
   canvasEl.height = height;
 
-  const worker = new Worker("/canvas-worker.js");
-
-  const offscreen = (canvasEl as any).transferControlToOffscreen();
-  worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
-    offscreen,
-  ]);
-
-  return;
-  const pixels = decode(blurhash, width, height);
-  const ctx = canvasEl.getContext("2d")!;
-  const imageData = ctx.createImageData(width, height);
-  imageData.data.set(pixels);
-  ctx.putImageData(imageData, 0, 0);
+  if (true) {
+    const workerBlob = new Blob(
+      [document.querySelector("#next-blurhash-worker-script")!.textContent!],
+      { type: "text/javascript" }
+    );
+
+    const worker = new Worker(window.URL.createObjectURL(workerBlob));
+    const offscreen = (canvasEl as any).transferControlToOffscreen();
+    worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
+      offscreen,
+    ]);
+  }
 }

package/components/imagePreviewBootstrap.tsx

@@ -1,5 +1,14 @@
-import { createElement } from "react";
+import { createElement, Fragment } from "react";
 
-export const imagePreviewBootstrap = createElement("script", {
-  dangerouslySetInnerHTML: { __html: `(() => { /*HERE*/ })();` },
-});
+export const imagePreviewBootstrap = createElement(
+  Fragment,
+  {},
+  createElement("script", {
+    dangerouslySetInnerHTML: { __html: `(() => { /*WC*/ })();` },
+  }),
+  createElement("script", {
+    id: "next-blurhash-worker-script",
+    type: "javascript/worker",
+    dangerouslySetInnerHTML: { __html: `(() => { /*WORKER*/ })();` },
+  })
+);

package/components/workerScript.ts

@@ -0,0 +1,20 @@
+import { decode } from "blurhash/dist/esm";
+
+addEventListener("message", evt => {
+  console.log(evt);
+
+  const { canvas, width, height, blurhash } = evt.data;
+
+  const p = new Promise(res => setTimeout(res, 5000));
+  Promise.resolve(p).then(() => {
+    console.log("Encoding", blurhash);
+    const start = +new Date();
+    const pixels = decode(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);
+  });
+});

package/imagePreviewBootstrap.js

@@ -1,5 +1,14 @@
-import { createElement } from "react";
+import { createElement, Fragment } from "react";
 
-export const imagePreviewBootstrap = createElement("script", {
-  dangerouslySetInnerHTML: { __html: `(() => { "use strict";class o 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.#h(),this.#e.addEventListener("load",this.#r)),!0};connectedCallback(){this.#s=!0,this.#i()||(this.mo=new MutationObserver(this.#i),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#r=()=>{setTimeout(()=>{this.sd.innerHTML='<slot name="image"></slot>'},19e3)};attributeChangedCallback(e){this.#t&&e==="preview"&&this.#h()}#h(){if(!this.#s||!this.getAttribute("preview"))return;const e=JSON.parse(this.getAttribute("preview"));a(this.#t,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",o);function a(t,e){const{w:s,h:i,blurhash:h}=e;t.width=s,t.height=i;const n=new Worker("/canvas-worker.js"),r=t.transferControlToOffscreen();n.postMessage({canvas:r,width:s,height:i,blurhash:h},[r])} })();` },
-});
+export const imagePreviewBootstrap = createElement(
+  Fragment,
+  {},
+  createElement("script", {
+    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.#h(),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.#h()}#h(){if(!this.#s||!this.getAttribute("preview"))return;const e=JSON.parse(this.getAttribute("preview"));c(this.#t,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",a);function c(t,e){const{w:s,h:i,blurhash:h}=e;t.width=s,t.height=i;{const n=new Blob([document.querySelector("#next-blurhash-worker-script").textContent],{type:"text/javascript"}),o=new Worker(window.URL.createObjectURL(n)),r=t.transferControlToOffscreen();o.postMessage({canvas:r,width:s,height:i,blurhash:h},[r])}} })();` },
+  }),
+  createElement("script", {
+    id: "next-blurhash-worker-script",
+    type: "javascript/worker",
+    dangerouslySetInnerHTML: { __html: `(() => { "use strict";const v=["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 e=0;e<t.length;e++){const o=t[e],c=v.indexOf(o);n=n*83+c}return n},x=t=>{let n=t/255;return n<=.04045?n/12.92:Math.pow((n+.055)/1.055,2.4)},p=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)},y=t=>t<0?-1:1,D=(t,n)=>y(t)*Math.pow(Math.abs(t),n);class R extends Error{constructor(n){super(n),this.name="ValidationError",this.message=n}}const I=t=>{if(!t||t.length<6)throw new R("The blurhash string must be at least 6 characters");const n=u(t[0]),e=Math.floor(n/9)+1,o=n%9+1;if(t.length!==4+2*o*e)throw new R(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*o*e}\`)},T=t=>{const n=t>>16,e=t>>8&255,o=t&255;return[x(n),x(e),x(o)]},A=(t,n)=>{const e=Math.floor(t/361),o=Math.floor(t/19)%19,c=t%19;return[D((e-9)/9,2)*n,D((o-9)/9,2)*n,D((c-9)/9,2)*n]},V=(t,n,e,o)=>{I(t),o=o|1;const c=u(t[0]),d=Math.floor(c/9)+1,r=c%9+1,h=(u(t[1])+1)/166,i=new Array(r*d);for(let s=0;s<i.length;s++)if(s===0){const a=u(t.substring(2,6));i[s]=T(a)}else{const a=u(t.substring(4+s*2,6+s*2));i[s]=A(a,h*o)}const l=n*4,g=new Uint8ClampedArray(l*e);for(let s=0;s<e;s++)for(let a=0;a<n;a++){let B=0,E=0,P=0;for(let m=0;m<d;m++)for(let M=0;M<r;M++){const f=Math.cos(Math.PI*a*M/n)*Math.cos(Math.PI*s*m/e);let w=i[M+m*r];B+=w[0]*f,E+=w[1]*f,P+=w[2]*f}let q=p(B),C=p(E),G=p(P);g[4*a+0+s*l]=q,g[4*a+1+s*l]=C,g[4*a+2+s*l]=G,g[4*a+3+s*l]=255}return g};var $=V;addEventListener("message",t=>{console.log(t);const{canvas:n,width:e,height:o,blurhash:c}=t.data,d=new Promise(r=>setTimeout(r,5e3));Promise.resolve(d).then(()=>{console.log("Encoding",c);const r=+new Date,b=$(c,e,o),h=n.getContext("2d"),i=h.createImageData(e,o);i.data.set(b),h.putImageData(i,0,0);const l=+new Date;console.log("Done Encoding",c,l-r)})}); })();` },
+  })
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-blurhash-previews",
-  "version": "0.0.3-beta51",
+  "version": "0.0.3-beta54",
   "description": "",
   "main": "index.js",
   "module": "index.js",
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "vite build",
+    "build": "rm -rf build && vite build --config vite.wc.config.ts && vite build --config vite.worker.config.ts && node util/setBootstrap.js",
     "build-watch": "vite build -w",
     "prepare": "npm run build"
   },

package/util/setBootstrap.js

@@ -1,22 +1,21 @@
 import fs from "fs";
 
-export default function writeBootstrapScript() {
-  return {
-    name: "write-bootstrap-script",
-    closeBundle() {
-      let BootstrapModule = fs.readFileSync(
-        "./components/imagePreviewBootstrap.tsx",
-        "utf8"
-      );
-      const bootstrapScript = fs.readFileSync(
-        "./build/imageWithPreview.js",
-        "utf8"
-      );
-      BootstrapModule = BootstrapModule.replace(
-        "/*HERE*/",
-        bootstrapScript.replace(/[\r\n]\s*$/, "").replace(/`/g, "\\`")
-      ).replace(/\${/g, "\\${");
-      fs.writeFileSync("./imagePreviewBootstrap.js", BootstrapModule);
-    },
-  };
-}
+let BootstrapModule = fs.readFileSync(
+  "./components/imagePreviewBootstrap.tsx",
+  "utf8"
+);
+
+const wcScript = fs.readFileSync("./build/imageWithPreview.js", "utf8");
+const workerScript = fs.readFileSync("./build/workerScript.js", "utf8");
+
+BootstrapModule = BootstrapModule.replace(
+  "/*WC*/",
+  wcScript.replace(/[\r\n]\s*$/, "").replace(/`/g, "\\`")
+)
+  .replace(
+    "/*WORKER*/",
+    workerScript.replace(/[\r\n]\s*$/, "").replace(/`/g, "\\`")
+  )
+  .replace(/\${/g, "\\${");
+
+fs.writeFileSync("./imagePreviewBootstrap.js", BootstrapModule);

package/{vite.config.ts → vite.wc.config.ts}

@@ -1,21 +1,18 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import writeBootstrapPlugin from "./util/setBootstrap";
 
 export default defineConfig({
   build: {
     target: "es2022",
     outDir: "./build",
+    emptyOutDir: false,
     lib: {
-      entry: "components/imageWithPreview.tsx",
+      entry: "components/ImageWithPreview.tsx",
       formats: ["cjs"],
       fileName: () => "imageWithPreview.js",
       name: "imageWithPreview",
     },
     //minify: false,
-    rollupOptions: {
-      external: ["react", "react-dom", "next", "next/script"],
-    },
   },
-  plugins: [react(), writeBootstrapPlugin()],
+  plugins: [react()],
 });

package/vite.worker.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  build: {
+    target: "es2022",
+    outDir: "./build",
+    emptyOutDir: false,
+    lib: {
+      entry: "components/workerScript.ts",
+      formats: ["cjs"],
+      fileName: () => "workerScript.js",
+      name: "workerScript",
+    },
+    //minify: false,
+  },
+  plugins: [react()],
+});

package/vite.b.config.ts

@@ -1,40 +0,0 @@
-import { defineConfig } from "vite";
-// @ts-ignore
-import path from "path";
-import react from "@vitejs/plugin-react";
-import writeBootstrapPlugin from "./util/setBootstrap";
-
-export default defineConfig({
-  build: {
-    target: "es2022",
-    outDir: "./build",
-
-    // lib: {
-    //   entry: "components/imageWithPreview.tsx",
-    //   formats: ["cjs"],
-    //   fileName: (a, b, c) => {
-    //     console.log("mm", a, b, c);
-    //     return "imageWithPreview.js";
-    //   },
-    //   name: "imageWithPreview",
-    // },
-    minify: false,
-    rollupOptions: {
-      input: {
-        imageWithPreview: path.resolve(
-          // @ts-ignore
-          __dirname,
-          "components/imageWithPreview.tsx"
-        ),
-      },
-      output: {
-        dir: "./build/",
-
-        //file: "imageWithPreview.js",
-        // file: (a, b, c) => { console.log(a, b, c); return "imageWithPreview.js"; }
-      },
-      external: ["react", "react-dom", "next", "next/script"],
-    },
-  },
-  plugins: [react(), writeBootstrapPlugin()],
-});