[REL] bump to v0.9.0

closes #75

.gitignore

@@ -14,4 +14,8 @@ yarn-debug.log*
 yarn-error.log*
 
 package-lock.json
-.vscode
+.vscode
+node_modules
+
+# Extras temp file
+/extras/owl.js

.jshintrc

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

LICENSE

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

README.md

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

assets/highlight.tomorrow.css

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

assets/main.css

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

assets/milligram.css

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

assets/normalize.css

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

doc/animations.md

@@ -0,0 +1,39 @@
+# 🦉 Animations 🦉
+
+
+Animation is a complex topic. There are many different use cases, and many
+solutions and technologies.
+
+## 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
+<button class="flash" t-on-click="doSomething">Click</button>
+```
+
+with the following CSS:
+
+```css
+.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 (single element)
+
+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 (see [QWeb documentation](doc/qweb.md#t-transition-directive)).

doc/comparison.md

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

doc/component.md

@@ -0,0 +1,316 @@
+# 🦉 OWL Component 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Example](#example)
+- [Templates](#templates)
+- [Reference](#reference)
+  - [Properties](#properties)
+  - [Methods](#methods)
+  - [Lifecycle](#lifecycle)
+
+## Overview
+
+OWL components are the building blocks for user interface. They are designed to be:
+
+1. **declarative:** the user interface should be described in term of the state
+   of the application, not as a sequence of imperative steps.
+
+2. **composable:** each widget can seamlessly be created in a parent widget by
+   a simple directive in its template.
+
+3. **asynchronous rendering:** the framework will transparently wait for each
+   subwidgets to be ready before applying the rendering. It uses native promises
+   under the hood.
+
+4. **uses QWeb as a template system:** the templates are described in XML
+   and follow the QWeb specification. This is a requirement for Odoo.
+
+OWL components are defined as a subclass of Component. The rendering is
+exclusively done by a [QWeb](qweb.md) template (either defined inline or preloaded in QWeb).
+The rendering is done by QWeb, which will generate a virtual dom representation
+of the widget, then patch the DOM to apply the changes in an efficient way.
+
+OWL components observe their states, and rerender themselves whenever it is
+changed. This is done by an [observer](observer.md).
+
+## Example
+
+Let us have a look at a simple component:
+
+```javascript
+class ClickCounter extends owl.Component {
+  template = "click-counter";
+  state = { value: 0 };
+
+  increment() {
+    this.state.value++;
+  }
+}
+```
+
+```xml
+<button t-name="click-counter" t-on-click="increment">
+  Click Me! [<t t-esc="state.value"/>]
+</button>
+```
+
+Note that this code is written in ESNext style, so it will only run on the
+latest browsers without a transpilation step.
+
+This example show how a component should be defined: it simply subclasses the
+Component class. It needs to define a template (`click-counter` here). Also,
+a state object is defined. It is not mandatory to use the state object, but it
+is certainly encouraged. The state object is [observed](observer.md), and any
+change to it will cause a rerendering.
+
+## Templates
+
+The example above shows a QWeb template with a `t-on-click` directive.  Widget
+templates are standard [QWeb](qweb.md) templates, but with an extra directive:
+`t-widget`.  With the `t-widget` directive, widget templates can declare sub
+widgets:
+
+```xml
+  <div>
+    <span>some text</span>
+    <t t-widget="MyWidget" t-props="{info: 13}">
+  </div>
+```
+
+In this example, the template create a widget MyWidget just after the span. See
+the [QWeb](qweb.md) documentation for more information on the `t-widget` directive.
+
+Note that the rendering context for the template is the widget itself.  This means
+that the template can access `state`, `props`, `env`, or any methods defined in the widget.
+
+## Reference
+
+An Owl component is a small class which represent a widget or some UI element.
+It exists in the context of an environment (`env`), which is propagated from a
+parent to its children. The environment needs to have a QWeb instance, which
+will be used to render the component template.
+
+### Properties
+
+- **`el`** (HTMLElement | null): reference to the DOM root node of the element. It is `null` when the
+  component is not mounted.
+
+- **`env`** (Object): the component environment, which contains a QWeb instance.
+
+- **`template`** (string): a string, which is the name of the QWeb template that will render
+  the component.
+
+- **`inlineTemplate`** (string, optional): a string that represents a xml template. If set,
+  this will be loaded into QWeb and used instead of the `template` property.
+
+- **`state`** (Object): this is the location of the component's state, if there is
+  any. After the willStart method, the `state` property is observed, and each
+  change will cause the widget to rerender itself.
+
+- **`props`** (Object): this is an object given (in the constructor) by the parent
+  to configure the component. It can be dynamically changed later by the parent,
+  in some case. Note that `props` are owned by the parent, not by the component.
+  As such, it should not ever be modified by the component.
+
+- **`refs`** (Object): the `refs` object contains all references to sub DOM nodes
+  or sub widgets defined by a `t-ref` directive in the component's template.
+
+### Methods
+
+- **`mount(target)`** (async): this is the main way a component's hierarchy is added to the
+  DOM: the root component is mounted to a target HTMLElement. Obviously, this
+  is asynchronous, since each children need to be created as well. Most applications
+  will need to call `mount` exactly once, on the root component.
+
+- **`unmount()`**: in case a component need to be detached/removed from the DOM, this
+  method can be used. Most applications should not call `unmount`, this is more
+  useful to the underlying component system.
+
+- **`render()`** (async): calling this method directly will cause a rerender. Note
+  that this should be very rare to have to do it manually, the Owl framework is
+  most of the time responsible for doing that at an appropriate moment.
+
+  Note that the render method is asynchronous, so one cannot observe the updated
+  DOM in the same stack frame.
+
+- **`shouldUpdate(nextProps)`**: this method is called each time a component's props
+  are updated. It returns a boolean, which indicates if the widget should
+  ignore a props update. If it returns false, then `willUpdateProps` will not
+  be called, and no rendering will occur. Its default implementation is to
+  always return true. This is an optimization, similar to React's `shouldComponentUpdate`. Most of the time, this should not be used, but it
+  can be useful if we are handling large number of components.
+
+- **`updateEnv(nextEnv)`**: update the environment of a component and all its
+  children. This forces a complete rerender. For example, this could be useful
+  if we have a `isMobile` key in the environment, to decide if we want a mobile
+  interface or a destkop one.
+
+- **`set(target, key, value)`**. This method is necessary in some cases when we
+  need to modify the state of the component in a way that is not visible to the
+  observer (see [observer's technical limitations](observer.md#technical-limitations)).
+  For example, if we need to add a key to the state.
+
+- **`destroy()`**. As its name suggests, this method will remove the component,
+  and perform all necessary cleanup, such as unmounting the component, its children,
+  removing the parent/children relationship. This method should almost never be
+  called directly (except maybe on the root component), but should be done by the
+  framework instead.
+
+### Lifecycle
+
+A solid and robust component system needs useful hooks/methods to help
+developers write components. Here is a complete description of the lifecycle of
+a owl component:
+
+| Method                                           | Description                             |
+| ------------------------------------------------ | --------------------------------------- |
+| **[constructor](#constructor)**                  | constructor                             |
+| **[willStart](#willStart)**                      | async, before first rendering           |
+| **[mounted](#mounted)**                          | when component is render and in DOM     |
+| **[willUpdateProps](#willupdatepropsnextprops)** | async, before props update              |
+| **[willPatch](#willpatch)**              | just before the DOM is patched          |
+| **[patched](#patchedsnapshot)**                          | just after the DOM is patched           |
+| **[willUnmount](#willUnmount)**                  | just before removing component from DOM |
+
+Notes:
+
+- hooks call order is precisely defined: `[willX]` hooks are called first on parent,
+  then on children, and `[Xed]` are called in the reverse order: first children,
+  then parent.
+- no hook method should ever be called manually. They are supposed to be
+called by the owl framework whenever it is required.
+
+#### `constructor(parent, props)`
+
+The constructor is not exactly a hook, it is the regular,
+normal, constructor of the component. Since it is not a hook, you need to make
+sure that `super` is called.
+
+This is usually where you would set the initial state and the template of the
+component.
+
+```javascript
+  constructor(parent, props) {
+    super(parent, props);
+    this.state = {someValue: true};
+    this.template = 'mytemplate';
+  }
+```
+
+Note that with ESNext class fields, the constructor method does not need to be
+implemented in most cases:
+
+```javascript
+class ClickCounter extends owl.Component {
+  template = "click-counter";
+  state = { value: 0 };
+
+  ...
+}
+```
+
+#### `willStart()`
+
+willStart is an asynchronous hook that can be implemented to
+perform some action before the initial rendering of a component.
+
+It will be called exactly once before the initial rendering. It is useful
+in some cases, for example, to load external assets (such as a JS library)
+before the widget is rendered. Another use case is to load data from a server.
+
+```javascript
+  async willStart() {
+    await owl.utils.loadJS("my-awesome-lib.js");
+  }
+```
+
+At this point, the component is not yet rendered. Note that a slow `willStart` method will slow down the rendering of the user
+interface. Therefore, some care should be made to make this method as
+fast as possible.
+
+The widget rendering will take place after `willStart` is completed.
+
+#### `mounted()`
+
+`mounted` is called each time a component is attached to the
+DOM, after the initial rendering and possibly later if the component was unmounted
+and remounted. At this point, the component is considered _active_. This is a good place to add some listeners, or to interact with the
+DOM, if the component needs to perform some measure for example.
+
+It is the opposite of `willUnmount`. If a component has been mounted, it will
+always be unmounted at some point in the future.
+
+The mounted method will be called recursively on each of its children. First,
+the parent, then all its children.
+
+Note that the state is now observed. It is however allowed (but not encouraged)
+to modify the state in the `mounted` hook. Doing so will cause a rerender,
+which will not be perceptible by the user, but will slightly slow down the
+component.
+
+#### `willUpdateProps(nextProps)`
+
+The willUpdateProps is an asynchronous hook, called just before new props
+are set. This is useful if the component needs some asynchronous task
+performed, depending on the props (for example, assuming that the props are
+some record Id, fetching the record data).
+
+```javascript
+  willUpdateProps(nextProps) {
+    return this.loadData({id: nextProps.id});
+  }
+```
+
+This hook is not called during the first render (but willStart is called
+and performs a similar job).
+
+#### `willPatch()`
+
+The willPatch hook is called just before the DOM patching process starts.
+It is not called on the initial render. This is useful to read some
+information from the DOM. For example, the current position of the
+scrollbar.
+
+Note that modifying the state object is not allowed here. This method is called just
+before an actual DOM patch, and is only intended to be used to save some local
+DOM state.  Also, it will not be called if the widget is not in the DOM (this can
+happen with widgets with `t-keepalive`).
+
+The return value of this method will be given as the first argument of the
+corresponding `patched` call.
+
+#### `patched(snapshot)`
+
+This hook is called whenever a component did actually update its DOM (most
+likely via a change in its state/props or environment).
+
+This method is not called on the initial render. It is useful to interact
+with the DOM (for example, through an external library) whenever the
+component was patched.  Note that this hook will not be called if the widget is
+not in the DOM (this can happen with widgets with `t-keepalive`).
+
+The `snapshot` parameter is the result of the previous `willPatch` call.
+
+Updating the widget state in this hook is possible, but not encouraged.
+One need to be careful, because updates here will cause rerender, which in
+turn will cause other calls to patched. So, we need to be particularly
+careful at avoiding endless cycles.
+
+#### `willUnmount()`
+
+willUnmount is a hook that is called each time just before a component is unmounted from
+the DOM. This is a good place to remove some listeners, for example.
+
+```javascript
+  mounted() {
+    this.env.bus.on('someevent', this, this.doSomething);
+  }
+  willUnmount() {
+    this.env.bus.off('someevent', this, this.doSomething);
+  }
+```
+
+This is the opposite method of `mounted`. The `willUnmount` method will be
+called in reverse order: first the children, then the parents.

doc/observer.md

@@ -0,0 +1,54 @@
+# 🦉 Observer 🦉
+
+Owl need to be able to react to state changes. For example, whenever the state
+of a component is changed, we need to rerender it. To help with that, we have
+an Observer class. Its job is to observe some object state, and react to any
+change. To do that, it recursively replace all keys of the observed state by
+getters and setters.
+
+For example, this code will display `update` in the console:
+
+```javascript
+const observer = new owl.Observer();
+observer.notifyCB = () => console.log("update");
+observer.observe(obj);
+
+const obj = { a: { b: 1 } };
+obj.a.b = 2;
+```
+
+## Technical Limitations
+
+Since the observer uses getters and setters, it is actually unable to react to
+changes in two situations:
+
+- adding a key to an object:
+
+  ```javascript
+  const observer = new owl.Observer();
+  const obj = { a: 1 };
+  observer.observe(obj);
+  obj.b = 2; // will do nothing
+  ```
+
+  In that case, we need a way to tell the observer that something happened.
+  This can be done by using the `set` method:
+
+  ```javascript
+  observer.set(obj, "b", 2);
+  ```
+
+- modifying an array by setting a new value at a given index:
+
+  ```javascript
+  const observer = new owl.Observer();
+  const obj = { todos: [{ id: 1, text: "todo" }] };
+  observer.observe(obj);
+  obj[0] = { id: 2, text: "othertodo" }; // will do nothing, and obj[0] is not observed
+  ```
+
+  In that case, the solution is the same, we can simply use the `set` method:
+
+  ```javascript
+  observer.set(obj, 0, { id: 2, text: "othertodo" });
+  ```

doc/quick_start.md

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

doc/qweb.md

@@ -0,0 +1,361 @@
+# 🦉 QWeb 🦉
+
+## Content
+
+- [Overview](#overview)
+- [QWeb Specification](#qweb-specification)
+    - [Static html nodes](#static-html-nodes)
+    - [`t-esc` directive](#t-esc-directive)
+    - [`t-raw` directive](#t-raw-directive)
+    - [`t-set` directive](#t-set-directive)
+    - [`t-if` directive](#t-if-directive)
+    - [Expression evaluation](#expression-evaluation)
+    - [`t-att` directive (dynamic attributes)](#t-att-directive-dynamic-attributes)
+- [JS/OWL Specific Extensions](#jsowl-specific-extensions)
+    - [`t-on` directive](#t-on-directive)
+    - [Component: `t-widget`, `t-props`](#component-t-widget-t-props)
+    - [`t-ref` directive](#t-ref-directive)
+    - [`t-key` directive](#t-key-directive)
+    - [`t-transition` directive](#t-transition)
+    - [Debugging (`t-debug` and `t-log`)](#debugging-t-debug-and-t-log)
+    - [White spaces](#white-spaces)
+    - [Root nodes](#root-nodes)
+
+## 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.
+
+The QWeb implementation in the OWL project is slightly different. It compiles
+templates into functions that output a virtual DOM instead of a string. This is
+necessary for the component system. In addition, it has a few extra directives
+(see [OWL Specific Extensions](#owlspecificextensions))
+
+
+## QWeb Specification
+
+
+### Static html nodes
+
+Normal, regular html nodes are rendered into themselves:
+
+```xml
+  <div>hello</div> <!–– rendered as itself ––>
+```
+
+### `t-esc` directive
+
+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>
+```
+
+### `t-raw` directive
+
+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-esc="value"/></p>
+```
+
+rendered with the value `value` set to `<span>foo</span>` in the rendering context yields:
+
+```html
+<p><span>foo</span></p>
+```
+
+### `t-set` directive
+
+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, ...
+
+### `t-if` directive
+
+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>
+```
+
+### Expression evaluation
+
+It is useful to explain the various rules that applies on QWeb expressions. These
+expressions are strings that will be converted to a javascript expression at
+compile time.
+
+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:
+
+   ```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>
+   ```
+
+### `t-att` directive (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> -->
+```
+
+## JS/OWL Specific Extensions
+
+### `t-on` directive
+
+### Component: `t-widget`, `t-props`
+
+### `t-ref` directive
+
+### `t-key` directive
+
+Even though Owl tries to be as declarative as possible, some DOM state is still
+locked inside the DOM: for example, the scrolling state, the current user selection,
+the focused element or the state of an input. This is why we use a virtual dom
+algorithm to keep the actual DOM node as much as possible.  However, this is
+sometimes not enough, and we need to help Owl decide if an element is actually
+the same, or is different. The `t-key` directive is used to give an identity to an element.
+
+There are three main use cases:
+
+- *elements in a list*:
+  ```xml
+    <span t-foreach="todos" t-as="todo" t-key="todo.id">
+        <t t-esc="todo.text"/>
+    </span>
+  ```
+
+- *`t-if`/`t-else`*
+
+- *animations*: give a different identity to a component.  Ex: thread id with
+animations on add/remove message.
+
+### `t-transition` directive
+
+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 creation:
+
+- the css classes `name-enter` and `name-enter-active` will be added before the
+  node is added to 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 .5s;
+}
+.fade-enter, .fade-leave-to {
+    opacity: 0;
+}
+```
+
+Note: you will find more information on animations in the [animation](doc/animations.md)
+documentation.
+
+### Debugging (`t-debug` and `t-log`)
+
+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
+
+
+### 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.

doc/readme.md

@@ -0,0 +1,15 @@
+# 🦉 OWL Documentation 🦉
+
+
+## Reference
+
+- [Component](component.md)
+- [QWeb](qweb.md)
+- [Store](store.md)
+- [Observer](observer.md)
+- [Virtual DOM](vdom.md)
+
+## Miscellaneous
+- [Quick Start](quick_start.md)
+- [Animations](animations.md)
+- [Comparison with React/Vue](comparison.md)

doc/store.md

@@ -0,0 +1,8 @@
+# 🦉 Store 🦉
+
+Managing the state in an application is not an easy task. Many different
+architectures/designs/systems/... have been created. We propose here to use
+the idea of a central store.
+
+- Store
+- connect

doc/vdom.md

@@ -0,0 +1,3 @@
+# 🦉 VDom 🦉
+
+Owl's virtual dom is a fork of [snabbdom](https://github.com/snabbdom/snabbdom).

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

@@ -0,0 +1,218 @@
+import { buildData, startMeasure, stopMeasure } 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.50000": function() {
+        this.addMessages(50000);
+      },
+      "click .updateSomeMessages": function() {
+        this.updateSomeMessages();
+      },
+      "click .clear": function() {
+        this.clear();
+      }
+    },
+    custom_events: {
+      remove_message: "_onRemoveMessage"
+    },
+
+    init: function(parent) {
+      this._super(parent);
+      this.widgets = {};
+      this.isInDom = false;
+      this.messageCount = 0;
+    },
+
+    start: function() {
+      this.$content = this.$(".content");
+      this.$msgCount = this.$(".message_count");
+    },
+    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) {
+      var self = this;
+      startMeasure("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>"));
+      }
+      $.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();
+          stopMeasure();
+        });
+    },
+    clear: function() {
+      startMeasure("clear");
+      this.$content.empty();
+      for (let key in this.widgets) {
+        this.widgets[key].destroy();
+        delete this.widgets[key];
+      }
+      this.messageCount = 0;
+      this.updateMessageCount();
+      stopMeasure();
+    },
+    updateSomeMessages: function() {
+      startMeasure("update every 10th");
+      const widgets = Object.values(this.widgets);
+      for (let i = 0; i < widgets.length; i += 10) {
+        widgets[i].update();
+      }
+      stopMeasure();
+    },
+    _onRemoveMessage: function(ev) {
+      startMeasure("remove message");
+      ev.target.destroy();
+      delete this.widgets[ev.data.id];
+      this.messageCount--;
+      this.updateMessageCount();
+      stopMeasure();
+    }
+  });
+
+  //------------------------------------------------------------------------------
+  // 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();
+});

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

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

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

@@ -0,0 +1,30 @@
+<templates>
+    <div class="main" t-name="root">
+        <div class="left-thing">
+            <div class="message_count">
+                Number of msg: 0
+            </div>
+            <button class="o_btn_msg 100">Add 100 messages</button>
+            <button class="o_btn_msg 1000">Add 1000 messages</button>
+            <button class="o_btn_msg 10000">Add 10000 messages</button>
+            <button class="o_btn_msg 50000">Add 50000 messages</button>
+            <button class="updateSomeMessages">Update every 10th message</button>
+            <button class="clear">Clear</button>
+        </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>

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

@@ -0,0 +1,218 @@
+import { buildData, startMeasure, stopMeasure } 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.50000": function() {
+        this.addMessages(50000);
+      },
+      "click .updateSomeMessages": function() {
+        this.updateSomeMessages();
+      },
+      "click .clear": function() {
+        this.clear();
+      }
+    },
+    custom_events: {
+      remove_message: "_onRemoveMessage"
+    },
+
+    init: function(parent) {
+      this._super(parent);
+      this.widgets = {};
+      this.isInDom = false;
+      this.messageCount = 0;
+    },
+
+    start: function() {
+      this.$content = this.$(".content");
+      this.$msgCount = this.$(".message_count");
+    },
+    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) {
+      var self = this;
+      startMeasure("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>"));
+      }
+      $.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();
+          stopMeasure();
+        });
+    },
+    clear: function() {
+      startMeasure("clear");
+      this.$content.empty();
+      for (let key in this.widgets) {
+        this.widgets[key].destroy();
+        delete this.widgets[key];
+      }
+      this.messageCount = 0;
+      this.updateMessageCount();
+      stopMeasure();
+    },
+    updateSomeMessages: function() {
+      startMeasure("update every 10th");
+      const widgets = Object.values(this.widgets);
+      for (let i = 0; i < widgets.length; i += 10) {
+        widgets[i].update();
+      }
+      stopMeasure();
+    },
+    _onRemoveMessage: function(ev) {
+      startMeasure("remove message");
+      ev.target.destroy();
+      delete this.widgets[ev.data.id];
+      this.messageCount--;
+      this.updateMessageCount();
+      stopMeasure();
+    }
+  });
+
+  //------------------------------------------------------------------------------
+  // 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();
+});

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

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

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

@@ -0,0 +1,30 @@
+<templates>
+    <div class="main" t-name="root">
+        <div class="left-thing">
+            <div class="message_count">
+                Number of msg: 0
+            </div>
+            <button class="o_btn_msg 100">Add 100 messages</button>
+            <button class="o_btn_msg 1000">Add 1000 messages</button>
+            <button class="o_btn_msg 10000">Add 10000 messages</button>
+            <button class="o_btn_msg 50000">Add 50000 messages</button>
+            <button class="updateSomeMessages">Update every 10th message</button>
+            <button class="clear">Clear</button>
+        </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>

extras/benchmarks/owl-0.7.0/app.js

@@ -0,0 +1,85 @@
+import { buildData, startMeasure, stopMeasure } from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  template = "counter";
+  state = { counter: 0 };
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  template = "message";
+  widgets = { Counter };
+
+  shouldUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  template = "root";
+  widgets = { Message };
+  state = { messages: [] };
+
+  addMessages(n) {
+    startMeasure("add " + n);
+    const newMessages = buildData(n);
+    this.state.messages.push.apply(this.state.messages, newMessages);
+    stopMeasure();
+  }
+
+  clear() {
+    startMeasure("clear");
+    this.state.messages = [];
+    stopMeasure();
+  }
+
+  updateSomeMessages() {
+    startMeasure("update every 10th");
+    const messages = this.state.messages;
+    for (let i = 0; i < this.state.messages.length; i += 10) {
+      const msg = Object.assign({}, messages[i]);
+      msg.author += '!!!';
+      this.set(messages, i, msg);
+    }
+    stopMeasure();
+  }
+
+  removeMessage(data) {
+    startMeasure('remove message');
+    const index = this.state.messages.findIndex(m => m.id === data.id);
+    this.state.messages.splice(index, 1);
+    stopMeasure();
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

extras/benchmarks/owl-0.7.0/index.html

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

extras/benchmarks/owl-0.7.0/templates.xml

@@ -0,0 +1,32 @@
+<templates>
+  <div t-name="root" class="main">
+      <div class="left-thing">
+          <div>Number of msg: <t t-esc="state.messages.length"/></div>
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1000 messages</button>
+          <button t-on-click="addMessages(10000)">Add 10000 messages</button>
+          <button t-on-click="addMessages(50000)">Add 50000 messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th message</button>
+          <button t-on-click="clear">Clear</button>
+      </div>
+      <div class="right-thing">
+          <div class="content">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="message" class="message">
+    <span class="author"><t t-esc="props.author"/></span>
+    <span class="msg"><t t-esc="props.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

extras/benchmarks/owl-0.8.0/app.js

@@ -0,0 +1,84 @@
+import { buildData, startMeasure, stopMeasure } from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  template = "counter";
+  state = { counter: 0 };
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  template = "message";
+  widgets = { Counter };
+
+  shouldUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  template = "root";
+  widgets = { Message };
+  state = { messages: [] };
+
+  addMessages(n) {
+    startMeasure("add " + n);
+    const newMessages = buildData(n);
+    this.state.messages.push.apply(this.state.messages, newMessages);
+    stopMeasure();
+  }
+
+  clear() {
+    startMeasure("clear");
+    this.state.messages = [];
+    stopMeasure();
+  }
+
+  updateSomeMessages() {
+    startMeasure("update every 10th");
+    const messages = this.state.messages;
+    for (let i = 0; i < this.state.messages.length; i += 10) {
+      const msg = Object.assign({}, messages[i]);
+      msg.author += '!!!';
+      this.set(messages, i, msg);
+    }
+    stopMeasure();
+  }
+
+  removeMessage(data) {
+    startMeasure("remove message");
+    const index = this.state.messages.findIndex(m => m.id === data.id);
+    this.state.messages.splice(index, 1);
+    stopMeasure();
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

extras/benchmarks/owl-0.8.0/index.html

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

extras/benchmarks/owl-0.8.0/templates.xml

@@ -0,0 +1,32 @@
+<templates>
+  <div t-name="root" class="main">
+      <div class="left-thing">
+          <div>Number of msg: <t t-esc="state.messages.length"/></div>
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1000 messages</button>
+          <button t-on-click="addMessages(10000)">Add 10000 messages</button>
+          <button t-on-click="addMessages(50000)">Add 50000 messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th message</button>
+          <button t-on-click="clear">Clear</button>
+      </div>
+      <div class="right-thing">
+          <div class="content">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="message" class="message">
+    <span class="author"><t t-esc="props.author"/></span>
+    <span class="msg"><t t-esc="props.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

extras/benchmarks/owl-master/app.js

@@ -0,0 +1,84 @@
+import { buildData, startMeasure, stopMeasure } from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  template = "counter";
+  state = { counter: 0 };
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  template = "message";
+  widgets = { Counter };
+
+  shouldUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  template = "root";
+  widgets = { Message };
+  state = { messages: [] };
+
+  addMessages(n) {
+    startMeasure("add " + n);
+    const newMessages = buildData(n);
+    this.state.messages.push.apply(this.state.messages, newMessages);
+    stopMeasure();
+  }
+
+  clear() {
+    startMeasure("clear");
+    this.state.messages = [];
+    stopMeasure();
+  }
+
+  updateSomeMessages() {
+    startMeasure("update every 10th");
+    const messages = this.state.messages;
+    for (let i = 0; i < this.state.messages.length; i += 10) {
+      const msg = Object.assign({}, messages[i]);
+      msg.author += '!!!';
+      this.set(messages, i, msg);
+    }
+    stopMeasure();
+  }
+
+  removeMessage(data) {
+    startMeasure("remove message");
+    const index = this.state.messages.findIndex(m => m.id === data.id);
+    this.state.messages.splice(index, 1);
+    stopMeasure();
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

extras/benchmarks/owl-master/index.html

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

extras/benchmarks/owl-master/templates.xml

@@ -0,0 +1,32 @@
+<templates>
+  <div t-name="root" class="main">
+      <div class="left-thing">
+          <div>Number of msg: <t t-esc="state.messages.length"/></div>
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1000 messages</button>
+          <button t-on-click="addMessages(10000)">Add 10000 messages</button>
+          <button t-on-click="addMessages(50000)">Add 50000 messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th message</button>
+          <button t-on-click="clear">Clear</button>
+      </div>
+      <div class="right-thing">
+          <div class="content">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="message" class="message">
+    <span class="author"><t t-esc="props.author"/></span>
+    <span class="msg"><t t-esc="props.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

extras/benchmarks/react/app.js

@@ -0,0 +1,221 @@
+import { buildData, startMeasure, stopMeasure } from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      counter: 0
+    };
+    this.increment = this.increment.bind(this);
+  }
+
+  render() {
+    return React.createElement(
+      "div",
+      null,
+      React.createElement(
+        "button",
+        {
+          onClick: this.increment
+        },
+        "Value: ",
+        this.state.counter
+      )
+    );
+  }
+
+  increment() {
+    this.setState({
+      counter: this.state.counter + 1
+    });
+  }
+}
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends React.Component {
+  constructor(props) {
+    super(props);
+    this.removeMessage = this.removeMessage.bind(this);
+  }
+
+  render() {
+    return React.createElement(
+      "div",
+      {
+        className: "message"
+      },
+      React.createElement(
+        "span",
+        {
+          className: "author"
+        },
+        this.props.message.author
+      ),
+      React.createElement(
+        "span",
+        {
+          className: "msg"
+        },
+        this.props.message.msg
+      ),
+      React.createElement(
+        "button",
+        {
+          className: "remove",
+          onClick: this.removeMessage
+        },
+        "Remove"
+      ),
+      React.createElement(Counter, null)
+    );
+  }
+
+  removeMessage() {
+    this.props.removeCB(this.props.message.id);
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class Main extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      messages: []
+    };
+    this.removeMessage = this.removeMessage.bind(this);
+  }
+
+  render() {
+    const msgList = this.state.messages.map(m =>
+      React.createElement(Message, {
+        key: m.id,
+        message: m,
+        removeCB: this.removeMessage
+      })
+    );
+    return React.createElement(
+      "div",
+      {
+        className: "main"
+      },
+      React.createElement(
+        "div",
+        {
+          className: "left-thing"
+        },
+        React.createElement(
+          "div",
+          null,
+          "Number of msg: ",
+          this.state.messages.length
+        ),
+        React.createElement(
+          "button",
+          {
+            onClick: _ => this.addMessages(100)
+          },
+          "Add 100 messages"
+        ),
+        React.createElement(
+          "button",
+          {
+            onClick: _ => this.addMessages(1000)
+          },
+          "Add 1000 messages"
+        ),
+        React.createElement(
+          "button",
+          {
+            onClick: _ => this.addMessages(10000)
+          },
+          "Add 10000 messages"
+        ),
+        React.createElement(
+          "button",
+          {
+            onClick: _ => this.addMessages(50000)
+          },
+          "Add 50000 messages"
+        ),
+        React.createElement(
+          "button",
+          {
+            onClick: _ => this.updateSomeMessages()
+          },
+          "Update every 10th messags"
+        ),
+        React.createElement(
+          "button",
+          {
+            onClick: _ => this.clear()
+          },
+          "Clear"
+        )
+      ),
+      React.createElement(
+        "div",
+        {
+          className: "right-thing"
+        },
+        React.createElement(
+          "div",
+          {
+            className: "content"
+          },
+          msgList
+        )
+      )
+    );
+  }
+
+  addMessages(n) {
+    startMeasure("add " + n);
+    const newMessages = this.state.messages.concat(buildData(n));
+    this.setState({
+      messages: newMessages
+    });
+    stopMeasure();
+  }
+
+  clear() {
+    startMeasure("clear");
+    this.setState({
+      messages: []
+    });
+    stopMeasure();
+  }
+
+  updateSomeMessages() {
+    startMeasure("update every 10th");
+    const messages = this.state.messages;
+    for (let i = 0; i < messages.length; i += 10) {
+      messages[i].author += "!!!";
+    }
+    this.forceUpdate();
+    stopMeasure();
+  }
+
+  removeMessage(id) {
+    startMeasure("remove message");
+    const index = this.state.messages.findIndex(m => m.id === id);
+    const messages = this.state.messages.slice();
+    messages.splice(index, 1);
+    this.setState({
+      messages
+    });
+    stopMeasure();
+  }
+} //-----------------------------
+// INIT
+//-----------------------------
+
+ReactDOM.render(
+  React.createElement(Main, null),
+  document.getElementById("main")
+);

extras/benchmarks/react/index.html

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

extras/benchmarks/react/react-dom.production.min.js

@@ -0,0 +1,220 @@
+/** @license React v16.8.6
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ Modernizr 3.0.0pre (Custom Build) | MIT
+*/
+'use strict';(function(da,pb){"object"===typeof exports&&"undefined"!==typeof module?module.exports=pb(require("react")):"function"===typeof define&&define.amd?define(["react"],pb):da.ReactDOM=pb(da.React)})(this,function(da){function pb(a,b,c,d,e,f,g,h){if(!a){a=void 0;if(void 0===b)a=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[c,d,e,f,g,h],k=0;a=Error(b.replace(/%s/g,function(){return l[k++]}));
+a.name="Invariant Violation"}a.framesToPop=1;throw a;}}function n(a){for(var b=arguments.length-1,c="https://reactjs.org/docs/error-decoder.html?invariant="+a,d=0;d<b;d++)c+="&args[]="+encodeURIComponent(arguments[d+1]);pb(!1,"Minified React error #"+a+"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",c)}function rh(a,b,c,d,e,f,g,h,l){qb=!1;$b=null;sh.apply(th,arguments)}function uh(a,b,c,d,e,f,g,h,l){rh.apply(this,arguments);
+if(qb){if(qb){var k=$b;qb=!1;$b=null}else n("198"),k=void 0;ac||(ac=!0,Yc=k)}}function Ee(){if(bc)for(var a in Na){var b=Na[a],c=bc.indexOf(a);-1<c?void 0:n("96",a);if(!cc[c]){b.extractEvents?void 0:n("97",a);cc[c]=b;c=b.eventTypes;for(var d in c){var e=void 0;var f=c[d],g=b,h=d;Zc.hasOwnProperty(h)?n("99",h):void 0;Zc[h]=f;var l=f.phasedRegistrationNames;if(l){for(e in l)l.hasOwnProperty(e)&&Fe(l[e],g,h);e=!0}else f.registrationName?(Fe(f.registrationName,g,h),e=!0):e=!1;e?void 0:n("98",d,a)}}}}
+function Fe(a,b,c){Oa[a]?n("100",a):void 0;Oa[a]=b;$c[a]=b.eventTypes[c].dependencies}function Ge(a,b,c){var d=a.type||"unknown-event";a.currentTarget=He(c);uh(d,b,void 0,a);a.currentTarget=null}function Pa(a,b){null==b?n("30"):void 0;if(null==a)return b;if(Array.isArray(a)){if(Array.isArray(b))return a.push.apply(a,b),a;a.push(b);return a}return Array.isArray(b)?[a].concat(b):[a,b]}function ad(a,b,c){Array.isArray(a)?a.forEach(b,c):a&&b.call(c,a)}function Ie(a,b){var c=a.stateNode;if(!c)return null;
+var d=bd(c);if(!d)return null;c=d[b];a:switch(b){case "onClick":case "onClickCapture":case "onDoubleClick":case "onDoubleClickCapture":case "onMouseDown":case "onMouseDownCapture":case "onMouseMove":case "onMouseMoveCapture":case "onMouseUp":case "onMouseUpCapture":(d=!d.disabled)||(a=a.type,d=!("button"===a||"input"===a||"select"===a||"textarea"===a));a=!d;break a;default:a=!1}if(a)return null;c&&"function"!==typeof c?n("231",b,typeof c):void 0;return c}function cd(a){null!==a&&(rb=Pa(rb,a));a=rb;
+rb=null;if(a&&(ad(a,vh),rb?n("95"):void 0,ac))throw a=Yc,ac=!1,Yc=null,a;}function dc(a){if(a[ea])return a[ea];for(;!a[ea];)if(a.parentNode)a=a.parentNode;else return null;a=a[ea];return 5===a.tag||6===a.tag?a:null}function Je(a){a=a[ea];return!a||5!==a.tag&&6!==a.tag?null:a}function Da(a){if(5===a.tag||6===a.tag)return a.stateNode;n("33")}function dd(a){return a[ec]||null}function fa(a){do a=a.return;while(a&&5!==a.tag);return a?a:null}function Ke(a,b,c){if(b=Ie(a,c.dispatchConfig.phasedRegistrationNames[b]))c._dispatchListeners=
+Pa(c._dispatchListeners,b),c._dispatchInstances=Pa(c._dispatchInstances,a)}function wh(a){if(a&&a.dispatchConfig.phasedRegistrationNames){for(var b=a._targetInst,c=[];b;)c.push(b),b=fa(b);for(b=c.length;0<b--;)Ke(c[b],"captured",a);for(b=0;b<c.length;b++)Ke(c[b],"bubbled",a)}}function ed(a,b,c){a&&c&&c.dispatchConfig.registrationName&&(b=Ie(a,c.dispatchConfig.registrationName))&&(c._dispatchListeners=Pa(c._dispatchListeners,b),c._dispatchInstances=Pa(c._dispatchInstances,a))}function xh(a){a&&a.dispatchConfig.registrationName&&
+ed(a._targetInst,null,a)}function Qa(a){ad(a,wh)}function fc(a,b){var c={};c[a.toLowerCase()]=b.toLowerCase();c["Webkit"+a]="webkit"+b;c["Moz"+a]="moz"+b;return c}function gc(a){if(fd[a])return fd[a];if(!Ra[a])return a;var b=Ra[a],c;for(c in b)if(b.hasOwnProperty(c)&&c in Le)return fd[a]=b[c];return a}function Me(){if(hc)return hc;var a,b=gd,c=b.length,d,e="value"in qa?qa.value:qa.textContent,f=e.length;for(a=0;a<c&&b[a]===e[a];a++);var g=c-a;for(d=1;d<=g&&b[c-d]===e[f-d];d++);return hc=e.slice(a,
+1<d?1-d:void 0)}function ic(){return!0}function jc(){return!1}function J(a,b,c,d){this.dispatchConfig=a;this._targetInst=b;this.nativeEvent=c;a=this.constructor.Interface;for(var e in a)a.hasOwnProperty(e)&&((b=a[e])?this[e]=b(c):"target"===e?this.target=d:this[e]=c[e]);this.isDefaultPrevented=(null!=c.defaultPrevented?c.defaultPrevented:!1===c.returnValue)?ic:jc;this.isPropagationStopped=jc;return this}function yh(a,b,c,d){if(this.eventPool.length){var e=this.eventPool.pop();this.call(e,a,b,c,d);
+return e}return new this(a,b,c,d)}function zh(a){a instanceof this?void 0:n("279");a.destructor();10>this.eventPool.length&&this.eventPool.push(a)}function Ne(a){a.eventPool=[];a.getPooled=yh;a.release=zh}function Oe(a,b){switch(a){case "keyup":return-1!==Ah.indexOf(b.keyCode);case "keydown":return 229!==b.keyCode;case "keypress":case "mousedown":case "blur":return!0;default:return!1}}function Pe(a){a=a.detail;return"object"===typeof a&&"data"in a?a.data:null}function Bh(a,b){switch(a){case "compositionend":return Pe(b);
+case "keypress":if(32!==b.which)return null;Qe=!0;return Re;case "textInput":return a=b.data,a===Re&&Qe?null:a;default:return null}}function Ch(a,b){if(Sa)return"compositionend"===a||!hd&&Oe(a,b)?(a=Me(),hc=gd=qa=null,Sa=!1,a):null;switch(a){case "paste":return null;case "keypress":if(!(b.ctrlKey||b.altKey||b.metaKey)||b.ctrlKey&&b.altKey){if(b.char&&1<b.char.length)return b.char;if(b.which)return String.fromCharCode(b.which)}return null;case "compositionend":return Se&&"ko"!==b.locale?null:b.data;
+default:return null}}function Te(a){if(a=Ue(a)){"function"!==typeof id?n("280"):void 0;var b=bd(a.stateNode);id(a.stateNode,a.type,b)}}function Ve(a){Ta?Ua?Ua.push(a):Ua=[a]:Ta=a}function We(){if(Ta){var a=Ta,b=Ua;Ua=Ta=null;Te(a);if(b)for(a=0;a<b.length;a++)Te(b[a])}}function Xe(a,b){if(jd)return a(b);jd=!0;try{return Ye(a,b)}finally{if(jd=!1,null!==Ta||null!==Ua)Ze(),We()}}function $e(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return"input"===b?!!Dh[a.type]:"textarea"===b?!0:!1}function kd(a){a=
+a.target||a.srcElement||window;a.correspondingUseElement&&(a=a.correspondingUseElement);return 3===a.nodeType?a.parentNode:a}function af(a){if(!ra)return!1;a="on"+a;var b=a in document;b||(b=document.createElement("div"),b.setAttribute(a,"return;"),b="function"===typeof b[a]);return b}function bf(a){var b=a.type;return(a=a.nodeName)&&"input"===a.toLowerCase()&&("checkbox"===b||"radio"===b)}function Eh(a){var b=bf(a)?"checked":"value",c=Object.getOwnPropertyDescriptor(a.constructor.prototype,b),d=
+""+a[b];if(!a.hasOwnProperty(b)&&"undefined"!==typeof c&&"function"===typeof c.get&&"function"===typeof c.set){var e=c.get,f=c.set;Object.defineProperty(a,b,{configurable:!0,get:function(){return e.call(this)},set:function(a){d=""+a;f.call(this,a)}});Object.defineProperty(a,b,{enumerable:c.enumerable});return{getValue:function(){return d},setValue:function(a){d=""+a},stopTracking:function(){a._valueTracker=null;delete a[b]}}}}function kc(a){a._valueTracker||(a._valueTracker=Eh(a))}function cf(a){if(!a)return!1;
+var b=a._valueTracker;if(!b)return!0;var c=b.getValue();var d="";a&&(d=bf(a)?a.checked?"true":"false":a.value);a=d;return a!==c?(b.setValue(a),!0):!1}function sb(a){if(null===a||"object"!==typeof a)return null;a=df&&a[df]||a["@@iterator"];return"function"===typeof a?a:null}function sa(a){if(null==a)return null;if("function"===typeof a)return a.displayName||a.name||null;if("string"===typeof a)return a;switch(a){case ld:return"ConcurrentMode";case ta:return"Fragment";case Va:return"Portal";case lc:return"Profiler";
+case md:return"StrictMode";case nd:return"Suspense"}if("object"===typeof a)switch(a.$$typeof){case ef:return"Context.Consumer";case ff:return"Context.Provider";case od:var b=a.render;b=b.displayName||b.name||"";return a.displayName||(""!==b?"ForwardRef("+b+")":"ForwardRef");case pd:return sa(a.type);case gf:if(a=1===a._status?a._result:null)return sa(a)}return null}function qd(a){var b="";do{a:switch(a.tag){case 3:case 4:case 6:case 7:case 10:case 9:var c="";break a;default:var d=a._debugOwner,e=
+a._debugSource,f=sa(a.type);c=null;d&&(c=sa(d.type));d=f;f="";e?f=" (at "+e.fileName.replace(Fh,"")+":"+e.lineNumber+")":c&&(f=" (created by "+c+")");c="\n    in "+(d||"Unknown")+f}b+=c;a=a.return}while(a);return b}function Gh(a){if(hf.call(jf,a))return!0;if(hf.call(kf,a))return!1;if(Hh.test(a))return jf[a]=!0;kf[a]=!0;return!1}function Ih(a,b,c,d){if(null!==c&&0===c.type)return!1;switch(typeof b){case "function":case "symbol":return!0;case "boolean":if(d)return!1;if(null!==c)return!c.acceptsBooleans;
+a=a.toLowerCase().slice(0,5);return"data-"!==a&&"aria-"!==a;default:return!1}}function Jh(a,b,c,d){if(null===b||"undefined"===typeof b||Ih(a,b,c,d))return!0;if(d)return!1;if(null!==c)switch(c.type){case 3:return!b;case 4:return!1===b;case 5:return isNaN(b);case 6:return isNaN(b)||1>b}return!1}function K(a,b,c,d,e){this.acceptsBooleans=2===b||3===b||4===b;this.attributeName=d;this.attributeNamespace=e;this.mustUseProperty=c;this.propertyName=a;this.type=b}function rd(a,b,c,d){var e=A.hasOwnProperty(b)?
+A[b]:null;var f=null!==e?0===e.type:d?!1:!(2<b.length)||"o"!==b[0]&&"O"!==b[0]||"n"!==b[1]&&"N"!==b[1]?!1:!0;f||(Jh(b,c,e,d)&&(c=null),d||null===e?Gh(b)&&(null===c?a.removeAttribute(b):a.setAttribute(b,""+c)):e.mustUseProperty?a[e.propertyName]=null===c?3===e.type?!1:"":c:(b=e.attributeName,d=e.attributeNamespace,null===c?a.removeAttribute(b):(e=e.type,c=3===e||4===e&&!0===c?"":""+c,d?a.setAttributeNS(d,b,c):a.setAttribute(b,c))))}function ua(a){switch(typeof a){case "boolean":case "number":case "object":case "string":case "undefined":return a;
+default:return""}}function sd(a,b){var c=b.checked;return B({},b,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=c?c:a._wrapperState.initialChecked})}function lf(a,b){var c=null==b.defaultValue?"":b.defaultValue,d=null!=b.checked?b.checked:b.defaultChecked;c=ua(null!=b.value?b.value:c);a._wrapperState={initialChecked:d,initialValue:c,controlled:"checkbox"===b.type||"radio"===b.type?null!=b.checked:null!=b.value}}function mf(a,b){b=b.checked;null!=b&&rd(a,"checked",b,!1)}function td(a,
+b){mf(a,b);var c=ua(b.value),d=b.type;if(null!=c)if("number"===d){if(0===c&&""===a.value||a.value!=c)a.value=""+c}else a.value!==""+c&&(a.value=""+c);else if("submit"===d||"reset"===d){a.removeAttribute("value");return}b.hasOwnProperty("value")?ud(a,b.type,c):b.hasOwnProperty("defaultValue")&&ud(a,b.type,ua(b.defaultValue));null==b.checked&&null!=b.defaultChecked&&(a.defaultChecked=!!b.defaultChecked)}function nf(a,b,c){if(b.hasOwnProperty("value")||b.hasOwnProperty("defaultValue")){var d=b.type;
+if(!("submit"!==d&&"reset"!==d||void 0!==b.value&&null!==b.value))return;b=""+a._wrapperState.initialValue;c||b===a.value||(a.value=b);a.defaultValue=b}c=a.name;""!==c&&(a.name="");a.defaultChecked=!a.defaultChecked;a.defaultChecked=!!a._wrapperState.initialChecked;""!==c&&(a.name=c)}function ud(a,b,c){if("number"!==b||a.ownerDocument.activeElement!==a)null==c?a.defaultValue=""+a._wrapperState.initialValue:a.defaultValue!==""+c&&(a.defaultValue=""+c)}function of(a,b,c){a=J.getPooled(pf.change,a,b,
+c);a.type="change";Ve(c);Qa(a);return a}function Kh(a){cd(a)}function mc(a){var b=Da(a);if(cf(b))return a}function Lh(a,b){if("change"===a)return b}function qf(){tb&&(tb.detachEvent("onpropertychange",rf),ub=tb=null)}function rf(a){"value"===a.propertyName&&mc(ub)&&(a=of(ub,a,kd(a)),Xe(Kh,a))}function Mh(a,b,c){"focus"===a?(qf(),tb=b,ub=c,tb.attachEvent("onpropertychange",rf)):"blur"===a&&qf()}function Nh(a,b){if("selectionchange"===a||"keyup"===a||"keydown"===a)return mc(ub)}function Oh(a,b){if("click"===
+a)return mc(b)}function Ph(a,b){if("input"===a||"change"===a)return mc(b)}function Qh(a){var b=this.nativeEvent;return b.getModifierState?b.getModifierState(a):(a=Rh[a])?!!b[a]:!1}function vd(a){return Qh}function Ea(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}function vb(a,b){if(Ea(a,b))return!0;if("object"!==typeof a||null===a||"object"!==typeof b||null===b)return!1;var c=Object.keys(a),d=Object.keys(b);if(c.length!==d.length)return!1;for(d=0;d<c.length;d++)if(!Sh.call(b,c[d])||!Ea(a[c[d]],
+b[c[d]]))return!1;return!0}function wb(a){var b=a;if(a.alternate)for(;b.return;)b=b.return;else{if(0!==(b.effectTag&2))return 1;for(;b.return;)if(b=b.return,0!==(b.effectTag&2))return 1}return 3===b.tag?2:3}function sf(a){2!==wb(a)?n("188"):void 0}function Th(a){var b=a.alternate;if(!b)return b=wb(a),3===b?n("188"):void 0,1===b?null:a;for(var c=a,d=b;;){var e=c.return,f=e?e.alternate:null;if(!e||!f)break;if(e.child===f.child){for(var g=e.child;g;){if(g===c)return sf(e),a;if(g===d)return sf(e),b;g=
+g.sibling}n("188")}if(c.return!==d.return)c=e,d=f;else{g=!1;for(var h=e.child;h;){if(h===c){g=!0;c=e;d=f;break}if(h===d){g=!0;d=e;c=f;break}h=h.sibling}if(!g){for(h=f.child;h;){if(h===c){g=!0;c=f;d=e;break}if(h===d){g=!0;d=f;c=e;break}h=h.sibling}g?void 0:n("189")}}c.alternate!==d?n("190"):void 0}3!==c.tag?n("188"):void 0;return c.stateNode.current===c?a:b}function tf(a){a=Th(a);if(!a)return null;for(var b=a;;){if(5===b.tag||6===b.tag)return b;if(b.child)b.child.return=b,b=b.child;else{if(b===a)break;
+for(;!b.sibling;){if(!b.return||b.return===a)return null;b=b.return}b.sibling.return=b.return;b=b.sibling}}return null}function nc(a){var b=a.keyCode;"charCode"in a?(a=a.charCode,0===a&&13===b&&(a=13)):a=b;10===a&&(a=13);return 32<=a||13===a?a:0}function uf(a,b){var c=a[0];a=a[1];var d="on"+(a[0].toUpperCase()+a.slice(1));b={phasedRegistrationNames:{bubbled:d,captured:d+"Capture"},dependencies:[c],isInteractive:b};vf[a]=b;wd[c]=b}function Uh(a){var b=a.targetInst,c=b;do{if(!c){a.ancestors.push(c);
+break}var d;for(d=c;d.return;)d=d.return;d=3!==d.tag?null:d.stateNode.containerInfo;if(!d)break;a.ancestors.push(c);c=dc(d)}while(c);for(c=0;c<a.ancestors.length;c++){b=a.ancestors[c];var e=kd(a.nativeEvent);d=a.topLevelType;for(var f=a.nativeEvent,g=null,h=0;h<cc.length;h++){var l=cc[h];l&&(l=l.extractEvents(d,b,f,e))&&(g=Pa(g,l))}cd(g)}}function r(a,b){if(!b)return null;var c=(wf(a)?xf:oc).bind(null,a);b.addEventListener(a,c,!1)}function pc(a,b){if(!b)return null;var c=(wf(a)?xf:oc).bind(null,a);
+b.addEventListener(a,c,!0)}function xf(a,b){yf(oc,a,b)}function oc(a,b){if(qc){var c=kd(b);c=dc(c);null===c||"number"!==typeof c.tag||2===wb(c)||(c=null);if(rc.length){var d=rc.pop();d.topLevelType=a;d.nativeEvent=b;d.targetInst=c;a=d}else a={topLevelType:a,nativeEvent:b,targetInst:c,ancestors:[]};try{Xe(Uh,a)}finally{a.topLevelType=null,a.nativeEvent=null,a.targetInst=null,a.ancestors.length=0,10>rc.length&&rc.push(a)}}}function zf(a){Object.prototype.hasOwnProperty.call(a,sc)||(a[sc]=Vh++,Af[a[sc]]=
+{});return Af[a[sc]]}function xd(a){a=a||("undefined"!==typeof document?document:void 0);if("undefined"===typeof a)return null;try{return a.activeElement||a.body}catch(b){return a.body}}function Bf(a){for(;a&&a.firstChild;)a=a.firstChild;return a}function Cf(a,b){var c=Bf(a);a=0;for(var d;c;){if(3===c.nodeType){d=a+c.textContent.length;if(a<=b&&d>=b)return{node:c,offset:b-a};a=d}a:{for(;c;){if(c.nextSibling){c=c.nextSibling;break a}c=c.parentNode}c=void 0}c=Bf(c)}}function Df(a,b){return a&&b?a===
+b?!0:a&&3===a.nodeType?!1:b&&3===b.nodeType?Df(a,b.parentNode):"contains"in a?a.contains(b):a.compareDocumentPosition?!!(a.compareDocumentPosition(b)&16):!1:!1}function Ef(){for(var a=window,b=xd();b instanceof a.HTMLIFrameElement;){try{var c="string"===typeof b.contentWindow.location.href}catch(d){c=!1}if(c)a=b.contentWindow;else break;b=xd(a.document)}return b}function yd(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return b&&("input"===b&&("text"===a.type||"search"===a.type||"tel"===a.type||
+"url"===a.type||"password"===a.type)||"textarea"===b||"true"===a.contentEditable)}function Wh(){var a=Ef();if(yd(a)){if("selectionStart"in a)var b={start:a.selectionStart,end:a.selectionEnd};else a:{b=(b=a.ownerDocument)&&b.defaultView||window;var c=b.getSelection&&b.getSelection();if(c&&0!==c.rangeCount){b=c.anchorNode;var d=c.anchorOffset,e=c.focusNode;c=c.focusOffset;try{b.nodeType,e.nodeType}catch(cj){b=null;break a}var f=0,g=-1,h=-1,l=0,k=0,m=a,n=null;b:for(;;){for(var p;;){m!==b||0!==d&&3!==
+m.nodeType||(g=f+d);m!==e||0!==c&&3!==m.nodeType||(h=f+c);3===m.nodeType&&(f+=m.nodeValue.length);if(null===(p=m.firstChild))break;n=m;m=p}for(;;){if(m===a)break b;n===b&&++l===d&&(g=f);n===e&&++k===c&&(h=f);if(null!==(p=m.nextSibling))break;m=n;n=m.parentNode}m=p}b=-1===g||-1===h?null:{start:g,end:h}}else b=null}b=b||{start:0,end:0}}else b=null;return{focusedElem:a,selectionRange:b}}function Xh(a){var b=Ef(),c=a.focusedElem,d=a.selectionRange;if(b!==c&&c&&c.ownerDocument&&Df(c.ownerDocument.documentElement,
+c)){if(null!==d&&yd(c))if(b=d.start,a=d.end,void 0===a&&(a=b),"selectionStart"in c)c.selectionStart=b,c.selectionEnd=Math.min(a,c.value.length);else if(a=(b=c.ownerDocument||document)&&b.defaultView||window,a.getSelection){a=a.getSelection();var e=c.textContent.length,f=Math.min(d.start,e);d=void 0===d.end?f:Math.min(d.end,e);!a.extend&&f>d&&(e=d,d=f,f=e);e=Cf(c,f);var g=Cf(c,d);e&&g&&(1!==a.rangeCount||a.anchorNode!==e.node||a.anchorOffset!==e.offset||a.focusNode!==g.node||a.focusOffset!==g.offset)&&
+(b=b.createRange(),b.setStart(e.node,e.offset),a.removeAllRanges(),f>d?(a.addRange(b),a.extend(g.node,g.offset)):(b.setEnd(g.node,g.offset),a.addRange(b)))}b=[];for(a=c;a=a.parentNode;)1===a.nodeType&&b.push({element:a,left:a.scrollLeft,top:a.scrollTop});"function"===typeof c.focus&&c.focus();for(c=0;c<b.length;c++)a=b[c],a.element.scrollLeft=a.left,a.element.scrollTop=a.top}}function Gf(a,b){var c=b.window===b?b.document:9===b.nodeType?b:b.ownerDocument;if(zd||null==Wa||Wa!==xd(c))return null;c=
+Wa;"selectionStart"in c&&yd(c)?c={start:c.selectionStart,end:c.selectionEnd}:(c=(c.ownerDocument&&c.ownerDocument.defaultView||window).getSelection(),c={anchorNode:c.anchorNode,anchorOffset:c.anchorOffset,focusNode:c.focusNode,focusOffset:c.focusOffset});return xb&&vb(xb,c)?null:(xb=c,a=J.getPooled(Hf.select,Ad,a,b),a.type="select",a.target=Wa,Qa(a),a)}function Yh(a){var b="";da.Children.forEach(a,function(a){null!=a&&(b+=a)});return b}function Bd(a,b){a=B({children:void 0},b);if(b=Yh(b.children))a.children=
+b;return a}function Xa(a,b,c,d){a=a.options;if(b){b={};for(var e=0;e<c.length;e++)b["$"+c[e]]=!0;for(c=0;c<a.length;c++)e=b.hasOwnProperty("$"+a[c].value),a[c].selected!==e&&(a[c].selected=e),e&&d&&(a[c].defaultSelected=!0)}else{c=""+ua(c);b=null;for(e=0;e<a.length;e++){if(a[e].value===c){a[e].selected=!0;d&&(a[e].defaultSelected=!0);return}null!==b||a[e].disabled||(b=a[e])}null!==b&&(b.selected=!0)}}function Cd(a,b){null!=b.dangerouslySetInnerHTML?n("91"):void 0;return B({},b,{value:void 0,defaultValue:void 0,
+children:""+a._wrapperState.initialValue})}function If(a,b){var c=b.value;null==c&&(c=b.defaultValue,b=b.children,null!=b&&(null!=c?n("92"):void 0,Array.isArray(b)&&(1>=b.length?void 0:n("93"),b=b[0]),c=b),null==c&&(c=""));a._wrapperState={initialValue:ua(c)}}function Jf(a,b){var c=ua(b.value),d=ua(b.defaultValue);null!=c&&(c=""+c,c!==a.value&&(a.value=c),null==b.defaultValue&&a.defaultValue!==c&&(a.defaultValue=c));null!=d&&(a.defaultValue=""+d)}function Kf(a){switch(a){case "svg":return"http://www.w3.org/2000/svg";
+case "math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function Dd(a,b){return null==a||"http://www.w3.org/1999/xhtml"===a?Kf(b):"http://www.w3.org/2000/svg"===a&&"foreignObject"===b?"http://www.w3.org/1999/xhtml":a}function Lf(a,b,c){return null==b||"boolean"===typeof b||""===b?"":c||"number"!==typeof b||0===b||yb.hasOwnProperty(a)&&yb[a]?(""+b).trim():b+"px"}function Mf(a,b){a=a.style;for(var c in b)if(b.hasOwnProperty(c)){var d=0===c.indexOf("--"),
+e=Lf(c,b[c],d);"float"===c&&(c="cssFloat");d?a.setProperty(c,e):a[c]=e}}function Ed(a,b){b&&(Zh[a]&&(null!=b.children||null!=b.dangerouslySetInnerHTML?n("137",a,""):void 0),null!=b.dangerouslySetInnerHTML&&(null!=b.children?n("60"):void 0,"object"===typeof b.dangerouslySetInnerHTML&&"__html"in b.dangerouslySetInnerHTML?void 0:n("61")),null!=b.style&&"object"!==typeof b.style?n("62",""):void 0)}function Fd(a,b){if(-1===a.indexOf("-"))return"string"===typeof b.is;switch(a){case "annotation-xml":case "color-profile":case "font-face":case "font-face-src":case "font-face-uri":case "font-face-format":case "font-face-name":case "missing-glyph":return!1;
+default:return!0}}function ha(a,b){a=9===a.nodeType||11===a.nodeType?a:a.ownerDocument;var c=zf(a);b=$c[b];for(var d=0;d<b.length;d++){var e=b[d];if(!c.hasOwnProperty(e)||!c[e]){switch(e){case "scroll":pc("scroll",a);break;case "focus":case "blur":pc("focus",a);pc("blur",a);c.blur=!0;c.focus=!0;break;case "cancel":case "close":af(e)&&pc(e,a);break;case "invalid":case "submit":case "reset":break;default:-1===zb.indexOf(e)&&r(e,a)}c[e]=!0}}}function tc(){}function Nf(a,b){switch(a){case "button":case "input":case "select":case "textarea":return!!b.autoFocus}return!1}
+function Gd(a,b){return"textarea"===a||"option"===a||"noscript"===a||"string"===typeof b.children||"number"===typeof b.children||"object"===typeof b.dangerouslySetInnerHTML&&null!==b.dangerouslySetInnerHTML&&null!=b.dangerouslySetInnerHTML.__html}function $h(a,b,c,d,e,f){a[ec]=e;"input"===c&&"radio"===e.type&&null!=e.name&&mf(a,e);Fd(c,d);d=Fd(c,e);for(f=0;f<b.length;f+=2){var g=b[f],h=b[f+1];"style"===g?Mf(a,h):"dangerouslySetInnerHTML"===g?Of(a,h):"children"===g?Ab(a,h):rd(a,g,h,d)}switch(c){case "input":td(a,
+e);break;case "textarea":Jf(a,e);break;case "select":b=a._wrapperState.wasMultiple,a._wrapperState.wasMultiple=!!e.multiple,c=e.value,null!=c?Xa(a,!!e.multiple,c,!1):b!==!!e.multiple&&(null!=e.defaultValue?Xa(a,!!e.multiple,e.defaultValue,!0):Xa(a,!!e.multiple,e.multiple?[]:"",!1))}}function Hd(a){for(a=a.nextSibling;a&&1!==a.nodeType&&3!==a.nodeType;)a=a.nextSibling;return a}function Pf(a){for(a=a.firstChild;a&&1!==a.nodeType&&3!==a.nodeType;)a=a.nextSibling;return a}function D(a,b){0>Ya||(a.current=
+Id[Ya],Id[Ya]=null,Ya--)}function L(a,b,c){Ya++;Id[Ya]=a.current;a.current=b}function Za(a,b){var c=a.type.contextTypes;if(!c)return va;var d=a.stateNode;if(d&&d.__reactInternalMemoizedUnmaskedChildContext===b)return d.__reactInternalMemoizedMaskedChildContext;var e={},f;for(f in c)e[f]=b[f];d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=b,a.__reactInternalMemoizedMaskedChildContext=e);return e}function E(a){a=a.childContextTypes;return null!==a&&void 0!==a}function uc(a){D(M,a);
+D(F,a)}function Jd(a){D(M,a);D(F,a)}function Qf(a,b,c){F.current!==va?n("168"):void 0;L(F,b,a);L(M,c,a)}function Rf(a,b,c){var d=a.stateNode;a=b.childContextTypes;if("function"!==typeof d.getChildContext)return c;d=d.getChildContext();for(var e in d)e in a?void 0:n("108",sa(b)||"Unknown",e);return B({},c,d)}function vc(a){var b=a.stateNode;b=b&&b.__reactInternalMemoizedMergedChildContext||va;Fa=F.current;L(F,b,a);L(M,M.current,a);return!0}function Sf(a,b,c){var d=a.stateNode;d?void 0:n("169");c?(b=
+Rf(a,b,Fa),d.__reactInternalMemoizedMergedChildContext=b,D(M,a),D(F,a),L(F,b,a)):D(M,a);L(M,c,a)}function Tf(a){return function(b){try{return a(b)}catch(c){}}}function ai(a){if("undefined"===typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var b=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(b.isDisabled||!b.supportsFiber)return!0;try{var c=b.inject(a);Kd=Tf(function(a){return b.onCommitFiberRoot(c,a)});Ld=Tf(function(a){return b.onCommitFiberUnmount(c,a)})}catch(d){}return!0}function bi(a,b,c,d){this.tag=a;this.key=
+c;this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null;this.index=0;this.ref=null;this.pendingProps=b;this.contextDependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null;this.mode=d;this.effectTag=0;this.lastEffect=this.firstEffect=this.nextEffect=null;this.childExpirationTime=this.expirationTime=0;this.alternate=null}function Md(a){a=a.prototype;return!(!a||!a.isReactComponent)}function ci(a){if("function"===typeof a)return Md(a)?1:0;if(void 0!==a&&
+null!==a){a=a.$$typeof;if(a===od)return 11;if(a===pd)return 14}return 2}function Ga(a,b,c){c=a.alternate;null===c?(c=S(a.tag,b,a.key,a.mode),c.elementType=a.elementType,c.type=a.type,c.stateNode=a.stateNode,c.alternate=a,a.alternate=c):(c.pendingProps=b,c.effectTag=0,c.nextEffect=null,c.firstEffect=null,c.lastEffect=null);c.childExpirationTime=a.childExpirationTime;c.expirationTime=a.expirationTime;c.child=a.child;c.memoizedProps=a.memoizedProps;c.memoizedState=a.memoizedState;c.updateQueue=a.updateQueue;
+c.contextDependencies=a.contextDependencies;c.sibling=a.sibling;c.index=a.index;c.ref=a.ref;return c}function wc(a,b,c,d,e,f){var g=2;d=a;if("function"===typeof a)Md(a)&&(g=1);else if("string"===typeof a)g=5;else a:switch(a){case ta:return wa(c.children,e,f,b);case ld:return Uf(c,e|3,f,b);case md:return Uf(c,e|2,f,b);case lc:return a=S(12,c,b,e|4),a.elementType=lc,a.type=lc,a.expirationTime=f,a;case nd:return a=S(13,c,b,e),b=nd,a.elementType=b,a.type=b,a.expirationTime=f,a;default:if("object"===typeof a&&
+null!==a)switch(a.$$typeof){case ff:g=10;break a;case ef:g=9;break a;case od:g=11;break a;case pd:g=14;break a;case gf:g=16;d=null;break a}n("130",null==a?a:typeof a,"")}b=S(g,c,b,e);b.elementType=a;b.type=d;b.expirationTime=f;return b}function wa(a,b,c,d){a=S(7,a,d,b);a.expirationTime=c;return a}function Uf(a,b,c,d){a=S(8,a,d,b);b=0===(b&1)?md:ld;a.elementType=b;a.type=b;a.expirationTime=c;return a}function Nd(a,b,c){a=S(6,a,null,b);a.expirationTime=c;return a}function Od(a,b,c){b=S(4,null!==a.children?
+a.children:[],a.key,b);b.expirationTime=c;b.stateNode={containerInfo:a.containerInfo,pendingChildren:null,implementation:a.implementation};return b}function Bb(a,b){a.didError=!1;var c=a.earliestPendingTime;0===c?a.earliestPendingTime=a.latestPendingTime=b:c<b?a.earliestPendingTime=b:a.latestPendingTime>b&&(a.latestPendingTime=b);xc(b,a)}function di(a,b){a.didError=!1;if(0===b)a.earliestPendingTime=0,a.latestPendingTime=0,a.earliestSuspendedTime=0,a.latestSuspendedTime=0,a.latestPingedTime=0;else{b<
+a.latestPingedTime&&(a.latestPingedTime=0);var c=a.latestPendingTime;0!==c&&(c>b?a.earliestPendingTime=a.latestPendingTime=0:a.earliestPendingTime>b&&(a.earliestPendingTime=a.latestPendingTime));c=a.earliestSuspendedTime;0===c?Bb(a,b):b<a.latestSuspendedTime?(a.earliestSuspendedTime=0,a.latestSuspendedTime=0,a.latestPingedTime=0,Bb(a,b)):b>c&&Bb(a,b)}xc(0,a)}function Vf(a,b){a.didError=!1;a.latestPingedTime>=b&&(a.latestPingedTime=0);var c=a.earliestPendingTime,d=a.latestPendingTime;c===b?a.earliestPendingTime=
+d===b?a.latestPendingTime=0:d:d===b&&(a.latestPendingTime=c);c=a.earliestSuspendedTime;d=a.latestSuspendedTime;0===c?a.earliestSuspendedTime=a.latestSuspendedTime=b:c<b?a.earliestSuspendedTime=b:d>b&&(a.latestSuspendedTime=b);xc(b,a)}function Wf(a,b){var c=a.earliestPendingTime;a=a.earliestSuspendedTime;c>b&&(b=c);a>b&&(b=a);return b}function xc(a,b){var c=b.earliestSuspendedTime,d=b.latestSuspendedTime,e=b.earliestPendingTime,f=b.latestPingedTime;e=0!==e?e:f;0===e&&(0===a||d<a)&&(e=d);a=e;0!==a&&
+c>a&&(a=c);b.nextExpirationTimeToWorkOn=e;b.expirationTime=a}function P(a,b){if(a&&a.defaultProps){b=B({},b);a=a.defaultProps;for(var c in a)void 0===b[c]&&(b[c]=a[c])}return b}function ei(a){var b=a._result;switch(a._status){case 1:return b;case 2:throw b;case 0:throw b;default:a._status=0;b=a._ctor;b=b();b.then(function(b){0===a._status&&(b=b.default,a._status=1,a._result=b)},function(b){0===a._status&&(a._status=2,a._result=b)});switch(a._status){case 1:return a._result;case 2:throw a._result;
+}a._result=b;throw b;}}function yc(a,b,c,d){b=a.memoizedState;c=c(d,b);c=null===c||void 0===c?b:B({},b,c);a.memoizedState=c;d=a.updateQueue;null!==d&&0===a.expirationTime&&(d.baseState=c)}function Xf(a,b,c,d,e,f,g){a=a.stateNode;return"function"===typeof a.shouldComponentUpdate?a.shouldComponentUpdate(d,f,g):b.prototype&&b.prototype.isPureReactComponent?!vb(c,d)||!vb(e,f):!0}function Yf(a,b,c,d){var e=!1;d=va;var f=b.contextType;"object"===typeof f&&null!==f?f=T(f):(d=E(b)?Fa:F.current,e=b.contextTypes,
+f=(e=null!==e&&void 0!==e)?Za(a,d):va);b=new b(c,f);a.memoizedState=null!==b.state&&void 0!==b.state?b.state:null;b.updater=zc;a.stateNode=b;b._reactInternalFiber=a;e&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=d,a.__reactInternalMemoizedMaskedChildContext=f);return b}function Zf(a,b,c,d){a=b.state;"function"===typeof b.componentWillReceiveProps&&b.componentWillReceiveProps(c,d);"function"===typeof b.UNSAFE_componentWillReceiveProps&&b.UNSAFE_componentWillReceiveProps(c,d);b.state!==
+a&&zc.enqueueReplaceState(b,b.state,null)}function Pd(a,b,c,d){var e=a.stateNode;e.props=c;e.state=a.memoizedState;e.refs=$f;var f=b.contextType;"object"===typeof f&&null!==f?e.context=T(f):(f=E(b)?Fa:F.current,e.context=Za(a,f));f=a.updateQueue;null!==f&&(Cb(a,f,c,e,d),e.state=a.memoizedState);f=b.getDerivedStateFromProps;"function"===typeof f&&(yc(a,b,f,c),e.state=a.memoizedState);"function"===typeof b.getDerivedStateFromProps||"function"===typeof e.getSnapshotBeforeUpdate||"function"!==typeof e.UNSAFE_componentWillMount&&
+"function"!==typeof e.componentWillMount||(b=e.state,"function"===typeof e.componentWillMount&&e.componentWillMount(),"function"===typeof e.UNSAFE_componentWillMount&&e.UNSAFE_componentWillMount(),b!==e.state&&zc.enqueueReplaceState(e,e.state,null),f=a.updateQueue,null!==f&&(Cb(a,f,c,e,d),e.state=a.memoizedState));"function"===typeof e.componentDidMount&&(a.effectTag|=4)}function Db(a,b,c){a=c.ref;if(null!==a&&"function"!==typeof a&&"object"!==typeof a){if(c._owner){c=c._owner;var d=void 0;c&&(1!==
+c.tag?n("309"):void 0,d=c.stateNode);d?void 0:n("147",a);var e=""+a;if(null!==b&&null!==b.ref&&"function"===typeof b.ref&&b.ref._stringRef===e)return b.ref;b=function(a){var b=d.refs;b===$f&&(b=d.refs={});null===a?delete b[e]:b[e]=a};b._stringRef=e;return b}"string"!==typeof a?n("284"):void 0;c._owner?void 0:n("290",a)}return a}function Ac(a,b){"textarea"!==a.type&&n("31","[object Object]"===Object.prototype.toString.call(b)?"object with keys {"+Object.keys(b).join(", ")+"}":b,"")}function ag(a){function b(b,
+c){if(a){var d=b.lastEffect;null!==d?(d.nextEffect=c,b.lastEffect=c):b.firstEffect=b.lastEffect=c;c.nextEffect=null;c.effectTag=8}}function c(c,d){if(!a)return null;for(;null!==d;)b(c,d),d=d.sibling;return null}function d(a,b){for(a=new Map;null!==b;)null!==b.key?a.set(b.key,b):a.set(b.index,b),b=b.sibling;return a}function e(a,b,c){a=Ga(a,b,c);a.index=0;a.sibling=null;return a}function f(b,c,d){b.index=d;if(!a)return c;d=b.alternate;if(null!==d)return d=d.index,d<c?(b.effectTag=2,c):d;b.effectTag=
+2;return c}function g(b){a&&null===b.alternate&&(b.effectTag=2);return b}function h(a,b,c,d){if(null===b||6!==b.tag)return b=Nd(c,a.mode,d),b.return=a,b;b=e(b,c,d);b.return=a;return b}function l(a,b,c,d){if(null!==b&&b.elementType===c.type)return d=e(b,c.props,d),d.ref=Db(a,b,c),d.return=a,d;d=wc(c.type,c.key,c.props,null,a.mode,d);d.ref=Db(a,b,c);d.return=a;return d}function k(a,b,c,d){if(null===b||4!==b.tag||b.stateNode.containerInfo!==c.containerInfo||b.stateNode.implementation!==c.implementation)return b=
+Od(c,a.mode,d),b.return=a,b;b=e(b,c.children||[],d);b.return=a;return b}function m(a,b,c,d,f){if(null===b||7!==b.tag)return b=wa(c,a.mode,d,f),b.return=a,b;b=e(b,c,d);b.return=a;return b}function Ff(a,b,c){if("string"===typeof b||"number"===typeof b)return b=Nd(""+b,a.mode,c),b.return=a,b;if("object"===typeof b&&null!==b){switch(b.$$typeof){case Bc:return c=wc(b.type,b.key,b.props,null,a.mode,c),c.ref=Db(a,null,b),c.return=a,c;case Va:return b=Od(b,a.mode,c),b.return=a,b}if(Cc(b)||sb(b))return b=
+wa(b,a.mode,c,null),b.return=a,b;Ac(a,b)}return null}function p(a,b,c,d){var e=null!==b?b.key:null;if("string"===typeof c||"number"===typeof c)return null!==e?null:h(a,b,""+c,d);if("object"===typeof c&&null!==c){switch(c.$$typeof){case Bc:return c.key===e?c.type===ta?m(a,b,c.props.children,d,e):l(a,b,c,d):null;case Va:return c.key===e?k(a,b,c,d):null}if(Cc(c)||sb(c))return null!==e?null:m(a,b,c,d,null);Ac(a,c)}return null}function r(a,b,c,d,e){if("string"===typeof d||"number"===typeof d)return a=
+a.get(c)||null,h(b,a,""+d,e);if("object"===typeof d&&null!==d){switch(d.$$typeof){case Bc:return a=a.get(null===d.key?c:d.key)||null,d.type===ta?m(b,a,d.props.children,e,d.key):l(b,a,d,e);case Va:return a=a.get(null===d.key?c:d.key)||null,k(b,a,d,e)}if(Cc(d)||sb(d))return a=a.get(c)||null,m(b,a,d,e,null);Ac(b,d)}return null}function u(e,g,h,k){for(var l=null,m=null,n=g,q=g=0,v=null;null!==n&&q<h.length;q++){n.index>q?(v=n,n=null):v=n.sibling;var Q=p(e,n,h[q],k);if(null===Q){null===n&&(n=v);break}a&&
+n&&null===Q.alternate&&b(e,n);g=f(Q,g,q);null===m?l=Q:m.sibling=Q;m=Q;n=v}if(q===h.length)return c(e,n),l;if(null===n){for(;q<h.length;q++)if(n=Ff(e,h[q],k))g=f(n,g,q),null===m?l=n:m.sibling=n,m=n;return l}for(n=d(e,n);q<h.length;q++)if(v=r(n,e,q,h[q],k))a&&null!==v.alternate&&n.delete(null===v.key?q:v.key),g=f(v,g,q),null===m?l=v:m.sibling=v,m=v;a&&n.forEach(function(a){return b(e,a)});return l}function x(e,g,h,k){var l=sb(h);"function"!==typeof l?n("150"):void 0;h=l.call(h);null==h?n("151"):void 0;
+for(var m=l=null,q=g,v=g=0,Q=null,t=h.next();null!==q&&!t.done;v++,t=h.next()){q.index>v?(Q=q,q=null):Q=q.sibling;var u=p(e,q,t.value,k);if(null===u){q||(q=Q);break}a&&q&&null===u.alternate&&b(e,q);g=f(u,g,v);null===m?l=u:m.sibling=u;m=u;q=Q}if(t.done)return c(e,q),l;if(null===q){for(;!t.done;v++,t=h.next())t=Ff(e,t.value,k),null!==t&&(g=f(t,g,v),null===m?l=t:m.sibling=t,m=t);return l}for(q=d(e,q);!t.done;v++,t=h.next())t=r(q,e,v,t.value,k),null!==t&&(a&&null!==t.alternate&&q.delete(null===t.key?
+v:t.key),g=f(t,g,v),null===m?l=t:m.sibling=t,m=t);a&&q.forEach(function(a){return b(e,a)});return l}return function(a,d,f,h){var k="object"===typeof f&&null!==f&&f.type===ta&&null===f.key;k&&(f=f.props.children);var l="object"===typeof f&&null!==f;if(l)switch(f.$$typeof){case Bc:a:{l=f.key;for(k=d;null!==k;){if(k.key===l)if(7===k.tag?f.type===ta:k.elementType===f.type){c(a,k.sibling);d=e(k,f.type===ta?f.props.children:f.props,h);d.ref=Db(a,k,f);d.return=a;a=d;break a}else{c(a,k);break}else b(a,k);
+k=k.sibling}f.type===ta?(d=wa(f.props.children,a.mode,h,f.key),d.return=a,a=d):(h=wc(f.type,f.key,f.props,null,a.mode,h),h.ref=Db(a,d,f),h.return=a,a=h)}return g(a);case Va:a:{for(k=f.key;null!==d;){if(d.key===k)if(4===d.tag&&d.stateNode.containerInfo===f.containerInfo&&d.stateNode.implementation===f.implementation){c(a,d.sibling);d=e(d,f.children||[],h);d.return=a;a=d;break a}else{c(a,d);break}else b(a,d);d=d.sibling}d=Od(f,a.mode,h);d.return=a;a=d}return g(a)}if("string"===typeof f||"number"===
+typeof f)return f=""+f,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,f,h),d.return=a,a=d):(c(a,d),d=Nd(f,a.mode,h),d.return=a,a=d),g(a);if(Cc(f))return u(a,d,f,h);if(sb(f))return x(a,d,f,h);l&&Ac(a,f);if("undefined"===typeof f&&!k)switch(a.tag){case 1:case 0:h=a.type,n("152",h.displayName||h.name||"Component")}return c(a,d)}}function Ha(a){a===Eb?n("174"):void 0;return a}function Qd(a,b){L(Fb,b,a);L(Gb,a,a);L(U,Eb,a);var c=b.nodeType;switch(c){case 9:case 11:b=(b=b.documentElement)?b.namespaceURI:Dd(null,
+"");break;default:c=8===c?b.parentNode:b,b=c.namespaceURI||null,c=c.tagName,b=Dd(b,c)}D(U,a);L(U,b,a)}function $a(a){D(U,a);D(Gb,a);D(Fb,a)}function bg(a){Ha(Fb.current);var b=Ha(U.current);var c=Dd(b,a.type);b!==c&&(L(Gb,a,a),L(U,c,a))}function Rd(a){Gb.current===a&&(D(U,a),D(Gb,a))}function V(){n("321")}function Sd(a,b){if(null===b)return!1;for(var c=0;c<b.length&&c<a.length;c++)if(!Ea(a[c],b[c]))return!1;return!0}function Td(a,b,c,d,e,f){Hb=f;xa=b;W=null!==a?a.memoizedState:null;Dc.current=null===
+W?fi:cg;b=c(d,e);if(Ib){do Ib=!1,Jb+=1,W=null!==a?a.memoizedState:null,ab=bb,X=G=y=null,Dc.current=cg,b=c(d,e);while(Ib);ia=null;Jb=0}Dc.current=Ud;a=xa;a.memoizedState=bb;a.expirationTime=Kb;a.updateQueue=X;a.effectTag|=Lb;a=null!==y&&null!==y.next;Hb=0;ab=G=bb=W=y=xa=null;Kb=0;X=null;Lb=0;a?n("300"):void 0;return b}function Vd(){Dc.current=Ud;Hb=0;ab=G=bb=W=y=xa=null;Kb=0;X=null;Lb=0;Ib=!1;ia=null;Jb=0}function cb(){var a={memoizedState:null,baseState:null,queue:null,baseUpdate:null,next:null};
+null===G?bb=G=a:G=G.next=a;return G}function Mb(){if(null!==ab)G=ab,ab=G.next,y=W,W=null!==y?y.next:null;else{null===W?n("310"):void 0;y=W;var a={memoizedState:y.memoizedState,baseState:y.baseState,queue:y.queue,baseUpdate:y.baseUpdate,next:null};G=null===G?bb=a:G.next=a;W=y.next}return G}function dg(a,b){return"function"===typeof b?b(a):b}function eg(a,b,c){b=Mb();c=b.queue;null===c?n("311"):void 0;c.lastRenderedReducer=a;if(0<Jb){var d=c.dispatch;if(null!==ia){var e=ia.get(c);if(void 0!==e){ia.delete(c);
+var f=b.memoizedState;do f=a(f,e.action),e=e.next;while(null!==e);Ea(f,b.memoizedState)||(ja=!0);b.memoizedState=f;b.baseUpdate===c.last&&(b.baseState=f);c.lastRenderedState=f;return[f,d]}}return[b.memoizedState,d]}d=c.last;var g=b.baseUpdate;f=b.baseState;null!==g?(null!==d&&(d.next=null),d=g.next):d=null!==d?d.next:null;if(null!==d){var h=e=null,l=d,k=!1;do{var m=l.expirationTime;m<Hb?(k||(k=!0,h=g,e=f),m>Kb&&(Kb=m)):f=l.eagerReducer===a?l.eagerState:a(f,l.action);g=l;l=l.next}while(null!==l&&l!==
+d);k||(h=g,e=f);Ea(f,b.memoizedState)||(ja=!0);b.memoizedState=f;b.baseUpdate=h;b.baseState=e;c.lastRenderedState=f}return[b.memoizedState,c.dispatch]}function Wd(a,b,c,d){a={tag:a,create:b,destroy:c,deps:d,next:null};null===X?(X={lastEffect:null},X.lastEffect=a.next=a):(b=X.lastEffect,null===b?X.lastEffect=a.next=a:(c=b.next,b.next=a,a.next=c,X.lastEffect=a));return a}function Xd(a,b,c,d){var e=cb();Lb|=a;e.memoizedState=Wd(b,c,void 0,void 0===d?null:d)}function Yd(a,b,c,d){var e=Mb();d=void 0===
+d?null:d;var f=void 0;if(null!==y){var g=y.memoizedState;f=g.destroy;if(null!==d&&Sd(d,g.deps)){Wd(db,c,f,d);return}}Lb|=a;e.memoizedState=Wd(b,c,f,d)}function fg(a,b){if("function"===typeof b)return a=a(),b(a),function(){b(null)};if(null!==b&&void 0!==b)return a=a(),b.current=a,function(){b.current=null}}function gg(a,b){}function hg(a,b,c){25>Jb?void 0:n("301");var d=a.alternate;if(a===xa||null!==d&&d===xa)if(Ib=!0,a={expirationTime:Hb,action:c,eagerReducer:null,eagerState:null,next:null},null===
+ia&&(ia=new Map),c=ia.get(b),void 0===c)ia.set(b,a);else{for(b=c;null!==b.next;)b=b.next;b.next=a}else{eb();var e=ka();e=fb(e,a);var f={expirationTime:e,action:c,eagerReducer:null,eagerState:null,next:null},g=b.last;if(null===g)f.next=f;else{var h=g.next;null!==h&&(f.next=h);g.next=f}b.last=f;if(0===a.expirationTime&&(null===d||0===d.expirationTime)&&(d=b.lastRenderedReducer,null!==d))try{var l=b.lastRenderedState,k=d(l,c);f.eagerReducer=d;f.eagerState=k;if(Ea(k,l))return}catch(m){}finally{}ya(a,
+e)}}function ig(a,b){var c=S(5,null,null,0);c.elementType="DELETED";c.type="DELETED";c.stateNode=b;c.return=a;c.effectTag=8;null!==a.lastEffect?(a.lastEffect.nextEffect=c,a.lastEffect=c):a.firstEffect=a.lastEffect=c}function jg(a,b){switch(a.tag){case 5:var c=a.type;b=1!==b.nodeType||c.toLowerCase()!==b.nodeName.toLowerCase()?null:b;return null!==b?(a.stateNode=b,!0):!1;case 6:return b=""===a.pendingProps||3!==b.nodeType?null:b,null!==b?(a.stateNode=b,!0):!1;case 13:return!1;default:return!1}}function kg(a){if(Ia){var b=
+gb;if(b){var c=b;if(!jg(a,b)){b=Hd(c);if(!b||!jg(a,b)){a.effectTag|=2;Ia=!1;la=a;return}ig(la,c)}la=a;gb=Pf(b)}else a.effectTag|=2,Ia=!1,la=a}}function lg(a){for(a=a.return;null!==a&&5!==a.tag&&3!==a.tag&&18!==a.tag;)a=a.return;la=a}function Zd(a){if(a!==la)return!1;if(!Ia)return lg(a),Ia=!0,!1;var b=a.type;if(5!==a.tag||"head"!==b&&"body"!==b&&!Gd(b,a.memoizedProps))for(b=gb;b;)ig(a,b),b=Hd(b);lg(a);gb=la?Hd(a.stateNode):null;return!0}function $d(){gb=la=null;Ia=!1}function N(a,b,c,d){b.child=null===
+a?ae(b,null,c,d):hb(b,a.child,c,d)}function mg(a,b,c,d,e){c=c.render;var f=b.ref;ib(b,e);d=Td(a,b,c,d,f,e);if(null!==a&&!ja)return b.updateQueue=a.updateQueue,b.effectTag&=-517,a.expirationTime<=e&&(a.expirationTime=0),ma(a,b,e);b.effectTag|=1;N(a,b,d,e);return b.child}function ng(a,b,c,d,e,f){if(null===a){var g=c.type;if("function"===typeof g&&!Md(g)&&void 0===g.defaultProps&&null===c.compare&&void 0===c.defaultProps)return b.tag=15,b.type=g,og(a,b,g,d,e,f);a=wc(c.type,null,d,null,b.mode,f);a.ref=
+b.ref;a.return=b;return b.child=a}g=a.child;if(e<f&&(e=g.memoizedProps,c=c.compare,c=null!==c?c:vb,c(e,d)&&a.ref===b.ref))return ma(a,b,f);b.effectTag|=1;a=Ga(g,d,f);a.ref=b.ref;a.return=b;return b.child=a}function og(a,b,c,d,e,f){return null!==a&&vb(a.memoizedProps,d)&&a.ref===b.ref&&(ja=!1,e<f)?ma(a,b,f):be(a,b,c,d,f)}function pg(a,b){var c=b.ref;if(null===a&&null!==c||null!==a&&a.ref!==c)b.effectTag|=128}function be(a,b,c,d,e){var f=E(c)?Fa:F.current;f=Za(b,f);ib(b,e);c=Td(a,b,c,d,f,e);if(null!==
+a&&!ja)return b.updateQueue=a.updateQueue,b.effectTag&=-517,a.expirationTime<=e&&(a.expirationTime=0),ma(a,b,e);b.effectTag|=1;N(a,b,c,e);return b.child}function qg(a,b,c,d,e){if(E(c)){var f=!0;vc(b)}else f=!1;ib(b,e);if(null===b.stateNode)null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2),Yf(b,c,d,e),Pd(b,c,d,e),d=!0;else if(null===a){var g=b.stateNode,h=b.memoizedProps;g.props=h;var l=g.context,k=c.contextType;"object"===typeof k&&null!==k?k=T(k):(k=E(c)?Fa:F.current,k=Za(b,k));var m=
+c.getDerivedStateFromProps,n="function"===typeof m||"function"===typeof g.getSnapshotBeforeUpdate;n||"function"!==typeof g.UNSAFE_componentWillReceiveProps&&"function"!==typeof g.componentWillReceiveProps||(h!==d||l!==k)&&Zf(b,g,d,k);za=!1;var p=b.memoizedState;l=g.state=p;var r=b.updateQueue;null!==r&&(Cb(b,r,d,g,e),l=b.memoizedState);h!==d||p!==l||M.current||za?("function"===typeof m&&(yc(b,c,m,d),l=b.memoizedState),(h=za||Xf(b,c,h,d,p,l,k))?(n||"function"!==typeof g.UNSAFE_componentWillMount&&
+"function"!==typeof g.componentWillMount||("function"===typeof g.componentWillMount&&g.componentWillMount(),"function"===typeof g.UNSAFE_componentWillMount&&g.UNSAFE_componentWillMount()),"function"===typeof g.componentDidMount&&(b.effectTag|=4)):("function"===typeof g.componentDidMount&&(b.effectTag|=4),b.memoizedProps=d,b.memoizedState=l),g.props=d,g.state=l,g.context=k,d=h):("function"===typeof g.componentDidMount&&(b.effectTag|=4),d=!1)}else g=b.stateNode,h=b.memoizedProps,g.props=b.type===b.elementType?
+h:P(b.type,h),l=g.context,k=c.contextType,"object"===typeof k&&null!==k?k=T(k):(k=E(c)?Fa:F.current,k=Za(b,k)),m=c.getDerivedStateFromProps,(n="function"===typeof m||"function"===typeof g.getSnapshotBeforeUpdate)||"function"!==typeof g.UNSAFE_componentWillReceiveProps&&"function"!==typeof g.componentWillReceiveProps||(h!==d||l!==k)&&Zf(b,g,d,k),za=!1,l=b.memoizedState,p=g.state=l,r=b.updateQueue,null!==r&&(Cb(b,r,d,g,e),p=b.memoizedState),h!==d||l!==p||M.current||za?("function"===typeof m&&(yc(b,
+c,m,d),p=b.memoizedState),(m=za||Xf(b,c,h,d,l,p,k))?(n||"function"!==typeof g.UNSAFE_componentWillUpdate&&"function"!==typeof g.componentWillUpdate||("function"===typeof g.componentWillUpdate&&g.componentWillUpdate(d,p,k),"function"===typeof g.UNSAFE_componentWillUpdate&&g.UNSAFE_componentWillUpdate(d,p,k)),"function"===typeof g.componentDidUpdate&&(b.effectTag|=4),"function"===typeof g.getSnapshotBeforeUpdate&&(b.effectTag|=256)):("function"!==typeof g.componentDidUpdate||h===a.memoizedProps&&l===
+a.memoizedState||(b.effectTag|=4),"function"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=256),b.memoizedProps=d,b.memoizedState=p),g.props=d,g.state=p,g.context=k,d=m):("function"!==typeof g.componentDidUpdate||h===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=4),"function"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=256),d=!1);return ce(a,b,c,d,f,e)}function ce(a,b,c,d,e,f){pg(a,b);var g=0!==(b.effectTag&
+64);if(!d&&!g)return e&&Sf(b,c,!1),ma(a,b,f);d=b.stateNode;gi.current=b;var h=g&&"function"!==typeof c.getDerivedStateFromError?null:d.render();b.effectTag|=1;null!==a&&g?(b.child=hb(b,a.child,null,f),b.child=hb(b,null,h,f)):N(a,b,h,f);b.memoizedState=d.state;e&&Sf(b,c,!0);return b.child}function rg(a){var b=a.stateNode;b.pendingContext?Qf(a,b.pendingContext,b.pendingContext!==b.context):b.context&&Qf(a,b.context,!1);Qd(a,b.containerInfo)}function sg(a,b,c){var d=b.mode,e=b.pendingProps,f=b.memoizedState;
+if(0===(b.effectTag&64)){f=null;var g=!1}else f={timedOutAt:null!==f?f.timedOutAt:0},g=!0,b.effectTag&=-65;if(null===a)if(g){var h=e.fallback;a=wa(null,d,0,null);0===(b.mode&1)&&(a.child=null!==b.memoizedState?b.child.child:b.child);d=wa(h,d,c,null);a.sibling=d;c=a;c.return=d.return=b}else c=d=ae(b,null,e.children,c);else null!==a.memoizedState?(d=a.child,h=d.sibling,g?(c=e.fallback,e=Ga(d,d.pendingProps,0),0===(b.mode&1)&&(g=null!==b.memoizedState?b.child.child:b.child,g!==d.child&&(e.child=g)),
+d=e.sibling=Ga(h,c,h.expirationTime),c=e,e.childExpirationTime=0,c.return=d.return=b):c=d=hb(b,d.child,e.children,c)):(h=a.child,g?(g=e.fallback,e=wa(null,d,0,null),e.child=h,0===(b.mode&1)&&(e.child=null!==b.memoizedState?b.child.child:b.child),d=e.sibling=wa(g,d,c,null),d.effectTag|=2,c=e,e.childExpirationTime=0,c.return=d.return=b):d=c=hb(b,h,e.children,c)),b.stateNode=a.stateNode;b.memoizedState=f;b.child=c;return d}function ma(a,b,c){null!==a&&(b.contextDependencies=a.contextDependencies);if(b.childExpirationTime<
+c)return null;null!==a&&b.child!==a.child?n("153"):void 0;if(null!==b.child){a=b.child;c=Ga(a,a.pendingProps,a.expirationTime);b.child=c;for(c.return=b;null!==a.sibling;)a=a.sibling,c=c.sibling=Ga(a,a.pendingProps,a.expirationTime),c.return=b;c.sibling=null}return b.child}function hi(a,b,c){var d=b.expirationTime;if(null!==a)if(a.memoizedProps!==b.pendingProps||M.current)ja=!0;else{if(d<c){ja=!1;switch(b.tag){case 3:rg(b);$d();break;case 5:bg(b);break;case 1:E(b.type)&&vc(b);break;case 4:Qd(b,b.stateNode.containerInfo);
+break;case 10:tg(b,b.memoizedProps.value);break;case 13:if(null!==b.memoizedState){d=b.child.childExpirationTime;if(0!==d&&d>=c)return sg(a,b,c);b=ma(a,b,c);return null!==b?b.sibling:null}}return ma(a,b,c)}}else ja=!1;b.expirationTime=0;switch(b.tag){case 2:d=b.elementType;null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2);a=b.pendingProps;var e=Za(b,F.current);ib(b,c);e=Td(null,b,d,a,e,c);b.effectTag|=1;if("object"===typeof e&&null!==e&&"function"===typeof e.render&&void 0===e.$$typeof){b.tag=
+1;Vd();if(E(d)){var f=!0;vc(b)}else f=!1;b.memoizedState=null!==e.state&&void 0!==e.state?e.state:null;var g=d.getDerivedStateFromProps;"function"===typeof g&&yc(b,d,g,a);e.updater=zc;b.stateNode=e;e._reactInternalFiber=b;Pd(b,d,a,c);b=ce(null,b,d,!0,f,c)}else b.tag=0,N(null,b,e,c),b=b.child;return b;case 16:e=b.elementType;null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2);f=b.pendingProps;a=ei(e);b.type=a;e=b.tag=ci(a);f=P(a,f);g=void 0;switch(e){case 0:g=be(null,b,a,f,c);break;case 1:g=
+qg(null,b,a,f,c);break;case 11:g=mg(null,b,a,f,c);break;case 14:g=ng(null,b,a,P(a.type,f),d,c);break;default:n("306",a,"")}return g;case 0:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:P(d,e),be(a,b,d,e,c);case 1:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:P(d,e),qg(a,b,d,e,c);case 3:rg(b);d=b.updateQueue;null===d?n("282"):void 0;e=b.memoizedState;e=null!==e?e.element:null;Cb(b,d,b.pendingProps,null,c);d=b.memoizedState.element;if(d===e)$d(),b=ma(a,b,c);else{e=b.stateNode;if(e=
+(null===a||null===a.child)&&e.hydrate)gb=Pf(b.stateNode.containerInfo),la=b,e=Ia=!0;e?(b.effectTag|=2,b.child=ae(b,null,d,c)):(N(a,b,d,c),$d());b=b.child}return b;case 5:return bg(b),null===a&&kg(b),d=b.type,e=b.pendingProps,f=null!==a?a.memoizedProps:null,g=e.children,Gd(d,e)?g=null:null!==f&&Gd(d,f)&&(b.effectTag|=16),pg(a,b),1!==c&&b.mode&1&&e.hidden?(b.expirationTime=b.childExpirationTime=1,b=null):(N(a,b,g,c),b=b.child),b;case 6:return null===a&&kg(b),null;case 13:return sg(a,b,c);case 4:return Qd(b,
+b.stateNode.containerInfo),d=b.pendingProps,null===a?b.child=hb(b,null,d,c):N(a,b,d,c),b.child;case 11:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:P(d,e),mg(a,b,d,e,c);case 7:return N(a,b,b.pendingProps,c),b.child;case 8:return N(a,b,b.pendingProps.children,c),b.child;case 12:return N(a,b,b.pendingProps.children,c),b.child;case 10:a:{d=b.type._context;e=b.pendingProps;g=b.memoizedProps;f=e.value;tg(b,f);if(null!==g){var h=g.value;f=Ea(h,f)?0:("function"===typeof d._calculateChangedBits?
+d._calculateChangedBits(h,f):1073741823)|0;if(0===f){if(g.children===e.children&&!M.current){b=ma(a,b,c);break a}}else for(h=b.child,null!==h&&(h.return=b);null!==h;){var l=h.contextDependencies;if(null!==l){g=h.child;for(var k=l.first;null!==k;){if(k.context===d&&0!==(k.observedBits&f)){1===h.tag&&(k=Aa(c),k.tag=Ec,na(h,k));h.expirationTime<c&&(h.expirationTime=c);k=h.alternate;null!==k&&k.expirationTime<c&&(k.expirationTime=c);k=c;for(var m=h.return;null!==m;){var p=m.alternate;if(m.childExpirationTime<
+k)m.childExpirationTime=k,null!==p&&p.childExpirationTime<k&&(p.childExpirationTime=k);else if(null!==p&&p.childExpirationTime<k)p.childExpirationTime=k;else break;m=m.return}l.expirationTime<c&&(l.expirationTime=c);break}k=k.next}}else g=10===h.tag?h.type===b.type?null:h.child:h.child;if(null!==g)g.return=h;else for(g=h;null!==g;){if(g===b){g=null;break}h=g.sibling;if(null!==h){h.return=g.return;g=h;break}g=g.return}h=g}}N(a,b,e.children,c);b=b.child}return b;case 9:return e=b.type,f=b.pendingProps,
+d=f.children,ib(b,c),e=T(e,f.unstable_observedBits),d=d(e),b.effectTag|=1,N(a,b,d,c),b.child;case 14:return e=b.type,f=P(e,b.pendingProps),f=P(e.type,f),ng(a,b,e,f,d,c);case 15:return og(a,b,b.type,b.pendingProps,d,c);case 17:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:P(d,e),null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2),b.tag=1,E(d)?(a=!0,vc(b)):a=!1,ib(b,c),Yf(b,d,e,c),Pd(b,d,e,c),ce(null,b,d,!0,a,c)}n("156")}function tg(a,b){var c=a.type._context;L(de,c._currentValue,
+a);c._currentValue=b}function ee(a){var b=de.current;D(de,a);a.type._context._currentValue=b}function ib(a,b){Nb=a;Ob=Ja=null;var c=a.contextDependencies;null!==c&&c.expirationTime>=b&&(ja=!0);a.contextDependencies=null}function T(a,b){if(Ob!==a&&!1!==b&&0!==b){if("number"!==typeof b||1073741823===b)Ob=a,b=1073741823;b={context:a,observedBits:b,next:null};null===Ja?(null===Nb?n("308"):void 0,Ja=b,Nb.contextDependencies={first:b,expirationTime:0}):Ja=Ja.next=b}return a._currentValue}function Fc(a){return{baseState:a,
+firstUpdate:null,lastUpdate:null,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}function fe(a){return{baseState:a.baseState,firstUpdate:a.firstUpdate,lastUpdate:a.lastUpdate,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}function Aa(a){return{expirationTime:a,tag:ug,payload:null,callback:null,next:null,nextEffect:null}}function Gc(a,
+b){null===a.lastUpdate?a.firstUpdate=a.lastUpdate=b:(a.lastUpdate.next=b,a.lastUpdate=b)}function na(a,b){var c=a.alternate;if(null===c){var d=a.updateQueue;var e=null;null===d&&(d=a.updateQueue=Fc(a.memoizedState))}else d=a.updateQueue,e=c.updateQueue,null===d?null===e?(d=a.updateQueue=Fc(a.memoizedState),e=c.updateQueue=Fc(c.memoizedState)):d=a.updateQueue=fe(e):null===e&&(e=c.updateQueue=fe(d));null===e||d===e?Gc(d,b):null===d.lastUpdate||null===e.lastUpdate?(Gc(d,b),Gc(e,b)):(Gc(d,b),e.lastUpdate=
+b)}function vg(a,b){var c=a.updateQueue;c=null===c?a.updateQueue=Fc(a.memoizedState):wg(a,c);null===c.lastCapturedUpdate?c.firstCapturedUpdate=c.lastCapturedUpdate=b:(c.lastCapturedUpdate.next=b,c.lastCapturedUpdate=b)}function wg(a,b){var c=a.alternate;null!==c&&b===c.updateQueue&&(b=a.updateQueue=fe(b));return b}function xg(a,b,c,d,e,f){switch(c.tag){case yg:return a=c.payload,"function"===typeof a?a.call(f,d,e):a;case ge:a.effectTag=a.effectTag&-2049|64;case ug:a=c.payload;e="function"===typeof a?
+a.call(f,d,e):a;if(null===e||void 0===e)break;return B({},d,e);case Ec:za=!0}return d}function Cb(a,b,c,d,e){za=!1;b=wg(a,b);for(var f=b.baseState,g=null,h=0,l=b.firstUpdate,k=f;null!==l;){var m=l.expirationTime;m<e?(null===g&&(g=l,f=k),h<m&&(h=m)):(k=xg(a,b,l,k,c,d),null!==l.callback&&(a.effectTag|=32,l.nextEffect=null,null===b.lastEffect?b.firstEffect=b.lastEffect=l:(b.lastEffect.nextEffect=l,b.lastEffect=l)));l=l.next}m=null;for(l=b.firstCapturedUpdate;null!==l;){var n=l.expirationTime;n<e?(null===
+m&&(m=l,null===g&&(f=k)),h<n&&(h=n)):(k=xg(a,b,l,k,c,d),null!==l.callback&&(a.effectTag|=32,l.nextEffect=null,null===b.lastCapturedEffect?b.firstCapturedEffect=b.lastCapturedEffect=l:(b.lastCapturedEffect.nextEffect=l,b.lastCapturedEffect=l)));l=l.next}null===g&&(b.lastUpdate=null);null===m?b.lastCapturedUpdate=null:a.effectTag|=32;null===g&&null===m&&(f=k);b.baseState=f;b.firstUpdate=g;b.firstCapturedUpdate=m;a.expirationTime=h;a.memoizedState=k}function zg(a,b,c,d){null!==b.firstCapturedUpdate&&
+(null!==b.lastUpdate&&(b.lastUpdate.next=b.firstCapturedUpdate,b.lastUpdate=b.lastCapturedUpdate),b.firstCapturedUpdate=b.lastCapturedUpdate=null);Ag(b.firstEffect,c);b.firstEffect=b.lastEffect=null;Ag(b.firstCapturedEffect,c);b.firstCapturedEffect=b.lastCapturedEffect=null}function Ag(a,b){for(;null!==a;){var c=a.callback;if(null!==c){a.callback=null;var d=b;"function"!==typeof c?n("191",c):void 0;c.call(d)}a=a.nextEffect}}function Hc(a,b){return{value:a,source:b,stack:qd(b)}}function Pb(a){a.effectTag|=
+4}function Bg(a,b){var c=b.source,d=b.stack;null===d&&null!==c&&(d=qd(c));null!==c&&sa(c.type);b=b.value;null!==a&&1===a.tag&&sa(a.type);try{console.error(b)}catch(e){setTimeout(function(){throw e;})}}function Cg(a){var b=a.ref;if(null!==b)if("function"===typeof b)try{b(null)}catch(c){Ka(a,c)}else b.current=null}function Qb(a,b,c){c=c.updateQueue;c=null!==c?c.lastEffect:null;if(null!==c){var d=c=c.next;do{if((d.tag&a)!==db){var e=d.destroy;d.destroy=void 0;void 0!==e&&e()}(d.tag&b)!==db&&(e=d.create,
+d.destroy=e());d=d.next}while(d!==c)}}function ii(a,b){for(var c=a;;){if(5===c.tag){var d=c.stateNode;if(b)d.style.display="none";else{d=c.stateNode;var e=c.memoizedProps.style;e=void 0!==e&&null!==e&&e.hasOwnProperty("display")?e.display:null;d.style.display=Lf("display",e)}}else if(6===c.tag)c.stateNode.nodeValue=b?"":c.memoizedProps;else if(13===c.tag&&null!==c.memoizedState){d=c.child.sibling;d.return=c;c=d;continue}else if(null!==c.child){c.child.return=c;c=c.child;continue}if(c===a)break;for(;null===
+c.sibling;){if(null===c.return||c.return===a)return;c=c.return}c.sibling.return=c.return;c=c.sibling}}function Dg(a){"function"===typeof Ld&&Ld(a);switch(a.tag){case 0:case 11:case 14:case 15:var b=a.updateQueue;if(null!==b&&(b=b.lastEffect,null!==b)){var c=b=b.next;do{var d=c.destroy;if(void 0!==d){var e=a;try{d()}catch(f){Ka(e,f)}}c=c.next}while(c!==b)}break;case 1:Cg(a);b=a.stateNode;if("function"===typeof b.componentWillUnmount)try{b.props=a.memoizedProps,b.state=a.memoizedState,b.componentWillUnmount()}catch(f){Ka(a,
+f)}break;case 5:Cg(a);break;case 4:Eg(a)}}function Fg(a){return 5===a.tag||3===a.tag||4===a.tag}function Gg(a){a:{for(var b=a.return;null!==b;){if(Fg(b)){var c=b;break a}b=b.return}n("160");c=void 0}var d=b=void 0;switch(c.tag){case 5:b=c.stateNode;d=!1;break;case 3:b=c.stateNode.containerInfo;d=!0;break;case 4:b=c.stateNode.containerInfo;d=!0;break;default:n("161")}c.effectTag&16&&(Ab(b,""),c.effectTag&=-17);a:b:for(c=a;;){for(;null===c.sibling;){if(null===c.return||Fg(c.return)){c=null;break a}c=
+c.return}c.sibling.return=c.return;for(c=c.sibling;5!==c.tag&&6!==c.tag&&18!==c.tag;){if(c.effectTag&2)continue b;if(null===c.child||4===c.tag)continue b;else c.child.return=c,c=c.child}if(!(c.effectTag&2)){c=c.stateNode;break a}}for(var e=a;;){if(5===e.tag||6===e.tag)if(c)if(d){var f=b,g=e.stateNode,h=c;8===f.nodeType?f.parentNode.insertBefore(g,h):f.insertBefore(g,h)}else b.insertBefore(e.stateNode,c);else d?(g=b,h=e.stateNode,8===g.nodeType?(f=g.parentNode,f.insertBefore(h,g)):(f=g,f.appendChild(h)),
+g=g._reactRootContainer,null!==g&&void 0!==g||null!==f.onclick||(f.onclick=tc)):b.appendChild(e.stateNode);else if(4!==e.tag&&null!==e.child){e.child.return=e;e=e.child;continue}if(e===a)break;for(;null===e.sibling;){if(null===e.return||e.return===a)return;e=e.return}e.sibling.return=e.return;e=e.sibling}}function Eg(a){for(var b=a,c=!1,d=void 0,e=void 0;;){if(!c){c=b.return;a:for(;;){null===c?n("160"):void 0;switch(c.tag){case 5:d=c.stateNode;e=!1;break a;case 3:d=c.stateNode.containerInfo;e=!0;
+break a;case 4:d=c.stateNode.containerInfo;e=!0;break a}c=c.return}c=!0}if(5===b.tag||6===b.tag){a:for(var f=b,g=f;;)if(Dg(g),null!==g.child&&4!==g.tag)g.child.return=g,g=g.child;else{if(g===f)break;for(;null===g.sibling;){if(null===g.return||g.return===f)break a;g=g.return}g.sibling.return=g.return;g=g.sibling}e?(f=d,g=b.stateNode,8===f.nodeType?f.parentNode.removeChild(g):f.removeChild(g)):d.removeChild(b.stateNode)}else if(4===b.tag){if(null!==b.child){d=b.stateNode.containerInfo;e=!0;b.child.return=
+b;b=b.child;continue}}else if(Dg(b),null!==b.child){b.child.return=b;b=b.child;continue}if(b===a)break;for(;null===b.sibling;){if(null===b.return||b.return===a)return;b=b.return;4===b.tag&&(c=!1)}b.sibling.return=b.return;b=b.sibling}}function Hg(a,b){switch(b.tag){case 0:case 11:case 14:case 15:Qb(Rb,ji,b);break;case 1:break;case 5:var c=b.stateNode;if(null!=c){var d=b.memoizedProps;a=null!==a?a.memoizedProps:d;var e=b.type,f=b.updateQueue;b.updateQueue=null;null!==f&&$h(c,f,e,a,d,b)}break;case 6:null===
+b.stateNode?n("162"):void 0;b.stateNode.nodeValue=b.memoizedProps;break;case 3:break;case 12:break;case 13:c=b.memoizedState;d=void 0;a=b;null===c?d=!1:(d=!0,a=b.child,0===c.timedOutAt&&(c.timedOutAt=ka()));null!==a&&ii(a,d);c=b.updateQueue;if(null!==c){b.updateQueue=null;var g=b.stateNode;null===g&&(g=b.stateNode=new ki);c.forEach(function(a){var c=li.bind(null,b,a);g.has(a)||(g.add(a),a.then(c,c))})}break;case 17:break;default:n("163")}}function he(a,b,c){c=Aa(c);c.tag=ge;c.payload={element:null};
+var d=b.value;c.callback=function(){ie(d);Bg(a,b)};return c}function Ig(a,b,c){c=Aa(c);c.tag=ge;var d=a.type.getDerivedStateFromError;if("function"===typeof d){var e=b.value;c.payload=function(){return d(e)}}var f=a.stateNode;null!==f&&"function"===typeof f.componentDidCatch&&(c.callback=function(){"function"!==typeof d&&(null===Ba?Ba=new Set([this]):Ba.add(this));var c=b.value,e=b.stack;Bg(a,b);this.componentDidCatch(c,{componentStack:null!==e?e:""})});return c}function mi(a,b){switch(a.tag){case 1:return E(a.type)&&
+uc(a),b=a.effectTag,b&2048?(a.effectTag=b&-2049|64,a):null;case 3:return $a(a),Jd(a),b=a.effectTag,0!==(b&64)?n("285"):void 0,a.effectTag=b&-2049|64,a;case 5:return Rd(a),null;case 13:return b=a.effectTag,b&2048?(a.effectTag=b&-2049|64,a):null;case 18:return null;case 4:return $a(a),null;case 10:return ee(a),null;default:return null}}function Jg(){if(null!==x)for(var a=x.return;null!==a;){var b=a;switch(b.tag){case 1:var c=b.type.childContextTypes;null!==c&&void 0!==c&&uc(b);break;case 3:$a(b);Jd(b);
+break;case 5:Rd(b);break;case 4:$a(b);break;case 10:ee(b)}a=a.return}Y=null;H=0;La=-1;je=!1;x=null}function ni(){for(;null!==p;){var a=p.effectTag;a&16&&Ab(p.stateNode,"");if(a&128){var b=p.alternate;null!==b&&(b=b.ref,null!==b&&("function"===typeof b?b(null):b.current=null))}switch(a&14){case 2:Gg(p);p.effectTag&=-3;break;case 6:Gg(p);p.effectTag&=-3;Hg(p.alternate,p);break;case 4:Hg(p.alternate,p);break;case 8:a=p,Eg(a),a.return=null,a.child=null,a.memoizedState=null,a.updateQueue=null,a=a.alternate,
+null!==a&&(a.return=null,a.child=null,a.memoizedState=null,a.updateQueue=null)}p=p.nextEffect}}function oi(){for(;null!==p;){if(p.effectTag&256)a:{var a=p.alternate,b=p;switch(b.tag){case 0:case 11:case 15:Qb(pi,db,b);break a;case 1:if(b.effectTag&256&&null!==a){var c=a.memoizedProps,d=a.memoizedState;a=b.stateNode;b=a.getSnapshotBeforeUpdate(b.elementType===b.type?c:P(b.type,c),d);a.__reactInternalSnapshotBeforeUpdate=b}break a;case 3:case 5:case 6:case 4:case 17:break a;default:n("163")}}p=p.nextEffect}}
+function qi(a,b){for(;null!==p;){var c=p.effectTag;if(c&36){var d=p.alternate,e=p,f=b;switch(e.tag){case 0:case 11:case 15:Qb(ri,Sb,e);break;case 1:var g=e.stateNode;if(e.effectTag&4)if(null===d)g.componentDidMount();else{var h=e.elementType===e.type?d.memoizedProps:P(e.type,d.memoizedProps);g.componentDidUpdate(h,d.memoizedState,g.__reactInternalSnapshotBeforeUpdate)}d=e.updateQueue;null!==d&&zg(e,d,g,f);break;case 3:d=e.updateQueue;if(null!==d){g=null;if(null!==e.child)switch(e.child.tag){case 5:g=
+e.child.stateNode;break;case 1:g=e.child.stateNode}zg(e,d,g,f)}break;case 5:f=e.stateNode;null===d&&e.effectTag&4&&Nf(e.type,e.memoizedProps)&&f.focus();break;case 6:break;case 4:break;case 12:break;case 13:break;case 17:break;default:n("163")}}c&128&&(e=p.ref,null!==e&&(f=p.stateNode,"function"===typeof e?e(f):e.current=f));c&512&&(ke=a);p=p.nextEffect}}function si(a,b){Ic=Jc=ke=null;var c=w;w=!0;do{if(b.effectTag&512){var d=!1,e=void 0;try{var f=b;Qb(le,db,f);Qb(db,me,f)}catch(g){d=!0,e=g}d&&Ka(b,
+e)}b=b.nextEffect}while(null!==b);w=c;c=a.expirationTime;0!==c&&Kc(a,c);z||w||Z(1073741823,!1)}function eb(){null!==Jc&&ti(Jc);null!==Ic&&Ic()}function ui(a,b){Lc=Ca=!0;a.current===b?n("177"):void 0;var c=a.pendingCommitExpirationTime;0===c?n("261"):void 0;a.pendingCommitExpirationTime=0;var d=b.expirationTime,e=b.childExpirationTime;di(a,e>d?e:d);Kg.current=null;d=void 0;1<b.effectTag?null!==b.lastEffect?(b.lastEffect.nextEffect=b,d=b.firstEffect):d=b:d=b.firstEffect;ne=qc;oe=Wh();qc=!1;for(p=d;null!==
+p;){e=!1;var f=void 0;try{oi()}catch(h){e=!0,f=h}e&&(null===p?n("178"):void 0,Ka(p,f),null!==p&&(p=p.nextEffect))}for(p=d;null!==p;){e=!1;f=void 0;try{ni()}catch(h){e=!0,f=h}e&&(null===p?n("178"):void 0,Ka(p,f),null!==p&&(p=p.nextEffect))}Xh(oe);oe=null;qc=!!ne;ne=null;a.current=b;for(p=d;null!==p;){e=!1;f=void 0;try{qi(a,c)}catch(h){e=!0,f=h}e&&(null===p?n("178"):void 0,Ka(p,f),null!==p&&(p=p.nextEffect))}if(null!==d&&null!==ke){var g=si.bind(null,a,d);Jc=Mc(Lg,function(){return vi(g)});Ic=g}Ca=
+Lc=!1;"function"===typeof Kd&&Kd(b.stateNode);c=b.expirationTime;b=b.childExpirationTime;b=b>c?b:c;0===b&&(Ba=null);wi(a,b)}function Mg(a){for(;;){var b=a.alternate,c=a.return,d=a.sibling;if(0===(a.effectTag&1024)){x=a;a:{var e=b;b=a;var f=H;var g=b.pendingProps;switch(b.tag){case 2:break;case 16:break;case 15:case 0:break;case 1:E(b.type)&&uc(b);break;case 3:$a(b);Jd(b);g=b.stateNode;g.pendingContext&&(g.context=g.pendingContext,g.pendingContext=null);if(null===e||null===e.child)Zd(b),b.effectTag&=
+-3;pe(b);break;case 5:Rd(b);var h=Ha(Fb.current);f=b.type;if(null!==e&&null!=b.stateNode)Ng(e,b,f,g,h),e.ref!==b.ref&&(b.effectTag|=128);else if(g){var l=Ha(U.current);if(Zd(b)){g=b;e=g.stateNode;var k=g.type,m=g.memoizedProps,p=h;e[ea]=g;e[ec]=m;f=void 0;h=k;switch(h){case "iframe":case "object":r("load",e);break;case "video":case "audio":for(k=0;k<zb.length;k++)r(zb[k],e);break;case "source":r("error",e);break;case "img":case "image":case "link":r("error",e);r("load",e);break;case "form":r("reset",
+e);r("submit",e);break;case "details":r("toggle",e);break;case "input":lf(e,m);r("invalid",e);ha(p,"onChange");break;case "select":e._wrapperState={wasMultiple:!!m.multiple};r("invalid",e);ha(p,"onChange");break;case "textarea":If(e,m),r("invalid",e),ha(p,"onChange")}Ed(h,m);k=null;for(f in m)m.hasOwnProperty(f)&&(l=m[f],"children"===f?"string"===typeof l?e.textContent!==l&&(k=["children",l]):"number"===typeof l&&e.textContent!==""+l&&(k=["children",""+l]):Oa.hasOwnProperty(f)&&null!=l&&ha(p,f));
+switch(h){case "input":kc(e);nf(e,m,!0);break;case "textarea":kc(e);f=e.textContent;f===e._wrapperState.initialValue&&(e.value=f);break;case "select":case "option":break;default:"function"===typeof m.onClick&&(e.onclick=tc)}f=k;g.updateQueue=f;g=null!==f?!0:!1;g&&Pb(b)}else{m=b;p=f;e=g;k=9===h.nodeType?h:h.ownerDocument;"http://www.w3.org/1999/xhtml"===l&&(l=Kf(p));"http://www.w3.org/1999/xhtml"===l?"script"===p?(e=k.createElement("div"),e.innerHTML="<script>\x3c/script>",k=e.removeChild(e.firstChild)):
+"string"===typeof e.is?k=k.createElement(p,{is:e.is}):(k=k.createElement(p),"select"===p&&(p=k,e.multiple?p.multiple=!0:e.size&&(p.size=e.size))):k=k.createElementNS(l,p);e=k;e[ea]=m;e[ec]=g;Og(e,b,!1,!1);m=e;k=f;p=g;var t=h,y=Fd(k,p);switch(k){case "iframe":case "object":r("load",m);h=p;break;case "video":case "audio":for(h=0;h<zb.length;h++)r(zb[h],m);h=p;break;case "source":r("error",m);h=p;break;case "img":case "image":case "link":r("error",m);r("load",m);h=p;break;case "form":r("reset",m);r("submit",
+m);h=p;break;case "details":r("toggle",m);h=p;break;case "input":lf(m,p);h=sd(m,p);r("invalid",m);ha(t,"onChange");break;case "option":h=Bd(m,p);break;case "select":m._wrapperState={wasMultiple:!!p.multiple};h=B({},p,{value:void 0});r("invalid",m);ha(t,"onChange");break;case "textarea":If(m,p);h=Cd(m,p);r("invalid",m);ha(t,"onChange");break;default:h=p}Ed(k,h);l=void 0;var u=k,w=m,v=h;for(l in v)if(v.hasOwnProperty(l)){var q=v[l];"style"===l?Mf(w,q):"dangerouslySetInnerHTML"===l?(q=q?q.__html:void 0,
+null!=q&&Of(w,q)):"children"===l?"string"===typeof q?("textarea"!==u||""!==q)&&Ab(w,q):"number"===typeof q&&Ab(w,""+q):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(Oa.hasOwnProperty(l)?null!=q&&ha(t,l):null!=q&&rd(w,l,q,y))}switch(k){case "input":kc(m);nf(m,p,!1);break;case "textarea":kc(m);h=m.textContent;h===m._wrapperState.initialValue&&(m.value=h);break;case "option":null!=p.value&&m.setAttribute("value",""+ua(p.value));break;case "select":h=m;m=p;h.multiple=
+!!m.multiple;p=m.value;null!=p?Xa(h,!!m.multiple,p,!1):null!=m.defaultValue&&Xa(h,!!m.multiple,m.defaultValue,!0);break;default:"function"===typeof h.onClick&&(m.onclick=tc)}(g=Nf(f,g))&&Pb(b);b.stateNode=e}null!==b.ref&&(b.effectTag|=128)}else null===b.stateNode?n("166"):void 0;break;case 6:e&&null!=b.stateNode?Pg(e,b,e.memoizedProps,g):("string"!==typeof g&&(null===b.stateNode?n("166"):void 0),e=Ha(Fb.current),Ha(U.current),Zd(b)?(g=b,f=g.stateNode,e=g.memoizedProps,f[ea]=g,(g=f.nodeValue!==e)&&
+Pb(b)):(f=b,g=(9===e.nodeType?e:e.ownerDocument).createTextNode(g),g[ea]=b,f.stateNode=g));break;case 11:break;case 13:g=b.memoizedState;if(0!==(b.effectTag&64)){b.expirationTime=f;x=b;break a}g=null!==g;f=null!==e&&null!==e.memoizedState;null!==e&&!g&&f&&(e=e.child.sibling,null!==e&&(h=b.firstEffect,null!==h?(b.firstEffect=e,e.nextEffect=h):(b.firstEffect=b.lastEffect=e,e.nextEffect=null),e.effectTag=8));if(g||f)b.effectTag|=4;break;case 7:break;case 8:break;case 12:break;case 4:$a(b);pe(b);break;
+case 10:ee(b);break;case 9:break;case 14:break;case 17:E(b.type)&&uc(b);break;case 18:break;default:n("156")}x=null}b=a;if(1===H||1!==b.childExpirationTime){g=0;for(f=b.child;null!==f;)e=f.expirationTime,h=f.childExpirationTime,e>g&&(g=e),h>g&&(g=h),f=f.sibling;b.childExpirationTime=g}if(null!==x)return x;null!==c&&0===(c.effectTag&1024)&&(null===c.firstEffect&&(c.firstEffect=a.firstEffect),null!==a.lastEffect&&(null!==c.lastEffect&&(c.lastEffect.nextEffect=a.firstEffect),c.lastEffect=a.lastEffect),
+1<a.effectTag&&(null!==c.lastEffect?c.lastEffect.nextEffect=a:c.firstEffect=a,c.lastEffect=a))}else{a=mi(a,H);if(null!==a)return a.effectTag&=1023,a;null!==c&&(c.firstEffect=c.lastEffect=null,c.effectTag|=1024)}if(null!==d)return d;if(null!==c)a=c;else break}return null}function Qg(a){var b=hi(a.alternate,a,H);a.memoizedProps=a.pendingProps;null===b&&(b=Mg(a));Kg.current=null;return b}function Rg(a,b){Ca?n("243"):void 0;eb();Ca=!0;var c=qe.current;qe.current=Ud;var d=a.nextExpirationTimeToWorkOn;
+if(d!==H||a!==Y||null===x)Jg(),Y=a,H=d,x=Ga(Y.current,null,H),a.pendingCommitExpirationTime=0;var e=!1;do{try{if(b)for(;null!==x&&!Nc();)x=Qg(x);else for(;null!==x;)x=Qg(x)}catch(v){if(Ob=Ja=Nb=null,Vd(),null===x)e=!0,ie(v);else{null===x?n("271"):void 0;var f=x,g=f.return;if(null===g)e=!0,ie(v);else{a:{var h=a,l=g,k=f,m=v;g=H;k.effectTag|=1024;k.firstEffect=k.lastEffect=null;if(null!==m&&"object"===typeof m&&"function"===typeof m.then){var p=m;m=l;var t=-1,r=-1;do{if(13===m.tag){var u=m.alternate;
+if(null!==u&&(u=u.memoizedState,null!==u)){r=10*(1073741822-u.timedOutAt);break}u=m.pendingProps.maxDuration;if("number"===typeof u)if(0>=u)t=0;else if(-1===t||u<t)t=u}m=m.return}while(null!==m);m=l;do{if(u=13===m.tag)u=void 0===m.memoizedProps.fallback?!1:null===m.memoizedState;if(u){l=m.updateQueue;null===l?(l=new Set,l.add(p),m.updateQueue=l):l.add(p);if(0===(m.mode&1)){m.effectTag|=64;k.effectTag&=-1957;1===k.tag&&(null===k.alternate?k.tag=17:(g=Aa(1073741823),g.tag=Ec,na(k,g)));k.expirationTime=
+1073741823;break a}k=h;l=g;var w=k.pingCache;null===w?(w=k.pingCache=new xi,u=new Set,w.set(p,u)):(u=w.get(p),void 0===u&&(u=new Set,w.set(p,u)));u.has(l)||(u.add(l),k=yi.bind(null,k,p,l),p.then(k,k));-1===t?h=1073741823:(-1===r&&(r=10*(1073741822-Wf(h,g))-5E3),h=r+t);0<=h&&La<h&&(La=h);m.effectTag|=2048;m.expirationTime=g;break a}m=m.return}while(null!==m);m=Error((sa(k.type)||"A React component")+" suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display."+
+qd(k))}je=!0;m=Hc(m,k);h=l;do{switch(h.tag){case 3:h.effectTag|=2048;h.expirationTime=g;g=he(h,m,g);vg(h,g);break a;case 1:if(t=m,r=h.type,k=h.stateNode,0===(h.effectTag&64)&&("function"===typeof r.getDerivedStateFromError||null!==k&&"function"===typeof k.componentDidCatch&&(null===Ba||!Ba.has(k)))){h.effectTag|=2048;h.expirationTime=g;g=Ig(h,t,g);vg(h,g);break a}}h=h.return}while(null!==h)}x=Mg(f);continue}}}break}while(1);Ca=!1;qe.current=c;Ob=Ja=Nb=null;Vd();if(e)Y=null,a.finishedWork=null;else if(null!==
+x)a.finishedWork=null;else{c=a.current.alternate;null===c?n("281"):void 0;Y=null;if(je){e=a.latestPendingTime;f=a.latestSuspendedTime;g=a.latestPingedTime;if(0!==e&&e<d||0!==f&&f<d||0!==g&&g<d){Vf(a,d);re(a,c,d,a.expirationTime,-1);return}if(!a.didError&&b){a.didError=!0;d=a.nextExpirationTimeToWorkOn=d;b=a.expirationTime=1073741823;re(a,c,d,b,-1);return}}b&&-1!==La?(Vf(a,d),b=10*(1073741822-Wf(a,d)),b<La&&(La=b),b=10*(1073741822-ka()),b=La-b,re(a,c,d,a.expirationTime,0>b?0:b)):(a.pendingCommitExpirationTime=
+d,a.finishedWork=c)}}function Ka(a,b){for(var c=a.return;null!==c;){switch(c.tag){case 1:var d=c.stateNode;if("function"===typeof c.type.getDerivedStateFromError||"function"===typeof d.componentDidCatch&&(null===Ba||!Ba.has(d))){a=Hc(b,a);a=Ig(c,a,1073741823);na(c,a);ya(c,1073741823);return}break;case 3:a=Hc(b,a);a=he(c,a,1073741823);na(c,a);ya(c,1073741823);return}c=c.return}3===a.tag&&(c=Hc(b,a),c=he(a,c,1073741823),na(a,c),ya(a,1073741823))}function fb(a,b){var c=zi(),d=void 0;if(0===(b.mode&1))d=
+1073741823;else if(Ca&&!Lc)d=H;else{switch(c){case se:d=1073741823;break;case te:d=1073741822-10*(((1073741822-a+15)/10|0)+1);break;case Lg:d=1073741822-25*(((1073741822-a+500)/25|0)+1);break;case Ai:case Bi:d=1;break;default:n("313")}null!==Y&&d===H&&--d}c===te&&(0===oa||d<oa)&&(oa=d);return d}function yi(a,b,c){var d=a.pingCache;null!==d&&d.delete(b);if(null!==Y&&H===c)Y=null;else if(b=a.earliestSuspendedTime,d=a.latestSuspendedTime,0!==b&&c<=b&&c>=d){a.didError=!1;b=a.latestPingedTime;if(0===b||
+b>c)a.latestPingedTime=c;xc(c,a);c=a.expirationTime;0!==c&&Kc(a,c)}}function li(a,b){var c=a.stateNode;null!==c&&c.delete(b);b=ka();b=fb(b,a);a=Sg(a,b);null!==a&&(Bb(a,b),b=a.expirationTime,0!==b&&Kc(a,b))}function Sg(a,b){a.expirationTime<b&&(a.expirationTime=b);var c=a.alternate;null!==c&&c.expirationTime<b&&(c.expirationTime=b);var d=a.return,e=null;if(null===d&&3===a.tag)e=a.stateNode;else for(;null!==d;){c=d.alternate;d.childExpirationTime<b&&(d.childExpirationTime=b);null!==c&&c.childExpirationTime<
+b&&(c.childExpirationTime=b);if(null===d.return&&3===d.tag){e=d.stateNode;break}d=d.return}return e}function ya(a,b){a=Sg(a,b);null!==a&&(!Ca&&0!==H&&b>H&&Jg(),Bb(a,b),Ca&&!Lc&&Y===a||Kc(a,a.expirationTime),Tb>Ci&&(Tb=0,n("185")))}function Tg(a,b,c,d,e){return Mc(se,function(){return a(b,c,d,e)})}function Ub(){aa=1073741822-((ue()-ve)/10|0)}function Ug(a,b){if(0!==Oc){if(b<Oc)return;null!==Pc&&Vg(Pc)}Oc=b;a=ue()-ve;Pc=Wg(Di,{timeout:10*(1073741822-b)-a})}function re(a,b,c,d,e){a.expirationTime=d;
+0!==e||Nc()?0<e&&(a.timeoutHandle=Ei(Fi.bind(null,a,b,c),e)):(a.pendingCommitExpirationTime=c,a.finishedWork=b)}function Fi(a,b,c){a.pendingCommitExpirationTime=c;a.finishedWork=b;Ub();jb=aa;Xg(a,c)}function wi(a,b){a.expirationTime=b;a.finishedWork=null}function ka(){if(w)return jb;Qc();if(0===C||1===C)Ub(),jb=aa;return jb}function Kc(a,b){null===a.nextScheduledRoot?(a.expirationTime=b,null===I?(ba=I=a,a.nextScheduledRoot=a):(I=I.nextScheduledRoot=a,I.nextScheduledRoot=ba)):b>a.expirationTime&&(a.expirationTime=
+b);w||(z?Rc&&(ca=a,C=1073741823,Sc(a,1073741823,!1)):1073741823===b?Z(1073741823,!1):Ug(a,b))}function Qc(){var a=0,b=null;if(null!==I)for(var c=I,d=ba;null!==d;){var e=d.expirationTime;if(0===e){null===c||null===I?n("244"):void 0;if(d===d.nextScheduledRoot){ba=I=d.nextScheduledRoot=null;break}else if(d===ba)ba=e=d.nextScheduledRoot,I.nextScheduledRoot=e,d.nextScheduledRoot=null;else if(d===I){I=c;I.nextScheduledRoot=ba;d.nextScheduledRoot=null;break}else c.nextScheduledRoot=d.nextScheduledRoot,d.nextScheduledRoot=
+null;d=c.nextScheduledRoot}else{e>a&&(a=e,b=d);if(d===I)break;if(1073741823===a)break;c=d;d=d.nextScheduledRoot}}ca=b;C=a}function Nc(){return Tc?!0:Gi()?Tc=!0:!1}function Di(){try{if(!Nc()&&null!==ba){Ub();var a=ba;do{var b=a.expirationTime;0!==b&&aa<=b&&(a.nextExpirationTimeToWorkOn=aa);a=a.nextScheduledRoot}while(a!==ba)}Z(0,!0)}finally{Tc=!1}}function Z(a,b){Qc();if(b)for(Ub(),jb=aa;null!==ca&&0!==C&&a<=C&&!(Tc&&aa>C);)Sc(ca,C,aa>C),Qc(),Ub(),jb=aa;else for(;null!==ca&&0!==C&&a<=C;)Sc(ca,C,!1),
+Qc();b&&(Oc=0,Pc=null);0!==C&&Ug(ca,C);Tb=0;we=null;if(null!==kb)for(a=kb,kb=null,b=0;b<a.length;b++){var c=a[b];try{c._onComplete()}catch(d){lb||(lb=!0,Uc=d)}}if(lb)throw a=Uc,Uc=null,lb=!1,a;}function Xg(a,b){w?n("253"):void 0;ca=a;C=b;Sc(a,b,!1);Z(1073741823,!1)}function Sc(a,b,c){w?n("245"):void 0;w=!0;if(c){var d=a.finishedWork;null!==d?Vc(a,d,b):(a.finishedWork=null,d=a.timeoutHandle,-1!==d&&(a.timeoutHandle=-1,Yg(d)),Rg(a,c),d=a.finishedWork,null!==d&&(Nc()?a.finishedWork=d:Vc(a,d,b)))}else d=
+a.finishedWork,null!==d?Vc(a,d,b):(a.finishedWork=null,d=a.timeoutHandle,-1!==d&&(a.timeoutHandle=-1,Yg(d)),Rg(a,c),d=a.finishedWork,null!==d&&Vc(a,d,b));w=!1}function Vc(a,b,c){var d=a.firstBatch;if(null!==d&&d._expirationTime>=c&&(null===kb?kb=[d]:kb.push(d),d._defer)){a.finishedWork=b;a.expirationTime=0;return}a.finishedWork=null;a===we?Tb++:(we=a,Tb=0);Mc(se,function(){ui(a,b)})}function ie(a){null===ca?n("246"):void 0;ca.expirationTime=0;lb||(lb=!0,Uc=a)}function Zg(a,b){var c=z;z=!0;try{return a(b)}finally{(z=
+c)||w||Z(1073741823,!1)}}function $g(a,b){if(z&&!Rc){Rc=!0;try{return a(b)}finally{Rc=!1}}return a(b)}function ah(a,b,c){z||w||0===oa||(Z(oa,!1),oa=0);var d=z;z=!0;try{return Mc(te,function(){return a(b,c)})}finally{(z=d)||w||Z(1073741823,!1)}}function bh(a,b,c,d,e){var f=b.current;a:if(c){c=c._reactInternalFiber;b:{2===wb(c)&&1===c.tag?void 0:n("170");var g=c;do{switch(g.tag){case 3:g=g.stateNode.context;break b;case 1:if(E(g.type)){g=g.stateNode.__reactInternalMemoizedMergedChildContext;break b}}g=
+g.return}while(null!==g);n("171");g=void 0}if(1===c.tag){var h=c.type;if(E(h)){c=Rf(c,h,g);break a}}c=g}else c=va;null===b.context?b.context=c:b.pendingContext=c;b=e;e=Aa(d);e.payload={element:a};b=void 0===b?null:b;null!==b&&(e.callback=b);eb();na(f,e);ya(f,d);return d}function xe(a,b,c,d){var e=b.current,f=ka();e=fb(f,e);return bh(a,b,c,e,d)}function ye(a){a=a.current;if(!a.child)return null;switch(a.child.tag){case 5:return a.child.stateNode;default:return a.child.stateNode}}function Hi(a,b,c){var d=
+3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:Va,key:null==d?null:""+d,children:a,containerInfo:b,implementation:c}}function Vb(a){var b=1073741822-25*(((1073741822-ka()+500)/25|0)+1);b>=ze&&(b=ze-1);this._expirationTime=ze=b;this._root=a;this._callbacks=this._next=null;this._hasChildren=this._didComplete=!1;this._children=null;this._defer=!0}function mb(){this._callbacks=null;this._didCommit=!1;this._onCommit=this._onCommit.bind(this)}function nb(a,b,c){b=S(3,null,null,
+b?3:0);a={current:b,containerInfo:a,pendingChildren:null,pingCache:null,earliestPendingTime:0,latestPendingTime:0,earliestSuspendedTime:0,latestSuspendedTime:0,latestPingedTime:0,didError:!1,pendingCommitExpirationTime:0,finishedWork:null,timeoutHandle:-1,context:null,pendingContext:null,hydrate:c,nextExpirationTimeToWorkOn:0,expirationTime:0,firstBatch:null,nextScheduledRoot:null};this._internalRoot=b.stateNode=a}function ob(a){return!(!a||1!==a.nodeType&&9!==a.nodeType&&11!==a.nodeType&&(8!==a.nodeType||
+" react-mount-point-unstable "!==a.nodeValue))}function Ii(a,b){b||(b=a?9===a.nodeType?a.documentElement:a.firstChild:null,b=!(!b||1!==b.nodeType||!b.hasAttribute("data-reactroot")));if(!b)for(var c;c=a.lastChild;)a.removeChild(c);return new nb(a,!1,b)}function Wc(a,b,c,d,e){var f=c._reactRootContainer;if(f){if("function"===typeof e){var g=e;e=function(){var a=ye(f._internalRoot);g.call(a)}}null!=a?f.legacy_renderSubtreeIntoContainer(a,b,e):f.render(b,e)}else{f=c._reactRootContainer=Ii(c,d);if("function"===
+typeof e){var h=e;e=function(){var a=ye(f._internalRoot);h.call(a)}}$g(function(){null!=a?f.legacy_renderSubtreeIntoContainer(a,b,e):f.render(b,e)})}return ye(f._internalRoot)}function ch(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;ob(b)?void 0:n("200");return Hi(a,b,null,c)}da?void 0:n("227");var sh=function(a,b,c,d,e,f,g,h,l){var k=Array.prototype.slice.call(arguments,3);try{b.apply(c,k)}catch(m){this.onError(m)}},qb=!1,$b=null,ac=!1,Yc=null,th={onError:function(a){qb=
+!0;$b=a}},bc=null,Na={},cc=[],Zc={},Oa={},$c={},bd=null,Ue=null,He=null,rb=null,vh=function(a){if(a){var b=a._dispatchListeners,c=a._dispatchInstances;if(Array.isArray(b))for(var d=0;d<b.length&&!a.isPropagationStopped();d++)Ge(a,b[d],c[d]);else b&&Ge(a,b,c);a._dispatchListeners=null;a._dispatchInstances=null;a.isPersistent()||a.constructor.release(a)}},Ae={injectEventPluginOrder:function(a){bc?n("101"):void 0;bc=Array.prototype.slice.call(a);Ee()},injectEventPluginsByName:function(a){var b=!1,c;
+for(c in a)if(a.hasOwnProperty(c)){var d=a[c];Na.hasOwnProperty(c)&&Na[c]===d||(Na[c]?n("102",c):void 0,Na[c]=d,b=!0)}b&&Ee()}},dh=Math.random().toString(36).slice(2),ea="__reactInternalInstance$"+dh,ec="__reactEventHandlers$"+dh,ra=!("undefined"===typeof window||!window.document||!window.document.createElement),Ra={animationend:fc("Animation","AnimationEnd"),animationiteration:fc("Animation","AnimationIteration"),animationstart:fc("Animation","AnimationStart"),transitionend:fc("Transition","TransitionEnd")},
+fd={},Le={};ra&&(Le=document.createElement("div").style,"AnimationEvent"in window||(delete Ra.animationend.animation,delete Ra.animationiteration.animation,delete Ra.animationstart.animation),"TransitionEvent"in window||delete Ra.transitionend.transition);var eh=gc("animationend"),fh=gc("animationiteration"),gh=gc("animationstart"),hh=gc("transitionend"),zb="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),
+qa=null,gd=null,hc=null,B=da.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.assign;B(J.prototype,{preventDefault:function(){this.defaultPrevented=!0;var a=this.nativeEvent;a&&(a.preventDefault?a.preventDefault():"unknown"!==typeof a.returnValue&&(a.returnValue=!1),this.isDefaultPrevented=ic)},stopPropagation:function(){var a=this.nativeEvent;a&&(a.stopPropagation?a.stopPropagation():"unknown"!==typeof a.cancelBubble&&(a.cancelBubble=!0),this.isPropagationStopped=ic)},persist:function(){this.isPersistent=
+ic},isPersistent:jc,destructor:function(){var a=this.constructor.Interface,b;for(b in a)this[b]=null;this.nativeEvent=this._targetInst=this.dispatchConfig=null;this.isPropagationStopped=this.isDefaultPrevented=jc;this._dispatchInstances=this._dispatchListeners=null}});J.Interface={type:null,target:null,currentTarget:function(){return null},eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(a){return a.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null};J.extend=function(a){function b(){return c.apply(this,
+arguments)}var c=this,d=function(){};d.prototype=c.prototype;d=new d;B(d,b.prototype);b.prototype=d;b.prototype.constructor=b;b.Interface=B({},c.Interface,a);b.extend=c.extend;Ne(b);return b};Ne(J);var Ji=J.extend({data:null}),Ki=J.extend({data:null}),Ah=[9,13,27,32],hd=ra&&"CompositionEvent"in window,Wb=null;ra&&"documentMode"in document&&(Wb=document.documentMode);var Li=ra&&"TextEvent"in window&&!Wb,Se=ra&&(!hd||Wb&&8<Wb&&11>=Wb),Re=String.fromCharCode(32),pa={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",
+captured:"onBeforeInputCapture"},dependencies:["compositionend","keypress","textInput","paste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"blur compositionend keydown keypress keyup mousedown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"blur compositionstart keydown keypress keyup mousedown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",
+captured:"onCompositionUpdateCapture"},dependencies:"blur compositionupdate keydown keypress keyup mousedown".split(" ")}},Qe=!1,Sa=!1,Mi={eventTypes:pa,extractEvents:function(a,b,c,d){var e=void 0;var f=void 0;if(hd)b:{switch(a){case "compositionstart":e=pa.compositionStart;break b;case "compositionend":e=pa.compositionEnd;break b;case "compositionupdate":e=pa.compositionUpdate;break b}e=void 0}else Sa?Oe(a,c)&&(e=pa.compositionEnd):"keydown"===a&&229===c.keyCode&&(e=pa.compositionStart);e?(Se&&
+"ko"!==c.locale&&(Sa||e!==pa.compositionStart?e===pa.compositionEnd&&Sa&&(f=Me()):(qa=d,gd="value"in qa?qa.value:qa.textContent,Sa=!0)),e=Ji.getPooled(e,b,c,d),f?e.data=f:(f=Pe(c),null!==f&&(e.data=f)),Qa(e),f=e):f=null;(a=Li?Bh(a,c):Ch(a,c))?(b=Ki.getPooled(pa.beforeInput,b,c,d),b.data=a,Qa(b)):b=null;return null===f?b:null===b?f:[f,b]}},id=null,Ta=null,Ua=null,Ye=function(a,b){return a(b)},yf=function(a,b,c){return a(b,c)},Ze=function(){},jd=!1,Dh={color:!0,date:!0,datetime:!0,"datetime-local":!0,
+email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0},Ma=da.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;Ma.hasOwnProperty("ReactCurrentDispatcher")||(Ma.ReactCurrentDispatcher={current:null});var Fh=/^(.*)[\\\/]/,O="function"===typeof Symbol&&Symbol.for,Bc=O?Symbol.for("react.element"):60103,Va=O?Symbol.for("react.portal"):60106,ta=O?Symbol.for("react.fragment"):60107,md=O?Symbol.for("react.strict_mode"):60108,lc=O?Symbol.for("react.profiler"):60114,
+ff=O?Symbol.for("react.provider"):60109,ef=O?Symbol.for("react.context"):60110,ld=O?Symbol.for("react.concurrent_mode"):60111,od=O?Symbol.for("react.forward_ref"):60112,nd=O?Symbol.for("react.suspense"):60113,pd=O?Symbol.for("react.memo"):60115,gf=O?Symbol.for("react.lazy"):60116,df="function"===typeof Symbol&&Symbol.iterator,Hh=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,
+hf=Object.prototype.hasOwnProperty,kf={},jf={},A={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(a){A[a]=new K(a,0,!1,a,null)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(a){var b=a[0];A[b]=new K(b,1,!1,a[1],null)});["contentEditable","draggable","spellCheck","value"].forEach(function(a){A[a]=new K(a,2,!1,
+a.toLowerCase(),null)});["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(a){A[a]=new K(a,2,!1,a,null)});"allowFullScreen async autoFocus autoPlay controls default defer disabled formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(a){A[a]=new K(a,3,!1,a.toLowerCase(),null)});["checked","multiple","muted","selected"].forEach(function(a){A[a]=new K(a,3,!0,a,null)});["capture",
+"download"].forEach(function(a){A[a]=new K(a,4,!1,a,null)});["cols","rows","size","span"].forEach(function(a){A[a]=new K(a,6,!1,a,null)});["rowSpan","start"].forEach(function(a){A[a]=new K(a,5,!1,a.toLowerCase(),null)});var Be=/[\-:]([a-z])/g,Ce=function(a){return a[1].toUpperCase()};"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(a){var b=
+a.replace(Be,Ce);A[b]=new K(b,1,!1,a,null)});"xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(a){var b=a.replace(Be,Ce);A[b]=new K(b,1,!1,a,"http://www.w3.org/1999/xlink")});["xml:base","xml:lang","xml:space"].forEach(function(a){var b=a.replace(Be,Ce);A[b]=new K(b,1,!1,a,"http://www.w3.org/XML/1998/namespace")});["tabIndex","crossOrigin"].forEach(function(a){A[a]=new K(a,1,!1,a.toLowerCase(),null)});var pf={change:{phasedRegistrationNames:{bubbled:"onChange",
+captured:"onChangeCapture"},dependencies:"blur change click focus input keydown keyup selectionchange".split(" ")}},tb=null,ub=null,De=!1;ra&&(De=af("input")&&(!document.documentMode||9<document.documentMode));var Ni={eventTypes:pf,_isInputEventSupported:De,extractEvents:function(a,b,c,d){var e=b?Da(b):window,f=void 0,g=void 0,h=e.nodeName&&e.nodeName.toLowerCase();"select"===h||"input"===h&&"file"===e.type?f=Lh:$e(e)?De?f=Ph:(f=Nh,g=Mh):(h=e.nodeName)&&"input"===h.toLowerCase()&&("checkbox"===e.type||
+"radio"===e.type)&&(f=Oh);if(f&&(f=f(a,b)))return of(f,c,d);g&&g(a,e,b);"blur"===a&&(a=e._wrapperState)&&a.controlled&&"number"===e.type&&ud(e,"number",e.value)}},Xb=J.extend({view:null,detail:null}),Rh={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"},ih=0,jh=0,kh=!1,lh=!1,Yb=Xb.extend({screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,getModifierState:vd,button:null,buttons:null,relatedTarget:function(a){return a.relatedTarget||
+(a.fromElement===a.srcElement?a.toElement:a.fromElement)},movementX:function(a){if("movementX"in a)return a.movementX;var b=ih;ih=a.screenX;return kh?"mousemove"===a.type?a.screenX-b:0:(kh=!0,0)},movementY:function(a){if("movementY"in a)return a.movementY;var b=jh;jh=a.screenY;return lh?"mousemove"===a.type?a.screenY-b:0:(lh=!0,0)}}),mh=Yb.extend({pointerId:null,width:null,height:null,pressure:null,tangentialPressure:null,tiltX:null,tiltY:null,twist:null,pointerType:null,isPrimary:null}),Zb={mouseEnter:{registrationName:"onMouseEnter",
+dependencies:["mouseout","mouseover"]},mouseLeave:{registrationName:"onMouseLeave",dependencies:["mouseout","mouseover"]},pointerEnter:{registrationName:"onPointerEnter",dependencies:["pointerout","pointerover"]},pointerLeave:{registrationName:"onPointerLeave",dependencies:["pointerout","pointerover"]}},Oi={eventTypes:Zb,extractEvents:function(a,b,c,d){var e="mouseover"===a||"pointerover"===a,f="mouseout"===a||"pointerout"===a;if(e&&(c.relatedTarget||c.fromElement)||!f&&!e)return null;e=d.window===
+d?d:(e=d.ownerDocument)?e.defaultView||e.parentWindow:window;f?(f=b,b=(b=c.relatedTarget||c.toElement)?dc(b):null):f=null;if(f===b)return null;var g=void 0,h=void 0,l=void 0,k=void 0;if("mouseout"===a||"mouseover"===a)g=Yb,h=Zb.mouseLeave,l=Zb.mouseEnter,k="mouse";else if("pointerout"===a||"pointerover"===a)g=mh,h=Zb.pointerLeave,l=Zb.pointerEnter,k="pointer";var m=null==f?e:Da(f);e=null==b?e:Da(b);a=g.getPooled(h,f,c,d);a.type=k+"leave";a.target=m;a.relatedTarget=e;c=g.getPooled(l,b,c,d);c.type=
+k+"enter";c.target=e;c.relatedTarget=m;d=b;if(f&&d)a:{b=f;e=d;k=0;for(g=b;g;g=fa(g))k++;g=0;for(l=e;l;l=fa(l))g++;for(;0<k-g;)b=fa(b),k--;for(;0<g-k;)e=fa(e),g--;for(;k--;){if(b===e||b===e.alternate)break a;b=fa(b);e=fa(e)}b=null}else b=null;e=b;for(b=[];f&&f!==e;){k=f.alternate;if(null!==k&&k===e)break;b.push(f);f=fa(f)}for(f=[];d&&d!==e;){k=d.alternate;if(null!==k&&k===e)break;f.push(d);d=fa(d)}for(d=0;d<b.length;d++)ed(b[d],"bubbled",a);for(d=f.length;0<d--;)ed(f[d],"captured",c);return[a,c]}},
+Sh=Object.prototype.hasOwnProperty,Pi=J.extend({animationName:null,elapsedTime:null,pseudoElement:null}),Qi=J.extend({clipboardData:function(a){return"clipboardData"in a?a.clipboardData:window.clipboardData}}),Ri=Xb.extend({relatedTarget:null}),Si={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},Ti={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",
+16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},Ui=Xb.extend({key:function(a){if(a.key){var b=Si[a.key]||a.key;if("Unidentified"!==b)return b}return"keypress"===a.type?(a=nc(a),13===a?"Enter":
+String.fromCharCode(a)):"keydown"===a.type||"keyup"===a.type?Ti[a.keyCode]||"Unidentified":""},location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:vd,charCode:function(a){return"keypress"===a.type?nc(a):0},keyCode:function(a){return"keydown"===a.type||"keyup"===a.type?a.keyCode:0},which:function(a){return"keypress"===a.type?nc(a):"keydown"===a.type||"keyup"===a.type?a.keyCode:0}}),Vi=Yb.extend({dataTransfer:null}),Wi=Xb.extend({touches:null,targetTouches:null,
+changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:vd}),Xi=J.extend({propertyName:null,elapsedTime:null,pseudoElement:null}),Yi=Yb.extend({deltaX:function(a){return"deltaX"in a?a.deltaX:"wheelDeltaX"in a?-a.wheelDeltaX:0},deltaY:function(a){return"deltaY"in a?a.deltaY:"wheelDeltaY"in a?-a.wheelDeltaY:"wheelDelta"in a?-a.wheelDelta:0},deltaZ:null,deltaMode:null}),Zi=[["abort","abort"],[eh,"animationEnd"],[fh,"animationIteration"],[gh,"animationStart"],["canplay",
+"canPlay"],["canplaythrough","canPlayThrough"],["drag","drag"],["dragenter","dragEnter"],["dragexit","dragExit"],["dragleave","dragLeave"],["dragover","dragOver"],["durationchange","durationChange"],["emptied","emptied"],["encrypted","encrypted"],["ended","ended"],["error","error"],["gotpointercapture","gotPointerCapture"],["load","load"],["loadeddata","loadedData"],["loadedmetadata","loadedMetadata"],["loadstart","loadStart"],["lostpointercapture","lostPointerCapture"],["mousemove","mouseMove"],
+["mouseout","mouseOut"],["mouseover","mouseOver"],["playing","playing"],["pointermove","pointerMove"],["pointerout","pointerOut"],["pointerover","pointerOver"],["progress","progress"],["scroll","scroll"],["seeking","seeking"],["stalled","stalled"],["suspend","suspend"],["timeupdate","timeUpdate"],["toggle","toggle"],["touchmove","touchMove"],[hh,"transitionEnd"],["waiting","waiting"],["wheel","wheel"]],vf={},wd={};[["blur","blur"],["cancel","cancel"],["click","click"],["close","close"],["contextmenu",
+"contextMenu"],["copy","copy"],["cut","cut"],["auxclick","auxClick"],["dblclick","doubleClick"],["dragend","dragEnd"],["dragstart","dragStart"],["drop","drop"],["focus","focus"],["input","input"],["invalid","invalid"],["keydown","keyDown"],["keypress","keyPress"],["keyup","keyUp"],["mousedown","mouseDown"],["mouseup","mouseUp"],["paste","paste"],["pause","pause"],["play","play"],["pointercancel","pointerCancel"],["pointerdown","pointerDown"],["pointerup","pointerUp"],["ratechange","rateChange"],["reset",
+"reset"],["seeked","seeked"],["submit","submit"],["touchcancel","touchCancel"],["touchend","touchEnd"],["touchstart","touchStart"],["volumechange","volumeChange"]].forEach(function(a){uf(a,!0)});Zi.forEach(function(a){uf(a,!1)});var nh={eventTypes:vf,isInteractiveTopLevelEventType:function(a){a=wd[a];return void 0!==a&&!0===a.isInteractive},extractEvents:function(a,b,c,d){var e=wd[a];if(!e)return null;switch(a){case "keypress":if(0===nc(c))return null;case "keydown":case "keyup":a=Ui;break;case "blur":case "focus":a=
+Ri;break;case "click":if(2===c.button)return null;case "auxclick":case "dblclick":case "mousedown":case "mousemove":case "mouseup":case "mouseout":case "mouseover":case "contextmenu":a=Yb;break;case "drag":case "dragend":case "dragenter":case "dragexit":case "dragleave":case "dragover":case "dragstart":case "drop":a=Vi;break;case "touchcancel":case "touchend":case "touchmove":case "touchstart":a=Wi;break;case eh:case fh:case gh:a=Pi;break;case hh:a=Xi;break;case "scroll":a=Xb;break;case "wheel":a=
+Yi;break;case "copy":case "cut":case "paste":a=Qi;break;case "gotpointercapture":case "lostpointercapture":case "pointercancel":case "pointerdown":case "pointermove":case "pointerout":case "pointerover":case "pointerup":a=mh;break;default:a=J}b=a.getPooled(e,b,c,d);Qa(b);return b}},wf=nh.isInteractiveTopLevelEventType,rc=[],qc=!0,Af={},Vh=0,sc="_reactListenersID"+(""+Math.random()).slice(2),$i=ra&&"documentMode"in document&&11>=document.documentMode,Hf={select:{phasedRegistrationNames:{bubbled:"onSelect",
+captured:"onSelectCapture"},dependencies:"blur contextmenu dragend focus keydown keyup mousedown mouseup selectionchange".split(" ")}},Wa=null,Ad=null,xb=null,zd=!1,aj={eventTypes:Hf,extractEvents:function(a,b,c,d){var e=d.window===d?d.document:9===d.nodeType?d:d.ownerDocument,f;if(!(f=!e)){a:{e=zf(e);f=$c.onSelect;for(var g=0;g<f.length;g++){var h=f[g];if(!e.hasOwnProperty(h)||!e[h]){e=!1;break a}}e=!0}f=!e}if(f)return null;e=b?Da(b):window;switch(a){case "focus":if($e(e)||"true"===e.contentEditable)Wa=
+e,Ad=b,xb=null;break;case "blur":xb=Ad=Wa=null;break;case "mousedown":zd=!0;break;case "contextmenu":case "mouseup":case "dragend":return zd=!1,Gf(c,d);case "selectionchange":if($i)break;case "keydown":case "keyup":return Gf(c,d)}return null}};Ae.injectEventPluginOrder("ResponderEventPlugin SimpleEventPlugin EnterLeaveEventPlugin ChangeEventPlugin SelectEventPlugin BeforeInputEventPlugin".split(" "));(function(a,b,c){bd=a;Ue=b;He=c})(dd,Je,Da);Ae.injectEventPluginsByName({SimpleEventPlugin:nh,EnterLeaveEventPlugin:Oi,
+ChangeEventPlugin:Ni,SelectEventPlugin:aj,BeforeInputEventPlugin:Mi});var Xc=void 0,Of=function(a){return"undefined"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(b,c,d,e){MSApp.execUnsafeLocalFunction(function(){return a(b,c,d,e)})}:a}(function(a,b){if("http://www.w3.org/2000/svg"!==a.namespaceURI||"innerHTML"in a)a.innerHTML=b;else{Xc=Xc||document.createElement("div");Xc.innerHTML="<svg>"+b+"</svg>";for(b=Xc.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;b.firstChild;)a.appendChild(b.firstChild)}}),
+Ab=function(a,b){if(b){var c=a.firstChild;if(c&&c===a.lastChild&&3===c.nodeType){c.nodeValue=b;return}}a.textContent=b},yb={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,
+lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},bj=["Webkit","ms","Moz","O"];Object.keys(yb).forEach(function(a){bj.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);yb[b]=yb[a]})});var Zh=B({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,
+source:!0,track:!0,wbr:!0}),R=da.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler,Vg=R.unstable_cancelCallback,ue=R.unstable_now,Wg=R.unstable_scheduleCallback,Gi=R.unstable_shouldYield,Mc=R.unstable_runWithPriority,zi=R.unstable_getCurrentPriorityLevel,se=R.unstable_ImmediatePriority,te=R.unstable_UserBlockingPriority,Lg=R.unstable_NormalPriority,Ai=R.unstable_LowPriority,Bi=R.unstable_IdlePriority,ne=null,oe=null,Ei="function"===typeof setTimeout?setTimeout:void 0,Yg="function"===typeof clearTimeout?
+clearTimeout:void 0,vi=Wg,ti=Vg;new Set;var Id=[],Ya=-1,va={},F={current:va},M={current:!1},Fa=va,Kd=null,Ld=null,S=function(a,b,c,d){return new bi(a,b,c,d)},$f=(new da.Component).refs,zc={isMounted:function(a){return(a=a._reactInternalFiber)?2===wb(a):!1},enqueueSetState:function(a,b,c){a=a._reactInternalFiber;var d=ka();d=fb(d,a);var e=Aa(d);e.payload=b;void 0!==c&&null!==c&&(e.callback=c);eb();na(a,e);ya(a,d)},enqueueReplaceState:function(a,b,c){a=a._reactInternalFiber;var d=ka();d=fb(d,a);var e=
+Aa(d);e.tag=yg;e.payload=b;void 0!==c&&null!==c&&(e.callback=c);eb();na(a,e);ya(a,d)},enqueueForceUpdate:function(a,b){a=a._reactInternalFiber;var c=ka();c=fb(c,a);var d=Aa(c);d.tag=Ec;void 0!==b&&null!==b&&(d.callback=b);eb();na(a,d);ya(a,c)}},Cc=Array.isArray,hb=ag(!0),ae=ag(!1),Eb={},U={current:Eb},Gb={current:Eb},Fb={current:Eb},db=0,pi=2,Rb=4,ji=8,ri=16,Sb=32,me=64,le=128,Dc=Ma.ReactCurrentDispatcher,Hb=0,xa=null,y=null,W=null,bb=null,G=null,ab=null,Kb=0,X=null,Lb=0,Ib=!1,ia=null,Jb=0,Ud={readContext:T,
+useCallback:V,useContext:V,useEffect:V,useImperativeHandle:V,useLayoutEffect:V,useMemo:V,useReducer:V,useRef:V,useState:V,useDebugValue:V},fi={readContext:T,useCallback:function(a,b){cb().memoizedState=[a,void 0===b?null:b];return a},useContext:T,useEffect:function(a,b){return Xd(516,le|me,a,b)},useImperativeHandle:function(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):null;return Xd(4,Rb|Sb,fg.bind(null,b,a),c)},useLayoutEffect:function(a,b){return Xd(4,Rb|Sb,a,b)},useMemo:function(a,b){var c=cb();
+b=void 0===b?null:b;a=a();c.memoizedState=[a,b];return a},useReducer:function(a,b,c){var d=cb();b=void 0!==c?c(b):b;d.memoizedState=d.baseState=b;a=d.queue={last:null,dispatch:null,lastRenderedReducer:a,lastRenderedState:b};a=a.dispatch=hg.bind(null,xa,a);return[d.memoizedState,a]},useRef:function(a){var b=cb();a={current:a};return b.memoizedState=a},useState:function(a){var b=cb();"function"===typeof a&&(a=a());b.memoizedState=b.baseState=a;a=b.queue={last:null,dispatch:null,lastRenderedReducer:dg,
+lastRenderedState:a};a=a.dispatch=hg.bind(null,xa,a);return[b.memoizedState,a]},useDebugValue:gg},cg={readContext:T,useCallback:function(a,b){var c=Mb();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&Sd(b,d[1]))return d[0];c.memoizedState=[a,b];return a},useContext:T,useEffect:function(a,b){return Yd(516,le|me,a,b)},useImperativeHandle:function(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):null;return Yd(4,Rb|Sb,fg.bind(null,b,a),c)},useLayoutEffect:function(a,b){return Yd(4,Rb|Sb,
+a,b)},useMemo:function(a,b){var c=Mb();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&Sd(b,d[1]))return d[0];a=a();c.memoizedState=[a,b];return a},useReducer:eg,useRef:function(a){return Mb().memoizedState},useState:function(a){return eg(dg,a)},useDebugValue:gg},la=null,gb=null,Ia=!1,gi=Ma.ReactCurrentOwner,ja=!1,de={current:null},Nb=null,Ja=null,Ob=null,ug=0,yg=1,Ec=2,ge=3,za=!1,Og=void 0,pe=void 0,Ng=void 0,Pg=void 0;Og=function(a,b,c,d){for(c=b.child;null!==c;){if(5===c.tag||
+6===c.tag)a.appendChild(c.stateNode);else if(4!==c.tag&&null!==c.child){c.child.return=c;c=c.child;continue}if(c===b)break;for(;null===c.sibling;){if(null===c.return||c.return===b)return;c=c.return}c.sibling.return=c.return;c=c.sibling}};pe=function(a){};Ng=function(a,b,c,d,e){var f=a.memoizedProps;if(f!==d){var g=b.stateNode;Ha(U.current);a=null;switch(c){case "input":f=sd(g,f);d=sd(g,d);a=[];break;case "option":f=Bd(g,f);d=Bd(g,d);a=[];break;case "select":f=B({},f,{value:void 0});d=B({},d,{value:void 0});
+a=[];break;case "textarea":f=Cd(g,f);d=Cd(g,d);a=[];break;default:"function"!==typeof f.onClick&&"function"===typeof d.onClick&&(g.onclick=tc)}Ed(c,d);g=c=void 0;var h=null;for(c in f)if(!d.hasOwnProperty(c)&&f.hasOwnProperty(c)&&null!=f[c])if("style"===c){var l=f[c];for(g in l)l.hasOwnProperty(g)&&(h||(h={}),h[g]="")}else"dangerouslySetInnerHTML"!==c&&"children"!==c&&"suppressContentEditableWarning"!==c&&"suppressHydrationWarning"!==c&&"autoFocus"!==c&&(Oa.hasOwnProperty(c)?a||(a=[]):(a=a||[]).push(c,
+null));for(c in d){var k=d[c];l=null!=f?f[c]:void 0;if(d.hasOwnProperty(c)&&k!==l&&(null!=k||null!=l))if("style"===c)if(l){for(g in l)!l.hasOwnProperty(g)||k&&k.hasOwnProperty(g)||(h||(h={}),h[g]="");for(g in k)k.hasOwnProperty(g)&&l[g]!==k[g]&&(h||(h={}),h[g]=k[g])}else h||(a||(a=[]),a.push(c,h)),h=k;else"dangerouslySetInnerHTML"===c?(k=k?k.__html:void 0,l=l?l.__html:void 0,null!=k&&l!==k&&(a=a||[]).push(c,""+k)):"children"===c?l===k||"string"!==typeof k&&"number"!==typeof k||(a=a||[]).push(c,""+
+k):"suppressContentEditableWarning"!==c&&"suppressHydrationWarning"!==c&&(Oa.hasOwnProperty(c)?(null!=k&&ha(e,c),a||l===k||(a=[])):(a=a||[]).push(c,k))}h&&(a=a||[]).push("style",h);e=a;(b.updateQueue=e)&&Pb(b)}};Pg=function(a,b,c,d){c!==d&&Pb(b)};var ki="function"===typeof WeakSet?WeakSet:Set,xi="function"===typeof WeakMap?WeakMap:Map,qe=Ma.ReactCurrentDispatcher,Kg=Ma.ReactCurrentOwner,ze=1073741822,Ca=!1,x=null,Y=null,H=0,La=-1,je=!1,p=null,Lc=!1,ke=null,Jc=null,Ic=null,Ba=null,ba=null,I=null,Oc=
+0,Pc=void 0,w=!1,ca=null,C=0,oa=0,lb=!1,Uc=null,z=!1,Rc=!1,kb=null,ve=ue(),aa=1073741822-(ve/10|0),jb=aa,Ci=50,Tb=0,we=null,Tc=!1;id=function(a,b,c){switch(b){case "input":td(a,c);b=c.name;if("radio"===c.type&&null!=b){for(c=a;c.parentNode;)c=c.parentNode;c=c.querySelectorAll("input[name="+JSON.stringify(""+b)+'][type="radio"]');for(b=0;b<c.length;b++){var d=c[b];if(d!==a&&d.form===a.form){var e=dd(d);e?void 0:n("90");cf(d);td(d,e)}}}break;case "textarea":Jf(a,c);break;case "select":b=c.value,null!=
+b&&Xa(a,!!c.multiple,b,!1)}};Vb.prototype.render=function(a){this._defer?void 0:n("250");this._hasChildren=!0;this._children=a;var b=this._root._internalRoot,c=this._expirationTime,d=new mb;bh(a,b,null,c,d._onCommit);return d};Vb.prototype.then=function(a){if(this._didComplete)a();else{var b=this._callbacks;null===b&&(b=this._callbacks=[]);b.push(a)}};Vb.prototype.commit=function(){var a=this._root._internalRoot,b=a.firstBatch;this._defer&&null!==b?void 0:n("251");if(this._hasChildren){var c=this._expirationTime;
+if(b!==this){this._hasChildren&&(c=this._expirationTime=b._expirationTime,this.render(this._children));for(var d=null,e=b;e!==this;)d=e,e=e._next;null===d?n("251"):void 0;d._next=e._next;this._next=b;a.firstBatch=this}this._defer=!1;Xg(a,c);b=this._next;this._next=null;b=a.firstBatch=b;null!==b&&b._hasChildren&&b.render(b._children)}else this._next=null,this._defer=!1};Vb.prototype._onComplete=function(){if(!this._didComplete){this._didComplete=!0;var a=this._callbacks;if(null!==a)for(var b=0;b<a.length;b++)(0,a[b])()}};
+mb.prototype.then=function(a){if(this._didCommit)a();else{var b=this._callbacks;null===b&&(b=this._callbacks=[]);b.push(a)}};mb.prototype._onCommit=function(){if(!this._didCommit){this._didCommit=!0;var a=this._callbacks;if(null!==a)for(var b=0;b<a.length;b++){var c=a[b];"function"!==typeof c?n("191",c):void 0;c()}}};nb.prototype.render=function(a,b){var c=this._internalRoot,d=new mb;b=void 0===b?null:b;null!==b&&d.then(b);xe(a,c,null,d._onCommit);return d};nb.prototype.unmount=function(a){var b=
+this._internalRoot,c=new mb;a=void 0===a?null:a;null!==a&&c.then(a);xe(null,b,null,c._onCommit);return c};nb.prototype.legacy_renderSubtreeIntoContainer=function(a,b,c){var d=this._internalRoot,e=new mb;c=void 0===c?null:c;null!==c&&e.then(c);xe(b,d,a,e._onCommit);return e};nb.prototype.createBatch=function(){var a=new Vb(this),b=a._expirationTime,c=this._internalRoot,d=c.firstBatch;if(null===d)c.firstBatch=a,a._next=null;else{for(c=null;null!==d&&d._expirationTime>=b;)c=d,d=d._next;a._next=d;null!==
+c&&(c._next=a)}return a};(function(a,b,c){Ye=a;yf=b;Ze=c})(Zg,ah,function(){w||0===oa||(Z(oa,!1),oa=0)});var oh={createPortal:ch,findDOMNode:function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternalFiber;void 0===b&&("function"===typeof a.render?n("188"):n("268",Object.keys(a)));a=tf(b);a=null===a?null:a.stateNode;return a},hydrate:function(a,b,c){ob(b)?void 0:n("200");return Wc(null,a,b,!0,c)},render:function(a,b,c){ob(b)?void 0:n("200");return Wc(null,a,b,!1,c)},unstable_renderSubtreeIntoContainer:function(a,
+b,c,d){ob(c)?void 0:n("200");null==a||void 0===a._reactInternalFiber?n("38"):void 0;return Wc(a,b,c,!1,d)},unmountComponentAtNode:function(a){ob(a)?void 0:n("40");return a._reactRootContainer?($g(function(){Wc(null,null,a,!1,function(){a._reactRootContainer=null})}),!0):!1},unstable_createPortal:function(){return ch.apply(void 0,arguments)},unstable_batchedUpdates:Zg,unstable_interactiveUpdates:ah,flushSync:function(a,b){w?n("187"):void 0;var c=z;z=!0;try{return Tg(a,b)}finally{z=c,Z(1073741823,!1)}},
+unstable_createRoot:function(a,b){ob(a)?void 0:n("299","unstable_createRoot");return new nb(a,!0,null!=b&&!0===b.hydrate)},unstable_flushControlled:function(a){var b=z;z=!0;try{Tg(a)}finally{(z=b)||w||Z(1073741823,!1)}},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{Events:[Je,Da,dd,Ae.injectEventPluginsByName,Zc,Qa,function(a){ad(a,xh)},Ve,We,oc,cd]}};(function(a){var b=a.findFiberByHostInstance;return ai(B({},a,{overrideProps:null,currentDispatcherRef:Ma.ReactCurrentDispatcher,findHostInstanceByFiber:function(a){a=
+tf(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:dc,bundleType:0,version:"16.8.6",rendererPackageName:"react-dom"});var ph={default:oh},qh=ph&&oh||ph;return qh.default||qh});

extras/benchmarks/react/react.production.min.js

@@ -0,0 +1,33 @@
+/** @license React v16.8.6
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';(function(N,q){"object"===typeof exports&&"undefined"!==typeof module?module.exports=q():"function"===typeof define&&define.amd?define(q):N.React=q()})(this,function(){function N(a,b,d,g,p,c,e,h){if(!a){a=void 0;if(void 0===b)a=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var n=[d,g,p,c,e,h],f=0;a=Error(b.replace(/%s/g,function(){return n[f++]}));a.name="Invariant Violation"}a.framesToPop=1;
+throw a;}}function q(a){for(var b=arguments.length-1,d="https://reactjs.org/docs/error-decoder.html?invariant="+a,g=0;g<b;g++)d+="&args[]="+encodeURIComponent(arguments[g+1]);N(!1,"Minified React error #"+a+"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",d)}function t(a,b,d){this.props=a;this.context=b;this.refs=ba;this.updater=d||ca}function da(){}function O(a,b,d){this.props=a;this.context=b;this.refs=ba;this.updater=d||
+ca}function u(){if(!x){var a=c.expirationTime;C?P():C=!0;D(ta,a)}}function Q(){var a=c,b=c.next;if(c===b)c=null;else{var d=c.previous;c=d.next=b;b.previous=d}a.next=a.previous=null;d=a.callback;b=a.expirationTime;a=a.priorityLevel;var g=f,p=E;f=a;E=b;try{var n=d()}finally{f=g,E=p}if("function"===typeof n)if(n={callback:n,priorityLevel:a,expirationTime:b,next:null,previous:null},null===c)c=n.next=n.previous=n;else{d=null;a=c;do{if(a.expirationTime>=b){d=a;break}a=a.next}while(a!==c);null===d?d=c:d===
+c&&(c=n,u());b=d.previous;b.next=d.previous=n;n.next=d;n.previous=b}}function F(){if(-1===k&&null!==c&&1===c.priorityLevel){x=!0;try{do Q();while(null!==c&&1===c.priorityLevel)}finally{x=!1,null!==c?u():C=!1}}}function ta(a){x=!0;var b=G;G=a;try{if(a)for(;null!==c;){var d=l();if(c.expirationTime<=d){do Q();while(null!==c&&c.expirationTime<=d)}else break}else if(null!==c){do Q();while(null!==c&&!H())}}finally{x=!1,G=b,null!==c?u():C=!1,F()}}function ea(a,b,d){var g=void 0,p={},c=null,e=null;if(null!=
+b)for(g in void 0!==b.ref&&(e=b.ref),void 0!==b.key&&(c=""+b.key),b)fa.call(b,g)&&!ha.hasOwnProperty(g)&&(p[g]=b[g]);var h=arguments.length-2;if(1===h)p.children=d;else if(1<h){for(var f=Array(h),k=0;k<h;k++)f[k]=arguments[k+2];p.children=f}if(a&&a.defaultProps)for(g in h=a.defaultProps,h)void 0===p[g]&&(p[g]=h[g]);return{$$typeof:y,type:a,key:c,ref:e,props:p,_owner:R.current}}function ua(a,b){return{$$typeof:y,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function S(a){return"object"===
+typeof a&&null!==a&&a.$$typeof===y}function va(a){var b={"=":"=0",":":"=2"};return"$"+(""+a).replace(/[=:]/g,function(a){return b[a]})}function ia(a,b,d,g){if(I.length){var c=I.pop();c.result=a;c.keyPrefix=b;c.func=d;c.context=g;c.count=0;return c}return{result:a,keyPrefix:b,func:d,context:g,count:0}}function ja(a){a.result=null;a.keyPrefix=null;a.func=null;a.context=null;a.count=0;10>I.length&&I.push(a)}function T(a,b,d,g){var c=typeof a;if("undefined"===c||"boolean"===c)a=null;var e=!1;if(null===
+a)e=!0;else switch(c){case "string":case "number":e=!0;break;case "object":switch(a.$$typeof){case y:case wa:e=!0}}if(e)return d(g,a,""===b?"."+U(a,0):b),1;e=0;b=""===b?".":b+":";if(Array.isArray(a))for(var f=0;f<a.length;f++){c=a[f];var h=b+U(c,f);e+=T(c,h,d,g)}else if(null===a||"object"!==typeof a?h=null:(h=ka&&a[ka]||a["@@iterator"],h="function"===typeof h?h:null),"function"===typeof h)for(a=h.call(a),f=0;!(c=a.next()).done;)c=c.value,h=b+U(c,f++),e+=T(c,h,d,g);else"object"===c&&(d=""+a,q("31",
+"[object Object]"===d?"object with keys {"+Object.keys(a).join(", ")+"}":d,""));return e}function V(a,b,d){return null==a?0:T(a,"",b,d)}function U(a,b){return"object"===typeof a&&null!==a&&null!=a.key?va(a.key):b.toString(36)}function xa(a,b,d){a.func.call(a.context,b,a.count++)}function ya(a,b,d){var g=a.result,c=a.keyPrefix;a=a.func.call(a.context,b,a.count++);Array.isArray(a)?W(a,g,d,function(a){return a}):null!=a&&(S(a)&&(a=ua(a,c+(!a.key||b&&b.key===a.key?"":(""+a.key).replace(la,"$&/")+"/")+
+d)),g.push(a))}function W(a,b,d,g,c){var e="";null!=d&&(e=(""+d).replace(la,"$&/")+"/");b=ia(b,e,g,c);V(a,ya,b);ja(b)}function m(){var a=ma.current;null===a?q("321"):void 0;return a}var e="function"===typeof Symbol&&Symbol.for,y=e?Symbol.for("react.element"):60103,wa=e?Symbol.for("react.portal"):60106,r=e?Symbol.for("react.fragment"):60107,X=e?Symbol.for("react.strict_mode"):60108,za=e?Symbol.for("react.profiler"):60114,Aa=e?Symbol.for("react.provider"):60109,Ba=e?Symbol.for("react.context"):60110,
+Ca=e?Symbol.for("react.concurrent_mode"):60111,Da=e?Symbol.for("react.forward_ref"):60112,Ea=e?Symbol.for("react.suspense"):60113,Fa=e?Symbol.for("react.memo"):60115,Ga=e?Symbol.for("react.lazy"):60116,ka="function"===typeof Symbol&&Symbol.iterator,na=Object.getOwnPropertySymbols,Ha=Object.prototype.hasOwnProperty,Ia=Object.prototype.propertyIsEnumerable,J=function(){try{if(!Object.assign)return!1;var a=new String("abc");a[5]="de";if("5"===Object.getOwnPropertyNames(a)[0])return!1;var b={};for(a=
+0;10>a;a++)b["_"+String.fromCharCode(a)]=a;if("0123456789"!==Object.getOwnPropertyNames(b).map(function(a){return b[a]}).join(""))return!1;var d={};"abcdefghijklmnopqrst".split("").forEach(function(a){d[a]=a});return"abcdefghijklmnopqrst"!==Object.keys(Object.assign({},d)).join("")?!1:!0}catch(g){return!1}}()?Object.assign:function(a,b){if(null===a||void 0===a)throw new TypeError("Object.assign cannot be called with null or undefined");var d=Object(a);for(var c,e=1;e<arguments.length;e++){var f=Object(arguments[e]);
+for(var k in f)Ha.call(f,k)&&(d[k]=f[k]);if(na){c=na(f);for(var h=0;h<c.length;h++)Ia.call(f,c[h])&&(d[c[h]]=f[c[h]])}}return d},ca={isMounted:function(a){return!1},enqueueForceUpdate:function(a,b,d){},enqueueReplaceState:function(a,b,d,c){},enqueueSetState:function(a,b,d,c){}},ba={};t.prototype.isReactComponent={};t.prototype.setState=function(a,b){"object"!==typeof a&&"function"!==typeof a&&null!=a?q("85"):void 0;this.updater.enqueueSetState(this,a,b,"setState")};t.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,
+a,"forceUpdate")};da.prototype=t.prototype;e=O.prototype=new da;e.constructor=O;J(e,t.prototype);e.isPureReactComponent=!0;var c=null,G=!1,f=3,k=-1,E=-1,x=!1,C=!1,Ja=Date,Ka="function"===typeof setTimeout?setTimeout:void 0,La="function"===typeof clearTimeout?clearTimeout:void 0,oa="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,pa="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,qa,ra,Y=function(a){qa=oa(function(b){La(ra);a(b)});ra=Ka(function(){pa(qa);
+a(l())},100)};if("object"===typeof performance&&"function"===typeof performance.now){var Ma=performance;var l=function(){return Ma.now()}}else l=function(){return Ja.now()};e=null;"undefined"!==typeof window?e=window:"undefined"!==typeof global&&(e=global);if(e&&e._schedMock){e=e._schedMock;var D=e[0];var P=e[1];var H=e[2];l=e[3]}else if("undefined"===typeof window||"function"!==typeof MessageChannel){var v=null,Na=function(a){if(null!==v)try{v(a)}finally{v=null}};D=function(a,b){null!==v?setTimeout(D,
+0,a):(v=a,setTimeout(Na,0,!1))};P=function(){v=null};H=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof oa&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),"function"!==typeof pa&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var w=null,K=!1,z=-1,A=!1,Z=!1,L=0,
+M=33,B=33;H=function(){return L<=l()};e=new MessageChannel;var sa=e.port2;e.port1.onmessage=function(a){K=!1;a=w;var b=z;w=null;z=-1;var d=l(),c=!1;if(0>=L-d)if(-1!==b&&b<=d)c=!0;else{A||(A=!0,Y(aa));w=a;z=b;return}if(null!==a){Z=!0;try{a(c)}finally{Z=!1}}};var aa=function(a){if(null!==w){Y(aa);var b=a-L+B;b<B&&M<B?(8>b&&(b=8),B=b<M?M:b):M=b;L=a+B;K||(K=!0,sa.postMessage(void 0))}else A=!1};D=function(a,b){w=a;z=b;Z||0>b?sa.postMessage(void 0):A||(A=!0,Y(aa))};P=function(){w=null;K=!1;z=-1}}var Oa=
+0,ma={current:null},R={current:null};e={ReactCurrentDispatcher:ma,ReactCurrentOwner:R,assign:J};J(e,{Scheduler:{unstable_cancelCallback:function(a){var b=a.next;if(null!==b){if(b===a)c=null;else{a===c&&(c=b);var d=a.previous;d.next=b;b.previous=d}a.next=a.previous=null}},unstable_shouldYield:function(){return!G&&(null!==c&&c.expirationTime<E||H())},unstable_now:l,unstable_scheduleCallback:function(a,b){var d=-1!==k?k:l();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=d+b.timeout;
+else switch(f){case 1:b=d+-1;break;case 2:b=d+250;break;case 5:b=d+1073741823;break;case 4:b=d+1E4;break;default:b=d+5E3}a={callback:a,priorityLevel:f,expirationTime:b,next:null,previous:null};if(null===c)c=a.next=a.previous=a,u();else{d=null;var g=c;do{if(g.expirationTime>b){d=g;break}g=g.next}while(g!==c);null===d?d=c:d===c&&(c=a,u());b=d.previous;b.next=d.previous=a;a.next=d;a.previous=b}return a},unstable_runWithPriority:function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=
+3}var d=f,c=k;f=a;k=l();try{return b()}finally{f=d,k=c,F()}},unstable_next:function(a){switch(f){case 1:case 2:case 3:var b=3;break;default:b=f}var d=f,c=k;f=b;k=l();try{return a()}finally{f=d,k=c,F()}},unstable_wrapCallback:function(a){var b=f;return function(){var d=f,c=k;f=b;k=l();try{return a.apply(this,arguments)}finally{f=d,k=c,F()}}},unstable_getFirstCallbackNode:function(){return c},unstable_pauseExecution:function(){},unstable_continueExecution:function(){null!==c&&u()},unstable_getCurrentPriorityLevel:function(){return f},
+unstable_IdlePriority:5,unstable_ImmediatePriority:1,unstable_LowPriority:4,unstable_NormalPriority:3,unstable_UserBlockingPriority:2},SchedulerTracing:{__interactionsRef:null,__subscriberRef:null,unstable_clear:function(a){return a()},unstable_getCurrent:function(){return null},unstable_getThreadID:function(){return++Oa},unstable_subscribe:function(a){},unstable_trace:function(a,b,d){return d()},unstable_unsubscribe:function(a){},unstable_wrap:function(a){return a}}});var fa=Object.prototype.hasOwnProperty,
+ha={key:!0,ref:!0,__self:!0,__source:!0},la=/\/+/g,I=[];r={Children:{map:function(a,b,d){if(null==a)return a;var c=[];W(a,c,null,b,d);return c},forEach:function(a,b,d){if(null==a)return a;b=ia(null,null,b,d);V(a,xa,b);ja(b)},count:function(a){return V(a,function(){return null},null)},toArray:function(a){var b=[];W(a,b,null,function(a){return a});return b},only:function(a){S(a)?void 0:q("143");return a}},createRef:function(){return{current:null}},Component:t,PureComponent:O,createContext:function(a,
+b){void 0===b&&(b=null);a={$$typeof:Ba,_calculateChangedBits:b,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.Provider={$$typeof:Aa,_context:a};return a.Consumer=a},forwardRef:function(a){return{$$typeof:Da,render:a}},lazy:function(a){return{$$typeof:Ga,_ctor:a,_status:-1,_result:null}},memo:function(a,b){return{$$typeof:Fa,type:a,compare:void 0===b?null:b}},useCallback:function(a,b){return m().useCallback(a,b)},useContext:function(a,b){return m().useContext(a,b)},
+useEffect:function(a,b){return m().useEffect(a,b)},useImperativeHandle:function(a,b,d){return m().useImperativeHandle(a,b,d)},useDebugValue:function(a,b){},useLayoutEffect:function(a,b){return m().useLayoutEffect(a,b)},useMemo:function(a,b){return m().useMemo(a,b)},useReducer:function(a,b,d){return m().useReducer(a,b,d)},useRef:function(a){return m().useRef(a)},useState:function(a){return m().useState(a)},Fragment:r,StrictMode:X,Suspense:Ea,createElement:ea,cloneElement:function(a,b,d){null===a||
+void 0===a?q("267",a):void 0;var c=void 0,e=J({},a.props),f=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=R.current);void 0!==b.key&&(f=""+b.key);var l=void 0;a.type&&a.type.defaultProps&&(l=a.type.defaultProps);for(c in b)fa.call(b,c)&&!ha.hasOwnProperty(c)&&(e[c]=void 0===b[c]&&void 0!==l?l[c]:b[c])}c=arguments.length-2;if(1===c)e.children=d;else if(1<c){l=Array(c);for(var m=0;m<c;m++)l[m]=arguments[m+2];e.children=l}return{$$typeof:y,type:a.type,key:f,ref:k,props:e,_owner:h}},
+createFactory:function(a){var b=ea.bind(null,a);b.type=a;return b},isValidElement:S,version:"16.8.6",unstable_ConcurrentMode:Ca,unstable_Profiler:za,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:e};r=(X={default:r},r)||X;return r.default||r});

extras/benchmarks/shared/main.css

@@ -0,0 +1,42 @@
+.main {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+
+  display: grid;
+  grid-template-columns: 220px 1fr;
+}
+
+.left-thing {
+  background-color: gray;
+  padding: 20px;
+  color: white;
+}
+
+.left-thing button {
+  width: 100%;
+}
+
+.right-thing {
+  padding: 20px;
+  overflow: auto;
+}
+
+/* Message widget */
+.message .author {
+  font-weight: bold;
+}
+
+.message {
+  width: 400px;
+  background-color: lightblue;
+  margin: 10px 5px;
+  border-radius: 5px;
+  padding: 5px;
+}
+
+.remove {
+  float: right;
+}

extras/benchmarks/shared/utils.js

@@ -0,0 +1,49 @@
+//------------------------------------------------------------------------------
+// Generating demo data
+//------------------------------------------------------------------------------
+const AUTHORS = ["Aaron", "David", "Vincent"];
+const CONTENT = [
+  "Lorem ipsum dolor sit amet",
+  "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
+  "Excepteur sint occaecat cupidatat non proident"
+];
+
+function chooseRandomly(array) {
+  const index = Math.floor(Math.random() * array.length);
+  return array[index];
+}
+
+let nextId = 1;
+export function buildData(n = 1000) {
+  const data = [];
+  for (let i = 0; i < n; i++) {
+      let id = nextId++;
+    data.push({
+      id: id,
+      author: chooseRandomly(AUTHORS),
+      msg: `${id}: ${chooseRandomly(CONTENT)}`,
+      likes: 0
+    });
+  }
+  return data;
+}
+
+//------------------------------------------------------------------------------
+// Measuring helpers
+//------------------------------------------------------------------------------
+let startTime;
+let lastMeasure;
+export function startMeasure(descr) {
+  startTime = performance.now();
+  lastMeasure = descr;
+}
+export function stopMeasure() {
+  let last = lastMeasure;
+  if (lastMeasure) {
+    window.setTimeout(function() {
+      lastMeasure = null;
+      const stop = performance.now();
+      console.log(`[${last}] took  ${Number(stop - startTime).toFixed()}ms`);
+    }, 0);
+  }
+}

extras/benchmarks/vue/app.js

@@ -0,0 +1,106 @@
+import { buildData, startMeasure, stopMeasure } from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Counter Widget
+//------------------------------------------------------------------------------
+Vue.component("likes-counter", {
+  data: function() {
+    return {
+      counter: 0
+    };
+  },
+  methods: {
+    increment() {
+      this.counter++;
+    }
+  },
+  template: `
+    <div>
+      <button @click="increment">Value: {{counter}}</button>
+    </div>`
+});
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+Vue.component("my-message", {
+  props: ["msg"],
+  methods: {
+    removeMessage() {
+      this.$emit("removeMessage", this.msg.id);
+    }
+  },
+  template: `
+    <div class="message">
+        <span class="author">{{msg.author}}</span>
+        <span class="msg">{{msg.msg}}</span>
+        <button class="remove" @click="removeMessage">Remove</button>
+        <likes-counter></likes-counter>
+    </div>`
+});
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+const App = {
+  name: "App",
+  data() {
+    return { messages: [] };
+  },
+  methods: {
+    addMessages(n) {
+      startMeasure("add " + n);
+      const newMessages = buildData(n);
+      this.messages.push.apply(this.messages, newMessages);
+      stopMeasure();
+    },
+
+    clear() {
+      startMeasure("clear");
+      this.messages = [];
+      stopMeasure();
+    },
+
+    updateSomeMessages() {
+      startMeasure("update every 10th");
+      const messages = this.messages;
+      for (let i = 0; i < this.messages.length; i += 10) {
+        messages[i].author += "!!!";
+      }
+      stopMeasure();
+    },
+
+    removeMessage(id) {
+      startMeasure("remove message");
+      const index = this.messages.findIndex(m => m.id === id);
+      this.messages.splice(index, 1);
+      stopMeasure();
+    }
+  },
+  template: `
+    <div class="main">
+        <div class="left-thing">
+            <div>Number of msg: {{messages.length}}</div>
+            <button @click="addMessages(100)">Add 100 messages</button>
+            <button @click="addMessages(1000)">Add 1000 messages</button>
+            <button @click="addMessages(10000)">Add 10000 messages</button>
+            <button @click="addMessages(50000)">Add 50000 messages</button>
+            <button @click="updateSomeMessages">Update every 10th message</button>
+            <button @click="clear">Clear</button>
+        </div>
+        <div class="right-thing">
+            <div class="content">
+                <my-message v-for="msg in messages" v-bind:key="msg.id" v-bind:msg="msg" @removeMessage="removeMessage"></my-message>
+            </div>
+        </div>
+    </div>
+  `
+};
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+
+new Vue({
+  render: h => h(App)
+}).$mount(`#main`);

extras/benchmarks/vue/index.html

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

extras/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL Extras</title>
+</head>
+<body>
+  <h1>🦉 OWL Extra Stuff 🦉</h1>
+
+
+  <h2>Benchmarks</h2>
+  <p>The goal is to compare some operations on large lists</p>
+
+  <ul>
+    <li><a href="benchmarks/odoo-widgets-12.0">Odoo Widgets (12.0)</a></li>
+    <li><a href="benchmarks/odoo-widgets-12.3">Odoo Widgets (12.3)</a></li>
+    <li><a href="benchmarks/owl-0.7.0">OWL 0.7.0</a></li>
+    <li><a href="benchmarks/owl-0.8.0">OWL 0.8.0</a></li>
+    <li><a href="benchmarks/owl-master">OWL Master</a></li>
+    <li><a href="benchmarks/vue">Vue</a></li>
+    <li><a href="benchmarks/react">React</a></li>
+  </ul>
+
+  <h2>Playground</h2>
+  <a href="playground">Playground</a>
+</body>
+</html>

extras/playground/app.js

@@ -0,0 +1,325 @@
+import { SAMPLES } from "./samples.js";
+
+let owlJS;
+
+async function owlSourceCode() {
+  if (owlJS) {
+    return owlJS;
+  }
+  const result = await fetch("../owl.js");
+  owlJS = await result.text();
+  return owlJS;
+}
+
+const MODES = {
+  js: "ace/mode/javascript",
+  css: "ace/mode/css",
+  xml: "ace/mode/xml"
+};
+
+const DEFAULT_XML = `<templates>
+</templates>`;
+
+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 src="app.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
+`;
+
+const APP_PY = `import sys
+import thread
+import webbrowser
+import time
+
+import BaseHTTPServer, SimpleHTTPServer
+
+def start_server():
+    httpd = BaseHTTPServer.HTTPServer(('127.0.0.1', 3600), SimpleHTTPServer.SimpleHTTPRequestHandler)
+    httpd.serve_forever()
+
+thread.start_new_thread(start_server,())
+url = 'http://127.0.0.1:3600'
+webbrowser.open_new(url)
+
+while True:
+    try:
+        time.sleep(1)
+    except KeyboardInterrupt:
+        sys.exit(0)
+`;
+
+//------------------------------------------------------------------------------
+// Tabbed editor
+//------------------------------------------------------------------------------
+class TabbedEditor extends owl.Component {
+  constructor() {
+    super(...arguments);
+    this.template = "tabbed-editor";
+    this.state = {
+      currentTab: this.props.display.split("|")[0]
+    };
+    this.tabs = {
+      js: this.props.display.includes("js"),
+      xml: this.props.display.includes("xml"),
+      css: this.props.display.includes("css")
+    };
+  }
+
+  mounted() {
+    this.editor = ace.edit(this.refs.editor);
+
+    // remove this for xml/css (?)
+    this.editor.session.setOption("useWorker", false);
+    this.editor.setValue(this.props[this.state.currentTab], -1);
+    this.editor.setFontSize("13px");
+    this.editor.setTheme("ace/theme/monokai");
+    this.editor.session.setMode(MODES[this.state.currentTab]);
+    const tabSize = this.state.currentTab === "xml" ? 2 : 4;
+    this.editor.session.setOption("tabSize", tabSize);
+    this.editor.on("blur", () => {
+      const editorValue = this.editor.getValue();
+      const propsValue = this.props[this.state.currentTab];
+      if (editorValue !== propsValue) {
+        this.trigger("updateCode", {
+          type: this.state.currentTab,
+          value: editorValue
+        });
+      }
+    });
+  }
+
+  patched() {
+    if (this.editor) {
+      window.dispatchEvent(new Event("resize"));
+      this.editor.setValue(this.props[this.state.currentTab], -1);
+    }
+  }
+
+  willUnmount() {
+    this.editor.destroy();
+    delete this.editor;
+  }
+
+  setTab(tab) {
+    this.editor.setValue(this.props[tab], -1);
+
+    const mode = MODES[tab];
+    this.editor.session.setMode(mode);
+    const tabSize = tab === "xml" ? 2 : 4;
+    this.editor.session.setOption("tabSize", tabSize);
+    this.state.currentTab = tab;
+  }
+
+  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);
+      });
+    }
+  }
+}
+
+//------------------------------------------------------------------------------
+// MAIN APP
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  constructor(...args) {
+    super(...args);
+    this.template = "playground";
+    this.version = owl._version;
+    this.SAMPLES = SAMPLES;
+    this.widgets = { TabbedEditor };
+
+    this.state = {
+      js: SAMPLES[0].code,
+      css: SAMPLES[0].css || "",
+      xml: SAMPLES[0].xml || DEFAULT_XML,
+      error: false,
+      displayWelcome: true,
+      splitLayout: true,
+      leftPaneWidth: Math.ceil(window.innerWidth / 2),
+      topPanelHeight: null
+    };
+  }
+
+  displayError(error) {
+    this.state.error = error;
+    if (error) {
+      setTimeout(() => {
+        this.refs.content.innerHTML = "";
+      });
+      return;
+    }
+  }
+
+  async runCode() {
+    this.state.displayWelcome = false;
+    // check templates
+    var qweb = new owl.QWeb();
+    var error = false;
+    const sanitizedXML = this.state.xml.replace(/<!--[\s\S]*?-->/g, "");
+    try {
+      qweb.loadTemplates(sanitizedXML);
+    } catch (e) {
+      error = e;
+    }
+
+    if (error) {
+      this.displayError(error.message);
+      return;
+    } else {
+      this.state.error = false;
+    }
+
+    // create iframe
+    const iframe = document.createElement("iframe");
+
+    iframe.onload = () => {
+      const doc = iframe.contentDocument;
+      // 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 = "text/javascript";
+        const content = `window.TEMPLATES = \`${sanitizedXML}\`\n${
+          this.state.js
+        }`;
+        script.innerHTML = content;
+        const errorHandler = e => this.displayError(e.message);
+        iframe.contentWindow.addEventListener("error", errorHandler);
+        setTimeout(function() {
+          if (iframe.contentWindow) {
+            iframe.contentWindow.removeEventListener("error", errorHandler);
+          }
+        }, 100);
+        doc.body.appendChild(script);
+      });
+      doc.head.appendChild(owlScript);
+
+      // inject css
+      const style = document.createElement("style");
+      style.innerHTML = this.state.css;
+      doc.head.appendChild(style);
+    };
+    this.refs.content.innerHTML = "";
+    this.refs.content.appendChild(iframe);
+  }
+
+  setSample(ev) {
+    const sample = 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;
+  }
+
+  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(ev) {
+    this.state[ev.type] = ev.value;
+  }
+  toggleLayout() {
+    this.state.splitLayout = !this.state.splitLayout;
+  }
+  updatePanelHeight(ev) {
+    if (!ev.delta) {
+      return;
+    }
+    let height = this.state.topPanelHeight;
+    if (!height) {
+      height = document.getElementsByClassName("tabbed-editor")[0].clientHeight;
+    }
+    this.state.topPanelHeight = height + ev.delta;
+  }
+
+  async downloadCode() {
+    await owl.utils.loadJS("libs/FileSaver.min.js");
+    await owl.utils.loadJS("libs/jszip.min.js");
+
+    const zip = new JSZip();
+
+    const JS = `async function startApp() {
+  // Loading templates
+  let TEMPLATES;
+  try {
+    TEMPLATES = await owl.utils.loadTemplates('app.xml');
+  } catch(e) {
+    document.write(\`This app requires a static server.  If you have python installed, try 'python app.py'\`);
+    return;
+  }
+
+  // Application code
+${this.state.js.split('\n').map(l => l === '' ? '' : '  ' + l).join('\n')}
+}
+
+// wait for DOM ready before starting
+owl.utils.whenReady(startApp);`;
+
+    zip.file("app.js", JS);
+    zip.file("app.css", this.state.css);
+    zip.file("app.py", APP_PY);
+    zip.file("app.xml", this.state.xml);
+    zip.file("index.html", DEFAULT_HTML);
+    zip.file("owl.js", owlSourceCode());
+    zip.generateAsync({ type: "blob" }).then(function(content) {
+      saveAs(content, "app.zip");
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+document.title = `${document.title} (v${owl._version})`;
+document.addEventListener("DOMContentLoaded", async function() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const qweb = new owl.QWeb(templates);
+  const env = { qweb };
+  const app = new App(env);
+  app.mount(document.body);
+});

extras/playground/index.html

@@ -12,8 +12,6 @@
 
     <!-- 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>

extras/playground/playground.css

@@ -2,7 +2,9 @@
 html,
 body {
   height: 100%;
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 body {
@@ -20,7 +22,7 @@ body {
   display: grid;
   height: 100%;
   width: 100%;
-  grid-template-columns: auto 8px 100%;
+  grid-template-columns: auto 6px 100%;
 }
 
 /* LEFT BAR ****************************************/
@@ -79,19 +81,6 @@ 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 {
@@ -126,7 +115,6 @@ body {
   width: 34px;
   text-align: center;
   border-bottom: 2px solid transparent;
-  text-transform: uppercase;
 }
 
 .tab.active {
@@ -186,9 +174,14 @@ body {
 }
 
 .right-pane .note {
-  font-size: 18px;
-  text-align: left;
+  font-size: 20px;
   margin-top: 20px;
-  padding: 5%;
 }
 
+.right-pane .error {
+  height: 100%;
+  padding-top: 40%;
+  font-size: 30px;
+  color: darkred;
+  text-align: center;
+}

extras/playground/templates.xml

@@ -0,0 +1,46 @@
+<templates>
+  <div t-name="tabbed-editor" class="tabbed-editor" t-att-style="props.style">
+    <div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
+      <a t-if="tabs.js" class="tab flash" t-att-class="{active: state.currentTab==='js'}" t-on-click="setTab('js')">JS</a>
+      <a t-if="tabs.xml" class="tab flash" t-att-class="{active: state.currentTab==='xml'}" t-on-click="setTab('xml')">XML</a>
+      <a t-if="tabs.css" class="tab flash" t-att-class="{active: state.currentTab==='css'}" t-on-click="setTab('css')">CSS</a>
+    </div>
+    <div class="code-editor" t-ref="'editor'"></div>
+  </div>
+
+  <div t-name="playground" class="playground">
+      <div class="left-bar" t-att-style="leftPaneStyle" t-att-class="{split: state.splitLayout}">
+        <div class="menubar">
+          <a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
+          <select t-on-change="setSample">
+            <option t-foreach="SAMPLES" t-as="sample" t-key="sample_index">
+              <t t-esc="sample.description"/>
+            </option>
+          </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>
+        </div>
+        <t t-if="!state.splitLayout">
+          <t t-widget="TabbedEditor" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'js|xml|css'}" t-on-updateCode="updateCode"/>
+        </t>
+        <t t-else="1">
+          <t t-widget="TabbedEditor" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'js', style:topEditorStyle}" t-on-updateCode="updateCode"/>
+          <div class="separator horizontal"/>
+          <t t-widget="TabbedEditor" t-keepalive="1" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'xml|css', resizeable: true}" t-on-updateCode="updateCode" t-on-updatePanelHeight="updatePanelHeight"/>
+        </t>
+      </div>
+      <div class="separator vertical" t-on-mousedown="onMouseDown"/>
+      <div class="right-pane"  t-att-style="rightPaneStyle">
+        <div class="welcome" t-if="state.displayWelcome">
+          <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">
+          <t t-esc="state.error"/>
+        </div>
+        <div class="content" t-ref="'content'"/>
+      </div>
+  </div>
+</templates>

extras/readme.md

@@ -0,0 +1,6 @@
+# 🦉 Extra Stuff 🦉
+
+To help work/improve/learn with OWL, we have here:
+
+- a benchmarks application
+- a playground application

extras/server.py

@@ -0,0 +1,34 @@
+import sys
+import thread
+import webbrowser
+import time
+
+import BaseHTTPServer
+import SimpleHTTPServer
+
+HOST = '127.0.0.1'
+PORT = 8000
+
+
+class OWLHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
+    def do_GET(self):
+        if self.path == '/extras/owl.js':
+            self.path = '/dist/owl.js'
+        return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
+
+
+def start_server():
+    httpd = BaseHTTPServer.HTTPServer((HOST, PORT), OWLHandler)
+    httpd.serve_forever()
+
+
+if __name__ == "__main__":
+    thread.start_new_thread(start_server, ())
+    url = 'http://{0}:{1}/extras'.format(HOST, PORT)
+    webbrowser.open_new(url)
+
+    while True:
+        try:
+            time.sleep(1)
+        except KeyboardInterrupt:
+            sys.exit(0)

index.html

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

package.json

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

playground/app.js

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

playground/export_snippet.js

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

playground/templates.xml

@@ -1,59 +0,0 @@
-<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" 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>
-    </div>
-    <div class="code-editor" t-ref="editor"></div>
-  </div>
-
-  <div t-name="App" class="playground">
-      <div class="left-bar" t-att-class="{split: state.splitLayout}"
-           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">
-            <option t-foreach="SAMPLES" t-as="sample" t-key="sample_index">
-              <t t-esc="sample.description"/>
-            </option>
-          </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"
-            style="topEditorStyle"
-            updateCode="updateCode"/>
-        <t t-if="state.splitLayout">
-          <div class="separator horizontal"/>
-          <TabbedEditor
-             js="false"
-             css="state.css"
-             xml="state.xml"
-             resizeable="true"
-             onUpdatePanelHeight="updatePanelHeight"
-             updateCode="updateCode"/>
-        </t>
-      </div>
-      <div class="separator vertical" t-on-mousedown="onMouseDown"/>
-      <div class="right-pane"  t-att-style="rightPaneStyle">
-        <div class="welcome" t-if="state.displayWelcome">
-          <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">
-            <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>
-  </div>
-</templates>

playground/utils.js

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

release-notes.md

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

rollup.config.js

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

src/component.ts

@@ -0,0 +1,436 @@
+import { EventBus } from "./event_bus";
+import { Observer } from "./observer";
+import { QWeb, CompiledTemplate } from "./qweb";
+import { h, patch, VNode } from "./vdom";
+
+//------------------------------------------------------------------------------
+// Types/helpers
+//------------------------------------------------------------------------------
+
+export interface Env {
+  qweb: QWeb;
+}
+
+interface Meta<T extends Env, Props> {
+  readonly id: number;
+  vnode: VNode | null;
+  isStarted: boolean;
+  isMounted: boolean;
+  isDestroyed: boolean;
+  parent: Component<T, any, any> | null;
+  children: { [key: number]: Component<T, any, any> };
+  // children mapping: from templateID to widgetID
+  // should it be a map number => Widget?
+  cmap: { [key: number]: number };
+
+  renderId: number;
+  renderProps: Props | null;
+  renderPromise: Promise<VNode> | null;
+  boundHandlers: { [key: number]: any };
+  observer?: Observer;
+  render?: CompiledTemplate;
+}
+
+//------------------------------------------------------------------------------
+// Widget
+//------------------------------------------------------------------------------
+let nextId = 1;
+
+export class Component<
+  T extends Env,
+  Props extends {},
+  State extends {}
+> extends EventBus {
+  readonly __owl__: Meta<Env, Props>;
+  template: string = "default";
+  inlineTemplate: string | null = null;
+
+  get el(): HTMLElement | null {
+    return this.__owl__.vnode ? (<any>this).__owl__.vnode.elm : null;
+  }
+
+  env: T;
+  state?: State;
+  props: Props;
+  refs: {
+    [key: string]: Component<T, any, any> | HTMLElement | undefined;
+  } = {};
+
+  //--------------------------------------------------------------------------
+  // Lifecycle
+  //--------------------------------------------------------------------------
+
+  /**
+   * Creates an instance of Component.
+   *
+   * The root widget of a component tree needs an environment:
+   *
+   * ```javascript
+   *   const root = new RootWidget(env, props);
+   * ```
+   *
+   * Every other widget simply needs a reference to its parent:
+   *
+   * ```javascript
+   *   const child = new SomeWidget(parent, props);
+   * ```
+   *
+   * Note that most of the time, only the root widget needs to be created by
+   * hand.  Other widgets should be created automatically by the framework (with
+   * the t-widget directive in a template)
+   */
+  constructor(parent: Component<T, any, any> | T, props?: Props) {
+    super();
+
+    // is this a good idea?
+    //   Pro: if props is empty, we can create easily a widget
+    //   Con: this is not really safe
+    //   Pro: but creating widget (by a template) is always unsafe anyway
+    this.props = <Props>props || <Props>{};
+    let id: number = nextId++;
+    let p: Component<T, any, any> | null = null;
+    if (parent instanceof Component) {
+      p = parent;
+      this.env = parent.env;
+      parent.__owl__.children[id] = this;
+    } else {
+      this.env = parent;
+    }
+    this.__owl__ = {
+      id: id,
+      vnode: null,
+      isStarted: false,
+      isMounted: false,
+      isDestroyed: false,
+      parent: p,
+      children: {},
+      cmap: {},
+      renderId: 1,
+      renderPromise: null,
+      renderProps: props || null,
+      boundHandlers: {}
+    };
+  }
+
+  /**
+   * willStart is an asynchronous hook that can be implemented to perform some
+   * action before the initial rendering of a component.
+   *
+   * It will be called exactly once before the initial rendering. It is useful
+   * in some cases, for example, to load external assets (such as a JS library)
+   * before the widget is rendered.
+   *
+   * Note that a slow willStart method will slow down the rendering of the user
+   * interface.  Therefore, some effort should be made to make this method as
+   * fast as possible.
+   *
+   * Note: this method should not be called manually.
+   */
+  async willStart() {}
+
+  /**
+   * mounted is a hook that is called each time a component is attached to the
+   * DOM. This is a good place to add some listeners, or to interact with the
+   * DOM, if the component needs to perform some measure for example.
+   *
+   * Note: this method should not be called manually.
+   *
+   * @see willUnmount
+   */
+  mounted() {}
+
+  /**
+   * The willUpdateProps is an asynchronous hook, called just before new props
+   * are set. This is useful if the component needs some asynchronous task
+   * performed, depending on the props (for example, assuming that the props are
+   * some record Id, fetching the record data).
+   *
+   * This hook is not called during the first render (but willStart is called
+   * and performs a similar job).
+   */
+  async willUpdateProps(nextProps: Props) {}
+
+  /**
+   * The willPatch hook is called just before the DOM patching process starts.
+   * It is not called on the initial render.  This is useful to get some
+   * information which are in the DOM.  For example, the current position of the
+   * scrollbar
+   *
+   * The return value of willPatch will be given to the patched function.
+   */
+  willPatch(): any {}
+
+  /**
+   * This hook is called whenever a component did actually update its props,
+   * state or env.
+   *
+   * This method is not called on the initial render. It is useful to interact
+   * with the DOM (for example, through an external library) whenever the
+   * component was updated.
+   *
+   * Updating the widget state in this hook is possible, but not encouraged.
+   * One need to be careful, because updates here will cause rerender, which in
+   * turn will cause other calls to updated. So, we need to be particularly
+   * careful at avoiding endless cycles.
+   *
+   * The snapshot parameter is the result of the call to willPatch.
+   */
+  patched(snapshot: any) {}
+
+  /**
+   * willUnmount is a hook that is called each time just before a component is
+   * unmounted from the DOM. This is a good place to remove some listeners, for
+   * example.
+   *
+   * Note: this method should not be called manually.
+   *
+   * @see mounted
+   */
+  willUnmount() {}
+
+  //--------------------------------------------------------------------------
+  // Public
+  //--------------------------------------------------------------------------
+
+  async mount(target: HTMLElement): Promise<void> {
+    const vnode = await this._prepare();
+    if (this.__owl__.isDestroyed) {
+      // widget was destroyed before we get here...
+      return;
+    }
+    this._patch(vnode);
+    target.appendChild(this.el!);
+
+    if (document.body.contains(target)) {
+      this._callMounted();
+    }
+  }
+
+  _callMounted() {
+    const children = this.__owl__.children;
+    for (let id in children) {
+      const comp = children[id];
+      if (!comp.__owl__.isMounted && this.el!.contains(comp.el)) {
+        comp._callMounted();
+      }
+    }
+    this.__owl__.isMounted = true;
+    this.mounted();
+  }
+
+  _callWillUnmount() {
+    this.willUnmount();
+    this.__owl__.isMounted = false;
+    const children = this.__owl__.children;
+    for (let id in children) {
+      const comp = children[id];
+      if (comp.__owl__.isMounted) {
+        comp._callWillUnmount();
+      }
+    }
+  }
+
+  unmount() {
+    if (this.__owl__.isMounted) {
+      this._callWillUnmount();
+      this.el!.remove();
+    }
+  }
+
+  async render(force: boolean = false, patchQueue?: any[]): Promise<void> {
+    if (this.__owl__.isDestroyed) {
+      return;
+    }
+    const shouldCallPatchHooks: boolean = !patchQueue;
+    if (shouldCallPatchHooks) {
+      patchQueue = [];
+    }
+    const renderVDom = this._render(force, patchQueue);
+    const renderId = this.__owl__.renderId;
+    const vnode = await renderVDom;
+    if (renderId === this.__owl__.renderId) {
+      // we only update the vnode and the actual DOM if no other rendering
+      // occurred between now and when the render method was initially called.
+      if (shouldCallPatchHooks) {
+        for (let i = 0; i < patchQueue!.length; i++) {
+          const c = patchQueue![i];
+          c.__owl__.willPatchVal = c.willPatch();
+        }
+      }
+      this._patch(vnode);
+      if (shouldCallPatchHooks) {
+        for (let i = patchQueue!.length - 1; i >= 0; i--) {
+          const c = patchQueue![i];
+          c.patched(c.__owl__.willPatchVal);
+        }
+      }
+    }
+  }
+
+  destroy() {
+    if (!this.__owl__.isDestroyed) {
+      const el = this.el;
+      this._destroy(this.__owl__.parent);
+      if (el) {
+        el.remove();
+      }
+    }
+  }
+
+  _destroy(parent) {
+    const isMounted = this.__owl__.isMounted;
+    if (isMounted) {
+      this.willUnmount();
+      this.__owl__.isMounted = false;
+    }
+    const children = Object.values(this.__owl__.children);
+    for (let child of children) {
+      child._destroy(this);
+    }
+    if (parent) {
+      let id = this.__owl__.id;
+      delete parent.__owl__.children[id];
+      this.__owl__.parent = null;
+    }
+    this.clear();
+    this.__owl__.isDestroyed = true;
+    delete this.__owl__.vnode;
+  }
+
+  shouldUpdate(nextProps: Props): boolean {
+    return true;
+  }
+
+  /**
+   * This method is the correct way to update the environment of a widget. Doing
+   * this will cause a full rerender of the widget and its children, so this is
+   * an operation that should not be done frequently.
+   *
+   * A good usecase for updating the environment would be to update some mostly
+   * static config keys, such as a boolean to determine if we are in mobile
+   * mode or not.
+   */
+  async updateEnv(nextEnv: Partial<T>): Promise<void> {
+    if (this.__owl__.parent && this.__owl__.parent.env === this.env) {
+      this.env = Object.create(this.env);
+    }
+    Object.assign(this.env, nextEnv);
+    if (this.__owl__.isMounted) {
+      await this.render(true);
+    }
+  }
+
+  set(target: any, key: string | number, value: any) {
+    this.__owl__.observer!.set(target, key, value);
+  }
+
+  //--------------------------------------------------------------------------
+  // Private
+  //--------------------------------------------------------------------------
+
+  async _updateProps(
+    nextProps: Props,
+    forceUpdate: boolean = false,
+    patchQueue: any[]
+  ): Promise<void> {
+    const shouldUpdate = forceUpdate || this.shouldUpdate(nextProps);
+    if (shouldUpdate) {
+      await this.willUpdateProps(nextProps);
+      this.props = nextProps;
+      await this.render(false, patchQueue);
+    }
+  }
+
+  _patch(vnode) {
+    this.__owl__.renderPromise = null;
+    if (this.__owl__.vnode) {
+      this.__owl__.vnode = patch(this.__owl__.vnode, vnode);
+    } else {
+      this.__owl__.vnode = patch(document.createElement(vnode.sel!), vnode);
+    }
+  }
+  _prepare(): Promise<VNode> {
+    this.__owl__.renderProps = this.props;
+    this.__owl__.renderPromise = this._prepareAndRender();
+    return this.__owl__.renderPromise;
+  }
+
+  async _prepareAndRender(): Promise<VNode> {
+    await this.willStart();
+    if (this.__owl__.isDestroyed) {
+      return Promise.resolve(h("div"));
+    }
+    this.__owl__.isStarted = true;
+    if (this.inlineTemplate) {
+      this.env.qweb.addTemplate(this.inlineTemplate, this.inlineTemplate, true);
+    }
+    this.__owl__.render = this.env.qweb.render.bind(
+      this.env.qweb,
+      this.inlineTemplate || this.template
+    );
+    this._observeState();
+    return this._render();
+  }
+  async _render(
+    force: boolean = false,
+    patchQueue: any[] = []
+  ): Promise<VNode> {
+    if (this.__owl__.isMounted) {
+      patchQueue.push(this);
+    }
+    this.__owl__.renderId++;
+    const promises: Promise<void>[] = [];
+    if (this.__owl__.observer) {
+      this.__owl__.observer.allowMutations = false;
+    }
+    let vnode = this.__owl__.render!(this, {
+      promises,
+      handlers: this.__owl__.boundHandlers,
+      forceUpdate: force,
+      patchQueue
+    });
+    if (this.__owl__.observer) {
+      this.__owl__.observer.allowMutations = true;
+    }
+
+    // this part is critical for the patching process to be done correctly. The
+    // tricky part is that a child widget can be rerendered on its own, which
+    // will update its own vnode representation without the knowledge of the
+    // parent widget.  With this, we make sure that the parent widget will be
+    // able to patch itself properly after
+    vnode.key = this.__owl__.id;
+    this.__owl__.renderProps = this.props;
+    this.__owl__.renderPromise = Promise.all(promises).then(() => vnode);
+    return this.__owl__.renderPromise;
+  }
+
+  /**
+   * Only called by qweb t-widget directive
+   */
+  _mount(vnode: VNode, elm: HTMLElement): VNode {
+    this.__owl__.vnode = patch(elm, vnode);
+    if (
+      this.__owl__.parent &&
+      this.__owl__.parent.__owl__.isMounted &&
+      !this.__owl__.isMounted
+    ) {
+      this._callMounted();
+    }
+    return this.__owl__.vnode;
+  }
+
+  __mount() {
+    if (!this.__owl__.isMounted) {
+      this.__owl__.isMounted = true;
+      this.mounted();
+    }
+  }
+
+  _observeState() {
+    if (this.state) {
+      this.__owl__.observer = new Observer();
+      this.__owl__.observer.observe(this.state);
+      this.__owl__.observer.notifyCB = this.render.bind(this);
+    }
+  }
+}

src/event_bus.ts

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

src/index.ts

@@ -0,0 +1,8 @@
+export { Component } from "./component";
+export { EventBus } from "./event_bus";
+export { Observer } from "./observer";
+export { QWeb } from "./qweb";
+export { connect, Store } from "./store";
+import * as _utils from "./utils";
+
+export const utils = _utils;

src/observer.ts

@@ -0,0 +1,142 @@
+//------------------------------------------------------------------------------
+// Observer
+//------------------------------------------------------------------------------
+
+const methodsToPatch = [
+  "push",
+  "pop",
+  "shift",
+  "unshift",
+  "splice",
+  "sort",
+  "reverse"
+];
+
+const ArrayProto = Array.prototype;
+const ModifiedArrayProto = Object.create(ArrayProto);
+
+for (let method of methodsToPatch) {
+  const initialMethod = ArrayProto[method];
+  ModifiedArrayProto[method] = function(...args) {
+    if (!this.__observer__.allowMutations) {
+      throw new Error(`Array cannot be changed here")`);
+    }
+    this.__observer__.notifyChange();
+    this.__owl__.rev++;
+    let parent = this;
+    do {
+      parent.__owl__.deepRev++;
+    } while ((parent = parent.__owl__.parent));
+    let inserted;
+    switch (method) {
+      case "push":
+      case "unshift":
+        inserted = args;
+        break;
+      case "splice":
+        inserted = args.slice(2);
+        break;
+    }
+    if (inserted) {
+      for (let elem of inserted) {
+        this.__observer__.observe(elem, this);
+      }
+    }
+    return initialMethod.call(this, ...args);
+  };
+}
+
+export class Observer {
+  rev: number = 1;
+  allowMutations: boolean = true;
+  dirty: boolean = false;
+
+  notifyCB() {}
+  notifyChange() {
+    this.rev++;
+    this.dirty = true;
+    Promise.resolve().then(() => {
+      if (this.dirty) {
+        this.dirty = false;
+        this.notifyCB();
+      }
+    });
+  }
+
+  observe(value: any, parent?: any) {
+    if (value === null) {
+      // fun fact: typeof null === 'object'
+      return;
+    }
+    if (typeof value !== "object") {
+      return;
+    }
+    if ("__owl__" in value) {
+      // already observed
+      value.__owl__.parent = parent;
+      return;
+    }
+    if (Array.isArray(value)) {
+      this._observeArr(value, parent);
+    } else {
+      this._observeObj(value, parent);
+    }
+  }
+
+  set(target: any, key: number | string, value: any) {
+    this._addProp(target, key, value);
+    target.__owl__.rev++;
+    this.notifyChange();
+  }
+
+  _observeObj<T extends { __owl__?: any }>(obj: T, parent?: any) {
+    const keys = Object.keys(obj);
+    obj.__owl__ = { rev: 1, deepRev: 1, parent };
+    Object.defineProperty(obj, "__owl__", { enumerable: false });
+    for (let key of keys) {
+      this._addProp(obj, key, obj[key]);
+    }
+  }
+
+  _observeArr(arr: Array<any>, parent?: any) {
+    (<any>arr).__owl__ = { rev: 1, deepRev: 1, parent };
+    Object.defineProperty(arr, "__owl__", { enumerable: false });
+    (<any>arr).__proto__ = Object.create(ModifiedArrayProto);
+    (<any>arr).__proto__.__observer__ = this;
+    for (let i = 0; i < arr.length; i++) {
+      this.observe(arr[i], arr);
+    }
+  }
+
+  _addProp<T extends { __owl__?: any }>(
+    obj: T,
+    key: string | number,
+    value: any
+  ) {
+    var self = this;
+    Object.defineProperty(obj, key, {
+      enumerable: true,
+      get() {
+        return value;
+      },
+      set(newVal) {
+        if (newVal !== value) {
+          if (!self.allowMutations) {
+            throw new Error(
+              `Observed state cannot be changed here! (key: "${key}", val: "${newVal}")`
+            );
+          }
+          value = newVal;
+          self.observe(newVal, obj);
+          obj.__owl__.rev!++;
+          let parent = obj;
+          do {
+            parent.__owl__.deepRev++;
+          } while ((parent = parent.__owl__.parent) && parent !== obj);
+          self.notifyChange();
+        }
+      }
+    });
+    this.observe(value, obj);
+  }
+}

src/store.ts

@@ -0,0 +1,218 @@
+import { Component } from "./component";
+import { EventBus } from "./event_bus";
+import { Observer } from "./observer";
+
+//------------------------------------------------------------------------------
+// Store Definition
+//------------------------------------------------------------------------------
+
+interface StoreConfig {
+  env?: any;
+  state?: any;
+  actions?: any;
+  mutations?: { [name: string]: any };
+}
+
+interface StoreOption {
+  debug?: boolean;
+}
+
+export class Store extends EventBus {
+  state: any;
+  actions: any;
+  mutations: any;
+  _commitLevel: number = 0;
+  history: any[] = [];
+  debug: boolean;
+  env: any;
+  observer: Observer;
+  set: any;
+
+  constructor(config: StoreConfig, options: StoreOption = {}) {
+    super();
+    this.debug = options.debug || false;
+    this.state = config.state || {};
+    this.actions = config.actions;
+    this.mutations = config.mutations;
+    this.env = config.env;
+    this.observer = new Observer();
+    this.observer.notifyCB = this.trigger.bind(this, "update");
+    this.observer.allowMutations = false;
+    this.observer.observe(this.state);
+
+    if (this.debug) {
+      this.history.push({ state: this.state });
+    }
+    this.set = this.observer.set.bind(this.observer);
+  }
+
+  dispatch(action, payload?: any): Promise<void> | void {
+    if (!this.actions[action]) {
+      throw new Error(`[Error] action ${action} is undefined`);
+    }
+    const result = this.actions[action](
+      {
+        commit: this.commit.bind(this),
+        dispatch: this.dispatch.bind(this),
+        env: this.env,
+        state: this.state
+      },
+      payload
+    );
+    if (result instanceof Promise) {
+      return new Promise((resolve, reject) => {
+        result.then(() => resolve());
+        result.catch(reject);
+      });
+    }
+  }
+
+  commit(type, payload?: any) {
+    if (!this.mutations[type]) {
+      throw new Error(`[Error] mutation ${type} is undefined`);
+    }
+    this._commitLevel++;
+    this.observer.allowMutations = true;
+
+    const res = this.mutations[type].call(
+      null,
+      {
+        commit: this.commit.bind(this),
+        state: this.state,
+        set: this.set
+      },
+      payload
+    );
+
+    if (this._commitLevel === 1) {
+      this.observer.allowMutations = false;
+      if (this.debug) {
+        this.history.push({
+          state: this.state,
+          mutation: type,
+          payload: payload
+        });
+      }
+    }
+    this._commitLevel--;
+    return res;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Connect function
+//------------------------------------------------------------------------------
+
+function revNumber<T extends Object>(o: T): number {
+  if (o !== null && typeof o === "object" && (<any>o).__owl__) {
+    return (<any>o).__owl__.rev;
+  }
+  return 0;
+}
+
+function deepRevNumber<T extends Object>(o: T): number {
+  if (o !== null && typeof o === "object" && (<any>o).__owl__) {
+    return (<any>o).__owl__.deepRev;
+  }
+  return 0;
+}
+
+export function connect(mapStateToProps, options: any = {}) {
+  let hashFunction = options.hashFunction || null;
+
+  if (!hashFunction) {
+    let deep = "deep" in options ? options.deep : true;
+    let defaultRevFunction = deep ? deepRevNumber : revNumber;
+    hashFunction = function({ storeProps }, options) {
+      const { currentStoreProps } = options;
+      if ("__owl__" in storeProps) {
+        return defaultRevFunction(storeProps);
+      }
+      let hash = 0;
+      for (let key in storeProps) {
+        const val = storeProps[key];
+        const hashVal = defaultRevFunction(val);
+        if (hashVal === 0) {
+          if (val !== currentStoreProps[key]) {
+            options.didChange = true;
+          }
+        } else {
+          hash += hashVal;
+        }
+      }
+      return hash;
+    };
+  }
+
+  return function(Comp) {
+    return class extends Comp {
+      constructor(parent, props?: any) {
+        const env = parent instanceof Component ? parent.env : parent;
+        const ownProps = Object.assign({}, props || {});
+        const storeProps = mapStateToProps(env.store.state, ownProps);
+        const mergedProps = Object.assign({}, props || {}, storeProps);
+        super(parent, mergedProps);
+        this.__owl__.ownProps = ownProps;
+        this.__owl__.currentStoreProps = storeProps;
+        this.__owl__.storeHash = hashFunction(
+          {
+            state: env.store.state,
+            storeProps: storeProps,
+            revNumber,
+            deepRevNumber
+          },
+          {
+            currentStoreProps: storeProps
+          }
+        );
+      }
+      mounted() {
+        this.env.store.on("update", this, () => {
+          const ownProps = this.__owl__.ownProps;
+          const storeProps = mapStateToProps(this.env.store.state, ownProps);
+          const options: any = {
+            currentStoreProps: this.__owl__.currentStoreProps
+          };
+          const storeHash = hashFunction(
+            {
+              state: this.env.store.state,
+              storeProps: storeProps,
+              revNumber,
+              deepRevNumber
+            },
+            options
+          );
+          let didChange = options.didChange;
+          if (storeHash !== this.__owl__.storeHash) {
+            didChange = true;
+            this.__owl__.storeHash = storeHash;
+          }
+          if (didChange) {
+            this.__owl__.currentStoreProps = storeProps;
+            this._updateProps(ownProps, false);
+          }
+        });
+        super.mounted();
+      }
+      willUnmount() {
+        this.env.store.off("update", this);
+        super.willUnmount();
+      }
+      _updateProps(nextProps, forceUpdate) {
+        if (this.__owl__.ownProps !== nextProps) {
+          this.__owl__.currentStoreProps = mapStateToProps(
+            this.env.store.state,
+            nextProps
+          );
+        }
+        this.__owl__.ownProps = nextProps;
+        const mergedProps = Object.assign(
+          {},
+          nextProps,
+          this.__owl__.currentStoreProps
+        );
+        return super._updateProps(mergedProps, forceUpdate);
+      }
+    };
+  };
+}

src/utils.ts

@@ -0,0 +1,158 @@
+export function escape(str: string | number | undefined): string {
+  if (str === undefined) {
+    return "";
+  }
+  if (typeof str === "number") {
+    return String(str);
+  }
+  return str
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&#x27;")
+    .replace(/`/g, "&#x60;");
+}
+
+export type HashFn = (args: any[]) => string;
+
+export function memoize<R, T extends (...args: any[]) => R>(
+  f: T,
+  hash?: HashFn
+): T {
+  if (!hash) {
+    hash = args => args.map(a => String(a)).join(",");
+  }
+  let cache: { [key: string]: R } = {};
+  function memoizedFunction(...args: any[]) {
+    let hashValue = hash!(args);
+    if (!(hashValue in cache)) {
+      cache[hashValue] = f(...args);
+    }
+    return cache[hashValue];
+  }
+  return memoizedFunction as T;
+}
+
+/**
+ * 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 patch(C: any, patchName: string, patch: any) {
+  const proto = C.prototype;
+  if (!proto.__patches) {
+    proto.__patches = {
+      origMethods: {},
+      patches: {},
+      current: []
+    };
+  }
+  if (proto.__patches.patches[patchName]) {
+    throw new Error(`Patch [${patchName}] already exists`);
+  }
+  proto.__patches.patches[patchName] = patch;
+  applyPatch(proto, patch);
+  proto.__patches.current.push(patchName);
+
+  function applyPatch(proto, patch) {
+    Object.keys(patch).forEach(function(methodName) {
+      const method = patch[methodName];
+      if (typeof method === "function") {
+        const original = proto[methodName];
+        if (!(methodName in proto.__patches.origMethods)) {
+          proto.__patches.origMethods[methodName] = original;
+        }
+        proto[methodName] = function(...args) {
+          this._super = original;
+          return method.call(this, ...args);
+        };
+      }
+    });
+  }
+}
+
+export function unpatch(C: any, patchName: string) {
+  const proto = C.prototype;
+  const patchInfo = proto.__patches;
+  delete proto.__patches;
+
+  // reset to original
+  for (let k in patchInfo.origMethods) {
+    proto[k] = patchInfo.origMethods[k];
+  }
+
+  // apply other patches
+  for (let name of patchInfo.current) {
+    if (name !== patchName) {
+      patch(C, name, patchInfo.patches[name]);
+    }
+  }
+}
+
+export async function loadTemplates(url: string): Promise<string> {
+  const result = await fetch(url);
+  if (!result.ok) {
+    throw new Error("Error while fetching xml templates");
+  }
+  let templates = await result.text();
+  templates = templates.replace(/<!--[\s\S]*?-->/g, "");
+  return templates;
+}
+
+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 function whenReady(fn) {
+  if (document.readyState === "complete") {
+    fn();
+  } else {
+    document.addEventListener("DOMContentLoaded", fn, false);
+  }
+}

src/vdom.ts

@@ -0,0 +1,919 @@
+
+// because those in TypeScript are too restrictive: https://github.com/Microsoft/TSJS-lib-generator/pull/237
+declare global {
+  interface Element {
+    setAttribute(name: string, value: string | number | boolean): void;
+    setAttributeNS(namespaceURI: string, qualifiedName: string, value: string | number | boolean): void;
+  }
+}
+
+//------------------------------------------------------------------------------
+// vnode.ts
+//------------------------------------------------------------------------------
+type Key = string | number;
+
+export interface VNode {
+  sel: string | undefined;
+  data: VNodeData | undefined;
+  children: Array<VNode | string> | undefined;
+  elm: Node | undefined;
+  text: string | undefined;
+  key: Key | undefined;
+}
+
+interface VNodeData {
+  props?: Props;
+  attrs?: Attrs;
+  on?: On;
+  hook?: Hooks;
+  key?: Key;
+  ns?: string; // for SVGs
+  [key: string]: any; // for any other 3rd party module
+}
+
+function vnode(
+  sel: string | undefined,
+  data: any | undefined,
+  children: Array<VNode | string> | undefined,
+  text: string | undefined,
+  elm: Element | Text | undefined
+): VNode {
+  let key = data === undefined ? undefined : data.key;
+  return {
+    sel: sel,
+    data: data,
+    children: children,
+    text: text,
+    elm: elm,
+    key: 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,
+      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; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
+      if (array(children)) {
+        for (i = 0; i < children.length; ++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,
+      j: number,
+      data = vnode.data;
+    if (data !== undefined) {
+      if (isDef((i = data.hook)) && isDef((i = i.destroy))) i(vnode);
+      for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode);
+      if (vnode.children !== undefined) {
+        for (j = 0; j < vnode.children.length; ++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,
+        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; i < cbs.remove.length; ++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, 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; i < cbs.update.length; ++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, elm: Node, parent: Node;
+    const insertedVnodeQueue: VNodeQueue = [];
+    for (i = 0; i < cbs.pre.length; ++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; i < insertedVnodeQueue.length; ++i) {
+      (((insertedVnodeQueue[i].data as VNodeData).hook as Hooks).insert as any)(
+        insertedVnodeQueue[i]
+      );
+    }
+    for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
+    return vnode;
+  };
+}
+
+//------------------------------------------------------------------------------
+// is.ts
+//------------------------------------------------------------------------------
+const array = Array.isArray;
+function primitive(s: any): s is string | number {
+  return typeof s === "string" || typeof s === "number";
+}
+
+//------------------------------------------------------------------------------
+// htmldomapi.ts
+//------------------------------------------------------------------------------
+interface DOMAPI {
+  createElement: (tagName: any) => HTMLElement;
+  createElementNS: (namespaceURI: string, qualifiedName: string) => Element;
+  createTextNode: (text: string) => Text;
+  createComment: (text: string) => Comment;
+  insertBefore: (
+    parentNode: Node,
+    newNode: Node,
+    referenceNode: Node | null
+  ) => void;
+  removeChild: (node: Node, child: Node) => void;
+  appendChild: (node: Node, child: Node) => void;
+  parentNode: (node: Node) => Node;
+  nextSibling: (node: Node) => Node;
+  tagName: (elm: Element) => string;
+  setTextContent: (node: Node, text: string | null) => void;
+  getTextContent: (node: Node) => string | null;
+  isElement: (node: Node) => node is Element;
+  isText: (node: Node) => node is Text;
+  isComment: (node: Node) => node is Comment;
+}
+
+function createElement(tagName: any): HTMLElement {
+  return document.createElement(tagName);
+}
+
+function createElementNS(namespaceURI: string, qualifiedName: string): Element {
+  return document.createElementNS(namespaceURI, qualifiedName);
+}
+
+function createTextNode(text: string): Text {
+  return document.createTextNode(text);
+}
+
+function createComment(text: string): Comment {
+  return document.createComment(text);
+}
+
+function insertBefore(
+  parentNode: Node,
+  newNode: Node,
+  referenceNode: Node | null
+): void {
+  parentNode.insertBefore(newNode, referenceNode);
+}
+
+function removeChild(node: Node, child: Node): void {
+  node.removeChild(child);
+}
+
+function appendChild(node: Node, child: Node): void {
+  node.appendChild(child);
+}
+
+function parentNode(node: Node): Node | null {
+  return node.parentNode;
+}
+
+function nextSibling(node: Node): Node | null {
+  return node.nextSibling;
+}
+
+function tagName(elm: Element): string {
+  return elm.tagName;
+}
+
+function setTextContent(node: Node, text: string | null): void {
+  node.textContent = text;
+}
+
+function getTextContent(node: Node): string | null {
+  return node.textContent;
+}
+
+function isElement(node: Node): node is Element {
+  return node.nodeType === 1;
+}
+
+function isText(node: Node): node is Text {
+  return node.nodeType === 3;
+}
+
+function isComment(node: Node): node is Comment {
+  return node.nodeType === 8;
+}
+
+const htmlDomApi = {
+  createElement,
+  createElementNS,
+  createTextNode,
+  createComment,
+  insertBefore,
+  removeChild,
+  appendChild,
+  parentNode,
+  nextSibling,
+  tagName,
+  setTextContent,
+  getTextContent,
+  isElement,
+  isText,
+  isComment
+} as DOMAPI;
+
+//------------------------------------------------------------------------------
+// hooks.ts
+//------------------------------------------------------------------------------
+type PreHook = () => any;
+type InitHook = (vNode: VNode) => any;
+type CreateHook = (emptyVNode: VNode, vNode: VNode) => any;
+type InsertHook = (vNode: VNode) => any;
+type PrePatchHook = (oldVNode: VNode, vNode: VNode) => any;
+type UpdateHook = (oldVNode: VNode, vNode: VNode) => any;
+type PostPatchHook = (oldVNode: VNode, vNode: VNode) => any;
+type DestroyHook = (vNode: VNode) => any;
+type RemoveHook = (vNode: VNode, removeCallback: () => void) => any;
+type PostHook = () => any;
+
+interface Hooks {
+  pre?: PreHook;
+  init?: InitHook;
+  create?: CreateHook;
+  insert?: InsertHook;
+  prepatch?: PrePatchHook;
+  update?: UpdateHook;
+  postpatch?: PostPatchHook;
+  destroy?: DestroyHook;
+  remove?: RemoveHook;
+  post?: PostHook;
+}
+
+//------------------------------------------------------------------------------
+// h.ts
+//------------------------------------------------------------------------------
+type VNodes = Array<VNode>;
+type VNodeChildElement = VNode | string | number | undefined | null;
+type ArrayOrElement<T> = T | T[];
+type VNodeChildren = ArrayOrElement<VNodeChildElement>;
+
+function addNS(
+  data: any,
+  children: VNodes | undefined,
+  sel: string | undefined
+): void {
+  data.ns = "http://www.w3.org/2000/svg";
+  if (sel !== "foreignObject" && children !== undefined) {
+    for (let i = 0; i < children.length; ++i) {
+      let childData = children[i].data;
+      if (childData !== undefined) {
+        addNS(
+          childData,
+          (children[i] as VNode).children as VNodes,
+          children[i].sel
+        );
+      }
+    }
+  }
+}
+
+export function h(sel: string): VNode;
+export function h(sel: string, data: VNodeData): VNode;
+export function h(sel: string, children: VNodeChildren): VNode;
+export function h(sel: string, data: VNodeData, children: VNodeChildren): VNode;
+export function h(sel: any, b?: any, c?: any): VNode {
+  var data: VNodeData = {},
+    children: any,
+    text: any,
+    i: number;
+  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; i < children.length; ++i) {
+      if (primitive(children[i]))
+        children[i] = vnode(
+          undefined,
+          undefined,
+          undefined,
+          children[i],
+          undefined
+        );
+    }
+  }
+  if (
+    sel[0] === "s" &&
+    sel[1] === "v" &&
+    sel[2] === "g" &&
+    (sel.length === 3 || sel[3] === "." || sel[3] === "#")
+  ) {
+    addNS(data, children, sel);
+  }
+  return vnode(sel, data, children, text, undefined);
+}
+
+//------------------------------------------------------------------------------
+// module/props.ts
+//------------------------------------------------------------------------------
+type Props = Record<string, any>;
+
+function updateProps(oldVnode: VNode, vnode: VNode): void {
+  var key: string,
+    cur: any,
+    old: any,
+    elm = vnode.elm,
+    oldProps = (oldVnode.data as VNodeData).props,
+    props = (vnode.data as VNodeData).props;
+
+  if (!oldProps && !props) return;
+  if (oldProps === props) return;
+  oldProps = oldProps || {};
+  props = props || {};
+
+  for (key in oldProps) {
+    if (!props[key]) {
+      delete (elm as any)[key];
+    }
+  }
+  for (key in props) {
+    cur = props[key];
+    old = oldProps[key];
+    if (old !== cur && (key !== "value" || (elm as any)[key] !== cur)) {
+      (elm as any)[key] = cur;
+    }
+  }
+}
+
+export const propsModule = {
+  create: updateProps,
+  update: updateProps
+} as Module;
+
+//------------------------------------------------------------------------------
+// module/module.ts
+//------------------------------------------------------------------------------
+interface Module {
+  pre: PreHook;
+  create: CreateHook;
+  update: UpdateHook;
+  destroy: DestroyHook;
+  remove: RemoveHook;
+  post: PostHook;
+}
+
+//------------------------------------------------------------------------------
+// module/eventlisteners.ts
+//------------------------------------------------------------------------------
+type On = {
+  [N in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[N]) => void
+} & {
+  [event: string]: EventListener;
+};
+
+function invokeHandler(handler: any, vnode?: VNode, event?: Event): void {
+  if (typeof handler === "function") {
+    // call function handler
+    handler.call(vnode, event, vnode);
+  } else if (typeof handler === "object") {
+    // call handler with arguments
+    if (typeof handler[0] === "function") {
+      // special case for single argument for performance
+      if (handler.length === 2) {
+        handler[0].call(vnode, handler[1], event, vnode);
+      } else {
+        var args = handler.slice(1);
+        args.push(event);
+        args.push(vnode);
+        handler[0].apply(vnode, args);
+      }
+    } else {
+      // call multiple handlers
+      for (var i = 0; i < handler.length; i++) {
+        invokeHandler(handler[i], vnode, event);
+      }
+    }
+  }
+}
+
+function handleEvent(event: Event, vnode: VNode) {
+  var name = event.type,
+    on = (vnode.data as VNodeData).on;
+
+  // call event handler(s) if exists
+  if (on && on[name]) {
+    invokeHandler(on[name], vnode, event);
+  }
+}
+
+function createListener() {
+  return function handler(event: Event) {
+    handleEvent(event, (handler as any).vnode);
+  };
+}
+
+function updateEventListeners(oldVnode: VNode, vnode?: VNode): void {
+  var oldOn = (oldVnode.data as VNodeData).on,
+    oldListener = (oldVnode as any).listener,
+    oldElm: Element = oldVnode.elm as Element,
+    on = vnode && (vnode.data as VNodeData).on,
+    elm: Element = (vnode && vnode.elm) as Element,
+    name: string;
+
+  // optimization for reused immutable handlers
+  if (oldOn === on) {
+    return;
+  }
+
+  // remove existing listeners which no longer used
+  if (oldOn && oldListener) {
+    // if element changed or deleted we remove all existing listeners unconditionally
+    if (!on) {
+      for (name in oldOn) {
+        // remove listener if element was changed or existing listeners removed
+        oldElm.removeEventListener(name, oldListener, false);
+      }
+    } else {
+      for (name in oldOn) {
+        // remove listener if existing listener removed
+        if (!on[name]) {
+          oldElm.removeEventListener(name, oldListener, false);
+        }
+      }
+    }
+  }
+
+  // add new listeners which has not already attached
+  if (on) {
+    // reuse existing listener or create new
+    var listener = ((vnode as any).listener =
+      (oldVnode as any).listener || createListener());
+    // update vnode for listener
+    listener.vnode = vnode;
+
+    // if element changed or added we add all needed listeners unconditionally
+    if (!oldOn) {
+      for (name in on) {
+        // add listener if element was changed or new listeners added
+        elm.addEventListener(name, listener, false);
+      }
+    } else {
+      for (name in on) {
+        // add listener if new listener added
+        if (!oldOn[name]) {
+          elm.addEventListener(name, listener, false);
+        }
+      }
+    }
+  }
+}
+
+export const eventListenersModule = {
+  create: updateEventListeners,
+  update: updateEventListeners,
+  destroy: updateEventListeners
+} as Module;
+
+//------------------------------------------------------------------------------
+// attributes.ts
+//------------------------------------------------------------------------------
+type Attrs = Record<string, string | number | boolean>;
+
+const xlinkNS = "http://www.w3.org/1999/xlink";
+const xmlNS = "http://www.w3.org/XML/1998/namespace";
+const colonChar = 58;
+const xChar = 120;
+
+function updateAttrs(oldVnode: VNode, vnode: VNode): void {
+  var key: string,
+    elm: Element = vnode.elm as Element,
+    oldAttrs = (oldVnode.data as VNodeData).attrs,
+    attrs = (vnode.data as VNodeData).attrs;
+
+  if (!oldAttrs && !attrs) return;
+  if (oldAttrs === attrs) return;
+  oldAttrs = oldAttrs || {};
+  attrs = attrs || {};
+
+  // update modified attributes, add new attributes
+  for (key in attrs) {
+    const cur = attrs[key];
+    const old = oldAttrs[key];
+    if (old !== cur) {
+      if (cur === true) {
+        elm.setAttribute(key, "");
+      } else if (cur === false) {
+        elm.removeAttribute(key);
+      } else {
+        if (key.charCodeAt(0) !== xChar) {
+          elm.setAttribute(key, cur);
+        } else if (key.charCodeAt(3) === colonChar) {
+          // Assume xml namespace
+          elm.setAttributeNS(xmlNS, key, cur);
+        } else if (key.charCodeAt(5) === colonChar) {
+          // Assume xlink namespace
+          elm.setAttributeNS(xlinkNS, key, cur);
+        } else {
+          elm.setAttribute(key, cur);
+        }
+      }
+    }
+  }
+  // remove removed attributes
+  // use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
+  // the other option is to remove all attributes with value == undefined
+  for (key in oldAttrs) {
+    if (!(key in attrs)) {
+      elm.removeAttribute(key);
+    }
+  }
+}
+
+export const attrsModule = {
+  create: updateAttrs,
+  update: updateAttrs
+} as Module;
+
+export const patch = init([eventListenersModule, attrsModule, propsModule]);

tests/__snapshots__/component.test.ts.snap

@@ -0,0 +1,155 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`composition sub widgets with some state rendered in a loop 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    context = Object.create(context);
+    var h = this.utils.h;
+    var c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    var _2 = context['state'].numbers;
+    if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
+    if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
+    var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _4 = _2 instanceof Array ? _2 : Object.values(_2);
+    for (let i = 0; i < _3.length; i++) {
+        context.number_first = i === 0;
+        context.number_last = i === _3.length - 1;
+        context.number_parity = i % 2 === 0 ? 'even' : 'odd';
+        context.number_index = i;
+        context.number = _3[i];
+        context.number_value = _4[i];
+        //WIDGET
+        let key8 = context['number'];
+        let _5_index = c1.length;
+        c1.push(null);
+        let def6;
+        let w7 = key8 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[key8]] : false;
+        let props7 = {};
+        let isNew7 = !w7;
+        if (w7 && w7.__owl__.renderPromise) {
+            if (w7.__owl__.isStarted) {
+                def6 = w7._updateProps(props7, extra.forceUpdate, extra.patchQueue);
+            } else {
+                isNew7 = true
+                if (props7 === w7.__owl__.renderProps) {
+                    def6 = w7.__owl__.renderPromise;
+                } else {
+                    w7.destroy();
+                    w7 = false
+                }
+            }
+        }
+        if (!def6) {
+            if (w7) {
+                def6 = w7._updateProps(props7, extra.forceUpdate, extra.patchQueue);
+            } else {
+                w7 = new context.widgets['ChildWidget'](owner, props7);
+                context.__owl__.cmap[key8] = w7.__owl__.id;
+                def6 = w7._prepare();
+            }
+        }
+        if (isNew7) {
+            def6 = def6.then(vnode=>{let pvnode=h(vnode.sel, {key: key8});c1[_5_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w7._mount(vnode, vn.elm);pvnode.elm=nvn.elm;},remove(){w7.destroy()},destroy(){w7.destroy()}}; w7.__owl__.pvnode = pvnode;});
+        } else {
+            def6 = def6.then(()=>{if (w7.__owl__.isDestroyed) {return};let vnode;if (!w7.__owl__.vnode){vnode=w7.__owl__.pvnode} else { vnode=h(w7.__owl__.vnode.sel, {key: key8});vnode.elm=w7.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w7.el,a.elm);a.elm=w7.el;w7.__mount();},remove(){w7.destroy()}, destroy() {w7.destroy()}}}c1[_5_index]=vnode;});
+        }
+        extra.promises.push(def6);
+    }
+    return vn1;
+}"
+`;
+
+exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.utils.h;
+    var c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let key5 = 'somestring';
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = key5 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[key5]] : false;
+    let props4 = {flag: context['state'].flag};
+    let isNew4 = !w4;
+    if (w4 && w4.__owl__.renderPromise) {
+        if (w4.__owl__.isStarted) {
+            def3 = w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        } else {
+            isNew4 = true
+            if (props4 === w4.__owl__.renderProps) {
+                def3 = w4.__owl__.renderPromise;
+            } else {
+                w4.destroy();
+                w4 = false
+            }
+        }
+    }
+    if (!def3) {
+        if (w4) {
+            def3 = w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        } else {
+            w4 = new context.widgets['child'](owner, props4);
+            context.__owl__.cmap[key5] = w4.__owl__.id;
+            def3 = w4._prepare();
+        }
+    }
+    if (isNew4) {
+        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: key5});c1[_2_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w4._mount(vnode, vn.elm);pvnode.elm=nvn.elm;},remove(){w4.destroy()},destroy(){w4.destroy()}}; w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let vnode;if (!w4.__owl__.vnode){vnode=w4.__owl__.pvnode} else { vnode=h(w4.__owl__.vnode.sel, {key: key5});vnode.elm=w4.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w4.el,a.elm);a.elm=w4.el;w4.__mount();},remove(){w4.destroy()}, destroy() {w4.destroy()}}}c1[_2_index]=vnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`random stuff/miscellaneous t-props should not be undefined (snapshotting) 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.utils.h;
+    var c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    let isNew4 = !w4;
+    if (w4 && w4.__owl__.renderPromise) {
+        if (w4.__owl__.isStarted) {
+            def3 = w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        } else {
+            isNew4 = true
+            if (props4 === w4.__owl__.renderProps) {
+                def3 = w4.__owl__.renderPromise;
+            } else {
+                w4.destroy();
+                w4 = false
+            }
+        }
+    }
+    if (!def3) {
+        if (w4) {
+            def3 = w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        } else {
+            w4 = new context.widgets['child'](owner, props4);
+            context.__owl__.cmap[4] = w4.__owl__.id;
+            def3 = w4._prepare();
+        }
+    }
+    if (isNew4) {
+        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4});c1[_2_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w4._mount(vnode, vn.elm);pvnode.elm=nvn.elm;},remove(){w4.destroy()},destroy(){w4.destroy()}}; w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let vnode;if (!w4.__owl__.vnode){vnode=w4.__owl__.pvnode} else { vnode=h(w4.__owl__.vnode.sel, {key: 4});vnode.elm=w4.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w4.el,a.elm);a.elm=w4.el;w4.__mount();},remove(){w4.destroy()}, destroy() {w4.destroy()}}}c1[_2_index]=vnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;

tests/__snapshots__/store.test.ts.snap

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

tests/event_bus.test.ts

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

tests/helpers.ts

@@ -0,0 +1,42 @@
+import { Env } from "../src/component";
+import { QWeb } from "../src/qweb";
+
+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 makeTestWEnv(): Env {
+  return {
+    qweb: new QWeb()
+  };
+}

tests/observer.test.ts

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

tests/store.test.ts

@@ -0,0 +1,673 @@
+import { Component, Env } from "../src/component";
+import { connect, Store } from "../src/store";
+import {
+  makeTestFixture,
+  makeTestWEnv,
+  nextMicroTick,
+  nextTick
+} from "./helpers";
+
+describe("basic use", () => {
+  test("commit a mutation", () => {
+    const state = { n: 1 };
+    const mutations = {
+      inc({ state }, delta) {
+        state.n += delta;
+      }
+    };
+    const store = new Store({ state, mutations });
+
+    expect(store.state.n).toBe(1);
+    store.commit("inc", 14);
+    expect(store.state.n).toBe(15);
+  });
+
+  test("dispatch an action", () => {
+    const state = { n: 1 };
+    const mutations = {
+      inc({ state }, delta) {
+        state.n += delta;
+      }
+    };
+    const actions = {
+      inc({ commit }, delta) {
+        commit("inc", delta);
+      }
+    };
+    const store = new Store({ state, mutations, actions });
+
+    expect(store.state.n).toBe(1);
+    store.dispatch("inc", 14);
+    expect(store.state.n).toBe(15);
+  });
+
+  test("modifying state outside of mutations trigger error", () => {
+    const state = { n: 1 };
+    const actions = {
+      inc({ state }) {
+        state.n++;
+      }
+    };
+    const store = new Store({ state, mutations: {}, actions });
+
+    expect(() => store.dispatch("inc")).toThrow();
+    expect(() => (store.state.n = 15)).toThrow();
+  });
+
+  test("can dispatch an action in an action", () => {
+    const state = { n: 1 };
+    const mutations = {
+      inc({ state }, delta) {
+        state.n += delta;
+      }
+    };
+    const actions = {
+      inc({ commit }, delta) {
+        commit("inc", delta);
+      },
+      inc100({ dispatch }) {
+        dispatch("inc", 100);
+      }
+    };
+    const store = new Store({ state, mutations, actions });
+
+    expect(store.state.n).toBe(1);
+    store.dispatch("inc100");
+    expect(store.state.n).toBe(101);
+  });
+
+  test("can commit a mutation in a mutation", () => {
+    const state = { n: 1 };
+    const mutations = {
+      inc({ state }) {
+        state.n++;
+      },
+      inc10({ commit }) {
+        for (let i = 0; i < 10; i++) {
+          commit("inc");
+        }
+      }
+    };
+    const store = new Store({ state, mutations });
+
+    expect(store.state.n).toBe(1);
+    store.commit("inc10");
+    expect(store.state.n).toBe(11);
+  });
+
+  test("return data from committing a mutation", () => {
+    const state = { n: 1 };
+    const mutations = {
+      inc({ state }) {
+        return ++state.n;
+      }
+    };
+    const store = new Store({ state, mutations });
+
+    expect(store.state.n).toBe(1);
+    const res = store.commit("inc");
+    expect(store.state.n).toBe(2);
+    expect(res).toBe(2);
+  });
+
+  test("dispatch allow synchronizing between actions", async () => {
+    const state = { n: 1 };
+    const mutations = {
+      inc({ state }, delta) {
+        state.n += delta;
+      },
+      setN({ state }, n) {
+        state.n = n;
+      }
+    };
+    const actions = {
+      async dosomething({ commit, dispatch }) {
+        await dispatch("setTo10");
+        commit("inc", 3);
+      },
+      async setTo10({ commit }) {
+        await Promise.resolve();
+        commit("setN", 10);
+      }
+    };
+    const store = new Store({ state, mutations, 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("env is given to actions", () => {
+    expect.assertions(1);
+    const someEnv = {};
+    const actions = {
+      someaction({ env }) {
+        expect(env).toBe(someEnv);
+      }
+    };
+    const store = new Store({ state: {}, actions, env: someEnv });
+
+    store.dispatch("someaction");
+  });
+
+  test("set function is given to mutations", async () => {
+    let updateCounter = 0;
+    const state = { bertinchamps: "brune" };
+    const mutations = {
+      addInfo({ state, set }) {
+        set(state, "chouffe", "blonde");
+      }
+    };
+    const store = new Store({ state, mutations, actions: {} });
+    store.on("update", null, () => updateCounter++);
+
+    expect(updateCounter).toBe(0);
+    store.commit("addInfo");
+    await nextMicroTick();
+    expect(updateCounter).toBe(1);
+    expect(store.state).toEqual({ bertinchamps: "brune", chouffe: "blonde" });
+  });
+});
+
+describe("advanced state properties", () => {
+  test("state in the store is reference equal after mutation", async () => {
+    const state = {};
+    const mutations = {
+      donothing() {}
+    };
+    const store = new Store({ state, mutations });
+    expect(store.state).toBe(state);
+    store.commit("donothing");
+    expect(store.state).toBe(state);
+  });
+
+  test("can use array properties in mutations", () => {
+    expect.assertions(3);
+    const state = { a: [1, 2, 3] };
+    const mutations = {
+      m({ state }) {
+        expect(state.a.length).toBe(3);
+        const l = state.a.push(53);
+        expect(l).toBe(4);
+      }
+    };
+    const store = new Store({ state, mutations });
+    store.commit("m");
+    expect(store.state.a).toEqual([1, 2, 3, 53]);
+  });
+
+  test("can use object assign in store", async () => {
+    const mutations = {
+      dosomething({ state }) {
+        Object.assign(state.westmalle, { a: 3, b: 4 });
+      }
+    };
+    const store = new Store({
+      state: { westmalle: { a: 1, b: 2 } },
+      mutations
+    });
+    store.commit("dosomething");
+    expect(store.state.westmalle).toEqual({ a: 3, b: 4 });
+  });
+
+  test("aku reactive store state 1", async () => {
+    const mutations = {
+      inc({ state }) {
+        state.counter++;
+      }
+    };
+    const state = { counter: 0 };
+    const store = new Store({ state, mutations });
+    expect(store.state.counter).toBe(0);
+    store.commit("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 mutations = {
+      inc({ state }, delta) {
+        state.n += delta;
+      }
+    };
+    const store = new Store({ state, mutations });
+    store.on("update", null, () => updateCounter++);
+
+    store.commit("inc", 14);
+    expect(updateCounter).toBe(0);
+    store.commit("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 mutations = {
+      inc({ state }, delta) {
+        state.n += delta;
+      },
+      noop() {},
+      noop2({ state }) {
+        const val = state.n;
+        state.n = val;
+      }
+    };
+    const store = new Store({ state, mutations });
+    store.on("update", null, () => updateCounter++);
+
+    store.commit("noop");
+    await nextMicroTick();
+    expect(updateCounter).toBe(0);
+
+    store.commit("inc", 50);
+    await nextMicroTick();
+    expect(updateCounter).toBe(1);
+
+    store.commit("noop2");
+    await nextMicroTick();
+    expect(updateCounter).toBe(1);
+  });
+});
+
+describe("connecting a component to store", () => {
+  let fixture: HTMLElement;
+  let env: Env;
+
+  beforeEach(() => {
+    fixture = makeTestFixture();
+    env = makeTestWEnv();
+  });
+
+  afterEach(() => {
+    fixture.remove();
+  });
+
+  class App extends Component<any, any, any> {
+    inlineTemplate = `
+            <div>
+                <t t-foreach="props.todos" t-as="todo" t-key="todo">
+                    <t t-widget="Todo" t-props="todo"/>
+                </t>
+            </div>`;
+    widgets = { Todo };
+  }
+  class Todo extends Component<any, any, any> {
+    inlineTemplate = `<span><t t-esc="props.msg"/></span>`;
+  }
+
+  test("connecting a component works", async () => {
+    const state = { todos: [] };
+    const mutations = {
+      addTodo({ state }, msg) {
+        state.todos.push({ msg });
+      }
+    };
+    function mapStateToProps(s) {
+      return { todos: s.todos };
+    }
+    const TodoApp = connect(mapStateToProps)(App);
+    const store = new Store({ state, mutations });
+    (<any>env).store = store;
+    const app = new TodoApp(env);
+
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toMatchSnapshot();
+
+    store.commit("addTodo", "hello");
+    await nextTick();
+    expect(fixture.innerHTML).toMatchSnapshot();
+  });
+
+  test("deep and shallow connecting a component", async () => {
+    const state = { todos: [{ title: "Kasteel" }] };
+    const mutations = {
+      edit({ state }, title) {
+        state.todos[0].title = title;
+      }
+    };
+    function mapStateToProps(s) {
+      return { todos: s.todos };
+    }
+    const store = new Store({ state, mutations });
+
+    class App extends Component<any, any, any> {
+      inlineTemplate = `
+            <div>
+                <span t-foreach="props.todos" t-as="todo" t-key="todo">
+                  <t t-esc="todo.title"/>
+                </span>
+            </div>`;
+    }
+
+    const DeepTodoApp = connect(
+      mapStateToProps,
+      { deep: true }
+    )(App);
+    const ShallowTodoApp = connect(
+      mapStateToProps,
+      { deep: false }
+    )(App);
+    (<any>env).store = store;
+    const deepTodoApp = new DeepTodoApp(env);
+    const shallowTodoApp = new ShallowTodoApp(env);
+
+    await deepTodoApp.mount(fixture);
+
+    const shallowFix = makeTestFixture();
+    await shallowTodoApp.mount(shallowFix);
+
+    expect(fixture.innerHTML).toMatchSnapshot();
+    expect(shallowFix.innerHTML).toMatchSnapshot();
+
+    store.commit("edit", "Bertinchamps");
+    await nextTick();
+    expect(fixture.innerHTML).toMatchSnapshot();
+    expect(shallowFix.innerHTML).toMatchSnapshot();
+  });
+
+  test("connected child components with custom hooks", async () => {
+    let steps: any = [];
+    class Child extends Component<any, any, any> {
+      inlineTemplate = `<div/>`;
+      mounted() {
+        steps.push("child:mounted");
+      }
+      willUnmount() {
+        steps.push("child:willUnmount");
+      }
+    }
+
+    const ConnectedChild = connect(s => s)(Child);
+
+    class Parent extends Component<any, any, any> {
+      inlineTemplate = `
+          <div>
+              <t t-if="state.child" t-widget="ConnectedChild"/>
+          </div>`;
+      widgets = { ConnectedChild };
+
+      constructor(env: Env) {
+        super(env);
+        this.state = { child: true };
+      }
+    }
+
+    const store = new Store({ state: {} });
+    (<any>env).store = store;
+    const parent = new Parent(env);
+
+    await parent.mount(fixture);
+    expect(steps).toEqual(["child:mounted"]);
+
+    parent.state.child = false;
+    await nextTick();
+    expect(steps).toEqual(["child:mounted", "child:willUnmount"]);
+  });
+
+  test("connect receives ownprops as second argument", async () => {
+    const state = { todos: [{ id: 1, text: "jupiler" }] };
+    let nextId = 2;
+    const mutations = {
+      addTodo({ state }, text) {
+        state.todos.push({ text, id: nextId++ });
+      }
+    };
+    const store = new Store({ state, mutations });
+
+    class TodoItem extends Component<any, any, any> {
+      inlineTemplate = `<span><t t-esc="props.text"/></span>`;
+    }
+    const ConnectedTodo = connect((state, props) => {
+      const todo = state.todos.find(t => t.id === props.id);
+      return todo;
+    })(TodoItem);
+
+    class TodoList extends Component<any, any, any> {
+      inlineTemplate = `<div>
+            <t t-foreach="props.todos" t-as="todo">
+              <t t-widget="ConnectedTodo" t-props="todo"/>
+            </t>
+          </div>`;
+      widgets = { ConnectedTodo };
+    }
+
+    function mapStateToProps(state) {
+      return { todos: state.todos };
+    }
+    const ConnectedTodoList = connect(mapStateToProps)(TodoList);
+
+    (<any>env).store = store;
+    const app = new ConnectedTodoList(env);
+
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>jupiler</span></div>");
+
+    store.commit("addTodo", "hoegaarden");
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><span>jupiler</span><span>hoegaarden</span></div>"
+    );
+  });
+
+  test("connected component is updated when props are updated", async () => {
+    class Beer extends Component<any, any, any> {
+      inlineTemplate = `<span><t t-esc="props.name"/></span>`;
+    }
+    const ConnectedBeer = connect((state, props) => {
+      return state.beers[props.id];
+    })(Beer);
+
+    class App extends Component<any, any, any> {
+      inlineTemplate = `<div>
+              <t t-widget="ConnectedBeer" t-props="{id: state.beerId}"/>
+          </div>`;
+      widgets = { ConnectedBeer };
+      state = { beerId: 1 };
+    }
+
+    const state = { beers: { 1: { name: "jupiler" }, 2: { name: "kwak" } } };
+    const store = new Store({ state });
+    (<any>env).store = store;
+    const app = new App(env);
+
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>jupiler</span></div>");
+
+    app.state.beerId = 2;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>kwak</span></div>");
+  });
+
+  test("connected component is updated when store is changed", async () => {
+    class App extends Component<any, any, any> {
+      inlineTemplate = `
+          <div>
+              <span t-foreach="props.beers" t-as="beer" t-key="beer.name"><t t-esc="beer.name"/></span>
+          </div>`;
+    }
+
+    const mutations = {
+      addBeer({ state }, name) {
+        state.beers.push({ name });
+      }
+    };
+
+    const state = { beers: [{ name: "jupiler" }] };
+    const store = new Store({ state, mutations });
+    (<any>env).store = store;
+
+    function mapStateToProps(state) {
+      return { beers: state.beers, otherKey: 1 };
+    }
+    const ConnectedApp = connect(mapStateToProps)(App);
+    const app = new ConnectedApp(env);
+
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>jupiler</span></div>");
+
+    store.commit("addBeer", "kwak");
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><span>jupiler</span><span>kwak</span></div>"
+    );
+  });
+
+  test("connected component with undefined, null and string props", async () => {
+    class Beer extends Component<any, any, any> {
+      inlineTemplate = `<div>
+          <span>taster:<t t-esc="props.taster"/></span>
+          <span t-if="props.selected">selected:<t t-esc="props.selected.name"/></span>
+          <span t-if="props.consumed">consumed:<t t-esc="props.consumed.name"/></span>
+        </div>`;
+    }
+    const ConnectedBeer = connect((state, props) => {
+      return {
+        selected: state.beers[props.id],
+        consumed: state.beers[state.consumedID] || null,
+        taster: state.taster
+      };
+    })(Beer);
+
+    class App extends Component<any, any, any> {
+      inlineTemplate = `<div>
+              <t t-widget="ConnectedBeer" t-props="{id: state.beerId}"/>
+          </div>`;
+      widgets = { ConnectedBeer };
+      state = { beerId: 0 };
+    }
+
+    const mutations = {
+      consume({ state }, beerId) {
+        state.consumedID = beerId;
+      }
+    };
+    const state = {
+      beers: {
+        1: { name: "jupiler" }
+      },
+      consumedID: null,
+      taster: "aaron"
+    };
+    const store = new Store({ state, mutations });
+    (<any>env).store = store;
+    const app = new App(env);
+
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>taster:aaron</span></div></div>"
+    );
+
+    app.state.beerId = 1;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>taster:aaron</span><span>selected:jupiler</span></div></div>"
+    );
+
+    store.commit("consume", 1);
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>taster:aaron</span><span>selected:jupiler</span><span>consumed:jupiler</span></div></div>"
+    );
+
+    app.state.beerId = 0;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>taster:aaron</span><span>consumed:jupiler</span></div></div>"
+    );
+  });
+
+  test("connected component deeply reactive with undefined, null and string props", async () => {
+    class Beer extends Component<any, any, any> {
+      inlineTemplate = `<div>
+          <span>taster:<t t-esc="props.taster"/></span>
+          <span t-if="props.selected">selected:<t t-esc="props.selected.name"/></span>
+          <span t-if="props.consumed">consumed:<t t-esc="props.consumed.name"/></span>
+        </div>`;
+    }
+    const ConnectedBeer = connect((state, props) => {
+      return {
+        selected: state.beers[props.id],
+        consumed: state.beers[state.consumedID] || null,
+        taster: state.taster
+      };
+    })(Beer);
+
+    class App extends Component<any, any, any> {
+      inlineTemplate = `<div>
+              <t t-widget="ConnectedBeer" t-props="{id: state.beerId}"/>
+          </div>`;
+      widgets = { ConnectedBeer };
+      state = { beerId: 0 };
+    }
+
+    const mutations = {
+      changeTaster({ state }, newTaster) {
+        state.taster = newTaster;
+      },
+      consume({ state }, beerId) {
+        state.consumedID = beerId;
+      },
+      renameBeer({ state }, { beerId, name }) {
+        state.beers[beerId].name = name;
+      }
+    };
+    const state = {
+      beers: {
+        1: { name: "jupiler" }
+      },
+      consumedID: null,
+      taster: "aaron"
+    };
+    const store = new Store({ state, mutations });
+    (<any>env).store = store;
+    const app = new App(env);
+
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>taster:aaron</span></div></div>"
+    );
+
+    app.state.beerId = 1;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>taster:aaron</span><span>selected:jupiler</span></div></div>"
+    );
+
+    store.commit("renameBeer", { beerId: 1, name: "kwak" });
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>taster:aaron</span><span>selected:kwak</span></div></div>"
+    );
+
+    store.commit("consume", 1);
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>taster:aaron</span><span>selected:kwak</span><span>consumed:kwak</span></div></div>"
+    );
+
+    app.state.beerId = 0;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>taster:aaron</span><span>consumed:kwak</span></div></div>"
+    );
+
+    store.commit("renameBeer", { beerId: 1, name: "jupiler" });
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>taster:aaron</span><span>consumed:jupiler</span></div></div>"
+    );
+
+    store.commit("changeTaster", "matthieu");
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>taster:matthieu</span><span>consumed:jupiler</span></div></div>"
+    );
+  });
+});

tests/utils.test.ts

@@ -0,0 +1,109 @@
+import {
+  escape,
+  memoize,
+  debounce,
+  patch,
+  unpatch
+} 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("memoize", () => {
+  test("return correct value", () => {
+    const f = memoize((a, b) => a + b);
+    expect(f(1, 3)).toBe(4);
+  });
+
+  test("does not recompute if not needed", () => {
+    let nCalls = 0;
+    function origFunction(a: number, b: number): number {
+      nCalls++;
+      return a + b;
+    }
+    const memoized = memoize(origFunction);
+
+    expect(memoized(1, 3)).toBe(4);
+    expect(memoized(1, 3)).toBe(4);
+    expect(nCalls).toBe(1);
+  });
+});
+
+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);
+  });
+});
+
+describe("patch/unpatch", () => {
+  test("can monkey patch a class", () => {
+    class Test {
+      n = 1;
+
+      doSomething(): string {
+        return "hey";
+      }
+    }
+
+    patch(Test, "some_custo", {
+      doSomething(): string {
+        this.n = this.n + 1;
+        return this._super();
+      }
+    });
+
+    const t = new Test();
+    expect(t.n).toBe(1);
+    expect(t.doSomething()).toBe("hey");
+    expect(t.n).toBe(2);
+  });
+
+  test("cannot patch a class twice with same patch name", () => {
+    class Test {}
+
+    patch(Test, "some_custo", {});
+    expect(() => {
+      patch(Test, "some_custo", {});
+    }).toThrow();
+  });
+
+  test("can unpatch a class", () => {
+    class Test {
+      doSomething(): number {
+        return 1;
+      }
+    }
+
+    patch(Test, "some_custo", {
+      doSomething(): number {
+        return this._super() + 2;
+      }
+    });
+
+    const t = new Test();
+    expect(t.doSomething()).toBe(3);
+
+    unpatch(Test, "some_custo");
+    expect(t.doSomething()).toBe(1);
+  });
+});

tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "preserveConstEnums": true,
+    "noImplicitThis": true,
+    "removeComments": false,
+    "inlineSourceMap": true,
+    "declaration": true,
+    "target": "es5",
+    "outDir": "dist",
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "strictPropertyInitialization": true,
+    "strictNullChecks": true
+  },
+  "include": ["demo/static/**/*.ts", "src/*.ts", "tests/*.ts"]
+}