Fixes #209 - Marko v3: Re-introduce support for the layout taglib

taglibs/layout/marko-taglib.json

@@ -1,12 +1,14 @@
 {
     "<layout-use>": {
-        "@template": "template",
+        "@__template": "template",
+        "@__data": "template",
         "@*": {
             "remove-dashes": true,
             "type": "string"
         },
         "renderer": "./use-tag",
-        "body-function": "getContent(__layoutHelper)"
+        "body-function": "getContent(__layoutHelper)",
+        "transformer": "./use-tag-transformer.js"
     },
     "<layout-put>": {
         "@into": "string",

taglibs/layout/placeholder-tag.js

@@ -1,5 +1,5 @@
 module.exports = function render(input, out) {
-    var contentMap = input.content || out.getAttribute('layoutContent');
+    var contentMap = input.content;
     var content = contentMap ? contentMap[input.name] : null;
     if (content) {
         if (content.value) {

taglibs/layout/put-tag.js

@@ -1,5 +1,5 @@
 module.exports = function render(input, context) {
     var layout = input.layout;
-    var handlePutTag = layout ? layout.handlePutTag : context.getAttribute('handlePutTag');
+    var handlePutTag = layout.handlePutTag;
     handlePutTag(input);
 };

taglibs/layout/use-tag-transformer.js

@@ -0,0 +1,25 @@
+'use strict';
+
+module.exports = function transform(el, context) {
+    var argument = el.argument;
+    if (!argument) {
+        context.addError(el, 'Invalid <layout-use> tag. Expected: <layout-use(template[, data]) ...>');
+        return;
+    }
+    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

@@ -9,7 +9,16 @@ module.exports = function render(input, context) {
         });
     }
 
-    var viewModel = input['*'] || {};
-    viewModel.layoutContent = content;
-    input.template.render(viewModel, context);
+    var dataArg = input.__data;
+    var templateData = input['*'] || {};
+
+    if (dataArg) {
+        for (var k in dataArg) {
+            if (dataArg.hasOwnProperty(k) && !templateData.hasOwnProperty(k)) {
+                templateData[k] = dataArg[k];
+            }
+        }
+    }
+    templateData.layoutContent = content;
+    input.__template.render(templateData, context);
 };

test/fixtures/render/autotest-pending/layout-use/test.js

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

test/fixtures/render/autotest/layout-use-data-attrs/expected.html

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

test/fixtures/render/autotest/layout-use-data-attrs/layout-default.marko

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

test/fixtures/render/autotest/layout-use-data-attrs/template.marko

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

test/fixtures/render/autotest/layout-use-data-attrs/test.js

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

test/fixtures/render/autotest/layout-use-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/fixtures/render/autotest/layout-use-data/layout-default.marko

@@ -1,4 +1,4 @@
-<h1 if="data.showHeader !== false">
+<h1 if(data.showHeader !== false)>
     <layout-placeholder name="header">
         DEFAULT TITLE
     </layout-placeholder>

test/fixtures/render/autotest/layout-use-data/template.marko

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

test/fixtures/render/autotest/layout-use-data/test.js

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

test/fixtures/render/autotest/layout-use-html-ext/template.marko

@@ -1,4 +1,4 @@
-<layout-use template="./layout-default.html">
+<layout-use("./layout-default.html")>
     <layout-put into="body">BODY CONTENT</layout-put>
     <layout-put into="footer">FOOTER CONTENT</layout-put>
 </layout-use>

test/fixtures/render/autotest/layout-use/layout-default.marko

@@ -0,0 +1,10 @@
+<h1 if(data.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/fixtures/render/autotest/layout-use/template.marko

@@ -1,18 +1,18 @@
-<layout-use template="./layout-default.marko" show-header="$false">
+<layout-use("./layout-default.marko") show-header=false>
     <layout-put into="body">BODY CONTENT</layout-put>
     <layout-put into="footer">FOOTER CONTENT</layout-put>
 </layout-use>
-<layout-use template="./layout-default.marko" show-header="$true">
+<layout-use("./layout-default.marko") show-header=true>
     <layout-put into="header">HEADER CONTENT</layout-put>
     <layout-put into="body">BODY CONTENT</layout-put>
     <layout-put into="footer">FOOTER CONTENT</layout-put>
 </layout-use>
-<layout-use template="./layout-default.marko" show-header="$true">
+<layout-use("./layout-default.marko") show-header=true>
     <layout-put into="header" value="VALUE HEADER"/>
     <layout-put into="body">BODY CONTENT</layout-put>
     <layout-put into="footer">FOOTER CONTENT</layout-put>
 </layout-use>
-<layout-use template="${require.resolve('./layout-default.marko')}" show-header="$true">
+<layout-use(data.layoutDynamic) show-header=true>
     <layout-put into="body">BODY CONTENT</layout-put>
     <layout-put into="footer">FOOTER CONTENT</layout-put>
 </layout-use>

test/fixtures/render/autotest/layout-use/test.js

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