merge + fixes

compiler/ast/CustomTag.js

@@ -5,6 +5,7 @@ var removeDashes = require('../util/removeDashes');
 var safeVarName = require('../util/safeVarName');
 var ok = require('assert').ok;
 var tagLoader;
+var Node = require('./Node');
 
 var CUSTOM_TAG_KEY = Symbol('CustomTag');
 
@@ -156,6 +157,51 @@ function processDirectlyNestedTags(node, codegen) {
     });
 }
 
+function merge(props1, props2, context) {
+    if (!props2) {
+        return props1;
+    }
+
+    if (!(props2 instanceof Node)) {
+        if (Object.keys(props2).length === 0) {
+            return props1;
+        }
+    }
+
+    if (props1 instanceof Node) {
+        let mergeVar = context.helper('merge');
+        if (!(props2 instanceof Node)) {
+            props2 = context.builder.literal(props2);
+        }
+
+        return context.builder.functionCall(mergeVar, [
+            props2, // Input props from the attributes take precedence
+            props1
+        ]);
+    } else {
+        if (props2 instanceof Node) {
+            let mergeVar = context.helper('merge');
+
+            return context.builder.functionCall(mergeVar, [
+                props2, // Input props from the attributes take precedence
+                props1
+
+            ]);
+        } else {
+            if (props1._arg) {
+                let mergeVar = context.helper('merge');
+                props1._arg = context.builder.functionCall(mergeVar, [
+                    context.builder.literal(props2), // Input props from the attributes take precedence
+                    props1._arg
+                ]);
+                return props1;
+            } else {
+                return Object.assign(props1, props2);
+            }
+        }
+    }
+}
+
 class CustomTag extends HtmlElement {
     constructor(el, tagDef) {
         super(el);
@@ -168,6 +214,8 @@ class CustomTag extends HtmlElement {
         this._condition = null;
         this._foundNestedTagsByName = {};
         this._hasDynamicNestedTags = false;
+        this._additionalProps = null;
+        this._rendererPath = null;
     }
 
     buildInputProps(codegen) {
@@ -342,6 +390,26 @@ class CustomTag extends HtmlElement {
         byNameArray.push(nestedTag);
     }
 
+    addProps(additionalProps) {
+        if (!this._additionalProps) {
+            this._additionalProps = {};
+        }
+
+        Object.assign(this._additionalProps, additionalProps);
+    }
+
+    addProp(name, value) {
+        if (!this._additionalProps) {
+            this._additionalProps = {};
+        }
+        this._additionalProps[name] = value;
+    }
+
+    setRendererPath(path) {
+        ok(typeof path === 'string', '"path" should be a string');
+        this._rendererPath = path;
+    }
+
     getNestedTagVar(context) {
         if (!this._nestedTagVar) {
             var tagDef = this.tagDef;
@@ -364,25 +432,22 @@ class CustomTag extends HtmlElement {
 
         var tagDef = this.resolveTagDef(codegen);
 
+        if (!tagDef) {
+            // The tag def was not able to be resolved and an error should have already
+            // been added to the context
+            return null;
+        }
+
         var parentCustomTag;
 
-        // console.log('BEGIN:', JSON.stringify(this, null, 2));
-
-        // console.log(module.id, 'generateCode BEGIN:', this.tagName, new Error().stack);
-
         context.pushData(CUSTOM_TAG_KEY, this);
         processDirectlyNestedTags(this, codegen);
         var body = codegen.generateCode(this.body);
         context.popData(CUSTOM_TAG_KEY);
 
-        // console.log(module.id, 'generateCode   END:', this.tagName);
-
         var isNestedTag = tagDef.isNestedTag === true;
         if (isNestedTag) {
             parentCustomTag = context.getData(CUSTOM_TAG_KEY);
-
-            // console.log('parentCustomTag:', parentCustomTag.tagName, 'child:', tagDef.name);
-
             if (!parentCustomTag) {
                 if (tagDef.parentTagName) {
                     codegen.addError(`Invalid usage of the <${this.tagName}> nested tag. Tag not nested within a <${tagDef.parentTagName}> tag.`);
@@ -435,12 +500,6 @@ class CustomTag extends HtmlElement {
 
         var inputProps = this.buildInputProps(codegen);
 
-        // if (isNestedTag) {
-        //     isRepeated = tagDef.isRepeated === true;
-        //     targetProperty = tagDef.targetProperty;
-        //     parentTagVar = parentCustomTag.getNestedTagVar(context);
-        // }
-
         var renderBodyFunction;
 
         if (body && body.length) {
@@ -481,29 +540,31 @@ class CustomTag extends HtmlElement {
             bodyOnlyIf = null;
         }
 
-        inputProps = builder.literal(inputProps);
+        var argExpression;
 
-        var argument = this.argument;
+        if (this.argument) {
+            argExpression = builder.parseExpression(this.argument);
+        }
 
-        if (argument) {
-            argument = builder.parseExpression(argument);
+        var additionalProps = this._additionalProps;
 
-            if (Object.keys(inputProps.value).length === 0) {
-                inputProps = argument;
-            } else {
-                var mergeVar = context.helper('merge');
-                inputProps = builder.functionCall(mergeVar, [
-                    inputProps, // Input props from the attributes take precedence
-                    argument
-                ]);
-            }
+        if (additionalProps) {
+            inputProps = merge(additionalProps, inputProps, context);
+        }
+
+        if (argExpression) {
+            inputProps = merge(argExpression, inputProps, context);
+        }
+
+        if (!(inputProps instanceof Node)) {
+            inputProps = builder.literal(inputProps);
         }
 
         if (hasDynamicNestedTags) {
             inputProps = builder.functionCall(context.helper('mergeNestedTagsHelper'), [ inputProps ]);
         }
 
-        var rendererPath = tagDef.renderer;
+        var rendererPath = this._rendererPath || tagDef.renderer;
         var rendererRequirePath;
         var requireRendererFunctionCall;
 

compiler/ast/HtmlElement/index.js

@@ -88,6 +88,17 @@ class HtmlElement extends Node {
         this._attributes.addAttribute(attr);
     }
 
+    setAttributeValues(attrs) {
+        if (!attrs) {
+            return;
+        }
+
+        for(var attrName in attrs) {
+            var attrValue = attrs[attrName];
+            this.setAttributeValue(attrName, attrValue);
+        }
+    }
+
     setAttributeValue(name, value) {
         this._attributes.setAttributeValue(name, value);
     }

hot-reload/index.js

@@ -1,30 +1,15 @@
-/*
-* 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.
-*/
-
 require('raptor-polyfill/string/endsWith');
 
 const extend = require('raptor-util/extend');
-const compiler = require('../compiler');
 const nodePath = require('path');
 const fs = require('fs');
 
+var compiler;
+var marko;
+
 var modifiedId = 1;
 var nextTemplateId = 0;
 var runtime;
-var loadMarkoTemplate = require('../').load;
 
 /**
  * Lazily require the Marko runtime because there is a circular dependency.
@@ -37,7 +22,7 @@ function _getMarkoRuntime() {
 
 function tryReload(path, runtime) {
     try {
-        return loadMarkoTemplate(path);
+        return marko.load(path);
     } catch(e) {
         return undefined;
     }
@@ -159,3 +144,6 @@ exports.handleFileModified = function(path) {
         modifiedId++;
     }
 };
+
+compiler = require('../compiler');
+marko = require('../');

package.json

@@ -30,7 +30,7 @@
     "test-express": "mocha --ui bdd --reporter spec ./test/express-test",
     "test-widgets": "npm run test-widgets-browser -s && npm run test-widgets-browser-deprecated -s && npm run jshint --silent",
     "test-widgets-browser": "node test/browser-tests-runner/cli.js test/widgets-browser-tests.js --automated && npm run test-widgets-browser-pages",
-    "test-widgets-browser-deprecated": "node test/browser-tests-runner/cli.js test/widgets-browser-deprecated-tests.js --automated && npm run test-widgets-browser-pages",
+    "test-widgets-browser-deprecated": "node test/browser-tests-runner/cli.js test/deprecated-widgets-browser-tests.js --automated && npm run test-widgets-browser-pages",
     "test-widgets-browser-pages": "node test/browser-tests-runner/cli.js --pages --automated",
     "test-widgets-browser-dev": "browser-refresh test/browser-tests-runner/cli.js test/widgets-browser-tests.js --server",
     "test-widgets-page": "browser-refresh test/browser-tests-runner/cli.js test/widgets-browser-tests.js --server --page",

runtime/RenderResult.js

@@ -20,7 +20,7 @@ var RenderResult = module.exports = function RenderResult(out) {
     this.out = out;
 };
 
-RenderResult.prototype = {
+var proto = RenderResult.prototype = {
     getWidget: function() {
         checkAddedToDOM(this, 'getWidget');
 
@@ -75,39 +75,8 @@ RenderResult.prototype = {
 
         return this;
     },
-
-    appendTo: function(referenceEl) {
-        var newNode = this.getNode(referenceEl.ownerDocument);
-        dom.appendTo(newNode, referenceEl);
-        return this.afterInsert(newNode);
-    },
-    replace: function(referenceEl) {
-        var newNode = this.getNode(referenceEl.ownerDocument);
-        dom.replace(newNode, referenceEl);
-        return this.afterInsert(newNode);
-    },
-    replaceChildrenOf: function(referenceEl) {
-        var newNode = this.getNode(referenceEl.ownerDocument);
-        dom.replaceChildrenOf(newNode, referenceEl);
-        return this.afterInsert(newNode);
-    },
-    insertBefore: function(referenceEl) {
-        var newNode = this.getNode(referenceEl.ownerDocument);
-        dom.insertBefore(newNode, referenceEl);
-        return this.afterInsert(newNode);
-    },
-    insertAfter: function(referenceEl) {
-        var newNode = this.getNode(referenceEl.ownerDocument);
-        dom.insertAfter(newNode, referenceEl);
-        return this.afterInsert(newNode);
-    },
-    prependTo: function(referenceEl) {
-        var newNode = this.getNode(referenceEl.ownerDocument);
-        dom.prependTo(newNode, referenceEl);
-        return this.afterInsert(newNode);
-    },
-    getNode: function() {
-        return this.out.getNode();
+    getNode: function(doc) {
+        return this.out.getNode(doc);
     },
     getOutput: function() {
         return this.out.getOutput();
@@ -119,4 +88,25 @@ RenderResult.prototype = {
         return this.getOutput();
     },
     document: typeof document !== 'undefined' && document
-};
+};
+
+// Add all of the following DOM methods to RenderResult.prototype:
+// - forEachChildEl(referenceEl)
+// - forEachChild(referenceEl)
+// - detach(referenceEl)
+// - appendTo(referenceEl)
+// - remove(referenceEl)
+// - removeChildren(referenceEl)
+// - replace(referenceEl)
+// - replaceChildrenOf(referenceEl)
+// - insertBefore(referenceEl)
+// - insertAfter(referenceEl)
+// - prependTo(referenceEl)
+dom.mixin(
+    proto,
+    function getNode() {
+        return this.getNode();
+    },
+    function afterInsert(newNode) {
+        this.afterInsert(newNode);
+    });

runtime/dom.js

@@ -116,4 +116,18 @@ exports.replaceChildrenOf = replaceChildrenOf;
 exports.insertBefore = insertBefore;
 exports.insertAfter = insertAfter;
 exports.prependTo = prependTo;
-exports.ready = require('./ready');
+
+exports.mixin = function(target, getNode, afterInsert) {
+    Object.keys(exports).forEach(function(methodName) {
+        var func = exports[methodName];
+
+        target[methodName] = function(referenceEl) {
+            var newNode = getNode.call(this, referenceEl.ownerDocument);
+            func.call(exports, newNode, referenceEl);
+            if (afterInsert) {
+                afterInsert.call(this, newNode);
+            }
+            return this;
+        };
+    });
+};

runtime/helpers.js

@@ -7,7 +7,7 @@ function classListHelper(arg, classNames) {
     if (arg) {
         if (typeof arg === 'string') {
             if (arg) {
-                classNames.push(arg);                
+                classNames.push(arg);
             }
         } else if (typeof (len = arg.length) === 'number') {
             for (var i=0; i<len; i++) {
@@ -250,5 +250,4 @@ exports.cl = function classListHelper() {
 /**
  * Loads a template (__helpers.l --> marko_loadTemplate(path))
  */
-exports.l = require('./loader');
-exports.i = require('./include');
+exports.l = require('./loader');

runtime/html/helpers.js

@@ -107,7 +107,7 @@ exports.xa = escapeXmlAttr;
  * prematurely ended and a new script tag could then be started that could then execute
  * arbitrary code.
  */
-exports.xs = function(val) {
+exports.xs = function escapeScriptHelper(val) {
     return (typeof val === 'string') ? val.replace(escapeEndingScriptTagRegExp, '\\u003C/') : val;
 };
 

runtime/include.js

@@ -1,17 +0,0 @@
-module.exports = function include(target, out, data) {
-    if (target) {
-        if (typeof target === 'function') {
-            target(out, data);
-        } else if (typeof target === 'object') {
-            if (target.renderBody) {
-                target.renderBody(out, data);
-            } else if (target.renderer) {
-                target.renderer(data, out);
-            } else if (target.render) {
-                target.render(data, out);
-            }
-        } else {
-            throw new Error('Invalid include target: ' + target);
-        }
-    }
-};

runtime/renderable.js

@@ -13,18 +13,19 @@ module.exports = function(target, renderer) {
             var render = renderFunc || this._;
             var out = createOut(localData.$global);
 
-            if(!callback) {
-                out.sync();
-            } else {
+            if (callback) {
                 out.on('finish', function() {
                        callback(null, out.toString(), out);
                    })
                    .once('error', callback);
+
+                render(localData, out);
+                return out.end();
+            } else {
+                out.sync();
+                render(localData, out);
+                return out.toString();
             }
-
-            render(localData, out);
-
-            return callback ? out.end() : out.toString();
         },
 
         renderSync: function(data) {
@@ -72,7 +73,7 @@ module.exports = function(target, renderer) {
                 finalData = {};
             }
 
-            if(out && out.isAsyncOut){
+            if (out && out.isAsyncOut){
                 finalOut = out;
                 shouldEnd = false;
                 extend(out.global, globalData);

taglibs/core/include-tag-transformer.js

@@ -0,0 +1,34 @@
+'use strict';
+
+module.exports = function codeGenerator(el, context) {
+    let builder = context.builder;
+
+    let target;
+    let arg;
+
+    if (el.argument) {
+        let args = el.argument && builder.parseJavaScriptArgs(el.argument);
+        el.argument = null;
+
+        target = args[0];
+        arg = args[1];
+    } else {
+        return;
+    }
+
+    if (target.type === 'Literal') {
+        target = context.importTemplate(target.value);
+    }
+
+    var includeProps = {
+        _target: target
+    };
+
+    if (arg) {
+        includeProps._arg = arg;
+    }
+
+    el.data.includeTarget = target;
+
+    el.addProps(includeProps);
+};

taglibs/core/include-tag.js

@@ -1,87 +1,20 @@
-'use strict';
-var removeHyphens = require('../../compiler/util/removeDashes');
-
-module.exports = function codeGenerator(el, codegen) {
-    let builder = codegen.builder;
-
-    let target;
-    let data;
-
-    if (el.argument) {
-        let args = el.argument && builder.parseJavaScriptArgs(el.argument);
-        target = args[0];
-        data = args[1];
-    }
-
-    var isTemplate = false;
+module.exports = function include(input, out) {
+    var target = input._target;
+    var arg = input._arg || input;
 
     if (target) {
-        if (target.type === 'Literal') {
-            target = codegen.context.importTemplate(target.value);
-            isTemplate = true;
-        }
-    }
-
-    let finalData = {};
-    let attrs = el.getAttributes();
-    attrs.forEach((attr) => {
-        var propName = attr.name;
-        if (propName.indexOf('-') !== -1) {
-            propName = removeHyphens(propName); // Convert the property name to camel case
-        }
-
-        finalData[propName] = attr.value;
-    });
-
-    if (el.body && el.body.length) {
-        finalData.renderBody = builder.renderBodyFunction(el.body);
-    }
-
-    if (data) {
-        if (Object.keys(finalData).length === 0) {
-            finalData = data;
-        } else {
-            let mergeVar = codegen.context.helper('merge');
-            finalData = builder.functionCall(mergeVar, [
-                builder.literal(finalData), // Input props from the attributes take precedence
-                data // The template data object is passed as the second argument: <include("./foo.marko", { ... })/>
-            ]);
-        }
-    } else {
-        if (Object.keys(finalData).length === 0) {
-            finalData = null;
-        } else {
-            finalData = builder.literal(finalData);
-        }
-    }
-
-    if (isTemplate) {
-        let renderMethod = builder.memberExpression(target, builder.identifier('render'));
-        if (!finalData) {
-            finalData = builder.literal({});
-        }
-        let renderArgs = [ finalData, builder.identifierOut()  ];
-        let renderFunctionCall = builder.functionCall(renderMethod, renderArgs);
-        return renderFunctionCall;
-    } else {
-        if (this.generateCodeForDynamicInclude) {
-            return this.generateCodeForDynamicInclude({
-                target: target,
-                data: finalData
-            }, codegen);
-        } else {
-            if (!target) {
-                target = builder.memberExpression(builder.identifier('data'), builder.identifier('renderBody'));
+        if (typeof target === 'function') {
+            target(out, arg);
+        } else if (typeof target === 'object') {
+            if (target.renderBody) {
+                target.renderBody(out, arg);
+            } else if (target.renderer) {
+                target.renderer(arg, out);
+            } else if (target.render) {
+                target.render(arg, out);
             }
-
-            let includeVar = codegen.context.helper('include');
-            let includeArgs = [ target, builder.identifierOut() ];
-
-            if (finalData) {
-                includeArgs.push(finalData);
-            }
-
-            return builder.functionCall(includeVar, includeArgs);
+        } else {
+            throw new Error('Invalid include target: ' + target);
         }
     }
 };

taglibs/core/marko.json

@@ -79,7 +79,8 @@
         "code-generator": "./import-tag"
     },
     "<include>": {
-        "code-generator": "./include-tag",
+        "renderer": "./include-tag",
+        "transformer": "./include-tag-transformer",
         "autocomplete": [
             {
                 "displayText": "include(<template>)",

taglibs/layout/use-tag-transformer.js

@@ -6,6 +6,9 @@ module.exports = function transform(el, context) {
         context.addError(el, 'Invalid <layout-use> tag. Expected: <layout-use(template[, data]) ...>');
         return;
     }
+
+    console.warn('The <layout-use> tag is deprecated. Please use <include> instead. See: https://github.com/marko-js/marko/issues/452 (' + (el.pos ? context.getPosInfo(el.pos) : context.filename) + ')');
+
     var builder = context.builder;
 
     var args = builder.parseJavaScriptArgs(argument);

test/autotests/api/renderToString-callback-async/components/test-async/renderer.js

@@ -0,0 +1,7 @@
+module.exports = function(input, out) {
+    var asyncOut = out.beginAsync();
+    setTimeout(function() {
+        asyncOut.write('[async]');
+        asyncOut.end();
+    }, 10);
+};

test/autotests/api/renderToString-callback-async/template.marko

@@ -0,0 +1,2 @@
+- Hello ${data.name}!
+<test-async/>

test/autotests/api/renderToString-callback-async/test.js

@@ -0,0 +1,10 @@
+var nodePath = require('path');
+
+exports.check = function(marko, markoCompiler, expect, done) {
+    var template = marko.load(nodePath.join(__dirname, 'template.marko'));
+    template.renderToString({ name: 'John' }, function(err, html) {
+        expect(html).to.equal('Hello John! [async]');
+        done();
+    });
+
+};

test/autotests/api/renderToString-callback-sync/template.marko

@@ -0,0 +1 @@
+- Hello ${data.name}!

test/autotests/api/renderToString-callback-sync/test.js

@@ -0,0 +1,10 @@
+var nodePath = require('path');
+
+exports.check = function(marko, markoCompiler, expect, done) {
+    var template = marko.load(nodePath.join(__dirname, 'template.marko'));
+    template.renderToString({ name: 'John' }, function(err, html) {
+        expect(html).to.equal('Hello John!');
+        done();
+    });
+
+};

test/autotests/api/renderToString-no-callback-async/components/test-async/renderer.js

@@ -0,0 +1,7 @@
+module.exports = function(input, out) {
+    var asyncOut = out.beginAsync();
+    setTimeout(function() {
+        asyncOut.write('[async]');
+        asyncOut.end();
+    }, 10);
+};

test/autotests/api/renderToString-no-callback-async/template.marko

@@ -0,0 +1,2 @@
+- Hello ${data.name}!
+<test-async/>

test/autotests/api/renderToString-no-callback-async/test.js

@@ -0,0 +1,9 @@
+var nodePath = require('path');
+
+exports.check = function(marko, markoCompiler, expect, done) {
+    var template = marko.load(nodePath.join(__dirname, 'template.marko'));
+    expect(function() {
+        template.renderToString({ name: 'John' });
+    }).to.throw('beginAsync() not allowed when using renderSync()');
+    done();
+};

test/autotests/api/renderToString/template.marko

@@ -0,0 +1 @@
+- Hello ${data.name}!

test/autotests/api/renderToString/test.js

@@ -0,0 +1,8 @@
+var nodePath = require('path');
+
+exports.check = function(marko, markoCompiler, expect, done) {
+    var template = marko.load(nodePath.join(__dirname, 'template.marko'));
+    var result = template.renderToString({ name: 'John' });
+    expect(result).to.equal('Hello John!');
+    done();
+};

test/autotests/compiler/include/expected.js

@@ -4,10 +4,14 @@ module.exports = template;
 
 var marko_helpers = require("marko/runtime/html/helpers"),
     marko_loadTemplate = marko_helpers.l,
-    target_template = marko_loadTemplate(require.resolve("./target.marko"));
+    target_template = marko_loadTemplate(require.resolve("./target.marko")),
+    marko_loadTag = marko_helpers.t,
+    include_tag = marko_loadTag(require("marko/taglibs/core/include-tag"));
 
 function render(data, out) {
-  target_template.render({}, out);
+  include_tag({
+      _target: target_template
+    }, out);
 }
 
 template._ = render;

test/autotests/render/include-layout-data-attrs/expected.html

@@ -0,0 +1 @@
+<div>BODY CONTENT</div> ---- <h1>DEFAULT TITLE</h1><div>BODY CONTENT</div><h1>FOOTER CONTENT</h1>

test/autotests/render/include-layout-data-attrs/layout-default.marko

@@ -0,0 +1,19 @@
+<h1 if(data.showHeader !== false)>
+    <if(data.header)>
+        <include(data.header)/>
+    </if>
+    <else>
+        DEFAULT TITLE
+    </else>
+</h1>
+<div>
+    <include(data.body)/>
+</div>
+<h1 if(data.showFooter !== false)>
+    <if(data.footer)>
+        <include(data.footer)/>
+    </if>
+    <else>
+        DEFAULT FOOTER
+    </else>
+</h1>

test/autotests/render/include-layout-data-attrs/template.marko

@@ -0,0 +1,11 @@
+-------
+<include("./layout-default.marko", {showHeader: false}) show-footer=false>
+    <@body>BODY CONTENT</@body>
+    <@footer>FOOTER CONTENT</@footer>
+</include>
+----
+<include("./layout-default.marko", {showHeader: false}) show-header=true>
+    <@body>BODY CONTENT</@body>
+    <@footer>FOOTER CONTENT</@footer>
+</include>
+-------

test/autotests/render/include-layout-data-attrs/test.js

@@ -0,0 +1,3 @@
+exports.templateData = {
+    layoutDynamic: require('./layout-default.marko')
+};

test/autotests/render/include-layout-data/expected.html

@@ -0,0 +1 @@
+<div>BODY CONTENT</div>FOOTER CONTENT ---- <h1>DEFAULT TITLE</h1><div>BODY CONTENT2</div>FOOTER CONTENT2 ---- <h1>My Title</h1><div>BODY CONTENT2</div>FOOTER CONTENT2

test/autotests/render/include-layout-data/layout-default.marko

@@ -0,0 +1,13 @@
+<h1 if(data.showHeader !== false)>
+    <if(data.header)>
+        <include(data.header)/>
+    </if>
+    <else>
+        DEFAULT TITLE
+    </else>
+</h1>
+<div>
+    <include(data.body)/>
+</div>
+<include(data.footer)/>
+<include(data.empty)/>

test/autotests/render/include-layout-data/template.marko

@@ -0,0 +1,17 @@
+---------
+<include("./layout-default.marko", {showHeader: false})>
+    <@body>BODY CONTENT</@body>
+    <@footer>FOOTER CONTENT</@footer>
+</include>
+----
+<include("./layout-default.marko", {showHeader: true})>
+    <@body>BODY CONTENT2</@body>
+    <@footer>FOOTER CONTENT2</@footer>
+</include>
+----
+<include("./layout-default.marko", {showHeader: true})>
+    <@header>My Title</@header>
+    <@body>BODY CONTENT2</@body>
+    <@footer>FOOTER CONTENT2</@footer>
+</include>
+---------

test/autotests/render/include-layout-data/test.js

@@ -0,0 +1,3 @@
+exports.templateData = {
+    layoutDynamic: require('./layout-default.marko')
+};

test/autotests/render/include-layout/expected.html

@@ -0,0 +1 @@
+<div>BODY CONTENT</div>FOOTER CONTENT<h1>HEADER CONTENT</h1><div>BODY CONTENT</div>FOOTER CONTENT<h1>VALUE HEADER</h1><div>BODY CONTENT</div>FOOTER CONTENT<h1>DEFAULT TITLE</h1><div>BODY CONTENT</div>FOOTER CONTENT

test/autotests/render/include-layout/layout-default.marko

@@ -0,0 +1,13 @@
+<h1 if(data.showHeader !== false)>
+    <if(data.header)>
+        <include(data.header)/>
+    </if>
+    <else>
+        DEFAULT TITLE
+    </else>
+</h1>
+<div>
+    <include(data.body)/>
+</div>
+<include(data.footer)/>
+<include(data.empty)/>

test/autotests/render/include-layout/template.marko

@@ -0,0 +1,18 @@
+<include("./layout-default.marko") show-header=false>
+    <@body>BODY CONTENT</@body>
+    <@footer>FOOTER CONTENT</@footer>
+</include>
+<include("./layout-default.marko") show-header=true>
+    <@header>HEADER CONTENT</@header>
+    <@body>BODY CONTENT</@body>
+    <@footer>FOOTER CONTENT</@footer>
+</include>
+<include("./layout-default.marko") show-header=true>
+    <@header>VALUE HEADER</@header>
+    <@body>BODY CONTENT</@body>
+    <@footer>FOOTER CONTENT</@footer>
+</include>
+<include(data.layoutDynamic) show-header=true>
+    <@body>BODY CONTENT</@body>
+    <@footer>FOOTER CONTENT</@footer>
+</include>

test/autotests/render/include-layout/test.js

@@ -0,0 +1,3 @@
+exports.templateData = {
+    layoutDynamic: require('./layout-default.marko')
+};

test/autotests/render/include-renderBody-data-and-attrs/expected.html

@@ -0,0 +1 @@
+<div>Frank:10</div>

test/autotests/render/include-renderBody-data-and-attrs/template.marko

@@ -0,0 +1 @@
+<include(data.renderBody, {name: 'Frank'}) age=10/>

test/autotests/render/include-renderBody-data-and-attrs/test.js

@@ -0,0 +1,7 @@
+exports.templateData = {
+    renderBody(out, data) {
+        out.beginElement('div');
+        out.text(data.name + ':' + data.age);
+        out.endElement();
+    }
+};

test/autotests/render/include-renderBody/include-html-target.html

@@ -1,5 +0,0 @@
-<div>
-    <h1>
-        Hello World!
-    </h1>
-</div>

test/autotests/taglib-lookup/forEachTag/expected.json

@@ -45,7 +45,7 @@
     "async-fragment-timeout",
     "async-fragment-error",
     "cached-fragment",
-    "w-widget",
+    "_widget",
     "init-widgets",
     "w-preserve",
     "no-update",

test/autotests/taglib-lookup/getTagsSorted/expected.json

@@ -1,5 +1,6 @@
 [
     "_lasso-resources-root",
+    "_widget",
     "*",
     "a",
     "assign",
@@ -49,7 +50,6 @@
     "unless",
     "var",
     "w-preserve",
-    "w-widget",
     "while",
     "widget-types"
 ]

test/autotests/widgets-browser-deprecated/dom-events-repeated-el-bubbling/index.js

@@ -0,0 +1,7 @@
+module.exports = require('marko/widgets').defineComponent({
+	template: require.resolve('./template.marko'),
+
+	handleColorClick: function(event, el) {
+		this.color = el.getAttribute('data-color');
+	}
+});

test/autotests/widgets-browser-deprecated/dom-events-repeated-el-bubbling/template.marko

@@ -0,0 +1,7 @@
+<div w-bind>
+	<ul>
+		<li for(color in data.colors) data-color=color w-onClick="handleColorClick">
+			${color}
+		</li>
+	</ul>
+</div>

test/autotests/widgets-browser-deprecated/dom-events-repeated-el-bubbling/test.js

@@ -0,0 +1,18 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+    var widget = helpers.mount(require('./index'), {
+        colors: [ 'red', 'green', 'blue' ]
+    });
+
+    var liEls = widget.el.querySelectorAll('li');
+
+    helpers.triggerMouseEvent(liEls[0], 'click');
+    expect(widget.color).to.equal('red');
+
+    helpers.triggerMouseEvent(liEls[1], 'click');
+    expect(widget.color).to.equal('green');
+
+    helpers.triggerMouseEvent(liEls[2], 'click');
+    expect(widget.color).to.equal('blue');
+};

test/autotests/widgets-browser-deprecated/dom-events-repeated-el-non-bubbling/index.js

@@ -0,0 +1,7 @@
+module.exports = require('marko/widgets').defineComponent({
+	template: require.resolve('./template.marko'),
+
+	handleColorMouseOver: function(event, el) {
+		this.color = el.getAttribute('data-color');
+	}
+});

test/autotests/widgets-browser-deprecated/dom-events-repeated-el-non-bubbling/template.marko

@@ -0,0 +1,7 @@
+<div w-bind>
+	<ul>
+		<li for(color in data.colors) data-color=color w-onMouseOver="handleColorMouseOver">
+			${color}
+		</li>
+	</ul>
+</div>

test/autotests/widgets-browser-deprecated/dom-events-repeated-el-non-bubbling/test.js

@@ -0,0 +1,18 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+    var widget = helpers.mount(require('./index'), {
+        colors: [ 'red', 'green', 'blue' ]
+    });
+
+    var liEls = widget.el.querySelectorAll('li');
+
+    helpers.triggerMouseEvent(liEls[0], 'mouseover');
+    expect(widget.color).to.equal('red');
+
+    helpers.triggerMouseEvent(liEls[1], 'mouseover');
+    expect(widget.color).to.equal('green');
+
+    helpers.triggerMouseEvent(liEls[2], 'mouseover');
+    expect(widget.color).to.equal('blue');
+};

test/autotests/widgets-browser-deprecated/widget-destroy-detach/test.js

@@ -2,7 +2,10 @@ var expect = require('chai').expect;
 
 module.exports = function(helpers) {
     var widget = helpers.mount(require('./index'), {});
+    var el = widget.el;
+
     expect(widget.el.parentNode).to.equal(helpers.targetEl);
     widget.destroy();
-    expect(widget.el.parentNode == null).to.equal(true);
+    expect(widget.el == null).to.equal(true);
+    expect(el.parentNode == null).to.equal(true);
 };

test/autotests/widgets-browser/destroy-multiple-root-els/component.js

@@ -0,0 +1,14 @@
+module.exports = {
+    getInitialState: function(input) {
+        return {
+            name: input.name,
+            age: input.age
+        };
+    },
+    setName: function(newName) {
+        this.setState('name', newName);
+    },
+    setAge: function(newAge) {
+        this.setState('age', newAge);
+    }
+};

test/autotests/widgets-browser/destroy-multiple-root-els/index.marko

@@ -0,0 +1,4 @@
+<div ref="name">${state.name}</div>
+<span ref="age">${state.age}</span>
+<a href="ebay.com">
+</a>

test/autotests/widgets-browser/destroy-multiple-root-els/test.js

@@ -0,0 +1,21 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+
+    var widget = helpers.mount(require('./index'), { name: 'Frank', age: 30 });
+
+    var nameEl = widget.getEl('name');
+    var ageEl = widget.getEl('age');
+    var linkEl = widget.els[2];
+
+
+    expect(nameEl.parentNode != null).to.equal(true);
+    expect(ageEl.parentNode != null).to.equal(true);
+    expect(linkEl.parentNode != null).to.equal(true);
+
+    widget.destroy();
+
+    expect(nameEl.parentNode == null).to.equal(true);
+    expect(ageEl.parentNode == null).to.equal(true);
+    expect(linkEl.parentNode == null).to.equal(true);
+};

test/autotests/widgets-browser/dom-events-repeated-el-bubbling/component.js

@@ -0,0 +1,5 @@
+module.exports = {
+	handleColorClick: function(color) {
+		this.color = color;
+	}
+};

test/autotests/widgets-browser/dom-events-repeated-el-bubbling/index.marko

@@ -0,0 +1,7 @@
+<div>
+	<ul>
+		<li for(color in data.colors) onClick("handleColorClick", color)>
+			${color}
+		</li>
+	</ul>
+</div>

test/autotests/widgets-browser/dom-events-repeated-el-bubbling/test.js

@@ -0,0 +1,18 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+    var widget = helpers.mount(require('./index'), {
+        colors: [ 'red', 'green', 'blue' ]
+    });
+
+    var liEls = widget.el.querySelectorAll('li');
+
+    helpers.triggerMouseEvent(liEls[0], 'click');
+    expect(widget.color).to.equal('red');
+
+    helpers.triggerMouseEvent(liEls[1], 'click');
+    expect(widget.color).to.equal('green');
+
+    helpers.triggerMouseEvent(liEls[2], 'click');
+    expect(widget.color).to.equal('blue');
+};

test/autotests/widgets-browser/dom-events-repeated-el-non-bubbling/component.js

@@ -0,0 +1,5 @@
+module.exports = {
+	handleColorMouseOver: function(color) {
+		this.color = color;
+	}
+};

test/autotests/widgets-browser/dom-events-repeated-el-non-bubbling/index.marko

@@ -0,0 +1,7 @@
+<div>
+	<ul>
+		<li for(color in data.colors) onMouseOver("handleColorMouseOver", color)>
+			${color}
+		</li>
+	</ul>
+</div>

test/autotests/widgets-browser/dom-events-repeated-el-non-bubbling/test.js

@@ -0,0 +1,18 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+    var widget = helpers.mount(require('./index'), {
+        colors: [ 'red', 'green', 'blue' ]
+    });
+
+    var liEls = widget.el.querySelectorAll('li');
+
+    helpers.triggerMouseEvent(liEls[0], 'mouseover');
+    expect(widget.color).to.equal('red');
+
+    helpers.triggerMouseEvent(liEls[1], 'mouseover');
+    expect(widget.color).to.equal('green');
+
+    helpers.triggerMouseEvent(liEls[2], 'mouseover');
+    expect(widget.color).to.equal('blue');
+};

test/autotests/widgets-browser/ref-nested-component-multiple-root-els-with-refs/component.js

@@ -0,0 +1,14 @@
+module.exports = {
+    getInitialState: function(input) {
+        return {
+            name: input.name,
+            age: input.age
+        };
+    },
+    setName: function(newName) {
+        this.setState('name', newName);
+    },
+    setAge: function(newAge) {
+        this.setState('age', newAge);
+    }
+};

test/autotests/widgets-browser/ref-nested-component-multiple-root-els-with-refs/components/multiple-root-els/component.js

@@ -0,0 +1,14 @@
+module.exports = {
+    getInitialState: function(input) {
+        return {
+            name: input.name,
+            age: input.age
+        };
+    },
+    getName: function() {
+        return this.getEl('name').innerHTML;
+    },
+    getAge: function() {
+        return this.getEl('age').innerHTML;
+    }
+};

test/autotests/widgets-browser/ref-nested-component-multiple-root-els-with-refs/components/multiple-root-els/index.marko

@@ -0,0 +1,4 @@
+<div ref="name">${state.name}</div>
+<span ref="age">${state.age}</span>
+<a href="ebay.com">
+</a>

test/autotests/widgets-browser/ref-nested-component-multiple-root-els-with-refs/index.marko

@@ -0,0 +1 @@
+<multiple-root-els ref="foo" name='Frank' age=30/>

test/autotests/widgets-browser/ref-nested-component-multiple-root-els-with-refs/test.js

@@ -0,0 +1,9 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+    var widget = helpers.mount(require('./index'), { name: 'Frank', age: 30 });
+    var fooWidget = widget.getWidget('foo');
+    expect(fooWidget != null).to.equal(true);
+    expect(fooWidget.getName()).to.equal('Frank');
+    expect(fooWidget.getAge()).to.equal('30');
+};

test/autotests/widgets-browser/ref-nested-component-multiple-root-els/component.js

@@ -0,0 +1,2 @@
+module.exports = {
+};

test/autotests/widgets-browser/ref-nested-component-multiple-root-els/components/multiple-root-els/component.js

@@ -0,0 +1,14 @@
+module.exports = {
+    getInitialState: function(input) {
+        return {
+            name: input.name,
+            age: input.age
+        };
+    },
+    getName: function() {
+        return this.els[0].innerHTML;
+    },
+    getAge: function() {
+        return this.els[1].innerHTML;
+    }
+};

test/autotests/widgets-browser/ref-nested-component-multiple-root-els/components/multiple-root-els/index.marko

@@ -0,0 +1,2 @@
+<div>${state.name}</div>
+<span>${state.age}</span>

test/autotests/widgets-browser/ref-nested-component-multiple-root-els/index.marko

@@ -0,0 +1 @@
+<multiple-root-els ref="foo" name='Frank' age=30/>

test/autotests/widgets-browser/ref-nested-component-multiple-root-els/test.js

@@ -0,0 +1,9 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+    var widget = helpers.mount(require('./index'), { name: 'Frank', age: 30 });
+    var fooWidget = widget.getWidget('foo');
+    expect(fooWidget != null).to.equal(true);
+    expect(fooWidget.getName()).to.equal('Frank');
+    expect(fooWidget.getAge()).to.equal('30');
+};

test/autotests/widgets-browser/sanity-check-implicit-bind-component/component.js

@@ -0,0 +1,10 @@
+module.exports = {
+    getInitialState: function(input) {
+        return {
+            name: input.name
+        };
+    },
+    setName: function(newName) {
+        this.setState('name', newName);
+    }
+};

test/autotests/widgets-browser/sanity-check-implicit-bind-component/index.marko

@@ -0,0 +1 @@
+<div>${state.name}</div>

test/autotests/widgets-browser/sanity-check-implicit-bind-component/test.js

@@ -0,0 +1,14 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+
+    var widget = helpers.mount(require('./index'), { name: 'Frank', age: 30 });
+
+    expect(widget.el.innerHTML).to.equal('Frank');
+
+    widget.setName('Jane');
+
+    widget.update();
+
+    expect(widget.el.innerHTML).to.equal('Jane');
+};

test/autotests/widgets-browser/sanity-check-multiple-root-els/component.js

@@ -0,0 +1,18 @@
+module.exports = {
+    getInitialState: function(input) {
+        return {
+            name: input.name,
+            age: input.age,
+            url: input.url
+        };
+    },
+    setName: function(newName) {
+        this.setState('name', newName);
+    },
+    setAge: function(newAge) {
+        this.setState('age', newAge);
+    },
+    setUrl: function(newUrl) {
+        this.setState('url', newUrl);
+    }
+};

test/autotests/widgets-browser/sanity-check-multiple-root-els/index.marko

@@ -0,0 +1,3 @@
+<div ref="name">${state.name}</div>
+<span ref="age">${state.age}</span>
+<a href=state.url></a>

test/autotests/widgets-browser/sanity-check-multiple-root-els/test.js

@@ -0,0 +1,20 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+
+    var widget = helpers.mount(require('./index'), { name: 'Frank', age: 30, url: 'http://ebay.com/' });
+
+    expect(widget.getEl('name').innerHTML).to.equal('Frank');
+    expect(widget.getEl('age').innerHTML).to.equal('30');
+    expect(widget.els[2].href).to.equal('http://ebay.com/');
+
+    widget.setName('Jane');
+    widget.setAge(50);
+    widget.setUrl('http://ebay.com/search/');
+
+    widget.update();
+
+    expect(widget.getEl('name').innerHTML).to.equal('Jane');
+    expect(widget.getEl('age').innerHTML).to.equal('50');
+    expect(widget.els[2].href).to.equal('http://ebay.com/search/');
+};

test/autotests/widgets-browser/sanity-check-single-file-component/index.marko

@@ -0,0 +1,16 @@
+<script>
+    module.exports = {
+        onInput: function(input) {
+            this.state = {
+                name: input.name
+            };
+        },
+        setName: function(newName) {
+            this.setState('name', newName);
+        }
+    };
+</script>
+
+<div>
+    Hello ${data.name}!
+</div>

test/autotests/widgets-browser/sanity-check-single-file-component/test.js

@@ -0,0 +1,13 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+
+    var widget = helpers.mount(require('./index.marko'), { name: 'Frank' });
+
+    expect(widget.el.innerHTML).to.contain('Hello Frank!');
+
+    widget.setName('Jane');
+    widget.update();
+
+    expect(widget.el.innerHTML).to.contain('Hello Jane!');
+};

test/autotests/widgets-browser/widget-destroy-detach/test.js

@@ -2,7 +2,10 @@ var expect = require('chai').expect;
 
 module.exports = function(helpers) {
     var widget = helpers.mount(require('./index'), {});
+    var el = widget.el;
+
     expect(widget.el.parentNode).to.equal(helpers.targetEl);
     widget.destroy();
-    expect(widget.el.parentNode == null).to.equal(true);
+    expect(widget.el == null).to.equal(true);
+    expect(el.parentNode == null).to.equal(true);
 };

test/autotests/widgets-compilation/bind-component/expected.js

@@ -7,15 +7,13 @@ var marko_widgets = require("marko/widgets/index"),
     marko_widgetType = marko_registerWidget("/marko-test$1.0.0/autotests/widgets-compilation/bind-component/index", function() {
       return require("./");
     }),
-    marko_widgetAttrs = marko_widgets.attrs,
     marko_helpers = require("marko/runtime/html/helpers"),
     marko_attr = marko_helpers.a,
-    marko_attrs = marko_helpers.as,
     marko_loadTag = marko_helpers.t,
-    w_widget_tag = marko_loadTag(require("marko/widgets/taglib/widget-tag"));
+    _widget_tag = marko_loadTag(require("marko/widgets/taglib/widget-tag"));
 
 function render(data, out) {
-  w_widget_tag({
+  _widget_tag({
       type: marko_widgetType,
       _cfg: data.widgetConfig,
       _state: data.widgetState,
@@ -24,7 +22,6 @@ function render(data, out) {
       renderBody: function renderBody(out, widget, state) {
         out.w("<div" +
           marko_attr("id", widget.id) +
-          marko_attrs(marko_widgetAttrs(widget)) +
           "></div>");
       }
     }, out);

test/autotests/widgets-compilation/bind-widget/expected.js

@@ -7,15 +7,13 @@ var marko_widgets = require("marko/widgets/index"),
     marko_widgetType = marko_registerWidget("/marko-test$1.0.0/autotests/widgets-compilation/bind-widget/widget", function() {
       return require("./widget");
     }),
-    marko_widgetAttrs = marko_widgets.attrs,
     marko_helpers = require("marko/runtime/html/helpers"),
     marko_attr = marko_helpers.a,
-    marko_attrs = marko_helpers.as,
     marko_loadTag = marko_helpers.t,
-    w_widget_tag = marko_loadTag(require("marko/widgets/taglib/widget-tag"));
+    _widget_tag = marko_loadTag(require("marko/widgets/taglib/widget-tag"));
 
 function render(data, out) {
-  w_widget_tag({
+  _widget_tag({
       type: marko_widgetType,
       _cfg: data.widgetConfig,
       _state: data.widgetState,
@@ -24,7 +22,6 @@ function render(data, out) {
       renderBody: function renderBody(out, widget, state) {
         out.w("<div" +
           marko_attr("id", widget.id) +
-          marko_attrs(marko_widgetAttrs(widget)) +
           "></div>");
       }
     }, out);

test/autotests/widgets-compilation/component-include-attr/expected.js

@@ -7,16 +7,14 @@ var marko_widgets = require("marko/widgets/index"),
     marko_widgetType = marko_registerWidget("/marko-test$1.0.0/autotests/widgets-compilation/component-include-attr/index", function() {
       return require("./");
     }),
-    marko_widgetAttrs = marko_widgets.attrs,
-    marko_widget_include = require("marko/widgets/taglib/helpers/include"),
     marko_helpers = require("marko/runtime/html/helpers"),
-    marko_attr = marko_helpers.a,
-    marko_attrs = marko_helpers.as,
     marko_loadTag = marko_helpers.t,
-    w_widget_tag = marko_loadTag(require("marko/widgets/taglib/widget-tag"));
+    include_tag = marko_loadTag(require("marko/widgets/taglib/include-tag")),
+    marko_attr = marko_helpers.a,
+    _widget_tag = marko_loadTag(require("marko/widgets/taglib/widget-tag"));
 
 function render(data, out) {
-  w_widget_tag({
+  _widget_tag({
       type: marko_widgetType,
       body: 0,
       _cfg: data.widgetConfig,
@@ -26,12 +24,15 @@ function render(data, out) {
       renderBody: function renderBody(out, widget, state) {
         out.w("<div" +
           marko_attr("id", widget.id) +
-          marko_attrs(marko_widgetAttrs(widget)) +
           "><h1>Header</h1><div" +
           marko_attr("id", widget.elId(0)) +
           ">");
 
-        marko_widget_include(data.widgetBody, out, null, widget.elId(0), widget);
+        include_tag({
+            _target: data.widgetBody,
+            _widgetId: widget.elId(0),
+            _arg: widget
+          }, out);
 
         out.w("</div></div>");
       }

test/autotests/widgets-compilation/component-inline/expected.js

@@ -1,11 +1,11 @@
 var template = require("marko/html").c(__filename);
 
 var component = (function() {
-  var __component;
+  var marko_component;
 
-  __component = {};
+  marko_component = {};
 
-  return __component;
+  return marko_component;
 })();
 
 var marko_widgets = require("marko/widgets/index");
@@ -17,15 +17,13 @@ var marko_widgets = require("marko/widgets/index"),
     marko_widgetType = marko_registerWidget("/marko-test$1.0.0/autotests/widgets-compilation/component-inline/index.marko", function() {
       return module.exports;
     }),
-    marko_widgetAttrs = marko_widgets.attrs,
     marko_helpers = require("marko/runtime/html/helpers"),
     marko_attr = marko_helpers.a,
-    marko_attrs = marko_helpers.as,
     marko_loadTag = marko_helpers.t,
-    w_widget_tag = marko_loadTag(require("marko/widgets/taglib/widget-tag"));
+    _widget_tag = marko_loadTag(require("marko/widgets/taglib/widget-tag"));
 
 function render(data, out) {
-  w_widget_tag({
+  _widget_tag({
       type: marko_widgetType,
       _cfg: data.widgetConfig,
       _state: data.widgetState,
@@ -34,7 +32,6 @@ function render(data, out) {
       renderBody: function renderBody(out, widget, state) {
         out.w("<div" +
           marko_attr("id", widget.id) +
-          marko_attrs(marko_widgetAttrs(widget)) +
           "></div>");
       }
     }, out);

test/autotests/widgets-compilation/component-template-entry-split/expected.js

@@ -10,15 +10,13 @@ var marko_registerWidget = marko_widgets.registerWidget,
     marko_widgetType = marko_registerWidget("/marko-test$1.0.0/autotests/widgets-compilation/component-template-entry-split/widget", function() {
       return require("./widget");
     }),
-    marko_widgetAttrs = marko_widgets.attrs,
     marko_helpers = require("marko/runtime/html/helpers"),
     marko_attr = marko_helpers.a,
-    marko_attrs = marko_helpers.as,
     marko_loadTag = marko_helpers.t,
-    w_widget_tag = marko_loadTag(require("marko/widgets/taglib/widget-tag"));
+    _widget_tag = marko_loadTag(require("marko/widgets/taglib/widget-tag"));
 
 function render(data, out) {
-  w_widget_tag({
+  _widget_tag({
       type: marko_widgetType,
       _cfg: data.widgetConfig,
       _state: data.widgetState,
@@ -27,7 +25,6 @@ function render(data, out) {
       renderBody: function renderBody(out, widget, state) {
         out.w("<div" +
           marko_attr("id", widget.id) +
-          marko_attrs(marko_widgetAttrs(widget)) +
           "></div>");
       }
     }, out);