G4E-9779 - Fixed vite build errors. Updated all packages to the latest official ones. by galin-iliev · Pull Request #27 · InteropIO/templates

galin-iliev · 2026-04-03T11:07:46Z

Summary
Updates the io-connect-desktop-components template to align with the latest @interopio/components-react v4.3.0 and fixes build failures introduced after the migration to Vite.

Dependency Updates

@interopio/components-react: ^0.5.1 → ~4.3.0
@interopio/desktop: ^6.8.3 → ~6.16.0
@interopio/react-hooks: ^3.4.5 → ~4.3.0
@interopio/theme: ^2.2.19 → ~4.3.0
typescript: ^4.9.5 → ~5.8.2
@types/node: ^16.18.25 → ~20.12.7
Lockfile upgraded to version 3; added "type": "module" to package.json

Build / Vite Fixes

index.html: Updated to standard Vite format; script entry changed from src/index.tsx to main.tsx
Renamed index.tsx → main.tsx; wrapped app in StrictMode
Added vite-env.d.ts for Vite client type declarations
tsconfig.json: Migrated to bundler/ESNext mode (moduleDetection: force, isolatedModules, noUnusedParameters)
vite.config.ts: Added commonjsOptions to properly bundle @interopio/components-react and node_modules
Pinned dev server to localhost:5175

Component API Migrations

ChannelSelector: restrictedChannels → lockedChannelRestrictions; typed ref as useRef
Dialogs: Added support for the new requestDialog operation via a new DialogRenderer component using DEFAULT_DIALOG_TEMPLATES
LayoutModified: Refactored to use useMemo for stable JSX trees; buttons extracted to a config array
DownloadManager / Feedback: Simplified by removing intermediate inner components
Notifications (Toasts): Integrated NotificationsPanelProvider / useNotificationsPanelContext replacing the inline isPanelVisible from useNotificationsContext; improved error handling in panel lifecycle
Notifications (Panel / Toasts): Updated CSS imports (dropdownmenu.css → dropdown-menu.css, added overlay-scrollbars-container.css)

New Features

Added Alerts component (/alerts route) with IOAlerts.AlertsProvider + IOAlerts.Alert
Added wildcard * route for 404 handling in the router
Added CSS layout fixes for Panel and Toasts windows

Code Quality

Updated .prettierrc with semi, trailingComma, and printWidth; added .prettierignore
Removed unused useEffect title-setting calls and simplified lazy imports in App.tsx

…t official ones.

Copilot

Pull request overview

Updates the io-connect-desktop-components Vite template to build successfully after migrating to Vite and to align component usage with @interopio/components-react v4.3.0 and related Interop packages.

Changes:

Updated Vite/TypeScript project setup (Vite config, index.html, new main.tsx, vite-env.d.ts, tsconfig adjustments).
Migrated multiple example windows/components to new Interop component APIs (Notifications, Dialogs, ChannelSelector, etc.) and added an Alerts example route.
Updated formatting/tooling files (Prettier config/ignore) and refreshed dependencies + lockfile.

Reviewed changes

Copilot reviewed 22 out of 25 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
io-connect-desktop-components/vite.config.ts	Adds dev server host/port and CommonJS bundling options to address Vite build issues.
io-connect-desktop-components/tsconfig.json	Moves to ESNext/isolatedModules-oriented TS config and includes `vite.config.ts` in typechecking.
io-connect-desktop-components/src/vite-env.d.ts	Adds Vite client type references.
io-connect-desktop-components/src/main.tsx	New Vite-style entrypoint with `StrictMode` + React 18 root.
io-connect-desktop-components/src/index.tsx	Removes old entrypoint in favor of `main.tsx`.
io-connect-desktop-components/src/components/Notifications/Toasts.tsx	Updates Notifications Toasts integration to new Notifications panel context/provider and refines panel lifecycle.
io-connect-desktop-components/src/components/Notifications/Toasts.css	Adds root sizing/overflow rules for the Toasts window.
io-connect-desktop-components/src/components/Notifications/Panel.tsx	Updates Notifications Panel integration and related CSS imports.
io-connect-desktop-components/src/components/Notifications/Panel.css	Adds root sizing and panel positioning fixes.
io-connect-desktop-components/src/components/Feedback/Feedback.tsx	Simplifies Feedback wrapper (removes unnecessary inner component).
io-connect-desktop-components/src/components/DownloadManager/DownloadManager.tsx	Simplifies DownloadManager wrapper and updates required CSS imports.
io-connect-desktop-components/src/components/Dialogs/LayoutModified.tsx	Refactors dialog layout to use memoized body and config-driven buttons; renames component export.
io-connect-desktop-components/src/components/Dialogs/Dialogs.tsx	Adds support for template-driven `requestDialog` rendering and simplifies operation handling.
io-connect-desktop-components/src/components/Dialogs/DialogRenderer.tsx	Introduces a wrapper around the new DialogRenderer using default templates.
io-connect-desktop-components/src/components/Dialogs/DialogRenderer.css	Adds full-window layout styling for the template-based dialog renderer.
io-connect-desktop-components/src/components/ChannelSelector/ChannelSelector.tsx	Migrates to `lockedChannelRestrictions` and tightens ref typing.
io-connect-desktop-components/src/components/Alerts/Alerts.tsx	Adds new Alerts example window/component.
io-connect-desktop-components/src/components/Alerts/Alerts.css	Adds full-window layout styling for Alerts.
io-connect-desktop-components/src/App.tsx	Adds `/alerts` route, wildcard route, and simplifies lazy imports/Suspense usage.
io-connect-desktop-components/package.json	Adds ESM mode, updates dependency versions, and adds a lint script.
io-connect-desktop-components/index.html	Updates to standard Vite HTML entry and points to `/src/main.tsx`.
io-connect-desktop-components/.prettierrc	Updates Prettier options (semi/trailingComma/printWidth).
io-connect-desktop-components/.prettierignore	Adds common output folders to Prettier ignore list.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-03T11:34:32Z

io-connect-desktop-components/package.json

  "scripts": {
    "start": "vite",
    "build": "tsc -b && vite build",
+    "lint": "eslint .",
    "preview": "vite preview"


lint script runs eslint ., but this package doesn't declare eslint (or related config/plugins) in dependencies/devDependencies, and it's not present in the lockfile. npm run lint will fail unless eslint is installed globally/externally; add the needed devDependencies or remove/adjust the script.

io-connect-desktop-components/package.json

Copilot · 2026-04-03T11:34:33Z

io-connect-desktop-components/package.json

  "dependencies": {
-    "@interopio/components-react": "^0.5.1",
-    "@interopio/desktop": "^6.8.3",
-    "@interopio/react-hooks": "^3.4.5",
-    "@interopio/theme": "^2.2.19",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@types/node": "^16.18.25",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.10.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.5.5",
-    "web-vitals": "^2.1.4"
+    "@interopio/components-react": "~4.3.0",
+    "@interopio/desktop": "~6.16.0",
+    "@interopio/react-hooks": "~4.3.0",
+    "@interopio/theme": "~4.3.0",
+    "@rollup/plugin-terser": "~0.4.3",
+    "@types/node": "~20.12.7",
+    "@types/react": "~18.2.79",
+    "@types/react-dom": "~18.2.25",
+    "@vitejs/plugin-react": "~3.0.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "react-router-dom": "~6.10.0",
+    "typescript": "~5.8.2",
+    "vite": "~4.0.1",
+    "web-vitals": "~0.2.4"


PR title/description says packages were updated to the latest, but several non-Interop dependencies were downgraded (e.g. vite ^4.5.5 → ~4.0.1 and web-vitals ^2.1.4 → ~0.2.4). If these downgrades are intentional (e.g. compatibility), please clarify in the PR description; otherwise consider bumping them to current supported versions.

Copilot · 2026-04-03T11:34:33Z

io-connect-desktop-components/src/components/Dialogs/Dialogs.tsx

-    (config.operation === "systemShutdown" ||
-      config.operation === "systemRestart" ||
-      config.operation === "layoutRestore");
+  const isLayoutModified = Boolean((context as any).isLayoutModified);


context is destructured with a default (context = {}), but the default only applies when config.context is undefined. If config.context can be null (which the previous type-guarded logic handled), Boolean((context as any).isLayoutModified) will throw at runtime. Consider using optional chaining or a type guard (e.g. Boolean((context as any)?.isLayoutModified)) to keep this safe for null/non-object contexts.

Suggested change

const isLayoutModified = Boolean((context as any).isLayoutModified);

const isLayoutModified = Boolean((context as any)?.isLayoutModified);

G4E-9779 - Fixed vite build errors. Updated all packages to the lates…

32977d2

…t official ones.

galin-iliev requested a review from SvetozarMateev April 3, 2026 11:07

SvetozarMateev requested a review from Copilot April 3, 2026 11:28

Copilot started reviewing on behalf of SvetozarMateev April 3, 2026 11:29 View session

Copilot AI reviewed Apr 3, 2026

View reviewed changes

Address PR feedback.

054fe92

SvetozarMateev approved these changes Apr 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

G4E-9779 - Fixed vite build errors. Updated all packages to the latest official ones.#27

G4E-9779 - Fixed vite build errors. Updated all packages to the latest official ones.#27
galin-iliev wants to merge 2 commits intomainfrom
bugfix/G4E-9779-update-io-connect-desktop-components

galin-iliev commented Apr 3, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 3, 2026

Uh oh!

Uh oh!

Copilot AI Apr 3, 2026

Uh oh!

Copilot AI Apr 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	const isLayoutModified = Boolean((context as any).isLayoutModified);
	const isLayoutModified = Boolean((context as any)?.isLayoutModified);

Conversation

galin-iliev commented Apr 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants