Merge pull request #17 from aearly/shadow-dom-example

Allow intercepting events from within shadow DOM.
virtualstate · Sep 2, 2023 · 390ab7d · 390ab7d
2 parents 8dd403a + 58c79ce
commit 390ab7d
Show file tree

Hide file tree

Showing 8 changed files with 1,535 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ Native JavaScript [navigation](https://github.com/WICG/navigation-api) implement
 
  ### Test Coverage
 
- ![Web Platform Tests 129/237](https://img.shields.io/badge/Web%20Platform%20Tests-129%2F237-brightgreen) ![92.53%25 lines covered](https://img.shields.io/badge/lines-92.53%25-brightgreen) ![92.53%25 statements covered](https://img.shields.io/badge/statements-92.53%25-brightgreen) ![82.59%25 functions covered](https://img.shields.io/badge/functions-82.59%25-brightgreen) ![82.71%25 branches covered](https://img.shields.io/badge/branches-82.71%25-brightgreen)
+
 
 [//]: # (badges)
 

diff --git a/example/index.html b/example/index.html
@@ -78,7 +78,9 @@
     <a href="/some/page">Some Page Link</a>
     <a href="/some/other">Some Other Page Link</a>
     <a href="/esm.html">ESM Link</a>
+    <a href="/webcomponents.html">Web Component Link</a>
+
 
     <div id="app"></div>
 </body>
-</html>
+</html>
diff --git a/example/polyfill-rollup.js b/example/polyfill-rollup.js
@@ -2281,7 +2281,7 @@ function interceptWindowClicks(navigation, window) {
     window.addEventListener("click", (ev) => {
         // console.log("click event", ev)
         if (ev.target?.ownerDocument === window.document) {
-            const aEl = matchesAncestor(ev.target, "a[href]"); // XXX: not sure what <a> tags without href do
+            const aEl = matchesAncestor(ev.composedPath()[0], "a[href]"); // XXX: not sure what <a> tags without href do
             if (like(aEl)) {
                 clickCallback(ev, aEl);
             }
@@ -2290,7 +2290,7 @@ function interceptWindowClicks(navigation, window) {
     window.addEventListener("submit", (ev) => {
         // console.log("submit event")
         if (ev.target?.ownerDocument === window.document) {
-            const form = matchesAncestor(ev.target, "form");
+            const form = matchesAncestor(ev.composedPath()[0], "form");
             if (like(form)) {
                 submitCallback(ev, form);
             }

diff --git a/example/rollup.js b/example/rollup.js
diff --git a/example/routes-rollup.js b/example/routes-rollup.js
diff --git a/example/webcomponents.html b/example/webcomponents.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Polyfill Example</title>
+
+</head>
+<body>
+    <script src="polyfill-rollup.js"></script>
+    <script>
+        class LinkElement extends HTMLElement {
+            constructor() {
+                super();
+                const shadow = this.attachShadow({ mode: "open" });
+                shadow.innerHTML = '<a href="/">Link within Shadow DOM</a>';
+            }
+        }
+
+        window.customElements.define('link-element', LinkElement)
+
+        window.addEventListener("load", loaded)
+
+        function loaded() {
+
+            console.log("Initial History State", history.state);
+            console.log(navigation)
+
+            const urlSpan = document.getElementById("url");
+            const app = document.getElementById("app");
+
+            navigation.addEventListener(
+                "navigate",
+                event => {
+                    console.log("Navigate event", event)
+
+                    const url = new URL(event.destination.url);
+                    console.log(event.destination.url);
+                    console.log("Submitted Name:", event.formData?.get("name"));
+                    console.log("Previous State:", navigation.currentEntry.getState());
+                    console.log("State:", event.destination.getState());
+                    console.log("Same Document:", event.destination.sameDocument);
+                    urlSpan.innerText = url.pathname;
+                    app.innerHTML = "";
+
+                    if (url.pathname === "/some/other") {
+                        console.log("Preventing default");
+                        event.preventDefault();
+                        try {
+                            console.log("Navigated");
+                            navigation.navigate("/", {
+                                state: "returned"
+                            });
+                        } catch (error) {
+                            console.error(error);
+                        }
+                    } else if (url.pathname === "/some/page") {
+                        event.intercept(() => {
+
+                            app.innerHTML = `
+                            <form action="/" method="post">
+                                <input type="text" name="name" value="" placeholder="Name" />
+                                <button type="submit">Submit</button>
+                            </form>
+                            `;
+
+
+                        })
+                    } else {
+                        event.intercept()
+                    }
+
+                }
+            );
+
+            if (navigation.currentEntry) {
+                urlSpan.innerText = new URL(navigation.currentEntry.url).pathname;
+            }
+
+            console.log(navigation.currentEntry.url)
+
+
+        }
+    </script>
+
+    <p>Current Url <span id="url"></span></p>
+
+    <a href="/">Home Link</a>
+    <a href="/esm.html">ESM Link</a>
+    <link-element></link-element>
+
+    <div id="app"></div>
+</body>
+</html>
diff --git a/src/get-polyfill.ts b/src/get-polyfill.ts
@@ -358,7 +358,7 @@ function interceptWindowClicks(navigation: Navigation, window: WindowLike) {
   window.addEventListener("click", (ev: MouseEventPrototype) => {
     // console.log("click event", ev)
     if (ev.target?.ownerDocument === window.document) {
-      const aEl = matchesAncestor(ev.target, "a[href]"); // XXX: not sure what <a> tags without href do
+      const aEl = matchesAncestor(ev.composedPath()[0], "a[href]"); // XXX: not sure what <a> tags without href do
       if (like<HTMLAnchorElementPrototype>(aEl)) {
         clickCallback(ev, aEl);
       }
@@ -367,7 +367,7 @@ function interceptWindowClicks(navigation: Navigation, window: WindowLike) {
   window.addEventListener("submit", (ev: SubmitEventPrototype) => {
     // console.log("submit event")
     if (ev.target?.ownerDocument === window.document) {
-      const form: unknown = matchesAncestor(ev.target, "form");
+      const form: unknown = matchesAncestor(ev.composedPath()[0], "form");
       if (like<HTMLFormElementPrototype>(form)) {
         submitCallback(ev, form);
       }

diff --git a/src/global-window.ts b/src/global-window.ts
@@ -19,7 +19,8 @@ export interface HTMLFormElementPrototype extends ElementPrototype {
 }
 
 export interface EventPrototype {
-    target: ElementPrototype
+    target: ElementPrototype;
+    composedPath(): ElementPrototype[];
     defaultPrevented: unknown;
     submitter: Record<string, unknown>;
 }
@@ -59,4 +60,4 @@ export interface WindowLike {
 
 declare var window: WindowLike | undefined;
 
-export const globalWindow = typeof window === "undefined" ? undefined : window;
+export const globalWindow = typeof window === "undefined" ? undefined : window;