next-blurhash-previews 0.0.3-beta50 → 0.0.3-beta53
Sign up to get free protection for your applications and to get access to all the features.
- package/.vscode/settings.json +10 -0
- package/bin/remark-plugin.js +2 -2
- package/components/ImageWithPreview.tsx +17 -7
- package/components/imagePreviewBootstrap.tsx +13 -4
- package/components/workerScript.ts +20 -0
- package/imagePreviewBootstrap.js +13 -4
- package/package.json +2 -2
- package/util/setBootstrap.js +19 -20
- package/{vite.config.ts → vite.wc.config.ts} +3 -6
- package/vite.worker.config.ts +18 -0
- package/vite.b.config.ts +0 -40
package/bin/remark-plugin.js
CHANGED
@@ -39,8 +39,8 @@ 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}" src="${originalImg}" slot="image" />
|
43
|
-
<canvas width="${
|
42
|
+
<img alt="${alt}" width="${w}" height="${h}" src="${originalImg}" slot="image" />
|
43
|
+
<canvas width="${w}" height="${h}" slot="preview"></canvas>
|
44
44
|
</blurhash-image>`.trim();
|
45
45
|
|
46
46
|
parent.children[index] = {
|
@@ -1,7 +1,10 @@
|
|
1
|
-
import { decode } from "blurhash/dist/esm";
|
1
|
+
//import { decode } from "blurhash/dist/esm";
|
2
2
|
|
3
3
|
type blurhash = { w: number; h: number; blurhash: string };
|
4
4
|
|
5
|
+
//declare function __blurhashDecode(blurhash: string, width: number, height: any);
|
6
|
+
//(window as any).__blurhashDecode = decode;
|
7
|
+
|
5
8
|
class ImageWithPreview extends HTMLElement {
|
6
9
|
sd: ShadowRoot;
|
7
10
|
mo?: MutationObserver;
|
@@ -81,14 +84,21 @@ function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
|
|
81
84
|
canvasEl.width = width;
|
82
85
|
canvasEl.height = height;
|
83
86
|
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
87
|
+
if (true) {
|
88
|
+
const workerBlob = new Blob(
|
89
|
+
[document.querySelector("#next-blurhash-worker-script")!.textContent!],
|
90
|
+
{ type: "text/javascript" }
|
91
|
+
);
|
92
|
+
|
93
|
+
const worker = new Worker(window.URL.createObjectURL(workerBlob));
|
94
|
+
const offscreen = (canvasEl as any).transferControlToOffscreen();
|
95
|
+
worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
|
96
|
+
offscreen,
|
97
|
+
]);
|
98
|
+
}
|
90
99
|
|
91
100
|
return;
|
101
|
+
// @ts-ignore
|
92
102
|
const pixels = decode(blurhash, width, height);
|
93
103
|
const ctx = canvasEl.getContext("2d")!;
|
94
104
|
const imageData = ctx.createImageData(width, height);
|
@@ -1,5 +1,14 @@
|
|
1
|
-
import { createElement } from "react";
|
1
|
+
import { createElement, Fragment } from "react";
|
2
2
|
|
3
|
-
export const imagePreviewBootstrap = createElement(
|
4
|
-
|
5
|
-
}
|
3
|
+
export const imagePreviewBootstrap = createElement(
|
4
|
+
Fragment,
|
5
|
+
{},
|
6
|
+
createElement("script", {
|
7
|
+
dangerouslySetInnerHTML: { __html: `(() => { /*WC*/ })();` },
|
8
|
+
}),
|
9
|
+
createElement("script", {
|
10
|
+
id: "next-blurhash-worker-script",
|
11
|
+
type: "javascript/worker",
|
12
|
+
dangerouslySetInnerHTML: { __html: `(() => { /*WORKER*/ })();` },
|
13
|
+
})
|
14
|
+
);
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { decode } from "blurhash/dist/esm";
|
2
|
+
|
3
|
+
addEventListener("message", evt => {
|
4
|
+
console.log(evt);
|
5
|
+
|
6
|
+
const { canvas, width, height, blurhash } = evt.data;
|
7
|
+
|
8
|
+
const p = new Promise(res => setTimeout(res, 5000));
|
9
|
+
Promise.resolve(p).then(() => {
|
10
|
+
console.log("Encoding", blurhash);
|
11
|
+
const start = +new Date();
|
12
|
+
const pixels = decode(blurhash, width, height);
|
13
|
+
const ctx = canvas.getContext("2d");
|
14
|
+
const imageData = ctx.createImageData(width, height);
|
15
|
+
imageData.data.set(pixels);
|
16
|
+
ctx.putImageData(imageData, 0, 0);
|
17
|
+
const end = +new Date();
|
18
|
+
console.log("Done Encoding", blurhash, end - start);
|
19
|
+
});
|
20
|
+
});
|
package/imagePreviewBootstrap.js
CHANGED
@@ -1,5 +1,14 @@
|
|
1
|
-
import { createElement } from "react";
|
1
|
+
import { createElement, Fragment } from "react";
|
2
2
|
|
3
|
-
export const imagePreviewBootstrap = createElement(
|
4
|
-
|
5
|
-
}
|
3
|
+
export const imagePreviewBootstrap = createElement(
|
4
|
+
Fragment,
|
5
|
+
{},
|
6
|
+
createElement("script", {
|
7
|
+
dangerouslySetInnerHTML: { __html: `(() => { "use strict";class a 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>'},19e3)};attributeChangedCallback(e){this.#t&&e==="preview"&&this.#h()}#h(){if(!this.#s||!this.getAttribute("preview"))return;const e=JSON.parse(this.getAttribute("preview"));c(this.#t,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",a);function c(t,e){const{w:s,h:i,blurhash:h}=e;t.width=s,t.height=i;{const n=new Blob([document.querySelector("#next-blurhash-worker-script").textContent],{type:"text/javascript"}),o=new Worker(window.URL.createObjectURL(n)),r=t.transferControlToOffscreen();o.postMessage({canvas:r,width:s,height:i,blurhash:h},[r])}} })();` },
|
8
|
+
}),
|
9
|
+
createElement("script", {
|
10
|
+
id: "next-blurhash-worker-script",
|
11
|
+
type: "javascript/worker",
|
12
|
+
dangerouslySetInnerHTML: { __html: `(() => { "use strict";const v=["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","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],u=t=>{let n=0;for(let e=0;e<t.length;e++){const o=t[e],c=v.indexOf(o);n=n*83+c}return n},x=t=>{let n=t/255;return n<=.04045?n/12.92:Math.pow((n+.055)/1.055,2.4)},p=t=>{let n=Math.max(0,Math.min(1,t));return n<=.0031308?Math.round(n*12.92*255+.5):Math.round((1.055*Math.pow(n,.4166666666666667)-.055)*255+.5)},y=t=>t<0?-1:1,D=(t,n)=>y(t)*Math.pow(Math.abs(t),n);class R extends Error{constructor(n){super(n),this.name="ValidationError",this.message=n}}const I=t=>{if(!t||t.length<6)throw new R("The blurhash string must be at least 6 characters");const n=u(t[0]),e=Math.floor(n/9)+1,o=n%9+1;if(t.length!==4+2*o*e)throw new R(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*o*e}\`)},T=t=>{const n=t>>16,e=t>>8&255,o=t&255;return[x(n),x(e),x(o)]},A=(t,n)=>{const e=Math.floor(t/361),o=Math.floor(t/19)%19,c=t%19;return[D((e-9)/9,2)*n,D((o-9)/9,2)*n,D((c-9)/9,2)*n]},V=(t,n,e,o)=>{I(t),o=o|1;const c=u(t[0]),d=Math.floor(c/9)+1,r=c%9+1,h=(u(t[1])+1)/166,i=new Array(r*d);for(let s=0;s<i.length;s++)if(s===0){const a=u(t.substring(2,6));i[s]=T(a)}else{const a=u(t.substring(4+s*2,6+s*2));i[s]=A(a,h*o)}const l=n*4,g=new Uint8ClampedArray(l*e);for(let s=0;s<e;s++)for(let a=0;a<n;a++){let B=0,E=0,P=0;for(let m=0;m<d;m++)for(let M=0;M<r;M++){const f=Math.cos(Math.PI*a*M/n)*Math.cos(Math.PI*s*m/e);let w=i[M+m*r];B+=w[0]*f,E+=w[1]*f,P+=w[2]*f}let q=p(B),C=p(E),G=p(P);g[4*a+0+s*l]=q,g[4*a+1+s*l]=C,g[4*a+2+s*l]=G,g[4*a+3+s*l]=255}return g};var $=V;addEventListener("message",t=>{console.log(t);const{canvas:n,width:e,height:o,blurhash:c}=t.data,d=new Promise(r=>setTimeout(r,5e3));Promise.resolve(d).then(()=>{console.log("Encoding",c);const r=+new Date,b=$(c,e,o),h=n.getContext("2d"),i=h.createImageData(e,o);i.data.set(b),h.putImageData(i,0,0);const l=+new Date;console.log("Done Encoding",c,l-r)})}); })();` },
|
13
|
+
})
|
14
|
+
);
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "next-blurhash-previews",
|
3
|
-
"version": "0.0.3-
|
3
|
+
"version": "0.0.3-beta53",
|
4
4
|
"description": "",
|
5
5
|
"main": "index.js",
|
6
6
|
"module": "index.js",
|
@@ -9,7 +9,7 @@
|
|
9
9
|
},
|
10
10
|
"scripts": {
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
12
|
-
"build": "vite build",
|
12
|
+
"build": "rm -rf build && vite build --config vite.wc.config.ts && vite build --config vite.worker.config.ts && node util/setBootstrap.js",
|
13
13
|
"build-watch": "vite build -w",
|
14
14
|
"prepare": "npm run build"
|
15
15
|
},
|
package/util/setBootstrap.js
CHANGED
@@ -1,22 +1,21 @@
|
|
1
1
|
import fs from "fs";
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
}
|
3
|
+
let BootstrapModule = fs.readFileSync(
|
4
|
+
"./components/imagePreviewBootstrap.tsx",
|
5
|
+
"utf8"
|
6
|
+
);
|
7
|
+
|
8
|
+
const wcScript = fs.readFileSync("./build/imageWithPreview.js", "utf8");
|
9
|
+
const workerScript = fs.readFileSync("./build/workerScript.js", "utf8");
|
10
|
+
|
11
|
+
BootstrapModule = BootstrapModule.replace(
|
12
|
+
"/*WC*/",
|
13
|
+
wcScript.replace(/[\r\n]\s*$/, "").replace(/`/g, "\\`")
|
14
|
+
)
|
15
|
+
.replace(
|
16
|
+
"/*WORKER*/",
|
17
|
+
workerScript.replace(/[\r\n]\s*$/, "").replace(/`/g, "\\`")
|
18
|
+
)
|
19
|
+
.replace(/\${/g, "\\${");
|
20
|
+
|
21
|
+
fs.writeFileSync("./imagePreviewBootstrap.js", BootstrapModule);
|
@@ -1,21 +1,18 @@
|
|
1
1
|
import { defineConfig } from "vite";
|
2
2
|
import react from "@vitejs/plugin-react";
|
3
|
-
import writeBootstrapPlugin from "./util/setBootstrap";
|
4
3
|
|
5
4
|
export default defineConfig({
|
6
5
|
build: {
|
7
6
|
target: "es2022",
|
8
7
|
outDir: "./build",
|
8
|
+
emptyOutDir: false,
|
9
9
|
lib: {
|
10
|
-
entry: "components/
|
10
|
+
entry: "components/ImageWithPreview.tsx",
|
11
11
|
formats: ["cjs"],
|
12
12
|
fileName: () => "imageWithPreview.js",
|
13
13
|
name: "imageWithPreview",
|
14
14
|
},
|
15
15
|
//minify: false,
|
16
|
-
rollupOptions: {
|
17
|
-
external: ["react", "react-dom", "next", "next/script"],
|
18
|
-
},
|
19
16
|
},
|
20
|
-
plugins: [react()
|
17
|
+
plugins: [react()],
|
21
18
|
});
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { defineConfig } from "vite";
|
2
|
+
import react from "@vitejs/plugin-react";
|
3
|
+
|
4
|
+
export default defineConfig({
|
5
|
+
build: {
|
6
|
+
target: "es2022",
|
7
|
+
outDir: "./build",
|
8
|
+
emptyOutDir: false,
|
9
|
+
lib: {
|
10
|
+
entry: "components/workerScript.ts",
|
11
|
+
formats: ["cjs"],
|
12
|
+
fileName: () => "workerScript.js",
|
13
|
+
name: "workerScript",
|
14
|
+
},
|
15
|
+
//minify: false,
|
16
|
+
},
|
17
|
+
plugins: [react()],
|
18
|
+
});
|
package/vite.b.config.ts
DELETED
@@ -1,40 +0,0 @@
|
|
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
|
-
});
|