Vue 3 Migration by MarkH817 · Pull Request #139 · eternagame/HTML-Chat

MarkH817 · 2026-03-10T15:37:21Z

Summary

Architecture rework
- Migrate to Vue 3
- Replace Vue class components to Composition API with <script setup> syntax
- Keeping as much chat logic in Pinia stores or utility functions as possible
- Replace Vuex with Pinia
  - Breakdown chat.vuex.ts logic into separate stores (and preventing circular dependencies)
  - irc.store.ts manages client connection and exposes client to other stores only after the client has been registered
  - channel.store.ts manages channel list and chat history
  - chat.store.ts handles chat inputs and calling slash-commands
- Swap to bootstrap-vue-next for Vue 3 compatibility
- Add @vueuse/core to handle browser/DOM API interactions
- Move slash-command logic to a registry pattern (some commands still are in development)
- Replace deprecated / abandoned libraries
- Update Browsers List target to defaults
Tool changes
- Upgrade to ESLint 9
- Add Oxlint, and Prettier
- Add Vite
- Add Vitest for component and utility unit test capability
- Add lint-staged / husky pre-commit hook
Vite related plugins/presets
- vite-plugin-node-polyfills to allow irc-framework usage
- postcss-preset-env to convert modern CSS syntax for targeted browsers
- @vitejs/pluin-legacy to add JS polyfills to the build as needed
Update irc-framework type definitions for more events/features used
- Adding tags parameter since Ergo supports message-tags
  - Timestamp
  - Message ID
  - Label
  - Batch
  - Client tags
- Using reconnection logic already provided by the library
- Adding other events and updating as needed

Additional Notes

Other than ./src/app/types/modules/irc-framework, files in ./src/app are not in use in the Vue 3 build
- Will eventually remove this directory once the remaining features are migrated in later PRs

- 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

- If this settings is enabled, client will set self as AWAY after 1 minute of inactivity - Ignore idle check if user manually sets self as AWAY

- Add RegEx and Link attribute plugins for markdown-it - Ensure blockquotes and highlighted text escape unsafe HTML - Add `data-link-type` to indicate internal/externally handled links - Removed cursive and serif formatting since it keeps formatting timestamps unexpectedly - Changed user/channel mentions into buttons for a11y

- Prepare listener for puzzle link detection - Attach tooltip to recently focused/hovered puzzle link

- Cache puzzle data in store - Prevent duplicate fetches if puzzle is loading or cached

- Add confirmation modal store - Add `type-fest` for utility types

- Conditionally render mentioned channels as buttons - Navigate to channel on click, if it is a joined channel - Remove tagged player button interaction

- Prevents accidental click/tab with preview links or buttons

- 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

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)

luxaritas · 2026-04-03T23:18:04Z

+  ...pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  {
+    ...pluginVitest.configs.recommended,
+    files: ['src/**/__tests__/*', 'src/**/*.{spec,test}.*'],
+  },


Quickfix: Do you think it's viable to omit eslint entirely? According to oxc-project/oxc#479, oxc-project/oxc#2180, and oxc-project/oxc#11440 the only rules which aren't implemented are the few vue rules that rely on template parsing, which seem rather minimal.

Also thoughts about oxfmt instead of prettier? It should be dropin, is now out of alpha, and even though its beta it seems stable (with full prettier conformance).

luxaritas · 2026-04-04T04:22:45Z

+          :state="uidError.length === 0"
+          :invalid-feedback="uidError"
+        >
+          <BFormInput name="uid" type="text" inputmode="numeric" v-model.trim="form.uid" required />


Thanks: TIL about inputmode!

luxaritas · 2026-04-04T04:31:26Z

+  });
+
+  function onSubmit() {
+    emit('login', toRaw(form));


Nit: I don't have a strong opinion on this, but I'm wondering if it makes more sense to just interact with the store directly. Rationale:

Its more consistent with the fact that elsewhere for similar behavior we delegate to the store

The login form vs chat app feels like a "routing" type of behavior

It doesn't feel like this state or its lifetime is clearly encapsulated

But my first reaction was not being sure what the best practice would be! Interested to hear rationale in the other direction

I agree with this take. This was just a port of the existing login form. I'll make this change. 👍

luxaritas · 2026-04-21T19:51:38Z

+<template>
+  <img
+    alt="Loading"
+    src="https://s3.amazonaws.com/eterna/icon_img/loading.gif"


Quickfix/Nit: This is admittedly kinda crusty. Minimally I think itd make sense to have all resources actually in this repo instead of static CDN links, but given we're using bootstrap-vue we could just use BSpinner

luxaritas · 2026-04-21T19:52:52Z

+      'minimization-triangle--closed': !open,
+    }"
+    type="button"
+    :style="{ backgroundImage: `url(${arrowImage})` }"


FYI: You can use v-bind in the style block: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css

luxaritas · 2026-04-21T22:19:26Z

+          <SidebarSectionButton
+            @click="activeTab = 'user'"
+            :active="activeTab === 'user'"
+            label="User"


Suggested change

label="User"

label="Online Users"

luxaritas · 2026-04-21T22:26:54Z

+  <template v-if="isAttemptingConnection">
+    <BAlert class="m-0" v-if="irc.connectionStatus === 'connecting'" :model-value="true">
+      <img
+        src="https://s3.amazonaws.com/eterna/icon_img/loading.gif"


Quickfix/Nit: We have a component for this, yea?

luxaritas · 2026-04-21T22:35:56Z

+    }
+
+    const [username, targetChannel, ...reasonParts] = args;
+    const channels = targetChannel === '*' ? stores.channel.channelNameList : [targetChannel];


What about channels the moderator isn't currently in? This is another argument for whitelisting channels. (nb: this would be solved with something like a KLINE, but Ergo doesn't currently support that for mutes :( )

I see this tying back to the earlier point of not allowing users to create their own channels arbitrarily. I can adjust the * input to point at refer to approved/whitelisted channels instead.

luxaritas · 2026-04-21T22:36:47Z

+  },
+};
+
+export const banmask: CommandHandler = {


Proposal: Should there be a mutemask/unmutemask too?

- 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

MarkH817 added 30 commits February 24, 2026 12:10

Handle failed fetches / anonymous user tooltips

c42c090

- Gracefully handle cases when chat user is anonymous or fetch has failed - Update `getUserInfo()` and `getPuzzleInfo()` to use `fetch()` - Add default avatar image

Convert App, Login, and DraggableDiv to Composition API

e558acb

Rename login form file

98ce1fe

Allow chat/setting store proxies access outside of classes

be3e5a3

Remove vue-resource. Not used.

1cc7c61

Update OperLogin to Composition API

66778d6

- Will need to refactor to decouple it from App.vue

Update ItemOptions and data classes

f60cd78

Update SettingsSection and simplify MinimizationTriangle

f5aa550

Update SettingsEnableDisable component

a4e381d

- Swap type from enum to string union - Fix interactions with this component to use the correct type

Update Operator login, text size, and toolbar to Composition API

e50821e

- Replace use of id/<li> with class/<div> respectively

Fix keyword notification to allow all keywords to be removable

86dadd5

- Previously was forcing at least 1 keyword to exist

Refactor ColorPicker to stop using anti-patterns

8a93ec5

- Removes $refs and $parent interactions between color picker and sliders - Convert to Composition API

Add prettier

b5b6cda

Add Pinia and @vueuse/core to migrate stores

868351b

Move settings interaction to Pinia store version

fc0721a

Update emoticon bar

36b5369

- Reference new Settings store - Update/retrieve markdown button setting with `useLocalStorage()`

Migrate to Vue 3

ebb3fe9

- 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

Add Husky

b8df195

Add Oxlint and Vitest

df4a7e3

- Move lint-staged from package.json to file

Move DraggableDiv component

9f90959

Update irc-framework types

de083b3

Move puzzle/user data fetching to services directory

17e84b0

Add channel and user list stores

8e7e281

Move src/app/assets to src/assets

6ec4cb4

Remove unused types

c77f938

Use IRC client's reconnect feature and emitted events

51c1f1c

- Switch User model nicks from `string[]` to `Set<string>` - Share connection status and reconnection info from IRC client

Add isInitialized flag to keep chat visible during reconnection

acef402

MarkH817 added 20 commits April 3, 2026 20:48

Update keyword detection to be case-insensitive

dcb73c2

Add auto-AWAY timeout

de7a657

- If this settings is enabled, client will set self as AWAY after 1 minute of inactivity - Ignore idle check if user manually sets self as AWAY

Add away status to settings

965902c

Add font size to settings

b7c9bb2

Add initial logic for puzzle tooltips

3facdbf

- Prepare listener for puzzle link detection - Attach tooltip to recently focused/hovered puzzle link

Display puzzle information

b49085a

- Cache puzzle data in store - Prevent duplicate fetches if puzzle is loading or cached

Add external link confirmation

e6189a1

- Add confirmation modal store - Add `type-fest` for utility types

Navigate on clicking tagged channel in message

a814757

- Conditionally render mentioned channels as buttons - Navigate to channel on click, if it is a joined channel - Remove tagged player button interaction

Extract puzzle tooltip into separate component

985f419

Extract message content rendering into separate component

7b01280

Add chat input preview

20cfb8f

Update to Vite 8

aff7694

Marked message preview as inert

cb59481

- Prevents accidental click/tab with preview links or buttons

Add markdown underline format

0978f56

Add chat toolbar

dbb91f0

Add initial markdown format toggle

b280116

Connect keybind to input

664f793

Switch from renderInline to render in MessageContent

1ceab0f

- Allows renderer to parse blockquotes, rather than use RegEx plugin - Future-proofing whenever multi-line messages are implemented

Add help command

2c71e71

- Displays available commands or command details

luxaritas reviewed Apr 21, 2026

View reviewed changes

MarkH817 added 2 commits April 22, 2026 10:21

Add ignore/unignore commands and settings section

6863815

Add ignore/unignore button to message options and player tooltip

62a686f

- Extract player tooltip into separate component

MarkH817 marked this pull request as draft April 27, 2026 19:09

MarkH817 added 6 commits April 27, 2026 14:36

Use IRC store directly in login form component

d6c6490

Use BSpinner replace loading gif

cddd018

Use v-bind in minimization triangle

790ec54

Reduce default channels and remove channel joining

58a0328

- 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

Add mute/unmute mask commands

5d175ba

Update user related labels/descriptions

eb342dc

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue 3 Migration#139

Vue 3 Migration#139
MarkH817 wants to merge 121 commits intoeternagame:devfrom
MarkH817:feature/vue-3-migration

MarkH817 commented Mar 10, 2026 •

edited

Loading

Uh oh!

luxaritas left a comment

Uh oh!

luxaritas Apr 3, 2026

Uh oh!

luxaritas Apr 4, 2026

Uh oh!

luxaritas Apr 4, 2026

Uh oh!

MarkH817 Apr 24, 2026

Uh oh!

luxaritas Apr 21, 2026

Uh oh!

luxaritas Apr 21, 2026

Uh oh!

luxaritas Apr 21, 2026

Uh oh!

luxaritas Apr 21, 2026 •

edited

Loading

Uh oh!

Uh oh!

luxaritas Apr 21, 2026

Uh oh!

MarkH817 Apr 24, 2026

Uh oh!

luxaritas Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

MarkH817 commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Additional Notes

Uh oh!

luxaritas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

luxaritas Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MarkH817 commented Mar 10, 2026 •

edited

Loading

luxaritas Apr 21, 2026 •

edited

Loading