chore: use vite instead of nextjs in example (#88)

* nextjs -> vite * vite config
seokju-na · Jan 18, 2025 · c33cd34 · c33cd34
1 parent fb51506
commit c33cd34
Show file tree

Hide file tree

Showing 13 changed files with 724 additions and 320 deletions.
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <title>react-thermal-printer example</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
+</body>
+</html>
diff --git a/example/next-env.d.ts b/example/next-env.d.ts
diff --git a/example/next.config.js b/example/next.config.js
diff --git a/example/package.json b/example/package.json
@@ -2,19 +2,19 @@
   "name": "react-thermal-printer-exmaple",
   "private": true,
   "scripts": {
-    "dev": "next dev"
+    "dev": "vite dev"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.56.2",
-    "next": "14.2.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-thermal-printer": "workspace:^",
-    "typescript": "5.6.2"
+    "react-thermal-printer": "workspace:^"
   },
   "devDependencies": {
     "@types/node": "^22",
     "@types/react": "^18",
-    "@types/react-dom": "^18"
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "typescript": "5.6.2",
+    "vite": "^6.0.7"
   }
 }
diff --git a/example/pages/_app.tsx b/example/pages/_app.tsx
diff --git a/example/pages/index.tsx b/example/pages/index.tsx
diff --git a/example/src/IndexPage.tsx → example/src/App.tsx b/example/src/IndexPage.tsx → example/src/App.tsx
@@ -1,8 +1,7 @@
-import { useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import { Br, Cut, Line, Printer, Row, Text, render } from 'react-thermal-printer';
 
-export function IndexPage() {
+export function App() {
   const receipt = (
     <Printer type="epson" width={42} characterSet="korea" debug={true}>
       <Text size={{ width: 2, height: 2 }}>9,500원</Text>
@@ -42,31 +41,28 @@ export function IndexPage() {
   );
 
   const [port, setPort] = useState<SerialPort>();
-  const { mutateAsync: print, isPending: isPrinting } = useMutation({
-    mutationFn: async () => {
-      let _port = port;
-      if (_port == null) {
-        _port = await navigator.serial.requestPort();
-        await _port.open({ baudRate: 9600 });
-        setPort(_port);
-      }
+  const print = async () => {
+    let _port = port;
+    if (_port == null) {
+      _port = await navigator.serial.requestPort();
+      await _port.open({ baudRate: 9600 });
+      setPort(_port);
+    }
 
-      const writer = _port.writable?.getWriter();
-      if (writer != null) {
-        const data = await render(receipt);
-
-        await writer.write(data);
-        writer.releaseLock();
-      }
-    },
-  });
+    const writer = _port.writable?.getWriter();
+    if (writer != null) {
+      const data = await render(receipt);
+      await writer.write(data);
+      writer.releaseLock();
+    }
+  };
 
   return (
     <main>
       <div>{receipt}</div>
       <div style={{ marginTop: 24 }}>
-        <button type="button" disabled={isPrinting} onClick={() => print()}>
-          {isPrinting ? '프린트 중...' : '프린트'}
+        <button type="button" onClick={print}>
+          Print
         </button>
       </div>
     </main>

diff --git a/example/src/main.tsx b/example/src/main.tsx
@@ -0,0 +1,5 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
diff --git a/example/src/queryClient.ts b/example/src/queryClient.ts
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -1,12 +1,7 @@
 {
   "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "incremental": true,
-    "isolatedModules": true,
-    "jsx": "preserve"
-  },
   "include": [
-    "next-env.d.ts",
+    "vite-env.d.ts",
     "**/*.ts",
     "**/*.tsx"
   ],

diff --git a/example/vite-env.d.ts b/example/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/example/vite.config.mts b/example/vite.config.mts
@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react-swc';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [react() as any],
+});