Added rackt/react example, updated dockerfile to import rackt, added dockerignore

leiDnedyA · leiDnedyA · commit 31120d7cdaf6 · 2023-08-30T12:04:56.000-04:00
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,3 @@
+examples/*.rkt.js
+/node_modules/
+/build
diff --git a/Dockerfile b/Dockerfile
@@ -5,16 +5,24 @@ RUN apt-get update -y --allow-releaseinfo-change \
     && apt-get install -y --no-install-recommends xz-utils make \
     && apt-get clean
 
+RUN apt-get -y install git
+
 WORKDIR /app
 RUN curl -O https://nodejs.org/dist/v18.16.0/node-v18.16.0-linux-x64.tar.xz
 RUN tar xvf node-v18.16.0-linux-x64.tar.xz -C .
 ENV PATH="/app/node-v18.16.0-linux-x64/bin:${PATH}"
 RUN npm install -g js-beautify
 
 COPY . /app/racketscript-playground
+RUN cd racketscript-playground && npm install
+
 ENV PATH="/root/.local/share/racket/8.7/bin/:${PATH}"
 RUN raco pkg install --auto racketscript
 
+RUN git clone https://github.com/leiDnedyA/rackt \ 
+    && cd rackt && git checkout cdn-import \
+    && raco pkg install
+
 WORKDIR /app/racketscript-playground
 RUN make build || true
 CMD ["make", "run-forever"]
diff --git a/examples/rackt-counter.rkt b/examples/rackt-counter.rkt
@@ -0,0 +1,42 @@
+#lang racketscript/base
+
+(require rackt)
+
+;; 
+;; Uses a slightly modified version of the rackt module, a lightweight react wrapper
+;; for racketscript. 
+;; Check it out @ https://github.com/rackt-org/rackt
+;; 
+
+(define root (#js*.document.createElement #js"div"))
+($/:= #js.root.id #js"root")
+(#js*.document.body.appendChild root)
+ 
+(define (header props ..)
+    (<el "div"
+        (<el "h1" "React Counter Example")
+        (<el "p" "A simple counter demo using "
+             (<el "a" "rackt"
+                  #:props ($/obj [href "https://github.com/rackt-org/rackt"]))
+             ", a react wrapper for racketscript.")))
+
+(define (counter props ..)
+    (define-values (counter set-counter) (use-state 0))
+
+    (<el "div"
+        (<el header)
+        (<el "button"
+            #:props ($/obj [ className "button" ]
+                   [ type "button" ]
+                   [onClick (lambda (_) (set-counter (- counter 1)))])
+            "- 1")
+
+        (<el "span" #:props ($/obj [ className "counter" ]) counter)
+
+        (<el "button"
+            #:props ($/obj [ className "button" ]
+                   [ type "button" ]
+                   [onClick (lambda (_) (set-counter (+ counter 1)))])
+            "+ 1")))
+
+(render (<el counter) "root")
diff --git a/static/index.html b/static/index.html
@@ -78,6 +78,7 @@
     <li><a class="dropdown-item" href="#example/tetris">Tetris</a></li>
     <li><a class="dropdown-item" href="#example/archery">Archery</a></li>
     <li><a class="dropdown-item" href="#example/wordle">Wordle</a></li>
+    <li><a class="dropdown-item" href="#example/rackt-counter">React Counter</a></li>
   </ul>
 </li>
 
diff --git a/static/modules/index.html b/static/modules/index.html
@@ -10,6 +10,9 @@
       window.parent.postMessage('run-iframe-init', window.location.origin);
     });
   </script>
+
+<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 </head>
 
 <body>
diff --git a/static/rackt b/static/rackt
@@ -0,0 +1 @@
+../build/runtime/rackt
diff --git a/stub.rkt b/stub.rkt
@@ -5,7 +5,8 @@
 (require racketscript/interop
          racketscript/browser
          racketscript/htdp/image
-         racketscript/htdp/universe)
+         racketscript/htdp/universe
+         rackt)
 
 ;; interop
 assoc->object
@@ -55,3 +56,7 @@ vector-member
 
 ;; string
 string-contains?
+
+;; rackt
+<el
+render

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+examples/*.rkt.js`
	`2`	`+/node_modules/`
	`3`	`+/build`