JS-Interpreterとは、JavaScriptで記述するサンドボックス化されたJavaScriptインタープリターです。Javascriptコードを実行する時には、任意のJavaScriptコードを１行ずつ実行に行きます。JavaScript環境から完全に分離されています。JS-Interpreterのインスタンスが複数に作られた場合は、Web稼働環境(ブラウザーなんとか)を使用せずに複数のJavaScriptコード同時にマルチスレッドで実行することが可能です。

環境準備

以下の2つのJavaScriptソースファイルをインポートします。

<script src="acorn.js"></script> 
<script src="interpreter.js"></script>

または、圧縮バンドルを使用します。

<script src = "acorn_interpreter.js"> </ script>

使い方１：外部API無し

外部APIが使わない場合は、JS-Interpreterの初期化関数を使用せずに、インスタンスを作ります。
Javascriptコードをステップごとに実行するには、step関数をfalseを返すまでに繰り返し呼び出します。
コードがが無限ループではなく安全なコードだって言うことが分かれば、run関数を1回のみ呼び出してコードを最後までに実行することが構わないです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Step Execution with JS Interpreter</title>
  <script src="acorn_interpreter.js"></script>
</head>
<body>
    <button onclick="runCode()" id="runButton">Run JavaScript</button>
    <button onclick="stepCode()" id="stepButton">Step JavaScript</button>
 <script>
	var runButton = document.getElementById('runButton');
	var stepButton = document.getElementById('stepButton');
	var myInterpreter = null;
	var myCode = 'var a=1; for(var i=0; i<4; i++ ){a=a*i;};';
    myInterpreter = new Interpreter(myCode);
	function stepCode() {
		if(this.myInterpreter.step()){
			window.setTimeout(stepCode,0);
	   	}
	}
	function runCode() {
		myInterpreter.run();
	}
</script>
</body>
</html>

使い方2：外部APIあり（標準Javascriptコードの場合）

外部APIが使った場合は、JS-Interpreterの初期化関数を利用してインスタンスを作ります。
ただし、例えば、外部APIがalertようなJavascriptの標準コードであれば、JS-Interpreterの初期化関数を作成する時には、Javascriptのコードを定義することが必要だけです

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Step Execution with JS Interpreter</title>
  <script src="acorn_interpreter.js"></script>
</head>
<body>
    <button onclick="runCode()" id="runButton">Run JavaScript</button>
    <button onclick="stepCode()" id="stepButton">Step JavaScript</button>
 <script>
	var runButton = document.getElementById('runButton');
	var stepButton = document.getElementById('stepButton');
	var myInterpreter = null;
	var myCode = 'var a=1; for(var i=0; i<4; i++ ){a=a*i;alert(i);};';
	//初期化関数
	var initFunc = function(interpreter, scope) {
		var wrapper = function(text) {
        	return alert(text);
      	};
      	interpreter.setProperty(scope, 'alert', interpreter.createNativeFunction(wrapper));		
    };
    myInterpreter = new Interpreter(myCode, initFunc);
	function stepCode() {
		if(this.myInterpreter.step()){
			window.setTimeout(stepCode,0);
	   	}
	}
	function runCode() {
		myInterpreter.run();
	}
</script>
</body>
</html>

使い方2：外部APIあり（関数が自分定義した場合）

外部APIがJavascriptの標準コードではなく、自分で定義した関数を実行する場合には、JS-Interpreterの初期化関数を作成する時に、自分の関数を定義することが必要で、さらに、この関数の処理の詳細も記述する関数も定義しないと行けません

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Step Execution with JS Interpreter</title>
  <script src="acorn_interpreter.js"></script>
</head>
<body>
    <button onclick="runCode()" id="runButton">Run JavaScript</button>
    <button onclick="stepCode()" id="stepButton">Step JavaScript</button>
 <script>
	var runButton = document.getElementById('runButton');
	var stepButton = document.getElementById('stepButton');
	var myInterpreter = null;

	var myCode = 'var a=1; for(var i=0; i<4; i++ ){a=a*i;console_log(i);};';

	var initFunc = function(interpreter, scope) {
		var wrapper = function(text) {
        	return console_log(text);
      	};
      	interpreter.setProperty(scope, 'console_log', interpreter.createNativeFunction(wrapper));
    };
    myInterpreter = new Interpreter(myCode, initFunc);
	function stepCode() {
		if(this.myInterpreter.step()){
			window.setTimeout(stepCode,0);
	   	}
	}
	function runCode() {
		myInterpreter.run();
	}
	function console_log(value){
		console.log(value.data);
	}
</script>
</body>
</html>

実行結果は下記です。