Add listener in capture phase and locate nearest source if needed

1. Capture Phase listener allows the plugin to work for the cases where stopPropagation is done in bubble phase.
2. Looking for nearest parent element with dataset source handles the case when the element directly doesn't have dataset source. This hhappens if the element is not created through JSX e.g. Chakra UI ModalCloseButton. Basically any component coming through an npm dependency should have this problem. See https://codesandbox.io/s/suspicious-breeze-smdrq?file=/src/index.js

packages/babel-plugin-open-source/script.js

@@ -1,10 +1,25 @@
-if (typeof document !== 'undefined') {
-  document.addEventListener('click', (event) => {
-    if (!event.target.dataset.source) return;
-    if (!event.altKey) return;
+(function () {
+
+  // Element being clicked might not have the dataset source on it directly.
+  // Get the nearest available in the tree
+  // e.g. this happens for Chakra UI Components.
+  function getSource(element) {
+    while (element && !element.dataset.source) {
+      element = element.parentElement;
+    }
 
-    event.preventDefault();
-    const { filename, start } = JSON.parse(event.target.dataset.source)
-    window.open('vscode://file/' + filename + ':' + start)
-  })
-}
+    return element.dataset.source;
+  }
+
+  if (typeof document !== 'undefined') {
+    document.addEventListener('click', (event) => {
+      let source = getSource(event.target)
+      if (!source) return;
+      if (!event.altKey) return;
+
+      event.preventDefault();
+      const { filename, start } = JSON.parse(source)
+      window.open('vscode://file/' + filename + ':' + start)
+    }, true)
+  }
+})();