Skip to content

Commit ce29d41

Browse files
crs48crs48
committed
docs: add e2e reagent examples
1 parent 4ae8b6b commit ce29d41

File tree

14 files changed

+2245
-4
lines changed

14 files changed

+2245
-4
lines changed

‎examples/reagent/counter/.gitignore

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
node_modules/
2+
public/js
3+
4+
/target
5+
/checkouts
6+
/src/gen
7+
8+
pom.xml
9+
pom.xml.asc
10+
*.iml
11+
*.jar
12+
*.log
13+
.shadow-cljs
14+
.idea
15+
.lein-*
16+
.nrepl-*
17+
.DS_Store
18+
19+
.hgignore
20+
.hg/

‎examples/reagent/counter/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "counter",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "shadow-cljs watch dev"
7+
},
8+
"devDependencies": {
9+
"shadow-cljs": "2.14.5"
10+
},
11+
"dependencies": {
12+
"highlight.js": "^9.12.0",
13+
"react": "16.13.0",
14+
"react-dom": "16.13.0",
15+
"react-grid-layout": "^0.16.6",
16+
"react-icons": "^2.2.7",
17+
"reakit": "^0.11.1"
18+
}
19+
}

‎examples/reagent/counter/public/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>homebase examples</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link type="text/css" rel="stylesheet" href="css/firebaseui.css" />
9+
</head>
10+
11+
<body>
12+
<script src="js/main.js"></script>
13+
</body>
14+
15+
</html>

‎examples/reagent/counter/shadow-cljs.edn

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
;; shadow-cljs configuration
2+
{:source-paths ["src/main"]
3+
:dev-http {3000 "public"}
4+
:dependencies [[datascript "1.0.7"]
5+
[reagent "1.0.0-alpha2"]
6+
[io.homebase/homebase-react "0.1.1"]
7+
[io.homebase/datalog-console "0.2.2"]]
8+
:builds {:dev {:target :browser
9+
:output-dir "public/js"
10+
:asset-path "/js"
11+
:compiler-options {:externs ["datascript/externs.js"]}
12+
:modules {:main {:init-fn counter/init!}}}}}

‎examples/reagent/counter/src/main/counter.cljs

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
(ns counter
2+
(:require
3+
[reagent.dom :as rdom]
4+
[datascript.core :as d]
5+
[homebase.reagent :as hbr]
6+
[datalog-console.integrations.datascript :as datalog-console]))
7+
8+
(def db-conn (d/create-conn {}))
9+
(d/transact! db-conn [[:db/add 1 :count 0]]) ; Transact some starting data.
10+
(hbr/connect! db-conn) ; Connect homebase.reagent to the database.
11+
(datalog-console/enable! {:conn db-conn}) ; Also connect the datalog-console extension for better debugging.
12+
13+
(defn counter []
14+
(let [[entity] (hbr/entity db-conn 1)] ; Get a homebase.reagent/Entity. Note the use of db-conn and not @db-conn, this makes it reactive.
15+
(js/console.log @entity)
16+
(fn []
17+
[:div
18+
"Count: " (:count @entity) ; Deref the entity just like a reagent/atom.
19+
[:div
20+
[:button {:on-click #(d/transact! db-conn [[:db/add 1 :count (inc (:count @entity))]])} ; Use d/transact! just like normal.
21+
"Increment"]]])))
22+
23+
(defn init! []
24+
(rdom/render [counter] (.-body js/document)))

0 commit comments

Comments
 (0)