Migration/vuejs3

javascripts/handlers/revisions.js

@@ -1,21 +1,23 @@
 import SpinnerLoader from '../../tools/bazar/presentation/javascripts/components/SpinnerLoader.js'
 
-Vue.prototype.window = window
+// New for VueJs3
+const { createApp } = Vue
 
-new Vue({
-  el: '.revisions-container',
+const app = createApp({
   components: { SpinnerLoader },
-  data: {
-    isEntry: false,
-    revisions: [],
-    selectedRevision: null,
-    viewTypes: {
-      'current': _t('REVISIONS_PREVIEW'),
-      'commit_diff': _t('REVISIONS_COMMIT_DIFF'),
-      'diff': _t('REVISIONS_DIFF')
-    },
-    displayWikiCode: false,
-    selectedViewType: 'current',
+  data() {
+    return {
+      isEntry: false,
+      revisions: [],
+      selectedRevision: null,
+      viewTypes: {
+        'current': _t('REVISIONS_PREVIEW'),
+        'commit_diff': _t('REVISIONS_COMMIT_DIFF'),
+        'diff': _t('REVISIONS_DIFF')
+      },
+      displayWikiCode: false,
+      selectedViewType: 'current',
+    }
   },
   computed: {
     firstRevision() { return this.revisions[this.revisions.length - 1] },
@@ -24,8 +26,8 @@ new Vue({
     previewUrl() { return wiki.url(`${wiki.pageTag}/iframe`, { time: this.selectedRevision.phpTime, iframelinks: 0 }) }
   },
   mounted() {
-    this.isEntry = this.$el.dataset.isEntry == "1"
-    this.revisions = JSON.parse(this.$el.dataset.revisions).map(rev => {
+    this.isEntry = this.$el.parentNode.dataset.isEntry == "1"
+    this.revisions = JSON.parse(this.$el.parentNode.dataset.revisions).map(rev => {
       rev.id = parseInt(rev.id)
       rev.phpTime = rev.time
       rev.time = new Date(rev.time)
@@ -80,7 +82,7 @@ new Vue({
       if (newRevision) this.selectedRevision = newRevision
     },
     calculateRevisionsPlaceInTimeLine() {
-      let revisionsCount = parseInt(this.$el.dataset.revisionsCount)
+      let revisionsCount = parseInt(this.$el.parentNode.dataset.revisionsCount)
       let timelineLength = this.lastRevision.timestamp - this.firstRevision.timestamp
       let prevRevision
       this.revisions.forEach((rev, index) => {
@@ -113,4 +115,7 @@ new Vue({
       return rev1.time.setHours(0,0,0,0) == rev2.time.setHours(0,0,0,0) ? 1.3 : 3
     },
   }
-})
+})
+
+app.config.globalProperties.window = window
+app.mount('.revisions-container');

javascripts/vendor/extract-files-from-node-modules.sh

@@ -17,15 +17,21 @@ mkdir -p styles/vendor/bootstrap/css && \
 mkdir -p styles/vendor/bootstrap && cp -f -r node_modules/bootstrap/dist/fonts styles/vendor/bootstrap
 
 #  Vue
-mkdir -p javascripts/vendor/vue && cp -f node_modules/vue/dist/{vue.js,vue.min.js} javascripts/vendor/vue
+mkdir -p javascripts/vendor/vue && \
+  cp -f node_modules/@vue/compat/dist/vue.global.js javascripts/vendor/vue/vue.js && \
+  cp -f node_modules/@vue/compat/dist/vue.global.prod.js javascripts/vendor/vue/vue.min.js
 # Vue Select
 mkdir -p javascripts/vendor/vue-select && cp -f node_modules/vue-select/dist/vue-select.js javascripts/vendor/vue-select/vue-select.min.js
 mkdir -p styles/vendor/vue-select && cp -f node_modules/vue-select/dist/vue-select.css styles/vendor/vue-select
 # Vue Leaflet
-mkdir -p javascripts/vendor/vue2-leaflet && cp -f node_modules/vue2-leaflet/dist/vue2-leaflet.min.js javascripts/vendor/vue2-leaflet/vue2-leaflet.js
+mkdir -p javascripts/vendor/vue-leaflet && \
+  cp -f node_modules/@vue-leaflet/vue-leaflet/dist/vue-leaflet.umd.js javascripts/vendor/vue-leaflet/vue-leaflet.js && \
+  cp -f node_modules/@vue-leaflet/vue-leaflet/dist/vue-leaflet.umd.js.map javascripts/vendor/vue-leaflet
 
 # Leaflet
-mkdir -p javascripts/vendor/leaflet && cp -f node_modules/leaflet/dist/leaflet.js javascripts/vendor/leaflet/leaflet.min.js
+mkdir -p javascripts/vendor/leaflet && \
+  cp -f node_modules/leaflet/dist/leaflet.js javascripts/vendor/leaflet/leaflet.min.js && \
+  cp -f node_modules/leaflet/dist/leaflet.js.map javascripts/vendor/leaflet/
 mkdir -p styles/vendor/leaflet && cp -f node_modules/leaflet/dist/leaflet.css styles/vendor/leaflet
 cp -f -r node_modules/leaflet/dist/images styles/vendor/leaflet
 # Leaflet Markercluster