ui: 优化资源加载

packages/ui-default/components/calendar/index.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import moment from 'moment';
+import moment from 'dayjs';
 import tpl from 'vj/utils/tpl';
 
 export default class Calendar {

packages/ui-default/components/highlighter/highlighter.page.js

@@ -5,37 +5,38 @@ import tpl from 'vj/utils/tpl';
 import i18n from 'vj/utils/i18n';
 
 const highlighterPage = new AutoloadPage('highlighterPage', async () => {
-  const [{ default: prismjs }, [success, format]] = await Promise.all([
+  Promise.all([
     import('./prismjs'),
     UserContext.formatCode ? load() : [true, null],
-  ]);
-  if (!success) Notification.error(`Astyle load fail: ${format}`);
-  function runHighlight($container) {
-    prismjs.highlightBlocks($container, success ? format : null);
-    $container.find('pre code').get().forEach((code) => {
-      const $code = $(code);
-      const $root = $code.parent().parent();
-      const language = ($(code).attr('class') || '').trim();
-      const m = language.match(/language-([a-z0-9]+)/);
-      if (m && m[1] && m[1].toLowerCase().startsWith('input')) {
-        const id = +m[1].substr(5, m[1].length - 5);
-        if (Number.isSafeInteger(id)) {
-          const $output = $container.find(`pre.language-output${id}`);
-          if ($output.length) {
-            const $c = $(document.createElement('div')).addClass('row');
-            $root.after($c);
-            $root.prepend($(tpl`<h2>${i18n('Sample Input')} ${id}</h2>`))
-              .addClass('medium-6 columns sample').appendTo($c);
-            $output.parent().prepend($(tpl`<h2>${i18n('Sample Output')} ${id}</h2>`))
-              .addClass('medium-6 columns sample').appendTo($c);
+  ]).then(([{ default: prismjs }, [success, format]]) => {
+    if (!success) Notification.error(`Astyle load fail: ${format}`);
+    function runHighlight($container) {
+      prismjs.highlightBlocks($container, success ? format : null);
+      $container.find('pre code').get().forEach((code) => {
+        const $code = $(code);
+        const $root = $code.parent().parent();
+        const language = ($(code).attr('class') || '').trim();
+        const m = language.match(/language-([a-z0-9]+)/);
+        if (m && m[1] && m[1].toLowerCase().startsWith('input')) {
+          const id = +m[1].substr(5, m[1].length - 5);
+          if (Number.isSafeInteger(id)) {
+            const $output = $container.find(`pre.language-output${id}`);
+            if ($output.length) {
+              const $c = $(document.createElement('div')).addClass('row');
+              $root.after($c);
+              $root.prepend($(tpl`<h2>${i18n('Sample Input')} ${id}</h2>`))
+                .addClass('medium-6 columns sample').appendTo($c);
+              $output.parent().prepend($(tpl`<h2>${i18n('Sample Output')} ${id}</h2>`))
+                .addClass('medium-6 columns sample').appendTo($c);
+            }
           }
         }
-      }
-    });
-  }
+      });
+    }
 
-  runHighlight($('body'));
-  $(document).on('vjContentNew', (e) => runHighlight($(e.target)));
+    runHighlight($('body'));
+    $(document).on('vjContentNew', (e) => runHighlight($(e.target)));
+  });
 });
 
 export default highlighterPage;

packages/ui-default/components/katex/katex.page.js

@@ -1,7 +1,7 @@
 import { AutoloadPage } from 'vj/misc/Page';
 
 const katexPage = new AutoloadPage('katexPage', () => {
-  import('katex/dist/contrib/auto-render.min.js').then(({ default: katex }) => {
+  import('katex/contrib/auto-render/auto-render').then(({ default: katex }) => {
     function runKatex($containers) {
       $containers.get().forEach((container) => katex(container));
     }

packages/ui-default/components/menu/menu-heading.page.js

@@ -1,5 +1,4 @@
 import { AutoloadPage } from 'vj/misc/Page';
-
 import tpl from 'vj/utils/tpl';
 
 const menuHeadingPage = new AutoloadPage('menuHeadingPage', null, () => {

packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
-import moment from 'moment';
+import moment from 'dayjs';
 import 'jquery-scroll-lock';
 import 'jquery.easing';
 import i18n from 'vj/utils/i18n';

packages/ui-default/components/navigation/navigation.page.js

@@ -12,9 +12,7 @@ function handleNavLogoutClick(ev) {
 }
 
 const navigationPage = new AutoloadPage('navigationPage', () => {
-  if (!document.getElementById('panel') || !document.getElementById('menu')) {
-    return;
-  }
+  if (!document.getElementById('panel') || !document.getElementById('menu')) return;
 
   $(document).on('click', '[name="nav_logout"]', handleNavLogoutClick);
 

packages/ui-default/components/scratchpad/ScratchpadRecordsRowContainer.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
-import moment from 'moment';
+import moment from 'dayjs';
 import _ from 'lodash';
 
 import substitute from 'vj/utils/substitute';

packages/ui-default/components/signin/signInDialog.page.js

@@ -12,13 +12,9 @@ const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
   // don't show quick login dialog if in mobile
   if ($('[name="nav_login"]').length > 0) {
     // nav
-    $('[name="nav_login"]').click((ev) => {
-      if (isBelow(responsiveCutoff.mobile)) {
-        return;
-      }
-      if (ev.shiftKey || ev.metaKey || ev.ctrlKey) {
-        return;
-      }
+    $('[name="nav_login"]').on('click', (ev) => {
+      if (isBelow(responsiveCutoff.mobile)) return;
+      if (ev.shiftKey || ev.metaKey || ev.ctrlKey) return;
       signInDialog.show();
       ev.preventDefault();
     });

packages/ui-default/components/smoothscroll/smoothscroll.page.js

@@ -1,5 +1,4 @@
 import 'jquery.easing';
-
 import { AutoloadPage } from 'vj/misc/Page';
 
 const smoothScrollPage = new AutoloadPage('smoothScrollPage', null, () => {
@@ -8,13 +7,9 @@ const smoothScrollPage = new AutoloadPage('smoothScrollPage', null, () => {
   const OFFSET_HEIGHT = 10 + ($('.nav').height() || 0);
 
   function scrollIfAnchor(href, pushToHistory) {
-    if (!ANCHOR_REGEX.test(href)) {
-      return false;
-    }
+    if (!ANCHOR_REGEX.test(href)) return false;
     const match = document.getElementById(href.slice(1));
-    if (!match) {
-      return false;
-    }
+    if (!match) return false;
     const rect = match.getBoundingClientRect();
     const anchorOffset = window.pageYOffset + rect.top - OFFSET_HEIGHT;
     $('html,body').animate({ scrollTop: anchorOffset }, 200, 'easeOutCubic');
@@ -29,16 +24,12 @@ const smoothScrollPage = new AutoloadPage('smoothScrollPage', null, () => {
   }
 
   function delegateAnchors(e) {
-    if (e.metaKey || e.ctrlKey || e.shiftKey) {
-      return;
-    }
+    if (e.metaKey || e.ctrlKey || e.shiftKey) return;
     const elem = e.target;
     if (
       elem.nodeName === 'A'
       && scrollIfAnchor(elem.getAttribute('href'), true)
-    ) {
-      e.preventDefault();
-    }
+    ) e.preventDefault();
   }
 
   $(document).on('vjPageFullyInitialized', () => {

packages/ui-default/components/tooltip/tooltip.page.js

@@ -14,9 +14,7 @@ function getClosestTooltipElement(element) {
 const tooltipPage = new AutoloadPage('tooltipPage', () => {
   $(document).on('mouseover', (e) => {
     const element = getClosestTooltipElement(e.target);
-    if (!element) {
-      return;
-    }
+    if (!element) return;
     const $element = $(element);
     const options = {};
     if ($element.attr('data-tooltip-pos')) {