Initial version of a ts-plugin

[captbaritone]

TypeScript lets you specify a plugin in your typescript config which can add additional functionality in the editor. This is a good fit for Grats which is built around the TypeScript compiler and could report helpful errors.

I'm still working to figure out a way to efficiently (re)compute cross-file validations, but this should give us a start by reporting syntax-only issues.

Ideally we could specify grats as the plugin itself, but from what I can tell TypeScript's requirements around the way the plugin is invoked are going to be hard to get to work inside the grats module itself:

1. The module has to use common js exports
2. The init function has the be the sole export from the module
3. The plugin module name must not have a slash in it

We could still explore having grats expose both a commonjs and ES Module version and have the commonjs version export the initi funciton with all the actual exports as properties on the function, but that's getting pretty crazy.

Since the logic of the plugin will be tightly coupled with Grats, I'm having the plugin extension just re-export the actual implementation from the grats module.

Example

Screen.Recording.2024-01-23.at.7.52.31.PM.mov

Setup

Add the plugin to your tsconfig

{
  "grats": {
    "nullableByDefault": false
  },
  "compilerOptions": {
    // LIKE THIS
    "plugins": [{ "name": "grats-ts-plugin" }],
    "outDir": "dist",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "esnext",
    "lib": ["esnext"],
    "strict": true
  }
}

Configure VSCode to use your local version of TypeScript. Via CMD+P "TypeScript: Select TypeScript Version..." with a .ts file open or a .vscode/settings.json for your project with:

{
    "typescript.tsdk": "node_modules/typescript/lib"
}

[netlify]

✅ Deploy Preview for grats ready!

Name	Link
🔨 Latest commit	21965a3
🔍 Latest deploy log	https://app.netlify.com/sites/grats/deploys/65b089c543e60b00082e0d38
😎 Deploy Preview	https://deploy-preview-114--grats.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.