[REF] web: Owl imports adaptation

In the next version of Owl, all exported terms are directly available
from the top level `owl` object. This commit aims to adapt existing
imports to this new system. This is done by importing any Owl property
used in files at the top, right after the `import` or `require`
statements.

closes odoo/odoo#82736

Related: odoo/enterprise#23609
Signed-off-by: Géry Debongnie <ged@odoo.com>

addons/account/static/src/js/account_resequence_field.js

@@ -1,11 +1,11 @@
 odoo.define('account.ShowResequenceRenderer', function (require) {
 "use strict";
 
-const { Component } = owl;
-const { useState } = owl.hooks;
 const AbstractFieldOwl = require('web.AbstractFieldOwl');
 const field_registry = require('web.field_registry_owl');
 
+const { Component } = owl;
+
 class ChangeLine extends Component { }
 ChangeLine.template = 'account.ResequenceChangeLine';
 ChangeLine.props = ["changeLine", 'ordering'];

addons/account/static/src/js/grouped_view_widget.js

@@ -1,11 +1,11 @@
 odoo.define('account.ShowGroupedList', function (require) {
 "use strict";
 
-const { Component } = owl;
-const { useState } = owl.hooks;
 const AbstractFieldOwl = require('web.AbstractFieldOwl');
 const field_registry = require('web.field_registry_owl');
 
+const { Component } = owl;
+
 class ListItem extends Component { }
 ListItem.template = 'account.GroupedItemTemplate';
 ListItem.props = ["item_vals", "options"];

addons/account/static/src/js/tax_totals.js

@@ -1,13 +1,13 @@
 /** @odoo-module alias=account.tax_group_owl **/
 "use strict";
 
-const { Component } = owl;
-const { useState, useRef } = owl.hooks;
 import session from 'web.session';
 import AbstractFieldOwl from 'web.AbstractFieldOwl';
 import fieldUtils from 'web.field_utils';
 import field_registry from 'web.field_registry_owl';
 
+const { Component, useRef, useState } = owl;
+
 /**
     A line of some TaxTotalsComponent, giving the values of a tax group.
 **/

addons/base_automation/static/tests/base_automation_error_dialog.js

@@ -18,6 +18,7 @@ import { DialogContainer } from "@web/core/dialog/dialog_container";
 import { getFixture } from "@web/../tests/helpers/utils";
 import { nextTick } from "@web/../tests/helpers/utils";
 
+const { mount } = owl;
 const serviceRegistry = registry.category("services");
 
 QUnit.module("base_automation", {}, function () {
@@ -79,7 +80,7 @@ QUnit.module("base_automation", {}, function () {
 
         const env = await makeTestEnv();
         const { Component: Container, props } = registry.category("main_components").get("DialogContainer");
-        const dialogContainer = await owl.mount(Container, { target: getFixture(), env, props });
+        const dialogContainer = await mount(Container, { target: getFixture(), env, props });
 
         const errorEvent = new PromiseRejectionEvent("error", { reason: {
             message: error,
@@ -114,7 +115,7 @@ QUnit.module("base_automation", {}, function () {
 
         const env = await makeTestEnv();
         const { Component: Container, props } = registry.category("main_components").get("DialogContainer");
-        const dialogContainer = await owl.mount(Container, { target: getFixture(), env, props });
+        const dialogContainer = await mount(Container, { target: getFixture(), env, props });
 
         const errorEvent = new PromiseRejectionEvent("error", { reason: {
             message: error,

addons/bus/static/src/js/services/assets_watchdog_service.js

@@ -4,6 +4,8 @@ import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
 import { session } from "@web/session";
 
+const { Component } = owl;
+
 export const assetsWatchdogService = {
     dependencies: ["notification"],
 
@@ -12,7 +14,7 @@ export const assetsWatchdogService = {
         let bundleNotifTimerID = null;
 
         env.bus.on("WEB_CLIENT_READY", null, async () => {
-            const legacyEnv = owl.Component.env;
+            const legacyEnv = Component.env;
             legacyEnv.services.bus_service.onNotification(this, onNotification);
             legacyEnv.services.bus_service.startPolling();
         });

addons/bus/static/tests/bus_tests.js

@@ -12,6 +12,7 @@ const { ConnectionLostError } = require("@web/core/network/rpc_service");
 const { patchWithCleanup, nextTick } = require("@web/../tests/helpers/utils");
 const { createWebClient } =  require('@web/../tests/webclient/helpers');
 
+const { Component } = owl;
 
 var LocalStorageServiceMock;
 
@@ -114,7 +115,7 @@ QUnit.module('Bus', {
             },
             legacyParams: { serviceRegistry: legacyRegistry },
         });
-        busService = owl.Component.env.services.bus_service;
+        busService = Component.env.services.bus_service;
         busService.startPolling();
         // Give longpolling bus a tick to try to restart polling
         await nextTick();

addons/calendar/static/src/js/services/calendar_notification_service.js

@@ -4,6 +4,8 @@ import { browser } from "@web/core/browser/browser";
 import { ConnectionLostError } from "@web/core/network/rpc_service";
 import { registry } from "@web/core/registry";
 
+const { Component } = owl;
+
 export const calendarNotificationService = {
     dependencies: ["action", "notification", "rpc"],
 
@@ -13,7 +15,7 @@ export const calendarNotificationService = {
         const displayedNotifications = new Set();
 
         env.bus.on("WEB_CLIENT_READY", null, async () => {
-            const legacyEnv = owl.Component.env;
+            const legacyEnv = Component.env;
             legacyEnv.services.bus_service.onNotification(this, (notifications) => {
                 for (const { payload, type } of notifications) {
                     if (type === "calendar.alarm") {

addons/hr/static/tests/standalone_m2o_avatar_employee_tests.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-    const { xml } = owl.tags;
 
     import AbstractRendererOwl from 'web.AbstractRendererOwl';
     import BasicView from "web.BasicView";
@@ -10,6 +9,8 @@
 
     import StandaloneM2OAvatarEmployee from '@hr/js/standalone_m2o_avatar_employee';
 
+    const { xml } = owl;
+
     function getHtmlRenderer(html) {
         return BasicRenderer.extend({
             start: function () {

addons/hr_holidays/static/src/dashboard/time_off_card.js

@@ -1,11 +1,13 @@
 /* @odoo-module */
 
-export class TimeOffCardPopover extends owl.Component {}
+const { Component } = owl;
+
+export class TimeOffCardPopover extends Component {}
 
 TimeOffCardPopover.template = 'hr_holidays.TimeOffCardPopover';
 TimeOffCardPopover.props = ['allocated', 'approved', 'planned', 'left'];
 
-export class TimeOffCard extends owl.Component {}
+export class TimeOffCard extends Component {}
 
 TimeOffCard.components = { TimeOffCardPopover };
 TimeOffCard.template = 'hr_holidays.TimeOffCard';

addons/hr_holidays/static/src/dashboard/time_off_dashboard.js

@@ -2,7 +2,9 @@
 
 import { TimeOffCard } from './time_off_card';
 
-export class TimeOffDashboard extends owl.Component {}
+const { Component } = owl;
+
+export class TimeOffDashboard extends Component {}
 
 TimeOffDashboard.components = { TimeOffCard };
 TimeOffDashboard.template = 'hr_holidays.TimeOffDashboard';

addons/im_livechat/__manifest__.py

@@ -80,6 +80,7 @@ Help your customers with this chat, and analyse their feedback.
             'web/static/lib/qweb/qweb2.js',
             # Odoo JS Framework
             'web/static/lib/owl/owl.js',
+            'web/static/src/owl_next_adapter.js',
             'web/static/src/legacy/js/promise_extension.js',
             'web/static/src/boot.js',
             'web/static/src/core/assets.js',

addons/mail/static/src/component_hooks/use_component_to_model/use_component_to_model.js

@@ -2,7 +2,7 @@
 
 import { clear } from '@mail/model/model_field_command';
 
-const { onWillUpdateProps, useComponent } = owl.hooks;
+const { onWillUpdateProps, useComponent } = owl;
 
 /**
  * This hook provides support for saving the reference of the component directly

addons/mail/static/src/component_hooks/use_drag_visible_dropzone/use_drag_visible_dropzone.js

@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-const { useState, onMounted, onWillUnmount } = owl.hooks;
+const { onMounted, onWillUnmount, useState } = owl;
 
 /**
  * This hook handle the visibility of the dropzone based on drag & drop events.

addons/mail/static/src/component_hooks/use_models/use_models.js

@@ -2,7 +2,7 @@
 
 import { Listener } from '@mail/model/model_listener';
 
-const { useComponent } = owl.hooks;
+const { useComponent } = owl;
 
 /**
  * This hook provides support for automatically re-rendering when used records

addons/mail/static/src/component_hooks/use_ref_to_model/use_ref_to_model.js

@@ -2,7 +2,7 @@
 
 import { clear } from '@mail/model/model_field_command';
 
-const { onWillUpdateProps, useComponent, useRef } = owl.hooks;
+const { onWillUpdateProps, useComponent, useRef } = owl;
 
 /**
  * This hook provides support for saving the result of useRef directly into the

addons/mail/static/src/component_hooks/use_rendered_values/use_rendered_values.js

@@ -2,8 +2,7 @@
 
 import { Listener } from '@mail/model/model_listener';
 
-const { Component } = owl;
-const { onMounted, onPatched } = owl.hooks;
+const { Component, onMounted, onPatched } = owl;
 
 /**
  * This hooks provides support for accessing the values returned by the given

addons/mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js

@@ -1,8 +1,7 @@
 /** @odoo-module **/
 'use strict';
 
-const { Component } = owl;
-const { onPatched } = owl.hooks;
+const { Component, onPatched } = owl;
 
 /**
  * Shallow compares props `a` and `b`.

addons/mail/static/src/component_hooks/use_update/use_update.js

@@ -2,7 +2,7 @@
 
 import { Listener } from '@mail/model/model_listener';
 
-const { onMounted, onPatched, useComponent } = owl.hooks;
+const { onMounted, onPatched, useComponent } = owl;
 
 /**
  * This hook provides support for executing code after update (render or patch).

addons/mail/static/src/component_hooks/use_update_to_model/use_update_to_model.js

@@ -2,7 +2,7 @@
 
 import { useUpdate } from '@mail/component_hooks/use_update/use_update';
 
-const { useComponent } = owl.hooks;
+const { useComponent } = owl;
 
 /**
  * This hook provides support for binding the onMounted/onPatched hooks to the

addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js

@@ -4,8 +4,7 @@ import { useComponentToModel } from '@mail/component_hooks/use_component_to_mode
 import { useRefToModel } from '@mail/component_hooks/use_ref_to_model/use_ref_to_model';
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { onMounted, useRef } = owl.hooks;
+const { Component, onMounted, useRef } = owl;
 
 export class ActivityMarkDonePopover extends Component {
 

addons/mail/static/src/components/attachment_card/attachment_card.js

@@ -2,6 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { useComponentToModel } from '@mail/component_hooks/use_component_to_model/use_component_to_model';
+
 const { Component } = owl;
 
 export class AttachmentCard extends Component {

addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js

@@ -4,7 +4,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
 import Dialog from 'web.OwlDialog';
 
-const { Component } = owl;
+const { Component, escape } = owl;
 
 export class AttachmentDeleteConfirmDialog extends Component {
 
@@ -25,7 +25,7 @@ export class AttachmentDeleteConfirmDialog extends Component {
     getBody() {
         return _.str.sprintf(
             this.env._t(`Do you really want to delete "%s"?`),
-            owl.utils.escape(this.attachment.displayName)
+            escape(this.attachment.displayName)
         );
     }
 

addons/mail/static/src/components/attachment_image/attachment_image.js

@@ -2,6 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { useComponentToModel } from '@mail/component_hooks/use_component_to_model/use_component_to_model';
+
 const { Component } = owl;
 
 export class AttachmentImage extends Component {

addons/mail/static/src/components/attachment_viewer/attachment_viewer.js

@@ -7,8 +7,7 @@ import { link } from '@mail/model/model_field_command';
 
 import { hidePDFJSButtons } from '@web/legacy/js/libs/pdfjs';
 
-const { Component } = owl;
-const { onMounted, onPatched, onWillUnmount, useRef } = owl.hooks;
+const { Component, onMounted, onPatched, onWillUnmount, useRef } = owl;
 
 const MIN_SCALE = 0.5;
 const SCROLL_ZOOM_STEP = 0.1;

addons/mail/static/src/components/autocomplete_input/autocomplete_input.js

@@ -2,8 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { onMounted, onWillUnmount } = owl.hooks;
+const { Component, onMounted, onWillUnmount } = owl;
 
 export class AutocompleteInput extends Component {
 

addons/mail/static/src/components/chat_window/chat_window.js

@@ -4,8 +4,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { useUpdate } from '@mail/component_hooks/use_update/use_update';
 import { isEventHandled } from '@mail/utils/utils';
 
-const { Component } = owl;
-const { useRef } = owl.hooks;
+const { Component, useRef } = owl;
 
 export class ChatWindow extends Component {
 

addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js

@@ -2,8 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { onMounted, onPatched, onWillUnmount, useRef } = owl.hooks;
+const { Component, onMounted, onPatched, onWillUnmount, useRef } = owl;
 
 export class ChatWindowHiddenMenu extends Component {
 

addons/mail/static/src/components/chatter/chatter.js

@@ -4,8 +4,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { useComponentToModel } from '@mail/component_hooks/use_component_to_model/use_component_to_model';
 import { useUpdate } from '@mail/component_hooks/use_update/use_update';
 
-const { Component } = owl;
-const { useRef } = owl.hooks;
+const { Component, useRef } = owl;
 
 export class Chatter extends Component {
 

addons/mail/static/src/components/chatter_container/chatter_container.js

@@ -3,8 +3,7 @@
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { clear } from '@mail/model/model_field_command';
 
-const { Component } = owl;
-const { onWillUpdateProps } = owl.hooks;
+const { Component, onWillUpdateProps } = owl;
 
 const getChatterNextTemporaryId = (function () {
     let tmpId = 0;

addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js

@@ -6,8 +6,7 @@ import { useUpdate } from '@mail/component_hooks/use_update/use_update';
 import { FormViewDialog } from 'web.view_dialogs';
 import { ComponentAdapter } from 'web.OwlCompatibility';
 
-const { Component } = owl;
-const { useRef } = owl.hooks;
+const { Component, useRef } = owl;
 
 class FormViewDialogComponentAdapter extends ComponentAdapter {
 

addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js

@@ -2,8 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { useState } = owl.hooks;
+const { Component, useState } = owl;
 
 export class ComposerSuggestedRecipientList extends Component {
 

addons/mail/static/src/components/composer_text_input/composer_text_input.js

@@ -5,8 +5,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { useUpdate } from '@mail/component_hooks/use_update/use_update';
 import { markEventHandled } from '@mail/utils/utils';
 
-const { Component } = owl;
-const { useRef } = owl.hooks;
+const { Component, useRef } = owl;
 
 export class ComposerTextInput extends Component {
 

addons/mail/static/src/components/dialog/dialog.js

@@ -2,8 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { onMounted, onWillUnmount } = owl.hooks;
+const { Component, onMounted, onWillUnmount } = owl;
 
 export class Dialog extends Component {
 

addons/mail/static/src/components/dialog_manager/dialog_manager.js

@@ -2,8 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { onMounted, onPatched } = owl.hooks;
+const { Component, onMounted, onPatched } = owl;
 
 export class DialogManager extends Component {
 

addons/mail/static/src/components/discuss/discuss.js

@@ -3,8 +3,7 @@
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { useUpdate } from '@mail/component_hooks/use_update/use_update';
 
-const { Component } = owl;
-const { onWillUnmount } = owl.hooks;
+const { Component, onWillUnmount } = owl;
 
 export class Discuss extends Component {
 

addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js

@@ -3,8 +3,7 @@
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { useUpdate } from '@mail/component_hooks/use_update/use_update';
 
-const { Component } = owl;
-const { useRef } = owl.hooks;
+const { Component, useRef } = owl;
 
 export class DiscussSidebar extends Component {
 

addons/mail/static/src/components/follow_button/follow_button.js

@@ -2,8 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { useState } = owl.hooks;
+const { Component, useState } = owl;
 
 export class FollowButton extends Component {
 

addons/mail/static/src/components/follower_list_menu/follower_list_menu.js

@@ -2,8 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { onMounted, onWillUnmount, useRef, useState } = owl.hooks;
+const { Component, onMounted, onWillUnmount, useRef, useState } = owl;
 
 export class FollowerListMenu extends Component {
 

addons/mail/static/src/components/media_preview/media_preview.js

@@ -3,7 +3,9 @@
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { useRefToModel } from '@mail/component_hooks/use_ref_to_model/use_ref_to_model';
 
-export class MediaPreview extends owl.Component {
+const { Component } = owl;
+
+export class MediaPreview extends Component {
 
     /**
      * @override

addons/mail/static/src/components/message/message.js

@@ -10,8 +10,7 @@ import { _lt } from 'web.core';
 import { format } from 'web.field_utils';
 import { getLangDatetimeFormat } from 'web.time';
 
-const { Component, useState } = owl;
-const { onWillUnmount, useRef } = owl.hooks;
+const { Component, onWillUnmount, useRef, useState } = owl;
 
 const READ_MORE = _lt("Read More");
 const READ_LESS = _lt("Read Less");

addons/mail/static/src/components/message_list/message_list.js

@@ -5,8 +5,7 @@ import { useComponentToModel } from '@mail/component_hooks/use_component_to_mode
 import { useRenderedValues } from '@mail/component_hooks/use_rendered_values/use_rendered_values';
 import { useUpdate } from '@mail/component_hooks/use_update/use_update';
 
-const { Component } = owl;
-const { onWillPatch, useRef } = owl.hooks;
+const { Component, onWillPatch, useRef } = owl;
 
 export class MessageList extends Component {
 

addons/mail/static/src/components/message_reaction_group/message_reaction_group.js

@@ -1,8 +1,9 @@
 /** @odoo-module **/
 
-const { Component } = owl;
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
+const { Component } = owl;
+
 export class MessageReactionGroup extends Component {
 
     get messageReactionGroup() {

addons/mail/static/src/components/messaging_menu/messaging_menu.js

@@ -2,8 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { onMounted, onWillUnmount } = owl.hooks;
+const { Component, onMounted, onWillUnmount } = owl;
 
 export class MessagingMenu extends Component {
 

addons/mail/static/src/components/messaging_menu_container/messaging_menu_container.js

@@ -13,7 +13,7 @@ export class MessagingMenuContainer extends Component {
     setup() {
         // for now, the legacy env is needed for internal functions such as
         // `useModels` to work
-        this.env = owl.Component.env;
+        this.env = Component.env;
         useModels();
         super.setup();
     }

addons/mail/static/src/components/notification_group/notification_group.js

@@ -2,8 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { useRef } = owl.hooks;
+const { Component, useRef } = owl;
 
 export class NotificationGroup extends Component {
 

addons/mail/static/src/components/notification_list/notification_list.js

@@ -2,8 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { onMounted } = owl.hooks;
+const { Component, onMounted } = owl;
 
 export class NotificationList extends Component {
 

addons/mail/static/src/components/rtc_activity_notice_container/rtc_activity_notice_container.js

@@ -13,7 +13,7 @@ export class RtcActivityNoticeContainer extends Component {
     setup() {
         // for now, the legacy env is needed for internal functions such as
         // `useModels` to work
-        this.env = owl.Component.env;
+        this.env = Component.env;
         useModels();
         super.setup();
     }

addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.js

@@ -2,8 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { useRef } = owl.hooks;
+const { Component, useRef } = owl;
 
 export class RtcCallParticipantCard extends Component {
 

addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.js

@@ -5,8 +5,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
 import Dialog from 'web.OwlDialog';
 
-const { Component, useState } = owl;
-const { useRef } = owl.hooks;
+const { Component, useRef, useState } = owl;
 
 const components = {
     Dialog,

addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.js

@@ -4,8 +4,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
 import { browser } from "@web/core/browser/browser";
 
-const { Component } = owl;
-const { onWillStart, useState } = owl.hooks;
+const { Component, onWillStart, useState } = owl;
 
 export class RtcConfigurationMenu extends Component {
 

addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js

@@ -4,8 +4,7 @@ import * as mailUtils from '@mail/js/utils';
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { useRef } = owl.hooks;
+const { Component, useRef } = owl;
 
 export class ThreadNeedactionPreview extends Component {
 

addons/mail/static/src/components/thread_preview/thread_preview.js

@@ -4,8 +4,7 @@ import * as mailUtils from '@mail/js/utils';
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component } = owl;
-const { useRef } = owl.hooks;
+const { Component, useRef } = owl;
 
 export class ThreadPreview extends Component {
 

addons/mail/static/src/components/welcome_view/welcome_view.js

@@ -4,7 +4,9 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { useRefToModel } from '@mail/component_hooks/use_ref_to_model/use_ref_to_model';
 import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model/use_update_to_model';
 
-export class WelcomeView extends owl.Component {
+const { Component } = owl;
+
+export class WelcomeView extends Component {
 
     /**
      * @override

addons/mail/static/src/js/core/translation.js

@@ -2,17 +2,19 @@
 
 import { TranslationDataBase } from 'web.translation';
 
+const { Component } = owl;
+
 TranslationDataBase.include({
     /**
      * @override
      */
     set_bundle() {
         const res = this._super(...arguments);
-        if (owl.Component.env.services && owl.Component.env.services.messaging) {
+        if (Component.env.services && Component.env.services.messaging) {
             // During boot `env.services` might not even be set yet, in this
             // case this can safely be ignored as messaging will then load
             // locale information during its initialization.
-            owl.Component.env.services.messaging.get().then(messaging => {
+            Component.env.services.messaging.get().then(messaging => {
                 // Update messaging locale whenever the translation bundle changes.
                 // In particular if messaging is created before the end of the
                 // `load_translations` RPC, the default values have to be

addons/mail/static/src/js/utils.js

@@ -2,6 +2,8 @@
 
 import core from 'web.core';
 
+const { escape } = owl;
+
 var _t = core._t;
 
 /**
@@ -146,7 +148,7 @@ function parseEmail(text) {
  */
 function escapeAndCompactTextContent(content) {
     //Removing unwanted extra spaces from message
-    let value = owl.utils.escape(content).trim();
+    let value = escape(content).trim();
     value = value.replace(/(\r|\n){2,}/g, '<br/><br/>');
     value = value.replace(/(\r|\n)/g, '<br/>');
 

addons/mail/static/src/js/views/activity/activity_renderer.js

@@ -11,9 +11,9 @@ import QWeb from 'web.QWeb';
 import session from 'web.session';
 import utils from 'web.utils';
 
+const { useState } = owl;
 const _t = core._t;
 
-const { useState } = owl.hooks;
 
 /**
  * Owl Component Adapter for ActivityRecord which is KanbanRecord (Odoo Widget)

addons/mail/static/src/models/composer_view/composer_view.js

@@ -8,6 +8,8 @@ import { OnChange } from '@mail/model/model_onchange';
 import { addLink, escapeAndCompactTextContent, parseAndTransform } from '@mail/js/utils';
 import { isEventHandled, markEventHandled } from '@mail/utils/utils';
 
+const { escape } = owl;
+
 registerModel({
     name: 'ComposerView',
     identifyingFields: [['threadView', 'messageViewInEditing', 'chatter']],
@@ -722,7 +724,7 @@ registerModel({
             const mentions = [];
             for (const partner of this.composer.mentionedPartners) {
                 const placeholder = `@-mention-partner-${partner.id}`;
-                const text = `@${owl.utils.escape(partner.name)}`;
+                const text = `@${escape(partner.name)}`;
                 mentions.push({
                     class: 'o_mail_redirect',
                     id: partner.id,
@@ -734,7 +736,7 @@ registerModel({
             }
             for (const channel of this.composer.mentionedChannels) {
                 const placeholder = `#-mention-channel-${channel.id}`;
-                const text = `#${owl.utils.escape(channel.name)}`;
+                const text = `#${escape(channel.name)}`;
                 mentions.push({
                     class: 'o_channel_redirect',
                     id: channel.id,

addons/mail/static/src/models/discuss/discuss.js

@@ -4,6 +4,8 @@ import { registerModel } from '@mail/model/model_core';
 import { attr, many2one, one2one } from '@mail/model/model_field';
 import { clear, insertAndReplace, link, unlink } from '@mail/model/model_field_command';
 
+const { escape } = owl;
+
 registerModel({
     name: 'Discuss',
     identifyingFields: ['messaging'],
@@ -64,14 +66,14 @@ registerModel({
             this.update({ addingChannelValue: req.term });
             const threads = await this.messaging.models['Thread'].searchChannelsToOpen({ limit: 10, searchTerm: req.term });
             const items = threads.map((thread) => {
-                const escapedName = owl.utils.escape(thread.name);
+                const escapedName = escape(thread.name);
                 return {
                     id: thread.id,
                     label: escapedName,
                     value: escapedName,
                 };
             });
-            const escapedValue = owl.utils.escape(req.term);
+            const escapedValue = escape(req.term);
             // XDU FIXME could use a component but be careful with owl's
             // renderToString https://github.com/odoo/owl/issues/708
             items.push({
@@ -107,7 +109,7 @@ registerModel({
          * @param {function} res
          */
         handleAddChatAutocompleteSource(req, res) {
-            const value = owl.utils.escape(req.term);
+            const value = escape(req.term);
             this.messaging.models['Partner'].imSearch({
                 callback: partners => {
                     const suggestions = partners.map(partner => {

addons/mail/static/src/models/messaging/messaging.js

@@ -6,7 +6,7 @@ import { OnChange } from '@mail/model/model_onchange';
 import { insertAndReplace, link, unlink } from '@mail/model/model_field_command';
 import { makeDeferred } from '@mail/utils/deferred/deferred';
 
-const { EventBus } = owl.core;
+const { EventBus } = owl;
 
 registerModel({
     name: 'Messaging',
@@ -171,7 +171,7 @@ registerModel({
         },
         /**
          * @private
-         * @returns {owl.EventBus}
+         * @returns {EventBus}
          */
         _computeMessagingBus() {
             if (this.messagingBus) {

addons/mail/static/src/models/messaging_notification_handler/messaging_notification_handler.js

@@ -7,6 +7,7 @@ import { htmlToTextContentInline } from '@mail/js/utils';
 import { str_to_datetime } from 'web.time';
 import { Markup } from 'web.utils';
 
+const { escape } = owl;
 const PREVIEW_MSG_MAX_SIZE = 350; // optimal for native English speakers
 
 registerModel({
@@ -692,7 +693,7 @@ registerModel({
                     notificationTitle = author.nameOrDisplayName;
                 }
             }
-            const notificationContent = owl.utils.escape(
+            const notificationContent = escape(
                 htmlToTextContentInline(message.body).substr(0, PREVIEW_MSG_MAX_SIZE)
             );
             this.env.services['bus_service'].sendNotification({

addons/mail/static/src/models/popover_view/popover_view.js

@@ -4,6 +4,8 @@ import { registerModel } from '@mail/model/model_core';
 import { attr, one2one } from '@mail/model/model_field';
 import { clear, insertAndReplace, replace } from '@mail/model/model_field_command';
 
+const { Ref } = owl;
+
 registerModel({
     name: 'PopoverView',
     identifyingFields: [['composerViewOwnerAsEmoji', 'messageActionListOwnerAsReaction', 'threadViewTopbarOwnerAsInvite']],
@@ -28,7 +30,7 @@ registerModel({
         },
         /**
          * @private
-         * @returns {owl.Ref}
+         * @returns {Ref}
          */
         _computeAnchorRef() {
             if (this.threadViewTopbarOwnerAsInvite) {

addons/mail/static/src/public/discuss_public_boot.js

@@ -24,20 +24,22 @@ import {
 } from '@web/legacy/utils';
 import * as legacySession from 'web.session';
 
-owl.Component.env = legacyEnv;
+const { Component, config, mount, whenReady } = owl;
+
+Component.env = legacyEnv;
 
 (async function boot() {
-    await owl.utils.whenReady();
-    owl.config.mode = owl.Component.env.isDebug() ? 'dev' : 'prod';
-    AbstractService.prototype.deployServices(owl.Component.env);
+    await whenReady();
+    config.mode = Component.env.isDebug() ? 'dev' : 'prod';
+    AbstractService.prototype.deployServices(Component.env);
     const serviceRegistry = registry.category('services');
-    serviceRegistry.add('legacy_rpc', makeLegacyRpcService(owl.Component.env));
-    serviceRegistry.add('legacy_session', makeLegacySessionService(owl.Component.env, legacySession));
-    serviceRegistry.add('legacy_notification', makeLegacyNotificationService(owl.Component.env));
-    serviceRegistry.add('legacy_crash_manager', makeLegacyCrashManagerService(owl.Component.env));
-    serviceRegistry.add('legacy_dialog_mapping', makeLegacyDialogMappingService(owl.Component.env));
+    serviceRegistry.add('legacy_rpc', makeLegacyRpcService(Component.env));
+    serviceRegistry.add('legacy_session', makeLegacySessionService(Component.env, legacySession));
+    serviceRegistry.add('legacy_notification', makeLegacyNotificationService(Component.env));
+    serviceRegistry.add('legacy_crash_manager', makeLegacyCrashManagerService(Component.env));
+    serviceRegistry.add('legacy_dialog_mapping', makeLegacyDialogMappingService(Component.env));
     await legacySession.is_bound;
-    owl.Component.env.qweb.addTemplates(legacySession.owlTemplates);
+    Component.env.qweb.addTemplates(legacySession.owlTemplates);
     Object.assign(odoo, {
         info: {
             db: session.db,
@@ -53,19 +55,19 @@ owl.Component.env = legacyEnv;
         odoo.loadTemplatesPromise.then(processTemplates),
     ]);
     env.qweb.addTemplates(templates);
-    mapLegacyEnvToWowlEnv(owl.Component.env, env);
+    mapLegacyEnvToWowlEnv(Component.env, env);
     odoo.isReady = true;
     legacyServiceRegistry.add('messaging', MessagingService.extend({
         messagingValues: {
             autofetchPartnerImStatus: false,
         },
     }));
-    await owl.mount(MainComponentsContainer, { env, target: document.body });
+    await mount(MainComponentsContainer, { env, target: document.body });
     createAndMountDiscussPublicView();
 })();
 
 async function createAndMountDiscussPublicView() {
-    const messaging = await owl.Component.env.services.messaging.get();
+    const messaging = await Component.env.services.messaging.get();
     // needed by the attachment viewer
     const DialogManager = getMessagingComponent('DialogManager');
     const dialogManagerComponent = new DialogManager(null, {});

addons/mail/static/src/public/root_widget.js

@@ -4,6 +4,8 @@
  */
 odoo.define("root.widget", function (require) {
     const { ComponentAdapter } = require("web.OwlCompatibility");
+
     const { Component } = owl;
+
     return new ComponentAdapter(null, { Component });
 });

addons/mail/static/src/utils/messaging_component.js

@@ -3,7 +3,7 @@
 import { useModels } from "@mail/component_hooks/use_models/use_models";
 import { useShouldUpdateBasedOnProps } from "@mail/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props";
 
-const { useRef } = owl.hooks;
+const { useRef } = owl;
 
 const componentRegistry = {};
 

addons/mail/static/src/utils/test_utils.js

@@ -29,13 +29,12 @@ import { createWebClient, getActionManagerServerData } from "@web/../tests/webcl
 
 import LegacyRegistry from "web.Registry";
 
+const { Component, EventBus } = owl;
 const {
     addMockEnvironment,
     patch: legacyPatch,
     unpatch: legacyUnpatch,
 } = mock;
-const { Component } = owl;
-const { EventBus } = owl.core;
 
 //------------------------------------------------------------------------------
 // Private
@@ -163,7 +162,7 @@ function _useDiscuss(callbacks, { afterNextRender }) {
  * @returns {Promise}
  */
 function nextAnimationFrame() {
-    const requestAnimationFrame = owl.Component.scheduler.requestAnimationFrame;
+    const requestAnimationFrame = Component.scheduler.requestAnimationFrame;
     return new Promise(function (resolve) {
         setTimeout(() => requestAnimationFrame(() => resolve()));
     });
@@ -178,10 +177,10 @@ function nextAnimationFrame() {
  * @returns {Promise}
  */
 const afterNextRender = (function () {
-    const stop = owl.Component.scheduler.stop;
+    const stop = Component.scheduler.stop;
     const stopPromises = [];
 
-    owl.Component.scheduler.stop = function () {
+    Component.scheduler.stop = function () {
         const wasRunning = this.isRunning;
         stop.call(this);
         if (wasRunning) {
@@ -201,7 +200,7 @@ const afterNextRender = (function () {
         const timeoutProm = new Promise((resolve, reject) => {
             timeoutNoRender = setTimeout(() => {
                 let error = startError;
-                if (owl.Component.scheduler.isRunning) {
+                if (Component.scheduler.isRunning) {
                     error = stopError;
                 }
                 console.error(error);
@@ -222,7 +221,7 @@ const afterNextRender = (function () {
         await funcRes;
         // Wait one more frame to make sure no new render has been queued.
         await nextAnimationFrame();
-        if (owl.Component.scheduler.isRunning) {
+        if (Component.scheduler.isRunning) {
             await afterNextRender(() => {}, timeoutDelay);
         }
     }

addons/mail/static/src/webclient/commands/mail_providers.js

@@ -3,8 +3,7 @@
 import { _lt } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
 
-const { Component } = owl;
-const { xml } = owl.tags;
+const { Component, xml } = owl;
 
 class DialogCommand extends Component {}
 DialogCommand.template = xml`

addons/mail/static/src/widgets/form_renderer/form_renderer.js

@@ -5,6 +5,8 @@ import { getMessagingComponent } from "@mail/utils/messaging_component";
 import FormRenderer from 'web.FormRenderer';
 import { ComponentWrapper } from 'web.OwlCompatibility';
 
+const { Component } = owl;
+
 class ChatterContainerWrapperComponent extends ComponentWrapper {}
 
 /**
@@ -37,7 +39,7 @@ FormRenderer.include({
         this.off('o_attachments_changed', this);
         this.off('o_chatter_rendered', this);
         this.off('o_message_posted', this);
-        owl.Component.env.bus.off('Thread:promptAddFollower-closed', this);
+        Component.env.bus.off('Thread:promptAddFollower-closed', this);
     },
 
     //--------------------------------------------------------------------------
@@ -76,7 +78,7 @@ FormRenderer.include({
             this.on('o_attachments_changed', this, ev => this.trigger_up('reload', { keepChanges: true }));
         }
         if (this.chatterFields.hasRecordReloadOnFollowersUpdate) {
-            owl.Component.env.bus.on('Thread:promptAddFollower-closed', this, ev => this.trigger_up('reload', { keepChanges: true }));
+            Component.env.bus.on('Thread:promptAddFollower-closed', this, ev => this.trigger_up('reload', { keepChanges: true }));
         }
     },
     /**

addons/mail/static/tests/tours/mail_full_composer_test_tour.js

@@ -7,6 +7,8 @@ import {
 
 import tour from 'web_tour.tour';
 
+const { Component } = owl;
+
 /**
  * This tour depends on data created by python test in charge of launching it.
  * It is not intended to work when launched from interface. It is needed to test
@@ -31,7 +33,7 @@ tour.register('mail/static/tests/tours/mail_full_composer_test_tour.js', {
             contentType: 'text/plain',
             name: 'text.txt',
         });
-        const messaging = await window.owl.Component.env.services.messaging.get();
+        const messaging = await Component.env.services.messaging.get();
         const uploaders = messaging.models['FileUploader'].all();
         inputFiles(
             uploaders[0].fileInput,

addons/point_of_sale/static/src/js/Chrome.js

@@ -1,8 +1,6 @@
 odoo.define('point_of_sale.Chrome', function(require) {
     'use strict';
 
-    const { useState, useRef, useContext, useExternalListener } = owl.hooks;
-    const { debounce } = owl.utils;
     const { loadCSS } = require('web.ajax');
     const { useListener } = require('web.custom_hooks');
     const { BarcodeEvents } = require('barcodes.BarcodeEvents');
@@ -23,6 +21,8 @@ odoo.define('point_of_sale.Chrome', function(require) {
     // we instantiate the extended one.
     const models = require('point_of_sale.models');
 
+    const { debounce, useContext, useExternalListener, useRef, useState } = owl;
+
     /**
      * Chrome is the root component of the PoS App.
      */

addons/point_of_sale/static/src/js/ChromeWidgets/ClientScreenButton.js

@@ -1,10 +1,11 @@
 odoo.define('point_of_sale.ClientScreenButton', function(require) {
     'use strict';
 
-    const { useState } = owl;
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
 
+    const { useState } = owl;
+
     // Formerly ClientScreenWidget
     class ClientScreenButton extends PosComponent {
         constructor() {

addons/point_of_sale/static/src/js/ChromeWidgets/DebugWidget.js

@@ -1,14 +1,14 @@
 odoo.define('point_of_sale.DebugWidget', function (require) {
     'use strict';
 
-    const { useState } = owl;
-    const { useRef } = owl.hooks;
     const { getFileAsText } = require('point_of_sale.utils');
     const { parse } = require('web.field_utils');
     const NumberBuffer = require('point_of_sale.NumberBuffer');
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
 
+    const { useRef, useState } = owl;
+
     class DebugWidget extends PosComponent {
         constructor() {
             super(...arguments);

addons/point_of_sale/static/src/js/ChromeWidgets/ProxyStatus.js

@@ -1,10 +1,11 @@
 odoo.define('point_of_sale.ProxyStatus', function(require) {
     'use strict';
 
-    const { useState } = owl;
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
 
+    const { useState } = owl;
+
     // Previously ProxyStatusWidget
     class ProxyStatus extends PosComponent {
         constructor() {

addons/point_of_sale/static/src/js/ChromeWidgets/SyncNotification.js

@@ -1,10 +1,11 @@
 odoo.define('point_of_sale.SyncNotification', function(require) {
     'use strict';
 
-    const { useState } = owl;
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
 
+    const { useState } = owl;
+
     // Previously SynchNotificationWidget
     class SyncNotification extends PosComponent {
         constructor() {

addons/point_of_sale/static/src/js/Gui.js

@@ -1,9 +1,11 @@
 odoo.define('point_of_sale.Gui', function (require) {
     'use strict';
 
+    const { Component, component } = owl;
+
     /**
      * This module bridges the data classes (such as those defined in
-     * models.js) to the view (owl.Component) but not vice versa.
+     * models.js) to the view (Component) but not vice versa.
      *
      * The idea is to be able to perform side-effects to the user interface
      * during calculation. Think of console.log during times we want to see
@@ -29,7 +31,7 @@ odoo.define('point_of_sale.Gui', function (require) {
     /**
      * Call this when the user interface is ready. Provide the component
      * that will be used to control the ui.
-     * @param {owl.component} component component having the ui methods.
+     * @param {component} component component having the ui methods.
      */
     const configureGui = ({ component }) => {
         config.component = component;

addons/point_of_sale/static/src/js/Misc/AbstractReceiptScreen.js

@@ -1,11 +1,12 @@
 odoo.define('point_of_sale.AbstractReceiptScreen', function (require) {
     'use strict';
 
-    const { useRef } = owl.hooks;
     const { nextFrame } = require('point_of_sale.utils');
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
 
+    const { useRef } = owl;
+
     /**
      * This relies on the assumption that there is a reference to
      * `order-receipt` so it is important to declare a `t-ref` to

addons/point_of_sale/static/src/js/Misc/Draggable.js

@@ -1,11 +1,12 @@
 odoo.define('point_of_sale.Draggable', function(require) {
     'use strict';
 
-    const { useExternalListener } = owl.hooks;
     const { useListener } = require('web.custom_hooks');
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
 
+    const { useExternalListener } = owl;
+
     /**
      * Wrap an element or a component with { position: absolute } to make it
      * draggable around the limitArea or the nearest positioned ancestor.

addons/point_of_sale/static/src/js/Misc/NumberBuffer.js

@@ -1,15 +1,13 @@
 odoo.define('point_of_sale.NumberBuffer', function(require) {
     'use strict';
 
-    const { Component } = owl;
-    const { EventBus } = owl.core;
-    const { onMounted, onWillUnmount, useExternalListener } = owl.hooks;
     const { useListener } = require('web.custom_hooks');
     const { parse } = require('web.field_utils');
     const { BarcodeEvents } = require('barcodes.BarcodeEvents');
     const { _t } = require('web.core');
     const { Gui } = require('point_of_sale.Gui');
 
+    const { Component, EventBus, onMounted, onWillUnmount, useExternalListener } = owl;
     const INPUT_KEYS = new Set(
         ['Delete', 'Backspace', '+1', '+2', '+5', '+10', '+20', '+50'].concat('0123456789+-.,'.split(''))
     );

addons/point_of_sale/static/src/js/Misc/SearchBar.js

@@ -1,11 +1,12 @@
 odoo.define('point_of_sale.SearchBar', function (require) {
     'use strict';
 
-    const { useState, useExternalListener } = owl.hooks;
     const { useListener } = require('web.custom_hooks');
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
 
+    const { useExternalListener, useState } = owl;
+
     /**
      * This is a simple configurable search bar component. It has search fields
      * and selection filter. Search fields allow the users to specify the type

addons/point_of_sale/static/src/js/PopupControllerMixin.js

@@ -1,9 +1,10 @@
 odoo.define('point_of_sale.PopupControllerMixin', function(require) {
     'use strict';
 
-    const { useState } = owl;
     const { useListener } = require('web.custom_hooks');
 
+    const { useState } = owl;
+
     /**
      * Allows the component declared with this mixin the ability show popup dynamically,
      * provided the following:

addons/point_of_sale/static/src/js/Popups/AbstractAwaitablePopup.js

@@ -1,9 +1,10 @@
 odoo.define('point_of_sale.AbstractAwaitablePopup', function (require) {
     'use strict';
 
-    const { useExternalListener } = owl.hooks;
     const PosComponent = require('point_of_sale.PosComponent');
 
+    const { useExternalListener, xml } = owl;
+
     /**
      * Implement this abstract class by extending it like so:
      * ```js
@@ -12,7 +13,7 @@ odoo.define('point_of_sale.AbstractAwaitablePopup', function (require) {
      *     return 'result';
      *   }
      * }
-     * ConcretePopup.template = owl.tags.xml`
+     * ConcretePopup.template = xml`
      *   <div>
      *     <button t-on-click="confirm">Okay</button>
      *     <button t-on-click="cancel">Cancel</button>

addons/point_of_sale/static/src/js/Popups/CashMovePopup.js

@@ -6,15 +6,17 @@ odoo.define('point_of_sale.CashMovePopup', function (require) {
     const { _t } = require('web.core');
     const { parse } = require('web.field_utils');
 
+    const { useRef, useState } = owl;
+
     class CashMovePopup extends AbstractAwaitablePopup {
         setup() {
-            this.state = owl.hooks.useState({
+            this.state = useState({
                 inputType: '', // '' | 'in' | 'out'
                 inputAmount: '',
                 inputReason: '',
                 inputHasError: false,
             });
-            this.inputAmountRef = owl.hooks.useRef('input-amount-ref');
+            this.inputAmountRef = useRef('input-amount-ref');
         }
         confirm() {
             try {

addons/point_of_sale/static/src/js/Popups/CashOpeningPopup.js

@@ -1,10 +1,10 @@
 odoo.define('point_of_sale.CashOpeningPopup', function(require) {
     'use strict';
 
-    const { useState, useRef } = owl.hooks;
     const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
     const Registries = require('point_of_sale.Registries');
 
+    const { useRef, useState } = owl;
 
     class CashOpeningPopup extends AbstractAwaitablePopup {
         constructor() {

addons/point_of_sale/static/src/js/Popups/ClosePosPopup.js

@@ -1,12 +1,13 @@
 odoo.define('point_of_sale.ClosePosPopup', function(require) {
     'use strict';
 
-    const { useState, useRef } = owl.hooks;
     const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
     const Registries = require('point_of_sale.Registries');
     const { identifyError } = require('point_of_sale.utils');
     const { ConnectionLostError, ConnectionAbortedError} = require('@web/core/network/rpc_service')
 
+    const { useRef, useState } = owl;
+
     /**
      * This popup needs to be self-dependent because it needs to be called from different place.
      */

addons/point_of_sale/static/src/js/Popups/EditListPopup.js

@@ -1,12 +1,13 @@
 odoo.define('point_of_sale.EditListPopup', function(require) {
     'use strict';
 
-    const { useState } = owl.hooks;
     const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
     const Registries = require('point_of_sale.Registries');
     const { useAutoFocusToLast } = require('point_of_sale.custom_hooks');
     const { _lt } = require('@web/core/l10n/translation');
 
+    const { useState } = owl;
+
     /**
      * Given a array of { id, text }, we show the user this popup to be able to modify this given array.
      * (used to replace PackLotLinePopupWidget)

addons/point_of_sale/static/src/js/Popups/MoneyDetailsPopup.js

@@ -1,10 +1,11 @@
 odoo.define('point_of_sale.MoneyDetailsPopup', function(require) {
     'use strict';
 
-    const { useState } = owl.hooks;
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
 
+    const { useState } = owl;
+
     /**
      * Even if this component has a "confirm and cancel"-like buttons, this should not be an AbstractAwaitablePopup.
      * We currently cannot show two popups at the same time, what we do is mount this component with its parent

addons/point_of_sale/static/src/js/Popups/NumberPopup.js

@@ -3,12 +3,13 @@ odoo.define('point_of_sale.NumberPopup', function(require) {
     var core = require('web.core');
     var _t = core._t;
 
-    const { useState } = owl;
     const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
     const NumberBuffer = require('point_of_sale.NumberBuffer');
     const { useListener } = require('web.custom_hooks');
     const Registries = require('point_of_sale.Registries');
 
+    const { useState } = owl;
+
     // formerly NumberPopupWidget
     class NumberPopup extends AbstractAwaitablePopup {
         /**

addons/point_of_sale/static/src/js/Popups/ProductConfiguratorPopup.js

@@ -1,11 +1,12 @@
 odoo.define('point_of_sale.ProductConfiguratorPopup', function(require) {
     'use strict';
 
-    const { useState, useSubEnv } = owl.hooks;
     const PosComponent = require('point_of_sale.PosComponent');
     const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
     const Registries = require('point_of_sale.Registries');
 
+    const { useState, useSubEnv } = owl;
+
     class ProductConfiguratorPopup extends AbstractAwaitablePopup {
         constructor() {
             super(...arguments);

addons/point_of_sale/static/src/js/Popups/SelectionPopup.js

@@ -1,11 +1,12 @@
 odoo.define('point_of_sale.SelectionPopup', function (require) {
     'use strict';
 
-    const { useState } = owl.hooks;
     const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
     const Registries = require('point_of_sale.Registries');
     const { _lt } = require('@web/core/l10n/translation');
 
+    const { useState } = owl;
+
     // formerly SelectionPopupWidget
     class SelectionPopup extends AbstractAwaitablePopup {
         /**

addons/point_of_sale/static/src/js/Popups/TextAreaPopup.js

@@ -1,11 +1,12 @@
 odoo.define('point_of_sale.TextAreaPopup', function(require) {
     'use strict';
 
-    const { useState, useRef } = owl.hooks;
     const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
     const Registries = require('point_of_sale.Registries');
     const { _lt } = require('@web/core/l10n/translation');
 
+    const { useRef, useState } = owl;
+
     // formerly TextAreaPopupWidget
     // IMPROVEMENT: This code is very similar to TextInputPopup.
     //      Combining them would reduce the code.

addons/point_of_sale/static/src/js/Popups/TextInputPopup.js

@@ -1,11 +1,12 @@
 odoo.define('point_of_sale.TextInputPopup', function(require) {
     'use strict';
 
-    const { useState, useRef } = owl.hooks;
     const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
     const Registries = require('point_of_sale.Registries');
     const { _lt } = require('@web/core/l10n/translation');
 
+    const { useRef, useState } = owl;
+
     // formerly TextInputPopupWidget
     class TextInputPopup extends AbstractAwaitablePopup {
         constructor() {

addons/point_of_sale/static/src/js/Screens/ClientListScreen/ClientListScreen.js

@@ -1,11 +1,12 @@
 odoo.define('point_of_sale.ClientListScreen', function(require) {
     'use strict';
 
-    const { debounce } = owl.utils;
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
     const { useListener } = require('web.custom_hooks');
 
+    const { Observer, debounce } = owl;
+
     /**
      * Render this screen using `showTempScreen` to select client.
      * When the shown screen is confirmed ('Set Customer' or 'Deselect Customer'
@@ -31,7 +32,7 @@ odoo.define('point_of_sale.ClientListScreen', function(require) {
             // We are not using useState here because the object
             // passed to useState converts the object and its contents
             // to Observer proxy. Not sure of the side-effects of making
-            // a persistent object, such as pos, into owl.Observer. But it
+            // a persistent object, such as pos, into Observer. But it
             // is better to be safe.
             this.state = {
                 query: null,

addons/point_of_sale/static/src/js/Screens/ProductScreen/OrderWidget.js

@@ -1,12 +1,13 @@
 odoo.define('point_of_sale.OrderWidget', function(require) {
     'use strict';
 
-    const { useState, useRef, onPatched } = owl.hooks;
     const { useListener } = require('web.custom_hooks');
     const { onChangeOrder } = require('point_of_sale.custom_hooks');
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
 
+    const { onPatched, useRef, useState } = owl;
+
     class OrderWidget extends PosComponent {
         constructor() {
             super(...arguments);

addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js

@@ -8,9 +8,10 @@ odoo.define('point_of_sale.ProductScreen', function(require) {
     const Registries = require('point_of_sale.Registries');
     const { onChangeOrder, useBarcodeReader } = require('point_of_sale.custom_hooks');
     const { isConnectionError, posbus } = require('point_of_sale.utils');
-    const { useState, onMounted } = owl.hooks;
     const { parse } = require('web.field_utils');
 
+    const { onMounted, useState } = owl;
+
     class ProductScreen extends ControlButtonsMixin(PosComponent) {
         constructor() {
             super(...arguments);

addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js

@@ -1,11 +1,12 @@
 odoo.define('point_of_sale.ProductsWidget', function(require) {
     'use strict';
 
-    const { useState } = owl.hooks;
     const PosComponent = require('point_of_sale.PosComponent');
     const { useListener } = require('web.custom_hooks');
     const Registries = require('point_of_sale.Registries');
 
+    const { useState } = owl;
+
     class ProductsWidget extends PosComponent {
         /**
          * @param {Object} props

addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js

@@ -1,14 +1,14 @@
 odoo.define('point_of_sale.ProductsWidgetControlPanel', function(require) {
     'use strict';
 
-    const { useRef } = owl.hooks;
-    const { debounce } = owl.utils;
     const { identifyError } = require('point_of_sale.utils');
     const { ConnectionLostError, ConnectionAbortedError } = require('@web/core/network/rpc_service');
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
     const { posbus } = require('point_of_sale.utils');
 
+    const { debounce, useRef } = owl;
+
     class ProductsWidgetControlPanel extends PosComponent {
         constructor() {
             super(...arguments);

addons/point_of_sale/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js

@@ -3,11 +3,11 @@ odoo.define('point_of_sale.ReceiptScreen', function (require) {
 
     const { Printer } = require('point_of_sale.Printer');
     const { is_email } = require('web.utils');
-    const { useRef, useContext } = owl.hooks;
     const { useErrorHandlers, onChangeOrder } = require('point_of_sale.custom_hooks');
     const Registries = require('point_of_sale.Registries');
     const AbstractReceiptScreen = require('point_of_sale.AbstractReceiptScreen');
 
+    const { useContext, useRef } = owl;
     const ReceiptScreen = (AbstractReceiptScreen) => {
         class ReceiptScreen extends AbstractReceiptScreen {
             constructor() {

addons/point_of_sale/static/src/js/Screens/ScaleScreen/ScaleScreen.js

@@ -1,11 +1,12 @@
 odoo.define('point_of_sale.ScaleScreen', function(require) {
     'use strict';
 
-    const { useState, useExternalListener } = owl.hooks;
     const PosComponent = require('point_of_sale.PosComponent');
     const { round_precision: round_pr } = require('web.utils');
     const Registries = require('point_of_sale.Registries');
 
+    const { useExternalListener, useState } = owl;
+
     class ScaleScreen extends PosComponent {
         /**
          * @param {Object} props

addons/point_of_sale/static/src/js/Screens/TicketScreen/TicketScreen.js

@@ -1,7 +1,6 @@
 odoo.define('point_of_sale.TicketScreen', function (require) {
     'use strict';
 
-    const { useState } = owl.hooks;
     const models = require('point_of_sale.models');
     const Registries = require('point_of_sale.Registries');
     const IndependentToOrderScreen = require('point_of_sale.IndependentToOrderScreen');
@@ -10,6 +9,7 @@ odoo.define('point_of_sale.TicketScreen', function (require) {
     const { posbus } = require('point_of_sale.utils');
     const { parse } = require('web.field_utils');
 
+    const { useState } = owl;
 
     class TicketScreen extends IndependentToOrderScreen {
         constructor() {

addons/point_of_sale/static/src/js/chrome_adapter.js

@@ -6,13 +6,14 @@ import Chrome from "point_of_sale.Chrome";
 import Registries from "point_of_sale.Registries";
 import { configureGui } from "point_of_sale.Gui";
 import { useBus } from "@web/core/utils/hooks";
-const { Component } = owl;
 import { registry } from "@web/core/registry";
 
+const { Component, debounce, onMounted, useRef, xml } = owl;
+
 function setupResponsivePlugin(env) {
     const isMobile = () => window.innerWidth <= 768;
     env.isMobile = isMobile();
-    const updateEnv = owl.utils.debounce(() => {
+    const updateEnv = debounce(() => {
         if (env.isMobile !== isMobile()) {
             env.isMobile = !env.isMobile;
             env.qweb.forceUpdate();
@@ -26,12 +27,12 @@ export class ChromeAdapter extends Component {
         this.PosChrome = Registries.Component.get(Chrome);
         this.legacyActionManager = useService("legacy_action_manager");
 
-        this.env = owl.Component.env;
+        this.env = Component.env;
         useBus(this.env.qweb, "update", () => this.render());
         setupResponsivePlugin(this.env);
 
-        const chrome = owl.hooks.useRef("chrome");
-        owl.hooks.onMounted(async () => {
+        const chrome = useRef("chrome");
+        onMounted(async () => {
             // Add the pos error handler when the chrome component is available.
             registry.category('error_handlers').add(
                 'posErrorHandler',
@@ -52,4 +53,4 @@ export class ChromeAdapter extends Component {
         });
     }
 }
-ChromeAdapter.template = owl.tags.xml`<PosChrome t-ref="chrome" webClient="legacyActionManager"/>`;
+ChromeAdapter.template = xml`<PosChrome t-ref="chrome" webClient="legacyActionManager"/>`;

addons/point_of_sale/static/src/js/custom_hooks.js

@@ -1,8 +1,7 @@
 odoo.define('point_of_sale.custom_hooks', function (require) {
     'use strict';
 
-    const { Component } = owl;
-    const { onMounted, onPatched, onWillUnmount } = owl.hooks;
+    const { Component, onMounted, onPatched, onWillUnmount } = owl;
 
     /**
      * Introduce error handlers in the component.