uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 04:30:31 +09:00
Code Issues Releases Activity

chore: emit source maps

Browse Source
This commit is contained in:
uetchy 2020-06-29 12:24:01 +09:00
parent 71e24c9367
commit 1be3011bf7
12 changed files with 107 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.prettierrc
View File

@ -1,6 +1,8 @@
{ {
"arrowParens": "always", "jsxBracketSameLine": true,
"bracketSpacing": false, "semi": true,
"singleQuote": true, "singleQuote": true,
"trailingComma": "all" "trailingComma": "all",
"arrowParens": "always",
"bracketSpacing": true
} }

1
package.json
View File

@ -59,6 +59,7 @@
"mutationobserver-shim": "^0.3.5", "mutationobserver-shim": "^0.3.5",
"nock": "^12.0.3", "nock": "^12.0.3",
"prettier": "^2.0.5", "prettier": "^2.0.5",
"prettier-plugin-organize-imports": "^1.1.0",
"pretty-quick": "^2.0.1", "pretty-quick": "^2.0.1",
"ts-jest": "26.1.0", "ts-jest": "26.1.0",
"typescript": "^3.9.5" "typescript": "^3.9.5"

10
src/App.test.tsx
View File

@ -1,11 +1,11 @@
import React, {Suspense} from 'react'; import { render } from '@testing-library/react';
import {render} from '@testing-library/react';
import {BrowserRouter as Router} from 'react-router-dom';
import App from './App';
import 'mutationobserver-shim'; 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 () => { it('renders welcome message', async () => {
const {findByText} = render( const { findByText } = render(
<Suspense fallback={<div>loading</div>}> <Suspense fallback={<div>loading</div>}>
<Router> <Router>
<App /> <App />

46
src/App.tsx
View File

@ -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 Tooltip from 'rc-tooltip';
import React from 'react';
import Welcome from './components/Welcome'; import { Helmet } from 'react-helmet';
import Form from './components/Form'; 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 Cards from './components/cards';
import Footer from './components/Footer';
import { import {
ResultItem,
ResultIcon,
ResultName,
COLORS as ResultColor,
AvailableIcon, AvailableIcon,
COLORS as ResultColor,
ResultIcon,
ResultItem,
ResultName,
} from './components/cards/core'; } from './components/cards/core';
import {mobile} from './util/css'; import Footer from './components/Footer';
import {isStandalone} from './util/pwa'; import Form from './components/Form';
import {sanitize} from './util/text'; import Welcome from './components/Welcome';
import {useStoreState} from './store'; import { useStoreState } from './store';
import { mobile } from './util/css';
import { isStandalone } from './util/pwa';
import { sanitize } from './util/text';
export default function App() { export default function App() {
return ( return (
@ -51,7 +50,7 @@ export default function App() {
} }
function Home() { function Home() {
const {t} = useTranslation(); const { t } = useTranslation();
return ( return (
<> <>
@ -69,9 +68,9 @@ function Home() {
} }
function Search() { function Search() {
const {query} = useParams<{query: string}>(); const { query } = useParams<{ query: string }>();
const currentQuery = sanitize(query); const currentQuery = sanitize(query);
const {t} = useTranslation(); const { t } = useTranslation();
return ( return (
<> <>
@ -109,7 +108,7 @@ function Search() {
function Stat() { function Stat() {
const totalCount = useStoreState((state) => state.stats.totalCount); const totalCount = useStoreState((state) => state.stats.totalCount);
const availableCount = useStoreState((state) => state.stats.availableCount); const availableCount = useStoreState((state) => state.stats.availableCount);
const {t} = useTranslation(); const { t } = useTranslation();
const uniqueness = availableCount !== 0 ? availableCount / totalCount : 0.0; const uniqueness = availableCount !== 0 ? availableCount / totalCount : 0.0;
const uniquenessText = ((n) => { const uniquenessText = ((n) => {
@ -127,8 +126,7 @@ function Stat() {
<Tooltip <Tooltip
overlay={t('uniqueness.description')} overlay={t('uniqueness.description')}
placement="top" placement="top"
trigger={['hover']} trigger={['hover']}>
>
<span> <span>
{uniquenessText} ({(uniqueness * 100).toFixed(1)} UNIQ) {uniquenessText} ({(uniqueness * 100).toFixed(1)} UNIQ)
</span> </span>

48
src/components/cards/core.tsx
View File

@ -1,16 +1,15 @@
import React, {useState, useEffect, Suspense} from 'react';
import styled from 'styled-components';
import useFetch from 'fetch-suspense'; import useFetch from 'fetch-suspense';
import Tooltip from 'rc-tooltip'; 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 BarLoader from 'react-spinners/BarLoader';
import {GoInfo} from 'react-icons/go'; import styled from 'styled-components';
import {IoIosFlash} from 'react-icons/io'; import { useStoreActions } from '../../store';
import {useTranslation} from 'react-i18next'; import { sendError, sendExpandEvent } from '../../util/analytics';
import {OutboundLink} from 'react-ga'; import { mobile } from '../../util/css';
import {sendError, sendExpandEvent} from '../../util/analytics';
import {mobile} from '../../util/css';
import {useStoreActions} from '../../store';
export const COLORS = { export const COLORS = {
available: '#6e00ff', available: '#6e00ff',
@ -18,7 +17,7 @@ export const COLORS = {
error: '#ff388b', error: '#ff388b',
}; };
export const Card: React.FC<{title: string}> = ({title, children}) => { export const Card: React.FC<{ title: string }> = ({ title, children }) => {
return ( return (
<CardContainer> <CardContainer>
<CardTitle>{title}</CardTitle> <CardTitle>{title}</CardTitle>
@ -33,9 +32,9 @@ export const Repeater: React.FC<{
items: string[]; items: string[];
moreItems?: string[]; moreItems?: string[];
children: (name: string) => React.ReactNode; children: (name: string) => React.ReactNode;
}> = ({items = [], moreItems = [], children}) => { }> = ({ items = [], moreItems = [], children }) => {
const [revealAlternatives, setRevealAlternatives] = useState(false); const [revealAlternatives, setRevealAlternatives] = useState(false);
const {t} = useTranslation(); const { t } = useTranslation();
function onClick() { function onClick() {
sendExpandEvent(); sendExpandEvent();
@ -154,7 +153,7 @@ export const ExistentialAvailability: React.FC<{
icon, icon,
}) => { }) => {
const increaseCounter = useStoreActions((actions) => actions.stats.add); 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) { if (response.status !== 404 && response.status !== 200) {
throw new NotFoundError(`${name}: ${response.status}`); throw new NotFoundError(`${name}: ${response.status}`);
@ -220,8 +219,7 @@ export const Result: React.FC<{
<OutboundLink <OutboundLink
to={link} to={link}
eventLabel={link.split('/')[2]} eventLabel={link.split('/')[2]}
target="_blank" target="_blank">
>
{content} {content}
</OutboundLink> </OutboundLink>
) : ( ) : (
@ -245,16 +243,16 @@ export const Result: React.FC<{
// 4. render(), now with eventId provided from Sentry // 4. render(), now with eventId provided from Sentry
class ErrorBoundary extends React.Component< class ErrorBoundary extends React.Component<
{}, {},
{hasError: boolean; message: string; eventId?: string} { hasError: boolean; message: string; eventId?: string }
> { > {
constructor(props: {}) { constructor(props: {}) {
super(props); super(props);
this.state = {hasError: false, message: '', eventId: undefined}; this.state = { hasError: false, message: '', eventId: undefined };
} }
// used in SSR // used in SSR
static getDerivedStateFromError(error: Error) { 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 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -263,7 +261,7 @@ class ErrorBoundary extends React.Component<
return; return;
} }
sendError(error, errorInfo).then((eventId) => { 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})` : '' this.state.eventId ? ` (${this.state.eventId})` : ''
}`} }`}
placement="top" placement="top"
trigger={['hover']} trigger={['hover']}>
>
<ResultItem color={COLORS.error}> <ResultItem color={COLORS.error}>
<ResultIcon> <ResultIcon>
<GoInfo /> <GoInfo />
@ -292,15 +289,14 @@ class ErrorBoundary extends React.Component<
} }
} }
const ErrorHandler: React.FC = ({children}) => ( const ErrorHandler: React.FC = ({ children }) => (
<ErrorBoundary> <ErrorBoundary>
<Suspense <Suspense
fallback={ fallback={
<ResultContainer> <ResultContainer>
<BarLoader /> <BarLoader />
</ResultContainer> </ResultContainer>
} }>
>
{children} {children}
</Suspense> </Suspense>
</ErrorBoundary> </ErrorBoundary>
@ -368,7 +364,7 @@ export const ResultItem = styled.div`
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
word-break: break-all; word-break: break-all;
color: ${({color}) => color}; color: ${({ color }) => color};
`; `;
export const ResultName = styled.div` export const ResultName = styled.div`

39
src/components/cards/index.tsx
View File

@ -1,35 +1,34 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components'; 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 DomainCard from './providers/Domains';
import FirebaseCard from './providers/Firebase';
import GithubCard from './providers/GitHubRepository'; import GithubCard from './providers/GitHubRepository';
import GithubSearchCard from './providers/GitHubSearch';
import GitLabCard from './providers/GitLab'; 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 NpmCard from './providers/Npm';
import NtaCard from './providers/Nta';
import OcamlCard from './providers/Ocaml';
import PypiCard from './providers/PyPI'; import PypiCard from './providers/PyPI';
import RubyGemsCard from './providers/RubyGems'; 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 S3Card from './providers/S3';
import JsOrgCard from './providers/JsOrg'; import SlackCard from './providers/Slack';
import GithubSearchCard from './providers/GitHubSearch'; import SpectrumCard from './providers/Spectrum';
import AppStoreCard from './providers/AppStore'; import TwitterCard from './providers/Twitter';
import HerokuCard from './providers/Heroku';
import VercelCard from './providers/Vercel'; 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 { const {
i18n: {language}, i18n: { language },
} = useTranslation(); } = useTranslation();
return ( return (

19
src/components/cards/providers/AppStore.tsx
View File

@ -1,17 +1,16 @@
import React from 'react';
import useFetch from 'fetch-suspense'; import useFetch from 'fetch-suspense';
import {useTranslation} from 'react-i18next'; import React from 'react';
import {FaAppStore, FaInfoCircle} from 'react-icons/fa'; 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 term = encodeURIComponent(query);
const response = useFetch( const response = useFetch(
`/availability/appstore/${term}?country=${t('countryCode')}`, `/availability/appstore/${term}?country=${t('countryCode')}`,
) as { ) 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; const apps = response.result;
@ -34,8 +33,8 @@ const Search: React.FC<{query: string}> = ({query}) => {
); );
}; };
const AppStoreCard: React.FC<{query: string}> = ({query}) => { const AppStoreCard: React.FC<{ query: string }> = ({ query }) => {
const {t} = useTranslation(); const { t } = useTranslation();
return ( return (
<Card title={t('providers.appStore')}> <Card title={t('providers.appStore')}>

24
src/index.tsx
View File

@ -1,21 +1,19 @@
import { StoreProvider } from 'easy-peasy';
import { createBrowserHistory } from 'history';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import {Router} from 'react-router-dom'; import { Router } from 'react-router-dom';
import {StoreProvider} from 'easy-peasy'; import { toast, ToastContainer } from 'react-toastify';
import {createBrowserHistory} from 'history';
import {ToastContainer, toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'; import 'react-toastify/dist/ReactToastify.css';
import 'rc-tooltip/assets/bootstrap.css';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
import {FullScreenSuspense} from './util/suspense'; import { store, wrapHistoryWithStoreHandler } from './store';
import {wrapHistoryWithGA, initSentry} from './util/analytics'; import { initSentry, wrapHistoryWithGA } from './util/analytics';
import {initCrisp} from './util/crip'; import { compose } from './util/array';
import {compose} from './util/array'; import { initCrisp } from './util/crip';
import {store, wrapHistoryWithStoreHandler} from './store';
import './util/i18n'; import './util/i18n';
import { FullScreenSuspense } from './util/suspense';
initSentry(); initSentry();
initCrisp(); initCrisp();
@ -52,7 +50,7 @@ serviceWorker.register({
closeOnClick: true, closeOnClick: true,
}); });
if (registration && registration.waiting) { if (registration && registration.waiting) {
registration.waiting.postMessage({type: 'SKIP_WAITING'}); registration.waiting.postMessage({ type: 'SKIP_WAITING' });
} }
}, },
}); });

8
src/util/hooks.test.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import { render, waitFor } from '@testing-library/react';
import {render, waitFor} from '@testing-library/react';
import {useDeferredState} from './hooks';
import 'mutationobserver-shim'; import 'mutationobserver-shim';
import React from 'react';
import { useDeferredState } from './hooks';
const App: React.FC = () => { const App: React.FC = () => {
const [value, setValue] = useDeferredState(500, 0); const [value, setValue] = useDeferredState(500, 0);
@ -14,7 +14,7 @@ const App: React.FC = () => {
}; };
it('provoke state flow after certain time passed', async () => { it('provoke state flow after certain time passed', async () => {
const {getByTestId} = render(<App />); const { getByTestId } = render(<App />);
expect(getByTestId('root').textContent).toBe('0'); expect(getByTestId('root').textContent).toBe('0');
await waitFor(() => { await waitFor(() => {
expect(getByTestId('root').textContent).toBe('3'); expect(getByTestId('root').textContent).toBe('3');

2
src/util/hooks.ts
View File

@ -1,4 +1,4 @@
import {useState, useEffect} from 'react'; import { useEffect, useState } from 'react';
export function useDeferredState<T>( export function useDeferredState<T>(
duration = 1000, duration = 1000,

5
tsconfig.json
View File

@ -1,13 +1,14 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"lib": ["dom", "dom.iterable", "esnext"], "lib": ["dom", "dom.iterable", "ESNext"],
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
"sourceMap": true,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"strict": true, "strict": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"module": "esnext", "module": "ESNext",
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,

5
yarn.lock
View File

@ -9572,6 +9572,11 @@ prepend-http@^1.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= 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: prettier@^2.0.5:
version "2.0.5" version "2.0.5"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"