Fixes #178 - Marko v3: include tag

taglibs/core/include-tag.js

@@ -0,0 +1,56 @@
+'use strict';
+
+module.exports = function codeGenerator(el, codegen) {
+    let argument = el.argument;
+    if (!argument) {
+        return;
+    }
+
+    let builder = codegen.builder;
+    let args = builder.parseJavaScriptArgs(argument);
+    if (args.length === 0) {
+        codegen.addError('Template path is required for the <include(templatePath[, templateData])> tag');
+        return;
+    } else if (args.length > 2) {
+        codegen.addError('Wrong number of arguments passed to the <include> tag. Expected: <include(templatePath[, templateData])> tag');
+        return;
+    }
+
+    let templatePath = args[0];
+    let templateVar;
+
+    if (templatePath.type === 'Literal') {
+        templateVar = codegen.context.importTemplate(templatePath.value);
+    } else {
+        templateVar = templatePath;
+    }
+
+    let templateData = {};
+    let attrs = el.getAttributes();
+    attrs.forEach((attr) => {
+        templateData[attr.name] = attr.value;
+    });
+
+    if (el.body && el.body.length) {
+        templateData.renderBody = builder.renderBodyFunction(el.body);
+    }
+
+    if (args.length === 2) {
+        if (Object.keys(templateData).length === 0) {
+            templateData = args[1];
+        } else {
+            let mergeVar = codegen.addStaticVar('__merge', '__helpers.m');
+            templateData = builder.functionCall(mergeVar, [
+                builder.literal(templateData), // Input props from the attributes take precedence
+                args[1] // The template data object is passed as the second argument: <include("./foo.marko", { ... })/>
+            ]);
+        }
+    } else {
+        templateData = builder.literal(templateData);
+    }
+
+    let renderMethod = builder.memberExpression(templateVar, builder.identifier('render'));
+    let renderArgs = [ templateData, 'out' ];
+    let renderFunctionCall = builder.functionCall(renderMethod, renderArgs);
+    return renderFunctionCall;
+};

taglibs/core/marko-taglib.json

@@ -14,6 +14,9 @@
     "<if>": {
         "node-factory": "./if-tag"
     },
+    "<include>": {
+        "code-generator": "./include-tag"
+    },
     "<invoke>": {
         "code-generator": "./invoke-tag"
     },

test/fixtures/render/autotest-pending/include-dynamic-relative/include-target.marko

@@ -1,4 +0,0 @@
-<var name="name" value="data.name"/>
-<var name="count" value="data.count"/>
-
-Hello $name! You have $count new messages.

test/fixtures/render/autotest-pending/include-dynamic-relative/template.marko

@@ -1,2 +0,0 @@
-<var name="includePath" value="'./include-target.marko'"/>
-<include template="${includePath}" name="${'Frank'}" count="20"/>

test/fixtures/render/autotest-pending/include-template-data/include-target.marko

@@ -1,4 +0,0 @@
-<var name="name" value="data.name"/>
-<var name="count" value="data.count"/>
-
-Hello $name! You have $count new messages.

test/fixtures/render/autotest-pending/include-template-data/template.marko

@@ -1,3 +0,0 @@
-<include template="./include-target.marko" template-data="{name: 'Frank', count: 20}"/>
-<include template="./include-target.marko" template-data="{name: 'Frank'}" count="${20}"/>
-<include template="./include-target.marko" name="Frank" count="${20}"/>

test/fixtures/render/autotest-pending/include/expected.html

@@ -1 +0,0 @@
-Hello Frank! You have 20 new messages.Hello Frank! You have 20 new messages.Hello Frank! You have 20 new messages.<div class="nested"><h1>Hello Frank! You have 20 new messages.</h1><p>Have a <b>wonderful</b> day!</p><p>Have a <b>wonderful</b> day! </p></div>

test/fixtures/render/autotest-pending/include/include-nested-content.marko

@@ -1,15 +0,0 @@
-<var name="name" value="data.name"/>
-<var name="count" value="data.count"/>
-<var name="body" value="data.body"/>
-
-<div class="nested">
-    <h1>
-        Hello $name! You have $count new messages.
-    </h1>
-    <p>
-        $body
-    </p>
-    <p>
-        ${data.invokeBody()} <!-- deprecated -->
-    </p>
-</div>

test/fixtures/render/autotest-pending/include/include-target.marko

@@ -1,4 +0,0 @@
-<var name="name" value="data.name"/>
-<var name="count" value="data.count"/>
-
-Hello $name! You have $count new messages.

test/fixtures/render/autotest-pending/include/template.marko

@@ -1,10 +0,0 @@
-<include template="./include-target.marko" name="${'Frank'}" count="20"/>
-<include template="./include-target.marko" name="Frank" count="${20}"/>
-<include template="./include-target.marko" template-data="{name: 'Frank', count: 20}"/>
-<include template="./include-nested-content.marko" name="Frank" count="${20}">
-    Have a 
-    <b>
-        wonderful
-    </b>
-    day!
-</include>

test/fixtures/render/autotest/include-body-empty/expected.html

@@ -0,0 +1 @@
+<div><h1>Hello Frank! You have 20 new messages.</h1><p>No body!</p></div>

test/fixtures/render/autotest/include-body-empty/include-target.marko

@@ -0,0 +1,11 @@
+<div>
+    <h1>
+        Hello ${data.name}! You have ${data.count} new messages.
+    </h1>
+    <p if(data.renderBody)>
+        <invoke data.renderBody(out)/>
+    </p>
+    <p else>
+        No body!
+    </p>
+</div>

test/fixtures/render/autotest/include-body-empty/template.marko

@@ -0,0 +1 @@
+<include("./include-target.marko") name="Frank" count=20/>

test/fixtures/render/autotest/include-body/expected.html

@@ -0,0 +1 @@
+<div><h1>Hello Frank! You have 20 new messages.</h1><p>Have a <b>wonderful</b> day!</p></div>

test/fixtures/render/autotest/include-body/include-target.marko

@@ -0,0 +1,8 @@
+<div>
+    <h1>
+        Hello ${data.name}! You have ${data.count} new messages.
+    </h1>
+    <p>
+        <invoke data.renderBody(out)/>
+    </p>
+</div>

test/fixtures/render/autotest/include-body/template.marko

@@ -0,0 +1,7 @@
+<include("./include-target.marko") name="Frank" count=20>
+    Have a
+    <b>
+        wonderful
+    </b>
+    day!
+</include>

test/fixtures/render/autotest/include-data-body/expected.html

@@ -0,0 +1 @@
+<div><h1>Hello Frank! You have 20 new messages.</h1><p>Have a <b>wonderful</b> day!</p></div><div><h1>Hello Frank! You have 20 new messages.</h1><p>Have a <b>wonderful</b> day!</p></div>

test/fixtures/render/autotest/include-data-body/include-target.marko

@@ -0,0 +1,8 @@
+<div>
+    <h1>
+        Hello ${data.name}! You have ${data.count} new messages.
+    </h1>
+    <p>
+        <invoke data.renderBody(out)/>
+    </p>
+</div>

test/fixtures/render/autotest/include-data-body/template.marko

@@ -0,0 +1,14 @@
+<include("./include-target.marko", {name: 'Frank'}) count=20>
+    Have a
+    <b>
+        wonderful
+    </b>
+    day!
+</include>
+<include("./include-target.marko", {name: 'Frank', count: 20})>
+    Have a
+    <b>
+        wonderful
+    </b>
+    day!
+</include>

test/fixtures/render/autotest/include-data/include-target.marko

@@ -0,0 +1 @@
+- Hello ${data.name}! You have ${data.count} new messages.

test/fixtures/render/autotest/include-data/template.marko

@@ -0,0 +1,3 @@
+<include("./include-target.marko", {name: 'Frank'}) count=20/>
+<include("./include-target.marko", {name: 'Frank', count: 20})/>
+<include("./include-target.marko", {name: 'Frank', count: 10}) count=20/>

test/fixtures/render/autotest/include-data/test.js

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

test/fixtures/render/autotest/include-dynamic/include-target.marko

@@ -0,0 +1 @@
+- Hello ${data.name}! You have ${data.count} new messages.

test/fixtures/render/autotest/include-dynamic/template.marko

@@ -0,0 +1 @@
+<include(data.includeTarget) name='Frank' count=20/>

test/fixtures/render/autotest/include-dynamic/test.js

@@ -0,0 +1,4 @@
+var includeTarget = require('./include-target.marko');
+exports.templateData = {
+    includeTarget: includeTarget
+};

test/fixtures/render/autotest/include/expected.html

@@ -0,0 +1 @@
+Hello Frank! You have 20 new messages.

test/fixtures/render/autotest/include/include-target.marko

@@ -0,0 +1 @@
+- Hello ${data.name}! You have ${data.count} new messages.

test/fixtures/render/autotest/include/template.marko

@@ -0,0 +1 @@
+<include("./include-target.marko") name='Frank' count=20/>

test/fixtures/render/autotest/include/test.js

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