open-index/open-npm huggingface dataset:
npm package: @merzin/element
Description: This package exports two (2) primary functions:
Latest version: 0.3.0

# Element

This package exports two (2) primary functions:

- `createElement`: extended `document.createElement` which can be used as a JSX
  factory. It has an alias `h` which is also exported. Can also be imported from
  "@merzin/element/createElement".
- `tag`: class decorator function for declaring the tag name of a web component.
  Can also be imported from "@merzin/element/tag".

When importing package root — "@merzin/element", functions `tag` and
`createElement` (also it's alias `h`) are injected into `globalThis` which means
they can be used without explicitly importing them in the current file and in
all subsequently imported files.

## Decorator `tag`

Class decorator `tag` can be used to define a custom element. Note that tag name
must include a hyphen.

```typescript
import { tag } from "@merzin/element/tag";

@tag("my-component")
class MyComponent extends HTMLElement {}

document.createElement("my-component");
```

## Function `createElement`

Function `createElement` (and it's alias `h`) is an extended version of
`document.createElement`. `createElement` can be used to create HTML elements
with a tag name, the same as `document.createElement`.

But `createElement` optionally accepts one or more additional arguments. The
second parameter is a properties object of values to be assigned to the element
after creation. Rest of the arguments are treated as content and are appended
to the element. Content arguments can be of type `string`, `HTMLElement`,
`false`, `null`, `undefined` or an array of them (falsy values are ignored).

The first argument can also be a
[`Factory<HTMLElement>`](https://npmjs.com/@merzin/factory), i.e. an
`HTMLElement` or a class extending `HTMLElement` with no constructor parameters
or a function returning an `HTMLElement` with no parameters.

## Example

```typescript
import "@merzin/element";

@tag("input-element")
class InputElement extends HTMLElement {
  private labelElement: HTMLLabelElement;
  private inputElement: HTMLInputElement;

  get label(): string {
    return this.labelElement.innerText;
  }
  set label(value: string) {
    this.labelElement.innerText = value;
  }
  get value(): string {
    return this.inputElement.value;
  }
  set value(value: string) {
    this.inputElement.value = value;
  }

  constructor() {
    super();
    this.replaceChildren(
      (this.labelElement = createElement("label", {}, "Initial label")),
      (this.inputElement = createElement("input", { type: "text" })),
    );
  }
}

const input = createElement(InputElement, {
  label: "Label",
  value: "Value",
});
```
npm package: @merzin/factory
Description: Type `Factory<T>` is either a value `T` or a class that constructs (extends) `T` or a function that returns `T`. It also accepts a second generic that is used to declare the type of the arguments that the factory function or class constructor accepts. `Fa
Latest version: 0.1.0

# Factory

Type `Factory<T>` is either a value `T` or a class that constructs (extends) `T`
or a function that returns `T`. It also accepts a second generic that is used to
declare the type of the arguments that the factory function or class constructor
accepts. `Factory<number, [string, boolean]>` matches function
`(a: string, b: boolean) => number`.

Package exports two (2) functions `resolveFactory` and `isClass`. Function
`resolveFactory` takes a `Factory<T, A>` and destructured arguments `A` and
returns a value of type `T`. Function `isClass` takes a value and returns
whether the value is a class or not.
npm package: @merzin/hello
Description: This is a simple package which can be imported as a typescript library and be executed with npx.
Latest version: 1.1.0

This is a simple package which can be imported as a typescript library and be
executed with npx.

## Usage

Importing as a library:

```typescript
import { hello } from "@merzin/hello";
hello("John Doe", "Jane Doe");
```

Executing with npx:

```bash
npx @merzin/hello 'John Doe' 'Jane Doe'
```

> Note: When you clone this repository and try to run `npx @merzin/hello`
> inside, you will get an error, but `npx hello` will work.

When installed as a dependency, the package can be executed as `package.json`
script.

```json
{
  "scripts": {
    "hello": "hello 'John Doe' 'Jane Doe'"
  },
  "dependencies": {
    "@merzin/hello": "1.0.0"
  }
}
```

```bash
npm run hello
```

When inside a package which has `@merzin/hello` as a dependency, the package
can be executed as follows:

```bash
npx hello 'John Doe' 'Jane Doe'
```

## Development

To build the package, run `npm run build`. This will create a `lib` folder with
the compiled code. The package is written in TypeScript and targets ES6 with
esnext modules.

This package includes tests which can be run with `npm test`.
npm package: @merzin/inject-sw
Description: Inject a service worker into a static website
Latest version: 1.0.0

# @merzin/inject-sw

This is a simple tool to inject a service worker into your bundled website.
This package is for when you don't need fine control over your service worker
but just offline support for your web app. It is intended to be used as a
post-build step in your build pipeline.

Example usage:

```bash
npx @merzin/inject-sw dist
```

Where `dist` is the directory where your website is built and contains an
`index.html` file.

> Note: This package does not generate
> [web app manifest](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest).
> For your web app to be installable, you need to generate a manifest file and
> include it in your `index.html`.

To use with Vite, add the following to your `package.json`:

```json
{
  "scripts": {
    "build": "vite build && inject-sw dist"
    ...
  }
  "devDependencies": {
    "@merzin/inject-sw": "1"
    ...
  }
}
```

## Base Path

When deploying to a subroute, e.g. GitHub Pages, you should specify the base
path in the `inject-sw` command:

```bash
npx @merzin/inject-sw dist --base /my-app
```

Where `/my-app` is the base path of your website (repository name for GitHub
Pages).

## Ignoring Files

To exclude files from service worker install, add `--ignore` flag. This is
needed for example for Netlify's `_redirects` and `_headers` files which aren't
public and would result in service worker installation failure.

```bash
npx @merzin/inject-sw dist --ignore _redirects,_headers
```
npm package: @merzin/touch
Description: <div align="center">   <img src="https://gitlab.com/merzin/touch/-/raw/main/icon.svg" alt="Icon" width="300" height="300"> </div> <div align="center">   <img src="https://gitlab.com/merzin/touch/-/raw/main/label.svg" alt="Touch" width="260" height="130"> 
Latest version: 0.2.7

<div align="center">
  <img src="https://gitlab.com/merzin/touch/-/raw/main/icon.svg" alt="Icon" width="300" height="300">
</div>
<div align="center">
  <img src="https://gitlab.com/merzin/touch/-/raw/main/label.svg" alt="Touch" width="260" height="130">
</div>
<div align="center">
  <p>Multi-touch event handlers.</p>
</div>
npm package: @mesa-engine/cli
Description: @mesa-engine/cli ================ [![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io) [![Version](https://img.shields.io/npm/v/@mesa-engine/cli.svg)](https://npmjs.org/package/@mesa-engine/cli) [![Downloads/week](https://i
Author: Aaron Sorensen @indiebash
Latest version: 0.0.14

@mesa-engine/cli
================
[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/@mesa-engine/cli.svg)](https://npmjs.org/package/@mesa-engine/cli)
[![Downloads/week](https://img.shields.io/npm/dw/@mesa-engine/cli.svg)](https://npmjs.org/package/@mesa-engine/cli)
[![License](https://img.shields.io/npm/l/@mesa-engine/cli.svg)](https://github.com/indiebash/cli/blob/master/package.json)

# Installation
```sh
$ npm install -g @mesa-engine/cli
```

# Usage
Creating and running a new application
```sh
$ mesa new my-app
$ cd my-app
$ npm install
$ mesa run
```

Once the project has been generated, you can use the cli to create new components, systems, and blueprints.

For example, creating a position component:
```sh
$ mesa component position
```
Would create a PositionComponent class in the src/components folder.

If you wish to nest elements in sub-folders simply add slashes:
```sh
$ mesa component physics/velocity
```
Which would create a VelocityComponent class in src/components/physics/.

# Commands
Command | Description
--- | ---
new [name] | Creates a new mesa project
component [name] | Creates a new component
system [name] | Creates a new system
blueprint [name] | Creates a new blueprint
run | Builds and runs application

The "run" command will host your code and watch for any changes made. If change is detected it will rebuild and refresh the application.

At any point you can type the "help" command for details.
```sh
$ mesa help
...
$ mesa [command] --help
...
```