DEV Community: Riel Joseph

Neovim Treesitter highlighting with sql generic types (Typescript)

Riel Joseph — Wed, 29 Oct 2025 23:22:52 +0000

If you’ve ever written raw SQL queries inside TypeScript template literals, you probably love Treesitter’s syntax highlighting for embedded languages like:

const result = await sql`SELECT * FROM users`;

But what happens when your code starts getting fancy — say, using generic calls, non-null assertions, or different helper functions like tx.sql or sql<User>?

By default, Treesitter doesn’t inject SQL highlighting in these more complex patterns.
In this post, we’ll fix that by writing a custom Treesitter injection query to handle generic TypeScript expressions with sql and tx.

The Problem

Neovim’s Treesitter injection for SQL works great in the simplest case:

const users = await sql`SELECT * FROM users`;

…but once you introduce TypeScript generics or non-null assertions, highlighting breaks:

// Generic instantiation
const result = await sql<User>`SELECT * FROM users`;

// Non-null expression
const result = (await sql<User>!)`SELECT * FROM users`;

The reason?
Treesitter doesn’t recognize that sql<User> (an instantiation_expression) still represents a function call for the purpose of language injection.

The Fix: Custom Treesitter Injection Query

To solve this, we extend Neovim’s built-in SQL injection rules using a custom .scm query file.

Create a file at:

~/.config/nvim/queries/typescript/injections.scm

Paste this code:

;; Extend built-in injections
(call_expression
  function: (non_null_expression
    (instantiation_expression
      (await_expression
        (identifier) @_name)))
  arguments: (template_string) @injection.content
  (#eq? @_name "sql")
  (#set! injection.language "sql")
  (#set! injection.include-children))

;; Handle simpler variants like sql`...` and await sql`...`
(call_expression
  function: [
    (identifier) @_name
    (await_expression (identifier) @_name)
    (instantiation_expression function: (identifier) @_name)
  ]
  arguments: (template_string) @injection.content
  (#eq? @_name "sql")
  (#set! injection.language "sql")
  (#set! injection.include-children))

;; Support tx`...` and tx<User>`...`
(call_expression
  function: (non_null_expression
    (instantiation_expression
      (await_expression
        (identifier) @_name)))
  arguments: (template_string) @injection.content
  (#eq? @_name "tx")
  (#set! injection.language "sql")
  (#set! injection.include-children))

;; Handle simpler variants for tx as well
(call_expression
  function: [
    (identifier) @_name
    (await_expression (identifier) @_name)
    (instantiation_expression function: (identifier) @_name)
  ]
  arguments: (template_string) @injection.content
  (#eq? @_name "tx")
  (#set! injection.language "sql")
  (#set! injection.include-children))

What This Query Does

Let’s break it down.

Treesitter parses TypeScript code into syntax nodes like:

call_expression — a function call (sql\...``)
instantiation_expression — a generic function call (sql<User>)
await_expression — for await sql\...``
template_string — your backticked SQL string

We’re telling Treesitter:

“Whenever you see a call_expression whose function name is sql or tx, treat the argument (a template string) as SQL content.”

The #set! injection.language "sql" command tells Neovim to apply SQL highlighting within that string.

We also include multiple variations to cover:

sql\...``
await sql\...``
sql<User>\...``
await sql<User>\...``
tx\...``
await tx<User>\...``

Testing It

Once you’ve saved the query, restart Neovim and open a TypeScript file containing SQL template strings.

Try all these patterns:

const a = sql`SELECT * FROM users`;
const b = await sql`SELECT * FROM posts`;
const c = await sql<User>`SELECT * FROM users`;
const d = await tx<Post>`SELECT * FROM posts`;
const e = tx`SELECT * FROM comments`;

If everything worked, your SQL inside backticks should now be properly highlighted in all cases.

Bonus Tip: Reload Queries Without Restarting Neovim

You can quickly reload queries after editing them using:

:TSBufReload

or restart Treesitter highlighting manually with:

:edit

Conclusion

By extending Treesitter’s injection rules, we’ve made Neovim smart enough to recognize complex TypeScript SQL calls — even with generics, awaits, or alternate function names.

This small tweak can massively improve readability and developer experience when working with query-heavy TypeScript codebases.

TL;DR

Create queries/typescript/injections.scm
Paste the SQL injection query above
Enjoy perfect SQL highlighting for all your sql and tx template strings

Solana Raydium SDK Swap Example Typescript with Magic SDK

Riel Joseph — Wed, 05 Jun 2024 06:03:11 +0000

Solana Raydium SDK Swap Example in TypeScript with Magic SDK

In this tutorial, we'll demonstrate how to perform a token swap on Solana using the Raydium SDK in TypeScript. Additionally, we'll show how to use the Magic SDK for signing transactions. We'll also include a method to convert SOL to lamports using Solana's web3.js library.

Prerequisites

Ensure you have the following installed:

Node.js and npm
Magic SDK
Solana web3.js
Raydium SDK

Step 1: Install Required Libraries

First, install the necessary libraries:

npm install @solana/web3.js @raydium-io/raydium-sdk @magic-sdk/admin

Step 2: Import Necessary Modules

import { Connection, PublicKey, SystemProgram, TransactionInstruction, LAMPORTS_PER_SOL, ComputeBudgetProgram, VersionedTransaction, TransactionMessage } from '@solana/web3.js';
import { Liquidity } from '@raydium-io/raydium-sdk';
import { Magic } from '@magic-sdk/admin';

Step 3: Setup Magic SDK and Solana Connection

Initialize the Magic SDK and Solana connection:

const magic = new Magic('YOUR_MAGIC_API_KEY', { // Replace with your Magic API key
  extensions: [
   new SolanaExtension({
     rpcUrl: 'YOUR RPC URL', // Replace with your RPC URL
   })
  ],
}); 
const connection = new Connection('YOUR RPC URL'); // Replace with your RPC URL
const wallet = magic.wallet; // Magic wallet instance

Step 4: Helper Functions

Add Priority Instructions (Optional)

You can omit this part if the makeSwapInstructionSimple already has a builtin setup for priority instructions.

function addPriorityInstructions(instructions: TransactionInstruction[]): TransactionInstruction[] {
  const modifyComputeUnits = ComputeBudgetProgram.setComputeUnitLimit({ units: 1000000 });
  const addPriorityFee = ComputeBudgetProgram.setComputeUnitPrice({ microLamports: 1000 });
  instructions.unshift(modifyComputeUnits, addPriorityFee);
  return instructions;
}

Create Fee Transfer Instruction (Optional)

If you want to have a fee usage mechanism you can add the instruction that is returned in this function.

async function createFeeTransferInstruction(amount: number, feeWallet: PublicKey, userWallet: PublicKey): Promise<TransactionInstruction> {
  const feeAmount = Math.ceil(amount * 0.0005);
  const feeAmountInLamports = feeAmount * LAMPORTS_PER_SOL;
  return SystemProgram.transfer({
    fromPubkey: userWallet,
    toPubkey: feeWallet,
    lamports: feeAmountInLamports,
  });
}```



## Step 5: Perform Swap Transaction

Integrate the helper functions to perform the swap:



```typescript
async function performSwap(
  amountIn: number,
  minAmountOut: number,
  poolKeys: any,
  userTokenAccounts: any,
  feeWallet: PublicKey,
  fixedSide: any
) {
  const swapTransaction = await Liquidity.makeSwapInstructionSimple({
    connection,
    poolKeys,
    userKeys: {
      tokenAccounts: userTokenAccounts,
      owner: wallet.publicKey
    },
    amountIn,
    amountOut: minAmountOut,
    fixedSide
  });

  const recentBlockhash = await connection.getLatestBlockhash();
  let instructions = swapTransaction.innerTransactions[0].instructions.filter(Boolean);

  const feeTransferInstruction = await createFeeTransferInstruction(amountIn, feeWallet, wallet.publicKey);
  instructions.push(feeTransferInstruction);

  instructions = addPriorityInstructions(instructions);

  const versionedTransaction = new VersionedTransaction(
    new TransactionMessage({
      payerKey: wallet.publicKey,
      recentBlockhash: recentBlockhash.blockhash,
      instructions: instructions
    }).compileToV0Message()
  );

  const signedTransaction = await magic.wallet.signTransaction(versionedTransaction);
  return signedTransaction; 
}

Step 6: Example Usage

Call the performSwap function with the necessary parameters:

(async () => {
  const amountInSOL = 1; // Example amount in SOL
  const amountInLamports = amountInSol * LAMPORTS_PER_SOL;
  const minAmountOut = 500000; // Example minimum amount out
  const poolKeys = {}; // Replace with actual pool keys
  const userTokenAccounts = {}; // Replace with actual user token accounts
  const feeWallet = new PublicKey('YOUR_FEE_WALLET_ADDRESS'); // Replace with your fee wallet address
  const fixedSide = {}; // Replace with actual fixed side information

  try {
    const signedTransaction = await performSwap(
      amountInLamports,
      minAmountOut,
      poolKeys,
      userTokenAccounts,
      feeWallet,
      fixedSide
    );
    console.log('Signed Transaction:', signedTransaction);
    const signature = await connection?.sendRawTransaction(Buffer.from(swapTransaction.rawTransaction as string, 'base64'));
    const recentBlockhashForSwap = await connection.getLatestBlockhash('finalized');
    const confirmation = await connection.confirmTransaction({
      signature: s,
      ...recentBlockhashForSwap,
    }, 'confirmed')
    if (confirmation.value.err) {
      console.error('Error buying token:', confirmation.value.err);
    }
    console.log('Confirmed! Transaction ID:', `https://solscan.io/tx/${s}`);


  } catch (error) {
    console.error('Error performing swap:', error);
  }
})();

Conclusion

In this guide, we've shown how to perform a token swap using the Raydium SDK with the Magic SDK for transaction signing in TypeScript. We also included how to convert SOL to lamports and add a priority fee to your transactions. This approach ensures that your swaps are processed efficiently while also including a usage fee.