ADocument.html

<div class = "ampleforthDocumentClass" name = "ADocument" classBody = "() (
notAFragment = (^33)
testButton1 = (^button: #TestButton1 action: ['testing' out])
testButton2 = (^button: #TestButton2 action: ['testing' out])
testButton3 = (^button: #TestButton3 action: ['testing' out])
testButton4 = (^button: #TestButton4 action: ['testing' out])
toggle = (^expanded: (testButton4) collapsed: (label: 'open'))
) : (
)
" </div><div class = "ampleforthDocumentBody">
    <div contenteditable="true" 
    style="border: 2px solid blue; resize: horizontal; overflow: auto"
    onkeyup="updateRawHTML()" >
<h1> A Sample Document</h1> This is a <div class="ampleforth"
  name="testButton1"  contenteditable="false"></div>
  embedded in a document!  
  And here is another one: <span class="ampleforth" name="testButton2"
   contenteditable="false"></span> and another
<div class="ampleforth" name="testButton3" contenteditable="false"></div>
  <h3> Maintaining State</h3>
  Here is a toggle that maintains its state while we edit:
  <div class="ampleforth" name="toggle" contenteditable="false"></div>
  Let us add another widget <span class="ampleforth"
  name="testButton4" contenteditable="false"></span>
<h3>Dealing with Errors</h3>
What if the expression given in the document does not evaluate to a
  Fragment? 
  <br>
  If it evaluates without error, we place an
  error message that links to an inspector on the result in the 
  document.
  <br>
<div class="ampleforth" name="notAFragment" contenteditable="false"></div>
<br>
Consider a bad selector in the <i>name</i> attribute of an <i>ampleforth</i> node.
<br>
<div class="ampleforth" name="foo" contenteditable="false"></div>
<br>
If the expression does not compile at all, what do we do? 
<br>No longer an
issue in the new design. 
<br>
Likewise if the <i>initializer</i> attribute is missing.
<br>
Another interesting situation is recursion, as attempted below, which yields an informative error message: 
<br>
<div class="ampleforth" name="AmpleforthTargetDocument" contenteditable="false"></div>
</div>
  <br>
</div>
</div><script type="text/javascript">
      function scheduleTurn(timeout) {
        if (timeout >= 0) {
          setTimeout(function() {
            var timeout = Module._handle_message();
            scheduleTurn(timeout);
          }, timeout);
        }
      }

      var Module = {
        noInitialRun: true,
        noExitRuntime: true,
        onRuntimeInitialized: function() {
          var url = new URLSearchParams(window.location.search);
          var request = new XMLHttpRequest();
          request.open("GET", url.get("snapshot"), true);
          request.responseType = "arraybuffer";
          request.onload = function (event) {
            var jsBuffer = new Uint8Array(request.response);
            var cBuffer = _malloc(jsBuffer.length);
            writeArrayToMemory(jsBuffer, cBuffer);
            Module._load_snapshot(cBuffer, jsBuffer.length);
            _free(cBuffer);
            scheduleTurn(0);
          };
          request.send();
        },
        print: function(text) {
          if (arguments.length > 1) {
            text = Array.prototype.slice.call(arguments).join(" ");
          }
          console.log(text);
        },
        printErr: function(text) {
          if (arguments.length > 1) {
            text = Array.prototype.slice.call(arguments).join(" ");
          }
          console.error(text);
        },
        setStatus: function(text) {
          console.log(text);
        },
      };
    </script>
<script async="" type="text/javascript" src="primordialsoup.js"></script>
    <script src="CodeMirror/lib/codemirror.js"></script>
    <link rel="stylesheet" href="CodeMirror/lib/codemirror.css">
    <script src="CodeMirror/addon/display/autorefresh.js"></script></div>   <script type="text/javascript">
      function scheduleTurn(timeout) {
        if (timeout >= 0) {
          setTimeout(function() {
            var timeout = Module._handle_message();
            scheduleTurn(timeout);
          }, timeout);
        }
      }

      var Module = {
        noInitialRun: true,
        noExitRuntime: true,
        onRuntimeInitialized: function() {
          var url = new URLSearchParams(window.location.search);
          var request = new XMLHttpRequest();
          request.open("GET", url.get("snapshot"), true);
          request.responseType = "arraybuffer";
          request.onload = function (event) {
            var jsBuffer = new Uint8Array(request.response);
            var cBuffer = _malloc(jsBuffer.length);
            writeArrayToMemory(jsBuffer, cBuffer);
            Module._load_snapshot(cBuffer, jsBuffer.length);
            _free(cBuffer);
            scheduleTurn(0);
          };
          request.send();
        },
        print: function(text) {
          if (arguments.length > 1) {
            text = Array.prototype.slice.call(arguments).join(" ");
          }
          console.log(text);
        },
        printErr: function(text) {
          if (arguments.length > 1) {
            text = Array.prototype.slice.call(arguments).join(" ");
          }
          console.error(text);
        },
        setStatus: function(text) {
          console.log(text);
        },
      };
    </script>
<script async type="text/javascript" src="primordialsoup.js"></script>
    <script src="CodeMirror/lib/codemirror.js"></script>
    <link rel="stylesheet" href="CodeMirror/lib/codemirror.css"></link>
    <script src="CodeMirror/addon/display/autorefresh.js"></script>