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

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

.gitignore

@@ -14,5 +14,4 @@ yarn-debug.log*
 yarn-error.log*
 
 package-lock.json
-.vscode
-node_modules
+.vscode

.jshintrc

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

LICENSE

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

@@ -1,74 +0,0 @@
-<h1 align="center">🦉 Odoo Web Library 🦉</h1>
-
-## 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 two key features are:
-
-- a declarative component system, with QWeb as a template engine, asynchronous rendering, and an underlying virtual dom,
-- and a store (state management solution, loosely inspired by VueX and React/Redux).
-
-If you are interested, you can find a discussion on what makes OWL different
-from React and Vue [here](doc/comparison.md)
-
-## Try it online!
-
-An online playground is available at [https://odoo.github.io/owl/](https://odoo.github.io/owl/) to let you experiment with the OWL framework.
-
-# 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>`;
-
-  constructor(parent, props) {
-    super(parent, props);
-    this.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/) application.
-
-## Installing/Building
-
-If you want to use a simple `<script>` tag, the last release can be downloaded here:
-
-- [owl-0.8.0.js](https://odoo.github.io/owl/releases/owl-0.8.0.js)
-- [owl-0.8.0.min.js](https://odoo.github.io/owl/releases/owl-0.8.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                  |
-
-## 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)
-- [Store](doc/store.md)
-
-## License
-
-OWL is [GPL licensed](./LICENSE).

assets/highlight.tomorrow.css

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

assets/main.css

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

assets/milligram.css

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

assets/normalize.css

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

doc/comparison.md

@@ -1,194 +0,0 @@
-# Comparison with Vue/React
-
-OWL, React and Vue have the same main feature: they allow developers to build
-declarative user interfaces. To do that, all these frameworks uses a virtual dom. However, there are still obviously many differences.
-
-In this page, we try to highlight some of these differences. Obviously, some
-effort was done to be fair. However, if you disagree with some of the points
-discussed, feel free to open an issue/submit a PR to correct this text.
-
-- [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

@@ -1,126 +0,0 @@
-# Component
-
-The component system is 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.
-
-Components are the reusable, composable widgets. They are designed to be low
-level, to be declarative, and with asynchronous rendering.
-
-For example:
-
-```javascript
-export class Counter extends Component {
-  template = "counter";
-  state = { counter: 0 };
-
-  constructor(parent, props) {
-    super(parent, props);
-    this.state.counter = props.initialState || 0;
-  }
-
-  increment(delta) {
-    this.state.counter += delta;
-  }
-}
-```
-
-```xml
-    <div t-name="counter">
-      <button t-on-click="increment(-1)">-</button>
-      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
-      <button t-on-click="increment(1)">+</button>
-    </div>`;
-```
-
-## Lifecycle
-
-A solid and robust component system needs useful hooks/methods to help
-developers write components. Here is a description of the lifecycle of a owl
-component:
-
-- **[constructor](#constructor)**
-- **[willStart](#willStart)**
-- **[mounted](#mounted)**
-- **[willPatch](#willPatch)**
-- **[updated](#updated)**
-- **[willUnmount](#willUnmount)**
-
-Note: no hook method should ever be called manually. They are supposed to be
-called by the owl framework whenever it is required.
-
-### constructor
-
-The constructor is not exactly a hook, it is the constructor of the component.
-
-### 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.
-
-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.
-
-### mounted
-
-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.
-
-It is the opposite of _willUnmount_. If a component has been mounted, it will
-be unmounted at some point.
-
-### willUpdateProps
-
-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).
-
-### 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 get some
-information which are in the DOM. For example, the current position of the
-scrollbar
-
-### patched
-
-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 patched.
-
-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.
-
-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

@@ -1,2 +0,0 @@
-# Observer
-

doc/quick_start.md

@@ -1,61 +0,0 @@
-# Quick Start
-
-To build an application (or a sub-part of an application), we need two things:
-
-- an environment
-- a root widget
-
-Here are a few steps that may be useful 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
-
-## Simple example
-
-In a oversimplified example, here is what it could look like:
-
-```javascript
-const templates = await loadTemplates();
-
-const qweb = new QWeb();
-qweb.loadTemplates(templates);
-
-const env = {
-  qweb: qweb
-};
-
-const root = new RootWidget(env, { initialState: 17 });
-
-const target = document.getElementById("app");
-root.mount(target);
-```
-
-## Managing state
-
-The environment is propagated to each subchildren. So, it is convenient to use
-to give a reference to some global object. This is potentially very useful
-in a redux-like architecture:
-
-```javascript
-...
-
-const store = new Store();
-
-const env = {
-    qweb: qweb,
-    store: store,
-};
-
-const state = store.getState()
-const root = new RootWidget(env, state);
-
-store.on('state_change', nextState => {
-    root.updateProps(nextState);
-});
-
-const target = document.getElementById('app');
-root.mount(target);
-```

doc/qweb.md

@@ -1,35 +0,0 @@
-# QWeb
-
-QWeb is a template specification. The QWeb class in this repository is:
-
-- an implementation of the QWeb specification
-- which outputs a virtual dom instead of a string
-- and extended with a few extra directives
-
-## QWeb Specification
-
-add here a full description of what QWeb is supposed to be, with some examples
-
-## QWeb Implementation
-
-```javascript
-var qweb = new QWeb();
-qweb.addTemplate("sometemplate", '<div>hello <t t-esc="name"/></div>');
-
-// result is a vnode which represent <div>hello world</div>
-result = qweb.render("sometemplate", { name: "world" });
-```
-
-## QWeb extensions
-
-- t-on directive
-- t-widget, t-props, t-key
-- t-ref
-
-## Note on 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

doc/readme.md

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

doc/store.md

@@ -1,8 +0,0 @@
-# OWL: State Management
-
-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

@@ -1,3 +0,0 @@
-# VDom
-
-todo

index.html

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

package.json

@@ -1,66 +0,0 @@
-{
-  "name": "owl",
-  "version": "0.8.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"
-  },
-  "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

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

playground/export_snippet.js

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

playground/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>OWL Playground</title>
+    <link rel="icon" href="data:,">
+
+    <script src="libs/ace.js" type="text/javascript" charset="utf-8"></script>
+    <script src="../owl.js"></script>
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
+
+    <!-- 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>
+  <body>
+  </body>
+</html>

playground/libs/FileSaver.min.js

@@ -0,0 +1,3 @@
+(function(a,b){if("function"==typeof define&&define.amd)define([],b);else if("undefined"!=typeof exports)b();else{b(),a.FileSaver={exports:{}}.exports}})(this,function(){"use strict";function b(a,b){return"undefined"==typeof b?b={autoBom:!1}:"object"!=typeof b&&(console.warn("Depricated: Expected third argument to be a object"),b={autoBom:!b}),b.autoBom&&/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(a.type)?new Blob(["\uFEFF",a],{type:a.type}):a}function c(b,c,d){var e=new XMLHttpRequest;e.open("GET",b),e.responseType="blob",e.onload=function(){a(e.response,c,d)},e.onerror=function(){console.error("could not download file")},e.send()}function d(a){var b=new XMLHttpRequest;return b.open("HEAD",a,!1),b.send(),200<=b.status&&299>=b.status}function e(a){try{a.dispatchEvent(new MouseEvent("click"))}catch(c){var b=document.createEvent("MouseEvents");b.initMouseEvent("click",!0,!0,window,0,0,0,80,20,!1,!1,!1,!1,0,null),a.dispatchEvent(b)}}var f="object"==typeof window&&window.window===window?window:"object"==typeof self&&self.self===self?self:"object"==typeof global&&global.global===global?global:void 0,a=f.saveAs||("object"!=typeof window||window!==f?function(){}:"download"in HTMLAnchorElement.prototype?function(b,g,h){var i=f.URL||f.webkitURL,j=document.createElement("a");g=g||b.name||"download",j.download=g,j.rel="noopener","string"==typeof b?(j.href=b,j.origin===location.origin?e(j):d(j.href)?c(b,g,h):e(j,j.target="_blank")):(j.href=i.createObjectURL(b),setTimeout(function(){i.revokeObjectURL(j.href)},4E4),setTimeout(function(){e(j)},0))}:"msSaveOrOpenBlob"in navigator?function(f,g,h){if(g=g||f.name||"download","string"!=typeof f)navigator.msSaveOrOpenBlob(b(f,h),g);else if(d(f))c(f,g,h);else{var i=document.createElement("a");i.href=f,i.target="_blank",setTimeout(function(){e(i)})}}:function(a,b,d,e){if(e=e||open("","_blank"),e&&(e.document.title=e.document.body.innerText="downloading..."),"string"==typeof a)return c(a,b,d);var g="application/octet-stream"===a.type,h=/constructor/i.test(f.HTMLElement)||f.safari,i=/CriOS\/[\d]+/.test(navigator.userAgent);if((i||g&&h)&&"object"==typeof FileReader){var j=new FileReader;j.onloadend=function(){var a=j.result;a=i?a:a.replace(/^data:[^;]*;/,"data:attachment/file;"),e?e.location.href=a:location=a,e=null},j.readAsDataURL(a)}else{var k=f.URL||f.webkitURL,l=k.createObjectURL(a);e?e.location=l:location.href=l,e=null,setTimeout(function(){k.revokeObjectURL(l)},4E4)}});f.saveAs=a.saveAs=a,"undefined"!=typeof module&&(module.exports=a)});
+
+//# sourceMappingURL=FileSaver.min.js.map

playground/libs/mode-css.js

@@ -0,0 +1,980 @@
+ace.define(
+  "ace/mode/css_highlight_rules",
+  [
+    "require",
+    "exports",
+    "module",
+    "ace/lib/oop",
+    "ace/lib/lang",
+    "ace/mode/text_highlight_rules"
+  ],
+  function(require, exports, module) {
+    "use strict";
+
+    var oop = require("../lib/oop");
+    var lang = require("../lib/lang");
+    var TextHighlightRules = require("./text_highlight_rules")
+      .TextHighlightRules;
+    var supportType = (exports.supportType =
+      "align-content|align-items|align-self|all|animation|animation-delay|animation-direction|animation-duration|animation-fill-mode|animation-iteration-count|animation-name|animation-play-state|animation-timing-function|backface-visibility|background|background-attachment|background-blend-mode|background-clip|background-color|background-image|background-origin|background-position|background-repeat|background-size|border|border-bottom|border-bottom-color|border-bottom-left-radius|border-bottom-right-radius|border-bottom-style|border-bottom-width|border-collapse|border-color|border-image|border-image-outset|border-image-repeat|border-image-slice|border-image-source|border-image-width|border-left|border-left-color|border-left-style|border-left-width|border-radius|border-right|border-right-color|border-right-style|border-right-width|border-spacing|border-style|border-top|border-top-color|border-top-left-radius|border-top-right-radius|border-top-style|border-top-width|border-width|bottom|box-shadow|box-sizing|caption-side|clear|clip|color|column-count|column-fill|column-gap|column-rule|column-rule-color|column-rule-style|column-rule-width|column-span|column-width|columns|content|counter-increment|counter-reset|cursor|direction|display|empty-cells|filter|flex|flex-basis|flex-direction|flex-flow|flex-grow|flex-shrink|flex-wrap|float|font|font-family|font-size|font-size-adjust|font-stretch|font-style|font-variant|font-weight|hanging-punctuation|height|justify-content|left|letter-spacing|line-height|list-style|list-style-image|list-style-position|list-style-type|margin|margin-bottom|margin-left|margin-right|margin-top|max-height|max-width|max-zoom|min-height|min-width|min-zoom|nav-down|nav-index|nav-left|nav-right|nav-up|opacity|order|outline|outline-color|outline-offset|outline-style|outline-width|overflow|overflow-x|overflow-y|padding|padding-bottom|padding-left|padding-right|padding-top|page-break-after|page-break-before|page-break-inside|perspective|perspective-origin|position|quotes|resize|right|tab-size|table-layout|text-align|text-align-last|text-decoration|text-decoration-color|text-decoration-line|text-decoration-style|text-indent|text-justify|text-overflow|text-shadow|text-transform|top|transform|transform-origin|transform-style|transition|transition-delay|transition-duration|transition-property|transition-timing-function|unicode-bidi|user-select|user-zoom|vertical-align|visibility|white-space|width|word-break|word-spacing|word-wrap|z-index");
+    var supportFunction = (exports.supportFunction =
+      "rgb|rgba|url|attr|counter|counters");
+    var supportConstant = (exports.supportConstant =
+      "absolute|after-edge|after|all-scroll|all|alphabetic|always|antialiased|armenian|auto|avoid-column|avoid-page|avoid|balance|baseline|before-edge|before|below|bidi-override|block-line-height|block|bold|bolder|border-box|both|bottom|box|break-all|break-word|capitalize|caps-height|caption|center|central|char|circle|cjk-ideographic|clone|close-quote|col-resize|collapse|column|consider-shifts|contain|content-box|cover|crosshair|cubic-bezier|dashed|decimal-leading-zero|decimal|default|disabled|disc|disregard-shifts|distribute-all-lines|distribute-letter|distribute-space|distribute|dotted|double|e-resize|ease-in|ease-in-out|ease-out|ease|ellipsis|end|exclude-ruby|fill|fixed|georgian|glyphs|grid-height|groove|hand|hanging|hebrew|help|hidden|hiragana-iroha|hiragana|horizontal|icon|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space|ideographic|inactive|include-ruby|inherit|initial|inline-block|inline-box|inline-line-height|inline-table|inline|inset|inside|inter-ideograph|inter-word|invert|italic|justify|katakana-iroha|katakana|keep-all|last|left|lighter|line-edge|line-through|line|linear|list-item|local|loose|lower-alpha|lower-greek|lower-latin|lower-roman|lowercase|lr-tb|ltr|mathematical|max-height|max-size|medium|menu|message-box|middle|move|n-resize|ne-resize|newspaper|no-change|no-close-quote|no-drop|no-open-quote|no-repeat|none|normal|not-allowed|nowrap|nw-resize|oblique|open-quote|outset|outside|overline|padding-box|page|pointer|pre-line|pre-wrap|pre|preserve-3d|progress|relative|repeat-x|repeat-y|repeat|replaced|reset-size|ridge|right|round|row-resize|rtl|s-resize|scroll|se-resize|separate|slice|small-caps|small-caption|solid|space|square|start|static|status-bar|step-end|step-start|steps|stretch|strict|sub|super|sw-resize|table-caption|table-cell|table-column-group|table-column|table-footer-group|table-header-group|table-row-group|table-row|table|tb-rl|text-after-edge|text-before-edge|text-bottom|text-size|text-top|text|thick|thin|transparent|underline|upper-alpha|upper-latin|upper-roman|uppercase|use-script|vertical-ideographic|vertical-text|visible|w-resize|wait|whitespace|z-index|zero|zoom");
+    var supportConstantColor = (exports.supportConstantColor =
+      "aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|rebeccapurple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen");
+    var supportConstantFonts = (exports.supportConstantFonts =
+      "arial|century|comic|courier|cursive|fantasy|garamond|georgia|helvetica|impact|lucida|symbol|system|tahoma|times|trebuchet|utopia|verdana|webdings|sans-serif|serif|monospace");
+
+    var numRe = (exports.numRe =
+      "\\-?(?:(?:[0-9]+(?:\\.[0-9]+)?)|(?:\\.[0-9]+))");
+    var pseudoElements = (exports.pseudoElements =
+      "(\\:+)\\b(after|before|first-letter|first-line|moz-selection|selection)\\b");
+    var pseudoClasses = (exports.pseudoClasses =
+      "(:)\\b(active|checked|disabled|empty|enabled|first-child|first-of-type|focus|hover|indeterminate|invalid|last-child|last-of-type|link|not|nth-child|nth-last-child|nth-last-of-type|nth-of-type|only-child|only-of-type|required|root|target|valid|visited)\\b");
+
+    var CssHighlightRules = function() {
+      var keywordMapper = this.createKeywordMapper(
+        {
+          "support.function": supportFunction,
+          "support.constant": supportConstant,
+          "support.type": supportType,
+          "support.constant.color": supportConstantColor,
+          "support.constant.fonts": supportConstantFonts
+        },
+        "text",
+        true
+      );
+
+      this.$rules = {
+        start: [
+          {
+            include: ["strings", "url", "comments"]
+          },
+          {
+            token: "paren.lparen",
+            regex: "\\{",
+            next: "ruleset"
+          },
+          {
+            token: "paren.rparen",
+            regex: "\\}"
+          },
+          {
+            token: "string",
+            regex: "@(?!viewport)",
+            next: "media"
+          },
+          {
+            token: "keyword",
+            regex: "#[a-z0-9-_]+"
+          },
+          {
+            token: "keyword",
+            regex: "%"
+          },
+          {
+            token: "variable",
+            regex: "\\.[a-z0-9-_]+"
+          },
+          {
+            token: "string",
+            regex: ":[a-z0-9-_]+"
+          },
+          {
+            token: "constant.numeric",
+            regex: numRe
+          },
+          {
+            token: "constant",
+            regex: "[a-z0-9-_]+"
+          },
+          {
+            caseInsensitive: true
+          }
+        ],
+
+        media: [
+          {
+            include: ["strings", "url", "comments"]
+          },
+          {
+            token: "paren.lparen",
+            regex: "\\{",
+            next: "start"
+          },
+          {
+            token: "paren.rparen",
+            regex: "\\}",
+            next: "start"
+          },
+          {
+            token: "string",
+            regex: ";",
+            next: "start"
+          },
+          {
+            token: "keyword",
+            regex:
+              "(?:media|supports|document|charset|import|namespace|media|supports|document" +
+              "|page|font|keyframes|viewport|counter-style|font-feature-values" +
+              "|swash|ornaments|annotation|stylistic|styleset|character-variant)"
+          }
+        ],
+
+        comments: [
+          {
+            token: "comment", // multi line comment
+            regex: "\\/\\*",
+            push: [
+              {
+                token: "comment",
+                regex: "\\*\\/",
+                next: "pop"
+              },
+              {
+                defaultToken: "comment"
+              }
+            ]
+          }
+        ],
+
+        ruleset: [
+          {
+            regex: "-(webkit|ms|moz|o)-",
+            token: "text"
+          },
+          {
+            token: "punctuation.operator",
+            regex: "[:;]"
+          },
+          {
+            token: "paren.rparen",
+            regex: "\\}",
+            next: "start"
+          },
+          {
+            include: ["strings", "url", "comments"]
+          },
+          {
+            token: ["constant.numeric", "keyword"],
+            regex:
+              "(" +
+              numRe +
+              ")(ch|cm|deg|em|ex|fr|gd|grad|Hz|in|kHz|mm|ms|pc|pt|px|rad|rem|s|turn|vh|vmax|vmin|vm|vw|%)"
+          },
+          {
+            token: "constant.numeric",
+            regex: numRe
+          },
+          {
+            token: "constant.numeric", // hex6 color
+            regex: "#[a-f0-9]{6}"
+          },
+          {
+            token: "constant.numeric", // hex3 color
+            regex: "#[a-f0-9]{3}"
+          },
+          {
+            token: [
+              "punctuation",
+              "entity.other.attribute-name.pseudo-element.css"
+            ],
+            regex: pseudoElements
+          },
+          {
+            token: [
+              "punctuation",
+              "entity.other.attribute-name.pseudo-class.css"
+            ],
+            regex: pseudoClasses
+          },
+          {
+            include: "url"
+          },
+          {
+            token: keywordMapper,
+            regex: "\\-?[a-zA-Z_][a-zA-Z0-9_\\-]*"
+          },
+          {
+            caseInsensitive: true
+          }
+        ],
+
+        url: [
+          {
+            token: "support.function",
+            regex: "(?:url(:?-prefix)?|domain|regexp)\\(",
+            push: [
+              {
+                token: "support.function",
+                regex: "\\)",
+                next: "pop"
+              },
+              {
+                defaultToken: "string"
+              }
+            ]
+          }
+        ],
+
+        strings: [
+          {
+            token: "string.start",
+            regex: "'",
+            push: [
+              {
+                token: "string.end",
+                regex: "'|$",
+                next: "pop"
+              },
+              {
+                include: "escapes"
+              },
+              {
+                token: "constant.language.escape",
+                regex: /\\$/,
+                consumeLineEnd: true
+              },
+              {
+                defaultToken: "string"
+              }
+            ]
+          },
+          {
+            token: "string.start",
+            regex: '"',
+            push: [
+              {
+                token: "string.end",
+                regex: '"|$',
+                next: "pop"
+              },
+              {
+                include: "escapes"
+              },
+              {
+                token: "constant.language.escape",
+                regex: /\\$/,
+                consumeLineEnd: true
+              },
+              {
+                defaultToken: "string"
+              }
+            ]
+          }
+        ],
+        escapes: [
+          {
+            token: "constant.language.escape",
+            regex: /\\([a-fA-F\d]{1,6}|[^a-fA-F\d])/
+          }
+        ]
+      };
+
+      this.normalizeRules();
+    };
+
+    oop.inherits(CssHighlightRules, TextHighlightRules);
+
+    exports.CssHighlightRules = CssHighlightRules;
+  }
+);
+
+ace.define(
+  "ace/mode/matching_brace_outdent",
+  ["require", "exports", "module", "ace/range"],
+  function(require, exports, module) {
+    "use strict";
+
+    var Range = require("../range").Range;
+
+    var MatchingBraceOutdent = function() {};
+
+    (function() {
+      this.checkOutdent = function(line, input) {
+        if (!/^\s+$/.test(line)) return false;
+
+        return /^\s*\}/.test(input);
+      };
+
+      this.autoOutdent = function(doc, row) {
+        var line = doc.getLine(row);
+        var match = line.match(/^(\s*\})/);
+
+        if (!match) return 0;
+
+        var column = match[1].length;
+        var openBracePos = doc.findMatchingBracket({
+          row: row,
+          column: column
+        });
+
+        if (!openBracePos || openBracePos.row == row) return 0;
+
+        var indent = this.$getIndent(doc.getLine(openBracePos.row));
+        doc.replace(new Range(row, 0, row, column - 1), indent);
+      };
+
+      this.$getIndent = function(line) {
+        return line.match(/^\s*/)[0];
+      };
+    }.call(MatchingBraceOutdent.prototype));
+
+    exports.MatchingBraceOutdent = MatchingBraceOutdent;
+  }
+);
+
+ace.define(
+  "ace/mode/css_completions",
+  ["require", "exports", "module"],
+  function(require, exports, module) {
+    "use strict";
+
+    var propertyMap = {
+      background: { "#$0": 1 },
+      "background-color": { "#$0": 1, transparent: 1, fixed: 1 },
+      "background-image": { "url('/$0')": 1 },
+      "background-repeat": {
+        repeat: 1,
+        "repeat-x": 1,
+        "repeat-y": 1,
+        "no-repeat": 1,
+        inherit: 1
+      },
+      "background-position": {
+        bottom: 2,
+        center: 2,
+        left: 2,
+        right: 2,
+        top: 2,
+        inherit: 2
+      },
+      "background-attachment": { scroll: 1, fixed: 1 },
+      "background-size": { cover: 1, contain: 1 },
+      "background-clip": {
+        "border-box": 1,
+        "padding-box": 1,
+        "content-box": 1
+      },
+      "background-origin": {
+        "border-box": 1,
+        "padding-box": 1,
+        "content-box": 1
+      },
+      border: { "solid $0": 1, "dashed $0": 1, "dotted $0": 1, "#$0": 1 },
+      "border-color": { "#$0": 1 },
+      "border-style": {
+        solid: 2,
+        dashed: 2,
+        dotted: 2,
+        double: 2,
+        groove: 2,
+        hidden: 2,
+        inherit: 2,
+        inset: 2,
+        none: 2,
+        outset: 2,
+        ridged: 2
+      },
+      "border-collapse": { collapse: 1, separate: 1 },
+      bottom: { px: 1, em: 1, "%": 1 },
+      clear: { left: 1, right: 1, both: 1, none: 1 },
+      color: { "#$0": 1, "rgb(#$00,0,0)": 1 },
+      cursor: {
+        default: 1,
+        pointer: 1,
+        move: 1,
+        text: 1,
+        wait: 1,
+        help: 1,
+        progress: 1,
+        "n-resize": 1,
+        "ne-resize": 1,
+        "e-resize": 1,
+        "se-resize": 1,
+        "s-resize": 1,
+        "sw-resize": 1,
+        "w-resize": 1,
+        "nw-resize": 1
+      },
+      display: {
+        none: 1,
+        block: 1,
+        inline: 1,
+        "inline-block": 1,
+        "table-cell": 1
+      },
+      "empty-cells": { show: 1, hide: 1 },
+      float: { left: 1, right: 1, none: 1 },
+      "font-family": {
+        Arial: 2,
+        "Comic Sans MS": 2,
+        Consolas: 2,
+        "Courier New": 2,
+        Courier: 2,
+        Georgia: 2,
+        Monospace: 2,
+        "Sans-Serif": 2,
+        "Segoe UI": 2,
+        Tahoma: 2,
+        "Times New Roman": 2,
+        "Trebuchet MS": 2,
+        Verdana: 1
+      },
+      "font-size": { px: 1, em: 1, "%": 1 },
+      "font-weight": { bold: 1, normal: 1 },
+      "font-style": { italic: 1, normal: 1 },
+      "font-variant": { normal: 1, "small-caps": 1 },
+      height: { px: 1, em: 1, "%": 1 },
+      left: { px: 1, em: 1, "%": 1 },
+      "letter-spacing": { normal: 1 },
+      "line-height": { normal: 1 },
+      "list-style-type": {
+        none: 1,
+        disc: 1,
+        circle: 1,
+        square: 1,
+        decimal: 1,
+        "decimal-leading-zero": 1,
+        "lower-roman": 1,
+        "upper-roman": 1,
+        "lower-greek": 1,
+        "lower-latin": 1,
+        "upper-latin": 1,
+        georgian: 1,
+        "lower-alpha": 1,
+        "upper-alpha": 1
+      },
+      margin: { px: 1, em: 1, "%": 1 },
+      "margin-right": { px: 1, em: 1, "%": 1 },
+      "margin-left": { px: 1, em: 1, "%": 1 },
+      "margin-top": { px: 1, em: 1, "%": 1 },
+      "margin-bottom": { px: 1, em: 1, "%": 1 },
+      "max-height": { px: 1, em: 1, "%": 1 },
+      "max-width": { px: 1, em: 1, "%": 1 },
+      "min-height": { px: 1, em: 1, "%": 1 },
+      "min-width": { px: 1, em: 1, "%": 1 },
+      overflow: { hidden: 1, visible: 1, auto: 1, scroll: 1 },
+      "overflow-x": { hidden: 1, visible: 1, auto: 1, scroll: 1 },
+      "overflow-y": { hidden: 1, visible: 1, auto: 1, scroll: 1 },
+      padding: { px: 1, em: 1, "%": 1 },
+      "padding-top": { px: 1, em: 1, "%": 1 },
+      "padding-right": { px: 1, em: 1, "%": 1 },
+      "padding-bottom": { px: 1, em: 1, "%": 1 },
+      "padding-left": { px: 1, em: 1, "%": 1 },
+      "page-break-after": { auto: 1, always: 1, avoid: 1, left: 1, right: 1 },
+      "page-break-before": { auto: 1, always: 1, avoid: 1, left: 1, right: 1 },
+      position: { absolute: 1, relative: 1, fixed: 1, static: 1 },
+      right: { px: 1, em: 1, "%": 1 },
+      "table-layout": { fixed: 1, auto: 1 },
+      "text-decoration": { none: 1, underline: 1, "line-through": 1, blink: 1 },
+      "text-align": { left: 1, right: 1, center: 1, justify: 1 },
+      "text-transform": { capitalize: 1, uppercase: 1, lowercase: 1, none: 1 },
+      top: { px: 1, em: 1, "%": 1 },
+      "vertical-align": { top: 1, bottom: 1 },
+      visibility: { hidden: 1, visible: 1 },
+      "white-space": {
+        nowrap: 1,
+        normal: 1,
+        pre: 1,
+        "pre-line": 1,
+        "pre-wrap": 1
+      },
+      width: { px: 1, em: 1, "%": 1 },
+      "word-spacing": { normal: 1 },
+      filter: { "alpha(opacity=$0100)": 1 },
+
+      "text-shadow": { "$02px 2px 2px #777": 1 },
+      "text-overflow": { "ellipsis-word": 1, clip: 1, ellipsis: 1 },
+      "-moz-border-radius": 1,
+      "-moz-border-radius-topright": 1,
+      "-moz-border-radius-bottomright": 1,
+      "-moz-border-radius-topleft": 1,
+      "-moz-border-radius-bottomleft": 1,
+      "-webkit-border-radius": 1,
+      "-webkit-border-top-right-radius": 1,
+      "-webkit-border-top-left-radius": 1,
+      "-webkit-border-bottom-right-radius": 1,
+      "-webkit-border-bottom-left-radius": 1,
+      "-moz-box-shadow": 1,
+      "-webkit-box-shadow": 1,
+      transform: { "rotate($00deg)": 1, "skew($00deg)": 1 },
+      "-moz-transform": { "rotate($00deg)": 1, "skew($00deg)": 1 },
+      "-webkit-transform": { "rotate($00deg)": 1, "skew($00deg)": 1 }
+    };
+
+    var CssCompletions = function() {};
+
+    (function() {
+      this.completionsDefined = false;
+
+      this.defineCompletions = function() {
+        if (document) {
+          var style = document.createElement("c").style;
+
+          for (var i in style) {
+            if (typeof style[i] !== "string") continue;
+
+            var name = i.replace(/[A-Z]/g, function(x) {
+              return "-" + x.toLowerCase();
+            });
+
+            if (!propertyMap.hasOwnProperty(name)) propertyMap[name] = 1;
+          }
+        }
+
+        this.completionsDefined = true;
+      };
+
+      this.getCompletions = function(state, session, pos, prefix) {
+        if (!this.completionsDefined) {
+          this.defineCompletions();
+        }
+
+        if (state === "ruleset" || session.$mode.$id == "ace/mode/scss") {
+          var line = session.getLine(pos.row).substr(0, pos.column);
+          if (/:[^;]+$/.test(line)) {
+            /([\w\-]+):[^:]*$/.test(line);
+
+            return this.getPropertyValueCompletions(
+              state,
+              session,
+              pos,
+              prefix
+            );
+          } else {
+            return this.getPropertyCompletions(state, session, pos, prefix);
+          }
+        }
+
+        return [];
+      };
+
+      this.getPropertyCompletions = function(state, session, pos, prefix) {
+        var properties = Object.keys(propertyMap);
+        return properties.map(function(property) {
+          return {
+            caption: property,
+            snippet: property + ": $0;",
+            meta: "property",
+            score: 1000000
+          };
+        });
+      };
+
+      this.getPropertyValueCompletions = function(state, session, pos, prefix) {
+        var line = session.getLine(pos.row).substr(0, pos.column);
+        var property = (/([\w\-]+):[^:]*$/.exec(line) || {})[1];
+
+        if (!property) return [];
+        var values = [];
+        if (
+          property in propertyMap &&
+          typeof propertyMap[property] === "object"
+        ) {
+          values = Object.keys(propertyMap[property]);
+        }
+        return values.map(function(value) {
+          return {
+            caption: value,
+            snippet: value,
+            meta: "property value",
+            score: 1000000
+          };
+        });
+      };
+    }.call(CssCompletions.prototype));
+
+    exports.CssCompletions = CssCompletions;
+  }
+);
+
+ace.define(
+  "ace/mode/behaviour/css",
+  [
+    "require",
+    "exports",
+    "module",
+    "ace/lib/oop",
+    "ace/mode/behaviour",
+    "ace/mode/behaviour/cstyle",
+    "ace/token_iterator"
+  ],
+  function(require, exports, module) {
+    "use strict";
+
+    var oop = require("../../lib/oop");
+    var Behaviour = require("../behaviour").Behaviour;
+    var CstyleBehaviour = require("./cstyle").CstyleBehaviour;
+    var TokenIterator = require("../../token_iterator").TokenIterator;
+
+    var CssBehaviour = function() {
+      this.inherit(CstyleBehaviour);
+
+      this.add("colon", "insertion", function(
+        state,
+        action,
+        editor,
+        session,
+        text
+      ) {
+        if (text === ":" && editor.selection.isEmpty()) {
+          var cursor = editor.getCursorPosition();
+          var iterator = new TokenIterator(session, cursor.row, cursor.column);
+          var token = iterator.getCurrentToken();
+          if (token && token.value.match(/\s+/)) {
+            token = iterator.stepBackward();
+          }
+          if (token && token.type === "support.type") {
+            var line = session.doc.getLine(cursor.row);
+            var rightChar = line.substring(cursor.column, cursor.column + 1);
+            if (rightChar === ":") {
+              return {
+                text: "",
+                selection: [1, 1]
+              };
+            }
+            if (/^(\s+[^;]|\s*$)/.test(line.substring(cursor.column))) {
+              return {
+                text: ":;",
+                selection: [1, 1]
+              };
+            }
+          }
+        }
+      });
+
+      this.add("colon", "deletion", function(
+        state,
+        action,
+        editor,
+        session,
+        range
+      ) {
+        var selected = session.doc.getTextRange(range);
+        if (!range.isMultiLine() && selected === ":") {
+          var cursor = editor.getCursorPosition();
+          var iterator = new TokenIterator(session, cursor.row, cursor.column);
+          var token = iterator.getCurrentToken();
+          if (token && token.value.match(/\s+/)) {
+            token = iterator.stepBackward();
+          }
+          if (token && token.type === "support.type") {
+            var line = session.doc.getLine(range.start.row);
+            var rightChar = line.substring(
+              range.end.column,
+              range.end.column + 1
+            );
+            if (rightChar === ";") {
+              range.end.column++;
+              return range;
+            }
+          }
+        }
+      });
+
+      this.add("semicolon", "insertion", function(
+        state,
+        action,
+        editor,
+        session,
+        text
+      ) {
+        if (text === ";" && editor.selection.isEmpty()) {
+          var cursor = editor.getCursorPosition();
+          var line = session.doc.getLine(cursor.row);
+          var rightChar = line.substring(cursor.column, cursor.column + 1);
+          if (rightChar === ";") {
+            return {
+              text: "",
+              selection: [1, 1]
+            };
+          }
+        }
+      });
+
+      this.add("!important", "insertion", function(
+        state,
+        action,
+        editor,
+        session,
+        text
+      ) {
+        if (text === "!" && editor.selection.isEmpty()) {
+          var cursor = editor.getCursorPosition();
+          var line = session.doc.getLine(cursor.row);
+
+          if (/^\s*(;|}|$)/.test(line.substring(cursor.column))) {
+            return {
+              text: "!important",
+              selection: [10, 10]
+            };
+          }
+        }
+      });
+    };
+    oop.inherits(CssBehaviour, CstyleBehaviour);
+
+    exports.CssBehaviour = CssBehaviour;
+  }
+);
+
+ace.define(
+  "ace/mode/folding/cstyle",
+  [
+    "require",
+    "exports",
+    "module",
+    "ace/lib/oop",
+    "ace/range",
+    "ace/mode/folding/fold_mode"
+  ],
+  function(require, exports, module) {
+    "use strict";
+
+    var oop = require("../../lib/oop");
+    var Range = require("../../range").Range;
+    var BaseFoldMode = require("./fold_mode").FoldMode;
+
+    var FoldMode = (exports.FoldMode = function(commentRegex) {
+      if (commentRegex) {
+        this.foldingStartMarker = new RegExp(
+          this.foldingStartMarker.source.replace(
+            /\|[^|]*?$/,
+            "|" + commentRegex.start
+          )
+        );
+        this.foldingStopMarker = new RegExp(
+          this.foldingStopMarker.source.replace(
+            /\|[^|]*?$/,
+            "|" + commentRegex.end
+          )
+        );
+      }
+    });
+    oop.inherits(FoldMode, BaseFoldMode);
+
+    (function() {
+      this.foldingStartMarker = /([\{\[\(])[^\}\]\)]*$|^\s*(\/\*)/;
+      this.foldingStopMarker = /^[^\[\{\(]*([\}\]\)])|^[\s\*]*(\*\/)/;
+      this.singleLineBlockCommentRe = /^\s*(\/\*).*\*\/\s*$/;
+      this.tripleStarBlockCommentRe = /^\s*(\/\*\*\*).*\*\/\s*$/;
+      this.startRegionRe = /^\s*(\/\*|\/\/)#?region\b/;
+      this._getFoldWidgetBase = this.getFoldWidget;
+      this.getFoldWidget = function(session, foldStyle, row) {
+        var line = session.getLine(row);
+
+        if (this.singleLineBlockCommentRe.test(line)) {
+          if (
+            !this.startRegionRe.test(line) &&
+            !this.tripleStarBlockCommentRe.test(line)
+          )
+            return "";
+        }
+
+        var fw = this._getFoldWidgetBase(session, foldStyle, row);
+
+        if (!fw && this.startRegionRe.test(line)) return "start"; // lineCommentRegionStart
+
+        return fw;
+      };
+
+      this.getFoldWidgetRange = function(
+        session,
+        foldStyle,
+        row,
+        forceMultiline
+      ) {
+        var line = session.getLine(row);
+
+        if (this.startRegionRe.test(line))
+          return this.getCommentRegionBlock(session, line, row);
+
+        var match = line.match(this.foldingStartMarker);
+        if (match) {
+          var i = match.index;
+
+          if (match[1])
+            return this.openingBracketBlock(session, match[1], row, i);
+
+          var range = session.getCommentFoldRange(row, i + match[0].length, 1);
+
+          if (range && !range.isMultiLine()) {
+            if (forceMultiline) {
+              range = this.getSectionRange(session, row);
+            } else if (foldStyle != "all") range = null;
+          }
+
+          return range;
+        }
+
+        if (foldStyle === "markbegin") return;
+
+        var match = line.match(this.foldingStopMarker);
+        if (match) {
+          var i = match.index + match[0].length;
+
+          if (match[1])
+            return this.closingBracketBlock(session, match[1], row, i);
+
+          return session.getCommentFoldRange(row, i, -1);
+        }
+      };
+
+      this.getSectionRange = function(session, row) {
+        var line = session.getLine(row);
+        var startIndent = line.search(/\S/);
+        var startRow = row;
+        var startColumn = line.length;
+        row = row + 1;
+        var endRow = row;
+        var maxRow = session.getLength();
+        while (++row < maxRow) {
+          line = session.getLine(row);
+          var indent = line.search(/\S/);
+          if (indent === -1) continue;
+          if (startIndent > indent) break;
+          var subRange = this.getFoldWidgetRange(session, "all", row);
+
+          if (subRange) {
+            if (subRange.start.row <= startRow) {
+              break;
+            } else if (subRange.isMultiLine()) {
+              row = subRange.end.row;
+            } else if (startIndent == indent) {
+              break;
+            }
+          }
+          endRow = row;
+        }
+
+        return new Range(
+          startRow,
+          startColumn,
+          endRow,
+          session.getLine(endRow).length
+        );
+      };
+      this.getCommentRegionBlock = function(session, line, row) {
+        var startColumn = line.search(/\s*$/);
+        var maxRow = session.getLength();
+        var startRow = row;
+
+        var re = /^\s*(?:\/\*|\/\/|--)#?(end)?region\b/;
+        var depth = 1;
+        while (++row < maxRow) {
+          line = session.getLine(row);
+          var m = re.exec(line);
+          if (!m) continue;
+          if (m[1]) depth--;
+          else depth++;
+
+          if (!depth) break;
+        }
+
+        var endRow = row;
+        if (endRow > startRow) {
+          return new Range(startRow, startColumn, endRow, line.length);
+        }
+      };
+    }.call(FoldMode.prototype));
+  }
+);
+
+ace.define(
+  "ace/mode/css",
+  [
+    "require",
+    "exports",
+    "module",
+    "ace/lib/oop",
+    "ace/mode/text",
+    "ace/mode/css_highlight_rules",
+    "ace/mode/matching_brace_outdent",
+    "ace/worker/worker_client",
+    "ace/mode/css_completions",
+    "ace/mode/behaviour/css",
+    "ace/mode/folding/cstyle"
+  ],
+  function(require, exports, module) {
+    "use strict";
+
+    var oop = require("../lib/oop");
+    var TextMode = require("./text").Mode;
+    var CssHighlightRules = require("./css_highlight_rules").CssHighlightRules;
+    var MatchingBraceOutdent = require("./matching_brace_outdent")
+      .MatchingBraceOutdent;
+    var WorkerClient = require("../worker/worker_client").WorkerClient;
+    var CssCompletions = require("./css_completions").CssCompletions;
+    var CssBehaviour = require("./behaviour/css").CssBehaviour;
+    var CStyleFoldMode = require("./folding/cstyle").FoldMode;
+
+    var Mode = function() {
+      this.HighlightRules = CssHighlightRules;
+      this.$outdent = new MatchingBraceOutdent();
+      this.$behaviour = new CssBehaviour();
+      this.$completer = new CssCompletions();
+      this.foldingRules = new CStyleFoldMode();
+    };
+    oop.inherits(Mode, TextMode);
+
+    (function() {
+      this.foldingRules = "cStyle";
+      this.blockComment = { start: "/*", end: "*/" };
+
+      this.getNextLineIndent = function(state, line, tab) {
+        var indent = this.$getIndent(line);
+        var tokens = this.getTokenizer().getLineTokens(line, state).tokens;
+        if (tokens.length && tokens[tokens.length - 1].type == "comment") {
+          return indent;
+        }
+
+        var match = line.match(/^.*\{\s*$/);
+        if (match) {
+          indent += tab;
+        }
+
+        return indent;
+      };
+
+      this.checkOutdent = function(state, line, input) {
+        return this.$outdent.checkOutdent(line, input);
+      };
+
+      this.autoOutdent = function(state, doc, row) {
+        this.$outdent.autoOutdent(doc, row);
+      };
+
+      this.getCompletions = function(state, session, pos, prefix) {
+        return this.$completer.getCompletions(state, session, pos, prefix);
+      };
+
+      this.createWorker = function(session) {
+        var worker = new WorkerClient(["ace"], "ace/mode/css_worker", "Worker");
+        worker.attachToDocument(session.getDocument());
+
+        worker.on("annotate", function(e) {
+          session.setAnnotations(e.data);
+        });
+
+        worker.on("terminate", function() {
+          session.clearAnnotations();
+        });
+
+        return worker;
+      };
+
+      this.$id = "ace/mode/css";
+    }.call(Mode.prototype));
+
+    exports.Mode = Mode;
+  }
+);
+(function() {
+  ace.require(["ace/mode/css"], function(m) {
+    if (typeof module == "object" && typeof exports == "object" && module) {
+      module.exports = m;
+    }
+  });
+})();

playground/libs/mode-xml.js

@@ -0,0 +1,820 @@
+ace.define(
+  "ace/mode/xml_highlight_rules",
+  [
+    "require",
+    "exports",
+    "module",
+    "ace/lib/oop",
+    "ace/mode/text_highlight_rules"
+  ],
+  function(require, exports, module) {
+    "use strict";
+
+    var oop = require("../lib/oop");
+    var TextHighlightRules = require("./text_highlight_rules")
+      .TextHighlightRules;
+
+    var XmlHighlightRules = function(normalize) {
+      var tagRegex = "[_:a-zA-Z\xc0-\uffff][-_:.a-zA-Z0-9\xc0-\uffff]*";
+
+      this.$rules = {
+        start: [
+          {
+            token: "string.cdata.xml",
+            regex: "<\\!\\[CDATA\\[",
+            next: "cdata"
+          },
+          {
+            token: ["punctuation.instruction.xml", "keyword.instruction.xml"],
+            regex: "(<\\?)(" + tagRegex + ")",
+            next: "processing_instruction"
+          },
+          { token: "comment.start.xml", regex: "<\\!--", next: "comment" },
+          {
+            token: ["xml-pe.doctype.xml", "xml-pe.doctype.xml"],
+            regex: "(<\\!)(DOCTYPE)(?=[\\s])",
+            next: "doctype",
+            caseInsensitive: true
+          },
+          { include: "tag" },
+          { token: "text.end-tag-open.xml", regex: "</" },
+          { token: "text.tag-open.xml", regex: "<" },
+          { include: "reference" },
+          { defaultToken: "text.xml" }
+        ],
+
+        processing_instruction: [
+          {
+            token: "entity.other.attribute-name.decl-attribute-name.xml",
+            regex: tagRegex
+          },
+          {
+            token: "keyword.operator.decl-attribute-equals.xml",
+            regex: "="
+          },
+          {
+            include: "whitespace"
+          },
+          {
+            include: "string"
+          },
+          {
+            token: "punctuation.xml-decl.xml",
+            regex: "\\?>",
+            next: "start"
+          }
+        ],
+
+        doctype: [
+          { include: "whitespace" },
+          { include: "string" },
+          { token: "xml-pe.doctype.xml", regex: ">", next: "start" },
+          { token: "xml-pe.xml", regex: "[-_a-zA-Z0-9:]+" },
+          { token: "punctuation.int-subset", regex: "\\[", push: "int_subset" }
+        ],
+
+        int_subset: [
+          {
+            token: "text.xml",
+            regex: "\\s+"
+          },
+          {
+            token: "punctuation.int-subset.xml",
+            regex: "]",
+            next: "pop"
+          },
+          {
+            token: ["punctuation.markup-decl.xml", "keyword.markup-decl.xml"],
+            regex: "(<\\!)(" + tagRegex + ")",
+            push: [
+              {
+                token: "text",
+                regex: "\\s+"
+              },
+              {
+                token: "punctuation.markup-decl.xml",
+                regex: ">",
+                next: "pop"
+              },
+              { include: "string" }
+            ]
+          }
+        ],
+
+        cdata: [
+          { token: "string.cdata.xml", regex: "\\]\\]>", next: "start" },
+          { token: "text.xml", regex: "\\s+" },
+          { token: "text.xml", regex: "(?:[^\\]]|\\](?!\\]>))+" }
+        ],
+
+        comment: [
+          { token: "comment.end.xml", regex: "-->", next: "start" },
+          { defaultToken: "comment.xml" }
+        ],
+
+        reference: [
+          {
+            token: "constant.language.escape.reference.xml",
+            regex: "(?:&#[0-9]+;)|(?:&#x[0-9a-fA-F]+;)|(?:&[a-zA-Z0-9_:\\.-]+;)"
+          }
+        ],
+
+        attr_reference: [
+          {
+            token: "constant.language.escape.reference.attribute-value.xml",
+            regex: "(?:&#[0-9]+;)|(?:&#x[0-9a-fA-F]+;)|(?:&[a-zA-Z0-9_:\\.-]+;)"
+          }
+        ],
+
+        tag: [
+          {
+            token: [
+              "meta.tag.punctuation.tag-open.xml",
+              "meta.tag.punctuation.end-tag-open.xml",
+              "meta.tag.tag-name.xml"
+            ],
+            regex: "(?:(<)|(</))((?:" + tagRegex + ":)?" + tagRegex + ")",
+            next: [
+              { include: "attributes" },
+              {
+                token: "meta.tag.punctuation.tag-close.xml",
+                regex: "/?>",
+                next: "start"
+              }
+            ]
+          }
+        ],
+
+        tag_whitespace: [{ token: "text.tag-whitespace.xml", regex: "\\s+" }],
+        whitespace: [{ token: "text.whitespace.xml", regex: "\\s+" }],
+        string: [
+          {
+            token: "string.xml",
+            regex: "'",
+            push: [
+              { token: "string.xml", regex: "'", next: "pop" },
+              { defaultToken: "string.xml" }
+            ]
+          },
+          {
+            token: "string.xml",
+            regex: '"',
+            push: [
+              { token: "string.xml", regex: '"', next: "pop" },
+              { defaultToken: "string.xml" }
+            ]
+          }
+        ],
+
+        attributes: [
+          {
+            token: "entity.other.attribute-name.xml",
+            regex: tagRegex
+          },
+          {
+            token: "keyword.operator.attribute-equals.xml",
+            regex: "="
+          },
+          {
+            include: "tag_whitespace"
+          },
+          {
+            include: "attribute_value"
+          }
+        ],
+
+        attribute_value: [
+          {
+            token: "string.attribute-value.xml",
+            regex: "'",
+            push: [
+              { token: "string.attribute-value.xml", regex: "'", next: "pop" },
+              { include: "attr_reference" },
+              { defaultToken: "string.attribute-value.xml" }
+            ]
+          },
+          {
+            token: "string.attribute-value.xml",
+            regex: '"',
+            push: [
+              { token: "string.attribute-value.xml", regex: '"', next: "pop" },
+              { include: "attr_reference" },
+              { defaultToken: "string.attribute-value.xml" }
+            ]
+          }
+        ]
+      };
+
+      if (this.constructor === XmlHighlightRules) this.normalizeRules();
+    };
+
+    (function() {
+      this.embedTagRules = function(HighlightRules, prefix, tag) {
+        this.$rules.tag.unshift({
+          token: [
+            "meta.tag.punctuation.tag-open.xml",
+            "meta.tag." + tag + ".tag-name.xml"
+          ],
+          regex: "(<)(" + tag + "(?=\\s|>|$))",
+          next: [
+            { include: "attributes" },
+            {
+              token: "meta.tag.punctuation.tag-close.xml",
+              regex: "/?>",
+              next: prefix + "start"
+            }
+          ]
+        });
+
+        this.$rules[tag + "-end"] = [
+          { include: "attributes" },
+          {
+            token: "meta.tag.punctuation.tag-close.xml",
+            regex: "/?>",
+            next: "start",
+            onMatch: function(value, currentState, stack) {
+              stack.splice(0);
+              return this.token;
+            }
+          }
+        ];
+
+        this.embedRules(HighlightRules, prefix, [
+          {
+            token: [
+              "meta.tag.punctuation.end-tag-open.xml",
+              "meta.tag." + tag + ".tag-name.xml"
+            ],
+            regex: "(</)(" + tag + "(?=\\s|>|$))",
+            next: tag + "-end"
+          },
+          {
+            token: "string.cdata.xml",
+            regex: "<\\!\\[CDATA\\["
+          },
+          {
+            token: "string.cdata.xml",
+            regex: "\\]\\]>"
+          }
+        ]);
+      };
+    }.call(TextHighlightRules.prototype));
+
+    oop.inherits(XmlHighlightRules, TextHighlightRules);
+
+    exports.XmlHighlightRules = XmlHighlightRules;
+  }
+);
+
+ace.define(
+  "ace/mode/behaviour/xml",
+  [
+    "require",
+    "exports",
+    "module",
+    "ace/lib/oop",
+    "ace/mode/behaviour",
+    "ace/token_iterator",
+    "ace/lib/lang"
+  ],
+  function(require, exports, module) {
+    "use strict";
+
+    var oop = require("../../lib/oop");
+    var Behaviour = require("../behaviour").Behaviour;
+    var TokenIterator = require("../../token_iterator").TokenIterator;
+    var lang = require("../../lib/lang");
+
+    function is(token, type) {
+      return token && token.type.lastIndexOf(type + ".xml") > -1;
+    }
+
+    var XmlBehaviour = function() {
+      this.add("string_dquotes", "insertion", function(
+        state,
+        action,
+        editor,
+        session,
+        text
+      ) {
+        if (text == '"' || text == "'") {
+          var quote = text;
+          var selected = session.doc.getTextRange(editor.getSelectionRange());
+          if (
+            selected !== "" &&
+            selected !== "'" &&
+            selected != '"' &&
+            editor.getWrapBehavioursEnabled()
+          ) {
+            return {
+              text: quote + selected + quote,
+              selection: false
+            };
+          }
+
+          var cursor = editor.getCursorPosition();
+          var line = session.doc.getLine(cursor.row);
+          var rightChar = line.substring(cursor.column, cursor.column + 1);
+          var iterator = new TokenIterator(session, cursor.row, cursor.column);
+          var token = iterator.getCurrentToken();
+
+          if (
+            rightChar == quote &&
+            (is(token, "attribute-value") || is(token, "string"))
+          ) {
+            return {
+              text: "",
+              selection: [1, 1]
+            };
+          }
+
+          if (!token) token = iterator.stepBackward();
+
+          if (!token) return;
+
+          while (is(token, "tag-whitespace") || is(token, "whitespace")) {
+            token = iterator.stepBackward();
+          }
+          var rightSpace = !rightChar || rightChar.match(/\s/);
+          if (
+            (is(token, "attribute-equals") &&
+              (rightSpace || rightChar == ">")) ||
+            (is(token, "decl-attribute-equals") &&
+              (rightSpace || rightChar == "?"))
+          ) {
+            return {
+              text: quote + quote,
+              selection: [1, 1]
+            };
+          }
+        }
+      });
+
+      this.add("string_dquotes", "deletion", function(
+        state,
+        action,
+        editor,
+        session,
+        range
+      ) {
+        var selected = session.doc.getTextRange(range);
+        if (!range.isMultiLine() && (selected == '"' || selected == "'")) {
+          var line = session.doc.getLine(range.start.row);
+          var rightChar = line.substring(
+            range.start.column + 1,
+            range.start.column + 2
+          );
+          if (rightChar == selected) {
+            range.end.column++;
+            return range;
+          }
+        }
+      });
+
+      this.add("autoclosing", "insertion", function(
+        state,
+        action,
+        editor,
+        session,
+        text
+      ) {
+        if (text == ">") {
+          var position = editor.getSelectionRange().start;
+          var iterator = new TokenIterator(
+            session,
+            position.row,
+            position.column
+          );
+          var token = iterator.getCurrentToken() || iterator.stepBackward();
+          if (
+            !token ||
+            !(
+              is(token, "tag-name") ||
+              is(token, "tag-whitespace") ||
+              is(token, "attribute-name") ||
+              is(token, "attribute-equals") ||
+              is(token, "attribute-value")
+            )
+          )
+            return;
+          if (is(token, "reference.attribute-value")) return;
+          if (is(token, "attribute-value")) {
+            var tokenEndColumn =
+              iterator.getCurrentTokenColumn() + token.value.length;
+            if (position.column < tokenEndColumn) return;
+            if (position.column == tokenEndColumn) {
+              var nextToken = iterator.stepForward();
+              if (nextToken && is(nextToken, "attribute-value")) return;
+              iterator.stepBackward();
+            }
+          }
+
+          if (
+            /^\s*>/.test(session.getLine(position.row).slice(position.column))
+          )
+            return;
+          while (!is(token, "tag-name")) {
+            token = iterator.stepBackward();
+            if (token.value == "<") {
+              token = iterator.stepForward();
+              break;
+            }
+          }
+
+          var tokenRow = iterator.getCurrentTokenRow();
+          var tokenColumn = iterator.getCurrentTokenColumn();
+          if (is(iterator.stepBackward(), "end-tag-open")) return;
+
+          var element = token.value;
+          if (tokenRow == position.row)
+            element = element.substring(0, position.column - tokenColumn);
+
+          if (this.voidElements.hasOwnProperty(element.toLowerCase())) return;
+
+          return {
+            text: ">" + "</" + element + ">",
+            selection: [1, 1]
+          };
+        }
+      });
+
+      this.add("autoindent", "insertion", function(
+        state,
+        action,
+        editor,
+        session,
+        text
+      ) {
+        if (text == "\n") {
+          var cursor = editor.getCursorPosition();
+          var line = session.getLine(cursor.row);
+          var iterator = new TokenIterator(session, cursor.row, cursor.column);
+          var token = iterator.getCurrentToken();
+
+          if (token && token.type.indexOf("tag-close") !== -1) {
+            if (token.value == "/>") return;
+            while (token && token.type.indexOf("tag-name") === -1) {
+              token = iterator.stepBackward();
+            }
+
+            if (!token) {
+              return;
+            }
+
+            var tag = token.value;
+            var row = iterator.getCurrentTokenRow();
+            token = iterator.stepBackward();
+            if (!token || token.type.indexOf("end-tag") !== -1) {
+              return;
+            }
+
+            if (this.voidElements && !this.voidElements[tag]) {
+              var nextToken = session.getTokenAt(cursor.row, cursor.column + 1);
+              var line = session.getLine(row);
+              var nextIndent = this.$getIndent(line);
+              var indent = nextIndent + session.getTabString();
+
+              if (nextToken && nextToken.value === "</") {
+                return {
+                  text: "\n" + indent + "\n" + nextIndent,
+                  selection: [1, indent.length, 1, indent.length]
+                };
+              } else {
+                return {
+                  text: "\n" + indent
+                };
+              }
+            }
+          }
+        }
+      });
+    };
+
+    oop.inherits(XmlBehaviour, Behaviour);
+
+    exports.XmlBehaviour = XmlBehaviour;
+  }
+);
+
+ace.define(
+  "ace/mode/folding/xml",
+  [
+    "require",
+    "exports",
+    "module",
+    "ace/lib/oop",
+    "ace/lib/lang",
+    "ace/range",
+    "ace/mode/folding/fold_mode",
+    "ace/token_iterator"
+  ],
+  function(require, exports, module) {
+    "use strict";
+
+    var oop = require("../../lib/oop");
+    var lang = require("../../lib/lang");
+    var Range = require("../../range").Range;
+    var BaseFoldMode = require("./fold_mode").FoldMode;
+    var TokenIterator = require("../../token_iterator").TokenIterator;
+
+    var FoldMode = (exports.FoldMode = function(voidElements, optionalEndTags) {
+      BaseFoldMode.call(this);
+      this.voidElements = voidElements || {};
+      this.optionalEndTags = oop.mixin({}, this.voidElements);
+      if (optionalEndTags) oop.mixin(this.optionalEndTags, optionalEndTags);
+    });
+    oop.inherits(FoldMode, BaseFoldMode);
+
+    var Tag = function() {
+      this.tagName = "";
+      this.closing = false;
+      this.selfClosing = false;
+      this.start = { row: 0, column: 0 };
+      this.end = { row: 0, column: 0 };
+    };
+
+    function is(token, type) {
+      return token.type.lastIndexOf(type + ".xml") > -1;
+    }
+
+    (function() {
+      this.getFoldWidget = function(session, foldStyle, row) {
+        var tag = this._getFirstTagInLine(session, row);
+
+        if (!tag) return this.getCommentFoldWidget(session, row);
+
+        if (tag.closing || (!tag.tagName && tag.selfClosing))
+          return foldStyle == "markbeginend" ? "end" : "";
+
+        if (
+          !tag.tagName ||
+          tag.selfClosing ||
+          this.voidElements.hasOwnProperty(tag.tagName.toLowerCase())
+        )
+          return "";
+
+        if (this._findEndTagInLine(session, row, tag.tagName, tag.end.column))
+          return "";
+
+        return "start";
+      };
+
+      this.getCommentFoldWidget = function(session, row) {
+        if (
+          /comment/.test(session.getState(row)) &&
+          /<!-/.test(session.getLine(row))
+        )
+          return "start";
+        return "";
+      };
+      this._getFirstTagInLine = function(session, row) {
+        var tokens = session.getTokens(row);
+        var tag = new Tag();
+
+        for (var i = 0; i < tokens.length; i++) {
+          var token = tokens[i];
+          if (is(token, "tag-open")) {
+            tag.end.column = tag.start.column + token.value.length;
+            tag.closing = is(token, "end-tag-open");
+            token = tokens[++i];
+            if (!token) return null;
+            tag.tagName = token.value;
+            tag.end.column += token.value.length;
+            for (i++; i < tokens.length; i++) {
+              token = tokens[i];
+              tag.end.column += token.value.length;
+              if (is(token, "tag-close")) {
+                tag.selfClosing = token.value == "/>";
+                break;
+              }
+            }
+            return tag;
+          } else if (is(token, "tag-close")) {
+            tag.selfClosing = token.value == "/>";
+            return tag;
+          }
+          tag.start.column += token.value.length;
+        }
+
+        return null;
+      };
+
+      this._findEndTagInLine = function(session, row, tagName, startColumn) {
+        var tokens = session.getTokens(row);
+        var column = 0;
+        for (var i = 0; i < tokens.length; i++) {
+          var token = tokens[i];
+          column += token.value.length;
+          if (column < startColumn) continue;
+          if (is(token, "end-tag-open")) {
+            token = tokens[i + 1];
+            if (token && token.value == tagName) return true;
+          }
+        }
+        return false;
+      };
+      this._readTagForward = function(iterator) {
+        var token = iterator.getCurrentToken();
+        if (!token) return null;
+
+        var tag = new Tag();
+        do {
+          if (is(token, "tag-open")) {
+            tag.closing = is(token, "end-tag-open");
+            tag.start.row = iterator.getCurrentTokenRow();
+            tag.start.column = iterator.getCurrentTokenColumn();
+          } else if (is(token, "tag-name")) {
+            tag.tagName = token.value;
+          } else if (is(token, "tag-close")) {
+            tag.selfClosing = token.value == "/>";
+            tag.end.row = iterator.getCurrentTokenRow();
+            tag.end.column =
+              iterator.getCurrentTokenColumn() + token.value.length;
+            iterator.stepForward();
+            return tag;
+          }
+        } while ((token = iterator.stepForward()));
+
+        return null;
+      };
+
+      this._readTagBackward = function(iterator) {
+        var token = iterator.getCurrentToken();
+        if (!token) return null;
+
+        var tag = new Tag();
+        do {
+          if (is(token, "tag-open")) {
+            tag.closing = is(token, "end-tag-open");
+            tag.start.row = iterator.getCurrentTokenRow();
+            tag.start.column = iterator.getCurrentTokenColumn();
+            iterator.stepBackward();
+            return tag;
+          } else if (is(token, "tag-name")) {
+            tag.tagName = token.value;
+          } else if (is(token, "tag-close")) {
+            tag.selfClosing = token.value == "/>";
+            tag.end.row = iterator.getCurrentTokenRow();
+            tag.end.column =
+              iterator.getCurrentTokenColumn() + token.value.length;
+          }
+        } while ((token = iterator.stepBackward()));
+
+        return null;
+      };
+
+      this._pop = function(stack, tag) {
+        while (stack.length) {
+          var top = stack[stack.length - 1];
+          if (!tag || top.tagName == tag.tagName) {
+            return stack.pop();
+          } else if (this.optionalEndTags.hasOwnProperty(top.tagName)) {
+            stack.pop();
+            continue;
+          } else {
+            return null;
+          }
+        }
+      };
+
+      this.getFoldWidgetRange = function(session, foldStyle, row) {
+        var firstTag = this._getFirstTagInLine(session, row);
+
+        if (!firstTag) {
+          return (
+            this.getCommentFoldWidget(session, row) &&
+            session.getCommentFoldRange(row, session.getLine(row).length)
+          );
+        }
+
+        var isBackward = firstTag.closing || firstTag.selfClosing;
+        var stack = [];
+        var tag;
+
+        if (!isBackward) {
+          var iterator = new TokenIterator(session, row, firstTag.start.column);
+          var start = {
+            row: row,
+            column: firstTag.start.column + firstTag.tagName.length + 2
+          };
+          if (firstTag.start.row == firstTag.end.row)
+            start.column = firstTag.end.column;
+          while ((tag = this._readTagForward(iterator))) {
+            if (tag.selfClosing) {
+              if (!stack.length) {
+                tag.start.column += tag.tagName.length + 2;
+                tag.end.column -= 2;
+                return Range.fromPoints(tag.start, tag.end);
+              } else continue;
+            }
+
+            if (tag.closing) {
+              this._pop(stack, tag);
+              if (stack.length == 0) return Range.fromPoints(start, tag.start);
+            } else {
+              stack.push(tag);
+            }
+          }
+        } else {
+          var iterator = new TokenIterator(session, row, firstTag.end.column);
+          var end = {
+            row: row,
+            column: firstTag.start.column
+          };
+
+          while ((tag = this._readTagBackward(iterator))) {
+            if (tag.selfClosing) {
+              if (!stack.length) {
+                tag.start.column += tag.tagName.length + 2;
+                tag.end.column -= 2;
+                return Range.fromPoints(tag.start, tag.end);
+              } else continue;
+            }
+
+            if (!tag.closing) {
+              this._pop(stack, tag);
+              if (stack.length == 0) {
+                tag.start.column += tag.tagName.length + 2;
+                if (
+                  tag.start.row == tag.end.row &&
+                  tag.start.column < tag.end.column
+                )
+                  tag.start.column = tag.end.column;
+                return Range.fromPoints(tag.start, end);
+              }
+            } else {
+              stack.push(tag);
+            }
+          }
+        }
+      };
+    }.call(FoldMode.prototype));
+  }
+);
+
+ace.define(
+  "ace/mode/xml",
+  [
+    "require",
+    "exports",
+    "module",
+    "ace/lib/oop",
+    "ace/lib/lang",
+    "ace/mode/text",
+    "ace/mode/xml_highlight_rules",
+    "ace/mode/behaviour/xml",
+    "ace/mode/folding/xml",
+    "ace/worker/worker_client"
+  ],
+  function(require, exports, module) {
+    "use strict";
+
+    var oop = require("../lib/oop");
+    var lang = require("../lib/lang");
+    var TextMode = require("./text").Mode;
+    var XmlHighlightRules = require("./xml_highlight_rules").XmlHighlightRules;
+    var XmlBehaviour = require("./behaviour/xml").XmlBehaviour;
+    var XmlFoldMode = require("./folding/xml").FoldMode;
+    var WorkerClient = require("../worker/worker_client").WorkerClient;
+
+    var Mode = function() {
+      this.HighlightRules = XmlHighlightRules;
+      this.$behaviour = new XmlBehaviour();
+      this.foldingRules = new XmlFoldMode();
+    };
+
+    oop.inherits(Mode, TextMode);
+
+    (function() {
+      this.voidElements = lang.arrayToMap([]);
+
+      this.blockComment = { start: "<!--", end: "-->" };
+
+      this.createWorker = function(session) {
+        var worker = new WorkerClient(["ace"], "ace/mode/xml_worker", "Worker");
+        worker.attachToDocument(session.getDocument());
+
+        worker.on("error", function(e) {
+          session.setAnnotations(e.data);
+        });
+
+        worker.on("terminate", function() {
+          session.clearAnnotations();
+        });
+
+        return worker;
+      };
+
+      this.$id = "ace/mode/xml";
+    }.call(Mode.prototype));
+
+    exports.Mode = Mode;
+  }
+);
+(function() {
+  ace.require(["ace/mode/xml"], function(m) {
+    if (typeof module == "object" && typeof exports == "object" && module) {
+      module.exports = m;
+    }
+  });
+})();

playground/libs/theme-monokai.js

@@ -0,0 +1,116 @@
+ace.define(
+  "ace/theme/monokai",
+  ["require", "exports", "module", "ace/lib/dom"],
+  function(require, exports, module) {
+    exports.isDark = true;
+    exports.cssClass = "ace-monokai";
+    exports.cssText =
+      ".ace-monokai .ace_gutter {\
+background: #2F3129;\
+color: #8F908A\
+}\
+.ace-monokai .ace_print-margin {\
+width: 1px;\
+background: #555651\
+}\
+.ace-monokai {\
+background-color: #272822;\
+color: #F8F8F2\
+}\
+.ace-monokai .ace_cursor {\
+color: #F8F8F0\
+}\
+.ace-monokai .ace_marker-layer .ace_selection {\
+background: #49483E\
+}\
+.ace-monokai.ace_multiselect .ace_selection.ace_start {\
+box-shadow: 0 0 3px 0px #272822;\
+}\
+.ace-monokai .ace_marker-layer .ace_step {\
+background: rgb(102, 82, 0)\
+}\
+.ace-monokai .ace_marker-layer .ace_bracket {\
+margin: -1px 0 0 -1px;\
+border: 1px solid #49483E\
+}\
+.ace-monokai .ace_marker-layer .ace_active-line {\
+background: #202020\
+}\
+.ace-monokai .ace_gutter-active-line {\
+background-color: #272727\
+}\
+.ace-monokai .ace_marker-layer .ace_selected-word {\
+border: 1px solid #49483E\
+}\
+.ace-monokai .ace_invisible {\
+color: #52524d\
+}\
+.ace-monokai .ace_entity.ace_name.ace_tag,\
+.ace-monokai .ace_keyword,\
+.ace-monokai .ace_meta.ace_tag,\
+.ace-monokai .ace_storage {\
+color: #F92672\
+}\
+.ace-monokai .ace_punctuation,\
+.ace-monokai .ace_punctuation.ace_tag {\
+color: #fff\
+}\
+.ace-monokai .ace_constant.ace_character,\
+.ace-monokai .ace_constant.ace_language,\
+.ace-monokai .ace_constant.ace_numeric,\
+.ace-monokai .ace_constant.ace_other {\
+color: #AE81FF\
+}\
+.ace-monokai .ace_invalid {\
+color: #F8F8F0;\
+background-color: #F92672\
+}\
+.ace-monokai .ace_invalid.ace_deprecated {\
+color: #F8F8F0;\
+background-color: #AE81FF\
+}\
+.ace-monokai .ace_support.ace_constant,\
+.ace-monokai .ace_support.ace_function {\
+color: #66D9EF\
+}\
+.ace-monokai .ace_fold {\
+background-color: #A6E22E;\
+border-color: #F8F8F2\
+}\
+.ace-monokai .ace_storage.ace_type,\
+.ace-monokai .ace_support.ace_class,\
+.ace-monokai .ace_support.ace_type {\
+font-style: italic;\
+color: #66D9EF\
+}\
+.ace-monokai .ace_entity.ace_name.ace_function,\
+.ace-monokai .ace_entity.ace_other,\
+.ace-monokai .ace_entity.ace_other.ace_attribute-name,\
+.ace-monokai .ace_variable {\
+color: #A6E22E\
+}\
+.ace-monokai .ace_variable.ace_parameter {\
+font-style: italic;\
+color: #FD971F\
+}\
+.ace-monokai .ace_string {\
+color: #E6DB74\
+}\
+.ace-monokai .ace_comment {\
+color: #75715E\
+}\
+.ace-monokai .ace_indent-guide {\
+background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y\
+}";
+
+    var dom = require("../lib/dom");
+    dom.importCssString(exports.cssText, exports.cssClass);
+  }
+);
+(function() {
+  ace.require(["ace/theme/monokai"], function(m) {
+    if (typeof module == "object" && typeof exports == "object" && module) {
+      module.exports = m;
+    }
+  });
+})();

playground/playground.css

@@ -0,0 +1,194 @@
+/* GENERIC STUFF  ****************************************/
+html,
+body {
+  height: 100%;
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+body {
+  margin: 0;
+}
+
+.btn {
+  cursor: pointer;
+  padding: 5px;
+  margin: 5px;
+}
+
+/* APPLICATION ROOT ****************************************/
+.playground {
+  display: grid;
+  height: 100%;
+  width: 100%;
+  grid-template-columns: auto 8px 100%;
+}
+
+/* LEFT BAR ****************************************/
+.left-bar {
+  display: flex;
+  flex-direction: column;
+  background-color: #2f3129;
+}
+
+.left-bar.split {
+  grid-template-rows: 50px 60% 23px 30%;
+}
+
+.menubar {
+  background-color: #1c2128;
+  color: white;
+  font-size: 18px;
+  display: flex;
+  flex: 0 0 50px;
+  flex-direction: row-reverse;
+  align-items: center;
+  user-select: none;
+}
+
+.menubar select {
+  margin: 10px;
+  font-size: 16px;
+  height: 25px;
+}
+
+.run-code {
+  margin-right: 12px;
+  height: 25px;
+  border: 2px solid transparent;
+  opacity: 0.9;
+}
+
+.run-code:hover {
+  opacity: 1;
+}
+
+.flash {
+  background-position: center;
+  transition: background 0.5s;
+}
+
+.flash:active {
+  background-color: #41454a;
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.layout-selector {
+  cursor: pointer;
+  padding: 5px;
+  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 {
+  flex: 2 2 auto;
+  position: relative;
+}
+
+.separator.horizontal + .tabbed-editor {
+  flex: 1 1 auto;
+}
+
+.tabBar {
+  color: white;
+  height: 22px;
+  margin-top: -22px;
+  padding-left: 5px;
+  user-select: none;
+  width: 170px;
+}
+
+.tabBar.resizeable {
+  cursor: row-resize;
+  width: 100%;
+}
+
+.tab {
+  display: inline-block;
+  cursor: pointer;
+  padding: 0 8px;
+  font-size: 16px;
+  line-height: 20px;
+  width: 34px;
+  text-align: center;
+  border-bottom: 2px solid transparent;
+  text-transform: uppercase;
+}
+
+.tab.active {
+  border-bottom: 2px solid gray;
+}
+
+.code-editor {
+  margin-top: 8px;
+  height: calc(100% - 10px);
+}
+
+/* SEPARATOR ****************************************/
+
+.separator {
+  background-color: #1c2128;
+  cursor: col-resize;
+}
+
+.separator.horizontal {
+  height: 20px;
+}
+
+/* RIGHT PANE ****************************************/
+.right-pane {
+  background-color: bisque;
+  overflow: hidden;
+}
+
+.right-pane iframe {
+  background-color: white;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.right-pane iframe.disabled {
+  pointer-events: none;
+}
+
+.content {
+  height: 100%;
+}
+.right-pane .welcome {
+  text-align: center;
+  font-size: 30px;
+  color: gray;
+  margin-top: 50px;
+}
+
+.right-pane .url {
+  font-size: 20px;
+  margin-top: 20px;
+}
+
+.url a {
+  color: gray;
+}
+
+.right-pane .note {
+  font-size: 18px;
+  text-align: left;
+  margin-top: 20px;
+  padding: 5%;
+}
+

playground/templates.xml

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

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

release-notes.md

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

rollup.config.js

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

src/component.ts

@@ -1,431 +0,0 @@
-import { EventBus } from "./event_bus";
-import { Observer } from "./observer";
-import { QWeb } from "./qweb";
-import { idGenerator } from "./utils";
-import { h, patch, VNode } from "./vdom";
-
-let getId = idGenerator();
-
-//------------------------------------------------------------------------------
-// Types/helpers
-//------------------------------------------------------------------------------
-
-export interface Env {
-  qweb: QWeb;
-}
-
-export 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;
-}
-
-export interface Type<T> extends Function {
-  new (...args: any[]): T;
-}
-
-//------------------------------------------------------------------------------
-// Widget
-//------------------------------------------------------------------------------
-
-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 = getId();
-    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
-   */
-  willPatch() {}
-
-  /**
-   * 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.
-   */
-  patched() {}
-
-  /**
-   * 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
-  //--------------------------------------------------------------------------
-
-  /**
-   * Attach a child widget to a given html element
-   *
-   * This is most of the time not necessary, since widgets should primarily be
-   * created/managed with the t-widget directive in a qweb template.  However,
-   * for the cases where we need more control, this method will do what is
-   * necessary to make sure all the proper hooks are called (for example,
-   * mounted/willUnmount)
-   *
-   * Note that this method makes a few assumptions:
-   * - the child widget is indeed a child of the current widget
-   * - the target is inside the dom of the current widget (typically a ref)
-   */
-  attachChild(child: Component<T, any, any>, target: HTMLElement) {
-    target.appendChild(child.el!);
-    child.__mount();
-  }
-
-  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._visitSubTree(w => {
-        if (!w.__owl__.isMounted && this.el!.contains(w.el)) {
-          w.__owl__.isMounted = true;
-          w.mounted();
-          return true;
-        }
-        return false;
-      });
-    }
-  }
-
-  unmount() {
-    if (this.el) {
-      this._visitSubTree(w => {
-        if (w.__owl__.isMounted) {
-          w.willUnmount();
-          w.__owl__.isMounted = false;
-          return true;
-        }
-        return false;
-      });
-      this.el.remove();
-    }
-  }
-
-  async render(force: boolean = false): Promise<void> {
-    if (this.__owl__.isDestroyed) {
-      return;
-    }
-    const renderVDom = this._render(force);
-    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.
-      this._patch(vnode);
-    }
-  }
-
-  destroy() {
-    if (!this.__owl__.isDestroyed) {
-      for (let id in this.__owl__.children) {
-        this.__owl__.children[id].destroy();
-      }
-      if (this.__owl__.isMounted) {
-        this.willUnmount();
-      }
-      if (this.el) {
-        this.el.remove();
-        this.__owl__.isMounted = false;
-        delete this.__owl__.vnode;
-      }
-      if (this.__owl__.parent) {
-        let id = this.__owl__.id;
-        delete this.__owl__.parent.__owl__.children[id];
-        this.__owl__.parent = null;
-      }
-      this.clear();
-      this.__owl__.isDestroyed = true;
-    }
-  }
-
-  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);
-    }
-  }
-
-  async updateProps(
-    nextProps: Props,
-    forceUpdate: boolean = false
-  ): Promise<void> {
-    const shouldUpdate = forceUpdate || this.shouldUpdate(nextProps);
-    return shouldUpdate ? this._updateProps(nextProps) : Promise.resolve();
-  }
-
-  set(target: any, key: string | number, value: any) {
-    this.__owl__.observer!.set(target, key, value);
-  }
-
-  //--------------------------------------------------------------------------
-  // Private
-  //--------------------------------------------------------------------------
-
-  async _updateProps(nextProps: Props): Promise<void> {
-    await this.willUpdateProps(nextProps);
-    this.props = nextProps;
-    await this.render();
-  }
-
-  _patch(vnode) {
-    this.__owl__.renderPromise = null;
-    if (this.__owl__.vnode) {
-      this.willPatch();
-      this.__owl__.vnode = patch(this.__owl__.vnode, vnode);
-      this.patched();
-    } else {
-      this.__owl__.vnode = patch(document.createElement(vnode.sel!), vnode);
-    }
-  }
-  async _prepare(): Promise<VNode> {
-    this.__owl__.renderProps = this.props;
-    this.__owl__.renderPromise = this.willStart().then(() => {
-      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._observeState();
-      return this._render();
-    });
-    return this.__owl__.renderPromise;
-  }
-
-  async _render(force: boolean = false): Promise<VNode> {
-    this.__owl__.renderId++;
-    const promises: Promise<void>[] = [];
-    const template = this.inlineTemplate || this.template;
-    if (this.__owl__.observer) {
-      this.__owl__.observer.allowMutations = false;
-    }
-    let vnode = this.env.qweb.render(template, this, {
-      promises,
-      handlers: this.__owl__.boundHandlers,
-      forceUpdate: force
-    });
-    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);
-    this.__mount();
-    return this.__owl__.vnode;
-  }
-
-  __mount() {
-    if (this.__owl__.isMounted) {
-      return;
-    }
-    this._observeState();
-    if (this.__owl__.parent) {
-      if (this.__owl__.parent!.__owl__.isMounted) {
-        this.__owl__.isMounted = true;
-        this.mounted();
-        const children = this.__owl__.children;
-        for (let id in children) {
-          children[id].__mount();
-        }
-      }
-    }
-  }
-
-  _visitSubTree(callback: (w: Component<T, any, any>) => boolean) {
-    const shouldVisitChildren = callback(this);
-    if (shouldVisitChildren) {
-      const children = this.__owl__.children;
-      for (let id in children) {
-        children[id]._visitSubTree(callback);
-      }
-    }
-  }
-
-  _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

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

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

src/observer.ts

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

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

@@ -1,175 +0,0 @@
-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;");
-}
-
-/**
- * Remove trailing and leading spaces
- */
-export function htmlTrim(s: string): string {
-  let result = s.replace(/(^\s+|\s+$)/g, "");
-  if (s[0] === " ") {
-    result = " " + result;
-  }
-  if (result !== " " && s[s.length - 1] === " ") {
-    result = result + " ";
-  }
-  return result;
-}
-
-/**
- * Create a function that will generate unique id numbers
- */
-export function idGenerator(): () => number {
-  let nextID = 1;
-  return () => nextID++;
-}
-
-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);
-    }
-  };
-}
-
-interface Tree<T> {
-  children: T[];
-}
-
-/**
- * Find a node in a tree.
- *
- * This will traverse the tree (depth first) and return the first child that
- * matches the predicate, if any
- */
-export function findInTree<T extends Tree<T>>(
-  tree: T,
-  predicate: (t: T) => boolean
-): T | null {
-  if (predicate(tree)) {
-    return tree;
-  }
-  for (let child of tree.children) {
-    let match = findInTree(child, predicate);
-    if (match) {
-      return match;
-    }
-  }
-  return null;
-}
-
-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;
-}

src/vdom.ts

@@ -1,921 +0,0 @@
-
-// 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
-  fn?: () => VNode; // for thunks
-  args?: Array<any>; // for thunks
-  [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

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

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

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

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

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

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

@@ -1,148 +0,0 @@
-import {
-  escape,
-  htmlTrim,
-  idGenerator,
-  memoize,
-  debounce,
-  findInTree,
-  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("htmlTrim", () => {
-  test("basic use", () => {
-    expect(htmlTrim("abc")).toBe("abc");
-    expect(htmlTrim("  abc")).toBe(" abc");
-    expect(htmlTrim("abc  ")).toBe("abc ");
-    expect(htmlTrim("   abc   ")).toBe(" abc ");
-    expect(htmlTrim("abc\n   ")).toBe("abc ");
-    expect(htmlTrim("\n ")).toBe(" ");
-    expect(htmlTrim(" \n ")).toBe(" ");
-    expect(htmlTrim("  ")).toBe(" ");
-    expect(htmlTrim("")).toBe("");
-  });
-});
-
-describe("idGenerator", () => {
-  test("basic use", () => {
-    let gen = idGenerator();
-    expect(gen()).toBe(1);
-    expect(gen()).toBe(2);
-    expect(gen()).toBe(3);
-  });
-});
-
-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("findInTree", () => {
-  test("can find stuff in tree", () => {
-    let tree = {
-      id: 1,
-      children: [{ id: 2, children: [] }, { id: 3, key: "hello", children: [] }]
-    };
-    const match1 = findInTree(tree, t => t.id === 3);
-    expect((<any>match1).key).toBe("hello");
-    const match2 = findInTree(tree, t => t.id === 4);
-    expect(match2).toBe(null);
-  });
-});
-
-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

@@ -1,20 +0,0 @@
-{
-  "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"]
-}