Comments (11)
I found a workaround in the meantime:
templ x() {
<pre> {`
package main
func main() {
println("Hello, world!")
}
`} </pre>
}
from templ.
Just thinking about this some more, now that the auto formatting, and spaces between variables are dealt with.
Options as I see it from here:
- Accept that this workaround is acceptable and document it.
- Decide that children of the
<pre>
element should not have whitespace removed. - Something else?
What are you thoughts?
from templ.
For option 2 above, the solution would probably be something like how the indentation for autoformatting now works. The element type has a field on it to set the behaviour:
Lines 319 to 325 in fa536dd
So in this case, adding a new PreserveWhitespace
field to the element, and setting it to true if the element name is pre
. Then, adding something to the generator that adds a context variable and passes that down to children. The generated code would always need to include the whitespace for elements, and optionally include it in the output based on the context value.
It could potentially slow down all rendered content, due to needing to check for the flag.
from templ.
I have just discovered the library, great job, thanks. I have to say I was a bit surprised when I realized the output did not have the same structure as the source. I think it would be much easier to reason about it if they were the same.
What happens in the case of putting an element inside another element like pre
, I do not think a workaround works with that.
For example
<pre>
for _, item := range items {
<a href={ templ.URL(item.Name) }>{ item.Name }</a> { item.ModifiedAt } { item.Size }
}
</pre>
Also, if this library will ever handle text formats other than HTML one day, auto line collapsing and single spacing would not be acceptable.
How about making single space, new line collapsing optional?
from templ.
Thanks for everyone's thoughts on this.
One solution might be to drop built in minification as a goal, and suggest the use of something like github.com/tdewolff/Minify which provides HTTP middleware.
This may negatively affect the performance for users that require it.
However, it would simplify the job of templ since the rendering logic would be simpler.
On the other hand, maybe it's as simple as updating the rendering logic to not strip white space from pre
elements. With regards to supporting changes to block/inline driven by CSS, I note that the minfication library above doesn't support that.
Supporting formats other than HTML isn't a goal for templ.
The goal is to make Go a viable language for commercial front end web development when used with tools like HTMX.
I'll digest this thread and come up with some concrete actions.
from templ.
This may negatively affect the performance for users that require it.
I think this is a fair tradeoff. It should be reasonable for people to assume that templ
is a templating library, not some sort of framework that tries to do everything at once.
Of course, we could always just introduce a config file, though I'm personally not a huge fan of this idea.
from templ.
This could do with some investigation to find out if the issue still stands, and make a decision on the outcome.
from templ.
I found a workaround in the meantime:
templ x() { <pre> {` package main func main() { println("Hello, world!") } `} </pre> }
This will only work with <pre>
not inside <pre><code>
.
For example when I am using:
<pre>
<code>
{ `
sudo apt update
sudo apt install nginx
` }
</code>
</pre>
it doesn't work. But if I remove the <code>
, then it will work.
<pre>
{ `
sudo apt update
sudo apt install nginx
` }
</pre>
Is there any other workaround for this?
from templ.
@vblinden - what do you mean "works" vs "doesn't work"? Would be good to see the actual HTML output vs what you expected.
from templ.
@a-h Sorry, I was running an older version of the templ. I upgraded to the latest version and now the workaround works. Sorry again for the inconvenience.
from templ.
I can see that this now works for both <pre>
and <code>
from templ.
Related Issues (20)
- -stdout sends error report to output file HOT 3
- bug: script elements don't render script templates
- lsp: support the organizeImports code action HOT 3
- Wasm support for interacting with the DOM HOT 3
- generator: can't use iterator value in for loop HOT 8
- max retries reached HOT 3
- lsp: panic on codeAction HOT 6
- question: Escape go keywords at the beginning of the line HOT 3
- generator: Duplicate Import Statements in Generated Templates Cause go build Failure HOT 5
- vscode: folded files in tree view seem to not work when rust-analyzer is installed HOT 2
- Issue: Unexpected Script Placement in Generated HTML HOT 3
- fmt: <pre> tags not handled correctly HOT 3
- parser: style attribute of DOM element doesn't accept dynamic styles HOT 1
- proposal: Typed Children for Wrappers HOT 2
- Proposal: Allow spreading List of `templ.Components`, similar to `{ children ... }` HOT 1
- css expression: found unexpected parameters HOT 2
- generator: Add nonce support for style tags
- Abandoned change to not modify files where fmt makes no changes HOT 3
- Proposal: Load file as templ HOT 4
- Help with intercepting middleware, and writing responses HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from templ.