@uppy/vue: migrate to Composition API with TS & drop Vue 2 support (#…

…5043)
transloadit · Mar 28, 2024 · 1f8ecd7 · 1f8ecd7
1 parent 4f91a0d
commit 1f8ecd7
Show file tree

Hide file tree

Showing 33 changed files with 581 additions and 1,056 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -519,5 +519,11 @@ module.exports = {
         'no-unused-expressions': 'off',
       },
     },
+    {
+      files: ["packages/@uppy/vue/**"],
+      rules: {
+        'react-hooks/rules-of-hooks': 'off',
+      },
+    },
   ],
 }
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "noEmit": true,
     "target": "es2020",

diff --git a/examples/vue/.gitignore b/examples/vue/.gitignore
diff --git a/examples/vue/README.md b/examples/vue/README.md
diff --git a/examples/vue/index.html b/examples/vue/index.html
diff --git a/examples/vue/package.json b/examples/vue/package.json
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
diff --git a/examples/vue/src/main.js b/examples/vue/src/main.js
diff --git a/examples/vue/vite.config.js b/examples/vue/vite.config.js
diff --git a/examples/vue3/package.json b/examples/vue3/package.json
@@ -14,6 +14,7 @@
     "@uppy/progress-bar": "workspace:*",
     "@uppy/tus": "workspace:*",
     "@uppy/vue": "workspace:*",
+    "@uppy/webcam": "workspace:*",
     "vue": "^3.2.33"
   },
   "devDependencies": {

diff --git a/examples/vue3/src/App.vue b/examples/vue3/src/App.vue
@@ -1,7 +1,3 @@
-<script setup>
-import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'
-</script>
-
 <template>
   <div id="app">
     <!-- <HelloWorld msg="Welcome to Uppy Vue Demo"/> -->
@@ -61,23 +57,32 @@ import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'
   </div>
 </template>
 
+<script setup>
+import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'
+</script>
+
 <script>
 import Uppy from '@uppy/core'
 import Tus from '@uppy/tus'
+import Webcam from '@uppy/webcam'
 import { defineComponent } from 'vue'
 
 const { VITE_TUS_ENDPOINT: TUS_ENDPOINT } = import.meta.env
 
 export default defineComponent({
   computed: {
     uppy: () =>
-      new Uppy({ id: 'uppy1', autoProceed: true, debug: true }).use(Tus, {
-        endpoint: TUS_ENDPOINT,
-      }),
+      new Uppy({ id: 'uppy1', autoProceed: true, debug: true })
+        .use(Tus, {
+          endpoint: TUS_ENDPOINT,
+        })
+        .use(Webcam),
     uppy2: () =>
-      new Uppy({ id: 'uppy2', autoProceed: false, debug: true }).use(Tus, {
-        endpoint: TUS_ENDPOINT,
-      }),
+      new Uppy({ id: 'uppy2', autoProceed: false, debug: true })
+        .use(Tus, {
+          endpoint: TUS_ENDPOINT,
+        })
+        .use(Webcam),
   },
   data() {
     return {

diff --git a/packages/@uppy/file-input/src/index.ts b/packages/@uppy/file-input/src/index.ts
@@ -1 +1,2 @@
 export { default } from './FileInput.tsx'
+export type { FileInputOptions } from './FileInput.tsx'
diff --git a/packages/@uppy/vue/.npmignore b/packages/@uppy/vue/.npmignore
@@ -1 +1 @@
-# This file need to be there so .gitignored files are still uploaded to the npm registry.
+tsconfig.*
diff --git a/packages/@uppy/vue/package.json b/packages/@uppy/vue/package.json
@@ -2,12 +2,13 @@
   "name": "@uppy/vue",
   "version": "1.1.2",
   "license": "MIT",
+  "type": "module",
   "main": "lib/index.js",
   "dependencies": {
     "shallow-equal": "^1.2.1"
   },
   "devDependencies": {
-    "vue": "^2.6.14"
+    "vue": "^3.4.21"
   },
   "peerDependencies": {
     "@uppy/core": "workspace:^",
@@ -16,7 +17,7 @@
     "@uppy/file-input": "workspace:^",
     "@uppy/progress-bar": "workspace:^",
     "@uppy/status-bar": "workspace:^",
-    "vue": ">=2.6.11"
+    "vue": ">=3.0.0"
   },
   "peerDependenciesMeta": {
     "@uppy/dashboard": {