docs: improve vite setups and add a webpack setup to examples

dprint.json

@@ -14,13 +14,12 @@
   },
   "markdown": {},
   "excludes": [
-    "**/node_modules",
+    "**/.next",
     "**/*-lock.json",
     "**/*-lock.yaml",
-    "**/test/fixtures",
     "**/dist",
-    "bun.lockb",
-    "**/.next",
+    "**/node_modules",
+    "**/test/fixtures",
     "packages/**/docs"
   ],
   "plugins": [

examples/flat-config-react-dom-ts/package.json → examples/vite-react-dom-ts/package.json

@@ -1,5 +1,6 @@
 {
-  "name": "flat-config-react-dom-ts",
+  "name": "vite-react-dom-ts",
+  "version": "0.0.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -23,7 +24,7 @@
     "eslint": "^9.9.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.11",
-    "typescript": "^5.7.0-dev.20240901",
+    "typescript": "^5.7.0-dev.20240902",
     "typescript-eslint": "^8.3.0",
     "vite": "^5.4.2"
   }

examples/flat-config-react-dom-ts/src/main.ts → examples/vite-react-dom-ts/src/main.ts

@@ -2,6 +2,6 @@ import "./index.css";
 
 import ReactDOM from "react-dom/client";
 
-import { root } from "./root.tsx";
+import { root } from "./root";
 
 ReactDOM.createRoot(document.querySelector("#root")!).render(root);

examples/flat-config-react-dom-ts/src/root.tsx → examples/vite-react-dom-ts/src/root.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import App from "./App.tsx";
+import App from "./App";
 
 export const root = (
   <React.StrictMode>

examples/flat-config-react-dom/vite.config.ts → examples/vite-react-dom-ts/vite.config.ts

@@ -3,5 +3,7 @@ import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+  ],
 });

examples/flat-config-react-dom/package.json → examples/vite-react-dom/package.json

@@ -1,5 +1,6 @@
 {
-  "name": "flat-config-react-dom",
+  "name": "vite-react-dom",
+  "version": "0.0.0",
   "private": true,
   "type": "module",
   "scripts": {

examples/vite-react-dom/src/index.css

@@ -0,0 +1,88 @@
+:root {
+  font-family: ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}

examples/flat-config-react-dom/src/main.js → examples/vite-react-dom/src/main.js

@@ -2,6 +2,6 @@ import "./index.css";
 
 import ReactDOM from "react-dom/client";
 
-import { root } from "./root.jsx";
+import { root } from "./root";
 
 ReactDOM.createRoot(document.querySelector("#root")).render(root);

examples/flat-config-react-dom/src/root.jsx → examples/vite-react-dom/src/root.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import App from "./App.jsx";
+import App from "./App";
 
 export const root = (
   <React.StrictMode>

examples/flat-config-react-dom-ts/vite.config.ts → examples/vite-react-dom/vite.config.ts

@@ -3,5 +3,7 @@ import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+  ],
 });

examples/webpack-react-dom-ts/.gitignore

@@ -0,0 +1,22 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/webpack-react-dom-ts/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint"
+  ]
+}

examples/webpack-react-dom-ts/dprint.json

@@ -0,0 +1,26 @@
+{
+  "typescript": {
+  },
+  "json": {
+  },
+  "markdown": {
+  },
+  "toml": {
+  },
+  "markup": {
+  },
+  "yaml": {
+  },
+  "excludes": [
+    "**/node_modules",
+    "**/*-lock.json"
+  ],
+  "plugins": [
+    "https://plugins.dprint.dev/typescript-0.91.7.wasm",
+    "https://plugins.dprint.dev/json-0.19.3.wasm",
+    "https://plugins.dprint.dev/markdown-0.17.8.wasm",
+    "https://plugins.dprint.dev/toml-0.6.2.wasm",
+    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.12.0.wasm",
+    "https://plugins.dprint.dev/g-plane/pretty_yaml-v0.5.0.wasm"
+  ]
+}

examples/webpack-react-dom-ts/eslint.config.d.ts

@@ -0,0 +1,3 @@
+declare module "@eslint/js";
+declare module "eslint-plugin-react-hooks";
+declare module "eslint-plugin-react-refresh";

examples/webpack-react-dom-ts/eslint.config.js

@@ -0,0 +1,69 @@
+// @ts-check
+
+import react from "@eslint-react/eslint-plugin";
+import js from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default [
+  {
+    ignores: [
+      "node_modules",
+      "dist",
+      "eslint.config.js",
+      "eslint.config.d.ts",
+    ],
+  },
+  // JavaScript rules
+  js.configs.recommended,
+  // TypeScript rules
+  ...tseslint.configs.recommendedTypeChecked,
+  // TypeScript languageOptions
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  // React rules
+  {
+    files: ["src/**/*.{ts,tsx}"],
+    ...react.configs["recommended-type-checked"],
+  },
+  // React Hooks rules
+  {
+    files: ["src/**/*.{ts,tsx}"],
+    plugins: {
+      "react-hooks": reactHooks,
+    },
+    rules: reactHooks.configs.recommended.rules,
+  },
+  {
+    files: ["src/**/*.tsx"],
+    plugins: {
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      "react-refresh/only-export-components": "warn",
+    },
+  },
+  // TypeScript languageOptions for config files
+  {
+    files: ["*.config.{js,cjs,mjs,ts,cts,mts}", "*.d.ts"],
+    languageOptions: {
+      parserOptions: {
+        project: "./tsconfig.node.json",
+        projectService: false,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  // Disable type checking for JavaScript files
+  {
+    files: ["*.js"],
+    ...tseslint.configs.disableTypeChecked,
+  },
+];