lazy-define: skip observe() work when nothing is pending

core.ts calls observe() for every shadow-root controller on connect. Once all
lazy definitions resolve (or when lazyDefine is never used), there is nothing to
watch for — the browser upgrades any already-defined element's instances
natively — so observe() can return immediately instead of creating/scanning/
disconnecting a MutationObserver per connect.

Author: mattcosta7

src/lazy-define.ts

@@ -112,6 +112,14 @@ export function lazyDefine(tagNameOrObj: string | Record<string, () => void>, si
 }
 
 export function observe(target: ElementLike): void {
+  // Nothing is waiting to be defined. Any tags that already resolved are now
+  // real custom elements, so the browser upgrades their instances natively and
+  // there is nothing for us to watch for. This keeps controllers that never use
+  // lazyDefine — and those connecting after every definition has resolved —
+  // completely free of observer cost (core.ts calls observe() for every
+  // shadow-root controller on connect).
+  if (!dynamicElements.size) return
+
   elementLoader ||= new MutationObserver(mutations => {
     if (!dynamicElements.size) return
     for (const mutation of mutations) {

test/lazy-define.ts

@@ -166,6 +166,20 @@ describe('lazyDefine', () => {
 
       expect(onSecond).to.be.callCount(1)
     })
+
+    it('does no work when observe() is called with no pending definitions', async () => {
+      // Drain any pending state from prior expectations.
+      await animationFrame()
+
+      const rafSpy = spy(window, 'requestAnimationFrame')
+      // core.ts calls observe() for every shadow-root controller on connect; it
+      // must be free when nothing is waiting to be lazily defined.
+      observe(document)
+      const scheduled = rafSpy.callCount
+      rafSpy.restore()
+
+      expect(scheduled).to.equal(0)
+    })
   })
 
   describe('race condition prevention', () => {
@@ -240,12 +254,13 @@ describe('lazyDefine', () => {
       const el = await fixture(html`<div></div>`)
       const shadowRoot = el.attachShadow({mode: 'open'})
 
+      lazyDefine('redundant-test-element', onDefine)
+
       // Observe the same shadow root multiple times
       observe(shadowRoot)
       observe(shadowRoot)
       observe(shadowRoot)
 
-      lazyDefine('redundant-test-element', onDefine)
       // eslint-disable-next-line github/unescaped-html-literal
       shadowRoot.innerHTML = '<redundant-test-element></redundant-test-element>'