Vue 3 Migration#139
Merged
Merged
Conversation
- Gracefully handle cases when chat user is anonymous or fetch has failed - Update `getUserInfo()` and `getPuzzleInfo()` to use `fetch()` - Add default avatar image
- Add native import subpath to `#store` to future-proof path aliases - Reference exported chat/settings store proxy in Composition API components - Add ts-expect-error messages around type conflicts in Vue 2 for SFC Composition API - Replace id attributes with class style identifier
- Will need to refactor to decouple it from App.vue
- Swap type from enum to string union - Fix interactions with this component to use the correct type
- Swapped invalid uses of <li> with <div> - Added note to remove `vxm.chat.tabbing` since `:focus-visible` is available in CSS for this scenario - Adjusted NotificationSection component to check if a channel reference is defined before interacting
- Replace use of id/<li> with class/<div> respectively
- Previously was forcing at least 1 keyword to exist
- Removes $refs and $parent interactions between color picker and sliders - Convert to Composition API
- Reference new Settings store - Update/retrieve markdown button setting with `useLocalStorage()`
- Remove Vue libraries not available in Vue 2 - Remove irrelevant test files - Add Bootstrap Vue Next - Remove Babel configuration - Add new entry App.vue - Updated to ESLint 9
- Move lint-staged from package.json to file
- Update irc-framework websocket type definition - Store static/constant values under `src/constants` directory - Add `src/models` directory and use `interface`/`type` instead of `class`/`enum` - Move more settings previously from Chat Vuex store to settings or other stores - Created irc store to solely hold irc client, login actions, and connection status - Add `src/utils` for holding logic independent from Vue rendering - Restore `stream-browserify` aliasing needed for `irc-framework` - Add `vite-plugin-node-polyfills` for `irc-framework` since it uses Node-only modules - Was previously handled automatically by `webpack` - Updated env variable names
- Switch User model nicks from `string[]` to `Set<string>` - Share connection status and reconnection info from IRC client
- Allows renderer to parse blockquotes, rather than use RegEx plugin - Future-proofing whenever multi-line messages are implemented
- Displays available commands or command details
luxaritas
reviewed
Apr 21, 2026
Member
luxaritas
left a comment
luxaritas
left a comment
There was a problem hiding this comment.
Lots of really great work here. Mostly just have relatively minor nitpicks/issues I caught, and some questions for clarification. (nit --> nitpick, quickfix --> proposal for a super minor change, fyi/thanks --> just a note)
- Extract player tooltip into separate component
- Only require #general chat in default list - The #test channel will only be shown in development mode - Removing both settings input and slash-command for creating arbitrary channels
luxaritas
reviewed
Apr 28, 2026
| }) | ||
| .use(markdownItRegex, { | ||
| name: 'tag-user', | ||
| regex: TAG_USER_REGEX, |
Member
There was a problem hiding this comment.
Future: We may want to update this to attach some sort of client tag or something when sending the message which is tied to the user ID, filled out by selecting the user from a dropdown (we have such a dropdown elsewhere on the site). This way we could handle offline users as well as avoiding potential ambiguity with special characters in usernames (especially if two users have the same name just with different special characters, which is theoretically possible)
- Move definition files for irc-framework and markdown-it-underline to `type` directory - Remove unused files/features
- Limits channels to join for users - Allows operators to use ban, mute, etc. on the limited set of channels - Update ban-related commands to use SAMODE - Allows operators to act on channels without needing to join them
- Temporarily join channel to perform KICK/NOTICE
- Rather than grouping messages in bundles, find the positions where senders change - Remove intermediary group message component
- Prevents multiple tabs from sending duplicate browser notifications - Throttles consecutive notifications per channel to once per 15 seconds - Prevents other unfocused tabs from sending notification if there's an active tab reading the channel currently
- Add `build:wc` script and entry file for creating the `<eterna-chat>` web component - Swaps Vite's legacy plugin with `vite-plugin-babel` - The legacy plugin doesn't work in library mode - Adjusts Bootstrap to work within the Shadow DOM
luxaritas
approved these changes
May 8, 2026
Member
luxaritas
left a comment
luxaritas
left a comment
There was a problem hiding this comment.
🎉 This looks great, really excited for this to land. Will be working on getting this integrated into the other codebases!
This was referenced May 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<script setup>syntaxchat.vuex.tslogic into separate stores (and preventing circular dependencies)irc.store.tsmanages client connection and exposes client to other stores only after the client has been registeredchannel.store.tsmanages channel list and chat historychat.store.tshandles chat inputs and calling slash-commandsbootstrap-vue-nextfor Vue 3 compatibility@vueuse/coreto handle browser/DOM API interactionsdefaultsOxlintandOxfmtViteVitestfor component and utility unit test capabilitylint-staged/huskypre-commit hookViterelated plugins/presetsvite-plugin-node-polyfillsto allowirc-frameworkusagepostcss-preset-envto convert modern CSS syntax for targeted browsersvite-plugin-babelto add JS polyfills to the build as neededirc-frameworktype definitions for more events/features usedmessage-tagsbuild:wcscript to export as a web component<eterna-chat>usernameanduidas attributes to initialize the chat client