typora-issues
typora-issues copied to clipboard
[Feature] Improved theme dev experience: disable cache, refresh, and live reload
The dev experience while authoring themes is unnecessarily painful. This seems like an issue that could be improved with a few seemingly simple updates to Typora.
First, here is the current process I used during the development of Typora Themeable on macOS:
- Open Typora
- Select "Enable Debugging" under Typora's "Help" menu
- Right-click in the content area and select "Inspect Element"
- Disable cache by clicking the
toggle
- Make a change to a theme "A"
- Switch to another theme
- Switch back to theme "A" to see changes
Here are the issues with this process:
- Every change made to a theme's CSS requires reloading the theme. As far as I am aware, the only way to do this is to manually switch themes (steps 5 through 7 above). This is unnecessarily tedious.
- Disabling the cache is required to ensure changes are applied when switching themes. Disabling the cache requires that the developer tools are open. The issue with this is that the developer tools can consume a lot of memory over a short period of time. I believe this is caused by swapping themes during development as I can see the "Typora Web Inspector" process' memory usage grow every time a new theme is loaded with the inspector open. It was not uncommon for me to see this process consuming more than 4GB during the development of Typora Themeable. The memory usage would become obvious when my machine started to slow considerably, which was my indication that it was time to restart Typora.
A few suggestions on how to improve this:
- Disable the cache during development/debugging. This would allow theme authors to use the same "swap themes to see changes" method described above without the memory consumption issues caused by having the developer tools open all the time.
- Provide a "Refresh" feature (with keyboard shortcut) that will force an update without needing to switch themes.
- Ideally, Typora would offer a "live reload" feature during development that applies changes automatically without the need to swap themes or manually refresh. There are many articles covering how to implement live reloading in electron apps. Libraries like electron-reloader can simplify the implementation as well (assuming they'll work Typora).
Happy to discuss further and work out the details. Thanks!