ライブラリバージョンアップデート

visionary-japan · Apr 29, 2024 · 4dd41eb · 4dd41eb
1 parent c745ab5
commit 4dd41eb
Show file tree

Hide file tree

Showing 16 changed files with 777 additions and 1,174 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -3,9 +3,11 @@ module.exports = {
     env: { browser: true, es2020: true },
     extends: [
         'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/strict-type-checked',
+        'plugin:@typescript-eslint/stylistic-type-checked',
         'plugin:react-hooks/recommended',
         'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
     ],
     ignorePatterns: ['dist', '.eslintrc.cjs'],
     parser: '@typescript-eslint/parser',

diff --git a/README.md b/README.md
@@ -35,10 +35,6 @@ export default {
 }
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
-
 ---
 
 # 環境構築
@@ -49,19 +45,21 @@ export default {
 
 ### 拡張機能
 
-#### 必須
-
 `.vscode\extensions.json`
 
 - JavaScript and TypeScript Nightly
 - Biome
 
 ## 起動
 
+以下のコマンドでローカル起動できる。
+
 ```
 npm run dev
 ```
 
+以下のコマンドで `dist` ディレクトリにビルド内容が出力される。
+
 ```
 num run build
 ```

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,43 +10,43 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@stylexjs/stylex": "^0.5.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "vite-plugin-stylex": "^0.5.1"
+        "@stylexjs/stylex": "^0.6.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "vite-plugin-stylex": "^0.8.3"
     },
     "devDependencies": {
-        "@biomejs/biome": "^1.6.0",
+        "@biomejs/biome": "^1.7.1",
         "@types/lodash": "^4.17.0",
-        "@types/node": "^20.12.2",
-        "@types/react": "^18.2.37",
+        "@types/node": "^20.12.7",
+        "@types/react": "^18.3.1",
         "@types/react-beautiful-dnd": "^13.1.8",
-        "@types/react-dom": "^18.2.15",
+        "@types/react-dom": "^18.3.0",
         "@types/react-scroll": "^1.8.10",
-        "@typescript-eslint/eslint-plugin": "^6.10.0",
-        "@typescript-eslint/parser": "^6.10.0",
-        "@vitejs/plugin-react-swc": "^3.5.0",
-        "clsx": "^2.0.0",
-        "eslint": "^8.55.0",
-        "eslint-plugin-react": "^7.33.2",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.4.4",
+        "@typescript-eslint/eslint-plugin": "^7.7.1",
+        "@typescript-eslint/parser": "^7.7.1",
+        "@vitejs/plugin-react-swc": "^3.6.0",
+        "clsx": "^2.1.1",
+        "eslint": "^9.1.1",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.6",
         "lodash": "^4.17.21",
-        "prettier": "^3.1.0",
+        "prettier": "^3.2.5",
         "react-beautiful-dnd": "^13.1.1",
-        "react-router-dom": "^6.20.1",
+        "react-router-dom": "^6.23.0",
         "react-scroll": "^1.9.0",
         "react-sortablejs": "^6.1.4",
-        "stylelint": "^15.11.0",
-        "stylelint-config-recess-order": "^4.4.0",
-        "stylelint-config-standard": "^34.0.0",
-        "stylelint-prettier": "^4.1.0",
-        "typescript": "^5.2.2",
-        "vite": "^5.0.0"
+        "stylelint": "^16.4.0",
+        "stylelint-config-recess-order": "^5.0.1",
+        "stylelint-config-standard": "^36.0.0",
+        "stylelint-prettier": "^5.0.0",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.10"
     },
     "overrides": {
         "vite-plugin-stylex": {
-            "@stylexjs/babel-plugin": "0.5.1"
+            "@stylexjs/babel-plugin": "0.6.1"
         }
     }
 }
diff --git a/src/components/button/ButtonVite.tsx b/src/components/button/ButtonVite.tsx
@@ -1,4 +1,4 @@
-import * as stylex from '@stylexjs/stylex';
+import stylex from '@stylexjs/stylex';
 import type { StyleXStyles } from '@stylexjs/stylex';
 import type { UserAuthoredStyles } from '@stylexjs/stylex/lib/StyleXTypes';
 import { type ButtonHTMLAttributes, forwardRef, memo } from 'react';

diff --git a/src/hooks/useEnv.tsx b/src/hooks/useEnv.tsx
diff --git a/src/main.tsx b/src/main.tsx
@@ -2,7 +2,6 @@ import React, { type FC } from 'react';
 import reactDom from 'react-dom/client';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { LinkIndex } from './components/link/LinkIndex.tsx';
-import { useEnv } from './hooks/useEnv.tsx';
 import './main.css';
 import { Button } from './pages/Button.tsx';
 import { Index } from './pages/Index.tsx';
@@ -11,23 +10,24 @@ import { Query } from './pages/Query.tsx';
 import { Beautiful } from './pages/dnd/Beautiful.tsx';
 import { HTML5 } from './pages/dnd/HTML5.tsx';
 import { Pointer } from './pages/dnd/Pointer.tsx';
-import { Sortablejs } from './pages/dnd/Sortablejs.tsx';
+// import { Sortablejs } from './pages/dnd/Sortablejs.tsx';
 import { Scroll } from './pages/scroll/Scroll.tsx';
 import { ScrollCss } from './pages/scroll/ScrollCss.tsx';
 import { ScrollDiv } from './pages/scroll/ScrollDiv.tsx';
+import { getEnv } from './utils/getEnv.ts';
 
-const App: FC = () => {
-    const { ROOT_NAME } = useEnv();
+const { rootName } = getEnv();
 
+const App: FC = () => {
     return (
-        <BrowserRouter basename={ROOT_NAME}>
+        <BrowserRouter basename={rootName}>
             <Routes>
                 <Route path='/' element={<Index />} />
                 <Route path='btn' element={<Button />} />
                 <Route path='dnd' element={<LinkIndex path='/dnd' />} />
                 <Route path='dnd/htmlapi' element={<HTML5 />} />
                 <Route path='dnd/pointer' element={<Pointer />} />
-                <Route path='dnd/sortablejs' element={<Sortablejs />} />
+                {/* <Route path='dnd/sortablejs' element={<Sortablejs />} /> */}
                 <Route path='dnd/beautiful' element={<Beautiful />} />
                 <Route path='query' element={<Query />} />
                 <Route path='public' element={<Public />} />

diff --git a/src/pages/Button.tsx b/src/pages/Button.tsx
@@ -33,7 +33,7 @@ const Component: FC = () => {
                 <DivCustom styleTypes={['margin']}>
                     <H3>aタグとして振る舞う</H3>
                     <DivCustom styleTypes={['margin']}>
-                        <ButtonZenn variant='primary' asChild>
+                        <ButtonZenn variant='primary' asChild={true}>
                             <a href='./btn'>Btn</a>
                         </ButtonZenn>
                     </DivCustom>
@@ -42,7 +42,7 @@ const Component: FC = () => {
                 <DivCustom styleTypes={['margin']}>
                     <H3>Linkとして振る舞う</H3>
                     <DivCustom styleTypes={['margin']}>
-                        <ButtonZenn variant='primary' asChild>
+                        <ButtonZenn variant='primary' asChild={true}>
                             <Link to=''>Btn</Link>
                         </ButtonZenn>
                     </DivCustom>
@@ -51,7 +51,7 @@ const Component: FC = () => {
                 <DivCustom styleTypes={['margin']}>
                     <H3>イチオシ挙動</H3>
                     <DivCustom styleTypes={['margin']}>
-                        <ButtonZenn disabled asChild>
+                        <ButtonZenn disabled={true} asChild={true}>
                             <a href='dnd'>Dnd</a>
                         </ButtonZenn>
                     </DivCustom>

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
@@ -7,7 +7,7 @@ import { DivCustom } from '../components/div/DivCustom';
 import { H1 } from '../components/heading/H1';
 import { Logo } from '../components/image/Logo';
 import { LinkIndex } from '../components/link/LinkIndex';
-import { useEnv } from '../hooks/useEnv';
+import { getEnv } from '../utils/getEnv';
 
 const styles = stylex.create({
     notProd: {
@@ -21,35 +21,35 @@ const styles = stylex.create({
     },
 });
 
-const Component: FC = () => {
-    const { ROOT_NAME, ANY_NUMBER, IS_PROD } = useEnv();
+const { rootName, anyNumber, isProd } = getEnv();
 
-    const [count, setCount] = useState<number>(ANY_NUMBER);
+const Component: FC = () => {
+    const [count, setCount] = useState<number>(anyNumber);
 
     const handleClickButton = () => {
         setCount(count => count + 1);
     };
 
     return (
         <div>
-            <H1>{ROOT_NAME.toUpperCase()}</H1>
+            <H1>{rootName.toUpperCase()}</H1>
             <DivCustom
                 styleTypes={['flexCenter']}
-                styles={!IS_PROD && styles.notProd}
+                styles={!isProd && styles.notProd}
             >
                 <Logo
                     url='https://vitejs.dev'
                     src={logoVite}
                     alt='Vite Logo'
                     styles={styles.vite}
-                    isSpin
+                    isSpin={true}
                 />
                 <Logo
                     url='https://react.dev'
                     src={logoReact}
                     alt='React Logo'
                     styles={styles.react}
-                    isSpin
+                    isSpin={true}
                 />
             </DivCustom>
             <DivCustom styleTypes={['center', 'margin2']}>

diff --git a/src/pages/Public.tsx b/src/pages/Public.tsx
@@ -1,21 +1,20 @@
 import { type FC, memo } from 'react';
 import type { JsonConfigs } from '../@types';
 import { H1 } from '../components/heading/H1';
+import { loadJson } from '../utils/loadJson';
 
 const configsWindow = window.configs;
-const configsJson: JsonConfigs = await fetch('./json/config.json').then(res =>
-    res.json(),
-);
+const configsJson: JsonConfigs = await loadJson('/json/config.json');
 
 const Component: FC = () => {
     return (
         <>
-            <H1 isLeft>JS: window.configs</H1>
+            <H1 isLeft={true}>JS: window.configs</H1>
             {configsWindow &&
                 Object.keys(configsWindow).map(key => (
                     <div key={key}>{configsWindow?.[key]?.keyString}</div>
                 ))}
-            <H1 isLeft>JSON: FETCH</H1>
+            <H1 isLeft={true}>JSON: FETCH</H1>
             {configsJson &&
                 Object.keys(configsJson).map(key =>
                     configsJson?.[key]?.map(val => (

diff --git a/src/pages/Query.tsx b/src/pages/Query.tsx
@@ -1,4 +1,4 @@
-import * as stylex from '@stylexjs/stylex';
+import stylex from '@stylexjs/stylex';
 import { type FC, memo, useCallback } from 'react';
 import { ButtonVite } from '../components/button/ButtonVite';
 import { H1 } from '../components/heading/H1';

diff --git a/src/pages/dnd/Sortablejs.tsx b/src/pages/dnd/Sortablejs.tsx
@@ -1,5 +1,5 @@
 import stylex from '@stylexjs/stylex';
-import React, { type FC, memo } from 'react';
+import { type FC, memo, useState } from 'react';
 import { ReactSortable } from 'react-sortablejs';
 import { H1 } from '../../components/heading/H1';
 
@@ -34,7 +34,7 @@ const styles = stylex.create({
 });
 
 const Component: FC = () => {
-    const [list, setList] = React.useState(draggableList);
+    const [list, setList] = useState(draggableList);
 
     return (
         <>

diff --git a/src/pages/scroll/Ultimate.tsx b/src/pages/scroll/Ultimate.tsx
@@ -123,8 +123,8 @@ const Component: FC = () => {
             {/*  */}
             <DivScrollable
                 ref={refScroll}
-                isSnap
-                isAnimate
+                isSnap={true}
+                isAnimate={true}
                 stylesParent={styles.parent}
                 stylesScroll={styles.scroll}
                 onSetChap={setChapIdx}

diff --git a/src/utils/getEnv.ts b/src/utils/getEnv.ts
@@ -0,0 +1,14 @@
+import { castStrToBoolean } from './castStrToBoolean';
+import { castStrToNum } from './castStrToNum';
+
+export function getEnv() {
+    // Viteの場合はimport.meta.env.を使用
+    const baseUrl: string = import.meta.env.BASE_URL;
+    const rootName: string = import.meta.env.VITE_ROOT_NAME || 'RN';
+    const anyNumber: number = castStrToNum(
+        import.meta.env.VITE_ANY_NUMBER || '123',
+    );
+    const isProd: boolean = castStrToBoolean(import.meta.env.VITE_IS_PROD);
+
+    return { baseUrl, rootName, anyNumber, isProd };
+}
diff --git a/src/utils/loadJson.ts b/src/utils/loadJson.ts
@@ -0,0 +1,8 @@
+import { getEnv } from './getEnv';
+
+const { baseUrl } = getEnv();
+
+export const loadJson = async (src: string) => {
+    const response = await fetch(baseUrl + src);
+    return await response.json();
+};
diff --git a/vite.config.ts b/vite.config.ts
@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import styleX from 'vite-plugin-stylex';
 
 // https://vitejs.dev/config/
+// biome-ignore lint/style/noDefaultExport: <explanation>
 export default defineConfig({
     plugins: [react(), styleX()],
     base: '/react_ui_comparison',
@@ -11,4 +12,5 @@ export default defineConfig({
             'top-level-await': true,
         },
     },
+    optimizeDeps: { exclude: ['react-sortablejs'] },
 });