Skip to content

Commit 6a2085f

Browse files
kazkkazk
authored
Merge pull request #1 from codewars/add-evaluation
2 parents a60ac77 + f2e05f5 commit 6a2085f

File tree

5 files changed

+705
-14
lines changed

5 files changed

+705
-14
lines changed

‎index.html‎

Lines changed: 82 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,27 @@
1010

1111
<style>
1212
.CodeMirror { border-top: 1px solid black; border-bottom: 1px solid black; }
13-
</style>
14-
<style>
15-
.text-center { text-align: center; }
13+
[v-cloak] { display: none !important; }
1614
</style>
1715
</head>
1816

1917
<body class="dark">
2018

21-
<header>
19+
<header class="!mb-0">
2220
<h1>
2321
<a href="https://github.com/codewars/lambda-calculus" title="Lambda Calculus">
2422
<img alt="Lambda Calculus" src="https://raw.githubusercontent.com/codewars/lambda-calculus/main/logo/logo-white.svg" width="64" height="64">
2523
</a>
24+
<p class="mt-4 text-2xl text-center">Lambda Calculus mode for CodeMirror</p>
2625
</h1>
27-
<h3 class="text-center">Lambda Calculus mode for CodeMirror</h3>
26+
<p class="text-center"><code>text/x-lambdacalc</code></p>
27+
<p class="text-center"><a href="https://github.com/codewars/codemirror-lambda-calculus">@codewars/codemirror-lambda-calculus</a></p>
2828
</header>
2929

30-
<main>
31-
<p class="text-center"><a href="https://github.com/codewars/codemirror-lambda-calculus">@codewars/codemirror-lambda-calculus</a></p>
30+
<main class="mt-6" v-scope>
31+
3232
<form>
33-
<textarea id="code" name="code">
33+
<textarea id="code">
3434
# Some code (with ignored arguments)
3535
false = \ _a b . b
3636
true = \ a _b . a
@@ -87,16 +87,55 @@ <h3 class="text-center">Lambda Calculus mode for CodeMirror</h3>
8787
all = foldr (\ a b . a b false) true
8888
allf = \ f xs . all (map f xs)
8989
</textarea>
90+
9091
</form>
91-
<p class="text-center"><strong>MIME type:</strong> <code>text/x-lambdacalc</code></p>
92+
93+
<div class="mx-auto mt-8 w-96 grid grid-flow-row grid-cols-4 grid-rows-2 gap-1">
94+
<input type="text"
95+
v-model="evaluation"
96+
@keyup.enter="evaluate()"
97+
class="col-span-3"
98+
/>
99+
<button @click="evaluate()" class="col-span-1">Evaluate</button>
100+
101+
<code v-cloak class="px-2 py-1 mt-1 col-span-4 bg-white/10" v-show="result">{{ result }}</code>
102+
<code v-cloak class="px-2 py-1 mt-1 col-span-4 bg-red-800/60" v-show="error">{{ error }}</code>
103+
</div>
104+
105+
<div class="mx-auto mt-4 w-80">
106+
<fieldset>
107+
<legend>Options</legend>
108+
<div class="grid grid-cols-2 grid-rows-3 gap-1">
109+
<label class="!m-0" for="purity"><code>purity</code></label>
110+
<select id="purity" v-model="purity">
111+
<option v-for="opt in purityOptions" :value="opt" :selected="opt === purity">{{ opt }}</option>
112+
</select>
113+
114+
<label class="!m-0" for="num-encoding"><code>numEncoding</code></label>
115+
<select id="num-encoding" v-model="numEncoding">
116+
<option v-for="opt in numEncodingOptions" :value="opt" :selected="opt === numEncoding">{{ opt }}</option>
117+
</select>
118+
119+
<label class="!m-0" for="verbosity"><code>verbosity</code></label>
120+
<select id="verbosity" v-model="verbosity">
121+
<option v-for="opt in verbosityOptions" :value="opt" :selected="opt === verbosity">{{ opt }}</option>
122+
</select>
123+
</div>
124+
</fieldset>
125+
</div>
92126
</main>
93127

94128
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.js"></script>
95129
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/addon/edit/matchbrackets.min.js"></script>
96130
<script type="module">
131+
import "virtual:windi.css";
132+
133+
import { createApp } from "https://unpkg.com/[email protected]?module";
134+
import * as LC from "https://unpkg.com/@codewars/lambda-calculus";
97135
import { defineMode } from "./lambdacalc.js";
98136
defineMode(CodeMirror);
99-
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
137+
const editor = CodeMirror.fromTextArea(document.getElementById("code"), {
138+
mode: "lambdacalc",
100139
lineNumbers: true,
101140
matchBrackets: true,
102141
theme: "codewars",
@@ -108,7 +147,39 @@ <h3 class="text-center">Lambda Calculus mode for CodeMirror</h3>
108147
return elem;
109148
}
110149
});
111-
editor.setSize(500, 500);
150+
editor.setSize(500, 400);
151+
152+
const toLambda = (s) => s.replace(/\\/g, "λ");
153+
createApp({
154+
purity: "Let",
155+
purityOptions: ["Let", "LetRec", "PureLC"],
156+
verbosity: "Calm",
157+
verbosityOptions: ["Calm", "Concise", "Loquacious", "Verbose"],
158+
numEncoding: "Church",
159+
numEncodingOptions: ["None", "Church", "Scott", "BinaryScott"],
160+
161+
evaluation: "not false",
162+
result: "",
163+
error: "",
164+
evaluate() {
165+
this.result = "";
166+
this.error = "";
167+
168+
const code = editor.getValue();
169+
const val = this.evaluation;
170+
const compile = LC.compileWith({
171+
purity: this.purity,
172+
verbosity: this.verbosity,
173+
numEncoding: this.numEncoding,
174+
});
175+
try {
176+
const { result } = compile(`${code}\n\nresult = ${val}`);
177+
this.result = toLambda(result.term + "");
178+
} catch (e) {
179+
this.error = e.message || e.name;
180+
}
181+
},
182+
}).mount();
112183
</script>
113184

114185
</body>

0 commit comments

Comments
 (0)