delay loading highlightjs & codemirror theme (#309)

7 years ago · 6bf64a6ae0
parent 9dd8d3a9c4
commit 6bf64a6ae0
2 changed files with 68 additions and 57 deletions
--- a/components/Carbon.js
+++ b/components/Carbon.js
@ -1,4 +1,3 @@
-import * as hljs from 'highlight.js'
 import React, { PureComponent } from 'react'
 import Spinner from 'react-spinner'
 import ResizeObserver from 'resize-observer-polyfill'
@ -51,13 +50,20 @@ class Carbon extends PureComponent {
    this.props.updateTitleBar(newTitle)
  }

+  async getHighlightLang(code = '') {
+    if (!this.hljs) {
+      this.hljs = await import('highlight.js')
+    }
+    return this.hljs.highlightAuto(code).language
+  }
+
  handleLanguageChange = debounce(
-    (newCode, config) => {
+    async (newCode, config) => {
      const props = (config && config.customProps) || this.props

      if (props.config.language === 'auto') {
        // try to set the language
-        const detectedLanguage = hljs.highlightAuto(newCode).language
+        const detectedLanguage = await this.getHighlightLang(newCode)
        const languageMode =
          LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage]

--- a/components/Meta.js
+++ b/components/Meta.js
@ -7,7 +7,9 @@ import Typography from './style/Typography'
 import '../static/react-crop.css'
 import '../static/react-spinner.css'

-export default () => (
+export default () => {
+  const onBrowser = typeof window !== 'undefined'
+  return (
    <div className="meta">
      <Head>
        <meta charSet="utf-8" />
@ -41,7 +43,8 @@ export default () => (
          rel="stylesheet"
          href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/solarized.min.css"
        />
-      {THEMES.filter(t => t.hasStylesheet !== false).map(theme => (
+        {onBrowser
+          ? THEMES.filter(t => t.hasStylesheet !== false).map(theme => (
              <link
                key={theme.id}
                rel="stylesheet"
@ -50,7 +53,8 @@ export default () => (
                  `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/theme/${theme.id}.min.css`
                }
              />
-      ))}
+            ))
+          : null}
      </Head>
      <Reset />
      <Font />
@ -63,4 +67,5 @@ export default () => (
        `}
      </style>
    </div>
-)
+  )
+}