Convert vuex/keycodes store to pinia #1370

yanfali · 2024-11-05T17:56:36Z

Description

This PR replaces all the uses of vuex keycodes store with a pinia equivalent. It also fixes a bug in the steno code I discovered while refactoring, where steno boards were not being identified correctly.

This should be 100% equivalent with no regressions.

Vuex is in deep maintenance mode and pinia is the recommended library for vue. This work is preparation for moving to vue 3 and vue 2 is now EOL.

- partial - values - no need to spread default exports

- replace all uses of vuex keycodes store with pinia - fix ergo keyboard menu

yanfali · 2024-11-05T22:48:21Z

@precondition if you get a chance, a quick review or running it locally to spot if I broke anything would be appreciated. Thanks

Some properties for typedefs are actually optional. Use the correct jsdoc syntax.

yanfali · 2024-11-07T20:34:59Z

src/store/modules/keymap.js

@@ -1,12 +1,14 @@
 import Vue from 'vue';
-import random from 'lodash/random';


remove a lot of dependencies on lodash, as a lot of this stuff is built in now

yanfali · 2024-11-07T20:36:15Z

I added some jsdoc for some of the hairy parts, and documented some of the internal types used inside the keycode JSON.

precondition · 2024-11-08T09:19:56Z

Oh shoot, I planned to take a look at this later today.

yanfali · 2024-11-08T18:02:21Z

Oh shoot, I planned to take a look at this later today.

No worries. Any feedback you have is appreciated. Please check I didn't break anything on the deployed code. Thank you!

precondition

I pointed out a few typos but I did not notice any regressions. However, during testing, I did uncover a pre-existing bug in the match count feature.

precondition · 2024-11-08T18:35:13Z

src/store/keycodes.js

+}
+
+/**
+ * Used to dynamically generate the tab data for they keycode


Suggested change

* Used to dynamically generate the tab data for they keycode

* Used to dynamically generate the tab data for the keycode

precondition · 2024-11-08T18:36:17Z

src/store/keycodes.js

+ *
+ * @param {string} osKeyboardLayout
+ * @param {boolean} isSteno
+ * @returns {Array.<KeycodeDefinition|KeycodeLabel|WidthPlaceholder}


Suggested change

* @returns {Array.<KeycodeDefinition|KeycodeLabel|WidthPlaceholder}

* @returns {Array.<KeycodeDefinition|KeycodeLabel|WidthPlaceholder>}

precondition · 2024-11-08T20:11:08Z

src/store/keycodes.js

+    setSearchFilter(newVal) {
+      this.searchFilter = newVal;
+      if (this.searchFilter !== '') {
+        this.searchCounters = {
+          ANSI: countMatches(this.searchFilter, ansi),
+          'ISO/JIS': countMatches(this.searchFilter, iso_jis),
+          Quantum: countMatches(this.searchFilter, quantum),
+          KeyboardSettings: countMatches(this.searchFilter, settings),
+          AppMediaMouse: countMatches(this.searchFilter, media)
+        };
+      }
+    }


This is a pre-existing issue but the collections passed to countMatches (ansi, iso_jis, etc.) are read-only variables imported from ./modules/keycodes/###. Consequently, these keycode collections are not localized at all causing incorrect match counts to be reported.

For example, if I search for "ß" with the German OS layout, the ß key will be highlighted but the count in both ANSI and ISO tabs will be "(0)". Same story if I search for "Y" with the German OS layout; DE_Y and KC_Y (=DE_Z) are both highlighted but the ANSI tab will only report a single match because it successfully finds a "Y" in the uppercase version of KC_Y's name but KC_Z aka DE_Y has "Z" as its name in the ansi variable so the countMatches does not count it.

The solution would be to map the toLocalKeycode on each collection before passing it to the countMatches. I'll open a separate issue and open a PR for a possible implementation.

EDIT: See issue #1372

Good catch.

precondition · 2024-11-08T20:16:23Z

src/store/keycodes.js

+ * @typedef {Object} WidthPlaceholder - used for spacing
+ * @property {number} width - width in Key Units * 1000. e.g. 1U = 1000, 2U = 2000.
+ */
+
+/**
+ * @typedef {Object} KeycodeDefinition - metadata about a keycode
+ * @property {string} name - UI display label for the keycode
+ * @property {string} code - QMK keycode defintion
+ * @property {string} [keys] - javascript keypress id. Used by keyboard handler
+ * @property {number} [width] - width in Key Units * 1000. e.g. 1U = 1000, 2U = 2000.


Suggested change

* @typedef {Object} WidthPlaceholder - used for spacing

* @property {number} width - width in Key Units * 1000. e.g. 1U = 1000, 2U = 2000.

*/

/**

* @typedef {Object} KeycodeDefinition - metadata about a keycode

* @property {string} name - UI display label for the keycode

* @property {string} code - QMK keycode defintion

* @property {string} [keys] - javascript keypress id. Used by keyboard handler

* @property {number} [width] - width in Key Units * 1000. e.g. 1U = 1000, 2U = 2000.

* @typedef {Object} WidthPlaceholder - used for spacing

* @property {number} width - width in Key Units * 1000. e.g. 1U = 1000, 2U = 2000

*/

/**

* @typedef {Object} KeycodeDefinition - metadata about a keycode

* @property {string} name - UI display label for the keycode

* @property {string} code - QMK keycode definition

* @property {string} [keys] - javascript keypress id. Used by keyboard handler

* @property {number} [width] - width in Key Units * 1000. e.g. 1U = 1000, 2U = 2000

Typo + inconsistent use of trailing period

precondition · 2024-11-08T20:18:16Z

src/store/keycodes.js

+/**
+ * @typedef {Object} KeycodeStoreState
+ * @property {Array.<KeycodeDefinition|KeycodeLabel|WidthPlaceholder>} keycodes - active keycodes
+ * @property {string} searchFilter - currently search filter


Suggested change

* @property {string} searchFilter - currently search filter

* @property {string} searchFilter - current query in the keycode picker search bar

precondition · 2024-11-08T20:21:20Z

src/store/modules/app/actions.js

-    this.commit('keycodes/updateKeycodeNames');
+    const keycodesStore = useKeycodesStore();
+
+    // Important to call keycodes/updatekeycodeNames *before* keymap/updateKeycodeNames.


Suggested change

// Important to call keycodes/updatekeycodeNames *before* keymap/updateKeycodeNames.

// Important to call keycodesStore.updateKeycodeNames *before* keymap/updateKeycodeNames.

Updating the comment to reflect changes to the call signature

yanfali added 6 commits November 5, 2024 09:55

chore: add some error handling to path

03e1943

chore: remove some lodash

0a50723

- partial - values - no need to spread default exports

chore: remove more uses of lodash

300ec3f

chore: wip - keycode store to pinia

bdcda9d

chore: remove more vuex keycodes store and replace

43389b7

chore: replace uses of vuex keycodes store

0ad67a0

- replace all uses of vuex keycodes store with pinia - fix ergo keyboard menu

yanfali marked this pull request as ready for review November 5, 2024 22:45

yanfali requested a review from noroadsleft November 5, 2024 22:47

yanfali changed the title ~~more pinia updates~~ Convert vuex/keycodes store to pinia Nov 5, 2024

yanfali added 4 commits November 6, 2024 13:48

chore: simplify conditionals

4320f88

chore: simplify conditional using ?

51546e1

chore: add jsdoc and types

9005eb5

chore: mark which properties are optional

c4a40eb

Some properties for typedefs are actually optional. Use the correct jsdoc syntax.

yanfali commented Nov 7, 2024

View reviewed changes

yanfali merged commit 76009c0 into master Nov 7, 2024
4 checks passed

yanfali deleted the pinia-2 branch November 7, 2024 20:37

precondition reviewed Nov 8, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert vuex/keycodes store to pinia #1370

Convert vuex/keycodes store to pinia #1370

yanfali commented Nov 5, 2024 •

edited

Loading

yanfali commented Nov 5, 2024

yanfali Nov 7, 2024

yanfali commented Nov 7, 2024

precondition commented Nov 8, 2024

yanfali commented Nov 8, 2024

precondition left a comment

precondition Nov 8, 2024

precondition Nov 8, 2024

precondition Nov 8, 2024 •

edited

Loading

yanfali Nov 8, 2024

precondition Nov 8, 2024

precondition Nov 8, 2024

precondition Nov 8, 2024

		@@ -1,12 +1,14 @@
		import Vue from 'vue';
		import random from 'lodash/random';

	* Used to dynamically generate the tab data for they keycode
	* Used to dynamically generate the tab data for the keycode

	* @returns {Array.<KeycodeDefinition\|KeycodeLabel\|WidthPlaceholder}
	* @returns {Array.<KeycodeDefinition\|KeycodeLabel\|WidthPlaceholder>}

	* @property {string} searchFilter - currently search filter
	* @property {string} searchFilter - current query in the keycode picker search bar

	// Important to call keycodes/updatekeycodeNames before keymap/updateKeycodeNames.
	// Important to call keycodesStore.updateKeycodeNames before keymap/updateKeycodeNames.

Convert vuex/keycodes store to pinia #1370

Convert vuex/keycodes store to pinia #1370

Conversation

yanfali commented Nov 5, 2024 • edited Loading

Description

yanfali commented Nov 5, 2024

yanfali Nov 7, 2024

Choose a reason for hiding this comment

yanfali commented Nov 7, 2024

precondition commented Nov 8, 2024

yanfali commented Nov 8, 2024

precondition left a comment

Choose a reason for hiding this comment

precondition Nov 8, 2024

Choose a reason for hiding this comment

precondition Nov 8, 2024

Choose a reason for hiding this comment

precondition Nov 8, 2024 • edited Loading

Choose a reason for hiding this comment

yanfali Nov 8, 2024

Choose a reason for hiding this comment

precondition Nov 8, 2024

Choose a reason for hiding this comment

precondition Nov 8, 2024

Choose a reason for hiding this comment

precondition Nov 8, 2024

Choose a reason for hiding this comment

yanfali commented Nov 5, 2024 •

edited

Loading

precondition Nov 8, 2024 •

edited

Loading