next-blurhash-previews 0.0.3-beta66 → 0.0.3-beta69

package/bin/generateBlurhash.js

@@ -1,5 +1,6 @@
 import fs from "fs";
 import path from "path";
+import colors from "colors";
 
 import sharp from "sharp";
 import fetch from "node-fetch";
@@ -7,7 +8,7 @@ import { encode, isBlurhashValid } from "blurhash";
 
 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())
@@ -19,26 +20,36 @@ export async function getSharpImage(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("Trying preview", previewOption);
+    console.log(colors.blue("Trying preview", previewOption));
 
     if (fs.existsSync(previewOption)) {
-      console.log("Preview found");
-      return sharp(previewOption);
+      console.log(colors.green("Preview found"));
+
+      return [realImage, sharp(previewOption)];
     }
 
-    return sharp(imgPath);
+    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) => {
@@ -54,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

@@ -28,7 +28,7 @@ export const blurhashPlugin = publicPath => () => {
 
         const blurHash = await getBlurhash(imagePath);
 
-        const { w, h } = blurHash;
+        const { w, h, dw, dh } = blurHash;
 
         console.log(
           colors.green(`Finished processing ${imagePath}\n\t`, blurHash)
@@ -40,7 +40,7 @@ export const blurhashPlugin = publicPath => () => {
         const newNode = `
 <blurhash-image url="${originalImg}" preview='${JSON.stringify(blurHash)}'>
   <img alt="${alt}" width="${w}" height="${h}" src="${originalImg}" slot="image" />
-  <canvas width="${w}" height="${h}" slot="preview"></canvas>
+  <canvas width="${w}" height="${h}" style="width: ${dw}px; height: auto;" slot="preview"></canvas>
 </blurhash-image>`.trim();
 
         parent.children[index] = {

package/components/ImageWithPreview.tsx

@@ -72,18 +72,18 @@ 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));
+
 function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
   const { w: width, h: height, blurhash } = preview;
   canvasEl.width = width;
   canvasEl.height = height;
 
   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

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

package/imagePreviewBootstrap.js

@@ -3,91 +3,6 @@ import { createElement, Fragment } from "react";
 export const imagePreviewBootstrap = createElement(
   Fragment,
   {},
-  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);
-}
-function updateBlurHashPreview(canvasEl, preview) {
-  const {
-    w: width,
-    h: height,
-    blurhash
-  } = preview;
-  canvasEl.width = width;
-  canvasEl.height = height;
-  {
-    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.transferControlToOffscreen();
-    worker.postMessage({
-      canvas: offscreen,
-      width,
-      height,
-      blurhash
-    }, [offscreen]);
-  }
-} })();` },
-  }),
   createElement("script", {
     id: "next-blurhash-worker-script",
     type: "javascript/worker",
@@ -298,5 +213,90 @@ addEventListener("message", (evt) => {
   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));
+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/package.json

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