diff --git a/doc/quick_start.md b/doc/quick_start.md index 519f3948..ed76eaa2 100644 --- a/doc/quick_start.md +++ b/doc/quick_start.md @@ -87,7 +87,7 @@ class ClickCounter extends owl.Component { // Application initialization //------------------------------------------------------------------------------ async function start() { - const templates = await owl.utils.loadTemplates("templates.xml"); + const templates = await owl.utils.loadFile("templates.xml"); const env = { qweb: new owl.QWeb(templates) }; diff --git a/doc/readme.md b/doc/readme.md index ea10525b..32910597 100644 --- a/doc/readme.md +++ b/doc/readme.md @@ -39,7 +39,8 @@ owl debounce escape loadJS - loadTemplates + loadFile + shallowEqual whenReady ``` diff --git a/doc/utils.md b/doc/utils.md index 3292fde2..a22530d5 100644 --- a/doc/utils.md +++ b/doc/utils.md @@ -7,7 +7,7 @@ functions are all available in the `owl.utils` namespace. - [`whenReady`](#whenready): executing code when DOM is ready - [`loadJS`](#loadjs): loading script files -- [`loadTemplates`](#loadtemplates): loading xml files +- [`loadFile`](#loadfile): loading a file (useful for templates) - [`escape`](#escape): sanitizing strings - [`debounce`](#debounce): limiting rate of function calls - [`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). ```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 app = new App({ qweb }); app.mount(document.body); @@ -39,11 +39,12 @@ owl.utils.whenReady(function() { ## `loadJS` -`loadJS` takes a url (string) for a javascript resource, and loads it. It returns -a promise, so the caller can properly reacts when it is ready. Also, it is smart: -it maintains a list of urls previously loaded (or currently being loaded), and -prevent doing twice the work. +`loadJS` takes a url (string) for a javascript resource, and loads it (by adding +a script tag in the document head). It returns a promise, so the caller can +properly reacts when it is ready. Also, it is smart: it maintains a list of urls +previously loaded (or currently being loaded), and prevent doing twice the work. +For example, it is useful for lazy loading external libraries: ```js class MyComponent extends owl.Component { willStart() { @@ -52,20 +53,23 @@ class MyComponent extends owl.Component { } ``` -## `loadTemplates` +## `loadFile` -`loadTemplates` is a helper function to fetch a template file. It simply -performs a `GET` request and return the resulting string in a promise. For -example: +`loadFile` is a helper function to fetch a file. It simply +performs a `GET` request and returns the resulting string in a promise. The +initial usecase for this function is to load a template file. For example: ```js 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); 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` Sometimes, we need to display dynamic data (for example user-generated data) in diff --git a/src/qweb/extensions.ts b/src/qweb/extensions.ts index a32c952b..7e9cdb96 100644 --- a/src/qweb/extensions.ts +++ b/src/qweb/extensions.ts @@ -209,17 +209,19 @@ QWeb.addDirective({ ctx.addIf(`slot${slotKey}`); let parentNode = `c${ctx.parentNode}`; if (!ctx.parentNode) { - ctx.rootContext.shouldDefineResult = true; - ctx.rootContext.shouldDefineUtils = true; - parentNode = `children${ctx.nextID++}`; - ctx.addLine(`let ${parentNode}= []`); - ctx.addLine(`result = {}`); + ctx.rootContext.shouldDefineResult = true; + ctx.rootContext.shouldDefineUtils = true; + parentNode = `children${ctx.nextID++}`; + ctx.addLine(`let ${parentNode}= []`); + ctx.addLine(`result = {}`); } ctx.addLine( `slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: ${parentNode}, vars: extra.vars, parent: owner}));` ); 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(); return true; diff --git a/src/utils.ts b/src/utils.ts index 9fe9c6ed..4dfa6ee0 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -5,7 +5,7 @@ * * - whenReady * - loadJS - * - loadTemplates + * - loadFile * - escape * - debounce */ @@ -43,7 +43,7 @@ export function loadJS(url: string): Promise { return promise; } -export async function loadTemplates(url: string): Promise { +export async function loadFile(url: string): Promise { const result = await fetch(url); if (!result.ok) { throw new Error("Error while fetching xml templates"); diff --git a/tests/qweb/qweb.test.ts b/tests/qweb/qweb.test.ts index 8cd665e3..b9852054 100644 --- a/tests/qweb/qweb.test.ts +++ b/tests/qweb/qweb.test.ts @@ -79,7 +79,7 @@ describe("error handling", () => { expect(() => qweb.addTemplate("test", "
")).toThrow("already defined"); }); - test("loadTemplates throw if parser error", () => { + test("addTemplates throw if parser error", () => { expect(() => { qweb.addTemplates(">"); }).toThrow("Invalid XML in template"); diff --git a/tools/benchmarks/owl-master/app.js b/tools/benchmarks/owl-master/app.js index 82c36ed6..2e2c76a2 100644 --- a/tools/benchmarks/owl-master/app.js +++ b/tools/benchmarks/owl-master/app.js @@ -144,7 +144,7 @@ class App extends owl.Component { // Application initialization //------------------------------------------------------------------------------ async function start() { - const templates = await owl.utils.loadTemplates("templates.xml"); + const templates = await owl.utils.loadFile("templates.xml"); const env = { qweb: new owl.QWeb(templates) }; diff --git a/tools/playground/app.js b/tools/playground/app.js index 100a28c5..2333aa4f 100644 --- a/tools/playground/app.js +++ b/tools/playground/app.js @@ -127,7 +127,7 @@ async function makeApp(js, css, xml) { const JS = ` async function loadTemplates() { try { - return owl.utils.loadTemplates('app.xml'); + return owl.utils.loadFile('app.xml'); } catch(e) { 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() { document.title = `${document.title} (v${owl.__info__.version})`; const [templates] = await Promise.all([ - owl.utils.loadTemplates("templates.xml"), + owl.utils.loadFile("templates.xml"), owl.utils.whenReady() ]); const qweb = new owl.QWeb(templates);