chore: fix tachometer package swapping (#439)

bin/setupTachometerConfigs.js

@@ -34,14 +34,13 @@ for (const benchmark of benchmarks) {
             packageVersions: {
               label: 'tip-of-tree',
               dependencies: {
-                'emoji-picker-element': {
+                '@nolanlawson/emoji-picker-element-for-tachometer': {
                   kind: 'git',
                   repo: 'https://github.com/nolanlawson/emoji-picker-element.git',
                   ref: 'master',
                   setupCommands: [
                     // 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'
+                    'if [ -f yarn.lock ]; then yarn --frozen-lockfile; else pnpm i --frozen-lockfile; fi'
                   ]
                 }
               }

package.json

@@ -70,7 +70,14 @@
     "url": "https://github.com/nolanlawson/emoji-picker-element/issues"
   },
   "homepage": "https://github.com/nolanlawson/emoji-picker-element#readme",
+  "//": {
+    "@nolanlawson/emoji-picker-element-for-tachometer": [
+      "Placeholder package for Tachometer to swap correctly, see https://github.com/nolanlawson/emoji-picker-element/pull/439/",
+      "Note the @nolanlawson scope to avoid any accidental dependency confusion vulnerability"
+    ]
+  },
   "devDependencies": {
+    "@nolanlawson/emoji-picker-element-for-tachometer": "file:.",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-inject": "^5.0.5",
     "@rollup/plugin-node-resolve": "^15.2.3",

test/benchmark/benchmark.js

@@ -1,11 +1,3 @@
-import { waitForPickerInitialLoad } from './utils.js'
-
-function instrumentPickerLoading () {
-  waitForPickerInitialLoad().then(entry => {
-    performance.measure('benchmark-total', { start: entry.startTime, duration: entry.duration })
-  })
-}
-
 function useFakeEtag () {
   // Fake an eTag on the headers for the emoji-picker data so that we actually reuse the cache.
   // Tachometer doesn't serve an eTag by default
@@ -22,10 +14,8 @@ const params = new URLSearchParams(window.location.search)
 const benchmark = params.get('benchmark') || 'first-load'
 
 if (benchmark === 'first-load') {
-  instrumentPickerLoading()
   await import('./first-load.benchmark.js')
 } else if (benchmark === 'second-load') {
-  instrumentPickerLoading()
   useFakeEtag()
   await import('./second-load.benchmark.js')
 } else if (benchmark === 'database-interactions') {

test/benchmark/change-tab.benchmark.js

@@ -1,10 +1,10 @@
-import Picker from '../../picker.js'
-import { waitForElementWithId, postRaf, waitForPickerInitialLoad, dataSource } from './utils.js'
+import { Picker } from '@nolanlawson/emoji-picker-element-for-tachometer'
+import { waitForElementWithId, postRaf, dataSource } from './utils.js'
 
 const picker = new Picker({ dataSource })
 document.body.appendChild(picker)
 
-await waitForPickerInitialLoad()
+await waitForElementWithId(picker.shadowRoot, 'emo-🥰')
 await postRaf()
 const peopleTabButton = picker.shadowRoot.querySelector('[role="tab"][aria-label="People and body"]')
 

test/benchmark/database-interactions.benchmark.js

@@ -1,4 +1,4 @@
-import Database from '../../database.js'
+import { Database } from '@nolanlawson/emoji-picker-element-for-tachometer'
 import { dataSource } from './utils.js'
 
 performance.mark('start-db-interactions')

test/benchmark/first-load.benchmark.js

@@ -1,4 +1,9 @@
-import Picker from '../../picker.js'
-import { dataSource } from './utils.js'
+import { Picker } from '@nolanlawson/emoji-picker-element-for-tachometer'
+import { dataSource, postRaf, waitForElementWithId } from './utils.js'
 
-document.body.appendChild(new Picker({ dataSource }))
+performance.mark('benchmark-start')
+const picker = new Picker({ dataSource })
+document.body.appendChild(picker)
+await waitForElementWithId(picker.shadowRoot, 'emo-🥰')
+await postRaf()
+performance.measure('benchmark-total', 'benchmark-start')

test/benchmark/search.benchmark.js

@@ -1,10 +1,10 @@
-import Picker from '../../picker.js'
-import { waitForElementWithId, postRaf, waitForPickerInitialLoad, dataSource } from './utils.js'
+import { Picker } from '@nolanlawson/emoji-picker-element-for-tachometer'
+import { waitForElementWithId, postRaf, dataSource } from './utils.js'
 
 const picker = new Picker({ dataSource })
 document.body.appendChild(picker)
 
-await waitForPickerInitialLoad()
+await waitForElementWithId(picker.shadowRoot, 'emo-🥰')
 await postRaf()
 const searchBox = picker.shadowRoot.querySelector('[role="combobox"]')
 

test/benchmark/second-load.benchmark.js

@@ -1,12 +1,17 @@
-import Database from '../../database.js'
-import { dataSource } from './utils.js'
+import { Database } from '@nolanlawson/emoji-picker-element-for-tachometer'
+import { dataSource, postRaf, waitForElementWithId } from './utils.js'
 
 // populate IndexedDB so the Picker is just reading from the local store
 const db = new Database({ dataSource })
 await db.ready()
 await db.close()
 
 // lazy-load the picker so that its logic to determine emoji support runs during the perf measure
-const { default: Picker } = await import('../../picker.js')
+const { Picker } = await import('@nolanlawson/emoji-picker-element-for-tachometer')
 
-document.body.appendChild(new Picker({ dataSource }))
+performance.mark('benchmark-start')
+const picker = new Picker({ dataSource })
+document.body.appendChild(picker)
+await waitForElementWithId(picker.shadowRoot, 'emo-🥰')
+await postRaf()
+performance.measure('benchmark-total', 'benchmark-start')

test/benchmark/utils.js

@@ -7,27 +7,4 @@ export const waitForElementWithId = async (root, id) => {
   }
 }
 
-export const waitForPickerInitialLoad = () => {
-  return new Promise((resolve, reject) => {
-    const observer = new PerformanceObserver(entries => {
-      for (const entry of entries.getEntries()) {
-        if (entry.name === 'initialLoad') {
-          // test to make sure the picker loaded with no errors
-          const hasErrors = document.querySelector('emoji-picker') && document.querySelector('emoji-picker')
-            .shadowRoot.querySelector('.message:not(.gone)')
-          if (hasErrors) {
-            const err = new Error('picker is showing an error message')
-            console.error(err)
-            reject(err)
-          } else {
-            resolve(entry)
-          }
-          observer.disconnect()
-        }
-      }
-    })
-    observer.observe({ entryTypes: ['measure'] })
-  })
-}
-
 export const dataSource = '/node_modules/emoji-picker-element-data/en/emojibase/data.json'