Fixes #200 - Marko v3: Allow custom tag to be mapped to a template

compiler/CompileContext.js

@@ -20,6 +20,24 @@ function getTaglibPath(taglibPath) {
     }
 }
 
+function removeExt(filename) {
+    var ext = path.extname(filename);
+    if (ext) {
+        return filename.slice(0, 0 - ext.length);
+    } else {
+        return filename;
+    }
+}
+
+function requireResolve(builder, path) {
+    var requireResolveNode = builder.memberExpression(
+        builder.identifier('require'),
+        builder.identifier('resolve'));
+
+
+    return builder.functionCall(requireResolveNode, [ path ]);
+}
+
 class CompileContext {
     constructor(src, filename, builder) {
         ok(typeof src === 'string', '"src" string is required');
@@ -241,6 +259,22 @@ class CompileContext {
 
         return this._macros.registerMacro(name, params);
     }
+
+    importTemplate(relativePath) {
+        ok(typeof relativePath === 'string', '"path" should be a string');
+        var builder = this.builder;
+
+
+        // We want to add the following import:
+        // var loadTemplate = __helpers.t;
+        // var template = loadTemplate(require.resolve(<templateRequirePath>))
+
+        var loadTemplateVar = this.addStaticVar('loadTemplate', '__helpers.l');
+        var requireResolveTemplate = requireResolve(builder, builder.literal(relativePath));
+        var loadFunctionCall = builder.functionCall(loadTemplateVar, [ requireResolveTemplate ]);
+        var templateVar = this.addStaticVar(removeExt(relativePath), loadFunctionCall);
+        return templateVar;
+    }
 }
 
 module.exports = CompileContext;

compiler/ast/CustomTag.js

@@ -81,6 +81,7 @@ class CustomTag extends HtmlElement {
         var context = codegen.context;
 
         var tagDef = this.tagDef;
+        var inputProps = buildInputProps(this, context);
 
         var rendererPath = tagDef.renderer;
         if (rendererPath) {
@@ -89,10 +90,16 @@ class CustomTag extends HtmlElement {
             let loadRendererFunctionCall = builder.functionCall(loadRendererVar, [ requireRendererFunctionCall ]);
 
             let rendererVar = codegen.addStaticVar(removeExt(rendererPath), loadRendererFunctionCall);
-            var inputProps = buildInputProps(this, context);
+            let tagArgs = [ 'out', rendererVar, inputProps ];
-            var tagArgs = [ 'out', rendererVar, inputProps ];
+            let tagFunctionCall = builder.functionCall(tagVar, tagArgs);
-            var tagFunctionCall = builder.functionCall(tagVar, tagArgs);
             return tagFunctionCall;
+        } else if (tagDef.template) {
+            let templateRequirePath = context.getRequirePath(tagDef.template);
+            let templateVar = context.importTemplate(templateRequirePath);
+            let renderMethod = builder.memberExpression(templateVar, builder.identifier('render'));
+            let renderArgs = [ inputProps, 'out' ];
+            let renderFunctionCall = builder.functionCall(renderMethod, renderArgs);
+            return renderFunctionCall;
         }
     }
 }

runtime/helpers.js

@@ -187,19 +187,12 @@ module.exports = {
     /**
      * Loads a template
      */
-    l: function(path, req) {
+    l: function(path) {
         if (typeof path === 'string') {
-            if (path.charAt(0) === '.' && req.resolve) { // Check if the path is relative
-                // The path is relative so use require.resolve to fully resolve the path
-                path = req.resolve(path);
-            }
-
             return runtime.load(path);
-        } else if (path.render) {
+        } else {
             // Assume it is already a pre-loaded template
             return path;
-        } else {
-            return runtime.load(path);
         }
     },
     /**

test/fixtures/marko-taglib.json

@@ -18,5 +18,6 @@
         }
     },
     "<test-hello>": "taglib/test-hello/marko-tag.json",
+    "<test-template-as-tag>": "taglib/test-template-as-tag/marko-tag.json",
     "tags-dir": "./taglib/scanned-tags"
 }

test/fixtures/render/autotest-pending/template-as-tag/expected.html

@@ -1 +0,0 @@
-<div><h1>My Page Title</h1></div>

test/fixtures/render/autotest-pending/template-as-tag/template.marko

@@ -1,3 +0,0 @@
-<div>
-    <test-page-title title="My Page Title"/>
-</div>

test/fixtures/render/autotest/custom-tag-as-template/expected.html

@@ -0,0 +1 @@
+Hello Frank!

test/fixtures/render/autotest/custom-tag-as-template/template.marko

@@ -0,0 +1 @@
+<test-template-as-tag name="Frank"/>

test/fixtures/taglib/test-template-as-tag/marko-tag.json

@@ -0,0 +1,4 @@
+{
+    "template": "./template.marko",
+    "@name": "string"
+}

test/fixtures/taglib/test-template-as-tag/template.marko

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