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 - Manipulating the AST</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=""><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="manipulating-the-ast">Manipulating the AST</h2> Most information about manipulation can be found in the <a href="../details">Details</a> section. This section only contains general information about manipulation. <h3 id="replacing-any-node-with-new-text">Replacing any node with new text</h3> This can be achieved with the <code class="highlighter-rouge">.replaceWithText(...)</code> method that exists on any node. <h4 id="example">Example</h4> Given the following code: <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>let myVariable = Some.Property.Access.Expression; </code></pre> </div> You can replace the property access expression with new text by doing the following: <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>const originalInitializer = sourceFile.getVariableDeclarations()[0].getInitializerOrThrow(); const newInitializer = originalInitializer.replaceWithText("MyReference"); </code></pre> </div> That will make the source file hold the following text: <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>let myVariable = MyReference; </code></pre> </div> Note that <code class="highlighter-rouge">originalInitializer</code> will be forgotten after calling <code class="highlighter-rouge">.replaceWithText(...)</code> on it—an error will be thrown if you try to use it. You will have to use the new node returned by that method. <h3 id="adding-inserting-and-removing-statements">Adding, inserting, and removing statements</h3> Statements can be added, inserted, or removed from nodes with a body (ex. functions, methods, namespaces, source files). <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>// add statements const statements = sourceFile.addStatements("console.log(5);\nconsole.log(6);"); // insert statements (index is the child index to insert at) const statements = sourceFile.insertStatements(3, "console.log(5);\nconsole.log(6);"); // remove statements sourceFile.removeStatements([1, 3]); // removes statements from index 1 to 3 sourceFile.removeStatement(1); // removes statement at index 1 </code></pre> </div> When adding or inserting, you can also write using a <a href="code-writer">code writer</a>: <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>functionDeclaration.addStatements(writer => { writer.write("if (true)").block(() => { writer.write("something;"); }); }); </code></pre> </div> <h3 id="inserting-replacing-and-removing-any-text">Inserting, replacing, and removing any text</h3> In some scenarios, a simple to use API might not have been implemented. If you find that’s the case, open an issue on GitHub. In the meantime, you can insert, replace, and remove text using the following methods, but generally you will want to avoid using these if possible: <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>// insert text sourceFile.insertText(0, "// some comment\n"); // replace text sourceFile.replaceText([3, 7], "a"); // "// a comment\n" // remove text sourceFile.removeText([sourceFile.getPos(), sourceFile.getEnd()]); </code></pre> </div> These methods are also available on any node that has a body (functions, classes, enums, etc.) <h4 id="warning">Warning</h4> If you use <code class="highlighter-rouge">insertText</code>, <code class="highlighter-rouge">replaceText</code>, or <code class="highlighter-rouge">removeText</code>, all previously navigated descendants of the node will be forgotten and not be available for use—an error will be thrown if you try to use them. You will have to renavigate to those nodes. For example: <div class="language-typescript highlighter-rouge"><pre class="highlight"><code>let classDeclaration = sourceFile.addClass({ name: "MyClass" }); sourceFile.insertText(0, "// some comment\n"); // this will throw... classDeclaration.getInstanceProperties(); // you'll need to get the reference again: classDeclaration = sourceFile.getClass("MyClass")!; </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>