{
    "info": {
        "author": "St\u00e9phane \"Twidi\" Angel",
        "author_email": "s.angel@twidi.com",
        "bugtrack_url": null,
        "classifiers": [
            "Development Status :: 5 - Production/Stable",
            "License :: OSI Approved :: MIT License",
            "Programming Language :: Python",
            "Programming Language :: Python :: 3",
            "Programming Language :: Python :: 3.6",
            "Programming Language :: Python :: 3 :: Only"
        ],
        "description": "####\nMIXT\n####\n\nWrite html components directly in python and you have a beautiful but controversial MIXTure.\n\nYes, **controversial**.\n\n**If you don't like it, ignore it** (but you can use this without the html-in-python part, see below ;))\n\n*Based* on `pyxl <https://github.com/gvanrossum/pyxl3/>`_. Python 3.6+ only, and use typing for data validation.\n\nOnce you have your html, you can do whatever you want with it. Think of it as a replacement for your classic template engine.\n\n**Source code**: `<https://github.com/twidi/mixt/>`_\n\n**Documentation**: `<https://twidi.github.io/mixt/>`_\n\n**PyPI**: `<https://pypi.org/project/mixt/>`_\n\n**CI** (CircleCi): `<https://circleci.com/gh/twidi/workflows/mixt/>`_\n\n***********\nBasic usage\n***********\n\nLet's create a file ``example.py``\n\n.. code-block:: python\n\n   # coding: mixt\n\n   from mixt import html, Element, Required\n\n   class Hello(Element):\n       class PropTypes:\n           name: Required[str]\n\n       def render(self, context):\n           return <div>Hello, {self.name}</div>\n\n   print(<Hello name=\"World\"/>)\n\n\nAnd execute it:\n\n.. code-block:: shell\n\n   $ python example.py\n   <div>Hello, World</div>\n\n\nIf you don't like to write html in python, you can still use it:\n\n.. code-block:: python\n\n   from mixt import html, Element, Required\n\n   class Hello(Element):\n       class PropTypes:\n           name: Required[str]\n\n       def render(self, context):\n           return html.Div()(\"Hello, \", self.name)\n\n   print(Hello(name=\"World\"))\n\n\n********\nFeatures\n********\n\nYes it is inspired by React (in fact, mainly JSX) and we borrow some of the concept:\n\n- props and PropTypes with validation\n- dev-mode to validate props in dev but not in production to speed things up (your tests should have tested that everything is ok)\n- context\n- class components or simple function components\n- high order components\n\nAnd we added:\n\n- css/js collectors\n\n\n************\nInstallation\n************\n\nRun these two commands. The second one will tell python how to understand files with html inside.\n\n.. code-block:: shell\n\n   pip install mixt\n   mixt-post-install\n\nTo check that everything is ready, run:\n\n.. code-block:: shell\n\n   python -m mixt.examples.simple\n\nYou should have this output:\n\n.. code-block:: html\n\n   <div title=\"Greeting\">Hello, World</div>\n\nIf you don't want to use the html-in-python stuff, don't run ``mixt-post-install``. And then test with (to have the same output):\n\n.. code-block:: shell\n\n   python -m mixt.examples.simple_pure_python\n\n**********\nContribute\n**********\n\nClone the git project then:\n\n.. code-block:: shell\n\n   make dev\n\n\nTo check that everything is ready, run:\n\n.. code-block:: shell\n\n   python -m mixt.examples.simple\n\n\nYou should have this output:\n\n.. code-block:: html\n\n   <div title=\"Greeting\">Hello, World</div>\n\n\nAfter having done some code:\n\n.. code-block:: shell\n\n    make tests\n\n\n.. code-block:: shell\n\n    make lint\n\n\nIf you touch things in the ``codec`` directory, you'll have to run ``make dev`` (or at least ``make full-clean``) to purge the ``pyc`` python files.\n\nNote that our CI will check that every commit passes the ``make lint``, ``make tests`` and ``make check-doc``. So don't forget to run these for each commit.\n\nOne way to do it before pushing is:\n\n.. code-block:: shell\n\n    git rebase develop --exec 'git log -n 1; make checks'\n\n\n**********\nUser Guide\n**********\n\nNote: You can find the *final* code of this user guide in ``src/mixt/examples/user_guide`` (you'll find ``mixt.py`` and ``pure_python.py``).\n\nRun it with:\n\n.. code-block:: shell\n\n    python -m mixt.examples.user_guide\n\n\nStart\n=====\n\nLet's create a... todo list, yeah!\n\nBut before, remember. This is not React, it's not on the browser and there is no Javascript involved here. We only talk about rendering some HTML.\n\nBut you can do what you want with it. Add javascript handlers, simple forms...\n\nTalking about forms...\n\nIn a todo list, we want to be able to add a todo. It's a simple text input.\n\nSo let's create our first component, the ``TodoForm``. We want a form with an input text and a button.\n\nA component is a subclass of the ``Element`` class, with a ``render`` method you have to write.\n\n.. code-block:: python\n\n    # coding: mixt\n\n    from mixt import Element, html  # html is mandatory to resolve html tags\n\n    class TodoForm(Element):\n\n        def render(self, context):  # Ignore the ``context`` argument for now.\n            return \\  # The ``\\`` is only for a better indentation below\n                <form method=\"post\" action=\"???\">\n                    <label>New Todo: </label><itext name=\"todo\" />\n                    <button type=\"submit\">Add</button>\n                </form>\n\n\nNote that this could have been written as a simple function:\n\n.. code-block:: python\n\n    # coding: mixt\n\n    from mixt import Element, html\n\n    def TodoForm():\n        return \\\n            <form method=\"post\" action=\"???\">\n                <label>New Todo: </label><itext name=\"todo\" />\n                <button type=\"submit\">Add</button>\n            </form>\n\n\nWhen print the component, these two will give the same result:\n\n.. code-block:: python\n\n    print(<TodoForm />)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"???\"><label>New Todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nSpacing\n=======\n\nNotice how it is formatted: no space between tags. In fact, it's `like in JSX <https://reactjs.org/docs/jsx-in-depth.html#string-literals-1>`_:\n\n    JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space\n\nTo add a space, or a newline, you can pass some python. Let's, as an example, add a newline before the label:\n\n.. code-block:: python\n\n    #...\n                <form method=\"post\" action=\"???\">\n                    {'\\n'}<label>New Todo: </label><itext name=\"todo\" />\n    #...\n\n\nNow we have this output:\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"/todo/add\">\n    <label>New Todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nProps\n=====\n\nNow let's go further.\n\nNotice the ``action`` attribute of the form. We need to pass something. But hard-coding it does not sound right. Wwe need to pass it to the component.\n\n``Mixt`` has, like ``React``, the concept of properties, aka \"props\".\n\n\nPropTypes class\n---------------\n\nIn ``Mixt``, we define them with a type, in a class inside our component, named ``PropTypes``:\n\n.. code-block:: python\n\n    class TodoForm(Element):\n\n        class PropTypes:\n            add_url: str\n\n        def render(self, context):\n            return \\\n                <form method=\"post\" action={self.add_url}>\n                    <label>New Todo: </label><itext name=\"todo\" />\n                    <button type=\"submit\">Add</button>\n                </form>\n\n\nHere we defined a prop named ``add_url`` which must be a string (``str``). This uses the `python typing syntax <https://docs.python.org/3.6/library/typing.html>`_.\n\nAnd notice how we changed the ``action`` attribute of the ``form`` tag. It's now ``{self.add_url}`` instead of ``\"???\"``.\n\nWhen attributes are passed between curly braces, they are interpreted as pure python at run-time. In fact, as the ``mixt`` parser will convert the whole file to pure python before letting the python interpreter running it, it will stay the same, only the html around will be converted. So there is no penalty to do this.\n\n\nProps and children\n------------------\n\nLook how this would look like if our component was written in pure python:\n\n.. code-block:: python\n\n    from mixt import Element, html\n\n    class TodoForm(Element):\n\n        class PropTypes:\n            add_url: str\n\n        def render(self, context):\n            return html.Form(method='post', action=self.add_url )(\n                html.Label()(\n                    html.Raw(\"New Todo: \")\n                ),\n                html.InputText(name='todo'),\n                html.Button(type='submit')(\n                    html.Raw(\"Add\")  # or html.Rawhtml(text=\"Add\")\n                ),\n            )\n\n\nNotice how the props are passed to a component as named arguments and how ``action`` is passed: ``action=self.add_url``.\n\nThis pure-python component also shows you how it works: props are passed as named argument to the component class, then this component is called, passing children components as positional arguments to the call:\n\n.. code-block:: python\n\n    ComponentClass(prop1=\"val1\", prop2=\"val2\")(\n        Children1(),\n        Children2(),\n    )\n\nWhat are children? Children are tags inside other tags.\n\nIn ``<div id=\"divid\"><span /><p>foo</p></div>``, we have:\n\n- a ``html.Div`` component, with a prop ``id`` and two children:\n\n  - a ``html.Span`` component, without children\n  - a ``html.P`` component with one child:\n\n    - a ``html.RawHtml`` component with the text \"foo\"\n\n\nNote that you can play with props and children. First the version in pure-python to show how it works:\n\n.. code-block:: python\n\n    def render(self, context):\n        props = {\"prop1\": \"val1\", \"prop2\": \"val2\"}\n        children = [Children1(), Children2()]\n\n        return ComponentClass(**props)(*children)\n        # You can pass a list of children to to the call, so this would produce the same result:\n        # ComponentClass(**props)(children)\n\n\nThen the ``mixt`` version:\n\n.. code-block:: python\n\n    def render(self, context):\n        props = {\"prop1\": \"val1\", \"prop2\": \"val2\"}\n        children = [<Children1/>, <Children2/>]\n\n        return <ComponentClass {**props}>{*children}</ComponentClass>\n        # or, the same, passing the children as a list:\n        # return <ComponentClass {**props}>{children}</ComponentClass>\n\n\nPassing props\n-------------\n\nNow let's go back to our props ``add_url``.\n\nHow to pass it to the component?\n\nThe exact same way we passed attributes to HTML tags: they are in fact props defined in the HTML compoments (defined in ``mixt.html``). We support every HTML tags that, at the time of the writing, are valid (not deprecated) in HTML5, with their attributes (excluding the deprecated ones).\n\nSo let's do this:\n\n.. code-block:: python\n\n    print(<TodoForm add_url=\"/todo/add\"/>)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"/todo/add\"><label>New Todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\nOK, we have our prop present in the rendered HTML.\n\nValidation\n----------\n\nWhat if we don't pass a string? We said in ``PropTypes`` that we wanted a string...\n\nNumbers\n^^^^^^^\n\nLet's try it:\n\n.. code-block:: python\n\n    print(<TodoForm add_url=1/>)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"1\"><label>New Todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nIt works! But... it's not a string!! In fact, there is a special case for numbers, you can pass them as numbers instead of strings and they are converted if needed...\n\n\nBooleans and other special cases\n^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\nSo let's try something else.\n\n.. code-block:: python\n\n    print(<TodoForm add_url=True/>)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropValueError:\n    <TodoForm>.add_url: `True` is not a valid value for this prop (type: <class 'bool'>, expected: <class 'str'>)\n\n\nAnd it's the same if we pass ``True`` in python\n\n.. code-block:: python\n\n    print(<TodoForm add_url={True}/>)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropValueError:\n    <TodoForm>.add_url: `True` is not a valid value for this prop (type: <class 'bool'>, expected: <class 'str'>)\n\n\nOk, let's trick the system and pass ``\"True\"``, as a string.\n\n.. code-block:: python\n\n    print(<TodoForm add_url=\"True\"/>)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropValueError:\n    <TodoForm>.add_url: `True` is not a valid value for this prop (type: <class 'bool'>, expected: <class 'str'>)\n\n\nStill the same, but here we passed a string! Yes but there are 4 values that are always evaluated to what they seems to be:\n\n- True\n- False\n- None\n- NotProvided (a special value meaning \"not set\" which is different that ``None``)\n\nThe only way to pass one of these values as a string, is to pass them via python, as a string:\n\n.. code-block:: python\n\n    print(<TodoForm add_url={\"True\"}/>)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"True\"><label>New Todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nExcept these 4 values, and numbers, every value that is passed to an attribute is considered a string. Even if there is no quotes, like in html in HTML5, where quotes are not mandatory for strings without some characters (no spaces, no ``/``...).\n\nTo pass something else, you must surround the value in curly braces (and in this cases there is no need for quotes around the curly braces.\n\n\nOk, now we are sure that we only accept string.... but what if I pass nothing? And... what is \"nothing\"?\n\nLet's start with an empty string in python:\n\n.. code-block:: python\n\n    print(<TodoForm add_url={\"\"}/>)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"\"><label>New Todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nOk it works, we wanted a string, we have a string.\n\nNow let's pass this empty string directly:\n\n.. code-block:: python\n\n    print(<TodoForm add_url=\"\"/>)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"\"><label>New Todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nIt still works, because it's still a string. Let's remove the quotes, to see.\n\n.. code-block:: python\n\n    print(<TodoForm add_url=/>)\n\n.. code-block:: python\n\n    mixt.exceptions.GeneralParserError: <mixt parser> Unclosed Tags: <TodoForm>\n\n\nHum yeah, this is not valid HTML. So let's remove the ``=``:\n\n.. code-block:: python\n\n    print(<TodoForm add_url/>)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropValueError:\n    <TodoForm>.add_url: `True` is not a valid value for this prop (type: <class 'bool'>, expected: <class 'str'>)\n\n\nWHAT? Yes, think about HTML5 attributes like ``required``, ``checked``... They only need to be present as an attribute, without value, to be considered ``True``. So when an attribute doesn't have any value, it's a boolean, and it's ``True``.\n\nIn addition to not pass a value, those two other ways are valid in HTML5 for a boolean to by ``True``:\n\n- pass an empty string: ``required=\"\"``\n- pass the name of the attribute: ``required=\"required\"``\n\nFor your convenience, we added another way:\n\n- pass ``True`` (case does not matter), as python or as a string: ``required=True``, ``required={True}``, ``required=\"true\"``\n\nAnd its counterpart, to pass ``False``:\n\n- pass ``False`` (case does not matter), as python or as a string: ``required=False``, ``required={False}``, ``required=\"false\"``\n\n\nRequired props\n--------------\n\nOk for the boolean attributes. It's not our case. The last thing we can do is to not set the attribute at all:\n\n.. code-block:: python\n\n    print(<TodoForm/>)\n    # this is the same: ``print(<TodoForm add_url=NotProvided />)```\n    # (``NotProvided`` must be imported from ``mixt``)\n\n.. code-block:: python\n\n    mixt.exceptions.UnsetPropError: <TodoForm>.add_url: prop is not set\n\n\nIt's understandable: we try to access a prop that is not set, of course we cannot use it.\n\n\nBut what if we don't access it? If we don't print the component, it won't be rendered:\n\n.. code-block:: python\n\n    <TodoForm/>\n\n.. code-block:: python\n\n    <TodoForm at 0x7fbd18ea5630>\n\n\nSo we can create an instance but it will fail at render time. But there is a way to prevent that.\n\nBy default, all properties are optional. And you don't have to use the ``Optional`` type from the python ``typing`` module for that, it would be cumbersome to do it for each prop.\n\nInstead, ``mixt`` provides a type named ``Required`` that you use the same way than ``Optionnal``.\n\n.. code-block:: python\n\n    from mixt import Element, Required, html\n\n    class TodoForm(Element):\n\n        class PropTypes:\n            add_url: Required[str]\n\n        def render(self, context):\n            # ...\n\n\nSo we just said we wanted a string, and that it is required.\n\nLet's try again to create it without the prop:\n\n.. code-block:: python\n\n    <TodoForm/>\n\n.. code-block:: python\n\n    mixt.exceptions.RequiredPropError: <TodoForm>.add_url: is a required prop but is not set\n\n\nNow we have the exception raised earlier in our program.\n\n\nDefault props\n-------------\n\nTo see other possibilities in props, let's add a new one to change the text label. But we don't want to make it required, and instead have a default value.\n\nFor this, it's as easy as adding a value to the prop in the ``PropTypes`` class:\n\n.. code-block:: python\n\n    class TodoForm(Element):\n\n        class PropTypes:\n            add_url: Required[str]\n            label: str = 'New Todo'\n\n        def render(self, context):\n            return \\\n                <form method=\"post\" action={self.add_url}>\n                    <label>{self.label}: </label><itext name=\"todo\" />\n                    <button type=\"submit\">Add</button>\n                </form>\n\n\nNow let's try it without passing the prop:\n\n.. code-block:: python\n\n    print(<TodoForm add_url=\"/todo/add\"/>)\n\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"\"><label>New Todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nAnd if we pass one:\n\n.. code-block:: python\n\n    print(<TodoForm add_url=\"/todo/add\" label=\"Thing to do\" />)\n\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"/todo/add\"><label>Thing to do: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nIt works as expected.\n\nNote that you cannot give a default value while having the prop ``Required``. It makes no sense, so it's checked as soon as possible, while the ``class`` is constructed:\n\n.. code-block:: python\n\n    class TodoForm(Element):\n\n        class PropTypes:\n            add_url: Required[str]\n            label: Required[str] = 'New Todo'\n\n.. code-block:: python\n\n    mixt.exceptions.PropTypeRequiredError: <TodoForm>.label: a prop with a default value cannot be required\n\n\nAnd of course the default value must match the type!\n\n.. code-block:: python\n\n    class TodoForm(Element):\n\n        class PropTypes:\n            add_url: Required[str]\n            label: str = {'label': 'foo'}\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropValueError:\n    <TodoForm>.label: `{'label': 'foo'}` is not a valid value for this prop (type: <class 'dict'>, expected: <class 'str'>)\n\n\nChoices\n-------\n\nAnother thing we want to do in our component is to let it construct the label, passing it a \"type\" of todo, but limiting the choices. For this we can use the ``Choices`` type:\n\n.. code-block:: python\n\n    from mixt import Choices, Element, Required, html\n\n\n    class TodoForm(Element):\n\n        class PropTypes:\n            add_url: Required[str]\n            type: Choices = ['todo', 'thing']\n\n        def render(self, context):\n\n            return \\\n                <form method=\"post\" action={self.add_url}>\n                    <label>New {self.type}: </label><itext name=\"todo\" />\n                    <button type=\"submit\">Add</button>\n                </form>\n\n\nLet's try it:\n\n.. code-block:: python\n\n    print(<TodoForm add_url=\"/todo/add\" type=\"todo\" />)\n    print(<TodoForm add_url=\"/todo/add\" type=\"thing\" />)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"/todo/add\"><label>New todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n    <form method=\"post\" action=\"/todo/add\"><label>New thing: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nAnd what if we try to pass something else than the available choices? It fails, as expected:\n\n.. code-block:: python\n\n    print(<TodoForm add_url=\"/todo/add\" type=\"stuff\" />)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropChoiceError: <TodoForm>.type: `stuff` is not a valid choice for this prop (must be in ['todo', 'thing'])\n\n\nDefault choices\n---------------\n\nBut maybe we don't want to pass it and use a default value. What would the result be?\n\n.. code-block:: python\n\n    print(<TodoForm add_url=\"/todo/add\" />)\n\n.. code-block:: python\n\n    mixt.exceptions.UnsetPropError: <TodoForm>.type: prop is not set\n\n\nSo we have to mark the ``type`` prop as required:\n\n.. code-block:: python\n\n    class PropTypes:\n        add_url: Required[str]\n        type: Required[Choices] = ['todo', 'thing']\n\n\nSo if we don't pass it, it fails earlier:\n\n.. code-block:: python\n\n    print(<TodoForm add_url=\"/todo/add\" />)\n\n.. code-block:: python\n\n    mixt.exceptions.RequiredPropError: <TodoForm>.type: is a required prop but is not set\n\n\nBut it's not what we want, we want a default value.\n\nIn fact, you noticed that for types other than ``Choices``, setting a value in ``PropTypes`` gives us a default value. But for ``Choices`` it's different, as the value is the list of choices.\n\nFor this, we have ``DefaultChoices``: it work the same as ``Choices``, but use the first entry in the list as the default value. And of course, as with other types having default, it cannot be ``Required``.\n\nLet's try it:\n\n.. code-block:: python\n\n    from mixt import DefaultChoices, Element, Required, html\n\n\n    class TodoForm(Element):\n\n        class PropTypes:\n            add_url: Required[str]\n            type: DefaultChoices = ['todo', 'thing']\n\n\n.. code-block:: python\n\n    print(<TodoForm add_url=\"/todo/add\" />)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"/todo/add\"><label>New todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\nIt works as expected.\n\n\nAdvanced types\n--------------\n\nUntil then, we used simple types, but you can use more complicated ones.\n\nSo for example, we'll make the ``add_url`` prop to accept a function that will compute the url for us based on the ``type`` prop. But we also want to allow strings, and with a default value.\n\nWe can do that, with typing. Our function will take a string, the ``type`` and will return a string, the url.\n\nSo the `syntax <https://docs.python.org/3.6/library/typing.html#typing.Callable>`_ is ``Callable[[str], str]`` for the callable, and we use ``Union`` to accept things of type ``Callable`` or ``str``:\n\n.. code-block:: python\n\n    from typing import Union, Callable\n    from mixt import DefaultChoices, Element, Required, html\n\n\n    class TodoForm(Element):\n\n        class PropTypes:\n            add_url: Union[Callable[[str], str], str] = \"/todo/add\"\n            type: DefaultChoices = ['todo', 'thing']\n\n        def render(self, context):\n\n            if callable(self.add_url):\n                add_url = self.add_url(self.type)\n            else:\n                add_url = self.add_url\n\n            return \\\n                <form method=\"post\" action={add_url}>\n                    <label>New {self.type}: </label><itext name=\"todo\" />\n                    <button type=\"submit\">Add</button>\n                </form>\n\nFirst, let's try it without the ``add_url`` prop, as we have a default:\n\n.. code-block:: python\n\n    print(<TodoForm  />)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"/todo/add\"><label>New todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nIt should work too if we pass a string:\n\n.. code-block:: python\n\n    print(<TodoForm add_url=\"/todolist/add\" />)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"/todolist/add\"><label>New todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nAnd now we can pass a function:\n\n.. code-block:: python\n\n    def make_url(type):\n        return f\"/{type}/add\"\n\n    print(<TodoForm add_url={make_url} />)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropValueError: <TodoForm>.add_url:\n    `<function make_url at 0x7fe2ae87be18>` is not a valid value for this prop (type: <class 'function'>, expected: Union[Callable[[str], str], str])\n\n\nOh? Why? I passed a function accepting a string as argument and returning a string. Yes, but don't forget that types are checked! So we must add types to our function:\n\n.. code-block:: python\n\n    def make_url(type: str) -> str:\n        return f\"/{type}/add\"\n\n    print(<TodoForm add_url={make_url} />)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"/todo/add\"><label>New todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nAnd if we pass another type, the url should change accordingly:\n\n.. code-block:: python\n\n    print(<TodoForm add_url={make_url} type=\"thing\" />)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"/thing/add\"><label>New todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\nWe can even make this function the default value for our prop:\n\n.. code-block:: python\n\n    from typing import Union, Callable\n    from mixt import DefaultChoices, Element, Required, html\n\n\n    def make_url(type: str) -> str:\n        return f\"/{type}/add\"\n\n\n    class TodoForm(Element):\n\n        class PropTypes:\n            add_url: Union[Callable[[str], str], str] = make_url\n            type: DefaultChoices = ['todo', 'thing']\n\n        def render(self, context):\n\n            if callable(self.add_url):\n                add_url = self.add_url(self.type)\n            else:\n                add_url = self.add_url\n\n            return \\\n                <form method=\"post\" action={add_url}>\n                    <label>New {self.type}: </label><itext name=\"todo\" />\n                    <button type=\"submit\">Add</button>\n                </form>\n\n.. code-block:: python\n\n    print(<TodoForm />)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"/todo/add\"><label>New todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\n\ndev-mode\n========\n\nNow you may start wondering... python typing is cumbersome and validating may take away some of our precious time.\n\nLet's me answer that:\n\n1. No, typing is not cumbersome. It's really useful to spot bugs and add some self-documentation.\n2. Yes, it takes away some of our precious time. But we got you covered.\n\nBy default, ``mixt`` run in \"dev-mode\". And in dev-mode, props are validated when passed to a component. When you are NOT in \"dev-mode\", the validation is skipped. So in production, you can deactivate the dev-mode (we'll see how in a minute) and pass props very fast:\n\n- we don't check required props (but that would fail if you try to use it in your compoment)\n- we don't check if a ``Choices`` prop is, indeed, in the list of choices\n- we don't check the type at all, so for example if you want to pass a list for a string, it will work but with understandable strange things happening in your ``render`` method.\n\nBut you may say that it's in production that validation is important. Indeed. But of course your code is fully covered by tests, that you run in dev-mode, and so in production, you don't need this validation! And note that it's how React works, by the way, with ``NODE_ENV=production``.\n\nHow to change dev-mode? We don't enforce any environment variable but we propose some functions. It's up to you to call them:\n\n.. code-block:: python\n\n    from mixt import set_dev_mode, unset_dev_mode, override_dev_mode, in_dev_mode\n\n    # by default, dev-mode is active\n    assert in_dev_mode()\n\n    # you can unset the dev-mode\n    unset_dev_mode()\n    assert not in_dev_mode()\n\n    # and set it back\n    set_dev_mode()\n    assert in_dev_mode()\n\n    # set_dev_mode can take a boolean\n    set_dev_mode(False)\n    assert not in_dev_mode()\n\n    set_dev_mode(True)\n    assert in_dev_mode()\n\n    # and we have a context manager to override for a block\n    with override_dev_mode(False):\n        assert not in_dev_mode()\n        with override_dev_mode(True):\n            assert in_dev_mode()\n        assert not in_dev_mode()\n    assert in_dev_mode()\n\n\nSo let's try this with the ``type`` prop. Remember, it looks like:\n\n.. code-block:: python\n\n    type: DefaultChoices = ['todo', 'thing']\n\nWe try to pass another choice, first in dev-mode:\n\n.. code-block:: python\n\n    with override_dev_mode(True):\n        print(<TodoForm type=\"stuff\" />)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropChoiceError: <TodoForm>.type: `stuff` is not a valid choice for this prop (must be in ['todo', 'thing'])\n\nIt fails as expected.\n\nAnd now by deactivating dev-mode:\n\n.. code-block:: python\n\n    with override_dev_mode(False):\n        print(<TodoForm type=\"stuff\" />)\n\n.. code-block:: html\n\n    <form method=\"post\" action=\"/stuff/add\"><label>New stuff: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form>\n\nIt works, we have a todo type that was not in our choices that is used, and is in the ``action`` too. It's the work of your tests to ensure that you never pass invalid props, so you can be confident in production and deactivate dev-mode.\n\n\nComponents cascade\n==================\n\nNow we have our form. What other components do we need for our todo list app?\n\nOf course, we need a way to display a todo entry.\n\nBut what is a todo entry? Let's create a basic ``TodoObject``:\n\n.. code-block:: python\n\n    class TodoObject:\n        def __init__(self, text):\n            self.text = text\n\n\nIt's a very simple class, but you can use what you want, of course. It could be Django models, etc...\n\nSo we can create our ``Todo`` component, making it accept a required ``TodoObject`` as prop:\n\n.. code-block:: python\n\n    class Todo(Element):\n        class PropTypes:\n            todo: Required[TodoObject]\n\n        def render(self, context):\n            return <li>{self.todo.text}</li>\n\nAnd we can use it:\n\n.. code-block:: python\n\n    todo = TodoObject(\"foo\")\n    print(<Todo todo={todo} />)\n\n.. code-block:: html\n\n    <li>foo</li>\n\n\nNow we want to have a list of todos. Let's create a ``TodoList`` component that will accept as props a list of ``TodoObject``.\n\nBut what is different than our two other components, that only use html tags in their ``render`` method, it's that now we will encapsulate a component into another. Let's see how.\n\n.. code-block:: python\n\n    class TodoList(Element):\n\n        class PropTypes:\n            todos: Required[List[TodoObject]]\n\n        def render(self, context):\n            return <ul>{[<Todo todo={todo} /> for todo in self.todos]}</ul>\n\n\nYes, it's as simple as that: you use ``<Todo...>`` for the ``Todo`` component as you would use an HTML tag. The only difference is that for html tags, you don't need to import them directly (simple import ``html`` from ``mixt``), and by convention we write them in lower-case. For normal components, you have to import them (you can still do ``from mylib import components`` and ``<components.MyComponent ...>``) and use the exact case.\n\nNotice how we required a list, and passed it into the ``<ul>`` via a list-comprehension in curly-braces.\n\nYou can do things differently if you want.\n\nLike separating the list comprehension from the html:\n\n.. code-block:: python\n\n    def render(self, context):\n        todos = [\n            <Todo todo={todo} />\n            for todo\n            in self.todos\n        ]\n        return <ul>{todos}</ul>\n\nOr in a dedicated method (that would be useful for testing):\n\n.. code-block:: python\n\n    def render_todos(self, todos):\n        return [\n            <Todo todo={todo} />\n            for todo\n            in todos\n        ]\n\n    def render(self, context):\n        return <ul>{self.render_todos(self.todos)}</ul>\n\n\nIt's up to you: at the end it's just python.\n\nLet's see what is rendered by this component:\n\n.. code-block:: python\n\n    todos = [TodoObject(\"foo\"), TodoObject(\"bar\"), TodoObject(\"baz\")]\n    print(<TodoList todos={todos} />)\n\n.. code-block:: html\n\n    <ul><li>foo</li><li>bar</li><li>baz</li></ul>\n\n\nAnd finally we have our ``TodoApp`` component that encapsulate the form and the list:\n\n.. code-block:: python\n\n    class TodoApp(Element):\n\n        class PropTypes:\n            todos: Required[List[TodoObject]]\n            type: DefaultChoices = ['todo', 'thing']\n\n        def render(self, context):\n            return \\\n                <div>\n                    <h1>The \"{self.type}\" list</h1>\n                    <TodoForm type={self.type} />\n                    <TodoList todos={self.todos} />\n                </div>\n\n.. code-block:: python\n\n    todos = [TodoObject(\"foo\"), TodoObject(\"bar\"), TodoObject(\"baz\")]\n    print(<TodoList todos={todos} type=\"thing\" />)\n\n.. code-block:: html\n\n    <div><h1>The \"thing\" list</h1><form>...</form><ul><li>foo</li><li>bar</li><li>baz</li></ul></div>\n\n\nLet's pass this HTML to an HTML beautifier:\n\n.. code-block:: html\n\n    <div>\n        <h1>The \"thing\" list</h1>\n        <form method=\"post\" action=\"/thing/add\">\n            <label>New thing: </label>\n            <input type=\"text\" name=\"todo\" />\n            <button type=\"submit\">Add</button>\n        </form>\n        <ul>\n            <li>foo</li>\n            <li>bar</li>\n            <li>baz</li>\n        </ul>\n    </div>\n\nAnd that's it, we have our todo-list app! To use it in a page, just create a component that will render the html base markup and integrate the ``TodoApp`` component in it. You don't even need a component:\n\n.. code-block:: python\n\n    todos = [TodoObject(\"foo\"), TodoObject(\"bar\"), TodoObject(\"baz\")]\n\n    print(\n        <html>\n            <body>\n                <TodoApp todos={todos} type=\"thing\" />\n            </body>\n        </html>\n    )\n\nThe beautified output would be:\n\n.. code-block:: html\n\n    <html>\n\n    <body>\n        <div>\n            <h1>The \"thing\" list</h1>\n            <form method=\"post\" action=\"/thing/add\">\n                <label>New thing: </label>\n                <input type=\"text\" name=\"todo\" />\n                <button type=\"submit\">Add</button>\n            </form>\n            <ul>\n                <li>foo</li>\n                <li>bar</li>\n                <li>baz</li>\n            </ul>\n        </div>\n    </body>\n\n    </html>\n\n\nOverriding a component\n======================\n\nWe have a generic todo-list, but following the available types of todo, we may want to have a \"todo-list\" and a \"thing-list\".\n\nWe already have the todo list because our ``TodoApp`` has a type of ``todo`` by default.\n\nSo let's create a ``ThingApp``.\n\n\nInheritance\n-----------\n\nThe first way of doing this is to inherit from our ``TodoApp``. But by inheriting we cannot remove props from the parent (it's not really true, we'll see this later), so we still have the ``type`` prop by default. But we don't want to accept anything else than \"thing\". So we can redefine the ``type`` prop like this:\n\n.. code-block:: python\n\n    class ThingApp(TodoApp):\n        class PropTypes:\n            type: DefaultChoices = ['thing']\n\nLet's use this component:\n\n.. code-block:: python\n\n    print(<ThingApp todos={[TodoObject(\"foo\")]} />)\n\n.. code-block:: html\n\n    <div><h1>The \"thing\" list</h1><form method=\"post\" action=\"/thing/add\"><label>New todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form><ul><li>foo</li></ul></div>\n\nIf we try to pass \"todo\" for the ``type`` props, it won't work:\n\n.. code-block:: python\n\n    print(<ThingApp todos={[TodoObject(\"foo\")]} type=\"todo\" />)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropChoiceError:\n    <ThingApp>.type: `todo` is not a valid choice for this prop (must be in ['thing'])\n\nBut still, it's strange to be able to pass a type.\n\n\nParent components\n-----------------\n\nLet's try another way: A parent component. A component that does nothing else that doing things with its children and returning it. What we want here, is a component that will return a ``TodoApp`` with the ``type`` prop forced to \"thing\".\n\nLet's do this\n\n.. code-block:: python\n\n    class ThingApp(Element):\n        class PropTypes:\n            todos: Required[List[TodoObject]]\n\n        def render(self, context):\n            return <TodoApp todos={self.todos} type=\"thing\" />\n\n.. code-block:: python\n\n    print(<ThingApp todos={[TodoObject(\"foo\")]} />)\n\n.. code-block:: html\n\n    <div><h1>The \"thing\" list</h1><form method=\"post\" action=\"/thing/add\"><label>New todo: </label><input type=\"text\" name=\"todo\" /><button type=\"submit\">Add</button></form><ul><li>foo</li></ul></div>\n\n\nIt works, and this time, we cannot pass the ``type`` prop:\n\n.. code-block:: python\n\n    print(<ThingApp todos={[TodoObject(\"foo\")]} />)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropNameError: <ThingApp>.type: is not an allowed prop\n\n\nPropTypes DRYness\n-----------------\n\nNotice how we had to define the type for the ``todos`` props. Both in ``TodoApp`` and ``TodoThing``.\n\nThere are many ways to handle that.\n\nThe first one would be to ignore the type in ``ThingApp`` because it will be checked in ``TodoApp``. So we'll use the type ``Any``:\n\n\n.. code-block:: python\n\n    from typing import Any\n\n    #...\n\n    class ThingApp(Element):\n        class PropTypes:\n            todos: Any\n\n     #...\n\n\nLet's try with a valid list of todos:\n\n.. code-block:: python\n\n    print(<ThingApp todos={[TodoObject(\"foo\")]} />)\n\n.. code-block:: html\n\n    <div><h1>The \"thing\" list</h1><form>...</form><ul><li>foo</li></ul></div>\n\n\nBut what if we pass something else?\n\n.. code-block:: python\n\n    print(<ThingApp todos=\"foo, bar\" />)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropValueError:\n    <TodoApp>.todos: `foo, bar` is not a valid value for this prop (type: <class 'str'>, expected: List[TodoObject])\n\nIt works as expected but the error is reported at the ``TodoApp`` level, which is perfectly normal.\n\nAnother way would be to defined the type at a higher level:\n\n.. code-block:: python\n\n    TodoObjects = Required[List[TodoObject]]\n\n    class TodoApp(Element):\n        class PropTypes:\n            todos: TodoObjects\n     # ...\n\n    class ThingApp(Element):\n        class PropTypes:\n            todos: TodoObjects\n     # ...\n\nNow if we pass something else, we have the error reported at the correct level:\n\n.. code-block:: python\n\n    print(<ThingApp todos=\"foo, bar\" />)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropValueError:\n    <TodoThing>.todos: `foo, bar` is not a valid value for this prop (type: <class 'str'>, expected: List[TodoObject])\n\n\nBut if you can't or don't want to do that, you can keep the type defined in ``TodoApp`` et use the ``prop_type`` class method of a component to get the type of a prop:\n\n.. code-block:: python\n\n    class ThingApp(Element):\n        class PropTypes:\n            todos: TodoApp.prop_type(\"todos\")\n     # ...\n\nBut does it really matter to have the error raised for ``ThingApp`` or ``TodoApp``? Because at the end, it's really ``TodoApp`` that have to do the check.\n\nSo this should be a way to do this in a more generic way..\n\n\nFunction\n--------\n\nWe saw earlier that a component can be a single function to render a component. It just have to return a component, an html tag. One difference with class components is that there is not ``PropTypes`` so no validation. But... it's exactly what we need.\n\nWe want our ``ThingApp`` to accept some props (the ``todos`` prop), and return a ``TodoApp`` with a specific ``type`` prop.\n\nSo we could do:\n\n.. code-block:: python\n\n    def ThingApp(todos):\n        return <TodoApp type=\"thing\" todos={todos} />\n\nHere we can see that we cannot pass ``type`` to ``ThingsApp``, it is not a valid argument.\n\nLet's try it:\n\n.. code-block:: python\n\n    print(<ThingApp todos={[TodoObject(\"foo\")]} />)\n\n.. code-block:: html\n\n    <div><h1>The \"thing\" list</h1><form>...</form><ul><li>foo</li></ul></div>\n\n\nHere we have only one prop to pass so it's easy. But imagine if we have many ones. We can use the ``{**props}`` syntax:\n\n.. code-block:: python\n\n    def ThingApp(**props):\n        return <TodoApp type=\"thing\" {**props} />\n\n\nAnd you can do with even fewer characters (if it counts):\n\n.. code-block:: python\n\n    ThingApp = lambda **props: <TodoApp type=\"thing\" {**props} />\n\n\nThese two fonctions behave exactly the same.\n\nAnd you cannot pass a ``type`` prop because it would be a python error, as it would be passed twice to ``TodoApp``:\n\n.. code-block:: python\n\n    print(<ThingApp todos={[TodoObject(\"foo\")]} type=\"thing\" />)\n\n.. code-block:: python\n\n    TypeError: BaseMetaclass object got multiple values for keyword argument 'type'\n\n\n(yes it talks about ``BaseMetaclass`` which is the metaclass that creates our components classes)\n\nAnd any other wrong props would be validated by ``TodoApp``:\n\n.. code-block:: python\n\n    print(<ThingApp todos={[TodoObject(\"foo\")]} foo=\"bar\" />)\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropNameError: <TodoApp>.foo: is not an allowed prop\n\nWith this in mind, we could have created a generic fonction that force the type of any component accepting a ``type`` prop:\n\n.. code-block:: python\n\n    Thingify = lambda component, **props: <component type=\"thing\" {**props} />\n\n.. code-block:: python\n\n    print(<Thingify component={TodoApp} todos={[TodoObject(\"foo\")]} />)\n\n.. code-block:: html\n\n    <div><h1>The \"thing\" list</h1><form>...</form><ul><li>foo</li></ul></div>\n\n\nThe rendered component is ``TodoApp``, the ``type`` prop is \"thing\" and the other props (here only ``todos``) are correctly passed.\n\n\nHigher-order components\n-----------------------\n\nNow extend this concept to a more generic case: \"higher-order components\". In `React a \"high order component\" <https://reactjs.org/docs/higher-order-components.html>`_, is \"a function that takes a component and returns a new component.\"\n\n\nThe idea is:\n\n.. code-block:: python\n\n    EnhancedComponent = higherOrderComponent(WrappedComponent)\n\nA classic way of doing it is to return a new component class:\n\n.. code-block:: python\n\n    def higherOrderComponent(WrappedComponent):\n\n        class HOC(Element):\n            __display_name__ = f\"higherOrderComponent({WrappedComponent.__display_name__})\"\n\n            class PropTypes(WrappedComponent.PropTypes):\n                pass\n\n            def render(self, context):\n                return <WrappedComponent {**self.props}>{self.childre()}</WrappedComponent>\n\n        return HOC\n\nNotice how we set the ``PropTypes`` class to inherit from the one of the wrapped component, and how we pass all the props to the wrapped component, along with the children. With the returned component will accept the same props, with the same types, as the wrapped one.\n\nAnd also notice the ``__display_name__``. It will be used in exceptions to let you now the component that raised it. Here, without forcing it, it would have been set to ``HOC``, which is not helpful. Instead, we indicate that it is a transformed version of the passed component.\n\nHere it is a function that does nothing useful.\n\nIn our example we could have done this:\n\n.. code-block:: python\n\n    def thingify(WrappedComponent):\n\n        class HOC(Element):\n            __display_name__ = f\"thingify({WrappedComponent.__display_name__})\"\n\n            class PropTypes(WrappedComponent.PropTypes):\n                __exclude__ = {'type'}\n\n            def render(self, context):\n                return <WrappedComponent type=\"thing\" {**self.props}>{self.children()}</WrappedComponent>\n\n        return HOC\n\n\nTwo important things here:\n\n- notice how we use ``__exclude__ = {'type'}`` to remove the ``type`` prop from the ones we inherit from ``WrappedComponent.PropTypes``. So the returned component will expect the exact same props as the wrapped one, except for ``type``.\n- we added ``{self.children()}`` in the rendered wrapped component, because even if we actually know that the component we'll wrap, ``TodoApp``, doesn't take children (it could but it does nothing with them), we cannot say in advance that it will always be the case, and also that this higher-order component won't be used to wrap another component than ``TodoApp``. So it's better to always do this.\n\nAnd now we can create our ``ThingApp``:\n\n.. code-block:: python\n\n    ThingApp = thingify(TodoApp)\n\n\nAnd use it:\n\n.. code-block:: python\n\n    print(<ThingApp todos={[TodoObject(\"foo\")]} />)\n\n.. code-block:: html\n\n    <div><h1>The \"thing\" list</h1><form>...</form><ul><li>foo</li></ul></div>\n\n\nIf we try to pass the type:\n\n.. code-block:: python\n\n    print(<ThingApp todos={[TodoObject(\"foo\")]} type=\"thing\" />)\n\n\n.. code-block:: python\n\n    mixt.exceptions.InvalidPropNameError: <thingify(TodoApp)>.type: is not an allowed prop\n\n\nSo as planned, we cannot pass the type. And notice how the ``__display_name__`` is used.\n\n\nLet's think about how powerful this is.\n\nLet say we want to keep our ``TodoApp`` take a list of ``TodoObject``. But we want to get them from a \"source\".\n\nWe can even directly write it this new higher-order-component in a generic way:\n\n.. code-block:: python\n\n    def from_data_source(WrappedComponent, prop_name, get_source):\n\n        class HOC(Element):\n            __display_name__ = f\"from_data_source({WrappedComponent.__display_name__})\"\n\n            class PropTypes(WrappedComponent.PropTypes):\n                __exclude__ = {prop_name}\n\n            def render(self, context):\n                props = self.props.copy()\n                props[prop_name] = get_source(props, context)\n                return <WrappedComponent {**props}>{self.children()}</WrappedComponent>\n\n        return HOC\n\n\nThis time, the function ``from_data_source`` takes two arguments in addition to the ``WrappedComponent``:\n\n- ``prop_name``: it's the name of the prop of the wrapped component to fill with some data\n- ``get_source``: it's a function that will be called to get the data\n\nLook how we inherited the ``PropTypes`` from the wrapped component and how we excluded ``prop_name``. So we don't have (and can't) pass the data to our new component.\n\nAnd then in ``render``, we set a prop to pass to ``WrappedComponent`` with the result of a call to ``get_source``.\n\nSo let's write a very simple function (this could be a complicated one with caching, filtering...) that take the props and the context, and returns some data:\n\n.. code-block:: python\n\n    def get_todos(props, context):\n        # here it could be a call to a database\n        return [\n            TodoObject(\"fooooo\"),\n            TodoObject(\"baaaar\"),\n        ]\n\n\nAnd we can compose our component:\n\n.. code-block:: python\n\n    SourcedTodoApp = from_data_source(TodoApp, 'todos', get_todos)\n    ThingApp = thingify(SourcedTodoApp)\n\n\nAnd run it:\n\n.. code-block:: python\n\n    print(<ThingApp />)\n\n.. code-block:: html\n\n    <div><h1>The \"thing\" list</h1><form>...</form><ul><li>fooooo</li><li>baaaar</li></ul></div>\n\n\nIt works as expected, and the data is fetched only when the component needs to be rendered.\n\n\nContext\n=======\n\nSo, we have a todo list, that can fetch data from an external source. But we may want the data to be different depending on the user.\n\nWhat we can do, it's at the main level, get our user and passing it on every component to be sure that each component is able to get the current logged in user.\n\nWouldn't it be cumbersome?\n\nSolving this use case is the exact purpose of the ``Context`` concept provided by ``mixt``. It is, of course, `inspired by the concept of context in React <https://reactjs.org/docs/context.html>`_.\n\nAnd as they said:\n\n    Context is designed to share data that can be considered \u201cglobal\u201d for a tree of React components, such as the current authenticated user, theme, or preferred language.\n\nCreating a context is as simple as creating a component, except that it will inherits from ``BaseContext`` and doesn't need a ``render`` method (it will render its children).\n\nAnd it takes a ``PropTypes`` class, that define the types of data the context will accept and pass down the tree.\n\nSo let's create our context that will hold the id of the authenticated user.\n\n.. code-block:: python\n\n    from mixt import BaseContext\n\n    class UserContext(BaseContext):\n        class PropTypes:\n            authenticated_user_id: Required[int]\n\n\nNow, we want to update our ``get_todos`` method to take the ``authenticated_user_id`` into account.\n\nRemember, we passed it the props and the context. The context will be useful here:\n\n.. code-block:: python\n\n    def get_todos(props, context):\n        return {\n            1:[\n                TodoObject(\"1-1\"),\n                TodoObject(\"1-2\"),\n            ],\n            2: [\n                TodoObject(\"2-1\"),\n                TodoObject(\"2-2\"),\n            ]\n        }[context.authenticated_user_id]\n\n\nAnd now we can render our app with the context:\n\n.. code-block:: python\n\n    print(\n        <UserContext authenticated_user_id=1>\n            <ThingApp />\n        </UserContext>\n    )\n\n.. code-block:: python\n\n    <div><h1>The \"thing\" list</h1><form>...</form><ul><li>1-1</li><li>1-2</li></ul></div>\n\n\nWe can see the todo entries for the user 1.\n\nLet's try with the user 2:\n\n.. code-block:: python\n\n    print(\n        <UserContext authenticated_user_id=2>\n            <ThingApp />\n        </UserContext>\n    )\n\n.. code-block:: python\n\n    <div><h1>The \"thing\" list</h1><form>...</form><ul><li>2-1</li><li>2-2</li></ul></div>\n\nWe can see the todo entries for the user 2.\n\nIn this case of course we could have passed the user id as a prop. But imagine the todo app being deep in the components tree, it's a lot easier to pass it this way.\n\nBut as said in the React documentation:\n\n    Don\u2019t use context just to avoid passing props a few levels down. Stick to cases where the same data needs to be accessed in many components at multiple levels.\n\nWhen there is no context, the ``context`` argument of the ``render`` method is set to ``EmptyContext`` and not to ``None``. So you can directly use the ``has_prop`` method to check if a prop is available via the context.\n\nLet's update the ``get_todos`` functions to return an empty list of todo objects if there is not authenticated user.\n\n.. code-block:: python\n\n    def get_todos(props, context):\n        if not context.has_prop('authenticated_user_id') or not context.authenticated_user_id:\n            return []\n        return {\n            1:[\n                TodoObject(\"1-1\"),\n                TodoObject(\"1-2\"),\n            ],\n            2: [\n                TodoObject(\"2-1\"),\n                TodoObject(\"2-2\"),\n            ]\n        }[context.authenticated_user_id]\n\nLet's try this:\n\n.. code-block:: python\n\n    print(<ThingApp />)\n\n.. code-block:: python\n\n    <div><h1>The \"thing\" list</h1><form>...</form><ul></ul></div>\n\n\nAnd it still works with a user in the context:\n\n.. code-block:: python\n\n    print(\n        <UserContext authenticated_user_id=1>\n            <ThingApp />\n        </UserContext>\n    )\n\n.. code-block:: python\n\n    <div><h1>The \"thing\" list</h1><form>...</form><ul><li>1-1</li><li>1-2</li></ul></div>\n\n\n**Important note about contexts**: you can have many contexts! But defining the same prop in many contexts may lead to undefined behaviour.\n\n\nStyle and Javascript\n====================\n\nEverybody loves a beautiful design, and maybe some interaction.\n\nIt is easily doable: we generate HTML and HTML can contains some CSS and JS.\n\nLet's add some interaction first: when adding an item in the ``TodoForm``, let's add it to the list.\n\nFirst we add in our ``TodoForm`` component a ``render_javascript`` method that will host our (bad, we could do better but it's not the point) javascript:\n\n.. code-block:: python\n\n    class TodoForm(Element):\n        # ...\n\n        def render_javascript(self, context):\n            return html.Raw(\"\"\"\n    function on_todo_add_submit(form) {\n        var text = form.todo.value;\n        alert(text);\n    }\n            \"\"\")\n\nTo start we only display the new todo text.\n\nNow update our ``render`` method to return this javascript (note that the use of a ``render_javascript`` method is only to separate concerns, it could have been in the ``render`` method directly.\n\n.. code-block:: python\n\n    class TodoForm(Element):\n        # ...\n\n        def render(self, context):\n            # ...\n\n            return \\\n                <Fragment>\n                    <script>{self.render_javascript(context)}</script>\n                    <form method=\"post\" action={add_url} onsubmit=\"return on_todo_add_submit(this);\">\n                        <label>New {self.type}: </label><itext name=\"todo\" />\n                        <button type=\"submit\">Add</button>\n                    </form>\n                </Fragment>\n\nNotice the ``Fragment`` tag. It's a way to encapsulate many elements to be returned, like in React. It could have been a simple list but with comas at the end:\n\n.. code-block:: python\n\n    return [\n        <script>...</script>,\n        <form>\n            ...\n        </form>\n    ]\n\nNow we want to add an item to the list. It's not the role of the ``TodoForm`` to do this, but to the list. So we'll add some JS in the ``TodoList`` component: a function that take some text and create a new entry.\n\nAs for ``TodoForm``, we add a ``render_javascript`` method with (still bad) javascript:\n\n.. code-block:: python\n\n    class TodoList(Element):\n        # ...\n\n        def render_javascript(self, context):\n\n            todo_placeholder = <Todo todo={TodoObject(text='placeholder')} />\n\n            return html.Raw(\"\"\"\n    TODO_TEMPLATE = \"%s\";\n    function add_todo(text) {\n        var html = TODO_TEMPLATE.replace(\"placeholder\", text);\n        var ul = document.querySelector('#todo-items');\n        ul.innerHTML = html + ul.innerHTML;\n    }\n            \"\"\" % (todo_placeholder))\n\nAnd we update our ``render`` method to add the ``<script>`` tag and an ``id`` to the ``ul`` tag, used in the javascript:\n\n.. code-block:: python\n\n    class TodoList(Element):\n        # ...\n\n        def render(self, context):\n            return \\\n                <Fragment>\n                    <script>{self.render_javascript(context)}</script>\n                    <ul id=\"todo-items\">{[<Todo todo={todo} /> for todo in self.todos]}</ul>\n                </Fragment>\n\nAnd now we can update the ``render_javascript`` method of the ``TodoForm`` component to use our new ``add_toto`` javascript function:\n\n\n.. code-block:: python\n\n    class TodoForm(Element):\n        # ...\n\n        def render_javascript(self, context):\n            return html.Raw(\"\"\"\n    function on_todo_add_submit(form) {\n        var text = form.todo.value;\n        add_todo(text);\n    }\n            \"\"\")\n\nAnd that's all. Nothing special, in fact.\n\nBut let's take a look at the output of ou ``TodoApp``:\n\n.. code-block:: python\n\n    print(\n        <UserContext authenticated_user_id=1>\n            <ThingApp />\n        </User>\n    )\n\nThe beautified output is:\n\n.. code-block:: html\n\n    <div>\n        <h1>The \"thing\" list</h1>\n        <script>\n            function on_todo_add_submit(form) {\n                var text = form.todo.value;\n                add_todo(text);\n            }\n        </script>\n        <form method=\"post\" action=\"/thing/add\" onsubmit=\"return on_todo_add_submit(this);\">\n            <label>New thing: </label>\n            <input type=\"text\" name=\"todo\" />\n            <button type=\"submit\">Add</button>\n        </form>\n        <script>\n            TODO_TEMPLATE = \"<li>placeholder</li>\";\n\n            function add_todo(text) {\n                var html = TODO_TEMPLATE.replace(\"placeholder\", text);\n                var ul = document.querySelector('#todo-items');\n                ul.innerHTML = html + ul.innerHTML;\n            }\n        </script>\n        <ul id=\"todo-items\">\n            <li>1-1</li>\n            <li>1-2</li>\n        </ul>\n    </div>\n\nSo we have many ``script`` tag. It could be great to have only one.\n\nCollectors\n----------\n\n``mixt`` comes with a way to \"collect\" parts of what is rendered to put them somewhere else. We have at our disposal two simple collectors, to be used as components: ``JSCollector`` and ``CSSCollector``.\n\nThese components collect parts of their children tree.\n\nCollector.Collect\n^^^^^^^^^^^^^^^^^\n\nThe first way is by using the collector ``Collect`` tag.\n\nFirst let's change our main call:\n\n.. code-block:: python\n\n    from mixt import JSCollector\n\n    print(\n        <JSCollector render_position=\"after\">\n            <UserContext authenticated_user_id=1>\n                <ThingApp />\n            </User>\n        </JSCollector>\n    )\n\nThis will collect the content of all the ``JSCollector.Collect`` tag.\n\nLet's update our ``TodoForm`` and replace our ``script`` tag by a ``JSCollector.Collect`` tag:\n\n.. code-block:: python\n\n    class TodoForm(Element):\n        # ...\n\n        def render(self, context):\n\n            if callable(self.add_url):\n                add_url = self.add_url(self.type)\n            else:\n                add_url = self.add_url\n\n            return \\\n                    <JSCollector.Collect>{self.render_javascript(context)}</JSCollector.Collect>\n                    <form method=\"post\" action={add_url} onsubmit=\"return on_todo_add_submit(this);\">\n                        <label>New {self.type}: </label><itext name=\"todo\" />\n                        <button type=\"submit\">Add</button>\n                    </form>\n                </Fragment>\n\n\nWe can do the same with the ``TodoList``:\n\n.. code-block:: python\n\n    class TodoList(Element):\n        # ...\n\n        def render(self, context):\n            return \\\n                <Fragment>\n                    <JSCollector.Collect>{self.render_javascript(context)}</JSCollector.Collect>\n                    <ul id=\"todo-items\">{[<Todo todo={todo} /> for todo in self.todos]}</ul>\n                </Fragment>\n\n\nNow let's run our updated code:\n\n.. code-block:: python\n\n    print(\n        <JSCollector render_position=\"after\">\n            <UserContext authenticated_user_id=1>\n                <ThingApp />\n            </User>\n        </JSCollector>\n    )\n\nThe beautified output is:\n\n.. code-block:: html\n\n    <div>\n        <h1>The \"thing\" list</h1>\n        <form method=\"post\" action=\"/thing/add\" onsubmit=\"return on_todo_add_submit(this);\">\n            <label>New thing: </label>\n            <input type=\"text\" name=\"todo\" />\n            <button type=\"submit\">Add</button>\n        </form>\n        <ul id=\"todo-items\">\n            <li>1-1</li>\n            <li>1-2</li>\n        </ul>\n    </div>\n    <script type=\"text/javascript\">\n        function on_todo_add_submit(form) {\n            var text = form.todo.value;\n            add_todo(text);\n        }\n\n        TODO_TEMPLATE = \"<li>placeholder</li>\";\n\n        function add_todo(text) {\n            var html = TODO_TEMPLATE.replace(\"placeholder\", text);\n            var ul = document.querySelector('#todo-items');\n            ul.innerHTML = html + ul.innerHTML;\n        }\n    </script>\n\nAs you can see, all the scripts are in a single ``script`` tag, at the end. More precisely, at the end of where the ``JSCollector`` tag was, because we used ``render_position=\"after\"``. Another possibility is ``render_position=\"before\"`` to put this where the ``JSCollector`` tag started.\n\nAll of this work exactly the same way for the ``CSSCollector`` tag, where content is put in a ``<style type=\"text/css>`` tag.\n\nrender_[js|css] methods\n^^^^^^^^^^^^^^^^^^^^^^^\n\nAs using JS/CSS is quite common in the HTML world, we added some sugar to make all of this even easier to do.\n\nIf you have a ``render_js`` method, the ``JSCollector`` will automatically collect the result of this method. Same for ``CSSSelector`` and the ``render_css`` method.\n\nWith this, no need for a ``JSCollector.Collect`` tag.\n\nTo make this work in our example, in ``TodoForm`` and ``TodoList``:\n\n- remove the ``JSCollector.Collect`` tags\n- remove the now unneeded ``Fragment`` tags\n- rename the ``render_javascript`` methods to ``render_js``.\n- remove the call to ``html.Raw`` in ``render_js`` as it's not needed when the collector calls ``render_js`` itself: if the output is a string, it is considered a \"raw\" one\n\nThis way we have exactly the same result.\n\nrender_[js|css]_global methods\n^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\nIt works now because we only have one instance of a child with a ``render_js`` method.\n\nBut if we have many children, this method will be called for each child. If fact, it should only contains code that is very specific to this instance.\n\nTo serve js/css only once for a Component class, we have to use ``render_js_global`` or ``render_css_global`` (expected to be ``classmethod``)\n\nIt will be collected the first time, and only the first time, an instance is found, before collecting the ``render_js`` method.\n\nSo here, we can change our ``render_js`` to ``render_js_global``, decorate them with ``@classmethod`` and it will still work the same.\n\nreferences\n^^^^^^^^^^\n\nWe now are able to regroup javascript or style. But what if we want to put it elsewhere, like in the ``head`` tag or at the end of the ``body`` tag?\n\nIt's possible with references, aka \"refs\". It's the same context as in React, without the DOM part of course.\n\nYou create a ref, pass it to a component, and you can use it anywhere.\n\nLet's update our main code to do this.\n\nFirst we create a ref.\n\n.. code-block:: python\n\n    from mixt import Ref\n\n    js_ref = Ref()\n\n\nThis will create a new object that will hold a reference to a component. In a component, you don't need to import ``Ref`` and can use ``js_ref = self.add_ref()``, but we are not in a component here.\n\n\nTo save a ref, we simply pass it to the ``ref`` prop:\n\n.. code-block:: python\n\n    <JSCollector ref={js_ref} >...</JSCollector>\n\n\nNotice that we removed the ``render_position`` prop, because now we don't want the JS to be put before or after the tag, but elsewhere.\n\nTo access the component referenced by a ref, use the ``current`` attribute:\n\n.. code-block:: python\n\n    js_collector = js_ref.current\n\nOf course this can be done only AFTER the rendering.\n\nHow can we use this to add a ``script`` tag in our ``head``.\n\nFirst update our html to include the classic ``html``, ``head`` and ``body`` tags:\n\n.. code-block:: python\n\n    return str(\n        <html>\n            <head>\n            </head>\n            <body>\n                <JSCollector ref={js_ref} >\n                    <UserContext authenticated_user_id=1>\n                        <ThingApp />\n                    </UserContext>\n                </JSCollector>\n            </body>\n        </html>\n    )\n\nAt this point we don't have any ``script`` tag in the output:\n\n.. code-block:: html\n\n    <html>\n\n    <head></head>\n\n    <body>\n        <div>\n            <h1>The \"thing\" list</h1>\n            <form method=\"post\" action=\"/thing/add\" onsubmit=\"return on_todo_add_submit(this);\">\n                <label>New thing: </label>\n                <input type=\"text\" name=\"todo\" />\n                <button type=\"submit\">Add</button>\n            </form>\n            <ul id=\"todo-items\">\n                <li>1-1</li>\n                <li>1-2</li>\n            </ul>\n        </div>\n    </body>\n\n    </html>\n\n\nFirst thing to know: a collector is able to render all the things it collected by calliing its ``render_collected`` method.\n\nAnd remembering that it already includes the ``script`` tag, we may want to do this:\n\n.. code-block:: python\n\n    # ...\n    <head>\n        {js_ref.current.render_collected()}\n    </head>\n    # ...\n\nbut this doesn't work:\n\n.. code-block:: python\n\n    AttributeError: 'NoneType' object has no attribute 'render_collected'\n\n\nIt's because we try to access the current value at render time. It must be done after.\n\nFor this, we can use a feature of ``mixt``: if something added to the tree is a callable, it will be called after the rendering, when converting to string.\n\nSo we can use for example a lambda:\n\n.. code-block:: python\n\n    # ...\n    <head>\n        {lambda: js_ref.current.render_collected()}\n    </head>\n    # ...\n\nAnd now it works:\n\n.. code-block:: html\n\n    <html>\n\n    <head>\n        <script type=\"text/javascript\">\n            function on_todo_add_submit(form) {\n                var text = form.todo.value;\n                add_todo(text);\n            }\n\n            TODO_TEMPLATE = \"<li>placeholder</li>\";\n\n            function add_todo(text) {\n                var html = TODO_TEMPLATE.replace(\"placeholder\", text);\n                var ul = document.querySelector('#todo-items');\n                ul.innerHTML = html + ul.innerHTML;\n            }\n        </script>\n    </head>\n\n    <body>\n        <div>\n            <h1>The \"thing\" list</h1>\n            <form method=\"post\" action=\"/thing/add\" onsubmit=\"return on_todo_add_submit(this);\">\n                <label>New thing: </label>\n                <input type=\"text\" name=\"todo\" />\n                <button type=\"submit\">Add</button>\n            </form>\n            <ul id=\"todo-items\">\n                <li>1-1</li>\n                <li>1-2</li>\n            </ul>\n        </div>\n    </body>\n\n    </html>\n\n\nUser guide conclusion\n=====================\n\nHurray we made it! All the main features of ``mixt`` explained. You can now use ``mixt`` in your ovn projects.\n\n***\nAPI\n***\n\nAs a next step, you may want to read `the API documentation <https://twidi.github.io/mixt/api.html>`_.\n\n\n",
        "description_content_type": "",
        "docs_url": null,
        "download_url": "",
        "downloads": {
            "last_day": -1,
            "last_month": -1,
            "last_week": -1
        },
        "home_page": "https://github.com/twidi/mixt",
        "keywords": "python,html,components,templating,web-components,react-style",
        "license": "MIT",
        "maintainer": "",
        "maintainer_email": "",
        "name": "mixt",
        "package_url": "https://pypi.org/project/mixt/",
        "platform": "",
        "project_url": "https://pypi.org/project/mixt/",
        "project_urls": {
            "Homepage": "https://github.com/twidi/mixt"
        },
        "release_url": "https://pypi.org/project/mixt/1.1.3/",
        "requires_dist": [
            "enforce",
            "wrapt",
            "black; extra == 'dev'",
            "factory-boy; extra == 'dev'",
            "flake8 (==3.5); extra == 'dev'",
            "flake8-bugbear; extra == 'dev'",
            "flake8-comprehensions; extra == 'dev'",
            "flake8-formatter-abspath; extra == 'dev'",
            "flake8-imports; extra == 'dev'",
            "flake8-docstrings; extra == 'dev'",
            "flake8-pep3101; extra == 'dev'",
            "flake8-per-file-ignores; extra == 'dev'",
            "ipython; extra == 'dev'",
            "isort; extra == 'dev'",
            "mypy; extra == 'dev'",
            "patchy; extra == 'dev'",
            "pycodestyle (<2.4); extra == 'dev'",
            "pydocstyle; extra == 'dev'",
            "pylint (<2); extra == 'dev'",
            "pytest; extra == 'dev'",
            "twine; extra == 'dev'",
            "wheel; extra == 'dev'",
            "bottle; extra == 'doc'",
            "numpydoc; extra == 'doc'",
            "pygments; extra == 'doc'",
            "python-slugify; extra == 'doc'",
            "factory-boy; extra == 'test'",
            "pytest; extra == 'test'"
        ],
        "requires_python": "",
        "summary": "Write html components directly in python and you have a beautiful but controversial MIXTure",
        "version": "1.1.3"
    },
    "last_serial": 4097465,
    "releases": {
        "0.1": [
            {
                "comment_text": "",
                "digests": {
                    "md5": "1b92fac53cbef8aa687a120cf6174a95",
                    "sha256": "73367cf4f3ebb9cc97707327da49612bfdfac4e9c485e78ad8135994587c7ff8"
                },
                "downloads": -1,
                "filename": "mixt-0.1-py2.py3-none-any.whl",
                "has_sig": false,
                "md5_digest": "1b92fac53cbef8aa687a120cf6174a95",
                "packagetype": "bdist_wheel",
                "python_version": "py2.py3",
                "requires_python": null,
                "size": 28684,
                "upload_time": "2018-06-03T21:10:31",
                "url": "https://files.pythonhosted.org/packages/bf/0c/a3bbff3e90c4174d518f3b1d193ab5f47f6157b8b9856a9efd69aff645ef/mixt-0.1-py2.py3-none-any.whl"
            },
            {
                "comment_text": "",
                "digests": {
                    "md5": "d27b064332437ff99bfd3fb23f7f8fb2",
                    "sha256": "c6aa3188ad4ed8b97c1af0e5857aedcfcdee767b33ed82b12448b9d7e896b4cb"
                },
                "downloads": -1,
                "filename": "mixt-0.1.tar.gz",
                "has_sig": false,
                "md5_digest": "d27b064332437ff99bfd3fb23f7f8fb2",
                "packagetype": "sdist",
                "python_version": "source",
                "requires_python": null,
                "size": 25345,
                "upload_time": "2018-06-03T21:10:32",
                "url": "https://files.pythonhosted.org/packages/d6/33/1540fa8a50b9a69a89ad6e5ebf567644237bb59e71581ac1f16dba8a1a27/mixt-0.1.tar.gz"
            }
        ],
        "0.2": [
            {
                "comment_text": "",
                "digests": {
                    "md5": "270f660878c7400afecaed6cfeeba6f7",
                    "sha256": "48c45ad344d2bc2a8fd792c0fbae47d51eed0cacc88b594907c7cfb3ac2c7240"
                },
                "downloads": -1,
                "filename": "mixt-0.2-py2.py3-none-any.whl",
                "has_sig": false,
                "md5_digest": "270f660878c7400afecaed6cfeeba6f7",
                "packagetype": "bdist_wheel",
                "python_version": "py2.py3",
                "requires_python": null,
                "size": 61379,
                "upload_time": "2018-06-09T06:56:21",
                "url": "https://files.pythonhosted.org/packages/22/40/dfa10fe449a2826090bab7e507d6319997eb4c3d9adaa6a06189b6512b68/mixt-0.2-py2.py3-none-any.whl"
            },
            {
                "comment_text": "",
                "digests": {
                    "md5": "52009445d8d95039bf98785081238cb4",
                    "sha256": "a756d1166dd0ccfd78a20eeccffc4bb589ca18af22ab81e01b09d38a8d58f6c3"
                },
                "downloads": -1,
                "filename": "mixt-0.2.tar.gz",
                "has_sig": false,
                "md5_digest": "52009445d8d95039bf98785081238cb4",
                "packagetype": "sdist",
                "python_version": "source",
                "requires_python": null,
                "size": 74968,
                "upload_time": "2018-06-09T06:56:26",
                "url": "https://files.pythonhosted.org/packages/d6/cf/c5d6dd5a7cba661ebcf7346847f06d5a8eb0e2ad7d9a1a7e3a0c48d4f1ec/mixt-0.2.tar.gz"
            }
        ],
        "0.3": [
            {
                "comment_text": "",
                "digests": {
                    "md5": "2e2a5d40c1fa7b5a1625258ed8bbfa28",
                    "sha256": "a625efd12932f80c19815290e532eef8215b699d3d84cdb95139a2e8694bcdd2"
                },
                "downloads": -1,
                "filename": "mixt-0.3-py2.py3-none-any.whl",
                "has_sig": false,
                "md5_digest": "2e2a5d40c1fa7b5a1625258ed8bbfa28",
                "packagetype": "bdist_wheel",
                "python_version": "py2.py3",
                "requires_python": null,
                "size": 67919,
                "upload_time": "2018-06-13T16:43:02",
                "url": "https://files.pythonhosted.org/packages/fd/da/dde04e0c9de11f32c3359d0ff52f7a777ed1fd8264ec16c1985a326b7d6d/mixt-0.3-py2.py3-none-any.whl"
            },
            {
                "comment_text": "",
                "digests": {
                    "md5": "2e44eb2d941134f71426fc97eae2cc28",
                    "sha256": "c1c187e4cfd9240d0a60f762b2075205a3edd42e1e291f0380f61555d7602973"
                },
                "downloads": -1,
                "filename": "mixt-0.3.tar.gz",
                "has_sig": false,
                "md5_digest": "2e44eb2d941134f71426fc97eae2cc28",
                "packagetype": "sdist",
                "python_version": "source",
                "requires_python": null,
                "size": 86755,
                "upload_time": "2018-06-13T16:43:04",
                "url": "https://files.pythonhosted.org/packages/ec/54/c5e51736c5613f702c48865605b873bee0d40ffeb6579b59edec0fc45abc/mixt-0.3.tar.gz"
            }
        ],
        "0.4": [
            {
                "comment_text": "",
                "digests": {
                    "md5": "a1deb734a300d09cbee978ed373e3522",
                    "sha256": "b9a2e3c8d7665752090a2550df0ea7911fc2bbda125ff3bd9a3d10bee31326aa"
                },
                "downloads": -1,
                "filename": "mixt-0.4-py2.py3-none-any.whl",
                "has_sig": false,
                "md5_digest": "a1deb734a300d09cbee978ed373e3522",
                "packagetype": "bdist_wheel",
                "python_version": "py2.py3",
                "requires_python": null,
                "size": 78471,
                "upload_time": "2018-06-26T20:09:47",
                "url": "https://files.pythonhosted.org/packages/0e/cb/052c94261655d3bbd8d136fc4776a991fa7d1c244f951806ef37f99c16af/mixt-0.4-py2.py3-none-any.whl"
            },
            {
                "comment_text": "",
                "digests": {
                    "md5": "02352411c306dbeaad4ab1086692fd1a",
                    "sha256": "dfab335980bd17a477e353e668a18e6b8cf59e546e90a9175d7237076547b87f"
                },
                "downloads": -1,
                "filename": "mixt-0.4.tar.gz",
                "has_sig": false,
                "md5_digest": "02352411c306dbeaad4ab1086692fd1a",
                "packagetype": "sdist",
                "python_version": "source",
                "requires_python": null,
                "size": 96900,
                "upload_time": "2018-06-26T20:09:49",
                "url": "https://files.pythonhosted.org/packages/2c/60/b0a1b9fc02cc138b73c4fe60d599d54f901c4fe2358aae3c4dfc99e31c89/mixt-0.4.tar.gz"
            }
        ],
        "1.0": [
            {
                "comment_text": "",
                "digests": {
                    "md5": "9b101fdf13e14d2012615700d1a45895",
                    "sha256": "0443291cad883e4466b7c91673893ac690fc501969a4908380f58904b4c67c6d"
                },
                "downloads": -1,
                "filename": "mixt-1.0-py2.py3-none-any.whl",
                "has_sig": false,
                "md5_digest": "9b101fdf13e14d2012615700d1a45895",
                "packagetype": "bdist_wheel",
                "python_version": "py2.py3",
                "requires_python": null,
                "size": 78488,
                "upload_time": "2018-06-26T20:10:20",
                "url": "https://files.pythonhosted.org/packages/e5/fe/b6809ef82a9c4a564b366a24c935c7bb3cae2d242767eb2feddd4b800db4/mixt-1.0-py2.py3-none-any.whl"
            },
            {
                "comment_text": "",
                "digests": {
                    "md5": "9a47cf3ad71dd347850c39d53326ed3a",
                    "sha256": "3414761ee6521b575313dcfb613447f24752db20eefa0274785f3b3bc68c39a2"
                },
                "downloads": -1,
                "filename": "mixt-1.0.tar.gz",
                "has_sig": false,
                "md5_digest": "9a47cf3ad71dd347850c39d53326ed3a",
                "packagetype": "sdist",
                "python_version": "source",
                "requires_python": null,
                "size": 96939,
                "upload_time": "2018-06-26T20:10:22",
                "url": "https://files.pythonhosted.org/packages/6d/80/5e6003ff4c5c6a6cb8ebdcaf8b40cbe7590c9cdc75069469f86b663e54eb/mixt-1.0.tar.gz"
            }
        ],
        "1.1": [
            {
                "comment_text": "",
                "digests": {
                    "md5": "f5b66e90285b35846b2f2ce66f9538e5",
                    "sha256": "76c7dcf0fcd6d95686e448d5961bb2a14d144438314534bdcb99ab55080d7117"
                },
                "downloads": -1,
                "filename": "mixt-1.1-py2.py3-none-any.whl",
                "has_sig": false,
                "md5_digest": "f5b66e90285b35846b2f2ce66f9538e5",
                "packagetype": "bdist_wheel",
                "python_version": "py2.py3",
                "requires_python": null,
                "size": 114618,
                "upload_time": "2018-07-20T19:24:11",
                "url": "https://files.pythonhosted.org/packages/57/ce/d9cd9ce1fecf7b1f1ddb2c0cd65720369d2575fccaec2b0e08b6a71af9cc/mixt-1.1-py2.py3-none-any.whl"
            },
            {
                "comment_text": "",
                "digests": {
                    "md5": "ce1315850c9d1176c0bf6351d4e6b558",
                    "sha256": "8e28ac97eb75237bda08d3a758b02d8f7109821aad69f68ea15298891448e766"
                },
                "downloads": -1,
                "filename": "mixt-1.1.tar.gz",
                "has_sig": false,
                "md5_digest": "ce1315850c9d1176c0bf6351d4e6b558",
                "packagetype": "sdist",
                "python_version": "source",
                "requires_python": null,
                "size": 129994,
                "upload_time": "2018-07-20T19:24:13",
                "url": "https://files.pythonhosted.org/packages/16/aa/ad5a484b9d16028dca0082d0bce375584579f50f593931c5e621791cfe28/mixt-1.1.tar.gz"
            }
        ],
        "1.1.1": [
            {
                "comment_text": "",
                "digests": {
                    "md5": "c5ea76da3f2159292b90b66c7181d7f3",
                    "sha256": "d444b630ff52fcae1c1628e60561fc30903b97dba12f5b9bb0f4715f31722423"
                },
                "downloads": -1,
                "filename": "mixt-1.1.1-py2.py3-none-any.whl",
                "has_sig": false,
                "md5_digest": "c5ea76da3f2159292b90b66c7181d7f3",
                "packagetype": "bdist_wheel",
                "python_version": "py2.py3",
                "requires_python": null,
                "size": 114702,
                "upload_time": "2018-07-20T19:56:37",
                "url": "https://files.pythonhosted.org/packages/6c/ad/3258399c9d754f3e1ce22db442b0618ea499b6bd89afa82150fe9519193c/mixt-1.1.1-py2.py3-none-any.whl"
            },
            {
                "comment_text": "",
                "digests": {
                    "md5": "83ea25fe6a3810856a9c448cd8215ea8",
                    "sha256": "d5fce55c79f69851cbf2c41a257235ad433f98463d85dd170b2f6d9b2aa995ba"
                },
                "downloads": -1,
                "filename": "mixt-1.1.1.tar.gz",
                "has_sig": false,
                "md5_digest": "83ea25fe6a3810856a9c448cd8215ea8",
                "packagetype": "sdist",
                "python_version": "source",
                "requires_python": null,
                "size": 130173,
                "upload_time": "2018-07-20T19:56:39",
                "url": "https://files.pythonhosted.org/packages/6e/c3/2b42842dace0da40a1fe00f0a6d03e0f79c6bb3f7371bdb642450d4699fe/mixt-1.1.1.tar.gz"
            }
        ],
        "1.1.2": [
            {
                "comment_text": "",
                "digests": {
                    "md5": "489dc2b7260b959316ef4de9805a46d6",
                    "sha256": "c818135693c364c6bb83cda19b15e1c10367b13444f42861a8566f21e1834162"
                },
                "downloads": -1,
                "filename": "mixt-1.1.2-py2.py3-none-any.whl",
                "has_sig": false,
                "md5_digest": "489dc2b7260b959316ef4de9805a46d6",
                "packagetype": "bdist_wheel",
                "python_version": "py2.py3",
                "requires_python": null,
                "size": 114737,
                "upload_time": "2018-07-20T20:05:54",
                "url": "https://files.pythonhosted.org/packages/5c/d1/7d4b9e4bf0ef2b3226ee7792110f30d6fa67b38f919532275d2a7694306a/mixt-1.1.2-py2.py3-none-any.whl"
            },
            {
                "comment_text": "",
                "digests": {
                    "md5": "1302f151cc7fbb9735e099af4315fef6",
                    "sha256": "f90103ee9be96039c862683cd6ad3d97bf4f971cc240b871ae4fd92edcf252f4"
                },
                "downloads": -1,
                "filename": "mixt-1.1.2.tar.gz",
                "has_sig": false,
                "md5_digest": "1302f151cc7fbb9735e099af4315fef6",
                "packagetype": "sdist",
                "python_version": "source",
                "requires_python": null,
                "size": 130284,
                "upload_time": "2018-07-20T20:05:55",
                "url": "https://files.pythonhosted.org/packages/f0/2b/c366e14a870f25f097bcadd03c93ca9127f8572bd8dcc8b6080a65b4c085/mixt-1.1.2.tar.gz"
            }
        ],
        "1.1.3": [
            {
                "comment_text": "",
                "digests": {
                    "md5": "c9b2d9d171d39bceffd854de74c0bded",
                    "sha256": "626be906d6c503b4db419ca96b6580f229e308ca3eece381405bd4b039f3ecb5"
                },
                "downloads": -1,
                "filename": "mixt-1.1.3-py2.py3-none-any.whl",
                "has_sig": false,
                "md5_digest": "c9b2d9d171d39bceffd854de74c0bded",
                "packagetype": "bdist_wheel",
                "python_version": "py2.py3",
                "requires_python": null,
                "size": 118232,
                "upload_time": "2018-07-24T15:36:08",
                "url": "https://files.pythonhosted.org/packages/21/cb/a816a4e3e0e2e88a5681790f2919c93d80d231c4ac7fe95b4b1f01f26aeb/mixt-1.1.3-py2.py3-none-any.whl"
            },
            {
                "comment_text": "",
                "digests": {
                    "md5": "f0246351de384376b593a7eabe1eda34",
                    "sha256": "57cf0b386a2e82c47b8cb8a3aa5f2b04af753c4ecf0e6d2611e07e64fda745e5"
                },
                "downloads": -1,
                "filename": "mixt-1.1.3.tar.gz",
                "has_sig": false,
                "md5_digest": "f0246351de384376b593a7eabe1eda34",
                "packagetype": "sdist",
                "python_version": "source",
                "requires_python": null,
                "size": 133669,
                "upload_time": "2018-07-24T15:36:10",
                "url": "https://files.pythonhosted.org/packages/73/0e/7e43dea8301717f8d38411bfac7745da13484304250dee26b7390c3754c5/mixt-1.1.3.tar.gz"
            }
        ]
    },
    "urls": [
        {
            "comment_text": "",
            "digests": {
                "md5": "c9b2d9d171d39bceffd854de74c0bded",
                "sha256": "626be906d6c503b4db419ca96b6580f229e308ca3eece381405bd4b039f3ecb5"
            },
            "downloads": -1,
            "filename": "mixt-1.1.3-py2.py3-none-any.whl",
            "has_sig": false,
            "md5_digest": "c9b2d9d171d39bceffd854de74c0bded",
            "packagetype": "bdist_wheel",
            "python_version": "py2.py3",
            "requires_python": null,
            "size": 118232,
            "upload_time": "2018-07-24T15:36:08",
            "url": "https://files.pythonhosted.org/packages/21/cb/a816a4e3e0e2e88a5681790f2919c93d80d231c4ac7fe95b4b1f01f26aeb/mixt-1.1.3-py2.py3-none-any.whl"
        },
        {
            "comment_text": "",
            "digests": {
                "md5": "f0246351de384376b593a7eabe1eda34",
                "sha256": "57cf0b386a2e82c47b8cb8a3aa5f2b04af753c4ecf0e6d2611e07e64fda745e5"
            },
            "downloads": -1,
            "filename": "mixt-1.1.3.tar.gz",
            "has_sig": false,
            "md5_digest": "f0246351de384376b593a7eabe1eda34",
            "packagetype": "sdist",
            "python_version": "source",
            "requires_python": null,
            "size": 133669,
            "upload_time": "2018-07-24T15:36:10",
            "url": "https://files.pythonhosted.org/packages/73/0e/7e43dea8301717f8d38411bfac7745da13484304250dee26b7390c3754c5/mixt-1.1.3.tar.gz"
        }
    ]
}