How to add typegen for custom plugins?

[supun-io]

Hello,

I've written a simple plugin that adds a few reducers, actions, and listeners. Is there a way to tell kea-typegen "there's a custom plugin, and here's how to generate types for that plugin"?

I don't see any documentation on this.

[mariusandra]

Hey, yes, this is possible, but you'll need to upgrade to Kea v3 (out in a few hours). The new docs reference a few examples you can look at: https://v3.keajs.org/docs/intro/typescript#create-logic-builder-type-builders

It's not a lot, but it's something :).

[supun-io]

Hey, thanks a lot for the fast response.

I just found out it is also possible in v2, isn't it? visit.ts has some code to loop through plugins loaded

I started writing something like this: https://github.com/keajs/kea-typegen/blob/main/form-plugin/lib/form-plugin/src/typegen.js

However, I'll wait for Kea 3. Excited about the new update.

We haven't released the product yet, so it'd be awesome if we could upgrade to v3 before the release.

Thanks for your help and the awesome library.

[mariusandra]

Well, 3.0.0 is out now. :)
Indeed something like this was supported in the previous versions, but other than my own demos, I didn't think anyone was using it. The 3.0 syntax makes this much cleaner and simpler anyway. You can probably reduce a lot of code from your plugin.

[supun-io]

I upgraded to 3.0.0, however, having an issue with the file. I am not sure if this is a bug or an issue on my side.

This is the error I get when running the typegen

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at visit (/path/project-hyvor-blogs/node_modules/kea-typegen/dist/src/visit/visit.js:89:73)
    at visitNode (/path/project-hyvor-blogs/node_modules/typescript/lib/typescript.js:30043:24)
💚 18 logic types up to date!

As you can see, this happens in the visitResetContext function in visit.ts of this library, when trying to import the typegen file.

My typegen file looks like this:

import {VisitKeaPropertyArguments} from "kea-typegen";
import ts from 'typescript';

export function ajax({ name, parsedLogic, node, type, getTypeNodeForNode, prepareForPrint } : VisitKeaPropertyArguments) {

     // TODO: 

}

Any idea why this happens?

The documentation you linked, says typegen.ts or {name}.typegen.ts can work. However, I do not see any logic to find {name}.typegen.ts files in the visitResetContext function, only in visitKeaCalls. Maybe that is the reason?

[supun-io]

Never mind, got everything working. It was exciting to work with the TS compiler API ;)

I open sourced the code. https://github.com/hyvor/kea-ajax

It's a simpler version of kea-loaders.

[rschyboll]

@supunkavinda could you please share the solution for that error?
I have encountered the same error:

SyntaxError: Cannot use import statement outside a module

And i'm having a hard time figuring it out.

[supun-io]

I had to compile TS to JS before running kea-typegen. You can find tsconfig here: https://github.com/hyvor/kea-ajax/blob/main/tsconfig.json

Edit: Actually, I am not sure what fixed that issue. Earlier, the kea plugin was inside our main project when I had that problem. Later I created a new repo for the plugin and didn't have that issue again.

[rschyboll]

@mariusandra could you maybe elaborate on that topic? Is it necessary to have the plugin for Kea in a separate library? Or is there some way to have it in the main project?

[mariusandra]

Hey @supunkavinda, this is awesome! I added your package to Kea's homepage under a new "community" line.

Also, indeed, the x.typegen.ts format works with logic builders, if your builder itself is in x.ts and you then call the x() function. It won't work with "old style" plugins that you initialize via resetContext.

@rschyboll It should also be very possible to have your plugin and typegen code inside the main project itself. Check out the inline-plugin and typed-builder folders in the kea-typegen samples folder. They do exactly that. I was also doing this in my work project for a while until eventually moving to a real plugin.

I'm not sure what was the cause of the import error. Possible something with TS config? I'm not sure, but would happily help debug if you can provide a reproducible repo :).

[rschyboll]

Hi!

Sorry for the late answer, in the end, i resigned from using plugins in my project for now, mostly because of time constraints.
If i find some time, i might try them again, but for now, i used a different solution, that does not require them.
If @supunkavinda has no more questions, then we can close the issue. I'm going to open another one if i'm going to have that issue again in the future. Thanks anyway for your help :)