emoji-picker-element - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

CHANGELOG.md

@@ -0,1 +1,17 @@
+## [1.2.2](https://github.com/nolanlawson/emoji-picker-element/compare/v1.2.1...v1.2.2) (2020-11-02)
+
+
+### Bug Fixes
+
+* remove unnecessary aria-hidden ([#66](https://github.com/nolanlawson/emoji-picker-element/issues/66)) ([5038363](https://github.com/nolanlawson/emoji-picker-element/commit/50383632ce9dd3434812e6db2fa16d7774a9f6f3))
+* remove unused CSS rule ([#56](https://github.com/nolanlawson/emoji-picker-element/issues/56)) ([251d29b](https://github.com/nolanlawson/emoji-picker-element/commit/251d29b3097461252f1b36de49037451501f7de2))
+* use consistent HTML for custom emoji ([#64](https://github.com/nolanlawson/emoji-picker-element/issues/64)) ([60f8c04](https://github.com/nolanlawson/emoji-picker-element/commit/60f8c04e4c8dd82a1bebc997eb972651ac5a101a))
+
+
+### Performance Improvements
+
+* use lazy image loading ([#65](https://github.com/nolanlawson/emoji-picker-element/issues/65)) ([73d7639](https://github.com/nolanlawson/emoji-picker-element/commit/73d76399f77c86bb9f43e67925c0fde8d5935861))
+
+
+
 ## [1.2.1](https://github.com/nolanlawson/emoji-picker-element/compare/v1.2.0...v1.2.1) (2020-09-24)
@@ -2,0 +18,0 @@

database.js

@@ -83,3 +83,6 @@ function assertNonEmptyString (str) {
 function handleOpenOrDeleteReq (resolve, reject, req) {
+  // These things are almost impossible to test with fakeIndexedDB sadly
+  /* istanbul ignore next */
   req.onerror = () => reject(req.error);
+  /* istanbul ignore next */
   req.onblocked = () => reject(new Error('IDB blocked'));
@@ -94,6 +97,9 @@ req.onsuccess = () => resolve(req.result);
     req.onupgradeneeded = e => {
-      const db = req.result;
-
+      // Technically there is only one version, so we don't need this `if` check
+      // But if an old version of the JS is in another browser tab
+      // and it gets upgraded in the future and we have a new DB version, well...
+      // better safe than sorry.
+      /* istanbul ignore else */
       if (e.oldVersion < DB_VERSION_INITIAL) {
-        initialMigration(db);
+        initialMigration(req.result);
       }
@@ -106,2 +112,4 @@ };
   // fire "close" events, it will auto-GC.
+  // Unfortunately cannot test in fakeIndexedDB: https://github.com/dumbmatter/fakeIndexedDB/issues/50
+  /* istanbul ignore next */
   db.onclose = () => closeDatabase(dbName);
@@ -130,2 +138,3 @@ return db
     tx.oncomplete = () => resolve(res);
+    /* istanbul ignore next */
     tx.onerror = () => reject(tx.error);
@@ -142,2 +151,3 @@ })
     const listeners = onCloseListeners[dbName];
+    /* istanbul ignore else */
     if (listeners) {
@@ -144,0 +154,0 @@ for (const listener of listeners) {

package.json

 {
   "name": "emoji-picker-element",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Lightweight emoji picker distributed as a web component",
@@ -40,8 +40,6 @@ "main": "index.js",
     "lint:fix": "standard --fix && stylelint --fix '**/*.scss'",
-    "test": "jest --no-cache",
+    "test": "jest",
     "test:adhoc": "node ./test/adhoc/server.js",
-    "cover": "jest --no-cache --coverage",
-    "docs": "run-s build:rollup benchmark:bundle docs:js docs:emoji",
-    "docs:js": "cp bundle.js node_modules/focus-visible/dist/focus-visible.js ./docs",
-    "docs:emoji": "node bin/processCustomEmoji.js",
+    "cover": "jest --coverage",
+    "docs": "node bin/processCustomEmoji.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
@@ -71,11 +69,11 @@ "version": "run-s changelog docs && git add CHANGELOG.md docs"
   "devDependencies": {
-    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-env": "^7.12.1",
     "@peculiar/webcrypto": "^1.1.3",
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.3.3",
-    "@testing-library/dom": "^7.22.2",
-    "@testing-library/jest-dom": "^5.11.3",
-    "@testing-library/user-event": "^12.1.1",
-    "babel-jest": "^26.3.0",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-replace": "^2.3.4",
+    "@testing-library/dom": "^7.26.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/user-event": "^12.1.8",
+    "babel-jest": "^26.5.2",
     "blob-util": "^2.0.2",
@@ -91,6 +89,6 @@ "bundlesize": "^0.18.0",
     "flat-color-icons": "^1.1.0",
-    "focus-visible": "^5.1.0",
-    "husky": "^4.2.5",
-    "jest": "^26.4.0",
-    "lint-staged": "^10.2.11",
+    "focus-visible": "^5.2.0",
+    "husky": "^4.3.0",
+    "jest": "^26.5.3",
+    "lint-staged": "^10.4.2",
     "lodash-es": "^4.17.15",
@@ -100,27 +98,27 @@ "markdown-table": "^2.0.0",
     "mkdirp": "^1.0.4",
-    "node-fetch": "^2.6.0",
+    "node-fetch": "^2.6.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^7.0.32",
-    "pretty-bytes": "^5.3.0",
-    "puppeteer": "^5.2.1",
+    "postcss": "^8.1.1",
+    "pretty-bytes": "^5.4.1",
+    "puppeteer": "^5.3.1",
     "recursive-readdir": "^2.2.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.26.3",
+    "rollup": "^2.32.0",
     "rollup-plugin-analyzer": "^3.3.0",
-    "rollup-plugin-svelte": "^5.2.3",
-    "rollup-plugin-svelte-hot": "^0.10.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "sass": "^1.26.10",
+    "rollup-plugin-svelte": "^6.1.0",
+    "rollup-plugin-svelte-hot": "^0.11.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.27.0",
     "standard": "^14.3.4",
     "string.prototype.replaceall": "^1.0.3",
-    "stylelint": "^13.6.1",
+    "stylelint": "^13.7.2",
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-scss": "^3.18.0",
-    "svelte": "^3.24.1",
+    "svelte": "^3.29.4",
     "svelte-jester": "nolanlawson/svelte-jester#auto-preprocess",
-    "svelte-preprocess": "^4.0.12",
+    "svelte-preprocess": "^4.5.2",
     "svgo": "^1.3.2",
-    "typedoc": "^0.18.0",
+    "typedoc": "^0.19.2",
     "typedoc-plugin-markdown": "^2.4.0",
-    "typescript": "^3.9.7"
+    "typescript": "^4.0.5"
   },
@@ -127,0 +125,0 @@ "standard": {

picker.d.ts

@@ -21,2 +21,4 @@ import { I18n, PickerConstructorOptions, EmojiPickerEventMap, CustomEmoji } from "./shared";
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof EmojiPickerEventMap>(type: K, listener: (this: TextTrackCue, ev: EmojiPickerEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
 }
@@ -23,0 +25,0 @@ declare global {

README.md

@@ -12,12 +12,10 @@ emoji-picker-element [![Build Status](https://travis-ci.com/nolanlawson/emoji-picker-element.svg?branch=master)](https://travis-ci.com/nolanlawson/emoji-picker-element)
 
-It's built on IndexedDB, so it consumes [far less memory](https://nolanlawson.com/2020/06/28/introducing-emoji-picker-element-a-memory-efficient-emoji-picker-for-the-web/)
-than other emoji pickers. It also uses [Svelte](https://svelte.dev), so it has a minimal runtime footprint.
+**Features:**
 
-Features:
-
-- Stores emoji data in IndexedDB
+- Supports [Emoji v13](https://emojipedia.org/emoji-13.0/) (depending on OS) and custom emoji
+- Uses IndexedDB, so it consumes [far less memory](https://nolanlawson.com/2020/06/28/introducing-emoji-picker-element-a-memory-efficient-emoji-picker-for-the-web/) than other emoji pickers
+- [Small bundle size](https://bundlephobia.com/result?p=emoji-picker-element) (41kB minified, ~14.4kB gzipped)
 - Renders native emoji only, no spritesheets
-- Accessible
-- Drop-in as a web component
-- Supports custom emoji
+- Accessible by default
+- Framework and bundler not required, just add a `<script>` tag and use it
 
@@ -29,4 +27,4 @@ **Table of contents:**
 - [emoji-picker-element](#emoji-picker-element-)
-  * [Install](#install)
   * [Usage](#usage)
+    + [Examples](#examples)
   * [Styling](#styling)
@@ -69,2 +67,3 @@ + [Size](#size)
     + [Offline-first](#offline-first)
+    + [Environments without IndexedDB](#environments-without-indexeddb)
   * [Design decisions](#design-decisions)
@@ -79,8 +78,8 @@ + [IndexedDB](#indexeddb)
 
-## Install
+## Usage
 
+Via npm:
+
     npm install emoji-picker-element
 
-## Usage
-
 ```js
@@ -90,7 +89,15 @@ import 'emoji-picker-element';
 
+Or as a `<script>` tag:
+
 ```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1/index.js"></script>
+```
+
+Then use the HTML:
+
+```html
 <emoji-picker></emoji-picker>
 ```
 
-Then listen for `emoji-click` events:
+And listen for `emoji-click` events:
 
@@ -121,2 +128,7 @@ ```js
 
+### Examples
+
+- [Demo](https://nolanlawson.github.io/emoji-picker-element)
+- [Button with tooltip/popover](https://bl.ocks.org/nolanlawson/781e7084e4c17acb921357489d51a5b0)
+
 ## Styling
@@ -689,4 +701,4 @@
 const picker = new Picker({
-  customEmoji: [/* ... */]
-})
+  customEmoji: [ /* ... */ ]
+});
 ```
@@ -698,4 +710,4 @@
 const database = new Database({
-  customEmoji: [/* ... */]
-})
+  customEmoji: [ /* ... */ ]
+});
 ```
@@ -706,4 +718,4 @@
 ```js
-picker.customEmoji = [/* ... */ ]
-database.customEmoji = [/* ... */ ]
+picker.customEmoji = [ /* ... */ ];
+database.customEmoji = [ /* ... */ ];
 ```
@@ -729,3 +741,3 @@
 ```js
-import Picker from 'emoji-picker-element/svelte'
+import Picker from 'emoji-picker-element/svelte';
 ```
@@ -787,2 +799,10 @@
 
+### Environments without IndexedDB
+
+`emoji-picker-element` has a hard requirement on [IndexedDB](https://developer.mozilla.org/en-US/docs/Glossary/IndexedDB), and will not work without it.
+
+For browsers that don't support IndexedDB, such as [Firefox in private browsing mode](https://bugzilla.mozilla.org/show_bug.cgi?id=1639542), you can polyfill it using [fake-indexeddb](https://github.com/dumbmatter/fakeIndexedDB). Here is [a working example](https://bl.ocks.org/nolanlawson/651e6fbe4356ff098f505e6cc5fb8cd8) and [more details](https://github.com/nolanlawson/emoji-picker-element/issues/9).
+
+For Node.js environments such as [Jest](https://jestjs.io/) or [JSDom](https://github.com/jsdom/jsdom), you can also use fake-indexeddb. A [working example](https://github.com/nolanlawson/emoji-picker-element/blob/d45b61b559b8cef6840b7036e3d1749a213c490e/config/jest.setup.js#L15-L18) can be found in the tests for this very project.
+
 ## Design decisions
@@ -802,5 +822,2 @@
 
-Note that because `emoji-picker-element` has a requirement on IndexedDB, it will not work
-in enviroments where IDB is unavailable, such as [Firefox private browsing](https://bugzilla.mozilla.org/show_bug.cgi?id=1639542). See [issue #9](https://github.com/nolanlawson/emoji-picker-element/issues/9) for more details.
-
 ### Native emoji
@@ -807,0 +824,0 @@

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

Improved metrics

Total package byte prevSize

481009

increased by0.84%

Lines of code

5440

increased by0.33%

Number of lines in readme file

838

increased by2.07%

No dependency changes