@gi-tcg/gts-transpiler 0.3.3 → 0.3.4

package/dist/index.js

@@ -814,12 +814,17 @@ const commonGtsVisitor = {
 		};
 	},
 	GTSQueryExpression(node, { state, visit }) {
-		state.hasQueryExpressions = true;
 		return {
 			...node,
 			type: "CallExpression",
 			optional: false,
-			callee: state.queryFnId,
+			callee: {
+				type: "MemberExpression",
+				object: state.fnArgId,
+				property: node.star ? state.QueryAllLit : state.QueryLit,
+				computed: true,
+				optional: false
+			},
 			arguments: [{
 				type: "ArrowFunctionExpression",
 				body: visit(node.argument),
@@ -827,34 +832,6 @@ const commonGtsVisitor = {
 				expression: true,
 				loc: node.argument.loc,
 				range: node.argument.range
-			}, {
-				type: "ObjectExpression",
-				properties: [{
-					type: "Property",
-					key: {
-						type: "Identifier",
-						name: "star"
-					},
-					computed: false,
-					kind: "init",
-					method: false,
-					shorthand: false,
-					value: {
-						type: "Literal",
-						value: !!node.star
-					}
-				}, {
-					type: "Property",
-					key: {
-						type: "Identifier",
-						name: "context"
-					},
-					computed: false,
-					kind: "init",
-					method: false,
-					shorthand: false,
-					value: state.fnArgId
-				}]
 			}]
 		};
 	}
@@ -868,18 +845,6 @@ const gtsVisitor = {
 		}
 		body.unshift(...state.bindingStatements);
 		state.bindingStatements = [];
-		if (state.hasQueryExpressions) body.unshift({
-			type: "ImportDeclaration",
-			specifiers: [{
-				type: "ImportDefaultSpecifier",
-				local: state.queryFnId
-			}],
-			source: {
-				type: "Literal",
-				value: `${state.providerImportSource}/query`
-			},
-			attributes: []
-		});
 		body.unshift({
 			type: "ImportDeclaration",
 			specifiers: [{
@@ -1195,10 +1160,6 @@ const initialTranspileState = (option = {}) => {
 			type: "Identifier",
 			name: "__gts_rootVm"
 		},
-		queryFnId: {
-			type: "Identifier",
-			name: "__gts_query"
-		},
 		queryParameters: [{
 			type: "ObjectPattern",
 			properties: queryBindings.map((name) => ({
@@ -1217,28 +1178,17 @@ const initialTranspileState = (option = {}) => {
 				shorthand: true
 			}))
 		}],
+		QueryLit: {
+			type: "Literal",
+			value: "~query"
+		},
+		QueryAllLit: {
+			type: "Literal",
+			value: "~queryAll"
+		},
 		runtimeImportSource: option.runtimeImportSource ?? "@gi-tcg/gts-runtime",
 		providerImportSource: option.providerImportSource ?? "@gi-tcg/core/gts",
-		queryArg: {
-			type: "ObjectPattern",
-			properties: (option.queryBindings ?? []).map((name) => ({
-				type: "Property",
-				key: {
-					type: "Identifier",
-					name
-				},
-				computed: false,
-				kind: "init",
-				method: false,
-				shorthand: true,
-				value: {
-					type: "Identifier",
-					name
-				}
-			}))
-		},
 		externalizedBindings: [],
-		hasQueryExpressions: false,
 		defineIdCounter: 0,
 		bindingStatements: []
 	};
@@ -1375,14 +1325,6 @@ function applyReplacements(state, code, mappings) {
 //#endregion
 //#region src/transform/volar/walker.ts
 const EMPTY = { type: "EmptyStatement" };
-const ANY_INIT = {
-	type: "TSAsExpression",
-	expression: {
-		type: "Literal",
-		value: 0
-	},
-	typeAnnotation: { type: "TSAnyKeyword" }
-};
 const enterVMFromRoot = (state) => {
 	let defTypeId = {
 		type: "Identifier",
@@ -1510,13 +1452,19 @@ const gtsToTypingsWalker = {
 				declarations: [{
 					type: "VariableDeclarator",
 					id: extBinding.bindingName,
-					init: ANY_INIT,
 					typeAnnotation: {
 						type: "TSTypeAnnotation",
 						typeAnnotation: {
 							type: "TSTypeReference",
 							typeName: extBinding.typingId
 						}
+					},
+					init: {
+						type: "TSNonNullExpression",
+						expression: {
+							type: "Literal",
+							value: null
+						}
 					}
 				}]
 			};
@@ -1534,27 +1482,37 @@ const gtsToTypingsWalker = {
 			}
 		}
 		const importDecls = [];
-		if (state.hasQueryExpressions) importDecls.push({
+		importDecls.push({
 			type: "ImportDeclaration",
 			specifiers: [{
 				type: "ImportDefaultSpecifier",
-				local: state.queryFnId
+				local: state.rootVmId
 			}],
 			source: {
 				type: "Literal",
-				value: `${state.providerImportSource}/query`
+				value: `${state.providerImportSource}/vm`
 			},
 			attributes: []
-		});
-		importDecls.push({
+		}, {
 			type: "ImportDeclaration",
 			specifiers: [{
-				type: "ImportDefaultSpecifier",
-				local: state.rootVmId
+				type: "ImportSpecifier",
+				imported: {
+					type: "Identifier",
+					name: "createDefine"
+				},
+				local: state.createDefineFnId
+			}, {
+				type: "ImportSpecifier",
+				imported: {
+					type: "Identifier",
+					name: "createBinding"
+				},
+				local: state.createBindingFnId
 			}],
 			source: {
 				type: "Literal",
-				value: `${state.providerImportSource}/vm`
+				value: state.runtimeImportSource
 			},
 			attributes: []
 		});
@@ -1562,7 +1520,22 @@ const gtsToTypingsWalker = {
 			state.diagnosticsOnTopNodes.add(importDecl.source);
 			for (const specifier of importDecl.specifiers) state.diagnosticsOnTopNodes.add(specifier);
 		}
-		body.unshift(...importDecls, createReplacementHolder(state, { type: "preface" }));
+		const lastImportDecl = importDecls.pop() ?? {
+			type: "ImportDeclaration",
+			specifiers: [],
+			source: {
+				type: "Literal",
+				value: ""
+			},
+			attributes: []
+		};
+		body.unshift(...importDecls, {
+			type: "ExpressionStatement",
+			expression: {
+				type: "Literal",
+				value: 0
+			}
+		}, lastImportDecl, createReplacementHolder(state, { type: "preface" }));
 		return {
 			...node,
 			body
@@ -1770,6 +1743,27 @@ function getPrintOptions(source, state) {
 						end: 1
 					}, generatedStart, generatedEnd, VERIFICATION_ONLY_MAPPING_DATA);
 				}
+			},
+			ImportSpecifier(node, context) {
+				const generatedStart = context.generatedOffset;
+				defaultPrinters.ImportSpecifier(node, context);
+				if (state.diagnosticsOnTopNodes.has(node)) {
+					const generatedEnd = context.generatedOffset;
+					context.createExtraMapping({
+						start: 0,
+						end: 1
+					}, generatedStart, generatedEnd, VERIFICATION_ONLY_MAPPING_DATA);
+				}
+			},
+			ImportDeclaration(node, context) {
+				defaultPrinters.ImportDeclaration(node, context);
+				if (state.lastImportDeclarationIfGen === node) {
+					context.write("\n");
+					context.createExtraMapping({
+						start: state.contentStartOffset,
+						end: state.contentStartOffset + 1
+					}, context.generatedOffset, context.generatedOffset + 1, DEFAULT_VOLAR_MAPPING_DATA);
+				}
 			}
 		},
 		experimentalGetLeftParenSourceRange: (node) => {
@@ -1783,6 +1777,62 @@ function getPrintOptions(source, state) {
 	};
 }
 //#endregion
+//#region src/transform/volar/content_start.ts
+/**
+* Get the character offset after hashbang and file-scope leading comments.
+* This is for simulating the behavior of TSServer insert auto-imports if no
+* imports are present.
+* @param source 
+* @returns 
+*/
+function getContentStartOffset(source) {
+	let result = 0;
+	/** Current visiting character */
+	let pos = 0;
+	if (source.startsWith("#!")) {
+		const nl = source.indexOf("\n", pos);
+		if (nl === -1) return source.length;
+		pos = nl + 1;
+	}
+	const skipWhitespaces = () => {
+		let newlineCount = 0;
+		for (; pos < source.length; pos++) {
+			const ch = source[pos];
+			if (ch === " " || ch === "	" || ch === "\r") continue;
+			if (ch === "\n") {
+				newlineCount++;
+				continue;
+			}
+			break;
+		}
+		return newlineCount;
+	};
+	skipWhitespaces();
+	while (pos < source.length) {
+		let newlineCount = 0;
+		if (source[pos] === "/" && pos + 1 < source.length) {
+			if (source[pos + 1] === "/") {
+				const nl = source.indexOf("\n", pos);
+				pos = nl === -1 ? source.length : nl + 1;
+				newlineCount++;
+			} else if (source[pos + 1] === "*") {
+				pos += 2;
+				while (pos < source.length) {
+					if (source[pos] === "*" && pos + 1 < source.length && source[pos + 1] === "/") {
+						pos += 2;
+						break;
+					}
+					pos++;
+				}
+			}
+			result = pos;
+			newlineCount += skipWhitespaces();
+			if (newlineCount >= 2) break;
+		} else break;
+	}
+	return result;
+}
+//#endregion
 //#region src/transform/volar/index.ts
 function transformForVolar(ast, option, sourceInfo) {
 	const state = {
@@ -1818,18 +1868,25 @@ function transformForVolar(ast, option, sourceInfo) {
 		namedAttributeCalleeLParenRange: /* @__PURE__ */ new WeakMap(),
 		literalFromIdentifier: /* @__PURE__ */ new WeakSet(),
 		lastArgNodes: /* @__PURE__ */ new WeakSet(),
+		lastImportDeclarationIfGen: null,
 		diagnosticsOnTopNodes: /* @__PURE__ */ new WeakSet(),
-		extraMappings: []
+		extraMappings: [],
+		contentStartOffset: getContentStartOffset(sourceInfo.content)
 	};
 	walk(ast, state, { _(node, { state, next }) {
 		if (node.range) state.sourceNodes.add(node);
 		next();
 	} });
 	const newAst = walk(ast, state, gtsToTypingsWalker);
-	walk(newAst, state, { CallExpression(node, { state }) {
-		const lastArg = node.arguments.at(-1);
-		if (lastArg) state.lastArgNodes.add(lastArg);
-	} });
+	walk(newAst, state, {
+		CallExpression(node, { state }) {
+			const lastArg = node.arguments.at(-1);
+			if (lastArg) state.lastArgNodes.add(lastArg);
+		},
+		ImportDeclaration(node, { state }) {
+			if (!state.sourceNodes.has(node)) state.lastImportDeclarationIfGen = node;
+		}
+	});
 	let { code, mappings } = print$1(newAst, getPrintOptions(sourceInfo.content, state));
 	code = applyReplacements(state, code, mappings);
 	for (const extraMapping of state.extraMappings) {
@@ -1842,6 +1899,12 @@ function transformForVolar(ast, option, sourceInfo) {
 			data: VERIFICATION_ONLY_MAPPING_DATA
 		});
 	}
+	walk(newAst, null, { ImportDeclaration(node) {
+		if (!node.range) return;
+		const endOffset = node.range[1];
+		const mappingEndsWithThisImport = mappings.find((m) => m.sourceOffsets[0] + m.lengths[0] === endOffset);
+		if (mappingEndsWithThisImport?.lengths[0]) mappingEndsWithThisImport.lengths[0] += 1;
+	} });
 	return {
 		code,
 		mappings

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gi-tcg/gts-transpiler",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "repository": "https://github.com/piovium/gts.git",
   "license": "Apache-2.0",
   "type": "module",
@@ -19,7 +19,7 @@
     "@sveltejs/acorn-typescript": "^1.0.8",
     "acorn": "^8.15.0",
     "dedent": "^1.7.2",
-    "espolar": "^0.2.1",
+    "espolar": "^0.5.1",
     "esrap": "2.2.1",
     "magic-string": "^0.30.21",
     "path-browserify-esm": "^1.0.6",

package/src/transform/gts.ts

@@ -10,7 +10,6 @@ import type {
   ModuleDeclaration,
   Node,
   ObjectExpression,
-  ObjectPattern,
   Pattern,
   Program,
   Statement,
@@ -35,14 +34,12 @@ export interface TranspileState {
   readonly fnArgId: Identifier;
   readonly shortcutFunctionParameters: Pattern[];
   readonly rootVmId: Identifier;
-  readonly queryFnId: Identifier;
   readonly queryParameters: Pattern[];
+  readonly QueryLit: Literal;
+  readonly QueryAllLit: Literal;
 
   readonly runtimeImportSource: string;
   readonly providerImportSource: string;
-  readonly queryArg: ObjectPattern;
-  
-  hasQueryExpressions: boolean;
 
   externalizedBindings: ExternalizedBinding[];
   /** Internal counters / state for emitting per-define nodes & bindings */
@@ -137,12 +134,17 @@ export const commonGtsVisitor: Visitors<Node, TranspileState> = {
     };
   },
   GTSQueryExpression(node, { state, visit }) {
-    state.hasQueryExpressions = true;
     return {
       ...node,
       type: "CallExpression",
       optional: false,
-      callee: state.queryFnId,
+      callee: {
+        type: "MemberExpression",
+        object: state.fnArgId,
+        property: node.star ? state.QueryAllLit : state.QueryLit,
+        computed: true,
+        optional: false,
+      },
       arguments: [
         {
           type: "ArrowFunctionExpression",
@@ -152,45 +154,12 @@ export const commonGtsVisitor: Visitors<Node, TranspileState> = {
           loc: node.argument.loc,
           range: node.argument.range,
         },
-        {
-          type: "ObjectExpression",
-          properties: [
-            {
-              type: "Property",
-              key: { type: "Identifier", name: "star" },
-              computed: false,
-              kind: "init",
-              method: false,
-              shorthand: false,
-              value: {
-                type: "Literal",
-                value: !!node.star,
-              },
-            },
-            {
-              type: "Property",
-              key: { type: "Identifier", name: "context" },
-              computed: false,
-              kind: "init",
-              method: false,
-              shorthand: false,
-              value: state.fnArgId,
-            }
-          ],
-        },
       ],
     };
   },
 };
 
 const gtsVisitor: Visitors<Node, TranspileState> = {
-  // _(node, { next }) {
-  //   console.log(node.type, !!node.leadingComments)
-  //   if (node.leadingComments) {
-  //     console.log(node.leadingComments);
-  //   }
-  //   return next();
-  // },
   Program(node, { state, visit }) {
     const body: Program["body"] = [];
     for (const stmt of node.body) {
@@ -201,22 +170,6 @@ const gtsVisitor: Visitors<Node, TranspileState> = {
     body.unshift(...state.bindingStatements);
     state.bindingStatements = [];
 
-    if (state.hasQueryExpressions) {
-      body.unshift({
-        type: "ImportDeclaration",
-        specifiers: [
-          {
-            type: "ImportDefaultSpecifier",
-            local: state.queryFnId,
-          },
-        ],
-        source: {
-          type: "Literal",
-          value: `${state.providerImportSource}/query`,
-        },
-        attributes: [],
-      });
-    }
     body.unshift(
       {
         type: "ImportDeclaration",
@@ -555,26 +508,14 @@ export const initialTranspileState = (
     fnArgId,
     shortcutFunctionParameters,
     rootVmId: { type: "Identifier", name: "__gts_rootVm" },
-    queryFnId: { type: "Identifier", name: "__gts_query" },
     queryParameters,
+    QueryLit: { type: "Literal", value: "~query" },
+    QueryAllLit: { type: "Literal", value: "~queryAll" },
 
     runtimeImportSource: option.runtimeImportSource ?? "@gi-tcg/gts-runtime",
     providerImportSource: option.providerImportSource ?? "@gi-tcg/core/gts",
-    queryArg: {
-      type: "ObjectPattern",
-      properties: (option.queryBindings ?? []).map((name) => ({
-        type: "Property",
-        key: { type: "Identifier", name },
-        computed: false,
-        kind: "init",
-        method: false,
-        shorthand: true,
-        value: { type: "Identifier", name },
-      })),
-    },
 
     externalizedBindings: [],
-    hasQueryExpressions: false,
     defineIdCounter: 0,
 
     bindingStatements: [],

package/src/transform/volar/content_start.ts

@@ -0,0 +1,69 @@
+/**
+ * Get the character offset after hashbang and file-scope leading comments.
+ * This is for simulating the behavior of TSServer insert auto-imports if no
+ * imports are present.
+ * @param source 
+ * @returns 
+ */
+export function getContentStartOffset(source: string): number {
+  let result = 0;
+  /** Current visiting character */
+  let pos = 0;
+  if (source.startsWith("#!")) {
+    const nl = source.indexOf("\n", pos);
+    if (nl === -1) {
+      return source.length;
+    }
+    pos = nl + 1;
+  }
+  const skipWhitespaces = () => {
+    let newlineCount = 0;
+    for (; pos < source.length; pos++) {
+      const ch = source[pos];
+      if (ch === " " || ch === "\t" || ch === "\r") {
+        continue;
+      }
+      if (ch === "\n") {
+        newlineCount++;
+        continue;
+      }
+      break;
+    }
+    return newlineCount;
+  }
+  skipWhitespaces();
+  while (pos < source.length) {
+    let newlineCount = 0;
+    // Eat a comment
+    if (source[pos] === "/" && pos + 1 < source.length) {
+      if (source[pos + 1] === "/") {
+        const nl = source.indexOf("\n", pos);
+        pos = nl === -1 ? source.length : nl + 1;
+        newlineCount++;
+      } else if (source[pos + 1] === "*") {
+        pos += 2;
+        while (pos < source.length) {
+          if (
+            source[pos] === "*" &&
+            pos + 1 < source.length &&
+            source[pos + 1] === "/"
+          ) {
+            pos += 2;
+            break;
+          }
+          pos++;
+        }
+      }
+      result = pos;
+      newlineCount += skipWhitespaces();
+      // If there are already 2 newlines in whitespace, the leading comments are ended
+      if (newlineCount >= 2) {
+        break;
+      }
+    } else {
+      // Not a comment, stop here
+      break;
+    }
+  }
+  return result;
+}

package/src/transform/volar/index.ts

@@ -10,8 +10,12 @@ import {
 import { gtsToTypingsWalker, type TypingTranspileState } from "./walker.ts";
 import { applyReplacements } from "./replacements.ts";
 import type { Program } from "estree";
-import { VERIFICATION_ONLY_MAPPING_DATA, type VolarMappingResult } from "./mappings.ts";
+import {
+  VERIFICATION_ONLY_MAPPING_DATA,
+  type VolarMappingResult,
+} from "./mappings.ts";
 import { getPrintOptions } from "./printer.ts";
+import { getContentStartOffset } from "./content_start.ts";
 
 export function transformForVolar(
   ast: Program,
@@ -40,8 +44,10 @@ export function transformForVolar(
     namedAttributeCalleeLParenRange: new WeakMap(),
     literalFromIdentifier: new WeakSet(),
     lastArgNodes: new WeakSet(),
+    lastImportDeclarationIfGen: null,
     diagnosticsOnTopNodes: new WeakSet(),
     extraMappings: [],
+    contentStartOffset: getContentStartOffset(sourceInfo.content),
   };
   // mark sourceNodes before the transformation
   walk(ast as AST.Node, state, {
@@ -60,7 +66,12 @@ export function transformForVolar(
       if (lastArg) {
         state.lastArgNodes.add(lastArg);
       }
-    }
+    },
+    ImportDeclaration(node, { state }) {
+      if (!state.sourceNodes.has(node)) {
+        state.lastImportDeclarationIfGen = node;
+      }
+    },
   });
   const printOptions = getPrintOptions(sourceInfo.content, state);
   let { code, mappings } = print(newAst, printOptions);
@@ -75,6 +86,20 @@ export function transformForVolar(
       data: VERIFICATION_ONLY_MAPPING_DATA,
     });
   }
+  walk(newAst, null, {
+    ImportDeclaration(node) {
+      if (!node.range) {
+        return;
+      }
+      const endOffset = node.range[1];
+      const mappingEndsWithThisImport = mappings.find(
+        (m) => m.sourceOffsets[0] + m.lengths[0] === endOffset,
+      );
+      if (mappingEndsWithThisImport?.lengths[0]) {
+        mappingEndsWithThisImport.lengths[0] += 1; // include the newline after the import
+      }
+    },
+  });
   return {
     code,
     mappings,

package/src/transform/volar/printer.ts

@@ -67,7 +67,7 @@ export function getPrintOptions(
           defaultPrinters.Literal(node, context);
         }
         // For generated `import xxx from "yyy"`, add mappings from xxx and yyy
-        // to the top-of-file for diagnostics around missing / wrong imports.
+        // to the top-of-file for diagnostics around missing / wrong imports. [[1]]
         if (state.diagnosticsOnTopNodes.has(node)) {
           const generatedEnd = context.generatedOffset;
           context.createExtraMapping(
@@ -78,10 +78,25 @@ export function getPrintOptions(
           );
         }
       },
+      // Same as [[1]]
       ImportDefaultSpecifier(node, context) {
         const generatedStart = context.generatedOffset;
         defaultPrinters.ImportDefaultSpecifier(node, context);
-        if (state.diagnosticsOnTopNodes.has(node as Node)) {
+        if (state.diagnosticsOnTopNodes.has(node)) {
+          const generatedEnd = context.generatedOffset;
+          context.createExtraMapping(
+            { start: 0, end: 1 },
+            generatedStart,
+            generatedEnd,
+            VERIFICATION_ONLY_MAPPING_DATA,
+          );
+        }
+      },
+      // Same as [[1]]
+      ImportSpecifier(node, context) {
+        const generatedStart = context.generatedOffset;
+        defaultPrinters.ImportSpecifier(node, context);
+        if (state.diagnosticsOnTopNodes.has(node)) {
           const generatedEnd = context.generatedOffset;
           context.createExtraMapping(
             { start: 0, end: 1 },
@@ -91,6 +106,29 @@ export function getPrintOptions(
           );
         }
       },
+      // If the last import declaration is a generated one, because of we ensured that
+      // the generated import declarations are always unsorted, so TSServer will set the
+      // auto-insertion point next to this last import declaration.
+      // Add a mapping to that position (a written newline character) to the top-of-file,
+      // after skipping hashbang and leading comments.
+      // NOTE: since the insertion derived from here won't add additional newline *before*
+      // the inserted text, so here is a difference behavior from standard TSServer and our
+      // language server. We'd try our best.
+      ImportDeclaration(node, context) {
+        defaultPrinters.ImportDeclaration(node, context);
+        if (state.lastImportDeclarationIfGen === node) {
+          context.write("\n");
+          context.createExtraMapping(
+            {
+              start: state.contentStartOffset,
+              end: state.contentStartOffset + 1,
+            },
+            context.generatedOffset,
+            context.generatedOffset + 1,
+            DEFAULT_VOLAR_MAPPING_DATA,
+          );
+        }
+      },
     },
     // Enable triggering signature completion
     experimentalGetLeftParenSourceRange: (node) => {

package/src/transform/volar/walker.ts

@@ -67,6 +67,11 @@ export interface TypingTranspileState extends TranspileState {
   literalFromIdentifier: WeakSet<Literal>;
   /** Nodes that are last arguments of a CallExpression */
   lastArgNodes: WeakSet<Node>;
+  /**
+   * The last import declaration, record if it is a generated one.
+   * This declaration marks the TS auto-import insertion point.
+   */
+  lastImportDeclarationIfGen: ImportDeclaration | null;
   /** Nodes that have a diagnostic mappings to the top of the file */
   diagnosticsOnTopNodes: WeakSet<Node>;
   /** Extra mappings, the generated range will be found by the needle after replacement */
@@ -75,22 +80,12 @@ export interface TypingTranspileState extends TranspileState {
     length: number;
     generatedNeedle: string;
   }[];
+  /** Character offset after hashbang and file-scope leading comments */
+  contentStartOffset: number;
 }
 
 const EMPTY: EmptyStatement = { type: "EmptyStatement" };
 
-const ANY = {
-  type: "TSAnyKeyword",
-};
-
-// definite not supported by esrap yet, so we init the binding with an `as any` cast
-// https://github.com/sveltejs/esrap/issues/95
-const ANY_INIT = {
-  type: "TSAsExpression",
-  expression: { type: "Literal", value: 0 },
-  typeAnnotation: ANY,
-} as {} as Expression;
-
 const enterVMFromRoot = (state: TypingTranspileState) => {
   let defTypeId: Identifier = {
     type: "Identifier",
@@ -258,7 +253,7 @@ export const gtsToTypingsWalker: Visitors<Node, TypingTranspileState> = {
           {
             type: "VariableDeclarator",
             id: extBinding.bindingName,
-            init: ANY_INIT,
+            // @ts-expect-error TS property not provided in ESTree
             typeAnnotation: {
               type: "TSTypeAnnotation",
               typeAnnotation: {
@@ -266,7 +261,14 @@ export const gtsToTypingsWalker: Visitors<Node, TypingTranspileState> = {
                 typeName: extBinding.typingId,
               },
             },
-          } as VariableDeclarator,
+            init: {
+              type: "TSNonNullExpression",
+              expression: {
+                type: "Literal",
+                value: null,
+              } satisfies Expression,
+            } as any,
+          },
         ],
       };
       if (extBinding.export) {
@@ -284,44 +286,65 @@ export const gtsToTypingsWalker: Visitors<Node, TypingTranspileState> = {
       }
     }
     const importDecls: ImportDeclaration[] = [];
-    if (state.hasQueryExpressions) {
-      importDecls.push({
+    importDecls.push(
+      {
         type: "ImportDeclaration",
         specifiers: [
           {
             type: "ImportDefaultSpecifier",
-            local: state.queryFnId,
+            local: state.rootVmId,
           },
         ],
         source: {
           type: "Literal",
-          value: `${state.providerImportSource}/query`,
+          value: `${state.providerImportSource}/vm`,
         },
         attributes: [],
-      });
-    }
-    importDecls.push({
-      type: "ImportDeclaration",
-      specifiers: [
-        {
-          type: "ImportDefaultSpecifier",
-          local: state.rootVmId,
-        },
-      ],
-      source: {
-        type: "Literal",
-        value: `${state.providerImportSource}/vm`,
       },
-      attributes: [],
-    });
+      {
+        type: "ImportDeclaration",
+        specifiers: [
+          {
+            type: "ImportSpecifier",
+            imported: { type: "Identifier", name: "createDefine" },
+            local: state.createDefineFnId,
+          },
+          {
+            type: "ImportSpecifier",
+            imported: { type: "Identifier", name: "createBinding" },
+            local: state.createBindingFnId,
+          },
+        ],
+        source: { type: "Literal", value: state.runtimeImportSource },
+        attributes: [],
+      },
+    );
     for (const importDecl of importDecls) {
       state.diagnosticsOnTopNodes.add(importDecl.source);
       for (const specifier of importDecl.specifiers) {
         state.diagnosticsOnTopNodes.add(specifier);
       }
     }
+    const lastImportDecl = importDecls.pop() ?? {
+      type: "ImportDeclaration",
+      specifiers: [],
+      source: { type: "Literal", value: "" },
+      attributes: [],
+    } satisfies ImportDeclaration;
     body.unshift(
       ...importDecls,
+      // Add an unrelated statement between system generated imports to make them unsorted,
+      // so that TSServer will always insert auto-imports after the last ImportDeclaration.
+      // `lastImportDecl` will be marked as insertion point in printer if no user's
+      // ImportDeclaration is provided
+      {
+        type: "ExpressionStatement",
+        expression: {
+          type: "Literal",
+          value: 0,
+        }
+      },
+      lastImportDecl,
       createReplacementHolder(state, {
         type: "preface",
       }),