next-blurhash-previews 0.0.3-beta46 → 0.0.3-beta49
Sign up to get free protection for your applications and to get access to all the features.
- package/bin/remark-plugin.js +1 -1
- package/components/ImageWithPreview.tsx +4 -4
- package/imagePreviewBootstrap.js +1 -79
- package/package.json +1 -1
- package/vite.b.config.ts +40 -0
- package/vite.config.ts +1 -1
package/bin/remark-plugin.js
CHANGED
@@ -39,7 +39,7 @@ export const blurhashPlugin = publicPath => () => {
|
|
39
39
|
|
40
40
|
const newNode = `
|
41
41
|
<blurhash-image url="${originalImg}" preview='${JSON.stringify(blurHash)}'>
|
42
|
-
<img alt="${alt}" width="${w}"
|
42
|
+
<img alt="${alt}" width="${w}" src="${originalImg}" slot="image" />
|
43
43
|
<canvas width="${blurHash.w}" height="${blurHash.h}" slot="preview"></canvas>
|
44
44
|
</blurhash-image>`.trim();
|
45
45
|
|
@@ -1,9 +1,7 @@
|
|
1
|
-
import { decode } from "
|
1
|
+
import { decode } from "blurhash/dist/esm";
|
2
2
|
|
3
3
|
type blurhash = { w: number; h: number; blurhash: string };
|
4
4
|
|
5
|
-
let x = 1;
|
6
|
-
|
7
5
|
class ImageWithPreview extends HTMLElement {
|
8
6
|
sd: ShadowRoot;
|
9
7
|
mo?: MutationObserver;
|
@@ -53,7 +51,9 @@ class ImageWithPreview extends HTMLElement {
|
|
53
51
|
}
|
54
52
|
|
55
53
|
#imgLoad = () => {
|
56
|
-
|
54
|
+
setTimeout(() => {
|
55
|
+
this.sd.innerHTML = `<slot name="image"></slot>`;
|
56
|
+
}, 10000);
|
57
57
|
};
|
58
58
|
|
59
59
|
attributeChangedCallback(name) {
|
package/imagePreviewBootstrap.js
CHANGED
@@ -1,83 +1,5 @@
|
|
1
1
|
import { createElement } from "react";
|
2
2
|
|
3
3
|
export const imagePreviewBootstrap = createElement("script", {
|
4
|
-
dangerouslySetInnerHTML: { __html: `(() => { "use strict";
|
5
|
-
class ImageWithPreview extends HTMLElement {
|
6
|
-
sd;
|
7
|
-
mo;
|
8
|
-
static observedAttributes = ["preview"];
|
9
|
-
#connected = false;
|
10
|
-
get #imgEl() {
|
11
|
-
return this.querySelector("img");
|
12
|
-
}
|
13
|
-
get #canvasEl() {
|
14
|
-
return this.querySelector("canvas");
|
15
|
-
}
|
16
|
-
constructor() {
|
17
|
-
super();
|
18
|
-
this.sd = this.attachShadow({
|
19
|
-
mode: "open"
|
20
|
-
});
|
21
|
-
this.sd.innerHTML = \`<slot name="preview"></slot>\`;
|
22
|
-
}
|
23
|
-
#checkReady = () => {
|
24
|
-
if (this.#imgEl && this.#canvasEl) {
|
25
|
-
this.mo?.disconnect();
|
26
|
-
if (this.#imgEl.complete) {
|
27
|
-
this.#imgLoad();
|
28
|
-
} else {
|
29
|
-
this.#updatePreview();
|
30
|
-
this.#imgEl.addEventListener("load", this.#imgLoad);
|
31
|
-
}
|
32
|
-
return true;
|
33
|
-
}
|
34
|
-
};
|
35
|
-
connectedCallback() {
|
36
|
-
this.#connected = true;
|
37
|
-
if (!this.#checkReady()) {
|
38
|
-
this.mo = new MutationObserver(this.#checkReady);
|
39
|
-
this.mo.observe(this, {
|
40
|
-
subtree: true,
|
41
|
-
childList: true,
|
42
|
-
attributes: false
|
43
|
-
});
|
44
|
-
}
|
45
|
-
}
|
46
|
-
#imgLoad = () => {
|
47
|
-
this.sd.innerHTML = \`<slot name="image"></slot>\`;
|
48
|
-
};
|
49
|
-
attributeChangedCallback(name) {
|
50
|
-
if (this.#canvasEl && name === "preview") {
|
51
|
-
this.#updatePreview();
|
52
|
-
}
|
53
|
-
}
|
54
|
-
#updatePreview() {
|
55
|
-
if (!this.#connected || !this.getAttribute("preview")) {
|
56
|
-
return;
|
57
|
-
}
|
58
|
-
const previewObj = JSON.parse(this.getAttribute("preview"));
|
59
|
-
updateBlurHashPreview(this.#canvasEl, previewObj);
|
60
|
-
}
|
61
|
-
}
|
62
|
-
if (!customElements.get("blurhash-image")) {
|
63
|
-
customElements.define("blurhash-image", ImageWithPreview);
|
64
|
-
}
|
65
|
-
function updateBlurHashPreview(canvasEl, preview) {
|
66
|
-
const {
|
67
|
-
w: width,
|
68
|
-
h: height,
|
69
|
-
blurhash
|
70
|
-
} = preview;
|
71
|
-
canvasEl.width = width;
|
72
|
-
canvasEl.height = height;
|
73
|
-
const worker = new Worker("/canvas-worker.js");
|
74
|
-
const offscreen = canvasEl.transferControlToOffscreen();
|
75
|
-
worker.postMessage({
|
76
|
-
canvas: offscreen,
|
77
|
-
width,
|
78
|
-
height,
|
79
|
-
blurhash
|
80
|
-
}, [offscreen]);
|
81
|
-
return;
|
82
|
-
} })();` },
|
4
|
+
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])} })();` },
|
83
5
|
});
|
package/package.json
CHANGED
package/vite.b.config.ts
ADDED
@@ -0,0 +1,40 @@
|
|
1
|
+
import { defineConfig } from "vite";
|
2
|
+
// @ts-ignore
|
3
|
+
import path from "path";
|
4
|
+
import react from "@vitejs/plugin-react";
|
5
|
+
import writeBootstrapPlugin from "./util/setBootstrap";
|
6
|
+
|
7
|
+
export default defineConfig({
|
8
|
+
build: {
|
9
|
+
target: "es2022",
|
10
|
+
outDir: "./build",
|
11
|
+
|
12
|
+
// lib: {
|
13
|
+
// entry: "components/imageWithPreview.tsx",
|
14
|
+
// formats: ["cjs"],
|
15
|
+
// fileName: (a, b, c) => {
|
16
|
+
// console.log("mm", a, b, c);
|
17
|
+
// return "imageWithPreview.js";
|
18
|
+
// },
|
19
|
+
// name: "imageWithPreview",
|
20
|
+
// },
|
21
|
+
minify: false,
|
22
|
+
rollupOptions: {
|
23
|
+
input: {
|
24
|
+
imageWithPreview: path.resolve(
|
25
|
+
// @ts-ignore
|
26
|
+
__dirname,
|
27
|
+
"components/imageWithPreview.tsx"
|
28
|
+
),
|
29
|
+
},
|
30
|
+
output: {
|
31
|
+
dir: "./build/",
|
32
|
+
|
33
|
+
//file: "imageWithPreview.js",
|
34
|
+
// file: (a, b, c) => { console.log(a, b, c); return "imageWithPreview.js"; }
|
35
|
+
},
|
36
|
+
external: ["react", "react-dom", "next", "next/script"],
|
37
|
+
},
|
38
|
+
},
|
39
|
+
plugins: [react(), writeBootstrapPlugin()],
|
40
|
+
});
|
package/vite.config.ts
CHANGED