Project page: meta:Reaction

This gadget allows users to add reaction emojis (like 👍, ❤️, 😂, etc.) to comments on talk pages across Wikimedia projects. It enhances user interaction and engagement by providing a simple way to express feedback.

To use Reaction on one of the supported wikis, or install it on all wikis:

• For one wiki: Add the following line to your common.js page on that wiki ( e.g. English Wikipedia common.js ).
• For all wikis: Add the following line to your global.js page on Meta-Wiki.

mw.loader.load("//meta.wikimedia.org/w/index.php?title=User:SuperGrey/gadgets/Reaction.js&action=raw&ctype=text/javascript"); // Backlink: [[meta:Reaction]]

npm install
npm run build

Upload dist/bundled.js to your wiki userspace (e.g., User:YourName/Reaction.js) and add the following line to your common.js or global.js page:

mw.loader.load("//your.wiki.org/w/index.php?title=User:YourName/Reaction.js&action=raw&ctype=text/javascript");

If your wiki does not host Template:Reaction and Module:Reaction, you need to install those first.

1. Create Template:Reaction with the content from wikitext/Reaction.template.wikitext.

2. Create Template:Reaction/styles.css with the content from en:Template:Reaction/styles.css.

3. Choose the appropriate language version of Module:Reaction from the Reaction.module.*.lua files in the latest release, and create Module:Reaction on your wiki with its content.

npm run build:debug   # Build with sourcemaps
npm run lint          # ESLint check
npm test              # Run Vitest tests

You can test Reaction by pasting the bundle directly into a wiki tab:

1. Run npm run build:debug. The output appears at .debug/Gadget-Reaction.js and .debug/Gadget-Reaction-<locale>.js.
2. Open .debug/Gadget-Reaction.js, copy its entire contents, and switch to the wiki article you want to test.
3. If your locale has a supplementary bundle, paste .debug/Gadget-Reaction-<locale>.js after the base bundle.
4. Open the browser DevTools console (F12/Ctrl+Shift+I) on that page and paste the bundle. It bootstraps itself the same way the gadget loader does, so Reaction immediately mounts in the current tab.
5. When you rebuild, reload the wiki page and repeat the paste to pick up the changes. Keeping npm run build:debug --watch in another terminal helps rebuild automatically; you only need to re-paste after each build.

The repository ships with a ready-to-run Firefox debugging workflow for VS Code. The .debug/manifest.json web extension installs a content script (inject.js) that injects the freshly built .debug/Gadget-Reaction*.js bundle into any *.wikipedia.org and *.wikimedia.org page, letting you test Reaction like a normal gadget while still using VS Code breakpoints and sourcemaps.

1. Install the Debugger for Firefox extension in VS Code (it provides the "firefox" debug type).
2. Open the Run and Debug panel and select Debug Reaction on Wikipedia.
3. Press ▶️. The pre-launch task defined in .vscode/tasks.json runs npm run watch:debug, which keeps rebuilding .debug/bundled.js with inline sourcemaps.
4. VS Code launches Firefox to the URL from launch.json and sideloads the .debug extension. The debugger auto-reloads the page whenever Gadget-Reaction*.js, inject.js, or manifest.json change, so edits + saves immediately refresh the gadget.
5. Set breakpoints anywhere in the TypeScript source; Firefox hits them against the rebuilt bundle thanks to the sourcemaps produced by the debug build.

Tip: Update url in .vscode/launch.json if you want the debug session to start on another article or wiki. Stop the debug session to terminate the watch:debug background task.

Disable the Meta-hosted loader while debugging. If your user common.js (or global.js) loads the Meta-hosted script, add a guard to skip it when you are running the local debug extension:

(() => {
  const isDev = localStorage.getItem('reaction-dev') === '1';
  if (isDev) return;

  mw.loader.load("//meta.wikimedia.org/w/index.php?title=User:SuperGrey/gadgets/Reaction.js&action=raw&ctype=text/javascript"); // Backlink: [[meta:Reaction]]
})();

The debug extension sets localStorage["reaction-dev"] = "1" at document_start, so the remote loader is disabled for the debug profile. To restore the online version:

localStorage.removeItem('reaction-dev');
location.reload();