Skip to content

Instantly share code, notes, and snippets.

@keeyip keeyip/index.html
Created Oct 30, 2013

Embed
What would you like to do?
UI for Ast Matcher
<style>
body {
background:hsl(200,20%,50%);
font-family:inconsolata-dz;
font-size:12px;
}
em {
font-style:itlaic;
font-weight: bold;
}
note {
font-family:verdana;
color: hsl(0,0%,30%);
background:hsl(50,20%,98%);
border: solid 1px hsl(200,80%,40%);
box-shadow: 0 1px 1px hsla(200,80%,50%,0.3), 0 0 2px 1px hsla(200,80%,50%,0.2), inset 0 0 5px hsla(0,0%,0%,0.2);
padding: 8px;
border-radius:8px;
display:block;
}
* {
box-sizing: border-box;
padding: 4px;
border-radius: 2px;
}
traverse {
background:white;
color: hsl(0,0%,50%);
display:inline-block;
vertical-align:top;
margin:0;
padding:8px 4px;
padding-bottom: 0;
}
begin {
display:block;
margin-bottom: 4px;
}
match {
display:block;
border: solid 1px hsl(0,0%,70%);
border-radius:4px;
padding: 4px 0;
margin-bottom:8px;
background:hsl(0,0%,90%);
box-shadow: inset 0 1px 2px hsla(0,0%,0%,0.3);
}
condition_group {
display:block;
padding: 8px;
line-height: 200%;
background: hsl(50,50%,90%);
margin: 8px;
border: solid 1px hsl(50,50%,70%);
box-shadow: 0 1px 1px hsla(0,0%,0%,0.3);
border-radius:8px;
}
condition {
display:block;
padding: 8px;
line-height: 200%;
}
action {
margin-top:4px;
display:block;
padding: 8px;
line-height: 200%;
}
var {
box-shadow: 0 1px 3px hsla(0,0%,0%,0.3);
border-radius: 4px;
font-style:normal;
}
indent {
display:block;
margin-left: 30px;
}
.object1 {
background:blue;
color:white;
}
.object2 {
background:hsl(280,50%,40%);
color:white;
}
.object3 {
background:hsl(300,90%,40%);
color:white;
}
.object4 {
background:darkblue;
color:white;
}
.array {
background:hsl(30,80%,50%);
color:white;
}
primitive {
color:black;
background:hsl(0,0%,85%);
box-shadow: inset 0 1px 1px hsla(0,0%,0%,0.3);
display: block;
}
</style>
<body>
<traverse>
<begin>New <var class="array">scopes : [&lt;Scope&gt;]</var></begin>
<begin>Alias <var class="object3">current_scope</var></begin>
<match>
<condition_group>
<note>Does this node denote a scope?</note>
<condition_group data-tooltip-html="Does this node denote a <em>variable</em> scope?">
<condition><var class="object1">node.type</var> &isin; [<div style="display:inline-block; vertical-align:top"><primitive>Program</primitive> <primitive>FunctionDeclaration</primitive> <primitive>FunctionExpression</primitive></div>]</condition>
</condition_group>
<condition><var class="object1">node.type</var> &isin; [<div style="display:inline-block; vertical-align:top"><primitive>WithStatement</primitive> <primitive>CatchClause</primitive></div>]</condition>
</condition_group>
<action>New <var class="object2">scope : Scope</var>
<indent><var class="object2">scope.node</var> &larr; <var class="object1">node</var></indent>
<indent><var class="object2">scope.outer</var> &larr; <var class="object3">current_scope</var></indent>
</action>
<action><var class="array">scopes</var> [&larr;] <var class="object2">scope</var></action>
<action><var class="object3">current_scope</var> &larr; <var class="object2">scope</var></action>
</match>
</traverse>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.