docs(example): use regular vite for demo instead of ssr variant

nerdyman · Aug 26, 2023 · 3046bf9 · 3046bf9
1 parent 2cae367
commit 3046bf9
Show file tree

Hide file tree

Showing 16 changed files with 173 additions and 434 deletions.
diff --git a/docs/example/README.md b/docs/example/README.md
@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@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
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   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/docs/example/index.html b/docs/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/docs/example/package.json b/docs/example/package.json
@@ -1,28 +1,28 @@
 {
-  "name": "react-compare-slider-example",
+  "name": "poop",
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "packageManager": "pnpm@8.1.1",
   "scripts": {
-    "start": "pnpm run dev",
     "dev": "vite",
     "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
-    "react-compare-slider": "latest"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.4",
-    "modern-normalize": "^2.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vite-plugin-ssr": "^0.4.138"
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
   }
 }
diff --git a/docs/example/public/vite.svg b/docs/example/public/vite.svg
diff --git a/docs/example/renderer/PageLayout.tsx b/docs/example/renderer/PageLayout.tsx
diff --git a/docs/example/renderer/_default.page.client.tsx b/docs/example/renderer/_default.page.client.tsx
diff --git a/docs/example/renderer/_default.page.server.tsx b/docs/example/renderer/_default.page.server.tsx
diff --git a/docs/example/pages/index.page.tsx → docs/example/src/App.tsx b/docs/example/pages/index.page.tsx → docs/example/src/App.tsx
@@ -1,9 +1,6 @@
-import React from 'react';
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 
-import './index.css';
-
-function Page(): JSX.Element {
+export default function App() {
   return (
     <div style={{ width: '100%', height: '100%', flexGrow: 1 }}>
       <ReactCompareSlider
@@ -40,5 +37,3 @@ function Page(): JSX.Element {
     </div>
   );
 }
-
-export { Page };
diff --git a/docs/example/pages/index.css → docs/example/src/index.css b/docs/example/pages/index.css → docs/example/src/index.css
@@ -1,5 +1,3 @@
-@import 'modern-normalize/modern-normalize.css';
-
 :root {
   font-family: system-ui, sans-serif;
   line-height: 1.5;
@@ -18,9 +16,9 @@
 
 html,
 body,
-#root,
-#page-view {
+#root {
   display: flex;
+  flex-grow: 1;
   width: 100%;
   height: 100%;
   min-height: 100%;

diff --git a/docs/example/src/main.tsx b/docs/example/src/main.tsx
@@ -0,0 +1,12 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+import './index.css';
+
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/docs/example/src/vite-env.d.ts b/docs/example/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/docs/example/tsconfig.json b/docs/example/tsconfig.json
@@ -1,21 +1,25 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["pages", "renderer"],
+  "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/docs/example/tsconfig.node.json b/docs/example/tsconfig.node.json
@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "composite": true,
+    "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]

diff --git a/docs/example/vite.config.ts b/docs/example/vite.config.ts
@@ -1,9 +1,7 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
-import ssr from 'vite-plugin-ssr/plugin';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), ssr()],
-  optimizeDeps: { include: ['react/jsx-dev-runtime'] },
+  plugins: [react()],
 });
diff --git a/docs/storybook/package.json b/docs/storybook/package.json
@@ -14,7 +14,6 @@
     "@react-google-maps/api": "^2.19.2",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "@types/testing-library__jest-dom": "^5.14.9",
     "react": "^18.2.0",
     "react-compare-slider": "workspace:^2.2.0",
     "react-dom": "^18.2.0"