emoji-picker-element - npm Package Compare versions

Comparing version 1.6.7 to 1.7.0

CHANGELOG.md

@@ -0,1 +1,16 @@
+# [1.7.0](https://github.com/nolanlawson/emoji-picker-element/compare/v1.6.7...v1.7.0) (2021-08-06)
+
+
+### Bug Fixes
+
+* actually publish i18n files ([#202](https://github.com/nolanlawson/emoji-picker-element/issues/202)) ([3fd2eae](https://github.com/nolanlawson/emoji-picker-element/commit/3fd2eaef2a3404c513175b57654efd86b607e934))
+
+
+### Features
+
+* add built-in translations ([#200](https://github.com/nolanlawson/emoji-picker-element/issues/200)) ([96d0d1d](https://github.com/nolanlawson/emoji-picker-element/commit/96d0d1d171aa95519be36e763a1708c9ff9e2431))
+* create pt_PT.js ([#188](https://github.com/nolanlawson/emoji-picker-element/issues/188)) ([69541a3](https://github.com/nolanlawson/emoji-picker-element/commit/69541a3957f2f03517066925138edf2cc9a2a3b0))
+
+
+
 ## [1.6.7](https://github.com/nolanlawson/emoji-picker-element/compare/v1.6.6...v1.6.7) (2021-08-02)
@@ -2,0 +17,0 @@

package.json

 {
   "name": "emoji-picker-element",
-  "version": "1.6.7",
+  "version": "1.7.0",
   "description": "Lightweight emoji picker distributed as a web component",
@@ -11,13 +11,14 @@ "main": "index.js",
   "files": [
-    "database.js*",
-    "index.js*",
-    "picker.js*",
-    "trimEmojiData.*",
-    "svelte.js*",
-    "*.d.ts",
-    "custom-elements.json"
+    "/database.js*",
+    "/index.js*",
+    "/picker.js*",
+    "/trimEmojiData.*",
+    "/svelte.js*",
+    "/*.d.ts",
+    "/custom-elements.json",
+    "/i18n/*"
   ],
   "scripts": {
     "prepare": "run-s build",
-    "build": "run-s build:rollup build:css-docs build:i18n-docs build:toc",
+    "build": "run-s build:rollup build:i18n build:css-docs build:i18n-docs build:toc",
     "build:rollup": "cross-env NODE_ENV=production rollup -c",
@@ -27,2 +28,3 @@ "build:css-docs": "node ./bin/generateCssDocs",
     "build:toc": "node ./bin/generateTOC",
+    "build:i18n": "node ./bin/buildI18n",
     "benchmark:runtime": "cross-env PERF=1 run-s build:rollup && ./bin/run-benchmark.sh",
@@ -29,0 +31,0 @@ "benchmark:bundlesize": "run-s build:rollup benchmark:bundle benchmark:run-bundlesize",

README.md

@@ -36,3 +36,7 @@ emoji-picker-element [![Build status](https://circleci.com/gh/nolanlawson/emoji-picker-element.svg?style=svg)](https://app.circleci.com/pipelines/gh/nolanlawson/emoji-picker-element)
     + [Picker](#picker)
-      - [i18n structure](#i18n-structure)
+      - [Events](#events)
+        * [`emoji-click`](#emoji-click)
+        * [`skin-tone-change`](#skin-tone-change)
+      - [Internationalization](#internationalization)
+        * [Built-in translations](#built-in-translations)
       - [Custom category order](#custom-category-order)
@@ -56,5 +60,2 @@ + [Database](#database)
         * [setPreferredSkinTone](#setpreferredskintone)
-    + [Events](#events)
-      - [`emoji-click`](#emoji-click)
-      - [`skin-tone-change`](#skin-tone-change)
     + [Custom emoji](#custom-emoji)
@@ -132,2 +133,3 @@ + [Tree-shaking](#tree-shaking)
 - [Button with tooltip/popover](https://bl.ocks.org/nolanlawson/781e7084e4c17acb921357489d51a5b0)
+- [In a React app](https://codepen.io/nolanlawson/pen/bGWmmrz)
 
@@ -292,6 +294,67 @@ ## Styling
 
-#### i18n structure
+#### Events
 
-Here is the default English `i18n` object (`"en"` locale):
+##### `emoji-click`
 
+The `emoji-click` event is fired when an emoji is selected by the user. Example format:
+
+```javascript
+{
+  emoji: {
+    annotation: 'thumbs up',
+    group: 1,
+    order: 280,
+    shortcodes: ['thumbsup', '+1', 'yes'],
+    tags: ['+1', 'hand', 'thumb', 'up'],
+    unicode: '👍️',
+    version: 0.6,
+    skins: [
+      { tone: 1, unicode: '👍🏻', version: 1 },
+      { tone: 2, unicode: '👍🏼', version: 1 },
+      { tone: 3, unicode: '👍🏽', version: 1 },
+      { tone: 4, unicode: '👍🏾', version: 1 },
+      { tone: 5, unicode: '👍🏿', version: 1 }
+    ]
+  },
+  skinTone: 4,
+  unicode: '👍🏾'
+}
+```
+
+And usage:
+
+```js
+picker.addEventListener('emoji-click', event => {
+  console.log(event.detail); // will log something like the above
+});
+```
+
+Note that `unicode` will represent whatever the emoji should look like
+with the given `skinTone`. If the `skinTone` is 0, or if the emoji has
+no skin tones, then no skin tone is applied to `unicode`.
+
+##### `skin-tone-change`
+
+This event is fired whenever the user selects a new skin tone. Example format:
+
+```js
+{
+  skinTone: 5
+}
+```
+
+And usage:
+
+```js
+picker.addEventListener('skin-tone-change', event => {
+  console.log(event.detail); // will log something like the above
+})
+```
+
+Note that skin tones are an integer from 0 (default) to 1 (light) through 5 (dark).
+
+#### Internationalization
+
+The `i18n` parameter specifies translations for the picker interface. Here is the default English `i18n` object:
+
 <!-- i18n options start -->
@@ -338,5 +401,33 @@
 
-Note that some of these strings are only visible to users of screen readers.
-But you should still support them if you internationalize your app!
+Note that some of these strings are only visible to users of screen readers. They are still important for accessibility!
 
+##### Built-in translations
+
+Community-provided translations for some languages [are available](https://github.com/nolanlawson/emoji-picker-element/tree/master/src/picker/i18n). You can use them like so:
+
+```js
+import fr from 'emoji-picker-element/i18n/fr';
+import de from 'emoji-picker-element/i18n/de';
+
+// French
+picker.i18n = fr;
+
+// German
+picker.i18n = de;
+```
+
+Note that translations for the interface (`i18n`) are not the same as translations for the emoji data (`dataSource` and `locale`). To support both, you should do something like:
+
+```js
+import fr from 'emoji-picker-element/i18n/fr';
+
+const picker = new Picker({ 
+  i18n: fr,
+  locale: 'fr',
+  dataSource: 'https://cdn.jsdelivr.net/npm/emoji-picker-element-data@^1/fr/emojibase/data.json',
+});
+```
+
+If a built-in translation for your target language is not available, you can also write your own translation and pass it in as `i18n`. Please feel free to contribute your translation [here](https://github.com/nolanlawson/emoji-picker-element/tree/master/src/picker/i18n).
+
 #### Custom category order
@@ -597,64 +688,2 @@
 
-
-### Events
-
-#### `emoji-click`
-
-The `emoji-click` event is fired when an emoji is selected by the user. Example format:
-
-```javascript
-{
-  emoji: {
-    annotation: 'thumbs up',
-    group: 1,
-    order: 280,
-    shortcodes: ['thumbsup', '+1', 'yes'],
-    tags: ['+1', 'hand', 'thumb', 'up'],
-    unicode: '👍️',
-    version: 0.6,
-    skins: [
-      { tone: 1, unicode: '👍🏻', version: 1 },
-      { tone: 2, unicode: '👍🏼', version: 1 },
-      { tone: 3, unicode: '👍🏽', version: 1 },
-      { tone: 4, unicode: '👍🏾', version: 1 },
-      { tone: 5, unicode: '👍🏿', version: 1 }
-    ]
-  },
-  skinTone: 4,
-  unicode: '👍🏾'
-}
-```
-
-And usage:
-
-```js
-picker.addEventListener('emoji-click', event => {
-  console.log(event.detail); // will log something like the above
-});
-```
-
-Note that `unicode` will represent whatever the emoji should look like
-with the given `skinTone`. If the `skinTone` is 0, or if the emoji has
-no skin tones, then no skin tone is applied to `unicode`.
-
-#### `skin-tone-change`
-
-This event is fired whenever the user selects a new skin tone. Example format:
-
-```js
-{
-  skinTone: 5
-}
-```
-
-And usage:
-
-```js
-picker.addEventListener('skin-tone-change', event => {
-  console.log(event.detail); // will log something like the above
-})
-```
-
-Note that skin tones are an integer from 0 (default) to 1 (light) through 5 (dark).
-
 ### Custom emoji
@@ -748,3 +777,3 @@
 
-If you'd like to host the emoji JSON yourself, you can do:
+If you'd like to host the emoji data (`dataSource`) yourself, you can do:
 
@@ -755,2 +784,10 @@ npm install emoji-picker-element-data@^1
 
+```js
+const picker = new Picker({
+  dataSource: '/path/to/my/webserver/data.json'
+});
+```
+
+See [`emoji-picker-element-data`](https://www.npmjs.com/package/emoji-picker-element-data) for details.
+
 ### Shortcodes
@@ -757,0 +794,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

531831

increased by1.42%

Number of package files

29

increased by38.1%

Lines of code

5875

increased by2.51%

Number of lines in readme file

897

increased by4.3%

No dependency changes