polsevev/master
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added an example of parsing JS to AST

Browse source
This commit is contained in:
Rolf Martin Glomsrud 2024-05-29 20:25:02 +02:00
parent 234feb757c
commit 3808f97ef5
2 changed files with 36 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
build/report.pdf
View file

Binary file not shown.

36
chapter/ch2.tex
View file

@ -39,7 +39,35 @@ Abstract Syntax Trees (AST) is one of the most common representations used to re
Babel is a JavaScript toolchain, its main usage is converting ECMASCript 2015 and newer into backwards older versions of JavaScript. The conversion to older versions is done to increase compatibility of JavaScript in older environments such as older browsers.
Babel has a suite of libraries used to work with JavaScript source code, each library relies on Babels AST definition~\cite{BabelAST}. The AST specification Babel uses tries to stay as true to the ECMAScript standard as possible~\cite{BabelSpecCompliant}, which has made it a recommended parser to use for proposal transpiler implementations~\cite{TC39RecommendBabel}.
Babel has a suite of libraries used to work with JavaScript source code, each library relies on Babels AST definition~\cite{BabelAST}. The AST specification Babel uses tries to stay as true to the ECMAScript standard as possible~\cite{BabelSpecCompliant}, which has made it a recommended parser to use for proposal transpiler implementations~\cite{TC39RecommendBabel}. A simple example of how source code parsed into an AST with Babel looks like can be seen in Figure~\ref{ex:srcToAST}.
\begin{figure}[H]
\noindent\begin{minipage}{.45\textwidth}
\begin{lstlisting}[language={JavaScript}]
let name = 100;
\end{lstlisting}
\end{minipage}\hfil
\noindent\begin{minipage}{.45\textwidth}
\begin{center}
\begin{tikzpicture}[
squarednode/.style={rectangle, draw=red!60, fill=red!5, very thick, minimum size=2mm}, node distance=10mm and 5mm
]
\node[squarednode] (VarDecl) {VariableDeclaration};
\node[squarednode] (VarDeclarator) [below=of VarDecl] {VariableDeclarator};
\node[squarednode] (id) [below left= 10mm and -10mm of VarDeclarator] {Identifier};
\node[squarednode] (init) [below right= 10mm and -10mm of VarDeclarator] {NumericLiteral};
\draw[->] (VarDecl.south) -- (VarDeclarator.north);
\draw[->] (VarDeclarator.south) -- (id.north);
\draw[->] (VarDeclarator.south) -- (init.north);
\end{tikzpicture}
\end{center}
\end{minipage}\hfil
\caption{\label{ex:srcToAST} Example of source code parsed to Babel AST}
\end{figure}
Babel's mission is to transpile newer version of JavaScript into older versions that are more compatible with different environments. It has a rich plugin system to allow a myriad of features to be enabled or disabled. This makes the parser very versatile to fit different ways of working with JavaScript source code.
@ -48,6 +76,12 @@ Babels main feature is \texttt{@babel/parse}~\cite{BabelParser} and its plugins.
\section{Source code Querying}
Source code querying is a technique used to extract information from source code. Since source code is just structured text, one can treat it as a database, allowing for queries to be written and perform operations on that data.
Source code Querying enables developers to search through their code for specific patterns based on a query written. These queries can come in many different forms. Such as SQL-like queris, structured queries,
This kind of querying is very useful for programs such as Integrated Development Environments, source code transformations, and other tasks which require searching through code. An example of source code querying being used in an IDE is Jetbrains structural search and replace~\cite{StructuralSearchAndReplaceJetbrains}.
\section{Language Workbenches}