From 68cc11c52c530e6a4766bdba00d0b2274032d3ad Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Wed, 20 May 2020 22:44:07 +0200 Subject: [PATCH] fix: avoid top level fat arrow fast refresh doesn't work well with anonymous functions related: https://github.com/zeit/next.js/issues/12891#issuecomment-628846848 --- packages/app/src/components/icons/github.js | 2 +- packages/app/src/components/icons/info.js | 2 +- packages/app/src/components/icons/keyboard.js | 2 +- packages/app/src/components/icons/svg.js | 6 +++--- packages/app/src/components/icons/theme.js | 2 +- .../app/src/containers/overlays/overlay-about.js | 4 +--- .../containers/overlays/overlay-key-bindings.js | 6 ++---- .../app/src/containers/overlays/overlay-preview.js | 14 ++++++-------- packages/app/src/context/editor-context.js | 8 +++----- packages/app/src/context/index.js | 4 +--- packages/app/src/context/overlay-context.js | 6 ++---- packages/app/src/context/presets-context.js | 8 +++----- packages/app/src/context/theme-context.js | 4 +--- packages/app/src/pages/editor.js | 2 +- packages/app/src/pages/index.js | 2 +- 15 files changed, 28 insertions(+), 44 deletions(-) diff --git a/packages/app/src/components/icons/github.js b/packages/app/src/components/icons/github.js index 54f9f6fa..9b510d73 100644 --- a/packages/app/src/components/icons/github.js +++ b/packages/app/src/components/icons/github.js @@ -1,4 +1,4 @@ -import Svg from './svg' +import { Svg } from './svg' export const GitHubIcon = ({ size = '20', ...props }) => ( ( ( ( - ( + ( { +export default function OverlayAbout () { const { theme } = useContext(AppContext) const { color, contrast } = theme @@ -51,5 +51,3 @@ const OverlayAbout = () => { ) } - -export default OverlayAbout diff --git a/packages/app/src/containers/overlays/overlay-key-bindings.js b/packages/app/src/containers/overlays/overlay-key-bindings.js index 43885bcb..86543d87 100644 --- a/packages/app/src/containers/overlays/overlay-key-bindings.js +++ b/packages/app/src/containers/overlays/overlay-key-bindings.js @@ -6,7 +6,7 @@ import { isMac } from '@/lib' const ctrl = isMac ? 'cmd' : 'ctrl' -const OverlayKeyBindings = () => { +export default function OverlayKeyBindings () { const { theme } = useContext(AppContext) const { borderColor, color } = theme @@ -67,7 +67,7 @@ const OverlayKeyBindings = () => { borderRadius: 4 }} > - {combination.map((key) => ( + {combination.map(key => ( { ) } - -export default OverlayKeyBindings diff --git a/packages/app/src/containers/overlays/overlay-preview.js b/packages/app/src/containers/overlays/overlay-preview.js index 14f61eb4..52782629 100644 --- a/packages/app/src/containers/overlays/overlay-preview.js +++ b/packages/app/src/containers/overlays/overlay-preview.js @@ -11,7 +11,7 @@ const toClipboard = async (text, name) => { notification(`Copied ${name} to clipboard`) } -const OverlayPreview = () => { +export default function OverlayPreview () { const { query, screenshotUrl, theme } = useContext(AppContext) const { borderColor, color, contrast } = theme @@ -49,7 +49,7 @@ const OverlayPreview = () => { borderColor, color: contrast }} - onClick={(e) => toClipboard(e.target.textContent, 'SEO Tags')} + onClick={e => toClipboard(e.target.textContent, 'SEO Tags')} children={shareCode.seo(screenshotUrl)} /> @@ -60,7 +60,7 @@ const OverlayPreview = () => { color: contrast }} children={shareCode.html(screenshotUrl)} - onClick={(e) => toClipboard(e.target.textContent, 'HTML')} + onClick={e => toClipboard(e.target.textContent, 'HTML')} /> @@ -70,7 +70,7 @@ const OverlayPreview = () => { color: contrast }} children={shareCode.markdown(screenshotUrl)} - onClick={(e) => toClipboard(e.target.textContent, 'Markdown')} + onClick={e => toClipboard(e.target.textContent, 'Markdown')} /> @@ -80,7 +80,7 @@ const OverlayPreview = () => { color: contrast }} children={shareCode.javascript(query)} - onClick={(e) => toClipboard(e.target.textContent, 'Javascript')} + onClick={e => toClipboard(e.target.textContent, 'Javascript')} /> @@ -90,7 +90,7 @@ const OverlayPreview = () => { color: contrast }} children={screenshotUrl} - onClick={(e) => toClipboard(e.target.textContent, 'URL')} + onClick={e => toClipboard(e.target.textContent, 'URL')} /> @@ -98,5 +98,3 @@ const OverlayPreview = () => { ) } - -export default OverlayPreview diff --git a/packages/app/src/context/editor-context.js b/packages/app/src/context/editor-context.js index 9fdaa849..4cdea7b2 100644 --- a/packages/app/src/context/editor-context.js +++ b/packages/app/src/context/editor-context.js @@ -10,7 +10,7 @@ const updateQuery = debounce(({ setQuery, code, queryVariables }) => { setQuery(newQuery) }) -const editorContext = (presetRef, query, setQuery) => { +export default function EditorContext (presetRef, query, setQuery) { const [code, setCode] = useState(() => { if (isEmpty(query)) return presetRef.current.code const { p } = query @@ -26,7 +26,7 @@ const editorContext = (presetRef, query, setQuery) => { }) const handleCode = useCallback( - (newCode) => { + newCode => { setCode(newCode) const updateQueryOpts = { code: newCode, setQuery } @@ -40,7 +40,7 @@ const editorContext = (presetRef, query, setQuery) => { ) const handleQueryVariables = useCallback( - (newJSON) => { + newJSON => { setQueryVariables(newJSON) updateQuery({ setQuery, @@ -60,5 +60,3 @@ const editorContext = (presetRef, query, setQuery) => { setQueryVariables } } - -export default editorContext diff --git a/packages/app/src/context/index.js b/packages/app/src/context/index.js index a1044df6..dab239b9 100644 --- a/packages/app/src/context/index.js +++ b/packages/app/src/context/index.js @@ -11,7 +11,7 @@ import themeContext from './theme-context' export const AppContext = createContext({}) -const AppContextProvider = ({ children }) => { +export default function AppContextProvider ({ children }) { const [query, setQuery] = useQueryState() const presetRef = useRef(presets[(query && query.preset) || DEFAULT_PRESET]) @@ -93,5 +93,3 @@ const AppContextProvider = ({ children }) => { ) } - -export default AppContextProvider diff --git a/packages/app/src/context/overlay-context.js b/packages/app/src/context/overlay-context.js index dcc97253..bf9ad589 100644 --- a/packages/app/src/context/overlay-context.js +++ b/packages/app/src/context/overlay-context.js @@ -1,11 +1,11 @@ import { useCallback, useState } from 'react' import defer from 'tickedoff' -const overlayContext = (onShow) => { +export default function OverlayContext (onShow) { const [isOverlay, setOverlay] = useState('') const showOverlay = useCallback( - (state) => () => { + state => () => { if (onShow) { onShow() } @@ -19,5 +19,3 @@ const overlayContext = (onShow) => { return { isOverlay, showOverlay, hideOverlay } } - -export default overlayContext diff --git a/packages/app/src/context/presets-context.js b/packages/app/src/context/presets-context.js index c08663dd..1f2a56a6 100644 --- a/packages/app/src/context/presets-context.js +++ b/packages/app/src/context/presets-context.js @@ -2,13 +2,13 @@ import { useCallback } from 'react' import { presets } from '@/components' -const presetOptions = Object.keys(presets).map((key) => ({ +const presetOptions = Object.keys(presets).map(key => ({ value: key, label: presets[key].name })) -const presetsContext = (onChange) => { - const handlePresetChange = useCallback((presetName) => { +export default function PresetsContext (onChange) { + const handlePresetChange = useCallback(presetName => { const newPreset = presets[presetName] if (onChange) { onChange(presetName, newPreset) @@ -20,5 +20,3 @@ const presetsContext = (onChange) => { presetOptions } } - -export default presetsContext diff --git a/packages/app/src/context/theme-context.js b/packages/app/src/context/theme-context.js index 665b6bda..b8103664 100644 --- a/packages/app/src/context/theme-context.js +++ b/packages/app/src/context/theme-context.js @@ -8,7 +8,7 @@ import { theme as themeBase, editorThemes } from '@/theme' const cycledMode = new Cycled(Object.keys(themeBase.colors.modes)) const nextMode = () => cycledMode.next() -const themeContext = () => { +export default function ThemeContext () { const { colorMode, setColorMode } = useThemeUI() const changeTheme = useCallback(() => setColorMode(nextMode()), []) @@ -27,5 +27,3 @@ const themeContext = () => { return { colorMode, changeTheme, theme } } - -export default themeContext diff --git a/packages/app/src/pages/editor.js b/packages/app/src/pages/editor.js index 3a4d0a03..0db68664 100644 --- a/packages/app/src/pages/editor.js +++ b/packages/app/src/pages/editor.js @@ -7,7 +7,7 @@ import { setImageMeta } from '@/lib' import { OVERLAY_STATE } from '@/constants' import { AppContext } from '@/context' -export default () => { +export default function Editor () { const [render, setRender] = useState(false) const { changeTheme, diff --git a/packages/app/src/pages/index.js b/packages/app/src/pages/index.js index 8967b919..44b219a6 100644 --- a/packages/app/src/pages/index.js +++ b/packages/app/src/pages/index.js @@ -4,7 +4,7 @@ import { useRouter } from 'next/router' import { PreviewArea } from '@/containers' import { AppFrame, Spinner } from '@/components' -export default () => { +export default function Index () { const router = useRouter() const [isLoading, setIsLoading] = useState(true)