├── .gitignore
├── images
    └── screenshot.png
├── src
    ├── utils
    │   ├── svg.ts
    │   ├── icons.ts
    │   └── codepen.ts
    ├── main.ts
    ├── graph
    │   ├── types.ts
    │   ├── renderers
    │   │   ├── edge.ts
    │   │   ├── pointer.ts
    │   │   ├── shadow-tree.ts
    │   │   └── node.ts
    │   ├── layout.ts
    │   └── renderer.ts
    ├── event-graph.ts
    ├── dom.ts
    ├── event-visualizer.ts
    └── event-steps.ts
├── snowpack.config.js
├── tsconfig.json
├── LICENSE
├── .github
    └── workflows
    │   └── ci.yml
├── package.json
├── public
    └── index.html
├── README.md
└── typings
    └── dagre-layout.d.ts


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | lib/
4 | 
5 | *.log
6 | .DS_Store


--------------------------------------------------------------------------------
/images/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pmdartus/event-visualizer/HEAD/images/screenshot.png


--------------------------------------------------------------------------------
/src/utils/svg.ts:
--------------------------------------------------------------------------------
1 | export function createSvgElement<K extends keyof SVGElementTagNameMap>(
2 |   tagName: K
3 | ): SVGElementTagNameMap[K] {
4 |   return document.createElementNS("http://www.w3.org/2000/svg", tagName);
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import EventVisualizer from "./event-visualizer";
 2 | 
 3 | declare global {
 4 |   interface HTMLElementTagNameMap {
 5 |     "event-visualizer": EventVisualizer;
 6 |   }
 7 | }
 8 | 
 9 | export default EventVisualizer;
10 | 


--------------------------------------------------------------------------------
/snowpack.config.js:
--------------------------------------------------------------------------------
 1 | // More details: https://www.snowpack.dev/reference/configuration
 2 | 
 3 | /** @type {import("snowpack").SnowpackUserConfig } */
 4 | export default {
 5 |   mount: {
 6 |     public: { url: "/", static: true },
 7 |     src: { url: "/" },
 8 |   },
 9 | 
10 |   buildOptions: {
11 |     out: "dist",
12 |   },
13 | 
14 |   optimize: {
15 |     bundle: true,
16 |     minify: true,
17 |     target: "es2018",
18 |   },
19 | };
20 | 


--------------------------------------------------------------------------------
/src/graph/types.ts:
--------------------------------------------------------------------------------
 1 | import rough from "roughjs";
 2 | import { graphlib, Node, GraphEdge as Edge } from "dagre";
 3 | 
 4 | import { TreeNode } from "../dom.js";
 5 | 
 6 | export type RoughSVG = ReturnType<typeof rough["svg"]>;
 7 | 
 8 | export enum GraphEdgeType {
 9 |   Child,
10 |   ShadowRoot,
11 |   AssignedElement,
12 | }
13 | 
14 | interface NodeData {
15 |   treeNode: TreeNode;
16 | }
17 | 
18 | export type Graph = graphlib.Graph<NodeData>;
19 | export type GraphNode = Node<NodeData>;
20 | export type GraphEdge = Edge;
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     // Project options
 4 |     "target": "ESNext",
 5 |     "lib": ["ES2020", "dom"],
 6 |     "outDir": "lib",
 7 |     "sourceMap": true,
 8 |     "declaration": true,
 9 |     
10 |     // Type check
11 |     "strict": true,
12 | 
13 |     // Linter checks
14 |     "noUnusedLocals": true,
15 | 
16 |     // Resolution
17 |     "moduleResolution": "node",
18 | 
19 |     // Experimental
20 |     "experimentalDecorators": true,
21 |   },
22 |   "include": [
23 |     "src/",
24 |     "typings/"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/utils/icons.ts:
--------------------------------------------------------------------------------
 1 | import { html } from "lit";
 2 | 
 3 | // prettier-ignore
 4 | export const boxArrowUp = () => html`
 5 |   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
 6 |     <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
 7 |     <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
 8 |   </svg>
 9 | `
10 | 


--------------------------------------------------------------------------------
/src/utils/codepen.ts:
--------------------------------------------------------------------------------
 1 | import EventVisualizer from "../event-visualizer";
 2 | 
 3 | /**
 4 |  * Create a new Code Pen editor from a event visualizer element.
 5 |  * Details: https://blog.codepen.io/documentation/prefill/
 6 |  */
 7 | export function openInCodePen(eventVisualizer: EventVisualizer) {
 8 |   const title = eventVisualizer.label;
 9 |   const serializedElement = eventVisualizer.outerHTML;
10 | 
11 |   let html = serializedElement;
12 |   html += `\n <script type="module" src="https://cdn.skypack.dev/@pmdartus/event-visualizer"></script>`;
13 | 
14 |   const data = {
15 |     title,
16 |     html,
17 |     layout: "left",
18 |     editors: "100", // HTML opened, CSS and JS closed
19 |   };
20 | 
21 |   const form = document.createElement("form");
22 |   form.action = "https://codepen.io/pen/define";
23 |   form.method = "POST";
24 |   form.target = "_blank";
25 |   form.style.display = "none";
26 | 
27 |   const input = document.createElement("input");
28 |   input.name = "data";
29 |   input.value = JSON.stringify(data);
30 | 
31 |   form.append(input);
32 |   document.body.append(form);
33 | 
34 |   form.submit();
35 |   form.remove();
36 | }
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Pierre-Marie Dartus
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [master]
 6 |   pull_request:
 7 |     branches: [master]
 8 | 
 9 | jobs:
10 |   build:
11 |     name: Build
12 |     runs-on: ubuntu-latest
13 | 
14 |     steps:
15 |       - uses: actions/checkout@v2
16 | 
17 |       - name: Setup Node.js
18 |         uses: actions/setup-node@v1
19 |         with:
20 |           node-version: "14"
21 | 
22 |       - name: Install dependencies
23 |         run: npm ci
24 | 
25 |       - name: Check format
26 |         run: npm run format:check
27 | 
28 |       - name: Run build step
29 |         run: npm run build
30 |         env:
31 |           NODE_ENV: production
32 | 
33 |       - name: Save build output
34 |         uses: actions/upload-artifact@v2
35 |         with:
36 |           name: dist
37 |           path: dist/
38 | 
39 |   deploy:
40 |     name: Deploy
41 |     runs-on: ubuntu-latest
42 | 
43 |     needs: build
44 |     if: github.ref == 'refs/heads/master'
45 | 
46 |     steps:
47 |       - name: Download a build output
48 |         uses: actions/download-artifact@v2
49 |         with:
50 |           name: dist
51 |           path: dist/
52 | 
53 |       - name: Deploy to GH pages
54 |         if:
55 |         uses: crazy-max/ghaction-github-pages@v2
56 |         with:
57 |           build_dir: dist
58 |           target_branch: gh-pages
59 |           jekyll: false
60 |         env:
61 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
62 | 


--------------------------------------------------------------------------------
/src/event-graph.ts:
--------------------------------------------------------------------------------
 1 | import { LitElement, html, css, PropertyValues } from "lit";
 2 | import { customElement, property } from "lit/decorators.js";
 3 | import { ref, createRef } from "lit/directives/ref.js";
 4 | 
 5 | import { GraphRenderer } from "./graph/renderer.js";
 6 | import { DomTree, EventDispatchingStep } from "./dom.js";
 7 | 
 8 | @customElement("event-graph")
 9 | export class EventGraph extends LitElement {
10 |   @property() tree!: DomTree;
11 |   @property() steps!: EventDispatchingStep[];
12 |   @property() activeStep!: number;
13 | 
14 |   private svgRoot = createRef<SVGSVGElement>();
15 |   private graphRender?: GraphRenderer;
16 | 
17 |   render() {
18 |     return html`<svg ${ref(this.svgRoot)}></svg>`;
19 |   }
20 | 
21 |   firstUpdated() {
22 |     const root = this.svgRoot.value!;
23 |     this.graphRender = new GraphRenderer({
24 |       root,
25 |     });
26 |   }
27 | 
28 |   updated(props: PropertyValues) {
29 |     if (props.has("tree")) {
30 |       this.graphRender?.setTree(this.tree);
31 |     }
32 | 
33 |     const step = this.steps[this.activeStep];
34 |     this.graphRender?.setStep(step);
35 |   }
36 | 
37 |   static get styles() {
38 |     return css`
39 |       :host {
40 |         display: flex;
41 |         align-items: center;
42 |       }
43 | 
44 |       svg {
45 |         width: 100%;
46 |         height: 100%;
47 |         max-height: 500px;
48 |         font-family: monospace;
49 |       }
50 | 
51 |       ${GraphRenderer.styles}
52 |     `;
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@pmdartus/event-visualizer",
 3 |   "version": "3.0.0",
 4 |   "description": "A visualization tool to better understand how events propagate in the shadow DOM",
 5 |   "keywords": [
 6 |     "event",
 7 |     "shadow-dom",
 8 |     "web-component"
 9 |   ],
10 |   "author": "Pierre-Marie Dartus <pm@dartus.fr>",
11 |   "license": "MIT",
12 |   "type": "module",
13 |   "files": [
14 |     "lib",
15 |     "dist"
16 |   ],
17 |   "module": "./lib/main.js",
18 |   "exports": {
19 |     "import": "./lib/main.js"
20 |   },
21 |   "types": "./lib/main.d.ts",
22 |   "repository": {
23 |     "type": "git",
24 |     "url": "https://github.com/pmdartus/event-visualizer"
25 |   },
26 |   "scripts": {
27 |     "start": "snowpack dev",
28 |     "build": "tsc && snowpack build",
29 |     "format": "prettier --write '{public,src}/**/*.{js,ts,html,css,md}'",
30 |     "format:check": "prettier --check '{public,src}/**/*.{js,ts,html,css,md}'"
31 |   },
32 |   "dependencies": {
33 |     "dagre": "^0.8.5",
34 |     "lit": "^2.0.0-rc.1",
35 |     "roughjs": "^4.3.1"
36 |   },
37 |   "devDependencies": {
38 |     "husky": "^4.3.8",
39 |     "lint-staged": "^10.5.4",
40 |     "prettier": "^2.2.1",
41 |     "snowpack": "^3.0.13",
42 |     "typescript": "^4.2.3"
43 |   },
44 |   "husky": {
45 |     "hooks": {
46 |       "pre-commit": "lint-staged"
47 |     }
48 |   },
49 |   "lint-staged": {
50 |     "{public,src}/**/*.{js,ts,html,css,md}": "prettier --write"
51 |   },
52 |   "prettier": {
53 |     "printWidth": 100
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/graph/renderers/edge.ts:
--------------------------------------------------------------------------------
 1 | import { css } from "lit";
 2 | 
 3 | import { Graph, GraphNode, GraphEdge, GraphEdgeType, RoughSVG } from "../types.js";
 4 | 
 5 | const CURVE_TIGHTNESS = 0.8;
 6 | 
 7 | function renderEdge({
 8 |   edge,
 9 |   from,
10 |   to,
11 |   root,
12 |   rc,
13 | }: {
14 |   edge: GraphEdge;
15 |   from: GraphNode;
16 |   to: GraphNode;
17 |   rc: RoughSVG;
18 |   root: SVGElement;
19 | }) {
20 |   const line = rc.curve(
21 |     edge.points.map((point) => [point.x, point.y]),
22 |     {
23 |       curveTightness: CURVE_TIGHTNESS,
24 |     }
25 |   );
26 |   line.setAttribute("data-from-id", from.treeNode.id);
27 |   line.setAttribute("data-to-id", to.treeNode.id);
28 | 
29 |   line.classList.add("edge");
30 |   if (edge.type === GraphEdgeType.Child) {
31 |     line.classList.add("edge__child");
32 |   } else if (edge.type === GraphEdgeType.ShadowRoot) {
33 |     line.classList.add("edge__shadow-root");
34 |   } else if (edge.type === GraphEdgeType.AssignedElement) {
35 |     line.classList.add("edge__assigned-element");
36 |   }
37 | 
38 |   root.appendChild(line);
39 | }
40 | 
41 | export function render({ graph, root, rc }: { graph: Graph; root: SVGSVGElement; rc: RoughSVG }) {
42 |   for (const graphEdge of graph.edges()) {
43 |     const from = graph.node(graphEdge.v);
44 |     const to = graph.node(graphEdge.w);
45 |     const edge = graph.edge(graphEdge);
46 |     renderEdge({ from, to, edge, root, rc });
47 |   }
48 | }
49 | 
50 | export const styles = css`
51 |   .edge path {
52 |     stroke: #505050;
53 |   }
54 | 
55 |   .edge__shadow-root {
56 |     stroke-dasharray: 8;
57 |   }
58 | 
59 |   .edge__assigned-element {
60 |     stroke-dasharray: 1, 4;
61 |     stroke-linecap: round;
62 |   }
63 | `;
64 | 


--------------------------------------------------------------------------------
/src/graph/layout.ts:
--------------------------------------------------------------------------------
 1 | import dagre, { graphlib } from "dagre";
 2 | 
 3 | import { DomTree, TreeNodeType } from "../dom.js";
 4 | import { Graph, GraphEdgeType } from "./types.js";
 5 | 
 6 | const ELEMENT_NODE_WIDTH = 50;
 7 | const ELEMENT_SHADOW_ROOT_WIDTH = 110;
 8 | const NODE_HEIGHT = 50;
 9 | 
10 | const HORIZONTAL_SPACING = 70;
11 | const VERTICAL_SPACING = 50;
12 | 
13 | export function graphFromDomTree(tree: DomTree): Graph {
14 |   const graph: Graph = new graphlib.Graph({});
15 | 
16 |   graph.setGraph({
17 |     nodesep: HORIZONTAL_SPACING,
18 |     ranksep: VERTICAL_SPACING,
19 |   });
20 | 
21 |   for (const treeNode of tree.nodes) {
22 |     const { id, type, domNode } = treeNode;
23 | 
24 |     graph.setNode(id, {
25 |       treeNode,
26 |       width: type === TreeNodeType.Element ? ELEMENT_NODE_WIDTH : ELEMENT_SHADOW_ROOT_WIDTH,
27 |       height: NODE_HEIGHT,
28 |     });
29 | 
30 |     for (const childDomNode of Array.from(domNode.children)) {
31 |       const childTreeNode = tree.getTreeNodeByDomNode(childDomNode)!;
32 | 
33 |       graph.setEdge(id, childTreeNode.id, {
34 |         type: GraphEdgeType.Child,
35 |       });
36 |     }
37 | 
38 |     if (domNode instanceof HTMLSlotElement) {
39 |       for (const assignedElementDomNode of domNode.assignedElements()) {
40 |         const assignedElementTreeNode = tree.getTreeNodeByDomNode(assignedElementDomNode)!;
41 | 
42 |         graph.setEdge(id, assignedElementTreeNode.id, {
43 |           type: GraphEdgeType.AssignedElement,
44 |         });
45 |       }
46 |     }
47 | 
48 |     if (domNode instanceof ShadowRoot) {
49 |       const hostElementTreeNode = tree.getTreeNodeByDomNode(domNode.host)!;
50 | 
51 |       graph.setEdge(hostElementTreeNode.id, id, {
52 |         type: GraphEdgeType.ShadowRoot,
53 |       });
54 |     }
55 |   }
56 | 
57 |   dagre.layout(graph);
58 | 
59 |   return graph;
60 | }
61 | 


--------------------------------------------------------------------------------
/src/graph/renderer.ts:
--------------------------------------------------------------------------------
 1 | import { css } from "lit";
 2 | import rough from "roughjs";
 3 | 
 4 | import { DomTree, EventDispatchingStep } from "../dom.js";
 5 | 
 6 | import { graphFromDomTree } from "./layout.js";
 7 | import { Graph, RoughSVG } from "./types.js";
 8 | 
 9 | import {
10 |   render as renderShadowTrees,
11 |   styles as shadowTreeStyles,
12 | } from "./renderers/shadow-tree.js";
13 | import {
14 |   render as renderNodes,
15 |   update as updateNodes,
16 |   styles as nodeStyles,
17 | } from "./renderers/node.js";
18 | import { render as renderEdges, styles as edgeStyles } from "./renderers/edge.js";
19 | import {
20 |   render as renderPointers,
21 |   update as updatePointers,
22 |   styles as pointerStyles,
23 | } from "./renderers/pointer.js";
24 | 
25 | // Horizontal padding is larger than vertical padding to fit the pointers on the side of the graph.
26 | const GRAPH_VERTICAL_PADDING = 20;
27 | const GRAPH_HORIZONTAL_PADDING = 50;
28 | 
29 | function updateViewBox({ root }: { root: SVGSVGElement; graph: Graph }): void {
30 |   const { width, height } = root.getBBox();
31 |   root.setAttribute(
32 |     "viewBox",
33 |     [
34 |       -GRAPH_HORIZONTAL_PADDING,
35 |       -GRAPH_VERTICAL_PADDING,
36 |       width + 2 * GRAPH_HORIZONTAL_PADDING,
37 |       height + 2 * GRAPH_VERTICAL_PADDING,
38 |     ].join(" ")
39 |   );
40 | }
41 | 
42 | export class GraphRenderer {
43 |   private root: SVGSVGElement;
44 |   private rc: RoughSVG;
45 |   private graph?: Graph;
46 | 
47 |   constructor({ root }: { root: SVGSVGElement }) {
48 |     this.root = root;
49 |     this.rc = rough.svg(root);
50 |   }
51 | 
52 |   setTree(tree: DomTree) {
53 |     this.root.innerHTML = "";
54 | 
55 |     this.graph = graphFromDomTree(tree);
56 | 
57 |     const config = {
58 |       tree,
59 |       graph: this.graph,
60 |       root: this.root,
61 |       rc: this.rc,
62 |     };
63 | 
64 |     renderShadowTrees(config);
65 |     renderEdges(config);
66 |     renderNodes(config);
67 | 
68 |     updateViewBox(config);
69 | 
70 |     renderPointers(config);
71 |   }
72 | 
73 |   setStep(step: EventDispatchingStep) {
74 |     if (!this.graph) {
75 |       return;
76 |     }
77 | 
78 |     const config = {
79 |       step,
80 |       graph: this.graph,
81 |       root: this.root,
82 |     };
83 | 
84 |     updateNodes(config);
85 |     updatePointers(config);
86 |   }
87 | 
88 |   static styles = css`
89 |     ${shadowTreeStyles}
90 |     ${nodeStyles}
91 |     ${edgeStyles}
92 |     ${pointerStyles}
93 |   `;
94 | }
95 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Event Visualizer Embedded</title>
 8 | 
 9 |     <style>
10 |       event-visualizer {
11 |         margin-bottom: 2em;
12 |       }
13 |     </style>
14 |   </head>
15 |   <body>
16 |     <event-visualizer label="Light DOM tree" event-bubbles event-composed>
17 |       <template>
18 |         <div id="a">
19 |           <div id="b">
20 |             <div id="c"></div>
21 |           </div>
22 |           <div id="d">
23 |             <div id="e" target></div>
24 |           </div>
25 |         </div>
26 |       </template>
27 |     </event-visualizer>
28 | 
29 |     <event-visualizer label="Simple shadow tree" event-bubbles event-composed>
30 |       <template>
31 |         <div id="a">
32 |           <template data-shadowroot="open">
33 |             <div id="c">
34 |               <div id="d" target></div>
35 |             </div>
36 |             <div id="e"></div>
37 |           </template>
38 |           <div id="b"></div>
39 |         </div>
40 |       </template>
41 |     </event-visualizer>
42 | 
43 |     <event-visualizer
44 |       label="Event dispatching in a nested shadow trees"
45 |       event-bubbles
46 |       event-composed
47 |     >
48 |       <template>
49 |         <div id="a">
50 |           <template data-shadowroot="open">
51 |             <div id="c">
52 |               <template data-shadowroot="open">
53 |                 <div id="e" target></div>
54 |               </template>
55 |               <div id="d"></div>
56 |             </div>
57 |           </template>
58 |           <div id="b"></div>
59 |         </div>
60 |       </template>
61 |     </event-visualizer>
62 | 
63 |     <event-visualizer label="Event dispatching from slotted content" event-bubbles event-composed>
64 |       <template>
65 |         <div id="a">
66 |           <template data-shadowroot="open">
67 |             <div id="c">
68 |               <slot id="d"></slot>
69 |               <div id="e"></div>
70 |             </div>
71 |           </template>
72 |           <div id="b" target></div>
73 |         </div>
74 |       </template>
75 |     </event-visualizer>
76 | 
77 |     <event-visualizer label="Event dispatching from closed shadow" event-bubbles event-composed>
78 |       <template>
79 |         <div id="a">
80 |           <template data-shadowroot="closed">
81 |             <div id="c">
82 |               <template data-shadowroot="closed">
83 |                 <div id="e" target></div>
84 |               </template>
85 |               <div id="d"></div>
86 |             </div>
87 |           </template>
88 |           <div id="b"></div>
89 |         </div>
90 |       </template>
91 |     </event-visualizer>
92 | 
93 |     <script src="./main.js" type="module"></script>
94 |   </body>
95 | </html>
96 | 


--------------------------------------------------------------------------------
/src/graph/renderers/pointer.ts:
--------------------------------------------------------------------------------
 1 | import { css } from "lit";
 2 | 
 3 | import { EventDispatchingStep } from "../../dom.js";
 4 | import { createSvgElement } from "../../utils/svg.js";
 5 | 
 6 | import { Graph, RoughSVG } from "../types.js";
 7 | 
 8 | const POINTERS = ["target", "event"];
 9 | 
10 | const POINTER_WIDTH = 50;
11 | const POINTER_HEIGHT = 20;
12 | const POINTER_PADDING = 5;
13 | 
14 | function renderPointer({ pointer, root, rc }: { pointer: string; root: SVGElement; rc: RoughSVG }) {
15 |   const pointerElm = rc.polygon(
16 |     [
17 |       [-POINTER_WIDTH, -POINTER_HEIGHT / 2],
18 |       [0, -POINTER_HEIGHT / 2],
19 |       [0 + 5, 0],
20 |       [0, POINTER_HEIGHT / 2],
21 |       [-POINTER_WIDTH, POINTER_HEIGHT / 2],
22 |     ],
23 |     {
24 |       fill: "white",
25 |       fillStyle: "solid",
26 |     }
27 |   );
28 |   pointerElm.setAttribute("class", `pointer pointer__${pointer}`);
29 | 
30 |   root.appendChild(pointerElm);
31 | 
32 |   const labelElm = createSvgElement("text");
33 |   labelElm.textContent = pointer;
34 |   labelElm.setAttribute("x", String(-POINTER_WIDTH + Math.floor(POINTER_PADDING / 2)));
35 |   labelElm.setAttribute("y", String(0));
36 |   labelElm.setAttribute("dominant-baseline", "central");
37 | 
38 |   pointerElm.appendChild(labelElm);
39 | }
40 | 
41 | export function render({ graph, root, rc }: { graph: Graph; root: SVGSVGElement; rc: RoughSVG }) {
42 |   for (const pointer of POINTERS) {
43 |     renderPointer({ pointer, root, rc });
44 |   }
45 | }
46 | 
47 | export function update({
48 |   step,
49 |   graph,
50 |   root,
51 | }: {
52 |   step: EventDispatchingStep;
53 |   graph: Graph;
54 |   root: SVGSVGElement;
55 | }) {
56 |   const { target, currentTarget } = step;
57 | 
58 |   const currentTargetNode = graph
59 |     .nodes()
60 |     .map((nodeId) => graph.node(nodeId)!)
61 |     .find((node) => node.treeNode === currentTarget)!;
62 |   const targetNode = graph
63 |     .nodes()
64 |     .map((nodeId) => graph.node(nodeId)!)
65 |     .find((node) => node.treeNode === target)!;
66 | 
67 |   const eventPointerElm: SVGElement = root.querySelector(`.pointer__event`)!;
68 |   const targetPointerElm: SVGElement = root.querySelector(`.pointer__target`)!;
69 | 
70 |   const pointerVerticalOffset = currentTargetNode === targetNode ? currentTargetNode.height / 4 : 0;
71 | 
72 |   eventPointerElm.style.transform = `translate(${
73 |     currentTargetNode.x - currentTargetNode.width / 2
74 |   }px, ${currentTargetNode.y - pointerVerticalOffset}px)`;
75 | 
76 |   targetPointerElm.style.transform = `translate(${targetNode.x - targetNode.width / 2}px, ${
77 |     targetNode.y + pointerVerticalOffset
78 |   }px)`;
79 | }
80 | 
81 | export const styles = css`
82 |   .pointer {
83 |     transition: transform 0.5s;
84 |   }
85 | 
86 |   .pointer__event > path {
87 |     fill: var(--current-target-color);
88 |     stroke: var(--current-target-alt-color);
89 |   }
90 | 
91 |   .pointer__target > path {
92 |     fill: var(--target-color);
93 |     stroke: var(--target-alt-color);
94 |   }
95 | `;
96 | 


--------------------------------------------------------------------------------
/src/graph/renderers/shadow-tree.ts:
--------------------------------------------------------------------------------
  1 | import { css } from "lit";
  2 | 
  3 | import { DomTree, ShadowRootTreeNode, TreeNodeType } from "../../dom.js";
  4 | 
  5 | import { Graph, RoughSVG } from "../types.js";
  6 | 
  7 | interface BoundingBox {
  8 |   x: number;
  9 |   y: number;
 10 |   width: number;
 11 |   height: number;
 12 | }
 13 | 
 14 | const SHADOW_TREE_PADDING = 10;
 15 | 
 16 | function isNodeContained(node: Node, root: ShadowRoot): boolean {
 17 |   if (node === root) {
 18 |     return false;
 19 |   }
 20 | 
 21 |   let currentRoot = node.getRootNode();
 22 |   while (currentRoot instanceof ShadowRoot) {
 23 |     if (currentRoot === root) {
 24 |       return true;
 25 |     }
 26 | 
 27 |     currentRoot = currentRoot.host.getRootNode();
 28 |   }
 29 | 
 30 |   return false;
 31 | }
 32 | 
 33 | export function render({
 34 |   tree,
 35 |   graph,
 36 |   root,
 37 |   rc,
 38 | }: {
 39 |   tree: DomTree;
 40 |   graph: Graph;
 41 |   root: SVGSVGElement;
 42 |   rc: RoughSVG;
 43 | }) {
 44 |   const shadowTrees = new Map<ShadowRootTreeNode, BoundingBox>();
 45 | 
 46 |   const computeShadowTreeBoundingBox = (rootTreeNode: ShadowRootTreeNode): BoundingBox => {
 47 |     let boundingBox = shadowTrees.get(rootTreeNode);
 48 | 
 49 |     if (!boundingBox) {
 50 |       const containedNodes = tree.nodes.filter((treeNode) =>
 51 |         isNodeContained(treeNode.domNode, rootTreeNode.domNode)
 52 |       );
 53 | 
 54 |       let minX = Infinity,
 55 |         minY = Infinity;
 56 |       let maxX = -Infinity,
 57 |         maxY = -Infinity;
 58 | 
 59 |       for (const containedNode of [rootTreeNode, ...containedNodes]) {
 60 |         let nodeBoundingBox: BoundingBox = graph.node(containedNode.id);
 61 | 
 62 |         if (rootTreeNode !== containedNode && containedNode.type === TreeNodeType.ShadowRoot) {
 63 |           nodeBoundingBox = computeShadowTreeBoundingBox(containedNode);
 64 |         }
 65 | 
 66 |         minX = Math.min(minX, nodeBoundingBox.x - nodeBoundingBox.width / 2);
 67 |         minY = Math.min(minY, nodeBoundingBox.y - nodeBoundingBox.height / 2);
 68 |         maxX = Math.max(maxX, nodeBoundingBox.x + nodeBoundingBox.width / 2);
 69 |         maxY = Math.max(maxY, nodeBoundingBox.y + nodeBoundingBox.height / 2);
 70 |       }
 71 | 
 72 |       const width = maxX - minX;
 73 |       const height = maxY - minY;
 74 | 
 75 |       boundingBox = {
 76 |         x: minX + width / 2,
 77 |         y: minY + height / 2,
 78 |         width: width + 2 * SHADOW_TREE_PADDING,
 79 |         height: height + 2 * SHADOW_TREE_PADDING,
 80 |       };
 81 | 
 82 |       shadowTrees.set(rootTreeNode, boundingBox);
 83 |     }
 84 | 
 85 |     return boundingBox;
 86 |   };
 87 | 
 88 |   for (const treeNode of tree.nodes) {
 89 |     if (treeNode.type === TreeNodeType.ShadowRoot) {
 90 |       const boundingBox = computeShadowTreeBoundingBox(treeNode);
 91 | 
 92 |       const rect = rc.rectangle(
 93 |         boundingBox.x - boundingBox.width / 2,
 94 |         boundingBox.y - boundingBox.height / 2,
 95 |         boundingBox.width,
 96 |         boundingBox.height,
 97 |         {
 98 |           fill: "white",
 99 |           fillStyle: "solid",
100 |         }
101 |       );
102 |       rect.classList.add("shadow-tree");
103 |       root.appendChild(rect);
104 |     }
105 |   }
106 | }
107 | 
108 | export const styles = css`
109 |   .shadow-tree > path {
110 |     fill: rgb(71 85 105 / 8%);
111 |     stroke: rgb(71 85 105 / 50%);
112 |   }
113 | `;
114 | 


--------------------------------------------------------------------------------
/src/graph/renderers/node.ts:
--------------------------------------------------------------------------------
  1 | import { css } from "lit";
  2 | 
  3 | import { TreeNodeType, EventDispatchingStep } from "../../dom.js";
  4 | import { createSvgElement } from "../../utils/svg.js";
  5 | 
  6 | import { Graph, GraphNode, RoughSVG } from "../types.js";
  7 | 
  8 | const NODE_LABEL_SIZE = 21;
  9 | 
 10 | function renderNode({ node, rc, root }: { node: GraphNode; rc: RoughSVG; root: SVGElement }) {
 11 |   const { treeNode } = node;
 12 | 
 13 |   const rect = rc.rectangle(
 14 |     node.x - node.width / 2,
 15 |     node.y - node.height / 2,
 16 |     node.width,
 17 |     node.height,
 18 |     {
 19 |       fill: "white",
 20 |       fillStyle: "solid",
 21 |     }
 22 |   );
 23 |   rect.setAttribute("data-graph-id", treeNode.id);
 24 |   rect.setAttribute(
 25 |     "class",
 26 |     `node node__${treeNode.type === TreeNodeType.Element ? "element" : "shadow-root"}`
 27 |   );
 28 | 
 29 |   const text = createSvgElement("text");
 30 |   text.setAttribute("x", String(node.x));
 31 |   text.setAttribute("y", String(node.y));
 32 |   text.setAttribute("dominant-baseline", "central");
 33 |   text.setAttribute("text-anchor", "middle");
 34 | 
 35 |   if (treeNode.type === TreeNodeType.Element) {
 36 |     text.textContent = `<${treeNode.name}>`;
 37 |   } else {
 38 |     // The dy attribute defines the offset from the previous element. To center both lines in the
 39 |     // middle of the <text> element, the first <tspan> is shift upward by half a line height relative
 40 |     // to the parent <text>. The second <tspan> is shift by a line height down relative to the
 41 |     // first <tspan>.
 42 |     text.innerHTML =
 43 |       `<tspan x="${node.x}" dy="-0.5em">Shadow Root</tspan>` +
 44 |       `<tspan x="${node.x}" dy="1.1em">(${
 45 |         treeNode.mode === "open" ? "🔓 open" : "🔒 closed"
 46 |       })</span>`;
 47 |   }
 48 | 
 49 |   renderNodeLabel({
 50 |     node,
 51 |     rc,
 52 |     root: rect,
 53 |   });
 54 | 
 55 |   root.append(rect);
 56 |   rect.append(text);
 57 | }
 58 | 
 59 | function renderNodeLabel({ node, root, rc }: { node: GraphNode; rc: RoughSVG; root: SVGElement }) {
 60 |   const { treeNode } = node;
 61 | 
 62 |   if (!treeNode.label) {
 63 |     return;
 64 |   }
 65 | 
 66 |   const labelContainer = rc.rectangle(
 67 |     node.x + node.width / 2 - NODE_LABEL_SIZE / 2,
 68 |     node.y - node.height / 2 - NODE_LABEL_SIZE / 2,
 69 |     NODE_LABEL_SIZE,
 70 |     NODE_LABEL_SIZE,
 71 |     {
 72 |       fill: "white",
 73 |       fillStyle: "solid",
 74 |     }
 75 |   );
 76 |   labelContainer.setAttribute("class", "node-label");
 77 | 
 78 |   const labelText = createSvgElement("text");
 79 |   labelText.textContent = treeNode.label;
 80 |   labelText.setAttribute("x", String(node.x + node.width / 2));
 81 |   labelText.setAttribute("y", String(node.y - node.height / 2));
 82 |   labelText.setAttribute("dominant-baseline", "central");
 83 |   labelText.setAttribute("text-anchor", "middle");
 84 | 
 85 |   root.append(labelContainer);
 86 |   labelContainer.append(labelText);
 87 | }
 88 | 
 89 | export function render({ graph, root, rc }: { graph: Graph; root: SVGSVGElement; rc: RoughSVG }) {
 90 |   for (const id of graph.nodes()) {
 91 |     const node = graph.node(id);
 92 |     renderNode({ node, root, rc });
 93 |   }
 94 | }
 95 | 
 96 | export function update({
 97 |   step,
 98 |   root,
 99 | }: {
100 |   step: EventDispatchingStep;
101 |   graph: Graph;
102 |   root: SVGSVGElement;
103 | }) {
104 |   const { composedPath } = step;
105 | 
106 |   for (const svgNode of Array.from(root.querySelectorAll(".node"))) {
107 |     const nodeId = svgNode.getAttribute("data-graph-id");
108 |     const isInComposedPath = composedPath.some((treeNode) => treeNode.id === nodeId);
109 | 
110 |     if (isInComposedPath) {
111 |       svgNode.classList.add("node__composed-path");
112 |     } else {
113 |       svgNode.classList.remove("node__composed-path");
114 |     }
115 |   }
116 | }
117 | 
118 | export const styles = css`
119 |   .node.node__composed-path > path {
120 |     fill: var(--composed-path-color);
121 |     stroke: var(--composed-path-alt-color);
122 |     stroke-width: 1.5;
123 |   }
124 | 
125 |   .node-label > path {
126 |     fill: #a9d2f7;
127 |   }
128 | `;
129 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Event visualizer
 2 | 
 3 | A visualization tool to better understand how events propagate in the shadow DOM.
 4 | 
 5 | ![Build status](https://github.com/pmdartus/event-visualizer/actions/workflows/ci.yml/badge.svg)
 6 | ![NPM](https://img.shields.io/npm/v/@pmdartus/event-visualizer)
 7 | 
 8 | ## Overview
 9 | 
10 | The way DOM events propagate in the shadow DOM is not intuitive for developers onboarding with web components. Event configuration, DOM structure and `closed` vs. `opened` shadow trees are many factors influencing event propagation.
11 | 
12 | This project is an attempt to bring clarity to this subject by offering a visual playground explaining how events propagates step-by-step in the shadow DOM.
13 | 
14 | [![Event visualizer screenshot](images/screenshot.png)](https://codepen.io/pmdartus/pen/GRrWxQY?editors=1000)
15 | 
16 | **Try it out:** [Demo / Playground](https://codepen.io/pmdartus/pen/GRrWxQY?editors=1000)
17 | 
18 | ## Installation
19 | 
20 | This package can be consumed as an NPM package.
21 | 
22 | ```sh
23 | $ npm install --save @pmdartus/event-visualizer
24 | ```
25 | 
26 | Alternatively for drop-in consumption this package can directly be loaded from [Skypack](https://www.skypack.dev/) CDN.
27 | 
28 | ```html
29 | <script type="module" src="https://cdn.skypack.dev/@pmdartus/event-visualizer"></script>
30 | ```
31 | 
32 | ## `<event-visualizer>`
33 | 
34 | ### Properties / Attributes
35 | 
36 | | Property        | Attribute        | Type      | Default               | Description                                                                                                                         |
37 | | --------------- | ---------------- | --------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
38 | | `label`         | `label`          | `string`  | `"Event propagation"` | The label name.                                                                                                                     |
39 | | `eventBubbles`  | `event-bubbles`  | `boolean` | `false`               | Indicates wether the dispatched event should [bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) or not.      |
40 | | `eventComposed` | `event-composed` | `boolean` | `false`               | Indicates wether the dispatched event should be [composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) or not. |
41 | 
42 | ### Slots
43 | 
44 | | Name    | Description                                                                                                                                                      |
45 | | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
46 | | default | Accepts a single `<template>` element representing the DOM tree to visualize. Refer to the [DOM tree definition](#dom-tree-definition) section for more details. |
47 | 
48 | ## DOM tree definition
49 | 
50 | The visualized DOM tree is configured by passing a `<template>` element in the default slot. The content of the template tag is interpreted by the `<event-visualizer>` custom element to render the visual previous of the DOM tree and emulate event dispatching:
51 | 
52 | - Shadow trees can be defined directly in HTML via the [declarative shadow DOM](https://github.com/mfreed7/declarative-shadow-dom) syntax with the difference difference that the `shadow-root` attribute is renamed to `data-shadow-root`.
53 | - The original event target is defined by adding a `target` attribute.
54 | - A label can be added to any element using the `id` attribute.
55 | - Restrictions:
56 |   - The template content should have root element.
57 |   - The DOM should have a one element with the `target` attribute.
58 | 
59 | ```html
60 | <event-visualizer label="Simple tree">
61 |   <template>
62 |     <div id="a">
63 |       <div id="b" target></div>
64 |     </div>
65 |   </template>
66 | </event-visualizer>
67 | 
68 | <event-visualizer label="Simple shadow tree">
69 |   <template>
70 |     <div id="a">
71 |       <template data-shadowroot="open">
72 |         <div id="b" target></div>
73 |       </template>
74 |       <div id="c">
75 |     </div>
76 |   </template>
77 | </event-visualizer>
78 | ```
79 | 


--------------------------------------------------------------------------------
/typings/dagre-layout.d.ts:
--------------------------------------------------------------------------------
  1 | // Adapted version of @types/dagre
  2 | // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/dagre/index.d.ts
  3 | 
  4 | // Type definitions for dagre 0.7
  5 | // Project: https://github.com/dagrejs/dagre
  6 | // Definitions by: Qinfeng Chen <https://github.com/qinfchen>
  7 | //                 Lisa Vallfors <https://github.com/Frankrike>
  8 | //                 Pete Vilter <https://github.com/vilterp>
  9 | //                 David Newell <https://github.com/rustedgrail>
 10 | //                 Graham Lea <https://github.com/GrahamLea>
 11 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 12 | // TypeScript Version: 2.2
 13 | 
 14 | declare module "dagre" {
 15 |   export namespace graphlib {
 16 |     class Graph<T = {}> {
 17 |       constructor(opt?: { directed?: boolean; multigraph?: boolean; compound?: boolean });
 18 | 
 19 |       graph(): GraphLabel;
 20 |       isDirected(): boolean;
 21 |       isMultiGraph(): boolean;
 22 |       setGraph(label: GraphLabel): Graph<T>;
 23 | 
 24 |       edge(edgeObj: Edge): GraphEdge;
 25 |       edge(outNodeName: string, inNodeName: string, name?: string): GraphEdge;
 26 |       edgeCount(): number;
 27 |       edges(): Edge[];
 28 |       hasEdge(edgeObj: Edge): boolean;
 29 |       hasEdge(outNodeName: string, inNodeName: string, name?: string): boolean;
 30 |       inEdges(inNodeName: string, outNodeName?: string): Edge[] | undefined;
 31 |       outEdges(outNodeName: string, inNodeName?: string): Edge[] | undefined;
 32 |       removeEdge(outNodeName: string, inNodeName: string): Graph<T>;
 33 |       setDefaultEdgeLabel(
 34 |         callback: string | ((v: string, w: string, name?: string) => string | Label)
 35 |       ): Graph<T>;
 36 |       setEdge(params: Edge, value?: string | { [key: string]: any }): Graph<T>;
 37 |       setEdge(sourceId: string, targetId: string, value?: string | Label, name?: string): Graph<T>;
 38 | 
 39 |       children(parentName: string): string | undefined;
 40 |       hasNode(name: string): boolean;
 41 |       neighbors(name: string): Array<Node<T>> | undefined;
 42 |       node(id: string | Label): Node<T>;
 43 |       nodeCount(): number;
 44 |       nodes(): string[];
 45 |       parent(childName: string): string | undefined;
 46 |       predecessors(name: string): Array<Node<T>> | undefined;
 47 |       removeNode(name: string): Graph<T>;
 48 |       setDefaultNodeLabel(callback: string | ((nodeId: string) => string | Label)): Graph<T>;
 49 |       setNode(name: string, label: string | Label): Graph<T>;
 50 |       setParent(childName: string, parentName: string): void;
 51 |       sinks(): Array<Node<T>>;
 52 |       sources(): Array<Node<T>>;
 53 |       successors(name: string): Array<Node<T>> | undefined;
 54 |     }
 55 | 
 56 |     namespace json {
 57 |       function read(graph: any): Graph;
 58 |       function write(graph: Graph): any;
 59 |     }
 60 | 
 61 |     namespace alg {
 62 |       function components(graph: Graph): string[][];
 63 |       function dijkstra(graph: Graph, source: string, weightFn?: WeightFn, edgeFn?: EdgeFn): any;
 64 |       function dijkstraAll(graph: Graph, weightFn?: WeightFn, edgeFn?: EdgeFn): any;
 65 |       function findCycles(graph: Graph): string[][];
 66 |       function floydWarchall(graph: Graph, weightFn?: WeightFn, edgeFn?: EdgeFn): any;
 67 |       function isAcyclic(graph: Graph): boolean;
 68 |       function postorder(graph: Graph, nodeNames: string | string[]): string[];
 69 |       function preorder(graph: Graph, nodeNames: string | string[]): string[];
 70 |       function prim<T>(graph: Graph<T>, weightFn?: WeightFn): Graph<T>;
 71 |       function tarjam(graph: Graph): string[][];
 72 |       function topsort(graph: Graph): string[];
 73 |     }
 74 |   }
 75 | 
 76 |   export interface Label {
 77 |     [key: string]: any;
 78 |   }
 79 |   export type WeightFn = (edge: Edge) => number;
 80 |   export type EdgeFn = (outNodeName: string) => GraphEdge[];
 81 | 
 82 |   export interface GraphLabel {
 83 |     width?: number;
 84 |     height?: number;
 85 |     compound?: boolean;
 86 |     rankdir?: string;
 87 |     align?: string;
 88 |     nodesep?: number;
 89 |     edgesep?: number;
 90 |     ranksep?: number;
 91 |     marginx?: number;
 92 |     marginy?: number;
 93 |     acyclicer?: string;
 94 |     ranker?: string;
 95 |   }
 96 | 
 97 |   export interface NodeConfig {
 98 |     width?: number;
 99 |     height?: number;
100 |   }
101 | 
102 |   export interface EdgeConfig {
103 |     minlen?: number;
104 |     weight?: number;
105 |     width?: number;
106 |     height?: number;
107 |     lablepos?: "l" | "c" | "r";
108 |     labeloffest?: number;
109 |   }
110 | 
111 |   export interface Edge {
112 |     v: string;
113 |     w: string;
114 |     name?: string;
115 |   }
116 | 
117 |   export interface GraphEdge {
118 |     points: Array<{ x: number; y: number }>;
119 |     [key: string]: any;
120 |   }
121 | 
122 |   export type Node<T = {}> = T & {
123 |     x: number;
124 |     y: number;
125 |     width: number;
126 |     height: number;
127 |     class?: string;
128 |     label?: string;
129 |     padding?: number;
130 |     paddingX?: number;
131 |     paddingY?: number;
132 |     rx?: number;
133 |     ry?: number;
134 |     shape?: string;
135 |   };
136 | 
137 |   function layout(graph: graphlib.Graph, layout?: GraphLabel & NodeConfig & EdgeConfig): void;
138 | 
139 |   const Lib: {
140 |     layout: typeof layout;
141 |   };
142 | 
143 |   export default Lib;
144 | }
145 | 


--------------------------------------------------------------------------------
/src/dom.ts:
--------------------------------------------------------------------------------
  1 | export type TreeNodeId = string;
  2 | 
  3 | export enum TreeNodeType {
  4 |   Element,
  5 |   ShadowRoot,
  6 | }
  7 | 
  8 | interface BaseTreeNode<N extends Node, T extends TreeNodeType> {
  9 |   id: TreeNodeId;
 10 |   type: T;
 11 |   domNode: N;
 12 |   label: string | null;
 13 | }
 14 | 
 15 | export interface ElementTreeNode extends BaseTreeNode<Element, TreeNodeType.Element> {
 16 |   name: string;
 17 | }
 18 | 
 19 | export interface ShadowRootTreeNode extends BaseTreeNode<ShadowRoot, TreeNodeType.ShadowRoot> {
 20 |   mode: ShadowRootMode;
 21 | }
 22 | 
 23 | export type TreeNode = ElementTreeNode | ShadowRootTreeNode;
 24 | 
 25 | export interface DomTree {
 26 |   root: TreeNode;
 27 |   target: TreeNode;
 28 |   nodes: TreeNode[];
 29 |   getTreeNodeById(id: TreeNodeId): TreeNode | undefined;
 30 |   getTreeNodeByDomNode(domNode: Node): TreeNode | undefined;
 31 | }
 32 | 
 33 | export interface EventDispatchingStep {
 34 |   target: TreeNode;
 35 |   currentTarget: TreeNode;
 36 |   composedPath: TreeNode[];
 37 | }
 38 | 
 39 | const EVENT_NAME = "__TEST_EVENT__";
 40 | 
 41 | /**
 42 |  * Turns a HTMLTemplate element into a ShadowRoot following the declarative shadow DOM
 43 |  * specification.
 44 |  */
 45 | function applyDeclarativeShadowDom(template: HTMLTemplateElement): ShadowRoot {
 46 |   const mode = template.getAttribute("data-shadowroot");
 47 | 
 48 |   if (mode !== "open" && mode !== "closed") {
 49 |     throw new Error(
 50 |       `Invalid data-shadowroot attribute value. Expected "open" or "closed" but received "${mode}"`
 51 |     );
 52 |   }
 53 | 
 54 |   const shadowRoot = template.parentElement!.attachShadow({
 55 |     mode,
 56 |   });
 57 | 
 58 |   shadowRoot.append(template.content);
 59 |   template.remove();
 60 | 
 61 |   return shadowRoot;
 62 | }
 63 | 
 64 | /**
 65 |  * Create a DOMTree out of an HTMLTemplate element.
 66 |  */
 67 | export function createDomTree(template: HTMLTemplateElement): DomTree {
 68 |   let currentId = 0;
 69 | 
 70 |   const nodes: TreeNode[] = [];
 71 | 
 72 |   const createElementTreeNode = (
 73 |     config: Pick<ElementTreeNode, "domNode" | "label">
 74 |   ): ElementTreeNode => {
 75 |     const node: ElementTreeNode = {
 76 |       id: String(currentId++),
 77 |       type: TreeNodeType.Element,
 78 |       domNode: config.domNode,
 79 |       label: config.label,
 80 |       name: config.domNode.tagName.toLocaleLowerCase(),
 81 |     };
 82 | 
 83 |     nodes.push(node);
 84 |     return node;
 85 |   };
 86 | 
 87 |   const createShadowRootTreeNode = (
 88 |     config: Pick<ShadowRootTreeNode, "domNode" | "label">
 89 |   ): ShadowRootTreeNode => {
 90 |     const node: ShadowRootTreeNode = {
 91 |       id: String(currentId++),
 92 |       type: TreeNodeType.ShadowRoot,
 93 |       domNode: config.domNode,
 94 |       label: config.label,
 95 |       mode: config.domNode.mode,
 96 |     };
 97 | 
 98 |     nodes.push(node);
 99 |     return node;
100 |   };
101 | 
102 |   const { content } = template;
103 |   if (content.children.length !== 1) {
104 |     throw new Error(`Invalid tree. Expect 1 root element but found ${content.children.length}.`);
105 |   }
106 | 
107 |   const root = content.children[0].cloneNode(true);
108 |   if (!(root instanceof Element)) {
109 |     throw new Error(`Invalid tree. Expected root to be an instance of Element but found ${root}.`);
110 |   }
111 | 
112 |   const rootTreeNode = createElementTreeNode({
113 |     domNode: root,
114 |     label: root.getAttribute("id"),
115 |   });
116 | 
117 |   let currentElement: Element | undefined;
118 |   const remainingElements: Element[] = [...Array.from(root.children)];
119 | 
120 |   while ((currentElement = remainingElements.pop())) {
121 |     const label = currentElement.getAttribute("id");
122 | 
123 |     if (
124 |       currentElement instanceof HTMLTemplateElement &&
125 |       currentElement.hasAttribute("data-shadowroot")
126 |     ) {
127 |       const shadowRoot = applyDeclarativeShadowDom(currentElement);
128 |       createShadowRootTreeNode({
129 |         domNode: shadowRoot,
130 |         label,
131 |       });
132 | 
133 |       remainingElements.push(...Array.from(shadowRoot.children));
134 |     } else {
135 |       createElementTreeNode({
136 |         domNode: currentElement,
137 |         label,
138 |       });
139 | 
140 |       remainingElements.push(...Array.from(currentElement.children));
141 |     }
142 |   }
143 | 
144 |   const targetTreeNodes = [...nodes.values()].filter(
145 |     (treeNode) => treeNode.type === TreeNodeType.Element && treeNode.domNode.hasAttribute("target")
146 |   );
147 |   if (targetTreeNodes.length !== 1) {
148 |     throw new Error(
149 |       `Invalid tree. Expected 1 element to have the "target" attribute, but found ${targetTreeNodes.length} elements.`
150 |     );
151 |   }
152 | 
153 |   return {
154 |     root: rootTreeNode,
155 |     target: targetTreeNodes[0],
156 |     nodes,
157 |     getTreeNodeById(id: TreeNodeId): TreeNode | undefined {
158 |       return nodes.find((treeNode) => treeNode.id === id);
159 |     },
160 |     getTreeNodeByDomNode(domNode: Node): TreeNode | undefined {
161 |       return nodes.find((treeNode) => treeNode.domNode === domNode);
162 |     },
163 |   };
164 | }
165 | 
166 | export function simulateDispatchEvent(config: {
167 |   tree: DomTree;
168 |   eventConfig: EventInit;
169 | }): EventDispatchingStep[] {
170 |   const { tree, eventConfig } = config;
171 | 
172 |   const steps: EventDispatchingStep[] = [];
173 | 
174 |   function handler(event: Event) {
175 |     steps.push({
176 |       target: tree.getTreeNodeByDomNode(event.target as Node)!,
177 |       currentTarget: tree.getTreeNodeByDomNode(event.currentTarget as Node)!,
178 |       composedPath: event
179 |         .composedPath()
180 |         .map((evtTarget) => tree.getTreeNodeByDomNode(evtTarget as Node)!),
181 |     });
182 |   }
183 | 
184 |   // Add event listener
185 |   for (const treeNode of tree.nodes.values()) {
186 |     treeNode.domNode.addEventListener(EVENT_NAME, handler);
187 |   }
188 | 
189 |   // Dispatch event
190 |   const event = new CustomEvent(EVENT_NAME, eventConfig);
191 |   tree.target.domNode.dispatchEvent(event);
192 | 
193 |   // Clean up event listener post dispatch
194 |   for (const node of tree.nodes.values()) {
195 |     node.domNode.removeEventListener(EVENT_NAME, handler);
196 |   }
197 | 
198 |   return steps;
199 | }
200 | 


--------------------------------------------------------------------------------
/src/event-visualizer.ts:
--------------------------------------------------------------------------------
  1 | import { LitElement, html, css, PropertyValues } from "lit";
  2 | import { customElement, property } from "lit/decorators.js";
  3 | 
  4 | import "./event-graph.js";
  5 | import "./event-steps.js";
  6 | import { StepChangeEvent } from "./event-steps";
  7 | import { createDomTree, DomTree, EventDispatchingStep, simulateDispatchEvent } from "./dom.js";
  8 | 
  9 | import { boxArrowUp } from "./utils/icons.js";
 10 | import { openInCodePen } from "./utils/codepen.js";
 11 | 
 12 | @customElement("event-visualizer")
 13 | export default class EventVisualizer extends LitElement {
 14 |   @property({
 15 |     attribute: "label",
 16 |     type: String,
 17 |   })
 18 |   label = "Event propagation";
 19 | 
 20 |   @property({
 21 |     attribute: "event-bubbles",
 22 |     reflect: true,
 23 |     type: Boolean,
 24 |   })
 25 |   eventBubbles = false;
 26 | 
 27 |   @property({
 28 |     attribute: "event-composed",
 29 |     reflect: true,
 30 |     type: Boolean,
 31 |   })
 32 |   eventComposed = false;
 33 | 
 34 |   @property() protected tree?: DomTree;
 35 |   @property() protected steps: EventDispatchingStep[] = [];
 36 |   @property() protected activeStep: number = 0;
 37 | 
 38 |   protected handleTreeChange() {
 39 |     this.computeTree();
 40 |     this.computeEventDispatchingStep();
 41 |   }
 42 | 
 43 |   protected computeTree() {
 44 |     const template = this.querySelector("template");
 45 | 
 46 |     if (template) {
 47 |       try {
 48 |         this.tree = createDomTree(template);
 49 |       } catch (error) {
 50 |         console.warn(`Invalid event tree: ${error.message}`);
 51 |       }
 52 |     }
 53 |   }
 54 | 
 55 |   protected computeEventDispatchingStep() {
 56 |     const { tree } = this;
 57 | 
 58 |     if (!tree) {
 59 |       return;
 60 |     }
 61 | 
 62 |     const steps = simulateDispatchEvent({
 63 |       tree,
 64 |       eventConfig: {
 65 |         bubbles: this.eventBubbles,
 66 |         composed: this.eventComposed,
 67 |       },
 68 |     });
 69 | 
 70 |     this.steps = steps;
 71 |     this.activeStep = 0;
 72 |   }
 73 | 
 74 |   protected updated(props: PropertyValues) {
 75 |     if (props.has("eventComposed") || props.has("eventBubbles")) {
 76 |       this.computeEventDispatchingStep();
 77 |     }
 78 |   }
 79 | 
 80 |   protected handleEditClick(evt: Event) {
 81 |     evt.preventDefault();
 82 |     openInCodePen(this);
 83 |   }
 84 | 
 85 |   protected render() {
 86 |     return html`
 87 |       <div class="header">
 88 |         <div class="header__left">
 89 |           <div class="label">${this.label}</div>
 90 |           <a href="#" @click=${this.handleEditClick}> ${boxArrowUp()} Edit </a>
 91 |         </div>
 92 | 
 93 |         <div class="event-config">
 94 |           <div class="event-config__option">
 95 |             <input
 96 |               id="bubbles"
 97 |               type="checkbox"
 98 |               .checked=${this.eventBubbles}
 99 |               @change=${(evt: Event) =>
100 |                 (this.eventBubbles = (evt.target as HTMLInputElement).checked)}
101 |             />
102 |             <label for="bubbles">bubbles</label>
103 |           </div>
104 | 
105 |           <div class="event-config__option">
106 |             <input
107 |               id="composed"
108 |               type="checkbox"
109 |               .checked=${this.eventComposed}
110 |               @change=${(evt: Event) =>
111 |                 (this.eventComposed = (evt.target as HTMLInputElement).checked)}
112 |             />
113 |             <label for="composed">composed</label>
114 |           </div>
115 |         </div>
116 |       </div>
117 | 
118 |       <div class="main">
119 |         <event-graph
120 |           .tree=${this.tree}
121 |           .steps=${this.steps}
122 |           .activeStep=${this.activeStep}
123 |         ></event-graph>
124 | 
125 |         <event-steps
126 |           .steps=${this.steps}
127 |           .activeStep=${this.activeStep}
128 |           .eventConfig=${{ bubbles: this.eventBubbles, composed: this.eventComposed }}
129 |           @stepchange=${(evt: StepChangeEvent) => (this.activeStep = evt.detail.step)}
130 |         ></event-steps>
131 |       </div>
132 | 
133 |       <slot @slotchange=${this.handleTreeChange}></slot>
134 |     `;
135 |   }
136 | 
137 |   static styles = css`
138 |     :host {
139 |       --font-family: Helvetica, Arial, Sans-Serif;
140 |       --color: #212121;
141 |       --color-light: #64748b;
142 |       --background-color: #fff;
143 | 
144 |       --border-style: 1px solid #cdced0;
145 |       --border-radius: 3px;
146 | 
147 |       --spacing-small: 6px;
148 |       --spacing-medium: 12px;
149 | 
150 |       --target-color: #b39ddb;
151 |       --target-alt-color: #5e35b1;
152 |       --current-target-color: #a5d6a7;
153 |       --current-target-alt-color: #2e7d32;
154 |       --composed-path-color: #fde68a;
155 |       --composed-path-alt-color: #ff6f00;
156 |     }
157 | 
158 |     :host {
159 |       all: initial;
160 | 
161 |       font-family: var(--font-family);
162 |       color: var(--color);
163 |       background-color: var(--background-color);
164 | 
165 |       border: var(--border-style);
166 |       border-radius: var(--border-radius);
167 | 
168 |       display: flex;
169 |       flex-direction: column;
170 |     }
171 | 
172 |     .main {
173 |       display: flex;
174 |       flex-direction: column;
175 |     }
176 | 
177 |     event-graph {
178 |       flex-grow: 1;
179 |       align-self: stretch;
180 |     }
181 | 
182 |     event-steps {
183 |       padding: var(--spacing-medium);
184 |     }
185 | 
186 |     @media (min-width: 680px) {
187 |       .main {
188 |         flex-direction: row;
189 |       }
190 | 
191 |       event-steps {
192 |         max-width: 400px;
193 |       }
194 |     }
195 | 
196 |     .header {
197 |       display: flex;
198 |       border-bottom: var(--border-style);
199 |       padding: var(--spacing-medium);
200 |     }
201 | 
202 |     .header .header__left {
203 |       flex-grow: 1;
204 |       margin-right: var(--spacing-medium);
205 |     }
206 | 
207 |     .header .label {
208 |       font-weight: 600;
209 |       margin-bottom: 3px;
210 |     }
211 | 
212 |     .header a {
213 |       color: var(--color-light);
214 |       text-decoration: none;
215 |     }
216 | 
217 |     .event-config {
218 |       color: var(--color-light);
219 |     }
220 | 
221 |     .event-config__option {
222 |       display: flex;
223 |       align-items: baseline;
224 |     }
225 |   `;
226 | }
227 | 


--------------------------------------------------------------------------------
/src/event-steps.ts:
--------------------------------------------------------------------------------
  1 | import { LitElement, html, css } from "lit";
  2 | import { classMap } from "lit/directives/class-map.js";
  3 | import { customElement, property } from "lit/decorators.js";
  4 | 
  5 | import { EventDispatchingStep, TreeNode, TreeNodeType } from "./dom.js";
  6 | 
  7 | export type StepChangeEvent = CustomEvent<{ step: number }>;
  8 | 
  9 | function getNodeLabel(treeNode: TreeNode): string {
 10 |   if (treeNode.type === TreeNodeType.Element) {
 11 |     return `${treeNode.name}${treeNode.label ? `#${treeNode.label}` : ""}`;
 12 |   } else {
 13 |     return `[shadow-root${treeNode.label ? `#${treeNode.label}` : ""}]`;
 14 |   }
 15 | }
 16 | 
 17 | @customElement("event-steps")
 18 | export class EventSteps extends LitElement {
 19 |   @property() steps: EventDispatchingStep[] = [];
 20 |   @property() activeStep: number = 0;
 21 |   @property() eventConfig!: EventInit;
 22 | 
 23 |   protected dispatchStepChange(step: number) {
 24 |     const changeStepEvent: StepChangeEvent = new CustomEvent("stepchange", {
 25 |       detail: { step },
 26 |     });
 27 | 
 28 |     this.dispatchEvent(changeStepEvent);
 29 |   }
 30 | 
 31 |   protected handleListKey(evt: KeyboardEvent) {
 32 |     if (evt.code === "Enter" || evt.code === "Space") {
 33 |       const { step } = (evt.target as HTMLElement).dataset;
 34 |       if (!step) {
 35 |         return;
 36 |       }
 37 | 
 38 |       evt.preventDefault();
 39 |       this.dispatchStepChange(parseInt(step));
 40 |     }
 41 |   }
 42 | 
 43 |   render() {
 44 |     const { steps, activeStep, eventConfig } = this;
 45 | 
 46 |     const items = steps.map((step, i) => {
 47 |       let content;
 48 |       let previousStep: EventDispatchingStep | undefined;
 49 | 
 50 |       const { currentTarget, target, composedPath } = steps[activeStep];
 51 | 
 52 |       if (i === 0) {
 53 |         content = html`
 54 |           <p>
 55 |             Dispatching a ${eventConfig.bubbles ? "" : "non-"}bubbling and
 56 |             ${eventConfig.composed ? "" : "non-"}composed event on
 57 |             <b class=${classMap({ "current-target": currentTarget === step.currentTarget })}
 58 |               >${getNodeLabel(step.currentTarget)}.</b
 59 |             >
 60 |           </p>
 61 |         `;
 62 |       } else {
 63 |         content = html`<p>
 64 |           Event propagates to
 65 |           <b class=${classMap({ "current-target": currentTarget === step.currentTarget })}
 66 |             >${getNodeLabel(step.currentTarget)}</b
 67 |           >.
 68 |         </p>`;
 69 |         previousStep = steps[i - 1];
 70 |       }
 71 | 
 72 |       const isEventTargetUpdated = step.target !== previousStep?.target;
 73 |       if (isEventTargetUpdated) {
 74 |         content = html`
 75 |           ${content}
 76 |           <p>
 77 |             Target updated to
 78 |             <b class=${classMap({ target: target === step.target })}>${getNodeLabel(step.target)}</b
 79 |             >.
 80 |           </p>
 81 |         `;
 82 |       }
 83 | 
 84 |       const isComposedPathUpdated =
 85 |         step.composedPath.length !== previousStep?.composedPath.length ||
 86 |         step.composedPath.some((target, i) => target !== previousStep?.composedPath[i]);
 87 |       const isActiveComposedPath =
 88 |         composedPath.length === step.composedPath.length &&
 89 |         composedPath.every((target, i) => target === step.composedPath[i]);
 90 |       if (isComposedPathUpdated) {
 91 |         content = html`
 92 |           ${content}
 93 |           <p>
 94 |             Composed path updated to
 95 |             <b class=${classMap({ "composed-path": isActiveComposedPath })}
 96 |               >[${step.composedPath.map((eventTarget) => getNodeLabel(eventTarget)).join(", ")}]</b
 97 |             >.
 98 |           </p>
 99 |         `;
100 |       }
101 | 
102 |       const isActive = i === activeStep;
103 | 
104 |       return html`<li
105 |         class="step ${classMap({ active: isActive })}"
106 |         tabindex="0"
107 |         aria-selected="${String(isActive)}"
108 |         @click=${() => this.dispatchStepChange(i)}
109 |         data-step="${i}"
110 |       >
111 |         <div class="counter">${i + 1}</div>
112 |         <div class="description">${content}</div>
113 |       </li>`;
114 |     });
115 | 
116 |     return html`
117 |       <div class="step-controls">
118 |         <button
119 |           ?disabled=${activeStep === 0}
120 |           @click=${() => this.dispatchStepChange(activeStep - 1)}
121 |         >
122 |           <b>❬</b> Previous step
123 |         </button>
124 |         <button
125 |           ?disabled=${activeStep === steps.length - 1}
126 |           @click=${() => this.dispatchStepChange(activeStep + 1)}
127 |         >
128 |           Next step <b>❭</b>
129 |         </button>
130 |       </div>
131 | 
132 |       <ol @keydown=${this.handleListKey}>
133 |         ${items}
134 |       </ol>
135 |     `;
136 |   }
137 | 
138 |   static styles = css`
139 |     :host {
140 |       display: block;
141 | 
142 |       --button-color: #3b82f6;
143 |       --button-hover: #2b6cb0;
144 | 
145 |       --step-active-background: #f3f4f6;
146 | 
147 |       --step-counter-background: #9ca3af;
148 |       --step-counter-active-background: #3b82f6;
149 |     }
150 | 
151 |     ol,
152 |     li {
153 |       list-style: none;
154 |       padding: 0;
155 |       margin: 0;
156 |     }
157 | 
158 |     /* Reset */
159 |     button {
160 |       font-family: inherit;
161 |       font-size: inherit;
162 |       margin: 0;
163 |       padding: 0;
164 |       background-color: transparent;
165 |       background-image: none;
166 |       border: none;
167 |       cursor: pointer;
168 |     }
169 | 
170 |     button {
171 |       padding: 0.5rem 1rem;
172 |       color: #fff;
173 |       background: var(--button-color);
174 |       border-radius: var(--border-radius);
175 |     }
176 | 
177 |     button:hover {
178 |       background: var(--button-hover);
179 |     }
180 | 
181 |     button[disabled] {
182 |       background: var(--button-color);
183 |       opacity: 0.5;
184 |     }
185 | 
186 |     .step-controls {
187 |       display: flex;
188 |       justify-content: space-between;
189 |       gap: var(--spacing-medium);
190 |       margin-bottom: var(--spacing-medium);
191 |     }
192 | 
193 |     .steps-controls button {
194 |       display: block;
195 |     }
196 | 
197 |     .step {
198 |       padding: var(--spacing-medium);
199 |       display: flex;
200 |       align-items: center;
201 |       cursor: pointer;
202 |     }
203 | 
204 |     .step .counter {
205 |       margin: 0 1em;
206 |       border-radius: 1em;
207 |       line-height: 2em;
208 |       width: 2em;
209 |       min-width: 2em;
210 |       font-weight: 600;
211 |       text-align: center;
212 |       color: #fff;
213 |       background: var(--step-counter-background);
214 |     }
215 | 
216 |     .description {
217 |       line-height: 1.3em;
218 |       flex-grow: 1;
219 |     }
220 | 
221 |     .description p {
222 |       margin: 0.3em;
223 |     }
224 | 
225 |     .description .current-target {
226 |       color: var(--current-target-alt-color);
227 |     }
228 | 
229 |     .description .target {
230 |       color: var(--target-alt-color);
231 |     }
232 | 
233 |     .description .composed-path {
234 |       color: var(--composed-path-alt-color);
235 |     }
236 | 
237 |     /* Step variant */
238 | 
239 |     .step.active,
240 |     .step:hover,
241 |     .step:focus {
242 |       background: var(--step-active-background);
243 |     }
244 | 
245 |     .step.active .counter {
246 |       background: var(--step-counter-active-background);
247 |     }
248 | 
249 |     .step.active .description {
250 |       color: var(--color);
251 |     }
252 |   `;
253 | }
254 | 


--------------------------------------------------------------------------------