From 302f73b383fbf6c6e13c868c616f38b6515c052f Mon Sep 17 00:00:00 2001
From: Noy <59097122+noyyyy@users.noreply.github.com>
Date: Sat, 13 Apr 2024 21:51:39 +0800
Subject: [PATCH] refactor: use react instead
---
packages/client/.eslintrc.cjs | 18 +
packages/client/README.md | 61 +-
packages/client/index.html | 6 +-
packages/client/package.json | 35 +-
packages/client/src/App.svelte | 47 -
packages/client/src/App.tsx | 12 +
packages/client/src/Web3Provider.tsx | 49 +
packages/client/src/app.css | 79 -
packages/client/src/assets/react.svg | 1 +
packages/client/src/assets/svelte.svg | 1 -
packages/client/src/index.css | 76 +
packages/client/src/lib/Counter.svelte | 10 -
packages/client/src/main.ts | 8 -
packages/client/src/main.tsx | 10 +
packages/client/src/vite-env.d.ts | 1 -
packages/client/svelte.config.js | 7 -
packages/client/tailwind.config.js | 77 +
packages/client/tsconfig.json | 30 +-
packages/client/tsconfig.node.json | 1 +
packages/client/vite.config.ts | 14 +-
pnpm-lock.yaml | 9966 ++++++++++++++++++++----
21 files changed, 8786 insertions(+), 1723 deletions(-)
create mode 100644 packages/client/.eslintrc.cjs
delete mode 100644 packages/client/src/App.svelte
create mode 100644 packages/client/src/App.tsx
create mode 100644 packages/client/src/Web3Provider.tsx
delete mode 100644 packages/client/src/app.css
create mode 100644 packages/client/src/assets/react.svg
delete mode 100644 packages/client/src/assets/svelte.svg
create mode 100644 packages/client/src/index.css
delete mode 100644 packages/client/src/lib/Counter.svelte
delete mode 100644 packages/client/src/main.ts
create mode 100644 packages/client/src/main.tsx
delete mode 100644 packages/client/svelte.config.js
create mode 100644 packages/client/tailwind.config.js
diff --git a/packages/client/.eslintrc.cjs b/packages/client/.eslintrc.cjs
new file mode 100644
index 0000000..d6c9537
--- /dev/null
+++ b/packages/client/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+ root: true,
+ env: { browser: true, es2020: true },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:react-hooks/recommended',
+ ],
+ ignorePatterns: ['dist', '.eslintrc.cjs'],
+ parser: '@typescript-eslint/parser',
+ plugins: ['react-refresh'],
+ rules: {
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ },
+}
diff --git a/packages/client/README.md b/packages/client/README.md
index e6cd94f..0d6babe 100644
--- a/packages/client/README.md
+++ b/packages/client/README.md
@@ -1,47 +1,30 @@
-# Svelte + TS + Vite
+# React + TypeScript + Vite
-This template should help get you started developing with Svelte and TypeScript in Vite.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-## Recommended IDE Setup
+Currently, two official plugins are available:
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-## Need an official Svelte framework?
+## Expanding the ESLint configuration
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-## Technical considerations
+- Configure the top-level `parserOptions` property like this:
-**Why use this over SvelteKit?**
-
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
-
-This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
-
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
-
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
-
-Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
-
-**Why include `.vscode/extensions.json`?**
-
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
-
-**Why enable `allowJs` in the TS template?**
-
-While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
-
-**Why is HMR not preserving my local component state?**
-
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
-
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
-
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
+```js
+export default {
+ // other rules...
+ parserOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ project: ['./tsconfig.json', './tsconfig.node.json'],
+ tsconfigRootDir: __dirname,
+ },
+}
```
+
+- 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
diff --git a/packages/client/index.html b/packages/client/index.html
index b6c5f0a..e4b78ea 100644
--- a/packages/client/index.html
+++ b/packages/client/index.html
@@ -4,10 +4,10 @@
- Vite + Svelte + TS
+ Vite + React + TS
-
-
+
+