open-index/open-npm huggingface dataset:
npm package: @jonatangroncode/jsview
Description: Run JavaScript files and view output in your browser
Latest version: 0.1.3

# jsview

Run a JavaScript file and instantly preview the result in your browser with automatic reload.

`jsview` is a lightweight CLI tool that starts a local server, opens your browser, and reloads the page whenever your JavaScript file is saved.

Perfect for quickly testing small scripts without setting up a full project or dev server.

---

## Installation

Install globally with npm:

```bash
npm install -g jsview
```

---

## Usage

Run a JavaScript file and open it in your default browser:

```bash
jsview test.js
```

The browser will open automatically and reload whenever the file is saved.

---

## Split Preview Mode (macOS)

You can open a split preview in Safari using:

```bash
jsview-p test.js
```

This will:

- start the local server
- open Safari
- position the browser window on the right half of the screen
- reload automatically when the file changes

Note: `jsview-p` currently supports **macOS + Safari**.

---

## Example

Example `test.js`:

```javascript
document.body.innerHTML = "<h1>Hello jsview</h1>";
```

Run:

```bash
jsview test.js
```

Edit the file and save — the browser will reload automatically.

---

## How it works

`jsview`:

1. Starts a small local server
2. Generates an HTML page that runs your script
3. Opens the page in your browser
4. Watches the file for changes
5. Reloads the browser using WebSockets when the file is saved

---

## Commands

| Command | Description |
|--------|-------------|
| `jsview <file>` | Run a JavaScript file and preview in the default browser |
| `jsview-p <file>` | Run the file and open Safari in split preview mode |

---

## Tips

For the best experience enable **Auto Save** in your editor so the page reloads automatically while you work.

Example in VS Code:

Settings → Files → Auto Save → After Delay

---

## Requirements

- Node.js 18+
- macOS (for `jsview-p` split preview)

---

## License

MIT
npm package: @jonatanheyman/leaflet-areaselect
Description: A fixed positioned, resizable rectangle for selecting an area on the map.
Author: Jonatan Heyman
Latest version: 1.2.0

# Leaflet AreaSelect [![npm version](https://badge.fury.io/js/@jonatanheyman%2Fleaflet-areaselect.svg)](https://badge.fury.io/js/@jonatanheyman%2Fleaflet-areaselect)

AreaSelect is a leaflet plugin for letting users select a square area (bounding box), 
using a resizable centered box on top of the map. 

![longitude.me](https://s3-eu-west-1.amazonaws.com/heyman.info/screenshots/leaflet-areaselect.jpg)

Another similar plugin is [leaflet-locationfilter](https://github.com/kajic/leaflet-locationfilter), 
which solves the same problem but provides a rectangle that is movable and not fixed to the center, 
but doesn't support keeping the aspect ratio.

## Example Code
```javascript
    // Add it to the map
    var areaSelect = L.areaSelect({width:200, height:300, minWidth:40, minHeight:40, minHorizontalSpacing:40, minVerticalSpacing:100, keepAspectRatio:false});
    areaSelect.addTo(map);
    
    // Read the bounding box
    var bounds = areaSelect.getBounds();
    
    // Get a callback when the bounds change
    areaSelect.on("change", function() {
        console.log("Bounds:", this.getBounds());
    });
    
    // Set the dimensions of the box
    areaSelect.setDimensions({width: 500, height: 500})

    // And to remove it do:
    //areaSelect.remove();
```

#### To make it keep the aspect ratio:

```javascript
    var areaSelect = L.areaSelect({width:200, height:300, keepAspectRatio:true});
```

#### To set the selected area (not compatible with `keepAspectRatio:true`):

```javascript
    areaSelect.setBounds([{lat:59.2272559, lng:17.7606917}, {lat:59.4402838, lng:18.2000673}]);
```

## See it in action

Check out the [bundled example](http://heyman.github.io/leaflet-areaselect/example/).

## Author

AreaSelect is developed by [Jonatan Heyman](http://heyman.info).

## License

MIT License