From 1be3011bf797cf14ce3bf47b0882c98132b4cdd2 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Mon, 29 Jun 2020 12:24:01 +0900 Subject: [PATCH] chore: emit source maps --- .prettierrc | 8 ++-- package.json | 1 + src/App.test.tsx | 10 ++--- src/App.tsx | 46 ++++++++++---------- src/components/cards/core.tsx | 48 ++++++++++----------- src/components/cards/index.tsx | 39 ++++++++--------- src/components/cards/providers/AppStore.tsx | 19 ++++---- src/index.tsx | 24 +++++------ src/util/hooks.test.tsx | 8 ++-- src/util/hooks.ts | 2 +- tsconfig.json | 5 ++- yarn.lock | 5 +++ 12 files changed, 107 insertions(+), 108 deletions(-) diff --git a/.prettierrc b/.prettierrc index 5f7b59d..f841e50 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,8 @@ { - "arrowParens": "always", - "bracketSpacing": false, + "jsxBracketSameLine": true, + "semi": true, "singleQuote": true, - "trailingComma": "all" + "trailingComma": "all", + "arrowParens": "always", + "bracketSpacing": true } diff --git a/package.json b/package.json index d50bfb8..92167fa 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "mutationobserver-shim": "^0.3.5", "nock": "^12.0.3", "prettier": "^2.0.5", + "prettier-plugin-organize-imports": "^1.1.0", "pretty-quick": "^2.0.1", "ts-jest": "26.1.0", "typescript": "^3.9.5" diff --git a/src/App.test.tsx b/src/App.test.tsx index 9dbf9ec..259004b 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,11 +1,11 @@ -import React, {Suspense} from 'react'; -import {render} from '@testing-library/react'; -import {BrowserRouter as Router} from 'react-router-dom'; -import App from './App'; +import { render } from '@testing-library/react'; import 'mutationobserver-shim'; +import React, { Suspense } from 'react'; +import { BrowserRouter as Router } from 'react-router-dom'; +import App from './App'; it('renders welcome message', async () => { - const {findByText} = render( + const { findByText } = render( loading}> diff --git a/src/App.tsx b/src/App.tsx index 21a2f23..1e542bc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,26 +1,25 @@ -import React from 'react'; -import styled, {createGlobalStyle} from 'styled-components'; -import {Helmet} from 'react-helmet'; -import {useTranslation} from 'react-i18next'; -import {Switch, Route, useParams, Redirect} from 'react-router-dom'; -import {IoIosRocket, IoIosFlash} from 'react-icons/io'; import Tooltip from 'rc-tooltip'; - -import Welcome from './components/Welcome'; -import Form from './components/Form'; +import React from 'react'; +import { Helmet } from 'react-helmet'; +import { useTranslation } from 'react-i18next'; +import { IoIosFlash, IoIosRocket } from 'react-icons/io'; +import { Redirect, Route, Switch, useParams } from 'react-router-dom'; +import styled, { createGlobalStyle } from 'styled-components'; import Cards from './components/cards'; -import Footer from './components/Footer'; import { - ResultItem, - ResultIcon, - ResultName, - COLORS as ResultColor, AvailableIcon, + COLORS as ResultColor, + ResultIcon, + ResultItem, + ResultName, } from './components/cards/core'; -import {mobile} from './util/css'; -import {isStandalone} from './util/pwa'; -import {sanitize} from './util/text'; -import {useStoreState} from './store'; +import Footer from './components/Footer'; +import Form from './components/Form'; +import Welcome from './components/Welcome'; +import { useStoreState } from './store'; +import { mobile } from './util/css'; +import { isStandalone } from './util/pwa'; +import { sanitize } from './util/text'; export default function App() { return ( @@ -51,7 +50,7 @@ export default function App() { } function Home() { - const {t} = useTranslation(); + const { t } = useTranslation(); return ( <> @@ -69,9 +68,9 @@ function Home() { } function Search() { - const {query} = useParams<{query: string}>(); + const { query } = useParams<{ query: string }>(); const currentQuery = sanitize(query); - const {t} = useTranslation(); + const { t } = useTranslation(); return ( <> @@ -109,7 +108,7 @@ function Search() { function Stat() { const totalCount = useStoreState((state) => state.stats.totalCount); const availableCount = useStoreState((state) => state.stats.availableCount); - const {t} = useTranslation(); + const { t } = useTranslation(); const uniqueness = availableCount !== 0 ? availableCount / totalCount : 0.0; const uniquenessText = ((n) => { @@ -127,8 +126,7 @@ function Stat() { + trigger={['hover']}> {uniquenessText} ({(uniqueness * 100).toFixed(1)} UNIQ) diff --git a/src/components/cards/core.tsx b/src/components/cards/core.tsx index 4c43d90..e0a9586 100644 --- a/src/components/cards/core.tsx +++ b/src/components/cards/core.tsx @@ -1,16 +1,15 @@ -import React, {useState, useEffect, Suspense} from 'react'; -import styled from 'styled-components'; import useFetch from 'fetch-suspense'; import Tooltip from 'rc-tooltip'; +import React, { Suspense, useEffect, useState } from 'react'; +import { OutboundLink } from 'react-ga'; +import { useTranslation } from 'react-i18next'; +import { GoInfo } from 'react-icons/go'; +import { IoIosFlash } from 'react-icons/io'; import BarLoader from 'react-spinners/BarLoader'; -import {GoInfo} from 'react-icons/go'; -import {IoIosFlash} from 'react-icons/io'; -import {useTranslation} from 'react-i18next'; -import {OutboundLink} from 'react-ga'; - -import {sendError, sendExpandEvent} from '../../util/analytics'; -import {mobile} from '../../util/css'; -import {useStoreActions} from '../../store'; +import styled from 'styled-components'; +import { useStoreActions } from '../../store'; +import { sendError, sendExpandEvent } from '../../util/analytics'; +import { mobile } from '../../util/css'; export const COLORS = { available: '#6e00ff', @@ -18,7 +17,7 @@ export const COLORS = { error: '#ff388b', }; -export const Card: React.FC<{title: string}> = ({title, children}) => { +export const Card: React.FC<{ title: string }> = ({ title, children }) => { return ( {title} @@ -33,9 +32,9 @@ export const Repeater: React.FC<{ items: string[]; moreItems?: string[]; children: (name: string) => React.ReactNode; -}> = ({items = [], moreItems = [], children}) => { +}> = ({ items = [], moreItems = [], children }) => { const [revealAlternatives, setRevealAlternatives] = useState(false); - const {t} = useTranslation(); + const { t } = useTranslation(); function onClick() { sendExpandEvent(); @@ -154,7 +153,7 @@ export const ExistentialAvailability: React.FC<{ icon, }) => { const increaseCounter = useStoreActions((actions) => actions.stats.add); - const response = useFetch(target, undefined, {metadata: true}); + const response = useFetch(target, undefined, { metadata: true }); if (response.status !== 404 && response.status !== 200) { throw new NotFoundError(`${name}: ${response.status}`); @@ -220,8 +219,7 @@ export const Result: React.FC<{ + target="_blank"> {content} ) : ( @@ -245,16 +243,16 @@ export const Result: React.FC<{ // 4. render(), now with eventId provided from Sentry class ErrorBoundary extends React.Component< {}, - {hasError: boolean; message: string; eventId?: string} + { hasError: boolean; message: string; eventId?: string } > { constructor(props: {}) { super(props); - this.state = {hasError: false, message: '', eventId: undefined}; + this.state = { hasError: false, message: '', eventId: undefined }; } // used in SSR static getDerivedStateFromError(error: Error) { - return {hasError: true, message: error.message}; + return { hasError: true, message: error.message }; } // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -263,7 +261,7 @@ class ErrorBoundary extends React.Component< return; } sendError(error, errorInfo).then((eventId) => { - this.setState({eventId}); + this.setState({ eventId }); }); } @@ -276,8 +274,7 @@ class ErrorBoundary extends React.Component< this.state.eventId ? ` (${this.state.eventId})` : '' }`} placement="top" - trigger={['hover']} - > + trigger={['hover']}> @@ -292,15 +289,14 @@ class ErrorBoundary extends React.Component< } } -const ErrorHandler: React.FC = ({children}) => ( +const ErrorHandler: React.FC = ({ children }) => ( - } - > + }> {children} @@ -368,7 +364,7 @@ export const ResultItem = styled.div` flex-direction: row; align-items: flex-start; word-break: break-all; - color: ${({color}) => color}; + color: ${({ color }) => color}; `; export const ResultName = styled.div` diff --git a/src/components/cards/index.tsx b/src/components/cards/index.tsx index abf53ed..3e7e646 100644 --- a/src/components/cards/index.tsx +++ b/src/components/cards/index.tsx @@ -1,35 +1,34 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; -import {useTranslation} from 'react-i18next'; -import {mobile} from '../../util/css'; - +import { mobile } from '../../util/css'; +import AppStoreCard from './providers/AppStore'; +import CratesioCard from './providers/Cratesio'; import DomainCard from './providers/Domains'; +import FirebaseCard from './providers/Firebase'; import GithubCard from './providers/GitHubRepository'; +import GithubSearchCard from './providers/GitHubSearch'; import GitLabCard from './providers/GitLab'; +import HerokuCard from './providers/Heroku'; +import HomebrewCard from './providers/Homebrew'; +import InstagramCard from './providers/Instagram'; +import JsOrgCard from './providers/JsOrg'; +import LinuxCard from './providers/Linux'; +import NetlifyCard from './providers/Netlify'; import NpmCard from './providers/Npm'; +import NtaCard from './providers/Nta'; +import OcamlCard from './providers/Ocaml'; import PypiCard from './providers/PyPI'; import RubyGemsCard from './providers/RubyGems'; -import CratesioCard from './providers/Cratesio'; -import HomebrewCard from './providers/Homebrew'; -import LinuxCard from './providers/Linux'; -import TwitterCard from './providers/Twitter'; -import InstagramCard from './providers/Instagram'; -import SpectrumCard from './providers/Spectrum'; -import SlackCard from './providers/Slack'; import S3Card from './providers/S3'; -import JsOrgCard from './providers/JsOrg'; -import GithubSearchCard from './providers/GitHubSearch'; -import AppStoreCard from './providers/AppStore'; -import HerokuCard from './providers/Heroku'; +import SlackCard from './providers/Slack'; +import SpectrumCard from './providers/Spectrum'; +import TwitterCard from './providers/Twitter'; import VercelCard from './providers/Vercel'; -import NtaCard from './providers/Nta'; -import NetlifyCard from './providers/Netlify'; -import OcamlCard from './providers/Ocaml'; -import FirebaseCard from './providers/Firebase'; -const Index: React.FC<{query: string}> = ({query}) => { +const Index: React.FC<{ query: string }> = ({ query }) => { const { - i18n: {language}, + i18n: { language }, } = useTranslation(); return ( diff --git a/src/components/cards/providers/AppStore.tsx b/src/components/cards/providers/AppStore.tsx index 8ae3622..d65c98c 100644 --- a/src/components/cards/providers/AppStore.tsx +++ b/src/components/cards/providers/AppStore.tsx @@ -1,17 +1,16 @@ -import React from 'react'; import useFetch from 'fetch-suspense'; -import {useTranslation} from 'react-i18next'; -import {FaAppStore, FaInfoCircle} from 'react-icons/fa'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { FaAppStore, FaInfoCircle } from 'react-icons/fa'; +import { Card, Result } from '../core'; -import {Card, Result} from '../core'; - -const Search: React.FC<{query: string}> = ({query}) => { - const {t} = useTranslation(); +const Search: React.FC<{ query: string }> = ({ query }) => { + const { t } = useTranslation(); const term = encodeURIComponent(query); const response = useFetch( `/availability/appstore/${term}?country=${t('countryCode')}`, ) as { - result: Array<{name: string; viewURL: string; price: number; id: string}>; + result: Array<{ name: string; viewURL: string; price: number; id: string }>; }; const apps = response.result; @@ -34,8 +33,8 @@ const Search: React.FC<{query: string}> = ({query}) => { ); }; -const AppStoreCard: React.FC<{query: string}> = ({query}) => { - const {t} = useTranslation(); +const AppStoreCard: React.FC<{ query: string }> = ({ query }) => { + const { t } = useTranslation(); return ( diff --git a/src/index.tsx b/src/index.tsx index 7507230..db29bfe 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,21 +1,19 @@ +import { StoreProvider } from 'easy-peasy'; +import { createBrowserHistory } from 'history'; +import 'rc-tooltip/assets/bootstrap.css'; import React from 'react'; import ReactDOM from 'react-dom'; -import {Router} from 'react-router-dom'; -import {StoreProvider} from 'easy-peasy'; -import {createBrowserHistory} from 'history'; -import {ToastContainer, toast} from 'react-toastify'; - +import { Router } from 'react-router-dom'; +import { toast, ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; -import 'rc-tooltip/assets/bootstrap.css'; - import App from './App'; import * as serviceWorker from './serviceWorker'; -import {FullScreenSuspense} from './util/suspense'; -import {wrapHistoryWithGA, initSentry} from './util/analytics'; -import {initCrisp} from './util/crip'; -import {compose} from './util/array'; -import {store, wrapHistoryWithStoreHandler} from './store'; +import { store, wrapHistoryWithStoreHandler } from './store'; +import { initSentry, wrapHistoryWithGA } from './util/analytics'; +import { compose } from './util/array'; +import { initCrisp } from './util/crip'; import './util/i18n'; +import { FullScreenSuspense } from './util/suspense'; initSentry(); initCrisp(); @@ -52,7 +50,7 @@ serviceWorker.register({ closeOnClick: true, }); if (registration && registration.waiting) { - registration.waiting.postMessage({type: 'SKIP_WAITING'}); + registration.waiting.postMessage({ type: 'SKIP_WAITING' }); } }, }); diff --git a/src/util/hooks.test.tsx b/src/util/hooks.test.tsx index c52f979..20d3ab0 100644 --- a/src/util/hooks.test.tsx +++ b/src/util/hooks.test.tsx @@ -1,7 +1,7 @@ -import React from 'react'; -import {render, waitFor} from '@testing-library/react'; -import {useDeferredState} from './hooks'; +import { render, waitFor } from '@testing-library/react'; import 'mutationobserver-shim'; +import React from 'react'; +import { useDeferredState } from './hooks'; const App: React.FC = () => { const [value, setValue] = useDeferredState(500, 0); @@ -14,7 +14,7 @@ const App: React.FC = () => { }; it('provoke state flow after certain time passed', async () => { - const {getByTestId} = render(); + const { getByTestId } = render(); expect(getByTestId('root').textContent).toBe('0'); await waitFor(() => { expect(getByTestId('root').textContent).toBe('3'); diff --git a/src/util/hooks.ts b/src/util/hooks.ts index 4366922..d5c1df3 100644 --- a/src/util/hooks.ts +++ b/src/util/hooks.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from 'react'; +import { useEffect, useState } from 'react'; export function useDeferredState( duration = 1000, diff --git a/tsconfig.json b/tsconfig.json index 2ec5a85..88e7d1b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,13 +1,14 @@ { "compilerOptions": { "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": ["dom", "dom.iterable", "ESNext"], "skipLibCheck": true, "esModuleInterop": true, + "sourceMap": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, - "module": "esnext", + "module": "ESNext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, diff --git a/yarn.lock b/yarn.lock index db609b7..32bf3ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9572,6 +9572,11 @@ prepend-http@^1.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= +prettier-plugin-organize-imports@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-1.1.0.tgz#92a4568c9952c7a2f266f607513405f3e108a070" + integrity sha512-FqEbM+NA/8kDUCQIB+avdkWxJPvg86Shg1GeQsaE8OCi8BQ+TwyPKRdF/6JUZJX0V7VoevG7MVLhPq21fYIG3A== + prettier@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"