Use dynamic import components (#642)

* use dynamic import components

 - react-color components
 - Watermark

* Dynamically import modes

* revert next.config.js

* update language filter

components/Carbon.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import dynamic from 'next/dynamic'
 import * as hljs from 'highlight.js'
 import ResizeObserver from 'resize-observer-polyfill'
 import debounce from 'lodash.debounce'
@@ -6,7 +7,6 @@ import ms from 'ms'
 import { Controlled as CodeMirror } from 'react-codemirror2'
 
 import WindowControls from '../components/WindowControls'
-import Watermark from '../components/svg/Watermark'
 import {
   COLORS,
   LANGUAGE_MODE_HASH,
@@ -15,6 +15,10 @@ import {
   DEFAULT_SETTINGS
 } from '../lib/constants'
 
+const Watermark = dynamic(() => import('../components/svg/Watermark'), {
+  loading: () => null
+})
+
 class Carbon extends React.PureComponent {
   static defaultProps = {
     onAspectRatioChange: () => {},

components/Editor.js

@@ -6,11 +6,11 @@ import { DragDropContext } from 'react-dnd'
 import domtoimage from 'dom-to-image'
 import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
 import Spinner from 'react-spinner'
+import dynamic from 'next/dynamic'
 
 // Ours
 import Button from './Button'
 import Dropdown from './Dropdown'
-import BackgroundSelect from './BackgroundSelect'
 import Settings from './Settings'
 import Toolbar from './Toolbar'
 import Overlay from './Overlay'
@@ -36,6 +36,10 @@ import LanguageIcon from './svg/Language'
 
 const languageIcon = <LanguageIcon />
 
+const BackgroundSelect = dynamic(() => import('./BackgroundSelect'), {
+  loading: () => null
+})
+
 class Editor extends React.Component {
   constructor(props) {
     super(props)

components/Themes/ThemeCreate.js

@@ -0,0 +1,189 @@
+import React from 'react'
+
+import Input from '../Input'
+import Button from '../Button'
+import ListSetting from '../ListSetting'
+import Popout from '../Popout'
+import ColorPicker from '../ColorPicker'
+import { HIGHLIGHT_KEYS, COLORS } from '../../lib/constants'
+import { capitalize } from '../../lib/util'
+
+const colorPickerStyle = {
+  backgroundColor: COLORS.BLACK,
+  padding: 0,
+  margin: '4px'
+}
+
+const colorPresets = []
+
+const HighlightPicker = ({ title, onChange, color }) => (
+  <div className="color-picker-container">
+    <div className="color-picker-header">
+      <span>{title}</span>
+    </div>
+    <ColorPicker
+      color={color}
+      onChange={onChange}
+      presets={colorPresets}
+      style={colorPickerStyle}
+    />
+    <style jsx>
+      {`
+        .color-picker-container {
+          width: 218px;
+          border-left: 2px solid ${COLORS.SECONDARY};
+          padding: 2px;
+        }
+
+        .color-picker-header {
+          background-color: ${COLORS.BLACK};
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 8px 0;
+        }
+      `}
+    </style>
+  </div>
+)
+
+const ThemeCreate = ({
+  theme,
+  themes,
+  highlights,
+  name,
+  preset,
+  selected,
+  createTheme,
+  applyPreset,
+  updateName,
+  selectHighlight,
+  updateHighlight
+}) => (
+  <Popout pointerLeft="15px" style={{ display: 'flex' }}>
+    <div className="theme-settings">
+      <div className="field name-field">
+        <span>Name</span>
+        <Input
+          title="name"
+          name="name"
+          placeholder="Custom Theme"
+          value={name}
+          onChange={updateName}
+          maxLength="32"
+        />
+      </div>
+      <div className="theme-select">
+        <ListSetting
+          title="Preset"
+          items={themes}
+          selected={preset || theme}
+          onOpen={selectHighlight(null)}
+          onChange={applyPreset}
+        >
+          {({ name }) => <span>{name}</span>}
+        </ListSetting>
+      </div>
+      <div className="theme-colors">
+        {HIGHLIGHT_KEYS.map(key => (
+          <div className="field" key={key}>
+            <Button
+              padding="4px 4px 4px 8px"
+              onClick={selectHighlight(key)}
+              background={selected === key ? COLORS.HOVER : COLORS.BLACK}
+            >
+              <div className="row">
+                <span>{capitalize(key)}</span>
+                <span
+                  className="color-square"
+                  style={{
+                    backgroundColor: highlights[key],
+                    boxShadow: `inset 0px 0px 0px ${selected === key ? 2 : 1}px ${COLORS.SECONDARY}`
+                  }}
+                />
+              </div>
+            </Button>
+          </div>
+        ))}
+      </div>
+      <Button
+        center
+        disabled={!name}
+        className="create-button"
+        padding="8px 0"
+        background={COLORS.SECONDARY}
+        hoverBackground={COLORS.SECONDARY}
+        color={COLORS.BLACK}
+        onClick={createTheme}
+      >
+        Create +
+      </Button>
+    </div>
+    {selected && (
+      <HighlightPicker
+        title={capitalize(selected)}
+        color={highlights[selected]}
+        onChange={updateHighlight}
+      />
+    )}
+    <style jsx>
+      {`
+        .field {
+          align-items: center;
+          border-bottom: solid 1px ${COLORS.SECONDARY};
+          display: flex;
+          height: 35px;
+          justify-content: space-between;
+          position: relative;
+        }
+
+        .field:nth-last-child(-n + 2) {
+          border-width: 2px;
+        }
+
+        .row {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        .name-field {
+          padding: 8px;
+        }
+
+        .theme-select {
+          width: 100%;
+        }
+
+        .theme-settings {
+          display: flex;
+          flex-direction: column;
+          width: 224px;
+        }
+
+        .theme-colors {
+          display: flex;
+          flex-wrap: wrap;
+          border-top: 2px solid ${COLORS.SECONDARY};
+          text-transform: capitalize;
+        }
+
+        .theme-colors .field {
+          width: 50%;
+        }
+
+        .theme-colors .field:nth-child(odd) {
+          border-right: 1px solid ${COLORS.SECONDARY};
+        }
+
+        .color-square {
+          border-radius: 3px;
+          padding: 12px;
+        }
+      `}
+    </style>
+  </Popout>
+)
+
+export default ThemeCreate

components/Themes/index.js

@@ -1,192 +1,16 @@
 import React from 'react'
-
+import dynamic from 'next/dynamic'
-import Dropdown from './Dropdown'
+
-import Input from './Input'
+import Dropdown from '../Dropdown'
-import Button from './Button'
+import { managePopout } from '../Popout'
-import ListSetting from './ListSetting'
+import ThemeIcon from '../svg/Theme'
-import Popout, { managePopout } from './Popout'
+import RemoveIcon from '../svg/Remove'
-import ColorPicker from './ColorPicker'
+import { THEMES, COLORS, DEFAULT_THEME } from '../../lib/constants'
-import ThemeIcon from './svg/Theme'
+import { getThemes, saveThemes, stringifyRGBA, generateId } from '../../lib/util'
-import RemoveIcon from './svg/Remove'
+
-import { THEMES, HIGHLIGHT_KEYS, COLORS, DEFAULT_THEME } from '../lib/constants'
+const ThemeCreate = dynamic(() => import('./ThemeCreate'), {
-import { getThemes, saveThemes, capitalize, stringifyRGBA, generateId } from '../lib/util'
+  loading: () => null
-
+})
-const colorPickerStyle = {
-  backgroundColor: COLORS.BLACK,
-  padding: 0,
-  margin: '4px'
-}
-const colorPresets = []
-
-const HighlightPicker = ({ title, onChange, color }) => (
-  <div className="color-picker-container">
-    <div className="color-picker-header">
-      <span>{title}</span>
-    </div>
-    <ColorPicker
-      color={color}
-      onChange={onChange}
-      presets={colorPresets}
-      style={colorPickerStyle}
-    />
-    <style jsx>
-      {`
-        .color-picker-container {
-          width: 218px;
-          border-left: 2px solid ${COLORS.SECONDARY};
-          padding: 2px;
-        }
-
-        .color-picker-header {
-          background-color: ${COLORS.BLACK};
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 8px 0;
-        }
-      `}
-    </style>
-  </div>
-)
-
-const ThemeCreate = ({
-  theme,
-  themes,
-  highlights,
-  name,
-  preset,
-  selected,
-  createTheme,
-  applyPreset,
-  updateName,
-  selectHighlight,
-  updateHighlight
-}) => (
-  <Popout pointerLeft="15px" style={{ display: 'flex' }}>
-    <div className="theme-settings">
-      <div className="field name-field">
-        <span>Name</span>
-        <Input
-          title="name"
-          name="name"
-          placeholder="Custom Theme"
-          value={name}
-          onChange={updateName}
-          maxLength="32"
-        />
-      </div>
-      <div className="theme-select">
-        <ListSetting
-          title="Preset"
-          items={themes}
-          selected={preset || theme}
-          onOpen={selectHighlight(null)}
-          onChange={applyPreset}
-        >
-          {({ name }) => <span>{name}</span>}
-        </ListSetting>
-      </div>
-      <div className="theme-colors">
-        {HIGHLIGHT_KEYS.map(key => (
-          <div className="field" key={key}>
-            <Button
-              padding="4px 4px 4px 8px"
-              onClick={selectHighlight(key)}
-              background={selected === key ? COLORS.HOVER : COLORS.BLACK}
-            >
-              <div className="row">
-                <span>{capitalize(key)}</span>
-                <span
-                  className="color-square"
-                  style={{
-                    backgroundColor: highlights[key],
-                    boxShadow: `inset 0px 0px 0px ${selected === key ? 2 : 1}px ${COLORS.SECONDARY}`
-                  }}
-                />
-              </div>
-            </Button>
-          </div>
-        ))}
-      </div>
-      <Button
-        center
-        disabled={!name}
-        className="create-button"
-        padding="8px 0"
-        background={COLORS.SECONDARY}
-        hoverBackground={COLORS.SECONDARY}
-        color={COLORS.BLACK}
-        onClick={createTheme}
-      >
-        Create +
-      </Button>
-    </div>
-    {selected && (
-      <HighlightPicker
-        title={capitalize(selected)}
-        color={highlights[selected]}
-        onChange={updateHighlight}
-      />
-    )}
-    <style jsx>
-      {`
-        .field {
-          align-items: center;
-          border-bottom: solid 1px ${COLORS.SECONDARY};
-          display: flex;
-          height: 35px;
-          justify-content: space-between;
-          position: relative;
-        }
-
-        .field:nth-last-child(-n + 2) {
-          border-width: 2px;
-        }
-
-        .row {
-          display: flex;
-          flex: 1;
-          align-items: center;
-          justify-content: space-between;
-        }
-
-        .name-field {
-          padding: 8px;
-        }
-
-        .theme-select {
-          width: 100%;
-        }
-
-        .theme-settings {
-          display: flex;
-          flex-direction: column;
-          width: 224px;
-        }
-
-        .theme-colors {
-          display: flex;
-          flex-wrap: wrap;
-          border-top: 2px solid ${COLORS.SECONDARY};
-          text-transform: capitalize;
-        }
-
-        .theme-colors .field {
-          width: 50%;
-        }
-
-        .theme-colors .field:nth-child(odd) {
-          border-right: 1px solid ${COLORS.SECONDARY};
-        }
-
-        .color-square {
-          border-radius: 3px;
-          padding: 12px;
-        }
-      `}
-    </style>
-  </Popout>
-)
 
 const ThemeItem = ({ children, item, isSelected, onClick }) => (
   <div className="theme-item">

lib/constants.js

@@ -908,18 +908,8 @@ const unfold = (f, seed) => {
 }`
 
 if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
-  const alreadyLoaded = new Set()
+  require(`codemirror/mode/javascript/javascript`)
-
+  import('./modes')
-  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 = {

lib/modes.js

@@ -0,0 +1,15 @@
+import { LANGUAGES } from './constants'
+
+const modes = LANGUAGES.filter(
+  language =>
+    language.mode &&
+    language.mode !== 'auto' &&
+    language.mode !== 'text' &&
+    language.mode !== 'javascript'
+).forEach(language =>
+  language.custom
+    ? require(`./custom/modes/${language.mode}`)
+    : require(`codemirror/mode/${language.mode}/${language.mode}`)
+)
+
+export default modes