Make defcomponent only create the component function object once, add…

… emoji demo

.gitignore

@@ -1,2 +1,3 @@
 demo-app.js
 counter-app/counter-app.js
+emoji-search/emoji-search.js

Makefile

@@ -1,4 +1,4 @@
-all: demo-app.js counter-app/counter-app.js
+all: demo-app.js counter-app/counter-app.js emoji-search/emoji-search.js
 clean:
 	rm demo-app.js
 jscl:
@@ -8,6 +8,8 @@ demo-app.js: jscl demo-app.lisp jscl-react.lisp
 	$(MAKE) build
 counter-app/counter-app.js: jscl counter-app/app.lisp counter-app/components/navbar.lisp counter-app/components/counters.lisp counter-app/components/counter.lisp
 	$(MAKE) build
+emoji-search/emoji-search.js: jscl emoji-search/filter-emoji.lisp emoji-search/emojiList.json emoji-search/header.lisp emoji-search/search-input.lisp emoji-search/emoji-results-row.lisp emoji-search/app.lisp emoji-search/emoji-results.lisp
+	$(MAKE) build
 build:
 	cd jscl && env SOURCE_DATE_EPOCH=$(shell date +%s) sbcl --load ../build.lisp --eval '(exit)'
 

build.lisp

@@ -16,3 +16,15 @@
     "../counter-app/app.lisp")
   "../counter-app/counter-app.js")
 
+(when (find-package 'ql) ; only compile emoji-search if we have quicklisp available
+  (jscl:compile-application
+    (list
+      "../jscl-react.lisp"
+      "../emoji-search/filter-emoji.lisp"
+      "../emoji-search/emoji-results-row.lisp"
+      "../emoji-search/emoji-results.lisp"
+      "../emoji-search/search-input.lisp"
+      "../emoji-search/header.lisp"
+      "../emoji-search/app.lisp")
+    "../emoji-search/emoji-search.js"))
+

counter-app/app.lisp

@@ -5,8 +5,6 @@
                                               (object "id" 3 "value" 0)
                                               (object "id" 4 "value" 0))))
               (set-state state props)
-  (#j:console:log "app state:")
-  (#j:console:log state)
   (let* ((counters (getobj "counters" state))
          (totalCounters (length (remove-if (lambda (c) (zerop (getobj "value" c))) counters)))
          (handleIncrement
@@ -36,6 +34,7 @@
                             "onIncrement" handleIncrement
                             "onDecrement" handleDecrement
                             "onDelete" handleDelete
-                            "onRestart" handleRestart))))))
+                            "onRestart" handleRestart))
+        "(this is the lisp version)"))))
 
 (mount "root" (render (app)))

counter-app/components/counter.lisp

@@ -14,8 +14,6 @@
   (declare (ignore s) (ignore s2))
   (let* ((counter (getobj "counter" props))
          (val (getobj "value" counter)))
-    (#j:console:log counter)
-    (#j:console:log val)
     (render "div" #()
             ("div" (object "className" "row")
              ("div" (object "className" "col-md-1")

emoji-search/app.lisp

@@ -0,0 +1,11 @@
+(defcomponent (app (object "filteredEmoji" (filter-emoji "" 20))) (set-state state props)
+  (let ((handle-search-change (lambda (evt)
+                                (funcall set-state (object "filteredEmoji" (filter-emoji (getobj "value" (getobj "target" evt)) 20))))))
+    (render
+      "div"
+      #()
+      ((header))
+      ((search-input) (object "textChange" handle-search-change))
+      ((emoji-results) (object "emojiData" (getobj "filteredEmoji" state))))))
+
+(mount "root" (render (app)))

emoji-search/emoji-results-row.lisp

@@ -0,0 +1,11 @@
+(defcomponent (emoji-results-row nil) (s s2 props)
+  (declare (ignore s) (ignore s2))
+  (let* ((code-point-hex (#j:Number:prototype:toString:call (#j:String:prototype:codePointAt:call (getobj "symbol" props) 0) 16))
+         (src (#j:String:prototype:concat:call "http://cdn.jsdelivr.net/emojione/assets/png/" code-point-hex ".png")))
+    (render
+      "div"
+      (object "className" "component-emoji-result-row copy-to-clipboard"
+              "data-clipboard-text" (getobj "symbol" props))
+      ("img" (object "alt" (getobj "title" props) "src" src))
+      ("span" (object "className" "title") (getobj "title" props))
+      ("span" (object "className" "info") "Click to copy emoji"))))

emoji-search/emoji-results.lisp

@@ -0,0 +1,13 @@
+(#j:window:construct #j:ClipboardJS ".copy-to-clipboard")
+
+(defcomponent (emoji-results nil) (s s2 props)
+  (declare (ignore s) (ignore s2))
+  (render
+    "div"
+    (object "className" "component-emoji-results")
+    (apply #'vector (loop for emoji-data in (getobj "emojiData" props)
+                          collect (render
+                                    (emoji-results-row)
+                                    (object "key" (cdr (assoc :title emoji-data))
+                                            "symbol" (cdr (assoc :symbol emoji-data))
+                                            "title" (cdr (assoc :title emoji-data))))))))

emoji-search/emoji-search.css

@@ -0,0 +1,75 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+.component-header {
+  padding: 15px;
+  position: relative;
+  font-weight: normal;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 32px;
+  text-align: center;
+  color: #333;
+}
+
+.component-header img {
+  position: relative;
+  top: 6px;
+  padding: 0 14px;
+}
+
+.component-search-input {
+  border-bottom: 1px solid #ccc;
+}
+
+.component-search-input > div {
+  margin: 0 10px 10px 10px;
+}
+
+.component-search-input input {
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  box-sizing: border-box;
+  font-size: 18px;
+  padding: 10px 8px;
+  width: 100%;
+}
+
+.component-emoji-result-row {
+  border-bottom: 1px solid #ccc;
+  padding: 10px;
+  height: 32px;
+  position: relative;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  cursor: pointer;
+}
+
+.component-emoji-result-row:hover {
+  background-color: #eee;
+}
+
+.component-emoji-result-row img {
+  width: 32px;
+  height: 32px;
+  padding-right: 10px;
+}
+
+.component-emoji-result-row .title {
+  position: relative;
+  top: -8px;
+}
+
+.component-emoji-result-row .info {
+  float: right;
+  position: relative;
+  top: 8px;
+  right: 10px;
+  color: #ccc;
+  display: none;
+}
+
+.component-emoji-result-row:hover .info {
+  display: inline-block;
+}
+

emoji-search/emoji-search.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <meta charset="UTF-8" />
+  <head>
+    <title>jscl-react demo</title>
+	<link rel="stylesheet" href="emoji-search.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="../jscl/jscl.js" type="text/javascript"></script>
+    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
+    <script src="../jscl-react.js" type="text/javascript"></script>
+    <script src="emoji-search.js" type="text/javascript"></script>
+  </body>
+</html>