that-is-impossible
that-is-impossible copied to clipboard
Intro to Impossible.js, an Object Oriented JavaScript library for building cross-platform terminal apps
What is Impossible?
Nothing is impossible, the word itself says "I'm possible"! -- Audrey Hepburn

Now Seriously, What is Impossible?
Impossible.js is an Object Oriented JavaScript library for building cross-platform terminal apps (and games). It lets you compose complex user interfaces from small and isolated components, thus greatly simplifying the creation of terminal apps.
Impossible apps and games are bundles with no dependencies, installed via npm. They are fore and foremost Node.js apps meant to be used in the terminal, but they can also be "built" and run the browser with similar functionality and (mostly) identical UI.

Impossible.js is written from scratch. It has no dependencies (other than stable timsort). It is based on modern JavaScript features and specifically relies on extending classes as the basic building block. It implements a DOM like component tree structure and a theming engine with similarities to CSS.
The API design is original (i.e. not "inspired by" React, ncurses or other). Some of the implementation concepts are novel. Both inheritance and composition are used, and in the case of both patterns, there is something unique.
Apps can run be written to function in either "full screen" mode (TUI) or "inline" mode (CLI).
Project Overview
The project provides two development libraries impossible
and impossible-collection
, each containing multiple components which are also available as standalone packages for production builds, an app Repo Template, a tutorial and multiple example apps and games.
Development Packages
- Impossible Core (and build time replacement Impossible Web)
- Impossible Collection
Impossible Core
The core library provides three classes Stage
, Sprite
and Look
from which all components (and eventual apps) are built.
Hello World
The simplest Impossible example looks like this:
import { Stage, Sprite, Look } from 'impossible'
new Stage()
new Sprite({
look: new Look(`Hello World`)
}).toCenter()
It displays Hello World at the center of the terminal screen.

Creating a reusable Hello
component and then using it to achieve same result is done in the following manner:
import { Stage, Sprite, Look } from 'impossible'
class Hello extends Sprite {
constructor (props = {}) {
super(props)
this.look = new Look('Hello World')
this.toCenter()
}
}
new Stage()
new Hello()
Component Packages
Impossible Collection
Collection components are composite components that extend Sprite
(and/or each other). They provide functionality similar to that provided by native controls in the browser and can be used as building blocks for user defined components to speed up development.
Hello World
Example using the Marquee
component:
import { Stage } from 'impossible'
import { Marquee } from 'impossible-collection'
new Stage()
new Marquee({
text: `Hello World`
}).toCenter()
It displays an old school endlessly scrolling Hello World at the center of the terminal screen.

Using the TextInput
component:
import { Stage } from 'impossible'
import { TextInput } from 'impossible-collection'
new Stage()
new TextInput({
text: `Hello World`,
border: true
}).toCenter()
Will display text input box.

Using the ColorPicker
component:
import { Stage } from 'impossible'
import { ColorPicker } from 'impossible-collection'
new Stage()
new ColorPicker().toCenter()
Will display a color picker component.

Component Packages
- Alert
- Animated
- Blink
- Box
- BoxedText
- Boxable
- Button
- CancelButton
- Checkbox
- ColorPicker
- Combobox
- Confirm
- Container
- Dropdown
- DynamicBody
- Editable
- Entity
- Form
- HorizontalLine
- HorizontalList
- Input
- Logo
- Marquee
- NumberInput
- PasswordInput
- Pixel
- Prompt
- Radio
- Rectangle
- Screen
- Select
- Selectable
- Sensor
- StaticBody
- SubmitButton
- TabbedItem
- TabbedWindow
- Text
- TextArea
- TextInput
- Typewriter
- VerticalLine
- VerticalList
- Window
Functional Packages
Impossible App Repo Template
The Impossible App Repo Template is designed to ease the way into creating Impossible apps. It contains the required directory structure and webpack Babel configurations used to build apps that run in both the terminal and the browser.
Impossible Tutorial
The Impossible Tutorial repo uses Impossible to build several versions of an interactive Tic-Tac-Toe game. As the tutorial iterates through various ways in which such a game can be built it will also explores basic Impossible concepts and patterns as well as discusses how things work under the hood.

Impossible Demo Apps and Games
Example Games
Impossible Solitaire
Impossible Solitaire is a terminal (and web) based version of the classic card game (and Windows 3.x app). Play is mouse driven. Drag-and-Drop, Click and Double Click all work where appropriate. Game board is always centered and is also responsive. Game has multiple options and 5 color themes.

See also: https://github.com/ronilan/impossible-solitaire-demo
Impossible Snaky
Impossible Snaky is a terminal (and web) based version of the classic Nokia Phone game Snake, with some added features. There are 5 different games to play which introduce obstacles and other snakes.

Impossible Flappy
Impossible Flappy is a terminal (and web) based version of the classic iOS app with some new twists. There are 3 different games to play. Some are fun and some are just a little strange.

Example Apps
Impossible Todo
Impossible Todo is a terminal based task tracking app a-la the web based TodoMVC apps.

Impossible Hacker News
A terminal based Hacker News (news.ycombinator.com) reader.

IMPO
IMPO, the Impossible Editor, is a simple, multi file, resizable, node based, code editor, with mouse support.

Authors
(c) Ron Ilan
License
NOT LICENSED