TS Macro

This is a VSCode plugin for define TS(X) macro powered by Volar.js.

Usage

1. Install the VSCode Plugin, or use a REPL that supports ts-macro.

2. Create ts-macro.config.ts at the same level of tsconfig.json.

   TS Macro supports automatic registration of Volar plugins from vite.config.ts.
   For plugin authors, you need to export a volar file, and TS Macro will automatically load the plugin and share userOptions with the vite plugin. Example.
   For plugin users, you only need to use the vite plugin, no need to config ts-macro.config.ts.

3. Writing your first plugin.

   // ts-macro.config.ts
   export default {
     plugins: [
       {
         name: 'volar-plugin-define-style',
         resolveVirtualCode({ codes }) {
           // declare the `defineStyle` function type for every TS(X) files.
           codes.push('declare function defineStyle<T>(style: string): T ')
         },
       },
     ],
   }

   Or You can use createPlugin to define plugin. also compatibility with @vue/language-tools plugin.

   // ts-macro.config.ts
   import { createPlugin, replaceRange } from 'ts-macro'
   
   const defineStylePlugin = createPlugin<{ macro: string } | undefined>(
     (
       { ts, compilerOptions },
       userOptions = vueCompilerOptions?.defineStyle ?? {
         macro: 'defineStyle',
       }, // Default options
     ) => {
       return {
         name: 'volar-plugin-define-style',
         resolveVirtualCode({ ast, codes }) {
           codes.push(
             `declare function ${userOptions.macro}<T>(style: string): T `,
           )
   
           ast.forEachChild(function walk(node) {
             if (
               ts.isCallExpression(node) &&
               node.expression.getText(ast) === userOptions.macro
             ) {
               // Add generic type for defineStyle.
               codes.replaceRange(
                 node.arguments.pos - 1,
                 node.arguments.pos - 1,
                 // For simple cases, use strings instead of regex to generate types.
                 '<{ foo: string }>',
               )
             }
             node.forEachChild(walk)
           })
         },
       }
     },
   )
   
   export default {
     plugins: [
       defineStylePlugin({
         macro: 'defineStyle',
       }),
     ],
   }

4. Result

   

Full implementation: define-style

TSC

Use tsmc instead of tsc to compile TS.

Install

pnpm add @ts-macro/tsc -D

Usage in package.json.

{
  "scripts": {
    "typecheck": "tsmc --noEmit"
  }
}

References

Thanks for these great projects, I have learned a lot from them.

• https://github.com/volarjs/volar.js
• https://github.com/vue-vine/vue-vine
• https://kermanx.github.io/reactive-vscode
• https://github.com/vue-macros/vue-macros

Who are using ts-macro

• https://github.com/vuejs/vue-jsx-vapor
• https://github.com/vue-macros/vue-macros