chore: use vite as build system for assets and fix error when buildin…

…g with it

.env

@@ -33,7 +33,7 @@ DATABASE_URL="postgresql://symfony:[email protected]:5432/app?serverVersion=13&
 ###< doctrine/doctrine-bundle ###
 ###> google/apiclient ###
 GOOGLE_API_KEY=
-GOOGLE_API_KEY_FRONT=
+VITE_GOOGLE_API_KEY_FRONT=
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 GOOGLE_AUTH_CONFIG=%kernel.project_dir%/path/to/file.json
@@ -45,6 +45,7 @@ GOOGLE_AUTH_CONFIG=%kernel.project_dir%/path/to/file.json
 
 ###> sentry/sentry-symfony ###
 SENTRY_DSN=
+VITE_SENTRY_DSN=
 ###< sentry/sentry-symfony ###
 
 MAIL_CONTACT_EMAIL=

.gitignore

@@ -12,13 +12,6 @@
 .phpunit.result.cache
 /phpunit.xml
 ###< symfony/phpunit-bridge ###
-###> symfony/webpack-encore-bundle ###
-/node_modules/
-/public/build/
-npm-debug.log
-yarn-error.log
-###< symfony/webpack-encore-bundle ###
-
 hosts.yml
 
 /public/images/
@@ -35,3 +28,8 @@ hosts.yml
 /phpunit.xml
 .phpunit.result.cache
 ###< phpunit/phpunit ###
+
+###> pentatrion/vite-bundle ###
+/node_modules/
+/public/build/
+###< pentatrion/vite-bundle ###

assets/css/app.scss

@@ -9,18 +9,17 @@
 $menu-item-active-background-color: #5B87AE;
 
 // Import Bulma and Buefy styles
-@import "~bulma";
-@import "~buefy/src/scss/buefy";
+@import "bulma/bulma";
+@import "buefy/src/scss/buefy";
 
 // VENDOR
-@import "~vue2-dropzone/dist/vue2Dropzone.min.css";
-@import '~vue-select/dist/vue-select.css';
-@import '~vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
-@import '~@creativebulma/bulma-badge/dist/bulma-badge.css';
+@import "vue2-dropzone/dist/vue2Dropzone.min.css";
+@import 'vue-select/dist/vue-select.css';
+@import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
+@import '@creativebulma/bulma-badge/dist/bulma-badge.css';
 
 
 // CUSTOMS
-//@import "global.css";
 @import "components/publication-type.css";
 @import "components/forum.css";
 @import "components/card-horizontal";
@@ -29,25 +28,3 @@ $menu-item-active-background-color: #5B87AE;
   border-bottom: 1px solid #f5f5f5
 }
 
-
-
-/*
-
-@import "heading.css";
-@import "components/menu.css";
-@import "components/navbar.css";
-@import "components/footer.css";
-@import "components/comment.css";
-
-@import "modules/formatting.css";
-@import "modules/editor.css";
-@import "modules/login.css";
-@import "modules/publication-list.css";
-@import "modules/message.css";
-
-@import "components/featured.css";
-@import "components/buttons.css";
-@import "components/search.css";
-
-@import "bc.css";
-*/

assets/js/App.vue

@@ -14,8 +14,8 @@
 </template>
 
 <script>
-import Header from './components/global/Header';
-import Footer from './components/global/Footer';
+import Header from './components/global/Header.vue';
+import Footer from './components/global/Footer.vue';
 import axios from 'axios';
 import {mapGetters} from 'vuex';
 

assets/js/api/admin/attribute.js

@@ -4,11 +4,21 @@ import axios from 'axios';
 
 export default {
   addStyle({name}) {
-    return axios.post(Routing.generate('api_admin_attribute_style_add'), {name})
+    return axios.post(Routing.generate('api_admin_attribute_style_add'), {name},
+        {
+          headers: {
+            'Content-Type': 'application/ld+json'
+          }
+        })
     .then(resp => resp.data);
   },
   addInstrument({name, musicianName}) {
-    return axios.post(Routing.generate('api_admin_attribute_instrument_add'), {name, musicianName})
+    return axios.post(Routing.generate('api_admin_attribute_instrument_add'), {name, musicianName},
+        {
+          headers: {
+            'Content-Type': 'application/ld+json'
+          }
+        })
     .then(resp => resp.data);
   },
 }

assets/js/api/admin/featured.js

@@ -8,11 +8,21 @@ export default {
       level,
       title,
       description
-    })
+    },
+        {
+          headers: {
+            'Content-Type': 'application/ld+json'
+          }
+        })
     .then(resp => resp.data);
   },
   editFeatured({featuredId, title, description}) {
-    return axios.post(Routing.generate('api_admin_publication_featured_edit', {id: featuredId}), {title, description})
+    return axios.post(Routing.generate('api_admin_publication_featured_edit', {id: featuredId}), {title, description},
+        {
+          headers: {
+            'Content-Type': 'application/ld+json'
+          }
+        })
     .then(resp => resp.data);
   },
   removeFeatured(featuredId) {

assets/js/api/comment/comment.js

@@ -4,7 +4,12 @@ import axios from 'axios';
 
 export default {
   postComment(data) {
-    return axios.post(Routing.generate('api_comments_post_collection'), data)
+    return axios.post(Routing.generate('api_comments_post_collection'), data,
+        {
+          headers: {
+            'Content-Type': 'application/ld+json'
+          }
+        })
     .then(resp => resp.data);
   },
   getComments(filters) {

assets/js/api/contact/contact.js

@@ -4,7 +4,12 @@ import axios from 'axios';
 
 export default {
   send({name, message, email}) {
-    return axios.post(Routing.generate('api_contact'), {name, message, email})
+    return axios.post(Routing.generate('api_contact'), {name, message, email},
+        {
+          headers: {
+            'Content-Type': 'application/ld+json'
+          }
+        })
     .then(resp => resp.data);
   }
 }

assets/js/api/forum/forum.js

@@ -28,11 +28,21 @@ export default {
     .then(resp => resp.data);
   },
   postTopicMessage(data) {
-    return axios.post(Routing.generate('api_forum_topic_post_post'), data)
+    return axios.post(Routing.generate('api_forum_topic_post_post'), data,
+        {
+          headers: {
+            'Content-Type': 'application/ld+json'
+          }
+        })
     .then(resp => resp.data)
   },
   postPostMessage(data) {
-    return axios.post(Routing.generate('api_forum_posts_post'), data)
+    return axios.post(Routing.generate('api_forum_posts_post'), data,
+        {
+          headers: {
+            'Content-Type': 'application/ld+json'
+          }
+        })
     .then(resp => resp.data)
   }
 }

assets/js/api/message/message.js

@@ -11,7 +11,12 @@ export default {
     .then(resp => resp.data);
   },
   postMessageInThread({threadId, content}) {
-    return axios.post(Routing.generate('api_message_post'), {content, thread: `/api/message_threads/${threadId}`})
+    return axios.post(Routing.generate('api_message_post'), {content, thread: `/api/message_threads/${threadId}`},
+        {
+          headers: {
+            'Content-Type': 'application/ld+json'
+          }
+        })
     .then(resp => resp.data);
   },
   getThreads() {

assets/js/api/musician/announce.js

@@ -5,14 +5,19 @@ import axios from 'axios';
 export default {
   add({type, note, styles, instrument, locationName, longitude, latitude}) {
     return axios.post(Routing.generate('api_musician_announces_post'), {
-      type,
-      note,
-      styles,
-      instrument,
-      locationName,
-      longitude,
-      latitude
-    })
+          type,
+          note,
+          styles,
+          instrument,
+          locationName,
+          longitude,
+          latitude
+        },
+        {
+          headers: {
+            'Content-Type': 'application/ld+json'
+          }
+        })
     .then(resp => resp.data);
   },
   getByCurrentUser() {

assets/js/api/publication.js

@@ -8,7 +8,12 @@ export default {
     .then(resp => resp.data)
   },
   getPreviewVideo(videoUrl) {
-    return axios.post(Routing.generate('api_publications_video_preview'), {videoUrl})
+    return axios.post(Routing.generate('api_publications_video_preview'), {videoUrl},
+        {
+          headers: {
+            'Content-Type': 'application/ld+json'
+          }
+        })
     .then(resp => resp.data)
   },
   addVideo(payload) {

assets/js/api/user.js

@@ -4,7 +4,11 @@ import axios from 'axios';
 
 export default {
   changePassword({oldPassword, newPassword}) {
-    return axios.post(Routing.generate('_api_/users/change_password_post'), {oldPassword, newPassword})
+    return axios.post(Routing.generate('_api_/users/change_password_post'), {oldPassword, newPassword},{
+      headers: {
+        'Content-Type': 'application/ld+json'
+      }
+    })
     .then(resp => resp.data);
   },
   requestResetPassword(login) {

assets/js/app.js

@@ -1,4 +1,3 @@
-
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
@@ -8,7 +7,6 @@ import relativeDateFilter from "./filters/relative-date-filter";
 import prettyDateFilter from "./filters/pretty-date-filter";
 import VueGtag from "vue-gtag";
 import * as Sentry from "@sentry/vue";
-import { BrowserTracing } from "@sentry/tracing";
 import GmapVue from 'gmap-vue';
 import Buefy from 'buefy'
 import PerfectScrollbar from 'vue2-perfect-scrollbar'
@@ -19,20 +17,29 @@ Vue.use(Buefy, {
   defaultProgrammaticPromise: true
 });
 
-if (process.env.SENTRY_DSN) {
+if (import.meta.env.VITE_SENTRY_DSN) {
   Sentry.init({
     Vue,
-    dsn: process.env.SENTRY_DSN,
+    dsn: import.meta.env.VITE_SENTRY_DSN,
     integrations: [
-      new BrowserTracing({
+      new Sentry.BrowserTracing({
         routingInstrumentation: Sentry.vueRouterInstrumentation(router),
-        tracingOrigins: ["127.0.0.1", "www.musicall.com", /^\//],
       }),
+      new Sentry.Replay(),
     ],
+
     // Set tracesSampleRate to 1.0 to capture 100%
     // of transactions for performance monitoring.
     // We recommend adjusting this value in production
     tracesSampleRate: 1.0,
+
+    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+    tracePropagationTargets: ["127.0.0.1", "www.musicall.com", /^\//],
+
+    // Capture Replay for 10% of all sessions,
+    // plus for 100% of sessions with an error
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
   });
 }
 
@@ -51,7 +58,7 @@ Vue.use(VueGtag, {
 
 Vue.use(GmapVue, {
   load: {
-    key: process.env.GOOGLE_API_KEY_FRONT,
+    key: import.meta.env.VITE_GOOGLE_API_KEY_FRONT,
     libraries: 'places',
   },
   installComponents: true
@@ -77,4 +84,9 @@ new Vue({
       { property: "og:site_name", content: 'MusicAll' },
     ]
   })
-}).$mount("#app");
+}).$mount("#app");
+
+// this  is a special export for images we reference in twig
+import.meta.glob([
+  '../images/**',
+]);

assets/js/components/global/Dropdown.vue

@@ -90,7 +90,7 @@
 
 <script>
 import {mapGetters} from 'vuex';
-import Avatar from "../user/Avatar";
+import Avatar from "../user/Avatar.vue";
 
 export default {
   components: {Avatar},

assets/js/components/global/Footer.vue

@@ -89,7 +89,7 @@
 
 <script>
 import {mapGetters} from 'vuex';
-import Spinner from "./misc/Spinner";
+import Spinner from "./misc/Spinner.vue";
 
 export default {
   components: {Spinner},

assets/js/components/global/Header.vue

@@ -90,8 +90,8 @@
 
 <script>
 import {mapGetters} from 'vuex';
-import Dropdown from './Dropdown';
-import PublicationType from "../publication/PublicationType";
+import Dropdown from './Dropdown.vue';
+import PublicationType from "../publication/PublicationType.vue";
 import searchApi from "../../api/search";
 import {EVENT_TOGGLE_MENU} from '../../constants/events';
 import {debounce} from 'lodash';

assets/js/components/global/Menu.vue

@@ -54,7 +54,7 @@
 <script>
 import {mapGetters} from 'vuex';
 import {EVENT_TOGGLE_MENU} from "../../constants/events";
-import Spinner from '../global/misc/Spinner';
+import Spinner from '../global/misc/Spinner.vue';
 
 export default {
   components: {Spinner},

assets/js/components/user/Avatar.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import Spinner from "../global/misc/Spinner";
+import Spinner from "../global/misc/Spinner.vue";
 
 export default {
   components: {Spinner},