Allow using variables as attribute values

src/compiler.js

 module.exports = class Compiler {
-  constructor(tree) {
+  constructor(tree, context) {
     this.tree = tree
+    this.context = context
     this.result = ''
   }
 
   compile() {
     this.tree.forEach(node => {
       if (node.type === 'functionCall') {
-        const attributes = node.args.map(arg => `${arg.attributeName}="${arg.attributeValue}"`)
-        const compiler = new Compiler(node.subtree)
+        const attributes = node.args.map(arg => `${arg.attributeName}="${this.compileAttribute(arg.attributeValue)}"`)
+        const compiler = new Compiler(node.subtree, this.context)
         const content = compiler.compile()
         this.result += `
           <${node.functionName}${attributes.length ? ' ' : ''}${attributes.join(' ')}>
             ${content}
           </${node.functionName}>
         `
-      } else if (node.type === 'text') {
+      } else if (node.type === 'string') {
         this.result += node.content
+      } else if (node.type === 'identifier') {
+        this.result += this.lookup(node.name)
       }
     })
 
     return this.result
   }
+
+  compileAttribute(attribute) {
+    if (attribute.type === 'string') {
+      return attribute.content
+    } else if (attribute.type === 'identifier') {
+      return this.lookup(attribute.name)
+    }
+  }
+
+  lookup(name) {
+    return this.context[name]
+  }
 }

src/parser.js

         elementNode.args.push(this.attribute())
       } else if (this.tokenStream.peek().type === tokenTypes.OPAREN) {
         elementNode.subtree.push(this.expr())
+      } else if (this.tokenStream.peek().type === tokenTypes.LITERAL) {
+        elementNode.subtree.push(this.identifier())
       } else if (this.tokenStream.peek().type === tokenTypes.QUOTE) {
-        elementNode.subtree.push(new Node({
-          type: 'text',
-          content: this.string()
-        }))
+        elementNode.subtree.push(this.quotedString())
       }
     }
 
   attribute() {
     let attributeNode = new Node()
     attributeNode.attributeName = this.tokenStream.eat(tokenTypes.ATTRIBUTE).value
-    attributeNode.attributeValue = this.string()
+    if (this.tokenStream.peek().type === tokenTypes.QUOTE) {
+      attributeNode.attributeValue = this.quotedString()
+    } else if (this.tokenStream.peek().type === tokenTypes.LITERAL) {
+      attributeNode.attributeValue = this.identifier()
+    }
+
     return attributeNode
   }
 
+  identifier() {
+    const identifier = this.tokenStream.eat(tokenTypes.LITERAL)
+    return new Node({
+      type: 'identifier',
+      name: identifier.value
+    })
+  }
+
+  quotedString() {
+    return new Node({
+      type: 'string',
+      content: this.string()
+    })
+  }
+
   string() {
     this.tokenStream.eat(tokenTypes.QUOTE)
     let stringValue = this.tokenStream.eat(tokenTypes.LITERAL).value

test/compiler.js

     '<div class="foobar"><p class="bazquux">Lorem ipsum dolor sit amet.</p></div>'
   )
 })
+
+test("renders variables according to passed-in context", t => {
+  t.plan(1)
+  const lexer = new Lexer()
+  const tokenStream = lexer.scan(`
+    (div :class classOne
+      (p :class classTwo bodyText))
+  `)
+  const parser = new Parser(tokenStream)
+  const tree = parser.parse()
+  const compiler = new Compiler(tree, {
+    classOne: 'foobar',
+    classTwo: 'bazquux',
+    bodyText: 'Lorem ipsum dolor sit amet.'
+  })
+  const result = compiler.compile()
+  t.deepEqual(
+    result.replace(/\n/g, '').replace(/  +/g, ''),
+    '<div class="foobar"><p class="bazquux">Lorem ipsum dolor sit amet.</p></div>'
+  )
+})

test/parser.js

         args: [
           new Node({
             attributeName: 'class',
-            attributeValue: 'foobar',
+            attributeValue: new Node({type: 'string', content: 'foobar'}),
           })
         ],
         subtree: [
             args: [
               new Node({
                 attributeName: 'class',
-                attributeValue: 'bazquux',
+                attributeValue: new Node({type: 'string', content: 'bazquux'}),
               })
             ],
             subtree: [],