Vue port/rewrite tracking issue

A lot of work has been done in #2647 to move the state, channel list and the chat window itself into Vue, but there’s other components that currently still remain in jQuery and are not yet ported.

Because Vue porting takes a substantial amount of work, as it touches majority of the client code, merging other PRs that touch client code which is not yet ported to Vue is unwanted as that duplicates the effort.

This is the list so far, with probably more things that are missing:

• Channel list (sidebar)
• Chat window along with all the messages and previews
• User lists in chats
• Settings page
• Version checker page
• Changelog page
• Connect/edit network page
• Help page
• Sign in page
• Slideout code
• Image viewer
• jQuery code that handles viewport clicks and other stuff
• Vue routing
• Sign in form flashes on page load (if auth token exists)
• Binding $refs.element.close in channelwrapper is a bad idea and breaks (collapsed channels, no element ref)
• scrolling up may not load more history?
• Footer buttons should have active class added
• Pressing back button which goes to window does not reset activeChannel
• Network edit still references handlebars template
• Context menu ‘remove’ on networks does not work
• Use findChannel instead of manually looping through channels
• Convert remaining vueApp variables to vuex state
• Emoji auto complete arrow up/down keys switch message history, not just selected option
• Pressing browser back button in image viewer should close it (router)
• Remove Vue.filter (if possible)
• Remove renderPreview.js
• Remove window.vueMounted and lounge.js
• Opening changelog and reloading the page does not load it
• Opening settings and reloading the page breaks
• Opening connect and reloading the page breaks
• Handle initial route on page load if there’s none correctly
• Better handle invalid routes
• #/sign-in can still be opened if logged in
• Open first channel instead of connect window on first load after server restart
• Bug: NavigationDuplicated “Navigating to current location (”/chan-17") is not allowed"
• Fix require that are within functions, due to circular dependencies
• Cleanup settings/options/webpush
• Remove utils.js
• Context menus
• Autocompletion (textcomplete menus)
• Replace all require with import in client code for tree shaking
• Close image viewer with ESC key
• Closing context menu doesn’t seem to refocus previously active element
• Change :focus/:hover to .active in context menus (like in user list, to prevent keyboard/mouse focused element getting out of sync)
• Use mousetrap for escape keybinds in contextmenu/imageviewer (and make sure its unbound if its bound in mounted event)
• Client sometimes fails to reconnect with message Waiting to reconnect... (Transport Error)
• Fix force sync button and warnings
• Move upload-overlay to vue
• Convert keybinds to use state instead of jquery
• parse.js generates context menus on channels for currentChannel which is not exactly right (and that breaks tests)
• Clicking a mentioned nick in chat does not open the context menu
• Check up on vue router urls to keep backwards compatibility
• Final, nice to have, refactor: Getting rid of getElementById and querySelector and instead referencing elements via Vue.

Majority of the work revolves around porting individual pages, which should allow us to finally rewrite the damn window handling (which is currently handled rather poorly, and is hacky with image viewer).

When the remaining items are ported, we should be able to completely remove the following dependencies completely out of the project:

• jquery
• jquery-ui
• handlebars
• handlebars-loader
• html-minifier
• html-minifier-loader
• css.escape

[xPaw]

We’re getting close to being done, we would appreciate if people switched to the vue branch and gave it some testing.

[Daniel15]

@MiniDigger You can definitely convert to React one piece at a time. You just need to call ReactDOM.render in the appropriate place. That’s pretty common at Facebook - in fact, news feed is mostly server-rendered, but the likes/comments are rendered with React. A large app I used to work out (~350,000 lines of JS) was converted from a legacy JS framework to React over 2 years, one piece at a time.

Anyways, Vue is good too. You can’t go wrong with either framework. 😃