next-blurhash-previews 0.0.3-beta7 → 0.0.3-beta72

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="${w}" height="${h}" 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,5 +1,3 @@
-import { decode } from "../node_modules/blurhash/dist/esm/index";
-
 type blurhash = { w: number; h: number; blurhash: string };
 
 class ImageWithPreview extends HTMLElement {
@@ -8,6 +6,7 @@ class ImageWithPreview extends HTMLElement {
 
   static observedAttributes = ["preview"];
 
+  #connected = false;
   get #imgEl(): any {
     return this.querySelector("img");
   }
@@ -33,11 +32,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, {
@@ -59,6 +59,10 @@ class ImageWithPreview extends HTMLElement {
   }
 
   #updatePreview() {
+    if (!this.#connected || !this.getAttribute("preview")) {
+      return;
+    }
+
     const previewObj = JSON.parse(this.getAttribute("preview")!);
     updateBlurHashPreview(this.#canvasEl, previewObj);
   }
@@ -68,15 +72,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));
+
+const emptyCanvas = document
+  .createElement("canvas")
+  // @ts-ignore
+  .transferControlToOffscreen();
+
+worker.postMessage(
+  {
+    canvas: emptyCanvas,
+    width: 50,
+    height: 50,
+    blurhash: "L05E$[offQofoffQfQfQfQfQfQfQ",
+  },
+  [emptyCanvas]
+);
 
+function updateBlurHashPreview(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 (true) {
+    const offscreen = (canvasEl as any).transferControlToOffscreen();
+    worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
+      offscreen,
+    ]);
+  }
 }

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,309 @@
+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 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);
+}); })();` },
+  }),
+  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"
+});
+const worker = new Worker(window.URL.createObjectURL(workerBlob));
+const emptyCanvas = document.createElement("canvas").transferControlToOffscreen();
+worker.postMessage({
+  canvas: emptyCanvas,
+  width: 50,
+  height: 50,
+  blurhash: "L05E$[offQofoffQfQfQfQfQfQfQ"
+}, [emptyCanvas]);
+function updateBlurHashPreview(canvasEl, preview) {
+  const {
+    w: width,
+    h: height,
+    blurhash
+  } = preview;
+  canvasEl.width = width;
+  canvasEl.height = height;
+  {
+    const offscreen = canvasEl.transferControlToOffscreen();
+    worker.postMessage({
+      canvas: offscreen,
+      width,
+      height,
+      blurhash
+    }, [offscreen]);
+  }
+} })();` },
+  })
+);

package/index.js

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

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "next-blurhash-previews",
-  "version": "0.0.3-beta7",
+  "version": "0.0.3-beta72",
   "description": "",
   "main": "index.js",
+  "module": "index.js",
   "bin": {
     "blurhash-markdown": "./bin/markdown-sync.js"
   },
   "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"
   },
@@ -31,7 +32,6 @@
     "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",
     "remark": "^14.0.2",

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"],
-    },
+    minify: false,
   },
-  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"
-}