From 80122adea607929bcec24fece9cac18d152c8ca1 Mon Sep 17 00:00:00 2001 From: Michael Fix Date: Wed, 23 Jan 2019 15:23:03 -0800 Subject: [PATCH] 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 | 6 +- components/Editor.js | 6 +- components/Themes/ThemeCreate.js | 189 ++++++++++++++++++++ components/{Themes.js => Themes/index.js} | 200 ++-------------------- lib/constants.js | 14 +- lib/modes.js | 15 ++ 6 files changed, 228 insertions(+), 202 deletions(-) create mode 100644 components/Themes/ThemeCreate.js rename components/{Themes.js => Themes/index.js} (54%) create mode 100644 lib/modes.js diff --git a/components/Carbon.js b/components/Carbon.js index baf3c29..e688b4b 100644 --- a/components/Carbon.js +++ b/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: () => {}, diff --git a/components/Editor.js b/components/Editor.js index 6b28e0f..d9659be 100644 --- a/components/Editor.js +++ b/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 = +const BackgroundSelect = dynamic(() => import('./BackgroundSelect'), { + loading: () => null +}) + class Editor extends React.Component { constructor(props) { super(props) diff --git a/components/Themes/ThemeCreate.js b/components/Themes/ThemeCreate.js new file mode 100644 index 0000000..a08b598 --- /dev/null +++ b/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 }) => ( +
+
+ {title} +
+ + +
+) + +const ThemeCreate = ({ + theme, + themes, + highlights, + name, + preset, + selected, + createTheme, + applyPreset, + updateName, + selectHighlight, + updateHighlight +}) => ( + +
+
+ Name + +
+
+ + {({ name }) => {name}} + +
+
+ {HIGHLIGHT_KEYS.map(key => ( +
+ +
+ ))} +
+ +
+ {selected && ( + + )} + + +) + +export default ThemeCreate diff --git a/components/Themes.js b/components/Themes/index.js similarity index 54% rename from components/Themes.js rename to components/Themes/index.js index ba66c12..01cd418 100644 --- a/components/Themes.js +++ b/components/Themes/index.js @@ -1,192 +1,16 @@ import React from 'react' - -import Dropdown from './Dropdown' -import Input from './Input' -import Button from './Button' -import ListSetting from './ListSetting' -import Popout, { managePopout } from './Popout' -import ColorPicker from './ColorPicker' -import ThemeIcon from './svg/Theme' -import RemoveIcon from './svg/Remove' -import { THEMES, HIGHLIGHT_KEYS, COLORS, DEFAULT_THEME } from '../lib/constants' -import { getThemes, saveThemes, capitalize, stringifyRGBA, generateId } from '../lib/util' - -const colorPickerStyle = { - backgroundColor: COLORS.BLACK, - padding: 0, - margin: '4px' -} -const colorPresets = [] - -const HighlightPicker = ({ title, onChange, color }) => ( -
-
- {title} -
- - -
-) - -const ThemeCreate = ({ - theme, - themes, - highlights, - name, - preset, - selected, - createTheme, - applyPreset, - updateName, - selectHighlight, - updateHighlight -}) => ( - -
-
- Name - -
-
- - {({ name }) => {name}} - -
-
- {HIGHLIGHT_KEYS.map(key => ( -
- -
- ))} -
- -
- {selected && ( - - )} - - -) +import dynamic from 'next/dynamic' + +import Dropdown from '../Dropdown' +import { managePopout } from '../Popout' +import ThemeIcon from '../svg/Theme' +import RemoveIcon from '../svg/Remove' +import { THEMES, COLORS, DEFAULT_THEME } from '../../lib/constants' +import { getThemes, saveThemes, stringifyRGBA, generateId } from '../../lib/util' + +const ThemeCreate = dynamic(() => import('./ThemeCreate'), { + loading: () => null +}) const ThemeItem = ({ children, item, isSelected, onClick }) => (
diff --git a/lib/constants.js b/lib/constants.js index 2696675..4fa25b9 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -908,18 +908,8 @@ const unfold = (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}`) - } - } - ) + require(`codemirror/mode/javascript/javascript`) + import('./modes') } export const DEFAULT_SETTINGS = { diff --git a/lib/modes.js b/lib/modes.js new file mode 100644 index 0000000..5b9aabc --- /dev/null +++ b/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