style: get rid of non necessary async

.eslintrc.yml

@@ -27,6 +27,7 @@ rules:
   '@typescript-eslint/explicit-function-return-type': 'off'
   '@typescript-eslint/no-floating-promises': 'off'
   unicorn/filename-case: ['error', { 'case': 'kebabCase' }]
+  'require-await': 'error'
 settings:
   'import/resolver':
     alias:

package.json

@@ -41,11 +41,12 @@
     "@storybook/react-vite": "^8.0.10",
     "@storybook/testing-library": "^0.2.2",
     "@tailwindcss/typography": "^0.5.7",
-    "@types/react": "^18.0.24",
-    "@types/react-dom": "^18.0.8",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
+    "@vanilla-extract/vite-plugin": "^4.0.15",
     "@vitejs/plugin-react-swc": "~3.7.0",
     "autoprefixer": "^10.4.13",
     "browserslist": "~4.22.1",
@@ -79,11 +80,12 @@
   },
   "dependencies": {
     "@growthbook/growthbook-react": "^0.20.0",
+    "@vanilla-extract/css": "^1.15.5",
     "daisyui": "^3.9.4",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^6.15.0",
     "theme-change": "^2.5.0",
     "uuid": "^9.0.0"
@@ -93,7 +95,7 @@
   ],
   "engines": {
     "node": ">=20.9",
-    "pnpm": ">=8.10"
+    "pnpm": ">=9.8"
   },
   "msw": {
     "workerDirectory": "public"
@@ -103,5 +105,5 @@
       "plugin:storybook/recommended"
     ]
   },
-  "packageManager": "pnpm@9.6.0"
+  "packageManager": "pnpm@9.8.0"
 }

src/components/App.tsx

@@ -30,7 +30,7 @@ function App() {
         import.meta.env.VITE_GROWTH_BOOK_KEY
       }`,
     )
-      .then(async (res) => res.json())
+      .then((res) => res.json())
       .then((json) => {
         growthbook.setFeatures(json.features);
       });

src/components/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
 import { useMatches } from 'react-router-dom';
 
-import classes from './breadcrumbs.module.css';
+import { breadcrumbs, crumb as StCrumb } from './breadcrumbs.css';
 
 function Breadcrumbs() {
   const matches = useMatches();
@@ -13,10 +13,10 @@ function Breadcrumbs() {
 
   return (
     <div className="container mx-auto px-4">
-      <ol className={classes.breadcrumbs}>
+      <ol className={breadcrumbs}>
         {crumbs.map((crumb, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <li className={classes.crumb} key={index}>
+          <li className={StCrumb} key={index}>
             {crumb}
           </li>
         ))}

src/components/app.tsx

@@ -30,7 +30,7 @@ function App() {
         import.meta.env.VITE_GROWTH_BOOK_KEY
       }`,
     )
-      .then(async (res) => res.json())
+      .then((res) => res.json())
       .then((json) => {
         growthbook.setFeatures(json.features);
       });

src/components/breadcrumbs.css.ts

@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+
+export const breadcrumbs = style({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '0.4rem',
+});
+
+export const crumb = style({
+  selectors: {
+    '&:last-child::after': {
+      content: '',
+    },
+    '&::after': {
+      content: '>',
+      marginLeft: '0.4rem',
+    },
+  },
+  // &::after {
+  //   content: '>';
+  //   margin-left: 0.4rem;
+  // }
+
+  // &:last-child {
+  //   &::after {
+  //     content: '';
+  //   }
+  // }
+});

src/components/breadcrumbs.tsx

@@ -1,6 +1,6 @@
 import { useMatches } from 'react-router-dom';
 
-import classes from './breadcrumbs.module.css';
+import { breadcrumbs, crumb as StCrumb } from './breadcrumbs.css';
 
 function Breadcrumbs() {
   const matches = useMatches();
@@ -13,10 +13,10 @@ function Breadcrumbs() {
 
   return (
     <div className="container mx-auto px-4">
-      <ol className={classes.breadcrumbs}>
+      <ol className={breadcrumbs}>
         {crumbs.map((crumb, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <li className={classes.crumb} key={index}>
+          <li className={StCrumb} key={index}>
             {crumb}
           </li>
         ))}

src/index.tsx

@@ -4,14 +4,14 @@ import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom';
 
 import './index.css';
 
-const App = lazy(async () => import('~/components/app'));
-const Home = lazy(async () => import('~/pages/index'));
-const NoMatch = lazy(async () => import('~/pages/[all]'));
+const App = lazy(() => import('~/components/app'));
+const Home = lazy(() => import('~/pages/index'));
+const NoMatch = lazy(() => import('~/pages/[all]'));
 
-const NewPost = lazy(async () => import('~/pages/posts/new'));
-const BlogPost = lazy(async () => import('~/pages/posts/[postId]'));
-const EditPost = lazy(async () => import('~/pages/posts/[postId]/edit'));
-const UserInfo = lazy(async () => import('~/pages/users/[user-name]'));
+const NewPost = lazy(() => import('~/pages/posts/new'));
+const BlogPost = lazy(() => import('~/pages/posts/[postId]'));
+const EditPost = lazy(() => import('~/pages/posts/[postId]/edit'));
+const UserInfo = lazy(() => import('~/pages/users/[user-name]'));
 
 const root = createRoot(document.getElementById('app')!);
 

src/mocks/handlers.ts

@@ -3,7 +3,7 @@ import { rest } from 'msw';
 import postsJson from './posts.json';
 
 export const handlers = [
-  rest.get('/posts', async (req, res, ctx) =>
+  rest.get('/posts', (req, res, ctx) =>
     res(ctx.status(200), ctx.json(postsJson)),
   ),
 ];

src/pages/index.tsx

@@ -14,7 +14,7 @@ function handleDeleteStory(id: string) {
 }
 
 export function PostList() {
-  const posts = useLiveQuery(async () =>
+  const posts = useLiveQuery(() =>
     db.posts
       // .where('text')
       // .anyOf(['The'])

src/pages/posts/[postId]/edit.tsx

@@ -152,7 +152,7 @@ export function EditPost({ post }: IBlogPostProps) {
 
 function EditPostWrapper() {
   const { postId } = useParams();
-  const posts = useLiveQuery(async () =>
+  const posts = useLiveQuery(() =>
     db.posts.filter(({ id }) => id === Number(postId)).toArray(),
   );
 

src/pages/posts/[postId]/index.tsx

@@ -32,7 +32,7 @@ function Post({ heading, text }: IBlogPost) {
 
 function BlogPost() {
   const { postId } = useParams();
-  const postArr = useLiveQuery(async () =>
+  const postArr = useLiveQuery(() =>
     db.posts.filter(({ id }) => id === Number(postId)).toArray(),
   );
 

src/pages/users/[user-name].tsx

@@ -18,7 +18,7 @@ function Info({ name }: IUser) {
 
 function UserInfo() {
   const { userName } = useParams();
-  const authorArr = useLiveQuery(async () =>
+  const authorArr = useLiveQuery(() =>
     db.authors.filter(({ username }) => username === userName).toArray(),
   );
 

src/services/get-stories.ts

@@ -1,6 +1,6 @@
-export const getStories = async (url: string) =>
+export const getStories = (url: string) =>
   fetch(url)
-    .then(async (response) => response.json())
+    .then((response) => response.json())
     .then((data) => data.result);
 
 export default getStories;

vite.config.ts

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import { VitePWA } from 'vite-plugin-pwa';
 // import browserslist from 'browserslist';
 // import { browserslistToTargets } from 'lightningcss';
@@ -16,7 +17,7 @@ export default defineConfig({
     emptyOutDir: true,
     cssMinify: 'lightningcss',
   },
-  plugins: [react(), VitePWA({})],
+  plugins: [react(), VitePWA({}), vanillaExtractPlugin()],
   define: {
     APP_VERSION: JSON.stringify(process.env.npm_package_version),
   },