Skip to content

Commit f29b45f

Browse files
lucywang000lucywang000
committed
add helix framework
1 parent 06d5f59 commit f29b45f

File tree

7 files changed

+240
-0
lines changed

7 files changed

+240
-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: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
out
2+
.shadow-cljs
3+
dist

‎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.8"
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.106",
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: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
:builds {:app {:target :browser
11+
12+
:dev
13+
{:output-dir
14+
"dist"
15+
16+
:asset-path
17+
"/frameworks/keyed/helix/dist/"}
18+
:devtools {:after-load demo.main/after-reload
19+
20+
:watch-dir "resources/demo/styles"
21+
:watch-path "/styles"
22+
23+
:preloads [devtools.preload
24+
hashp.core]}
25+
26+
:release {:output-dir "dist"
27+
:compiler-options {:optimizations :advanced
28+
:infer-externs true}}
29+
30+
:modules {:main {:init-fn demo.main/init!}}}}}

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

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
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+
(defnc main []
39+
(let [id-atom (atom 0)
40+
[data set-data] (use-state [])
41+
[selected set-selected] (use-state nil)
42+
print-duration
43+
(fn print-duration []
44+
(stop-measure))
45+
run
46+
(fn run [_]
47+
(start-measure "run")
48+
(set-data (vec (u/build-data id-atom 1000)))
49+
(set-selected nil))
50+
run-lots
51+
(fn run-lots [_]
52+
(start-measure "runLots")
53+
(set-data (vec (u/build-data id-atom 10000)))
54+
(set-selected nil))
55+
add
56+
(fn add [_]
57+
(start-measure "add")
58+
(set-data u/add id-atom))
59+
update-some
60+
(fn update-some []
61+
(start-measure "update")
62+
(set-data u/update-some))
63+
clear
64+
(fn clear []
65+
(start-measure "clear")
66+
(set-selected nil)
67+
(set-data []))
68+
swap-rows
69+
(fn swap-rows []
70+
(start-measure "swapRows")
71+
(set-data u/swap-rows))
72+
select
73+
(fn select [id]
74+
(start-measure "select")
75+
(set-selected id))
76+
delete
77+
(fn delete [id]
78+
(start-measure "delete")
79+
(set-data u/delete-row id))]
80+
(use-effect :always
81+
(print-duration))
82+
(d/div
83+
{:class "container"}
84+
(d/div
85+
{:class "jumbotron"}
86+
(d/div
87+
{:class "row"}
88+
(d/div {:class "col-md-6"}
89+
(d/h1 "Helix"))
90+
(d/div {:class "col-md-6"}
91+
(d/div {:class "row"}
92+
(d/div {:class "col-sm-6 smallpad"}
93+
(d/button {:class " btn btn-primary btn-block"
94+
:type "button"
95+
:id "run"
96+
:on-click run}
97+
"Create 1,000 rows"))
98+
(d/div {:class "col-sm-6 smallpad"}
99+
(d/button {:class "btn btn-primary btn-block"
100+
:type "button"
101+
:id "runlots"
102+
:on-click run-lots}
103+
"Create 10,000 rows"))
104+
(d/div {:class "col-sm-6 smallpad"}
105+
(d/button {:class "btn btn-primary btn-block"
106+
:type "button"
107+
:id "add"
108+
:on-click add}
109+
"Append 1,000 rows"))
110+
(d/div {:class "col-sm-6 smallpad"}
111+
(d/button {:class " btn btn-primary btn-block"
112+
:type "button"
113+
:id "update"
114+
:on-click update-some}
115+
"Update every 10th row"))
116+
(d/div {:class "col-sm-6 smallpad"}
117+
(d/button {:class "btn btn-primary btn-block"
118+
:type "button"
119+
:id "clear"
120+
:on-click clear}
121+
"Clear"))
122+
(d/div {:class "col-sm-6 smallpad"}
123+
(d/button {:class "btn btn-primary btn-block"
124+
:type "button"
125+
:id "swaprows"
126+
:on-click swap-rows}
127+
"Swap rows"))))))
128+
(d/table {:class "table table-hover table-striped test-data"}
129+
(d/tbody
130+
(for [{:keys [id] :as d} data]
131+
($ row {:key id
132+
:data d
133+
:selected? (identical? id selected)
134+
:on-select select
135+
:on-delete delete}))))
136+
(d/span {:class "preloadicon glyphicon glyphicon-remove"
137+
:aria-hidden "true"}))))
138+
139+
(defn init! []
140+
(rdom/render ($ main) (.getElementById js/document. "main")))
141+
142+
(defn after-reload []
143+
(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)