Stop using Vue's reactivity transform

dashboard/package.json

@@ -41,7 +41,6 @@
     "@types/node": "^22.7.5",
     "@vitejs/plugin-vue": "^5.1.3",
     "@vitest/coverage-v8": "^2.0.5",
-    "@vue-macros/reactivity-transform": "^1.0.4",
     "@vue/tsconfig": "^0.5.1",
     "bootstrap": "^5.3.3",
     "happy-dom": "^15.7.4",

dashboard/src/components/PackageLocationCard.vue

@@ -3,21 +3,22 @@ import UUID from "@/components/UUID.vue";
 import { openPackageLocationDialog } from "@/dialogs";
 import { useAuthStore } from "@/stores/auth";
 import { usePackageStore } from "@/stores/package";
+import { ref } from "vue";
 
 const authStore = useAuthStore();
 const packageStore = usePackageStore();
 
-let failed = $ref<boolean | null>(null);
+let failed = ref<boolean | null>(null);
 
 const choose = async () => {
-  failed = false;
+  failed.value = false;
   const locationId = await openPackageLocationDialog(
     packageStore.current?.locationId,
   );
   if (!locationId) return;
   const error = await packageStore.move(locationId);
   if (error) {
-    failed = true;
+    failed.value = true;
   }
 };
 </script>

dashboard/src/components/PreservationActionCollapse.vue

@@ -4,54 +4,58 @@ import PackageReviewAlert from "@/components/PackageReviewAlert.vue";
 import StatusBadge from "@/components/StatusBadge.vue";
 import { useAuthStore } from "@/stores/auth";
 import Collapse from "bootstrap/js/dist/collapse";
-import { onMounted, watch } from "vue";
+import { onMounted, watch, ref, toRef } from "vue";
 import IconCircleChevronDown from "~icons/akar-icons/circle-chevron-down";
 import IconCircleChevronUp from "~icons/akar-icons/circle-chevron-up";
 
 const authStore = useAuthStore();
 
-const { action, index, toggleAll } = defineProps<{
+const props = defineProps<{
   action: api.EnduroPackagePreservationAction;
   index: number;
   toggleAll: boolean | null;
 }>();
 
+const action = toRef(props, "action");
+const index = toRef(props, "index");
+const toggleAll = toRef(props, "toggleAll");
+
 const emit = defineEmits<{
   (e: "update:toggleAll", value: null): void;
 }>();
 
-let shown = $ref<boolean>(false);
-const el = $ref<HTMLElement | null>(null);
+let shown = ref<boolean>(false);
+const el = ref<HTMLElement | null>(null);
 let col: Collapse | null = null;
 
 onMounted(() => {
-  if (!el) return;
-  col = new Collapse(el, { toggle: false });
+  if (!el.value) return;
+  col = new Collapse(el.value, { toggle: false });
 });
 
 const toggle = () => {
-  shown ? hide() : show();
+  shown.value ? hide() : show();
 };
 
 const show = () => {
   col?.show();
   emit("update:toggleAll", null);
-  shown = true;
+  shown.value = true;
 };
 
 const hide = () => {
   col?.hide();
   emit("update:toggleAll", null);
-  shown = false;
+  shown.value = false;
 };
 
-watch($$(toggleAll), () => {
-  if (toggleAll === null) return;
-  toggleAll ? show() : hide();
+watch(toggleAll, () => {
+  if (toggleAll.value === null) return;
+  toggleAll.value ? show() : hide();
 });
 
-let expandCounter = $ref<number>(0);
-watch($$(expandCounter), () => show());
+let expandCounter = ref<number>(0);
+watch(expandCounter, () => show());
 </script>
 
 <template>

dashboard/src/components/Sidebar.vue

@@ -4,7 +4,7 @@ import { useLayoutStore } from "@/stores/layout";
 import { useRouter } from "vue-router/auto";
 import Collapse from "bootstrap/js/dist/collapse";
 import Offcanvas from "bootstrap/js/dist/offcanvas";
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import RawIconBundleLine from "~icons/clarity/bundle-line?raw&width=2em&height=2em";
 import IconCaretLine from "~icons/clarity/caret-line";
 import RawIconLogoutLine from "~icons/clarity/logout-line?raw&width=2em&height=2em";
@@ -38,12 +38,12 @@ const menuItems = [
 ];
 
 let offcanvasInstance = <Offcanvas | null>null;
-const offcanvas = $ref<HTMLElement | null>(null);
-const collapse = $ref<HTMLElement | null>(null);
+const offcanvas = ref<HTMLElement | null>(null);
+const collapse = ref<HTMLElement | null>(null);
 
 onMounted(() => {
-  if (offcanvas) offcanvasInstance = new Offcanvas(offcanvas);
-  if (collapse) new Collapse(collapse);
+  if (offcanvas.value) offcanvasInstance = new Offcanvas(offcanvas.value);
+  if (collapse.value) new Collapse(collapse.value);
 });
 
 const closeOffcanvas = () => {

dashboard/src/components/UUID.vue

@@ -1,22 +1,18 @@
 <script setup lang="ts">
 import { useClipboard } from "@vueuse/core";
 import Tooltip from "bootstrap/js/dist/tooltip";
-import { toRef, watch } from "vue";
+import { ref, toRef, watch } from "vue";
 import IconCheck from "~icons/akar-icons/check";
 import IconCopy from "~icons/akar-icons/copy";
 
 const props = defineProps<{ id?: string }>();
-
-// $toRef can't be used because of https://github.com/vuejs/core/issues/6349.
 const source = toRef(props, "id", "");
-
 const { copy, copied, isSupported } = useClipboard({ source });
-
-const el = $ref<HTMLElement | null>(null);
+const el = ref<HTMLElement | null>(null);
 let tooltip: Tooltip | null = null;
 
-watch($$(el), () => {
-  if (el) tooltip = new Tooltip(el);
+watch(el, () => {
+  if (el.value) tooltip = new Tooltip(el.value);
 });
 
 watch(copied, (val) => {

dashboard/src/pages/packages/[id]/index.vue

@@ -7,11 +7,12 @@ import StatusBadge from "@/components/StatusBadge.vue";
 import UUID from "@/components/UUID.vue";
 import { useAuthStore } from "@/stores/auth";
 import { usePackageStore } from "@/stores/package";
+import { computed, ref } from "vue";
 
 const authStore = useAuthStore();
 const packageStore = usePackageStore();
 
-const createAipWorkflow = $computed(
+const createAipWorkflow = computed(
   () =>
     packageStore.current_preservation_actions?.actions?.filter(
       (action) =>
@@ -21,7 +22,7 @@ const createAipWorkflow = $computed(
     )[0],
 );
 
-let toggleAll = $ref<boolean | null>(false);
+let toggleAll = ref<boolean | null>(false);
 </script>
 
 <template>

dashboard/src/pages/packages/index.vue

@@ -13,7 +13,7 @@ import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
 import { usePackageStore } from "@/stores/package";
 import { useRoute, useRouter } from "vue-router/auto";
-import { watch } from "vue";
+import { ref, watch } from "vue";
 
 // General icons.
 import IconInfoFill from "~icons/akar-icons/info-fill";
@@ -41,17 +41,17 @@ const router = useRouter();
 
 layoutStore.updateBreadcrumb([{ text: "Packages" }]);
 
-const el = $ref<HTMLElement | null>(null);
+const el = ref<HTMLElement | null>(null);
 let tooltip: Tooltip | null = null;
 
-let showLegend = $ref(false);
+let showLegend = ref(false);
 const toggleLegend = () => {
-  showLegend = !showLegend;
+  showLegend.value = !showLegend.value;
   if (tooltip) tooltip.hide();
 };
 
 onMounted(() => {
-  if (el) tooltip = new Tooltip(el);
+  if (el.value) tooltip = new Tooltip(el.value);
   packageStore.filters.status = <PackageListStatusEnum>route.query.status;
 });
 

dashboard/tsconfig.vitest.json

@@ -4,6 +4,6 @@
   "compilerOptions": {
     "composite": true,
     "lib": [],
-    "types": ["node", "jsdom", "@vue-macros/reactivity-transform/macros-global"]
+    "types": ["node", "jsdom"]
   }
 }

dashboard/vite.config.ts

@@ -1,7 +1,6 @@
 import { fileURLToPath, URL } from "node:url";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import ReactivityTransform from "@vue-macros/reactivity-transform/vite";
 import Icons from "unplugin-icons/vite";
 import VueRouter from "unplugin-vue-router/vite";
 import vueDevTools from "vite-plugin-vue-devtools";
@@ -14,7 +13,6 @@ export default defineConfig({
     }),
     vue({}),
     vueDevTools(),
-    ReactivityTransform(),
     Icons({ compiler: "vue3" }),
   ],
   server: {