blurhash-img - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

custom-elements.json

@@ -10,2 +10,3 @@ {
           "name": "hash",
+          "description": "The encoded blurhash, as a string.",
           "type": "string | undefined"
@@ -15,2 +16,3 @@ },
           "name": "resolutionX",
+          "description": "The X-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance.",
           "type": "number",
@@ -21,2 +23,3 @@ "default": "32"
           "name": "resolutionY",
+          "description": "The Y-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance.",
           "type": "number",
@@ -30,2 +33,3 @@ "default": "32"
           "attribute": "hash",
+          "description": "The encoded blurhash, as a string.",
           "type": "string | undefined"
@@ -36,2 +40,3 @@ },
           "attribute": "resolutionX",
+          "description": "The X-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance.",
           "type": "number",
@@ -43,2 +48,3 @@ "default": "32"
           "attribute": "resolutionY",
+          "description": "The Y-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance.",
           "type": "number",
@@ -45,0 +51,0 @@ "default": "32"

dist/blurhash-img.d.ts

 import { LitElement } from 'lit-element';
 export declare class BlurhashImg extends LitElement {
     static styles: import("lit-element").CSSResult;
+    /**
+     * The encoded blurhash, as a string.
+     */
     hash: string | undefined;
+    /**
+     * The X-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance.
+     */
     resolutionX: number;
+    /**
+     * The Y-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance.
+     */
     resolutionY: number;
     canvas: HTMLCanvasElement | undefined;
-    __updateCanvasImage(): Promise<void>;
+    __updateCanvasImage(): void;
     firstUpdated(): void;
@@ -10,0 +19,0 @@ updated(changedProperties: Map<string, string>): void;

dist/blurhash-img.js

@@ -8,10 +8,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { html, css, customElement, LitElement, property, query, } from 'lit-element';
-import { decode } from 'blurhash';
+import { decode } from '@fpapado/blurhash';
 let BlurhashImg = class BlurhashImg extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * The X-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance.
+         */
         this.resolutionX = 32;
+        /**
+         * The Y-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance.
+         */
         this.resolutionY = 32;
     }
-    async __updateCanvasImage() {
+    __updateCanvasImage() {
         if (this.hash) {
@@ -22,4 +28,5 @@ try {
                 const imageData = new ImageData(pixels, this.resolutionX, this.resolutionY);
-                if (this.canvas) {
-                    const ctx = this.canvas.getContext('2d');
+                const canvasEl = this.canvas;
+                if (canvasEl) {
+                    const ctx = canvasEl.getContext('2d');
                     if (ctx) {
@@ -39,3 +46,5 @@ ctx.putImageData(imageData, 0, 0);
     updated(changedProperties) {
-        if (changedProperties.get('hash')) {
+        if (changedProperties.get('hash') ||
+            changedProperties.get('resolutionX') ||
+            changedProperties.get('resolutionY')) {
             this.__updateCanvasImage();
@@ -42,0 +51,0 @@ }

package.json

 {
   "name": "blurhash-img",
-  "version": "0.0.1",
-  "description": "A simple web component",
+  "version": "0.1.0",
+  "description": "A Web Component for decoding blurhash strings onto a canvas.",
   "main": "dist/blurhash-img.js",
@@ -9,2 +9,3 @@ "module": "dist/blurhash-img.js",
   "scripts": {
+    "prePublishOnly": "npm run build",
     "build": "tsc",
@@ -37,6 +38,13 @@ "build:watch": "tsc --watch",
   ],
-  "author": "Fotis Papadogeorgopoulos ([e-mail])",
+  "author": "fpapado",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/fpapado/blurhash-img"
+  },
+  "bugs": {
+    "url": "git://github.com/fpapado/blurhash-img/issues"
+  },
   "license": "MIT",
   "dependencies": {
-    "blurhash": "^1.1.3",
+    "@fpapado/blurhash": "^1.1.4",
     "lit-element": "^2.3.1"
@@ -43,0 +51,0 @@ },

README.md

 # blurhash-img
 
-A Web Component for decoding [blurhash hashes](https://github.com/woltapp/blurhash) onto a canvas.
+A Web Component for decoding [blurhash strings](https://github.com/woltapp/blurhash) onto a canvas.
 
@@ -34,10 +34,39 @@ ## Usage
 
+### Registering with HTML script tags
+
+In an HTML page, add the following script tag:
+
+```html
+<script type="module">
+import './path-to-blurhash-img.js';
+</script>
+```
+
+Or:
+
+```html
+<script type="module" src="./path-to-blurhash-img.js"></script>
+```
+
+For both of these cases, you need the full, qualified path to the script.
+This might be a pain to do manually, in which case consider registering with JavaScript, and/or using a bundler, like webpack or Rollup.
+
 ### Registering with JavaScript
 
-You can register the component via the customElements.define method.
+You can include this element in your JavaScript bundle, and it will register itself. Import the package directly, for `.define` to work.
 
+In a JavaScript module:
+
 ```js
+import 'blurhash-img';
+```
+
+Or:
+
+You can register the component manually via the customElements.define method. Due to how the custom elements registry works at the moment, you will need to create a subclass around the component.
+
+```js
 import {BlurhashImg} from 'blurhash-img';
 
-window.customElements.define('blurhash-img', BlurhashImg);
+window.customElements.define('blurhash-img', class extends BlurhashImg{});
 ```
@@ -47,4 +76,6 @@
 
-`<blurhash-img>` can be used with declarative rendering libraries like Angular, React, Vue, and lit-html
+`<blurhash-img>` can be used with declarative rendering libraries like Angular, React, Vue, and lit-html.
 
+Example for lit-html:
+
 ```js
@@ -60,2 +91,22 @@ import {html, render} from 'lit-html';
 
+### CDN
+
+npm CDNs like [unpkg.com]() can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.
+
+Using a CDN might help you get started!
+
+For this element to work from unpkg.com specifically, you need to include the `?module` query parameter, which tells unpkg.com to rewrite "bare" module specificers to full URLs.
+
+#### HTML
+
+```html
+<script type="module" src="https://unpkg.com/blurhash-img?module"></script>
+```
+
+#### JavaScript
+
+```html
+import {BlurhashImg} from 'https://unpkg.com/blurhash-img?module';
+```
+
 ## Development Setup
@@ -62,0 +113,0 @@

rollup.config.js

@@ -22,3 +22,3 @@ /**
 export default {
-  input: 'blurhash-img.js',
+  input: 'dist/blurhash-img.js',
   output: {
@@ -25,0 +25,0 @@ file: 'blurhash-img.bundled.js',

src/blurhash-img.ts

@@ -9,3 +9,3 @@ import {
 } from 'lit-element';
-import {decode} from 'blurhash';
+import {decode} from '@fpapado/blurhash';
 
@@ -40,4 +40,15 @@ @customElement('blurhash-img')
 
+  /**
+   * The encoded blurhash, as a string.
+   */
   @property({type: String}) hash: string | undefined;
+
+  /**
+   * The X-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance.
+   */
   @property({type: Number}) resolutionX: number = 32;
+
+  /**
+   * The Y-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance.
+   */
   @property({type: Number}) resolutionY: number = 32;
@@ -47,3 +58,3 @@
 
-  async __updateCanvasImage() {
+  __updateCanvasImage() {
     if (this.hash) {
@@ -60,4 +71,5 @@ try {
 
-        if (this.canvas) {
-          const ctx = this.canvas.getContext('2d');
+        const canvasEl = this.canvas;
+        if (canvasEl) {
+          const ctx = canvasEl.getContext('2d');
           if (ctx) {
@@ -78,3 +90,7 @@ ctx.putImageData(imageData, 0, 0);
   updated(changedProperties: Map<string, string>) {
-    if (changedProperties.get('hash')) {
+    if (
+      changedProperties.get('hash') ||
+      changedProperties.get('resolutionX') ||
+      changedProperties.get('resolutionY')
+    ) {
       this.__updateCanvasImage();
@@ -81,0 +97,0 @@ }

src/test/blurhash-img_test.ts

@@ -13,24 +13,16 @@ import {BlurhashImg} from '../blurhash-img';
   test('renders with default values', async () => {
-    const el = await fixture(html`<blurhash-img></blurhash-img>`);
-    assert.shadowDom.equal(
-      el,
-      `
-      <h1>Hello, World!</h1>
-      <button part="button">Click Count: 0</button>
-      <slot></slot>
-    `
+    const el = await fixture(
+      html`<blurhash-img hash="L?H..]S5Rjaz?wR+f5fkIVV@t7fQ"></blurhash-img>`
     );
-  });
-
-  test('renders with a set name', async () => {
-    const el = await fixture(html`<blurhash-img hash="Test"></blurhash-img>`);
     assert.shadowDom.equal(
       el,
-      `
-      <h1>Hello, Test!</h1>
-      <button part="button">Click Count: 0</button>
-      <slot></slot>
-    `
+      `<div class="wrapper">
+        <canvas
+          id="canvas"
+          width="32"
+          height="32"
+        ></canvas>
+      </div>`
     );
   });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24496

increased by8.77%

Lines of code

378

increased by1.34%

Number of low maintenance alerts

0

decreased by-100%

Number of lines in readme file

217

increased by30.72%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

12

decreased by-25%

Dependency changes

• + Added@fpapado/blurhash@^1.1.4

• + Added@fpapado/blurhash@1.1.4(transitive)

• - Removedblurhash@^1.1.3

• - Removedblurhash@1.1.5(transitive)