From 8edd11da62a353c121cc840996eb2697e821454a Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sun, 20 Jan 2019 13:13:20 -0800 Subject: [PATCH] Upgrade Prettier Improves formatting of hooks --- .prettierignore | 5 +++- demo/js/WebampIcon.tsx | 42 +++++++++++++---------------- js/components/ContextMenu.tsx | 32 +++++++++------------- js/components/ContextMenuTarget.tsx | 41 +++++++++++++--------------- js/components/DropTarget.tsx | 25 ++++++++--------- package.json | 4 +-- yarn.lock | 6 ++--- 7 files changed, 70 insertions(+), 85 deletions(-) diff --git a/.prettierignore b/.prettierignore index 1ae56fed..fe6cea0c 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,5 +1,8 @@ package.json **/*.min.css **/base-skin.css -js/googleAnalytics.min.js +demo/js/googleAnalytics.min.js built/* +demo/built/* +coverage/* +examples/webpack/bundle.js diff --git a/demo/js/WebampIcon.tsx b/demo/js/WebampIcon.tsx index 3b2c524e..236908ed 100644 --- a/demo/js/WebampIcon.tsx +++ b/demo/js/WebampIcon.tsx @@ -12,33 +12,27 @@ const WebampIcon = (props: Props) => { const ref = useRef(); const [hidden, setHidden] = useState(true); const [selected, setSelected] = useState(false); - useEffect( - () => { - return props.webamp.onClose(() => { - setHidden(false); - setSelected(false); - }); - }, - [props.webamp] - ); + useEffect(() => { + return props.webamp.onClose(() => { + setHidden(false); + setSelected(false); + }); + }, [props.webamp]); - useEffect( - () => { - if (!selected) { + useEffect(() => { + if (!selected) { + return; + } + const handleClick = (e: MouseEvent) => { + if (ref.current.contains(e.target)) { return; + } else { + setSelected(false); } - const handleClick = (e: MouseEvent) => { - if (ref.current.contains(e.target)) { - return; - } else { - setSelected(false); - } - }; - document.addEventListener("click", handleClick); - return () => document.removeEventListener("click", handleClick); - }, - [selected] - ); + }; + document.addEventListener("click", handleClick); + return () => document.removeEventListener("click", handleClick); + }, [selected]); return ( hidden || (
{ - const node: HTMLDivElement = useMemo( - () => { - const node = document.createElement("div"); - node.id = "webamp-context-menu"; - node.style.position = "absolute"; - node.style.top = "0"; - node.style.left = "0"; - node.style.zIndex = String(props.zIndex + 1); - return node; - }, - [props.zIndex] - ); + const node: HTMLDivElement = useMemo(() => { + const node = document.createElement("div"); + node.id = "webamp-context-menu"; + node.style.position = "absolute"; + node.style.top = "0"; + node.style.left = "0"; + node.style.zIndex = String(props.zIndex + 1); + return node; + }, [props.zIndex]); - useEffect( - () => { - document.body.appendChild(node); - return () => document.body.removeChild(node); - }, - [node] - ); + useEffect(() => { + document.body.appendChild(node); + return () => document.body.removeChild(node); + }, [node]); const style: React.CSSProperties = { top: props.top, diff --git a/js/components/ContextMenuTarget.tsx b/js/components/ContextMenuTarget.tsx index c5a0c749..06f8bf9d 100644 --- a/js/components/ContextMenuTarget.tsx +++ b/js/components/ContextMenuTarget.tsx @@ -30,29 +30,26 @@ function getNodeOffset(node?: Element) { function ContextMenuTarget(props: Props) { const handleNode = useRef(null); const [selected, setSelected] = useState(false); - useEffect( - () => { - function handleGlobalClick(e: MouseEvent) { - if ( - selected && - // Typescript does not believe that these click events are always fired on DOM nodes. - e.target instanceof Element && - selected && - // Not sure how, but it's possible for this to get called when handleNode is null/undefined. - // https://sentry.io/share/issue/2066cd79f21e4f279791319f4d2ea35d/ - handleNode.current && - !handleNode.current.contains(e.target!) - ) { - setSelected(false); - } + useEffect(() => { + function handleGlobalClick(e: MouseEvent) { + if ( + selected && + // Typescript does not believe that these click events are always fired on DOM nodes. + e.target instanceof Element && + selected && + // Not sure how, but it's possible for this to get called when handleNode is null/undefined. + // https://sentry.io/share/issue/2066cd79f21e4f279791319f4d2ea35d/ + handleNode.current && + !handleNode.current.contains(e.target!) + ) { + setSelected(false); } - document.addEventListener("click", handleGlobalClick); - return () => { - document.removeEventListener("click", handleGlobalClick); - }; - }, - [selected, handleNode.current] - ); + } + document.addEventListener("click", handleGlobalClick); + return () => { + document.removeEventListener("click", handleGlobalClick); + }; + }, [selected, handleNode.current]); const offset = useMemo(() => getNodeOffset(handleNode.current), [selected]); diff --git a/js/components/DropTarget.tsx b/js/components/DropTarget.tsx index 29d61e71..91d5d241 100644 --- a/js/components/DropTarget.tsx +++ b/js/components/DropTarget.tsx @@ -18,21 +18,18 @@ function supress(e: React.DragEvent) { } const DropTarget = (props: Props) => { - const onDrop = useCallback( - (e: React.DragEvent) => { - supress(e); - // TODO: We could probably move this coordinate logic into the playlist. - // I think that's the only place it gets used. - const { currentTarget } = e; - if (!(currentTarget instanceof Element)) { - return; - } + const onDrop = useCallback((e: React.DragEvent) => { + supress(e); + // TODO: We could probably move this coordinate logic into the playlist. + // I think that's the only place it gets used. + const { currentTarget } = e; + if (!(currentTarget instanceof Element)) { + return; + } - const { left: x, top: y } = currentTarget.getBoundingClientRect(); - props.handleDrop(e, { x, y }); - }, - [props.handleDrop] - ); + const { left: x, top: y } = currentTarget.getBoundingClientRect(); + props.handleDrop(e, { x, y }); + }, [props.handleDrop]); const { // eslint-disable-next-line no-shadow, no-unused-vars diff --git a/package.json b/package.json index 518d5672..4c44c21a 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "test": "jest --projects config/jest.unit.js config/jest.eslint.js", "travis-tests": "npm run test && npm run type-check && npm run build && npm run build-library", "tdd": "jest --projects config/jest.unit.js --watch", - "format": "prettier --write **/*.js **/*.ts **/*.tsx **/*.d.ts **/*.css", + "format": "prettier --write \"**/*.{js,ts,tsx,d.ts,css}\"", "integration-tests": "npm run build -- --display=errors-only && jest --projects config/jest.integration.js", "build-skin": "rm skins/base-2.91.wsz && cd skins/base-2.91 && zip -x .* -x 'Skining Updates.txt' -r ../base-2.91.wsz .", "build-skin-png": "rm skins/base-2.91-png.wsz && cd skins/base-2.91-png && zip -x .* -x 'Skining Updates.txt' -r ../base-2.91-png.wsz .", @@ -101,7 +101,7 @@ "jszip": "^3.1.3", "milkdrop-preset-converter-aws": "^0.1.6", "music-metadata-browser": "^0.6.1", - "prettier": "^1.15.3", + "prettier": "^1.16.0", "prop-types": "^15.5.10", "puppeteer": "^1.4.0", "raven-for-redux": "^1.3.1", diff --git a/yarn.lock b/yarn.lock index fdcd456d..d1eeaf46 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6667,9 +6667,9 @@ preserve@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" -prettier@^1.15.3: - version "1.15.3" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.15.3.tgz#1feaac5bdd181237b54dbe65d874e02a1472786a" +prettier@^1.16.0: + version "1.16.0" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.0.tgz#104dd25f5ee3d0c9d0a6ce4bb40ced8481d51219" pretty-bytes@^4.0.2: version "4.0.2"