Improve build times

* Fix bulma/buefy being imported many (many !!!) times

* Remove javascript-time-ago because date-fns pretty much does the same
thing

* Make sure languages are loaded asynchronously

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/About.vue

@@ -119,8 +119,6 @@ export default class About extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "../variables.scss";
-
 .hero.is-primary {
   background: $background-color;
 

js/src/views/About/AboutInstance.vue

@@ -122,8 +122,6 @@ export default class AboutInstance extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "../../variables.scss";
-
 section {
   &:not(:first-child) {
     margin: 2rem auto;

js/src/views/About/AboutMobilizon.vue

@@ -166,8 +166,6 @@ export default class AboutMobilizon extends Vue {}
 </script>
 
 <style lang="scss" scoped>
-@import "../../variables.scss";
-
 .hero.is-primary {
   background: $background-color;
   .subtitle {

js/src/views/About/Privacy.vue

@@ -51,8 +51,6 @@ export default class Privacy extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 main > .container {
   background: $white;
 

js/src/views/About/Rules.vue

@@ -27,8 +27,6 @@ export default class Rules extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 main > .container {
   background: $white;
 }

js/src/views/Account/Profile.vue

@@ -144,8 +144,3 @@ export default class Profile extends Vue {
   }
 }
 </script>
-<style lang="scss">
-@import "../../variables";
-@import "~bulma/sass/utilities/_all";
-@import "~bulma/sass/components/dropdown.sass";
-</style>

js/src/views/Account/Register.vue

@@ -168,7 +168,6 @@ export default class Register extends mixins(identityEditionMixin) {
 </script>
 
 <style lang="scss" scoped>
-@import "../../variables.scss";
 .avatar-enter-active {
   transition: opacity 1s ease;
 }

js/src/views/Admin/Settings.vue

@@ -359,8 +359,6 @@ export default class Settings extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "../../variables.scss";
-
 .notification a {
   color: $primary !important;
   text-decoration: underline !important;

js/src/views/Admin/Users.vue

@@ -145,14 +145,13 @@ export default class Users extends Vue {
     });
   }
 
-  onFiltersChange({ email }: { email: string }) {
+  onFiltersChange({ email }: { email: string }): void {
     this.email = email;
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@import "../../variables.scss";
 a.profile,
 a.user-profile {
   text-decoration: none;

js/src/views/Event/Edit.vue

@@ -296,8 +296,6 @@
 </template>
 
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 main section > .container {
   background: $white;
 }

js/src/views/Event/Event.vue

@@ -1044,8 +1044,6 @@ export default class Event extends EventMixin {
 }
 </script>
 <style lang="scss" scoped>
-@import "../../variables";
-
 .section {
   padding: 1rem 2rem 4rem;
 }

js/src/views/Event/MyEvents.vue

@@ -278,8 +278,6 @@ export default class MyEvents extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-@import "../../variables";
-
 main > .container {
   background: $white;
 }

js/src/views/Event/Participants.vue

@@ -365,7 +365,7 @@ export default class Participants extends Vue {
 
   nl2br = nl2br;
 
-  toggleQueueDetails(row: IParticipant) {
+  toggleQueueDetails(row: IParticipant): void {
     if (row.metadata.message && row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH) return;
     this.queueTable.toggleDetails(row);
   }
@@ -374,8 +374,6 @@ export default class Participants extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-@import "../../variables.scss";
-
 section {
   padding: 1rem 0;
 }

js/src/views/Group/Group.vue

@@ -546,8 +546,6 @@ export default class Group extends mixins(GroupMixin) {
 }
 </script>
 <style lang="scss" scoped>
-@import "../../variables.scss";
-
 div.container {
   background: white;
   margin-bottom: 3rem;

js/src/views/Group/MyGroups.vue

@@ -120,8 +120,6 @@ export default class MyEvents extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-@import "../../variables";
-
 main > .container {
   background: $white;
 }

js/src/views/Home.vue

@@ -338,8 +338,6 @@ export default class Home extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 main > div > .container {
   background: $white;
 }

js/src/views/Interact.vue

@@ -58,8 +58,6 @@ export default class Interact extends Vue {
 }
 </script>
 <style lang="scss">
-@import "@/variables.scss";
-
 main > .container {
   background: $white;
 }

js/src/views/Moderation/Report.vue

@@ -443,8 +443,6 @@ export default class Report extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 tbody td img.image,
 .note img.image {
   display: inline;

js/src/views/Posts/Post.vue

@@ -129,8 +129,6 @@ export default class Post extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "../../variables.scss";
-
 article {
   section.heading-section {
     text-align: center;

js/src/views/Search.vue

@@ -366,8 +366,6 @@ export default class Search extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/variables.scss";
-
 main > .container {
   background: $white;
 

js/src/views/Settings/AccountSettings.vue

@@ -323,8 +323,6 @@ export default class AccountSettings extends Vue {
 }
 </script>
 <style lang="scss">
-@import "@/variables.scss";
-
 .setting-title {
   margin-top: 2rem;
   margin-bottom: 1rem;

js/src/views/Settings/Notifications.vue

@@ -155,8 +155,6 @@ export default class Notifications extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "../../variables.scss";
-
 .field {
   &:not(:last-child) {
     margin-bottom: 1.5rem;

js/src/views/Settings/Preferences.vue

@@ -17,7 +17,7 @@
           v-model="$i18n.locale"
           :placeholder="$t('Select a language')"
         >
-          <option v-for="(language, lang) in languages" :value="lang" :key="lang">
+          <option v-for="(language, lang) in langs" :value="lang" :key="lang">
             {{ language }}
           </option>
         </b-select>
@@ -73,8 +73,10 @@ export default class Preferences extends Vue {
 
   RouteName = RouteName;
 
+  langs: Record<string, string> = langs;
+
   @Watch("loggedUser")
-  setSavedTimezone(loggedUser: IUser) {
+  setSavedTimezone(loggedUser: IUser): void {
     if (loggedUser && loggedUser.settings.timezone) {
       this.selectedTimezone = loggedUser.settings.timezone;
     } else {
@@ -87,22 +89,24 @@ export default class Preferences extends Vue {
     }
   }
 
+  // eslint-disable-next-line class-methods-use-this
   sanitize(timezone: string): string {
     return timezone.split("_").join(" ").replace("St ", "St. ").split("/").join(" - ");
   }
 
-  get timezones() {
+  get timezones(): Record<string, string[]> {
     if (!this.config || !this.config.timezones) return {};
     return this.config.timezones.reduce((acc: { [key: string]: Array<string> }, val: string) => {
       const components = val.split("/");
       const [prefix, suffix] = [components.shift() as string, components.join("/")];
       const pushOrCreate = (
-        acc: { [key: string]: Array<string> },
-        prefix: string,
-        suffix: string
+        acc2: { [key: string]: Array<string> },
+        prefix2: string,
+        suffix2: string
       ) => {
-        (acc[prefix] = acc[prefix] || []).push(suffix);
-        return acc;
+        // eslint-disable-next-line no-param-reassign
+        (acc2[prefix2] = acc2[prefix2] || []).push(suffix2);
+        return acc2;
       };
       if (suffix) {
         return pushOrCreate(acc, prefix, suffix);
@@ -111,22 +115,8 @@ export default class Preferences extends Vue {
     }, {});
   }
 
-  get languages(): object {
-    return this.$i18n.availableLocales.reduce((acc: object, lang: string) => {
-      // @ts-ignore
-      if (langs[lang]) {
-        return {
-          ...acc,
-          // @ts-ignore
-          [lang]: langs[lang],
-        };
-      }
-      return acc;
-    }, {} as object);
-  }
-
   @Watch("selectedTimezone")
-  async updateTimezone() {
+  async updateTimezone(): Promise<void> {
     if (this.selectedTimezone !== this.loggedUser.settings.timezone) {
       await this.$apollo.mutate<{ setUserSetting: string }>({
         mutation: SET_USER_SETTINGS,
@@ -138,7 +128,7 @@ export default class Preferences extends Vue {
   }
 
   @Watch("$i18n.locale")
-  async updateLocale() {
+  async updateLocale(): Promise<void> {
     await this.$apollo.mutate({
       mutation: UPDATE_USER_LOCALE,
       variables: {

js/src/views/User/Register.vue

@@ -212,9 +212,6 @@ export default class Register extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "../../variables";
-@import "../../common.scss";
-
 .avatar-enter-active {
   transition: opacity 1s ease;
 }