mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[IMP] tools: expose template compiler as npm command
Previously, we made it possible to compile templates ahead of time as
this was required by the owl devtools. Unfortunately, no effort was made
at the time to make this ahead-of-time compiler outside of the owl repo.
This commit refactors the AoT template compiler by splitting it in two
parts: a typescript module that gets bundled in the dist folder that
gives a programmatic way to call the standalone compiler from another
javascript module by importing it, and a command line utility that is
exposed as an executable files available to npm run-script of dependent
modules (configured in the bin field of owl's package.json).
This allows a simple workflow for modules wanting to use owl:
`npm install @odoo/owl`
add a script to your package.json that calls compile_owl_templates on
your source files, eg:
```jsonc
{
// ...
"scripts": {
"build": "compile_owl_templates src -o dist/templates.js"
}
}
```
`npm run build`
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// This file exports a function that allows compiling templates ahead of time.
|
||||
// It is used by the "compile_owl_template" command registered in the "bin"
|
||||
// section of owl's package.json
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
import { readdir, readFile, stat } from "fs/promises";
|
||||
import path from "path";
|
||||
import "./setup_jsdom";
|
||||
// Owl imports must be made after setting up jsdom in the global namespace
|
||||
import { compile } from "..";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// helpers
|
||||
// -----------------------------------------------------------------------------
|
||||
async function getXmlFiles(paths: string[]): Promise<string[]> {
|
||||
return (
|
||||
await Promise.all(
|
||||
paths.map(async (file) => {
|
||||
const stats = await stat(path.join(file));
|
||||
if (stats.isDirectory()) {
|
||||
return await getXmlFiles(
|
||||
(await readdir(file)).map((fileName) => path.join(file, fileName))
|
||||
);
|
||||
}
|
||||
if (file.endsWith(".xml")) {
|
||||
return file;
|
||||
}
|
||||
return [];
|
||||
})
|
||||
)
|
||||
).flat();
|
||||
}
|
||||
|
||||
// adapted from https://medium.com/@mhagemann/the-ultimate-way-to-slugify-a-url-string-in-javascript-b8e4a0d849e1
|
||||
const a = "·-_,:;";
|
||||
const p = new RegExp(a.split("").join("|"), "g");
|
||||
|
||||
function slugify(str: string) {
|
||||
return str
|
||||
.replace(/\//g, "") // remove /
|
||||
.replace(/\./g, "_") // Replace . with _
|
||||
.replace(p, (c) => "_") // Replace special characters
|
||||
.replace(/&/g, "_and_") // Replace & with ‘and’
|
||||
.replace(/[^\w\-]+/g, ""); // Remove all non-word characters
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// main
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
export async function compileTemplates(paths: string[]) {
|
||||
const files = await getXmlFiles(paths);
|
||||
process.stdout.write(`Processing ${files.length} files`);
|
||||
let xmlStrings = await Promise.all(files.map((file) => readFile(file, "utf8")));
|
||||
|
||||
const templates = [];
|
||||
const errors = [];
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const fileName = files[i];
|
||||
const fileContent = xmlStrings[i];
|
||||
process.stdout.write(`.`);
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(fileContent, "text/xml");
|
||||
for (const template of doc.querySelectorAll("[t-name]")) {
|
||||
const name = template.getAttribute("t-name");
|
||||
if (template.hasAttribute("owl")) {
|
||||
template.removeAttribute("owl");
|
||||
}
|
||||
const fnName = slugify(name!);
|
||||
try {
|
||||
const fn = compile(template).toString().replace("anonymous", fnName);
|
||||
templates.push(`"${name}": ${fn},\n`);
|
||||
} catch (e) {
|
||||
errors.push({ name, fileName, e });
|
||||
}
|
||||
}
|
||||
}
|
||||
process.stdout.write(`\n`);
|
||||
|
||||
for (let { name, fileName, e } of errors) {
|
||||
console.warn(`Error while compiling '${name}' (in file ${fileName})`);
|
||||
console.error(e);
|
||||
}
|
||||
console.log(`${templates.length} templates compiled`);
|
||||
|
||||
return `export const templates = {\n ${templates.join("\n")} \n}`;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import jsdom from "jsdom";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// add global DOM stuff for compiler. Needs to be in a separate file so rollup
|
||||
// doesn't hoist the owl imports above this block of code.
|
||||
// -----------------------------------------------------------------------------
|
||||
var document = new jsdom.JSDOM("", {});
|
||||
var window = document.window;
|
||||
global.document = window.document;
|
||||
global.window = window as unknown as Window & typeof globalThis;
|
||||
global.DOMParser = window.DOMParser;
|
||||
global.Element = window.Element;
|
||||
global.Node = window.Node;
|
||||
Reference in New Issue
Block a user