feat: migrate from PhosphorJS to Lumino (#14320)

Migrate from the deprecated @phosphor packages to the actively
maintained @Lumino fork across the entire codebase.

- Replace all @phosphor package imports with @Lumino equivalents
- Share Lumino packages instead of PhosphorJS packages
- Update CSS selectors from .p- to .lm- class prefixes
- Adapt code to Lumino's API changes (e.g. using iconClass instead of
  class in commands)
- Adapt code to Lumino's behavior and CSS changes (e.g. empty menu
  behavior and focus CSS)
- Add Lumino patch for secondary window support
- Introduce a testing package to setup tests for Lumino codebase

Adopters will need to update their imports to use @Lumino instead,
update any custom CSS selectors and potentially adapt their code base.

Contributed on behalf of STMicroelectronics

Co-authored-by: Thomas Mäder <[email protected]>

Author: sdirix

CHANGELOG.md

@@ -4,11 +4,13 @@
 
 - [Previous Changelogs](https://github.com/eclipse-theia/theia/tree/master/doc/changelogs/)
 
-## 1.60.0
+## 1.60.0 - not yet released
 
 <a name="breaking_changes_1.60.0">[Breaking Changes:](#breaking_changes_1.60.0)</a>
 
 - [core] fixed version `@types/express` to `^4.17.21` and `@types/express-serve-static-core` to `5.0.4`. This might be required for adopters as well if they run into typing issues. [#15147](https://github.com/eclipse-theia/theia/pull/15147)
+- [core] migration from deprecated `phosphorJs` to actively maintained fork `Lumino` [#14320](https://github.com/eclipse-theia/theia/pull/14320) - Contributed on behalf of STMicroelectronics
+  Adopters importing `@phosphor` packages now need to import from `@lumino`. CSS selectors refering to `.p-` classes now need to refer to `.lm-` classes. There are also minor code adaptations, for example now using `iconClass` instead of `icon` in Lumino commands.
 
 ## 1.59.0 - 02/27/2025
 

configs/mocharc.yml

@@ -1,6 +1,7 @@
 require:
   - 'ignore-styles'
   - 'reflect-metadata/Reflect'
+  - '@theia/test-setup'
 reporter: 'spec'
 watch-files:
     - '**/*.js'

dev-packages/cli/patches/@lumino+widgets+2.5.0.patch

@@ -49,7 +49,7 @@ export default async function runTest(options: TestOptions): Promise<void> {
             // When launching in non-headless mode (with a UI and dev-tools open), make sure
             // the app has focus, to avoid failures of tests that query the UI's state.
             if (launch && launch.devtools) {
-                promises.push(testPage.waitForSelector('#theia-app-shell.p-Widget.theia-ApplicationShell')
+                promises.push(testPage.waitForSelector('#theia-app-shell.lm-Widget.theia-ApplicationShell')
                     .then(e => {
                         // eslint-disable-next-line no-null/no-null
                         if (e !== null) {

dev-packages/cli/patches/@phosphor+widgets+1.9.3.patch

@@ -0,0 +1,32 @@
+<div align='center'>
+
+<br />
+
+<img src='https://raw.githubusercontent.com/eclipse-theia/theia/master/logo/theia.svg?sanitize=true' alt='theia-ext-logo' width='100px' />
+
+<h2>ECLIPSE THEIA - TEST SETUP</h2>
+
+<hr />
+
+</div>
+
+## Description
+
+The `@theia/test-setup` contributes a setup script for mocha executed tests in Theia.
+This setup script is executed before any test file is loaded or compiled.
+This is for example useful for globals which must exist before dependencies are loaded.
+
+## Additional Information
+
+- [Theia - GitHub](https://github.com/eclipse-theia/theia)
+- [Theia - Website](https://theia-ide.org/)
+
+## License
+
+-   [Eclipse Public License 2.0](http://www.eclipse.org/legal/epl-2.0/)
+-   [一 (Secondary) GNU General Public License, version 2 with the GNU Classpath Exception](https://projects.eclipse.org/license/secondary-gpl-2.0-cp)
+
+## Trademark
+
+"Theia" is a trademark of the Eclipse Foundation
+https://www.eclipse.org/theia

dev-packages/cli/src/run-test.ts

@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "name": "@theia/test-setup",
+  "version": "1.59.0",
+  "description": "Custom setup for mocha tests",
+  "main": "test-setup.js"
+}

dev-packages/private-test-setup/README.md

@@ -0,0 +1,18 @@
+// *****************************************************************************
+// Copyright (C) 2024 STMicroelectronics and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+// Mock DragEvent as '@lumino/dragdrop' already requires it at require time
+global.DragEvent = class DragEvent { };

dev-packages/private-test-setup/package.json

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { injectable, ContainerModule } from '@theia/core/shared/inversify';
-import { Menu as MenuWidget } from '@theia/core/shared/@phosphor/widgets';
+import { Menu as MenuWidget } from '@theia/core/shared/@lumino/widgets';
 import { Disposable } from '@theia/core/lib/common/disposable';
 import { MenuNode, CompoundMenuNode, MenuPath } from '@theia/core/lib/common/menu';
 import { BrowserMainMenuFactory, MenuCommandRegistry, DynamicMenuWidget, BrowserMenuOptions } from '@theia/core/lib/browser/menu/browser-menu-plugin';
@@ -74,7 +74,7 @@ class SampleMenuCommandRegistry extends MenuCommandRegistry {
         return this.addCommand(id, {
             execute: () => { /* NOOP */ },
             label: menu.label,
-            icon: menu.icon,
+            iconClass: menu.icon,
             isEnabled: () => false,
             isVisible: () => true
         });

dev-packages/private-test-setup/test-setup.js

@@ -29,7 +29,7 @@ import { inject, injectable, interfaces } from '@theia/core/shared/inversify';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { WorkspaceService } from '@theia/workspace/lib/browser';
 import { PreferenceItem, PreferenceValidationService } from '@theia/core/lib/browser';
-import { JSONValue } from '@theia/core/shared/@phosphor/coreutils';
+import { JSONValue } from '@theia/core/shared/@lumino/coreutils';
 import { JsonType } from '@theia/core/lib/common/json-schema';
 import { editorOptionsRegistry } from '@theia/monaco-editor-core/esm/vs/editor/common/config/editorOptions';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';