Skip to content

Commit bc91e85

Browse files
krausestkrausest
committed
Merge branch 'add-helix' of https://github.com/lucywang000/js-framework-benchmark into lucywang000-add-helix
2 parents c71a8b1 + 72e031d commit bc91e85

File tree

8 files changed

+259
-0
lines changed

8 files changed

+259
-0
lines changed

‎frameworks/keyed/helix/.clj-kondo/config.edn

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{:lint-as {helix.core/defnc clojure.core/defn}}

‎frameworks/keyed/helix/.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
out
2+
.shadow-cljs
3+
dist
4+
dev

‎frameworks/keyed/helix/index-dev.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Helix</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id='main'></div>
10+
<script src='dev/main.js'></script>
11+
</body>
12+
</html>

‎frameworks/keyed/helix/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Helix</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id='main'></div>
10+
<script src='dist/main.js'></script>
11+
</body>
12+
</html>

‎frameworks/keyed/helix/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"private": true,
3+
"js-framework-benchmark": {
4+
"frameworkVersion": "0.0.10"
5+
},
6+
"scripts": {
7+
"watch": "shadow-cljs watch :app",
8+
"build-dev": "shadow-cljs compile :app",
9+
"build-prod": "shadow-cljs release :app"
10+
},
11+
"devDependencies": {
12+
"shadow-cljs": "2.8.100",
13+
"ws": "^7.1.2"
14+
},
15+
"dependencies": {
16+
"react": "^16.13.1",
17+
"react-dom": "^16.13.1",
18+
"react-refresh": "0.8.1"
19+
}
20+
}

‎frameworks/keyed/helix/shadow-cljs.edn

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{:source-paths
2+
["src"
3+
"resources"
4+
"checkouts/helix/src"]
5+
6+
:dependencies [[lilactown/helix "0.0.10"]
7+
[lucywang000/hashp "0.1.2"]
8+
[binaryage/devtools "1.0.0"]]
9+
10+
:nrepl {:port 6666
11+
:cider true
12+
:init-ns user}
13+
14+
:builds {:app {:target :browser
15+
16+
:dev
17+
{:output-dir
18+
"dev"
19+
20+
:asset-path
21+
"/frameworks/keyed/helix/dev/"}
22+
:devtools {:after-load demo.main/after-reload
23+
24+
:watch-dir "resources/demo/styles"
25+
:watch-path "/styles"
26+
27+
:preloads [devtools.preload
28+
hashp.core]}
29+
30+
:release {:output-dir "dist"
31+
:compiler-options {:optimizations :advanced
32+
:infer-externs true}}
33+
34+
:modules {:main {:init-fn demo.main/init!}}}}}

‎frameworks/keyed/helix/src/demo/main.cljs

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
(ns demo.main
2+
(:require [helix.core :as hx :refer [defnc $]]
3+
[helix.dom :as d]
4+
[helix.hooks :as hooks :refer [use-state use-effect]]
5+
["react-dom" :as rdom]
6+
[demo.utils :as u]))
7+
8+
(def start-time (atom nil))
9+
(def last-measure (atom nil))
10+
11+
(defn start-measure [name]
12+
(reset! start-time (.now js/performance))
13+
(reset! last-measure name))
14+
15+
(defn stop-measure []
16+
(if-let [last @last-measure]
17+
(.setTimeout js/window
18+
(fn []
19+
(reset! last-measure nil)
20+
(let [stop (.now js/performance)]
21+
(.log js/console (str last " took " (- stop @start-time)))))
22+
0)))
23+
24+
25+
(defnc row [{:keys [data selected? on-click on-delete]}]
26+
(d/tr {:class (if selected? "danger")}
27+
(d/td {:class "col-md-1"}
28+
(:id data))
29+
(d/td {:class "col-md-4"}
30+
(d/a {:on-click (fn [e] (on-click (:id data)))}
31+
(:label data)))
32+
(d/td {:class "col-md-1"}
33+
(d/a {:on-click (fn [e] (on-delete (:id data)))}
34+
(d/span {:class "glyphicon glyphicon-remove"
35+
:aria-hidden "true"})))
36+
(d/td {:class "col-md-6"})))
37+
38+
(defonce id-atom (atom 0))
39+
40+
(defnc main []
41+
(js/console.log "re-render")
42+
(let [[data set-data] (use-state [])
43+
[selected set-selected] (use-state nil)
44+
print-duration
45+
(fn print-duration []
46+
(stop-measure))
47+
run
48+
(fn run [_]
49+
(start-measure "run")
50+
(set-data (vec (u/build-data id-atom 1000)))
51+
(set-selected nil))
52+
run-lots
53+
(fn run-lots [_]
54+
(start-measure "runLots")
55+
(set-data (vec (u/build-data id-atom 10000)))
56+
(set-selected nil))
57+
add
58+
(fn add [_]
59+
(start-measure "add")
60+
(set-data u/add id-atom))
61+
update-some
62+
(fn update-some []
63+
(start-measure "update")
64+
(set-data u/update-some))
65+
clear
66+
(fn clear []
67+
(start-measure "clear")
68+
(set-selected nil)
69+
(set-data []))
70+
swap-rows
71+
(fn swap-rows []
72+
(start-measure "swapRows")
73+
(set-data u/swap-rows))
74+
select
75+
(fn select [id]
76+
(start-measure "select")
77+
(set-selected id))
78+
delete
79+
(fn delete [id]
80+
(start-measure "delete")
81+
(set-data u/delete-row id))]
82+
(use-effect :always
83+
(print-duration))
84+
(d/div
85+
{:class "container"}
86+
(d/div
87+
{:class "jumbotron"}
88+
(d/div
89+
{:class "row"}
90+
(d/div {:class "col-md-6"}
91+
(d/h1 (str "Helix (total rows " (count data) ")")))
92+
(d/div {:class "col-md-6"}
93+
(d/div {:class "row"}
94+
(d/div {:class "col-sm-6 smallpad"}
95+
(d/button {:class " btn btn-primary btn-block"
96+
:type "button"
97+
:id "run"
98+
:on-click run}
99+
"Create 1,000 rows"))
100+
(d/div {:class "col-sm-6 smallpad"}
101+
(d/button {:class "btn btn-primary btn-block"
102+
:type "button"
103+
:id "runlots"
104+
:on-click run-lots}
105+
"Create 10,000 rows"))
106+
(d/div {:class "col-sm-6 smallpad"}
107+
(d/button {:class "btn btn-primary btn-block"
108+
:type "button"
109+
:id "add"
110+
:on-click add}
111+
"Append 1,000 rows"))
112+
(d/div {:class "col-sm-6 smallpad"}
113+
(d/button {:class " btn btn-primary btn-block"
114+
:type "button"
115+
:id "update"
116+
:on-click update-some}
117+
"Update every 10th row"))
118+
(d/div {:class "col-sm-6 smallpad"}
119+
(d/button {:class "btn btn-primary btn-block"
120+
:type "button"
121+
:id "clear"
122+
:on-click clear}
123+
"Clear"))
124+
(d/div {:class "col-sm-6 smallpad"}
125+
(d/button {:class "btn btn-primary btn-block"
126+
:type "button"
127+
:id "swaprows"
128+
:on-click swap-rows}
129+
"Swap rows"))))))
130+
(d/table {:class "table table-hover table-striped test-data"}
131+
(d/tbody
132+
(for [{:keys [id] :as d} data]
133+
($ row {:key id
134+
:data d
135+
:selected? (identical? id selected)
136+
:on-select select
137+
:on-delete delete}))))
138+
(d/span {:class "preloadicon glyphicon glyphicon-remove"
139+
:aria-hidden "true"}))))
140+
141+
(defn init! []
142+
(rdom/render ($ main) (.getElementById js/document. "main")))
143+
144+
(defn after-reload []
145+
(init!))

‎frameworks/keyed/helix/src/demo/utils.cljs

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
(ns demo.utils)
2+
3+
(def adjectives ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"])
4+
(def colours ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"])
5+
(def nouns ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"])
6+
7+
(defrecord Data [id label])
8+
9+
(defn build-data [id-atom count]
10+
(repeatedly count (fn []
11+
(->Data (swap! id-atom inc) (str (rand-nth adjectives) " " (rand-nth colours) " " (rand-nth nouns))))))
12+
13+
(defn add [data id-atom]
14+
(into data (build-data id-atom 1000)))
15+
16+
(defn update-some [data]
17+
(reduce (fn [data index]
18+
(let [row (get data index)]
19+
(assoc data index (assoc row :label (str (:label row) " !!!")))))
20+
data
21+
(range 0 (count data) 10)))
22+
23+
(defn swap-rows [data]
24+
(if (> (count data) 998)
25+
(-> data
26+
(assoc 1 (get data 998))
27+
(assoc 998 (get data 1)))
28+
data))
29+
30+
(defn delete-row [data id]
31+
(vec (remove #(identical? id (:id %)) data)))

0 commit comments

Comments
 (0)