feat: bound attributes

(cherry picked from commit 7287b94)

src/states/ATTRIBUTE.ts

@@ -137,7 +137,15 @@ export const ATTRIBUTE = Parser.createState({
   char(ch, code, attr) {
     if (isWhitespaceCode(code)) {
       return;
-    } else if (code === CODE.EQUAL) {
+    } else if (
+      code === CODE.EQUAL ||
+      (code === CODE.COLON && this.lookAtCharCodeAhead(1) === CODE.EQUAL)
+    ) {
+      if (code === CODE.COLON) {
+        attr.bound = true;
+        this.skip(1);
+      }
+
       // TODO: make expressions consume beginning whitespace?
       this.consumeWhitespace();
       this.enterState(STATE.EXPRESSION, { 
@@ -166,9 +174,11 @@ export const ATTRIBUTE = Parser.createState({
       this.enterState(STATE.EXPRESSION, { 
         part: "NAME",
         terminatedByWhitespace: true, 
+        skipOperators: true,
         terminator: [
           this.isConcise ? "]" : "/>", 
           this.isConcise ? ";" : ">", 
+          ":=",
           "=", 
           ",", 
           "("

src/states/EXPRESSION.ts

@@ -106,11 +106,10 @@ export const EXPRESSION = Parser.createState({
 
   char(ch, code, expression) {
     let depth = expression.groupStack.length;
-    let parentState = expression.parentState;
 
     if (depth === 0) {
       if (expression.terminatedByWhitespace && isWhitespaceCode(code)) {
-        var operator = this.checkForOperator();
+        var operator = !expression.skipOperators && this.checkForOperator();
 
         if (operator) {
           expression.isStringLiteral = false;

src/states/OPEN_TAG.ts

@@ -188,14 +188,17 @@ export const OPEN_TAG = Parser.createState({
             if (nextCharCode === CODE.PERIOD || nextCharCode === CODE.NUMBER_SIGN) {
               this.enterState(STATE.EXPRESSION, {
                 part: "NAME",
+                skipOperators: true,
                 terminatedByWhitespace: true,
                 terminator: [
                   this.isConcise ? ";" : ">",
                   "/",
                   "(",
                   "|",
                   ".",
-                  "#"
+                  "#",
+                  "=",
+                  ":="
                 ]
               });
             }
@@ -394,10 +397,11 @@ export const OPEN_TAG = Parser.createState({
     } else if (code === CODE.FORWARD_SLASH && !this.currentOpenTag.attributes.length) {
       this.enterState(STATE.EXPRESSION, {
         part: "VARIABLE",
+        skipOperators: true,
         terminatedByWhitespace: true,
         terminator: this.isConcise
-          ? [";", "(", "|", "="]
-          : [">", "/>", "(", "|", "="]
+          ? [";", "(", "|", "=", ":="]
+          : [">", "/>", "(", "|", "=", ":="]
       });
     } else if (code === CODE.OPEN_PAREN && !this.currentOpenTag.attributes.length) {
       if (this.currentOpenTag.argument != null) {

src/states/TAG_NAME.ts

@@ -119,7 +119,17 @@ export const TAG_NAME = Parser.createState({
 
       tagName.text += nextCh;
       tagName.rawValue += ch + nextCh;
-    } else if (isWhitespaceCode(code) || code === CODE.EQUAL || code === CODE.OPEN_PAREN || code === CODE.FORWARD_SLASH || code === CODE.PIPE || (this.isConcise ? code === CODE.SEMICOLON : code === CODE.CLOSE_ANGLE_BRACKET)) {
+    } else if (
+      isWhitespaceCode(code) ||
+      code === CODE.EQUAL ||
+      (code === CODE.COLON && this.lookAtCharCodeAhead(1) === CODE.EQUAL) ||
+      code === CODE.OPEN_PAREN ||
+      code === CODE.FORWARD_SLASH ||
+      code === CODE.PIPE ||
+      (this.isConcise
+        ? code === CODE.SEMICOLON
+        : code === CODE.CLOSE_ANGLE_BRACKET)
+    ) {
       this.exitState();
     } else if (code === CODE.PERIOD || code === CODE.NUMBER_SIGN) {
       if (!tagName.shorthandCharCode) {

src/util/constants.ts

@@ -22,6 +22,7 @@ export enum CODE {
   PERCENT = 37,
   PERIOD = 46,
   COMMA = 44,
+  COLON = 58,
   SEMICOLON = 59,
   NUMBER_SIGN = 35,
   PIPE = 124,

src/util/notify-util.ts

@@ -136,6 +136,7 @@ export function createNotifiers(parser, listeners) {
               endPos: attr.endPos,
               argument: attr.argument,
               method: attr.method,
+              bound: attr.bound,
             };
 
             if (attr.hasOwnProperty("literalValue")) {

test/autotest/attr-bound/expected.html

@@ -0,0 +1,23 @@
+<a x=BOUND(foo)>
+    text:"test"
+</a>
+text:"\n"
+<a x=BOUND(foo)>
+    text:"test"
+</a>
+text:"\n"
+<a DEFAULT=BOUND(foo)>
+    text:"test"
+</a>
+text:"\n"
+<a DEFAULT=BOUND(foo)>
+    text:"test"
+</a>
+text:"\n"
+<a VAR=(bar) DEFAULT=BOUND(foo)>
+    text:"test"
+</a>
+text:"\n"
+<a VAR=(bar) DEFAULT=BOUND(foo)>
+    text:"test"
+</a>

test/autotest/attr-bound/input.htmljs

@@ -0,0 +1,6 @@
+<a x:=foo>test</a>
+<a x := foo>test</a>
+<a:=foo>test</a>
+<a := foo>test</a>
+<a/bar:=foo>test</a>
+<a/bar := foo>test</a>

test/autotest/tag-var-declaration/expected.html

@@ -12,7 +12,7 @@
 <let VAR=(foo) DEFAULT=1 SELF_CLOSED>
 </let>
 text:"\n"
-<let VAR=(foo + 1) SELF_CLOSED>
+<let VAR=(foo) +=(EMPTY) 1=(EMPTY) SELF_CLOSED>
 </let>
 text:"\n"
 <let VAR=({ x, y }) SELF_CLOSED>

test/util/TreeBuilder.js

@@ -34,7 +34,11 @@ function attributeAssignmentToString(attr, includeLiteralValues) {
     var result = "";
 
     if (attr.value) {
-        result += '=' + attr.value;
+        if (attr.bound) {
+            result += '=BOUND(' + attr.value + ")";
+        } else {
+            result += '=' + attr.value;
+        }
     } else if (!attr.argument) {
         result += '=(EMPTY)';
     }
@@ -285,7 +289,6 @@ class TreeBuilder {
                     if (event.concise) {
                         expect(src.substring(startPos, startPos + tagName.length)).to.equal(tagName);
                     } else {
-                        debugger;
                         expect(src.substring(startPos, startPos + 1 + tagName.length)).to.equal('<' + tagName);
 
                         if (event.selfClosed) {