mirror of
https://github.com/S2-/ejs-render-remote
synced 2025-08-03 13:00:04 +02:00
Compare commits
28 Commits
Author | SHA1 | Date | |
---|---|---|---|
6635965706 | |||
dfcf1a4b6f | |||
4b3df71c6b | |||
af63b77c9b | |||
9aba0176f4 | |||
75401b90dd | |||
47459bd322 | |||
6ed2b48d36 | |||
23d46035e8 | |||
1c720ce9f3 | |||
8c9f23ce3f | |||
94d5afe1a0 | |||
f5a44438d1 | |||
06b2289724 | |||
9e36c0e82b | |||
6047c6b084 | |||
4dd2bfb8a9 | |||
b6e19487b7 | |||
6d6def3374 | |||
326e760c78 | |||
95a1708280 | |||
c4fc133475 | |||
c1f83b7468 | |||
a2bd63ae60 | |||
39238a44d6 | |||
b8c9b8d180 | |||
12db14bdb8 | |||
1284a11acb |
14
.editorconfig
Normal file
14
.editorconfig
Normal file
@@ -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
|
1
.eslintignore
Normal file
1
.eslintignore
Normal file
@@ -0,0 +1 @@
|
|||||||
|
node_modules
|
33
.eslintrc.json
Normal file
33
.eslintrc.json
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
{"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"]
|
||||||
|
}
|
||||||
|
}
|
11
README.md
11
README.md
@@ -2,13 +2,18 @@
|
|||||||
|
|
||||||
[ejs](https://ejs.co/) remote client side includes.
|
[ejs](https://ejs.co/) remote client side includes.
|
||||||
|
|
||||||
|
```js
|
||||||
|
html = ejs.rr('sayhello.ejs', {name: 'Simon'});
|
||||||
|
```
|
||||||
|
|
||||||
## Quick start
|
## Quick start
|
||||||
|
|
||||||
|
0. Install with `npm i ejs-render-remote`
|
||||||
1. Include this script
|
1. Include this script
|
||||||
```html
|
```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:
|
3. Render the remote template:
|
||||||
```js
|
```js
|
||||||
someDomelement.outerHTML = ejs.rr('templates/hello-world.ejs', {name: 'Simon'});
|
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)
|
### 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.
|
By doing so the call to `ejs.rr` will return the rendered template string right away.
|
||||||
|
@@ -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($) {
|
(function($) {
|
||||||
var uuidv4 = function() {
|
var uuidv4 = function() {
|
||||||
@@ -9,18 +9,27 @@
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
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);
|
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
|
||||||
if (templateFn) {
|
if (templateFn) {
|
||||||
//but first check if there is still a getter function for this template in the cache
|
try {
|
||||||
//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);
|
return templateFn(data);
|
||||||
|
} catch(ex) {
|
||||||
|
$.readyException(ex);
|
||||||
|
}
|
||||||
|
|
||||||
} 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
|
} 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
|
||||||
|
|
||||||
@@ -33,41 +42,49 @@
|
|||||||
|
|
||||||
var r = uuidv4();
|
var r = uuidv4();
|
||||||
getTemplateFn.then(function(template) {
|
getTemplateFn.then(function(template) {
|
||||||
document.getElementById(r).outerHTML = ejs.render(
|
var templateOptions = overwriteWithCacheOptions(options, templateUrl);
|
||||||
|
|
||||||
|
try {
|
||||||
|
$('#' + r).replaceWith(ejs.render(
|
||||||
template,
|
template,
|
||||||
data,
|
data,
|
||||||
{
|
templateOptions
|
||||||
cache: true,
|
));
|
||||||
filename: templateUrl
|
} 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>';
|
return '<span class="ejs-templateplaceholder" style="display: none;" id="' + r + '"></span>';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ejs.preloadTemplate = function(templateUrl) {
|
ejs.preloadTemplate = function(templateUrl, options) {
|
||||||
var d = $.Deferred();
|
var d = $.Deferred();
|
||||||
|
|
||||||
//if the template is already cached, just return.
|
//if the template is already cached, just return.
|
||||||
if (ejs.cache.get(templateUrl)) {
|
if (ejs.cache.get(templateUrl)) {
|
||||||
d.resolve();
|
d.resolve(templateUrl);
|
||||||
} else {
|
} else {
|
||||||
$.get(templateUrl)
|
$.get(templateUrl)
|
||||||
.then(function(template) {
|
.then(function(template) {
|
||||||
var templateFn = ejs.compile(template,
|
try {
|
||||||
{
|
var templateOptions = overwriteWithCacheOptions(options, templateUrl);
|
||||||
cache: true,
|
var templateFn = ejs.compile(template, templateOptions);
|
||||||
filename: templateUrl
|
|
||||||
});
|
|
||||||
|
|
||||||
ejs.cache.set(templateUrl, templateFn);
|
ejs.cache.set(templateUrl, templateFn);
|
||||||
|
d.resolve(templateUrl);
|
||||||
d.resolve();
|
} catch(ex) {
|
||||||
|
$.readyException(ex);
|
||||||
|
d.reject(ex);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return d;
|
return d;
|
||||||
}
|
};
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
2
examples/ejs.min.js
vendored
2
examples/ejs.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -9,6 +9,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<h1>ejs-render-remote example</h1>
|
<h1>ejs-render-remote example</h1>
|
||||||
<p class="hello"></p>
|
<p class="hello"></p>
|
||||||
|
<div class="sometext"></div>
|
||||||
|
|
||||||
<script src="jquery.min.js"></script>
|
<script src="jquery.min.js"></script>
|
||||||
<script src="ejs.min.js"></script>
|
<script src="ejs.min.js"></script>
|
||||||
@@ -18,6 +19,14 @@
|
|||||||
<script>
|
<script>
|
||||||
//render the template
|
//render the template
|
||||||
$('.hello').html(ejs.rr('templates/hello.ejs', {name: 'Simon'}));
|
$('.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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
1
examples/templates/somestuff.ejs
Normal file
1
examples/templates/somestuff.ejs
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<p class="stuff"></p>
|
12
package.json
12
package.json
@@ -1,11 +1,17 @@
|
|||||||
{
|
{
|
||||||
"name": "ejs-render-remote",
|
"name": "ejs-render-remote",
|
||||||
"version": "1.0.0",
|
"version": "1.0.11",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
|
"homepage": "https://github.com/S2-/ejs-render-remote",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"author": "",
|
"author": "s2 <s2@31337.it>",
|
||||||
"license": "ISC"
|
"license": "ISC",
|
||||||
|
"keywords": [
|
||||||
|
"ejs",
|
||||||
|
"templating",
|
||||||
|
"client-side"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user