Refactor: Replace jQuery UI with Svelte components #97
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit completes the migration of the GCodeViewer UI from jQuery and
jQuery UI to a modern Svelte-based component architecture.
Key changes include:
- **Svelte Environment:** Introduced Svelte, Rollup for building, and a new
project structure under `src/` for Svelte components and `public/` for
the application entry point (`public/index.html`).
- **Component-Based UI:** Reimplemented all major UI elements as Svelte
components, including:
- Accordions, Tabs, Sliders (vertical and horizontal)
- Modals, Dropdowns, Buttons, Progress Bars
- File Uploader (with drag & drop)
- Information display panels (ModelInfo, LayerInfo)
- Options panels (2D Render, Analyzer, Printer Info)
- Notification system
- CodeMirror integration for G-code preview
- **Application Orchestration:** `App.svelte` serves as the main application
component, managing state, component interactions, and communication with
the original G-code processing logic.
- **jQuery Removal:**
- All direct jQuery DOM manipulations and event handling in `js/ui.js`
have been replaced with Svelte's reactive mechanisms.
- `js/ui.js` is no longer used or loaded.
- Script tags for `jquery`, `jquery-ui`, and `bootstrap.js` (jQuery
dependent) have been removed from the main HTML.
- CSS for jQuery UI has been removed. (Bootstrap CSS is retained for
general styling).
- **Integration:** The Svelte application now loads the original G-code
processing scripts (`gCodeReader.js`, `renderer.js`, etc.) and interacts
with them via the global `GCODE` object. I handle G-code analysis communication within `App.svelte`.
- **Modernization:** Includes improved accessibility in some components and
a more maintainable, reactive codebase. Browser capability checks are
performed on load, with notifications for missing features.
This refactoring aims to improve the maintainability, performance, and
developer experience of the GCodeViewer frontend.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This commit completes the migration of the GCodeViewer UI from jQuery and jQuery UI to a modern Svelte-based component architecture.
Key changes include:
Svelte Environment: Introduced Svelte, Rollup for building, and a new project structure under
src/for Svelte components andpublic/for the application entry point (public/index.html).Component-Based UI: Reimplemented all major UI elements as Svelte components, including:
Application Orchestration:
App.svelteserves as the main application component, managing state, component interactions, and communication with the original G-code processing logic.jQuery Removal:
js/ui.jshave been replaced with Svelte's reactive mechanisms.js/ui.jsis no longer used or loaded.jquery,jquery-ui, andbootstrap.js(jQuery dependent) have been removed from the main HTML.Integration: The Svelte application now loads the original G-code processing scripts (
gCodeReader.js,renderer.js, etc.) and interacts with them via the globalGCODEobject. I handle G-code analysis communication withinApp.svelte.Modernization: Includes improved accessibility in some components and a more maintainable, reactive codebase. Browser capability checks are performed on load, with notifications for missing features.
This refactoring aims to improve the maintainability, performance, and developer experience of the GCodeViewer frontend.