From ceb314548b5caaffd7544b49419e0c4be5a98380 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Mon, 27 May 2024 16:52:59 +0100 Subject: [PATCH] feat!: update implementation for vue 3 (#113) --- package.json | 17 +- playground/index.html | 15 ++ playground/package.json | 15 ++ playground/src/App.vue | 55 +++++ playground/src/main.js | 4 + playground/vite.config.ts | 6 + pnpm-lock.yaml | 322 ++++++++++++++------------ src/index.ts | 160 +++++-------- test/__snapshots__/index.spec.ts.snap | 2 +- test/index.spec.ts | 4 +- vitest.config.ts | 2 +- 11 files changed, 341 insertions(+), 261 deletions(-) create mode 100644 playground/index.html create mode 100644 playground/package.json create mode 100644 playground/src/App.vue create mode 100644 playground/src/main.js create mode 100644 playground/vite.config.ts 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()],