✨ Feat: Add npx tevm-server command (#1358)

## Description

_Concise description of proposed changes_

## Testing

Explain the quality checks that have been done on the code changes

## Additional Information

- [ ] I read the [contributing docs](../docs/contributing.md) (if this
is your first contribution)

Your ENS/address:



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a command-line interface feature with `npx tevm-server` for
easier server execution.
- Added support for various command-line options such as `fork-url`,
`chain-id`, and `logging-level` for seamless server configuration.

- **Enhancements**
- Included a new dependency, "commander," to improve command-line
interface functionality.
- Made the "bin" directory part of the package, allowing direct access
to executable scripts.
	- Integrated additional modules to enhance project capabilities.

- **User Interface Improvements**
- Developed a new `StartServer` component for managing TEVM server
startup, displaying real-time status and configuration details to users.
- Refined user prompts for project name and wallet connect project ID,
enhancing interactivity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: William Cory <[email protected]>

.changeset/long-frogs-itch.md

@@ -0,0 +1,5 @@
+---
+"@tevm/server": minor
+---
+
+Added npx tevm-server command

biome.json

@@ -32,7 +32,7 @@
 			".devcontainer",
 			"examples/svelte-ethers/.svelte-kit",
 			"examples/next",
-			"bundler-packages/cli",
+			"cli",
 			"experimental/viem-effect",
 			"bundler-packages/config/src/fixtures",
 			"bundler-packages/cli/fixtures"

cli/dist/create-tevm-app.cjs

@@ -9,11 +9,11 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var Pastel__default = /*#__PURE__*/_interopDefault(Pastel);
 
 new Pastel__default.default({
-  importMeta: ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('out.js', document.baseURI).href)) }),
-  name: "create-evmts-app",
+  importMeta: ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('create-tevm-app.cjs', document.baseURI).href)) }),
+  name: "tevm",
   version: "beta",
-  description: "Scaffold a new EVMTS application"
+  description: "entrypoint to tevm cli"
 }).run();
 console.clear();
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=create-tevm-app.cjs.map
 //# sourceMappingURL=create-tevm-app.cjs.map

cli/dist/create-tevm-app.d.ts

@@ -1,3 +1 @@
 #!/usr/bin/env node
-export {};
-//# sourceMappingURL=create-tevm-app.d.ts.map

bundler-packages/cli/package.json → cli/package.json

@@ -46,7 +46,13 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@tanstack/react-query": "^5.45.1",
+		"@tanstack/react-query": "^5.51.21",
+		"@tevm/actions": "workspace:^",
+		"@tevm/common": "workspace:^",
+		"@tevm/jsonrpc": "workspace:^",
+		"@tevm/memory-client": "workspace:^",
+		"@tevm/server": "workspace:^",
+		"@tevm/utils": "workspace:^",
 		"@types/ink-select-input": "^3.0.5",
 		"@types/object-hash": "^3.0.6",
 		"figures": "^6.1.0",
@@ -60,23 +66,23 @@
 		"object-hash": "^3.0.0",
 		"pastel": "^3.0.0",
 		"react": "^18.3.1",
-		"tsup": "^8.1.0",
+		"tsup": "^8.2.4",
 		"unique-names-generator": "^4.7.1",
 		"zod": "^3.23.8",
-		"zustand": "^4.5.2"
+		"zustand": "^4.5.4"
 	},
 	"devDependencies": {
 		"@tevm/tsconfig": "workspace:^",
 		"@tevm/tsupconfig": "workspace:^",
 		"@types/fs-extra": "^11.0.4",
 		"@types/react": "^18.3.3",
-		"@vitest/coverage-v8": "^1.6.0",
-		"@vitest/ui": "^1.6.0",
+		"@vitest/coverage-v8": "^2.0.5",
+		"@vitest/ui": "^2.0.5",
 		"chalk": "^5.3.0",
 		"ink-testing-library": "^4.0.0",
 		"rome": "^12.1.3",
-		"typescript": "^5.4.5",
-		"vitest": "^1.6.0"
+		"typescript": "^5.5.4",
+		"vitest": "^2.0.5"
 	},
 	"engines": {
 		"node": ">=16"

bundler-packages/cli/src/commands/_app.tsx → cli/src/commands/_app.tsx

@@ -1,5 +1,6 @@
 import type { AppProps } from 'pastel'
+import { createElement } from 'react'
 
 export default function App({ Component, commandProps }: AppProps) {
-	return <Component {...commandProps} />
+	return createElement(Component, commandProps)
 }

bundler-packages/cli/src/commands/create.ts → cli/src/commands/create.ts

@@ -1,6 +1,5 @@
-import { command } from '../index.js'
+import { command } from '../create/index.js'
 
-export const isDefault = true
 export const args = command.args
 export const options = command.options
 

cli/src/commands/generate.ts

@@ -0,0 +1,6 @@
+import { command } from '../server/index.js'
+
+export const args = command.args
+export const options = command.options
+
+export default command.Component

cli/src/commands/run.ts

@@ -0,0 +1,6 @@
+import { command } from '../server/index.js'
+
+export const args = command.args
+export const options = command.options
+
+export default command.Component

cli/src/commands/server.ts

@@ -0,0 +1,6 @@
+import { command } from '../server/index.js'
+
+export const args = command.args
+export const options = command.options
+
+export default command.Component

cli/src/commands/tsc.ts

@@ -0,0 +1,6 @@
+import { command } from '../server/index.js'
+
+export const args = command.args
+export const options = command.options
+
+export default command.Component

bundler-packages/cli/src/components/Table.tsx → cli/src/components/Table.tsx

@@ -308,22 +308,21 @@ function row<T extends ScalarDict>(
 								{skeleton.line.repeat(column.width)}
 							</config.cell>
 						)
-					} else {
-						const key = `${props.key}-cell-${column.key}`
+					}
+					const key = `${props.key}-cell-${column.key}`
 
-						// margins
-						const ml = config.padding
-						const mr = column.width - String(value).length - config.padding
+					// margins
+					const ml = config.padding
+					const mr = column.width - String(value).length - config.padding
 
-						return (
-							/* prettier-ignore */
-							<config.cell key={key} column={colI}>
-								{`${skeleton.line.repeat(ml)}${String(
-									value,
-								)}${skeleton.line.repeat(mr)}`}
-							</config.cell>
-						)
-					}
+					return (
+						/* prettier-ignore */
+						<config.cell key={key} column={colI}>
+							{`${skeleton.line.repeat(ml)}${String(
+								value,
+							)}${skeleton.line.repeat(mr)}`}
+						</config.cell>
+					)
 				}),
 			)}
 			{/* Right */}

bundler-packages/cli/src/constants/index.ts → cli/src/constants/index.ts

@@ -3,11 +3,11 @@ import fs from 'fs-extra'
 const originalConsoleLog = console.log
 const originalConsoleError = console.error
 console.log = (...args) => {
-	fs.appendFileSync('../debuglogs.txt', args.join(' ') + '\n')
+	fs.appendFileSync('../debuglogs.txt', `${args.join(' ')}\n`)
 	originalConsoleLog(...args)
 }
 console.error = (...args) => {
-	fs.appendFileSync('../debuglogs.txt', args.join(' ') + '\n')
+	fs.appendFileSync('../debuglogs.txt', `${args.join(' ')}\n`)
 	originalConsoleError(...args)
 }
 export * from './InputStep.js'

bundler-packages/cli/src/create-tevm-app.tsx → cli/src/create-tevm-app.tsx

@@ -7,8 +7,8 @@ import Pastel from 'pastel'
  */
 new Pastel({
 	importMeta: import.meta,
-	name: 'create-evmts-app',
+	name: 'tevm',
 	version: 'beta',
-	description: 'Scaffold a new EVMTS application',
+	description: 'entrypoint to tevm cli',
 }).run()
 console.clear()

bundler-packages/cli/src/App.spec.tsx → cli/src/create/Create.spec.tsx

@@ -1,9 +1,9 @@
-import { App } from './App.js'
+import { App } from './Create.js'
 import chalk from 'chalk'
 import { existsSync, rmSync } from 'fs-extra'
 import { render } from 'ink-testing-library'
-import { join } from 'path'
-import React from 'react'
+import { join } from 'node:path'
+import * as React from 'react'
 import { afterAll, expect, test } from 'vitest'
 
 const TODO = true
@@ -40,18 +40,18 @@ test('Should work', async () => {
 	stdin.write('\r')
 	expect(lastFrame()).toBe(`Hello, ${chalk.green('Jane')}`)
 	/*
-	stdin.write('\r')
-	expect(lastFrame()).toBe(`Hello, ${chalk.green('Jane')}`)
-	stdin.write('\r')
-	expect(lastFrame()).toBe(`Hello, ${chalk.green('Jane')}`)
-	stdin.write('\r')
-	expect(lastFrame()).toBe(`Hello, ${chalk.green('Jane')}`)
-	stdin.write('\r')
-	expect(lastFrame()).toBe(`Hello, ${chalk.green('Jane')}`)
-	stdin.write('\r')
+stdin.write('\r')
+expect(lastFrame()).toBe(`Hello, ${chalk.green('Jane')}`)
+stdin.write('\r')
+expect(lastFrame()).toBe(`Hello, ${chalk.green('Jane')}`)
+stdin.write('\r')
+expect(lastFrame()).toBe(`Hello, ${chalk.green('Jane')}`)
+stdin.write('\r')
+expect(lastFrame()).toBe(`Hello, ${chalk.green('Jane')}`)
+stdin.write('\r')
 
-	await new Promise(resolve => setTimeout(resolve, 1000))
-	*/
+await new Promise(resolve => setTimeout(resolve, 1000))
+*/
 
 	expect(existsSync(join(__dirname, '..', '..', 'my-app'))).toBe(true)
 })

bundler-packages/cli/src/App.tsx → cli/src/create/Create.tsx

@@ -1,10 +1,10 @@
+import { FancyCreateTitle } from '../components/FancyCreateTitle.js'
+import type { Page } from '../state/State.js'
+import { useStore } from '../state/Store.js'
 import { Creating } from './Creating.js'
 import { InteractivePrompt } from './InteractivePrompt.js'
 import type { args } from './args.js'
-import { FancyCreateTitle } from './components/FancyCreateTitle.js'
 import { type options } from './options.js'
-import type { Page } from './state/State.js'
-import { useStore } from './state/Store.js'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { Box, Text } from 'ink'
 import React, { type ReactNode } from 'react'

bundler-packages/cli/src/Creating.tsx → cli/src/create/Creating.tsx

@@ -1,12 +1,12 @@
-import { type StepProps } from './components/Step.js'
-import Table from './components/Table.js'
-import { useCreateEvmtsApp } from './hooks/useCreateEvmtsApp.js'
-import type { Store } from './state/Store.js'
-import { asyncStateColors, colorPallet } from './styles/colors.js'
-import { getTailLogs } from './utils/getTailLogs.js'
+import { type StepProps } from '../components/Step.js'
+import Table from '../components/Table.js'
+import { useCreateEvmtsApp } from '../hooks/useCreateEvmtsApp.js'
+import type { Store } from '../state/Store.js'
+import { asyncStateColors, colorPallet } from '../styles/colors.js'
+import { getTailLogs } from '../utils/getTailLogs.js'
 import { Box, Text } from 'ink'
 import Spinner from 'ink-spinner'
-import { relative } from 'path'
+import { relative } from 'node:path'
 import React from 'react'
 
 type Props = {

bundler-packages/cli/src/InteractivePrompt.tsx → cli/src/create/InteractivePrompt.tsx

@@ -1,11 +1,11 @@
-import { MultipleChoiceStep } from './components/MultipleChoiceStep.js'
-import { TextInputStep } from './components/TextInputStep.js'
-import * as inputSteps from './constants/InputStep.js'
-import * as multipleChoiceSteps from './constants/MultipleChoice.js'
-import { defaultWalletConnect } from './constants/defaults.js'
-import { frameworksByUseCase } from './constants/frameworksByUseCase.js'
-import { type Store } from './state/Store.js'
-import { colorPallet } from './styles/colors.js'
+import { MultipleChoiceStep } from '../components/MultipleChoiceStep.js'
+import { TextInputStep } from '../components/TextInputStep.js'
+import * as inputSteps from '../constants/InputStep.js'
+import * as multipleChoiceSteps from '../constants/MultipleChoice.js'
+import { defaultWalletConnect } from '../constants/defaults.js'
+import { frameworksByUseCase } from '../constants/frameworksByUseCase.js'
+import { type Store } from '../state/Store.js'
+import { colorPallet } from '../styles/colors.js'
 import { useInput } from 'ink'
 import React, { type ReactNode } from 'react'
 
@@ -159,7 +159,7 @@ export const InteractivePrompt: React.FC<Props> = ({ defaultName, store }) => {
 				onSelect={(value) => {
 					store.selectAndContinue({
 						name: 'noGit',
-						value: value === 'none' ? true : false,
+						value: value === 'none',
 					})
 				}}
 			/>,
@@ -254,7 +254,7 @@ export const InteractivePrompt: React.FC<Props> = ({ defaultName, store }) => {
 			onSelect={(value) => {
 				store.selectAndContinue({
 					name: 'noGit',
-					value: value === 'none' ? true : false,
+					value: value === 'none',
 				})
 			}}
 		/>,
@@ -271,7 +271,7 @@ export const InteractivePrompt: React.FC<Props> = ({ defaultName, store }) => {
 			onSelect={(value) => {
 				store.selectAndContinue({
 					name: 'noInstall',
-					value: value === 'none' ? true : false,
+					value: value === 'none',
 					nextPage: true,
 				})
 			}}

bundler-packages/cli/src/args.ts → cli/src/create/args.ts

@@ -1,4 +1,4 @@
-import { generateRandomName } from './utils/generateRandomName.js'
+import { generateRandomName } from '../utils/generateRandomName.js'
 import { z } from 'zod'
 
 const defaultName = generateRandomName()

bundler-packages/cli/src/index.ts → cli/src/create/index.ts

@@ -1,4 +1,4 @@
-import { App } from './App.js'
+import { App } from './Create.js'
 import { args } from './args.js'
 import { options } from './options.js'
 

bundler-packages/cli/src/options.ts → cli/src/create/options.ts

@@ -1,6 +1,6 @@
-import { defaultWalletConnect } from './constants/defaults.js'
-import { frameworks, packageManagers, useCases } from './constants/index.js'
-import { getUserPkgManager } from './utils/getUserPkgManager.js'
+import { defaultWalletConnect } from '../constants/defaults.js'
+import { frameworks, packageManagers, useCases } from '../constants/index.js'
+import { getUserPkgManager } from '../utils/getUserPkgManager.js'
 import { z } from 'zod'
 
 export const options = z