next-blurhash-previews 0.0.3-beta4 → 0.0.3-beta42

package/bin/markdown-sync.js

@@ -6,6 +6,9 @@ import { fileURLToPath } from "url";
 
 import { reporter } from "vfile-reporter";
 import { remark } from "remark";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkStringify from "remark-stringify";
+
 import glob from "glob";
 import colors from "colors";
 
@@ -37,6 +40,10 @@ async function runFile(file) {
   return new Promise(res => {
     remark()
       .use(blurhashPlugin(publicPath))
+      .use(remarkFrontmatter)
+      .use(remarkStringify, {
+        fences: true,
+      })
       .process(buffer)
       .then(outputFile => {
         fs.writeFileSync(file, outputFile.toString());

package/bin/remark-plugin.js

@@ -1,6 +1,5 @@
 import path from "path";
 import { visitParents } from "unist-util-visit-parents";
-import prettier from "prettier";
 
 import colors from "colors";
 
@@ -44,7 +43,7 @@ export const blurhashPlugin = publicPath => () => {
 
         parent.children[index] = {
           type: "html",
-          value: prettier.format(newNode, { parser: "html" }).trimEnd(),
+          value: newNode,
         };
       } catch (er) {
         console.log(colors.red(`Error processing ${imagePath}\n\t`, er));

package/components/ImageWithPreview.tsx

@@ -8,6 +8,7 @@ class ImageWithPreview extends HTMLElement {
 
   static observedAttributes = ["preview"];
 
+  #previewSet = false;
   get #imgEl(): any {
     return this.querySelector("img");
   }
@@ -49,7 +50,7 @@ class ImageWithPreview extends HTMLElement {
   }
 
   #imgLoad = () => {
-    this.sd.innerHTML = `<slot name="image"></slot>`;
+    //this.sd.innerHTML = `<slot name="image"></slot>`;
   };
 
   attributeChangedCallback(name) {
@@ -59,6 +60,12 @@ class ImageWithPreview extends HTMLElement {
   }
 
   #updatePreview() {
+    console.log(this.#previewSet, this.getAttribute("url"));
+    if (this.#previewSet) {
+      return;
+    }
+    this.#previewSet = true;
+    console.log(this.#previewSet, this.getAttribute("url"));
     const previewObj = JSON.parse(this.getAttribute("preview")!);
     updateBlurHashPreview(this.#canvasEl, previewObj);
   }
@@ -69,12 +76,19 @@ if (!customElements.get("blurhash-image")) {
 }
 
 function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
-  const { w: width, h: height } = preview;
-
+  const { w: width, h: height, blurhash } = preview;
   canvasEl.width = width;
   canvasEl.height = height;
 
-  const pixels = decode(preview.blurhash, width, 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);

package/components/imagePreviewBootstrap.tsx

@@ -1,7 +1,5 @@
 import { createElement } from "react";
-import Script from "next/script";
 
-export const imagePreviewBootstrap = createElement(Script, {
+export const imagePreviewBootstrap = createElement("script", {
   dangerouslySetInnerHTML: { __html: `(() => { /*HERE*/ })();` },
-  strategy: "beforeInteractive",
 });

package/imagePreviewBootstrap.js

@@ -0,0 +1,84 @@
+import { createElement } from "react";
+
+export const imagePreviewBootstrap = createElement("script", {
+  dangerouslySetInnerHTML: { __html: `(() => { "use strict";
+class ImageWithPreview extends HTMLElement {
+  sd;
+  mo;
+  static observedAttributes = ["preview"];
+  #previewSet = 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 true;
+    }
+  };
+  connectedCallback() {
+    if (!this.#checkReady()) {
+      this.mo = new MutationObserver(this.#checkReady);
+      this.mo.observe(this, {
+        subtree: true,
+        childList: true,
+        attributes: false
+      });
+    }
+  }
+  #imgLoad = () => {
+  };
+  attributeChangedCallback(name) {
+    if (this.#canvasEl && name === "preview") {
+      this.#updatePreview();
+    }
+  }
+  #updatePreview() {
+    console.log(this.#previewSet, this.getAttribute("url"));
+    if (this.#previewSet) {
+      return;
+    }
+    this.#previewSet = true;
+    console.log(this.#previewSet, this.getAttribute("url"));
+    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 worker = new Worker("/canvas-worker.js");
+  const offscreen = canvasEl.transferControlToOffscreen();
+  worker.postMessage({
+    canvas: offscreen,
+    width,
+    height,
+    blurhash
+  }, [offscreen]);
+  return;
+} })();` },
+});

package/index.js

@@ -1,5 +1,3 @@
-import { imagePreviewBootstrap } from "./imagePreviewBootstrap";
+import { imagePreviewBootstrap } from "./imagePreviewBootstrap.js";
 
 export { imagePreviewBootstrap };
-
-export const src = `(() => { "use strict";var A=Object.defineProperty;var R=(t,e,s)=>e in t?A(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s;var u=(t,e,s)=>(R(t,typeof e!="symbol"?e+"":e,s),s);const G=["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=G.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)},P=t=>t<0?-1:1,E=(t,e)=>P(t)*Math.pow(Math.abs(t),e);class v extends Error{constructor(e){super(e),this.name="ValidationError",this.message=e}}const k=t=>{if(!t||t.length<6)throw new v("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 v(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*n*s}\`)},D=t=>{const e=t>>16,s=t>>8&255,n=t&255;return[p(e),p(s),p(n)]},H=(t,e)=>{const s=Math.floor(t/361),n=Math.floor(t/19)%19,o=t%19;return[E((s-9)/9,2)*e,E((n-9)/9,2)*e,E((o-9)/9,2)*e]},S=(t,e,s,n)=>{k(t),n=n|1;const o=h(t[0]),a=Math.floor(o/9)+1,c=o%9+1,q=(h(t[1])+1)/166,g=new Array(c*a);for(let r=0;r<g.length;r++)if(r===0){const i=h(t.substring(2,6));g[r]=D(i)}else{const i=h(t.substring(4+r*2,6+r*2));g[r]=H(i,q*n)}const l=e*4,d=new Uint8ClampedArray(l*s);for(let r=0;r<s;r++)for(let i=0;i<e;i++){let I=0,x=0,C=0;for(let m=0;m<a;m++)for(let f=0;f<c;f++){const M=Math.cos(Math.PI*i*f/e)*Math.cos(Math.PI*r*m/s);let w=g[f+m*c];I+=w[0]*M,x+=w[1]*M,C+=w[2]*M}let B=b(I),T=b(x),y=b(C);d[4*i+0+r*l]=B,d[4*i+1+r*l]=T,d[4*i+2+r*l]=y,d[4*i+3+r*l]=255}return d};class L extends HTMLElement{constructor(){super();u(this,"loaded",!1);u(this,"sd");u(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.currentImageEl.complete&&this.onImageLoad(),this.currentImageEl.addEventListener("load",this.onImageLoad)}attributeChangedCallback(s,n,o){if(s==="preview"){const a=JSON.parse(o);O(this.currentCanvasEl,a)}else s==="url"&&o!==this.currentImageEl.getAttribute("src")&&(this.loaded=!1,this.currentImageEl.src=o||"");this.render()}render(){this.sd.innerHTML=\`<slot name="\${this.loaded?"image":"preview"}"></slot>\`}}u(L,"observedAttributes",["preview","url"]);customElements.get("uikit-image")||customElements.define("uikit-image",L);function O(t,e){const{w:s,h:n}=e;t.width=s,t.height=n;const o=S(e.blurhash,s,n),a=t.getContext("2d"),c=a.createImageData(s,n);c.data.set(o),a.putImageData(c,0,0)} })();`;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "next-blurhash-previews",
-  "version": "0.0.3-beta4",
+  "version": "0.0.3-beta42",
   "description": "",
   "main": "index.js",
+  "module": "index.js",
   "bin": {
     "blurhash-markdown": "./bin/markdown-sync.js"
   },
@@ -30,10 +31,11 @@
     "blurhash": "^1.1.5",
     "colors": "^1.4.0",
     "glob": "^8.0.3",
-    "next": "^12.2.0",
+    "install": "^0.13.0",
     "node-fetch": "^3.2.6",
-    "prettier": "^2.7.1",
+    "npm": "^8.15.1",
     "remark": "^14.0.2",
+    "remark-frontmatter": "^4.0.1",
     "retext": "^8.1.0",
     "sharp": "^0.30.7",
     "to-vfile": "^7.2.3",

package/vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
       fileName: () => "imageWithPreview.js",
       name: "imageWithPreview",
     },
-    //minify: false,
+    minify: false,
     rollupOptions: {
       external: ["react", "react-dom", "next", "next/script"],
     },

package/.prettierrc

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

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.

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

@@ -1,33 +0,0 @@
-<blurhash-image
-  url="./img1.png"
-  preview='{"blurhash":"U8SF;LD*%gofIUM|xuRj~qaeM{RjxtoIWBWC","w":364,"h":196}'
->
-  <img alt="A" src="./img1.png" slot="image" />
-  <canvas width="364" height="196" slot="preview"></canvas>
-</blurhash-image>
-
-<some-component>
-  <p>Hello</p>
-</some-component>
-
-Yo
-
-<blurhash-image
-  url="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
-  preview='{"blurhash":"U38|kkTJ01}A;{Or57;N01NG+?IW01rX^NAW","w":106,"h":160}'
->
-  <img
-    alt="external image"
-    src="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
-    slot="image"
-  />
-  <canvas width="106" height="160" slot="preview"></canvas>
-</blurhash-image>
-
-<blurhash-image
-  url="./img1.png"
-  preview='{"blurhash":"U8SF;LD*%gofIUM|xuRj~qaeM{RjxtoIWBWC","w":364,"h":196}'
->
-  <img alt="" src="./img1.png" slot="image" />
-  <canvas width="364" height="196" slot="preview"></canvas>
-</blurhash-image>

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

@@ -1,25 +0,0 @@
-<blurhash-image
-  url="./img1.png"
-  preview='{"blurhash":"U8SF;LD*%gofIUM|xuRj~qaeM{RjxtoIWBWC","w":364,"h":196}'
->
-  <img alt="A" src="./img1.png" slot="image" />
-  <canvas width="364" height="196" slot="preview"></canvas>
-</blurhash-image>
-
-<some-component>
-  <p>Hello</p>
-</some-component>
-
-Yo
-
-<blurhash-image
-  url="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
-  preview='{"blurhash":"U38|kkTJ01}A;{Or57;N01NG+?IW01rX^NAW","w":106,"h":160}'
->
-  <img
-    alt="external image"
-    src="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
-    slot="image"
-  />
-  <canvas width="106" height="160" slot="preview"></canvas>
-</blurhash-image>

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

@@ -1,25 +0,0 @@
-<blurhash-image
-  url="./img1.png"
-  preview='{"blurhash":"U8SF;LD*%gofIUM|xuRj~qaeM{RjxtoIWBWC","w":364,"h":196}'
->
-  <img alt="A" src="./img1.png" slot="image" />
-  <canvas width="364" height="196" slot="preview"></canvas>
-</blurhash-image>
-
-<some-component>
-  <p>Hello</p>
-</some-component>
-
-Yo
-
-<blurhash-image
-  url="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
-  preview='{"blurhash":"U38|kkTJ01}A;{Or57;N01NG+?IW01rX^NAW","w":106,"h":160}'
->
-  <img
-    alt="external image"
-    src="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
-    slot="image"
-  />
-  <canvas width="106" height="160" slot="preview"></canvas>
-</blurhash-image>

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

@@ -1,25 +0,0 @@
-<blurhash-image
-  url="./img1.png"
-  preview='{"blurhash":"U8SF;LD*%gofIUM|xuRj~qaeM{RjxtoIWBWC","w":364,"h":196}'
->
-  <img alt="A" src="./img1.png" slot="image" />
-  <canvas width="364" height="196" slot="preview"></canvas>
-</blurhash-image>
-
-<some-component>
-  <p>Hello</p>
-</some-component>
-
-Yo
-
-<blurhash-image
-  url="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
-  preview='{"blurhash":"U38|kkTJ01}A;{Or57;N01NG+?IW01rX^NAW","w":106,"h":160}'
->
-  <img
-    alt="external image"
-    src="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
-    slot="image"
-  />
-  <canvas width="106" height="160" slot="preview"></canvas>
-</blurhash-image>

package/next-runner/next.config.js

@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
-
-module.exports = nextConfig