Single file components

[vb8448]

Have you ever thought to implement a single file component, similar to vuejs ?

Eg.:

@component.register("calendar")
class Calendar(component.Component):
    # This component takes one parameter, a date string to show in the template
    def get_context_data(self, date):
        return {
            "date": date,
        }
   
    template = """
        <div class="calendar-component">Today's date is <span>{{ date }}</span></div>
    """
    css = """
        .calendar-component { width: 200px; background: pink; }
        .calendar-component span { font-weight: bold; }
    """
    js = """
        (function(){
            if (document.querySelector(".calendar-component")) {
                document.querySelector(".calendar-component").onclick = function(){ alert("Clicked calendar!"); };
            }
        })()
    """

[EmilStenstrom]

This is a great idea. I have thought of ways of making this happen. I don't think I like having everything as strings, because you lose all syntax highlighting in editors. Is there a way to get syntax highlighting some other way?

[vb8448]

you lose all syntax highlighting in editors. Is there a way to get syntax highlighting some other way?

Pycharm seems to support language injections and I guess also vscode does. Probably a specific extension will be needed.

[EmilStenstrom]

I did some reading on this, and found a couple of crazy solutions such as https://github.com/twidi/mixt/ which have solved this in a mix of crazy and fantastic. But there's really nothing good out there. Language injections works in pycharm, but not in vscode. This also bypasses Django's template loading system, which loses caching.

Overall, I think using strings like in your quick example would quickly break down for bigger components. So right now it's a "wontfix".

I do really like to have a solution for this, but I just don't see a solution I'd like to recommend to users. Losing syntax highlighting in editors seems like the major one right now.

[aymericderbois]

I love the idea of having the template directly in a component variable. This is especially useful when you want to make small components!
Unfortunately for syntax highlighting, I think there is no solution. Even with Pycharm, the support of language injections is limited.

Nevertheless, as this is the kind of functionality I could use, I tried to make some tests and I made a quick development that allows to have "inline template".

Here is a "countdown" component, with the template directly in the component :

@component.register("countdown")
class Countdown(component.Component):
    template_string = """
        <span
          data-ended-at-timestamp="{{ until.timestamp }}"
          x-data="{
                interval: null,
                init() {
                    this.endTimestamp = parseInt($el.dataset.endedAtTimestamp);
                    this.processCountdown();
                    this.interval = setInterval(() => this.processCountdown(), 1000);
                },
                processCountdown() {
                    const currentTimestamp = Math.floor(Date.now() / 1000)
                    const remainingTime = this.endTimestamp - currentTimestamp;
                    if ($refs.days === undefined && this.interval !== null) {
                        clearInterval(this.interval)
                    } else {
                        $refs.days.innerHTML = Math.floor(remainingTime / 60 / 60 / 24)
                        $refs.hours.innerHTML = Math.floor(remainingTime / 60 / 60) % 24
                        $refs.minutes.innerHTML = Math.floor(remainingTime / 60) % 60
                        $refs.seconds.innerHTML = Math.floor(remainingTime) % 60
                    }
                }
            }"
        >
            <span x-ref="days"></span>j
            <span x-ref="hours"></span>h
            <span x-ref="minutes"></span>ms
            <span x-ref="seconds"></span>s
        </span>
    """

    def get_context_data(self, until: datetime):
        return {
            "until": until,
        }

The commit applying the modification is here : aymericderbois@d650a92

The advantage of this implementation is to keep the use of the Django template system. I did this quickly, so I guess it could be greatly improved.

[EmilStenstrom]

Thanks for taking the time to show how it could look like.

I really don't like the developer ergonomics of having to write html, css, and js inside of python strings. If there was (when there is?) a way to enable syntax highlighting in some clever way, I would be OK with this change. But as it stands, I don't think we should encourage that kind of code, and instead only support having separate files in a directory.

Since all the changes are in the Component class, I think you could make your own component base, and inherit from that inside your project? That way, we wouldn't have to build this as part of the core django-components.

[EmilStenstrom]

Hmm. I keep thinking about how to get this done, because it would a lot simpler. Maybe we should write a custom VSCode extension that can highlight our custom file format?

[EmilStenstrom]

I have opened the following PR to try to get editors to highlight this code: microsoft/vscode#169560

[EmilStenstrom]

The Python extension people with VSCode are currently thinking about adding support for this (!). All we need right now are more upvotes on this ticket: https://www.github.com/microsoft/pylance-release/issues/3874

Is this something that you, or your colleague, or maybe your grandmother would find useful? Please add a 👍 to that issue, and tell your friends! We're doing this!!

[rtr1]

I was able to get syntax highlighting to work using https://github.com/samwillis/python-inline-source

[EmilStenstrom]

@rtr1 This is FANTASTIC news! This solved the major pain point I see with having inline components like this. I'm definitely open to allowing inline css/javascript now! Maybe also template code?

[rtr1]

I got two Tailwind VS Code extensions to work inside Python strings.

• Tailwind CSS IntelliSense (for Tailwind autocompletion)
• Inline Fold (to hide the long Tailwind lines)

Now with Tailwind, Alpine, and HTMX, I'm making Django components with only the .py file. I love it!

In VS Code's settings.json:

     "editor.quickSuggestions": {
        "strings": true
     },
     "tailwindCSS.includeLanguages": {
        "python": "html"
      },
      "[py]": {
        "tailwindCSS.experimental.classRegex": [
          "\\bclass=\"([^\"]*)\"",
        ]
    },
    "inlineFold.supportedLanguages": [
        "python"
    ]

And then using Tailwind CLI, in tailwind.config.js:

module.exports = {
  content: [
    './apps/**/templates/**/*.html',
    './components/**/*.html',
    './components/**/*.py'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

[EmilStenstrom]

@rtr1 Sounds great! Do you run a fork of django-components that supports inline strings? Would you mind submitting a PR?