{title}
-
+
);
};
diff --git a/src/formatter-settings/assets/features/formatterSettings/components/Highlight.tsx b/src/formatter-settings/assets/features/formatterSettings/components/Highlight.tsx
index 72440a68..e144a377 100644
--- a/src/formatter-settings/assets/features/formatterSettings/components/Highlight.tsx
+++ b/src/formatter-settings/assets/features/formatterSettings/components/Highlight.tsx
@@ -1,7 +1,6 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import * as React from "react";
import hljs from "highlight.js";
import "../../../../../../webview-resources/highlight.css";
diff --git a/src/formatter-settings/assets/features/formatterSettings/components/Setting.tsx b/src/formatter-settings/assets/features/formatterSettings/components/Setting.tsx
index 54505c9c..e3410f8c 100644
--- a/src/formatter-settings/assets/features/formatterSettings/components/Setting.tsx
+++ b/src/formatter-settings/assets/features/formatterSettings/components/Setting.tsx
@@ -1,11 +1,9 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import checkIcon from "@iconify-icons/codicon/check";
-import chevronDownIcon from "@iconify-icons/codicon/chevron-down";
-import { Icon } from "@iconify/react";
-import React from "react";
-import { Dropdown, Form } from "react-bootstrap";
+import "@vscode-elements/elements/dist/vscode-single-select/index.js";
+import "@vscode-elements/elements/dist/vscode-option/index.js";
+
import { useSelector } from "react-redux";
import { VSCodeSettings } from "../../../../FormatterConstants";
import { Category, ExampleKind, JavaFormatterSetting, ValueKind } from "../../../../types";
@@ -29,8 +27,8 @@ const Setting = (): JSX.Element => {
onWillChangeSetting(e.target.id, e.target.value);
};
- const handleSelect = (setting: JavaFormatterSetting, entry: string) => {
- onWillChangeSetting(setting.id, entry);
+ const handleSelect = (setting: JavaFormatterSetting, value: string) => {
+ onWillChangeSetting(setting.id, value);
};
const handleClick = (exampleKind: ExampleKind) => {
@@ -41,55 +39,50 @@ const Setting = (): JSX.Element => {
if (!setting.name || !setting.id) {
return null;
}
- const candidates = [];
switch (setting.valueKind as ValueKind) {
case ValueKind.Boolean:
const willBeOverriden = detectIndentation && setting.id === VSCodeSettings.DETECT_INDENTATION;
return (
+
+
+ {title}
{readOnly && ()}
+
+
+ {naviBar}
+
+
+
+
+ {highlight(contentText)}
+ handleClick(setting.exampleKind)}>
-
-
-
-
+
);
case ValueKind.Enum:
if (!setting.candidates) {
return null;
}
- for (const candidate of setting.candidates) {
- candidates.push(
- {setting.name}.
- +
+
+
{willBeOverriden ? "When enabled, the indentation settings will be overriden based on the file contents." : ""} - +
{willBeOverriden ? "When enabled, the indentation settings will be overriden based on the file contents." : ""} - +
handleClick(setting.exampleKind)}>
{setting.name}.
-
-
- {setting.value}
-
-
- {candidates}
-
-
-
+ handleClick(setting.exampleKind)}>
- {setting.name}.
-
);
default:
diff --git a/src/formatter-settings/assets/index.tsx b/src/formatter-settings/assets/index.tsx
index 9a438ce6..b95c1a03 100644
--- a/src/formatter-settings/assets/index.tsx
+++ b/src/formatter-settings/assets/index.tsx
@@ -1,18 +1,18 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import "./style.scss";
import { App } from "./App";
import store from "./app/store";
-ReactDOM.render(
- Install New JDK
{/*reserved for introduction*/}
-After you finish JDK installation, please reload Visual Studio Code to make it effective.
- downloadJDK(asset)}>
+ downloadJDK(asset)}>
-
+
:
-
Download
@@ -88,21 +92,21 @@ const AdoptiumJDKPanel = () => {
-
+
{versionElements}
-
-
+
+
- hotspot
-
+ hotspot
+
{downloadPanel}
);
diff --git a/src/install-jdk/assets/features/components/OtherJDKsPanel.tsx b/src/install-jdk/assets/features/components/OtherJDKsPanel.tsx
index 6efc6430..9ca1b06f 100644
--- a/src/install-jdk/assets/features/components/OtherJDKsPanel.tsx
+++ b/src/install-jdk/assets/features/components/OtherJDKsPanel.tsx
@@ -1,13 +1,10 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
-import * as React from 'react';
import { encodeExternalLinkWithTelemetry } from '../../../../utils/webview';
import { WEBVIEW_ID } from '../../../constants';
-class OtherJDKsPanel extends React.Component {
- public render() {
+export default function OtherJDKsPanel() {
const jdkList = [
{ name: "Amazon Corretto", url: "https://aws.amazon.com/corretto" },
{ name: "Azul Zulu", url: "https://www.azul.com/downloads/?package=jdk" },
@@ -23,13 +20,9 @@ class OtherJDKsPanel extends React.Component {
-
{
- jdkList.map((jdk, idx) =>
{jdk.name} )
+ jdkList.map((jdk, idx) => - {jdk.name} ) }
{p.projectType}{projectTypeHint(p.projectType)}
- {p.sourceLevel}
- this.onClickEdit(p)} title="Edit">
-
- :
-
-
-
- Project Name
- Type
- Java Version
-
- {projectEntries}
-
- :
-
- );
- }
-
- onClickEdit = (p: ProjectRuntimeEntry) => {
+ const onClickEdit = (p: ProjectRuntimeEntry) => {
let scriptFile;
if (p.projectType === ProjectType.Maven) {
scriptFile = "pom.xml";
} else if (p.projectType === ProjectType.Gradle) {
scriptFile = "build.gradle";
}
-
if (scriptFile) {
openBuildScript(p.rootPath, scriptFile);
}
- }
+ };
- showHint = (projectType: any) => {
- this.setState({
- showHintFor: projectType
- });
- }
+ const projectEntries = projectRuntimes
+ .filter(p => p.projectType !== ProjectType.Default)
+ .map((p, index) => (
+ Configure Runtime for Projects
- {projectEntries.length > 0 &&Manage Java runtime for your projects. If you don't have a valid Java runtime, you can download one.
} - { - projectEntries.length > 0 ? -
- Refresh
-
- }
- No project detected yet. Please refresh later if Java extension is importing your projects.
-{p.projectType}{projectTypeHint(p.projectType)}
+ {p.sourceLevel}
+ onClickEdit(p)} title="Edit">
+
+ :
+
+
+
+ Project Name
+ Type
+ Java Version
+
+
+ {projectEntries}
+
+
+ :
+
+ );
}
function hasBuildTool(p: ProjectRuntimeEntry) {
return (p.projectType === ProjectType.Maven || p.projectType === ProjectType.Gradle);
-}
\ No newline at end of file
+}
diff --git a/src/java-runtime/assets/ToolingJDKPanel.tsx b/src/java-runtime/assets/ToolingJDKPanel.tsx
index d3ff18ff..947ed590 100644
--- a/src/java-runtime/assets/ToolingJDKPanel.tsx
+++ b/src/java-runtime/assets/ToolingJDKPanel.tsx
@@ -1,8 +1,9 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
-import * as React from "react";
+import "@vscode-elements/elements/dist/vscode-button/index.js";
+
+import { useState } from "react";
import { JavaRuntimeEntry } from "../types";
import { onWillBrowseForJDK, onWillRunCommandFromWebview } from './vscode.api';
@@ -14,38 +15,32 @@ interface Props {
javaHomeError?: any;
}
-interface State {
- isDirty?: boolean;
-}
+export function ToolingJDKPanel({ javaHomeError }: Props) {
+ const [isDirty, setIsDirty] = useState(false);
-export class ToolingJDKPanel extends React.ComponentConfigure Runtime for Projects
+ {projectEntries.length > 0 &&Manage Java runtime for your projects. If you don't have a valid Java runtime, you can download one.
} + { + projectEntries.length > 0 ? +
+ Refresh
+
+ }
+ No project detected yet. Please refresh later if Java extension is importing your projects.
+
-
- );
- }
-
- onClickBrowseJDKButton = () => {
+ const onClickBrowseJDKButton = () => {
onWillBrowseForJDK();
- this.setState({ isDirty: true });
- }
+ setIsDirty(true);
+ };
- onClickInstallButton = () => {
+ const onClickInstallButton = () => {
onWillRunCommandFromWebview("java.runtime", "download", "java.installJdk");
- }
+ };
+
+ return (
+ Configure Runtime for Language Server
-Java Language Server requires a JDK {REQUIRED_JDK_VERSION}+ to launch itself.
-
- {javaHomeError && ({javaHomeError}
)} - -
- Locate an Existing JDK
- {this?.state?.isDirty && Reload }
-
-
-
+
+ );
}
diff --git a/src/java-runtime/assets/components/DefaultJDKSelector.tsx b/src/java-runtime/assets/components/DefaultJDKSelector.tsx
index a2a53655..dbb0ad18 100644
--- a/src/java-runtime/assets/components/DefaultJDKSelector.tsx
+++ b/src/java-runtime/assets/components/DefaultJDKSelector.tsx
@@ -1,8 +1,9 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
-import * as React from "react";
+import "@vscode-elements/elements/dist/vscode-button/index.js";
+
+import { useState } from "react";
import { JavaRuntimeEntry, ProjectRuntimeEntry } from "../../types";
import { setDefaultRuntime } from "../vscode.api";
@@ -11,53 +12,30 @@ interface Props {
projectRuntime: ProjectRuntimeEntry;
}
-interface State {
- isEditing: boolean;
-}
-
-export class DefaultJDKSelector extends React.ComponentConfigure Runtime for Language Server
+Java Language Server requires a JDK {REQUIRED_JDK_VERSION}+ to launch itself.
+
+ {javaHomeError && ({javaHomeError}
)} + +
+ Locate an Existing JDK
+ {isDirty && Reload }
+
+
+
- { isEditing ?
-
- :
- {p.sourceLevel}
- }
- this.onClickEdit()} title="Edit">
-
- );
- }
+export function DefaultJDKSelector({ jdkEntries, projectRuntime: p }: Props) {
+ const [isEditing, setIsEditing] = useState(false);
- onSelectionChange = (event: React.ChangeEvent
+ {isEditing ?
+
+ :
+ {p.sourceLevel}
+ }
+ setIsEditing(true)} title="Edit">
+
+ );
+}
diff --git a/src/java-runtime/assets/components/ProjectTypeHint.tsx b/src/java-runtime/assets/components/ProjectTypeHint.tsx
index ce486a71..c36b39e9 100644
--- a/src/java-runtime/assets/components/ProjectTypeHint.tsx
+++ b/src/java-runtime/assets/components/ProjectTypeHint.tsx
@@ -1,24 +1,12 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import * as React from "react";
-
interface Props {
projectType: "Maven" | "Gradle" | "Others" | undefined;
}
-export class ProjectTypeHint extends React.Component
- {this.hintContent()}
-
- );
- }
-
- hintContent = () => {
- const { projectType } = this.props;
+export function ProjectTypeHint({ projectType }: Props) {
+ const hintContent = () => {
switch (projectType) {
case "Maven":
return (
@@ -46,7 +34,6 @@ export class ProjectTypeHint extends React.Component
@@ -56,5 +43,11 @@ export class ProjectTypeHint extends React.Component {
default:
return undefined;
}
- }
-}
\ No newline at end of file
+ };
+
+ return (
+ = useDispatch();
+ const tabIds = ["source", "jdk", "libraries"];
+ const selectedIndex = Math.max(0, tabIds.indexOf(activeTab));
+
const onClickTab = (tabId: string) => {
dispatch(updateActiveTab(tabId));
};
@@ -41,22 +48,22 @@ const ClasspathConfigurationView = (): JSX.Element => {
return (
handleOpenBuildFile()}>{buildFile} file.
+ To make permanent changes, please edit the handleOpenBuildFile()}>{buildFile} file.
}
diff --git a/src/project-settings/assets/classpath/features/components/JdkRuntime.tsx b/src/project-settings/assets/classpath/features/components/JdkRuntime.tsx
index 1b741f38..216faaa6 100644
--- a/src/project-settings/assets/classpath/features/components/JdkRuntime.tsx
+++ b/src/project-settings/assets/classpath/features/components/JdkRuntime.tsx
@@ -1,9 +1,14 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import React, { Dispatch, useEffect, useRef, useState } from "react";
+import "@vscode-elements/elements/dist/vscode-divider/index.js";
+import "@vscode-elements/elements/dist/vscode-single-select/index.js";
+import "@vscode-elements/elements/dist/vscode-option/index.js";
+import "@vscode-elements/elements/dist/vscode-button/index.js";
+
+import { useCallback, useEffect, useRef } from "react";
import { ClasspathRequest, CommonRequest } from "../../../vscode/utils";
-import { VSCodeDivider, VSCodeDropdown, VSCodeOption, } from "@vscode/webview-ui-toolkit/react";
+
import { useDispatch, useSelector } from "react-redux";
import { VmInstall } from "../../../../types";
import { setJdks } from "../classpathConfigurationViewSlice";
@@ -19,29 +24,45 @@ const JdkRuntime = (): JSX.Element => {
const vmInstalls: VmInstall[] = useSelector((state: any) => state.classpathConfig.data.vmInstalls);
const activeVmInstallPath: string = useSelector((state: any) => state.classpathConfig.data.activeVmInstallPath[activeProjectIndex]);
- const [optionDescription, setOptionDescription] = useState
+ {hintContent()}
+
+ );
+}
diff --git a/src/java-runtime/assets/index.ts b/src/java-runtime/assets/index.ts
index 936a9838..a71ce3d0 100644
--- a/src/java-runtime/assets/index.ts
+++ b/src/java-runtime/assets/index.ts
@@ -1,13 +1,16 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
import "./style.scss";
import { ProjectJDKPanel } from "./ProjectJDKPanel";
import { onWillListRuntimes } from "./vscode.api";
import { ToolingJDKPanel } from "./ToolingJDKPanel";
+const container = document.getElementById("content")!;
+const root = createRoot(container);
+
const onInitialize = (event: any) => {
const { data } = event;
if (data.command === "showJavaRuntimeEntries") {
@@ -26,12 +29,12 @@ function showJavaRuntimeEntries(args: any) {
javaHomeError: args.javaHomeError,
javaDotHome: args.javaDotHome
};
- ReactDOM.render(React.createElement(ToolingJDKPanel, props), document.getElementById("content"));
+ root.render(createElement(ToolingJDKPanel, props));
} else {
const props = {
jdkEntries: args.javaRuntimes,
projectRuntimes: args.projectRuntimes,
}
- ReactDOM.render(React.createElement(ProjectJDKPanel, props), document.getElementById("content"));
+ root.render(createElement(ProjectJDKPanel, props));
}
}
diff --git a/src/project-settings/assets/classpath/features/ClasspathConfigurationView.tsx b/src/project-settings/assets/classpath/features/ClasspathConfigurationView.tsx
index 27bc10cf..2de30abe 100644
--- a/src/project-settings/assets/classpath/features/ClasspathConfigurationView.tsx
+++ b/src/project-settings/assets/classpath/features/ClasspathConfigurationView.tsx
@@ -1,7 +1,11 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import React, { useEffect } from "react";
+import "@vscode-elements/elements/dist/vscode-tabs/index.js";
+import "@vscode-elements/elements/dist/vscode-tab-header/index.js";
+import "@vscode-elements/elements/dist/vscode-tab-panel/index.js";
+
+import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Dispatch } from "@reduxjs/toolkit";
import Output from "./components/Output";
@@ -9,7 +13,7 @@ import Sources from "./components/Sources";
import Libraries from "./components/Libraries";
import { listVmInstalls, updateActiveTab } from "./classpathConfigurationViewSlice";
import JdkRuntime from "./components/JdkRuntime";
-import { VSCodePanelTab, VSCodePanelView, VSCodePanels } from "@vscode/webview-ui-toolkit/react";
+
import { ProjectType } from "../../../../utils/webview";
import UnmanagedFolderSources from "./components/UnmanagedFolderSources";
import Hint from "./components/Hint";
@@ -21,6 +25,9 @@ const ClasspathConfigurationView = (): JSX.Element => {
const projectType: ProjectType = useSelector((state: any) => state.commonConfig.data.projectType[activeProjectIndex]);
const dispatch: Dispatch
-
- onClickTab("source")}>Sources
- onClickTab("jdk")}>JDK Runtime
- onClickTab("libraries")}>Libraries
-
+
+ onClickTab("source")}>Sources
+ onClickTab("jdk")}>JDK Runtime
+ onClickTab("libraries")}>Libraries
+
{[ProjectType.Gradle, ProjectType.Maven].includes(projectType) && (
-
+
+
-
+
+
-
+
+
);
diff --git a/src/project-settings/assets/classpath/features/components/Hint.tsx b/src/project-settings/assets/classpath/features/components/Hint.tsx
index ac140ec9..bf00fb26 100644
--- a/src/project-settings/assets/classpath/features/components/Hint.tsx
+++ b/src/project-settings/assets/classpath/features/components/Hint.tsx
@@ -1,8 +1,7 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import { VSCodeLink} from "@vscode/webview-ui-toolkit/react";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
import { ClasspathEntry, ProjectInfo } from "../../../../types";
import { useSelector } from "react-redux";
import { ProjectType } from "../../../../../utils/webview";
@@ -59,7 +58,7 @@ const Hint = (): JSX.Element | null => {
{(projectType[activeProjectIndex] === ProjectType.Gradle || projectType[activeProjectIndex] === ProjectType.Maven) &&
'{projects[activeProjectIndex].name}' is imported by {projectType[activeProjectIndex]}, changes made to the classpath might be lost after reloading.
- To make permanent changes, please edit the
- Find a local JDK...
-
-
- Download a new JDK...
-
-
-
);
diff --git a/src/project-settings/assets/classpath/features/components/Libraries.tsx b/src/project-settings/assets/classpath/features/components/Libraries.tsx
index 9d9d4c77..d91ca066 100644
--- a/src/project-settings/assets/classpath/features/components/Libraries.tsx
+++ b/src/project-settings/assets/classpath/features/components/Libraries.tsx
@@ -1,12 +1,15 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
+import "@vscode-elements/elements/dist/vscode-button/index.js";
+import "@vscode-elements/elements/dist/vscode-divider/index.js";
+
import { Dispatch } from "@reduxjs/toolkit";
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { removeReferencedLibrary, addLibraries } from "../classpathConfigurationViewSlice";
import { ClasspathRequest } from "../../../vscode/utils";
-import { VSCodeButton, VSCodeDataGrid, VSCodeDataGridCell, VSCodeDataGridRow, VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
+
import { ClasspathEntry, ClasspathEntryKind } from "../../../../types";
const Libraries = (): JSX.Element => {
@@ -83,25 +86,23 @@ const Libraries = (): JSX.Element => {
let librariesSections: JSX.Element | JSX.Element[];
if (libraries.length === 0) {
librariesSections = (
-
- JDK:
-
+ JDK:
+
-
+ {vmInstalls.map((vmInstall) => (
+
+ {vmInstall.name}
+
+ ))}
+
+
+
-
- {jdkSelections}
- {optionDescription ?? activeVmInstallPath}
-
-
- {optionDescription ?? activeVmInstallPath}
-
+ {activeVmInstallPath}
+
+
+ ClasspathRequest.onWillAddNewJdk()}>
+
+ Find a local JDK...
+
+ CommonRequest.onWillExecuteCommand("java.installJdk")}>
+
+ Download a new JDK...
+
No libraries are configured.
-
+
);
} else {
librariesSections = libraries.map((library, index) => (
-
-
- {resolveLibPath(library)}
-
- {hoveredRow === `library-${index}` && (
- setHoveredRow(`library-${index}`)} onMouseLeave={() => setHoveredRow(null)} key={library.path}>
+
));
}
@@ -109,16 +110,14 @@ const Libraries = (): JSX.Element => {
+
+ {resolveLibPath(library)}
+
+
+ handleRemove(index)} title="Remove">
+
+
+
+
- handleAdd()}>
+ handleAdd()}>
Add Library...
-
+
-
-
- {librariesSections}
-
+ {librariesSections}
Output Path
-
+
+ );
};
- const getSourceRowComponents = (source: ClasspathEntry, index: number) => {
+ const renderSourceRow = (source: ClasspathEntry, index: number) => {
if (editRow === index) {
- return getEditRow(`sources-${index}`);
- } else {
- return (
-
+
+
+
+
+
+ handleBrowse("source")}>
-
-
-
-
- setEditingOutputPath(e.target.value)}>
- handleBrowse("output")}>
+
+
+
+
+
+
+
+
+ handleBrowse("output")}>
-
-
- handleOK()}>OK
- handleCancel()}>
- Cancel
-
-
-
- )
+
+
+
+ handleOK()}>OK
+ handleCancel()}>Cancel
+
+
- handleEdit(source.path, source.output || defaultOutput, index)}>
-
-
- handleRemove(source.path)}>
-
-
-
- setHoveredRow(rowId)}
+ onMouseLeave={() => setHoveredRow(null)}
+ >
+
+ );
};
return (
{source.path}
+
+ {source.output || defaultOutput}
+
+
+ handleEdit(source.path, source.output || defaultOutput, index)} title="Edit">
+
+
+ handleRemove(source.path)} title="Remove">
+
+
+
+
- handleAdd()}>
+ handleAdd()}>
Add Source Root...
-
+
-
-
-
-
- Path
-
-
- Output
-
-
- {getSourceSections()}
- {getAdditionalEditRow()}
-
+
-
+
+ {sources.length === 0 ? (
+ Path
+ Output
+ No source paths are configured.
+ ) : (
+ sources.map((source, index) => renderSourceRow(source, index))
+ )}
+ {editRow !== null && editRow >= sources.length && renderEditRow("sources-additional-editing")}
No source paths are configured.
-
+
);
} else {
sourceSections = sources.map((source, index) => (
-
-
- {source.path}
-
- {hoveredRow === `sources-${index}` && projectType === ProjectType.UnmanagedFolder && (
- setHoveredRow(`sources-${index}`)} onMouseLeave={() => setHoveredRow(null)} key={source.path}>
+
));
}
@@ -90,15 +91,15 @@ const UnmanagedFolderSources = (): JSX.Element => {
+
+ {source.path}
+
+
+ handleRemove(source.path)} title="Remove">
+
+
+
+ Source Paths
- handleAdd()}>
+ handleAdd()}>
Add Source Root...
-
+
-
{sourceSections}
-
+
- Use '--release' option for cross-compilation (Java 9 and later)
+ Use '--release' option for cross-compilation (Java 9 and later)
-
-
-
+
+
+
+
Bytecode version:
-
-
-
+
+
+
{jdkLevels(complianceLevel, "compliance", onClickComplianceLevel)}
-
-
-
-
-
+
+
+
+
+
Source compatibility:
-
-
-
+
+
+
{jdkLevels(sourceLevel, "source", onClickSourceLevel)}
-
-
-
-
-
+
+
+
+
+
Target compatibility:
-
-
-
+
+
+
{jdkLevels(targetLevel, "target", onClickTargetLevel)}
-
-
-
-
+
+
+
+
+
@@ -182,19 +193,19 @@ const CompilerConfigurationView = (): JSX.Element | null => {
- Please make sure to have a compatible JDK configured (currently {currentJdkComplianceLevel}). You can change the JDK under the onClickChangeJdk()}>JDK Runtime tab.
+ Please make sure to have a compatible JDK configured (currently {currentJdkComplianceLevel}). You can change the JDK under the onClickChangeJdk()}>JDK Runtime tab.
- Enable preview features
+ Enable preview features
- Class File Generation
- Generate debugging information
+ Generate debugging information
- Store information about method parameters
+ Store information about method parameters
'{projects[activeProjectIndex].name}' is imported by {projectType[activeProjectIndex]}, some changes made to the compiler settings might be lost after reloading.
- To make permanent changes, please edit the handleOpenBuildFile()}>{buildFile} file.
+ To make permanent changes, please edit the handleOpenBuildFile()}>{buildFile} file.
}
diff --git a/src/project-settings/assets/index.tsx b/src/project-settings/assets/index.tsx
index dc8621fa..c25756a5 100644
--- a/src/project-settings/assets/index.tsx
+++ b/src/project-settings/assets/index.tsx
@@ -1,13 +1,13 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
import App from "./mainpage/features/App";
-ReactDOM.render(
-
{getSectionContent()}
Project:
-
+
{projectSelections}
-
+
+
+
+ );
}
function toggleVisibility(event: React.ChangeEvent
+
+ );
}
diff --git a/src/welcome/assets/components/Header.tsx b/src/welcome/assets/components/Header.tsx
index df0ea53e..3d1cb6e7 100644
--- a/src/welcome/assets/components/Header.tsx
+++ b/src/welcome/assets/components/Header.tsx
@@ -1,13 +1,12 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import * as React from "react";
import { encodeCommandUriWithTelemetry } from "../../../utils/webview";
import { WEBVIEW_ID } from "../utils";
const DEV_BLOG_LINK = "https://devblogs.microsoft.com/?s=Java+on+Visual+Studio+Code";
-export default class Header extends React.Component {
- render() {
+
+export default function Header() {
const openBlogCommand = encodeCommandUriWithTelemetry(WEBVIEW_ID, "blogs", "java.helper.openUrl", [DEV_BLOG_LINK]);
const title =
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Java Help Center
; const blogsLink = blogs; @@ -20,5 +19,4 @@ export default class Header extends React.Component { ); - } } diff --git a/src/welcome/assets/components/NavigationPanel.tsx b/src/welcome/assets/components/NavigationPanel.tsx index cc2ffc66..ffa0611f 100644 --- a/src/welcome/assets/components/NavigationPanel.tsx +++ b/src/welcome/assets/components/NavigationPanel.tsx @@ -1,100 +1,105 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT license. -import * as _ from "lodash"; -import Tabs from "react-bootstrap/Tabs"; -import Tab from "react-bootstrap/Tab"; -import React from "react"; -import Icon from "@iconify/react"; -import gearIcon from "@iconify-icons/codicon/gear"; -import globeIcon from "@iconify-icons/codicon/globe"; -import mortarBoardIcon from "@iconify-icons/codicon/mortar-board"; -import rocketIcon from "@iconify-icons/codicon/rocket"; -import { ListGroup } from "react-bootstrap"; +import { useState, useRef } from "react"; import { reportTabSwitch, WEBVIEW_ID } from "../utils"; import { encodeCommandUriWithTelemetry } from "../../../utils/webview"; -export default class NavigationPanel extends React.Component<{ +interface NavigationPanelProps { isAwtDisabled: boolean; -}> { - private groups = [ - { - name: "General", - icon:{group.icon} {group.name}
;
- return (
-
-
- {actionItems}
-
+export default function QuickActionPanel() {
+ const newProjectElement =
+ {"Create a "}
+ {"New Project"}
+ ;
+ const existingProjectElement =
+ {"Open an "}
+ {"Existing Project"}
+ ;
+ const tourElement =
+ {"Take a "}
+ {"Tour"}
+ ;
+ const actions: any[] = [
+ { name: "Create a New Project", command: "java.project.create", element: newProjectElement },
+ { name: "Open an Existing Project", command: "workbench.action.files.openFolder", os: "win", element: existingProjectElement },
+ { name: "Open an Existing Project", command: "workbench.action.files.openFolder", os: "linux", element: existingProjectElement },
+ { name: "Open an Existing Project", command: "workbench.action.files.openFileFolder", os: "mac", element: existingProjectElement },
+ { name: "Take a Tour", command: "workbench.action.openWalkthrough", args: ["vscjava.vscode-java-pack#javaWelcome"], element: tourElement }
+ ];
+ const actionItems = actions.filter(action => !action.os || supportedByNavigator(action.os)).map(action => (
+ {action.element}
+ ));
+ return (
+
- {elements}
-
- );
- }
+export default function SocialMediaPanel() {
+ const links = [
+ { name: "Documentation", command: "java.helper.openUrl", args: ["https://code.visualstudio.com/docs/java/java-tutorial"], iconClass: "codicon codicon-book" },
+ { name: "Questions & Issues", command: "java.helper.openUrl", args: ["https://github.com/microsoft/vscode-java-pack/issues"], iconClass: "codicon codicon-github-inverted" },
+ ];
+ const elements = links.map(link => (
+ {link.name}
+ ));
+ return (
+ (undefined);
-export default class TourPage extends Component<{
-}, {
- step: number
-}> {
- constructor(props: any) {
- super(props);
- this.state = {
- step: 0
- };
-
- this.steps = [
- this.getStartingPage(),
- ...this.getContentPages(),
- this.getEndingPage()
- ];
-
- this.timer = undefined;
- }
-
- private steps: JSX.Element[];
- // auto navigate to welcome page in last step
- private timer: number | undefined;
-
- render() {
- const { step } = this.state;
-
- if (this.timer !== undefined) {
- clearTimeout(this.timer);
- }
-
- if (step >= this.steps.length) {
- onWillFetchInitProps();
- return
-
-
-
-
-
- );
- }
-
- showStep = (newStep: number) => {
- this.setState({
- step: newStep
- });
- }
+ const contentPages = useMemo(() => {
+ const openFolderCommand = encodeCommandUriWithTelemetry(WEBVIEW_ID, "open folder", supportedByNavigator("mac") ? "workbench.action.files.openFileFolder" : "workbench.action.files.openFolder");
+ const showProjectExplorerCommand = encodeCommandUriWithTelemetry(WEBVIEW_ID, "show project explorer", "javaProjectExplorer.focus");
+ const showRunAndDebugViewCommand = encodeCommandUriWithTelemetry(WEBVIEW_ID, "show run and debug view", "workbench.view.debug");
+ const showTestExplorerViewCommand = encodeCommandUriWithTelemetry(WEBVIEW_ID, "show test explorer", "testExplorer.focus");
- nextStep = () => {
- const newStep = this.state.step + 1;
- this.setState({
- step: newStep
- });
- }
-
- getContentPages = () => {
- /**
- * Provide 4 pages:
- * 1. open folder: for full features
- * 2. project view
- * 3. run/debug: point out the entry we want to promote
- * 4. testing
- */
-
- const openFolderCommand: string = encodeCommandUriWithTelemetry(WEBVIEW_ID, "open folder", supportedByNavigator("mac") ? "workbench.action.files.openFileFolder" : "workbench.action.files.openFolder");
- const showProjectExplorerCommand: string = encodeCommandUriWithTelemetry(WEBVIEW_ID, "show project explorer", "javaProjectExplorer.focus");
- const showRunAndDebugViewCommand: string = encodeCommandUriWithTelemetry(WEBVIEW_ID, "show run and debug view", "workbench.view.debug");
- const showTestExplorerViewCommand: string = encodeCommandUriWithTelemetry(WEBVIEW_ID, "show test explorer", "testExplorer.focus");
-
- const content = [{
+ return [{
title: "Open Project Folder",
description:
Get Started
-
+
+ );
}
diff --git a/src/welcome/assets/components/SocialMediaPanel.tsx b/src/welcome/assets/components/SocialMediaPanel.tsx
index e8ffae99..54a32e06 100644
--- a/src/welcome/assets/components/SocialMediaPanel.tsx
+++ b/src/welcome/assets/components/SocialMediaPanel.tsx
@@ -1,31 +1,23 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import * as React from "react";
-import { Icon } from "@iconify/react";
-import bookIcon from "@iconify-icons/codicon/book";
-import githubIcon from "@iconify-icons/codicon/github-inverted";
-import { ListGroup } from "react-bootstrap";
import { encodeCommandUriWithTelemetry } from "../../../utils/webview";
import { WEBVIEW_ID } from "../utils";
-export default class SocialMediaPanel extends React.Component {
- render() {
- const links = [
- { name: "Documentation", command: "java.helper.openUrl", args: ["https://code.visualstudio.com/docs/java/java-tutorial"], icon: bookIcon },
- { name: "Questions & Issues", command: "java.helper.openUrl", args: ["https://github.com/microsoft/vscode-java-pack/issues"], icon: githubIcon },
- ];
- const elements = links.map(link => (
- Get Started
+
+ {actionItems}
- );
- }
+
+ {elements}
+
+ );
}
diff --git a/src/welcome/assets/components/TourPage.tsx b/src/welcome/assets/components/TourPage.tsx
index f50ca9f8..cd5e0353 100644
--- a/src/welcome/assets/components/TourPage.tsx
+++ b/src/welcome/assets/components/TourPage.tsx
@@ -1,155 +1,116 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import React, { Component } from "react";
-import { Button, Col, Container, Row } from "react-bootstrap";
+import { useState, useEffect, useRef, useMemo } from "react";
import { encodeCommandUriWithTelemetry, supportedByNavigator } from "../../../utils/webview";
import { onWillFetchInitProps, reportSkipTour, WEBVIEW_ID } from "../utils";
const logoIcon = require("../../../../logo.svg");
const doneIcon = require("../resources/done.svg");
-declare function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
+export default function TourPage() {
+ const [step, setStep] = useState(0);
+ const timerRef = useRefLoading...
;
- } else if (step === this.steps.length - 1) {
- this.timer = setTimeout(() => {
- onWillFetchInitProps();
- }, 5000);
- }
-
- return (
-
- {this.steps.map((_elem, index) =>
- this.showStep(index)}>
- )}
-
-
- Open a folder containing your Java project for full features.
,
imageUri: require("../resources/open-project.png")
- },
- {
+ }, {
title: "Project Explorer",
description: Expand Java Project Explorer to view your project structure.
,
imageUri: require("../resources/project-manager.png")
- },
- {
+ }, {
title: "Running and Debugging",
description: Open Run and Debug View to start your project.
,
imageUri: require("../resources/debugger.png")
- },
- {
+ }, {
title: "Testing",
description: Use Testing View to run unit tests.
,
imageUri: require("../resources/testing.png")
}];
+ }, []);
- return content.map((elem) => , this);
- }
+ const nextStep = () => setStep(s => s + 1);
- getStartingPage = () => {
- return
- 
+ const steps = useMemo(() => {
+ const startingPage =
+
;
- }
- getEndingPage = () => {
- return Welcome to use Java Tools
lightweight, performant, powerful.
-
+
- 
-
You’re good to go!
+ const pages = contentPages.map(elem => ); + + const endingPage =
+
+
;
+
+ return [startingPage, ...pages, endingPage];
+ }, [contentPages]);
+
+ useEffect(() => {
+ if (timerRef.current !== undefined) {
+ clearTimeout(timerRef.current);
+ }
+
+ if (step >= steps.length) {
+ onWillFetchInitProps();
+ } else if (step === steps.length - 1) {
+ timerRef.current = window.setTimeout(() => {
+ onWillFetchInitProps();
+ }, 5000);
+ }
+
+ return () => {
+ if (timerRef.current !== undefined) {
+ clearTimeout(timerRef.current);
+ }
+ };
+ }, [step, steps.length]);
+
+ if (step >= steps.length) {
+ return You're good to go!
Next, start using Java!
-
+
Loading...
;
}
+
+ return (
+
+
+ );
}
function skipTourFrom(page: string) {
reportSkipTour(page);
onWillFetchInitProps();
}
-
diff --git a/src/welcome/assets/index.ts b/src/welcome/assets/index.ts
index b8a907aa..9a199a52 100644
--- a/src/welcome/assets/index.ts
+++ b/src/welcome/assets/index.ts
@@ -1,17 +1,19 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
import { GetStartedPage } from "./components/GetStartedPage";
import "./style.scss";
import { onWillFetchInitProps } from "./utils";
+const container = document.getElementById("content")!;
+const root = createRoot(container);
const onInitialize = (event: any) => {
const { data } = event;
if (data.command === "onDidFetchInitProps") {
- ReactDOM.render(React.createElement(GetStartedPage, data.props), document.getElementById("content"));
+ root.render(createElement(GetStartedPage, data.props));
}
};
diff --git a/src/welcome/assets/style.scss b/src/welcome/assets/style.scss
index d878165b..9869c3c8 100644
--- a/src/welcome/assets/style.scss
+++ b/src/welcome/assets/style.scss
@@ -1,31 +1,41 @@
@import "../../assets/vscode.scss";
// Custom styles dedicated to this webview:
-$nav-tabs-link-active-color: var(--vscode-panelTitle-activeForeground);
-$nav-tabs-link-active-bg: transparent;
-$nav-tabs-link-active-border-color: transparent;
-$nav-tabs-link-hover-border-color: transparent;
-$nav-tabs-border-color: transparent;
-$list-group-bg: var(--vscode-peekViewTitle-background);
-$list-group-border-color: var(--vscode-peekViewTitle-background);
-$list-group-action-active-bg: $list-group-bg;
-
-@import "~bootstrap/scss/bootstrap";
+// Tab styles (replacing react-bootstrap Tabs)
+.nav-tabs {
+ display: flex;
+ border-bottom: 1px solid transparent;
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
+}
-.nav-link,
-.nav-link:hover {
+.nav-link {
+ display: block;
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+ border: none;
+ background: none;
color: var(--vscode-panelTitle-inactiveForeground);
text-transform: uppercase;
+ text-decoration: none;
+
+ &:hover {
+ color: var(--vscode-panelTitle-inactiveForeground);
+ }
+ &.active {
+ color: var(--vscode-panelTitle-activeForeground);
+ }
}
-.nav-tabs a:hover div,
-.nav-tabs a.active div {
+.nav-tabs .nav-link:hover .navigation-title,
+.nav-tabs .nav-link.active .navigation-title {
border-color: transparent transparent var(--vscode-panelTitle-activeBorder)
transparent;
}
-.nav-tabs a div {
+.nav-tabs .nav-link .navigation-title {
border: solid 1px;
padding-bottom: 8px;
border-color: transparent;
@@ -40,14 +50,17 @@ $list-group-action-active-bg: $list-group-bg;
padding: 24px 0px 0px 0px;
}
-.tab-content a {
+// Style for links inside tab/navigation content and list-groups
+.tab-content a,
+.navigation-tabcontent a {
&:hover {
color: var(--vscode-panelTitle-activeForeground);
}
color: var(--vscode-foreground);
width: fit-content;
- svg.codicon {
+ svg.codicon,
+ i.codicon {
margin-right: 0.5em;
}
}
@@ -107,20 +120,49 @@ div.header {
}
}
-.list-group a {
- margin-bottom: 12px;
-}
-
+// Override list-group colors for quick-actions section only
div.quick-actions {
+ .list-group {
+ gap: 6px;
+ }
+
+ .list-group-item {
+ background-color: var(--vscode-sideBar-background);
+ border: none;
+ border-radius: 4px;
+ padding: 0.65rem 1rem;
+ // Override list-group-item-action color with higher specificity
+ &.list-group-item-action {
+ color: var(--vscode-descriptionForeground);
+ &:hover {
+ background-color: var(--vscode-list-hoverBackground);
+ }
+ }
+ }
+
a {
color: var(--vscode-descriptionForeground);
span.highlight {
color: var(--vscode-foreground);
+ font-weight: 600;
}
}
}
+// Navigation and footer list-groups: transparent background
+.navigation-tabcontent .list-group,
+.footer .list-group {
+ background-color: transparent;
+ border-color: transparent;
+}
+
+// Spacing for plain links inside list-groups (navigation & footer only)
+.navigation-tabcontent .list-group a,
+.footer .list-group a {
+ margin-bottom: 12px;
+}
+
div.page-content {
img,
div {
diff --git a/tsconfig.json b/tsconfig.json
index ac7d5948..0eb3216b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,11 +24,12 @@
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
"noUnusedParameters": true, /* Report errors on unused parameters. */
"skipLibCheck": true,
- "jsx": "react",
+ "jsx": "react-jsx",
+ "jsxImportSource": "react",
/* Enabled for React */
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
- "noImplicitThis": false /* disabled for jQuery */
+ "noImplicitThis": false
},
"exclude": [
"node_modules",
diff --git a/webpack.config.js b/webpack.config.js
index 595485a6..19e0a896 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,6 +9,7 @@ module.exports = function (env, argv) {
mode: 'none',
entry: {
overview: './src/overview/assets/index.ts',
+ 'java-runtime': './src/java-runtime/assets/index.ts',
'beginner-tips': './src/beginner-tips/assets/index.tsx',
'ext-guide': './src/ext-guide/assets/index.ts',
welcome: './src/welcome/assets/index.ts',
+
+
+ {steps[step]}
+
+
+
+
+
+
+ {steps.map((_elem, index) =>
+ setStep(index)}>
+ )}
+
+