<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Shift Scope Analyser</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/ribbon.css" rel="stylesheet">
    <link href="css/css.css" rel="stylesheet">
    <link href="css/demo.css" rel="stylesheet">

    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro:400,700" rel="stylesheet" type="text/css"/>

    <!-- ace editor -->
    <script src="vendor/ace-builds/src-min/ace.js"></script>
    <script src="vendor/ace-builds/src-min/mode-javascript.js"></script>
    <script src="vendor/ace-builds/src-min/theme-monokai.js"></script>

    <script src="js/shift-parser.js"></script>
    <script src="js/shift-codegen.js"></script>
    <script src="js/shift-scope.js"></script>

    <style>
      #demo1 {
        resize: vertical;
      }
      #demo1 .editor {
        width: 50%;
        line-height: 15pt;
      }
      #demo1 .output-container {
        width: 50%;
      }
      .program-radio-label {
        font-size: medium;
      }
      #program-radio {
        margin-bottom: -10px;
      }
      .output {
        font-family: 'Source Code Pro';
        font-size: 10pt;
        color: #666;
        line-height: 15pt;
        padding: 1px 0 0 5px;
      }
      .code-binding, .code-identifier {
        font-family: 'Source Code Pro';
        font-size: 10pt;
        font-weight: bold;
        background-color: white;
        cursor: help;
        padding: 0 3px;
        border: 1px dotted #888;
        border-radius: 2px;
        color: black;
      }
      .var-read {
        background-color: #BE171F;
        color: white;
      }
      .var-write {
        background-color: #78835B;
        color: white;
      }
      .var-read.var-write {
        background-color: #1A697A;
        color: white;
      }
      .var-decl {
        background-color: #F6A935;
        color: black;
      }
      .var-delete {
        background-color: #EEE2AE;
        color: black;
      }
      .var-read, .var-write, .var-decl {
        border-color: black;
        border-style: solid;
      }
    </style>
  </head>

  <body>
    <div class="ribbon-container right">
      <div class="ribbon">
        <a href="https://github.com/shapesecurity/shift-scope-js" target="_blank">Fork me on GitHub</a>
      </div>
    </div>

    <div class="container">
      <div class="content">

        <div class="masthead">
          <h3><a href="./index.html" class="muted hub-link">part of the Shift suite</a></h3>
        </div>

        <div class="jumbotron">
          <h1><span class="shift">Shift</span> Scope Analyser</h1>
          <p class="lead">
            generates an ECMAScript program's scope tree from a Shift AST
          </p>
        </div>

        <hr />

        <section id="introduction">
          <h3>Introduction</h3>

          <p>
            The Shift Scope Analyser produces a data structure called a scope
            tree that represents all of the scoping information of a given
            program. Each element of the scope tree represents a single scope
            in the analysed program, and contains many pieces of information,
            including:
          </p>
          <ul>
            <li>the scope type (there are 12 of them!)
            <li>the AST node associated with the scope
            <li>variables declared within that scope, each of which points to its declarations and references
            <li>whether the scope contains a <code>with</code> statement or direct call to eval, making it dynamic
          </ul>
        </section>

        <section id="demo">
          <h3>Demo</h3>

          <p>
            The program entered on the left will be rendered on the right. Mousing over any identifier will highlight
            all other identifiers which refer to the same variable, color-coded by type:
            <span class="code-identifier var-decl">declarations</span>,
            <span class="code-identifier var-read">read&nbsp;references</span>,
            <span class="code-identifier var-write">write&nbsp;references</span>,
            <span class="code-identifier var-read var-write">read-write&nbsp;references</span>, and
            <span class="code-identifier var-delete">deletes</span>.
          </p>

          <p id="program-radio" class="text-center">
            <label class="radio inline program-radio-label">
              <input type="radio" name="program-radio" id="script-radio" value="script"> Script
            </label>
            <label class="radio inline program-radio-label">
              <input type="radio" name="program-radio" id="module-radio" value="module" checked> Module
            </label>
          </p>

          <div class="demo" id="demo1">
          <div class="editor" spellcheck="false">function bytes(n, maxBytes) {
  if (maxBytes == null) {
    maxBytes = Math.max(1, Math.ceil(Math.log2(n + 1) / 8));
  }
  var rv = Array(maxBytes);
  for (var bIndex = maxBytes - 1; bIndex &gt;= 0; --bIndex) {
    rv[bIndex] = n &amp; 0xFF;
    n &gt;&gt;&gt;= 8;
  }
  return rv;
}
</div>
            <div class="output-container">
              <div class="output" style="white-space: pre"></div>
              <div class="error-message"></div>
            </div>
            <script src="js/scope/main.js"></script>
          </div>
        </section>

        <section id="installation">
          <h3>Installation</h3>

          <pre><code class="nohighlight">npm install shift-scope</code></pre>
        </section>

        <section id="usage">
          <h3>Usage</h3>

          <pre><code class="javascript">import analyze from "shift-scope";
let globalScope = analyze(/* Shift AST */);</code></pre>

        </section>

      </div>

      <hr />

      <div class="footer">
        <p>&copy; Shape Security, Inc.</p>
      </div>
    </div>

  </body>
</html>
