(cli): remove prettier

[ryoppippi]

low priority

problem

prettier is really large. we want to remove it

solution

Instead of pass the whole code to prettier, we can indent the code

1. use detect-indent to identify the code indent width
2. calculate the width of indent of /// INSERT CONTROLLER HERE code and /// INSERT IMPORT HERE
3. change the indent of the insert code based of step2 with indent-string
4. remove prettier and related function

Also

• we need to write a test
• implement the indent logic into utils.ts
• implement code inserting logic into connectors.ts(we can include code formatting logic)
• call the insert function from start.ts

[luke0408]

@ryoppippi

This looks like a fun task! If no one is currently working on it, would it be okay if I take it on? I'd also like to compare the actual time it takes to format code using Prettier versus the approach you've proposed—just adjusting the indent level.

[ryoppippi]

@luke0408 Thank you so much! We don't have so much time right now, so if you help us it must be really great!
I was going to leave this for at least another two weeks. I urge you to give it a go.
Using prettier is easy, but downloading 8MB just to fix the indentation is a bit of an exaggeration, so I made this issue!
I'll be reviewing it, so please give it a go!
Don't forget to write a formatter test too!

[luke0408]

Sounds good!
I'm not the most skilled, but I'll try to get it done as quickly as possible!

[ryoppippi]

It will be fun! I'll support you!

[luke0408]

@ryoppippi

May I ask you a question?

Here’s how I understand the two libraries:

• detectIndent() identifies the indentation style (spaces/tabs and width) used across the entire code.
• indentString() applies uniform indentation to the entire input string.

Given this, I believe we need to recursively walk through indentation-relevant elements like braces ({}), if statements, etc., and apply the detected indentation style using indentString().

So, under the assumption that we stick with these tools, I'm considering building a lightweight "depth tree" of the code — ignoring the content, but keeping track of structural depth for formatting purposes.

Alternatively, I'm also exploring the idea of generating an actual AST using something like @typescript-eslint/typescript-estree, and then using astring to regenerate the code. But I’m wondering if that might be overkill or outside the intended scope of this task.

What do you think?

[ryoppippi]

@luke0408
Thank you for your detailed explanation!
And thank that you think about it a lot!

I think our goal of this task is:

• use libraries with small bundle size
• if some parts are not accurate we don't mind

so I think

So, under the assumption that we stick with these tools, I'm considering building a lightweight "depth tree" of the code — ignoring the content, but keeping track of structural depth for formatting purposes.

This approach might be a good choice.
Also, in my opinion, using @typescript-eslint/typescript-estree is not a good idea because we need eslint/typescript/@typescript-eslint/typescript-estree, which means the bundle size would be bigger than just using prettier!

In our implementation, we replace the two lines in a template file:

agentica/packages/cli/src/connectors.ts

Lines 169 to 177 in 58d0824

	export function insertCodeIntoAgenticaStarter({
	content,
	importCode,
	connectorCode,
	}: InsertCodeIntoAgenticaStarterProps): string {
	return content
	.replace("/// INSERT IMPORT HERE", importCode)
	.replace("/// INSERT CONTROLLER HERE", connectorCode);
	}

So what we want is:

• calculate indent depth
• apply the indentation to the code for replacement (see as an example)
• replace /// INSERT IMPORT HERE with ↑ code

So overall, you don't need to do searching stuff. It will be simpler than you consider

If I might miss, probably you think more than me. In that case please create a draft PR first then we can start discussing based on your prototype!

Again, thank you for your effort!