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/components/Account/ActorCard.vue

@@ -46,8 +46,6 @@ export default class ActorCard extends Vue {
 </style>
 
 <style lang="scss">
-@import "../../variables.scss";
-
 .tooltip {
   display: block !important;
   z-index: 10000;

js/src/components/Account/ParticipantCard.vue

@@ -88,7 +88,6 @@ export default class ParticipantCard extends Vue {
 </script>
 
 <style lang="scss">
-@import "../../variables.scss";
 .card-footer-item {
   height: $control-height;
 }

js/src/components/Admin/Followers.vue

@@ -51,7 +51,7 @@
 
       <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props">
         <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
-          timeago(props.row.updatedAt)
+          formatDistanceToNow(new Date(props.row.updatedAt), { locale: $dateFnsLocale })
         }}</span></b-table-column
       >
 
@@ -102,6 +102,7 @@
 <script lang="ts">
 import { Component, Mixins } from "vue-property-decorator";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
+import { formatDistanceToNow } from "date-fns";
 import { ACCEPT_RELAY, REJECT_RELAY, RELAY_FOLLOWERS } from "../../graphql/admin";
 import { Paginate } from "../../types/paginate";
 import { IFollower } from "../../types/actor/follower.model";
@@ -126,6 +127,8 @@ export default class Followers extends Mixins(RelayMixin) {
 
   RelayMixin = RelayMixin;
 
+  formatDistanceToNow = formatDistanceToNow;
+
   async acceptRelays(): Promise<void> {
     await this.checkedRows.forEach((row: IFollower) => {
       this.acceptRelay(`${row.actor.preferredUsername}@${row.actor.domain}`);

js/src/components/Admin/Followings.vue

@@ -64,7 +64,7 @@
 
       <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props">
         <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
-          timeago(props.row.updatedAt)
+          formatDistanceToNow(new Date(props.row.updatedAt), { locale: $dateFnsLocale })
         }}</span></b-table-column
       >
 
@@ -100,6 +100,7 @@
 <script lang="ts">
 import { Component, Mixins } from "vue-property-decorator";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
+import { formatDistanceToNow } from "date-fns";
 import { ADD_RELAY, RELAY_FOLLOWINGS, REMOVE_RELAY } from "../../graphql/admin";
 import { IFollower } from "../../types/actor/follower.model";
 import { Paginate } from "../../types/paginate";
@@ -126,6 +127,8 @@ export default class Followings extends Mixins(RelayMixin) {
 
   RelayMixin = RelayMixin;
 
+  formatDistanceToNow = formatDistanceToNow;
+
   async followRelay(e: Event): Promise<void> {
     e.preventDefault();
     try {

js/src/components/Comment/Comment.vue

@@ -24,7 +24,12 @@
             <strong :class="{ organizer: commentFromOrganizer }">{{ comment.actor.name }}</strong>
             <small>@{{ usernameWithDomain(comment.actor) }}</small>
             <a class="comment-link has-text-grey" :href="commentURL">
-              <small>{{ timeago(new Date(comment.updatedAt)) }}</small>
+              <small>{{
+                formatDistanceToNow(new Date(comment.updatedAt), {
+                  locale: $dateFnsLocale,
+                  addSuffix: true,
+                })
+              }}</small>
             </a>
           </span>
           <a v-else class="comment-link has-text-grey" :href="commentURL">
@@ -130,8 +135,8 @@
 <script lang="ts">
 import { Component, Prop, Vue, Ref } from "vue-property-decorator";
 import EditorComponent from "@/components/Editor.vue";
-import TimeAgo from "javascript-time-ago";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
+import { formatDistanceToNow } from "date-fns";
 import { CommentModel, IComment } from "../../types/comment.model";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IPerson, usernameWithDomain } from "../../types/actor";
@@ -171,18 +176,13 @@ export default class Comment extends Vue {
 
   showReplies = false;
 
-  timeAgoInstance: TimeAgo | null = null;
-
   CommentModeration = CommentModeration;
 
   usernameWithDomain = usernameWithDomain;
 
-  async mounted(): Promise<void> {
-    const localeName = this.$i18n.locale;
-    const locale = await import(`javascript-time-ago/locale/${localeName}`);
-    TimeAgo.addLocale(locale);
-    this.timeAgoInstance = new TimeAgo(localeName);
+  formatDistanceToNow = formatDistanceToNow;
 
+  async mounted(): Promise<void> {
     const { hash } = this.$route;
     if (hash.includes(`#comment-${this.comment.uuid}`)) {
       this.fetchReplies();
@@ -243,13 +243,6 @@ export default class Comment extends Vue {
     this.showReplies = true;
   }
 
-  timeago(dateTime: Date): string {
-    if (this.timeAgoInstance != null) {
-      return this.timeAgoInstance.format(dateTime);
-    }
-    return "";
-  }
-
   get commentSelected(): boolean {
     return this.commentId === this.$route.hash;
   }
@@ -316,8 +309,6 @@ export default class Comment extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 form.reply {
   padding-bottom: 1rem;
 }

js/src/components/Discussion/DiscussionComment.vue

@@ -43,7 +43,10 @@
         </span>
         <div class="post-infos">
           <span :title="comment.insertedAt | formatDateTimeString">
-            {{ $timeAgo.format(new Date(comment.updatedAt), "twitter") || $t("Right now") }}</span
+            {{
+              formatDistanceToNow(new Date(comment.updatedAt), { locale: $dateFnsLocale }) ||
+              $t("Right now")
+            }}</span
           >
         </div>
       </div>
@@ -53,7 +56,13 @@
           v-if="comment.insertedAt.getTime() !== comment.updatedAt.getTime()"
           :title="comment.updatedAt | formatDateTimeString"
         >
-          {{ $t("Edited {ago}", { ago: $timeAgo.format(new Date(comment.updatedAt)) }) }}
+          {{
+            $t("Edited {ago}", {
+              ago: formatDistanceToNow(new Date(comment.updatedAt), {
+                locale: $dateFnsLocale,
+              }),
+            })
+          }}
         </p>
       </div>
       <div class="comment-deleted" v-else-if="!editMode">
@@ -76,7 +85,8 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IComment, CommentModel } from "../../types/comment.model";
+import { formatDistanceToNow } from "date-fns";
+import { IComment } from "../../types/comment.model";
 import { usernameWithDomain, IPerson } from "../../types/actor";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 
@@ -99,14 +109,16 @@ export default class DiscussionComment extends Vue {
 
   usernameWithDomain = usernameWithDomain;
 
+  formatDistanceToNow = formatDistanceToNow;
+
   // isReportModalActive: boolean = false;
 
-  toggleEditMode() {
+  toggleEditMode(): void {
     this.updatedComment = this.comment.text;
     this.editMode = !this.editMode;
   }
 
-  updateComment() {
+  updateComment(): void {
     this.comment.text = this.updatedComment;
     this.$emit("update-comment", this.comment);
     this.toggleEditMode();
@@ -114,8 +126,6 @@ export default class DiscussionComment extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 article.comment {
   display: flex;
   border-top: 1px solid #e9e9e9;

js/src/components/Discussion/DiscussionListItem.vue

@@ -16,7 +16,10 @@
       <div class="title-and-date">
         <p class="discussion-minimalist-title">{{ discussion.title }}</p>
         <span :title="actualDate | formatDateTimeString">
-          {{ $timeAgo.format(new Date(actualDate), "twitter") || $t("Right now") }}</span
+          {{
+            formatDistanceToNowStrict(new Date(actualDate), { locale: $dateFnsLocale }) ||
+            $t("Right now")
+          }}</span
         >
       </div>
       <div class="has-text-grey" v-if="!discussion.lastComment.deletedAt">
@@ -28,6 +31,7 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
+import { formatDistanceToNowStrict } from "date-fns";
 import { IDiscussion } from "../../types/discussions";
 import RouteName from "../../router/name";
 
@@ -37,7 +41,9 @@ export default class DiscussionListItem extends Vue {
 
   RouteName = RouteName;
 
-  get htmlTextEllipsis() {
+  formatDistanceToNowStrict = formatDistanceToNowStrict;
+
+  get htmlTextEllipsis(): string {
     const element = document.createElement("div");
     if (this.discussion.lastComment && this.discussion.lastComment.text) {
       element.innerHTML = this.discussion.lastComment.text
@@ -47,7 +53,7 @@ export default class DiscussionListItem extends Vue {
     return element.innerText;
   }
 
-  get actualDate() {
+  get actualDate(): string | Date | undefined {
     if (this.discussion.updatedAt === this.discussion.insertedAt && this.discussion.lastComment) {
       return this.discussion.lastComment.publishedAt;
     }

js/src/components/Editor.vue

@@ -552,8 +552,6 @@ export default class EditorComponent extends Vue {
 }
 </script>
 <style lang="scss">
-@import "@/variables.scss";
-
 $color-black: #000;
 $color-white: #eee;
 

js/src/components/Event/DateCalendarIcon.vue

@@ -27,23 +27,21 @@ export default class DateCalendarIcon extends Vue {
    */
   @Prop({ required: true }) date!: string;
 
-  get dateObj() {
+  get dateObj(): Date {
     return new Date(this.$props.date);
   }
 
-  get month() {
+  get month(): string {
     return this.dateObj.toLocaleString(undefined, { month: "short" });
   }
 
-  get day() {
+  get day(): string {
     return this.dateObj.toLocaleString(undefined, { day: "numeric" });
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@import "../../variables.scss";
-
 time.datetime-container {
   background: $backgrounds;
   border: 1px solid $borders;

js/src/components/Event/EventCard.vue

@@ -115,8 +115,6 @@ export default class EventCard extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "../../variables";
-
 a.card {
   display: block;
   background: $secondary;

js/src/components/Event/EventListCard.vue

@@ -275,8 +275,6 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
 </script>
 
 <style lang="scss" scoped>
-@import "../../variables";
-
 article.box {
   div.tag-container {
     position: absolute;

js/src/components/Event/EventListViewCard.vue

@@ -104,8 +104,6 @@ export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
 </script>
 
 <style lang="scss" scoped>
-@import "../../variables";
-
 article.box {
   div.content {
     padding: 5px;

js/src/components/Event/EventMetadataBlock.vue

@@ -20,8 +20,6 @@ export default class EventMetadataBlock extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "../../variables.scss";
-
 h2 {
   font-size: 1.8rem;
   font-weight: 500;

js/src/components/Footer.vue

@@ -44,8 +44,6 @@ export default class Footer extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "../variables.scss";
-
 footer.footer {
   color: $secondary;
   display: flex;

js/src/components/Group/GroupSection.vue

@@ -32,8 +32,6 @@ export default class GroupSection extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 section {
   display: flex;
   flex-direction: column;

js/src/components/Group/InvitationCard.vue

@@ -54,7 +54,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IGroup, IMember, usernameWithDomain } from "@/types/actor";
+import { IMember, usernameWithDomain } from "@/types/actor";
 import RouteName from "../../router/name";
 
 @Component
@@ -68,8 +68,6 @@ export default class InvitationCard extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 .media:not(.subfield) {
   background: lighten($primary, 40%);
   padding: 10px;

js/src/components/Logo.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import MobilizonLogo from "../assets/mobilizon_logo.svg?inline";
 
@@ -18,8 +18,6 @@ export default class Logo extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "../variables.scss";
-
 svg {
   fill: $background-color;
 

js/src/components/NavBar.vue

@@ -216,8 +216,6 @@ export default class NavBar extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "../variables.scss";
-
 nav {
   .navbar-item {
     a.button {

js/src/components/Post/PostListItem.vue

@@ -5,11 +5,17 @@
   >
     <div class="title-info-wrapper">
       <p class="post-minimalist-title">{{ post.title }}</p>
-      <small class="has-text-grey">{{ $timeAgo.format(new Date(post.insertedAt)) }}</small>
+      <small class="has-text-grey">{{
+        formatDistanceToNow(new Date(post.publishAt || post.insertedAt), {
+          locale: $dateFnsLocale,
+          addSuffix: true,
+        })
+      }}</small>
     </div>
   </router-link>
 </template>
 <script lang="ts">
+import { formatDistanceToNow } from "date-fns";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import RouteName from "../../router/name";
 import { IPost } from "../../types/post.model";
@@ -19,6 +25,8 @@ export default class PostListItem extends Vue {
   @Prop({ required: true, type: Object }) post!: IPost;
 
   RouteName = RouteName;
+
+  formatDistanceToNow = formatDistanceToNow;
 }
 </script>
 <style lang="scss" scoped>

js/src/components/Resource/FolderItem.vue

@@ -114,8 +114,6 @@ export default class FolderItem extends Mixins(ResourceMixin) {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 .resource-wrapper {
   display: flex;
   flex: 1;

js/src/components/Resource/ResourceItem.vue

@@ -57,8 +57,6 @@ export default class ResourceItem extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 .resource-wrapper {
   display: flex;
   flex: 1;

js/src/components/Resource/ResourceSelector.vue

@@ -111,8 +111,6 @@ export default class ResourceSelector extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "../../variables.scss";
-
 .panel {
   a.panel-block {
     cursor: default;

js/src/components/Settings/SettingMenuItem.vue

@@ -30,8 +30,6 @@ export default class SettingMenuItem extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 li.setting-menu-item {
   font-size: 1.05rem;
   background-color: #fff1de;

js/src/components/Settings/SettingMenuSection.vue

@@ -37,8 +37,6 @@ export default class SettingMenuSection extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 li {
   font-size: 1.3rem;
   background-color: $secondary;

js/src/components/Tag.vue

@@ -13,8 +13,6 @@ export default class Tag extends Vue {}
 </script>
 
 <style lang="scss" scoped>
-@import "../variables.scss";
-
 span.tag {
   background: $purple-3;
   color: $violet-2;

js/src/components/Utils/Subtitle.vue

@@ -12,8 +12,6 @@ import { Component, Vue } from "vue-property-decorator";
 export default class Subtitle extends Vue {}
 </script>
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 h2 {
   display: block;
   margin: 15px 0 30px;

js/src/components/Utils/VerticalDivider.vue

@@ -8,14 +8,12 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 export default class VerticalDivider extends Vue {
   @Prop({ default: "Or" }) content!: string;
 
-  get dataContent() {
+  get dataContent(): string {
     return this.content.toLocaleUpperCase();
   }
 }
 </script>
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 .is-divider-vertical[data-content]::after {
   background-color: $body-background-color;
 }