update 0.6.0

README.md

@@ -54,7 +54,7 @@ console.log(skinTone("🧑🏿‍🤝‍🧑🏿", "light")); // 🧑🏻‍🤝
 ### Browser
 
 ```js
-// https://unpkg.com/@qit.tools/skin-tone@0.5.3/dist/browser/latest.min.js
+// https://unpkg.com/@qit.tools/skin-tone@0.6.0/dist/browser/latest.min.js
 
 document.addEventListener("DOMContentLoaded", () => {
     console.log(skinTone("🧑🏻‍🤝‍🧑🏻", "dark"));

dist/esnext/index.d.ts

@@ -5,7 +5,7 @@ export type SkinTone = '' | 'none' | 'light' | 'mediumLight' | 'medium' | 'mediu
  *
  * 🪄 Qit.tools
  * @name @qit.tools/skin-tone
- * @version 0.5.3
+ * @version 0.6.0
  * @license MIT
  * @copyright Copyright (c) 2024 Qit.tools.
  * @see https://github.com/Qit-tools/skin-tone
@@ -15,7 +15,7 @@ export type SkinTone = '' | 'none' | 'light' | 'mediumLight' | 'medium' | 'mediu
  * RGI Emoji Modifier Sequence.
  *
  * @param {string} emoji - The original emoji string.
- * @param {SkinTone} tone - The skin tone to apply. If empty, returns the original emoji.
+ * @param {SkinTone} [tone] - The skin tone to apply. If undefined, returns the original emoji.
  * @returns {string} The emoji string with skin tones applied where applicable.
  */
 export default function skinTone(emoji: string, tone?: SkinTone): string;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qit.tools/skin-tone",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Change emoji skin tones effortlessly. 🧛🧛🏻🧛🏼🧛🏽🧛🏾🧛🏿",
   "types": "./dist/esnext/index.d.ts",
   "exports": {

src/index.ts

@@ -16,14 +16,12 @@ export type SkinTone = '' | 'none' | 'light' | 'mediumLight' | 'medium' | 'mediu
  * RGI Emoji Modifier Sequence.
  *
  * @param {string} emoji - The original emoji string.
- * @param {SkinTone} tone - The skin tone to apply. If empty, returns the original emoji.
+ * @param {SkinTone} [tone] - The skin tone to apply. If undefined, returns the original emoji.
  * @returns {string} The emoji string with skin tones applied where applicable.
  */
 export default function skinTone(emoji: string, tone?: SkinTone): string {
-  if (!tone) {
-    return emoji;
-  }
-  const skinTonMap = {
+  const skinToneMap: Record<SkinTone, string> = {
+    '': '',
     none: '',
     light: '\u{1F3FB}',
     mediumLight: '\u{1F3FC}',
@@ -32,19 +30,26 @@ export default function skinTone(emoji: string, tone?: SkinTone): string {
     dark: '\u{1F3FF}',
   };
 
-  let zwj = '\u200D';
-
-  // Hand Shake 🧑‍🤝‍🧑
-  if (emoji.includes('\u200d\ud83e\udd1d\u200d')) {
-    zwj = '\u200d\ud83e\udd1d\u200d';
+  // If no tone or invalid tone is provided, return the original emoji
+  if (!tone || !(tone in skinToneMap)) {
+    return emoji;
   }
 
+  const zwj = emoji.includes('\u200D\ud83E\udd1D\u200D') ? '\u200D\ud83E\udd1D\u200D' : '\u200D';
+
   const parts = emoji.split(zwj);
   const modifiedParts = parts.map((part) => {
-    const basePart = part.replace(/\p{Emoji_Modifier}/gu, '');
+    // Remove existing skin tone modifiers
+    const basePart = part.replace(/[\u{1F3FB}-\u{1F3FF}]/gu, '');
+
+    // If tone is 'none', return the base part without modifiers
+    if (tone === 'none') {
+      return basePart;
+    }
 
+    // Check if the base part is an Emoji Modifier Base
     if (/\p{Emoji_Modifier_Base}/u.test(basePart)) {
-      return basePart.replace(/(\p{Extended_Pictographic}+)(\uFE0F?)/u, `$1${skinTonMap[tone]}`);
+      return basePart + skinToneMap[tone];
     }
     return part;
   });

tests/skin-tone.test.ts

@@ -34,31 +34,31 @@ describe('skinTone tests for various emojis', () => {
   });
 
   emojis.forEach((item) => {
-    it(`Should apply light skin tone to ${item.light}`, () => {
+    it(`Should apply light skin tone: ${item.emoji} => ${item.light}`, () => {
       expect(skinTone(item.emoji, 'light')).toBe(item.light);
     });
   });
 
   emojis.forEach((item) => {
-    it(`Should apply medium light skin tone to ${item.mediumLight}`, () => {
+    it(`Should apply medium light skin tone: ${item.emoji} => ${item.mediumLight}`, () => {
       expect(skinTone(item.emoji, 'mediumLight')).toBe(item.mediumLight);
     });
   });
 
   emojis.forEach((item) => {
-    it(`Should apply medium light skin tone to ${item.medium}`, () => {
+    it(`Should apply medium light skin tone: ${item.emoji} => ${item.medium}`, () => {
       expect(skinTone(item.emoji, 'medium')).toBe(item.medium);
     });
   });
 
   emojis.forEach((item) => {
-    it(`Should apply medium dark skin tone to ${item.mediumDark}`, () => {
+    it(`Should apply medium dark skin tone: ${item.emoji} => ${item.mediumDark}`, () => {
       expect(skinTone(item.emoji, 'mediumDark')).toBe(item.mediumDark);
     });
   });
 
   emojis.forEach((item) => {
-    it(`Should apply dark skin tone to ${item.dark}`, () => {
+    it(`Should apply dark skin tone: ${item.emoji} => ${item.dark}`, () => {
       expect(skinTone(item.emoji, 'dark')).toBe(item.dark);
     });
   });