CodeSwing preview does not update with setting onEdit

[trentfridey]

Hi, thanks for creating this extension! I've just added the latest version 0.0.5 to my local VSCode, and it does not seem to update the preview upon editing.

Steps to reproduce:

1. Open VSCode
2. Ctrl+Shift+P to open command
3. Select 'CodeSwing > New Swing...'
4. Select folder to save in
5. Type 'Hello World' in index.html

I also noted that it doesn't update the preview on saving. However, I was able to get the preview to update by changing the layout setting by selecting 'Change Layout' and then selecting any layout from the dropdown.

If it helps, here's the details about my setup:

Version: 1.52.1 (system setup) Commit: ea3859d4ba2f3e577a159bc91e3074c5d85c0523 Date: 2020-12-16T16:34:46.910Z Electron: 9.3.5 Chrome: 83.0.4103.122 Node.js: 12.14.1 V8: 8.3.110.13-electron.0 OS: Windows_NT x64 10.0.19041

The extension settings are set to the defaults.

Let me know if there is anything else you'd need from me to debug this. Thanks again, this extension looks great overall.

[lostintangent]

Hmm, I'm sorry you're running into this issue! I just tried to repro it and I couldn't, so I'm trying to think about what might be going on 🤔

Which template did you select when you created the swing? Maybe there's an issue with one of them, and I'd love to make sure I'm investigating the exact flow you used.

Also, could you try opening the VS Code dev console (Help -> Toggle Developer Tools) and see if there are any errors after you type in the HTML file with a swing open? Once you open the console, clear it, so that you can narrow down the messages to just those that are the result of typing.

[trentfridey]

Ok, so I did New Swing > Basic HTML-Only, and I got a warning:

[Extension Host] [MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: ObservableObject@1.activeSwing

Here's the stack trace:

Trace

[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: ObservableObject@1.activeSwing t.log @ console.ts:112 $logExtensionHostMessage @ remoteConsoleUtil.ts:11 _doInvokeHandler @ rpcProtocol.ts:396 _invokeHandler @ rpcProtocol.ts:330 _receiveRequest @ rpcProtocol.ts:269 _receiveOneMessage @ rpcProtocol.ts:208 (anonymous) @ rpcProtocol.ts:90 fire @ event.ts:525 fire @ ipc.net.ts:449 _receiveMessage @ ipc.net.ts:785 (anonymous) @ ipc.net.ts:642 fire @ event.ts:525 acceptChunk @ ipc.net.ts:191 (anonymous) @ ipc.net.ts:191 t @ ipc.net.ts:925 emit @ events.js:223 addChunk @ _stream_readable.js:309 readableAddChunk @ _stream_readable.js:290 Readable.push @ _stream_readable.js:224 onStreamRead @ internal/stream_base_commons.js:181

I didn't have any other warnings come up when doing this

[lostintangent]

I haven't been able to repro this issue in macOS/Linux unfortunately, so I'm wondering if it's a Windows-specific issue. I'm going to install Parallels on my macOS tonight, so I can try to repro/investigate this further. Stay tuned for updates, and apologies again for the issue here!

[lostintangent]

Actually, one other question: could you share which other extensions you have installed? This may be an interop problem with another extension, and I'd love to be able to narrow that down. Thanks!

[trentfridey]

Here's the list of the extension installed on the VSCode instance on Windows:

Extensions

• akamud.vscode-theme-onedark-2.2.2
• arcticicestudio.nord-visual-studio-code-0.15.0
• bierner.markdown-mermaid-1.9.0
• bpruitt-goddard.mermaid-markdown-syntax-highlighting-1.1.0
• codespaces-contrib.codeswing-0.0.5
• coenraads.bracket-pair-colorizer-1.0.61
• cssho.vscode-svgviewer-2.0.0
• dbaeumer.vscode-eslint-2.1.14
• donaldshen.markdown-vue-0.1.0
• dracula-theme.theme-dracula-2.22.3
• eamodio.gitlens-9.7.3
• editorconfig.editorconfig-0.16.4
• eg2.vscode-npm-script-0.3.13
• equinusocio.vsc-community-material-theme-1.4.2
• equinusocio.vsc-material-theme-33.1.2
• equinusocio.vsc-material-theme-icons-1.2.2
• esbenp.prettier-vscode-5.8.0
• geeklearningio.graphviz-markdown-preview-0.0.8
• gerane.theme-active4d-0.0.5
• github.github-vscode-theme-1.1.5
• github.vscode-pull-request-github-0.22.0
• gruntfuggly.todo-tree-0.0.192
• ikuyadeu.r-1.6.2
• imperez.smarty-0.3.0
• jakearl.search-editor-apply-changes-0.1.1
• jdinhlife.gruvbox-1.4.0
• joaompinto.vscode-graphviz-0.0.6
• julialang.language-julia-1.0.10
• karigari.chat-0.35.0
• kuscamara.electron-0.2.5
• lukas-tr.materialdesignicons-intellisense-3.1.0
• ms-azuretools.vscode-docker-1.9.0
• ms-mssql.mssql-1.10.0
• ms-python.python-2020.12.424452561
• ms-toolsai.jupyter-2020.12.414227025
• ms-vsliveshare.vsliveshare-1.0.1377
• ms-vsliveshare.vsliveshare-1.0.3375
• ms-vsliveshare.vsliveshare-audio-0.1.91
• msjsdiag.debugger-for-chrome-4.12.11
• octref.vetur-0.31.3
• pkief.material-icon-theme-4.4.0
• redhat.java-0.73.0
• redhat.vscode-xml-0.14.0
• scala-lang.scala-0.5.0
• sdras.night-owl-2.0.0
• silvenon.mdx-0.1.0
• sirtori.indenticator-0.7.0
• streetsidesoftware.code-spell-checker-1.10.2
• syler.sass-indented-1.8.13
• teabyii.ayu-0.20.1
• tianyishi.rmarkdown-0.0.14
• visualstudioexptteam.vscodeintellicode-1.2.10
• vscjava.vscode-java-debug-0.30.0
• vscjava.vscode-java-dependency-0.16.0
• vscjava.vscode-java-pack-0.12.1
• vscjava.vscode-java-test-0.26.1
• vscjava.vscode-maven-0.27.0
• wesbos.theme-cobalt2-2.2.5
• wix.vscode-import-cost-2.13.0
• yzhang.markdown-all-in-one-3.4.0

I tested this extension on my other machine, running Linux, and did not encounter this bug

[lostintangent]

Alright I was able to repro the issue, and as assumed, it's a Windows-specific path problem :/ I'll ship a fix for it tonight 👍

[lostintangent]

I just published an update to the marketplace that fixes this issue, along with a couple other that I found on Windows. Let me know if you run into any issues, and thanks again for the help in tracking this down!