Fix use of vue-resource for Vue 3

biigle · Feb 13, 2025 · e15a62a · e15a62a
1 parent fe4a848
commit e15a62a
Show file tree

Hide file tree

Showing 29 changed files with 99 additions and 73 deletions.
diff --git a/resources/assets/js/annotations/api/exportArea.js b/resources/assets/js/annotations/api/exportArea.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for editing the export area of a volume
  *
@@ -13,4 +15,4 @@
  * resource.delete({id: columeId}).then(...);
  *
  */
-export default Vue.resource('/api/v1/volumes{/id}/export-area');
+export default Resource('/api/v1/volumes{/id}/export-area');
diff --git a/resources/assets/js/annotations/api/volumes.js b/resources/assets/js/annotations/api/volumes.js
@@ -1,11 +1,12 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for the area of images of a volume.
  *
  * var resource = biigle.$require('annotations.api.volumeImageArea');
  *
  * Get the area in m² of all images of the volume:
  * resource.get({id: 1}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/volumes{/id}/images/area');
+export default Resource('api/v1/volumes{/id}/images/area');
+
diff --git a/resources/assets/js/bootstrap.js b/resources/assets/js/bootstrap.js
@@ -1,20 +1,33 @@
 import Vue from 'vue';
-import VueResource from 'vue-resource';
 import { configureCompat } from 'vue'
+import { Resource, Http } from 'vue-resource';
 
 configureCompat({
     FILTERS: false,
 });
 
 window.Vue = Vue;
-window.Vue.use(VueResource);
+
+// Vue resource is not officially supported with Vue 3 and it no longer works as Vue
+// plugin. It can be used stand-alone, though, and this is what we do for now. Any
+// change here would require significant work with the existing resource definitions.
+Vue.resource = function () {
+    console.trace('Vue.resource is deprecated. Import Resource directly.');
+    return Resource(...arguments);
+};
+
+const httpRootElement = document.querySelector('meta[name="http-root"]');
+
+if (httpRootElement) {
+    Http.options.root = httpRootElement.getAttribute('content');
+}
 
 const csrfTokenElement = document.querySelector('meta[name="csrf-token"]');
 
 if (csrfTokenElement) {
     const readMethods = ['HEAD', 'GET', 'OPTIONS'];
 
-    Vue.http.interceptors.push(function(request) {
+    Http.interceptors.push(function(request) {
         // Only add the CSRF token for non-read requests. This is important for
         // remote volume locations and CORS, as it would require a special CORS
         // configuration to allow this header.

diff --git a/resources/assets/js/core/api/annotations.js b/resources/assets/js/core/api/annotations.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for annotations.
  *
@@ -15,10 +17,8 @@
  * Detach a label from an annotation:
  * resource.detachLabel({annotation_label_id: id}).then(...);
  * Note that the annotation label ID is required for this and not the annotation ID!
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/annotations{/id}', {}, {
+export default Resource('api/v1/annotations{/id}', {}, {
     attachLabel: {
         method: 'POST',
         url: 'api/v1/annotations{/id}/labels',

diff --git a/resources/assets/js/core/api/images.js b/resources/assets/js/core/api/images.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for images.
  *
@@ -25,10 +27,8 @@
  *
  * Delete an image:
  * resource.delete({id: 1}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/images{/id}', {}, {
+export default Resource('api/v1/images{/id}', {}, {
     getFile: {
         method: 'GET',
         url: 'api/v1/images{/id}/file',

diff --git a/resources/assets/js/core/api/labelSource.js b/resources/assets/js/core/api/labelSource.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for finding labels from an external source.
  *
@@ -6,7 +8,5 @@
  * Find labels:
  *
  * resource.query({id: 1, query: 'Kolga'}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/label-sources{/id}/find');
+export default Resource('api/v1/label-sources{/id}/find');
diff --git a/resources/assets/js/core/api/labelTree.js b/resources/assets/js/core/api/labelTree.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for label trees.
  *
@@ -29,10 +31,8 @@
  *
  * Detach a user from a label tree:
  * resource.delete({id: 1, user_id: 1}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/label-trees{/id}', {}, {
+export default Resource('api/v1/label-trees{/id}', {}, {
     addAuthorizedProject: {
         method: 'POST',
         url: 'api/v1/label-trees{/id}/authorized-projects',

diff --git a/resources/assets/js/core/api/labelTreeVersion.js b/resources/assets/js/core/api/labelTreeVersion.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for label tree versions.
  *
@@ -8,10 +10,8 @@
 
  * Delete a label tree version:
  * resource.delete({id: 1}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/label-tree-versions{/id}', {}, {
+export default Resource('api/v1/label-tree-versions{/id}', {}, {
     save: {
         method: 'POST',
         url: 'api/v1/label-trees{/id}/version',

diff --git a/resources/assets/js/core/api/labels.js b/resources/assets/js/core/api/labels.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for labels.
  *
@@ -20,10 +22,8 @@
  * Delete a label:
  *
  * resource.delete({id: labelId}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/labels{/id}', {}, {
+export default Resource('api/v1/labels{/id}', {}, {
     save: {
         method: 'POST',
         url: 'api/v1/label-trees{/label_tree_id}/labels',

diff --git a/resources/assets/js/core/api/notifications.js b/resources/assets/js/core/api/notifications.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for DB notifications.
  *
@@ -10,10 +12,8 @@
  * Delete:
  *
  * resource.delete({id: notificationId}).then(...)
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/notifications{/id}', {}, {
+export default Resource('api/v1/notifications{/id}', {}, {
     markRead: {method: 'PUT'},
     markReadAll: {
         method: 'PUT',

diff --git a/resources/assets/js/core/api/projects.js b/resources/assets/js/core/api/projects.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for projects.
  *
@@ -52,10 +54,8 @@
  *
  * Detach a label tree from a project:
  * resource.detachLabelTree({id: 1, label_tree_id: 31}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/projects{/id}', {}, {
+export default Resource('api/v1/projects{/id}', {}, {
     queryVolumes: {
         method: 'GET',
         url: 'api/v1/projects{/id}/volumes',

diff --git a/resources/assets/js/core/api/users.js b/resources/assets/js/core/api/users.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for users.
  *
@@ -29,10 +31,8 @@
  *
  * Query users by name:
  * resource.find({query: 'jo'}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/users{/id}', {}, {
+export default Resource('api/v1/users{/id}', {}, {
     find: {
         method: 'GET',
         url: 'api/v1/users/find{/query}',

diff --git a/resources/assets/js/core/api/volumes.js b/resources/assets/js/core/api/volumes.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for volumes.
  *
@@ -11,7 +13,5 @@
  *
  * Update a volume:
  * resource.update({id: 1}, {name: 'New Name'}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/volumes{/id}');
+export default Resource('api/v1/volumes{/id}');
diff --git a/resources/assets/js/label-trees/api/mergeLabelTrees.js b/resources/assets/js/label-trees/api/mergeLabelTrees.js
@@ -1,11 +1,11 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for merging of label trees.
  *
  * var resource = biigle.$require('api.annotations');
  *
  * Merge label trees:
  * resource.save({id: 1}, {add: [...], remove: [...]}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/label-trees{/id}/merge-labels');
+export default Resource('api/v1/label-trees{/id}/merge-labels');
diff --git a/resources/assets/js/projects/api/attachableVolumes.js b/resources/assets/js/projects/api/attachableVolumes.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for volume that can be attached to a project.
  *
@@ -8,4 +10,4 @@
  * var resource = biigle.$require('api.attachableVolumes');
  * resource.get({id: projectId}).then(...);
  */
-export default Vue.resource('api/v1/projects{/id}/attachable-volumes{/name}');
+export default Resource('api/v1/projects{/id}/attachable-volumes{/name}');
diff --git a/resources/assets/js/projects/api/projectInvitations.js b/resources/assets/js/projects/api/projectInvitations.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for project invitations.
  *
@@ -7,7 +9,7 @@
  * Delete an invitations.
  * resource.delete({id: invitationId}).then(...);
  */
-export default Vue.resource('api/v1/projects{/id}/invitations', {}, {
+export default Resource('api/v1/projects{/id}/invitations', {}, {
     delete: {
         method: 'DELETE',
         url: 'api/v1/project-invitations{/id}',

diff --git a/resources/assets/js/projects/api/volumeStatistics.js b/resources/assets/js/projects/api/volumeStatistics.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for volume statistics.
  *
@@ -8,4 +10,4 @@
  * var resource = biigle.$require('api.volumeStatistics');
  * resource.get({id: volumeId}).then(...);
  */
-export default Vue.resource('api/v1/volumes{/id}/statistics');
+export default Resource('api/v1/volumes{/id}/statistics');
diff --git a/resources/assets/js/reports/api/projectReports.js b/resources/assets/js/reports/api/projectReports.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for requesting reports for projects
  *
@@ -12,4 +14,4 @@
  * }).then(...)
  *
  */
-export default Vue.resource('/api/v1/projects{/id}/reports');
+export default Resource('/api/v1/projects{/id}/reports');
diff --git a/resources/assets/js/reports/api/volumeReports.js b/resources/assets/js/reports/api/volumeReports.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for requesting reports for volumes
  *
@@ -13,4 +15,4 @@
  * }).then(...)
  *
  */
-export default Vue.resource('/api/v1/volumes{/id}/reports');
+export default Resource('/api/v1/volumes{/id}/reports');
diff --git a/resources/assets/js/sync/api/import.js b/resources/assets/js/sync/api/import.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for imports.
  *
@@ -8,7 +10,5 @@
  *
  * Delete an import:
  * resource.delete({token: '123abc'}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/import{/token}');
+export default Resource('api/v1/import{/token}');
diff --git a/resources/assets/js/videos/api/videoAnnotations.js b/resources/assets/js/videos/api/videoAnnotations.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for video annotations.
  *
@@ -29,10 +31,8 @@
  *
  * Detach a label:
  * resource.detachLabel({id: annotationLabelId}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/video-annotations{/id}', {}, {
+export default Resource('api/v1/video-annotations{/id}', {}, {
     query: {
         method: 'GET',
         url: 'api/v1/videos{/id}/annotations',

diff --git a/resources/assets/js/videos/api/videos.js b/resources/assets/js/videos/api/videos.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for videos.
  *
@@ -11,10 +13,8 @@
  *
  * Delete a video:
  * resource.delete({id: videoId}, {force: false}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/videos{/id}', {}, {
+export default Resource('api/v1/videos{/id}', {}, {
     save: {
         method: 'POST',
         url: 'api/v1/projects{/id}/videos',

diff --git a/resources/assets/js/volumes/api/annotationSessions.js b/resources/assets/js/volumes/api/annotationSessions.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
 /**
  * Resource for annotation sessions.
  *
@@ -21,10 +23,8 @@
  *
  * Delete a session:
  * resource.delete({id: 2}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/annotation-sessions{/id}', {}, {
+export default Resource('api/v1/annotation-sessions{/id}', {}, {
     query: {
         method: 'GET',
         url: 'api/v1/volumes{/volume_id}/annotation-sessions',