Skip to content

Commit

Permalink
Merge pull request #5096 from Tyriar/tyriar/esbuild4
Browse files Browse the repository at this point in the history
Integrate base/ platform from VS Code and adopt scroll bar
  • Loading branch information
Tyriar authored Jul 11, 2024
2 parents 995ccc7 + 90a1da2 commit f3bfe80
Show file tree
Hide file tree
Showing 97 changed files with 19,838 additions and 601 deletions.
2 changes: 2 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"src/browser/tsconfig.json",
"src/common/tsconfig.json",
"src/headless/tsconfig.json",
"src/vs/tsconfig.json",
"test/benchmark/tsconfig.json",
"test/playwright/tsconfig.json",
"addons/addon-attach/src/tsconfig.json",
Expand Down Expand Up @@ -43,6 +44,7 @@
},
"ignorePatterns": [
"addons/*/src/third-party/*.ts",
"src/vs/*",
"out/*",
"out-test/*",
"out-esbuild/*",
Expand Down
2 changes: 2 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
},
// Hide output files from the file explorer, comment this out to see the build output
"files.exclude": {
"**/.nyc_output": true,
"**/lib": true,
"**/dist": true,
"**/out": true,
"**/out-*": true,
},
Expand Down
6 changes: 4 additions & 2 deletions addons/addon-fit/src/FitAddon.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import type { Terminal, ITerminalAddon } from '@xterm/xterm';
import type { FitAddon as IFitApi } from '@xterm/addon-fit';
import { IRenderDimensions } from 'browser/renderer/shared/Types';
import { ViewportConstants } from 'browser/shared/Constants';

interface ITerminalDimensions {
/**
Expand Down Expand Up @@ -64,8 +65,9 @@ export class FitAddon implements ITerminalAddon , IFitApi {
return undefined;
}

const scrollbarWidth = this._terminal.options.scrollback === 0 ?
0 : core.viewport.scrollBarWidth;
const scrollbarWidth = (this._terminal.options.scrollback === 0
? 0
: (this._terminal.options.overviewRulerWidth || ViewportConstants.DEFAULT_SCROLL_BAR_WIDTH));

const parentElementStyle = window.getComputedStyle(this._terminal.element.parentElement);
const parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));
Expand Down
19 changes: 13 additions & 6 deletions bin/esbuild.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@ const config = {

/** @type {esbuild.BuildOptions} */
const commonOptions = {
bundle: true,
format: 'esm',
target: 'es2021',
sourcemap: true,
treeShaking: true,
logLevel: 'debug',
};

Expand All @@ -34,8 +36,6 @@ const devOptions = {
/** @type {esbuild.BuildOptions} */
const prodOptions = {
minify: true,
treeShaking: true,
logLevel: 'debug',
legalComments: 'none',
// TODO: Mangling private and protected properties will reduce bundle size quite a bit, we must
// make sure we don't cast privates to `any` in order to prevent regressions.
Expand Down Expand Up @@ -80,20 +80,21 @@ function getAddonEntryPoint(addon) {

/** @type {esbuild.BuildOptions} */
let bundleConfig = {
bundle: true,
...commonOptions,
...(config.isProd ? prodOptions : devOptions)
};

/** @type {esbuild.BuildOptions} */
let outConfig = {
format: 'cjs'
format: 'cjs',
sourcemap: true,
}
let skipOut = false;

/** @type {esbuild.BuildOptions} */
let outTestConfig = {
format: 'cjs'
format: 'cjs',
sourcemap: true,
}
let skipOutTest = false;

Expand Down Expand Up @@ -171,7 +172,13 @@ if (config.addon) {
};
outConfig = {
...outConfig,
entryPoints: ['src/**/*.ts'],
entryPoints: [
'src/browser/**/*.ts',
'src/common/**/*.ts',
'src/headless/**/*.ts',
'src/vs/base/**/*.ts',
'src/vs/patches/**/*.ts'
],
outdir: 'out-esbuild/'
};
outTestConfig = {
Expand Down
9 changes: 8 additions & 1 deletion bin/test_unit.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,14 @@ const checkCoverage = flagArgs.indexOf('--coverage') >= 0;
if (checkCoverage) {
flagArgs.splice(flagArgs.indexOf('--coverage'), 1);
const executable = npmBinScript('nyc');
const args = ['--check-coverage', `--lines=${COVERAGE_LINES_THRESHOLD}`, npmBinScript('mocha'), ...testFiles, ...flagArgs];
const args = [
'--check-coverage',
`--lines=${COVERAGE_LINES_THRESHOLD}`,
'--exclude=out-esbuild/vs/**',
npmBinScript('mocha'),
...testFiles,
...flagArgs
];
console.info('executable', executable);
console.info('args', args);
const run = cp.spawnSync(
Expand Down
41 changes: 41 additions & 0 deletions bin/vs_base_find_unused.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
// @ts-check

const { dirname } = require("path");
const ts = require("typescript");
const fs = require("fs");

function findUnusedSymbols(
/** @type string */ tsconfigPath
) {
// Initialize a program using the project's tsconfig.json
const configFile = ts.readConfigFile(tsconfigPath, ts.sys.readFile);
const parsedConfig = ts.parseJsonConfigFileContent(configFile.config, ts.sys, dirname(tsconfigPath));

// Initialize a program with the parsed configuration
const program = ts.createProgram(parsedConfig.fileNames, {
...parsedConfig.options,
noUnusedLocals: true
});
const sourceFiles = program.getSourceFiles();
const usedBaseSourceFiles = sourceFiles.filter(e => e.fileName.includes('src/vs/base/'));
const usedFilesInBase = usedBaseSourceFiles.map(e => e.fileName.replace(/^.+\/src\//, 'src/')).sort((a, b) => a.localeCompare(b));
// console.log('Source files used in src/vs/base/:', used);

// Get an array of all files that exist in src/vs/base/
const allFilesInBase = (
fs.readdirSync('src/vs/base', { recursive: true, withFileTypes: true })
.filter(e => e.isFile())
// @ts-ignore HACK: This is only available in Node 20
.map(e => `${e.parentPath}/${e.name}`.replace(/\\/g, '/'))
);
const unusedFilesInBase = allFilesInBase.filter(e => !usedFilesInBase.includes(e));

console.log({
allFilesInBase,
usedFilesInBase,
unusedFilesInBase
});
}

// Example usage
findUnusedSymbols("./src/browser/tsconfig.json");
61 changes: 61 additions & 0 deletions bin/vs_base_update.ps1
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# Get latest vscode repo
if (Test-Path -Path "src/vs/temp") {
Write-Host "`e[32m> Fetching latest`e[0m"
git -C src/vs/temp checkout
git -C src/vs/temp pull
} else {
Write-Host "`e[32m> Cloning microsoft/vscode`e[0m"
$null = New-Item -ItemType Directory -Path "src/vs/temp" -Force
git clone https://github.com/microsoft/vscode src/vs/temp
}

# Delete old base
Write-Host "`e[32m> Deleting old base`e[0m"
$null = Remove-Item -Recurse -Force "src/vs/base"

# Copy base
Write-Host "`e[32m> Copying base`e[0m"
Copy-Item -Path "src/vs/temp/src/vs/base" -Destination "src/vs/base" -Recurse

# Comment out any CSS imports
Write-Host "`e[32m> Commenting out CSS imports" -NoNewline
$baseFiles = Get-ChildItem -Path "src/vs/base" -Recurse -File
$count = 0
foreach ($file in $baseFiles) {
$content = Get-Content -Path $file.FullName
$updatedContent = $content | ForEach-Object {
if ($_ -match "^import 'vs/css!") {
Write-Host "`e[32m." -NoNewline
$count++
"// $_"
} else {
$_
}
}
$updatedContent | Set-Content -Path $file.FullName
}
Write-Host " $count files patched`e[0m"

# Replace `monaco-*` with `xterm-*`, this will help avoid any styling conflicts when monaco and
# xterm.js are used in the same project.
Write-Host "`e[32m> Replacing monaco-* class names with xterm-* `e[0m" -NoNewline
$baseFiles = Get-ChildItem -Path "src/vs/base" -Recurse -File
$count = 0
foreach ($file in $baseFiles) {
$content = Get-Content -Path $file.FullName
if ($content -match "monaco-([a-zA-Z\-]+)") {
$updatedContent = $content -replace "monaco-([a-zA-Z\-]+)", 'xterm-$1'
Write-Host "`e[32m." -NoNewline
$count++
$updatedContent | Set-Content -Path $file.FullName
}
}
Write-Host " $count files patched`e[0m"

# Copy typings
Write-Host "`e[32m> Copying typings`e[0m"
Copy-Item -Path "src/vs/temp/src/typings" -Destination "src/vs" -Recurse -Force

# Deleting unwanted typings
Write-Host "`e[32m> Deleting unwanted typings`e[0m"
$null = Remove-Item -Path "src/vs/typings/vscode-globals-modules.d.ts" -Force
69 changes: 65 additions & 4 deletions css/xterm.css
Original file line number Diff line number Diff line change
Expand Up @@ -112,10 +112,6 @@
top: 0;
}

.xterm .xterm-scroll-area {
visibility: hidden;
}

.xterm-char-measure-element {
display: inline-block;
visibility: hidden;
Expand Down Expand Up @@ -222,3 +218,68 @@
z-index: 2;
position: relative;
}



/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */

/* xterm.js customization: Override xterm's cursor style */
.xterm .xterm-scrollable-element > .scrollbar {
cursor: default;
}

/* Arrows */
.xterm .xterm-scrollable-element > .scrollbar > .scra {
cursor: pointer;
font-size: 11px !important;
}

.xterm .xterm-scrollable-element > .visible {
opacity: 1;

/* Background rule added for IE9 - to allow clicks on dom node */
background:rgba(0,0,0,0);

transition: opacity 100ms linear;
/* In front of peek view */
z-index: 11;
}
.xterm .xterm-scrollable-element > .invisible {
opacity: 0;
pointer-events: none;
}
.xterm .xterm-scrollable-element > .invisible.fade {
transition: opacity 800ms linear;
}

/* Scrollable Content Inset Shadow */
.xterm .xterm-scrollable-element > .shadow {
position: absolute;
display: none;
}
.xterm .xterm-scrollable-element > .shadow.top {
display: block;
top: 0;
left: 3px;
height: 3px;
width: 100%;
box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.left {
display: block;
top: 3px;
left: 0;
height: 100%;
width: 3px;
box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.top-left-corner {
display: block;
top: 0;
left: 0;
height: 3px;
width: 3px;
}
.xterm .xterm-scrollable-element > .shadow.top.left {
box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
6 changes: 4 additions & 2 deletions demo/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -437,12 +437,13 @@ function initOptions(term: Terminal): void {
'logger',
'theme',
'windowOptions',
'windowsPty'
'windowsPty',
// Deprecated
'fastScrollModifier'
];
const stringOptions = {
cursorStyle: ['block', 'underline', 'bar'],
cursorInactiveStyle: ['outline', 'block', 'bar', 'underline', 'none'],
fastScrollModifier: ['none', 'alt', 'ctrl', 'shift'],
fontFamily: null,
fontWeight: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
fontWeightBold: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
Expand Down Expand Up @@ -575,6 +576,7 @@ function initOptions(term: Terminal): void {
cursor: '#333333',
cursorAccent: '#ffffff',
selectionBackground: '#add6ff',
overviewRulerBorder: '#aaaaaa',
black: '#000000',
blue: '#0451a5',
brightBlack: '#666666',
Expand Down
62 changes: 0 additions & 62 deletions demo/webpack.config.js

This file was deleted.

Loading

0 comments on commit f3bfe80

Please sign in to comment.