This is a standalone Owl rewrite of the original cross-platform timer extension for posting work hours to Odoo timesheets.
Features
Support for both Issues and Tasks
Start and stop timer for the selected issue/task
Create Odoo timesheet lines against the linked analytic account
Show assigned issues/tasks or everyone’s items
Add, remove, or clear remote hosts
Switch between remote sessions
Download current month or current issue timesheets as CSV
`
+ );
+ const errorBlock = createBlock(`
`);
+ const remotesTableBlock = createBlock(
+ `
List of Available Remotes
Remote
Host
Database
Source
State
`
+ );
+ const remoteRowBlock = createBlock(
+ `
`
+ );
+
+ return function template(ctx, node, key = '') {
+ let errorNode = null;
+ let remoteListNode = null;
+
+ const aboutNavClass = ctx.state.activePage === PAGE_ABOUT ? 'selected' : 'notselected';
+ const optionsNavClass = ctx.state.activePage === PAGE_OPTIONS ? 'selected' : 'notselected';
+ const showAboutHandler = [() => { ctx.state.activePage = PAGE_ABOUT; }, ctx];
+ const showOptionsHandler = [() => { ctx.state.activePage = PAGE_OPTIONS; }, ctx];
+ const aboutPageClass = ctx.state.activePage === PAGE_ABOUT ? 'active_page' : 'inactive_page';
+ const optionsPageClass = ctx.state.activePage === PAGE_OPTIONS ? 'active_page' : 'inactive_page';
+
+ const formSubmitHandler = ['prevent', ctx.addRemote, ctx];
+ const formState = ctx.state.form;
+ const hostInputHandler = [(ev) => { formState.remote_host = ev.target.value; }];
+ const nameInputHandler = [(ev) => { formState.remote_name = ev.target.value; }];
+ const databaseInputHandler = [(ev) => { formState.remote_database = ev.target.value; }];
+ const issuesRadioChecked = formState.remote_datasrc === DEFAULT_DATA_SOURCE;
+ const tasksRadioChecked = formState.remote_datasrc === 'project.task';
+
+ const issuesRadioHandler = [(ev) => {
+ if (ev.target.checked) {
+ formState.remote_datasrc = DEFAULT_DATA_SOURCE;
+ }
+ }];
+
+ const tasksRadioHandler = [(ev) => {
+ if (ev.target.checked) {
+ formState.remote_datasrc = 'project.task';
+ }
+ }];
+ const addRemoteHandler = [ctx.addRemote, ctx];
+ const reloadRemotesHandler = [ctx.loadRemotes, ctx];
+ const toggleListHandler = [() => { ctx.state.showList = !ctx.state.showList; }, ctx];
+ const removeAllRemotesHandler = [ctx.removeAllRemotes, ctx];
+
+ if (ctx.state.error) {
+ errorNode = errorBlock([ctx.state.error]);
+ }
+
+ if (ctx.state.showList && ctx.state.remotes.length) {
+ ctx = Object.create(ctx);
+ const [remoteItems, , remoteCount, remoteChildren] = prepareList(ctx.state.remotes);
+ const seenRemoteKeys = new Set();
+
+ for (let i = 0; i < remoteCount; i++) {
+ ctx.remote = remoteItems[i];
+ const remoteKey = ctx.remote.url + ctx.remote.database;
+
+ if (seenRemoteKeys.has(String(remoteKey))) {
+ throw new OwlError(`Got duplicate key in t-foreach: ${remoteKey}`);
+ }
+ seenRemoteKeys.add(String(remoteKey));
+
+ const nameNode = readMoreName({ text: ctx.remote.name, limit: 18 }, key + `__1__${remoteKey}`, node, this, null);
+ const hostNode = readMoreHost({ text: ctx.remote.url, limit: 25 }, key + `__2__${remoteKey}`, node, this, null);
+ const databaseNode = readMoreDatabase({ text: ctx.remote.database, limit: 18 }, key + `__3__${remoteKey}`, node, this, null);
+ const sourceNode = readMoreSource({ text: ctx.remote.datasrc || DEFAULT_DATA_SOURCE, limit: 18 }, key + `__4__${remoteKey}`, node, this, null);
+ const stateNode = readMoreState({ text: ctx.remote.state || 'Inactive', limit: 18 }, key + `__5__${remoteKey}`, node, this, null);
+ const remoteItem = ctx.remote;
+ const deleteHandler = [() => ctx.removeRemote(remoteItem), ctx];
+
+ remoteChildren[i] = withKey(
+ remoteRowBlock([deleteHandler], [nameNode, hostNode, databaseNode, sourceNode, stateNode]),
+ remoteKey
+ );
+ }
+
+ ctx = ctx.__proto__;
+ remoteListNode = remotesTableBlock([], [list(remoteChildren)]);
+ }
+
+ return rootBlock(
+ [
+ aboutNavClass,
+ showAboutHandler,
+ optionsNavClass,
+ showOptionsHandler,
+ aboutPageClass,
+ optionsPageClass,
+ formSubmitHandler,
+ formState.remote_host,
+ hostInputHandler,
+ formState.remote_name,
+ nameInputHandler,
+ formState.remote_database,
+ databaseInputHandler,
+ issuesRadioChecked,
+ issuesRadioHandler,
+ tasksRadioChecked,
+ tasksRadioHandler,
+ addRemoteHandler,
+ reloadRemotesHandler,
+ toggleListHandler,
+ removeAllRemotesHandler,
+ ],
+ [errorNode, remoteListNode]
+ );
+ };
+}
+
+/**
+ * Main options application component.
+ */
+class OptionsApp extends Component {
+ static components = { ReadMore };
+ static template = 'OptionsApp';
+
+ setup() {
+ this.state = useState({
+ activePage: PAGE_OPTIONS,
+ remotes: [],
+ showList: true,
+ error: '',
+ form: {
+ remote_host: '',
+ remote_name: '',
+ remote_database: '',
+ remote_datasrc: DEFAULT_DATA_SOURCE,
+ },
+ });
+
+ onWillStart(async () => {
+ await this.loadRemotes();
+ });
+ }
+
+ /**
+ * Reload remote configurations from storage.
+ *
+ * @returns {Promise}
+ */
+ async loadRemotes() {
+ this.state.remotes = await readRemotes();
+ }
+
+ /**
+ * Reset the add-remote form back to defaults.
+ */
+ resetRemoteForm() {
+ this.state.form.remote_host = '';
+ this.state.form.remote_name = '';
+ this.state.form.remote_database = '';
+ this.state.form.remote_datasrc = DEFAULT_DATA_SOURCE;
+ }
+
+ /**
+ * Validate current form fields and return normalized values.
+ *
+ * @returns {{host: string, name: string, database: string, datasrc: string}|null}
+ */
+ getValidatedRemoteForm() {
+ const host = normalizeHost(this.state.form.remote_host || '');
+ const name = (this.state.form.remote_name || '').trim();
+ const database = (this.state.form.remote_database || '').trim();
+ const datasrc = this.state.form.remote_datasrc || DEFAULT_DATA_SOURCE;
+
+ if (!host || !name || !database) {
+ this.state.error = 'Fields cannot be empty';
+ return null;
+ }
+
+ if (!validURL(host)) {
+ this.state.error = 'Invalid URL syntax';
+ return null;
+ }
+
+ return { host, name, database, datasrc };
+ }
+
+ /**
+ * Add a new remote configuration.
+ *
+ * @returns {Promise}
+ */
+ async addRemote() {
+ this.state.error = '';
+
+ const validated = this.getValidatedRemoteForm();
+ if (!validated) {
+ return;
+ }
+
+ const { host, name, database, datasrc } = validated;
+ const remotes = await readRemotes();
+
+ if (remotes.some((remote) => remote.url === host && remote.database === database)) {
+ this.state.error = `${host} and ${database} already exist; duplicates are not allowed`;
+ return;
+ }
+
+ remotes.push({
+ url: host,
+ name,
+ database,
+ datasrc,
+ state: 'Inactive',
+ });
+
+ await writeRemotes(remotes);
+ await this.loadRemotes();
+ this.resetRemoteForm();
+ await notify(`Host [${host}] added successfully.`);
+ }
+
+ /**
+ * Remove a single remote configuration.
+ *
+ * @param {object} remote Remote row to remove.
+ * @returns {Promise}
+ */
+ async removeRemote(remote) {
+ const confirmed = await confirmDialog(`Are you sure you want to remove remote [${remote.url}]?`);
+ if (!confirmed) {
+ return;
+ }
+
+ await clearOdooSessionCookies(remote.url);
+ const remotes = (await readRemotes()).filter(
+ (currentRemote) => !(currentRemote.url === remote.url && currentRemote.database === remote.database)
+ );
+
+ await writeRemotes(remotes);
+ await storage.remove(remote.database);
+ await this.loadRemotes();
+ await notify(`[${remote.url}] removed successfully!`);
+ }
+
+ /**
+ * Remove every saved remote configuration.
+ *
+ * @returns {Promise}
+ */
+ async removeAllRemotes() {
+ const confirmed = await confirmDialog('Are you sure you want to remove all remotes?');
+ if (!confirmed) {
+ return;
+ }
+
+ const remotes = await readRemotes();
+ for (const remote of remotes) {
+ await clearOdooSessionCookies(remote.url);
+ await storage.remove(remote.database);
+ }
+
+ await writeRemotes([]);
+ await storage.remove(STORAGE_KEYS.remoteHostInfo);
+ await this.loadRemotes();
+ await notify('Host list removed successfully!');
+ }
+}
+
+const templates = {
+ ReadMore: createReadMoreTemplate,
+ OptionsApp: createOptionsAppTemplate,
+};
+
+mount(OptionsApp, document.getElementById('app'), { dev: true, templates });
\ No newline at end of file
diff --git a/dist/chrome/js/owl.iife.js b/dist/chrome/js/owl.iife.js
new file mode 100644
index 00000000..c26b6259
--- /dev/null
+++ b/dist/chrome/js/owl.iife.js
@@ -0,0 +1,6340 @@
+(function (exports) {
+ 'use strict';
+
+ function filterOutModifiersFromData(dataList) {
+ dataList = dataList.slice();
+ const modifiers = [];
+ let elm;
+ while ((elm = dataList[0]) && typeof elm === "string") {
+ modifiers.push(dataList.shift());
+ }
+ return { modifiers, data: dataList };
+ }
+ const config = {
+ // whether or not blockdom should normalize DOM whenever a block is created.
+ // Normalizing dom mean removing empty text nodes (or containing only spaces)
+ shouldNormalizeDom: true,
+ // this is the main event handler. Every event handler registered with blockdom
+ // will go through this function, giving it the data registered in the block
+ // and the event
+ mainEventHandler: (data, ev, currentTarget) => {
+ if (typeof data === "function") {
+ data(ev);
+ }
+ else if (Array.isArray(data)) {
+ data = filterOutModifiersFromData(data).data;
+ data[0](data[1], ev);
+ }
+ return false;
+ },
+ };
+
+ // -----------------------------------------------------------------------------
+ // Toggler node
+ // -----------------------------------------------------------------------------
+ class VToggler {
+ constructor(key, child) {
+ this.key = key;
+ this.child = child;
+ }
+ mount(parent, afterNode) {
+ this.parentEl = parent;
+ this.child.mount(parent, afterNode);
+ }
+ moveBeforeDOMNode(node, parent) {
+ this.child.moveBeforeDOMNode(node, parent);
+ }
+ moveBeforeVNode(other, afterNode) {
+ this.moveBeforeDOMNode((other && other.firstNode()) || afterNode);
+ }
+ patch(other, withBeforeRemove) {
+ if (this === other) {
+ return;
+ }
+ let child1 = this.child;
+ let child2 = other.child;
+ if (this.key === other.key) {
+ child1.patch(child2, withBeforeRemove);
+ }
+ else {
+ child2.mount(this.parentEl, child1.firstNode());
+ if (withBeforeRemove) {
+ child1.beforeRemove();
+ }
+ child1.remove();
+ this.child = child2;
+ this.key = other.key;
+ }
+ }
+ beforeRemove() {
+ this.child.beforeRemove();
+ }
+ remove() {
+ this.child.remove();
+ }
+ firstNode() {
+ return this.child.firstNode();
+ }
+ toString() {
+ return this.child.toString();
+ }
+ }
+ function toggler(key, child) {
+ return new VToggler(key, child);
+ }
+
+ // Custom error class that wraps error that happen in the owl lifecycle
+ class OwlError extends Error {
+ }
+
+ const { setAttribute: elemSetAttribute, removeAttribute } = Element.prototype;
+ const tokenList = DOMTokenList.prototype;
+ const tokenListAdd = tokenList.add;
+ const tokenListRemove = tokenList.remove;
+ const isArray = Array.isArray;
+ const { split, trim } = String.prototype;
+ const wordRegexp = /\s+/;
+ /**
+ * We regroup here all code related to updating attributes in a very loose sense:
+ * attributes, properties and classs are all managed by the functions in this
+ * file.
+ */
+ function setAttribute(key, value) {
+ switch (value) {
+ case false:
+ case undefined:
+ removeAttribute.call(this, key);
+ break;
+ case true:
+ elemSetAttribute.call(this, key, "");
+ break;
+ default:
+ elemSetAttribute.call(this, key, value);
+ }
+ }
+ function createAttrUpdater(attr) {
+ return function (value) {
+ setAttribute.call(this, attr, value);
+ };
+ }
+ function attrsSetter(attrs) {
+ if (isArray(attrs)) {
+ if (attrs[0] === "class") {
+ setClass.call(this, attrs[1]);
+ }
+ else {
+ setAttribute.call(this, attrs[0], attrs[1]);
+ }
+ }
+ else {
+ for (let k in attrs) {
+ if (k === "class") {
+ setClass.call(this, attrs[k]);
+ }
+ else {
+ setAttribute.call(this, k, attrs[k]);
+ }
+ }
+ }
+ }
+ function attrsUpdater(attrs, oldAttrs) {
+ if (isArray(attrs)) {
+ const name = attrs[0];
+ const val = attrs[1];
+ if (name === oldAttrs[0]) {
+ if (val === oldAttrs[1]) {
+ return;
+ }
+ if (name === "class") {
+ updateClass.call(this, val, oldAttrs[1]);
+ }
+ else {
+ setAttribute.call(this, name, val);
+ }
+ }
+ else {
+ removeAttribute.call(this, oldAttrs[0]);
+ setAttribute.call(this, name, val);
+ }
+ }
+ else {
+ for (let k in oldAttrs) {
+ if (!(k in attrs)) {
+ if (k === "class") {
+ updateClass.call(this, "", oldAttrs[k]);
+ }
+ else {
+ removeAttribute.call(this, k);
+ }
+ }
+ }
+ for (let k in attrs) {
+ const val = attrs[k];
+ if (val !== oldAttrs[k]) {
+ if (k === "class") {
+ updateClass.call(this, val, oldAttrs[k]);
+ }
+ else {
+ setAttribute.call(this, k, val);
+ }
+ }
+ }
+ }
+ }
+ function toClassObj(expr) {
+ const result = {};
+ switch (typeof expr) {
+ case "string":
+ // we transform here a list of classes into an object:
+ // 'hey you' becomes {hey: true, you: true}
+ const str = trim.call(expr);
+ if (!str) {
+ return {};
+ }
+ let words = split.call(str, wordRegexp);
+ for (let i = 0, l = words.length; i < l; i++) {
+ result[words[i]] = true;
+ }
+ return result;
+ case "object":
+ // this is already an object but we may need to split keys:
+ // {'a': true, 'b c': true} should become {a: true, b: true, c: true}
+ for (let key in expr) {
+ const value = expr[key];
+ if (value) {
+ key = trim.call(key);
+ if (!key) {
+ continue;
+ }
+ const words = split.call(key, wordRegexp);
+ for (let word of words) {
+ result[word] = value;
+ }
+ }
+ }
+ return result;
+ case "undefined":
+ return {};
+ case "number":
+ return { [expr]: true };
+ default:
+ return { [expr]: true };
+ }
+ }
+ function setClass(val) {
+ val = val === "" ? {} : toClassObj(val);
+ // add classes
+ const cl = this.classList;
+ for (let c in val) {
+ tokenListAdd.call(cl, c);
+ }
+ }
+ function updateClass(val, oldVal) {
+ oldVal = oldVal === "" ? {} : toClassObj(oldVal);
+ val = val === "" ? {} : toClassObj(val);
+ const cl = this.classList;
+ // remove classes
+ for (let c in oldVal) {
+ if (!(c in val)) {
+ tokenListRemove.call(cl, c);
+ }
+ }
+ // add classes
+ for (let c in val) {
+ if (!(c in oldVal)) {
+ tokenListAdd.call(cl, c);
+ }
+ }
+ }
+
+ /**
+ * Creates a batched version of a callback so that all calls to it in the same
+ * microtick will only call the original callback once.
+ *
+ * @param callback the callback to batch
+ * @returns a batched version of the original callback
+ */
+ function batched(callback) {
+ let scheduled = false;
+ return async (...args) => {
+ if (!scheduled) {
+ scheduled = true;
+ await Promise.resolve();
+ scheduled = false;
+ callback(...args);
+ }
+ };
+ }
+ /**
+ * Determine whether the given element is contained in its ownerDocument:
+ * either directly or with a shadow root in between.
+ */
+ function inOwnerDocument(el) {
+ if (!el) {
+ return false;
+ }
+ if (el.ownerDocument.contains(el)) {
+ return true;
+ }
+ const rootNode = el.getRootNode();
+ return rootNode instanceof ShadowRoot && el.ownerDocument.contains(rootNode.host);
+ }
+ /**
+ * Determine whether the given element is contained in a specific root documnet:
+ * either directly or with a shadow root in between or in an iframe.
+ */
+ function isAttachedToDocument(element, documentElement) {
+ let current = element;
+ const shadowRoot = documentElement.defaultView.ShadowRoot;
+ while (current) {
+ if (current === documentElement) {
+ return true;
+ }
+ if (current.parentNode) {
+ current = current.parentNode;
+ }
+ else if (current instanceof shadowRoot && current.host) {
+ current = current.host;
+ }
+ else {
+ return false;
+ }
+ }
+ return false;
+ }
+ function validateTarget(target) {
+ // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+ const document = target && target.ownerDocument;
+ if (document) {
+ if (!document.defaultView) {
+ throw new OwlError("Cannot mount a component: the target document is not attached to a window (defaultView is missing)");
+ }
+ const HTMLElement = document.defaultView.HTMLElement;
+ if (target instanceof HTMLElement || target instanceof ShadowRoot) {
+ if (!isAttachedToDocument(target, document)) {
+ throw new OwlError("Cannot mount a component on a detached dom node");
+ }
+ return;
+ }
+ }
+ throw new OwlError("Cannot mount component: the target is not a valid DOM element");
+ }
+ class EventBus extends EventTarget {
+ trigger(name, payload) {
+ this.dispatchEvent(new CustomEvent(name, { detail: payload }));
+ }
+ }
+ function whenReady(fn) {
+ return new Promise(function (resolve) {
+ if (document.readyState !== "loading") {
+ resolve(true);
+ }
+ else {
+ document.addEventListener("DOMContentLoaded", resolve, false);
+ }
+ }).then(fn || function () { });
+ }
+ async function loadFile(url) {
+ const result = await fetch(url);
+ if (!result.ok) {
+ throw new OwlError("Error while fetching xml templates");
+ }
+ return await result.text();
+ }
+ /*
+ * This class just transports the fact that a string is safe
+ * to be injected as HTML. Overriding a JS primitive is quite painful though
+ * so we need to redfine toString and valueOf.
+ */
+ class Markup extends String {
+ }
+ function htmlEscape(str) {
+ if (str instanceof Markup) {
+ return str;
+ }
+ if (str === undefined) {
+ return markup("");
+ }
+ if (typeof str === "number") {
+ return markup(String(str));
+ }
+ [
+ ["&", "&"],
+ ["<", "<"],
+ [">", ">"],
+ ["'", "'"],
+ ['"', """],
+ ["`", "`"],
+ ].forEach((pairs) => {
+ str = String(str).replace(new RegExp(pairs[0], "g"), pairs[1]);
+ });
+ return markup(str);
+ }
+ function markup(valueOrStrings, ...placeholders) {
+ if (!Array.isArray(valueOrStrings)) {
+ return new Markup(valueOrStrings);
+ }
+ const strings = valueOrStrings;
+ let acc = "";
+ let i = 0;
+ for (; i < placeholders.length; ++i) {
+ acc += strings[i] + htmlEscape(placeholders[i]);
+ }
+ acc += strings[i];
+ return new Markup(acc);
+ }
+
+ function createEventHandler(rawEvent) {
+ const eventName = rawEvent.split(".")[0];
+ const capture = rawEvent.includes(".capture");
+ if (rawEvent.includes(".synthetic")) {
+ return createSyntheticHandler(eventName, capture);
+ }
+ else {
+ return createElementHandler(eventName, capture);
+ }
+ }
+ // Native listener
+ let nextNativeEventId = 1;
+ function createElementHandler(evName, capture = false) {
+ let eventKey = `__event__${evName}_${nextNativeEventId++}`;
+ if (capture) {
+ eventKey = `${eventKey}_capture`;
+ }
+ function listener(ev) {
+ const currentTarget = ev.currentTarget;
+ if (!currentTarget || !inOwnerDocument(currentTarget))
+ return;
+ const data = currentTarget[eventKey];
+ if (!data)
+ return;
+ config.mainEventHandler(data, ev, currentTarget);
+ }
+ function setup(data) {
+ this[eventKey] = data;
+ this.addEventListener(evName, listener, { capture });
+ }
+ function remove() {
+ delete this[eventKey];
+ this.removeEventListener(evName, listener, { capture });
+ }
+ function update(data) {
+ this[eventKey] = data;
+ }
+ return { setup, update, remove };
+ }
+ // Synthetic handler: a form of event delegation that allows placing only one
+ // listener per event type.
+ let nextSyntheticEventId = 1;
+ function createSyntheticHandler(evName, capture = false) {
+ let eventKey = `__event__synthetic_${evName}`;
+ if (capture) {
+ eventKey = `${eventKey}_capture`;
+ }
+ setupSyntheticEvent(evName, eventKey, capture);
+ const currentId = nextSyntheticEventId++;
+ function setup(data) {
+ const _data = this[eventKey] || {};
+ _data[currentId] = data;
+ this[eventKey] = _data;
+ }
+ function remove() {
+ delete this[eventKey];
+ }
+ return { setup, update: setup, remove };
+ }
+ function nativeToSyntheticEvent(eventKey, event) {
+ let dom = event.target;
+ while (dom !== null) {
+ const _data = dom[eventKey];
+ if (_data) {
+ for (const data of Object.values(_data)) {
+ const stopped = config.mainEventHandler(data, event, dom);
+ if (stopped)
+ return;
+ }
+ }
+ dom = dom.parentNode;
+ }
+ }
+ const CONFIGURED_SYNTHETIC_EVENTS = {};
+ function setupSyntheticEvent(evName, eventKey, capture = false) {
+ if (CONFIGURED_SYNTHETIC_EVENTS[eventKey]) {
+ return;
+ }
+ document.addEventListener(evName, (event) => nativeToSyntheticEvent(eventKey, event), {
+ capture,
+ });
+ CONFIGURED_SYNTHETIC_EVENTS[eventKey] = true;
+ }
+
+ const getDescriptor$3 = (o, p) => Object.getOwnPropertyDescriptor(o, p);
+ const nodeProto$4 = Node.prototype;
+ const nodeInsertBefore$3 = nodeProto$4.insertBefore;
+ const nodeSetTextContent$1 = getDescriptor$3(nodeProto$4, "textContent").set;
+ const nodeRemoveChild$3 = nodeProto$4.removeChild;
+ // -----------------------------------------------------------------------------
+ // Multi NODE
+ // -----------------------------------------------------------------------------
+ class VMulti {
+ constructor(children) {
+ this.children = children;
+ }
+ mount(parent, afterNode) {
+ const children = this.children;
+ const l = children.length;
+ const anchors = new Array(l);
+ for (let i = 0; i < l; i++) {
+ let child = children[i];
+ if (child) {
+ child.mount(parent, afterNode);
+ }
+ else {
+ const childAnchor = document.createTextNode("");
+ anchors[i] = childAnchor;
+ nodeInsertBefore$3.call(parent, childAnchor, afterNode);
+ }
+ }
+ this.anchors = anchors;
+ this.parentEl = parent;
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ const children = this.children;
+ const anchors = this.anchors;
+ for (let i = 0, l = children.length; i < l; i++) {
+ let child = children[i];
+ if (child) {
+ child.moveBeforeDOMNode(node, parent);
+ }
+ else {
+ const anchor = anchors[i];
+ nodeInsertBefore$3.call(parent, anchor, node);
+ }
+ }
+ }
+ moveBeforeVNode(other, afterNode) {
+ if (other) {
+ const next = other.children[0];
+ afterNode = (next ? next.firstNode() : other.anchors[0]) || null;
+ }
+ const children = this.children;
+ const parent = this.parentEl;
+ const anchors = this.anchors;
+ for (let i = 0, l = children.length; i < l; i++) {
+ let child = children[i];
+ if (child) {
+ child.moveBeforeVNode(null, afterNode);
+ }
+ else {
+ const anchor = anchors[i];
+ nodeInsertBefore$3.call(parent, anchor, afterNode);
+ }
+ }
+ }
+ patch(other, withBeforeRemove) {
+ if (this === other) {
+ return;
+ }
+ const children1 = this.children;
+ const children2 = other.children;
+ const anchors = this.anchors;
+ const parentEl = this.parentEl;
+ for (let i = 0, l = children1.length; i < l; i++) {
+ const vn1 = children1[i];
+ const vn2 = children2[i];
+ if (vn1) {
+ if (vn2) {
+ vn1.patch(vn2, withBeforeRemove);
+ }
+ else {
+ const afterNode = vn1.firstNode();
+ const anchor = document.createTextNode("");
+ anchors[i] = anchor;
+ nodeInsertBefore$3.call(parentEl, anchor, afterNode);
+ if (withBeforeRemove) {
+ vn1.beforeRemove();
+ }
+ vn1.remove();
+ children1[i] = undefined;
+ }
+ }
+ else if (vn2) {
+ children1[i] = vn2;
+ const anchor = anchors[i];
+ vn2.mount(parentEl, anchor);
+ nodeRemoveChild$3.call(parentEl, anchor);
+ }
+ }
+ }
+ beforeRemove() {
+ const children = this.children;
+ for (let i = 0, l = children.length; i < l; i++) {
+ const child = children[i];
+ if (child) {
+ child.beforeRemove();
+ }
+ }
+ }
+ remove() {
+ const parentEl = this.parentEl;
+ if (this.isOnlyChild) {
+ nodeSetTextContent$1.call(parentEl, "");
+ }
+ else {
+ const children = this.children;
+ const anchors = this.anchors;
+ for (let i = 0, l = children.length; i < l; i++) {
+ const child = children[i];
+ if (child) {
+ child.remove();
+ }
+ else {
+ nodeRemoveChild$3.call(parentEl, anchors[i]);
+ }
+ }
+ }
+ }
+ firstNode() {
+ const child = this.children[0];
+ return child ? child.firstNode() : this.anchors[0];
+ }
+ toString() {
+ return this.children.map((c) => (c ? c.toString() : "")).join("");
+ }
+ }
+ function multi(children) {
+ return new VMulti(children);
+ }
+
+ const getDescriptor$2 = (o, p) => Object.getOwnPropertyDescriptor(o, p);
+ const nodeProto$3 = Node.prototype;
+ const characterDataProto$1 = CharacterData.prototype;
+ const nodeInsertBefore$2 = nodeProto$3.insertBefore;
+ const characterDataSetData$1 = getDescriptor$2(characterDataProto$1, "data").set;
+ const nodeRemoveChild$2 = nodeProto$3.removeChild;
+ class VSimpleNode {
+ constructor(text) {
+ this.text = text;
+ }
+ mountNode(node, parent, afterNode) {
+ this.parentEl = parent;
+ nodeInsertBefore$2.call(parent, node, afterNode);
+ this.el = node;
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ nodeInsertBefore$2.call(parent, this.el, node);
+ }
+ moveBeforeVNode(other, afterNode) {
+ nodeInsertBefore$2.call(this.parentEl, this.el, other ? other.el : afterNode);
+ }
+ beforeRemove() { }
+ remove() {
+ nodeRemoveChild$2.call(this.parentEl, this.el);
+ }
+ firstNode() {
+ return this.el;
+ }
+ toString() {
+ return this.text;
+ }
+ }
+ class VText$1 extends VSimpleNode {
+ mount(parent, afterNode) {
+ this.mountNode(document.createTextNode(toText(this.text)), parent, afterNode);
+ }
+ patch(other) {
+ const text2 = other.text;
+ if (this.text !== text2) {
+ characterDataSetData$1.call(this.el, toText(text2));
+ this.text = text2;
+ }
+ }
+ }
+ class VComment extends VSimpleNode {
+ mount(parent, afterNode) {
+ this.mountNode(document.createComment(toText(this.text)), parent, afterNode);
+ }
+ patch() { }
+ }
+ function text(str) {
+ return new VText$1(str);
+ }
+ function comment(str) {
+ return new VComment(str);
+ }
+ function toText(value) {
+ switch (typeof value) {
+ case "string":
+ return value;
+ case "number":
+ return String(value);
+ case "boolean":
+ return value ? "true" : "false";
+ default:
+ return value || "";
+ }
+ }
+
+ const getDescriptor$1 = (o, p) => Object.getOwnPropertyDescriptor(o, p);
+ const nodeProto$2 = Node.prototype;
+ const elementProto = Element.prototype;
+ const characterDataProto = CharacterData.prototype;
+ const characterDataSetData = getDescriptor$1(characterDataProto, "data").set;
+ const nodeGetFirstChild = getDescriptor$1(nodeProto$2, "firstChild").get;
+ const nodeGetNextSibling = getDescriptor$1(nodeProto$2, "nextSibling").get;
+ const NO_OP$1 = () => { };
+ function makePropSetter(name) {
+ return function setProp(value) {
+ // support 0, fallback to empty string for other falsy values
+ this[name] = value === 0 ? 0 : value ? value.valueOf() : "";
+ };
+ }
+ const cache$1 = {};
+ /**
+ * Compiling blocks is a multi-step process:
+ *
+ * 1. build an IntermediateTree from the HTML element. This intermediate tree
+ * is a binary tree structure that encode dynamic info sub nodes, and the
+ * path required to reach them
+ * 2. process the tree to build a block context, which is an object that aggregate
+ * all dynamic info in a list, and also, all ref indexes.
+ * 3. process the context to build appropriate builder/setter functions
+ * 4. make a dynamic block class, which will efficiently collect references and
+ * create/update dynamic locations/children
+ *
+ * @param str
+ * @returns a new block type, that can build concrete blocks
+ */
+ function createBlock(str) {
+ if (str in cache$1) {
+ return cache$1[str];
+ }
+ // step 0: prepare html base element
+ const doc = new DOMParser().parseFromString(`${str}`, "text/xml");
+ const node = doc.firstChild.firstChild;
+ if (config.shouldNormalizeDom) {
+ normalizeNode(node);
+ }
+ // step 1: prepare intermediate tree
+ const tree = buildTree(node);
+ // step 2: prepare block context
+ const context = buildContext(tree);
+ // step 3: build the final block class
+ const template = tree.el;
+ const Block = buildBlock(template, context);
+ cache$1[str] = Block;
+ return Block;
+ }
+ // -----------------------------------------------------------------------------
+ // Helper
+ // -----------------------------------------------------------------------------
+ function normalizeNode(node) {
+ if (node.nodeType === Node.TEXT_NODE) {
+ if (!/\S/.test(node.textContent)) {
+ node.remove();
+ return;
+ }
+ }
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ if (node.tagName === "pre") {
+ return;
+ }
+ }
+ for (let i = node.childNodes.length - 1; i >= 0; --i) {
+ normalizeNode(node.childNodes.item(i));
+ }
+ }
+ function buildTree(node, parent = null, domParentTree = null) {
+ switch (node.nodeType) {
+ case Node.ELEMENT_NODE: {
+ // HTMLElement
+ let currentNS = domParentTree && domParentTree.currentNS;
+ const tagName = node.tagName;
+ let el = undefined;
+ const info = [];
+ if (tagName.startsWith("block-text-")) {
+ const index = parseInt(tagName.slice(11), 10);
+ info.push({ type: "text", idx: index });
+ el = document.createTextNode("");
+ }
+ if (tagName.startsWith("block-child-")) {
+ if (!domParentTree.isRef) {
+ addRef(domParentTree);
+ }
+ const index = parseInt(tagName.slice(12), 10);
+ info.push({ type: "child", idx: index });
+ el = document.createTextNode("");
+ }
+ currentNS || (currentNS = node.namespaceURI);
+ if (!el) {
+ el = currentNS
+ ? document.createElementNS(currentNS, tagName)
+ : document.createElement(tagName);
+ }
+ if (el instanceof Element) {
+ if (!domParentTree) {
+ // some html elements may have side effects when setting their attributes.
+ // For example, setting the src attribute of an will trigger a
+ // request to get the corresponding image. This is something that we
+ // don't want at compile time. We avoid that by putting the content of
+ // the block in a element
+ const fragment = document.createElement("template").content;
+ fragment.appendChild(el);
+ }
+ const attrs = node.attributes;
+ for (let i = 0; i < attrs.length; i++) {
+ const attrName = attrs[i].name;
+ const attrValue = attrs[i].value;
+ if (attrName.startsWith("block-handler-")) {
+ const idx = parseInt(attrName.slice(14), 10);
+ info.push({
+ type: "handler",
+ idx,
+ event: attrValue,
+ });
+ }
+ else if (attrName.startsWith("block-attribute-")) {
+ const idx = parseInt(attrName.slice(16), 10);
+ info.push({
+ type: "attribute",
+ idx,
+ name: attrValue,
+ tag: tagName,
+ });
+ }
+ else if (attrName.startsWith("block-property-")) {
+ const idx = parseInt(attrName.slice(15), 10);
+ info.push({
+ type: "property",
+ idx,
+ name: attrValue,
+ tag: tagName,
+ });
+ }
+ else if (attrName === "block-attributes") {
+ info.push({
+ type: "attributes",
+ idx: parseInt(attrValue, 10),
+ });
+ }
+ else if (attrName === "block-ref") {
+ info.push({
+ type: "ref",
+ idx: parseInt(attrValue, 10),
+ });
+ }
+ else {
+ el.setAttribute(attrs[i].name, attrValue);
+ }
+ }
+ }
+ const tree = {
+ parent,
+ firstChild: null,
+ nextSibling: null,
+ el,
+ info,
+ refN: 0,
+ currentNS,
+ };
+ if (node.firstChild) {
+ const childNode = node.childNodes[0];
+ if (node.childNodes.length === 1 &&
+ childNode.nodeType === Node.ELEMENT_NODE &&
+ childNode.tagName.startsWith("block-child-")) {
+ const tagName = childNode.tagName;
+ const index = parseInt(tagName.slice(12), 10);
+ info.push({ idx: index, type: "child", isOnlyChild: true });
+ }
+ else {
+ tree.firstChild = buildTree(node.firstChild, tree, tree);
+ el.appendChild(tree.firstChild.el);
+ let curNode = node.firstChild;
+ let curTree = tree.firstChild;
+ while ((curNode = curNode.nextSibling)) {
+ curTree.nextSibling = buildTree(curNode, curTree, tree);
+ el.appendChild(curTree.nextSibling.el);
+ curTree = curTree.nextSibling;
+ }
+ }
+ }
+ if (tree.info.length) {
+ addRef(tree);
+ }
+ return tree;
+ }
+ case Node.TEXT_NODE:
+ case Node.COMMENT_NODE: {
+ // text node or comment node
+ const el = node.nodeType === Node.TEXT_NODE
+ ? document.createTextNode(node.textContent)
+ : document.createComment(node.textContent);
+ return {
+ parent: parent,
+ firstChild: null,
+ nextSibling: null,
+ el,
+ info: [],
+ refN: 0,
+ currentNS: null,
+ };
+ }
+ }
+ throw new OwlError("boom");
+ }
+ function addRef(tree) {
+ tree.isRef = true;
+ do {
+ tree.refN++;
+ } while ((tree = tree.parent));
+ }
+ function parentTree(tree) {
+ let parent = tree.parent;
+ while (parent && parent.nextSibling === tree) {
+ tree = parent;
+ parent = parent.parent;
+ }
+ return parent;
+ }
+ function buildContext(tree, ctx, fromIdx) {
+ if (!ctx) {
+ const children = new Array(tree.info.filter((v) => v.type === "child").length);
+ ctx = { collectors: [], locations: [], children, cbRefs: [], refN: tree.refN, refList: [] };
+ fromIdx = 0;
+ }
+ if (tree.refN) {
+ const initialIdx = fromIdx;
+ const isRef = tree.isRef;
+ const firstChild = tree.firstChild ? tree.firstChild.refN : 0;
+ const nextSibling = tree.nextSibling ? tree.nextSibling.refN : 0;
+ //node
+ if (isRef) {
+ for (let info of tree.info) {
+ info.refIdx = initialIdx;
+ }
+ tree.refIdx = initialIdx;
+ updateCtx(ctx, tree);
+ fromIdx++;
+ }
+ // right
+ if (nextSibling) {
+ const idx = fromIdx + firstChild;
+ ctx.collectors.push({ idx, prevIdx: initialIdx, getVal: nodeGetNextSibling });
+ buildContext(tree.nextSibling, ctx, idx);
+ }
+ // left
+ if (firstChild) {
+ ctx.collectors.push({ idx: fromIdx, prevIdx: initialIdx, getVal: nodeGetFirstChild });
+ buildContext(tree.firstChild, ctx, fromIdx);
+ }
+ }
+ return ctx;
+ }
+ function updateCtx(ctx, tree) {
+ for (let info of tree.info) {
+ switch (info.type) {
+ case "text":
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx: info.refIdx,
+ setData: setText,
+ updateData: setText,
+ });
+ break;
+ case "child":
+ if (info.isOnlyChild) {
+ // tree is the parentnode here
+ ctx.children[info.idx] = {
+ parentRefIdx: info.refIdx,
+ isOnlyChild: true,
+ };
+ }
+ else {
+ // tree is the anchor text node
+ ctx.children[info.idx] = {
+ parentRefIdx: parentTree(tree).refIdx,
+ afterRefIdx: info.refIdx,
+ };
+ }
+ break;
+ case "property": {
+ const refIdx = info.refIdx;
+ const setProp = makePropSetter(info.name);
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx,
+ setData: setProp,
+ updateData: setProp,
+ });
+ break;
+ }
+ case "attribute": {
+ const refIdx = info.refIdx;
+ let updater;
+ let setter;
+ if (info.name === "class") {
+ setter = setClass;
+ updater = updateClass;
+ }
+ else {
+ setter = createAttrUpdater(info.name);
+ updater = setter;
+ }
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx,
+ setData: setter,
+ updateData: updater,
+ });
+ break;
+ }
+ case "attributes":
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx: info.refIdx,
+ setData: attrsSetter,
+ updateData: attrsUpdater,
+ });
+ break;
+ case "handler": {
+ const { setup, update } = createEventHandler(info.event);
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx: info.refIdx,
+ setData: setup,
+ updateData: update,
+ });
+ break;
+ }
+ case "ref":
+ const index = ctx.cbRefs.push(info.idx) - 1;
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx: info.refIdx,
+ setData: makeRefSetter(index, ctx.refList),
+ updateData: NO_OP$1,
+ });
+ }
+ }
+ }
+ // -----------------------------------------------------------------------------
+ // building the concrete block class
+ // -----------------------------------------------------------------------------
+ function buildBlock(template, ctx) {
+ let B = createBlockClass(template, ctx);
+ if (ctx.cbRefs.length) {
+ const cbRefs = ctx.cbRefs;
+ const refList = ctx.refList;
+ let cbRefsNumber = cbRefs.length;
+ B = class extends B {
+ mount(parent, afterNode) {
+ refList.push(new Array(cbRefsNumber));
+ super.mount(parent, afterNode);
+ for (let cbRef of refList.pop()) {
+ cbRef();
+ }
+ }
+ remove() {
+ super.remove();
+ for (let cbRef of cbRefs) {
+ let fn = this.data[cbRef];
+ fn(null);
+ }
+ }
+ };
+ }
+ if (ctx.children.length) {
+ B = class extends B {
+ constructor(data, children) {
+ super(data);
+ this.children = children;
+ }
+ };
+ B.prototype.beforeRemove = VMulti.prototype.beforeRemove;
+ return (data, children = []) => new B(data, children);
+ }
+ return (data) => new B(data);
+ }
+ function createBlockClass(template, ctx) {
+ const { refN, collectors, children } = ctx;
+ const colN = collectors.length;
+ ctx.locations.sort((a, b) => a.idx - b.idx);
+ const locations = ctx.locations.map((loc) => ({
+ refIdx: loc.refIdx,
+ setData: loc.setData,
+ updateData: loc.updateData,
+ }));
+ const locN = locations.length;
+ const childN = children.length;
+ const childrenLocs = children;
+ const isDynamic = refN > 0;
+ // these values are defined here to make them faster to lookup in the class
+ // block scope
+ const nodeCloneNode = nodeProto$2.cloneNode;
+ const nodeInsertBefore = nodeProto$2.insertBefore;
+ const elementRemove = elementProto.remove;
+ class Block {
+ constructor(data) {
+ this.data = data;
+ }
+ beforeRemove() { }
+ remove() {
+ elementRemove.call(this.el);
+ }
+ firstNode() {
+ return this.el;
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ nodeInsertBefore.call(parent, this.el, node);
+ }
+ moveBeforeVNode(other, afterNode) {
+ nodeInsertBefore.call(this.parentEl, this.el, other ? other.el : afterNode);
+ }
+ toString() {
+ const div = document.createElement("div");
+ this.mount(div, null);
+ return div.innerHTML;
+ }
+ mount(parent, afterNode) {
+ const el = nodeCloneNode.call(template, true);
+ nodeInsertBefore.call(parent, el, afterNode);
+ this.el = el;
+ this.parentEl = parent;
+ }
+ patch(other, withBeforeRemove) { }
+ }
+ if (isDynamic) {
+ Block.prototype.mount = function mount(parent, afterNode) {
+ const el = nodeCloneNode.call(template, true);
+ // collecting references
+ const refs = new Array(refN);
+ this.refs = refs;
+ refs[0] = el;
+ for (let i = 0; i < colN; i++) {
+ const w = collectors[i];
+ refs[w.idx] = w.getVal.call(refs[w.prevIdx]);
+ }
+ // applying data to all update points
+ if (locN) {
+ const data = this.data;
+ for (let i = 0; i < locN; i++) {
+ const loc = locations[i];
+ loc.setData.call(refs[loc.refIdx], data[i]);
+ }
+ }
+ nodeInsertBefore.call(parent, el, afterNode);
+ // preparing all children
+ if (childN) {
+ const children = this.children;
+ for (let i = 0; i < childN; i++) {
+ const child = children[i];
+ if (child) {
+ const loc = childrenLocs[i];
+ const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
+ child.isOnlyChild = loc.isOnlyChild;
+ child.mount(refs[loc.parentRefIdx], afterNode);
+ }
+ }
+ }
+ this.el = el;
+ this.parentEl = parent;
+ };
+ Block.prototype.patch = function patch(other, withBeforeRemove) {
+ if (this === other) {
+ return;
+ }
+ const refs = this.refs;
+ // update texts/attributes/
+ if (locN) {
+ const data1 = this.data;
+ const data2 = other.data;
+ for (let i = 0; i < locN; i++) {
+ const val1 = data1[i];
+ const val2 = data2[i];
+ if (val1 !== val2) {
+ const loc = locations[i];
+ loc.updateData.call(refs[loc.refIdx], val2, val1);
+ }
+ }
+ this.data = data2;
+ }
+ // update children
+ if (childN) {
+ let children1 = this.children;
+ const children2 = other.children;
+ for (let i = 0; i < childN; i++) {
+ const child1 = children1[i];
+ const child2 = children2[i];
+ if (child1) {
+ if (child2) {
+ child1.patch(child2, withBeforeRemove);
+ }
+ else {
+ if (withBeforeRemove) {
+ child1.beforeRemove();
+ }
+ child1.remove();
+ children1[i] = undefined;
+ }
+ }
+ else if (child2) {
+ const loc = childrenLocs[i];
+ const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
+ child2.mount(refs[loc.parentRefIdx], afterNode);
+ children1[i] = child2;
+ }
+ }
+ }
+ };
+ }
+ return Block;
+ }
+ function setText(value) {
+ characterDataSetData.call(this, toText(value));
+ }
+ function makeRefSetter(index, refs) {
+ return function setRef(fn) {
+ refs[refs.length - 1][index] = () => fn(this);
+ };
+ }
+
+ const getDescriptor = (o, p) => Object.getOwnPropertyDescriptor(o, p);
+ const nodeProto$1 = Node.prototype;
+ const nodeInsertBefore$1 = nodeProto$1.insertBefore;
+ const nodeAppendChild = nodeProto$1.appendChild;
+ const nodeRemoveChild$1 = nodeProto$1.removeChild;
+ const nodeSetTextContent = getDescriptor(nodeProto$1, "textContent").set;
+ // -----------------------------------------------------------------------------
+ // List Node
+ // -----------------------------------------------------------------------------
+ class VList {
+ constructor(children) {
+ this.children = children;
+ }
+ mount(parent, afterNode) {
+ const children = this.children;
+ const _anchor = document.createTextNode("");
+ this.anchor = _anchor;
+ nodeInsertBefore$1.call(parent, _anchor, afterNode);
+ const l = children.length;
+ if (l) {
+ const mount = children[0].mount;
+ for (let i = 0; i < l; i++) {
+ mount.call(children[i], parent, _anchor);
+ }
+ }
+ this.parentEl = parent;
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ const children = this.children;
+ for (let i = 0, l = children.length; i < l; i++) {
+ children[i].moveBeforeDOMNode(node, parent);
+ }
+ parent.insertBefore(this.anchor, node);
+ }
+ moveBeforeVNode(other, afterNode) {
+ if (other) {
+ const next = other.children[0];
+ afterNode = (next ? next.firstNode() : other.anchor) || null;
+ }
+ const children = this.children;
+ for (let i = 0, l = children.length; i < l; i++) {
+ children[i].moveBeforeVNode(null, afterNode);
+ }
+ this.parentEl.insertBefore(this.anchor, afterNode);
+ }
+ patch(other, withBeforeRemove) {
+ if (this === other) {
+ return;
+ }
+ const ch1 = this.children;
+ const ch2 = other.children;
+ if (ch2.length === 0 && ch1.length === 0) {
+ return;
+ }
+ this.children = ch2;
+ const proto = ch2[0] || ch1[0];
+ const { mount: cMount, patch: cPatch, remove: cRemove, beforeRemove, moveBeforeVNode: cMoveBefore, firstNode: cFirstNode, } = proto;
+ const _anchor = this.anchor;
+ const isOnlyChild = this.isOnlyChild;
+ const parent = this.parentEl;
+ // fast path: no new child => only remove
+ if (ch2.length === 0 && isOnlyChild) {
+ if (withBeforeRemove) {
+ for (let i = 0, l = ch1.length; i < l; i++) {
+ beforeRemove.call(ch1[i]);
+ }
+ }
+ nodeSetTextContent.call(parent, "");
+ nodeAppendChild.call(parent, _anchor);
+ return;
+ }
+ let startIdx1 = 0;
+ let startIdx2 = 0;
+ let startVn1 = ch1[0];
+ let startVn2 = ch2[0];
+ let endIdx1 = ch1.length - 1;
+ let endIdx2 = ch2.length - 1;
+ let endVn1 = ch1[endIdx1];
+ let endVn2 = ch2[endIdx2];
+ let mapping = undefined;
+ while (startIdx1 <= endIdx1 && startIdx2 <= endIdx2) {
+ // -------------------------------------------------------------------
+ if (startVn1 === null) {
+ startVn1 = ch1[++startIdx1];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ if (endVn1 === null) {
+ endVn1 = ch1[--endIdx1];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ let startKey1 = startVn1.key;
+ let startKey2 = startVn2.key;
+ if (startKey1 === startKey2) {
+ cPatch.call(startVn1, startVn2, withBeforeRemove);
+ ch2[startIdx2] = startVn1;
+ startVn1 = ch1[++startIdx1];
+ startVn2 = ch2[++startIdx2];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ let endKey1 = endVn1.key;
+ let endKey2 = endVn2.key;
+ if (endKey1 === endKey2) {
+ cPatch.call(endVn1, endVn2, withBeforeRemove);
+ ch2[endIdx2] = endVn1;
+ endVn1 = ch1[--endIdx1];
+ endVn2 = ch2[--endIdx2];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ if (startKey1 === endKey2) {
+ // bnode moved right
+ cPatch.call(startVn1, endVn2, withBeforeRemove);
+ ch2[endIdx2] = startVn1;
+ const nextChild = ch2[endIdx2 + 1];
+ cMoveBefore.call(startVn1, nextChild, _anchor);
+ startVn1 = ch1[++startIdx1];
+ endVn2 = ch2[--endIdx2];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ if (endKey1 === startKey2) {
+ // bnode moved left
+ cPatch.call(endVn1, startVn2, withBeforeRemove);
+ ch2[startIdx2] = endVn1;
+ const nextChild = ch1[startIdx1];
+ cMoveBefore.call(endVn1, nextChild, _anchor);
+ endVn1 = ch1[--endIdx1];
+ startVn2 = ch2[++startIdx2];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ mapping = mapping || createMapping(ch1, startIdx1, endIdx1);
+ let idxInOld = mapping[startKey2];
+ if (idxInOld === undefined) {
+ cMount.call(startVn2, parent, cFirstNode.call(startVn1) || null);
+ }
+ else {
+ const elmToMove = ch1[idxInOld];
+ cMoveBefore.call(elmToMove, startVn1, null);
+ cPatch.call(elmToMove, startVn2, withBeforeRemove);
+ ch2[startIdx2] = elmToMove;
+ ch1[idxInOld] = null;
+ }
+ startVn2 = ch2[++startIdx2];
+ }
+ // ---------------------------------------------------------------------
+ if (startIdx1 <= endIdx1 || startIdx2 <= endIdx2) {
+ if (startIdx1 > endIdx1) {
+ const nextChild = ch2[endIdx2 + 1];
+ const anchor = nextChild ? cFirstNode.call(nextChild) || null : _anchor;
+ for (let i = startIdx2; i <= endIdx2; i++) {
+ cMount.call(ch2[i], parent, anchor);
+ }
+ }
+ else {
+ for (let i = startIdx1; i <= endIdx1; i++) {
+ let ch = ch1[i];
+ if (ch) {
+ if (withBeforeRemove) {
+ beforeRemove.call(ch);
+ }
+ cRemove.call(ch);
+ }
+ }
+ }
+ }
+ }
+ beforeRemove() {
+ const children = this.children;
+ const l = children.length;
+ if (l) {
+ const beforeRemove = children[0].beforeRemove;
+ for (let i = 0; i < l; i++) {
+ beforeRemove.call(children[i]);
+ }
+ }
+ }
+ remove() {
+ const { parentEl, anchor } = this;
+ if (this.isOnlyChild) {
+ nodeSetTextContent.call(parentEl, "");
+ }
+ else {
+ const children = this.children;
+ const l = children.length;
+ if (l) {
+ const remove = children[0].remove;
+ for (let i = 0; i < l; i++) {
+ remove.call(children[i]);
+ }
+ }
+ nodeRemoveChild$1.call(parentEl, anchor);
+ }
+ }
+ firstNode() {
+ const child = this.children[0];
+ return child ? child.firstNode() : undefined;
+ }
+ toString() {
+ return this.children.map((c) => c.toString()).join("");
+ }
+ }
+ function list(children) {
+ return new VList(children);
+ }
+ function createMapping(ch1, startIdx1, endIdx2) {
+ let mapping = {};
+ for (let i = startIdx1; i <= endIdx2; i++) {
+ mapping[ch1[i].key] = i;
+ }
+ return mapping;
+ }
+
+ const nodeProto = Node.prototype;
+ const nodeInsertBefore = nodeProto.insertBefore;
+ const nodeRemoveChild = nodeProto.removeChild;
+ class VHtml {
+ constructor(html) {
+ this.content = [];
+ this.html = html;
+ }
+ mount(parent, afterNode) {
+ this.parentEl = parent;
+ const template = document.createElement("template");
+ template.innerHTML = this.html;
+ this.content = [...template.content.childNodes];
+ for (let elem of this.content) {
+ nodeInsertBefore.call(parent, elem, afterNode);
+ }
+ if (!this.content.length) {
+ const textNode = document.createTextNode("");
+ this.content.push(textNode);
+ nodeInsertBefore.call(parent, textNode, afterNode);
+ }
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ for (let elem of this.content) {
+ nodeInsertBefore.call(parent, elem, node);
+ }
+ }
+ moveBeforeVNode(other, afterNode) {
+ const target = other ? other.content[0] : afterNode;
+ this.moveBeforeDOMNode(target);
+ }
+ patch(other) {
+ if (this === other) {
+ return;
+ }
+ const html2 = other.html;
+ if (this.html !== html2) {
+ const parent = this.parentEl;
+ // insert new html in front of current
+ const afterNode = this.content[0];
+ const template = document.createElement("template");
+ template.innerHTML = html2;
+ const content = [...template.content.childNodes];
+ for (let elem of content) {
+ nodeInsertBefore.call(parent, elem, afterNode);
+ }
+ if (!content.length) {
+ const textNode = document.createTextNode("");
+ content.push(textNode);
+ nodeInsertBefore.call(parent, textNode, afterNode);
+ }
+ // remove current content
+ this.remove();
+ this.content = content;
+ this.html = other.html;
+ }
+ }
+ beforeRemove() { }
+ remove() {
+ const parent = this.parentEl;
+ for (let elem of this.content) {
+ nodeRemoveChild.call(parent, elem);
+ }
+ }
+ firstNode() {
+ return this.content[0];
+ }
+ toString() {
+ return this.html;
+ }
+ }
+ function html(str) {
+ return new VHtml(str);
+ }
+
+ function createCatcher(eventsSpec) {
+ const n = Object.keys(eventsSpec).length;
+ class VCatcher {
+ constructor(child, handlers) {
+ this.handlerFns = [];
+ this.afterNode = null;
+ this.child = child;
+ this.handlerData = handlers;
+ }
+ mount(parent, afterNode) {
+ this.parentEl = parent;
+ this.child.mount(parent, afterNode);
+ this.afterNode = document.createTextNode("");
+ parent.insertBefore(this.afterNode, afterNode);
+ this.wrapHandlerData();
+ for (let name in eventsSpec) {
+ const index = eventsSpec[name];
+ const handler = createEventHandler(name);
+ this.handlerFns[index] = handler;
+ handler.setup.call(parent, this.handlerData[index]);
+ }
+ }
+ wrapHandlerData() {
+ for (let i = 0; i < n; i++) {
+ let handler = this.handlerData[i];
+ // handler = [...mods, fn, comp], so we need to replace second to last elem
+ let idx = handler.length - 2;
+ let origFn = handler[idx];
+ const self = this;
+ handler[idx] = function (ev) {
+ const target = ev.target;
+ let currentNode = self.child.firstNode();
+ const afterNode = self.afterNode;
+ while (currentNode && currentNode !== afterNode) {
+ if (currentNode.contains(target)) {
+ return origFn.call(this, ev);
+ }
+ currentNode = currentNode.nextSibling;
+ }
+ };
+ }
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ this.child.moveBeforeDOMNode(node, parent);
+ parent.insertBefore(this.afterNode, node);
+ }
+ moveBeforeVNode(other, afterNode) {
+ if (other) {
+ // check this with @ged-odoo for use in foreach
+ afterNode = other.firstNode() || afterNode;
+ }
+ this.child.moveBeforeVNode(other ? other.child : null, afterNode);
+ this.parentEl.insertBefore(this.afterNode, afterNode);
+ }
+ patch(other, withBeforeRemove) {
+ if (this === other) {
+ return;
+ }
+ this.handlerData = other.handlerData;
+ this.wrapHandlerData();
+ for (let i = 0; i < n; i++) {
+ this.handlerFns[i].update.call(this.parentEl, this.handlerData[i]);
+ }
+ this.child.patch(other.child, withBeforeRemove);
+ }
+ beforeRemove() {
+ this.child.beforeRemove();
+ }
+ remove() {
+ for (let i = 0; i < n; i++) {
+ this.handlerFns[i].remove.call(this.parentEl);
+ }
+ this.child.remove();
+ this.afterNode.remove();
+ }
+ firstNode() {
+ return this.child.firstNode();
+ }
+ toString() {
+ return this.child.toString();
+ }
+ }
+ return function (child, handlers) {
+ return new VCatcher(child, handlers);
+ };
+ }
+
+ function mount$1(vnode, fixture, afterNode = null) {
+ vnode.mount(fixture, afterNode);
+ }
+ function patch(vnode1, vnode2, withBeforeRemove = false) {
+ vnode1.patch(vnode2, withBeforeRemove);
+ }
+ function remove(vnode, withBeforeRemove = false) {
+ if (withBeforeRemove) {
+ vnode.beforeRemove();
+ }
+ vnode.remove();
+ }
+
+ // Maps fibers to thrown errors
+ const fibersInError = new WeakMap();
+ const nodeErrorHandlers = new WeakMap();
+ function _handleError(node, error) {
+ if (!node) {
+ return false;
+ }
+ const fiber = node.fiber;
+ if (fiber) {
+ fibersInError.set(fiber, error);
+ }
+ const errorHandlers = nodeErrorHandlers.get(node);
+ if (errorHandlers) {
+ let handled = false;
+ // execute in the opposite order
+ for (let i = errorHandlers.length - 1; i >= 0; i--) {
+ try {
+ errorHandlers[i](error);
+ handled = true;
+ break;
+ }
+ catch (e) {
+ error = e;
+ }
+ }
+ if (handled) {
+ return true;
+ }
+ }
+ return _handleError(node.parent, error);
+ }
+ function handleError(params) {
+ let { error } = params;
+ // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
+ if (!(error instanceof OwlError)) {
+ error = Object.assign(new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`), { cause: error });
+ }
+ const node = "node" in params ? params.node : params.fiber.node;
+ const fiber = "fiber" in params ? params.fiber : node.fiber;
+ if (fiber) {
+ // resets the fibers on components if possible. This is important so that
+ // new renderings can be properly included in the initial one, if any.
+ let current = fiber;
+ do {
+ current.node.fiber = current;
+ fibersInError.set(current, error);
+ current = current.parent;
+ } while (current);
+ fibersInError.set(fiber.root, error);
+ }
+ const handled = _handleError(node, error);
+ if (!handled) {
+ console.warn(`[Owl] Unhandled error. Destroying the root component`);
+ try {
+ node.app.destroy();
+ }
+ catch (e) {
+ console.error(e);
+ }
+ throw error;
+ }
+ }
+
+ function makeChildFiber(node, parent) {
+ let current = node.fiber;
+ if (current) {
+ cancelFibers(current.children);
+ current.root = null;
+ }
+ return new Fiber(node, parent);
+ }
+ function makeRootFiber(node) {
+ let current = node.fiber;
+ if (current) {
+ let root = current.root;
+ // lock root fiber because canceling children fibers may destroy components,
+ // which means any arbitrary code can be run in onWillDestroy, which may
+ // trigger new renderings
+ root.locked = true;
+ root.setCounter(root.counter + 1 - cancelFibers(current.children));
+ root.locked = false;
+ current.children = [];
+ current.childrenMap = {};
+ current.bdom = null;
+ if (fibersInError.has(current)) {
+ fibersInError.delete(current);
+ fibersInError.delete(root);
+ current.appliedToDom = false;
+ if (current instanceof RootFiber) {
+ // it is possible that this fiber is a fiber that crashed while being
+ // mounted, so the mounted list is possibly corrupted. We restore it to
+ // its normal initial state (which is empty list or a list with a mount
+ // fiber.
+ current.mounted = current instanceof MountFiber ? [current] : [];
+ }
+ }
+ return current;
+ }
+ const fiber = new RootFiber(node, null);
+ if (node.willPatch.length) {
+ fiber.willPatch.push(fiber);
+ }
+ if (node.patched.length) {
+ fiber.patched.push(fiber);
+ }
+ return fiber;
+ }
+ function throwOnRender() {
+ throw new OwlError("Attempted to render cancelled fiber");
+ }
+ /**
+ * @returns number of not-yet rendered fibers cancelled
+ */
+ function cancelFibers(fibers) {
+ let result = 0;
+ for (let fiber of fibers) {
+ let node = fiber.node;
+ fiber.render = throwOnRender;
+ if (node.status === 0 /* NEW */) {
+ node.cancel();
+ }
+ node.fiber = null;
+ if (fiber.bdom) {
+ // if fiber has been rendered, this means that the component props have
+ // been updated. however, this fiber will not be patched to the dom, so
+ // it could happen that the next render compare the current props with
+ // the same props, and skip the render completely. With the next line,
+ // we kindly request the component code to force a render, so it works as
+ // expected.
+ node.forceNextRender = true;
+ }
+ else {
+ result++;
+ }
+ result += cancelFibers(fiber.children);
+ }
+ return result;
+ }
+ class Fiber {
+ constructor(node, parent) {
+ this.bdom = null;
+ this.children = [];
+ this.appliedToDom = false;
+ this.deep = false;
+ this.childrenMap = {};
+ this.node = node;
+ this.parent = parent;
+ if (parent) {
+ this.deep = parent.deep;
+ const root = parent.root;
+ root.setCounter(root.counter + 1);
+ this.root = root;
+ parent.children.push(this);
+ }
+ else {
+ this.root = this;
+ }
+ }
+ render() {
+ // if some parent has a fiber => register in followup
+ let prev = this.root.node;
+ let scheduler = prev.app.scheduler;
+ let current = prev.parent;
+ while (current) {
+ if (current.fiber) {
+ let root = current.fiber.root;
+ if (root.counter === 0 && prev.parentKey in current.fiber.childrenMap) {
+ current = root.node;
+ }
+ else {
+ scheduler.delayedRenders.push(this);
+ return;
+ }
+ }
+ prev = current;
+ current = current.parent;
+ }
+ // there are no current rendering from above => we can render
+ this._render();
+ }
+ _render() {
+ const node = this.node;
+ const root = this.root;
+ if (root) {
+ try {
+ this.bdom = true;
+ this.bdom = node.renderFn();
+ }
+ catch (e) {
+ node.app.handleError({ node, error: e });
+ }
+ root.setCounter(root.counter - 1);
+ }
+ }
+ }
+ class RootFiber extends Fiber {
+ constructor() {
+ super(...arguments);
+ this.counter = 1;
+ // only add stuff in this if they have registered some hooks
+ this.willPatch = [];
+ this.patched = [];
+ this.mounted = [];
+ // A fiber is typically locked when it is completing and the patch has not, or is being applied.
+ // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
+ this.locked = false;
+ }
+ complete() {
+ const node = this.node;
+ this.locked = true;
+ let current = undefined;
+ let mountedFibers = this.mounted;
+ try {
+ // Step 1: calling all willPatch lifecycle hooks
+ for (current of this.willPatch) {
+ // because of the asynchronous nature of the rendering, some parts of the
+ // UI may have been rendered, then deleted in a followup rendering, and we
+ // do not want to call onWillPatch in that case.
+ let node = current.node;
+ if (node.fiber === current) {
+ const component = node.component;
+ for (let cb of node.willPatch) {
+ cb.call(component);
+ }
+ }
+ }
+ current = undefined;
+ // Step 2: patching the dom
+ node._patch();
+ this.locked = false;
+ // Step 4: calling all mounted lifecycle hooks
+ while ((current = mountedFibers.pop())) {
+ current = current;
+ if (current.appliedToDom) {
+ for (let cb of current.node.mounted) {
+ cb();
+ }
+ }
+ }
+ // Step 5: calling all patched hooks
+ let patchedFibers = this.patched;
+ while ((current = patchedFibers.pop())) {
+ current = current;
+ if (current.appliedToDom) {
+ for (let cb of current.node.patched) {
+ cb();
+ }
+ }
+ }
+ }
+ catch (e) {
+ // if mountedFibers is not empty, this means that a crash occured while
+ // calling the mounted hooks of some component. So, there may still be
+ // some component that have been mounted, but for which the mounted hooks
+ // have not been called. Here, we remove the willUnmount hooks for these
+ // specific component to prevent a worse situation (willUnmount being
+ // called even though mounted has not been called)
+ for (let fiber of mountedFibers) {
+ fiber.node.willUnmount = [];
+ }
+ this.locked = false;
+ node.app.handleError({ fiber: current || this, error: e });
+ }
+ }
+ setCounter(newValue) {
+ this.counter = newValue;
+ if (newValue === 0) {
+ this.node.app.scheduler.flush();
+ }
+ }
+ }
+ class MountFiber extends RootFiber {
+ constructor(node, target, options = {}) {
+ super(node, null);
+ this.target = target;
+ this.position = options.position || "last-child";
+ }
+ complete() {
+ let current = this;
+ try {
+ const node = this.node;
+ node.children = this.childrenMap;
+ node.app.constructor.validateTarget(this.target);
+ if (node.bdom) {
+ // this is a complicated situation: if we mount a fiber with an existing
+ // bdom, this means that this same fiber was already completed, mounted,
+ // but a crash occurred in some mounted hook. Then, it was handled and
+ // the new rendering is being applied.
+ node.updateDom();
+ }
+ else {
+ node.bdom = this.bdom;
+ if (this.position === "last-child" || this.target.childNodes.length === 0) {
+ mount$1(node.bdom, this.target);
+ }
+ else {
+ const firstChild = this.target.childNodes[0];
+ mount$1(node.bdom, this.target, firstChild);
+ }
+ }
+ // unregistering the fiber before mounted since it can do another render
+ // and that the current rendering is obviously completed
+ node.fiber = null;
+ node.status = 1 /* MOUNTED */;
+ this.appliedToDom = true;
+ let mountedFibers = this.mounted;
+ while ((current = mountedFibers.pop())) {
+ if (current.appliedToDom) {
+ for (let cb of current.node.mounted) {
+ cb();
+ }
+ }
+ }
+ }
+ catch (e) {
+ this.node.app.handleError({ fiber: current, error: e });
+ }
+ }
+ }
+
+ // Special key to subscribe to, to be notified of key creation/deletion
+ const KEYCHANGES = Symbol("Key changes");
+ // Used to specify the absence of a callback, can be used as WeakMap key but
+ // should only be used as a sentinel value and never called.
+ const NO_CALLBACK = () => {
+ throw new Error("Called NO_CALLBACK. Owl is broken, please report this to the maintainers.");
+ };
+ const objectToString = Object.prototype.toString;
+ const objectHasOwnProperty = Object.prototype.hasOwnProperty;
+ // Use arrays because Array.includes is faster than Set.has for small arrays
+ const SUPPORTED_RAW_TYPES = ["Object", "Array", "Set", "Map", "WeakMap"];
+ const COLLECTION_RAW_TYPES = ["Set", "Map", "WeakMap"];
+ /**
+ * extract "RawType" from strings like "[object RawType]" => this lets us ignore
+ * many native objects such as Promise (whose toString is [object Promise])
+ * or Date ([object Date]), while also supporting collections without using
+ * instanceof in a loop
+ *
+ * @param obj the object to check
+ * @returns the raw type of the object
+ */
+ function rawType(obj) {
+ return objectToString.call(toRaw(obj)).slice(8, -1);
+ }
+ /**
+ * Checks whether a given value can be made into a reactive object.
+ *
+ * @param value the value to check
+ * @returns whether the value can be made reactive
+ */
+ function canBeMadeReactive(value) {
+ if (typeof value !== "object") {
+ return false;
+ }
+ return SUPPORTED_RAW_TYPES.includes(rawType(value));
+ }
+ /**
+ * Creates a reactive from the given object/callback if possible and returns it,
+ * returns the original object otherwise.
+ *
+ * @param value the value make reactive
+ * @returns a reactive for the given object when possible, the original otherwise
+ */
+ function possiblyReactive(val, cb) {
+ return canBeMadeReactive(val) ? reactive(val, cb) : val;
+ }
+ const skipped = new WeakSet();
+ /**
+ * Mark an object or array so that it is ignored by the reactivity system
+ *
+ * @param value the value to mark
+ * @returns the object itself
+ */
+ function markRaw(value) {
+ skipped.add(value);
+ return value;
+ }
+ /**
+ * Given a reactive objet, return the raw (non reactive) underlying object
+ *
+ * @param value a reactive value
+ * @returns the underlying value
+ */
+ function toRaw(value) {
+ return targets.has(value) ? targets.get(value) : value;
+ }
+ const targetToKeysToCallbacks = new WeakMap();
+ /**
+ * Observes a given key on a target with an callback. The callback will be
+ * called when the given key changes on the target.
+ *
+ * @param target the target whose key should be observed
+ * @param key the key to observe (or Symbol(KEYCHANGES) for key creation
+ * or deletion)
+ * @param callback the function to call when the key changes
+ */
+ function observeTargetKey(target, key, callback) {
+ if (callback === NO_CALLBACK) {
+ return;
+ }
+ if (!targetToKeysToCallbacks.get(target)) {
+ targetToKeysToCallbacks.set(target, new Map());
+ }
+ const keyToCallbacks = targetToKeysToCallbacks.get(target);
+ if (!keyToCallbacks.get(key)) {
+ keyToCallbacks.set(key, new Set());
+ }
+ keyToCallbacks.get(key).add(callback);
+ if (!callbacksToTargets.has(callback)) {
+ callbacksToTargets.set(callback, new Set());
+ }
+ callbacksToTargets.get(callback).add(target);
+ }
+ /**
+ * Notify Reactives that are observing a given target that a key has changed on
+ * the target.
+ *
+ * @param target target whose Reactives should be notified that the target was
+ * changed.
+ * @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
+ * or deleted)
+ */
+ function notifyReactives(target, key) {
+ const keyToCallbacks = targetToKeysToCallbacks.get(target);
+ if (!keyToCallbacks) {
+ return;
+ }
+ const callbacks = keyToCallbacks.get(key);
+ if (!callbacks) {
+ return;
+ }
+ // Loop on copy because clearReactivesForCallback will modify the set in place
+ for (const callback of [...callbacks]) {
+ clearReactivesForCallback(callback);
+ callback();
+ }
+ }
+ const callbacksToTargets = new WeakMap();
+ /**
+ * Clears all subscriptions of the Reactives associated with a given callback.
+ *
+ * @param callback the callback for which the reactives need to be cleared
+ */
+ function clearReactivesForCallback(callback) {
+ const targetsToClear = callbacksToTargets.get(callback);
+ if (!targetsToClear) {
+ return;
+ }
+ for (const target of targetsToClear) {
+ const observedKeys = targetToKeysToCallbacks.get(target);
+ if (!observedKeys) {
+ continue;
+ }
+ for (const [key, callbacks] of observedKeys.entries()) {
+ callbacks.delete(callback);
+ if (!callbacks.size) {
+ observedKeys.delete(key);
+ }
+ }
+ }
+ targetsToClear.clear();
+ }
+ function getSubscriptions(callback) {
+ const targets = callbacksToTargets.get(callback) || [];
+ return [...targets].map((target) => {
+ const keysToCallbacks = targetToKeysToCallbacks.get(target);
+ let keys = [];
+ if (keysToCallbacks) {
+ for (const [key, cbs] of keysToCallbacks) {
+ if (cbs.has(callback)) {
+ keys.push(key);
+ }
+ }
+ }
+ return { target, keys };
+ });
+ }
+ // Maps reactive objects to the underlying target
+ const targets = new WeakMap();
+ const reactiveCache = new WeakMap();
+ /**
+ * Creates a reactive proxy for an object. Reading data on the reactive object
+ * subscribes to changes to the data. Writing data on the object will cause the
+ * notify callback to be called if there are suscriptions to that data. Nested
+ * objects and arrays are automatically made reactive as well.
+ *
+ * Whenever you are notified of a change, all subscriptions are cleared, and if
+ * you would like to be notified of any further changes, you should go read
+ * the underlying data again. We assume that if you don't go read it again after
+ * being notified, it means that you are no longer interested in that data.
+ *
+ * Subscriptions:
+ * + Reading a property on an object will subscribe you to changes in the value
+ * of that property.
+ * + Accessing an object's keys (eg with Object.keys or with `for..in`) will
+ * subscribe you to the creation/deletion of keys. Checking the presence of a
+ * key on the object with 'in' has the same effect.
+ * - getOwnPropertyDescriptor does not currently subscribe you to the property.
+ * This is a choice that was made because changing a key's value will trigger
+ * this trap and we do not want to subscribe by writes. This also means that
+ * Object.hasOwnProperty doesn't subscribe as it goes through this trap.
+ *
+ * @param target the object for which to create a reactive proxy
+ * @param callback the function to call when an observed property of the
+ * reactive has changed
+ * @returns a proxy that tracks changes to it
+ */
+ function reactive(target, callback = NO_CALLBACK) {
+ if (!canBeMadeReactive(target)) {
+ throw new OwlError(`Cannot make the given value reactive`);
+ }
+ if (skipped.has(target)) {
+ return target;
+ }
+ if (targets.has(target)) {
+ // target is reactive, create a reactive on the underlying object instead
+ return reactive(targets.get(target), callback);
+ }
+ if (!reactiveCache.has(target)) {
+ reactiveCache.set(target, new WeakMap());
+ }
+ const reactivesForTarget = reactiveCache.get(target);
+ if (!reactivesForTarget.has(callback)) {
+ const targetRawType = rawType(target);
+ const handler = COLLECTION_RAW_TYPES.includes(targetRawType)
+ ? collectionsProxyHandler(target, callback, targetRawType)
+ : basicProxyHandler(callback);
+ const proxy = new Proxy(target, handler);
+ reactivesForTarget.set(callback, proxy);
+ targets.set(proxy, target);
+ }
+ return reactivesForTarget.get(callback);
+ }
+ /**
+ * Creates a basic proxy handler for regular objects and arrays.
+ *
+ * @param callback @see reactive
+ * @returns a proxy handler object
+ */
+ function basicProxyHandler(callback) {
+ return {
+ get(target, key, receiver) {
+ // non-writable non-configurable properties cannot be made reactive
+ const desc = Object.getOwnPropertyDescriptor(target, key);
+ if (desc && !desc.writable && !desc.configurable) {
+ return Reflect.get(target, key, receiver);
+ }
+ observeTargetKey(target, key, callback);
+ return possiblyReactive(Reflect.get(target, key, receiver), callback);
+ },
+ set(target, key, value, receiver) {
+ const hadKey = objectHasOwnProperty.call(target, key);
+ const originalValue = Reflect.get(target, key, receiver);
+ const ret = Reflect.set(target, key, toRaw(value), receiver);
+ if (!hadKey && objectHasOwnProperty.call(target, key)) {
+ notifyReactives(target, KEYCHANGES);
+ }
+ // While Array length may trigger the set trap, it's not actually set by this
+ // method but is updated behind the scenes, and the trap is not called with the
+ // new value. We disable the "same-value-optimization" for it because of that.
+ if (originalValue !== Reflect.get(target, key, receiver) ||
+ (key === "length" && Array.isArray(target))) {
+ notifyReactives(target, key);
+ }
+ return ret;
+ },
+ deleteProperty(target, key) {
+ const ret = Reflect.deleteProperty(target, key);
+ // TODO: only notify when something was actually deleted
+ notifyReactives(target, KEYCHANGES);
+ notifyReactives(target, key);
+ return ret;
+ },
+ ownKeys(target) {
+ observeTargetKey(target, KEYCHANGES, callback);
+ return Reflect.ownKeys(target);
+ },
+ has(target, key) {
+ // TODO: this observes all key changes instead of only the presence of the argument key
+ // observing the key itself would observe value changes instead of presence changes
+ // so we may need a finer grained system to distinguish observing value vs presence.
+ observeTargetKey(target, KEYCHANGES, callback);
+ return Reflect.has(target, key);
+ },
+ };
+ }
+ /**
+ * Creates a function that will observe the key that is passed to it when called
+ * and delegates to the underlying method.
+ *
+ * @param methodName name of the method to delegate to
+ * @param target @see reactive
+ * @param callback @see reactive
+ */
+ function makeKeyObserver(methodName, target, callback) {
+ return (key) => {
+ key = toRaw(key);
+ observeTargetKey(target, key, callback);
+ return possiblyReactive(target[methodName](key), callback);
+ };
+ }
+ /**
+ * Creates an iterable that will delegate to the underlying iteration method and
+ * observe keys as necessary.
+ *
+ * @param methodName name of the method to delegate to
+ * @param target @see reactive
+ * @param callback @see reactive
+ */
+ function makeIteratorObserver(methodName, target, callback) {
+ return function* () {
+ observeTargetKey(target, KEYCHANGES, callback);
+ const keys = target.keys();
+ for (const item of target[methodName]()) {
+ const key = keys.next().value;
+ observeTargetKey(target, key, callback);
+ yield possiblyReactive(item, callback);
+ }
+ };
+ }
+ /**
+ * Creates a forEach function that will delegate to forEach on the underlying
+ * collection while observing key changes, and keys as they're iterated over,
+ * and making the passed keys/values reactive.
+ *
+ * @param target @see reactive
+ * @param callback @see reactive
+ */
+ function makeForEachObserver(target, callback) {
+ return function forEach(forEachCb, thisArg) {
+ observeTargetKey(target, KEYCHANGES, callback);
+ target.forEach(function (val, key, targetObj) {
+ observeTargetKey(target, key, callback);
+ forEachCb.call(thisArg, possiblyReactive(val, callback), possiblyReactive(key, callback), possiblyReactive(targetObj, callback));
+ }, thisArg);
+ };
+ }
+ /**
+ * Creates a function that will delegate to an underlying method, and check if
+ * that method has modified the presence or value of a key, and notify the
+ * reactives appropriately.
+ *
+ * @param setterName name of the method to delegate to
+ * @param getterName name of the method which should be used to retrieve the
+ * value before calling the delegate method for comparison purposes
+ * @param target @see reactive
+ */
+ function delegateAndNotify(setterName, getterName, target) {
+ return (key, value) => {
+ key = toRaw(key);
+ const hadKey = target.has(key);
+ const originalValue = target[getterName](key);
+ const ret = target[setterName](key, value);
+ const hasKey = target.has(key);
+ if (hadKey !== hasKey) {
+ notifyReactives(target, KEYCHANGES);
+ }
+ if (originalValue !== target[getterName](key)) {
+ notifyReactives(target, key);
+ }
+ return ret;
+ };
+ }
+ /**
+ * Creates a function that will clear the underlying collection and notify that
+ * the keys of the collection have changed.
+ *
+ * @param target @see reactive
+ */
+ function makeClearNotifier(target) {
+ return () => {
+ const allKeys = [...target.keys()];
+ target.clear();
+ notifyReactives(target, KEYCHANGES);
+ for (const key of allKeys) {
+ notifyReactives(target, key);
+ }
+ };
+ }
+ /**
+ * Maps raw type of an object to an object containing functions that can be used
+ * to build an appropritate proxy handler for that raw type. Eg: when making a
+ * reactive set, calling the has method should mark the key that is being
+ * retrieved as observed, and calling the add or delete method should notify the
+ * reactives that the key which is being added or deleted has been modified.
+ */
+ const rawTypeToFuncHandlers = {
+ Set: (target, callback) => ({
+ has: makeKeyObserver("has", target, callback),
+ add: delegateAndNotify("add", "has", target),
+ delete: delegateAndNotify("delete", "has", target),
+ keys: makeIteratorObserver("keys", target, callback),
+ values: makeIteratorObserver("values", target, callback),
+ entries: makeIteratorObserver("entries", target, callback),
+ [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
+ forEach: makeForEachObserver(target, callback),
+ clear: makeClearNotifier(target),
+ get size() {
+ observeTargetKey(target, KEYCHANGES, callback);
+ return target.size;
+ },
+ }),
+ Map: (target, callback) => ({
+ has: makeKeyObserver("has", target, callback),
+ get: makeKeyObserver("get", target, callback),
+ set: delegateAndNotify("set", "get", target),
+ delete: delegateAndNotify("delete", "has", target),
+ keys: makeIteratorObserver("keys", target, callback),
+ values: makeIteratorObserver("values", target, callback),
+ entries: makeIteratorObserver("entries", target, callback),
+ [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
+ forEach: makeForEachObserver(target, callback),
+ clear: makeClearNotifier(target),
+ get size() {
+ observeTargetKey(target, KEYCHANGES, callback);
+ return target.size;
+ },
+ }),
+ WeakMap: (target, callback) => ({
+ has: makeKeyObserver("has", target, callback),
+ get: makeKeyObserver("get", target, callback),
+ set: delegateAndNotify("set", "get", target),
+ delete: delegateAndNotify("delete", "has", target),
+ }),
+ };
+ /**
+ * Creates a proxy handler for collections (Set/Map/WeakMap)
+ *
+ * @param callback @see reactive
+ * @param target @see reactive
+ * @returns a proxy handler object
+ */
+ function collectionsProxyHandler(target, callback, targetRawType) {
+ // TODO: if performance is an issue we can create the special handlers lazily when each
+ // property is read.
+ const specialHandlers = rawTypeToFuncHandlers[targetRawType](target, callback);
+ return Object.assign(basicProxyHandler(callback), {
+ // FIXME: probably broken when part of prototype chain since we ignore the receiver
+ get(target, key) {
+ if (objectHasOwnProperty.call(specialHandlers, key)) {
+ return specialHandlers[key];
+ }
+ observeTargetKey(target, key, callback);
+ return possiblyReactive(target[key], callback);
+ },
+ });
+ }
+
+ let currentNode = null;
+ function saveCurrent() {
+ let n = currentNode;
+ return () => {
+ currentNode = n;
+ };
+ }
+ function getCurrent() {
+ if (!currentNode) {
+ throw new OwlError("No active component (a hook function should only be called in 'setup')");
+ }
+ return currentNode;
+ }
+ function useComponent() {
+ return currentNode.component;
+ }
+ /**
+ * Apply default props (only top level).
+ */
+ function applyDefaultProps(props, defaultProps) {
+ for (let propName in defaultProps) {
+ if (props[propName] === undefined) {
+ props[propName] = defaultProps[propName];
+ }
+ }
+ }
+ // -----------------------------------------------------------------------------
+ // Integration with reactivity system (useState)
+ // -----------------------------------------------------------------------------
+ const batchedRenderFunctions = new WeakMap();
+ /**
+ * Creates a reactive object that will be observed by the current component.
+ * Reading data from the returned object (eg during rendering) will cause the
+ * component to subscribe to that data and be rerendered when it changes.
+ *
+ * @param state the state to observe
+ * @returns a reactive object that will cause the component to re-render on
+ * relevant changes
+ * @see reactive
+ */
+ function useState(state) {
+ const node = getCurrent();
+ let render = batchedRenderFunctions.get(node);
+ if (!render) {
+ const wrapper = { fn: batched(node.render.bind(node, false)) };
+ render = (...args) => wrapper.fn(...args);
+ batchedRenderFunctions.set(node, render);
+ // manual implementation of onWillDestroy to break cyclic dependency
+ node.willDestroy.push(cleanupRenderAndReactives.bind(null, wrapper, render));
+ }
+ return reactive(state, render);
+ }
+ const NO_OP = () => { };
+ function cleanupRenderAndReactives(wrapper, render) {
+ wrapper.fn = NO_OP;
+ clearReactivesForCallback(render);
+ }
+ class ComponentNode {
+ constructor(C, props, app, parent, parentKey) {
+ this.fiber = null;
+ this.bdom = null;
+ this.status = 0 /* NEW */;
+ this.forceNextRender = false;
+ this.nextProps = null;
+ this.children = Object.create(null);
+ this.refs = {};
+ this.willStart = [];
+ this.willUpdateProps = [];
+ this.willUnmount = [];
+ this.mounted = [];
+ this.willPatch = [];
+ this.patched = [];
+ this.willDestroy = [];
+ currentNode = this;
+ this.app = app;
+ this.parent = parent;
+ this.props = props;
+ this.parentKey = parentKey;
+ const defaultProps = C.defaultProps;
+ props = Object.assign({}, props);
+ if (defaultProps) {
+ applyDefaultProps(props, defaultProps);
+ }
+ const env = (parent && parent.childEnv) || app.env;
+ this.childEnv = env;
+ for (const key in props) {
+ const prop = props[key];
+ if (prop && typeof prop === "object" && targets.has(prop)) {
+ props[key] = useState(prop);
+ }
+ }
+ this.component = new C(props, env, this);
+ const ctx = Object.assign(Object.create(this.component), { this: this.component });
+ this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
+ this.component.setup();
+ currentNode = null;
+ }
+ mountComponent(target, options) {
+ const fiber = new MountFiber(this, target, options);
+ this.app.scheduler.addFiber(fiber);
+ this.initiateRender(fiber);
+ }
+ async initiateRender(fiber) {
+ this.fiber = fiber;
+ if (this.mounted.length) {
+ fiber.root.mounted.push(fiber);
+ }
+ const component = this.component;
+ try {
+ await Promise.all(this.willStart.map((f) => f.call(component)));
+ }
+ catch (e) {
+ this.app.handleError({ node: this, error: e });
+ return;
+ }
+ if (this.status === 0 /* NEW */ && this.fiber === fiber) {
+ fiber.render();
+ }
+ }
+ async render(deep) {
+ if (this.status >= 2 /* CANCELLED */) {
+ return;
+ }
+ let current = this.fiber;
+ if (current && (current.root.locked || current.bdom === true)) {
+ await Promise.resolve();
+ // situation may have changed after the microtask tick
+ current = this.fiber;
+ }
+ if (current) {
+ if (!current.bdom && !fibersInError.has(current)) {
+ if (deep) {
+ // we want the render from this point on to be with deep=true
+ current.deep = deep;
+ }
+ return;
+ }
+ // if current rendering was with deep=true, we want this one to be the same
+ deep = deep || current.deep;
+ }
+ else if (!this.bdom) {
+ return;
+ }
+ const fiber = makeRootFiber(this);
+ fiber.deep = deep;
+ this.fiber = fiber;
+ this.app.scheduler.addFiber(fiber);
+ await Promise.resolve();
+ if (this.status >= 2 /* CANCELLED */) {
+ return;
+ }
+ // We only want to actually render the component if the following two
+ // conditions are true:
+ // * this.fiber: it could be null, in which case the render has been cancelled
+ // * (current || !fiber.parent): if current is not null, this means that the
+ // render function was called when a render was already occurring. In this
+ // case, the pending rendering was cancelled, and the fiber needs to be
+ // rendered to complete the work. If current is null, we check that the
+ // fiber has no parent. If that is the case, the fiber was downgraded from
+ // a root fiber to a child fiber in the previous microtick, because it was
+ // embedded in a rendering coming from above, so the fiber will be rendered
+ // in the next microtick anyway, so we should not render it again.
+ if (this.fiber === fiber && (current || !fiber.parent)) {
+ fiber.render();
+ }
+ }
+ cancel() {
+ this._cancel();
+ delete this.parent.children[this.parentKey];
+ this.app.scheduler.scheduleDestroy(this);
+ }
+ _cancel() {
+ this.status = 2 /* CANCELLED */;
+ const children = this.children;
+ for (let childKey in children) {
+ children[childKey]._cancel();
+ }
+ }
+ destroy() {
+ let shouldRemove = this.status === 1 /* MOUNTED */;
+ this._destroy();
+ if (shouldRemove) {
+ this.bdom.remove();
+ }
+ }
+ _destroy() {
+ const component = this.component;
+ if (this.status === 1 /* MOUNTED */) {
+ for (let cb of this.willUnmount) {
+ cb.call(component);
+ }
+ }
+ for (let child of Object.values(this.children)) {
+ child._destroy();
+ }
+ if (this.willDestroy.length) {
+ try {
+ for (let cb of this.willDestroy) {
+ cb.call(component);
+ }
+ }
+ catch (e) {
+ this.app.handleError({ error: e, node: this });
+ }
+ }
+ this.status = 3 /* DESTROYED */;
+ }
+ async updateAndRender(props, parentFiber) {
+ this.nextProps = props;
+ props = Object.assign({}, props);
+ // update
+ const fiber = makeChildFiber(this, parentFiber);
+ this.fiber = fiber;
+ const component = this.component;
+ const defaultProps = component.constructor.defaultProps;
+ if (defaultProps) {
+ applyDefaultProps(props, defaultProps);
+ }
+ currentNode = this;
+ for (const key in props) {
+ const prop = props[key];
+ if (prop && typeof prop === "object" && targets.has(prop)) {
+ props[key] = useState(prop);
+ }
+ }
+ currentNode = null;
+ const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+ await prom;
+ if (fiber !== this.fiber) {
+ return;
+ }
+ component.props = props;
+ fiber.render();
+ const parentRoot = parentFiber.root;
+ if (this.willPatch.length) {
+ parentRoot.willPatch.push(fiber);
+ }
+ if (this.patched.length) {
+ parentRoot.patched.push(fiber);
+ }
+ }
+ /**
+ * Finds a child that has dom that is not yet updated, and update it. This
+ * method is meant to be used only in the context of repatching the dom after
+ * a mounted hook failed and was handled.
+ */
+ updateDom() {
+ if (!this.fiber) {
+ return;
+ }
+ if (this.bdom === this.fiber.bdom) {
+ // If the error was handled by some child component, we need to find it to
+ // apply its change
+ for (let k in this.children) {
+ const child = this.children[k];
+ child.updateDom();
+ }
+ }
+ else {
+ // if we get here, this is the component that handled the error and rerendered
+ // itself, so we can simply patch the dom
+ this.bdom.patch(this.fiber.bdom, false);
+ this.fiber.appliedToDom = true;
+ this.fiber = null;
+ }
+ }
+ /**
+ * Sets a ref to a given HTMLElement.
+ *
+ * @param name the name of the ref to set
+ * @param el the HTMLElement to set the ref to. The ref is not set if the el
+ * is null, but useRef will not return elements that are not in the DOM
+ */
+ setRef(name, el) {
+ if (el) {
+ this.refs[name] = el;
+ }
+ }
+ // ---------------------------------------------------------------------------
+ // Block DOM methods
+ // ---------------------------------------------------------------------------
+ firstNode() {
+ const bdom = this.bdom;
+ return bdom ? bdom.firstNode() : undefined;
+ }
+ mount(parent, anchor) {
+ const bdom = this.fiber.bdom;
+ this.bdom = bdom;
+ bdom.mount(parent, anchor);
+ this.status = 1 /* MOUNTED */;
+ this.fiber.appliedToDom = true;
+ this.children = this.fiber.childrenMap;
+ this.fiber = null;
+ }
+ moveBeforeDOMNode(node, parent) {
+ this.bdom.moveBeforeDOMNode(node, parent);
+ }
+ moveBeforeVNode(other, afterNode) {
+ this.bdom.moveBeforeVNode(other ? other.bdom : null, afterNode);
+ }
+ patch() {
+ if (this.fiber && this.fiber.parent) {
+ // we only patch here renderings coming from above. renderings initiated
+ // by the component will be patched independently in the appropriate
+ // fiber.complete
+ this._patch();
+ this.props = this.nextProps;
+ }
+ }
+ _patch() {
+ let hasChildren = false;
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ for (let _k in this.children) {
+ hasChildren = true;
+ break;
+ }
+ const fiber = this.fiber;
+ this.children = fiber.childrenMap;
+ this.bdom.patch(fiber.bdom, hasChildren);
+ fiber.appliedToDom = true;
+ this.fiber = null;
+ }
+ beforeRemove() {
+ this._destroy();
+ }
+ remove() {
+ this.bdom.remove();
+ }
+ // ---------------------------------------------------------------------------
+ // Some debug helpers
+ // ---------------------------------------------------------------------------
+ get name() {
+ return this.component.constructor.name;
+ }
+ get subscriptions() {
+ const render = batchedRenderFunctions.get(this);
+ return render ? getSubscriptions(render) : [];
+ }
+ }
+
+ const TIMEOUT = Symbol("timeout");
+ const HOOK_TIMEOUT = {
+ onWillStart: 3000,
+ onWillUpdateProps: 3000,
+ };
+ function wrapError(fn, hookName) {
+ const error = new OwlError();
+ const timeoutError = new OwlError();
+ const node = getCurrent();
+ return (...args) => {
+ const onError = (cause) => {
+ error.cause = cause;
+ error.message =
+ cause instanceof Error
+ ? `The following error occurred in ${hookName}: "${cause.message}"`
+ : `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
+ throw error;
+ };
+ let result;
+ try {
+ result = fn(...args);
+ }
+ catch (cause) {
+ onError(cause);
+ }
+ if (!(result instanceof Promise)) {
+ return result;
+ }
+ const timeout = HOOK_TIMEOUT[hookName];
+ if (timeout) {
+ const fiber = node.fiber;
+ Promise.race([
+ result.catch(() => { }),
+ new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), timeout)),
+ ]).then((res) => {
+ if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
+ timeoutError.message = `${hookName}'s promise hasn't resolved after ${timeout / 1000} seconds`;
+ console.log(timeoutError);
+ }
+ });
+ }
+ return result.catch(onError);
+ };
+ }
+ // -----------------------------------------------------------------------------
+ // hooks
+ // -----------------------------------------------------------------------------
+ function onWillStart(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
+ }
+ function onWillUpdateProps(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
+ }
+ function onMounted(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
+ }
+ function onWillPatch(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
+ }
+ function onPatched(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.patched.push(decorate(fn.bind(node.component), "onPatched"));
+ }
+ function onWillUnmount(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
+ }
+ function onWillDestroy(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
+ }
+ function onWillRender(fn) {
+ const node = getCurrent();
+ const renderFn = node.renderFn;
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ fn = decorate(fn.bind(node.component), "onWillRender");
+ node.renderFn = () => {
+ fn();
+ return renderFn();
+ };
+ }
+ function onRendered(fn) {
+ const node = getCurrent();
+ const renderFn = node.renderFn;
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ fn = decorate(fn.bind(node.component), "onRendered");
+ node.renderFn = () => {
+ const result = renderFn();
+ fn();
+ return result;
+ };
+ }
+ function onError(callback) {
+ const node = getCurrent();
+ let handlers = nodeErrorHandlers.get(node);
+ if (!handlers) {
+ handlers = [];
+ nodeErrorHandlers.set(node, handlers);
+ }
+ handlers.push(callback.bind(node.component));
+ }
+
+ class Component {
+ constructor(props, env, node) {
+ this.props = props;
+ this.env = env;
+ this.__owl__ = node;
+ }
+ setup() { }
+ render(deep = false) {
+ this.__owl__.render(deep === true);
+ }
+ }
+ Component.template = "";
+
+ const VText = text("").constructor;
+ class VPortal extends VText {
+ constructor(selector, content) {
+ super("");
+ this.target = null;
+ this.selector = selector;
+ this.content = content;
+ }
+ mount(parent, anchor) {
+ super.mount(parent, anchor);
+ this.target = document.querySelector(this.selector);
+ if (this.target) {
+ this.content.mount(this.target, null);
+ }
+ else {
+ this.content.mount(parent, anchor);
+ }
+ }
+ beforeRemove() {
+ this.content.beforeRemove();
+ }
+ remove() {
+ if (this.content) {
+ super.remove();
+ this.content.remove();
+ this.content = null;
+ }
+ }
+ patch(other) {
+ super.patch(other);
+ if (this.content) {
+ this.content.patch(other.content, true);
+ }
+ else {
+ this.content = other.content;
+ this.content.mount(this.target, null);
+ }
+ }
+ }
+ /**
+ * kind of similar to , but it wraps it around a VPortal
+ */
+ function portalTemplate(app, bdom, helpers) {
+ let { callSlot } = helpers;
+ return function template(ctx, node, key = "") {
+ return new VPortal(ctx.props.target, callSlot(ctx, node, key, "default", false, null));
+ };
+ }
+ class Portal extends Component {
+ setup() {
+ const node = this.__owl__;
+ onMounted(() => {
+ const portal = node.bdom;
+ if (!portal.target) {
+ const target = document.querySelector(this.props.target);
+ if (target) {
+ portal.content.moveBeforeDOMNode(target.firstChild, target);
+ }
+ else {
+ throw new OwlError("invalid portal target");
+ }
+ }
+ });
+ onWillUnmount(() => {
+ const portal = node.bdom;
+ portal.remove();
+ });
+ }
+ }
+ Portal.template = "__portal__";
+ Portal.props = {
+ target: {
+ type: String,
+ },
+ slots: true,
+ };
+
+ // -----------------------------------------------------------------------------
+ // helpers
+ // -----------------------------------------------------------------------------
+ const isUnionType = (t) => Array.isArray(t);
+ const isBaseType = (t) => typeof t !== "object";
+ const isValueType = (t) => typeof t === "object" && t && "value" in t;
+ function isOptional(t) {
+ return typeof t === "object" && "optional" in t ? t.optional || false : false;
+ }
+ function describeType(type) {
+ return type === "*" || type === true ? "value" : type.name.toLowerCase();
+ }
+ function describe(info) {
+ if (isBaseType(info)) {
+ return describeType(info);
+ }
+ else if (isUnionType(info)) {
+ return info.map(describe).join(" or ");
+ }
+ else if (isValueType(info)) {
+ return String(info.value);
+ }
+ if ("element" in info) {
+ return `list of ${describe({ type: info.element, optional: false })}s`;
+ }
+ if ("shape" in info) {
+ return `object`;
+ }
+ return describe(info.type || "*");
+ }
+ function toSchema(spec) {
+ return Object.fromEntries(spec.map((e) => e.endsWith("?") ? [e.slice(0, -1), { optional: true }] : [e, { type: "*", optional: false }]));
+ }
+ /**
+ * Main validate function
+ */
+ function validate(obj, spec) {
+ let errors = validateSchema(obj, spec);
+ if (errors.length) {
+ throw new OwlError("Invalid object: " + errors.join(", "));
+ }
+ }
+ /**
+ * Helper validate function, to get the list of errors. useful if one want to
+ * manipulate the errors without parsing an error object
+ */
+ function validateSchema(obj, schema) {
+ if (Array.isArray(schema)) {
+ schema = toSchema(schema);
+ }
+ obj = toRaw(obj);
+ let errors = [];
+ // check if each value in obj has correct shape
+ for (let key in obj) {
+ if (key in schema) {
+ let result = validateType(key, obj[key], schema[key]);
+ if (result) {
+ errors.push(result);
+ }
+ }
+ else if (!("*" in schema)) {
+ errors.push(`unknown key '${key}'`);
+ }
+ }
+ // check that all specified keys are defined in obj
+ for (let key in schema) {
+ const spec = schema[key];
+ if (key !== "*" && !isOptional(spec) && !(key in obj)) {
+ const isObj = typeof spec === "object" && !Array.isArray(spec);
+ const isAny = spec === "*" || (isObj && "type" in spec ? spec.type === "*" : isObj);
+ let detail = isAny ? "" : ` (should be a ${describe(spec)})`;
+ errors.push(`'${key}' is missing${detail}`);
+ }
+ }
+ return errors;
+ }
+ function validateBaseType(key, value, type) {
+ if (typeof type === "function") {
+ if (typeof value === "object") {
+ if (!(value instanceof type)) {
+ return `'${key}' is not a ${describeType(type)}`;
+ }
+ }
+ else if (typeof value !== type.name.toLowerCase()) {
+ return `'${key}' is not a ${describeType(type)}`;
+ }
+ }
+ return null;
+ }
+ function validateArrayType(key, value, descr) {
+ if (!Array.isArray(value)) {
+ return `'${key}' is not a list of ${describe(descr)}s`;
+ }
+ for (let i = 0; i < value.length; i++) {
+ const error = validateType(`${key}[${i}]`, value[i], descr);
+ if (error) {
+ return error;
+ }
+ }
+ return null;
+ }
+ function validateType(key, value, descr) {
+ if (value === undefined) {
+ return isOptional(descr) ? null : `'${key}' is undefined (should be a ${describe(descr)})`;
+ }
+ else if (isBaseType(descr)) {
+ return validateBaseType(key, value, descr);
+ }
+ else if (isValueType(descr)) {
+ return value === descr.value ? null : `'${key}' is not equal to '${descr.value}'`;
+ }
+ else if (isUnionType(descr)) {
+ let validDescr = descr.find((p) => !validateType(key, value, p));
+ return validDescr ? null : `'${key}' is not a ${describe(descr)}`;
+ }
+ let result = null;
+ if ("element" in descr) {
+ result = validateArrayType(key, value, descr.element);
+ }
+ else if ("shape" in descr) {
+ if (typeof value !== "object" || Array.isArray(value)) {
+ result = `'${key}' is not an object`;
+ }
+ else {
+ const errors = validateSchema(value, descr.shape);
+ if (errors.length) {
+ result = `'${key}' doesn't have the correct shape (${errors.join(", ")})`;
+ }
+ }
+ }
+ else if ("values" in descr) {
+ if (typeof value !== "object" || Array.isArray(value)) {
+ result = `'${key}' is not an object`;
+ }
+ else {
+ const errors = Object.entries(value)
+ .map(([key, value]) => validateType(key, value, descr.values))
+ .filter(Boolean);
+ if (errors.length) {
+ result = `some of the values in '${key}' are invalid (${errors.join(", ")})`;
+ }
+ }
+ }
+ if ("type" in descr && !result) {
+ result = validateType(key, value, descr.type);
+ }
+ if ("validate" in descr && !result) {
+ result = !descr.validate(value) ? `'${key}' is not valid` : null;
+ }
+ return result;
+ }
+
+ const ObjectCreate = Object.create;
+ /**
+ * This file contains utility functions that will be injected in each template,
+ * to perform various useful tasks in the compiled code.
+ */
+ function withDefault(value, defaultValue) {
+ return value === undefined || value === null || value === false ? defaultValue : value;
+ }
+ function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
+ key = key + "__slot_" + name;
+ const slots = ctx.props.slots || {};
+ const { __render, __ctx, __scope } = slots[name] || {};
+ const slotScope = ObjectCreate(__ctx || {});
+ if (__scope) {
+ slotScope[__scope] = extra;
+ }
+ const slotBDom = __render ? __render(slotScope, parent, key) : null;
+ if (defaultContent) {
+ let child1 = undefined;
+ let child2 = undefined;
+ if (slotBDom) {
+ child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
+ }
+ else {
+ child2 = defaultContent(ctx, parent, key);
+ }
+ return multi([child1, child2]);
+ }
+ return slotBDom || text("");
+ }
+ function capture(ctx) {
+ const result = ObjectCreate(ctx);
+ for (let k in ctx) {
+ result[k] = ctx[k];
+ }
+ return result;
+ }
+ function withKey(elem, k) {
+ elem.key = k;
+ return elem;
+ }
+ function prepareList(collection) {
+ let keys;
+ let values;
+ if (Array.isArray(collection)) {
+ keys = collection;
+ values = collection;
+ }
+ else if (collection instanceof Map) {
+ keys = [...collection.keys()];
+ values = [...collection.values()];
+ }
+ else if (Symbol.iterator in Object(collection)) {
+ keys = [...collection];
+ values = keys;
+ }
+ else if (collection && typeof collection === "object") {
+ values = Object.values(collection);
+ keys = Object.keys(collection);
+ }
+ else {
+ throw new OwlError(`Invalid loop expression: "${collection}" is not iterable`);
+ }
+ const n = values.length;
+ return [keys, values, n, new Array(n)];
+ }
+ const isBoundary = Symbol("isBoundary");
+ function setContextValue(ctx, key, value) {
+ const ctx0 = ctx;
+ while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
+ const newCtx = ctx.__proto__;
+ if (!newCtx) {
+ ctx = ctx0;
+ break;
+ }
+ ctx = newCtx;
+ }
+ ctx[key] = value;
+ }
+ function toNumber(val) {
+ const n = parseFloat(val);
+ return isNaN(n) ? val : n;
+ }
+ function shallowEqual(l1, l2) {
+ for (let i = 0, l = l1.length; i < l; i++) {
+ if (l1[i] !== l2[i]) {
+ return false;
+ }
+ }
+ return true;
+ }
+ class LazyValue {
+ constructor(fn, ctx, component, node, key) {
+ this.fn = fn;
+ this.ctx = capture(ctx);
+ this.component = component;
+ this.node = node;
+ this.key = key;
+ }
+ evaluate() {
+ return this.fn.call(this.component, this.ctx, this.node, this.key);
+ }
+ toString() {
+ return this.evaluate().toString();
+ }
+ }
+ /*
+ * Safely outputs `value` as a block depending on the nature of `value`
+ */
+ function safeOutput(value, defaultValue) {
+ if (value === undefined || value === null) {
+ return defaultValue ? toggler("default", defaultValue) : toggler("undefined", text(""));
+ }
+ let safeKey;
+ let block;
+ switch (typeof value) {
+ case "object":
+ if (value instanceof Markup) {
+ safeKey = `string_safe`;
+ block = html(value);
+ }
+ else if (value instanceof LazyValue) {
+ safeKey = `lazy_value`;
+ block = value.evaluate();
+ }
+ else if (value instanceof String) {
+ safeKey = "string_unsafe";
+ block = text(value);
+ }
+ else {
+ // Assuming it is a block
+ safeKey = "block_safe";
+ block = value;
+ }
+ break;
+ case "string":
+ safeKey = "string_unsafe";
+ block = text(value);
+ break;
+ default:
+ safeKey = "string_unsafe";
+ block = text(String(value));
+ }
+ return toggler(safeKey, block);
+ }
+ /**
+ * Validate the component props (or next props) against the (static) props
+ * description. This is potentially an expensive operation: it may needs to
+ * visit recursively the props and all the children to check if they are valid.
+ * This is why it is only done in 'dev' mode.
+ */
+ function validateProps(name, props, comp) {
+ const ComponentClass = typeof name !== "string"
+ ? name
+ : comp.constructor.components[name];
+ if (!ComponentClass) {
+ // this is an error, wrong component. We silently return here instead so the
+ // error is triggered by the usual path ('component' function)
+ return;
+ }
+ const schema = ComponentClass.props;
+ if (!schema) {
+ if (comp.__owl__.app.warnIfNoStaticProps) {
+ console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
+ }
+ return;
+ }
+ const defaultProps = ComponentClass.defaultProps;
+ if (defaultProps) {
+ let isMandatory = (name) => Array.isArray(schema)
+ ? schema.includes(name)
+ : name in schema && !("*" in schema) && !isOptional(schema[name]);
+ for (let p in defaultProps) {
+ if (isMandatory(p)) {
+ throw new OwlError(`A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`);
+ }
+ }
+ }
+ const errors = validateSchema(props, schema);
+ if (errors.length) {
+ throw new OwlError(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
+ }
+ }
+ function makeRefWrapper(node) {
+ let refNames = new Set();
+ return (name, fn) => {
+ if (refNames.has(name)) {
+ throw new OwlError(`Cannot set the same ref more than once in the same component, ref "${name}" was set multiple times in ${node.name}`);
+ }
+ refNames.add(name);
+ return fn;
+ };
+ }
+ const helpers = {
+ withDefault,
+ zero: Symbol("zero"),
+ isBoundary,
+ callSlot,
+ capture,
+ withKey,
+ prepareList,
+ setContextValue,
+ shallowEqual,
+ toNumber,
+ validateProps,
+ LazyValue,
+ safeOutput,
+ createCatcher,
+ markRaw,
+ OwlError,
+ makeRefWrapper,
+ };
+
+ /**
+ * Parses an XML string into an XML document, throwing errors on parser errors
+ * instead of returning an XML document containing the parseerror.
+ *
+ * @param xml the string to parse
+ * @returns an XML document corresponding to the content of the string
+ */
+ function parseXML(xml) {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(xml, "text/xml");
+ if (doc.getElementsByTagName("parsererror").length) {
+ let msg = "Invalid XML in template.";
+ const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
+ if (parsererrorText) {
+ msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
+ const re = /\d+/g;
+ const firstMatch = re.exec(parsererrorText);
+ if (firstMatch) {
+ const lineNumber = Number(firstMatch[0]);
+ const line = xml.split("\n")[lineNumber - 1];
+ const secondMatch = re.exec(parsererrorText);
+ if (line && secondMatch) {
+ const columnIndex = Number(secondMatch[0]) - 1;
+ if (line[columnIndex]) {
+ msg +=
+ `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
+ `${line}\n${"-".repeat(columnIndex - 1)}^`;
+ }
+ }
+ }
+ }
+ throw new OwlError(msg);
+ }
+ return doc;
+ }
+
+ const bdom = { text, createBlock, list, multi, html, toggler, comment };
+ class TemplateSet {
+ constructor(config = {}) {
+ this.rawTemplates = Object.create(globalTemplates);
+ this.templates = {};
+ this.Portal = Portal;
+ this.dev = config.dev || false;
+ this.translateFn = config.translateFn;
+ this.translatableAttributes = config.translatableAttributes;
+ if (config.templates) {
+ if (config.templates instanceof Document || typeof config.templates === "string") {
+ this.addTemplates(config.templates);
+ }
+ else {
+ for (const name in config.templates) {
+ this.addTemplate(name, config.templates[name]);
+ }
+ }
+ }
+ this.getRawTemplate = config.getTemplate;
+ this.customDirectives = config.customDirectives || {};
+ this.runtimeUtils = { ...helpers, __globals__: config.globalValues || {} };
+ this.hasGlobalValues = Boolean(config.globalValues && Object.keys(config.globalValues).length);
+ }
+ static registerTemplate(name, fn) {
+ globalTemplates[name] = fn;
+ }
+ addTemplate(name, template) {
+ if (name in this.rawTemplates) {
+ // this check can be expensive, just silently ignore double definitions outside dev mode
+ if (!this.dev) {
+ return;
+ }
+ const rawTemplate = this.rawTemplates[name];
+ const currentAsString = typeof rawTemplate === "string"
+ ? rawTemplate
+ : rawTemplate instanceof Element
+ ? rawTemplate.outerHTML
+ : rawTemplate.toString();
+ const newAsString = typeof template === "string" ? template : template.outerHTML;
+ if (currentAsString === newAsString) {
+ return;
+ }
+ throw new OwlError(`Template ${name} already defined with different content`);
+ }
+ this.rawTemplates[name] = template;
+ }
+ addTemplates(xml) {
+ if (!xml) {
+ // empty string
+ return;
+ }
+ xml = xml instanceof Document ? xml : parseXML(xml);
+ for (const template of xml.querySelectorAll("[t-name]")) {
+ const name = template.getAttribute("t-name");
+ this.addTemplate(name, template);
+ }
+ }
+ getTemplate(name) {
+ var _a;
+ if (!(name in this.templates)) {
+ const rawTemplate = ((_a = this.getRawTemplate) === null || _a === void 0 ? void 0 : _a.call(this, name)) || this.rawTemplates[name];
+ if (rawTemplate === undefined) {
+ let extraInfo = "";
+ try {
+ const componentName = getCurrent().component.constructor.name;
+ extraInfo = ` (for component "${componentName}")`;
+ }
+ catch { }
+ throw new OwlError(`Missing template: "${name}"${extraInfo}`);
+ }
+ const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
+ const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
+ // first add a function to lazily get the template, in case there is a
+ // recursive call to the template name
+ const templates = this.templates;
+ this.templates[name] = function (context, parent) {
+ return templates[name].call(this, context, parent);
+ };
+ const template = templateFn(this, bdom, this.runtimeUtils);
+ this.templates[name] = template;
+ }
+ return this.templates[name];
+ }
+ _compileTemplate(name, template) {
+ throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
+ }
+ callTemplate(owner, subTemplate, ctx, parent, key) {
+ const template = this.getTemplate(subTemplate);
+ return toggler(subTemplate, template.call(owner, ctx, parent, key + subTemplate));
+ }
+ }
+ // -----------------------------------------------------------------------------
+ // xml tag helper
+ // -----------------------------------------------------------------------------
+ const globalTemplates = {};
+ function xml(...args) {
+ const name = `__template__${xml.nextId++}`;
+ const value = String.raw(...args);
+ globalTemplates[name] = value;
+ return name;
+ }
+ xml.nextId = 1;
+ TemplateSet.registerTemplate("__portal__", portalTemplate);
+
+ /**
+ * Owl QWeb Expression Parser
+ *
+ * Owl needs in various contexts to be able to understand the structure of a
+ * string representing a javascript expression. The usual goal is to be able
+ * to rewrite some variables. For example, if a template has
+ *
+ * ```xml
+ * ...
+ * ```
+ *
+ * this needs to be translated in something like this:
+ *
+ * ```js
+ * if (context["computeSomething"]({val: context["state"].val})) { ... }
+ * ```
+ *
+ * This file contains the implementation of an extremely naive tokenizer/parser
+ * and evaluator for javascript expressions. The supported grammar is basically
+ * only expressive enough to understand the shape of objects, of arrays, and
+ * various operators.
+ */
+ //------------------------------------------------------------------------------
+ // Misc types, constants and helpers
+ //------------------------------------------------------------------------------
+ const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,eval,void,Math,RegExp,Array,Object,Date,__globals__".split(",");
+ const WORD_REPLACEMENT = Object.assign(Object.create(null), {
+ and: "&&",
+ or: "||",
+ gt: ">",
+ gte: ">=",
+ lt: "<",
+ lte: "<=",
+ });
+ const STATIC_TOKEN_MAP = Object.assign(Object.create(null), {
+ "{": "LEFT_BRACE",
+ "}": "RIGHT_BRACE",
+ "[": "LEFT_BRACKET",
+ "]": "RIGHT_BRACKET",
+ ":": "COLON",
+ ",": "COMMA",
+ "(": "LEFT_PAREN",
+ ")": "RIGHT_PAREN",
+ });
+ // note that the space after typeof is relevant. It makes sure that the formatted
+ // expression has a space after typeof. Currently we don't support delete and void
+ const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ,|,&,^,~".split(",");
+ let tokenizeString = function (expr) {
+ let s = expr[0];
+ let start = s;
+ if (s !== "'" && s !== '"' && s !== "`") {
+ return false;
+ }
+ let i = 1;
+ let cur;
+ while (expr[i] && expr[i] !== start) {
+ cur = expr[i];
+ s += cur;
+ if (cur === "\\") {
+ i++;
+ cur = expr[i];
+ if (!cur) {
+ throw new OwlError("Invalid expression");
+ }
+ s += cur;
+ }
+ i++;
+ }
+ if (expr[i] !== start) {
+ throw new OwlError("Invalid expression");
+ }
+ s += start;
+ if (start === "`") {
+ return {
+ type: "TEMPLATE_STRING",
+ value: s,
+ replace(replacer) {
+ return s.replace(/\$\{(.*?)\}/g, (match, group) => {
+ return "${" + replacer(group) + "}";
+ });
+ },
+ };
+ }
+ return { type: "VALUE", value: s };
+ };
+ let tokenizeNumber = function (expr) {
+ let s = expr[0];
+ if (s && s.match(/[0-9]/)) {
+ let i = 1;
+ while (expr[i] && expr[i].match(/[0-9]|\./)) {
+ s += expr[i];
+ i++;
+ }
+ return { type: "VALUE", value: s };
+ }
+ else {
+ return false;
+ }
+ };
+ let tokenizeSymbol = function (expr) {
+ let s = expr[0];
+ if (s && s.match(/[a-zA-Z_\$]/)) {
+ let i = 1;
+ while (expr[i] && expr[i].match(/\w/)) {
+ s += expr[i];
+ i++;
+ }
+ if (s in WORD_REPLACEMENT) {
+ return { type: "OPERATOR", value: WORD_REPLACEMENT[s], size: s.length };
+ }
+ return { type: "SYMBOL", value: s };
+ }
+ else {
+ return false;
+ }
+ };
+ const tokenizeStatic = function (expr) {
+ const char = expr[0];
+ if (char && char in STATIC_TOKEN_MAP) {
+ return { type: STATIC_TOKEN_MAP[char], value: char };
+ }
+ return false;
+ };
+ const tokenizeOperator = function (expr) {
+ for (let op of OPERATORS) {
+ if (expr.startsWith(op)) {
+ return { type: "OPERATOR", value: op };
+ }
+ }
+ return false;
+ };
+ const TOKENIZERS = [
+ tokenizeString,
+ tokenizeNumber,
+ tokenizeOperator,
+ tokenizeSymbol,
+ tokenizeStatic,
+ ];
+ /**
+ * Convert a javascript expression (as a string) into a list of tokens. For
+ * example: `tokenize("1 + b")` will return:
+ * ```js
+ * [
+ * {type: "VALUE", value: "1"},
+ * {type: "OPERATOR", value: "+"},
+ * {type: "SYMBOL", value: "b"}
+ * ]
+ * ```
+ */
+ function tokenize(expr) {
+ const result = [];
+ let token = true;
+ let error;
+ let current = expr;
+ try {
+ while (token) {
+ current = current.trim();
+ if (current) {
+ for (let tokenizer of TOKENIZERS) {
+ token = tokenizer(current);
+ if (token) {
+ result.push(token);
+ current = current.slice(token.size || token.value.length);
+ break;
+ }
+ }
+ }
+ else {
+ token = false;
+ }
+ }
+ }
+ catch (e) {
+ error = e; // Silence all errors and throw a generic error below
+ }
+ if (current.length || error) {
+ throw new OwlError(`Tokenizer error: could not tokenize \`${expr}\``);
+ }
+ return result;
+ }
+ //------------------------------------------------------------------------------
+ // Expression "evaluator"
+ //------------------------------------------------------------------------------
+ const isLeftSeparator = (token) => token && (token.type === "LEFT_BRACE" || token.type === "COMMA");
+ const isRightSeparator = (token) => token && (token.type === "RIGHT_BRACE" || token.type === "COMMA");
+ /**
+ * This is the main function exported by this file. This is the code that will
+ * process an expression (given as a string) and returns another expression with
+ * proper lookups in the context.
+ *
+ * Usually, this kind of code would be very simple to do if we had an AST (so,
+ * if we had a javascript parser), since then, we would only need to find the
+ * variables and replace them. However, a parser is more complicated, and there
+ * are no standard builtin parser API.
+ *
+ * Since this method is applied to simple javasript expressions, and the work to
+ * be done is actually quite simple, we actually can get away with not using a
+ * parser, which helps with the code size.
+ *
+ * Here is the heuristic used by this method to determine if a token is a
+ * variable:
+ * - by default, all symbols are considered a variable
+ * - unless the previous token is a dot (in that case, this is a property: `a.b`)
+ * - or if the previous token is a left brace or a comma, and the next token is
+ * a colon (in that case, this is an object key: `{a: b}`)
+ *
+ * Some specific code is also required to support arrow functions. If we detect
+ * the arrow operator, then we add the current (or some previous tokens) token to
+ * the list of variables so it does not get replaced by a lookup in the context
+ */
+ function compileExprToArray(expr) {
+ const localVars = new Set();
+ const tokens = tokenize(expr);
+ let i = 0;
+ let stack = []; // to track last opening (, [ or {
+ while (i < tokens.length) {
+ let token = tokens[i];
+ let prevToken = tokens[i - 1];
+ let nextToken = tokens[i + 1];
+ let groupType = stack[stack.length - 1];
+ switch (token.type) {
+ case "LEFT_BRACE":
+ case "LEFT_BRACKET":
+ case "LEFT_PAREN":
+ stack.push(token.type);
+ break;
+ case "RIGHT_BRACE":
+ case "RIGHT_BRACKET":
+ case "RIGHT_PAREN":
+ stack.pop();
+ }
+ let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
+ if (token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value)) {
+ if (prevToken) {
+ // normalize missing tokens: {a} should be equivalent to {a:a}
+ if (groupType === "LEFT_BRACE" &&
+ isLeftSeparator(prevToken) &&
+ isRightSeparator(nextToken)) {
+ tokens.splice(i + 1, 0, { type: "COLON", value: ":" }, { ...token });
+ nextToken = tokens[i + 1];
+ }
+ if (prevToken.type === "OPERATOR" && prevToken.value === ".") {
+ isVar = false;
+ }
+ else if (prevToken.type === "LEFT_BRACE" || prevToken.type === "COMMA") {
+ if (nextToken && nextToken.type === "COLON") {
+ isVar = false;
+ }
+ }
+ }
+ }
+ if (token.type === "TEMPLATE_STRING") {
+ token.value = token.replace((expr) => compileExpr(expr));
+ }
+ if (nextToken && nextToken.type === "OPERATOR" && nextToken.value === "=>") {
+ if (token.type === "RIGHT_PAREN") {
+ let j = i - 1;
+ while (j > 0 && tokens[j].type !== "LEFT_PAREN") {
+ if (tokens[j].type === "SYMBOL" && tokens[j].originalValue) {
+ tokens[j].value = tokens[j].originalValue;
+ localVars.add(tokens[j].value); //] = { id: tokens[j].value, expr: tokens[j].value };
+ }
+ j--;
+ }
+ }
+ else {
+ localVars.add(token.value); //] = { id: token.value, expr: token.value };
+ }
+ }
+ if (isVar) {
+ token.varName = token.value;
+ if (!localVars.has(token.value)) {
+ token.originalValue = token.value;
+ token.value = `ctx['${token.value}']`;
+ }
+ }
+ i++;
+ }
+ // Mark all variables that have been used locally.
+ // This assumes the expression has only one scope (incorrect but "good enough for now")
+ for (const token of tokens) {
+ if (token.type === "SYMBOL" && token.varName && localVars.has(token.value)) {
+ token.originalValue = token.value;
+ token.value = `_${token.value}`;
+ token.isLocal = true;
+ }
+ }
+ return tokens;
+ }
+ // Leading spaces are trimmed during tokenization, so they need to be added back for some values
+ const paddedValues = new Map([["in ", " in "]]);
+ function compileExpr(expr) {
+ return compileExprToArray(expr)
+ .map((t) => paddedValues.get(t.value) || t.value)
+ .join("");
+ }
+ const INTERP_REGEXP = /\{\{.*?\}\}|\#\{.*?\}/g;
+ function replaceDynamicParts(s, replacer) {
+ let matches = s.match(INTERP_REGEXP);
+ if (matches && matches[0].length === s.length) {
+ return `(${replacer(s.slice(2, matches[0][0] === "{" ? -2 : -1))})`;
+ }
+ let r = s.replace(INTERP_REGEXP, (s) => "${" + replacer(s.slice(2, s[0] === "{" ? -2 : -1)) + "}");
+ return "`" + r + "`";
+ }
+ function interpolate(s) {
+ return replaceDynamicParts(s, compileExpr);
+ }
+
+ const whitespaceRE = /\s+/g;
+ // using a non-html document so that HTML serializes as XML instead
+ // of HTML (as we will parse it as xml later)
+ const xmlDoc = document.implementation.createDocument(null, null, null);
+ const MODS = new Set(["stop", "capture", "prevent", "self", "synthetic"]);
+ let nextDataIds = {};
+ function generateId(prefix = "") {
+ nextDataIds[prefix] = (nextDataIds[prefix] || 0) + 1;
+ return prefix + nextDataIds[prefix];
+ }
+ function isProp(tag, key) {
+ switch (tag) {
+ case "input":
+ return (key === "checked" ||
+ key === "indeterminate" ||
+ key === "value" ||
+ key === "readonly" ||
+ key === "readOnly" ||
+ key === "disabled");
+ case "option":
+ return key === "selected" || key === "disabled";
+ case "textarea":
+ return key === "value" || key === "readonly" || key === "readOnly" || key === "disabled";
+ case "select":
+ return key === "value" || key === "disabled";
+ case "button":
+ case "optgroup":
+ return key === "disabled";
+ }
+ return false;
+ }
+ /**
+ * Returns a template literal that evaluates to str. You can add interpolation
+ * sigils into the string if required
+ */
+ function toStringExpression(str) {
+ return `\`${str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/, "\\${")}\``;
+ }
+ // -----------------------------------------------------------------------------
+ // BlockDescription
+ // -----------------------------------------------------------------------------
+ class BlockDescription {
+ constructor(target, type) {
+ this.dynamicTagName = null;
+ this.isRoot = false;
+ this.hasDynamicChildren = false;
+ this.children = [];
+ this.data = [];
+ this.childNumber = 0;
+ this.parentVar = "";
+ this.id = BlockDescription.nextBlockId++;
+ this.varName = "b" + this.id;
+ this.blockName = "block" + this.id;
+ this.target = target;
+ this.type = type;
+ }
+ insertData(str, prefix = "d") {
+ const id = generateId(prefix);
+ this.target.addLine(`let ${id} = ${str};`);
+ return this.data.push(id) - 1;
+ }
+ insert(dom) {
+ if (this.currentDom) {
+ this.currentDom.appendChild(dom);
+ }
+ else {
+ this.dom = dom;
+ }
+ }
+ generateExpr(expr) {
+ if (this.type === "block") {
+ const hasChildren = this.children.length;
+ let params = this.data.length ? `[${this.data.join(", ")}]` : hasChildren ? "[]" : "";
+ if (hasChildren) {
+ params += ", [" + this.children.map((c) => c.varName).join(", ") + "]";
+ }
+ if (this.dynamicTagName) {
+ return `toggler(${this.dynamicTagName}, ${this.blockName}(${this.dynamicTagName})(${params}))`;
+ }
+ return `${this.blockName}(${params})`;
+ }
+ else if (this.type === "list") {
+ return `list(c_block${this.id})`;
+ }
+ return expr;
+ }
+ asXmlString() {
+ // Can't use outerHTML on text/comment nodes
+ // append dom to any element and use innerHTML instead
+ const t = xmlDoc.createElement("t");
+ t.appendChild(this.dom);
+ return t.innerHTML;
+ }
+ }
+ BlockDescription.nextBlockId = 1;
+ function createContext(parentCtx, params) {
+ return Object.assign({
+ block: null,
+ index: 0,
+ forceNewBlock: true,
+ translate: parentCtx.translate,
+ translationCtx: parentCtx.translationCtx,
+ tKeyExpr: null,
+ nameSpace: parentCtx.nameSpace,
+ tModelSelectedExpr: parentCtx.tModelSelectedExpr,
+ }, params);
+ }
+ class CodeTarget {
+ constructor(name, on) {
+ this.indentLevel = 0;
+ this.loopLevel = 0;
+ this.code = [];
+ this.hasRoot = false;
+ this.hasCache = false;
+ this.shouldProtectScope = false;
+ this.hasRefWrapper = false;
+ this.name = name;
+ this.on = on || null;
+ }
+ addLine(line, idx) {
+ const prefix = new Array(this.indentLevel + 2).join(" ");
+ if (idx === undefined) {
+ this.code.push(prefix + line);
+ }
+ else {
+ this.code.splice(idx, 0, prefix + line);
+ }
+ }
+ generateCode() {
+ let result = [];
+ result.push(`function ${this.name}(ctx, node, key = "") {`);
+ if (this.shouldProtectScope) {
+ result.push(` ctx = Object.create(ctx);`);
+ result.push(` ctx[isBoundary] = 1`);
+ }
+ if (this.hasRefWrapper) {
+ result.push(` let refWrapper = makeRefWrapper(this.__owl__);`);
+ }
+ if (this.hasCache) {
+ result.push(` let cache = ctx.cache || {};`);
+ result.push(` let nextCache = ctx.cache = {};`);
+ }
+ for (let line of this.code) {
+ result.push(line);
+ }
+ if (!this.hasRoot) {
+ result.push(`return text('');`);
+ }
+ result.push(`}`);
+ return result.join("\n ");
+ }
+ currentKey(ctx) {
+ let key = this.loopLevel ? `key${this.loopLevel}` : "key";
+ if (ctx.tKeyExpr) {
+ key = `${ctx.tKeyExpr} + ${key}`;
+ }
+ return key;
+ }
+ }
+ const TRANSLATABLE_ATTRS = [
+ "alt",
+ "aria-label",
+ "aria-placeholder",
+ "aria-roledescription",
+ "aria-valuetext",
+ "label",
+ "placeholder",
+ "title",
+ ];
+ const translationRE = /^(\s*)([\s\S]+?)(\s*)$/;
+ class CodeGenerator {
+ constructor(ast, options) {
+ this.blocks = [];
+ this.nextBlockId = 1;
+ this.isDebug = false;
+ this.targets = [];
+ this.target = new CodeTarget("template");
+ this.translatableAttributes = TRANSLATABLE_ATTRS;
+ this.staticDefs = [];
+ this.slotNames = new Set();
+ this.helpers = new Set();
+ this.translateFn = options.translateFn || ((s) => s);
+ if (options.translatableAttributes) {
+ const attrs = new Set(TRANSLATABLE_ATTRS);
+ for (let attr of options.translatableAttributes) {
+ if (attr.startsWith("-")) {
+ attrs.delete(attr.slice(1));
+ }
+ else {
+ attrs.add(attr);
+ }
+ }
+ this.translatableAttributes = [...attrs];
+ }
+ this.hasSafeContext = options.hasSafeContext || false;
+ this.dev = options.dev || false;
+ this.ast = ast;
+ this.templateName = options.name;
+ if (options.hasGlobalValues) {
+ this.helpers.add("__globals__");
+ }
+ }
+ generateCode() {
+ const ast = this.ast;
+ this.isDebug = ast.type === 12 /* TDebug */;
+ BlockDescription.nextBlockId = 1;
+ nextDataIds = {};
+ this.compileAST(ast, {
+ block: null,
+ index: 0,
+ forceNewBlock: false,
+ isLast: true,
+ translate: true,
+ translationCtx: "",
+ tKeyExpr: null,
+ });
+ // define blocks and utility functions
+ let mainCode = [` let { text, createBlock, list, multi, html, toggler, comment } = bdom;`];
+ if (this.helpers.size) {
+ mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
+ }
+ if (this.templateName) {
+ mainCode.push(`// Template name: "${this.templateName}"`);
+ }
+ for (let { id, expr } of this.staticDefs) {
+ mainCode.push(`const ${id} = ${expr};`);
+ }
+ // define all blocks
+ if (this.blocks.length) {
+ mainCode.push(``);
+ for (let block of this.blocks) {
+ if (block.dom) {
+ let xmlString = toStringExpression(block.asXmlString());
+ if (block.dynamicTagName) {
+ xmlString = xmlString.replace(/^`<\w+/, `\`<\${tag || '${block.dom.nodeName}'}`);
+ xmlString = xmlString.replace(/\w+>`$/, `\${tag || '${block.dom.nodeName}'}>\``);
+ mainCode.push(`let ${block.blockName} = tag => createBlock(${xmlString});`);
+ }
+ else {
+ mainCode.push(`let ${block.blockName} = createBlock(${xmlString});`);
+ }
+ }
+ }
+ }
+ // define all slots/defaultcontent function
+ if (this.targets.length) {
+ for (let fn of this.targets) {
+ mainCode.push("");
+ mainCode = mainCode.concat(fn.generateCode());
+ }
+ }
+ // generate main code
+ mainCode.push("");
+ mainCode = mainCode.concat("return " + this.target.generateCode());
+ const code = mainCode.join("\n ");
+ if (this.isDebug) {
+ const msg = `[Owl Debug]\n${code}`;
+ console.log(msg);
+ }
+ return code;
+ }
+ compileInNewTarget(prefix, ast, ctx, on) {
+ const name = generateId(prefix);
+ const initialTarget = this.target;
+ const target = new CodeTarget(name, on);
+ this.targets.push(target);
+ this.target = target;
+ this.compileAST(ast, createContext(ctx));
+ this.target = initialTarget;
+ return name;
+ }
+ addLine(line, idx) {
+ this.target.addLine(line, idx);
+ }
+ define(varName, expr) {
+ this.addLine(`const ${varName} = ${expr};`);
+ }
+ insertAnchor(block, index = block.children.length) {
+ const tag = `block-child-${index}`;
+ const anchor = xmlDoc.createElement(tag);
+ block.insert(anchor);
+ }
+ createBlock(parentBlock, type, ctx) {
+ const hasRoot = this.target.hasRoot;
+ const block = new BlockDescription(this.target, type);
+ if (!hasRoot) {
+ this.target.hasRoot = true;
+ block.isRoot = true;
+ }
+ if (parentBlock) {
+ parentBlock.children.push(block);
+ if (parentBlock.type === "list") {
+ block.parentVar = `c_block${parentBlock.id}`;
+ }
+ }
+ return block;
+ }
+ insertBlock(expression, block, ctx) {
+ let blockExpr = block.generateExpr(expression);
+ if (block.parentVar) {
+ let key = this.target.currentKey(ctx);
+ this.helpers.add("withKey");
+ this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${key});`);
+ return;
+ }
+ if (ctx.tKeyExpr) {
+ blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
+ }
+ if (block.isRoot) {
+ if (this.target.on) {
+ blockExpr = this.wrapWithEventCatcher(blockExpr, this.target.on);
+ }
+ this.addLine(`return ${blockExpr};`);
+ }
+ else {
+ this.define(block.varName, blockExpr);
+ }
+ }
+ /**
+ * Captures variables that are used inside of an expression. This is useful
+ * because in compiled code, almost all variables are accessed through the ctx
+ * object. In the case of functions, that lookup in the context can be delayed
+ * which can cause issues if the value has changed since the function was
+ * defined.
+ *
+ * @param expr the expression to capture
+ * @param forceCapture whether the expression should capture its scope even if
+ * it doesn't contain a function. Useful when the expression will be used as
+ * a function body.
+ * @returns a new expression that uses the captured values
+ */
+ captureExpression(expr, forceCapture = false) {
+ if (!forceCapture && !expr.includes("=>")) {
+ return compileExpr(expr);
+ }
+ const tokens = compileExprToArray(expr);
+ const mapping = new Map();
+ return tokens
+ .map((tok) => {
+ if (tok.varName && !tok.isLocal) {
+ if (!mapping.has(tok.varName)) {
+ const varId = generateId("v");
+ mapping.set(tok.varName, varId);
+ this.define(varId, tok.value);
+ }
+ tok.value = mapping.get(tok.varName);
+ }
+ return tok.value;
+ })
+ .join("");
+ }
+ translate(str, translationCtx) {
+ const match = translationRE.exec(str);
+ return match[1] + this.translateFn(match[2], translationCtx) + match[3];
+ }
+ /**
+ * @returns the newly created block name, if any
+ */
+ compileAST(ast, ctx) {
+ switch (ast.type) {
+ case 1 /* Comment */:
+ return this.compileComment(ast, ctx);
+ case 0 /* Text */:
+ return this.compileText(ast, ctx);
+ case 2 /* DomNode */:
+ return this.compileTDomNode(ast, ctx);
+ case 4 /* TEsc */:
+ return this.compileTEsc(ast, ctx);
+ case 8 /* TOut */:
+ return this.compileTOut(ast, ctx);
+ case 5 /* TIf */:
+ return this.compileTIf(ast, ctx);
+ case 9 /* TForEach */:
+ return this.compileTForeach(ast, ctx);
+ case 10 /* TKey */:
+ return this.compileTKey(ast, ctx);
+ case 3 /* Multi */:
+ return this.compileMulti(ast, ctx);
+ case 7 /* TCall */:
+ return this.compileTCall(ast, ctx);
+ case 15 /* TCallBlock */:
+ return this.compileTCallBlock(ast, ctx);
+ case 6 /* TSet */:
+ return this.compileTSet(ast, ctx);
+ case 11 /* TComponent */:
+ return this.compileComponent(ast, ctx);
+ case 12 /* TDebug */:
+ return this.compileDebug(ast, ctx);
+ case 13 /* TLog */:
+ return this.compileLog(ast, ctx);
+ case 14 /* TSlot */:
+ return this.compileTSlot(ast, ctx);
+ case 16 /* TTranslation */:
+ return this.compileTTranslation(ast, ctx);
+ case 17 /* TTranslationContext */:
+ return this.compileTTranslationContext(ast, ctx);
+ case 18 /* TPortal */:
+ return this.compileTPortal(ast, ctx);
+ }
+ }
+ compileDebug(ast, ctx) {
+ this.addLine(`debugger;`);
+ if (ast.content) {
+ return this.compileAST(ast.content, ctx);
+ }
+ return null;
+ }
+ compileLog(ast, ctx) {
+ this.addLine(`console.log(${compileExpr(ast.expr)});`);
+ if (ast.content) {
+ return this.compileAST(ast.content, ctx);
+ }
+ return null;
+ }
+ compileComment(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ const isNewBlock = !block || forceNewBlock;
+ if (isNewBlock) {
+ block = this.createBlock(block, "comment", ctx);
+ this.insertBlock(`comment(${toStringExpression(ast.value)})`, block, {
+ ...ctx,
+ forceNewBlock: forceNewBlock && !block,
+ });
+ }
+ else {
+ const text = xmlDoc.createComment(ast.value);
+ block.insert(text);
+ }
+ return block.varName;
+ }
+ compileText(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ let value = ast.value;
+ if (value && ctx.translate !== false) {
+ value = this.translate(value, ctx.translationCtx);
+ }
+ if (!ctx.inPreTag) {
+ value = value.replace(whitespaceRE, " ");
+ }
+ if (!block || forceNewBlock) {
+ block = this.createBlock(block, "text", ctx);
+ this.insertBlock(`text(${toStringExpression(value)})`, block, {
+ ...ctx,
+ forceNewBlock: forceNewBlock && !block,
+ });
+ }
+ else {
+ const createFn = ast.type === 0 /* Text */ ? xmlDoc.createTextNode : xmlDoc.createComment;
+ block.insert(createFn.call(xmlDoc, value));
+ }
+ return block.varName;
+ }
+ generateHandlerCode(rawEvent, handler) {
+ const modifiers = rawEvent
+ .split(".")
+ .slice(1)
+ .map((m) => {
+ if (!MODS.has(m)) {
+ throw new OwlError(`Unknown event modifier: '${m}'`);
+ }
+ return `"${m}"`;
+ });
+ let modifiersCode = "";
+ if (modifiers.length) {
+ modifiersCode = `${modifiers.join(",")}, `;
+ }
+ return `[${modifiersCode}${this.captureExpression(handler)}, ctx]`;
+ }
+ compileTDomNode(ast, ctx) {
+ var _a;
+ let { block, forceNewBlock } = ctx;
+ const isNewBlock = !block || forceNewBlock || ast.dynamicTag !== null || ast.ns;
+ let codeIdx = this.target.code.length;
+ if (isNewBlock) {
+ if ((ast.dynamicTag || ctx.tKeyExpr || ast.ns) && ctx.block) {
+ this.insertAnchor(ctx.block);
+ }
+ block = this.createBlock(block, "block", ctx);
+ this.blocks.push(block);
+ if (ast.dynamicTag) {
+ const tagExpr = generateId("tag");
+ this.define(tagExpr, compileExpr(ast.dynamicTag));
+ block.dynamicTagName = tagExpr;
+ }
+ }
+ // attributes
+ const attrs = {};
+ for (let key in ast.attrs) {
+ let expr, attrName;
+ if (key.startsWith("t-attf")) {
+ expr = interpolate(ast.attrs[key]);
+ const idx = block.insertData(expr, "attr");
+ attrName = key.slice(7);
+ attrs["block-attribute-" + idx] = attrName;
+ }
+ else if (key.startsWith("t-att")) {
+ attrName = key === "t-att" ? null : key.slice(6);
+ expr = compileExpr(ast.attrs[key]);
+ if (attrName && isProp(ast.tag, attrName)) {
+ if (attrName === "readonly") {
+ // the property has a different name than the attribute
+ attrName = "readOnly";
+ }
+ // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
+ if (attrName === "value") {
+ // When the expression is falsy (except 0), fall back to an empty string
+ expr = `new String((${expr}) === 0 ? 0 : ((${expr}) || ""))`;
+ }
+ else {
+ expr = `new Boolean(${expr})`;
+ }
+ const idx = block.insertData(expr, "prop");
+ attrs[`block-property-${idx}`] = attrName;
+ }
+ else {
+ const idx = block.insertData(expr, "attr");
+ if (key === "t-att") {
+ attrs[`block-attributes`] = String(idx);
+ }
+ else {
+ attrs[`block-attribute-${idx}`] = attrName;
+ }
+ }
+ }
+ else if (this.translatableAttributes.includes(key)) {
+ const attrTranslationCtx = ((_a = ast.attrsTranslationCtx) === null || _a === void 0 ? void 0 : _a[key]) || ctx.translationCtx;
+ attrs[key] = this.translateFn(ast.attrs[key], attrTranslationCtx);
+ }
+ else {
+ expr = `"${ast.attrs[key]}"`;
+ attrName = key;
+ attrs[key] = ast.attrs[key];
+ }
+ if (attrName === "value" && ctx.tModelSelectedExpr) {
+ let selectedId = block.insertData(`${ctx.tModelSelectedExpr} === ${expr}`, "attr");
+ attrs[`block-attribute-${selectedId}`] = "selected";
+ }
+ }
+ // t-model
+ let tModelSelectedExpr;
+ if (ast.model) {
+ const { hasDynamicChildren, baseExpr, expr, eventType, shouldNumberize, shouldTrim, targetAttr, specialInitTargetAttr, } = ast.model;
+ const baseExpression = compileExpr(baseExpr);
+ const bExprId = generateId("bExpr");
+ this.define(bExprId, baseExpression);
+ const expression = compileExpr(expr);
+ const exprId = generateId("expr");
+ this.define(exprId, expression);
+ const fullExpression = `${bExprId}[${exprId}]`;
+ let idx;
+ if (specialInitTargetAttr) {
+ let targetExpr = targetAttr in attrs && `'${attrs[targetAttr]}'`;
+ if (!targetExpr && ast.attrs) {
+ // look at the dynamic attribute counterpart
+ const dynamicTgExpr = ast.attrs[`t-att-${targetAttr}`];
+ if (dynamicTgExpr) {
+ targetExpr = compileExpr(dynamicTgExpr);
+ }
+ }
+ idx = block.insertData(`${fullExpression} === ${targetExpr}`, "prop");
+ attrs[`block-property-${idx}`] = specialInitTargetAttr;
+ }
+ else if (hasDynamicChildren) {
+ const bValueId = generateId("bValue");
+ tModelSelectedExpr = `${bValueId}`;
+ this.define(tModelSelectedExpr, fullExpression);
+ }
+ else {
+ idx = block.insertData(`${fullExpression}`, "prop");
+ attrs[`block-property-${idx}`] = targetAttr;
+ }
+ this.helpers.add("toNumber");
+ let valueCode = `ev.target.${targetAttr}`;
+ valueCode = shouldTrim ? `${valueCode}.trim()` : valueCode;
+ valueCode = shouldNumberize ? `toNumber(${valueCode})` : valueCode;
+ const handler = `[(ev) => { ${fullExpression} = ${valueCode}; }]`;
+ idx = block.insertData(handler, "hdlr");
+ attrs[`block-handler-${idx}`] = eventType;
+ }
+ // event handlers
+ for (let ev in ast.on) {
+ const name = this.generateHandlerCode(ev, ast.on[ev]);
+ const idx = block.insertData(name, "hdlr");
+ attrs[`block-handler-${idx}`] = ev;
+ }
+ // t-ref
+ if (ast.ref) {
+ if (this.dev) {
+ this.helpers.add("makeRefWrapper");
+ this.target.hasRefWrapper = true;
+ }
+ const isDynamic = INTERP_REGEXP.test(ast.ref);
+ let name = `\`${ast.ref}\``;
+ if (isDynamic) {
+ name = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
+ }
+ let setRefStr = `(el) => this.__owl__.setRef((${name}), el)`;
+ if (this.dev) {
+ setRefStr = `refWrapper(${name}, ${setRefStr})`;
+ }
+ const idx = block.insertData(setRefStr, "ref");
+ attrs["block-ref"] = String(idx);
+ }
+ const nameSpace = ast.ns || ctx.nameSpace;
+ const dom = nameSpace
+ ? xmlDoc.createElementNS(nameSpace, ast.tag)
+ : xmlDoc.createElement(ast.tag);
+ for (const [attr, val] of Object.entries(attrs)) {
+ if (!(attr === "class" && val === "")) {
+ dom.setAttribute(attr, val);
+ }
+ }
+ block.insert(dom);
+ if (ast.content.length) {
+ const initialDom = block.currentDom;
+ block.currentDom = dom;
+ const children = ast.content;
+ for (let i = 0; i < children.length; i++) {
+ const child = ast.content[i];
+ const subCtx = createContext(ctx, {
+ block,
+ index: block.childNumber,
+ forceNewBlock: false,
+ isLast: ctx.isLast && i === children.length - 1,
+ tKeyExpr: ctx.tKeyExpr,
+ nameSpace,
+ tModelSelectedExpr,
+ inPreTag: ctx.inPreTag || ast.tag === "pre",
+ });
+ this.compileAST(child, subCtx);
+ }
+ block.currentDom = initialDom;
+ }
+ if (isNewBlock) {
+ this.insertBlock(`${block.blockName}(ddd)`, block, ctx);
+ // may need to rewrite code!
+ if (block.children.length && block.hasDynamicChildren) {
+ const code = this.target.code;
+ const children = block.children.slice();
+ let current = children.shift();
+ for (let i = codeIdx; i < code.length; i++) {
+ if (code[i].trimStart().startsWith(`const ${current.varName} `)) {
+ code[i] = code[i].replace(`const ${current.varName}`, current.varName);
+ current = children.shift();
+ if (!current)
+ break;
+ }
+ }
+ this.addLine(`let ${block.children.map((c) => c.varName).join(", ")};`, codeIdx);
+ }
+ }
+ return block.varName;
+ }
+ compileTEsc(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ let expr;
+ if (ast.expr === "0") {
+ this.helpers.add("zero");
+ expr = `ctx[zero]`;
+ }
+ else {
+ expr = compileExpr(ast.expr);
+ if (ast.defaultValue) {
+ this.helpers.add("withDefault");
+ // FIXME: defaultValue is not translated
+ expr = `withDefault(${expr}, ${toStringExpression(ast.defaultValue)})`;
+ }
+ }
+ if (!block || forceNewBlock) {
+ block = this.createBlock(block, "text", ctx);
+ this.insertBlock(`text(${expr})`, block, { ...ctx, forceNewBlock: forceNewBlock && !block });
+ }
+ else {
+ const idx = block.insertData(expr, "txt");
+ const text = xmlDoc.createElement(`block-text-${idx}`);
+ block.insert(text);
+ }
+ return block.varName;
+ }
+ compileTOut(ast, ctx) {
+ let { block } = ctx;
+ if (block) {
+ this.insertAnchor(block);
+ }
+ block = this.createBlock(block, "html", ctx);
+ let blockStr;
+ if (ast.expr === "0") {
+ this.helpers.add("zero");
+ blockStr = `ctx[zero]`;
+ }
+ else if (ast.body) {
+ let bodyValue = null;
+ bodyValue = BlockDescription.nextBlockId;
+ const subCtx = createContext(ctx);
+ this.compileAST({ type: 3 /* Multi */, content: ast.body }, subCtx);
+ this.helpers.add("safeOutput");
+ blockStr = `safeOutput(${compileExpr(ast.expr)}, b${bodyValue})`;
+ }
+ else {
+ this.helpers.add("safeOutput");
+ blockStr = `safeOutput(${compileExpr(ast.expr)})`;
+ }
+ this.insertBlock(blockStr, block, ctx);
+ return block.varName;
+ }
+ compileTIfBranch(content, block, ctx) {
+ this.target.indentLevel++;
+ let childN = block.children.length;
+ this.compileAST(content, createContext(ctx, { block, index: ctx.index }));
+ if (block.children.length > childN) {
+ // we have some content => need to insert an anchor at correct index
+ this.insertAnchor(block, childN);
+ }
+ this.target.indentLevel--;
+ }
+ compileTIf(ast, ctx, nextNode) {
+ let { block, forceNewBlock } = ctx;
+ const codeIdx = this.target.code.length;
+ const isNewBlock = !block || (block.type !== "multi" && forceNewBlock);
+ if (block) {
+ block.hasDynamicChildren = true;
+ }
+ if (!block || (block.type !== "multi" && forceNewBlock)) {
+ block = this.createBlock(block, "multi", ctx);
+ }
+ this.addLine(`if (${compileExpr(ast.condition)}) {`);
+ this.compileTIfBranch(ast.content, block, ctx);
+ if (ast.tElif) {
+ for (let clause of ast.tElif) {
+ this.addLine(`} else if (${compileExpr(clause.condition)}) {`);
+ this.compileTIfBranch(clause.content, block, ctx);
+ }
+ }
+ if (ast.tElse) {
+ this.addLine(`} else {`);
+ this.compileTIfBranch(ast.tElse, block, ctx);
+ }
+ this.addLine("}");
+ if (isNewBlock) {
+ // note: this part is duplicated from end of compiledomnode:
+ if (block.children.length) {
+ const code = this.target.code;
+ const children = block.children.slice();
+ let current = children.shift();
+ for (let i = codeIdx; i < code.length; i++) {
+ if (code[i].trimStart().startsWith(`const ${current.varName} `)) {
+ code[i] = code[i].replace(`const ${current.varName}`, current.varName);
+ current = children.shift();
+ if (!current)
+ break;
+ }
+ }
+ this.addLine(`let ${block.children.map((c) => c.varName).join(", ")};`, codeIdx);
+ }
+ // note: this part is duplicated from end of compilemulti:
+ const args = block.children.map((c) => c.varName).join(", ");
+ this.insertBlock(`multi([${args}])`, block, ctx);
+ }
+ return block.varName;
+ }
+ compileTForeach(ast, ctx) {
+ let { block } = ctx;
+ if (block) {
+ this.insertAnchor(block);
+ }
+ block = this.createBlock(block, "list", ctx);
+ this.target.loopLevel++;
+ const loopVar = `i${this.target.loopLevel}`;
+ this.addLine(`ctx = Object.create(ctx);`);
+ const vals = `v_block${block.id}`;
+ const keys = `k_block${block.id}`;
+ const l = `l_block${block.id}`;
+ const c = `c_block${block.id}`;
+ this.helpers.add("prepareList");
+ this.define(`[${keys}, ${vals}, ${l}, ${c}]`, `prepareList(${compileExpr(ast.collection)});`);
+ // Throw errors on duplicate keys in dev mode
+ if (this.dev) {
+ this.define(`keys${block.id}`, `new Set()`);
+ }
+ this.addLine(`for (let ${loopVar} = 0; ${loopVar} < ${l}; ${loopVar}++) {`);
+ this.target.indentLevel++;
+ this.addLine(`ctx[\`${ast.elem}\`] = ${keys}[${loopVar}];`);
+ if (!ast.hasNoFirst) {
+ this.addLine(`ctx[\`${ast.elem}_first\`] = ${loopVar} === 0;`);
+ }
+ if (!ast.hasNoLast) {
+ this.addLine(`ctx[\`${ast.elem}_last\`] = ${loopVar} === ${keys}.length - 1;`);
+ }
+ if (!ast.hasNoIndex) {
+ this.addLine(`ctx[\`${ast.elem}_index\`] = ${loopVar};`);
+ }
+ if (!ast.hasNoValue) {
+ this.addLine(`ctx[\`${ast.elem}_value\`] = ${vals}[${loopVar}];`);
+ }
+ this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
+ if (this.dev) {
+ // Throw error on duplicate keys in dev mode
+ this.helpers.add("OwlError");
+ this.addLine(`if (keys${block.id}.has(String(key${this.target.loopLevel}))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`);
+ this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
+ }
+ let id;
+ if (ast.memo) {
+ this.target.hasCache = true;
+ id = generateId();
+ this.define(`memo${id}`, compileExpr(ast.memo));
+ this.define(`vnode${id}`, `cache[key${this.target.loopLevel}];`);
+ this.addLine(`if (vnode${id}) {`);
+ this.target.indentLevel++;
+ this.addLine(`if (shallowEqual(vnode${id}.memo, memo${id})) {`);
+ this.target.indentLevel++;
+ this.addLine(`${c}[${loopVar}] = vnode${id};`);
+ this.addLine(`nextCache[key${this.target.loopLevel}] = vnode${id};`);
+ this.addLine(`continue;`);
+ this.target.indentLevel--;
+ this.addLine("}");
+ this.target.indentLevel--;
+ this.addLine("}");
+ }
+ const subCtx = createContext(ctx, { block, index: loopVar });
+ this.compileAST(ast.body, subCtx);
+ if (ast.memo) {
+ this.addLine(`nextCache[key${this.target.loopLevel}] = Object.assign(${c}[${loopVar}], {memo: memo${id}});`);
+ }
+ this.target.indentLevel--;
+ this.target.loopLevel--;
+ this.addLine(`}`);
+ if (!ctx.isLast) {
+ this.addLine(`ctx = ctx.__proto__;`);
+ }
+ this.insertBlock("l", block, ctx);
+ return block.varName;
+ }
+ compileTKey(ast, ctx) {
+ const tKeyExpr = generateId("tKey_");
+ this.define(tKeyExpr, compileExpr(ast.expr));
+ ctx = createContext(ctx, {
+ tKeyExpr,
+ block: ctx.block,
+ index: ctx.index,
+ });
+ return this.compileAST(ast.content, ctx);
+ }
+ compileMulti(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ const isNewBlock = !block || forceNewBlock;
+ let codeIdx = this.target.code.length;
+ if (isNewBlock) {
+ const n = ast.content.filter((c) => !c.hasNoRepresentation).length;
+ let result = null;
+ if (n <= 1) {
+ for (let child of ast.content) {
+ const blockName = this.compileAST(child, ctx);
+ result = result || blockName;
+ }
+ return result;
+ }
+ block = this.createBlock(block, "multi", ctx);
+ }
+ let index = 0;
+ for (let i = 0, l = ast.content.length; i < l; i++) {
+ const child = ast.content[i];
+ const forceNewBlock = !child.hasNoRepresentation;
+ const subCtx = createContext(ctx, {
+ block,
+ index,
+ forceNewBlock,
+ isLast: ctx.isLast && i === l - 1,
+ });
+ this.compileAST(child, subCtx);
+ if (forceNewBlock) {
+ index++;
+ }
+ }
+ if (isNewBlock) {
+ if (block.hasDynamicChildren && block.children.length) {
+ const code = this.target.code;
+ const children = block.children.slice();
+ let current = children.shift();
+ for (let i = codeIdx; i < code.length; i++) {
+ if (code[i].trimStart().startsWith(`const ${current.varName} `)) {
+ code[i] = code[i].replace(`const ${current.varName}`, current.varName);
+ current = children.shift();
+ if (!current)
+ break;
+ }
+ }
+ this.addLine(`let ${block.children.map((c) => c.varName).join(", ")};`, codeIdx);
+ }
+ const args = block.children.map((c) => c.varName).join(", ");
+ this.insertBlock(`multi([${args}])`, block, ctx);
+ }
+ return block.varName;
+ }
+ compileTCall(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ let ctxVar = ctx.ctxVar || "ctx";
+ if (ast.context) {
+ ctxVar = generateId("ctx");
+ this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
+ }
+ const isDynamic = INTERP_REGEXP.test(ast.name);
+ const subTemplate = isDynamic ? interpolate(ast.name) : "`" + ast.name + "`";
+ if (block && !forceNewBlock) {
+ this.insertAnchor(block);
+ }
+ block = this.createBlock(block, "multi", ctx);
+ if (ast.body) {
+ this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
+ this.addLine(`${ctxVar}[isBoundary] = 1;`);
+ this.helpers.add("isBoundary");
+ const subCtx = createContext(ctx, { ctxVar });
+ const bl = this.compileMulti({ type: 3 /* Multi */, content: ast.body }, subCtx);
+ if (bl) {
+ this.helpers.add("zero");
+ this.addLine(`${ctxVar}[zero] = ${bl};`);
+ }
+ }
+ const key = this.generateComponentKey();
+ if (isDynamic) {
+ const templateVar = generateId("template");
+ if (!this.staticDefs.find((d) => d.id === "call")) {
+ this.staticDefs.push({ id: "call", expr: `app.callTemplate.bind(app)` });
+ }
+ this.define(templateVar, subTemplate);
+ this.insertBlock(`call(this, ${templateVar}, ${ctxVar}, node, ${key})`, block, {
+ ...ctx,
+ forceNewBlock: !block,
+ });
+ }
+ else {
+ const id = generateId(`callTemplate_`);
+ this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
+ this.insertBlock(`${id}.call(this, ${ctxVar}, node, ${key})`, block, {
+ ...ctx,
+ forceNewBlock: !block,
+ });
+ }
+ if (ast.body && !ctx.isLast) {
+ this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
+ }
+ return block.varName;
+ }
+ compileTCallBlock(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ if (block) {
+ if (!forceNewBlock) {
+ this.insertAnchor(block);
+ }
+ }
+ block = this.createBlock(block, "multi", ctx);
+ this.insertBlock(compileExpr(ast.name), block, { ...ctx, forceNewBlock: !block });
+ return block.varName;
+ }
+ compileTSet(ast, ctx) {
+ this.target.shouldProtectScope = true;
+ this.helpers.add("isBoundary").add("withDefault");
+ const expr = ast.value ? compileExpr(ast.value || "") : "null";
+ if (ast.body) {
+ this.helpers.add("LazyValue");
+ const bodyAst = { type: 3 /* Multi */, content: ast.body };
+ const name = this.compileInNewTarget("value", bodyAst, ctx);
+ let key = this.target.currentKey(ctx);
+ let value = `new LazyValue(${name}, ctx, this, node, ${key})`;
+ value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
+ this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
+ }
+ else {
+ let value;
+ if (ast.defaultValue) {
+ const defaultValue = toStringExpression(ctx.translate ? this.translate(ast.defaultValue, ctx.translationCtx) : ast.defaultValue);
+ if (ast.value) {
+ value = `withDefault(${expr}, ${defaultValue})`;
+ }
+ else {
+ value = defaultValue;
+ }
+ }
+ else {
+ value = expr;
+ }
+ this.helpers.add("setContextValue");
+ this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
+ }
+ return null;
+ }
+ generateComponentKey(currentKey = "key") {
+ const parts = [generateId("__")];
+ for (let i = 0; i < this.target.loopLevel; i++) {
+ parts.push(`\${key${i + 1}}`);
+ }
+ return `${currentKey} + \`${parts.join("__")}\``;
+ }
+ /**
+ * Formats a prop name and value into a string suitable to be inserted in the
+ * generated code. For example:
+ *
+ * Name Value Result
+ * ---------------------------------------------------------
+ * "number" "state" "number: ctx['state']"
+ * "something" "" "something: undefined"
+ * "some-prop" "state" "'some-prop': ctx['state']"
+ * "onClick.bind" "onClick" "onClick: bind(ctx, ctx['onClick'])"
+ */
+ formatProp(name, value, attrsTranslationCtx, translationCtx) {
+ if (name.endsWith(".translate")) {
+ const attrTranslationCtx = (attrsTranslationCtx === null || attrsTranslationCtx === void 0 ? void 0 : attrsTranslationCtx[name]) || translationCtx;
+ value = toStringExpression(this.translateFn(value, attrTranslationCtx));
+ }
+ else {
+ value = this.captureExpression(value);
+ }
+ if (name.includes(".")) {
+ let [_name, suffix] = name.split(".");
+ name = _name;
+ switch (suffix) {
+ case "bind":
+ value = `(${value}).bind(this)`;
+ break;
+ case "alike":
+ case "translate":
+ break;
+ default:
+ throw new OwlError(`Invalid prop suffix: ${suffix}`);
+ }
+ }
+ name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
+ return `${name}: ${value || undefined}`;
+ }
+ formatPropObject(obj, attrsTranslationCtx, translationCtx) {
+ return Object.entries(obj).map(([k, v]) => this.formatProp(k, v, attrsTranslationCtx, translationCtx));
+ }
+ getPropString(props, dynProps) {
+ let propString = `{${props.join(",")}}`;
+ if (dynProps) {
+ propString = `Object.assign({}, ${compileExpr(dynProps)}${props.length ? ", " + propString : ""})`;
+ }
+ return propString;
+ }
+ compileComponent(ast, ctx) {
+ let { block } = ctx;
+ // props
+ const hasSlotsProp = "slots" in (ast.props || {});
+ const props = ast.props
+ ? this.formatPropObject(ast.props, ast.propsTranslationCtx, ctx.translationCtx)
+ : [];
+ // slots
+ let slotDef = "";
+ if (ast.slots) {
+ let ctxStr = "ctx";
+ if (this.target.loopLevel || !this.hasSafeContext) {
+ ctxStr = generateId("ctx");
+ this.helpers.add("capture");
+ this.define(ctxStr, `capture(ctx)`);
+ }
+ let slotStr = [];
+ for (let slotName in ast.slots) {
+ const slotAst = ast.slots[slotName];
+ const params = [];
+ if (slotAst.content) {
+ const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
+ params.push(`__render: ${name}.bind(this), __ctx: ${ctxStr}`);
+ }
+ const scope = ast.slots[slotName].scope;
+ if (scope) {
+ params.push(`__scope: "${scope}"`);
+ }
+ if (ast.slots[slotName].attrs) {
+ params.push(...this.formatPropObject(ast.slots[slotName].attrs, ast.slots[slotName].attrsTranslationCtx, ctx.translationCtx));
+ }
+ const slotInfo = `{${params.join(", ")}}`;
+ slotStr.push(`'${slotName}': ${slotInfo}`);
+ }
+ slotDef = `{${slotStr.join(", ")}}`;
+ }
+ if (slotDef && !(ast.dynamicProps || hasSlotsProp)) {
+ this.helpers.add("markRaw");
+ props.push(`slots: markRaw(${slotDef})`);
+ }
+ let propString = this.getPropString(props, ast.dynamicProps);
+ let propVar;
+ if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
+ propVar = generateId("props");
+ this.define(propVar, propString);
+ propString = propVar;
+ }
+ if (slotDef && (ast.dynamicProps || hasSlotsProp)) {
+ this.helpers.add("markRaw");
+ this.addLine(`${propVar}.slots = markRaw(Object.assign(${slotDef}, ${propVar}.slots))`);
+ }
+ // cmap key
+ let expr;
+ if (ast.isDynamic) {
+ expr = generateId("Comp");
+ this.define(expr, compileExpr(ast.name));
+ }
+ else {
+ expr = `\`${ast.name}\``;
+ }
+ if (this.dev) {
+ this.addLine(`helpers.validateProps(${expr}, ${propVar}, this);`);
+ }
+ if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
+ // todo: check the forcenewblock condition
+ this.insertAnchor(block);
+ }
+ let keyArg = this.generateComponentKey();
+ if (ctx.tKeyExpr) {
+ keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
+ }
+ let id = generateId("comp");
+ const propList = [];
+ for (let p in ast.props || {}) {
+ let [name, suffix] = p.split(".");
+ if (!suffix) {
+ propList.push(`"${name}"`);
+ }
+ }
+ this.staticDefs.push({
+ id,
+ expr: `app.createComponent(${ast.isDynamic ? null : expr}, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, [${propList}])`,
+ });
+ if (ast.isDynamic) {
+ // If the component class changes, this can cause delayed renders to go
+ // through if the key doesn't change. Use the component name for now.
+ // This means that two component classes with the same name isn't supported
+ // in t-component. We can generate a unique id per class later if needed.
+ keyArg = `(${expr}).name + ${keyArg}`;
+ }
+ let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
+ if (ast.isDynamic) {
+ blockExpr = `toggler(${expr}, ${blockExpr})`;
+ }
+ // event handling
+ if (ast.on) {
+ blockExpr = this.wrapWithEventCatcher(blockExpr, ast.on);
+ }
+ block = this.createBlock(block, "multi", ctx);
+ this.insertBlock(blockExpr, block, ctx);
+ return block.varName;
+ }
+ wrapWithEventCatcher(expr, on) {
+ this.helpers.add("createCatcher");
+ let name = generateId("catcher");
+ let spec = {};
+ let handlers = [];
+ for (let ev in on) {
+ let handlerId = generateId("hdlr");
+ let idx = handlers.push(handlerId) - 1;
+ spec[ev] = idx;
+ const handler = this.generateHandlerCode(ev, on[ev]);
+ this.define(handlerId, handler);
+ }
+ this.staticDefs.push({ id: name, expr: `createCatcher(${JSON.stringify(spec)})` });
+ return `${name}(${expr}, [${handlers.join(",")}])`;
+ }
+ compileTSlot(ast, ctx) {
+ this.helpers.add("callSlot");
+ let { block } = ctx;
+ let blockString;
+ let slotName;
+ let dynamic = false;
+ let isMultiple = false;
+ if (ast.name.match(INTERP_REGEXP)) {
+ dynamic = true;
+ isMultiple = true;
+ slotName = interpolate(ast.name);
+ }
+ else {
+ slotName = "'" + ast.name + "'";
+ isMultiple = isMultiple || this.slotNames.has(ast.name);
+ this.slotNames.add(ast.name);
+ }
+ const attrs = { ...ast.attrs };
+ const dynProps = attrs["t-props"];
+ delete attrs["t-props"];
+ let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
+ if (isMultiple) {
+ key = this.generateComponentKey(key);
+ }
+ const props = ast.attrs
+ ? this.formatPropObject(attrs, ast.attrsTranslationCtx, ctx.translationCtx)
+ : [];
+ const scope = this.getPropString(props, dynProps);
+ if (ast.defaultContent) {
+ const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
+ blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name}.bind(this))`;
+ }
+ else {
+ if (dynamic) {
+ let name = generateId("slot");
+ this.define(name, slotName);
+ blockString = `toggler(${name}, callSlot(ctx, node, ${key}, ${name}, ${dynamic}, ${scope}))`;
+ }
+ else {
+ blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope})`;
+ }
+ }
+ // event handling
+ if (ast.on) {
+ blockString = this.wrapWithEventCatcher(blockString, ast.on);
+ }
+ if (block) {
+ this.insertAnchor(block);
+ }
+ block = this.createBlock(block, "multi", ctx);
+ this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+ return block.varName;
+ }
+ compileTTranslation(ast, ctx) {
+ if (ast.content) {
+ return this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+ }
+ return null;
+ }
+ compileTTranslationContext(ast, ctx) {
+ if (ast.content) {
+ return this.compileAST(ast.content, Object.assign({}, ctx, { translationCtx: ast.translationCtx }));
+ }
+ return null;
+ }
+ compileTPortal(ast, ctx) {
+ if (!this.staticDefs.find((d) => d.id === "Portal")) {
+ this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
+ }
+ let { block } = ctx;
+ const name = this.compileInNewTarget("slot", ast.content, ctx);
+ let ctxStr = "ctx";
+ if (this.target.loopLevel || !this.hasSafeContext) {
+ ctxStr = generateId("ctx");
+ this.helpers.add("capture");
+ this.define(ctxStr, `capture(ctx)`);
+ }
+ let id = generateId("comp");
+ this.staticDefs.push({
+ id,
+ expr: `app.createComponent(null, false, true, false, false)`,
+ });
+ const target = compileExpr(ast.target);
+ const key = this.generateComponentKey();
+ const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, ${key}, node, ctx, Portal)`;
+ if (block) {
+ this.insertAnchor(block);
+ }
+ block = this.createBlock(block, "multi", ctx);
+ this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+ return block.varName;
+ }
+ }
+
+ // -----------------------------------------------------------------------------
+ // Parser
+ // -----------------------------------------------------------------------------
+ const cache = new WeakMap();
+ function parse(xml, customDir) {
+ const ctx = {
+ inPreTag: false,
+ customDirectives: customDir,
+ };
+ if (typeof xml === "string") {
+ const elem = parseXML(`${xml}`).firstChild;
+ return _parse(elem, ctx);
+ }
+ let ast = cache.get(xml);
+ if (!ast) {
+ // we clone here the xml to prevent modifying it in place
+ ast = _parse(xml.cloneNode(true), ctx);
+ cache.set(xml, ast);
+ }
+ return ast;
+ }
+ function _parse(xml, ctx) {
+ normalizeXML(xml);
+ return parseNode(xml, ctx) || { type: 0 /* Text */, value: "" };
+ }
+ function parseNode(node, ctx) {
+ if (!(node instanceof Element)) {
+ return parseTextCommentNode(node, ctx);
+ }
+ return (parseTCustom(node, ctx) ||
+ parseTDebugLog(node, ctx) ||
+ parseTForEach(node, ctx) ||
+ parseTIf(node, ctx) ||
+ parseTPortal(node, ctx) ||
+ parseTCall(node, ctx) ||
+ parseTCallBlock(node) ||
+ parseTTranslation(node, ctx) ||
+ parseTTranslationContext(node, ctx) ||
+ parseTKey(node, ctx) ||
+ parseTEscNode(node, ctx) ||
+ parseTOutNode(node, ctx) ||
+ parseTSlot(node, ctx) ||
+ parseComponent(node, ctx) ||
+ parseDOMNode(node, ctx) ||
+ parseTSetNode(node, ctx) ||
+ parseTNode(node, ctx));
+ }
+ // -----------------------------------------------------------------------------
+ // tag
+ // -----------------------------------------------------------------------------
+ function parseTNode(node, ctx) {
+ if (node.tagName !== "t") {
+ return null;
+ }
+ return parseChildNodes(node, ctx);
+ }
+ // -----------------------------------------------------------------------------
+ // Text and Comment Nodes
+ // -----------------------------------------------------------------------------
+ const lineBreakRE = /[\r\n]/;
+ function parseTextCommentNode(node, ctx) {
+ if (node.nodeType === Node.TEXT_NODE) {
+ let value = node.textContent || "";
+ if (!ctx.inPreTag && lineBreakRE.test(value) && !value.trim()) {
+ return null;
+ }
+ return { type: 0 /* Text */, value };
+ }
+ else if (node.nodeType === Node.COMMENT_NODE) {
+ return { type: 1 /* Comment */, value: node.textContent || "" };
+ }
+ return null;
+ }
+ function parseTCustom(node, ctx) {
+ if (!ctx.customDirectives) {
+ return null;
+ }
+ const nodeAttrsNames = node.getAttributeNames();
+ for (let attr of nodeAttrsNames) {
+ if (attr === "t-custom" || attr === "t-custom-") {
+ throw new OwlError("Missing custom directive name with t-custom directive");
+ }
+ if (attr.startsWith("t-custom-")) {
+ const directiveName = attr.split(".")[0].slice(9);
+ const customDirective = ctx.customDirectives[directiveName];
+ if (!customDirective) {
+ throw new OwlError(`Custom directive "${directiveName}" is not defined`);
+ }
+ const value = node.getAttribute(attr);
+ const modifiers = attr.split(".").slice(1);
+ node.removeAttribute(attr);
+ try {
+ customDirective(node, value, modifiers);
+ }
+ catch (error) {
+ throw new OwlError(`Custom directive "${directiveName}" throw the following error: ${error}`);
+ }
+ return parseNode(node, ctx);
+ }
+ }
+ return null;
+ }
+ // -----------------------------------------------------------------------------
+ // debugging
+ // -----------------------------------------------------------------------------
+ function parseTDebugLog(node, ctx) {
+ if (node.hasAttribute("t-debug")) {
+ node.removeAttribute("t-debug");
+ const content = parseNode(node, ctx);
+ const ast = {
+ type: 12 /* TDebug */,
+ content,
+ };
+ if (content === null || content === void 0 ? void 0 : content.hasNoRepresentation) {
+ ast.hasNoRepresentation = true;
+ }
+ return ast;
+ }
+ if (node.hasAttribute("t-log")) {
+ const expr = node.getAttribute("t-log");
+ node.removeAttribute("t-log");
+ const content = parseNode(node, ctx);
+ const ast = {
+ type: 13 /* TLog */,
+ expr,
+ content,
+ };
+ if (content === null || content === void 0 ? void 0 : content.hasNoRepresentation) {
+ ast.hasNoRepresentation = true;
+ }
+ return ast;
+ }
+ return null;
+ }
+ // -----------------------------------------------------------------------------
+ // Regular dom node
+ // -----------------------------------------------------------------------------
+ const hasDotAtTheEnd = /\.[\w_]+\s*$/;
+ const hasBracketsAtTheEnd = /\[[^\[]+\]\s*$/;
+ const ROOT_SVG_TAGS = new Set(["svg", "g", "path"]);
+ function parseDOMNode(node, ctx) {
+ const { tagName } = node;
+ const dynamicTag = node.getAttribute("t-tag");
+ node.removeAttribute("t-tag");
+ if (tagName === "t" && !dynamicTag) {
+ return null;
+ }
+ if (tagName.startsWith("block-")) {
+ throw new OwlError(`Invalid tag name: '${tagName}'`);
+ }
+ ctx = Object.assign({}, ctx);
+ if (tagName === "pre") {
+ ctx.inPreTag = true;
+ }
+ let ns = !ctx.nameSpace && ROOT_SVG_TAGS.has(tagName) ? "http://www.w3.org/2000/svg" : null;
+ const ref = node.getAttribute("t-ref");
+ node.removeAttribute("t-ref");
+ const nodeAttrsNames = node.getAttributeNames();
+ let attrs = null;
+ let attrsTranslationCtx = null;
+ let on = null;
+ let model = null;
+ for (let attr of nodeAttrsNames) {
+ const value = node.getAttribute(attr);
+ if (attr === "t-on" || attr === "t-on-") {
+ throw new OwlError("Missing event name with t-on directive");
+ }
+ if (attr.startsWith("t-on-")) {
+ on = on || {};
+ on[attr.slice(5)] = value;
+ }
+ else if (attr.startsWith("t-model")) {
+ if (!["input", "select", "textarea"].includes(tagName)) {
+ throw new OwlError("The t-model directive only works with ,
+
+ `;
+
+ const result = await customAlert.show(html, ['close', 'Save'], { ...options, accentColor });
+ if (result !== 'Save') {
+ return null;
+ }
+
+ const el = document.getElementById(inputId);
+ return el ? el.value : String(defaultValue ?? '');
+}
+
+export const storage = {
+
+ async get(key, fallback = null) {
+ const obj = await browserApi.storage.local.get(key);
+ return Object.prototype.hasOwnProperty.call(obj, key) ? obj[key] : fallback;
+ },
+ async set(key, value) {
+ await browserApi.storage.local.set({ [key]: value });
+ },
+ async remove(key) {
+ await browserApi.storage.local.remove(key);
+ },
+ async clear() {
+ await browserApi.storage.local.clear();
+ },
+};
+
+export function validURL(str) {
+ try {
+ const url = new URL(str);
+ return ["http:", "https:"].includes(url.protocol);
+ } catch {
+ return false;
+ }
+}
+
+export async function readRemotes() {
+ const raw = await storage.get('remote_host_info', []);
+ if (!Array.isArray(raw)) return [];
+ return raw.map((item) => {
+ if (typeof item === 'string') {
+ try { return JSON.parse(item); } catch { return null; }
+ }
+ return item;
+ }).filter(Boolean);
+}
+
+export async function writeRemotes(remotes) {
+ const payload = remotes.map((r) => JSON.stringify(r));
+ await storage.set('remote_host_info', payload);
+}
+
+export async function sendTimerStateToBackground(state) {
+ try {
+ await browserApi.runtime.sendMessage({ TimerActive: state });
+ } catch (err) {
+ console.warn('Could not notify background', err);
+ }
+}
+
+export async function clearOdooSessionCookies(host) {
+ if (!host) return;
+ try {
+ const cookies = await browserApi.cookies.getAll({ name: 'session_id', url: host });
+ for (const cookie of cookies) {
+ await browserApi.cookies.remove({
+ url: host,
+ name: cookie.name,
+ storeId: cookie.storeId,
+ });
+ }
+ } catch (err) {
+ console.warn('Could not clear cookies for', host, err);
+ }
+}
+
+export function normalizeHost(host) {
+ if (!host) return '';
+ let out = host.trim();
+ if (!/^https?:\/\//i.test(out)) out = 'https://' + out;
+ return out.replace(/\/$/, '');
+}
+
+export function toCSV(rows) {
+ if (!rows || !rows.length) return '';
+ const headers = Array.from(new Set(rows.flatMap((r) => Object.keys(r))));
+ const esc = (value) => {
+ const text = value == null ? '' : String(value).replace(/"/g, '""');
+ return `"${text}"`;
+ };
+ return [headers.join(','), ...rows.map((row) => headers.map((h) => esc(row[h])).join(','))].join('\n');
+}
+
+export function downloadTextFile(filename, content, mime = 'text/plain;charset=utf-8;') {
+ const blob = new Blob([content], { type: mime });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = filename;
+ a.click();
+ setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+export function formatDuration(ms) {
+ const total = Math.max(0, Math.floor(ms / 1000));
+ const h = String(Math.floor(total / 3600)).padStart(2, '0');
+ const m = String(Math.floor((total % 3600) / 60)).padStart(2, '0');
+ const s = String(total % 60).padStart(2, '0');
+ return `${h}:${m}:${s}`;
+}
+
+export function formatHoursMins(decimalHours) {
+ if (decimalHours == null || Number.isNaN(Number(decimalHours))) return '';
+ const value = Number(decimalHours);
+ const sign = value < 0 ? '-' : '';
+ const abs = Math.abs(value);
+ const hours = Math.floor(abs);
+ const minutes = Math.round((abs - hours) * 60);
+ return `${sign}${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+}
+
+export function priorityStars(priority) {
+ const n = Number(priority || 0);
+ return n > 0 ? Array.from({ length: n }, (_, i) => i) : [];
+}
+
+export function matchesIssue(issue, query) {
+ if (!query) return true;
+ const q = query.trim().toLowerCase();
+ if (!q) return true;
+ const hay = [
+ issue.id,
+ issue.code,
+ issue.name,
+ issue.message_summary,
+ issue.stage_id?.[1],
+ issue.project_id?.[1],
+ issue.user_id?.[1],
+ issue.priority,
+ issue.create_date,
+ ].filter(Boolean).join(' ').toLowerCase();
+ return hay.includes(q);
+}
+
+export function extractMessageSummary(summary) {
+ if (!summary) return '';
+ try {
+ const match = String(summary).match(/(?=You have)(.*?)(?='><|$)/);
+ return match ? match[0] : String(summary).replace(/<[^>]+>/g, ' ');
+ } catch {
+ return String(summary);
+ }
+}
+
+export class OdooRpc {
+ constructor(host = '') { this.host = host; }
+ setHost(host) { this.host = normalizeHost(host); }
+ async send(path, params = {}) {
+ if (!this.host) throw new Error('No Odoo host selected');
+ const response = await fetch(this.host + path, {
+ method: 'POST',
+ credentials: 'include',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ jsonrpc: '2.0', method: 'call', params }),
+ });
+ let payload;
+ try {
+ payload = await response.json();
+ } catch {
+ const text = await response.text();
+ throw new Error(`HTTP ${response.status}: ${text}`);
+ }
+ if (!response.ok || payload.error) {
+ const err = payload.error || {};
+ const msg = err.data?.message || err.message || `HTTP ${response.status}`;
+ const e = new Error(msg);
+ e.fullTrace = payload.error || payload;
+ throw e;
+ }
+ return payload.result;
+ }
+ login(db, login, password) {
+ return this.send('/web/session/authenticate', { db, login, password });
+ }
+ getSessionInfo() { return this.send('/web/session/get_session_info', {}); }
+ getServerInfo() { return this.send('/web/webclient/version_info', {}); }
+ searchRead(model, domain, fields = []) { return this.send('/web/dataset/search_read', { model, domain, fields }); }
+ fieldsGet(model, attributes = []) { return this.send('/web/dataset/call_kw', { model, method: 'fields_get', args: [], kwargs: attributes.length ? { attributes } : {} }); }
+ call(model, method, args = [], kwargs = {}) { return this.send('/web/dataset/call_kw', { model, method, args, kwargs }); }
+ callBtn(model, method, args = [], kwargs = {}) { return this.send('/web/dataset/call_button', { model, method, args, kwargs }); }
+ async logout() {
+ try { await this.send('/web/session/destroy', {}); } catch (err) { console.warn('Logout endpoint failed', err); }
+ }
+}
diff --git a/dist/firefox/js/components/readmore.js b/dist/firefox/js/components/readmore.js
new file mode 100644
index 00000000..8a7e82ea
--- /dev/null
+++ b/dist/firefox/js/components/readmore.js
@@ -0,0 +1,68 @@
+
+const { Component, useState } = owl;
+
+/**
+ * Create the compiled template used by the shared ReadMore component.
+ *
+ * Supports optional links for popup rows and plain text rendering for
+ * options page tables.
+ *
+ * @param {object} app OWL app instance.
+ * @param {object} bdom OWL block DOM helpers.
+ * @returns {Function} Compiled template.
+ */
+export function createReadMoreTemplate(app, bdom) {
+ const { text, createBlock } = bdom;
+
+ const linkBlock = createBlock(
+ ``
+ );
+
+ const wrapperBlock = createBlock(
+ ``
+ );
+
+ const toggleBlock = createBlock(
+ ``
+ );
+
+ return function template(ctx) {
+ const displayText =
+ ctx.state.expanded || !ctx.needsTrim ? (ctx.props.text || '') : ctx.shortText;
+
+ const contentNode = ctx.props.href
+ ? linkBlock([ctx.props.href, displayText])
+ : text(displayText);
+
+ let toggleNode = null;
+ if (ctx.needsTrim) {
+ toggleNode = toggleBlock([
+ ['prevent', ctx.toggle, ctx],
+ ctx.state.expanded ? ' ▲' : ' ...',
+ ]);
+ }
+
+ return wrapperBlock([], [contentNode, toggleNode]);
+ };
+}
+
+export class ReadMore extends Component {
+ static props = ['text', 'limit?', 'href?', 'title?'];
+ static template = 'ReadMore';
+
+ setup() {
+ this.state = useState({ expanded: false });
+ }
+
+ get needsTrim() {
+ return (this.props.text || '').length > (this.props.limit || 40);
+ }
+
+ get shortText() {
+ return (this.props.text || '').slice(0, this.props.limit || 40);
+ }
+
+ toggle() {
+ this.state.expanded = !this.state.expanded;
+ }
+}
diff --git a/dist/firefox/js/lib/alert.js b/dist/firefox/js/lib/alert.js
new file mode 100644
index 00000000..2e304f92
--- /dev/null
+++ b/dist/firefox/js/lib/alert.js
@@ -0,0 +1,193 @@
+//Created by Aaron Längert
+
+(function() {
+
+ var visible = false;
+ var queue = [];
+ var alertBox, alertDropShadow;
+
+ window.addEventListener("load", function() {
+
+ //import ripple library if not found
+ if (typeof(ripple) == "undefined") {
+ el = document.createElement("script");
+ el.src = "node_modules/ripple-js/ripple.min.js";
+ document.head.appendChild(el);
+ }
+
+ //Add styles & elements
+ css = document.createElement("style");
+ css.type = "text/css";
+ css.innerHTML = "#alertBox{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-height:90vh;max-width:95vw;z-index:5;background:#F5F5F5;box-shadow:0 0 10px 0 rgba(0,0,0,.7);-webkit-animation:alertoutro .3s cubic-bezier(.4,0,1,1);animation:alertoutro .3s cubic-bezier(.4,0,1,1);overflow:hidden}#alertBox[show]{-webkit-animation:alertintro .3s cubic-bezier(0,0,.2,1);animation:alertintro .3s cubic-bezier(0,0,.2,1)}#alertDropShadow[show]{transition:opacity .3s cubic-bezier(0,0,.2,1);opacity:1;pointer-events:all}#alertDropShadow{transition:opacity .3s cubic-bezier(.4,0,1,1);position:absolute;left:0;top:0;bottom:0;width:100%;pointer-events:none;opacity:0;background:rgba(0,0,0,.65);z-index:4}#alertBox>.body{padding:20px;box-sizing:border-box;max-height:calc(90vh - 30px);overflow:auto}#alertBox>.actionfooter{padding:0 10px 0 30px;overflow:auto;width:100%;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex}#alertBox>.actionfooter>.button{height:32px;padding:0 10px;margin:0 10px 0 auto;cursor:pointer;box-sizing:content-box;font:700 18px/32px Arial,Helvetica,sans-serif}.noSelect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@-webkit-keyframes alertoutro{from{display:block!important;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:1}to{display:block!important;-webkit-transform:translate(-50%,calc(-50% + 50px));transform:translate(-50%,calc(-50% + 50px));opacity:0}}@keyframes alertoutro{from{display:block!important;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:1}to{display:block!important;-webkit-transform:translate(-50%,calc(-50% + 50px));transform:translate(-50%,calc(-50% + 50px));opacity:0}}@-webkit-keyframes alertintro{0%{-webkit-transform:translate(-50%,calc(-50% - 100px));transform:translate(-50%,calc(-50% - 100px));opacity:0}30%{opacity:0}100%{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:1}}@keyframes alertintro{0%{-webkit-transform:translate(-50%,calc(-50% - 100px));transform:translate(-50%,calc(-50% - 100px));opacity:0}30%{opacity:0}100%{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:1}}";
+ document.head.appendChild(css);
+
+ el = document.createElement("div");
+ el.id = "alertBox";
+ el.innerHTML = "";
+ el.style.display = "none";
+ document.body.appendChild(el);
+
+ el = document.createElement("div");
+ el.id = "alertDropShadow";
+ document.body.appendChild(el);
+
+ alertBox = document.getElementById("alertBox");
+ alertDropShadow = document.getElementById("alertDropShadow");
+
+ alertBox.addEventListener("animationend", function(e) {
+ if (!e.target.hasAttribute("show")) {
+ e.target.style.display = "none";
+ visible = false;
+ if (queue.length > 0) {
+ //show next alert in queue, if there is any
+ alert.show(queue[0].text, queue[0].actions, queue[0].options);
+ queue.shift();
+ }
+ }
+ });
+ });
+
+ //esc & enter key press detection
+ document.addEventListener("keydown", function(e) {
+ if (e.keyCode == 27 && alert.open) {
+ alert.hide();
+ }
+ if (e.keyCode == 13 && alert.open) {
+ ripple.ripple(alertBox.childNodes[1].lastChild);
+ }
+ });
+
+ function getTextWidth(txt) {
+ canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
+ context = canvas.getContext("2d");
+ context.font = "bold 18px/32px Arial, Helvetica, sans-serif";
+ metrics = context.measureText(txt);
+ return metrics.width;
+ };
+
+
+ alert.accentColor = "orange";
+ alert.rippleOpacity = 0.6;
+ alert.ripplePressExpandTime = 1.5;
+ alert.rippleReleaseExpandTime = 0.3;
+ alert.rippleLeaveCollapseTime = 0.4;
+ alert.open = false;
+
+ alert.show = function(text, actions, options, mode) {
+ if (mode == "replace") {
+ //if mode replace, clear the queue and show the new instantly
+ alert.clearQueue();
+ queue.push({ "text": text, "actions": actions, "options": options });
+ alert.hide();
+ return new Promise(
+ function(resolve) {
+ alertBox.addEventListener("ripple-button-click", function(e) {
+ alert.hide();
+ resolve(e.target.innerText);
+ }, true);
+ }
+ );
+ }
+
+ if (mode == "next-in-queue") {
+ //if mode next-in-queue, put the alert as the next on in the queue
+ queue.unshift({ "text": text, "actions": actions, "options": options });
+ return new Promise(
+ function(resolve) {
+ alertBox.addEventListener("ripple-button-click", function(e) {
+ alert.hide();
+ resolve(e.target.innerText);
+ }, true);
+ }
+ );
+ }
+
+ if (mode == "next") {
+ //if mode next, the show the new alert instantly, but also preserve the queue
+ queue.unshift({ "text": text, "actions": actions, "options": options });
+ alert.hide();
+ return new Promise(
+ function(resolve) {
+ alertBox.addEventListener("ripple-button-click", function(e) {
+ alert.hide();
+ resolve(e.target.innerText);
+ }, true);
+ }
+ );
+ }
+
+ if (visible) {
+ //if a show is called while an alert ist still open and no mode is set, add the alert to the queue
+ alertDropShadow.setAttribute("show", "");
+ queue.push({ "text": text, "actions": actions, "options": options });
+ return new Promise(
+ function(resolve) {
+ alertBox.addEventListener("ripple-button-click", function(e) {
+ alert.hide();
+ resolve(e.target.innerText);
+ }, true);
+ }
+ );
+ }
+ visible = true;
+
+ alertBox.childNodes[0].innerHTML = text;
+ while (alertBox.childNodes[1].firstChild) {
+ alertBox.childNodes[1].removeChild(alertBox.childNodes[1].firstChild);
+ }
+
+ //if actions is empty, add an "OK" button
+ if (!actions || actions.length == 0) {
+ actions = ["OK"];
+ }
+
+ //generate the buttons
+ for (i in actions) {
+ el = document.createElement("div");
+ el.className = "button ripple noSelect";
+ el.style.color = options ? options.accentColor || alert.accentColor : alert.accentColor;
+ el.setAttribute("ripple-color", (options ? options.accentColor || alert.accentColor : alert.accentColor));
+ el.setAttribute("ripple-opacity", (options ? ((typeof(options.rippleOpacity) != "undefined") ? options.rippleOpacity : alert.rippleOpacity) : alert.rippleOpacity));
+ el.setAttribute("ripple-press-expand-time", (options ? ((typeof(options.ripplePressExpandTime) != "undefined") ? options.ripplePressExpandTime : alert.ripplePressExpandTime) : alert.ripplePressExpandTime));
+ el.setAttribute("ripple-release-expand-time", (options ? ((typeof(options.rippleReleaseExpandTime) != "undefined") ? options.rippleReleaseExpandTime : alert.rippleReleaseExpandTime) : alert.rippleReleaseExpandTime));
+ el.setAttribute("ripple-leave-collapse-time", (options ? ((typeof(options.rippleLeaveCollapseTime) != "undefined") ? options.rippleLeaveCollapseTime : alert.rippleLeaveCollapseTime) : alert.rippleLeaveCollapseTime));
+
+ el.setAttribute("ripple-cancel-on-move", "");
+
+ el.innerHTML = actions[i];
+ el.style.minWidth = getTextWidth(actions[i]) + "px";
+ alertBox.childNodes[1].appendChild(el);
+ }
+
+ ripple.registerRipples();
+
+ alertBox.style.display = "block";
+ alertBox.setAttribute("show", "");
+ alertDropShadow.setAttribute("show", "");
+ alert.open = true;
+
+ return new Promise(
+ function(resolve) {
+ alertBox.addEventListener("ripple-button-click", function(e) {
+ alert.hide();
+ resolve(e.target.innerText);
+ }, true);
+ }
+ );
+ }
+
+ //hides an open alert
+ alert.hide = function() {
+ alertBox.removeAttribute("show");
+ alert.open = false;
+ if (queue.length == 0) {
+ alertDropShadow.removeAttribute("show");
+ }
+ }
+
+ //clear the queue
+ alert.clearQueue = function() {
+ queue = [];
+ }
+
+})();
diff --git a/dist/firefox/js/lib/ripple.js b/dist/firefox/js/lib/ripple.js
new file mode 100644
index 00000000..36d85666
--- /dev/null
+++ b/dist/firefox/js/lib/ripple.js
@@ -0,0 +1,143 @@
+//Written by Aaron Längert
+var ripple = function() {
+ window.addEventListener("load", function() {
+ //add stylesheet at finished load
+ css = document.createElement("style");
+ css.type = "text/css";
+ css.innerHTML = ".ripple { overflow: hidden !important; position: relative; } .ripple .rippleContainer { display: block; height: 200px !important; width: 200px !important; padding: 0px 0px 0px 0px; border-radius: 50%; position: absolute !important; top: 0px; left: 0px; transform: translate(-50%, -50%) scale(0); -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); background-color: transparent; } .ripple * {pointer-events: none !important;}";
+ document.head.appendChild(css);
+ ripple.registerRipples();
+ });
+
+ function rippleStart(e) {
+ rippleContainer = getRippleContainer(e.target);
+ if ((rippleContainer.getAttribute("animating") == "0" || !rippleContainer.hasAttribute("animating")) && e.target.className.indexOf("ripple") > -1) {
+ rippleContainer.setAttribute("animating", "1");
+ offsetX = typeof e.offsetX == "number" ? e.offsetX : e.touches[0].clientX - e.target.getBoundingClientRect().left;
+ offsetY = typeof e.offsetY == "number" ? e.offsetY : e.touches[0].clientY - e.target.getBoundingClientRect().top;
+ //fullCoverRadius is the longest distance between the touch and the corners of the element where the event fired
+ fullCoverRadius = Math.max(Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2)), Math.sqrt(Math.pow(e.target.clientWidth - offsetX, 2) + Math.pow(e.target.clientHeight - offsetY, 2)), Math.sqrt(Math.pow(offsetX, 2) + Math.pow(e.target.clientHeight - offsetY, 2)), Math.sqrt(Math.pow(offsetY, 2) + Math.pow(e.target.clientWidth - offsetX, 2)));
+ expandTime = e.target.getAttribute("ripple-press-expand-time") || 3;
+ rippleContainer.style.transition = "transform " + expandTime + "s ease-out, box-shadow 0.1s linear";
+ rippleContainer.style.background = e.target.getAttribute("ripple-color") || "white";
+ rippleContainer.style.opacity = e.target.getAttribute("ripple-opacity") || "0.6";
+ rippleContainer.style.boxShadow = e.target.getAttribute("ripple-shadow") || "none";
+ rippleContainer.style.top = offsetY + "px";
+ rippleContainer.style.left = offsetX + "px";
+ rippleContainer.style.transform = "translate(-50%, -50%) scale(" + fullCoverRadius / 100 + ")";
+ }
+ }
+
+ function rippleEnd(e) {
+ rippleContainer = getRippleContainer(e.target);
+ if (rippleContainer.getAttribute("animating") == "1") {
+ rippleContainer.setAttribute("animating", "2");
+ background = window.getComputedStyle(rippleContainer, null).getPropertyValue("background");
+ destinationRadius = e.target.clientWidth + e.target.clientHeight;
+ rippleContainer.style.transition = "none";
+ expandTime = e.target.getAttribute("ripple-release-expand-time") || .4;
+ rippleContainer.style.transition = "transform " + expandTime + "s linear, background " + expandTime + "s linear, opacity " + expandTime + "s ease-in-out";
+ rippleContainer.style.transform = "translate(-50%, -50%) scale(" + destinationRadius / 100 + ")";
+ rippleContainer.style.background = "radial-gradient(transparent 10%, " + background + " 40%)";
+ rippleContainer.style.opacity = "0";
+ //fire custom event
+ e.target.dispatchEvent(new CustomEvent("ripple-button-click", {
+ target: e.target
+ }));
+ }
+ }
+
+ function rippleRetrieve(e) {
+ rippleContainer = getRippleContainer(e.target);
+ if (rippleContainer.style.transform == "translate(-50%, -50%) scale(0)") {
+ rippleContainer.setAttribute("animating", "0");
+ }
+ if (rippleContainer.getAttribute("animating") == "1") {
+ rippleContainer.setAttribute("animating", "3");
+ collapseTime = e.target.getAttribute("ripple-leave-collapse-time") || .4;
+ rippleContainer.style.transition = "transform " + collapseTime + "s linear, box-shadow " + collapseTime + "s linear";
+ rippleContainer.style.boxShadow = "none";
+ rippleContainer.style.transform = "translate(-50%, -50%) scale(0)";
+ }
+ }
+ //returns the ripple div by scanning all children. If not found, return the argument
+ function getRippleContainer(el) {
+ childs = el.childNodes;
+ for (ii = 0; ii < childs.length; ii++) {
+ try {
+ if (childs[ii].className.indexOf("rippleContainer") > -1) {
+ return childs[ii];
+ }
+ } catch (err) {}
+ }
+ return el;
+ }
+ var ripple = {
+ registerRipples: function() {
+ //loop through all elements with the class ripple and add eventlisteners to them
+ rippleButtons = document.getElementsByClassName("ripple");
+ for (i = 0; i < rippleButtons.length; i++) {
+ rippleButtons[i].addEventListener("touchstart", function(e) {
+ rippleStart(e);
+ }, false);
+ rippleButtons[i].addEventListener("touchmove", function(e) {
+ if (e.target.hasAttribute("ripple-cancel-on-move")) {
+ rippleRetrieve(e);
+ return
+ }
+ try {
+ overEl = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY).className.indexOf("ripple") >= 0;
+ } catch (err) {
+ overEl = false;
+ }
+ if (!overEl) {
+ rippleRetrieve(e);
+ }
+ }, false);
+ rippleButtons[i].addEventListener("touchend", function(e) {
+ rippleEnd(e);
+ }, false);
+ rippleButtons[i].addEventListener("mousedown", function(e) {
+ rippleStart(e);
+ }, false);
+ rippleButtons[i].addEventListener("mouseup", function(e) {
+ rippleEnd(e);
+ }, false);
+ rippleButtons[i].addEventListener("mousemove", function(e) {
+ if (e.target.hasAttribute("ripple-cancel-on-move") && (e.movementX != 0 || e.movementY != 0)) {
+ rippleRetrieve(e);
+ }
+ }, false);
+ rippleButtons[i].addEventListener("mouseleave", function(e) {
+ rippleRetrieve(e);
+ }, false);
+ rippleButtons[i].addEventListener("transitionend", function(e) {
+ if (e.target.getAttribute("animating") == "2" || e.target.getAttribute("animating") == "3") {
+ e.target.style.transition = "none";
+ e.target.style.transform = "translate(-50%, -50%) scale(0)";
+ e.target.style.boxShadow = "none";
+ e.target.setAttribute("animating", "0");
+ }
+ }, false);
+ //if not there, create a ripple div inside the element
+ if (getRippleContainer(rippleButtons[i]) == rippleButtons[i]) {
+ rippleButtons[i].innerHTML += '';
+ }
+ }
+ },
+ ripple: function(el) {
+ if (el.className.indexOf("ripple") < 0) {
+ return;
+ }
+ rect = el.getBoundingClientRect();
+ e = {
+ target: el,
+ offsetX: rect.width / 2,
+ offsetY: rect.height / 2
+ }
+ rippleStart(e);
+ rippleEnd(e);
+ }
+ };
+ return ripple;
+}();
diff --git a/dist/firefox/js/options-app.js b/dist/firefox/js/options-app.js
new file mode 100644
index 00000000..4beb10c6
--- /dev/null
+++ b/dist/firefox/js/options-app.js
@@ -0,0 +1,308 @@
+import {
+ readRemotes,
+ writeRemotes,
+ validURL,
+ normalizeHost,
+ storage,
+ clearOdooSessionCookies,
+ notify,
+ confirmDialog,
+} from './common.js';
+import { ReadMore, createReadMoreTemplate } from './components/readmore.js';
+
+const { Component, mount, useState, onWillStart } = owl;
+
+const PAGE_ABOUT = 'about';
+const PAGE_OPTIONS = 'options';
+const DEFAULT_DATA_SOURCE = 'project.issue';
+
+const STORAGE_KEYS = {
+ remoteHostInfo: 'remote_host_info',
+};
+
+/**
+ * Create the compiled template used by the options application.
+ *
+ * @param {object} app OWL app instance.
+ * @param {object} bdom OWL block DOM helpers.
+ * @param {object} helpers OWL template helpers.
+ * @returns {Function} Compiled template.
+ */
+function createOptionsAppTemplate(app, bdom, helpers) {
+ const { createBlock, list } = bdom;
+ const { prepareList, OwlError, withKey } = helpers;
+
+ const readMoreName = app.createComponent('ReadMore', true, false, false, ['text', 'limit']);
+ const readMoreHost = app.createComponent('ReadMore', true, false, false, ['text', 'limit']);
+ const readMoreDatabase = app.createComponent('ReadMore', true, false, false, ['text', 'limit']);
+ const readMoreSource = app.createComponent('ReadMore', true, false, false, ['text', 'limit']);
+ const readMoreState = app.createComponent('ReadMore', true, false, false, ['text', 'limit']);
+
+ const rootBlock = createBlock(
+ `
Timer Options
About Timer
Options
Description
This is a standalone Owl rewrite of the original cross-platform timer extension for posting work hours to Odoo timesheets.
Features
Support for both Issues and Tasks
Start and stop timer for the selected issue/task
Create Odoo timesheet lines against the linked analytic account
Show assigned issues/tasks or everyone’s items
Add, remove, or clear remote hosts
Switch between remote sessions
Download current month or current issue timesheets as CSV
`
+ );
+ const errorBlock = createBlock(`
`);
+ const remotesTableBlock = createBlock(
+ `
List of Available Remotes
Remote
Host
Database
Source
State
`
+ );
+ const remoteRowBlock = createBlock(
+ `
`
+ );
+
+ return function template(ctx, node, key = '') {
+ let errorNode = null;
+ let remoteListNode = null;
+
+ const aboutNavClass = ctx.state.activePage === PAGE_ABOUT ? 'selected' : 'notselected';
+ const optionsNavClass = ctx.state.activePage === PAGE_OPTIONS ? 'selected' : 'notselected';
+ const showAboutHandler = [() => { ctx.state.activePage = PAGE_ABOUT; }, ctx];
+ const showOptionsHandler = [() => { ctx.state.activePage = PAGE_OPTIONS; }, ctx];
+ const aboutPageClass = ctx.state.activePage === PAGE_ABOUT ? 'active_page' : 'inactive_page';
+ const optionsPageClass = ctx.state.activePage === PAGE_OPTIONS ? 'active_page' : 'inactive_page';
+
+ const formSubmitHandler = ['prevent', ctx.addRemote, ctx];
+ const formState = ctx.state.form;
+ const hostInputHandler = [(ev) => { formState.remote_host = ev.target.value; }];
+ const nameInputHandler = [(ev) => { formState.remote_name = ev.target.value; }];
+ const databaseInputHandler = [(ev) => { formState.remote_database = ev.target.value; }];
+ const issuesRadioChecked = formState.remote_datasrc === DEFAULT_DATA_SOURCE;
+ const tasksRadioChecked = formState.remote_datasrc === 'project.task';
+
+ const issuesRadioHandler = [(ev) => {
+ if (ev.target.checked) {
+ formState.remote_datasrc = DEFAULT_DATA_SOURCE;
+ }
+ }];
+
+ const tasksRadioHandler = [(ev) => {
+ if (ev.target.checked) {
+ formState.remote_datasrc = 'project.task';
+ }
+ }];
+ const addRemoteHandler = [ctx.addRemote, ctx];
+ const reloadRemotesHandler = [ctx.loadRemotes, ctx];
+ const toggleListHandler = [() => { ctx.state.showList = !ctx.state.showList; }, ctx];
+ const removeAllRemotesHandler = [ctx.removeAllRemotes, ctx];
+
+ if (ctx.state.error) {
+ errorNode = errorBlock([ctx.state.error]);
+ }
+
+ if (ctx.state.showList && ctx.state.remotes.length) {
+ ctx = Object.create(ctx);
+ const [remoteItems, , remoteCount, remoteChildren] = prepareList(ctx.state.remotes);
+ const seenRemoteKeys = new Set();
+
+ for (let i = 0; i < remoteCount; i++) {
+ ctx.remote = remoteItems[i];
+ const remoteKey = ctx.remote.url + ctx.remote.database;
+
+ if (seenRemoteKeys.has(String(remoteKey))) {
+ throw new OwlError(`Got duplicate key in t-foreach: ${remoteKey}`);
+ }
+ seenRemoteKeys.add(String(remoteKey));
+
+ const nameNode = readMoreName({ text: ctx.remote.name, limit: 18 }, key + `__1__${remoteKey}`, node, this, null);
+ const hostNode = readMoreHost({ text: ctx.remote.url, limit: 25 }, key + `__2__${remoteKey}`, node, this, null);
+ const databaseNode = readMoreDatabase({ text: ctx.remote.database, limit: 18 }, key + `__3__${remoteKey}`, node, this, null);
+ const sourceNode = readMoreSource({ text: ctx.remote.datasrc || DEFAULT_DATA_SOURCE, limit: 18 }, key + `__4__${remoteKey}`, node, this, null);
+ const stateNode = readMoreState({ text: ctx.remote.state || 'Inactive', limit: 18 }, key + `__5__${remoteKey}`, node, this, null);
+ const remoteItem = ctx.remote;
+ const deleteHandler = [() => ctx.removeRemote(remoteItem), ctx];
+
+ remoteChildren[i] = withKey(
+ remoteRowBlock([deleteHandler], [nameNode, hostNode, databaseNode, sourceNode, stateNode]),
+ remoteKey
+ );
+ }
+
+ ctx = ctx.__proto__;
+ remoteListNode = remotesTableBlock([], [list(remoteChildren)]);
+ }
+
+ return rootBlock(
+ [
+ aboutNavClass,
+ showAboutHandler,
+ optionsNavClass,
+ showOptionsHandler,
+ aboutPageClass,
+ optionsPageClass,
+ formSubmitHandler,
+ formState.remote_host,
+ hostInputHandler,
+ formState.remote_name,
+ nameInputHandler,
+ formState.remote_database,
+ databaseInputHandler,
+ issuesRadioChecked,
+ issuesRadioHandler,
+ tasksRadioChecked,
+ tasksRadioHandler,
+ addRemoteHandler,
+ reloadRemotesHandler,
+ toggleListHandler,
+ removeAllRemotesHandler,
+ ],
+ [errorNode, remoteListNode]
+ );
+ };
+}
+
+/**
+ * Main options application component.
+ */
+class OptionsApp extends Component {
+ static components = { ReadMore };
+ static template = 'OptionsApp';
+
+ setup() {
+ this.state = useState({
+ activePage: PAGE_OPTIONS,
+ remotes: [],
+ showList: true,
+ error: '',
+ form: {
+ remote_host: '',
+ remote_name: '',
+ remote_database: '',
+ remote_datasrc: DEFAULT_DATA_SOURCE,
+ },
+ });
+
+ onWillStart(async () => {
+ await this.loadRemotes();
+ });
+ }
+
+ /**
+ * Reload remote configurations from storage.
+ *
+ * @returns {Promise}
+ */
+ async loadRemotes() {
+ this.state.remotes = await readRemotes();
+ }
+
+ /**
+ * Reset the add-remote form back to defaults.
+ */
+ resetRemoteForm() {
+ this.state.form.remote_host = '';
+ this.state.form.remote_name = '';
+ this.state.form.remote_database = '';
+ this.state.form.remote_datasrc = DEFAULT_DATA_SOURCE;
+ }
+
+ /**
+ * Validate current form fields and return normalized values.
+ *
+ * @returns {{host: string, name: string, database: string, datasrc: string}|null}
+ */
+ getValidatedRemoteForm() {
+ const host = normalizeHost(this.state.form.remote_host || '');
+ const name = (this.state.form.remote_name || '').trim();
+ const database = (this.state.form.remote_database || '').trim();
+ const datasrc = this.state.form.remote_datasrc || DEFAULT_DATA_SOURCE;
+
+ if (!host || !name || !database) {
+ this.state.error = 'Fields cannot be empty';
+ return null;
+ }
+
+ if (!validURL(host)) {
+ this.state.error = 'Invalid URL syntax';
+ return null;
+ }
+
+ return { host, name, database, datasrc };
+ }
+
+ /**
+ * Add a new remote configuration.
+ *
+ * @returns {Promise}
+ */
+ async addRemote() {
+ this.state.error = '';
+
+ const validated = this.getValidatedRemoteForm();
+ if (!validated) {
+ return;
+ }
+
+ const { host, name, database, datasrc } = validated;
+ const remotes = await readRemotes();
+
+ if (remotes.some((remote) => remote.url === host && remote.database === database)) {
+ this.state.error = `${host} and ${database} already exist; duplicates are not allowed`;
+ return;
+ }
+
+ remotes.push({
+ url: host,
+ name,
+ database,
+ datasrc,
+ state: 'Inactive',
+ });
+
+ await writeRemotes(remotes);
+ await this.loadRemotes();
+ this.resetRemoteForm();
+ await notify(`Host [${host}] added successfully.`);
+ }
+
+ /**
+ * Remove a single remote configuration.
+ *
+ * @param {object} remote Remote row to remove.
+ * @returns {Promise}
+ */
+ async removeRemote(remote) {
+ const confirmed = await confirmDialog(`Are you sure you want to remove remote [${remote.url}]?`);
+ if (!confirmed) {
+ return;
+ }
+
+ await clearOdooSessionCookies(remote.url);
+ const remotes = (await readRemotes()).filter(
+ (currentRemote) => !(currentRemote.url === remote.url && currentRemote.database === remote.database)
+ );
+
+ await writeRemotes(remotes);
+ await storage.remove(remote.database);
+ await this.loadRemotes();
+ await notify(`[${remote.url}] removed successfully!`);
+ }
+
+ /**
+ * Remove every saved remote configuration.
+ *
+ * @returns {Promise}
+ */
+ async removeAllRemotes() {
+ const confirmed = await confirmDialog('Are you sure you want to remove all remotes?');
+ if (!confirmed) {
+ return;
+ }
+
+ const remotes = await readRemotes();
+ for (const remote of remotes) {
+ await clearOdooSessionCookies(remote.url);
+ await storage.remove(remote.database);
+ }
+
+ await writeRemotes([]);
+ await storage.remove(STORAGE_KEYS.remoteHostInfo);
+ await this.loadRemotes();
+ await notify('Host list removed successfully!');
+ }
+}
+
+const templates = {
+ ReadMore: createReadMoreTemplate,
+ OptionsApp: createOptionsAppTemplate,
+};
+
+mount(OptionsApp, document.getElementById('app'), { dev: true, templates });
\ No newline at end of file
diff --git a/dist/firefox/js/owl.iife.js b/dist/firefox/js/owl.iife.js
new file mode 100644
index 00000000..c26b6259
--- /dev/null
+++ b/dist/firefox/js/owl.iife.js
@@ -0,0 +1,6340 @@
+(function (exports) {
+ 'use strict';
+
+ function filterOutModifiersFromData(dataList) {
+ dataList = dataList.slice();
+ const modifiers = [];
+ let elm;
+ while ((elm = dataList[0]) && typeof elm === "string") {
+ modifiers.push(dataList.shift());
+ }
+ return { modifiers, data: dataList };
+ }
+ const config = {
+ // whether or not blockdom should normalize DOM whenever a block is created.
+ // Normalizing dom mean removing empty text nodes (or containing only spaces)
+ shouldNormalizeDom: true,
+ // this is the main event handler. Every event handler registered with blockdom
+ // will go through this function, giving it the data registered in the block
+ // and the event
+ mainEventHandler: (data, ev, currentTarget) => {
+ if (typeof data === "function") {
+ data(ev);
+ }
+ else if (Array.isArray(data)) {
+ data = filterOutModifiersFromData(data).data;
+ data[0](data[1], ev);
+ }
+ return false;
+ },
+ };
+
+ // -----------------------------------------------------------------------------
+ // Toggler node
+ // -----------------------------------------------------------------------------
+ class VToggler {
+ constructor(key, child) {
+ this.key = key;
+ this.child = child;
+ }
+ mount(parent, afterNode) {
+ this.parentEl = parent;
+ this.child.mount(parent, afterNode);
+ }
+ moveBeforeDOMNode(node, parent) {
+ this.child.moveBeforeDOMNode(node, parent);
+ }
+ moveBeforeVNode(other, afterNode) {
+ this.moveBeforeDOMNode((other && other.firstNode()) || afterNode);
+ }
+ patch(other, withBeforeRemove) {
+ if (this === other) {
+ return;
+ }
+ let child1 = this.child;
+ let child2 = other.child;
+ if (this.key === other.key) {
+ child1.patch(child2, withBeforeRemove);
+ }
+ else {
+ child2.mount(this.parentEl, child1.firstNode());
+ if (withBeforeRemove) {
+ child1.beforeRemove();
+ }
+ child1.remove();
+ this.child = child2;
+ this.key = other.key;
+ }
+ }
+ beforeRemove() {
+ this.child.beforeRemove();
+ }
+ remove() {
+ this.child.remove();
+ }
+ firstNode() {
+ return this.child.firstNode();
+ }
+ toString() {
+ return this.child.toString();
+ }
+ }
+ function toggler(key, child) {
+ return new VToggler(key, child);
+ }
+
+ // Custom error class that wraps error that happen in the owl lifecycle
+ class OwlError extends Error {
+ }
+
+ const { setAttribute: elemSetAttribute, removeAttribute } = Element.prototype;
+ const tokenList = DOMTokenList.prototype;
+ const tokenListAdd = tokenList.add;
+ const tokenListRemove = tokenList.remove;
+ const isArray = Array.isArray;
+ const { split, trim } = String.prototype;
+ const wordRegexp = /\s+/;
+ /**
+ * We regroup here all code related to updating attributes in a very loose sense:
+ * attributes, properties and classs are all managed by the functions in this
+ * file.
+ */
+ function setAttribute(key, value) {
+ switch (value) {
+ case false:
+ case undefined:
+ removeAttribute.call(this, key);
+ break;
+ case true:
+ elemSetAttribute.call(this, key, "");
+ break;
+ default:
+ elemSetAttribute.call(this, key, value);
+ }
+ }
+ function createAttrUpdater(attr) {
+ return function (value) {
+ setAttribute.call(this, attr, value);
+ };
+ }
+ function attrsSetter(attrs) {
+ if (isArray(attrs)) {
+ if (attrs[0] === "class") {
+ setClass.call(this, attrs[1]);
+ }
+ else {
+ setAttribute.call(this, attrs[0], attrs[1]);
+ }
+ }
+ else {
+ for (let k in attrs) {
+ if (k === "class") {
+ setClass.call(this, attrs[k]);
+ }
+ else {
+ setAttribute.call(this, k, attrs[k]);
+ }
+ }
+ }
+ }
+ function attrsUpdater(attrs, oldAttrs) {
+ if (isArray(attrs)) {
+ const name = attrs[0];
+ const val = attrs[1];
+ if (name === oldAttrs[0]) {
+ if (val === oldAttrs[1]) {
+ return;
+ }
+ if (name === "class") {
+ updateClass.call(this, val, oldAttrs[1]);
+ }
+ else {
+ setAttribute.call(this, name, val);
+ }
+ }
+ else {
+ removeAttribute.call(this, oldAttrs[0]);
+ setAttribute.call(this, name, val);
+ }
+ }
+ else {
+ for (let k in oldAttrs) {
+ if (!(k in attrs)) {
+ if (k === "class") {
+ updateClass.call(this, "", oldAttrs[k]);
+ }
+ else {
+ removeAttribute.call(this, k);
+ }
+ }
+ }
+ for (let k in attrs) {
+ const val = attrs[k];
+ if (val !== oldAttrs[k]) {
+ if (k === "class") {
+ updateClass.call(this, val, oldAttrs[k]);
+ }
+ else {
+ setAttribute.call(this, k, val);
+ }
+ }
+ }
+ }
+ }
+ function toClassObj(expr) {
+ const result = {};
+ switch (typeof expr) {
+ case "string":
+ // we transform here a list of classes into an object:
+ // 'hey you' becomes {hey: true, you: true}
+ const str = trim.call(expr);
+ if (!str) {
+ return {};
+ }
+ let words = split.call(str, wordRegexp);
+ for (let i = 0, l = words.length; i < l; i++) {
+ result[words[i]] = true;
+ }
+ return result;
+ case "object":
+ // this is already an object but we may need to split keys:
+ // {'a': true, 'b c': true} should become {a: true, b: true, c: true}
+ for (let key in expr) {
+ const value = expr[key];
+ if (value) {
+ key = trim.call(key);
+ if (!key) {
+ continue;
+ }
+ const words = split.call(key, wordRegexp);
+ for (let word of words) {
+ result[word] = value;
+ }
+ }
+ }
+ return result;
+ case "undefined":
+ return {};
+ case "number":
+ return { [expr]: true };
+ default:
+ return { [expr]: true };
+ }
+ }
+ function setClass(val) {
+ val = val === "" ? {} : toClassObj(val);
+ // add classes
+ const cl = this.classList;
+ for (let c in val) {
+ tokenListAdd.call(cl, c);
+ }
+ }
+ function updateClass(val, oldVal) {
+ oldVal = oldVal === "" ? {} : toClassObj(oldVal);
+ val = val === "" ? {} : toClassObj(val);
+ const cl = this.classList;
+ // remove classes
+ for (let c in oldVal) {
+ if (!(c in val)) {
+ tokenListRemove.call(cl, c);
+ }
+ }
+ // add classes
+ for (let c in val) {
+ if (!(c in oldVal)) {
+ tokenListAdd.call(cl, c);
+ }
+ }
+ }
+
+ /**
+ * Creates a batched version of a callback so that all calls to it in the same
+ * microtick will only call the original callback once.
+ *
+ * @param callback the callback to batch
+ * @returns a batched version of the original callback
+ */
+ function batched(callback) {
+ let scheduled = false;
+ return async (...args) => {
+ if (!scheduled) {
+ scheduled = true;
+ await Promise.resolve();
+ scheduled = false;
+ callback(...args);
+ }
+ };
+ }
+ /**
+ * Determine whether the given element is contained in its ownerDocument:
+ * either directly or with a shadow root in between.
+ */
+ function inOwnerDocument(el) {
+ if (!el) {
+ return false;
+ }
+ if (el.ownerDocument.contains(el)) {
+ return true;
+ }
+ const rootNode = el.getRootNode();
+ return rootNode instanceof ShadowRoot && el.ownerDocument.contains(rootNode.host);
+ }
+ /**
+ * Determine whether the given element is contained in a specific root documnet:
+ * either directly or with a shadow root in between or in an iframe.
+ */
+ function isAttachedToDocument(element, documentElement) {
+ let current = element;
+ const shadowRoot = documentElement.defaultView.ShadowRoot;
+ while (current) {
+ if (current === documentElement) {
+ return true;
+ }
+ if (current.parentNode) {
+ current = current.parentNode;
+ }
+ else if (current instanceof shadowRoot && current.host) {
+ current = current.host;
+ }
+ else {
+ return false;
+ }
+ }
+ return false;
+ }
+ function validateTarget(target) {
+ // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+ const document = target && target.ownerDocument;
+ if (document) {
+ if (!document.defaultView) {
+ throw new OwlError("Cannot mount a component: the target document is not attached to a window (defaultView is missing)");
+ }
+ const HTMLElement = document.defaultView.HTMLElement;
+ if (target instanceof HTMLElement || target instanceof ShadowRoot) {
+ if (!isAttachedToDocument(target, document)) {
+ throw new OwlError("Cannot mount a component on a detached dom node");
+ }
+ return;
+ }
+ }
+ throw new OwlError("Cannot mount component: the target is not a valid DOM element");
+ }
+ class EventBus extends EventTarget {
+ trigger(name, payload) {
+ this.dispatchEvent(new CustomEvent(name, { detail: payload }));
+ }
+ }
+ function whenReady(fn) {
+ return new Promise(function (resolve) {
+ if (document.readyState !== "loading") {
+ resolve(true);
+ }
+ else {
+ document.addEventListener("DOMContentLoaded", resolve, false);
+ }
+ }).then(fn || function () { });
+ }
+ async function loadFile(url) {
+ const result = await fetch(url);
+ if (!result.ok) {
+ throw new OwlError("Error while fetching xml templates");
+ }
+ return await result.text();
+ }
+ /*
+ * This class just transports the fact that a string is safe
+ * to be injected as HTML. Overriding a JS primitive is quite painful though
+ * so we need to redfine toString and valueOf.
+ */
+ class Markup extends String {
+ }
+ function htmlEscape(str) {
+ if (str instanceof Markup) {
+ return str;
+ }
+ if (str === undefined) {
+ return markup("");
+ }
+ if (typeof str === "number") {
+ return markup(String(str));
+ }
+ [
+ ["&", "&"],
+ ["<", "<"],
+ [">", ">"],
+ ["'", "'"],
+ ['"', """],
+ ["`", "`"],
+ ].forEach((pairs) => {
+ str = String(str).replace(new RegExp(pairs[0], "g"), pairs[1]);
+ });
+ return markup(str);
+ }
+ function markup(valueOrStrings, ...placeholders) {
+ if (!Array.isArray(valueOrStrings)) {
+ return new Markup(valueOrStrings);
+ }
+ const strings = valueOrStrings;
+ let acc = "";
+ let i = 0;
+ for (; i < placeholders.length; ++i) {
+ acc += strings[i] + htmlEscape(placeholders[i]);
+ }
+ acc += strings[i];
+ return new Markup(acc);
+ }
+
+ function createEventHandler(rawEvent) {
+ const eventName = rawEvent.split(".")[0];
+ const capture = rawEvent.includes(".capture");
+ if (rawEvent.includes(".synthetic")) {
+ return createSyntheticHandler(eventName, capture);
+ }
+ else {
+ return createElementHandler(eventName, capture);
+ }
+ }
+ // Native listener
+ let nextNativeEventId = 1;
+ function createElementHandler(evName, capture = false) {
+ let eventKey = `__event__${evName}_${nextNativeEventId++}`;
+ if (capture) {
+ eventKey = `${eventKey}_capture`;
+ }
+ function listener(ev) {
+ const currentTarget = ev.currentTarget;
+ if (!currentTarget || !inOwnerDocument(currentTarget))
+ return;
+ const data = currentTarget[eventKey];
+ if (!data)
+ return;
+ config.mainEventHandler(data, ev, currentTarget);
+ }
+ function setup(data) {
+ this[eventKey] = data;
+ this.addEventListener(evName, listener, { capture });
+ }
+ function remove() {
+ delete this[eventKey];
+ this.removeEventListener(evName, listener, { capture });
+ }
+ function update(data) {
+ this[eventKey] = data;
+ }
+ return { setup, update, remove };
+ }
+ // Synthetic handler: a form of event delegation that allows placing only one
+ // listener per event type.
+ let nextSyntheticEventId = 1;
+ function createSyntheticHandler(evName, capture = false) {
+ let eventKey = `__event__synthetic_${evName}`;
+ if (capture) {
+ eventKey = `${eventKey}_capture`;
+ }
+ setupSyntheticEvent(evName, eventKey, capture);
+ const currentId = nextSyntheticEventId++;
+ function setup(data) {
+ const _data = this[eventKey] || {};
+ _data[currentId] = data;
+ this[eventKey] = _data;
+ }
+ function remove() {
+ delete this[eventKey];
+ }
+ return { setup, update: setup, remove };
+ }
+ function nativeToSyntheticEvent(eventKey, event) {
+ let dom = event.target;
+ while (dom !== null) {
+ const _data = dom[eventKey];
+ if (_data) {
+ for (const data of Object.values(_data)) {
+ const stopped = config.mainEventHandler(data, event, dom);
+ if (stopped)
+ return;
+ }
+ }
+ dom = dom.parentNode;
+ }
+ }
+ const CONFIGURED_SYNTHETIC_EVENTS = {};
+ function setupSyntheticEvent(evName, eventKey, capture = false) {
+ if (CONFIGURED_SYNTHETIC_EVENTS[eventKey]) {
+ return;
+ }
+ document.addEventListener(evName, (event) => nativeToSyntheticEvent(eventKey, event), {
+ capture,
+ });
+ CONFIGURED_SYNTHETIC_EVENTS[eventKey] = true;
+ }
+
+ const getDescriptor$3 = (o, p) => Object.getOwnPropertyDescriptor(o, p);
+ const nodeProto$4 = Node.prototype;
+ const nodeInsertBefore$3 = nodeProto$4.insertBefore;
+ const nodeSetTextContent$1 = getDescriptor$3(nodeProto$4, "textContent").set;
+ const nodeRemoveChild$3 = nodeProto$4.removeChild;
+ // -----------------------------------------------------------------------------
+ // Multi NODE
+ // -----------------------------------------------------------------------------
+ class VMulti {
+ constructor(children) {
+ this.children = children;
+ }
+ mount(parent, afterNode) {
+ const children = this.children;
+ const l = children.length;
+ const anchors = new Array(l);
+ for (let i = 0; i < l; i++) {
+ let child = children[i];
+ if (child) {
+ child.mount(parent, afterNode);
+ }
+ else {
+ const childAnchor = document.createTextNode("");
+ anchors[i] = childAnchor;
+ nodeInsertBefore$3.call(parent, childAnchor, afterNode);
+ }
+ }
+ this.anchors = anchors;
+ this.parentEl = parent;
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ const children = this.children;
+ const anchors = this.anchors;
+ for (let i = 0, l = children.length; i < l; i++) {
+ let child = children[i];
+ if (child) {
+ child.moveBeforeDOMNode(node, parent);
+ }
+ else {
+ const anchor = anchors[i];
+ nodeInsertBefore$3.call(parent, anchor, node);
+ }
+ }
+ }
+ moveBeforeVNode(other, afterNode) {
+ if (other) {
+ const next = other.children[0];
+ afterNode = (next ? next.firstNode() : other.anchors[0]) || null;
+ }
+ const children = this.children;
+ const parent = this.parentEl;
+ const anchors = this.anchors;
+ for (let i = 0, l = children.length; i < l; i++) {
+ let child = children[i];
+ if (child) {
+ child.moveBeforeVNode(null, afterNode);
+ }
+ else {
+ const anchor = anchors[i];
+ nodeInsertBefore$3.call(parent, anchor, afterNode);
+ }
+ }
+ }
+ patch(other, withBeforeRemove) {
+ if (this === other) {
+ return;
+ }
+ const children1 = this.children;
+ const children2 = other.children;
+ const anchors = this.anchors;
+ const parentEl = this.parentEl;
+ for (let i = 0, l = children1.length; i < l; i++) {
+ const vn1 = children1[i];
+ const vn2 = children2[i];
+ if (vn1) {
+ if (vn2) {
+ vn1.patch(vn2, withBeforeRemove);
+ }
+ else {
+ const afterNode = vn1.firstNode();
+ const anchor = document.createTextNode("");
+ anchors[i] = anchor;
+ nodeInsertBefore$3.call(parentEl, anchor, afterNode);
+ if (withBeforeRemove) {
+ vn1.beforeRemove();
+ }
+ vn1.remove();
+ children1[i] = undefined;
+ }
+ }
+ else if (vn2) {
+ children1[i] = vn2;
+ const anchor = anchors[i];
+ vn2.mount(parentEl, anchor);
+ nodeRemoveChild$3.call(parentEl, anchor);
+ }
+ }
+ }
+ beforeRemove() {
+ const children = this.children;
+ for (let i = 0, l = children.length; i < l; i++) {
+ const child = children[i];
+ if (child) {
+ child.beforeRemove();
+ }
+ }
+ }
+ remove() {
+ const parentEl = this.parentEl;
+ if (this.isOnlyChild) {
+ nodeSetTextContent$1.call(parentEl, "");
+ }
+ else {
+ const children = this.children;
+ const anchors = this.anchors;
+ for (let i = 0, l = children.length; i < l; i++) {
+ const child = children[i];
+ if (child) {
+ child.remove();
+ }
+ else {
+ nodeRemoveChild$3.call(parentEl, anchors[i]);
+ }
+ }
+ }
+ }
+ firstNode() {
+ const child = this.children[0];
+ return child ? child.firstNode() : this.anchors[0];
+ }
+ toString() {
+ return this.children.map((c) => (c ? c.toString() : "")).join("");
+ }
+ }
+ function multi(children) {
+ return new VMulti(children);
+ }
+
+ const getDescriptor$2 = (o, p) => Object.getOwnPropertyDescriptor(o, p);
+ const nodeProto$3 = Node.prototype;
+ const characterDataProto$1 = CharacterData.prototype;
+ const nodeInsertBefore$2 = nodeProto$3.insertBefore;
+ const characterDataSetData$1 = getDescriptor$2(characterDataProto$1, "data").set;
+ const nodeRemoveChild$2 = nodeProto$3.removeChild;
+ class VSimpleNode {
+ constructor(text) {
+ this.text = text;
+ }
+ mountNode(node, parent, afterNode) {
+ this.parentEl = parent;
+ nodeInsertBefore$2.call(parent, node, afterNode);
+ this.el = node;
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ nodeInsertBefore$2.call(parent, this.el, node);
+ }
+ moveBeforeVNode(other, afterNode) {
+ nodeInsertBefore$2.call(this.parentEl, this.el, other ? other.el : afterNode);
+ }
+ beforeRemove() { }
+ remove() {
+ nodeRemoveChild$2.call(this.parentEl, this.el);
+ }
+ firstNode() {
+ return this.el;
+ }
+ toString() {
+ return this.text;
+ }
+ }
+ class VText$1 extends VSimpleNode {
+ mount(parent, afterNode) {
+ this.mountNode(document.createTextNode(toText(this.text)), parent, afterNode);
+ }
+ patch(other) {
+ const text2 = other.text;
+ if (this.text !== text2) {
+ characterDataSetData$1.call(this.el, toText(text2));
+ this.text = text2;
+ }
+ }
+ }
+ class VComment extends VSimpleNode {
+ mount(parent, afterNode) {
+ this.mountNode(document.createComment(toText(this.text)), parent, afterNode);
+ }
+ patch() { }
+ }
+ function text(str) {
+ return new VText$1(str);
+ }
+ function comment(str) {
+ return new VComment(str);
+ }
+ function toText(value) {
+ switch (typeof value) {
+ case "string":
+ return value;
+ case "number":
+ return String(value);
+ case "boolean":
+ return value ? "true" : "false";
+ default:
+ return value || "";
+ }
+ }
+
+ const getDescriptor$1 = (o, p) => Object.getOwnPropertyDescriptor(o, p);
+ const nodeProto$2 = Node.prototype;
+ const elementProto = Element.prototype;
+ const characterDataProto = CharacterData.prototype;
+ const characterDataSetData = getDescriptor$1(characterDataProto, "data").set;
+ const nodeGetFirstChild = getDescriptor$1(nodeProto$2, "firstChild").get;
+ const nodeGetNextSibling = getDescriptor$1(nodeProto$2, "nextSibling").get;
+ const NO_OP$1 = () => { };
+ function makePropSetter(name) {
+ return function setProp(value) {
+ // support 0, fallback to empty string for other falsy values
+ this[name] = value === 0 ? 0 : value ? value.valueOf() : "";
+ };
+ }
+ const cache$1 = {};
+ /**
+ * Compiling blocks is a multi-step process:
+ *
+ * 1. build an IntermediateTree from the HTML element. This intermediate tree
+ * is a binary tree structure that encode dynamic info sub nodes, and the
+ * path required to reach them
+ * 2. process the tree to build a block context, which is an object that aggregate
+ * all dynamic info in a list, and also, all ref indexes.
+ * 3. process the context to build appropriate builder/setter functions
+ * 4. make a dynamic block class, which will efficiently collect references and
+ * create/update dynamic locations/children
+ *
+ * @param str
+ * @returns a new block type, that can build concrete blocks
+ */
+ function createBlock(str) {
+ if (str in cache$1) {
+ return cache$1[str];
+ }
+ // step 0: prepare html base element
+ const doc = new DOMParser().parseFromString(`${str}`, "text/xml");
+ const node = doc.firstChild.firstChild;
+ if (config.shouldNormalizeDom) {
+ normalizeNode(node);
+ }
+ // step 1: prepare intermediate tree
+ const tree = buildTree(node);
+ // step 2: prepare block context
+ const context = buildContext(tree);
+ // step 3: build the final block class
+ const template = tree.el;
+ const Block = buildBlock(template, context);
+ cache$1[str] = Block;
+ return Block;
+ }
+ // -----------------------------------------------------------------------------
+ // Helper
+ // -----------------------------------------------------------------------------
+ function normalizeNode(node) {
+ if (node.nodeType === Node.TEXT_NODE) {
+ if (!/\S/.test(node.textContent)) {
+ node.remove();
+ return;
+ }
+ }
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ if (node.tagName === "pre") {
+ return;
+ }
+ }
+ for (let i = node.childNodes.length - 1; i >= 0; --i) {
+ normalizeNode(node.childNodes.item(i));
+ }
+ }
+ function buildTree(node, parent = null, domParentTree = null) {
+ switch (node.nodeType) {
+ case Node.ELEMENT_NODE: {
+ // HTMLElement
+ let currentNS = domParentTree && domParentTree.currentNS;
+ const tagName = node.tagName;
+ let el = undefined;
+ const info = [];
+ if (tagName.startsWith("block-text-")) {
+ const index = parseInt(tagName.slice(11), 10);
+ info.push({ type: "text", idx: index });
+ el = document.createTextNode("");
+ }
+ if (tagName.startsWith("block-child-")) {
+ if (!domParentTree.isRef) {
+ addRef(domParentTree);
+ }
+ const index = parseInt(tagName.slice(12), 10);
+ info.push({ type: "child", idx: index });
+ el = document.createTextNode("");
+ }
+ currentNS || (currentNS = node.namespaceURI);
+ if (!el) {
+ el = currentNS
+ ? document.createElementNS(currentNS, tagName)
+ : document.createElement(tagName);
+ }
+ if (el instanceof Element) {
+ if (!domParentTree) {
+ // some html elements may have side effects when setting their attributes.
+ // For example, setting the src attribute of an will trigger a
+ // request to get the corresponding image. This is something that we
+ // don't want at compile time. We avoid that by putting the content of
+ // the block in a element
+ const fragment = document.createElement("template").content;
+ fragment.appendChild(el);
+ }
+ const attrs = node.attributes;
+ for (let i = 0; i < attrs.length; i++) {
+ const attrName = attrs[i].name;
+ const attrValue = attrs[i].value;
+ if (attrName.startsWith("block-handler-")) {
+ const idx = parseInt(attrName.slice(14), 10);
+ info.push({
+ type: "handler",
+ idx,
+ event: attrValue,
+ });
+ }
+ else if (attrName.startsWith("block-attribute-")) {
+ const idx = parseInt(attrName.slice(16), 10);
+ info.push({
+ type: "attribute",
+ idx,
+ name: attrValue,
+ tag: tagName,
+ });
+ }
+ else if (attrName.startsWith("block-property-")) {
+ const idx = parseInt(attrName.slice(15), 10);
+ info.push({
+ type: "property",
+ idx,
+ name: attrValue,
+ tag: tagName,
+ });
+ }
+ else if (attrName === "block-attributes") {
+ info.push({
+ type: "attributes",
+ idx: parseInt(attrValue, 10),
+ });
+ }
+ else if (attrName === "block-ref") {
+ info.push({
+ type: "ref",
+ idx: parseInt(attrValue, 10),
+ });
+ }
+ else {
+ el.setAttribute(attrs[i].name, attrValue);
+ }
+ }
+ }
+ const tree = {
+ parent,
+ firstChild: null,
+ nextSibling: null,
+ el,
+ info,
+ refN: 0,
+ currentNS,
+ };
+ if (node.firstChild) {
+ const childNode = node.childNodes[0];
+ if (node.childNodes.length === 1 &&
+ childNode.nodeType === Node.ELEMENT_NODE &&
+ childNode.tagName.startsWith("block-child-")) {
+ const tagName = childNode.tagName;
+ const index = parseInt(tagName.slice(12), 10);
+ info.push({ idx: index, type: "child", isOnlyChild: true });
+ }
+ else {
+ tree.firstChild = buildTree(node.firstChild, tree, tree);
+ el.appendChild(tree.firstChild.el);
+ let curNode = node.firstChild;
+ let curTree = tree.firstChild;
+ while ((curNode = curNode.nextSibling)) {
+ curTree.nextSibling = buildTree(curNode, curTree, tree);
+ el.appendChild(curTree.nextSibling.el);
+ curTree = curTree.nextSibling;
+ }
+ }
+ }
+ if (tree.info.length) {
+ addRef(tree);
+ }
+ return tree;
+ }
+ case Node.TEXT_NODE:
+ case Node.COMMENT_NODE: {
+ // text node or comment node
+ const el = node.nodeType === Node.TEXT_NODE
+ ? document.createTextNode(node.textContent)
+ : document.createComment(node.textContent);
+ return {
+ parent: parent,
+ firstChild: null,
+ nextSibling: null,
+ el,
+ info: [],
+ refN: 0,
+ currentNS: null,
+ };
+ }
+ }
+ throw new OwlError("boom");
+ }
+ function addRef(tree) {
+ tree.isRef = true;
+ do {
+ tree.refN++;
+ } while ((tree = tree.parent));
+ }
+ function parentTree(tree) {
+ let parent = tree.parent;
+ while (parent && parent.nextSibling === tree) {
+ tree = parent;
+ parent = parent.parent;
+ }
+ return parent;
+ }
+ function buildContext(tree, ctx, fromIdx) {
+ if (!ctx) {
+ const children = new Array(tree.info.filter((v) => v.type === "child").length);
+ ctx = { collectors: [], locations: [], children, cbRefs: [], refN: tree.refN, refList: [] };
+ fromIdx = 0;
+ }
+ if (tree.refN) {
+ const initialIdx = fromIdx;
+ const isRef = tree.isRef;
+ const firstChild = tree.firstChild ? tree.firstChild.refN : 0;
+ const nextSibling = tree.nextSibling ? tree.nextSibling.refN : 0;
+ //node
+ if (isRef) {
+ for (let info of tree.info) {
+ info.refIdx = initialIdx;
+ }
+ tree.refIdx = initialIdx;
+ updateCtx(ctx, tree);
+ fromIdx++;
+ }
+ // right
+ if (nextSibling) {
+ const idx = fromIdx + firstChild;
+ ctx.collectors.push({ idx, prevIdx: initialIdx, getVal: nodeGetNextSibling });
+ buildContext(tree.nextSibling, ctx, idx);
+ }
+ // left
+ if (firstChild) {
+ ctx.collectors.push({ idx: fromIdx, prevIdx: initialIdx, getVal: nodeGetFirstChild });
+ buildContext(tree.firstChild, ctx, fromIdx);
+ }
+ }
+ return ctx;
+ }
+ function updateCtx(ctx, tree) {
+ for (let info of tree.info) {
+ switch (info.type) {
+ case "text":
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx: info.refIdx,
+ setData: setText,
+ updateData: setText,
+ });
+ break;
+ case "child":
+ if (info.isOnlyChild) {
+ // tree is the parentnode here
+ ctx.children[info.idx] = {
+ parentRefIdx: info.refIdx,
+ isOnlyChild: true,
+ };
+ }
+ else {
+ // tree is the anchor text node
+ ctx.children[info.idx] = {
+ parentRefIdx: parentTree(tree).refIdx,
+ afterRefIdx: info.refIdx,
+ };
+ }
+ break;
+ case "property": {
+ const refIdx = info.refIdx;
+ const setProp = makePropSetter(info.name);
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx,
+ setData: setProp,
+ updateData: setProp,
+ });
+ break;
+ }
+ case "attribute": {
+ const refIdx = info.refIdx;
+ let updater;
+ let setter;
+ if (info.name === "class") {
+ setter = setClass;
+ updater = updateClass;
+ }
+ else {
+ setter = createAttrUpdater(info.name);
+ updater = setter;
+ }
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx,
+ setData: setter,
+ updateData: updater,
+ });
+ break;
+ }
+ case "attributes":
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx: info.refIdx,
+ setData: attrsSetter,
+ updateData: attrsUpdater,
+ });
+ break;
+ case "handler": {
+ const { setup, update } = createEventHandler(info.event);
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx: info.refIdx,
+ setData: setup,
+ updateData: update,
+ });
+ break;
+ }
+ case "ref":
+ const index = ctx.cbRefs.push(info.idx) - 1;
+ ctx.locations.push({
+ idx: info.idx,
+ refIdx: info.refIdx,
+ setData: makeRefSetter(index, ctx.refList),
+ updateData: NO_OP$1,
+ });
+ }
+ }
+ }
+ // -----------------------------------------------------------------------------
+ // building the concrete block class
+ // -----------------------------------------------------------------------------
+ function buildBlock(template, ctx) {
+ let B = createBlockClass(template, ctx);
+ if (ctx.cbRefs.length) {
+ const cbRefs = ctx.cbRefs;
+ const refList = ctx.refList;
+ let cbRefsNumber = cbRefs.length;
+ B = class extends B {
+ mount(parent, afterNode) {
+ refList.push(new Array(cbRefsNumber));
+ super.mount(parent, afterNode);
+ for (let cbRef of refList.pop()) {
+ cbRef();
+ }
+ }
+ remove() {
+ super.remove();
+ for (let cbRef of cbRefs) {
+ let fn = this.data[cbRef];
+ fn(null);
+ }
+ }
+ };
+ }
+ if (ctx.children.length) {
+ B = class extends B {
+ constructor(data, children) {
+ super(data);
+ this.children = children;
+ }
+ };
+ B.prototype.beforeRemove = VMulti.prototype.beforeRemove;
+ return (data, children = []) => new B(data, children);
+ }
+ return (data) => new B(data);
+ }
+ function createBlockClass(template, ctx) {
+ const { refN, collectors, children } = ctx;
+ const colN = collectors.length;
+ ctx.locations.sort((a, b) => a.idx - b.idx);
+ const locations = ctx.locations.map((loc) => ({
+ refIdx: loc.refIdx,
+ setData: loc.setData,
+ updateData: loc.updateData,
+ }));
+ const locN = locations.length;
+ const childN = children.length;
+ const childrenLocs = children;
+ const isDynamic = refN > 0;
+ // these values are defined here to make them faster to lookup in the class
+ // block scope
+ const nodeCloneNode = nodeProto$2.cloneNode;
+ const nodeInsertBefore = nodeProto$2.insertBefore;
+ const elementRemove = elementProto.remove;
+ class Block {
+ constructor(data) {
+ this.data = data;
+ }
+ beforeRemove() { }
+ remove() {
+ elementRemove.call(this.el);
+ }
+ firstNode() {
+ return this.el;
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ nodeInsertBefore.call(parent, this.el, node);
+ }
+ moveBeforeVNode(other, afterNode) {
+ nodeInsertBefore.call(this.parentEl, this.el, other ? other.el : afterNode);
+ }
+ toString() {
+ const div = document.createElement("div");
+ this.mount(div, null);
+ return div.innerHTML;
+ }
+ mount(parent, afterNode) {
+ const el = nodeCloneNode.call(template, true);
+ nodeInsertBefore.call(parent, el, afterNode);
+ this.el = el;
+ this.parentEl = parent;
+ }
+ patch(other, withBeforeRemove) { }
+ }
+ if (isDynamic) {
+ Block.prototype.mount = function mount(parent, afterNode) {
+ const el = nodeCloneNode.call(template, true);
+ // collecting references
+ const refs = new Array(refN);
+ this.refs = refs;
+ refs[0] = el;
+ for (let i = 0; i < colN; i++) {
+ const w = collectors[i];
+ refs[w.idx] = w.getVal.call(refs[w.prevIdx]);
+ }
+ // applying data to all update points
+ if (locN) {
+ const data = this.data;
+ for (let i = 0; i < locN; i++) {
+ const loc = locations[i];
+ loc.setData.call(refs[loc.refIdx], data[i]);
+ }
+ }
+ nodeInsertBefore.call(parent, el, afterNode);
+ // preparing all children
+ if (childN) {
+ const children = this.children;
+ for (let i = 0; i < childN; i++) {
+ const child = children[i];
+ if (child) {
+ const loc = childrenLocs[i];
+ const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
+ child.isOnlyChild = loc.isOnlyChild;
+ child.mount(refs[loc.parentRefIdx], afterNode);
+ }
+ }
+ }
+ this.el = el;
+ this.parentEl = parent;
+ };
+ Block.prototype.patch = function patch(other, withBeforeRemove) {
+ if (this === other) {
+ return;
+ }
+ const refs = this.refs;
+ // update texts/attributes/
+ if (locN) {
+ const data1 = this.data;
+ const data2 = other.data;
+ for (let i = 0; i < locN; i++) {
+ const val1 = data1[i];
+ const val2 = data2[i];
+ if (val1 !== val2) {
+ const loc = locations[i];
+ loc.updateData.call(refs[loc.refIdx], val2, val1);
+ }
+ }
+ this.data = data2;
+ }
+ // update children
+ if (childN) {
+ let children1 = this.children;
+ const children2 = other.children;
+ for (let i = 0; i < childN; i++) {
+ const child1 = children1[i];
+ const child2 = children2[i];
+ if (child1) {
+ if (child2) {
+ child1.patch(child2, withBeforeRemove);
+ }
+ else {
+ if (withBeforeRemove) {
+ child1.beforeRemove();
+ }
+ child1.remove();
+ children1[i] = undefined;
+ }
+ }
+ else if (child2) {
+ const loc = childrenLocs[i];
+ const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
+ child2.mount(refs[loc.parentRefIdx], afterNode);
+ children1[i] = child2;
+ }
+ }
+ }
+ };
+ }
+ return Block;
+ }
+ function setText(value) {
+ characterDataSetData.call(this, toText(value));
+ }
+ function makeRefSetter(index, refs) {
+ return function setRef(fn) {
+ refs[refs.length - 1][index] = () => fn(this);
+ };
+ }
+
+ const getDescriptor = (o, p) => Object.getOwnPropertyDescriptor(o, p);
+ const nodeProto$1 = Node.prototype;
+ const nodeInsertBefore$1 = nodeProto$1.insertBefore;
+ const nodeAppendChild = nodeProto$1.appendChild;
+ const nodeRemoveChild$1 = nodeProto$1.removeChild;
+ const nodeSetTextContent = getDescriptor(nodeProto$1, "textContent").set;
+ // -----------------------------------------------------------------------------
+ // List Node
+ // -----------------------------------------------------------------------------
+ class VList {
+ constructor(children) {
+ this.children = children;
+ }
+ mount(parent, afterNode) {
+ const children = this.children;
+ const _anchor = document.createTextNode("");
+ this.anchor = _anchor;
+ nodeInsertBefore$1.call(parent, _anchor, afterNode);
+ const l = children.length;
+ if (l) {
+ const mount = children[0].mount;
+ for (let i = 0; i < l; i++) {
+ mount.call(children[i], parent, _anchor);
+ }
+ }
+ this.parentEl = parent;
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ const children = this.children;
+ for (let i = 0, l = children.length; i < l; i++) {
+ children[i].moveBeforeDOMNode(node, parent);
+ }
+ parent.insertBefore(this.anchor, node);
+ }
+ moveBeforeVNode(other, afterNode) {
+ if (other) {
+ const next = other.children[0];
+ afterNode = (next ? next.firstNode() : other.anchor) || null;
+ }
+ const children = this.children;
+ for (let i = 0, l = children.length; i < l; i++) {
+ children[i].moveBeforeVNode(null, afterNode);
+ }
+ this.parentEl.insertBefore(this.anchor, afterNode);
+ }
+ patch(other, withBeforeRemove) {
+ if (this === other) {
+ return;
+ }
+ const ch1 = this.children;
+ const ch2 = other.children;
+ if (ch2.length === 0 && ch1.length === 0) {
+ return;
+ }
+ this.children = ch2;
+ const proto = ch2[0] || ch1[0];
+ const { mount: cMount, patch: cPatch, remove: cRemove, beforeRemove, moveBeforeVNode: cMoveBefore, firstNode: cFirstNode, } = proto;
+ const _anchor = this.anchor;
+ const isOnlyChild = this.isOnlyChild;
+ const parent = this.parentEl;
+ // fast path: no new child => only remove
+ if (ch2.length === 0 && isOnlyChild) {
+ if (withBeforeRemove) {
+ for (let i = 0, l = ch1.length; i < l; i++) {
+ beforeRemove.call(ch1[i]);
+ }
+ }
+ nodeSetTextContent.call(parent, "");
+ nodeAppendChild.call(parent, _anchor);
+ return;
+ }
+ let startIdx1 = 0;
+ let startIdx2 = 0;
+ let startVn1 = ch1[0];
+ let startVn2 = ch2[0];
+ let endIdx1 = ch1.length - 1;
+ let endIdx2 = ch2.length - 1;
+ let endVn1 = ch1[endIdx1];
+ let endVn2 = ch2[endIdx2];
+ let mapping = undefined;
+ while (startIdx1 <= endIdx1 && startIdx2 <= endIdx2) {
+ // -------------------------------------------------------------------
+ if (startVn1 === null) {
+ startVn1 = ch1[++startIdx1];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ if (endVn1 === null) {
+ endVn1 = ch1[--endIdx1];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ let startKey1 = startVn1.key;
+ let startKey2 = startVn2.key;
+ if (startKey1 === startKey2) {
+ cPatch.call(startVn1, startVn2, withBeforeRemove);
+ ch2[startIdx2] = startVn1;
+ startVn1 = ch1[++startIdx1];
+ startVn2 = ch2[++startIdx2];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ let endKey1 = endVn1.key;
+ let endKey2 = endVn2.key;
+ if (endKey1 === endKey2) {
+ cPatch.call(endVn1, endVn2, withBeforeRemove);
+ ch2[endIdx2] = endVn1;
+ endVn1 = ch1[--endIdx1];
+ endVn2 = ch2[--endIdx2];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ if (startKey1 === endKey2) {
+ // bnode moved right
+ cPatch.call(startVn1, endVn2, withBeforeRemove);
+ ch2[endIdx2] = startVn1;
+ const nextChild = ch2[endIdx2 + 1];
+ cMoveBefore.call(startVn1, nextChild, _anchor);
+ startVn1 = ch1[++startIdx1];
+ endVn2 = ch2[--endIdx2];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ if (endKey1 === startKey2) {
+ // bnode moved left
+ cPatch.call(endVn1, startVn2, withBeforeRemove);
+ ch2[startIdx2] = endVn1;
+ const nextChild = ch1[startIdx1];
+ cMoveBefore.call(endVn1, nextChild, _anchor);
+ endVn1 = ch1[--endIdx1];
+ startVn2 = ch2[++startIdx2];
+ continue;
+ }
+ // -------------------------------------------------------------------
+ mapping = mapping || createMapping(ch1, startIdx1, endIdx1);
+ let idxInOld = mapping[startKey2];
+ if (idxInOld === undefined) {
+ cMount.call(startVn2, parent, cFirstNode.call(startVn1) || null);
+ }
+ else {
+ const elmToMove = ch1[idxInOld];
+ cMoveBefore.call(elmToMove, startVn1, null);
+ cPatch.call(elmToMove, startVn2, withBeforeRemove);
+ ch2[startIdx2] = elmToMove;
+ ch1[idxInOld] = null;
+ }
+ startVn2 = ch2[++startIdx2];
+ }
+ // ---------------------------------------------------------------------
+ if (startIdx1 <= endIdx1 || startIdx2 <= endIdx2) {
+ if (startIdx1 > endIdx1) {
+ const nextChild = ch2[endIdx2 + 1];
+ const anchor = nextChild ? cFirstNode.call(nextChild) || null : _anchor;
+ for (let i = startIdx2; i <= endIdx2; i++) {
+ cMount.call(ch2[i], parent, anchor);
+ }
+ }
+ else {
+ for (let i = startIdx1; i <= endIdx1; i++) {
+ let ch = ch1[i];
+ if (ch) {
+ if (withBeforeRemove) {
+ beforeRemove.call(ch);
+ }
+ cRemove.call(ch);
+ }
+ }
+ }
+ }
+ }
+ beforeRemove() {
+ const children = this.children;
+ const l = children.length;
+ if (l) {
+ const beforeRemove = children[0].beforeRemove;
+ for (let i = 0; i < l; i++) {
+ beforeRemove.call(children[i]);
+ }
+ }
+ }
+ remove() {
+ const { parentEl, anchor } = this;
+ if (this.isOnlyChild) {
+ nodeSetTextContent.call(parentEl, "");
+ }
+ else {
+ const children = this.children;
+ const l = children.length;
+ if (l) {
+ const remove = children[0].remove;
+ for (let i = 0; i < l; i++) {
+ remove.call(children[i]);
+ }
+ }
+ nodeRemoveChild$1.call(parentEl, anchor);
+ }
+ }
+ firstNode() {
+ const child = this.children[0];
+ return child ? child.firstNode() : undefined;
+ }
+ toString() {
+ return this.children.map((c) => c.toString()).join("");
+ }
+ }
+ function list(children) {
+ return new VList(children);
+ }
+ function createMapping(ch1, startIdx1, endIdx2) {
+ let mapping = {};
+ for (let i = startIdx1; i <= endIdx2; i++) {
+ mapping[ch1[i].key] = i;
+ }
+ return mapping;
+ }
+
+ const nodeProto = Node.prototype;
+ const nodeInsertBefore = nodeProto.insertBefore;
+ const nodeRemoveChild = nodeProto.removeChild;
+ class VHtml {
+ constructor(html) {
+ this.content = [];
+ this.html = html;
+ }
+ mount(parent, afterNode) {
+ this.parentEl = parent;
+ const template = document.createElement("template");
+ template.innerHTML = this.html;
+ this.content = [...template.content.childNodes];
+ for (let elem of this.content) {
+ nodeInsertBefore.call(parent, elem, afterNode);
+ }
+ if (!this.content.length) {
+ const textNode = document.createTextNode("");
+ this.content.push(textNode);
+ nodeInsertBefore.call(parent, textNode, afterNode);
+ }
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ for (let elem of this.content) {
+ nodeInsertBefore.call(parent, elem, node);
+ }
+ }
+ moveBeforeVNode(other, afterNode) {
+ const target = other ? other.content[0] : afterNode;
+ this.moveBeforeDOMNode(target);
+ }
+ patch(other) {
+ if (this === other) {
+ return;
+ }
+ const html2 = other.html;
+ if (this.html !== html2) {
+ const parent = this.parentEl;
+ // insert new html in front of current
+ const afterNode = this.content[0];
+ const template = document.createElement("template");
+ template.innerHTML = html2;
+ const content = [...template.content.childNodes];
+ for (let elem of content) {
+ nodeInsertBefore.call(parent, elem, afterNode);
+ }
+ if (!content.length) {
+ const textNode = document.createTextNode("");
+ content.push(textNode);
+ nodeInsertBefore.call(parent, textNode, afterNode);
+ }
+ // remove current content
+ this.remove();
+ this.content = content;
+ this.html = other.html;
+ }
+ }
+ beforeRemove() { }
+ remove() {
+ const parent = this.parentEl;
+ for (let elem of this.content) {
+ nodeRemoveChild.call(parent, elem);
+ }
+ }
+ firstNode() {
+ return this.content[0];
+ }
+ toString() {
+ return this.html;
+ }
+ }
+ function html(str) {
+ return new VHtml(str);
+ }
+
+ function createCatcher(eventsSpec) {
+ const n = Object.keys(eventsSpec).length;
+ class VCatcher {
+ constructor(child, handlers) {
+ this.handlerFns = [];
+ this.afterNode = null;
+ this.child = child;
+ this.handlerData = handlers;
+ }
+ mount(parent, afterNode) {
+ this.parentEl = parent;
+ this.child.mount(parent, afterNode);
+ this.afterNode = document.createTextNode("");
+ parent.insertBefore(this.afterNode, afterNode);
+ this.wrapHandlerData();
+ for (let name in eventsSpec) {
+ const index = eventsSpec[name];
+ const handler = createEventHandler(name);
+ this.handlerFns[index] = handler;
+ handler.setup.call(parent, this.handlerData[index]);
+ }
+ }
+ wrapHandlerData() {
+ for (let i = 0; i < n; i++) {
+ let handler = this.handlerData[i];
+ // handler = [...mods, fn, comp], so we need to replace second to last elem
+ let idx = handler.length - 2;
+ let origFn = handler[idx];
+ const self = this;
+ handler[idx] = function (ev) {
+ const target = ev.target;
+ let currentNode = self.child.firstNode();
+ const afterNode = self.afterNode;
+ while (currentNode && currentNode !== afterNode) {
+ if (currentNode.contains(target)) {
+ return origFn.call(this, ev);
+ }
+ currentNode = currentNode.nextSibling;
+ }
+ };
+ }
+ }
+ moveBeforeDOMNode(node, parent = this.parentEl) {
+ this.parentEl = parent;
+ this.child.moveBeforeDOMNode(node, parent);
+ parent.insertBefore(this.afterNode, node);
+ }
+ moveBeforeVNode(other, afterNode) {
+ if (other) {
+ // check this with @ged-odoo for use in foreach
+ afterNode = other.firstNode() || afterNode;
+ }
+ this.child.moveBeforeVNode(other ? other.child : null, afterNode);
+ this.parentEl.insertBefore(this.afterNode, afterNode);
+ }
+ patch(other, withBeforeRemove) {
+ if (this === other) {
+ return;
+ }
+ this.handlerData = other.handlerData;
+ this.wrapHandlerData();
+ for (let i = 0; i < n; i++) {
+ this.handlerFns[i].update.call(this.parentEl, this.handlerData[i]);
+ }
+ this.child.patch(other.child, withBeforeRemove);
+ }
+ beforeRemove() {
+ this.child.beforeRemove();
+ }
+ remove() {
+ for (let i = 0; i < n; i++) {
+ this.handlerFns[i].remove.call(this.parentEl);
+ }
+ this.child.remove();
+ this.afterNode.remove();
+ }
+ firstNode() {
+ return this.child.firstNode();
+ }
+ toString() {
+ return this.child.toString();
+ }
+ }
+ return function (child, handlers) {
+ return new VCatcher(child, handlers);
+ };
+ }
+
+ function mount$1(vnode, fixture, afterNode = null) {
+ vnode.mount(fixture, afterNode);
+ }
+ function patch(vnode1, vnode2, withBeforeRemove = false) {
+ vnode1.patch(vnode2, withBeforeRemove);
+ }
+ function remove(vnode, withBeforeRemove = false) {
+ if (withBeforeRemove) {
+ vnode.beforeRemove();
+ }
+ vnode.remove();
+ }
+
+ // Maps fibers to thrown errors
+ const fibersInError = new WeakMap();
+ const nodeErrorHandlers = new WeakMap();
+ function _handleError(node, error) {
+ if (!node) {
+ return false;
+ }
+ const fiber = node.fiber;
+ if (fiber) {
+ fibersInError.set(fiber, error);
+ }
+ const errorHandlers = nodeErrorHandlers.get(node);
+ if (errorHandlers) {
+ let handled = false;
+ // execute in the opposite order
+ for (let i = errorHandlers.length - 1; i >= 0; i--) {
+ try {
+ errorHandlers[i](error);
+ handled = true;
+ break;
+ }
+ catch (e) {
+ error = e;
+ }
+ }
+ if (handled) {
+ return true;
+ }
+ }
+ return _handleError(node.parent, error);
+ }
+ function handleError(params) {
+ let { error } = params;
+ // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
+ if (!(error instanceof OwlError)) {
+ error = Object.assign(new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`), { cause: error });
+ }
+ const node = "node" in params ? params.node : params.fiber.node;
+ const fiber = "fiber" in params ? params.fiber : node.fiber;
+ if (fiber) {
+ // resets the fibers on components if possible. This is important so that
+ // new renderings can be properly included in the initial one, if any.
+ let current = fiber;
+ do {
+ current.node.fiber = current;
+ fibersInError.set(current, error);
+ current = current.parent;
+ } while (current);
+ fibersInError.set(fiber.root, error);
+ }
+ const handled = _handleError(node, error);
+ if (!handled) {
+ console.warn(`[Owl] Unhandled error. Destroying the root component`);
+ try {
+ node.app.destroy();
+ }
+ catch (e) {
+ console.error(e);
+ }
+ throw error;
+ }
+ }
+
+ function makeChildFiber(node, parent) {
+ let current = node.fiber;
+ if (current) {
+ cancelFibers(current.children);
+ current.root = null;
+ }
+ return new Fiber(node, parent);
+ }
+ function makeRootFiber(node) {
+ let current = node.fiber;
+ if (current) {
+ let root = current.root;
+ // lock root fiber because canceling children fibers may destroy components,
+ // which means any arbitrary code can be run in onWillDestroy, which may
+ // trigger new renderings
+ root.locked = true;
+ root.setCounter(root.counter + 1 - cancelFibers(current.children));
+ root.locked = false;
+ current.children = [];
+ current.childrenMap = {};
+ current.bdom = null;
+ if (fibersInError.has(current)) {
+ fibersInError.delete(current);
+ fibersInError.delete(root);
+ current.appliedToDom = false;
+ if (current instanceof RootFiber) {
+ // it is possible that this fiber is a fiber that crashed while being
+ // mounted, so the mounted list is possibly corrupted. We restore it to
+ // its normal initial state (which is empty list or a list with a mount
+ // fiber.
+ current.mounted = current instanceof MountFiber ? [current] : [];
+ }
+ }
+ return current;
+ }
+ const fiber = new RootFiber(node, null);
+ if (node.willPatch.length) {
+ fiber.willPatch.push(fiber);
+ }
+ if (node.patched.length) {
+ fiber.patched.push(fiber);
+ }
+ return fiber;
+ }
+ function throwOnRender() {
+ throw new OwlError("Attempted to render cancelled fiber");
+ }
+ /**
+ * @returns number of not-yet rendered fibers cancelled
+ */
+ function cancelFibers(fibers) {
+ let result = 0;
+ for (let fiber of fibers) {
+ let node = fiber.node;
+ fiber.render = throwOnRender;
+ if (node.status === 0 /* NEW */) {
+ node.cancel();
+ }
+ node.fiber = null;
+ if (fiber.bdom) {
+ // if fiber has been rendered, this means that the component props have
+ // been updated. however, this fiber will not be patched to the dom, so
+ // it could happen that the next render compare the current props with
+ // the same props, and skip the render completely. With the next line,
+ // we kindly request the component code to force a render, so it works as
+ // expected.
+ node.forceNextRender = true;
+ }
+ else {
+ result++;
+ }
+ result += cancelFibers(fiber.children);
+ }
+ return result;
+ }
+ class Fiber {
+ constructor(node, parent) {
+ this.bdom = null;
+ this.children = [];
+ this.appliedToDom = false;
+ this.deep = false;
+ this.childrenMap = {};
+ this.node = node;
+ this.parent = parent;
+ if (parent) {
+ this.deep = parent.deep;
+ const root = parent.root;
+ root.setCounter(root.counter + 1);
+ this.root = root;
+ parent.children.push(this);
+ }
+ else {
+ this.root = this;
+ }
+ }
+ render() {
+ // if some parent has a fiber => register in followup
+ let prev = this.root.node;
+ let scheduler = prev.app.scheduler;
+ let current = prev.parent;
+ while (current) {
+ if (current.fiber) {
+ let root = current.fiber.root;
+ if (root.counter === 0 && prev.parentKey in current.fiber.childrenMap) {
+ current = root.node;
+ }
+ else {
+ scheduler.delayedRenders.push(this);
+ return;
+ }
+ }
+ prev = current;
+ current = current.parent;
+ }
+ // there are no current rendering from above => we can render
+ this._render();
+ }
+ _render() {
+ const node = this.node;
+ const root = this.root;
+ if (root) {
+ try {
+ this.bdom = true;
+ this.bdom = node.renderFn();
+ }
+ catch (e) {
+ node.app.handleError({ node, error: e });
+ }
+ root.setCounter(root.counter - 1);
+ }
+ }
+ }
+ class RootFiber extends Fiber {
+ constructor() {
+ super(...arguments);
+ this.counter = 1;
+ // only add stuff in this if they have registered some hooks
+ this.willPatch = [];
+ this.patched = [];
+ this.mounted = [];
+ // A fiber is typically locked when it is completing and the patch has not, or is being applied.
+ // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
+ this.locked = false;
+ }
+ complete() {
+ const node = this.node;
+ this.locked = true;
+ let current = undefined;
+ let mountedFibers = this.mounted;
+ try {
+ // Step 1: calling all willPatch lifecycle hooks
+ for (current of this.willPatch) {
+ // because of the asynchronous nature of the rendering, some parts of the
+ // UI may have been rendered, then deleted in a followup rendering, and we
+ // do not want to call onWillPatch in that case.
+ let node = current.node;
+ if (node.fiber === current) {
+ const component = node.component;
+ for (let cb of node.willPatch) {
+ cb.call(component);
+ }
+ }
+ }
+ current = undefined;
+ // Step 2: patching the dom
+ node._patch();
+ this.locked = false;
+ // Step 4: calling all mounted lifecycle hooks
+ while ((current = mountedFibers.pop())) {
+ current = current;
+ if (current.appliedToDom) {
+ for (let cb of current.node.mounted) {
+ cb();
+ }
+ }
+ }
+ // Step 5: calling all patched hooks
+ let patchedFibers = this.patched;
+ while ((current = patchedFibers.pop())) {
+ current = current;
+ if (current.appliedToDom) {
+ for (let cb of current.node.patched) {
+ cb();
+ }
+ }
+ }
+ }
+ catch (e) {
+ // if mountedFibers is not empty, this means that a crash occured while
+ // calling the mounted hooks of some component. So, there may still be
+ // some component that have been mounted, but for which the mounted hooks
+ // have not been called. Here, we remove the willUnmount hooks for these
+ // specific component to prevent a worse situation (willUnmount being
+ // called even though mounted has not been called)
+ for (let fiber of mountedFibers) {
+ fiber.node.willUnmount = [];
+ }
+ this.locked = false;
+ node.app.handleError({ fiber: current || this, error: e });
+ }
+ }
+ setCounter(newValue) {
+ this.counter = newValue;
+ if (newValue === 0) {
+ this.node.app.scheduler.flush();
+ }
+ }
+ }
+ class MountFiber extends RootFiber {
+ constructor(node, target, options = {}) {
+ super(node, null);
+ this.target = target;
+ this.position = options.position || "last-child";
+ }
+ complete() {
+ let current = this;
+ try {
+ const node = this.node;
+ node.children = this.childrenMap;
+ node.app.constructor.validateTarget(this.target);
+ if (node.bdom) {
+ // this is a complicated situation: if we mount a fiber with an existing
+ // bdom, this means that this same fiber was already completed, mounted,
+ // but a crash occurred in some mounted hook. Then, it was handled and
+ // the new rendering is being applied.
+ node.updateDom();
+ }
+ else {
+ node.bdom = this.bdom;
+ if (this.position === "last-child" || this.target.childNodes.length === 0) {
+ mount$1(node.bdom, this.target);
+ }
+ else {
+ const firstChild = this.target.childNodes[0];
+ mount$1(node.bdom, this.target, firstChild);
+ }
+ }
+ // unregistering the fiber before mounted since it can do another render
+ // and that the current rendering is obviously completed
+ node.fiber = null;
+ node.status = 1 /* MOUNTED */;
+ this.appliedToDom = true;
+ let mountedFibers = this.mounted;
+ while ((current = mountedFibers.pop())) {
+ if (current.appliedToDom) {
+ for (let cb of current.node.mounted) {
+ cb();
+ }
+ }
+ }
+ }
+ catch (e) {
+ this.node.app.handleError({ fiber: current, error: e });
+ }
+ }
+ }
+
+ // Special key to subscribe to, to be notified of key creation/deletion
+ const KEYCHANGES = Symbol("Key changes");
+ // Used to specify the absence of a callback, can be used as WeakMap key but
+ // should only be used as a sentinel value and never called.
+ const NO_CALLBACK = () => {
+ throw new Error("Called NO_CALLBACK. Owl is broken, please report this to the maintainers.");
+ };
+ const objectToString = Object.prototype.toString;
+ const objectHasOwnProperty = Object.prototype.hasOwnProperty;
+ // Use arrays because Array.includes is faster than Set.has for small arrays
+ const SUPPORTED_RAW_TYPES = ["Object", "Array", "Set", "Map", "WeakMap"];
+ const COLLECTION_RAW_TYPES = ["Set", "Map", "WeakMap"];
+ /**
+ * extract "RawType" from strings like "[object RawType]" => this lets us ignore
+ * many native objects such as Promise (whose toString is [object Promise])
+ * or Date ([object Date]), while also supporting collections without using
+ * instanceof in a loop
+ *
+ * @param obj the object to check
+ * @returns the raw type of the object
+ */
+ function rawType(obj) {
+ return objectToString.call(toRaw(obj)).slice(8, -1);
+ }
+ /**
+ * Checks whether a given value can be made into a reactive object.
+ *
+ * @param value the value to check
+ * @returns whether the value can be made reactive
+ */
+ function canBeMadeReactive(value) {
+ if (typeof value !== "object") {
+ return false;
+ }
+ return SUPPORTED_RAW_TYPES.includes(rawType(value));
+ }
+ /**
+ * Creates a reactive from the given object/callback if possible and returns it,
+ * returns the original object otherwise.
+ *
+ * @param value the value make reactive
+ * @returns a reactive for the given object when possible, the original otherwise
+ */
+ function possiblyReactive(val, cb) {
+ return canBeMadeReactive(val) ? reactive(val, cb) : val;
+ }
+ const skipped = new WeakSet();
+ /**
+ * Mark an object or array so that it is ignored by the reactivity system
+ *
+ * @param value the value to mark
+ * @returns the object itself
+ */
+ function markRaw(value) {
+ skipped.add(value);
+ return value;
+ }
+ /**
+ * Given a reactive objet, return the raw (non reactive) underlying object
+ *
+ * @param value a reactive value
+ * @returns the underlying value
+ */
+ function toRaw(value) {
+ return targets.has(value) ? targets.get(value) : value;
+ }
+ const targetToKeysToCallbacks = new WeakMap();
+ /**
+ * Observes a given key on a target with an callback. The callback will be
+ * called when the given key changes on the target.
+ *
+ * @param target the target whose key should be observed
+ * @param key the key to observe (or Symbol(KEYCHANGES) for key creation
+ * or deletion)
+ * @param callback the function to call when the key changes
+ */
+ function observeTargetKey(target, key, callback) {
+ if (callback === NO_CALLBACK) {
+ return;
+ }
+ if (!targetToKeysToCallbacks.get(target)) {
+ targetToKeysToCallbacks.set(target, new Map());
+ }
+ const keyToCallbacks = targetToKeysToCallbacks.get(target);
+ if (!keyToCallbacks.get(key)) {
+ keyToCallbacks.set(key, new Set());
+ }
+ keyToCallbacks.get(key).add(callback);
+ if (!callbacksToTargets.has(callback)) {
+ callbacksToTargets.set(callback, new Set());
+ }
+ callbacksToTargets.get(callback).add(target);
+ }
+ /**
+ * Notify Reactives that are observing a given target that a key has changed on
+ * the target.
+ *
+ * @param target target whose Reactives should be notified that the target was
+ * changed.
+ * @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
+ * or deleted)
+ */
+ function notifyReactives(target, key) {
+ const keyToCallbacks = targetToKeysToCallbacks.get(target);
+ if (!keyToCallbacks) {
+ return;
+ }
+ const callbacks = keyToCallbacks.get(key);
+ if (!callbacks) {
+ return;
+ }
+ // Loop on copy because clearReactivesForCallback will modify the set in place
+ for (const callback of [...callbacks]) {
+ clearReactivesForCallback(callback);
+ callback();
+ }
+ }
+ const callbacksToTargets = new WeakMap();
+ /**
+ * Clears all subscriptions of the Reactives associated with a given callback.
+ *
+ * @param callback the callback for which the reactives need to be cleared
+ */
+ function clearReactivesForCallback(callback) {
+ const targetsToClear = callbacksToTargets.get(callback);
+ if (!targetsToClear) {
+ return;
+ }
+ for (const target of targetsToClear) {
+ const observedKeys = targetToKeysToCallbacks.get(target);
+ if (!observedKeys) {
+ continue;
+ }
+ for (const [key, callbacks] of observedKeys.entries()) {
+ callbacks.delete(callback);
+ if (!callbacks.size) {
+ observedKeys.delete(key);
+ }
+ }
+ }
+ targetsToClear.clear();
+ }
+ function getSubscriptions(callback) {
+ const targets = callbacksToTargets.get(callback) || [];
+ return [...targets].map((target) => {
+ const keysToCallbacks = targetToKeysToCallbacks.get(target);
+ let keys = [];
+ if (keysToCallbacks) {
+ for (const [key, cbs] of keysToCallbacks) {
+ if (cbs.has(callback)) {
+ keys.push(key);
+ }
+ }
+ }
+ return { target, keys };
+ });
+ }
+ // Maps reactive objects to the underlying target
+ const targets = new WeakMap();
+ const reactiveCache = new WeakMap();
+ /**
+ * Creates a reactive proxy for an object. Reading data on the reactive object
+ * subscribes to changes to the data. Writing data on the object will cause the
+ * notify callback to be called if there are suscriptions to that data. Nested
+ * objects and arrays are automatically made reactive as well.
+ *
+ * Whenever you are notified of a change, all subscriptions are cleared, and if
+ * you would like to be notified of any further changes, you should go read
+ * the underlying data again. We assume that if you don't go read it again after
+ * being notified, it means that you are no longer interested in that data.
+ *
+ * Subscriptions:
+ * + Reading a property on an object will subscribe you to changes in the value
+ * of that property.
+ * + Accessing an object's keys (eg with Object.keys or with `for..in`) will
+ * subscribe you to the creation/deletion of keys. Checking the presence of a
+ * key on the object with 'in' has the same effect.
+ * - getOwnPropertyDescriptor does not currently subscribe you to the property.
+ * This is a choice that was made because changing a key's value will trigger
+ * this trap and we do not want to subscribe by writes. This also means that
+ * Object.hasOwnProperty doesn't subscribe as it goes through this trap.
+ *
+ * @param target the object for which to create a reactive proxy
+ * @param callback the function to call when an observed property of the
+ * reactive has changed
+ * @returns a proxy that tracks changes to it
+ */
+ function reactive(target, callback = NO_CALLBACK) {
+ if (!canBeMadeReactive(target)) {
+ throw new OwlError(`Cannot make the given value reactive`);
+ }
+ if (skipped.has(target)) {
+ return target;
+ }
+ if (targets.has(target)) {
+ // target is reactive, create a reactive on the underlying object instead
+ return reactive(targets.get(target), callback);
+ }
+ if (!reactiveCache.has(target)) {
+ reactiveCache.set(target, new WeakMap());
+ }
+ const reactivesForTarget = reactiveCache.get(target);
+ if (!reactivesForTarget.has(callback)) {
+ const targetRawType = rawType(target);
+ const handler = COLLECTION_RAW_TYPES.includes(targetRawType)
+ ? collectionsProxyHandler(target, callback, targetRawType)
+ : basicProxyHandler(callback);
+ const proxy = new Proxy(target, handler);
+ reactivesForTarget.set(callback, proxy);
+ targets.set(proxy, target);
+ }
+ return reactivesForTarget.get(callback);
+ }
+ /**
+ * Creates a basic proxy handler for regular objects and arrays.
+ *
+ * @param callback @see reactive
+ * @returns a proxy handler object
+ */
+ function basicProxyHandler(callback) {
+ return {
+ get(target, key, receiver) {
+ // non-writable non-configurable properties cannot be made reactive
+ const desc = Object.getOwnPropertyDescriptor(target, key);
+ if (desc && !desc.writable && !desc.configurable) {
+ return Reflect.get(target, key, receiver);
+ }
+ observeTargetKey(target, key, callback);
+ return possiblyReactive(Reflect.get(target, key, receiver), callback);
+ },
+ set(target, key, value, receiver) {
+ const hadKey = objectHasOwnProperty.call(target, key);
+ const originalValue = Reflect.get(target, key, receiver);
+ const ret = Reflect.set(target, key, toRaw(value), receiver);
+ if (!hadKey && objectHasOwnProperty.call(target, key)) {
+ notifyReactives(target, KEYCHANGES);
+ }
+ // While Array length may trigger the set trap, it's not actually set by this
+ // method but is updated behind the scenes, and the trap is not called with the
+ // new value. We disable the "same-value-optimization" for it because of that.
+ if (originalValue !== Reflect.get(target, key, receiver) ||
+ (key === "length" && Array.isArray(target))) {
+ notifyReactives(target, key);
+ }
+ return ret;
+ },
+ deleteProperty(target, key) {
+ const ret = Reflect.deleteProperty(target, key);
+ // TODO: only notify when something was actually deleted
+ notifyReactives(target, KEYCHANGES);
+ notifyReactives(target, key);
+ return ret;
+ },
+ ownKeys(target) {
+ observeTargetKey(target, KEYCHANGES, callback);
+ return Reflect.ownKeys(target);
+ },
+ has(target, key) {
+ // TODO: this observes all key changes instead of only the presence of the argument key
+ // observing the key itself would observe value changes instead of presence changes
+ // so we may need a finer grained system to distinguish observing value vs presence.
+ observeTargetKey(target, KEYCHANGES, callback);
+ return Reflect.has(target, key);
+ },
+ };
+ }
+ /**
+ * Creates a function that will observe the key that is passed to it when called
+ * and delegates to the underlying method.
+ *
+ * @param methodName name of the method to delegate to
+ * @param target @see reactive
+ * @param callback @see reactive
+ */
+ function makeKeyObserver(methodName, target, callback) {
+ return (key) => {
+ key = toRaw(key);
+ observeTargetKey(target, key, callback);
+ return possiblyReactive(target[methodName](key), callback);
+ };
+ }
+ /**
+ * Creates an iterable that will delegate to the underlying iteration method and
+ * observe keys as necessary.
+ *
+ * @param methodName name of the method to delegate to
+ * @param target @see reactive
+ * @param callback @see reactive
+ */
+ function makeIteratorObserver(methodName, target, callback) {
+ return function* () {
+ observeTargetKey(target, KEYCHANGES, callback);
+ const keys = target.keys();
+ for (const item of target[methodName]()) {
+ const key = keys.next().value;
+ observeTargetKey(target, key, callback);
+ yield possiblyReactive(item, callback);
+ }
+ };
+ }
+ /**
+ * Creates a forEach function that will delegate to forEach on the underlying
+ * collection while observing key changes, and keys as they're iterated over,
+ * and making the passed keys/values reactive.
+ *
+ * @param target @see reactive
+ * @param callback @see reactive
+ */
+ function makeForEachObserver(target, callback) {
+ return function forEach(forEachCb, thisArg) {
+ observeTargetKey(target, KEYCHANGES, callback);
+ target.forEach(function (val, key, targetObj) {
+ observeTargetKey(target, key, callback);
+ forEachCb.call(thisArg, possiblyReactive(val, callback), possiblyReactive(key, callback), possiblyReactive(targetObj, callback));
+ }, thisArg);
+ };
+ }
+ /**
+ * Creates a function that will delegate to an underlying method, and check if
+ * that method has modified the presence or value of a key, and notify the
+ * reactives appropriately.
+ *
+ * @param setterName name of the method to delegate to
+ * @param getterName name of the method which should be used to retrieve the
+ * value before calling the delegate method for comparison purposes
+ * @param target @see reactive
+ */
+ function delegateAndNotify(setterName, getterName, target) {
+ return (key, value) => {
+ key = toRaw(key);
+ const hadKey = target.has(key);
+ const originalValue = target[getterName](key);
+ const ret = target[setterName](key, value);
+ const hasKey = target.has(key);
+ if (hadKey !== hasKey) {
+ notifyReactives(target, KEYCHANGES);
+ }
+ if (originalValue !== target[getterName](key)) {
+ notifyReactives(target, key);
+ }
+ return ret;
+ };
+ }
+ /**
+ * Creates a function that will clear the underlying collection and notify that
+ * the keys of the collection have changed.
+ *
+ * @param target @see reactive
+ */
+ function makeClearNotifier(target) {
+ return () => {
+ const allKeys = [...target.keys()];
+ target.clear();
+ notifyReactives(target, KEYCHANGES);
+ for (const key of allKeys) {
+ notifyReactives(target, key);
+ }
+ };
+ }
+ /**
+ * Maps raw type of an object to an object containing functions that can be used
+ * to build an appropritate proxy handler for that raw type. Eg: when making a
+ * reactive set, calling the has method should mark the key that is being
+ * retrieved as observed, and calling the add or delete method should notify the
+ * reactives that the key which is being added or deleted has been modified.
+ */
+ const rawTypeToFuncHandlers = {
+ Set: (target, callback) => ({
+ has: makeKeyObserver("has", target, callback),
+ add: delegateAndNotify("add", "has", target),
+ delete: delegateAndNotify("delete", "has", target),
+ keys: makeIteratorObserver("keys", target, callback),
+ values: makeIteratorObserver("values", target, callback),
+ entries: makeIteratorObserver("entries", target, callback),
+ [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
+ forEach: makeForEachObserver(target, callback),
+ clear: makeClearNotifier(target),
+ get size() {
+ observeTargetKey(target, KEYCHANGES, callback);
+ return target.size;
+ },
+ }),
+ Map: (target, callback) => ({
+ has: makeKeyObserver("has", target, callback),
+ get: makeKeyObserver("get", target, callback),
+ set: delegateAndNotify("set", "get", target),
+ delete: delegateAndNotify("delete", "has", target),
+ keys: makeIteratorObserver("keys", target, callback),
+ values: makeIteratorObserver("values", target, callback),
+ entries: makeIteratorObserver("entries", target, callback),
+ [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
+ forEach: makeForEachObserver(target, callback),
+ clear: makeClearNotifier(target),
+ get size() {
+ observeTargetKey(target, KEYCHANGES, callback);
+ return target.size;
+ },
+ }),
+ WeakMap: (target, callback) => ({
+ has: makeKeyObserver("has", target, callback),
+ get: makeKeyObserver("get", target, callback),
+ set: delegateAndNotify("set", "get", target),
+ delete: delegateAndNotify("delete", "has", target),
+ }),
+ };
+ /**
+ * Creates a proxy handler for collections (Set/Map/WeakMap)
+ *
+ * @param callback @see reactive
+ * @param target @see reactive
+ * @returns a proxy handler object
+ */
+ function collectionsProxyHandler(target, callback, targetRawType) {
+ // TODO: if performance is an issue we can create the special handlers lazily when each
+ // property is read.
+ const specialHandlers = rawTypeToFuncHandlers[targetRawType](target, callback);
+ return Object.assign(basicProxyHandler(callback), {
+ // FIXME: probably broken when part of prototype chain since we ignore the receiver
+ get(target, key) {
+ if (objectHasOwnProperty.call(specialHandlers, key)) {
+ return specialHandlers[key];
+ }
+ observeTargetKey(target, key, callback);
+ return possiblyReactive(target[key], callback);
+ },
+ });
+ }
+
+ let currentNode = null;
+ function saveCurrent() {
+ let n = currentNode;
+ return () => {
+ currentNode = n;
+ };
+ }
+ function getCurrent() {
+ if (!currentNode) {
+ throw new OwlError("No active component (a hook function should only be called in 'setup')");
+ }
+ return currentNode;
+ }
+ function useComponent() {
+ return currentNode.component;
+ }
+ /**
+ * Apply default props (only top level).
+ */
+ function applyDefaultProps(props, defaultProps) {
+ for (let propName in defaultProps) {
+ if (props[propName] === undefined) {
+ props[propName] = defaultProps[propName];
+ }
+ }
+ }
+ // -----------------------------------------------------------------------------
+ // Integration with reactivity system (useState)
+ // -----------------------------------------------------------------------------
+ const batchedRenderFunctions = new WeakMap();
+ /**
+ * Creates a reactive object that will be observed by the current component.
+ * Reading data from the returned object (eg during rendering) will cause the
+ * component to subscribe to that data and be rerendered when it changes.
+ *
+ * @param state the state to observe
+ * @returns a reactive object that will cause the component to re-render on
+ * relevant changes
+ * @see reactive
+ */
+ function useState(state) {
+ const node = getCurrent();
+ let render = batchedRenderFunctions.get(node);
+ if (!render) {
+ const wrapper = { fn: batched(node.render.bind(node, false)) };
+ render = (...args) => wrapper.fn(...args);
+ batchedRenderFunctions.set(node, render);
+ // manual implementation of onWillDestroy to break cyclic dependency
+ node.willDestroy.push(cleanupRenderAndReactives.bind(null, wrapper, render));
+ }
+ return reactive(state, render);
+ }
+ const NO_OP = () => { };
+ function cleanupRenderAndReactives(wrapper, render) {
+ wrapper.fn = NO_OP;
+ clearReactivesForCallback(render);
+ }
+ class ComponentNode {
+ constructor(C, props, app, parent, parentKey) {
+ this.fiber = null;
+ this.bdom = null;
+ this.status = 0 /* NEW */;
+ this.forceNextRender = false;
+ this.nextProps = null;
+ this.children = Object.create(null);
+ this.refs = {};
+ this.willStart = [];
+ this.willUpdateProps = [];
+ this.willUnmount = [];
+ this.mounted = [];
+ this.willPatch = [];
+ this.patched = [];
+ this.willDestroy = [];
+ currentNode = this;
+ this.app = app;
+ this.parent = parent;
+ this.props = props;
+ this.parentKey = parentKey;
+ const defaultProps = C.defaultProps;
+ props = Object.assign({}, props);
+ if (defaultProps) {
+ applyDefaultProps(props, defaultProps);
+ }
+ const env = (parent && parent.childEnv) || app.env;
+ this.childEnv = env;
+ for (const key in props) {
+ const prop = props[key];
+ if (prop && typeof prop === "object" && targets.has(prop)) {
+ props[key] = useState(prop);
+ }
+ }
+ this.component = new C(props, env, this);
+ const ctx = Object.assign(Object.create(this.component), { this: this.component });
+ this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
+ this.component.setup();
+ currentNode = null;
+ }
+ mountComponent(target, options) {
+ const fiber = new MountFiber(this, target, options);
+ this.app.scheduler.addFiber(fiber);
+ this.initiateRender(fiber);
+ }
+ async initiateRender(fiber) {
+ this.fiber = fiber;
+ if (this.mounted.length) {
+ fiber.root.mounted.push(fiber);
+ }
+ const component = this.component;
+ try {
+ await Promise.all(this.willStart.map((f) => f.call(component)));
+ }
+ catch (e) {
+ this.app.handleError({ node: this, error: e });
+ return;
+ }
+ if (this.status === 0 /* NEW */ && this.fiber === fiber) {
+ fiber.render();
+ }
+ }
+ async render(deep) {
+ if (this.status >= 2 /* CANCELLED */) {
+ return;
+ }
+ let current = this.fiber;
+ if (current && (current.root.locked || current.bdom === true)) {
+ await Promise.resolve();
+ // situation may have changed after the microtask tick
+ current = this.fiber;
+ }
+ if (current) {
+ if (!current.bdom && !fibersInError.has(current)) {
+ if (deep) {
+ // we want the render from this point on to be with deep=true
+ current.deep = deep;
+ }
+ return;
+ }
+ // if current rendering was with deep=true, we want this one to be the same
+ deep = deep || current.deep;
+ }
+ else if (!this.bdom) {
+ return;
+ }
+ const fiber = makeRootFiber(this);
+ fiber.deep = deep;
+ this.fiber = fiber;
+ this.app.scheduler.addFiber(fiber);
+ await Promise.resolve();
+ if (this.status >= 2 /* CANCELLED */) {
+ return;
+ }
+ // We only want to actually render the component if the following two
+ // conditions are true:
+ // * this.fiber: it could be null, in which case the render has been cancelled
+ // * (current || !fiber.parent): if current is not null, this means that the
+ // render function was called when a render was already occurring. In this
+ // case, the pending rendering was cancelled, and the fiber needs to be
+ // rendered to complete the work. If current is null, we check that the
+ // fiber has no parent. If that is the case, the fiber was downgraded from
+ // a root fiber to a child fiber in the previous microtick, because it was
+ // embedded in a rendering coming from above, so the fiber will be rendered
+ // in the next microtick anyway, so we should not render it again.
+ if (this.fiber === fiber && (current || !fiber.parent)) {
+ fiber.render();
+ }
+ }
+ cancel() {
+ this._cancel();
+ delete this.parent.children[this.parentKey];
+ this.app.scheduler.scheduleDestroy(this);
+ }
+ _cancel() {
+ this.status = 2 /* CANCELLED */;
+ const children = this.children;
+ for (let childKey in children) {
+ children[childKey]._cancel();
+ }
+ }
+ destroy() {
+ let shouldRemove = this.status === 1 /* MOUNTED */;
+ this._destroy();
+ if (shouldRemove) {
+ this.bdom.remove();
+ }
+ }
+ _destroy() {
+ const component = this.component;
+ if (this.status === 1 /* MOUNTED */) {
+ for (let cb of this.willUnmount) {
+ cb.call(component);
+ }
+ }
+ for (let child of Object.values(this.children)) {
+ child._destroy();
+ }
+ if (this.willDestroy.length) {
+ try {
+ for (let cb of this.willDestroy) {
+ cb.call(component);
+ }
+ }
+ catch (e) {
+ this.app.handleError({ error: e, node: this });
+ }
+ }
+ this.status = 3 /* DESTROYED */;
+ }
+ async updateAndRender(props, parentFiber) {
+ this.nextProps = props;
+ props = Object.assign({}, props);
+ // update
+ const fiber = makeChildFiber(this, parentFiber);
+ this.fiber = fiber;
+ const component = this.component;
+ const defaultProps = component.constructor.defaultProps;
+ if (defaultProps) {
+ applyDefaultProps(props, defaultProps);
+ }
+ currentNode = this;
+ for (const key in props) {
+ const prop = props[key];
+ if (prop && typeof prop === "object" && targets.has(prop)) {
+ props[key] = useState(prop);
+ }
+ }
+ currentNode = null;
+ const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+ await prom;
+ if (fiber !== this.fiber) {
+ return;
+ }
+ component.props = props;
+ fiber.render();
+ const parentRoot = parentFiber.root;
+ if (this.willPatch.length) {
+ parentRoot.willPatch.push(fiber);
+ }
+ if (this.patched.length) {
+ parentRoot.patched.push(fiber);
+ }
+ }
+ /**
+ * Finds a child that has dom that is not yet updated, and update it. This
+ * method is meant to be used only in the context of repatching the dom after
+ * a mounted hook failed and was handled.
+ */
+ updateDom() {
+ if (!this.fiber) {
+ return;
+ }
+ if (this.bdom === this.fiber.bdom) {
+ // If the error was handled by some child component, we need to find it to
+ // apply its change
+ for (let k in this.children) {
+ const child = this.children[k];
+ child.updateDom();
+ }
+ }
+ else {
+ // if we get here, this is the component that handled the error and rerendered
+ // itself, so we can simply patch the dom
+ this.bdom.patch(this.fiber.bdom, false);
+ this.fiber.appliedToDom = true;
+ this.fiber = null;
+ }
+ }
+ /**
+ * Sets a ref to a given HTMLElement.
+ *
+ * @param name the name of the ref to set
+ * @param el the HTMLElement to set the ref to. The ref is not set if the el
+ * is null, but useRef will not return elements that are not in the DOM
+ */
+ setRef(name, el) {
+ if (el) {
+ this.refs[name] = el;
+ }
+ }
+ // ---------------------------------------------------------------------------
+ // Block DOM methods
+ // ---------------------------------------------------------------------------
+ firstNode() {
+ const bdom = this.bdom;
+ return bdom ? bdom.firstNode() : undefined;
+ }
+ mount(parent, anchor) {
+ const bdom = this.fiber.bdom;
+ this.bdom = bdom;
+ bdom.mount(parent, anchor);
+ this.status = 1 /* MOUNTED */;
+ this.fiber.appliedToDom = true;
+ this.children = this.fiber.childrenMap;
+ this.fiber = null;
+ }
+ moveBeforeDOMNode(node, parent) {
+ this.bdom.moveBeforeDOMNode(node, parent);
+ }
+ moveBeforeVNode(other, afterNode) {
+ this.bdom.moveBeforeVNode(other ? other.bdom : null, afterNode);
+ }
+ patch() {
+ if (this.fiber && this.fiber.parent) {
+ // we only patch here renderings coming from above. renderings initiated
+ // by the component will be patched independently in the appropriate
+ // fiber.complete
+ this._patch();
+ this.props = this.nextProps;
+ }
+ }
+ _patch() {
+ let hasChildren = false;
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ for (let _k in this.children) {
+ hasChildren = true;
+ break;
+ }
+ const fiber = this.fiber;
+ this.children = fiber.childrenMap;
+ this.bdom.patch(fiber.bdom, hasChildren);
+ fiber.appliedToDom = true;
+ this.fiber = null;
+ }
+ beforeRemove() {
+ this._destroy();
+ }
+ remove() {
+ this.bdom.remove();
+ }
+ // ---------------------------------------------------------------------------
+ // Some debug helpers
+ // ---------------------------------------------------------------------------
+ get name() {
+ return this.component.constructor.name;
+ }
+ get subscriptions() {
+ const render = batchedRenderFunctions.get(this);
+ return render ? getSubscriptions(render) : [];
+ }
+ }
+
+ const TIMEOUT = Symbol("timeout");
+ const HOOK_TIMEOUT = {
+ onWillStart: 3000,
+ onWillUpdateProps: 3000,
+ };
+ function wrapError(fn, hookName) {
+ const error = new OwlError();
+ const timeoutError = new OwlError();
+ const node = getCurrent();
+ return (...args) => {
+ const onError = (cause) => {
+ error.cause = cause;
+ error.message =
+ cause instanceof Error
+ ? `The following error occurred in ${hookName}: "${cause.message}"`
+ : `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
+ throw error;
+ };
+ let result;
+ try {
+ result = fn(...args);
+ }
+ catch (cause) {
+ onError(cause);
+ }
+ if (!(result instanceof Promise)) {
+ return result;
+ }
+ const timeout = HOOK_TIMEOUT[hookName];
+ if (timeout) {
+ const fiber = node.fiber;
+ Promise.race([
+ result.catch(() => { }),
+ new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), timeout)),
+ ]).then((res) => {
+ if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
+ timeoutError.message = `${hookName}'s promise hasn't resolved after ${timeout / 1000} seconds`;
+ console.log(timeoutError);
+ }
+ });
+ }
+ return result.catch(onError);
+ };
+ }
+ // -----------------------------------------------------------------------------
+ // hooks
+ // -----------------------------------------------------------------------------
+ function onWillStart(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
+ }
+ function onWillUpdateProps(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
+ }
+ function onMounted(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
+ }
+ function onWillPatch(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
+ }
+ function onPatched(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.patched.push(decorate(fn.bind(node.component), "onPatched"));
+ }
+ function onWillUnmount(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
+ }
+ function onWillDestroy(fn) {
+ const node = getCurrent();
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
+ }
+ function onWillRender(fn) {
+ const node = getCurrent();
+ const renderFn = node.renderFn;
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ fn = decorate(fn.bind(node.component), "onWillRender");
+ node.renderFn = () => {
+ fn();
+ return renderFn();
+ };
+ }
+ function onRendered(fn) {
+ const node = getCurrent();
+ const renderFn = node.renderFn;
+ const decorate = node.app.dev ? wrapError : (fn) => fn;
+ fn = decorate(fn.bind(node.component), "onRendered");
+ node.renderFn = () => {
+ const result = renderFn();
+ fn();
+ return result;
+ };
+ }
+ function onError(callback) {
+ const node = getCurrent();
+ let handlers = nodeErrorHandlers.get(node);
+ if (!handlers) {
+ handlers = [];
+ nodeErrorHandlers.set(node, handlers);
+ }
+ handlers.push(callback.bind(node.component));
+ }
+
+ class Component {
+ constructor(props, env, node) {
+ this.props = props;
+ this.env = env;
+ this.__owl__ = node;
+ }
+ setup() { }
+ render(deep = false) {
+ this.__owl__.render(deep === true);
+ }
+ }
+ Component.template = "";
+
+ const VText = text("").constructor;
+ class VPortal extends VText {
+ constructor(selector, content) {
+ super("");
+ this.target = null;
+ this.selector = selector;
+ this.content = content;
+ }
+ mount(parent, anchor) {
+ super.mount(parent, anchor);
+ this.target = document.querySelector(this.selector);
+ if (this.target) {
+ this.content.mount(this.target, null);
+ }
+ else {
+ this.content.mount(parent, anchor);
+ }
+ }
+ beforeRemove() {
+ this.content.beforeRemove();
+ }
+ remove() {
+ if (this.content) {
+ super.remove();
+ this.content.remove();
+ this.content = null;
+ }
+ }
+ patch(other) {
+ super.patch(other);
+ if (this.content) {
+ this.content.patch(other.content, true);
+ }
+ else {
+ this.content = other.content;
+ this.content.mount(this.target, null);
+ }
+ }
+ }
+ /**
+ * kind of similar to , but it wraps it around a VPortal
+ */
+ function portalTemplate(app, bdom, helpers) {
+ let { callSlot } = helpers;
+ return function template(ctx, node, key = "") {
+ return new VPortal(ctx.props.target, callSlot(ctx, node, key, "default", false, null));
+ };
+ }
+ class Portal extends Component {
+ setup() {
+ const node = this.__owl__;
+ onMounted(() => {
+ const portal = node.bdom;
+ if (!portal.target) {
+ const target = document.querySelector(this.props.target);
+ if (target) {
+ portal.content.moveBeforeDOMNode(target.firstChild, target);
+ }
+ else {
+ throw new OwlError("invalid portal target");
+ }
+ }
+ });
+ onWillUnmount(() => {
+ const portal = node.bdom;
+ portal.remove();
+ });
+ }
+ }
+ Portal.template = "__portal__";
+ Portal.props = {
+ target: {
+ type: String,
+ },
+ slots: true,
+ };
+
+ // -----------------------------------------------------------------------------
+ // helpers
+ // -----------------------------------------------------------------------------
+ const isUnionType = (t) => Array.isArray(t);
+ const isBaseType = (t) => typeof t !== "object";
+ const isValueType = (t) => typeof t === "object" && t && "value" in t;
+ function isOptional(t) {
+ return typeof t === "object" && "optional" in t ? t.optional || false : false;
+ }
+ function describeType(type) {
+ return type === "*" || type === true ? "value" : type.name.toLowerCase();
+ }
+ function describe(info) {
+ if (isBaseType(info)) {
+ return describeType(info);
+ }
+ else if (isUnionType(info)) {
+ return info.map(describe).join(" or ");
+ }
+ else if (isValueType(info)) {
+ return String(info.value);
+ }
+ if ("element" in info) {
+ return `list of ${describe({ type: info.element, optional: false })}s`;
+ }
+ if ("shape" in info) {
+ return `object`;
+ }
+ return describe(info.type || "*");
+ }
+ function toSchema(spec) {
+ return Object.fromEntries(spec.map((e) => e.endsWith("?") ? [e.slice(0, -1), { optional: true }] : [e, { type: "*", optional: false }]));
+ }
+ /**
+ * Main validate function
+ */
+ function validate(obj, spec) {
+ let errors = validateSchema(obj, spec);
+ if (errors.length) {
+ throw new OwlError("Invalid object: " + errors.join(", "));
+ }
+ }
+ /**
+ * Helper validate function, to get the list of errors. useful if one want to
+ * manipulate the errors without parsing an error object
+ */
+ function validateSchema(obj, schema) {
+ if (Array.isArray(schema)) {
+ schema = toSchema(schema);
+ }
+ obj = toRaw(obj);
+ let errors = [];
+ // check if each value in obj has correct shape
+ for (let key in obj) {
+ if (key in schema) {
+ let result = validateType(key, obj[key], schema[key]);
+ if (result) {
+ errors.push(result);
+ }
+ }
+ else if (!("*" in schema)) {
+ errors.push(`unknown key '${key}'`);
+ }
+ }
+ // check that all specified keys are defined in obj
+ for (let key in schema) {
+ const spec = schema[key];
+ if (key !== "*" && !isOptional(spec) && !(key in obj)) {
+ const isObj = typeof spec === "object" && !Array.isArray(spec);
+ const isAny = spec === "*" || (isObj && "type" in spec ? spec.type === "*" : isObj);
+ let detail = isAny ? "" : ` (should be a ${describe(spec)})`;
+ errors.push(`'${key}' is missing${detail}`);
+ }
+ }
+ return errors;
+ }
+ function validateBaseType(key, value, type) {
+ if (typeof type === "function") {
+ if (typeof value === "object") {
+ if (!(value instanceof type)) {
+ return `'${key}' is not a ${describeType(type)}`;
+ }
+ }
+ else if (typeof value !== type.name.toLowerCase()) {
+ return `'${key}' is not a ${describeType(type)}`;
+ }
+ }
+ return null;
+ }
+ function validateArrayType(key, value, descr) {
+ if (!Array.isArray(value)) {
+ return `'${key}' is not a list of ${describe(descr)}s`;
+ }
+ for (let i = 0; i < value.length; i++) {
+ const error = validateType(`${key}[${i}]`, value[i], descr);
+ if (error) {
+ return error;
+ }
+ }
+ return null;
+ }
+ function validateType(key, value, descr) {
+ if (value === undefined) {
+ return isOptional(descr) ? null : `'${key}' is undefined (should be a ${describe(descr)})`;
+ }
+ else if (isBaseType(descr)) {
+ return validateBaseType(key, value, descr);
+ }
+ else if (isValueType(descr)) {
+ return value === descr.value ? null : `'${key}' is not equal to '${descr.value}'`;
+ }
+ else if (isUnionType(descr)) {
+ let validDescr = descr.find((p) => !validateType(key, value, p));
+ return validDescr ? null : `'${key}' is not a ${describe(descr)}`;
+ }
+ let result = null;
+ if ("element" in descr) {
+ result = validateArrayType(key, value, descr.element);
+ }
+ else if ("shape" in descr) {
+ if (typeof value !== "object" || Array.isArray(value)) {
+ result = `'${key}' is not an object`;
+ }
+ else {
+ const errors = validateSchema(value, descr.shape);
+ if (errors.length) {
+ result = `'${key}' doesn't have the correct shape (${errors.join(", ")})`;
+ }
+ }
+ }
+ else if ("values" in descr) {
+ if (typeof value !== "object" || Array.isArray(value)) {
+ result = `'${key}' is not an object`;
+ }
+ else {
+ const errors = Object.entries(value)
+ .map(([key, value]) => validateType(key, value, descr.values))
+ .filter(Boolean);
+ if (errors.length) {
+ result = `some of the values in '${key}' are invalid (${errors.join(", ")})`;
+ }
+ }
+ }
+ if ("type" in descr && !result) {
+ result = validateType(key, value, descr.type);
+ }
+ if ("validate" in descr && !result) {
+ result = !descr.validate(value) ? `'${key}' is not valid` : null;
+ }
+ return result;
+ }
+
+ const ObjectCreate = Object.create;
+ /**
+ * This file contains utility functions that will be injected in each template,
+ * to perform various useful tasks in the compiled code.
+ */
+ function withDefault(value, defaultValue) {
+ return value === undefined || value === null || value === false ? defaultValue : value;
+ }
+ function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
+ key = key + "__slot_" + name;
+ const slots = ctx.props.slots || {};
+ const { __render, __ctx, __scope } = slots[name] || {};
+ const slotScope = ObjectCreate(__ctx || {});
+ if (__scope) {
+ slotScope[__scope] = extra;
+ }
+ const slotBDom = __render ? __render(slotScope, parent, key) : null;
+ if (defaultContent) {
+ let child1 = undefined;
+ let child2 = undefined;
+ if (slotBDom) {
+ child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
+ }
+ else {
+ child2 = defaultContent(ctx, parent, key);
+ }
+ return multi([child1, child2]);
+ }
+ return slotBDom || text("");
+ }
+ function capture(ctx) {
+ const result = ObjectCreate(ctx);
+ for (let k in ctx) {
+ result[k] = ctx[k];
+ }
+ return result;
+ }
+ function withKey(elem, k) {
+ elem.key = k;
+ return elem;
+ }
+ function prepareList(collection) {
+ let keys;
+ let values;
+ if (Array.isArray(collection)) {
+ keys = collection;
+ values = collection;
+ }
+ else if (collection instanceof Map) {
+ keys = [...collection.keys()];
+ values = [...collection.values()];
+ }
+ else if (Symbol.iterator in Object(collection)) {
+ keys = [...collection];
+ values = keys;
+ }
+ else if (collection && typeof collection === "object") {
+ values = Object.values(collection);
+ keys = Object.keys(collection);
+ }
+ else {
+ throw new OwlError(`Invalid loop expression: "${collection}" is not iterable`);
+ }
+ const n = values.length;
+ return [keys, values, n, new Array(n)];
+ }
+ const isBoundary = Symbol("isBoundary");
+ function setContextValue(ctx, key, value) {
+ const ctx0 = ctx;
+ while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
+ const newCtx = ctx.__proto__;
+ if (!newCtx) {
+ ctx = ctx0;
+ break;
+ }
+ ctx = newCtx;
+ }
+ ctx[key] = value;
+ }
+ function toNumber(val) {
+ const n = parseFloat(val);
+ return isNaN(n) ? val : n;
+ }
+ function shallowEqual(l1, l2) {
+ for (let i = 0, l = l1.length; i < l; i++) {
+ if (l1[i] !== l2[i]) {
+ return false;
+ }
+ }
+ return true;
+ }
+ class LazyValue {
+ constructor(fn, ctx, component, node, key) {
+ this.fn = fn;
+ this.ctx = capture(ctx);
+ this.component = component;
+ this.node = node;
+ this.key = key;
+ }
+ evaluate() {
+ return this.fn.call(this.component, this.ctx, this.node, this.key);
+ }
+ toString() {
+ return this.evaluate().toString();
+ }
+ }
+ /*
+ * Safely outputs `value` as a block depending on the nature of `value`
+ */
+ function safeOutput(value, defaultValue) {
+ if (value === undefined || value === null) {
+ return defaultValue ? toggler("default", defaultValue) : toggler("undefined", text(""));
+ }
+ let safeKey;
+ let block;
+ switch (typeof value) {
+ case "object":
+ if (value instanceof Markup) {
+ safeKey = `string_safe`;
+ block = html(value);
+ }
+ else if (value instanceof LazyValue) {
+ safeKey = `lazy_value`;
+ block = value.evaluate();
+ }
+ else if (value instanceof String) {
+ safeKey = "string_unsafe";
+ block = text(value);
+ }
+ else {
+ // Assuming it is a block
+ safeKey = "block_safe";
+ block = value;
+ }
+ break;
+ case "string":
+ safeKey = "string_unsafe";
+ block = text(value);
+ break;
+ default:
+ safeKey = "string_unsafe";
+ block = text(String(value));
+ }
+ return toggler(safeKey, block);
+ }
+ /**
+ * Validate the component props (or next props) against the (static) props
+ * description. This is potentially an expensive operation: it may needs to
+ * visit recursively the props and all the children to check if they are valid.
+ * This is why it is only done in 'dev' mode.
+ */
+ function validateProps(name, props, comp) {
+ const ComponentClass = typeof name !== "string"
+ ? name
+ : comp.constructor.components[name];
+ if (!ComponentClass) {
+ // this is an error, wrong component. We silently return here instead so the
+ // error is triggered by the usual path ('component' function)
+ return;
+ }
+ const schema = ComponentClass.props;
+ if (!schema) {
+ if (comp.__owl__.app.warnIfNoStaticProps) {
+ console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
+ }
+ return;
+ }
+ const defaultProps = ComponentClass.defaultProps;
+ if (defaultProps) {
+ let isMandatory = (name) => Array.isArray(schema)
+ ? schema.includes(name)
+ : name in schema && !("*" in schema) && !isOptional(schema[name]);
+ for (let p in defaultProps) {
+ if (isMandatory(p)) {
+ throw new OwlError(`A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`);
+ }
+ }
+ }
+ const errors = validateSchema(props, schema);
+ if (errors.length) {
+ throw new OwlError(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
+ }
+ }
+ function makeRefWrapper(node) {
+ let refNames = new Set();
+ return (name, fn) => {
+ if (refNames.has(name)) {
+ throw new OwlError(`Cannot set the same ref more than once in the same component, ref "${name}" was set multiple times in ${node.name}`);
+ }
+ refNames.add(name);
+ return fn;
+ };
+ }
+ const helpers = {
+ withDefault,
+ zero: Symbol("zero"),
+ isBoundary,
+ callSlot,
+ capture,
+ withKey,
+ prepareList,
+ setContextValue,
+ shallowEqual,
+ toNumber,
+ validateProps,
+ LazyValue,
+ safeOutput,
+ createCatcher,
+ markRaw,
+ OwlError,
+ makeRefWrapper,
+ };
+
+ /**
+ * Parses an XML string into an XML document, throwing errors on parser errors
+ * instead of returning an XML document containing the parseerror.
+ *
+ * @param xml the string to parse
+ * @returns an XML document corresponding to the content of the string
+ */
+ function parseXML(xml) {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(xml, "text/xml");
+ if (doc.getElementsByTagName("parsererror").length) {
+ let msg = "Invalid XML in template.";
+ const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
+ if (parsererrorText) {
+ msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
+ const re = /\d+/g;
+ const firstMatch = re.exec(parsererrorText);
+ if (firstMatch) {
+ const lineNumber = Number(firstMatch[0]);
+ const line = xml.split("\n")[lineNumber - 1];
+ const secondMatch = re.exec(parsererrorText);
+ if (line && secondMatch) {
+ const columnIndex = Number(secondMatch[0]) - 1;
+ if (line[columnIndex]) {
+ msg +=
+ `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
+ `${line}\n${"-".repeat(columnIndex - 1)}^`;
+ }
+ }
+ }
+ }
+ throw new OwlError(msg);
+ }
+ return doc;
+ }
+
+ const bdom = { text, createBlock, list, multi, html, toggler, comment };
+ class TemplateSet {
+ constructor(config = {}) {
+ this.rawTemplates = Object.create(globalTemplates);
+ this.templates = {};
+ this.Portal = Portal;
+ this.dev = config.dev || false;
+ this.translateFn = config.translateFn;
+ this.translatableAttributes = config.translatableAttributes;
+ if (config.templates) {
+ if (config.templates instanceof Document || typeof config.templates === "string") {
+ this.addTemplates(config.templates);
+ }
+ else {
+ for (const name in config.templates) {
+ this.addTemplate(name, config.templates[name]);
+ }
+ }
+ }
+ this.getRawTemplate = config.getTemplate;
+ this.customDirectives = config.customDirectives || {};
+ this.runtimeUtils = { ...helpers, __globals__: config.globalValues || {} };
+ this.hasGlobalValues = Boolean(config.globalValues && Object.keys(config.globalValues).length);
+ }
+ static registerTemplate(name, fn) {
+ globalTemplates[name] = fn;
+ }
+ addTemplate(name, template) {
+ if (name in this.rawTemplates) {
+ // this check can be expensive, just silently ignore double definitions outside dev mode
+ if (!this.dev) {
+ return;
+ }
+ const rawTemplate = this.rawTemplates[name];
+ const currentAsString = typeof rawTemplate === "string"
+ ? rawTemplate
+ : rawTemplate instanceof Element
+ ? rawTemplate.outerHTML
+ : rawTemplate.toString();
+ const newAsString = typeof template === "string" ? template : template.outerHTML;
+ if (currentAsString === newAsString) {
+ return;
+ }
+ throw new OwlError(`Template ${name} already defined with different content`);
+ }
+ this.rawTemplates[name] = template;
+ }
+ addTemplates(xml) {
+ if (!xml) {
+ // empty string
+ return;
+ }
+ xml = xml instanceof Document ? xml : parseXML(xml);
+ for (const template of xml.querySelectorAll("[t-name]")) {
+ const name = template.getAttribute("t-name");
+ this.addTemplate(name, template);
+ }
+ }
+ getTemplate(name) {
+ var _a;
+ if (!(name in this.templates)) {
+ const rawTemplate = ((_a = this.getRawTemplate) === null || _a === void 0 ? void 0 : _a.call(this, name)) || this.rawTemplates[name];
+ if (rawTemplate === undefined) {
+ let extraInfo = "";
+ try {
+ const componentName = getCurrent().component.constructor.name;
+ extraInfo = ` (for component "${componentName}")`;
+ }
+ catch { }
+ throw new OwlError(`Missing template: "${name}"${extraInfo}`);
+ }
+ const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
+ const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
+ // first add a function to lazily get the template, in case there is a
+ // recursive call to the template name
+ const templates = this.templates;
+ this.templates[name] = function (context, parent) {
+ return templates[name].call(this, context, parent);
+ };
+ const template = templateFn(this, bdom, this.runtimeUtils);
+ this.templates[name] = template;
+ }
+ return this.templates[name];
+ }
+ _compileTemplate(name, template) {
+ throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
+ }
+ callTemplate(owner, subTemplate, ctx, parent, key) {
+ const template = this.getTemplate(subTemplate);
+ return toggler(subTemplate, template.call(owner, ctx, parent, key + subTemplate));
+ }
+ }
+ // -----------------------------------------------------------------------------
+ // xml tag helper
+ // -----------------------------------------------------------------------------
+ const globalTemplates = {};
+ function xml(...args) {
+ const name = `__template__${xml.nextId++}`;
+ const value = String.raw(...args);
+ globalTemplates[name] = value;
+ return name;
+ }
+ xml.nextId = 1;
+ TemplateSet.registerTemplate("__portal__", portalTemplate);
+
+ /**
+ * Owl QWeb Expression Parser
+ *
+ * Owl needs in various contexts to be able to understand the structure of a
+ * string representing a javascript expression. The usual goal is to be able
+ * to rewrite some variables. For example, if a template has
+ *
+ * ```xml
+ * ...
+ * ```
+ *
+ * this needs to be translated in something like this:
+ *
+ * ```js
+ * if (context["computeSomething"]({val: context["state"].val})) { ... }
+ * ```
+ *
+ * This file contains the implementation of an extremely naive tokenizer/parser
+ * and evaluator for javascript expressions. The supported grammar is basically
+ * only expressive enough to understand the shape of objects, of arrays, and
+ * various operators.
+ */
+ //------------------------------------------------------------------------------
+ // Misc types, constants and helpers
+ //------------------------------------------------------------------------------
+ const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,eval,void,Math,RegExp,Array,Object,Date,__globals__".split(",");
+ const WORD_REPLACEMENT = Object.assign(Object.create(null), {
+ and: "&&",
+ or: "||",
+ gt: ">",
+ gte: ">=",
+ lt: "<",
+ lte: "<=",
+ });
+ const STATIC_TOKEN_MAP = Object.assign(Object.create(null), {
+ "{": "LEFT_BRACE",
+ "}": "RIGHT_BRACE",
+ "[": "LEFT_BRACKET",
+ "]": "RIGHT_BRACKET",
+ ":": "COLON",
+ ",": "COMMA",
+ "(": "LEFT_PAREN",
+ ")": "RIGHT_PAREN",
+ });
+ // note that the space after typeof is relevant. It makes sure that the formatted
+ // expression has a space after typeof. Currently we don't support delete and void
+ const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ,|,&,^,~".split(",");
+ let tokenizeString = function (expr) {
+ let s = expr[0];
+ let start = s;
+ if (s !== "'" && s !== '"' && s !== "`") {
+ return false;
+ }
+ let i = 1;
+ let cur;
+ while (expr[i] && expr[i] !== start) {
+ cur = expr[i];
+ s += cur;
+ if (cur === "\\") {
+ i++;
+ cur = expr[i];
+ if (!cur) {
+ throw new OwlError("Invalid expression");
+ }
+ s += cur;
+ }
+ i++;
+ }
+ if (expr[i] !== start) {
+ throw new OwlError("Invalid expression");
+ }
+ s += start;
+ if (start === "`") {
+ return {
+ type: "TEMPLATE_STRING",
+ value: s,
+ replace(replacer) {
+ return s.replace(/\$\{(.*?)\}/g, (match, group) => {
+ return "${" + replacer(group) + "}";
+ });
+ },
+ };
+ }
+ return { type: "VALUE", value: s };
+ };
+ let tokenizeNumber = function (expr) {
+ let s = expr[0];
+ if (s && s.match(/[0-9]/)) {
+ let i = 1;
+ while (expr[i] && expr[i].match(/[0-9]|\./)) {
+ s += expr[i];
+ i++;
+ }
+ return { type: "VALUE", value: s };
+ }
+ else {
+ return false;
+ }
+ };
+ let tokenizeSymbol = function (expr) {
+ let s = expr[0];
+ if (s && s.match(/[a-zA-Z_\$]/)) {
+ let i = 1;
+ while (expr[i] && expr[i].match(/\w/)) {
+ s += expr[i];
+ i++;
+ }
+ if (s in WORD_REPLACEMENT) {
+ return { type: "OPERATOR", value: WORD_REPLACEMENT[s], size: s.length };
+ }
+ return { type: "SYMBOL", value: s };
+ }
+ else {
+ return false;
+ }
+ };
+ const tokenizeStatic = function (expr) {
+ const char = expr[0];
+ if (char && char in STATIC_TOKEN_MAP) {
+ return { type: STATIC_TOKEN_MAP[char], value: char };
+ }
+ return false;
+ };
+ const tokenizeOperator = function (expr) {
+ for (let op of OPERATORS) {
+ if (expr.startsWith(op)) {
+ return { type: "OPERATOR", value: op };
+ }
+ }
+ return false;
+ };
+ const TOKENIZERS = [
+ tokenizeString,
+ tokenizeNumber,
+ tokenizeOperator,
+ tokenizeSymbol,
+ tokenizeStatic,
+ ];
+ /**
+ * Convert a javascript expression (as a string) into a list of tokens. For
+ * example: `tokenize("1 + b")` will return:
+ * ```js
+ * [
+ * {type: "VALUE", value: "1"},
+ * {type: "OPERATOR", value: "+"},
+ * {type: "SYMBOL", value: "b"}
+ * ]
+ * ```
+ */
+ function tokenize(expr) {
+ const result = [];
+ let token = true;
+ let error;
+ let current = expr;
+ try {
+ while (token) {
+ current = current.trim();
+ if (current) {
+ for (let tokenizer of TOKENIZERS) {
+ token = tokenizer(current);
+ if (token) {
+ result.push(token);
+ current = current.slice(token.size || token.value.length);
+ break;
+ }
+ }
+ }
+ else {
+ token = false;
+ }
+ }
+ }
+ catch (e) {
+ error = e; // Silence all errors and throw a generic error below
+ }
+ if (current.length || error) {
+ throw new OwlError(`Tokenizer error: could not tokenize \`${expr}\``);
+ }
+ return result;
+ }
+ //------------------------------------------------------------------------------
+ // Expression "evaluator"
+ //------------------------------------------------------------------------------
+ const isLeftSeparator = (token) => token && (token.type === "LEFT_BRACE" || token.type === "COMMA");
+ const isRightSeparator = (token) => token && (token.type === "RIGHT_BRACE" || token.type === "COMMA");
+ /**
+ * This is the main function exported by this file. This is the code that will
+ * process an expression (given as a string) and returns another expression with
+ * proper lookups in the context.
+ *
+ * Usually, this kind of code would be very simple to do if we had an AST (so,
+ * if we had a javascript parser), since then, we would only need to find the
+ * variables and replace them. However, a parser is more complicated, and there
+ * are no standard builtin parser API.
+ *
+ * Since this method is applied to simple javasript expressions, and the work to
+ * be done is actually quite simple, we actually can get away with not using a
+ * parser, which helps with the code size.
+ *
+ * Here is the heuristic used by this method to determine if a token is a
+ * variable:
+ * - by default, all symbols are considered a variable
+ * - unless the previous token is a dot (in that case, this is a property: `a.b`)
+ * - or if the previous token is a left brace or a comma, and the next token is
+ * a colon (in that case, this is an object key: `{a: b}`)
+ *
+ * Some specific code is also required to support arrow functions. If we detect
+ * the arrow operator, then we add the current (or some previous tokens) token to
+ * the list of variables so it does not get replaced by a lookup in the context
+ */
+ function compileExprToArray(expr) {
+ const localVars = new Set();
+ const tokens = tokenize(expr);
+ let i = 0;
+ let stack = []; // to track last opening (, [ or {
+ while (i < tokens.length) {
+ let token = tokens[i];
+ let prevToken = tokens[i - 1];
+ let nextToken = tokens[i + 1];
+ let groupType = stack[stack.length - 1];
+ switch (token.type) {
+ case "LEFT_BRACE":
+ case "LEFT_BRACKET":
+ case "LEFT_PAREN":
+ stack.push(token.type);
+ break;
+ case "RIGHT_BRACE":
+ case "RIGHT_BRACKET":
+ case "RIGHT_PAREN":
+ stack.pop();
+ }
+ let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
+ if (token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value)) {
+ if (prevToken) {
+ // normalize missing tokens: {a} should be equivalent to {a:a}
+ if (groupType === "LEFT_BRACE" &&
+ isLeftSeparator(prevToken) &&
+ isRightSeparator(nextToken)) {
+ tokens.splice(i + 1, 0, { type: "COLON", value: ":" }, { ...token });
+ nextToken = tokens[i + 1];
+ }
+ if (prevToken.type === "OPERATOR" && prevToken.value === ".") {
+ isVar = false;
+ }
+ else if (prevToken.type === "LEFT_BRACE" || prevToken.type === "COMMA") {
+ if (nextToken && nextToken.type === "COLON") {
+ isVar = false;
+ }
+ }
+ }
+ }
+ if (token.type === "TEMPLATE_STRING") {
+ token.value = token.replace((expr) => compileExpr(expr));
+ }
+ if (nextToken && nextToken.type === "OPERATOR" && nextToken.value === "=>") {
+ if (token.type === "RIGHT_PAREN") {
+ let j = i - 1;
+ while (j > 0 && tokens[j].type !== "LEFT_PAREN") {
+ if (tokens[j].type === "SYMBOL" && tokens[j].originalValue) {
+ tokens[j].value = tokens[j].originalValue;
+ localVars.add(tokens[j].value); //] = { id: tokens[j].value, expr: tokens[j].value };
+ }
+ j--;
+ }
+ }
+ else {
+ localVars.add(token.value); //] = { id: token.value, expr: token.value };
+ }
+ }
+ if (isVar) {
+ token.varName = token.value;
+ if (!localVars.has(token.value)) {
+ token.originalValue = token.value;
+ token.value = `ctx['${token.value}']`;
+ }
+ }
+ i++;
+ }
+ // Mark all variables that have been used locally.
+ // This assumes the expression has only one scope (incorrect but "good enough for now")
+ for (const token of tokens) {
+ if (token.type === "SYMBOL" && token.varName && localVars.has(token.value)) {
+ token.originalValue = token.value;
+ token.value = `_${token.value}`;
+ token.isLocal = true;
+ }
+ }
+ return tokens;
+ }
+ // Leading spaces are trimmed during tokenization, so they need to be added back for some values
+ const paddedValues = new Map([["in ", " in "]]);
+ function compileExpr(expr) {
+ return compileExprToArray(expr)
+ .map((t) => paddedValues.get(t.value) || t.value)
+ .join("");
+ }
+ const INTERP_REGEXP = /\{\{.*?\}\}|\#\{.*?\}/g;
+ function replaceDynamicParts(s, replacer) {
+ let matches = s.match(INTERP_REGEXP);
+ if (matches && matches[0].length === s.length) {
+ return `(${replacer(s.slice(2, matches[0][0] === "{" ? -2 : -1))})`;
+ }
+ let r = s.replace(INTERP_REGEXP, (s) => "${" + replacer(s.slice(2, s[0] === "{" ? -2 : -1)) + "}");
+ return "`" + r + "`";
+ }
+ function interpolate(s) {
+ return replaceDynamicParts(s, compileExpr);
+ }
+
+ const whitespaceRE = /\s+/g;
+ // using a non-html document so that HTML serializes as XML instead
+ // of HTML (as we will parse it as xml later)
+ const xmlDoc = document.implementation.createDocument(null, null, null);
+ const MODS = new Set(["stop", "capture", "prevent", "self", "synthetic"]);
+ let nextDataIds = {};
+ function generateId(prefix = "") {
+ nextDataIds[prefix] = (nextDataIds[prefix] || 0) + 1;
+ return prefix + nextDataIds[prefix];
+ }
+ function isProp(tag, key) {
+ switch (tag) {
+ case "input":
+ return (key === "checked" ||
+ key === "indeterminate" ||
+ key === "value" ||
+ key === "readonly" ||
+ key === "readOnly" ||
+ key === "disabled");
+ case "option":
+ return key === "selected" || key === "disabled";
+ case "textarea":
+ return key === "value" || key === "readonly" || key === "readOnly" || key === "disabled";
+ case "select":
+ return key === "value" || key === "disabled";
+ case "button":
+ case "optgroup":
+ return key === "disabled";
+ }
+ return false;
+ }
+ /**
+ * Returns a template literal that evaluates to str. You can add interpolation
+ * sigils into the string if required
+ */
+ function toStringExpression(str) {
+ return `\`${str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/, "\\${")}\``;
+ }
+ // -----------------------------------------------------------------------------
+ // BlockDescription
+ // -----------------------------------------------------------------------------
+ class BlockDescription {
+ constructor(target, type) {
+ this.dynamicTagName = null;
+ this.isRoot = false;
+ this.hasDynamicChildren = false;
+ this.children = [];
+ this.data = [];
+ this.childNumber = 0;
+ this.parentVar = "";
+ this.id = BlockDescription.nextBlockId++;
+ this.varName = "b" + this.id;
+ this.blockName = "block" + this.id;
+ this.target = target;
+ this.type = type;
+ }
+ insertData(str, prefix = "d") {
+ const id = generateId(prefix);
+ this.target.addLine(`let ${id} = ${str};`);
+ return this.data.push(id) - 1;
+ }
+ insert(dom) {
+ if (this.currentDom) {
+ this.currentDom.appendChild(dom);
+ }
+ else {
+ this.dom = dom;
+ }
+ }
+ generateExpr(expr) {
+ if (this.type === "block") {
+ const hasChildren = this.children.length;
+ let params = this.data.length ? `[${this.data.join(", ")}]` : hasChildren ? "[]" : "";
+ if (hasChildren) {
+ params += ", [" + this.children.map((c) => c.varName).join(", ") + "]";
+ }
+ if (this.dynamicTagName) {
+ return `toggler(${this.dynamicTagName}, ${this.blockName}(${this.dynamicTagName})(${params}))`;
+ }
+ return `${this.blockName}(${params})`;
+ }
+ else if (this.type === "list") {
+ return `list(c_block${this.id})`;
+ }
+ return expr;
+ }
+ asXmlString() {
+ // Can't use outerHTML on text/comment nodes
+ // append dom to any element and use innerHTML instead
+ const t = xmlDoc.createElement("t");
+ t.appendChild(this.dom);
+ return t.innerHTML;
+ }
+ }
+ BlockDescription.nextBlockId = 1;
+ function createContext(parentCtx, params) {
+ return Object.assign({
+ block: null,
+ index: 0,
+ forceNewBlock: true,
+ translate: parentCtx.translate,
+ translationCtx: parentCtx.translationCtx,
+ tKeyExpr: null,
+ nameSpace: parentCtx.nameSpace,
+ tModelSelectedExpr: parentCtx.tModelSelectedExpr,
+ }, params);
+ }
+ class CodeTarget {
+ constructor(name, on) {
+ this.indentLevel = 0;
+ this.loopLevel = 0;
+ this.code = [];
+ this.hasRoot = false;
+ this.hasCache = false;
+ this.shouldProtectScope = false;
+ this.hasRefWrapper = false;
+ this.name = name;
+ this.on = on || null;
+ }
+ addLine(line, idx) {
+ const prefix = new Array(this.indentLevel + 2).join(" ");
+ if (idx === undefined) {
+ this.code.push(prefix + line);
+ }
+ else {
+ this.code.splice(idx, 0, prefix + line);
+ }
+ }
+ generateCode() {
+ let result = [];
+ result.push(`function ${this.name}(ctx, node, key = "") {`);
+ if (this.shouldProtectScope) {
+ result.push(` ctx = Object.create(ctx);`);
+ result.push(` ctx[isBoundary] = 1`);
+ }
+ if (this.hasRefWrapper) {
+ result.push(` let refWrapper = makeRefWrapper(this.__owl__);`);
+ }
+ if (this.hasCache) {
+ result.push(` let cache = ctx.cache || {};`);
+ result.push(` let nextCache = ctx.cache = {};`);
+ }
+ for (let line of this.code) {
+ result.push(line);
+ }
+ if (!this.hasRoot) {
+ result.push(`return text('');`);
+ }
+ result.push(`}`);
+ return result.join("\n ");
+ }
+ currentKey(ctx) {
+ let key = this.loopLevel ? `key${this.loopLevel}` : "key";
+ if (ctx.tKeyExpr) {
+ key = `${ctx.tKeyExpr} + ${key}`;
+ }
+ return key;
+ }
+ }
+ const TRANSLATABLE_ATTRS = [
+ "alt",
+ "aria-label",
+ "aria-placeholder",
+ "aria-roledescription",
+ "aria-valuetext",
+ "label",
+ "placeholder",
+ "title",
+ ];
+ const translationRE = /^(\s*)([\s\S]+?)(\s*)$/;
+ class CodeGenerator {
+ constructor(ast, options) {
+ this.blocks = [];
+ this.nextBlockId = 1;
+ this.isDebug = false;
+ this.targets = [];
+ this.target = new CodeTarget("template");
+ this.translatableAttributes = TRANSLATABLE_ATTRS;
+ this.staticDefs = [];
+ this.slotNames = new Set();
+ this.helpers = new Set();
+ this.translateFn = options.translateFn || ((s) => s);
+ if (options.translatableAttributes) {
+ const attrs = new Set(TRANSLATABLE_ATTRS);
+ for (let attr of options.translatableAttributes) {
+ if (attr.startsWith("-")) {
+ attrs.delete(attr.slice(1));
+ }
+ else {
+ attrs.add(attr);
+ }
+ }
+ this.translatableAttributes = [...attrs];
+ }
+ this.hasSafeContext = options.hasSafeContext || false;
+ this.dev = options.dev || false;
+ this.ast = ast;
+ this.templateName = options.name;
+ if (options.hasGlobalValues) {
+ this.helpers.add("__globals__");
+ }
+ }
+ generateCode() {
+ const ast = this.ast;
+ this.isDebug = ast.type === 12 /* TDebug */;
+ BlockDescription.nextBlockId = 1;
+ nextDataIds = {};
+ this.compileAST(ast, {
+ block: null,
+ index: 0,
+ forceNewBlock: false,
+ isLast: true,
+ translate: true,
+ translationCtx: "",
+ tKeyExpr: null,
+ });
+ // define blocks and utility functions
+ let mainCode = [` let { text, createBlock, list, multi, html, toggler, comment } = bdom;`];
+ if (this.helpers.size) {
+ mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
+ }
+ if (this.templateName) {
+ mainCode.push(`// Template name: "${this.templateName}"`);
+ }
+ for (let { id, expr } of this.staticDefs) {
+ mainCode.push(`const ${id} = ${expr};`);
+ }
+ // define all blocks
+ if (this.blocks.length) {
+ mainCode.push(``);
+ for (let block of this.blocks) {
+ if (block.dom) {
+ let xmlString = toStringExpression(block.asXmlString());
+ if (block.dynamicTagName) {
+ xmlString = xmlString.replace(/^`<\w+/, `\`<\${tag || '${block.dom.nodeName}'}`);
+ xmlString = xmlString.replace(/\w+>`$/, `\${tag || '${block.dom.nodeName}'}>\``);
+ mainCode.push(`let ${block.blockName} = tag => createBlock(${xmlString});`);
+ }
+ else {
+ mainCode.push(`let ${block.blockName} = createBlock(${xmlString});`);
+ }
+ }
+ }
+ }
+ // define all slots/defaultcontent function
+ if (this.targets.length) {
+ for (let fn of this.targets) {
+ mainCode.push("");
+ mainCode = mainCode.concat(fn.generateCode());
+ }
+ }
+ // generate main code
+ mainCode.push("");
+ mainCode = mainCode.concat("return " + this.target.generateCode());
+ const code = mainCode.join("\n ");
+ if (this.isDebug) {
+ const msg = `[Owl Debug]\n${code}`;
+ console.log(msg);
+ }
+ return code;
+ }
+ compileInNewTarget(prefix, ast, ctx, on) {
+ const name = generateId(prefix);
+ const initialTarget = this.target;
+ const target = new CodeTarget(name, on);
+ this.targets.push(target);
+ this.target = target;
+ this.compileAST(ast, createContext(ctx));
+ this.target = initialTarget;
+ return name;
+ }
+ addLine(line, idx) {
+ this.target.addLine(line, idx);
+ }
+ define(varName, expr) {
+ this.addLine(`const ${varName} = ${expr};`);
+ }
+ insertAnchor(block, index = block.children.length) {
+ const tag = `block-child-${index}`;
+ const anchor = xmlDoc.createElement(tag);
+ block.insert(anchor);
+ }
+ createBlock(parentBlock, type, ctx) {
+ const hasRoot = this.target.hasRoot;
+ const block = new BlockDescription(this.target, type);
+ if (!hasRoot) {
+ this.target.hasRoot = true;
+ block.isRoot = true;
+ }
+ if (parentBlock) {
+ parentBlock.children.push(block);
+ if (parentBlock.type === "list") {
+ block.parentVar = `c_block${parentBlock.id}`;
+ }
+ }
+ return block;
+ }
+ insertBlock(expression, block, ctx) {
+ let blockExpr = block.generateExpr(expression);
+ if (block.parentVar) {
+ let key = this.target.currentKey(ctx);
+ this.helpers.add("withKey");
+ this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${key});`);
+ return;
+ }
+ if (ctx.tKeyExpr) {
+ blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
+ }
+ if (block.isRoot) {
+ if (this.target.on) {
+ blockExpr = this.wrapWithEventCatcher(blockExpr, this.target.on);
+ }
+ this.addLine(`return ${blockExpr};`);
+ }
+ else {
+ this.define(block.varName, blockExpr);
+ }
+ }
+ /**
+ * Captures variables that are used inside of an expression. This is useful
+ * because in compiled code, almost all variables are accessed through the ctx
+ * object. In the case of functions, that lookup in the context can be delayed
+ * which can cause issues if the value has changed since the function was
+ * defined.
+ *
+ * @param expr the expression to capture
+ * @param forceCapture whether the expression should capture its scope even if
+ * it doesn't contain a function. Useful when the expression will be used as
+ * a function body.
+ * @returns a new expression that uses the captured values
+ */
+ captureExpression(expr, forceCapture = false) {
+ if (!forceCapture && !expr.includes("=>")) {
+ return compileExpr(expr);
+ }
+ const tokens = compileExprToArray(expr);
+ const mapping = new Map();
+ return tokens
+ .map((tok) => {
+ if (tok.varName && !tok.isLocal) {
+ if (!mapping.has(tok.varName)) {
+ const varId = generateId("v");
+ mapping.set(tok.varName, varId);
+ this.define(varId, tok.value);
+ }
+ tok.value = mapping.get(tok.varName);
+ }
+ return tok.value;
+ })
+ .join("");
+ }
+ translate(str, translationCtx) {
+ const match = translationRE.exec(str);
+ return match[1] + this.translateFn(match[2], translationCtx) + match[3];
+ }
+ /**
+ * @returns the newly created block name, if any
+ */
+ compileAST(ast, ctx) {
+ switch (ast.type) {
+ case 1 /* Comment */:
+ return this.compileComment(ast, ctx);
+ case 0 /* Text */:
+ return this.compileText(ast, ctx);
+ case 2 /* DomNode */:
+ return this.compileTDomNode(ast, ctx);
+ case 4 /* TEsc */:
+ return this.compileTEsc(ast, ctx);
+ case 8 /* TOut */:
+ return this.compileTOut(ast, ctx);
+ case 5 /* TIf */:
+ return this.compileTIf(ast, ctx);
+ case 9 /* TForEach */:
+ return this.compileTForeach(ast, ctx);
+ case 10 /* TKey */:
+ return this.compileTKey(ast, ctx);
+ case 3 /* Multi */:
+ return this.compileMulti(ast, ctx);
+ case 7 /* TCall */:
+ return this.compileTCall(ast, ctx);
+ case 15 /* TCallBlock */:
+ return this.compileTCallBlock(ast, ctx);
+ case 6 /* TSet */:
+ return this.compileTSet(ast, ctx);
+ case 11 /* TComponent */:
+ return this.compileComponent(ast, ctx);
+ case 12 /* TDebug */:
+ return this.compileDebug(ast, ctx);
+ case 13 /* TLog */:
+ return this.compileLog(ast, ctx);
+ case 14 /* TSlot */:
+ return this.compileTSlot(ast, ctx);
+ case 16 /* TTranslation */:
+ return this.compileTTranslation(ast, ctx);
+ case 17 /* TTranslationContext */:
+ return this.compileTTranslationContext(ast, ctx);
+ case 18 /* TPortal */:
+ return this.compileTPortal(ast, ctx);
+ }
+ }
+ compileDebug(ast, ctx) {
+ this.addLine(`debugger;`);
+ if (ast.content) {
+ return this.compileAST(ast.content, ctx);
+ }
+ return null;
+ }
+ compileLog(ast, ctx) {
+ this.addLine(`console.log(${compileExpr(ast.expr)});`);
+ if (ast.content) {
+ return this.compileAST(ast.content, ctx);
+ }
+ return null;
+ }
+ compileComment(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ const isNewBlock = !block || forceNewBlock;
+ if (isNewBlock) {
+ block = this.createBlock(block, "comment", ctx);
+ this.insertBlock(`comment(${toStringExpression(ast.value)})`, block, {
+ ...ctx,
+ forceNewBlock: forceNewBlock && !block,
+ });
+ }
+ else {
+ const text = xmlDoc.createComment(ast.value);
+ block.insert(text);
+ }
+ return block.varName;
+ }
+ compileText(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ let value = ast.value;
+ if (value && ctx.translate !== false) {
+ value = this.translate(value, ctx.translationCtx);
+ }
+ if (!ctx.inPreTag) {
+ value = value.replace(whitespaceRE, " ");
+ }
+ if (!block || forceNewBlock) {
+ block = this.createBlock(block, "text", ctx);
+ this.insertBlock(`text(${toStringExpression(value)})`, block, {
+ ...ctx,
+ forceNewBlock: forceNewBlock && !block,
+ });
+ }
+ else {
+ const createFn = ast.type === 0 /* Text */ ? xmlDoc.createTextNode : xmlDoc.createComment;
+ block.insert(createFn.call(xmlDoc, value));
+ }
+ return block.varName;
+ }
+ generateHandlerCode(rawEvent, handler) {
+ const modifiers = rawEvent
+ .split(".")
+ .slice(1)
+ .map((m) => {
+ if (!MODS.has(m)) {
+ throw new OwlError(`Unknown event modifier: '${m}'`);
+ }
+ return `"${m}"`;
+ });
+ let modifiersCode = "";
+ if (modifiers.length) {
+ modifiersCode = `${modifiers.join(",")}, `;
+ }
+ return `[${modifiersCode}${this.captureExpression(handler)}, ctx]`;
+ }
+ compileTDomNode(ast, ctx) {
+ var _a;
+ let { block, forceNewBlock } = ctx;
+ const isNewBlock = !block || forceNewBlock || ast.dynamicTag !== null || ast.ns;
+ let codeIdx = this.target.code.length;
+ if (isNewBlock) {
+ if ((ast.dynamicTag || ctx.tKeyExpr || ast.ns) && ctx.block) {
+ this.insertAnchor(ctx.block);
+ }
+ block = this.createBlock(block, "block", ctx);
+ this.blocks.push(block);
+ if (ast.dynamicTag) {
+ const tagExpr = generateId("tag");
+ this.define(tagExpr, compileExpr(ast.dynamicTag));
+ block.dynamicTagName = tagExpr;
+ }
+ }
+ // attributes
+ const attrs = {};
+ for (let key in ast.attrs) {
+ let expr, attrName;
+ if (key.startsWith("t-attf")) {
+ expr = interpolate(ast.attrs[key]);
+ const idx = block.insertData(expr, "attr");
+ attrName = key.slice(7);
+ attrs["block-attribute-" + idx] = attrName;
+ }
+ else if (key.startsWith("t-att")) {
+ attrName = key === "t-att" ? null : key.slice(6);
+ expr = compileExpr(ast.attrs[key]);
+ if (attrName && isProp(ast.tag, attrName)) {
+ if (attrName === "readonly") {
+ // the property has a different name than the attribute
+ attrName = "readOnly";
+ }
+ // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
+ if (attrName === "value") {
+ // When the expression is falsy (except 0), fall back to an empty string
+ expr = `new String((${expr}) === 0 ? 0 : ((${expr}) || ""))`;
+ }
+ else {
+ expr = `new Boolean(${expr})`;
+ }
+ const idx = block.insertData(expr, "prop");
+ attrs[`block-property-${idx}`] = attrName;
+ }
+ else {
+ const idx = block.insertData(expr, "attr");
+ if (key === "t-att") {
+ attrs[`block-attributes`] = String(idx);
+ }
+ else {
+ attrs[`block-attribute-${idx}`] = attrName;
+ }
+ }
+ }
+ else if (this.translatableAttributes.includes(key)) {
+ const attrTranslationCtx = ((_a = ast.attrsTranslationCtx) === null || _a === void 0 ? void 0 : _a[key]) || ctx.translationCtx;
+ attrs[key] = this.translateFn(ast.attrs[key], attrTranslationCtx);
+ }
+ else {
+ expr = `"${ast.attrs[key]}"`;
+ attrName = key;
+ attrs[key] = ast.attrs[key];
+ }
+ if (attrName === "value" && ctx.tModelSelectedExpr) {
+ let selectedId = block.insertData(`${ctx.tModelSelectedExpr} === ${expr}`, "attr");
+ attrs[`block-attribute-${selectedId}`] = "selected";
+ }
+ }
+ // t-model
+ let tModelSelectedExpr;
+ if (ast.model) {
+ const { hasDynamicChildren, baseExpr, expr, eventType, shouldNumberize, shouldTrim, targetAttr, specialInitTargetAttr, } = ast.model;
+ const baseExpression = compileExpr(baseExpr);
+ const bExprId = generateId("bExpr");
+ this.define(bExprId, baseExpression);
+ const expression = compileExpr(expr);
+ const exprId = generateId("expr");
+ this.define(exprId, expression);
+ const fullExpression = `${bExprId}[${exprId}]`;
+ let idx;
+ if (specialInitTargetAttr) {
+ let targetExpr = targetAttr in attrs && `'${attrs[targetAttr]}'`;
+ if (!targetExpr && ast.attrs) {
+ // look at the dynamic attribute counterpart
+ const dynamicTgExpr = ast.attrs[`t-att-${targetAttr}`];
+ if (dynamicTgExpr) {
+ targetExpr = compileExpr(dynamicTgExpr);
+ }
+ }
+ idx = block.insertData(`${fullExpression} === ${targetExpr}`, "prop");
+ attrs[`block-property-${idx}`] = specialInitTargetAttr;
+ }
+ else if (hasDynamicChildren) {
+ const bValueId = generateId("bValue");
+ tModelSelectedExpr = `${bValueId}`;
+ this.define(tModelSelectedExpr, fullExpression);
+ }
+ else {
+ idx = block.insertData(`${fullExpression}`, "prop");
+ attrs[`block-property-${idx}`] = targetAttr;
+ }
+ this.helpers.add("toNumber");
+ let valueCode = `ev.target.${targetAttr}`;
+ valueCode = shouldTrim ? `${valueCode}.trim()` : valueCode;
+ valueCode = shouldNumberize ? `toNumber(${valueCode})` : valueCode;
+ const handler = `[(ev) => { ${fullExpression} = ${valueCode}; }]`;
+ idx = block.insertData(handler, "hdlr");
+ attrs[`block-handler-${idx}`] = eventType;
+ }
+ // event handlers
+ for (let ev in ast.on) {
+ const name = this.generateHandlerCode(ev, ast.on[ev]);
+ const idx = block.insertData(name, "hdlr");
+ attrs[`block-handler-${idx}`] = ev;
+ }
+ // t-ref
+ if (ast.ref) {
+ if (this.dev) {
+ this.helpers.add("makeRefWrapper");
+ this.target.hasRefWrapper = true;
+ }
+ const isDynamic = INTERP_REGEXP.test(ast.ref);
+ let name = `\`${ast.ref}\``;
+ if (isDynamic) {
+ name = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
+ }
+ let setRefStr = `(el) => this.__owl__.setRef((${name}), el)`;
+ if (this.dev) {
+ setRefStr = `refWrapper(${name}, ${setRefStr})`;
+ }
+ const idx = block.insertData(setRefStr, "ref");
+ attrs["block-ref"] = String(idx);
+ }
+ const nameSpace = ast.ns || ctx.nameSpace;
+ const dom = nameSpace
+ ? xmlDoc.createElementNS(nameSpace, ast.tag)
+ : xmlDoc.createElement(ast.tag);
+ for (const [attr, val] of Object.entries(attrs)) {
+ if (!(attr === "class" && val === "")) {
+ dom.setAttribute(attr, val);
+ }
+ }
+ block.insert(dom);
+ if (ast.content.length) {
+ const initialDom = block.currentDom;
+ block.currentDom = dom;
+ const children = ast.content;
+ for (let i = 0; i < children.length; i++) {
+ const child = ast.content[i];
+ const subCtx = createContext(ctx, {
+ block,
+ index: block.childNumber,
+ forceNewBlock: false,
+ isLast: ctx.isLast && i === children.length - 1,
+ tKeyExpr: ctx.tKeyExpr,
+ nameSpace,
+ tModelSelectedExpr,
+ inPreTag: ctx.inPreTag || ast.tag === "pre",
+ });
+ this.compileAST(child, subCtx);
+ }
+ block.currentDom = initialDom;
+ }
+ if (isNewBlock) {
+ this.insertBlock(`${block.blockName}(ddd)`, block, ctx);
+ // may need to rewrite code!
+ if (block.children.length && block.hasDynamicChildren) {
+ const code = this.target.code;
+ const children = block.children.slice();
+ let current = children.shift();
+ for (let i = codeIdx; i < code.length; i++) {
+ if (code[i].trimStart().startsWith(`const ${current.varName} `)) {
+ code[i] = code[i].replace(`const ${current.varName}`, current.varName);
+ current = children.shift();
+ if (!current)
+ break;
+ }
+ }
+ this.addLine(`let ${block.children.map((c) => c.varName).join(", ")};`, codeIdx);
+ }
+ }
+ return block.varName;
+ }
+ compileTEsc(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ let expr;
+ if (ast.expr === "0") {
+ this.helpers.add("zero");
+ expr = `ctx[zero]`;
+ }
+ else {
+ expr = compileExpr(ast.expr);
+ if (ast.defaultValue) {
+ this.helpers.add("withDefault");
+ // FIXME: defaultValue is not translated
+ expr = `withDefault(${expr}, ${toStringExpression(ast.defaultValue)})`;
+ }
+ }
+ if (!block || forceNewBlock) {
+ block = this.createBlock(block, "text", ctx);
+ this.insertBlock(`text(${expr})`, block, { ...ctx, forceNewBlock: forceNewBlock && !block });
+ }
+ else {
+ const idx = block.insertData(expr, "txt");
+ const text = xmlDoc.createElement(`block-text-${idx}`);
+ block.insert(text);
+ }
+ return block.varName;
+ }
+ compileTOut(ast, ctx) {
+ let { block } = ctx;
+ if (block) {
+ this.insertAnchor(block);
+ }
+ block = this.createBlock(block, "html", ctx);
+ let blockStr;
+ if (ast.expr === "0") {
+ this.helpers.add("zero");
+ blockStr = `ctx[zero]`;
+ }
+ else if (ast.body) {
+ let bodyValue = null;
+ bodyValue = BlockDescription.nextBlockId;
+ const subCtx = createContext(ctx);
+ this.compileAST({ type: 3 /* Multi */, content: ast.body }, subCtx);
+ this.helpers.add("safeOutput");
+ blockStr = `safeOutput(${compileExpr(ast.expr)}, b${bodyValue})`;
+ }
+ else {
+ this.helpers.add("safeOutput");
+ blockStr = `safeOutput(${compileExpr(ast.expr)})`;
+ }
+ this.insertBlock(blockStr, block, ctx);
+ return block.varName;
+ }
+ compileTIfBranch(content, block, ctx) {
+ this.target.indentLevel++;
+ let childN = block.children.length;
+ this.compileAST(content, createContext(ctx, { block, index: ctx.index }));
+ if (block.children.length > childN) {
+ // we have some content => need to insert an anchor at correct index
+ this.insertAnchor(block, childN);
+ }
+ this.target.indentLevel--;
+ }
+ compileTIf(ast, ctx, nextNode) {
+ let { block, forceNewBlock } = ctx;
+ const codeIdx = this.target.code.length;
+ const isNewBlock = !block || (block.type !== "multi" && forceNewBlock);
+ if (block) {
+ block.hasDynamicChildren = true;
+ }
+ if (!block || (block.type !== "multi" && forceNewBlock)) {
+ block = this.createBlock(block, "multi", ctx);
+ }
+ this.addLine(`if (${compileExpr(ast.condition)}) {`);
+ this.compileTIfBranch(ast.content, block, ctx);
+ if (ast.tElif) {
+ for (let clause of ast.tElif) {
+ this.addLine(`} else if (${compileExpr(clause.condition)}) {`);
+ this.compileTIfBranch(clause.content, block, ctx);
+ }
+ }
+ if (ast.tElse) {
+ this.addLine(`} else {`);
+ this.compileTIfBranch(ast.tElse, block, ctx);
+ }
+ this.addLine("}");
+ if (isNewBlock) {
+ // note: this part is duplicated from end of compiledomnode:
+ if (block.children.length) {
+ const code = this.target.code;
+ const children = block.children.slice();
+ let current = children.shift();
+ for (let i = codeIdx; i < code.length; i++) {
+ if (code[i].trimStart().startsWith(`const ${current.varName} `)) {
+ code[i] = code[i].replace(`const ${current.varName}`, current.varName);
+ current = children.shift();
+ if (!current)
+ break;
+ }
+ }
+ this.addLine(`let ${block.children.map((c) => c.varName).join(", ")};`, codeIdx);
+ }
+ // note: this part is duplicated from end of compilemulti:
+ const args = block.children.map((c) => c.varName).join(", ");
+ this.insertBlock(`multi([${args}])`, block, ctx);
+ }
+ return block.varName;
+ }
+ compileTForeach(ast, ctx) {
+ let { block } = ctx;
+ if (block) {
+ this.insertAnchor(block);
+ }
+ block = this.createBlock(block, "list", ctx);
+ this.target.loopLevel++;
+ const loopVar = `i${this.target.loopLevel}`;
+ this.addLine(`ctx = Object.create(ctx);`);
+ const vals = `v_block${block.id}`;
+ const keys = `k_block${block.id}`;
+ const l = `l_block${block.id}`;
+ const c = `c_block${block.id}`;
+ this.helpers.add("prepareList");
+ this.define(`[${keys}, ${vals}, ${l}, ${c}]`, `prepareList(${compileExpr(ast.collection)});`);
+ // Throw errors on duplicate keys in dev mode
+ if (this.dev) {
+ this.define(`keys${block.id}`, `new Set()`);
+ }
+ this.addLine(`for (let ${loopVar} = 0; ${loopVar} < ${l}; ${loopVar}++) {`);
+ this.target.indentLevel++;
+ this.addLine(`ctx[\`${ast.elem}\`] = ${keys}[${loopVar}];`);
+ if (!ast.hasNoFirst) {
+ this.addLine(`ctx[\`${ast.elem}_first\`] = ${loopVar} === 0;`);
+ }
+ if (!ast.hasNoLast) {
+ this.addLine(`ctx[\`${ast.elem}_last\`] = ${loopVar} === ${keys}.length - 1;`);
+ }
+ if (!ast.hasNoIndex) {
+ this.addLine(`ctx[\`${ast.elem}_index\`] = ${loopVar};`);
+ }
+ if (!ast.hasNoValue) {
+ this.addLine(`ctx[\`${ast.elem}_value\`] = ${vals}[${loopVar}];`);
+ }
+ this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
+ if (this.dev) {
+ // Throw error on duplicate keys in dev mode
+ this.helpers.add("OwlError");
+ this.addLine(`if (keys${block.id}.has(String(key${this.target.loopLevel}))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`);
+ this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
+ }
+ let id;
+ if (ast.memo) {
+ this.target.hasCache = true;
+ id = generateId();
+ this.define(`memo${id}`, compileExpr(ast.memo));
+ this.define(`vnode${id}`, `cache[key${this.target.loopLevel}];`);
+ this.addLine(`if (vnode${id}) {`);
+ this.target.indentLevel++;
+ this.addLine(`if (shallowEqual(vnode${id}.memo, memo${id})) {`);
+ this.target.indentLevel++;
+ this.addLine(`${c}[${loopVar}] = vnode${id};`);
+ this.addLine(`nextCache[key${this.target.loopLevel}] = vnode${id};`);
+ this.addLine(`continue;`);
+ this.target.indentLevel--;
+ this.addLine("}");
+ this.target.indentLevel--;
+ this.addLine("}");
+ }
+ const subCtx = createContext(ctx, { block, index: loopVar });
+ this.compileAST(ast.body, subCtx);
+ if (ast.memo) {
+ this.addLine(`nextCache[key${this.target.loopLevel}] = Object.assign(${c}[${loopVar}], {memo: memo${id}});`);
+ }
+ this.target.indentLevel--;
+ this.target.loopLevel--;
+ this.addLine(`}`);
+ if (!ctx.isLast) {
+ this.addLine(`ctx = ctx.__proto__;`);
+ }
+ this.insertBlock("l", block, ctx);
+ return block.varName;
+ }
+ compileTKey(ast, ctx) {
+ const tKeyExpr = generateId("tKey_");
+ this.define(tKeyExpr, compileExpr(ast.expr));
+ ctx = createContext(ctx, {
+ tKeyExpr,
+ block: ctx.block,
+ index: ctx.index,
+ });
+ return this.compileAST(ast.content, ctx);
+ }
+ compileMulti(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ const isNewBlock = !block || forceNewBlock;
+ let codeIdx = this.target.code.length;
+ if (isNewBlock) {
+ const n = ast.content.filter((c) => !c.hasNoRepresentation).length;
+ let result = null;
+ if (n <= 1) {
+ for (let child of ast.content) {
+ const blockName = this.compileAST(child, ctx);
+ result = result || blockName;
+ }
+ return result;
+ }
+ block = this.createBlock(block, "multi", ctx);
+ }
+ let index = 0;
+ for (let i = 0, l = ast.content.length; i < l; i++) {
+ const child = ast.content[i];
+ const forceNewBlock = !child.hasNoRepresentation;
+ const subCtx = createContext(ctx, {
+ block,
+ index,
+ forceNewBlock,
+ isLast: ctx.isLast && i === l - 1,
+ });
+ this.compileAST(child, subCtx);
+ if (forceNewBlock) {
+ index++;
+ }
+ }
+ if (isNewBlock) {
+ if (block.hasDynamicChildren && block.children.length) {
+ const code = this.target.code;
+ const children = block.children.slice();
+ let current = children.shift();
+ for (let i = codeIdx; i < code.length; i++) {
+ if (code[i].trimStart().startsWith(`const ${current.varName} `)) {
+ code[i] = code[i].replace(`const ${current.varName}`, current.varName);
+ current = children.shift();
+ if (!current)
+ break;
+ }
+ }
+ this.addLine(`let ${block.children.map((c) => c.varName).join(", ")};`, codeIdx);
+ }
+ const args = block.children.map((c) => c.varName).join(", ");
+ this.insertBlock(`multi([${args}])`, block, ctx);
+ }
+ return block.varName;
+ }
+ compileTCall(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ let ctxVar = ctx.ctxVar || "ctx";
+ if (ast.context) {
+ ctxVar = generateId("ctx");
+ this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
+ }
+ const isDynamic = INTERP_REGEXP.test(ast.name);
+ const subTemplate = isDynamic ? interpolate(ast.name) : "`" + ast.name + "`";
+ if (block && !forceNewBlock) {
+ this.insertAnchor(block);
+ }
+ block = this.createBlock(block, "multi", ctx);
+ if (ast.body) {
+ this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
+ this.addLine(`${ctxVar}[isBoundary] = 1;`);
+ this.helpers.add("isBoundary");
+ const subCtx = createContext(ctx, { ctxVar });
+ const bl = this.compileMulti({ type: 3 /* Multi */, content: ast.body }, subCtx);
+ if (bl) {
+ this.helpers.add("zero");
+ this.addLine(`${ctxVar}[zero] = ${bl};`);
+ }
+ }
+ const key = this.generateComponentKey();
+ if (isDynamic) {
+ const templateVar = generateId("template");
+ if (!this.staticDefs.find((d) => d.id === "call")) {
+ this.staticDefs.push({ id: "call", expr: `app.callTemplate.bind(app)` });
+ }
+ this.define(templateVar, subTemplate);
+ this.insertBlock(`call(this, ${templateVar}, ${ctxVar}, node, ${key})`, block, {
+ ...ctx,
+ forceNewBlock: !block,
+ });
+ }
+ else {
+ const id = generateId(`callTemplate_`);
+ this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
+ this.insertBlock(`${id}.call(this, ${ctxVar}, node, ${key})`, block, {
+ ...ctx,
+ forceNewBlock: !block,
+ });
+ }
+ if (ast.body && !ctx.isLast) {
+ this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
+ }
+ return block.varName;
+ }
+ compileTCallBlock(ast, ctx) {
+ let { block, forceNewBlock } = ctx;
+ if (block) {
+ if (!forceNewBlock) {
+ this.insertAnchor(block);
+ }
+ }
+ block = this.createBlock(block, "multi", ctx);
+ this.insertBlock(compileExpr(ast.name), block, { ...ctx, forceNewBlock: !block });
+ return block.varName;
+ }
+ compileTSet(ast, ctx) {
+ this.target.shouldProtectScope = true;
+ this.helpers.add("isBoundary").add("withDefault");
+ const expr = ast.value ? compileExpr(ast.value || "") : "null";
+ if (ast.body) {
+ this.helpers.add("LazyValue");
+ const bodyAst = { type: 3 /* Multi */, content: ast.body };
+ const name = this.compileInNewTarget("value", bodyAst, ctx);
+ let key = this.target.currentKey(ctx);
+ let value = `new LazyValue(${name}, ctx, this, node, ${key})`;
+ value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
+ this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
+ }
+ else {
+ let value;
+ if (ast.defaultValue) {
+ const defaultValue = toStringExpression(ctx.translate ? this.translate(ast.defaultValue, ctx.translationCtx) : ast.defaultValue);
+ if (ast.value) {
+ value = `withDefault(${expr}, ${defaultValue})`;
+ }
+ else {
+ value = defaultValue;
+ }
+ }
+ else {
+ value = expr;
+ }
+ this.helpers.add("setContextValue");
+ this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
+ }
+ return null;
+ }
+ generateComponentKey(currentKey = "key") {
+ const parts = [generateId("__")];
+ for (let i = 0; i < this.target.loopLevel; i++) {
+ parts.push(`\${key${i + 1}}`);
+ }
+ return `${currentKey} + \`${parts.join("__")}\``;
+ }
+ /**
+ * Formats a prop name and value into a string suitable to be inserted in the
+ * generated code. For example:
+ *
+ * Name Value Result
+ * ---------------------------------------------------------
+ * "number" "state" "number: ctx['state']"
+ * "something" "" "something: undefined"
+ * "some-prop" "state" "'some-prop': ctx['state']"
+ * "onClick.bind" "onClick" "onClick: bind(ctx, ctx['onClick'])"
+ */
+ formatProp(name, value, attrsTranslationCtx, translationCtx) {
+ if (name.endsWith(".translate")) {
+ const attrTranslationCtx = (attrsTranslationCtx === null || attrsTranslationCtx === void 0 ? void 0 : attrsTranslationCtx[name]) || translationCtx;
+ value = toStringExpression(this.translateFn(value, attrTranslationCtx));
+ }
+ else {
+ value = this.captureExpression(value);
+ }
+ if (name.includes(".")) {
+ let [_name, suffix] = name.split(".");
+ name = _name;
+ switch (suffix) {
+ case "bind":
+ value = `(${value}).bind(this)`;
+ break;
+ case "alike":
+ case "translate":
+ break;
+ default:
+ throw new OwlError(`Invalid prop suffix: ${suffix}`);
+ }
+ }
+ name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
+ return `${name}: ${value || undefined}`;
+ }
+ formatPropObject(obj, attrsTranslationCtx, translationCtx) {
+ return Object.entries(obj).map(([k, v]) => this.formatProp(k, v, attrsTranslationCtx, translationCtx));
+ }
+ getPropString(props, dynProps) {
+ let propString = `{${props.join(",")}}`;
+ if (dynProps) {
+ propString = `Object.assign({}, ${compileExpr(dynProps)}${props.length ? ", " + propString : ""})`;
+ }
+ return propString;
+ }
+ compileComponent(ast, ctx) {
+ let { block } = ctx;
+ // props
+ const hasSlotsProp = "slots" in (ast.props || {});
+ const props = ast.props
+ ? this.formatPropObject(ast.props, ast.propsTranslationCtx, ctx.translationCtx)
+ : [];
+ // slots
+ let slotDef = "";
+ if (ast.slots) {
+ let ctxStr = "ctx";
+ if (this.target.loopLevel || !this.hasSafeContext) {
+ ctxStr = generateId("ctx");
+ this.helpers.add("capture");
+ this.define(ctxStr, `capture(ctx)`);
+ }
+ let slotStr = [];
+ for (let slotName in ast.slots) {
+ const slotAst = ast.slots[slotName];
+ const params = [];
+ if (slotAst.content) {
+ const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
+ params.push(`__render: ${name}.bind(this), __ctx: ${ctxStr}`);
+ }
+ const scope = ast.slots[slotName].scope;
+ if (scope) {
+ params.push(`__scope: "${scope}"`);
+ }
+ if (ast.slots[slotName].attrs) {
+ params.push(...this.formatPropObject(ast.slots[slotName].attrs, ast.slots[slotName].attrsTranslationCtx, ctx.translationCtx));
+ }
+ const slotInfo = `{${params.join(", ")}}`;
+ slotStr.push(`'${slotName}': ${slotInfo}`);
+ }
+ slotDef = `{${slotStr.join(", ")}}`;
+ }
+ if (slotDef && !(ast.dynamicProps || hasSlotsProp)) {
+ this.helpers.add("markRaw");
+ props.push(`slots: markRaw(${slotDef})`);
+ }
+ let propString = this.getPropString(props, ast.dynamicProps);
+ let propVar;
+ if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
+ propVar = generateId("props");
+ this.define(propVar, propString);
+ propString = propVar;
+ }
+ if (slotDef && (ast.dynamicProps || hasSlotsProp)) {
+ this.helpers.add("markRaw");
+ this.addLine(`${propVar}.slots = markRaw(Object.assign(${slotDef}, ${propVar}.slots))`);
+ }
+ // cmap key
+ let expr;
+ if (ast.isDynamic) {
+ expr = generateId("Comp");
+ this.define(expr, compileExpr(ast.name));
+ }
+ else {
+ expr = `\`${ast.name}\``;
+ }
+ if (this.dev) {
+ this.addLine(`helpers.validateProps(${expr}, ${propVar}, this);`);
+ }
+ if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
+ // todo: check the forcenewblock condition
+ this.insertAnchor(block);
+ }
+ let keyArg = this.generateComponentKey();
+ if (ctx.tKeyExpr) {
+ keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
+ }
+ let id = generateId("comp");
+ const propList = [];
+ for (let p in ast.props || {}) {
+ let [name, suffix] = p.split(".");
+ if (!suffix) {
+ propList.push(`"${name}"`);
+ }
+ }
+ this.staticDefs.push({
+ id,
+ expr: `app.createComponent(${ast.isDynamic ? null : expr}, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, [${propList}])`,
+ });
+ if (ast.isDynamic) {
+ // If the component class changes, this can cause delayed renders to go
+ // through if the key doesn't change. Use the component name for now.
+ // This means that two component classes with the same name isn't supported
+ // in t-component. We can generate a unique id per class later if needed.
+ keyArg = `(${expr}).name + ${keyArg}`;
+ }
+ let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
+ if (ast.isDynamic) {
+ blockExpr = `toggler(${expr}, ${blockExpr})`;
+ }
+ // event handling
+ if (ast.on) {
+ blockExpr = this.wrapWithEventCatcher(blockExpr, ast.on);
+ }
+ block = this.createBlock(block, "multi", ctx);
+ this.insertBlock(blockExpr, block, ctx);
+ return block.varName;
+ }
+ wrapWithEventCatcher(expr, on) {
+ this.helpers.add("createCatcher");
+ let name = generateId("catcher");
+ let spec = {};
+ let handlers = [];
+ for (let ev in on) {
+ let handlerId = generateId("hdlr");
+ let idx = handlers.push(handlerId) - 1;
+ spec[ev] = idx;
+ const handler = this.generateHandlerCode(ev, on[ev]);
+ this.define(handlerId, handler);
+ }
+ this.staticDefs.push({ id: name, expr: `createCatcher(${JSON.stringify(spec)})` });
+ return `${name}(${expr}, [${handlers.join(",")}])`;
+ }
+ compileTSlot(ast, ctx) {
+ this.helpers.add("callSlot");
+ let { block } = ctx;
+ let blockString;
+ let slotName;
+ let dynamic = false;
+ let isMultiple = false;
+ if (ast.name.match(INTERP_REGEXP)) {
+ dynamic = true;
+ isMultiple = true;
+ slotName = interpolate(ast.name);
+ }
+ else {
+ slotName = "'" + ast.name + "'";
+ isMultiple = isMultiple || this.slotNames.has(ast.name);
+ this.slotNames.add(ast.name);
+ }
+ const attrs = { ...ast.attrs };
+ const dynProps = attrs["t-props"];
+ delete attrs["t-props"];
+ let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
+ if (isMultiple) {
+ key = this.generateComponentKey(key);
+ }
+ const props = ast.attrs
+ ? this.formatPropObject(attrs, ast.attrsTranslationCtx, ctx.translationCtx)
+ : [];
+ const scope = this.getPropString(props, dynProps);
+ if (ast.defaultContent) {
+ const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
+ blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name}.bind(this))`;
+ }
+ else {
+ if (dynamic) {
+ let name = generateId("slot");
+ this.define(name, slotName);
+ blockString = `toggler(${name}, callSlot(ctx, node, ${key}, ${name}, ${dynamic}, ${scope}))`;
+ }
+ else {
+ blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope})`;
+ }
+ }
+ // event handling
+ if (ast.on) {
+ blockString = this.wrapWithEventCatcher(blockString, ast.on);
+ }
+ if (block) {
+ this.insertAnchor(block);
+ }
+ block = this.createBlock(block, "multi", ctx);
+ this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+ return block.varName;
+ }
+ compileTTranslation(ast, ctx) {
+ if (ast.content) {
+ return this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+ }
+ return null;
+ }
+ compileTTranslationContext(ast, ctx) {
+ if (ast.content) {
+ return this.compileAST(ast.content, Object.assign({}, ctx, { translationCtx: ast.translationCtx }));
+ }
+ return null;
+ }
+ compileTPortal(ast, ctx) {
+ if (!this.staticDefs.find((d) => d.id === "Portal")) {
+ this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
+ }
+ let { block } = ctx;
+ const name = this.compileInNewTarget("slot", ast.content, ctx);
+ let ctxStr = "ctx";
+ if (this.target.loopLevel || !this.hasSafeContext) {
+ ctxStr = generateId("ctx");
+ this.helpers.add("capture");
+ this.define(ctxStr, `capture(ctx)`);
+ }
+ let id = generateId("comp");
+ this.staticDefs.push({
+ id,
+ expr: `app.createComponent(null, false, true, false, false)`,
+ });
+ const target = compileExpr(ast.target);
+ const key = this.generateComponentKey();
+ const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, ${key}, node, ctx, Portal)`;
+ if (block) {
+ this.insertAnchor(block);
+ }
+ block = this.createBlock(block, "multi", ctx);
+ this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+ return block.varName;
+ }
+ }
+
+ // -----------------------------------------------------------------------------
+ // Parser
+ // -----------------------------------------------------------------------------
+ const cache = new WeakMap();
+ function parse(xml, customDir) {
+ const ctx = {
+ inPreTag: false,
+ customDirectives: customDir,
+ };
+ if (typeof xml === "string") {
+ const elem = parseXML(`${xml}`).firstChild;
+ return _parse(elem, ctx);
+ }
+ let ast = cache.get(xml);
+ if (!ast) {
+ // we clone here the xml to prevent modifying it in place
+ ast = _parse(xml.cloneNode(true), ctx);
+ cache.set(xml, ast);
+ }
+ return ast;
+ }
+ function _parse(xml, ctx) {
+ normalizeXML(xml);
+ return parseNode(xml, ctx) || { type: 0 /* Text */, value: "" };
+ }
+ function parseNode(node, ctx) {
+ if (!(node instanceof Element)) {
+ return parseTextCommentNode(node, ctx);
+ }
+ return (parseTCustom(node, ctx) ||
+ parseTDebugLog(node, ctx) ||
+ parseTForEach(node, ctx) ||
+ parseTIf(node, ctx) ||
+ parseTPortal(node, ctx) ||
+ parseTCall(node, ctx) ||
+ parseTCallBlock(node) ||
+ parseTTranslation(node, ctx) ||
+ parseTTranslationContext(node, ctx) ||
+ parseTKey(node, ctx) ||
+ parseTEscNode(node, ctx) ||
+ parseTOutNode(node, ctx) ||
+ parseTSlot(node, ctx) ||
+ parseComponent(node, ctx) ||
+ parseDOMNode(node, ctx) ||
+ parseTSetNode(node, ctx) ||
+ parseTNode(node, ctx));
+ }
+ // -----------------------------------------------------------------------------
+ // tag
+ // -----------------------------------------------------------------------------
+ function parseTNode(node, ctx) {
+ if (node.tagName !== "t") {
+ return null;
+ }
+ return parseChildNodes(node, ctx);
+ }
+ // -----------------------------------------------------------------------------
+ // Text and Comment Nodes
+ // -----------------------------------------------------------------------------
+ const lineBreakRE = /[\r\n]/;
+ function parseTextCommentNode(node, ctx) {
+ if (node.nodeType === Node.TEXT_NODE) {
+ let value = node.textContent || "";
+ if (!ctx.inPreTag && lineBreakRE.test(value) && !value.trim()) {
+ return null;
+ }
+ return { type: 0 /* Text */, value };
+ }
+ else if (node.nodeType === Node.COMMENT_NODE) {
+ return { type: 1 /* Comment */, value: node.textContent || "" };
+ }
+ return null;
+ }
+ function parseTCustom(node, ctx) {
+ if (!ctx.customDirectives) {
+ return null;
+ }
+ const nodeAttrsNames = node.getAttributeNames();
+ for (let attr of nodeAttrsNames) {
+ if (attr === "t-custom" || attr === "t-custom-") {
+ throw new OwlError("Missing custom directive name with t-custom directive");
+ }
+ if (attr.startsWith("t-custom-")) {
+ const directiveName = attr.split(".")[0].slice(9);
+ const customDirective = ctx.customDirectives[directiveName];
+ if (!customDirective) {
+ throw new OwlError(`Custom directive "${directiveName}" is not defined`);
+ }
+ const value = node.getAttribute(attr);
+ const modifiers = attr.split(".").slice(1);
+ node.removeAttribute(attr);
+ try {
+ customDirective(node, value, modifiers);
+ }
+ catch (error) {
+ throw new OwlError(`Custom directive "${directiveName}" throw the following error: ${error}`);
+ }
+ return parseNode(node, ctx);
+ }
+ }
+ return null;
+ }
+ // -----------------------------------------------------------------------------
+ // debugging
+ // -----------------------------------------------------------------------------
+ function parseTDebugLog(node, ctx) {
+ if (node.hasAttribute("t-debug")) {
+ node.removeAttribute("t-debug");
+ const content = parseNode(node, ctx);
+ const ast = {
+ type: 12 /* TDebug */,
+ content,
+ };
+ if (content === null || content === void 0 ? void 0 : content.hasNoRepresentation) {
+ ast.hasNoRepresentation = true;
+ }
+ return ast;
+ }
+ if (node.hasAttribute("t-log")) {
+ const expr = node.getAttribute("t-log");
+ node.removeAttribute("t-log");
+ const content = parseNode(node, ctx);
+ const ast = {
+ type: 13 /* TLog */,
+ expr,
+ content,
+ };
+ if (content === null || content === void 0 ? void 0 : content.hasNoRepresentation) {
+ ast.hasNoRepresentation = true;
+ }
+ return ast;
+ }
+ return null;
+ }
+ // -----------------------------------------------------------------------------
+ // Regular dom node
+ // -----------------------------------------------------------------------------
+ const hasDotAtTheEnd = /\.[\w_]+\s*$/;
+ const hasBracketsAtTheEnd = /\[[^\[]+\]\s*$/;
+ const ROOT_SVG_TAGS = new Set(["svg", "g", "path"]);
+ function parseDOMNode(node, ctx) {
+ const { tagName } = node;
+ const dynamicTag = node.getAttribute("t-tag");
+ node.removeAttribute("t-tag");
+ if (tagName === "t" && !dynamicTag) {
+ return null;
+ }
+ if (tagName.startsWith("block-")) {
+ throw new OwlError(`Invalid tag name: '${tagName}'`);
+ }
+ ctx = Object.assign({}, ctx);
+ if (tagName === "pre") {
+ ctx.inPreTag = true;
+ }
+ let ns = !ctx.nameSpace && ROOT_SVG_TAGS.has(tagName) ? "http://www.w3.org/2000/svg" : null;
+ const ref = node.getAttribute("t-ref");
+ node.removeAttribute("t-ref");
+ const nodeAttrsNames = node.getAttributeNames();
+ let attrs = null;
+ let attrsTranslationCtx = null;
+ let on = null;
+ let model = null;
+ for (let attr of nodeAttrsNames) {
+ const value = node.getAttribute(attr);
+ if (attr === "t-on" || attr === "t-on-") {
+ throw new OwlError("Missing event name with t-on directive");
+ }
+ if (attr.startsWith("t-on-")) {
+ on = on || {};
+ on[attr.slice(5)] = value;
+ }
+ else if (attr.startsWith("t-model")) {
+ if (!["input", "select", "textarea"].includes(tagName)) {
+ throw new OwlError("The t-model directive only works with ,
-
-
-
-
- it('should auto compile', function() {
- var textarea = $('textarea');
- var output = $('div[compile]');
- // The initial state reads 'Hello Angular'.
- expect(output.getText()).toBe('Hello Angular');
- textarea.clear();
- textarea.sendKeys('{{name}}!');
- expect(output.getText()).toBe('Angular!');
- });
-
-
-
- *
- *
- * @param {string|DOMElement} element Element or HTML string to compile into a template function.
- * @param {function(angular.Scope, cloneAttachFn=)} transclude function available to directives - DEPRECATED.
- *
- *
- * **Note:** Passing a `transclude` function to the $compile function is deprecated, as it
- * e.g. will not use the right outer scope. Please pass the transclude function as a
- * `parentBoundTranscludeFn` to the link function instead.
- *
- *
- * @param {number} maxPriority only apply directives lower than given priority (Only effects the
- * root element(s), not their children)
- * @returns {function(scope, cloneAttachFn=, options=)} a link function which is used to bind template
- * (a DOM element/tree) to a scope. Where:
- *
- * * `scope` - A {@link ng.$rootScope.Scope Scope} to bind to.
- * * `cloneAttachFn` - If `cloneAttachFn` is provided, then the link function will clone the
- * `template` and call the `cloneAttachFn` function allowing the caller to attach the
- * cloned elements to the DOM document at the appropriate place. The `cloneAttachFn` is
- * called as: `cloneAttachFn(clonedElement, scope)` where:
- *
- * * `clonedElement` - is a clone of the original `element` passed into the compiler.
- * * `scope` - is the current scope with which the linking function is working with.
- *
- * * `options` - An optional object hash with linking options. If `options` is provided, then the following
- * keys may be used to control linking behavior:
- *
- * * `parentBoundTranscludeFn` - the transclude function made available to
- * directives; if given, it will be passed through to the link functions of
- * directives found in `element` during compilation.
- * * `transcludeControllers` - an object hash with keys that map controller names
- * to a hash with the key `instance`, which maps to the controller instance;
- * if given, it will make the controllers available to directives on the compileNode:
- * ```
- * {
- * parent: {
- * instance: parentControllerInstance
- * }
- * }
- * ```
- * * `futureParentElement` - defines the parent to which the `cloneAttachFn` will add
- * the cloned elements; only needed for transcludes that are allowed to contain non html
- * elements (e.g. SVG elements). See also the directive.controller property.
- *
- * Calling the linking function returns the element of the template. It is either the original
- * element passed in, or the clone of the element if the `cloneAttachFn` is provided.
- *
- * After linking the view is not updated until after a call to $digest which typically is done by
- * Angular automatically.
- *
- * If you need access to the bound view, there are two ways to do it:
- *
- * - If you are not asking the linking function to clone the template, create the DOM element(s)
- * before you send them to the compiler and keep this reference around.
- * ```js
- * var element = $compile('
{{total}}
')(scope);
- * ```
- *
- * - if on the other hand, you need the element to be cloned, the view reference from the original
- * example would not point to the clone, but rather to the original template that was cloned. In
- * this case, you can access the clone via the cloneAttachFn:
- * ```js
- * var templateElement = angular.element('
{{total}}
'),
- * scope = ....;
- *
- * var clonedElement = $compile(templateElement)(scope, function(clonedElement, scope) {
- * //attach the clone to DOM document at the right place
- * });
- *
- * //now we have reference to the cloned DOM via `clonedElement`
- * ```
- *
- *
- * For information on how the compiler works, see the
- * {@link guide/compiler Angular HTML Compiler} section of the Developer Guide.
- *
- * @knownIssue
- *
- * ### Double Compilation
- *
- Double compilation occurs when an already compiled part of the DOM gets
- compiled again. This is an undesired effect and can lead to misbehaving directives, performance issues,
- and memory leaks. Refer to the Compiler Guide {@link guide/compiler#double-compilation-and-how-to-avoid-it
- section on double compilation} for an in-depth explanation and ways to avoid it.
- *
- */
-
-var $compileMinErr = minErr('$compile');
-
-function UNINITIALIZED_VALUE() {}
-var _UNINITIALIZED_VALUE = new UNINITIALIZED_VALUE();
-
-/**
- * @ngdoc provider
- * @name $compileProvider
- *
- * @description
- */
-$CompileProvider.$inject = ['$provide', '$$sanitizeUriProvider'];
-/** @this */
-function $CompileProvider($provide, $$sanitizeUriProvider) {
- var hasDirectives = {},
- Suffix = 'Directive',
- COMMENT_DIRECTIVE_REGEXP = /^\s*directive:\s*([\w-]+)\s+(.*)$/,
- CLASS_DIRECTIVE_REGEXP = /(([\w-]+)(?::([^;]+))?;?)/,
- ALL_OR_NOTHING_ATTRS = makeMap('ngSrc,ngSrcset,src,srcset'),
- REQUIRE_PREFIX_REGEXP = /^(?:(\^\^?)?(\?)?(\^\^?)?)?/;
-
- // Ref: http://developers.whatwg.org/webappapis.html#event-handler-idl-attributes
- // The assumption is that future DOM event attribute names will begin with
- // 'on' and be composed of only English letters.
- var EVENT_HANDLER_ATTR_REGEXP = /^(on[a-z]+|formaction)$/;
- var bindingCache = createMap();
-
- function parseIsolateBindings(scope, directiveName, isController) {
- var LOCAL_REGEXP = /^\s*([@&<]|=(\*?))(\??)\s*([\w$]*)\s*$/;
-
- var bindings = createMap();
-
- forEach(scope, function(definition, scopeName) {
- if (definition in bindingCache) {
- bindings[scopeName] = bindingCache[definition];
- return;
- }
- var match = definition.match(LOCAL_REGEXP);
-
- if (!match) {
- throw $compileMinErr('iscp',
- 'Invalid {3} for directive \'{0}\'.' +
- ' Definition: {... {1}: \'{2}\' ...}',
- directiveName, scopeName, definition,
- (isController ? 'controller bindings definition' :
- 'isolate scope definition'));
- }
-
- bindings[scopeName] = {
- mode: match[1][0],
- collection: match[2] === '*',
- optional: match[3] === '?',
- attrName: match[4] || scopeName
- };
- if (match[4]) {
- bindingCache[definition] = bindings[scopeName];
- }
- });
-
- return bindings;
- }
-
- function parseDirectiveBindings(directive, directiveName) {
- var bindings = {
- isolateScope: null,
- bindToController: null
- };
- if (isObject(directive.scope)) {
- if (directive.bindToController === true) {
- bindings.bindToController = parseIsolateBindings(directive.scope,
- directiveName, true);
- bindings.isolateScope = {};
- } else {
- bindings.isolateScope = parseIsolateBindings(directive.scope,
- directiveName, false);
- }
- }
- if (isObject(directive.bindToController)) {
- bindings.bindToController =
- parseIsolateBindings(directive.bindToController, directiveName, true);
- }
- if (bindings.bindToController && !directive.controller) {
- // There is no controller
- throw $compileMinErr('noctrl',
- 'Cannot bind to controller without directive \'{0}\'s controller.',
- directiveName);
- }
- return bindings;
- }
-
- function assertValidDirectiveName(name) {
- var letter = name.charAt(0);
- if (!letter || letter !== lowercase(letter)) {
- throw $compileMinErr('baddir', 'Directive/Component name \'{0}\' is invalid. The first character must be a lowercase letter', name);
- }
- if (name !== name.trim()) {
- throw $compileMinErr('baddir',
- 'Directive/Component name \'{0}\' is invalid. The name should not contain leading or trailing whitespaces',
- name);
- }
- }
-
- function getDirectiveRequire(directive) {
- var require = directive.require || (directive.controller && directive.name);
-
- if (!isArray(require) && isObject(require)) {
- forEach(require, function(value, key) {
- var match = value.match(REQUIRE_PREFIX_REGEXP);
- var name = value.substring(match[0].length);
- if (!name) require[key] = match[0] + key;
- });
- }
-
- return require;
- }
-
- function getDirectiveRestrict(restrict, name) {
- if (restrict && !(isString(restrict) && /[EACM]/.test(restrict))) {
- throw $compileMinErr('badrestrict',
- 'Restrict property \'{0}\' of directive \'{1}\' is invalid',
- restrict,
- name);
- }
-
- return restrict || 'EA';
- }
-
- /**
- * @ngdoc method
- * @name $compileProvider#directive
- * @kind function
- *
- * @description
- * Register a new directive with the compiler.
- *
- * @param {string|Object} name Name of the directive in camel-case (i.e. ngBind which
- * will match as ng-bind), or an object map of directives where the keys are the
- * names and the values are the factories.
- * @param {Function|Array} directiveFactory An injectable directive factory function. See the
- * {@link guide/directive directive guide} and the {@link $compile compile API} for more info.
- * @returns {ng.$compileProvider} Self for chaining.
- */
- this.directive = function registerDirective(name, directiveFactory) {
- assertArg(name, 'name');
- assertNotHasOwnProperty(name, 'directive');
- if (isString(name)) {
- assertValidDirectiveName(name);
- assertArg(directiveFactory, 'directiveFactory');
- if (!hasDirectives.hasOwnProperty(name)) {
- hasDirectives[name] = [];
- $provide.factory(name + Suffix, ['$injector', '$exceptionHandler',
- function($injector, $exceptionHandler) {
- var directives = [];
- forEach(hasDirectives[name], function(directiveFactory, index) {
- try {
- var directive = $injector.invoke(directiveFactory);
- if (isFunction(directive)) {
- directive = { compile: valueFn(directive) };
- } else if (!directive.compile && directive.link) {
- directive.compile = valueFn(directive.link);
- }
- directive.priority = directive.priority || 0;
- directive.index = index;
- directive.name = directive.name || name;
- directive.require = getDirectiveRequire(directive);
- directive.restrict = getDirectiveRestrict(directive.restrict, name);
- directive.$$moduleName = directiveFactory.$$moduleName;
- directives.push(directive);
- } catch (e) {
- $exceptionHandler(e);
- }
- });
- return directives;
- }]);
- }
- hasDirectives[name].push(directiveFactory);
- } else {
- forEach(name, reverseParams(registerDirective));
- }
- return this;
- };
-
- /**
- * @ngdoc method
- * @name $compileProvider#component
- * @module ng
- * @param {string} name Name of the component in camelCase (i.e. `myComp` which will match ``)
- * @param {Object} options Component definition object (a simplified
- * {@link ng.$compile#directive-definition-object directive definition object}),
- * with the following properties (all optional):
- *
- * - `controller` – `{(string|function()=}` – controller constructor function that should be
- * associated with newly created scope or the name of a {@link ng.$compile#-controller-
- * registered controller} if passed as a string. An empty `noop` function by default.
- * - `controllerAs` – `{string=}` – identifier name for to reference the controller in the component's scope.
- * If present, the controller will be published to scope under the `controllerAs` name.
- * If not present, this will default to be `$ctrl`.
- * - `template` – `{string=|function()=}` – html template as a string or a function that
- * returns an html template as a string which should be used as the contents of this component.
- * Empty string by default.
- *
- * If `template` is a function, then it is {@link auto.$injector#invoke injected} with
- * the following locals:
- *
- * - `$element` - Current element
- * - `$attrs` - Current attributes object for the element
- *
- * - `templateUrl` – `{string=|function()=}` – path or function that returns a path to an html
- * template that should be used as the contents of this component.
- *
- * If `templateUrl` is a function, then it is {@link auto.$injector#invoke injected} with
- * the following locals:
- *
- * - `$element` - Current element
- * - `$attrs` - Current attributes object for the element
- *
- * - `bindings` – `{object=}` – defines bindings between DOM attributes and component properties.
- * Component properties are always bound to the component controller and not to the scope.
- * See {@link ng.$compile#-bindtocontroller- `bindToController`}.
- * - `transclude` – `{boolean=}` – whether {@link $compile#transclusion content transclusion} is enabled.
- * Disabled by default.
- * - `require` - `{Object=}` - requires the controllers of other directives and binds them to
- * this component's controller. The object keys specify the property names under which the required
- * controllers (object values) will be bound. See {@link ng.$compile#-require- `require`}.
- * - `$...` – additional properties to attach to the directive factory function and the controller
- * constructor function. (This is used by the component router to annotate)
- *
- * @returns {ng.$compileProvider} the compile provider itself, for chaining of function calls.
- * @description
- * Register a **component definition** with the compiler. This is a shorthand for registering a special
- * type of directive, which represents a self-contained UI component in your application. Such components
- * are always isolated (i.e. `scope: {}`) and are always restricted to elements (i.e. `restrict: 'E'`).
- *
- * Component definitions are very simple and do not require as much configuration as defining general
- * directives. Component definitions usually consist only of a template and a controller backing it.
- *
- * In order to make the definition easier, components enforce best practices like use of `controllerAs`,
- * `bindToController`. They always have **isolate scope** and are restricted to elements.
- *
- * Here are a few examples of how you would usually define components:
- *
- * ```js
- * var myMod = angular.module(...);
- * myMod.component('myComp', {
- * template: '
',
- * bindings: {name: '@'}
- * });
- *
- * myMod.component('myComp', {
- * templateUrl: 'views/my-comp.html',
- * controller: 'MyCtrl',
- * controllerAs: 'ctrl',
- * bindings: {name: '@'}
- * });
- *
- * ```
- * For more examples, and an in-depth guide, see the {@link guide/component component guide}.
- *
- *
- * See also {@link ng.$compileProvider#directive $compileProvider.directive()}.
- */
- this.component = function registerComponent(name, options) {
- var controller = options.controller || function() {};
-
- function factory($injector) {
- function makeInjectable(fn) {
- if (isFunction(fn) || isArray(fn)) {
- return /** @this */ function(tElement, tAttrs) {
- return $injector.invoke(fn, this, {$element: tElement, $attrs: tAttrs});
- };
- } else {
- return fn;
- }
- }
-
- var template = (!options.template && !options.templateUrl ? '' : options.template);
- var ddo = {
- controller: controller,
- controllerAs: identifierForController(options.controller) || options.controllerAs || '$ctrl',
- template: makeInjectable(template),
- templateUrl: makeInjectable(options.templateUrl),
- transclude: options.transclude,
- scope: {},
- bindToController: options.bindings || {},
- restrict: 'E',
- require: options.require
- };
-
- // Copy annotations (starting with $) over to the DDO
- forEach(options, function(val, key) {
- if (key.charAt(0) === '$') ddo[key] = val;
- });
-
- return ddo;
- }
-
- // TODO(pete) remove the following `forEach` before we release 1.6.0
- // The component-router@0.2.0 looks for the annotations on the controller constructor
- // Nothing in Angular looks for annotations on the factory function but we can't remove
- // it from 1.5.x yet.
-
- // Copy any annotation properties (starting with $) over to the factory and controller constructor functions
- // These could be used by libraries such as the new component router
- forEach(options, function(val, key) {
- if (key.charAt(0) === '$') {
- factory[key] = val;
- // Don't try to copy over annotations to named controller
- if (isFunction(controller)) controller[key] = val;
- }
- });
-
- factory.$inject = ['$injector'];
-
- return this.directive(name, factory);
- };
-
-
- /**
- * @ngdoc method
- * @name $compileProvider#aHrefSanitizationWhitelist
- * @kind function
- *
- * @description
- * Retrieves or overrides the default regular expression that is used for whitelisting of safe
- * urls during a[href] sanitization.
- *
- * The sanitization is a security measure aimed at preventing XSS attacks via html links.
- *
- * Any url about to be assigned to a[href] via data-binding is first normalized and turned into
- * an absolute url. Afterwards, the url is matched against the `aHrefSanitizationWhitelist`
- * regular expression. If a match is found, the original url is written into the dom. Otherwise,
- * the absolute url is prefixed with `'unsafe:'` string and only then is it written into the DOM.
- *
- * @param {RegExp=} regexp New regexp to whitelist urls with.
- * @returns {RegExp|ng.$compileProvider} Current RegExp if called without value or self for
- * chaining otherwise.
- */
- this.aHrefSanitizationWhitelist = function(regexp) {
- if (isDefined(regexp)) {
- $$sanitizeUriProvider.aHrefSanitizationWhitelist(regexp);
- return this;
- } else {
- return $$sanitizeUriProvider.aHrefSanitizationWhitelist();
- }
- };
-
-
- /**
- * @ngdoc method
- * @name $compileProvider#imgSrcSanitizationWhitelist
- * @kind function
- *
- * @description
- * Retrieves or overrides the default regular expression that is used for whitelisting of safe
- * urls during img[src] sanitization.
- *
- * The sanitization is a security measure aimed at prevent XSS attacks via html links.
- *
- * Any url about to be assigned to img[src] via data-binding is first normalized and turned into
- * an absolute url. Afterwards, the url is matched against the `imgSrcSanitizationWhitelist`
- * regular expression. If a match is found, the original url is written into the dom. Otherwise,
- * the absolute url is prefixed with `'unsafe:'` string and only then is it written into the DOM.
- *
- * @param {RegExp=} regexp New regexp to whitelist urls with.
- * @returns {RegExp|ng.$compileProvider} Current RegExp if called without value or self for
- * chaining otherwise.
- */
- this.imgSrcSanitizationWhitelist = function(regexp) {
- if (isDefined(regexp)) {
- $$sanitizeUriProvider.imgSrcSanitizationWhitelist(regexp);
- return this;
- } else {
- return $$sanitizeUriProvider.imgSrcSanitizationWhitelist();
- }
- };
-
- /**
- * @ngdoc method
- * @name $compileProvider#debugInfoEnabled
- *
- * @param {boolean=} enabled update the debugInfoEnabled state if provided, otherwise just return the
- * current debugInfoEnabled state
- * @returns {*} current value if used as getter or itself (chaining) if used as setter
- *
- * @kind function
- *
- * @description
- * Call this method to enable/disable various debug runtime information in the compiler such as adding
- * binding information and a reference to the current scope on to DOM elements.
- * If enabled, the compiler will add the following to DOM elements that have been bound to the scope
- * * `ng-binding` CSS class
- * * `$binding` data property containing an array of the binding expressions
- *
- * You may want to disable this in production for a significant performance boost. See
- * {@link guide/production#disabling-debug-data Disabling Debug Data} for more.
- *
- * The default value is true.
- */
- var debugInfoEnabled = true;
- this.debugInfoEnabled = function(enabled) {
- if (isDefined(enabled)) {
- debugInfoEnabled = enabled;
- return this;
- }
- return debugInfoEnabled;
- };
-
- /**
- * @ngdoc method
- * @name $compileProvider#preAssignBindingsEnabled
- *
- * @param {boolean=} enabled update the preAssignBindingsEnabled state if provided, otherwise just return the
- * current preAssignBindingsEnabled state
- * @returns {*} current value if used as getter or itself (chaining) if used as setter
- *
- * @kind function
- *
- * @description
- * Call this method to enable/disable whether directive controllers are assigned bindings before
- * calling the controller's constructor.
- * If enabled (true), the compiler assigns the value of each of the bindings to the
- * properties of the controller object before the constructor of this object is called.
- *
- * If disabled (false), the compiler calls the constructor first before assigning bindings.
- *
- * The default value is false.
- *
- * @deprecated
- * sinceVersion="1.6.0"
- * removeVersion="1.7.0"
- *
- * This method and the option to assign the bindings before calling the controller's constructor
- * will be removed in v1.7.0.
- */
- var preAssignBindingsEnabled = false;
- this.preAssignBindingsEnabled = function(enabled) {
- if (isDefined(enabled)) {
- preAssignBindingsEnabled = enabled;
- return this;
- }
- return preAssignBindingsEnabled;
- };
-
-
- var TTL = 10;
- /**
- * @ngdoc method
- * @name $compileProvider#onChangesTtl
- * @description
- *
- * Sets the number of times `$onChanges` hooks can trigger new changes before giving up and
- * assuming that the model is unstable.
- *
- * The current default is 10 iterations.
- *
- * In complex applications it's possible that dependencies between `$onChanges` hooks and bindings will result
- * in several iterations of calls to these hooks. However if an application needs more than the default 10
- * iterations to stabilize then you should investigate what is causing the model to continuously change during
- * the `$onChanges` hook execution.
- *
- * Increasing the TTL could have performance implications, so you should not change it without proper justification.
- *
- * @param {number} limit The number of `$onChanges` hook iterations.
- * @returns {number|object} the current limit (or `this` if called as a setter for chaining)
- */
- this.onChangesTtl = function(value) {
- if (arguments.length) {
- TTL = value;
- return this;
- }
- return TTL;
- };
-
- var commentDirectivesEnabledConfig = true;
- /**
- * @ngdoc method
- * @name $compileProvider#commentDirectivesEnabled
- * @description
- *
- * It indicates to the compiler
- * whether or not directives on comments should be compiled.
- * Defaults to `true`.
- *
- * Calling this function with false disables the compilation of directives
- * on comments for the whole application.
- * This results in a compilation performance gain,
- * as the compiler doesn't have to check comments when looking for directives.
- * This should however only be used if you are sure that no comment directives are used in
- * the application (including any 3rd party directives).
- *
- * @param {boolean} enabled `false` if the compiler may ignore directives on comments
- * @returns {boolean|object} the current value (or `this` if called as a setter for chaining)
- */
- this.commentDirectivesEnabled = function(value) {
- if (arguments.length) {
- commentDirectivesEnabledConfig = value;
- return this;
- }
- return commentDirectivesEnabledConfig;
- };
-
-
- var cssClassDirectivesEnabledConfig = true;
- /**
- * @ngdoc method
- * @name $compileProvider#cssClassDirectivesEnabled
- * @description
- *
- * It indicates to the compiler
- * whether or not directives on element classes should be compiled.
- * Defaults to `true`.
- *
- * Calling this function with false disables the compilation of directives
- * on element classes for the whole application.
- * This results in a compilation performance gain,
- * as the compiler doesn't have to check element classes when looking for directives.
- * This should however only be used if you are sure that no class directives are used in
- * the application (including any 3rd party directives).
- *
- * @param {boolean} enabled `false` if the compiler may ignore directives on element classes
- * @returns {boolean|object} the current value (or `this` if called as a setter for chaining)
- */
- this.cssClassDirectivesEnabled = function(value) {
- if (arguments.length) {
- cssClassDirectivesEnabledConfig = value;
- return this;
- }
- return cssClassDirectivesEnabledConfig;
- };
-
- this.$get = [
- '$injector', '$interpolate', '$exceptionHandler', '$templateRequest', '$parse',
- '$controller', '$rootScope', '$sce', '$animate', '$$sanitizeUri',
- function($injector, $interpolate, $exceptionHandler, $templateRequest, $parse,
- $controller, $rootScope, $sce, $animate, $$sanitizeUri) {
-
- var SIMPLE_ATTR_NAME = /^\w/;
- var specialAttrHolder = window.document.createElement('div');
-
-
- var commentDirectivesEnabled = commentDirectivesEnabledConfig;
- var cssClassDirectivesEnabled = cssClassDirectivesEnabledConfig;
-
-
- var onChangesTtl = TTL;
- // The onChanges hooks should all be run together in a single digest
- // When changes occur, the call to trigger their hooks will be added to this queue
- var onChangesQueue;
-
- // This function is called in a $$postDigest to trigger all the onChanges hooks in a single digest
- function flushOnChangesQueue() {
- try {
- if (!(--onChangesTtl)) {
- // We have hit the TTL limit so reset everything
- onChangesQueue = undefined;
- throw $compileMinErr('infchng', '{0} $onChanges() iterations reached. Aborting!\n', TTL);
- }
- // We must run this hook in an apply since the $$postDigest runs outside apply
- $rootScope.$apply(function() {
- var errors = [];
- for (var i = 0, ii = onChangesQueue.length; i < ii; ++i) {
- try {
- onChangesQueue[i]();
- } catch (e) {
- errors.push(e);
- }
- }
- // Reset the queue to trigger a new schedule next time there is a change
- onChangesQueue = undefined;
- if (errors.length) {
- throw errors;
- }
- });
- } finally {
- onChangesTtl++;
- }
- }
-
-
- function Attributes(element, attributesToCopy) {
- if (attributesToCopy) {
- var keys = Object.keys(attributesToCopy);
- var i, l, key;
-
- for (i = 0, l = keys.length; i < l; i++) {
- key = keys[i];
- this[key] = attributesToCopy[key];
- }
- } else {
- this.$attr = {};
- }
-
- this.$$element = element;
- }
-
- Attributes.prototype = {
- /**
- * @ngdoc method
- * @name $compile.directive.Attributes#$normalize
- * @kind function
- *
- * @description
- * Converts an attribute name (e.g. dash/colon/underscore-delimited string, optionally prefixed with `x-` or
- * `data-`) to its normalized, camelCase form.
- *
- * Also there is special case for Moz prefix starting with upper case letter.
- *
- * For further information check out the guide on {@link guide/directive#matching-directives Matching Directives}
- *
- * @param {string} name Name to normalize
- */
- $normalize: directiveNormalize,
-
-
- /**
- * @ngdoc method
- * @name $compile.directive.Attributes#$addClass
- * @kind function
- *
- * @description
- * Adds the CSS class value specified by the classVal parameter to the element. If animations
- * are enabled then an animation will be triggered for the class addition.
- *
- * @param {string} classVal The className value that will be added to the element
- */
- $addClass: function(classVal) {
- if (classVal && classVal.length > 0) {
- $animate.addClass(this.$$element, classVal);
- }
- },
-
- /**
- * @ngdoc method
- * @name $compile.directive.Attributes#$removeClass
- * @kind function
- *
- * @description
- * Removes the CSS class value specified by the classVal parameter from the element. If
- * animations are enabled then an animation will be triggered for the class removal.
- *
- * @param {string} classVal The className value that will be removed from the element
- */
- $removeClass: function(classVal) {
- if (classVal && classVal.length > 0) {
- $animate.removeClass(this.$$element, classVal);
- }
- },
-
- /**
- * @ngdoc method
- * @name $compile.directive.Attributes#$updateClass
- * @kind function
- *
- * @description
- * Adds and removes the appropriate CSS class values to the element based on the difference
- * between the new and old CSS class values (specified as newClasses and oldClasses).
- *
- * @param {string} newClasses The current CSS className value
- * @param {string} oldClasses The former CSS className value
- */
- $updateClass: function(newClasses, oldClasses) {
- var toAdd = tokenDifference(newClasses, oldClasses);
- if (toAdd && toAdd.length) {
- $animate.addClass(this.$$element, toAdd);
- }
-
- var toRemove = tokenDifference(oldClasses, newClasses);
- if (toRemove && toRemove.length) {
- $animate.removeClass(this.$$element, toRemove);
- }
- },
-
- /**
- * Set a normalized attribute on the element in a way such that all directives
- * can share the attribute. This function properly handles boolean attributes.
- * @param {string} key Normalized key. (ie ngAttribute)
- * @param {string|boolean} value The value to set. If `null` attribute will be deleted.
- * @param {boolean=} writeAttr If false, does not write the value to DOM element attribute.
- * Defaults to true.
- * @param {string=} attrName Optional none normalized name. Defaults to key.
- */
- $set: function(key, value, writeAttr, attrName) {
- // TODO: decide whether or not to throw an error if "class"
- //is set through this function since it may cause $updateClass to
- //become unstable.
-
- var node = this.$$element[0],
- booleanKey = getBooleanAttrName(node, key),
- aliasedKey = getAliasedAttrName(key),
- observer = key,
- nodeName;
-
- if (booleanKey) {
- this.$$element.prop(key, value);
- attrName = booleanKey;
- } else if (aliasedKey) {
- this[aliasedKey] = value;
- observer = aliasedKey;
- }
-
- this[key] = value;
-
- // translate normalized key to actual key
- if (attrName) {
- this.$attr[key] = attrName;
- } else {
- attrName = this.$attr[key];
- if (!attrName) {
- this.$attr[key] = attrName = snake_case(key, '-');
- }
- }
-
- nodeName = nodeName_(this.$$element);
-
- if ((nodeName === 'a' && (key === 'href' || key === 'xlinkHref')) ||
- (nodeName === 'img' && key === 'src')) {
- // sanitize a[href] and img[src] values
- this[key] = value = $$sanitizeUri(value, key === 'src');
- } else if (nodeName === 'img' && key === 'srcset' && isDefined(value)) {
- // sanitize img[srcset] values
- var result = '';
-
- // first check if there are spaces because it's not the same pattern
- var trimmedSrcset = trim(value);
- // ( 999x ,| 999w ,| ,|, )
- var srcPattern = /(\s+\d+x\s*,|\s+\d+w\s*,|\s+,|,\s+)/;
- var pattern = /\s/.test(trimmedSrcset) ? srcPattern : /(,)/;
-
- // split srcset into tuple of uri and descriptor except for the last item
- var rawUris = trimmedSrcset.split(pattern);
-
- // for each tuples
- var nbrUrisWith2parts = Math.floor(rawUris.length / 2);
- for (var i = 0; i < nbrUrisWith2parts; i++) {
- var innerIdx = i * 2;
- // sanitize the uri
- result += $$sanitizeUri(trim(rawUris[innerIdx]), true);
- // add the descriptor
- result += (' ' + trim(rawUris[innerIdx + 1]));
- }
-
- // split the last item into uri and descriptor
- var lastTuple = trim(rawUris[i * 2]).split(/\s/);
-
- // sanitize the last uri
- result += $$sanitizeUri(trim(lastTuple[0]), true);
-
- // and add the last descriptor if any
- if (lastTuple.length === 2) {
- result += (' ' + trim(lastTuple[1]));
- }
- this[key] = value = result;
- }
-
- if (writeAttr !== false) {
- if (value === null || isUndefined(value)) {
- this.$$element.removeAttr(attrName);
- } else {
- if (SIMPLE_ATTR_NAME.test(attrName)) {
- this.$$element.attr(attrName, value);
- } else {
- setSpecialAttr(this.$$element[0], attrName, value);
- }
- }
- }
-
- // fire observers
- var $$observers = this.$$observers;
- if ($$observers) {
- forEach($$observers[observer], function(fn) {
- try {
- fn(value);
- } catch (e) {
- $exceptionHandler(e);
- }
- });
- }
- },
-
-
- /**
- * @ngdoc method
- * @name $compile.directive.Attributes#$observe
- * @kind function
- *
- * @description
- * Observes an interpolated attribute.
- *
- * The observer function will be invoked once during the next `$digest` following
- * compilation. The observer is then invoked whenever the interpolated value
- * changes.
- *
- * @param {string} key Normalized key. (ie ngAttribute) .
- * @param {function(interpolatedValue)} fn Function that will be called whenever
- the interpolated value of the attribute changes.
- * See the {@link guide/interpolation#how-text-and-attribute-bindings-work Interpolation
- * guide} for more info.
- * @returns {function()} Returns a deregistration function for this observer.
- */
- $observe: function(key, fn) {
- var attrs = this,
- $$observers = (attrs.$$observers || (attrs.$$observers = createMap())),
- listeners = ($$observers[key] || ($$observers[key] = []));
-
- listeners.push(fn);
- $rootScope.$evalAsync(function() {
- if (!listeners.$$inter && attrs.hasOwnProperty(key) && !isUndefined(attrs[key])) {
- // no one registered attribute interpolation function, so lets call it manually
- fn(attrs[key]);
- }
- });
-
- return function() {
- arrayRemove(listeners, fn);
- };
- }
- };
-
- function setSpecialAttr(element, attrName, value) {
- // Attributes names that do not start with letters (such as `(click)`) cannot be set using `setAttribute`
- // so we have to jump through some hoops to get such an attribute
- // https://github.com/angular/angular.js/pull/13318
- specialAttrHolder.innerHTML = '';
- var attributes = specialAttrHolder.firstChild.attributes;
- var attribute = attributes[0];
- // We have to remove the attribute from its container element before we can add it to the destination element
- attributes.removeNamedItem(attribute.name);
- attribute.value = value;
- element.attributes.setNamedItem(attribute);
- }
-
- function safeAddClass($element, className) {
- try {
- $element.addClass(className);
- } catch (e) {
- // ignore, since it means that we are trying to set class on
- // SVG element, where class name is read-only.
- }
- }
-
-
- var startSymbol = $interpolate.startSymbol(),
- endSymbol = $interpolate.endSymbol(),
- denormalizeTemplate = (startSymbol === '{{' && endSymbol === '}}')
- ? identity
- : function denormalizeTemplate(template) {
- return template.replace(/\{\{/g, startSymbol).replace(/}}/g, endSymbol);
- },
- NG_ATTR_BINDING = /^ngAttr[A-Z]/;
- var MULTI_ELEMENT_DIR_RE = /^(.+)Start$/;
-
- compile.$$addBindingInfo = debugInfoEnabled ? function $$addBindingInfo($element, binding) {
- var bindings = $element.data('$binding') || [];
-
- if (isArray(binding)) {
- bindings = bindings.concat(binding);
- } else {
- bindings.push(binding);
- }
-
- $element.data('$binding', bindings);
- } : noop;
-
- compile.$$addBindingClass = debugInfoEnabled ? function $$addBindingClass($element) {
- safeAddClass($element, 'ng-binding');
- } : noop;
-
- compile.$$addScopeInfo = debugInfoEnabled ? function $$addScopeInfo($element, scope, isolated, noTemplate) {
- var dataName = isolated ? (noTemplate ? '$isolateScopeNoTemplate' : '$isolateScope') : '$scope';
- $element.data(dataName, scope);
- } : noop;
-
- compile.$$addScopeClass = debugInfoEnabled ? function $$addScopeClass($element, isolated) {
- safeAddClass($element, isolated ? 'ng-isolate-scope' : 'ng-scope');
- } : noop;
-
- compile.$$createComment = function(directiveName, comment) {
- var content = '';
- if (debugInfoEnabled) {
- content = ' ' + (directiveName || '') + ': ';
- if (comment) content += comment + ' ';
- }
- return window.document.createComment(content);
- };
-
- return compile;
-
- //================================
-
- function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective,
- previousCompileContext) {
- if (!($compileNodes instanceof jqLite)) {
- // jquery always rewraps, whereas we need to preserve the original selector so that we can
- // modify it.
- $compileNodes = jqLite($compileNodes);
- }
- var compositeLinkFn =
- compileNodes($compileNodes, transcludeFn, $compileNodes,
- maxPriority, ignoreDirective, previousCompileContext);
- compile.$$addScopeClass($compileNodes);
- var namespace = null;
- return function publicLinkFn(scope, cloneConnectFn, options) {
- if (!$compileNodes) {
- throw $compileMinErr('multilink', 'This element has already been linked.');
- }
- assertArg(scope, 'scope');
-
- if (previousCompileContext && previousCompileContext.needsNewScope) {
- // A parent directive did a replace and a directive on this element asked
- // for transclusion, which caused us to lose a layer of element on which
- // we could hold the new transclusion scope, so we will create it manually
- // here.
- scope = scope.$parent.$new();
- }
-
- options = options || {};
- var parentBoundTranscludeFn = options.parentBoundTranscludeFn,
- transcludeControllers = options.transcludeControllers,
- futureParentElement = options.futureParentElement;
-
- // When `parentBoundTranscludeFn` is passed, it is a
- // `controllersBoundTransclude` function (it was previously passed
- // as `transclude` to directive.link) so we must unwrap it to get
- // its `boundTranscludeFn`
- if (parentBoundTranscludeFn && parentBoundTranscludeFn.$$boundTransclude) {
- parentBoundTranscludeFn = parentBoundTranscludeFn.$$boundTransclude;
- }
-
- if (!namespace) {
- namespace = detectNamespaceForChildElements(futureParentElement);
- }
- var $linkNode;
- if (namespace !== 'html') {
- // When using a directive with replace:true and templateUrl the $compileNodes
- // (or a child element inside of them)
- // might change, so we need to recreate the namespace adapted compileNodes
- // for call to the link function.
- // Note: This will already clone the nodes...
- $linkNode = jqLite(
- wrapTemplate(namespace, jqLite('
').append($compileNodes).html())
- );
- } else if (cloneConnectFn) {
- // important!!: we must call our jqLite.clone() since the jQuery one is trying to be smart
- // and sometimes changes the structure of the DOM.
- $linkNode = JQLitePrototype.clone.call($compileNodes);
- } else {
- $linkNode = $compileNodes;
- }
-
- if (transcludeControllers) {
- for (var controllerName in transcludeControllers) {
- $linkNode.data('$' + controllerName + 'Controller', transcludeControllers[controllerName].instance);
- }
- }
-
- compile.$$addScopeInfo($linkNode, scope);
-
- if (cloneConnectFn) cloneConnectFn($linkNode, scope);
- if (compositeLinkFn) compositeLinkFn(scope, $linkNode, $linkNode, parentBoundTranscludeFn);
-
- if (!cloneConnectFn) {
- $compileNodes = compositeLinkFn = null;
- }
- return $linkNode;
- };
- }
-
- function detectNamespaceForChildElements(parentElement) {
- // TODO: Make this detect MathML as well...
- var node = parentElement && parentElement[0];
- if (!node) {
- return 'html';
- } else {
- return nodeName_(node) !== 'foreignobject' && toString.call(node).match(/SVG/) ? 'svg' : 'html';
- }
- }
-
- /**
- * Compile function matches each node in nodeList against the directives. Once all directives
- * for a particular node are collected their compile functions are executed. The compile
- * functions return values - the linking functions - are combined into a composite linking
- * function, which is the a linking function for the node.
- *
- * @param {NodeList} nodeList an array of nodes or NodeList to compile
- * @param {function(angular.Scope, cloneAttachFn=)} transcludeFn A linking function, where the
- * scope argument is auto-generated to the new child of the transcluded parent scope.
- * @param {DOMElement=} $rootElement If the nodeList is the root of the compilation tree then
- * the rootElement must be set the jqLite collection of the compile root. This is
- * needed so that the jqLite collection items can be replaced with widgets.
- * @param {number=} maxPriority Max directive priority.
- * @returns {Function} A composite linking function of all of the matched directives or null.
- */
- function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority, ignoreDirective,
- previousCompileContext) {
- var linkFns = [],
- // `nodeList` can be either an element's `.childNodes` (live NodeList)
- // or a jqLite/jQuery collection or an array
- notLiveList = isArray(nodeList) || (nodeList instanceof jqLite),
- attrs, directives, nodeLinkFn, childNodes, childLinkFn, linkFnFound, nodeLinkFnFound;
-
-
- for (var i = 0; i < nodeList.length; i++) {
- attrs = new Attributes();
-
- // Support: IE 11 only
- // Workaround for #11781 and #14924
- if (msie === 11) {
- mergeConsecutiveTextNodes(nodeList, i, notLiveList);
- }
-
- // We must always refer to `nodeList[i]` hereafter,
- // since the nodes can be replaced underneath us.
- directives = collectDirectives(nodeList[i], [], attrs, i === 0 ? maxPriority : undefined,
- ignoreDirective);
-
- nodeLinkFn = (directives.length)
- ? applyDirectivesToNode(directives, nodeList[i], attrs, transcludeFn, $rootElement,
- null, [], [], previousCompileContext)
- : null;
-
- if (nodeLinkFn && nodeLinkFn.scope) {
- compile.$$addScopeClass(attrs.$$element);
- }
-
- childLinkFn = (nodeLinkFn && nodeLinkFn.terminal ||
- !(childNodes = nodeList[i].childNodes) ||
- !childNodes.length)
- ? null
- : compileNodes(childNodes,
- nodeLinkFn ? (
- (nodeLinkFn.transcludeOnThisElement || !nodeLinkFn.templateOnThisElement)
- && nodeLinkFn.transclude) : transcludeFn);
-
- if (nodeLinkFn || childLinkFn) {
- linkFns.push(i, nodeLinkFn, childLinkFn);
- linkFnFound = true;
- nodeLinkFnFound = nodeLinkFnFound || nodeLinkFn;
- }
-
- //use the previous context only for the first element in the virtual group
- previousCompileContext = null;
- }
-
- // return a linking function if we have found anything, null otherwise
- return linkFnFound ? compositeLinkFn : null;
-
- function compositeLinkFn(scope, nodeList, $rootElement, parentBoundTranscludeFn) {
- var nodeLinkFn, childLinkFn, node, childScope, i, ii, idx, childBoundTranscludeFn;
- var stableNodeList;
-
-
- if (nodeLinkFnFound) {
- // copy nodeList so that if a nodeLinkFn removes or adds an element at this DOM level our
- // offsets don't get screwed up
- var nodeListLength = nodeList.length;
- stableNodeList = new Array(nodeListLength);
-
- // create a sparse array by only copying the elements which have a linkFn
- for (i = 0; i < linkFns.length; i += 3) {
- idx = linkFns[i];
- stableNodeList[idx] = nodeList[idx];
- }
- } else {
- stableNodeList = nodeList;
- }
-
- for (i = 0, ii = linkFns.length; i < ii;) {
- node = stableNodeList[linkFns[i++]];
- nodeLinkFn = linkFns[i++];
- childLinkFn = linkFns[i++];
-
- if (nodeLinkFn) {
- if (nodeLinkFn.scope) {
- childScope = scope.$new();
- compile.$$addScopeInfo(jqLite(node), childScope);
- } else {
- childScope = scope;
- }
-
- if (nodeLinkFn.transcludeOnThisElement) {
- childBoundTranscludeFn = createBoundTranscludeFn(
- scope, nodeLinkFn.transclude, parentBoundTranscludeFn);
-
- } else if (!nodeLinkFn.templateOnThisElement && parentBoundTranscludeFn) {
- childBoundTranscludeFn = parentBoundTranscludeFn;
-
- } else if (!parentBoundTranscludeFn && transcludeFn) {
- childBoundTranscludeFn = createBoundTranscludeFn(scope, transcludeFn);
-
- } else {
- childBoundTranscludeFn = null;
- }
-
- nodeLinkFn(childLinkFn, childScope, node, $rootElement, childBoundTranscludeFn);
-
- } else if (childLinkFn) {
- childLinkFn(scope, node.childNodes, undefined, parentBoundTranscludeFn);
- }
- }
- }
- }
-
- function mergeConsecutiveTextNodes(nodeList, idx, notLiveList) {
- var node = nodeList[idx];
- var parent = node.parentNode;
- var sibling;
-
- if (node.nodeType !== NODE_TYPE_TEXT) {
- return;
- }
-
- while (true) {
- sibling = parent ? node.nextSibling : nodeList[idx + 1];
- if (!sibling || sibling.nodeType !== NODE_TYPE_TEXT) {
- break;
- }
-
- node.nodeValue = node.nodeValue + sibling.nodeValue;
-
- if (sibling.parentNode) {
- sibling.parentNode.removeChild(sibling);
- }
- if (notLiveList && sibling === nodeList[idx + 1]) {
- nodeList.splice(idx + 1, 1);
- }
- }
- }
-
- function createBoundTranscludeFn(scope, transcludeFn, previousBoundTranscludeFn) {
- function boundTranscludeFn(transcludedScope, cloneFn, controllers, futureParentElement, containingScope) {
-
- if (!transcludedScope) {
- transcludedScope = scope.$new(false, containingScope);
- transcludedScope.$$transcluded = true;
- }
-
- return transcludeFn(transcludedScope, cloneFn, {
- parentBoundTranscludeFn: previousBoundTranscludeFn,
- transcludeControllers: controllers,
- futureParentElement: futureParentElement
- });
- }
-
- // We need to attach the transclusion slots onto the `boundTranscludeFn`
- // so that they are available inside the `controllersBoundTransclude` function
- var boundSlots = boundTranscludeFn.$$slots = createMap();
- for (var slotName in transcludeFn.$$slots) {
- if (transcludeFn.$$slots[slotName]) {
- boundSlots[slotName] = createBoundTranscludeFn(scope, transcludeFn.$$slots[slotName], previousBoundTranscludeFn);
- } else {
- boundSlots[slotName] = null;
- }
- }
-
- return boundTranscludeFn;
- }
-
- /**
- * Looks for directives on the given node and adds them to the directive collection which is
- * sorted.
- *
- * @param node Node to search.
- * @param directives An array to which the directives are added to. This array is sorted before
- * the function returns.
- * @param attrs The shared attrs object which is used to populate the normalized attributes.
- * @param {number=} maxPriority Max directive priority.
- */
- function collectDirectives(node, directives, attrs, maxPriority, ignoreDirective) {
- var nodeType = node.nodeType,
- attrsMap = attrs.$attr,
- match,
- nodeName,
- className;
-
- switch (nodeType) {
- case NODE_TYPE_ELEMENT: /* Element */
-
- nodeName = nodeName_(node);
-
- // use the node name:
- addDirective(directives,
- directiveNormalize(nodeName), 'E', maxPriority, ignoreDirective);
-
- // iterate over the attributes
- for (var attr, name, nName, ngAttrName, value, isNgAttr, nAttrs = node.attributes,
- j = 0, jj = nAttrs && nAttrs.length; j < jj; j++) {
- var attrStartName = false;
- var attrEndName = false;
-
- attr = nAttrs[j];
- name = attr.name;
- value = attr.value;
-
- // support ngAttr attribute binding
- ngAttrName = directiveNormalize(name);
- isNgAttr = NG_ATTR_BINDING.test(ngAttrName);
- if (isNgAttr) {
- name = name.replace(PREFIX_REGEXP, '')
- .substr(8).replace(/_(.)/g, function(match, letter) {
- return letter.toUpperCase();
- });
- }
-
- var multiElementMatch = ngAttrName.match(MULTI_ELEMENT_DIR_RE);
- if (multiElementMatch && directiveIsMultiElement(multiElementMatch[1])) {
- attrStartName = name;
- attrEndName = name.substr(0, name.length - 5) + 'end';
- name = name.substr(0, name.length - 6);
- }
-
- nName = directiveNormalize(name.toLowerCase());
- attrsMap[nName] = name;
- if (isNgAttr || !attrs.hasOwnProperty(nName)) {
- attrs[nName] = value;
- if (getBooleanAttrName(node, nName)) {
- attrs[nName] = true; // presence means true
- }
- }
- addAttrInterpolateDirective(node, directives, value, nName, isNgAttr);
- addDirective(directives, nName, 'A', maxPriority, ignoreDirective, attrStartName,
- attrEndName);
- }
-
- if (nodeName === 'input' && node.getAttribute('type') === 'hidden') {
- // Hidden input elements can have strange behaviour when navigating back to the page
- // This tells the browser not to try to cache and reinstate previous values
- node.setAttribute('autocomplete', 'off');
- }
-
- // use class as directive
- if (!cssClassDirectivesEnabled) break;
- className = node.className;
- if (isObject(className)) {
- // Maybe SVGAnimatedString
- className = className.animVal;
- }
- if (isString(className) && className !== '') {
- while ((match = CLASS_DIRECTIVE_REGEXP.exec(className))) {
- nName = directiveNormalize(match[2]);
- if (addDirective(directives, nName, 'C', maxPriority, ignoreDirective)) {
- attrs[nName] = trim(match[3]);
- }
- className = className.substr(match.index + match[0].length);
- }
- }
- break;
- case NODE_TYPE_TEXT: /* Text Node */
- addTextInterpolateDirective(directives, node.nodeValue);
- break;
- case NODE_TYPE_COMMENT: /* Comment */
- if (!commentDirectivesEnabled) break;
- collectCommentDirectives(node, directives, attrs, maxPriority, ignoreDirective);
- break;
- }
-
- directives.sort(byPriority);
- return directives;
- }
-
- function collectCommentDirectives(node, directives, attrs, maxPriority, ignoreDirective) {
- // function created because of performance, try/catch disables
- // the optimization of the whole function #14848
- try {
- var match = COMMENT_DIRECTIVE_REGEXP.exec(node.nodeValue);
- if (match) {
- var nName = directiveNormalize(match[1]);
- if (addDirective(directives, nName, 'M', maxPriority, ignoreDirective)) {
- attrs[nName] = trim(match[2]);
- }
- }
- } catch (e) {
- // turns out that under some circumstances IE9 throws errors when one attempts to read
- // comment's node value.
- // Just ignore it and continue. (Can't seem to reproduce in test case.)
- }
- }
-
- /**
- * Given a node with a directive-start it collects all of the siblings until it finds
- * directive-end.
- * @param node
- * @param attrStart
- * @param attrEnd
- * @returns {*}
- */
- function groupScan(node, attrStart, attrEnd) {
- var nodes = [];
- var depth = 0;
- if (attrStart && node.hasAttribute && node.hasAttribute(attrStart)) {
- do {
- if (!node) {
- throw $compileMinErr('uterdir',
- 'Unterminated attribute, found \'{0}\' but no matching \'{1}\' found.',
- attrStart, attrEnd);
- }
- if (node.nodeType === NODE_TYPE_ELEMENT) {
- if (node.hasAttribute(attrStart)) depth++;
- if (node.hasAttribute(attrEnd)) depth--;
- }
- nodes.push(node);
- node = node.nextSibling;
- } while (depth > 0);
- } else {
- nodes.push(node);
- }
-
- return jqLite(nodes);
- }
-
- /**
- * Wrapper for linking function which converts normal linking function into a grouped
- * linking function.
- * @param linkFn
- * @param attrStart
- * @param attrEnd
- * @returns {Function}
- */
- function groupElementsLinkFnWrapper(linkFn, attrStart, attrEnd) {
- return function groupedElementsLink(scope, element, attrs, controllers, transcludeFn) {
- element = groupScan(element[0], attrStart, attrEnd);
- return linkFn(scope, element, attrs, controllers, transcludeFn);
- };
- }
-
- /**
- * A function generator that is used to support both eager and lazy compilation
- * linking function.
- * @param eager
- * @param $compileNodes
- * @param transcludeFn
- * @param maxPriority
- * @param ignoreDirective
- * @param previousCompileContext
- * @returns {Function}
- */
- function compilationGenerator(eager, $compileNodes, transcludeFn, maxPriority, ignoreDirective, previousCompileContext) {
- var compiled;
-
- if (eager) {
- return compile($compileNodes, transcludeFn, maxPriority, ignoreDirective, previousCompileContext);
- }
- return /** @this */ function lazyCompilation() {
- if (!compiled) {
- compiled = compile($compileNodes, transcludeFn, maxPriority, ignoreDirective, previousCompileContext);
-
- // Null out all of these references in order to make them eligible for garbage collection
- // since this is a potentially long lived closure
- $compileNodes = transcludeFn = previousCompileContext = null;
- }
- return compiled.apply(this, arguments);
- };
- }
-
- /**
- * Once the directives have been collected, their compile functions are executed. This method
- * is responsible for inlining directive templates as well as terminating the application
- * of the directives if the terminal directive has been reached.
- *
- * @param {Array} directives Array of collected directives to execute their compile function.
- * this needs to be pre-sorted by priority order.
- * @param {Node} compileNode The raw DOM node to apply the compile functions to
- * @param {Object} templateAttrs The shared attribute function
- * @param {function(angular.Scope, cloneAttachFn=)} transcludeFn A linking function, where the
- * scope argument is auto-generated to the new
- * child of the transcluded parent scope.
- * @param {JQLite} jqCollection If we are working on the root of the compile tree then this
- * argument has the root jqLite array so that we can replace nodes
- * on it.
- * @param {Object=} originalReplaceDirective An optional directive that will be ignored when
- * compiling the transclusion.
- * @param {Array.} preLinkFns
- * @param {Array.} postLinkFns
- * @param {Object} previousCompileContext Context used for previous compilation of the current
- * node
- * @returns {Function} linkFn
- */
- function applyDirectivesToNode(directives, compileNode, templateAttrs, transcludeFn,
- jqCollection, originalReplaceDirective, preLinkFns, postLinkFns,
- previousCompileContext) {
- previousCompileContext = previousCompileContext || {};
-
- var terminalPriority = -Number.MAX_VALUE,
- newScopeDirective = previousCompileContext.newScopeDirective,
- controllerDirectives = previousCompileContext.controllerDirectives,
- newIsolateScopeDirective = previousCompileContext.newIsolateScopeDirective,
- templateDirective = previousCompileContext.templateDirective,
- nonTlbTranscludeDirective = previousCompileContext.nonTlbTranscludeDirective,
- hasTranscludeDirective = false,
- hasTemplate = false,
- hasElementTranscludeDirective = previousCompileContext.hasElementTranscludeDirective,
- $compileNode = templateAttrs.$$element = jqLite(compileNode),
- directive,
- directiveName,
- $template,
- replaceDirective = originalReplaceDirective,
- childTranscludeFn = transcludeFn,
- linkFn,
- didScanForMultipleTransclusion = false,
- mightHaveMultipleTransclusionError = false,
- directiveValue;
-
- // executes all directives on the current element
- for (var i = 0, ii = directives.length; i < ii; i++) {
- directive = directives[i];
- var attrStart = directive.$$start;
- var attrEnd = directive.$$end;
-
- // collect multiblock sections
- if (attrStart) {
- $compileNode = groupScan(compileNode, attrStart, attrEnd);
- }
- $template = undefined;
-
- if (terminalPriority > directive.priority) {
- break; // prevent further processing of directives
- }
-
- directiveValue = directive.scope;
-
- if (directiveValue) {
-
- // skip the check for directives with async templates, we'll check the derived sync
- // directive when the template arrives
- if (!directive.templateUrl) {
- if (isObject(directiveValue)) {
- // This directive is trying to add an isolated scope.
- // Check that there is no scope of any kind already
- assertNoDuplicate('new/isolated scope', newIsolateScopeDirective || newScopeDirective,
- directive, $compileNode);
- newIsolateScopeDirective = directive;
- } else {
- // This directive is trying to add a child scope.
- // Check that there is no isolated scope already
- assertNoDuplicate('new/isolated scope', newIsolateScopeDirective, directive,
- $compileNode);
- }
- }
-
- newScopeDirective = newScopeDirective || directive;
- }
-
- directiveName = directive.name;
-
- // If we encounter a condition that can result in transclusion on the directive,
- // then scan ahead in the remaining directives for others that may cause a multiple
- // transclusion error to be thrown during the compilation process. If a matching directive
- // is found, then we know that when we encounter a transcluded directive, we need to eagerly
- // compile the `transclude` function rather than doing it lazily in order to throw
- // exceptions at the correct time
- if (!didScanForMultipleTransclusion && ((directive.replace && (directive.templateUrl || directive.template))
- || (directive.transclude && !directive.$$tlb))) {
- var candidateDirective;
-
- for (var scanningIndex = i + 1; (candidateDirective = directives[scanningIndex++]);) {
- if ((candidateDirective.transclude && !candidateDirective.$$tlb)
- || (candidateDirective.replace && (candidateDirective.templateUrl || candidateDirective.template))) {
- mightHaveMultipleTransclusionError = true;
- break;
- }
- }
-
- didScanForMultipleTransclusion = true;
- }
-
- if (!directive.templateUrl && directive.controller) {
- controllerDirectives = controllerDirectives || createMap();
- assertNoDuplicate('\'' + directiveName + '\' controller',
- controllerDirectives[directiveName], directive, $compileNode);
- controllerDirectives[directiveName] = directive;
- }
-
- directiveValue = directive.transclude;
-
- if (directiveValue) {
- hasTranscludeDirective = true;
-
- // Special case ngIf and ngRepeat so that we don't complain about duplicate transclusion.
- // This option should only be used by directives that know how to safely handle element transclusion,
- // where the transcluded nodes are added or replaced after linking.
- if (!directive.$$tlb) {
- assertNoDuplicate('transclusion', nonTlbTranscludeDirective, directive, $compileNode);
- nonTlbTranscludeDirective = directive;
- }
-
- if (directiveValue === 'element') {
- hasElementTranscludeDirective = true;
- terminalPriority = directive.priority;
- $template = $compileNode;
- $compileNode = templateAttrs.$$element =
- jqLite(compile.$$createComment(directiveName, templateAttrs[directiveName]));
- compileNode = $compileNode[0];
- replaceWith(jqCollection, sliceArgs($template), compileNode);
-
- // Support: Chrome < 50
- // https://github.com/angular/angular.js/issues/14041
-
- // In the versions of V8 prior to Chrome 50, the document fragment that is created
- // in the `replaceWith` function is improperly garbage collected despite still
- // being referenced by the `parentNode` property of all of the child nodes. By adding
- // a reference to the fragment via a different property, we can avoid that incorrect
- // behavior.
- // TODO: remove this line after Chrome 50 has been released
- $template[0].$$parentNode = $template[0].parentNode;
-
- childTranscludeFn = compilationGenerator(mightHaveMultipleTransclusionError, $template, transcludeFn, terminalPriority,
- replaceDirective && replaceDirective.name, {
- // Don't pass in:
- // - controllerDirectives - otherwise we'll create duplicates controllers
- // - newIsolateScopeDirective or templateDirective - combining templates with
- // element transclusion doesn't make sense.
- //
- // We need only nonTlbTranscludeDirective so that we prevent putting transclusion
- // on the same element more than once.
- nonTlbTranscludeDirective: nonTlbTranscludeDirective
- });
- } else {
-
- var slots = createMap();
-
- if (!isObject(directiveValue)) {
- $template = jqLite(jqLiteClone(compileNode)).contents();
- } else {
-
- // We have transclusion slots,
- // collect them up, compile them and store their transclusion functions
- $template = [];
-
- var slotMap = createMap();
- var filledSlots = createMap();
-
- // Parse the element selectors
- forEach(directiveValue, function(elementSelector, slotName) {
- // If an element selector starts with a ? then it is optional
- var optional = (elementSelector.charAt(0) === '?');
- elementSelector = optional ? elementSelector.substring(1) : elementSelector;
-
- slotMap[elementSelector] = slotName;
-
- // We explicitly assign `null` since this implies that a slot was defined but not filled.
- // Later when calling boundTransclusion functions with a slot name we only error if the
- // slot is `undefined`
- slots[slotName] = null;
-
- // filledSlots contains `true` for all slots that are either optional or have been
- // filled. This is used to check that we have not missed any required slots
- filledSlots[slotName] = optional;
- });
-
- // Add the matching elements into their slot
- forEach($compileNode.contents(), function(node) {
- var slotName = slotMap[directiveNormalize(nodeName_(node))];
- if (slotName) {
- filledSlots[slotName] = true;
- slots[slotName] = slots[slotName] || [];
- slots[slotName].push(node);
- } else {
- $template.push(node);
- }
- });
-
- // Check for required slots that were not filled
- forEach(filledSlots, function(filled, slotName) {
- if (!filled) {
- throw $compileMinErr('reqslot', 'Required transclusion slot `{0}` was not filled.', slotName);
- }
- });
-
- for (var slotName in slots) {
- if (slots[slotName]) {
- // Only define a transclusion function if the slot was filled
- slots[slotName] = compilationGenerator(mightHaveMultipleTransclusionError, slots[slotName], transcludeFn);
- }
- }
- }
-
- $compileNode.empty(); // clear contents
- childTranscludeFn = compilationGenerator(mightHaveMultipleTransclusionError, $template, transcludeFn, undefined,
- undefined, { needsNewScope: directive.$$isolateScope || directive.$$newScope});
- childTranscludeFn.$$slots = slots;
- }
- }
-
- if (directive.template) {
- hasTemplate = true;
- assertNoDuplicate('template', templateDirective, directive, $compileNode);
- templateDirective = directive;
-
- directiveValue = (isFunction(directive.template))
- ? directive.template($compileNode, templateAttrs)
- : directive.template;
-
- directiveValue = denormalizeTemplate(directiveValue);
-
- if (directive.replace) {
- replaceDirective = directive;
- if (jqLiteIsTextNode(directiveValue)) {
- $template = [];
- } else {
- $template = removeComments(wrapTemplate(directive.templateNamespace, trim(directiveValue)));
- }
- compileNode = $template[0];
-
- if ($template.length !== 1 || compileNode.nodeType !== NODE_TYPE_ELEMENT) {
- throw $compileMinErr('tplrt',
- 'Template for directive \'{0}\' must have exactly one root element. {1}',
- directiveName, '');
- }
-
- replaceWith(jqCollection, $compileNode, compileNode);
-
- var newTemplateAttrs = {$attr: {}};
-
- // combine directives from the original node and from the template:
- // - take the array of directives for this element
- // - split it into two parts, those that already applied (processed) and those that weren't (unprocessed)
- // - collect directives from the template and sort them by priority
- // - combine directives as: processed + template + unprocessed
- var templateDirectives = collectDirectives(compileNode, [], newTemplateAttrs);
- var unprocessedDirectives = directives.splice(i + 1, directives.length - (i + 1));
-
- if (newIsolateScopeDirective || newScopeDirective) {
- // The original directive caused the current element to be replaced but this element
- // also needs to have a new scope, so we need to tell the template directives
- // that they would need to get their scope from further up, if they require transclusion
- markDirectiveScope(templateDirectives, newIsolateScopeDirective, newScopeDirective);
- }
- directives = directives.concat(templateDirectives).concat(unprocessedDirectives);
- mergeTemplateAttributes(templateAttrs, newTemplateAttrs);
-
- ii = directives.length;
- } else {
- $compileNode.html(directiveValue);
- }
- }
-
- if (directive.templateUrl) {
- hasTemplate = true;
- assertNoDuplicate('template', templateDirective, directive, $compileNode);
- templateDirective = directive;
-
- if (directive.replace) {
- replaceDirective = directive;
- }
-
- // eslint-disable-next-line no-func-assign
- nodeLinkFn = compileTemplateUrl(directives.splice(i, directives.length - i), $compileNode,
- templateAttrs, jqCollection, hasTranscludeDirective && childTranscludeFn, preLinkFns, postLinkFns, {
- controllerDirectives: controllerDirectives,
- newScopeDirective: (newScopeDirective !== directive) && newScopeDirective,
- newIsolateScopeDirective: newIsolateScopeDirective,
- templateDirective: templateDirective,
- nonTlbTranscludeDirective: nonTlbTranscludeDirective
- });
- ii = directives.length;
- } else if (directive.compile) {
- try {
- linkFn = directive.compile($compileNode, templateAttrs, childTranscludeFn);
- var context = directive.$$originalDirective || directive;
- if (isFunction(linkFn)) {
- addLinkFns(null, bind(context, linkFn), attrStart, attrEnd);
- } else if (linkFn) {
- addLinkFns(bind(context, linkFn.pre), bind(context, linkFn.post), attrStart, attrEnd);
- }
- } catch (e) {
- $exceptionHandler(e, startingTag($compileNode));
- }
- }
-
- if (directive.terminal) {
- nodeLinkFn.terminal = true;
- terminalPriority = Math.max(terminalPriority, directive.priority);
- }
-
- }
-
- nodeLinkFn.scope = newScopeDirective && newScopeDirective.scope === true;
- nodeLinkFn.transcludeOnThisElement = hasTranscludeDirective;
- nodeLinkFn.templateOnThisElement = hasTemplate;
- nodeLinkFn.transclude = childTranscludeFn;
-
- previousCompileContext.hasElementTranscludeDirective = hasElementTranscludeDirective;
-
- // might be normal or delayed nodeLinkFn depending on if templateUrl is present
- return nodeLinkFn;
-
- ////////////////////
-
- function addLinkFns(pre, post, attrStart, attrEnd) {
- if (pre) {
- if (attrStart) pre = groupElementsLinkFnWrapper(pre, attrStart, attrEnd);
- pre.require = directive.require;
- pre.directiveName = directiveName;
- if (newIsolateScopeDirective === directive || directive.$$isolateScope) {
- pre = cloneAndAnnotateFn(pre, {isolateScope: true});
- }
- preLinkFns.push(pre);
- }
- if (post) {
- if (attrStart) post = groupElementsLinkFnWrapper(post, attrStart, attrEnd);
- post.require = directive.require;
- post.directiveName = directiveName;
- if (newIsolateScopeDirective === directive || directive.$$isolateScope) {
- post = cloneAndAnnotateFn(post, {isolateScope: true});
- }
- postLinkFns.push(post);
- }
- }
-
- function nodeLinkFn(childLinkFn, scope, linkNode, $rootElement, boundTranscludeFn) {
- var i, ii, linkFn, isolateScope, controllerScope, elementControllers, transcludeFn, $element,
- attrs, scopeBindingInfo;
-
- if (compileNode === linkNode) {
- attrs = templateAttrs;
- $element = templateAttrs.$$element;
- } else {
- $element = jqLite(linkNode);
- attrs = new Attributes($element, templateAttrs);
- }
-
- controllerScope = scope;
- if (newIsolateScopeDirective) {
- isolateScope = scope.$new(true);
- } else if (newScopeDirective) {
- controllerScope = scope.$parent;
- }
-
- if (boundTranscludeFn) {
- // track `boundTranscludeFn` so it can be unwrapped if `transcludeFn`
- // is later passed as `parentBoundTranscludeFn` to `publicLinkFn`
- transcludeFn = controllersBoundTransclude;
- transcludeFn.$$boundTransclude = boundTranscludeFn;
- // expose the slots on the `$transclude` function
- transcludeFn.isSlotFilled = function(slotName) {
- return !!boundTranscludeFn.$$slots[slotName];
- };
- }
-
- if (controllerDirectives) {
- elementControllers = setupControllers($element, attrs, transcludeFn, controllerDirectives, isolateScope, scope, newIsolateScopeDirective);
- }
-
- if (newIsolateScopeDirective) {
- // Initialize isolate scope bindings for new isolate scope directive.
- compile.$$addScopeInfo($element, isolateScope, true, !(templateDirective && (templateDirective === newIsolateScopeDirective ||
- templateDirective === newIsolateScopeDirective.$$originalDirective)));
- compile.$$addScopeClass($element, true);
- isolateScope.$$isolateBindings =
- newIsolateScopeDirective.$$isolateBindings;
- scopeBindingInfo = initializeDirectiveBindings(scope, attrs, isolateScope,
- isolateScope.$$isolateBindings,
- newIsolateScopeDirective);
- if (scopeBindingInfo.removeWatches) {
- isolateScope.$on('$destroy', scopeBindingInfo.removeWatches);
- }
- }
-
- // Initialize bindToController bindings
- for (var name in elementControllers) {
- var controllerDirective = controllerDirectives[name];
- var controller = elementControllers[name];
- var bindings = controllerDirective.$$bindings.bindToController;
-
- if (preAssignBindingsEnabled) {
- if (bindings) {
- controller.bindingInfo =
- initializeDirectiveBindings(controllerScope, attrs, controller.instance, bindings, controllerDirective);
- } else {
- controller.bindingInfo = {};
- }
-
- var controllerResult = controller();
- if (controllerResult !== controller.instance) {
- // If the controller constructor has a return value, overwrite the instance
- // from setupControllers
- controller.instance = controllerResult;
- $element.data('$' + controllerDirective.name + 'Controller', controllerResult);
- if (controller.bindingInfo.removeWatches) {
- controller.bindingInfo.removeWatches();
- }
- controller.bindingInfo =
- initializeDirectiveBindings(controllerScope, attrs, controller.instance, bindings, controllerDirective);
- }
- } else {
- controller.instance = controller();
- $element.data('$' + controllerDirective.name + 'Controller', controller.instance);
- controller.bindingInfo =
- initializeDirectiveBindings(controllerScope, attrs, controller.instance, bindings, controllerDirective);
- }
- }
-
- // Bind the required controllers to the controller, if `require` is an object and `bindToController` is truthy
- forEach(controllerDirectives, function(controllerDirective, name) {
- var require = controllerDirective.require;
- if (controllerDirective.bindToController && !isArray(require) && isObject(require)) {
- extend(elementControllers[name].instance, getControllers(name, require, $element, elementControllers));
- }
- });
-
- // Handle the init and destroy lifecycle hooks on all controllers that have them
- forEach(elementControllers, function(controller) {
- var controllerInstance = controller.instance;
- if (isFunction(controllerInstance.$onChanges)) {
- try {
- controllerInstance.$onChanges(controller.bindingInfo.initialChanges);
- } catch (e) {
- $exceptionHandler(e);
- }
- }
- if (isFunction(controllerInstance.$onInit)) {
- try {
- controllerInstance.$onInit();
- } catch (e) {
- $exceptionHandler(e);
- }
- }
- if (isFunction(controllerInstance.$doCheck)) {
- controllerScope.$watch(function() { controllerInstance.$doCheck(); });
- controllerInstance.$doCheck();
- }
- if (isFunction(controllerInstance.$onDestroy)) {
- controllerScope.$on('$destroy', function callOnDestroyHook() {
- controllerInstance.$onDestroy();
- });
- }
- });
-
- // PRELINKING
- for (i = 0, ii = preLinkFns.length; i < ii; i++) {
- linkFn = preLinkFns[i];
- invokeLinkFn(linkFn,
- linkFn.isolateScope ? isolateScope : scope,
- $element,
- attrs,
- linkFn.require && getControllers(linkFn.directiveName, linkFn.require, $element, elementControllers),
- transcludeFn
- );
- }
-
- // RECURSION
- // We only pass the isolate scope, if the isolate directive has a template,
- // otherwise the child elements do not belong to the isolate directive.
- var scopeToChild = scope;
- if (newIsolateScopeDirective && (newIsolateScopeDirective.template || newIsolateScopeDirective.templateUrl === null)) {
- scopeToChild = isolateScope;
- }
- if (childLinkFn) {
- childLinkFn(scopeToChild, linkNode.childNodes, undefined, boundTranscludeFn);
- }
-
- // POSTLINKING
- for (i = postLinkFns.length - 1; i >= 0; i--) {
- linkFn = postLinkFns[i];
- invokeLinkFn(linkFn,
- linkFn.isolateScope ? isolateScope : scope,
- $element,
- attrs,
- linkFn.require && getControllers(linkFn.directiveName, linkFn.require, $element, elementControllers),
- transcludeFn
- );
- }
-
- // Trigger $postLink lifecycle hooks
- forEach(elementControllers, function(controller) {
- var controllerInstance = controller.instance;
- if (isFunction(controllerInstance.$postLink)) {
- controllerInstance.$postLink();
- }
- });
-
- // This is the function that is injected as `$transclude`.
- // Note: all arguments are optional!
- function controllersBoundTransclude(scope, cloneAttachFn, futureParentElement, slotName) {
- var transcludeControllers;
- // No scope passed in:
- if (!isScope(scope)) {
- slotName = futureParentElement;
- futureParentElement = cloneAttachFn;
- cloneAttachFn = scope;
- scope = undefined;
- }
-
- if (hasElementTranscludeDirective) {
- transcludeControllers = elementControllers;
- }
- if (!futureParentElement) {
- futureParentElement = hasElementTranscludeDirective ? $element.parent() : $element;
- }
- if (slotName) {
- // slotTranscludeFn can be one of three things:
- // * a transclude function - a filled slot
- // * `null` - an optional slot that was not filled
- // * `undefined` - a slot that was not declared (i.e. invalid)
- var slotTranscludeFn = boundTranscludeFn.$$slots[slotName];
- if (slotTranscludeFn) {
- return slotTranscludeFn(scope, cloneAttachFn, transcludeControllers, futureParentElement, scopeToChild);
- } else if (isUndefined(slotTranscludeFn)) {
- throw $compileMinErr('noslot',
- 'No parent directive that requires a transclusion with slot name "{0}". ' +
- 'Element: {1}',
- slotName, startingTag($element));
- }
- } else {
- return boundTranscludeFn(scope, cloneAttachFn, transcludeControllers, futureParentElement, scopeToChild);
- }
- }
- }
- }
-
- function getControllers(directiveName, require, $element, elementControllers) {
- var value;
-
- if (isString(require)) {
- var match = require.match(REQUIRE_PREFIX_REGEXP);
- var name = require.substring(match[0].length);
- var inheritType = match[1] || match[3];
- var optional = match[2] === '?';
-
- //If only parents then start at the parent element
- if (inheritType === '^^') {
- $element = $element.parent();
- //Otherwise attempt getting the controller from elementControllers in case
- //the element is transcluded (and has no data) and to avoid .data if possible
- } else {
- value = elementControllers && elementControllers[name];
- value = value && value.instance;
- }
-
- if (!value) {
- var dataName = '$' + name + 'Controller';
- value = inheritType ? $element.inheritedData(dataName) : $element.data(dataName);
- }
-
- if (!value && !optional) {
- throw $compileMinErr('ctreq',
- 'Controller \'{0}\', required by directive \'{1}\', can\'t be found!',
- name, directiveName);
- }
- } else if (isArray(require)) {
- value = [];
- for (var i = 0, ii = require.length; i < ii; i++) {
- value[i] = getControllers(directiveName, require[i], $element, elementControllers);
- }
- } else if (isObject(require)) {
- value = {};
- forEach(require, function(controller, property) {
- value[property] = getControllers(directiveName, controller, $element, elementControllers);
- });
- }
-
- return value || null;
- }
-
- function setupControllers($element, attrs, transcludeFn, controllerDirectives, isolateScope, scope, newIsolateScopeDirective) {
- var elementControllers = createMap();
- for (var controllerKey in controllerDirectives) {
- var directive = controllerDirectives[controllerKey];
- var locals = {
- $scope: directive === newIsolateScopeDirective || directive.$$isolateScope ? isolateScope : scope,
- $element: $element,
- $attrs: attrs,
- $transclude: transcludeFn
- };
-
- var controller = directive.controller;
- if (controller === '@') {
- controller = attrs[directive.name];
- }
-
- var controllerInstance = $controller(controller, locals, true, directive.controllerAs);
-
- // For directives with element transclusion the element is a comment.
- // In this case .data will not attach any data.
- // Instead, we save the controllers for the element in a local hash and attach to .data
- // later, once we have the actual element.
- elementControllers[directive.name] = controllerInstance;
- $element.data('$' + directive.name + 'Controller', controllerInstance.instance);
- }
- return elementControllers;
- }
-
- // Depending upon the context in which a directive finds itself it might need to have a new isolated
- // or child scope created. For instance:
- // * if the directive has been pulled into a template because another directive with a higher priority
- // asked for element transclusion
- // * if the directive itself asks for transclusion but it is at the root of a template and the original
- // element was replaced. See https://github.com/angular/angular.js/issues/12936
- function markDirectiveScope(directives, isolateScope, newScope) {
- for (var j = 0, jj = directives.length; j < jj; j++) {
- directives[j] = inherit(directives[j], {$$isolateScope: isolateScope, $$newScope: newScope});
- }
- }
-
- /**
- * looks up the directive and decorates it with exception handling and proper parameters. We
- * call this the boundDirective.
- *
- * @param {string} name name of the directive to look up.
- * @param {string} location The directive must be found in specific format.
- * String containing any of theses characters:
- *
- * * `E`: element name
- * * `A': attribute
- * * `C`: class
- * * `M`: comment
- * @returns {boolean} true if directive was added.
- */
- function addDirective(tDirectives, name, location, maxPriority, ignoreDirective, startAttrName,
- endAttrName) {
- if (name === ignoreDirective) return null;
- var match = null;
- if (hasDirectives.hasOwnProperty(name)) {
- for (var directive, directives = $injector.get(name + Suffix),
- i = 0, ii = directives.length; i < ii; i++) {
- directive = directives[i];
- if ((isUndefined(maxPriority) || maxPriority > directive.priority) &&
- directive.restrict.indexOf(location) !== -1) {
- if (startAttrName) {
- directive = inherit(directive, {$$start: startAttrName, $$end: endAttrName});
- }
- if (!directive.$$bindings) {
- var bindings = directive.$$bindings =
- parseDirectiveBindings(directive, directive.name);
- if (isObject(bindings.isolateScope)) {
- directive.$$isolateBindings = bindings.isolateScope;
- }
- }
- tDirectives.push(directive);
- match = directive;
- }
- }
- }
- return match;
- }
-
-
- /**
- * looks up the directive and returns true if it is a multi-element directive,
- * and therefore requires DOM nodes between -start and -end markers to be grouped
- * together.
- *
- * @param {string} name name of the directive to look up.
- * @returns true if directive was registered as multi-element.
- */
- function directiveIsMultiElement(name) {
- if (hasDirectives.hasOwnProperty(name)) {
- for (var directive, directives = $injector.get(name + Suffix),
- i = 0, ii = directives.length; i < ii; i++) {
- directive = directives[i];
- if (directive.multiElement) {
- return true;
- }
- }
- }
- return false;
- }
-
- /**
- * When the element is replaced with HTML template then the new attributes
- * on the template need to be merged with the existing attributes in the DOM.
- * The desired effect is to have both of the attributes present.
- *
- * @param {object} dst destination attributes (original DOM)
- * @param {object} src source attributes (from the directive template)
- */
- function mergeTemplateAttributes(dst, src) {
- var srcAttr = src.$attr,
- dstAttr = dst.$attr;
-
- // reapply the old attributes to the new element
- forEach(dst, function(value, key) {
- if (key.charAt(0) !== '$') {
- if (src[key] && src[key] !== value) {
- if (value.length) {
- value += (key === 'style' ? ';' : ' ') + src[key];
- } else {
- value = src[key];
- }
- }
- dst.$set(key, value, true, srcAttr[key]);
- }
- });
-
- // copy the new attributes on the old attrs object
- forEach(src, function(value, key) {
- // Check if we already set this attribute in the loop above.
- // `dst` will never contain hasOwnProperty as DOM parser won't let it.
- // You will get an "InvalidCharacterError: DOM Exception 5" error if you
- // have an attribute like "has-own-property" or "data-has-own-property", etc.
- if (!dst.hasOwnProperty(key) && key.charAt(0) !== '$') {
- dst[key] = value;
-
- if (key !== 'class' && key !== 'style') {
- dstAttr[key] = srcAttr[key];
- }
- }
- });
- }
-
-
- function compileTemplateUrl(directives, $compileNode, tAttrs,
- $rootElement, childTranscludeFn, preLinkFns, postLinkFns, previousCompileContext) {
- var linkQueue = [],
- afterTemplateNodeLinkFn,
- afterTemplateChildLinkFn,
- beforeTemplateCompileNode = $compileNode[0],
- origAsyncDirective = directives.shift(),
- derivedSyncDirective = inherit(origAsyncDirective, {
- templateUrl: null, transclude: null, replace: null, $$originalDirective: origAsyncDirective
- }),
- templateUrl = (isFunction(origAsyncDirective.templateUrl))
- ? origAsyncDirective.templateUrl($compileNode, tAttrs)
- : origAsyncDirective.templateUrl,
- templateNamespace = origAsyncDirective.templateNamespace;
-
- $compileNode.empty();
-
- $templateRequest(templateUrl)
- .then(function(content) {
- var compileNode, tempTemplateAttrs, $template, childBoundTranscludeFn;
-
- content = denormalizeTemplate(content);
-
- if (origAsyncDirective.replace) {
- if (jqLiteIsTextNode(content)) {
- $template = [];
- } else {
- $template = removeComments(wrapTemplate(templateNamespace, trim(content)));
- }
- compileNode = $template[0];
-
- if ($template.length !== 1 || compileNode.nodeType !== NODE_TYPE_ELEMENT) {
- throw $compileMinErr('tplrt',
- 'Template for directive \'{0}\' must have exactly one root element. {1}',
- origAsyncDirective.name, templateUrl);
- }
-
- tempTemplateAttrs = {$attr: {}};
- replaceWith($rootElement, $compileNode, compileNode);
- var templateDirectives = collectDirectives(compileNode, [], tempTemplateAttrs);
-
- if (isObject(origAsyncDirective.scope)) {
- // the original directive that caused the template to be loaded async required
- // an isolate scope
- markDirectiveScope(templateDirectives, true);
- }
- directives = templateDirectives.concat(directives);
- mergeTemplateAttributes(tAttrs, tempTemplateAttrs);
- } else {
- compileNode = beforeTemplateCompileNode;
- $compileNode.html(content);
- }
-
- directives.unshift(derivedSyncDirective);
-
- afterTemplateNodeLinkFn = applyDirectivesToNode(directives, compileNode, tAttrs,
- childTranscludeFn, $compileNode, origAsyncDirective, preLinkFns, postLinkFns,
- previousCompileContext);
- forEach($rootElement, function(node, i) {
- if (node === compileNode) {
- $rootElement[i] = $compileNode[0];
- }
- });
- afterTemplateChildLinkFn = compileNodes($compileNode[0].childNodes, childTranscludeFn);
-
- while (linkQueue.length) {
- var scope = linkQueue.shift(),
- beforeTemplateLinkNode = linkQueue.shift(),
- linkRootElement = linkQueue.shift(),
- boundTranscludeFn = linkQueue.shift(),
- linkNode = $compileNode[0];
-
- if (scope.$$destroyed) continue;
-
- if (beforeTemplateLinkNode !== beforeTemplateCompileNode) {
- var oldClasses = beforeTemplateLinkNode.className;
-
- if (!(previousCompileContext.hasElementTranscludeDirective &&
- origAsyncDirective.replace)) {
- // it was cloned therefore we have to clone as well.
- linkNode = jqLiteClone(compileNode);
- }
- replaceWith(linkRootElement, jqLite(beforeTemplateLinkNode), linkNode);
-
- // Copy in CSS classes from original node
- safeAddClass(jqLite(linkNode), oldClasses);
- }
- if (afterTemplateNodeLinkFn.transcludeOnThisElement) {
- childBoundTranscludeFn = createBoundTranscludeFn(scope, afterTemplateNodeLinkFn.transclude, boundTranscludeFn);
- } else {
- childBoundTranscludeFn = boundTranscludeFn;
- }
- afterTemplateNodeLinkFn(afterTemplateChildLinkFn, scope, linkNode, $rootElement,
- childBoundTranscludeFn);
- }
- linkQueue = null;
- }).catch(function(error) {
- if (error instanceof Error) {
- $exceptionHandler(error);
- }
- });
-
- return function delayedNodeLinkFn(ignoreChildLinkFn, scope, node, rootElement, boundTranscludeFn) {
- var childBoundTranscludeFn = boundTranscludeFn;
- if (scope.$$destroyed) return;
- if (linkQueue) {
- linkQueue.push(scope,
- node,
- rootElement,
- childBoundTranscludeFn);
- } else {
- if (afterTemplateNodeLinkFn.transcludeOnThisElement) {
- childBoundTranscludeFn = createBoundTranscludeFn(scope, afterTemplateNodeLinkFn.transclude, boundTranscludeFn);
- }
- afterTemplateNodeLinkFn(afterTemplateChildLinkFn, scope, node, rootElement, childBoundTranscludeFn);
- }
- };
- }
-
-
- /**
- * Sorting function for bound directives.
- */
- function byPriority(a, b) {
- var diff = b.priority - a.priority;
- if (diff !== 0) return diff;
- if (a.name !== b.name) return (a.name < b.name) ? -1 : 1;
- return a.index - b.index;
- }
-
- function assertNoDuplicate(what, previousDirective, directive, element) {
-
- function wrapModuleNameIfDefined(moduleName) {
- return moduleName ?
- (' (module: ' + moduleName + ')') :
- '';
- }
-
- if (previousDirective) {
- throw $compileMinErr('multidir', 'Multiple directives [{0}{1}, {2}{3}] asking for {4} on: {5}',
- previousDirective.name, wrapModuleNameIfDefined(previousDirective.$$moduleName),
- directive.name, wrapModuleNameIfDefined(directive.$$moduleName), what, startingTag(element));
- }
- }
-
-
- function addTextInterpolateDirective(directives, text) {
- var interpolateFn = $interpolate(text, true);
- if (interpolateFn) {
- directives.push({
- priority: 0,
- compile: function textInterpolateCompileFn(templateNode) {
- var templateNodeParent = templateNode.parent(),
- hasCompileParent = !!templateNodeParent.length;
-
- // When transcluding a template that has bindings in the root
- // we don't have a parent and thus need to add the class during linking fn.
- if (hasCompileParent) compile.$$addBindingClass(templateNodeParent);
-
- return function textInterpolateLinkFn(scope, node) {
- var parent = node.parent();
- if (!hasCompileParent) compile.$$addBindingClass(parent);
- compile.$$addBindingInfo(parent, interpolateFn.expressions);
- scope.$watch(interpolateFn, function interpolateFnWatchAction(value) {
- node[0].nodeValue = value;
- });
- };
- }
- });
- }
- }
-
-
- function wrapTemplate(type, template) {
- type = lowercase(type || 'html');
- switch (type) {
- case 'svg':
- case 'math':
- var wrapper = window.document.createElement('div');
- wrapper.innerHTML = '<' + type + '>' + template + '';
- return wrapper.childNodes[0].childNodes;
- default:
- return template;
- }
- }
-
-
- function getTrustedContext(node, attrNormalizedName) {
- if (attrNormalizedName === 'srcdoc') {
- return $sce.HTML;
- }
- var tag = nodeName_(node);
- // All tags with src attributes require a RESOURCE_URL value, except for
- // img and various html5 media tags.
- if (attrNormalizedName === 'src' || attrNormalizedName === 'ngSrc') {
- if (['img', 'video', 'audio', 'source', 'track'].indexOf(tag) === -1) {
- return $sce.RESOURCE_URL;
- }
- // maction[xlink:href] can source SVG. It's not limited to .
- } else if (attrNormalizedName === 'xlinkHref' ||
- (tag === 'form' && attrNormalizedName === 'action') ||
- // links can be stylesheets or imports, which can run script in the current origin
- (tag === 'link' && attrNormalizedName === 'href')
- ) {
- return $sce.RESOURCE_URL;
- }
- }
-
-
- function addAttrInterpolateDirective(node, directives, value, name, isNgAttr) {
- var trustedContext = getTrustedContext(node, name);
- var mustHaveExpression = !isNgAttr;
- var allOrNothing = ALL_OR_NOTHING_ATTRS[name] || isNgAttr;
-
- var interpolateFn = $interpolate(value, mustHaveExpression, trustedContext, allOrNothing);
-
- // no interpolation found -> ignore
- if (!interpolateFn) return;
-
- if (name === 'multiple' && nodeName_(node) === 'select') {
- throw $compileMinErr('selmulti',
- 'Binding to the \'multiple\' attribute is not supported. Element: {0}',
- startingTag(node));
- }
-
- if (EVENT_HANDLER_ATTR_REGEXP.test(name)) {
- throw $compileMinErr('nodomevents',
- 'Interpolations for HTML DOM event attributes are disallowed. Please use the ' +
- 'ng- versions (such as ng-click instead of onclick) instead.');
- }
-
- directives.push({
- priority: 100,
- compile: function() {
- return {
- pre: function attrInterpolatePreLinkFn(scope, element, attr) {
- var $$observers = (attr.$$observers || (attr.$$observers = createMap()));
-
- // If the attribute has changed since last $interpolate()ed
- var newValue = attr[name];
- if (newValue !== value) {
- // we need to interpolate again since the attribute value has been updated
- // (e.g. by another directive's compile function)
- // ensure unset/empty values make interpolateFn falsy
- interpolateFn = newValue && $interpolate(newValue, true, trustedContext, allOrNothing);
- value = newValue;
- }
-
- // if attribute was updated so that there is no interpolation going on we don't want to
- // register any observers
- if (!interpolateFn) return;
-
- // initialize attr object so that it's ready in case we need the value for isolate
- // scope initialization, otherwise the value would not be available from isolate
- // directive's linking fn during linking phase
- attr[name] = interpolateFn(scope);
-
- ($$observers[name] || ($$observers[name] = [])).$$inter = true;
- (attr.$$observers && attr.$$observers[name].$$scope || scope).
- $watch(interpolateFn, function interpolateFnWatchAction(newValue, oldValue) {
- //special case for class attribute addition + removal
- //so that class changes can tap into the animation
- //hooks provided by the $animate service. Be sure to
- //skip animations when the first digest occurs (when
- //both the new and the old values are the same) since
- //the CSS classes are the non-interpolated values
- if (name === 'class' && newValue !== oldValue) {
- attr.$updateClass(newValue, oldValue);
- } else {
- attr.$set(name, newValue);
- }
- });
- }
- };
- }
- });
- }
-
-
- /**
- * This is a special jqLite.replaceWith, which can replace items which
- * have no parents, provided that the containing jqLite collection is provided.
- *
- * @param {JqLite=} $rootElement The root of the compile tree. Used so that we can replace nodes
- * in the root of the tree.
- * @param {JqLite} elementsToRemove The jqLite element which we are going to replace. We keep
- * the shell, but replace its DOM node reference.
- * @param {Node} newNode The new DOM node.
- */
- function replaceWith($rootElement, elementsToRemove, newNode) {
- var firstElementToRemove = elementsToRemove[0],
- removeCount = elementsToRemove.length,
- parent = firstElementToRemove.parentNode,
- i, ii;
-
- if ($rootElement) {
- for (i = 0, ii = $rootElement.length; i < ii; i++) {
- if ($rootElement[i] === firstElementToRemove) {
- $rootElement[i++] = newNode;
- for (var j = i, j2 = j + removeCount - 1,
- jj = $rootElement.length;
- j < jj; j++, j2++) {
- if (j2 < jj) {
- $rootElement[j] = $rootElement[j2];
- } else {
- delete $rootElement[j];
- }
- }
- $rootElement.length -= removeCount - 1;
-
- // If the replaced element is also the jQuery .context then replace it
- // .context is a deprecated jQuery api, so we should set it only when jQuery set it
- // http://api.jquery.com/context/
- if ($rootElement.context === firstElementToRemove) {
- $rootElement.context = newNode;
- }
- break;
- }
- }
- }
-
- if (parent) {
- parent.replaceChild(newNode, firstElementToRemove);
- }
-
- // Append all the `elementsToRemove` to a fragment. This will...
- // - remove them from the DOM
- // - allow them to still be traversed with .nextSibling
- // - allow a single fragment.qSA to fetch all elements being removed
- var fragment = window.document.createDocumentFragment();
- for (i = 0; i < removeCount; i++) {
- fragment.appendChild(elementsToRemove[i]);
- }
-
- if (jqLite.hasData(firstElementToRemove)) {
- // Copy over user data (that includes Angular's $scope etc.). Don't copy private
- // data here because there's no public interface in jQuery to do that and copying over
- // event listeners (which is the main use of private data) wouldn't work anyway.
- jqLite.data(newNode, jqLite.data(firstElementToRemove));
-
- // Remove $destroy event listeners from `firstElementToRemove`
- jqLite(firstElementToRemove).off('$destroy');
- }
-
- // Cleanup any data/listeners on the elements and children.
- // This includes invoking the $destroy event on any elements with listeners.
- jqLite.cleanData(fragment.querySelectorAll('*'));
-
- // Update the jqLite collection to only contain the `newNode`
- for (i = 1; i < removeCount; i++) {
- delete elementsToRemove[i];
- }
- elementsToRemove[0] = newNode;
- elementsToRemove.length = 1;
- }
-
-
- function cloneAndAnnotateFn(fn, annotation) {
- return extend(function() { return fn.apply(null, arguments); }, fn, annotation);
- }
-
-
- function invokeLinkFn(linkFn, scope, $element, attrs, controllers, transcludeFn) {
- try {
- linkFn(scope, $element, attrs, controllers, transcludeFn);
- } catch (e) {
- $exceptionHandler(e, startingTag($element));
- }
- }
-
-
- // Set up $watches for isolate scope and controller bindings.
- function initializeDirectiveBindings(scope, attrs, destination, bindings, directive) {
- var removeWatchCollection = [];
- var initialChanges = {};
- var changes;
- forEach(bindings, function initializeBinding(definition, scopeName) {
- var attrName = definition.attrName,
- optional = definition.optional,
- mode = definition.mode, // @, =, <, or &
- lastValue,
- parentGet, parentSet, compare, removeWatch;
-
- switch (mode) {
-
- case '@':
- if (!optional && !hasOwnProperty.call(attrs, attrName)) {
- destination[scopeName] = attrs[attrName] = undefined;
- }
- removeWatch = attrs.$observe(attrName, function(value) {
- if (isString(value) || isBoolean(value)) {
- var oldValue = destination[scopeName];
- recordChanges(scopeName, value, oldValue);
- destination[scopeName] = value;
- }
- });
- attrs.$$observers[attrName].$$scope = scope;
- lastValue = attrs[attrName];
- if (isString(lastValue)) {
- // If the attribute has been provided then we trigger an interpolation to ensure
- // the value is there for use in the link fn
- destination[scopeName] = $interpolate(lastValue)(scope);
- } else if (isBoolean(lastValue)) {
- // If the attributes is one of the BOOLEAN_ATTR then Angular will have converted
- // the value to boolean rather than a string, so we special case this situation
- destination[scopeName] = lastValue;
- }
- initialChanges[scopeName] = new SimpleChange(_UNINITIALIZED_VALUE, destination[scopeName]);
- removeWatchCollection.push(removeWatch);
- break;
-
- case '=':
- if (!hasOwnProperty.call(attrs, attrName)) {
- if (optional) break;
- attrs[attrName] = undefined;
- }
- if (optional && !attrs[attrName]) break;
-
- parentGet = $parse(attrs[attrName]);
- if (parentGet.literal) {
- compare = equals;
- } else {
- compare = simpleCompare;
- }
- parentSet = parentGet.assign || function() {
- // reset the change, or we will throw this exception on every $digest
- lastValue = destination[scopeName] = parentGet(scope);
- throw $compileMinErr('nonassign',
- 'Expression \'{0}\' in attribute \'{1}\' used with directive \'{2}\' is non-assignable!',
- attrs[attrName], attrName, directive.name);
- };
- lastValue = destination[scopeName] = parentGet(scope);
- var parentValueWatch = function parentValueWatch(parentValue) {
- if (!compare(parentValue, destination[scopeName])) {
- // we are out of sync and need to copy
- if (!compare(parentValue, lastValue)) {
- // parent changed and it has precedence
- destination[scopeName] = parentValue;
- } else {
- // if the parent can be assigned then do so
- parentSet(scope, parentValue = destination[scopeName]);
- }
- }
- lastValue = parentValue;
- return lastValue;
- };
- parentValueWatch.$stateful = true;
- if (definition.collection) {
- removeWatch = scope.$watchCollection(attrs[attrName], parentValueWatch);
- } else {
- removeWatch = scope.$watch($parse(attrs[attrName], parentValueWatch), null, parentGet.literal);
- }
- removeWatchCollection.push(removeWatch);
- break;
-
- case '<':
- if (!hasOwnProperty.call(attrs, attrName)) {
- if (optional) break;
- attrs[attrName] = undefined;
- }
- if (optional && !attrs[attrName]) break;
-
- parentGet = $parse(attrs[attrName]);
- var deepWatch = parentGet.literal;
-
- var initialValue = destination[scopeName] = parentGet(scope);
- initialChanges[scopeName] = new SimpleChange(_UNINITIALIZED_VALUE, destination[scopeName]);
-
- removeWatch = scope.$watch(parentGet, function parentValueWatchAction(newValue, oldValue) {
- if (oldValue === newValue) {
- if (oldValue === initialValue || (deepWatch && equals(oldValue, initialValue))) {
- return;
- }
- oldValue = initialValue;
- }
- recordChanges(scopeName, newValue, oldValue);
- destination[scopeName] = newValue;
- }, deepWatch);
-
- removeWatchCollection.push(removeWatch);
- break;
-
- case '&':
- // Don't assign Object.prototype method to scope
- parentGet = attrs.hasOwnProperty(attrName) ? $parse(attrs[attrName]) : noop;
-
- // Don't assign noop to destination if expression is not valid
- if (parentGet === noop && optional) break;
-
- destination[scopeName] = function(locals) {
- return parentGet(scope, locals);
- };
- break;
- }
- });
-
- function recordChanges(key, currentValue, previousValue) {
- if (isFunction(destination.$onChanges) && !simpleCompare(currentValue, previousValue)) {
- // If we have not already scheduled the top level onChangesQueue handler then do so now
- if (!onChangesQueue) {
- scope.$$postDigest(flushOnChangesQueue);
- onChangesQueue = [];
- }
- // If we have not already queued a trigger of onChanges for this controller then do so now
- if (!changes) {
- changes = {};
- onChangesQueue.push(triggerOnChangesHook);
- }
- // If the has been a change on this property already then we need to reuse the previous value
- if (changes[key]) {
- previousValue = changes[key].previousValue;
- }
- // Store this change
- changes[key] = new SimpleChange(previousValue, currentValue);
- }
- }
-
- function triggerOnChangesHook() {
- destination.$onChanges(changes);
- // Now clear the changes so that we schedule onChanges when more changes arrive
- changes = undefined;
- }
-
- return {
- initialChanges: initialChanges,
- removeWatches: removeWatchCollection.length && function removeWatches() {
- for (var i = 0, ii = removeWatchCollection.length; i < ii; ++i) {
- removeWatchCollection[i]();
- }
- }
- };
- }
- }];
-}
-
-function SimpleChange(previous, current) {
- this.previousValue = previous;
- this.currentValue = current;
-}
-SimpleChange.prototype.isFirstChange = function() { return this.previousValue === _UNINITIALIZED_VALUE; };
-
-
-var PREFIX_REGEXP = /^((?:x|data)[:\-_])/i;
-var SPECIAL_CHARS_REGEXP = /[:\-_]+(.)/g;
-
-/**
- * Converts all accepted directives format into proper directive name.
- * @param name Name to normalize
- */
-function directiveNormalize(name) {
- return name
- .replace(PREFIX_REGEXP, '')
- .replace(SPECIAL_CHARS_REGEXP, fnCamelCaseReplace);
-}
-
-/**
- * @ngdoc type
- * @name $compile.directive.Attributes
- *
- * @description
- * A shared object between directive compile / linking functions which contains normalized DOM
- * element attributes. The values reflect current binding state `{{ }}`. The normalization is
- * needed since all of these are treated as equivalent in Angular:
- *
- * ```
- *
- * ```
- */
-
-/**
- * @ngdoc property
- * @name $compile.directive.Attributes#$attr
- *
- * @description
- * A map of DOM element attribute names to the normalized name. This is
- * needed to do reverse lookup from normalized name back to actual name.
- */
-
-
-/**
- * @ngdoc method
- * @name $compile.directive.Attributes#$set
- * @kind function
- *
- * @description
- * Set DOM element attribute value.
- *
- *
- * @param {string} name Normalized element attribute name of the property to modify. The name is
- * reverse-translated using the {@link ng.$compile.directive.Attributes#$attr $attr}
- * property to the original name.
- * @param {string} value Value to set the attribute to. The value can be an interpolated string.
- */
-
-
-
-/**
- * Closure compiler type information
- */
-
-function nodesetLinkingFn(
- /* angular.Scope */ scope,
- /* NodeList */ nodeList,
- /* Element */ rootElement,
- /* function(Function) */ boundTranscludeFn
-) {}
-
-function directiveLinkingFn(
- /* nodesetLinkingFn */ nodesetLinkingFn,
- /* angular.Scope */ scope,
- /* Node */ node,
- /* Element */ rootElement,
- /* function(Function) */ boundTranscludeFn
-) {}
-
-function tokenDifference(str1, str2) {
- var values = '',
- tokens1 = str1.split(/\s+/),
- tokens2 = str2.split(/\s+/);
-
- outer:
- for (var i = 0; i < tokens1.length; i++) {
- var token = tokens1[i];
- for (var j = 0; j < tokens2.length; j++) {
- if (token === tokens2[j]) continue outer;
- }
- values += (values.length > 0 ? ' ' : '') + token;
- }
- return values;
-}
-
-function removeComments(jqNodes) {
- jqNodes = jqLite(jqNodes);
- var i = jqNodes.length;
-
- if (i <= 1) {
- return jqNodes;
- }
-
- while (i--) {
- var node = jqNodes[i];
- if (node.nodeType === NODE_TYPE_COMMENT ||
- (node.nodeType === NODE_TYPE_TEXT && node.nodeValue.trim() === '')) {
- splice.call(jqNodes, i, 1);
- }
- }
- return jqNodes;
-}
-
-var $controllerMinErr = minErr('$controller');
-
-
-var CNTRL_REG = /^(\S+)(\s+as\s+([\w$]+))?$/;
-function identifierForController(controller, ident) {
- if (ident && isString(ident)) return ident;
- if (isString(controller)) {
- var match = CNTRL_REG.exec(controller);
- if (match) return match[3];
- }
-}
-
-
-/**
- * @ngdoc provider
- * @name $controllerProvider
- * @this
- *
- * @description
- * The {@link ng.$controller $controller service} is used by Angular to create new
- * controllers.
- *
- * This provider allows controller registration via the
- * {@link ng.$controllerProvider#register register} method.
- */
-function $ControllerProvider() {
- var controllers = {},
- globals = false;
-
- /**
- * @ngdoc method
- * @name $controllerProvider#has
- * @param {string} name Controller name to check.
- */
- this.has = function(name) {
- return controllers.hasOwnProperty(name);
- };
-
- /**
- * @ngdoc method
- * @name $controllerProvider#register
- * @param {string|Object} name Controller name, or an object map of controllers where the keys are
- * the names and the values are the constructors.
- * @param {Function|Array} constructor Controller constructor fn (optionally decorated with DI
- * annotations in the array notation).
- */
- this.register = function(name, constructor) {
- assertNotHasOwnProperty(name, 'controller');
- if (isObject(name)) {
- extend(controllers, name);
- } else {
- controllers[name] = constructor;
- }
- };
-
- /**
- * @ngdoc method
- * @name $controllerProvider#allowGlobals
- * @description If called, allows `$controller` to find controller constructors on `window`
- *
- * @deprecated
- * sinceVersion="v1.3.0"
- * removeVersion="v1.7.0"
- * This method of finding controllers has been deprecated.
- */
- this.allowGlobals = function() {
- globals = true;
- };
-
-
- this.$get = ['$injector', '$window', function($injector, $window) {
-
- /**
- * @ngdoc service
- * @name $controller
- * @requires $injector
- *
- * @param {Function|string} constructor If called with a function then it's considered to be the
- * controller constructor function. Otherwise it's considered to be a string which is used
- * to retrieve the controller constructor using the following steps:
- *
- * * check if a controller with given name is registered via `$controllerProvider`
- * * check if evaluating the string on the current scope returns a constructor
- * * if $controllerProvider#allowGlobals, check `window[constructor]` on the global
- * `window` object (deprecated, not recommended)
- *
- * The string can use the `controller as property` syntax, where the controller instance is published
- * as the specified property on the `scope`; the `scope` must be injected into `locals` param for this
- * to work correctly.
- *
- * @param {Object} locals Injection locals for Controller.
- * @return {Object} Instance of given controller.
- *
- * @description
- * `$controller` service is responsible for instantiating controllers.
- *
- * It's just a simple call to {@link auto.$injector $injector}, but extracted into
- * a service, so that one can override this service with [BC version](https://gist.github.com/1649788).
- */
- return function $controller(expression, locals, later, ident) {
- // PRIVATE API:
- // param `later` --- indicates that the controller's constructor is invoked at a later time.
- // If true, $controller will allocate the object with the correct
- // prototype chain, but will not invoke the controller until a returned
- // callback is invoked.
- // param `ident` --- An optional label which overrides the label parsed from the controller
- // expression, if any.
- var instance, match, constructor, identifier;
- later = later === true;
- if (ident && isString(ident)) {
- identifier = ident;
- }
-
- if (isString(expression)) {
- match = expression.match(CNTRL_REG);
- if (!match) {
- throw $controllerMinErr('ctrlfmt',
- 'Badly formed controller string \'{0}\'. ' +
- 'Must match `__name__ as __id__` or `__name__`.', expression);
- }
- constructor = match[1];
- identifier = identifier || match[3];
- expression = controllers.hasOwnProperty(constructor)
- ? controllers[constructor]
- : getter(locals.$scope, constructor, true) ||
- (globals ? getter($window, constructor, true) : undefined);
-
- if (!expression) {
- throw $controllerMinErr('ctrlreg',
- 'The controller with the name \'{0}\' is not registered.', constructor);
- }
-
- assertArgFn(expression, constructor, true);
- }
-
- if (later) {
- // Instantiate controller later:
- // This machinery is used to create an instance of the object before calling the
- // controller's constructor itself.
- //
- // This allows properties to be added to the controller before the constructor is
- // invoked. Primarily, this is used for isolate scope bindings in $compile.
- //
- // This feature is not intended for use by applications, and is thus not documented
- // publicly.
- // Object creation: http://jsperf.com/create-constructor/2
- var controllerPrototype = (isArray(expression) ?
- expression[expression.length - 1] : expression).prototype;
- instance = Object.create(controllerPrototype || null);
-
- if (identifier) {
- addIdentifier(locals, identifier, instance, constructor || expression.name);
- }
-
- return extend(function $controllerInit() {
- var result = $injector.invoke(expression, instance, locals, constructor);
- if (result !== instance && (isObject(result) || isFunction(result))) {
- instance = result;
- if (identifier) {
- // If result changed, re-assign controllerAs value to scope.
- addIdentifier(locals, identifier, instance, constructor || expression.name);
- }
- }
- return instance;
- }, {
- instance: instance,
- identifier: identifier
- });
- }
-
- instance = $injector.instantiate(expression, locals, constructor);
-
- if (identifier) {
- addIdentifier(locals, identifier, instance, constructor || expression.name);
- }
-
- return instance;
- };
-
- function addIdentifier(locals, identifier, instance, name) {
- if (!(locals && isObject(locals.$scope))) {
- throw minErr('$controller')('noscp',
- 'Cannot export controller \'{0}\' as \'{1}\'! No $scope object provided via `locals`.',
- name, identifier);
- }
-
- locals.$scope[identifier] = instance;
- }
- }];
-}
-
-/**
- * @ngdoc service
- * @name $document
- * @requires $window
- * @this
- *
- * @description
- * A {@link angular.element jQuery or jqLite} wrapper for the browser's `window.document` object.
- *
- * @example
-
-
-
-
$document title:
-
window.document title:
-
-
-
- angular.module('documentExample', [])
- .controller('ExampleController', ['$scope', '$document', function($scope, $document) {
- $scope.title = $document[0].title;
- $scope.windowTitle = angular.element(window.document)[0].title;
- }]);
-
-
- */
-function $DocumentProvider() {
- this.$get = ['$window', function(window) {
- return jqLite(window.document);
- }];
-}
-
-
-/**
- * @private
- * @this
- * Listens for document visibility change and makes the current status accessible.
- */
-function $$IsDocumentHiddenProvider() {
- this.$get = ['$document', '$rootScope', function($document, $rootScope) {
- var doc = $document[0];
- var hidden = doc && doc.hidden;
-
- $document.on('visibilitychange', changeListener);
-
- $rootScope.$on('$destroy', function() {
- $document.off('visibilitychange', changeListener);
- });
-
- function changeListener() {
- hidden = doc.hidden;
- }
-
- return function() {
- return hidden;
- };
- }];
-}
-
-/**
- * @ngdoc service
- * @name $exceptionHandler
- * @requires ng.$log
- * @this
- *
- * @description
- * Any uncaught exception in angular expressions is delegated to this service.
- * The default implementation simply delegates to `$log.error` which logs it into
- * the browser console.
- *
- * In unit tests, if `angular-mocks.js` is loaded, this service is overridden by
- * {@link ngMock.$exceptionHandler mock $exceptionHandler} which aids in testing.
- *
- * ## Example:
- *
- * The example below will overwrite the default `$exceptionHandler` in order to (a) log uncaught
- * errors to the backend for later inspection by the developers and (b) to use `$log.warn()` instead
- * of `$log.error()`.
- *
- * ```js
- * angular.
- * module('exceptionOverwrite', []).
- * factory('$exceptionHandler', ['$log', 'logErrorsToBackend', function($log, logErrorsToBackend) {
- * return function myExceptionHandler(exception, cause) {
- * logErrorsToBackend(exception, cause);
- * $log.warn(exception, cause);
- * };
- * }]);
- * ```
- *
- *
- * Note, that code executed in event-listeners (even those registered using jqLite's `on`/`bind`
- * methods) does not delegate exceptions to the {@link ng.$exceptionHandler $exceptionHandler}
- * (unless executed during a digest).
- *
- * If you wish, you can manually delegate exceptions, e.g.
- * `try { ... } catch(e) { $exceptionHandler(e); }`
- *
- * @param {Error} exception Exception associated with the error.
- * @param {string=} cause Optional information about the context in which
- * the error was thrown.
- *
- */
-function $ExceptionHandlerProvider() {
- this.$get = ['$log', function($log) {
- return function(exception, cause) {
- $log.error.apply($log, arguments);
- };
- }];
-}
-
-var $$ForceReflowProvider = /** @this */ function() {
- this.$get = ['$document', function($document) {
- return function(domNode) {
- //the line below will force the browser to perform a repaint so
- //that all the animated elements within the animation frame will
- //be properly updated and drawn on screen. This is required to
- //ensure that the preparation animation is properly flushed so that
- //the active state picks up from there. DO NOT REMOVE THIS LINE.
- //DO NOT OPTIMIZE THIS LINE. THE MINIFIER WILL REMOVE IT OTHERWISE WHICH
- //WILL RESULT IN AN UNPREDICTABLE BUG THAT IS VERY HARD TO TRACK DOWN AND
- //WILL TAKE YEARS AWAY FROM YOUR LIFE.
- if (domNode) {
- if (!domNode.nodeType && domNode instanceof jqLite) {
- domNode = domNode[0];
- }
- } else {
- domNode = $document[0].body;
- }
- return domNode.offsetWidth + 1;
- };
- }];
-};
-
-var APPLICATION_JSON = 'application/json';
-var CONTENT_TYPE_APPLICATION_JSON = {'Content-Type': APPLICATION_JSON + ';charset=utf-8'};
-var JSON_START = /^\[|^\{(?!\{)/;
-var JSON_ENDS = {
- '[': /]$/,
- '{': /}$/
-};
-var JSON_PROTECTION_PREFIX = /^\)]\}',?\n/;
-var $httpMinErr = minErr('$http');
-
-function serializeValue(v) {
- if (isObject(v)) {
- return isDate(v) ? v.toISOString() : toJson(v);
- }
- return v;
-}
-
-
-/** @this */
-function $HttpParamSerializerProvider() {
- /**
- * @ngdoc service
- * @name $httpParamSerializer
- * @description
- *
- * Default {@link $http `$http`} params serializer that converts objects to strings
- * according to the following rules:
- *
- * * `{'foo': 'bar'}` results in `foo=bar`
- * * `{'foo': Date.now()}` results in `foo=2015-04-01T09%3A50%3A49.262Z` (`toISOString()` and encoded representation of a Date object)
- * * `{'foo': ['bar', 'baz']}` results in `foo=bar&foo=baz` (repeated key for each array element)
- * * `{'foo': {'bar':'baz'}}` results in `foo=%7B%22bar%22%3A%22baz%22%7D` (stringified and encoded representation of an object)
- *
- * Note that serializer will sort the request parameters alphabetically.
- * */
-
- this.$get = function() {
- return function ngParamSerializer(params) {
- if (!params) return '';
- var parts = [];
- forEachSorted(params, function(value, key) {
- if (value === null || isUndefined(value)) return;
- if (isArray(value)) {
- forEach(value, function(v) {
- parts.push(encodeUriQuery(key) + '=' + encodeUriQuery(serializeValue(v)));
- });
- } else {
- parts.push(encodeUriQuery(key) + '=' + encodeUriQuery(serializeValue(value)));
- }
- });
-
- return parts.join('&');
- };
- };
-}
-
-/** @this */
-function $HttpParamSerializerJQLikeProvider() {
- /**
- * @ngdoc service
- * @name $httpParamSerializerJQLike
- *
- * @description
- *
- * Alternative {@link $http `$http`} params serializer that follows
- * jQuery's [`param()`](http://api.jquery.com/jquery.param/) method logic.
- * The serializer will also sort the params alphabetically.
- *
- * To use it for serializing `$http` request parameters, set it as the `paramSerializer` property:
- *
- * ```js
- * $http({
- * url: myUrl,
- * method: 'GET',
- * params: myParams,
- * paramSerializer: '$httpParamSerializerJQLike'
- * });
- * ```
- *
- * It is also possible to set it as the default `paramSerializer` in the
- * {@link $httpProvider#defaults `$httpProvider`}.
- *
- * Additionally, you can inject the serializer and use it explicitly, for example to serialize
- * form data for submission:
- *
- * ```js
- * .controller(function($http, $httpParamSerializerJQLike) {
- * //...
- *
- * $http({
- * url: myUrl,
- * method: 'POST',
- * data: $httpParamSerializerJQLike(myData),
- * headers: {
- * 'Content-Type': 'application/x-www-form-urlencoded'
- * }
- * });
- *
- * });
- * ```
- *
- * */
- this.$get = function() {
- return function jQueryLikeParamSerializer(params) {
- if (!params) return '';
- var parts = [];
- serialize(params, '', true);
- return parts.join('&');
-
- function serialize(toSerialize, prefix, topLevel) {
- if (toSerialize === null || isUndefined(toSerialize)) return;
- if (isArray(toSerialize)) {
- forEach(toSerialize, function(value, index) {
- serialize(value, prefix + '[' + (isObject(value) ? index : '') + ']');
- });
- } else if (isObject(toSerialize) && !isDate(toSerialize)) {
- forEachSorted(toSerialize, function(value, key) {
- serialize(value, prefix +
- (topLevel ? '' : '[') +
- key +
- (topLevel ? '' : ']'));
- });
- } else {
- parts.push(encodeUriQuery(prefix) + '=' + encodeUriQuery(serializeValue(toSerialize)));
- }
- }
- };
- };
-}
-
-function defaultHttpResponseTransform(data, headers) {
- if (isString(data)) {
- // Strip json vulnerability protection prefix and trim whitespace
- var tempData = data.replace(JSON_PROTECTION_PREFIX, '').trim();
-
- if (tempData) {
- var contentType = headers('Content-Type');
- if ((contentType && (contentType.indexOf(APPLICATION_JSON) === 0)) || isJsonLike(tempData)) {
- try {
- data = fromJson(tempData);
- } catch (e) {
- throw $httpMinErr('baddata', 'Data must be a valid JSON object. Received: "{0}". ' +
- 'Parse error: "{1}"', data, e);
- }
- }
- }
- }
-
- return data;
-}
-
-function isJsonLike(str) {
- var jsonStart = str.match(JSON_START);
- return jsonStart && JSON_ENDS[jsonStart[0]].test(str);
-}
-
-/**
- * Parse headers into key value object
- *
- * @param {string} headers Raw headers as a string
- * @returns {Object} Parsed headers as key value object
- */
-function parseHeaders(headers) {
- var parsed = createMap(), i;
-
- function fillInParsed(key, val) {
- if (key) {
- parsed[key] = parsed[key] ? parsed[key] + ', ' + val : val;
- }
- }
-
- if (isString(headers)) {
- forEach(headers.split('\n'), function(line) {
- i = line.indexOf(':');
- fillInParsed(lowercase(trim(line.substr(0, i))), trim(line.substr(i + 1)));
- });
- } else if (isObject(headers)) {
- forEach(headers, function(headerVal, headerKey) {
- fillInParsed(lowercase(headerKey), trim(headerVal));
- });
- }
-
- return parsed;
-}
-
-
-/**
- * Returns a function that provides access to parsed headers.
- *
- * Headers are lazy parsed when first requested.
- * @see parseHeaders
- *
- * @param {(string|Object)} headers Headers to provide access to.
- * @returns {function(string=)} Returns a getter function which if called with:
- *
- * - if called with an argument returns a single header value or null
- * - if called with no arguments returns an object containing all headers.
- */
-function headersGetter(headers) {
- var headersObj;
-
- return function(name) {
- if (!headersObj) headersObj = parseHeaders(headers);
-
- if (name) {
- var value = headersObj[lowercase(name)];
- if (value === undefined) {
- value = null;
- }
- return value;
- }
-
- return headersObj;
- };
-}
-
-
-/**
- * Chain all given functions
- *
- * This function is used for both request and response transforming
- *
- * @param {*} data Data to transform.
- * @param {function(string=)} headers HTTP headers getter fn.
- * @param {number} status HTTP status code of the response.
- * @param {(Function|Array.)} fns Function or an array of functions.
- * @returns {*} Transformed data.
- */
-function transformData(data, headers, status, fns) {
- if (isFunction(fns)) {
- return fns(data, headers, status);
- }
-
- forEach(fns, function(fn) {
- data = fn(data, headers, status);
- });
-
- return data;
-}
-
-
-function isSuccess(status) {
- return 200 <= status && status < 300;
-}
-
-
-/**
- * @ngdoc provider
- * @name $httpProvider
- * @this
- *
- * @description
- * Use `$httpProvider` to change the default behavior of the {@link ng.$http $http} service.
- * */
-function $HttpProvider() {
- /**
- * @ngdoc property
- * @name $httpProvider#defaults
- * @description
- *
- * Object containing default values for all {@link ng.$http $http} requests.
- *
- * - **`defaults.cache`** - {boolean|Object} - A boolean value or object created with
- * {@link ng.$cacheFactory `$cacheFactory`} to enable or disable caching of HTTP responses
- * by default. See {@link $http#caching $http Caching} for more information.
- *
- * - **`defaults.xsrfCookieName`** - {string} - Name of cookie containing the XSRF token.
- * Defaults value is `'XSRF-TOKEN'`.
- *
- * - **`defaults.xsrfHeaderName`** - {string} - Name of HTTP header to populate with the
- * XSRF token. Defaults value is `'X-XSRF-TOKEN'`.
- *
- * - **`defaults.headers`** - {Object} - Default headers for all $http requests.
- * Refer to {@link ng.$http#setting-http-headers $http} for documentation on
- * setting default headers.
- * - **`defaults.headers.common`**
- * - **`defaults.headers.post`**
- * - **`defaults.headers.put`**
- * - **`defaults.headers.patch`**
- *
- *
- * - **`defaults.paramSerializer`** - `{string|function(Object):string}` - A function
- * used to the prepare string representation of request parameters (specified as an object).
- * If specified as string, it is interpreted as a function registered with the {@link auto.$injector $injector}.
- * Defaults to {@link ng.$httpParamSerializer $httpParamSerializer}.
- *
- * - **`defaults.jsonpCallbackParam`** - `{string}` - the name of the query parameter that passes the name of the
- * callback in a JSONP request. The value of this parameter will be replaced with the expression generated by the
- * {@link $jsonpCallbacks} service. Defaults to `'callback'`.
- *
- **/
- var defaults = this.defaults = {
- // transform incoming response data
- transformResponse: [defaultHttpResponseTransform],
-
- // transform outgoing request data
- transformRequest: [function(d) {
- return isObject(d) && !isFile(d) && !isBlob(d) && !isFormData(d) ? toJson(d) : d;
- }],
-
- // default headers
- headers: {
- common: {
- 'Accept': 'application/json, text/plain, */*'
- },
- post: shallowCopy(CONTENT_TYPE_APPLICATION_JSON),
- put: shallowCopy(CONTENT_TYPE_APPLICATION_JSON),
- patch: shallowCopy(CONTENT_TYPE_APPLICATION_JSON)
- },
-
- xsrfCookieName: 'XSRF-TOKEN',
- xsrfHeaderName: 'X-XSRF-TOKEN',
-
- paramSerializer: '$httpParamSerializer',
-
- jsonpCallbackParam: 'callback'
- };
-
- var useApplyAsync = false;
- /**
- * @ngdoc method
- * @name $httpProvider#useApplyAsync
- * @description
- *
- * Configure $http service to combine processing of multiple http responses received at around
- * the same time via {@link ng.$rootScope.Scope#$applyAsync $rootScope.$applyAsync}. This can result in
- * significant performance improvement for bigger applications that make many HTTP requests
- * concurrently (common during application bootstrap).
- *
- * Defaults to false. If no value is specified, returns the current configured value.
- *
- * @param {boolean=} value If true, when requests are loaded, they will schedule a deferred
- * "apply" on the next tick, giving time for subsequent requests in a roughly ~10ms window
- * to load and share the same digest cycle.
- *
- * @returns {boolean|Object} If a value is specified, returns the $httpProvider for chaining.
- * otherwise, returns the current configured value.
- **/
- this.useApplyAsync = function(value) {
- if (isDefined(value)) {
- useApplyAsync = !!value;
- return this;
- }
- return useApplyAsync;
- };
-
- /**
- * @ngdoc property
- * @name $httpProvider#interceptors
- * @description
- *
- * Array containing service factories for all synchronous or asynchronous {@link ng.$http $http}
- * pre-processing of request or postprocessing of responses.
- *
- * These service factories are ordered by request, i.e. they are applied in the same order as the
- * array, on request, but reverse order, on response.
- *
- * {@link ng.$http#interceptors Interceptors detailed info}
- **/
- var interceptorFactories = this.interceptors = [];
-
- this.$get = ['$browser', '$httpBackend', '$$cookieReader', '$cacheFactory', '$rootScope', '$q', '$injector', '$sce',
- function($browser, $httpBackend, $$cookieReader, $cacheFactory, $rootScope, $q, $injector, $sce) {
-
- var defaultCache = $cacheFactory('$http');
-
- /**
- * Make sure that default param serializer is exposed as a function
- */
- defaults.paramSerializer = isString(defaults.paramSerializer) ?
- $injector.get(defaults.paramSerializer) : defaults.paramSerializer;
-
- /**
- * Interceptors stored in reverse order. Inner interceptors before outer interceptors.
- * The reversal is needed so that we can build up the interception chain around the
- * server request.
- */
- var reversedInterceptors = [];
-
- forEach(interceptorFactories, function(interceptorFactory) {
- reversedInterceptors.unshift(isString(interceptorFactory)
- ? $injector.get(interceptorFactory) : $injector.invoke(interceptorFactory));
- });
-
- /**
- * @ngdoc service
- * @kind function
- * @name $http
- * @requires ng.$httpBackend
- * @requires $cacheFactory
- * @requires $rootScope
- * @requires $q
- * @requires $injector
- *
- * @description
- * The `$http` service is a core Angular service that facilitates communication with the remote
- * HTTP servers via the browser's [XMLHttpRequest](https://developer.mozilla.org/en/xmlhttprequest)
- * object or via [JSONP](http://en.wikipedia.org/wiki/JSONP).
- *
- * For unit testing applications that use `$http` service, see
- * {@link ngMock.$httpBackend $httpBackend mock}.
- *
- * For a higher level of abstraction, please check out the {@link ngResource.$resource
- * $resource} service.
- *
- * The $http API is based on the {@link ng.$q deferred/promise APIs} exposed by
- * the $q service. While for simple usage patterns this doesn't matter much, for advanced usage
- * it is important to familiarize yourself with these APIs and the guarantees they provide.
- *
- *
- * ## General usage
- * The `$http` service is a function which takes a single argument — a {@link $http#usage configuration object} —
- * that is used to generate an HTTP request and returns a {@link ng.$q promise}.
- *
- * ```js
- * // Simple GET request example:
- * $http({
- * method: 'GET',
- * url: '/someUrl'
- * }).then(function successCallback(response) {
- * // this callback will be called asynchronously
- * // when the response is available
- * }, function errorCallback(response) {
- * // called asynchronously if an error occurs
- * // or server returns response with an error status.
- * });
- * ```
- *
- * The response object has these properties:
- *
- * - **data** – `{string|Object}` – The response body transformed with the transform
- * functions.
- * - **status** – `{number}` – HTTP status code of the response.
- * - **headers** – `{function([headerName])}` – Header getter function.
- * - **config** – `{Object}` – The configuration object that was used to generate the request.
- * - **statusText** – `{string}` – HTTP status text of the response.
- *
- * A response status code between 200 and 299 is considered a success status and will result in
- * the success callback being called. Any response status code outside of that range is
- * considered an error status and will result in the error callback being called.
- * Also, status codes less than -1 are normalized to zero. -1 usually means the request was
- * aborted, e.g. using a `config.timeout`.
- * Note that if the response is a redirect, XMLHttpRequest will transparently follow it, meaning
- * that the outcome (success or error) will be determined by the final response status code.
- *
- *
- * ## Shortcut methods
- *
- * Shortcut methods are also available. All shortcut methods require passing in the URL, and
- * request data must be passed in for POST/PUT requests. An optional config can be passed as the
- * last argument.
- *
- * ```js
- * $http.get('/someUrl', config).then(successCallback, errorCallback);
- * $http.post('/someUrl', data, config).then(successCallback, errorCallback);
- * ```
- *
- * Complete list of shortcut methods:
- *
- * - {@link ng.$http#get $http.get}
- * - {@link ng.$http#head $http.head}
- * - {@link ng.$http#post $http.post}
- * - {@link ng.$http#put $http.put}
- * - {@link ng.$http#delete $http.delete}
- * - {@link ng.$http#jsonp $http.jsonp}
- * - {@link ng.$http#patch $http.patch}
- *
- *
- * ## Writing Unit Tests that use $http
- * When unit testing (using {@link ngMock ngMock}), it is necessary to call
- * {@link ngMock.$httpBackend#flush $httpBackend.flush()} to flush each pending
- * request using trained responses.
- *
- * ```
- * $httpBackend.expectGET(...);
- * $http.get(...);
- * $httpBackend.flush();
- * ```
- *
- * ## Setting HTTP Headers
- *
- * The $http service will automatically add certain HTTP headers to all requests. These defaults
- * can be fully configured by accessing the `$httpProvider.defaults.headers` configuration
- * object, which currently contains this default configuration:
- *
- * - `$httpProvider.defaults.headers.common` (headers that are common for all requests):
- * - Accept: application/json, text/plain, \*/\*
- * - `$httpProvider.defaults.headers.post`: (header defaults for POST requests)
- * - `Content-Type: application/json`
- * - `$httpProvider.defaults.headers.put` (header defaults for PUT requests)
- * - `Content-Type: application/json`
- *
- * To add or overwrite these defaults, simply add or remove a property from these configuration
- * objects. To add headers for an HTTP method other than POST or PUT, simply add a new object
- * with the lowercased HTTP method name as the key, e.g.
- * `$httpProvider.defaults.headers.get = { 'My-Header' : 'value' }`.
- *
- * The defaults can also be set at runtime via the `$http.defaults` object in the same
- * fashion. For example:
- *
- * ```
- * module.run(function($http) {
- * $http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w';
- * });
- * ```
- *
- * In addition, you can supply a `headers` property in the config object passed when
- * calling `$http(config)`, which overrides the defaults without changing them globally.
- *
- * To explicitly remove a header automatically added via $httpProvider.defaults.headers on a per request basis,
- * Use the `headers` property, setting the desired header to `undefined`. For example:
- *
- * ```js
- * var req = {
- * method: 'POST',
- * url: 'http://example.com',
- * headers: {
- * 'Content-Type': undefined
- * },
- * data: { test: 'test' }
- * }
- *
- * $http(req).then(function(){...}, function(){...});
- * ```
- *
- * ## Transforming Requests and Responses
- *
- * Both requests and responses can be transformed using transformation functions: `transformRequest`
- * and `transformResponse`. These properties can be a single function that returns
- * the transformed value (`function(data, headersGetter, status)`) or an array of such transformation functions,
- * which allows you to `push` or `unshift` a new transformation function into the transformation chain.
- *
- *
- * **Note:** Angular does not make a copy of the `data` parameter before it is passed into the `transformRequest` pipeline.
- * That means changes to the properties of `data` are not local to the transform function (since Javascript passes objects by reference).
- * For example, when calling `$http.get(url, $scope.myObject)`, modifications to the object's properties in a transformRequest
- * function will be reflected on the scope and in any templates where the object is data-bound.
- * To prevent this, transform functions should have no side-effects.
- * If you need to modify properties, it is recommended to make a copy of the data, or create new object to return.
- *
- *
- * ### Default Transformations
- *
- * The `$httpProvider` provider and `$http` service expose `defaults.transformRequest` and
- * `defaults.transformResponse` properties. If a request does not provide its own transformations
- * then these will be applied.
- *
- * You can augment or replace the default transformations by modifying these properties by adding to or
- * replacing the array.
- *
- * Angular provides the following default transformations:
- *
- * Request transformations (`$httpProvider.defaults.transformRequest` and `$http.defaults.transformRequest`):
- *
- * - If the `data` property of the request configuration object contains an object, serialize it
- * into JSON format.
- *
- * Response transformations (`$httpProvider.defaults.transformResponse` and `$http.defaults.transformResponse`):
- *
- * - If XSRF prefix is detected, strip it (see Security Considerations section below).
- * - If JSON response is detected, deserialize it using a JSON parser.
- *
- *
- * ### Overriding the Default Transformations Per Request
- *
- * If you wish to override the request/response transformations only for a single request then provide
- * `transformRequest` and/or `transformResponse` properties on the configuration object passed
- * into `$http`.
- *
- * Note that if you provide these properties on the config object the default transformations will be
- * overwritten. If you wish to augment the default transformations then you must include them in your
- * local transformation array.
- *
- * The following code demonstrates adding a new response transformation to be run after the default response
- * transformations have been run.
- *
- * ```js
- * function appendTransform(defaults, transform) {
- *
- * // We can't guarantee that the default transformation is an array
- * defaults = angular.isArray(defaults) ? defaults : [defaults];
- *
- * // Append the new transformation to the defaults
- * return defaults.concat(transform);
- * }
- *
- * $http({
- * url: '...',
- * method: 'GET',
- * transformResponse: appendTransform($http.defaults.transformResponse, function(value) {
- * return doTransform(value);
- * })
- * });
- * ```
- *
- *
- * ## Caching
- *
- * {@link ng.$http `$http`} responses are not cached by default. To enable caching, you must
- * set the config.cache value or the default cache value to TRUE or to a cache object (created
- * with {@link ng.$cacheFactory `$cacheFactory`}). If defined, the value of config.cache takes
- * precedence over the default cache value.
- *
- * In order to:
- * * cache all responses - set the default cache value to TRUE or to a cache object
- * * cache a specific response - set config.cache value to TRUE or to a cache object
- *
- * If caching is enabled, but neither the default cache nor config.cache are set to a cache object,
- * then the default `$cacheFactory("$http")` object is used.
- *
- * The default cache value can be set by updating the
- * {@link ng.$http#defaults `$http.defaults.cache`} property or the
- * {@link $httpProvider#defaults `$httpProvider.defaults.cache`} property.
- *
- * When caching is enabled, {@link ng.$http `$http`} stores the response from the server using
- * the relevant cache object. The next time the same request is made, the response is returned
- * from the cache without sending a request to the server.
- *
- * Take note that:
- *
- * * Only GET and JSONP requests are cached.
- * * The cache key is the request URL including search parameters; headers are not considered.
- * * Cached responses are returned asynchronously, in the same way as responses from the server.
- * * If multiple identical requests are made using the same cache, which is not yet populated,
- * one request will be made to the server and remaining requests will return the same response.
- * * A cache-control header on the response does not affect if or how responses are cached.
- *
- *
- * ## Interceptors
- *
- * Before you start creating interceptors, be sure to understand the
- * {@link ng.$q $q and deferred/promise APIs}.
- *
- * For purposes of global error handling, authentication, or any kind of synchronous or
- * asynchronous pre-processing of request or postprocessing of responses, it is desirable to be
- * able to intercept requests before they are handed to the server and
- * responses before they are handed over to the application code that
- * initiated these requests. The interceptors leverage the {@link ng.$q
- * promise APIs} to fulfill this need for both synchronous and asynchronous pre-processing.
- *
- * The interceptors are service factories that are registered with the `$httpProvider` by
- * adding them to the `$httpProvider.interceptors` array. The factory is called and
- * injected with dependencies (if specified) and returns the interceptor.
- *
- * There are two kinds of interceptors (and two kinds of rejection interceptors):
- *
- * * `request`: interceptors get called with a http {@link $http#usage config} object. The function is free to
- * modify the `config` object or create a new one. The function needs to return the `config`
- * object directly, or a promise containing the `config` or a new `config` object.
- * * `requestError`: interceptor gets called when a previous interceptor threw an error or
- * resolved with a rejection.
- * * `response`: interceptors get called with http `response` object. The function is free to
- * modify the `response` object or create a new one. The function needs to return the `response`
- * object directly, or as a promise containing the `response` or a new `response` object.
- * * `responseError`: interceptor gets called when a previous interceptor threw an error or
- * resolved with a rejection.
- *
- *
- * ```js
- * // register the interceptor as a service
- * $provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
- * return {
- * // optional method
- * 'request': function(config) {
- * // do something on success
- * return config;
- * },
- *
- * // optional method
- * 'requestError': function(rejection) {
- * // do something on error
- * if (canRecover(rejection)) {
- * return responseOrNewPromise
- * }
- * return $q.reject(rejection);
- * },
- *
- *
- *
- * // optional method
- * 'response': function(response) {
- * // do something on success
- * return response;
- * },
- *
- * // optional method
- * 'responseError': function(rejection) {
- * // do something on error
- * if (canRecover(rejection)) {
- * return responseOrNewPromise
- * }
- * return $q.reject(rejection);
- * }
- * };
- * });
- *
- * $httpProvider.interceptors.push('myHttpInterceptor');
- *
- *
- * // alternatively, register the interceptor via an anonymous factory
- * $httpProvider.interceptors.push(function($q, dependency1, dependency2) {
- * return {
- * 'request': function(config) {
- * // same as above
- * },
- *
- * 'response': function(response) {
- * // same as above
- * }
- * };
- * });
- * ```
- *
- * ## Security Considerations
- *
- * When designing web applications, consider security threats from:
- *
- * - [JSON vulnerability](http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx)
- * - [XSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery)
- *
- * Both server and the client must cooperate in order to eliminate these threats. Angular comes
- * pre-configured with strategies that address these issues, but for this to work backend server
- * cooperation is required.
- *
- * ### JSON Vulnerability Protection
- *
- * A [JSON vulnerability](http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx)
- * allows third party website to turn your JSON resource URL into
- * [JSONP](http://en.wikipedia.org/wiki/JSONP) request under some conditions. To
- * counter this your server can prefix all JSON requests with following string `")]}',\n"`.
- * Angular will automatically strip the prefix before processing it as JSON.
- *
- * For example if your server needs to return:
- * ```js
- * ['one','two']
- * ```
- *
- * which is vulnerable to attack, your server can return:
- * ```js
- * )]}',
- * ['one','two']
- * ```
- *
- * Angular will strip the prefix, before processing the JSON.
- *
- *
- * ### Cross Site Request Forgery (XSRF) Protection
- *
- * [XSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery) is an attack technique by
- * which the attacker can trick an authenticated user into unknowingly executing actions on your
- * website. Angular provides a mechanism to counter XSRF. When performing XHR requests, the
- * $http service reads a token from a cookie (by default, `XSRF-TOKEN`) and sets it as an HTTP
- * header (`X-XSRF-TOKEN`). Since only JavaScript that runs on your domain could read the
- * cookie, your server can be assured that the XHR came from JavaScript running on your domain.
- * The header will not be set for cross-domain requests.
- *
- * To take advantage of this, your server needs to set a token in a JavaScript readable session
- * cookie called `XSRF-TOKEN` on the first HTTP GET request. On subsequent XHR requests the
- * server can verify that the cookie matches `X-XSRF-TOKEN` HTTP header, and therefore be sure
- * that only JavaScript running on your domain could have sent the request. The token must be
- * unique for each user and must be verifiable by the server (to prevent the JavaScript from
- * making up its own tokens). We recommend that the token is a digest of your site's
- * authentication cookie with a [salt](https://en.wikipedia.org/wiki/Salt_(cryptography))
- * for added security.
- *
- * The name of the headers can be specified using the xsrfHeaderName and xsrfCookieName
- * properties of either $httpProvider.defaults at config-time, $http.defaults at run-time,
- * or the per-request config object.
- *
- * In order to prevent collisions in environments where multiple Angular apps share the
- * same domain or subdomain, we recommend that each application uses unique cookie name.
- *
- * @param {object} config Object describing the request to be made and how it should be
- * processed. The object has following properties:
- *
- * - **method** – `{string}` – HTTP method (e.g. 'GET', 'POST', etc)
- * - **url** – `{string|TrustedObject}` – Absolute or relative URL of the resource that is being requested;
- * or an object created by a call to `$sce.trustAsResourceUrl(url)`.
- * - **params** – `{Object.}` – Map of strings or objects which will be serialized
- * with the `paramSerializer` and appended as GET parameters.
- * - **data** – `{string|Object}` – Data to be sent as the request message data.
- * - **headers** – `{Object}` – Map of strings or functions which return strings representing
- * HTTP headers to send to the server. If the return value of a function is null, the
- * header will not be sent. Functions accept a config object as an argument.
- * - **eventHandlers** - `{Object}` - Event listeners to be bound to the XMLHttpRequest object.
- * To bind events to the XMLHttpRequest upload object, use `uploadEventHandlers`.
- * The handler will be called in the context of a `$apply` block.
- * - **uploadEventHandlers** - `{Object}` - Event listeners to be bound to the XMLHttpRequest upload
- * object. To bind events to the XMLHttpRequest object, use `eventHandlers`.
- * The handler will be called in the context of a `$apply` block.
- * - **xsrfHeaderName** – `{string}` – Name of HTTP header to populate with the XSRF token.
- * - **xsrfCookieName** – `{string}` – Name of cookie containing the XSRF token.
- * - **transformRequest** –
- * `{function(data, headersGetter)|Array.}` –
- * transform function or an array of such functions. The transform function takes the http
- * request body and headers and returns its transformed (typically serialized) version.
- * See {@link ng.$http#overriding-the-default-transformations-per-request
- * Overriding the Default Transformations}
- * - **transformResponse** –
- * `{function(data, headersGetter, status)|Array.}` –
- * transform function or an array of such functions. The transform function takes the http
- * response body, headers and status and returns its transformed (typically deserialized) version.
- * See {@link ng.$http#overriding-the-default-transformations-per-request
- * Overriding the Default Transformations}
- * - **paramSerializer** - `{string|function(Object):string}` - A function used to
- * prepare the string representation of request parameters (specified as an object).
- * If specified as string, it is interpreted as function registered with the
- * {@link $injector $injector}, which means you can create your own serializer
- * by registering it as a {@link auto.$provide#service service}.
- * The default serializer is the {@link $httpParamSerializer $httpParamSerializer};
- * alternatively, you can use the {@link $httpParamSerializerJQLike $httpParamSerializerJQLike}
- * - **cache** – `{boolean|Object}` – A boolean value or object created with
- * {@link ng.$cacheFactory `$cacheFactory`} to enable or disable caching of the HTTP response.
- * See {@link $http#caching $http Caching} for more information.
- * - **timeout** – `{number|Promise}` – timeout in milliseconds, or {@link ng.$q promise}
- * that should abort the request when resolved.
- * - **withCredentials** - `{boolean}` - whether to set the `withCredentials` flag on the
- * XHR object. See [requests with credentials](https://developer.mozilla.org/docs/Web/HTTP/Access_control_CORS#Requests_with_credentials)
- * for more information.
- * - **responseType** - `{string}` - see
- * [XMLHttpRequest.responseType](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#xmlhttprequest-responsetype).
- *
- * @returns {HttpPromise} Returns a {@link ng.$q `Promise}` that will be resolved to a response object
- * when the request succeeds or fails.
- *
- *
- * @property {Array.
