[REL] bump to v0.15.0

Closes #95

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /dist
+
 npm-debug.log
 
 # misc
@@ -14,4 +15,12 @@ yarn-debug.log*
 yarn-error.log*
 
 package-lock.json
-.vscode
+
+#ide's
+.vscode
+.idea
+
+node_modules
+
+# Extras temp file
+/tools/owl.js

.jshintrc

@@ -0,0 +1,3 @@
+{
+  "esversion": 9
+}

LICENSE

@@ -0,0 +1,856 @@
+OWL is published under the GNU LESSER GENERAL PUBLIC LICENSE, Version 3
+(LGPLv3), as included below. Since the LGPL is a set of additional
+permissions on top of the GPL, the text of the GPL is included at the
+bottom as well.
+
+Some external libraries and contributions bundled with OWL may be published
+under other GPL-compatible licenses. For these, please refer to the relevant
+source files and/or license files, in the source code tree.
+
+**************************************************************************
+
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.
+
+**************************************************************************
+
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<http://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.
+
+
+**************************************************************************

README.md

@@ -0,0 +1,95 @@
+<h1 align="center">🦉 <a href="https://odoo.github.io/owl/">Odoo Web Library</a> 🦉</h1>
+
+_A web framework for structured, dynamic and maintainable applications_
+
+## Project Overview
+
+The Odoo Web Library (OWL) is a small
+UI framework intended to be the basis for the [Odoo](https://www.odoo.com/) Web Client, and hopefully many
+other Odoo related projects. OWL's main feature is a _declarative component system_, with QWeb as a template engine, asynchronous rendering, and an underlying virtual dom.
+
+**Try it online!** An online playground is available at [https://odoo.github.io/owl/playground](https://odoo.github.io/owl/playground) to let you experiment with the OWL framework.
+
+## OWL's Design Principles
+
+OWL is designed to be used in highly dynamic applications where changing
+requirements are common, code needs to be maintained by large teams.
+
+- **XML based**: templates are based on the XML format, which allows interesting
+  applications. For example, they could be stored in a database and modified
+  dynamically with `xpaths`.
+- **templates compilation in the browser**: this may not be a good fit for all
+  applications, but if you need to generate dynamically user interfaces in the
+  browser, this is very powerful. For example, a generic form view component
+  could generate a specific form user interface for each various models, from a XML view.
+- **no toolchain required**: this is extremely useful for some applications, if,
+  for various reasons (security/deployment/dynamic modules/specific assets tools),
+  it is not ok to use standard web tools based on `npm`.
+
+Owl is not designed to be fast or small (even though it is quite good on those
+two topics). If you are interested in a comparison with React or Vue, you will
+find some more information [here](doc/comparison.md).
+
+## Example
+
+Here is a short example to illustrate interactive widgets:
+
+```xml
+<templates>
+  <button t-name="Counter" t-on-click="increment">
+    Click Me! [<t t-esc="state.value"/>]
+  </button>
+</templates>
+```
+
+```javascript
+class Counter extends owl.Component {
+  state = { value: 0 };
+
+  increment() {
+    this.state.value++;
+  }
+}
+
+const qweb = new owl.QWeb(TEMPLATES);
+const counter = new Counter({ qweb });
+counter.mount(document.body);
+```
+
+Note that we assume here that the xml templates are available in the `TEMPLATES`
+string. More interesting examples can be found on the
+[playground](https://odoo.github.io/owl/playground) application.
+
+## Installing/Building
+
+If you want to use a simple `<script>` tag, the last release can be downloaded here:
+
+- [owl-0.15.0.js](https://github.com/odoo/owl/releases/download/v0.15.0/owl.js)
+- [owl-0.15.0.min.js](https://github.com/odoo/owl/releases/download/v0.15.0/owl.min.js)
+
+Some npm scripts are available:
+
+| Command               | Description                                                                  |
+| --------------------- | ---------------------------------------------------------------------------- |
+| `npm install`         | install every dependency required for this project                           |
+| `npm run build`       | build a bundle of _owl_ in the _/dist/_ folder                               |
+| `npm run minify`      | minify the prebuilt owl.js file                                              |
+| `npm run test`        | run all tests                                                                |
+| `npm run test:watch`  | run all tests, and keep a watcher                                            |
+| `npm run tools`       | build tools applications, start a static server (see [here](doc/tooling.md)) |
+| `npm run tools:watch` | same as `tools`, but with a watcher to rebuild owl                           |
+
+## Documentation
+
+The complete documentation can be found [here](doc/readme.md). The most important sections are:
+
+- [Quick Start](doc/quick_start.md)
+- [Component](doc/component.md)
+- [QWeb](doc/qweb.md)
+
+Found an issue in the documentation? A broken link? Some outdated information?
+Submit a PR!
+
+## License
+
+OWL is [GPL licensed](./LICENSE).

assets/highlight.tomorrow.css

@@ -1,72 +0,0 @@
-/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
-
-/* Tomorrow Comment */
-.hljs-comment,
-.hljs-quote {
-  color: #8e908c;
-}
-
-/* Tomorrow Red */
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag,
-.hljs-name,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-regexp,
-.hljs-deletion {
-  color: #c82829;
-}
-
-/* Tomorrow Orange */
-.hljs-number,
-.hljs-built_in,
-.hljs-builtin-name,
-.hljs-literal,
-.hljs-type,
-.hljs-params,
-.hljs-meta,
-.hljs-link {
-  color: #f5871f;
-}
-
-/* Tomorrow Yellow */
-.hljs-attribute {
-  color: #eab700;
-}
-
-/* Tomorrow Green */
-.hljs-string,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition {
-  color: #718c00;
-}
-
-/* Tomorrow Blue */
-.hljs-title,
-.hljs-section {
-  color: #4271ae;
-}
-
-/* Tomorrow Purple */
-.hljs-keyword,
-.hljs-selector-tag {
-  color: #8959a8;
-}
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  background: white;
-  color: #4d4d4c;
-  padding: 0.5em;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}

assets/main.css

@@ -1,116 +0,0 @@
-html, body {
-  background-color: #fefefe;
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  height: 100%;
-  margin: 0;
-  text-rendering: optimizeLegibility;
-}
-
-body {
-  display: grid;
-  grid-gap: 3rem;
-  grid-template-areas: "header" "nav" "main" "footer";
-  grid-template-columns: 1fr;
-  height: 100%;
-  grid-template-rows: 1fr 3rem 1fr 3rem;
-}
-
-@media screen and (max-width: 800px) {
-  body {
-    grid-template-rows: 1fr 3rem 1fr 5rem;
-  }
-}
-
-a {
-  color: #00A09D;
-  text-decoration: none;
-}
-
-a:hover, a:active, a:visited {
-  text-decoration: underline;
-}
-
-header {
-  grid-area: header;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: flex-end;
-  text-align: center;
-  padding-top: 3rem !important;
-}
-
-hgroup > p {
-  margin-bottom: auto;
-}
-
-nav {
-  grid-area: nav;
-}
-
-main {
-  grid-area: main;
-  /*justify-self: center;*/
-  grid-column: 1 / -1;
-  /*max-width: 80rem !important;*/
-  /*margin: 3rem 0;*/
-}
-
-footer {
-  grid-area: footer;
-  padding-bottom: 3rem !important;
-}
-
-header, nav, footer {
-  text-align: center;
-}
-
-article {
-  padding: 3rem 0;
-}
-
-article h3 {
-  font-size: 2rem;
-  font-weight: 700;
-}
-
-article.brand {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-}
-
-article.design {
-  background-color: #875A7B;
-  color: #f0eeee;
-}
-
-header .homepage-logo {
-  margin-bottom: 2rem;
-}
-
-@media (min-width: 40rem) {
-  .row {
-    flex-direction: column;
-    margin-left: initial;
-    width: 100%;
-  }
-
-  .row .column {
-    margin-bottom: initial;
-    padding: initial;
-  }
-}
-@media (min-width: 60rem) {
-  .row {
-    flex-direction: row;
-    margin-left: -1.0rem;
-    width: calc(100% + 2.0rem);
-  }
-  .row .column {
-    margin-bottom: inherit;
-    padding: 0 1.0rem;
-  }
-}

assets/milligram.css

@@ -1,602 +0,0 @@
-/*!
- * Milligram v1.3.0
- * https://milligram.github.io
- *
- * Copyright (c) 2017 CJ Patoilo
- * Licensed under the MIT license
- */
-
-*,
-*:after,
-*:before {
-  box-sizing: inherit;
-}
-
-html {
-  box-sizing: border-box;
-  font-size: 62.5%;
-}
-
-body {
-  color: #606c76;
-  font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-  font-size: 1.6em;
-  font-weight: 300;
-  letter-spacing: .01em;
-  line-height: 1.6;
-}
-
-blockquote {
-  border-left: 0.3rem solid #d1d1d1;
-  margin-left: 0;
-  margin-right: 0;
-  padding: 1rem 1.5rem;
-}
-
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-
-.button,
-button,
-input[type='button'],
-input[type='reset'],
-input[type='submit'] {
-  background-color: #9b4dca;
-  border: 0.1rem solid #9b4dca;
-  border-radius: .4rem;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-size: 1.1rem;
-  font-weight: 700;
-  height: 3.8rem;
-  letter-spacing: .1rem;
-  line-height: 3.8rem;
-  padding: 0 3.0rem;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.button:focus, .button:hover,
-button:focus,
-button:hover,
-input[type='button']:focus,
-input[type='button']:hover,
-input[type='reset']:focus,
-input[type='reset']:hover,
-input[type='submit']:focus,
-input[type='submit']:hover {
-  background-color: #606c76;
-  border-color: #606c76;
-  color: #fff;
-  outline: 0;
-}
-
-.button[disabled],
-button[disabled],
-input[type='button'][disabled],
-input[type='reset'][disabled],
-input[type='submit'][disabled] {
-  cursor: default;
-  opacity: .5;
-}
-
-.button[disabled]:focus, .button[disabled]:hover,
-button[disabled]:focus,
-button[disabled]:hover,
-input[type='button'][disabled]:focus,
-input[type='button'][disabled]:hover,
-input[type='reset'][disabled]:focus,
-input[type='reset'][disabled]:hover,
-input[type='submit'][disabled]:focus,
-input[type='submit'][disabled]:hover {
-  background-color: #9b4dca;
-  border-color: #9b4dca;
-}
-
-.button.button-outline,
-button.button-outline,
-input[type='button'].button-outline,
-input[type='reset'].button-outline,
-input[type='submit'].button-outline {
-  background-color: transparent;
-  color: #9b4dca;
-}
-
-.button.button-outline:focus, .button.button-outline:hover,
-button.button-outline:focus,
-button.button-outline:hover,
-input[type='button'].button-outline:focus,
-input[type='button'].button-outline:hover,
-input[type='reset'].button-outline:focus,
-input[type='reset'].button-outline:hover,
-input[type='submit'].button-outline:focus,
-input[type='submit'].button-outline:hover {
-  background-color: transparent;
-  border-color: #606c76;
-  color: #606c76;
-}
-
-.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
-button.button-outline[disabled]:focus,
-button.button-outline[disabled]:hover,
-input[type='button'].button-outline[disabled]:focus,
-input[type='button'].button-outline[disabled]:hover,
-input[type='reset'].button-outline[disabled]:focus,
-input[type='reset'].button-outline[disabled]:hover,
-input[type='submit'].button-outline[disabled]:focus,
-input[type='submit'].button-outline[disabled]:hover {
-  border-color: inherit;
-  color: #9b4dca;
-}
-
-.button.button-clear,
-button.button-clear,
-input[type='button'].button-clear,
-input[type='reset'].button-clear,
-input[type='submit'].button-clear {
-  background-color: transparent;
-  border-color: transparent;
-  color: #9b4dca;
-}
-
-.button.button-clear:focus, .button.button-clear:hover,
-button.button-clear:focus,
-button.button-clear:hover,
-input[type='button'].button-clear:focus,
-input[type='button'].button-clear:hover,
-input[type='reset'].button-clear:focus,
-input[type='reset'].button-clear:hover,
-input[type='submit'].button-clear:focus,
-input[type='submit'].button-clear:hover {
-  background-color: transparent;
-  border-color: transparent;
-  color: #606c76;
-}
-
-.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
-button.button-clear[disabled]:focus,
-button.button-clear[disabled]:hover,
-input[type='button'].button-clear[disabled]:focus,
-input[type='button'].button-clear[disabled]:hover,
-input[type='reset'].button-clear[disabled]:focus,
-input[type='reset'].button-clear[disabled]:hover,
-input[type='submit'].button-clear[disabled]:focus,
-input[type='submit'].button-clear[disabled]:hover {
-  color: #9b4dca;
-}
-
-code {
-  background: #f4f5f6;
-  border-radius: .4rem;
-  font-size: 86%;
-  margin: 0 .2rem;
-  padding: .2rem .5rem;
-  white-space: nowrap;
-}
-
-pre {
-  background: #f4f5f6;
-  border-left: 0.3rem solid #9b4dca;
-  overflow-y: hidden;
-}
-
-pre > code {
-  border-radius: 0;
-  display: block;
-  padding: 1rem 1.5rem;
-  white-space: pre;
-}
-
-hr {
-  border: 0;
-  border-top: 0.1rem solid #f4f5f6;
-  margin: 3.0rem 0;
-}
-
-input[type='email'],
-input[type='number'],
-input[type='password'],
-input[type='search'],
-input[type='tel'],
-input[type='text'],
-input[type='url'],
-textarea,
-select {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: transparent;
-  border: 0.1rem solid #d1d1d1;
-  border-radius: .4rem;
-  box-shadow: none;
-  box-sizing: inherit;
-  height: 3.8rem;
-  padding: .6rem 1.0rem;
-  width: 100%;
-}
-
-input[type='email']:focus,
-input[type='number']:focus,
-input[type='password']:focus,
-input[type='search']:focus,
-input[type='tel']:focus,
-input[type='text']:focus,
-input[type='url']:focus,
-textarea:focus,
-select:focus {
-  border-color: #9b4dca;
-  outline: 0;
-}
-
-select {
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
-  padding-right: 3.0rem;
-}
-
-select:focus {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
-}
-
-textarea {
-  min-height: 6.5rem;
-}
-
-label,
-legend {
-  display: block;
-  font-size: 1.6rem;
-  font-weight: 700;
-  margin-bottom: .5rem;
-}
-
-fieldset {
-  border-width: 0;
-  padding: 0;
-}
-
-input[type='checkbox'],
-input[type='radio'] {
-  display: inline;
-}
-
-.label-inline {
-  display: inline-block;
-  font-weight: normal;
-  margin-left: .5rem;
-}
-
-.container {
-  margin: 0 auto;
-  max-width: 112.0rem;
-  padding: 0 2.0rem;
-  position: relative;
-  width: 100%;
-}
-
-.row {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  width: 100%;
-}
-
-.row.row-no-padding {
-  padding: 0;
-}
-
-.row.row-no-padding > .column {
-  padding: 0;
-}
-
-.row.row-wrap {
-  flex-wrap: wrap;
-}
-
-.row.row-top {
-  align-items: flex-start;
-}
-
-.row.row-bottom {
-  align-items: flex-end;
-}
-
-.row.row-center {
-  align-items: center;
-}
-
-.row.row-stretch {
-  align-items: stretch;
-}
-
-.row.row-baseline {
-  align-items: baseline;
-}
-
-.row .column {
-  display: block;
-  flex: 1 1 auto;
-  margin-left: 0;
-  max-width: 100%;
-  width: 100%;
-}
-
-.row .column.column-offset-10 {
-  margin-left: 10%;
-}
-
-.row .column.column-offset-20 {
-  margin-left: 20%;
-}
-
-.row .column.column-offset-25 {
-  margin-left: 25%;
-}
-
-.row .column.column-offset-33, .row .column.column-offset-34 {
-  margin-left: 33.3333%;
-}
-
-.row .column.column-offset-50 {
-  margin-left: 50%;
-}
-
-.row .column.column-offset-66, .row .column.column-offset-67 {
-  margin-left: 66.6666%;
-}
-
-.row .column.column-offset-75 {
-  margin-left: 75%;
-}
-
-.row .column.column-offset-80 {
-  margin-left: 80%;
-}
-
-.row .column.column-offset-90 {
-  margin-left: 90%;
-}
-
-.row .column.column-10 {
-  flex: 0 0 10%;
-  max-width: 10%;
-}
-
-.row .column.column-20 {
-  flex: 0 0 20%;
-  max-width: 20%;
-}
-
-.row .column.column-25 {
-  flex: 0 0 25%;
-  max-width: 25%;
-}
-
-.row .column.column-33, .row .column.column-34 {
-  flex: 0 0 33.3333%;
-  max-width: 33.3333%;
-}
-
-.row .column.column-40 {
-  flex: 0 0 40%;
-  max-width: 40%;
-}
-
-.row .column.column-50 {
-  flex: 0 0 50%;
-  max-width: 50%;
-}
-
-.row .column.column-60 {
-  flex: 0 0 60%;
-  max-width: 60%;
-}
-
-.row .column.column-66, .row .column.column-67 {
-  flex: 0 0 66.6666%;
-  max-width: 66.6666%;
-}
-
-.row .column.column-75 {
-  flex: 0 0 75%;
-  max-width: 75%;
-}
-
-.row .column.column-80 {
-  flex: 0 0 80%;
-  max-width: 80%;
-}
-
-.row .column.column-90 {
-  flex: 0 0 90%;
-  max-width: 90%;
-}
-
-.row .column .column-top {
-  align-self: flex-start;
-}
-
-.row .column .column-bottom {
-  align-self: flex-end;
-}
-
-.row .column .column-center {
-  -ms-grid-row-align: center;
-      align-self: center;
-}
-
-@media (min-width: 40rem) {
-  .row {
-    flex-direction: row;
-    margin-left: -1.0rem;
-    width: calc(100% + 2.0rem);
-  }
-  .row .column {
-    margin-bottom: inherit;
-    padding: 0 1.0rem;
-  }
-}
-
-a {
-  color: #9b4dca;
-  text-decoration: none;
-}
-
-a:focus, a:hover {
-  color: #606c76;
-}
-
-dl,
-ol,
-ul {
-  list-style: none;
-  margin-top: 0;
-  padding-left: 0;
-}
-
-dl dl,
-dl ol,
-dl ul,
-ol dl,
-ol ol,
-ol ul,
-ul dl,
-ul ol,
-ul ul {
-  font-size: 90%;
-  margin: 1.5rem 0 1.5rem 3.0rem;
-}
-
-ol {
-  list-style: decimal inside;
-}
-
-ul {
-  list-style: circle inside;
-}
-
-.button,
-button,
-dd,
-dt,
-li {
-  margin-bottom: 1.0rem;
-}
-
-fieldset,
-input,
-select,
-textarea {
-  margin-bottom: 1.5rem;
-}
-
-blockquote,
-dl,
-figure,
-form,
-ol,
-p,
-pre,
-table,
-ul {
-  margin-bottom: 2.5rem;
-}
-
-table {
-  border-spacing: 0;
-  width: 100%;
-}
-
-td,
-th {
-  border-bottom: 0.1rem solid #e1e1e1;
-  padding: 1.2rem 1.5rem;
-  text-align: left;
-}
-
-td:first-child,
-th:first-child {
-  padding-left: 0;
-}
-
-td:last-child,
-th:last-child {
-  padding-right: 0;
-}
-
-b,
-strong {
-  font-weight: bold;
-}
-
-p {
-  margin-top: 0;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 300;
-  letter-spacing: -.1rem;
-  margin-bottom: 2.0rem;
-  margin-top: 0;
-}
-
-h1 {
-  font-size: 4.6rem;
-  line-height: 1.2;
-}
-
-h2 {
-  font-size: 3.6rem;
-  line-height: 1.25;
-}
-
-h3 {
-  font-size: 2.8rem;
-  line-height: 1.3;
-}
-
-h4 {
-  font-size: 2.2rem;
-  letter-spacing: -.08rem;
-  line-height: 1.35;
-}
-
-h5 {
-  font-size: 1.8rem;
-  letter-spacing: -.05rem;
-  line-height: 1.5;
-}
-
-h6 {
-  font-size: 1.6rem;
-  letter-spacing: 0;
-  line-height: 1.4;
-}
-
-img {
-  max-width: 100%;
-}
-
-.clearfix:after {
-  clear: both;
-  content: ' ';
-  display: table;
-}
-
-.float-left {
-  float: left;
-}
-
-.float-right {
-  float: right;
-}
-
-/*# sourceMappingURL=milligram.css.map */

assets/normalize.css

@@ -1,349 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}

doc/animations.md

@@ -0,0 +1,96 @@
+# 🦉 Animations 🦉
+
+Animation is a complex topic. There are many different use cases, and many
+solutions and technologies. Owl only supports some basic use cases.
+
+## Simple CSS effects
+
+Sometimes, using pure CSS is enough. For these use cases, Owl is not really
+necessary: it just needs to render a DOM element with a specific class. For
+example:
+
+```xml
+<a class="btn flash" t-on-click="doSomething">Click</a>
+```
+
+with the following CSS:
+
+```css
+btn {
+  background-color: gray;
+}
+
+.flash {
+  transition: background 0.5s;
+}
+
+.flash:active {
+  background-color: #41454a;
+  transition: background 0s;
+}
+```
+
+will produce a nice flash effect whenever the user click (or activate with the
+keyboard) the button.
+
+## CSS Transitions
+
+A more complex situation occurs when we want to transition an element in or out
+of the page. For example, we may want a fade-in and fade-out effect.
+
+The `t-transition` directive is here to help us. It works on html elements and
+on components, by adding and removing some css classes.
+
+To perform useful transition effects, whenever an element appears or disappears,
+it is necessary to add/remove some css style or class at some precise moment in
+the lifetime of a node. Since this is not easy to do by hand, Owl `t-transition`
+directive is there to help.
+
+Whenever a node has a `t-transition` directive, with a `name` value, the following
+will happen:
+
+At node insertion:
+
+- the css classes `name-enter` and `name-enter-active` will be added directly
+  when the node is inserted into the DOM,
+- on the next animation frame: the css class `name-enter` will be removed and the
+  class `name-enter-to` will be added (so they can be used to trigger css
+  transition effects),
+- the css class `name-enter-active` will be removed whenever a css transition
+  ends.
+
+At node destruction:
+
+- the css classes `name-leave` and `name-leave-active` will be added before the
+  node is removed to the DOM,
+- the css class `name-leave` will be removed on the next animation frame (so it
+  can be used to trigger css transition effects),
+- the css class `name-leave-active` will be removed whenever a css transition
+  ends. Only then will the element be removed from the DOM.
+
+For example, a simple fade in/out effect can be done with this:
+
+```xml
+<div>
+    <div t-if="state.flag" class="square" t-transition="fade">Hello</div>
+</div>
+```
+
+```css
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+```
+
+The `t-transition` directive can be combined with `t-widget`.
+
+Notes:
+
+- more information on animations are available [here](animations.md).
+- Owl does not support more than one transition on a single node, so the
+  `t-transition` expression must be a single value (i.e. no space allowed)

doc/comparison.md

@@ -0,0 +1,196 @@
+# Comparison with Vue/React
+
+OWL, React and Vue have the same main feature: they allow developers to build
+declarative user interfaces. To do that, all these frameworks uses a virtual dom. However, there are still obviously many differences.
+
+In this page, we try to highlight some of these differences. Obviously, some
+effort was done to be fair. However, if you disagree with some of the points
+discussed, feel free to open an issue/submit a PR to correct this text.
+
+## Content
+
+- [Size](#size)
+- [Tooling/Build Step](#toolingbuild-step)
+- [Templating](#templating)
+- [Asynchronous rendering](#asynchronous-rendering)
+- [Reactiveness](#reactiveness)
+- [State Management](#state-management)
+
+## Size
+
+OWL is intended to be small and to work at a slightly lower level of abstraction
+than React and Vue. Also, jQuery is not the same kind of framework, but it is interesting to compare.
+
+| Framework                | Size (minified) | Size (minified, gzipped) |
+| ------------------------ | --------------- | ------------------------ |
+| OWL                      | 32kb            | 11kb                     |
+| Vue + VueX               |                 | 30kb                     |
+| React + ReactDOM + Redux |                 | 40kb                     |
+| jQuery                   | 86kb            | 30kb                     |
+
+## Tooling/Build step
+
+OWL is designed to be easy to use in a standalone way. For various reasons,
+Odoo does not want to rely on standard web tools (such as webpack), and OWL can
+be used by simply adding a script tag to a page.
+
+```html
+<script src="owl.min.js" />
+```
+
+In comparison, React encourages using JSX,
+which necessitate a build step, and most Vue applications uses single file
+components, which also necessitate a build step.
+
+On the flipside, external tooling may make it harder to use in some case, but it
+also brings a lot of benefits. And React/Vue have both a large ecosystem.
+
+### Templating
+
+OWL uses its own QWeb engine, which compiles templates on the
+frontend, as they are needed. This is extremely convenient for our use case, in
+particular because templates are described in XML files, and can be modified by
+XPaths. Since Odoo is at its heart a modular application, this is an important
+feature for us.
+
+```xml
+<div>
+  <button t-on-click="increment">Click Me! [<t t-esc="state.value"/>]</button>
+</div>
+```
+
+Vue is actually kind of similar. Its template language is kind of close to QWeb,
+with the `v` replaced by the `t`. However, it is also more fully featured. For
+example, Vue templates have slots, or event modifiers. A large difference is that
+most Vue applications will need to be built ahead of time, to compile the templates
+into javascript functions. Note that Vue has a separate build which includes the
+template compiler.
+
+In contrast, most React applications do not use a templating language, but write
+some JSX code, which is precompiled into plain JavaScript by a build step.
+
+```jsx
+class Clock extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Hello, world!</h1>
+        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
+      </div>
+    );
+  }
+}
+```
+
+This has the advantage of having the full power of Javascript, but is less
+structured than a template language. Note that the tooling is quite impressive:
+there is a syntax highlighter for jsx here on github!
+
+## Asynchronous Rendering
+
+This is actually a big difference between OWL and React/Vue: components in OWL
+are totally asynchronous. They have two asynchronous hooks in their lifecycle:
+
+- `willStart` (before the widget starts rendering)
+- `willUpdateProps` (before new props are set)
+
+Both these methods can be implemented and return a promise. The rendering will
+then wait for these promises to be completed before patching the DOM. This is
+useful for some use cases: for example, a widget may want to fetch an external
+library (a calendar widget may need a specialized calendar rendering library),
+in its willStart hook.
+
+```javascript
+class MyCalendarWidget extends owl.Component {
+    ...
+
+    willStart() {
+        return utils.lazyLoad('static/libs/fullcalendar/fullcalendar.js');
+    }
+    ...
+}
+```
+
+This may be dangerous (to stop the rendering waiting for the network), but it is
+extremely powerful as well, as demonstrated by the Odoo Web Client.
+
+Lazy loading static libraries can obviously be done with React/Vue, but it is
+more convoluted.
+
+## Reactiveness
+
+React has a simple model: whenever the state changes, it is
+replaced with a new state (via the setState method). Then, the DOM is patched.
+This is simple, efficient, and a little bit awkward to write.
+
+Vue is a little bit different: it replace magically the properties in the state
+by getters/setters. With that, it can notify components whenever the state that
+they read was changed.
+
+Owl is closer to vue: it also tracks magically the state properties, but it does
+only increment a counter whenever it changes (and a _deep_ counter for each of
+its parents). This assumes that the state is actually a tree.
+
+## State Management
+
+Managing the state of an application is a tricky issue. Many solutions have
+been proposed these last few years. It also depends on the kind of application we
+are talking about. A small application may not need much more than a simple
+object to contain its state.
+
+However, there are some common solutions for React and Vue: redux and vuex.
+Both of them are a centralized store that own the state, and they dictate how
+the state can be mutated.
+
+**Redux**
+
+In Redux, the state is mutated by reducers. Reducers are functions
+that modify the state by returning a different object:
+
+```javascript
+  ...
+  switch (action.type) {
+    case ADD_TODO: {
+      const { id, content } = action.payload;
+      return {
+        ...state,
+        allIds: [...state.allIds, id],
+        byIds: {
+          ...state.byIds,
+          [id]: {
+            content,
+            completed: false
+          }
+        }
+      };
+    }
+```
+
+This is a little bit awkward to write, but this allows the component system to
+check if a part of the state was changed. This is exactly what is done by the
+`connect` function: it create a _connected_ component, which is subscribed to
+the state and triggers a rerender if some part of the state was modified.
+
+**VueX**
+
+VueX is based on a different principle: the state is mutated through
+some special functions (the mutations), which modify the state in place:
+
+```javascript
+    function ({state}, payload) {
+        const { id, content } = payload;
+        const message = {id, content, completed: false};
+        state.messages.push(message)
+    }
+```
+
+This is simpler, but there is a little bit more happening behind the scene:
+each key from the state is silently replaced by getters and setters, and VueX
+keeps track of who get data, and retrigger a render when it was changed.
+
+**Owl**
+
+Owl store is a little bit like a mix of redux and vuex: it has mutations and
+actions, like VueX, it keeps track of the state changes, but it does not notify
+a component when the state changes. Instead, components need to connect to the
+store like in redux, with a function that will listen to the relevant state.

doc/component.md

@@ -0,0 +1,985 @@
+# 🦉 OWL Component 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Example](#example)
+- [Root Widget And Environment](#root-widget-and-environment)
+- [Reference](#reference)
+  - [Properties](#properties)
+  - [Static Properties](#static-properties)
+  - [Methods](#methods)
+  - [Lifecycle](#lifecycle)
+  - [Composition](#composition)
+  - [Event Handling](#event-handling)
+  - [Form Input Bindings](#form-input-bindings)
+  - [`t-key` Directive](#t-key-directive)
+  - [`t-mounted` Directive](#t-mounted-directive)
+  - [Semantics](#semantics)
+  - [Props Validation](#props-validation)
+  - [References](#references)
+  - [Slots](#slots)
+  - [Asynchronous Rendering](#asynchronous-rendering)
+
+## Overview
+
+OWL components are the building blocks for user interface. They are designed to be:
+
+1. **declarative:** the user interface should be described in term of the state
+   of the application, not as a sequence of imperative steps.
+
+2. **composable:** each widget can seamlessly be created in a parent widget by
+   a simple directive in its template.
+
+3. **asynchronous rendering:** the framework will transparently wait for each
+   subwidgets to be ready before applying the rendering. It uses native promises
+   under the hood.
+
+4. **uses QWeb as a template system:** the templates are described in XML
+   and follow the QWeb specification. This is a requirement for Odoo.
+
+OWL components are defined as a subclass of Component. The rendering is
+exclusively done by a [QWeb](qweb.md) template (which needs to be preloaded in QWeb).
+Rendering a component generates a virtual dom representation
+of the widget, which is then patched to the DOM, in order to apply the changes in an efficient way.
+
+OWL components observe their states, and rerender themselves whenever it is
+changed. This is done by an [observer](observer.md).
+
+## Example
+
+Let us have a look at a simple component:
+
+```javascript
+class ClickCounter extends owl.Component {
+  state = { value: 0 };
+
+  increment() {
+    this.state.value++;
+  }
+}
+```
+
+```xml
+<button t-name="ClickCounter" t-on-click="increment">
+  Click Me! [<t t-esc="state.value"/>]
+</button>
+```
+
+Note that this code is written in ESNext style, so it will only run on the
+latest browsers without a transpilation step.
+
+This example show how a component should be defined: it simply subclasses the
+Component class. If no `template` key is defined, then
+Owl will use the component's name as template name. Here,
+a state object is defined. It is not mandatory to use the state object, but it
+is certainly encouraged. The state object is [observed](observer.md), and any
+change to it will cause a rerendering.
+
+## Root Widget And Environment
+
+Most of the time, Owl widget will be created automatically by the `t-widget`
+directive in a template. There is however an obvious exception: the root widget
+of an Owl application has to be created manually:
+
+```js
+class App extends owl.Component { ... }
+
+const qweb = new owl.QWeb(TEMPLATES);
+const env = { qweb: qweb };
+const app = new App(env);
+app.mount(document.body);
+```
+
+The root widget needs an environment. In Owl, an environment is an object with
+a `qweb` key, which has to be a [QWeb](qweb.md) instance. This qweb instance will
+be used to render everything.
+
+The environment will be given to each child, unchanged, in the `env` property.
+This can be very useful to share common information/methods. For example, all
+rpcs can be made through a `rpc` method in the environment. This makes it very
+easy to test a component.
+
+## Reference
+
+An Owl component is a small class which represent a widget or some UI element.
+It exists in the context of an environment (`env`), which is propagated from a
+parent to its children. The environment needs to have a QWeb instance, which
+will be used to render the component template.
+
+Be aware that the name of the component may be significant: if a component does
+not define a `template` key, then Owl will lookup in QWeb to
+find a template with the component name (or one of its ancestor).
+
+### Properties
+
+- **`el`** (HTMLElement | null): reference to the DOM root node of the element. It is `null` when the
+  component is not mounted.
+
+- **`env`** (Object): the component environment, which contains a QWeb instance.
+
+- **`template`** (string, optional): if given, this is the name of the QWeb template that will render
+  the component.
+
+- **`state`** (Object): this is the location of the component's state, if there is
+  any. After the willStart method, the `state` property is observed, and each
+  change will cause the widget to rerender itself.
+
+- **`props`** (Object): this is an object given (in the constructor) by the parent
+  to configure the component. It can be dynamically changed later by the parent,
+  in some case. Note that `props` are owned by the parent, not by the component.
+  As such, it should not ever be modified by the component!!
+
+- **`refs`** (Object): the `refs` object contains all references to sub DOM nodes
+  or sub widgets defined by a `t-ref` directive in the component's template.
+
+### Static Properties
+
+- **`props`** (Object, optional): if given, this is an object that describes the
+  type and shape of the (actual) props given to the component. If Owl mode is
+  `dev`, this will be used to validate the props each time the component is
+  created/updated. See [Props Validation](#props-validation) for more information.
+- **`defaultProps`** (Object, optional): if given, this object define default
+  values for (top-level) props. Whenever `props` are given to the object, they
+  will be altered to add default value (if missing). Note that it does not
+  change the initial object, a new object will be created instead.
+
+### Methods
+
+- **`mount(target)`** (async): this is the main way a component's hierarchy is added to the
+  DOM: the root component is mounted to a target HTMLElement. Obviously, this
+  is asynchronous, since each children need to be created as well. Most applications
+  will need to call `mount` exactly once, on the root component.
+
+- **`unmount()`**: in case a component need to be detached/removed from the DOM, this
+  method can be used. Most applications should not call `unmount`, this is more
+  useful to the underlying component system.
+
+- **`render()`** (async): calling this method directly will cause a rerender. Note
+  that this should be very rare to have to do it manually, the Owl framework is
+  most of the time responsible for doing that at an appropriate moment.
+
+  Note that the render method is asynchronous, so one cannot observe the updated
+  DOM in the same stack frame.
+
+- **`shouldUpdate(nextProps)`**: this method is called each time a component's props
+  are updated. It returns a boolean, which indicates if the widget should
+  ignore a props update. If it returns false, then `willUpdateProps` will not
+  be called, and no rendering will occur. Its default implementation is to
+  always return true. This is an optimization, similar to React's `shouldComponentUpdate`. Most of the time, this should not be used, but it
+  can be useful if we are handling large number of components.
+
+- **`updateEnv(nextEnv)`**: update the environment of a component and all its
+  children. This forces a complete rerender. For example, this could be useful
+  if we have a `isMobile` key in the environment, to decide if we want a mobile
+  interface or a destkop one.
+
+- **`destroy()`**. As its name suggests, this method will remove the component,
+  and perform all necessary cleanup, such as unmounting the component, its children,
+  removing the parent/children relationship. This method should almost never be
+  called directly (except maybe on the root component), but should be done by the
+  framework instead.
+
+### Lifecycle
+
+A solid and robust component system needs useful hooks/methods to help
+developers write components. Here is a complete description of the lifecycle of
+a owl component:
+
+| Method                                           | Description                                           |
+| ------------------------------------------------ | ----------------------------------------------------- |
+| **[constructor](#constructorparent-props)**      | constructor                                           |
+| **[willStart](#willstart)**                      | async, before first rendering                         |
+| **[mounted](#mounted)**                          | just after component is rendered and added to the DOM |
+| **[willUpdateProps](#willupdatepropsnextprops)** | async, before props update                            |
+| **[willPatch](#willpatch)**                      | just before the DOM is patched                        |
+| **[patched](#patchedsnapshot)**                  | just after the DOM is patched                         |
+| **[willUnmount](#willunmount)**                  | just before removing component from DOM               |
+
+Notes:
+
+- hooks call order is precisely defined: `[willX]` hooks are called first on parent,
+  then on children, and `[Xed]` are called in the reverse order: first children,
+  then parent.
+- no hook method should ever be called manually. They are supposed to be
+  called by the owl framework whenever it is required.
+
+#### `constructor(parent, props)`
+
+The constructor is not exactly a hook, it is the regular,
+normal, constructor of the component. Since it is not a hook, you need to make
+sure that `super` is called.
+
+This is usually where you would set the initial state and the template of the
+component.
+
+```javascript
+  constructor(parent, props) {
+    super(parent, props);
+    this.state = {someValue: true};
+    this.template = 'mytemplate';
+  }
+```
+
+Note that with ESNext class fields, the constructor method does not need to be
+implemented in most cases:
+
+```javascript
+class ClickCounter extends owl.Component {
+  state = { value: 0 };
+
+  ...
+}
+```
+
+#### `willStart()`
+
+willStart is an asynchronous hook that can be implemented to
+perform some action before the initial rendering of a component.
+
+It will be called exactly once before the initial rendering. It is useful
+in some cases, for example, to load external assets (such as a JS library)
+before the widget is rendered. Another use case is to load data from a server.
+
+```javascript
+  async willStart() {
+    await owl.utils.loadJS("my-awesome-lib.js");
+  }
+```
+
+At this point, the component is not yet rendered. Note that a slow `willStart` method will slow down the rendering of the user
+interface. Therefore, some care should be made to make this method as
+fast as possible.
+
+The widget rendering will take place after `willStart` is completed.
+
+#### `mounted()`
+
+`mounted` is called each time a component is attached to the
+DOM, after the initial rendering and possibly later if the component was unmounted
+and remounted. At this point, the component is considered _active_. This is a good place to add some listeners, or to interact with the
+DOM, if the component needs to perform some measure for example.
+
+It is the opposite of `willUnmount`. If a component has been mounted, it will
+always be unmounted at some point in the future.
+
+The mounted method will be called recursively on each of its children. First,
+the parent, then all its children.
+
+Note that the state is now observed. It is however allowed (but not encouraged)
+to modify the state in the `mounted` hook. Doing so will cause a rerender,
+which will not be perceptible by the user, but will slightly slow down the
+component.
+
+#### `willUpdateProps(nextProps)`
+
+The willUpdateProps is an asynchronous hook, called just before new props
+are set. This is useful if the component needs some asynchronous task
+performed, depending on the props (for example, assuming that the props are
+some record Id, fetching the record data).
+
+```javascript
+  willUpdateProps(nextProps) {
+    return this.loadData({id: nextProps.id});
+  }
+```
+
+This hook is not called during the first render (but willStart is called
+and performs a similar job).
+
+#### `willPatch()`
+
+The willPatch hook is called just before the DOM patching process starts.
+It is not called on the initial render. This is useful to read some
+information from the DOM. For example, the current position of the
+scrollbar.
+
+Note that modifying the state object is not allowed here. This method is called just
+before an actual DOM patch, and is only intended to be used to save some local
+DOM state. Also, it will not be called if the widget is not in the DOM (this can
+happen with widgets with `t-keepalive`).
+
+The return value of this method will be given as the first argument of the
+corresponding `patched` call.
+
+#### `patched(snapshot)`
+
+This hook is called whenever a component did actually update its DOM (most
+likely via a change in its state/props or environment).
+
+This method is not called on the initial render. It is useful to interact
+with the DOM (for example, through an external library) whenever the
+component was patched. Note that this hook will not be called if the widget is
+not in the DOM (this can happen with widgets with `t-keepalive`).
+
+The `snapshot` parameter is the result of the previous `willPatch` call.
+
+Updating the widget state in this hook is possible, but not encouraged.
+One need to be careful, because updates here will cause rerender, which in
+turn will cause other calls to patched. So, we need to be particularly
+careful at avoiding endless cycles.
+
+#### `willUnmount()`
+
+willUnmount is a hook that is called each time just before a component is unmounted from
+the DOM. This is a good place to remove some listeners, for example.
+
+```javascript
+  mounted() {
+    this.env.bus.on('someevent', this, this.doSomething);
+  }
+  willUnmount() {
+    this.env.bus.off('someevent', this, this.doSomething);
+  }
+```
+
+This is the opposite method of `mounted`.
+
+### Composition
+
+The example above shows a QWeb template with a `t-on-click` directive. Widget
+templates are standard [QWeb](qweb.md) templates, but with an extra directive:
+`t-widget`. With the `t-widget` directive, widget templates can declare sub
+widgets:
+
+```xml
+<div t-name="ParentWidget">
+  <span>some text</span>
+  <t t-widget="MyWidget" info="13"/>
+</div>
+```
+
+```js
+class ParentWidget extends owl.Component {
+    widgets = { MyWidget: MyWidget};
+    ...
+}
+```
+
+In this example, the `ParentWidget`'s template creates a widget `MyWidget` just
+after the span. The `info` key will be added to the subwidget's props. Each
+props is a string which represents a javascript (QWeb) expression, so it is
+dynamic. If it is necessary to give a string, this can be done by quoting it:
+`someString="'somevalue'"`. See the
+[QWeb](qweb.md) documentation for more information on the `t-widget` directive.
+
+Note that the rendering context for the template is the widget itself. This means
+that the template can access `state`, `props`, `env`, or any methods defined in the widget.
+
+The `t-widget` directive is the key to a declarative component
+system. It allows a template to define where and how a sub widget is created
+and/or updated. For example:
+
+```xml
+<div t-name="ParentWidget">
+    <t t-widget="ChildWidget" count="state.val"/>
+</div>
+```
+
+```js
+class ParentWidget {
+  widgets = { ChildWidget };
+  state = { val: 4 };
+}
+```
+
+Whenever the template is rendered, it will automatically create the subwidget
+`ChildWidget` at the correct place. It needs to find the reference to the
+actual component class in the special `widgets` key, or the class registered in
+QWeb's global registry (see `register` function of QWeb). It first looks inside
+the local `widgets` key, then fallbacks on the global registry.
+
+_Props_: In this example, the child widget will receive the object `{count: 4}` in its
+constructor. This will be assigned to the `props` variable, which can be accessed
+on the widget (and also, in the template). Whenever the state is updated, then
+the subwidget will also be updated automatically.
+
+Note that there are some restrictions on prop names: `class`, `style` and any
+string which starts with `t-` are not allowed.
+
+The `t-widget` directive also accepts dynamic values with string interpolation
+(like the [`t-attf-`](qweb.md#dynamic-attributes) directive):
+
+```xml
+<div t-name="ParentWidget">
+    <t t-widget="ChildWidget{{id}}"/>
+</div>
+```
+
+```js
+class ParentWidget {
+  widgets = { ChildWidget1, ChildWidget2 };
+  state = { id: 1 };
+}
+```
+
+**CSS and style:** there is some specific support to allow the parent to declare
+additional css classes or style for the sub widget: css declared in `class`, `style`, `t-att-class` or `t-att-style` will be added to the
+root widget element.
+
+```xml
+<div t-name="ParentWidget">
+  <t t-widget="MyWidget" class="someClass" style="font-weight:bold;" info="13"/>
+</div>
+```
+
+Warning: there is a small caveat with dynamic class attributes: since Owl needs
+to be able to add/remove proper classes whenever necessary, it needs to be aware
+of the possible classes. Otherwise, it will not be able to make the difference
+between a valid css class added by the component, or some custom code, and a
+class that need to be removed. This is why we only support the explicit syntax
+with a class object:
+
+```xml
+<t t-widget="MyWidget" t-att-class="{a: state.flagA, b: state.flagB}" />
+```
+
+### Event Handling
+
+In a component's template, it is useful to be able to register handlers on some
+elements to some specific events. This is what makes a template _alive_. There
+are four different use cases.
+
+1. Register an event handler on a DOM node (_pure_ DOM event)
+2. Register an event handler on a component (_pure_ DOM event)
+3. Register an event handler on a DOM node (_business_ DOM event)
+4. Register an event handler on a component (_business_ DOM event)
+
+A _pure_ DOM event is directly triggered by a user interaction (e.g. a `click`).
+
+```xml
+<button t-on-click="someMethod">Do something</button>
+```
+
+This will be roughly translated in javascript like this:
+
+```js
+button.addEventListener("click", widget.someMethod.bind(widget));
+```
+
+The suffix (`click` in this example) is simply the name of the actual DOM
+event.
+
+A _business_ DOM event is triggered by a call to `trigger` on a component.
+
+```xml
+<t t-widget="MyWidget" t-on-menu-loaded="someMethod"/>
+```
+
+```js
+ class MyWidget {
+     someWhere() {
+         const payload = ...;
+         this.trigger('menu-loaded', payload);
+     }
+ }
+```
+
+The call to `trigger` generates a [_CustomEvent_](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events)
+of type `menu-loaded` and dispatches it on the component's DOM element
+(`this.el`). The event bubbles and is cancelable. The parent widget listening
+to event `menu-loaded` will receive the payload in its `someMethod` handler
+(in the `detail` property of the event), whenever the event is triggered.
+
+```js
+ class ParentWidget {
+     someMethod(ev) {
+         const payload = ev.detail;
+         ...
+     }
+ }
+```
+
+By convention, we use KebabCase for the name of _business_ events.
+
+In order to remove the DOM event details from the event handlers (like calls to
+`event.preventDefault`) and let them focus on data logic, _modifiers_ can be
+specified as additional suffixes of the `t-on` directive.
+
+| Modifier   | Description                                                       |
+| ---------- | ----------------------------------------------------------------- |
+| `.stop`    | calls `event.stopPropagation()` before calling the method         |
+| `.prevent` | calls `event.preventDefault()` before calling the method          |
+| `.self`    | calls the method only if the `event.target` is the element itself |
+
+```xml
+<button t-on-click.stop="someMethod">Do something</button>
+```
+
+Note that modifiers can be combined (ex: `t-on-click.stop.prevent`), and that
+the order may matter. For instance `t-on-click.prevent.self` will prevent all
+clicks while `t-on-click.self.prevent` will only prevent clicks on the element
+itself.
+
+The `t-on` directive also allows to prebind some arguments. For example,
+
+```xml
+<button t-on-click="someMethod(expr)">Do something</button>
+```
+
+Here, `expr` is a valid Owl expression, so it could be `true` or some variable
+from the rendering context.
+
+### Form Input Bindings
+
+It is very common to need to be able to read the value out of an html `input` (or
+`textarea`, or `select`) in order to use it (note: it does not need to be in a
+form!). A possible way to do this is to do it by hand:
+
+```js
+class Form extends owl.Component {
+  state = { text: "" };
+
+  _updateInputValue(event) {
+    this.state.text = event.target.value;
+  }
+}
+```
+
+```xml
+<div>
+  <input t-on-input="_updateInputValue"/>
+  <span t-esc="state.text"/>
+</div>
+```
+
+This works. However, this requires a little bit of _plumbing_ code. Also, the
+plumbing code is slightly different if you need to interact with a checkbox,
+or with radio buttons, or with select tags.
+
+To help with this situation, Owl has a builtin directive `t-model`: its value
+is the (top-level) name in the state object. With the `t-model` directive, we
+can write a shorter code, equivalent to the previous example:
+
+```js
+class Form extends owl.Component {
+  state = { text: "" };
+}
+```
+
+```xml
+<div>
+  <input t-model="text"/>
+  <span t-esc="state.text"/>
+</div>
+```
+
+The `t-model` directive works with `<input>`, `<input type="checkbox">`,
+`<input type="radio">`, `<textarea>` and `<select>`:
+
+```xml
+<div>
+    <div>Text in an input: <input t-model="someVal"/></div>
+    <div>Textarea: <textarea t-model="otherVal"/></div>
+    <div>Boolean value: <input type="checkbox" t-model="someFlag"/></div>
+    <div>Selection:
+        <select t-model="color">
+            <option value="">Select a color</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+        </select>
+    </div>
+    <div>
+        Selection with radio buttons:
+        <span>
+            <input type="radio" name="color" id="red" value="red" t-model="color"/>
+            <label for="red">Red</label>
+        </span>
+        <span>
+            <input type="radio" name="color" id="blue" value="blue" t-model="color"/>
+            <label for="blue">Blue</label>
+        </span>
+    </div>
+</div>
+```
+
+Like event handling, the `t-model` directive accepts some modifiers:
+
+| Modifier  | Description                                                          |
+| --------- | -------------------------------------------------------------------- |
+| `.lazy`   | update the value on the `change` event (default is on `input` event) |
+| `.number` | tries to parse the value to a number (using `parseFloat`)            |
+| `.trim`   | trim the resulting value                                             |
+
+For example:
+
+```xml
+<input t-model.lazy="someVal"/>
+```
+
+These modifiers can be combined. For instance, `t-model.lazy.number` will only
+update a number whenever the change is done.
+
+Note: the online playground has an example to show how it works.
+
+### `t-key` Directive
+
+Even though Owl tries to be as declarative as possible, some DOM state is still
+locked inside the DOM: for example, the scrolling state, the current user selection,
+the focused element or the state of an input. This is why we use a virtual dom
+algorithm to keep the actual DOM node as much as possible. However, this is
+sometimes not enough, and we need to help Owl decide if an element is actually
+the same, or is different. The `t-key` directive is used to give an identity to an element.
+
+There are three main use cases:
+
+- _elements in a list_:
+
+  ```xml
+    <span t-foreach="todos" t-as="todo" t-key="todo.id">
+        <t t-esc="todo.text"/>
+    </span>
+  ```
+
+- _`t-if`/`t-else`_
+
+- _animations_: give a different identity to a component. Ex: thread id with
+  animations on add/remove message.
+
+### `t-mounted` Directive
+
+The `t-mounted` directive allows to register a callback to execute whenever the node
+is inserted into the DOM.
+
+```xml
+<div><input t-ref="someInput" t-mounted="focusMe"/></div>
+```
+
+```js
+class MyWidget extends owl.Component {
+    ...
+    focusMe() {
+        this.refs.someInput.focus();
+    }
+}
+```
+
+### Semantics
+
+We give here an informal description of the way components are created/updated
+in an application. Here, ordered lists describe actions that are executed
+sequentially, bullet lists describe actions that are executed in parallel.
+
+**Scenario 1: initial rendering** Imagine we want to render the following component tree:
+
+```
+        A
+       / \
+      B   C
+         / \
+        D   E
+```
+
+Here is what happen whenever we mount the root
+component (with some code like `app.mount(document.body)`).
+
+1. `willStart` is called on `A`
+
+2. when it is done, template `A` is rendered.
+
+   - widget `B` is created
+     1. `willStart` is called on `B`
+     2. template `B` is rendered
+   - widget `C` is created
+     1. `willStart` is called on `C`
+     2. template `C` is rendered
+        - widget `D` is created
+          1. `willStart` is called on `D`
+          2. template `D` is rendered
+        - widget `E` is created
+          1. `willStart` is called on `E`
+          2. template `E` is rendered
+
+3. widget `A` is patched into a detached DOM element. This will create the actual
+   widget `A` DOM structure. The patching process will cause recursively the
+   patching of the `B`, `C`, `D` and `E` DOM trees. (so the actual full DOM tree is created
+   in one pass)
+
+4. the widget `A` root element is actually appended to `document.body`
+
+5. The method `mounted` is called recursively on all widgets in the following
+   order: `B`, `D`, `E`, `C`, `A`.
+
+**Scenario 2: rerendering a component**. Now, let's assume that the user clicked on some
+button in `C`, and this results in a state update, which is supposed to:
+
+- update `D`,
+- remove `E`,
+- add new widget `F`.
+
+So, the component tree should look like this:
+
+```
+        A
+       / \
+      B   C
+         / \
+        D   F
+```
+
+Here is what Owl will do:
+
+1. because of a state change, the method `render` is called on `C`
+2. template `C` is rendered again
+
+   - widget `D` is updated:
+     1. hook `willUpdateProps` is called on `D` (async)
+     2. template `D` is rerendered
+   - widget `F` is created:
+     1. hook `willStart` is called on `E` (async)
+     2. template `F` is rendered
+
+3. `willPatch` hooks are called recursively on widgets `C`, `D` (not on `F`,
+   because it is not mounted yet)
+
+4. widget `C` is patched, which will cause recursively:
+
+   2. `willUnmount` hook on `E`, then destruction of `E`,
+   3. (initial) patching of `F`, then hook `mounted` is called on `F`
+
+5. patching of `D`
+
+6. `patched` hooks are called on `D`, `C`
+
+### Props Validation
+
+As an application becomes complex, it may be quite unsafe to define props in an informal way. This leads to two issues:
+
+- hard to tell how a component should be used, by looking at its code.
+- unsafe, it is easy to send wrong props into a component, either by refactoring a component, or one of its parent.
+
+A props type system would solve both issues, by describing the types and shapes
+of the props. Here is how it works in Owl:
+
+- `props` key is a static key (so, different from `this.props` in a component instance)
+- it is optional: it is ok for a component to not define a `props` key.
+- props are validated whenever a component is created/updated
+- props are only validated in `dev` mode (see [tooling page](tooling.md#development-mode))
+- if a key does not match the description, an error is thrown
+- it only validates keys defined in (static) `props`. Additional keys in (component) `props` are not validated.
+
+For example:
+
+```js
+class ComponentA extends owl.Component {
+    static props = ['id', 'url'];
+
+    ...
+}
+
+class ComponentB extends owl.Component {
+  static props = {
+    count: {type: Number},
+    messages: {
+      type: Array,
+      element: {type: Object, shape: {id: Boolean, text: 'string' }
+    },
+   date: Date,
+   combinedVal: [Number, Boolean]
+  };
+
+  ...
+}
+```
+
+- it is an object or a list of strings
+- a list of strings is a simplified props definition, which only lists the name
+  of the props.
+- all props are by default required, unless they are defined with `optional: true`
+  (in that case, validation is only done if there is a value)
+- valid types are: `Number, String, Boolean, Object, Array, Date, Function`, and all
+  constructor functions (so, if you have a `Person` class, it can be used as a type)
+- arrays are homogeneous (all elements have the same type/shape)
+
+For each key, a `prop` definition is either a constructor, a list of constructors, or an object:
+
+- a constructor: this should describe the type, for example: `id: Number` describe
+  the props `id` as a number
+- a list of constructors. In that case, this means that we allow more than one
+  type. For example, `id: [Number, String]` means that `id` can be either a string
+  or a number.
+- an object. This makes it possible to have more expressive definition. The following sub keys are then allowed:
+  - `type`: the main type of the prop being validated
+  - `element`: if the type was `Array`, then the `element` key describes the type of each element in the array. It is optional (not set means that we only validate the array, not its elements),
+  - `shape`: if the type was `Object`, then the `shape` key describes the interface of the object. It is optional (not set means that we only validate the object, not its elements)
+
+Examples:
+
+```js
+  // only the existence of those 3 keys is documented
+  static props = ['message', 'id', 'date'];
+```
+
+```js
+  static props = {
+    messageIds: {type: Array, element: Number},  // list of number
+    otherArr: {type: Array},   // just array. no validation is made on sub elements
+    otherArr2: Array,   // same as otherArr
+    someObj: {type: Object},  // just an object, no internal validation
+    someObj2: {
+      type: Object,
+      shape: {
+        id: Number,
+        name: {type: String, optional: true},
+        url: String
+      ]},    // object, with keys id (number), name (string, optional) and url (string)
+    someFlag: Boolean,     // a boolean, mandatory (even if `false`)
+    someVal: [Boolean, Date]   // either a boolean or a date
+  };
+```
+
+### References
+
+The `t-ref` directive helps a component keep reference to some inside part of it.
+Like the `t-on` directive, it can work either on a DOM node, or on a component:
+
+```xml
+<div>
+    <div t-ref="someDiv"/>
+    <t t-widget="SubWidget" t-ref="someWidget"/>
+</div>
+```
+
+In this example, the widget will be able to access the `div` and the component
+inside the special `refs` variable:
+
+```js
+this.refs.someDiv;
+this.refs.someWidget;
+```
+
+This is useful for various usecases: for example, integrating with an external
+library that needs to render itself inside an actual DOM node. Or for calling
+some method on a sub widget.
+
+Note: if used on a component, the reference will be set in the `refs`
+variable between `willPatch` and `patched`.
+
+The `t-ref` directive also accepts dynamic values with string interpolation
+(like the [`t-attf-`](qweb.md#dynamic-attributes) and
+`t-widget` directives). For example, if we have
+`id` set to 44 in the rendering context,
+
+```xml
+<div t-ref="widget_{{id}}"/>
+```
+
+```js
+this.refs.widget_44;
+```
+
+### Slots
+
+To make generic components, it is useful to be able for a parent widget to _inject_
+some sub template, but still be the owner. For example, a generic dialog widget
+will need to render some content, some footer, but with the parent as the
+rendering context.
+
+This is what _slots_ are for.
+
+```xml
+<div t-name="Dialog" class="modal">
+  <div class="modal-title"><t t-esc="props.title"/></div>
+  <div class="modal-content">
+    <t t-slot="content"/>
+  </div>
+  <div class="modal-footer">
+    <t t-slot="footer"/>
+  </div>
+</div>
+```
+
+Slots are defined by the caller, with the `t-set` directive:
+
+```xml
+<div t-name="SomeWidget">
+  <div>some widget</div>
+  <t t-widget="Dialog" title="Some Dialog">
+    <t t-set="content">
+      <div>hey</div>
+    </t>
+    <t t-set="footer">
+      <button t-on-click="doSomething">ok</button>
+    </t>
+  </t>
+</div>
+```
+
+In this example, the widget `Dialog` will render the slots `content` and `footer`
+with its parent as rendering context. This means that clicking on the button
+will execute the `doSomething` method on the parent, not on the dialog.
+
+Warning! Slots have a technical constraint: the result of the slot rendering
+should have exactly one root node. So,
+
+```xml
+<t t-set="content">
+  <div>A</div>
+  <div>B</div>
+</t>
+```
+
+is not allowed. A workaround could be to wrap the content in a div:
+
+```xml
+<div t-set="content">
+  <div>A</div>
+  <div>B</div>
+</div>
+```
+
+Default slot: the first element inside the widget which is not a named slot will
+be considered the `default` slot. For example:
+
+```xml
+<div t-name="Parent">
+  <t t-widget="Child">
+    <span>some content</span>
+  </t>
+</div>
+
+<div t-name="Child">
+  <t t-slot="default"/>
+</div>
+```
+
+### Asynchronous Rendering
+
+Working with asynchronous code always adds a lot of complexity to a system. Whenever
+different parts of a system are active at the same time, one needs to think
+carefully about all possible interactions. Clearly, this is also true for Owl
+components.
+
+There are two different common problems with Owl asynchronous rendering model:
+
+- any widget can delay the rendering (initial and subsequent) of the whole
+  application
+- for a given widget, there are two independant situations that will trigger an
+  asynchronous rerendering: a change in the state, or a change in the props.
+  These changes may be done at different times, and Owl has no way of knowing
+  how to reconcile the resulting renderings.
+
+Here are a few tips on how to work with asynchronous widgets:
+
+1. Minimize the use of asynchronous widgets!
+2. Maybe move the asynchronous logic in a store, which then triggers (mostly)
+   synchronous renderings
+3. Lazy loading external libraries is a good use case for async rendering. This
+   is mostly fine, because we can assume that it will only takes a fraction of a
+   second, and only once (see `owl.utils.loadJS`)
+4. For all the other cases, the `t-asyncroot` directive (to use alongside
+   `t-widget`) is there to help you. When this directive is met, a new rendering
+   sub tree is created, such that the rendering of that component (and its
+   children) is not tied to the rendering of the rest of the interface. It can
+   be used on an asynchronous component, to prevent it from delaying the
+   rendering of the whole interface, or on a synchronous one, such that its
+   rendering isn't delayed by other (asynchronous) components. Note that this
+   directive has no effect on the first rendering, but only on subsequent ones
+   (triggered by state or props changes).
+
+   ```xml
+   <div t-name="ParentWidget">
+     <t t-widget="SyncChild"/>
+     <t t-widget="AsyncChild" t-asyncroot="1"/>
+   </div>
+   ```

doc/event_bus.md

@@ -0,0 +1,27 @@
+# 🦉 Event Bus 🦉
+
+It is sometimes useful to use a `Bus` to communicate informations between various
+parts of the code. Owl has a very simple bus class, which manages subscriptions,
+triggering events, and callbacks.
+
+```js
+const bus = new owl.EventBus();
+
+bus.on("some-event", null, function(...args) {
+  console.log(...args);
+});
+
+bus.trigger("some-event", 1, 2, 3);
+// [1,2,3] will be logged to the console
+```
+
+Its API is:
+
+| Method                           | Description                       |
+| -------------------------------- | --------------------------------- |
+| `on(eventType, owner, callback)` | add a listener                    |
+| `off(eventType, owner)`          | remove all listeners for an owner |
+| `trigger(eventType, ...args)`    | trigger an event                  |
+| `clear`                          | remove all subscriptions          |
+
+Note that the [`Store`](store.md) is an example of an `EventBus`.

doc/observer.md

@@ -0,0 +1,50 @@
+# 🦉 Observer 🦉
+
+Owl need to be able to react to state changes. For example, whenever the state
+of a component is changed, we need to rerender it. To help with that, we have
+an Observer class. Its job is to observe some object state, and react to any
+change. To do that, it recursively replace all keys of the observed state by
+getters and setters.
+
+For example, this code will display `update` in the console:
+
+```javascript
+const observer = new owl.Observer();
+observer.notifyCB = () => console.log("update");
+observer.observe(obj);
+
+const obj = { a: { b: 1 } };
+obj.a.b = 2;
+```
+
+## Technical Limitations
+
+Since the observer uses getters and setters, it is actually unable to react to
+changes in three situations:
+
+- adding a key to an object
+- deleting a key from an object
+- modifying an array by setting a new value at a given index
+
+In those situations, we need a way to tell the observer that something happened.
+This can be done by using the `set` and `delete` (only for objects) static
+methods of the `Observer`.
+
+```javascript
+const observer = new owl.Observer();
+const obj = { a: 1 };
+observer.observe(obj);
+obj.b = 2; // won't notify the change
+owl.Observer.set(obj, "b", 2); // will notify the change
+
+delete obj.b; // won't notify the change
+owl.Observer.delete(obj, "b"); // will notify the change
+```
+
+```javascript
+const observer = new owl.Observer();
+const arr = ["a"];
+observer.observe(arr);
+arr[0] = "b"; // won't notify the change
+owl.Observer.set(arr, 0, "b"); // will notify the change
+```

doc/quick_start.md

@@ -0,0 +1,101 @@
+# 🦉 Quick Start 🦉
+
+## Static Server
+
+Let us assume that we have a static server running somewhere. We could then
+simply add an html page with a few extra files.
+
+### HTML and CSS
+
+In a file `index.html`:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>My OWL App</title>
+    <link href="app.css" rel="stylesheet" />
+    <script src="owl-X.Y.Z.js"></script>
+  </head>
+  <body>
+    <div id="main"></div>
+    <script src="app.js" type="module"></script>
+  </body>
+</html>
+```
+
+In `app.css`:
+
+```css
+button {
+  color: darkred;
+  font-size: 30px;
+  width: 220px;
+}
+```
+
+Also, let's not forget to add a release of OWL (`owl-X.Y.Z.js`)
+
+### XML
+
+In `templates.xml`:
+
+```xml
+<templates>
+   <button t-name="clickcounter" t-on-click="increment">
+      Click Me! [<t t-esc="state.value"/>]
+    </button>
+</templates>
+```
+
+### JS
+
+To build an application (or a sub-part of an application), we need two things:
+
+- an environment: it is the global context in which we are working. It needs to
+  contain a QWeb instance (preloaded with templates), and anything else that we
+  need. In practice, it could context some user session information, some
+  configuration keys (for example, isMobile = true/false if we are in mobile mode).
+
+- a description of the user interface: there should be a root widget, which can
+  have sub widgets
+
+Here are a few steps that we may take to get started:
+
+- get the templates
+- create a qweb engine, with the templates
+- create an environment
+- create an instance of the root widget
+- mount the root widget to a DOM element
+
+Let us now add the javascript to make it work, in `app.js`:
+
+```javascript
+class ClickCounter extends owl.Component {
+  constructor() {
+    super(...arguments);
+    this.template = "clickcounter";
+    this.state = { value: 0 };
+  }
+
+  increment() {
+    this.state.value++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const counter = new ClickCounter(env);
+  const target = document.getElementById("main");
+  await counter.mount(target);
+}
+
+start();
+```

doc/qweb.md

@@ -0,0 +1,507 @@
+# 🦉 QWeb 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Directives](#directives)
+- [QWeb Engine](#qweb-engine)
+- [Reference](#reference)
+  - [White Spaces](#white-spaces)
+  - [Root Nodes](#root-nodes)
+  - [Expression Evaluation](#expression-evaluation)
+  - [Static html Nodes](#static-html-nodes)
+  - [Outputting Data](#outputting-data)
+  - [Setting Variables](#setting-variables)
+  - [Conditionals](#conditionals)
+  - [Dynamic Attributes](#dynamic-attributes)
+  - [Loops](#loops)
+  - [Rendering Sub Templates](#rendering-sub-templates)
+  - [Debugging](#debugging)
+
+## Overview
+
+[QWeb](https://www.odoo.com/documentation/12.0/reference/qweb.html) is the primary templating engine used by Odoo. It is based on the XML format, and used
+mostly to generate HTML. In OWL, QWeb templates are compiled into functions that
+generate a virtual dom representation of the HTML.
+
+Template directives are specified as XML attributes prefixed with `t-`, for instance `t-if` for conditionals, with elements and other attributes being rendered directly.
+
+To avoid element rendering, a placeholder element `<t>` is also available, which executes its directive but doesn’t generate any output in and of itself.
+
+```xml
+<div>
+    <span t-if="somecondition">Some string</span>
+    <ul t-else="1">
+        <li t-foreach="messages" t-as="message">
+            <t t-esc="message">
+        </li>
+    </ul>
+</div>
+```
+
+The QWeb class in the OWL project is an implementation of that specification
+with a few interesting points:
+
+- it compiles templates into functions that output a virtual DOM instead of a
+  string. This is necessary for the component system.
+- it has a few extra directives: `t-widget`, `t-on`, ...
+
+## Directives
+
+We present here a list of all standard QWeb directives:
+
+| Name                           | Description                                                  |
+| ------------------------------ | ------------------------------------------------------------ |
+| `t-esc`                        | [Outputting safely a value](#outputting-data)                |
+| `t-raw`                        | [Outputting value, without escaping](#outputting-data)       |
+| `t-set`, `t-value`             | [Setting variables](#setting-variables)                      |
+| `t-if`, `t-elif`, `t-else`,    | [conditionally rendering](#conditionals)                     |
+| `t-foreach`, `t-as`            | [Loops](#loops)                                              |
+| `t-att`, `t-attf-*`, `t-att-*` | [Dynamic attributes](#dynamic-attributes)                    |
+| `t-call`                       | [Rendering sub templates](#rendering-sub-templates)          |
+| `t-debug`, `t-log`             | [Debugging](#debugging)                                      |
+| `t-name`                       | [Defining a template (not really a directive)](#qweb-engine) |
+
+The component system in Owl requires additional directives, to express various
+needs. Here is a list of all Owl specific directives:
+
+| Name                                         | Description                                                                         |
+| -------------------------------------------- | ----------------------------------------------------------------------------------- |
+| `t-widget`, `t-keepalive`, `t-asyncroot` | [Defining a sub component](component.md#composition)                                |
+| `t-ref`                                      | [Setting a reference to a dom node or a sub component](component.md#references)     |
+| `t-key`                                      | [Defining a key (to help virtual dom reconciliation)](component.md#t-key-directive) |
+| `t-on-*`                                     | [Event handling](component.md#event-handling)                                       |
+| `t-transition`                               | [Defining an animation](animations.md#css-transitions)                              |
+| `t-mounted`                                  | [Callback when a node or component is mounted](component.md#t-mounted-directive)    |
+| `t-slot`                                     | [Rendering a slot](component.md#slots)                                              |
+| `t-model`                                    | [Form input bindings](component.md#form-input-bindings)                             |
+
+## QWeb Engine
+
+This section is about the javascript code that implements the `QWeb` specification.
+Owl exports a `QWeb` class in `owl.QWeb`. To use it, it just needs to be
+instantiated:
+
+```js
+const qweb = new owl.QWeb();
+```
+
+It's API is quite simple:
+
+- **`constructor(data)`**: constructor. Takes an optional string to add initial
+  templates (see `addTemplates` for more information on format of the string).
+
+  ```js
+  const qweb = new owl.QWeb(TEMPLATES);
+  ```
+
+- **`addTemplate(name, xmlStr)`**: add a specific template.
+
+  ```js
+  qweb.addTemplate("mytemplate", "<div>hello</div>");
+  ```
+
+- **`addTemplates(xmlStr)`**: add a list of templates (identified by `t-name`
+  attribute).
+
+  ```js
+  const TEMPLATES = `
+    <templates>
+      <div t-name="App" class="main">main</div>
+      <div t-name="OtherWidget">other widget</div>
+    </templates>`;
+  qweb.addTemplates(TEMPLATES);
+  ```
+
+- **`render(name, context, extra)`**: renders a template. This returns a `vnode`,
+  which is a virtual representation of the DOM (see [vdom doc](vdom.md)).
+
+  ```js
+  const vnode = qweb.render("App", widget);
+  ```
+
+- **`register(name, Component)`**: static function to register an OWL Component
+  to QWeb's global registry. Globally registered Components can be used in
+  templates (see the `t-widget` directive). This is useful for commonly used
+  components accross the application.
+
+  ```js
+  class Dialog extends owl.Component { ... }
+  QWeb.register("Dialog", Dialog);
+
+  ...
+
+  class ParentWidget extends owl.Component { ... }
+  qweb.addTemplate("ParentWidget", "<div><t t-widget='Dialog'/></div>");
+  ```
+
+## Reference
+
+We define in this section the specification of how `QWeb` templates should be
+rendered. Note that we only document here the standard QWeb specification. Owl
+specific extensions are documented in various other parts of the documentation.
+
+### White Spaces
+
+White spaces in a templates are handled in a special way:
+
+- consecutive whitespaces are always condensed to a single whitespace
+- if a whitespace-only text node contains a linebreak, it is ignored
+- the previous rules do not apply if we are in a `<pre>` tag
+
+### Root Nodes
+
+For many reasons, Owl QWeb templates should have a single root node. More
+precisely, the result of a template rendering should have a single root node:
+
+```xml
+<!–– not ok: two root nodes ––>
+<t>
+    <div>foo</div>
+    <div>bar</div>
+</t>
+
+<!–– ok: result has one single root node ––>
+<t>
+    <div t-if="someCondition">foo</div>
+    <span t-else="1">bar</span>
+</t>
+```
+
+Extra root nodes will actually be ignored (even though they will be rendered
+in memory).
+
+Note: this does not apply to subtemplates (see the `t-call` directive). In that
+case, they will be inlined in the main template, and can actually have many
+root nodes.
+
+### Expression Evaluation
+
+QWeb expressions are strings that will be processed at compile time. Each variable in
+the javascript expression will be replaced by a lookup in the context (so, the
+widget). For example, `a + b.c(d)` will be converted into:
+
+```js
+context["a"] + context["b"].c(context["d"]);
+```
+
+It is useful to explain the various rules that applies on these expressions:
+
+1. it should be a simple expression which returns a value. It cannot be a statement.
+
+   ```xml
+   <div><p t-if="1 + 2 === 3">ok</p></div>
+   ```
+
+   is valid, but the following is not valid:
+
+   ```xml
+   <div><p t-if="console.log(1)">NOT valid</p></div>
+   ```
+
+2. it can use anything in the rendering context (typically, the component):
+
+   ```xml
+   <p t-if="user.birthday === today()">Happy bithday!</p>
+   ```
+
+   is valid, and will read the `user` object from the context, and call the
+   `today` function.
+
+3. it can use a few special operators to avoid using symbols such as `<`, `>`,
+   `&` or `|`. This is useful to make sure that we still write valid XML.
+
+   | Word  | will be replaced by |
+   | ----- | ------------------- |
+   | `and` | `&&`                |
+   | `or`  | `\|\|`              |
+   | `gt`  | `>`                 |
+   | `gte` | `>=`                |
+   | `lt`  | `<`                 |
+   | `lte` | `<=`                |
+
+   So, one can write this:
+
+   ```xml
+   <div><p t-if="10 + 2 gt 5">ok</p></div>
+   ```
+
+### Static Html Nodes
+
+Normal, regular html nodes are rendered into themselves:
+
+```xml
+  <div>hello</div> <!–– rendered as itself ––>
+```
+
+### Outputting Data
+
+The `t-esc` directive is necessary whenever you want to add a dynamic text
+expression in a template. The text is escaped to avoid security issues.
+
+```xml
+<p><t t-esc="value"/></p>
+```
+
+rendered with the value `value` set to `42` in the rendering context yields:
+
+```html
+<p>42</p>
+```
+
+The `t-raw` directive is almost the same as `t-esc`, but without the escaping.
+This is mostly useful to inject a raw html string somewhere. Obviously, this
+is unsafe to do in general, and should only be used for strings known to be safe.
+
+```xml
+<p><t t-raw="value"/></p>
+```
+
+rendered with the value `value` set to `<span>foo</span>` in the rendering context yields:
+
+```html
+<p><span>foo</span></p>
+```
+
+### Setting Variables
+
+QWeb allows creating variables from within the template, to memoize a computation (to use it multiple times), give a piece of data a clearer name, ...
+
+This is done via the `t-set` directive, which takes the name of the variable to create. The value to set can be provided in two ways:
+
+1. a `t-value` attribute containing an expression, and the result of its
+   evaluation will be set:
+
+   ```xml
+   <t t-set="foo" t-value="2 + 1"/>
+   <t t-esc="foo"/>
+   ```
+
+   will print `3`. Note that the evaluation is done at rendering time, not at
+   compilte time.
+
+2. if there is no `t-value` attribute, the node’s body is saved and its value is
+   set as the variable’s value:
+
+   ```xml
+   <t t-set="foo">
+       <li>ok</li>
+   </t>
+   <t t-esc="foo"/>
+   ```
+
+   will generate `&lt;li&gt;ok&lt;/li&gt;` (the content is escaped as we used the `t-esc` directive)
+
+The `t-set` directive acts like a regular variable in most programming language.
+It is lexically scoped (inner nodes are sub scopes), can be shadowed, ...
+
+### Conditionals
+
+The `t-if` directive is useful to conditionally render something. It evaluates
+the expression given as attribute value, and then acts accordingly.
+
+```xml
+<div>
+    <t t-if="condition">
+        <p>ok</p>
+    </t>
+</div>
+```
+
+The element is rendered if the condition (evaluated with the current rendering
+context) is true:
+
+```xml
+<div>
+    <p>ok</p>
+</div>
+```
+
+but if the condition is false it is removed from the result:
+
+```xml
+<div>
+</div>
+```
+
+The conditional rendering applies to the bearer of the directive, which does not
+have to be `<t>`:
+
+```xml
+<div>
+    <p t-if="condition">ok</p>
+</div>
+```
+
+will give the same results as the previous example.
+
+Extra conditional branching directives `t-elif` and `t-else` are also available:
+
+```xml
+<div>
+    <p t-if="user.birthday == today()">Happy bithday!</p>
+    <p t-elif="user.login == 'root'">Welcome master!</p>
+    <p t-else="">Welcome!</p>
+</div>
+```
+
+### Dynamic Attributes
+
+One can use the `t-att-` directive to add dynamic attributes. Its main use is to
+evaluate an expression (at rendering time) and bind an attribute to its result:
+
+For example, if we have `id` set to 32 in the rendering context,
+
+```xml
+<div t-att-data-action-id="id"/> <!-- result: <div data-action-id="32"></div> -->
+```
+
+If an expression evaluates to a falsy value, it will not be set at all:
+
+```xml
+<div t-att-foo="false"/>  <!-- result: <div></div> -->
+```
+
+There is another way to format a string attribute: the `t-attf-` directive. With
+it, you get string interpolation:
+
+```xml
+<div t-attf-foo="a {{value1}} is {{value2}} of {{value3}} ]"/>
+<!-- result if values are set to 1,2 and 3: <div foo="a 0 is 1 of 2 ]"></div> -->
+```
+
+### Loops
+
+QWeb has an iteration directive `t-foreach` which take an expression returning the
+collection to iterate on, and a second parameter `t-as` providing the name to use
+for the current item of the iteration:
+
+```xml
+<t t-foreach="[1, 2, 3]" t-as="i">
+    <p><t t-esc="i"/></p>
+</t>
+```
+
+will be rendered as:
+
+```xml
+<p>1</p>
+<p>2</p>
+<p>3</p>
+```
+
+Like conditions, `t-foreach` applies to the element bearing the directive’s attribute, and
+
+```xml
+<p t-foreach="[1, 2, 3]" t-as="i">
+    <t t-esc="i"/>
+</p>
+```
+
+is equivalent to the previous example.
+
+`t-foreach` can iterate on an array (the current item will be the current value)
+or an object (the current item will be the current key).
+
+In addition to the name passed via t-as, `t-foreach` provides a few other
+variables for various data points (note: `$as` will be replaced by the name
+passed to `t-as`):
+
+- `$as_value`: the current iteration value, identical to `$as` for lists and
+  integers, but for objects, it provides the value (where `$as` provides the key)
+- `$as_index`: the current iteration index (the first item of the iteration has index 0)
+- `$as_first`: whether the current item is the first of the iteration
+  (equivalent to `$as_index == 0`)
+- `$as_last`: whether the current item is the last of the iteration
+  (equivalent to `$as_index + 1 == $as_size`), requires the iteratee’s size be
+  available
+
+These extra variables provided and all new variables created into the `t-foreach`
+are only available in the scope of the `t-foreach`. If the variable exists outside
+the context of the `t-foreach`, the value is copied at the end of the foreach
+into the global context.
+
+```xml
+<t t-set="existing_variable" t-value="False"/>
+<!-- existing_variable now False -->
+
+<p t-foreach="Array(3)" t-as="i">
+    <t t-set="existing_variable" t-value="True"/>
+    <t t-set="new_variable" t-value="True"/>
+    <!-- existing_variable and new_variable now True -->
+</p>
+
+<!-- existing_variable always True -->
+<!-- new_variable undefined -->
+```
+
+### Rendering Sub Templates
+
+QWeb templates can be used for top level rendering, but they can also be used
+from within another template (to avoid duplication or give names to parts of
+templates), using the `t-call` directive:
+
+```xml
+<div t-name="other-template">
+    <p><t t-value="var"/></p>
+</div>
+
+<div t-name="main-template">
+    <t t-set="var" t-value="owl"/>
+    <t t-call="other-template"/>
+</div>
+```
+
+will be rendered as `<div><p>owl</p></div>`. This example shows that the sub
+template is rendered with the execution context of the parent. The sub template
+is actually inlined in the main template, but in a sub scope: variables defined
+in the sub template do not escape.
+
+Sometimes, one might want to pass information to the sub template. In that case,
+the content of the body of the `t-call` directive is available as a special
+magic variable `0`:
+
+```xml
+<t t-name="other-template">
+    This template was called with content:
+    <t t-raw="0"/>
+</t>
+
+<div t-name="main-template">
+    <t t-call="other-template">
+        <em>content</em>
+    </t>
+</div>
+```
+
+will result in :
+
+```xml
+<div>
+    This template was called with content:
+    <em>content</em>
+</div>
+```
+
+### Debugging
+
+The javascript QWeb implementation provides two useful debugging directives:
+
+`t-debug` adds a debugger statement during template rendering:
+
+```xml
+<t t-if="a_test">
+    <t t-debug="">
+</t>
+```
+
+will stop execution if the browser dev tools are open.
+
+`t-log` takes an expression parameter, evaluates the expression during rendering and logs its result with console.log:
+
+```xml
+<t t-set="foo" t-value="42"/>
+<t t-log="foo"/>
+```
+
+will print 42 to the console

doc/readme.md

@@ -0,0 +1,21 @@
+# 🦉 OWL Documentation 🦉
+
+## Reference
+
+- [Animations](animations.md)
+- [Component](component.md)
+- [Event Bus](event_bus.md)
+- [Observer](observer.md)
+- [QWeb](qweb.md)
+- [Store](store.md)
+- [Utils](utils.md)
+- [Virtual DOM](vdom.md)
+
+## Learning Resources
+
+- [Quick Start](quick_start.md)
+
+## Miscellaneous
+
+- [Comparison with React/Vue](comparison.md)
+- [Tooling](tooling.md)

doc/store.md

@@ -0,0 +1,209 @@
+# 🦉 Store 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Example](#example)
+- [Reference](#reference)
+  - [Public API](#public-api)
+  - [Mutations](#mutations)
+  - [Actions](#actions)
+  - [Getters](#getters)
+  - [Connecting a Component](#connecting-a-component)
+
+## Overview
+
+Managing the state in an application is not an easy task. In some cases, the
+state of an application can be part of the component tree, in a natural way.
+However, there are situations where some part of the state need to be displayed
+in various parts of the user interface, and then, it is not obvious which
+component should own which part of the state.
+
+Owl's solution to this issue is a centralized store. It is a class that owns
+some state, and let the developer update it in a structured way (through
+mutations and actions). Owl components can then connect to the store, and will
+be updated if necessary.
+
+Note: Owl's store is inspired by React Redux and VueX.
+
+## Example
+
+Here is what a simple store looks like:
+
+```js
+const actions = {
+  addTodo({ commit }, message) {
+    commit("addTodo", message);
+  }
+};
+
+const mutations = {
+  addTodo({ state }, message) {
+    const todo = {
+      id: state.nextId++,
+      message,
+      isCompleted: false
+    };
+    state.todos.push(todo);
+  }
+};
+
+const state = {
+  todos: [],
+  nextId: 1
+};
+
+const store = new owl.Store({ state, actions, mutations });
+store.on("update", () => console.log(store.state));
+
+// updating the state
+store.dispatch("addTodo", "fix all bugs");
+```
+
+## Reference
+
+The store is a simple [`owl.EventBus`](event_bus.md) that triggers `update` events whenever its
+state is changed. Note that these events are triggered only after a microtask
+tick, so only one event will be triggered for any number of state changes in a
+call stack.
+
+Also, it is important to mention that the state is observed (with an `owl.Observer`),
+which is the reason why it is able to know if it was changed. This implies that
+state changes need to be done carefully in some cases (adding a new key to an
+object, or modifying an array with the `arr[i] = newValue` syntax). See the
+[Observer](observer.md)'s documentation for more details.
+
+### Public API
+
+1. `constructor`
+2. `commit`
+3. `dispatch`
+
+### Mutations
+
+Mutations are the only way to modify the state. Changing the state outside a
+mutation is not allowed (and should throw an error). Mutations are synchronous.
+
+### Actions
+
+Actions are used to coordinate state changes. It is also useful whenever some
+asynchronous logic is necessary. For example, fetching data should be done
+in an action.
+
+```js
+const actions = {
+  async login({ commit }) {
+    commit("setLoginState", "pending");
+    try {
+      const loginInfo = await doSomeRPC("/login/", "someinfo");
+      commit("setLoginState", loginInfo);
+    } catch {
+      commit("setLoginState", "error");
+    }
+  }
+};
+```
+
+### Getters
+
+Usually, data contained in the store will be stored in a normalized way. For
+example,
+
+```js
+{
+    posts: [{id: 11, authorId: 4, content: 'Greetings'}],
+    authors: [{id: 4, name: 'John'}]
+}
+```
+
+However, the user interface will probably need some denormalized data like
+
+```js
+{id: 11, author: {id: 4, name: 'John'}, content: 'Greetings'}
+```
+
+This is what `getters` are for: they give a centralized way to process and
+transform the data contained in the store.
+
+```js
+const getters = {
+  getPost({ state }, id) {
+    const post = state.posts.find(p => p.id === id);
+    const author = state.authors.find(a => (a.id = post.id));
+    return {
+      id,
+      author,
+      content: post.content
+    };
+  }
+};
+
+// somewhere else
+const post = store.getters.getPost(id);
+```
+
+Getters take *at most* one argument.
+
+
+Note that getters are cached if they don't take any argument, or their argument
+is a string or a number.
+
+### Connecting a Component
+
+By default, an Owl `Component` is not connected to any store. The `connect`
+function is there to create sub Components that are connected versions of
+Components.
+
+```javascript
+const actions = {
+  increment({ commit }) {
+    commit("increment", 1);
+  }
+};
+const mutations = {
+  increment({ state }, val) {
+    state.counter += val;
+  }
+};
+const state = {
+  counter: 0
+};
+const store = new owl.Store({ state, actions, mutations });
+
+class Counter extends owl.Component {
+  increment() {
+    this.env.store.dispatch("increment");
+  }
+}
+function mapStoreToProps(state) {
+  return {
+    value: state.counter
+  };
+}
+const ConnectedCounter = owl.connect(Counter, mapStoreToProps);
+
+const counter = new ConnectedCounter({ store, qweb });
+```
+
+```xml
+<button t-name="Counter" t-on-click="increment">
+  Click Me! [<t t-esc="props.value"/>]
+</button>
+```
+
+The arguments of `connect` are:
+
+- `Counter`: an owl `Component` to connect
+- `mapStoreToProps`: a function that extracts the `props` of the Component
+  from the `state` of the `Store` and returns them as a dict
+- `options`: dictionary of optional parameters that may contain
+  - `getStore`: a function that takes the `env` in arguments and returns an
+    instance of `Store` to connect to (if not given, connects to `env.store`)
+  - `hashFunction`: the function to use to detect changes in the state (if not
+    given, generates a function that uses revision numbers, incremented at
+    each state change)
+  - `deep`: [only useful if no hashFunction is given] if false, only watch
+    for top level state changes (true by default)
+
+The `connect` function returns a sub class of the given `Component` which is
+connected to the `store`.

doc/tooling.md

@@ -0,0 +1,55 @@
+# 🦉 Tooling 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Development Mode](#development-mode)
+- [Playground](#playground)
+- [Benchmarks](#benchmarks)
+
+## Overview
+
+To help work with/improve/learn OWL, there are a few extras tools/settings.
+
+- development mode: enable better error reporting for the developer
+- a playground application: a space to experiment and learn Owl.
+- a benchmarks application: allow comparison with a few common frameworks
+
+The two applications are available in the `tools/` folder, and can be accessed
+by using a static http server. A simple python
+server is available in `server.py`. There is also a npm script to start it:
+`npm run tools` (and its version with a watcher: `npm run tools:watch`).
+
+## Development Mode
+
+By default, Owl is in _production_ mode, this means that it will try to do its
+job fast, and skip some expensive operations. However, in some cases, it is
+convenient to have better information on what is going on, this is the purpose
+of the dev mode.
+
+Owl has a mode flag, in `owl.__info__.mode`. Its default value is `prod`, but
+it can be set to `dev`:
+
+```js
+owl.__info__.mode = "dev";
+```
+
+Note that templates compiled with the `prod` settings will not be recompiled.
+So, changing this setting is best done at startup.
+
+## Playground
+
+The playground is an important application designed to help learning and
+experimenting with Owl. The last published version of Owl can be tested [online](https://odoo.github.io/owl/playground/).
+
+It is an application similar to `jsFiddle`, but specialized for Owl: there are
+three tabs (`js`, `css` and `xml`), and a simple button `Run` to execute that
+code in an iframe.
+
+## Benchmarks
+
+Note: This is more an internal tool, useful for people working on Owl.
+
+The benchmarks application is a very small application, implemented in different
+frameworks, and in different versions of Owl. This is a simple internal tool,
+useful to compare various performance metrics on some tasks.

doc/utils.md

@@ -0,0 +1,65 @@
+# 🦉 Utils 🦉
+
+Owl export a few useful utility functions, to help with common issues. Those
+functions are all available in the `owl.utils` namespace.
+
+## Content
+
+- [`whenReady`](#whenready): executing code when DOM is ready
+- [`loadJS`](#loadjs): loading script files
+- [`loadTemplates`](#loadtemplates): loading xml files
+- [`escape`](#escape): sanitizing strings
+- [`debounce`](#debounce): limiting rate of function calls
+
+## `whenReady`
+
+The function `whenReady` returns a `Promise` resolved when the DOM is ready (if
+not ready yet, resolved directly otherwise). If called with a callback as
+argument, it executes it as soon as the DOM ready (or directly).
+
+```js
+Promise.all([loadTemplates(), owl.utils.whenReady()]).then(function([
+  templates
+]) {
+  const qweb = new owl.QWeb(templates);
+  const app = new App({ qweb });
+  app.mount(document.body);
+});
+```
+
+```js
+owl.utils.whenReady(function() {
+  const qweb = new owl.QWeb();
+  const app = new App({ qweb });
+  app.mount(document.body);
+});
+```
+
+## `loadJS`
+
+`loadJS` takes a url (string) for a javascript resource, and loads it. It returns
+a promise, so the caller can properly react when it is ready. Also, it is smart:
+it maintains a list of urls previously loaded (or currently being loaded), and
+prevent doing twice the work.
+
+```js
+class MyComponent extends owl.Component {
+  willStart() {
+    return owl.utils.loadJS("/static/libs/someLib.js");
+  }
+}
+```
+
+## `loadTemplates`
+
+```js
+async function makeEnv() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const qweb = new owl.QWeb(templates);
+  return { qweb };
+}
+```
+
+## `escape`
+
+## `debounce`

doc/vdom.md

@@ -0,0 +1,18 @@
+# 🦉 VDom 🦉
+
+Owl is a declarative component system: we declare the structure of the component
+tree, and Owl will translate that to a list of imperative operations. This
+translation is done by a virtual dom. This is the low level layer of Owl, most
+developer will not need to call directly the virtual dom functions.
+
+The main idea behind a virtual dom is to keep a in-memory representation of the
+DOM (called a virtual node), and whenever some change is needed, to regenerate
+a new representation, compute the difference between the old and the new, then
+apply the changes.
+
+`vdom` exports two functions:
+
+- `h`: create a new virtual node
+- `patch`: compare two virtual nodes, and apply the difference.
+
+Note: Owl's virtual dom is a fork of [snabbdom](https://github.com/snabbdom/snabbdom).

index.html

@@ -1,109 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>OWL Framework</title>
-  <link rel="icon" href="data:,">
-  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
-  <link rel="stylesheet" href="assets/normalize.css">
-  <link rel="stylesheet" href="assets/milligram.css">
-  <link rel="stylesheet" href="assets/highlight.tomorrow.css">
-  <link rel="stylesheet" href="assets/main.css">
-  <script src="./owl.js"></script>
-</head>
-<body>
-  <header class="container">
-    <img class="homepage-logo" src="assets/owl_1f989.png" alt="OWL Logo">
-    <hgroup>
-      <h1>OWL Framework</h1>
-      <p>Mysterious OWL: A web framework for structured, dynamic and maintainable applications</p>
-    </hgroup>
-  </header>
-  <nav class="container">
-    <p>
-      <a href="https://github.com/odoo/owl" title="https://github.com/odoo/owl">Github</a>
-      &bull;
-      <a href="https://github.com/odoo/owl/blob/master/doc/readme.md">Documentation</a>
-      &bull;
-      <a href="playground/">Playground</a>
-    </p>
-  </nav>
-  <main>
-    <article class="design">
-      <div class="container">
-        <h2>Why OWL?</h2>
-        <div class="row">
-          <section class="column">
-            <h3>XML based</h3>
-            <p>Templates are based on the XML format, which allows interesting applications. For example, they could be stored in a database and modified dynamically with <tt>xpaths</tt>.</p>
-          </section>
-          <section class="column">
-            <h3>Templates compiled in the browser</h3>
-            <p>This may not be a good fit for all applications, but if you need to generate dynamically user interfaces in the browser, this is very powerful. For example, a generic form view component could generate a specific form user interface for each various models, from a XML view.</p>
-          </section>
-          <section class="column">
-            <h3>No toolchain required</h3>
-            <p>This is extremely useful for some applications, if, for various reasons (security/deployment/dynamic modules/specific assets tools), it is not ok to use standard web tools based on <tt>npm</tt>.</p>
-          </section>
-        </div>
-      </div>
-    </article>
-    <article class="example">
-      <div class="container">
-        <h2>Example</h2>
-        <div class="row">
-          <section class="column">
-<pre><code class="javascript">import { mount, Component, useState } from "owl";
-
-class Counter extends Component {
-  setup() {
-    this.state = useState({ value: 0 });
-  }
-
-  increment() {
-    this.state.value++;
-  }
-}
-
-mount(Counter, document.body);</code></pre>
-          </section>
-          <section class="column">
-<pre><code class="xml">&lt;templates&gt;
-  &lt;t t-name=&quot;Counter&quot;&gt;
-    &lt;button t-on-click=&quot;increment&quot;&gt;
-      Click Me! [&lt;t t-esc=&quot;state.value&quot;/&gt;]
-    &lt;/button&gt;
-  &lt;/t&gt;
-&lt;/templates&gt;</code></pre>
-            <div id="app-container"></div>
-            <script>
-const { mount, Component, useState, xml } = owl;
-
-class Counter extends Component {
-  setup() {
-    this.state = useState({ value: 0 });
-  }
-
-  increment() {
-    this.state.value++;
-  }
-}
-Counter.template = xml`<button t-on-click="increment">
-  Click Me! [<t t-esc="state.value"/>]
-</button>`;
-
-mount(Counter, document.getElementById("app-container"));
-            </script>
-          </section>
-        </div>
-      </div>
-    </article>
-  </main>
-  <footer>
-    <p><a href=".">OWL</a> is licensed under LGPLv3.<br>Logo from <a href="https://github.com/googlefonts/noto-emoji">Google Noto Emoji Font</a>, licensed under Apache License 2.0</p>
-  </footer>
-  <script src="assets/highlight.pack.js"></script>
-  <script>hljs.initHighlightingOnLoad();</script>
-</body>
-</html>

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "owl",
+  "version": "0.15.0",
+  "description": "Odoo Web Library (OWL)",
+  "main": "src/index.ts",
+  "scripts": {
+    "build:js": "tsc --target esnext --module es6 --outDir dist/owl",
+    "build:bundle": "rollup -c",
+    "build": "npm run build:js && npm run build:bundle",
+    "minify": "uglifyjs dist/owl.js -o dist/owl.min.js --compress --mangle",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "tools:serve": "python3 tools/server.py || python tools/server.py",
+    "tools": "npm run build && npm run tools:serve",
+    "pretools:watch": "npm run build",
+    "tools:watch": "npm-run-all  --parallel tools:serve \"build:* -- --watch\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/odoo/owl.git"
+  },
+  "author": "Odoo",
+  "license": "GPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/odoo/owl/issues"
+  },
+  "homepage": "https://github.com/odoo/owl#readme",
+  "devDependencies": {
+    "@types/jest": "^23.3.12",
+    "cpx": "^1.5.0",
+    "git-rev-sync": "^1.12.0",
+    "jest": "^23.6.0",
+    "live-server": "^1.2.1",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^1.6.0",
+    "rollup-plugin-typescript2": "^0.20.1",
+    "sass": "^1.16.1",
+    "source-map-support": "^0.5.10",
+    "ts-jest": "^23.10.5",
+    "typescript": "^3.2.2",
+    "uglify-es": "^3.3.9",
+    "jest-environment-jsdom": "^24.7.1"
+  },
+  "dependencies": {},
+  "jest": {
+    "roots": [
+      "<rootDir>/src",
+      "<rootDir>/tests"
+    ],
+    "transform": {
+      "^.+\\.ts?$": "ts-jest"
+    },
+    "verbose": false,
+    "testRegex": "(/tests/.*(test|spec))\\.ts?$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ]
+  }
+}

playground/app.js

@@ -1,346 +0,0 @@
-import { SAMPLES } from "./samples.js";
-import { debounce, loadJS } from "./utils.js";
-import { exportStandaloneApp } from "./export_snippet.js";
-const { useState, useRef, onMounted, onWillUnmount, onPatched, onWillUpdateProps } = owl;
-
-//------------------------------------------------------------------------------
-// Constants, helpers, utils
-//------------------------------------------------------------------------------
-
-const MODES = {
-  js: "ace/mode/javascript",
-  css: "ace/mode/css",
-  xml: "ace/mode/xml"
-};
-
-const DEFAULT_XML = `<templates>
-</templates>`;
-
-/**
- * Make an iframe, with all the js, css and xml properly injected.
- */
-function makeCodeIframe(js, css, xml) {
-  const sanitizedXML = xml.replace(/<!--[\s\S]*?-->/g, "").replace(/`/g, '\\\`');
-
-  // create iframe
-  const iframe = document.createElement("iframe");
-
-  iframe.onload = () => {
-    const doc = iframe.contentDocument;
-    const utilsMod = doc.createElement("script");
-    utilsMod.setAttribute("type", "module");
-    utilsMod.setAttribute("src", "utils.js");
-    doc.head.appendChild(utilsMod);
-    // inject js
-    const owlScript = doc.createElement("script");
-    owlScript.type = "text/javascript";
-    owlScript.src = "../owl.js";
-    owlScript.addEventListener("load", () => {
-      const script = doc.createElement("script");
-      script.type = "module";
-      const content = `
-        (async function(TEMPLATES) {
-          ${js}
-        })(\`${sanitizedXML}\`)`;
-      script.innerHTML = content;
-      doc.body.appendChild(script);
-    });
-    doc.head.appendChild(owlScript);
-
-    // inject css
-    const style = document.createElement("style");
-    style.innerHTML = css;
-    doc.head.appendChild(style);
-  };
-  return iframe;
-}
-
-//------------------------------------------------------------------------------
-// SAMPLES
-//------------------------------------------------------------------------------
-function loadSamples() {
-  let result = SAMPLES.slice();
-  const localSample = localStorage.getItem("owl-playground-local-sample");
-  if (localSample) {
-    const { js, css, xml } = JSON.parse(localSample);
-    result.unshift({
-      description: "Local Storage Code",
-      code: js,
-      xml,
-      css
-    });
-  }
-  return result;
-}
-
-function saveLocalSample(js, css, xml) {
-  const str = JSON.stringify({ js, css, xml });
-  localStorage.setItem("owl-playground-local-sample", str);
-}
-
-function deleteLocalSample() {
-  localStorage.removeItem("owl-playground-local-sample");
-}
-
-function useSamples() {
-  const samples = loadSamples();
-  const component = owl.useComponent();
-  let interval;
-
-  onMounted(() => {
-    const state = component.state;
-    interval = setInterval(() => {
-      if (component.isDirty) {
-        saveLocalSample(state.js, state.css, state.xml);
-      }
-    }, 1000);
-  });
-  onWillUnmount(() => {
-    clearInterval(interval);
-  });
-  return samples;
-}
-
-//------------------------------------------------------------------------------
-// Tabbed editor
-//------------------------------------------------------------------------------
-class TabbedEditor extends owl.Component {
-  setup() {
-    const props = this.props;
-    this.state = useState({
-      currentTab: props.js !== false ? "js" : props.xml ? "xml" : "css"
-    });
-    this.setTab = debounce(this.setTab.bind(this), 250, true);
-
-    this.sessions = {};
-    this._setupSessions(props);
-    this.editorNode = useRef("editor");
-    this._updateCode = this._updateCode.bind(this);
-
-    onMounted(() => {
-      this.editor = this.editor || ace.edit(this.editorNode.el);
-
-      this.editor.setValue(this.props[this.state.currentTab], -1);
-      this.editor.setFontSize("12px");
-      this.editor.setTheme("ace/theme/monokai");
-      this.editor.setSession(this.sessions[this.state.currentTab]);
-      const tabSize = this.state.currentTab === "xml" ? 2 : 4;
-      this.editor.session.setOption("tabSize", tabSize);
-      this.editor.on("blur", this._updateCode);
-      this.interval = setInterval(this._updateCode, 3000);
-    });
-
-    onPatched(() => {
-      const session = this.sessions[this.state.currentTab];
-      let content = this.props[this.state.currentTab];
-      if (content === false) {
-        const tab = this.props.js !== false ? "js" : this.props.xml ? "xml" : "css";
-        content = this.props[tab];
-        this.state.currentTab = tab;
-      }
-      if (this.editor.getValue() !== content) {
-        session.setValue(content, -1);
-        this.editor.setSession(session);
-        this.editor.resize();
-      }
-    });
-
-    onWillUpdateProps((nextProps) => this._setupSessions(nextProps));
-
-    onWillUnmount(() => {
-      clearInterval(this.interval);
-      this.editor.off("blur", this._updateCode);
-    });
-  }
-
-  setTab(tab) {
-    if (this.state.currentTab !== tab) {
-      this.state.currentTab = tab;
-      const session = this.sessions[this.state.currentTab];
-      session.doc.setValue(this.props[tab], -1);
-      this.editor.setSession(session);
-    }
-  }
-
-  onMouseDown(ev) {
-    if (ev.target.tagName === "DIV") {
-      let y = ev.clientY;
-      const resizer = ev => {
-        const delta = ev.clientY - y;
-        y = ev.clientY;
-        this.trigger("updatePanelHeight", { delta });
-      };
-      document.body.addEventListener("mousemove", resizer);
-      document.body.addEventListener("mouseup", () => {
-        document.body.removeEventListener("mousemove", resizer);
-      });
-    }
-  }
-
-  _setupSessions(props) {
-    for (let tab of ["js", "xml", "css"]) {
-      if (props[tab] !== false && !this.sessions[tab]) {
-        this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
-        this.sessions[tab].setOption("useWorker", false);
-        const tabSize = tab === "xml" ? 2 : 4;
-        this.sessions[tab].setOption("tabSize", tabSize);
-        this.sessions[tab].setUndoManager(new ace.UndoManager());
-      }
-    }
-  }
-
-  _updateCode() {
-    const editorValue = this.editor.getValue();
-    const propsValue = this.props[this.state.currentTab];
-    if (editorValue !== propsValue) {
-      this.props.updateCode({
-        type: this.state.currentTab,
-        value: editorValue
-      });
-    }
-  }
-}
-TabbedEditor.template = "TabbedEditor";
-
-//------------------------------------------------------------------------------
-// MAIN APP
-//------------------------------------------------------------------------------
-class App extends owl.Component {
-  setup() {
-    this.version = owl.__info__.version;
-    this.SAMPLES = useSamples();
-    this.isDirty = false;
-
-    this.state = useState({
-      js: this.SAMPLES[0].code,
-      css: this.SAMPLES[0].css || "",
-      xml: this.SAMPLES[0].xml || DEFAULT_XML,
-      displayWelcome: true,
-      splitLayout: true,
-      leftPaneWidth: Math.ceil(window.innerWidth / 2),
-      topPanelHeight: null
-    });
-
-    this.toggleLayout = debounce(this.toggleLayout, 250, true);
-    this.runCode = debounce(this.runCode, 250, true);
-    this.downloadCode = debounce(this.downloadCode, 250, true);
-    this.content = useRef("content");
-    this.updateCode = this.updateCode.bind(this);
-    if (window.location.hash) {
-      try {
-        const { js, css, xml } = JSON.parse(atob(decodeURIComponent(window.location.hash.slice(1))));
-        if (![js, css, xml].every(item => typeof item === "string")) {
-          return;
-        }
-        Object.assign(this.state, { js, css, xml });
-      } catch {}
-    }
-  }
-
-  runCode() {
-    this.content.el.innerHTML = "";
-    this.state.displayWelcome = false;
-
-    const { js, css, xml } = this.state;
-    const subiframe = makeCodeIframe(js, css, xml);
-    this.content.el.appendChild(subiframe);
-  }
-
-  shareCode() {
-    const state = btoa(JSON.stringify({ js: this.state.js, css: this.state.css, xml: this.state.xml }));
-    const link = new URL(window.location.href);
-    link.hash = state;
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(link.href);
-      clearTimeout(this.state.copied)
-      this.state.copied = setTimeout(() => this.state.copied = null, 2000);
-    }
-    window.location.href = link.href;
-  }
-
-  setSample(ev) {
-    const sample = this.SAMPLES.find(s => s.description === ev.target.value);
-    this.state.js = sample.code;
-    this.state.css = sample.css || "";
-    this.state.xml = sample.xml || DEFAULT_XML;
-    deleteLocalSample();
-    this.isDirty = false;
-  }
-
-  get leftPaneStyle() {
-    return `width:${this.state.leftPaneWidth}px`;
-  }
-
-  get rightPaneStyle() {
-    return `width:${window.innerWidth - 6 - this.state.leftPaneWidth}px`;
-  }
-
-  get topEditorStyle() {
-    return `flex: 0 0 ${this.state.topPanelHeight}px`;
-  }
-
-  onMouseDown() {
-    const resizer = ev => {
-      this.state.leftPaneWidth = ev.clientX;
-    };
-
-    document.body.addEventListener("mousemove", resizer);
-    for (let iframe of document.getElementsByTagName("iframe")) {
-      iframe.classList.add("disabled");
-    }
-
-    document.body.addEventListener("mouseup", () => {
-      document.body.removeEventListener("mousemove", resizer);
-      for (let iframe of document.getElementsByTagName("iframe")) {
-        iframe.classList.remove("disabled");
-      }
-    });
-  }
-  updateCode({type, value}) {
-    if (this.state[type] !== value) {
-      this.state[type] = value;
-      this.isDirty = true;
-    }
-  }
-  toggleLayout() {
-    this.state.splitLayout = !this.state.splitLayout;
-  }
-  updatePanelHeight(ev) {
-    if (!ev.detail.delta) {
-      return;
-    }
-    let height = this.state.topPanelHeight;
-    if (!height) {
-      height = document.getElementsByClassName("tabbed-editor")[0].clientHeight;
-    }
-    this.state.topPanelHeight = height + ev.detail.delta;
-  }
-
-  async downloadCode() {
-    const { js, css, xml } = this.state;
-    const content = await exportStandaloneApp(js, css, xml);
-    await loadJS("libs/FileSaver.min.js");
-    saveAs(content, "app.zip");
-  }
-}
-App.components = { TabbedEditor };
-App.template = "App";
-
-//------------------------------------------------------------------------------
-// Application initialization
-//------------------------------------------------------------------------------
-async function start() {
-  document.title = `${document.title} (v${owl.__info__.version})`;
-  const commit = `https://github.com/odoo/owl/commit/${owl.__info__.hash}`;
-  console.info(`This application is using Owl built with the following commit:`, commit);
-  const [templates] = await Promise.all([
-    owl.loadFile("templates.xml"),
-    owl.whenReady()
-  ]);
-  const rootApp = new owl.App(App);
-  rootApp.addTemplates(templates);
-
-  await  rootApp.mount(document.body);
-}
-
-start();

playground/export_snippet.js

@@ -1,123 +0,0 @@
-import { loadJS } from "./utils.js";
-
-const sourceCache = new Map();
-async function getSourceCode(filePath) {
-    if (sourceCache.has(filePath)) {
-        return sourceCache.get(filePath);
-    }
-    let source = await fetch(`${filePath}.js`);
-    source = await source.text();
-    sourceCache.set(filePath, source);
-    return source;
-}
-
-const DEFAULT_HTML = `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>OWL App</title>
-    <link rel="icon" href="data:,">
-
-    <script src="owl.js"></script>
-    <link rel="stylesheet" href="app.css">
-    <script type="module" src="app.js"></script>
-    <script type="module" src="utils.js"></script>
-  </head>
-  <body>
-  </body>
-</html>
-`;
-
-const APP_PY = `#!/usr/bin/env python3
-
-import threading
-import time
-
-from http.server import SimpleHTTPRequestHandler, HTTPServer
-
-def start_server():
-    SimpleHTTPRequestHandler.extensions_map['.js'] = 'application/javascript'
-    httpd = HTTPServer(('0.0.0.0', 3600), SimpleHTTPRequestHandler)
-    httpd.serve_forever()
-
-url = 'http://127.0.0.1:3600'
-
-if __name__ == "__main__":
-    print("Owl Application")
-    print("---------------")
-    print("Server running on: {}".format(url))
-    threading.Thread(target=start_server, daemon=True).start()
-
-    while True:
-        try:
-            time.sleep(1)
-        except KeyboardInterrupt:
-            httpd.server_close()
-            quit(0)
-`;
-
-/**
- * Make a zip file containing a functioning application
- */
-export async function exportStandaloneApp(js, css, xml) {
-  await loadJS("libs/jszip.min.js");
-
-  const zip = new JSZip();
-  const processedJS = js
-    .split("\n")
-    .map(l => (l === "" ? "" : "  " + l))
-    .join("\n");
-
-  const JS = `
-/**
- * This is the javascript code defined in the playground.
- * In a larger application, this code should probably be moved in different
- * sub files.
- */
-import * as utils from "./utils.js";
-async function app() {
-${processedJS}
-}
-
-/**
- * Initialization code
- * This code load templates, and make sure everything is properly connected.
- */
-function prepareOWLApp(templates) {
-  const _configure = owl.App.prototype.configure;
-  owl.App.prototype.configure = function configureOverriden(config) {
-    config = Object.assign({ dev: true }, config); 
-    this.addTemplates(templates);
-    return _configure.call(this, config);
-  }
-}
-
-async function start() {
-  let templates;
-  try {
-    templates = await owl.loadFile('app.xml');
-  } catch(e) {
-    console.error(\`This app requires a static server.  If you have python installed, try 'python app.py'\`);
-    return;
-  }
-  prepareOWLApp(templates);
-  app();
-}
-
-start();
-`;
-
-  const [owlSrc, utilsSrc] = await Promise.all([
-    getSourceCode("../owl"),
-    getSourceCode("./utils"),
-  ]);
-
-  zip.file("app.js", JS);
-  zip.file("utils.js", utilsSrc);
-  zip.file("app.css", css);
-  zip.file("app.py", APP_PY);
-  zip.file("app.xml", xml);
-  zip.file("index.html", DEFAULT_HTML);
-  zip.file("owl.js", owlSrc);
-  return zip.generateAsync({ type: "blob" });
-}

playground/utils.js

@@ -1,49 +0,0 @@
-export function debounce(func, wait, immediate) {
-  let timeout;
-  return function () {
-    const context = this;
-    const args = arguments;
-    function later() {
-      timeout = null;
-      if (!immediate) {
-        func.apply(context, args);
-      }
-    }
-    const callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) {
-      func.apply(context, args);
-    }
-  };
-}
-
-export function useBus(bus, evName, cb) {
-  bus.addEventListener(evName, cb);
-  owl.onWillUnmount(() => {
-    bus.removeEventListener(evName, cb);
-  });
-}
-
-const loadedScripts = {};
-
-export function loadJS(url) {
-  if (url in loadedScripts) {
-    return loadedScripts[url];
-  }
-  const promise = new Promise(function (resolve, reject) {
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = url;
-    script.onload = function () {
-      resolve();
-    };
-    script.onerror = function () {
-      reject(`Error loading file '${url}'`);
-    };
-    const head = document.head || document.getElementsByTagName("head")[0];
-    head.appendChild(script);
-  });
-  loadedScripts[url] = promise;
-  return promise;
-}

release-notes.md

@@ -1,8 +0,0 @@
-# v1.0.5
-
-- lots of doc improvements
-- qweb: ignore comments between t-if/t-elif/t-else
-- qweb: support attributes with inside quotes
-- component: concurrency bug fix
-- component: cancel previous mounting operations if necessary
-- transition: no crash if element added/removed quickly

rollup.config.js

@@ -0,0 +1,14 @@
+import { version } from "./package.json";
+import git from "git-rev-sync";
+
+// rollup.config.js
+export default {
+  input: "dist/owl/index.js",
+  output: {
+    file: "dist/owl.js",
+    format: "iife",
+    name: "owl",
+    extend: true,
+    outro: `exports.__info__.version = '${version}';\nexports.__info__.date = '${new Date().toISOString()}';\nexports.__info__.hash = '${git.short()}';\nexports.__info__.url = 'https://github.com/odoo/owl';`
+  }
+};

src/component.ts

@@ -0,0 +1,666 @@
+import { Observer } from "./observer";
+import { QWeb, CompiledTemplate } from "./qweb_core";
+import { h, patch, VNode } from "./vdom";
+
+/**
+ * Owl Component System
+ *
+ * This file introduces a declarative and composable component system. It
+ * contains:
+ *
+ * - the Env interface (generic type for the environment)
+ * - the Meta interface (the owl specific metadata attached to a component)
+ * - the Component class
+ */
+
+//------------------------------------------------------------------------------
+// Types/helpers
+//------------------------------------------------------------------------------
+
+/**
+ * An Env (environment) is an object that will be (mostly) shared between all
+ * components of an Owl application.  It is the location which should contain
+ * the qweb instance necessary to render all components.
+ *
+ * Note that it is totally fine to extend the environment with application
+ * specific keys/objects/whatever.  For example, a key `isMobile` (to declare
+ * if we are in "mobile" mode), or a shared bus could be useful.
+ */
+export interface Env {
+  qweb: QWeb;
+}
+
+/**
+ * This is mostly an internal detail of implementation. The Meta interface is
+ * useful to typecheck and describe the internal keys used by Owl to manage the
+ * component tree.
+ */
+export interface Meta<T extends Env, Props> {
+  readonly id: number;
+  vnode: VNode | null;
+  isMounted: boolean;
+  isDestroyed: boolean;
+  parent: Component<T, any, any> | null;
+  children: { [key: number]: Component<T, any, any> };
+  // children mapping: from templateID to widgetID
+  // should it be a map number => Widget?
+  cmap: { [key: number]: number };
+
+  renderId: number;
+  renderProps: Props | null;
+  renderPromise: Promise<VNode> | null;
+  boundHandlers: { [key: number]: any };
+  observer?: Observer;
+  render?: CompiledTemplate;
+  mountedHandlers: { [key: number]: Function };
+}
+
+// If a component does not define explicitely a template
+// key, it needs to find a template with its name (or a parent's).  This is
+// qweb dependant, so we need a place to store this information indexed by
+// qweb instances.
+const TEMPLATE_MAP: { [key: number]: { [name: string]: string } } = {};
+
+//------------------------------------------------------------------------------
+// Widget
+//------------------------------------------------------------------------------
+let nextId = 1;
+
+export class Component<T extends Env, Props extends {}, State extends {}> {
+  readonly __owl__: Meta<Env, Props>;
+  template?: string;
+
+  /**
+   * The `el` is the root element of the widget.  Note that it could be null:
+   * this is the case if the widget is not mounted yet, or is destroyed.
+   */
+  get el(): HTMLElement | null {
+    return this.__owl__.vnode ? (<any>this).__owl__.vnode.elm : null;
+  }
+
+  env: T;
+  state?: State;
+  props: Props;
+
+  // type of props is not easily representable in typescript...
+  static props?: any;
+  static defaultProps?: any;
+
+  refs: {
+    [key: string]: Component<T, any, any> | HTMLElement | undefined;
+  } = {};
+
+  //--------------------------------------------------------------------------
+  // Lifecycle
+  //--------------------------------------------------------------------------
+
+  /**
+   * Creates an instance of Component.
+   *
+   * The root widget of a component tree needs an environment:
+   *
+   * ```javascript
+   *   const root = new RootWidget(env, props);
+   * ```
+   *
+   * Every other widget simply needs a reference to its parent:
+   *
+   * ```javascript
+   *   const child = new SomeWidget(parent, props);
+   * ```
+   *
+   * Note that most of the time, only the root widget needs to be created by
+   * hand.  Other widgets should be created automatically by the framework (with
+   * the t-widget directive in a template)
+   */
+  constructor(parent: Component<T, any, any> | T, props?: Props) {
+    const defaultProps = (<any>this.constructor).defaultProps;
+    if (defaultProps) {
+      props = this._applyDefaultProps(props, defaultProps);
+    }
+    if (QWeb.dev) {
+      this._validateProps(props || {});
+    }
+    // is this a good idea?
+    //   Pro: if props is empty, we can create easily a widget
+    //   Con: this is not really safe
+    //   Pro: but creating widget (by a template) is always unsafe anyway
+    this.props = <Props>props || <Props>{};
+    let id: number = nextId++;
+    let p: Component<T, any, any> | null = null;
+    if (parent instanceof Component) {
+      p = parent;
+      this.env = parent.env;
+      parent.__owl__.children[id] = this;
+    } else {
+      this.env = parent;
+    }
+    this.__owl__ = {
+      id: id,
+      vnode: null,
+      isMounted: false,
+      isDestroyed: false,
+      parent: p,
+      children: {},
+      cmap: {},
+      renderId: 1,
+      renderPromise: null,
+      renderProps: props || null,
+      boundHandlers: {},
+      mountedHandlers: {}
+    };
+  }
+
+  /**
+   * willStart is an asynchronous hook that can be implemented to perform some
+   * action before the initial rendering of a component.
+   *
+   * It will be called exactly once before the initial rendering. It is useful
+   * in some cases, for example, to load external assets (such as a JS library)
+   * before the widget is rendered.
+   *
+   * Note that a slow willStart method will slow down the rendering of the user
+   * interface.  Therefore, some effort should be made to make this method as
+   * fast as possible.
+   *
+   * Note: this method should not be called manually.
+   */
+  async willStart() {}
+
+  /**
+   * mounted is a hook that is called each time a component is attached to the
+   * DOM. This is a good place to add some listeners, or to interact with the
+   * DOM, if the component needs to perform some measure for example.
+   *
+   * Note: this method should not be called manually.
+   *
+   * @see willUnmount
+   */
+  mounted() {}
+
+  /**
+   * The willUpdateProps is an asynchronous hook, called just before new props
+   * are set. This is useful if the component needs some asynchronous task
+   * performed, depending on the props (for example, assuming that the props are
+   * some record Id, fetching the record data).
+   *
+   * This hook is not called during the first render (but willStart is called
+   * and performs a similar job).
+   */
+  async willUpdateProps(nextProps: Props) {}
+
+  /**
+   * The willPatch hook is called just before the DOM patching process starts.
+   * It is not called on the initial render.  This is useful to get some
+   * information which are in the DOM.  For example, the current position of the
+   * scrollbar
+   *
+   * The return value of willPatch will be given to the patched function.
+   */
+  willPatch(): any {}
+
+  /**
+   * This hook is called whenever a component did actually update its props,
+   * state or env.
+   *
+   * This method is not called on the initial render. It is useful to interact
+   * with the DOM (for example, through an external library) whenever the
+   * component was updated.
+   *
+   * Updating the widget state in this hook is possible, but not encouraged.
+   * One need to be careful, because updates here will cause rerender, which in
+   * turn will cause other calls to updated. So, we need to be particularly
+   * careful at avoiding endless cycles.
+   *
+   * The snapshot parameter is the result of the call to willPatch.
+   */
+  patched(snapshot: any) {}
+
+  /**
+   * willUnmount is a hook that is called each time just before a component is
+   * unmounted from the DOM. This is a good place to remove some listeners, for
+   * example.
+   *
+   * Note: this method should not be called manually.
+   *
+   * @see mounted
+   */
+  willUnmount() {}
+
+  //--------------------------------------------------------------------------
+  // Public
+  //--------------------------------------------------------------------------
+
+  /**
+   * Mount the component to a target element.
+   *
+   * This should only be done if the component was created manually. Components
+   * created declaratively in templates are managed by the Owl system.
+   */
+  async mount(target: HTMLElement): Promise<void> {
+    const vnode = await this._prepare();
+    if (this.__owl__.isDestroyed) {
+      // component was destroyed before we get here...
+      return;
+    }
+    this._patch(vnode);
+    target.appendChild(this.el!);
+
+    if (document.body.contains(target)) {
+      this._callMounted();
+    }
+  }
+
+  unmount() {
+    if (this.__owl__.isMounted) {
+      this._callWillUnmount();
+      this.el!.remove();
+    }
+  }
+
+  async render(force: boolean = false, patchQueue?: any[]): Promise<void> {
+    const __owl__ = this.__owl__;
+    if (!__owl__.isMounted) {
+      return;
+    }
+    const shouldPatch: boolean = !patchQueue;
+    if (shouldPatch) {
+      patchQueue = [];
+    }
+    const renderVDom = this._render(force, patchQueue);
+    const renderId = __owl__.renderId;
+    await renderVDom;
+
+    if (shouldPatch && __owl__.isMounted && renderId === __owl__.renderId) {
+      // we only update the vnode and the actual DOM if no other rendering
+      // occurred between now and when the render method was initially called.
+      this._applyPatchQueue(<any[]>patchQueue);
+    }
+  }
+
+  /**
+   * Destroy the component.  This operation is quite complex:
+   *  - it recursively destroy all children
+   *  - call the willUnmount hooks if necessary
+   *  - remove the dom node from the dom
+   *
+   * This should only be called manually if you created the widget.  Most widgets
+   * will be automatically destroyed.
+   */
+  destroy() {
+    const __owl__ = this.__owl__;
+    if (!__owl__.isDestroyed) {
+      const el = this.el;
+      this._destroy(__owl__.parent);
+      if (el) {
+        el.remove();
+      }
+    }
+  }
+
+  /**
+   * This method is called by the component system whenever its props are
+   * updated. If it returns true, then the component will be rendered.
+   * Otherwise, it will skip the rendering (also, its props will not be updated)
+   */
+  shouldUpdate(nextProps: Props): boolean {
+    return true;
+  }
+
+  /**
+   * This method is the correct way to update the environment of a widget. Doing
+   * this will cause a full rerender of the widget and its children, so this is
+   * an operation that should not be done frequently.
+   *
+   * A good usecase for updating the environment would be to update some mostly
+   * static config keys, such as a boolean to determine if we are in mobile
+   * mode or not.
+   */
+  async updateEnv(nextEnv: Partial<T>): Promise<void> {
+    const __owl__ = this.__owl__;
+    if (__owl__.parent && __owl__.parent.env === this.env) {
+      this.env = Object.create(this.env);
+    }
+    Object.assign(this.env, nextEnv);
+    if (__owl__.isMounted) {
+      await this.render(true);
+    }
+  }
+
+  /**
+   * Emit a custom event of type 'eventType' with the given 'payload' on the
+   * component's el, if it exists. However, note that the event will only bubble
+   * up to the parent DOM nodes. Thus, it must be called between mounted() and
+   * willUnmount().
+   */
+  trigger(eventType: string, payload?: any) {
+    if (this.el) {
+      const ev = new CustomEvent(eventType, {
+        bubbles: true,
+        cancelable: true,
+        detail: payload
+      });
+      this.el.dispatchEvent(ev);
+    }
+  }
+
+  //--------------------------------------------------------------------------
+  // Private
+  //--------------------------------------------------------------------------
+
+  _destroy(parent: Component<any, any, any> | null) {
+    const __owl__ = this.__owl__;
+    const isMounted = __owl__.isMounted;
+    if (isMounted) {
+      this.willUnmount();
+      __owl__.isMounted = false;
+    }
+    const children = __owl__.children;
+    for (let key in children) {
+      children[key]._destroy(this);
+    }
+    if (parent) {
+      let id = __owl__.id;
+      delete parent.__owl__.children[id];
+      __owl__.parent = null;
+    }
+    __owl__.isDestroyed = true;
+    delete __owl__.vnode;
+  }
+
+  _callMounted() {
+    const __owl__ = this.__owl__;
+    const children = __owl__.children;
+    for (let id in children) {
+      const comp = children[id];
+      if (!comp.__owl__.isMounted && this.el!.contains(comp.el)) {
+        comp._callMounted();
+      }
+    }
+    __owl__.isMounted = true;
+    const handlers = __owl__.mountedHandlers;
+    for (let key in handlers) {
+      handlers[key]();
+    }
+    this.mounted();
+  }
+
+  _callWillUnmount() {
+    this.willUnmount();
+    const __owl__ = this.__owl__;
+    __owl__.isMounted = false;
+    const children = __owl__.children;
+    for (let id in children) {
+      const comp = children[id];
+      if (comp.__owl__.isMounted) {
+        comp._callWillUnmount();
+      }
+    }
+  }
+
+  async _updateProps(
+    nextProps: Props,
+    forceUpdate: boolean = false,
+    patchQueue?: any[]
+  ): Promise<void> {
+    const shouldUpdate = forceUpdate || this.shouldUpdate(nextProps);
+    if (shouldUpdate) {
+      const defaultProps = (<any>this.constructor).defaultProps;
+      if (defaultProps) {
+        nextProps = this._applyDefaultProps(nextProps, defaultProps);
+      }
+      if (QWeb.dev) {
+        this._validateProps(nextProps);
+      }
+      await this.willUpdateProps(nextProps);
+      this.props = nextProps;
+      await this.render(forceUpdate, patchQueue);
+    }
+  }
+
+  _patch(vnode) {
+    const __owl__ = this.__owl__;
+    __owl__.renderPromise = null;
+    const target = __owl__.vnode || document.createElement(vnode.sel!);
+    __owl__.vnode = patch(target, vnode);
+  }
+  _prepare(): Promise<VNode> {
+    const __owl__ = this.__owl__;
+    __owl__.renderProps = this.props;
+    __owl__.renderPromise = this._prepareAndRender();
+    return __owl__.renderPromise;
+  }
+
+  async _prepareAndRender(): Promise<VNode> {
+    await this.willStart();
+    const __owl__ = this.__owl__;
+    if (__owl__.isDestroyed) {
+      return Promise.resolve(h("div"));
+    }
+    const qweb = this.env.qweb;
+    if (!this.template) {
+      let tmap = TEMPLATE_MAP[qweb.id];
+      if (!tmap) {
+        tmap = {};
+        TEMPLATE_MAP[qweb.id] = tmap;
+      }
+      let p = (<any>this).constructor;
+      let name: string = p.name;
+      let template = tmap[name];
+      if (template) {
+        this.template = template;
+      } else {
+        while (
+          (template = p.name) &&
+          !(template in qweb.templates) &&
+          p !== Component
+        ) {
+          p = p.__proto__;
+        }
+        if (p === Component) {
+          throw new Error(
+            `Could not find template for component "${this.constructor.name}"`
+          );
+        } else {
+          tmap[name] = template;
+          this.template = template;
+        }
+      }
+    }
+    __owl__.render = qweb.render.bind(qweb, this.template);
+    this._observeState();
+    return this._render();
+  }
+
+  async _render(
+    force: boolean = false,
+    patchQueue: any[] = []
+  ): Promise<VNode> {
+    const __owl__ = this.__owl__;
+    __owl__.renderId++;
+    const promises: Promise<void>[] = [];
+    const patch: any[] = [this];
+    if (__owl__.isMounted) {
+      patchQueue.push(patch);
+    }
+    if (__owl__.observer) {
+      __owl__.observer.allowMutations = false;
+    }
+    let vnode = __owl__.render!(this, {
+      promises,
+      handlers: __owl__.boundHandlers,
+      mountedHandlers: __owl__.mountedHandlers,
+      forceUpdate: force,
+      patchQueue
+    });
+    patch.push(vnode);
+    if (__owl__.observer) {
+      __owl__.observer.allowMutations = true;
+    }
+
+    // this part is critical for the patching process to be done correctly. The
+    // tricky part is that a child widget can be rerendered on its own, which
+    // will update its own vnode representation without the knowledge of the
+    // parent widget.  With this, we make sure that the parent widget will be
+    // able to patch itself properly after
+    vnode.key = __owl__.id;
+    __owl__.renderProps = this.props;
+    __owl__.renderPromise = Promise.all(promises).then(() => vnode);
+    return __owl__.renderPromise;
+  }
+
+  /**
+   * Only called by qweb t-widget directive
+   */
+  _mount(vnode: VNode, elm: HTMLElement): VNode {
+    const __owl__ = this.__owl__;
+    __owl__.vnode = patch(elm, vnode);
+    if (__owl__.parent!.__owl__.isMounted && !__owl__.isMounted) {
+      this._callMounted();
+    }
+    return __owl__.vnode;
+  }
+
+  /**
+   * Only called by qweb t-widget directive (when t-keepalive is set)
+   */
+  _remount() {
+    const __owl__ = this.__owl__;
+    if (!__owl__.isMounted) {
+      __owl__.isMounted = true;
+      this.mounted();
+    }
+  }
+
+  _observeState() {
+    if (this.state) {
+      const __owl__ = this.__owl__;
+      __owl__.observer = new Observer();
+      __owl__.observer.observe(this.state);
+      __owl__.observer.notifyCB = this.render.bind(this);
+    }
+  }
+
+  /**
+   * Apply default props (only top level).
+   *
+   * Note that this method does not modify in place the props, it returns a new
+   * prop object
+   */
+  _applyDefaultProps(props: Object | undefined, defaultProps: Object): Props {
+    props = props ? Object.create(props) : {};
+    for (let propName in defaultProps) {
+      if (props![propName] === undefined) {
+        props![propName] = defaultProps[propName];
+      }
+    }
+    return <Props>props;
+  }
+
+  /**
+   * Apply the given patch queue. A patch is a pair [c, vn], where c is a
+   * Component instance and vn a VNode.
+   *   1) Call 'willPatch' on the component of each patch
+   *   2) Call '_patch' on the component of each patch
+   *   3) Call 'patched' on the component of each patch, in inverse order
+   */
+  _applyPatchQueue(patchQueue: any[]) {
+    const patchLen = patchQueue.length;
+    for (let i = 0; i < patchLen; i++) {
+      const patch = patchQueue[i];
+      patch.push(patch[0].willPatch());
+    }
+    for (let i = 0; i < patchLen; i++) {
+      const patch = patchQueue[i];
+      patch[0]._patch(patch[1]);
+    }
+    for (let i = patchLen - 1; i >= 0; i--) {
+      const patch = patchQueue[i];
+      patch[0].patched(patch[2]);
+    }
+  }
+
+  /**
+   * Validate the component props (or next props) against the (static) props
+   * description.  This is potentially an expensive operation: it may needs to
+   * visit recursively the props and all the children to check if they are valid.
+   * This is why it is only done in 'dev' mode.
+   */
+  _validateProps(props: Object) {
+    const propsDef = (<any>this.constructor).props;
+    if (propsDef instanceof Array) {
+      // list of strings (prop names)
+      for (let i = 0, l = propsDef.length; i < l; i++) {
+        if (!(propsDef[i] in props)) {
+          throw new Error(
+            `Missing props '${propsDef[i]}' (widget '${this.constructor.name}')`
+          );
+        }
+      }
+    } else if (propsDef) {
+      // propsDef is an object now
+      for (let propName in propsDef) {
+        if (!(propName in props)) {
+          if (propsDef[propName] && !propsDef[propName].optional) {
+            throw new Error(
+              `Missing props '${propName}' (widget '${this.constructor.name}')`
+            );
+          } else {
+            break;
+          }
+        }
+        let isValid = isValidProp(props[propName], propsDef[propName]);
+        if (!isValid) {
+          throw new Error(
+            `Props '${propName}' of invalid type in widget '${
+              this.constructor.name
+            }'`
+          );
+        }
+      }
+    }
+  }
+}
+
+//------------------------------------------------------------------------------
+// Prop validation helper
+//------------------------------------------------------------------------------
+
+/**
+ * Check if an invidual prop value matches its (static) prop definition
+ */
+function isValidProp(prop, propDef): boolean {
+  if (typeof propDef === "function") {
+    // Check if a value is constructed by some Constructor.  Note that there is a
+    // slight abuse of language: we want to consider primitive values as well.
+    //
+    // So, even though 1 is not an instance of Number, we want to consider that
+    // it is valid.
+    if (typeof prop === "object") {
+      return prop instanceof propDef;
+    }
+    return typeof prop === propDef.name.toLowerCase();
+  } else if (propDef instanceof Array) {
+    // If this code is executed, this means that we want to check if a prop
+    // matches at least one of its descriptor.
+    let result = false;
+    for (let i = 0, iLen = propDef.length; i < iLen; i++) {
+      result = result || isValidProp(prop, propDef[i]);
+    }
+    return result;
+  }
+  // propsDef is an object
+  let result = isValidProp(prop, propDef.type);
+  if (propDef.type === Array) {
+    for (let i = 0, iLen = prop.length; i < iLen; i++) {
+      result = result && isValidProp(prop[i], propDef.element);
+    }
+  }
+  if (propDef.type === Object) {
+    const shape = propDef.shape;
+    for (let key in shape) {
+      result = result && isValidProp(prop[key], shape[key]);
+    }
+  }
+  return result;
+}

src/event_bus.ts

@@ -0,0 +1,79 @@
+/**
+ * We define here a simple event bus: it can
+ * - emit events
+ * - add/remove listeners.
+ *
+ * This is a useful pattern of communication in many cases.  For OWL, each
+ * components and stores are event buses.
+ */
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+
+export type Callback = (...args: any[]) => void;
+
+export interface Subscription {
+  owner: any;
+  callback: Callback;
+}
+
+//------------------------------------------------------------------------------
+// EventBus
+//------------------------------------------------------------------------------
+
+export class EventBus {
+  subscriptions: { [eventType: string]: Subscription[] } = {};
+
+  /**
+   * Add a listener for the 'eventType' events.
+   *
+   * Note that the 'owner' of this event can be anything, but will more likely
+   * be a widget or a class. The idea is that the callback will be called with
+   * the proper owner bound.
+   *
+   * Also, the owner should be kind of unique. This will be used to remove the
+   * listener.
+   */
+  on(eventType: string, owner: any, callback: Callback) {
+    if (!callback) {
+      throw new Error("Missing callback");
+    }
+    if (!this.subscriptions[eventType]) {
+      this.subscriptions[eventType] = [];
+    }
+    this.subscriptions[eventType].push({
+      owner,
+      callback
+    });
+  }
+
+  /**
+   * Remove a listener
+   */
+  off(eventType: string, owner: any) {
+    const subs = this.subscriptions[eventType];
+    if (subs) {
+      this.subscriptions[eventType] = subs.filter(s => s.owner !== owner);
+    }
+  }
+
+  /**
+   * Emit an event of type 'eventType'.  Any extra arguments will be passed to
+   * the listeners callback.
+   */
+  trigger(eventType: string, ...args: any[]) {
+    const subs = this.subscriptions[eventType] || [];
+    for (let i = 0, iLen = subs.length; i < iLen; i++) {
+      const sub = subs[i];
+      sub.callback.call(sub.owner, ...args);
+    }
+  }
+
+  /**
+   * Remove all subscriptions.
+   */
+  clear() {
+    this.subscriptions = {};
+  }
+}

src/index.ts

@@ -0,0 +1,39 @@
+/**
+ * This file is the main file packaged by rollup (see rollup.config.js).  From
+ * this file, we export all public owl elements.
+ *
+ * Note that dynamic values, such as a date or a commit hash are added by rollup
+ */
+export { Component } from "./component";
+export { EventBus } from "./event_bus";
+export { Observer } from "./observer";
+
+// we need to import manually the extra directives so they can register
+// themselves in QWeb, otherwise these files will not even be loaded.
+import "./qweb_directives";
+import "./qweb_extensions";
+import { QWeb } from "./qweb_core";
+export { QWeb };
+
+export { connect, Store } from "./store";
+import * as _utils from "./utils";
+
+export const __info__ = {};
+
+Object.defineProperty(__info__, "mode", {
+  get() {
+    return QWeb.dev ? "dev" : "prod";
+  },
+  set(mode: string) {
+    QWeb.dev = mode === "dev";
+    if (QWeb.dev) {
+      const url = `https://github.com/odoo/owl/blob/master/doc/tooling.md#development-mode`;
+      console.warn(
+        `Owl is running in 'dev' mode.  This is not suitable for production use. See ${url} for more information.`
+      );
+    } else {
+        console.log(`Owl is now running in 'prod' mode.`)
+    }
+  }
+});
+export const utils = _utils;

src/observer.ts

@@ -0,0 +1,211 @@
+/**
+ * Owl Observer
+ *
+ * This code contains the logic that allows Owl to observe and react to state
+ * changes.
+ *
+ * This is a Observer class that can observe any JS values.  The way it works
+ * can be summarized thusly:
+ * - primitive values are not observed at all
+ * - Objects are observed by replacing all their keys with getters/setters
+ *   (recursively)
+ * - Arrays are observed by replacing their prototype with a customized version,
+ *   which wrap some methods to allow the tracking of each state change.
+ *
+ * Note that this code is inspired by Vue.
+ */
+
+//------------------------------------------------------------------------------
+// Modified Array prototype
+//------------------------------------------------------------------------------
+
+// we define here a new modified Array prototype, which basically override all
+// Array methods that change some state to be able to track their changes
+const methodsToPatch = [
+  "push",
+  "pop",
+  "shift",
+  "unshift",
+  "splice",
+  "sort",
+  "reverse"
+];
+const methodLen = methodsToPatch.length;
+
+const ArrayProto = Array.prototype;
+const ModifiedArrayProto = Object.create(ArrayProto);
+
+for (let i = 0; i < methodLen; i++) {
+  const method = methodsToPatch[i];
+  const initialMethod = ArrayProto[method];
+  ModifiedArrayProto[method] = function(...args) {
+    if (!this.__observer__.allowMutations) {
+      throw new Error(`Array cannot be changed here")`);
+    }
+    this.__observer__.rev++;
+    this.__observer__.notifyChange();
+    this.__owl__.rev++;
+    let parent = this;
+    do {
+      parent.__owl__.deepRev++;
+    } while ((parent = parent.__owl__.parent));
+    let inserted;
+    switch (method) {
+      case "push":
+      case "unshift":
+        inserted = args;
+        break;
+      case "splice":
+        inserted = args.slice(2);
+        break;
+    }
+    if (inserted) {
+      for (let i = 0, iLen = inserted.length; i < iLen; i++) {
+        this.__observer__.observe(inserted[i], this);
+      }
+    }
+    return initialMethod.call(this, ...args);
+  };
+}
+
+//------------------------------------------------------------------------------
+// Observer
+//------------------------------------------------------------------------------
+export class Observer {
+  rev: number = 1;
+  allowMutations: boolean = true;
+  dirty: boolean = false;
+
+  static set(target: any, key: number | string, value: any) {
+    if (!target.__owl__) {
+      throw Error(
+        "`Observer.set()` can only be called with observed Objects or Arrays"
+      );
+    }
+    target.__owl__.observer.set(target, key, value);
+  }
+
+  static delete(target: any, key: number | string) {
+    if (!target.__owl__) {
+      throw Error(
+        "`Observer.delete()` can only be called with observed Objects"
+      );
+    }
+    target.__owl__.observer.delete(target, key);
+  }
+
+  notifyCB() {}
+  notifyChange() {
+    this.dirty = true;
+    Promise.resolve().then(() => {
+      if (this.dirty) {
+        this.dirty = false;
+        this.notifyCB();
+      }
+    });
+  }
+
+  observe(value: any, parent?: any) {
+    if (value === null) {
+      // fun fact: typeof null === 'object'
+      return;
+    }
+    if (typeof value !== "object") {
+      return;
+    }
+    if ("__owl__" in value) {
+      // already observed
+      value.__owl__.parent = parent;
+      return;
+    }
+    if (Array.isArray(value)) {
+      this._observeArr(value, parent);
+    } else {
+      this._observeObj(value, parent);
+    }
+  }
+
+  set(target: any, key: number | string, value: any) {
+    let alreadyDefined =
+      key in target &&
+      Object.getOwnPropertyDescriptor(target, key)!.configurable === false;
+    if (alreadyDefined) {
+      target[key] = value;
+    } else {
+      this._addProp(target, key, value);
+      this._updateRevNumber(target);
+    }
+    this.notifyChange();
+  }
+
+  delete(target: any, key: number | string) {
+    delete target[key];
+    this._updateRevNumber(target);
+    this.notifyChange();
+  }
+
+  _observeObj<T extends { __owl__?: any }>(obj: T, parent?: any) {
+    obj.__owl__ = {
+      rev: this.rev,
+      deepRev: this.rev,
+      parent,
+      observer: this
+    };
+    Object.defineProperty(obj, "__owl__", { enumerable: false });
+    for (let key in obj) {
+      this._addProp(obj, key, obj[key]);
+    }
+  }
+
+  _observeArr(arr: Array<any>, parent?: any) {
+    (<any>arr).__owl__ = {
+      rev: this.rev,
+      deepRev: this.rev,
+      parent,
+      observer: this
+    };
+    Object.defineProperty(arr, "__owl__", { enumerable: false });
+    (<any>arr).__proto__ = Object.create(ModifiedArrayProto);
+    (<any>arr).__proto__.__observer__ = this;
+    for (let i = 0, iLen = arr.length; i < iLen; i++) {
+      this.observe(arr[i], arr);
+    }
+  }
+
+  _addProp<T extends { __owl__?: any }>(
+    obj: T,
+    key: string | number,
+    value: any
+  ) {
+    var self = this;
+    Object.defineProperty(obj, key, {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return value;
+      },
+      set(newVal) {
+        if (newVal !== value) {
+          if (!self.allowMutations) {
+            throw new Error(
+              `Observed state cannot be changed here! (key: "${key}", val: "${newVal}")`
+            );
+          }
+          self._updateRevNumber(obj);
+          value = newVal;
+          self.observe(newVal, obj);
+          self.notifyChange();
+        }
+      }
+    });
+    this.observe(value, obj);
+  }
+  _updateRevNumber(target: any) {
+    this.rev++;
+    target.__owl__.rev!++;
+    let parent = target;
+    do {
+      parent.__owl__.deepRev++;
+    } while ((parent = parent.__owl__.parent) && parent !== target);
+  }
+}

src/qweb_core.ts

@@ -0,0 +1,733 @@
+import { VNode, h } from "./vdom";
+import { QWebVar, compileExpr } from "./qweb_expressions";
+
+/**
+ * Owl QWeb Engine
+ *
+ * In this file, you will find a QWeb engine/template compiler.  It is the core
+ * of how Owl component works.
+ *
+ * Briefly, Owl QWeb compiles XML templates into functions that output a virtual
+ * DOM representation.
+ *
+ * We have here:
+ * - a CompilationContext class, which is an internal object that contains all
+ *   compilation specific information, while a template is being compiled.
+ * - a QWeb class: this is the code of the QWeb compiler.
+ *
+ * Note that this file does not contain the implementation of the QWeb
+ * directives (see qweb_directives.ts and qweb_extensions.ts).
+ */
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+export type EvalContext = { [key: string]: any };
+export type CompiledTemplate = (context: EvalContext, extra: any) => VNode;
+
+interface Template {
+  elem: Element;
+  fn: CompiledTemplate;
+}
+
+interface CompilationInfo {
+  node: Element;
+  qweb: QWeb;
+  ctx: Context;
+  fullName: string;
+  value: string;
+}
+
+interface NodeCreationCompilationInfo extends CompilationInfo {
+  nodeID: number;
+  addNodeHook: Function;
+}
+
+export interface Directive {
+  name: string;
+  extraNames?: string[];
+  priority: number;
+  // if return true, then directive is fully applied and there is no need to
+  // keep processing node. Otherwise, we keep going.
+  atNodeEncounter?(info: CompilationInfo): boolean | void;
+  atNodeCreation?(info: NodeCreationCompilationInfo): void;
+  finalize?(info: CompilationInfo): void;
+}
+
+//------------------------------------------------------------------------------
+// Const/global stuff/helpers
+//------------------------------------------------------------------------------
+
+const DISABLED_TAGS = [
+  "input",
+  "textarea",
+  "button",
+  "select",
+  "option",
+  "optgroup"
+];
+
+const lineBreakRE = /[\r\n]/;
+const whitespaceRE = /\s+/g;
+
+const DIRECTIVE_NAMES = {
+  name: 1,
+  att: 1,
+  attf: 1,
+  key: 1
+};
+
+const DIRECTIVES: Directive[] = [];
+
+const NODE_HOOKS_PARAMS = {
+  create: "(_, n)",
+  insert: "vn",
+  remove: "(vn, rm)"
+};
+
+interface Utils {
+  h: typeof h;
+  objectToAttrString(obj: Object): string;
+  shallowEqual(p1: Object, p2: Object): boolean;
+  [key: string]: any;
+}
+
+export const UTILS: Utils = {
+  h: h,
+  objectToAttrString(obj: Object): string {
+    let classes: string[] = [];
+    for (let k in obj) {
+      if (obj[k]) {
+        classes.push(k);
+      }
+    }
+    return classes.join(" ");
+  },
+  shallowEqual(p1, p2) {
+    for (let k in p1) {
+      if (p1[k] !== p2[k]) {
+        return false;
+      }
+    }
+    return true;
+  }
+};
+
+function parseXML(xml: string): Document {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(xml, "text/xml");
+  if (doc.getElementsByTagName("parsererror").length) {
+    throw new Error("Invalid XML in template");
+  }
+  return doc;
+}
+
+let nextID = 1;
+
+//------------------------------------------------------------------------------
+// QWeb rendering engine
+//------------------------------------------------------------------------------
+export class QWeb {
+  templates: { [name: string]: Template } = {};
+  utils = UTILS;
+  static widgets = Object.create(null);
+
+  // dev mode enables better error messages or more costly validations
+  static dev: boolean = false;
+
+  // the id field is useful to be able to hash qweb instances.  The current
+  // use case is that component's templates are qweb dependant, and need to be
+  // able to map a qweb instance to a template name.
+  id = nextID++;
+
+  // slots contains sub templates defined with t-set inside t-widget nodes, and
+  // are meant to be used by the t-slot directive.
+  slots = {};
+  nextSlotId = 1;
+
+  constructor(data?: string) {
+    if (data) {
+      this.addTemplates(data);
+    }
+  }
+
+  static addDirective(directive: Directive) {
+    DIRECTIVES.push(directive);
+    DIRECTIVE_NAMES[directive.name] = 1;
+    DIRECTIVES.sort((d1, d2) => d1.priority - d2.priority);
+    if (directive.extraNames) {
+      directive.extraNames.forEach(n => (DIRECTIVE_NAMES[n] = 1));
+    }
+  }
+
+  static register(name: string, Component: any) {
+    if (QWeb.widgets[name]) {
+      throw new Error(`Component '${name}' has already been registered`);
+    }
+    QWeb.widgets[name] = Component;
+  }
+
+  /**
+   * Add a template to the internal template map.  Note that it is not
+   * immediately compiled.
+   */
+  addTemplate(name: string, xmlString: string) {
+    const doc = parseXML(xmlString);
+    if (!doc.firstChild) {
+      throw new Error("Invalid template (should not be empty)");
+    }
+    this._addTemplate(name, <Element>doc.firstChild);
+  }
+
+  /**
+   * Load templates from a xml (as a string).  This will look up for the first
+   * <templates> tag, and will consider each child of this as a template, with
+   * the name given by the t-name attribute.
+   */
+  addTemplates(xmlstr: string) {
+    const doc = parseXML(xmlstr);
+    const templates = doc.getElementsByTagName("templates")[0];
+    if (!templates) {
+      return;
+    }
+    for (let elem of <any>templates.children) {
+      const name = elem.getAttribute("t-name");
+      this._addTemplate(name, elem);
+    }
+  }
+
+  _addTemplate(name: string, elem: Element) {
+    if (name in this.templates) {
+      throw new Error(`Template ${name} already defined`);
+    }
+    this._processTemplate(elem);
+    const template = {
+      elem,
+      fn: (context, extra) => {
+        const compiledFunction = this._compile(name, elem);
+        template.fn = compiledFunction;
+        return compiledFunction.call(this, context, extra);
+      }
+    };
+    this.templates[name] = template;
+  }
+
+  _processTemplate(elem: Element) {
+    let tbranch = elem.querySelectorAll("[t-elif], [t-else]");
+    for (let i = 0, ilen = tbranch.length; i < ilen; i++) {
+      let node = tbranch[i];
+      let prevElem = node.previousElementSibling!;
+      let pattr = function(name) {
+        return prevElem.getAttribute(name);
+      };
+      let nattr = function(name) {
+        return +!!node.getAttribute(name);
+      };
+      if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
+        if (pattr("t-foreach")) {
+          throw new Error(
+            "t-if cannot stay at the same level as t-foreach when using t-elif or t-else"
+          );
+        }
+        if (
+          ["t-if", "t-elif", "t-else"].map(nattr).reduce(function(a, b) {
+            return a + b;
+          }) > 1
+        ) {
+          throw new Error(
+            "Only one conditional branching directive is allowed per node"
+          );
+        }
+        // All text nodes between branch nodes are removed
+        let textNode;
+        while ((textNode = node.previousSibling) !== prevElem) {
+          if (textNode.nodeValue.trim().length) {
+            throw new Error("text is not allowed between branching directives");
+          }
+          textNode.remove();
+        }
+      } else {
+        throw new Error(
+          "t-elif and t-else directives must be preceded by a t-if or t-elif directive"
+        );
+      }
+    }
+  }
+  /**
+   * Render a template
+   *
+   * @param {string} name the template should already have been added
+   */
+  render(name: string, context: EvalContext = {}, extra: any = null): VNode {
+    const template = this.templates[name];
+    if (!template) {
+      throw new Error(`Template ${name} does not exist`);
+    }
+    return template.fn.call(this, context, extra);
+  }
+
+  _compile(name: string, elem: Element): CompiledTemplate {
+    const isDebug = elem.attributes.hasOwnProperty("t-debug");
+    const ctx = new Context(name);
+    this._compileNode(elem, ctx);
+
+    if (ctx.shouldProtectContext) {
+      ctx.code.unshift("    context = Object.create(context);");
+    }
+    if (ctx.shouldDefineOwner) {
+      // this is necessary to prevent some directives (t-forach for ex) to
+      // pollute the rendering context by adding some keys in it.
+      ctx.code.unshift("    let owner = context;");
+    }
+    if (ctx.shouldDefineQWeb) {
+      ctx.code.unshift("    let QWeb = this.constructor;");
+    }
+    if (ctx.shouldDefineUtils) {
+      ctx.code.unshift("    let utils = this.utils;");
+    }
+
+    if (!ctx.rootNode) {
+      throw new Error("A template should have one root node");
+    }
+    ctx.addLine(`return vn${ctx.rootNode};`);
+    let template;
+    try {
+      template = new Function(
+        "context",
+        "extra",
+        ctx.code.join("\n")
+      ) as CompiledTemplate;
+    } catch (e) {
+      const templateName = ctx.templateName.replace(/`/g, "'");
+      console.groupCollapsed(`Invalid Code generated by ${templateName}`);
+      console.warn(ctx.code.join("\n"));
+      console.groupEnd();
+      throw new Error(
+        `Invalid generated code while compiling template '${templateName}': ${
+          e.message
+        }`
+      );
+    }
+    if (isDebug) {
+      console.log(
+        `Template: ${this.templates[name].elem.outerHTML}\nCompiled code:\n` +
+          template.toString()
+      );
+    }
+    return template;
+  }
+
+  /**
+   * Generate code from an xml node
+   *
+   */
+  _compileNode(node: ChildNode, ctx: Context) {
+    if (!(node instanceof Element)) {
+      // this is a text node, there are no directive to apply
+      let text = node.textContent!;
+      if (!ctx.inPreTag) {
+        if (lineBreakRE.test(text) && !text.trim()) {
+          return;
+        }
+        text = text.replace(whitespaceRE, " ");
+      }
+      if (ctx.parentNode) {
+        ctx.addLine(`c${ctx.parentNode}.push({text: \`${text}\`});`);
+      } else if (ctx.parentTextNode) {
+        ctx.addLine(`vn${ctx.parentTextNode}.text += \`${text}\`;`);
+      } else {
+        // this is an unusual situation: this text node is the result of the
+        // template rendering.
+        let nodeID = ctx.generateID();
+        ctx.addLine(`var vn${nodeID} = {text: \`${text}\`};`);
+        ctx.rootContext.rootNode = nodeID;
+        ctx.rootContext.parentTextNode = nodeID;
+      }
+      return;
+    }
+
+    const attributes = (<Element>node).attributes;
+
+    const validDirectives: {
+      directive: Directive;
+      value: string;
+      fullName: string;
+    }[] = [];
+
+    let withHandlers = false;
+
+    // maybe this is not optimal: we iterate on all attributes here, and again
+    // just after for each directive.
+    for (let i = 0; i < attributes.length; i++) {
+      let attrName = attributes[i].name;
+      if (attrName.startsWith("t-")) {
+        let dName = attrName.slice(2).split(/-|\./)[0];
+        if (!(dName in DIRECTIVE_NAMES)) {
+          throw new Error(`Unknown QWeb directive: '${attrName}'`);
+        }
+      }
+    }
+
+    const DIR_N = DIRECTIVES.length;
+    const ATTR_N = attributes.length;
+    for (let i = 0; i < DIR_N; i++) {
+      let directive = DIRECTIVES[i];
+      let fullName;
+      let value;
+      for (let j = 0; j < ATTR_N; j++) {
+        const name = attributes[j].name;
+        if (
+          name === "t-" + directive.name ||
+          name.startsWith("t-" + directive.name + "-") ||
+          name.startsWith("t-" + directive.name + ".")
+        ) {
+          fullName = name;
+          value = attributes[j].textContent;
+          validDirectives.push({ directive, value, fullName });
+          if (directive.name === "on" || directive.name === 'model') {
+            withHandlers = true;
+          }
+        }
+      }
+    }
+    for (let { directive, value, fullName } of validDirectives) {
+      if (directive.atNodeEncounter) {
+        const isDone = directive.atNodeEncounter({
+          node,
+          qweb: this,
+          ctx,
+          fullName,
+          value
+        });
+        if (isDone) {
+          return;
+        }
+      }
+    }
+
+    if (node.nodeName !== "t") {
+      let nodeID = this._compileGenericNode(node, ctx, withHandlers);
+      ctx = ctx.withParent(nodeID);
+      let nodeHooks = {};
+      let addNodeHook = function(hook, handler) {
+        nodeHooks[hook] = nodeHooks[hook] || [];
+        nodeHooks[hook].push(handler);
+      };
+
+      for (let { directive, value, fullName } of validDirectives) {
+        if (directive.atNodeCreation) {
+          directive.atNodeCreation({
+            node,
+            qweb: this,
+            ctx,
+            fullName,
+            value,
+            nodeID,
+            addNodeHook
+          });
+        }
+      }
+
+      if (Object.keys(nodeHooks).length) {
+        ctx.addLine(`p${nodeID}.hook = {`);
+        for (let hook in nodeHooks) {
+          ctx.addLine(`  ${hook}: ${NODE_HOOKS_PARAMS[hook]} => {`);
+          for (let handler of nodeHooks[hook]) {
+            ctx.addLine(`    ${handler}`);
+          }
+          ctx.addLine(`  },`);
+        }
+        ctx.addLine(`};`);
+      }
+    }
+    if (node.nodeName === "pre") {
+      ctx = ctx.subContext("inPreTag", true);
+    }
+
+    this._compileChildren(node, ctx);
+
+    for (let { directive, value, fullName } of validDirectives) {
+      if (directive.finalize) {
+        directive.finalize({ node, qweb: this, ctx, fullName, value });
+      }
+    }
+  }
+
+  _compileGenericNode(
+    node: ChildNode,
+    ctx: Context,
+    withHandlers: boolean = true
+  ): number {
+    // nodeType 1 is generic tag
+    if (node.nodeType !== 1) {
+      throw new Error("unsupported node type");
+    }
+    const attributes = (<Element>node).attributes;
+    const attrs: string[] = [];
+    const props: string[] = [];
+    const tattrs: number[] = [];
+
+    function handleBooleanProps(key, val) {
+      let isProp = false;
+      if (node.nodeName === "input" && key === "checked") {
+        let type = (<Element>node).getAttribute("type");
+        if (type === "checkbox" || type === "radio") {
+          isProp = true;
+        }
+      }
+      if (node.nodeName === "option" && key === "selected") {
+        isProp = true;
+      }
+      if (key === "disabled" && DISABLED_TAGS.indexOf(node.nodeName) > -1) {
+        isProp = true;
+      }
+      if (
+        (key === "readonly" && node.nodeName === "input") ||
+        node.nodeName === "textarea"
+      ) {
+        isProp = true;
+      }
+      if (isProp) {
+        props.push(`${key}: _${val}`);
+      }
+    }
+
+    for (let i = 0; i < attributes.length; i++) {
+      let name = attributes[i].name;
+      const value = attributes[i].textContent!;
+
+      // regular attributes
+      if (
+        !name.startsWith("t-") &&
+        !(<Element>node).getAttribute("t-attf-" + name)
+      ) {
+        const attID = ctx.generateID();
+        ctx.addLine(`var _${attID} = '${value}';`);
+        if (!name.match(/^[a-zA-Z]+$/)) {
+          // attribute contains 'non letters' => we want to quote it
+          name = '"' + name + '"';
+        }
+        attrs.push(`${name}: _${attID}`);
+        handleBooleanProps(name, attID);
+      }
+
+      // dynamic attributes
+      if (name.startsWith("t-att-")) {
+        let attName = name.slice(6);
+        const v = ctx.getValue(value);
+        let formattedValue = v.id || ctx.formatExpression(v);
+        if (
+          formattedValue[0] === "{" &&
+          formattedValue[formattedValue.length - 1] === "}"
+        ) {
+          formattedValue = `this.utils.objectToAttrString(${formattedValue})`;
+        }
+        const attID = ctx.generateID();
+        if (!attName.match(/^[a-zA-Z]+$/)) {
+          // attribute contains 'non letters' => we want to quote it
+          attName = '"' + attName + '"';
+        }
+        // we need to combine dynamic with non dynamic attributes:
+        // class="a" t-att-class="'yop'" should be rendered as class="a yop"
+        const attValue = (<Element>node).getAttribute(attName);
+        if (attValue) {
+          const attValueID = ctx.generateID();
+          ctx.addLine(`var _${attValueID} = ${formattedValue};`);
+          formattedValue = `'${attValue}' + (_${attValueID} ? ' ' + _${attValueID} : '')`;
+          const attrIndex = attrs.findIndex(att =>
+            att.startsWith(attName + ":")
+          );
+          attrs.splice(attrIndex, 1);
+        }
+        ctx.addLine(`var _${attID} = ${formattedValue};`);
+        attrs.push(`${attName}: _${attID}`);
+        handleBooleanProps(attName, attID);
+      }
+
+      if (name.startsWith("t-attf-")) {
+        let attName = name.slice(7);
+        if (!attName.match(/^[a-zA-Z]+$/)) {
+          // attribute contains 'non letters' => we want to quote it
+          attName = '"' + attName + '"';
+        }
+        const formattedExpr = ctx.interpolate(value);
+        const attID = ctx.generateID();
+        let staticVal = (<Element>node).getAttribute(attName);
+        if (staticVal) {
+          ctx.addLine(`var _${attID} = '${staticVal} ' + ${formattedExpr};`);
+        } else {
+          ctx.addLine(`var _${attID} = ${formattedExpr};`);
+        }
+        attrs.push(`${attName}: _${attID}`);
+      }
+
+      // t-att= attributes
+      if (name === "t-att") {
+        let id = ctx.generateID();
+        ctx.addLine(`var _${id} = ${ctx.formatExpression(value!)};`);
+        tattrs.push(id);
+      }
+    }
+    let nodeID = ctx.generateID();
+    let nodeKey: any = (<Element>node).getAttribute("t-key");
+    if (nodeKey) {
+      nodeKey = ctx.formatExpression(nodeKey);
+    } else {
+      nodeKey = nodeID;
+    }
+    const parts = [`key:${nodeKey}`];
+    if (attrs.length + tattrs.length > 0) {
+      parts.push(`attrs:{${attrs.join(",")}}`);
+    }
+    if (props.length > 0) {
+      parts.push(`props:{${props.join(",")}}`);
+    }
+    if (withHandlers) {
+      parts.push(`on:{}`);
+    }
+
+    ctx.addLine(`let c${nodeID} = [], p${nodeID} = {${parts.join(",")}};`);
+    for (let id of tattrs) {
+      ctx.addIf(`_${id} instanceof Array`);
+      ctx.addLine(`p${nodeID}.attrs[_${id}[0]] = _${id}[1];`);
+      ctx.addElse();
+      ctx.addLine(`for (let key in _${id}) {`);
+      ctx.indent();
+      ctx.addLine(`p${nodeID}.attrs[key] = _${id}[key];`);
+      ctx.dedent();
+      ctx.addLine(`}`);
+      ctx.closeIf();
+    }
+    ctx.addLine(
+      `var vn${nodeID} = h('${node.nodeName}', p${nodeID}, c${nodeID});`
+    );
+    if (ctx.parentNode) {
+      ctx.addLine(`c${ctx.parentNode}.push(vn${nodeID});`);
+    }
+
+    return nodeID;
+  }
+
+  _compileChildren(node: ChildNode, ctx: Context) {
+    if (node.childNodes.length > 0) {
+      for (let child of Array.from(node.childNodes)) {
+        this._compileNode(child, ctx);
+      }
+    }
+  }
+}
+
+//------------------------------------------------------------------------------
+// Compilation Context
+//------------------------------------------------------------------------------
+
+export class Context {
+  nextID: number = 1;
+  code: string[] = [];
+  variables: { [key: string]: QWebVar } = {};
+  escaping: boolean = false;
+  parentNode: number | null = null;
+  parentTextNode: number | null = null;
+  rootNode: number | null = null;
+  indentLevel: number = 0;
+  rootContext: Context;
+  caller: Element | undefined;
+  shouldDefineOwner: boolean = false;
+  shouldDefineQWeb: boolean = false;
+  shouldDefineUtils: boolean = false;
+  shouldProtectContext: boolean = false;
+  inLoop: boolean = false;
+  inPreTag: boolean = false;
+  templateName: string;
+
+  constructor(name?: string) {
+    this.rootContext = this;
+    this.templateName = name || "noname";
+    this.addLine("var h = this.utils.h;");
+  }
+
+  generateID(): number {
+    const id = this.rootContext.nextID++;
+    return id;
+  }
+
+  withParent(node: number): Context {
+    if (this === this.rootContext && (this.parentNode || this.parentTextNode)) {
+      throw new Error("A template should not have more than one root node");
+    }
+    if (!this.rootContext.rootNode) {
+      this.rootContext.rootNode = node;
+    }
+    return this.subContext("parentNode", node);
+  }
+
+  subContext(key: keyof Context, value: any): Context {
+    const newContext = Object.create(this);
+    newContext[key] = value;
+    return newContext;
+  }
+
+  indent() {
+    this.indentLevel++;
+  }
+
+  dedent() {
+    this.indentLevel--;
+  }
+
+  addLine(line: string) {
+    const prefix = new Array(this.indentLevel + 2).join("    ");
+    this.code.push(prefix + line);
+  }
+
+  addIf(condition: string) {
+    this.addLine(`if (${condition}) {`);
+    this.indent();
+  }
+
+  addElse() {
+    this.dedent();
+    this.addLine("} else {");
+    this.indent();
+  }
+
+  closeIf() {
+    this.dedent();
+    this.addLine("}");
+  }
+
+  getValue(val: any): any {
+    return val in this.variables ? this.getValue(this.variables[val]) : val;
+  }
+
+  /**
+   * Prepare an expression for being consumed at render time.  Its main job
+   * is to
+   * - replace unknown variables by a lookup in the context
+   * - replace already defined variables by their internal name
+   */
+  formatExpression(expr: string): string {
+    return compileExpr(expr, this.variables);
+  }
+
+  /**
+   * Perform string interpolation on the given string. Note that if the whole
+   * string is an expression, it simply returns it (formatted and enclosed in
+   * parentheses).
+   * For instance:
+   *   'Hello {{x}}!' -> `Hello ${x}`
+   *   '{{x ? 'a': 'b'}}' -> (x ? 'a' : 'b')
+   */
+  interpolate(s: string): string {
+    let matches = s.match(/\{\{.*?\}\}/g);
+    if (matches && matches[0].length === s.length) {
+      return `(${this.formatExpression(s.slice(2, -2))})`;
+    }
+
+    let r = s.replace(
+      /\{\{.*?\}\}/g,
+      s => "${" + this.formatExpression(s.slice(2, -2)) + "}"
+    );
+    return "`" + r + "`";
+  }
+}

src/qweb_directives.ts

@@ -0,0 +1,323 @@
+import { Context, QWeb, UTILS } from "./qweb_core";
+import { QWebExprVar } from "./qweb_expressions";
+
+/**
+ * Owl QWeb Directives
+ *
+ * This file contains the implementation of most standard QWeb directives:
+ * - t-esc
+ * - t-raw
+ * - t-set/t-value
+ * - t-if/t-elif/t-else
+ * - t-call
+ * - t-foreach/t-as
+ * - t-debug
+ * - t-log
+ */
+
+//------------------------------------------------------------------------------
+// t-esc and t-raw
+//------------------------------------------------------------------------------
+(<any>UTILS).getFragment = function(str: string): DocumentFragment {
+  const temp = document.createElement("template");
+  temp.innerHTML = str;
+  return temp.content;
+};
+
+function compileValueNode(value: any, node: Element, qweb: QWeb, ctx: Context) {
+  if (value === "0" && ctx.caller) {
+    qweb._compileNode(ctx.caller, ctx);
+    return;
+  }
+
+  if (value.xml instanceof NodeList) {
+    for (let node of Array.from(value.xml)) {
+      qweb._compileNode(<ChildNode>node, ctx);
+    }
+    return;
+  }
+  let exprID: string;
+  if (typeof value === "string") {
+    exprID = `_${ctx.generateID()}`;
+    ctx.addLine(`var ${exprID} = ${ctx.formatExpression(value)};`);
+  } else {
+    exprID = value.id;
+  }
+  ctx.addIf(`${exprID} || ${exprID} === 0`);
+  if (ctx.escaping) {
+    if (ctx.parentTextNode) {
+      ctx.addLine(`vn${ctx.parentTextNode}.text += ${exprID};`);
+    } else if (ctx.parentNode) {
+      ctx.addLine(`c${ctx.parentNode}.push({text: ${exprID}});`);
+    } else {
+      let nodeID = ctx.generateID();
+      ctx.rootContext.rootNode = nodeID;
+      ctx.rootContext.parentTextNode = nodeID;
+      ctx.addLine(`var vn${nodeID} = {text: ${exprID}};`);
+    }
+  } else {
+    let fragID = ctx.generateID();
+    ctx.addLine(`var frag${fragID} = this.utils.getFragment(${exprID})`);
+    let tempNodeID = ctx.generateID();
+    ctx.addLine(`var p${tempNodeID} = {hook: {`);
+    ctx.addLine(
+      `  insert: n => n.elm.parentNode.replaceChild(frag${fragID}, n.elm),`
+    );
+    ctx.addLine(`}};`);
+    ctx.addLine(`var vn${tempNodeID} = h('div', p${tempNodeID})`);
+    ctx.addLine(`c${ctx.parentNode}.push(vn${tempNodeID});`);
+  }
+  if (node.childNodes.length) {
+    ctx.addElse();
+    qweb._compileChildren(node, ctx);
+  }
+
+  ctx.closeIf();
+}
+
+QWeb.addDirective({
+  name: "esc",
+  priority: 70,
+  atNodeEncounter({ node, qweb, ctx }): boolean {
+    if (node.nodeName !== "t") {
+      let nodeID = qweb._compileGenericNode(node, ctx);
+      ctx = ctx.withParent(nodeID);
+    }
+    let value = ctx.getValue(node.getAttribute("t-esc")!);
+    compileValueNode(value, node, qweb, ctx.subContext("escaping", true));
+    return true;
+  }
+});
+
+QWeb.addDirective({
+  name: "raw",
+  priority: 80,
+  atNodeEncounter({ node, qweb, ctx }): boolean {
+    if (node.nodeName !== "t") {
+      let nodeID = qweb._compileGenericNode(node, ctx);
+      ctx = ctx.withParent(nodeID);
+    }
+    let value = ctx.getValue(node.getAttribute("t-raw")!);
+    compileValueNode(value, node, qweb, ctx);
+    return true;
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-set
+//------------------------------------------------------------------------------
+QWeb.addDirective({
+  name: "set",
+  extraNames: ["value"],
+  priority: 60,
+  atNodeEncounter({ node, ctx }): boolean {
+    const variable = node.getAttribute("t-set")!;
+    let value = node.getAttribute("t-value")!;
+    if (value) {
+      const formattedValue = ctx.formatExpression(value);
+      if (ctx.variables.hasOwnProperty(variable)) {
+        ctx.addLine(
+          `${(<QWebExprVar>ctx.variables[variable]).id} = ${formattedValue}`
+        );
+      } else {
+        const varName = `_${ctx.generateID()}`;
+        ctx.addLine(`var ${varName} = ${formattedValue};`);
+        ctx.variables[variable] = {
+          id: varName,
+          expr: formattedValue
+        };
+      }
+    } else {
+      ctx.variables[variable] = {
+        xml: node.childNodes
+      };
+    }
+    return true;
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-if, t-elif, t-else
+//------------------------------------------------------------------------------
+QWeb.addDirective({
+  name: "if",
+  priority: 20,
+  atNodeEncounter({ node, ctx }): boolean {
+    let cond = ctx.getValue(node.getAttribute("t-if")!);
+    ctx.addIf(`${ctx.formatExpression(cond)}`);
+    return false;
+  },
+  finalize({ ctx }) {
+    ctx.closeIf();
+  }
+});
+
+QWeb.addDirective({
+  name: "elif",
+  priority: 30,
+  atNodeEncounter({ node, ctx }): boolean {
+    let cond = ctx.getValue(node.getAttribute("t-elif")!);
+    ctx.addLine(`else if (${ctx.formatExpression(cond)}) {`);
+    ctx.indent();
+    return false;
+  },
+  finalize({ ctx }) {
+    ctx.closeIf();
+  }
+});
+
+QWeb.addDirective({
+  name: "else",
+  priority: 40,
+  atNodeEncounter({ ctx }): boolean {
+    ctx.addLine(`else {`);
+    ctx.indent();
+    return false;
+  },
+  finalize({ ctx }) {
+    ctx.closeIf();
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-call
+//------------------------------------------------------------------------------
+QWeb.addDirective({
+  name: "call",
+  priority: 50,
+  atNodeEncounter({ node, qweb, ctx }): boolean {
+    if (node.nodeName !== "t") {
+      throw new Error("Invalid tag for t-call directive (should be 't')");
+    }
+    const subTemplate = node.getAttribute("t-call")!;
+    const nodeTemplate = qweb.templates[subTemplate];
+    if (!nodeTemplate) {
+      throw new Error(`Cannot find template "${subTemplate}" (t-call)`);
+    }
+    const nodeCopy = node.cloneNode(true) as Element;
+    nodeCopy.removeAttribute("t-call");
+
+    // extract variables from nodecopy
+    const tempCtx = new Context();
+    tempCtx.nextID = ctx.rootContext.nextID;
+    qweb._compileNode(nodeCopy, tempCtx);
+    const vars = Object.assign({}, ctx.variables, tempCtx.variables);
+    ctx.rootContext.nextID = tempCtx.nextID;
+
+    // open new scope, if necessary
+    const hasNewVariables = Object.keys(tempCtx.variables).length > 0;
+    if (hasNewVariables) {
+      ctx.addLine("{");
+      ctx.indent();
+      // add new variables, if any
+      for (let key in tempCtx.variables) {
+        const v = tempCtx.variables[key];
+        if ((<QWebExprVar>v).expr) {
+          ctx.addLine(`let ${(<QWebExprVar>v).id} = ${(<QWebExprVar>v).expr};`);
+        }
+        // todo: handle XML variables...
+      }
+    }
+
+    // compile sub template
+    const subCtx = ctx
+      .subContext("caller", nodeCopy)
+      .subContext("variables", Object.create(vars));
+
+    qweb._compileNode(nodeTemplate.elem, subCtx);
+
+    // close new scope
+    if (hasNewVariables) {
+      ctx.dedent();
+      ctx.addLine("}");
+    }
+
+    return true;
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-foreach
+//------------------------------------------------------------------------------
+QWeb.addDirective({
+  name: "foreach",
+  extraNames: ["as"],
+  priority: 10,
+  atNodeEncounter({ node, qweb, ctx }): boolean {
+    ctx.rootContext.shouldProtectContext = true;
+    ctx = ctx.subContext("inLoop", true);
+    const elems = node.getAttribute("t-foreach")!;
+    const name = node.getAttribute("t-as")!;
+    let arrayID = ctx.generateID();
+    ctx.addLine(`var _${arrayID} = ${ctx.formatExpression(elems)};`);
+    ctx.addLine(
+      `if (!_${arrayID}) { throw new Error('QWeb error: Invalid loop expression')}`
+    );
+    let keysID = ctx.generateID();
+    let valuesID = ctx.generateID();
+    ctx.addLine(`var _${keysID} = _${valuesID} = _${arrayID};`);
+    ctx.addIf(`!(_${arrayID} instanceof Array)`);
+    ctx.addLine(`_${keysID} = Object.keys(_${arrayID});`);
+    ctx.addLine(`_${valuesID} = Object.values(_${arrayID});`);
+    ctx.closeIf();
+    ctx.addLine(`var _length${keysID} = _${keysID}.length;`);
+    ctx.addLine(`for (let i = 0; i < _length${keysID}; i++) {`);
+    ctx.indent();
+    ctx.addLine(`context.${name}_first = i === 0;`);
+    ctx.addLine(`context.${name}_last = i === _length${keysID} - 1;`);
+    ctx.addLine(`context.${name}_index = i;`);
+    ctx.addLine(`context.${name} = _${keysID}[i];`);
+    ctx.addLine(`context.${name}_value = _${valuesID}[i];`);
+    const nodeCopy = <Element>node.cloneNode(true);
+    let shouldWarn =
+      nodeCopy.tagName !== "t" && !nodeCopy.hasAttribute("t-key");
+    if (!shouldWarn && node.tagName === "t") {
+      if (node.hasAttribute("t-widget") && !node.hasAttribute("t-key")) {
+        shouldWarn = true;
+      }
+      if (
+        !shouldWarn &&
+        node.children.length === 1 &&
+        node.children[0].tagName !== "t" &&
+        !node.children[0].hasAttribute("t-key")
+      ) {
+        shouldWarn = true;
+      }
+    }
+    if (shouldWarn) {
+      console.warn(
+        `Directive t-foreach should always be used with a t-key! (in template: '${
+          ctx.templateName
+        }')`
+      );
+    }
+    nodeCopy.removeAttribute("t-foreach");
+    qweb._compileNode(nodeCopy, ctx);
+    ctx.dedent();
+    ctx.addLine("}");
+    return true;
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-debug
+//------------------------------------------------------------------------------
+QWeb.addDirective({
+  name: "debug",
+  priority: 99,
+  atNodeEncounter({ ctx }) {
+    ctx.addLine("debugger;");
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-log
+//------------------------------------------------------------------------------
+QWeb.addDirective({
+  name: "log",
+  priority: 99,
+  atNodeEncounter({ ctx, value }) {
+    const expr = ctx.formatExpression(value);
+    ctx.addLine(`console.log(${expr})`);
+  }
+});

src/qweb_expressions.ts

@@ -0,0 +1,270 @@
+/**
+ * Owl QWeb Expression Parser
+ *
+ * Owl needs in various contexts to be able to understand the structure of a
+ * string representing a javascript expression.  The usual goal is to be able
+ * to rewrite some variables.  For example, if a template has
+ *
+ *  ```xml
+ *  <t t-if="computeSomething({val: state.val})">...</t>
+ * ```
+ *
+ * this needs to be translated in something like this:
+ *
+ * ```js
+ *   if (context["computeSomething"]({val: context["state"].val})) { ... }
+ * ```
+ *
+ * This file contains the implementation of an extremely naive tokenizer/parser
+ * and evaluator for javascript expressions.  The supported grammar is basically
+ * only expressive enough to understand the shape of objects, of arrays, and
+ * various operators.
+ */
+
+//------------------------------------------------------------------------------
+// Misc types, constants and helpers
+//------------------------------------------------------------------------------
+
+const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,typeof,eval,void,Math,RegExp,Array,Object,Date".split(
+  ","
+);
+
+const WORD_REPLACEMENT = {
+  and: "&&",
+  or: "||",
+  gt: ">",
+  gte: ">=",
+  lt: "<",
+  lte: "<="
+};
+
+export interface QWebExprVar {
+  id: string;
+  expr: string;
+}
+
+export interface QWebXMLVar {
+  xml: NodeList;
+}
+
+export type QWebVar = QWebExprVar | QWebXMLVar;
+
+//------------------------------------------------------------------------------
+// Tokenizer
+//------------------------------------------------------------------------------
+type TKind =
+  | "LEFT_BRACE"
+  | "RIGHT_BRACE"
+  | "LEFT_BRACKET"
+  | "RIGHT_BRACKET"
+  | "LEFT_PAREN"
+  | "RIGHT_PAREN"
+  | "COMMA"
+  | "VALUE"
+  | "SYMBOL"
+  | "OPERATOR"
+  | "COLON";
+
+interface Token {
+  type: TKind;
+  value: string;
+  size?: number;
+}
+
+const STATIC_TOKEN_MAP: { [key: string]: TKind } = {
+  "{": "LEFT_BRACE",
+  "}": "RIGHT_BRACE",
+  "[": "LEFT_BRACKET",
+  "]": "RIGHT_BRACKET",
+  ":": "COLON",
+  ",": "COMMA",
+  "(": "LEFT_PAREN",
+  ")": "RIGHT_PAREN"
+};
+
+const OPERATORS = ".,===,==,+,!,||,&&,>=,>,<=,<,?,-,*,/,%".split(',');
+
+type Tokenizer = (expr: string) => Token | false;
+
+let tokenizeString: Tokenizer = function(expr) {
+  let s = expr[0];
+  let start = s;
+  if (s !== "'" && s !== '"') {
+    return false;
+  }
+  let i = 1;
+  let cur;
+  while (expr[i] && expr[i] !== start) {
+    cur = expr[i];
+    s += cur;
+    if (cur === "\\") {
+      i++;
+      cur = expr[i];
+      if (!cur) {
+        throw new Error("Invalid expression");
+      }
+      s += cur;
+    }
+    i++;
+  }
+  if (expr[i] !== start) {
+    throw new Error("Invalid expression");
+  }
+  s += start;
+  return { type: "VALUE", value: s };
+};
+
+let tokenizeNumber: Tokenizer = function(expr) {
+  let s = expr[0];
+  if (s && s.match(/[0-9]/)) {
+    let i = 1;
+    while (expr[i] && expr[i].match(/[0-9]|\./)) {
+      s += expr[i];
+      i++;
+    }
+    return { type: "VALUE", value: s };
+  } else {
+    return false;
+  }
+};
+
+let tokenizeSymbol: Tokenizer = function(expr) {
+  let s = expr[0];
+  if (s && s.match(/[a-zA-Z_\$]/)) {
+    let i = 1;
+    while (expr[i] && expr[i].match(/\w/)) {
+      s += expr[i];
+      i++;
+    }
+    if (s in WORD_REPLACEMENT) {
+      return { type: "OPERATOR", value: WORD_REPLACEMENT[s], size: s.length };
+    }
+    return { type: "SYMBOL", value: s };
+  } else {
+    return false;
+  }
+};
+
+const tokenizeStatic: Tokenizer = function(expr) {
+  const char = expr[0];
+  if (char && char in STATIC_TOKEN_MAP) {
+    return { type: STATIC_TOKEN_MAP[char], value: char };
+  }
+  return false;
+};
+
+const tokenizeOperator: Tokenizer = function(expr) {
+  for (let op of OPERATORS) {
+    if (expr.startsWith(op)) {
+      return { type: "OPERATOR", value: op };
+    }
+  }
+  return false;
+};
+
+const TOKENIZERS = [
+  tokenizeString,
+  tokenizeNumber,
+  tokenizeSymbol,
+  tokenizeStatic,
+  tokenizeOperator
+];
+
+/**
+ * Convert a javascript expression (as a string) into a list of tokens. For
+ * example: `tokenize("1 + b")` will return:
+ * ```js
+ *  [
+ *   {type: "VALUE", value: "1"},
+ *   {type: "OPERATOR", value: "+"},
+ *   {type: "SYMBOL", value: "b"}
+ * ]
+ * ```
+ */
+export function tokenize(expr: string): Token[] {
+  const result: Token[] = [];
+  let token: boolean | Token = true;
+
+  while (token) {
+    expr = expr.trim();
+    if (expr) {
+      for (let tokenizer of TOKENIZERS) {
+        token = tokenizer(expr);
+        if (token) {
+          result.push(token);
+          expr = expr.slice(token.size || token.value.length);
+          break;
+        }
+      }
+    } else {
+      token = false;
+    }
+  }
+  if (expr.length) {
+    throw new Error(`Tokenizer error: could not tokenize "${expr}"`);
+  }
+  return result;
+}
+
+//------------------------------------------------------------------------------
+// Expression "evaluator"
+//------------------------------------------------------------------------------
+
+/**
+ * This is the main function exported by this file. This is the code that will
+ * process an expression (given as a string) and returns another expression with
+ * proper lookups in the context.
+ *
+ * Usually, this kind of code would be very simple to do if we had an AST (so,
+ * if we had a javascript parser), since then, we would only need to find the
+ * variables and replace them.  However, a parser is more complicated, and there
+ * are no standard builtin parser API.
+ *
+ * Since this method is applied to simple javasript expressions, and the work to
+ * be done is actually quite simple, we actually can get away with not using a
+ * parser, which helps with the code size.
+ *
+ * Here is the heuristic used by this method to determine if a token is a
+ * variable:
+ * - by default, all symbols are considered a variable
+ * - unless the previous token is a dot (in that case, this is a property: `a.b`)
+ * - or if the previous token is a left brace or a comma, and the next token is
+ *   a colon (in that case, this is an object key: `{a: b}`)
+ */
+export function compileExpr(
+  expr: string,
+  vars: { [key: string]: QWebVar }
+): string {
+  const tokens = tokenize(expr);
+  let result = "";
+  for (let i = 0; i < tokens.length; i++) {
+    let token = tokens[i];
+    if (token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value)) {
+      // we need to find if it is a variable
+      let isVar = true;
+      let prevToken = tokens[i - 1];
+      if (prevToken) {
+        if (prevToken.type === "OPERATOR" && prevToken.value === ".") {
+          isVar = false;
+        } else if (
+          prevToken.type === "LEFT_BRACE" ||
+          prevToken.type === "COMMA"
+        ) {
+          let nextToken = tokens[i + 1];
+          if (nextToken && nextToken.type === "COLON") {
+            isVar = false;
+          }
+        }
+      }
+      if (isVar) {
+        if (token.value in vars && "id" in vars[token.value]) {
+          token.value = (<QWebExprVar>vars[token.value]).id;
+        } else {
+          token.value = `context['${token.value}']`;
+        }
+      }
+    }
+    result += token.value;
+  }
+  return result;
+}

src/qweb_extensions.ts

@@ -0,0 +1,722 @@
+import { QWeb, UTILS } from "./qweb_core";
+import { VNode } from "./vdom";
+
+/**
+ * Owl QWeb Extensions
+ *
+ * This file contains the implementation of non standard QWeb directives, added
+ * by Owl and that will only work on Owl projects:
+ *
+ * - t-on
+ * - t-ref
+ * - t-transition
+ * - t-widget/t-keepalive
+ * - t-mounted
+ * - t-slot
+ * - t-model
+ */
+
+//------------------------------------------------------------------------------
+// t-on
+//------------------------------------------------------------------------------
+// these are pieces of code that will be injected into the event handler if
+// modifiers are specified
+const MODS_CODE = {
+  prevent: "e.preventDefault();",
+  self: "if (e.target !== this.elm) {return}",
+  stop: "e.stopPropagation();"
+};
+
+QWeb.addDirective({
+  name: "on",
+  priority: 90,
+  atNodeCreation({ ctx, fullName, value, nodeID }) {
+    ctx.rootContext.shouldDefineOwner = true;
+    const [eventName, ...mods] = fullName.slice(5).split(".");
+    if (!eventName) {
+      throw new Error("Missing event name with t-on directive");
+    }
+    let extraArgs;
+    let handlerName = value.replace(/\(.*\)/, function(args) {
+      extraArgs = args.slice(1, -1);
+      return "";
+    });
+    ctx.addIf(`!context['${handlerName}']`);
+    ctx.addLine(
+      `throw new Error('Missing handler \\'' + '${handlerName}' + \`\\' when evaluating template '${ctx.templateName.replace(
+        /`/g,
+        "'"
+      )}'\`)`
+    );
+    ctx.closeIf();
+    let params = extraArgs
+      ? `owner, ${ctx.formatExpression(extraArgs)}`
+      : "owner";
+    let handler;
+    if (mods.length > 0) {
+      handler = `function (e) {`;
+      handler += mods
+        .map(function(mod) {
+          return MODS_CODE[mod];
+        })
+        .join("");
+      handler += `context['${handlerName}'].call(${params}, e);}`;
+    } else {
+      handler = `context['${handlerName}'].bind(${params})`;
+    }
+    if (extraArgs) {
+      ctx.addLine(`p${nodeID}.on['${eventName}'] = ${handler};`);
+    } else {
+      ctx.addLine(
+        `extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || ${handler};`
+      );
+      ctx.addLine(
+        `p${nodeID}.on['${eventName}'] = extra.handlers['${eventName}' + ${nodeID}];`
+      );
+    }
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-ref
+//------------------------------------------------------------------------------
+QWeb.addDirective({
+  name: "ref",
+  priority: 95,
+  atNodeCreation({ ctx, value, addNodeHook }) {
+    const refKey = `ref${ctx.generateID()}`;
+    ctx.addLine(`const ${refKey} = ${ctx.interpolate(value)};`);
+    addNodeHook("create", `context.refs[${refKey}] = n.elm;`);
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-transition
+//------------------------------------------------------------------------------
+UTILS.nextFrame = function(cb: () => void) {
+  requestAnimationFrame(() => requestAnimationFrame(cb));
+};
+
+UTILS.transitionInsert = function(vn: VNode, name: string) {
+  const elm = <HTMLElement>vn.elm;
+  // remove potential duplicated vnode that is currently being removed, to
+  // prevent from having twice the same node in the DOM during an animation
+  const dup =
+    elm.parentElement &&
+    elm.parentElement!.querySelector(`*[data-owl-key='${vn.key}']`);
+  if (dup) {
+    dup.remove();
+  }
+
+  elm.classList.add(name + "-enter");
+  elm.classList.add(name + "-enter-active");
+  const finalize = () => {
+    elm.classList.remove(name + "-enter-active");
+    elm.classList.remove(name + "-enter-to");
+  };
+  this.nextFrame(() => {
+    elm.classList.remove(name + "-enter");
+    elm.classList.add(name + "-enter-to");
+    whenTransitionEnd(elm, finalize);
+  });
+};
+
+UTILS.transitionRemove = function(vn: VNode, name: string, rm: () => void) {
+  const elm = <HTMLElement>vn.elm;
+  elm.setAttribute("data-owl-key", vn.key!);
+
+  elm.classList.add(name + "-leave");
+  elm.classList.add(name + "-leave-active");
+  const finalize = () => {
+    elm.classList.remove(name + "-leave-active");
+    elm.classList.remove(name + "-leave-to");
+    rm();
+  };
+  this.nextFrame(() => {
+    elm.classList.remove(name + "-leave");
+    elm.classList.add(name + "-leave-to");
+    whenTransitionEnd(elm, finalize);
+  });
+};
+
+function getTimeout(delays: Array<string>, durations: Array<string>): number {
+  /* istanbul ignore next */
+  while (delays.length < durations.length) {
+    delays = delays.concat(delays);
+  }
+
+  return Math.max.apply(
+    null,
+    durations.map((d, i) => {
+      return toMs(d) + toMs(delays[i]);
+    })
+  );
+}
+
+// Old versions of Chromium (below 61.0.3163.100) formats floating pointer numbers
+// in a locale-dependent way, using a comma instead of a dot.
+// If comma is not replaced with a dot, the input will be rounded down (i.e. acting
+// as a floor function) causing unexpected behaviors
+function toMs(s: string): number {
+  return Number(s.slice(0, -1).replace(",", ".")) * 1000;
+}
+
+function whenTransitionEnd(elm: HTMLElement, cb) {
+  const styles = window.getComputedStyle(elm);
+  const delays: Array<string> = (styles.transitionDelay || "").split(", ");
+  const durations: Array<string> = (styles.transitionDuration || "").split(
+    ", "
+  );
+  const timeout: number = getTimeout(delays, durations);
+  if (timeout > 0) {
+    elm.addEventListener("transitionend", cb, { once: true });
+  } else {
+    cb();
+  }
+}
+
+QWeb.addDirective({
+  name: "transition",
+  priority: 96,
+  atNodeCreation({ value, addNodeHook }) {
+    let name = value;
+    const hooks = {
+      insert: `this.utils.transitionInsert(vn, '${name}');`,
+      remove: `this.utils.transitionRemove(vn, '${name}', rm);`
+    };
+    for (let hookName in hooks) {
+      addNodeHook(hookName, hooks[hookName]);
+    }
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-widget
+//------------------------------------------------------------------------------
+
+const T_WIDGET_MODS_CODE = Object.assign({}, MODS_CODE, {
+  self: "if (e.target !== vn.elm) {return}"
+});
+
+/**
+ * The t-widget directive is certainly a complicated and hard to maintain piece
+ * of code.  To help you, fellow developer, if you have to maintain it, I offer
+ * you this advice: Good luck...
+ *
+ * Since it is not 'direct' code, but rather code that generates other code, it
+ * is not easy to understand.  To help you, here  is a detailed and commented
+ * explanation of the code generated by the t-widget directive for the following
+ * situation:
+ * ```xml
+ *   <t t-widget="child"
+ *      t-key="'somestring'"
+ *      flag="state.flag"
+ *      t-transition="fade"/>
+ * ```
+ *
+ * ```js
+ * // we assign utils on top of the function because it will be useful for
+ * // each widgets
+ * let utils = this.utils;
+ *
+ * // this is the virtual node representing the parent div
+ * let c1 = [], p1 = { key: 1 };
+ * var vn1 = h("div", p1, c1);
+ *
+ * // t-widget directive: we start by evaluating the expression given by t-key:
+ * let key5 = "somestring";
+ *
+ * // def3 is the promise that will contain later either the new widget
+ * // creation, or the props update...
+ * let def3;
+ *
+ * // this is kind of tricky: we need here to find if the widget was already
+ * // created by a previous rendering.  This is done by checking the internal
+ * // `cmap` (children map) of the parent widget: it maps keys to widget ids,
+ * // and, then, if there is an id, we look into the children list to get the
+ * // instance
+ * let w4 =
+ *   key5 in context.__owl__.cmap
+ *   ? context.__owl__.children[context.__owl__.cmap[key5]]
+ *   : false;
+ *
+ * // We keep the index of the position of the widget in the closure.  We push
+ * // null to reserve the slot, and will replace it later by the widget vnode,
+ * // when it will be ready (do not forget that preparing/rendering a widget is
+ * // asynchronous)
+ * let _2_index = c1.length;
+ * c1.push(null);
+ *
+ * // we evaluate here the props given to the component. It is done here to be
+ * // able to easily reference it later, and also, it might be an expensive
+ * // computation, so it is certainly better to do it only once
+ * let props4 = { flag: context["state"].flag };
+ *
+ * // If we have a widget, currently rendering, but not ready yet, we do not want
+ * // to wait for it to be ready if we can avoid it
+ * if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+ *   // we check if the props are the same.  In that case, we can simply reuse
+ *   // the previous rendering and skip all useless work
+ *   if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+ *     def3 = w4.__owl__.renderPromise;
+ *   } else {
+ *     // if the props are not the same, we destroy the widget and starts anew.
+ *     // this will be faster than waiting for its rendering, then updating it
+ *     w4.destroy();
+ *     w4 = false;
+ *   }
+ * }
+ *
+ * if (!w4) {
+ *   // in this situation, we need to create a new widget.  First step is
+ *   // to get a reference to the class, then create an instance with
+ *   // current context as parent, and the props.
+ *   let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+
+ *   if (!W4) {
+ *     throw new Error("Cannot find the definition of widget 'child'");
+ *   }
+ *   w4 = new W4(owner, props4);
+ *
+ *   // Whenever we rerender the parent widget, we need to be sure that we
+ *   // are able to find the widget instance. To do that, we register it to
+ *   // the parent cmap (children map).  Note that the 'template' key is
+ *   // used here, since this is what identify the widget from the template
+ *   // perspective.
+ *   context.__owl__.cmap[key5] = w4.__owl__.id;
+ *
+ *   // _prepare is called, to basically call willStart, then render the
+ *   // widget
+ *   def3 = w4._prepare();
+ *
+ *   def3 = def3.then(vnode => {
+ *     // we create here a virtual node for the parent (NOT the widget). This
+ *     // means that the vdom of the parent will be stopped here, and from
+ *     // the parent's perspective, it simply is a vnode with no children.
+ *     // However, it shares the same dom element with the component root
+ *     // vnode.
+ *     let pvnode = h(vnode.sel, { key: key5 });
+ *
+ *     // we add hooks to the parent vnode so we can interact with the new
+ *     // widget at the proper time
+ *     pvnode.data.hook = {
+ *       insert(vn) {
+ *         // the _mount method will patch the widget vdom into the elm vn.elm,
+ *         // then call the mounted hooks. However, suprisingly, the snabbdom
+ *         // patch method actually replace the elm by a new elm, so we need
+ *         // to synchronise the pvnode elm with the resulting elm
+ *         let nvn = w4._mount(vnode, vn.elm);
+ *         pvnode.elm = nvn.elm;
+ *         // what follows is only present if there are animations on the widget
+ *         utils.transitionInsert(vn, "fade");
+ *       },
+ *       remove() {
+ *         // override with empty function to prevent from removing the node
+ *         // directly. It will be removed when destroy is called anyway, which
+ *         // delays the removal if there are animations.
+ *       },
+ *       destroy() {
+ *         // if there are animations, we delay the call to destroy on the
+ *         // widget, if not, we call it directly.
+ *         let finalize = () => {
+ *           w4.destroy();
+ *         };
+ *         utils.transitionRemove(vn, "fade", finalize);
+ *       }
+ *     };
+ *     // the pvnode is inserted at the correct position in the div's children
+ *     c1[_2_index] = pvnode;
+ *
+ *     // we keep here a reference to the parent vnode (representing the
+ *     // widget, so we can reuse it later whenever we update the widget
+ *     w4.__owl__.pvnode = pvnode;
+ *   });
+ * } else {
+ *   // this is the 'update' path of the directive.
+ *   // the call to _updateProps is the actual widget update
+ *   // Note that we only update the props if we cannot reuse the previous
+ *   // rendering work (in the case it was rendered with the same props)
+ *   def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+ *   def3 = def3.then(() => {
+ *     // if widget was destroyed in the meantime, we do nothing (so, this
+ *     // means that the parent's element children list will have a null in
+ *     // the widget's position, which will cause the pvnode to be removed
+ *     // when it is patched.
+ *     if (w4.__owl__.isDestroyed) {
+ *       return;
+ *     }
+ *     // like above, we register the pvnode to the children list, so it
+ *     // will not be patched out of the dom.
+ *     let pvnode = w4.__owl__.pvnode;
+ *     c1[_2_index] = pvnode;
+ *   });
+ * }
+ *
+ * // we register the deferred here so the parent can coordinate its patch operation
+ * // with all the children.
+ * extra.promises.push(def3);
+ * return vn1;
+ * ```
+ */
+
+QWeb.addDirective({
+  name: "widget",
+  extraNames: ["props", "keepalive", "asyncroot"],
+  priority: 100,
+  atNodeEncounter({ ctx, value, node, qweb }): boolean {
+    ctx.addLine("//WIDGET");
+    ctx.rootContext.shouldDefineOwner = true;
+    ctx.rootContext.shouldDefineQWeb = true;
+    ctx.rootContext.shouldDefineUtils = true;
+    let keepAlive = node.getAttribute("t-keepalive") ? true : false;
+    let async = node.getAttribute("t-asyncroot") ? true : false;
+
+    // t-on- events and t-transition
+    const events: [string, string[], string, string][] = [];
+    let transition: string = "";
+    const attributes = (<Element>node).attributes;
+    const props: { [key: string]: string } = {};
+    for (let i = 0; i < attributes.length; i++) {
+      const name = attributes[i].name;
+      const value = attributes[i].textContent!;
+      if (name.startsWith("t-on-")) {
+        const [eventName, ...mods] = name.slice(5).split(".");
+        let extraArgs;
+        let handlerName = value.replace(/\(.*\)/, function(args) {
+          extraArgs = args.slice(1, -1);
+          return "";
+        });
+        events.push([eventName, mods, handlerName, extraArgs]);
+      } else if (name === "t-transition") {
+        transition = value;
+      } else if (!name.startsWith("t-")) {
+        if (name !== "class" && name !== "style") {
+          // this is a prop!
+          props[name] = ctx.formatExpression(value);
+        }
+      }
+    }
+
+    let key = node.getAttribute("t-key");
+    if (key) {
+      key = ctx.formatExpression(key);
+    }
+
+    // computing the props string representing the props object
+    let propStr = Object.keys(props)
+      .map(k => k + ":" + props[k])
+      .join(",");
+    let dummyID = ctx.generateID();
+    let defID = ctx.generateID();
+    let widgetID = ctx.generateID();
+    let keyID = key && ctx.generateID();
+    if (key) {
+      // we bind a variable to the key (could be a complex expression, so we
+      // want to evaluate it only once)
+      ctx.addLine(`let key${keyID} = ${key};`);
+    }
+    ctx.addLine(`let def${defID};`);
+    let templateID = key
+      ? `key${keyID}`
+      : ctx.inLoop
+      ? `String(-${widgetID} - i)`
+      : String(widgetID);
+
+    let ref = node.getAttribute("t-ref");
+    let refExpr = "";
+    let refKey: string = "";
+    if (ref) {
+      refKey = `ref${ctx.generateID()}`;
+      ctx.addLine(`const ${refKey} = ${ctx.interpolate(ref)};`);
+      refExpr = `context.refs[${refKey}] = w${widgetID};`;
+    }
+    let transitionsInsertCode = "";
+    if (transition) {
+      transitionsInsertCode = `utils.transitionInsert(vn, '${transition}');`;
+    }
+    let finalizeWidgetCode = `w${widgetID}.${
+      keepAlive ? "unmount" : "destroy"
+    }();`;
+    if (ref && !keepAlive) {
+      finalizeWidgetCode += `delete context.refs[${refKey}];`;
+    }
+    if (transition) {
+      finalizeWidgetCode = `let finalize = () => {
+          ${finalizeWidgetCode}
+        };
+        utils.transitionRemove(vn, '${transition}', finalize);`;
+    }
+
+    let createHook = "";
+    let classAttr = node.getAttribute("class");
+    let tattClass = node.getAttribute("t-att-class");
+    let styleAttr = node.getAttribute("style");
+    let tattStyle = node.getAttribute("t-att-style");
+    if (tattStyle) {
+      const attVar = `_${ctx.generateID()}`;
+      ctx.addLine(`const ${attVar} = ${ctx.formatExpression(tattStyle)};`);
+      tattStyle = attVar;
+    }
+    let updateClassCode = "";
+    if (classAttr || tattClass || styleAttr || tattStyle || events.length) {
+      let classCode = "";
+      if (classAttr) {
+        classCode =
+          classAttr
+            .split(" ")
+            .map(c => `vn.elm.classList.add('${c}')`)
+            .join(";") + ";";
+      }
+      if (tattClass) {
+        const attVar = `_${ctx.generateID()}`;
+        ctx.addLine(`const ${attVar} = ${ctx.formatExpression(tattClass)};`);
+        classCode = `for (let k in ${attVar}) {
+              if (${attVar}[k]) {
+                  vn.elm.classList.add(k);
+              }
+          }`;
+        updateClassCode = `let cl=w${widgetID}.el.classList;for (let k in ${attVar}) {if (${attVar}[k]) {cl.add(k)} else {cl.remove(k)}}`;
+      }
+      let eventsCode = events
+        .map(function([eventName, mods, handlerName, extraArgs]) {
+          let params = extraArgs
+            ? `owner, ${ctx.formatExpression(extraArgs)}`
+            : "owner";
+          let handler;
+          if (mods.length > 0) {
+            handler = `function (e) {`;
+            handler += mods
+              .map(function(mod) {
+                return T_WIDGET_MODS_CODE[mod];
+              })
+              .join("");
+            handler += `owner['${handlerName}'].call(${params}, e);}`;
+          } else {
+            handler = `owner['${handlerName}'].bind(${params})`;
+          }
+          return `vn.elm.addEventListener('${eventName}', ${handler});`;
+        })
+        .join("");
+      const styleExpr = tattStyle || (styleAttr ? `'${styleAttr}'` : false);
+      const styleCode = styleExpr ? `vn.elm.style = ${styleExpr};` : "";
+      createHook = `vnode.data.hook = {create(_, vn){${classCode}${styleCode}${eventsCode}}};`;
+    }
+
+    ctx.addLine(
+      `let w${widgetID} = ${templateID} in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[${templateID}]] : false;`
+    );
+    ctx.addLine(`let _${dummyID}_index = c${ctx.parentNode}.length;`);
+    if (async) {
+      ctx.addLine(`const patchQueue${widgetID} = [];`);
+      ctx.addLine(
+        `c${
+          ctx.parentNode
+        }.push(w${widgetID} && w${widgetID}.__owl__.pvnode || null);`
+      );
+    } else {
+      ctx.addLine(`c${ctx.parentNode}.push(null);`);
+    }
+    ctx.addLine(`let props${widgetID} = {${propStr}};`);
+    ctx.addIf(
+      `w${widgetID} && w${widgetID}.__owl__.renderPromise && !w${widgetID}.__owl__.vnode`
+    );
+    ctx.addIf(
+      `utils.shallowEqual(props${widgetID}, w${widgetID}.__owl__.renderProps)`
+    );
+    ctx.addLine(`def${defID} = w${widgetID}.__owl__.renderPromise;`);
+    ctx.addElse();
+    ctx.addLine(`w${widgetID}.destroy();`);
+    ctx.addLine(`w${widgetID} = false;`);
+    ctx.closeIf();
+    ctx.closeIf();
+
+    ctx.addIf(`!w${widgetID}`);
+    // new widget
+    ctx.addLine(`let widgetKey${widgetID} = ${ctx.interpolate(value)};`);
+    ctx.addLine(
+      `let W${widgetID} = context.widgets && context.widgets[widgetKey${widgetID}] || QWeb.widgets[widgetKey${widgetID}];`
+    );
+
+    // maybe only do this in dev mode...
+    ctx.addLine(
+      `if (!W${widgetID}) {throw new Error('Cannot find the definition of widget "' + widgetKey${widgetID} + '"')}`
+    );
+    ctx.addLine(`w${widgetID} = new W${widgetID}(owner, props${widgetID});`);
+    ctx.addLine(
+      `context.__owl__.cmap[${templateID}] = w${widgetID}.__owl__.id;`
+    );
+
+    // SLOTS
+    if (node.childElementCount) {
+      const clone = <Element>node.cloneNode(true);
+      const slotNodes = clone.querySelectorAll("[t-set]");
+      const slotId = qweb.nextSlotId++;
+      ctx.addLine(`w${widgetID}.__owl__.slotId = ${slotId};`);
+      if (slotNodes.length) {
+        for (let i = 0, length = slotNodes.length; i < length; i++) {
+          const slotNode = slotNodes[i];
+          slotNode.parentElement!.removeChild(slotNode);
+          const key = slotNode.getAttribute("t-set")!;
+          slotNode.removeAttribute("t-set");
+          const slotFn = qweb._compile(`slot_${key}_template`, slotNode);
+          qweb.slots[`${slotId}_${key}`] = slotFn.bind(qweb);
+        }
+      }
+      if (clone.childElementCount) {
+        const content = clone.children[0];
+        const slotFn = qweb._compile(`slot_default_template`, content);
+        qweb.slots[`${slotId}_default`] = slotFn.bind(qweb);
+      }
+    }
+
+    ctx.addLine(`def${defID} = w${widgetID}._prepare();`);
+    // hack: specify empty remove hook to prevent the node from being removed from the DOM
+    ctx.addLine(
+      `def${defID} = def${defID}.then(vnode=>{${createHook}let pvnode=h(vnode.sel, {key: ${templateID}, hook: {insert(vn) {let nvn=w${widgetID}._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;${refExpr}${transitionsInsertCode}},remove() {},destroy(vn) {${finalizeWidgetCode}}}});c${
+        ctx.parentNode
+      }[_${dummyID}_index]=pvnode;w${widgetID}.__owl__.pvnode = pvnode;});`
+    );
+
+    ctx.addElse();
+    // need to update widget
+    const patchQueueCode = async ? `patchQueue${widgetID}` : "extra.patchQueue";
+    ctx.addLine(
+      `def${defID} = def${defID} || w${widgetID}._updateProps(props${widgetID}, extra.forceUpdate, ${patchQueueCode});`
+    );
+    let keepAliveCode = "";
+    if (keepAlive) {
+      keepAliveCode = `pvnode.data.hook.insert = vn => {vn.elm.parentNode.replaceChild(w${widgetID}.el,vn.elm);vn.elm=w${widgetID}.el;w${widgetID}._remount();};`;
+    }
+    ctx.addLine(
+      `def${defID} = def${defID}.then(()=>{if (w${widgetID}.__owl__.isDestroyed) {return};${
+        tattStyle ? `w${widgetID}.el.style=${tattStyle};` : ""
+      }${updateClassCode}let pvnode=w${widgetID}.__owl__.pvnode;${keepAliveCode}c${
+        ctx.parentNode
+      }[_${dummyID}_index]=pvnode;});`
+    );
+    ctx.closeIf();
+
+    if (async) {
+      ctx.addLine(
+        `def${defID}.then(w${widgetID}._applyPatchQueue.bind(w${widgetID}, patchQueue${widgetID}));`
+      );
+    } else {
+      ctx.addLine(`extra.promises.push(def${defID});`);
+    }
+
+    if (
+      node.hasAttribute("t-if") ||
+      node.hasAttribute("t-else") ||
+      node.hasAttribute("t-elif")
+    ) {
+      ctx.closeIf();
+    }
+
+    return true;
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-mounted
+//------------------------------------------------------------------------------
+QWeb.addDirective({
+  name: "mounted",
+  priority: 97,
+  atNodeCreation({ ctx, fullName, value, nodeID, addNodeHook }) {
+    ctx.rootContext.shouldDefineOwner = true;
+    const eventName = fullName.slice(5);
+    if (!eventName) {
+      throw new Error("Missing event name with t-on directive");
+    }
+    let extraArgs;
+    let handler = value.replace(/\(.*\)/, function(args) {
+      extraArgs = args.slice(1, -1);
+      return "";
+    });
+    let error = `(function () {throw new Error('Missing handler \\'' + '${handler}' + \`\\' when evaluating template '${ctx.templateName.replace(
+      /`/g,
+      "'"
+    )}'\`)})()`;
+    if (extraArgs) {
+      ctx.addLine(
+        `extra.mountedHandlers[${nodeID}] = (context['${handler}'] || ${error}).bind(owner, ${ctx.formatExpression(
+          extraArgs
+        )});`
+      );
+    } else {
+      ctx.addLine(
+        `extra.mountedHandlers[${nodeID}] = extra.mountedHandlers[${nodeID}] || (context['${handler}'] || ${error}).bind(owner);`
+      );
+    }
+    addNodeHook(
+      "insert",
+      `if (context.__owl__.isMounted) { extra.mountedHandlers[${nodeID}](); }`
+    );
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-slot
+//------------------------------------------------------------------------------
+QWeb.addDirective({
+  name: "slot",
+  priority: 80,
+  atNodeEncounter({ ctx, value }): boolean {
+    const slotKey = ctx.generateID();
+    ctx.addLine(
+      `const slot${slotKey} = this.slots[context.__owl__.slotId + '_' + '${value}'];`
+    );
+    ctx.addLine(
+      `c${ctx.parentNode}.push(slot${slotKey}(context.__owl__.parent, extra));`
+    );
+    return true;
+  }
+});
+
+//------------------------------------------------------------------------------
+// t-model
+//------------------------------------------------------------------------------
+UTILS.toNumber = function(val: string): number | string {
+  const n = parseFloat(val);
+  return isNaN(n) ? val : n;
+};
+
+QWeb.addDirective({
+  name: "model",
+  priority: 42,
+  atNodeCreation({ ctx, nodeID, value, node, fullName }) {
+    const type = node.getAttribute("type");
+    let handler;
+    let event = fullName.includes(".lazy") ? "change" : "input";
+    if (node.tagName === "select") {
+      ctx.addLine(`p${nodeID}.props = {value: context.state['${value}']};`);
+      event = "change";
+      handler = `(ev) => {context.state['${value}'] = ev.target.value}`;
+    } else if (type === "checkbox") {
+      ctx.addLine(`p${nodeID}.props = {checked: context.state['${value}']};`);
+      handler = `(ev) => {context.state['${value}'] = ev.target.checked}`;
+    } else if (type === "radio") {
+      const nodeValue = node.getAttribute("value")!;
+      ctx.addLine(
+        `p${nodeID}.props = {checked:context.state['${value}'] === '${nodeValue}'};`
+      );
+      handler = `(ev) => {context.state['${value}'] = ev.target.value}`;
+      event = "click";
+    } else {
+      ctx.addLine(`p${nodeID}.props = {value: context.state['${value}']};`);
+      const trimCode = fullName.includes(".trim") ? ".trim()" : "";
+      let valueCode = `ev.target.value${trimCode}`;
+      if (fullName.includes(".number")) {
+        ctx.rootContext.shouldDefineUtils = true;
+        valueCode = `utils.toNumber(${valueCode})`;
+      }
+      handler = `(ev) => {context.state['${value}'] = ${valueCode}}`;
+    }
+    ctx.addLine(
+      `extra.handlers['${event}' + ${nodeID}] = extra.handlers['${event}' + ${nodeID}] || (${handler});`
+    );
+    ctx.addLine(
+      `p${nodeID}.on['${event}'] = extra.handlers['${event}' + ${nodeID}];`
+    );
+  }
+});

src/store.ts

@@ -0,0 +1,298 @@
+import { Component, Env } from "./component";
+import { EventBus } from "./event_bus";
+import { Observer } from "./observer";
+
+/**
+ * Owl Store
+ *
+ * We have here:
+ * - a Store class
+ * - a connect function
+ *
+ * The Owl store is our answer to the problem of managing complex state across
+ * components. The main idea is that the store owns some state, allow external
+ * code to modify it through actions/mutations, and for each state changes,
+ * connected component will be notified, and updated if necessary.
+ *
+ * Note that this code is partly inspired by VueX and React/Redux
+ */
+
+//------------------------------------------------------------------------------
+// Store Definition
+//------------------------------------------------------------------------------
+
+type Mutation = ({ state, commit, getters }, payload: any) => void;
+type Action = ({ commit, state, dispatch, env, getters }, payload: any) => void;
+type Getter = ({ state, getters }, payload) => any;
+
+interface StoreConfig {
+  env?: Env;
+  state?: any;
+  actions?: { [name: string]: Action };
+  getters?: { [name: string]: Getter };
+  mutations?: { [name: string]: Mutation };
+}
+
+interface StoreOption {
+  debug?: boolean;
+}
+
+export class Store extends EventBus {
+  state: any;
+  actions: any;
+  mutations: any;
+  _commitLevel: number = 0;
+  history: any[] = [];
+  debug: boolean;
+  env: any;
+  observer: Observer;
+  getters: { [name: string]: (payload?) => any };
+  _gettersCache: { [name: string]: {} };
+
+  constructor(config: StoreConfig, options: StoreOption = {}) {
+    super();
+    this.debug = options.debug || false;
+    this.state = config.state || {};
+    this.actions = config.actions;
+    this.mutations = config.mutations;
+    this.env = config.env;
+    this.observer = new Observer();
+    this.observer.notifyCB = () => {
+      this._gettersCache = {};
+      this.trigger("update");
+    };
+    this.observer.allowMutations = false;
+    this.observer.observe(this.state);
+    this.getters = {};
+    this._gettersCache = {};
+
+    if (this.debug) {
+      this.history.push({ state: this.state });
+    }
+
+    const cTypes = ["undefined", "number", "string"];
+    for (let entry of Object.entries(config.getters || {})) {
+      const name: string = entry[0];
+      const func: (...any) => any = entry[1];
+      this.getters[name] = payload => {
+        if (this._commitLevel === 0 && cTypes.indexOf(typeof payload) >= 0) {
+          this._gettersCache[name] = this._gettersCache[name] || {};
+          this._gettersCache[name][payload] =
+            this._gettersCache[name][payload] ||
+            func({ state: this.state, getters: this.getters }, payload);
+          return this._gettersCache[name][payload];
+        }
+        return func({ state: this.state, getters: this.getters }, payload);
+      };
+    }
+  }
+
+  dispatch(action: string, payload?: any): Promise<void> | void {
+    if (!this.actions[action]) {
+      throw new Error(`[Error] action ${action} is undefined`);
+    }
+    const result = this.actions[action](
+      {
+        commit: this.commit.bind(this),
+        dispatch: this.dispatch.bind(this),
+        env: this.env,
+        state: this.state,
+        getters: this.getters
+      },
+      payload
+    );
+    if (result instanceof Promise) {
+      return new Promise((resolve, reject) => {
+        result.then(() => resolve());
+        result.catch(reject);
+      });
+    }
+  }
+
+  commit(type: string, payload?: any): any {
+    if (!this.mutations[type]) {
+      throw new Error(`[Error] mutation ${type} is undefined`);
+    }
+    this._commitLevel++;
+    this.observer.allowMutations = true;
+
+    const res = this.mutations[type].call(
+      null,
+      {
+        commit: this.commit.bind(this),
+        state: this.state,
+        getters: this.getters
+      },
+      payload
+    );
+
+    if (this._commitLevel === 1) {
+      this.observer.allowMutations = false;
+      if (this.debug) {
+        this.history.push({
+          state: this.state,
+          mutation: type,
+          payload: payload
+        });
+      }
+    }
+    this._commitLevel--;
+    return res;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Connect function
+//------------------------------------------------------------------------------
+
+function revNumber<T extends Object>(o: T): number {
+  if (o !== null && typeof o === "object" && (<any>o).__owl__) {
+    return (<any>o).__owl__.rev;
+  }
+  return 0;
+}
+
+function deepRevNumber<T extends Object>(o: T): number {
+  if (o !== null && typeof o === "object" && (<any>o).__owl__) {
+    return (<any>o).__owl__.deepRev;
+  }
+  return 0;
+}
+
+type Constructor<T> = new (...args: any[]) => T;
+interface EnvWithStore extends Env {
+  store: Store;
+}
+type HashFunction = (a: any, b: any) => number;
+interface StoreOptions {
+  getStore?(Env): Store;
+  hashFunction?: HashFunction;
+  deep?: boolean;
+}
+
+let nextID = 1;
+
+export function connect<E extends EnvWithStore, P, S>(
+  Comp: Constructor<Component<E, P, S>>,
+  mapStoreToProps,
+  options: StoreOptions = <StoreOptions>{}
+) {
+  let hashFunction = options.hashFunction || null;
+  const getStore = options.getStore || (env => env.store);
+
+  if (!hashFunction) {
+    let deep = "deep" in options ? options.deep : true;
+    let defaultRevFunction = deep ? deepRevNumber : revNumber;
+    hashFunction = function({ storeProps }, options) {
+      const { currentStoreProps } = options;
+      if ("__owl__" in storeProps) {
+        return defaultRevFunction(storeProps);
+      }
+      let hash = 0;
+      for (let key in storeProps) {
+        const val = storeProps[key];
+        const hashVal = defaultRevFunction(val);
+        if (hashVal === 0) {
+          if (val !== currentStoreProps[key]) {
+            options.didChange = true;
+          }
+        } else {
+          hash += hashVal;
+        }
+      }
+      return hash;
+    };
+  }
+
+  const Result = class extends Comp {
+    constructor(parent, props?: any) {
+      const env = parent instanceof Component ? parent.env : parent;
+      const store = getStore(env);
+      const ownProps = Object.assign({}, props || {});
+      const storeProps = mapStoreToProps(store.state, ownProps, store.getters);
+      const mergedProps = Object.assign({}, props || {}, storeProps);
+      super(parent, mergedProps);
+      (<any>this.__owl__).ownProps = ownProps;
+      (<any>this.__owl__).currentStoreProps = storeProps;
+      (<any>this.__owl__).store = store;
+      (<any>this.__owl__).storeHash = (<HashFunction>hashFunction)(
+        {
+          state: store.state,
+          storeProps: storeProps,
+          revNumber,
+          deepRevNumber
+        },
+        {
+          currentStoreProps: storeProps
+        }
+      );
+    }
+    /**
+     * We do not use the mounted hook here for a subtle reason: we want the
+     * updates to be called for the parents before the children.  However,
+     * if we use the mounted hook, this will be done in the reverse order.
+     */
+    _callMounted() {
+      (<any>this.__owl__).store.on("update", this, this._checkUpdate);
+      super._callMounted();
+    }
+    willUnmount() {
+      (<any>this.__owl__).store.off("update", this);
+      super.willUnmount();
+    }
+
+    _checkUpdate() {
+      const ownProps = (<any>this.__owl__).ownProps;
+      const storeProps = mapStoreToProps(
+        (<any>this.__owl__).store.state,
+        ownProps,
+        (<any>this.__owl__).store.getters
+      );
+      const options: any = {
+        currentStoreProps: (<any>this.__owl__).currentStoreProps
+      };
+      const storeHash = (<HashFunction>hashFunction)(
+        {
+          state: (<any>this.__owl__).store.state,
+          storeProps: storeProps,
+          revNumber,
+          deepRevNumber
+        },
+        options
+      );
+      let didChange = options.didChange;
+      if (storeHash !== (<any>this.__owl__).storeHash) {
+        didChange = true;
+        (<any>this.__owl__).storeHash = storeHash;
+      }
+      if (didChange) {
+        (<any>this.__owl__).currentStoreProps = storeProps;
+        this._updateProps(ownProps, false);
+      }
+    }
+    _updateProps(nextProps, forceUpdate, patchQueue?: any[]) {
+      if ((<any>this.__owl__).ownProps !== nextProps) {
+        (<any>this.__owl__).currentStoreProps = mapStoreToProps(
+          (<any>this.__owl__).store.state,
+          nextProps,
+          (<any>this.__owl__).store.getters
+        );
+      }
+      (<any>this.__owl__).ownProps = nextProps;
+      const mergedProps = Object.assign(
+        {},
+        nextProps,
+        (<any>this.__owl__).currentStoreProps
+      );
+      return super._updateProps(mergedProps, forceUpdate, patchQueue);
+    }
+  };
+
+  // we assign here a unique name to the resulting anonymous class.
+  // this is necessary for Owl to be able to properly deduce templates.
+  // Otherwise, all connected components would have the same name, and then
+  // each component after the first will necessarily have the same template.
+  let name = `ConnectedComponent${nextID++}`;
+  Object.defineProperty(Result, "name", { value: name });
+  return Result;
+}

src/utils.ts

@@ -0,0 +1,101 @@
+/**
+ * Owl Utils
+ *
+ * We have here a small collection of utility functions:
+ *
+ * - whenReady
+ * - loadJS
+ * - loadTemplates
+ * - escape
+ * - debounce
+ */
+
+export function whenReady(fn) {
+  return new Promise(function(resolve) {
+    if (document.readyState !== "loading") {
+      resolve();
+    } else {
+      document.addEventListener("DOMContentLoaded", resolve, false);
+    }
+  }).then(fn || function () {});
+}
+
+const loadedScripts: { [key: string]: Promise<void> } = {};
+
+export function loadJS(url: string): Promise<void> {
+  if (url in loadedScripts) {
+    return loadedScripts[url];
+  }
+  const promise: Promise<void> = new Promise(function(resolve, reject) {
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = url;
+    script.onload = function() {
+      resolve();
+    };
+    script.onerror = function() {
+      reject(`Error loading file '${url}'`);
+    };
+    const head = document.head || document.getElementsByTagName("head")[0];
+    head.appendChild(script);
+  });
+  loadedScripts[url] = promise;
+  return promise;
+}
+
+export async function loadTemplates(url: string): Promise<string> {
+  const result = await fetch(url);
+  if (!result.ok) {
+    throw new Error("Error while fetching xml templates");
+  }
+  let templates = await result.text();
+  templates = templates.replace(/<!--[\s\S]*?-->/g, "");
+  return templates;
+}
+
+export function escape(str: string | number | undefined): string {
+  if (str === undefined) {
+    return "";
+  }
+  if (typeof str === "number") {
+    return String(str);
+  }
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&#x27;")
+    .replace(/`/g, "&#x60;");
+}
+
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing.
+ *
+ * Inspired by https://davidwalsh.name/javascript-debounce-function
+ */
+export function debounce(
+  func: Function,
+  wait: number,
+  immediate?: boolean
+): Function {
+  let timeout;
+  return function(this: any) {
+    const context = this;
+    const args = arguments;
+    function later() {
+      timeout = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    }
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+}

src/vdom.ts

@@ -0,0 +1,941 @@
+/**
+ * Owl VDOM
+ *
+ * This file contains an implementation of a virtual DOM, which is a system that
+ * can generate in-memory representations of a DOM tree, compare them, and
+ * eventually change a concrete DOM tree to match its representation, in an
+ * hopefully efficient way.
+ *
+ * Note that this code is a fork of Snabbdom, slightly tweaked/optimized for our
+ * needs (see https://github.com/snabbdom/snabbdom).
+ *
+ * The main exported values are:
+ * - interface VNode
+ * - h function (a helper function to generate a vnode)
+ * - patch function (to apply a vnode to an actual DOM node)
+ */
+
+// because those in TypeScript are too restrictive: https://github.com/Microsoft/TSJS-lib-generator/pull/237
+declare global {
+  interface Element {
+    setAttribute(name: string, value: string | number | boolean): void;
+    setAttributeNS(
+      namespaceURI: string,
+      qualifiedName: string,
+      value: string | number | boolean
+    ): void;
+  }
+}
+
+//------------------------------------------------------------------------------
+// vnode.ts
+//------------------------------------------------------------------------------
+type Key = string | number;
+
+export interface VNode {
+  sel: string | undefined;
+  data: VNodeData | undefined;
+  children: Array<VNode | string> | undefined;
+  elm: Node | undefined;
+  text: string | undefined;
+  key: Key | undefined;
+}
+
+interface VNodeData {
+  props?: Props;
+  attrs?: Attrs;
+  on?: On;
+  hook?: Hooks;
+  key?: Key;
+  ns?: string; // for SVGs
+  [key: string]: any; // for any other 3rd party module
+}
+
+function vnode(
+  sel: string | undefined,
+  data: any | undefined,
+  children: Array<VNode | string> | undefined,
+  text: string | undefined,
+  elm: Element | Text | undefined
+): VNode {
+  let key = data === undefined ? undefined : data.key;
+  return {sel, data, children, text, elm, key};
+}
+
+//------------------------------------------------------------------------------
+// snabbdom.ts
+//------------------------------------------------------------------------------
+function isUndef(s: any): boolean {
+  return s === undefined;
+}
+function isDef(s: any): boolean {
+  return s !== undefined;
+}
+
+type VNodeQueue = Array<VNode>;
+
+const emptyNode = vnode("", {}, [], undefined, undefined);
+
+function sameVnode(vnode1: VNode, vnode2: VNode): boolean {
+  return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
+}
+
+function isVnode(vnode: any): vnode is VNode {
+  return vnode.sel !== undefined;
+}
+
+type KeyToIndexMap = { [key: string]: number };
+
+type ArraysOf<T> = { [K in keyof T]: (T[K])[] };
+
+type ModuleHooks = ArraysOf<Module>;
+
+function createKeyToOldIdx(
+  children: Array<VNode>,
+  beginIdx: number,
+  endIdx: number
+): KeyToIndexMap {
+  let i: number,
+    map: KeyToIndexMap = {},
+    key: Key | undefined,
+    ch;
+  for (i = beginIdx; i <= endIdx; ++i) {
+    ch = children[i];
+    if (ch != null) {
+      key = ch.key;
+      if (key !== undefined) map[key] = i;
+    }
+  }
+  return map;
+}
+
+const hooks: (keyof Module)[] = [
+  "create",
+  "update",
+  "remove",
+  "destroy",
+  "pre",
+  "post"
+];
+
+export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
+  let i: number,
+    j: number,
+    cbs = {} as ModuleHooks;
+
+  const api: DOMAPI = domApi !== undefined ? domApi : htmlDomApi;
+
+  for (i = 0; i < hooks.length; ++i) {
+    cbs[hooks[i]] = [];
+    for (j = 0; j < modules.length; ++j) {
+      const hook = modules[j][hooks[i]];
+      if (hook !== undefined) {
+        (cbs[hooks[i]] as Array<any>).push(hook);
+      }
+    }
+  }
+
+  function emptyNodeAt(elm: Element) {
+    const id = elm.id ? "#" + elm.id : "";
+    const c = elm.className ? "." + elm.className.split(" ").join(".") : "";
+    return vnode(
+      api.tagName(elm).toLowerCase() + id + c,
+      {},
+      [],
+      undefined,
+      elm
+    );
+  }
+
+  function createRmCb(childElm: Node, listeners: number) {
+    return function rmCb() {
+      if (--listeners === 0) {
+        const parent = api.parentNode(childElm);
+        api.removeChild(parent, childElm);
+      }
+    };
+  }
+
+  function createElm(vnode: VNode, insertedVnodeQueue: VNodeQueue): Node {
+    let i: any,
+      iLen: number,
+      data = vnode.data;
+    if (data !== undefined) {
+      if (isDef((i = data.hook)) && isDef((i = i.init))) {
+        i(vnode);
+        data = vnode.data;
+      }
+    }
+    let children = vnode.children,
+      sel = vnode.sel;
+    if (sel === "!") {
+      if (isUndef(vnode.text)) {
+        vnode.text = "";
+      }
+      vnode.elm = api.createComment(vnode.text as string);
+    } else if (sel !== undefined) {
+      // Parse selector
+      const hashIdx = sel.indexOf("#");
+      const dotIdx = sel.indexOf(".", hashIdx);
+      const hash = hashIdx > 0 ? hashIdx : sel.length;
+      const dot = dotIdx > 0 ? dotIdx : sel.length;
+      const tag =
+        hashIdx !== -1 || dotIdx !== -1
+          ? sel.slice(0, Math.min(hash, dot))
+          : sel;
+      const elm = (vnode.elm =
+        isDef(data) && isDef((i = (data as VNodeData).ns))
+          ? api.createElementNS(i, tag)
+          : api.createElement(tag));
+      if (hash < dot) elm.setAttribute("id", sel.slice(hash + 1, dot));
+      if (dotIdx > 0)
+        elm.setAttribute("class", sel.slice(dot + 1).replace(/\./g, " "));
+      for (i = 0, iLen = cbs.create.length; i < iLen; ++i)
+        cbs.create[i](emptyNode, vnode);
+      if (array(children)) {
+        for (i = 0, iLen = children.length; i < iLen; ++i) {
+          const ch = children[i];
+          if (ch != null) {
+            api.appendChild(elm, createElm(ch as VNode, insertedVnodeQueue));
+          }
+        }
+      } else if (primitive(vnode.text)) {
+        api.appendChild(elm, api.createTextNode(vnode.text));
+      }
+      i = (vnode.data as VNodeData).hook; // Reuse variable
+      if (isDef(i)) {
+        if (i.create) i.create(emptyNode, vnode);
+        if (i.insert) insertedVnodeQueue.push(vnode);
+      }
+    } else {
+      vnode.elm = api.createTextNode(vnode.text as string);
+    }
+    return vnode.elm;
+  }
+
+  function addVnodes(
+    parentElm: Node,
+    before: Node | null,
+    vnodes: Array<VNode>,
+    startIdx: number,
+    endIdx: number,
+    insertedVnodeQueue: VNodeQueue
+  ) {
+    for (; startIdx <= endIdx; ++startIdx) {
+      const ch = vnodes[startIdx];
+      if (ch != null) {
+        api.insertBefore(parentElm, createElm(ch, insertedVnodeQueue), before);
+      }
+    }
+  }
+
+  function invokeDestroyHook(vnode: VNode) {
+    let i: any,
+      iLen: number,
+      j: number,
+      jLen: number,
+      data = vnode.data;
+    if (data !== undefined) {
+      if (isDef((i = data.hook)) && isDef((i = i.destroy))) i(vnode);
+      for (i = 0, iLen = cbs.destroy.length; i < iLen; ++i)
+        cbs.destroy[i](vnode);
+      if (vnode.children !== undefined) {
+        for (j = 0, jLen = vnode.children.length; j < jLen; ++j) {
+          i = vnode.children[j];
+          if (i != null && typeof i !== "string") {
+            invokeDestroyHook(i);
+          }
+        }
+      }
+    }
+  }
+
+  function removeVnodes(
+    parentElm: Node,
+    vnodes: Array<VNode>,
+    startIdx: number,
+    endIdx: number
+  ): void {
+    for (; startIdx <= endIdx; ++startIdx) {
+      let i: any,
+        iLen: number,
+        listeners: number,
+        rm: () => void,
+        ch = vnodes[startIdx];
+      if (ch != null) {
+        if (isDef(ch.sel)) {
+          invokeDestroyHook(ch);
+          listeners = cbs.remove.length + 1;
+          rm = createRmCb(ch.elm as Node, listeners);
+          for (i = 0, iLen = cbs.remove.length; i < iLen; ++i)
+            cbs.remove[i](ch, rm);
+          if (
+            isDef((i = ch.data)) &&
+            isDef((i = i.hook)) &&
+            isDef((i = i.remove))
+          ) {
+            i(ch, rm);
+          } else {
+            rm();
+          }
+        } else {
+          // Text node
+          api.removeChild(parentElm, ch.elm as Node);
+        }
+      }
+    }
+  }
+
+  function updateChildren(
+    parentElm: Node,
+    oldCh: Array<VNode>,
+    newCh: Array<VNode>,
+    insertedVnodeQueue: VNodeQueue
+  ) {
+    let oldStartIdx = 0,
+      newStartIdx = 0;
+    let oldEndIdx = oldCh.length - 1;
+    let oldStartVnode = oldCh[0];
+    let oldEndVnode = oldCh[oldEndIdx];
+    let newEndIdx = newCh.length - 1;
+    let newStartVnode = newCh[0];
+    let newEndVnode = newCh[newEndIdx];
+    let oldKeyToIdx: any;
+    let idxInOld: number;
+    let elmToMove: VNode;
+    let before: any;
+
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+      if (oldStartVnode == null) {
+        oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
+      } else if (oldEndVnode == null) {
+        oldEndVnode = oldCh[--oldEndIdx];
+      } else if (newStartVnode == null) {
+        newStartVnode = newCh[++newStartIdx];
+      } else if (newEndVnode == null) {
+        newEndVnode = newCh[--newEndIdx];
+      } else if (sameVnode(oldStartVnode, newStartVnode)) {
+        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
+        oldStartVnode = oldCh[++oldStartIdx];
+        newStartVnode = newCh[++newStartIdx];
+      } else if (sameVnode(oldEndVnode, newEndVnode)) {
+        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
+        oldEndVnode = oldCh[--oldEndIdx];
+        newEndVnode = newCh[--newEndIdx];
+      } else if (sameVnode(oldStartVnode, newEndVnode)) {
+        // Vnode moved right
+        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
+        api.insertBefore(
+          parentElm,
+          oldStartVnode.elm as Node,
+          api.nextSibling(oldEndVnode.elm as Node)
+        );
+        oldStartVnode = oldCh[++oldStartIdx];
+        newEndVnode = newCh[--newEndIdx];
+      } else if (sameVnode(oldEndVnode, newStartVnode)) {
+        // Vnode moved left
+        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
+        api.insertBefore(
+          parentElm,
+          oldEndVnode.elm as Node,
+          oldStartVnode.elm as Node
+        );
+        oldEndVnode = oldCh[--oldEndIdx];
+        newStartVnode = newCh[++newStartIdx];
+      } else {
+        if (oldKeyToIdx === undefined) {
+          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
+        }
+        idxInOld = oldKeyToIdx[newStartVnode.key as string];
+        if (isUndef(idxInOld)) {
+          // New element
+          api.insertBefore(
+            parentElm,
+            createElm(newStartVnode, insertedVnodeQueue),
+            oldStartVnode.elm as Node
+          );
+          newStartVnode = newCh[++newStartIdx];
+        } else {
+          elmToMove = oldCh[idxInOld];
+          if (elmToMove.sel !== newStartVnode.sel) {
+            api.insertBefore(
+              parentElm,
+              createElm(newStartVnode, insertedVnodeQueue),
+              oldStartVnode.elm as Node
+            );
+          } else {
+            patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
+            oldCh[idxInOld] = undefined as any;
+            api.insertBefore(
+              parentElm,
+              elmToMove.elm as Node,
+              oldStartVnode.elm as Node
+            );
+          }
+          newStartVnode = newCh[++newStartIdx];
+        }
+      }
+    }
+    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
+      if (oldStartIdx > oldEndIdx) {
+        before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
+        addVnodes(
+          parentElm,
+          before,
+          newCh,
+          newStartIdx,
+          newEndIdx,
+          insertedVnodeQueue
+        );
+      } else {
+        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
+      }
+    }
+  }
+
+  function patchVnode(
+    oldVnode: VNode,
+    vnode: VNode,
+    insertedVnodeQueue: VNodeQueue
+  ) {
+    let i: any, iLen: number, hook: any;
+    if (
+      isDef((i = vnode.data)) &&
+      isDef((hook = i.hook)) &&
+      isDef((i = hook.prepatch))
+    ) {
+      i(oldVnode, vnode);
+    }
+    const elm = (vnode.elm = oldVnode.elm as Node);
+    let oldCh = oldVnode.children;
+    let ch = vnode.children;
+    if (oldVnode === vnode) return;
+    if (vnode.data !== undefined) {
+      for (i = 0, iLen = cbs.update.length; i < iLen; ++i)
+        cbs.update[i](oldVnode, vnode);
+      i = vnode.data.hook;
+      if (isDef(i) && isDef((i = i.update))) i(oldVnode, vnode);
+    }
+    if (isUndef(vnode.text)) {
+      if (isDef(oldCh) && isDef(ch)) {
+        if (oldCh !== ch)
+          updateChildren(
+            elm,
+            oldCh as Array<VNode>,
+            ch as Array<VNode>,
+            insertedVnodeQueue
+          );
+      } else if (isDef(ch)) {
+        if (isDef(oldVnode.text)) api.setTextContent(elm, "");
+        addVnodes(
+          elm,
+          null,
+          ch as Array<VNode>,
+          0,
+          (ch as Array<VNode>).length - 1,
+          insertedVnodeQueue
+        );
+      } else if (isDef(oldCh)) {
+        removeVnodes(
+          elm,
+          oldCh as Array<VNode>,
+          0,
+          (oldCh as Array<VNode>).length - 1
+        );
+      } else if (isDef(oldVnode.text)) {
+        api.setTextContent(elm, "");
+      }
+    } else if (oldVnode.text !== vnode.text) {
+      if (isDef(oldCh)) {
+        removeVnodes(
+          elm,
+          oldCh as Array<VNode>,
+          0,
+          (oldCh as Array<VNode>).length - 1
+        );
+      }
+      api.setTextContent(elm, vnode.text as string);
+    }
+    if (isDef(hook) && isDef((i = hook.postpatch))) {
+      i(oldVnode, vnode);
+    }
+  }
+
+  return function patch(oldVnode: VNode | Element, vnode: VNode): VNode {
+    let i: number, iLen: number, elm: Node, parent: Node;
+    const insertedVnodeQueue: VNodeQueue = [];
+    for (i = 0, iLen = cbs.pre.length; i < iLen; ++i) cbs.pre[i]();
+
+    if (!isVnode(oldVnode)) {
+      oldVnode = emptyNodeAt(oldVnode);
+    }
+
+    if (sameVnode(oldVnode, vnode)) {
+      patchVnode(oldVnode, vnode, insertedVnodeQueue);
+    } else {
+      elm = oldVnode.elm as Node;
+      parent = api.parentNode(elm);
+
+      createElm(vnode, insertedVnodeQueue);
+
+      if (parent !== null) {
+        api.insertBefore(parent, vnode.elm as Node, api.nextSibling(elm));
+        removeVnodes(parent, [oldVnode], 0, 0);
+      }
+    }
+
+    for (i = 0, iLen = insertedVnodeQueue.length; i < iLen; ++i) {
+      (((insertedVnodeQueue[i].data as VNodeData).hook as Hooks).insert as any)(
+        insertedVnodeQueue[i]
+      );
+    }
+    for (i = 0, iLen = cbs.post.length; i < iLen; ++i) cbs.post[i]();
+    return vnode;
+  };
+}
+
+//------------------------------------------------------------------------------
+// is.ts
+//------------------------------------------------------------------------------
+const array = Array.isArray;
+function primitive(s: any): s is string | number {
+  return typeof s === "string" || typeof s === "number";
+}
+
+//------------------------------------------------------------------------------
+// htmldomapi.ts
+//------------------------------------------------------------------------------
+interface DOMAPI {
+  createElement: (tagName: any) => HTMLElement;
+  createElementNS: (namespaceURI: string, qualifiedName: string) => Element;
+  createTextNode: (text: string) => Text;
+  createComment: (text: string) => Comment;
+  insertBefore: (
+    parentNode: Node,
+    newNode: Node,
+    referenceNode: Node | null
+  ) => void;
+  removeChild: (node: Node, child: Node) => void;
+  appendChild: (node: Node, child: Node) => void;
+  parentNode: (node: Node) => Node;
+  nextSibling: (node: Node) => Node;
+  tagName: (elm: Element) => string;
+  setTextContent: (node: Node, text: string | null) => void;
+  getTextContent: (node: Node) => string | null;
+  isElement: (node: Node) => node is Element;
+  isText: (node: Node) => node is Text;
+  isComment: (node: Node) => node is Comment;
+}
+
+function createElement(tagName: any): HTMLElement {
+  return document.createElement(tagName);
+}
+
+function createElementNS(namespaceURI: string, qualifiedName: string): Element {
+  return document.createElementNS(namespaceURI, qualifiedName);
+}
+
+function createTextNode(text: string): Text {
+  return document.createTextNode(text);
+}
+
+function createComment(text: string): Comment {
+  return document.createComment(text);
+}
+
+function insertBefore(
+  parentNode: Node,
+  newNode: Node,
+  referenceNode: Node | null
+): void {
+  parentNode.insertBefore(newNode, referenceNode);
+}
+
+function removeChild(node: Node, child: Node): void {
+  node.removeChild(child);
+}
+
+function appendChild(node: Node, child: Node): void {
+  node.appendChild(child);
+}
+
+function parentNode(node: Node): Node | null {
+  return node.parentNode;
+}
+
+function nextSibling(node: Node): Node | null {
+  return node.nextSibling;
+}
+
+function tagName(elm: Element): string {
+  return elm.tagName;
+}
+
+function setTextContent(node: Node, text: string | null): void {
+  node.textContent = text;
+}
+
+function getTextContent(node: Node): string | null {
+  return node.textContent;
+}
+
+function isElement(node: Node): node is Element {
+  return node.nodeType === 1;
+}
+
+function isText(node: Node): node is Text {
+  return node.nodeType === 3;
+}
+
+function isComment(node: Node): node is Comment {
+  return node.nodeType === 8;
+}
+
+const htmlDomApi = {
+  createElement,
+  createElementNS,
+  createTextNode,
+  createComment,
+  insertBefore,
+  removeChild,
+  appendChild,
+  parentNode,
+  nextSibling,
+  tagName,
+  setTextContent,
+  getTextContent,
+  isElement,
+  isText,
+  isComment
+} as DOMAPI;
+
+//------------------------------------------------------------------------------
+// hooks.ts
+//------------------------------------------------------------------------------
+type PreHook = () => any;
+type InitHook = (vNode: VNode) => any;
+type CreateHook = (emptyVNode: VNode, vNode: VNode) => any;
+type InsertHook = (vNode: VNode) => any;
+type PrePatchHook = (oldVNode: VNode, vNode: VNode) => any;
+type UpdateHook = (oldVNode: VNode, vNode: VNode) => any;
+type PostPatchHook = (oldVNode: VNode, vNode: VNode) => any;
+type DestroyHook = (vNode: VNode) => any;
+type RemoveHook = (vNode: VNode, removeCallback: () => void) => any;
+type PostHook = () => any;
+
+interface Hooks {
+  pre?: PreHook;
+  init?: InitHook;
+  create?: CreateHook;
+  insert?: InsertHook;
+  prepatch?: PrePatchHook;
+  update?: UpdateHook;
+  postpatch?: PostPatchHook;
+  destroy?: DestroyHook;
+  remove?: RemoveHook;
+  post?: PostHook;
+}
+
+//------------------------------------------------------------------------------
+// h.ts
+//------------------------------------------------------------------------------
+type VNodes = Array<VNode>;
+type VNodeChildElement = VNode | string | number | undefined | null;
+type ArrayOrElement<T> = T | T[];
+type VNodeChildren = ArrayOrElement<VNodeChildElement>;
+
+function addNS(
+  data: any,
+  children: VNodes | undefined,
+  sel: string | undefined
+): void {
+  data.ns = "http://www.w3.org/2000/svg";
+  if (sel !== "foreignObject" && children !== undefined) {
+    for (let i = 0, iLen = children.length; i < iLen; ++i) {
+      let childData = children[i].data;
+      if (childData !== undefined) {
+        addNS(
+          childData,
+          (children[i] as VNode).children as VNodes,
+          children[i].sel
+        );
+      }
+    }
+  }
+}
+
+export function h(sel: string): VNode;
+export function h(sel: string, data: VNodeData): VNode;
+export function h(sel: string, children: VNodeChildren): VNode;
+export function h(sel: string, data: VNodeData, children: VNodeChildren): VNode;
+export function h(sel: any, b?: any, c?: any): VNode {
+  var data: VNodeData = {},
+    children: any,
+    text: any,
+    i: number,
+    iLen: number;
+  if (c !== undefined) {
+    data = b;
+    if (array(c)) {
+      children = c;
+    } else if (primitive(c)) {
+      text = c;
+    } else if (c && c.sel) {
+      children = [c];
+    }
+  } else if (b !== undefined) {
+    if (array(b)) {
+      children = b;
+    } else if (primitive(b)) {
+      text = b;
+    } else if (b && b.sel) {
+      children = [b];
+    } else {
+      data = b;
+    }
+  }
+  if (children !== undefined) {
+    for (i = 0, iLen = children.length; i < iLen; ++i) {
+      if (primitive(children[i]))
+        children[i] = vnode(
+          undefined,
+          undefined,
+          undefined,
+          children[i],
+          undefined
+        );
+    }
+  }
+  if (
+    sel[0] === "s" &&
+    sel[1] === "v" &&
+    sel[2] === "g" &&
+    (sel.length === 3 || sel[3] === "." || sel[3] === "#")
+  ) {
+    addNS(data, children, sel);
+  }
+  return vnode(sel, data, children, text, undefined);
+}
+
+//------------------------------------------------------------------------------
+// module/props.ts
+//------------------------------------------------------------------------------
+type Props = Record<string, any>;
+
+function updateProps(oldVnode: VNode, vnode: VNode): void {
+  var key: string,
+    cur: any,
+    old: any,
+    elm = vnode.elm,
+    oldProps = (oldVnode.data as VNodeData).props,
+    props = (vnode.data as VNodeData).props;
+
+  if (!oldProps && !props) return;
+  if (oldProps === props) return;
+  oldProps = oldProps || {};
+  props = props || {};
+
+  for (key in oldProps) {
+    if (!props[key]) {
+      delete (elm as any)[key];
+    }
+  }
+  for (key in props) {
+    cur = props[key];
+    old = oldProps[key];
+    if (old !== cur && (key !== "value" || (elm as any)[key] !== cur)) {
+      (elm as any)[key] = cur;
+    }
+  }
+}
+
+export const propsModule = {
+  create: updateProps,
+  update: updateProps
+} as Module;
+
+//------------------------------------------------------------------------------
+// module/module.ts
+//------------------------------------------------------------------------------
+interface Module {
+  pre: PreHook;
+  create: CreateHook;
+  update: UpdateHook;
+  destroy: DestroyHook;
+  remove: RemoveHook;
+  post: PostHook;
+}
+
+//------------------------------------------------------------------------------
+// module/eventlisteners.ts
+//------------------------------------------------------------------------------
+type On = {
+  [N in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[N]) => void
+} & {
+  [event: string]: EventListener;
+};
+
+function invokeHandler(handler: any, vnode?: VNode, event?: Event): void {
+  if (typeof handler === "function") {
+    // call function handler
+    handler.call(vnode, event, vnode);
+  } else if (typeof handler === "object") {
+    // call handler with arguments
+    if (typeof handler[0] === "function") {
+      // special case for single argument for performance
+      if (handler.length === 2) {
+        handler[0].call(vnode, handler[1], event, vnode);
+      } else {
+        var args = handler.slice(1);
+        args.push(event);
+        args.push(vnode);
+        handler[0].apply(vnode, args);
+      }
+    } else {
+      // call multiple handlers
+      for (let i = 0, iLen = handler.length; i < iLen; i++) {
+        invokeHandler(handler[i], vnode, event);
+      }
+    }
+  }
+}
+
+function handleEvent(event: Event, vnode: VNode) {
+  var name = event.type,
+    on = (vnode.data as VNodeData).on;
+
+  // call event handler(s) if exists
+  if (on && on[name]) {
+    invokeHandler(on[name], vnode, event);
+  }
+}
+
+function createListener() {
+  return function handler(event: Event) {
+    handleEvent(event, (handler as any).vnode);
+  };
+}
+
+function updateEventListeners(oldVnode: VNode, vnode?: VNode): void {
+  var oldOn = (oldVnode.data as VNodeData).on,
+    oldListener = (oldVnode as any).listener,
+    oldElm: Element = oldVnode.elm as Element,
+    on = vnode && (vnode.data as VNodeData).on,
+    elm: Element = (vnode && vnode.elm) as Element,
+    name: string;
+
+  // optimization for reused immutable handlers
+  if (oldOn === on) {
+    return;
+  }
+
+  // remove existing listeners which no longer used
+  if (oldOn && oldListener) {
+    // if element changed or deleted we remove all existing listeners unconditionally
+    if (!on) {
+      for (name in oldOn) {
+        // remove listener if element was changed or existing listeners removed
+        oldElm.removeEventListener(name, oldListener, false);
+      }
+    } else {
+      for (name in oldOn) {
+        // remove listener if existing listener removed
+        if (!on[name]) {
+          oldElm.removeEventListener(name, oldListener, false);
+        }
+      }
+    }
+  }
+
+  // add new listeners which has not already attached
+  if (on) {
+    // reuse existing listener or create new
+    var listener = ((vnode as any).listener =
+      (oldVnode as any).listener || createListener());
+    // update vnode for listener
+    listener.vnode = vnode;
+
+    // if element changed or added we add all needed listeners unconditionally
+    if (!oldOn) {
+      for (name in on) {
+        // add listener if element was changed or new listeners added
+        elm.addEventListener(name, listener, false);
+      }
+    } else {
+      for (name in on) {
+        // add listener if new listener added
+        if (!oldOn[name]) {
+          elm.addEventListener(name, listener, false);
+        }
+      }
+    }
+  }
+}
+
+export const eventListenersModule = {
+  create: updateEventListeners,
+  update: updateEventListeners,
+  destroy: updateEventListeners
+} as Module;
+
+//------------------------------------------------------------------------------
+// attributes.ts
+//------------------------------------------------------------------------------
+type Attrs = Record<string, string | number | boolean>;
+
+const xlinkNS = "http://www.w3.org/1999/xlink";
+const xmlNS = "http://www.w3.org/XML/1998/namespace";
+const colonChar = 58;
+const xChar = 120;
+
+function updateAttrs(oldVnode: VNode, vnode: VNode): void {
+  var key: string,
+    elm: Element = vnode.elm as Element,
+    oldAttrs = (oldVnode.data as VNodeData).attrs,
+    attrs = (vnode.data as VNodeData).attrs;
+
+  if (!oldAttrs && !attrs) return;
+  if (oldAttrs === attrs) return;
+  oldAttrs = oldAttrs || {};
+  attrs = attrs || {};
+
+  // update modified attributes, add new attributes
+  for (key in attrs) {
+    const cur = attrs[key];
+    const old = oldAttrs[key];
+    if (old !== cur) {
+      if (cur === true) {
+        elm.setAttribute(key, "");
+      } else if (cur === false) {
+        elm.removeAttribute(key);
+      } else {
+        if (key.charCodeAt(0) !== xChar) {
+          elm.setAttribute(key, cur);
+        } else if (key.charCodeAt(3) === colonChar) {
+          // Assume xml namespace
+          elm.setAttributeNS(xmlNS, key, cur);
+        } else if (key.charCodeAt(5) === colonChar) {
+          // Assume xlink namespace
+          elm.setAttributeNS(xlinkNS, key, cur);
+        } else {
+          elm.setAttribute(key, cur);
+        }
+      }
+    }
+  }
+  // remove removed attributes
+  // use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
+  // the other option is to remove all attributes with value == undefined
+  for (key in oldAttrs) {
+    if (!(key in attrs)) {
+      elm.removeAttribute(key);
+    }
+  }
+}
+
+export const attrsModule = {
+  create: updateAttrs,
+  update: updateAttrs
+} as Module;
+
+export const patch = init([eventListenersModule, attrsModule, propsModule]);

tests/__snapshots__/animations.test.ts.snap

@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`animations t-transition combined with t-widget 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let _2_index = c1.length;
+    c1.push(null);
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`Child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;utils.transitionInsert(vn, 'chimay');},remove() {},destroy(vn) {let finalize = () => {
+          w4.destroy();
+        };
+        utils.transitionRemove(vn, 'chimay', finalize);}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`animations t-transition combined with t-widget and t-if 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    if (context['state'].display) {
+        //WIDGET
+        let def3;
+        let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+        let _2_index = c1.length;
+        c1.push(null);
+        let props4 = {};
+        if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+            if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+                def3 = w4.__owl__.renderPromise;
+            } else {
+                w4.destroy();
+                w4 = false;
+            }
+        }
+        if (!w4) {
+            let widgetKey4 = \`Child\`;
+            let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+            if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+            w4 = new W4(owner, props4);
+            context.__owl__.cmap[4] = w4.__owl__.id;
+            def3 = w4._prepare();
+            def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;utils.transitionInsert(vn, 'chimay');},remove() {},destroy(vn) {let finalize = () => {
+          w4.destroy();
+        };
+        utils.transitionRemove(vn, 'chimay', finalize);}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+        } else {
+            def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+            def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+        }
+        extra.promises.push(def3);
+    }
+    return vn1;
+}"
+`;
+
+exports[`animations t-transition with no delay/duration 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('span', p1, c1);
+    p1.hook = {
+      insert: vn => {
+        this.utils.transitionInsert(vn, 'jupiler');
+      },
+      remove: (vn, rm) => {
+        this.utils.transitionRemove(vn, 'jupiler', rm);
+      },
+    };
+    c1.push({text: \`blue\`});
+    return vn1;
+}"
+`;
+
+exports[`animations t-transition, on a simple node (insert) 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('span', p1, c1);
+    p1.hook = {
+      insert: vn => {
+        this.utils.transitionInsert(vn, 'chimay');
+      },
+      remove: (vn, rm) => {
+        this.utils.transitionRemove(vn, 'chimay', rm);
+      },
+    };
+    c1.push({text: \`blue\`});
+    return vn1;
+}"
+`;

tests/__snapshots__/store.test.ts.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`connecting a component to store connecting a component to a local store 1`] = `"<div></div>"`;
+
+exports[`connecting a component to store connecting a component to a local store 2`] = `"<div><span>hello</span></div>"`;
+
+exports[`connecting a component to store connecting a component works 1`] = `"<div></div>"`;
+
+exports[`connecting a component to store connecting a component works 2`] = `"<div><span>hello</span></div>"`;
+
+exports[`connecting a component to store deep and shallow connecting a component 1`] = `"<div><span>Kasteel</span></div>"`;
+
+exports[`connecting a component to store deep and shallow connecting a component 2`] = `"<div><span>Kasteel</span></div>"`;
+
+exports[`connecting a component to store deep and shallow connecting a component 3`] = `"<div><span>Bertinchamps</span></div>"`;
+
+exports[`connecting a component to store deep and shallow connecting a component 4`] = `"<div><span>Kasteel</span></div>"`;

tests/__snapshots__/untitled.js

@@ -0,0 +1,33 @@
+function anonymous(context, extra) {
+ var h = this.utils.h;
+          let c1 = [], p1 = {key:1};
+          var vn1 = h('div', p1, c1);
+          if (context['state'].display) {
+              //WIDGET
+              let _2_index = c1.length;
+              c1.push(null);
+              let def3;
+              let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+              let props4 = {};
+              if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode && props4 !== w4.__owl__.renderProps) {
+                  w4.destroy();
+                  w4 = false
+              }
+              if (!w4) {
+                  let W4 = context.widgets['Child'];
+                  if (!W4) {throw new Error(`Cannot find the definition of widget "Child"`)}
+                  w4 = new W4(owner, props4);
+                  context.__owl__.cmap[4] = w4.__owl__.id;
+                  def3 = w4._prepare();
+                  def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4, hook: {insert: (vn) => {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;this.utils.transitionInsert(vn.elm, 'chimay');},remove: () => {},destroy: (vn) => {let finalize = () => {
+                w4.destroy();
+              };
+              this.utils.transitionRemove(vn.elm, 'chimay', finalize);}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+              } else {
+                  def3 = w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+                  def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+              }
+              extra.promises.push(def3);
+          }
+
+}

tests/animations.test.ts

@@ -0,0 +1,419 @@
+import { Component, Env } from "../src/component";
+import { QWeb } from "../src/qweb_core";
+import {
+  makeDeferred,
+  makeTestFixture,
+  makeTestEnv,
+  nextTick,
+  patchNextFrame,
+  renderToDOM,
+  unpatchNextFrame
+} from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+// We create before each test:
+// - fixture: a div, appended to the DOM, intended to be the target of dom
+//   manipulations.  Note that it is removed after each test.
+// - qweb: a new QWeb instance
+// - env: a WEnv, necessary to create new widgets
+// - cssEl: a stylesheet injected into the dom
+
+let fixture: HTMLElement;
+let qweb: QWeb;
+let env: Env;
+let cssEl: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+  env = makeTestEnv();
+  qweb = new QWeb();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+class Widget extends Component<any, any, any> {}
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+describe("animations", () => {
+  beforeEach(() => {
+    cssEl = document.createElement("style");
+    let css = `
+      .chimay-enter-active, .chimay-leave-active {
+        transition-property: opacity;
+        transition-duration: 0.1s;
+      }
+      .chimay-enter, .chimay-leave-to {
+        opacity: 0;
+      }
+    `;
+    cssEl.textContent = css.trim();
+    document.head.appendChild(cssEl);
+  });
+
+  afterEach(() => {
+    document.head.removeChild(cssEl);
+    unpatchNextFrame();
+  });
+
+  test("t-transition, on a simple node (insert)", async () => {
+    expect.assertions(5);
+    qweb.addTemplate("test", `<span t-transition="chimay">blue</span>`);
+
+    let def = makeDeferred();
+    patchNextFrame(cb => {
+      expect(node.className).toBe("chimay-enter chimay-enter-active");
+      cb();
+      expect(node.className).toBe("chimay-enter-active chimay-enter-to");
+      def.resolve();
+    });
+    let node: HTMLElement = <HTMLElement>renderToDOM(qweb, "test");
+
+    expect(node.className).toBe("chimay-enter chimay-enter-active");
+    await def; // wait for the mocked repaint to be done
+    node.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(node.className).toBe("");
+  });
+
+  test("t-transition with no delay/duration", async () => {
+    expect.assertions(4);
+    qweb.addTemplate("test", `<span t-transition="jupiler">blue</span>`);
+
+    let def = makeDeferred();
+    patchNextFrame(cb => {
+      expect(node.className).toBe("jupiler-enter jupiler-enter-active");
+      cb();
+      expect(node.className).toBe("");
+      def.resolve();
+    });
+    let node: HTMLElement = <HTMLElement>renderToDOM(qweb, "test");
+    expect(node.className).toBe("jupiler-enter jupiler-enter-active");
+    await def;
+  });
+
+  test("t-transition on a conditional node", async () => {
+    expect.assertions(7);
+
+    env.qweb.addTemplate(
+      "TestWidget",
+      `<div><span t-if="!state.hide" t-transition="chimay">blue</span></div>`
+    );
+    class TestWidget extends Widget {
+      state = { hide: false };
+    }
+    const widget = new TestWidget(env);
+
+    // insert widget into the DOM
+    let def = makeDeferred();
+    var spanNode;
+    patchNextFrame(cb => {
+      expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
+      cb();
+      expect(spanNode.className).toBe("chimay-enter-active chimay-enter-to");
+      def.resolve();
+    });
+    await widget.mount(fixture);
+    spanNode = widget.el!.children[0];
+    expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(spanNode.className).toBe("");
+
+    // remove span from the DOM
+    def = makeDeferred();
+    widget.state.hide = true;
+    patchNextFrame(cb => {
+      expect(spanNode.className).toBe("chimay-leave chimay-leave-active");
+      cb();
+      expect(spanNode.className).toBe("chimay-leave-active chimay-leave-to");
+      def.resolve();
+    });
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(spanNode.className).toBe("");
+  });
+
+  test("t-transition combined with t-ref", async () => {
+    expect.assertions(5);
+
+    env.qweb.addTemplate(
+      "TestWidget",
+      `<div><span t-ref="span" t-transition="chimay">blue</span></div>`
+    );
+    class TestWidget extends Widget {
+      state = { hide: false };
+    }
+    const widget = new TestWidget(env);
+
+    // insert widget into the DOM
+    let def = makeDeferred();
+    var spanNode;
+    patchNextFrame(cb => {
+      expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
+      cb();
+      expect(spanNode.className).toBe("chimay-enter-active chimay-enter-to");
+      def.resolve();
+    });
+    await widget.mount(fixture);
+    spanNode = widget.el!.children[0];
+    expect(widget.refs.span).toBe(spanNode);
+    expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(spanNode.className).toBe("");
+  });
+
+  test("t-transition combined with t-widget", async () => {
+    expect.assertions(5);
+
+    env.qweb.addTemplate(
+      "Parent",
+      `<div><t t-widget="Child" t-transition="chimay"/></div>`
+    );
+    env.qweb.addTemplate("Child", `<span>blue</span>`);
+    class Parent extends Widget {
+      widgets = { Child: Child };
+    }
+    class Child extends Widget {}
+    const widget = new Parent(env);
+
+    let def = makeDeferred();
+    var spanNode;
+    patchNextFrame(cb => {
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
+      );
+      cb();
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-enter-active chimay-enter-to">blue</span></div>'
+      );
+      def.resolve();
+    });
+    await widget.mount(fixture);
+    spanNode = widget.el!.children[0];
+
+    expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
+    );
+
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
+  });
+
+  test("t-transition combined with t-widget and t-if", async () => {
+    expect.assertions(8);
+
+    env.qweb.addTemplate(
+      "Parent",
+      `<div><t t-if="state.display" t-widget="Child" t-transition="chimay"/></div>`
+    );
+    env.qweb.addTemplate("Child", `<span>blue</span>`);
+    class Parent extends Widget {
+      widgets = { Child: Child };
+      state = { display: true };
+    }
+    class Child extends Widget {}
+    const widget = new Parent(env);
+
+    let def = makeDeferred();
+    var spanNode;
+    patchNextFrame(cb => {
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
+      );
+      cb();
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-enter-active chimay-enter-to">blue</span></div>'
+      );
+      def.resolve();
+    });
+    await widget.mount(fixture);
+    spanNode = widget.el!.children[0];
+
+    expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
+    );
+
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
+
+    // remove span from the DOM
+    def = makeDeferred();
+    widget.state.display = false;
+    patchNextFrame(cb => {
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-leave chimay-leave-active" data-owl-key="4">blue</span></div>'
+      );
+      cb();
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="4">blue</span></div>'
+      );
+      def.resolve();
+    });
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(fixture.innerHTML).toBe("<div></div>");
+  });
+
+  test("t-transition combined with t-mounted", async () => {
+    env.qweb.addTemplate(
+      "TestWidget",
+      `<div><span t-if="state.flag" t-mounted="f" t-transition="chimay">blue</span></div>`
+    );
+    class TestWidget extends Widget {
+      state = { flag: false };
+      f() {}
+    }
+    const widget = new TestWidget(env);
+    widget.f = jest.fn();
+    await widget.mount(fixture);
+
+    patchNextFrame(cb => cb());
+    expect(widget.f).toHaveBeenCalledTimes(0);
+
+    widget.state.flag = true;
+    await nextTick();
+    expect(widget.f).toHaveBeenCalledTimes(1);
+    unpatchNextFrame();
+  });
+
+  test("t-transition, remove and re-add before transitionend", async () => {
+    expect.assertions(11);
+
+    env.qweb.addTemplates(
+      `<templates>
+        <div t-name="Parent">
+          <button t-on-click="toggle">Toggle</button>
+          <span t-if="state.flag" t-transition="chimay">blue</span>
+        </div>
+      </templates>`
+    );
+    class Parent extends Widget {
+      constructor(parent) {
+        super(parent);
+        this.state = { flag: false };
+      }
+      toggle() {
+        this.state.flag = !this.state.flag;
+      }
+    }
+
+    const widget = new Parent(env);
+    await widget.mount(fixture);
+    let button = widget.el!.querySelector("button");
+
+    let def = makeDeferred();
+    let phase = "enter";
+    patchNextFrame(cb => {
+      let spans = fixture.querySelectorAll("span");
+      expect(spans.length).toBe(1);
+      expect(spans[0].className).toBe(`chimay-${phase} chimay-${phase}-active`);
+      cb();
+      expect(spans[0].className).toBe(
+        `chimay-${phase}-active chimay-${phase}-to`
+      );
+      def.resolve();
+    });
+
+    // click display the span
+    button!.click();
+    await def; // wait for the mocked repaint to be done
+    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(fixture.innerHTML).toBe(
+      '<div><button>Toggle</button><span class="">blue</span></div>'
+    );
+
+    // click to remove the span, and click again to re-add it before transitionend
+    def = makeDeferred();
+    phase = "leave";
+    button!.click();
+
+    await def; // wait for the mocked repaint to be done
+    def = makeDeferred();
+    phase = "enter";
+    button!.click();
+
+    await def; // wait for the mocked repaint to be done
+    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(fixture.innerHTML).toBe(
+      '<div><button>Toggle</button><span class="">blue</span></div>'
+    );
+  });
+
+  test("t-transition combined with t-widget, remove and re-add before transitionend", async () => {
+    expect.assertions(11);
+
+    env.qweb.addTemplates(
+      `<templates>
+        <div t-name="Parent">
+          <button t-on-click="toggle">Toggle</button>
+          <t t-if="state.flag" t-widget="Child" t-transition="chimay"/>
+        </div>
+        <span t-name="Child">blue</span>
+      </templates>`
+    );
+    class Child extends Widget {}
+    class Parent extends Widget {
+      widgets = { Child };
+      constructor(parent) {
+        super(parent);
+        this.state = { flag: false };
+      }
+      toggle() {
+        this.state.flag = !this.state.flag;
+      }
+    }
+
+    const widget = new Parent(env);
+    await widget.mount(fixture);
+    let button = widget.el!.querySelector("button");
+
+    let def = makeDeferred();
+    let phase = "enter";
+    patchNextFrame(cb => {
+      let spans = fixture.querySelectorAll("span");
+      expect(spans.length).toBe(1);
+      expect(spans[0].className).toBe(`chimay-${phase} chimay-${phase}-active`);
+      cb();
+      expect(spans[0].className).toBe(
+        `chimay-${phase}-active chimay-${phase}-to`
+      );
+      def.resolve();
+    });
+
+    // click display the span
+    button!.click();
+    await def; // wait for the mocked repaint to be done
+    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(fixture.innerHTML).toBe(
+      '<div><button>Toggle</button><span class="">blue</span></div>'
+    );
+
+    // click to remove the span, and click again to re-add it before transitionend
+    def = makeDeferred();
+    phase = "leave";
+    button!.click();
+
+    await def; // wait for the mocked repaint to be done
+    def = makeDeferred();
+    phase = "enter";
+    button!.click();
+
+    await def; // wait for the mocked repaint to be done
+    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(fixture.innerHTML).toBe(
+      '<div><button>Toggle</button><span class="">blue</span></div>'
+    );
+  });
+});

tests/doc_link_checker.test.ts

@@ -0,0 +1,131 @@
+/**
+ * Doc Link Checker
+ *
+ * We define here a test to make sure that there are no dead link in the Owl
+ * documentation.
+ */
+import * as fs from "fs";
+
+const LINK_REGEXP = /\[([^\[]+)\]\(([^\)]+)\)/g;
+const HEADING_REGEXP = /\n(#+\s*)(.*)/g;
+
+// files to be checked
+function getFiles(): string[] {
+  const DOCFILES = fs.readdirSync("doc").map(f => `doc/${f}`);
+  const MAINREADME = "README.md";
+  return DOCFILES.concat(MAINREADME);
+}
+
+test("All markdown links work", () => {
+  let linkNumber = 0;
+  let invalidLinkNumber = 0;
+  const files = getFiles();
+  const data = readDocData(files);
+  for (let file of data) {
+    for (let link of file.links) {
+      // DEBUG: uncomment next line
+      // console.warn(`Checking "${link.name}" in "${file.name}"`);
+      linkNumber++;
+      if (!isLinkValid(link, file, data)) {
+        console.warn(`Invalid Link: "${link.name}" in "${file.name}"`);
+        invalidLinkNumber++;
+      }
+    }
+  }
+  expect(invalidLinkNumber).toBe(0);
+  expect(linkNumber).toBeGreaterThan(10);
+});
+
+interface MarkDownLink {
+  name: string;
+  link: string;
+}
+
+interface MarkDownSection {
+  name: string;
+  slug: string;
+}
+
+interface FileData {
+  name: string;
+  links: MarkDownLink[];
+  sections: MarkDownSection[];
+}
+
+function isLinkValid(
+  link: MarkDownLink,
+  current: FileData,
+  files: FileData[]
+): boolean {
+  const parts = link.link.split("#");
+  const currentParts = current.name.split("/");
+  const path = currentParts.length > 1 ? currentParts[0] + '/' : "";
+  const fullName =  path + parts[0];
+  if (parts.length === 1) {
+    // no # in url
+    if (parts[0].endsWith(".md")) {
+      // it is a local md file
+      if (!files.find(f => f.name === fullName)) {
+        return false;
+      }
+    }
+  } else {
+    const file =
+      parts[0] === "" ? current : files.find(f => f.name === fullName);
+    if (!file) {
+      return false;
+    }
+    if (!file.sections.find(s => s.slug === parts[1])) {
+      return false;
+    }
+  }
+  return true;
+}
+// adapted from https://medium.com/@mhagemann/the-ultimate-way-to-slugify-a-url-string-in-javascript-b8e4a0d849e1
+function slugify(str) {
+  const a = "àáäâãåăæçèéëêǵḧìíïîḿńǹñòóöôœøṕŕßśșțùúüûǘẃẍÿź·_,:;";
+  const b = "aaaaaaaaceeeeghiiiimnnnooooooprssstuuuuuwxyz-----";
+  const p = new RegExp(a.split("").join("|"), "g");
+  return str
+    .toString()
+    .toLowerCase()
+    .replace(/\//g, "") // remove /
+    .replace(/\s+/g, "-") // Replace spaces with -
+    .replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters
+    .replace(/&/g, "-and-") // Replace & with ‘and’
+    .replace(/[^\w\-]+/g, "") // Remove all non-word characters
+    .replace(/\-\-+/g, "-") // Replace multiple - with single -
+    .replace(/^-+/, "") // Trim - from start of text
+    .replace(/-+$/, ""); // Trim - from end of text
+}
+
+function readDocData(files: string[]): FileData[] {
+  const result: FileData[] = [];
+
+  for (let file of files) {
+    const fileData: FileData = {
+      name: file,
+      links: [],
+      sections: []
+    };
+    const content = fs.readFileSync(file, { encoding: "utf8" });
+    let m;
+    // get links info
+    do {
+      m = LINK_REGEXP.exec(content);
+      if (m) {
+        fileData.links.push({ name: m[0], link: m[2] });
+      }
+    } while (m);
+    // get sections info
+    do {
+      m = HEADING_REGEXP.exec(content);
+      if (m) {
+        fileData.sections.push({ name: m[0], slug: slugify(m[2]) });
+      }
+    } while (m);
+
+    result.push(fileData);
+  }
+  return result;
+}

tests/event_bus.test.ts

@@ -0,0 +1,47 @@
+import { EventBus } from "../src/event_bus";
+
+describe("event bus behaviour", () => {
+  test("can subscribe and be notified", () => {
+    const bus = new EventBus();
+    let notified = false;
+    bus.on("event", {}, () => (notified = true));
+    expect(notified).toBe(false);
+    bus.trigger("event");
+    expect(notified).toBe(true);
+  });
+
+  test("callbacks are called with proper 'this'", () => {
+    expect.assertions(1);
+    const bus = new EventBus();
+    const owner = {};
+    bus.on("event", owner, function(this: any) {
+      expect(this).toBe(owner);
+    });
+    bus.trigger("event");
+  });
+
+  test("throw error if callback is undefined", () => {
+    expect.assertions(1);
+    const bus = new EventBus();
+    expect(() => bus.on("event", {}, <any>undefined)).toThrow(
+      `Missing callback`
+    );
+  });
+
+  test("can unsubscribe", () => {
+    const bus = new EventBus();
+    let notified = false;
+    let owner = {};
+    bus.on("event", owner, () => (notified = true));
+    bus.off("event", owner);
+    bus.trigger("event");
+    expect(notified).toBe(false);
+  });
+
+  test("arguments are properly propagated", () => {
+    expect.assertions(1);
+    const bus = new EventBus();
+    bus.on("event", {}, (arg: any) => expect(arg).toBe("hello world"));
+    bus.trigger("event", "hello world");
+  });
+});

tests/helpers.ts

@@ -0,0 +1,103 @@
+import { Env } from "../src/component";
+import { EvalContext, QWeb, UTILS } from "../src/qweb_core";
+import { patch } from "../src/vdom";
+import "../src/qweb_directives";
+import "../src/qweb_extensions";
+
+export function nextMicroTick(): Promise<void> {
+  return Promise.resolve();
+}
+
+export function nextTick(): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve));
+}
+
+export function makeTestFixture() {
+  let fixture = document.createElement("div");
+  document.body.appendChild(fixture);
+  return fixture;
+}
+
+export function normalize(str: string): string {
+  return str.replace(/\s+/g, "");
+}
+
+interface Deferred extends Promise<any> {
+  resolve(val?: any): void;
+  reject(): void;
+}
+
+export function makeDeferred(): Deferred {
+  let resolve, reject;
+  let def = new Promise((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+  (<Deferred>def).resolve = resolve;
+  (<Deferred>def).reject = reject;
+  return <Deferred>def;
+}
+
+export function makeTestEnv(): Env {
+  return {
+    qweb: new QWeb()
+  };
+}
+
+export function trim(str: string): string {
+  return str.replace(/\s/g, "");
+}
+
+export function renderToDOM(
+  qweb: QWeb,
+  template: string,
+  context: EvalContext = {},
+  extra?: any
+): HTMLElement | Text {
+  const vnode = qweb.render(template, context, extra);
+
+  // we snapshot here the compiled code. This is useful to prevent unwanted code
+  // change.
+  expect(qweb.templates[template].fn.toString()).toMatchSnapshot();
+
+  if (vnode.sel === undefined) {
+    return document.createTextNode(vnode.text!);
+  }
+  const node = document.createElement(vnode.sel!);
+  const result = patch(node, vnode);
+  return result.elm as HTMLElement;
+}
+
+export function renderToString(
+  qweb: QWeb,
+  t: string,
+  context: EvalContext = {}
+): string {
+  const node = renderToDOM(qweb, t, context);
+  return node instanceof Text ? node.textContent! : node.outerHTML;
+}
+
+// hereafter, we define two helpers to patch/unpatch the nextFrame utils. This
+// is useful for animations tests, as we hook before repaints to trigger
+// animations (thanks to requestAnimationFrame). Patching nextFrame allows to
+// simulate calls to this hook. One must not forget to unpatch afterwards.
+let nextFrame = UTILS.nextFrame;
+export function patchNextFrame(f: Function) {
+  UTILS.nextFrame = (cb: () => void) => {
+    setTimeout(() => f(cb));
+  };
+}
+
+export function unpatchNextFrame() {
+  UTILS.nextFrame = nextFrame;
+}
+
+export async function editInput(
+  input: HTMLInputElement | HTMLTextAreaElement,
+  value: string
+) {
+  input.value = value;
+  input.dispatchEvent(new Event("input"));
+  input.dispatchEvent(new Event("change"));
+  return nextTick();
+}

tests/observer.test.ts

@@ -0,0 +1,394 @@
+import { Observer } from "../src/observer";
+import { nextMicroTick } from "./helpers";
+
+describe("observer", () => {
+  test("properly observe objects", () => {
+    const observer = new Observer();
+    const obj: any = {};
+
+    observer.observe(obj);
+    expect(obj.__owl__.rev).toBe(1);
+    expect(observer.rev).toBe(1);
+
+    const ob2: any = { a: 1 };
+    observer.observe(ob2);
+    expect(ob2.__owl__.rev).toBe(1);
+    ob2.a = 2;
+    expect(observer.rev).toBe(2);
+    expect(ob2.__owl__.rev).toBe(2);
+
+    ob2.b = 3;
+    expect(observer.rev).toBe(2);
+    expect(ob2.__owl__.rev).toBe(2);
+
+    observer.set(ob2, "b", 4);
+    expect(observer.rev).toBe(3);
+    expect(ob2.__owl__.rev).toBe(3);
+  });
+
+  test("properly handle null or undefined", () => {
+    const observer = new Observer();
+    const obj: any = { a: null, b: undefined };
+
+    observer.observe(obj);
+    expect(obj.__owl__.rev).toBe(1);
+    expect(observer.rev).toBe(1);
+
+    obj.a = 3;
+    expect(obj.__owl__.rev).toBe(2);
+
+    obj.b = 5;
+    expect(obj.__owl__.rev).toBe(3);
+
+    obj.a = null;
+    obj.b = undefined;
+    expect(obj.__owl__.rev).toBe(5);
+  });
+
+  test("can change values in array", () => {
+    const observer = new Observer();
+    const obj: any = { arr: [1, 2] };
+
+    observer.observe(obj);
+    expect(obj.arr.__owl__.rev).toBe(1);
+    expect(observer.rev).toBe(1);
+
+    obj.arr[0] = "nope";
+    expect(obj.arr.__owl__.rev).toBe(1);
+    expect(observer.rev).toBe(1);
+
+    observer.set(obj.arr, 0, "yep");
+    expect(obj.arr.__owl__.rev).toBe(2);
+    expect(observer.rev).toBe(2);
+  });
+
+  test("various object property changes", () => {
+    const observer = new Observer();
+    const obj: any = { a: 1 };
+    observer.observe(obj);
+    expect(obj.__owl__.rev).toBe(1);
+    obj.a = 2;
+    expect(observer.rev).toBe(2);
+    expect(obj.__owl__.rev).toBe(2);
+
+    // same value again
+    obj.a = 2;
+    expect(observer.rev).toBe(2);
+    expect(obj.__owl__.rev).toBe(2);
+
+    obj.a = 3;
+    expect(observer.rev).toBe(3);
+    expect(obj.__owl__.rev).toBe(3);
+  });
+
+  test("properly observe arrays", () => {
+    const observer = new Observer();
+    const arr: any = [];
+    observer.observe(arr);
+    expect(arr.__owl__.rev).toBe(1);
+    expect(observer.rev).toBe(1);
+    expect(arr.length).toBe(0);
+
+    arr.push(1);
+    expect(arr.__owl__.rev).toBe(2);
+    expect(observer.rev).toBe(2);
+    expect(arr.length).toBe(1);
+
+    arr.splice(1, 0, "hey");
+    expect(arr.__owl__.rev).toBe(3);
+    expect(observer.rev).toBe(3);
+    expect(arr.length).toBe(2);
+
+    arr.unshift("lindemans");
+    expect(arr.__owl__.rev).toBe(4);
+
+    arr.reverse();
+    expect(arr.__owl__.rev).toBe(5);
+
+    arr.pop();
+    expect(arr.__owl__.rev).toBe(6);
+
+    arr.shift();
+    expect(arr.__owl__.rev).toBe(7);
+
+    arr.sort();
+    expect(arr.__owl__.rev).toBe(8);
+
+    expect(arr).toEqual([1]);
+  });
+
+  test("object pushed into arrays are observed", () => {
+    const observer = new Observer();
+    const arr: any = [];
+    observer.observe(arr);
+    expect(observer.rev).toBe(1);
+
+    arr.push({ kriek: 5 });
+    expect(observer.rev).toBe(2);
+    expect(arr.__owl__.rev).toBe(2);
+    expect(arr[0].__owl__.rev).toBe(2);
+
+    arr[0].kriek = 6;
+    expect(observer.rev).toBe(3);
+    expect(arr.__owl__.rev).toBe(2);
+    expect(arr[0].__owl__.rev).toBe(3);
+  });
+
+  test("set new property on observed object", async () => {
+    const observer = new Observer();
+    observer.notifyCB = jest.fn();
+    const state: any = { a: 1 };
+    observer.observe(state);
+    expect(state.__owl__.rev).toBe(1);
+    expect(observer.rev).toBe(1);
+    expect(observer.notifyCB).toBeCalledTimes(0);
+
+    Observer.set(state, "b", 8);
+    await nextMicroTick();
+    expect(state.__owl__.rev).toBe(2);
+    expect(observer.rev).toBe(2);
+    expect(observer.notifyCB).toBeCalledTimes(1);
+    expect(state.b).toBe(8);
+  });
+
+  test("delete property from observed object", async () => {
+    const observer = new Observer();
+    observer.notifyCB = jest.fn();
+    const state: any = { a: 1, b: 8 };
+    observer.observe(state);
+    expect(state.__owl__.rev).toBe(1);
+    expect(observer.rev).toBe(1);
+    expect(observer.notifyCB).toBeCalledTimes(0);
+
+    Observer.delete(state, "b");
+    await nextMicroTick();
+    expect(state.__owl__.rev).toBe(2);
+    expect(observer.rev).toBe(2);
+    expect(observer.notifyCB).toBeCalledTimes(1);
+    expect(state).toEqual({ a: 1 });
+  });
+
+  test("set element in observed array", async () => {
+    const observer = new Observer();
+    observer.notifyCB = jest.fn();
+    const state: any = ["a"];
+    observer.observe(state);
+    expect(state.__owl__.rev).toBe(1);
+    expect(observer.rev).toBe(1);
+    expect(observer.notifyCB).toBeCalledTimes(0);
+
+    Observer.set(state, 1, "b");
+    await nextMicroTick();
+    expect(state.__owl__.rev).toBe(2);
+    expect(observer.rev).toBe(2);
+    expect(observer.notifyCB).toBeCalledTimes(1);
+    expect(state).toEqual(["a", "b"]);
+  });
+
+  test("properly observe arrays in object", () => {
+    const observer = new Observer();
+    const state: any = { arr: [] };
+    observer.observe(state);
+    expect(state.arr.__owl__.rev).toBe(1);
+    expect(observer.rev).toBe(1);
+    expect(state.arr.length).toBe(0);
+
+    state.arr.push(1);
+    expect(state.arr.__owl__.rev).toBe(2);
+    expect(observer.rev).toBe(2);
+    expect(state.arr.length).toBe(1);
+  });
+
+  test("properly observe objects in array", () => {
+    const observer = new Observer();
+    const state: any = { arr: [{ something: 1 }] };
+    observer.observe(state);
+    expect(state.arr.__owl__.rev).toBe(1);
+    expect(state.arr[0].__owl__.rev).toBe(1);
+
+    state.arr[0].something = 2;
+    expect(state.arr.__owl__.rev).toBe(1);
+    expect(state.arr[0].__owl__.rev).toBe(2);
+  });
+
+  test("properly observe objects in object", () => {
+    const observer = new Observer();
+    const state: any = { a: { b: 1 } };
+    observer.observe(state);
+    expect(state.__owl__.rev).toBe(1);
+    expect(state.a.__owl__.rev).toBe(1);
+
+    state.a.b = 2;
+    expect(state.__owl__.rev).toBe(1);
+    expect(state.a.__owl__.rev).toBe(2);
+  });
+
+  test("reobserve new object values", () => {
+    const observer = new Observer();
+    const obj: any = { a: 1 };
+    observer.observe(obj);
+    expect(obj.__owl__.rev).toBe(1);
+    obj.a = { b: 2 };
+    expect(observer.rev).toBe(2);
+    expect(obj.__owl__.rev).toBe(2);
+
+    // we start at 2 because it is the new observer rev number
+    expect(obj.a.__owl__.rev).toBe(2);
+
+    obj.a.b = 3;
+    expect(observer.rev).toBe(3);
+    expect(obj.__owl__.rev).toBe(2);
+    expect(obj.a.__owl__.rev).toBe(3);
+  });
+
+  test("deep observe misc changes", () => {
+    const observer = new Observer();
+    const state: any = { o: { a: 1 }, arr: [1], n: 13 };
+    observer.observe(state);
+    expect(state.__owl__.rev).toBe(1);
+    expect(state.__owl__.deepRev).toBe(1);
+
+    state.o.a = 2;
+    expect(observer.rev).toBe(2);
+    expect(state.__owl__.rev).toBe(1);
+    expect(state.__owl__.deepRev).toBe(2);
+
+    state.arr.push(2);
+    expect(state.__owl__.rev).toBe(1);
+    expect(state.__owl__.deepRev).toBe(3);
+
+    state.n = 155;
+    expect(state.__owl__.rev).toBe(2);
+    expect(state.__owl__.deepRev).toBe(4);
+  });
+
+  test("properly handle already observed state", () => {
+    const observer = new Observer();
+    const obj1: any = { a: 1 };
+    const obj2: any = { b: 1 };
+    observer.observe(obj1);
+    observer.observe(obj2);
+    expect(obj1.__owl__.rev).toBe(1);
+    expect(obj2.__owl__.rev).toBe(1);
+
+    obj1.a = 2;
+    obj2.b = 3;
+    expect(obj1.__owl__.rev).toBe(2);
+    expect(obj2.__owl__.rev).toBe(2);
+
+    obj2.b = obj1;
+    expect(obj1.__owl__.rev).toBe(2);
+    expect(obj2.__owl__.rev).toBe(3);
+  });
+
+  test("can set a property more than once", () => {
+    const observer = new Observer();
+    const obj: any = {};
+
+    observer.observe(obj);
+    expect(obj.__owl__.rev).toBe(1);
+    expect(observer.rev).toBe(1);
+    expect(obj.__owl__.deepRev).toBe(1);
+
+    observer.set(obj, "aku", "always finds annoying problems");
+    expect(observer.rev).toBe(2);
+    expect(obj.__owl__.rev).toBe(2);
+    expect(obj.__owl__.deepRev).toBe(2);
+
+    observer.set(obj, "aku", "always finds good problems");
+    expect(observer.rev).toBe(3);
+    expect(obj.__owl__.rev).toBe(3);
+    expect(obj.__owl__.deepRev).toBe(3);
+  });
+
+  test("properly handle swapping elements", () => {
+    const observer = new Observer();
+    const obj: any = { a: { arr: [] }, b: 1 };
+    observer.observe(obj);
+
+    // swap a and b
+    const b = obj.b;
+    obj.b = obj.a;
+    obj.a = b;
+    expect(observer.rev).toBe(3);
+
+    // push something into array to make sure it works
+    obj.b.arr.push("blanche");
+    expect(observer.rev).toBe(4);
+  });
+
+  test("properly handle assigning observed obj containing array", () => {
+    const observer = new Observer();
+    const obj: any = { a: { arr: [], val: "test" } };
+    observer.observe(obj);
+
+    obj.a = { ...obj.a, val: "test2" };
+    expect(observer.rev).toBe(2);
+
+    // push something into array to make sure it works
+    obj.a.arr.push("blanche");
+    expect(observer.rev).toBe(3);
+  });
+
+  test("accept cycles in observed state", () => {
+    const observer = new Observer();
+    const obj1: any = {};
+    const obj2: any = { b: obj1, key: 1 };
+    obj1.a = obj2;
+    observer.observe(obj1);
+    expect(obj1.__owl__.rev).toBe(1);
+    expect(obj2.__owl__.rev).toBe(1);
+
+    obj2.key = 3;
+    expect(obj1.__owl__.rev).toBe(1);
+    expect(obj2.__owl__.rev).toBe(2);
+  });
+
+  test("call callback when state is changed", async () => {
+    const observer = new Observer();
+    observer.notifyCB = jest.fn();
+    const obj: any = { a: 1, b: { c: 2 }, d: [{ e: 3 }], f: 4 };
+
+    observer.observe(obj);
+    expect(observer.notifyCB).toBeCalledTimes(0);
+
+    obj.a = 2;
+    await nextMicroTick();
+    expect(observer.notifyCB).toBeCalledTimes(1);
+
+    obj.b.c = 3;
+    await nextMicroTick();
+    expect(observer.notifyCB).toBeCalledTimes(2);
+
+    obj.d[0].e = 5;
+    await nextMicroTick();
+    expect(observer.notifyCB).toBeCalledTimes(3);
+
+    obj.a = 111;
+    obj.f = 222;
+    await nextMicroTick();
+    expect(observer.notifyCB).toBeCalledTimes(4);
+  });
+
+  test("throw error when state is mutated in object if allowMutation=false", async () => {
+    const observer = new Observer();
+    observer.allowMutations = false;
+    const obj: any = { a: 1 };
+    observer.observe(obj);
+
+    expect(() => {
+      obj.a = 2;
+    }).toThrow('Observed state cannot be changed here! (key: "a", val: "2")');
+  });
+
+  test("throw error when state is mutated in array if allowMutation=false", async () => {
+    const observer = new Observer();
+    observer.allowMutations = false;
+    const obj: any = { a: [1] };
+    observer.observe(obj);
+
+    expect(() => {
+      obj.a.push(2);
+    }).toThrow("Array cannot be changed here");
+  });
+});

tests/props_validation.test.ts

@@ -0,0 +1,263 @@
+import { Component, Env } from "../src/component";
+import { makeTestFixture, makeTestEnv } from "./helpers";
+import { QWeb } from "../src";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+let env: Env;
+let dev: boolean = false;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+  env = makeTestEnv();
+  dev = QWeb.dev;
+  QWeb.dev = true;
+});
+
+afterEach(() => {
+  fixture.remove();
+  QWeb.dev = dev;
+});
+
+class Widget extends Component<any, any, any> {}
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+describe("props validation", () => {
+  test("validation is only done in dev mode", async () => {
+    class TestWidget extends Widget {
+      static props = ["message"];
+    }
+
+    QWeb.dev = true;
+    expect(() => {
+      new TestWidget(env);
+    }).toThrow();
+
+    QWeb.dev = false;
+
+    expect(() => {
+      new TestWidget(env);
+    }).not.toThrow();
+  });
+
+  test("props validation is also done on update props", async () => {
+    expect.assertions(1);
+    class TestWidget extends Widget {
+      static props = ["message"];
+    }
+    const w = new TestWidget(env, { message: "bottle" });
+    try {
+      await w._updateProps({});
+    } catch (e) {
+      expect(e.message).toBe("Missing props 'message' (widget 'TestWidget')");
+    }
+  });
+
+  test("props: list of strings", async () => {
+    class TestWidget extends Widget {
+      static props = ["message"];
+    }
+
+    expect(() => {
+      new TestWidget(env);
+    }).toThrow("Missing props 'message' (widget 'TestWidget')");
+  });
+
+  test("validate simple types", async () => {
+    const Tests = [
+      { type: Number, ok: 1, ko: "1" },
+      { type: Boolean, ok: true, ko: "1" },
+      { type: String, ok: "1", ko: 1 },
+      { type: Object, ok: {}, ko: "1" },
+      { type: Date, ok: new Date(), ko: "1" },
+      { type: Function, ok: () => {}, ko: "1" }
+    ];
+
+    for (let test of Tests) {
+      let TestWidget = class extends Widget {
+        static props = { p: test.type };
+      };
+
+      expect(() => {
+        new TestWidget(env);
+      }).toThrow("Missing props 'p'");
+
+      expect(() => {
+        new TestWidget(env, { p: test.ok });
+      }).not.toThrow();
+
+      expect(() => {
+        new TestWidget(env, { p: test.ko });
+      }).toThrow("Props 'p' of invalid type in widget");
+    }
+  });
+
+  test("validate simple types, alternate form", async () => {
+    const Tests = [
+      { type: Number, ok: 1, ko: "1" },
+      { type: Boolean, ok: true, ko: "1" },
+      { type: String, ok: "1", ko: 1 },
+      { type: Object, ok: {}, ko: "1" },
+      { type: Date, ok: new Date(), ko: "1" },
+      { type: Function, ok: () => {}, ko: "1" }
+    ];
+
+    for (let test of Tests) {
+      let TestWidget = class extends Widget {
+        static props = { p: { type: test.type } };
+      };
+
+      expect(() => {
+        new TestWidget(env);
+      }).toThrow("Missing props 'p'");
+
+      expect(() => {
+        new TestWidget(env, { p: test.ok });
+      }).not.toThrow();
+
+      expect(() => {
+        new TestWidget(env, { p: test.ko });
+      }).toThrow("Props 'p' of invalid type in widget");
+    }
+  });
+
+
+  test("can validate a prop with multiple types", async () => {
+    let TestWidget = class extends Widget {
+      static props = { p: [String, Boolean] };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: "string" });
+      new TestWidget(env, { p: true });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: 1 });
+    }).toThrow("Props 'p' of invalid type in widget");
+  });
+
+  test("can validate an optional props", async () => {
+    let TestWidget = class extends Widget {
+      static props = { p: { type: String, optional: true } };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: "hey" });
+      new TestWidget(env, { });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: 1 });
+    }).toThrow();
+
+  });
+
+
+  test("can validate an array with given primitive type", async () => {
+    let TestWidget = class extends Widget {
+      static props = { p: { type: Array, element: String } };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: [] });
+      new TestWidget(env, { p: ["string"] });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: [1] });
+    }).toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: ["string", 1] });
+    }).toThrow();
+  });
+
+  test("can validate an array with multiple sub element types", async () => {
+    let TestWidget = class extends Widget {
+      static props = { p: { type: Array, element: [String, Boolean] } };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: [] });
+      new TestWidget(env, { p: ["string"] });
+      new TestWidget(env, { p: [false, true, "string"] });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: [true, 1] });
+    }).toThrow();
+  });
+
+  test("can validate an object with simple shape", async () => {
+    let TestWidget = class extends Widget {
+      static props = {
+        p: { type: Object, shape: { id: Number, url: String } }
+      };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: { id: 1, url: "url" } });
+      new TestWidget(env, { p: { id: 1, url: "url", extra: true } });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: { id: "1", url: "url" } });
+    }).toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: { id: 1 } });
+    }).toThrow();
+  });
+
+  test("can validate recursively complicated prop def", async () => {
+    let TestWidget = class extends Widget {
+      static props = {
+        p: {
+          type: Object,
+          shape: {
+            id: Number,
+            url: [Boolean, {type: Array, element: Number}],
+          }
+        }
+      };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: { id: 1, url: true } });
+      new TestWidget(env, { p: { id: 1, url: [12]} });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: { id: 1, url: [12, true]} });
+    }).toThrow();
+
+  });
+});
+
+
+describe("default props", () => {
+  test("can set default values", async () => {
+    class TestWidget extends Widget {
+      static defaultProps = {p: 4}
+    }
+
+    const w = new TestWidget(env, {});
+    expect(w.props.p).toBe(4);
+  });
+
+  test("default values are also set whenever component is updated", async () => {
+    class TestWidget extends Widget {
+      static defaultProps = {p: 4}
+    }
+
+    const w = new TestWidget(env, {p: 1});
+    await w._updateProps({});
+    expect(w.props.p).toBe(4);
+  });
+});

tests/qweb_expressions.test.ts

@@ -0,0 +1,179 @@
+import { compileExpr, tokenize } from "../src/qweb_expressions";
+
+describe("tokenizer", () => {
+  test("simple tokens", () => {
+    expect(tokenize("1.3")).toEqual([
+      { type: "VALUE", value: "1.3" }
+    ]);
+
+    expect(tokenize("{}")).toEqual([
+      { type: "LEFT_BRACE", value: "{" },
+      { type: "RIGHT_BRACE", value: "}" }
+    ]);
+    expect(tokenize("{ }}")).toEqual([
+      { type: "LEFT_BRACE", value: "{" },
+      { type: "RIGHT_BRACE", value: "}" },
+      { type: "RIGHT_BRACE", value: "}" }
+    ]);
+    expect(tokenize("a")).toEqual([{ type: "SYMBOL", value: "a" }]);
+    expect(tokenize("true")).toEqual([{ type: "SYMBOL", value: "true" }]);
+    expect(tokenize("abcde")).toEqual([{ type: "SYMBOL", value: "abcde" }]);
+    expect(tokenize("_ab2")).toEqual([{ type: "SYMBOL", value: "_ab2" }]);
+    expect(tokenize("$ab2")).toEqual([{ type: "SYMBOL", value: "$ab2" }]);
+    expect(tokenize("ABC")).toEqual([{ type: "SYMBOL", value: "ABC" }]);
+
+    expect(tokenize("{a: 2}")).toEqual([
+      { type: "LEFT_BRACE", value: "{" },
+      { type: "SYMBOL", value: "a" },
+      { type: "COLON", value: ":" },
+      { type: "VALUE", value: "2" },
+      { type: "RIGHT_BRACE", value: "}" }
+    ]);
+    expect(tokenize("a,")).toEqual([
+      { type: "SYMBOL", value: "a" },
+      { type: "COMMA", value: "," }
+    ]);
+    expect(tokenize("][")).toEqual([
+      { type: "RIGHT_BRACKET", value: "]" },
+      { type: "LEFT_BRACKET", value: "[" }
+    ]);
+  });
+
+  test("various operators", () => {
+    expect(tokenize(">= <= < >")).toEqual([
+      { type: "OPERATOR", value: ">=" },
+      { type: "OPERATOR", value: "<=" },
+      { type: "OPERATOR", value: "<" },
+      { type: "OPERATOR", value: ">" },
+    ]);
+  });
+
+  test("strings", () => {
+    expect(() => tokenize("'")).toThrow("Invalid expression");
+    expect(() => tokenize("'\\")).toThrow("Invalid expression");
+    expect(() => tokenize("'\\'")).toThrow("Invalid expression");
+    expect(tokenize("'hello ged'")).toEqual([
+      { type: "VALUE", value: "'hello ged'" }
+    ]);
+    expect(tokenize("'hello \\'ged\\''")).toEqual([
+      { type: "VALUE", value: "'hello \\'ged\\''" }
+    ]);
+
+    expect(() => tokenize('"')).toThrow("Invalid expression");
+    expect(() => tokenize('"\\"')).toThrow("Invalid expression");
+    expect(tokenize('"hello ged"')).toEqual([
+      { type: "VALUE", value: '"hello ged"' }
+    ]);
+    expect(tokenize('"hello ged"}')).toEqual([
+      { type: "VALUE", value: '"hello ged"' },
+      { type: "RIGHT_BRACE", value: "}" }
+    ]);
+    expect(tokenize('"hello \\"ged\\""')).toEqual([
+      { type: "VALUE", value: '"hello \\"ged\\""' }
+    ]);
+  });
+});
+
+describe("expression evaluation", () => {
+  test("simple static values", () => {
+    expect(compileExpr("1", {})).toBe("1");
+    expect(compileExpr("1 ", {})).toBe("1");
+    expect(compileExpr("'some string#/, {' ", {})).toBe("'some string#/, {'");
+    expect(compileExpr("{ } ", {})).toBe("{}");
+    expect(compileExpr("{a: 1} ", {})).toBe("{a:1}");
+    expect(compileExpr("{a: 1, b: 2   } ", {})).toBe("{a:1,b:2}");
+    expect(compileExpr("[] ", {})).toBe("[]");
+    expect(compileExpr("[1] ", {})).toBe("[1]");
+    expect(compileExpr("['1', '2'] ", {})).toBe("['1','2']");
+    expect(compileExpr("['1', \"2\"] ", {})).toBe("['1',\"2\"]");
+  });
+
+  test("various types of 'words'", () => {
+    expect(compileExpr("true", {})).toBe("true");
+    expect(compileExpr("false", {})).toBe("false");
+    expect(compileExpr("debugger", {})).toBe("debugger");
+  });
+
+  test("parenthesis", () => {
+    expect(compileExpr("(1)", {})).toBe("(1)");
+    expect(compileExpr("a*(1 +3)", {})).toBe("context['a']*(1+3)");
+  });
+
+  test("objects and sub objects", () => {
+    expect(compileExpr("{a:{b:1}} ", {})).toBe("{a:{b:1}}");
+  });
+
+  test("replacing variables", () => {
+    expect(compileExpr("a", {})).toBe("context['a']");
+    expect(compileExpr("a", { a: { id: "_3", expr: "" } })).toBe("_3");
+  });
+
+  test("arrays and objects", () => {
+    expect(compileExpr("[{b:1}] ", {})).toBe("[{b:1}]");
+    expect(compileExpr("{a: []} ", {})).toBe("{a:[]}");
+    expect(compileExpr("[{b:1, c: [1, {d: {e: 3}} ]}] ", {})).toBe(
+      "[{b:1,c:[1,{d:{e:3}}]}]"
+    );
+  });
+
+  test("dot operator", () => {
+    expect(compileExpr("a.b", {})).toBe("context['a'].b");
+    expect(compileExpr("a.b.c", {})).toBe("context['a'].b.c");
+  });
+
+  test("various unary operators", () => {
+    expect(compileExpr("!flag", {})).toBe("!context['flag']");
+    expect(compileExpr("-3", {})).toBe("-3");
+    expect(compileExpr("-a", {})).toBe("-context['a']");
+  });
+
+  test("various binary operators", () => {
+    expect(compileExpr("color == 'black'", {})).toBe(
+      "context['color']=='black'"
+    );
+    expect(compileExpr("a || b", {})).toBe("context['a']||context['b']");
+    expect(compileExpr("color === 'black'", {})).toBe(
+      "context['color']==='black'"
+    );
+    expect(compileExpr("'li_'+item", {})).toBe("'li_'+context['item']");
+    expect(compileExpr("state.val > 1", {})).toBe("context['state'].val>1");
+  });
+
+  test("boolean operations", () => {
+    expect(compileExpr("a && b", {})).toBe("context['a']&&context['b']");
+  });
+
+  test("ternary operators", () => {
+    expect(compileExpr("a ? b: '2'", {})).toBe("context['a']?context['b']:'2'");
+    expect(compileExpr("a ? b: (c or '2') ", {})).toBe(
+      "context['a']?context['b']:(context['c']||'2')"
+    );
+    expect(compileExpr("a ? {test:c}: [1,u]", {})).toBe(
+      "context['a']?{test:context['c']}:[1,context['u']]"
+    );
+  });
+
+  test("word replacement", () => {
+    expect(compileExpr("a or b", {})).toBe("context['a']||context['b']");
+    expect(compileExpr("a and b", {})).toBe("context['a']&&context['b']");
+  });
+
+  test("function calls", () => {
+    expect(compileExpr("a()", {})).toBe("context['a']()");
+    expect(compileExpr("a(1)", {})).toBe("context['a'](1)");
+    expect(compileExpr("a(1,2)", {})).toBe("context['a'](1,2)");
+    expect(compileExpr("a(1,2,{a:[a]})", {})).toBe(
+      "context['a'](1,2,{a:[context['a']]})"
+    );
+    expect(compileExpr("'x'.toUpperCase()", {})).toBe("'x'.toUpperCase()");
+    expect(compileExpr("'x'.toUpperCase({a: 3})", {})).toBe(
+      "'x'.toUpperCase({a:3})"
+    );
+    expect(
+      compileExpr("'x'.toUpperCase(a)", { a: { id: "_v5", expr: "" } })
+    ).toBe("'x'.toUpperCase(_v5)");
+    expect(
+      compileExpr("'x'.toUpperCase({b: a})", { a: { id: "_v5", expr: "" } })
+    ).toBe("'x'.toUpperCase({b:_v5})");
+  });
+});

tests/utils.test.ts

@@ -0,0 +1,30 @@
+import { escape, debounce } from "../src/utils";
+
+describe("escape", () => {
+  test("normal strings", () => {
+    const text = "abc";
+    expect(escape(text)).toBe(text);
+  });
+
+  test("special symbols", () => {
+    const text = "<ok>";
+    expect(escape(text)).toBe("&lt;ok&gt;");
+  });
+});
+
+describe("debounce", () => {
+  test("works as expected", () => {
+    jest.useFakeTimers();
+    let n = 0;
+    let f = debounce(() => n++, 100);
+    expect(n).toBe(0);
+    f();
+    expect(n).toBe(0);
+    f();
+    expect(n).toBe(0);
+    jest.advanceTimersByTime(90);
+    expect(n).toBe(0);
+    jest.advanceTimersByTime(20);
+    expect(n).toBe(1);
+  });
+});

tools/benchmarks/odoo-widgets-12.0/app.js

@@ -0,0 +1,301 @@
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
+
+odoo.define("app", function(require) {
+  const Widget = require("web.Widget");
+  var core = require("web.core");
+  var dom = require("web.dom");
+
+  //----------------------------------------------------------------------------
+  // Likes Counter Widget
+  //----------------------------------------------------------------------------
+  var Counter = Widget.extend({
+    template: "counter",
+    events: {
+      "click .o_increment": "_onIncrement"
+    },
+    init: function(parent) {
+      this._super(parent);
+      this.value = 0;
+    },
+    start: function() {
+      this.updateCounter();
+    },
+    on_attach_callback: function() {},
+    on_detach_callback: function() {},
+    updateCounter: function() {
+      this.$(".o_increment").html("Value: " + this.value);
+    },
+    _onIncrement: function(ev) {
+      ev.stopPropagation();
+      this.value += 1;
+      this.updateCounter();
+    }
+  });
+
+  //----------------------------------------------------------------------------
+  // Message Widget
+  //----------------------------------------------------------------------------
+  var Message = Widget.extend({
+    template: "message",
+    events: {
+      "click .remove": "_onRemove"
+    },
+
+    init: function(parent, message) {
+      this._super(parent);
+      this.author = message.author;
+      this.msg = message.msg;
+      this.id = message.id;
+    },
+    willStart: function() {
+      this.counter = new Counter(this);
+      return this.counter.appendTo($("<div>"));
+    },
+
+    start: function() {
+      this.$msg = this.$(".msg");
+      dom.append(this.$el, this.counter.$el, {
+        in_DOM: this.isInDom,
+        callbacks: [{ widget: this.counter }]
+      });
+    },
+    on_attach_callback: function() {
+      this.isInDom = true;
+      if (this.counter) {
+        this.counter.on_attach_callback();
+      }
+    },
+    on_detach_callback: function() {
+      this.isInDom = true;
+      if (this.counter) {
+        this.counter.on_detach_callback();
+      }
+    },
+
+    _onRemove: function() {
+      this.trigger_up("remove_message", { id: this.id });
+    },
+
+    update: function() {
+      this.msg += "!!!";
+      this.$msg.text(this.msg);
+    }
+  });
+
+  //----------------------------------------------------------------------------
+  // Root Widget
+  //----------------------------------------------------------------------------
+  var App = Widget.extend({
+    template: "root",
+    events: {
+      "click .o_btn_msg.100": function() {
+        this.addMessages(100);
+      },
+      "click .o_btn_msg.1000": function() {
+        this.addMessages(1000);
+      },
+      "click .o_btn_msg.10000": function() {
+        this.addMessages(10000);
+      },
+      "click .o_btn_msg.30000": function() {
+        this.addMessages(30000);
+      },
+      "click .updateSomeMessages": function() {
+        this.updateSomeMessages();
+      },
+      "click .clear": function() {
+        this.clear();
+      },
+      "click .o_multiple": function() {
+        this.multipleFlag = !this.multipleFlag;
+      },
+      "click .o_clear": function() {
+        this.clearFlag = !this.clearFlag;
+      },
+      "click .clear-log": function() {
+        this.$log[0].innerHTML = "";
+      }
+    },
+    custom_events: {
+      remove_message: "_onRemoveMessage"
+    },
+
+    init: function(parent) {
+      this._super(parent);
+      this.widgets = {};
+      this.isInDom = false;
+      this.messageCount = 0;
+      this.multipleFlag = false;
+      this.clearFlag = false;
+    },
+
+    start: function() {
+      this.$content = this.$(".content");
+      this.$msgCount = this.$(".message_count");
+      this.$log = this.$(".log-content");
+      this.log("Benchmarking odoo widgets, 12.0");
+    },
+    on_attach_callback: function() {
+      this.isInDom = true;
+      for (let widget of Object.values(this.widgets)) {
+        if (widget.on_attach_callback) {
+          widget.on_attach_callback();
+        }
+      }
+    },
+    on_detach_callback: function() {
+      this.isInDom = true;
+      for (let widget of Object.values(this.widgets)) {
+        if (widget.on_detach_callback) {
+          widget.on_detach_callback();
+        }
+      }
+    },
+
+    updateMessageCount() {
+      this.$msgCount.text("Number of msg: " + this.messageCount);
+    },
+
+    addMessages: function(n) {
+      const self = this;
+      this.benchmark("add " + n, () => {
+        const defs = [];
+        const messages = buildData(n);
+        for (let message of messages) {
+          const widget = new Message(this, message);
+          this.widgets[message.id] = widget;
+          defs.push(widget.appendTo("<div>"));
+        }
+        return $.when
+          .apply($, defs)
+          .then(function() {
+            for (let message of messages) {
+              let widget = self.widgets[message.id];
+              dom.append(self.$content, widget.$el, {
+                in_DOM: this.isInDom,
+                callbacks: [{ widget: widget }]
+              });
+            }
+          })
+          .then(function() {
+            self.messageCount += n;
+            self.updateMessageCount();
+          });
+      });
+    },
+    clear: function() {
+      startMeasure("clear");
+      this._clear();
+      stopMeasure(info => {
+        this.log(info.msg);
+      });
+    },
+
+    _clear: function() {
+      this.$content.empty();
+      for (let key in this.widgets) {
+        this.widgets[key].destroy();
+        delete this.widgets[key];
+      }
+      this.messageCount = 0;
+      this.updateMessageCount();
+    },
+    updateSomeMessages: function() {
+      this.benchmark("update every 10th", () => {
+        const widgets = Object.values(this.widgets);
+        for (let i = 0; i < widgets.length; i += 10) {
+          widgets[i].update();
+        }
+      });
+    },
+    _onRemoveMessage: function(ev) {
+      startMeasure("remove message");
+      ev.target.destroy();
+      delete this.widgets[ev.data.id];
+      this.messageCount--;
+      this.updateMessageCount();
+      stopMeasure();
+    },
+
+    benchmark: function(message, fn, callback) {
+      if (this.multipleFlag) {
+        const N = 20;
+        let n = N;
+        let total = 0;
+        let cb = info => {
+          let finalize = () => {
+            n--;
+            total += info.delta;
+            if (n === 0) {
+              const avg = total / N;
+              this.log(`Average: ${formatNumber(avg)}ms`, true);
+              if (callback) {
+                callback();
+              }
+            } else {
+              this._benchmark(message, fn, cb);
+            }
+          };
+
+          if (this.clearFlag) {
+            this._benchmark("clear", this._clear.bind(this), finalize, false);
+          } else {
+            finalize();
+          }
+        };
+        this._benchmark(message, fn, cb);
+      } else {
+        this._benchmark(message, fn, callback);
+      }
+    },
+
+    _benchmark: function(message, fn, cb, log = true) {
+      setTimeout(() => {
+        startMeasure(message);
+        const benchmark = fn();
+        (benchmark && benchmark.then ? benchmark : $.when()).then(() => {
+          stopMeasure(info => {
+            if (log) {
+              this.log(info.msg);
+            }
+            if (cb) {
+              cb(info);
+            }
+          });
+        }, 10);
+      });
+    },
+
+    log: function(str, isBold) {
+      const div = document.createElement("div");
+      if (isBold) {
+        div.classList.add("bold");
+      }
+      div.textContent = `> ${str}`;
+      this.$log[0].appendChild(div);
+      this.$log[0].scrollTop = this.$log[0].scrollHeight;
+    }
+  });
+
+  //------------------------------------------------------------------------------
+  // Application initialization
+  //------------------------------------------------------------------------------
+  async function start() {
+    // prepare QWeb
+    const templates = await fetch("templates.xml");
+    let strTemplates = await templates.text();
+    strTemplates = strTemplates.replace(/<!--[\s\S]*?-->/g, "");
+    core.qweb.add_template(strTemplates);
+
+    // prepare app
+    const app = new App();
+    await app.appendTo(document.body);
+  }
+
+  start();
+});

tools/benchmarks/odoo-widgets-12.0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Odoo Widget Benchmark (12.0)</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='web.assets_common.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

tools/benchmarks/odoo-widgets-12.0/templates.xml

@@ -0,0 +1,47 @@
+<templates>
+    <div class="main" t-name="root">
+        <div class="left-thing">
+            <div class="title">Actions</div>
+            <div class="panel">
+                <button class="o_btn_msg 100">Add 100 messages</button>
+                <button class="o_btn_msg 1000">Add 1k messages</button>
+                <button class="o_btn_msg 10000">Add 10k messages</button>
+                <button class="o_btn_msg 30000">Add 30k messages</button>
+                <button class="updateSomeMessages">Update every 10th message</button>
+                <button class="clear">Clear</button>
+            </div>
+            <div class="flags">
+                <div>
+                    <input type="checkbox" class="o_multiple" id="multipleflag" />
+                    <label for="multipleflag">Do it 20x</label>
+                </div>
+                <div>
+                    <input type="checkbox" class="o_clear" id="clearFlag" />
+                    <label for="clearFlag">Clear after</label>
+                </div>
+            </div>
+            <div class="info message_count">
+                Number of messages: 0
+            </div>
+            <div class="title">Log <span class="clear-log">(clear)</span></div>
+            <div class="log">
+                <div class="log-content"/>
+            </div>
+        </div>
+        <div class="right-thing">
+            <div class="content">
+            </div>
+        </div>
+    </div>
+
+    <div t-name="message" class="message">
+        <span class="author"><t t-esc="widget.author"/></span>
+        <span class="msg"><t t-esc="widget.msg"/></span>
+        <button class="remove">Remove</button>
+    </div>
+
+  <div t-name="counter">
+    <button class="o_increment"></button>
+  </div>
+
+</templates>

tools/benchmarks/odoo-widgets-12.3/app.js

@@ -0,0 +1,301 @@
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
+
+odoo.define("app", function(require) {
+  const Widget = require("web.Widget");
+  var core = require("web.core");
+  var dom = require("web.dom");
+
+  //----------------------------------------------------------------------------
+  // Likes Counter Widget
+  //----------------------------------------------------------------------------
+  var Counter = Widget.extend({
+    template: "counter",
+    events: {
+      "click .o_increment": "_onIncrement"
+    },
+    init: function(parent) {
+      this._super(parent);
+      this.value = 0;
+    },
+    start: function() {
+      this.updateCounter();
+    },
+    on_attach_callback: function() {},
+    on_detach_callback: function() {},
+    updateCounter: function() {
+      this.$(".o_increment").html("Value: " + this.value);
+    },
+    _onIncrement: function(ev) {
+      ev.stopPropagation();
+      this.value += 1;
+      this.updateCounter();
+    }
+  });
+
+  //----------------------------------------------------------------------------
+  // Message Widget
+  //----------------------------------------------------------------------------
+  var Message = Widget.extend({
+    template: "message",
+    events: {
+      "click .remove": "_onRemove"
+    },
+
+    init: function(parent, message) {
+      this._super(parent);
+      this.author = message.author;
+      this.msg = message.msg;
+      this.id = message.id;
+    },
+    willStart: function() {
+      this.counter = new Counter(this);
+      return this.counter.appendTo($("<div>"));
+    },
+
+    start: function() {
+      this.$msg = this.$(".msg");
+      dom.append(this.$el, this.counter.$el, {
+        in_DOM: this.isInDom,
+        callbacks: [{ widget: this.counter }]
+      });
+    },
+    on_attach_callback: function() {
+      this.isInDom = true;
+      if (this.counter) {
+        this.counter.on_attach_callback();
+      }
+    },
+    on_detach_callback: function() {
+      this.isInDom = true;
+      if (this.counter) {
+        this.counter.on_detach_callback();
+      }
+    },
+
+    _onRemove: function() {
+      this.trigger_up("remove_message", { id: this.id });
+    },
+
+    update: function() {
+      this.msg += "!!!";
+      this.$msg.text(this.msg);
+    }
+  });
+
+  //----------------------------------------------------------------------------
+  // Root Widget
+  //----------------------------------------------------------------------------
+  var App = Widget.extend({
+    template: "root",
+    events: {
+      "click .o_btn_msg.100": function() {
+        this.addMessages(100);
+      },
+      "click .o_btn_msg.1000": function() {
+        this.addMessages(1000);
+      },
+      "click .o_btn_msg.10000": function() {
+        this.addMessages(10000);
+      },
+      "click .o_btn_msg.30000": function() {
+        this.addMessages(30000);
+      },
+      "click .updateSomeMessages": function() {
+        this.updateSomeMessages();
+      },
+      "click .clear": function() {
+        this.clear();
+      },
+      "click .o_multiple": function() {
+        this.multipleFlag = !this.multipleFlag;
+      },
+      "click .o_clear": function() {
+        this.clearFlag = !this.clearFlag;
+      },
+      "click .clear-log": function() {
+        this.$log[0].innerHTML = "";
+      }
+    },
+    custom_events: {
+      remove_message: "_onRemoveMessage"
+    },
+
+    init: function(parent) {
+      this._super(parent);
+      this.widgets = {};
+      this.isInDom = false;
+      this.messageCount = 0;
+      this.multipleFlag = false;
+      this.clearFlag = false;
+    },
+
+    start: function() {
+      this.$content = this.$(".content");
+      this.$msgCount = this.$(".message_count");
+      this.$log = this.$(".log-content");
+      this.log("Benchmarking odoo widgets, 12.3");
+    },
+    on_attach_callback: function() {
+      this.isInDom = true;
+      for (let widget of Object.values(this.widgets)) {
+        if (widget.on_attach_callback) {
+          widget.on_attach_callback();
+        }
+      }
+    },
+    on_detach_callback: function() {
+      this.isInDom = true;
+      for (let widget of Object.values(this.widgets)) {
+        if (widget.on_detach_callback) {
+          widget.on_detach_callback();
+        }
+      }
+    },
+
+    updateMessageCount() {
+      this.$msgCount.text("Number of msg: " + this.messageCount);
+    },
+
+    addMessages: function(n) {
+      const self = this;
+      this.benchmark("add " + n, () => {
+        const defs = [];
+        const messages = buildData(n);
+        for (let message of messages) {
+          const widget = new Message(this, message);
+          this.widgets[message.id] = widget;
+          defs.push(widget.appendTo("<div>"));
+        }
+        return $.when
+          .apply($, defs)
+          .then(function() {
+            for (let message of messages) {
+              let widget = self.widgets[message.id];
+              dom.append(self.$content, widget.$el, {
+                in_DOM: this.isInDom,
+                callbacks: [{ widget: widget }]
+              });
+            }
+          })
+          .then(function() {
+            self.messageCount += n;
+            self.updateMessageCount();
+          });
+      });
+    },
+    clear: function() {
+      startMeasure("clear");
+      this._clear();
+      stopMeasure(info => {
+        this.log(info.msg);
+      });
+    },
+
+    _clear: function() {
+      this.$content.empty();
+      for (let key in this.widgets) {
+        this.widgets[key].destroy();
+        delete this.widgets[key];
+      }
+      this.messageCount = 0;
+      this.updateMessageCount();
+    },
+    updateSomeMessages: function() {
+      this.benchmark("update every 10th", () => {
+        const widgets = Object.values(this.widgets);
+        for (let i = 0; i < widgets.length; i += 10) {
+          widgets[i].update();
+        }
+      });
+    },
+    _onRemoveMessage: function(ev) {
+      startMeasure("remove message");
+      ev.target.destroy();
+      delete this.widgets[ev.data.id];
+      this.messageCount--;
+      this.updateMessageCount();
+      stopMeasure();
+    },
+
+    benchmark: function(message, fn, callback) {
+      if (this.multipleFlag) {
+        const N = 20;
+        let n = N;
+        let total = 0;
+        let cb = info => {
+          let finalize = () => {
+            n--;
+            total += info.delta;
+            if (n === 0) {
+              const avg = total / N;
+              this.log(`Average: ${formatNumber(avg)}ms`, true);
+              if (callback) {
+                callback();
+              }
+            } else {
+              this._benchmark(message, fn, cb);
+            }
+          };
+
+          if (this.clearFlag) {
+            this._benchmark("clear", this._clear.bind(this), finalize, false);
+          } else {
+            finalize();
+          }
+        };
+        this._benchmark(message, fn, cb);
+      } else {
+        this._benchmark(message, fn, callback);
+      }
+    },
+
+    _benchmark: function(message, fn, cb, log = true) {
+      setTimeout(() => {
+        startMeasure(message);
+        const benchmark = fn();
+        (benchmark && benchmark.then ? benchmark : $.when()).then(() => {
+          stopMeasure(info => {
+            if (log) {
+              this.log(info.msg);
+            }
+            if (cb) {
+              cb(info);
+            }
+          });
+        }, 10);
+      });
+    },
+
+    log: function(str, isBold) {
+      const div = document.createElement("div");
+      if (isBold) {
+        div.classList.add("bold");
+      }
+      div.textContent = `> ${str}`;
+      this.$log[0].appendChild(div);
+      this.$log[0].scrollTop = this.$log[0].scrollHeight;
+    }
+  });
+
+  //------------------------------------------------------------------------------
+  // Application initialization
+  //------------------------------------------------------------------------------
+  async function start() {
+    // prepare QWeb
+    const templates = await fetch("templates.xml");
+    let strTemplates = await templates.text();
+    strTemplates = strTemplates.replace(/<!--[\s\S]*?-->/g, "");
+    core.qweb.add_template(strTemplates);
+
+    // prepare app
+    const app = new App();
+    await app.appendTo(document.body);
+  }
+
+  start();
+});

tools/benchmarks/odoo-widgets-12.3/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Odoo Widget Benchmark (12.3)</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='web.assets_common.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

tools/benchmarks/odoo-widgets-12.3/templates.xml

@@ -0,0 +1,47 @@
+<templates>
+    <div class="main" t-name="root">
+        <div class="left-thing">
+            <div class="title">Actions</div>
+            <div class="panel">
+                <button class="o_btn_msg 100">Add 100 messages</button>
+                <button class="o_btn_msg 1000">Add 1k messages</button>
+                <button class="o_btn_msg 10000">Add 10k messages</button>
+                <button class="o_btn_msg 30000">Add 30k messages</button>
+                <button class="updateSomeMessages">Update every 10th message</button>
+                <button class="clear">Clear</button>
+            </div>
+            <div class="flags">
+                <div>
+                    <input type="checkbox" class="o_multiple" id="multipleflag" />
+                    <label for="multipleflag">Do it 20x</label>
+                </div>
+                <div>
+                    <input type="checkbox" class="o_clear" id="clearFlag" />
+                    <label for="clearFlag">Clear after</label>
+                </div>
+            </div>
+            <div class="info message_count">
+                Number of messages: 0
+            </div>
+            <div class="title">Log <span class="clear-log">(clear)</span></div>
+            <div class="log">
+                <div class="log-content"/>
+            </div>
+        </div>
+        <div class="right-thing">
+            <div class="content">
+            </div>
+        </div>
+    </div>
+
+    <div t-name="message" class="message">
+        <span class="author"><t t-esc="widget.author"/></span>
+        <span class="msg"><t t-esc="widget.msg"/></span>
+        <button class="remove">Remove</button>
+    </div>
+
+  <div t-name="counter">
+    <button class="o_increment"></button>
+  </div>
+
+</templates>

tools/benchmarks/owl-0.10.0/app.js

@@ -0,0 +1,173 @@
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  state = { counter: 0 };
+  template = "Counter";
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  widgets = { Counter };
+  template = "Message";
+
+  shouldUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  widgets = { Message };
+  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
+  template = "App";
+
+  mounted() {
+    this.log(
+      `Benchmarking Owl v${owl._version} (build date: ${
+        owl._date
+      })`
+    );
+  }
+
+  benchmark(message, fn, callback) {
+    if (this.state.multipleFlag) {
+      const N = 20;
+      let n = N;
+      let total = 0;
+      let cb = info => {
+        let finalize = () => {
+          n--;
+          total += info.delta;
+          if (n === 0) {
+            const avg = total / N;
+            this.log(`Average: ${formatNumber(avg)}ms`, true);
+            if (callback) {
+              callback();
+            }
+          } else {
+            this._benchmark(message, fn, cb);
+          }
+        };
+
+        if (this.state.clearAfterFlag) {
+          this._benchmark(
+            "clear",
+            () => {
+              this.state.messages = [];
+            },
+            finalize,
+            false
+          );
+        } else {
+          finalize();
+        }
+      };
+      this._benchmark(message, fn, cb);
+    } else {
+      this._benchmark(message, fn, callback);
+    }
+  }
+
+  _benchmark(message, fn, cb, log = true) {
+    setTimeout(() => {
+      startMeasure(message);
+      fn();
+      stopMeasure(info => {
+        if (log) {
+          this.log(info.msg);
+        }
+        if (cb) {
+          cb(info);
+        }
+      });
+    }, 10);
+  }
+
+  addMessages(n) {
+    this.benchmark("add " + n, () => {
+      const newMessages = buildData(n);
+      this.state.messages.push.apply(this.state.messages, newMessages);
+    });
+  }
+
+  clear() {
+    this._benchmark("clear", () => {
+      this.state.messages = [];
+    });
+  }
+
+  updateSomeMessages() {
+    this.benchmark("update every 10th", () => {
+      const messages = this.state.messages;
+      for (let i = 0; i < this.state.messages.length; i += 10) {
+        const msg = Object.assign({}, messages[i]);
+        msg.author += "!!!";
+        this.set(messages, i, msg);
+      }
+    });
+  }
+
+  removeMessage(data) {
+    this.benchmark("remove message", () => {
+      const index = this.state.messages.findIndex(m => m.id === data.id);
+      this.state.messages.splice(index, 1);
+    });
+  }
+
+  log(str, isBold) {
+    const div = document.createElement("div");
+    if (isBold) {
+      div.classList.add("bold");
+    }
+    div.textContent = `> ${str}`;
+    this.refs.log.appendChild(div);
+    this.refs.log.scrollTop = this.refs.log.scrollHeight;
+  }
+
+  clearLog() {
+    this.refs.log.innerHTML = "";
+  }
+
+  toggleMultiple() {
+    this.state.multipleFlag = !this.state.multipleFlag;
+  }
+
+  toggleClear() {
+    this.state.clearAfterFlag = !this.state.clearAfterFlag;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

tools/benchmarks/owl-0.10.0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL 0.10.0 Benchmark</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='owl.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

tools/benchmarks/owl-0.10.0/templates.xml

@@ -0,0 +1,50 @@
+<templates>
+  <div t-name="App" class="main">
+      <div class="left-thing">
+        <div class="title">Actions</div>
+        <div class="panel">
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1k messages</button>
+          <button t-on-click="addMessages(10000)">Add 10k messages</button>
+          <button t-on-click="addMessages(30000)">Add 30k messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
+          <button t-on-click="clear">Clear</button>
+        </div>
+        <div class="flags">
+            <div>
+                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
+                <label for="multipleflag">Do it 20x</label>
+            </div>
+            <div>
+                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
+                <label for="clearFlag">Clear after</label>
+            </div>
+        </div>
+        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
+        <hr/>
+        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
+        <div class="log">
+            <div class="log-content" t-ref="'log'"/>
+        </div>
+      </div>
+      <div class="right-thing">
+          <div class="content" t-on-remove-message="removeMessage">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="Message" class="message">
+    <span class="author"><t t-esc="props.author"/></span>
+    <span class="msg"><t t-esc="props.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="Counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

tools/benchmarks/owl-0.11.0/app.js

@@ -0,0 +1,170 @@
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  state = { counter: 0 };
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  widgets = { Counter };
+
+  shouldUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  widgets = { Message };
+  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
+
+  mounted() {
+    this.log(
+      `Benchmarking Owl v${owl._version} (build date: ${
+        owl._date
+      })`
+    );
+  }
+
+  benchmark(message, fn, callback) {
+    if (this.state.multipleFlag) {
+      const N = 20;
+      let n = N;
+      let total = 0;
+      let cb = info => {
+        let finalize = () => {
+          n--;
+          total += info.delta;
+          if (n === 0) {
+            const avg = total / N;
+            this.log(`Average: ${formatNumber(avg)}ms`, true);
+            if (callback) {
+              callback();
+            }
+          } else {
+            this._benchmark(message, fn, cb);
+          }
+        };
+
+        if (this.state.clearAfterFlag) {
+          this._benchmark(
+            "clear",
+            () => {
+              this.state.messages = [];
+            },
+            finalize,
+            false
+          );
+        } else {
+          finalize();
+        }
+      };
+      this._benchmark(message, fn, cb);
+    } else {
+      this._benchmark(message, fn, callback);
+    }
+  }
+
+  _benchmark(message, fn, cb, log = true) {
+    setTimeout(() => {
+      startMeasure(message);
+      fn();
+      stopMeasure(info => {
+        if (log) {
+          this.log(info.msg);
+        }
+        if (cb) {
+          cb(info);
+        }
+      });
+    }, 10);
+  }
+
+  addMessages(n) {
+    this.benchmark("add " + n, () => {
+      const newMessages = buildData(n);
+      this.state.messages.push.apply(this.state.messages, newMessages);
+    });
+  }
+
+  clear() {
+    this._benchmark("clear", () => {
+      this.state.messages = [];
+    });
+  }
+
+  updateSomeMessages() {
+    this.benchmark("update every 10th", () => {
+      const messages = this.state.messages;
+      for (let i = 0; i < this.state.messages.length; i += 10) {
+        const msg = Object.assign({}, messages[i]);
+        msg.author += "!!!";
+        this.set(messages, i, msg);
+      }
+    });
+  }
+
+  removeMessage(data) {
+    this.benchmark("remove message", () => {
+      const index = this.state.messages.findIndex(m => m.id === data.id);
+      this.state.messages.splice(index, 1);
+    });
+  }
+
+  log(str, isBold) {
+    const div = document.createElement("div");
+    if (isBold) {
+      div.classList.add("bold");
+    }
+    div.textContent = `> ${str}`;
+    this.refs.log.appendChild(div);
+    this.refs.log.scrollTop = this.refs.log.scrollHeight;
+  }
+
+  clearLog() {
+    this.refs.log.innerHTML = "";
+  }
+
+  toggleMultiple() {
+    this.state.multipleFlag = !this.state.multipleFlag;
+  }
+
+  toggleClear() {
+    this.state.clearAfterFlag = !this.state.clearAfterFlag;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

tools/benchmarks/owl-0.11.0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL 0.11.0 Benchmark</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='owl.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

tools/benchmarks/owl-0.11.0/templates.xml

@@ -0,0 +1,50 @@
+<templates>
+  <div t-name="App" class="main">
+      <div class="left-thing">
+        <div class="title">Actions</div>
+        <div class="panel">
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1k messages</button>
+          <button t-on-click="addMessages(10000)">Add 10k messages</button>
+          <button t-on-click="addMessages(30000)">Add 30k messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
+          <button t-on-click="clear">Clear</button>
+        </div>
+        <div class="flags">
+            <div>
+                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
+                <label for="multipleflag">Do it 20x</label>
+            </div>
+            <div>
+                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
+                <label for="clearFlag">Clear after</label>
+            </div>
+        </div>
+        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
+        <hr/>
+        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
+        <div class="log">
+            <div class="log-content" t-ref="'log'"/>
+        </div>
+      </div>
+      <div class="right-thing">
+          <div class="content" t-on-remove-message="removeMessage">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="Message" class="message">
+    <span class="author"><t t-esc="props.author"/></span>
+    <span class="msg"><t t-esc="props.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="Counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

tools/benchmarks/owl-0.12.0/app.js

@@ -0,0 +1,170 @@
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  state = { counter: 0 };
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  widgets = { Counter };
+
+  shouldUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  widgets = { Message };
+  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
+
+  mounted() {
+    this.log(
+      `Benchmarking Owl v${owl.__info__.version} (build date: ${
+        owl.__info__.date
+      })`
+    );
+  }
+
+  benchmark(message, fn, callback) {
+    if (this.state.multipleFlag) {
+      const N = 20;
+      let n = N;
+      let total = 0;
+      let cb = info => {
+        let finalize = () => {
+          n--;
+          total += info.delta;
+          if (n === 0) {
+            const avg = total / N;
+            this.log(`Average: ${formatNumber(avg)}ms`, true);
+            if (callback) {
+              callback();
+            }
+          } else {
+            this._benchmark(message, fn, cb);
+          }
+        };
+
+        if (this.state.clearAfterFlag) {
+          this._benchmark(
+            "clear",
+            () => {
+              this.state.messages = [];
+            },
+            finalize,
+            false
+          );
+        } else {
+          finalize();
+        }
+      };
+      this._benchmark(message, fn, cb);
+    } else {
+      this._benchmark(message, fn, callback);
+    }
+  }
+
+  _benchmark(message, fn, cb, log = true) {
+    setTimeout(() => {
+      startMeasure(message);
+      fn();
+      stopMeasure(info => {
+        if (log) {
+          this.log(info.msg);
+        }
+        if (cb) {
+          cb(info);
+        }
+      });
+    }, 10);
+  }
+
+  addMessages(n) {
+    this.benchmark("add " + n, () => {
+      const newMessages = buildData(n);
+      this.state.messages.push.apply(this.state.messages, newMessages);
+    });
+  }
+
+  clear() {
+    this.benchmark("clear", () => {
+      this.state.messages = [];
+    });
+  }
+
+  updateSomeMessages() {
+    this.benchmark("update every 10th", () => {
+      const messages = this.state.messages;
+      for (let i = 0; i < this.state.messages.length; i += 10) {
+        const msg = Object.assign({}, messages[i]);
+        msg.author += "!!!";
+        this.set(messages, i, msg);
+      }
+    });
+  }
+
+  removeMessage(data) {
+    this.benchmark("remove message", () => {
+      const index = this.state.messages.findIndex(m => m.id === data.id);
+      this.state.messages.splice(index, 1);
+    });
+  }
+
+  log(str, isBold) {
+    const div = document.createElement("div");
+    if (isBold) {
+      div.classList.add("bold");
+    }
+    div.textContent = `> ${str}`;
+    this.refs.log.appendChild(div);
+    this.refs.log.scrollTop = this.refs.log.scrollHeight;
+  }
+
+  clearLog() {
+    this.refs.log.innerHTML = "";
+  }
+
+  toggleMultiple() {
+    this.state.multipleFlag = !this.state.multipleFlag;
+  }
+
+  toggleClear() {
+    this.state.clearAfterFlag = !this.state.clearAfterFlag;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

tools/benchmarks/owl-0.12.0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL 0.12.0 Benchmark</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='owl.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

tools/benchmarks/owl-0.12.0/templates.xml

@@ -0,0 +1,50 @@
+<templates>
+  <div t-name="App" class="main">
+      <div class="left-thing">
+        <div class="title">Actions</div>
+        <div class="panel">
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1k messages</button>
+          <button t-on-click="addMessages(10000)">Add 10k messages</button>
+          <button t-on-click="addMessages(30000)">Add 30k messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
+          <button t-on-click="clear">Clear</button>
+        </div>
+        <div class="flags">
+            <div>
+                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
+                <label for="multipleflag">Do it 20x</label>
+            </div>
+            <div>
+                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
+                <label for="clearFlag">Clear after</label>
+            </div>
+        </div>
+        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
+        <hr/>
+        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
+        <div class="log">
+            <div class="log-content" t-ref="log"/>
+        </div>
+      </div>
+      <div class="right-thing">
+          <div class="content" t-on-remove-message="removeMessage">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="Message" class="message">
+    <span class="author"><t t-esc="props.author"/></span>
+    <span class="msg"><t t-esc="props.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="Counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

tools/benchmarks/owl-0.13.0/app.js

@@ -0,0 +1,170 @@
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  state = { counter: 0 };
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  widgets = { Counter };
+
+  shouldUpdate(nextProps) {
+    return nextProps.message !== this.props.message;
+  }
+  removeMessage() {
+    this.trigger("remove-message", {
+      id: this.props.message.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  widgets = { Message };
+  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
+
+  mounted() {
+    this.log(
+      `Benchmarking Owl v${owl.__info__.version} (build date: ${
+        owl.__info__.date
+      })`
+    );
+  }
+
+  benchmark(message, fn, callback) {
+    if (this.state.multipleFlag) {
+      const N = 20;
+      let n = N;
+      let total = 0;
+      let cb = info => {
+        let finalize = () => {
+          n--;
+          total += info.delta;
+          if (n === 0) {
+            const avg = total / N;
+            this.log(`Average: ${formatNumber(avg)}ms`, true);
+            if (callback) {
+              callback();
+            }
+          } else {
+            this._benchmark(message, fn, cb);
+          }
+        };
+
+        if (this.state.clearAfterFlag) {
+          this._benchmark(
+            "clear",
+            () => {
+              this.state.messages = [];
+            },
+            finalize,
+            false
+          );
+        } else {
+          finalize();
+        }
+      };
+      this._benchmark(message, fn, cb);
+    } else {
+      this._benchmark(message, fn, callback);
+    }
+  }
+
+  _benchmark(message, fn, cb, log = true) {
+    setTimeout(() => {
+      startMeasure(message);
+      fn();
+      stopMeasure(info => {
+        if (log) {
+          this.log(info.msg);
+        }
+        if (cb) {
+          cb(info);
+        }
+      });
+    }, 10);
+  }
+
+  addMessages(n) {
+    this.benchmark("add " + n, () => {
+      const newMessages = buildData(n);
+      this.state.messages.push.apply(this.state.messages, newMessages);
+    });
+  }
+
+  clear() {
+    this._benchmark("clear", () => {
+      this.state.messages = [];
+    });
+  }
+
+  updateSomeMessages() {
+    this.benchmark("update every 10th", () => {
+      const messages = this.state.messages;
+      for (let i = 0; i < this.state.messages.length; i += 10) {
+        const msg = Object.assign({}, messages[i]);
+        msg.author += "!!!";
+        this.set(messages, i, msg);
+      }
+    });
+  }
+
+  removeMessage(event) {
+    this.benchmark("remove message", () => {
+      const index = this.state.messages.findIndex(m => m.id === event.detail.id);
+      this.state.messages.splice(index, 1);
+    });
+  }
+
+  log(str, isBold) {
+    const div = document.createElement("div");
+    if (isBold) {
+      div.classList.add("bold");
+    }
+    div.textContent = `> ${str}`;
+    this.refs.log.appendChild(div);
+    this.refs.log.scrollTop = this.refs.log.scrollHeight;
+  }
+
+  clearLog() {
+    this.refs.log.innerHTML = "";
+  }
+
+  toggleMultiple() {
+    this.state.multipleFlag = !this.state.multipleFlag;
+  }
+
+  toggleClear() {
+    this.state.clearAfterFlag = !this.state.clearAfterFlag;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

tools/benchmarks/owl-0.13.0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL 0.13.0 Benchmark</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='owl.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

tools/benchmarks/owl-0.13.0/templates.xml

@@ -0,0 +1,50 @@
+<templates>
+  <div t-name="App" class="main">
+      <div class="left-thing">
+        <div class="title">Actions</div>
+        <div class="panel">
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1k messages</button>
+          <button t-on-click="addMessages(10000)">Add 10k messages</button>
+          <button t-on-click="addMessages(30000)">Add 30k messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
+          <button t-on-click="clear">Clear</button>
+        </div>
+        <div class="flags">
+            <div>
+                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
+                <label for="multipleflag">Do it 20x</label>
+            </div>
+            <div>
+                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
+                <label for="clearFlag">Clear after</label>
+            </div>
+        </div>
+        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
+        <hr/>
+        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
+        <div class="log">
+            <div class="log-content" t-ref="log"/>
+        </div>
+      </div>
+      <div class="right-thing">
+          <div class="content" t-on-remove-message="removeMessage">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" message="message"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="Message" class="message">
+    <span class="author"><t t-esc="props.message.author"/></span>
+    <span class="msg"><t t-esc="props.message.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="Counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

tools/benchmarks/owl-0.14.0/app.js

@@ -0,0 +1,170 @@
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  state = { counter: 0 };
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  widgets = { Counter };
+
+  shouldUpdate(nextProps) {
+    return nextProps.message !== this.props.message;
+  }
+  removeMessage() {
+    this.trigger("remove-message", {
+      id: this.props.message.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  widgets = { Message };
+  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
+
+  mounted() {
+    this.log(
+      `Benchmarking Owl v${owl.__info__.version} (build date: ${
+        owl.__info__.date
+      })`
+    );
+  }
+
+  benchmark(message, fn, callback) {
+    if (this.state.multipleFlag) {
+      const N = 20;
+      let n = N;
+      let total = 0;
+      let cb = info => {
+        let finalize = () => {
+          n--;
+          total += info.delta;
+          if (n === 0) {
+            const avg = total / N;
+            this.log(`Average: ${formatNumber(avg)}ms`, true);
+            if (callback) {
+              callback();
+            }
+          } else {
+            this._benchmark(message, fn, cb);
+          }
+        };
+
+        if (this.state.clearAfterFlag) {
+          this._benchmark(
+            "clear",
+            () => {
+              this.state.messages = [];
+            },
+            finalize,
+            false
+          );
+        } else {
+          finalize();
+        }
+      };
+      this._benchmark(message, fn, cb);
+    } else {
+      this._benchmark(message, fn, callback);
+    }
+  }
+
+  _benchmark(message, fn, cb, log = true) {
+    setTimeout(() => {
+      startMeasure(message);
+      fn();
+      stopMeasure(info => {
+        if (log) {
+          this.log(info.msg);
+        }
+        if (cb) {
+          cb(info);
+        }
+      });
+    }, 10);
+  }
+
+  addMessages(n) {
+    this.benchmark("add " + n, () => {
+      const newMessages = buildData(n);
+      this.state.messages.push.apply(this.state.messages, newMessages);
+    });
+  }
+
+  clear() {
+    this._benchmark("clear", () => {
+      this.state.messages = [];
+    });
+  }
+
+  updateSomeMessages() {
+    this.benchmark("update every 10th", () => {
+      const messages = this.state.messages;
+      for (let i = 0; i < this.state.messages.length; i += 10) {
+        const msg = Object.assign({}, messages[i]);
+        msg.author += "!!!";
+        this.set(messages, i, msg);
+      }
+    });
+  }
+
+  removeMessage(event) {
+    this.benchmark("remove message", () => {
+      const index = this.state.messages.findIndex(m => m.id === event.detail.id);
+      this.state.messages.splice(index, 1);
+    });
+  }
+
+  log(str, isBold) {
+    const div = document.createElement("div");
+    if (isBold) {
+      div.classList.add("bold");
+    }
+    div.textContent = `> ${str}`;
+    this.refs.log.appendChild(div);
+    this.refs.log.scrollTop = this.refs.log.scrollHeight;
+  }
+
+  clearLog() {
+    this.refs.log.innerHTML = "";
+  }
+
+  toggleMultiple() {
+    this.state.multipleFlag = !this.state.multipleFlag;
+  }
+
+  toggleClear() {
+    this.state.clearAfterFlag = !this.state.clearAfterFlag;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

tools/benchmarks/owl-0.14.0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL 0.14.0 Benchmark</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='owl.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

tools/benchmarks/owl-0.14.0/templates.xml

@@ -0,0 +1,50 @@
+<templates>
+  <div t-name="App" class="main">
+      <div class="left-thing">
+        <div class="title">Actions</div>
+        <div class="panel">
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1k messages</button>
+          <button t-on-click="addMessages(10000)">Add 10k messages</button>
+          <button t-on-click="addMessages(30000)">Add 30k messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
+          <button t-on-click="clear">Clear</button>
+        </div>
+        <div class="flags">
+            <div>
+                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
+                <label for="multipleflag">Do it 20x</label>
+            </div>
+            <div>
+                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
+                <label for="clearFlag">Clear after</label>
+            </div>
+        </div>
+        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
+        <hr/>
+        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
+        <div class="log">
+            <div class="log-content" t-ref="log"/>
+        </div>
+      </div>
+      <div class="right-thing">
+          <div class="content" t-on-remove-message="removeMessage">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" message="message"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="Message" class="message">
+    <span class="author"><t t-esc="props.message.author"/></span>
+    <span class="msg"><t t-esc="props.message.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="Counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

tools/benchmarks/owl-0.7.0/app.js

@@ -0,0 +1,173 @@
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  state = { counter: 0 };
+  template = "Counter";
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  widgets = { Counter };
+  template = "Message";
+
+  shouldUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  widgets = { Message };
+  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
+  template = "App";
+
+  mounted() {
+    this.log(
+      `Benchmarking Owl v${owl._version} (build date: ${
+        owl._date
+      })`
+    );
+  }
+
+  benchmark(message, fn, callback) {
+    if (this.state.multipleFlag) {
+      const N = 20;
+      let n = N;
+      let total = 0;
+      let cb = info => {
+        let finalize = () => {
+          n--;
+          total += info.delta;
+          if (n === 0) {
+            const avg = total / N;
+            this.log(`Average: ${formatNumber(avg)}ms`, true);
+            if (callback) {
+              callback();
+            }
+          } else {
+            this._benchmark(message, fn, cb);
+          }
+        };
+
+        if (this.state.clearAfterFlag) {
+          this._benchmark(
+            "clear",
+            () => {
+              this.state.messages = [];
+            },
+            finalize,
+            false
+          );
+        } else {
+          finalize();
+        }
+      };
+      this._benchmark(message, fn, cb);
+    } else {
+      this._benchmark(message, fn, callback);
+    }
+  }
+
+  _benchmark(message, fn, cb, log = true) {
+    setTimeout(() => {
+      startMeasure(message);
+      fn();
+      stopMeasure(info => {
+        if (log) {
+          this.log(info.msg);
+        }
+        if (cb) {
+          cb(info);
+        }
+      });
+    }, 10);
+  }
+
+  addMessages(n) {
+    this.benchmark("add " + n, () => {
+      const newMessages = buildData(n);
+      this.state.messages.push.apply(this.state.messages, newMessages);
+    });
+  }
+
+  clear() {
+    this._benchmark("clear", () => {
+      this.state.messages = [];
+    });
+  }
+
+  updateSomeMessages() {
+    this.benchmark("update every 10th", () => {
+      const messages = this.state.messages;
+      for (let i = 0; i < this.state.messages.length; i += 10) {
+        const msg = Object.assign({}, messages[i]);
+        msg.author += "!!!";
+        this.set(messages, i, msg);
+      }
+    });
+  }
+
+  removeMessage(data) {
+    this.benchmark("remove message", () => {
+      const index = this.state.messages.findIndex(m => m.id === data.id);
+      this.state.messages.splice(index, 1);
+    });
+  }
+
+  log(str, isBold) {
+    const div = document.createElement("div");
+    if (isBold) {
+      div.classList.add("bold");
+    }
+    div.textContent = `> ${str}`;
+    this.refs.log.appendChild(div);
+    this.refs.log.scrollTop = this.refs.log.scrollHeight;
+  }
+
+  clearLog() {
+    this.refs.log.innerHTML = "";
+  }
+
+  toggleMultiple() {
+    this.state.multipleFlag = !this.state.multipleFlag;
+  }
+
+  toggleClear() {
+    this.state.clearAfterFlag = !this.state.clearAfterFlag;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

tools/benchmarks/owl-0.7.0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL 0.7.0 Benchmark</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='owl.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

tools/benchmarks/owl-0.7.0/templates.xml

@@ -0,0 +1,50 @@
+<templates>
+  <div t-name="App" class="main">
+      <div class="left-thing">
+        <div class="title">Actions</div>
+        <div class="panel">
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1k messages</button>
+          <button t-on-click="addMessages(10000)">Add 10k messages</button>
+          <button t-on-click="addMessages(30000)">Add 30k messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
+          <button t-on-click="clear">Clear</button>
+        </div>
+        <div class="flags">
+            <div>
+                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
+                <label for="multipleflag">Do it 20x</label>
+            </div>
+            <div>
+                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
+                <label for="clearFlag">Clear after</label>
+            </div>
+        </div>
+        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
+        <hr/>
+        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
+        <div class="log">
+            <div class="log-content" t-ref="'log'"/>
+        </div>
+      </div>
+      <div class="right-thing">
+          <div class="content" t-on-remove-message="removeMessage">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="Message" class="message">
+    <span class="author"><t t-esc="props.author"/></span>
+    <span class="msg"><t t-esc="props.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="Counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

tools/benchmarks/owl-0.8.0/app.js

@@ -0,0 +1,173 @@
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  state = { counter: 0 };
+  template = "Counter";
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  widgets = { Counter };
+  template = "Message";
+
+  shouldUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  widgets = { Message };
+  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
+  template = "App";
+
+  mounted() {
+    this.log(
+      `Benchmarking Owl v${owl._version} (build date: ${
+        owl._date
+      })`
+    );
+  }
+
+  benchmark(message, fn, callback) {
+    if (this.state.multipleFlag) {
+      const N = 20;
+      let n = N;
+      let total = 0;
+      let cb = info => {
+        let finalize = () => {
+          n--;
+          total += info.delta;
+          if (n === 0) {
+            const avg = total / N;
+            this.log(`Average: ${formatNumber(avg)}ms`, true);
+            if (callback) {
+              callback();
+            }
+          } else {
+            this._benchmark(message, fn, cb);
+          }
+        };
+
+        if (this.state.clearAfterFlag) {
+          this._benchmark(
+            "clear",
+            () => {
+              this.state.messages = [];
+            },
+            finalize,
+            false
+          );
+        } else {
+          finalize();
+        }
+      };
+      this._benchmark(message, fn, cb);
+    } else {
+      this._benchmark(message, fn, callback);
+    }
+  }
+
+  _benchmark(message, fn, cb, log = true) {
+    setTimeout(() => {
+      startMeasure(message);
+      fn();
+      stopMeasure(info => {
+        if (log) {
+          this.log(info.msg);
+        }
+        if (cb) {
+          cb(info);
+        }
+      });
+    }, 10);
+  }
+
+  addMessages(n) {
+    this.benchmark("add " + n, () => {
+      const newMessages = buildData(n);
+      this.state.messages.push.apply(this.state.messages, newMessages);
+    });
+  }
+
+  clear() {
+    this._benchmark("clear", () => {
+      this.state.messages = [];
+    });
+  }
+
+  updateSomeMessages() {
+    this.benchmark("update every 10th", () => {
+      const messages = this.state.messages;
+      for (let i = 0; i < this.state.messages.length; i += 10) {
+        const msg = Object.assign({}, messages[i]);
+        msg.author += "!!!";
+        this.set(messages, i, msg);
+      }
+    });
+  }
+
+  removeMessage(data) {
+    this.benchmark("remove message", () => {
+      const index = this.state.messages.findIndex(m => m.id === data.id);
+      this.state.messages.splice(index, 1);
+    });
+  }
+
+  log(str, isBold) {
+    const div = document.createElement("div");
+    if (isBold) {
+      div.classList.add("bold");
+    }
+    div.textContent = `> ${str}`;
+    this.refs.log.appendChild(div);
+    this.refs.log.scrollTop = this.refs.log.scrollHeight;
+  }
+
+  clearLog() {
+    this.refs.log.innerHTML = "";
+  }
+
+  toggleMultiple() {
+    this.state.multipleFlag = !this.state.multipleFlag;
+  }
+
+  toggleClear() {
+    this.state.clearAfterFlag = !this.state.clearAfterFlag;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

tools/benchmarks/owl-0.8.0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL 0.8.0 Benchmark</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='owl-0.8.0.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

tools/benchmarks/owl-0.8.0/templates.xml

@@ -0,0 +1,50 @@
+<templates>
+  <div t-name="App" class="main">
+      <div class="left-thing">
+        <div class="title">Actions</div>
+        <div class="panel">
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1k messages</button>
+          <button t-on-click="addMessages(10000)">Add 10k messages</button>
+          <button t-on-click="addMessages(30000)">Add 30k messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
+          <button t-on-click="clear">Clear</button>
+        </div>
+        <div class="flags">
+            <div>
+                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
+                <label for="multipleflag">Do it 20x</label>
+            </div>
+            <div>
+                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
+                <label for="clearFlag">Clear after</label>
+            </div>
+        </div>
+        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
+        <hr/>
+        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
+        <div class="log">
+            <div class="log-content" t-ref="'log'"/>
+        </div>
+      </div>
+      <div class="right-thing">
+          <div class="content" t-on-remove-message="removeMessage">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="Message" class="message">
+    <span class="author"><t t-esc="props.author"/></span>
+    <span class="msg"><t t-esc="props.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="Counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

tools/benchmarks/owl-0.9.0/app.js

@@ -0,0 +1,173 @@
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  state = { counter: 0 };
+  template = "Counter";
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  widgets = { Counter };
+  template = "Message";
+
+  shouldUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  widgets = { Message };
+  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
+  template = "App";
+
+  mounted() {
+    this.log(
+      `Benchmarking Owl v${owl._version} (build date: ${
+        owl._date
+      })`
+    );
+  }
+
+  benchmark(message, fn, callback) {
+    if (this.state.multipleFlag) {
+      const N = 20;
+      let n = N;
+      let total = 0;
+      let cb = info => {
+        let finalize = () => {
+          n--;
+          total += info.delta;
+          if (n === 0) {
+            const avg = total / N;
+            this.log(`Average: ${formatNumber(avg)}ms`, true);
+            if (callback) {
+              callback();
+            }
+          } else {
+            this._benchmark(message, fn, cb);
+          }
+        };
+
+        if (this.state.clearAfterFlag) {
+          this._benchmark(
+            "clear",
+            () => {
+              this.state.messages = [];
+            },
+            finalize,
+            false
+          );
+        } else {
+          finalize();
+        }
+      };
+      this._benchmark(message, fn, cb);
+    } else {
+      this._benchmark(message, fn, callback);
+    }
+  }
+
+  _benchmark(message, fn, cb, log = true) {
+    setTimeout(() => {
+      startMeasure(message);
+      fn();
+      stopMeasure(info => {
+        if (log) {
+          this.log(info.msg);
+        }
+        if (cb) {
+          cb(info);
+        }
+      });
+    }, 10);
+  }
+
+  addMessages(n) {
+    this.benchmark("add " + n, () => {
+      const newMessages = buildData(n);
+      this.state.messages.push.apply(this.state.messages, newMessages);
+    });
+  }
+
+  clear() {
+    this._benchmark("clear", () => {
+      this.state.messages = [];
+    });
+  }
+
+  updateSomeMessages() {
+    this.benchmark("update every 10th", () => {
+      const messages = this.state.messages;
+      for (let i = 0; i < this.state.messages.length; i += 10) {
+        const msg = Object.assign({}, messages[i]);
+        msg.author += "!!!";
+        this.set(messages, i, msg);
+      }
+    });
+  }
+
+  removeMessage(data) {
+    this.benchmark("remove message", () => {
+      const index = this.state.messages.findIndex(m => m.id === data.id);
+      this.state.messages.splice(index, 1);
+    });
+  }
+
+  log(str, isBold) {
+    const div = document.createElement("div");
+    if (isBold) {
+      div.classList.add("bold");
+    }
+    div.textContent = `> ${str}`;
+    this.refs.log.appendChild(div);
+    this.refs.log.scrollTop = this.refs.log.scrollHeight;
+  }
+
+  clearLog() {
+    this.refs.log.innerHTML = "";
+  }
+
+  toggleMultiple() {
+    this.state.multipleFlag = !this.state.multipleFlag;
+  }
+
+  toggleClear() {
+    this.state.clearAfterFlag = !this.state.clearAfterFlag;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

tools/benchmarks/owl-0.9.0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL 0.9.0 Benchmark</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='owl.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

tools/benchmarks/owl-0.9.0/templates.xml

@@ -0,0 +1,50 @@
+<templates>
+  <div t-name="App" class="main">
+      <div class="left-thing">
+        <div class="title">Actions</div>
+        <div class="panel">
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1k messages</button>
+          <button t-on-click="addMessages(10000)">Add 10k messages</button>
+          <button t-on-click="addMessages(30000)">Add 30k messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
+          <button t-on-click="clear">Clear</button>
+        </div>
+        <div class="flags">
+            <div>
+                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
+                <label for="multipleflag">Do it 20x</label>
+            </div>
+            <div>
+                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
+                <label for="clearFlag">Clear after</label>
+            </div>
+        </div>
+        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
+        <hr/>
+        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
+        <div class="log">
+            <div class="log-content" t-ref="'log'"/>
+        </div>
+      </div>
+      <div class="right-thing">
+          <div class="content" t-on-remove-message="removeMessage">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="Message" class="message">
+    <span class="author"><t t-esc="props.author"/></span>
+    <span class="msg"><t t-esc="props.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="Counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

tools/benchmarks/owl-master/app.js

@@ -0,0 +1,165 @@
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  state = { counter: 0 };
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  widgets = { Counter };
+
+  shouldUpdate(nextProps) {
+    return nextProps.message !== this.props.message;
+  }
+  removeMessage() {
+    this.trigger("remove-message", {
+      id: this.props.message.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  widgets = { Message };
+  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
+
+  mounted() {
+    this.log(
+      `Benchmarking Owl v${owl.__info__.version} (build date: ${
+        owl.__info__.date
+      })`
+    );
+  }
+
+  benchmark(message, fn, callback) {
+    if (this.state.multipleFlag) {
+      const N = 20;
+      let n = N;
+      let total = 0;
+      let cb = info => {
+        let finalize = () => {
+          n--;
+          total += info.delta;
+          if (n === 0) {
+            const avg = total / N;
+            this.log(`Average: ${formatNumber(avg)}ms`, true);
+            if (callback) {
+              callback();
+            }
+          } else {
+            this._benchmark(message, fn, cb);
+          }
+        };
+
+        if (this.state.clearAfterFlag) {
+          this._benchmark(
+            "clear",
+            () => {
+              this.state.messages = [];
+            },
+            finalize,
+            false
+          );
+        } else {
+          finalize();
+        }
+      };
+      this._benchmark(message, fn, cb);
+    } else {
+      this._benchmark(message, fn, callback);
+    }
+  }
+
+  _benchmark(message, fn, cb, log = true) {
+    setTimeout(() => {
+      startMeasure(message);
+      fn();
+      stopMeasure(info => {
+        if (log) {
+          this.log(info.msg);
+        }
+        if (cb) {
+          cb(info);
+        }
+      });
+    }, 10);
+  }
+
+  addMessages(n) {
+    this.benchmark("add " + n, () => {
+      const newMessages = buildData(n);
+      this.state.messages.push.apply(this.state.messages, newMessages);
+    });
+  }
+
+  clear() {
+    this._benchmark("clear", () => {
+      this.state.messages = [];
+    });
+  }
+
+  updateSomeMessages() {
+    this.benchmark("update every 10th", () => {
+      const setState = owl.Observer.set;
+      const messages = this.state.messages;
+      for (let i = 0; i < this.state.messages.length; i += 10) {
+        const msg = Object.assign({}, messages[i]);
+        msg.author += "!!!";
+        setState(messages, i, msg);
+      }
+    });
+  }
+
+  removeMessage(event) {
+    this.benchmark("remove message", () => {
+      const index = this.state.messages.findIndex(
+        m => m.id === event.detail.id
+      );
+      this.state.messages.splice(index, 1);
+    });
+  }
+
+  log(str, isBold) {
+    const div = document.createElement("div");
+    if (isBold) {
+      div.classList.add("bold");
+    }
+    div.textContent = `> ${str}`;
+    this.refs.log.appendChild(div);
+    this.refs.log.scrollTop = this.refs.log.scrollHeight;
+  }
+
+  clearLog() {
+    this.refs.log.innerHTML = "";
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();