andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(build): move to react 18 + vite

Browse Source
This commit is contained in:
rektdeckard
2023-02-02 22:15:00 -07:00
parent ced8732edb
commit 1b8d6c48fc
46 changed files with 198 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/App/App.test.tsx
View File

@@ -1,9 +0,0 @@
import React from "react";
import { render } from "@testing-library/react";
import App from "./App";
test("renders learn react link", () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

1
src/components/App/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./App";

1
src/components/Banner/Banner.tsx
View File

@@ -1,4 +1,3 @@
import React from "react";
import { Medal } from "phosphor-react";
import ReactGA from "react-ga";

1
src/components/Banner/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Banner";

11
src/components/ColorInput/ColorInput.tsx
View File

@@ -1,14 +1,15 @@
import React, { useCallback } from "react";
import { useCallback } from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import { iconColorAtom } from "../../state/atoms";
import { isDarkThemeSelector } from "../../state/selectors";
import useThrottled from "../../hooks/useThrottled";
import { iconColorAtom } from "@/state/atoms";
import { isDarkThemeSelector } from "@/state/selectors";
import useThrottled from "@/hooks/useThrottled";
import "./ColorInput.css";
type ColorInputProps = {};
const ColorInput: React.FC<ColorInputProps> = () => {
const ColorInput = (_: ColorInputProps) => {
const [color, setColor] = useRecoilState(iconColorAtom);
const isDark = useRecoilValue(isDarkThemeSelector);

1
src/components/ColorInput/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./ColorInput";

9
src/components/ErrorBoundary/ErrorBoundary.tsx
View File

@@ -1,14 +1,15 @@
import React, { ErrorInfo } from "react";
import { Component, ErrorInfo, ReactNode } from "react";
interface ErrorBoundaryProps {
fallback?: JSX.Element | React.ReactNode;
fallback?: JSX.Element | ReactNode;
children?: JSX.Element | ReactNode;
}
interface ErrorBoundaryState {
errorMessage?: string;
}
export default class ErrorBoundary extends React.Component<
export default class ErrorBoundary extends Component<
ErrorBoundaryProps,
ErrorBoundaryState
> {
@@ -26,7 +27,7 @@ export default class ErrorBoundary extends React.Component<
console.info(info);
}
render(): JSX.Element | React.ReactNode {
render(): JSX.Element | ReactNode {
if (this.state.errorMessage) {
return this.props.fallback ?? <p>{this.state.errorMessage}</p>;
}

1
src/components/ErrorBoundary/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./ErrorBoundary";

18
src/components/Footer/Footer.tsx
View File

@@ -1,15 +1,15 @@
import React from "react";
import { Coffee, Heart } from "phosphor-react";
import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
import markerGreen from "../../assets/marker-green.svg";
import postIt from "../../assets/footer-mobile.svg";
import Links from "../Links/Links";
import Links from "@/components/Links/Links";
import { ReactComponent as UArrowUpLeft } from "@/assets/u-arrow-up-left.svg";
import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg";
import { ReactComponent as PostIt } from "@/assets/footer-mobile.svg";
import "./Footer.css";
type FooterProps = {};
const Footer: React.FC<FooterProps> = () => {
const Footer = (_: FooterProps) => {
return (
<footer>
<div className="container">
@@ -23,7 +23,7 @@ const Footer: React.FC<FooterProps> = () => {
?.scrollIntoView({ behavior: "smooth", block: "start" });
}}
>
<img src={uArrowUpLeft} alt="" />
<UArrowUpLeft />
</button>
<div className="outro">
<Links />
@@ -108,11 +108,11 @@ const Footer: React.FC<FooterProps> = () => {
</a>{" "}
by Mikhail Sharanda.
</p>
<img id="marker-green" src={markerGreen} alt="" />
<MarkerGreen id="marker-green" />
</div>
</div>
<div className="illustrations-footer">
<img id="post-it" src={postIt} width="878" height="667" alt="" />
<PostIt id="post-it" width="878" height="667" />
</div>
</div>
</footer>

1
src/components/Footer/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Footer";

78
src/components/Header/Header.tsx
View File

@@ -1,22 +1,22 @@
import React from "react";
import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react";
import markerPurple from "../../assets/marker-purple.svg";
import paperclips from "../../assets/paperclips-header-mobile.svg";
import paperclipsThree from "../../assets/paperclips-header.svg";
import tablet from "../../assets/tablet.svg";
import tabletSpec from "../../assets/tablet-spec.svg";
import billiardBall from "../../assets/billiard-ball.svg";
import billiardBallSpec from "../../assets/billiard-ball-spec.svg";
import warning from "../../assets/warning.svg";
import warningSpec from "../../assets/warning-spec.svg";
import cuttingMat from "../../assets/cutting-mat.svg";
import cuttingMatSpec from "../../assets/cutting-mat-spec.svg";
import receipt from "../../assets/receipt.svg";
import receiptSpec from "../../assets/receipt-spec.svg";
import calculator from "../../assets/calculator.svg";
import calculatorSpec from "../../assets/calculator-spec.svg";
import Links from "../Links/Links";
import { ReactComponent as MarkerPurple } from "@/assets/marker-purple.svg";
import { ReactComponent as PaperClips } from "@/assets/paperclips-header-mobile.svg";
import { ReactComponent as PaperClipsThree } from "@/assets/paperclips-header.svg";
import { ReactComponent as Tablet } from "@/assets/tablet.svg";
import { ReactComponent as TabletSpec } from "@/assets/tablet-spec.svg";
import { ReactComponent as BilliardBall } from "@/assets/billiard-ball.svg";
import { ReactComponent as BilliardBallSpec } from "@/assets/billiard-ball-spec.svg";
import { ReactComponent as Warning } from "@/assets/warning.svg";
import { ReactComponent as WarningSpec } from "@/assets/warning-spec.svg";
import { ReactComponent as CuttingMat } from "@/assets/cutting-mat.svg";
import { ReactComponent as CuttingMatSpec } from "@/assets/cutting-mat-spec.svg";
import { ReactComponent as Receipt } from "@/assets/receipt.svg";
import { ReactComponent as ReceiptSpec } from "@/assets/receipt-spec.svg";
import { ReactComponent as Calculator } from "@/assets/calculator.svg";
import { ReactComponent as CalculatorSpec } from "@/assets/calculator-spec.svg";
import Links from "@/components/Links";
import "./Header.css";
type HeaderProps = {};
@@ -33,25 +33,21 @@ const handleScrollToIcons = () =>
.getElementById("toolbar")
?.scrollIntoView({ behavior: "smooth", block: "start" });
const Header: React.FC<HeaderProps> = () => {
const Header = (_: HeaderProps) => {
return (
<header>
<div className="header-contents">
<div className="illustrations-top">
<img src={markerPurple} id="marker-purple" alt="" />
<img src={paperclips} id="paperclips" alt="" />
<img src={paperclipsThree} id="paperclips-three" alt="" />
<img className="tablet" src={tabletSpec} alt="" />
<img className="tablet inspectable xray" src={tablet} alt="" />
<img className="billiard-ball" src={billiardBallSpec} alt="" />
<img
className="billiard-ball inspectable xray"
src={billiardBall}
alt=""
/>
<MarkerPurple id="marker-purple" />
<PaperClips id="paperclips" />
<PaperClipsThree id="paperclips-three" />
<TabletSpec className="tablet" />
<Tablet className="tablet inspectable xray" />
<BilliardBallSpec className="billiard-ball" />
<BilliardBall className="billiard-ball inspectable xray" />
<img className="warning" src={warningSpec} alt="" />
<img className="warning inspectable xray" src={warning} alt="" />
<WarningSpec className="warning" />
<Warning className="warning inspectable xray" />
</div>
<div className="intro">
<h2>
@@ -73,20 +69,12 @@ const Header: React.FC<HeaderProps> = () => {
<Links />
</div>
<div className="illustrations-bottom">
<img className="cutting-mat" src={cuttingMatSpec} alt="" />
<img
className="cutting-mat inspectable xray"
src={cuttingMat}
alt=""
/>
<img className="receipt" src={receiptSpec} alt="" />
<img className="receipt inspectable xray" src={receipt} alt="" />
<img className="calculator" src={calculatorSpec} alt="" />
<img
className="calculator inspectable xray"
src={calculator}
alt=""
/>
<CuttingMatSpec className="cutting-mat" />
<CuttingMat className="cutting-mat inspectable xray" />
<ReceiptSpec className="receipt" />
<Receipt className="receipt inspectable xray" />
<CalculatorSpec className="calculator" />
<Calculator className="calculator inspectable xray" />
</div>
</div>
</header>

1
src/components/Header/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Header";

17
src/components/IconGrid/DetailsPanel.tsx
View File

@@ -1,4 +1,4 @@
import React, { useRef, useEffect } from "react";
import React, { useRef, useEffect, CSSProperties } from "react";
import { useRecoilValue, useSetRecoilState } from "recoil";
import { useHotkeys } from "react-hotkeys-hook";
import { motion } from "framer-motion";
@@ -12,11 +12,12 @@ import {
iconSizeAtom,
iconColorAtom,
iconPreviewOpenAtom,
} from "../../state/atoms";
import useTransientState from "../../hooks/useTransientState";
} from "@/state/atoms";
import useTransientState from "@/hooks/useTransientState";
import { IconEntry, SnippetType } from "@/lib";
import { getCodeSnippets, supportsWeight } from "@/utils";
import TagCloud from "./TagCloud";
import { IconEntry, SnippetType } from "../../lib";
import { getCodeSnippets, supportsWeight } from "../../utils";
const panelVariants = {
open: {
@@ -58,7 +59,7 @@ const renderedSnippets = [
SnippetType.FLUTTER,
];
const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
const DetailsPanel = (props: InfoPanelProps) => {
const { index, spans, isDark, entry } = props;
const { name, Icon, categories, tags } = entry;
const weight = useRecoilValue(iconWeightAtom);
@@ -78,10 +79,10 @@ const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
[name]
);
const buttonBarStyle: React.CSSProperties = {
const buttonBarStyle: CSSProperties = {
color: isDark ? "white" : buttonColor,
};
const snippetButtonStyle: React.CSSProperties =
const snippetButtonStyle: CSSProperties =
weight === "duotone"
? { color: disabledColor, userSelect: "none" }
: { color: buttonColor };

13
src/components/IconGrid/IconGrid.tsx
View File

@@ -1,17 +1,18 @@
import React, { useRef, useEffect } from "react";
import { useRef, useEffect } from "react";
import { useRecoilValue } from "recoil";
import { motion, useAnimation } from "framer-motion";
import { IconContext } from "phosphor-react";
import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "@/state/atoms";
import {
filteredQueryResultsSelector,
isDarkThemeSelector,
} from "../../state/selectors";
import useGridSpans from "../../hooks/useGridSpans";
} from "@/state/selectors";
import useGridSpans from "@/hooks/useGridSpans";
import Notice from "@/components/Notice";
import IconGridItem from "./IconGridItem";
import TagCloud from "./TagCloud";
import Notice from "../Notice/Notice";
import "./IconGrid.css";
const defaultSearchTags = [
@@ -26,7 +27,7 @@ const defaultSearchTags = [
type IconGridProps = {};
const IconGrid: React.FC<IconGridProps> = () => {
const IconGrid = (_: IconGridProps) => {
const weight = useRecoilValue(iconWeightAtom);
const size = useRecoilValue(iconSizeAtom);
const color = useRecoilValue(iconColorAtom);

14
src/components/IconGrid/IconGridItem.tsx
View File

@@ -1,15 +1,11 @@
import React, {
useRef,
useLayoutEffect,
useEffect,
MutableRefObject,
} from "react";
import { useRef, useLayoutEffect, useEffect, MutableRefObject } from "react";
import { useRecoilState } from "recoil";
import { motion, AnimatePresence } from "framer-motion";
import { iconPreviewOpenAtom } from "../../state/atoms";
import { IconEntry } from "@/lib";
import { iconPreviewOpenAtom } from "@/state/atoms";
import DetailsPanel from "./DetailsPanel";
import { IconEntry } from "../../lib";
interface IconGridItemProps {
index: number;
@@ -31,7 +27,7 @@ const itemVariants = {
}),
};
const IconGridItem: React.FC<IconGridItemProps> = (props) => {
const IconGridItem = (props: IconGridItemProps) => {
const { index, originOffset, entry } = props;
const { name, Icon } = entry;
const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);

6
src/components/IconGrid/TagCloud.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback } from "react";
import { useCallback } from "react";
import { useSetRecoilState } from "recoil";
import { searchQueryAtom } from "../../state/atoms";
import { searchQueryAtom } from "@/state/atoms";
import "./TagCloud.css";
interface TagCloudProps {
@@ -10,7 +10,7 @@ interface TagCloudProps {
isDark: boolean;
}
const TagCloud: React.FC<TagCloudProps> = ({ name, tags, isDark }) => {
const TagCloud = ({ name, tags, isDark }: TagCloudProps) => {
const setQuery = useSetRecoilState(searchQueryAtom);
const handleTagClick = useCallback(
(tag: string) => {

1
src/components/IconGrid/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./IconGrid";

5
src/components/Links/Links.tsx
View File

@@ -1,14 +1,13 @@
import React from "react";
import { OutboundLink } from "react-ga";
import { ArrowElbowDownRight } from "phosphor-react";
import { iconCount } from "../../lib/icons";
import { iconCount } from "@/lib/icons";
import "./Links.css";
interface LinksProps {}
const Links: React.FC<LinksProps> = () => {
const Links = (_: LinksProps) => {
return (
<div className="links">
<div>

1
src/components/Links/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Links";

15
src/components/Notice/Notice.tsx
View File

@@ -1,21 +1,18 @@
import React from "react";
import { ReactNode } from "react";
import { motion } from "framer-motion";
import { useRecoilValue } from "recoil";
import { isDarkThemeSelector } from "../../state/selectors";
import { searchQueryAtom } from "../../state/atoms";
import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react";
import { isDarkThemeSelector } from "@/state/selectors";
import { searchQueryAtom } from "@/state/atoms";
interface NoticeProps {
message?: string;
type?: "wait" | "help" | "warn" | "none";
children?: ReactNode;
}
const Notice: React.FC<NoticeProps> = ({
message,
type = "warn",
children,
}) => {
const Notice = ({ message, type = "warn", children }: NoticeProps) => {
const isDark = useRecoilValue(isDarkThemeSelector);
const query = useRecoilValue(searchQueryAtom);

1
src/components/Notice/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Notice";

14
src/components/SearchInput/SearchInput.tsx
View File

@@ -1,11 +1,17 @@
import React, { useState, useEffect, useRef, MutableRefObject } from "react";
import {
useState,
useEffect,
useRef,
MutableRefObject,
ReactNode,
} from "react";
import { useRecoilState } from "recoil";
import { useDebounce } from "react-use";
import { useHotkeys } from "react-hotkeys-hook";
import { Command, MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
import ReactGA from "react-ga";
import { searchQueryAtom } from "../../state/atoms";
import { searchQueryAtom } from "@/state/atoms";
import "./SearchInput.css";
const apple = /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC/i;
@@ -16,7 +22,7 @@ const isMobile = mobile.test(window.navigator.userAgent);
type SearchInputProps = {};
const SearchInput: React.FC<SearchInputProps> = () => {
const SearchInput = (_: SearchInputProps) => {
const [value, setValue] = useState<string>("");
const [query, setQuery] = useRecoilState(searchQueryAtom);
const inputRef =
@@ -94,7 +100,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
);
};
const Keys: React.FC<{}> = ({ children }) => (
const Keys = ({ children }: { children?: ReactNode }) => (
<div className="keys">{children}</div>
);

1
src/components/SearchInput/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./SearchInput";

15
src/components/SettingsActions/SettingsActions.tsx
View File

@@ -1,12 +1,13 @@
import React from "react";
import { ArrowCounterClockwise, CheckCircle, Link } from "phosphor-react";
import { useRecoilValue, useResetRecoilState } from "recoil";
import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
import "./SettingsActions.css";
import useTransientState from "../../hooks/useTransientState";
import { resetSettingsSelector } from "../../state/selectors";
import { ArrowCounterClockwise, CheckCircle, Link } from "phosphor-react";
const SettingsActions: React.FC = () => {
import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "@/state/atoms";
import useTransientState from "@/hooks/useTransientState";
import { resetSettingsSelector } from "@/state/selectors";
import "./SettingsActions.css";
const SettingsActions = () => {
const weight = useRecoilValue(iconWeightAtom);
const size = useRecoilValue(iconSizeAtom);
const color = useRecoilValue(iconColorAtom);

1
src/components/SettingsActions/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./SettingsActions";

4
src/components/SizeInput/SizeInput.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback } from "react";
import { useRecoilState } from "recoil";
import { iconSizeAtom } from "../../state/atoms";
import { iconSizeAtom } from "@/state/atoms";
import "./SizeInput.css";
type SizeInputProps = {};
@@ -14,7 +14,7 @@ const handleBlur = (event: React.UIEvent<HTMLInputElement>) => {
event.currentTarget.blur();
};
const SizeInput: React.FC<SizeInputProps> = () => {
const SizeInput = (_: SizeInputProps) => {
const [size, setSize] = useRecoilState(iconSizeAtom);
const handleSizeChange = useCallback(

1
src/components/SizeInput/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./SizeInput";

7
src/components/StyleInput/StyleInput.tsx
View File

@@ -1,10 +1,11 @@
import React, { useMemo } from "react";
import { useMemo } from "react";
import { useRecoilState } from "recoil";
import Select from "react-dropdown-select";
import { PencilLine } from "phosphor-react";
import { IconStyle } from "@phosphor-icons/core";
import { iconWeightAtom } from "../../state/atoms";
import { iconWeightAtom } from "@/state/atoms";
import "./StyleInput.css";
type WeightOption = { key: string; value: IconStyle; icon: JSX.Element };
@@ -44,7 +45,7 @@ const options: WeightOption[] = [
type StyleInputProps = {};
const StyleInput: React.FC<StyleInputProps> = () => {
const StyleInput = (_: StyleInputProps) => {
const [style, setStyle] = useRecoilState(iconWeightAtom);
const currentStyle = useMemo(

1
src/components/StyleInput/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./StyleInput";

10
src/components/Toolbar/Toolbar.tsx
View File

@@ -1,11 +1,11 @@
import React from "react";
import StyleInput from "@/components/StyleInput";
import SearchInput from "@/components/SearchInput";
import SizeInput from "@/components/SizeInput";
import ColorInput from "@/components/ColorInput";
import SettingsActions from "@/components/SettingsActions";
import "./Toolbar.css";
import StyleInput from "../StyleInput/StyleInput";
import SearchInput from "../SearchInput/SearchInput";
import SizeInput from "../SizeInput/SizeInput";
import ColorInput from "../ColorInput/ColorInput";
import SettingsActions from "../SettingsActions/SettingsActions";
type ToolbarProps = {};

1
src/components/Toolbar/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Toolbar";

22
src/index.tsx
View File

@@ -1,27 +1,23 @@
import React from "react";
import ReactDOM from "react-dom";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { RecoilRoot } from "recoil";
import * as serviceWorker from "./serviceWorker";
import App from "./components/App/App";
import App from "./components/App";
import ReactGA from "react-ga";
ReactGA.initialize("UA-179205759-1", { titleCase: false });
ReactGA.pageview(window.location.pathname);
ReactDOM.render(
<React.StrictMode>
const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
<StrictMode>
<RecoilRoot>
<App />
</RecoilRoot>
</React.StrictMode>,
document.getElementById("root")
</StrictMode>
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
console.log(`
%c sphorphosphor %co%cspho

4
src/lib/icons.ts
View File

@@ -4,9 +4,7 @@ import { icons as iconData } from "@phosphor-icons/core";
import { IconEntry } from ".";
export const icons: ReadonlyArray<IconEntry> = iconData.map((entry) => ({
name: entry.name,
categories: entry.categories,
tags: entry.tags,
...entry,
Icon: Icons[entry.pascal_name as keyof typeof Icons] as Icons.Icon,
}));

7
src/lib/index.ts
View File

@@ -1,10 +1,7 @@
import { Icon } from "phosphor-react";
import { IconCategory } from "@phosphor-icons/core";
import { IconEntry as CoreEntry } from "@phosphor-icons/core";
export interface IconEntry {
name: string;
categories: IconCategory[];
tags: string[];
export interface IconEntry extends CoreEntry {
Icon: Icon;
}

1
src/react-app-env.d.ts vendored
View File

@@ -1 +0,0 @@
/// <reference types="react-scripts" />

146
src/serviceWorker.ts
View File

@@ -1,146 +0,0 @@
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === "localhost" ||
// [::1] is the IPv6 localhost address.
window.location.hostname === "[::1]" ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
type Config = {
onSuccess?: (registration: ServiceWorkerRegistration) => void;
onUpdate?: (registration: ServiceWorkerRegistration) => void;
};
export function register(config?: Config) {
if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener("load", () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
"This web app is being served cache-first by a service " +
"worker. To learn more, visit https://bit.ly/CRA-PWA"
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl: string, config?: Config) {
navigator.serviceWorker
.register(swUrl)
.then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === "installed") {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
"New content is available and will be used when all " +
"tabs for this page are closed. See https://bit.ly/CRA-PWA."
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log("Content is cached for offline use.");
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch((error) => {
console.error("Error during service worker registration:", error);
});
}
function checkValidServiceWorker(swUrl: string, config?: Config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { "Service-Worker": "script" },
})
.then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get("content-type");
if (
response.status === 404 ||
(contentType != null && contentType.indexOf("javascript") === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
"No internet connection found. App is running in offline mode."
);
});
}
export function unregister() {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.ready
.then((registration) => {
registration.unregister();
})
.catch((error) => {
console.error(error.message);
});
}
}

5
src/setupTests.ts
View File

@@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom/extend-expect";

4
src/state/selectors.ts
View File

@@ -9,8 +9,8 @@ import {
iconSizeAtom,
iconColorAtom,
} from "./atoms";
import { IconEntry } from "../lib";
import { icons } from "../lib/icons";
import { IconEntry } from "@/lib";
import { icons } from "@/lib/icons";
const fuse = new Fuse(icons, {
keys: [{ name: "name", weight: 4 }, "tags", "categories"],

2
src/utils/index.ts
View File

@@ -1,6 +1,6 @@
import { IconStyle } from "@phosphor-icons/core";
import { SnippetType } from "../lib";
import { SnippetType } from "@/lib";
export function getCodeSnippets({
name,

1
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite-plugin-svgr/client" />