From b4fdb1ae1c4ca13b7e585ff666c2221e8eee973f Mon Sep 17 00:00:00 2001 From: Rafael Delboni Date: Sat, 19 Oct 2024 08:39:33 -0300 Subject: [PATCH] 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 | 8 +++ examples/vite-react/README.md | 49 +++++++++++++------ examples/vite-react/bb.edn | 14 +++++- examples/vite-react/package.json | 11 +++-- examples/vite-react/src/MyComponent.cljs | 11 ----- examples/vite-react/src/index.cljs | 8 ++- examples/vite-react/src/my_component.cljs | 11 +++++ examples/vite-react/test/dummy_test.cljs | 7 +++ .../vite-react/test/my_component_test.cljs | 8 +++ examples/vite-react/viteconfig.js | 11 ++++- 10 files changed, 99 insertions(+), 39 deletions(-) create mode 100644 examples/vite-react/.gitignore delete mode 100644 examples/vite-react/src/MyComponent.cljs create mode 100644 examples/vite-react/src/my_component.cljs create mode 100644 examples/vite-react/test/dummy_test.cljs create mode 100644 examples/vite-react/test/my_component_test.cljs diff --git a/examples/vite-react/.gitignore b/examples/vite-react/.gitignore new file mode 100644 index 00000000..335842c9 --- /dev/null +++ b/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 diff --git a/examples/vite-react/README.md b/examples/vite-react/README.md index 6dd9b788..722f1879 100644 --- a/examples/vite-react/README.md +++ b/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. diff --git a/examples/vite-react/bb.edn b/examples/vite-react/bb.edn index 3ed6e893..d1f61fd3 100644 --- a/examples/vite-react/bb.edn +++ b/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})}} diff --git a/examples/vite-react/package.json b/examples/vite-react/package.json index 05fbe522..c1c7d181 100644 --- a/examples/vite-react/package.json +++ b/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" } } diff --git a/examples/vite-react/src/MyComponent.cljs b/examples/vite-react/src/MyComponent.cljs deleted file mode 100644 index 278c3b49..00000000 --- a/examples/vite-react/src/MyComponent.cljs +++ /dev/null @@ -1,11 +0,0 @@ -(ns MyComponent - (:require ["react" :refer [useState]])) - -(defn MyComponent [] - #jsx [:div - (let [[state setState] (useState 0)] - #jsx [:div "You clicked " state "times" - [:button {:onClick (fn [[_ _ _ ]] - (setState (inc state)))} - "Click me!"] - [:ul (interpose " " ["Hello" "world!"])]])]) diff --git a/examples/vite-react/src/index.cljs b/examples/vite-react/src/index.cljs index 71d2a460..6de0f44c 100644 --- a/examples/vite-react/src/index.cljs +++ b/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]) - diff --git a/examples/vite-react/src/my_component.cljs b/examples/vite-react/src/my_component.cljs new file mode 100644 index 00000000..1d69e36f --- /dev/null +++ b/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"]])) diff --git a/examples/vite-react/test/dummy_test.cljs b/examples/vite-react/test/dummy_test.cljs new file mode 100644 index 00000000..7dbeff4a --- /dev/null +++ b/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)))) diff --git a/examples/vite-react/test/my_component_test.cljs b/examples/vite-react/test/my_component_test.cljs new file mode 100644 index 00000000..841ad249 --- /dev/null +++ b/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)))) diff --git a/examples/vite-react/viteconfig.js b/examples/vite-react/viteconfig.js index ca8fe070..367ee5d0 100644 --- a/examples/vite-react/viteconfig.js +++ b/examples/vite-react/viteconfig.js @@ -1,7 +1,14 @@ -// vite.config.js +/// 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' }) + ] });