vercel / hyper

A terminal built on web technologies
https://hyper.is
MIT License
43.35k stars 3.52k forks source link

Problems with text alignment on ls output. #3350

Open andrzejnovak opened 5 years ago

andrzejnovak commented 5 years ago

Issue

'' Problems with text alignment on ls output. ![image](https://user-images.githubusercontent.com/13226500/50222200-d9c4a900-0397-11e9-8a7f-93279ff26bb3.png)
andrzejnovak commented 4 years ago

Bump, still a problem for me.

LabhanshAgrawal commented 4 years ago

can you give the ci build a try and report if you are still facing it

andrzejnovak commented 4 years ago

@LabhanshAgrawal Well actually, this made it worse. Previously this would happen only in the default opened tab, but following tabs didn't have the issue. In the canary-4 linked above the alignment is problematic even in the subsequently opened tabs

LabhanshAgrawal commented 4 years ago

can you post the details again, like current os version, config and screenshot as these might've changed since you opened this issue.

andrzejnovak commented 4 years ago

Here goes. I did a clean install just to be sure, cleaning the config.js apart from

        shell: 'C:\\Windows\\System32\\wsl.exe',
        shellArgs: ['~'],

image

It seems to play particularly poorly with fullscreen and when the filename lengths vary a lot. Though it does work at some odd window sizes, here's one also for reference of desired behaviour

image

LabhanshAgrawal commented 4 years ago

Hmm that's strange, It's working for me properly at all sizes. Can you check https://github.com/xtermjs/xterm.js once and see if the demo works properly for you.

andrzejnovak commented 4 years ago

@LabhanshAgrawal Could you tell me what to look for? I haven't worked with npm before, but following the demo, I can get it to open in browser, but it's not interactive.

LabhanshAgrawal commented 4 years ago

did you do a 'npm install' at first?

You may want to change demo/server.js line 47 to use wsl instead of cmd just replace 'cmd.exe' with 'C:\\Windows\\System32\\wsl.exe' and add '~' to the empty args array at the end. Then run npm run start and then you should be able to use the terminal in the browser (localhost 3000) test it with different values for rows and cols (try also with the size at which it's not working in hyper)

andrzejnovak commented 4 years ago

@LabhanshAgrawal can you clarify whether this was the demo you meant? https://xtermjs.org/ I am bit confused about how that helps actually

LabhanshAgrawal commented 4 years ago

@andrzejnovak No, I meant the demo from the xterm git repo. You need to clone it to local and then follow the steps I mentioned in previous reply.

andrzejnovak commented 4 years ago

Ok, the web page doesn't seem to work for me.

Running npm install results in a bunch of error messages

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated mkdirp@0.5.3: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.) npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated fsevents@1.2.12: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.) npm WARN rm not removing /home/anovak/aligntest/xterm.js/node_modules/.bin/rimraf as it wasn't installed by /home/anovak/aligntest/xterm.js/node_modules/rimraf npm WARN rm not removing /home/anovak/aligntest/xterm.js/node_modules/.bin/semver as it wasn't installed by /home/anovak/aligntest/xterm.js/node_modules/semver npm WARN rm not removing /home/anovak/aligntest/xterm.js/node_modules/.bin/json5 as it wasn't installed by /home/anovak/aligntest/xterm.js/node_modules/json5 > puppeteer@1.20.0 install /home/anovak/aligntest/xterm.js/node_modules/puppeteer > node install.js Downloading Chromium r686378 - 114 Mb [====================] 100% 0.0s Chromium downloaded to /home/anovak/aligntest/xterm.js/node_modules/puppeteer/.local-chromium/linux-686378 > node-pty@0.9.0 install /home/anovak/aligntest/xterm.js/node_modules/node-pty > node scripts/install.js make: Entering directory '/home/anovak/aligntest/xterm.js/node_modules/node-pty/build' CXX(target) Release/obj.target/pty/src/unix/pty.o SOLINK_MODULE(target) Release/obj.target/pty.node COPY Release/pty.node make: Leaving directory '/home/anovak/aligntest/xterm.js/node_modules/node-pty/build' > node-pty@0.9.0 postinstall /home/anovak/aligntest/xterm.js/node_modules/node-pty > node scripts/post-install.js > xterm@4.5.0 prepare /home/anovak/aligntest/xterm.js > npm run setup > xterm@4.5.0 presetup /home/anovak/aligntest/xterm.js > node ./bin/install-addons.js pulling addon dependencies... Skipped xterm-addon-attach Skipped xterm-addon-fit Skipped xterm-addon-search Skipped xterm-addon-serialize Skipped xterm-addon-unicode11 Skipped xterm-addon-web-links Skipped xterm-addon-webgl > xterm@4.5.0 setup /home/anovak/aligntest/xterm.js > npm run build > xterm@4.5.0 build /home/anovak/aligntest/xterm.js > tsc -b ./tsconfig.all.json ../node_modules/xterm/typings/xterm.d.ts:16:15 - error TS2300: Duplicate identifier 'FontWeight'. 16 export type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; ~~~~~~~~~~ typings/xterm.d.ts:16:15 16 export type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; ~~~~~~~~~~ 'FontWeight' was also declared here. ../node_modules/xterm/typings/xterm.d.ts:21:15 - error TS2300: Duplicate identifier 'LogLevel'. 21 export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'off'; ~~~~~~~~ typings/xterm.d.ts:21:15 21 export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'off'; ~~~~~~~~ 'LogLevel' was also declared here. ../node_modules/xterm/typings/xterm.d.ts:26:15 - error TS2300: Duplicate identifier 'RendererType'. 26 export type RendererType = 'dom' | 'canvas'; ~~~~~~~~~~~~ typings/xterm.d.ts:26:15 26 export type RendererType = 'dom' | 'canvas'; ~~~~~~~~~~~~ 'RendererType' was also declared here. ../node_modules/xterm/typings/xterm.d.ts:547:16 - error TS2300: Duplicate identifier 'Terminal'. 547 export class Terminal implements IDisposable { ~~~~~~~~ typings/xterm.d.ts:555:16 555 export class Terminal implements IDisposable { ~~~~~~~~ 'Terminal' was also declared here. typings/xterm.d.ts:16:15 - error TS2300: Duplicate identifier 'FontWeight'. 16 export type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; ~~~~~~~~~~ ../node_modules/xterm/typings/xterm.d.ts:16:15 16 export type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; ~~~~~~~~~~ 'FontWeight' was also declared here. typings/xterm.d.ts:21:15 - error TS2300: Duplicate identifier 'LogLevel'. 21 export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'off'; ~~~~~~~~ ../node_modules/xterm/typings/xterm.d.ts:21:15 21 export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'off'; ~~~~~~~~ 'LogLevel' was also declared here. typings/xterm.d.ts:26:15 - error TS2300: Duplicate identifier 'RendererType'. 26 export type RendererType = 'dom' | 'canvas'; ~~~~~~~~~~~~ ../node_modules/xterm/typings/xterm.d.ts:26:15 26 export type RendererType = 'dom' | 'canvas'; ~~~~~~~~~~~~ 'RendererType' was also declared here. typings/xterm.d.ts:555:16 - error TS2300: Duplicate identifier 'Terminal'. 555 export class Terminal implements IDisposable { ~~~~~~~~ ../node_modules/xterm/typings/xterm.d.ts:547:16 547 export class Terminal implements IDisposable { ~~~~~~~~ 'Terminal' was also declared here. error TS2688: Cannot find type definition file for '../../../out-test/api/TestUtils'. error TS2688: Cannot find type definition file for '../../../out-test/api/TestUtils'. error TS2688: Cannot find type definition file for '../../../out-test/api/TestUtils'. error TS2688: Cannot find type definition file for '../../../out-test/api/TestUtils'. Found 12 errors. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! xterm@4.5.0 build: `tsc -b ./tsconfig.all.json` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the xterm@4.5.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/anovak/.npm/_logs/2020-04-27T10_41_55_940Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! xterm@4.5.0 setup: `npm run build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the xterm@4.5.0 setup script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/anovak/.npm/_logs/2020-04-27T10_41_55_971Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! xterm@4.5.0 prepare: `npm run setup` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the xterm@4.5.0 prepare script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/anovak/.npm/_logs/2020-04-27T10_41_56_085Z-debug.log

As does running npm run starts afterwards:

> xterm@4.5.0 start /home/anovak/aligntest/xterm.js > node demo/start App listening to http://127.0.0.1:3000 Hash: 6633074c1b3c560381f9 Version: webpack 4.43.0 Time: 3972ms Built at: 04/27/2020 12:43:02 PM Asset Size Chunks Chunk Names client-bundle.js 60.5 KiB main [emitted] main Entrypoint main = client-bundle.js [./demo/client.ts] 13.6 KiB {main} [built] [8 errors] ERROR in ./demo/client.ts Module not found: Error: Can't resolve '../addons/xterm-addon-attach/out/AttachAddon' in '/home/anovak/aligntest/xterm.js/demo' @ ./demo/client.ts 12:22-77 ERROR in ./demo/client.ts Module not found: Error: Can't resolve '../addons/xterm-addon-fit/out/FitAddon' in '/home/anovak/aligntest/xterm.js/demo' @ ./demo/client.ts 13:19-68 ERROR in ./demo/client.ts Module not found: Error: Can't resolve '../addons/xterm-addon-search/out/SearchAddon' in '/home/anovak/aligntest/xterm.js/demo' @ ./demo/client.ts 14:22-77 ERROR in ./demo/client.ts Module not found: Error: Can't resolve '../addons/xterm-addon-serialize/out/SerializeAddon' in '/home/anovak/aligntest/xterm.js/demo' @ ./demo/client.ts 15:25-86 ERROR in ./demo/client.ts Module not found: Error: Can't resolve '../addons/xterm-addon-unicode11/out/Unicode11Addon' in '/home/anovak/aligntest/xterm.js/demo' @ ./demo/client.ts 18:25-86 ERROR in ./demo/client.ts Module not found: Error: Can't resolve '../addons/xterm-addon-web-links/out/WebLinksAddon' in '/home/anovak/aligntest/xterm.js/demo' @ ./demo/client.ts 16:24-84 ERROR in ./demo/client.ts Module not found: Error: Can't resolve '../addons/xterm-addon-webgl/out/WebglAddon' in '/home/anovak/aligntest/xterm.js/demo' @ ./demo/client.ts 17:21-74 ERROR in ./demo/client.ts Module not found: Error: Can't resolve '../out/browser/public/Terminal' in '/home/anovak/aligntest/xterm.js/demo' @ ./demo/client.ts 11:19-60 ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts ./demo/client.ts [tsl] ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts(11,26) TS2307: Cannot find module '../out/browser/public/Terminal'. ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts ./demo/client.ts [tsl] ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts(12,29) TS2307: Cannot find module '../addons/xterm-addon-attach/out/AttachAddon'. ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts ./demo/client.ts [tsl] ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts(13,26) TS2307: Cannot find module '../addons/xterm-addon-fit/out/FitAddon'. ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts ./demo/client.ts [tsl] ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts(14,45) TS2307: Cannot find module '../addons/xterm-addon-search/out/SearchAddon'. ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts ./demo/client.ts [tsl] ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts(15,32) TS2307: Cannot find module '../addons/xterm-addon-serialize/out/SerializeAddon'. ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts ./demo/client.ts [tsl] ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts(16,31) TS2307: Cannot find module '../addons/xterm-addon-web-links/out/WebLinksAddon'. ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts ./demo/client.ts [tsl] ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts(17,28) TS2307: Cannot find module '../addons/xterm-addon-webgl/out/WebglAddon'. ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts ./demo/client.ts [tsl] ERROR in /home/anovak/aligntest/xterm.js/demo/client.ts(18,32) TS2307: Cannot find module '../addons/xterm-addon-unicode11/out/Unicode11Addon'.

Also following the instructions here https://github.com/xtermjs/xterm.js/wiki/Contributing after getting the correct yarn (https://github.com/yarnpkg/yarn/issues/2821) results in the same/similar error messages and results.

LabhanshAgrawal commented 4 years ago

did you run npm install from the root of the repo i.e. /home/anovak/aligntest/xterm.js from some errors it seems like it's running from some child folder npm start failed because npm install failed

i guess you should be able to simply run the below commands (one at a time) and it should work

cd /home/anovak/aligntest/xterm.js
git clean -xdf
npm install -g npm
npm install
npm start
andrzejnovak commented 4 years ago

Thanks for the detailed instructions. But actually it seems to lead to the same errors messages as above.

andrzejnovak commented 4 years ago

@LabhanshAgrawal If it helps it seems to be a rendered issue. I tried a bunch of prompts and the default windows wsl.exe and bash.exe have the same problem, so it's quite possibly not caused by hyper. The problem doesn't appear for the "new" windows terminal.