ts-simple-ast

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ts-simple-ast - Performance</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link rel="stylesheet" href="/assets/css/style.css?v=502728dc7b09041e36b06c50f79a13adbfb6f1b2">  </head> <body> <div class="main"> <header class="container"> <div class="row"> <h1 onclick="document.location.href = '/'" class="headerLink">ts-simple-ast</h1>  </div> </header> <div class="container"> <div class="row"> <div class="col-md-3"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> </button> <nav class="sidebar-nav" id="navbarSupportedContent"> <ul class="navbar-nav navbar-default"> <li class="nav-item"> <a class="nav-link" href="/">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/setup">Setup</a> </li> <li class="nav-item"> <a class="nav-link" href="/navigation">Navigation</a> </li> <li class="nav-item active"> <a class="nav-link" href="/manipulation">Manipulation</a> <ul> <li class=""><a href="/manipulation/settings">Settings</a></li> <li class=""><a href="/manipulation/renaming">Renaming</a></li> <li class=""><a href="/manipulation/removing">Removing</a></li> <li class=""><a href="/manipulation/order">Order</a></li> <li class=""><a href="/manipulation/code-writer">Code Writer</a></li> <li class="active"><a href="/manipulation/performance">Performance</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/emitting">Emitting</a> </li> <li class=""> <a class="nav-link" href="/details/index">Details</a> </li> <li class="nav-item"> <a class="nav-link" href="/utilities">Utilities</a> </li> <li class="nav-item"> <a class="nav-link" href="http://github.com/dsherret/ts-simple-ast">View on GitHub</a> </li> </ul> </nav> </div> <section class="container-fluid col-md-9"> <h2 id="performance">Performance</h2> There’s a lot of opportunity for performance improvements. The library originally started off favouring correctness, but it’s now starting to switch to improving performance. Issues: <a href="https://github.com/dsherret/ts-simple-ast/issues/224">#224</a>, <a href="https://github.com/dsherret/ts-simple-ast/issues/141">#141</a>, <a href="https://github.com/dsherret/ts-simple-ast/issues/142">#142</a> <h2 id="overview">Overview</h2> This library makes manipulations easy for you by keeping track of how the underlying syntax tree changes between manipulations. Behind the scenes, when you manipulate the AST: <ol> <li>A new source file is created using the TypeScript compiler.</li> <li>The previously navigated nodes have their underlying compiler nodes replaced with the new compiler nodes.</li> </ol> It’s why you can do this: <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>// sourcefile contains: interface Person { name: string; } const personInterface = sourceFile.getInterfaceOrThrow("Person"); const nameProperty = personInterface.getPropertyOrThrow("name"); nameProperty.setType("number"); nameProperty.getText(); // "name: number;" </code></pre> </div> Instead of having to renavigate the tree after each manipulation: <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>// thankfully the library does not work this way let personInterface = sourceFile.getInterfaceOrThrow("Person"); let nameProperty = personInterface.getPropertyOrThrow("name"); nameProperty.setType("number"); nameProperty.getText(); // "name: string;" personInterface = sourceFile.getInterfaceOrThrow("Person"); nameProperty = personInterface.getPropertyOrThrow("name"); nameProperty.getText(); // "name: number;" </code></pre> </div> When thinking about performance, the key point here is that if you have a lot of previously navigated nodes and a very large file, then manipulation might start to become sluggish. <h3 id="forgetting-nodes-advanced">Forgetting Nodes (Advanced)</h3> The main way to improve performance when manipulating, is to “forget” a node when you’re done with it. <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>personInterface.forget(); </code></pre> </div> That will stop tracking the node and all its previously navigated descendants (ex. in this case, <code class="highlighter-rouge">nameProperty</code> as well). It won’t be updated when manipulation happens again. Note that after doing this, the node will throw an error if one of its properties or methods is accessed. <h3 id="forget-blocks-advanced">Forget Blocks (Advanced)</h3> It’s possible to make sure all created nodes within a block are forgotten: <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>import {Ast, NamespaceDeclaration, InterfaceDeclaration, ClassDeclaration} from "ts-simple-ast"; const ast = new Ast(); const text = "namespace Namespace { interface Interface {} class Class {} }"; const sourceFile = ast.createSourceFile("file.ts", text); let namespaceDeclaration: NamespaceDeclaration; let interfaceDeclaration: InterfaceDeclaration; let classDeclaration: ClassDeclaration; ast.forgetNodesCreatedInBlock(remember => { namespaceDeclaration = sourceFile.getNamespaceOrThrow("Namespace"); interfaceDeclaration = namespaceDeclaration.getInterfaceOrThrow("Interface"); classDeclaration = namespaceDeclaration.getClassDeclarationOrThrow("Class"); // you can mark nodes to remember outside the scope of this block... // this will remember the specified node and all its ancestors remember(interfaceDeclaration); // or pass in multiple nodes }); namespaceDeclaration.getText(); // ok, child was marked to remember interfaceDeclaration.getText(); // ok, was explicitly marked to remember classDeclaration.getText(); // throws, was forgotten </code></pre> </div> Also, do not be concerned about nesting forget blocks. That is perfectly fine to do: <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>ast.forgetNodesCreatedInBlock(() => { namespaceDeclaration = sourceFile.getNamespaceOrThrow("Namespace"); interfaceDeclaration = namespaceDeclaration.getInterfaceOrThrow("Interface"); ast.forgetNodesCreatedInBlock(remember => { classDeclaration = namespaceDeclaration.getClassDeclarationOrThrow("Class"); remember(namespaceDeclaration); }); classDeclaration.getText(); // throws, was forgotten outside the block above interfaceDeclaration.getText(); // ok, hasn't been forgotten yet }); namespaceDeclaration.getText(); // ok, was marked to remember in one of the blocks interfaceDeclaration.getText(); // throws, was forgotten classDeclaration.getText(); // throws, was forgotten </code></pre> </div> <h4 id="async">Async</h4> This method supports async and await: <div class="language-ts highlighter-rouge"><pre class="highlight"><code>await ast.forgetNodesCreatedInBlock(async remember => { // do stuff }); </code></pre> </div> </section> </div> </div> <footer> </footer> </div> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>  </body> </html>