add code folding in logger #108

[kagia]

A new UI element 'foldable' has been added. It allows code folding
for the console. It mirrors the behavior found in most browser
consoles, which is to start collapsed and expand upon selection.

[thani-sh]

Looks nice 😃

[thani-sh]

@arunoda what do you think?

[kagia]

I noticed that we are identifying actions(i.e key={ i }) by their index in the actions list. The problem is that the index is conceptually mutable. React relies on the key prop being conceptually immutable to correctly mount and unmount components. This is why after adding the fifth action there is no visible animation.

I want to update this PR with an extra commit, where actions are being timestamped receive an incremental integer and using that as the identity. Is that okay or shall I open a new issue?

[ritz078]

Lot better than present but going forward we should add syntax highlighting and nested folding too. I think highlighting part can be done easily by using highlight.js and passing the string through it.

[arunoda]

@andela-bkagia the current version of highlighing doesn't work correctly. So, had to change a bit.
Apply this patch: https://gist.github.com/arunoda/771339c36be6f20892d1e889e35fa412

Also we need to write some tests for this component.
Currently, there are some UI test cases in the master branch.
Try to follow them.

[kagia]

@arunoda thanks!
The patch targets compiled output and would easily be overwritten the next time the package is published. Can you send the patch to the original source files?

[arunoda]

@andela-bkagia I updated to original patch format, but earlier would also work.
Copy the above patch into a file and simply apply it with.

git apply highlight.patch

[kagia]

@arunoda thanks for pointing that out, I have applied the patch and will push the tests later today.

[arunoda]

Awesome.

[kagia]

I have encountered a problem with testing.

I needed to test that the output of an uncollapsed foldable is a pretty printed document. The tests fail because the first newline encountered is always removed, from the output of calling .text().

I have raised an issue here.

[arunoda]

@andela-bkagia that might be the correct behaviour. Just try to avoid it or go around it.
If not, try to write to that test failed with this issue. I'll try to fix.

[arunoda]

Could you remove the className here. May be use a ref. I hope which can be used inside tests.

[kagia]

@arunoda I wanted to use refs but I saw that refs are not available with the shallow rendering api.

[arunoda]

Okay. Then I try to use JSDom mounting then. I will take this and release today.

[arunoda]

I picked this PR and merged to master.
Released as v1.13.0

[arunoda]

Thanks a lot for this.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 739f26c

Command	Status	Duration	Result
nx run-many --target=prep --all --parallel=8 --...	✅ Succeeded	5m 40s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-09-18 02:33:21 UTC