diff --git a/package.json b/package.json
index 870c58d..6e02b20 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
{
"name": "stream-vue",
+ "type": "module",
"version": "0.4.0",
"packageManager": "pnpm@9.1.3",
"description": "Cloudflare Stream component for VueJS",
@@ -41,15 +42,15 @@
"test:types": "tsc --noEmit"
},
"peerDependencies": {
- "vue": "^2.6.0"
+ "vue": "^3.4.0"
},
"devDependencies": {
"@antfu/eslint-config": "latest",
"@types/jsdom": "^21.1.6",
"@types/node": "20.12.12",
- "@vitejs/plugin-vue2": "^2.3.1",
+ "@vitejs/plugin-vue": "^5.0.4",
"@vitest/coverage-v8": "^1.6.0",
- "@vue/test-utils": "1.3.6",
+ "@vue/test-utils": "2.4.6",
"eslint": "latest",
"jsdom": "^24.1.0",
"lint-staged": "latest",
@@ -58,16 +59,14 @@
"unbuild": "latest",
"vite": "latest",
"vitest": "latest",
- "vue": "2.7.15",
- "vue-template-compiler": "2.7.15"
+ "vue": "3.4.27"
+ },
+ "resolutions": {
+ "stream-vue": "link:."
},
"simple-git-hooks": {
"pre-commit": "npx lint-staged"
},
- "vetur": {
- "tags": "vetur/tags.json",
- "attributes": "vetur/attributes.json"
- },
"lint-staged": {
"*.{js,ts,mjs,cjs,json,.*rc}": [
"pnpm eslint --fix"
diff --git a/playground/index.html b/playground/index.html
new file mode 100644
index 0000000..932dec4
--- /dev/null
+++ b/playground/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ stream-vue
+
+
+
+
+
+
+
+
diff --git a/playground/package.json b/playground/package.json
new file mode 100644
index 0000000..6522585
--- /dev/null
+++ b/playground/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "stream-vue-playground",
+ "type": "module",
+ "private": true,
+ "scripts": {
+ "dev": "vite dev"
+ },
+ "dependencies": {
+ "@vitejs/plugin-vue": "latest",
+ "@vueuse/core": "^10.9.0",
+ "stream-vue": "latest",
+ "vite": "latest",
+ "vue": "latest"
+ }
+}
diff --git a/playground/src/App.vue b/playground/src/App.vue
new file mode 100644
index 0000000..feada3d
--- /dev/null
+++ b/playground/src/App.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/playground/src/main.js b/playground/src/main.js
new file mode 100644
index 0000000..01433bc
--- /dev/null
+++ b/playground/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
new file mode 100644
index 0000000..c40aa3c
--- /dev/null
+++ b/playground/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+ plugins: [vue()],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3e01cab..5c7d0c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,9 @@ settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
+overrides:
+ stream-vue: link:.
+
importers:
.:
@@ -17,15 +20,15 @@ importers:
'@types/node':
specifier: 20.12.12
version: 20.12.12
- '@vitejs/plugin-vue2':
- specifier: ^2.3.1
- version: 2.3.1(vite@5.2.11(@types/node@20.12.12)(stylus@0.32.1))(vue@2.7.15)
+ '@vitejs/plugin-vue':
+ specifier: ^5.0.4
+ version: 5.0.4(vite@5.2.11(@types/node@20.12.12)(stylus@0.32.1))(vue@3.4.27(typescript@5.4.5))
'@vitest/coverage-v8':
specifier: ^1.6.0
version: 1.6.0(vitest@1.6.0(@types/node@20.12.12)(jsdom@24.1.0)(stylus@0.32.1))
'@vue/test-utils':
- specifier: 1.3.6
- version: 1.3.6(vue-template-compiler@2.7.15)(vue@2.7.15)
+ specifier: 2.4.6
+ version: 2.4.6
eslint:
specifier: latest
version: 9.3.0
@@ -34,7 +37,7 @@ importers:
version: 24.1.0
lint-staged:
specifier: latest
- version: 15.2.5
+ version: 15.2.2
simple-git-hooks:
specifier: latest
version: 2.11.1
@@ -51,11 +54,26 @@ importers:
specifier: latest
version: 1.6.0(@types/node@20.12.12)(jsdom@24.1.0)(stylus@0.32.1)
vue:
- specifier: 2.7.15
- version: 2.7.15
- vue-template-compiler:
- specifier: 2.7.15
- version: 2.7.15
+ specifier: 3.4.27
+ version: 3.4.27(typescript@5.4.5)
+
+ playground:
+ dependencies:
+ '@vitejs/plugin-vue':
+ specifier: latest
+ version: 5.0.4(vite@5.2.11(@types/node@20.12.12)(stylus@0.32.1))(vue@3.4.27(typescript@5.4.5))
+ '@vueuse/core':
+ specifier: ^10.9.0
+ version: 10.9.0(vue@3.4.27(typescript@5.4.5))
+ stream-vue:
+ specifier: link:..
+ version: link:..
+ vite:
+ specifier: latest
+ version: 5.2.11(@types/node@20.12.12)(stylus@0.32.1)
+ vue:
+ specifier: latest
+ version: 3.4.27(typescript@5.4.5)
packages:
@@ -787,6 +805,9 @@ packages:
'@types/unist@2.0.10':
resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
+ '@types/web-bluetooth@0.0.20':
+ resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
'@typescript-eslint/eslint-plugin@7.10.0':
resolution: {integrity: sha512-PzCr+a/KAef5ZawX7nbyNwBDtM1HdLIT53aSA2DDlxmxMngZ43O8SIePOeX8H5S+FHXeI6t97mTt/dDdzY4Fyw==}
engines: {node: ^18.18.0 || >=20.0.0}
@@ -845,12 +866,12 @@ packages:
resolution: {integrity: sha512-9ntIVgsi6gg6FIq9xjEO4VQJvwOqA3jaBFQJ/6TK5AvEup2+cECI6Fh7QiBxmfMHXU0V0J4RyPeOU1VDNzl9cg==}
engines: {node: ^18.18.0 || >=20.0.0}
- '@vitejs/plugin-vue2@2.3.1':
- resolution: {integrity: sha512-/ksaaz2SRLN11JQhLdEUhDzOn909WEk99q9t9w+N12GjQCljzv7GyvAbD/p20aBUjHkvpGOoQ+FCOkG+mjDF4A==}
- engines: {node: ^14.18.0 || >= 16.0.0}
+ '@vitejs/plugin-vue@5.0.4':
+ resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
+ engines: {node: ^18.0.0 || >=20.0.0}
peerDependencies:
- vite: ^3.0.0 || ^4.0.0 || ^5.0.0
- vue: ^2.7.0-0
+ vite: ^5.0.0
+ vue: ^3.2.25
'@vitest/coverage-v8@1.6.0':
resolution: {integrity: sha512-KvapcbMY/8GYIG0rlwwOKCVNRc0OL20rrhFkg/CHNzncV03TE2XWvO5w9uZYoxNiMEBacAJt3unSOiZ7svePew==}
@@ -878,23 +899,40 @@ packages:
'@vue/compiler-dom@3.4.27':
resolution: {integrity: sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==}
- '@vue/compiler-sfc@2.7.15':
- resolution: {integrity: sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==}
-
'@vue/compiler-sfc@3.4.27':
resolution: {integrity: sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==}
'@vue/compiler-ssr@3.4.27':
resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==}
+ '@vue/reactivity@3.4.27':
+ resolution: {integrity: sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==}
+
+ '@vue/runtime-core@3.4.27':
+ resolution: {integrity: sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==}
+
+ '@vue/runtime-dom@3.4.27':
+ resolution: {integrity: sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==}
+
+ '@vue/server-renderer@3.4.27':
+ resolution: {integrity: sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==}
+ peerDependencies:
+ vue: 3.4.27
+
'@vue/shared@3.4.27':
resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==}
- '@vue/test-utils@1.3.6':
- resolution: {integrity: sha512-udMmmF1ts3zwxUJEIAj5ziioR900reDrt6C9H3XpWPsLBx2lpHKoA4BTdd9HNIYbkGltWw+JjWJ+5O6QBwiyEw==}
- peerDependencies:
- vue: 2.x
- vue-template-compiler: ^2.x
+ '@vue/test-utils@2.4.6':
+ resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
+
+ '@vueuse/core@10.9.0':
+ resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
+
+ '@vueuse/metadata@10.9.0':
+ resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
+
+ '@vueuse/shared@10.9.0':
+ resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
abbrev@2.0.0:
resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
@@ -1093,9 +1131,9 @@ packages:
resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
engines: {node: '>=14'}
- commander@12.1.0:
- resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
- engines: {node: '>=18'}
+ commander@11.1.0:
+ resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+ engines: {node: '>=16'}
commander@7.2.0:
resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
@@ -1111,10 +1149,6 @@ packages:
concat-map@0.0.1:
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
- condense-newlines@0.2.1:
- resolution: {integrity: sha512-P7X+QL9Hb9B/c8HI5BFFKmjgBu2XpQuF98WZ9XkO+dBGgk5XgwiQz7o1SmpglNWId3581UcS0SFAWfoIhMHPfg==}
- engines: {node: '>=0.10.0'}
-
confbox@0.1.7:
resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
@@ -1198,9 +1232,6 @@ packages:
resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
engines: {node: '>=18'}
- de-indent@1.0.2:
- resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
-
debug@3.2.7:
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
peerDependencies:
@@ -1251,9 +1282,6 @@ packages:
resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
engines: {node: '>=6.0.0'}
- dom-event-types@1.1.0:
- resolution: {integrity: sha512-jNCX+uNJ3v38BKvPbpki6j5ItVlnSqVV6vDWGS6rExzCMjsc39frLjm1n91o6YaKK6AZl0wLloItW6C6mr61BQ==}
-
dom-serializer@2.0.0:
resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
@@ -1535,10 +1563,6 @@ packages:
resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
engines: {node: '>=16.17'}
- extend-shallow@2.0.1:
- resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
- engines: {node: '>=0.10.0'}
-
fast-deep-equal@3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
@@ -1698,10 +1722,6 @@ packages:
resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
engines: {node: '>= 0.4'}
- he@1.2.0:
- resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
- hasBin: true
-
hookable@5.5.3:
resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
@@ -1766,9 +1786,6 @@ packages:
is-arrayish@0.2.1:
resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
- is-buffer@1.1.6:
- resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
-
is-builtin-module@3.2.1:
resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
engines: {node: '>=6'}
@@ -1779,10 +1796,6 @@ packages:
is-decimal@1.0.4:
resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
- is-extendable@0.1.1:
- resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
- engines: {node: '>=0.10.0'}
-
is-extglob@2.1.1:
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
engines: {node: '>=0.10.0'}
@@ -1827,10 +1840,6 @@ packages:
resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
- is-whitespace@0.3.0:
- resolution: {integrity: sha512-RydPhl4S6JwAyj0JJjshWJEFG6hNye3pZFBRZaTUfZFwGHxzppNaNOVgQuS/E/SlhrApuMXrpnK1EEIXfdo3Dg==}
- engines: {node: '>=0.10.0'}
-
isexe@2.0.0:
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
@@ -1931,14 +1940,14 @@ packages:
keyv@4.5.4:
resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
- kind-of@3.2.2:
- resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==}
- engines: {node: '>=0.10.0'}
-
levn@0.4.1:
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
engines: {node: '>= 0.8.0'}
+ lilconfig@3.0.0:
+ resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
+ engines: {node: '>=14'}
+
lilconfig@3.1.1:
resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
engines: {node: '>=14'}
@@ -1946,13 +1955,13 @@ packages:
lines-and-columns@1.2.4:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
- lint-staged@15.2.5:
- resolution: {integrity: sha512-j+DfX7W9YUvdzEZl3Rk47FhDF6xwDBV5wwsCPw6BwWZVPYJemusQmvb9bRsW23Sqsaa+vRloAWogbK4BUuU2zA==}
+ lint-staged@15.2.2:
+ resolution: {integrity: sha512-TiTt93OPh1OZOsb5B7k96A/ATl2AjIZo+vnzFZ6oHK5FuTk63ByDtxGQpHm+kFETjEWqgkF95M8FRXKR/LEBcw==}
engines: {node: '>=18.12.0'}
hasBin: true
- listr2@8.2.1:
- resolution: {integrity: sha512-irTfvpib/rNiD637xeevjO2l3Z5loZmuaRi0L0YE5LfijwVY96oyVn0DFD3o/teAok7nfobMG1THvvcHh/BP6g==}
+ listr2@8.0.1:
+ resolution: {integrity: sha512-ovJXBXkKGfq+CwmKTjluEqFi3p4h8xvkxGQQAQan22YCgef4KZ1mKGjzfGh6PL6AW5Csw0QiQPNuQyH+6Xk3hA==}
engines: {node: '>=18.0.0'}
local-pkg@0.5.0:
@@ -2029,6 +2038,10 @@ packages:
micromark@2.11.4:
resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
+ micromatch@4.0.5:
+ resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
+ engines: {node: '>=8.6'}
+
micromatch@4.0.7:
resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
engines: {node: '>=8.6'}
@@ -2460,10 +2473,6 @@ packages:
resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
- pretty@2.0.0:
- resolution: {integrity: sha512-G9xUchgTEiNpormdYBl+Pha50gOUovT18IvAe7EYMZ1/f9W/WWMPRn+xI68yXNMUk3QXHDwo/1wV/4NejVNe1w==}
- engines: {node: '>=0.10.0'}
-
proto-list@1.2.4:
resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
@@ -2638,10 +2647,6 @@ packages:
resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
engines: {node: '>=0.10.0'}
- source-map@0.6.1:
- resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
- engines: {node: '>=0.10.0'}
-
spdx-correct@3.2.0:
resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
@@ -2922,18 +2927,33 @@ packages:
jsdom:
optional: true
+ vue-component-type-helpers@2.0.19:
+ resolution: {integrity: sha512-cN3f1aTxxKo4lzNeQAkVopswuImUrb5Iurll9Gaw5cqpnbTAxtEMM1mgi6ou4X79OCyqYv1U1mzBHJkzmiK82w==}
+
+ vue-demi@0.14.7:
+ resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
+ engines: {node: '>=12'}
+ hasBin: true
+ peerDependencies:
+ '@vue/composition-api': ^1.0.0-rc.1
+ vue: ^3.0.0-0 || ^2.6.0
+ peerDependenciesMeta:
+ '@vue/composition-api':
+ optional: true
+
vue-eslint-parser@9.4.2:
resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}
engines: {node: ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: '>=6.0.0'
- vue-template-compiler@2.7.15:
- resolution: {integrity: sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==}
-
- vue@2.7.15:
- resolution: {integrity: sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==}
- deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
+ vue@3.4.27:
+ resolution: {integrity: sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==}
+ peerDependencies:
+ typescript: '*'
+ peerDependenciesMeta:
+ typescript:
+ optional: true
w3c-xmlserializer@5.0.0:
resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
@@ -3018,6 +3038,10 @@ packages:
resolution: {integrity: sha512-4wZWvE398hCP7O8n3nXKu/vdq1HcH01ixYlCREaJL5NUMwQ0g3MaGFUBNSlmBtKmhbtVG/Cm6lyYmSVTEVil8A==}
engines: {node: ^14.17.0 || >=16.0.0}
+ yaml@2.3.4:
+ resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
+ engines: {node: '>= 14'}
+
yaml@2.4.2:
resolution: {integrity: sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==}
engines: {node: '>= 14'}
@@ -3656,6 +3680,8 @@ snapshots:
'@types/unist@2.0.10': {}
+ '@types/web-bluetooth@0.0.20': {}
+
'@typescript-eslint/eslint-plugin@7.10.0(@typescript-eslint/parser@7.10.0(eslint@9.3.0)(typescript@5.4.5))(eslint@9.3.0)(typescript@5.4.5)':
dependencies:
'@eslint-community/regexpp': 4.10.0
@@ -3737,10 +3763,10 @@ snapshots:
'@typescript-eslint/types': 7.10.0
eslint-visitor-keys: 3.4.3
- '@vitejs/plugin-vue2@2.3.1(vite@5.2.11(@types/node@20.12.12)(stylus@0.32.1))(vue@2.7.15)':
+ '@vitejs/plugin-vue@5.0.4(vite@5.2.11(@types/node@20.12.12)(stylus@0.32.1))(vue@3.4.27(typescript@5.4.5))':
dependencies:
vite: 5.2.11(@types/node@20.12.12)(stylus@0.32.1)
- vue: 2.7.15
+ vue: 3.4.27(typescript@5.4.5)
'@vitest/coverage-v8@1.6.0(vitest@1.6.0(@types/node@20.12.12)(jsdom@24.1.0)(stylus@0.32.1))':
dependencies:
@@ -3803,12 +3829,6 @@ snapshots:
'@vue/compiler-core': 3.4.27
'@vue/shared': 3.4.27
- '@vue/compiler-sfc@2.7.15':
- dependencies:
- '@babel/parser': 7.24.6
- postcss: 8.4.38
- source-map: 0.6.1
-
'@vue/compiler-sfc@3.4.27':
dependencies:
'@babel/parser': 7.24.6
@@ -3826,15 +3846,52 @@ snapshots:
'@vue/compiler-dom': 3.4.27
'@vue/shared': 3.4.27
+ '@vue/reactivity@3.4.27':
+ dependencies:
+ '@vue/shared': 3.4.27
+
+ '@vue/runtime-core@3.4.27':
+ dependencies:
+ '@vue/reactivity': 3.4.27
+ '@vue/shared': 3.4.27
+
+ '@vue/runtime-dom@3.4.27':
+ dependencies:
+ '@vue/runtime-core': 3.4.27
+ '@vue/shared': 3.4.27
+ csstype: 3.1.3
+
+ '@vue/server-renderer@3.4.27(vue@3.4.27(typescript@5.4.5))':
+ dependencies:
+ '@vue/compiler-ssr': 3.4.27
+ '@vue/shared': 3.4.27
+ vue: 3.4.27(typescript@5.4.5)
+
'@vue/shared@3.4.27': {}
- '@vue/test-utils@1.3.6(vue-template-compiler@2.7.15)(vue@2.7.15)':
+ '@vue/test-utils@2.4.6':
dependencies:
- dom-event-types: 1.1.0
- lodash: 4.17.21
- pretty: 2.0.0
- vue: 2.7.15
- vue-template-compiler: 2.7.15
+ js-beautify: 1.15.1
+ vue-component-type-helpers: 2.0.19
+
+ '@vueuse/core@10.9.0(vue@3.4.27(typescript@5.4.5))':
+ dependencies:
+ '@types/web-bluetooth': 0.0.20
+ '@vueuse/metadata': 10.9.0
+ '@vueuse/shared': 10.9.0(vue@3.4.27(typescript@5.4.5))
+ vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+ transitivePeerDependencies:
+ - '@vue/composition-api'
+ - vue
+
+ '@vueuse/metadata@10.9.0': {}
+
+ '@vueuse/shared@10.9.0(vue@3.4.27(typescript@5.4.5))':
+ dependencies:
+ vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+ transitivePeerDependencies:
+ - '@vue/composition-api'
+ - vue
abbrev@2.0.0: {}
@@ -4018,7 +4075,7 @@ snapshots:
commander@10.0.1: {}
- commander@12.1.0: {}
+ commander@11.1.0: {}
commander@7.2.0: {}
@@ -4028,12 +4085,6 @@ snapshots:
concat-map@0.0.1: {}
- condense-newlines@0.2.1:
- dependencies:
- extend-shallow: 2.0.1
- is-whitespace: 0.3.0
- kind-of: 3.2.2
-
confbox@0.1.7: {}
config-chain@1.1.13:
@@ -4143,8 +4194,6 @@ snapshots:
whatwg-mimetype: 4.0.0
whatwg-url: 14.0.0
- de-indent@1.0.2: {}
-
debug@3.2.7:
dependencies:
ms: 2.1.3
@@ -4177,8 +4226,6 @@ snapshots:
dependencies:
esutils: 2.0.3
- dom-event-types@1.1.0: {}
-
dom-serializer@2.0.0:
dependencies:
domelementtype: 2.3.0
@@ -4597,10 +4644,6 @@ snapshots:
signal-exit: 4.1.0
strip-final-newline: 3.0.0
- extend-shallow@2.0.1:
- dependencies:
- is-extendable: 0.1.1
-
fast-deep-equal@3.1.3: {}
fast-glob@3.3.2:
@@ -4771,8 +4814,6 @@ snapshots:
dependencies:
function-bind: 1.1.2
- he@1.2.0: {}
-
hookable@5.5.3: {}
hosted-git-info@2.8.9: {}
@@ -4832,8 +4873,6 @@ snapshots:
is-arrayish@0.2.1: {}
- is-buffer@1.1.6: {}
-
is-builtin-module@3.2.1:
dependencies:
builtin-modules: 3.3.0
@@ -4844,8 +4883,6 @@ snapshots:
is-decimal@1.0.4: {}
- is-extendable@0.1.1: {}
-
is-extglob@2.1.1: {}
is-fullwidth-code-point@3.0.0: {}
@@ -4876,8 +4913,6 @@ snapshots:
is-stream@3.0.0: {}
- is-whitespace@0.3.0: {}
-
isexe@2.0.0: {}
istanbul-lib-coverage@3.2.2: {}
@@ -4990,35 +5025,33 @@ snapshots:
dependencies:
json-buffer: 3.0.1
- kind-of@3.2.2:
- dependencies:
- is-buffer: 1.1.6
-
levn@0.4.1:
dependencies:
prelude-ls: 1.2.1
type-check: 0.4.0
+ lilconfig@3.0.0: {}
+
lilconfig@3.1.1: {}
lines-and-columns@1.2.4: {}
- lint-staged@15.2.5:
+ lint-staged@15.2.2:
dependencies:
chalk: 5.3.0
- commander: 12.1.0
+ commander: 11.1.0
debug: 4.3.4
execa: 8.0.1
- lilconfig: 3.1.1
- listr2: 8.2.1
- micromatch: 4.0.7
+ lilconfig: 3.0.0
+ listr2: 8.0.1
+ micromatch: 4.0.5
pidtree: 0.6.0
string-argv: 0.3.2
- yaml: 2.4.2
+ yaml: 2.3.4
transitivePeerDependencies:
- supports-color
- listr2@8.2.1:
+ listr2@8.0.1:
dependencies:
cli-truncate: 4.0.0
colorette: 2.0.20
@@ -5111,6 +5144,11 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ micromatch@4.0.5:
+ dependencies:
+ braces: 3.0.3
+ picomatch: 2.3.1
+
micromatch@4.0.7:
dependencies:
braces: 3.0.3
@@ -5506,12 +5544,6 @@ snapshots:
ansi-styles: 5.2.0
react-is: 18.3.1
- pretty@2.0.0:
- dependencies:
- condense-newlines: 0.2.1
- extend-shallow: 2.0.1
- js-beautify: 1.15.1
-
proto-list@1.2.4: {}
psl@1.9.0: {}
@@ -5671,8 +5703,6 @@ snapshots:
source-map-js@1.2.0: {}
- source-map@0.6.1: {}
-
spdx-correct@3.2.0:
dependencies:
spdx-expression-parse: 3.0.1
@@ -5976,6 +6006,12 @@ snapshots:
- supports-color
- terser
+ vue-component-type-helpers@2.0.19: {}
+
+ vue-demi@0.14.7(vue@3.4.27(typescript@5.4.5)):
+ dependencies:
+ vue: 3.4.27(typescript@5.4.5)
+
vue-eslint-parser@9.4.2(eslint@9.3.0):
dependencies:
debug: 4.3.4
@@ -5989,15 +6025,15 @@ snapshots:
transitivePeerDependencies:
- supports-color
- vue-template-compiler@2.7.15:
- dependencies:
- de-indent: 1.0.2
- he: 1.2.0
-
- vue@2.7.15:
+ vue@3.4.27(typescript@5.4.5):
dependencies:
- '@vue/compiler-sfc': 2.7.15
- csstype: 3.1.3
+ '@vue/compiler-dom': 3.4.27
+ '@vue/compiler-sfc': 3.4.27
+ '@vue/runtime-dom': 3.4.27
+ '@vue/server-renderer': 3.4.27(vue@3.4.27(typescript@5.4.5))
+ '@vue/shared': 3.4.27
+ optionalDependencies:
+ typescript: 5.4.5
w3c-xmlserializer@5.0.0:
dependencies:
@@ -6065,6 +6101,8 @@ snapshots:
lodash: 4.17.21
yaml: 2.4.2
+ yaml@2.3.4: {}
+
yaml@2.4.2: {}
yargs-parser@21.1.1: {}
diff --git a/src/index.ts b/src/index.ts
index 820ca43..57ad916 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,4 @@
-import type Vue from 'vue'
-
-const extendVue: (typeof Vue)['extend'] = (options: any) => options
+import { defineComponent, h, onMounted, ref, watch } from 'vue'
const scriptLocation
= 'https://embed.videodelivery.net/embed/r4xu.fla9.latest.js'
@@ -16,16 +14,6 @@ declare global {
}
}
-// eslint-disable-next-line ts/no-require-imports,ts/no-var-requires
-const _Vue = require('vue')
-
-if (_Vue.config) {
- _Vue.config.ignoredElements = [
- ...(_Vue.config.ignoredElements || []),
- 'stream',
- ]
-}
-
export type Events =
/**
* Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.
@@ -124,7 +112,7 @@ export type Events =
*/
| 'stream-adtimeout'
-export const VideoStream = extendVue({
+export const VideoStream = defineComponent({
name: 'VideoStream',
props: {
/**
@@ -148,7 +136,7 @@ export const VideoStream = extendVue({
*
* @default 0
*/
- currentTime: { type: Number, default: 0 },
+ currentTime: { type: [String, Number], default: 0 },
/**
* The height of the video’s display area, in CSS pixels.
*/
@@ -186,63 +174,50 @@ export const VideoStream = extendVue({
*
* @default 1
*/
- volume: { type: Number, default: 1 },
+ volume: { type: [String, Number], default: 1 },
},
inheritAttrs: false,
- data: () => ({
- streamScript: null as HTMLScriptElement | null,
- }),
- mounted() {
- ;(this as any).initialiseStream()
- },
- watch: [
- 'autoplay',
- 'controls',
- 'currentTime',
- 'muted',
- 'loop',
- 'volume',
- 'preload',
- ].reduce((obj, prop) => {
- obj[prop] = function (
- this: { updateProp: (key: string, value: any) => void },
- val: any,
- ) {
- this.updateProp(prop, val)
- }
- return obj
- }, {} as Record),
- methods: {
- updateProp(key: string, value: any) {
- if (!this.$refs.stream) {
+ setup(props) {
+ const streamScript = ref(null)
+ const streamRef = ref(null)
+
+ const updateableProps = ['autoplay', 'controls', 'currentTime', 'muted', 'loop', 'volume', 'preload'] as const
+
+ function updateProp(key: typeof updateableProps[number], value: unknown) {
+ if (!streamRef.value) {
return
}
- ;(this.$refs.stream as any)[key] = value
- },
- initialiseStream() {
- this.streamScript
- = this.streamScript
- || document.querySelector(
- `script[src="${scriptLocation}"]`,
- )
- if (!this.streamScript) {
- const streamScript = document.createElement('script')
- streamScript.setAttribute('data-cfasync', 'false')
- streamScript.setAttribute('defer', 'true')
- streamScript.setAttribute('type', 'text/javascript')
- streamScript.setAttribute('src', scriptLocation)
- document.head.appendChild(streamScript)
+ // @ts-expect-error type any is not assignable to type never
+ streamRef.value[key] = value as any
+ }
+
+ for (const key of updateableProps) {
+ watch(() => props[key], val => updateProp(key, val))
+ }
- this.streamScript = streamScript
+ onMounted(() => {
+ streamScript.value ||= document.querySelector(`script[src="${scriptLocation}"]`)
+
+ if (!streamScript.value) {
+ const scriptEl = document.createElement('script')
+ scriptEl.setAttribute('data-cfasync', 'false')
+ scriptEl.setAttribute('defer', 'true')
+ scriptEl.setAttribute('type', 'text/javascript')
+ scriptEl.setAttribute('src', scriptLocation)
+ document.head.appendChild(scriptEl)
+
+ streamScript.value = scriptEl
}
- if (window.__stream && this.$refs.stream) {
- window.__stream.initElement(this.$refs.stream as HTMLStreamElement)
+ if (window.__stream && streamRef.value) {
+ window.__stream.initElement(streamRef.value)
}
- },
+ })
+
+ return { streamRef }
},
- render(h) {
+ render() {
return h(
'div',
{
@@ -254,52 +229,25 @@ export const VideoStream = extendVue({
},
[
h('stream', {
- attrs: {
- ...this.$attrs,
- class: null,
- style: null,
- autoplay: this.autoplay,
- controls: this.controls,
- currentTime: this.currentTime,
- muted: this.muted,
- loop: this.loop,
- volume: this.volume,
- preload:
- typeof this.$attrs.preload === 'string'
- ? this.$attrs.preload // if it's a string pass as is
- : this.$attrs.preload === true // else if it's true, map to auto
- ? 'auto'
- : 'none', // otherwise (undefined | false) maps to none
- },
- on: this.$listeners,
- ref: 'stream',
- tag: 'stream',
+ ...this.$attrs,
+ class: null,
+ style: null,
+ controls: this.controls ? 'controls' : null,
+ autoplay: this.autoplay || null,
+ currentTime: this.currentTime,
+ muted: this.muted || null,
+ loop: this.loop || null,
+ volume: this.volume,
+ preload:
+ typeof this.preload === 'string'
+ ? this.preload // if it's a string pass as is
+ : this.preload === true // else if it's true, map to auto
+ ? 'auto'
+ : 'none', // otherwise (undefined | false) maps to none
+ // on: this.$listeners,
+ ref: (el) => { this.streamRef = el as HTMLVideoElement },
}),
],
)
},
- ...{
- head: {
- script: [
- {
- 'src': scriptLocation,
- 'data-cfasync': false,
- 'defer': true,
- 'type': 'text/javascript',
- 'hid': 'cloudflare-stream-script',
- },
- ],
- },
- metaInfo: {
- script: [
- {
- 'src': scriptLocation,
- 'data-cfasync': false,
- 'defer': true,
- 'type': 'text/javascript',
- 'vmid': 'cloudflare-stream-script',
- },
- ],
- },
- },
})
diff --git a/test/__snapshots__/index.spec.ts.snap b/test/__snapshots__/index.spec.ts.snap
index 0bbcc11..507723e 100644
--- a/test/__snapshots__/index.spec.ts.snap
+++ b/test/__snapshots__/index.spec.ts.snap
@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`stream-vue > renders HTML 1`] = `
-"
+"
"
`;
diff --git a/test/index.spec.ts b/test/index.spec.ts
index 4e29b47..79a04a9 100644
--- a/test/index.spec.ts
+++ b/test/index.spec.ts
@@ -2,11 +2,11 @@
import { beforeEach, describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
-import type { Wrapper } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
import { VideoStream } from '../src'
describe('stream-vue', () => {
- let wrapper: Wrapper
+ let wrapper: VueWrapper
beforeEach(() => {
wrapper = mount(VideoStream, {
propsData: {
diff --git a/vitest.config.ts b/vitest.config.ts
index e24ef29..eeb7a23 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,6 +1,6 @@
import { fileURLToPath } from 'node:url'
import { defineConfig } from 'vitest/config'
-import vuePlugin from '@vitejs/plugin-vue2'
+import vuePlugin from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vuePlugin()],