Jotai example

squint-cljs · Oct 16, 2024 · 71a2ed6 · 71a2ed6
1 parent c664ea6
commit 71a2ed6
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -41,3 +41,4 @@ playground/public/public/src/squint
 !playground/viteconfig.mjs
 out
 .env
+App.jsx
diff --git a/examples/jotai/App.cljs b/examples/jotai/App.cljs
@@ -0,0 +1,30 @@
+(ns App
+  #_:clj-kondo/ignore
+  (:require ["react" :as React])
+  (:require ["react-dom" :as rdom])
+  (:require ["jotai" :as jotai :refer [useAtom]]))
+
+(def !anime (jotai/atom
+             [{:title "Ghost in the Shell"
+               :year 1995
+               :watched true}
+              {:title "Serial Experiments Lain"
+               :year 1998
+               :watched false}]))
+
+(defn App []
+  (let [[anime setAnime] (useAtom !anime)]
+    #jsx [:div
+          [:ul
+           (for [item anime]
+             #jsx [:li {:key (:title item)}
+                   (:title item)])]
+          [:button {:onClick #(setAnime (conj anime
+                                              {:title "Cowboy Bebop"
+                                               :year 1998
+                                               :watched false}))}
+           "Add Cowboy Bebop"]]))
+
+(defonce elt (js/document.querySelector "#app"))
+
+(rdom/render #jsx [App] elt)
diff --git a/examples/jotai/README.md b/examples/jotai/README.md
@@ -0,0 +1,5 @@
+# Jotai example
+
+[Jotai](https://jotai.org/) is a primitive and flexible state management for React.
+
+To run this example, run `npm install` and then `npm run dev`.
diff --git a/examples/jotai/index.html b/examples/jotai/index.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+<div id="app"></div>
+<script type="module" src="./App.jsx"></script>
+</body>
+</html>
diff --git a/examples/jotai/package.json b/examples/jotai/package.json
@@ -0,0 +1,17 @@
+{
+  "dependencies": {
+    "jotai": "^2.10.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "concurrently": "^9.0.1",
+    "squint-cljs": "^0.8.117",
+    "vite": "^5.4.9"
+  },
+  "scripts": {
+    "vite:dev": "vite",
+    "squint:watch": "squint watch",
+    "dev": "concurrently \"npm run vite:dev\" \"npm run squint:watch\""
+  }
+}
diff --git a/examples/jotai/squint.edn b/examples/jotai/squint.edn
@@ -0,0 +1 @@
+{:paths ["."]}
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,3 +41,4 @@ playground/public/public/src/squint @@
     !playground/viteconfig.mjs
     out
     .env
+    App.jsx