Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nested components don't seem to work as expected #101

Open
sophloaf2019 opened this issue Nov 3, 2024 · 1 comment
Open

Nested components don't seem to work as expected #101

sophloaf2019 opened this issue Nov 3, 2024 · 1 comment

Comments

@sophloaf2019
Copy link

Hey. Really loving JinjaX as an idea -- I love the component "thing" but hate the overhead of most JS frameworks. Currently running into a weird problem in my Python 3.12 Flask app.

I followed the installation instructions and setup properly, and can use the catalog.render() function as-expected to render singular templates -- like a single Button, Navbar, etc.

However, when I try to nest components, something interesting happens.

Let's say I have these two components, Page.jinja and Navbar.jinja.

Let's say Page looks like this:

<!doctype html>
<html id="html" lang="en" class="">
    <head>
        <title>App</title>
    </head>
    <body>
        <Navbar></Navbar>
        {{ content }}
    </body>
</html>

As you can see, it uses the custom Navbar I made. So let's say Navbar is simply two links:

<a href="{{url_for('homepage')}}">Homepage</a>
<a href="{{url_for('orders')}}">Orders</a>

When this renders in the browser by doing something like this:

@app.route('/')
def main_page():
    return catalog.render('Page')

The page will render properly -- the HTML "infrastructure", the body tag, any classes on anything, my title, etc. all show up properly. However, the <Navbar> tag seemingly inexplicably becomes <navbar>, and doesn't render as anything more than a pair of closed tags.

This is true for other component names -- I tried one with a file called Test.jinja and it ended up rendering as <test></test>.

No idea what I'm doing wrong -- I think I followed everything in the docs properly. Any input would be greatly appreciated.

Sophie
@sophloaf2019
Copy link
Author

image

image

image

image

Here are some photos that explain what I'm talking about. In order, I show that I am calling catalog.render, followed by showing you the source code of both components, followed by the HTML tree as viewed in Firefox.

The only thing I can think of is a problem within the architecture of my app. A file, application/extensions.py, holds my db, CORS, and catalog objects. I instantiate them in app.py and return the app (as per usual app factory methods).

However, in application/blueprints/routes.py, which is where I store my homepage routes (as shown in the code above), I'm importing the catalog instance from application.extensions, like I do with my db object. I don't know enough about how JinjaX works behind the scenes to say if that's a likely issue but I figured it was worth mentioning all the same.

Soph

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@sophloaf2019