[IMP] playground: update code to last version of master

The release script only update the owl code itself, not the playground
app code.

.gitignore

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

.jshintrc

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

COPYRIGHT

@@ -1,14 +0,0 @@
-
-Most of the files are
-
-  Copyright (c) 2004-2015 Odoo S.A.
-
-Many files also contain contributions from third
-parties. In this case the original copyright of
-the contributions can be traced through the
-history of the source version control system.
-
-When that is not the case, the files contain a prominent
-notice stating the original copyright and applicable
-license, or come with their own dedicated COPYRIGHT
-and/or LICENSE file.

LICENSE

@@ -1,856 +0,0 @@
-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

@@ -1,259 +0,0 @@
-<h1 align="center">🦉 <a href="https://odoo.github.io/owl/">Odoo Web Library</a> 🦉</h1>
-
-_A no nonsense web framework for structured, dynamic and maintainable applications_
-
-## Project Overview
-
-The Odoo Web Library (OWL) is a smallish (~17kb gzipped) UI framework intended to
-be the basis for the [Odoo](https://www.odoo.com/) Web Client. Owl is a modern
-framework, written in Typescript, taking the best ideas from React and Vue in a
-simple and consistent way. Owl's main features are:
-
-- a declarative component system,
-- a reactivity system based on hooks,
-- a store implementation (for state management),
-- a small frontend router
-
-Owl components are defined with ES6 classes, they use QWeb templates, an underlying
-virtual dom, integrates beautifully with hooks, and the rendering is asynchronous.
-
-**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. There
-are some code examples to showcase some interesting features.
-
-## Example
-
-Here is a short example to illustrate interactive components:
-
-```javascript
-import { Component, QWeb, useState } from "owl";
-import { xml } from "owl/tags";
-
-class Counter extends Component {
-  static template = xml`
-    <button t-on-click="increment">
-      Click Me! [<t t-esc="state.value"/>]
-    </button>`;
-
-  state = useState({ value: 0 });
-
-  increment() {
-    this.state.value++;
-  }
-}
-
-class App extends Component {
-  static template = xml`
-    <div>
-      <span>Hello Owl</span>
-      <Counter />
-    </div>`;
-
-  static components = { Counter };
-}
-
-const app = new App({ qweb: new QWeb() });
-app.mount(document.body);
-```
-
-Note that the counter component is made reactive with the [`useState`](doc/hooks.md#usestate)
-hook. Also, all examples here uses the `xml` helper to define inline templates.
-But this is not mandatory, many applications will load templates separately.
-
-More interesting examples can be found on the
-[playground](https://odoo.github.io/owl/playground) application.
-
-## Design Principles
-
-OWL is designed to be used in highly dynamic applications where changing
-requirements are common and 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 nor small (even though it is quite good on those
-two topics). It is a no nonsense framework to build applications. There is only
-one way to define components (with classes).
-
-If you are interested in a comparison with React or Vue, you will
-find some more information [here](doc/comparison.md).
-
-## 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)
-- [Hooks](doc/hooks.md)
-
-Found an issue in the documentation? A broken link? Some outdated information?
-Submit a PR!
-
-## Installing/Building
-
-If you want to use a simple `<script>` tag, the last release can be downloaded here:
-
-- [owl-0.22.0.js](https://github.com/odoo/owl/releases/download/v0.22.0/owl.js)
-- [owl-0.22.0.min.js](https://github.com/odoo/owl/releases/download/v0.22.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 (owl) tests                                |
-
-## Quick Overview
-
-Owl components in an application are used to define a (dynamic) tree of components.
-
-```
-        Root
-        /   \
-       A     B
-      / \
-     C   D
-```
-
-**Environment:** the root component is special: it is created with an environment,
-which should contain a `QWeb` instance. The environment is then automatically
-propagated to each sub components (and accessible in the `this.env` property).
-
-```js
-const env = { qweb: new QWeb() };
-const app = new App(env);
-app.mount(document.body);
-```
-
-The environment is mostly static. Each application is free to add anything to
-the environment, which is very useful, since this can be accessed by each sub
-component. Some good use case for that is some configuration keys, session
-information or generic services (such as doing rpcs, or accessing local storage).
-Doing it this way means that components are easily testable: we can simply
-create a test environment with mock services.
-
-**State:** each component can manage its own local state. It is a simple ES6
-class, there are no special rules:
-
-```js
-class Counter extends Component {
-  static template = xml`
-    <button t-on-click="increment">
-      Click Me! [<t t-esc="state.value"/>]
-    </button>`;
-
-  state = { value: 0 };
-
-  increment() {
-    this.state.value++;
-    this.render();
-  }
-}
-```
-
-The example above shows a component with a local state. Note that since there
-is nothing magical to the `state` object, we need to manually call the `render`
-function whenever we update it. This can quickly become annoying (and not
-efficient if we do it too much). There is a better way: using the `useState`
-hook, which transforms an object into a reactive version of itself:
-
-```js
-const { useState } = owl.hooks;
-
-class Counter extends Component {
-  static template = xml`
-    <button t-on-click="increment">
-      Click Me! [<t t-esc="state.value"/>]
-    </button>`;
-
-  state = useState({ value: 0 });
-
-  increment() {
-    this.state.value++;
-  }
-}
-```
-
-**Props:** sub components often needs some information from their parents. This
-is done by adding the required information to the template. This will then be
-accessible by the sub component in the `props` object. Note that there is an
-important rule here: the information contained in the `props` object is not
-owned by the sub component, and should never be modified.
-
-```js
-class Child extends Component {
-  static template = xml`<div>Hello <t t-esc="props.name"/></div>`;
-}
-
-class Parent extends Component {
-  static template = xml`
-    <div>
-        <Child name="'Owl'" />
-        <Child name="'Framework'" />
-    </div>`;
-  static components = { Child };
-}
-```
-
-**Communication:** there are multiple ways to communicate information between
-components. However, the two most important ways are the following:
-
-- from parent to children: by using `props`,
-- from a children to one of its parent: by triggering events.
-
-The following example illustrate both mechanisms:
-
-```js
-class OrderLine extends Component {
-  static template = xml`
-    <div t-on-click="add">
-        <div><t t-esc="props.line.name"/></div>
-        <div>Quantity: <t t-esc="props.line.quantity"/></div>
-    </div>`;
-
-  add() {
-    this.trigger("add-to-order", { line: props.line });
-  }
-}
-
-class Parent extends Component {
-  static template = xml`
-    <div t-on-add-to-order="addToOrder">
-        <OrderLine
-            t-foreach="orders"
-            t-as="line"
-            line="line" />
-    </div>`;
-  static components = { OrderLine };
-  orders = useState([{ id: 1, name: "Coffee", quantity: 0 }, { id: 2, name: "Tea", quantity: 0 }]);
-
-  addToOrder(event) {
-    const line = event.detail.line;
-    line.quantity++;
-  }
-}
-```
-
-In this example, the `OrderLine` component trigger a `add-to-order` event. This
-will generate a DOM event which will bubble along the DOM tree. It will then be
-intercepted by the parent component, which will then get the line (from the
-`detail` key) and then increment its quantity. See the section on [event handling](doc/component.md#event-handling)
-for more details on how events work.
-
-Note that this example would have also worked if the `OrderLine` component
-directly modifies the `line` object. However, this is not a good practice: this
-only works because the `props` object received by the child component is reactive,
-so the child component is then coupled to the parents implementation.
-
-## License
-
-OWL is [LGPL licensed](./LICENSE).

assets/highlight.tomorrow.css

@@ -0,0 +1,72 @@
+/* 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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,602 @@
+/*!
+ * 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

@@ -0,0 +1,349 @@
+/*! 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

@@ -1,96 +0,0 @@
-# 🦉 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 applied on a node element or on a component.
-
-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

@@ -1,236 +0,0 @@
-# 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)
-- [Class Based](#class-based)
-- [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, gzipped) |
-| ------------------------ | ------------------------ |
-| OWL                      | 16kb                     |
-| Vue + VueX               | 30kb                     |
-| React + ReactDOM + Redux | 40kb                     |
-| jQuery                   | 30kb                     |
-
-## Class Based
-
-Both React and Vue moved away from defining components with classes. They prefer
-a more functional approach, in particular, with the new `hooks` mechanisms.
-
-This has some advantages and disadvantages. But the end result is that React
-and Vue both offers multiple different ways of defining new components. In
-contrast, Owl has only one mechanism: class-based components. We believe that Owl
-components are fast enough for all our usecases, and making it as simple as
-possible for developers is more valuable (for us).
-
-## 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 component 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 component may want to fetch an external
-library (a calendar component may need a specialized calendar rendering library),
-in its willStart hook.
-
-```javascript
-class MyCalendarComponent 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 an internal counter whenever it changes. Note that it is done
-with a `Proxy`, which means that it is totally transparent to the developers.
-Adding new keys is supported. Once any part of the state has been changed, a
-rendering is scheduled in the next microtask tick (promise queue).
-
-## 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 actions (but not
-mutations), and like VueX, it keeps track of the state changes. However, it does
-not notify a component when the state changes. Instead, components need to connect
-to the store like in redux, by inheriting the `ConnectedComponent` class.
-
-```javascript
-const actions = {
-  increment({ state }, val) {
-    state.counter += val;
-  }
-};
-
-const state = {
-  counter: 0
-};
-const store = new owl.Store({ state, actions });
-
-class Counter extends owl.ConnectedComponent {
-  static mapStoreToProps(state) {
-    return {
-      value: state.counter
-    };
-  }
-  increment() {
-    this.env.store.dispatch("increment");
-  }
-}
-
-const counter = new Counter({ store, qweb });
-```

doc/event_bus.md

@@ -1,27 +0,0 @@
-# 🦉 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/hooks.md

@@ -1,189 +0,0 @@
-# 🦉 Hooks 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Example](#example)
-- [Reference](#reference)
-  - [One Rule](#one-rule)
-  - [`useState`](#usestate)
-  - [`onMounted`](#onmounted)
-  - [`onWillUnmount`](#onwillunmount)
-  - [`useRef`](#useref)
-
-## Overview
-
-Hooks were popularised by React as a way to solve the following issues:
-
-- help reusing stateful logic between components
-- help organizing code by feature in complex components
-- use state in functional components, without writing a class.
-
-Owl hooks serve the same purpose, except that they work for class components
-(note: React hooks do not work on class components, and maybe because of that,
-there seems to be the misconception that hooks are in opposition to class. This
-is clearly not true, as shown by Owl hooks).
-
-Hooks works beautifully with Owl components: they solve the problems mentioned
-above, and in particular, they are the perfect way to make your component
-reactive.
-
-## Example
-
-Here is the classical example of a non trivial hook to track the mouse position.
-
-```js
-const { useState, onMounted, onWillUnmount } = owl.hooks;
-
-// We define here a custom behaviour: this hook tracks the state of the mouse
-// position
-function useMouse() {
-  const position = useState({ x: 0, y: 0 });
-
-  function update(e) {
-    position.x = e.clientX;
-    position.y = e.clientY;
-  }
-  onMounted(() => {
-    window.addEventListener("mousemove", update);
-  });
-  onWillUnmount(() => {
-    window.removeEventListener("mousemove", update);
-  });
-
-  return position;
-}
-
-// Main root component
-class App extends owl.Component {
-  static template = xml`
-      <div t-name="App">
-        <div>Mouse: <t t-esc="mouse.x"/>, <t t-esc="mouse.y"/></div>
-      </div>`;
-
-  // this hooks is bound to the 'mouse' property.
-  mouse = useMouse();
-}
-```
-
-Note that we use the prefix `use` for hooks, just like in React. This is just
-a convention.
-
-## Reference
-
-### One rule
-
-There is only one rule: every hook for a component have to be called in the
-constructor (or in class fields):
-
-```js
-// ok
-class SomeComponent extends Component {
-  state = useState({value: 0});
-}
-
-// also ok
-class SomeComponent extends Component {
-  constructor(...args) {
-    super(...args);
-    this.state = useState({value: 0});
-  }
-}
-
-// not ok: this is executed after the constructor is called
-class SomeComponent extends Component {
-  async willStart() {
-    this.state = useState({value: 0});
-  }
-}
-```
-
-### `useState`
-
-The `useState` hook is certainly the most important hooks for Owl components:
-this is what enables component to be reactive, to react to state change.
-
-The `useState` hook has to be given an object or an array, and will return
-an observed version of it (using a `Proxy`).
-
-```javascript
-const { useState } = owl.hooks;
-
-class Counter extends owl.Component {
-  static template = xml`
-    <button t-on-click="increment">
-        Click Me! [<t t-esc="state.value"/>]
-    </button>`;
-
-  state = useState({ value: 0 });
-
-  increment() {
-    this.state.value++;
-  }
-}
-```
-
-### `onMounted`
-
-`onMounted` is not an hook, but is a building block designed to help make useful
-hooks. `onMounted` register a callback, which will be called when the component
-is mounted (see example on top of this page).
-
-### `onWillUnmount`
-
-`onWillUnmount` is not an hook, but is a building block designed to help make useful
-hooks. `onWillUnmount` register a callback, which will be called when the component
-is unmounted (see example on top of this page).
-
-### `useRef`
-
-The `useRef` hook is useful when we need a way to interact with some inside part
-of a component, rendered by Owl. It can work either on a DOM node, or on a component,
-tagged by the `t-ref` directive:
-
-```xml
-<div>
-    <div t-ref="someDiv"/>
-    <SubComponent t-ref="someComponent"/>
-</div>
-```
-
-In this example, the component will be able to access the `div` and the component
-`SubComponent` using the `useRef` hook:
-
-```js
-class Parent extends Component {
-  subRef = useRef("someComponent");
-  divRef = useRef("someDiv");
-
-  someMethod() {
-    // here, if component is mounted, refs are active:
-    // - this.divRef.el is the div HTMLElement
-    // - this.subRef.comp is the instance of the sub component
-  }
-}
-```
-
-As shown by the example above, html elements are accessed by using the `el`
-key, and components references are accessed with `comp`.
-
-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-component` directives). For example,
-
-```xml
-<div t-ref="component_{{someCondition ? '1' : '2'}}"/>
-```
-
-Here, the references needs to be set like this:
-
-```js
-this.ref1 = useRef("component_1");
-this.ref2 = useRef("component_2");
-```
-
-References are only guaranteed to be active while the parent component is mounted.
-If this is not the case, accessing `el` or `comp` on it will return `null`.

doc/observer.md

@@ -1,20 +0,0 @@
-# 🦉 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");
-const obj = observer.observe({ a: { b: 1 } });
-
-obj.a.b = 2;
-```
-
-The observer is implemented with the native `Proxy` object. Note that this
-means that it will not work on older browsers.

doc/quick_start.md

@@ -1,103 +0,0 @@
-# 🦉 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 component, which can
-  have sub components
-
-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 component
-- mount the root component to a DOM element
-
-Let us now add the javascript to make it work, in `app.js`:
-
-```javascript
-const useState = owl.hooks.useState;
-
-class ClickCounter extends owl.Component {
-  static template = "clickcounter";
-  constructor() {
-    super(...arguments);
-    this.state = useState({ 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

@@ -1,530 +0,0 @@
-# 🦉 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-component`, `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-component`, `t-props`, `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, allowDuplicate)`**: add a specific template.
-
-  ```js
-  qweb.addTemplate("mytemplate", "<div>hello</div>");
-  ```
-
-  If the optional `allowDuplicate` is set to `true`, then `QWeb` will simply return whenever a template is added for a second time. Otherwise, `QWeb` will crash.
-
-- **`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="OtherComponent">other component</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", component);
-  ```
-
-- **`renderToString(name, context)`**: renders a template, but returns an html
-  string.
-
-  ```js
-  const str = qweb.renderToString("someTemplate", somecontext);
-  ```
-
-- **`registerTemplate(name, template)`**: static function to register an global
-  QWeb template. This is useful for commonly used components accross the
-  application, and for making a template available to an application without
-  having a reference to the actual QWeb instance.
-
-  ```js
-  QWeb.registerTemplate("mytemplate", `<div>some template`);
-  ```
-
-- **`registerComponent(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-component` directive). This is useful for commonly used
-  components accross the application.
-
-  ```js
-  class Dialog extends owl.Component { ... }
-  QWeb.registerComponent("Dialog", Dialog);
-
-  ...
-
-  class ParentComponent extends owl.Component { ... }
-  qweb.addTemplate("ParentComponent", "<div><Dialog/></div>");
-  ```
-
-In some way, a `QWeb` instance is the core of an Owl application. It is the only
-mandatory element of an [environment](component.md#environment). As such, it
-has an extra responsability: it can act as an event bus for internal communication
-between Owl classes. This is the reason why `QWeb` actually extends [EventBus](event_bus.md).
-
-## 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
-component). 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

@@ -1,62 +0,0 @@
-# 🦉 OWL Documentation 🦉
-
-## Owl Content
-
-Owl is a javascript library that contains some core classes and function to help
-build applications. Here is a complete representation of its content:
-
-```
-owl
-    Component
-    QWeb
-    useState
-    core
-        EventBus
-        Observer
-    hooks
-        onMounted
-        onWillUnmount
-        useState
-        useRef
-    router
-        Link
-        RouteComponent
-        Router
-    store
-        Store
-        ConnectedComponent
-    tags
-        xml
-    utils
-        debounce
-        escape
-        loadJS
-        loadTemplates
-        whenReady
-```
-
-Note that for convenience, the `useState` hook is also exported at the root of the `owl` object.
-
-## Reference
-
-- [Animations](animations.md)
-- [Component](component.md)
-- [Event Bus](event_bus.md)
-- [Hooks](hooks.md)
-- [Observer](observer.md)
-- [QWeb](qweb.md)
-- [Router](router.md)
-- [Store](store.md)
-- [Tags](tags.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)
-- [Templates to start Owl applications (external link)](https://github.com/ged-odoo/owl-templates)

doc/router.md

@@ -1,171 +0,0 @@
-# 🦉 Router 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Example](#example)
-- [Reference](#reference)
-  - [Route Definition](#route-definition)
-  - [Router](#router)
-  - [Navigation Guards](#navigation-guards)
-  - [RouteComponent](#routecomponent)
-  - [Link](#link)
-
-## Overview
-
-It is often useful to organize an application around urls. If the application is
-a single page application, then we need a way to manage those urls in the browser.
-This is why there are many different routers for different frameworks. A generic
-router can do the job just fine, but a specialized router for Owl can give a
-better developer experience.
-
-The Owl router support the following features:
-
-- `history` or `hash` mode
-- declarative routes
-- route redirection
-- navigation guards
-- parameterized routes
-- a `<Link/>` component
-- a `<RouteComponent/>` component
-
-Note that it is still in early stage of developments, and there are probably
-still some issues.
-
-## Example
-
-To use the Owl router, there are some steps that needs to be done:
-
-- declare some routes
-- create a router
-- add it to the environment
-
-```js
-async function protectRoute({ env, to }) {
-  if (!env.session.authUser) {
-    env.session.setNextRoute(to.name);
-    return { to: "SIGN_IN" };
-  }
-  return true;
-}
-
-export const ROUTES = [
-  { name: "LANDING", path: "/", component: Landing },
-  { name: "TASK", path: "/tasks/{{id}}", component: Task },
-  { name: "SIGN_UP", path: "/signup", component: SignUp },
-  { name: "SIGN_IN", path: "/signin", component: SignIn },
-  { name: "ADMIN", path: "/admin", component: Admin, beforeRouteEnter: protectRoute },
-  { name: "ACCOUNT", path: "/account", component: Account, beforeRouteEnter: protectRoute },
-  { name: "UNKNOWN", path: "*", redirect: { to: "LANDING" } }
-];
-
-function makeEnvironment() {
-    ...
-    const env = { qweb };
-    env.session = new Session(env);
-    env.router = new owl.router.Router(env, ROUTES);
-    await env.router.start();
-    return env;
-}
-```
-
-Notice that the router needs to be started. This is an asynchronous operation
-because it needs to apply the potential navigation guards on the current route
-(which may or may not mean that the application is redirected to another route).
-
-## Reference
-
-### Route definition
-
-A route need to be defined as an object with the following keys:
-
-- `name` (optional): a (unique) string useful to identify the current route. If not
-  given, it will be assigned an automatic name,
-- `path`: a string describing the url. It can be static: `/admin` or dynamic: `/users/{{id}}`.
-  It also can be `*`, to catch all remaining routes.
-- `component` (optional): an Owl component that will be used by the `t-routecomponent`
-  directive if the route is active
-- `redirect` (optional): should be destination object (with optional keys `path`, `to` and `params`) if given, the application will be redirected to the destination whenever we match this route
-- `beforeRouteEnter`: defines a [navigation guard](#navigation-guards).
-
-### `Router`
-
-The `Router` constructor takes three arguments:
-
-- `env`: a valid environment,
-- a list of routes,
-- an optional object (with the only key `mode` which can be `history` (default
-  value) or `hash`).
-
-```js
-const ROUTES = [...];
-const router = new owl.router.Router(env, ROUTES, {mode: 'history'});
-```
-
-Note that the route are defined in a list, and the order matters: the router
-tries to find a match by going down the list.
-
-The router needs to be added to the environment in the `router` sub key.
-
-Once a router is created, it needs to be started. This is necessary to initialize
-its current state to the current URL (and also, to potentially apply any
-navigation guards and/or redirecting).
-
-```js
-await router.start();
-```
-
-Once started, the router will keep track of the current url and reflect its
-value in two keys:
-
-- `router.currentRoute`
-- `router.currentParams`
-
-The router also has a `navigate` method, useful to programmatically change the
-application to another state (and the url):
-
-```js
-router.navigate({ to: "USER", params: { id: 51 } });
-```
-
-### Navigation Guards
-
-Navigation guards are very useful to be able to execute some business logic/
-perform some actions or redirect to other routes whenever the application is
-entering a new route. For example, the following guard checks if there is an
-authenticated user, and if it is not the case, redirect to the sign in route.
-
-```js
-async function protectRoute({ env, to }) {
-  if (!env.session.authUser) {
-    env.session.setNextRoute(to.name);
-    return { to: "SIGN_IN" };
-  }
-  return true;
-}
-```
-
-A navigation guard is a function that returns a promise, which either resolves
-to `true` (the navigation is accepted), or to another destination object.
-
-### `RouteComponent`
-
-The `RouteComponent` component directs Owl to render the component associated
-to the currently active route (if any):
-
-```xml
-<div t-name="App">
-    <NavBar />
-    <RouteComponent />
-</div>
-```
-
-### `Link`
-
-The `Link` component is a Owl component which render as a `<a>` tag with any
-content. It will compute the proper href from its props, and allow Owl to
-properly navigate to a given url if clicked on it.
-
-```xml
-<Link to="'HOME'">Home</Link>
-```

doc/store.md

@@ -1,289 +0,0 @@
-# 🦉 Store 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Example](#example)
-- [Reference](#reference)
-  - [Store](#store)
-  - [Actions](#actions)
-  - [Getters](#getters)
-  - [Connecting a Component](#connecting-a-component)
-  - [Semantics](#semantics)
-  - [Good Practices](#good-practices)
-
-## 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, with `actions`.
-Owl components can then connect to the store, and will be updated if necessary.
-
-Note: Owl store is inspired by React Redux and VueX.
-
-## Example
-
-Here is what a simple store looks like:
-
-```js
-const actions = {
-  addTodo({ state }, message) {
-    state.todos.push({
-      id: state.nextId++,
-      message,
-      isCompleted: false
-    });
-  }
-};
-
-const state = {
-  todos: [],
-  nextId: 1
-};
-
-const store = new owl.Store({ state, actions });
-store.on("update", () => console.log(store.state));
-
-// updating the state
-store.dispatch("addTodo", "fix all bugs");
-```
-
-This example shows how a store can be defined and used. Note that in most cases,
-actions will be dispatched by connected components.
-
-## Reference
-
-### `Store`
-
-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. See the
-[Observer](observer.md)'s documentation for more details.
-
-The `Store` class is quite small. It has two public methods:
-
-- its constructor
-- `dispatch`
-
-The constructor takes a configuration object with four (optional) keys:
-
-- the initial state
-- the actions
-- the getters
-- the environment
-
-```javascript
-const config = {
-  state,
-  actions,
-  getters,
-  env
-};
-const store = new Store(config);
-```
-
-### Actions
-
-Actions are used to coordinate state changes. It can be used for both synchronous
-and asynchronous logic.
-
-```js
-const actions = {
-  async login({ state }, info) {
-    state.loginState = "pending";
-    try {
-      const loginInfo = await doSomeRPC("/login/", info);
-      state.loginState = loginInfo;
-    } catch (e) {
-      state.loginState = "error";
-    }
-  }
-};
-```
-
-Actions are called with the `dispatch` method on the store, and can receive an
-arbitrary number of arguments.
-
-```js
-store.dispatch("login", someInfo);
-```
-
-Note that anything returned by an action will also be returned by the `dispatch`
-call.
-
-Also, it is important to be aware that we need to be careful with asynchronous
-logic. Each state change will potentially trigger a rerendering, so we need to
-make sure that we do not have a partial corrupted state. Here is an example that
-is likely not a good idea:
-
-```javascript
-const actions = {
-  async fetchSomeData({ state }, recordId) {
-    state.recordId = recordId;
-    const data = await doSomeRPC("/read/", recordId);
-    state.recordData = data;
-  }
-};
-```
-
-In the previous example, there is a period of time in which the state has a
-`recordId` which does not correspond to the `recordData`. It is more likely that
-we want an atomic update: updating the `recordId` at the same time as the `recordData`
-values:
-
-```javascript
-const actions = {
-  async fetchSomeData({ state }, recordId) {
-    const data = await doSomeRPC("/read/", recordId);
-    state.recordId = recordId;
-    state.recordData = data;
-  }
-};
-```
-
-### 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
-
-At some point, we need a way to access the state in the store from a component.
-By default, an Owl `Component` is not connected to any store. To do that, we
-need to create a component inheriting from `OwlComponent`:
-
-```javascript
-const actions = {
-  increment({ state }, val) {
-    state.counter += val;
-  }
-};
-
-const state = {
-  counter: 0
-};
-const store = new owl.Store({ state, actions });
-
-class Counter extends owl.ConnectedComponent {
-  static mapStoreToProps(state) {
-    return {
-      value: state.counter
-    };
-  }
-  increment() {
-    this.env.store.dispatch("increment");
-  }
-}
-
-const counter = new Counter({ store, qweb });
-```
-
-```xml
-<button t-name="Counter" t-on-click="increment">
-  Click Me! [<t t-esc="props.value"/>]
-</button>
-```
-
-The `ConnectedComponent` class can be configured with the following fields:
-
-- `mapStoreToProps`: a function that extracts the `props` of the Component
-  from the `state` of the `Store` and returns them as a dict.
-- `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` (boolean): [only useful if no hashFunction is given] if `false`, only watch
-  for top level state changes (`true` by default)
-
-Note that the class `ConnectedComponent` has a `dispatch` method. This means
-that the previous example could be simplified like this:
-
-```javascript
-class Counter extends owl.ConnectedComponent {
-  static mapStoreToProps(state) {
-    return {
-      value: state.counter
-    };
-  }
-}
-```
-
-```xml
-<button t-name="Counter" t-on-click="dispatch('increment')">
-  Click Me! [<t t-esc="props.value"/>]
-</button>
-```
-
-### Semantics
-
-The `Store` and the `ConnectedComponent` try to be smart and to optimize as much
-as possible the rendering and update process. What is important to know is:
-
-- components are always updated in the order of their creation (so, parent
-  before children)
-- they are updated only if they are in the DOM
-- if a parent is asynchronous, the system will wait for it to complete its
-  update before updating other components.
-- in general, updates are not coordinated. This is not a problem for synchronous
-  components, but if there are many asynchronous components, this could lead to
-  a situation where some part of the UI is updated and other parts of the UI is
-  not updated.
-
-### Good Practices
-
-- avoid asynchronous components as much as possible. Asynchronous components
-  lead to situations where parts of the UI is not updated immediately.
-- do not be afraid to connect many components, parent or children if needed. For
-  example, a `MessageList` component could get a list of ids in its `mapStoreToProps` and a `Message` component could get the data of its own
-  message
-- since the `mapStoreToProps` function is called for each connected component,
-  for each state update, it is important to make sure that these functions are
-  as fast as possible.

doc/tags.md

@@ -1,47 +0,0 @@
-# 🦉 Tags 🦉
-
-Tags are very small helper to make it easy to write inline templates. There is
-only one currently available tag: `xml`, but we plan to add other tags later,
-such as a `css` tag, which will be used to write single file components.
-
-## XML tag
-
-Without tags, creating a standalone component would look like this:
-
-```js
-import { Component } from 'owl'
-
-const name = 'some-unique-name';
-const template = `
-    <div>
-        <span t-if="somecondition">text</span>
-        <button t-on-click="someMethod">Click</button>
-    </div>
-`;
-QWeb.registerTemplate(name, template);
-
-class MyComponent extends Component {
-    static template = name;
-
-    ...
-}
-```
-
-With tags, this process is slightly simplified. The name is uniquely generated,
-and the template is automatically registered:
-
-```js
-import { Component } from 'owl'
-import { xml } from 'owl/tags'
-
-class MyComponent extends Component {
-    static template = xml`
-        <div>
-            <span t-if="somecondition">text</span>
-            <button t-on-click="someMethod">Click</button>
-        </div>
-    `;
-
-    ...
-}
-```

doc/tooling.md

@@ -1,86 +0,0 @@
-# 🦉 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.
-
-An important job done by the `dev` mode is to validate props for each component
-creation and update. Also, extra props will cause an error.
-
-## 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.
-
-## Single File Component
-
-If you want to have `xml` syntax highlighting while using the `xml` helper which
-helps you define inline templates, there is a VS Code addon `Comment tagged template`
-which, if installed, does exactly that. To enable it, you need to add a comment,
-like this:
-
-```js
-// -----------------------------------------------------------------------------
-// TEMPLATE
-// -----------------------------------------------------------------------------
-const TEMPLATE = xml/* xml */ `
-	<div class="main two-columns">
-		<Sidebar/>
-		<Content />
-	</div>`;
-
-// -----------------------------------------------------------------------------
-// CODE
-// -----------------------------------------------------------------------------
-class MyComponent extends Component {
-  static template = TEMPLATE;
-  static components = { Sidebar, Content };
-
-  // rest of component...
-}
-```

doc/utils.md

@@ -1,63 +0,0 @@
-# 🦉 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

@@ -1,18 +0,0 @@
-# 🦉 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

@@ -0,0 +1,109 @@
+<!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

@@ -1,68 +0,0 @@
-{
-  "name": "owl-framework",
-  "version": "0.22.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",
-    "buildcommonjs": "npm run build:js && npm run build:bundle -- -f cjs",
-    "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": "LGPL",
-  "bugs": {
-    "url": "https://github.com/odoo/owl/issues"
-  },
-  "homepage": "https://github.com/odoo/owl#readme",
-  "dependencies": {},
-  "devDependencies": {
-    "@types/jest": "^23.3.12",
-    "cpx": "^1.5.0",
-    "git-rev-sync": "^1.12.0",
-    "jest": "^23.6.0",
-    "jest-environment-jsdom": "^24.7.1",
-    "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": {
-    "roots": [
-      "<rootDir>/src",
-      "<rootDir>/tests"
-    ],
-    "transform": {
-      "^.+\\.ts?$": "ts-jest"
-    },
-    "verbose": false,
-    "testRegex": "(/tests/.*(test|spec))\\.ts?$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ]
-  },
-  "prettier": {
-    "printWidth": 100
-  }
-}

playground/app.js

@@ -0,0 +1,346 @@
+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

@@ -0,0 +1,123 @@
+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/index.html

@@ -12,6 +12,8 @@
 
     <!-- Application JS/CSS -->
     <link rel="stylesheet" href="playground.css">
+    <script type="module" src="export_snippet.js"></script>
+    <script type="module" src="utils.js"></script>
     <script type="module" src="app.js"></script>
 
   </head>

playground/playground.css

@@ -79,6 +79,19 @@ body {
   margin: 5px;
 }
 
+.share-code {
+  position: relative;
+}
+
+.copied-notification {
+  font-size: x-small;
+  position: absolute;
+  bottom: -5px;
+  white-space: nowrap;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 /* TABBED EDITOR ****************************************/
 
 .tabbed-editor {
@@ -173,20 +186,9 @@ body {
 }
 
 .right-pane .note {
-  font-size: 20px;
-  margin-top: 20px;
-}
-
-.right-pane .error {
-  height: 100%;
-  width: 90%;
-  padding-top: 30%;
   font-size: 18px;
-  color: darkred;
-  margin-left: 5%;
+  text-align: left;
+  margin-top: 20px;
+  padding: 5%;
 }
 
-.right-pane .error pre {
-    overflow: auto;
-    width: 100%;
-}

playground/templates.xml

@@ -1,8 +1,8 @@
 <templates>
   <div t-name="TabbedEditor" class="tabbed-editor">
     <div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
-        <t t-foreach="['js', 'xml', 'css']" t-as="tab">
-            <a t-ref="{{tab}}" t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="setTab(tab)">
+        <t t-foreach="['js', 'xml', 'css']" t-as="tab" t-key="tab">
+            <a t-ref="{{tab}}" t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="() => setTab(tab)">
                 <t t-esc="tab"/>
             </a>
         </t>
@@ -12,8 +12,7 @@
 
   <div t-name="App" class="playground">
       <div class="left-bar" t-att-class="{split: state.splitLayout}"
-           t-att-style="leftPaneStyle"
-           t-on-updateCode="updateCode">
+           t-att-style="leftPaneStyle">
         <div class="menubar">
           <a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
           <select t-on-change="setSample">
@@ -23,20 +22,23 @@
           </select>
           <a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
           <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
+          <a class="btn flash share-code" t-on-click="shareCode" title="Copy a link to this playground"><span>Share</span><span class="copied-notification" t-if="state.copied">Copied link to clipboard!</span></a>
         </div>
         <TabbedEditor
             js="state.js"
             css="!state.splitLayout and state.css"
             xml="!state.splitLayout and state.xml"
-            t-att-style="topEditorStyle"/>
+            style="topEditorStyle"
+            updateCode="updateCode"/>
         <t t-if="state.splitLayout">
           <div class="separator horizontal"/>
-          <TabbedEditor t-keepalive="1"
+          <TabbedEditor
              js="false"
              css="state.css"
              xml="state.xml"
              resizeable="true"
-             t-on-updatePanelHeight="updatePanelHeight"/>
+             onUpdatePanelHeight="updatePanelHeight"
+             updateCode="updateCode"/>
         </t>
       </div>
       <div class="separator vertical" t-on-mousedown="onMouseDown"/>
@@ -45,11 +47,11 @@
           <div>🦉 Odoo Web Library 🦉</div>
           <div>v<t t-esc="version"/></div>
           <div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
-          <div class="note">Note: these examples require a recent browser to work without a transpilation step. </div>
-        </div>
-        <div t-if="state.error" class="error">
-          <h3>Error</h3>
-          <pre t-esc="state.error"/>
+          <div class="note">
+            <p>Note: these examples are using recent features of Javascript, and require a recent browser to work without a transpilation step!
+              For example, it makes use of class fields and class static fields. These examples should work in a recent Chrome version.
+            </p>
+          </div>
         </div>
         <div class="content" t-ref="content"/>
       </div>

playground/utils.js

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,8 @@
+# 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

@@ -1,14 +0,0 @@
-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/component.ts

@@ -1,740 +0,0 @@
-import { Observer } from "../core/observer";
-import { CompiledTemplate, QWeb } from "../qweb/index";
-import { h, patch, VNode } from "../vdom/index";
-import "./directive";
-import "./props_validation";
-
-/**
- * Owl Component System
- *
- * This file introduces a declarative and composable component system. It
- * contains:
- *
- * - the Env interface (generic type for the environment)
- * - the Fiber interface (owl metadata attached to a rendering)
- * - the Internal 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;
-  [key: string]: any;
-}
-
-/**
- * Fibers are small abstractions designed to contain all the internal state
- * associated to a "rendering work unit", relative to a specific component.
- *
- * A rendering will cause the creation of a fiber for each impacted components.
- */
-export interface Fiber<Props> {
-  force: boolean;
-  rootFiber: Fiber<any> | null;
-  isCancelled: boolean;
-  scope: any;
-  vars: any;
-  patchQueue: Fiber<any>[];
-  component: Component<any, any>;
-  vnode: VNode | null;
-  willPatchResult: any;
-  props: Props;
-  promise: Promise<VNode> | null;
-  //   handlers?: any;
-  //   mountedHandlers?: any;
-}
-
-/**
- * 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.
- */
-interface Internal<T extends Env, Props> {
-  // each component has a unique id, useful mostly to handle parent/child
-  // relationships
-  readonly id: number;
-  vnode: VNode | null;
-  isMounted: boolean;
-  isDestroyed: boolean;
-
-  // parent and children keys are obviously useful to setup the parent-children
-  // relationship.
-  parent: Component<T, any> | null;
-  children: { [key: number]: Component<T, any> };
-  // children mapping: from templateID to componentID. templateID identifies a
-  // place in a template. The t-component directive needs it to be able to get
-  // the component instance back whenever the template is rerendered.
-  cmap: { [key: number]: number };
-
-  currentFiber: Fiber<Props> | null;
-
-  boundHandlers: { [key: number]: any };
-  observer: Observer | null;
-  render: CompiledTemplate | null;
-  mountedHandlers: { [key: number]: Function };
-  willUnmountCB: Function | null;
-  classObj: { [key: string]: boolean } | null;
-  refs: { [key: string]: Component<T, any> | HTMLElement | undefined } | null;
-}
-
-//------------------------------------------------------------------------------
-// Component
-//------------------------------------------------------------------------------
-let nextId = 1;
-
-export class Component<T extends Env, Props extends {}> {
-  readonly __owl__: Internal<Env, Props>;
-  static template?: string | null = null;
-  static _template?: string | null = null;
-  static _current?: any | null = null;
-  static components = {};
-  static props?: any;
-  static defaultProps?: any;
-
-  /**
-   * The `el` is the root element of the component.  Note that it could be null:
-   * this is the case if the component is not mounted yet, or is destroyed.
-   */
-  get el(): HTMLElement | null {
-    return this.__owl__.vnode ? (<any>this).__owl__.vnode.elm : null;
-  }
-
-  env: T;
-  props: Props;
-
-  //--------------------------------------------------------------------------
-  // Lifecycle
-  //--------------------------------------------------------------------------
-
-  /**
-   * Creates an instance of Component.
-   *
-   * The root component of a component tree needs an environment:
-   *
-   * ```javascript
-   *   const root = new RootComponent(env, props);
-   * ```
-   *
-   * Every other component simply needs a reference to its parent:
-   *
-   * ```javascript
-   *   const child = new SomeComponent(parent, props);
-   * ```
-   *
-   * Note that most of the time, only the root component needs to be created by
-   * hand.  Other components should be created automatically by the framework (with
-   * the t-component directive in a template)
-   */
-  constructor(parent: Component<T, any> | T, props?: Props) {
-    const defaultProps = (<any>this.constructor).defaultProps;
-    Component._current = this;
-    if (defaultProps) {
-      props = this.__applyDefaultProps(props, defaultProps);
-    }
-    // is this a good idea?
-    //   Pro: if props is empty, we can create easily a component
-    //   Con: this is not really safe
-    //   Pro: but creating component (by a template) is always unsafe anyway
-    this.props = <Props>props || <Props>{};
-    let id: number = nextId++;
-    let p: Component<T, any> | null = null;
-    if (parent instanceof Component) {
-      p = parent;
-      this.env = parent.env;
-      parent.__owl__.children[id] = this;
-    } else {
-      this.env = parent;
-      if (QWeb.dev) {
-        // we only validate props for root widgets here.  "Regular" widget
-        // props are validated by the t-component directive
-        QWeb.utils.validateProps(this.constructor, this.props);
-      }
-      this.env.qweb.on("update", this, () => {
-        if (this.__owl__.isMounted) {
-          this.render(true);
-        }
-        if (this.__owl__.isDestroyed) {
-          // this is unlikely to happen, but if a root widget is destroyed,
-          // we want to remove our subscription.  The usual way to do that
-          // would be to perform some check in the destroy method, but since
-          // it is very performance sensitive, and since this is a rare event,
-          // we simply do it lazily
-          this.env.qweb.off("update", this);
-        }
-      });
-    }
-    this.__owl__ = {
-      id: id,
-      vnode: null,
-      isMounted: false,
-      isDestroyed: false,
-      parent: p,
-      children: {},
-      cmap: {},
-      currentFiber: null,
-      boundHandlers: {},
-      mountedHandlers: {},
-      willUnmountCB: null,
-      observer: null,
-      render: null,
-      classObj: null,
-      refs: null
-    };
-  }
-
-  /**
-   * 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 component 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 component 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() {}
-
-  /**
-   * catchError is a method called whenever some error happens in the rendering or
-   * lifecycle hooks of a child.
-   */
-  catchError(error: Error): void {}
-
-  //--------------------------------------------------------------------------
-  // 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.
-   *
-   * Note that a component can be mounted an unmounted several times
-   */
-  async mount(target: HTMLElement, renderBeforeRemount: boolean = false): Promise<void> {
-    const __owl__ = this.__owl__;
-    if (__owl__.isMounted) {
-      return;
-    }
-    const fiber = this.__createFiber(false, undefined, undefined, undefined);
-    if (!__owl__.vnode) {
-      fiber.promise = this.__prepareAndRender(fiber);
-      const vnode = await fiber.promise;
-      if (__owl__.isDestroyed) {
-        // component was destroyed before we get here...
-        return;
-      }
-      this.__patch(vnode);
-    } else if (renderBeforeRemount) {
-      fiber.patchQueue.push(fiber);
-      fiber.promise = this.__render(fiber);
-      await fiber.promise;
-      this.__applyPatchQueue(fiber);
-    }
-    target.appendChild(this.el!);
-
-    if (document.body.contains(target)) {
-      this.__callMounted();
-    }
-  }
-
-  /**
-   * The unmount method is the opposite of the mount method.  It is useful
-   * to call willUnmount calls and remove the component from the DOM.
-   */
-  unmount() {
-    if (this.__owl__.isMounted) {
-      this.__callWillUnmount();
-      this.el!.remove();
-    }
-  }
-
-  /**
-   * The render method is the main entry point to render a component (once it
-   * is ready. This method is not initially called when the component is
-   * rendered the first time).
-   *
-   * This method will cause all its sub components to potentially rerender
-   * themselves.  Note that `render` is not called if a component is updated via
-   * its props.
-   */
-  async render(force: boolean = false): Promise<void> {
-    const __owl__ = this.__owl__;
-    if (!__owl__.isMounted) {
-      return;
-    }
-    const fiber = this.__createFiber(force, undefined, undefined, undefined);
-    fiber.patchQueue.push(fiber);
-    fiber.promise = this.__render(fiber);
-    await fiber.promise;
-
-    if (__owl__.isMounted && fiber === __owl__.currentFiber) {
-      // 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(fiber);
-    }
-  }
-
-  __createFiber(force, scope, vars, parent?: Fiber<any>): Fiber<Props> {
-    const fiber: Fiber<Props> = {
-      force,
-      scope,
-      vars,
-      rootFiber: null,
-      isCancelled: false,
-      component: this,
-      vnode: null,
-      patchQueue: parent ? parent.patchQueue : [],
-      willPatchResult: null,
-      props: this.props,
-      promise: null
-    };
-    fiber.rootFiber = parent ? parent.rootFiber : fiber;
-    this.__owl__.currentFiber = fiber;
-    return fiber;
-  }
-
-  /**
-   * 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 component.  Most
-   * components 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 component. Doing
-   * this will cause a full rerender of the component 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
-  //--------------------------------------------------------------------------
-
-  /**
-   * Private helper to perform a full destroy, from the point of view of an Owl
-   * component. It does not remove the el (this is done only once on the top
-   * level destroyed component, for performance reasons).
-   *
-   * The job of this method is mostly to call willUnmount hooks, and to perform
-   * all necessary internal cleanup.
-   *
-   * Note that it does not call the __callWillUnmount method to avoid visiting
-   * all children many times.
-   */
-  __destroy(parent: Component<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;
-    try {
-      this.mounted();
-      for (let key in handlers) {
-        handlers[key]();
-      }
-    } catch (e) {
-      errorHandler(e, this);
-    }
-  }
-
-  __callWillUnmount() {
-    const __owl__ = this.__owl__;
-    if (__owl__.willUnmountCB) {
-      __owl__.willUnmountCB();
-    }
-    this.willUnmount();
-    __owl__.isMounted = false;
-    const children = __owl__.children;
-    for (let id in children) {
-      const comp = children[id];
-      if (comp.__owl__.isMounted) {
-        comp.__callWillUnmount();
-      }
-    }
-  }
-
-  /**
-   * The __updateProps method is called by the t-component directive whenever
-   * it updates a component (so, when the parent template is rerendered).
-   */
-  async __updateProps(
-    nextProps: Props,
-    parentFiber: Fiber<any>,
-    scope?: any,
-    vars?: any
-  ): Promise<void> {
-    const shouldUpdate = parentFiber.force || this.shouldUpdate(nextProps);
-    if (shouldUpdate) {
-      const defaultProps = (<any>this.constructor).defaultProps;
-      if (defaultProps) {
-        nextProps = this.__applyDefaultProps(nextProps, defaultProps);
-      }
-      await this.willUpdateProps(nextProps);
-      this.props = nextProps;
-      const fiber = this.__createFiber(parentFiber.force, scope, vars, parentFiber);
-      fiber.patchQueue.push(fiber);
-
-      await this.__render(fiber);
-    }
-  }
-
-  /**
-   * Main patching method. We call the virtual dom patch method here to convert
-   * a virtual dom vnode into some actual dom.
-   */
-  __patch(vnode) {
-    const __owl__ = this.__owl__;
-    const target = __owl__.vnode || document.createElement(vnode.sel!);
-    __owl__.vnode = patch(target, vnode);
-  }
-
-  /**
-   * The __prepare method is only called by the t-component directive, when a
-   * subcomponent is created. It gets its scope and vars, if any, from the
-   * parent template.
-   */
-  __prepare(parentFiber: Fiber<any>, scope: any, vars: any): Promise<VNode> {
-    const fiber = this.__createFiber(parentFiber.force, scope, vars, parentFiber);
-    fiber.promise = this.__prepareAndRender(fiber);
-    return fiber.promise;
-  }
-
-  async __prepareAndRender(fiber: Fiber<Props>): Promise<VNode> {
-    try {
-      await this.willStart();
-    } catch (e) {
-      errorHandler(e, this);
-      return Promise.resolve(h("div"));
-    }
-    const __owl__ = this.__owl__;
-    if (__owl__.isDestroyed) {
-      return Promise.resolve(h("div"));
-    }
-    const qweb = this.env.qweb;
-    let p = (<any>this).constructor;
-    // console.warn(p, p.template, p._template, 'template' in p, p.hasOwnProperty('template'))
-    if (!p.hasOwnProperty("_template")) {
-      if (p.template) {
-        p._template = p.template;
-      } else {
-        // here, the component and none of its superclasses defines a static `template`
-        // key. So we fall back on looking for a template matching its name (or
-        // one of its subclass).
-
-        let template: string;
-        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 {
-          p._template = template;
-        }
-      }
-    }
-    __owl__.render = qweb.render.bind(qweb, p._template);
-    return this.__render(fiber);
-  }
-
-  __render(fiber: Fiber<Props>): Promise<VNode> {
-    const __owl__ = this.__owl__;
-    const promises: Promise<void>[] = [];
-    if (__owl__.observer) {
-      __owl__.observer.allowMutations = false;
-    }
-    let vnode;
-    try {
-      vnode = __owl__.render!(this, {
-        promises,
-        handlers: __owl__.boundHandlers,
-        mountedHandlers: __owl__.mountedHandlers,
-        fiber: fiber
-      });
-    } catch (e) {
-      vnode = __owl__.vnode || h("div");
-      errorHandler(e, this);
-    }
-    fiber.vnode = 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 component can be rerendered on its own, which
-    // will update its own vnode representation without the knowledge of the
-    // parent component.  With this, we make sure that the parent component will be
-    // able to patch itself properly after
-    vnode.key = __owl__.id;
-
-    // we applly here the class information described on the component by the
-    // template (so, something like <MyComponent class="..."/>) to the actual
-    // root vnode
-    if (__owl__.classObj) {
-      vnode.data.class = Object.assign(vnode.data.class || {}, __owl__.classObj);
-    }
-
-    return Promise.all(promises).then(() => vnode);
-  }
-
-  /**
-   * Only called by qweb t-component directive
-   */
-  __mount(vnode: VNode, elm: HTMLElement): VNode {
-    const __owl__ = this.__owl__;
-    if (__owl__.classObj) {
-      (<any>vnode).data.class = Object.assign((<any>vnode).data.class || {}, __owl__.classObj);
-    }
-    __owl__.vnode = patch(elm, vnode);
-    if (__owl__.parent!.__owl__.isMounted && !__owl__.isMounted) {
-      this.__callMounted();
-    }
-    return __owl__.vnode;
-  }
-
-  /**
-   * Only called by qweb t-component directive (when t-keepalive is set)
-   */
-  __remount() {
-    const __owl__ = this.__owl__;
-    if (!__owl__.isMounted) {
-      __owl__.isMounted = true;
-      this.mounted();
-    }
-  }
-
-  /**
-   * 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.assign({}, props) : {};
-    for (let propName in defaultProps) {
-      if (props![propName] === undefined) {
-        props![propName] = defaultProps[propName];
-      }
-    }
-    return <Props>props;
-  }
-
-  /**
-   * Apply the given patch queue from a fiber.
-   *   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 reverse order
-   */
-  __applyPatchQueue(fiber: Fiber<Props>) {
-    const patchQueue = fiber.patchQueue;
-    let component: Component<any, any> = this;
-    try {
-      const patchLen = patchQueue.length;
-      for (let i = 0; i < patchLen; i++) {
-        const fiber = patchQueue[i];
-        component = fiber.component;
-        fiber.willPatchResult = component.willPatch();
-      }
-      for (let i = 0; i < patchLen; i++) {
-        const fiber = patchQueue[i];
-        component = fiber.component;
-        component.__patch(fiber.vnode);
-      }
-      for (let i = patchLen - 1; i >= 0; i--) {
-        const fiber = patchQueue[i];
-        component = fiber.component;
-        component.patched(fiber.willPatchResult);
-      }
-    } catch (e) {
-      errorHandler(e, component);
-    }
-  }
-}
-
-//------------------------------------------------------------------------------
-// Error handling
-//------------------------------------------------------------------------------
-
-/**
- * This is the global error handler for errors occurring in Owl main lifecycle
- * methods.  Caught errors are triggered on the QWeb instance, and are
- * potentially given to some parent component which implements `catchError`.
- *
- * If there are no such component, we destroy everything. This is better than
- * being in a corrupted state.
- */
-function errorHandler(error: Error, component: Component<any, any>) {
-  let canCatch = false;
-  let qweb = component.env.qweb;
-  let root = component;
-  while (component && !(canCatch = component.catchError !== Component.prototype.catchError)) {
-    root = component;
-    component = component.__owl__.parent!;
-  }
-  console.error(error);
-  // we trigger error on QWeb so it can be logged/handled
-  qweb.trigger("error", error);
-
-  if (canCatch) {
-    setTimeout(() => {
-      component.catchError(error);
-    });
-  } else {
-    root.destroy();
-  }
-}

src/component/directive.ts

@@ -1,522 +0,0 @@
-import { QWeb } from "../qweb/index";
-import { INTERP_REGEXP } from "../qweb/context";
-import { MODS_CODE } from "../qweb/extensions";
-
-//------------------------------------------------------------------------------
-// t-component
-//------------------------------------------------------------------------------
-
-const T_COMPONENT_MODS_CODE = Object.assign({}, MODS_CODE, {
-  self: "if (e.target !== vn.elm) {return}"
-});
-
-QWeb.utils.defineProxy = function defineProxy(target, source) {
-  for (let k in source) {
-    Object.defineProperty(target, k, {
-      get() {
-        return source[k];
-      },
-      set(val) {
-        source[k] = val;
-      }
-    });
-  }
-};
-
-/**
- * The t-component 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-component directive for the following
- * situation:
- * ```xml
- *   <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 components
- * 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-component 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 component
- * // creation, or the props update...
- * let def3;
- *
- * // this is kind of tricky: we need here to find if the component was already
- * // created by a previous rendering.  This is done by checking the internal
- * // `cmap` (children map) of the parent component: it maps keys to component 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 component in the closure.  We push
- * // null to reserve the slot, and will replace it later by the component vnode,
- * // when it will be ready (do not forget that preparing/rendering a component 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 component, 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 component 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 component.  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.component && context.components[componentKey4] || QWeb.component[componentKey4];
-
- *   if (!W4) {
- *     throw new Error("Cannot find the definition of component 'child'");
- *   }
- *   w4 = new W4(owner, props4);
- *
- *   // Whenever we rerender the parent component, we need to be sure that we
- *   // are able to find the component 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 component from the template
- *   // perspective.
- *   context.__owl__.cmap[key5] = w4.__owl__.id;
- *
- *   // __prepare is called, to basically call willStart, then render the
- *   // component
- *   def3 = w4.__prepare();
- *
- *   def3 = def3.then(vnode => {
- *     // we create here a virtual node for the parent (NOT the component). 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
- *     // component at the proper time
- *     pvnode.data.hook = {
- *       insert(vn) {
- *         // the __mount method will patch the component 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 component
- *         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
- *         // component, 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
- *     // component, so we can reuse it later whenever we update the component
- *     w4.__owl__.pvnode = pvnode;
- *   });
- * } else {
- *   // this is the 'update' path of the directive.
- *   // the call to __updateProps is the actual component 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 component was destroyed in the meantime, we do nothing (so, this
- *     // means that the parent's element children list will have a null in
- *     // the component'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: "component",
-  extraNames: ["props", "keepalive", "asyncroot"],
-  priority: 100,
-  atNodeEncounter({ ctx, value, node, qweb }): boolean {
-    ctx.addLine("//COMPONENT");
-    ctx.rootContext.shouldDefineOwner = true;
-    ctx.rootContext.shouldDefineQWeb = true;
-    ctx.rootContext.shouldDefineParent = true;
-    ctx.rootContext.shouldDefineUtils = true;
-    let keepAlive = node.getAttribute("t-keepalive") ? true : false;
-    let hasDynamicProps = node.getAttribute("t-props") ? 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 componentID = 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' + ${key};`);
-    }
-    ctx.addLine(`let def${defID};`);
-    let templateID = key
-      ? `key${keyID}`
-      : ctx.inLoop
-      ? ctx.currentKey
-        ? `String(${ctx.currentKey} + '_k_' + i + '_c_' + ${componentID} )`
-        : `String(-${componentID} - i)`
-      : String(componentID);
-    if (ctx.allowMultipleRoots) {
-      templateID = `"_slot_${templateID}"`;
-    }
-    if (key || ctx.inLoop) {
-      let id = ctx.generateID();
-      ctx.addLine(`let templateId${id} = ${templateID};`);
-      templateID = `templateId${id}`;
-    }
-
-    let ref = node.getAttribute("t-ref");
-    let refExpr = "";
-    let refKey: string = "";
-    if (ref) {
-      ctx.rootContext.shouldDefineRefs = true;
-      refKey = `ref${ctx.generateID()}`;
-      ctx.addLine(`const ${refKey} = ${ctx.interpolate(ref)};`);
-      refExpr = `context.__owl__.refs[${refKey}] = w${componentID};`;
-    }
-    let transitionsInsertCode = "";
-    if (transition) {
-      transitionsInsertCode = `utils.transitionInsert(vn, '${transition}');`;
-    }
-    let finalizeComponentCode = `w${componentID}.${keepAlive ? "unmount" : "destroy"}();`;
-    if (ref && !keepAlive) {
-      finalizeComponentCode += `delete context.__owl__.refs[${refKey}];`;
-    }
-    if (transition) {
-      finalizeComponentCode = `let finalize = () => {
-          ${finalizeComponentCode}
-        };
-        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 classObj = "";
-    if (classAttr || tattClass || styleAttr || tattStyle || events.length) {
-      if (classAttr) {
-        let classDef = classAttr
-          .trim()
-          .split(/\s+/)
-          .map(a => `'${a}':true`)
-          .join(",");
-        classObj = `_${ctx.generateID()}`;
-        ctx.addLine(`let ${classObj} = {${classDef}};`);
-      }
-      if (tattClass) {
-        let tattExpr = ctx.formatExpression(tattClass);
-        if (tattExpr[0] !== "{" || tattExpr[tattExpr.length - 1] !== "}") {
-          tattExpr = `utils.toObj(${tattExpr})`;
-        }
-        if (classAttr) {
-          ctx.addLine(`Object.assign(${classObj}, ${tattExpr})`);
-        } else {
-          classObj = `_${ctx.generateID()}`;
-          ctx.addLine(`let ${classObj} = ${tattExpr};`);
-        }
-      }
-      let eventsCode = events
-        .map(function([eventName, mods, handlerName, extraArgs]) {
-          let params = "owner";
-          if (extraArgs) {
-            if (ctx.inLoop) {
-              let argId = ctx.generateID();
-              // we need to evaluate the arguments now, because the handler will
-              // be set asynchronously later when the widget is ready, and the
-              // context might be different.
-              ctx.addLine(`let arg${argId} = ${ctx.formatExpression(extraArgs)};`);
-              params = `owner, arg${argId}`;
-            } else {
-              params = `owner, ${ctx.formatExpression(extraArgs)}`;
-            }
-          }
-          let handler;
-          if (mods.length > 0) {
-            handler = `function (e) {`;
-            handler += mods
-              .map(function(mod) {
-                return T_COMPONENT_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){${styleCode}${eventsCode}}};`;
-    }
-
-    ctx.addLine(
-      `let w${componentID} = ${templateID} in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[${templateID}]] : false;`
-    );
-    if (ctx.parentNode) {
-      ctx.addLine(`let _${dummyID}_index = c${ctx.parentNode}.length;`);
-    }
-    let shouldProxy = false;
-    if (async || keepAlive) {
-      ctx.addLine(
-        `const fiber${componentID} = Object.assign(Object.create(extra.fiber), {patchQueue: []});`
-      );
-    }
-    if (async) {
-      ctx.addLine(
-        `c${ctx.parentNode}.push(w${componentID} && w${componentID}.__owl__.pvnode || null);`
-      );
-    } else {
-      if (ctx.parentNode) {
-        ctx.addLine(`c${ctx.parentNode}.push(null);`);
-      } else {
-        let id = ctx.generateID();
-        ctx.rootContext.rootNode = id;
-        shouldProxy = true;
-        ctx.rootContext.shouldDefineResult = true;
-        ctx.addLine(`let vn${id} = {};`);
-        ctx.addLine(`result = vn${id};`);
-      }
-    }
-    if (hasDynamicProps) {
-      const dynamicProp = ctx.formatExpression(node.getAttribute("t-props")!);
-      ctx.addLine(`let props${componentID} = Object.assign({${propStr}}, ${dynamicProp});`);
-    } else {
-      ctx.addLine(`let props${componentID} = {${propStr}};`);
-    }
-    ctx.addIf(
-      `w${componentID} && w${componentID}.__owl__.currentFiber && !w${componentID}.__owl__.vnode`
-    );
-    ctx.addIf(
-      `utils.shallowEqual(props${componentID}, w${componentID}.__owl__.currentFiber.props)`
-    );
-    ctx.addLine(`def${defID} = w${componentID}.__owl__.currentFiber.promise;`);
-    ctx.addElse();
-    ctx.addLine(`w${componentID}.destroy();`);
-    ctx.addLine(`w${componentID} = false;`);
-    ctx.closeIf();
-    ctx.closeIf();
-
-    ctx.addIf(`!w${componentID}`);
-    // new component
-    let dynamicFallback = "";
-    if (!value.match(INTERP_REGEXP)) {
-      dynamicFallback = `|| ${ctx.formatExpression(value)}`;
-    }
-    const interpValue = ctx.interpolate(value);
-    ctx.addLine(`let componentKey${componentID} = ${interpValue};`);
-    ctx.addLine(
-      `let W${componentID} = context.constructor.components[componentKey${componentID}] || QWeb.components[componentKey${componentID}]${dynamicFallback};`
-    );
-
-    // maybe only do this in dev mode...
-    ctx.addLine(
-      `if (!W${componentID}) {throw new Error('Cannot find the definition of component "' + componentKey${componentID} + '"')}`
-    );
-    if (QWeb.dev) {
-      ctx.addLine(`utils.validateProps(W${componentID}, props${componentID})`);
-    }
-    ctx.addLine(`w${componentID} = new W${componentID}(parent, props${componentID});`);
-    ctx.addLine(`parent.__owl__.cmap[${templateID}] = w${componentID}.__owl__.id;`);
-
-    // SLOTS
-    const varDefs: string[] = [];
-    const hasSlots = node.childNodes.length;
-    if (hasSlots) {
-      ctx.rootContext.shouldTrackScope = true;
-      for (let v of Object.values(ctx.variables)) {
-        if (v["id"]) {
-          varDefs.push(v["id"]);
-        }
-      }
-
-      const clone = <Element>node.cloneNode(true);
-      const slotNodes = clone.querySelectorAll("[t-set]");
-      const slotId = QWeb.nextSlotId++;
-      ctx.addLine(`w${componentID}.__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, ctx);
-          QWeb.slots[`${slotId}_${key}`] = slotFn;
-        }
-      }
-      if (clone.childNodes.length) {
-        const t = clone.ownerDocument!.createElement("t");
-        for (let child of Object.values(clone.childNodes)) {
-          t.appendChild(child);
-        }
-        const slotFn = qweb._compile(`slot_default_template`, t, ctx);
-        QWeb.slots[`${slotId}_default`] = slotFn;
-      }
-    }
-
-    let scopeVars;
-    if (hasSlots) {
-      let scope = ctx.scopeVars.length ? `Object.assign({}, scope)` : `{}`;
-      let vars = varDefs.length ? `{${varDefs.join(",")}}` : "undefined";
-      scopeVars = `${scope}, ${vars}`;
-    } else {
-      scopeVars = "undefined, undefined";
-    }
-    ctx.addLine(`def${defID} = w${componentID}.__prepare(extra.fiber, ${scopeVars});`);
-    // hack: specify empty remove hook to prevent the node from being removed from the DOM
-    let registerCode = `c${ctx.parentNode}[_${dummyID}_index]=pvnode;`;
-    if (shouldProxy) {
-      registerCode = `utils.defineProxy(vn${ctx.rootNode}, pvnode);`;
-    }
-    ctx.addLine(
-      `def${defID} = def${defID}.then(vnode=>{if (w${componentID}.__owl__.isDestroyed){return}${createHook}let pvnode=h(vnode.sel, {key: ${templateID}, hook: {insert(vn) {let nvn=w${componentID}.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;${refExpr}${transitionsInsertCode}},remove() {},destroy(vn) {${finalizeComponentCode}}}});${registerCode}w${componentID}.__owl__.pvnode = pvnode;});`
-    );
-
-    ctx.addElse();
-    // need to update component
-    let patchQueueCode = async || keepAlive ? `fiber${componentID}` : "extra.fiber";
-    if (keepAlive) {
-      // if we have t-keepalive="1", the component could be unmounted, but then
-      // we __updateProps is called.  This is ok, but we do not want to call
-      // the willPatch/patched hooks of the component in this case, so we
-      // disable the patch queue
-      patchQueueCode = `w${componentID}.__owl__.isMounted ? extra.fiber : fiber${componentID}`;
-    }
-    if (QWeb.dev) {
-      ctx.addLine(`utils.validateProps(w${componentID}.constructor, props${componentID})`);
-    }
-    ctx.addLine(
-      `def${defID} = def${defID} || w${componentID}.__updateProps(props${componentID}, ${patchQueueCode}${scopeVars &&
-        ", " + scopeVars});`
-    );
-    let keepAliveCode = "";
-    if (keepAlive) {
-      keepAliveCode = `pvnode.data.hook.insert = vn => {vn.elm.parentNode.replaceChild(w${componentID}.el,vn.elm);vn.elm=w${componentID}.el;w${componentID}.__remount();};`;
-    }
-    ctx.addLine(
-      `def${defID} = def${defID}.then(()=>{if (w${componentID}.__owl__.isDestroyed) {return};${
-        tattStyle ? `w${componentID}.el.style=${tattStyle};` : ""
-      }let pvnode=w${componentID}.__owl__.pvnode;${keepAliveCode}${registerCode}});`
-    );
-    ctx.closeIf();
-
-    if (classObj) {
-      ctx.addLine(`w${componentID}.__owl__.classObj=${classObj};`);
-    }
-
-    if (async) {
-      ctx.addLine(
-        `def${defID}.then(w${componentID}.__applyPatchQueue.bind(w${componentID}, fiber${componentID}));`
-      );
-    } 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;
-  }
-});

src/component/props_validation.ts

@@ -1,96 +0,0 @@
-import { QWeb } from "../qweb/index";
-
-//------------------------------------------------------------------------------
-// Prop validation helper
-//------------------------------------------------------------------------------
-
-/**
- * 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.
- */
-
-QWeb.utils.validateProps = function(Widget, props: Object) {
-  const propsDef = (<any>Widget).props;
-  if (propsDef instanceof Array) {
-    // list of strings (prop names)
-    for (let i = 0, l = propsDef.length; i < l; i++) {
-      const propName = propsDef[i];
-      if (propName[propName.length - 1] === "?") {
-        // optional prop
-        break;
-      }
-      if (!props[propName]) {
-        throw new Error(`Missing props '${propsDef[i]}' (component '${Widget.name}')`);
-      }
-    }
-    for (let key in props) {
-      if (!propsDef.includes(key) && !propsDef.includes(key + "?")) {
-        throw new Error(`Unknown prop '${key}' given to component '${Widget.name}'`);
-      }
-    }
-  } else if (propsDef) {
-    // propsDef is an object now
-    for (let propName in propsDef) {
-      if (props[propName] === undefined) {
-        if (propsDef[propName] && !propsDef[propName].optional) {
-          throw new Error(`Missing props '${propName}' (component '${Widget.name}')`);
-        } else {
-          break;
-        }
-      }
-      let isValid = isValidProp(props[propName], propsDef[propName]);
-      if (!isValid) {
-        throw new Error(`Props '${propName}' of invalid type in component '${Widget.name}'`);
-      }
-    }
-    for (let propName in props) {
-      if (!(propName in propsDef)) {
-        throw new Error(`Unknown prop '${propName}' given to component '${Widget.name}'`);
-      }
-    }
-  }
-};
-
-/**
- * Check if an invidual prop value matches its (static) prop definition
- */
-function isValidProp(prop, propDef): boolean {
-  if (propDef === true) {
-    return true;
-  }
-  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/core/event_bus.ts

@@ -1,79 +0,0 @@
-/**
- * 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 component 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/core/observer.ts

@@ -1,109 +0,0 @@
-/**
- * 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 and arrays are observed by replacing them with a Proxy
- * - each object/array metadata are tracked in a weakmap, and keep a revision
- *   number
- *
- * Note that this code is loosely inspired by Vue.
- */
-
-//------------------------------------------------------------------------------
-// Observer
-//------------------------------------------------------------------------------
-export class Observer {
-  rev: number = 1;
-  allowMutations: boolean = true;
-  dirty: boolean = false;
-  weakMap: WeakMap<any, any> = new WeakMap();
-
-  notifyCB() {}
-  async notifyChange() {
-    this.dirty = true;
-    await Promise.resolve();
-    if (this.dirty) {
-      this.dirty = false;
-      this.notifyCB();
-    }
-  }
-
-  observe<T>(value: T, parent?: any): T {
-    if (value === null || typeof value !== "object" || value instanceof Date) {
-      // fun fact: typeof null === 'object'
-      return value;
-    }
-    let metadata = this.weakMap.get(value) || this._observe(value, parent);
-    return metadata.proxy;
-  }
-
-  revNumber(value): number {
-    const metadata = this.weakMap.get(value);
-    return metadata ? metadata.rev : 0;
-  }
-  deepRevNumber(value): number {
-    const metadata = this.weakMap.get(value);
-    return metadata ? metadata.deepRev : 0;
-  }
-
-  _observe(value, parent) {
-    var self = this;
-
-    const proxy = new Proxy(value, {
-      get(target, k) {
-        const targetValue = target[k];
-        return self.observe(targetValue, value);
-      },
-      set(target, key: string, newVal): boolean {
-        const value = target[key];
-        if (newVal !== value) {
-          if (!self.allowMutations) {
-            throw new Error(
-              `Observed state cannot be changed here! (key: "${key}", val: "${newVal}")`
-            );
-          }
-          self._updateRevNumber(target);
-          target[key] = newVal;
-          self.notifyChange();
-        }
-        return true;
-      },
-      deleteProperty(target, key) {
-        if (key in target) {
-          delete target[key];
-          self._updateRevNumber(target);
-          self.notifyChange();
-        }
-        return true;
-      }
-    });
-
-    const metadata = {
-      value,
-      proxy,
-      rev: this.rev,
-      deepRev: this.rev,
-      parent
-    };
-
-    this.weakMap.set(value, metadata);
-    this.weakMap.set(metadata.proxy, metadata);
-    return metadata;
-  }
-
-  _updateRevNumber(target: any) {
-    this.rev++;
-    let metadata = this.weakMap.get(target);
-    metadata.rev!++;
-    let parent = target;
-    do {
-      metadata = this.weakMap.get(parent);
-      metadata.deepRev++;
-    } while ((parent = metadata.parent) && parent !== target);
-  }
-}

src/hooks.ts

@@ -1,83 +0,0 @@
-import { Component } from "./component/component";
-import { Observer } from "./core/observer";
-
-/**
- * Owl Hook System
- *
- * This file introduces the concept of hooks, similar to React or Vue hooks.
- * We have currently an implementation of:
- * - useState (reactive state)
- * - onMounted
- * - onWillUnmount
- * - useRef
- */
-
-/**
- * useState hook
- *
- * This is the main way a component can be made reactive.  The useState hook
- * will return an observed object (or array).  Changes to that value will then
- * trigger a rerendering of the current component.
- */
-export function useState<T>(state: T): T {
-  const component: Component<any, any> = Component._current;
-  const __owl__ = component.__owl__;
-  if (!__owl__.observer) {
-    __owl__.observer = new Observer();
-    __owl__.observer.notifyCB = component.render.bind(component);
-  }
-  return __owl__.observer.observe(state);
-}
-
-/**
- * Mounted hook. The callback will be called when the current component is
- * mounted.  Note that the component mounted method is called first.
- */
-let nextID = 1;
-
-export function onMounted(cb) {
-  const component: Component<any, any> = Component._current;
-  component.__owl__.mountedHandlers[`h${nextID++}`] = cb;
-}
-
-/**
- * willUnmount hook. The callback will be called when the current component is
- * willUnmounted.  Note that the component mounted method is called last.
- */
-export function onWillUnmount(cb) {
-  const component: Component<any, any> = Component._current;
-  if (component.__owl__.willUnmountCB) {
-    const current = component.__owl__.willUnmountCB;
-    component.__owl__.willUnmountCB = function() {
-      cb.call(component);
-      current.call(component);
-    };
-  } else {
-    component.__owl__.willUnmountCB = cb;
-  }
-}
-
-/**
- * useRef hook
- *
- * The purpose of this hook is to allow components to get a reference to a sub
- * html node or component.
- */
-interface Ref {
-  el: HTMLElement | null;
-  comp: Component<any, any> | null;
-}
-
-export function useRef(name: string): Ref {
-  const __owl__ = Component._current.__owl__;
-  return {
-    get el(): HTMLElement | null {
-      const val = __owl__.refs && __owl__.refs[name];
-      return val instanceof HTMLElement ? val : null;
-    },
-    get comp(): Component<any, any> | null {
-      const val = __owl__.refs && __owl__.refs[name];
-      return val instanceof Component ? val : null;
-    }
-  };
-}

src/index.ts

@@ -1,46 +0,0 @@
-/**
- * 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
- */
-import { EventBus } from "./core/event_bus";
-import { Observer } from "./core/observer";
-import { QWeb } from "./qweb/index";
-import { ConnectedComponent } from "./store/connected_component";
-import { Store } from "./store/store";
-import * as _utils from "./utils";
-import * as _tags from "./tags";
-import * as _hooks from "./hooks";
-import { Link } from "./router/Link";
-import { RouteComponent } from "./router/RouteComponent";
-import { Router } from "./router/Router";
-
-export { Component } from "./component/component";
-export { QWeb };
-
-export const useState = _hooks.useState;
-export const core = { EventBus, Observer };
-export const router = { Router, RouteComponent, Link };
-export const store = { Store, ConnectedComponent };
-export const utils = _utils;
-export const tags = _tags;
-export const hooks = _hooks;
-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.`);
-    }
-  }
-});

src/qweb/base_directives.ts

@@ -1,360 +0,0 @@
-import { Context } from "./context";
-import { QWebExprVar } from "./expression_parser";
-import { QWeb } from "./qweb";
-
-/**
- * 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
-//------------------------------------------------------------------------------
-QWeb.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}};`);
-      ctx.addLine(`result = vn${nodeID}`);
-    }
-  } else {
-    let fragID = ctx.generateID();
-    ctx.rootContext.shouldDefineUtils = true;
-    ctx.addLine(`var frag${fragID} = 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);
-      ctx = ctx.subContext("currentKey", ctx.lastNodeKey);
-    }
-    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);
-      ctx = ctx.subContext("currentKey", ctx.lastNodeKey);
-    }
-    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;
-    tempCtx.allowMultipleRoots = true;
-    qweb._compileNode(nodeCopy, tempCtx);
-    const vars = Object.assign({}, ctx.variables, tempCtx.variables);
-    ctx.rootContext.nextID = tempCtx.nextID;
-
-    const templateMap = Object.create(ctx.templates);
-    // open new scope, if necessary
-    const hasNewVariables = Object.keys(tempCtx.variables).length > 0;
-
-    // compile sub template
-    let subCtx = ctx.subContext("caller", nodeCopy).subContext("variables", Object.create(vars));
-    subCtx = subCtx.subContext("templates", templateMap);
-
-    if (templateMap[subTemplate]) {
-      // OUCH, IT IS A RECURSIVE TEMPLATE SITUATION...
-      // This is a tricky situation... We obviously cannot inline the compiled
-      // template. So, what we need to do is to compile it, and make sure we
-      // properly transfer everything from the current scope to the sub template.
-      ctx.rootContext.shouldTrackScope = true;
-      ctx.rootContext.shouldDefineOwner = true;
-      let subTemplateName;
-      if (ctx.hasParentWidget) {
-        subTemplateName = ctx.templateName;
-      } else {
-        subTemplateName = `__${ctx.generateID()}`;
-        subCtx.variables = {};
-        let id = 0;
-        for (let v in vars) {
-          subCtx.variables[v] = vars[v];
-          (vars[v] as any).id = `_v${id++}`;
-        }
-        const subTemplateFn = qweb._compile(subTemplateName, nodeTemplate.elem, subCtx);
-        qweb.recursiveFns[subTemplateName] = subTemplateFn;
-      }
-      let varCode = `{}`;
-      if (Object.keys(vars).length) {
-        let id = 0;
-        const content = Object.values(vars)
-          .map((v: any) => `_v${id++}: ${v.expr}`)
-          .join(",");
-        varCode = `{${content}}`;
-      }
-      ctx.addLine(
-        `this.recursiveFns['${subTemplateName}'].call(this, context, Object.assign({}, extra, {parentNode: c${ctx.parentNode}, fiber: {vars: ${varCode}, scope}}));`
-      );
-      return true;
-    }
-    templateMap[subTemplate] = true;
-
-    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...
-      }
-    }
-    qweb._compileNode(nodeTemplate.elem, subCtx);
-
-    // close new scope
-    if (hasNewVariables) {
-      ctx.dedent();
-      ctx.addLine("}");
-    }
-
-    if (node.hasAttribute("t-if") || node.hasAttribute("t-else") || node.hasAttribute("t-elif")) {
-      ctx.closeIf();
-    }
-
-    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.addToScope(name + "_first", "i === 0");
-    ctx.addToScope(name + "_last", `i === _length${keysID} - 1`);
-    ctx.addToScope(name + "_index", "i");
-    ctx.addToScope(name, `_${keysID}[i]`);
-    ctx.addToScope(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-component") && !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: 1,
-  atNodeEncounter({ ctx }) {
-    ctx.addLine("debugger;");
-  }
-});
-
-//------------------------------------------------------------------------------
-// t-log
-//------------------------------------------------------------------------------
-QWeb.addDirective({
-  name: "log",
-  priority: 1,
-  atNodeEncounter({ ctx, value }) {
-    const expr = ctx.formatExpression(value);
-    ctx.addLine(`console.log(${expr})`);
-  }
-});

src/qweb/context.ts

@@ -1,179 +0,0 @@
-import { compileExpr, QWebVar } from "./expression_parser";
-
-export const INTERP_REGEXP = /\{\{.*?\}\}/g;
-//------------------------------------------------------------------------------
-// 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;
-  shouldDefineParent: boolean = false;
-  shouldDefineQWeb: boolean = false;
-  shouldDefineUtils: boolean = false;
-  shouldDefineRefs: boolean = false;
-  shouldDefineResult: boolean = true;
-  shouldProtectContext: boolean = false;
-  shouldTrackScope: boolean = false;
-  inLoop: boolean = false;
-  inPreTag: boolean = false;
-  templateName: string;
-  allowMultipleRoots: boolean = false;
-  hasParentWidget: boolean = false;
-  scopeVars: any[] = [];
-  currentKey: string = "";
-  lastNodeKey: string = ""; // temp variable to communicate to previous caller
-  templates: { [key: string]: boolean } = {};
-
-  constructor(name?: string) {
-    this.rootContext = this;
-    this.templateName = name || "noname";
-    this.templates[this.templateName] = true;
-    this.addLine("var h = this.h;");
-  }
-
-  generateID(): number {
-    const id = this.rootContext.nextID++;
-    return id;
-  }
-
-  generateCode(): string[] {
-    const shouldTrackScope = this.shouldTrackScope && this.scopeVars.length;
-    if (shouldTrackScope) {
-      // add some vars to scope if needed
-      for (let scopeVar of this.scopeVars.reverse()) {
-        let { index, key, indent } = scopeVar;
-        const prefix = new Array(indent + 2).join("    ");
-        this.code.splice(index + 1, 0, prefix + `scope.${key} = context.${key};`);
-      }
-      this.code.unshift("    const scope = Object.create(null);");
-    }
-    if (this.shouldProtectContext) {
-      this.code.unshift("    context = Object.create(context);");
-    }
-    if (this.shouldDefineResult) {
-      this.code.unshift("    let result;");
-    }
-    if (this.shouldDefineRefs) {
-      this.code.unshift("    context.__owl__.refs = context.__owl__.refs || {};");
-    }
-    if (this.shouldDefineOwner) {
-      // this is necessary to prevent some directives (t-forach for ex) to
-      // pollute the rendering context by adding some keys in it.
-      this.code.unshift("    let owner = context;");
-    }
-    if (this.shouldDefineParent) {
-      if (this.hasParentWidget) {
-        this.code.unshift("    let parent = extra.parent;");
-      } else {
-        this.code.unshift("    let parent = context;");
-      }
-    }
-    if (this.shouldDefineQWeb) {
-      this.code.unshift("    let QWeb = this.constructor;");
-    }
-    if (this.shouldDefineUtils) {
-      this.code.unshift("    let utils = this.constructor.utils;");
-    }
-    return this.code;
-  }
-
-  withParent(node: number): Context {
-    if (
-      !this.allowMultipleRoots &&
-      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;
-    }
-    if (!this.parentNode) {
-      this.addLine(`result = vn${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): number {
-    const prefix = new Array(this.indentLevel + 2).join("    ");
-    this.code.push(prefix + line);
-    return this.code.length - 1;
-  }
-
-  addToScope(key: string, expr: string) {
-    const index = this.addLine(`context.${key} = ${expr};`);
-    this.rootContext.scopeVars.push({ index, key, indent: this.indentLevel });
-  }
-
-  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(INTERP_REGEXP);
-    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/expression_parser.ts

@@ -1,264 +0,0 @@
-/**
- * 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

@@ -1,287 +0,0 @@
-import { VNode } from "../vdom/index";
-import { QWeb } from "./qweb";
-
-/**
- * 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-mounted
- * - t-slot
- * - t-model
- */
-
-//------------------------------------------------------------------------------
-// t-on
-//------------------------------------------------------------------------------
-// these are pieces of code that will be injected into the event handler if
-// modifiers are specified
-export 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 }) {
-    ctx.rootContext.shouldDefineRefs = true;
-    const refKey = `ref${ctx.generateID()}`;
-    ctx.addLine(`const ${refKey} = ${ctx.interpolate(value)};`);
-    addNodeHook("create", `context.__owl__.refs[${refKey}] = n.elm;`);
-  }
-});
-
-//------------------------------------------------------------------------------
-// t-transition
-//------------------------------------------------------------------------------
-QWeb.utils.nextFrame = function(cb: () => void) {
-  requestAnimationFrame(() => requestAnimationFrame(cb));
-};
-
-QWeb.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);
-  });
-};
-
-QWeb.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({ ctx, value, addNodeHook }) {
-    ctx.rootContext.shouldDefineUtils = true;
-    let name = value;
-    const hooks = {
-      insert: `utils.transitionInsert(vn, '${name}');`,
-      remove: `utils.transitionRemove(vn, '${name}', rm);`
-    };
-    for (let hookName in hooks) {
-      addNodeHook(hookName, hooks[hookName]);
-    }
-  }
-});
-
-//------------------------------------------------------------------------------
-// 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.rootContext.shouldDefineOwner = true;
-    ctx.addLine(
-      `const slot${slotKey} = this.constructor.slots[context.__owl__.slotId + '_' + '${value}'];`
-    );
-    ctx.addIf(`slot${slotKey}`);
-    ctx.addLine(
-      `slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c${ctx.parentNode}, vars: extra.vars, parent: owner}));`
-    );
-    ctx.closeIf();
-    return true;
-  }
-});
-
-//------------------------------------------------------------------------------
-// t-model
-//------------------------------------------------------------------------------
-QWeb.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, addNodeHook }) {
-    const type = node.getAttribute("type");
-    let handler;
-    let event = fullName.includes(".lazy") ? "change" : "input";
-    const expr = ctx.formatExpression(value);
-    if (node.tagName === "select") {
-      ctx.addLine(`p${nodeID}.props = {value: ${expr}};`);
-      addNodeHook("create", `n.elm.value=${expr};`);
-      event = "change";
-      handler = `(ev) => {${expr} = ev.target.value}`;
-    } else if (type === "checkbox") {
-      ctx.addLine(`p${nodeID}.props = {checked: ${expr}};`);
-      handler = `(ev) => {${expr} = ev.target.checked}`;
-    } else if (type === "radio") {
-      const nodeValue = node.getAttribute("value")!;
-      ctx.addLine(`p${nodeID}.props = {checked:${expr} === '${nodeValue}'};`);
-      handler = `(ev) => {${expr} = ev.target.value}`;
-      event = "click";
-    } else {
-      ctx.addLine(`p${nodeID}.props = {value: ${expr}};`);
-      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) => {${expr} = ${valueCode}}`;
-    }
-    ctx.addLine(
-      `extra.handlers['${event}' + ${nodeID}] = extra.handlers['${event}' + ${nodeID}] || (${handler});`
-    );
-    ctx.addLine(`p${nodeID}.on['${event}'] = extra.handlers['${event}' + ${nodeID}];`);
-  }
-});

src/qweb/index.ts

@@ -1,4 +0,0 @@
-import "./base_directives";
-import "./extensions";
-
-export { CompiledTemplate, QWeb } from "./qweb";

src/qweb/qweb.ts

@@ -1,733 +0,0 @@
-import { EventBus } from "../core/event_bus";
-import { h, patch, VNode } from "../vdom/index";
-import { Context } from "./context";
-import { shallowEqual } from "../utils";
-import { addNS } from "../vdom/vdom";
-
-/**
- * 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 NODE_HOOKS_PARAMS = {
-  create: "(_, n)",
-  insert: "vn",
-  remove: "(vn, rm)"
-};
-
-interface Utils {
-  toObj(expr: any): Object;
-  shallowEqual(p1: Object, p2: Object): boolean;
-  [key: string]: any;
-}
-
-const UTILS: Utils = {
-  toObj(expr) {
-    if (typeof expr === "string") {
-      expr = expr.trim();
-      if (!expr) {
-        return {};
-      }
-      let words = expr.split(/\s+/);
-      let result = {};
-      for (let i = 0; i < words.length; i++) {
-        result[words[i]] = true;
-      }
-      return result;
-    }
-    return expr;
-  },
-  shallowEqual,
-  addNameSpace(vnode) {
-    addNS(vnode.data, vnode.children, vnode.sel);
-  }
-};
-
-function parseXML(xml: string): Document {
-  const parser = new DOMParser();
-
-  // we remove comments from the xml string
-  xml = xml.replace(/<!--[\s\S]*?-->/g, "");
-  const doc = parser.parseFromString(xml, "text/xml");
-  if (doc.getElementsByTagName("parsererror").length) {
-    let msg = "Invalid XML in template.";
-    const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
-    if (parsererrorText) {
-      msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
-      const re = /\d+/g;
-      const firstMatch = re.exec(parsererrorText);
-      if (firstMatch) {
-        const lineNumber = Number(firstMatch[0]);
-        const line = xml.split("\n")[lineNumber - 1];
-        const secondMatch = re.exec(parsererrorText);
-        if (line && secondMatch) {
-          const columnIndex = Number(secondMatch[0]) - 1;
-          if (line[columnIndex]) {
-            msg +=
-              `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
-              `${line}\n${"-".repeat(columnIndex - 1)}^`;
-          }
-        }
-      }
-    }
-    throw new Error(msg);
-  }
-  return doc;
-}
-
-//------------------------------------------------------------------------------
-// QWeb rendering engine
-//------------------------------------------------------------------------------
-export class QWeb extends EventBus {
-  templates: { [name: string]: Template };
-  static utils = UTILS;
-  static components = Object.create(null);
-
-  static DIRECTIVE_NAMES: { [key: string]: 1 } = {
-    name: 1,
-    att: 1,
-    attf: 1,
-    key: 1
-  };
-  static DIRECTIVES: Directive[] = [];
-
-  static TEMPLATES: { [name: string]: Template } = {};
-
-  static nextId: number = 1;
-
-  h = h;
-  // dev mode enables better error messages or more costly validations
-  static dev: boolean = false;
-
-  // slots contains sub templates defined with t-set inside t-component nodes, and
-  // are meant to be used by the t-slot directive.
-  static slots = {};
-  static nextSlotId = 1;
-
-  // recursiveTemplates contains sub templates called with t-call, but which
-  // ends up in recursive situations.  This is very similar to the slot situation,
-  // as in we need to propagate the scope.
-  recursiveFns = {};
-
-  isUpdating: boolean = false;
-
-  constructor(data?: string) {
-    super();
-    this.templates = Object.create(QWeb.TEMPLATES);
-    if (data) {
-      this.addTemplates(data);
-    }
-  }
-
-  static addDirective(directive: Directive) {
-    if (directive.name in QWeb.DIRECTIVE_NAMES) {
-      throw new Error(`Directive "${directive.name} already registered`);
-    }
-    QWeb.DIRECTIVES.push(directive);
-    QWeb.DIRECTIVE_NAMES[directive.name] = 1;
-    QWeb.DIRECTIVES.sort((d1, d2) => d1.priority - d2.priority);
-    if (directive.extraNames) {
-      directive.extraNames.forEach(n => (QWeb.DIRECTIVE_NAMES[n] = 1));
-    }
-  }
-
-  static registerComponent(name: string, Component: any) {
-    if (QWeb.components[name]) {
-      throw new Error(`Component '${name}' has already been registered`);
-    }
-    QWeb.components[name] = Component;
-  }
-
-  /**
-   * Register globally a template.  All QWeb instances will obtain their
-   * templates from their own template map, and then, from the global static
-   * TEMPLATES property.
-   */
-  static registerTemplate(name: string, template: string) {
-    if (QWeb.TEMPLATES[name]) {
-      throw new Error(`Template '${name}' has already been registered`);
-    }
-    const qweb = new QWeb();
-    qweb.addTemplate(name, template);
-    QWeb.TEMPLATES[name] = qweb.templates[name];
-  }
-
-  /**
-   * Add a template to the internal template map.  Note that it is not
-   * immediately compiled.
-   */
-  addTemplate(name: string, xmlString: string, allowDuplicate?: boolean) {
-    if (allowDuplicate && name in this.templates) {
-      return;
-    }
-    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 or xml document).  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 | Document) {
-    const doc = typeof xmlstr === "string" ? parseXML(xmlstr) : 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: function(this: QWeb, 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);
-  }
-
-  /**
-   * Render a template to a html string.
-   *
-   * Note that this is more limited than the `render` method: it is not suitable
-   * to render a full component tree, since this is an asynchronous operation.
-   * This method can only render templates without components.
-   */
-  renderToString(name: string, context: EvalContext = {}, extra?: any): string {
-    const vnode = this.render(name, context, extra);
-    if (vnode.sel === undefined) {
-      return vnode.text!;
-    }
-    const node = document.createElement(vnode.sel);
-    const result = patch(node, vnode);
-    return (<HTMLElement>result.elm).outerHTML;
-  }
-
-  /**
-   * Force all widgets connected to this QWeb instance to rerender themselves.
-   *
-   * This method is mostly useful for external code that want to modify the
-   * application in some cases.  For example, a router plugin.
-   */
-  forceUpdate() {
-    this.isUpdating = true;
-    Promise.resolve().then(() => {
-      if (this.isUpdating) {
-        this.isUpdating = false;
-        this.trigger("update");
-      }
-    });
-  }
-
-  _compile(name: string, elem: Element, parentContext?: Context): CompiledTemplate {
-    const isDebug = elem.attributes.hasOwnProperty("t-debug");
-    const ctx = new Context(name);
-    if (elem.tagName !== "t") {
-      ctx.shouldDefineResult = false;
-    }
-    if (parentContext) {
-      ctx.templates = Object.create(parentContext.templates);
-      ctx.variables = Object.create(parentContext.variables);
-      ctx.nextID = parentContext.nextID + 1;
-      ctx.parentNode = parentContext.parentNode || ctx.nextID++;
-      ctx.allowMultipleRoots = true;
-      ctx.hasParentWidget = true;
-      ctx.shouldDefineResult = false;
-      ctx.addLine(`let c${ctx.parentNode} = extra.parentNode;`);
-
-      for (let v in parentContext.variables) {
-        let variable = <any>parentContext.variables[v];
-        if (variable.id) {
-          ctx.addLine(`let ${variable.id} = extra.fiber.vars.${variable.id}`);
-        }
-      }
-    }
-    if (parentContext) {
-      ctx.addLine("    Object.assign(context, extra.fiber.scope);");
-    }
-    this._compileNode(elem, ctx);
-
-    if (!parentContext) {
-      if (ctx.shouldDefineResult) {
-        ctx.addLine(`return result;`);
-      } else {
-        if (!ctx.rootNode) {
-          throw new Error(`A template should have one root node (${ctx.templateName})`);
-        }
-        ctx.addLine(`return vn${ctx.rootNode};`);
-      }
-    }
-
-    let code = ctx.generateCode();
-
-    let template;
-    try {
-      template = new Function("context", "extra", code.join("\n")) as CompiledTemplate;
-    } catch (e) {
-      const templateName = ctx.templateName.replace(/`/g, "'");
-      console.groupCollapsed(`Invalid Code generated by ${templateName}`);
-      console.warn(code.join("\n"));
-      console.groupEnd();
-      throw new Error(
-        `Invalid generated code while compiling template '${templateName}': ${e.message}`
-      );
-    }
-    if (isDebug) {
-      const tpl = this.templates[name];
-      if (tpl) {
-        const msg = `Template: ${tpl.elem.outerHTML}\nCompiled code:\n${template.toString()}`;
-        console.log(msg);
-      }
-    }
-    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.addLine(`result = vn${nodeID};`);
-        ctx.rootContext.rootNode = nodeID;
-        ctx.rootContext.parentTextNode = nodeID;
-      }
-      return;
-    }
-
-    const firstLetter = node.tagName[0];
-    if (firstLetter === firstLetter.toUpperCase()) {
-      // this is a component, we modify in place the xml document to change
-      // <SomeComponent ... /> to <t t-component="SomeComponent" ... />
-      node.setAttribute("t-component", node.tagName);
-    }
-    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 QWeb.DIRECTIVE_NAMES)) {
-          throw new Error(`Unknown QWeb directive: '${attrName}'`);
-        }
-      }
-    }
-
-    const DIR_N = QWeb.DIRECTIVES.length;
-    const ATTR_N = attributes.length;
-    for (let i = 0; i < DIR_N; i++) {
-      let directive = QWeb.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);
-      ctx = ctx.subContext("currentKey", ctx.lastNodeKey);
-      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);
-    // svg support
-    // we hadd svg namespace if it is a svg or if it is a g, but only if it is
-    // the root node.  This is the easiest way to support svg sub components:
-    // they need to have a g tag as root. Otherwise, we would need a complete
-    // list of allowed svg tags.
-    const shouldAddNS =
-      node.nodeName === "svg" || (node.nodeName === "g" && ctx.rootNode === ctx.parentNode);
-    if (shouldAddNS) {
-      ctx.rootContext.shouldDefineUtils = true;
-      ctx.addLine(`utils.addNameSpace(vn${ctx.parentNode});`);
-    }
-
-    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}`);
-      }
-    }
-    let classObj = "";
-
-    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();
-        if (name === "class") {
-          let classDef = value
-            .trim()
-            .split(/\s+/)
-            .map(a => `'${a}':true`)
-            .join(",");
-          classObj = `_${ctx.generateID()}`;
-          ctx.addLine(`let ${classObj} = {${classDef}};`);
-        } else {
-          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 (attName === "class") {
-          ctx.rootContext.shouldDefineUtils = true;
-          formattedValue = `utils.toObj(${formattedValue})`;
-          if (classObj) {
-            ctx.addLine(`Object.assign(${classObj}, ${formattedValue})`);
-          } else {
-            classObj = `_${ctx.generateID()}`;
-            ctx.addLine(`let ${classObj} = ${formattedValue};`);
-          }
-        } else {
-          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) {
-      ctx.addLine(`const nodeKey${nodeID} = ${ctx.formatExpression(nodeKey)}`);
-      nodeKey = `nodeKey${nodeID}`;
-      ctx.lastNodeKey = 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 (classObj) {
-      parts.push(`class:${classObj}`);
-    }
-    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);
-      }
-    }
-  }
-}

src/router/Link.ts

@@ -1,48 +0,0 @@
-import { Component } from "../component/component";
-import { xml } from "../tags";
-import { Destination, RouterEnv } from "./Router";
-
-type Props = Destination;
-
-export class Link<Env extends RouterEnv> extends Component<Env, Props> {
-  static template = xml`
-    <a  t-att-class="{'router-link-active': isActive }"
-        t-att-href="href"
-        t-on-click="navigate">
-        <t t-slot="default"/>
-    </a>
-  `;
-
-  href: string = this.env.router.destToPath(this.props);
-
-  async willUpdateProps(nextProps) {
-    this.href = this.env.router.destToPath(nextProps);
-  }
-
-  get isActive() {
-    if (this.env.router.mode === "hash") {
-      return (<any>document.location).hash === this.href;
-    }
-    return (<any>document.location).pathname === this.href;
-  }
-
-  navigate(ev) {
-    // don't redirect with control keys
-    if (ev.metaKey || ev.altKey || ev.ctrlKey || ev.shiftKey) {
-      return;
-    }
-    // don't redirect on right click
-    if (ev.button !== undefined && ev.button !== 0) {
-      return;
-    }
-    // don't redirect if `target="_blank"`
-    if (ev.currentTarget && ev.currentTarget.getAttribute) {
-      const target = ev.currentTarget.getAttribute("target");
-      if (/\b_blank\b/i.test(target)) {
-        return;
-      }
-    }
-    ev.preventDefault();
-    this.env.router.navigate(this.props);
-  }
-}

src/router/RouteComponent.ts

@@ -1,18 +0,0 @@
-import { Component } from "../component/component";
-import { xml } from "../tags";
-
-export class RouteComponent extends Component<any, {}> {
-  static template = xml`
-    <t>
-        <t
-            t-if="routeComponent"
-            t-component="routeComponent"
-            t-key="env.router.currentRouteName"
-            t-props="env.router.currentParams" />
-    </t>
-  `;
-
-  get routeComponent(): any {
-    return this.env.router.currentRoute && this.env.router.currentRoute.component;
-  }
-}

src/router/Router.ts

@@ -1,275 +0,0 @@
-import { Env } from "../component/component";
-import { QWeb } from "../qweb/index";
-import { shallowEqual } from "../utils";
-
-type NavigationGuard = (info: {
-  env: Env;
-  to: Route | null;
-  from: Route | null;
-}) => boolean | Destination;
-
-export interface Route {
-  name: string;
-  path: string;
-  component?: any;
-  redirect?: Destination;
-  params: string[];
-  beforeRouteEnter?: NavigationGuard;
-}
-
-export type RouteParams = { [key: string]: string | number };
-
-export interface RouterEnv extends Env {
-  router: Router;
-}
-
-export interface Destination {
-  path?: string;
-  to?: string;
-  params?: RouteParams;
-}
-
-interface PositiveMatchResult {
-  type: "match";
-  route: Route;
-  params: RouteParams;
-}
-
-interface NegativeMatchResult {
-  type: "nomatch";
-}
-
-interface CancelledMatch {
-  type: "cancelled";
-}
-
-type MatchResult = PositiveMatchResult | NegativeMatchResult | CancelledMatch;
-
-interface Options {
-  mode: Router["mode"];
-}
-
-const paramRegexp = /\{\{(.*?)\}\}/;
-
-export class Router {
-  currentRoute: Route | null = null;
-  currentParams: RouteParams | null = null;
-  mode: "history" | "hash";
-
-  routes: { [id: string]: Route };
-  routeIds: string[];
-  env: RouterEnv;
-
-  constructor(env: Env, routes: Partial<Route>[], options: Options = { mode: "history" }) {
-    env.router = this;
-    this.mode = options.mode;
-    this.env = env as RouterEnv;
-
-    this.routes = {};
-    this.routeIds = [];
-    let nextId = 1;
-    for (let partialRoute of routes) {
-      if (!partialRoute.name) {
-        partialRoute.name = "__route__" + nextId++;
-      }
-      if (partialRoute.component) {
-        QWeb.registerComponent("__component__" + partialRoute.name, partialRoute.component);
-      }
-      if (partialRoute.redirect) {
-        this.validateDestination(partialRoute.redirect);
-      }
-      partialRoute.params = partialRoute.path ? findParams(partialRoute.path) : [];
-      this.routes[partialRoute.name] = partialRoute as Route;
-      this.routeIds.push(partialRoute.name);
-    }
-  }
-
-  //--------------------------------------------------------------------------
-  // Public API
-  //--------------------------------------------------------------------------
-
-  async start() {
-    (this as any)._listener = ev => this._navigate(this.currentPath(), ev);
-    window.addEventListener("popstate", (this as any)._listener);
-    if (this.mode === "hash") {
-      window.addEventListener("hashchange", (this as any)._listener);
-    }
-    const result = await this.matchAndApplyRules(this.currentPath());
-    if (result.type === "match") {
-      this.currentRoute = result.route;
-      this.currentParams = result.params;
-      const currentPath = this.routeToPath(result.route, result.params);
-      if (currentPath !== this.currentPath()) {
-        this.setUrlFromPath(currentPath);
-      }
-    }
-  }
-
-  async navigate(to: Destination): Promise<boolean> {
-    const path = this.destToPath(to);
-    return this._navigate(path);
-  }
-  async _navigate(path: string, ev?: any): Promise<boolean> {
-    const initialName = this.currentRouteName;
-    const initialParams = this.currentParams;
-    const result = await this.matchAndApplyRules(path);
-    if (result.type === "match") {
-      const finalPath = this.routeToPath(result.route, result.params);
-      const isPopStateEvent = ev && ev instanceof PopStateEvent;
-      if (!isPopStateEvent) {
-        this.setUrlFromPath(finalPath);
-      }
-      this.currentRoute = result.route;
-      this.currentParams = result.params;
-    } else if (result.type === "nomatch") {
-      this.currentRoute = null;
-      this.currentParams = null;
-    }
-    const didChange =
-      this.currentRouteName !== initialName || !shallowEqual(this.currentParams, initialParams);
-    if (didChange) {
-      this.env.qweb.forceUpdate();
-      return true;
-    }
-    return false;
-  }
-
-  destToPath(dest: Destination): string {
-    this.validateDestination(dest);
-    return dest.path || this.routeToPath(this.routes[dest.to!], dest.params!);
-  }
-
-  get currentRouteName(): string | null {
-    return this.currentRoute && this.currentRoute.name;
-  }
-
-  //--------------------------------------------------------------------------
-  // Private helpers
-  //--------------------------------------------------------------------------
-
-  private setUrlFromPath(path: string) {
-    const separator = this.mode === "hash" ? "/" : "";
-    const url = location.origin + separator + path;
-    if (url !== window.location.href) {
-      window.history.pushState({}, path, url);
-    }
-  }
-
-  private validateDestination(dest: Destination) {
-    if ((!dest.path && !dest.to) || (dest.path && dest.to)) {
-      throw new Error(`Invalid destination: ${JSON.stringify(dest)}`);
-    }
-  }
-
-  private routeToPath(route: Route, params: RouteParams): string {
-    const path = route.path;
-    const parts = path.split("/");
-    const l = parts.length;
-    for (let i = 0; i < l; i++) {
-      const part = parts[i];
-      const match = part.match(paramRegexp);
-      if (match) {
-        const key = match[1].split(".")[0];
-        parts[i] = <string>params[key];
-      }
-    }
-    const prefix = this.mode === "hash" ? "#" : "";
-    return prefix + parts.join("/");
-  }
-
-  private currentPath(): string {
-    let result = this.mode === "history" ? window.location.pathname : window.location.hash.slice(1);
-    return result || "/";
-  }
-
-  private match(path: string): MatchResult {
-    for (let routeId of this.routeIds) {
-      let route = this.routes[routeId];
-      let params = this.getRouteParams(route, path);
-      if (params) {
-        return {
-          type: "match",
-          route: route,
-          params: params
-        };
-      }
-    }
-    return { type: "nomatch" };
-  }
-
-  private async matchAndApplyRules(path: string): Promise<MatchResult> {
-    const result = this.match(path);
-    if (result.type === "match") {
-      return this.applyRules(result);
-    }
-    return result;
-  }
-
-  private async applyRules(matchResult: PositiveMatchResult): Promise<MatchResult> {
-    const route = matchResult.route;
-    if (route.redirect) {
-      const path = this.destToPath(route.redirect);
-      return this.matchAndApplyRules(path);
-    }
-    if (route.beforeRouteEnter) {
-      const result = await route.beforeRouteEnter({
-        env: this.env,
-        from: this.currentRoute,
-        to: route
-      });
-      if (result === false) {
-        return { type: "cancelled" };
-      } else if (result !== true) {
-        // we want to navigate to another destination
-        const path = this.destToPath(result);
-        return this.matchAndApplyRules(path);
-      }
-    }
-
-    return matchResult;
-  }
-
-  private getRouteParams(route: Route, path: string): RouteParams | false {
-    if (route.path === "*") {
-      return {};
-    }
-    if (path.startsWith("#")) {
-      path = path.slice(1);
-    }
-    const descrParts = route.path.split("/");
-    const targetParts = path.split("/");
-    const l = descrParts.length;
-    if (l !== targetParts.length) {
-      return false;
-    }
-    const result = {};
-    for (let i = 0; i < l; i++) {
-      const descr = descrParts[i];
-      let target: string | number = targetParts[i];
-      const match = descr.match(paramRegexp);
-      if (match) {
-        const [key, suffix] = match[1].split(".");
-        if (suffix === "number") {
-          target = parseInt(target, 10);
-        }
-        result[key] = target;
-      } else if (descr !== target) {
-        return false;
-      }
-    }
-    return result;
-  }
-}
-
-function findParams(str: string): string[] {
-  const globalParamRegexp = /\{\{(.*?)\}\}/g;
-  const result: string[] = [];
-  let m;
-  do {
-    m = globalParamRegexp.exec(str);
-    if (m) {
-      result.push(m[1].split(".")[0]);
-    }
-  } while (m);
-  return result;
-}

src/store/connected_component.ts

@@ -1,147 +0,0 @@
-import { Component, Env, Fiber } from "../component/component";
-import { VNode } from "../vdom/index";
-
-//------------------------------------------------------------------------------
-// Connect function
-//------------------------------------------------------------------------------
-
-type HashFunction = (a: any, b: any) => number;
-
-export class ConnectedComponent<T extends Env, P> extends Component<T, P> {
-  deep: boolean = true;
-  getStore(env) {
-    return env.store;
-  }
-
-  storeProps: any;
-
-  hashFunction: HashFunction = (storeProps, options) => {
-    const revFn = (this.__owl__ as any).revFn;
-    const rev = revFn(storeProps);
-    if (rev > 0) {
-      return rev;
-    }
-    let hash = 0;
-    for (let key in storeProps) {
-      const val = storeProps[key];
-      const hashVal = revFn(val);
-      if (hashVal === 0) {
-        if (val !== options.prevStoreProps[key]) {
-          options.didChange = true;
-        }
-      } else {
-        hash += hashVal;
-      }
-    }
-    return hash;
-  };
-
-  static mapStoreToProps(storeState, ownProps, getters) {
-    return {};
-  }
-
-  dispatch(name, ...payload) {
-    return (this.__owl__ as any).store.dispatch(name, ...payload);
-  }
-
-  /**
-   * Need to do this here so 'deep' can be overrided by subcomponent easily
-   */
-  async __prepareAndRender(fiber: Fiber<P>): Promise<VNode> {
-    const store = this.getStore(this.env);
-    const ownProps = this.props || {};
-    this.storeProps = (<any>this.constructor).mapStoreToProps(store.state, ownProps, store.getters);
-    const observer = store.observer;
-    const revFn = this.deep ? observer.deepRevNumber : observer.revNumber;
-    (this.__owl__ as any).store = store;
-    (this.__owl__ as any).ownProps = this.props;
-    (this.__owl__ as any).revFn = revFn.bind(observer);
-    (this.__owl__ as any).storeHash = this.hashFunction(this.storeProps, {
-      prevStoreProps: this.storeProps
-    });
-    (this.__owl__ as any).rev = observer.rev;
-    return super.__prepareAndRender(fiber);
-  }
-  /**
-   * 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() {
-    (this.__owl__ as any).store.on("update", this, this.__checkUpdate);
-    super.__callMounted();
-  }
-  __callWillUnmount() {
-    (this.__owl__ as any).store.off("update", this);
-    super.__callWillUnmount();
-  }
-  __destroy(parent: any) {
-    (this.__owl__ as any).store.off("update", this);
-    super.__destroy(parent);
-  }
-
-  async render(force: boolean = false) {
-    this.__updateStoreProps(this.props);
-
-    // this is quite technical, so this deserves some explanation.
-    // When we have a connected component, it can be updated for 3 reasons:
-    // - some internal state changes (this will go through this method)
-    // - some props changes (if a parent is changed and need to rerender itself)
-    // - a store update
-    //
-    // It is possible (with connected component and parent) to have the following
-    // situation: the parent component is rendered first (from its state change),
-    // then immediately after, it is rendered (from store update). Then, if the
-    // __checkUpdate method is immediately over, the children component will
-    // be rendered again by the store update, even though it is supposed to be
-    // destroyed by the first rendering.
-    //
-    // So, the solution is to keep the information that there is a current
-    // rendering occuring with the same store state, the same props, and return
-    // that in the __checkUpdate method.  To do this, we use the renderPromise
-    // deferred, which is not used by the component system once the
-    // component is ready, so we can use it for our own purpose.
-    (this.__owl__ as any).renderPromise = super.render(force);
-    return (this.__owl__ as any).renderPromise;
-  }
-
-  async __updateProps(nextProps: P, f, s, v) {
-    this.__updateStoreProps(nextProps);
-    return super.__updateProps(nextProps, f, s, v);
-  }
-
-  __updateStoreProps(nextProps): boolean {
-    const __owl__ = this.__owl__ as any;
-    const store = __owl__.store;
-    const observer = store.observer;
-    if (observer.rev === __owl__.rev && nextProps === __owl__.ownProps) {
-      return false;
-    }
-
-    const storeProps = (<any>this.constructor).mapStoreToProps(
-      store.state,
-      nextProps,
-      store.getters
-    );
-    const options = { prevStoreProps: this.storeProps, didChange: false };
-    const storeHash = this.hashFunction(storeProps, options);
-    this.storeProps = storeProps;
-    let didChange = options.didChange;
-    if (storeHash !== __owl__.storeHash) {
-      __owl__.storeHash = storeHash;
-      didChange = true;
-    }
-    __owl__.rev = store.observer.rev;
-    __owl__.ownProps = nextProps;
-    return didChange;
-  }
-
-  async __checkUpdate() {
-    const didChange = this.__updateStoreProps(this.props);
-    if (didChange) {
-      return this.render();
-    }
-    // see note in render method
-    return (this.__owl__ as any).renderPromise;
-  }
-}

src/store/store.ts

@@ -1,107 +0,0 @@
-import { Env } from "../component/component";
-import { EventBus } from "../core/event_bus";
-import { Observer } from "../core/observer";
-
-/**
- * Owl Store
- *
- * We have here:
- * - a Store class
- * - the ConnectedComponent class
- *
- * 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, 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
-//------------------------------------------------------------------------------
-
-export type Action = ({ state, dispatch, env, getters }, ...payload: any) => any;
-export type Getter = ({ state: any, getters }, payload?) => any;
-
-interface StoreConfig {
-  env?: Env;
-  state?: any;
-  actions?: { [name: string]: Action };
-  getters?: { [name: string]: Getter };
-}
-
-interface StoreOption {
-  debug?: boolean;
-}
-
-export class Store extends EventBus {
-  state: any;
-  actions: any;
-  mutations: any;
-  debug: boolean;
-  env: any;
-  observer: Observer;
-  getters: { [name: string]: (payload?) => any };
-
-  constructor(config: StoreConfig, options: StoreOption = {}) {
-    super();
-    this.debug = options.debug || false;
-    this.actions = config.actions;
-    this.env = config.env;
-    this.observer = new Observer();
-    this.observer.notifyCB = this.__notifyComponents.bind(this);
-    this.state = this.observer.observe(config.state || {});
-    this.getters = {};
-    if (config.getters) {
-      const firstArg = {
-        state: this.state,
-        getters: this.getters
-      };
-      for (let g in config.getters) {
-        this.getters[g] = config.getters[g].bind(this, firstArg);
-      }
-    }
-  }
-
-  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](
-      {
-        dispatch: this.dispatch.bind(this),
-        env: this.env,
-        state: this.state,
-        getters: this.getters
-      },
-      ...payload
-    );
-    return result;
-  }
-
-  /**
-   * Instead of using trigger to emit an update event, we actually implement
-   * our own function to do that.  The reason is that we need to be smarter than
-   * a simple trigger function: we need to wait for parent components to be
-   * done before doing children components.  The reason is that if an update
-   * as an effect of destroying a children, we do not want to call the
-   * mapStoreToProps function of the child, nor rendering it.
-   *
-   * This method is not optimal if we have a bunch of asynchronous components:
-   * we wait sequentially for each component to be completed before updating the
-   * next.  However, the only things that matters is that children are updated
-   * after their parents.  So, this could be optimized by being smarter, and
-   * updating all widgets concurrently, except for parents/children.
-   */
-  async __notifyComponents() {
-    const subs = this.subscriptions.update || [];
-    for (let i = 0, iLen = subs.length; i < iLen; i++) {
-      const sub = subs[i];
-      const shouldCallback = sub.owner ? sub.owner.__owl__.isMounted : true;
-      if (shouldCallback) {
-        await sub.callback.call(sub.owner);
-      }
-    }
-  }
-}

src/tags.ts

@@ -1,27 +0,0 @@
-import { QWeb } from "./qweb/index";
-
-/**
- * Owl Tags
- *
- * We have here a (very) small collection of tag functions:
- *
- * - xml
- *
- * The plan is to add a few other tags such as css, globalcss.
- */
-
-/**
- * XML tag helper for defining templates.  With this, one can simply define
- * an inline template with just the template xml:
- * ```js
- *   class A extends Component {
- *     static template = xml`<div>some template</div>`;
- *   }
- * ```
- */
-export function xml(strings, ...args) {
-  const name = `__template__${QWeb.nextId++}`;
-  const value = String.raw(strings, ...args);
-  QWeb.registerTemplate(name, value);
-  return name;
-}

src/utils.ts

@@ -1,104 +0,0 @@
-/**
- * Owl Utils
- *
- * We have here a small collection of utility functions:
- *
- * - whenReady
- * - loadJS
- * - loadTemplates
- * - escape
- * - debounce
- */
-
-export function whenReady(fn?: any) {
-  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");
-  }
-  return await result.text();
-}
-
-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);
-    }
-  };
-}
-
-export function shallowEqual(p1, p2): boolean {
-  for (let k in p1) {
-    if (p1[k] !== p2[k]) {
-      return false;
-    }
-  }
-  return true;
-}

src/vdom/index.ts

@@ -1,9 +0,0 @@
-import { attrsModule, classModule, eventListenersModule, propsModule } from "./modules";
-import { init } from "./vdom";
-//------------------------------------------------------------------------------
-// patch
-//------------------------------------------------------------------------------
-
-export { h, VNode } from "./vdom";
-
-export const patch = init([eventListenersModule, attrsModule, propsModule, classModule]);

src/vdom/modules.ts

@@ -1,234 +0,0 @@
-import { Module, VNode, VNodeData } from "./vdom";
-
-//------------------------------------------------------------------------------
-// module/props.ts
-//------------------------------------------------------------------------------
-
-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/eventlisteners.ts
-//------------------------------------------------------------------------------
-
-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
-//------------------------------------------------------------------------------
-
-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;
-
-//------------------------------------------------------------------------------
-// class.ts
-//------------------------------------------------------------------------------
-function updateClass(oldVnode: VNode, vnode: VNode): void {
-  var cur: any,
-    name: string,
-    elm: Element,
-    oldClass = (oldVnode.data as VNodeData).class,
-    klass = (vnode.data as VNodeData).class;
-
-  if (!oldClass && !klass) return;
-  if (oldClass === klass) return;
-  oldClass = oldClass || {};
-  klass = klass || {};
-
-  elm = vnode.elm as Element;
-
-  for (name in oldClass) {
-    if (!klass[name]) {
-      elm.classList.remove(name);
-    }
-  }
-  for (name in klass) {
-    cur = klass[name];
-    if (cur !== oldClass[name]) {
-      (elm.classList as any)[cur ? "add" : "remove"](name);
-    }
-  }
-}
-
-export const classModule = { create: updateClass, update: updateClass } as Module;

src/vdom/vdom.ts

@@ -1,620 +0,0 @@
-/**
- * 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;
-  }
-}
-
-type Props = Record<string, any>;
-type Attrs = Record<string, string | number | boolean>;
-type On = { [N in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[N]) => void } & {
-  [event: string]: EventListener;
-};
-
-export interface Module {
-  pre: PreHook;
-  create: CreateHook;
-  update: UpdateHook;
-  destroy: DestroyHook;
-  remove: RemoveHook;
-  post: PostHook;
-}
-
-//------------------------------------------------------------------------------
-// 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;
-}
-
-export 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;
-}
-
-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;
-}
-
-const htmlDomApi = {
-  createElement,
-  createElementNS,
-  createTextNode,
-  createComment,
-  insertBefore,
-  removeChild,
-  appendChild,
-  parentNode,
-  nextSibling,
-  tagName,
-  setTextContent
-} 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>;
-
-export 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) {
-      const child = children[i];
-      if (child === null) {
-        continue;
-      }
-      let childData = child.data;
-      if (childData !== undefined) {
-        addNS(childData, (child as VNode).children as VNodes, child.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);
-    }
-  }
-  return vnode(sel, data, children, text, undefined);
-}

tests/__snapshots__/animations.test.ts.snap

@@ -1,135 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`animations t-transition combined with component 1`] = `
-"function anonymous(context,extra
-) {
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let owner = context;
-    var h = this.h;
-    let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
-    result = vn1;
-    //COMPONENT
-    let def3;
-    let w4 = 4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[4]] : false;
-    let _2_index = c1.length;
-    c1.push(null);
-    let props4 = {};
-    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.currentFiber.promise;
-        } else {
-            w4.destroy();
-            w4 = false;
-        }
-    }
-    if (!w4) {
-        let componentKey4 = \`Child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
-        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
-        w4 = new W4(parent, props4);
-        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare(extra.fiber, undefined, undefined);
-        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}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.fiber, undefined, undefined);
-        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-component and t-if 1`] = `
-"function anonymous(context,extra
-) {
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let owner = context;
-    var h = this.h;
-    let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
-    result = vn1;
-    if (context['state'].display) {
-        //COMPONENT
-        let def3;
-        let w4 = 4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[4]] : false;
-        let _2_index = c1.length;
-        c1.push(null);
-        let props4 = {};
-        if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-            if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-                def3 = w4.__owl__.currentFiber.promise;
-            } else {
-                w4.destroy();
-                w4 = false;
-            }
-        }
-        if (!w4) {
-            let componentKey4 = \`Child\`;
-            let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
-            if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
-            w4 = new W4(parent, props4);
-            parent.__owl__.cmap[4] = w4.__owl__.id;
-            def3 = w4.__prepare(extra.fiber, undefined, undefined);
-            def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}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.fiber, undefined, undefined);
-            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
-) {
-    let utils = this.constructor.utils;
-    var h = this.h;
-    let c1 = [], p1 = {key:1};
-    var vn1 = h('span', p1, c1);
-    result = vn1;
-    p1.hook = {
-      insert: vn => {
-        utils.transitionInsert(vn, 'jupiler');
-      },
-      remove: (vn, rm) => {
-        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
-) {
-    let utils = this.constructor.utils;
-    var h = this.h;
-    let c1 = [], p1 = {key:1};
-    var vn1 = h('span', p1, c1);
-    result = vn1;
-    p1.hook = {
-      insert: vn => {
-        utils.transitionInsert(vn, 'chimay');
-      },
-      remove: (vn, rm) => {
-        utils.transitionRemove(vn, 'chimay', rm);
-      },
-    };
-    c1.push({text: \`blue\`});
-    return vn1;
-}"
-`;

tests/animations.test.ts

@@ -1,402 +0,0 @@
-import { Component, Env } from "../src/component/component";
-import { QWeb } from "../src/qweb/index";
-import { useState, useRef } from "../src/hooks";
-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 components
-// - 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> {}
-
-//------------------------------------------------------------------------------
-// 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 = useState({ 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 = useState({ hide: false });
-      span = useRef("span");
-    }
-    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.span.el).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 component", async () => {
-    expect.assertions(5);
-
-    env.qweb.addTemplate("Parent", `<div><Child t-transition="chimay"/></div>`);
-    env.qweb.addTemplate("Child", `<span>blue</span>`);
-    class Child extends Widget {}
-    class Parent extends Widget {
-      static components = { Child: Child };
-    }
-    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-component and t-if", async () => {
-    expect.assertions(8);
-
-    env.qweb.addTemplate(
-      "Parent",
-      `<div><t t-if="state.display" t-component="Child" t-transition="chimay"/></div>`
-    );
-    env.qweb.addTemplate("Child", `<span>blue</span>`);
-    class Child extends Widget {}
-    class Parent extends Widget {
-      static components = { Child: Child };
-      state = useState({ display: true });
-    }
-    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 = useState({ 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 {
-      state = useState({ 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-component, 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-component="Child" t-transition="chimay"/>
-        </div>
-        <span t-name="Child">blue</span>
-      </templates>`
-    );
-    class Child extends Widget {}
-    class Parent extends Widget {
-      static components = { Child };
-      state = useState({ 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/component/__snapshots__/props_validation.test.ts.snap

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`default props default values are also set whenever component is updated 1`] = `"<div>1</div>"`;
-
-exports[`default props default values are also set whenever component is updated 2`] = `"<div>4</div>"`;
-
-exports[`props validation props are validated in dev mode (code snapshot) 1`] = `
-"function anonymous(context,extra
-) {
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let owner = context;
-    var h = this.h;
-    let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
-    result = vn1;
-    //COMPONENT
-    let def3;
-    let w4 = 4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[4]] : false;
-    let _2_index = c1.length;
-    c1.push(null);
-    let props4 = {message:1};
-    if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-        if (utils.shallowEqual(props4, w4.__owl__.currentFiber.props)) {
-            def3 = w4.__owl__.currentFiber.promise;
-        } else {
-            w4.destroy();
-            w4 = false;
-        }
-    }
-    if (!w4) {
-        let componentKey4 = \`Child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
-        if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
-        utils.validateProps(W4, props4)
-        w4 = new W4(parent, props4);
-        parent.__owl__.cmap[4] = w4.__owl__.id;
-        def3 = w4.__prepare(extra.fiber, undefined, undefined);
-        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
-    } else {
-        utils.validateProps(w4.constructor, props4)
-        def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);
-        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
-    }
-    extra.promises.push(def3);
-    return vn1;
-}"
-`;

tests/component/props_validation.test.ts

@@ -1,343 +0,0 @@
-import { Component, Env } from "../../src/component/component";
-import { makeTestFixture, makeTestEnv } from "../helpers";
-import { QWeb } from "../../src/qweb";
-
-//------------------------------------------------------------------------------
-// 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> {}
-
-//------------------------------------------------------------------------------
-// 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: list of strings", async () => {
-    class TestWidget extends Widget {
-      static props = ["message"];
-    }
-
-    expect(() => {
-      new TestWidget(env);
-    }).toThrow("Missing props 'message' (component '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 component");
-    }
-  });
-
-  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 component");
-    }
-  });
-
-  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 component");
-  });
-
-  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();
-  });
-
-  test("props are validated in dev mode (code snapshot)", async () => {
-    env.qweb.addTemplates(`
-      <templates>
-        <div t-name="App">
-          <Child message="1"/>
-        </div>
-        <div t-name="Child"><t t-esc="props.message"/></div>
-      </templates>`);
-
-    class Child extends Widget {
-      static props = ["message"];
-    }
-    class App extends Widget {
-      static components = { Child };
-    }
-    const app = new App(env);
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
-    // need to make sure there are 2 call to update props. one at component
-    // creation, and one at update time.
-    expect(env.qweb.templates.App.fn.toString()).toMatchSnapshot();
-  });
-
-  test("props: list of strings with optional props", async () => {
-    class TestWidget extends Widget {
-      static props = ["message", "someProp?"];
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { someProp: 1 });
-    }).toThrow();
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: 1 });
-    }).not.toThrow();
-  });
-
-  test("props: can be defined with a boolean", async () => {
-    class TestWidget extends Widget {
-      static props = { message: true };
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, {});
-    }).toThrow();
-  });
-
-  test("props: extra props cause an error", async () => {
-    class TestWidget extends Widget {
-      static props = ["message"];
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: 1, flag: true });
-    }).toThrow();
-  });
-
-  test("props: extra props cause an error, part 2", async () => {
-    class TestWidget extends Widget {
-      static props = { message: true };
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: 1, flag: true });
-    }).toThrow();
-  });
-
-  test("props: optional prop do not cause an error", async () => {
-    class TestWidget extends Widget {
-      static props = ["message?"];
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: 1 });
-    }).not.toThrow();
-  });
-
-  test("optional prop do not cause an error if value is undefined", async () => {
-    class TestWidget extends Widget {
-      static props = { message: { type: String, optional: true } };
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: undefined });
-    }).not.toThrow();
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: null });
-    }).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 };
-    }
-    env.qweb.addTemplates(`
-        <templates>
-            <div t-name="TestWidget"><t t-esc="props.p"/></div>
-        </templates>`);
-
-    const w = new TestWidget(env, { p: 1 });
-    await w.mount(fixture);
-    expect(fixture.innerHTML).toMatchSnapshot();
-    const fiber = w.__createFiber(false, undefined, undefined, undefined);
-    await w.__updateProps({}, fiber);
-    await w.render();
-    expect(w.props.p).toBe(4);
-    expect(fixture.innerHTML).toMatchSnapshot();
-  });
-});

tests/core/event_bus.test.ts

@@ -1,45 +0,0 @@
-import { EventBus } from "../../src/core/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/core/observer.test.ts

@@ -1,466 +0,0 @@
-import { Observer } from "../../src/core/observer";
-import { nextMicroTick } from "../helpers";
-
-describe("observer", () => {
-  test("properly observe objects", () => {
-    const observer = new Observer();
-    const obj: any = observer.observe({});
-
-    expect(typeof obj).toBe("object");
-    expect(observer.revNumber(obj)).toBe(1);
-    expect(observer.deepRevNumber(obj)).toBe(1);
-    expect(observer.rev).toBe(1);
-
-    const obj2: any = observer.observe({ a: 1 });
-    expect(observer.revNumber(obj2)).toBe(1);
-    expect(observer.revNumber(obj)).toBe(1);
-    expect(observer.deepRevNumber(obj)).toBe(1);
-    expect(observer.rev).toBe(1);
-
-    obj2.a = 2;
-
-    expect(observer.revNumber(obj)).toBe(1);
-    expect(observer.revNumber(obj2)).toBe(2);
-    expect(observer.rev).toBe(2);
-
-    expect(obj2).toEqual({
-      a: 2
-    });
-  });
-
-  test("properly handle null or undefined", () => {
-    const observer = new Observer();
-    const obj: any = observer.observe({ a: null, b: undefined });
-
-    expect(observer.revNumber(obj)).toBe(1);
-    expect(observer.deepRevNumber(obj)).toBe(1);
-    expect(observer.rev).toBe(1);
-
-    obj.a = 3;
-    expect(observer.revNumber(obj)).toBe(2);
-    expect(observer.deepRevNumber(obj)).toBe(2);
-    expect(observer.rev).toBe(2);
-
-    obj.b = 5;
-    expect(observer.revNumber(obj)).toBe(3);
-    expect(observer.deepRevNumber(obj)).toBe(3);
-    expect(observer.rev).toBe(3);
-
-    obj.a = null;
-    obj.b = undefined;
-    expect(observer.revNumber(obj)).toBe(5);
-    expect(observer.deepRevNumber(obj)).toBe(5);
-    expect(observer.rev).toBe(5);
-    expect(obj).toEqual({
-      a: null,
-      b: undefined
-    });
-  });
-
-  test("properly handle dates", () => {
-    const observer = new Observer();
-    const date = new Date();
-    const obj: any = observer.observe({ date });
-
-    expect(observer.revNumber(obj)).toBe(1);
-    expect(observer.deepRevNumber(obj)).toBe(1);
-    expect(observer.rev).toBe(1);
-    expect(typeof obj.date.getFullYear()).toBe("number");
-    expect(obj.date).toBe(date);
-
-    obj.date = new Date();
-
-    expect(observer.revNumber(obj)).toBe(2);
-    expect(observer.deepRevNumber(obj)).toBe(2);
-    expect(observer.rev).toBe(2);
-    expect(obj.date).not.toBe(date);
-  });
-
-  test("can change values in array", () => {
-    const observer = new Observer();
-    const obj: any = observer.observe({ arr: [1, 2] });
-
-    expect(Array.isArray(obj.arr)).toBe(true);
-    expect(observer.revNumber(obj.arr)).toBe(1);
-    expect(observer.deepRevNumber(obj.arr)).toBe(1);
-    expect(observer.rev).toBe(1);
-
-    obj.arr[0] = "nope";
-    expect(observer.revNumber(obj.arr)).toBe(2);
-    expect(observer.deepRevNumber(obj.arr)).toBe(2);
-    expect(observer.revNumber(obj)).toBe(1);
-    expect(observer.deepRevNumber(obj)).toBe(2);
-    expect(observer.rev).toBe(2);
-  });
-
-  test("various object property changes", () => {
-    const observer = new Observer();
-    const obj: any = observer.observe({ a: 1 });
-
-    expect(observer.revNumber(obj)).toBe(1);
-    expect(observer.deepRevNumber(obj)).toBe(1);
-    expect(observer.rev).toBe(1);
-
-    obj.a = 2;
-
-    expect(observer.revNumber(obj)).toBe(2);
-    expect(observer.deepRevNumber(obj)).toBe(2);
-    expect(observer.rev).toBe(2);
-
-    // same value again
-    obj.a = 2;
-    expect(observer.revNumber(obj)).toBe(2);
-    expect(observer.deepRevNumber(obj)).toBe(2);
-    expect(observer.rev).toBe(2);
-
-    obj.a = 3;
-    expect(observer.revNumber(obj)).toBe(3);
-    expect(observer.deepRevNumber(obj)).toBe(3);
-    expect(observer.rev).toBe(3);
-  });
-
-  test("properly observe arrays", () => {
-    const observer = new Observer();
-    const arr: any = observer.observe([]);
-
-    expect(Array.isArray(arr)).toBe(true);
-    expect(arr.length).toBe(0);
-    expect(observer.revNumber(arr)).toBe(1);
-    expect(observer.deepRevNumber(arr)).toBe(1);
-    expect(observer.rev).toBe(1);
-
-    arr.push(1);
-    expect(observer.revNumber(arr)).toBe(2);
-    expect(observer.deepRevNumber(arr)).toBe(2);
-    expect(observer.rev).toBe(2);
-    expect(arr.length).toBe(1);
-    expect(arr).toEqual([1]);
-
-    arr.splice(1, 0, "hey");
-    expect(observer.revNumber(arr)).toBe(3);
-    expect(observer.deepRevNumber(arr)).toBe(3);
-    expect(observer.rev).toBe(3);
-    expect(arr).toEqual([1, "hey"]);
-    expect(arr.length).toBe(2);
-
-    arr.unshift("lindemans");
-    //it generates 3 primitive operations
-    expect(observer.revNumber(arr)).toBe(6);
-    expect(observer.deepRevNumber(arr)).toBe(6);
-    expect(observer.rev).toBe(6);
-    expect(arr).toEqual(["lindemans", 1, "hey"]);
-    expect(arr.length).toBe(3);
-
-    arr.reverse();
-    //it generates 2 primitive operations
-    expect(observer.revNumber(arr)).toBe(8);
-    expect(observer.deepRevNumber(arr)).toBe(8);
-    expect(observer.rev).toBe(8);
-    expect(arr).toEqual(["hey", 1, "lindemans"]);
-    expect(arr.length).toBe(3);
-
-    arr.pop(); // one set, one delete
-    expect(observer.revNumber(arr)).toBe(10);
-    expect(observer.deepRevNumber(arr)).toBe(10);
-    expect(observer.rev).toBe(10);
-    expect(arr).toEqual(["hey", 1]);
-    expect(arr.length).toBe(2);
-
-    arr.shift(); // 2 sets, 1 delete
-    expect(observer.revNumber(arr)).toBe(13);
-    expect(observer.deepRevNumber(arr)).toBe(13);
-    expect(observer.rev).toBe(13);
-    expect(arr).toEqual([1]);
-    expect(arr.length).toBe(1);
-  });
-
-  test("object pushed into arrays are observed", () => {
-    const observer = new Observer();
-    const arr: any = observer.observe([]);
-    expect(observer.rev).toBe(1);
-
-    arr.push({ kriek: 5 });
-    expect(observer.rev).toBe(2);
-    expect(observer.revNumber(arr)).toBe(2);
-    expect(observer.revNumber(arr[0])).toBe(2);
-
-    arr[0].kriek = 6;
-
-    expect(observer.rev).toBe(3);
-    expect(observer.revNumber(arr)).toBe(2);
-    expect(observer.deepRevNumber(arr)).toBe(3);
-    expect(observer.revNumber(arr[0])).toBe(3);
-  });
-
-  test("set new property on observed object", async () => {
-    const observer = new Observer();
-    observer.notifyCB = jest.fn();
-    const state: any = observer.observe({ a: 1 });
-    expect(observer.notifyCB).toBeCalledTimes(0);
-    expect(observer.rev).toBe(1);
-    expect(observer.revNumber(state)).toBe(1);
-
-    state.b = 8;
-
-    await nextMicroTick();
-
-    expect(observer.notifyCB).toBeCalledTimes(1);
-    expect(observer.rev).toBe(2);
-    expect(observer.revNumber(state)).toBe(2);
-
-    expect(state.b).toBe(8);
-  });
-
-  test("delete property from observed object", async () => {
-    const observer = new Observer();
-    observer.notifyCB = jest.fn();
-    const state: any = observer.observe({ a: 1, b: 8 });
-    observer.observe(state);
-
-    expect(observer.notifyCB).toBeCalledTimes(0);
-    expect(observer.rev).toBe(1);
-    expect(observer.revNumber(state)).toBe(1);
-
-    delete state.b;
-    await nextMicroTick();
-
-    expect(observer.notifyCB).toBeCalledTimes(1);
-    expect(observer.rev).toBe(2);
-    expect(observer.revNumber(state)).toBe(2);
-
-    expect(state).toEqual({ a: 1 });
-  });
-
-  test("set element in observed array", async () => {
-    const observer = new Observer();
-    observer.notifyCB = jest.fn();
-    const state: any = observer.observe(["a"]);
-
-    expect(observer.rev).toBe(1);
-    expect(observer.revNumber(state)).toBe(1);
-    expect(observer.deepRevNumber(state)).toBe(1);
-    expect(observer.notifyCB).toBeCalledTimes(0);
-
-    state[1] = "b";
-
-    await nextMicroTick();
-
-    expect(observer.rev).toBe(2);
-    expect(observer.revNumber(state)).toBe(2);
-    expect(observer.deepRevNumber(state)).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 = observer.observe({ arr: [] });
-
-    expect(observer.rev).toBe(1);
-    expect(observer.revNumber(state.arr)).toBe(1);
-    expect(observer.deepRevNumber(state.arr)).toBe(1);
-    expect(state.arr.length).toBe(0);
-
-    state.arr.push(1);
-    expect(observer.rev).toBe(2);
-    expect(observer.revNumber(state.arr)).toBe(2);
-    expect(observer.deepRevNumber(state.arr)).toBe(2);
-    expect(state.arr.length).toBe(1);
-  });
-
-  test("properly observe objects in array", () => {
-    const observer = new Observer();
-    const state: any = observer.observe({ arr: [{ something: 1 }] });
-    observer.observe(state);
-
-    expect(observer.rev).toBe(1);
-    expect(observer.revNumber(state.arr)).toBe(1);
-    expect(observer.revNumber(state.arr[0])).toBe(1);
-
-    state.arr[0].something = 2;
-    expect(observer.rev).toBe(2);
-    expect(observer.revNumber(state.arr)).toBe(1);
-    expect(observer.revNumber(state.arr[0])).toBe(2);
-  });
-
-  test("properly observe objects in object", () => {
-    const observer = new Observer();
-    const state: any = observer.observe({ a: { b: 1 } });
-
-    expect(observer.rev).toBe(1);
-    expect(observer.revNumber(state)).toBe(1);
-    expect(observer.revNumber(state.a)).toBe(1);
-
-    state.a.b = 2;
-    expect(observer.rev).toBe(2);
-    expect(observer.revNumber(state)).toBe(1);
-    expect(observer.revNumber(state.a)).toBe(2);
-  });
-
-  test("reobserve new object values", () => {
-    const observer = new Observer();
-    const obj: any = observer.observe({ a: 1 });
-
-    expect(observer.rev).toBe(1);
-    expect(observer.revNumber(obj)).toBe(1);
-
-    obj.a = { b: 2 };
-
-    expect(observer.rev).toBe(2);
-    expect(observer.revNumber(obj)).toBe(2);
-    expect(observer.revNumber(obj.a)).toBe(2);
-    obj.a.b = 3;
-    expect(observer.rev).toBe(3);
-    expect(observer.revNumber(obj)).toBe(2);
-    expect(observer.revNumber(obj.a)).toBe(3);
-  });
-
-  test("deep observe misc changes", () => {
-    const observer = new Observer();
-    const state: any = observer.observe({ o: { a: 1 }, arr: [1], n: 13 });
-    expect(observer.revNumber(state)).toBe(1);
-    expect(observer.deepRevNumber(state)).toBe(1);
-
-    state.o.a = 2;
-    expect(observer.rev).toBe(2);
-    expect(observer.revNumber(state)).toBe(1);
-    expect(observer.deepRevNumber(state)).toBe(2);
-
-    state.arr.push(2);
-    expect(observer.rev).toBe(3);
-    expect(observer.revNumber(state)).toBe(1);
-    expect(observer.deepRevNumber(state)).toBe(3);
-
-    state.n = 155;
-    expect(observer.rev).toBe(4);
-    expect(observer.revNumber(state)).toBe(2);
-    expect(observer.deepRevNumber(state)).toBe(4);
-  });
-
-  test("properly handle already observed state", () => {
-    const observer = new Observer();
-    const obj1: any = observer.observe({ a: 1 });
-    const obj2: any = observer.observe({ b: 1 });
-
-    expect(observer.revNumber(obj1)).toBe(1);
-    expect(observer.revNumber(obj2)).toBe(1);
-
-    obj1.a = 2;
-    obj2.b = 3;
-    expect(observer.revNumber(obj1)).toBe(2);
-    expect(observer.revNumber(obj2)).toBe(2);
-
-    obj2.b = obj1;
-    expect(observer.revNumber(obj1)).toBe(2);
-    expect(observer.revNumber(obj2)).toBe(3);
-  });
-
-  test("can set a property more than once", () => {
-    const observer = new Observer();
-    const obj: any = observer.observe({});
-
-    expect(observer.revNumber(obj)).toBe(1);
-    expect(observer.deepRevNumber(obj)).toBe(1);
-    expect(observer.rev).toBe(1);
-
-    obj.aku = "always finds annoying problems";
-    expect(observer.revNumber(obj)).toBe(2);
-    expect(observer.deepRevNumber(obj)).toBe(2);
-    expect(observer.rev).toBe(2);
-
-    obj.aku = "always finds good problems";
-
-    expect(observer.revNumber(obj)).toBe(3);
-    expect(observer.deepRevNumber(obj)).toBe(3);
-    expect(observer.rev).toBe(3);
-  });
-
-  test("properly handle swapping elements", () => {
-    const observer = new Observer();
-    const obj: any = observer.observe({ a: { arr: [] }, b: 1 });
-
-    // 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 = observer.observe({ a: { arr: [], val: "test" } });
-
-    expect(observer.rev).toBe(1);
-    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();
-    let obj1: any = {};
-    let obj2: any = { b: obj1, key: 1 };
-    obj1.a = obj2;
-    obj1 = observer.observe(obj1);
-    obj2 = obj1.a;
-
-    expect(observer.revNumber(obj1)).toBe(1);
-    expect(observer.revNumber(obj2)).toBe(1);
-
-    obj2.key = 3;
-    expect(observer.revNumber(obj1)).toBe(1);
-    expect(observer.revNumber(obj2)).toBe(2);
-  });
-
-  test("call callback when state is changed", async () => {
-    const observer = new Observer();
-    observer.notifyCB = jest.fn();
-    const obj: any = observer.observe({ a: 1, b: { c: 2 }, d: [{ e: 3 }], f: 4 });
-
-    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 = observer.observe({ a: 1 });
-    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 = observer.observe({ a: [1] });
-
-    expect(() => {
-      obj.a.push(2);
-    }).toThrow('Observed state cannot be changed here! (key: "1", val: "2")');
-  });
-});

tests/doc_link_checker.test.ts

@@ -1,126 +0,0 @@
-/**
- * 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/helpers.ts

@@ -1,136 +0,0 @@
-import { Env } from "../src/component/component";
-import { EvalContext, QWeb } from "../src/qweb/qweb";
-import { patch } from "../src/vdom";
-import "../src/qweb/base_directives";
-import "../src/qweb/extensions";
-import "../src/component/directive";
-
-// Some static cleanup
-let nextSlotId;
-let slots;
-let nextId;
-let TEMPLATES;
-
-beforeEach(() => {
-  nextSlotId = QWeb.nextSlotId;
-  slots = Object.assign({}, QWeb.slots);
-  nextId = QWeb.nextId;
-  TEMPLATES = Object.assign({}, QWeb.TEMPLATES);
-});
-
-afterEach(() => {
-  QWeb.nextSlotId = nextSlotId;
-  QWeb.slots = slots;
-  QWeb.nextId = nextId;
-  QWeb.TEMPLATES = TEMPLATES;
-});
-
-// helpers
-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;
-}
-
-/**
- * Render a template to an html string. The big difference with the
- * renderToString method in QWeb is that we use the renderToDom method, which
- * snapshots the resulting template function.  Doing so gives us a large body
- * of reference to evaluate changes in the generated QWeb code.
- *
- * Note that the result of renderToString is guaranteed to be the same as the
- * one from QWeb.
- */
-export function renderToString(
-  qweb: QWeb,
-  t: string,
-  context: EvalContext = {},
-  extra?: any
-): string {
-  const node = renderToDOM(qweb, t, context, extra);
-  const result = node instanceof Text ? node.textContent! : node.outerHTML;
-  if (result !== qweb.renderToString(t, context, extra)) {
-    throw new Error("HTML string returned by renderToString helper does not match QWeb render");
-  }
-  return result;
-}
-
-// 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 = QWeb.utils.nextFrame;
-export function patchNextFrame(f: Function) {
-  QWeb.utils.nextFrame = (cb: () => void) => {
-    setTimeout(() => f(cb));
-  };
-}
-
-export function unpatchNextFrame() {
-  QWeb.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/hooks.test.ts

@@ -1,152 +0,0 @@
-import { makeTestEnv, makeTestFixture, nextTick } from "./helpers";
-import { Component, Env } from "../src/component/component";
-import { useState, onMounted, onWillUnmount, useRef } from "../src/hooks";
-import { xml } from "../src/tags";
-
-//------------------------------------------------------------------------------
-// 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.
-// - env: a WEnv, necessary to create new components
-
-let fixture: HTMLElement;
-let env: Env;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-  env = makeTestEnv();
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
-
-describe("hooks", () => {
-  test("can use a state hook", async () => {
-    class Counter extends Component<any, any> {
-      static template = xml`<div><t t-esc="counter.value"/></div>`;
-      counter = useState({ value: 42 });
-    }
-    const counter = new Counter(env);
-    await counter.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>42</div>");
-    counter.counter.value = 3;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div>3</div>");
-  });
-
-  test("can use onMounted, onWillUnmount", async () => {
-    const steps: string[] = [];
-    function useMyHook() {
-      onMounted(() => {
-        steps.push("mounted");
-      });
-      onWillUnmount(() => {
-        steps.push("willunmount");
-      });
-    }
-    class MyComponent extends Component<any, any> {
-      static template = xml`<div>hey</div>`;
-      constructor(env) {
-        super(env);
-        useMyHook();
-      }
-    }
-    const component = new MyComponent(env);
-    await component.mount(fixture);
-    expect(component).not.toHaveProperty("mounted");
-    expect(component).not.toHaveProperty("willUnmount");
-    expect(fixture.innerHTML).toBe("<div>hey</div>");
-    expect(steps).toEqual(["mounted"]);
-    component.unmount();
-    expect(fixture.innerHTML).toBe("");
-    expect(steps).toEqual(["mounted", "willunmount"]);
-  });
-
-  test("mounted, willUnmount, onMounted, onWillUnmount order", async () => {
-    const steps: string[] = [];
-    function useMyHook() {
-      onMounted(() => {
-        steps.push("hook:mounted");
-      });
-      onWillUnmount(() => {
-        steps.push("hook:willunmount");
-      });
-    }
-    class MyComponent extends Component<any, any> {
-      static template = xml`<div>hey</div>`;
-      constructor(env) {
-        super(env);
-        useMyHook();
-      }
-      mounted() {
-        steps.push("comp:mounted");
-      }
-      willUnmount() {
-        steps.push("comp:willunmount");
-      }
-    }
-    const component = new MyComponent(env);
-    await component.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>hey</div>");
-    component.unmount();
-    expect(fixture.innerHTML).toBe("");
-    expect(steps).toEqual(["comp:mounted", "hook:mounted", "hook:willunmount", "comp:willunmount"]);
-  });
-
-  test("two different call to mounted/willunmount should work", async () => {
-    const steps: string[] = [];
-    function useMyHook(i) {
-      onMounted(() => {
-        steps.push("hook:mounted" + i);
-      });
-      onWillUnmount(() => {
-        steps.push("hook:willunmount" + i);
-      });
-    }
-    class MyComponent extends Component<any, any> {
-      static template = xml`<div>hey</div>`;
-      constructor(env) {
-        super(env);
-        useMyHook(1);
-        useMyHook(2);
-      }
-    }
-    const component = new MyComponent(env);
-    await component.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>hey</div>");
-    component.unmount();
-    expect(fixture.innerHTML).toBe("");
-    expect(steps).toEqual([
-      "hook:mounted1",
-      "hook:mounted2",
-      "hook:willunmount2",
-      "hook:willunmount1"
-    ]);
-  });
-
-  test("useRef hook", async () => {
-    class Counter extends Component<any, any> {
-      static template = xml`<div><button t-ref="button"><t t-esc="value"/></button></div>`;
-      button = useRef("button");
-      value = 0;
-      increment() {
-        this.value++;
-        (this.button.el as HTMLButtonElement).innerHTML = String(this.value);
-      }
-    }
-    const counter = new Counter(env);
-    await counter.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><button>0</button></div>");
-    counter.increment();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><button>1</button></div>");
-  });
-});

tests/qweb/qweb_expressions.test.ts

@@ -1,158 +0,0 @@
-import { compileExpr, tokenize } from "../../src/qweb/expression_parser";
-
-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: ">" },
-      { 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/router/Link.test.ts

@@ -1,84 +0,0 @@
-import { Component } from "../../src/component/component";
-import { Link } from "../../src/router/Link";
-import { RouterEnv } from "../../src/router/Router";
-import { makeTestEnv, makeTestFixture, nextTick } from "../helpers";
-import { TestRouter } from "./TestRouter";
-
-describe("Link component", () => {
-  let fixture: HTMLElement;
-  let env: RouterEnv;
-  let router: TestRouter | null = null;
-
-  beforeEach(() => {
-    fixture = makeTestFixture();
-    env = <RouterEnv>makeTestEnv();
-  });
-
-  afterEach(() => {
-    fixture.remove();
-    if (router) {
-      router.destroy();
-    }
-    router = null;
-  });
-
-  test("can render simple cases", async () => {
-    env.qweb.addTemplates(`
-        <templates>
-            <div t-name="App">
-                <Link to="'about'">About</Link>
-            </div>
-        </templates>
-    `);
-    class App extends Component<any, any> {
-      static components = { Link: Link };
-    }
-
-    const routes = [{ name: "about", path: "/about" }, { name: "users", path: "/users" }];
-
-    router = new TestRouter(env, routes, { mode: "history" });
-    router.navigate({ to: "users" });
-    const app = new App(env);
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe('<div><a href="/about">About</a></div>');
-
-    expect(window.location.pathname).toBe("/users");
-    fixture.querySelector("a")!.click();
-    await nextTick();
-    expect(window.location.pathname).toBe("/about");
-    expect(fixture.innerHTML).toBe(
-      '<div><a href="/about" class="router-link-active">About</a></div>'
-    );
-
-    expect(env.qweb.templates[Link.template].fn.toString()).toMatchSnapshot();
-  });
-
-  test("do not redirect if right clicking", async () => {
-    env.qweb.addTemplates(`
-        <templates>
-            <div t-name="App">
-                <Link to="'about'">About</Link>
-            </div>
-        </templates>
-    `);
-    class App extends Component<any, any> {
-      static components = { Link: Link };
-    }
-
-    const routes = [{ name: "about", path: "/about" }, { name: "users", path: "/users" }];
-
-    router = new TestRouter(env, routes, { mode: "history" });
-    router.navigate({ to: "users" });
-    const app = new App(env);
-    await app.mount(fixture);
-
-    expect(window.location.pathname).toBe("/users");
-    var evt = new MouseEvent("click", {
-      button: 1
-    });
-
-    fixture.querySelector("a")!.dispatchEvent(evt);
-    await nextTick();
-    expect(window.location.pathname).toBe("/users");
-  });
-});

tests/router/RouteComponent.test.ts

@@ -1,105 +0,0 @@
-import { Component } from "../../src/component/component";
-import { RouterEnv } from "../../src/router/Router";
-import { RouteComponent } from "../../src/router/RouteComponent";
-import { makeTestEnv, makeTestFixture, nextTick } from "../helpers";
-import { TestRouter } from "./TestRouter";
-
-describe("RouteComponent", () => {
-  let fixture: HTMLElement;
-  let env: RouterEnv;
-  let router: TestRouter | null = null;
-
-  beforeEach(() => {
-    fixture = makeTestFixture();
-    env = <RouterEnv>makeTestEnv();
-  });
-
-  afterEach(() => {
-    fixture.remove();
-    if (router) {
-      router.destroy();
-    }
-    router = null;
-  });
-
-  test("can render simple cases", async () => {
-    env.qweb.addTemplates(`
-        <templates>
-            <div t-name="App">
-                <RouteComponent />
-            </div>
-            <span t-name="About">About</span>
-            <span t-name="Users">Users</span>
-        </templates>
-    `);
-    class About extends Component<any, any> {}
-    class Users extends Component<any, any> {}
-    class App extends Component<any, any> {
-      static components = { RouteComponent };
-    }
-
-    const routes = [
-      { name: "about", path: "/about", component: About },
-      { name: "users", path: "/users", component: Users }
-    ];
-
-    router = new TestRouter(env, routes, { mode: "history" });
-    await router.navigate({ to: "about" });
-    const app = new App(env);
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><span>About</span></div>");
-
-    await router.navigate({ to: "users" });
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><span>Users</span></div>");
-    expect(env.qweb.templates[RouteComponent.template].fn.toString()).toMatchSnapshot();
-  });
-
-  test("can render parameterized route", async () => {
-    env.qweb.addTemplates(`
-        <templates>
-            <div t-name="App">
-                <RouteComponent />
-            </div>
-            <span t-name="Book">Book <t t-esc="props.title"/></span>
-        </templates>
-    `);
-    class Book extends Component<any, any> {}
-    class App extends Component<any, any> {
-      static components = { RouteComponent };
-    }
-
-    const routes = [{ name: "book", path: "/book/{{title}}", component: Book }];
-    router = new TestRouter(env, routes, { mode: "history" });
-    await router.navigate({ to: "book", params: { title: "1984" } });
-    const app = new App(env);
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><span>Book 1984</span></div>");
-  });
-
-  test("can render parameterized route with suffixes", async () => {
-    env.qweb.addTemplates(`
-        <templates>
-            <div t-name="App">
-                <RouteComponent />
-            </div>
-            <span t-name="Book">Book <t t-esc="props.title"/>|<t t-esc="incVal"/></span>
-        </templates>
-    `);
-    class Book extends Component<any, any> {
-      get incVal() {
-        return this.props.val + 1;
-      }
-    }
-    class App extends Component<any, any> {
-      static components = { RouteComponent };
-    }
-
-    const routes = [{ name: "book", path: "/book/{{title}}/{{val.number}}", component: Book }];
-    router = new TestRouter(env, routes, { mode: "history" });
-    await router.navigate({ to: "book", params: { title: "1984", val: "123" } });
-    const app = new App(env);
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><span>Book 1984|124</span></div>");
-  });
-});

tests/router/TestRouter.ts

@@ -1,15 +0,0 @@
-import { Router } from "../../src/router/Router";
-import { QWeb } from "../../src/qweb/index";
-
-export class TestRouter extends Router {
-  destroy() {
-    window.removeEventListener("popstate", (this as any)._listener);
-
-    // remove component defined inroutes
-    for (let key in QWeb.components) {
-      if (key.startsWith("__component__")) {
-        delete QWeb.components[key];
-      }
-    }
-  }
-}

tests/router/__snapshots__/Link.test.ts.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Link component can render simple cases 1`] = `
-"function anonymous(context,extra
-) {
-    let utils = this.constructor.utils;
-    let owner = context;
-    var h = this.h;
-    let _1 = utils.toObj({'router-link-active':context['isActive']});
-    var _2 = context['href'];
-    let c3 = [], p3 = {key:3,attrs:{href: _2},class:_1,on:{}};
-    var vn3 = h('a', p3, c3);
-    result = vn3;
-    if (!context['navigate']) {
-        throw new Error('Missing handler \\\\'' + 'navigate' + \`\\\\' when evaluating template '__template__1'\`)
-    }
-    extra.handlers['click' + 3] = extra.handlers['click' + 3] || context['navigate'].bind(owner);
-    p3.on['click'] = extra.handlers['click' + 3];
-    const slot4 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
-    if (slot4) {
-        slot4.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c3, vars: extra.vars, parent: owner}));
-    }
-    return vn3;
-}"
-`;

tests/router/__snapshots__/RouteComponent.test.ts.snap

@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RouteComponent can render simple cases 1`] = `
-"function anonymous(context,extra
-) {
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let owner = context;
-    let result;
-    var h = this.h;
-    if (context['routeComponent']) {
-        //COMPONENT
-        let key4 = 'key' + context['env'].router.currentRouteName;
-        let def2;
-        let templateId5 = key4;
-        let w3 = templateId5 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[templateId5]] : false;
-        let vn6 = {};
-        result = vn6;
-        let props3 = Object.assign({}, context['env'].router.currentParams);
-        if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
-            if (utils.shallowEqual(props3, w3.__owl__.currentFiber.props)) {
-                def2 = w3.__owl__.currentFiber.promise;
-            } else {
-                w3.destroy();
-                w3 = false;
-            }
-        }
-        if (!w3) {
-            let componentKey3 = \`routeComponent\`;
-            let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['routeComponent'];
-            if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
-            w3 = new W3(parent, props3);
-            parent.__owl__.cmap[templateId5] = w3.__owl__.id;
-            def2 = w3.__prepare(extra.fiber, undefined, undefined);
-            def2 = def2.then(vnode=>{if (w3.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: templateId5, hook: {insert(vn) {let nvn=w3.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});utils.defineProxy(vn6, pvnode);w3.__owl__.pvnode = pvnode;});
-        } else {
-            def2 = def2 || w3.__updateProps(props3, extra.fiber, undefined, undefined);
-            def2 = def2.then(()=>{if (w3.__owl__.isDestroyed) {return};let pvnode=w3.__owl__.pvnode;utils.defineProxy(vn6, pvnode);});
-        }
-        extra.promises.push(def2);
-    }
-    return result;
-}"
-`;

tests/router/router.test.ts

@@ -1,258 +0,0 @@
-import { Destination, RouterEnv, Route } from "../../src/router/Router";
-import { makeTestEnv, nextTick } from "../helpers";
-import { TestRouter } from "./TestRouter";
-
-let env: RouterEnv;
-let router: TestRouter | null = null;
-
-beforeEach(() => {
-  env = <RouterEnv>makeTestEnv();
-  window.history.pushState({}, "/", "/");
-});
-
-afterEach(() => {
-  if (router) {
-    router.destroy();
-  }
-  router = null;
-});
-
-describe("router miscellaneous", () => {
-  test("validate routes shape", () => {
-    expect(() => {
-      router = new TestRouter(env, [
-        { name: "someroute", path: "/some/path", redirect: { abc: "hey" } as Destination }
-      ]);
-    }).toThrow(`Invalid destination: {"abc":"hey"}`);
-  });
-
-  test("navigate to same route but with different params should trigger update", async () => {
-    router = new TestRouter(env, [{ name: "users", path: "/users/{{id}}" }]);
-    env.qweb.forceUpdate = jest.fn();
-    await router.navigate({ to: "users", params: { id: 3 } });
-    expect(window.location.pathname).toBe("/users/3");
-    expect(env.qweb.forceUpdate).toHaveBeenCalledTimes(1);
-
-    await router.navigate({ to: "users", params: { id: 5 } });
-    expect(window.location.pathname).toBe("/users/5");
-    expect(env.qweb.forceUpdate).toHaveBeenCalledTimes(2);
-  });
-
-  test("changing url to same route but with different params should trigger update (hash mode)", async () => {
-    env.qweb.forceUpdate = jest.fn();
-    router = new TestRouter(env, [{ name: "users", path: "/users/{{id}}" }], { mode: "hash" });
-    await router.start();
-    await router.navigate({ to: "users", params: { id: 3 } });
-    expect(window.location.hash).toBe("#/users/3");
-    expect(env.qweb.forceUpdate).toHaveBeenCalledTimes(1);
-
-    window.location.hash = "/users/5";
-    window.dispatchEvent(new Event("hashchange"));
-    await nextTick();
-    expect(window.location.hash).toBe("#/users/5");
-    expect(env.qweb.forceUpdate).toHaveBeenCalledTimes(2);
-  });
-});
-
-describe("routeToPath", () => {
-  test("simple non parameterized path", () => {
-    router = new TestRouter(env, []);
-    expect(router["routeToPath"]({ path: "/abc" } as Route, {})).toBe("/abc");
-    expect(router["routeToPath"]({ path: "/abc/def" } as Route, {})).toBe("/abc/def");
-    expect(router["routeToPath"]({ path: "/abc" } as Route, { val: 12 })).toBe("/abc");
-  });
-
-  test("simple parameterized path", () => {
-    router = new TestRouter(env, []);
-    expect(router["routeToPath"]({ path: "/abc/{{def}}" } as Route, { def: 34 })).toBe("/abc/34");
-  });
-
-  test("simple non parameterized path, mode = hash", () => {
-    router = new TestRouter(env, [], { mode: "hash" });
-    expect(router["routeToPath"]({ path: "/abc" } as Route, {})).toBe("#/abc");
-    expect(router["routeToPath"]({ path: "/abc/def" } as Route, {})).toBe("#/abc/def");
-    expect(router["routeToPath"]({ path: "/abc" } as Route, { val: 12 })).toBe("#/abc");
-  });
-
-  test("simple parameterized path, mode=hash", () => {
-    router = new TestRouter(env, [], { mode: "hash" });
-    expect(router["routeToPath"]({ path: "/abc/{{def}}" } as Route, { def: 34 })).toBe("#/abc/34");
-  });
-});
-
-describe("destToPath", () => {
-  test("validate destination shape", () => {
-    router = new TestRouter(env, [{ name: "someroute", path: "/some/path" }]);
-    expect(() => {
-      router!.destToPath({ abc: 123 } as Destination);
-    }).toThrow('Invalid destination: {"abc":123}');
-
-    expect(() => {
-      router!.destToPath({ to: "someroute" } as Destination);
-    }).not.toThrow();
-
-    expect(() => {
-      router!.destToPath({ path: "/someroute", to: "otherroute" } as Destination);
-    }).toThrow();
-  });
-});
-
-describe("getRouteParams", () => {
-  test("properly match simple routes", () => {
-    router = new TestRouter(env, []);
-    // simple route
-    expect(router["getRouteParams"]({ path: "/home" } as Route, "/home")).toEqual({});
-
-    // no match
-    expect(router["getRouteParams"]({ path: "/home" } as Route, "/otherpath")).toEqual(false);
-
-    // fallback route
-    expect(router["getRouteParams"]({ path: "*" } as Route, "somepath")).toEqual({});
-  });
-
-  test("properly match simple routes, mode hash", () => {
-    router = new TestRouter(env, [], { mode: "hash" });
-    // simple route
-    expect(router["getRouteParams"]({ path: "/home" } as Route, "#/home")).toEqual({});
-
-    // no match
-    expect(router["getRouteParams"]({ path: "/home" } as Route, "#/otherpath")).toEqual(false);
-
-    // fallback route
-    expect(router["getRouteParams"]({ path: "*" } as Route, "#/somepath")).toEqual({});
-  });
-
-  test("match some parameterized routes", () => {
-    router = new TestRouter(env, []);
-    expect(router["getRouteParams"]({ path: "/invoices/{{id}}" } as Route, "/invoices/3")).toEqual({
-      id: "3"
-    });
-  });
-
-  test("match some parameterized routes, mode hash", () => {
-    router = new TestRouter(env, [], { mode: "hash" });
-    expect(router["getRouteParams"]({ path: "/invoices/{{id}}" } as Route, "#/invoices/3")).toEqual(
-      {
-        id: "3"
-      }
-    );
-  });
-
-  test("can convert to number if needed", () => {
-    router = new TestRouter(env, []);
-    expect(
-      router["getRouteParams"]({ path: "/invoices/{{id.number}}" } as Route, "/invoices/3")
-    ).toEqual({
-      id: 3
-    });
-  });
-
-  test("can convert to number if needed, mode: hash", () => {
-    router = new TestRouter(env, [], { mode: "hash" });
-    expect(
-      router["getRouteParams"]({ path: "/invoices/{{id.number}}" } as Route, "#/invoices/3")
-    ).toEqual({
-      id: 3
-    });
-  });
-});
-
-describe("redirect", () => {
-  test("can redirect to other route", async () => {
-    router = new TestRouter(env, [
-      { name: "routea", path: "/some/path" },
-      { name: "routeb", path: "/some/other/path", redirect: { to: "routea" } }
-    ]);
-
-    await router.start();
-    expect(window.location.pathname).toBe("/");
-    await router.navigate({ to: "routeb" });
-    expect(window.location.pathname).toBe("/some/path");
-    expect(router.currentRouteName).toBe("routea");
-  });
-
-  test("can redirect to other path", async () => {
-    router = new TestRouter(env, [
-      { name: "routea", path: "/some/path" },
-      { name: "routeb", path: "/some/other/path", redirect: { path: "/some/path" } }
-    ]);
-    router.navigate = jest.fn(router.navigate);
-
-    await router.start();
-    await router.navigate({ to: "routeb" });
-
-    // once because we ask for it, once because it is redirected
-    // expect(router.navigate).toBeCalledTimes(2);
-    expect(window.location.pathname).toBe("/some/path");
-    expect(router.currentRouteName).toBe("routea");
-  });
-});
-
-describe("beforeRouteEnter", () => {
-  test("navigation guard is called and properly handle return true", async () => {
-    expect(window.location.pathname).not.toBe("/some/path");
-    const guard = jest.fn(() => true);
-    router = new TestRouter(env, [{ name: "route", path: "/some/path", beforeRouteEnter: guard }]);
-
-    await router.start();
-    await router.navigate({ to: "route" });
-    expect(guard).toBeCalledTimes(1);
-    expect(window.location.pathname).toBe("/some/path");
-    expect(router.currentRouteName).toBe("route");
-  });
-
-  test("navigation is cancelled if guard return false", async () => {
-    expect(window.location.pathname).toBe("/");
-    const guard = jest.fn(() => false);
-    router = new TestRouter(env, [
-      { name: "routea", path: "/some/patha" },
-      { name: "routeb", path: "/some/pathb", beforeRouteEnter: guard }
-    ]);
-
-    await router.start();
-    await router.navigate({ to: "routea" });
-    expect(window.location.pathname).toBe("/some/patha");
-    const result = await router.navigate({ to: "routeb" });
-    expect(result).toBe(false);
-    expect(guard).toBeCalledTimes(1);
-    expect(window.location.pathname).toBe("/some/patha");
-    expect(router.currentRouteName).toBe("routea");
-  });
-
-  test("navigation is redirected if guard decides so", async () => {
-    expect(window.location.pathname).toBe("/");
-    const guard = jest.fn(() => {
-      return { to: "routec" };
-    });
-    router = new TestRouter(env, [
-      { name: "routea", path: "/some/patha" },
-      { name: "routeb", path: "/some/pathb", beforeRouteEnter: guard },
-      { name: "routec", path: "/some/pathc" }
-    ]);
-
-    await router.start();
-    const result = await router.navigate({ to: "routea" });
-    expect(result).toBe(true);
-    expect(window.location.pathname).toBe("/some/patha");
-    await router.navigate({ to: "routeb" });
-    expect(guard).toBeCalledTimes(1);
-    expect(window.location.pathname).toBe("/some/pathc");
-    expect(router.currentRouteName).toBe("routec");
-  });
-
-  test("navigation is initially redirected if guard decides so", async () => {
-    expect(window.location.pathname).toBe("/");
-    const guard = jest.fn(() => {
-      return { to: "otherroute" };
-    });
-    router = new TestRouter(env, [
-      { name: "landing", path: "/", beforeRouteEnter: guard },
-      { name: "otherroute", path: "/some/other/route" }
-    ]);
-
-    expect(window.location.pathname).toBe("/");
-
-    await router.start();
-    expect(window.location.pathname).toBe("/some/other/route");
-  });
-});

tests/store/__snapshots__/connected_component.test.ts.snap

@@ -1,21 +0,0 @@
-// 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>"`;
-
-exports[`various scenarios scenarios with async store updates and some components events 1`] = `"<div><button>Do stuff</button><div><span>Attachment 100</span><span>Name: text.txt</span></div></div>"`;
-
-exports[`various scenarios scenarios with async store updates and some components events 2`] = `"<div><button>Do stuff</button></div>"`;

tests/store/store.test.ts

@@ -1,328 +0,0 @@
-import { Env } from "../../src/component/component";
-import { Store, Getter } from "../../src/store/store";
-import { nextTick, nextMicroTick } from "../helpers";
-
-describe("basic use", () => {
-  test("dispatch an action", () => {
-    const state = { n: 1 };
-    const actions = {
-      inc({ state }, delta) {
-        state.n += delta;
-      }
-    };
-    const store = new Store({ state, actions });
-
-    expect(store.state.n).toBe(1);
-    store.dispatch("inc", 14);
-    expect(store.state.n).toBe(15);
-  });
-
-  test("dispatch an action with positional arguments", () => {
-    const state = { n1: 1, n2: 1, n3: 1 };
-
-    const actions = {
-      batchInc({ state }, delta1, delta2, delta3) {
-        state.n1 += delta1;
-        state.n2 += delta2;
-        state.n3 += delta3;
-      }
-    };
-    const store = new Store({ state, actions });
-
-    expect(store.state.n1).toBe(1);
-    expect(store.state.n2).toBe(1);
-    expect(store.state.n3).toBe(1);
-    store.dispatch("batchInc", 14, 30, 88);
-    expect(store.state.n1).toBe(15);
-    expect(store.state.n2).toBe(31);
-    expect(store.state.n3).toBe(89);
-  });
-
-  test("can dispatch an action in an action", () => {
-    const state = { n: 1 };
-
-    const actions = {
-      inc({ state }, delta) {
-        state.n += delta;
-      },
-      inc100({ dispatch }) {
-        dispatch("inc", 100);
-      }
-    };
-    const store = new Store({ state, actions });
-
-    expect(store.state.n).toBe(1);
-    store.dispatch("inc100");
-    expect(store.state.n).toBe(101);
-  });
-
-  test("return data from dispatching an action", () => {
-    const state = { n: 1 };
-    const actions = {
-      inc({ state }) {
-        return ++state.n;
-      }
-    };
-    const store = new Store({ state, actions });
-
-    expect(store.state.n).toBe(1);
-    const res = store.dispatch("inc");
-    expect(store.state.n).toBe(2);
-    expect(res).toBe(2);
-  });
-
-  test("dispatch allow synchronizing between actions", async () => {
-    const state = { n: 1 };
-    const actions = {
-      inc({ state }, delta) {
-        state.n += delta;
-      },
-      setN({ state }, n) {
-        state.n = n;
-      },
-      async dosomething({ dispatch }) {
-        await dispatch("setTo10");
-        dispatch("inc", 3);
-      },
-      async setTo10({ dispatch }) {
-        await Promise.resolve();
-        dispatch("setN", 10);
-      }
-    };
-    const store = new Store({ state, actions });
-
-    expect(store.state.n).toBe(1);
-    store.dispatch("dosomething");
-    expect(store.state.n).toBe(1);
-    await nextTick();
-    expect(store.state.n).toBe(13);
-  });
-
-  test("return data from dispatching an action", async () => {
-    const state = { n: 1 };
-    const actions = {
-      inc({ state }, delta) {
-        state.n += delta;
-      },
-      setN({ state }, n) {
-        state.n = n;
-      },
-      async dosomething({ dispatch }) {
-        const val = await dispatch("setTo10");
-        dispatch("inc", val);
-      },
-      async setTo10({ dispatch }) {
-        await Promise.resolve();
-        dispatch("setN", 10);
-        return 5;
-      }
-    };
-    const store = new Store({ state, actions });
-
-    expect(store.state.n).toBe(1);
-    store.dispatch("dosomething");
-    expect(store.state.n).toBe(1);
-    await nextTick();
-    expect(store.state.n).toBe(15);
-  });
-
-  test("env is given to actions", () => {
-    expect.assertions(1);
-    const someEnv = <Env>{};
-    const actions = {
-      someaction({ env }) {
-        expect(env).toBe(someEnv);
-      }
-    };
-    const store = new Store({ state: {}, actions, env: someEnv });
-
-    store.dispatch("someaction");
-  });
-
-  test("can have getters from store", async () => {
-    const state = {
-      beers: {
-        1: {
-          id: 1,
-          name: "bertinchamps",
-          tasterID: 1
-        }
-      },
-      tasters: {
-        1: {
-          id: 1,
-          name: "aaron"
-        }
-      }
-    };
-    const getters: { [key: string]: Getter } = {
-      beerTasterName({ state }, beerID) {
-        return state.tasters[state.beers[beerID].tasterID].name;
-      },
-      bestBeerName({ state }) {
-        return state.beers[1].name;
-      }
-    };
-    const store = new Store({ state, actions: {}, getters });
-    expect(store.getters).toBeDefined();
-    expect((<any>store.getters).bestBeerName()).toBe("bertinchamps");
-    expect((<any>store.getters).beerTasterName(1)).toBe("aaron");
-  });
-
-  test("getters given to actions", async () => {
-    expect.assertions(3);
-    const state = {
-      beers: {
-        1: {
-          id: 1,
-          name: "bertinchamps",
-          tasterID: 1
-        }
-      },
-      tasters: {
-        1: {
-          id: 1,
-          name: "aaron"
-        }
-      }
-    };
-    const getters = {
-      beerTasterName({ state }, beerID) {
-        return state.tasters[state.beers[beerID].tasterID].name;
-      },
-      bestBeerName({ state }) {
-        return state.beers[1].name;
-      }
-    };
-    const actions = {
-      action({ getters }) {
-        expect(getters).toBeDefined();
-        expect(getters.bestBeerName()).toBe("bertinchamps");
-        expect(getters.beerTasterName(1)).toBe("aaron");
-      }
-    };
-    const store = new Store({ state, actions, getters });
-    store.dispatch("action");
-  });
-
-  test("can use getters inside a getter", () => {
-    const getters = {
-      a({ getters }) {
-        return `${getters.b()}${getters.c(1)}`;
-      },
-      b() {
-        return "b";
-      },
-      c({}, i) {
-        return `c${i}`;
-      }
-    };
-    const store = new Store({ getters, state: {}, actions: {} });
-
-    expect(store.getters.a()).toBe("bc1");
-  });
-});
-
-describe("advanced state properties", () => {
-  test("state in the store is reference equal after mutation", async () => {
-    const actions = {
-      donothing() {}
-    };
-    const store = new Store({ state: {}, actions });
-    const state = store.state;
-    store.dispatch("donothing");
-    expect(store.state).toBe(state);
-  });
-
-  test("can use array properties in mutations", () => {
-    expect.assertions(3);
-    const state = { a: [1, 2, 3] };
-    const actions = {
-      m({ state }) {
-        expect(state.a.length).toBe(3);
-        const l = state.a.push(53);
-        expect(l).toBe(4);
-      }
-    };
-    const store = new Store({ state, actions });
-    store.dispatch("m");
-    expect(store.state.a).toEqual([1, 2, 3, 53]);
-  });
-
-  test("can use object assign in store", async () => {
-    const actions = {
-      dosomething({ state }) {
-        Object.assign(state.westmalle, { a: 3, b: 4 });
-      }
-    };
-    const store = new Store({
-      state: { westmalle: { a: 1, b: 2 } },
-      actions
-    });
-    store.dispatch("dosomething");
-    expect(store.state.westmalle).toEqual({ a: 3, b: 4 });
-  });
-
-  test("aku reactive store state 1", async () => {
-    const actions = {
-      inc({ state }) {
-        state.counter++;
-      }
-    };
-    const state = { counter: 0 };
-    const store = new Store({ state, actions });
-    expect(store.state.counter).toBe(0);
-    store.dispatch("inc", {});
-    expect(store.state.counter).toBe(1);
-  });
-});
-
-describe("updates triggered by the store", () => {
-  test("multiple commits trigger one update", async () => {
-    let updateCounter = 0;
-    const state = { n: 1 };
-    const actions = {
-      inc({ state }, delta) {
-        state.n += delta;
-      }
-    };
-    const store = new Store({ state, actions });
-    store.on("update", null, () => updateCounter++);
-
-    store.dispatch("inc", 14);
-    expect(updateCounter).toBe(0);
-    store.dispatch("inc", 50);
-    expect(updateCounter).toBe(0);
-    await nextMicroTick();
-    expect(updateCounter).toBe(1);
-  });
-
-  test("empty commits do not trigger updates", async () => {
-    let updateCounter = 0;
-    const state = { n: 1 };
-    const actions = {
-      inc({ state }, delta) {
-        state.n += delta;
-      },
-      noop() {},
-      noop2({ state }) {
-        const val = state.n;
-        state.n = val;
-      }
-    };
-    const store = new Store({ state, actions });
-    store.on("update", null, () => updateCounter++);
-
-    store.dispatch("noop");
-    await nextMicroTick();
-    expect(updateCounter).toBe(0);
-
-    store.dispatch("inc", 50);
-    await nextMicroTick();
-    expect(updateCounter).toBe(1);
-
-    store.dispatch("noop2");
-    await nextMicroTick();
-    expect(updateCounter).toBe(1);
-  });
-});

tests/utils.test.ts

@@ -1,30 +0,0 @@
-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

@@ -1,301 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<!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

@@ -1,47 +0,0 @@
-<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

@@ -1,301 +0,0 @@
-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();
-});