@gi-tcg/gts-transpiler 0.2.0 → 0.3.1

package/src/transform/volar/mappings.ts

@@ -192,19 +192,12 @@ export function getGeneratedPosition(
   src_line: number,
   src_column: number,
   srcToGenMap: CodeToGeneratedMap,
-): CodePosition | undefined {
+): CodePosition[] {
   const key = `${src_line}:${src_column}`;
   const positions = srcToGenMap.get(key);
 
-  if (!positions || positions.length === 0) {
-    // No mapping found in source map - this shouldn't happen since all tokens should have mappings
-    // throw new Error(
-    //   `No source map entry for position "${src_line}:${src_column}"`
-    // );
-  }
-
   // If multiple generated positions map to same source, return the first
-  return positions?.[0];
+  return positions || [];
 }
 // Helper to create a line-to-offset lookup table
 function createLineOffsets(content: string): number[] {
@@ -245,7 +238,7 @@ export function convertToVolarMappings(
   source: string,
   sourceMap: SourceMap,
   tokens: LeafToken[],
-  additionalMappings: Map<string, string>,
+  extraMappings: Map<string, string>,
 ): CodeMapping[] {
   const sourceLineOffsets = createLineOffsets(source);
   const generatedLineOffsets = createLineOffsets(generated);
@@ -263,13 +256,18 @@ export function convertToVolarMappings(
       token.loc.start.column,
       sourceLineOffsets,
     );
+    sourceStart += token.sourceStartOffset ?? 0;
+
     const sourceEnd = locToOffset(
       token.loc.end.line,
       token.loc.end.column,
       sourceLineOffsets,
     );
+
     let sourceLength = token.sourceLength ?? sourceEnd - sourceStart;
-    const genLineCol = getGeneratedPosition(
+
+    sourceLength += token.sourceLengthOffset ?? 0;
+    const [genLineCol] = getGeneratedPosition(
       token.loc.start.line,
       token.loc.start.column,
       srcToGenMap,
@@ -283,19 +281,6 @@ export function convertToVolarMappings(
       genLineCol.column,
       generatedLineOffsets,
     );
-    if (token.locationAdjustment) {
-      // maps verification back to the start of source
-      mappings.push({
-        sourceOffsets: [sourceStart],
-        generatedOffsets: [genStart],
-        lengths: [0],
-        generatedLengths: [token.locationAdjustment.generatedLength],
-        data: {
-          verification: true,
-        },
-      });
-      genStart += token.locationAdjustment.startOffset;
-    }
     if (token.isDummy) {
       // A dummy token might be generated for a missing property / argument.
       // Notice that when facing this scenario, the parser tries to 'defer' and step through
@@ -308,9 +293,25 @@ export function convertToVolarMappings(
         sourceLength++;
       }
     }
-
     const generatedLength = token.generatedLength ?? sourceLength;
 
+    if (
+      typeof token.generatedStartOffset === "number" &&
+      token.generatedStartOffset > 0
+    ) {
+      // maps verification back to the start of source
+      mappings.push({
+        sourceOffsets: [sourceStart],
+        generatedOffsets: [genStart],
+        lengths: [0],
+        generatedLengths: [generatedLength],
+        data: {
+          verification: true,
+        },
+      });
+      genStart += token.generatedStartOffset;
+    }
+
     mappings.push({
       sourceOffsets: [sourceStart],
       generatedOffsets: [genStart],
@@ -320,7 +321,25 @@ export function convertToVolarMappings(
     });
   }
 
-  for (const [loc, codeSnippet] of additionalMappings) {
+  // Handle extra mappings that purely generated and wants a diagnostic
+  // that appears on the top of file.
+  // We'd add these mappings at walker that they will have a `loc` to `1:0`
+  // so find them by looking up a source position of `1:0` will work
+  const locMapsToTop = getGeneratedPosition(1, 0, srcToGenMap);
+  for (const loc of locMapsToTop) {
+    const offset = locToOffset(loc.line, loc.column, generatedLineOffsets);
+    mappings.push({
+      sourceOffsets: [0],
+      generatedOffsets: [offset],
+      lengths: [0],
+      generatedLengths: [0],
+      data: {
+        verification: true,
+      },
+    });
+  }
+
+  for (const [loc, codeSnippet] of extraMappings) {
     const generatedStart = generated.indexOf(codeSnippet);
     if (generatedStart === -1) {
       continue;

package/src/transform/volar/printer.ts

@@ -0,0 +1,123 @@
+import tsPrinter from "esrap/languages/ts";
+import type { AST } from "../../types";
+import type { Context, Visitors } from "esrap";
+import type { Node, SimpleCallExpression } from "estree";
+
+const printer = tsPrinter({
+  getLeadingComments: (node) => (node as AST.Node).leadingComments,
+  getTrailingComments: (node) => (node as AST.Node).trailingComments,
+});
+
+// Make the print of dummy identifier print nothing.
+// Exception: if GTS attribute list's last argument is dummy, e.g.
+//     foo bar, ;
+//             ^~ here
+// Then the printed JS will be `foo(bar, )` which WILL NOT be syntax error in ES6.
+// So we mark the lastArg manually and print an additional comma
+// for this dummy identifier, i.e. `foo(bar,,)` and TypeScript will recognize the error.
+
+const prevIdentifier = printer.Identifier!;
+printer.Identifier = function (node, context) {
+  if (node.isDummy) {
+    const text = Reflect.get(node, "lastArg") ? "," : "";
+    context.write(text, node);
+  } else {
+    prevIdentifier(node, context);
+  }
+};
+
+const prevCallNewExpression = printer.CallExpression!;
+const newCallNewExpression: typeof prevCallNewExpression = function (
+  node: SimpleCallExpression,
+  context,
+) {
+  const lastArg = node.arguments.at(-1);
+  if (lastArg) {
+    Reflect.set(lastArg, "lastArg", true);
+  }
+  if (!node.lParenLoc) {
+    return prevCallNewExpression(node, context);
+  }
+  let hasDeferredWrite = false;
+  let interceptionDone = false;
+  const lParenFakeNode = {
+    loc: node.lParenLoc!,
+  } as AST.Node;
+
+  // Map the print of `(` with the fake lParen node.
+  // The print of `(` can be happened in two area:
+  // 1. The wrapped parenthesis towards callee, which follows a `context.visit` to the callee;
+  // 2. The argument list (what we should map), which follows a `context.append` call
+  // so we defer the write of `(` to the next call of `context.visit|append`.
+  // If it is `context.append`, then make `context.write("(")` happens with our fake node
+  // and mapping will be added to the final code-mapping. Otherwise, keep original write.
+
+  const patchedWrite = (text: string, node?: AST.Node) => {
+    if (text === "(") {
+      hasDeferredWrite = true;
+    } else {
+      context.write(text, node);
+    }
+  };
+  const patchedVisit = (node: AST.Node) => {
+    if (hasDeferredWrite) {
+      context.write("(");
+    }
+    return context.visit(node);
+  };
+  const patchedAppend = (subcontext: Context) => {
+    if (hasDeferredWrite) {
+      context.write("(", lParenFakeNode);
+      // console.log("Inserted fake [LPAREN] for node at ", lParenFakeNode.loc);
+      interceptionDone = true;
+    }
+    return context.append(subcontext);
+  };
+  const proxiedContext = new Proxy(context, {
+    get(target, prop) {
+      if (!interceptionDone) {
+        if (prop === "write") {
+          return patchedWrite;
+        }
+        if (prop === "visit") {
+          return patchedVisit;
+        }
+        if (prop === "append") {
+          return patchedAppend;
+        }
+      }
+      const value = Reflect.get(target, prop);
+      if (typeof value === "function") {
+        return value.bind(target);
+      }
+      return value;
+    },
+  });
+  return prevCallNewExpression(node, proxiedContext);
+};
+printer.CallExpression = newCallNewExpression;
+printer.NewExpression = newCallNewExpression;
+
+// Handle node with `diagnosticsOnTop`. These nodes and their children will be
+// printed with an extra `loc` that point to the beginning of the source file,
+// so the source-mapping will include them with a 0:1 -> generated position entry.
+
+const prevWildcard = printer._!;
+printer._ = (node: Node, context, visit) => {
+  const contextProto = Object.getPrototypeOf(context);
+  const prevContextWrite: typeof context.write = contextProto.write;
+  if ("diagnosticsOnTop" in node && node.diagnosticsOnTop) {
+    contextProto.write = function (text: string, node?: AST.Node) {
+      node ??= {} as AST.Node;
+      node.loc ??= {
+        start: { line: 1, column: 0 },
+        end: { line: 1, column: 0 },
+      };
+      return prevContextWrite.call(this, text, node);
+    };
+  }
+  prevWildcard(node, context, visit);
+  contextProto.write = prevContextWrite;
+};
+
+export const patchedPrinter: Visitors<AST.Node> = printer;

package/src/transform/volar/replacements.ts

@@ -2,6 +2,9 @@ import type { ExpressionStatement } from "estree";
 import type { TypingTranspileState } from "./walker";
 
 type ReplacementPayload =
+  | {
+      type: "preface";
+    }
   | {
       type: "enterVMFromRoot";
       vm: string;
@@ -27,6 +30,7 @@ type ReplacementPayload =
       defType: string;
       metaType: string;
       lhs: string;
+      attrName: string;
     }
   | {
       type: "createBindingTyping";
@@ -76,32 +80,106 @@ export function applyReplacements(
     "\\b" + state.replacementTag.name + "`(.*?)`",
     "gm",
   );
-  const {
-    symbolsId: { NamedDefinition, Meta },
-  } = state;
+  const { NamedDefinitionLit, MetaLit } = state;
+  const NamedDefinition = JSON.stringify(NamedDefinitionLit.value);
+  const Meta = JSON.stringify(MetaLit.value);
+  const oneLine = (
+    strings: TemplateStringsArray,
+    ...values: Array<string | number | boolean>
+  ): string =>
+    strings
+      .reduce(
+        (result, chunk, index) =>
+          result + chunk + (index < values.length ? values[index] : ""),
+        "",
+      )
+      .replace(/\n[ \t]*/g, " ")
+      .trim();
   // All replacement should be written in one line to avoid messing up source map
   return code.replace(replacementRegex, (_, rawPayload) => {
     const payload: ReplacementPayload = JSON.parse(rawPayload);
-    if (payload.type === "enterVMFromRoot") {
-      return `type ${payload.defType} = (typeof ${payload.vm})[${NamedDefinition.name}]; type ${payload.metaType} = ${payload.defType}[${Meta.name}];`;
+    if (payload.type === "preface") {
+      return oneLine`
+        namespace ${state.utilNsId.name} {
+          export type UniqueKeyProbSegment = "__gts_unique_prob_seg__";
+          export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
+        }
+      `;
+    } else if (payload.type === "enterVMFromRoot") {
+      return oneLine`
+        type ${payload.defType} = (typeof ${payload.vm})[${NamedDefinition}];
+        type ${payload.metaType} = ${payload.defType}[${Meta}];
+      `;
     } else if (payload.type === "enterVMFromAttr") {
-      return `type ${payload.defType} = ${payload.returnType} extends { namedDefinition: infer Def } ? Def : { [${Meta.name}]: unknown }; type ${payload.metaType} = ${payload.defType}[${Meta.name}];`;
+      return oneLine`
+        type ${payload.defType} = ${payload.returnType} extends { namedDefinition: infer Def } ? Def : { ${Meta}: unknown };
+        type ${payload.metaType} = ${payload.defType}[${Meta}];
+      `;
     } else if (payload.type === "exitVM") {
       const lhs = `${payload.finalMetaType}_lhs`;
       const requiredAttrsNs = `${payload.finalMetaType}_rans`;
       const collectedAttrsExpr = `${payload.collectedAttrs.join(" | ")}`;
       const needleString = `"${requiredAttrsNs}_NeedleString" as any as "required attributes are missing"`;
       if (payload.errorLoc) {
-        state.additionalMappings.set(payload.errorLoc, needleString);
+        state.extraMappings.set(payload.errorLoc, needleString);
       }
-      return `type ${payload.finalMetaType} = ${payload.metaType}; const ${lhs}: { [${Meta.name}]: ${payload.metaType} } & Omit<${payload.defType}, ${Meta.name}> = 0 as any; type ${lhs} = typeof ${lhs}; namespace ${requiredAttrsNs} { export type Collected = ${collectedAttrsExpr}; export type Expected = { [K in keyof ${payload.defType}]: ${lhs}[K] extends { required(this: ${lhs}): true } ? K : never }[keyof ${payload.defType}]; }; ((_: ${requiredAttrsNs}.Expected extends ${requiredAttrsNs}.Collected ? string : ${requiredAttrsNs}.Expected) => 0)(${needleString});`;
+      return oneLine`
+        type ${payload.finalMetaType} = ${payload.metaType};
+        let ${lhs}!: { ${Meta}: ${payload.metaType} } & Omit<${payload.defType}, ${Meta}>;
+        type ${lhs} = typeof ${lhs};
+        namespace ${requiredAttrsNs} {
+          export type Collected = ${collectedAttrsExpr};
+          export type Expected = { [K in keyof ${payload.defType}]: ${lhs}[K] extends { required(this: ${lhs}): true } ? K : never }[keyof ${payload.defType}];
+        };
+        ((_: ${requiredAttrsNs}.Expected extends ${requiredAttrsNs}.Collected ? string : ${requiredAttrsNs}.Expected) => 0)(${needleString});
+      `;
     } else if (payload.type === "enterAttr") {
-      return `const ${payload.lhs}: { [${Meta.name}]: ${payload.metaType} } & Omit<${payload.defType}, ${Meta.name}> = 0 as any;`;
+      const uniqueKeyLhs = `${payload.lhs}_uniqueKey_lhs`;
+      const uniqueKey = `${payload.lhs}_uniqueKey`;
+      const uniqueKeyForThis = `${payload.lhs}_uniqueKeyFor_${payload.lhs}`;
+      const uniqueKeyHelperIntf = `${payload.defType}_uniqueKeyProbeHelper`;
+      const omittedKeys = `${payload.lhs}_omittedKeys`;
+      return oneLine`
+        type ${uniqueKeyLhs} = {
+          ${Meta}: ${payload.metaType}; 
+          uniqueKey: ${payload.defType} extends { [${payload.attrName}]: { uniqueKey: infer UniqueKey } } ? UniqueKey : () => 0;
+        
+        let ${uniqueKeyLhs}!: ${uniqueKeyLhs};
+        let ${uniqueKey} = ${uniqueKeyLhs}.uniqueKey();
+        type ${uniqueKey} = typeof ${uniqueKey};
+        let ${uniqueKeyForThis}!: \`\${${uniqueKey}}\${${state.utilNsId.name}.UniqueKeyProbSegment}${payload.lhs}\`;
+        interface ${uniqueKeyHelperIntf} {
+          [${uniqueKeyForThis}]: 1;
+        }
+        type ${omittedKeys} = ${Meta} | (
+          ${uniqueKey} extends 0
+          ? never                                                 /* no unique requirement */
+            : string extends keyof ${uniqueKeyHelperIntf}
+              ? keyof ${payload.defType}                          /* too loose, disable all */
+              : ${state.utilNsId.name}.UnionToIntersection<
+                keyof ${uniqueKeyHelperIntf} & \`\${${uniqueKey}}\${${state.utilNsId.name}.UniqueKeyProbSegment}\${string}\`
+              > extends never
+                ? ${payload.attrName}                             /* have duplicate, disable this */
+                : never
+        );
+        let ${payload.lhs}!: { ${Meta}: ${payload.metaType} } & Omit<${payload.defType}, ${omittedKeys}>;
+      `;
     } else if (payload.type === "createBindingTyping") {
       const typingIdLhs = `${payload.typingId}_lhs`;
-      return `type ${typingIdLhs} = { [${Meta.name}]: ${payload.finalMetaType}; as: ${payload.defType}[${payload.attrName}] extends { as: infer As } ? As : unknown }; let ${typingIdLhs}!: ${typingIdLhs}; let ${payload.typingId} = ${typingIdLhs}.as(); type ${payload.typingId} = typeof ${payload.typingId};`;
+      return oneLine`
+        type ${typingIdLhs} = {
+          ${Meta}: ${payload.finalMetaType};
+          as: ${payload.defType} extends { [${payload.attrName}]: { as: infer As } } ? As : unknown;
+        };
+        let ${typingIdLhs}!: ${typingIdLhs};
+        let ${payload.typingId} = ${typingIdLhs}.as();
+        type ${payload.typingId} = typeof ${payload.typingId};
+      `;
     } else if (payload.type === "exitAttr") {
-      return `type ${payload.returnType} = typeof ${payload.returnType}; type ${payload.newMetaType} = ${payload.returnType} extends { rewriteMeta: infer NewMeta extends {} } ? NewMeta : ${payload.oldMetaType}`;
+      return oneLine`
+        type ${payload.returnType} = typeof ${payload.returnType};
+        type ${payload.newMetaType} = ${payload.returnType} extends { rewriteMeta: infer NewMeta extends {} } ? NewMeta : ${payload.oldMetaType}
+      `;
     } else {
       return "";
     }

package/src/transform/volar/walker.ts

@@ -38,10 +38,9 @@ export interface TypingTranspileState extends TranspileState {
   externalizedBindings: ExternalizedTypedBinding[];
   idCounter: number;
   rootVmId: Identifier;
-  symbolsId: {
-    Meta: Identifier;
-    NamedDefinition: Identifier;
-  };
+  utilNsId: Identifier;
+  MetaLit: Literal;
+  NamedDefinitionLit: Literal;
   defineLeadingComments: Comment[] | undefined;
   // type of current VM's definition
   vmDefTypeIdStack: Identifier[];
@@ -53,11 +52,10 @@ export interface TypingTranspileState extends TranspileState {
   finalMetaTypeIdStack: Identifier[];
   // `obj` of `obj.attr(...)`
   // attrLhsIdStack: Identifier[];
-  prefaceInserted: boolean;
   /** Pending statements to be inserted to the top-level */
   typingPendingStatements: Statement[];
   replacementTag: Identifier;
-  additionalMappings: Map<string, string>;
+  extraMappings: Map<string, string>;
 }
 
 const EMPTY: EmptyStatement = { type: "EmptyStatement" };
@@ -74,68 +72,7 @@ const ANY_INIT = {
   typeAnnotation: ANY,
 } as {} as Expression;
 
-const emitPreface = (state: TypingTranspileState) => {
-  if (state.prefaceInserted) {
-    return;
-  }
-  const symbolsLhs = {
-    type: "TSQualifiedName",
-    left: { type: "Identifier", name: state.rootVmId.name },
-    right: { type: "Identifier", name: "_symbols" },
-  };
-  for (const symbolName of [
-    "Meta",
-    "Action",
-    "NamedDefinition",
-    "Prelude",
-  ] as const) {
-    const init = {
-      type: "TSTypeQuery",
-      exprName: {
-        type: "TSQualifiedName",
-        left: symbolsLhs,
-        right: { type: "Identifier", name: symbolName },
-      },
-    };
-    const symbolId =
-      symbolName === "Action"
-        ? state.ActionId
-        : symbolName === "Prelude"
-        ? state.preludeSymbolId
-        : state.symbolsId[symbolName];
-    state.typingPendingStatements.push(
-      {
-        type: "TSTypeAliasDeclaration",
-        id: symbolId,
-        typeAnnotation: init,
-      } as {} as VariableDeclaration,
-      {
-        type: "VariableDeclaration",
-        kind: "const",
-        declarations: [
-          {
-            type: "VariableDeclarator",
-            id: {
-              ...symbolId,
-              typeAnnotation: {
-                type: "TSTypeAnnotation",
-                typeAnnotation: {
-                  type: "TSTypeReference",
-                  typeName: symbolId,
-                },
-              },
-            } as Identifier,
-            init: ANY_INIT,
-          },
-        ],
-      } as VariableDeclaration
-    );
-  }
-  state.prefaceInserted = true;
-};
-
 const enterVMFromRoot = (state: TypingTranspileState) => {
-  emitPreface(state);
   let defTypeId: Identifier = {
     type: "Identifier",
     name: `__gts_rootVmDefType_${state.idCounter++}`,
@@ -154,7 +91,7 @@ const enterVMFromRoot = (state: TypingTranspileState) => {
       vm: state.rootVmId.name,
       defType: defTypeId.name,
       metaType: metaTypeId.name,
-    })
+    }),
   );
   state.vmDefTypeIdStack.push(defTypeId);
   state.metaTypeIdStack.push(metaTypeId);
@@ -163,7 +100,7 @@ const enterVMFromRoot = (state: TypingTranspileState) => {
 };
 const enterVMFromAttr = (
   state: TypingTranspileState,
-  returningId: Identifier
+  returningId: Identifier,
 ) => {
   const defTypeId: Identifier = {
     type: "Identifier",
@@ -183,7 +120,7 @@ const enterVMFromAttr = (
       returnType: returningId.name,
       defType: defTypeId.name,
       metaType: metaTypeId.name,
-    })
+    }),
   );
   state.vmDefTypeIdStack.push(defTypeId);
   state.metaTypeIdStack.push(metaTypeId);
@@ -204,13 +141,13 @@ const exitVM = (state: TypingTranspileState, errorLoc?: string) => {
       finalMetaType: finalMetaId.name,
       collectedAttrs: collectedAttrNames,
       errorLoc,
-    })
+    }),
   );
 };
 
 const enterAttr = (
   state: TypingTranspileState,
-  attrName: string
+  attrName: string,
 ): { lhsId: Identifier } => {
   const defTypeId = state.vmDefTypeIdStack.at(-1);
   const metaTypeId = state.metaTypeIdStack.at(-1);
@@ -229,7 +166,8 @@ const enterAttr = (
       defType: defTypeId.name,
       metaType: metaTypeId.name,
       lhs: lhsId.name,
-    })
+      attrName,
+    }),
   );
   return { lhsId: lhsId };
 };
@@ -239,7 +177,7 @@ const genBindingTyping = (
   info: {
     attrName: string;
     typingId: Identifier;
-  }
+  },
 ) => {
   const finalMetaId = state.finalMetaTypeIdStack.at(-1);
   const defTypeId = state.vmDefTypeIdStack.at(-1);
@@ -253,7 +191,7 @@ const genBindingTyping = (
       defType: defTypeId.name,
       attrName: info.attrName,
       typingId: info.typingId.name,
-    })
+    }),
   );
 };
 
@@ -274,7 +212,7 @@ const exitAttr = (state: TypingTranspileState, returningId: Identifier) => {
       oldMetaType: oldMetaTypeId.name,
       newMetaType: newMetaTypeId.name,
       returnType: returningId.name,
-    })
+    }),
   );
 };
 
@@ -311,7 +249,6 @@ export const gtsToTypingsWalker: Visitors<Node, TypingTranspileState> = {
             },
           } as VariableDeclarator,
         ],
-        leadingComments: extBinding.leadingComments,
       };
       if (extBinding.export) {
         body.unshift({
@@ -320,43 +257,50 @@ export const gtsToTypingsWalker: Visitors<Node, TypingTranspileState> = {
           specifiers: [],
           source: null,
           attributes: [],
+          leadingComments: extBinding.leadingComments,
         } as ExportNamedDeclaration);
       } else {
+        varDecl.leadingComments = extBinding.leadingComments;
         body.unshift(varDecl);
       }
     }
-    if (state.prefaceInserted) {
+    if (state.hasQueryExpressions) {
       body.unshift({
         type: "ImportDeclaration",
+        diagnosticsOnTop: true,
         specifiers: [
           {
             type: "ImportDefaultSpecifier",
-            local: state.rootVmId,
+            local: state.queryFnId,
           },
         ],
         source: {
           type: "Literal",
-          value: `${state.providerImportSource}/vm`,
+          value: `${state.providerImportSource}/query`,
         },
         attributes: [],
       });
     }
-    if (state.hasQueryExpressions) {
-      body.unshift({
+    body.unshift(
+      {
         type: "ImportDeclaration",
+        diagnosticsOnTop: true,
         specifiers: [
           {
             type: "ImportDefaultSpecifier",
-            local: state.queryFnId,
+            local: state.rootVmId,
           },
         ],
         source: {
           type: "Literal",
-          value: `${state.providerImportSource}/query`,
+          value: `${state.providerImportSource}/vm`,
         },
         attributes: [],
-      });
-    }
+      },
+      createReplacementHolder(state, {
+        type: "preface",
+      }),
+    );
     return {
       ...node,
       body,
@@ -371,18 +315,24 @@ export const gtsToTypingsWalker: Visitors<Node, TypingTranspileState> = {
   GTSNamedAttributeDefinition(node, { visit, state }) {
     const { name, body, bindingName } = node;
     const attrName = JSON.stringify(
-      name.type === "Literal" ? String(name.value) : name.name
+      name.type === "Literal" ? String(name.value) : name.name,
     );
+    const attributeNameToken = state.leafTokens.find((t) => t.loc === name.loc);
+    if (attributeNameToken) {
+      attributeNameToken.sourceLengthOffset = 1;
+    }
     const { lhsId } = enterAttr(state, attrName);
+    state.extraMappings.set(
+      `${name.loc?.start.line}:${name.loc?.start.column}`,
+      `${lhsId.name}${name.type === "Literal" ? `[` : `.`}`,
+    );
     const positionals = body.positionalAttributes.attributes.map(
       (attr): Expression => {
         if (attr.type === "Identifier" && /^[a-z_]/.test(attr.name)) {
           const token = state.leafTokens.find((t) => t.loc === attr.loc);
           if (token) {
-            token.locationAdjustment = {
-              startOffset: 1,
-              generatedLength: attr.name.length + 2, // quotation mark
-            };
+            token.generatedStartOffset = 1;
+            token.generatedLength = attr.name.length + 2; // quotation mark
           }
           return {
             type: "Literal",
@@ -392,7 +342,7 @@ export const gtsToTypingsWalker: Visitors<Node, TypingTranspileState> = {
         } else {
           return visit(attr) as Expression;
         }
-      }
+      },
     );
     const returnValue: Identifier = {
       type: "Identifier",
@@ -425,7 +375,7 @@ export const gtsToTypingsWalker: Visitors<Node, TypingTranspileState> = {
       visit(body.namedAttributes);
       exitVM(
         state,
-        `${body.namedAttributes.loc?.start.line}:${body.namedAttributes.loc?.start.column}`
+        `${body.namedAttributes.loc?.start.line}:${body.namedAttributes.loc?.start.column}`,
       );
     }
     if (bindingName) {
@@ -462,7 +412,14 @@ export const gtsToTypingsWalker: Visitors<Node, TypingTranspileState> = {
       visit(attr);
     }
     if (node.directAction) {
-      const { lhsId } = enterAttr(state, state.ActionId.name);
+      const attrName = JSON.stringify(state.ActionLit.value);
+      const { lhsId } = enterAttr(state, attrName);
+      const actionNotExistsReplacementStr = `${lhsId.name}[${attrName}]`;
+      const actionNotExistsErrorLoc = `${node.directAction.loc?.start.line}:${node.directAction.loc?.start.column}`;
+      state.extraMappings.set(
+        actionNotExistsErrorLoc,
+        actionNotExistsReplacementStr,
+      );
       const fn: ArrowFunctionExpression = {
         type: "ArrowFunctionExpression",
         params: state.shortcutFunctionParameters,
@@ -489,7 +446,7 @@ export const gtsToTypingsWalker: Visitors<Node, TypingTranspileState> = {
               callee: {
                 type: "MemberExpression",
                 object: lhsId,
-                property: state.ActionId,
+                property: state.ActionLit,
                 computed: true,
                 optional: false,
               },