update deps, use eslint-config-reearth, refactor vite config

Author: rot1024

.eslintrc.js

@@ -0,0 +1,3 @@
+root: true
+extends:
+  - reearth

.eslintrc.yml

@@ -1,6 +1,7 @@
 {
   "name": "example",
   "version": "0.0.0",
+  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -9,15 +10,14 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-align": "link:..",
-    "react-beautiful-dnd": "^13.1.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.0.0",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.2",
-    "vite-plugin-react-svg": "^0.2.0"
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^2.2.0",
+    "typescript": "^4.8.4",
+    "vite": "^3.2.1"
   }
 }

example/package.json

@@ -1,11 +1,5 @@
 import { useState } from "react";
-import {
-  GridWrapper,
-  GridSection,
-  GridArea,
-  GridItem,
-  Alignment,
-} from "react-align";
+import { GridWrapper, GridSection, GridArea, GridItem, Alignment } from "react-align";
 
 type Item = {
   id: string;
@@ -41,8 +35,7 @@ const ItemComponent = (item: Item, i: number) => (
     index={i}
     key={item.id}
     extendable={item.extendable}
-    extended={item.extended}
-  >
+    extended={item.extended}>
     <div
       style={{
         fontSize: "24px",
@@ -51,8 +44,7 @@ const ItemComponent = (item: Item, i: number) => (
         background: "#ddd",
         padding: "10px",
         boxSizing: "border-box",
-      }}
-    >
+      }}>
       {item.id}
     </div>
   </GridItem>
@@ -74,14 +66,14 @@ function App() {
       editing={edit}
       onMove={(...args) => {
         console.log("move", ...args);
-        setItems((items) => {
-          const target = items.find((i) => i.id === args[0]);
+        setItems(items => {
+          const target = items.find(i => i.id === args[0]);
           if (!target) return items;
-          const sibilings = items.filter((i) => i.location === args[1]);
+          const sibilings = items.filter(i => i.location === args[1]);
           if (args[1] === args[3]) {
             sibilings.splice(
-              sibilings.findIndex((i) => i.id === args[0]),
-              1
+              sibilings.findIndex(i => i.id === args[0]),
+              1,
             );
           }
           sibilings.splice(args[2], 0, target);
@@ -94,23 +86,22 @@ function App() {
       }}
       onAlignChange={(...args) => {
         console.log("alignmentChange", ...args);
-        setAlignments((a) => ({
+        setAlignments(a => ({
           ...a,
           [args[0]]: args[1],
         }));
       }}
       onExtend={(...args) => {
         console.log("extend", ...args);
-        setItems((items) => {
-          const target = items.find((i) => i.id === args[0]);
+        setItems(items => {
+          const target = items.find(i => i.id === args[0]);
           if (!target) return items;
           target.extended = args[1];
           return [...items];
         });
-      }}
-    >
+      }}>
       <GridSection>
-        {["1", "2", "3"].map((l) => (
+        {["1", "2", "3"].map(l => (
           <GridArea
             id={l}
             key={l}
@@ -124,22 +115,19 @@ function App() {
               background: l === "2" ? "blue" : "red",
               border: `2px solid ${background}`,
             }}
-            iconColor={l === "2" ? "red" : "blue"}
-          >
+            iconColor={l === "2" ? "red" : "blue"}>
             {items
-              .filter((i) => i.location === l)
+              .filter(i => i.location === l)
               .sort((a, b) => a.index - b.index)
               .map(ItemComponent)}
           </GridArea>
         ))}
       </GridSection>
       <GridSection stretch>
-        {["4", "5", "6"].map((l) =>
+        {["4", "5", "6"].map(l =>
           l === "5" ? (
             <div key={l} style={{ flex: "auto" }}>
-              <button onClick={() => setEdit((e) => !e)}>
-                {edit ? "Finish" : "Start"} editing
-              </button>
+              <button onClick={() => setEdit(e => !e)}>{edit ? "Finish" : "Start"} editing</button>
             </div>
           ) : (
             <GridArea
@@ -148,18 +136,17 @@ function App() {
               align={alignments[l]}
               bottom={l === "6"}
               editorStyle={{ background: "red" }}
-              iconColor={"blue"}
-            >
+              iconColor={"blue"}>
               {items
-                .filter((i) => i.location === l)
+                .filter(i => i.location === l)
                 .sort((a, b) => a.index - b.index)
                 .map(ItemComponent)}
             </GridArea>
-          )
+          ),
         )}
       </GridSection>
       <GridSection>
-        {["7", "8", "9"].map((l) => (
+        {["7", "8", "9"].map(l => (
           <GridArea
             id={l}
             key={l}
@@ -168,10 +155,9 @@ function App() {
             vertical={l === "8"}
             stretch={l === "8"}
             editorStyle={{ background: l === "8" ? "blue" : "red" }}
-            iconColor={l === "8" ? "red" : "blue"}
-          >
+            iconColor={l === "8" ? "red" : "blue"}>
             {items
-              .filter((i) => i.location === l)
+              .filter(i => i.location === l)
               .sort((a, b) => a.index - b.index)
               .map(ItemComponent)}
           </GridArea>

example/src/App.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+
 import "./index.css";
 import App from "./App";
 
@@ -9,5 +10,5 @@ const root = createRoot(container);
 root.render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
 );

example/src/main.tsx

@@ -1,10 +1,9 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import reactSvgPlugin from "vite-plugin-react-svg";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [reactSvgPlugin({ defaultExport: "component" }), react()],
+  plugins: [react()],
   server: {
     port: 3001,
     open: true,