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

DOCTYPE declaration causes strangeness in the vscode extension #17

Closed
pharrisee opened this issue Jun 25, 2021 · 4 comments
Closed

DOCTYPE declaration causes strangeness in the vscode extension #17

pharrisee opened this issue Jun 25, 2021 · 4 comments

Comments

@pharrisee
Copy link

pharrisee commented Jun 25, 2021 •
edited
Loading

When creating a .templ file I noticed a very strange thing happening if the layout had a doctype declaration.

For example, this code (which looks like it should be valid to me):

{% package templates %}

{% templ Layout(content templ.Component) %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {%! content %}
</body>
</html>
{% endtempl %}

{% templ Layout1(content templ.Component) %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {%! content %}
</body>
</html>
{% endtempl %}

when this was saved in vscode, immediately turns into:

{% package templates %}

i.e. the actual templ declarations were removed.

The actual layout was much more detailed but I distilled it down to the fact that if any templ declaration with a doctype declaration exists in the templ file then all templ declarations are removed, but only if the first templ declaration is the one that contains the doctype. Having the templ declarations the other way round (Layout1 first, followed by Layout) it works fine.

I hope it's just me.

Any ideas?
@a-h
Copy link
Owner

a-h commented Jun 25, 2021

Thanks for checking out the project!

You've definitely found a bug in the parser.

The parser bug is that templ currently requires all elements to be closed (or be self-closing), and the DOCTYPE is an unclosed element, so it's clearly getting to the end of the file and not finding the end element. Since it can't find the end tag, it really should be complaining about it.

Just in case it's not clear, templ is closer to JSX than it is to writing HTML. templ files are compiled into an object model that can be rendered at runtime. Other templating libraries don't have that object model concept, and let you insert code blocks wherever you like. So React has a similar problem - facebook/react#1035

You'll find that HTML text and comments aren't currently supported by templ too (for text, you can use a Go expression - {%= "text" %}, I'm thinking of adding comment support in the Go style rather than the HTML style).

templ is designed for server-side rendering, and DOCTYPE is essential. I'll add DOCTYPE support, and take a look at that parser issue too.

@a-h
Copy link
Owner

a-h commented Jun 25, 2021 •
edited
Loading

By the way, you can use a "code" component to work around the lack of DOCTYPE support. Make sure it's in the same package, or import the package into your templ file.

func HTML5DocType() templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
		_, err = io.WriteString(w, "<!DOCTYPE html>")
		return
	})
}

And you should be able to use it like:

{% templ Layout(content templ.Component) %}
{%! HTML5DocType() %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {%! content %}
</body>
</html>
{% endtempl %}

I could add some "code" components like this to templ so that people can use them, but I think it's better not to surprise people too much, and I think it's pretty easy to support DOCTYPE elements (doesn't add much complexity/code).

Would love to hear your thoughts!

a-h added a commit that referenced this issue Jun 25, 2021
@a-h
feat: add DOCTYPE support, see #17
8aaf0a3
@a-h
Copy link
Owner

a-h commented Jun 25, 2021

Take a look at the commit above. There's an example of DOCTYPE support that I'll include in the next release.

@a-h a-h closed this as completed in 0226fe5 Jun 25, 2021
@a-h
Copy link
Owner

a-h commented Jun 25, 2021

I've also fixed the issue with templ declarations being removed, and improved the error messages above. Let me know if there's any problems. Feel free to reopen if you want to discuss anything.

These changes are included in this release and later: https://github.com/a-h/templ/releases/tag/v0.0.126

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
@pharrisee @a-h