Issues with templates when using templ generate

[simenandre]

Describe the bug

It seems like when using templ generate --watch, and things change, some of the components are not rendered correctly after.

Assuming this code:

templ aComponent() {
  <pre>
    this is a pre tag from a component
  </pre>
}

templ LandingPage() {
  @layout() {
    <main>
      <h1>Hello world!</h1>
      <p>templ is awesome, but it seems to have issues with template generation when using --watch</p>
      <h2>You should see a component under</h2>
      // Try to uncomment this after starting with --watch
      // @aComponent()
      <p>Hello again! We are done with the components</p>
    </main>
  }
}

Should produce this:

<!-- Layout -->
<main>
  <h1>Hello world!</h1>
  <p>templ is awesome, but it seems to have issues with template generation when using --watch</p>
  <h2>You should see a component under</h2>
  <p>Hello again! We are done with the components</p>
</main>
<!-- /Layout -->

However, if you uncomment @aComponent() while running --watch, you
get this:

<!-- Layout -->
<main>
  <h1>Hello world!</h1>
  <p>templ is awesome, but it seems to have issues with template generation when using --watch</p>
  <h2>You should see a component under</h2>
 </main>
<!-- /Layout -->

To Reproduce

1. Clone this repository: https://github.com/simenandre/templ-watch-bug
2. Run task dev to start the templ generate --watch (and go server)
3. Open the browser and go to http://localhost:8080 (or http://localhost:7331 for the proxyed version)
4. Uncomment @aComponent in templates/landing.templ and save the file
5. Reload the browser window and the component will be rendered wrong

Screenshots

This is how it is supposed to look:

After changing, this is how it looks:

Everything goes back to how it supposed to when generating like normal with templ generate.

Logs

❯ task dev
task: [dev] templ generate --watch --proxy="http://localhost:8080" --open-browser=false --cmd="task run --watch --interval=100ms" -v
(✓) Starting event handler
(✓) Starting post-generation handler
(✓) Walking directory [ path=/hello/templ-watch-bug devMode=true ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/header_templ.go ]
(✓) Watching files
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/header.templ ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/layout_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing.templ ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/layout.templ ]
(✓) Waiting for context to be cancelled to stop watching files
(✓) Generated code [ file=/hello/templ-watch-bug/templates/landing.templ in=4.865833ms ]
(✓) Generated code [ file=/hello/templ-watch-bug/templates/header.templ in=4.981208ms ]
(✓) Generated code [ file=/hello/templ-watch-bug/templates/layout.templ in=4.775916ms ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.txt ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/header_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/layout_templ.txt ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/layout_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/header_templ.txt ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/layout_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/header_templ.go ]
(✓) Executing command [ command=task run --watch --interval=100ms ]
(✓) First post-generation event received, starting proxy
(✓) Not opening browser
(✓) Sending reload event
(✓) Proxying [ from=http://127.0.0.1:7331 to=http://localhost:8080 ]
task: Started watching for tasks: run
task: Task "build" is up to date
task: Task "generate:css" is up to date
task: [run] ./bin/server
(✓) Processing file [ file=/hello/templ-watch-bug/templates/header_templ.txt ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/layout_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/header_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.go ]
(✓) Sending reload event
(✓) Processing file [ file=/hello/templ-watch-bug/templates/layout_templ.txt ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.txt ]
(✓) Sending reload event
(✓) No content encoding header found
(✓) Reload script inserted
(✓) Skipping response modification because content type is not text/html [ content-type=text/plain; charset=utf-8 ]
(✓) No content encoding header found
(✓) Reload script inserted
(✓) Skipping response modification because content type is not text/html [ content-type=text/plain; charset=utf-8 ]
(✓) No content encoding header found
(✓) Reload script inserted
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing.templ ]
(✓) Generated code [ file=/hello/templ-watch-bug/templates/landing.templ in=4.014667ms ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing.templ ]
(✓) Skipping file because it wasn't updated [ file=//hellotempl-watch-bug/templates/landing.templ ]
(✓) Processing file [ file=//hellotempl-watch-bug/templates/landing.templ ]
(✓) Skipping file because it wasn't updated [ file=//hellotempl-watch-bug/templates/landing.templ ]
(✓) Executing command [ command=task run --watch --interval=100ms ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.txt ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.go ]
task: [build] go build -o ./bin/server main.go
task: Task "generate:css" is up to date
(✓) Sending reload event
task: Started watching for tasks: run
task: Task "build" is up to date
task: Task "generate:css" is up to date
task: [run] ./bin/server
(✓) Sending reload event
(✓) No content encoding header found
(✓) Reload script inserted
(✓) No content encoding header found
(✓) Reload script inserted
(✓) Skipping response modification because content type is not text/html [ content-type=text/plain; charset=utf-8 ]
(✓) Skipping response modification because content type is not text/html [ content-type=text/plain; charset=utf-8 ]
(✓) No content encoding header found
(✓) Reload script inserted
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing.templ ]
(✓) Skipping file because it wasn't updated [ file=/hello/templ-watch-bug/templates/landing.templ ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.txt ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.go ]
(✓) Sending reload event
(✓) No content encoding header found
(✓) No content encoding header found
(✓) Reload script inserted
(✓) Reload script inserted
(✓) Skipping response modification because content type is not text/html [ content-type=text/plain; charset=utf-8 ]
(✓) Skipping response modification because content type is not text/html [ content-type=text/plain; charset=utf-8 ]
(✓) No content encoding header found
(✓) Reload script inserted
^CStopping...
(✓) Context cancelled, closing watcher
(✓) Waiting for events to be processed
(✓) All pending events processed, waiting for pending post-generation events to complete
(✓) All post-generation events processed, running walk again, but in production mode [ errorCount=0 ]
task: Signal received: "interrupt"
(✓) Processing file [ file=/hello/templ-watch-bug/templates/header.templ ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/header_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing.templ ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.txt ]
(✓) Deleting watch mode file [ file=/hello/templ-watch-bug/templates/landing_templ.txt ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/header_templ.txt ]
(✓) Deleting watch mode file [ file=/hello/templ-watch-bug/templates/header_templ.txt ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/landing_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/layout.templ ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/layout_templ.go ]
(✓) Processing file [ file=/hello/templ-watch-bug/templates/layout_templ.txt ]
(✓) Deleting watch mode file [ file=/hello/templ-watch-bug/templates/layout_templ.txt ]
(✓) Generated code [ file=/hello/templ-watch-bug/templates/header.templ in=1.973541ms ]
(✓) Generated code [ file=/hello/templ-watch-bug/templates/landing.templ in=2.178125ms ]
(✓) Generated code [ file=/hello/templ-watch-bug/templates/layout.templ in=1.74775ms ]
(✓) Post-generation event channel closed, exiting
(✓) Waiting for push handler to complete
(✓) Waiting for event handler to complete
(✓) Waiting for post-generation handler to complete
(✓) Killing command [ command=task run --watch --interval=100ms ]
(✓) Complete [ updates=15 duration=1m8.09703875s ]

templ info output

(✓) os [ goos=darwin goarch=arm64 ]
(✓) go [ location=/opt/homebrew/bin/go version=go version go1.22.5 darwin/arm64 ]
(✓) gopls [ location=/Users/cobraz/go/bin/gopls version=golang.org/x/tools/gopls v0.16.2 ]
(✓) templ [ location=/Users/cobraz/go/bin/templ version=v0.2.778 ]