@substrate-system/blur-hash 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -3
- package/dist/bin/index.js +31 -0
- package/dist/index.cjs +85 -27
- package/dist/index.cjs.map +2 -2
- package/dist/index.d.ts +393 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +82 -24
- package/dist/index.js.map +2 -2
- package/dist/index.min.js +11 -11
- package/dist/index.min.js.map +4 -4
- package/dist/meta.json +6 -6
- package/dist/style.css +9 -7
- package/dist/style.min.css +2 -2
- package/package.json +16 -15
package/dist/index.min.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
var
|
|
1
|
+
var V=Object.defineProperty;var l=(e,t)=>V(e,"name",{value:t,configurable:!0});var R=Object.defineProperty,v=l((e,t)=>R(e,"name",{value:t,configurable:!0}),"__name"),w=class e extends window.HTMLElement{static{l(this,"WebComponent")}static{v(this,"WebComponent")}static NAME="";NAME="";static create(t){return class extends e{static NAME=t;NAME=t;render(){}}}static define(){T(this.NAME)||window.customElements.define(this.NAME,this)}async attributeChangedCallback(t,s,r){let a=this[`handleChange_${t}`];a&&await a.call(this,s,r),this.render()}connectedCallback(){this.render()}qs(t){return this.querySelector(t)}qsa(t){return this.querySelectorAll(t)}static event(t){return N(this.NAME,t)}emit(t,s={}){let r=this.NAME,a=new CustomEvent(`${r}:${t}`,{bubbles:s.bubbles===void 0?!0:s.bubbles,cancelable:s.cancelable===void 0?!0:s.cancelable,detail:s.detail});return this.dispatchEvent(a)}dispatch(t,s={}){let r=new CustomEvent(t,{bubbles:s.bubbles===void 0?!0:s.bubbles,cancelable:s.cancelable===void 0?!0:s.cancelable,detail:s.detail});return this.dispatchEvent(r)}};function N(e,t){return`${e}:${t}`}l(N,"eventName");v(N,"eventName");function T(e){return document.createElement(e).constructor!==window.HTMLElement}l(T,"isRegistered");v(T,"isRegistered");var S=["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","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],b=l(e=>{let t=0;for(let s=0;s<e.length;s++){let r=e[s],a=S.indexOf(r);t=t*83+a}return t},"x");var E=l(e=>{let t=e/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},"f"),A=l(e=>{let t=Math.max(0,Math.min(1,e));return t<=.0031308?Math.trunc(t*12.92*255+.5):Math.trunc((1.055*Math.pow(t,.4166666666666667)-.055)*255+.5)},"h"),k=l(e=>e<0?-1:1,"F"),x=l((e,t)=>k(e)*Math.pow(Math.abs(e),t),"M"),q=class extends Error{static{l(this,"d")}constructor(e){super(e),this.name="ValidationError",this.message=e}},z=l(e=>{if(!e||e.length<6)throw new q("The blurhash string must be at least 6 characters");let t=b(e[0]),s=Math.floor(t/9)+1,r=t%9+1;if(e.length!==4+2*r*s)throw new q(`blurhash length mismatch: length is ${e.length} but it should be ${4+2*r*s}`)},"C");var B=l(e=>{let t=e>>16,s=e>>8&255,r=e&255;return[E(t),E(s),E(r)]},"z"),O=l((e,t)=>{let s=Math.floor(e/361),r=Math.floor(e/19)%19,a=e%19;return[x((s-9)/9,2)*t,x((r-9)/9,2)*t,x((a-9)/9,2)*t]},"L"),j=l((e,t,s,r)=>{z(e),r=r|1;let a=b(e[0]),c=Math.floor(a/9)+1,i=a%9+1,u=(b(e[1])+1)/166,h=new Array(i*c);for(let n=0;n<h.length;n++)if(n===0){let o=b(e.substring(2,6));h[n]=B(o)}else{let o=b(e.substring(4+n*2,6+n*2));h[n]=O(o,u*r)}let d=t*4,g=new Uint8ClampedArray(d*s);for(let n=0;n<s;n++)for(let o=0;o<t;o++){let m=0,C=0,L=0;for(let M=0;M<c;M++)for(let f=0;f<i;f++){let y=Math.cos(Math.PI*o*f/t)*Math.cos(Math.PI*n*M/s),p=h[f+M*i];m+=p[0]*y,C+=p[1]*y,L+=p[2]*y}let H=A(m),P=A(C),D=A(L);g[4*o+0+n*d]=H,g[4*o+1+n*d]=P,g[4*o+2+n*d]=D,g[4*o+3+n*d]=255}return g},"U"),I=j;var $=class e extends w.create("blur-hash"){static{l(this,"BlurHash")}time;constructor(){super();let t=this.getAttribute("width"),s=this.getAttribute("height"),r=this.getAttribute("time");this.time=r?parseInt(r):800,this.style.width=""+t,this.style.height=""+s,document.body.style.setProperty("--blur-hash-time",r?"."+(parseInt(r)/1e3+"s"):"0.8s")}reset(t,s,r,a,c,i={}){i.width&&(this.style.width=i.width),i.height&&(this.style.height=i.height);let u=i.width?parseInt(i.width):parseInt(this.style.width),h=i.height?parseInt(i.height):parseInt(this.style.height);this.innerHTML=e.html({srcset:i.srcset,w:""+u,h:""+h,src:t,alt:s});let d=I(r,u,h),g=this.querySelector("canvas"),n=g.getContext("2d"),o=n.createImageData(u,h);o.data.set(d),n.putImageData(o,0,0),this.setAttribute("src",t),this.setAttribute("placeholder",r);let m=this.querySelector("img");a&&m.setAttribute("srcset",a),c&&m.setAttribute("sizes",c),m.addEventListener("load",()=>{g.style.display="none",m.classList.remove("blurry"),m.classList.add("sharp")})}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),s=parseInt(this.getAttribute("height")??""),r=this.getAttribute("placeholder");if(!r||!t||!s)throw new Error("Missing attributes");this.innerHTML=this.render();let a=I(r,t,s),c=this.querySelector("canvas"),i=c.getContext("2d"),u=i.createImageData(t,s);u.data.set(a),i.putImageData(u,0,0);let h=this.querySelector("img");h.addEventListener("load",()=>{c.style.display="none",h.classList.remove("blurry"),h.classList.add("sharp")})}static html(t){let{srcset:s,w:r,h:a,alt:c,contentVisibility:i,decoding:u,loading:h,src:d}=t;return`<canvas
|
|
2
2
|
class="blurry"
|
|
3
|
-
width=${
|
|
4
|
-
height=${
|
|
3
|
+
width=${r}
|
|
4
|
+
height=${a}
|
|
5
5
|
></canvas>
|
|
6
|
+
|
|
6
7
|
<img class="blurry"
|
|
7
|
-
${
|
|
8
|
-
alt="${
|
|
9
|
-
content-visibility="${
|
|
10
|
-
decoding="${
|
|
11
|
-
loading="${
|
|
8
|
+
${s?`srcset="${s}"`:""}
|
|
9
|
+
alt="${c}"
|
|
10
|
+
content-visibility="${i||"auto"}"
|
|
11
|
+
decoding="${u||"async"}"
|
|
12
|
+
loading="${h||"lazy"}"
|
|
12
13
|
class="image-element blurry"
|
|
13
|
-
src="${
|
|
14
|
-
|
|
15
|
-
`}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),r=parseInt(this.getAttribute("height")??""),n=this.getAttribute("placeholder");if(!n||!t||!r)throw new Error("Missing attributes");let o=U(n,t,r),l=this.querySelector("canvas"),h=l.getContext("2d"),u=h.createImageData(t,r);u.data.set(o),h.putImageData(u,0,0);let i=this.querySelector("img");i.addEventListener("load",()=>{q("loaded"),l.style.display="none",i.classList.remove("blurry"),i.classList.add("sharp")}),q("the image",i)}};customElements.define("blur-hash",S);export{S as BlurHash};
|
|
14
|
+
src="${d}"
|
|
15
|
+
/>`}render(){let t=this.getAttribute("srcset"),s=this.getAttribute("width"),r=this.getAttribute("height"),a=this.getAttribute("time");this.time=a?parseInt(a):800;let c=this.getAttribute("src"),i=this.getAttribute("alt");if(!c)throw new Error("Not src");if(!i)throw new Error("Not alt");return e.html({srcset:t,w:s,h:r,src:c,alt:i})}};customElements.define("blur-hash",$);export{$ as BlurHash};
|
|
16
16
|
//# sourceMappingURL=index.min.js.map
|
package/dist/index.min.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../node_modules/
|
|
4
|
-
"sourcesContent": ["/**\n * Helpers.\n */\n\nvar s = 1000;\nvar m = s * 60;\nvar h = m * 60;\nvar d = h * 24;\nvar w = d * 7;\nvar y = d * 365.25;\n\n/**\n * Parse or format the given `val`.\n *\n * Options:\n *\n * - `long` verbose formatting [false]\n *\n * @param {String|Number} val\n * @param {Object} [options]\n * @throws {Error} throw an error if val is not a non-empty string or a number\n * @return {String|Number}\n * @api public\n */\n\nmodule.exports = function (val, options) {\n options = options || {};\n var type = typeof val;\n if (type === 'string' && val.length > 0) {\n return parse(val);\n } else if (type === 'number' && isFinite(val)) {\n return options.long ? fmtLong(val) : fmtShort(val);\n }\n throw new Error(\n 'val is not a non-empty string or a valid number. val=' +\n JSON.stringify(val)\n );\n};\n\n/**\n * Parse the given `str` and return milliseconds.\n *\n * @param {String} str\n * @return {Number}\n * @api private\n */\n\nfunction parse(str) {\n str = String(str);\n if (str.length > 100) {\n return;\n }\n var match = /^(-?(?:\\d+)?\\.?\\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i.exec(\n str\n );\n if (!match) {\n return;\n }\n var n = parseFloat(match[1]);\n var type = (match[2] || 'ms').toLowerCase();\n switch (type) {\n case 'years':\n case 'year':\n case 'yrs':\n case 'yr':\n case 'y':\n return n * y;\n case 'weeks':\n case 'week':\n case 'w':\n return n * w;\n case 'days':\n case 'day':\n case 'd':\n return n * d;\n case 'hours':\n case 'hour':\n case 'hrs':\n case 'hr':\n case 'h':\n return n * h;\n case 'minutes':\n case 'minute':\n case 'mins':\n case 'min':\n case 'm':\n return n * m;\n case 'seconds':\n case 'second':\n case 'secs':\n case 'sec':\n case 's':\n return n * s;\n case 'milliseconds':\n case 'millisecond':\n case 'msecs':\n case 'msec':\n case 'ms':\n return n;\n default:\n return undefined;\n }\n}\n\n/**\n * Short format for `ms`.\n *\n * @param {Number} ms\n * @return {String}\n * @api private\n */\n\nfunction fmtShort(ms) {\n var msAbs = Math.abs(ms);\n if (msAbs >= d) {\n return Math.round(ms / d) + 'd';\n }\n if (msAbs >= h) {\n return Math.round(ms / h) + 'h';\n }\n if (msAbs >= m) {\n return Math.round(ms / m) + 'm';\n }\n if (msAbs >= s) {\n return Math.round(ms / s) + 's';\n }\n return ms + 'ms';\n}\n\n/**\n * Long format for `ms`.\n *\n * @param {Number} ms\n * @return {String}\n * @api private\n */\n\nfunction fmtLong(ms) {\n var msAbs = Math.abs(ms);\n if (msAbs >= d) {\n return plural(ms, msAbs, d, 'day');\n }\n if (msAbs >= h) {\n return plural(ms, msAbs, h, 'hour');\n }\n if (msAbs >= m) {\n return plural(ms, msAbs, m, 'minute');\n }\n if (msAbs >= s) {\n return plural(ms, msAbs, s, 'second');\n }\n return ms + ' ms';\n}\n\n/**\n * Pluralization helper.\n */\n\nfunction plural(ms, msAbs, n, name) {\n var isPlural = msAbs >= n * 1.5;\n return Math.round(ms / n) + ' ' + name + (isPlural ? 's' : '');\n}\n", "const digitCharacters = [\n \"0\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"5\",\n \"6\",\n \"7\",\n \"8\",\n \"9\",\n \"A\",\n \"B\",\n \"C\",\n \"D\",\n \"E\",\n \"F\",\n \"G\",\n \"H\",\n \"I\",\n \"J\",\n \"K\",\n \"L\",\n \"M\",\n \"N\",\n \"O\",\n \"P\",\n \"Q\",\n \"R\",\n \"S\",\n \"T\",\n \"U\",\n \"V\",\n \"W\",\n \"X\",\n \"Y\",\n \"Z\",\n \"a\",\n \"b\",\n \"c\",\n \"d\",\n \"e\",\n \"f\",\n \"g\",\n \"h\",\n \"i\",\n \"j\",\n \"k\",\n \"l\",\n \"m\",\n \"n\",\n \"o\",\n \"p\",\n \"q\",\n \"r\",\n \"s\",\n \"t\",\n \"u\",\n \"v\",\n \"w\",\n \"x\",\n \"y\",\n \"z\",\n \"#\",\n \"$\",\n \"%\",\n \"*\",\n \"+\",\n \",\",\n \"-\",\n \".\",\n \":\",\n \";\",\n \"=\",\n \"?\",\n \"@\",\n \"[\",\n \"]\",\n \"^\",\n \"_\",\n \"{\",\n \"|\",\n \"}\",\n \"~\",\n];\n\nexport const decode83 = (str: String) => {\n let value = 0;\n for (let i = 0; i < str.length; i++) {\n const c = str[i];\n const digit = digitCharacters.indexOf(c);\n value = value * 83 + digit;\n }\n return value;\n};\n\nexport const encode83 = (n: number, length: number): string => {\n var result = \"\";\n for (let i = 1; i <= length; i++) {\n let digit = (Math.floor(n) / Math.pow(83, length - i)) % 83;\n result += digitCharacters[Math.floor(digit)];\n }\n return result;\n};\n", "export const sRGBToLinear = (value: number) => {\n let v = value / 255;\n if (v <= 0.04045) {\n return v / 12.92;\n } else {\n return Math.pow((v + 0.055) / 1.055, 2.4);\n }\n};\n\nexport const linearTosRGB = (value: number) => {\n let v = Math.max(0, Math.min(1, value));\n if (v <= 0.0031308) {\n return Math.trunc(v * 12.92 * 255 + 0.5);\n } else {\n return Math.trunc((1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255 + 0.5);\n }\n};\n\nexport const sign = (n: number) => (n < 0 ? -1 : 1);\n\nexport const signPow = (val: number, exp: number) =>\n sign(val) * Math.pow(Math.abs(val), exp);\n", "export class ValidationError extends Error {\n constructor(message: string) {\n super(message);\n this.name = \"ValidationError\";\n this.message = message;\n }\n}\n", "import { decode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\n/**\n * Returns an error message if invalid or undefined if valid\n * @param blurhash\n */\nconst validateBlurhash = (blurhash: string) => {\n if (!blurhash || blurhash.length < 6) {\n throw new ValidationError(\n \"The blurhash string must be at least 6 characters\"\n );\n }\n\n const sizeFlag = decode83(blurhash[0]);\n const numY = Math.floor(sizeFlag / 9) + 1;\n const numX = (sizeFlag % 9) + 1;\n\n if (blurhash.length !== 4 + 2 * numX * numY) {\n throw new ValidationError(\n `blurhash length mismatch: length is ${\n blurhash.length\n } but it should be ${4 + 2 * numX * numY}`\n );\n }\n};\n\nexport const isBlurhashValid = (\n blurhash: string\n): { result: boolean; errorReason?: string } => {\n try {\n validateBlurhash(blurhash);\n } catch (error) {\n return { result: false, errorReason: error.message };\n }\n\n return { result: true };\n};\n\nconst decodeDC = (value: number) => {\n const intR = value >> 16;\n const intG = (value >> 8) & 255;\n const intB = value & 255;\n return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];\n};\n\nconst decodeAC = (value: number, maximumValue: number) => {\n const quantR = Math.floor(value / (19 * 19));\n const quantG = Math.floor(value / 19) % 19;\n const quantB = value % 19;\n\n const rgb = [\n signPow((quantR - 9) / 9, 2.0) * maximumValue,\n signPow((quantG - 9) / 9, 2.0) * maximumValue,\n signPow((quantB - 9) / 9, 2.0) * maximumValue,\n ];\n\n return rgb;\n};\n\nconst decode = (\n blurhash: string,\n width: number,\n height: number,\n punch?: number\n) => {\n validateBlurhash(blurhash);\n\n punch = punch | 1;\n\n const sizeFlag = decode83(blurhash[0]);\n const numY = Math.floor(sizeFlag / 9) + 1;\n const numX = (sizeFlag % 9) + 1;\n\n const quantisedMaximumValue = decode83(blurhash[1]);\n const maximumValue = (quantisedMaximumValue + 1) / 166;\n\n const colors = new Array(numX * numY);\n\n for (let i = 0; i < colors.length; i++) {\n if (i === 0) {\n const value = decode83(blurhash.substring(2, 6));\n colors[i] = decodeDC(value);\n } else {\n const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));\n colors[i] = decodeAC(value, maximumValue * punch);\n }\n }\n\n const bytesPerRow = width * 4;\n const pixels = new Uint8ClampedArray(bytesPerRow * height);\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n let r = 0;\n let g = 0;\n let b = 0;\n\n for (let j = 0; j < numY; j++) {\n for (let i = 0; i < numX; i++) {\n const basis =\n Math.cos((Math.PI * x * i) / width) *\n Math.cos((Math.PI * y * j) / height);\n let color = colors[i + j * numX];\n r += color[0] * basis;\n g += color[1] * basis;\n b += color[2] * basis;\n }\n }\n\n let intR = linearTosRGB(r);\n let intG = linearTosRGB(g);\n let intB = linearTosRGB(b);\n\n pixels[4 * x + 0 + y * bytesPerRow] = intR;\n pixels[4 * x + 1 + y * bytesPerRow] = intG;\n pixels[4 * x + 2 + y * bytesPerRow] = intB;\n pixels[4 * x + 3 + y * bytesPerRow] = 255; // alpha\n }\n }\n return pixels;\n};\n\nexport default decode;\n", "import { encode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\ntype NumberTriplet = [number, number, number];\n\nconst bytesPerPixel = 4;\n\nconst multiplyBasisFunction = (\n pixels: Uint8ClampedArray,\n width: number,\n height: number,\n basisFunction: (i: number, j: number) => number\n): NumberTriplet => {\n let r = 0;\n let g = 0;\n let b = 0;\n const bytesPerRow = width * bytesPerPixel;\n\n for (let x = 0; x < width; x++) {\n const bytesPerPixelX = bytesPerPixel * x;\n\n for (let y = 0; y < height; y++) {\n const basePixelIndex = bytesPerPixelX + y * bytesPerRow;\n const basis = basisFunction(x, y);\n r +=\n basis * sRGBToLinear(pixels[basePixelIndex]);\n g +=\n basis * sRGBToLinear(pixels[basePixelIndex + 1]);\n b +=\n basis * sRGBToLinear(pixels[basePixelIndex + 2]);\n }\n }\n\n let scale = 1 / (width * height);\n\n return [r * scale, g * scale, b * scale];\n};\n\nconst encodeDC = (value: NumberTriplet): number => {\n const roundedR = linearTosRGB(value[0]);\n const roundedG = linearTosRGB(value[1]);\n const roundedB = linearTosRGB(value[2]);\n return (roundedR << 16) + (roundedG << 8) + roundedB;\n};\n\nconst encodeAC = (value: NumberTriplet, maximumValue: number): number => {\n let quantR = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[0] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n let quantG = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[1] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n let quantB = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[2] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n\n return quantR * 19 * 19 + quantG * 19 + quantB;\n};\n\nconst encode = (\n pixels: Uint8ClampedArray,\n width: number,\n height: number,\n componentX: number,\n componentY: number\n): string => {\n if (componentX < 1 || componentX > 9 || componentY < 1 || componentY > 9) {\n throw new ValidationError(\"BlurHash must have between 1 and 9 components\");\n }\n if (width * height * 4 !== pixels.length) {\n throw new ValidationError(\"Width and height must match the pixels array\");\n }\n\n let factors: Array<[number, number, number]> = [];\n for (let y = 0; y < componentY; y++) {\n for (let x = 0; x < componentX; x++) {\n const normalisation = x == 0 && y == 0 ? 1 : 2;\n const factor = multiplyBasisFunction(\n pixels,\n width,\n height,\n (i: number, j: number) =>\n normalisation *\n Math.cos((Math.PI * x * i) / width) *\n Math.cos((Math.PI * y * j) / height)\n );\n factors.push(factor);\n }\n }\n\n const dc = factors[0];\n const ac = factors.slice(1);\n\n let hash = \"\";\n\n let sizeFlag = componentX - 1 + (componentY - 1) * 9;\n hash += encode83(sizeFlag, 1);\n\n let maximumValue: number;\n if (ac.length > 0) {\n let actualMaximumValue = Math.max(...ac.map((val) => Math.max(...val)));\n let quantisedMaximumValue = Math.floor(\n Math.max(0, Math.min(82, Math.floor(actualMaximumValue * 166 - 0.5)))\n );\n maximumValue = (quantisedMaximumValue + 1) / 166;\n hash += encode83(quantisedMaximumValue, 1);\n } else {\n maximumValue = 1;\n hash += encode83(0, 1);\n }\n\n hash += encode83(encodeDC(dc), 4);\n\n ac.forEach((factor) => {\n hash += encode83(encodeAC(factor, maximumValue), 2);\n });\n\n return hash;\n};\n\nexport default encode;\n", null, null, "import { decode } from 'blurhash'\nimport { createDebug } from '@bicycle-codes/debug'\nconst debug = createDebug()\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport class BlurHash extends HTMLElement {\n constructor () {\n super()\n const srcset = this.getAttribute('srcset')\n const placeholder = this.getAttribute('placeholder')\n if (!placeholder) throw new Error('not placeholder')\n\n document.body.style.setProperty('--blur-hash-time',\n this.getAttribute('time') || '0.6s')\n\n this.innerHTML = `<canvas\n class=\"blurry\"\n width=${this.getAttribute('width')}\n height=${this.getAttribute('height')}\n ></canvas>\n <img class=\"blurry\"\n ${srcset ? `srcset=\"${srcset}\"` : ''}\n alt=\"${this.getAttribute('alt')}\"\n content-visibility=\"${this.getAttribute('content-visibility') || 'auto'}\"\n decoding=\"${this.getAttribute('decoding') || 'async'}\"\n loading=\"${this.getAttribute('loading') || 'lazy'}\"\n class=\"image-element blurry\"\n src=\"${this.getAttribute('src')}\"\n />\n `\n }\n\n connectedCallback () {\n const width = parseInt(this.getAttribute('width') ?? '')\n const height = parseInt(this.getAttribute('height') ?? '')\n const placeholder = this.getAttribute('placeholder')\n if (!placeholder || !width || !height) {\n throw new Error('Missing attributes')\n }\n\n const pixels = decode(placeholder, width, height)\n const canvas = this.querySelector('canvas') as HTMLCanvasElement\n const ctx = canvas.getContext('2d')!\n const imageData = ctx.createImageData(width, height)\n imageData.data.set(pixels)\n ctx.putImageData(imageData, 0, 0)\n\n const img = this.querySelector('img')!\n\n img.addEventListener('load', () => {\n debug('loaded')\n canvas.style.display = 'none'\n img.classList.remove('blurry')\n img.classList.add('sharp')\n })\n\n debug('the image', img)\n }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../node_modules/@substrate-system/web-component/src/index.ts", "../node_modules/blurhash/src/base83.ts", "../node_modules/blurhash/src/utils.ts", "../node_modules/blurhash/src/error.ts", "../node_modules/blurhash/src/decode.ts", "../node_modules/blurhash/src/encode.ts", "../src/index.ts"],
|
|
4
|
+
"sourcesContent": ["export abstract class WebComponent extends window.HTMLElement {\n static NAME:string = ''\n NAME:string = ''\n\n static create (elementName:string) {\n return class extends WebComponent {\n static NAME = elementName\n NAME = elementName\n render () {}\n }\n }\n\n static define<T extends { new (...args:any[]):WebComponent; NAME:string }>(this:T) {\n if (!isRegistered(this.NAME)) {\n window.customElements.define(this.NAME, this)\n }\n }\n\n /**\n * Runs when the value of an attribute is changed.\n *\n * Depends on `static observedAttributes`.\n *\n * Should name methods like `handleChange_disabled`.\n *\n * @param {string} name The attribute name\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n async attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`]\n if (handler) {\n await handler.call(this, oldValue, newValue)\n }\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n abstract render ():any\n\n qs<K extends keyof HTMLElementTagNameMap>(selector:K):HTMLElementTagNameMap[K]|null;\n qs<E extends Element = Element>(selector:string):E|null;\n qs (selector:string):Element|null {\n return this.querySelector(selector)\n }\n\n qsa<K extends keyof HTMLElementTagNameMap>(selector:K):HTMLElementTagNameMap[K]|null;\n qsa<E extends Element = Element>(selector:string):E|null;\n qsa (selector:string):NodeListOf<Element> {\n return this.querySelectorAll(selector)\n }\n\n /**\n * Take a non-namepsaced event name, return namespace event name.\n *\n * @param {string} evType The non-namespace event name\n * @returns {string} Namespaced event name, eg, `my-component:click`\n */\n static event (evType:string):string {\n return eventName(this.NAME, evType)\n }\n\n /**\n * Emit a namespaced event.\n *\n * @param type (non-namespaced) event type string\n * @param opts `bubbles`, `detail`, and `cancelable`. Default is\n * `{ bubbles: true, cancelable: true }`\n * @returns {boolean}\n */\n emit<T = any> (type:string, opts:Partial<{\n bubbles:boolean,\n cancelable:boolean,\n detail:CustomEvent<T>['detail']\n }> = {}):boolean {\n const namespace = this.NAME\n const event = new CustomEvent<T>(`${namespace}:${type}`, {\n bubbles: (opts.bubbles === undefined) ? true : opts.bubbles,\n cancelable: (opts.cancelable === undefined) ? true : opts.cancelable,\n detail: opts.detail\n })\n\n return this.dispatchEvent(event)\n }\n\n /**\n * Create and emit an event, no namespacing.\n */\n dispatch<T> (type:string, opts:Partial<{\n bubbles:boolean,\n cancelable:boolean,\n detail:CustomEvent<T>['detail']\n }> = {}):boolean {\n const event = new CustomEvent(type, {\n bubbles: (opts.bubbles === undefined) ? true : opts.bubbles,\n cancelable: (opts.cancelable === undefined) ? true : opts.cancelable,\n detail: opts.detail\n })\n\n return this.dispatchEvent(event)\n }\n}\n\nfunction eventName (namespace:string, evType:string) {\n return `${namespace}:${evType}`\n}\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n return document.createElement(elName).constructor !== window.HTMLElement\n}\n", "const digitCharacters = [\n \"0\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"5\",\n \"6\",\n \"7\",\n \"8\",\n \"9\",\n \"A\",\n \"B\",\n \"C\",\n \"D\",\n \"E\",\n \"F\",\n \"G\",\n \"H\",\n \"I\",\n \"J\",\n \"K\",\n \"L\",\n \"M\",\n \"N\",\n \"O\",\n \"P\",\n \"Q\",\n \"R\",\n \"S\",\n \"T\",\n \"U\",\n \"V\",\n \"W\",\n \"X\",\n \"Y\",\n \"Z\",\n \"a\",\n \"b\",\n \"c\",\n \"d\",\n \"e\",\n \"f\",\n \"g\",\n \"h\",\n \"i\",\n \"j\",\n \"k\",\n \"l\",\n \"m\",\n \"n\",\n \"o\",\n \"p\",\n \"q\",\n \"r\",\n \"s\",\n \"t\",\n \"u\",\n \"v\",\n \"w\",\n \"x\",\n \"y\",\n \"z\",\n \"#\",\n \"$\",\n \"%\",\n \"*\",\n \"+\",\n \",\",\n \"-\",\n \".\",\n \":\",\n \";\",\n \"=\",\n \"?\",\n \"@\",\n \"[\",\n \"]\",\n \"^\",\n \"_\",\n \"{\",\n \"|\",\n \"}\",\n \"~\",\n];\n\nexport const decode83 = (str: String) => {\n let value = 0;\n for (let i = 0; i < str.length; i++) {\n const c = str[i];\n const digit = digitCharacters.indexOf(c);\n value = value * 83 + digit;\n }\n return value;\n};\n\nexport const encode83 = (n: number, length: number): string => {\n var result = \"\";\n for (let i = 1; i <= length; i++) {\n let digit = (Math.floor(n) / Math.pow(83, length - i)) % 83;\n result += digitCharacters[Math.floor(digit)];\n }\n return result;\n};\n", "export const sRGBToLinear = (value: number) => {\n let v = value / 255;\n if (v <= 0.04045) {\n return v / 12.92;\n } else {\n return Math.pow((v + 0.055) / 1.055, 2.4);\n }\n};\n\nexport const linearTosRGB = (value: number) => {\n let v = Math.max(0, Math.min(1, value));\n if (v <= 0.0031308) {\n return Math.trunc(v * 12.92 * 255 + 0.5);\n } else {\n return Math.trunc((1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255 + 0.5);\n }\n};\n\nexport const sign = (n: number) => (n < 0 ? -1 : 1);\n\nexport const signPow = (val: number, exp: number) =>\n sign(val) * Math.pow(Math.abs(val), exp);\n", "export class ValidationError extends Error {\n constructor(message: string) {\n super(message);\n this.name = \"ValidationError\";\n this.message = message;\n }\n}\n", "import { decode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\n/**\n * Returns an error message if invalid or undefined if valid\n * @param blurhash\n */\nconst validateBlurhash = (blurhash: string) => {\n if (!blurhash || blurhash.length < 6) {\n throw new ValidationError(\n \"The blurhash string must be at least 6 characters\"\n );\n }\n\n const sizeFlag = decode83(blurhash[0]);\n const numY = Math.floor(sizeFlag / 9) + 1;\n const numX = (sizeFlag % 9) + 1;\n\n if (blurhash.length !== 4 + 2 * numX * numY) {\n throw new ValidationError(\n `blurhash length mismatch: length is ${\n blurhash.length\n } but it should be ${4 + 2 * numX * numY}`\n );\n }\n};\n\nexport const isBlurhashValid = (\n blurhash: string\n): { result: boolean; errorReason?: string } => {\n try {\n validateBlurhash(blurhash);\n } catch (error) {\n return { result: false, errorReason: error.message };\n }\n\n return { result: true };\n};\n\nconst decodeDC = (value: number) => {\n const intR = value >> 16;\n const intG = (value >> 8) & 255;\n const intB = value & 255;\n return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];\n};\n\nconst decodeAC = (value: number, maximumValue: number) => {\n const quantR = Math.floor(value / (19 * 19));\n const quantG = Math.floor(value / 19) % 19;\n const quantB = value % 19;\n\n const rgb = [\n signPow((quantR - 9) / 9, 2.0) * maximumValue,\n signPow((quantG - 9) / 9, 2.0) * maximumValue,\n signPow((quantB - 9) / 9, 2.0) * maximumValue,\n ];\n\n return rgb;\n};\n\nconst decode = (\n blurhash: string,\n width: number,\n height: number,\n punch?: number\n) => {\n validateBlurhash(blurhash);\n\n punch = punch | 1;\n\n const sizeFlag = decode83(blurhash[0]);\n const numY = Math.floor(sizeFlag / 9) + 1;\n const numX = (sizeFlag % 9) + 1;\n\n const quantisedMaximumValue = decode83(blurhash[1]);\n const maximumValue = (quantisedMaximumValue + 1) / 166;\n\n const colors = new Array(numX * numY);\n\n for (let i = 0; i < colors.length; i++) {\n if (i === 0) {\n const value = decode83(blurhash.substring(2, 6));\n colors[i] = decodeDC(value);\n } else {\n const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));\n colors[i] = decodeAC(value, maximumValue * punch);\n }\n }\n\n const bytesPerRow = width * 4;\n const pixels = new Uint8ClampedArray(bytesPerRow * height);\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n let r = 0;\n let g = 0;\n let b = 0;\n\n for (let j = 0; j < numY; j++) {\n for (let i = 0; i < numX; i++) {\n const basis =\n Math.cos((Math.PI * x * i) / width) *\n Math.cos((Math.PI * y * j) / height);\n let color = colors[i + j * numX];\n r += color[0] * basis;\n g += color[1] * basis;\n b += color[2] * basis;\n }\n }\n\n let intR = linearTosRGB(r);\n let intG = linearTosRGB(g);\n let intB = linearTosRGB(b);\n\n pixels[4 * x + 0 + y * bytesPerRow] = intR;\n pixels[4 * x + 1 + y * bytesPerRow] = intG;\n pixels[4 * x + 2 + y * bytesPerRow] = intB;\n pixels[4 * x + 3 + y * bytesPerRow] = 255; // alpha\n }\n }\n return pixels;\n};\n\nexport default decode;\n", "import { encode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\ntype NumberTriplet = [number, number, number];\n\nconst bytesPerPixel = 4;\n\nconst multiplyBasisFunction = (\n pixels: Uint8ClampedArray,\n width: number,\n height: number,\n basisFunction: (i: number, j: number) => number\n): NumberTriplet => {\n let r = 0;\n let g = 0;\n let b = 0;\n const bytesPerRow = width * bytesPerPixel;\n\n for (let x = 0; x < width; x++) {\n const bytesPerPixelX = bytesPerPixel * x;\n\n for (let y = 0; y < height; y++) {\n const basePixelIndex = bytesPerPixelX + y * bytesPerRow;\n const basis = basisFunction(x, y);\n r +=\n basis * sRGBToLinear(pixels[basePixelIndex]);\n g +=\n basis * sRGBToLinear(pixels[basePixelIndex + 1]);\n b +=\n basis * sRGBToLinear(pixels[basePixelIndex + 2]);\n }\n }\n\n let scale = 1 / (width * height);\n\n return [r * scale, g * scale, b * scale];\n};\n\nconst encodeDC = (value: NumberTriplet): number => {\n const roundedR = linearTosRGB(value[0]);\n const roundedG = linearTosRGB(value[1]);\n const roundedB = linearTosRGB(value[2]);\n return (roundedR << 16) + (roundedG << 8) + roundedB;\n};\n\nconst encodeAC = (value: NumberTriplet, maximumValue: number): number => {\n let quantR = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[0] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n let quantG = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[1] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n let quantB = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[2] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n\n return quantR * 19 * 19 + quantG * 19 + quantB;\n};\n\nconst encode = (\n pixels: Uint8ClampedArray,\n width: number,\n height: number,\n componentX: number,\n componentY: number\n): string => {\n if (componentX < 1 || componentX > 9 || componentY < 1 || componentY > 9) {\n throw new ValidationError(\"BlurHash must have between 1 and 9 components\");\n }\n if (width * height * 4 !== pixels.length) {\n throw new ValidationError(\"Width and height must match the pixels array\");\n }\n\n let factors: Array<[number, number, number]> = [];\n for (let y = 0; y < componentY; y++) {\n for (let x = 0; x < componentX; x++) {\n const normalisation = x == 0 && y == 0 ? 1 : 2;\n const factor = multiplyBasisFunction(\n pixels,\n width,\n height,\n (i: number, j: number) =>\n normalisation *\n Math.cos((Math.PI * x * i) / width) *\n Math.cos((Math.PI * y * j) / height)\n );\n factors.push(factor);\n }\n }\n\n const dc = factors[0];\n const ac = factors.slice(1);\n\n let hash = \"\";\n\n let sizeFlag = componentX - 1 + (componentY - 1) * 9;\n hash += encode83(sizeFlag, 1);\n\n let maximumValue: number;\n if (ac.length > 0) {\n let actualMaximumValue = Math.max(...ac.map((val) => Math.max(...val)));\n let quantisedMaximumValue = Math.floor(\n Math.max(0, Math.min(82, Math.floor(actualMaximumValue * 166 - 0.5)))\n );\n maximumValue = (quantisedMaximumValue + 1) / 166;\n hash += encode83(quantisedMaximumValue, 1);\n } else {\n maximumValue = 1;\n hash += encode83(0, 1);\n }\n\n hash += encode83(encodeDC(dc), 4);\n\n ac.forEach((factor) => {\n hash += encode83(encodeAC(factor, maximumValue), 2);\n });\n\n return hash;\n};\n\nexport default encode;\n", "import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n time:number\n\n constructor () {\n super()\n // const srcset = this.getAttribute('srcset')\n const w = this.getAttribute('width')\n const h = this.getAttribute('height')\n const time = this.getAttribute('time')\n this.time = time ? parseInt(time) : 800\n\n this.style.width = '' + w\n this.style.height = '' + h\n\n document.body.style.setProperty('--blur-hash-time',\n time ? '.' + (parseInt(time) / 1000 + 's') : '0.8s')\n }\n\n /**\n * Change the image, and do the blur-up thing again.\n */\n reset (\n newSrc:string,\n alt:string,\n placeholder:string,\n newSrcset?:string|null,\n newSizes?:string|null,\n attrs:Partial<{\n srcset:string|null;\n width:string|null;\n height:string|null;\n time:number|null;\n }> = {}\n ):void {\n if (attrs.width) this.style.width = attrs.width\n if (attrs.height) this.style.height = attrs.height\n\n const width = (attrs.width ?\n parseInt(attrs.width) :\n parseInt(this.style.width))\n const height = (attrs.height ?\n parseInt(attrs.height) :\n parseInt(this.style.height))\n\n this.innerHTML = BlurHash.html({\n srcset: attrs.srcset,\n w: '' + width,\n h: '' + height,\n src: newSrc,\n alt\n })\n\n const pixels = decode(placeholder, width, height)\n const canvas = this.querySelector('canvas') as HTMLCanvasElement\n const ctx = canvas.getContext('2d')!\n const imageData = ctx.createImageData(width, height)\n imageData.data.set(pixels)\n ctx.putImageData(imageData, 0, 0)\n\n this.setAttribute('src', newSrc)\n this.setAttribute('placeholder', placeholder)\n\n const img = this.querySelector('img')!\n if (newSrcset) img.setAttribute('srcset', newSrcset)\n if (newSizes) img.setAttribute('sizes', newSizes)\n\n img.addEventListener('load', () => {\n canvas.style.display = 'none'\n img.classList.remove('blurry')\n img.classList.add('sharp')\n })\n }\n\n connectedCallback () {\n const width = parseInt(this.getAttribute('width') ?? '')\n const height = parseInt(this.getAttribute('height') ?? '')\n const placeholder = this.getAttribute('placeholder')\n if (!placeholder || !width || !height) {\n throw new Error('Missing attributes')\n }\n\n this.innerHTML = this.render()\n const pixels = decode(placeholder, width, height)\n const canvas = this.querySelector('canvas') as HTMLCanvasElement\n const ctx = canvas.getContext('2d')!\n const imageData = ctx.createImageData(width, height)\n imageData.data.set(pixels)\n ctx.putImageData(imageData, 0, 0)\n\n const img = this.querySelector('img')!\n\n img.addEventListener('load', () => {\n canvas.style.display = 'none'\n img.classList.remove('blurry')\n img.classList.add('sharp')\n })\n }\n\n static html (attrs:{\n alt:string;\n srcset?:string|null;\n w?:string|null;\n h?:string|null;\n time?:number;\n contentVisibility?:'visible'|'auto'|'hidden'|null;\n decoding?:'sync'|'async'|'auto'|null;\n loading?:'lazy'|'eager'|'auto'|null;\n src:string;\n }) {\n const {\n srcset,\n w,\n h,\n alt,\n contentVisibility,\n decoding,\n loading,\n src\n } = attrs\n\n return `<canvas\n class=\"blurry\"\n width=${w}\n height=${h}\n ></canvas>\n\n <img class=\"blurry\"\n ${srcset ? `srcset=\"${srcset}\"` : ''}\n alt=\"${alt}\"\n content-visibility=\"${contentVisibility || 'auto'}\"\n decoding=\"${decoding || 'async'}\"\n loading=\"${loading || 'lazy'}\"\n class=\"image-element blurry\"\n src=\"${src}\"\n />`\n }\n\n render ():string {\n const srcset = this.getAttribute('srcset')\n const w = this.getAttribute('width')\n const h = this.getAttribute('height')\n const time = this.getAttribute('time')\n this.time = time ? parseInt(time) : 800\n const src = this.getAttribute('src')\n const alt = this.getAttribute('alt')\n if (!src) throw new Error('Not src')\n if (!alt) throw new Error('Not alt')\n\n return BlurHash.html({ srcset, w, h, src, alt })\n }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
|
|
5
|
+
"mappings": "sKAAsBA,EAAf,MAAeC,UAAqB,OAAO,WAAY,OAAA,CAAAC,EAAA,qBAA9D,MAA8D,CAAAA,EAAA,KAAA,cAAA,CAAA,CAC1D,OAAO,KAAc,GACrB,KAAc,GAEd,OAAO,OAAQC,EAAoB,CAC/B,OAAO,cAAcF,CAAa,CAC9B,OAAO,KAAOE,EACd,KAAOA,EACP,QAAU,CAAC,CACf,CACJ,CAEA,OAAO,QAA4E,CAC1EC,EAAa,KAAK,IAAI,GACvB,OAAO,eAAe,OAAO,KAAK,KAAM,IAAI,CAEpD,CAaA,MAAM,yBAA0BC,EAAaC,EAAiBC,EAAiB,CAC3E,IAAMC,EAAU,KAAK,gBAAgBH,CAAI,EAAE,EACvCG,GACA,MAAMA,EAAQ,KAAK,KAAMF,EAAUC,CAAQ,EAE/C,KAAK,OAAO,CAChB,CAEA,mBAAqB,CACjB,KAAK,OAAO,CAChB,CAMA,GAAIE,EAA8B,CAC9B,OAAO,KAAK,cAAcA,CAAQ,CACtC,CAIA,IAAKA,EAAqC,CACtC,OAAO,KAAK,iBAAiBA,CAAQ,CACzC,CAQA,OAAO,MAAOC,EAAsB,CAChC,OAAOC,EAAU,KAAK,KAAMD,CAAM,CACtC,CAUA,KAAeE,EAAaC,EAIvB,CAAC,EAAW,CACb,IAAMC,EAAY,KAAK,KACjBC,EAAQ,IAAI,YAAe,GAAGD,CAAS,IAAIF,CAAI,GAAI,CACrD,QAAUC,EAAK,UAAY,OAAa,GAAOA,EAAK,QACpD,WAAaA,EAAK,aAAe,OAAa,GAAOA,EAAK,WAC1D,OAAQA,EAAK,MACjB,CAAC,EAED,OAAO,KAAK,cAAcE,CAAK,CACnC,CAKA,SAAaH,EAAaC,EAIrB,CAAC,EAAW,CACb,IAAME,EAAQ,IAAI,YAAYH,EAAM,CAChC,QAAUC,EAAK,UAAY,OAAa,GAAOA,EAAK,QACpD,WAAaA,EAAK,aAAe,OAAa,GAAOA,EAAK,WAC1D,OAAQA,EAAK,MACjB,CAAC,EAED,OAAO,KAAK,cAAcE,CAAK,CACnC,CACJ,EAEA,SAASJ,EAAWG,EAAkBJ,EAAe,CACjD,MAAO,GAAGI,CAAS,IAAIJ,CAAM,EACjC,CAFSR,EAAAS,EAAA,aAAAT,EAAAS,EAAA,WAAA,EAWF,SAASP,EAAcY,EAAuB,CACjD,OAAO,SAAS,cAAcA,CAAM,EAAE,cAAgB,OAAO,WACjE,CAFgBd,EAAAE,EAAA,gBAAAF,EAAAE,EAAA,cAAA,ECrHhB,IAAMa,EAAkB,CACtB,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,GACF,EAEaC,EAAYC,EAAAC,GAAgB,CACvC,IAAIC,EAAQ,EACZ,QAASC,EAAI,EAAGA,EAAIF,EAAI,OAAQE,IAAK,CACnC,IAAMC,EAAIH,EAAIE,CAAA,EACRE,EAAQP,EAAgB,QAAQM,CAAC,EACvCF,EAAQA,EAAQ,GAAKG,CACvB,CACA,OAAOH,CACT,EARyB,KCtFlB,IAAMI,EAAgBC,EAAAC,GAAkB,CAC7C,IAAIC,EAAID,EAAQ,IAChB,OAAIC,GAAK,OACAA,EAAI,MAEJ,KAAK,KAAKA,EAAI,MAAS,MAAO,GAAG,CAE5C,EAP6B,KAShBC,EAAgBH,EAAAC,GAAkB,CAC7C,IAAIC,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGD,CAAK,CAAC,EACtC,OAAIC,GAAK,SACA,KAAK,MAAMA,EAAI,MAAQ,IAAM,EAAG,EAEhC,KAAK,OAAO,MAAQ,KAAK,IAAIA,EAAG,iBAAO,EAAI,MAAS,IAAM,EAAG,CAExE,EAP6B,KAShBE,EAAQJ,EAAAC,GAAeA,EAAI,EAAI,GAAK,EAA5B,KAERI,EAAUL,EAAA,CAACC,EAAaC,IACnCE,EAAKH,CAAG,EAAI,KAAK,IAAI,KAAK,IAAIA,CAAG,EAAGC,CAAG,EADlB,KCpBVI,EAAN,cAA8B,KAAM,CFA3C,MEA2C,CAAAN,EAAA,UACzC,YAAY,EAAiB,CAC3B,MAAM,CAAO,EACb,KAAK,KAAO,kBACZ,KAAK,QAAU,CACjB,CACF,ECEMO,EAAoBP,EAAAC,GAAqB,CAC7C,GAAI,CAACA,GAAYA,EAAS,OAAS,EACjC,MAAM,IAAIK,EACR,mDACF,EAGF,IAAMJ,EAAWM,EAASP,EAAS,CAAA,CAAE,EAC/BQ,EAAO,KAAK,MAAMP,EAAW,CAAC,EAAI,EAClCQ,EAAQR,EAAW,EAAK,EAE9B,GAAID,EAAS,SAAW,EAAI,EAAIS,EAAOD,EACrC,MAAM,IAAIH,EACR,uCACEL,EAAS,MAAA,qBACU,EAAI,EAAIS,EAAOD,CAAA,EACtC,CAEJ,EAlB0B,KAA1B,IAgCME,EAAYC,EAAAC,GAAkB,CAClC,IAAMC,EAAOD,GAAS,GAChBE,EAAQF,GAAS,EAAK,IACtBG,EAAOH,EAAQ,IACrB,MAAO,CAACI,EAAaH,CAAI,EAAGG,EAAaF,CAAI,EAAGE,EAAaD,CAAI,CAAC,CACpE,EALkB,KAOZE,EAAWN,EAAA,CAACC,EAAeC,IAAyB,CACxD,IAAMC,EAAS,KAAK,MAAMF,EAAS,GAAQ,EACrCG,EAAS,KAAK,MAAMH,EAAQ,EAAE,EAAI,GAClCM,EAASN,EAAQ,GAQvB,MANY,CACVO,GAASL,EAAS,GAAK,EAAG,CAAG,EAAID,EACjCM,GAASJ,EAAS,GAAK,EAAG,CAAG,EAAIF,EACjCM,GAASD,EAAS,GAAK,EAAG,CAAG,EAAIL,CACnC,CAGF,EAZiB,KAcXO,EAAST,EAAA,CACbC,EACAC,EACAC,EACAC,IACG,CACHM,EAAiBT,CAAQ,EAEzBG,EAAQA,EAAQ,EAEhB,IAAMG,EAAWI,EAASV,EAAS,CAAA,CAAE,EAC/BW,EAAO,KAAK,MAAML,EAAW,CAAC,EAAI,EAClCM,EAAQN,EAAW,EAAK,EAGxBO,GADwBH,EAASV,EAAS,CAAA,CAAE,EACJ,GAAK,IAE7Cc,EAAS,IAAI,MAAMF,EAAOD,CAAI,EAEpC,QAASI,EAAI,EAAGA,EAAID,EAAO,OAAQC,IACjC,GAAIA,IAAM,EAAG,CACX,IAAMC,EAAQN,EAASV,EAAS,UAAU,EAAG,CAAC,CAAC,EAC/Cc,EAAOC,CAAA,EAAKjB,EAASkB,CAAK,CAC5B,KAAO,CACL,IAAMA,EAAQN,EAASV,EAAS,UAAU,EAAIe,EAAI,EAAG,EAAIA,EAAI,CAAC,CAAC,EAC/DD,EAAOC,CAAA,EAAKV,EAASW,EAAOH,EAAeV,CAAK,CAClD,CAGF,IAAMc,EAAchB,EAAQ,EACtBiB,EAAS,IAAI,kBAAkBD,EAAcf,CAAM,EAEzD,QAASa,EAAI,EAAGA,EAAIb,EAAQa,IAC1B,QAASC,EAAI,EAAGA,EAAIf,EAAOe,IAAK,CAC9B,IAAIG,EAAI,EACJC,EAAI,EACJC,EAAI,EAER,QAASC,EAAI,EAAGA,EAAIX,EAAMW,IACxB,QAASC,EAAI,EAAGA,EAAIX,EAAMW,IAAK,CAC7B,IAAMC,EACJ,KAAK,IAAK,KAAK,GAAKR,EAAIO,EAAKtB,CAAK,EAClC,KAAK,IAAK,KAAK,GAAKc,EAAIO,EAAKpB,CAAM,EACjCuB,EAAQX,EAAOS,EAAID,EAAIV,CAAA,EAC3BO,GAAKM,EAAM,CAAA,EAAKD,EAChBJ,GAAKK,EAAM,CAAA,EAAKD,EAChBH,GAAKI,EAAM,CAAA,EAAKD,CAClB,CAGF,IAAIE,EAAOC,EAAaR,CAAC,EACrBS,EAAOD,EAAaP,CAAC,EACrBS,EAAOF,EAAaN,CAAC,EAEzBH,EAAO,EAAIF,EAAI,EAAID,EAAIE,CAAA,EAAeS,EACtCR,EAAO,EAAIF,EAAI,EAAID,EAAIE,CAAA,EAAeW,EACtCV,EAAO,EAAIF,EAAI,EAAID,EAAIE,CAAA,EAAeY,EACtCX,EAAO,EAAIF,EAAI,EAAID,EAAIE,CAAA,EAAe,GACxC,CAEF,OAAOC,CACT,EA7De,KA+DRY,EAAQtB,EElHR,IAAMuB,EAAN,MAAMC,UAAiBC,EAAa,OAAO,WAAW,CAAE,CAV/D,MAU+D,CAAAC,EAAA,iBAC3D,KAEA,aAAe,CACX,MAAM,EAEN,IAAMC,EAAI,KAAK,aAAa,OAAO,EAC7BC,EAAI,KAAK,aAAa,QAAQ,EAC9BC,EAAO,KAAK,aAAa,MAAM,EACrC,KAAK,KAAOA,EAAO,SAASA,CAAI,EAAI,IAEpC,KAAK,MAAM,MAAQ,GAAKF,EACxB,KAAK,MAAM,OAAS,GAAKC,EAEzB,SAAS,KAAK,MAAM,YAAY,mBAC5BC,EAAO,KAAO,SAASA,CAAI,EAAI,IAAO,KAAO,MAAM,CAC3D,CAKA,MACIC,EACAC,EACAC,EACAC,EACAC,EACAC,EAKK,CAAC,EACH,CACCA,EAAM,QAAO,KAAK,MAAM,MAAQA,EAAM,OACtCA,EAAM,SAAQ,KAAK,MAAM,OAASA,EAAM,QAE5C,IAAMC,EAASD,EAAM,MACjB,SAASA,EAAM,KAAK,EACpB,SAAS,KAAK,MAAM,KAAK,EACvBE,EAAUF,EAAM,OAClB,SAASA,EAAM,MAAM,EACrB,SAAS,KAAK,MAAM,MAAM,EAE9B,KAAK,UAAYX,EAAS,KAAK,CAC3B,OAAQW,EAAM,OACd,EAAG,GAAKC,EACR,EAAG,GAAKC,EACR,IAAKP,EACL,IAAAC,CACJ,CAAC,EAED,IAAMO,EAASC,EAAOP,EAAaI,EAAOC,CAAM,EAC1CG,EAAS,KAAK,cAAc,QAAQ,EACpCC,EAAMD,EAAO,WAAW,IAAI,EAC5BE,EAAYD,EAAI,gBAAgBL,EAAOC,CAAM,EACnDK,EAAU,KAAK,IAAIJ,CAAM,EACzBG,EAAI,aAAaC,EAAW,EAAG,CAAC,EAEhC,KAAK,aAAa,MAAOZ,CAAM,EAC/B,KAAK,aAAa,cAAeE,CAAW,EAE5C,IAAMW,EAAM,KAAK,cAAc,KAAK,EAChCV,GAAWU,EAAI,aAAa,SAAUV,CAAS,EAC/CC,GAAUS,EAAI,aAAa,QAAST,CAAQ,EAEhDS,EAAI,iBAAiB,OAAQ,IAAM,CAC/BH,EAAO,MAAM,QAAU,OACvBG,EAAI,UAAU,OAAO,QAAQ,EAC7BA,EAAI,UAAU,IAAI,OAAO,CAC7B,CAAC,CACL,CAEA,mBAAqB,CACjB,IAAMP,EAAQ,SAAS,KAAK,aAAa,OAAO,GAAK,EAAE,EACjDC,EAAS,SAAS,KAAK,aAAa,QAAQ,GAAK,EAAE,EACnDL,EAAc,KAAK,aAAa,aAAa,EACnD,GAAI,CAACA,GAAe,CAACI,GAAS,CAACC,EAC3B,MAAM,IAAI,MAAM,oBAAoB,EAGxC,KAAK,UAAY,KAAK,OAAO,EAC7B,IAAMC,EAASC,EAAOP,EAAaI,EAAOC,CAAM,EAC1CG,EAAS,KAAK,cAAc,QAAQ,EACpCC,EAAMD,EAAO,WAAW,IAAI,EAC5BE,EAAYD,EAAI,gBAAgBL,EAAOC,CAAM,EACnDK,EAAU,KAAK,IAAIJ,CAAM,EACzBG,EAAI,aAAaC,EAAW,EAAG,CAAC,EAEhC,IAAMC,EAAM,KAAK,cAAc,KAAK,EAEpCA,EAAI,iBAAiB,OAAQ,IAAM,CAC/BH,EAAO,MAAM,QAAU,OACvBG,EAAI,UAAU,OAAO,QAAQ,EAC7BA,EAAI,UAAU,IAAI,OAAO,CAC7B,CAAC,CACL,CAEA,OAAO,KAAMR,EAUV,CACC,GAAM,CACF,OAAAS,EACA,EAAAjB,EACA,EAAAC,EACA,IAAAG,EACA,kBAAAc,EACA,SAAAC,EACA,QAAAC,EACA,IAAAC,CACJ,EAAIb,EAEJ,MAAO;AAAA;AAAA,oBAEKR,CAAC;AAAA,qBACAC,CAAC;AAAA;AAAA;AAAA;AAAA,cAIRgB,EAAS,WAAWA,CAAM,IAAM,EAAE;AAAA,mBAC7Bb,CAAG;AAAA,kCACYc,GAAqB,MAAM;AAAA,wBACrCC,GAAY,OAAO;AAAA,uBACpBC,GAAW,MAAM;AAAA;AAAA,mBAErBC,CAAG;AAAA,WAElB,CAEA,QAAiB,CACb,IAAMJ,EAAS,KAAK,aAAa,QAAQ,EACnCjB,EAAI,KAAK,aAAa,OAAO,EAC7BC,EAAI,KAAK,aAAa,QAAQ,EAC9BC,EAAO,KAAK,aAAa,MAAM,EACrC,KAAK,KAAOA,EAAO,SAASA,CAAI,EAAI,IACpC,IAAMmB,EAAM,KAAK,aAAa,KAAK,EAC7BjB,EAAM,KAAK,aAAa,KAAK,EACnC,GAAI,CAACiB,EAAK,MAAM,IAAI,MAAM,SAAS,EACnC,GAAI,CAACjB,EAAK,MAAM,IAAI,MAAM,SAAS,EAEnC,OAAOP,EAAS,KAAK,CAAE,OAAAoB,EAAQ,EAAAjB,EAAG,EAAAC,EAAG,IAAAoB,EAAK,IAAAjB,CAAI,CAAC,CACnD,CACJ,EAEA,eAAe,OAAO,YAAaR,CAAQ",
|
|
6
|
+
"names": ["WebComponent", "_WebComponent", "__name", "elementName", "isRegistered", "name", "oldValue", "newValue", "handler", "selector", "evType", "eventName", "type", "opts", "namespace", "event", "elName", "q", "x", "__name", "t", "e", "r", "n", "l", "f", "__name", "t", "e", "h", "F", "M", "d", "C", "x", "r", "n", "z", "__name", "t", "e", "r", "n", "f", "L", "l", "M", "U", "C", "x", "m", "b", "i", "u", "o", "a", "c", "s", "y", "B", "R", "w", "P", "G", "T", "V", "h", "I", "E", "j", "BlurHash", "_BlurHash", "WebComponent", "__name", "w", "h", "time", "newSrc", "alt", "placeholder", "newSrcset", "newSizes", "attrs", "width", "height", "pixels", "j", "canvas", "ctx", "imageData", "img", "srcset", "contentVisibility", "decoding", "loading", "src"]
|
|
7
7
|
}
|
package/dist/meta.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"inputs": {
|
|
3
3
|
"src/index.ts": {
|
|
4
|
-
"bytes":
|
|
4
|
+
"bytes": 4922,
|
|
5
5
|
"imports": [],
|
|
6
6
|
"format": "esm"
|
|
7
7
|
}
|
|
@@ -11,17 +11,17 @@
|
|
|
11
11
|
"imports": [],
|
|
12
12
|
"exports": [],
|
|
13
13
|
"inputs": {},
|
|
14
|
-
"bytes":
|
|
14
|
+
"bytes": 7878
|
|
15
15
|
},
|
|
16
16
|
"dist/index.js": {
|
|
17
17
|
"imports": [
|
|
18
18
|
{
|
|
19
|
-
"path": "
|
|
19
|
+
"path": "@substrate-system/web-component",
|
|
20
20
|
"kind": "import-statement",
|
|
21
21
|
"external": true
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
|
-
"path": "
|
|
24
|
+
"path": "blurhash",
|
|
25
25
|
"kind": "import-statement",
|
|
26
26
|
"external": true
|
|
27
27
|
}
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"entryPoint": "src/index.ts",
|
|
33
33
|
"inputs": {
|
|
34
34
|
"src/index.ts": {
|
|
35
|
-
"bytesInOutput":
|
|
35
|
+
"bytesInOutput": 3792
|
|
36
36
|
}
|
|
37
37
|
},
|
|
38
|
-
"bytes":
|
|
38
|
+
"bytes": 3978
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
}
|
package/dist/style.css
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
blur-hash {
|
|
2
2
|
overflow: hidden;
|
|
3
|
+
display: block;
|
|
3
4
|
}
|
|
4
5
|
|
|
5
6
|
blur-hash canvas {
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
transition: opacity var(--blur-hash-time, 0.8s);
|
|
8
|
+
opacity: var(--blur-hash-opacity, 0.6);
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
blur-hash img {
|
|
11
12
|
transition: opacity 0.6s;
|
|
13
|
+
object-fit: cover;
|
|
12
14
|
}
|
|
13
15
|
|
|
14
|
-
blur-hash img
|
|
15
|
-
opacity: 0.
|
|
16
|
+
.blurry:is(blur-hash img) {
|
|
17
|
+
opacity: var(--blur-hash-opacity, 0.2);
|
|
16
18
|
filter: blur(30px);
|
|
17
19
|
}
|
|
18
20
|
|
|
19
|
-
blur-hash img
|
|
21
|
+
.sharp:is(blur-hash img) {
|
|
20
22
|
opacity: 1;
|
|
21
|
-
animation: sharpen 0.8s both;
|
|
23
|
+
animation: sharpen var(--blur-hash-time, 0.8s) both;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
@keyframes sharpen {
|
|
@@ -30,4 +32,4 @@ blur-hash img.sharp {
|
|
|
30
32
|
}
|
|
31
33
|
}
|
|
32
34
|
|
|
33
|
-
/*# sourceMappingURL=data:application/json;base64,
|
|
35
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSxnQkFBZ0I7SUFDaEIsY0FBYztBQXFCbEI7O0FBbkJJO1FBQ0ksK0NBQStDO1FBQy9DLHNDQUFzQztJQUMxQzs7QUFFQTtRQUNJLHdCQUF3QjtRQUN4QixpQkFBaUI7SUFXckI7O0FBVEk7WUFDSSxzQ0FBc0M7WUFDdEMsa0JBQWtCO1FBQ3RCOztBQUVBO1lBQ0ksVUFBVTtZQUNWLG1EQUFtRDtRQUN2RDs7QUFJUjtJQUNJO1FBQ0ksa0JBQWtCO0lBQ3RCO0lBQ0E7UUFDSTtJQUNKO0FBQ0oiLCJmaWxlIjoic3JjL2luZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJsdXItaGFzaCB7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBkaXNwbGF5OiBibG9jaztcblxuICAgICYgY2FudmFzIHtcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSB2YXIoLS1ibHVyLWhhc2gtdGltZSwgMC44cyk7XG4gICAgICAgIG9wYWNpdHk6IHZhcigtLWJsdXItaGFzaC1vcGFjaXR5LCAwLjYpO1xuICAgIH1cblxuICAgICYgaW1nIHtcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjZzO1xuICAgICAgICBvYmplY3QtZml0OiBjb3ZlcjtcblxuICAgICAgICAmLmJsdXJyeSB7XG4gICAgICAgICAgICBvcGFjaXR5OiB2YXIoLS1ibHVyLWhhc2gtb3BhY2l0eSwgMC4yKTtcbiAgICAgICAgICAgIGZpbHRlcjogYmx1cigzMHB4KTtcbiAgICAgICAgfVxuXG4gICAgICAgICYuc2hhcnAge1xuICAgICAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgICAgICAgIGFuaW1hdGlvbjogc2hhcnBlbiB2YXIoLS1ibHVyLWhhc2gtdGltZSwgMC44cykgYm90aDtcbiAgICAgICAgfVxuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzaGFycGVuIHtcbiAgICBmcm9tIHtcbiAgICAgICAgZmlsdGVyOiBibHVyKDMwcHgpO1xuICAgIH1cbiAgICB0byB7XG4gICAgICAgIGZpbHRlcjogYmx1cigwcHgpXG4gICAgfVxufVxuIl19 */
|
package/dist/style.min.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
blur-hash{overflow:hidden}blur-hash canvas{
|
|
2
|
-
/*# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
blur-hash{display:block;overflow:hidden}blur-hash canvas{opacity:var(--blur-hash-opacity,.6);transition:opacity var(--blur-hash-time,.8s)}blur-hash img{object-fit:cover;transition:opacity .6s}.blurry:is(blur-hash img){filter:blur(30px);opacity:var(--blur-hash-opacity,.2)}.sharp:is(blur-hash img){animation:sharpen var(--blur-hash-time,.8s) both;opacity:1}@keyframes sharpen{0%{filter:blur(30px)}to{filter:blur(0)}}
|
|
2
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsVUFFSSxhQUFjLENBRGQsZUFzQkosQ0FuQkksaUJBRUksbUNBQXNDLENBRHRDLDRDQUVKLENBRUEsY0FFSSxnQkFBaUIsQ0FEakIsc0JBWUosQ0FUSSwwQkFFSSxpQkFBa0IsQ0FEbEIsbUNBRUosQ0FFQSx5QkFFSSxnREFBbUQsQ0FEbkQsU0FFSixDQUlSLG1CQUNJLEdBQ0ksaUJBQ0osQ0FDQSxHQUNJLGNBQ0osQ0FDSiIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYmx1ci1oYXNoIHtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuXG4gICAgJiBjYW52YXMge1xuICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IHZhcigtLWJsdXItaGFzaC10aW1lLCAwLjhzKTtcbiAgICAgICAgb3BhY2l0eTogdmFyKC0tYmx1ci1oYXNoLW9wYWNpdHksIDAuNik7XG4gICAgfVxuXG4gICAgJiBpbWcge1xuICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuNnM7XG4gICAgICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuXG4gICAgICAgICYuYmx1cnJ5IHtcbiAgICAgICAgICAgIG9wYWNpdHk6IHZhcigtLWJsdXItaGFzaC1vcGFjaXR5LCAwLjIpO1xuICAgICAgICAgICAgZmlsdGVyOiBibHVyKDMwcHgpO1xuICAgICAgICB9XG5cbiAgICAgICAgJi5zaGFycCB7XG4gICAgICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICAgICAgYW5pbWF0aW9uOiBzaGFycGVuIHZhcigtLWJsdXItaGFzaC10aW1lLCAwLjhzKSBib3RoO1xuICAgICAgICB9XG4gICAgfVxufVxuXG5Aa2V5ZnJhbWVzIHNoYXJwZW4ge1xuICAgIGZyb20ge1xuICAgICAgICBmaWx0ZXI6IGJsdXIoMzBweCk7XG4gICAgfVxuICAgIHRvIHtcbiAgICAgICAgZmlsdGVyOiBibHVyKDBweClcbiAgICB9XG59XG4iXX0= */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@substrate-system/blur-hash",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "A blurry placeholder image web component",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"scripts": {
|
|
14
14
|
"lint": "eslint \"./**/*.{ts,js}\"",
|
|
15
15
|
"build-tests": "esbuild test/index.ts --target=es2020 --bundle --keep-names > test/test-bundle.js",
|
|
16
|
-
"test": "npm run
|
|
16
|
+
"test": "npm run build && npm run build-tests && npm run test-tape-run && npm run test-bin",
|
|
17
17
|
"test-bin": "npm run build-bin && esbuild ./test/bin.ts > ./test/bin.js && node ./test/bin.js | tap-spec",
|
|
18
18
|
"test-tape-run": "cat test/index.html | tape-run --input=html --static=test | tap-spec",
|
|
19
19
|
"build-css": "postcss src/index.css --use postcss-nesting > dist/style.css",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"build-esm:min": "esbuild ./src/*.ts --format=esm --keep-names --bundle --tsconfig=tsconfig.build.json --minify --out-extension:.js=.min.js --outdir=./dist --sourcemap",
|
|
24
24
|
"build-example": "mkdir -p ./public && rm -rf ./public/* && vite --base=\"/blur-hash\" build",
|
|
25
25
|
"build-docs": "typedoc --tsconfig tsconfig.build.json ./src/index.ts",
|
|
26
|
-
"build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-cjs && npm run build-esm && npm run build-esm:min && npm run build-css && npm run build-css:min",
|
|
27
|
-
"build-bin": "mkdir -p dist/bin && esbuild ./bin/index.ts > ./dist/bin/index.js",
|
|
26
|
+
"build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-cjs && npm run build-esm && npm run build-esm:min && npm run build-bin && npm run build-css && npm run build-css:min",
|
|
27
|
+
"build-bin": "mkdir -p dist/bin && esbuild --platform=node ./bin/index.ts > ./dist/bin/index.js",
|
|
28
28
|
"start": "vite",
|
|
29
29
|
"preversion": "npm run lint",
|
|
30
30
|
"version": "markdown-toc --maxdepth 3 -i README.md && auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md README.md",
|
|
@@ -32,31 +32,32 @@
|
|
|
32
32
|
"prepublishOnly": "npm run build"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
+
"@substrate-system/web-component": "^0.0.22",
|
|
35
36
|
"blurhash": "^2.0.5",
|
|
36
|
-
"image-size": "^
|
|
37
|
-
"yargs": "^
|
|
37
|
+
"image-size": "^2.0.2",
|
|
38
|
+
"yargs": "^18.0.0"
|
|
38
39
|
},
|
|
39
40
|
"devDependencies": {
|
|
40
|
-
"@
|
|
41
|
-
"@
|
|
42
|
-
"@
|
|
43
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
44
|
-
"@typescript-eslint/parser": "^
|
|
41
|
+
"@substrate-system/debug": "^0.7.2",
|
|
42
|
+
"@substrate-system/dom": "^0.1.0",
|
|
43
|
+
"@substrate-system/tapzero": "^0.10.0",
|
|
44
|
+
"@typescript-eslint/eslint-plugin": "^8.0.0",
|
|
45
|
+
"@typescript-eslint/parser": "^8.0.0",
|
|
45
46
|
"auto-changelog": "^2.4.0",
|
|
46
47
|
"cssnano": "^7.0.3",
|
|
47
|
-
"esbuild": "^0.
|
|
48
|
+
"esbuild": "^0.25.0",
|
|
48
49
|
"eslint": "^8.57.0",
|
|
49
50
|
"eslint-config-standard": "^17.1.0",
|
|
50
51
|
"inkjet": "^3.0.0",
|
|
51
52
|
"markdown-toc": "^1.2.0",
|
|
52
53
|
"postcss": "^8.4.38",
|
|
53
54
|
"postcss-cli": "^11.0.0",
|
|
54
|
-
"postcss-nesting": "^
|
|
55
|
+
"postcss-nesting": "^13.0.0",
|
|
55
56
|
"tap-spec": "^5.0.0",
|
|
56
57
|
"tape-run": "^11.0.0",
|
|
57
|
-
"typedoc": "^0.
|
|
58
|
+
"typedoc": "^0.28.1",
|
|
58
59
|
"typescript": "^5.4.5",
|
|
59
|
-
"vite": "^
|
|
60
|
+
"vite": "^6.0.1"
|
|
60
61
|
},
|
|
61
62
|
"exports": {
|
|
62
63
|
".": {
|