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

SUGGESTION: Handle plain HTML #990

Open
ocomsoft opened this issue Nov 5, 2024 · 12 comments
Open

SUGGESTION: Handle plain HTML #990

ocomsoft opened this issue Nov 5, 2024 · 12 comments

Comments

@ocomsoft
Copy link

ocomsoft commented Nov 5, 2024

I think this project is getting a lot of traction in the Go community, especially for HTMX

As a GoLand user the experience is not the best (Sorry, I appreciate the effort)

What I think would be ideal is if we can write "plain" HTML as much as possible. ie without the "templ" code before and after the actual template. I think what we have already works well and is still required.

I have 2 suggestions

  1. How about we add an "include" command that generate will load the file and include as if the HTML was inline.
package main

templ hello(name string) {
	{{include hello.html}}
}

Where hello.html has plain html with templ mark in it ie

<div>Hello, { name }</div>

This means we can define the imports and the parameters etc as we can now but we can also have our IDE handle the file as a normal HTML with whatever templating code is in there.

  1. Create a new "format" that can be read by generate and pre-processed to create a "templ" file

I am not sure what the best syntax is but a suggestion would be something like this:

<!DOCTYPE html>
<templ:import>"github.com/duke-git/lancet/v2/strutil"</templ:import>
<templ:param>name string</templ:param>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample File</title>
</head>
<body>
<h1>
    This is a Sample {{name}}
</h1>
</body>
</html>

My initial proposal is we have some "templ" elements that we can "find" using "golang.org/x/net/html" and process.
The templ:import would be used to create Imports in the Go Code and the templ:param would be used to add params to the templ function. We could use the directory name for the package name or add a templ:package and the function name could be the file name or again add a templ:func etc.

This could be pre-processed into a templ file ie

package directory_name

import "github.com/duke-git/lancet/v2/strutil"
templ Filename(name string) { 
<!DOCTYPE html><html lang="en"><head></head><body>
    <meta charset="UTF-8"/>
    <title>Sample File</title>


<h1>
    This is a Sample {{name}}
</h1>


</body></html>
}

I am not sure how this fits with your philosophy for templ but I am hoping I might have some ideas in here that make sense.
Or maybe I am trying to convert this into something else. I could not find another issue that mentions anything like this so I hope I m not rehashing something that has already been discussed.
@joerdav
Copy link
Collaborator

joerdav commented Nov 5, 2024

Thankyou for the proposal, and taking some time out to submit it so thoroughly!

I agree that the GoLand plugin experience is still sub-optimal, this is mainly down to the core maintainers not using GoLand so struggling to prioritise work in that area.

I can understand the reasoning behind your proposal, you want to be able to write code in HTML files so that you can get the tooling that GoLand provides for HTML editing? One thing we'd need to consider carefully is how this change might impact existing templ tooling, there would be a trade-off there the use of the GoLand HTML tooling for editing would not provide autocomplete for go expressions within the template.

My second thought on this is that the syntax you provided is very different to templ as it is. Our philosophy with the templ "language" is to introduce as little "templ" as possible, it should feel like a combination of go and html, so that it is familiar to new users. I think this change would introduce a separate templ language for people to learn as well as the .templ syntax.

Ideally we would improve the GoLand experience, if you have time to outline issues you are having with it in the issue tracker, or to give a 👍 on any issues that you are experiencing, it'll help us prioritise the problems.

@ocomsoft
Copy link
Author

ocomsoft commented Nov 5, 2024

I appreciate your response. I have not tried the tooling in Vscode so I cannot comment. I was thinking this would be a more generic solution.

My proposal for the "elements" was because I have already developed a quick Proof of concept that takes the html and generates a templ file. I also think we could so something like {{import "somepackage"}} and {{methodname "MyTemplate"}} which would look more templ language like.

Please understand this is not a criticism of the development done for the Goland Plugin. It was more about there is way more tooling for HTML and even HTML with "templating" languages than the other way around :)

My other suggestion which I havent explored alot would be what if we had an {{include "filename.html"}} and it will include the file as if it was inline this way the templ language doesn't change and I can use other tooling on the HTML template. What are your thoughts on that?

Please understand, I am only trying to make this better. I think this will be a key go tech especially with htmx developers.

@joerdav
Copy link
Collaborator

joerdav commented Nov 6, 2024

With your {{include "filename.html"}} idea are you suggesting that the html file being included would be a static html file with no templating?

I have thought about a type HTML string (or something with a better name!) that could be used as follows:

package main

import _ "embed"

//go:embed file.html
var myFile templ.HTML

templ MyComponent() {
    <div>
        @myfile
    </div>
}

But with this there would be no way of the "embedded" html file containing dynamic content.

@ocomsoft
Copy link
Author

ocomsoft commented Nov 6, 2024

Thank you for considering what I am suggesting

I was thinking that the other file would be processed inline as if it was 1 file. So yes it would have templating codes. The idea is the .templ file is the same as we currently have with imports and func signatures except now I have have a file which is html or even xml or anything next to the file and use what ever tooling is available for that file.

So the generator would need to load the file and continue processing it with the same "environment" as if the contents were pasted into the "templ" function.

In the end this is 1 x .go file output..

I had a look to see if I could implement it but I couldn't see where to start.
Hope this makes sense

@joerdav
Copy link
Collaborator

joerdav commented Nov 6, 2024

I think it does make sense yes, the main idea is an inversion, from html-in-go to go-in-html. And I do agree this would unlock a lot of tooling that already exists for HTML.

I did want to ask though, were there specific features you were missing when switching from a html file to a templ file?

@ocomsoft
Copy link
Author

ocomsoft commented Nov 6, 2024

Yes I guess you are right it's an Inversion

For me, I think it would be easier to use lots of other tools to edit the HTML with some templating than the other way around.

Even a gui HTML editor could be used etc or any number of other "designer" tools. I hope that makes sense.

Thanks again for considering my idea

@joerdav
Copy link
Collaborator

joerdav commented Nov 7, 2024

Are there any such tools that you are used to using when editing HTML that you can mention? I'm interested in the specific parts of editing a templ file which are a source of friction at the moment :)

@ocomsoft
Copy link
Author

I dont have a specific tool in mind. But I know Goland Handles HTML pretty good and would be an easy way to get started.

@joerdav
Copy link
Collaborator

joerdav commented Nov 11, 2024

We actually rely on the Goland HTML feature in some places, attribute autocomplete, auto closing tags etc.

We pass the HTML in your templ file over to Goland to process, so any niceties that you get in a HTML file you should also get in a templ file. If you don't then we can look to adding it.

@ocomsoft
Copy link
Author

My apologies. The plugin would simply not work for me so I had no idea. If I disabled and restarted then reenabled it worked for that session but that was never very long so I really didn't get to use it very much.

@joerdav
Copy link
Collaborator

joerdav commented Nov 12, 2024

Okay, out of curiousity how long ago did you try the plugin? What version? There was a bug fix recently that should help problems with it not starting up.

@ocomsoft
Copy link
Author

Sorry Life got in the way. It had been a few weeks earlier than I created this issue.
The aim of the Include was to make it easier for Non developers to provide HTML snippets that we can use with Templ.

@ocomsoft ocomsoft changed the title SUGGESTION: Handle plan HTML SUGGESTION: Handle plain HTML Nov 27, 2024
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
2 participants
@ocomsoft @joerdav