From bd4a8735bd5cea78dfabcf9283e6322702b11eb7 Mon Sep 17 00:00:00 2001
From: Emily Stark <emily@meteor.com>
Date: Thu, 15 May 2014 18:06:55 -0700
Subject: [PATCH] {{> UI.dynamic }} for easier dynamic template picking.

See #2123.
---
 .../spacebars-compiler/spacebars-compiler.js  | 22 +++--
 packages/ui-dynamic-template/.gitignore       |  1 +
 .../ui-dynamic-template/dynamic-tests.html    | 19 ++++
 packages/ui-dynamic-template/dynamic-tests.js | 87 +++++++++++++++++++
 packages/ui-dynamic-template/dynamic.html     | 18 ++++
 packages/ui-dynamic-template/dynamic.js       |  3 +
 packages/ui-dynamic-template/package.js       | 15 ++++
 7 files changed, 160 insertions(+), 5 deletions(-)
 create mode 100644 packages/ui-dynamic-template/.gitignore
 create mode 100644 packages/ui-dynamic-template/dynamic-tests.html
 create mode 100644 packages/ui-dynamic-template/dynamic-tests.js
 create mode 100644 packages/ui-dynamic-template/dynamic.html
 create mode 100644 packages/ui-dynamic-template/dynamic.js
 create mode 100644 packages/ui-dynamic-template/package.js

diff --git a/packages/spacebars-compiler/spacebars-compiler.js b/packages/spacebars-compiler/spacebars-compiler.js
index b4d6158ec4..a24f2a11ab 100644
--- a/packages/spacebars-compiler/spacebars-compiler.js
+++ b/packages/spacebars-compiler/spacebars-compiler.js
@@ -163,10 +163,22 @@ var builtInBlockHelpers = {
   'each': 'UI.Each'
 };
 
-// These must be prefixed with `UI.` when you use them in a template.
-var builtInLexicals = {
+// Some `UI.*` paths are special in that they generate code that
+// doesn't folow the normal lookup rules for dotted symbols. The
+// following names must be prefixed with `UI.` when you use them in a
+// template.
+var builtInUIPaths = {
+  // `template` is a local variable defined in the generated render
+  // function for the template in which `UI.contentBlock` (or
+  // `UI.elseBlock`) is invoked. `template` is a reference to the
+  // template itself.
   'contentBlock': 'template.__content',
-  'elseBlock': 'template.__elseContent'
+  'elseBlock': 'template.__elseContent',
+
+  // `Template` is the global template namespace. If you define a
+  // template named `foo` in Spacebars, it gets defined as
+  // `Template.foo` in JavaScript.
+  'dynamic': 'Template.__dynamic'
 };
 
 // A "reserved name" can't be used as a <template> name.  This
@@ -288,11 +300,11 @@ var codeGenPath = function (path, opts) {
   // inclusion or as a block helper, in addition to supporting
   // `{{> UI.contentBlock}}`.
   if (path.length >= 2 &&
-      path[0] === 'UI' && builtInLexicals.hasOwnProperty(path[1])) {
+      path[0] === 'UI' && builtInUIPaths.hasOwnProperty(path[1])) {
     if (path.length > 2)
       throw new Error("Unexpected dotted path beginning with " +
                       path[0] + '.' + path[1]);
-    return builtInLexicals[path[1]];
+    return builtInUIPaths[path[1]];
   }
 
   var args = [toJSLiteral(path[0])];
diff --git a/packages/ui-dynamic-template/.gitignore b/packages/ui-dynamic-template/.gitignore
new file mode 100644
index 0000000000..677a6fc263
--- /dev/null
+++ b/packages/ui-dynamic-template/.gitignore
@@ -0,0 +1 @@
+.build*
diff --git a/packages/ui-dynamic-template/dynamic-tests.html b/packages/ui-dynamic-template/dynamic-tests.html
new file mode 100644
index 0000000000..aa9fa3f04d
--- /dev/null
+++ b/packages/ui-dynamic-template/dynamic-tests.html
@@ -0,0 +1,19 @@
+<template name="ui-dynamic-test">
+  {{> UI.dynamic templateName=templateName dataContext=templateData}}
+</template>
+
+<template name="ui-dynamic-test-no-data">
+  {{> UI.dynamic templateName=templateName}}
+</template>
+
+<template name="ui-dynamic-test-inherited-data">
+  {{#with context}}
+    {{> UI.dynamic templateName=templateName}}
+  {{else}}
+    {{> UI.dynamic templateName=templateName}}
+  {{/with}}
+</template>
+
+<template name="ui-dynamic-test-sub">
+  test{{foo}}
+</template>
diff --git a/packages/ui-dynamic-template/dynamic-tests.js b/packages/ui-dynamic-template/dynamic-tests.js
new file mode 100644
index 0000000000..e8f530ff39
--- /dev/null
+++ b/packages/ui-dynamic-template/dynamic-tests.js
@@ -0,0 +1,87 @@
+// Copied from spacebars-tests
+var renderToDiv = function (comp) {
+  var div = document.createElement("DIV");
+  UI.materialize(comp, div);
+  return div;
+};
+
+Tinytest.add(
+  "ui-dynamic-template - render template dynamically", function (test, expect) {
+    var tmpl = Template["ui-dynamic-test"];
+
+    var rvName = new ReactiveVar;
+    var rvData = new ReactiveVar;
+    tmpl.templateName = function () {
+      return rvName.get();
+    };
+    tmpl.templateData = function () {
+      return rvData.get();
+    };
+
+    // No template chosen
+    var div = renderToDiv(tmpl);
+    test.equal(div.innerHTML.trim(), "");
+
+    // Choose the "ui-dynamic-test-sub" template, with no data context
+    // passed in.
+    rvName.set("ui-dynamic-test-sub");
+    Deps.flush();
+    test.equal(div.innerHTML.trim(), "test");
+
+    // Set a data context.
+    rvData.set({ foo: "bar" });
+    Deps.flush();
+    test.equal(div.innerHTML.trim(), "testbar");
+  });
+
+// Same test as above, but the {{> UI.dynamic}} inclusion has no
+// `dataContext` argument.
+Tinytest.add(
+  "ui-dynamic-template - render template dynamically, no data context",
+  function (test, expect) {
+    var tmpl = Template["ui-dynamic-test-no-data"];
+
+    var rvName = new ReactiveVar;
+    tmpl.templateName = function () {
+      return rvName.get();
+    };
+
+    var div = renderToDiv(tmpl);
+    test.equal(div.innerHTML.trim(), "");
+
+    rvName.set("ui-dynamic-test-sub");
+    Deps.flush();
+    test.equal(div.innerHTML.trim(), "test");
+  });
+
+
+Tinytest.add(
+  "ui-dynamic-template - render template " +
+    "dynamically, data context gets inherited",
+  function (test, expect) {
+    var tmpl = Template["ui-dynamic-test-inherited-data"];
+
+    var rvName = new ReactiveVar();
+    var rvData = new ReactiveVar();
+    tmpl.templateName = function () {
+      return rvName.get();
+    };
+    tmpl.context = function () {
+      return rvData.get();
+    };
+
+    var div = renderToDiv(tmpl);
+    test.equal(div.innerHTML.trim(), "");
+
+    rvName.set("ui-dynamic-test-sub");
+    Deps.flush();
+    test.equal(div.innerHTML.trim(), "test");
+
+    // Set the top-level template's data context; this should be
+    // inherited by the dynamically-chosen template, since the {{>
+    // UI.dynamic}} inclusion didn't include a data argument.
+    rvData.set({ foo: "bar" });
+    Deps.flush();
+    test.equal(div.innerHTML.trim(), "testbar");
+  }
+);
diff --git a/packages/ui-dynamic-template/dynamic.html b/packages/ui-dynamic-template/dynamic.html
new file mode 100644
index 0000000000..18d5b5e734
--- /dev/null
+++ b/packages/ui-dynamic-template/dynamic.html
@@ -0,0 +1,18 @@
+<template name="__dynamicWithDataContext">
+  {{#with chooseTemplate templateName}}
+    {{#with ../dataContext}} {{! original 'dataContext' argument to __dynamic}}
+      {{> ..}} {{! return value from chooseTemplate(templateName) }}
+    {{else}} {{! if the 'dataContext' argument was falsey }}
+      {{> .}} {{! return value from chooseTemplate(templateName) }}
+    {{/with}}
+  {{/with}}
+</template>
+
+<template name="__dynamic">
+  {{#if dataContext}}
+    {{> __dynamicWithDataContext}}
+  {{else}}
+    {{! if there was no explicit dataContext argument, use the parent context}}
+    {{> __dynamicWithDataContext templateName=templateName dataContext=..}}
+  {{/if}}
+</template>
diff --git a/packages/ui-dynamic-template/dynamic.js b/packages/ui-dynamic-template/dynamic.js
new file mode 100644
index 0000000000..1b29c21926
--- /dev/null
+++ b/packages/ui-dynamic-template/dynamic.js
@@ -0,0 +1,3 @@
+Template.__dynamicWithDataContext.chooseTemplate = function (name) {
+  return Template[name] || null;
+};
diff --git a/packages/ui-dynamic-template/package.js b/packages/ui-dynamic-template/package.js
new file mode 100644
index 0000000000..6d0f6f9cae
--- /dev/null
+++ b/packages/ui-dynamic-template/package.js
@@ -0,0 +1,15 @@
+Package.describe({
+  summary: "Component for dynamically rendering templates",
+  internal: true
+});
+
+Package.on_use(function (api) {
+  api.use('templating');
+  api.add_files(['dynamic.html', 'dynamic.js'], 'client');
+});
+
+Package.on_test(function (api) {
+  api.use(["ui-dynamic-template", "tinytest", "test-helpers"]);
+  api.use("templating", "client");
+  api.add_files(["dynamic-tests.html", "dynamic-tests.js"], "client");
+});