@substrate-system/blur-hash 0.0.6 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +114 -60
- package/dist/index.cjs +2 -27
- package/dist/index.cjs.map +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -27
- package/dist/index.js.map +2 -2
- package/dist/index.min.js +15 -15
- package/dist/index.min.js.map +4 -4
- package/dist/meta.json +33 -4
- package/dist/ssr.cjs +56 -0
- package/dist/ssr.cjs.map +7 -0
- package/dist/ssr.d.ts +3 -0
- package/dist/ssr.d.ts.map +1 -0
- package/dist/ssr.js +37 -0
- package/dist/ssr.js.map +7 -0
- package/dist/ssr.min.js +17 -0
- package/dist/ssr.min.js.map +7 -0
- package/package.json +9 -3
package/README.md
CHANGED
|
@@ -22,17 +22,18 @@ with the [blur-hash algorithm](https://blurha.sh/), as a [web component](https:/
|
|
|
22
22
|
- [Install](#install)
|
|
23
23
|
- [Modules](#modules)
|
|
24
24
|
* [ESM](#esm)
|
|
25
|
-
* [
|
|
25
|
+
* [CJS](#cjs)
|
|
26
|
+
* [Bundler](#bundler)
|
|
27
|
+
* [pre-built JS](#pre-built-js)
|
|
28
|
+
- [Use](#use)
|
|
29
|
+
* [Server-side rendering](#server-side-rendering)
|
|
26
30
|
- [API](#api)
|
|
27
|
-
* [
|
|
31
|
+
* [Attributes](#attributes)
|
|
28
32
|
* [`.reset`](#reset)
|
|
29
33
|
- [CSS](#css)
|
|
30
34
|
* [Import CSS](#import-css)
|
|
31
35
|
* [variables](#variables)
|
|
32
|
-
- [
|
|
33
|
-
* [Bundler](#bundler)
|
|
34
|
-
* [pre-built JS](#pre-built-js)
|
|
35
|
-
- [Create the string](#create-the-string)
|
|
36
|
+
- [Create the blur-hash string](#create-the-blur-hash-string)
|
|
36
37
|
* [JS API](#js-api)
|
|
37
38
|
* [CLI](#cli)
|
|
38
39
|
|
|
@@ -53,38 +54,130 @@ This exposes ESM and common JS via [package.json `exports` field](https://nodejs
|
|
|
53
54
|
import { BlurHash } from '@substrate-system/blur-hash'
|
|
54
55
|
```
|
|
55
56
|
|
|
56
|
-
###
|
|
57
|
+
### CJS
|
|
58
|
+
```js
|
|
59
|
+
const blurHash = require('@substrate-system/blur-hash')
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Bundler
|
|
63
|
+
|
|
64
|
+
Just import like normal.
|
|
65
|
+
|
|
66
|
+
### pre-built JS
|
|
67
|
+
This package exposes minified JS files too. Copy them to a location that is
|
|
68
|
+
accessible to your web server, then link to them in HTML.
|
|
69
|
+
|
|
70
|
+
#### copy
|
|
71
|
+
```sh
|
|
72
|
+
cp ./node_modules/@substrate-system/blur-hash/dist/index.min.js ./public/blur-hash.min.js
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
#### HTML
|
|
76
|
+
```html
|
|
77
|
+
<script type="module" src="./blur-hash.min.js"></script>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Use the tag in HTML.
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<div>
|
|
84
|
+
<blur-hash
|
|
85
|
+
time="0.6s"
|
|
86
|
+
alt="cool cat"
|
|
87
|
+
placeholder="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
|
|
88
|
+
src="..."
|
|
89
|
+
width=100
|
|
90
|
+
height=100
|
|
91
|
+
>
|
|
92
|
+
</blur-hash>
|
|
93
|
+
</div>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Use
|
|
97
|
+
Call the static method `.define` in JS, then use the tag in HTML.
|
|
98
|
+
|
|
99
|
+
```js
|
|
100
|
+
import { BlurHash } from '@substrate-system/blur-hash'
|
|
101
|
+
|
|
102
|
+
BlurHash.define()
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<blur-hash
|
|
107
|
+
alt="cool cat"
|
|
108
|
+
placeholder="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
|
|
109
|
+
width=100
|
|
110
|
+
height=100
|
|
111
|
+
src="..."
|
|
112
|
+
></blur-hash>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### Server-side rendering
|
|
116
|
+
Following convention, this module exposes an `html` function at `/ssr`. It
|
|
117
|
+
returns a plain string of appropriate markup in Node.
|
|
118
|
+
|
|
57
119
|
```js
|
|
58
|
-
|
|
120
|
+
import { html } from '@substrate-system/blur-hash/ssr'
|
|
121
|
+
|
|
122
|
+
const htmlString = html({
|
|
123
|
+
alt: 'hello',
|
|
124
|
+
width: 30,
|
|
125
|
+
height: 30,
|
|
126
|
+
placeholder: 'UHGIM_X900xC~XWFE0xt00o3%1oz-;t7i|IV',
|
|
127
|
+
src: 'abc.jpg'
|
|
128
|
+
})
|
|
59
129
|
```
|
|
60
130
|
|
|
61
131
|
## API
|
|
62
132
|
|
|
63
|
-
###
|
|
64
|
-
|
|
133
|
+
### Attributes
|
|
134
|
+
|
|
135
|
+
The required attributes are `alt`, `src`, `placeholder`, `width`, and `height`.
|
|
136
|
+
|
|
137
|
+
```ts
|
|
138
|
+
type Attrs = {
|
|
139
|
+
alt:string;
|
|
140
|
+
width:string|number;
|
|
141
|
+
height:string|number;
|
|
142
|
+
placeholder:string;
|
|
143
|
+
src:string;
|
|
144
|
+
srcset?:string|null;
|
|
145
|
+
sizes?:string|null;
|
|
146
|
+
time?:number;
|
|
147
|
+
contentVisibility?:'visible'|'auto'|'hidden'|null;
|
|
148
|
+
decoding?:'sync'|'async'|'auto'|null;
|
|
149
|
+
loading?:'lazy'|'eager'|'auto'|null;
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
--------------------------------------
|
|
154
|
+
|
|
155
|
+
#### other attributes
|
|
65
156
|
|
|
66
157
|
#### time
|
|
67
158
|
The time for css transitions and animation. This is set as a CSS variable.
|
|
68
159
|
|
|
69
|
-
#### placeholder
|
|
70
|
-
The string created by the blurhash algorithm. See [node example](#create-the-string).
|
|
71
|
-
|
|
72
160
|
#### width & height
|
|
73
161
|
The dimensions for the image
|
|
74
162
|
|
|
163
|
+
----------------------------------------------
|
|
164
|
+
|
|
75
165
|
### `.reset`
|
|
76
166
|
|
|
77
167
|
Change the image, and do the blur-up thing again.
|
|
78
168
|
|
|
79
169
|
Takes a new `src` string, new placeholder string, and all other attributes.
|
|
80
170
|
|
|
171
|
+
If `width` and `height` are not passed in, it will keep the existing width
|
|
172
|
+
and height.
|
|
173
|
+
|
|
81
174
|
```ts
|
|
82
175
|
reset (attributes:{
|
|
176
|
+
src:string;
|
|
83
177
|
alt:string;
|
|
84
|
-
width:string;
|
|
85
|
-
height:string;
|
|
86
178
|
placeholder:string;
|
|
87
|
-
|
|
179
|
+
width?:string;
|
|
180
|
+
height?:string;
|
|
88
181
|
srcset?:string|null;
|
|
89
182
|
sizes?:string|null;
|
|
90
183
|
time?:number;
|
|
@@ -137,51 +230,10 @@ __CSS variables__
|
|
|
137
230
|
* `--blur-hash-opactiy` -- the opacity to use for the placeholder image,
|
|
138
231
|
default is `0.2`
|
|
139
232
|
|
|
140
|
-
##
|
|
233
|
+
## Create the blur-hash string
|
|
141
234
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
### Bundler
|
|
145
|
-
|
|
146
|
-
#### JS
|
|
147
|
-
```js
|
|
148
|
-
import { BlurHash } from '@substrate-system/blur-hash'
|
|
149
|
-
|
|
150
|
-
BlurHash.define()
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
#### HTML
|
|
154
|
-
|
|
155
|
-
Use the tag in HTML.
|
|
156
|
-
|
|
157
|
-
```html
|
|
158
|
-
<div>
|
|
159
|
-
<blur-hash
|
|
160
|
-
time="0.6s"
|
|
161
|
-
placeholder="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
|
|
162
|
-
src="..."
|
|
163
|
-
width=100
|
|
164
|
-
height=100
|
|
165
|
-
>
|
|
166
|
-
</blur-hash>
|
|
167
|
-
</div>
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
### pre-built JS
|
|
171
|
-
This package exposes minified JS files too. Copy them to a location that is
|
|
172
|
-
accessible to your web server, then link to them in HTML.
|
|
173
|
-
|
|
174
|
-
#### copy
|
|
175
|
-
```sh
|
|
176
|
-
cp ./node_modules/@substrate-system/blur-hash/dist/blur-hash.min.js ./public
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
#### HTML
|
|
180
|
-
```html
|
|
181
|
-
<script type="module" src="./blur-hash.min.js"></script>
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
## Create the string
|
|
235
|
+
Use Node to create the `placeholder` attribute, the string consumed
|
|
236
|
+
by blur-hash.
|
|
185
237
|
|
|
186
238
|
### JS API
|
|
187
239
|
|
|
@@ -193,6 +245,7 @@ const hash = await createString('../example/100.jpg')
|
|
|
193
245
|
```
|
|
194
246
|
|
|
195
247
|
### CLI
|
|
248
|
+
|
|
196
249
|
This package includes a CLI tool to create the placeholder string. After
|
|
197
250
|
installing this as a dependency,
|
|
198
251
|
|
|
@@ -203,6 +256,7 @@ npx blur ./my-file.jpg
|
|
|
203
256
|
Will print a string to stdout that can be used as a placeholder attribute.
|
|
204
257
|
|
|
205
258
|
#### Print to system clipboard
|
|
259
|
+
|
|
206
260
|
On mac os,
|
|
207
261
|
|
|
208
262
|
```sh
|
package/dist/index.cjs
CHANGED
|
@@ -24,6 +24,7 @@ __export(index_exports, {
|
|
|
24
24
|
module.exports = __toCommonJS(index_exports);
|
|
25
25
|
var import_web_component = require("@substrate-system/web-component");
|
|
26
26
|
var import_blurhash = require("blurhash");
|
|
27
|
+
var import_ssr = require("./ssr.js");
|
|
27
28
|
class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
|
|
28
29
|
static {
|
|
29
30
|
__name(this, "BlurHash");
|
|
@@ -94,33 +95,7 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
|
|
|
94
95
|
});
|
|
95
96
|
}
|
|
96
97
|
static html(attrs) {
|
|
97
|
-
|
|
98
|
-
width,
|
|
99
|
-
height,
|
|
100
|
-
alt,
|
|
101
|
-
contentVisibility,
|
|
102
|
-
decoding,
|
|
103
|
-
loading,
|
|
104
|
-
srcset,
|
|
105
|
-
sizes,
|
|
106
|
-
src
|
|
107
|
-
} = attrs;
|
|
108
|
-
return `<canvas
|
|
109
|
-
class="blurry"
|
|
110
|
-
width=${width}
|
|
111
|
-
height=${height}
|
|
112
|
-
></canvas>
|
|
113
|
-
|
|
114
|
-
<img class="blurry"
|
|
115
|
-
alt="${alt}"
|
|
116
|
-
content-visibility="${contentVisibility || "auto"}"
|
|
117
|
-
decoding="${decoding || "async"}"
|
|
118
|
-
loading="${loading || "lazy"}"
|
|
119
|
-
class="image-element blurry"
|
|
120
|
-
${srcset ? `srcset="${srcset}"` : ""}
|
|
121
|
-
${sizes ? `sizes=${sizes}` : ""}
|
|
122
|
-
src="${src}"
|
|
123
|
-
/>`;
|
|
98
|
+
return (0, import_ssr.html)(attrs);
|
|
124
99
|
}
|
|
125
100
|
/**
|
|
126
101
|
* Use the attributes to create HTML.
|
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'\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAA6B;AAC7B,sBAAuB;
|
|
4
|
+
"sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { html } from './ssr.js'\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 return html(attrs)\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.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;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAK9D,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;;;;;;;;;;;wCA8BgB,CAAC;;;;;sCAKD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA6BV,CAAA;gJAGI,CAAX;4FAKW,CAAX;mJAKU,CAAC;+FAGD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAkCiI,CAAC;;;;;;;;;;;;;;;;;;;;;;;uBAAspE,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;;;;;AAhHpnmB,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;IAI3B;;OAEG;IACH,MAAM,IAAI,MAAM;CAgBnB"}
|
package/dist/index.js
CHANGED
|
@@ -2,6 +2,7 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
3
|
import { WebComponent } from "@substrate-system/web-component";
|
|
4
4
|
import { decode } from "blurhash";
|
|
5
|
+
import { html } from "./ssr.js";
|
|
5
6
|
class BlurHash extends WebComponent.create("blur-hash") {
|
|
6
7
|
static {
|
|
7
8
|
__name(this, "BlurHash");
|
|
@@ -72,33 +73,7 @@ class BlurHash extends WebComponent.create("blur-hash") {
|
|
|
72
73
|
});
|
|
73
74
|
}
|
|
74
75
|
static html(attrs) {
|
|
75
|
-
|
|
76
|
-
width,
|
|
77
|
-
height,
|
|
78
|
-
alt,
|
|
79
|
-
contentVisibility,
|
|
80
|
-
decoding,
|
|
81
|
-
loading,
|
|
82
|
-
srcset,
|
|
83
|
-
sizes,
|
|
84
|
-
src
|
|
85
|
-
} = attrs;
|
|
86
|
-
return `<canvas
|
|
87
|
-
class="blurry"
|
|
88
|
-
width=${width}
|
|
89
|
-
height=${height}
|
|
90
|
-
></canvas>
|
|
91
|
-
|
|
92
|
-
<img class="blurry"
|
|
93
|
-
alt="${alt}"
|
|
94
|
-
content-visibility="${contentVisibility || "auto"}"
|
|
95
|
-
decoding="${decoding || "async"}"
|
|
96
|
-
loading="${loading || "lazy"}"
|
|
97
|
-
class="image-element blurry"
|
|
98
|
-
${srcset ? `srcset="${srcset}"` : ""}
|
|
99
|
-
${sizes ? `sizes=${sizes}` : ""}
|
|
100
|
-
src="${src}"
|
|
101
|
-
/>`;
|
|
76
|
+
return html(attrs);
|
|
102
77
|
}
|
|
103
78
|
/**
|
|
104
79
|
* Use the attributes to create HTML.
|
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'\
|
|
5
|
-
"mappings": ";;AAAA,SAAS,oBAAoB;AAC7B,SAAS,cAAc;
|
|
4
|
+
"sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { html } from './ssr.js'\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 return html(attrs)\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,17 +1,17 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
var D=Object.defineProperty;var n=(e,t)=>D(e,"name",{value:t,configurable:!0});var O=Object.defineProperty,y=n((e,t)=>O(e,"name",{value:t,configurable:!0}),"__name"),w=class e extends window.HTMLElement{static{n(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}`}n(C,"eventName");y(C,"eventName");function N(e){return document.createElement(e).constructor!==window.HTMLElement}n(N,"isRegistered");y(N,"isRegistered");var V=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],m=n(e=>{let t=0;for(let r=0;r<e.length;r++){let s=e[r],i=V.indexOf(s);t=t*83+i}return t},"x");var v=n(e=>{let t=e/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},"f"),A=n(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"),j=n(e=>e<0?-1:1,"F"),E=n((e,t)=>j(e)*Math.pow(Math.abs(e),t),"M"),T=class extends Error{static{n(this,"d")}constructor(e){super(e),this.name="ValidationError",this.message=e}},R=n(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 k=n(e=>{let t=e>>16,r=e>>8&255,s=e&255;return[v(t),v(r),v(s)]},"z"),B=n((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"),U=n((e,t,r,s)=>{R(e),s=s|1;let i=m(e[0]),u=Math.floor(i/9)+1,o=i%9+1,c=(m(e[1])+1)/166,h=new Array(o*u);for(let a=0;a<h.length;a++)if(a===0){let d=m(e.substring(2,6));h[a]=k(d)}else{let d=m(e.substring(4+a*2,6+a*2));h[a]=B(d,c*s)}let g=t*4,l=new Uint8ClampedArray(g*r);for(let a=0;a<r;a++)for(let d=0;d<t;d++){let I=0,$=0,L=0;for(let b=0;b<u;b++)for(let f=0;f<o;f++){let M=Math.cos(Math.PI*d*f/t)*Math.cos(Math.PI*a*b/r),p=h[f+b*o];I+=p[0]*M,$+=p[1]*M,L+=p[2]*M}let z=A(I),S=A($),P=A(L);l[4*d+0+a*g]=z,l[4*d+1+a*g]=S,l[4*d+2+a*g]=P,l[4*d+3+a*g]=255}return l},"U"),x=U;function H(e){let{width:t,height:r,alt:s,contentVisibility:i,decoding:u,loading:o,srcset:c,sizes:h,src:g}=e,l=`<canvas
|
|
2
|
+
class="blurry"
|
|
3
|
+
width=${t}
|
|
4
|
+
height=${r}
|
|
5
|
+
></canvas>
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
7
|
+
<img class="blurry"
|
|
8
|
+
alt="${s}"
|
|
9
|
+
content-visibility="${i||"auto"}"
|
|
10
|
+
decoding="${u||"async"}"
|
|
11
|
+
loading="${o||"lazy"}"
|
|
12
|
+
class="image-element blurry"
|
|
13
|
+
${c?`srcset="${c}"`:""}
|
|
14
|
+
${h?`sizes=${h}`:""}
|
|
15
|
+
src="${g}"
|
|
16
|
+
/>`;return typeof window>"u"?`<blur-hash>${l}</blur-hash>`:l}n(H,"html");var q=class e extends w.create("blur-hash"){static{n(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:u}=t,o=x(i,r,s),c=this.querySelector("canvas"),h=c.getContext("2d"),g=h.createImageData(r,s);g.data.set(o),h.putImageData(g,0,0),this.setAttribute("src",u),this.setAttribute("placeholder",i);let l=this.querySelector("img");t.srcset&&l.setAttribute("srcset",t.srcset),t.sizes&&l.setAttribute("sizes",t.sizes),l.addEventListener("load",()=>{c.style.display="none",l.classList.remove("blurry"),l.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),u=this.querySelector("canvas"),o=u.getContext("2d"),c=o.createImageData(t,r);c.data.set(i),o.putImageData(c,0,0);let h=this.querySelector("img");h.addEventListener("load",()=>{u.style.display="none",h.classList.remove("blurry"),h.classList.add("sharp")})}static html(t){return H(t)}render(){let t=this.getAttribute("srcset"),r=this.getAttribute("width"),s=this.getAttribute("height"),i=this.getAttribute("time"),u=this.getAttribute("placeholder");this.time=i?parseInt(i):800;let o=this.getAttribute("src"),c=this.getAttribute("alt");if(!u)throw new Error("not placeholder");if(!r||!s)throw new Error("not width or not height");if(!o)throw new Error("Not src");if(!c)throw new Error("Not alt");return e.html({srcset:t,width:r,height:s,src:o,alt:c,placeholder:u})}};export{q as BlurHash};
|
|
17
17
|
//# sourceMappingURL=index.min.js.map
|
package/dist/index.min.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../node_modules/@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// 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
|
-
"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", "
|
|
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/ssr.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 type { ImgAttrs } from './index.js'\n\nexport function 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 const htmlString = `<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 // running in node?\n return typeof window === 'undefined' ?\n `<blur-hash>${htmlString}</blur-hash>` :\n htmlString\n}\n", "import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { html } from './ssr.js'\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 return html(attrs)\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
|
+
"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", "C", "x", "m", "b", "i", "u", "o", "a", "c", "s", "y", "B", "R", "w", "P", "G", "T", "V", "h", "I", "E", "j", "html", "attrs", "width", "height", "alt", "contentVisibility", "decoding", "loading", "srcset", "sizes", "src", "htmlString", "__name", "BlurHash", "_BlurHash", "WebComponent", "__name", "w", "h", "time", "attrs", "width", "height", "placeholder", "newSrc", "pixels", "j", "canvas", "ctx", "imageData", "img", "html", "srcset", "src", "alt"]
|
|
7
7
|
}
|
package/dist/meta.json
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"inputs": {
|
|
3
3
|
"src/index.ts": {
|
|
4
|
-
"bytes":
|
|
4
|
+
"bytes": 4627,
|
|
5
|
+
"imports": [],
|
|
6
|
+
"format": "esm"
|
|
7
|
+
},
|
|
8
|
+
"src/ssr.ts": {
|
|
9
|
+
"bytes": 856,
|
|
5
10
|
"imports": [],
|
|
6
11
|
"format": "esm"
|
|
7
12
|
}
|
|
@@ -11,7 +16,7 @@
|
|
|
11
16
|
"imports": [],
|
|
12
17
|
"exports": [],
|
|
13
18
|
"inputs": {},
|
|
14
|
-
"bytes":
|
|
19
|
+
"bytes": 7460
|
|
15
20
|
},
|
|
16
21
|
"dist/index.js": {
|
|
17
22
|
"imports": [
|
|
@@ -24,6 +29,11 @@
|
|
|
24
29
|
"path": "blurhash",
|
|
25
30
|
"kind": "import-statement",
|
|
26
31
|
"external": true
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"path": "./ssr.js",
|
|
35
|
+
"kind": "import-statement",
|
|
36
|
+
"external": true
|
|
27
37
|
}
|
|
28
38
|
],
|
|
29
39
|
"exports": [
|
|
@@ -32,10 +42,29 @@
|
|
|
32
42
|
"entryPoint": "src/index.ts",
|
|
33
43
|
"inputs": {
|
|
34
44
|
"src/index.ts": {
|
|
35
|
-
"bytesInOutput":
|
|
45
|
+
"bytesInOutput": 3640
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
"bytes": 3826
|
|
49
|
+
},
|
|
50
|
+
"dist/ssr.js.map": {
|
|
51
|
+
"imports": [],
|
|
52
|
+
"exports": [],
|
|
53
|
+
"inputs": {},
|
|
54
|
+
"bytes": 1462
|
|
55
|
+
},
|
|
56
|
+
"dist/ssr.js": {
|
|
57
|
+
"imports": [],
|
|
58
|
+
"exports": [
|
|
59
|
+
"html"
|
|
60
|
+
],
|
|
61
|
+
"entryPoint": "src/ssr.ts",
|
|
62
|
+
"inputs": {
|
|
63
|
+
"src/ssr.ts": {
|
|
64
|
+
"bytesInOutput": 734
|
|
36
65
|
}
|
|
37
66
|
},
|
|
38
|
-
"bytes":
|
|
67
|
+
"bytes": 914
|
|
39
68
|
}
|
|
40
69
|
}
|
|
41
70
|
}
|
package/dist/ssr.cjs
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
var ssr_exports = {};
|
|
21
|
+
__export(ssr_exports, {
|
|
22
|
+
html: () => html
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(ssr_exports);
|
|
25
|
+
function html(attrs) {
|
|
26
|
+
const {
|
|
27
|
+
width,
|
|
28
|
+
height,
|
|
29
|
+
alt,
|
|
30
|
+
contentVisibility,
|
|
31
|
+
decoding,
|
|
32
|
+
loading,
|
|
33
|
+
srcset,
|
|
34
|
+
sizes,
|
|
35
|
+
src
|
|
36
|
+
} = attrs;
|
|
37
|
+
const htmlString = `<canvas
|
|
38
|
+
class="blurry"
|
|
39
|
+
width=${width}
|
|
40
|
+
height=${height}
|
|
41
|
+
></canvas>
|
|
42
|
+
|
|
43
|
+
<img class="blurry"
|
|
44
|
+
alt="${alt}"
|
|
45
|
+
content-visibility="${contentVisibility || "auto"}"
|
|
46
|
+
decoding="${decoding || "async"}"
|
|
47
|
+
loading="${loading || "lazy"}"
|
|
48
|
+
class="image-element blurry"
|
|
49
|
+
${srcset ? `srcset="${srcset}"` : ""}
|
|
50
|
+
${sizes ? `sizes=${sizes}` : ""}
|
|
51
|
+
src="${src}"
|
|
52
|
+
/>`;
|
|
53
|
+
return typeof window === "undefined" ? `<blur-hash>${htmlString}</blur-hash>` : htmlString;
|
|
54
|
+
}
|
|
55
|
+
__name(html, "html");
|
|
56
|
+
//# sourceMappingURL=ssr.cjs.map
|
package/dist/ssr.cjs.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/ssr.ts"],
|
|
4
|
+
"sourcesContent": ["import type { ImgAttrs } from './index.js'\n\nexport function 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 const htmlString = `<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 // running in node?\n return typeof window === 'undefined' ?\n `<blur-hash>${htmlString}</blur-hash>` :\n htmlString\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,SAAS,KAAM,OAAgB;AAClC,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,aAAa;AAAA;AAAA,gBAEP,KAAK;AAAA,iBACJ,MAAM;AAAA;AAAA;AAAA;AAAA,eAIR,GAAG;AAAA,8BACY,qBAAqB,MAAM;AAAA,oBACrC,YAAY,OAAO;AAAA,mBACpB,WAAW,MAAM;AAAA;AAAA,UAE1B,SAAS,WAAW,MAAM,MAAM,EAAE;AAAA,UAClC,QAAQ,SAAS,KAAK,KAAK,EAAE;AAAA,eACxB,GAAG;AAAA;AAId,SAAO,OAAO,WAAW,cACrB,cAAc,UAAU,iBACxB;AACR;AAlCgB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/ssr.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ssr.d.ts","sourceRoot":"","sources":["../src/ssr.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE1C,wBAAgB,IAAI,CAAE,KAAK,EAAC,QAAQ,UAkCnC"}
|
package/dist/ssr.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
function html(attrs) {
|
|
4
|
+
const {
|
|
5
|
+
width,
|
|
6
|
+
height,
|
|
7
|
+
alt,
|
|
8
|
+
contentVisibility,
|
|
9
|
+
decoding,
|
|
10
|
+
loading,
|
|
11
|
+
srcset,
|
|
12
|
+
sizes,
|
|
13
|
+
src
|
|
14
|
+
} = attrs;
|
|
15
|
+
const htmlString = `<canvas
|
|
16
|
+
class="blurry"
|
|
17
|
+
width=${width}
|
|
18
|
+
height=${height}
|
|
19
|
+
></canvas>
|
|
20
|
+
|
|
21
|
+
<img class="blurry"
|
|
22
|
+
alt="${alt}"
|
|
23
|
+
content-visibility="${contentVisibility || "auto"}"
|
|
24
|
+
decoding="${decoding || "async"}"
|
|
25
|
+
loading="${loading || "lazy"}"
|
|
26
|
+
class="image-element blurry"
|
|
27
|
+
${srcset ? `srcset="${srcset}"` : ""}
|
|
28
|
+
${sizes ? `sizes=${sizes}` : ""}
|
|
29
|
+
src="${src}"
|
|
30
|
+
/>`;
|
|
31
|
+
return typeof window === "undefined" ? `<blur-hash>${htmlString}</blur-hash>` : htmlString;
|
|
32
|
+
}
|
|
33
|
+
__name(html, "html");
|
|
34
|
+
export {
|
|
35
|
+
html
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=ssr.js.map
|
package/dist/ssr.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/ssr.ts"],
|
|
4
|
+
"sourcesContent": ["import type { ImgAttrs } from './index.js'\n\nexport function 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 const htmlString = `<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 // running in node?\n return typeof window === 'undefined' ?\n `<blur-hash>${htmlString}</blur-hash>` :\n htmlString\n}\n"],
|
|
5
|
+
"mappings": ";;AAEO,SAAS,KAAM,OAAgB;AAClC,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,aAAa;AAAA;AAAA,gBAEP,KAAK;AAAA,iBACJ,MAAM;AAAA;AAAA;AAAA;AAAA,eAIR,GAAG;AAAA,8BACY,qBAAqB,MAAM;AAAA,oBACrC,YAAY,OAAO;AAAA,mBACpB,WAAW,MAAM;AAAA;AAAA,UAE1B,SAAS,WAAW,MAAM,MAAM,EAAE;AAAA,UAClC,QAAQ,SAAS,KAAK,KAAK,EAAE;AAAA,eACxB,GAAG;AAAA;AAId,SAAO,OAAO,WAAW,cACrB,cAAc,UAAU,iBACxB;AACR;AAlCgB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/ssr.min.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
var $=Object.defineProperty;var r=(t,s)=>$(t,"name",{value:s,configurable:!0});function m(t){let{width:s,height:l,alt:a,contentVisibility:c,decoding:o,loading:d,srcset:i,sizes:n,src:h}=t,e=`<canvas
|
|
2
|
+
class="blurry"
|
|
3
|
+
width=${s}
|
|
4
|
+
height=${l}
|
|
5
|
+
></canvas>
|
|
6
|
+
|
|
7
|
+
<img class="blurry"
|
|
8
|
+
alt="${a}"
|
|
9
|
+
content-visibility="${c||"auto"}"
|
|
10
|
+
decoding="${o||"async"}"
|
|
11
|
+
loading="${d||"lazy"}"
|
|
12
|
+
class="image-element blurry"
|
|
13
|
+
${i?`srcset="${i}"`:""}
|
|
14
|
+
${n?`sizes=${n}`:""}
|
|
15
|
+
src="${h}"
|
|
16
|
+
/>`;return typeof window>"u"?`<blur-hash>${e}</blur-hash>`:e}r(m,"html");export{m as html};
|
|
17
|
+
//# sourceMappingURL=ssr.min.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/ssr.ts"],
|
|
4
|
+
"sourcesContent": ["import type { ImgAttrs } from './index.js'\n\nexport function 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 const htmlString = `<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 // running in node?\n return typeof window === 'undefined' ?\n `<blur-hash>${htmlString}</blur-hash>` :\n htmlString\n}\n"],
|
|
5
|
+
"mappings": "+EAEO,SAASA,EAAMC,EAAgB,CAClC,GAAM,CACF,MAAAC,EACA,OAAAC,EACA,IAAAC,EACA,kBAAAC,EACA,SAAAC,EACA,QAAAC,EACA,OAAAC,EACA,MAAAC,EACA,IAAAC,CACJ,EAAIT,EAEEU,EAAa;AAAA;AAAA,gBAEPT,CAAK;AAAA,iBACJC,CAAM;AAAA;AAAA;AAAA;AAAA,eAIRC,CAAG;AAAA,8BACYC,GAAqB,MAAM;AAAA,oBACrCC,GAAY,OAAO;AAAA,mBACpBC,GAAW,MAAM;AAAA;AAAA,UAE1BC,EAAS,WAAWA,CAAM,IAAM,EAAE;AAAA,UAClCC,EAAQ,SAASA,CAAK,GAAK,EAAE;AAAA,eACxBC,CAAG;AAAA,QAId,OAAO,OAAO,OAAW,IACrB,cAAcC,CAAU,eACxBA,CACR,CAlCgBC,EAAAZ,EAAA",
|
|
6
|
+
"names": ["html", "attrs", "width", "height", "alt", "contentVisibility", "decoding", "loading", "srcset", "sizes", "src", "htmlString", "__name"]
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@substrate-system/blur-hash",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A blurry placeholder image web component",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -15,6 +15,10 @@
|
|
|
15
15
|
"import": "./dist/index.js",
|
|
16
16
|
"require": "./dist/index.cjs"
|
|
17
17
|
},
|
|
18
|
+
"./ssr": {
|
|
19
|
+
"import": "./dist/ssr.js",
|
|
20
|
+
"require": "./dist/ssr.cjs"
|
|
21
|
+
},
|
|
18
22
|
"./hash": "./dist/bin/index.js",
|
|
19
23
|
"./*": {
|
|
20
24
|
"import": [
|
|
@@ -30,9 +34,10 @@
|
|
|
30
34
|
"scripts": {
|
|
31
35
|
"lint": "eslint \"./**/*.ts\"",
|
|
32
36
|
"build-tests": "esbuild test/index.ts --target=es2020 --bundle --keep-names > test/test-bundle.js",
|
|
33
|
-
"test": "npm run build && npm run build-tests && npm run test-tape-run && npm run test-bin && npm run test-api",
|
|
37
|
+
"test": "npm run build && npm run build-tests && npm run test-tape-run && npm run test-bin && npm run test-api && npm run test-ssr",
|
|
34
38
|
"test-bin": "npm run build-bin && esbuild ./test/bin.ts > ./test/bin.js && node ./test/bin.js | tap-spec",
|
|
35
39
|
"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",
|
|
40
|
+
"test-ssr": "esbuild ./test/ssr.ts --bundle --platform=node | node --input-type=module | tap-spec",
|
|
36
41
|
"test-tape-run": "cat test/index.html | tape-run --input=html --static=test | tap-spec",
|
|
37
42
|
"build-css": "postcss src/index.css --use postcss-nesting > dist/style.css",
|
|
38
43
|
"build-css:min": "postcss src/index.css --use cssnano postcss-nesting > dist/style.min.css",
|
|
@@ -44,8 +49,9 @@
|
|
|
44
49
|
"build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-cjs && npm run build-esm && npm run build-esm:min && npm run build-bin && npm run build-css && npm run build-css:min",
|
|
45
50
|
"build-bin": "mkdir -p dist/bin && esbuild --platform=node ./bin/index.ts > ./dist/bin/index.js",
|
|
46
51
|
"start": "vite",
|
|
52
|
+
"toc": "markdown-toc --maxdepth 3 -i README.md",
|
|
47
53
|
"preversion": "npm run lint",
|
|
48
|
-
"version": "
|
|
54
|
+
"version": "npm run toc && auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md README.md",
|
|
49
55
|
"postversion": "git push --follow-tags && npm publish",
|
|
50
56
|
"prepublishOnly": "npm run build"
|
|
51
57
|
},
|