search

openstyles / stylus

Stylus - Userstyles Manager
https://add0n.com/stylus.html
GNU General Public License v3.0
5.21k stars 295 forks source link

Refactor live preview/live reload #1568

Open eight04 opened 1 year ago

eight04 commented 1 year ago

https://github.com/openstyles/stylus/pull/1565#discussion_r1133124966

Currently, usercss live preview is not very efficient. It has to:

  1. Send source code to background.
  2. Compile usercss.
  3. Send result back to editor.
  4. Send the style object to background.
  5. Install the style as preview.

Step 2-5 should be moved to background.

we can

  1. write a previewManager that handles "raw" style (source code) from the editor.
  2. previewManager would compile the "raw" style and send the result tostyleManager.
  3. We can create some new API like styleManager.installPreview()/uninstallPreview() that can be used by previewManager.

Then, we can make previewManager listen to styleUpdated to re-compile the preview on config change.

The editor:

  1. pipe its "raw" style to previewManager.
  2. We can remove all the live preview logic from the editor.
  3. It only needs to handle the UI. (live preview checkbox)

This pattern is similar to how we handle live reload when opening a .user.css file locally. We can probably merge them into a single service. (e.g. liveInstaller?)

philg-dev commented 1 week ago

I agree that the live preview functionality should be overhauled - it's a massive performance hog on my NixOS seemingly running on every single keystroke you do in the style editor, even when just editing a /* comment */.

The live preview should at least wait for keyboard inactivity for like 1~2 seconds minimum before it keeps spamming reloads.

tophf commented 1 week ago

This refactor isn't about performance, i.e. it won't change noticeably.

The only way to improve performance significantly is to use CSSStyleSheet.cssRules API directly in the affected tabs to patch only the changed rules, but finding the relation between the source text and the injected stylesheet is pretty hard to implement without incurring a big overhead. I'm not that interested eitehr as I've never experienced any slowness on my old i7 CPU.

You can change the delay in the current editor by running the following code in devtools console for the editor:

editor.previewDelay = 2000

I'll add a config for the delay next to the [x] Live preview checkbox, I guess.