next-blurhash-previews 0.0.3-beta8 → 0.0.4-beta2

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/bin/generateBlurhash.js

@@ -1,11 +1,14 @@
+import fs from "fs";
+import path from "path";
+import colors from "colors";
+
 import sharp from "sharp";
 import fetch from "node-fetch";
 import { encode, isBlurhashValid } from "blurhash";
 
-import path from "path";
 const __dirname = process.cwd();
 
-export async function getSharpImage(imgPath) {
+async function getSharpImage(imgPath) {
   if (/^http/.test(imgPath)) {
     const buffer = await fetch(imgPath)
       .then(fetchResponse => fetchResponse.arrayBuffer())
@@ -13,18 +16,40 @@ export async function getSharpImage(imgPath) {
 
     return sharp(buffer);
   } else {
-    return sharp(imgPath);
+    const ext = path.extname(imgPath);
+    const dir = path.dirname(imgPath);
+    const basename = path.basename(imgPath, ext);
+
+    const realImage = sharp(imgPath);
+
+    const previewOption = path.join(dir, basename + "-preview" + ext);
+    console.log(colors.blue("Trying preview", previewOption));
+
+    if (fs.existsSync(previewOption)) {
+      console.log(colors.green("Preview found"));
+
+      return [realImage, sharp(previewOption)];
+    }
+
+    return [realImage];
   }
 }
 
 export async function getBlurhash(path) {
-  const blurhashImage = await getSharpImage(path);
+  const [blurhashImage, previewImage] = await getSharpImage(path);
   const dimensions = await blurhashImage.metadata();
 
-  const { width, height } = dimensions;
+  const { width: displayWidth, height: displayHeight } = dimensions;
+  let { width, height } = dimensions;
+
+  if (previewImage) {
+    const dimensions = await previewImage.metadata();
+
+    ({ width, height } = dimensions);
+  }
 
   return new Promise((res, rej) => {
-    blurhashImage
+    (previewImage ?? blurhashImage)
       .raw()
       .ensureAlpha()
       .toBuffer((err, buffer) => {
@@ -40,7 +65,13 @@ export async function getBlurhash(path) {
               4
             );
             if (isBlurhashValid(blurhash)) {
-              return res({ blurhash, w: width, h: height });
+              return res({
+                blurhash,
+                w: width,
+                h: height,
+                dw: displayWidth,
+                dh: displayHeight,
+              });
             } else {
               console.log("FAIL");
               return rej("FAIL");

package/bin/remark-plugin.js

@@ -10,7 +10,7 @@ export const blurhashPlugin = publicPath => () => {
     let outstanding = 0;
 
     visitParents(tree, "image", async (node, ancestors) => {
-      let { url: imagePath, alt } = node;
+      let { url: imagePath, alt = "" } = node;
 
       const originalImg = imagePath;
       if (!/http/.test(imagePath)) {
@@ -28,6 +28,8 @@ export const blurhashPlugin = publicPath => () => {
 
         const blurHash = await getBlurhash(imagePath);
 
+        const { w, h, dw, dh } = blurHash;
+
         console.log(
           colors.green(`Finished processing ${imagePath}\n\t`, blurHash)
         );
@@ -37,8 +39,8 @@ export const blurhashPlugin = publicPath => () => {
 
         const newNode = `
 <blurhash-image url="${originalImg}" preview='${JSON.stringify(blurHash)}'>
-  <img alt="${alt || ""}" src="${originalImg}" slot="image" />
-  <canvas width="${blurHash.w}" height="${blurHash.h}" slot="preview"></canvas>
+  <img alt="${alt}" width="${dw}" height="${dh}" src="${originalImg}" slot="image" />
+  <canvas width="${w}" height="${h}" style="width: ${dw}px; height: auto;" slot="preview"></canvas>
 </blurhash-image>`.trim();
 
         parent.children[index] = {

package/components/ImageWithPreview.tsx

@@ -1,13 +1,19 @@
-import { decode } from "../node_modules/blurhash/dist/esm/index";
-
+import { decode } from "blurhash/dist/esm";
 type blurhash = { w: number; h: number; blurhash: string };
 
+declare global {
+  interface HTMLCanvasElement {
+    transferControlToOffscreen(): this & Transferable;
+  }
+}
+
 class ImageWithPreview extends HTMLElement {
   sd: ShadowRoot;
   mo?: MutationObserver;
 
   static observedAttributes = ["preview"];
 
+  #connected = false;
   get #imgEl(): any {
     return this.querySelector("img");
   }
@@ -26,6 +32,11 @@ class ImageWithPreview extends HTMLElement {
     if (this.#imgEl && this.#canvasEl) {
       this.mo?.disconnect();
 
+      console.log("checkready", this.#imgEl.complete);
+
+      setInterval(() => {
+        console.log("checkready interval", this.#imgEl.complete);
+      }, 100);
       if (this.#imgEl.complete) {
         this.#imgLoad();
       } else {
@@ -33,11 +44,12 @@ class ImageWithPreview extends HTMLElement {
         this.#imgEl.addEventListener("load", this.#imgLoad);
       }
 
-      return true;
+      return 1;
     }
   };
 
   connectedCallback() {
+    this.#connected = true;
     if (!this.#checkReady()) {
       this.mo = new MutationObserver(this.#checkReady);
       this.mo.observe(this, {
@@ -49,6 +61,7 @@ class ImageWithPreview extends HTMLElement {
   }
 
   #imgLoad = () => {
+    console.log("imgLoad - should work", this.#imgEl.complete);
     this.sd.innerHTML = `<slot name="image"></slot>`;
   };
 
@@ -59,8 +72,16 @@ class ImageWithPreview extends HTMLElement {
   }
 
   #updatePreview() {
+    if (!this.#connected || !this.getAttribute("preview")) {
+      return;
+    }
+
     const previewObj = JSON.parse(this.getAttribute("preview")!);
-    updateBlurHashPreview(this.#canvasEl, previewObj);
+    updateBlurHashPreview(
+      this.hasAttribute("sync"),
+      this.#canvasEl,
+      previewObj
+    );
   }
 }
 
@@ -68,15 +89,36 @@ if (!customElements.get("blurhash-image")) {
   customElements.define("blurhash-image", ImageWithPreview);
 }
 
-function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
-  const { w: width, h: height } = preview;
-
+const workerBlob = new Blob(
+  [document.querySelector("#next-blurhash-worker-script")!.textContent!],
+  { type: "text/javascript" }
+);
+const worker = new Worker(window.URL.createObjectURL(workerBlob));
+
+function updateBlurHashPreview(
+  sync: boolean,
+  canvasEl: HTMLCanvasElement,
+  preview: blurhash
+) {
+  const { w: width, h: height, blurhash } = preview;
   canvasEl.width = width;
   canvasEl.height = height;
 
-  const pixels = decode(preview.blurhash, width, height);
-  const ctx = canvasEl.getContext("2d")!;
-  const imageData = ctx.createImageData(width, height);
-  imageData.data.set(pixels);
-  ctx.putImageData(imageData, 0, 0);
+  if (sync) {
+    const start = +new Date();
+
+    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);
+
+    const end = +new Date();
+    console.log("Done Encoding Sync", blurhash, end - start);
+  } else if (canvasEl.transferControlToOffscreen) {
+    const offscreen = canvasEl.transferControlToOffscreen();
+    worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
+      offscreen,
+    ]);
+  }
 }

package/components/NextWrapper.js

@@ -0,0 +1,29 @@
+import React, {
+  useEffect,
+  useRef,
+  createElement,
+  cloneElement,
+  Children,
+} from "react";
+
+export const NextWrapper = props => {
+  const wcRef = useRef(null);
+
+  const { blurhash, width, height } = props;
+
+  const json = JSON.stringify({ w: width, h: height, blurhash });
+  const wcProps = { preview: json };
+  if (props.sync) {
+    wcProps.sync = true;
+  }
+
+  return createElement(
+    "blurhash-image",
+    {
+      ref: wcRef,
+      ...wcProps,
+    },
+    cloneElement(Children.only(props.children), { slot: "image" }),
+    createElement("canvas", { width, height, slot: "preview" })
+  );
+};

package/components/imagePreviewBootstrap.tsx

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

package/components/workerScript.ts

@@ -0,0 +1,17 @@
+import { decode } from "blurhash/dist/esm";
+
+addEventListener("message", evt => {
+  console.log(evt);
+
+  const { canvas, width, height, blurhash } = evt.data;
+
+  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

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

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-blurhash-previews",
-  "version": "0.0.3-beta8",
+  "version": "0.0.4-beta2",
   "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"
   },
@@ -24,7 +24,7 @@
     "url": "https://github.com/arackaf/next-static-image-previews/issues"
   },
   "homepage": "https://github.com/arackaf/next-static-image-previews#readme",
-  "dependencies": {
+  "devDependencies": {
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^1.3.2",
@@ -32,9 +32,10 @@
     "colors": "^1.4.0",
     "glob": "^8.0.3",
     "install": "^0.13.0",
-    "next": "^12.2.0",
     "node-fetch": "^3.2.6",
     "npm": "^8.15.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "remark": "^14.0.2",
     "remark-frontmatter": "^4.0.1",
     "retext": "^8.1.0",

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.nextwrapper.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/NextWrapper.tsx",
+      formats: ["es"],
+      fileName: () => "NextWrapper.js",
+      name: "NextWrapper",
+    },
+    //minify: false,
+  },
+  plugins: [react()],
+});

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/.prettierrc

@@ -1,3 +0,0 @@
-{
-  "arrowParens": "avoid"
-}

package/components/NextWrapper.tsx

@@ -1,27 +0,0 @@
-import React, { useEffect, useRef } from "react";
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      ["blurhash-image"]: any;
-    }
-  }
-}
-
-export const ImageWithPreview = (props: any) => {
-  const wcRef = useRef<any>(null);
-
-  const { preview } = props;
-  const { w, h } = JSON.parse(preview);
-
-  useEffect(() => {
-    wcRef.current.activate();
-  }, []);
-
-  return (
-    <blurhash-image ref={wcRef} {...props}>
-      <img style={{ display: "none" }} />
-      <canvas width={w} height={h}></canvas>
-    </blurhash-image>
-  );
-};

package/junk.js

@@ -1 +0,0 @@
-"use strict";var B=Object.defineProperty;var T=(t,e,s)=>e in t?B(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s;var a=(t,e,s)=>(T(t,typeof e!="symbol"?e+"":e,s),s);const k=["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","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],h=t=>{let e=0;for(let s=0;s<t.length;s++){const n=t[s],o=k.indexOf(n);e=e*83+o}return e},p=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)},A=t=>t<0?-1:1,v=(t,e)=>A(t)*Math.pow(Math.abs(t),e);class C extends Error{constructor(e){super(e),this.name="ValidationError",this.message=e}}const G=t=>{if(!t||t.length<6)throw new C("The blurhash string must be at least 6 characters");const e=h(t[0]),s=Math.floor(e/9)+1,n=e%9+1;if(t.length!==4+2*n*s)throw new C(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*n*s}\`)},V=t=>{const e=t>>16,s=t>>8&255,n=t&255;return[p(e),p(s),p(n)]},D=(t,e)=>{const s=Math.floor(t/361),n=Math.floor(t/19)%19,o=t%19;return[v((s-9)/9,2)*e,v((n-9)/9,2)*e,v((o-9)/9,2)*e]},H=(t,e,s,n)=>{G(t),n=n|1;const o=h(t[0]),c=Math.floor(o/9)+1,l=o%9+1,x=(h(t[1])+1)/166,g=new Array(l*c);for(let r=0;r<g.length;r++)if(r===0){const i=h(t.substring(2,6));g[r]=V(i)}else{const i=h(t.substring(4+r*2,6+r*2));g[r]=D(i,x*n)}const d=e*4,u=new Uint8ClampedArray(d*s);for(let r=0;r<s;r++)for(let i=0;i<e;i++){let y=0,E=0,I=0;for(let m=0;m<c;m++)for(let f=0;f<l;f++){const w=Math.cos(Math.PI*i*f/e)*Math.cos(Math.PI*r*m/s);let M=g[f+m*l];y+=M[0]*w,E+=M[1]*w,I+=M[2]*w}let L=b(y),P=b(E),q=b(I);u[4*i+0+r*d]=L,u[4*i+1+r*d]=P,u[4*i+2+r*d]=q,u[4*i+3+r*d]=255}return u};class R extends HTMLElement{constructor(){super();a(this,"isReady",!1);a(this,"loaded",!1);a(this,"sd");a(this,"mo");a(this,"checkReady",()=>{this.currentImageEl&&this.currentCanvasEl&&(this.ready(),this.mo.disconnect())});a(this,"onImageLoad",()=>{this.getAttribute("url")!==this.currentImageEl.src&&setTimeout(()=>{this.loaded=!0,this.render()},1500)});this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}get currentImageEl(){return this.querySelector("img")}get currentCanvasEl(){return this.querySelector("canvas")}connectedCallback(){this.mo=new MutationObserver(this.checkReady),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1})}ready(){this.isReady=!0,this.currentImageEl.complete&&this.onImageLoad(),this.currentImageEl.addEventListener("load",this.onImageLoad),this.loaded||this.updatePreview()}attributeChangedCallback(s,n,o){!this.isReady||(s==="preview"?this.updatePreview():s==="url"&&(this.loaded=!1),this.render())}updatePreview(){const s=JSON.parse(this.getAttribute("preview"));O(this.currentCanvasEl,s)}render(){this.sd.innerHTML=\`<slot name="\${this.loaded?"image":"preview"}"></slot>\`}}a(R,"observedAttributes",["preview","url"]);customElements.get("uikit-image")||customElements.define("uikit-image",R);function O(t,e){const{w:s,h:n}=e;t.width=s,t.height=n;const o=H(e.blurhash,s,n),c=t.getContext("2d"),l=c.createImageData(s,n);l.data.set(o),c.putImageData(l,0,0)}

package/next-runner/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

package/next-runner/README.md

@@ -1,34 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.