next-blurhash-previews 0.0.1 → 0.0.3-beta2

package/.prettierrc

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

package/bin/generateBlurhash.js

@@ -0,0 +1,55 @@
+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) {
+  if (/^http/.test(imgPath)) {
+    const buffer = await fetch(imgPath)
+      .then(fetchResponse => fetchResponse.arrayBuffer())
+      .then(ab => Buffer.from(ab));
+
+    return sharp(buffer);
+  } else {
+    return sharp(imgPath);
+  }
+}
+
+export async function getBlurhash(path) {
+  const blurhashImage = await getSharpImage(path);
+  const dimensions = await blurhashImage.metadata();
+
+  const { width, height } = dimensions;
+
+  return new Promise((res, rej) => {
+    blurhashImage
+      .raw()
+      .ensureAlpha()
+      .toBuffer((err, buffer) => {
+        try {
+          if (err) {
+            console.log("Error getting buffer", err);
+          } else {
+            const blurhash = encode(
+              new Uint8ClampedArray(buffer),
+              width,
+              height,
+              4,
+              4
+            );
+            if (isBlurhashValid(blurhash)) {
+              return res({ blurhash, w: width, h: height });
+            } else {
+              console.log("FAIL");
+              return rej("FAIL");
+            }
+          }
+        } catch (err) {
+          console.log("FAIL", err);
+          return rej("FAIL", err);
+        }
+      });
+  });
+}

package/bin/markdown-sync.js

@@ -2,24 +2,54 @@
 
 import fs from "fs";
 import path, { dirname } from "path";
+import { fileURLToPath } from "url";
+
 import { reporter } from "vfile-reporter";
 import { remark } from "remark";
+import glob from "glob";
+import colors from "colors";
 
-import retextSentenceSpacing from "../plugin.js";
+import { blurhashPlugin } from "./remark-plugin.js";
 
-import { fileURLToPath } from "url";
-const __filename = fileURLToPath(import.meta.url);
+const directoryProcess = process.cwd();
+
+const allArgs = process.argv;
+const inputGlob = allArgs.at(-1);
+
+const files = glob.sync(inputGlob, { root: directoryProcess });
 
-const __dirname = dirname(__filename);
-const buffer = fs.readFileSync(path.join(__dirname, "example.md"));
+const publicPath = path.resolve(directoryProcess, "public");
+
+if (fs.existsSync(publicPath)) {
+  run();
+} else {
+  console.log(
+    colors.red(
+      `\nERROR: Could not find Next's public directory to resolve images from. Looking for:\n\n${publicPath}\n\nEnsure you run this command from your Next application.\n`
+    )
+  );
+}
+
+async function runFile(file) {
+  const buffer = fs.readFileSync(file);
+
+  return new Promise(res => {
+    remark()
+      .use(blurhashPlugin(publicPath))
+      .process(buffer)
+      .then(outputFile => {
+        fs.writeFileSync(file, outputFile.toString());
+        res();
+      });
+  });
+}
 
 async function run() {
-  remark()
-    .use(retextSentenceSpacing)
-    .process(buffer)
-    .then((file) => {
-      fs.writeFileSync("output.md", file.toString());
-    });
+  for (const file of files) {
+    console.log(colors.blue(`Processing file: ${file}\n`));
+    await runFile(file);
+    console.log(colors.blue(`${file} finished\n`));
+  }
 }
 
-run();
+//run();

package/bin/remark-plugin.js

@@ -0,0 +1,63 @@
+import path from "path";
+import { visitParents } from "unist-util-visit-parents";
+import prettier from "prettier";
+
+import colors from "colors";
+
+import { getBlurhash } from "./generateBlurhash.js";
+
+export const blurhashPlugin = publicPath => () => {
+  return (tree, file, done) => {
+    let outstanding = 0;
+
+    visitParents(tree, "image", async (node, ancestors) => {
+      let { url: imagePath, alt } = node;
+
+      const originalImg = imagePath;
+      if (!/http/.test(imagePath)) {
+        imagePath = path.resolve(publicPath, imagePath);
+      }
+
+      console.log(colors.blue(`Attempting ${imagePath}...`));
+
+      try {
+        outstanding++;
+
+        const blurHash = await getBlurhash(imagePath);
+
+        console.log(
+          colors.green(`Finished processing ${imagePath}\n\t`, blurHash)
+        );
+
+        const parent = ancestors[ancestors.length - 1];
+        const index = parent.children.indexOf(node);
+
+        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>
+</blurhash-image>`.trim();
+
+        parent.children[index] = {
+          type: "html",
+          value: prettier.format(newNode, { parser: "html" }).trimEnd(),
+        };
+      } catch (er) {
+        console.log(colors.red(`Error processing ${imagePath}\n\t`, er));
+      } finally {
+        outstanding--;
+        setTimeout(() => {
+          if (outstanding === 0) {
+            done();
+          }
+        }, 1);
+      }
+    });
+
+    setTimeout(() => {
+      if (outstanding === 0) {
+        done();
+      }
+    }, 1);
+  };
+};

package/components/ImageWithPreview.tsx

@@ -3,17 +3,15 @@ import { decode } from "../node_modules/blurhash/dist/esm/index";
 type blurhash = { w: number; h: number; blurhash: string };
 
 class ImageWithPreview extends HTMLElement {
-  isReady: boolean = false;
-  loaded: boolean = false;
   sd: ShadowRoot;
   mo?: MutationObserver;
 
-  static observedAttributes = ["preview", "url"];
+  static observedAttributes = ["preview"];
 
-  get imgEl(): any {
+  get #imgEl(): any {
     return this.querySelector("img");
   }
-  get canvasEl(): any {
+  get #canvasEl(): any {
     return this.querySelector("canvas");
   }
 
@@ -24,65 +22,50 @@ class ImageWithPreview extends HTMLElement {
     this.sd.innerHTML = `<slot name="preview"></slot>`;
   }
 
-  checkReady = () => {
-    if (this.imgEl && this.canvasEl) {
-      this.ready();
+  #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 true;
     }
-    return this.isReady;
   };
 
   connectedCallback() {
-    if (!this.checkReady()) {
-      this.mo = new MutationObserver(this.checkReady);
-      this.mo.observe(this, { subtree: true, childList: true, attributes: false });
+    if (!this.#checkReady()) {
+      this.mo = new MutationObserver(this.#checkReady);
+      this.mo.observe(this, {
+        subtree: true,
+        childList: true,
+        attributes: false,
+      });
     }
   }
 
-  ready() {
-    this.isReady = true;
-    this.updatePreview();
-    if (this.imgEl.complete) {
-      this.onImageLoad();
-    }
-    this.imgEl.addEventListener("load", this.onImageLoad);
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (!this.isReady) {
-      return;
-    }
+  #imgLoad = () => {
+    this.sd.innerHTML = `<slot name="image"></slot>`;
+  };
 
-    if (name === "preview") {
-      this.updatePreview();
-    } else if (name === "url") {
-      this.loaded = false;
+  attributeChangedCallback(name) {
+    if (this.#canvasEl && name === "preview") {
+      this.#updatePreview();
     }
-
-    this.render();
   }
 
-  updatePreview() {
+  #updatePreview() {
     const previewObj = JSON.parse(this.getAttribute("preview")!);
-    updateBlurHashPreview(this.canvasEl, previewObj);
-  }
-
-  onImageLoad = () => {
-    if (this.getAttribute("url") !== this.imgEl.src) {
-      setTimeout(() => {
-        this.loaded = true;
-        this.render();
-      }, 1500);
-    }
-  };
-
-  render() {
-    this.sd.innerHTML = `<slot name="${this.loaded ? "image" : "preview"}"></slot>`;
+    updateBlurHashPreview(this.#canvasEl, previewObj);
   }
 }
 
-if (!customElements.get("uikit-image")) {
-  customElements.define("uikit-image", ImageWithPreview);
+if (!customElements.get("blurhash-image")) {
+  customElements.define("blurhash-image", ImageWithPreview);
 }
 
 function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {

package/components/NextWrapper.tsx

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

package/next-runner/blog-posts/post1.md

@@ -0,0 +1,11 @@
+![A](./img1.png)
+
+<some-component>
+  <p>Hello</p>
+</some-component>
+
+Yo
+
+![external image](https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg)
+
+![](./img1.png)

package/next-runner/blog-posts/post2.md

@@ -0,0 +1,10 @@
+![A](./img1.png)
+
+<some-component>
+  <p>Hello</p>
+</some-component>
+
+Yo
+
+![external image](https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg)
+

package/next-runner/blog-posts/post3.md

@@ -0,0 +1,10 @@
+![A](./img1.png)
+
+<some-component>
+  <p>Hello</p>
+</some-component>
+
+Yo
+
+![external image](https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg)
+

package/next-runner/blog-posts/post4.md

@@ -0,0 +1,10 @@
+![A](./img1.png)
+
+<some-component>
+  <p>Hello</p>
+</some-component>
+
+Yo
+
+![external image](https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg)
+

package/next-runner/package-lock.json

@@ -21,10 +21,17 @@
       }
     },
     "..": {
-      "version": "0.0.4",
+      "version": "0.0.1",
       "license": "ISC",
       "dependencies": {
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6",
+        "@vitejs/plugin-react": "^1.3.2",
         "blurhash": "^1.1.5",
+        "colors": "^1.4.0",
+        "glob": "^8.0.3",
+        "next": "^12.2.0",
+        "node-fetch": "^3.2.6",
         "node-html-parser": "^5.3.3",
         "prettier": "^2.7.1",
         "remark": "^14.0.2",
@@ -33,10 +40,11 @@
         "to-vfile": "^7.2.3",
         "unist-util-visit": "^4.1.0",
         "unist-util-visit-parents": "^5.1.0",
-        "vfile-reporter": "^7.0.4"
+        "vfile-reporter": "^7.0.4",
+        "vite": "^2.9.13"
       },
       "bin": {
-        "next-static-markdown-previews": "index.js"
+        "next-blurhash-markdown": "bin/markdown-sync.js"
       }
     },
     "node_modules/@babel/runtime": {
@@ -2167,7 +2175,7 @@
         }
       }
     },
-    "node_modules/next-static-image-previews": {
+    "node_modules/next-blurhash-previews": {
       "resolved": "..",
       "link": true
     },
@@ -4481,10 +4489,17 @@
         "use-sync-external-store": "1.1.0"
       }
     },
-    "next-static-image-previews": {
+    "next-blurhash-previews": {
       "version": "file:..",
       "requires": {
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6",
+        "@vitejs/plugin-react": "^1.3.2",
         "blurhash": "^1.1.5",
+        "colors": "^1.4.0",
+        "glob": "^8.0.3",
+        "next": "^12.2.0",
+        "node-fetch": "^3.2.6",
         "node-html-parser": "^5.3.3",
         "prettier": "^2.7.1",
         "remark": "^14.0.2",
@@ -4493,7 +4508,8 @@
         "to-vfile": "^7.2.3",
         "unist-util-visit": "^4.1.0",
         "unist-util-visit-parents": "^5.1.0",
-        "vfile-reporter": "^7.0.4"
+        "vfile-reporter": "^7.0.4",
+        "vite": "^2.9.13"
       }
     },
     "object-assign": {

package/next-runner/pages/_document.js

@@ -1,7 +1,5 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
-import { imagePreviewBootstrap, src } from "next-static-image-previews";
-
-import Script from "next/script";
+import { imagePreviewBootstrap, src } from "next-blurhash-previews";
 
 export default class MyDocument extends Document {
   render() {

package/next-runner/pages/index.js

@@ -11,16 +11,37 @@ export default function Home() {
     <div className={styles.container}>
       Root
       <br />
-      <button onClick={() => setVal((x) => x + 1)}>Refresh</button>
+      <button onClick={() => setVal(x => x + 1)}>Refresh</button>
       {val}
-      <uikit-image key={val} url="/dynamo-introduction/img1.png" preview='{ "w": 364, "h": 196, "blurhash": "L8S6SsD*%gt7IVM|tRRj~qWBM{NG" }'>
-        <img slot="image" src="/dynamo-introduction/img1.png" />
-        <canvas slot="preview" width="364" height="196"></canvas>
-      </uikit-image>
-      <uikit-image key={val + 9} url="/dynamo-introduction/img5a.png" preview='{ "w": 2244, "h": 622, "blurhash": "LnPGmj_zIA:KS}j[s:ay-VWVRjay" }'>
-        <img slot="image" src="/dynamo-introduction/img5a.png" />
-        <canvas slot="preview" width="2244" height="622"></canvas>
-      </uikit-image>
+      <div style={{ display: "flex" }}>
+        <blurhash-image
+          key={val}
+          url="/dynamo-introduction/img1.png"
+          preview='{ "w": 364, "h": 196, "blurhash": "L8S6SsD*%gt7IVM|tRRj~qWBM{NG" }'
+        >
+          <img slot="image" src="/dynamo-introduction/img1.png" />
+          <canvas slot="preview" width="364" height="196"></canvas>
+        </blurhash-image>
+        <blurhash-image
+          key={val + 2}
+          url="/dynamo-introduction/img5a.png"
+          preview='{ "w": 500, "h": 139, "blurhash": "LnPGmj_zIA:KS}j[s:ay-VWVRjay" }'
+        >
+          <img slot="image" src="/dynamo-introduction/img5a.png" />
+          <canvas slot="preview" width="500" height="139"></canvas>
+        </blurhash-image>
+        <blurhash-image
+          key={val + 5}
+          url="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
+          preview='{ "w": 106, "h": 160, "blurhash": "U38|kkTJ01}A;{Or57;N01NG+?IW01rX^NAW" }'
+        >
+          <img
+            slot="image"
+            src="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
+          />
+          <canvas slot="preview" width="106" height="160"></canvas>
+        </blurhash-image>
+      </div>
     </div>
   );
 }

package/next-runner/styles/Home.module.css

@@ -0,0 +1,3 @@
+.container {
+  margin: 15px;
+}

package/next-runner/yarn.lock

@@ -1122,11 +1122,15 @@
   "resolved" "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   "version" "1.4.0"
 
-"next-static-image-previews@file:/Users/arackis/Documents/git/next-static-image-previews":
+"next-blurhash-previews@file:/Users/arackis/Documents/git/next-blurhash-previews":
   "resolved" "file:.."
-  "version" "0.0.4"
+  "version" "0.0.1"
   dependencies:
+    "@types/react" "^18.0.15"
+    "@types/react-dom" "^18.0.6"
+    "@vitejs/plugin-react" "^1.3.2"
     "blurhash" "^1.1.5"
+    "next" "^12.2.0"
     "node-html-parser" "^5.3.3"
     "prettier" "^2.7.1"
     "remark" "^14.0.2"
@@ -1136,6 +1140,7 @@
     "unist-util-visit" "^4.1.0"
     "unist-util-visit-parents" "^5.1.0"
     "vfile-reporter" "^7.0.4"
+    "vite" "^2.9.13"
 
 "next@12.2.0":
   "integrity" "sha512-B4j7D3SHYopLYx6/Ark0fenwIar9tEaZZFAaxmKjgcMMexhVJzB3jt7X+6wcdXPPMeUD6r09weUtnDpjox/vIA=="

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "next-blurhash-previews",
-  "version": "0.0.1",
+  "version": "0.0.3-beta2",
   "description": "",
   "main": "index.js",
   "bin": {
-    "next-static-markdown-previews": "./bin/markdown-sync.js"
+    "next-blurhash-markdown": "./bin/markdown-sync.js"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "vite build",
-    "build-watch": "vite build -w"
+    "build-watch": "vite build -w",
+    "prepare": "npm run build"
   },
   "type": "module",
   "repository": {
@@ -27,8 +28,10 @@
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^1.3.2",
     "blurhash": "^1.1.5",
+    "colors": "^1.4.0",
+    "glob": "^8.0.3",
     "next": "^12.2.0",
-    "node-html-parser": "^5.3.3",
+    "node-fetch": "^3.2.6",
     "prettier": "^2.7.1",
     "remark": "^14.0.2",
     "retext": "^8.1.0",

package/util/setBootstrap.js

@@ -4,9 +4,18 @@ 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, "\\${");
+      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);
     },
   };

package/vite.config.ts

@@ -7,9 +7,9 @@ export default defineConfig({
     target: "es2022",
     outDir: "./build",
     lib: {
-      entry: "components/ImageWithPreview.tsx",
+      entry: "components/imageWithPreview.tsx",
       formats: ["cjs"],
-      fileName: () => "ImageWithPreview.js",
+      fileName: () => "imageWithPreview.js",
       name: "imageWithPreview",
     },
     //minify: false,

package/example.md

@@ -1,9 +0,0 @@
-![A](./img1.png)
-
-<some-component>
-  <p>Hello</p>
-</some-component>
-
-Yo
-
-![Query execution plan](/img5.png)

package/output.md

@@ -1,15 +0,0 @@
-<div>
-  <img />
-  <span>Hey there 2</span>
-</div>
-
-<some-component>
-  <p>Hello</p>
-</some-component>
-
-Yo
-
-<div>
-  <img />
-  <span>Hey there 2</span>
-</div>

package/plugin.js

@@ -1,78 +0,0 @@
-import fs from "fs";
-import path, { dirname } from "path";
-
-import sharp from "sharp";
-import { encode, isBlurhashValid } from "blurhash";
-
-import { visit } from "unist-util-visit";
-import { visitParents } from "unist-util-visit-parents";
-
-import HTMLParser from "node-html-parser";
-import prettier from "prettier";
-
-import { fileURLToPath } from "url";
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-export default function retextSentenceSpacing() {
-  return (tree, file, done) => {
-    visitParents(tree, "image", async (node, ancestors) => {
-      const { url } = node;
-
-      //const resolvedPath = path.join(process.cwd(), url);
-      const resolvedPath = path.join(__dirname, url);
-      console.log(resolvedPath);
-
-      const image = sharp(resolvedPath);
-      const dimensions = await image.metadata();
-
-      const { width, height } = dimensions;
-      console.log(height, width);
-
-      image
-        .raw()
-        .ensureAlpha()
-        .toBuffer((err, buffer) => {
-          console.log("got buffer");
-          try {
-            if (err) {
-              console.log("Error getting buffer", err);
-            } else {
-              const blurhash = encode(new Uint8ClampedArray(buffer), width, height, 4, 4);
-              if (isBlurhashValid(blurhash)) {
-                console.log({ blurhash, w: width, h: height });
-              } else {
-                return console.log("FAIL");
-              }
-            }
-          } catch (err) {
-            return console.log("FAIL", err);
-          }
-        });
-
-      const parent = ancestors[ancestors.length - 1];
-      const index = parent.children.indexOf(node);
-
-      const newNode = HTMLParser.parse(`<div>
-        <img />
-        <span>Hey there 2</span>
-        </div>`);
-
-      parent.children[index] = {
-        type: "html",
-        value: prettier.format(newNode.outerHTML, { parser: "html" }).trimEnd(),
-      };
-
-      setTimeout(() => {
-        done();
-      }, 3000);
-      //parent.children[index] = replacement;
-
-      // parent.children.push({
-      //   type: "html",
-      //   value: `<div><img /><span>Hey there</span></div>`,
-      //   position: node.position,
-      // });
-    });
-  };
-}