Skip to content

Added Rackt example & tweaked Dockerfile #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 2, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .dockerignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
examples/*.rkt.js
/node_modules/
/build
8 changes: 8 additions & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
42 changes: 42 additions & 0 deletions examples/rackt-counter.rkt
Original file line number Diff line number Diff line change
@@ -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")
1 change: 1 addition & 0 deletions static/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
3 changes: 3 additions & 0 deletions static/modules/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions static/rackt
7 changes: 6 additions & 1 deletion stub.rkt
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
(require racketscript/interop
racketscript/browser
racketscript/htdp/image
racketscript/htdp/universe)
racketscript/htdp/universe
rackt)

;; interop
assoc->object
Expand Down Expand Up @@ -55,3 +56,7 @@ vector-member

;; string
string-contains?

;; rackt
<el
render