feat: fresh output targets for all frameworks with treeshaking support +

vue 3 bindings

fixes vime-js#82, fixes vime-js#88, fixes vime-js#71, fixes vime-js#92

.eslintrc.json

@@ -10,14 +10,7 @@
   ],
   "ignorePatterns": [
     "docs/**",
-    "packages/angular/src/directives/**",
-    "packages/react/src/components.ts",
-    "packages/react/src/react-component-lib/**",
-    "packages/svelte/src/components/**",
-    "packages/svelte/src/svelte/**",
-    "packages/svelte/src/components.ts",
-    "packages/vue/src/components.ts",
-    "packages/vue/src/vue-component-lib/**"
+    "packages/angular/src/directives/**"
   ],
   "rules": {
     "no-console": "off",

.gitignore

@@ -8,14 +8,18 @@ packages/*/www/
 packages/*/loader/
 packages/*/cypress/videos/
 packages/*/cypress/screenshots/
-packages/angular/src/directives/
+packages/angular/src/components.ts
+packages/angular/src/VimeModule.ts
+packages/angular/src/components/
 packages/react/src/components.ts
-packages/react/src/react-component-lib/
+packages/react/src/components
 packages/svelte/src/components.ts
 packages/svelte/src/components/
 packages/svelte/src/svelte/
 packages/vue/src/components.ts
-packages/vue/src/vue-component-lib/
+packages/vue/src/components/
+packages/vue-next/src/components.ts
+packages/vue-next/src/components/
 
 *~
 *.sw[mnpcod]

README.md

@@ -141,7 +141,8 @@ There are also [examples](./examples) for loading and using Vime with:
 - [Rollup](./examples/rollup)
 - [Webpack](./examples/webpack)
 - [React](./examples/react)
-- [Vue](./examples/vue)
+- [Vue 2](./examples/vue)
+- [Vue 3](./examples/vue-next)
 - [Svelte](./examples/svelte)
 - [Stencil](./examples/stencil)
 - [Angular](./examples/angular)

docs/docs/components/ui/controls/control.md

@@ -26,7 +26,8 @@ defaultValue="html"
 values={[
 { label: 'HTML', value: 'html' },
 { label: 'React', value: 'react' },
-{ label: 'Vue', value: 'vue' },
+{ label: 'Vue 2', value: 'vue 2' },
+{ label: 'Vue 3', value: 'vue 3' },
 { label: 'Svelte', value: 'svelte' },
 { label: 'Stencil', value: 'stencil' },
 { label: 'Angular', value: 'angular' }
@@ -95,7 +96,7 @@ function PlaybackControl() {
 </TabItem>
 
 
-<TabItem value="vue">
+<TabItem value="vue 2">
 
 ```html {2-10,16,24} title="playback-control.vue"
 <template>
@@ -116,7 +117,7 @@ function PlaybackControl() {
     VimeControl,
     VimeIcon,
     VimeTooltip,
-  } from "@vime/vue";
+  } from '@vime/vue';
 
   export default {
     mixins: [VimeMixin(['paused', 'i18n'])]
@@ -139,7 +140,7 @@ function PlaybackControl() {
     },
     methods: {
       onClick() {
-        this.paused = !paused;
+        this.paused = !this.paused;
       },
     },
   };,
@@ -149,6 +150,66 @@ function PlaybackControl() {
 </TabItem>
 
 
+<TabItem value="vue 3">
+
+```html {2-10,19,27} title="playback-control.vue"
+<template>
+  <div ref="domRef">
+    <VimeControl
+      keys="k"
+      :label="i18n.playback"
+      :pressed="paused"
+      @click="onClick"
+    >
+      <VimeIcon :href="icon" />
+      <VimeTooltip>{{tooltip}} (k)</VimeTooltip>
+    </VimeControl>
+  </div>
+</template>
+
+<script>
+  import { defineComponent, ref, computed } from 'vue';
+  import {
+    usePlayerContext,
+    VimeControl,
+    VimeIcon,
+    VimeTooltip,
+  } from '@vime/vue-next';
+
+  export default defineComponent({
+    name: 'PlaybackControl',
+    components: {
+      VimeControl,
+      VimeIcon,
+      VimeTooltip,
+    },
+    setup() {
+      const domRef = ref(null);
+
+      const paused = usePlayerContext(domRef, 'paused', true);
+      const i18n = usePlayerContext(domRef, 'i18n', {});
+
+      const icon = computed(() =>
+        paused.value ? '#vime-play' : '#vime-pause'
+      );
+      const tooltip = computed(() =>
+        paused.value ? i18n.value.play : i18n.value.pause
+      );
+
+      return { domRef, paused, i18n, icon, tooltip };
+    },
+    methods: {
+      onClick() {
+        this.paused = !this.paused;
+      },
+    },
+  });
+</script>
+```
+
+</TabItem>
+
+
 <TabItem value="svelte">
 
 ```tsx

docs/docs/getting-started/installation.md

@@ -187,12 +187,15 @@ installation instructions.
 
 ## Vue
 
+:::info
+Vime now supports both Vue 2 (`@vime/vue`) and Vue 3 (`@vime/vue-next`) 🚀
+:::
+
 You have two options with Vue due to it having perfect 
 [web components support](https://custom-elements-everywhere.com/#vue). You can either follow the 
 instructions [here](https://stenciljs.com/docs/vue) for loading the web components in their natural 
-form, or you can use the Vue bindings from the `@vime/vue` package, which wraps all the web components 
-inside Vue components so you can feel right at home. Some other advantages for using `@vime/vue` 
-include typed + documented components, and additional helpers for extending Vime with custom components.
+form, or you can use the Vue bindings from Vime, which wrap all the web components 
+inside Vue components so you can feel right at home.
 
 Let's first load the CSS for the player themes, which are small files that only contain a bunch of
 CSS variables for styling the player. Add the following to the root of your application...
@@ -205,11 +208,15 @@ import '@vime/core/themes/default.css';
 import '@vime/core/themes/light.css';
 ```
 
-Alternatively, you can load the themes from the [CDN](#cdn). Now let's install the `@vime/vue` package
+Alternatively, you can load the themes from the [CDN](#cdn). Now let's install the package
 by running the following in our terminal...
 
 ```bash
+# Vue 2
 npm i @vime/vue
+
+# Vue 3
+npm i @vime/vue-next
 ```
 
 And ... we're all done 🎉   That was anticlimactic 😞  Let's move onto [setting up our player](./player).

docs/docs/welcome/introduction.md

@@ -152,7 +152,8 @@ using Vime with:
 - [Rollup](https://github.com/vime-js/vime/tree/master/examples/rollup)
 - [Webpack](https://github.com/vime-js/vime/tree/master/examples/webpack)
 - [React](https://github.com/vime-js/vime/tree/master/examples/react)
-- [Vue](https://github.com/vime-js/vime/tree/master/examples/vue)
+- [Vue 2](https://github.com/vime-js/vime/tree/master/examples/vue)
+- [Vue 3](https://github.com/vime-js/vime/tree/master/examples/vue-next)
 - [Svelte](https://github.com/vime-js/vime/tree/master/examples/svelte)
 - [Stencil](https://github.com/vime-js/vime/tree/master/examples/stencil)
 - [Angular](https://github.com/vime-js/vime/tree/master/examples/angular)

examples/README.md

@@ -8,7 +8,8 @@ and [Components API](https://vimejs.com/components/core/player) for more informa
 - [Rollup](./rollup)
 - [Webpack](./webpack)
 - [React](./react)
-- [Vue](./vue)
+- [Vue 2](./vue)
+- [Vue 3](./vue-next)
 - [Svelte](./svelte)
 - [Stencil](./stencil)
 - [Angular](./angular)

examples/angular/package.json

@@ -8,30 +8,30 @@
     "serve": "ng serve"
   },
   "dependencies": {
-    "@angular/animations": "~10.0.14",
-    "@angular/common": "~10.0.14",
-    "@angular/compiler": "~10.0.14",
-    "@angular/core": "~10.0.14",
-    "@angular/forms": "~10.0.14",
-    "@angular/platform-browser": "~10.0.14",
-    "@angular/platform-browser-dynamic": "~10.0.14",
-    "@angular/router": "~10.0.14",
-    "@vime/angular": "^4.0.0",
-    "@vime/core": "^4.0.0",
-    "rxjs": "~6.5.5",
+    "@angular/animations": "~10.2.1",
+    "@angular/common": "~10.2.1",
+    "@angular/compiler": "~10.2.1",
+    "@angular/core": "~10.2.1",
+    "@angular/forms": "~10.2.1",
+    "@angular/platform-browser": "~10.2.1",
+    "@angular/platform-browser-dynamic": "~10.2.1",
+    "@angular/router": "~10.2.1",
+    "@vime/angular": "^4.2.0",
+    "@vime/core": "^4.2.0",
+    "rxjs": "~6.6.3",
     "tslib": "^2.0.1",
-    "zone.js": "~0.10.3"
+    "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1000.8",
-    "@angular/cli": "~10.0.8",
-    "@angular/compiler-cli": "~10.0.14",
+    "@angular-devkit/build-angular": "~0.1002.0",
+    "@angular/cli": "~10.2.0",
+    "@angular/compiler-cli": "~10.2.1",
     "@types/jest": "^26.0.12",
-    "@types/node": "^12.12.54",
+    "@types/node": "^14.14.6",
     "codelyzer": "^6.0.0",
-    "jest-diff": "^26.4.2",
-    "pretty-format": "^26.4.2",
-    "ts-node": "~8.3.0",
-    "typescript": "^3.9.7"
+    "jest-diff": "^26.6.2",
+    "pretty-format": "^26.6.2",
+    "ts-node": "~9.0.0",
+    "typescript": "^4.0.5"
   }
 }

examples/angular/src/app/app.component.html

@@ -1,6 +1,6 @@
 <div id="container">
   <vime-player 
-    #player 
+    #player
     playsinline
     (vPlaybackReady)="onPlaybackReady()"
   >