termsite
- 3 Devlogs
- 16 Total hours
A preact library that emulates a terminal in the browser!
Ship #1
Pending review
This was my first time making a library of any kind, my second time working with preact, and, well, not even close to the first time working with typescript.
Success
- Commitizen and Semantic Release
These packages together helped my commits remain understandable and atomic. They make the repo easier to work in and reason about. They also made it effortless (after a lot of setup effort) to release to NPM with every push to main. - Preact
Preact allowed my library and websites that run on it to be light, compared to React apps. It also made the library easily extendable with its state based rendering. State did post drawbacks as state loops formed.
Failures
This project didn’t have any major failures because I had already implemented a fake terminal for the first rendition of my personal website that I scrapped and rolled into this where I learned many lessons about state loops and over specialization.
Reflections
Writing a library for parts of your project you may use in other places is almost always a good bet. Not only do you get code reusability, libraries force one to take a step back and look at a problem holistically and can act against over-fitting.
Regrets
I regret having a dependency on a shallow-compare library. I could have implemented that within my library and its needs.
1h 44m 8s logged
4h 26m 19s logged
Release 1.1.0
Done
- Fixed NPM releases
- Added environment to commands
- Test and coverage reports in gitlab
TODO
- Test re-renders
- Add useful commands (echo, env, ls, etc.)
- Add filesystem
Broken
The npm releases have issues with importing other files from within the package.
Retrospective
I did a much better job with small commits and using branches. I also improved my use of CI/CD with better test and coverage reporting. Despite the improvements in my test flow I still need to work on improving coverage. Some tests I tried to get to cover cases for the execution component did not cover the lines I intended them to. This combines with my lack of a good debug tooling in my editor, NeoVim, to make it difficult to write tests for specific lines.
Reasoning
The execution component exists as a result of the way preact checks props updates. Because the function for changing the env is passed with a bind it returns a new reference every time as a result the command re-renders which may cause a change to the env forcing the terminal to re-render. Yay, state loop :( /sar. To prevent this the execution component uses lifecycle methods to abort the render before it happens if there are no changes in the env.env, command, and commands props. This prevents re-renders that cause state loops, yay!
10h 3m 14s logged
Done
- Tests are now working!
- There is a fake terminal working!
- Commitizen and Semantic Release worked!
TODO
- Get persistent environmental variables working
- Decrease unneeded re-renders
Broken
Releases to npm are currently empty for some reason?
Retrospective
In the future one thing I need to work more on is small commits. The commit for the terminal component grew a lot and got out of hand as I was finally beginning to use systems like tests in context. I also need to use branches and issue driven development more especially because semantic release pushes to npm with every commit to main.
Reasoning
I am using preact because it is very light. Overall I want this package to focus on remaining as light as possible so it can be put into websites with no performance impact
AI Disclosure
AI was used when I was figuring out how to setup jest with preact. No other AI was used in this devlog.
