title: Writing a transpiler to the point where the actual mapping takes place
body: <p>I want to understand how a transpiler works. The best to do this is to write one ofcourse.</p>
  
  <p>I've been looking into a few resources to understand how this works, theoretically. And i understand the following:</p>
  
  <p>From what i understand i basically need to write two classes:</p>
  
  <ol>
  <li>A Lexical Analyzer</li>
  <li>A Parser</li>
  </ol>
  
  <h2>Lexical Analyzer</h2>
  
  <p>The <code>Lexical Analyzer</code> takes the source code of a file as input (the input stream). For example the following code:</p>
  
  <pre><code>if (someVar == 20) {
      MessageBox("Hello World!");
  }
  </code></pre>
  
  <p>Then the <code>Lexical Analyzer</code> creates chunks of data out of this:</p>
  
  <pre><code>[if]
  [ ]
  [(]
  [someVar]
  [ ]
  [==]
  [ ]
  [20]
  [)]
  [ ]
  [{]
  [\n]
  [\t]
  [MessageBox]
  [(]
  ["]
  [Hello World!]
  ["]
  [)]
  [;]
  [\n]
  [\t]
  [}]
  </code></pre>
  
  <p>This will then be sent to the <code>Parser</code> class.</p>
  
  <h2>The Parser</h2>
  
  <p>The <code>Parser</code> class will then read all the chunks of tokens(?) and specify what each token(?) means. It will assign a certain type to it. So the result of the above string will be identified as something like:</p>
  
  <pre><code>[if]      // Keyword
  [ ]       // Whitespace
  [(]       // L_Parenthesis
  [someVar] // Identifier
  [ ]       // Whitespace
  [==]      // Operator
  [ ]       // Whitespace
  [20]      // Number (or Integer)
  [)]       // R_Parenthesis
  [ ]       // Whitespace
  [{]       // L_Bracket
  [\n]      // Whitespace
  [\t]      // Whitespace
  [MessageBox] // Keyword
  [(]       // L_Parenthesis
  ["]       // Not yet sure where this would go
  [Hello World!] // Same..
  ["]       // Same...
  [)]       // R_Parenthesis
  [;]       // Semicolon
  [\n]      // Whitespace
  [\t]      // Whitespace
  [}]       // R_Bracket
  </code></pre>
  
  <p>As you can see, i haven't fully sorted out what types exactly goes where. But this should be the basic idea.</p>
  
  <p>Now the next thing i'd like to do, is convert that source code to another source code, thus transpiling it. But how does that work? I can't find any direct tutorials, explanations about that.</p>
  
  <p>Suppose i have the following <strong>custom</strong> code:</p>
  
  <pre><code>def myVar = true;
  
  public function myFunc ( def arg1 )
  {
      if ( arg1 == true ) {
          MessageBox("My Message");
      }
  }
  </code></pre>
  
  <p>Then the Lexical process will parse this code. Then how do i convert that to something like Javascript?</p>
  
  <pre><code>var myVar = true;
  
  myFunc = function ( arg1 )
  {
      if ( arg1 == true ) {
          alert("My Message");
      }
  }
  </code></pre>
  
  <p>How does the mapping work, going from my custom cdoe, to a code like Javascript? Like, the function declaration. My <code>Lexical</code> parser has the following: <code>public</code>, <code>function</code>, <code>myFunc</code>. How can it know that it should map that to: <code>myFunc = function</code> ...?</p>
  
  <p>Anyone any good and practical information on how this should be done in an <code>transpiler</code>? Or am i going the wrong to by writing a <code>lexical</code> analyzer for this job?</p>
  
  <h2>Edit</h2>
  
  <p>So obviously my idea how the lexer / parser works isn't exactly right. Any "pseudo" information on how this process works (with pseudo examples) is more than welcome.</p>