decosoftware/deco-ide

Improve console UI

Open

#58 opened on May 29, 2016

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (5,840 stars) (342 forks)batch import
enhancementhelp wanted

Description

This one would be pretty easy for somebody to help with.

The current console UI kind of sucks: it's just a giant div that we stuff text in. We should try to use a terminal emulator.

  • text will wrap properly
  • we can autoscroll to the bottom better
  • probably won't lag during an ios build, when tons of text gets logged all at once (slowness might be due to other stuff)

This task is a prerequisite for being able to type back into the console (currently is read-only), and being able to search console output.

screen shot 2016-05-29 at 4 03 52 pm

How to improve it?

Consider using https://github.com/sourcelair/xterm.js, the actively maintained fork of termjs.

This should fix text-wrapping, scrolling, and probably performance (although we may also want to batch text output into the console). It will set us up to be able to run commands via the console and search console output.

Contributor guide

Tech stack
javascript
Domain
frontenddeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
familiarity with JavaScriptbasic understanding of React componentsknowledge of terminal emulators
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The issue suggests replacing the current console UI with xterm.js (https://github.com/sourcelair/xterm.js). Begin by examining the existing console component in the repository, likely located in a file related to UI or console. Check for any prior attempts or discussions in the comments. Evaluate how to integrate xterm.js as a React component and ensure text wrapping, scrolling, and performance improvements are achieved. Also consider batching text output to address potential lag during iOS builds.