transform layout tags to include tags

taglibs/layout/marko.json

@@ -6,9 +6,7 @@
             "remove-dashes": true,
             "type": "string"
         },
-        "renderer": "./use-tag",
+        "transformer": "./use-tag.js",
-        "body-function": "getContent(__layoutHelper)",
-        "transformer": "./use-tag-transformer.js",
         "autocomplete": [
             {
                 "snippet": "layout-use(\"${1:./path/to/template.marko}\")",
@@ -22,10 +20,7 @@
     "<layout-put>": {
         "@into": "string",
         "@value": "string",
-        "renderer": "./put-tag",
+        "transformer": "./put-tag",
-        "import-var": {
-            "layout": "__layoutHelper"
-        },
         "autocomplete": [
             {
                 "snippet": "layout-put into=\"${1:name}\"",
@@ -38,10 +33,7 @@
     },
     "<layout-placeholder>": {
         "@name": "string",
-        "renderer": "./placeholder-tag",
+        "transformer": "./placeholder-tag",
-        "import-var": {
-            "content": "data.layoutContent"
-        },
         "autocomplete": [
             {
                 "snippet": "layout-placeholder name=\"${1:name}\"",

taglibs/layout/placeholder-tag.js

@@ -1,15 +1,21 @@
-module.exports = function render(input, out) {
+module.exports = function render(oldNode, context) {
-    var contentMap = input.content;
+    context.deprecate('The <layout-placeholder> tag is deprecated. Please use <include> instead. See: https://github.com/marko-js/marko/issues/452');
-    var content = contentMap ? contentMap[input.name] : null;
+    
-    if (content) {
+    var name = oldNode.getAttributeValue('name');
-        if (content.value) {
+    var builder = context.builder;
-            out.write(content.value);
+    var content = builder.memberExpression('input', name.value);
-        } else if (content.renderBody) {
+
-            content.renderBody(out);
+    var newNode = context.createNodeForEl('include');
-        }
+    newNode.addProps({ _target:content });
+
+    if (oldNode.firstChild) {
+        var ifNode = builder.ifStatement(content, [newNode]);
+        var elseNode = builder.elseStatement();
+        oldNode.moveChildrenTo(elseNode);
+
+        oldNode.replaceWith(ifNode);
+        ifNode.insertSiblingAfter(elseNode);
     } else {
-        if (input.renderBody) {
+        oldNode.replaceWith(newNode);
-            input.renderBody(out);
-        }
     }
 };

taglibs/layout/put-tag.js

@@ -1,5 +1,18 @@
-module.exports = function render(input, context) {
+module.exports = function render(oldNode, context) {
-    var layout = input.layout;
+    context.deprecate('The <layout-put> tag is deprecated. Please use <include> instead. See: https://github.com/marko-js/marko/issues/452');
-    var handlePutTag = layout.handlePutTag;
+
-    handlePutTag(input);
+    var name = oldNode.getAttributeValue('into').value;
+    var value = oldNode.getAttributeValue('value');
+
+    oldNode.removeAttribute('into');
+    oldNode.removeAttribute('value');
+
+    var newNode = context.createNodeForEl('@'+name, oldNode.getAttributes());
+
+    if (value) {
+        newNode.appendChild(context.builder.text(value));
+    }
+
+    oldNode.moveChildrenTo(newNode);
+    oldNode.replaceWith(newNode);
 };

taglibs/layout/use-tag-transformer.js

@@ -1,28 +0,0 @@
-'use strict';
-
-module.exports = function transform(el, context) {
-    var argument = el.argument;
-    if (!argument) {
-        context.addError('Invalid <layout-use> tag. Expected: <layout-use(template[, data]) ...>');
-        return;
-    }
-
-    context.deprecate('The <layout-use> tag is deprecated. Please use <include> instead. See: https://github.com/marko-js/marko/issues/452');
-
-    var builder = context.builder;
-
-    var args = builder.parseJavaScriptArgs(argument);
-    var template = args[0];
-
-    if (template.type === 'Literal') {
-        template = context.importTemplate(template.value);
-    }
-
-    if (args[1]) {
-        el.setAttributeValue('__data', args[1]);
-    }
-
-    el.argument = null;
-
-    el.setAttributeValue('__template', template);
-};

taglibs/layout/use-tag.js

@@ -1,24 +1,16 @@
-module.exports = function render(input, out) {
+'use strict';
-    var content = {};
 
-    if (input.getContent) {
+module.exports = function transform(oldNode, context) {
-        input.getContent({
+    var argument = oldNode.argument;
-            handlePutTag: function (putTag) {
+    if (!argument) {
-                content[putTag.into] = putTag;
+        context.addError('Invalid <layout-use> tag. Expected: <layout-use(template[, data]) ...>');
-            }
+        return;
-        });
     }
 
-    var dataArg = input.__data;
+    context.deprecate('The <layout-use> tag is deprecated. Please use <include> instead. See: https://github.com/marko-js/marko/issues/452');
-    var templateData = input['*'] || {};
 
-    if (dataArg) {
+    var newNode = context.createNodeForEl('include', oldNode.getAttributes(), argument);
-        for (var k in dataArg) {
+    oldNode.moveChildrenTo(newNode);
-            if (dataArg.hasOwnProperty(k) && !templateData.hasOwnProperty(k)) {
+
-                templateData[k] = dataArg[k];
+    oldNode.replaceWith(newNode);
-            }
+};
-        }
-    }
-    templateData.layoutContent = content;
-    input.__template.render(templateData, out);
-};

test/autotests/render/include-layout-v3-compat/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-v3-compat/layout-default.marko

@@ -0,0 +1,10 @@
+<h1 if(input.showHeader !== false)>
+    <layout-placeholder name="header">
+        DEFAULT TITLE
+    </layout-placeholder>
+</h1>
+<div>
+    <layout-placeholder name="body"/>
+</div>
+<layout-placeholder name="footer"/>
+<layout-placeholder name="empty"/>

test/autotests/render/include-layout-v3-compat/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(input.layoutDynamic) show-header=true>
+    <@body>BODY CONTENT</@body>
+    <@footer>FOOTER CONTENT</@footer>
+</include>

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

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