TypeScript Application / Plugin Codegen Typing Enhancements

[dOrgJelli]

Currently, the TypeScript types that are generated by the w3 app codegen & w3 plugin codegen commands could use some improvements.

Some potential improvements have been discussed here: #314

Current Developer Experience

export interface CustomType {
  prop: String;
}

export enum CustomEnumEnum {
  STRING,
  BYTES,
}

export type CustomEnumString =
  | "STRING"
  | "BYTES"

export type CustomEnum = CustomEnumEnum | CustomEnumString;

/// Imported Objects START ///

/* URI: "testimport.uri.eth" */
export interface TestImport_Object {
  prop: String;
}

/// Imported Objects END ///

/// Imported Queries START ///

/* URI: "testimport.uri.eth" */
interface TestImport_Query_Input_importedMethod extends Record<string, unknown> {
  arg: String;
}

/* URI: "testimport.uri.eth" */
export const TestImport_Query = {
  importedMethod: async (
    input: TestImport_Query_Input_importedMethod,
    client: Client,
    uri: string = "testimport.uri.eth"
  ): Promise<InvokeApiResult<Types.TestImport_Object | null>> => {
    return client.invoke<Types.TestImport_Object | null>({
      uri,
      module: "query",
      method: "importedMethod",
      input
    });
  },
}

Potential Improvements

Class Based Packages

Allow for additional package-specific configuration & validation using instanced objects that are created for each module being invoked:

namespace Ethereum {
  class Query {
    constructor(client: Client) {
      // can validate client config here...
      // ex: look to see if required dependencies are added to the client
    }

    importedMethod(input: Input.Query.importedMethod) {
      this.client.invoke(...)
    }
  }

  namespace Input {
    namespace Query {
      interface importedMethod {
        arg: string;
      }
    }
  }
}

const ethereum = new Ethereum.Query(client);

// We now know that the Ethereum's query has
// all client configuration necessary to execute...

ethereum.importedMethod({ arg: "hey" })

client class extension types

Allow for all web3api integrations to be accessed from a single client interface, leveraging client class extensions (previously discussed here #314):

import { Web3ApiClient } from "@web3api/client-js"
import { Ethereum } from "./w3";

interface ClientExtensions {
  eth: {
    query: Ethereum.Query;
  }
}

const client = new Web3ApiClient<ClientExtensions>({
  extensions: {
    eth: {
      query: new Ethereum.Query(...)
    }
  },
  ...
});

const { data, errors } = await client.eth.query.importedMethod({
  arg: "hey"
}).execute();

// additionally, I think it'd be important to support the `useWeb3ApiInvoke` hook as well:
const { data, errors, execute, loading } = useWeb3ApiInvoke(
  client.eth.query.importedMethod({
    arg: "hey"
  }).config()
);

[dOrgJelli]

More conversation here:
https://forum.polywrap.io/t/web3apiclient-dev-experience/228/7

[dOrgJelli]

NOTE: the above developer experience is out-dated, and needs a refresh.

[dOrgJelli]

The application bindings are being updated here: polywrap/wrap-abi-bindgen#40