Merge 1399080 into a1f8c34

augustjk · web-flow · commit b3b5ecead4b4 · 2023-04-20T23:36:02.000Z
diff --git a/.changeset/hot-rabbits-promise.md b/.changeset/hot-rabbits-promise.md
@@ -0,0 +1,6 @@
+---
+'lit-html': patch
+'lit': patch
+---
+
+`static-html` no longer adds an item to `TemplateResult`'s value array for the last consumed static value. This fixes an error with server-side rendering of static html.
diff --git a/packages/labs/ssr/src/test/integration/tests/basic.ts b/packages/labs/ssr/src/test/integration/tests/basic.ts
@@ -7,6 +7,7 @@
 import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
 
 import {html, noChange, nothing, Part} from 'lit';
+import {html as staticHtml, literal} from 'lit/static-html.js';
 import {
   directive,
   Directive,
@@ -4251,6 +4252,28 @@ export const tests: {[name: string]: SSRTest} = {
     };
   },
 
+  /******************************************************
+   * Static html tests
+   ******************************************************/
+
+  'Static html': {
+    render(x: unknown) {
+      const tagName = x === 'foo' ? literal`div` : literal`p`;
+      return staticHtml`<${tagName}>${x}</${tagName}>`;
+    },
+    expectations: [
+      {
+        args: ['foo'],
+        html: '<div>foo</div>',
+      },
+      {
+        args: ['foo2'],
+        html: '<p>foo2</p>',
+      },
+    ],
+    stableSelectors: [],
+  },
+
   /******************************************************
    * AsyncDirective tests
    ******************************************************/
diff --git a/packages/lit-html/src/static.ts b/packages/lit-html/src/static.ts
@@ -131,7 +131,10 @@ export const withStatic =
         s += staticValue + strings[++i];
         hasStatics = true;
       }
-      dynamicValues.push(dynamicValue);
+      // If the last value is static, we don't need to push it.
+      if (i !== l) {
+        dynamicValues.push(dynamicValue);
+      }
       staticStrings.push(s);
       i++;
     }
diff --git a/packages/lit-html/src/test/static_test.ts b/packages/lit-html/src/test/static_test.ts
@@ -177,4 +177,12 @@ suite('static', () => {
       '<div>[object Object]</div>'
     );
   });
+
+  test('static html should not add value for consumed static expression', () => {
+    const tagName = literal`div`;
+    const template = html`<${tagName}>${'foo'}</${tagName}>`;
+    assert.equal(template.values.length, 1);
+    const template2 = html`<${tagName}>${'foo'}</${tagName}>${'bar'}`;
+    assert.equal(template2.values.length, 2);
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -131,7 +131,10 @@ export const withStatic =`
`131`	`131`	`s += staticValue + strings[++i];`
`132`	`132`	`hasStatics = true;`
`133`	`133`	`}`
`134`		`- dynamicValues.push(dynamicValue);`
	`134`	`+ // If the last value is static, we don't need to push it.`
	`135`	`+ if (i !== l) {`
	`136`	`+ dynamicValues.push(dynamicValue);`
	`137`	`+ }`
`135`	`138`	`staticStrings.push(s);`
`136`	`139`	`i++;`
`137`	`140`	`}`