Building Voicevox Editor

[sevenc-nanashi]

Voicevox Editor is Electron-based Vue application with ~26k of Vue:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 Language              Files        Lines         Code     Comments       Blanks
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 GLSL                      2           31           22            2            7
 HTML                      2           40           39            1            0
 Markdown                  3           56            0           40           16
 Sass                     10         1384         1056          164          164
 TypeScript              244        46395        35805         5592         4998
─────────────────────────────────────────────────────────────────────────────────
 Vue                     128         2627         2319           49          259
 |- CSS                  105         5185         4376           84          725
 |- HTML                 128         5172         4997          101           74
 |- JavaScript           127        13313        11227          608         1478
 (Total)                            26297        22919          842         2536
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 Total                   389        74203        59841         6641         7721
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

This would be a good milestone and real-world example.

Source Code: https://github.com/sevenc-nanashi/voicevox/tree/feat/vize (Compare)
Vue reference: https://voicevox.github.io/preview-pages/preview/editor/branch-main/editor/index.html
Project Files:

• Talk: https://github.com/VOICEVOX/voicevox_blog/blob/master/src/assets/vvproject/zundamon-metan.vvproj
• Song: https://github.com/sevenc-nanashi/expla1n_self/releases/tag/%E9%85%8D%E5%B8%83

How to run:

• pnpm install
• You need Voicevox Engine. Easiest way to get is just download production editor: https://voicevox.hiroshiba.jp
• Copy .env.production to .env
• pnpm run browser:serve will launch editor with browser-mode. In this mode you need to launch voicevox engine outside of browser, which is automatically launched aside production voicevox editor.
• pnpm run electron:serve will launch editor on Electron. You need to edit executionFilePath in .env to point the path to <the production voicevox>/vv-engine/run. (voicevox editor is installed under $env:LOCALAPPDATA/Programs/voicevox on Windows, ~/.local/share/voicevox on Linux iirc)

[sevenc-nanashi]

As of 0.166.0:

Talk Editor:

Vize	Vue

It looks good!

Song Editor:

Vize	Vue

• SVG rendering does not seem working (Ruler)
• Scroll detection is not working (Keyboards), also it automatically scrolls to around C5 but it did not.

Also it looks like the hotkey plugin (src/plugins/hotkeyPlugin.ts) or initializer (grep registerHotkeyWithCleanup) is loaded twice:

vize check: Many false positives? I guess having multi-line event handler causes issues (Haven't created minimal reproduction though)

[ubugeeei]

yes, typechecker is super early phase, and I'm working now (feedbacks are realy helpfull)

[ubugeeei]

#1001

[sevenc-nanashi]

#1016 and #1017 are the last issue as far as I could find in 0.171.0.
Vize Voicevox passes 99% of VRT! (except SequencerKeys, which is broken because of #1017)
(Voicevox's automated testing environment is weak though...)

P.S. Vite HMR is not working on my end somehow. Will send a reproduction

[sevenc-nanashi]

I updated to 0.172.0 but <line>s in sequencer is not working yet:

I haven't investigated why, but it sounds like more than just an compilation error (as there are no difference between Vue and Vize except comments block for SequencerKeys)

Also multi-line event handler still fails:

[sevenc-nanashi]

0.178.0:

Vize Voicevox passed all tests!

While vize check reports many issues, this is a good milestone.