⚡ convert project to vite

packages/client-next/.babelrc

@@ -1,7 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-proposal-class-properties"
-  ]
-}

packages/client-next/.nvmrc

@@ -0,0 +1 @@
+v20.11.0

packages/client-next/gulpfile.js

@@ -1,34 +0,0 @@
-var gulp = require("gulp");
-var ts = require("gulp-typescript");
-const webpack = require("webpack-stream");
-const sass = require("gulp-sass")(require("sass"));
-
-gulp.task("css", function () {
-  return gulp
-    .src("src/style.scss")
-    .pipe(sass().on("error", sass.logError))
-    .pipe(gulp.dest("./public/css"));
-});
-
-gulp.task("js", function () {
-  return gulp
-    .src("src/**/*.tsx?")
-    .pipe(webpack(require("./webpack.config.js")))
-    .pipe(gulp.dest("public"));
-});
-
-gulp.task(
-  "watch",
-  gulp.series("js", "css", function () {
-    gulp.watch(
-      [
-        "src/**/*.ts",
-        "src/**/*.tsx",
-        "../lib/src/**/*.ts",
-        "../lib/src/**/*.tsx",
-      ],
-      gulp.series("js")
-    );
-    gulp.watch("src/**/*.scss", gulp.series("css"));
-  })
-);

packages/client-next/package.json

@@ -4,8 +4,12 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "vite build",
+    "dev": "vite serve",
+    "preview": "vite preview",
+    "lint": "eslint ."
   },
+  "type": "module",
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -16,8 +20,10 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@nextui-org/react": "^2.2.9",
     "@sc07-canvas/lib": "^1.0.0",
     "eventemitter3": "^5.0.1",
+    "framer-motion": "^11.0.5",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -26,30 +32,21 @@
     "socket.io-client": "^4.7.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
+    "@tsconfig/vite-react": "^3.0.0",
     "@types/lodash.throttle": "^4.1.9",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/socket.io-client": "^3.0.0",
-    "babel-loader": "^9.1.3",
-    "css-loader": "^6.9.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
     "eslint": "^8.56.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "gulp": "^4.0.2",
-    "gulp-cli": "^2.3.0",
-    "gulp-typescript": "^6.0.0-alpha.1",
-    "html-webpack-plugin": "^5.6.0",
+    "postcss": "^8.4.35",
     "sass": "^1.70.0",
-    "style-loader": "^3.3.4",
-    "ts-loader": "^9.5.1",
-    "webpack": "^5.90.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.1",
+    "vite-plugin-simple-html": "^0.1.2"
   }
 }

packages/client-next/postcss.config.js

@@ -0,0 +1,7 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/client-next/src/components/App.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Header } from "./Header";
 import { AppContext } from "../contexts/AppContext";
 import { CanvasWrapper } from "./CanvasWrapper";

packages/client-next/src/components/CanvasWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { createRef, useCallback, useContext, useEffect } from "react";
+import { createRef, useContext, useEffect } from "react";
 import { Canvas } from "../lib/canvas";
 import { useAppContext } from "../contexts/AppContext";
 import { PanZoomWrapper } from "@sc07-canvas/lib/src/renderer";

packages/client-next/src/components/Pallete.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useAppContext } from "../contexts/AppContext";
 import { Canvas } from "../lib/canvas";
 import { IPalleteContext } from "../types";

packages/client-next/src/contexts/AppContext.tsx

@@ -1,19 +1,12 @@
-import React, {
+import {
   PropsWithChildren,
   createContext,
   useContext,
   useEffect,
   useState,
 } from "react";
-import { Socket } from "socket.io-client";
-import {
-  ClientConfig,
-  IAppContext,
-  ICanvasPosition,
-  IPalleteContext,
-} from "../types";
+import { ClientConfig, IAppContext, ICanvasPosition } from "../types";
 import { AuthSession } from "@sc07-canvas/lib/src/net";
-import { number } from "prop-types";
 import Network from "../lib/network";
 
 const appContext = createContext<IAppContext>({} as any);

packages/client-next/src/index.html

@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>webpack-for-react</title>
+    <title>canvas</title>
 
-    <link rel="stylesheet" href="/css/style.css" />
+    <link rel="stylesheet" href="./style.scss" />
   </head>
 
   <body>
     <div id="root"></div>
 
-    <script src="bundle.js"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>

packages/client-next/src/index.tsx

@@ -1,7 +1,13 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
+import { NextUIProvider } from "@nextui-org/react";
 import App from "./components/App";
 
 const root = createRoot(document.getElementById("root")!);
-root.render(<App />);
+root.render(
+  <React.StrictMode>
+    <NextUIProvider>
+      <App />
+    </NextUIProvider>
+  </React.StrictMode>
+);

packages/client-next/src/lib/network.ts

@@ -18,9 +18,12 @@ type SentEventValue<K extends keyof INetworkEvents> = EventEmitter.ArgumentMap<
 >[Extract<K, keyof INetworkEvents>];
 
 class Network extends EventEmitter<INetworkEvents> {
-  socket: Socket<ServerToClientEvents, ClientToServerEvents> = io({
-    autoConnect: false,
-  });
+  socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
+    import.meta.env.VITE_API_HOST,
+    {
+      autoConnect: false,
+    }
+  );
   private online_count = 0;
   private sentEvents: {
     [key in keyof INetworkEvents]?: SentEventValue<key>;

packages/client-next/src/style.scss

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 * {
   box-sizing: border-box;
 }

packages/client-next/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_HOST: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

packages/client-next/tailwind.config.js

@@ -0,0 +1,16 @@
+const { nextui } = require("@nextui-org/react");
+
+/** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [nextui()],
+  darkMode: "class",
+};

packages/client-next/tsconfig.json

@@ -1,7 +1,3 @@
 {
-  "extends": "@tsconfig/recommended/tsconfig.json",
-  "compilerOptions": {
-    "sourceMap": true,
-    "jsx": "react",
-  },
+  "extends": "@tsconfig/vite-react/tsconfig.json",
 }

packages/client-next/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  root: "src",
+  envDir: "..",
+  build: {
+    outDir: "dist",
+  },
+  plugins: [
+    react({
+      include: "**/*.{jsx,tsx}",
+    }),
+  ],
+});

packages/client-next/webpack.config.js

@@ -1,27 +0,0 @@
-const webpack = require("webpack");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const path = require("path");
-
-const port = process.env.PORT || 3000;
-
-module.exports = {
-  mode: "development",
-  entry: "./src/index.tsx",
-  output: {
-    filename: "bundle.js",
-    path: path.resolve(__dirname, "public"),
-  },
-  devtool: "inline-source-map",
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: "ts-loader",
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  resolve: {
-    extensions: [".tsx", ".ts", ".js"],
-  },
-};

packages/server/src/index.ts

@@ -53,7 +53,11 @@ const io = new Server<
     canvas: (pixels: string[]) => void;
     online: (data: { count: number }) => void;
   }
->(server);
+>(server, {
+  cors: {
+    origin: "*",
+  },
+});
 
 var PALLETE: PalleteColor[] = [];
 const PIXEL_TIMEOUT_MS = 1000;