diff --git a/docs/playground/playground.js b/docs/playground/playground.js
index 26692e7e0..cb6bb14f9 100644
--- a/docs/playground/playground.js
+++ b/docs/playground/playground.js
@@ -81,7 +81,7 @@ const SAMPLES = [
     code: ["js", "xml", "css"],
   },
   {
-    description: "Form Input Bindings",
+    description: "t-model",
     folder: "form",
     code: ["js", "xml"],
   },
@@ -169,7 +169,7 @@ class TabbedEditor extends Component {
       this.editor = this.editor || ace.edit(this.editorNode());
 
       this.editor.setValue(this.props[this.state.currentTab], -1);
-      this.editor.setFontSize("12px");
+      this.editor.setFontSize("14px");
       this.editor.setTheme("ace/theme/monokai");
       this.editor.setSession(this.sessions[this.state.currentTab]);
       const tabSize = this.state.currentTab === "xml" ? 2 : 4;
diff --git a/docs/playground/samples/components/components.css b/docs/playground/samples/components/components.css
index 70eee24db..37a22e0f9 100644
--- a/docs/playground/samples/components/components.css
+++ b/docs/playground/samples/components/components.css
@@ -1,4 +1,4 @@
-.greeter {
+.counter {
     font-size: 20px;
     width: 300px;
     height: 100px;
@@ -7,4 +7,4 @@
     line-height: 100px;
     background-color: #eeeeee;
     user-select: none;
-}
+}
\ No newline at end of file
diff --git a/docs/playground/samples/components/components.js b/docs/playground/samples/components/components.js
index 0a1f34785..581ca3bb8 100644
--- a/docs/playground/samples/components/components.js
+++ b/docs/playground/samples/components/components.js
@@ -1,26 +1,19 @@
 // In this example, we show how components can be defined and created.
-import { Component, useState, mount } from "@odoo/owl";
+import { Component, signal, mount } from "@odoo/owl";
 
-class Greeter extends Component {
-    static template = "Greeter";
+class Counter extends Component {
+    static template = "Counter";
     
-    setup() {
-        this.state = useState({ word: 'Hello' });
-    }
-
-    toggle() {
-        this.state.word = this.state.word === 'Hi' ? 'Hello' : 'Hi';
+    count = signal(0);
+    
+    increment() {
+        this.count.update(val => val + 1);
     }
 }
 
-// Main root component
 class Root extends Component {
-    static components = { Greeter };
+    static components = { Counter };
     static template = "Root"
-
-    setup() {
-        this.state = useState({ name: 'World'});
-    }
 }
 
 mount(Root, document.body, { templates: TEMPLATES, dev: true });
diff --git a/docs/playground/samples/components/components.xml b/docs/playground/samples/components/components.xml
index 1caaf12a8..722cfcddc 100644
--- a/docs/playground/samples/components/components.xml
+++ b/docs/playground/samples/components/components.xml
@@ -1,9 +1,10 @@
 <templates>
-  <div t-name="Greeter" class="greeter" t-on-click="toggle">
-    <t t-esc="state.word"/>, <t t-esc="props.name"/>
+  <div t-name="Counter" class="counter" t-on-click="this.increment">
+    Count: <t t-out="this.count()"/>
   </div>
 
   <t t-name="Root">
-    <Greeter name="state.name"/>
+    <Counter/>
+    <Counter/>
   </t>
 </templates>
diff --git a/docs/playground/samples/form/form.js b/docs/playground/samples/form/form.js
index 345c118ba..66ca04747 100644
--- a/docs/playground/samples/form/form.js
+++ b/docs/playground/samples/form/form.js
@@ -2,20 +2,16 @@
 // data between html inputs (and select/textareas) and the state of a component.
 // Note that there are two controls with t-model="color": they are totally
 // synchronized.
-import { Component, useState, mount } from "@odoo/owl";
+import { Component, signal, mount } from "@odoo/owl";
 
 class Form extends Component {
   static template = "Form";
 
-  setup() {
-    this.state = useState({
-      text: "",
-      othertext: "",
-      number: 11,
-      color: "",
-      bool: false
-    });
-  }
+  text = signal("");
+  othertext = signal("");
+  number = signal(11);
+  color = signal("");
+  bool = signal(false);
 }
 
 // Application setup
diff --git a/docs/playground/samples/form/form.xml b/docs/playground/samples/form/form.xml
index 1693eb9e9..55e99600a 100644
--- a/docs/playground/samples/form/form.xml
+++ b/docs/playground/samples/form/form.xml
@@ -2,20 +2,20 @@
   <div t-name="Form">
     <h1>Form</h1>
     <div>
-      Text (immediate): <input t-model="state.text"/>
+      Text (immediate): <input t-model="this.text"/>
     </div>
     <div>
-      Other text (lazy): <input t-model.lazy="state.othertext"/>
+      Other text (lazy): <input t-model.lazy="this.othertext"/>
     </div>
     <div>
-      Number: <input  t-model.number="state.number"/>
+      Number: <input  t-model.number="this.number"/>
     </div>
     <div>
-      Boolean: <input  type="checkbox" t-model="state.bool"/>
+      Boolean: <input  type="checkbox" t-model="this.bool"/>
     </div>
     <div>
       Color, with a select:
-      <select  t-model="state.color">
+      <select  t-model="this.color">
         <option value="">Select a color</option>
         <option value="red">Red</option>
         <option value="blue">Blue</option>
@@ -23,15 +23,15 @@
     </div>
     <div>
       Color, with radio buttons:
-        <span><input type="radio" name="color" id="red" value="red" t-model="state.color"/><label for="red">Red</label></span>
-        <span><input type="radio" name="color" id="blue" value="blue" t-model="state.color"/><label for="blue">Blue</label></span>
+        <span><input type="radio" name="color" id="red" value="red" t-model="this.color"/><label for="red">Red</label></span>
+        <span><input type="radio" name="color" id="blue" value="blue" t-model="this.color"/><label for="blue">Blue</label></span>
     </div>
     <hr/>
     <h1>State</h1>
-    <div>Text: <t t-esc="state.text"/></div>
-    <div>Other Text: <t t-esc="state.othertext"/></div>
-    <div>Number: <t t-esc="state.number"/></div>
-    <div>Boolean: <t t-if="state.bool">True</t><t t-else="">False</t></div>
-    <div>Color: <t t-esc="state.color"/></div>
+    <div>Text: <t t-out="this.text()"/></div>
+    <div>Other Text: <t t-out="this.othertext()"/></div>
+    <div>Number: <t t-out="this.number()"/></div>
+    <div>Boolean: <t t-if="this.bool()">True</t><t t-else="">False</t></div>
+    <div>Color: <t t-out="this.color()"/></div>
   </div>
 </templates>
diff --git a/docs/playground/samples/todo_app/todo_app.js b/docs/playground/samples/todo_app/todo_app.js
index b63cbbc5f..8bed42d40 100644
--- a/docs/playground/samples/todo_app/todo_app.js
+++ b/docs/playground/samples/todo_app/todo_app.js
@@ -1,121 +1,161 @@
 // This example is an implementation of the TodoList application, from the
 // www.todomvc.com project.  This is a non trivial application with some
 // interesting user interactions. It uses the local storage for persistence.
-//
-// In this implementation, we use the owl reactivity mechanism.
-import { Component, useState, mount, useRef, reactive, useEnv, useEffect } from "@odoo/owl";
+import {
+    Component,
+    derived,
+    effect,
+    mount,
+    plugin,
+    Plugin,
+    PluginManager,
+    props,
+    signal,
+    useEffect,
+    onWillDestroy,
+} from "@odoo/owl";
 
-//------------------------------------------------------------------------------
-// Constants, helpers
-//------------------------------------------------------------------------------
 const ENTER_KEY = 13;
 const ESC_KEY = 27;
 
-function useAutofocus(name) {
-    let ref = useRef(name);
-    useEffect(el => el && el.focus(), () => [ref.el]);
-}
+class TodoItem {
+    #list;
 
-function useStore() {
-    const env = useEnv();
-    return useState(env.store);
+    constructor(list, { id, text, isCompleted }) {
+        this.#list = list;
+        this.id = id;
+        this.text = signal(text);
+        this.isCompleted = signal(isCompleted);
+    }
+
+    delete() {
+        this.#list.delete(this);
+    }
+
+    toggle() {
+        this.isCompleted.update((value) => !value);
+    }
 }
 
-//------------------------------------------------------------------------------
-// Task store
-//------------------------------------------------------------------------------
-class TaskList {
-    constructor(tasks) {
-        this.tasks = tasks || [];
-        const taskIds = this.tasks.map((t) => t.id);
-        this.nextId = taskIds.length ? Math.max(...taskIds) + 1 : 1;
+class LocalStoragePlugin extends Plugin {
+    static id = "local_storage";
+
+    cleanups = [];
+
+    setup() {
+        onWillDestroy(() => {
+            for (let cleanup of cleanups) {
+                cleanup();
+            }
+        });
+    }
+
+    open({ key, encode, decode }) {
+        const str = localStorage.getItem(key);
+        const result = signal(decode(str));
+        this.cleanups.push(
+            effect(() => {
+                const str = encode(result());
+                localStorage.setItem(key, str);
+            })
+        );
+        return result;
     }
+}
 
-    addTask(text) {
+class TodoListPlugin extends Plugin {
+    static id = "todo_list";
+    todos = signal([]);
+
+    localStorage = plugin(LocalStoragePlugin);
+    todos = this.localStorage.open({
+        key: "todoapp",
+        encode: (data) => {
+            const json = data.map((todo) => ({
+                id: todo.id,
+                text: todo.text(),
+                isCompleted: todo.isCompleted(),
+            }));
+            return JSON.stringify(json);
+        },
+        decode: (str) => {
+            const data = JSON.parse(str || "[]");
+            return data.map((todo) => new TodoItem(this, todo));
+        },
+    });
+
+    generateId() {
+        return Math.random().toString(36).substring(2, 10);
+    }
+
+    isEmpty = derived(() => !this.todos().length);
+
+    add(text) {
         text = text.trim();
         if (text) {
-            const task = {
-                id: this.nextId++,
-                text: text,
-                isCompleted: false,
-            };
-            this.tasks.push(task);
+            const data = { id: this.generateId(), text, isComplete: false };
+            const todo = new TodoItem(this, data);
+            this.todos().push(todo);
+            this.todos.update();
         }
     }
 
-    toggleTask(id) {
-        const task = this.tasks.find(t => t.id === id);
-        task.isCompleted = !task.isCompleted;
+    delete(todo) {
+        const result = this.todos().filter((t) => t !== todo);
+        this.todos.set(result);
     }
 
     toggleAll(value) {
-        for (let task of this.tasks) {
-            task.isCompleted = value;
+        for (let todo of this.todos()) {
+            todo.isCompleted.set(value);
         }
     }
-    
+
     clearCompleted() {
-        const tasks = this.tasks.filter(t => t.isCompleted);
-        for (let task of tasks) {
-            this.deleteTask(task.id);
-        }
-    }
-    
-    deleteTask(id) {
-        const index = this.tasks.findIndex((t) => t.id === id);
-        this.tasks.splice(index, 1);
-    }
-    
-    updateTask(id, text) {
-        const value = text.trim();
-        if (!value) {
-            this.deleteTask(id);
-        } else {
-            const task = this.tasks.find(t => t.id === id);
-            task.text = value;
+        const todos = this.todos().filter((t) => t.isCompleted());
+        for (let todo of todos) {
+            this.delete(todo);
         }
     }
 }
 
-function createTaskStore() {
-    const saveTasks = () => localStorage.setItem("todoapp", JSON.stringify(taskStore.tasks));
-    const initialTasks = JSON.parse(localStorage.getItem("todoapp") || "[]");
-    const taskStore = reactive(new TaskList(initialTasks), saveTasks);
-    saveTasks();
-    return taskStore;
-}
-  
 //------------------------------------------------------------------------------
 // Todo
 //------------------------------------------------------------------------------
 class Todo extends Component {
     static template = "Todo";
-    
+
+    props = props({ todo: TodoItem });
+    todo = this.props.todo;
+    isEditing = signal(false);
+    input = signal(null);
+    text = signal(this.todo.text());
+
     setup() {
-        useAutofocus("input");
-        this.store = useStore();
-        this.state = useState({
-            isEditing: false
-        });
+        useEffect(
+            (el) => el && el.focus(),
+            () => [this.input()]
+        );
+    }
+
+    stopEditing() {
+        this.isEditing.set(false);
     }
 
     handleKeyup(ev) {
         if (ev.keyCode === ENTER_KEY) {
-            this.updateText(ev.target.value);
+            this.todo.text.set(this.text());
+            this.stopEditing();
         }
         if (ev.keyCode === ESC_KEY) {
-            ev.target.value = this.props.text;
-            this.state.isEditing = false;
+            this.text.set(this.todo.text());
+            this.stopEditing();
         }
     }
 
     handleBlur(ev) {
-        this.updateText(ev.target.value);
-    }
-
-    updateText(text) {
-        this.store.updateTask(this.props.id, text);
-        this.state.isEditing = false;
+        this.todo.text.set(this.text());
+        this.stopEditing();
     }
 }
 
@@ -125,54 +165,48 @@ class Todo extends Component {
 class TodoList extends Component {
     static template = "TodoList";
     static components = { Todo };
-    
-    setup() {
-        this.store = useStore();
-        this.state = useState({ filter: "all" });
-    }
 
-    get displayedTasks() {
-      const tasks = this.store.tasks;
-      switch (this.state.filter) {
-        case "active":
-          return tasks.filter((t) => !t.isCompleted);
-        case "completed":
-          return tasks.filter((t) => t.isCompleted);
-        case "all":
-          return tasks;
-      }
-    }
-    
-    get allChecked() {
-        return this.store.tasks.every(todo => todo.isCompleted);
-    }
+    todoList = plugin(TodoListPlugin);
+    filter = signal("all");
+
+    visibleTodos = derived(() => {
+        const todos = this.todoList.todos();
+        switch (this.filter()) {
+            case "active":
+                return todos.filter((t) => !t.isCompleted());
+            case "completed":
+                return todos.filter((t) => t.isCompleted());
+            case "all":
+                return todos;
+        }
+    });
 
-    get remaining() {
-        return this.store.tasks.filter(todo => !todo.isCompleted).length;
-    }
+    remaining = derived(() => {
+        const todos = this.todoList.todos();
+        return todos.filter((todo) => !todo.isCompleted()).length;
+    });
 
-    get remainingText() {
-        const items = this.remaining < 2 ? "item" : "items";
-        return ` ${items} left`;
-    }
+    remainingText = derived(() => {
+        return ` ${this.remaining() < 2 ? "item" : "items"} left`;
+    });
+
+    allChecked = derived(() => this.remaining() === 0);
 
     addTodo(ev) {
         if (ev.keyCode === ENTER_KEY) {
             const text = ev.target.value;
             if (text.trim()) {
-                this.store.addTask(text);
+                this.todoList.add(text);
             }
             ev.target.value = "";
         }
     }
-
-    setFilter(filter) {
-        this.state.filter = filter;
-    }
 }
 
 //------------------------------------------------------------------------------
 // App Initialization
 //------------------------------------------------------------------------------
-const env = { store: createTaskStore() };
-mount(TodoList, document.body, { env, templates: TEMPLATES, dev: true });
+const pluginManager = new PluginManager();
+pluginManager.startPlugins([TodoListPlugin]);
+
+mount(TodoList, document.body, { templates: TEMPLATES, pluginManager, dev: true });
diff --git a/docs/playground/samples/todo_app/todo_app.xml b/docs/playground/samples/todo_app/todo_app.xml
index 1ed4d9f72..98655ef13 100644
--- a/docs/playground/samples/todo_app/todo_app.xml
+++ b/docs/playground/samples/todo_app/todo_app.xml
@@ -2,49 +2,49 @@
   <section t-name="TodoList" class="todoapp">
     <header class="header">
       <h1>todos</h1>
-      <input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
+      <input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="this.addTodo"/>
     </header>
-    <section class="main" t-if="store.tasks.length">
-      <input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="() => store.toggleAll(!allChecked)"/>
+    <section class="main" t-if="!this.todoList.isEmpty()">
+      <input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="this.allChecked()" t-on-click="() => this.todoList.toggleAll(!this.allChecked())"/>
       <label for="toggle-all"></label>
       <ul class="todo-list">
-        <t t-foreach="displayedTasks" t-as="todo" t-key="todo.id">
-          <Todo id="todo.id" isCompleted="todo.isCompleted" text="todo.text"/>
+        <t t-foreach="this.visibleTodos()" t-as="todo" t-key="todo.id">
+          <Todo todo="todo"/>
         </t>
       </ul>
     </section>
-    <footer class="footer" t-if="store.tasks.length">
+    <footer class="footer" t-if="!this.todoList.isEmpty()">
       <span class="todo-count">
         <strong>
-            <t t-esc="remaining"/>
+            <t t-out="this.remaining()"/>
         </strong>
-        <t t-esc="remainingText"/>
+        <t t-out="this.remainingText()"/>
       </span>
       <ul class="filters">
         <li>
-          <a t-on-click="() => this.setFilter('all')" t-att-class="{selected: state.filter === 'all'}">All</a>
+          <a t-on-click="() => this.filter.set('all')" t-att-class="{selected: this.filter() === 'all'}">All</a>
         </li>
         <li>
-          <a t-on-click="() => this.setFilter('active')" t-att-class="{selected: state.filter === 'active'}">Active</a>
+          <a t-on-click="() => this.filter.set('active')" t-att-class="{selected: this.filter() === 'active'}">Active</a>
         </li>
         <li>
-          <a t-on-click="() => this.setFilter('completed')" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
+          <a t-on-click="() => this.filter.set('completed')" t-att-class="{selected: this.filter() === 'completed'}">Completed</a>
         </li>
       </ul>
-      <button class="clear-completed" t-if="store.tasks.length gt remaining" t-on-click="() => store.clearCompleted()">
+      <button class="clear-completed" t-if="this.todoList.todos().length gt this.remaining()" t-on-click="() => this.todoList.clearCompleted()">
         Clear completed
       </button>
     </footer>
   </section>
 
-  <li t-name="Todo" class="todo" t-att-class="{completed: props.isCompleted, editing: state.isEditing}">
+  <li t-name="Todo" class="todo" t-att-class="{completed: this.todo.isCompleted(), editing: this.isEditing()}">
     <div class="view">
-      <input class="toggle" type="checkbox" t-on-change="() => store.toggleTask(props.id)" t-att-checked="props.completed"/>
-      <label t-on-dblclick="() => state.isEditing = true">
-        <t t-esc="props.text"/>
+      <input class="toggle" type="checkbox" t-on-change="() => this.todo.toggle()" t-att-checked="this.props.todo.isCompleted()"/>
+      <label t-on-dblclick="() => this.isEditing.set(true)">
+        <t t-out="this.todo.text()"/>
       </label>
-      <button class="destroy" t-on-click="() => store.deleteTask(props.id)"></button>
+      <button class="destroy" t-on-click="() => this.todo.delete()"></button>
     </div>
-    <input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.text" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
+    <input class="edit" t-ref="this.input" t-if="this.isEditing()" t-model="this.text" t-on-keyup="this.handleKeyup" t-on-blur="this.handleBlur"/>
   </li>
 </templates>
diff --git a/docs/playground/templates.xml b/docs/playground/templates.xml
index 174ea0f0d..bd339dc66 100644
--- a/docs/playground/templates.xml
+++ b/docs/playground/templates.xml
@@ -1,49 +1,49 @@
 <templates>
-  <div t-name="TabbedEditor" class="tabbed-editor" t-att-style="props.style">
-    <div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
+  <div t-name="TabbedEditor" class="tabbed-editor" t-att-style="this.props.style">
+    <div class="tabBar" t-att-class="{resizeable: this.props.resizeable}" t-on-mousedown="this.onMouseDown">
         <t t-foreach="['js', 'xml', 'css']" t-as="tab" t-key="tab">
-            <a t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="() => setTab(tab)">
+            <a t-if="this.props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: this.state.currentTab===tab}" t-on-click="() => this.setTab(tab)">
                 <t t-out="tab"/>
             </a>
         </t>
     </div>
-    <div class="code-editor" t-ref="editorNode"></div>
+    <div class="code-editor" t-ref="this.editorNode"></div>
   </div>
 
   <div t-name="Playground" class="playground">
-      <div class="left-bar" t-att-class="{split: state.splitLayout}"
-           t-att-style="leftPaneStyle">
+      <div class="left-bar" t-att-class="{split: this.state.splitLayout}"
+           t-att-style="this.leftPaneStyle">
         <div class="menubar">
-          <a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
-          <select t-on-change="onSampleChange">
-            <option t-foreach="samples" t-as="sample" t-key="sample_index">
+          <a class="btn run-code flash" t-on-click="this.runCode" title="Execute this Code">▶ Run</a>
+          <select t-on-change="this.onSampleChange">
+            <option t-foreach="this.samples" t-as="sample" t-key="sample_index">
               <t t-out="sample.description"/>
             </option>
           </select>
-          <a class="btn flash" t-on-click="exportStandaloneApp" title="Download zip that bundles this app with a tiny python web server"><i class="fas fa-download"></i></a>
-          <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
-          <a class="btn flash share-code" t-on-click="shareCode" title="Copy a link to this playground"><span>Share</span><span class="copied-notification" t-if="state.copied">Copied link to clipboard!</span></a>
+          <a class="btn flash" t-on-click="this.exportStandaloneApp" title="Download zip that bundles this app with a tiny python web server"><i class="fas fa-download"></i></a>
+          <a class="layout-selector flash" t-on-click="this.toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="this.state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
+          <a class="btn flash share-code" t-on-click="this.shareCode" title="Copy a link to this playground"><span>Share</span><span class="copied-notification" t-if="this.state.copied">Copied link to clipboard!</span></a>
         </div>
         <TabbedEditor
-            js="state.js"
-            css="!state.splitLayout and state.css"
-            xml="!state.splitLayout and state.xml"
-            style="topEditorStyle"
-            updateCode="updateCode"/>
-        <t t-if="state.splitLayout">
+            js="this.state.js"
+            css="!this.state.splitLayout and this.state.css"
+            xml="!this.state.splitLayout and this.state.xml"
+            style="this.topEditorStyle"
+            updateCode="this.updateCode"/>
+        <t t-if="this.state.splitLayout">
           <div class="separator horizontal"/>
           <TabbedEditor
              js="false"
-             css="state.css"
-             xml="state.xml"
+             css="this.state.css"
+             xml="this.state.xml"
              resizeable="true"
-             updatePanelHeight.bind="updatePanelHeight"
-             updateCode="updateCode"/>
+             updatePanelHeight.bind="this.updatePanelHeight"
+             updateCode="this.updateCode"/>
         </t>
       </div>
-      <div class="separator vertical" t-on-mousedown="onMouseDown"/>
+      <div class="separator vertical" t-on-mousedown="this.onMouseDown"/>
       <div class="right-pane">
-        <div class="welcome" t-if="state.displayWelcome">
+        <div class="welcome" t-if="this.state.displayWelcome">
           <div>🦉 Odoo Web Library 🦉</div>
           <div>v<t t-out="version"/></div>
           <div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
@@ -53,7 +53,7 @@
             </p>
           </div>
         </div>
-        <div class="content" t-ref="content"/>
+        <div class="content" t-ref="this.content"/>
       </div>
   </div>
 </templates>
diff --git a/tests/components/basics.test.ts b/tests/components/basics.test.ts
index 3f15b536d..a407dad69 100644
--- a/tests/components/basics.test.ts
+++ b/tests/components/basics.test.ts
@@ -1081,9 +1081,7 @@ describe("t-out in components", () => {
     }
     await mount(Test, fixture);
 
-    expect(fixture.innerHTML).toBe(
-      "<div><b>one</b><b>two</b><b>tree</b></div>"
-    );
+    expect(fixture.innerHTML).toBe("<div><b>one</b><b>two</b><b>tree</b></div>");
   });
 
   test("can switch the contents of two t-out repeatedly", async () => {