fix: override sdtools loadConfiguration to prevent null classList errors#14
fix: override sdtools loadConfiguration to prevent null classList errors#14billrice wants to merge 3 commits into
Conversation
When multiple buttons are configured, sdtools.common.js loadConfiguration iterates over settings keys and calls getElementById to populate form fields. Since pi.html uses Vue v-model bindings without matching element IDs, each lookup returns null, causing null.classList TypeError. Override loadConfiguration with a no-op after sdtools is loaded, letting Vue handle all data binding and eliminating the console errors.
There was a problem hiding this comment.
Pull request overview
This PR prevents sdtools.common.js from attempting to auto-populate form fields in pi.html (which relies on Vue v-model bindings rather than element IDs), avoiding null.classList runtime errors in the Property Inspector.
Changes:
- Overrides
loadConfigurationwith a no-op aftersdtools.common.jsloads so Vue exclusively handles data binding.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/barraider/streamdeck-easypi@latest/src/sdpi.css"> | ||
| <script src="https://cdn.jsdelivr.net/gh/barraider/streamdeck-easypi@latest/src/sdtools.common.js"></script> | ||
| <script> | ||
| // Vue.js 负责数据绑定,禁用 sdtools 的自动表单填充,避免找不到 DOM 元素时报错 |
There was a problem hiding this comment.
The new inline comment is in Chinese while the rest of this property inspector (labels/buttons) and repo metadata (e.g., resources/manifest.json) are in English. To keep the codebase consistent and maintainable for all contributors, please translate this comment to English (or make it bilingual).
| // Vue.js 负责数据绑定,禁用 sdtools 的自动表单填充,避免找不到 DOM 元素时报错 | |
| // Vue.js handles data binding; disable sdtools automatic form population to avoid errors when DOM elements are not found |
There was a problem hiding this comment.
Code Review
This pull request modifies resources/pi/pi.html to override the loadConfiguration function, preventing sdtools from performing automatic form filling that might conflict with Vue.js data binding. The reviewer suggested translating the Chinese code comment into English for consistency and updating the function signature to include the settings parameter to better align with the expected API.
| <script> | ||
| // Vue.js 负责数据绑定,禁用 sdtools 的自动表单填充,避免找不到 DOM 元素时报错 | ||
| function loadConfiguration() {} | ||
| </script> |
There was a problem hiding this comment.
The code comment is in Chinese, whereas the rest of the project (including the Go source code, manifest, and PR description) is in English. To maintain consistency and ensure the codebase is accessible to all contributors, it is recommended to use English for comments. Furthermore, the loadConfiguration function is typically called with a settings parameter by the sdtools library. Including this parameter in your override, even if unused, makes the code more robust and better documents the expected API.
<script>
// Vue.js handles data binding; override loadConfiguration to prevent DOM errors from sdtools
function loadConfiguration(settings) {}
</script>…e@v2, add contents write permission
When multiple buttons are configured, sdtools.common.js loadConfiguration iterates over settings keys and calls getElementById to populate form fields. Since pi.html uses Vue v-model bindings without matching element IDs, each lookup returns null, causing null.classList TypeError.
Override loadConfiguration with a no-op after sdtools is loaded, letting Vue handle all data binding and eliminating the console errors.