renderer.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. // Copyright 2010 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview Provides a soy renderer that allows registration of
  16. * injected data ("globals") that will be passed into the rendered
  17. * templates.
  18. *
  19. * There is also an interface {@link goog.soy.InjectedDataSupplier} that
  20. * user should implement to provide the injected data for a specific
  21. * application. The injected data format is a JavaScript object:
  22. * <pre>
  23. * {'dataKey': 'value', 'otherDataKey': 'otherValue'}
  24. * </pre>
  25. *
  26. * The injected data can then be referred to in any soy templates as
  27. * part of a magic "ij" parameter. For example, {@code $ij.dataKey}
  28. * will evaluate to 'value' with the above injected data.
  29. *
  30. * @author henrywong@google.com (Henry Wong)
  31. * @author chrishenry@google.com (Chris Henry)
  32. */
  33. goog.provide('goog.soy.InjectedDataSupplier');
  34. goog.provide('goog.soy.Renderer');
  35. goog.require('goog.asserts');
  36. goog.require('goog.dom');
  37. goog.require('goog.html.uncheckedconversions');
  38. goog.require('goog.soy');
  39. goog.require('goog.soy.data.SanitizedContent');
  40. goog.require('goog.soy.data.SanitizedContentKind');
  41. goog.require('goog.string.Const');
  42. /**
  43. * Creates a new soy renderer. Note that the renderer will only be
  44. * guaranteed to work correctly within the document scope provided in
  45. * the DOM helper.
  46. *
  47. * @param {goog.soy.InjectedDataSupplier=} opt_injectedDataSupplier A supplier
  48. * that provides an injected data.
  49. * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper;
  50. * defaults to that provided by {@code goog.dom.getDomHelper()}.
  51. * @constructor
  52. */
  53. goog.soy.Renderer = function(opt_injectedDataSupplier, opt_domHelper) {
  54. /**
  55. * @type {goog.dom.DomHelper}
  56. * @private
  57. */
  58. this.dom_ = opt_domHelper || goog.dom.getDomHelper();
  59. /**
  60. * @type {goog.soy.InjectedDataSupplier}
  61. * @private
  62. */
  63. this.supplier_ = opt_injectedDataSupplier || null;
  64. /**
  65. * Map from template name to the data used to render that template.
  66. * @type {!goog.soy.Renderer.SavedTemplateRender}
  67. * @private
  68. */
  69. this.savedTemplateRenders_ = [];
  70. };
  71. /**
  72. * @typedef {Array<{template: string, data: Object, ijData: Object}>}
  73. */
  74. goog.soy.Renderer.SavedTemplateRender;
  75. /**
  76. * Renders a Soy template into a single node or a document fragment.
  77. * Delegates to {@code goog.soy.renderAsFragment}.
  78. *
  79. * @param {?function(ARG_TYPES, Object<string, *>=):*|
  80. * ?function(ARG_TYPES, null=, Object<string, *>=):*} template
  81. * The Soy template defining the element's content.
  82. * @param {ARG_TYPES=} opt_templateData The data for the template.
  83. * @return {!Node} The resulting node or document fragment.
  84. * @template ARG_TYPES
  85. */
  86. goog.soy.Renderer.prototype.renderAsFragment = function(
  87. template, opt_templateData) {
  88. this.saveTemplateRender_(template, opt_templateData);
  89. var node = goog.soy.renderAsFragment(
  90. template, opt_templateData, this.getInjectedData_(), this.dom_);
  91. this.handleRender(node);
  92. return node;
  93. };
  94. /**
  95. * Renders a Soy template into a single node. If the rendered HTML
  96. * string represents a single node, then that node is returned.
  97. * Otherwise, a DIV element is returned containing the rendered nodes.
  98. * Delegates to {@code goog.soy.renderAsElement}.
  99. *
  100. * @param {?function(ARG_TYPES, Object<string, *>=):*|
  101. * ?function(ARG_TYPES, null=, Object<string, *>=):*} template
  102. * The Soy template defining the element's content.
  103. * @param {ARG_TYPES=} opt_templateData The data for the template.
  104. * @return {!Element} Rendered template contents, wrapped in a parent DIV
  105. * element if necessary.
  106. * @template ARG_TYPES
  107. */
  108. goog.soy.Renderer.prototype.renderAsElement = function(
  109. template, opt_templateData) {
  110. this.saveTemplateRender_(template, opt_templateData);
  111. var element = goog.soy.renderAsElement(
  112. template, opt_templateData, this.getInjectedData_(), this.dom_);
  113. this.handleRender(element);
  114. return element;
  115. };
  116. /**
  117. * Renders a Soy template and then set the output string as the
  118. * innerHTML of the given element. Delegates to {@code goog.soy.renderElement}.
  119. *
  120. * @param {Element} element The element whose content we are rendering.
  121. * @param {?function(ARG_TYPES, Object<string, *>=):*|
  122. * ?function(ARG_TYPES, null=, Object<string, *>=):*} template
  123. * The Soy template defining the element's content.
  124. * @param {ARG_TYPES=} opt_templateData The data for the template.
  125. * @template ARG_TYPES
  126. */
  127. goog.soy.Renderer.prototype.renderElement = function(
  128. element, template, opt_templateData) {
  129. this.saveTemplateRender_(template, opt_templateData);
  130. goog.soy.renderElement(
  131. element, template, opt_templateData, this.getInjectedData_());
  132. this.handleRender(element);
  133. };
  134. /**
  135. * Renders a Soy template and returns the output string.
  136. * If the template is strict, it must be of kind HTML. To render strict
  137. * templates of other kinds, use {@code renderText} (for {@code kind="text"}) or
  138. * {@code renderStrictOfKind}.
  139. *
  140. * @param {?function(ARG_TYPES, Object<string, *>=):*|
  141. * ?function(ARG_TYPES, null=, Object<string, *>=):*} template
  142. * The Soy template to render.
  143. * @param {ARG_TYPES=} opt_templateData The data for the template.
  144. * @return {string} The return value of rendering the template directly.
  145. * @template ARG_TYPES
  146. */
  147. goog.soy.Renderer.prototype.render = function(template, opt_templateData) {
  148. var result =
  149. template(opt_templateData || {}, undefined, this.getInjectedData_());
  150. goog.asserts.assert(
  151. !(result instanceof goog.soy.data.SanitizedContent) ||
  152. result.contentKind === goog.soy.data.SanitizedContentKind.HTML,
  153. 'render was called with a strict template of kind other than "html"' +
  154. ' (consider using renderText or renderStrict)');
  155. this.saveTemplateRender_(template, opt_templateData);
  156. this.handleRender();
  157. return String(result);
  158. };
  159. /**
  160. * Renders a strict Soy template of kind="text" and returns the output string.
  161. * It is an error to use renderText on non-strict templates, or strict templates
  162. * of kinds other than "text".
  163. *
  164. * @param {?function(ARG_TYPES, Object<string, *>=):?goog.soy.data.UnsanitizedText|
  165. * ?function(ARG_TYPES, null=, Object<string, *>=):
  166. * ?goog.soy.data.UnsanitizedText} template The Soy template to render.
  167. * @param {ARG_TYPES=} opt_templateData The data for the template.
  168. * @return {string} The return value of rendering the template directly.
  169. * @template ARG_TYPES
  170. */
  171. goog.soy.Renderer.prototype.renderText = function(template, opt_templateData) {
  172. var result =
  173. template(opt_templateData || {}, undefined, this.getInjectedData_());
  174. goog.asserts.assertInstanceof(
  175. result, goog.soy.data.SanitizedContent,
  176. 'renderText cannot be called on a non-strict soy template');
  177. goog.asserts.assert(
  178. result.contentKind === goog.soy.data.SanitizedContentKind.TEXT,
  179. 'renderText was called with a template of kind other than "text"');
  180. this.saveTemplateRender_(template, opt_templateData);
  181. this.handleRender();
  182. return String(result);
  183. };
  184. /**
  185. * Renders a strict Soy HTML template and returns the output SanitizedHtml
  186. * object.
  187. * @param {?function(ARG_TYPES, Object<string, *>=):!goog.soy.data.SanitizedHtml|
  188. * ?function(ARG_TYPES, null=, Object<string, *>=):
  189. * !goog.soy.data.SanitizedHtml} template The Soy template to render.
  190. * @param {ARG_TYPES=} opt_templateData The data for the template.
  191. * @return {!goog.soy.data.SanitizedHtml}
  192. * @template ARG_TYPES
  193. */
  194. goog.soy.Renderer.prototype.renderStrict = function(
  195. template, opt_templateData) {
  196. return this.renderStrictOfKind(
  197. template, opt_templateData, goog.soy.data.SanitizedContentKind.HTML);
  198. };
  199. /**
  200. * Renders a strict Soy template and returns the output SanitizedUri object.
  201. *
  202. * @param {!function(ARG_TYPES, ?Object<string, *>=):!goog.soy.data.SanitizedUri|
  203. * !function(ARG_TYPES, null=, ?Object<string, *>=):
  204. * !goog.soy.data.SanitizedUri} template The Soy template to render.
  205. * @param {ARG_TYPES=} opt_templateData The data for the template.
  206. * @return {!goog.soy.data.SanitizedUri}
  207. * @template ARG_TYPES
  208. */
  209. goog.soy.Renderer.prototype.renderStrictUri = function(
  210. template, opt_templateData) {
  211. return this.renderStrictOfKind(
  212. template, opt_templateData, goog.soy.data.SanitizedContentKind.URI);
  213. };
  214. /**
  215. * Renders a strict Soy template and returns the output SanitizedContent object.
  216. *
  217. * @param {?function(ARG_TYPES, ?Object<string, *>=): RETURN_TYPE|
  218. * ?function(ARG_TYPES, null=, ?Object<string, *>=): RETURN_TYPE}
  219. * template The Soy template to render.
  220. * @param {ARG_TYPES=} opt_templateData The data for the template.
  221. * @param {goog.soy.data.SanitizedContentKind=} opt_kind The output kind to
  222. * assert. If null, the template must be of kind="html" (i.e., opt_kind
  223. * defaults to goog.soy.data.SanitizedContentKind.HTML).
  224. * @return {RETURN_TYPE} The SanitizedContent object. This return type is
  225. * generic based on the return type of the template, such as
  226. * goog.soy.data.SanitizedHtml.
  227. * @template ARG_TYPES, RETURN_TYPE
  228. */
  229. goog.soy.Renderer.prototype.renderStrictOfKind = function(
  230. template, opt_templateData, opt_kind) {
  231. var result =
  232. template(opt_templateData || {}, undefined, this.getInjectedData_());
  233. goog.asserts.assertInstanceof(
  234. result, goog.soy.data.SanitizedContent,
  235. 'renderStrict cannot be called on a non-strict soy template');
  236. goog.asserts.assert(
  237. result.contentKind ===
  238. (opt_kind || goog.soy.data.SanitizedContentKind.HTML),
  239. 'renderStrict was called with the wrong kind of template');
  240. this.saveTemplateRender_(template, opt_templateData);
  241. this.handleRender();
  242. return result;
  243. };
  244. /**
  245. * Renders a strict Soy template of kind="html" and returns the result as
  246. * a goog.html.SafeHtml object.
  247. *
  248. * Rendering a template that is not a strict template of kind="html" results in
  249. * a runtime error.
  250. *
  251. * @param {?function(ARG_TYPES, Object<string, *>=): !goog.soy.data.SanitizedHtml|
  252. * ?function(ARG_TYPES, null=, Object<string, *>=):
  253. * !goog.soy.data.SanitizedHtml} template The Soy template to render.
  254. * @param {ARG_TYPES=} opt_templateData The data for the template.
  255. * @return {!goog.html.SafeHtml}
  256. * @template ARG_TYPES
  257. */
  258. goog.soy.Renderer.prototype.renderSafeHtml = function(
  259. template, opt_templateData) {
  260. var result = this.renderStrict(template, opt_templateData);
  261. // Convert from SanitizedHtml to SafeHtml.
  262. return result.toSafeHtml();
  263. };
  264. /**
  265. * Renders a strict Soy template of kind="css" and returns the result as
  266. * a goog.html.SafeStyleSheet object.
  267. *
  268. * Rendering a template that is not a strict template of kind="css" results in
  269. * a runtime and compile-time error.
  270. *
  271. * @param {?function(ARG_TYPES, Object<string, *>=): !goog.soy.data.SanitizedCss|
  272. * ?function(ARG_TYPES, null=, Object<string, *>=):
  273. * !goog.soy.data.SanitizedCss} template The Soy template to render.
  274. * @param {ARG_TYPES=} opt_templateData The data for the template.
  275. * @return {!goog.html.SafeStyleSheet}
  276. * @template ARG_TYPES
  277. */
  278. goog.soy.Renderer.prototype.renderSafeStyleSheet = function(
  279. template, opt_templateData) {
  280. var result = this.renderStrictOfKind(
  281. template, opt_templateData, goog.soy.data.SanitizedContentKind.CSS);
  282. // TODO(mlourenco): Call result.toSafeStyleSheet() once that exists.
  283. return goog.html.uncheckedconversions
  284. .safeStyleSheetFromStringKnownToSatisfyTypeContract(
  285. goog.string.Const.from(
  286. 'Soy templates of kind CSS produce ' +
  287. 'SafeStyleSheet-contract-compliant value.'),
  288. result.toString());
  289. };
  290. /**
  291. * @return {!goog.soy.Renderer.SavedTemplateRender} Saved template data for
  292. * the renders that have happened so far.
  293. */
  294. goog.soy.Renderer.prototype.getSavedTemplateRenders = function() {
  295. return this.savedTemplateRenders_;
  296. };
  297. /**
  298. * Observes rendering of templates by this renderer.
  299. * @param {Node=} opt_node Relevant node, if available. The node may or may
  300. * not be in the document, depending on whether Soy is creating an element
  301. * or writing into an existing one.
  302. * @protected
  303. */
  304. goog.soy.Renderer.prototype.handleRender = goog.nullFunction;
  305. /**
  306. * Saves information about the current template render for debug purposes.
  307. * @param {Function} template The Soy template defining the element's content.
  308. * @param {Object=} opt_templateData The data for the template.
  309. * @private
  310. * @suppress {missingProperties} SoyJs compiler adds soyTemplateName to the
  311. * template.
  312. */
  313. goog.soy.Renderer.prototype.saveTemplateRender_ = function(
  314. template, opt_templateData) {
  315. if (goog.DEBUG) {
  316. this.savedTemplateRenders_.push({
  317. template: template.soyTemplateName,
  318. data: opt_templateData || null,
  319. ijData: this.getInjectedData_()
  320. });
  321. }
  322. };
  323. /**
  324. * Creates the injectedParams map if necessary and calls the configuration
  325. * service to prepopulate it.
  326. * @return {Object} The injected params.
  327. * @private
  328. */
  329. goog.soy.Renderer.prototype.getInjectedData_ = function() {
  330. return this.supplier_ ? this.supplier_.getData() : {};
  331. };
  332. /**
  333. * An interface for a supplier that provides Soy injected data.
  334. * @interface
  335. */
  336. goog.soy.InjectedDataSupplier = function() {};
  337. /**
  338. * Gets the injected data. Implementation may assume that
  339. * {@code goog.soy.Renderer} will treat the returned data as
  340. * immutable. The renderer will call this every time one of its
  341. * {@code render*} methods is called.
  342. * @return {Object} A key-value pair representing the injected data.
  343. */
  344. goog.soy.InjectedDataSupplier.prototype.getData = function() {};