next-blurhash-previews 0.0.3-beta46 → 0.0.3-beta49

package/bin/remark-plugin.js

@@ -39,7 +39,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" />
+  <img alt="${alt}" width="${w}" src="${originalImg}" slot="image" />
   <canvas width="${blurHash.w}" height="${blurHash.h}" slot="preview"></canvas>
 </blurhash-image>`.trim();
 

package/components/ImageWithPreview.tsx

@@ -1,9 +1,7 @@
-import { decode } from "../node_modules/blurhash/dist/esm/index";
+import { decode } from "blurhash/dist/esm";
 
 type blurhash = { w: number; h: number; blurhash: string };
 
-let x = 1;
-
 class ImageWithPreview extends HTMLElement {
   sd: ShadowRoot;
   mo?: MutationObserver;
@@ -53,7 +51,9 @@ class ImageWithPreview extends HTMLElement {
   }
 
   #imgLoad = () => {
-    this.sd.innerHTML = `<slot name="image"></slot>`;
+    setTimeout(() => {
+      this.sd.innerHTML = `<slot name="image"></slot>`;
+    }, 10000);
   };
 
   attributeChangedCallback(name) {

package/imagePreviewBootstrap.js

@@ -1,83 +1,5 @@
 import { createElement } from "react";
 
 export const imagePreviewBootstrap = 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 true;
-    }
-  };
-  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 worker = new Worker("/canvas-worker.js");
-  const offscreen = canvasEl.transferControlToOffscreen();
-  worker.postMessage({
-    canvas: offscreen,
-    width,
-    height,
-    blurhash
-  }, [offscreen]);
-  return;
-} })();` },
+  dangerouslySetInnerHTML: { __html: `(() => { "use strict";class o extends HTMLElement{sd;mo;static observedAttributes=["preview"];#s=!1;get#e(){return this.querySelector("img")}get#t(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#i=()=>{if(this.#e&&this.#t)return this.mo?.disconnect(),this.#e.complete?this.#r():(this.#h(),this.#e.addEventListener("load",this.#r)),!0};connectedCallback(){this.#s=!0,this.#i()||(this.mo=new MutationObserver(this.#i),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#r=()=>{setTimeout(()=>{this.sd.innerHTML='<slot name="image"></slot>'},1e4)};attributeChangedCallback(e){this.#t&&e==="preview"&&this.#h()}#h(){if(!this.#s||!this.getAttribute("preview"))return;const e=JSON.parse(this.getAttribute("preview"));a(this.#t,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",o);function a(t,e){const{w:s,h:i,blurhash:h}=e;t.width=s,t.height=i;const n=new Worker("/canvas-worker.js"),r=t.transferControlToOffscreen();n.postMessage({canvas:r,width:s,height:i,blurhash:h},[r])} })();` },
 });

package/package.json

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

package/vite.b.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig } from "vite";
+// @ts-ignore
+import path from "path";
+import react from "@vitejs/plugin-react";
+import writeBootstrapPlugin from "./util/setBootstrap";
+
+export default defineConfig({
+  build: {
+    target: "es2022",
+    outDir: "./build",
+
+    // lib: {
+    //   entry: "components/imageWithPreview.tsx",
+    //   formats: ["cjs"],
+    //   fileName: (a, b, c) => {
+    //     console.log("mm", a, b, c);
+    //     return "imageWithPreview.js";
+    //   },
+    //   name: "imageWithPreview",
+    // },
+    minify: false,
+    rollupOptions: {
+      input: {
+        imageWithPreview: path.resolve(
+          // @ts-ignore
+          __dirname,
+          "components/imageWithPreview.tsx"
+        ),
+      },
+      output: {
+        dir: "./build/",
+
+        //file: "imageWithPreview.js",
+        // file: (a, b, c) => { console.log(a, b, c); return "imageWithPreview.js"; }
+      },
+      external: ["react", "react-dom", "next", "next/script"],
+    },
+  },
+  plugins: [react(), writeBootstrapPlugin()],
+});

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"],
     },