Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »

hyperlayout

0.2.1 • Public • Published

Layout presets for Hyper.app

Build Status XO code style

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

Demo 1

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

Demo 2

Examples

Tabs

Example 1

["1", "2"]

Horizontal Panes

Example 2

[["1", "2"]]

or

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

Vertical Panes

Example 3

[[["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.

Keywords

install

npm i hyperlayout

Downloadsweekly downloads

510

version

0.2.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability