feat(pat inject): Dispatch a patterns-injected-delayed event 10ms after the injection has been done and pass the injected content with it. This allows to re-scan the injected content in cases where a pattern wasn't registered at injection time.

thet · thet · commit 00b66fee5487 · 2022-08-19T17:31:08.000+02:00
diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js
@@ -1089,7 +1089,7 @@ const inject = {
     },
 };
 
-$(document).on("patterns-injected.inject", (ev, cfg, trigger, injected) => {
+$(document).on("patterns-injected.inject", async (ev, cfg, trigger, injected) => {
     /* Listen for the patterns-injected event.
      *
      * Remove the "loading-class" classes from all injection targets and
@@ -1108,6 +1108,17 @@ $(document).on("patterns-injected.inject", (ev, cfg, trigger, injected) => {
     if (injected.nodeType !== TEXT_NODE && injected !== COMMENT_NODE) {
         registry.scan(injected, null, { type: "injection", element: trigger });
         $(injected).trigger("patterns-injected-scanned");
+
+        await utils.timeout(10); // Wait a bit before dispatching next event.
+        injected.dispatchEvent(
+            new CustomEvent("patterns-injected-delayed", {
+                bubbles: true,
+                cancelable: true,
+                detail: {
+                    injected: injected,
+                },
+            })
+        );
     }
 });
 
diff --git a/src/pat/inject/inject.test.js b/src/pat/inject/inject.test.js
@@ -559,11 +559,45 @@ describe("pat-inject", function () {
             var $div = $('<div id="someid" />');
             $("#lab").empty().append($a).append($div);
             var callback = jest.fn();
-            $(document).on("patterns-injected", callback);
+            $(document).on("patterns-injected-scanned", callback);
             pattern.init($a);
             $a.trigger("click");
-            answer("<html><body>" + '<div id="someid">repl</div>' + "</body></html>");
+            answer(`
+              <html>
+                <body>
+                  <div id="someid">
+                    <div>repl</div>
+                  </div>
+                </body>
+              </html>
+            `);
+            await utils.timeout(1); // wait a tick for async to settle.
+            expect(callback).toHaveBeenCalled();
+
+            spy_ajax.mockRestore();
+        });
+
+        it("triggers the patterns-injected-delayed event 10ms after the injected content has been scanned", async function () {
+            const spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
+            var $a = $('<a class="pat-inject" href="test.html#someid">link</a>');
+            var $div = $('<div id="someid" />');
+            $("#lab").empty().append($a).append($div);
+            var callback = jest.fn();
+            $(document.body).on("patterns-injected-delayed", callback);
+            pattern.init($a);
+            $a.trigger("click");
+            answer(`
+              <html>
+                <body>
+                  <div id="someid">
+                    <div>repl</div>
+                  </div>
+                </body>
+              </html>
+            `);
             await utils.timeout(1); // wait a tick for async to settle.
+            expect(callback).not.toHaveBeenCalled();
+            await utils.timeout(10); // wait a tick for async to settle.
             expect(callback).toHaveBeenCalled();
 
             spy_ajax.mockRestore();
