@substrate-system/blur-hash 0.0.2 → 0.0.4

package/LICENSE

@@ -1,20 +1,99 @@
-THE MIT LICENSE (MIT)
-
-Copyright © 2024 Nick Thomas <nichoth@nichoth.com>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the “Software”), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so, 
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+# Big Time Public License
+
+Version 2.0.2
+
+<https://bigtimelicense.com/versions/2.0.2>
+
+## Purpose
+
+These terms let you use and share this software for noncommercial purposes and in small business for free, while also guaranteeing that paid licenses for big businesses will be available on fair, reasonable, and nondiscriminatory terms.
+
+## Acceptance
+
+In order to get any license under these terms, you must agree to them as both strict obligations and conditions to all your licenses.
+
+## Noncommercial Purposes
+
+You may use the software for any noncommercial purpose.
+
+## Personal Uses
+
+Personal use for research, experiment, and testing for the benefit of public knowledge, personal study, private entertainment, hobby projects, amateur pursuits, or religious observance, without any anticipated commercial application, count as use for noncommercial purposes.
+
+## Noncommercial Organizations
+
+Use by any charitable organization, educational institution, public research organization, public safety or health organization, environmental protection organization, or government institution counts as use for noncommercial purposes, regardless of the source of funding or obligations resulting from the funding.
+
+## Small Business
+
+You may use the software for the benefit of your company if it meets all these criteria:
+
+1.  had fewer than 20 total individuals working as employees and independent contractors at all times during the last tax year
+
+2.  earned less than $1,000,000 total revenue in the last tax year
+
+3.  received less than $1,000,000 total debt, equity, and other investment in the last five tax years, counting investment in predecessor companies that reorganized into, merged with, or spun out your company
+
+All dollar figures are United States dollars as of 2019.  Adjust for them inflation according to the United States Bureau of Labor Statistics' consumer price index for all urban consumers, United States city average, for all items, not seasonally adjusted, with 1982–1984=100 reference base.
+
+## Big Business
+
+You may use the software for the benefit of your company:
+
+1.  for 128 days after your company stops qualifying under [Small Business](#small-business)
+
+2.  indefinitely, if the licensor or their legal successor does not offer fair, reasonable, and nondiscriminatory terms for a commercial license for the software within 32 days of [written request](#how-to-request) and negotiate in good faith to conclude a deal
+
+## How to Request
+
+If this software includes an address for the licensor or an agent of the licensor in a standard place, such as in documentation, software package metadata, or an "about" page or screen, try to request a fair commercial license at that address.  If this package includes both online and offline addresses, try online before offline.  If you can't deliver a request that way, or this software doesn't include any addressees, spend one hour online researching an address, recording all your searches and inquiries as you go, and try any addresses that you find.  If you can't find any addresses, or if those addresses also fail, that counts as failure to offer a fair commercial license by the licensor under [Big Business](#big-business).
+
+## Fair, Reasonable, and Nondiscriminatory Terms
+
+Fair, reasonable, and nondiscriminatory terms may license the software perpetually or for a term, and may or may not cover new versions of the software.  If the licensor advertises license terms and a pricing structure for generally available commercial licenses, the licensor proposes license terms and a price as advertised, and a customer not affiliated with the licensor has bought a commercial license for the software on substantially equivalent terms in the past year, the proposal is fair, reasonable, and nondiscriminatory.
+
+## Copyright License
+
+The licensor grants you a copyright license to do everything with the software that would otherwise infringe the licensor's copyright in it for any purpose allowed by these terms.
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these terms or the URL for them above, as well as copies of any plain-text lines beginning with `Required Notice:` that the licensor provided with the software.  For example:
+
+> Required Notice: Copyright Nick Thomas (https://nichoth.com)
+
+## Patent License
+
+The licensor grants you a patent license for the software that covers patent claims the licensor can license, or becomes able to license, that you would infringe by using the software.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of your licenses to anyone else, or prevent the licensor from granting licenses to anyone else.  These terms do not imply any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or contributes to infringement of any patent, your patent license for the software granted under these terms ends immediately. If your company makes such a claim, your patent license ends immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have violated any of these terms, or done anything with the software not covered by your licenses, your licenses can nonetheless continue if you come into full compliance with these terms, and take practical steps to correct past violations, within 32 days of receiving notice.  Otherwise, all your licenses end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will not be liable to you for any damages arising out of these terms or the use or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these terms, and the **software** is the software the licensor makes available under these terms.
+
+**You** refers to the individual or entity agreeing to these terms.
+
+**Your company** is any legal entity, sole proprietorship, or other kind of organization that you work for, plus all organizations that have control over, are under the control of, or are under common control with that organization.  **Control** means ownership of substantially all the assets of an entity, or the power to direct its management and policies by vote, contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the software under these terms.
+
+**Use** means anything you do with the software requiring one of your licenses.

package/README.md

@@ -1,11 +1,16 @@
 # blur hash
-![tests](https://github.com/substrate-system/icons/actions/workflows/nodejs.yml/badge.svg)
-[![types](https://img.shields.io/npm/types/@substrate-system/icons?style=flat-square)](README.md)
+[![tests](https://img.shields.io/github/actions/workflow/status/substrate-system/blur-hash/nodejs.yml?style=flat-square)](https://github.com/substrate-system/blur-hash/actions/workflows/nodejs.yml)
+[![types](https://img.shields.io/npm/types/@substrate-system/blur-hash?style=flat-square)](README.md)
 [![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
+[![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](https://common-changelog.org)
 [![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
-[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)
+[![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/blur-hash?cache-control=no-cache)](https://packagephobia.com/result?p=@substrate-system/blur-hash)
+[![GZip size](https://flat.badgen.net/bundlephobia/minzip/@substrate-system/blur-hash?color=green)](https://bundlephobia.com/package/@substrate-system/blur-hash)
+[![license](https://img.shields.io/badge/license-Big_Time-blue?style=flat-square)](LICENSE)
 
-This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/), with the [blur-hash algorithm](https://blurha.sh/), as a [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
+
+This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/),
+with the [blur-hash algorithm](https://blurha.sh/), as a [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
 
 [See a live demonstration](https://substrate-system.github.io/blur-hash/)
 
@@ -15,10 +20,12 @@ This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-
 <!-- toc -->
 
 - [install](#install)
-- [API](#api)
+- [Modules](#modules)
   * [ESM](#esm)
   * [Common JS](#common-js)
+- [API](#api)
   * [attributes](#attributes)
+  * [`.reset`](#reset)
 - [CSS](#css)
   * [Import CSS](#import-css)
   * [variables](#variables)
@@ -36,7 +43,7 @@ This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-
 npm i -S @substrate-system/blur-hash
 ```
 
-## API
+## Modules
 
 This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
 
@@ -50,6 +57,8 @@ import '@substrate-system/blur-hash'
 require('@substrate-system/blur-hash')
 ```
 
+## API
+
 ### attributes
 Takes the following attributes
 
@@ -62,6 +71,39 @@ The string created by the blurhash algorithm. See [node example](#create-the-str
 #### width & height
 The dimensions for the image
 
+### `.reset`
+
+Change the image, and do the blur-up thing again.
+
+```ts
+reset (
+    newSrc:string,
+    alt:string,
+    placeholder:string,
+    newSrcset?:string|null,
+    newSizes?:string|null,
+    attrs:Partial<{
+        srcset:string|null;
+        width:string|null;
+        height:string|null;
+        time:number|null;
+    }> = {}
+):void
+```
+
+#### example
+
+```js
+document.querySelector('blur-hash')?.reset(
+    'llamas.jpg',
+    'some llamas',
+    'UgI}q#%O%eNa?^I?awaf?aIVs*WBxZxaRjR*'
+)
+```
+
+-------------------------------------------------
+
+
 ## CSS
 
 ### Import CSS
@@ -82,7 +124,7 @@ __CSS variables__
 * `--blur-hash-time` -- the transition time for animating blurry -> sharp,
   default is `0.8s`
 * `--blur-hash-opactiy` -- the opacity to use for the placeholder image,
-  default is `0.6`
+  default is `0.2`
 
 ## use
 This calls the global function `customElements.define`. Just import, then use

package/dist/bin/index.js

@@ -0,0 +1,31 @@
+"use strict";
+import yargs from "yargs";
+import inkjet from "inkjet";
+import { hideBin } from "yargs/helpers";
+import { encode } from "blurhash";
+import fs from "node:fs/promises";
+import { resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { imageSizeFromFile } from "image-size/fromFile";
+export const encodeImageToBlurhash = async (filepath, width, height) => {
+  const data = await fs.readFile(filepath);
+  return new Promise((resolve2, reject) => {
+    inkjet.decode(data, function(err, decoded) {
+      if (err) return reject(err);
+      resolve2(encode(decoded.data, width, height, 4, 4));
+    });
+  });
+};
+const pathToThisFile = resolve(fileURLToPath(import.meta.url));
+const pathPassedToNode = resolve(process.argv[1]);
+const isThisFileBeingRunViaCLI = pathToThisFile.includes(pathPassedToNode);
+if (isThisFileBeingRunViaCLI) {
+  const args = yargs(hideBin(process.argv)).demandCommand(1).command("filename", "the local filename to read").example(
+    "`npx blur my-fiile.jpg`",
+    "Create a small placeholder string from a local file"
+  ).usage("Usage: blur <filename>").argv;
+  const filename = args._[0];
+  const { width, height } = await imageSizeFromFile(filename);
+  const hash = await encodeImageToBlurhash(filename, width, height);
+  process.stdout.write(hash + "\n");
+}

package/dist/index.cjs

@@ -17,44 +17,62 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   BlurHash: () => BlurHash
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
+var import_web_component = require("@substrate-system/web-component");
 var import_blurhash = require("blurhash");
-var import_debug = require("@bicycle-codes/debug");
-const debug = (0, import_debug.createDebug)();
-class BlurHash extends HTMLElement {
+class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
   static {
     __name(this, "BlurHash");
   }
+  time;
   constructor() {
     super();
-    const srcset = this.getAttribute("srcset");
     const w = this.getAttribute("width");
     const h = this.getAttribute("height");
+    const time = this.getAttribute("time");
+    this.time = time ? parseInt(time) : 800;
     this.style.width = "" + w;
     this.style.height = "" + h;
     document.body.style.setProperty(
       "--blur-hash-time",
-      this.getAttribute("time") || "0.8s"
+      time ? "." + (parseInt(time) / 1e3 + "s") : "0.8s"
     );
-    this.innerHTML = `<canvas
-            class="blurry"
-            width=${w}
-            height=${h}
-        ></canvas>
-        <img class="blurry"
-            ${srcset ? `srcset="${srcset}"` : ""}
-            alt="${this.getAttribute("alt")}"
-            content-visibility="${this.getAttribute("content-visibility") || "auto"}"
-            decoding="${this.getAttribute("decoding") || "async"}"
-            loading="${this.getAttribute("loading") || "lazy"}"
-            class="image-element blurry"
-            src="${this.getAttribute("src")}"
-        />
-        `;
+  }
+  /**
+   * Change the image, and do the blur-up thing again.
+   */
+  reset(newSrc, alt, placeholder, newSrcset, newSizes, attrs = {}) {
+    if (attrs.width) this.style.width = attrs.width;
+    if (attrs.height) this.style.height = attrs.height;
+    const width = attrs.width ? parseInt(attrs.width) : parseInt(this.style.width);
+    const height = attrs.height ? parseInt(attrs.height) : parseInt(this.style.height);
+    this.innerHTML = BlurHash.html({
+      srcset: attrs.srcset,
+      w: "" + width,
+      h: "" + height,
+      src: newSrc,
+      alt
+    });
+    const pixels = (0, import_blurhash.decode)(placeholder, width, height);
+    const canvas = this.querySelector("canvas");
+    const ctx = canvas.getContext("2d");
+    const imageData = ctx.createImageData(width, height);
+    imageData.data.set(pixels);
+    ctx.putImageData(imageData, 0, 0);
+    this.setAttribute("src", newSrc);
+    this.setAttribute("placeholder", placeholder);
+    const img = this.querySelector("img");
+    if (newSrcset) img.setAttribute("srcset", newSrcset);
+    if (newSizes) img.setAttribute("sizes", newSizes);
+    img.addEventListener("load", () => {
+      canvas.style.display = "none";
+      img.classList.remove("blurry");
+      img.classList.add("sharp");
+    });
   }
   connectedCallback() {
     const width = parseInt(this.getAttribute("width") ?? "");
@@ -63,6 +81,7 @@ class BlurHash extends HTMLElement {
     if (!placeholder || !width || !height) {
       throw new Error("Missing attributes");
     }
+    this.innerHTML = this.render();
     const pixels = (0, import_blurhash.decode)(placeholder, width, height);
     const canvas = this.querySelector("canvas");
     const ctx = canvas.getContext("2d");
@@ -71,12 +90,49 @@ class BlurHash extends HTMLElement {
     ctx.putImageData(imageData, 0, 0);
     const img = this.querySelector("img");
     img.addEventListener("load", () => {
-      debug("loaded");
       canvas.style.display = "none";
       img.classList.remove("blurry");
       img.classList.add("sharp");
     });
-    debug("the image", img);
+  }
+  static html(attrs) {
+    const {
+      srcset,
+      w,
+      h,
+      alt,
+      contentVisibility,
+      decoding,
+      loading,
+      src
+    } = attrs;
+    return `<canvas
+            class="blurry"
+            width=${w}
+            height=${h}
+        ></canvas>
+
+        <img class="blurry"
+            ${srcset ? `srcset="${srcset}"` : ""}
+            alt="${alt}"
+            content-visibility="${contentVisibility || "auto"}"
+            decoding="${decoding || "async"}"
+            loading="${loading || "lazy"}"
+            class="image-element blurry"
+            src="${src}"
+        />`;
+  }
+  render() {
+    const srcset = this.getAttribute("srcset");
+    const w = this.getAttribute("width");
+    const h = this.getAttribute("height");
+    const time = this.getAttribute("time");
+    this.time = time ? parseInt(time) : 800;
+    const src = this.getAttribute("src");
+    const alt = this.getAttribute("alt");
+    if (!src) throw new Error("Not src");
+    if (!alt) throw new Error("Not alt");
+    return BlurHash.html({ srcset, w, h, src, alt });
   }
 }
 customElements.define("blur-hash", BlurHash);

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { decode } from 'blurhash'\nimport { createDebug } from '@bicycle-codes/debug'\nconst debug = createDebug()\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport class BlurHash extends HTMLElement {\n    constructor () {\n        super()\n        const srcset = this.getAttribute('srcset')\n        const w = this.getAttribute('width')\n        const h = this.getAttribute('height')\n\n        this.style.width = '' + w\n        this.style.height = '' + h\n\n        document.body.style.setProperty('--blur-hash-time',\n            this.getAttribute('time') || '0.8s')\n\n        this.innerHTML = `<canvas\n            class=\"blurry\"\n            width=${w}\n            height=${h}\n        ></canvas>\n        <img class=\"blurry\"\n            ${srcset ? `srcset=\"${srcset}\"` : ''}\n            alt=\"${this.getAttribute('alt')}\"\n            content-visibility=\"${this.getAttribute('content-visibility') || 'auto'}\"\n            decoding=\"${this.getAttribute('decoding') || 'async'}\"\n            loading=\"${this.getAttribute('loading') || 'lazy'}\"\n            class=\"image-element blurry\"\n            src=\"${this.getAttribute('src')}\"\n        />\n        `\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder || !width || !height) {\n            throw new Error('Missing attributes')\n        }\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        const img = this.querySelector('img')!\n\n        img.addEventListener('load', () => {\n            debug('loaded')\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        })\n\n        debug('the image', img)\n    }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAuB;AACvB,mBAA4B;AAC5B,MAAM,YAAQ,0BAAY;AASnB,MAAM,iBAAiB,YAAY;AAAA,EAX1C,OAW0C;AAAA;AAAA;AAAA,EACtC,cAAe;AACX,UAAM;AACN,UAAM,SAAS,KAAK,aAAa,QAAQ;AACzC,UAAM,IAAI,KAAK,aAAa,OAAO;AACnC,UAAM,IAAI,KAAK,aAAa,QAAQ;AAEpC,SAAK,MAAM,QAAQ,KAAK;AACxB,SAAK,MAAM,SAAS,KAAK;AAEzB,aAAS,KAAK,MAAM;AAAA,MAAY;AAAA,MAC5B,KAAK,aAAa,MAAM,KAAK;AAAA,IAAM;AAEvC,SAAK,YAAY;AAAA;AAAA,oBAEL,CAAC;AAAA,qBACA,CAAC;AAAA;AAAA;AAAA,cAGR,SAAS,WAAW,MAAM,MAAM,EAAE;AAAA,mBAC7B,KAAK,aAAa,KAAK,CAAC;AAAA,kCACT,KAAK,aAAa,oBAAoB,KAAK,MAAM;AAAA,wBAC3D,KAAK,aAAa,UAAU,KAAK,OAAO;AAAA,uBACzC,KAAK,aAAa,SAAS,KAAK,MAAM;AAAA;AAAA,mBAE1C,KAAK,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,EAGvC;AAAA,EAEA,oBAAqB;AACjB,UAAM,QAAQ,SAAS,KAAK,aAAa,OAAO,KAAK,EAAE;AACvD,UAAM,SAAS,SAAS,KAAK,aAAa,QAAQ,KAAK,EAAE;AACzD,UAAM,cAAc,KAAK,aAAa,aAAa;AACnD,QAAI,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ;AACnC,YAAM,IAAI,MAAM,oBAAoB;AAAA,IACxC;AAEA,UAAM,aAAS,wBAAO,aAAa,OAAO,MAAM;AAChD,UAAM,SAAS,KAAK,cAAc,QAAQ;AAC1C,UAAM,MAAM,OAAO,WAAW,IAAI;AAClC,UAAM,YAAY,IAAI,gBAAgB,OAAO,MAAM;AACnD,cAAU,KAAK,IAAI,MAAM;AACzB,QAAI,aAAa,WAAW,GAAG,CAAC;AAEhC,UAAM,MAAM,KAAK,cAAc,KAAK;AAEpC,QAAI,iBAAiB,QAAQ,MAAM;AAC/B,YAAM,QAAQ;AACd,aAAO,MAAM,UAAU;AACvB,UAAI,UAAU,OAAO,QAAQ;AAC7B,UAAI,UAAU,IAAI,OAAO;AAAA,IAC7B,CAAC;AAED,UAAM,aAAa,GAAG;AAAA,EAC1B;AACJ;AAEA,eAAe,OAAO,aAAa,QAAQ;",
+  "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"],
+  "mappings": "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",
   "names": []
 }