1.0.13

.editorconfig

@@ -0,0 +1,14 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -0,0 +1,34 @@
+{"parserOptions":
+	{"ecmaVersion": 6},
+	"rules": {
+		"quotes": [2, "single", {"allowTemplateLiterals": true}],
+		"curly": [2, "all"],
+		"keyword-spacing": [2, {"overrides": {"else": {"before": true}, "catch": {"before": true, "after": false}}}],
+		"space-before-blocks": [2, "always"],
+		"wrap-iife": [2, "inside"],
+		"space-before-function-paren": [2, "never"],
+		"one-var": [2, "never"],
+		"vars-on-top": 0, "no-empty": [2, {"allowEmptyCatch": true}],
+		"array-bracket-spacing": [2, "never"],
+		"space-in-parens": [2, "never"],
+		"no-underscore-dangle": 0,
+		"comma-style": [2, "last"],
+		"comma-spacing": [2, {"before": false, "after": true}],
+		"space-unary-ops": [2, {"words": false, "nonwords": false}],
+		"no-multi-spaces": 2,
+		"space-infix-ops": 2,
+		"no-with": 2,
+		"indent": [2, "tab", {"SwitchCase": 1, "FunctionExpression": {"body": 1, "parameters": 1}, "MemberExpression": 0}],
+		"no-mixed-spaces-and-tabs": 2,
+		"no-trailing-spaces": 2,
+		"comma-dangle": [2, "never"],
+		"semi": [2, "always"],
+		"brace-style": [2, "1tbs", {"allowSingleLine": true}],
+		"eol-last": 2,
+		"dot-notation": 0,
+		"no-multi-str": 2,
+		"key-spacing": [2, {"afterColon": true}],
+		"func-call-spacing": [2, "never"],
+		"no-console": "warn"
+	}
+}

README.md

@@ -2,13 +2,18 @@
 
 [ejs](https://ejs.co/) remote client side includes.
 
+```js
+html = ejs.rr('sayhello.ejs', {name: 'Simon'});
+```
+
 ## Quick start
 
+0. Install with `npm i ejs-render-remote`
 1. Include this script
    ```html
-   <script src="node_modulse/ejs-render-remote/ejs-render-remote.js"></script>
+   <script src="node_modules/ejs-render-remote/ejs-render-remote.js"></script>
    ```
-2. Creare a file with your template, for example `templates/hello-world.ejs` containing `hello <%= name %>!`
+2. Create a file with your template, for example `templates/hello-world.ejs` containing `hello <%= name %>!`
 3. Render the remote template:
    ```js
    someDomelement.outerHTML = ejs.rr('templates/hello-world.ejs', {name: 'Simon'});
@@ -27,5 +32,5 @@ The resulting ejs template function is cached, so the second time this function
 
 ### ejs.preloadTemplate(templateUrl)
 
-Since `ejs.rr` is async, you can call `ejs.preloadTemplate` before invoking `ejs.rr` to warm the template chace up for that `templateUrl`.  
+Since `ejs.rr` is async, you can call `ejs.preloadTemplate` before invoking `ejs.rr` to warm the template cache up for that `templateUrl`.  
 By doing so the call to `ejs.rr` will return the rendered template string right away.

ejs-render-remote.js

@@ -1,4 +1,4 @@
-//this uses jQuery for now because ie11 support is needed (promises and fetch)
+//this uses jQuery for now because ie11 support is needed (promises, fetch, Object.assign)
 
 (function($) {
 	var uuidv4 = function() {
@@ -9,17 +9,22 @@
 		});
 	};
 
-	ejs.rr = function(templateUrl, data) {
+	var overwriteWithCacheOptions = function(options, cacheName) {
+		var cacheOptions = {
+			cache: true,
+			filename: cacheName
+		};
+
+		var templateOptions = options || {};
+
+		return $.extend(templateOptions, cacheOptions);
+	};
+
+	ejs.rr = function(templateUrl, data, options) {
 		var templateFn = ejs.cache.get(templateUrl);
 
 		//if the template is already cached, return it and we are done
 		if (templateFn) {
-			//but first check if there is still a getter function for this template in the cache
-			//if yes, remove it so we clean up a bit
-			if (ejs.cache.remove && ejs.cache.get('getFnFor' + templateUrl)) {
-				ejs.cache.remove('getFnFor' + templateUrl);
-			}
-
 			return templateFn(data);
 
 		} else { //if the template is not cached, we need to get it and render it later once we have it. remember: this happens only if the template is not already cached
@@ -32,42 +37,50 @@
 			}
 
 			var r = uuidv4();
-			getTemplateFn.then(function(template) {
-				document.getElementById(r).outerHTML = ejs.render(
-					template,
-					data,
-					{
-						cache: true,
-						filename: templateUrl
-					}
-				);
+			getTemplateFn.done(function(template) {
+				var templateOptions = overwriteWithCacheOptions(options, templateUrl);
+
+				try {
+					$('#' + r).replaceWith(ejs.render(
+						template,
+						data,
+						templateOptions
+					));
+				} catch(ex) {
+					$.readyException(ex);
+				}
+
+				//clean up the getFnFor
+				if (ejs.cache.remove && ejs.cache.get('getFnFor' + templateUrl)) {
+					ejs.cache.remove('getFnFor' + templateUrl);
+				}
 			});
 
 			return '<span class="ejs-templateplaceholder" style="display: none;" id="' + r + '"></span>';
 		}
 	};
 
-	ejs.preloadTemplate = function(templateUrl) {
+	ejs.preloadTemplate = function(templateUrl, options) {
 		var d = $.Deferred();
 
 		//if the template is already cached, just return.
 		if (ejs.cache.get(templateUrl)) {
-			d.resolve();
+			d.resolve(templateUrl);
 		} else {
 			$.get(templateUrl)
-			.then(function(template) {
-				var templateFn = ejs.compile(template,
-				{
-					cache: true,
-					filename: templateUrl
-				});
-
-				ejs.cache.set(templateUrl, templateFn);
-
-				d.resolve();
+			.done(function(template) {
+				try {
+					var templateOptions = overwriteWithCacheOptions(options, templateUrl);
+					var templateFn = ejs.compile(template, templateOptions);
+					ejs.cache.set(templateUrl, templateFn);
+					d.resolve(templateUrl);
+				} catch(ex) {
+					$.readyException(ex);
+					d.reject(ex);
+				}
 			});
 		}
 
 		return d;
-	}
+	};
 })(jQuery);

examples/index.html

@@ -9,6 +9,7 @@
 <body>
 	<h1>ejs-render-remote example</h1>
 	<p class="hello"></p>
+	<div class="sometext"></div>
 
 	<script src="jquery.min.js"></script>
 	<script src="ejs.min.js"></script>
@@ -18,6 +19,14 @@
 	<script>
 		//render the template
 		$('.hello').html(ejs.rr('templates/hello.ejs', {name: 'Simon'}));
+
+		//a more elaborate example: preload the template to be sure the dom is
+		//ready when manipulated
+		ejs.preloadTemplate('templates/somestuff.ejs')
+		.then(function(t) {
+			$('.sometext').html(ejs.rr(t)); //this is sync now
+			$('.stuff').html('hi!');
+		});
 	</script>
 </body>
 </html>

examples/templates/hello.ejs

@@ -1 +1 @@
-Hello <%= name%>!
+Hello <%= name %>!

examples/templates/somestuff.ejs

@@ -0,0 +1 @@
+<p class="stuff"></p>

package.json

@@ -1,11 +1,17 @@
 {
   "name": "ejs-render-remote",
-  "version": "1.0.0",
+  "version": "1.0.13",
   "description": "",
   "main": "index.js",
+  "homepage": "https://github.com/S2-/ejs-render-remote",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "author": "",
-  "license": "ISC"
+  "author": "s2 <s2@31337.it>",
+  "license": "ISC",
+  "keywords": [
+    "ejs",
+    "templating",
+    "client-side"
+  ]
 }