[REF] utils: rename loadTemplates into loadFile

closes #351
This commit is contained in:
Géry Debongnie
2019-10-17 12:20:22 +02:00
committed by aab-odoo
parent 4bc49e7241
commit 0aeebd7b6e
8 changed files with 32 additions and 25 deletions
+1 -1
View File
@@ -87,7 +87,7 @@ class ClickCounter extends owl.Component {
// Application initialization // Application initialization
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
async function start() { async function start() {
const templates = await owl.utils.loadTemplates("templates.xml"); const templates = await owl.utils.loadFile("templates.xml");
const env = { const env = {
qweb: new owl.QWeb(templates) qweb: new owl.QWeb(templates)
}; };
+2 -1
View File
@@ -39,7 +39,8 @@ owl
debounce debounce
escape escape
loadJS loadJS
loadTemplates loadFile
shallowEqual
whenReady whenReady
``` ```
+15 -11
View File
@@ -7,7 +7,7 @@ functions are all available in the `owl.utils` namespace.
- [`whenReady`](#whenready): executing code when DOM is ready - [`whenReady`](#whenready): executing code when DOM is ready
- [`loadJS`](#loadjs): loading script files - [`loadJS`](#loadjs): loading script files
- [`loadTemplates`](#loadtemplates): loading xml files - [`loadFile`](#loadfile): loading a file (useful for templates)
- [`escape`](#escape): sanitizing strings - [`escape`](#escape): sanitizing strings
- [`debounce`](#debounce): limiting rate of function calls - [`debounce`](#debounce): limiting rate of function calls
- [`shallowEqual`](#shallowequal): shallow object comparison - [`shallowEqual`](#shallowequal): shallow object comparison
@@ -20,7 +20,7 @@ not ready yet, resolved directly otherwise). If called with a callback as
argument, it executes it as soon as the DOM ready (or directly). argument, it executes it as soon as the DOM ready (or directly).
```js ```js
Promise.all([loadTemplates(), owl.utils.whenReady()]).then(function([templates]) { Promise.all([loadFile('templates.xml'), owl.utils.whenReady()]).then(function([templates]) {
const qweb = new owl.QWeb(templates); const qweb = new owl.QWeb(templates);
const app = new App({ qweb }); const app = new App({ qweb });
app.mount(document.body); app.mount(document.body);
@@ -39,11 +39,12 @@ owl.utils.whenReady(function() {
## `loadJS` ## `loadJS`
`loadJS` takes a url (string) for a javascript resource, and loads it. It returns `loadJS` takes a url (string) for a javascript resource, and loads it (by adding
a promise, so the caller can properly reacts when it is ready. Also, it is smart: a script tag in the document head). It returns a promise, so the caller can
it maintains a list of urls previously loaded (or currently being loaded), and properly reacts when it is ready. Also, it is smart: it maintains a list of urls
prevent doing twice the work. previously loaded (or currently being loaded), and prevent doing twice the work.
For example, it is useful for lazy loading external libraries:
```js ```js
class MyComponent extends owl.Component { class MyComponent extends owl.Component {
willStart() { willStart() {
@@ -52,20 +53,23 @@ class MyComponent extends owl.Component {
} }
``` ```
## `loadTemplates` ## `loadFile`
`loadTemplates` is a helper function to fetch a template file. It simply `loadFile` is a helper function to fetch a file. It simply
performs a `GET` request and return the resulting string in a promise. For performs a `GET` request and returns the resulting string in a promise. The
example: initial usecase for this function is to load a template file. For example:
```js ```js
async function makeEnv() { async function makeEnv() {
const templates = await owl.utils.loadTemplates("templates.xml"); const templates = await owl.utils.loadFile("templates.xml");
const qweb = new owl.QWeb(templates); const qweb = new owl.QWeb(templates);
return { qweb }; return { qweb };
} }
``` ```
Note that unlike `loadJS`, this function returns the content of the file as a
string. It does not add a `script` tag or any other side effect.
## `escape` ## `escape`
Sometimes, we need to display dynamic data (for example user-generated data) in Sometimes, we need to display dynamic data (for example user-generated data) in
+3 -1
View File
@@ -219,7 +219,9 @@ QWeb.addDirective({
`slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: ${parentNode}, vars: extra.vars, parent: owner}));` `slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: ${parentNode}, vars: extra.vars, parent: owner}));`
); );
if (!ctx.parentNode) { if (!ctx.parentNode) {
ctx.addLine(`Promise.all(extra.promises).then(() => utils.defineProxy(result, ${parentNode}[0]))`); ctx.addLine(
`Promise.all(extra.promises).then(() => utils.defineProxy(result, ${parentNode}[0]))`
);
} }
ctx.closeIf(); ctx.closeIf();
return true; return true;
+2 -2
View File
@@ -5,7 +5,7 @@
* *
* - whenReady * - whenReady
* - loadJS * - loadJS
* - loadTemplates * - loadFile
* - escape * - escape
* - debounce * - debounce
*/ */
@@ -43,7 +43,7 @@ export function loadJS(url: string): Promise<void> {
return promise; return promise;
} }
export async function loadTemplates(url: string): Promise<string> { export async function loadFile(url: string): Promise<string> {
const result = await fetch(url); const result = await fetch(url);
if (!result.ok) { if (!result.ok) {
throw new Error("Error while fetching xml templates"); throw new Error("Error while fetching xml templates");
+1 -1
View File
@@ -79,7 +79,7 @@ describe("error handling", () => {
expect(() => qweb.addTemplate("test", "<div/>")).toThrow("already defined"); expect(() => qweb.addTemplate("test", "<div/>")).toThrow("already defined");
}); });
test("loadTemplates throw if parser error", () => { test("addTemplates throw if parser error", () => {
expect(() => { expect(() => {
qweb.addTemplates("<templates><abc>></templates>"); qweb.addTemplates("<templates><abc>></templates>");
}).toThrow("Invalid XML in template"); }).toThrow("Invalid XML in template");
+1 -1
View File
@@ -144,7 +144,7 @@ class App extends owl.Component {
// Application initialization // Application initialization
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
async function start() { async function start() {
const templates = await owl.utils.loadTemplates("templates.xml"); const templates = await owl.utils.loadFile("templates.xml");
const env = { const env = {
qweb: new owl.QWeb(templates) qweb: new owl.QWeb(templates)
}; };
+2 -2
View File
@@ -127,7 +127,7 @@ async function makeApp(js, css, xml) {
const JS = ` const JS = `
async function loadTemplates() { async function loadTemplates() {
try { try {
return owl.utils.loadTemplates('app.xml'); return owl.utils.loadFile('app.xml');
} catch(e) { } catch(e) {
console.error(\`This app requires a static server. If you have python installed, try 'python app.py'\`); console.error(\`This app requires a static server. If you have python installed, try 'python app.py'\`);
} }
@@ -430,7 +430,7 @@ App.components = { TabbedEditor };
async function start() { async function start() {
document.title = `${document.title} (v${owl.__info__.version})`; document.title = `${document.title} (v${owl.__info__.version})`;
const [templates] = await Promise.all([ const [templates] = await Promise.all([
owl.utils.loadTemplates("templates.xml"), owl.utils.loadFile("templates.xml"),
owl.utils.whenReady() owl.utils.whenReady()
]); ]);
const qweb = new owl.QWeb(templates); const qweb = new owl.QWeb(templates);