refactor!: remove react frontend + re-enable disabled integration tests (backport #4744)

changelog.md

@@ -13,7 +13,7 @@
 
 - [#4686](https://github.com/ignite/cli/pull/4686) Filter discovered protos to only messages.
 - [#4691](https://github.com/ignite/cli/pull/4691), [#4706](https://github.com/ignite/cli/pull/4706), [#4725](https://github.com/ignite/cli/pull/4725), [#4737](https://github.com/ignite/cli/pull/4737) Fix ts-client query template and solely Go template for `ts-client` generation.
-- [#4742](https://github.com/ignite/cli/pull/4742) Updates Vue composables template for new ts-client and tanstack/vue-query v5
+- [#4744](https://github.com/ignite/cli/pull/4744) Remove `react` frontend generation via `s react` command. Use the [Ignite CCA App](https://github.com/ignite/apps) instead.
 
 ## [`v28.10.0`](https://github.com/ignite/cli/releases/tag/v28.10.0)
 

docs/docs/03-clients/03-vue.md

@@ -94,20 +94,22 @@ purposes, but you should not do this in production.
 
 In the `example` directory run the following command to start your blockchain:
 
-```
+```bash
 ignite chain serve
 ```
 
 To start your Vue application, go to the `vue` directory and run the following
 command in a separate terminal window:
 
-```
-npm install && npm run dev
+:::note
+Make sure you have [pnpm](https://pnpm.io/) installed.
+:::
+
+```bash
+pnpm install && pnpm dev
 ```
 
-It is recommended to run `npm install` before starting your app with `npm run
-dev` to ensure that all dependencies are installed (including the ones that the
-API client has, see `vue/postinstall.js`).
+It is recommended to run `pnpm install` before starting your app with `pnpm dev` to ensure that all dependencies are installed (including the ones that the API client has, see `vue/postinstall.js`).
 
 Open your browser and navigate to
 [http://localhost:5173/](http://localhost:5173/).

go.mod

@@ -56,7 +56,7 @@ require (
 	github.com/hashicorp/go-plugin v1.6.0
 	github.com/iancoleman/strcase v0.3.0
 	github.com/ignite/ignite-files/protoc v0.0.1
-	github.com/ignite/web v0.6.1
+	github.com/ignite/web v1.0.8
 	github.com/imdario/mergo v0.3.13
 	github.com/jpillora/chisel v1.9.1
 	github.com/lib/pq v1.10.9

go.sum

@@ -835,8 +835,8 @@ github.com/ianlancetaylor/demangle v0.0.0-20210905161508-09a460cdf81d/go.mod h1:
 github.com/ianlancetaylor/demangle v0.0.0-20230524184225-eabc099b10ab/go.mod h1:gx7rwoVhcfuVKG5uya9Hs3Sxj7EIvldVofAWIUtGouw=
 github.com/ignite/ignite-files/protoc v0.0.1 h1:wXxU1dzruUgSVl1diAuAOA+xv0NQKXJFsDWht2+tAP8=
 github.com/ignite/ignite-files/protoc v0.0.1/go.mod h1:cVCHJbEHPIeKHMPk3ZoPS0Xw4XQfUc76BAMAPU9Fwjg=
-github.com/ignite/web v0.6.1 h1:kHG+T7NnR8cCPjAGxEFQD+njVYM08toeG57iYRXzpwo=
-github.com/ignite/web v0.6.1/go.mod h1:WZWBaBYF8RazN7dE462BLpvXDY8ScacxcJ07BKwX/jY=
+github.com/ignite/web v1.0.8 h1:St3L6UJj70+h16+No5em8Vn2Hx93tS2G1MyWO/Kt1cc=
+github.com/ignite/web v1.0.8/go.mod h1:WZWBaBYF8RazN7dE462BLpvXDY8ScacxcJ07BKwX/jY=
 github.com/imdario/mergo v0.3.12/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA=
 github.com/imdario/mergo v0.3.13 h1:lFzP57bqS/wsqKssCGmtLAb8A0wKjLGrve2q3PPVcBk=
 github.com/imdario/mergo v0.3.13/go.mod h1:4lJ1jqUDcsbIECGy0RUJAXNIhg+6ocWgb1ALK2O4oXg=

ignite/cmd/generate.go

@@ -36,7 +36,6 @@ meant to be edited by hand.
 	c.AddCommand(NewGenerateTSClient())
 	c.AddCommand(NewGenerateVuex())
 	c.AddCommand(NewGenerateComposables())
-	c.AddCommand(NewGenerateHooks())
 	c.AddCommand(NewGenerateOpenAPI())
 
 	return c

ignite/cmd/scaffold_react.go

@@ -2,37 +2,14 @@ package ignitecmd
 
 import (
 	"github.com/spf13/cobra"
-
-	chainconfig "github.com/ignite/cli/v28/ignite/config/chain"
-	"github.com/ignite/cli/v28/ignite/pkg/cliui"
-	"github.com/ignite/cli/v28/ignite/pkg/cosmosgen"
 )
 
 // NewScaffoldReact scaffolds a React app for a chain.
 func NewScaffoldReact() *cobra.Command {
 	c := &cobra.Command{
-		Hidden:  true, // hidden util we have a better ts-client.
-		Use:     "react",
-		Short:   "React web app template",
-		Args:    cobra.NoArgs,
-		PreRunE: migrationPreRunHandler,
-		RunE:    scaffoldReactHandler,
+		Use:        "react",
+		Deprecated: "the React scaffolding feature is removed from Ignite CLI.\nPlease use the Ignite CCA app to create a React app.\nFor more information, visit: https://ignite.com/marketplace/CCA",
 	}
 
-	c.Flags().AddFlagSet(flagSetYes())
-	c.Flags().StringP(flagPath, "p", "./"+chainconfig.DefaultReactPath, "path to scaffold content of the React app")
-
 	return c
 }
-
-func scaffoldReactHandler(cmd *cobra.Command, _ []string) error {
-	session := cliui.New(cliui.StartSpinnerWithText(statusScaffolding))
-	defer session.End()
-
-	path := flagGetPath(cmd)
-	if err := cosmosgen.React(path); err != nil {
-		return err
-	}
-
-	return session.Printf("\n🎉 Scaffolded a React app in %s.\n\n", path)
-}

ignite/cmd/scaffold_vue.go

@@ -1,6 +1,8 @@
 package ignitecmd
 
 import (
+	"path/filepath"
+
 	"github.com/spf13/cobra"
 
 	chainconfig "github.com/ignite/cli/v28/ignite/config/chain"
@@ -11,7 +13,6 @@ import (
 // NewScaffoldVue scaffolds a Vue.js app for a chain.
 func NewScaffoldVue() *cobra.Command {
 	c := &cobra.Command{
-		Hidden:  true, // hidden util we have a better ts-client.
 		Use:     "vue",
 		Short:   "Vue 3 web app template",
 		Args:    cobra.NoArgs,
@@ -20,7 +21,6 @@ func NewScaffoldVue() *cobra.Command {
 	}
 
 	c.Flags().AddFlagSet(flagSetYes())
-	c.Flags().StringP(flagPath, "p", "./"+chainconfig.DefaultVuePath, "path to scaffold content of the Vue.js app")
 
 	return c
 }
@@ -29,7 +29,7 @@ func scaffoldVueHandler(cmd *cobra.Command, _ []string) error {
 	session := cliui.New(cliui.StartSpinnerWithText(statusScaffolding))
 	defer session.End()
 
-	path := flagGetPath(cmd)
+	path := filepath.Join(".", chainconfig.DefaultVuePath)
 	if err := cosmosgen.Vue(path); err != nil {
 		return err
 	}

ignite/config/chain/base/config.go

@@ -63,9 +63,6 @@ type Client struct {
 	// Composables configures code generation for Vue 3 composables.
 	Composables Composables `yaml:"composables,omitempty"`
 
-	// Hooks configures code generation for React hooks.
-	Hooks Hooks `yaml:"hooks,omitempty"`
-
 	// OpenAPI configures OpenAPI spec generation for API.
 	OpenAPI OpenAPI `yaml:"openapi,omitempty"`
 }
@@ -90,12 +87,6 @@ type Composables struct {
 	Path string `yaml:"path"`
 }
 
-// Hooks configures code generation for react-query hooks.
-type Hooks struct {
-	// Path configures out location for generated vue-query hooks.
-	Path string `yaml:"path"`
-}
-
 // OpenAPI configures OpenAPI spec generation for API.
 type OpenAPI struct {
 	Path string `yaml:"path"`

ignite/config/chain/config.go

@@ -26,10 +26,6 @@ var (
 	// The path is relative to the app's directory.
 	DefaultVuePath = "vue"
 
-	// DefaultReactPath defines the default relative path to use when scaffolding a React app.
-	// The path is relative to the app's directory.
-	DefaultReactPath = "react"
-
 	// DefaultVuexPath defines the default relative path to use when generating Vuex stores for a Vue app.
 	// The path is relative to the app's directory.
 	DefaultVuexPath = "vue/src/store"
@@ -38,9 +34,8 @@ var (
 	// The path is relative to the app's directory.
 	DefaultComposablesPath = "vue/src/composables"
 
-	// DefaultHooksPath defines the default relative path to use when generating useQuery hooks for a React app.
-	// The path is relative to the app's directory.
-	DefaultHooksPath = "react/src/hooks"
+	// DefaultVueTypesPath defines the default vue types path.
+	DefaultVueTypesPath = "vue/src/views/Types.vue"
 
 	// DefaultOpenAPIPath defines the default relative path to use when generating an OpenAPI schema.
 	// The path is relative to the app's directory.
@@ -112,16 +107,6 @@ func ComposablesPath(conf *Config) string {
 	return DefaultComposablesPath
 }
 
-// HooksPath returns the relative path to the React useQuery hooks directory.
-// Path is relative to the app's directory.
-func HooksPath(conf *Config) string {
-	if path := strings.TrimSpace(conf.Client.Hooks.Path); path != "" {
-		return filepath.Clean(path)
-	}
-
-	return DefaultHooksPath
-}
-
 // LocateDefault locates the default path for the config file.
 // Returns ErrConfigNotFound when no config file found.
 func LocateDefault(root string) (path string, err error) {

ignite/pkg/cosmosgen/cosmosgen.go

@@ -32,9 +32,6 @@ type generateOptions struct {
 	composablesOut      func(module.Module) string
 	composablesRootPath string
 
-	hooksOut      func(module.Module) string
-	hooksRootPath string
-
 	specOut string
 }
 
@@ -68,14 +65,7 @@ func WithComposablesGeneration(out ModulePathFunc, composablesRootPath string) O
 	}
 }
 
-func WithHooksGeneration(out ModulePathFunc, hooksRootPath string) Option {
-	return func(o *generateOptions) {
-		o.hooksOut = out
-		o.hooksRootPath = hooksRootPath
-	}
-}
-
-// WithGoGeneration adds protobuf (gogoproto and pulsar) code generation.
+// WithGoGeneration adds protobuf (gogoproto) code generation.
 func WithGoGeneration() Option {
 	return func(o *generateOptions) {
 		o.generateProtobuf = true
@@ -112,6 +102,7 @@ type generator struct {
 	appPath             string
 	protoDir            string
 	goModPath           string
+	frontendPath        string
 	opts                *generateOptions
 	sdkImport           string
 	sdkDir              string
@@ -132,7 +123,7 @@ func (g *generator) cleanup() {
 
 // Generate generates code from protoDir of an SDK app residing at appPath with given options.
 // protoDir must be relative to the projectPath.
-func Generate(ctx context.Context, cacheStorage cache.Storage, appPath, protoDir, goModPath string, options ...Option) error {
+func Generate(ctx context.Context, cacheStorage cache.Storage, appPath, protoDir, goModPath string, frontendPath string, options ...Option) error {
 	b, err := cosmosbuf.New(cacheStorage, goModPath)
 	if err != nil {
 		return err
@@ -143,6 +134,7 @@ func Generate(ctx context.Context, cacheStorage cache.Storage, appPath, protoDir
 		appPath:             appPath,
 		protoDir:            protoDir,
 		goModPath:           goModPath,
+		frontendPath:        frontendPath,
 		opts:                &generateOptions{},
 		thirdModules:        make(map[string][]module.Module),
 		thirdModuleIncludes: make(map[string]protoIncludes),
@@ -215,26 +207,14 @@ func Generate(ctx context.Context, cacheStorage cache.Storage, appPath, protoDir
 	}
 
 	if g.opts.composablesRootPath != "" {
-		if err := g.generateComposables("vue"); err != nil {
+		if err := g.generateComposables(); err != nil {
 			return err
 		}
 
 		// Update Vue app dependencies when Vue composables are generated.
 		// This update is required to link the "ts-client" folder so the
 		// package is available during development before publishing it.
-		if err := g.updateComposableDependencies("vue"); err != nil {
-			return err
-		}
-	}
-	if g.opts.hooksRootPath != "" {
-		if err := g.generateComposables("react"); err != nil {
-			return err
-		}
-
-		// Update React app dependencies when React hooks are generated.
-		// This update is required to link the "ts-client" folder so the
-		// package is available during development before publishing it.
-		if err := g.updateComposableDependencies("react"); err != nil {
+		if err := g.updateComposableDependencies(); err != nil {
 			return err
 		}
 	}