Script Compatibility Mode v4.0.0: Update Lesson Slide Navigation

WaniKani API And Third-Party Apps
1

The Script Compatibility changelog has been updated:

Compatibility Mode Off: The navigation for lesson subjects and slides (the bit that lives at the bottom of the lesson slides) has been converted to React.

navigation-highlighted
navigation-highlighted1237×808 38 KB

  • As with other changes, IDs have been removed and we’re using Tailwind classes for styling.
  • The buttons are now <button>s, which is nice for all kinds of things, mainly accessibility.
  • The logic driving the state of the items lives in jStorage and React and is no longer driven by the classes on the different elements in the list.
5 Likes
2

I do want to point out that removing the IDs makes it much more difficult to make/maintain scripts, and they become more brittle. I had to update my Lesson Filter script due to this change, and the logic went from:

$('#batch-items li:first').click();

To:

$('[data-testid="batchList"] li:first button').click();

The new version feels a lot more brittle to me since I had to use the data-testid instead of a true id.

If you ever remove the supplement-info ID, the Lesson Filter script will probably be in trouble since it’ll have nowhere to reference to figure out where to insert the script’s custom UI.

Is there a reason you want to remove the top-most IDs from the HTML? I can understand not having a ton of IDs littered throughout the HTML and mostly relying on React to render correctly without IDs. But what’s the harm in the top-level sections of the page still having IDs?

6 Likes