open-index/open-npm huggingface dataset:
npm package: @oframe/cli
Description: The @oframe/cli are a small list of commands to facilitate web development.
Latest version: 1.0.3

# @oframe/cli

The @oframe/cli are a small list of commands to facilitate web development.

---

## Install

Is recommended to install globally for several reasons. It supplies the `o` global entry, making it simpler to type. It facilitates shared hosting for multiple projects, for example by serving the folder that stores multiple sites. It also simplifies the workflow, allowing you to quickly create new project structures with a single command.

```
npm i @oframe/cli -g
```

```js
yarn add @oframe/cli --global
```

However is can also equally be installed locally. This might be useful to simplify sharing projects, or automating server setup for single-page-app-style websites.

```
npm i @oframe/cli -D
```

```js
yarn add @oframe/cli -D
```

---

## Commands

All commands are recommended to be made through the provided bin: `o`.

---

# ```serve```

Using `@oframe/server`, the `serve` command creates a new http development server in the current repository.

## Syntax

If installed locally, use `npx` to access the bin in `node_modules`:

> ```npx o serve [port]```

Else use globally:

 > ```o serve [port]```

## Arguments

> ```port```

An `Integer` describing the desired port. Default is `8080`. If port unavailable, will incrementally search for an available one, rather than returning an error.

---

# ```create```

Using `@oframe/templates`, the `create` command creates a new project structure.

## Syntax

If installed locally, use `npx` to access the bin in `node_modules`:

 > ```npx o create [template]```

 Else use globally:

 > ```o create [template]```

## Arguments

> ```template```

An `String` for the template type.
npm package: @oframe/emitter
Description: ## Install
Latest version: 1.0.2

# @oframe/emitter

## Install

```
npm i @oframe/emitter
```

```
yarn add @oframe/emitter
```

```js
import { Emitter } from './Emitter.mjs';
```

## Documentation

`@oframe/emitter` is a singleton used to connect event listeners and emitters. 

It creates a global emitter, exported under `Emitter`, however users may instantiate multuple emitters from the exported `EmitterClass` class using the `new` keyword.

---

# `Emitter.on()`

`Emitter.on()` adds a new callback to the desired `name` string. Emissions of the `name` string will trigger the callbacks in the same order that they're added. The callback will be stored until the `Emitter.off()` method is called using the same parameters.

## Syntax

> `void Emitter.on(name, callback)`

## Params

> ### `name`

A `String` event name used as reference to callbacks from the `Emitter.emit()` method.

> ### `callback`

A `Function` callback to be triggered when the `Emitter.emit()` function is called with a matching `name`.

## Return value

None

---

# `Emitter.off()`

`Emitter.off()` removes a callback from the desired `name` string. Further emissions of the `name` string will no longer trigger the callback.

## Syntax

> `void Emitter.off(name, callback)`

## Params

> ### `name`

A `String` event name used as reference to callbacks from the `Emitter.emit()` method.

> ### `callback`

A `Function` callback to be triggered when the `Emitter.emit()` function is called with a matching `name`.

## Return value

None

---

# `Emitter.emit()`

`Emitter.emit()`

## Syntax

> `void Emitter.emit(name, [data])`

## Params

> ### `name`

A `String` event name used as reference to callbacks added with the `Emitter.on()` method.

> ### `data` *optional*

An `Object` to be passed to the callback functions.

## Return value

None

---
npm package: @oframe/o
Description: ## Install
Latest version: 2.0.2

# @oframe/o

## Install

```
npm i @oframe/o
```

```
yarn add @oframe/o
```

```js
import { DOM, Tick, Animate, Emitter } from './index.mjs';
```

## Documentation

`@oframe/o` is a workspace for a collection of packages. It creates a single point of import.
npm package: @oframe/router
Description: @oframe/router is a light router that supports history or hash. It requires @oframe/state and @oframe/emitter, and works with WebComponents. It is well suited for animated transitions.
Latest version: 1.0.7

# @oframe/router

@oframe/router is a light router that supports history or hash. It requires @oframe/state and @oframe/emitter, and works with WebComponents. It is well suited for animated transitions.

## Install

```
npm i @oframe/router
```
npm package: @oframe/server
Description: The @oframe/server is a node http server for development purposes. It has the following simple features:
Latest version: 1.0.5

# @oframe/server

The @oframe/server is a node http server for development purposes. It has the following simple features:

 - Static file serving
 - File streaming
 - Adds trailing slash
 - Clean urls
 - Directory listing
 - Single page app redirect
 - Automatic port designation

Development was inspired by [Servor](https://github.com/lukejacksonn/servor/), which I would recommend if you need more advanced functionality, such as https, file watching and gzip compression.

---

## Install

Is recommended to use through `@oframe/cli` global commands, however to install separately:

```
npm i @oframe/server
```

```js
yarn add @oframe/server
```

---

## Commands

All commands are recommended to be made through the provided bin: `o`.

---

# ```serve```

The `serve` command creates a new http development server in the current repository.

## Syntax

> ```node serve [path] [port]```

## Arguments

> ```path```

An `String` path description of the repository you'd like to serve from. Using `pwd` or `.` can be used in the command-line to refer to the current command path.

> ```port```

An `Integer` describing the desired port. Default is `8080`. If port unavailable, will incrementally search for an available one, rather than returning an error.

## Usage

```
node server pwd 3000
```

```
node server ./projects/
```
npm package: @oframe/state
Description: ## Install
Latest version: 1.0.2

# @oframe/state

## Install

```
npm i @oframe/state
```

```
yarn add @oframe/state
```

```js
import { State } from './State.mjs';
```

## Documentation

`@oframe/state` is a singleton used to connect event listeners and emitters. 

It creates a global emitter, exported under `State`, however users may instantiate multuple emitters from the exported `StateClass` class using the `new` keyword.

---

# `Emitter.data`

`Emitter.data` adds a new callback to the desired `name` string. Emissions of the `name` string will trigger the callbacks in the same order that they're added. The callback will be stored until the `Emitter.off()` method is called using the same parameters.

## Return value

Data.

---

# `Emitter.link()`

`Emitter.link()` adds a new callback to the desired `name` string. Emissions of the `name` string will trigger the callbacks in the same order that they're added. The callback will be stored until the `Emitter.off()` method is called using the same parameters.

## Syntax

> `void Emitter.link(props, callback)`

## Params

> ### `props`

A `String` event name used as reference to callbacks from the `Emitter.emit()` method.

> ### `callback`

A `Function` callback to be triggered when the `Emitter.emit()` function is called with a matching `name`.

## Return value

None

---

# `Emitter.unlink()`

`Emitter.unlink()` removes a callback from the desired `name` string. Further emissions of the `name` string will no longer trigger the callback.

## Syntax

> `void Emitter.unlink(props, callback)`

## Params

> ### `props`

A `String` event name used as reference to callbacks from the `Emitter.emit()` method.

> ### `callback`

A `Function` callback to be triggered when the `Emitter.emit()` function is called with a matching `name`.

## Return value

None

---

# `Emitter.push()`

`Emitter.push()`

## Syntax

> `void Emitter.push(data)`

## Params

> ### `data` *optional*

An `Object` to be passed to the callback functions.

## Return value

None

---
npm package: @oframe/tick
Description: ## Install
Latest version: 1.1.2

# @oframe/tick

## Install

```
npm i @oframe/tick
```

```
yarn add @oframe/tick
```

```js
import { Tick } from './Tick.mjs';
```

---

## Documentation

The `@oframe/tick` library includes a singleton, that consists of just one `requestAnimationFrame` and a queue of callbacks. Users can then `add` or `remove` callbacks from the queue. Having only one `requestAnimationFrame` in an application improves performance.

By default the library creates one global loop, exported under `Tick`, however users may instantiate multiple loops from the exported `TickClass` class using the `new` keyword.

---

> # Tick.add()

To attach a callback to the tick loop, use the `Tick.add()` method.

## Syntax

> `void Tick.add(callback, [fps])`

## Params

> ### `callback`

A `Function` callback to add to the queue. In the callback, the arguments `delta` and `time` are passed in by default, in that order. `delta` is the time since last frame in milliseconds. `time` is the default value passed with `requestAnimationFrame`, referring to time since site opened in milliseconds.

> ### `fps` _optional_

An `Integer` that will limit how often the callback is called. The value is in frames per second, so a value of 12 will result in the callback being called a maximum of 12 times per second. Values higher than the current framerate (usually 60) will be clamped at the framerate.

Note that if an `fps` value is passed in, the argument passed to the callback are now `frame` (no longer `delta` and `time`), referring to the callback's frame count, starting from `0`.

## Return value

None.

## Examples

```js
Tick.add(update);

function update(delta, time) {
    seconds += delta * 0.001;
    float = Math.sin(time);
}
```

```js
Tick.add(updateFrame, 12);

function updateFrame(frame) {
    const currentFrame = frame % frames.length;
    drawFrame(currentFrame);
}
```

---

> # Tick.remove()

To remove a callback, use the `Tick.remove()` method.

## Syntax

> `void Tick.remove(callback)`

## Params

> ### `callback`

A `Function` callback to be removed from the queue.

## Return value

None.

---

Can detach tick from requestAnimationFrame by setting `autoplay` to `false`.

> `Tick.autoplay = false;`

Then can manually step the desired delta value.

> `Tick.step(16);`

---

Can also create new Tick instances using `TickClass`.

> `const newTick = new TickClass({ autoplay: false });`