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

@@ -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);
+}

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;
+}

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]);
+};

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',

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"
     ]
   }
-}
+}

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"