[labs/ssr] Allow rendering of non-array iterables

.changeset/plenty-wolves-return.md

@@ -0,0 +1,5 @@
+---
+'@lit-labs/ssr': patch
+---
+
+Handle non-array iterables including `map` directive in child parts

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

@@ -15,7 +15,11 @@ import type {
 
 import {nothing, noChange} from 'lit';
 import {PartType} from 'lit/directive.js';
-import {isTemplateResult, getDirectiveClass} from 'lit/directive-helpers.js';
+import {
+  isPrimitive,
+  isTemplateResult,
+  getDirectiveClass,
+} from 'lit/directive-helpers.js';
 import {_$LH} from 'lit-html/private-ssr-support.js';
 
 const {
@@ -32,6 +36,7 @@ const {
   BooleanAttributePart,
   EventPart,
   connectedDisconnectable,
+  isIterable,
 } = _$LH;
 
 import {digestForTemplateResult} from '@lit-labs/ssr-client';
@@ -574,7 +579,8 @@ export function* renderValue(
       value === noChange
     ) {
       // yield nothing
-    } else if (Array.isArray(value)) {
+    } else if (!isPrimitive(value) && isIterable(value)) {
+      // Not primitive since strings are iterable
       for (const item of value) {
         yield* renderValue(item, renderInfo);
       }

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

@@ -17,6 +17,7 @@ import {
   PartType,
 } from 'lit/directive.js';
 import {repeat} from 'lit/directives/repeat.js';
+import {map} from 'lit/directives/map.js';
 import {guard} from 'lit/directives/guard.js';
 import {cache} from 'lit/directives/cache.js';
 import {classMap} from 'lit/directives/class-map.js';
@@ -174,6 +175,40 @@ export const tests: {[name: string]: SSRTest} = {
     stableSelectors: ['div'],
   },
 
+  'ChildPart accepts array': {
+    render(x: unknown) {
+      return html` <div>${x}</div> `;
+    },
+    expectations: [
+      {
+        args: [[1, 2, 3]],
+        html: '<div>123</div>',
+      },
+      {
+        args: [[4, 5, 6]],
+        html: '<div>456</div>',
+      },
+    ],
+    stableSelectors: ['div'],
+  },
+
+  'ChildPart accepts set': {
+    render(x: unknown) {
+      return html` <div>${x}</div> `;
+    },
+    expectations: [
+      {
+        args: [new Set([1, 2, 3])],
+        html: '<div>123</div>',
+      },
+      {
+        args: [new Set([4, 5, 6])],
+        html: '<div>456</div>',
+      },
+    ],
+    stableSelectors: ['div'],
+  },
+
   'ChildPart accepts an object': {
     render(x: unknown) {
       return html` <div>${x}</div> `;
@@ -613,6 +648,23 @@ export const tests: {[name: string]: SSRTest} = {
     stableSelectors: ['p'],
   },
 
+  'ChildPart accepts directive: map': {
+    render(words: string[]) {
+      return html` ${map(words, (word, i) => html` <p>${i}) ${word}</p> `)} `;
+    },
+    expectations: [
+      {
+        args: [['foo', 'bar', 'qux']],
+        html: '<p>\n  0) foo\n</p>\n<p>\n  1) bar\n</p>\n<p>\n  2) qux\n</p>\n',
+      },
+      {
+        args: [['A', 'B', 'C']],
+        html: '<p>\n  0) A\n</p>\n<p>\n  1) B\n</p>\n<p>\n  2) C\n</p>\n',
+      },
+    ],
+    stableSelectors: ['p'],
+  },
+
   'ChildPart accepts directive: cache': {
     render(bool: boolean) {
       return html`

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

@@ -111,6 +111,46 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
     );
   });
 
+  /* Iterable Expression */
+  test('iterable expression with array value', async () => {
+    const {render, templateWithIterableExpression} = await setup();
+    const result = await render(
+      templateWithIterableExpression(['foo', 'bar', 'baz'])
+    );
+    assert.is(
+      result,
+      `<!--lit-part AEmR7W+R0Ak=--><div><!--lit-part--><!--lit-part-->foo<!--/lit-part--><!--lit-part-->bar<!--/lit-part--><!--lit-part-->baz<!--/lit-part--><!--/lit-part--></div><!--/lit-part-->`
+    );
+  });
+
+  test('iterable expression with set value', async () => {
+    const {render, templateWithIterableExpression} = await setup();
+    const result = await render(
+      templateWithIterableExpression(new Set(['foo', 'bar', 'baz']))
+    );
+    assert.is(
+      result,
+      `<!--lit-part AEmR7W+R0Ak=--><div><!--lit-part--><!--lit-part-->foo<!--/lit-part--><!--lit-part-->bar<!--/lit-part--><!--lit-part-->baz<!--/lit-part--><!--/lit-part--></div><!--/lit-part-->`
+    );
+  });
+
+  test('iterable expression with generator value', async () => {
+    const {render, templateWithIterableExpression} = await setup();
+    const result = await render(
+      templateWithIterableExpression(
+        (function* () {
+          yield 'foo';
+          yield 'bar';
+          yield 'baz';
+        })()
+      )
+    );
+    assert.is(
+      result,
+      `<!--lit-part AEmR7W+R0Ak=--><div><!--lit-part--><!--lit-part-->foo<!--/lit-part--><!--lit-part-->bar<!--/lit-part--><!--lit-part-->baz<!--/lit-part--><!--/lit-part--></div><!--/lit-part-->`
+    );
+  });
+
   /* Attribute Expressions */
 
   test('attribute expression with string value', async () => {

packages/labs/ssr/src/test/test-files/render-test-module.ts

@@ -21,6 +21,10 @@ export const simpleTemplateResult = html`<div></div>`;
 // prettier-ignore
 export const templateWithTextExpression = (x: string|null|undefined) => html`<div>${x}</div>`;
 
+/* Iterable Expression */
+// prettier-ignore
+export const templateWithIterableExpression = (x: Iterable<string>) => html`<div>${x}</div>`;
+
 /* Attribute Expressions */
 // prettier-ignore
 export const templateWithAttributeExpression = (x: string) =>