Ignite TypeScript client code generation

[fadeev]

From the very beginning, the frontend component has been an important part of Ignite CLI.

Currently, Ignite's frontend is composed of two parts:

• Code generation
  • TS client, a framework-agnostic TypeScript client (doesn't know or care about Vue)
  • Vue client, a Vue-specific client (depends on the TS client above)
• Vue-based template

The relationship between blockchain-related functionality and the frontend is complementary rather than a dependency. It would be a mistake to say that Ignite CLI somehow depends on Vue, for example.

Code Generation

Code generation can be performed in an Ignite scaffolded chain or any other Cosmos SDK blockchain. It might require tweaking if your chain doesn't follow the patterns common to other SDK chains especially when it comes to structuring in proto. Eventually it should work with any chain and it would be cool to have automated tests that clone chains and gen code for them.

Code generation is performed with ignite generate vuex. Even though it says "vuex" it generates both a TS client as well as a Vue client (there is an issue to create a command that only generates a TS client: https://github.com/ignite/cli/issues/2758). By default, it's generated in vue/src/store/generated.

Let's see what it generates using a simple example that you can recreate using these commands:

ignite scaffold chain blog
cd blog
ignite scaffold list post title

In the generated directory we have directory namespacing based on proto package names:

blog/
  blog.blog/ <-- custom module
cosmos/
  cosmos-sdk/ <-- standard Cosmos SDK modules
    cosmos.auth.v1beta1/
    cosmos.bank.v1beta1/
    cosmos.gov.v1beta1/
   // ...
  ibc-go/ <-- ibc-go modules
index.ts

The reason it generated the blog.blog directory is because that's what we have as a package name in proto: package blog.blog.

Clients for each module are generated using the same template, so it doesn't matter whether it's blog/blog.blog or cosmos/cosmos-sdk/cosmos.bank.v1beta1, let's review the one for the custom blog module (I'm ignoring some files like package.json for brevity):

blog/blog.blog
  module/
    types/
    index.ts
    rest.ts
  index.ts

• module/types contains the output of ts-proto that is bundled with Ignite.
• module/index.ts is the TS client for broadcasting transactions.
• module/rest.ts is a TS client for querying the blockchain.
• index.ts is a Vue client, or more specifically a Vuex-based client

To understand how client generation works here are the main components:

• The cosmosgen package is responsible for generating clients.
• The template that is used to generate the TS client.
• Types from cosmosanalysis that describe the structure of the data for the template.

Generating the TS client requires ts-proto, which is bundled with Ignite CLI alongside a Node.js runtime.

Advantages of client generation with Ignite:

• Written in Go, so it can use Go packages to analyze the source code of the chain to supplement the data available in proto files
• Uses the version of Cosmos SDK that is used by the chain that you're generating the client code for.
• Doesn't require users to install anything, but the ignite binary. No dependencies, everything is bundled.
• Can be extended to support other languages (like we've done with ignite g dart)

Vue client

It's a bit outdated, it's using Vuex. There was an initiative to remove Vuex and replace it with a more lightweight client for Vue, but we are yet to reach consensus on how it should be implemented: https://github.com/ignite/cli/pull/2143 But we all agree that Vuex has to go.

This is a short overview of the code generation functionality of Ignite. This issue can be closed once this becomes no longer relevant. I just wanted something I can link to on Twitter.

[ilgooz]

cc @clockworkgr

[fadeev]

With the introduction of the updated version of codegen this has become outdated.

See the docs.