Fixes #121 - Allow for w-preserve-attrs to enable preservation of att…

…ributes

CHANGELOG.md

@@ -237,6 +237,16 @@ exports.renderer = function(input, out) {
 
 # 5.x
 
+## 5.3.x
+
+### v5.3.0
+
+- Fixes [#121](https://github.com/marko-js/marko-widgets/issues/121) - Allow for w-preserve-attrs to enable preservation of attributes:
+
+```html
+<div w-preserve-attrs="style,class"></div>
+```
+
 ## 5.2.x
 
 ### v5.2.2

lib/Widget.js

@@ -556,6 +556,16 @@ Widget.prototype = widgetProto = {
                 var id = fromEl.id;
                 var existingWidget;
 
+                var preservedAttrs = toEl.getAttribute('data-w-preserve-attrs');
+                if (preservedAttrs) {
+                    preservedAttrs = preservedAttrs.split(/\s*[,]\s*/);
+                    for (var i=0; i<preservedAttrs.length; i++) {
+                        var preservedAttrName = preservedAttrs[i];
+                        var preservedAttrValue = fromEl.getAttribute(preservedAttrName);
+                        toEl.setAttribute(preservedAttrName, preservedAttrValue);
+                    }
+                }
+
                 if (widgetsContext && id) {
                     if (widgetsContext.isPreservedEl(id)) {
 

marko-taglib.json

@@ -65,6 +65,10 @@
                 "w-preserve-body-if": {
                     "type": "expression",
                     "preserve-name": true
+                },
+                "w-preserve-attrs": {
+                    "type": "string",
+                    "preserve-name": true
                 }
             },
             "transformer": "./taglib/widgets-transformer.js"

package.json

@@ -61,5 +61,5 @@
         "./lib/init-widgets.js": "./lib/init-widgets-browser.js",
         "./lib/defineWidget.js": "./lib/defineWidget-browser.js"
     },
-    "version": "5.2.3"
+    "version": "5.3.0"
 }

taglib/TransformHelper/handleWidgetPreserveAttrs.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2011 eBay Software Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function handleWidgetEvents() {
+
+    var preserveAttrsExpression = this.node.getProperty('w-preserve-attrs');
+    this.node.removeProperty('w-preserve-attrs');
+    this.node.setAttribute('data-w-preserve-attrs', preserveAttrsExpression);
+}
+
+module.exports = handleWidgetEvents;

taglib/TransformHelper/index.js

@@ -76,6 +76,7 @@ TransformHelper. prototype = {
     getContainingWidgetNode: require('./getContainingWidgetNode'),
     handleWidgetEvents: require('./handleWidgetEvents'),
     handleWidgetPreserve: require('./handleWidgetPreserve'),
+    handleWidgetPreserveAttrs: require('./handleWidgetPreserveAttrs'),
     handleWidgetBody: require('./handleWidgetBody'),
     handleWidgetBind: require('./handleWidgetBind'),
     handleWidgetExtend: require('./handleWidgetExtend'),

taglib/widgets-transformer.js

@@ -42,6 +42,10 @@ exports.process =function (node, compiler, template) {
         transformHelper.handleWidgetPreserve();
     }
 
+    if (nodeProps['w-preserve-attrs'] != null) {
+        transformHelper.handleWidgetPreserveAttrs();
+    }
+
     if (nodeProps['w-body'] != null) {
         transformHelper.handleWidgetBody();
     }

test/client/spec-widget.js

@@ -718,4 +718,13 @@ describe('widget' , function() {
 
         widget.testStopPropagation();
     });
+
+    it('should allow w-preserve-attrs', function() {
+        var widget = require('../fixtures/components/app-preserve-attrs')
+            .render({})
+            .appendTo(document.getElementById('target'))
+            .getWidget();
+
+        widget.testPreserveAttrs();
+    });
 });

test/fixtures/components/app-preserve-attrs/index.js

@@ -0,0 +1,39 @@
+var expect = require('chai').expect;
+
+module.exports = require('marko-widgets').defineComponent({
+    template: require('./template.marko'),
+    init: function() {
+    },
+    getInitialState: function() {
+        return {
+            name: 'Joe'
+        };
+    },
+
+    getTemplateData: function(state) {
+        return state;
+    },
+
+    testPreserveAttrs: function() {
+        var helloEl = this.getEl('hello');
+        expect(helloEl.innerHTML).to.equal('Hello Joe!');
+
+        this.el.style.border = "1px solid red";
+        this.el.className = "foo";
+
+        this.el.querySelector('a').href = "http://www.foo.com/";
+
+        var self = this;
+
+        require('marko-widgets').batchUpdate(function() {
+            self.setState('name', 'Frank');
+        });
+
+        expect(helloEl.innerHTML).to.equal('Hello Frank!');
+
+        // Make sure the preserved attributes did not change
+        expect(this.el.style.border).to.equal("1px solid red");
+        expect(this.el.className).to.equal("foo");
+        expect(this.el.querySelector('a').href).to.equal("http://www.foo.com/");
+    }
+});

test/fixtures/components/app-preserve-attrs/template.marko

@@ -0,0 +1,6 @@
+<div w-bind w-preserve-attrs="style,class">
+    <a href="http://www.ebay.com" w-preserve-attrs="href">
+        eBay
+    </a>
+    <span w-id="hello">Hello ${data.name}!</span>
+</div>