@substrate-system/blur-hash 0.0.4 → 0.0.6

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.
Files changed (14) hide show
  1. package/README.md +56 -28
  2. package/dist/bin/index.js +3 -3
  3. package/dist/index.cjs +30 -25
  4. package/dist/index.cjs.map +2 -2
  5. package/dist/index.d.ts +22 -17
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +30 -25
  8. package/dist/index.js.map +2 -2
  9. package/dist/index.min.js +10 -9
  10. package/dist/index.min.js.map +3 -3
  11. package/dist/meta.json +4 -4
  12. package/dist/style.css +3 -3
  13. package/dist/style.min.css +2 -2
  14. package/package.json +21 -19
package/README.md CHANGED
@@ -19,7 +19,7 @@ with the [blur-hash algorithm](https://blurha.sh/), as a [web component](https:/
19
19
 
20
20
  <!-- toc -->
21
21
 
22
- - [install](#install)
22
+ - [Install](#install)
23
23
  - [Modules](#modules)
24
24
  * [ESM](#esm)
25
25
  * [Common JS](#common-js)
@@ -33,11 +33,12 @@ with the [blur-hash algorithm](https://blurha.sh/), as a [web component](https:/
33
33
  * [Bundler](#bundler)
34
34
  * [pre-built JS](#pre-built-js)
35
35
  - [Create the string](#create-the-string)
36
- * [Print to system clipboard](#print-to-system-clipboard)
36
+ * [JS API](#js-api)
37
+ * [CLI](#cli)
37
38
 
38
39
  <!-- tocstop -->
39
40
 
40
- ## install
41
+ ## Install
41
42
 
42
43
  ```sh
43
44
  npm i -S @substrate-system/blur-hash
@@ -49,7 +50,7 @@ This exposes ESM and common JS via [package.json `exports` field](https://nodejs
49
50
 
50
51
  ### ESM
51
52
  ```js
52
- import '@substrate-system/blur-hash'
53
+ import { BlurHash } from '@substrate-system/blur-hash'
53
54
  ```
54
55
 
55
56
  ### Common JS
@@ -75,30 +76,40 @@ The dimensions for the image
75
76
 
76
77
  Change the image, and do the blur-up thing again.
77
78
 
79
+ Takes a new `src` string, new placeholder string, and all other attributes.
80
+
78
81
  ```ts
79
- reset (
80
- newSrc:string,
81
- alt:string,
82
- placeholder:string,
83
- newSrcset?:string|null,
84
- newSizes?:string|null,
85
- attrs:Partial<{
86
- srcset:string|null;
87
- width:string|null;
88
- height:string|null;
89
- time:number|null;
90
- }> = {}
91
- ):void
82
+ reset (attributes:{
83
+ alt:string;
84
+ width:string;
85
+ height:string;
86
+ placeholder:string;
87
+ src:string;
88
+ srcset?:string|null;
89
+ sizes?:string|null;
90
+ time?:number;
91
+ contentVisibility?:'visible'|'auto'|'hidden'|null;
92
+ decoding?:'sync'|'async'|'auto'|null;
93
+ loading?:'lazy'|'eager'|'auto'|null;
94
+ }):void
92
95
  ```
93
96
 
94
- #### example
97
+ #### `.reset` example
98
+
99
+ The `reset` method will be on the element once you call `define`.
95
100
 
96
101
  ```js
97
- document.querySelector('blur-hash')?.reset(
98
- 'llamas.jpg',
99
- 'some llamas',
100
- 'UgI}q#%O%eNa?^I?awaf?aIVs*WBxZxaRjR*'
101
- )
102
+ import { BlurHash } from '@substrate-system/blur-hash'
103
+
104
+ BlurHash.define()
105
+
106
+ const el = document.querySelector('blur-hash')
107
+
108
+ el?.reset({
109
+ src: 'llamas.jpg',
110
+ alt: 'some llamas',
111
+ placeholder: 'UgI}q#%O%eNa?^I?awaf?aIVs*WBxZxaRjR*'
112
+ })
102
113
  ```
103
114
 
104
115
  -------------------------------------------------
@@ -127,17 +138,22 @@ __CSS variables__
127
138
  default is `0.2`
128
139
 
129
140
  ## use
130
- This calls the global function `customElements.define`. Just import, then use
131
- the tag in your HTML.
141
+
142
+ You will need to call the static method `.define` in JS to use the element.
132
143
 
133
144
  ### Bundler
134
145
 
135
146
  #### JS
136
147
  ```js
137
- import '@substrate-system/blur-hash'
148
+ import { BlurHash } from '@substrate-system/blur-hash'
149
+
150
+ BlurHash.define()
138
151
  ```
139
152
 
140
153
  #### HTML
154
+
155
+ Use the tag in HTML.
156
+
141
157
  ```html
142
158
  <div>
143
159
  <blur-hash
@@ -166,7 +182,19 @@ cp ./node_modules/@substrate-system/blur-hash/dist/blur-hash.min.js ./public
166
182
  ```
167
183
 
168
184
  ## Create the string
169
- This package includes a CLI tool to create the placeholder string. After installing this as a dependency,
185
+
186
+ ### JS API
187
+
188
+ ```js
189
+ import { createString } from '@substrate-system/blur-hash/hash'
190
+
191
+ const hash = await createString('../example/100.jpg')
192
+ // => 'UHGIM_X900xC~XWFE0xt00o3%1oz-;t7i|IV'
193
+ ```
194
+
195
+ ### CLI
196
+ This package includes a CLI tool to create the placeholder string. After
197
+ installing this as a dependency,
170
198
 
171
199
  ```sh
172
200
  npx blur ./my-file.jpg
@@ -174,7 +202,7 @@ npx blur ./my-file.jpg
174
202
 
175
203
  Will print a string to stdout that can be used as a placeholder attribute.
176
204
 
177
- ### Print to system clipboard
205
+ #### Print to system clipboard
178
206
  On mac os,
179
207
 
180
208
  ```sh
package/dist/bin/index.js CHANGED
@@ -7,8 +7,9 @@ import fs from "node:fs/promises";
7
7
  import { resolve } from "node:path";
8
8
  import { fileURLToPath } from "node:url";
9
9
  import { imageSizeFromFile } from "image-size/fromFile";
10
- export const encodeImageToBlurhash = async (filepath, width, height) => {
10
+ export const createString = async (filepath) => {
11
11
  const data = await fs.readFile(filepath);
12
+ const { width, height } = await imageSizeFromFile(filepath);
12
13
  return new Promise((resolve2, reject) => {
13
14
  inkjet.decode(data, function(err, decoded) {
14
15
  if (err) return reject(err);
@@ -25,7 +26,6 @@ if (isThisFileBeingRunViaCLI) {
25
26
  "Create a small placeholder string from a local file"
26
27
  ).usage("Usage: blur <filename>").argv;
27
28
  const filename = args._[0];
28
- const { width, height } = await imageSizeFromFile(filename);
29
- const hash = await encodeImageToBlurhash(filename, width, height);
29
+ const hash = await createString(filename);
30
30
  process.stdout.write(hash + "\n");
31
31
  }
package/dist/index.cjs CHANGED
@@ -44,19 +44,15 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
44
44
  }
45
45
  /**
46
46
  * Change the image, and do the blur-up thing again.
47
+ * Will use the existing width & height if they are not passed in.
47
48
  */
48
- reset(newSrc, alt, placeholder, newSrcset, newSizes, attrs = {}) {
49
- if (attrs.width) this.style.width = attrs.width;
50
- if (attrs.height) this.style.height = attrs.height;
51
- const width = attrs.width ? parseInt(attrs.width) : parseInt(this.style.width);
52
- const height = attrs.height ? parseInt(attrs.height) : parseInt(this.style.height);
53
- this.innerHTML = BlurHash.html({
54
- srcset: attrs.srcset,
55
- w: "" + width,
56
- h: "" + height,
57
- src: newSrc,
58
- alt
59
- });
49
+ reset(attrs) {
50
+ if (attrs.width) this.style.width = "" + attrs.width;
51
+ if (attrs.height) this.style.height = "" + attrs.height;
52
+ const width = attrs.width ? typeof attrs.width === "string" ? parseInt(attrs.width) : attrs.width : parseInt(this.style.width);
53
+ const height = attrs.height ? typeof attrs.height === "string" ? parseInt(attrs.height) : attrs.height : parseInt(this.style.height);
54
+ this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }));
55
+ const { placeholder, src: newSrc } = attrs;
60
56
  const pixels = (0, import_blurhash.decode)(placeholder, width, height);
61
57
  const canvas = this.querySelector("canvas");
62
58
  const ctx = canvas.getContext("2d");
@@ -66,8 +62,8 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
66
62
  this.setAttribute("src", newSrc);
67
63
  this.setAttribute("placeholder", placeholder);
68
64
  const img = this.querySelector("img");
69
- if (newSrcset) img.setAttribute("srcset", newSrcset);
70
- if (newSizes) img.setAttribute("sizes", newSizes);
65
+ if (attrs.srcset) img.setAttribute("srcset", attrs.srcset);
66
+ if (attrs.sizes) img.setAttribute("sizes", attrs.sizes);
71
67
  img.addEventListener("load", () => {
72
68
  canvas.style.display = "none";
73
69
  img.classList.remove("blurry");
@@ -81,7 +77,9 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
81
77
  if (!placeholder || !width || !height) {
82
78
  throw new Error("Missing attributes");
83
79
  }
84
- this.innerHTML = this.render();
80
+ if (!this.innerHTML) {
81
+ this.innerHTML = this.render();
82
+ }
85
83
  const pixels = (0, import_blurhash.decode)(placeholder, width, height);
86
84
  const canvas = this.querySelector("canvas");
87
85
  const ctx = canvas.getContext("2d");
@@ -97,43 +95,50 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
97
95
  }
98
96
  static html(attrs) {
99
97
  const {
100
- srcset,
101
- w,
102
- h,
98
+ width,
99
+ height,
103
100
  alt,
104
101
  contentVisibility,
105
102
  decoding,
106
103
  loading,
104
+ srcset,
105
+ sizes,
107
106
  src
108
107
  } = attrs;
109
108
  return `<canvas
110
109
  class="blurry"
111
- width=${w}
112
- height=${h}
110
+ width=${width}
111
+ height=${height}
113
112
  ></canvas>
114
113
 
115
114
  <img class="blurry"
116
- ${srcset ? `srcset="${srcset}"` : ""}
117
115
  alt="${alt}"
118
116
  content-visibility="${contentVisibility || "auto"}"
119
117
  decoding="${decoding || "async"}"
120
118
  loading="${loading || "lazy"}"
121
119
  class="image-element blurry"
120
+ ${srcset ? `srcset="${srcset}"` : ""}
121
+ ${sizes ? `sizes=${sizes}` : ""}
122
122
  src="${src}"
123
123
  />`;
124
124
  }
125
+ /**
126
+ * Use the attributes to create HTML.
127
+ */
125
128
  render() {
126
129
  const srcset = this.getAttribute("srcset");
127
- const w = this.getAttribute("width");
128
- const h = this.getAttribute("height");
130
+ const width = this.getAttribute("width");
131
+ const height = this.getAttribute("height");
129
132
  const time = this.getAttribute("time");
133
+ const placeholder = this.getAttribute("placeholder");
130
134
  this.time = time ? parseInt(time) : 800;
131
135
  const src = this.getAttribute("src");
132
136
  const alt = this.getAttribute("alt");
137
+ if (!placeholder) throw new Error("not placeholder");
138
+ if (!width || !height) throw new Error("not width or not height");
133
139
  if (!src) throw new Error("Not src");
134
140
  if (!alt) throw new Error("Not alt");
135
- return BlurHash.html({ srcset, w, h, src, alt });
141
+ return BlurHash.html({ srcset, width, height, src, alt, placeholder });
136
142
  }
137
143
  }
138
- customElements.define("blur-hash", BlurHash);
139
144
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts"],
4
- "sourcesContent": ["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": "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",
4
+ "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport type ImgAttrs = {\n alt:string;\n width:string|number;\n height:string|number;\n placeholder:string;\n src:string;\n srcset?:string|null;\n sizes?:string|null;\n time?:number;\n contentVisibility?:'visible'|'auto'|'hidden'|null;\n decoding?:'sync'|'async'|'auto'|null;\n loading?:'lazy'|'eager'|'auto'|null;\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n time:number\n\n constructor () {\n super()\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 * Will use the existing width & height if they are not passed in.\n */\n reset (attrs:(Omit<Omit<ImgAttrs, 'width'>, 'height'> & {\n width?:string|number;\n height?:string|number;\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 (typeof attrs.width === 'string' ? parseInt(attrs.width) : attrs.width) :\n parseInt(this.style.width))\n const height = (attrs.height ?\n (typeof attrs.height === 'string' ? parseInt(attrs.height) : attrs.height) :\n parseInt(this.style.height))\n\n this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n const { placeholder, src: newSrc } = attrs\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 (attrs.srcset) img.setAttribute('srcset', attrs.srcset)\n if (attrs.sizes) img.setAttribute('sizes', attrs.sizes)\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 // don't render again if we dont have to\n if (!this.innerHTML) {\n this.innerHTML = this.render()\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 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:ImgAttrs) {\n const {\n width,\n height,\n alt,\n contentVisibility,\n decoding,\n loading,\n srcset,\n sizes,\n src\n } = attrs\n\n return `<canvas\n class=\"blurry\"\n width=${width}\n height=${height}\n ></canvas>\n\n <img class=\"blurry\"\n alt=\"${alt}\"\n content-visibility=\"${contentVisibility || 'auto'}\"\n decoding=\"${decoding || 'async'}\"\n loading=\"${loading || 'lazy'}\"\n class=\"image-element blurry\"\n ${srcset ? `srcset=\"${srcset}\"` : ''}\n ${sizes ? `sizes=${sizes}` : ''}\n src=\"${src}\"\n />`\n }\n\n /**\n * Use the attributes to create HTML.\n */\n render ():string {\n const srcset = this.getAttribute('srcset')\n const width = this.getAttribute('width')\n const height = this.getAttribute('height')\n const time = this.getAttribute('time')\n const placeholder = this.getAttribute('placeholder')\n this.time = time ? parseInt(time) : 800\n const src = this.getAttribute('src')\n const alt = this.getAttribute('alt')\n if (!placeholder) throw new Error('not placeholder')\n if (!width || !height) throw new Error('not width or not height')\n if (!src) throw new Error('Not src')\n if (!alt) throw new Error('Not alt')\n\n return BlurHash.html({ srcset, width, height, src, alt, placeholder })\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/index.d.ts CHANGED
@@ -4,6 +4,19 @@ declare global {
4
4
  'blur-hash': BlurHash;
5
5
  }
6
6
  }
7
+ export type ImgAttrs = {
8
+ alt: string;
9
+ width: string | number;
10
+ height: string | number;
11
+ placeholder: string;
12
+ src: string;
13
+ srcset?: string | null;
14
+ sizes?: string | null;
15
+ time?: number;
16
+ contentVisibility?: 'visible' | 'auto' | 'hidden' | null;
17
+ decoding?: 'sync' | 'async' | 'auto' | null;
18
+ loading?: 'lazy' | 'eager' | 'auto' | null;
19
+ };
7
20
  declare const BlurHash_base: {
8
21
  new (): {
9
22
  NAME: string;
@@ -377,25 +390,17 @@ export declare class BlurHash extends BlurHash_base {
377
390
  constructor();
378
391
  /**
379
392
  * Change the image, and do the blur-up thing again.
393
+ * Will use the existing width & height if they are not passed in.
380
394
  */
381
- reset(newSrc: string, alt: string, placeholder: string, newSrcset?: string | null, newSizes?: string | null, attrs?: Partial<{
382
- srcset: string | null;
383
- width: string | null;
384
- height: string | null;
385
- time: number | null;
386
- }>): void;
395
+ reset(attrs: (Omit<Omit<ImgAttrs, 'width'>, 'height'> & {
396
+ width?: string | number;
397
+ height?: string | number;
398
+ })): void;
387
399
  connectedCallback(): void;
388
- static html(attrs: {
389
- alt: string;
390
- srcset?: string | null;
391
- w?: string | null;
392
- h?: string | null;
393
- time?: number;
394
- contentVisibility?: 'visible' | 'auto' | 'hidden' | null;
395
- decoding?: 'sync' | 'async' | 'auto' | null;
396
- loading?: 'lazy' | 'eager' | 'auto' | null;
397
- src: string;
398
- }): string;
400
+ static html(attrs: ImgAttrs): string;
401
+ /**
402
+ * Use the attributes to create HTML.
403
+ */
399
404
  render(): string;
400
405
  }
401
406
  export {};
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAI9D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAA;KACxB;CACJ;;;;;;;;;;;wCA8CO,CAAR;;;;;sCASiD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA6B1C,CAAA;gJAGA,CAAN;4FAIM,CAAJ;mJAKiB,CAAC;+FAQd,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BA4CA,CAAJ;;;;;;;;;;;;;;;;;;;;;;;uBAOy/D,CAAC,EAAC,cAAe;;;;;;;;;;;;;iCAAg0B,CAAC;kCAA2E,CAAC,EAAC,kBAAmB;sBAA4C,CAAC;;wBAAsG,CAAC;;0BAA0G,CAAC;wBAAsE,CAAC;;;;;;;;oDAAmgB,CAAC;;;;;;;;;;;;;;;;yBAAwwB,CAAC;;;2BAA8J,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gFAAu4G,CAAC;6BAAkF,CAAC;cAAwD,GAAG;eAAoD,GAAG;;oBAAqF,GAAG;;;;;;;eAAwX,GAAG;gBAAqD,GAAG;;;;;;;;;;;wBAAmsC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA4tO,CAAC;kBAAiG,CAAC;mBAAkG,CAAC;oBAAmG,CAAC;;;;;;;;;;;;;;aAA+oC,CAAC;;;qBAA2F,CAAC;;;;;aAAyJ,GAAG;;;;;AAzJ70lB,qBAAa,QAAS,SAAQ,aAAgC;IAC1D,IAAI,EAAC,MAAM,CAAA;;IAiBX;;OAEG;IACH,KAAK,CACD,MAAM,EAAC,MAAM,EACb,GAAG,EAAC,MAAM,EACV,WAAW,EAAC,MAAM,EAClB,SAAS,CAAC,EAAC,MAAM,GAAC,IAAI,EACtB,QAAQ,CAAC,EAAC,MAAM,GAAC,IAAI,EACrB,KAAK,GAAC,OAAO,CAAC;QACV,MAAM,EAAC,MAAM,GAAC,IAAI,CAAC;QACnB,KAAK,EAAC,MAAM,GAAC,IAAI,CAAC;QAClB,MAAM,EAAC,MAAM,GAAC,IAAI,CAAC;QACnB,IAAI,EAAC,MAAM,GAAC,IAAI,CAAC;KACpB,CAAM,GACT,IAAI;IAwCN,iBAAiB;IAyBjB,MAAM,CAAC,IAAI,CAAE,KAAK,EAAC;QACf,GAAG,EAAC,MAAM,CAAC;QACX,MAAM,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;QACpB,CAAC,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;QACf,CAAC,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;QACf,IAAI,CAAC,EAAC,MAAM,CAAC;QACb,iBAAiB,CAAC,EAAC,SAAS,GAAC,MAAM,GAAC,QAAQ,GAAC,IAAI,CAAC;QAClD,QAAQ,CAAC,EAAC,MAAM,GAAC,OAAO,GAAC,MAAM,GAAC,IAAI,CAAC;QACrC,OAAO,CAAC,EAAC,MAAM,GAAC,OAAO,GAAC,MAAM,GAAC,IAAI,CAAC;QACpC,GAAG,EAAC,MAAM,CAAC;KACd;IA6BD,MAAM,IAAI,MAAM;CAanB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAM9D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAA;KACxB;CACJ;AAED,MAAM,MAAM,QAAQ,GAAG;IACnB,GAAG,EAAC,MAAM,CAAC;IACX,KAAK,EAAC,MAAM,GAAC,MAAM,CAAC;IACpB,MAAM,EAAC,MAAM,GAAC,MAAM,CAAC;IACrB,WAAW,EAAC,MAAM,CAAC;IACnB,GAAG,EAAC,MAAM,CAAC;IACX,MAAM,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;IACpB,KAAK,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;IACnB,IAAI,CAAC,EAAC,MAAM,CAAC;IACb,iBAAiB,CAAC,EAAC,SAAS,GAAC,MAAM,GAAC,QAAQ,GAAC,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAC,MAAM,GAAC,OAAO,GAAC,MAAM,GAAC,IAAI,CAAC;IACrC,OAAO,CAAC,EAAC,MAAM,GAAC,OAAO,GAAC,MAAM,GAAC,IAAI,CAAC;CACvC,CAAA;;;;;;;;;;;wCA4B2C,CAAC;;;;;sCAMuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA6BnC,CAAC;gJAGxB,CAAC;4FAI8B,CAAC;mJAMG,CAAC;+FAGvC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAgDK,CAAC;;;;;;;;;;;;;;;;;;;;;;;uBAcojD,CAAC,EAAC,cAAe;;;;;;;;;;;;;iCAAg0B,CAAC;kCAA2E,CAAC,EAAC,kBAAmB;sBAA4C,CAAC;;wBAAsG,CAAC;;0BAA0G,CAAC;wBAAsE,CAAC;;;;;;;;oDAAmgB,CAAC;;;;;;;;;;;;;;;;yBAAwwB,CAAC;;;2BAA8J,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gFAAu4G,CAAC;6BAAkF,CAAC;cAAwD,GAAG;eAAoD,GAAG;;oBAAqF,GAAG;;;;;;;eAAwX,GAAG;gBAAqD,GAAG;;;;;;;;;;;wBAAmsC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA4tO,CAAC;kBAAiG,CAAC;mBAAkG,CAAC;oBAAmG,CAAC;;;;;;;;;;;;;;aAA+oC,CAAC;;;qBAA2F,CAAC;;;;;aAAyJ,GAAG;;;;;AA3In5kB,qBAAa,QAAS,SAAQ,aAAgC;IAC1D,IAAI,EAAC,MAAM,CAAA;;IAgBX;;;OAGG;IACH,KAAK,CAAE,KAAK,EAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG;QACpD,KAAK,CAAC,EAAC,MAAM,GAAC,MAAM,CAAC;QACrB,MAAM,CAAC,EAAC,MAAM,GAAC,MAAM,CAAC;KACzB,CAAC,GAAE,IAAI;IAoCR,iBAAiB;IA4BjB,MAAM,CAAC,IAAI,CAAE,KAAK,EAAC,QAAQ;IA+B3B;;OAEG;IACH,MAAM,IAAI,MAAM;CAgBnB"}
package/dist/index.js CHANGED
@@ -22,19 +22,15 @@ class BlurHash extends WebComponent.create("blur-hash") {
22
22
  }
23
23
  /**
24
24
  * Change the image, and do the blur-up thing again.
25
+ * Will use the existing width & height if they are not passed in.
25
26
  */
26
- reset(newSrc, alt, placeholder, newSrcset, newSizes, attrs = {}) {
27
- if (attrs.width) this.style.width = attrs.width;
28
- if (attrs.height) this.style.height = attrs.height;
29
- const width = attrs.width ? parseInt(attrs.width) : parseInt(this.style.width);
30
- const height = attrs.height ? parseInt(attrs.height) : parseInt(this.style.height);
31
- this.innerHTML = BlurHash.html({
32
- srcset: attrs.srcset,
33
- w: "" + width,
34
- h: "" + height,
35
- src: newSrc,
36
- alt
37
- });
27
+ reset(attrs) {
28
+ if (attrs.width) this.style.width = "" + attrs.width;
29
+ if (attrs.height) this.style.height = "" + attrs.height;
30
+ const width = attrs.width ? typeof attrs.width === "string" ? parseInt(attrs.width) : attrs.width : parseInt(this.style.width);
31
+ const height = attrs.height ? typeof attrs.height === "string" ? parseInt(attrs.height) : attrs.height : parseInt(this.style.height);
32
+ this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }));
33
+ const { placeholder, src: newSrc } = attrs;
38
34
  const pixels = decode(placeholder, width, height);
39
35
  const canvas = this.querySelector("canvas");
40
36
  const ctx = canvas.getContext("2d");
@@ -44,8 +40,8 @@ class BlurHash extends WebComponent.create("blur-hash") {
44
40
  this.setAttribute("src", newSrc);
45
41
  this.setAttribute("placeholder", placeholder);
46
42
  const img = this.querySelector("img");
47
- if (newSrcset) img.setAttribute("srcset", newSrcset);
48
- if (newSizes) img.setAttribute("sizes", newSizes);
43
+ if (attrs.srcset) img.setAttribute("srcset", attrs.srcset);
44
+ if (attrs.sizes) img.setAttribute("sizes", attrs.sizes);
49
45
  img.addEventListener("load", () => {
50
46
  canvas.style.display = "none";
51
47
  img.classList.remove("blurry");
@@ -59,7 +55,9 @@ class BlurHash extends WebComponent.create("blur-hash") {
59
55
  if (!placeholder || !width || !height) {
60
56
  throw new Error("Missing attributes");
61
57
  }
62
- this.innerHTML = this.render();
58
+ if (!this.innerHTML) {
59
+ this.innerHTML = this.render();
60
+ }
63
61
  const pixels = decode(placeholder, width, height);
64
62
  const canvas = this.querySelector("canvas");
65
63
  const ctx = canvas.getContext("2d");
@@ -75,45 +73,52 @@ class BlurHash extends WebComponent.create("blur-hash") {
75
73
  }
76
74
  static html(attrs) {
77
75
  const {
78
- srcset,
79
- w,
80
- h,
76
+ width,
77
+ height,
81
78
  alt,
82
79
  contentVisibility,
83
80
  decoding,
84
81
  loading,
82
+ srcset,
83
+ sizes,
85
84
  src
86
85
  } = attrs;
87
86
  return `<canvas
88
87
  class="blurry"
89
- width=${w}
90
- height=${h}
88
+ width=${width}
89
+ height=${height}
91
90
  ></canvas>
92
91
 
93
92
  <img class="blurry"
94
- ${srcset ? `srcset="${srcset}"` : ""}
95
93
  alt="${alt}"
96
94
  content-visibility="${contentVisibility || "auto"}"
97
95
  decoding="${decoding || "async"}"
98
96
  loading="${loading || "lazy"}"
99
97
  class="image-element blurry"
98
+ ${srcset ? `srcset="${srcset}"` : ""}
99
+ ${sizes ? `sizes=${sizes}` : ""}
100
100
  src="${src}"
101
101
  />`;
102
102
  }
103
+ /**
104
+ * Use the attributes to create HTML.
105
+ */
103
106
  render() {
104
107
  const srcset = this.getAttribute("srcset");
105
- const w = this.getAttribute("width");
106
- const h = this.getAttribute("height");
108
+ const width = this.getAttribute("width");
109
+ const height = this.getAttribute("height");
107
110
  const time = this.getAttribute("time");
111
+ const placeholder = this.getAttribute("placeholder");
108
112
  this.time = time ? parseInt(time) : 800;
109
113
  const src = this.getAttribute("src");
110
114
  const alt = this.getAttribute("alt");
115
+ if (!placeholder) throw new Error("not placeholder");
116
+ if (!width || !height) throw new Error("not width or not height");
111
117
  if (!src) throw new Error("Not src");
112
118
  if (!alt) throw new Error("Not alt");
113
- return BlurHash.html({ srcset, w, h, src, alt });
119
+ return BlurHash.html({ srcset, width, height, src, alt, placeholder });
114
120
  }
115
121
  }
116
- customElements.define("blur-hash", BlurHash);
117
122
  export {
118
123
  BlurHash
119
124
  };
package/dist/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts"],
4
- "sourcesContent": ["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": "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",
4
+ "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport type ImgAttrs = {\n alt:string;\n width:string|number;\n height:string|number;\n placeholder:string;\n src:string;\n srcset?:string|null;\n sizes?:string|null;\n time?:number;\n contentVisibility?:'visible'|'auto'|'hidden'|null;\n decoding?:'sync'|'async'|'auto'|null;\n loading?:'lazy'|'eager'|'auto'|null;\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n time:number\n\n constructor () {\n super()\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 * Will use the existing width & height if they are not passed in.\n */\n reset (attrs:(Omit<Omit<ImgAttrs, 'width'>, 'height'> & {\n width?:string|number;\n height?:string|number;\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 (typeof attrs.width === 'string' ? parseInt(attrs.width) : attrs.width) :\n parseInt(this.style.width))\n const height = (attrs.height ?\n (typeof attrs.height === 'string' ? parseInt(attrs.height) : attrs.height) :\n parseInt(this.style.height))\n\n this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n const { placeholder, src: newSrc } = attrs\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 (attrs.srcset) img.setAttribute('srcset', attrs.srcset)\n if (attrs.sizes) img.setAttribute('sizes', attrs.sizes)\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 // don't render again if we dont have to\n if (!this.innerHTML) {\n this.innerHTML = this.render()\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 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:ImgAttrs) {\n const {\n width,\n height,\n alt,\n contentVisibility,\n decoding,\n loading,\n srcset,\n sizes,\n src\n } = attrs\n\n return `<canvas\n class=\"blurry\"\n width=${width}\n height=${height}\n ></canvas>\n\n <img class=\"blurry\"\n alt=\"${alt}\"\n content-visibility=\"${contentVisibility || 'auto'}\"\n decoding=\"${decoding || 'async'}\"\n loading=\"${loading || 'lazy'}\"\n class=\"image-element blurry\"\n ${srcset ? `srcset=\"${srcset}\"` : ''}\n ${sizes ? `sizes=${sizes}` : ''}\n src=\"${src}\"\n />`\n }\n\n /**\n * Use the attributes to create HTML.\n */\n render ():string {\n const srcset = this.getAttribute('srcset')\n const width = this.getAttribute('width')\n const height = this.getAttribute('height')\n const time = this.getAttribute('time')\n const placeholder = this.getAttribute('placeholder')\n this.time = time ? parseInt(time) : 800\n const src = this.getAttribute('src')\n const alt = this.getAttribute('alt')\n if (!placeholder) throw new Error('not placeholder')\n if (!width || !height) throw new Error('not width or not height')\n if (!src) throw new Error('Not src')\n if (!alt) throw new Error('Not alt')\n\n return BlurHash.html({ srcset, width, height, src, alt, placeholder })\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/index.min.js CHANGED
@@ -1,16 +1,17 @@
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
1
+ var S=Object.defineProperty;var a=(e,t)=>S(e,"name",{value:t,configurable:!0});var D=Object.defineProperty,y=a((e,t)=>D(e,"name",{value:t,configurable:!0}),"__name"),f=class e extends window.HTMLElement{static{a(this,"WebComponent")}static{y(this,"WebComponent")}static NAME="";NAME="";static create(t){return class extends e{static NAME=t;NAME=t;render(){}}}static define(){N(this.NAME)||window.customElements.define(this.NAME,this)}async attributeChangedCallback(t,r,s){let i=this[`handleChange_${t}`];i&&await i.call(this,r,s),this.render()}connectedCallback(){this.render()}qs(t){return this.querySelector(t)}qsa(t){return this.querySelectorAll(t)}static event(t){return C(this.NAME,t)}emit(t,r={}){let s=this.NAME,i=new CustomEvent(`${s}:${t}`,{bubbles:r.bubbles===void 0?!0:r.bubbles,cancelable:r.cancelable===void 0?!0:r.cancelable,detail:r.detail});return this.dispatchEvent(i)}dispatch(t,r={}){let s=new CustomEvent(t,{bubbles:r.bubbles===void 0?!0:r.bubbles,cancelable:r.cancelable===void 0?!0:r.cancelable,detail:r.detail});return this.dispatchEvent(s)}};function C(e,t){return`${e}:${t}`}a(C,"eventName");y(C,"eventName");function N(e){return document.createElement(e).constructor!==window.HTMLElement}a(N,"isRegistered");y(N,"isRegistered");var O=["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","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],m=a(e=>{let t=0;for(let r=0;r<e.length;r++){let s=e[r],i=O.indexOf(s);t=t*83+i}return t},"x");var v=a(e=>{let t=e/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},"f"),A=a(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"),V=a(e=>e<0?-1:1,"F"),E=a((e,t)=>V(e)*Math.pow(Math.abs(e),t),"M"),T=class extends Error{static{a(this,"d")}constructor(e){super(e),this.name="ValidationError",this.message=e}},R=a(e=>{if(!e||e.length<6)throw new T("The blurhash string must be at least 6 characters");let t=m(e[0]),r=Math.floor(t/9)+1,s=t%9+1;if(e.length!==4+2*s*r)throw new T(`blurhash length mismatch: length is ${e.length} but it should be ${4+2*s*r}`)},"C");var j=a(e=>{let t=e>>16,r=e>>8&255,s=e&255;return[v(t),v(r),v(s)]},"z"),k=a((e,t)=>{let r=Math.floor(e/361),s=Math.floor(e/19)%19,i=e%19;return[E((r-9)/9,2)*t,E((s-9)/9,2)*t,E((i-9)/9,2)*t]},"L"),B=a((e,t,r,s)=>{R(e),s=s|1;let i=m(e[0]),c=Math.floor(i/9)+1,l=i%9+1,u=(m(e[1])+1)/166,h=new Array(l*c);for(let n=0;n<h.length;n++)if(n===0){let g=m(e.substring(2,6));h[n]=j(g)}else{let g=m(e.substring(4+n*2,6+n*2));h[n]=k(g,u*s)}let d=t*4,o=new Uint8ClampedArray(d*r);for(let n=0;n<r;n++)for(let g=0;g<t;g++){let I=0,$=0,L=0;for(let b=0;b<c;b++)for(let M=0;M<l;M++){let w=Math.cos(Math.PI*g*M/t)*Math.cos(Math.PI*n*b/r),p=h[M+b*l];I+=p[0]*w,$+=p[1]*w,L+=p[2]*w}let q=A(I),z=A($),P=A(L);o[4*g+0+n*d]=q,o[4*g+1+n*d]=z,o[4*g+2+n*d]=P,o[4*g+3+n*d]=255}return o},"U"),x=B;var H=class e extends f.create("blur-hash"){static{a(this,"BlurHash")}time;constructor(){super();let t=this.getAttribute("width"),r=this.getAttribute("height"),s=this.getAttribute("time");this.time=s?parseInt(s):800,this.style.width=""+t,this.style.height=""+r,document.body.style.setProperty("--blur-hash-time",s?"."+(parseInt(s)/1e3+"s"):"0.8s")}reset(t){t.width&&(this.style.width=""+t.width),t.height&&(this.style.height=""+t.height);let r=t.width?typeof t.width=="string"?parseInt(t.width):t.width:parseInt(this.style.width),s=t.height?typeof t.height=="string"?parseInt(t.height):t.height:parseInt(this.style.height);this.innerHTML=e.html(Object.assign(t,{width:r,height:s}));let{placeholder:i,src:c}=t,l=x(i,r,s),u=this.querySelector("canvas"),h=u.getContext("2d"),d=h.createImageData(r,s);d.data.set(l),h.putImageData(d,0,0),this.setAttribute("src",c),this.setAttribute("placeholder",i);let o=this.querySelector("img");t.srcset&&o.setAttribute("srcset",t.srcset),t.sizes&&o.setAttribute("sizes",t.sizes),o.addEventListener("load",()=>{u.style.display="none",o.classList.remove("blurry"),o.classList.add("sharp")})}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),r=parseInt(this.getAttribute("height")??""),s=this.getAttribute("placeholder");if(!s||!t||!r)throw new Error("Missing attributes");this.innerHTML||(this.innerHTML=this.render());let i=x(s,t,r),c=this.querySelector("canvas"),l=c.getContext("2d"),u=l.createImageData(t,r);u.data.set(i),l.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{width:r,height:s,alt:i,contentVisibility:c,decoding:l,loading:u,srcset:h,sizes:d,src:o}=t;return`<canvas
2
2
  class="blurry"
3
3
  width=${r}
4
- height=${a}
4
+ height=${s}
5
5
  ></canvas>
6
6
 
7
7
  <img class="blurry"
8
- ${s?`srcset="${s}"`:""}
9
- alt="${c}"
10
- content-visibility="${i||"auto"}"
11
- decoding="${u||"async"}"
12
- loading="${h||"lazy"}"
8
+ alt="${i}"
9
+ content-visibility="${c||"auto"}"
10
+ decoding="${l||"async"}"
11
+ loading="${u||"lazy"}"
13
12
  class="image-element blurry"
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};
13
+ ${h?`srcset="${h}"`:""}
14
+ ${d?`sizes=${d}`:""}
15
+ src="${o}"
16
+ />`}render(){let t=this.getAttribute("srcset"),r=this.getAttribute("width"),s=this.getAttribute("height"),i=this.getAttribute("time"),c=this.getAttribute("placeholder");this.time=i?parseInt(i):800;let l=this.getAttribute("src"),u=this.getAttribute("alt");if(!c)throw new Error("not placeholder");if(!r||!s)throw new Error("not width or not height");if(!l)throw new Error("Not src");if(!u)throw new Error("Not alt");return e.html({srcset:t,width:r,height:s,src:l,alt:u,placeholder:c})}};export{H as BlurHash};
16
17
  //# sourceMappingURL=index.min.js.map
package/dist/index.min.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
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": "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",
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"]
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// import Debug from '@substrate-system/debug'\n// const debug = Debug\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport type ImgAttrs = {\n alt:string;\n width:string|number;\n height:string|number;\n placeholder:string;\n src:string;\n srcset?:string|null;\n sizes?:string|null;\n time?:number;\n contentVisibility?:'visible'|'auto'|'hidden'|null;\n decoding?:'sync'|'async'|'auto'|null;\n loading?:'lazy'|'eager'|'auto'|null;\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n time:number\n\n constructor () {\n super()\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 * Will use the existing width & height if they are not passed in.\n */\n reset (attrs:(Omit<Omit<ImgAttrs, 'width'>, 'height'> & {\n width?:string|number;\n height?:string|number;\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 (typeof attrs.width === 'string' ? parseInt(attrs.width) : attrs.width) :\n parseInt(this.style.width))\n const height = (attrs.height ?\n (typeof attrs.height === 'string' ? parseInt(attrs.height) : attrs.height) :\n parseInt(this.style.height))\n\n this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n const { placeholder, src: newSrc } = attrs\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 (attrs.srcset) img.setAttribute('srcset', attrs.srcset)\n if (attrs.sizes) img.setAttribute('sizes', attrs.sizes)\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 // don't render again if we dont have to\n if (!this.innerHTML) {\n this.innerHTML = this.render()\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 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:ImgAttrs) {\n const {\n width,\n height,\n alt,\n contentVisibility,\n decoding,\n loading,\n srcset,\n sizes,\n src\n } = attrs\n\n return `<canvas\n class=\"blurry\"\n width=${width}\n height=${height}\n ></canvas>\n\n <img class=\"blurry\"\n alt=\"${alt}\"\n content-visibility=\"${contentVisibility || 'auto'}\"\n decoding=\"${decoding || 'async'}\"\n loading=\"${loading || 'lazy'}\"\n class=\"image-element blurry\"\n ${srcset ? `srcset=\"${srcset}\"` : ''}\n ${sizes ? `sizes=${sizes}` : ''}\n src=\"${src}\"\n />`\n }\n\n /**\n * Use the attributes to create HTML.\n */\n render ():string {\n const srcset = this.getAttribute('srcset')\n const width = this.getAttribute('width')\n const height = this.getAttribute('height')\n const time = this.getAttribute('time')\n const placeholder = this.getAttribute('placeholder')\n this.time = time ? parseInt(time) : 800\n const src = this.getAttribute('src')\n const alt = this.getAttribute('alt')\n if (!placeholder) throw new Error('not placeholder')\n if (!width || !height) throw new Error('not width or not height')\n if (!src) throw new Error('Not src')\n if (!alt) throw new Error('Not alt')\n\n return BlurHash.html({ srcset, width, height, src, alt, placeholder })\n }\n}\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,QAAS,EAAI,EAAG,EAAID,EAAI,OAAQ,IAAK,CACnC,IAAME,EAAIF,EAAI,CAAA,EACRG,EAAQN,EAAgB,QAAQK,CAAC,EACvCD,EAAQA,EAAQ,GAAKE,CACvB,CACA,OAAOF,CACT,EARyB,KCtFlB,IAAMG,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/B,EAAO,KAAK,MAAMC,EAAW,CAAC,EAAI,EAClCO,EAAQP,EAAW,EAAK,EAE9B,GAAID,EAAS,SAAW,EAAI,EAAIQ,EAAO,EACrC,MAAM,IAAIH,EACR,uCACEL,EAAS,MAAA,qBACU,EAAI,EAAIQ,EAAO,CAAA,EACtC,CAEJ,EAlB0B,KAA1B,IAgCMC,EAAYC,EAAAC,GAAkB,CAClC,IAAMC,EAAOD,GAAS,GAChB,EAAQA,GAAS,EAAK,IACtBE,EAAOF,EAAQ,IACrB,MAAO,CAACG,EAAaF,CAAI,EAAGE,EAAa,CAAI,EAAGA,EAAaD,CAAI,CAAC,CACpE,EALkB,KAOZE,EAAWL,EAAA,CAACC,EAAeC,IAAyB,CACxD,IAAM,EAAS,KAAK,MAAMD,EAAS,GAAQ,EACrCE,EAAS,KAAK,MAAMF,EAAQ,EAAE,EAAI,GAClCK,EAASL,EAAQ,GAQvB,MANY,CACVM,GAAS,EAAS,GAAK,EAAG,CAAG,EAAIL,EACjCK,GAASJ,EAAS,GAAK,EAAG,CAAG,EAAID,EACjCK,GAASD,EAAS,GAAK,EAAG,CAAG,EAAIJ,CACnC,CAGF,EAZiB,KAcXM,EAASR,EAAA,CACbC,EACAC,EACA,EACAC,IACG,CACHM,EAAiBR,CAAQ,EAEzBE,EAAQA,EAAQ,EAEhB,IAAMG,EAAWI,EAAST,EAAS,CAAA,CAAE,EAC/BU,EAAO,KAAK,MAAML,EAAW,CAAC,EAAI,EAClCM,EAAQN,EAAW,EAAK,EAGxBO,GADwBH,EAAST,EAAS,CAAA,CAAE,EACJ,GAAK,IAE7Ca,EAAS,IAAI,MAAMF,EAAOD,CAAI,EAEpC,QAASI,EAAI,EAAGA,EAAID,EAAO,OAAQC,IACjC,GAAIA,IAAM,EAAG,CACX,IAAMC,EAAQN,EAAST,EAAS,UAAU,EAAG,CAAC,CAAC,EAC/Ca,EAAOC,CAAA,EAAKhB,EAASiB,CAAK,CAC5B,KAAO,CACL,IAAMA,EAAQN,EAAST,EAAS,UAAU,EAAIc,EAAI,EAAG,EAAIA,EAAI,CAAC,CAAC,EAC/DD,EAAOC,CAAA,EAAKV,EAASW,EAAOH,EAAeV,CAAK,CAClD,CAGF,IAAMc,EAAcf,EAAQ,EACtBgB,EAAS,IAAI,kBAAkBD,EAAc,CAAM,EAEzD,QAASF,EAAI,EAAGA,EAAI,EAAQA,IAC1B,QAASC,EAAI,EAAGA,EAAId,EAAOc,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,EAAKrB,CAAK,EAClC,KAAK,IAAK,KAAK,GAAKa,EAAIO,EAAK,CAAM,EACjCG,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,EElGR,IAAMuB,EAAN,MAAMC,UAAiBC,EAAa,OAAO,WAAW,CAAE,CA1B/D,MA0B+D,CAAAC,EAAA,iBAC3D,KAEA,aAAe,CACX,MAAM,EACN,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,CAMA,MAAOC,EAGE,CACDA,EAAM,QAAO,KAAK,MAAM,MAAQ,GAAKA,EAAM,OAC3CA,EAAM,SAAQ,KAAK,MAAM,OAAS,GAAKA,EAAM,QAEjD,IAAMC,EAASD,EAAM,MAChB,OAAOA,EAAM,OAAU,SAAW,SAASA,EAAM,KAAK,EAAIA,EAAM,MACjE,SAAS,KAAK,MAAM,KAAK,EACvBE,EAAUF,EAAM,OACjB,OAAOA,EAAM,QAAW,SAAW,SAASA,EAAM,MAAM,EAAIA,EAAM,OACnE,SAAS,KAAK,MAAM,MAAM,EAE9B,KAAK,UAAYN,EAAS,KAAK,OAAO,OAAOM,EAAO,CAAE,MAAAC,EAAO,OAAAC,CAAO,CAAC,CAAC,EAEtE,GAAM,CAAE,YAAAC,EAAa,IAAKC,CAAO,EAAIJ,EAE/BK,EAASC,EAAOH,EAAaF,EAAOC,CAAM,EAC1CK,EAAS,KAAK,cAAc,QAAQ,EACpCC,EAAMD,EAAO,WAAW,IAAI,EAC5BE,EAAYD,EAAI,gBAAgBP,EAAOC,CAAM,EACnDO,EAAU,KAAK,IAAIJ,CAAM,EACzBG,EAAI,aAAaC,EAAW,EAAG,CAAC,EAEhC,KAAK,aAAa,MAAOL,CAAM,EAC/B,KAAK,aAAa,cAAeD,CAAW,EAE5C,IAAMO,EAAM,KAAK,cAAc,KAAK,EAChCV,EAAM,QAAQU,EAAI,aAAa,SAAUV,EAAM,MAAM,EACrDA,EAAM,OAAOU,EAAI,aAAa,QAASV,EAAM,KAAK,EAEtDU,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,IAAMT,EAAQ,SAAS,KAAK,aAAa,OAAO,GAAK,EAAE,EACjDC,EAAS,SAAS,KAAK,aAAa,QAAQ,GAAK,EAAE,EACnDC,EAAc,KAAK,aAAa,aAAa,EACnD,GAAI,CAACA,GAAe,CAACF,GAAS,CAACC,EAC3B,MAAM,IAAI,MAAM,oBAAoB,EAInC,KAAK,YACN,KAAK,UAAY,KAAK,OAAO,GAGjC,IAAMG,EAASC,EAAOH,EAAaF,EAAOC,CAAM,EAC1CK,EAAS,KAAK,cAAc,QAAQ,EACpCC,EAAMD,EAAO,WAAW,IAAI,EAC5BE,EAAYD,EAAI,gBAAgBP,EAAOC,CAAM,EACnDO,EAAU,KAAK,IAAIJ,CAAM,EACzBG,EAAI,aAAaC,EAAW,EAAG,CAAC,EAEhC,IAAMC,EAAM,KAAK,cAAc,KAAK,EACpCA,EAAI,iBAAiB,OAAQ,IAAM,CAC/BH,EAAO,MAAM,QAAU,OACvBG,EAAI,UAAU,OAAO,QAAQ,EAC7BA,EAAI,UAAU,IAAI,OAAO,CAC7B,CAAC,CACL,CAEA,OAAO,KAAMV,EAAgB,CACzB,GAAM,CACF,MAAAC,EACA,OAAAC,EACA,IAAAS,EACA,kBAAAC,EACA,SAAAC,EACA,QAAAC,EACA,OAAAC,EACA,MAAAC,EACA,IAAAC,CACJ,EAAIjB,EAEJ,MAAO;AAAA;AAAA,oBAEKC,CAAK;AAAA,qBACJC,CAAM;AAAA;AAAA;AAAA;AAAA,mBAIRS,CAAG;AAAA,kCACYC,GAAqB,MAAM;AAAA,wBACrCC,GAAY,OAAO;AAAA,uBACpBC,GAAW,MAAM;AAAA;AAAA,cAE1BC,EAAS,WAAWA,CAAM,IAAM,EAAE;AAAA,cAClCC,EAAQ,SAASA,CAAK,GAAK,EAAE;AAAA,mBACxBC,CAAG;AAAA,WAElB,CAKA,QAAiB,CACb,IAAMF,EAAS,KAAK,aAAa,QAAQ,EACnCd,EAAQ,KAAK,aAAa,OAAO,EACjCC,EAAS,KAAK,aAAa,QAAQ,EACnCH,EAAO,KAAK,aAAa,MAAM,EAC/BI,EAAc,KAAK,aAAa,aAAa,EACnD,KAAK,KAAOJ,EAAO,SAASA,CAAI,EAAI,IACpC,IAAMkB,EAAM,KAAK,aAAa,KAAK,EAC7BN,EAAM,KAAK,aAAa,KAAK,EACnC,GAAI,CAACR,EAAa,MAAM,IAAI,MAAM,iBAAiB,EACnD,GAAI,CAACF,GAAS,CAACC,EAAQ,MAAM,IAAI,MAAM,yBAAyB,EAChE,GAAI,CAACe,EAAK,MAAM,IAAI,MAAM,SAAS,EACnC,GAAI,CAACN,EAAK,MAAM,IAAI,MAAM,SAAS,EAEnC,OAAOjB,EAAS,KAAK,CAAE,OAAAqB,EAAQ,MAAAd,EAAO,OAAAC,EAAQ,IAAAe,EAAK,IAAAN,EAAK,YAAAR,CAAY,CAAC,CACzE,CACJ",
6
+ "names": ["WebComponent", "_WebComponent", "__name", "elementName", "isRegistered", "name", "oldValue", "newValue", "handler", "selector", "evType", "eventName", "type", "opts", "namespace", "event", "elName", "q", "x", "__name", "t", "e", "n", "l", "f", "__name", "t", "e", "h", "F", "M", "d", "C", "x", "n", "z", "__name", "t", "e", "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", "attrs", "width", "height", "placeholder", "newSrc", "pixels", "j", "canvas", "ctx", "imageData", "img", "alt", "contentVisibility", "decoding", "loading", "srcset", "sizes", "src"]
7
7
  }
package/dist/meta.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "inputs": {
3
3
  "src/index.ts": {
4
- "bytes": 4922,
4
+ "bytes": 5364,
5
5
  "imports": [],
6
6
  "format": "esm"
7
7
  }
@@ -11,7 +11,7 @@
11
11
  "imports": [],
12
12
  "exports": [],
13
13
  "inputs": {},
14
- "bytes": 7878
14
+ "bytes": 8567
15
15
  },
16
16
  "dist/index.js": {
17
17
  "imports": [
@@ -32,10 +32,10 @@
32
32
  "entryPoint": "src/index.ts",
33
33
  "inputs": {
34
34
  "src/index.ts": {
35
- "bytesInOutput": 3792
35
+ "bytesInOutput": 4244
36
36
  }
37
37
  },
38
- "bytes": 3978
38
+ "bytes": 4430
39
39
  }
40
40
  }
41
41
  }
package/dist/style.css CHANGED
@@ -5,7 +5,7 @@ blur-hash {
5
5
 
6
6
  blur-hash canvas {
7
7
  transition: opacity var(--blur-hash-time, 0.8s);
8
- opacity: var(--blur-hash-opacity, 0.6);
8
+ opacity: var(--blur-hash-opacity, 0.4);
9
9
  }
10
10
 
11
11
  blur-hash img {
@@ -14,7 +14,7 @@ blur-hash img {
14
14
  }
15
15
 
16
16
  .blurry:is(blur-hash img) {
17
- opacity: var(--blur-hash-opacity, 0.2);
17
+ opacity: var(--blur-hash-opacity, 0.4);
18
18
  filter: blur(30px);
19
19
  }
20
20
 
@@ -32,4 +32,4 @@ blur-hash img {
32
32
  }
33
33
  }
34
34
 
35
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSxnQkFBZ0I7SUFDaEIsY0FBYztBQXFCbEI7O0FBbkJJO1FBQ0ksK0NBQStDO1FBQy9DLHNDQUFzQztJQUMxQzs7QUFFQTtRQUNJLHdCQUF3QjtRQUN4QixpQkFBaUI7SUFXckI7O0FBVEk7WUFDSSxzQ0FBc0M7WUFDdEMsa0JBQWtCO1FBQ3RCOztBQUVBO1lBQ0ksVUFBVTtZQUNWLG1EQUFtRDtRQUN2RDs7QUFJUjtJQUNJO1FBQ0ksa0JBQWtCO0lBQ3RCO0lBQ0E7UUFDSTtJQUNKO0FBQ0oiLCJmaWxlIjoic3JjL2luZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJsdXItaGFzaCB7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBkaXNwbGF5OiBibG9jaztcblxuICAgICYgY2FudmFzIHtcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSB2YXIoLS1ibHVyLWhhc2gtdGltZSwgMC44cyk7XG4gICAgICAgIG9wYWNpdHk6IHZhcigtLWJsdXItaGFzaC1vcGFjaXR5LCAwLjYpO1xuICAgIH1cblxuICAgICYgaW1nIHtcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjZzO1xuICAgICAgICBvYmplY3QtZml0OiBjb3ZlcjtcblxuICAgICAgICAmLmJsdXJyeSB7XG4gICAgICAgICAgICBvcGFjaXR5OiB2YXIoLS1ibHVyLWhhc2gtb3BhY2l0eSwgMC4yKTtcbiAgICAgICAgICAgIGZpbHRlcjogYmx1cigzMHB4KTtcbiAgICAgICAgfVxuXG4gICAgICAgICYuc2hhcnAge1xuICAgICAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgICAgICAgIGFuaW1hdGlvbjogc2hhcnBlbiB2YXIoLS1ibHVyLWhhc2gtdGltZSwgMC44cykgYm90aDtcbiAgICAgICAgfVxuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzaGFycGVuIHtcbiAgICBmcm9tIHtcbiAgICAgICAgZmlsdGVyOiBibHVyKDMwcHgpO1xuICAgIH1cbiAgICB0byB7XG4gICAgICAgIGZpbHRlcjogYmx1cigwcHgpXG4gICAgfVxufVxuIl19 */
35
+ /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSxnQkFBZ0I7SUFDaEIsY0FBYztBQXFCbEI7O0FBbkJJO1FBQ0ksK0NBQStDO1FBQy9DLHNDQUFzQztJQUMxQzs7QUFFQTtRQUNJLHdCQUF3QjtRQUN4QixpQkFBaUI7SUFXckI7O0FBVEk7WUFDSSxzQ0FBc0M7WUFDdEMsa0JBQWtCO1FBQ3RCOztBQUVBO1lBQ0ksVUFBVTtZQUNWLG1EQUFtRDtRQUN2RDs7QUFJUjtJQUNJO1FBQ0ksa0JBQWtCO0lBQ3RCO0lBQ0E7UUFDSTtJQUNKO0FBQ0oiLCJmaWxlIjoic3JjL2luZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJsdXItaGFzaCB7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBkaXNwbGF5OiBibG9jaztcblxuICAgICYgY2FudmFzIHtcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSB2YXIoLS1ibHVyLWhhc2gtdGltZSwgMC44cyk7XG4gICAgICAgIG9wYWNpdHk6IHZhcigtLWJsdXItaGFzaC1vcGFjaXR5LCAwLjQpO1xuICAgIH1cblxuICAgICYgaW1nIHtcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjZzO1xuICAgICAgICBvYmplY3QtZml0OiBjb3ZlcjtcblxuICAgICAgICAmLmJsdXJyeSB7XG4gICAgICAgICAgICBvcGFjaXR5OiB2YXIoLS1ibHVyLWhhc2gtb3BhY2l0eSwgMC40KTtcbiAgICAgICAgICAgIGZpbHRlcjogYmx1cigzMHB4KTtcbiAgICAgICAgfVxuXG4gICAgICAgICYuc2hhcnAge1xuICAgICAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgICAgICAgIGFuaW1hdGlvbjogc2hhcnBlbiB2YXIoLS1ibHVyLWhhc2gtdGltZSwgMC44cykgYm90aDtcbiAgICAgICAgfVxuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzaGFycGVuIHtcbiAgICBmcm9tIHtcbiAgICAgICAgZmlsdGVyOiBibHVyKDMwcHgpO1xuICAgIH1cbiAgICB0byB7XG4gICAgICAgIGZpbHRlcjogYmx1cigwcHgpXG4gICAgfVxufVxuIl19 */
package/dist/style.min.css CHANGED
@@ -1,2 +1,2 @@
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= */
1
+ blur-hash{display:block;overflow:hidden}blur-hash canvas{opacity:var(--blur-hash-opacity,.4);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,.4)}.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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsVUFFSSxhQUFjLENBRGQsZUFzQkosQ0FuQkksaUJBRUksbUNBQXNDLENBRHRDLDRDQUVKLENBRUEsY0FFSSxnQkFBaUIsQ0FEakIsc0JBWUosQ0FUSSwwQkFFSSxpQkFBa0IsQ0FEbEIsbUNBRUosQ0FFQSx5QkFFSSxnREFBbUQsQ0FEbkQsU0FFSixDQUlSLG1CQUNJLEdBQ0ksaUJBQ0osQ0FDQSxHQUNJLGNBQ0osQ0FDSiIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYmx1ci1oYXNoIHtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuXG4gICAgJiBjYW52YXMge1xuICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IHZhcigtLWJsdXItaGFzaC10aW1lLCAwLjhzKTtcbiAgICAgICAgb3BhY2l0eTogdmFyKC0tYmx1ci1oYXNoLW9wYWNpdHksIDAuNCk7XG4gICAgfVxuXG4gICAgJiBpbWcge1xuICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuNnM7XG4gICAgICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuXG4gICAgICAgICYuYmx1cnJ5IHtcbiAgICAgICAgICAgIG9wYWNpdHk6IHZhcigtLWJsdXItaGFzaC1vcGFjaXR5LCAwLjQpO1xuICAgICAgICAgICAgZmlsdGVyOiBibHVyKDMwcHgpO1xuICAgICAgICB9XG5cbiAgICAgICAgJi5zaGFycCB7XG4gICAgICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICAgICAgYW5pbWF0aW9uOiBzaGFycGVuIHZhcigtLWJsdXItaGFzaC10aW1lLCAwLjhzKSBib3RoO1xuICAgICAgICB9XG4gICAgfVxufVxuXG5Aa2V5ZnJhbWVzIHNoYXJwZW4ge1xuICAgIGZyb20ge1xuICAgICAgICBmaWx0ZXI6IGJsdXIoMzBweCk7XG4gICAgfVxuICAgIHRvIHtcbiAgICAgICAgZmlsdGVyOiBibHVyKDBweClcbiAgICB9XG59XG4iXX0= */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@substrate-system/blur-hash",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "type": "module",
5
5
  "description": "A blurry placeholder image web component",
6
6
  "main": "dist/index.js",
@@ -10,11 +10,29 @@
10
10
  "files": [
11
11
  "./dist/*"
12
12
  ],
13
+ "exports": {
14
+ ".": {
15
+ "import": "./dist/index.js",
16
+ "require": "./dist/index.cjs"
17
+ },
18
+ "./hash": "./dist/bin/index.js",
19
+ "./*": {
20
+ "import": [
21
+ "./dist/*.js",
22
+ "./dist/*"
23
+ ],
24
+ "require": [
25
+ "./dist/*.cjs",
26
+ "./dist/*"
27
+ ]
28
+ }
29
+ },
13
30
  "scripts": {
14
- "lint": "eslint \"./**/*.{ts,js}\"",
31
+ "lint": "eslint \"./**/*.ts\"",
15
32
  "build-tests": "esbuild test/index.ts --target=es2020 --bundle --keep-names > test/test-bundle.js",
16
- "test": "npm run build && npm run build-tests && npm run test-tape-run && npm run test-bin",
33
+ "test": "npm run build && npm run build-tests && npm run test-tape-run && npm run test-bin && npm run test-api",
17
34
  "test-bin": "npm run build-bin && esbuild ./test/bin.ts > ./test/bin.js && node ./test/bin.js | tap-spec",
35
+ "test-api": "esbuild ./test/api.ts --format=esm --platform=node > test/api.js && esbuild ./bin/index.ts --platform=node > bin/index.js && node ./test/api.js | tap-spec",
18
36
  "test-tape-run": "cat test/index.html | tape-run --input=html --static=test | tap-spec",
19
37
  "build-css": "postcss src/index.css --use postcss-nesting > dist/style.css",
20
38
  "build-css:min": "postcss src/index.css --use cssnano postcss-nesting > dist/style.min.css",
@@ -59,22 +77,6 @@
59
77
  "typescript": "^5.4.5",
60
78
  "vite": "^6.0.1"
61
79
  },
62
- "exports": {
63
- ".": {
64
- "import": "./dist/index.js",
65
- "require": "./dist/index.cjs"
66
- },
67
- "./*": {
68
- "import": [
69
- "./dist/*.js",
70
- "./dist/*"
71
- ],
72
- "require": [
73
- "./dist/*.cjs",
74
- "./dist/*"
75
- ]
76
- }
77
- },
78
80
  "author": "nichoth <nichoth@nichoth.com> (https://nichoth.com)",
79
81
  "license": "SEE LICENSE IN LICENSE",
80
82
  "types": "./dist/index.d.ts",