search

Enter-tainer / typst-preview

[DEPRECATED] Use tinymist instead
https://Enter-tainer.github.io/typst-preview/
MIT License
452 stars 21 forks source link

TypeError: translateMatch is null in Firefox #278

Closed havarddj closed 3 months ago

havarddj commented 3 months ago

Describe the bug After "Sync preview with current cursor", the preview in Firefox stops automatically updating the document. In the console you get the error message 

TypeError: translateMatch is null

and it links to the function triggerUpdate.

It doesn't seem to be a problem in Safari.

To Reproduce Steps to reproduce the behavior:

  1. Create .typ file in VS-code, and run Preview current file in browser,
  2. (if default browser is not firefox) Copy url and paste into firefox
  3. Run Sync preview with current cursor
  4. Write something else in the typst file. Browser window does not update, console gives error message TypeError: translateMatch is null

Expected behavior Expected browser window to update

Package/Software version:

VSCode version(Help -> About):

Version: 1.84.2 (Universal)
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:52:33.687Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Darwin arm64 23.0.0

typst-preview extension version: v0.11.2

Logs:

typst-preview server log(Output Panel -> typst-preview):


[2024-03-23T14:50:46Z INFO  typst_ts_compiler::service::diag::console] /fftest.typ: Compilation succeeded in 371µs

[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: received message: RenderIncremental
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: received message: RenderIncremental
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] RenderActor: has_full_render: false
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: sending outline
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: waiting for message
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: sending outline
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: waiting for message
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] RenderActor: waiting for message
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::editor] EditorActor: received message from editor: UpdateMemoryFiles ["/Users/havard/Downloads/fftest.typ"]
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::typst] TypstActor: processing UPDATE memory files: ["/Users/havard/Downloads/fftest.typ"]
[2024-03-23T14:50:46Z DEBUG typst_ts_compiler::service::compile] CompileActor: memory event incoming
[2024-03-23T14:50:46Z INFO  typst_ts_compiler::service::diag::console] /fftest.typ: compiling ...

[2024-03-23T14:50:46Z INFO  typst_ts_compiler::service::diag::console] /fftest.typ: Compilation succeeded in 364µs

[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: received message: RenderIncremental
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: received message: RenderIncremental
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: sending outline
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: waiting for message
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] RenderActor: has_full_render: false
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: sending outline
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: waiting for message
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] RenderActor: waiting for message

typst-preview client log(Help -> Toggle Developer Tools -> Console):

updateCanvas start [127.0.0.1:55496:1874:15](http://127.0.0.1:55496/)
updateCanvas done 1 [127.0.0.1:55496:1924:15](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv jump 24 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv diff-v1 228 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
TypeError: translateMatch is null
    fetchSvgDataByDocMode http://127.0.0.1:55496/:1436
    rerender$svg http://127.0.0.1:55496/:1308
    doUpdate http://127.0.0.1:55496/:443
[127.0.0.1:55496:454:17](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv diff-v1 228 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
TypeError: translateMatch is null
    fetchSvgDataByDocMode http://127.0.0.1:55496/:1436
    rerender$svg http://127.0.0.1:55496/:1308
    doUpdate http://127.0.0.1:55496/:443
[127.0.0.1:55496:454:17](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv diff-v1 452 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
TypeError: translateMatch is null
    fetchSvgDataByDocMode http://127.0.0.1:55496/:1436
    rerender$svg http://127.0.0.1:55496/:1308
    doUpdate http://127.0.0.1:55496/:443
[127.0.0.1:55496:454:17](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv diff-v1 396 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
TypeError: translateMatch is null
    fetchSvgDataByDocMode http://127.0.0.1:55496/:1436
    rerender$svg http://127.0.0.1:55496/:1308
    doUpdate http://127.0.0.1:55496/:443
[127.0.0.1:55496:454:17](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv diff-v1 196 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
...
Enter-tainer commented 3 months ago

https://github.com/Enter-tainer/typst-preview/blob/c623b767d4b9f4968692fe5c9173d2c6be6f47d6/addons/typst-dom/src/typst-doc.svg.mts#L210 related code. It looks like the regex doesn't match anything for some reason

Enter-tainer commented 3 months ago

I will try in firefox and see what translate looks like

Enter-tainer commented 3 months ago

On firefox, the translate is matrix(1, 0, 0, 1, 0, 0). So we fails to extract translate(x, y) from it.

cc @Myriad-Dreamin any idea?

Myriad-Dreamin commented 3 months ago

I was lazy and extract positions from translate attribute. Perhaps we can do positive and active fix to make it much more robust, that saves data-position here:

https://github.com/Enter-tainer/typst-preview/blob/c623b767d4b9f4968692fe5c9173d2c6be6f47d6/addons/typst-dom/src/typst-doc.svg.mts#L493-L494

Changing to:

pageElem.setAttribute("transform", translateAttr); 
pageElem.setAttribute("data-x", `${x}`); 
pageElem.setAttribute("data-y", `${y}`);

And using them without complex parsing.

havarddj commented 3 months ago

Great stuff! Thanks a lot

Enter-tainer commented 3 months ago

I'm publishing a new version. It will be soon available in vscode marketplace

havarddj commented 3 months ago

Great! I've written an emacs package (https://github.com/havarddj/typst-preview.el) for typst-preview so I don't really use the vscode plugin, will the binary here on github be updated with 0.11.4 as well?

Enter-tainer commented 3 months ago

will the binary here on github be updated with 0.11.4 as well?

yes. ci will do it all. just wait it finish!

havarddj commented 3 months ago

Amazing!!