chr
Version:
Interpreter for Constraint Handling Rules (CHR) in JavaScript
66 lines (54 loc) • 2.31 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>CHR.js Example Page</title>
<script src="chr.min.js"></script>
<script src="chrparser.min.js"></script>
<style>
body {
font-family: Arial;
}
p {
margin: 25px 5%;
}
.col {
float: left;
width: 40%;
margin: 0 5%;
}
</style>
</head>
<body>
<h1>CHR.js Example Page</h1>
<p>CHR.js is a just-in-time (JIT) compiler for Constraint Handling Rules (CHR), embedded in JavaScript. This is just a demo page of the browser usage. More examples, an interactive playground and the full documentation can be found at the project page at <a href="http://chrjs.net">chrjs.net</a>.</p>
<p>It is not recommended to use the CHR.js interpreter in production. Instead you should use <a href="https://github.com/fnogatz/babel-plugin-chr">babel-plugin-chr</a>, an ahead-of-time (AOT) compiler for CHR.js, which ensures a better runtime performance.</p>
<div class="col">
<h2>Usage</h2>
For just-in-time (JIT) compilation in your browser simply include the <code>chr.js</code> in your page:
<pre><code><script src="chr.js"></script></code></pre>
If you want to do the parsing process separately (e.g. in a Webworker), you can use the smaller <code>chr-wop.js</code>:
<pre><code><script src="chr-wop.js"></script></code></pre>
<h2>Example</h2>
Open the JavaScript console of your browser: <code>Ctrl + Shift + J</code>.
<pre><code class="javascript">
// create a new constraint handler
var chr = new CHR()
// add some rules
chr('a(N) ==> N > 0 | a(N-1)')
chr('a(0) <=>', function() { console.log('Removed a(0)') })
// inspect the constraint store
console.log(chr.Store.toString())
// call a/1 constraint
chr.a(10)
// inspect updated constraint store
console.log(chr.Store.toString())
</code></pre>
More examples can be found at <a href="http://chrjs.net">chrjs.net</a>. This project page also provides a playground to interactively develop your constraint handler.
</div>
<div class="col">
<h2>Screenshot</h2>
<img src="screenshot.png" alt="Screenshot of the executed code">
</div>
</body>
</html>