Refactor vite-react sample project to add test suite (#569)

* refact(vite-react): adds tests and more bb tasks

* fix(vite-react): trim package.json

* docs(vite-react): fix example name in readme

examples/vite-react/.gitignore

@@ -0,0 +1,8 @@
+.lsp/.cache
+.clj-kondo/.cache
+.nrepl-port
+node_modules
+bundle-visualization.html
+public/js
+public/test
+public/dist

examples/vite-react/README.md

@@ -1,6 +1,38 @@
-# Vite-react example
+# vite-react
 
-To set up a project with vite + react, go through the following steps:
+Small experiment with squint + vite(st) + react
+
+## Requirements
+- [npm](https://www.npmjs.com/)
+- [babashka](https://babashka.org/)
+
+## Usage
+To run this example, `run npm install` and then one of the following [babashka tasks](bb.edn):
+
+### Development server
+```bash
+bb dev
+```
+Will start squint watch and vite dev server, the files will be 
+generated on `public/js`.
+
+### Tests watch
+```bash
+bb test:watch
+```
+Will start squint watch on tests and vitest test watcher, the files will be 
+generated on `public/test`.
+
+### Build
+```bash
+bb build
+```
+Will generate an production ready build on `public/dist` and a bundle status 
+report in the root of the project `./bundle-visualization.html`.
+
+## From scratch
+
+To set up a project with vite + react from scratch, go through the following steps:
 
 - Create a `package.json` file
 
@@ -51,15 +83,4 @@ To set up a project with vite + react, go through the following steps:
   ```
 
 - Run `npx vite --config viteconfig.js public` to start a webserver and to hot-reload your React project!
-
-## Babashka tasks
-
-To run all of the above using one command, run `bb dev`. See [bb.edn](bb.edn).
-
-## Production
-
-To build your production website:
-
-```
-$ npx vite --config viteconfig.js build public
-```
+- Run `npx vite --config viteconfig.js build public` to build your production website.

examples/vite-react/bb.edn

@@ -1,5 +1,15 @@
 {:tasks
  {dev:squint (shell "npx squint watch")
   dev:vite (shell "npx vite --config=viteconfig.js public")
-  -dev {:depends [dev:vite dev:squint]}
-  dev (run '-dev {:parallel true})}}
+  -dev {:depends [dev:squint dev:vite]}
+  dev (run '-dev {:parallel true})
+
+  test:watch:squint (shell "npx squint watch --paths src test --output-dir public/test")
+  test:watch:vite (shell "npx vitest --config=viteconfig.js")
+  -test:watch {:depends [test:watch:squint test:watch:vite]}
+  test:watch (run '-test:watch {:parallel true})
+
+  build:squint (shell "npx squint compile")
+  build:vite (shell "npx vite --config viteconfig.js build public")
+  -build {:depends [build:squint build:vite]}
+  build (run '-build {:parallel false})}}

examples/vite-react/package.json

@@ -1,12 +1,13 @@
 {
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.1.0",
-    "chokidar": "^4.0.1",
-    "vite": "^4.4.11"
+    "@vitejs/plugin-react": "^4.3.2",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "squint-cljs": "latest"
   }
 }

examples/vite-react/src/index.cljs

@@ -1,8 +1,6 @@
 (ns index
-  (:require
-   [MyComponent :as MyComponent]
-   ["react-dom/client" :as rdom]))
+  (:require [my-component :as MyComponent]
+            ["react-dom/client" :refer [createRoot]]))
 
-(def root (rdom/createRoot (js/document.getElementById "app")))
+(def root (createRoot (js/document.getElementById "app")))
 (.render root #jsx [MyComponent/MyComponent])
-

examples/vite-react/src/my_component.cljs

@@ -0,0 +1,11 @@
+(ns my-component
+  (:require ["react" :refer [useState]]))
+
+(defn adder [& n]
+  (apply + n))
+
+(defn MyComponent []
+  (let [[state setState] (useState 0)]
+    #jsx [:div "You clicked " state " times"
+          [:button {:onClick #(setState (inc state))}
+           "Click me"]]))

examples/vite-react/test/dummy_test.cljs

@@ -0,0 +1,7 @@
+(ns dummy-test
+  (:require ["vitest" :refer [expect test]]))
+
+(test "dummy expect works"
+      (fn []
+        (-> (expect 1)
+            (.toBe 1))))

examples/vite-react/test/my_component_test.cljs

@@ -0,0 +1,8 @@
+(ns my-component-test
+  (:require ["vitest" :refer [expect test]]
+            [my-component :refer [adder]]))
+
+(test "my-component adder works"
+      (fn []
+        (-> (expect (adder 1 2 3))
+            (.toBe 6))))

examples/vite-react/viteconfig.js

@@ -1,7 +1,14 @@
-// vite.config.js
+/// <reference types="vitest" />
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 export default defineConfig({
-  plugins: [react()]
+  test: {
+    include: ["public/**/**test.mjs", "public/**/**test.jsx"],
+  },
+  plugins: [
+    react(),
+    visualizer({ open: false, filename: 'bundle-visualization.html' })
+  ]
 });