Subcomponent notation

[shawncrawley]

Description

I found one prominent case of a ReactJS API that uses what I'm calling "subcomponents". This example is from React Bootstrap, and it appears quite extensively throughout their API. For example, look at this code that was taken from this example:

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function BasicExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <InputGroup.Text id="basic-addon1">@</InputGroup.Text>
        <Form.Control
          placeholder="Username"
          aria-label="Username"
          aria-describedby="basic-addon1"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <Form.Control
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="basic-addon2"
        />
        <InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text>
      </InputGroup>

      <Form.Label htmlFor="basic-url">Your vanity URL</Form.Label>
      <InputGroup className="mb-3">
        <InputGroup.Text id="basic-addon3">
          https://example.com/users/
        </InputGroup.Text>
        <Form.Control id="basic-url" aria-describedby="basic-addon3" />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text>$</InputGroup.Text>
        <Form.Control aria-label="Amount (to the nearest dollar)" />
        <InputGroup.Text>.00</InputGroup.Text>
      </InputGroup>

      <InputGroup>
        <InputGroup.Text>With textarea</InputGroup.Text>
        <Form.Control as="textarea" aria-label="With textarea" />
      </InputGroup>
    </>
  );
}

Note the usage of components accessed with dot-notation: InputGroup.Text, Form.Control, and Form.Label. I wanted to be able to recreate the above example using ReactPy, so I went ahead and added the support.

There are two ways to approach this:

Specify the subcomponent in the export_names of the reactpy.web.export function, like so:

import reactpy

module = reactpy.web.module_from_file(
    "example", "module-that-exports-Form-and-InputGroup.js",
)
InputGroup, InputGroupText, FormControl, FormLabel = reactpy.web.export(
    module, 
    ["InputGroup", "InputGroup.Text", "Form.Control", "Form.Label"]
)
def basic_example():
    return reactpy.html.div({"id": "the-parent"},
        InputGroup(
            InputGroupText({"id": "basic-addon1"}, "@"),
            FormControl({
                "placeholder": "Username",
                "aria-label": "Username",
                "aria-describedby": "basic-addon1",
            }),
        ),

        InputGroup(
            FormControl({
                "placeholder": "Recipient's username",
                "aria-label": "Recipient's username",
                "aria-describedby": "basic-addon2",
            }),
            InputGroupText({"id": "basic-addon2"}, "@example.com"),
        ),

        FormLabel({"htmlFor": "basic-url"}, "Your vanity URL"),
        InputGroup(
            InputGroupText({"id": "basic-addon3"},
                "https://example.com/users/"
            ),
            FormControl({"id": "basic-url", "aria-describedby": "basic-addon3"}),
        ),

        InputGroup(
            InputGroupText("$"),
            FormControl({"aria-label": "Amount (to the nearest dollar)"}),
            InputGroupText(".00"),
        ),
        
        InputGroup(
            InputGroupText("With textarea"),
            FormControl({"as": "textarea", "aria-label": "With textarea"}),
        )
    )

Use the dot accessor (getattr) on the "parent" objects returned by the reactpy.web.export function, like so:

module = reactpy.web.module_from_file(
    "example", "module-that-exports-Form-and-InputGroup.js",
)
InputGroup, Form = reactpy.web.export(module, ["InputGroup", "Form"])

def basic_example():
  return reactpy.html.div({"id": "the-parent"},
        InputGroup(
            InputGroup.Text({"id": "basic-addon1"}, "@"),
            Form.Control({
                "placeholder": "Username",
                "aria-label": "Username",
                "aria-describedby": "basic-addon1",
            }),
        ),

        InputGroup(
            Form.Control({
                "placeholder": "Recipient's username",
                "aria-label": "Recipient's username",
                "aria-describedby": "basic-addon2",
            }),
            InputGroup.Text({"id": "basic-addon2"}, "@example.com"),
        ),

        Form.Label({"htmlFor": "basic-url"}, "Your vanity URL"),
        InputGroup(
            InputGroup.Text({"id": "basic-addon3"},
                "https://example.com/users/"
            ),
            Form.Control({"id": "basic-url", "aria-describedby": "basic-addon3"}),
        ),

        InputGroup(
            InputGroup.Text("$"),
            Form.Control({"aria-label": "Amount (to the nearest dollar)"}),
            InputGroup.Text(".00"),
        ),
        
        InputGroup(
            InputGroup.Text("With textarea"),
            Form.Control({"as": "textarea", "aria-label": "With textarea"}),
        )
    )

Checklist

Please update this checklist as you complete each item:

• Tests have been developed for bug fixes or new functionality.
• The changelog has been updated, if necessary.
• Documentation has been updated, if necessary.
• GitHub Issues closed by this PR have been linked.

_{By submitting this pull request I agree that all contributions comply with this project's open source license(s).}

[Archmonger]

Needs fixes for lint related tests.

Also, there is an issue ticket for this. The ticket does suggest a way of implementing this where it could support several layers of sub-components (Navbar.Foo.Bar), but I'm not entirely certain if there are any libraries out there that do deeply nested components like that.

[shawncrawley]

Oddly, if I run hatch fmt on my machine, it shows no errors... I'll fix them based on what the failing tests are showing, of course.

Also, my implementation supports accessing deeply nested components as well - although, like you mentioned, it's probably rare and may not even exist.

[Archmonger]

hatch fmt is only for Python source. hatch run javascript:check and hatch run javascript:fix are for JS source.

[Archmonger]

See comments.

Additionally, this PR needs a new changelog entry.

[Archmonger]

I don't think this variable name makes much sense. Shouldn't it be something like rootPackageName?

[shawncrawley]

I used rootType since this the variable two lines above is type - which refers to the type of Element (i.e. Component) being created. But I went ahead and changed this anyway. In fact, I decided to somewhat refactor the createImportSourceElement function to move a bit more logic into the getComponentFromModule function (renamed from tryGetSubType, as you requested below). Have a look at it now and see if the logic flows well.

[shawncrawley]

Not sure why these tests are failing... For example, the test test_module_from_url fails in the same general fashion locally (i.e. while "waiting for locator("#my-button") to be visible"). Upon digging further, it's showing this error in the rendered browser:

Uncaught (in promise) SyntaxError: The requested module 'https://unpkg.com/preact?module' does not provide an export named 'h' (at simple-button.js:1:10)

Which points to this line in simple-button.js: import { h, render } from "https://unpkg.com/preact?module";

Any thoughts on what I'm missing?

[Archmonger]

Regarding the https://unpkg.com/preact?module error, all of our web module tests have been broken since this morning... I'm not sure if unpkg changed something, or if it's the kind of issue that will resolve itself tomorrow.

It also happened momentarily last week as well (on your last PR).

I'll re-run the tests on this PR tomorrow and see if it magically fixes itself.

There does seem to be some other unrelated issues in the CI errors for the latest commit though.

[Archmonger]

Minus some formatting awkwardness, PR can be merged if the tests fix themselves tomorrow.

[shawncrawley]

I fixed the failing python tests by swapping unpkg for esm. Let me know if you'd rather not do that.

I have no idea why the javascript tests are all failing. They pass on my local machine. Any ideas there?

[Archmonger]

Looks like the test-javascript workflow is broken due to outdated dependencies.

cd '.\src\js\packages\event-to-object\'
bun outdated

On a different note, the latest scheduled CI run on main has shown that test-javascript is the only broken workflow. So, your typescript changes might have added unpkg incompatibility. Or maybe this week unpkg decided to unbreak itself?

Would be worth investigating by reverting the last commit and seeing if the test-python workflow is still broken.

[shawncrawley]

Yeah, it looks like it was just unpkg being a bully last week. I reverted that change and nothing more, and they are now passing. The only thing broken at this point is the test-javascript check. I'm happy to try to get a fix for that into this PR as well, but I'm not quite sure what needs to be done there in terms of "outdated dependencies". Let me know. Either way, I think my stuff should be good now.

[Archmonger]

The tests seem to work on my local Windows and Linux test environments, so I've opted to just disable the tests for now.

The event-to-object JavaScript package is slated to be rewritten soon-ish, so the broken dummy tests are negligible as long as everything works within ReactPy core.