Load config.json at runtime

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "keanuapp-weblite",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -47,6 +47,7 @@
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
+    "copy-webpack-plugin": "^5.1.2",
     "eslint": "^7.0",
     "eslint-plugin-vue": "^7.0",
     "sass": "^1.19.0",

src/App.vue

@@ -33,8 +33,6 @@
 </template>
 
 <script>
-import config from "./assets/config";
-
 export default {
   name: "App",
   data() {
@@ -76,10 +74,10 @@ export default {
       return this.$store.state.auth.user;
     },
     appName() {
-      return config.appName;
+      return this.$config.appName;
     },
     title() {
-      var title = this.$t(config.appName);
+      var title = this.$t(this.appName);
       if (this.$matrix.notificationCount > 0) {
         title += " [" + this.$matrix.notificationCount + "]";
       }
@@ -113,8 +111,11 @@ export default {
       },
       immediate: true,
     },
-    title(title) {
+    title: {
-      document.title = title;
+      handler(title) {
+        document.title = title;
+      },
+      immediate: true,
     },
   },
 };

src/components/Chat.vue

@@ -235,7 +235,7 @@
         </v-col>
 
         <v-col
-          v-if="config.useShortCodeStickers"
+          v-if="$config.useShortCodeStickers"
           class="input-area-button text-center flex-grow-0 flex-shrink-1"
         >
           <v-btn
@@ -473,7 +473,6 @@ import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
 import stickers from "../plugins/stickers";
 import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
 import BottomSheet from "./BottomSheet.vue";
-import config from "../assets/config";
 import ImageResize from "image-resize";
 const sizeOf = require("image-size");
 const dataUriToBuffer = require("data-uri-to-buffer");
@@ -555,7 +554,6 @@ export default {
 
   data() {
     return {
-      config: config,
       events: [],
       currentInput: "",
       typingMembers: [],

src/components/Login.vue

@@ -59,7 +59,11 @@
             }
           "
         ></v-text-field>
-        <v-checkbox class="mt-0" v-model="sharedComputer" :label="$t('join.shared_computer')" />
+        <v-checkbox
+          class="mt-0"
+          v-model="sharedComputer"
+          :label="$t('join.shared_computer')"
+        />
         <v-btn
           :disabled="!isValid || loading"
           color="black"
@@ -78,13 +82,12 @@
 <script>
 import User from "../models/user";
 import util from "../plugins/utils";
-import config from "../assets/config";
 
 export default {
   name: "Login",
   data() {
     return {
-      user: new User(config.defaultServer, "", ""),
+      user: new User(this.$config.defaultServer, "", ""),
       isValid: true,
       loading: false,
       message: "",

src/components/ProfileInfoPopup.vue

@@ -79,7 +79,6 @@
 <script>
 import profileInfoMixin from "./profileInfoMixin";
 import ActionRow from "./ActionRow.vue";
-import config from "../assets/config";
 
 export default {
   name: "ProfileInfoPopup",
@@ -102,10 +101,10 @@ export default {
   },
   computed: {
     product() {
-      return config.product;
+      return this.$config.product;
     },
     productLink() {
-      return config.productLink;
+      return this.$config.productLink;
     },
   },
   watch: {

src/main.js

@@ -5,6 +5,7 @@ import store from './store'
 import router from './router'
 import matrix from './services/matrix.service'
 import navigation from './services/navigation.service'
+import config from './services/config.service'
 import cleaninsights from './services/cleaninsights.service'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import 'material-design-icons-iconfont/dist/material-design-icons.css'
@@ -25,6 +26,7 @@ Vue.config.productionTip = false
 Vue.use(VueResize);
 Vue.use(VEmojiPicker);
 Vue.use(matrix, { store: store, i18n: i18n });
+Vue.use(config); // Use this before cleaninsights below, it depends on config!
 Vue.use(cleaninsights);
 Vue.use(VueClipboard);
 
@@ -87,12 +89,12 @@ Vue.directive('longTap', {
     };
 
     const touchStart = function (e) {
-        el.longTapHandled = false;
+      el.longTapHandled = false;
-        el.longTapStartX = touchX(e);
+      el.longTapStartX = touchX(e);
-        el.longTapStartY = touchY(e);
+      el.longTapStartY = touchY(e);
-        el.longTapTimer = setTimeout(touchTimerElapsed, el.longTapTimeout);
+      el.longTapTimer = setTimeout(touchTimerElapsed, el.longTapTimeout);
-        el.classList.add("waiting-for-long-tap");
+      el.classList.add("waiting-for-long-tap");
-        e.preventDefault();
+      e.preventDefault();
     };
 
     const touchCancel = function () {
@@ -156,6 +158,7 @@ new Vue({
   router,
   i18n,
   matrix,
+  config,
   cleaninsights,
   render: h => h(App)
 }).$mount('#app');

src/services/cleaninsights.service.js

@@ -1,12 +1,11 @@
 import { CleanInsights, ConsentRequestUi } from 'clean-insights-sdk';
-import config from "../assets/config";
 
 export default {
     install(Vue) {
 
         class RequestUi extends ConsentRequestUi {
             showForCampaign(campaignId, campaign, complete) {
-                const period = campaign.nextTotalMeasurementPeriod        
+                const period = campaign.nextTotalMeasurementPeriod
                 if (!period) {
                     return ''
                 }
@@ -27,13 +26,16 @@ export default {
                 }
             },
             created() {
-                const analytics = config.analytics || {};
+                this.$config.promise.then(function (config) {
-                if (analytics.enabled && analytics.config) {
+                    const analytics = config.analytics || {};
-                    this.ci = new CleanInsights(analytics.config);
+                    if (analytics.enabled && analytics.config) {
+                        this.ci = new CleanInsights(analytics.config);
 
-                    // Get name of first campaign in the config.
+                        // Get name of first campaign in the config.
-                    this.campaignId = Object.keys(analytics.config.campaigns || { invalid: {} })[0];
+                        this.campaignId = Object.keys(analytics.config.campaigns || { invalid: {} })[0];
-                }
+                    }
+
+                });
             },
             methods: {
                 event(category, action) {

src/services/config.service.js

@@ -0,0 +1,18 @@
+export default {
+    install(Vue) {
+        var config = Vue.observable(require('@/assets/config.json'));
+        const getRuntimeConfig = async () => {
+            const runtimeConfig = await fetch('./config.json');
+            return await runtimeConfig.json()
+        }
+
+        config.promise = getRuntimeConfig();
+        config.promise.then(function (json) {
+            // Reactively use all the config values
+            for (const key of Object.keys(json)) {
+                Vue.set(config, key, json[key]);
+            }
+        });
+        Vue.prototype.$config = config;
+    }
+}

src/services/matrix.service.js

@@ -3,7 +3,6 @@ import sdk from "matrix-js-sdk";
 import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
 import util from "../plugins/utils";
 import User from "../models/user";
-import config from "../assets/config";
 
 const LocalStorageCryptoStore = require("matrix-js-sdk/lib/crypto/store/localStorage-crypto-store")
     .LocalStorageCryptoStore;
@@ -120,7 +119,7 @@ export default {
                         promiseLogin = tempMatrixClient
                             .register(user, pass, null, {
                                 type: "m.login.dummy",
-                                initial_device_display_name: config.appName
+                                initial_device_display_name: this.$config.appName
                             })
                             .then((response) => {
                                 console.log("Response", response);
@@ -132,7 +131,7 @@ export default {
                                 return u;
                             })
                     } else {
-                        var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: config.appName };
+                        var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: this.$config.appName };
                         if (user.device_id) {
                             data.device_id = user.device_id;
                         }
@@ -297,7 +296,7 @@ export default {
                     if (this.ready) {
                         return Promise.resolve(this.currentUser);
                     }
-                    return this.$store.dispatch("login", this.currentUser || new User(config.defaultServer, "", "", true));
+                    return this.$store.dispatch("login", this.currentUser || new User(this.$config.defaultServer, "", "", true));
                 },
 
                 addMatrixClientListeners(client) {
@@ -736,7 +735,7 @@ export default {
                             return this.matrixClient;
                         })
                     } else {
-                        const tempMatrixClient = sdk.createClient(config.defaultServer);
+                        const tempMatrixClient = sdk.createClient(this.$config.defaultServer);
                         var tempUserString = this.$store.state.tempuser;
                         var tempUser = null;
                         if (tempUserString) {
@@ -753,7 +752,7 @@ export default {
                             clientPromise = tempMatrixClient
                                 .register(user, pass, null, {
                                     type: "m.login.dummy",
-                                    initial_device_display_name: config.appName
+                                    initial_device_display_name: this.$config.appName
                                 })
                                 .then((response) => {
                                     console.log("Response", response);
@@ -766,7 +765,7 @@ export default {
 
                         // Get an access token
                         clientPromise = clientPromise.then(user => {
-                            var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: config.appName };
+                            var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: this.$config.appName };
                             if (user.device_id) {
                                 data.device_id = user.device_id;
                             }
@@ -779,7 +778,7 @@ export default {
                         // Only used to get public room info from.
                         clientPromise = clientPromise.then(user => {
                             var opts = {
-                                baseUrl: config.defaultServer,
+                                baseUrl: this.$config.defaultServer,
                                 userId: user.user_id,
                                 accessToken: user.access_token,
                                 timelineSupport: false,

vue.config.js

@@ -1,3 +1,5 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+
 module.exports = {
   "transpileDependencies": [
     "vuetify"
@@ -16,7 +18,13 @@ module.exports = {
   },
 
   configureWebpack: {
-    devtool: 'source-map'
+    devtool: 'source-map',
+    plugins: [
+      new CopyWebpackPlugin([{
+        from: "./src/assets/config.json",
+        to: "./",
+      }])
+    ]
   },
 
   devServer: {