chore: remove focus-visible polyfill from local dev server (#420)

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.2.4 to 5.2.8.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.2.8/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/benchmarks.yml

@@ -15,32 +15,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-
+      - run: corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version: '20'
+          cache: 'pnpm'
+      - run: pnpm i --frozen-lockfile
 
-      # via https://github.com/actions/cache/blob/0638051/examples.md#node---yarn
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: yarn install
-        if: steps.cache.outputs.cache-hit != 'true'
+      - name: install chromedriver
         run: |
-          yarn --immutable --ignore-scripts
           # install the chromedriver corresponding to whatever version of chrome is installed
-          yarn add --ignore-scripts chromedriver@^$(google-chrome --version | awk '{print $3}' | cut -d. -f1)
-          PERF=1 yarn build:rollup
-          yarn benchmark:runtime:setup
+          pnpm i chromedriver@^$(google-chrome --version | awk '{print $3}' | cut -d. -f1)
+          PERF=1 pnpm build:rollup
+          pnpm benchmark:runtime:setup
 
       # first-load
       - name: Benchmark first-load

.github/workflows/bundlesize.yml

@@ -9,23 +9,12 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - run: corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version: '20'
-
-      # via https://github.com/actions/cache/blob/0638051/examples.md#node---yarn
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
+          cache: 'pnpm'
+      - run: pnpm i --frozen-lockfile
       - uses: preactjs/compressed-size-action@v2
         with:
           build-script: benchmark:bundle

.github/workflows/tests.yml

@@ -9,13 +9,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - run: corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'yarn'
+          cache: 'pnpm'
+      - run: pnpm i --frozen-lockfile
       - run: sudo apt-get install fonts-noto-color-emoji
-      - run: yarn --frozen-lockfile
-      - run: yarn lint
-      - run: yarn benchmark:bundlesize
-      - run: yarn cover
-      - run: yarn test:leak
+      - run: pnpm lint
+      - run: pnpm benchmark:bundlesize
+      - run: pnpm cover
+      - run: npx puppeteer browsers install chrome
+      - run: pnpm test:leak

.gitignore

@@ -108,13 +108,6 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
-# yarn v2
-
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.pnp.*
-
 /database.js
 /database.js.map
 /picker.js

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.21.3](https://github.com/nolanlawson/emoji-picker-element/compare/v1.21.2...v1.21.3) (2024-04-09)
+
+
+### Bug Fixes
+
+* improved French translations ([#417](https://github.com/nolanlawson/emoji-picker-element/issues/417)) ([e528676](https://github.com/nolanlawson/emoji-picker-element/commit/e52867681ab07f9eca575e7899f453b9fcd2070a))
+
+
+
 ## [1.21.2](https://github.com/nolanlawson/emoji-picker-element/compare/v1.21.1...v1.21.2) (2024-03-22)
 
 

CONTRIBUTING.md

@@ -2,58 +2,57 @@
 
 ## Basic dev workflow
 
-
 Install
 
-    yarn
+    pnpm i
 
 Run a local dev server on `localhost:3000`:
 
-    yarn dev
+    pnpm dev
     
 ## Testing
 
 Lint:
 
-    yarn lint
+    pnpm lint
 
 Fix most lint issues:
 
-    yarn lint:fix
+    pnpm lint:fix
 
 Run the tests:
 
-    yarn test
+    pnpm test
 
 Check code coverage:
 
-    yarn cover
+    pnpm cover
 
 ## Other
 
 Benchmark runtime performance:
 
-    yarn benchmark:runtime
+    pnpm benchmark:runtime
 
 Benchmark memory usage:
 
-    yarn benchmark:memory
+    pnpm benchmark:memory
 
 Benchmark bundle size:
 
-    yarn benchmark:bundlesize
+    pnpm benchmark:bundlesize
 
 Benchmark storage size:
 
-    yarn benchmark:storage
+    pnpm benchmark:storage
 
 Run memory leak test:
 
-    yarn test:leak
+    pnpm test:leak
 
 Build the GitHub Pages docs site:
 
-    yarn docs
+    pnpm docs
 
 ## FAQs
 

README.md

@@ -273,7 +273,7 @@ Here is a full list of options:
 
 ### Focus outline
 
-For accessibility reasons, `emoji-picker-element` displays a prominent focus ring. If you want to hide the focus ring for non-keyboard users (e.g. mouse and touch only), then use the [focus-visible](https://github.com/WICG/focus-visible) polyfill, e.g.:
+For accessibility reasons, `emoji-picker-element` displays a prominent focus ring for keyboard users. This uses [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) under the hood. To properly support [browsers that do not support `:focus-visible`](https://caniuse.com/css-focus-visible), you can use the [focus-visible](https://github.com/WICG/focus-visible) polyfill, e.g.:
 
 ```js
 import 'focus-visible';

bin/setupTachometerConfigs.js

@@ -38,8 +38,9 @@ for (const benchmark of benchmarks) {
                   repo: 'https://github.com/nolanlawson/emoji-picker-element.git',
                   ref: 'master',
                   setupCommands: [
-                    'yarn --immutable --ignore-scripts',
-                    'PERF=1 yarn build:rollup'
+                    // we're comparing against historical branches, so support yarn as well as pnpm since we switched
+                    'if [ -f yarn.lock ]; then yarn --frozen-lockfile; else pnpm i --frozen-lockfile; fi',
+                    'PERF=1 npm run build:rollup'
                   ]
                 }
               }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "emoji-picker-element",
-  "version": "1.21.2",
+  "version": "1.21.3",
   "description": "Lightweight emoji picker distributed as a web component",
   "main": "index.js",
   "module": "index.js",
@@ -76,6 +76,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-strip": "^3.0.4",
+    "@rollup/plugin-terser": "^0.4.4",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/user-event": "^14.5.2",
@@ -94,7 +95,6 @@
     "fast-glob": "^3.3.2",
     "fetch-mock": "^9.11.0",
     "flat-color-icons": "^1.1.0",
-    "focus-visible": "^5.2.0",
     "get-folder-size": "^4.0.0",
     "husky": "^9.0.11",
     "jsdom": "^24.0.0",
@@ -107,11 +107,11 @@
     "npm-run-all": "^4.1.5",
     "playwright": "^1.42.1",
     "pretty-bytes": "^6.1.1",
+    "postcss": "^8.4.38",
     "puppeteer": "^22.6.0",
     "recursive-readdir": "^2.2.3",
     "rollup": "^4.13.0",
     "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.72.0",
     "standard": "^17.1.0",
     "stylelint": "^16.2.1",
@@ -185,8 +185,5 @@
     "*.js": "standard --fix",
     "*.(css|scss)": "stylelint --fix '**/*.scss'"
   },
-  "volta": {
-    "node": "20.11.1",
-    "yarn": "1.22.22"
-  }
+  "packageManager": "pnpm@8.15.5+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589"
 }

src/database/idbInterface.js

@@ -29,7 +29,7 @@ async function doFullDatabaseScanForSingleResult (db, predicate) {
   //
   // Mini-benchmark for determining the best batch size:
   //
-  // PERF=1 yarn build:rollup && yarn test:adhoc
+  // PERF=1 pnpm build:rollup && pnpm test:adhoc
   //
   // (async () => {
   //   performance.mark('start')

src/picker/i18n/fr.js

@@ -1,18 +1,18 @@
 export default {
   categoriesLabel: 'Catégories',
-  emojiUnsupportedMessage: 'Votre navigateur ne soutient pas les emojis en couleur.',
+  emojiUnsupportedMessage: 'Votre navigateur ne supporte pas les emojis en couleur.',
   favoritesLabel: 'Favoris',
   loadingMessage: 'Chargement en cours…',
   networkErrorMessage: 'Impossible de charger les emojis.',
   regionLabel: 'Choisir un emoji',
-  searchDescription: 'Quand les résultats sont disponisbles, appuyez la fleche vers le haut ou le bas et la touche entrée pour choisir.',
+  searchDescription: 'Lorsque les résultats sont affichés, utilisez les flèches haut/bas pour naviguer et la touche entrée pour sélectionner.',
   searchLabel: 'Rechercher',
   searchResultsLabel: 'Résultats',
-  skinToneDescription: 'Quand disponible, appuyez la fleche vers le haut ou le bas et la touch entrée pour choisir.',
+  skinToneDescription: 'Quand disponible, utilisez les flèches haut/bas pour naviguer et la touche entrée pour sélectionner.',
   skinToneLabel: 'Choisir une couleur de peau (actuellement {skinTone})',
   skinTonesLabel: 'Couleurs de peau',
   skinTones: [
-    'Défaut',
+    'Par défaut',
     'Clair',
     'Moyennement clair',
     'Moyen',
@@ -20,15 +20,15 @@ export default {
     'Sombre'
   ],
   categories: {
-    custom: 'Customisé',
-    'smileys-emotion': 'Les smileyes et les émoticônes',
-    'people-body': 'Les gens et le corps',
-    'animals-nature': 'Les animaux et la nature',
-    'food-drink': 'La nourriture et les boissons',
-    'travel-places': 'Les voyages et les endroits',
-    activities: 'Les activités',
-    objects: 'Les objets',
-    symbols: 'Les symbols',
-    flags: 'Les drapeaux'
+    custom: 'Personnalisé',
+    'smileys-emotion': 'Émoticônes',
+    'people-body': 'Corps et métiers',
+    'animals-nature': 'Animaux et nature',
+    'food-drink': 'Nourriture et boissons',
+    'travel-places': 'Voyages et lieux',
+    activities: 'Activités',
+    objects: 'Objets',
+    symbols: 'Symboles',
+    flags: 'Drapeaux'
   }
 }

src/picker/utils/calculateTextWidth.js

@@ -1,7 +1,13 @@
 // get the width of the text inside of a DOM node, via https://stackoverflow.com/a/59525891/680742
 export function calculateTextWidth (node) {
+  // skip running this in jest/vitest because we don't need to check for emoji support in that environment
   /* istanbul ignore else */
   if (import.meta.env.MODE === 'test') {
+    // sanity check to make sure the node is defined properly
+    /* istanbul ignore if */
+    if (!node) {
+      throw new Error('node should not be undefined/null')
+    }
     return 1
   } else {
     const range = document.createRange()

test/adhoc/index.html

@@ -47,7 +47,6 @@
 </head>
 <body>
 <button class="delete">Delete database</button>
-<script src="/node_modules/focus-visible/dist/focus-visible.js"></script>
 <script type="module">
   import { Picker, Database } from '/index.js'
   (async () => {
@@ -89,7 +88,6 @@
     }
     const picker = new Picker(opts)
     picker.addEventListener('emoji-click', e => console.log(e))
-    applyFocusVisiblePolyfill(picker.shadowRoot)
     document.body.appendChild(picker)
   })()
 </script>

test/bundlesize/rollup.config.js

@@ -1,4 +1,4 @@
-import { terser } from 'rollup-plugin-terser'
+import terser from '@rollup/plugin-terser'
 
 export default {
   input: './index.js',