sveltejs · Aug 14, 2024 · Aug 14, 2024
diff --git a/src/context/render.ts b/src/context/render.ts
@@ -0,0 +1,111 @@
+import type * as ESTree from "estree";
+import type { ScopeManager, Scope } from "eslint-scope";
+import type {
+  Comment,
+  SvelteEachBlock,
+  SvelteElement,
+  SvelteElseBlockAlone,
+  SvelteElseBlockElseIf,
+  SvelteIfBlock,
+  SvelteIfBlockElseIf,
+  SvelteName,
+  SvelteNode,
+  SvelteSnippetBlock,
+  Token,
+} from "../ast";
+
+type Children = SvelteElement["children"];
+
+enum RenderPartType {
+  real,
+  virtual,
+}
+
+type RenderPart =
+  | { code: string; type: RenderPartType.virtual }
+  | { code: string; type: RenderPartType.real; node: SvelteNode | ESTree.Node };
+
+export class SvelteRenderContext {
+  private readonly code: string;
+
+  private readonly parts: RenderPart[] = [];
+
+  public constructor(code: string) {
+    this.code = code;
+  }
+
+  public nestIfBlock(ifBlock: SvelteIfBlock | SvelteIfBlockElseIf): void {
+    this.wrapInTemplateExpression(() => {
+      this.appendNode(ifBlock.expression);
+      this.appendVirtualFragment("?");
+      this.appendChildren(ifBlock.children);
+      this.appendVirtualFragment(":");
+      if (ifBlock.else) {
+        if (ifBlock.else.elseif) {
+          this.nestIfBlock(ifBlock.else.children[0]);
+        } else {
+          this.appendChildren(ifBlock.else.children);
+        }
+      } else {
+        this.appendVirtualFragment("``");
+      }
+    });
+  }
+
+  private appendChildren(children: Children) {
+    if (children.length === 0) this.appendVirtualFragment("");
+    if (children.length === 1) this.appendChild(children[0]);
+
+    this.wrapInTemplateString(() => {
+      children.map((child) =>
+        this.wrapInTemplateExpression(() => this.appendChild(child)),
+      );
+    });
+  }
+
+  private appendChild(_child: SvelteNode | ESTree.Node) {
+    // TODO
+  }
+
+  private nestEachBlock(eachBlock: SvelteEachBlock) {
+    if (eachBlock.else) {
+      // TODO: {array}.length
+      this.appendVirtualFragment("?");
+    }
+    // TODO: array
+    this.appendVirtualFragment(".map(");
+    // TODO: params, and key expression
+    this.appendVirtualFragment("=>");
+    this.appendChildren(eachBlock.children);
+    this.appendVirtualFragment(")");
+
+    if (eachBlock.else) {
+      this.appendVirtualFragment(":");
+      this.appendChildren(eachBlock.else.children);
+    }
+  }
+
+  private wrapInTemplateString(callback: () => void) {
+    this.appendVirtualFragment("`");
+    callback();
+    this.appendVirtualFragment("`");
+  }
+
+  private appendNode(node: SvelteNode | ESTree.Node) {
+    this.parts.push({
+      code: this.code.slice(...node.range!),
+      type: RenderPartType.Real,
+      node,
+    });
+  }
+
+  private wrapInTemplateExpression(callback: () => void) {
+    this.appendVirtualFragment("${");
+    callback();
+    this.appendVirtualFragment("}");
+  }
+
+  private appendVirtualFragment(str: string) {
+    this.parts.push({ code: str, type: RenderPartType.Virtual });
+  }
+}
diff --git a/src/context/script-let.ts b/src/context/script-let.ts
@@ -155,28 +155,63 @@ export class ScriptLetContext {
     ...callbacks: ScriptLetCallback<E>[]
   ): ScriptLetCallback<E>[] {
     const range = getNodeRange(expression);
-    return this.addExpressionFromRange(range, parent, typing, ...callbacks);
+    return this.addExpressionFromRange(
+      range,
+      parent,
+      false,
+      typing,
+      ...callbacks,
+    );
+  }
+
+  public addExpressionTemplateLiteral<E extends ESTree.Expression>(
+    expression: E,
+    parent: SvelteNode,
+    asTemplateLiteral: boolean,
+    typing?: string | null,
+    ...callbacks: ScriptLetCallback<E>[]
+  ): ScriptLetCallback<E>[] {
+    const range = getNodeRange(expression);
+    return this.addExpressionFromRange(
+      range,
+      parent,
+      asTemplateLiteral,
+      typing,
+      ...callbacks,
+    );
   }
 
   public addExpressionFromRange<E extends ESTree.Expression>(
     range: [number, number],
     parent: SvelteNode,
+    asTemplateLiteral: boolean,
     typing?: string | null,
     ...callbacks: ScriptLetCallback<E>[]
   ): ScriptLetCallback<E>[] {
     const part = this.ctx.code.slice(...range);
-    const isTS = typing && this.ctx.isTypeScript();
+    const isTS = Boolean(typing) && this.ctx.isTypeScript();
     this.appendScript(
-      `(${part})${isTS ? `as (${typing})` : ""};`,
-      range[0] - 1,
+      asTemplateLiteral
+        ? `(\`\${${part}${isTS ? ` as ${typing}` : ""}}\`);`
+        : `(${part})${isTS ? `as (${typing})` : ""};`,
+      asTemplateLiteral ? range[0] - 4 : range[0] - 1,
       this.currentScriptScopeKind,
       "ExpressionStatement",
       (st, tokens, comments, result) => {
         const exprSt = st as ESTree.ExpressionStatement;
         const tsAs: TSAsExpression | null = isTS
           ? (exprSt.expression as any)
           : null;
-        const node: ESTree.Expression = tsAs?.expression || exprSt.expression;
+
+        const node: ESTree.Expression = tsAs
+          ? asTemplateLiteral
+            ? ((tsAs.expression as TSESTree.TemplateLiteral)
+                .expressions[0] as any)
+            : (tsAs.expression as TSESTree.Expression)
+          : asTemplateLiteral
+            ? ((exprSt.expression as ESTree.TemplateLiteral)
+                .expressions[0] as any)
+            : exprSt.expression;
         // Process for nodes
         for (const callback of callbacks) {
           callback(node as E, result);
@@ -186,6 +221,11 @@ export class ScriptLetContext {
         tokens.pop(); // )
         tokens.pop(); // ;
 
+        if (asTemplateLiteral) {
+          tokens.shift(); // `${
+          tokens.pop(); // }`
+        }
+
         if (isTS) {
           for (const scope of extractTypeNodeScopes(
             tsAs!.typeAnnotation,
@@ -196,7 +236,7 @@ export class ScriptLetContext {
           this.remapNodes(
             [
               {
-                offset: range[0] - 1,
+                offset: asTemplateLiteral ? range[0] - 4 : range[0] - 1,
                 range,
                 newNode: node,
               },
@@ -622,9 +662,13 @@ export class ScriptLetContext {
       resolvedParams = params;
     }
     if (!resolvedParams || resolvedParams.length === 0) {
+      const isElseBlock =
+        block.type === "SvelteElseBlock" &&
+        block.elseif === false &&
+        block.parent.type !== "SvelteEachBlock";
       const restore = this.appendScript(
-        `{`,
-        block.range[0],
+        isElseBlock ? `else{` : `{`,
+        isElseBlock ? block.range[0] - 4 : block.range[0],
         this.currentScriptScopeKind,
         "BlockStatement",
         (st, tokens, _comments, result) => {

diff --git a/src/parser/converts/attr.ts b/src/parser/converts/attr.ts
@@ -243,6 +243,8 @@ function processAttributeValue(
       }
       return v;
     });
+
+  const containsLiterals = nodes.some((v) => v.type === "Text");
   if (
     nodes.length === 1 &&
     (nodes[0].type === "ExpressionTag" || nodes[0].type === "MustacheTag") &&
@@ -253,7 +255,13 @@ function processAttributeValue(
       attribute.key.name,
       ctx,
     );
-    const mustache = convertMustacheTag(nodes[0], attribute, typing, ctx);
+    const mustache = convertMustacheTag(
+      nodes[0],
+      attribute,
+      typing,
+      ctx,
+      false,
+    );
     attribute.value.push(mustache);
     return;
   }
@@ -263,7 +271,13 @@ function processAttributeValue(
       continue;
     }
     if (v.type === "ExpressionTag" || v.type === "MustacheTag") {
-      const mustache = convertMustacheTag(v, attribute, null, ctx);
+      const mustache = convertMustacheTag(
+        v,
+        attribute,
+        null,
+        ctx,
+        containsLiterals,
+      );
       attribute.value.push(mustache);
       continue;
     }

diff --git a/src/parser/converts/block.ts b/src/parser/converts/block.ts
@@ -278,6 +278,8 @@ export function convertEachBlock(
     ...ctx.getConvertLocation({ start: nodeStart, end: node.end }),
   };
 
+  console.log(node);
+
   let indexRange: null | { start: number; end: number } = null;
 
   if (node.index) {

diff --git a/src/parser/converts/element.ts b/src/parser/converts/element.ts
@@ -138,7 +138,7 @@ export function* convertChildren(
       continue;
     }
     if (child.type === "ExpressionTag" || child.type === "MustacheTag") {
-      yield convertMustacheTag(child, parent, null, ctx);
+      yield convertMustacheTag(child, parent, null, ctx, true);
       continue;
     }
     if (child.type === "HtmlTag" || child.type === "RawMustacheTag") {

diff --git a/src/parser/converts/mustache.ts b/src/parser/converts/mustache.ts
@@ -15,8 +15,16 @@ export function convertMustacheTag(
   parent: SvelteMustacheTag["parent"],
   typing: string | null,
   ctx: Context,
+  asTemplateLiteral: boolean,
 ): SvelteMustacheTagText {
-  return convertMustacheTag0(node, "text", parent, typing, ctx);
+  return convertMustacheTag0(
+    node,
+    "text",
+    parent,
+    typing,
+    ctx,
+    asTemplateLiteral,
+  );
 }
 /** Convert for MustacheTag */
 export function convertRawMustacheTag(
@@ -30,6 +38,7 @@ export function convertRawMustacheTag(
     parent,
     null,
     ctx,
+    true,
   );
   const atHtmlStart = ctx.code.indexOf("@html", mustache.range[0]);
   ctx.addToken("MustacheKeyword", {
@@ -75,6 +84,7 @@ function convertMustacheTag0<T extends SvelteMustacheTag>(
   parent: T["parent"],
   typing: string | null,
   ctx: Context,
+  asTemplateLiteral: boolean,
 ): T {
   const mustache = {
     type: "SvelteMustacheTag",
@@ -84,9 +94,10 @@ function convertMustacheTag0<T extends SvelteMustacheTag>(
     ...ctx.getConvertLocation(node),
   } as T;
 
-  ctx.scriptLet.addExpression(
+  ctx.scriptLet.addExpressionTemplateLiteral(
     node.expression,
     mustache,
+    asTemplateLiteral,
     hasTypeInfo(node.expression) ? null : typing,
     (es) => {
       mustache.expression = es;

diff --git a/src/parser/converts/render.ts b/src/parser/converts/render.ts
@@ -20,6 +20,8 @@ export function convertRenderTag(
   ctx.scriptLet.addExpressionFromRange(
     [callRange.start, callRange.end],
     mustache,
+    // TODO: not sure if this should be true, since we are rendering a string
+    false,
     null,
     (
       expression:

diff --git a/src/parser/typescript/analyze/index.ts b/src/parser/typescript/analyze/index.ts
@@ -82,6 +82,8 @@ export function analyzeTypeScriptInSvelte(
 
   ctx.appendOriginalToEnd();
 
+  console.log(code.render);
+
   return ctx;
 }
 /**

diff --git a/tests/fixtures/parser/ast/docs/template-syntax/05-hash-if/01-no-undef-result.json b/tests/fixtures/parser/ast/docs/template-syntax/05-hash-if/01-no-undef-result.json
@@ -19,8 +19,8 @@
   },
   {
     "ruleId": "no-undef",
-    "code": "expression",
-    "line": 3,
-    "column": 6
+    "code": "",
+    "line": 5,
+    "column": 52
   }
 ]