s2/vanillajs-seed
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

replace ejs-utils with ejs-render-remote

Browse Source
This commit is contained in:
s2
2019-04-14 18:23:33 +02:00
parent f4f96fa7e9
commit dde32ded55
11 changed files with 126 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -18,7 +18,7 @@
<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotifyButtons.js"></script> <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/page/page.js"></script>
<script type="text/javascript" src="node_modules/ejs/ejs.min.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/thirdparty/arrive.js"></script>
<script type="text/javascript" src="js/language.js"></script> <script type="text/javascript" src="js/language.js"></script>

8
js/index.js
View File

@@ -16,15 +16,15 @@
MyApp.renderShell = function() { MyApp.renderShell = function() {
document.title = i18next.t('vanillaJS'); 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() { MyApp.renderHomePage = function() {
$('.js-page-container').html(ejs.rtfe('/templates/home.ejs')); $('.js-page-container').html(ejs.rr('/templates/home.ejs'));
}; };
MyApp.renderTextPage = function() { MyApp.renderTextPage = function() {
$('.js-page-container').html(ejs.rtfe('/templates/sometext.ejs', { $('.js-page-container').html(ejs.rr('/templates/sometext.ejs', {
texts: [ texts: [
{ {
id: 100, id: 100,
@@ -39,7 +39,7 @@
}; };
MyApp.renderAboutPage = function() { MyApp.renderAboutPage = function() {
$('.js-page-container').html(ejs.rtfe('/templates/about.ejs')); $('.js-page-container').html(ejs.rr('/templates/about.ejs'));
}; };
// events // events

32
node_modules/ejs-render-remote/README.md generated vendored Normal file
View File

@@ -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.

24
js/thirdparty/ejs-utils.js → node_modules/ejs-render-remote/ejs-render-remote.js generated vendored
View File

@@ -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 (promises and fetch)
//this uses jQuery for now because ie11 support is needed
(function($) { (function($) {
var uuidv4 = function() { var uuidv4 = function() {
@@ -11,7 +9,7 @@
}); });
}; };
ejs.rtfe = function(templateUrl, data) { ejs.rr = function(templateUrl, data) {
var templateFn = ejs.cache.get(templateUrl); var templateFn = ejs.cache.get(templateUrl);
//if the template is already cached, return it and we are done //if the template is already cached, return it and we are done
@@ -35,15 +33,13 @@
var r = uuidv4(); var r = uuidv4();
getTemplateFn.then(function(template) { getTemplateFn.then(function(template) {
$('#' + r).replaceWith( document.getElementById(r).outerHTML = ejs.render(
ejs.render( template,
template, data,
data, {
{ cache: true,
cache: true, filename: templateUrl
filename: templateUrl }
}
)
); );
}); });
@@ -51,7 +47,7 @@
} }
}; };
ejs.preloadTft = function(templateUrl) { ejs.preloadTemplate = function(templateUrl) {
var d = $.Deferred(); var d = $.Deferred();
//if the template is already cached, just return. //if the template is already cached, just return.

1
node_modules/ejs-render-remote/examples/ejs.min.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

23
node_modules/ejs-render-remote/examples/index.html generated vendored Normal file
View File

@@ -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>

2
node_modules/ejs-render-remote/examples/jquery.min.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
node_modules/ejs-render-remote/examples/templates/hello.ejs generated vendored Normal file
View File

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

46
node_modules/ejs-render-remote/package.json generated vendored Normal file
View File

@@ -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"
}

5
package-lock.json generated
View File

@@ -22,6 +22,11 @@
"resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz", "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz",
"integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==" "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": { "i18next": {
"version": "15.0.9", "version": "15.0.9",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-15.0.9.tgz", "resolved": "https://registry.npmjs.org/i18next/-/i18next-15.0.9.tgz",

1
package.json
View File

@@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"bootstrap": "^4.3.1", "bootstrap": "^4.3.1",
"ejs": "^2.6.1", "ejs": "^2.6.1",
"ejs-render-remote": "^1.0.1",
"i18next": "^15.0.9", "i18next": "^15.0.9",
"jquery": "^3.4.0", "jquery": "^3.4.0",
"page": "^1.11.4", "page": "^1.11.4",