[labs/ssr] Add a serverhtml function, for templates that are only rendered on the server by rictic · Pull Request #4382 · lit/lit

rictic · 2023-11-10T02:11:38Z

No description provided.

changeset-bot · 2023-11-10T02:11:42Z

🦋 Changeset detected

Latest commit: 53fb2bc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@lit-labs/ssr	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2023-11-10T02:11:55Z

📊 Tachometer Benchmark Results

Summary

nop-update

this-change, tip-of-tree, previous-release: unsure 🔍 -6% - +5% (-0.66ms - +0.54ms)
^{this-change vs tip-of-tree}

render

this-change: 48.55ms - 51.94ms
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +5% (-0.21ms - +0.95ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -4% - +0% (-1.32ms - +0.10ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -0% - +5% (-0.03ms - +1.53ms)
^{this-change vs tip-of-tree}

update

this-change: 525.73ms - 535.77ms
this-change, tip-of-tree, previous-release: unsure 🔍 -7% - +7% (-2.66ms - +3.03ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -2% - +1% (-1.53ms - +0.83ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +1% (-4.46ms - +4.01ms)
^{this-change vs tip-of-tree}

update-reflect

this-change: 518.33ms - 524.17ms
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +1% (-4.12ms - +3.90ms)
^{this-change vs tip-of-tree}

Results

this-change

Browser: chrome-headless 118.0.5993.117
Sample size: 50
Built by: Benchmarks #5871
Commit: 53fb2bc

render

Version	Avg time	vs
	48.55ms - 51.94ms	-

update

Version	Avg time	vs
	525.73ms - 535.77ms	-

update-reflect

Version	Avg time	vs
	518.33ms - 524.17ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 118.0.5993.117
Sample size: 30
Built by: Benchmarks #5871
Commit: 53fb2bc

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	18.45ms - 19.28ms	-	unsure 🔍 -1% - +5% -0.21ms - +0.95ms	unsure 🔍 -3% - +3% -0.55ms - +0.65ms
tip-of-tree tip-of-tree	18.09ms - 18.90ms	unsure 🔍 -5% - +1% -0.95ms - +0.21ms	-	unsure 🔍 -5% - +1% -0.91ms - +0.27ms
previous-release previous-release	18.38ms - 19.25ms	unsure 🔍 -3% - +3% -0.65ms - +0.55ms	unsure 🔍 -2% - +5% -0.27ms - +0.91ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	39.04ms - 42.99ms	-	unsure 🔍 -7% - +7% -2.66ms - +3.03ms	unsure 🔍 -6% - +7% -2.62ms - +2.67ms
tip-of-tree tip-of-tree	38.78ms - 42.88ms	unsure 🔍 -7% - +6% -3.03ms - +2.66ms	-	unsure 🔍 -7% - +6% -2.87ms - +2.55ms
previous-release previous-release	39.22ms - 42.75ms	unsure 🔍 -7% - +6% -2.67ms - +2.62ms	unsure 🔍 -6% - +7% -2.55ms - +2.87ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	10.94ms - 11.76ms	-	unsure 🔍 -6% - +5% -0.66ms - +0.54ms	unsure 🔍 -8% - +1% -0.89ms - +0.16ms
tip-of-tree tip-of-tree	10.97ms - 11.85ms	unsure 🔍 -5% - +6% -0.54ms - +0.66ms	-	unsure 🔍 -7% - +2% -0.85ms - +0.25ms
previous-release previous-release	11.38ms - 12.05ms	unsure 🔍 -2% - +8% -0.16ms - +0.89ms	unsure 🔍 -2% - +8% -0.25ms - +0.85ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 118.0.5993.117
Sample size: 50
Built by: Benchmarks #5871
Commit: 53fb2bc

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	33.86ms - 34.86ms	-	unsure 🔍 -4% - +0% -1.32ms - +0.10ms	unsure 🔍 -3% - +1% -0.93ms - +0.44ms
tip-of-tree tip-of-tree	34.47ms - 35.47ms	unsure 🔍 -0% - +4% -0.10ms - +1.32ms	-	unsure 🔍 -1% - +3% -0.32ms - +1.04ms
previous-release previous-release	34.14ms - 35.07ms	unsure 🔍 -1% - +3% -0.44ms - +0.93ms	unsure 🔍 -3% - +1% -1.04ms - +0.32ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	70.85ms - 72.71ms	-	unsure 🔍 -2% - +1% -1.53ms - +0.83ms	unsure 🔍 -2% - +2% -1.09ms - +1.23ms
tip-of-tree tip-of-tree	71.41ms - 72.85ms	unsure 🔍 -1% - +2% -0.83ms - +1.53ms	-	unsure 🔍 -1% - +2% -0.57ms - +1.42ms
previous-release previous-release	71.02ms - 72.39ms	unsure 🔍 -2% - +2% -1.23ms - +1.09ms	unsure 🔍 -2% - +1% -1.42ms - +0.57ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 118.0.5993.117
Sample size: 50
Built by: Benchmarks #5871
Commit: 53fb2bc

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	33.45ms - 34.87ms	-	unsure 🔍 -0% - +5% -0.03ms - +1.53ms	unsure 🔍 -1% - +4% -0.27ms - +1.33ms
tip-of-tree tip-of-tree	33.08ms - 33.73ms	unsure 🔍 -4% - +0% -1.53ms - +0.03ms	-	unsure 🔍 -2% - +1% -0.72ms - +0.27ms
previous-release previous-release	33.25ms - 34.01ms	unsure 🔍 -4% - +1% -1.33ms - +0.27ms	unsure 🔍 -1% - +2% -0.27ms - +0.72ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	532.46ms - 537.67ms	-	unsure 🔍 -1% - +1% -4.46ms - +4.01ms	unsure 🔍 -1% - +1% -4.93ms - +3.47ms
tip-of-tree tip-of-tree	531.95ms - 538.62ms	unsure 🔍 -1% - +1% -4.01ms - +4.46ms	-	unsure 🔍 -1% - +1% -5.20ms - +4.18ms
previous-release previous-release	532.50ms - 539.09ms	unsure 🔍 -1% - +1% -3.47ms - +4.93ms	unsure 🔍 -1% - +1% -4.18ms - +5.20ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	532.69ms - 538.42ms	-	unsure 🔍 -1% - +1% -4.12ms - +3.90ms	unsure 🔍 -1% - +1% -6.27ms - +3.11ms
tip-of-tree tip-of-tree	532.86ms - 538.48ms	unsure 🔍 -1% - +1% -3.90ms - +4.12ms	-	unsure 🔍 -1% - +1% -6.12ms - +3.19ms
previous-release previous-release	533.42ms - 540.85ms	unsure 🔍 -1% - +1% -3.11ms - +6.27ms	unsure 🔍 -1% - +1% -3.19ms - +6.12ms	-

_{tachometer-reporter-action v2 for Benchmarks}

github-actions · 2023-11-10T02:13:42Z

The size of lit-html.js and lit-core.min.js are as expected.

packages/labs/ssr/src/lib/render-value.ts

+            const text = child.value;
+            const textStart = child.sourceCodeLocation!.startOffset;
+            flushTo(textStart);
+            const markerRegex = new RegExp(marker.replace(/\$/g, '\\$'), 'g');


jimsimon

Are there any security implications with using this new API? If so, it might be a good idea to add that info to the README.

Also, do we need to update the website docs?

packages/labs/ssr/src/lib/server-template.ts

AndrewJakubowicz

This is amazing!

packages/labs/ssr/README.md

packages/labs/ssr/src/test/integration/tests/basic.ts

packages/labs/ssr/src/test/lib/render-lit_test.ts

packages/labs/ssr/src/lib/server-template.ts

augustjk

Very nice! I just have minor nits, mostly around docs.

packages/labs/ssr/README.md

packages/labs/ssr/package.json

packages/labs/ssr/src/test/integration/tests/basic.ts

rictic · 2023-11-11T20:35:20Z

bindings in element part silently do nothing. since server only templates will throw on property and event binding for attribute parts, it doesn't seem like a bad idea for it to throw on element part binding too? though in the future we have opportunities to add server only directives like spreading attributes there.

Good point! Threw an error in that case and added a test.

packages/labs/ssr/src/lib/render-value.ts

packages/labs/ssr/src/lib/server-template.ts

packages/labs/ssr/README.md

packages/labs/ssr/src/lib/server-template.ts

AndrewJakubowicz · 2023-11-14T22:28:31Z

packages/labs/ssr/README.md

+
+`serverhtml` templates can be composed, and combined, and they support almost all features that normal Lit templates do, with the exception of features that don't have a pure HTML representation, like event handlers or property bindings.
+
+`serverhtml` templates can only be rendered once, so they can't be updated on the client. However if you render a normal Lit template inside a serverhtml template, then it can be hydrated and updated. Likewise, if you place a custom element inside a serverhtml template, it can be hydrated and update like normal.


Nit–non blocking docs. Can always be addressed in followup.

"serverhtml templates should only be rendered once, so they can't be updated on the client.".

This could be misconstrued as: you can use them somehow on the client as long as they are only rendered once. May be worth clarifying again here that serverhtml templates throw if they are used on the client.

Ah, good point! Did another pass

packages/labs/ssr/README.md

augustjk · 2023-11-14T22:25:53Z

packages/labs/ssr/README.md

+`serverhtml` templates can only be rendered once, so they can't be updated on the client. However if you render a normal Lit template inside a serverhtml template, then it can be hydrated and updated. Likewise, if you place a custom element inside a serverhtml template, it can be hydrated and update like normal.
+
+```js
+import {html} from 'lit';


This import is unused in this file and can be removed.

Suggested change

import {html} from 'lit';

Good catch! Done

AndrewJakubowicz · 2023-11-14T22:33:18Z

packages/labs/ssr/src/lib/render-value.ts

          });
+        } else if (
+          !hydratable &&
+          /^(title|textarea|script)$/.test(node.tagName)


Should style be added here. (It's also handled as a raw text element by lit-html)?

Good point! Treating similarly to <script>, with unsafeHTML as the escape hatch.

AndrewJakubowicz · 2023-11-14T22:36:26Z

packages/labs/ssr/src/lib/render-value.ts


-  if (partIndex !== result.values.length) {
+  if (partIndex !== result.values.length && hydratable) {
    throwErrorForPartIndexMismatch(partIndex, result);


Why are part index mismatches ok with server templates?

Ah, I think that was from an old and worse prototype! Thank you for catching this!

AndrewJakubowicz · 2023-11-14T22:36:56Z

packages/labs/ssr/src/lib/render-value.ts

+
+/**
+ * Returns true if the given node is a <script> node that the browser will
+ * automatically executeif it's rendered on server-side, outside of a


Nit: executeif -> "execute if"

AndrewJakubowicz · 2023-11-14T22:38:36Z

packages/labs/ssr/src/lib/server-template.ts

+ * features that don't have a pure HTML representation, like event handlers or
+ * property bindings.
+ *
+ * `serverhtml` templates can only be rendered once, so they can't be updated


"can't be updated on the client". Maybe here is where we add the text around "can't be used on the client at all".

AndrewJakubowicz

AMAZING!

…y templates.

A serverhtml template seems like it works fine to render both full pages and fragments, from doctype on down. If we discover a need for a document template later, we can add that API.

But not server templates inside normal templates (currently). Also add integration tests of partial hydration of client side templates inside a server side template.

Co-authored-by: Augustine Kim <augustinekim@google.com>

justinfagnani · 2023-11-15T00:47:22Z

packages/labs/ssr/README.md

+Here's an example that shows how to use a serverhtml template to render a full document, and then lazily hydrate both a custom element and a template:
+
+```js
+import {render, serverhtml} from '@lit-labs/ssr';


I think like with lit-html/static.js exporting just html, we should probably name this just html too. If users want to rename it they can do:

import {render, html as serverHtml} from '@lit-labs/ssr';

With the serverhtml name, they'll need to rename it if they want to get automatic syntax highlighting:

import {render, serverhtml as html} from '@lit-labs/ssr';

and I think that'll be a fairly common case. I suspect that few, if any, files will import both client and server html tags. Instead server files would import client functions that use the client html in their own module.

justinfagnani · 2023-11-15T00:49:48Z

packages/labs/ssr/README.md


+## Server-only templates
+
+You can also write templates that will only render on the server. These templates can be used for rendering full documents, including the doctype, and rendering into elements that Lit normally cannot, like `<title>`, `<textarea>`, `<template>`, and non-executing `<script>` tags like `<script type="text/json">`. They are also slightly more efficient than normal Lit templates, because the generated HTML doesn't need to include markers for updating.


The "non-executing <script> tags" bit isn't clear to me. Can you render to executing script tags?

justinfagnani · 2023-11-15T00:50:48Z

packages/labs/ssr/README.md

+
+You can also write templates that will only render on the server. These templates can be used for rendering full documents, including the doctype, and rendering into elements that Lit normally cannot, like `<title>`, `<textarea>`, `<template>`, and non-executing `<script>` tags like `<script type="text/json">`. They are also slightly more efficient than normal Lit templates, because the generated HTML doesn't need to include markers for updating.
+
+`serverhtml` templates can be composed, and combined, and they support almost all features that normal Lit templates do, with the exception of features that don't have a pure HTML representation, like event handlers or property bindings.


I think it'd be good to spell out the limitations if they're short. It's that they can't set properties, add event listeners, or use element directives, yeah? It might also be good to spell out some more of the the things they can do that make them useful, mainly: escaping, handling arrays, and directives?

justinfagnani · 2023-11-15T00:55:47Z

packages/labs/ssr/src/lib/render-value.ts

              const [, prefix, caseSensitiveName] = /([.?@])?(.*)/.exec(
                name as string
              )!;
+              if (!hydratable) {


In hot code I prefer direct comparisons, especially if code size isn't a concern, like if (hydratable === false)

rictic requested review from AndrewJakubowicz, augustjk and justinfagnani November 10, 2023 02:11

rictic requested a review from kevinpschaaf as a code owner November 10, 2023 02:11

github-advanced-security bot found potential problems Nov 10, 2023

View reviewed changes

jimsimon reviewed Nov 10, 2023

View reviewed changes

packages/labs/ssr/src/lib/server-template.ts Outdated Show resolved Hide resolved

AndrewJakubowicz reviewed Nov 10, 2023

View reviewed changes

packages/labs/ssr/src/lib/server-template.ts Show resolved Hide resolved

augustjk reviewed Nov 10, 2023

View reviewed changes

AndrewJakubowicz reviewed Nov 13, 2023

View reviewed changes

packages/labs/ssr/src/lib/render-value.ts Outdated Show resolved Hide resolved

AndrewJakubowicz reviewed Nov 13, 2023

View reviewed changes

packages/labs/ssr/src/lib/server-template.ts Outdated Show resolved Hide resolved

augustjk reviewed Nov 13, 2023

View reviewed changes

packages/labs/ssr/src/lib/server-template.ts Show resolved Hide resolved

packages/labs/ssr/README.md Show resolved Hide resolved

packages/labs/ssr/src/lib/server-template.ts Outdated Show resolved Hide resolved

rictic requested review from AndrewJakubowicz, augustjk and jimsimon November 14, 2023 21:37

AndrewJakubowicz reviewed Nov 14, 2023

View reviewed changes

augustjk approved these changes Nov 14, 2023

View reviewed changes

AndrewJakubowicz reviewed Nov 14, 2023

View reviewed changes

AndrewJakubowicz approved these changes Nov 14, 2023

View reviewed changes

rictic added 4 commits November 14, 2023 15:08

Initial implementation of server-only templates.

5b83bd1

Server-only templates can't bind to properties.

fd5e817

Server-only templates can't bind to events.

6006645

Improve error messages.

3f1c4d0

rictic and others added 22 commits November 14, 2023 15:08

For the initial implementation, disallow mixing normal and server-onl…

6797598

…y templates.

Improve code organization some.

2da5226

Add basic integration tests of server-only templates.

167a41a

Drop the distinction between serverhtml and serverdocument templates

002b203

A serverhtml template seems like it works fine to render both full pages and fragments, from doctype on down. If we discover a need for a document template later, we can add that API.

Export server templates from index.ts

d23ed64

Support normal templates inside server templates.

91ec997

But not server templates inside normal templates (currently). Also add integration tests of partial hydration of client side templates inside a server side template.

Support rendering into a <template> element on the server.

1d188f7

Unit test our current behavior when rendering into scripts

30b4a5a

Forbid bindings inside server-only <script> tags.

58c8c2c

Also test rendering into elements inside script tags.

4246a16

Allow binding into non-executing script tags.

3d9234c

Add docs and changeset.

ee37459

Improve clarity of willExecute.

c6edb62

Address review comments.

71f46a8

Update packages/labs/ssr/README.md

b637c13

Co-authored-by: Augustine Kim <augustinekim@google.com>

Address Augustine's excellent review comments.

96eac5b

Throw a clear error for element part bindings in server only templates.

2c300ae

Throw if a serverhtml template is constructed outside the server.

79d1a30

Address more great review comments

530e752

Improve README

79b5fa9

Handle style tags as dangerous rawtext elements.

6e4629f

Improve docs of serverhtml function.

53fb2bc

rictic force-pushed the ssr-special-templates branch from 8c6ce54 to 53fb2bc Compare November 14, 2023 23:11

rictic merged commit 011b762 into main Nov 14, 2023

rictic deleted the ssr-special-templates branch November 14, 2023 23:34

lit-robot mentioned this pull request Nov 14, 2023

Version Packages #4397

Closed

justinfagnani reviewed Nov 15, 2023

View reviewed changes

lit-robot mentioned this pull request Nov 16, 2023

Version Packages #4399

Merged


		`serverhtml` templates can be composed, and combined, and they support almost all features that normal Lit templates do, with the exception of features that don't have a pure HTML representation, like event handlers or property bindings.

		`serverhtml` templates can only be rendered once, so they can't be updated on the client. However if you render a normal Lit template inside a serverhtml template, then it can be hydrated and updated. Likewise, if you place a custom element inside a serverhtml template, it can be hydrated and update like normal.


		## Server-only templates

		You can also write templates that will only render on the server. These templates can be used for rendering full documents, including the doctype, and rendering into elements that Lit normally cannot, like `<title>`, `<textarea>`, `<template>`, and non-executing `<script>` tags like `<script type="text/json">`. They are also slightly more efficient than normal Lit templates, because the generated HTML doesn't need to include markers for updating.

Conversation

rictic commented Nov 10, 2023

Uh oh!

changeset-bot bot commented Nov 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Nov 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Tachometer Benchmark Results

Summary

nop-update

render

update

update-reflect

Results

render

update

update-reflect

render

update

nop-update

render

update

render

update

update-reflect

Uh oh!

github-actions bot commented Nov 10, 2023

Uh oh!

Check failure

jimsimon left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AndrewJakubowicz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

augustjk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rictic commented Nov 11, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

changeset-bot bot commented Nov 10, 2023 •

edited

Loading

github-actions bot commented Nov 10, 2023 •

edited

Loading