Running jQuery and native event code side by side

shop/bridge.js

// bridge.js: the one way this shop announces a change, for old jQuery code and new native code alike. A real event
// that bubbles reaches jQuery handlers and native listeners on its way up; its data travels in detail.
function emit(el, type, detail) {
  return el.dispatchEvent(new CustomEvent(type, { bubbles: true, cancelable: true, detail: detail }));
}

shop/cart-plugin.js

// cart-plugin.js: the old cart, still a jQuery plugin. It announces every change through emit() from bridge.js.
jQuery(function ($) {
  var count = 0;
  $('#products').on('click', '.add', function () {
    count += 1;
    emit(this, 'cart:changed', { count: count, sku: $(this).data('sku') });
  });

  // An old handler of the plugin's own: it reads the data from the event, as native listeners do.
  $(document).on('cart:changed', function (event) {
    console.log('jQuery handler on document: event.detail.count is ' + event.detail.count + ', event.originalEvent.detail.count is ' + event.originalEvent.detail.count);
  });
  $('#cart').on('cart:cleared', function (event) {
    count = event.detail.count;
    console.log('jQuery handler on #cart heard cart:cleared, count ' + count);
  });
});

shop/badge.js

// badge.js: the new cart badge, written without jQuery. It listens for the plugin's events and sends its own.
const badge = document.querySelector('#badge');
document.addEventListener('cart:changed', (event) => {
  badge.textContent = String(event.detail.count);
  console.log(`native listener on document: badge shows ${badge.textContent}`);
});
document.querySelector('#clear').addEventListener('click', (event) => {
  badge.textContent = '0';
  emit(event.currentTarget, 'cart:cleared', { count: 0 });
});

shop/promo.js

// promo.js: a promotion script nobody has moved yet. It still announces with .trigger().
jQuery(function ($) {
  $('#promo').on('click', function () {
    $('#cart').trigger('cart:changed', [{ count: 5 }]);
  });
});

shop/bridge.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cart: one bridge for both kinds of code</title>
</head>
<body>
  <ul id="products">
    <li>Kettle <button type="button" class="add" data-sku="K-7310">Add</button></li>
    <li>Lamp <button type="button" class="add" data-sku="L-2024">Add</button></li>
  </ul>
  <div id="cart">Cart: <span id="badge">0</span> items
    <button type="button" id="clear">Clear</button>
    <button type="button" id="promo">Apply the promotion</button>
  </div>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
  <script src="bridge.js"></script>
  <script src="cart-plugin.js"></script>
  <script src="badge.js"></script>
  <script src="promo.js"></script>
</body>
</html>

shop/search.js

// search.js: what the filter panel runs for every change of its field. Here it only counts and logs each run.
let searches = 0;
function search(event) {
  searches += 1;
  console.log(`search #${searches} for "${event.target.value}"`);
}

shop/filter-old.js

// filter-old.js: the panel's jQuery code. initFilter() runs on load and again whenever the panel is reloaded.
function initFilter() {
  jQuery('#filter').off('.filter').on('input.filter', search);
}
jQuery(function ($) {
  initFilter();
  $('#reload').on('click', initFilter);
});

shop/filter-new.js

// filter-new.js: the first step of a migration. It adds a native listener on every setup, and the jQuery code of
// filter-old.js is still on the page.
const field = document.querySelector('#filter');
function initFilterNative() {
  field.addEventListener('input', (event) => search(event));
}
initFilterNative();
document.querySelector('#reload').addEventListener('click', initFilterNative);

shop/remove-native.js

// remove-native.js: an attempt to take the panel down with the native API.
document.querySelector('#filter').removeEventListener('input', search);

shop/remove-jquery.js

// remove-jquery.js: an attempt to take the panel down with jQuery.
jQuery('#filter').off('input');

shop/filter.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter panel, half migrated</title>
</head>
<body>
  <label for="filter">Find a product</label> <input id="filter" type="search">
  <button type="button" id="reload">Reload the panel</button>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
  <script src="search.js"></script>
  <script src="filter-old.js"></script>
  <script src="filter-new.js"></script>
</body>
</html>

shop/filter-fixed.js

// filter-fixed.js: the panel's events moved in one change. The native listener replaces the jQuery handler, and one
// AbortController per setup takes down everything that setup added.
const field = document.querySelector('#filter');
let setup = null;
function initFilter() {
  setup?.abort();
  setup = new AbortController();
  field.addEventListener('input', (event) => search(event), { signal: setup.signal });
}
function teardownFilter() {
  setup?.abort();
  setup = null;
}
initFilter();
document.querySelector('#reload').addEventListener('click', initFilter);

shop/teardown.js

// teardown.js: the fixed panel's teardown, as the page calls it when the panel closes.
teardownFilter();

shop/filter-fixed.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter panel, events moved in one change</title>
</head>
<body>
  <label for="filter">Find a product</label> <input id="filter" type="search">
  <button type="button" id="reload">Reload the panel</button>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
  <script src="search.js"></script>
  <script src="filter-fixed.js"></script>
</body>
</html>

shop/order-old.js

// order-old.js: the cart list's jQuery code: one delegated handler for every Remove button, one for the list itself.
jQuery(function ($) {
  $('#cart').on('click', '.remove', function () {
    console.log(`jQuery, delegated on #cart for ${this.id}`);
    if ($(this).data('stop') === 'jquery') return false;
  });
  $('#cart').on('click', function () {
    console.log('jQuery, direct on #cart');
  });
});

shop/order-new.js

// order-new.js: new native code on the same list: a listener on each button, and two on the document.
document.addEventListener('click', () => console.log('native, on document, capture phase'), { capture: true });
for (const button of document.querySelectorAll('#cart .remove')) {
  button.addEventListener('click', (event) => {
    console.log(`native, on ${button.id}`);
    if (button.dataset.stop === 'native') event.stopPropagation();
  });
}
document.addEventListener('click', () => console.log('native, on document'));

shop/order.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cart list: who runs first</title>
</head>
<body>
  <ul id="cart">
    <li>Kettle <button type="button" class="remove" id="kettle">Remove</button></li>
    <li>Lamp <button type="button" class="remove" id="lamp" data-stop="native">Remove</button></li>
    <li>Mat <button type="button" class="remove" id="mat" data-stop="jquery">Remove</button></li>
  </ul>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
  <script src="order-old.js"></script>
  <script src="order-new.js"></script>
</body>
</html>

shop/set-slot.js

// set-slot.js: three versions of the line in the shop's jQuery slot picker that writes the chosen slot into a field.
function setSlotWithTrigger(input, slot) {
  // The plugin as it was: the value, then a triggered change.
  jQuery(input).val(slot).trigger('change');
}
function setSlotWithEvent(input, slot) {
  // The first fix: the value, then a real input event that bubbles.
  input.value = slot;
  input.dispatchEvent(new Event('input', { bubbles: true }));
}
function setSlotWithSetter(input, slot) {
  // The second fix: the value through the setter of the element's own prototype, then real input and change events.
  const { set } = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
  set.call(input, slot);
  input.dispatchEvent(new Event('input', { bubbles: true }));
  input.dispatchEvent(new Event('change', { bubbles: true }));
}

frameworks/react-slot.mjs

// react-slot.mjs: the delivery form written with React 19. Its field is controlled: React keeps the value in state,
// and onChange is how the state learns of a new value.
import { createElement as h, useState } from 'react';

export function SlotForm() {
  const [slot, setSlot] = useState('');
  return h(
    'form',
    null,
    h('label', { htmlFor: 'slot-react' }, 'Delivery slot'),
    h('input', { id: 'slot-react', value: slot, onChange: (event) => setSlot(event.target.value) }),
    h('p', { id: 'summary-react' }, slot ? `Delivery: ${slot}` : 'Delivery: choose a slot'),
  );
}

frameworks/vue-slot.mjs

// vue-slot.mjs: the same form written with Vue 3. v-model keeps the field and the data in step; written without a
// template, it is the vModelText directive on the input.
import { createApp, h, ref, vModelText, withDirectives } from 'vue';

export function mountSlotForm(el) {
  const slot = ref('');
  const field = () => withDirectives(h('input', { id: 'slot-vue', 'onUpdate:modelValue': (value) => (slot.value = value) }), [[vModelText, slot.value]]);
  const summary = () => h('p', { id: 'summary-vue' }, slot.value ? `Delivery: ${slot.value}` : 'Delivery: choose a slot');
  createApp({ render: () => h('form', [h('label', { for: 'slot-vue' }, 'Delivery slot'), field(), summary()]) }).mount(el);
}