Skip to content

Commit 5437fcd

Browse files
BartJongejanBartJongejan
committed
Improved JavaScript and Web Assembly versions
1 parent c60b20f commit 5437fcd

File tree

3 files changed

+169
-92
lines changed

3 files changed

+169
-92
lines changed

‎WebAssembly/edit-potuC.html.bra‎

Lines changed: 146 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
{editbracmatjs.bra
1+
{edit-potuC.html.bra
22

3-
Perform the edits in bracmat html, as described in emscripten-bracmat-readme.txt}
3+
Perform the edits in bracmat html}
44

55
X=
66
( correctPadding
@@ -15,10 +15,15 @@ X=
1515
& out$(removed !stl)
1616
& str$(!a !z)
1717
)
18-
( replaceStyle =.
19-
@(!arg:?A "<style>" ? "</style>" ?Z)
20-
& str$(!A "<style>
21-
body {
18+
( replaceStyle
19+
=
20+
. @(!arg:?A "<style>" ? "</style>" ?Z)
21+
& str
22+
$ ( !A
23+
toML
24+
$ ( style
25+
.
26+
, "body {
2227
font-family: arial;
2328
margin: 0;
2429
padding: 10px;
@@ -38,9 +43,10 @@ background-color: white;
3843
color: black;
3944
font-family: 'Lucida Console', Monaco, monospace;
4045
outline: ridge;
41-
}
42-
</style>
43-
" !Z)
46+
}"
47+
)
48+
!Z
49+
)
4450
)
4551
( removeElement
4652
= html elstart elend a z
@@ -53,11 +59,12 @@ outline: ridge;
5359
= html a z
5460
. !arg:?html
5561
& @(!html:?a "<title>" ? "</title>" ?z)
56-
& str$(!a "<title>Bracmat</title>" !z)
62+
& str$(!a toML$(title.,Bracmat) !z)
5763
)
5864
( removeSVG
5965
= a z
60-
. @(!arg:?a "<svg" ? "</svg>" ?z)&str$(!a !z)
66+
. @(!arg:?a "<svg" ? "</svg>" ?z)
67+
& str$(!a !z)
6168
)
6269
( includeJS
6370
= a z html js
@@ -67,17 +74,26 @@ outline: ridge;
6774
"<script async type=\"text/javascript\" src=\"potuC.js\"></script>"
6875
?z
6976
)
70-
& str$(!a "<script async type=\"text/javascript\">" !js "</script>" !z)
77+
& str
78+
$ ( !a
79+
toML
80+
$ ( script
81+
. (async.) (type.text/javascript)
82+
, !js
83+
)
84+
!z
85+
)
7186
)
7287
( insertBeforeTextArea
7388
= a z
7489
. !arg:(?html.?toInsert)
7590
& @(!html:?a "<textarea" ?z)
76-
& str$(!a !toInsert "<textarea" !z)
91+
& str$(!a toML$!toInsert "<textarea" !z)
7792
)
7893
( doit
7994
=
80-
. ( "The text in the file 'safereadme', as constructed by the next
95+
. !arg:?WASM
96+
& ( "The text in the file 'safereadme', as constructed by the next
8197
lines, can be cut and pasted directly into this script."
8298
| get$("emscripten-bracmat-readme.txt",STR,TXT)
8399
: ?readme
@@ -91,18 +107,22 @@ outline: ridge;
91107
& out$"potuC.js read"
92108
& (its.correctPadding)$!html:?html
93109
& out$"corrected padding"
94-
& (its.removeStyle)$(!html."#emscripten_logo"):?html
110+
& (its.removeStyle)$(!html."#emscripten_logo")
111+
: ?html
95112
& (its.removeStyle)$(!html.".spinner"):?html
96113
& (its.removeStyle)$(!html."@-webkit-keyframes rotation")
97114
: ?html
98115
& (its.removeStyle)$(!html."@-moz-keyframes rotation")
99116
: ?html
100-
& (its.removeStyle)$(!html."@-o-keyframes rotation"):?html
101-
& (its.removeStyle)$(!html."@keyframes rotation"):?html
117+
& (its.removeStyle)$(!html."@-o-keyframes rotation")
118+
: ?html
119+
& (its.removeStyle)$(!html."@keyframes rotation")
120+
: ?html
102121
& (its.removeStyle)$(!html."#status"):?html
103122
& (its.removeStyle)$(!html."#progress"):?html
104123
& (its.removeStyle)$(!html."#controls"):?html
105-
& (its.removeStyle)$(!html."canvas.emscripten"):?html
124+
& (its.removeStyle)$(!html."canvas.emscripten")
125+
: ?html
106126
& (its.replaceStyle)$!html:?html
107127
& (its.removeElement)
108128
$ (!html."<a href=\"http://emscripten.org\">"."</a>")
@@ -113,12 +133,17 @@ outline: ridge;
113133
& (its.removeElement)
114134
$ (!html."<div class=\"emscripten\" id=\"status\">"."</div>")
115135
: ?html
116-
& (its.removeElement)$(!html."<div class=\"emscripten\">"."</div>")
136+
& (its.removeElement)
137+
$ (!html."<div class=\"emscripten\">"."</div>")
117138
: ?html
118-
& ( (its.removeElement)$(!html."<span>"."</span>"):?html
119-
& (its.removeElement)$(!html."<span>"."</span>"):?html
120-
& (its.removeElement)$(!html."<span>"."</span>"):?html
121-
& (its.removeElement)$(!html."<span id='controls'>"."</span>")
139+
& ( (its.removeElement)$(!html."<span>"."</span>")
140+
: ?html
141+
& (its.removeElement)$(!html."<span>"."</span>")
142+
: ?html
143+
& (its.removeElement)$(!html."<span>"."</span>")
144+
: ?html
145+
& (its.removeElement)
146+
$ (!html."<span id='controls'>"."</span>")
122147
: ?html
123148
)
124149
& (its.removeElement)
@@ -129,38 +154,58 @@ outline: ridge;
129154
& out$"removed SVG"
130155
|
131156
)
132-
& "<h1>Bracmat ... in your browser ...</h1>
133-
<p>Write Bracmat expressions in the upper text box.
134-
After pressing the <strong>evaluate</strong> button,
135-
the result of the evaluation of your expressions
136-
will eventually appear in the lower text box.<br />
137-
Bracmat is a programming language for symbolic computation with
138-
an exquisite programming construct for pattern matching.
139-
Read the
140-
<a href=\"http://jongejan.dk/bracmat.html\">documentation</a>, and
141-
see many more examples on
142-
<a href=\"http://rosettacode.org/wiki/Category:Bracmat\">rosettacode.org</a>.
143-
<br />
144-
For this demo version the C source code in which Bracmat is
145-
written, is translated to WebAssembly (or JavaScript, if the emcc
146-
option <strong>-sWASM=0</strong> was present), so the demo runs within the confines
147-
of your browser, with all the limitations that follow, such as the
148-
inability to read and write files.
149-
<br />
150-
Full, more than ten times faster versions of Bracmat compiled and
151-
linked for Windows, macOS and Linux, together with the C source
152-
code, can be found on
153-
<a href=\"https://github.com/BartJongejan/Bracmat\">GitHub</a>.<br>
154-
</p>"
157+
& ( what
158+
= !WASM:0&JavaScript
159+
| "Web Assembly"
160+
)
161+
& (h3.,str$(!v ", transpiled to " !what))
162+
( p
163+
.
164+
, "Write Bracmat expressions in the upper text box. After pressing the "
165+
(strong.,evaluate)
166+
" button, the result of the evaluation of your expressions will eventually appear in the lower text box."
167+
(br.,)
168+
"Bracmat is a programming language for symbolic computation with an exquisite programming construct for pattern matching. Read the "
169+
( a
170+
. ( href
171+
. "https://github.com/BartJongejan/Bracmat/releases/latest/download/bracmat.html"
172+
)
173+
, documentation
174+
)
175+
", and see many more examples on "
176+
( a
177+
. (href."http://rosettacode.org/wiki/Category:Bracmat")
178+
, "rosettacode.org"
179+
)
180+
"."
181+
(br.,)
182+
"For this demo version, the C source code in which Bracmat is written is translated to "
183+
!what
184+
". The demo runs within the confines of your browser, with all the limitations that follow, such as the inability to read and write files."
185+
(br.,)
186+
"Full, more than ten times faster versions of Bracmat compiled and linked for Windows, macOS and Linux, together with the C source code, can be found on "
187+
( a
188+
. (href."https://github.com/BartJongejan/Bracmat")
189+
, GitHub
190+
)
191+
"."
192+
(br.,)
193+
)
155194
: ?introduction
156-
& (its.insertBeforeTextArea)$(!html.!introduction):?html
195+
& (its.insertBeforeTextArea)$(!html.!introduction)
196+
: ?html
157197
& out$"inserted intro"
158-
& "
159-
<textarea class=\"emscripten\" id=\"input\" value=\"\" cols=\"80\" rows=\"20\">({Dinesman's multiple-dwelling problem. See
198+
& ( textarea
199+
. (class.emscripten)
200+
(id.input)
201+
(value.)
202+
(cols.80)
203+
(rows.20)
204+
, "({Dinesman's multiple-dwelling problem. See
160205
http://rosettacode.org/wiki/Dinesman's_multiple-dwelling_problem#Bracmat}
161206

162207
Baker Cooper Fletcher Miller Smith:?people
163-
&amp; ( constraints
208+
& ( constraints
164209
=
165210
. !arg
166211
: ~(? Baker)
@@ -170,40 +215,46 @@ http://rosettacode.org/wiki/Dinesman's_multiple-dwelling_problem#Bracmat}
170215
: ~(? Smith Fletcher ?|? Fletcher Smith ?)
171216
: ~(? Cooper Fletcher ?|? Fletcher Cooper ?)
172217
)
173-
&amp; ( solution
218+
& ( solution
174219
= floors persons A Z person
175220
. !arg:(?floors.?persons)
176-
&amp; ( !persons:
177-
&amp; constraints$!floors
178-
&amp; out$(\"Inhabitants, from bottom to top:\" !floors)
179-
&amp; ~ { The ~ always fails on evaluation. Here,
180-
failure forces Bracmat to backtrack and find all solutions, not just the
181-
first one. }
221+
& ( !persons:
222+
& constraints$!floors
223+
& out$(\"Inhabitants, from bottom to top:\" !floors)
224+
& ~ { The ~ always fails on evaluation. Here, failure forces Bracmat
225+
to backtrack and find all solutions, not just the first one. }
182226
| !persons
183227
: ?A
184228
%?`person
185-
(?Z&amp;solution$(!floors !person.!A !Z))
229+
(?Z&solution$(!floors !person.!A !Z))
186230
)
187231
)
188-
&amp; solution$(.!people)
189-
| { After outputting all solutions, the lhs of the |
190-
operator fails. The rhs of the | operator, here an empty string, is the
191-
final result. }
192-
);</textarea>"
232+
& solution$(.!people)
233+
| { After outputting all solutions, the lhs of the | operator fails.
234+
The rhs of the | operator, here an empty string, is the final result. }
235+
);"
236+
)
193237
: ?inputField
194-
& "<input value=\"evaluate\" onclick=\"takeinput()\" type=\"button\">"
238+
& ( input
239+
. (value.evaluate)
240+
(onclick."takeinput()")
241+
(type.button)
242+
,
243+
)
195244
: ?submitButton
196-
& (its.insertBeforeTextArea)$(!html.!inputField !submitButton)
245+
& (its.insertBeforeTextArea)
246+
$ (!html.!inputField !submitButton)
197247
: ?html
198248
& out$"inserted input field and submit button"
199249
& put$(!js,"potuC.js",TXT,NEW)
200250
& @(!html:?a "</body>" ?z)
201251
& out$"found body close tag"
202252
& str
203253
$ ( !a
204-
"
205-
<script>
206-
function execute(text) {
254+
toML
255+
$ ( script
256+
.
257+
, "function execute(text) {
207258
var out;
208259
var cstyle_ptr = stringToNewUTF8(text);
209260
Module['print'](\"{?} \"+text+\"\\n{!} \");
@@ -214,39 +265,51 @@ final result. }
214265
execute(text);
215266
}
216267
// _startProc();
217-
// execute(\"4:?a;!a^2+1;\");
218-
</script>
219-
</body>"
268+
// execute(\"4:?a;!a^2+1;\");"
269+
)
270+
"</body>"
220271
!z
221272
)
222273
: ?html
223274
& (its.includeJS)$(!html.!js):?html
224275
& (its.replaceTitle)$!html:?html
225276
& out$"all replacements done"
226-
& put$(!html,"bracmatJS.html",TXT,NEW)
277+
& put
278+
$ ( !html
279+
, !WASM:1&"bracmatWASM.html"
280+
| "bracmatJS.html"
281+
, TXT
282+
, NEW
283+
)
227284
& out$"edit succeeded"
228285
| out$"something went wrong"
229286
)
230-
(new=.~|(its.doit)$);
287+
( new
288+
=
289+
. ~
290+
| (arg$|0):?WASM
291+
& (its.doit)$!WASM
292+
);
231293

232294
r=
233-
get'("editbracmatjs.bra",TXT)
234-
& rmv$(str$(editbracmatjs ".bak"))
235-
& ren$("editbracmatjs.bra".str$(editbracmatjs ".bak"))
295+
get'("edit-potuC.html.bra",TXT)
296+
& rmv$"edit-potuC.html.bak"
297+
& ren$("edit-potuC.html.bra"."edit-potuC.html.bak")
236298
& put
237-
$ ( "{editbracmatjs.bra
299+
$ ( "{edit-potuC.html.bra
238300

239-
Perform the edits in bracmat html, as described in emscripten-bracmat-readme.txt}
301+
Perform the edits in bracmat html}
240302

241303
"
242-
, "editbracmatjs.bra"
304+
, "edit-potuC.html.bra"
243305
, NEW
244306
, BIN
245307
)
246-
& lst'(X,"editbracmatjs.bra",APP)
247-
& put'(\n,"editbracmatjs.bra",APP,BIN)
248-
& lst'(r,"editbracmatjs.bra",APP)
249-
& put$(str$("\nnew'" X ";\n"),"editbracmatjs.bra",APP,BIN)
308+
& lst'(X,"edit-potuC.html.bra",APP,BIN)
309+
& put'(\n,"edit-potuC.html.bra",APP,BIN)
310+
& lst'(r,"edit-potuC.html.bra",APP,BIN)
311+
& put
312+
$ (str$("\nnew'" X ";\n"),"edit-potuC.html.bra",APP,BIN)
250313
& ;
251314

252315
new'X;

‎WebAssembly/emscriptenHowToHTML.sh‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,23 @@
1-
#emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.9
2-
# Without WebAssembly:
3-
##emcc ../src/*.c --pre-js pre.js -s EXPORTED_RUNTIME_METHODS='["cwrap", "intArrayFromString"]' -s "EXPORTED_FUNCTIONS=['_main','_oneShot','_malloc']" -s "MODULARIZE=0" -O0 -o potuC.html -s "WASM=0"
4-
emcc ../src/*.c --pre-js pre.js -s EXPORTED_RUNTIME_METHODS='["stringToNewUTF8", "cwrap", "intArrayFromString","stackAlloc"]' -s "EXPORTED_FUNCTIONS=['_main','_oneShot','_malloc']" -s "MODULARIZE=0" -O0 -o potuC.html -s "WASM=0"
1+
# Set WASM=0 or WASM=1 in this script. Then execute it.
2+
3+
# Only JavaScript, without WebAssembly:
4+
WASM=0
5+
# Output: bracmatJS.html
6+
# This file works fine by double clicking it in the file manager.
7+
58
# With WebAssembly
6-
# Note that you probably need to run from a web server. You can do `python3 -m http.server' and then load http://localhost:8000/bracmatJS.html in your browser.
7-
# See https://emscripten.org/docs/getting_started/FAQ.html#how-do-i-run-a-local-webserver-for-testing-why-does-my-program-stall-in-downloading-or-preparing
8-
#emcc ../src/*.c --pre-js pre.js -s EXPORTED_RUNTIME_METHODS='["stringToNewUTF8", "cwrap", "intArrayFromString","stackAlloc"]' -s "EXPORTED_FUNCTIONS=['_main','_oneShot','_malloc']" -s "MODULARIZE=0" -O0 -o potuC.html
9-
bracmat "get'\"edit-potuC.html.bra\""
9+
#WASM=1
10+
# Output: bracmatWASM.html and potuC.wasm
11+
# These two files must be in the same directory under the webserver's document root.
12+
# Note that you cannot activate Web Assembly if you just double click bracmatWASM.html in the file manager.
13+
# You can do `python3 -m http.server' and then load http://localhost:8000/bracmatWASM.html in your browser.
14+
# See https://emscripten.org/docs/getting_started/FAQ.html#how-do-i-run-a-local-webserver-for-testing-why-does-my-program-stall-in-downloading-or-preparing
15+
16+
# emcc -v :
17+
# emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 4.0.4 (273f0216fede04f2445367765eaf2aabeeb60d84)
18+
# clang version 21.0.0git (https:/github.com/llvm/llvm-project 148111fdcf0e807fe74274b18fcf65c4cff45d63)
19+
20+
emcc ../src/*.c --pre-js pre.js -s EXPORTED_RUNTIME_METHODS='["stringToNewUTF8", "cwrap", "intArrayFromString","stackAlloc"]' -s "EXPORTED_FUNCTIONS=['_main','_oneShot','_malloc']" -s "MODULARIZE=0" -O0 -o potuC.html -s "WASM=$WASM"
21+
bracmat "get'\"edit-potuC.html.bra\"" "$WASM"
22+
23+
# last updated: 20260204

‎WebAssembly/pre.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ Module['print'] = (function () {
33
if (element) element.value = ''; // clear browser cache
44
return function (text) {
55
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
6-
//console.log(text);
6+
console.log(text);
77
if (element) {
88
element.value += text + '\n';
99
element.scrollTop = element.scrollHeight; // focus on bottom

0 commit comments

Comments
 (0)