Refactor mode loading into Carbon (#825)

* refactor mode loading into Carbon

* made alreadyLoaded Set a static property

components/Carbon.js

@@ -13,7 +13,8 @@ import {
   LANGUAGE_NAME_HASH,
   LANGUAGE_MIME_HASH,
   DEFAULT_SETTINGS,
-  THEMES_HASH
+  THEMES_HASH,
+  LANGUAGES
 } from '../lib/constants'
 
 const Watermark = dynamic(() => import('./svg/Watermark'), {
@@ -29,10 +30,25 @@ function searchLanguage(l) {
 }
 
 class Carbon extends React.PureComponent {
+  static modesLoaded = new Set()
   static defaultProps = {
     onChange: () => {}
   }
 
+  componentDidMount() {
+    LANGUAGES.filter(language => language.mode !== 'auto' && language.mode !== 'text').forEach(
+      language => {
+        if (language.mode && !Carbon.modesLoaded.has(language.mode)) {
+          // TODO useLayoutEffect
+          language.custom
+            ? require(`../lib/custom/modes/${language.mode}`)
+            : require(`codemirror/mode/${language.mode}/${language.mode}`)
+          Carbon.modesLoaded.add(language.mode)
+        }
+      }
+    )
+  }
+
   handleLanguageChange = debounce(
     (newCode, language) => {
       if (language === 'auto') {

lib/constants.js

@@ -979,21 +979,6 @@ const unfold = (f, seed) => {
   return go(f, seed, [])
 }`
 
-if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
-  const alreadyLoaded = new Set()
-
-  LANGUAGES.filter(language => language.mode !== 'auto' && language.mode !== 'text').forEach(
-    language => {
-      if (language.mode && !alreadyLoaded.has(language.mode)) {
-        alreadyLoaded.add(language.mode)
-        language.custom
-          ? require(`./custom/modes/${language.mode}`)
-          : require(`codemirror/mode/${language.mode}/${language.mode}`)
-      }
-    }
-  )
-}
-
 export const DEFAULT_SETTINGS = {
   paddingVertical: '56px',
   paddingHorizontal: '56px',