reduce bundle size (remove magika, jQuery, underscore, @mui)

cp-20 · Mar 24, 2024 · aae7be6 · aae7be6
1 parent 6213cb8
commit aae7be6
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 47 deletions.
diff --git a/workspaces/admin/src/lib/image/isSupportedImage.ts b/workspaces/admin/src/lib/image/isSupportedImage.ts
@@ -1,28 +1,5 @@
-import { fileTypeFromBuffer } from 'file-type';
-import { Magika } from 'magika';
-
-const SUPPORTED_MAGIKA_LABEL_LIST = ['bmp', 'jpeg', 'png', 'webp'];
 const SUPPORTED_MIME_TYPE_LIST = ['image/bmp', 'image/jpeg', 'image/png', 'image/webp', 'image/avif', 'image/jxl'];
 
-const magika = new Magika();
-
-const initMagikaPromise = magika.load({
-  configURL: '/assets/magika/config.json',
-  modelURL: '/assets/magika/model.json',
-});
-
 export async function isSupportedImage(image: File): Promise<boolean> {
-  await initMagikaPromise;
-  const prediction = await magika.identifyBytes(new Uint8Array(await image.arrayBuffer()));
-
-  if (SUPPORTED_MAGIKA_LABEL_LIST.includes(prediction.label)) {
-    return true;
-  }
-
-  const fileType = await fileTypeFromBuffer(await image.arrayBuffer());
-  if (SUPPORTED_MIME_TYPE_LIST.includes(fileType?.mime ?? '')) {
-    return true;
-  }
-
-  return false;
+  return SUPPORTED_MIME_TYPE_LIST.includes(image.type);
 }
diff --git a/workspaces/admin/src/pages/AuthorListPage/index.tsx b/workspaces/admin/src/pages/AuthorListPage/index.tsx
@@ -19,7 +19,6 @@ import {
 } from '@chakra-ui/react';
 import { useFormik } from 'formik';
 import { useId, useMemo, useState } from 'react';
-import _ from 'underscore';
 import { create } from 'zustand';
 
 import { useAuthorList } from '../../features/authors/hooks/useAuthorList';
@@ -184,7 +183,7 @@ export const AuthorListPage: React.FC = () => {
                 </Tr>
               </Thead>
               <Tbody>
-                {_.map(filteredAuthorList, (author) => (
+                {filteredAuthorList.map((author) => (
                   <Tr key={author.id}>
                     <Td textAlign="center" verticalAlign="middle">
                       <Button colorScheme="teal" onClick={() => modalState.openDetail(author.id)} variant="solid">

diff --git a/workspaces/admin/src/pages/BookListPage/index.tsx b/workspaces/admin/src/pages/BookListPage/index.tsx
@@ -19,7 +19,6 @@ import {
 } from '@chakra-ui/react';
 import { useFormik } from 'formik';
 import { useId, useMemo, useState } from 'react';
-import _ from 'underscore';
 import { create } from 'zustand';
 
 import { useBookList } from '../../features/books/hooks/useBookList';
@@ -216,7 +215,7 @@ export const BookListPage: React.FC = () => {
                 </Tr>
               </Thead>
               <Tbody>
-                {_.map(filteredBookList, (book) => (
+                {filteredBookList.map((book) => (
                   <Tr key={book.id}>
                     <Td textAlign="center" verticalAlign="middle">
                       <Button colorScheme="teal" onClick={() => modalState.openDetail(book.id)} variant="solid">

diff --git a/workspaces/app/src/features/icons/components/Icons.tsx b/workspaces/app/src/features/icons/components/Icons.tsx
@@ -0,0 +1,55 @@
+import type { ComponentProps, FC } from 'react';
+import styled from 'styled-components';
+
+const IconBase = styled.svg`
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.5rem;
+`;
+
+export const ArrowBack: FC<ComponentProps<'svg'>> = (props) => (
+  <IconBase aria-hidden="true" data-testid="ArrowBackIcon" focusable="false" viewBox="0 0 24 24" {...props}>
+    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"></path>
+  </IconBase>
+);
+
+export const Close: FC<ComponentProps<'svg'>> = (props) => (
+  <IconBase aria-hidden="true" data-testid="CoseIcon" focusable="false" viewBox="0 0 24 24" {...props}>
+    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
+  </IconBase>
+);
+
+export const Favorite: FC<ComponentProps<'svg'>> = (props) => (
+  <IconBase aria-hidden="true" data-testid="FavoriteIcon" focusable="false" viewBox="0 0 24 24" {...props}>
+    <path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"></path>
+  </IconBase>
+);
+
+export const FavoriteBorder: FC<ComponentProps<'svg'>> = (props) => (
+  <IconBase aria-hidden="true" data-testid="FavoriteBorderIcon" focusable="false" viewBox="0 0 24 24" {...props}>
+    <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3m-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05"></path>
+  </IconBase>
+);
+
+export const NavigateNext: FC<ComponentProps<'svg'>> = (props) => (
+  <IconBase aria-hidden="true" data-testid="NavigateNextIcon" focusable="false" viewBox="0 0 24 24" {...props}>
+    <path d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
+  </IconBase>
+);
+
+export const Search: FC<ComponentProps<'svg'>> = (props) => (
+  <IconBase aria-hidden="true" data-testid="SearchIcon" focusable="false" viewBox="0 0 24 24" {...props}>
+    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"></path>
+  </IconBase>
+);
diff --git a/workspaces/app/src/features/icons/components/SvgIcon.tsx b/workspaces/app/src/features/icons/components/SvgIcon.tsx
@@ -1,4 +1,4 @@
-import { ArrowBack, Close, Favorite, FavoriteBorder, NavigateNext, Search } from '@mui/icons-material';
+import { ArrowBack, Close, Favorite, FavoriteBorder, NavigateNext, Search } from './Icons';
 
 const Icons = {
   ArrowBack,

diff --git a/workspaces/app/src/foundation/atoms/DialogContentAtom.ts b/workspaces/app/src/foundation/atoms/DialogContentAtom.ts
@@ -1,5 +1,4 @@
 import { atom } from 'jotai';
-import $ from 'jquery';
 
 const StateAtom = atom<JSX.Element | null>(null);
 
@@ -11,9 +10,9 @@ export const DialogContentAtom = atom(
     const isOpen = content != null;
 
     if (isOpen) {
-      $('body').css('overflow', 'hidden');
+      document.body.style.overflow = 'hidden';
     } else {
-      $('body').css('overflow', 'scroll');
+      document.body.style.overflow = 'scroll';
     }
 
     set(StateAtom, content);

diff --git a/workspaces/app/src/foundation/components/Spacer.tsx b/workspaces/app/src/foundation/components/Spacer.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useBoolean, useMount } from 'react-use';
 import styled from 'styled-components';
 
 const _Spacer = styled.div<{ $height?: number; $width?: number }>`
@@ -15,11 +14,5 @@ type Props = {
 };
 
 export const Spacer: React.FC<Props> = ({ height, width }) => {
-  const [mounted, toggleMounted] = useBoolean(false);
-
-  useMount(() => {
-    toggleMounted();
-  });
-
-  return mounted ? <_Spacer $height={height} $width={width} /> : null;
+  return <_Spacer $height={height} $width={width} />;
 };
diff --git a/workspaces/client/src/admin.tsx b/workspaces/client/src/admin.tsx
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import ReactDOM from 'react-dom/client';
 
 import { AdminApp } from '@wsh-2024/admin/src/index';
@@ -9,8 +8,8 @@ const main = async () => {
   await registerServiceWorker();
   // await preloadImages();
 
-  $(document).ready(() => {
-    ReactDOM.createRoot($('#root').get(0)!).render(<AdminApp />);
+  document.addEventListener('DOMContentLoaded', () => {
+    ReactDOM.createRoot(document.getElementById('root')!).render(<AdminApp />);
   });
 };
 

diff --git a/workspaces/client/src/index.tsx b/workspaces/client/src/index.tsx
@@ -1,22 +1,20 @@
-import $ from 'jquery';
 import { Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { SWRConfig } from 'swr';
 
 import { ClientApp } from '@wsh-2024/app/src/index';
 
-import { preloadImages } from './utils/preloadImages';
 import { registerServiceWorker } from './utils/registerServiceWorker';
 
 const main = async () => {
   await registerServiceWorker();
 
   const fallback = JSON.parse(document.getElementById('inject-data')?.textContent ?? '{}');
 
-  $(document).ready(() => {
+  document.addEventListener('DOMContentLoaded', () => {
     ReactDOM.hydrateRoot(
-      $('#root').get(0)!,
+      document.getElementById('root')!,
       <Suspense fallback={<p>Loading</p>}>
         <SWRConfig value={{ fallback, revalidateOnFocus: false, revalidateOnReconnect: false }}>
           <BrowserRouter>