timolins / hyperlayout

📐 Layout presets for Hyper.app

Layout presets for Hyper.app

This repo is currently unmaintained.

Feel free to contact me if you want to help maintain. Pull requests are welcome!

Install

$ npm install -g hyperlayout hpm-cli
$ hpm install hyperlayout

Usage

To get started, write your layout inside .hyperlayout.

If you already use a package.json file, you can add it there. (With with the hyperlayout key)

Alternatively you can define global layouts in ~/.hyperlayout.

.hyperlayout

[
  [
    "echo 'Hello'",
    "echo 'World'"
  ]
]

To apply the layout, simply run hyperlayout in the same directory.

$ hyperlayout

Result

Advanced example

This example shows the capabilities of hyperlayout. It demonstrates the usage inside package.json and how to define multiple layouts.

package.json

{
  "name": "my-example",
  "scripts": {
    "watch": "gulp watch",
    "serve": "nodemon build/index",
    "layout": "hyperlayout"
  },
  "hyperlayout": {
      "default": [
        [[
          "npm run watch",
          ["npm run serve", "http://localhost:3000"]
        ]],
        "mongod"
      ],
      "helloworld": {
        "entry": "horizontal",
        "layout": [
          "echo 'Hello'",
          "echo 'World'"
        ]
      }
  },
  "devDependencies": {
    "nodemon": "latest",
    "gulp": "latest",
    "hyperlayout": "latest"
  }
}

Since there are two layouts defined here, you have to tell hyperlayout which one you want to use.

$ hyperlayout # Layout: default

$ hyperlayout helloworld # Layout: helloworld

$ npm run layout # Layout: default

Result

Examples

Tabs

["1", "2"]

---

Horizontal Panes

[["1", "2"]]

or

{
  "entry": "horizontal",
  "layout": ["1", "2"]
}

---

Vertical Panes

[[["1", "2"]]]

or

{
  "entry": "vertical",
  "layout": ["1", "2"]
}

Define a layout

There are two different ways to define a layout:

Array

The most basic way is to create a nested array with strings (commands) inside. The hierarchy looks like this:

Tabs
|-- Horizontal Panes
    |-- Vertical Panes
        |-- Horizontal Panes
            |-- Vertical Panes
                |-- ...

This is a example for a vertical split using this method:

[
  [
    ["echo Hello", "echo World"]
  ]
]

Object

A layout object should contain the following key-value pairs:

• entry: <String> – You can define at which level the layout begins. Either tab, vertical or horizontal. Default value is tab.

• layout: <Array> – A layout, as described above. The only difference is, that it respects the entry point. This can make the layout more readable.

{
  "entry": "vertical",
  "layout": [
    "echo Hello", "echo World"
  ]
}

Multiple Layouts

As shown in the Advanced Example, it's possible to define multiple layouts in one project. Instead of supplying the layout directly, you define name for the layout first.

{
  "default": {
    "entry": "vertical",
    "layout": ["echo Hello", "echo World"]
  },
  "otherlayout": ["echo Hyper", "echo Term"]
}

hyperlayout will look for the default layout, when there is no parameter. If there is one, it will apply the given layout.

$ hyperlayout [NAME]

Global layouts

You can define global layouts inside ~/.hyperlayout.

hyperlayout will use these layouts when there is no configuration in the current directory. It's possible to force global layouts with the following command:

$ hyperlayout global [NAME]

or

$ hyperlayout g [NAME]

Known Issues

• It isn't possible layout multiple windows at once. If you know how to approach this feature, then head over to Issue #2 and let me know!

Author

hyperlayout is written by Timo Lins.

Special thanks to Tobias Lins, for coming up with some great solutions.

hyperlayout's Issues

Tasks are not automatically invoked on Windows

The fix is to change

function runCommand(uid, cmd) {
  window.rpc.emit('data', {
    uid,
    data: ` ${cmd}\n`
  })
}

To this:

function runCommand(uid, cmd) {
  window.rpc.emit('data', {
    uid,
    data: ` ${cmd}\n\r`
  })
}

I'm not sure how it would affect Mac/Linux though, and then do we need to check for current OS environment

Hyper becomes unresponsive when adding a webpage to the layout

Ubuntu 16.04, Hyper 1.0.0.

This works fine:

[[[
	["echo 'foo'"],["echo 'bar'", ""],["echo 'baz'", "echo 'foobar'"]
]]]

But when putting a webpage in the layout, all instances (except the webpage - which works fine) becomes unusable.

[[[
	["http://foobar/"],["echo 'bar'", ""],["echo 'baz'", "echo 'foobar'"]
]]]

Can't find layout inside config

Hey there,
Thanks for your hard work on this project 😄

I've placed the following in my ~/.hyperlayout file:

{
  "name": "example-2",
  "hyperlayout": {
      "start": [
        [[
          "npm run watch",
          ["npm run serve", "http://localhost:3000"]
        ]]
      ],
      "helloworld": {
        "entry": "horizontal",
        "layout": [
          "echo 'Hello'",
          "echo 'World'"
        ]
      }
  }
}

I get the following error: Can't find layout inside config. I looked through the source and it's looking for config.layout. Your examples don't reflect that particular JSON object is necessary. Is my JSON incorrect for leaving inside ~/.hyperlayout? I've tried all of your other basic examples and get the same errors on all of them.

Multiple tabs - only firing code in first tab

Okay so i love this package i just have this one error:

My setup:

"hyperlayout": {
	"default": [
		"npm start",
		"cd ./frontend/src && gulp",
		"git status"
	]
}

It only runs the first command npm start

If i then remove the first so it looks like this:

"hyperlayout": {
	"default": [
		"cd ./frontend/src && gulp",
		"git status"
	]
}

it still only runs the first command cd ./frontend/src && gulp

Nested layouts don't work correctly.

I've got this nested hyperlayout default config which sohuld setup my terminal to my development needs whenever I start it, but nested hyperlayout calls don't seem to work correctly.

https://gist.github.com/f4ce8415c3d2de274e78c8c7ef1b3255

The first nested call (hyperlayout dotfiles) redirects the commands into the first tab and the last nested one (hyperlayout heaven) just prints out the config.

I'd expect this to just run hyperlayout inside the terminal tab and setup properly

Problem with multiple windows

At the moment, all commands get forwarded to the first window, no matter where it's called.

"You need to use Hyper.app to run this command"

When I type hyperlayout all I'm getting is this line: "You need to use Hyper.app to run this command"

Hyperlayout does nothing: SyntaxError

I'm getting errors in my console when I try out an example.

The black rectangle is Hyper, but it doesn't like to be screenshotted for some reason :)
All I did was run: hyperlayout

Open a tab or pane without running a command

It's not a vital request and there may already be a way to do this. Currently, I just have an empty string for a pane that I want to have as empty. A way to truly just open a new section without doing anything at all would be handy though.

Apply on startup

Is there a way to configure hyperlayout to apply the default global layout on startup?

Not working on Windows 10

This packages works flawlessly at home, but at work on my Windows 10 computer, it seems to fail, showing this message: You need to use Hyper.app to run this command.

Perhaps I am missing an environment variable somehow?

Windows 10 => Can't find hyperlayout plugin in ~/.hyper.js

I followed the install instructions and created the following package.json in my test directory:

{
  "hyperlayout": {
    "default": [
      [
        "echo 'Hello'",
        "echo 'World'"
      ]
    ]
  }
}

But when I run hyperlayout, I am seeing the message Can't find hyperlayout plugin in ~/.hyper.js. You can install it with: $ hpm install hyperlayout

How to automatically run hyperlayout?

How to automatically run hyperlayout?

I've set up my hyperlayout on ~/.hyperlayout and i would like to run it every time i open hyper

Thanks!

reload hyper before execution

I got few layouts with multiple horizontal and vertical panes, but when I have to switch between layouts, it does not reload hyper and creates panes in active pane

Second pane doesn't execute configured command

I'm using the most basic .hyperlayout config:

[
  [
    "echo 'Hello'",
    "echo 'World'"
  ]
]

If I run hyperlayout it creates a second pane, runs the echo "Hello" command in the first pane but nothing in the second one. See this:

• hyper version: 1.1.0
• hyperlayout version: 0.2.1
• Shell: zsh

Any idea what's wrong here?

Configurable heights and widths for the panes

It would be awesome to be able to configure the width and height of panes.
Maybe using percentages?

I don't know if this is possible, I can change the width and heights of panes manually after I ran hyperlayout.

I tried looking into it, but I couldn't find out where to find the documentation for the new event used here: https://github.com/timolins/hyperlayout/blob/master/index.js#L133

Reuse panes instead of creating (double) new panes if hyperlayout is re-run

It would be nice if hyperlayout could reuse existing panes if the layout in the current tab matches what was requested.
If i run hyperlayout twice, something I do to have it start a bunch of servers in different panes, it will create all new panes in addition to those that are open, in effect resulting in the wrong layout.

Can't find .hyperlayout in my home directory

I just gave this plugin a shot as it seemed like it may have some features I miss from Tmux. I just used a bare example setup of two horizontal panes (from the README.md). Even though I saved this file to my home directory, I get an error that says the file cannot be found.

I guess I can try the other methods, but shouldn't this work?

Cursor does not return to first pane

Refactor code

Codebase is kinda hacky at the moment. Things like global variables could be ironed out with classes.

Better command handling

Command handling shouldn't be based on the command not found error. Parameters to support different layout-presets would also be great.

Detect if user has hyperlayout installed as a plugin

Execute hyperlayout on load

Is there any way to load hyperlayout as soon as hyper loads?

Ability to layout windows

Currently it's only possible to layout tabs & panes.

Not working with Hyper 1.0

closing a split screen terminal moves tab to end

• OS version and name: Windows 10 1803 Build 17134.706
• Hyper.app version: 3.0.0 (also noticed on 2.x.x)
• Link of a Gist with the contents of your .hyper.js: https://gist.github.com/pcnate/fcc7b45394d0c8d74f4b4f98ce329fa5
• Relevant information from devtools: N/A
• The issue is reproducible in vanilla Hyper.app: No. seems to only occur with hyperlayout installed

Issue

Current tab switches to the end of the list when exiting (possibly) the first shell on a split tab. It doesn't always happen as far as I can tell.

Steps to reproduce:

1. Open multiple tabs with multiple splits
2. switch to the first tab and type exit on the top left most terminal.
3. Check tab position. Most cases it switches to the last tab

Show better error for invalid JSON

If the only available .hyperlayout file contains invalid JSON, the "Can't find any hyperlayout preset (.hyperlayout, package.json, ~./hyperlayout)" error is shown - we should check for valid JSON first and show an error for this if necessary.

Can't find/call hyperlayout directly from command line (missing exec symlink)

Version 0.8.3
macOS Sierra

I currently can't call hyperlayout directly from the command line - for some reason it isn't recognized as an alias or there's no symlink somewhere but I'm forced to call it from within node_modules inside hyper_plugins manually.

Trailing comma will cause invalid layout

Example:

{
  "default": {
    "entry": "vertical",
    "layout": ["echo Hello", "echo World",]
  },
  "otherlayout": ["echo Hyper", "echo Term"]
}

If I have left a trailing , in my layout - which i generally do out of habit with json, in case i need to go back and append fields - i don't have to worry about errors of missing commas.

If i include it in layout, it invalidates the layout and hyperlayout won't set up my layout.

It's a minor issue, but I imagine that other people are affected by it too.

Hyperlayout simply printing out config

Hyper version: 1.0.0
OS: Linux (elementary OS Loki)

I have the following in my ./.hyperlayout (a bit verbose, but I intend to add more to it in the future):

{
  "p2lab": [
    {
      "entry": "tab",
      "layout": [
        "gitsub-dir && cd experimental/p2lab",
        {
          "entry": "vertical",
          "layout": [ "gitsub-dir && cd experimental/p2lab && yarn run watch", "gitsub-dir && cd experimental/p2lab && yarn run serve-dev" ]
        }
      ]
    }
  ],
}

When I run hyperlayout p2lab, it simply prints out:

[hyperlayout config]:{"config":{"entry":"tab","layout":[{"entry":"tab","layout":["gitsub-dir && cd experimental/p2lab",{"entry":"vertical","layout":["gitsub-dir && cd experimental/p2lab && yarn run watch","gitsub-dir && cd experimental/p2lab && yarn run serve-dev"]}]}]},"cwd":"/home"}

... and does not effect the defined layout. Am I doing something wrong?

Add GIF to README

Add GIF to the header of the README to explain hyperlayout.

An in-range update of debug is breaking the build 🚨

Version 2.4.0 of debug just got published.

Branch	Build failing 🚨
Dependency	debug
Current Version	2.3.3
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

As debug is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Commits

The new version differs by 7 commits .

• b82d4e6 release 2.4.0
• 41002f1 Update bower.json (#342)
• e58d54b Node: configurable util.inspect() options (#327)
• 00f3046 Node: %O (big O) pretty-prints the object (#322)
• bd9faa1 allow colours in workers (#335)
• 501521f Use same color for same namespace. (#338)
• e2a1955 Revert "handle regex special characters"

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴