Skip to content

Commit 384ec86

Browse files
sebnozzisebnozzi
committed
add browser examples
1 parent 378f59f commit 384ec86

File tree

6 files changed

+171
-0
lines changed

6 files changed

+171
-0
lines changed

‎examples/browser/01-simpleEvaluation.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<link rel="shortcut icon" href="#">
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>MiniScript.TS - Simple Evaluation</title>
7+
<script type="text/javascript" src="../../dist/miniscript-ts.js"></script>
8+
</head>
9+
<body>
10+
<div>
11+
This example shows simple evaluation of code.
12+
</div>
13+
<div>
14+
Open the developer console to see results!
15+
</div>
16+
<script type="text/javascript">
17+
const interp = new MiniScriptTs.Interpreter();
18+
let code = `print "Hello " * 3
19+
for i in range(1,10); print i; end for`;
20+
interp.runSrcCode(code);
21+
</script>
22+
</body>
23+
</html>

‎examples/browser/02-contextPersistence.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<link rel="shortcut icon" href="#">
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>MiniScript.TS - Global context persistence</title>
7+
<script type="text/javascript" src="../../dist/miniscript-ts.js"></script>
8+
</head>
9+
<body>
10+
<div>
11+
This example shows that you can evaluate code many times and the same
12+
global context remains. If you want to start fresh create a new interpreter.
13+
</div>
14+
<div>
15+
Open the developer console to see results!
16+
</div>
17+
<script type="text/javascript">
18+
const interp = new MiniScriptTs.Interpreter();
19+
let code = `print "Defining function ..."
20+
sumTwo = function(a,b)
21+
return a + b
22+
end function`;
23+
interp.runSrcCode(code);
24+
// Now let's _use_ the function
25+
code = `print sumTwo(3,2)`;
26+
// Run new code, but in the same context
27+
interp.runSrcCode(code);
28+
</script>
29+
</body>
30+
</html>

‎examples/browser/03-accessGlobals.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<link rel="shortcut icon" href="#">
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>MiniScript.TS - Accessing global context</title>
7+
<script type="text/javascript" src="../../dist/miniscript-ts.js"></script>
8+
</head>
9+
<body>
10+
<div>
11+
This example shows how to access the global context from JavaScript.
12+
</div>
13+
<div>
14+
Open the developer console to see results!
15+
</div>
16+
<script type="text/javascript">
17+
const interp = new MiniScriptTs.Interpreter();
18+
let code = `
19+
s = "Hello " * 3`;
20+
interp.runSrcCode(code);
21+
// Access the globalContext property
22+
const context = interp.globalContext;
23+
// Ask for a value by key. Result might be _undefined_.
24+
const value = context.getOpt("s");
25+
if (value !== undefined) {
26+
console.log("We got from the global context that 's' is:", value);
27+
}
28+
</script>
29+
</body>
30+
</html>

‎examples/browser/04-addIntrinsic.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<link rel="shortcut icon" href="#">
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>MiniScript.TS - Adding intrinsics</title>
7+
<script type="text/javascript" src="../../dist/miniscript-ts.js"></script>
8+
</head>
9+
<body>
10+
<div>
11+
This example shows how to add an intrinsic function.
12+
</div>
13+
<div>
14+
Open the developer console to see results!
15+
</div>
16+
<script type="text/javascript">
17+
const interp = new MiniScriptTs.Interpreter();
18+
// Use a MiniScript function signature. Default values are supported.
19+
// Then provide a JavaScript anonymous function.
20+
interp.addIntrinsic("mySum(a=0,b=0)", (a, b) => {
21+
return a + b;
22+
});
23+
// Let's call the intrinsic
24+
let code = `
25+
print mySum(8,4)
26+
print mySum(2)`;
27+
interp.runSrcCode(code);
28+
</script>
29+
</body>
30+
</html>

‎examples/browser/05-addMapIntrinsic.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<link rel="shortcut icon" href="#">
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>MiniScript.TS - Adding Map intrinsics</title>
7+
<script type="text/javascript" src="../../dist/miniscript-ts.js"></script>
8+
</head>
9+
<body>
10+
<div>
11+
This example shows how to add a map intrinsic function.
12+
</div>
13+
<div>
14+
Open the developer console to see results!
15+
</div>
16+
<script type="text/javascript">
17+
const interp = new MiniScriptTs.Interpreter();
18+
// A typical pattern is to have a map which represents either a "super-type"
19+
// or a singleton object. In order for this to be accessible one needs to
20+
// define in turn an intrinsic function that returns such value.
21+
22+
// First we need the map / object.
23+
// The module exposes a `newMap` function for that!
24+
const myType = MiniScriptTs.newMap();
25+
26+
// Then we create the intrinsic function to get ahold of it.
27+
interp.addIntrinsic("MyType", () => {
28+
return myType;
29+
});
30+
31+
// At this point you can do `new MyType` on MiniScript.
32+
33+
// Now let's augment the type with an intrinsic map-function.
34+
interp.addMapIntrinsic(myType, "someMethod", () => {
35+
console.log("Method called!");
36+
});
37+
38+
// Let's use what we have
39+
let code = `
40+
m = new MyType
41+
m.someMethod`;
42+
interp.runSrcCode(code);
43+
</script>
44+
</body>
45+
</html>

‎examples/browser/REAME.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
# Examples for the browser
3+
4+
At the time of this writing MiniScript.TS is not yet published on any CDN.
5+
That means you will have to build the project locally and use the produced artifact.
6+
7+
In order to be able to load the examples:
8+
9+
* Build the project using node.js locally
10+
* Serve the files from the project root
11+
* Open the HTML file on the browser
12+
13+
To serve the files from the project root you could use Python's built-in server, Caddy, or the "Live Server" extension for Visual Studio Code.

0 commit comments

Comments
 (0)