replace ejs-utils with ejs-render-remote

2019-04-14 18:23:33 +02:00
parent f4f96fa7e9
commit dde32ded55
11 changed files with 126 additions and 19 deletions
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
 	<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
 	<script type="text/javascript" src="node_modules/page/page.js"></script>
 	<script type="text/javascript" src="node_modules/ejs/ejs.min.js"></script>
-	<script type="text/javascript" src="js/thirdparty/ejs-utils.js"></script>
+	<script type="text/javascript" src="node_modules/ejs-render-remote/ejs-render-remote.js"></script>
 	<script type="text/javascript" src="js/thirdparty/arrive.js"></script>

 	<script type="text/javascript" src="js/language.js"></script>
--- a/js/index.js
+++ b/js/index.js
@@ -16,15 +16,15 @@
 	MyApp.renderShell = function() {
 		document.title = i18next.t('vanillaJS');

-		$('.js-main-content').html(ejs.rtfe('/templates/main.ejs'));
+		$('.js-main-content').html(ejs.rr('/templates/main.ejs'));
 	};

 	MyApp.renderHomePage = function() {
-		$('.js-page-container').html(ejs.rtfe('/templates/home.ejs'));
+		$('.js-page-container').html(ejs.rr('/templates/home.ejs'));
 	};

 	MyApp.renderTextPage = function() {
-		$('.js-page-container').html(ejs.rtfe('/templates/sometext.ejs', {
+		$('.js-page-container').html(ejs.rr('/templates/sometext.ejs', {
 			texts: [
 				{
 					id: 100,
@@ -39,7 +39,7 @@
 	};

 	MyApp.renderAboutPage = function() {
-		$('.js-page-container').html(ejs.rtfe('/templates/about.ejs'));
+		$('.js-page-container').html(ejs.rr('/templates/about.ejs'));
 	};

 	// events
--- a/node_modules/ejs-render-remote/README.md
+++ b/node_modules/ejs-render-remote/README.md
@@ -0,0 +1,32 @@
+# ejs-render-remote
+
+[ejs](https://ejs.co/) remote client side includes.
+
+## Quick start
+
+0. Install with `npm i ejs-render-remote`
+1. Include this script
+   ```html
+   <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 %>!`
+3. Render the remote template:
+   ```js
+   someDomelement.outerHTML = ejs.rr('templates/hello-world.ejs', {name: 'Simon'});
+   ```
+
+## Examples
+
+See `examples` folder.
+
+## api
+
+### ejs.rr(templateUrl, data)
+
+`ejs.rr` (render remote) renders the remote template. It makes an ajax call to fetch the template and then `ejs.render`s it.  
+The resulting ejs template function is cached, so the second time this function is invoked for that same template, `ejs.rr` returns the rendered template synchronously.
+
+### 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`.  
+By doing so the call to `ejs.rr` will return the rendered template string right away.
--- a/node_modules/ejs-render-remote/ejs-render-remote.js
+++ b/node_modules/ejs-render-remote/ejs-render-remote.js
@@ -1,6 +1,4 @@
-//if this does not work, call Simon. https://github.com/S2-
-
-//this uses jQuery for now because ie11 support is needed
+//this uses jQuery for now because ie11 support is needed (promises and fetch)

 (function($) {
 	var uuidv4 = function() {
@@ -11,7 +9,7 @@
 		});
 	};

-	ejs.rtfe = function(templateUrl, data) {
+	ejs.rr = function(templateUrl, data) {
 		var templateFn = ejs.cache.get(templateUrl);

 		//if the template is already cached, return it and we are done
@@ -35,15 +33,13 @@

 			var r = uuidv4();
 			getTemplateFn.then(function(template) {
-				$('#' + r).replaceWith(
-					ejs.render(
-						template,
-						data,
-						{
-							cache: true,
-							filename: templateUrl
-						}
-					)
+				document.getElementById(r).outerHTML = ejs.render(
+					template,
+					data,
+					{
+						cache: true,
+						filename: templateUrl
+					}
 				);
 			});

@@ -51,7 +47,7 @@
 		}
 	};

-	ejs.preloadTft = function(templateUrl) {
+	ejs.preloadTemplate = function(templateUrl) {
 		var d = $.Deferred();

 		//if the template is already cached, just return.
--- a/node_modules/ejs-render-remote/examples/ejs.min.js
+++ b/node_modules/ejs-render-remote/examples/ejs.min.js
--- a/node_modules/ejs-render-remote/examples/index.html
+++ b/node_modules/ejs-render-remote/examples/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>ejs-render-remote example</title>
+</head>
+<body>
+	<h1>ejs-render-remote example</h1>
+	<p class="hello"></p>
+
+	<script src="jquery.min.js"></script>
+	<script src="ejs.min.js"></script>
+	<script src="../ejs-render-remote.js"></script>
+
+
+	<script>
+		//render the template
+		$('.hello').html(ejs.rr('templates/hello.ejs', {name: 'Simon'}));
+	</script>
+</body>
+</html>
--- a/node_modules/ejs-render-remote/examples/jquery.min.js
+++ b/node_modules/ejs-render-remote/examples/jquery.min.js
--- a/node_modules/ejs-render-remote/examples/templates/hello.ejs
+++ b/node_modules/ejs-render-remote/examples/templates/hello.ejs
@@ -0,0 +1 @@
+Hello <%= name%>!
--- a/node_modules/ejs-render-remote/package.json
+++ b/node_modules/ejs-render-remote/package.json
@@ -0,0 +1,46 @@
+{
+  "_from": "ejs-render-remote",
+  "_id": "ejs-render-remote@1.0.1",
+  "_inBundle": false,
+  "_integrity": "sha512-1h2EhT9lMfSXeC4DOdKEYCtKgjasn56m0r2/Ilh4sFW+EQbVyKE0QKYKHbFJDqwrRdNK095ytRFkhFH8oatFxg==",
+  "_location": "/ejs-render-remote",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "tag",
+    "registry": true,
+    "raw": "ejs-render-remote",
+    "name": "ejs-render-remote",
+    "escapedName": "ejs-render-remote",
+    "rawSpec": "",
+    "saveSpec": null,
+    "fetchSpec": "latest"
+  },
+  "_requiredBy": [
+    "#USER",
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/ejs-render-remote/-/ejs-render-remote-1.0.1.tgz",
+  "_shasum": "11c8cef4aff9e100a05371afef28ec5a05c6d4ef",
+  "_spec": "ejs-render-remote",
+  "_where": "/home/s2/Code/vanillajs-seed",
+  "author": {
+    "name": "s2",
+    "email": "s2@31337.it"
+  },
+  "bundleDependencies": false,
+  "deprecated": false,
+  "description": "[ejs](https://ejs.co/) remote client side includes.",
+  "homepage": "https://github.com/S2-/ejs-render-remote",
+  "keywords": [
+    "ejs",
+    "templating",
+    "client-side"
+  ],
+  "license": "ISC",
+  "main": "index.js",
+  "name": "ejs-render-remote",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "version": "1.0.1"
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,11 @@
      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz",
      "integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ=="
    },
+    "ejs-render-remote": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ejs-render-remote/-/ejs-render-remote-1.0.1.tgz",
+      "integrity": "sha512-1h2EhT9lMfSXeC4DOdKEYCtKgjasn56m0r2/Ilh4sFW+EQbVyKE0QKYKHbFJDqwrRdNK095ytRFkhFH8oatFxg=="
+    },
    "i18next": {
      "version": "15.0.9",
      "resolved": "https://registry.npmjs.org/i18next/-/i18next-15.0.9.tgz",
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
  "dependencies": {
    "bootstrap": "^4.3.1",
    "ejs": "^2.6.1",
+    "ejs-render-remote": "^1.0.1",
    "i18next": "^15.0.9",
    "jquery": "^3.4.0",
    "page": "^1.11.4",