From 92e0f07fd24d7ee7aac166c0dc171e44429ac298 Mon Sep 17 00:00:00 2001
From: Daniel Esteves <me+github@danestves.com>
Date: Sat, 2 Apr 2022 21:30:45 -0400
Subject: [PATCH 1/4] test: using fetch only for test files

---
 package.json                                  |  1 +
 packages/react/.eslintrc                      |  8 +--
 packages/react/__tests__/vimeo-lite.test.tsx  |  1 +
 .../react/__tests__/youtube-lite.test.tsx     |  1 +
 packages/react/package.json                   |  3 +-
 packages/utils/.eslintrc                      |  6 +--
 packages/utils/package.json                   |  3 +-
 packages/utils/src/get-vimeo-poster-url.ts    |  3 --
 packages/vue/.eslintrc                        | 12 +++--
 packages/vue/__tests__/vimeo-lite.test.ts     |  1 +
 packages/vue/__tests__/youtube-lite.test.ts   |  1 +
 .../aspect-ratio/aspect-ratio-item.vue        |  3 --
 .../components/aspect-ratio/aspect-ratio.vue  |  3 --
 .../src/components/vimeo-lite/vimeo-lite.vue  |  7 +--
 .../components/youtube-lite/youtube-lite.vue  |  7 +--
 yarn.lock                                     | 52 +++++--------------
 16 files changed, 39 insertions(+), 73 deletions(-)

diff --git a/package.json b/package.json
index 26809fc..b126475 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "c8": "^7.11.0",
     "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.5.0",
+    "isomorphic-fetch": "^3.0.0",
     "jsdom": "^19.0.0",
     "lerna": "^4.0.0",
     "npm-run-all": "^4.1.5",
diff --git a/packages/react/.eslintrc b/packages/react/.eslintrc
index 6251564..c45553e 100644
--- a/packages/react/.eslintrc
+++ b/packages/react/.eslintrc
@@ -1,14 +1,10 @@
 {
   "env": {
     "browser": true,
+    "jest": true,
     "node": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
diff --git a/packages/react/__tests__/vimeo-lite.test.tsx b/packages/react/__tests__/vimeo-lite.test.tsx
index 3e241db..2feb08a 100644
--- a/packages/react/__tests__/vimeo-lite.test.tsx
+++ b/packages/react/__tests__/vimeo-lite.test.tsx
@@ -1,5 +1,6 @@
 // Dependencies
 import { render } from '@testing-library/react';
+import 'isomorphic-fetch';
 
 // Internals
 import { VimeoLite } from '../src';
diff --git a/packages/react/__tests__/youtube-lite.test.tsx b/packages/react/__tests__/youtube-lite.test.tsx
index b566c49..cda879a 100644
--- a/packages/react/__tests__/youtube-lite.test.tsx
+++ b/packages/react/__tests__/youtube-lite.test.tsx
@@ -1,5 +1,6 @@
 // Dependencies
 import { render } from '@testing-library/react';
+import 'isomorphic-fetch';
 
 // Internals
 import { YoutubeLite } from '../src';
diff --git a/packages/react/package.json b/packages/react/package.json
index 386f8a1..b57c149 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -53,8 +53,7 @@
   "devDependencies": {
     "@testing-library/react": "^12.1.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.29.4",
-    "node-fetch": "^3.2.3"
+    "eslint-plugin-react": "^7.29.4"
   },
   "peerDependencies": {
     "react": "^16 || ^17 || ^18"
diff --git a/packages/utils/.eslintrc b/packages/utils/.eslintrc
index e8bcc9c..ccdba83 100644
--- a/packages/utils/.eslintrc
+++ b/packages/utils/.eslintrc
@@ -4,11 +4,7 @@
     "es2021": true,
     "node": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
+  "extends": ["eslint:recommended", "prettier"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 13,
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 08d6ee9..f29e444 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -43,8 +43,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "browser-monads-ts": "^2.0.1",
-    "node-fetch": "^3.2.3"
+    "browser-monads-ts": "^2.0.1"
   },
   "devDependencies": {
     "happy-dom": "^2.52.0"
diff --git a/packages/utils/src/get-vimeo-poster-url.ts b/packages/utils/src/get-vimeo-poster-url.ts
index 816cf68..cf4d990 100644
--- a/packages/utils/src/get-vimeo-poster-url.ts
+++ b/packages/utils/src/get-vimeo-poster-url.ts
@@ -1,6 +1,3 @@
-// Dependencies
-import fetch from 'node-fetch';
-
 // Internals
 import canUseWebP from './can-use-webp';
 
diff --git a/packages/vue/.eslintrc b/packages/vue/.eslintrc
index bc91f03..e1bb97f 100644
--- a/packages/vue/.eslintrc
+++ b/packages/vue/.eslintrc
@@ -1,16 +1,20 @@
 {
   "env": {
     "browser": true,
-    "node": true
+    "es2021": true,
+    "node": true,
+    "vue/setup-compiler-macros": true
   },
   "extends": [
-    "plugin:vue/vue3-essential",
+    "plugin:vue/vue3-recommended",
     "eslint:recommended",
     "@vue/typescript/recommended",
-    "plugin:prettier/recommended"
+    "prettier"
   ],
+  "parser": "vue-eslint-parser",
   "parserOptions": {
-    "ecmaVersion": 2020
+    "ecmaVersion": 2021,
+    "parser": "@typescript-eslint/parser"
   },
   "plugins": ["vuejs-accessibility"],
   "rules": {
diff --git a/packages/vue/__tests__/vimeo-lite.test.ts b/packages/vue/__tests__/vimeo-lite.test.ts
index 0bd9400..f3baaf9 100644
--- a/packages/vue/__tests__/vimeo-lite.test.ts
+++ b/packages/vue/__tests__/vimeo-lite.test.ts
@@ -1,5 +1,6 @@
 // Dependencies
 import { render, waitFor } from '@testing-library/vue';
+import 'isomorphic-fetch';
 
 // Internals
 import { VimeoLite } from '../src';
diff --git a/packages/vue/__tests__/youtube-lite.test.ts b/packages/vue/__tests__/youtube-lite.test.ts
index a5ccae8..36eb387 100644
--- a/packages/vue/__tests__/youtube-lite.test.ts
+++ b/packages/vue/__tests__/youtube-lite.test.ts
@@ -1,5 +1,6 @@
 // Dependencies
 import { render, waitFor } from '@testing-library/vue';
+import 'isomorphic-fetch';
 
 // Internals
 import { YoutubeLite } from '../src';
diff --git a/packages/vue/src/components/aspect-ratio/aspect-ratio-item.vue b/packages/vue/src/components/aspect-ratio/aspect-ratio-item.vue
index b3b7088..e6c6821 100644
--- a/packages/vue/src/components/aspect-ratio/aspect-ratio-item.vue
+++ b/packages/vue/src/components/aspect-ratio/aspect-ratio-item.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-// Dependencies
-import { defineProps } from 'vue';
-
 defineProps({
   backgroundImage: {
     type: String,
diff --git a/packages/vue/src/components/aspect-ratio/aspect-ratio.vue b/packages/vue/src/components/aspect-ratio/aspect-ratio.vue
index 99ad0e6..37dc433 100644
--- a/packages/vue/src/components/aspect-ratio/aspect-ratio.vue
+++ b/packages/vue/src/components/aspect-ratio/aspect-ratio.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-// Dependencies
-import { defineProps } from 'vue';
-
 defineProps({
   aspectRatio: {
     type: [Number, String],
diff --git a/packages/vue/src/components/vimeo-lite/vimeo-lite.vue b/packages/vue/src/components/vimeo-lite/vimeo-lite.vue
index 2578723..507b064 100644
--- a/packages/vue/src/components/vimeo-lite/vimeo-lite.vue
+++ b/packages/vue/src/components/vimeo-lite/vimeo-lite.vue
@@ -6,7 +6,7 @@ import {
   getVimeoPosterUrl,
   warmVimeoConnections,
 } from '@lite-embed/utils';
-import { defineProps, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import type * as Vimeo from 'vimeo__player';
 import type { PropType } from 'vue';
 
@@ -35,6 +35,7 @@ let props = defineProps({
   },
   customThumbnail: {
     type: String,
+    default: '',
     required: false,
   },
   playerParameters: {
@@ -96,8 +97,8 @@ onMounted(() => {
 <template>
   <aspect-ratio
     :aspect-ratio="aspectRatio"
-    v-on:pointerover="warmConnections"
-    v-on:click="addIframe"
+    @pointerover="warmConnections"
+    @click="addIframe"
   >
     <aspect-ratio-item :background-image="`url(${posterUrl})`">
       <iframe
diff --git a/packages/vue/src/components/youtube-lite/youtube-lite.vue b/packages/vue/src/components/youtube-lite/youtube-lite.vue
index 4fdb2f4..b37805c 100644
--- a/packages/vue/src/components/youtube-lite/youtube-lite.vue
+++ b/packages/vue/src/components/youtube-lite/youtube-lite.vue
@@ -5,7 +5,7 @@ import {
   getYoutubePlayerOptions,
   warmYoutubeConnections,
 } from '@lite-embed/utils';
-import { defineProps, ref } from 'vue';
+import { ref } from 'vue';
 import type * as Youtube from 'youtube-player/dist/types';
 import type { PropType } from 'vue';
 
@@ -38,6 +38,7 @@ let props = defineProps({
   },
   customThumbnail: {
     type: String,
+    default: '',
     required: false,
   },
   noCookie: {
@@ -107,9 +108,9 @@ const addIframe = () => {
 <template>
   <aspect-ratio
     :aspect-ratio="aspectRatio"
-    v-on:click="addIframe"
-    v-on:pointerover="warmConnections"
     data-testid
+    @click="addIframe"
+    @pointerover="warmConnections"
   >
     <aspect-ratio-item :background-image="`url(${posterUrl})`">
       <iframe
diff --git a/yarn.lock b/yarn.lock
index e61b9c9..4bc5947 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2570,11 +2570,6 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-data-uri-to-buffer@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz"
-  integrity sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
-
 data-urls@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/data-urls/-/data-urls-3.0.1.tgz"
@@ -3399,14 +3394,6 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-fetch-blob@^3.1.2, fetch-blob@^3.1.4:
-  version "3.1.5"
-  resolved "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.1.5.tgz"
-  integrity sha512-N64ZpKqoLejlrwkIAnb9iLSA3Vx/kjgzpcDhygcqJ2KKjky8nCgUQ+dzXtbrLaWZGZNmNfQTsiQ0weZ1svglHg==
-  dependencies:
-    node-domexception "^1.0.0"
-    web-streams-polyfill "^3.0.3"
-
 figures@^3.0.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz"
@@ -3509,13 +3496,6 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
-formdata-polyfill@^4.0.10:
-  version "4.0.10"
-  resolved "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz"
-  integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
-  dependencies:
-    fetch-blob "^3.1.2"
-
 fs-extra@^9.1.0:
   version "9.1.0"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz"
@@ -4265,6 +4245,14 @@ isobject@^3.0.1:
   resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-fetch@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz#0267b005049046d2421207215d45d6a262b8b8b4"
+  integrity sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==
+  dependencies:
+    node-fetch "^2.6.1"
+    whatwg-fetch "^3.4.1"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
@@ -4954,11 +4942,6 @@ nice-try@^1.0.4:
   resolved "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-node-domexception@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz"
-  integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
-
 node-fetch@^2.6.1, node-fetch@^2.6.7, node-fetch@^2.x.x:
   version "2.6.7"
   resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz"
@@ -4966,15 +4949,6 @@ node-fetch@^2.6.1, node-fetch@^2.6.7, node-fetch@^2.x.x:
   dependencies:
     whatwg-url "^5.0.0"
 
-node-fetch@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-3.2.3.tgz"
-  integrity sha512-AXP18u4pidSZ1xYXRDPY/8jdv3RAozIt/WLNR/MBGZAz+xjtlr90RvCnsvHQRiXyWliZF/CpytExp32UU67/SA==
-  dependencies:
-    data-uri-to-buffer "^4.0.0"
-    fetch-blob "^3.1.4"
-    formdata-polyfill "^4.0.10"
-
 node-gyp@^5.0.2:
   version "5.1.1"
   resolved "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.1.tgz"
@@ -7049,11 +7023,6 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
-web-streams-polyfill@^3.0.3:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz"
-  integrity sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==
-
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
@@ -7076,6 +7045,11 @@ whatwg-encoding@^2.0.0:
   dependencies:
     iconv-lite "0.6.3"
 
+whatwg-fetch@^3.4.1:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
+
 whatwg-mimetype@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz"

From b779ecf239747d5272d1dda9037186823348bd07 Mon Sep 17 00:00:00 2001
From: Daniel Esteves <me+github@danestves.com>
Date: Sat, 2 Apr 2022 21:34:17 -0400
Subject: [PATCH 2/4] test: adding jest env for eslint

---
 packages/utils/.eslintrc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/utils/.eslintrc b/packages/utils/.eslintrc
index ccdba83..ae7f9af 100644
--- a/packages/utils/.eslintrc
+++ b/packages/utils/.eslintrc
@@ -2,6 +2,7 @@
   "env": {
     "browser": true,
     "es2021": true,
+    "jest": true,
     "node": true
   },
   "extends": ["eslint:recommended", "prettier"],

From 7068aacfc27d3348de012afe8da572579cba9935 Mon Sep 17 00:00:00 2001
From: Daniel Esteves <me+github@danestves.com>
Date: Sat, 2 Apr 2022 21:37:35 -0400
Subject: [PATCH 3/4] fix: ignore rules on types

---
 packages/utils/.eslintignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/utils/.eslintignore b/packages/utils/.eslintignore
index 1afd011..f522c87 100644
--- a/packages/utils/.eslintignore
+++ b/packages/utils/.eslintignore
@@ -1,2 +1,3 @@
 /coverage
-/dist
\ No newline at end of file
+/dist
+/src/types/*
\ No newline at end of file

From 7848e93617c28473e3a5cc652e68eb2506ad4ae6 Mon Sep 17 00:00:00 2001
From: Daniel Esteves <me+github@danestves.com>
Date: Sat, 2 Apr 2022 21:40:28 -0400
Subject: [PATCH 4/4] fix: import react types

---
 packages/react/src/types/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/types/index.ts b/packages/react/src/types/index.ts
index f436b56..22c2a26 100644
--- a/packages/react/src/types/index.ts
+++ b/packages/react/src/types/index.ts
@@ -1,4 +1,5 @@
 // Dependencies
+import type * as React from 'react';
 import type * as Stitches from '@stitches/react';
 
 export interface IframeProps extends React.ComponentPropsWithoutRef<'iframe'> {