@odoo/owl 3.0.0-alpha.28 → 3.0.0-alpha.29

package/README.md

@@ -0,0 +1,106 @@
+<h1 align="center">🦉 <a href="https://odoo.github.io/owl/">Owl</a> 🦉</h1>
+
+<p align="center">
+  <strong>A modern, lightweight UI framework for applications that scale</strong>
+</p>
+
+[![License: LGPL v3](https://img.shields.io/badge/License-LGPL%20v3-blue.svg)](https://www.gnu.org/licenses/lgpl-3.0)
+[![npm version](https://badge.fury.io/js/@odoo%2Fowl.svg)](https://badge.fury.io/js/@odoo%2Fowl)
+[![Downloads](https://img.shields.io/npm/dm/@odoo%2Fowl.svg)](https://www.npmjs.com/package/@odoo/owl)
+
+---
+
+> **Owl 3.0.0 Alpha:** This is an alpha release. The API and features are subject to change without notice.
+
+---
+
+## Try it now
+
+The fastest way to discover Owl is the **[online playground](https://odoo.github.io/owl/playground)**.
+It features interactive examples, a live editor, and showcases all major features:
+reactivity, components, plugins, and more. It also includes **guided tutorials**
+and is the recommended way to learn about Owl.
+
+## What is Owl?
+
+Owl is a modern UI framework (~30kb gzipped, zero dependencies) written in TypeScript,
+built by [Odoo](https://www.odoo.com/). It powers Odoo's web client, one of the largest
+open-source business applications, but is equally suited for small projects and prototypes.
+
+Key features:
+
+- **Signal-based reactivity** — Explicit, composable, and debuggable state management
+- **Plugin system** — Type-safe, composable sharing of state and services
+- **Class-based components** — Familiar OOP patterns with ES6 classes
+- **Declarative templates** — XML templates with a clean syntax
+- **Async rendering** — Concurrent mode for smooth user experiences
+
+## Quick Example
+
+```javascript
+import { Component, signal, computed, mount, xml } from "@odoo/owl";
+
+class TodoList extends Component {
+  static template = xml`
+    <input placeholder="Add todo..." t-on-keydown="this.onKeydown"/>
+    <ul>
+      <t t-foreach="this.todos()" t-as="todo" t-key="todo.id">
+        <li t-att-class="{ done: todo.done }">
+          <input type="checkbox" t-model="todo.done"/>
+          <t t-out="todo.text"/>
+        </li>
+      </t>
+    </ul>
+    <p t-if="this.remaining() > 0">
+      <t t-out="this.remaining()"/> item(s) remaining
+    </p>`;
+
+  todos = signal.Array([
+    { id: 1, text: "Learn Owl", done: false },
+    { id: 2, text: "Build something", done: false },
+  ]);
+
+  remaining = computed(() => this.todos().filter((t) => !t.done).length);
+
+  onKeydown(ev) {
+    if (ev.key === "Enter" && ev.target.value) {
+      this.todos.push({
+        id: Date.now(),
+        text: ev.target.value,
+        done: false,
+      });
+      ev.target.value = "";
+    }
+  }
+}
+
+mount(TodoList, document.body);
+```
+
+This example demonstrates Owl's reactivity: `todos` is a signal, `remaining`
+is a computed value that updates automatically, and the UI reacts to changes
+without manual subscription management.
+
+## Documentation
+
+The full documentation is available at **[odoo.github.io/owl/documentation](https://odoo.github.io/owl/documentation/)**.
+
+For the Owl 2 documentation, see the [owl-2.x branch](https://github.com/odoo/owl/tree/owl-2.x).
+
+## Installation
+
+```bash
+npm install @odoo/owl
+```
+
+Or download directly: [latest release](https://github.com/odoo/owl/releases/latest)
+
+## Devtools
+
+The Owl devtools extension helps debug your applications with component tree
+inspection, state visualization, and performance profiling. Download it from
+the [releases page](https://github.com/odoo/owl/releases/latest).
+
+## License
+
+Owl is released under the [LGPL v3](https://www.gnu.org/licenses/lgpl-3.0) license.

package/dist/owl.cjs.js

@@ -75,7 +75,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // ../owl-runtime/dist/owl-runtime.es.js
-var version = "3.0.0-alpha.28";
+var version = "3.0.0-alpha.29";
 var OwlError = class extends Error {
   cause;
 };
@@ -629,7 +629,7 @@ function buildSignal(value, set) {
   };
   return readSignal;
 }
-function invalidateSignal(signal22) {
+function triggerSignal(signal22) {
   if (typeof signal22 !== "function" || signal22[atomSymbol]?.type !== "signal") {
     throw new OwlError(`Value is not a signal (${signal22})`);
   }
@@ -650,7 +650,7 @@ function signalSet(initialValue) {
 function signal(value) {
   return buildSignal(value, (atom) => atom.value);
 }
-signal.invalidate = invalidateSignal;
+signal.trigger = triggerSignal;
 signal.Array = signalArray;
 signal.Map = signalMap;
 signal.Object = signalObject;
@@ -1283,6 +1283,9 @@ function invokeErrorHandlers(node, error, finalize, markFibers) {
 }
 function forwardErrorToParent(boundary) {
   return (error, finalize) => {
+    if (boundary.app.destroyed) {
+      throw error;
+    }
     const { handled } = invokeErrorHandlers(boundary, error, finalize, false);
     if (!handled) {
       boundary.app._handleError(finalize());
@@ -1294,6 +1297,9 @@ function handleError(params) {
   let node = "node" in params ? params.node : params.fiber.node;
   const fiber = "fiber" in params ? params.fiber : node.fiber;
   const app = node.app;
+  if (app.destroyed) {
+    throw error;
+  }
   if (fiber) {
     let current = fiber;
     do {
@@ -1308,6 +1314,9 @@ function handleError(params) {
       app.destroy();
     } catch (e) {
     }
+    if (error instanceof OwlError) {
+      return error;
+    }
     return Object.assign(new OwlError(`[Owl] Unhandled error. Destroying the root component`), {
       cause: error
     });
@@ -1542,17 +1551,48 @@ function toKebabCase(prop2) {
   CSS_PROP_CACHE[prop2] = result;
   return result;
 }
+var IMPORTANT_RE = /\s*!\s*important\s*$/i;
+function setStyleProp(style, prop2, value) {
+  if (IMPORTANT_RE.test(value)) {
+    style.setProperty(prop2, value.replace(IMPORTANT_RE, ""), "important");
+  } else {
+    style.setProperty(prop2, value);
+  }
+}
 function toStyleObj(expr) {
   const result = {};
   switch (typeof expr) {
     case "string": {
-      const str = trim.call(expr);
-      if (!str) {
-        return {};
-      }
-      const parts = str.split(";");
-      for (let part of parts) {
-        part = trim.call(part);
+      const str = expr;
+      const len = str.length;
+      let i = 0;
+      while (i < len) {
+        const start = i;
+        let depth = 0;
+        let quote = 0;
+        while (i < len) {
+          const c = str.charCodeAt(i);
+          if (quote) {
+            if (c === 92) {
+              i += 2;
+              continue;
+            }
+            if (c === quote) {
+              quote = 0;
+            }
+          } else if (c === 34 || c === 39) {
+            quote = c;
+          } else if (c === 40) {
+            depth++;
+          } else if (c === 41) {
+            if (depth > 0) depth--;
+          } else if (c === 59 && depth === 0) {
+            break;
+          }
+          i++;
+        }
+        const part = trim.call(str.slice(start, i));
+        i++;
         if (!part) {
           continue;
         }
@@ -1604,7 +1644,7 @@ function setStyle(val) {
   val = val === "" ? {} : toStyleObj(val);
   const style = this.style;
   for (let prop2 in val) {
-    style.setProperty(prop2, val[prop2]);
+    setStyleProp(style, prop2, val[prop2]);
   }
 }
 function updateStyle(val, oldVal) {
@@ -1618,7 +1658,7 @@ function updateStyle(val, oldVal) {
   }
   for (let prop2 in val) {
     if (val[prop2] !== oldVal[prop2]) {
-      style.setProperty(prop2, val[prop2]);
+      setStyleProp(style, prop2, val[prop2]);
     }
   }
   if (!style.cssText) {
@@ -3859,6 +3899,7 @@ var App = class _App extends TemplateSet {
   scheduler = new Scheduler();
   roots = /* @__PURE__ */ new Set();
   pluginManager;
+  destroyed = false;
   constructor(config3 = {}) {
     super(config3);
     this.name = config3.name || "";
@@ -3969,6 +4010,7 @@ var App = class _App extends TemplateSet {
     this.pluginManager.destroy();
     this.scheduler.processTasks();
     apps.delete(this);
+    this.destroyed = true;
   }
   _handleError(error) {
     throw error;
@@ -4323,8 +4365,8 @@ var blockDom = {
 };
 var __info__ = {
   version: App.version,
-  date: "2026-04-22T14:24:13.298Z",
-  hash: "914a106c",
+  date: "2026-04-23T11:09:22.692Z",
+  hash: "2220e1dd",
   url: "https://github.com/odoo/owl"
 };
 
@@ -4687,7 +4729,7 @@ function buildSignal2(value, set) {
   };
   return readSignal;
 }
-function invalidateSignal2(signal22) {
+function triggerSignal2(signal22) {
   if (typeof signal22 !== "function" || signal22[atomSymbol2]?.type !== "signal") {
     throw new OwlError2(`Value is not a signal (${signal22})`);
   }
@@ -4708,7 +4750,7 @@ function signalSet2(initialValue) {
 function signal2(value) {
   return buildSignal2(value, (atom) => atom.value);
 }
-signal2.invalidate = invalidateSignal2;
+signal2.trigger = triggerSignal2;
 signal2.Array = signalArray2;
 signal2.Map = signalMap2;
 signal2.Object = signalObject2;

package/dist/owl.es.js

@@ -1,5 +1,5 @@
 // ../owl-runtime/dist/owl-runtime.es.js
-var version = "3.0.0-alpha.28";
+var version = "3.0.0-alpha.29";
 var OwlError = class extends Error {
   cause;
 };
@@ -553,7 +553,7 @@ function buildSignal(value, set) {
   };
   return readSignal;
 }
-function invalidateSignal(signal22) {
+function triggerSignal(signal22) {
   if (typeof signal22 !== "function" || signal22[atomSymbol]?.type !== "signal") {
     throw new OwlError(`Value is not a signal (${signal22})`);
   }
@@ -574,7 +574,7 @@ function signalSet(initialValue) {
 function signal(value) {
   return buildSignal(value, (atom) => atom.value);
 }
-signal.invalidate = invalidateSignal;
+signal.trigger = triggerSignal;
 signal.Array = signalArray;
 signal.Map = signalMap;
 signal.Object = signalObject;
@@ -1207,6 +1207,9 @@ function invokeErrorHandlers(node, error, finalize, markFibers) {
 }
 function forwardErrorToParent(boundary) {
   return (error, finalize) => {
+    if (boundary.app.destroyed) {
+      throw error;
+    }
     const { handled } = invokeErrorHandlers(boundary, error, finalize, false);
     if (!handled) {
       boundary.app._handleError(finalize());
@@ -1218,6 +1221,9 @@ function handleError(params) {
   let node = "node" in params ? params.node : params.fiber.node;
   const fiber = "fiber" in params ? params.fiber : node.fiber;
   const app = node.app;
+  if (app.destroyed) {
+    throw error;
+  }
   if (fiber) {
     let current = fiber;
     do {
@@ -1232,6 +1238,9 @@ function handleError(params) {
       app.destroy();
     } catch (e) {
     }
+    if (error instanceof OwlError) {
+      return error;
+    }
     return Object.assign(new OwlError(`[Owl] Unhandled error. Destroying the root component`), {
       cause: error
     });
@@ -1466,17 +1475,48 @@ function toKebabCase(prop2) {
   CSS_PROP_CACHE[prop2] = result;
   return result;
 }
+var IMPORTANT_RE = /\s*!\s*important\s*$/i;
+function setStyleProp(style, prop2, value) {
+  if (IMPORTANT_RE.test(value)) {
+    style.setProperty(prop2, value.replace(IMPORTANT_RE, ""), "important");
+  } else {
+    style.setProperty(prop2, value);
+  }
+}
 function toStyleObj(expr) {
   const result = {};
   switch (typeof expr) {
     case "string": {
-      const str = trim.call(expr);
-      if (!str) {
-        return {};
-      }
-      const parts = str.split(";");
-      for (let part of parts) {
-        part = trim.call(part);
+      const str = expr;
+      const len = str.length;
+      let i = 0;
+      while (i < len) {
+        const start = i;
+        let depth = 0;
+        let quote = 0;
+        while (i < len) {
+          const c = str.charCodeAt(i);
+          if (quote) {
+            if (c === 92) {
+              i += 2;
+              continue;
+            }
+            if (c === quote) {
+              quote = 0;
+            }
+          } else if (c === 34 || c === 39) {
+            quote = c;
+          } else if (c === 40) {
+            depth++;
+          } else if (c === 41) {
+            if (depth > 0) depth--;
+          } else if (c === 59 && depth === 0) {
+            break;
+          }
+          i++;
+        }
+        const part = trim.call(str.slice(start, i));
+        i++;
         if (!part) {
           continue;
         }
@@ -1528,7 +1568,7 @@ function setStyle(val) {
   val = val === "" ? {} : toStyleObj(val);
   const style = this.style;
   for (let prop2 in val) {
-    style.setProperty(prop2, val[prop2]);
+    setStyleProp(style, prop2, val[prop2]);
   }
 }
 function updateStyle(val, oldVal) {
@@ -1542,7 +1582,7 @@ function updateStyle(val, oldVal) {
   }
   for (let prop2 in val) {
     if (val[prop2] !== oldVal[prop2]) {
-      style.setProperty(prop2, val[prop2]);
+      setStyleProp(style, prop2, val[prop2]);
     }
   }
   if (!style.cssText) {
@@ -3783,6 +3823,7 @@ var App = class _App extends TemplateSet {
   scheduler = new Scheduler();
   roots = /* @__PURE__ */ new Set();
   pluginManager;
+  destroyed = false;
   constructor(config3 = {}) {
     super(config3);
     this.name = config3.name || "";
@@ -3893,6 +3934,7 @@ var App = class _App extends TemplateSet {
     this.pluginManager.destroy();
     this.scheduler.processTasks();
     apps.delete(this);
+    this.destroyed = true;
   }
   _handleError(error) {
     throw error;
@@ -4247,8 +4289,8 @@ var blockDom = {
 };
 var __info__ = {
   version: App.version,
-  date: "2026-04-22T14:24:13.298Z",
-  hash: "914a106c",
+  date: "2026-04-23T11:09:22.692Z",
+  hash: "2220e1dd",
   url: "https://github.com/odoo/owl"
 };
 
@@ -4611,7 +4653,7 @@ function buildSignal2(value, set) {
   };
   return readSignal;
 }
-function invalidateSignal2(signal22) {
+function triggerSignal2(signal22) {
   if (typeof signal22 !== "function" || signal22[atomSymbol2]?.type !== "signal") {
     throw new OwlError2(`Value is not a signal (${signal22})`);
   }
@@ -4632,7 +4674,7 @@ function signalSet2(initialValue) {
 function signal2(value) {
   return buildSignal2(value, (atom) => atom.value);
 }
-signal2.invalidate = invalidateSignal2;
+signal2.trigger = triggerSignal2;
 signal2.Array = signalArray2;
 signal2.Map = signalMap2;
 signal2.Object = signalObject2;

package/dist/owl.iife.js

@@ -75,7 +75,7 @@ var owl = (() => {
   });
 
   // ../owl-runtime/dist/owl-runtime.es.js
-  var version = "3.0.0-alpha.28";
+  var version = "3.0.0-alpha.29";
   var OwlError = class extends Error {
     cause;
   };
@@ -629,7 +629,7 @@ var owl = (() => {
     };
     return readSignal;
   }
-  function invalidateSignal(signal22) {
+  function triggerSignal(signal22) {
     if (typeof signal22 !== "function" || signal22[atomSymbol]?.type !== "signal") {
       throw new OwlError(`Value is not a signal (${signal22})`);
     }
@@ -650,7 +650,7 @@ var owl = (() => {
   function signal(value) {
     return buildSignal(value, (atom) => atom.value);
   }
-  signal.invalidate = invalidateSignal;
+  signal.trigger = triggerSignal;
   signal.Array = signalArray;
   signal.Map = signalMap;
   signal.Object = signalObject;
@@ -1283,6 +1283,9 @@ ${issueStrings}`);
   }
   function forwardErrorToParent(boundary) {
     return (error, finalize) => {
+      if (boundary.app.destroyed) {
+        throw error;
+      }
       const { handled } = invokeErrorHandlers(boundary, error, finalize, false);
       if (!handled) {
         boundary.app._handleError(finalize());
@@ -1294,6 +1297,9 @@ ${issueStrings}`);
     let node = "node" in params ? params.node : params.fiber.node;
     const fiber = "fiber" in params ? params.fiber : node.fiber;
     const app = node.app;
+    if (app.destroyed) {
+      throw error;
+    }
     if (fiber) {
       let current = fiber;
       do {
@@ -1308,6 +1314,9 @@ ${issueStrings}`);
         app.destroy();
       } catch (e) {
       }
+      if (error instanceof OwlError) {
+        return error;
+      }
       return Object.assign(new OwlError(`[Owl] Unhandled error. Destroying the root component`), {
         cause: error
       });
@@ -1542,17 +1551,48 @@ ${issueStrings}`);
     CSS_PROP_CACHE[prop2] = result;
     return result;
   }
+  var IMPORTANT_RE = /\s*!\s*important\s*$/i;
+  function setStyleProp(style, prop2, value) {
+    if (IMPORTANT_RE.test(value)) {
+      style.setProperty(prop2, value.replace(IMPORTANT_RE, ""), "important");
+    } else {
+      style.setProperty(prop2, value);
+    }
+  }
   function toStyleObj(expr) {
     const result = {};
     switch (typeof expr) {
       case "string": {
-        const str = trim.call(expr);
-        if (!str) {
-          return {};
-        }
-        const parts = str.split(";");
-        for (let part of parts) {
-          part = trim.call(part);
+        const str = expr;
+        const len = str.length;
+        let i = 0;
+        while (i < len) {
+          const start = i;
+          let depth = 0;
+          let quote = 0;
+          while (i < len) {
+            const c = str.charCodeAt(i);
+            if (quote) {
+              if (c === 92) {
+                i += 2;
+                continue;
+              }
+              if (c === quote) {
+                quote = 0;
+              }
+            } else if (c === 34 || c === 39) {
+              quote = c;
+            } else if (c === 40) {
+              depth++;
+            } else if (c === 41) {
+              if (depth > 0) depth--;
+            } else if (c === 59 && depth === 0) {
+              break;
+            }
+            i++;
+          }
+          const part = trim.call(str.slice(start, i));
+          i++;
           if (!part) {
             continue;
           }
@@ -1604,7 +1644,7 @@ ${issueStrings}`);
     val = val === "" ? {} : toStyleObj(val);
     const style = this.style;
     for (let prop2 in val) {
-      style.setProperty(prop2, val[prop2]);
+      setStyleProp(style, prop2, val[prop2]);
     }
   }
   function updateStyle(val, oldVal) {
@@ -1618,7 +1658,7 @@ ${issueStrings}`);
     }
     for (let prop2 in val) {
       if (val[prop2] !== oldVal[prop2]) {
-        style.setProperty(prop2, val[prop2]);
+        setStyleProp(style, prop2, val[prop2]);
       }
     }
     if (!style.cssText) {
@@ -3859,6 +3899,7 @@ ${issueStrings}`);
     scheduler = new Scheduler();
     roots = /* @__PURE__ */ new Set();
     pluginManager;
+    destroyed = false;
     constructor(config3 = {}) {
       super(config3);
       this.name = config3.name || "";
@@ -3969,6 +4010,7 @@ ${issueStrings}`);
       this.pluginManager.destroy();
       this.scheduler.processTasks();
       apps.delete(this);
+      this.destroyed = true;
     }
     _handleError(error) {
       throw error;
@@ -4323,8 +4365,8 @@ ${issueStrings}`);
   };
   var __info__ = {
     version: App.version,
-    date: "2026-04-22T14:24:13.298Z",
-    hash: "914a106c",
+    date: "2026-04-23T11:09:22.692Z",
+    hash: "2220e1dd",
     url: "https://github.com/odoo/owl"
   };
 
@@ -4687,7 +4729,7 @@ ${issueStrings}`);
     };
     return readSignal;
   }
-  function invalidateSignal2(signal22) {
+  function triggerSignal2(signal22) {
     if (typeof signal22 !== "function" || signal22[atomSymbol2]?.type !== "signal") {
       throw new OwlError2(`Value is not a signal (${signal22})`);
     }
@@ -4708,7 +4750,7 @@ ${issueStrings}`);
   function signal2(value) {
     return buildSignal2(value, (atom) => atom.value);
   }
-  signal2.invalidate = invalidateSignal2;
+  signal2.trigger = triggerSignal2;
   signal2.Array = signalArray2;
   signal2.Map = signalMap2;
   signal2.Object = signalObject2;