Context
When running skybridge dev, if a widget file is missing its export default or if the name passed to registerWidget() doesn't match the widget filename (e.g. registerWidget("search-product") vs web/src/widgets/search.tsx), the app fails silently.
The validateWidget function in the Vite plugin does check for missing export default and mountWidget() calls, but it uses this.warn() in the transform hook, which only surfaces during production builds (npm run build).
The name mismatch between registerWidget and the actual widget filename isn't validated at all.
Expected behaviour
Developers should get clear feedback in dev when:
- A widget file is missing export default or mountWidget()
- The name in registerWidget("some-name") doesn't match any file in web/src/widgets/
- Other rules specific to Skybridge framework being broken
Suggested fix
I can see two options here:
-
Dev server validation: run the existing validation checks at skybridge dev startup and on file change + check registerWidget names against widget files.
-
ESLint plugin (eslint-plugin-skybridge): lint rules that catch these issues directly in the editor. This would create a shorter feedback loop, particularly helpful for AI coding agents that can run eslint and parse the output. Heavier to set up though.
Context
When running
skybridge dev, if a widget file is missing itsexport defaultor if the name passed toregisterWidget()doesn't match the widget filename (e.g.registerWidget("search-product")vsweb/src/widgets/search.tsx), the app fails silently.The validateWidget function in the Vite plugin does check for missing export default and mountWidget() calls, but it uses this.warn() in the transform hook, which only surfaces during production builds (npm run build).
The name mismatch between registerWidget and the actual widget filename isn't validated at all.
Expected behaviour
Developers should get clear feedback in dev when:
Suggested fix
I can see two options here:
Dev server validation: run the existing validation checks at skybridge dev startup and on file change + check registerWidget names against widget files.
ESLint plugin (eslint-plugin-skybridge): lint rules that catch these issues directly in the editor. This would create a shorter feedback loop, particularly helpful for AI coding agents that can run eslint and parse the output. Heavier to set up though.