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.

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

[labs/ssr] Option to omit <!--lit-part--> comments #1928

Closed
tstewart-klaudhaus opened this issue May 27, 2021 · 7 comments
Closed

[labs/ssr] Option to omit <!--lit-part--> comments #1928

tstewart-klaudhaus opened this issue May 27, 2021 · 7 comments

Comments

@tstewart-klaudhaus
Copy link

Hi, I'm evaluating the new SSR capability, and its suitability for replacing lit-html-server for various tasks. I'm running a simple test:

import { render } from "@lit-labs/ssr/lib/render-with-global-dom-shim.js"
import { html } from "lit"

const view = (name: string) => html`<h1>Hello, ${name}</h1>`

const ssrResult = render(view("Tim"))

for (const chunk of ssrResult) {
  console.log(chunk)
}

And getting output like:

<!--lit-part iTZS7SiW4tA=-->
<h1>Hello, 
<!--lit-part-->
Tim
<!--/lit-part-->
</h1>
<!--/lit-part-->

So far so good. I imagine that the lit-part comments are useful for rehydrating server-side rendered templates on the client - which I guess is your main use-case. But I'm also considering other templating uses, such as:

  • static site generation
  • data-driven HTML email generation
  • typical old-school server side app rendering plain HTML templates
  • cloud functions providing pre-rendered, non-JS page widgets
  • etc...

Now I guess I can add a stage to my tasks to parse out those comments, but I'm just wondering if these are valid use cases for lit-labs/ssr, and if so whether an extra rendering option (perhaps included in the renderInfo parameter to render) could indicate that they are not needed and leave them out?
@kevinpschaaf
Copy link
Member

Yeah, I think we could probably add a render option to omit the hydration markers.

Thanks for the feature request.

@tstewart-klaudhaus
Copy link
Author

That's great to hear, thanks.

@aomarks aomarks changed the title Using SSR for non-hydrating tasks [ssr] Using SSR for non-hydrating tasks Jan 19, 2022
@aomarks aomarks changed the title [ssr] Using SSR for non-hydrating tasks [ssr] Option to omit <!--lit-part--> comments Jun 10, 2022
@markcellus
Copy link

I'm using lit-ssr to render more than just bits of the HTML page, so this issue is a little more critical for my use case.

For my project, I'd like to render the HTML document bits like <!DOCTYPE html>, <html lang="en">, etc. But these get rendered with surrounding lit-part markers, which prevents the HTML page from showing correctly in the browser.

Is there a suggested workaround we could use until this is handled in the package? Thanks for any information!

@aomarks
Copy link
Member

aomarks commented Jun 11, 2022

I'm using lit-ssr to render more than just bits of the HTML page, so this issue is a little more critical for my use case.

For my project, I'd like to render the HTML document bits like <!DOCTYPE html>, <html lang="en">, etc. But these get rendered with surrounding lit-part markers, which prevents the HTML page from showing correctly in the browser.

Is there a suggested workaround we could use until this is handled in the package? Thanks for any information!

In @lit-labs/eleventy-plugin-lit we have a hacky workaround to just remove the outer comments with a regexp:

lit/packages/labs/eleventy-plugin-lit/src/index.ts

Line 240 in b12e8d9

function trimOuterMarkers(renderedContent: string): string {
Might be good enough in the short term?

@markcellus
Copy link

Thanks! I just opted to use decomment package since I actually want to get rid of all HTML comments in output instead of just lit's markers. Worked like a charm!

@justinfagnani justinfagnani changed the title [ssr] Option to omit <!--lit-part--> comments [labs/ssr] Option to omit <!--lit-part--> comments Mar 23, 2023
@justinfagnani
Copy link
Member

I hope to take a look at this soon. We need to figure out how exactly this would be exposed API-wise.

Some of the use-cases we're aware of include server-only templates for creating a page shell, with server/client templates nesting within. For that I think we'll need a separate template tag and/or brand for its TemplateResult to tell the SSR renderer to omit comments.

@rictic
Copy link
Collaborator

rictic commented Nov 17, 2023

Check out the new server-only templates, which address this use case!
https://github.com/lit/lit/tree/main/packages/labs/ssr#server-only-templates

@rictic rictic closed this as completed Nov 17, 2023
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
Lit Project Board
Archived in project
Milestone
No milestone
Development

No branches or pull requests
6 participants
@rictic @aomarks @justinfagnani @kevinpschaaf @markcellus @tstewart-klaudhaus