feat: Support template literals in console.log

apps/typegpu-docs/src/examples/tests/log-test/index.ts

@@ -286,6 +286,41 @@ export const controls = defineControls({
         })
         .dispatchThreads(16),
   },
+  'Template literals': {
+    onButtonClick: () =>
+      root
+        .createGuardedComputePipeline(() => {
+          'use gpu';
+          console.log(`Log with template literal: ${4 + 4}`);
+        })
+        .dispatchThreads(),
+  },
+  'Template literals with helper function': {
+    onButtonClick: () => {
+      const helper = (n: number) => {
+        'use gpu';
+        return n;
+      };
+
+      return root
+        .createGuardedComputePipeline(() => {
+          'use gpu';
+          console.log(`Log with template literal: ${helper(4 + 16)}`);
+        })
+        .dispatchThreads();
+    },
+  },
+  'Template literals with complex content': {
+    onButtonClick: () =>
+      root
+        .createGuardedComputePipeline(() => {
+          'use gpu';
+          console.log(
+            `Log with template literal: \`first\` \n new line \n another line with slash: \\`,
+          );
+        })
+        .dispatchThreads(),
+  },
 });
 
 export function onCleanup() {

packages/eslint-plugin/src/rules/noUnsupportedSyntax.ts

@@ -154,13 +154,6 @@ export const noUnsupportedSyntax = createRule({
         report(node, 'spread element');
       },
 
-      TemplateLiteral(node) {
-        if (!directives.getEnclosingTypegpuFunction()) {
-          return;
-        }
-        report(node, 'template literal');
-      },
-
       ThrowStatement(node) {
         if (!directives.getEnclosingTypegpuFunction()) {
           return;

packages/eslint-plugin/tests/rules/noUnsupportedSyntax.test.ts

@@ -219,24 +219,6 @@ describe('noUnsupportedSyntax', () => {
           { messageId: 'unexpected', data: { snippet: '...arr', syntax: 'spread element' } },
         ],
       },
-      {
-        code: "const func = function() { 'use gpu'; const x = `hello`; }",
-        errors: [
-          {
-            messageId: 'unexpected',
-            data: { snippet: '`hello`', syntax: 'template literal' },
-          },
-        ],
-      },
-      {
-        code: "const fn = () => { 'use gpu'; const x = tag`hello`; }",
-        errors: [
-          {
-            messageId: 'unexpected',
-            data: { snippet: '`hello`', syntax: 'template literal' },
-          },
-        ],
-      },
       {
         code: "const fn = () => { 'use gpu'; throw new Error('x'); }",
         errors: [

packages/tinyest-for-wgsl/src/transpilers.ts

@@ -63,6 +63,12 @@ export const baseTranspilers = {
     return [NODE.binaryExpr, left, node.operator as tinyest.BinaryOperator, right];
   },
 
+  TemplateLiteral(ctx, node, transpile) {
+    const expressions = node.expressions.map((expr) => transpile(ctx, expr) as tinyest.Expression);
+    const quasis = node.quasis.map((quasi) => quasi.value.cooked ?? cookQuasis(quasi.value.raw));
+    return [NODE.templateLiteral, quasis, expressions];
+  },
+
   LogicalExpression(ctx, node, transpile) {
     const left = transpile(ctx, node.left) as tinyest.Expression;
     const right = transpile(ctx, node.right) as tinyest.Expression;
@@ -429,3 +435,16 @@ function extractId(ident: tinyest.Identifier): string {
   }
   return ident[1];
 }
+
+function cookQuasis(raw: string): string {
+  return raw
+    .replaceAll(/\\n/g, '\n')
+    .replaceAll(/\\r/g, '\r')
+    .replaceAll(/\\t/g, '\t')
+    .replaceAll(/\\b/g, '\b')
+    .replaceAll(/\\f/g, '\f')
+    .replaceAll(/\\v/g, '\v')
+    .replaceAll(/\\\\/g, '\\')
+    .replaceAll(/\\`/g, '`')
+    .replaceAll(/\\/g, '\\');
+}

packages/tinyest/src/nodes.ts

@@ -36,6 +36,7 @@ export const NodeTypeCatalog = {
   conditionalExpr: 105,
   nullLiteral: 106,
   booleanLiteral: 107,
+  templateLiteral: 108,
 } as const;
 
 export type NodeTypeCatalog = typeof NodeTypeCatalog;
@@ -261,6 +262,12 @@ export type Null = readonly [type: NodeTypeCatalog['nullLiteral']];
 /** boolean can either be encoded as a node, or as a plain literal */
 export type Bool = boolean | readonly [type: NodeTypeCatalog['booleanLiteral'], boolean];
 
+export type TemplateLiteral = readonly [
+  type: NodeTypeCatalog['templateLiteral'],
+  quasis: string[],
+  expressions: Expression[],
+];
+
 export type Literal = Num | Str | Bool | Null;
 
 export type Expression =
@@ -277,6 +284,7 @@ export type Expression =
   | PreUpdate
   | PostUpdate
   | Call
+  | TemplateLiteral
   | Literal;
 
 export type AnyNode = Statement | Expression;

packages/typegpu/src/shared/tseynit.ts

@@ -201,6 +201,22 @@ function stringifyExpression(node: tinyest.Expression): string {
     return 'null';
   }
 
+  if (node[0] === NODE.templateLiteral) {
+    const quasis = node[1];
+    const expressions = node[2];
+
+    let result = '`';
+    quasis.forEach((quasi, i) => {
+      result += quasi;
+      if (i < expressions.length && expressions[i]) {
+        const expression = expressions[i];
+        result += '${' + stringifyExpression(expression) + '}';
+      }
+    });
+
+    return result + '`';
+  }
+
   assertExhaustive(node);
 }
 
@@ -228,7 +244,8 @@ function isExpression(node: tinyest.AnyNode): node is tinyest.Expression {
     node[0] === NODE.postUpdate ||
     node[0] === NODE.objectExpr ||
     node[0] === NODE.conditionalExpr ||
-    node[0] === NODE.nullLiteral
+    node[0] === NODE.nullLiteral ||
+    node[0] === NODE.templateLiteral
   ) {
     node satisfies tinyest.Expression;
     return true;

packages/typegpu/src/tgsl/generationHelpers.ts

@@ -144,3 +144,28 @@ export class ArrayExpression implements SelfResolvable, WithComptimeValue {
     return ctx.gen.typeInstantiation(this.type, this.elements);
   }
 }
+
+export class TemplateLiteralExpression implements WithComptimeValue {
+  readonly [$internal] = true;
+  readonly elements: Snippet[];
+
+  constructor(elements: Snippet[]) {
+    this.elements = elements;
+  }
+
+  toString(): string {
+    return 'TemplateLiteralExpression';
+  }
+
+  [$comptimeValueOf](): ComptimeValue {
+    const values: unknown[] = [];
+    for (const elem of this.elements) {
+      const known = asComptime(elem);
+      if (!known) {
+        return { comptime: false };
+      }
+      values.push(known.value);
+    }
+    return { comptime: true, value: values };
+  }
+}

packages/typegpu/src/tgsl/wgslGenerator.ts

@@ -46,6 +46,7 @@ import {
   coerceToSnippet,
   concretize,
   numericLiteralToSnippet,
+  TemplateLiteralExpression,
 } from './generationHelpers.ts';
 import { Swizzle } from './swizzle.ts';
 import { accessIndex } from './accessIndex.ts';
@@ -523,7 +524,12 @@ export class WgslGenerator implements ShaderGenerator {
     const callee = mathToStd.get(_callee) ?? _callee;
 
     if (supportedLogOps().includes(callee)) {
-      return this.ctx.generateLog(callee, args);
+      return this.ctx.generateLog(
+        callee,
+        args.flatMap((arg) =>
+          arg.value instanceof TemplateLiteralExpression ? arg.value.elements : [arg],
+        ),
+      );
     }
 
     if (callee === constant) {
@@ -1180,6 +1186,31 @@ The generated shader will evaluate them in declaration order.`,
       return snip(expression[1], UnknownData, /* origin */ 'constant', false);
     }
 
+    if (expression[0] === NODE.templateLiteral) {
+      const [_, quasis, expressions] = expression;
+      const expressionsSnippets = expressions.map((expr) => this._expression(expr));
+      const allConstant = expressionsSnippets.every((value) => value.origin === 'constant');
+
+      const quasisSnippets = quasis.map((quasi) =>
+        snip(quasi, UnknownData, /* origin */ 'constant', false),
+      );
+
+      const values = quasisSnippets.flatMap((quasi, i) => {
+        const expr = expressionsSnippets[i];
+        if (expr) {
+          return [quasi, expr];
+        }
+        return [quasi];
+      });
+
+      return snip(
+        new TemplateLiteralExpression(values),
+        UnknownData,
+        /* origin */ allConstant ? 'constant' : 'runtime',
+        values.some((v) => v.possibleSideEffects),
+      );
+    }
+
     if (expression[0] === NODE.preUpdate) {
       throw new Error('Cannot use pre-updates in TypeGPU functions.');
     }