Implement raw HTML elements

[kbrgl]

This PR adds raw HTML elements under the pynecone.el namespace that can be used in conjunction with class_name and stylesheets to support Tailwind and other custom workflows. (Support for stylesheets is not included in this PR, I’ll make a separate PR for that.)

The following is now possible:

from pynecone import el

def index():
    return el.div(
        el.div(
            el.h1("Welcome to Pynecone!", style={"font_size": "2em"}),
            el.div(
                "Get started by editing ",
                pc.code(filename, style={"font_size": "1em"}),
            ),
            el.a(
                "Check out our docs!",
                href=docs_url,
                style={
                    "color": "rgb(107,99,246)",
                    "border": "0.1em solid",
                    "padding": "0.5em",
                    "border_radius": "0.5em",
                    "display": "inline-block",
                },
            ),
            style={
                "font_size": "2em",
                "display": "flex",
                "flex_direction": "column",
                "align_items": "center",
            },
        ),
        style={
            "padding_top": "10%",
            "display": "flex",
            "justify_content": "center",
        },
    )

This PR contributes the following files under pynecone/el/:

element.py

Subclasses Component in order to remove the Chakra sx prop from the render. sx has been replaced with the raw style prop, meaning when you say something like

el.div(style={"font_size": "1em"})

It is compiled to:

<div style={{fontSize: '1em'}} />

constants.py

This file contains constants that are used in generating base elements:
1. ELEMENTS: A list of all valid HTML elements (including deprecated and obsolete ones) from MDN.
2. ATTR_TO_ELEMENTS: A dict mapping HTML attributes to all the elements that can possess those attributes. (e.g. "autofocus": ["button", "input", ...])
3. PROP_TO_ELEMENTS (derived from ATTR_TO_ELEMENTS): A dict mapping Pynecone props (e.g. auto_focus) to the elements which can possess them.
4. _POSSIBLE_STANDARD_NAMES: Used internally to go from HTML attribute names to their React versions.
5. ELEMENT_TO_PROPS: This is just PROP_TO_ELEMENTS inverted; maps elements to the props that they can legally possess.

generate.py

This is the main compilation script. It's pretty short, so just read the source code. TL;DR, it uses a simple template to generate a subclass of Element for each element in ELEMENT_TO_PROPS, and outputs all the generated code to elements/__init__.py.

elements/__init__.py

Contains all the generated elements. Should not need manual review, just skim if necessary.

Design Decisions

1. The Element subclass for the <del /> element is called Del, but it's used as el.del_ since del (lowercase) is a reserved keyword. I could have made the subclass name Del_, but I don't think that makes sense since reserved keywords are case-sensitive and Del works fine. This way, as a rule of thumb, you can assume that if something in the API resembles a keyword, you just need to append an underscore (with the exception of the class prop, which is used as class_name).
2. async is a reserved keyword; the async_ prop is used instead.
3. Code for all elements is output to a single generated file (pynecone/el/elements/__init__.py) rather than multiple files (pynecone/els/elements/a.py, pynecone/els/elements/abbr.py, etc.) because we don't want to manually edit the generated code. The generated file contains a "Do not edit" warning to this effect.

Misc.

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

New Feature Submission:

• Does your submission pass the tests?
• Have you linted your code locally prior to submission?

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you successfully ran tests with your changes locally?

[picklelo]

Nice job adding all this! There's some lint errors to clean up then we can merge it in.

[sheldonchiu]

will this be merge any time soon?

[Alek99]

will this be merge any time soon?

Yes this will be merged this weekend. Sorry this last week has been crazy busy for us.

[sheldonchiu]

will this be merge any time soon?

Yes this will be merged this weekend. Sorry this last week has been crazy busy for us.

Take your time. I'm just asking because my project rely heavily on this feature. 😆

[Alek99]

will this be merge any time soon?

Yes this will be merged this weekend. Sorry this last week has been crazy busy for us.

Take your time. I'm just asking because my project rely heavily on this feature. 😆

We need to test this pr more. This will be out in the 0.1.22 release.

[picklelo]

Awesome, looks good!