DEV: Correctly render data- attributes in widget hbs templates (#10376)

DEV: Correctly render data- attributes in widget hbs templates (#10376)

In virtualdom, element ‘properties’ are not completely synonymous with element ‘attributes’. In particular, data- properties will not be rendered as attributes. To ensure all attributes are passed through, we need to include them under an attributes key. For more info, see https://github.com/Matt-Esch/virtual-dom/blob/master/docs/vnode.md#custom-attributes-data-

diff --git a/lib/javascripts/widget-hbs-compiler.js b/lib/javascripts/widget-hbs-compiler.js
index 907ca44..5316bd3 100644
--- a/lib/javascripts/widget-hbs-compiler.js
+++ b/lib/javascripts/widget-hbs-compiler.js
@@ -178,20 +178,27 @@ class Compiler {
 
         if (node.attributes.length) {
           let attributes = [];
+          let properties = [];
+
           node.attributes.forEach(a => {
-            const name = a.name === "class" ? "className" : a.name;
-            if (a.value.type === "MustacheStatement") {
-              attributes.push(
-                `"${name}":${mustacheValue(a.value, this.state)}`
-              );
+            const name = a.name;
+            const value =
+              a.value.type === "MustacheStatement"
+                ? mustacheValue(a.value, this.state)
+                : `"${a.value.chars}"`;
+
+            if (a.name === "class") {
+              properties.push(`"className":${value}`);
             } else {
-              attributes.push(`"${name}":"${a.value.chars}"`);
+              attributes.push(`"${name}":${value}`);
             }
           });
 
-          const attrString = `{${attributes.join(", ")}}`;
+          properties.push(`"attributes":{${attributes.join(", ")}}`);
+          const propertiesString = `{${properties.join(", ")}}`;
+
           instructions.push(
-            `${parentAcc}.push(virtualDom.h('${node.tag}', ${attrString}, ${innerAcc}));`
+            `${parentAcc}.push(virtualDom.h('${node.tag}', ${propertiesString}, ${innerAcc}));`
           );
         } else {
           instructions.push(
diff --git a/test/javascripts/widgets/widget-test.js b/test/javascripts/widgets/widget-test.js
index 5fcc1f2..a4c421a 100644
--- a/test/javascripts/widgets/widget-test.js
+++ b/test/javascripts/widgets/widget-test.js
@@ -58,6 +58,20 @@ widgetTest("hbs template - with tagName", {
   }
 });
 
+widgetTest("hbs template - with data attributes", {
+  template: `{{mount-widget widget="hbs-test" args=args}}`,
+
+  beforeEach() {
+    createWidget("hbs-test", {
+      template: hbs`<div class='mydiv' data-my-test='hello world'></div>`
+    });
+  },
+
+  test(assert) {
+    assert.equal(find("div.mydiv").data("my-test"), "hello world");
+  }
+});
+
 widgetTest("buildClasses", {
   template: `{{mount-widget widget="classname-test" args=args}}`,
 

GitHub sha: 8c038688

This commit appears in #10376 which was approved by eviltrout. It was merged by davidtaylorhq.