Transformer code review feedback: inline string literals & update tests.

lit · Dec 6, 2021 · c3d0506 · c3d0506
1 parent 8413ed3
commit c3d0506
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/packages/ts-transformers/src/internal/decorators/query-assigned-elements.ts b/packages/ts-transformers/src/internal/decorators/query-assigned-elements.ts
@@ -266,11 +266,27 @@ export class QueryAssignedElementsVisitor implements MemberDecoratorVisitor {
   }
 
   /**
+   * Returns a template string which resolves the passed in slot name
+   * expression.
+   *
+   * Special handling is included for string literals and no substitution
+   * template literals. In this case we inline the slot name into the selector
+   * to match what is more likely to have been authored.
+   *
    * @param slot Expression that evaluates to the slot name.
-   * @returns Template string node representing `slot[name=${slot}]`
+   * @returns Template string node representing `slot[name=${slot}]` except when
+   *   `slot` is a string literal. Then the literal is inlined. I.e. for a slot
+   *   expression of `"list"`, return `slot[name=list]`.
    */
-  private createNamedSlotSelector(slot: ts.Expression): ts.TemplateExpression {
+  private createNamedSlotSelector(slot: ts.Expression) {
     const factory = this._factory;
+    if (ts.isStringLiteral(slot) || ts.isNoSubstitutionTemplateLiteral(slot)) {
+      const inlinedSlotSelector = `slot[name=${slot.text}]`;
+      return this._factory.createNoSubstitutionTemplateLiteral(
+        inlinedSlotSelector,
+        inlinedSlotSelector
+      );
+    }
     return factory.createTemplateExpression(
       factory.createTemplateHead('slot[name=', 'slot[name='),
       [factory.createTemplateSpan(slot, factory.createTemplateTail(']', ']'))]

diff --git a/packages/ts-transformers/src/tests/idiomatic-decorators-test.ts b/packages/ts-transformers/src/tests/idiomatic-decorators-test.ts
@@ -617,7 +617,7 @@ const tests = (test: uvu.Test<uvu.Context>, options: ts.CompilerOptions) => {
       // listItems comment
       get listItems() {
         return this.renderRoot
-          ?.querySelector(\`slot[name=\${"list"}]\`)
+          ?.querySelector(\`slot[name=list]\`)
           ?.assignedElements() ?? [];
       }
     }
@@ -632,7 +632,7 @@ const tests = (test: uvu.Test<uvu.Context>, options: ts.CompilerOptions) => {
 
     class MyElement extends LitElement {
       // listItems comment
-      @queryAssignedElements({ slot: 'list', flatten: true })
+      @queryAssignedElements({ slot: \`list\`, flatten: true })
       listItems: NodeListOf<HTMLElement>;
     }
     `;
@@ -644,7 +644,7 @@ const tests = (test: uvu.Test<uvu.Context>, options: ts.CompilerOptions) => {
       // listItems comment
       get listItems() {
         return this.renderRoot
-          ?.querySelector(\`slot[name=\${"list"}]\`)
+          ?.querySelector(\`slot[name=list]\`)
           ?.assignedElements({flatten: true}) ?? [];
       }
     }
@@ -671,7 +671,7 @@ const tests = (test: uvu.Test<uvu.Context>, options: ts.CompilerOptions) => {
       // listItems comment
       get listItems() {
         return this.renderRoot
-          ?.querySelector(\`slot[name=\${"list"}]\`)
+          ?.querySelector(\`slot[name=list]\`)
           ?.assignedElements({ flatten: false })
           ?.filter((node) => node.matches('.item')
           ) ?? [];
@@ -706,7 +706,7 @@ const tests = (test: uvu.Test<uvu.Context>, options: ts.CompilerOptions) => {
       // listItems comment
       get listItems() {
         return this.renderRoot
-          ?.querySelector(\`slot[name=\${"list"}]\`)
+          ?.querySelector(\`slot[name=list]\`)
           ?.assignedElements({ flatten: isFlatten })
           ?.filter((node) => node.matches(".item")
           ) ?? [];