raduwen · raduwen · Aug 1, 2021 · Aug 1, 2021
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 node_modules
 .cache
-.next
 *.log
-
-.env.local
+dist
+dist-ssr
+*.local
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -7,14 +7,13 @@
     "node": "14.x"
   },
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
     "firebase:emulator:start": "firebase emulators:start"
   },
   "dependencies": {
     "firebase": "^8.6.2",
-    "next": "^10.2.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -23,7 +22,10 @@
     "@types/node": "^14.17.1",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
+    "@vitejs/plugin-react-refresh": "^1.3.1",
     "firebase-tools": "^9.12.0",
-    "typescript": "^4.1.5"
+    "typescript": "^4.3.2",
+    "vite": "^2.4.4",
+    "vite-tsconfig-paths": "^3.3.13"
   }
 }
diff --git a/components/TextWidget/index.tsx → src/components/TextWidget/index.tsx b/components/TextWidget/index.tsx → src/components/TextWidget/index.tsx
@@ -1,4 +1,4 @@
-import { VFC, CSSProperties } from 'react';
+import React, { VFC, CSSProperties } from 'react';
 
 type Position = {
   top?: number;    // px

diff --git a/components/TimeWidget/index.tsx → src/components/TimeWidget/index.tsx b/components/TimeWidget/index.tsx → src/components/TimeWidget/index.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react'
+import React, { CSSProperties } from 'react';
 
 interface TimeWidgetProps {
   size: number;

diff --git a/styles/global.css → src/global.css b/styles/global.css → src/global.css
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import '@/global.css';
+import { TextWidget } from '@/components/TextWidget';
+import { TimeWidget } from '@/components/TimeWidget';
+
+const Widgets = {
+  'text': TextWidget,
+  'time': TimeWidget,
+};
+
+const App = () => {
+  const text = `オレオレOBSウィジェットの整理`;
+
+  const widgets = [
+    { name: 'text', props: { text: text } },
+    { name: 'time', props: { size: 30 } },
+  ];
+
+  return (
+    <div>
+      {widgets.map((widget) => {
+        const Widget = Widgets[widget.name];
+        return <Widget {...widget.props} />
+      })}
+    </div>
+  );
+};
+
+render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.json b/tsconfig.json
@@ -19,11 +19,10 @@
     "jsx": "preserve",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": [
-    "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx"
   ],

diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import reactRefresh from '@vitejs/plugin-react-refresh';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [tsconfigPaths(), reactRefresh()]
+});