From 8e9b21820ebb56840308ddfb6f4a8e6eb1169d23 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 29 Apr 2024 17:00:49 +0530
Subject: [PATCH] feat: setup composables for vue 2.7 (#9305)

* feat: setup vuelitdate for vue 2.7

* feat: add all composables

* feat: return track method

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 app/javascript/dashboard/composables/index.js | 12 ++++++++
 app/javascript/dashboard/composables/route.js | 30 +++++++++++++++++++
 app/javascript/dashboard/composables/store.js | 23 ++++++++++++++
 config/webpack/environment.js                 |  6 ++++
 package.json                                  |  4 ++-
 yarn.lock                                     | 19 ++++++++++++
 6 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/dashboard/composables/index.js
 create mode 100644 app/javascript/dashboard/composables/route.js
 create mode 100644 app/javascript/dashboard/composables/store.js

diff --git a/app/javascript/dashboard/composables/index.js b/app/javascript/dashboard/composables/index.js
new file mode 100644
index 000000000..4e600e7c3
--- /dev/null
+++ b/app/javascript/dashboard/composables/index.js
@@ -0,0 +1,12 @@
+import { getCurrentInstance } from 'vue';
+
+export const useTrack = () => {
+  const vm = getCurrentInstance();
+  if (!vm) throw new Error('must be called in setup');
+
+  return vm.proxy.$track;
+};
+
+export function useAlert(message, action) {
+  bus.$emit('newToastMessage', message, action);
+}
diff --git a/app/javascript/dashboard/composables/route.js b/app/javascript/dashboard/composables/route.js
new file mode 100644
index 000000000..896e7d969
--- /dev/null
+++ b/app/javascript/dashboard/composables/route.js
@@ -0,0 +1,30 @@
+import { getCurrentInstance, reactive, watchEffect } from 'vue';
+
+/**
+ * Returns the current route location. Equivalent to using `$route` inside
+ * templates.
+ */
+export function useRoute() {
+  const instance = getCurrentInstance();
+  const route = reactive(Object.assign({}, instance.proxy.$root.$route));
+  watchEffect(() => {
+    Object.assign(route, instance.proxy.$root.$route);
+  });
+
+  return route;
+}
+
+/**
+ * Returns the router instance. Equivalent to using `$router` inside
+ * templates.
+ */
+export function useRouter() {
+  const instance = getCurrentInstance();
+  const router = instance.proxy.$root.$router;
+  watchEffect(() => {
+    if (router) {
+      Object.assign(router, instance.proxy.$root.$router);
+    }
+  });
+  return router;
+}
diff --git a/app/javascript/dashboard/composables/store.js b/app/javascript/dashboard/composables/store.js
new file mode 100644
index 000000000..f9edd184a
--- /dev/null
+++ b/app/javascript/dashboard/composables/store.js
@@ -0,0 +1,23 @@
+import { computed } from 'vue';
+import { getCurrentInstance } from 'vue';
+
+export const useStore = () => {
+  const vm = getCurrentInstance();
+  if (!vm) throw new Error('must be called in setup');
+  return vm.proxy.$store;
+};
+
+export const useStoreGetters = () => {
+  const store = useStore();
+  return Object.fromEntries(
+    Object.keys(store.getters).map(getter => [
+      getter,
+      computed(() => store.getters[getter]),
+    ])
+  );
+};
+
+export const mapGetter = key => {
+  const store = useStore();
+  return computed(() => store.getters[key]);
+};
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index 22fe00778..0cfcfe1ce 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -28,6 +28,12 @@ environment.loaders.keys().forEach(loaderName => {
 environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
 environment.loaders.prepend('vue', vue);
 
+environment.loaders.append('mjs-comptaibility-loader', {
+  test: /\.mjs$/,
+  include: /node_modules/,
+  type: 'javascript/auto',
+});
+
 environment.loaders.append('opus-ogg', {
   test: /encoderWorker\.min\.js$/,
   loader: 'file-loader',
diff --git a/package.json b/package.json
index 2df499112..3d3d0e699 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,8 @@
     "@sentry/vue": "^6.19.7",
     "@sindresorhus/slugify": "1.1.0",
     "@tailwindcss/typography": "^0.5.9",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
     "activestorage": "^5.2.6",
     "autoprefixer": "^10.4.14",
     "axios": "^1.6.0",
@@ -167,4 +169,4 @@
       "scss-lint"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index b032a24b2..00d10a35b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6793,6 +6793,20 @@
     source-map "0.5.6"
     tsconfig "^7.0.0"
 
+"@vuelidate/core@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.3.tgz#40468c5ed15b72bde880a026b0699c2f0f1ecede"
+  integrity sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==
+  dependencies:
+    vue-demi "^0.13.11"
+
+"@vuelidate/validators@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.4.tgz#0a88a7b2b18f15fd9c384095593f369a6f7384e9"
+  integrity sha512-odTxtUZ2JpwwiQ10t0QWYJkkYrfd0SyFYhdHH44QQ1jDatlZgTh/KRzrWVmn/ib9Gq7H4hFD4e8ahoo5YlUlDw==
+  dependencies:
+    vue-demi "^0.13.11"
+
 "@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
@@ -20515,6 +20529,11 @@ vue-color@2.8.1:
     material-colors "^1.0.0"
     tinycolor2 "^1.1.2"
 
+vue-demi@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
 vue-docgen-api@^4.44.15:
   version "4.73.0"
   resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.73.0.tgz#13ef47c349374f5fd375093199085bd83e6b096c"