archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2025-12-08 19:26:05 +00:00
Code Issues Projects Releases Wiki Activity

transform layout tags to include tags

Browse Source
This commit is contained in:
Michael Rawlings 2017-04-05 14:52:11 -07:00 committed by Patrick Steele-Idem
parent 10333df164
commit d2b9dfa26e
9 changed files with 82 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
taglibs/layout/marko.json
View File

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

30
taglibs/layout/placeholder-tag.js
View File

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

21
taglibs/layout/put-tag.js
View File

@ -1,5 +1,18 @@
module.exports = function render(input, context) {
var layout = input.layout;
var handlePutTag = layout.handlePutTag;
handlePutTag(input);
module.exports = function render(oldNode, context) {
context.deprecate('The <layout-put> tag is deprecated. Please use <include> instead. See: https://github.com/marko-js/marko/issues/452');
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);
};

28
taglibs/layout/use-tag-transformer.js
View File

@ -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);
};

32
taglibs/layout/use-tag.js
View File

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

1
test/autotests/render/include-layout-v3-compat/expected.html Normal file
View File

@ -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

10
test/autotests/render/include-layout-v3-compat/layout-default.marko Normal file
View File

@ -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"/>

18
test/autotests/render/include-layout-v3-compat/template.marko Normal file
View File

@ -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>

3
test/autotests/render/include-layout-v3-compat/test.js Normal file
View File

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