mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00

Files

T

Samuel Degueldre df59ec49ae [FIX] t-call-context: make this unavailable in rendering context

t-call-context is a feature that's supposed to mask the rendering
context completely, but currently the component remains available
through `this`.

This commit stops treating `this` as a reserved word, so that it's
compiled to a lookup in the rendering context, and adds `this` to the
rendering context when binding the component's rendering function. With
these changes, `this` behaves the same as before when outside a
t-call-context, but when the rendering context is overriden, the
template can no longer access `this`. `this` still represents the
instance of the component inside of the rendering function since it's
needed by owl internally.

A side-effect of this change is that now the rendering context is no
longer the instance of the component by default, but is always an object
with the component in its prototype chain. This was already the case
before in some contexts (eg inside t-foreach, or inside components with
a t-set/t-call anywhere in its template). This can cause issues in rare
cases when a component method was called directly on the rendering
context, as before this change, the method's bound this would be the
component instance (except in a t-foreach, component with a
t-set/t-call, etc), while after this change it is now never the
component instance. When the method only reads on `this` there is no
issue as all the components properties are available on the rendering
contexts, but setting a value on `this` will write on the rendering
context and not the component which is likely a mistake.

While this is a breaking change, simply adding a t-set/t-call to any
template would break components that would be broken by this change,
with this in mind we decided to make this change anyway so that
developers get the error as early as possible in the development cycle
rather than having a seemingly inocuous change break code under them.

2023-01-12 09:38:22 +01:00

learning

[FIX] t-call-context: make this unavailable in rendering context

2023-01-12 09:38:22 +01:00

miscellaneous

[DOC] add explanation on structure of compiled template

2022-03-01 15:46:09 +01:00

reference

[FIX] t-call-context: make this unavailable in rendering context

2023-01-12 09:38:22 +01:00

readme.md

[IMP] misc: export the validate function

2022-05-24 13:52:42 +02:00

readme.md

🦉 Owl overview 🦉

Here is a list of everything exported by the Owl library:

Main entities:

App: represent an Owl application (mainly a root component,a set of templates, and a config)
Component: the main class to define a concrete Owl component
mount: main entry point for most application: mount a component to a target
xml: helper to define an inline template

Reactivity

useState: create a reactive object (hook, linked to a specific component)
reactive: create a reactive object (not linked to any component)
markRaw: mark an object or array so that it is ignored by the reactivity system
toRaw: given a reactive objet, return the raw (non reactive) underlying object

Lifecycle hooks:

onWillStart: hook to define asynchronous code that should be executed before component is rendered
onMounted: hook to define code that should be executed when component is mounted
onWillPatch: hook to define code that should be executed before component is patched
onWillUpdateProps: hook to define code that should be executed before component is updated
onPatched: hook to define code that should be executed when component is patched
onWillRender: hook to define code that should be executed before component is rendered
onRendered: hook to define code that should be executed after component is rendered
onWillUnmount: hook to define code that should be executed before component is unmounted
onWillDestroy: hook to define code that should be executed before component is destroyed
onError: hook to define a Owl error handler

Other hooks:

useComponent: return a reference to the current component (useful to create derived hooks)
useEffect: define an effect with its dependencies
useEnv: return a reference to the current env
useExternalListener: add a listener outside of a component DOM
useRef: get an object representing a reference (t-ref)
useChildSubEnv: extend the current env with additional information (for child components)
useSubEnv: extend the current env with additional information (for current component and child components)

Utility/helpers:

EventBus: a simple event bus
loadFile: an helper to load a file from the server
markup: utility function to define strings that represent html (should not be escaped)
status: utility function to get the status of a component (new, mounted or destroyed)
validate: validates if an object satisfies a specified schema
whenReady: utility function to execute code when DOM is ready