allow conditionally binding to different roots in a legacy widget (#944)

src/components/taglib/TransformHelper/convertToComponent.js

@@ -6,14 +6,14 @@ var FLAG_HAS_BODY_EL = 2;
 var FLAG_HAS_HEAD_EL = 4;
 
 module.exports = function handleComponentBind(options) {
-    if (this.firstBind) {
+    let context = this.context;
+    let builder = this.builder;
+    
+    if (this.context.firstBind) {
         return;
     }
 
-    this.firstBind = true;
-
-    let context = this.context;
-    let builder = this.builder;
+    context.firstBind = true;
 
     let isLegacyComponent = this.isLegacyComponent = options.isLegacyComponent === true;
     let componentModule = options.componentModule;

test/deprecated-components-browser/fixtures/widget-bind-different-roots/index.js

@@ -0,0 +1,13 @@
+module.exports = require('marko/legacy-components').defineComponent({
+    template: require('./template.marko'),
+
+    getInitialState: function(input) {
+        return { interactive:input.interactive }
+    },
+
+    getTemplateData: function (state, input) {
+        return {
+            interactive: state.interactive
+        };
+    }
+});

test/deprecated-components-browser/fixtures/widget-bind-different-roots/template.marko

@@ -0,0 +1,8 @@
+<if(data.interactive)>
+    <button w-bind>
+        Interactive
+    </button>
+</if>
+<else>
+    <div w-bind>Non-interactive</div>
+</else>

test/deprecated-components-browser/fixtures/widget-bind-different-roots/test.js

@@ -0,0 +1,14 @@
+var expect = require('chai').expect;
+
+module.exports = function (helpers) {
+    var widget = helpers.mount(require('./index'), {
+        interactive: true
+    });
+
+    expect(widget.el).to.be.instanceOf(HTMLButtonElement);
+
+    widget.setState('interactive', false);
+    widget.update();
+
+    expect(widget.el).to.be.instanceOf(HTMLDivElement);
+};