search

ignite / cli

Ignite is a CLI tool and hub designed for constructing Proof of Stake Blockchains rooted in Cosmos-SDK
https://ignite.com
Other
1.25k stars 549 forks source link

Generated vue and ts-client don't work together #3067

Closed lxgr-linux closed 1 year ago

lxgr-linux commented 1 year ago

Describe the bug There seams to be a problem with the generated vue and ts-client.

To reproduce Steps to reproduce the behavior:

  1. Scaffold a new chain: 
    ignite scaffold chain testtest123
cd testtest123
  2. Generate vue and ts-client: 
    ignite generate vuex
ignite generate ts-client
  3. Change axios version in ts-client/package.json to 0.21.4 like I read on your discord server
  4. Remove content of prepare.js to be able to build against local ts-client: 
    cd vue
echo "" > prepare.js
  5. Do npm i
  6. Do npm i @babel/types because it seams to be required, but is not contained by the package.json
  7. Create tsconfig.json with content: 
    {
"compilerOptions": {
  "target": "ES2020",                            
  "lib": ["DOM","DOM.Iterable","ES2020","ScriptHost"],
  "module": "commonjs",                               
  "moduleResolution": "node",                       
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": false,
}
}
  8. Run tsc
  9. Get errors: 
    
../ts-client/client.ts:147:22 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

147 await window.keplr.experimentalSuggestChain(suggestOptions);


../ts-client/client.ts:149:16 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

149         window.keplr.defaultOptions = {

../ts-client/client.ts:156:20 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

156 await window.keplr.enable(chainId);


../ts-client/client.ts:157:28 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

157       this.signer = window.keplr.getOfflineSigner(chainId);

node_modules/vite-plugin-dynamic-import/dist/index.d.ts:7:33 - error TS2503: Cannot find namespace 'acorn'.

7 export declare type AcornNode = acorn.Node & Record<string, any>;


src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:312:64 - error TS2551: Property 'serviceABCIQuery' does not exist on type 'Api<unknown>'. Did you mean 'serviceAbciQuery'?

312     let value= (await client.CosmosBaseTendermintV1Beta1.query.serviceABCIQuery(query ?? undefined)).data

../ts-client/cosmos.base.tendermint.v1beta1/rest.ts:1019:3 1019 serviceAbciQuery = (

    'serviceAbciQuery' is declared here.

src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:316:70 - error TS2551: Property 'serviceABCIQuery' does not exist on type 'Api<unknown>'. Did you mean 'serviceAbciQuery'?

316      let next_values=(await client.CosmosBaseTendermintV1Beta1.query.serviceABCIQuery({...query ?? {}, 'pagination.key':(<any> value).pagination.next_key} as any)).data

../ts-client/cosmos.base.tendermint.v1beta1/rest.ts:1019:3 1019 serviceAbciQuery = (

    'serviceAbciQuery' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:236:53 - error TS2551: Property 'queryNFTs' does not exist on type 'Api<unknown>'. Did you mean 'queryNfTs'?

236     let value= (await client.CosmosNftV1Beta1.query.queryNFTs(query ?? undefined)).data

../ts-client/cosmos.nft.v1beta1/rest.ts:618:3 618 queryNfTs = (

    'queryNfTs' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:240:59 - error TS2551: Property 'queryNFTs' does not exist on type 'Api<unknown>'. Did you mean 'queryNfTs'?

240      let next_values=(await client.CosmosNftV1Beta1.query.queryNFTs({...query ?? {}, 'pagination.key':(<any> value).pagination.next_key} as any)).data

../ts-client/cosmos.nft.v1beta1/rest.ts:618:3 618 queryNfTs = (

    'queryNfTs' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:262:53 - error TS2551: Property 'queryNFT' does not exist on type 'Api<unknown>'. Did you mean 'queryNft'?

262     let value= (await client.CosmosNftV1Beta1.query.queryNFT( key.class_id,  key.id)).data

../ts-client/cosmos.nft.v1beta1/rest.ts:646:3 646 queryNft = (classId: string, id: string, params: RequestParams = {}) =>


    'queryNft' is declared here.

Found 10 errors in 4 files.

Errors  Files
     4  ../ts-client/client.ts:147
     1  node_modules/vite-plugin-dynamic-import/dist/index.d.ts:7
     2  src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:312
     3  src/store/generated/cosmos.nft.v1beta1/index.ts:236
  ```

**What version are you using?**

Provide the output of the `ignite version` command.
```
Ignite CLI version: v0.25.1
Ignite CLI build date:  2022-10-20T15:52:00Z
Ignite CLI source hash: cc393a9b59a8792b256432fafb472e5ac0738f7c
Cosmos SDK version: v0.46.3
Your OS:        linux
Your arch:      amd64
Your Node.js version:   v19.0.1
Your go version:    go version go1.19.3 linux/amd64
Your uname -a:      Linux AMDarch 6.0.6-arch1-1.1 #1 SMP PREEMPT_DYNAMIC Sun, 30 Oct 2022 19:59:21 +0000 x86_64 GNU/Linux
Your cwd:       /home/arch/testtest123/vue
Is on Gitpod:       false
```
clockworkgr commented 1 year ago

Describe the bug There seams to be a problem with the generated vue and ts-client.

To reproduce Steps to reproduce the behavior:

  1. Scaffold a new chain:
ignite scaffold chain testtest123
cd testtest123
  1. Generate vue and ts-client:
ignite generate vuex
ignite generate ts-client
  1. Change axios version in ts-client/package.json to 0.21.4 like I read on your discord server
  2. Remove content of prepare.js to be able to build against local ts-client:
cd vue
echo "" > prepare.js
  1. Do npm i
  2. Do npm i @babel/types because it seams to be required, but is not contained by the package.json
  3. Create tsconfig.json with content:
{
  "compilerOptions": {
    "target": "ES2020",                            
    "lib": ["DOM","DOM.Iterable","ES2020","ScriptHost"],
    "module": "commonjs",                               
    "moduleResolution": "node",                       
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": false,
  }
}
  1. Run tsc
  2. Get errors:
../ts-client/client.ts:147:22 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

147         await window.keplr.experimentalSuggestChain(suggestOptions);
                       ~~~~~

../ts-client/client.ts:149:16 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

149         window.keplr.defaultOptions = {
                 ~~~~~

../ts-client/client.ts:156:20 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

156       await window.keplr.enable(chainId);
                     ~~~~~

../ts-client/client.ts:157:28 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

157       this.signer = window.keplr.getOfflineSigner(chainId);
                             ~~~~~

node_modules/vite-plugin-dynamic-import/dist/index.d.ts:7:33 - error TS2503: Cannot find namespace 'acorn'.

7 export declare type AcornNode = acorn.Node & Record<string, any>;
                                ~~~~~

src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:312:64 - error TS2551: Property 'serviceABCIQuery' does not exist on type 'Api<unknown>'. Did you mean 'serviceAbciQuery'?

312     let value= (await client.CosmosBaseTendermintV1Beta1.query.serviceABCIQuery(query ?? undefined)).data
                                                                 ~~~~~~~~~~~~~~~~

../ts-client/cosmos.base.tendermint.v1beta1/rest.ts:1019:3
  1019   serviceAbciQuery = (
         ~~~~~~~~~~~~~~~~
  'serviceAbciQuery' is declared here.

src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:316:70 - error TS2551: Property 'serviceABCIQuery' does not exist on type 'Api<unknown>'. Did you mean 'serviceAbciQuery'?

316      let next_values=(await client.CosmosBaseTendermintV1Beta1.query.serviceABCIQuery({...query ?? {}, 'pagination.key':(<any> value).pagination.next_key} as any)).data
                                                                       ~~~~~~~~~~~~~~~~

../ts-client/cosmos.base.tendermint.v1beta1/rest.ts:1019:3
  1019   serviceAbciQuery = (
         ~~~~~~~~~~~~~~~~
  'serviceAbciQuery' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:236:53 - error TS2551: Property 'queryNFTs' does not exist on type 'Api<unknown>'. Did you mean 'queryNfTs'?

236     let value= (await client.CosmosNftV1Beta1.query.queryNFTs(query ?? undefined)).data
                                                      ~~~~~~~~~

../ts-client/cosmos.nft.v1beta1/rest.ts:618:3
  618   queryNfTs = (
        ~~~~~~~~~
  'queryNfTs' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:240:59 - error TS2551: Property 'queryNFTs' does not exist on type 'Api<unknown>'. Did you mean 'queryNfTs'?

240      let next_values=(await client.CosmosNftV1Beta1.query.queryNFTs({...query ?? {}, 'pagination.key':(<any> value).pagination.next_key} as any)).data
                                                            ~~~~~~~~~

../ts-client/cosmos.nft.v1beta1/rest.ts:618:3
  618   queryNfTs = (
        ~~~~~~~~~
  'queryNfTs' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:262:53 - error TS2551: Property 'queryNFT' does not exist on type 'Api<unknown>'. Did you mean 'queryNft'?

262     let value= (await client.CosmosNftV1Beta1.query.queryNFT( key.class_id,  key.id)).data
                                                      ~~~~~~~~

../ts-client/cosmos.nft.v1beta1/rest.ts:646:3
  646   queryNft = (classId: string, id: string, params: RequestParams = {}) =>
        ~~~~~~~~
  'queryNft' is declared here.

Found 10 errors in 4 files.

Errors  Files
   4  ../ts-client/client.ts:147
   1  node_modules/vite-plugin-dynamic-import/dist/index.d.ts:7
   2  src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:312
   3  src/store/generated/cosmos.nft.v1beta1/index.ts:236

What version are you using?

Provide the output of the ignite version command.

Ignite CLI version:   v0.25.1
Ignite CLI build date:    2022-10-20T15:52:00Z
Ignite CLI source hash:   cc393a9b59a8792b256432fafb472e5ac0738f7c
Cosmos SDK version:   v0.46.3
Your OS:      linux
Your arch:        amd64
Your Node.js version: v19.0.1
Your go version:  go version go1.19.3 linux/amd64
Your uname -a:        Linux AMDarch 6.0.6-arch1-1.1 #1 SMP PREEMPT_DYNAMIC Sun, 30 Oct 2022 19:59:21 +0000 x86_64 GNU/Linux
Your cwd:     /home/arch/testtest123/vue
Is on Gitpod:     false

I am confused.. what is your exact goal? do you want to publish a built version of ts-client?

lxgr-linux commented 1 year ago

I want to get the generated vue project to work.

clockworkgr commented 1 year ago

I want to get the generated vue project to work.

ok...in that case, steps 3,4,6,7 are unnecessary and mess with the template...the axios suggestion was for building and publishing the ts-client as a standalone library

Just do:

ignite scaffold chain testtest123
cd testtest123
ignite chain serve

to create and launch your chain and while it's running, in a different term

cd testtest123
ignite g vuex --proto-all-modules
cd vue
npm install
npm run dev

Above assumes you have node v16 or higher

lxgr-linux commented 1 year ago

You would still need to use step Nr.4 since I didn't publish the ts-client. And another problem is, that the project the generated vuex stores are for is a vue project written in just js, not ts, and therefore everything needs to be transpiled to js. And that worked for the longest time and wasn't even necessary before that.

clockworkgr commented 1 year ago

You would still need to use step Nr.4 since I didn't publish the ts-client. And another problem is, that the project the generated vuex stores are for is a vue project written in just js, not ts, and therefore everything needs to be transpiled to js. And that worked for the longest time and wasn't even necessary before that.

ah...so you want JUST the vuex files then....not to run the boilerplate vue project which is in fact in TS... yeah we stopped transpiling a while back so people can use their own bundling setup...thats why babel is unnecessary for us (we use vite in the boilerplate)

step 4 doesnt affect the code...it simply prints a notice that you should in fact publish your ts-client at some point.

I'll have to get back to you on the setup for transpiling just the vuex files..

clockworkgr commented 1 year ago

@lxgr-linux Ok. So I looked at this further and there are 2 issues at play here:

1) A working package.json and tsconfig that will allow you to transpile the vuex TS source to JS for your frontend project. I have prepared this and it's quiet straight forward.

2) there is a actually a bug in the generated code (the "bad" camelcasing of ServiceABCIQuery and QueryNFTS) which breaks the transpilation

I will put a fix up for this for the next release. In the meantime, do you want instructions on how to transpile manually? Or would you rather wait for the release?

lxgr-linux commented 1 year ago

I will put a fix up for this for the next release. In the meantime, do you want instructions on how to transpile manually? Or would you rather wait for the release?

Oh yes, having instructions for transpiling would be very nice, because we're currently migrating our chain to the newest cosmos-sdk version and our frontend is the last thing holding us back.