From f667d42e0606efaf9c5ce34003aa9775c7f4f580 Mon Sep 17 00:00:00 2001
From: Matej Lednicky <matej@lednicky.name>
Date: Wed, 6 Dec 2023 16:21:02 +0100
Subject: [PATCH] feat(TU-3717): Expose method to fetch form details in
 callback (#4)

---
 README.md                          | 51 ++++++++++++++++++++----------
 demo/embed.html                    | 17 ++--------
 demo/iframe-html.html              | 12 ++++---
 demo/iframe-js.html                | 11 +++++--
 demo/popup-html.html               | 21 ++++++++----
 demo/popup-js.html                 | 11 +++++--
 package.json                       |  3 +-
 src/lib/fetch-form-details.test.ts | 43 +++++++++++++++++++++++++
 src/lib/fetch-form-details.ts      | 21 ++++++++++++
 src/lib/open.ts                    |  6 ++--
 yarn.lock                          | 45 ++++++++++++++++++++++++++
 11 files changed, 191 insertions(+), 50 deletions(-)
 create mode 100644 src/lib/fetch-form-details.test.ts
 create mode 100644 src/lib/fetch-form-details.ts

diff --git a/README.md b/README.md
index 7c9a9e0..5fecad0 100644
--- a/README.md
+++ b/README.md
@@ -89,23 +89,23 @@ window.tfEmbedAdmin.setDefaultConfiguration({
 
 When using HTML API you don't need to call this method separately. You need to specify config options on the button itself.
 
-### selectForm({ callback})
+### selectForm({ callback })
 
 Open embed admin to select form or create a new one.
 
 It accepts an object with the following props:
 
-| name     | type                                                    | description                                                       |
-| -------- | ------------------------------------------------------- | ----------------------------------------------------------------- |
-| callback | `(payload: { action: string, formId: string }) => void` | Method to be called when a form is selected in Typeform Admin UI. |
-| type     | `"iframe" \| "popup"`                                   | Optional. See `setDefaultConfiguration` above.                    |
-| appName  | `string`                                                | Optional. See `setDefaultConfiguration` above.                    |
+| name     | type                                                                                         | description                                                       |
+| -------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
+| callback | `(payload: { action: string, formId: string, fetchFormDetails: () => Promise<{}> }) => void` | Method to be called when a form is selected in Typeform Admin UI. |
+| type     | `"iframe" \| "popup"`                                                                        | Optional. See `setDefaultConfiguration` above.                    |
+| appName  | `string`                                                                                     | Optional. See `setDefaultConfiguration` above.                    |
 
 Example with JavaScript:
 
 ```javascript
 window.tfEmbedAdmin.selectForm({
-  callback: ({ action, formId }) => console.log(`you just selected form id: ${formId}`),
+  callback: ({ action, formId, fetchFormDetails }) => console.log(`you just selected form id: ${formId}`),
 })
 ```
 
@@ -121,7 +121,7 @@ Or with HTML API:
   select typeform
 </button>
 <script>
-  function embedAdminCallback({ action }) {
+  function embedAdminCallback({ action, formId, fetchFormDetails }) {
     // callback function needs to be available on global scope (window)
   }
 </script>
@@ -133,19 +133,19 @@ Open embed admin to edit a specific form.
 
 It accepts an object with the following props:
 
-| name     | type                                                    | description                                                     |
-| -------- | ------------------------------------------------------- | --------------------------------------------------------------- |
-| formId   | `string`                                                | ID of the typeform to edit                                      |
-| callback | `(payload: { action: string, formId: string }) => void` | Method to be called when a form is edited in Typeform Admin UI. |
-| type     | `"iframe" \| "popup"`                                   | Optional. See `setDefaultConfiguration` above.                  |
-| appName  | `string`                                                | Optional. See `setDefaultConfiguration` above.                  |
+| name     | type                                                                                         | description                                                     |
+| -------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
+| formId   | `string`                                                                                     | ID of the typeform to edit                                      |
+| callback | `(payload: { action: string, formId: string, fetchFormDetails: () => Promise<{}> }) => void` | Method to be called when a form is edited in Typeform Admin UI. |
+| type     | `"iframe" \| "popup"`                                                                        | Optional. See `setDefaultConfiguration` above.                  |
+| appName  | `string`                                                                                     | Optional. See `setDefaultConfiguration` above.                  |
 
 Example with JavaScript:
 
 ```javascript
 window.tfEmbedAdmin.editForm({
   formId: myTypeformId,
-  callback: ({ action, formId }) => console.log(`you just edited form id: ${formId}`),
+  callback: ({ action, formId, fetchFormDetails }) => console.log(`you just edited form id: ${formId}`),
 })
 ```
 
@@ -161,12 +161,27 @@ Or with HTML API:
   edit typeform
 </button>
 <script>
-  function embedAdminCallback({ action, formId }) {
+  function embedAdminCallback({ action, formId, fetchFormDetails }) {
     // callback function needs to be available on global scope (window)
   }
 </script>
 ```
 
+### fetchFormDetails()
+
+The callback receives `fetchFormDetails` async method in the payload. You can use this method to fetch details about currently selected / edited form. It returns `title`, `url` and `imageUrl` of the meta image.
+
+Usage:
+
+```javascript
+window.tfEmbedAdmin.selectForm({
+  callback: async ({ action, formId, fetchFormDetails }) => {
+    const { title, url } = await fetchFormDetails()
+    console.log(`You selected form named ${title}. You can visit it at ${url}.`)
+  },
+})
+```
+
 ## Demo
 
 Run:
@@ -175,10 +190,12 @@ Run:
 yarn start
 ```
 
-Demo implementation of the library will be served at http://localhost:9090
+Demo implementation of the library will be served at http://localhost:1337
 
 Or [open the demo in CodeSandbox](https://codesandbox.io/s/github/Typeform/button), directly in your browser.
 
+_Note:_ Examples with iframe only work on localhost.
+
 ## Development
 
 Requirements:
diff --git a/demo/embed.html b/demo/embed.html
index 3ff8780..15cd901 100644
--- a/demo/embed.html
+++ b/demo/embed.html
@@ -47,21 +47,10 @@ <h1>Typeform Button Demo - with Embed SDK</h1>
     <script>
       window.tfEmbedAdmin.setDefaultConfiguration({ type: 'iframe', appName: 'embed-demo-app' })
 
-      const fetchTypeformDetails = async (formId) => {
-        const result = await fetch(
-          `https://form.typeform.com/oembed?url=${encodeURIComponent(`https://form.typeform.com/to/${formId}`)}`,
-        )
-        if (!result.ok) {
-          return {}
-        }
-        const data = await result.json()
-        const { title, author_url: url, thumbnail_url: image } = data || {}
-        return { title, url, image: image?.href ?? image }
-      }
-      const onSelect = async ({ action, formId }) => {
+      const onSelect = async ({ action, formId, fetchFormDetails }) => {
         console.log('selected form:', formId)
 
-        const { title, image } = await fetchTypeformDetails(formId)
+        const { title, imageUrl } = await fetchFormDetails()
 
         const container = document.createElement('li')
 
@@ -70,7 +59,7 @@ <h1>Typeform Button Demo - with Embed SDK</h1>
         container.append(heading)
 
         const thumbnail = document.createElement('img')
-        thumbnail.src = image
+        thumbnail.src = imageUrl
         container.append(thumbnail)
 
         const viewButton = document.createElement('button')
diff --git a/demo/iframe-html.html b/demo/iframe-html.html
index 2f954ed..11cbc3d 100644
--- a/demo/iframe-html.html
+++ b/demo/iframe-html.html
@@ -21,13 +21,17 @@ <h1>Typeform Button Demo - Iframe HTML</h1>
       function handleClick() {
         console.log('select button clicked')
       }
-      function handleEdit({ action, formId }) {
-        console.log(`form ${formId} was edited`)
+      async function handleEdit({ action, formId, fetchFormDetails }) {
+        const { title } = await fetchFormDetails()
+        console.log(`form ${title} (${formId}) was edited`)
       }
-      function handleSelect({ action, formId }) {
+      async function handleSelect({ action, formId, fetchFormDetails }) {
+        const id = `form-${Date.now()}`
+        document.querySelector('#typeforms').innerHTML += `<li id="${id}">loading...</li>`
+        const { title } = await fetchFormDetails()
         console.log(action, formId)
         const editButton = `<button data-tf-embed-admin-edit="${formId}" data-tf-embed-admin-type="iframe" data-tf-embed-admin-callback="handleEdit">edit</button>`
-        document.querySelector('#typeforms').innerHTML += `<li>${formId} ${editButton}</li>`
+        document.querySelector(`#${id}`).innerHTML = `${title} (${formId}) ${editButton}`
         window.tfEmbedAdmin.load()
       }
     </script>
diff --git a/demo/iframe-js.html b/demo/iframe-js.html
index 8b054b2..9c19c67 100644
--- a/demo/iframe-js.html
+++ b/demo/iframe-js.html
@@ -11,16 +11,18 @@ <h1>Typeform Button Demo - Iframe JS</h1>
     <script>
       window.tfEmbedAdmin.setDefaultConfiguration({ type: 'iframe' })
 
-      const callback = ({ action, formId }) => {
+      const callback = async ({ action, formId, fetchFormDetails }) => {
         if (action === 'edit') {
-          console.log(`form ${formId} was edited`)
+          const { title } = await fetchFormDetails()
+          console.log(`form ${title} (${formId}) was edited`)
           return
         }
 
         console.log('selected form:', formId)
 
         const li = document.createElement('li')
-        li.innerText = `Form: ${formId}`
+        li.id = `form-${Date.now()}`
+        li.innerHTML = `Form: <span>....</span> (${formId})`
 
         const button = document.createElement('button')
         button.onclick = () => editTypeform(formId)
@@ -28,6 +30,9 @@ <h1>Typeform Button Demo - Iframe JS</h1>
         li.append(button)
 
         document.querySelector('#typeforms').append(li)
+
+        const { title } = await fetchFormDetails()
+        li.querySelector('span').innerText = title
       }
       const selectTypeform = () => {
         window.tfEmbedAdmin.selectForm({ callback })
diff --git a/demo/popup-html.html b/demo/popup-html.html
index 54338ac..894c58a 100644
--- a/demo/popup-html.html
+++ b/demo/popup-html.html
@@ -7,17 +7,26 @@
   </head>
   <body>
     <h1>Typeform Button Demo - Popup HTML</h1>
-    <button data-tf-embed-admin-select data-tf-embed-admin-callback="handleSelect">select typeform</button>
+    <button data-tf-embed-admin-select data-tf-embed-admin-callback="handleSelect" onclick="handleClick()">
+      select typeform
+    </button>
     <ul id="typeforms"></ul>
     <script src="dist/button.js"></script>
     <script>
-      function handleEdit({ action, formId }) {
-        console.log(`form ${formId} was edited`)
+      function handleClick() {
+        console.log('select button clicked')
       }
-      function handleSelect({ action, formId }) {
+      async function handleEdit({ action, formId, fetchFormDetails }) {
+        const { title } = await fetchFormDetails()
+        console.log(`form ${title} (${formId}) was edited`)
+      }
+      async function handleSelect({ action, formId, fetchFormDetails }) {
+        const id = `form-${Date.now()}`
+        document.querySelector('#typeforms').innerHTML += `<li id="${id}">loading...</li>`
+        const { title } = await fetchFormDetails()
         console.log(action, formId)
-        const editButton = `<button data-tf-embed-admin-edit="${formId}" data-tf-embed-admin-callback="handleEdit">edit</button>`
-        document.querySelector('#typeforms').innerHTML += `<li>${formId} ${editButton}</li>`
+        const editButton = `<button data-tf-embed-admin-edit="${formId}" data-tf-embed-admin-type="iframe" data-tf-embed-admin-callback="handleEdit">edit</button>`
+        document.querySelector(`#${id}`).innerHTML = `${title} (${formId}) ${editButton}`
         window.tfEmbedAdmin.load()
       }
     </script>
diff --git a/demo/popup-js.html b/demo/popup-js.html
index 8c839d2..8f99de4 100644
--- a/demo/popup-js.html
+++ b/demo/popup-js.html
@@ -9,16 +9,18 @@
     <h1>Typeform Button Demo - Popup JS</h1>
     <script src="dist/button.js"></script>
     <script>
-      const callback = ({ action, formId }) => {
+      const callback = async ({ action, formId, fetchFormDetails }) => {
         if (action === 'edit') {
-          console.log(`form ${formId} was edited`)
+          const { title } = await fetchFormDetails()
+          console.log(`form ${title} (${formId}) was edited`)
           return
         }
 
         console.log('selected form:', formId)
 
         const li = document.createElement('li')
-        li.innerText = `Form: ${formId}`
+        li.id = `form-${Date.now()}`
+        li.innerHTML = `Form: <span>....</span> (${formId})`
 
         const button = document.createElement('button')
         button.onclick = () => editTypeform(formId)
@@ -26,6 +28,9 @@ <h1>Typeform Button Demo - Popup JS</h1>
         li.append(button)
 
         document.querySelector('#typeforms').append(li)
+
+        const { title } = await fetchFormDetails()
+        li.querySelector('span').innerText = title
       }
       const selectTypeform = () => {
         window.tfEmbedAdmin.selectForm({ callback })
diff --git a/package.json b/package.json
index 56df131..431b9f9 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "build": "esbuild index=src/index.ts button=src/browser.ts --bundle --format=esm --minify --sourcemap",
     "watch": "yarn build --watch",
     "dist": "yarn build --outdir=dist",
-    "start": "yarn watch --serve=9090 --servedir=demo --outdir=demo/dist",
+    "start": "yarn watch --serve=1337 --servedir=demo --outdir=demo/dist",
     "lint": "eslint src --ext .js,.ts,.jsx,.tsx --max-warnings=0 && yarn prettier-check",
     "prettier-check": "prettier --check . --ignore-path .eslintignore",
     "prettier": "prettier --write . --ignore-path .eslintignore",
@@ -40,6 +40,7 @@
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
     "jsdom": "^22.1.0",
     "prettier": "^3.1.0",
     "semantic-release": "^22.0.8",
diff --git a/src/lib/fetch-form-details.test.ts b/src/lib/fetch-form-details.test.ts
new file mode 100644
index 0000000..f944cc3
--- /dev/null
+++ b/src/lib/fetch-form-details.test.ts
@@ -0,0 +1,43 @@
+import fetchMock from 'jest-fetch-mock'
+
+import { fetchFormDetails } from './fetch-form-details'
+
+fetchMock.enableMocks()
+
+describe('#fetchFormDetails', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks()
+  })
+
+  it('fetches data from oembed URL', async () => {
+    fetchMock.mockReturnValueOnce(new Promise((res) => res(new Response('{}'))))
+    await fetchFormDetails('12345')
+    expect(fetchMock).toHaveBeenCalledWith(
+      `https://form.typeform.com/oembed?url=${encodeURIComponent('https://form.typeform.com/to/12345')}`,
+    )
+  })
+
+  it('returns empty object when it fails to fetch form details', async () => {
+    fetchMock.mockReject(() => Promise.reject('error'))
+    const formDetails = await fetchFormDetails('12345')
+    expect(formDetails).toEqual({})
+  })
+
+  it('returns form details when it fetches form details', async () => {
+    const title = 'foobar'
+    const url = 'https://form.typeform.com/to/12345'
+    const imageUrl = 'https://images.typeform.com/images/abcde'
+    const oembedBodyMock = JSON.stringify({
+      title,
+      author_url: url,
+      thumbnail_url: imageUrl,
+    })
+    fetchMock.mockReturnValueOnce(new Promise((res) => res(new Response(oembedBodyMock))))
+    const formDetails = await fetchFormDetails('12345')
+    expect(formDetails).toEqual({
+      title,
+      url,
+      imageUrl,
+    })
+  })
+})
diff --git a/src/lib/fetch-form-details.ts b/src/lib/fetch-form-details.ts
new file mode 100644
index 0000000..fe4085c
--- /dev/null
+++ b/src/lib/fetch-form-details.ts
@@ -0,0 +1,21 @@
+export interface FormDetails {
+  title?: string
+  url?: string
+  imageUrl?: string
+}
+export const fetchFormDetails = async (formId: string): Promise<FormDetails> => {
+  const host = 'https://form.typeform.com'
+  const formUrl = `${host}/to/${formId}`
+
+  try {
+    const result = await fetch(`${host}/oembed?url=${encodeURIComponent(formUrl)}`)
+    if (!result.ok) {
+      return {}
+    }
+    const data = await result.json()
+    const { title, author_url: url, thumbnail_url: image } = data || {}
+    return { title, url, imageUrl: image?.href ?? image }
+  } catch (e) {
+    return {}
+  }
+}
diff --git a/src/lib/open.ts b/src/lib/open.ts
index 510d643..69d5cd8 100644
--- a/src/lib/open.ts
+++ b/src/lib/open.ts
@@ -2,10 +2,12 @@ import { getEmbedAdminDefaultAppName, getEmbedAdminUrl } from './utils'
 import { buildIframe } from './build-iframe'
 import { buildPopup } from './build-popup'
 import { addMessageHandler, EmbedAdminAction } from './add-message-handler'
+import { fetchFormDetails, FormDetails } from './fetch-form-details'
 
 export type EmbedAdminActionPayload = {
   formId: string
   action: EmbedAdminAction
+  fetchFormDetails: () => Promise<FormDetails>
 }
 
 export type EmbedAdminCallback = (payload: EmbedAdminActionPayload) => void
@@ -43,9 +45,9 @@ export const open: OpenTypeformEmbedAdmin = (config) => {
   const formId = hasFormId(config) ? config.formId : undefined
   const url = getEmbedAdminUrl(action, appName ?? getEmbedAdminDefaultAppName(), formId)
 
-  const removeMessageHandler = addMessageHandler((formId: string) => {
+  const removeMessageHandler = addMessageHandler(async (formId: string) => {
     close()
-    callback && callback({ action, formId })
+    callback && callback({ action, formId, fetchFormDetails: () => fetchFormDetails(formId) })
   })
 
   const { close } = type === 'iframe' ? buildIframe(url, removeMessageHandler) : buildPopup(url, removeMessageHandler)
diff --git a/yarn.lock b/yarn.lock
index c71230b..8aee2b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3542,6 +3542,13 @@ create-jest@^29.7.0:
     jest-util "^29.7.0"
     prompts "^2.0.1"
 
+cross-fetch@^3.0.4:
+  version "3.1.8"
+  resolved "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82"
+  integrity sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==
+  dependencies:
+    node-fetch "^2.6.12"
+
 cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -5665,6 +5672,14 @@ jest-environment-node@^29.7.0:
     jest-mock "^29.7.0"
     jest-util "^29.7.0"
 
+jest-fetch-mock@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/jest-fetch-mock/-/jest-fetch-mock-3.0.3.tgz#31749c456ae27b8919d69824f1c2bd85fe0a1f3b"
+  integrity sha512-Ux1nWprtLrdrH4XwE7O7InRY6psIi3GOsqNESJgMJ+M5cv4A8Lh7SN9d2V2kKRZ8ebAfcd1LNyZguAOb6JiDqw==
+  dependencies:
+    cross-fetch "^3.0.4"
+    promise-polyfill "^8.1.3"
+
 jest-get-type@^29.6.3:
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.6.3.tgz#36f499fdcea197c1045a127319c0481723908fd1"
@@ -6693,6 +6708,13 @@ node-emoji@^2.1.0:
     emojilib "^2.4.0"
     skin-tone "^2.0.0"
 
+node-fetch@^2.6.12:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
+  dependencies:
+    whatwg-url "^5.0.0"
+
 node-gyp@^10.0.0, node-gyp@^10.0.1:
   version "10.0.1"
   resolved "https://registry.npmjs.org/node-gyp/-/node-gyp-10.0.1.tgz#205514fc19e5830fa991e4a689f9e81af377a966"
@@ -7388,6 +7410,11 @@ promise-inflight@^1.0.1:
   resolved "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==
 
+promise-polyfill@^8.1.3:
+  version "8.3.0"
+  resolved "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
+  integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
+
 promise-retry@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz#ff747a13620ab57ba688f5fc67855410c370da22"
@@ -8419,6 +8446,11 @@ tr46@^4.1.1:
   dependencies:
     punycode "^2.3.0"
 
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+
 traverse@~0.6.6:
   version "0.6.7"
   resolved "https://registry.npmjs.org/traverse/-/traverse-0.6.7.tgz#46961cd2d57dd8706c36664acde06a248f1173fe"
@@ -8767,6 +8799,11 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+
 webidl-conversions@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
@@ -8800,6 +8837,14 @@ whatwg-url@^12.0.0, whatwg-url@^12.0.1:
     tr46 "^4.1.1"
     webidl-conversions "^7.0.0"
 
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"