fix: Fix nested clickable event propagation & misc. code cleanup (#10)

* Upgrade deps. & remove vulnerability warnings

* Wrap leftover bridge calls in decorator function

* Modify linting rules

* fix: properly handle nested interactable elements

.eslintrc.json

@@ -17,13 +17,13 @@
             "semi": false,
             "printWidth": 80,
             "singleQuote": true,
-            "trailingComma": "es5"
+            "trailingComma": "none"
         }],
         "indent": "off",
         "semi": ["error", "never"],
         "comma-dangle": ["error", {
-            "arrays": "always-multiline",
-            "objects": "always-multiline",
+            "arrays": "never",
+            "objects": "never",
             "imports": "never",
             "exports": "never",
             "functions": "never"

.prettierrc

@@ -1,5 +1,5 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "es5"
+  "trailingComma": "es6"
 }

package.json

@@ -35,7 +35,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "standard-version": "^8.0.0",
+    "standard-version": "^9.3.2",
     "webpack": "^5.24.4",
     "webpack-cli": "^4.5.0"
   },

src/bridge/api.js

@@ -12,34 +12,30 @@ const fireAction = (action) => {
 }
 
 bridge.navigateToDoc = (path) => {
-  window.ReactNativeWebView.postMessage(
-    JSON.stringify({
-      type: 'navigate',
-      payload: {
-        to: 'document',
-        path,
-      },
-    })
-  )
+  fireAction({
+    type: 'navigate',
+    payload: {
+      to: 'document',
+      path
+    }
+  })
 }
 
 bridge.navigateExternally = (url) => {
-  window.ReactNativeWebView.postMessage(
-    JSON.stringify({
-      type: 'navigate',
-      payload: {
-        to: 'external',
-        url,
-      },
-    })
-  )
+  fireAction({
+    type: 'navigate',
+    payload: {
+      to: 'external',
+      url
+    }
+  })
 }
 
 bridge.shareDoc = (spec) => {
   validateBeforeCall(schemaIds.shareDoc, spec, v, () =>
     fireAction({
       type: 'shareDoc',
-      payload: spec,
+      payload: spec
     })
   )
 }
@@ -48,7 +44,7 @@ bridge.propagateDocumentMetadata = (spec) => {
   validateBeforeCall(schemaIds.shareDoc, spec, v, () =>
     fireAction({
       type: 'propagateDocumentMetadata',
-      payload: spec,
+      payload: spec
     })
   )
 }

src/bridge/index.js

@@ -18,6 +18,9 @@ const applyLinkingListener = () => {
   document.addEventListener(
     'click',
     (e) => {
+      // if something else decides that the default events should be prevented
+      // we take it into consideration
+      if (e.defaultPrevented) return
       const element = e.target.closest('a')
       element &&
         element.addEventListener('click', userActionHandler, { once: true })
@@ -47,13 +50,13 @@ const extractDocMetadata = () => {
     getElementContentByPropSelector({
       element: 'meta',
       prop: 'name',
-      value: 'description',
+      value: 'description'
     }) || ''
   const cannonicalUrl = getElementContentByPropSelector({
     element: 'link',
     prop: 'rel',
     value: 'canonical',
-    attribute: 'href',
+    attribute: 'href'
   })
   const url = cannonicalUrl || document.location.href
 
@@ -63,7 +66,7 @@ const extractDocMetadata = () => {
     getAllElementsByPropSelector({
       element: 'meta',
       prop: 'property',
-      value: 'og:',
+      value: 'og:'
     })
   )
   const hasOpenGraph = openGraphData.length
@@ -76,15 +79,15 @@ const extractDocMetadata = () => {
         const content = item.getAttribute('content')
         graphData = {
           ...graphData,
-          [`${property.replace('og:', '')}`]: content,
+          [`${property.replace('og:', '')}`]: content
         }
       }
     })
     const { title, description, url } = graphData
     const openGraphMetadata = filterObjectFromNullValues({
       title,
       text: description,
-      url,
+      url
     })
     metadata = { ...metadata, ...openGraphMetadata }
   }
@@ -94,15 +97,15 @@ const extractDocMetadata = () => {
     element: 'script',
     prop: 'type',
     value: 'application/ld+json',
-    innerHtml: true,
+    innerHtml: true
   })
   if (LDJson) {
     const documentMeta = JSON.parse(LDJson)
     const { headline, description, mainEntityOfPage } = documentMeta
     const ldJsonMetadata = filterObjectFromNullValues({
       title: headline,
       text: description,
-      url: mainEntityOfPage ? mainEntityOfPage['@id'] : null,
+      url: mainEntityOfPage ? mainEntityOfPage['@id'] : null
     })
     metadata = { ...metadata, ...ldJsonMetadata }
   }
@@ -128,6 +131,9 @@ const actionFromElementLinkType = (element) => {
 }
 
 const userActionHandler = (event) => {
+  // if default event was prevented, return early
+  // something else handles it and no navigation should be performed
+  if (event.defaultPrevented) return
   event.preventDefault()
   const element = event.target.closest('a')
   const actionObject = actionFromElementLinkType(element)

src/bridge/util.js

@@ -3,7 +3,7 @@ const getElementContentByPropSelector = ({
   prop,
   value,
   innerHtml = false,
-  attribute = 'content',
+  attribute = 'content'
 }) => {
   // Content is sometimes inside the tag as an attribute, or between the tag as inner content
   return innerHtml

src/schema/index.js

@@ -6,7 +6,7 @@ const buildAjv = () => {
     verbose: true,
     useDefaults: true,
     allErrors: true,
-    jsonPointers: true,
+    jsonPointers: true
   })
   validator.addSchema([shareDoc])
   validator.addFormat('parametrized-text', /.*/)
@@ -27,7 +27,7 @@ const parseErrors = (schema, spec, errors) => {
 }
 
 export const schemaIds = {
-  shareDoc: shareDoc.$id,
+  shareDoc: shareDoc.$id
 }
 
 export default buildAjv

webpack.config.js

@@ -6,25 +6,25 @@ module.exports = {
   output: {
     library: {
       name: libraryName,
-      type: 'window',
+      type: 'window'
     },
     libraryTarget: 'umd',
     umdNamedDefine: true,
     filename: outputFile,
     globalObject: 'typeof window !== undefined ? window : this',
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, 'dist')
   },
   module: {
     rules: [
       {
         test: /\.js?$/,
         exclude: /(node_modules)/,
-        use: 'babel-loader',
-      },
-    ],
+        use: 'babel-loader'
+      }
+    ]
   },
   resolve: {
-    extensions: ['.js'],
+    extensions: ['.js']
   },
-  devtool: 'source-map',
+  devtool: 'source-map'
 }