open-index/open-npm huggingface dataset:
npm package: @modular-component/core
Description: Delightfully organized and deeply testable React Components
Latest version: 0.3.4

# @modular-component/core

Core system for creating Modular components. Exports the `ModularComponent` factory function, as well as
helpers for creating stages.

## Installation and usage

```bash
yarn add @modular-component/core
```

```tsx
// Usage in apps
import { ModularComponent, render } from '@modular-component/core'

const MyComponent = ModularComponent().with(
  render(() => <div>Hello Modular!</div>),
)
```

```tsx
// Or by extending the factory
import { ModularComponent } from '@modular-component/core'
import '@modular-component/core/register'

const MyComponent = ModularComponent().withRender(() => (
  <div>Hello Modular!</div>
))
```

```tsx
// Usage in extensions
import { ModularContext, addTo } from '@modular-component/core/extend'

export function extension<Context extends ModularContext>() {
  return addTo<Context>()
    .on('field')
    .provide((args) => {
      // Compute value for argument 'field' from previous stage arguments
    })
}
```

## Learn more

Read the [`ModularComponent` ReadMe](https://github.com/modular-component/modular-component/blob/master/README.md) for more information about the `ModularComponent` system.
npm package: @modular-component/default
Description: Sensible defaults for the ModularComponent system
Latest version: 0.3.4

# @modular-component/default

Set of sensible defaults for using `ModularComponent`.

Provides two stages: `lifecycle()` for adding a lifecycle hook, and `defaultProps()` for
providing default values for props. It also re-exports `render()` from `@modular-component/props` for convenience.

It's also possible to import each of them individually through [`@modular-component/with-lifecycle`](https://npmjs.com/package/@modular-component/with-lifecycle)
and <br /> [`@modular-component/with-default-props`](https://npmjs.com/package/@modular-component/with-default-props) respectively.

## Usage

**Stage function imports**

```tsx
import { ModularComponent } from '@modular-component/core'
import { defaultProps, lifecycle, render } from '@modular-component/default'

const MyComponent = ModularComponent()
  .with(
    defaultProps({
      // Define default props here
    }),
  )
  .with(
    lifecycle(() => {
      // Write component state & logic here
    }),
  )
  .with(
    render(({ props, lifecycle }) => {
      // Use generated props and lifecycle in the render phase
    }),
  )
```

**Stage registration**

```tsx
import { ModularComponent } from '@modular-component/core'
import '@modular-component/default/register'

const MyComponent = ModularComponent()
  .withDefaultProps({
    // Define default props here
  })
  .withLifecycle(() => {
    // Write component state & logic here
  })
  .withRender(({ props, lifecycle }) => {
    // Use generated props and lifecycle in the render phase
  })
```
npm package: @modular-component/with-components
Description: Subcomponents injection for the ModularComponent system
Latest version: 0.3.4

# @modular-component/with-components

Provides a `components()` stage that fills the `components` argument with
a map of React components. Useful when running tests in an environment that
does not allow module mocking: sub-components can be stubbed in tests by
mocking the stage to replace their implementations.

## Usage

**Stage function imports**

```tsx
import { ModularComponent, render } from '@modular-component/core'
import { components } from '@modular-component/with-components'

import { SomeComponent } from 'some-component'

const MyComponent = ModularComponent()
  .with(components({ SomeComponent }))
  .with(render(({ props, components }) => <components.SomeComponent />))
```

**Stage registration**

```tsx
import { ModularComponent } from '@modular-component/core'
import '@modular-component/core/register'
import '@modular-component/with-components/register'

import { SomeComponent } from 'some-component'

const MyComponent = ModularComponent()
  .withComponents({ SomeComponent })
  .withRender(({ props, components }) => <components.SomeComponent />)
```

## Replacing sub-components

Replacing sub-components can be done either by updating or mocking the stage.
It allows creating a clone of the component with a different sub-components implementation,
either for tests or for content.
For instance, one could imagine a `Layout` base component taking advantage of this functionality:

```tsx
const PageLayout = ModularComponent()
  .withComponents({
    Title: React.Fragment,
    Subtitle: React.Fragment,
    Content: React.Fragment,
    Footer: React.Fragment,
  })
  .withRender(({ components }) => {
    // Build a layout using <components.Title />, <components.Subtitle />...
  })

const PageOne = PageLayout.withComponents({
  Title: () => <>First page</>,
  Subtitle: () => <>I have a subtitle but no footer</>,
  Content: () => <>First page content</>,
  Footer: React.Fragment,
})

const PageTwo = PageLayout.withComponents({
  Title: () => <>Second page</>,
  Subtitle: React.Fragment,
  Content: () => <>Second page content</>,
  Footer: () => <>I have a footer but no subtitle</>,
})
```

## Stage registration

You can either automatically register the stage on `withComponents` by importing `@modular-component/with-components/register`,
or handle the registration manually thanks to the `components` function and `WithComponents` type exports.

For instance, here is how you could register it on `withSubComponents` instead:

```ts
import { ModularComponent, ModularContext } from '@modular-component/core'
import { components, WithComponents } from '@modular-component/with-components'

// Register the stage on the factory
ModularComponent.register({ subComponents: components })

// Extend the type definition
declare module '@modular-component/stages' {
  export interface ModularComponentStages<Context extends ModularContext> {
    withSubComponents: WithComponents<Context>
  }
}
```
npm package: @modular-component/with-lifecycle
Description: ModularComponent stage for handling stateful lifecycle. Part of the @modular-component/default package.
Latest version: 0.3.4

# @modular-component/with-lifecycle

Basic stage allowing to save the result of a custom hook to a `lifecycle` argument passed down to further stages.
The lifecycle hook receives the previous argument map as parameter, and can therefore use props or any other
injected argument.

## Usage

**Stage function imports**

```tsx
import { ModularComponent, render } from '@modular-component/core'
import { lifecycle } from '@modular-component/with-lifecycle'

const MyComponent = ModularComponent()
  .with(
    lifecycle(({ props }) => {
      // Write component state & logic here
    }),
  )
  .with(
    render(({ props, lifecycle }) => {
      // Use computed lifecycle in the render phase
    }),
  )
```

**Stage registration**

```tsx
import { ModularComponent } from '@modular-component/core'
import '@modular-component/core/register'
import '@modular-component/with-lifecycle/register'

const MyComponent = ModularComponent()
  .withLifecycle(({ props }) => {
    // Write component state & logic here
  })
  .withRender(({ props, lifecycle }) => {
    // Use computed lifecycle in the render phase
  })
```

## Stage registration

You can either automatically register the stage on `withLifecycle` by importing `@modular-component/with-lifecycle/register`,
or handle the registration manually thanks to the `lifecycle` function and `WithLifecycle` type exports.

For instance, here is how you could register it on `withLogic` instead:

```ts
import { ModularComponent, ModularContext } from '@modular-component/core'
import { lifecycle, WithLifecycle } from '@modular-component/with-lifecycle'

// Register the stage on the factory
ModularComponent.register({ logic: lifecycle })

// Extend the type definition
declare module '@modular-component/stages' {
  export interface ModularComponentStages<Context extends ModularContext> {
    withLogic: WithLifecycle<Context>
  }
}
```
npm package: @modular-css/browserify
Description: Browserify transform for modular-css
Author: Pat Cavit
Latest version: 29.0.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@modular-css/browserify  [![NPM Version](https://img.shields.io/npm/v/@modular-css/browserify.svg)](https://www.npmjs.com/package/@modular-css/browserify) [![NPM License](https://img.shields.io/npm/l/@modular-css/browserify.svg)](https://www.npmjs.com/package/@modular-css/browserify) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/browserify.svg)](https://www.npmjs.com/package/@modular-css/browserify)
===========

Browserify support for [`modular-css`](https://github.com/tivac/modular-css).

This plugin can be combined with the `factor-bundle` plugin to output a common CSS file as well as bundle-specific CSS files.

`@modular-css/browserify` will use the `basedir` passed to browserify as it's `cwd` parameter.

- [Install](#install)
- [Options](#options)
- [CLI](#cli)
- [API](#api)
- [factor-bundle](#factor-bundle)

## Install

```bash
$ npm i @modular-css/browserify
```

## Options

### `css`

Location to write the generated CSS file to.

### Shared Options

All other options are passed to the underlying `Processor` instance, see [Options](../processor/README.md#options).

## CLI

```
$ browserify -p [ @modular-css/browserify --css "./style.css" ] entry.js
```

## API

```js
var browserify = require("browserify"),
    build;

build = browserify("./entry.js");

build.plugin("@modular-css/browserify", {
    css : "./style.css",
});
```

## factor-bundle

`@modular-css/browserify` is fully `factor-bundle` aware and will output correctly-partitioned CSS bundles to match the JS bundles created by `factor-bundle`.

**WARNING**: Due to how `factor-bundle` works the `@modular-css/browserify` plugin must be applied to the Browserify object **before** `factor-bundle`.

### CLI

```
$ browserify home.js account.js \
    -p [ @modular-css/browserify --css gen/common.css ] \
    -p [ factor-bundle -o gen/home.js -o gen/account.js ] \
    -o bundle/common.js
```

### API

```js
var build = browserify([
    "./home.js",
    "./account.js"
]);

// NOTE modular-css applied before factor-bundle, it won't work otherwise!
build.plugin("@modular-css/browserify", {
    css : "./gen/common.css"
});

build.plugin("factor-bundle", {
    outputs : [
        "./gen/home.js",
        "./get/account.js"
    ]
});
```
npm package: @modular-css/cli
Description: CLI for modular-css
Author: Pat Cavit
Latest version: 29.0.6

@modular-css/cli  [![NPM Version](https://img.shields.io/npm/v/@modular-css/cli.svg)](https://www.npmjs.com/package/@modular-css/cli) [![NPM License](https://img.shields.io/npm/l/@modular-css/cli.svg)](https://www.npmjs.com/package/@modular-css/cli) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/cli.svg)](https://www.npmjs.com/package/@modular-css/cli)
===========

CLI interface to [`modular-css`](https://github.com/tivac/modular-css).

- [Install](#install)
- [Usage](#usage)

## Install

```bash
$ npm i @modular-css/cli
```

## Usage

```
$ modular-css [options] <glob>...

Options
--dir,     -d <dir>    Directory to search from [process cwd]
--out,     -o <file>   File to write output CSS to [stdout]
--json,    -j <file>   File to write output compositions JSON to
--map,     -m          Include inline source map in output
--rewrite, -r          Control rewriting of url() references in CSS
--help                 Show this help
```
npm package: @modular-css/css-to-js
Description: modular-css powered conversion of CSS to JavaScript
Author: Pat Cavit
Latest version: 29.1.4

# @modular-css/css-to-js

Internal package, used to take a `modular-css` processed file and turn it into a variety of JS-appropriate information.

Used by `@modular-css/rollup`, `@modular-css/vite`, and `@modular-css/wepback`.

## Usage

Probably don't?
npm package: @modular-css/glob
Description: Glob support for modular-css
Author: Pat Cavit
Latest version: 29.0.6

@modular-css/glob [![NPM Version](https://img.shields.io/npm/v/@modular-css/glob.svg)](https://www.npmjs.com/package/@modular-css/glob) [![NPM License](https://img.shields.io/npm/l/@modular-css/glob.svg)](https://www.npmjs.com/package/@modular-css/glob) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/glob.svg)](https://www.npmjs.com/package/@modular-css/glob)
===========

A JS API for using glob patterns with [`modular-css`](https://github.com/tivac/modular-css).

- [Install](#install)
- [Usage](#usage)
- [Options](#options)

## Install

`$ npm i @modular-css/glob`

## Usage

```js
var glob = require("@modular-css/glob");

glob({
    search : [
        "**/*.css"
    ]
})
.then((processor) => {
    // returns a filled-out Processor instance you can use
})
```

## Options

`glob()` accepts all of the same options as a [`Processor` instance](../processor/README.md#options).

#### `search`

Array of glob patterns to pass to [`globule`](https://www.npmjs.com/package/globule) for searching.
npm package: @modular-css/path-aliases
Description: Custom file resolver supporting directory aliases for modular-css
Author: Pat Cavit
Latest version: 28.0.0

@modular-css/path-aliases [![NPM Version](https://img.shields.io/npm/v/@modular-css/path-aliases.svg)](https://www.npmjs.com/package/@modular-css/path-aliases) [![NPM License](https://img.shields.io/npm/l/@modular-css/path-aliases.svg)](https://www.npmjs.com/package/@modular-css/path-aliases) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/path-aliases.svg)](https://www.npmjs.com/package/@modular-css/path-aliases)
===========

A resolver for [`modular-css`](https://github.com/tivac/modular-css) that will let you resolve file references against named aliases. Useful to avoid code like

```
@value foo from "../../../../../../../../some/other/directory/file.css";
```

which is annoying to write, annoying to read, and also super-brittle.

## Install

`$ npm i @modular-css/path-aliases`

## Usage

Pass as part of the `resolvers` array in the `modular-css` options (via JS API/Rollup/Browserify/WebPack/etc). When `modular-css` is trying to resolve `@value` or `composes` file references it'll replace the alias keys with their path value for file lookups.

```js
var Processor = require("@modular-css/processor"),
    aliases   = require("@modular-css/path-aliases")

    processor = new Processor({
        resolvers : [
            aliases({
                aliases : {
                    one  : "./path/one",
                    path : "../../some/other/path"
                }
            })
        ]
    });
```

which allows you to write CSS like this.

```css
@value one from "one/one.css";

.a {
    composes: path from "path/path.css";
}
```

### Options

#### `aliases`

A `object` consisting of key/value pairs of alias names to file paths. Paths can be relative to the `cwd` of the `Processor` instance or absolute paths.
npm package: @modular-css/path-resolver
Description: Custom file resolver supporting multiple paths for modular-css
Author: Pat Cavit
Latest version: 28.0.0

@modular-css/path-resolver [![NPM Version](https://img.shields.io/npm/v/@modular-css/path-resolver.svg)](https://www.npmjs.com/package/@modular-css/path-resolver) [![NPM License](https://img.shields.io/npm/l/@modular-css/path-resolver.svg)](https://www.npmjs.com/package/@modular-css/path-resolver) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/path-resolver.svg)](https://www.npmjs.com/package/@modular-css/path-resolver)
===========

A resolver for [`modular-css`](https://github.com/tivac/modular-css) that will let you resolve file references against arbitrary paths. Useful to avoid code like

```
@value foo from "../../../../../../../../some/other/directory/file.css";
```

which is annoying to write, annoying to read, and also super-brittle.

- [Install](#install)
- [Usage](#usage)
- [Options](#options)

## Install

`$ npm i @modular-css/path-resolver`

## Usage

Pass as part of the `resolvers` array in the `modular-css` options (via JS API/Rollup/Browserify/WebPack/etc). When `modular-css` is trying to resolve `@value` or `composes` file references it'll use the default node resolution algorithm against whichever paths you specified.

```js
const Processor = require("@modular-css/processor");
const paths     = require("@modular-css/path-resolver");

const processor = new Processor({
    resolvers : [
        paths({
            paths : [
                "./path/one",
                "../../some/other/path"
            ]
        })
    ]
});
```

## Options

### `paths`

An array of string file paths, they can be relative to the `cwd` of the `Processor` instance or absolute paths.
npm package: @modular-css/postcss
Description: Use modular-css via postcss
Author: Pat Cavit
Latest version: 29.0.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@modular-css/postcss [![NPM Version](https://img.shields.io/npm/v/@modular-css/postcss.svg)](https://www.npmjs.com/package/@modular-css/postcss) [![NPM License](https://img.shields.io/npm/l/@modular-css/postcss.svg)](https://www.npmjs.com/package/@modular-css/postcss) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/postcss.svg)](https://www.npmjs.com/package/postcss-modular-css)
===========

PostCSS plugin to use [`modular-css`](https://github.com/tivac/modular-css) within a PostCSS processor instance.

- [Install](#install)
- [Usage](#usage)
- [Options](#options)

## Install

```bash
> npm i @modular-css/postcss postcss
```

## Usage

`@modular-css/postcss` provides a PostCSS plugin that can be used like any other. It will output a message with a `type` of `modular-css-exports` containing all the exported class compositions.

### API

```js
const postcss = require("postcss");
const processor = postcss([
    require("@modular-css/postcss")({
        json : "./path/to/output.json"
    })
]);

const result = await processor.process("<css>")

// result.css
// result.map
// result.messages.find((msg) => msg.type === "modular-css-exports")
// etc
```

### Config

```bash
> postcss --config postcss.json input.css
```

```json
{
    "output" : "out.css",
    
    "@modular-css/postcss": {
        "json" : "./path/to/output.json"
    }
}

```

### CLI

```bash
> postcss --use modular-css/postcss input.css
```

## Options

### `json`

Write the class composition data to this location on disk.

### Shared Options

All other options are passed to the underlying `Processor` instance, see [Options](../processor/README.md#options).
npm package: @modular-css/shortnames
Description: Helper function to make tiny classnames for modular-css
Author: Pat Cavit
Latest version: 28.0.0

@modular-css/shortnames [![NPM Version](https://img.shields.io/npm/v/@modular-css/shortnames.svg)](https://www.npmjs.com/package/@modular-css/shortnames) [![NPM License](https://img.shields.io/npm/l/@modular-css/shortnames.svg)](https://www.npmjs.com/package/@modular-css/shortnames) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/shortnames.svg)](https://www.npmjs.com/package/@modular-css/shortnames)
=================

Tiny classnames for [`modular-css`](https://github.com/tivac/modular-css) production builds!

- [Install](#install)
- [Usage](#usage)

## Install

```bash
> npm install @modular-css/shortnames
```

## Usage

### JS API

```js
const Processor = require("@modular-css/processor");
const processor = new Processor({
    namer : require("@modular-css/shortnames")()
});
    
// ...
```

### Browserify

```js
build.plugin("@modular-css/browserify", {
    css   : "./style.css",
    namer : require("@modular-css/shortnames")()
});

// ...
```

### Rollup

```js
rollup({
    entry   : "./index.js",
    plugins : [
        require("@modular-css/rollup")({
            css   : "./gen/index.css",
            namer : require("@modular-css/shortnames")()
        })
    ]
});
```

## Example output

```css
/* one.css */
.alert {}
.notification {}

/* two.css */
.title {}
.heading .subheading {}
```

becomes

```css
/* output.css */
.AA {}
.AB {}

.BA {}
.BB .BC {}
```
npm package: @modular-css/stylelint-config
Description: Stylelint config to suport modular-css syntax
Author: Pat Cavit
Latest version: 28.0.0

@modular-css/stylelint-config  [![NPM Version](https://img.shields.io/npm/v/@modular-css/stylelint-config.svg)](https://www.npmjs.com/package/@modular-css/stylelint-config) [![NPM License](https://img.shields.io/npm/l/@modular-css/stylelint-config.svg)](https://www.npmjs.com/package/@modular-css/stylelint-config) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/stylelint-config.svg)](https://www.npmjs.com/package/@modular-css/stylelint-config)
===========

Sharable stylelint config for [`modular-css`](https://m-css).

By default stylelint will complain about things like `@value`, `@composes`, `composes: fooga;`, and other bits of custom modular-css syntax. This configures the relevant stylelint rules so that those bits of functionality are ignored so that you don't get a bunch of bogus warnings or errors for using modular-css.

Someday it might even validate things for you, but that's a trickier proposition. For now not barfing errors/warnings everywhere is a good start.

- [Install](#install)
- [Usage](#usage)

## Install

```bash
> npm i @modular-css/stylelint -D
```

## Usage

Inside your [stylelint config](https://stylelint.io/user-guide/configuration/) you'll specify an [`extends`](https://stylelint.io/user-guide/configuration/#extends) property pointing to this package.

```js
{
    "extends" : "@modular-css/stylelint-config",
    "rules" : {
        // ...
    }
}
```
npm package: @modular-css/svelte
Description: Add modular-css support to svelte
Author: Pat Cavit
Latest version: 29.0.6

@modular-css/svelte  [![NPM Version](https://img.shields.io/npm/v/@modular-css/svelte.svg)](https://www.npmjs.com/package/@modular-css/svelte) [![NPM License](https://img.shields.io/npm/l/@modular-css/svelte.svg)](https://www.npmjs.com/package/@modular-css/svelte) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/svelte.svg)](https://www.npmjs.com/package/@modular-css/svelte)
===========

Svelte preprocessor support for [`modular-css`](https://github.com/tivac/modular-css).

Process inline `<style type="text/m-css">` or `<link>` or `import styles from "./foo.css";` references inside your Svelte components using the full power of `modular-css`. Dynamic references will be replaced where possible with static ones, allowing for greater compile-time optimizations, smaller bundles, and even faster runtime performance!

## Example

Turns this

```html
<div class="{css.main}">
    <h1 class="{css.title}">Title</h1>
</div>

<style>
    .main {
        ...
    }

    .title {
        ...
    }
</style>
```

into what is effectively this

```html
<div class="abc123_main">
    <h1 class="abc123_title">Title</h1>
</div>
```

See the svelte section on [m-css.com](https://m-css.com/api/#other-tools-svelte-preprocessor) for more details.
npm package: @modular-css/vite
Description: vite support for modular-css
Author: Pat Cavit
Latest version: 30.2.5

# @modular-css/vite  [![NPM Version](https://img.shields.io/npm/v/@modular-css/vite.svg)](https://www.npmjs.com/package/@modular-css/vite) [![NPM License](https://img.shields.io/npm/l/@modular-css/vite.svg)](https://www.npmjs.com/package/@modular-css/vite) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/vite.svg)](https://www.npmjs.com/package/@modular-css/vite)

Vite support for [`modular-css`](https://github.com/tivac/modular-css).

- [Install](#install)
- [Usage](#usage)
- [Options](#options)

## Install

```shell
> npm i @modular-css/vite
```

## Usage

```javascript
// vite.config.js
import mcss from "@modular-css/vite";

export default {
    plugins : [
        mcss()
    ]
};
```

## Options

### `include`/`exclude`

A minimatch pattern, or an array of minimatch patterns, relative to `process.cwd()`. `include` defaults to `**/*.css`.

### `processor`

Pass an already-instantiated `Processor` instance to the vite plugin. It will then add any files found when traversing the modules to it and both the vite-discovered and any already-existing files will be output in the final CSS.

#### `styleExport`

You can disable returning the style string, eg `import { styles } from "./style.css";`, by setting `styleExport` to `false`. Defaults to `true`.

#### `defaultExport`

You can disable exporting classes as default export, eg `import styles from "./style.css";`, by setting `defaultExport` to `false`. Defaults to `true`.

#### `variableDeclaration`

You can set variable declaration kind, eg `var mc_rule = ...;`, by setting `variableDeclaration` to `var`. Defaults to `const`.

### Shared Options

All other options are passed to the underlying `Processor` instance, see the [Processor Options](https://m-css.com/api/#direct-usage-js-api-processor-options).
npm package: @modular-forms/preact
Description: The modular and type-safe form library for Preact
Author: Fabian Hiller
Latest version: 0.12.1

# Modular Forms

Modular Forms is a JavaScript library built on [Preact](https://github.com/preactjs/preact) to validate and handle various types of forms. It is type-safe, fast by default and the bundle size is small due to a modular design. Try it out in our [playground](https://modularforms.dev/playground)!

## ✨ Highlights

- Small bundle size starting at 3 KB
- It's fast – DOM updates are fine-grained
- Type safety with autocompletion in editor
- Validate everything from emails to files
- Minimal, readable and well thought out API
- Modular design – only use what you need
- No dependencies – except for Preact
- It's headless – you define the visual
- Supports all native HTML form fields

## 🏔 Mission

The mission of Modular Forms is to gather the latest available experience and knowledge to provide the best possible form library for JavaScript frameworks. We pay special attention to type safety, bundle size, performance and input validation. You can expect that every decision we make during development is well thought out and always takes these main features into account.

## 🪐 Vision

At the time of the initial development of Modular Forms, there was no form library with comparable type safety, bundle size and performance. However, many of the ideas came from previous open source projects and only the development of the last few years has made a form library in this way possible. The vision of Modular Forms is to shape the future of the web together and to share our knowledge and experience with the open source community.

## 🙌🏼 Credits

When creating Modular Forms, I took inspiration from [React Hook Form](https://react-hook-form.com/) and [Formik](https://formik.org/). I also want to thank [Ryan Carniato](https://twitter.com/RyanCarniato) for his inspiring streams with exclusive and deep insights into different technologies. Furthermore, I would like to thank [David Di Biase](https://twitter.com/davedbase), [Miško Hevery](https://twitter.com/mhevery) and [Manu Martínez-Almeida](https://twitter.com/manucorporat) for the support I received during the initial development.

## ✏️ Feedback

Find a bug or have an idea how to improve the library? Please fill out an [issue](https://github.com/fabian-hiller/modular-forms/issues/new). Together we can make the library even better!

## 🔑 License

This project is available free of charge and licensed under the [MIT License](https://github.com/fabian-hiller/modular-forms/tree/main/LICENSE.md).
npm package: @modular-forms/qwik
Description: The modular and type-safe form library for Qwik
Author: Fabian Hiller
Latest version: 0.29.1

# Modular Forms

Modular Forms is a JavaScript library built on [Qwik](https://qwik.builder.io/) to validate and handle various types of forms. It is type-safe, fast by default and the bundle size is small due to a modular design. Try it out in our [playground](https://modularforms.dev/playground)!

## ✨ Highlights

- Small bundle size starting at 3 KB
- It's fast – DOM updates are fine-grained
- Type safety with autocompletion in editor
- Validate everything from emails to files
- Minimal, readable and well thought out API
- Progressively enhanced forms with actions
- Modular design – only use what you need
- No dependencies – except for Qwik
- It's headless – you define the visual
- Supports all native HTML form fields

## 🏔 Mission

The mission of Modular Forms is to gather the latest available experience and knowledge to provide the best possible form library for JavaScript frameworks. We pay special attention to type safety, bundle size, performance and input validation. You can expect that every decision we make during development is well thought out and always takes these main features into account.

## 🪐 Vision

At the time of the initial development of Modular Forms, there was no form library with comparable type safety, bundle size and performance. However, many of the ideas came from previous open source projects and only the development of the last few years has made a form library in this way possible. The vision of Modular Forms is to shape the future of the web together and to share our knowledge and experience with the open source community.

## 🙌🏼 Credits

When creating Modular Forms, I took inspiration from [React Hook Form](https://react-hook-form.com/) and [Formik](https://formik.org/). I also want to thank [Ryan Carniato](https://twitter.com/RyanCarniato) for his inspiring streams with exclusive and deep insights into different technologies. Furthermore, I would like to thank [David Di Biase](https://twitter.com/davedbase), [Miško Hevery](https://twitter.com/mhevery) and [Manu Martínez-Almeida](https://twitter.com/manucorporat) for the support I received during the initial development.

## ✏️ Feedback

Find a bug or have an idea how to improve the library? Please fill out an [issue](https://github.com/fabian-hiller/modular-forms/issues/new). Together we can make the library even better!

## 🔑 License

This project is available free of charge and licensed under the [MIT License](https://github.com/fabian-hiller/modular-forms/tree/main/LICENSE.md).
npm package: @modular-forms/react
Description: The modular and type-safe form library for React
Author: Fabian Hiller
Latest version: 0.12.0

# Modular Forms

Modular Forms is a JavaScript library built on [React](https://github.com/facebook/react) and [Preact Signals](https://github.com/preactjs/signals) to validate and handle various types of forms. It is type-safe, fast by default and the bundle size is small due to a modular design. Try it out in our [playground](https://modularforms.dev/playground)!

## ✨ Highlights

- Small bundle size starting at 3 KB
- It's fast – DOM updates are fine-grained
- Type safety with autocompletion in editor
- Validate everything from emails to files
- Minimal, readable and well thought out API
- Modular design – only use what you need
- No dependencies – except for Preact Signals
- It's headless – you define the visual
- Supports all native HTML form fields

## 🏔 Mission

The mission of Modular Forms is to gather the latest available experience and knowledge to provide the best possible form library for JavaScript frameworks. We pay special attention to type safety, bundle size, performance and input validation. You can expect that every decision we make during development is well thought out and always takes these main features into account.

## 🪐 Vision

At the time of the initial development of Modular Forms, there was no form library with comparable type safety, bundle size and performance. However, many of the ideas came from previous open source projects and only the development of the last few years has made a form library in this way possible. The vision of Modular Forms is to shape the future of the web together and to share our knowledge and experience with the open source community.

## 🙌🏼 Credits

When creating Modular Forms, I took inspiration from [React Hook Form](https://react-hook-form.com/) and [Formik](https://formik.org/). I also want to thank [Ryan Carniato](https://twitter.com/RyanCarniato) for his inspiring streams with exclusive and deep insights into different technologies. Furthermore, I would like to thank [David Di Biase](https://twitter.com/davedbase), [Miško Hevery](https://twitter.com/mhevery) and [Manu Martínez-Almeida](https://twitter.com/manucorporat) for the support I received during the initial development.

## ✏️ Feedback

Find a bug or have an idea how to improve the library? Please fill out an [issue](https://github.com/fabian-hiller/modular-forms/issues/new). Together we can make the library even better!

## 🔑 License

This project is available free of charge and licensed under the [MIT License](https://github.com/fabian-hiller/modular-forms/tree/main/LICENSE.md).
npm package: @modular-forms/solid
Description: The modular and type-safe form library for SolidJS
Author: Fabian Hiller
Latest version: 0.25.1

<img src="https://assets.solidjs.com/banner?project=Modular+Forms" alt="Modular Forms" /><br />

# Modular Forms

Modular Forms is a JavaScript library built on [SolidJS](https://github.com/solidjs/solid) to validate and handle various types of forms. It is type-safe, fast by default and the bundle size is small due to a modular design. Try it out in our [playground](https://modularforms.dev/playground)!

## ✨ Highlights

- Small bundle size starting at 3 KB
- It's fast – DOM updates are fine-grained
- Type safety with autocompletion in editor
- Validate everything from emails to files
- Readable API that is similar to SolidJS
- Modular design – only use what you need
- No dependencies – except for SolidJS
- It's headless – you define the visual
- Supports all native HTML form fields

## 🏔 Mission

The mission of Modular Forms is to gather the latest available experience and knowledge to provide the best possible form library for JavaScript frameworks. We pay special attention to type safety, bundle size, performance and input validation. You can expect that every decision we make during development is well thought out and always takes these main features into account.

## 🪐 Vision

At the time of the initial development of Modular Forms, there was no form library with comparable type safety, bundle size and performance. However, many of the ideas came from previous open source projects and only the development of the last few years has made a form library in this way possible. The vision of Modular Forms is to shape the future of the web together and to share our knowledge and experience with the open source community.

## 🙌🏼 Credits

When creating Modular Forms, I took inspiration from [React Hook Form](https://react-hook-form.com/) and [Formik](https://formik.org/). I also want to thank [Ryan Carniato](https://twitter.com/RyanCarniato) for his inspiring streams with exclusive and deep insights into different technologies. Furthermore, I would like to thank [David Di Biase](https://twitter.com/davedbase), [Miško Hevery](https://twitter.com/mhevery) and [Manu Martínez-Almeida](https://twitter.com/manucorporat) for the support I received during the initial development.

## ✏️ Feedback

Find a bug or have an idea how to improve the library? Please fill out an [issue](https://github.com/fabian-hiller/modular-forms/issues/new). Together we can make the library even better!

## 🔑 License

This project is available free of charge and licensed under the [MIT License](https://github.com/fabian-hiller/modular-forms/tree/main/LICENSE.md).
npm package: @modular-mapper/solid-mapbox
Description: A Mapbox API for SolidJS
Author: louisdutton
Latest version: 1.1.2

# Solid Mapbox

A SolidJS API for Mapbox GL JS.


## Installation

### NPM
```bash
npm i solid-map-gl
```

### Yarn
```bash
yarn add solid-map-gl
```
npm package: @modular-prompt/core
Description: Core module for modular prompt framework
Latest version: 0.2.2

# @modular-prompt/core

プロンプトモジュールフレームワークのコアパッケージ。

## 📚 ドキュメント

詳細は[ドキュメント](https://github.com/otolab/modular-prompt/tree/main/docs)を参照してください。

## インストール

```bash
npm install @modular-prompt/core
```

## 基本的な使用方法

```typescript
import { compile, merge, createContext } from '@modular-prompt/core';
import type { PromptModule } from '@modular-prompt/core';

// Context型定義
interface MyContext {
  inputs?: string;
}

// プロセスモジュール（処理方法を定義）
const processModule: PromptModule<MyContext> = {
  methodology: ['データを処理する'],
  inputs: [(ctx) => ctx.inputs || '']
};

// ユーザーモジュール（タスクを定義）
const userModule = {
  objective: ['タスクの目的'],
  instructions: ['具体的な指示']
};

// マージしてContextを取得
const merged = merge(processModule, userModule);
const context = createContext(merged);
context.inputs = 'データ';

// コンパイル
const compiled = compile(merged, context);
// compiled: CompiledPrompt
// {
//   instructions: SectionElement[]  // 指示セクション群
//   data: SectionElement[]          // データセクション群
//   output: SectionElement[]        // 出力セクション群
//   metadata?: { outputSchema }     // メタデータ
// }
```

## 主要な機能

- **PromptModule**: 再利用可能なプロンプトテンプレート
- **compile**: モジュールを実行可能な形式に変換
- **merge**: 複数のモジュールを合成
- **createContext**: マージ済みモジュールから型安全なContextを取得

## Skills（Claude Code向け）

このパッケージには `skills/prompt-writing/SKILL.md` が同梱されています。Claude Codeのスキルとして利用でき、プロンプトモジュールの書き方をガイドします。

## ライセンス

MIT
npm package: @modular-prompt/experiment
Description: Experiment framework for comparing and evaluating prompt modules
Latest version: 0.4.27

# @modular-prompt/experiment

プロンプトモジュールの比較・評価フレームワーク。

## インストール

```bash
npm install @modular-prompt/experiment
```

## 概要

複数のプロンプトモジュールを同一条件下で比較・評価する。YAML設定で実験を定義し、CLIで実行。

- **プロンプト比較**: 異なるプロンプト構造の効果を定量的に比較
- **マルチモデルテスト**: 異なるLLMプロバイダーでの動作比較
- **品質評価**: 繰り返し実行による安定性・一貫性の評価
- **柔軟な評価器**: コードベース・AIベースの評価をサポート

## クイックスタート

### 1. 設定ファイルを作成

```yaml
# experiment.yaml
models:
  gpt4o:
    provider: openai
    model: gpt-4o

drivers:
  openai:
    apiKey: ${OPENAI_API_KEY}

modules:
  - name: my-module
    path: ./my-module.ts

testCases:
  - name: 基本テスト
    input:
      query: "TypeScriptについて説明して"

evaluators: []
```

### 2. モジュールファイルを作成

```typescript
// my-module.ts
import type { PromptModule } from '@modular-prompt/core';

const module: PromptModule<{ query: string }> = {
  objective: ['ユーザーの質問に回答する'],
  instructions: [
    (ctx) => `質問: ${ctx.query}`,
  ],
};

export default module;
```

### 3. 実行

```bash
npx modular-experiment experiment.yaml --dry-run    # 確認
npx modular-experiment experiment.yaml              # 実行
npx modular-experiment experiment.yaml --evaluate   # 評価付き
npx modular-experiment experiment.yaml --repeat 10  # 複数回実行
```

設定ファイルの詳細、評価器の書き方、プログラマティックAPIについては `skills/experiment/SKILL.md` を参照。

## Skills (for Claude Code)

This package includes `skills/experiment/SKILL.md`. It can be used as a Claude Code skill to guide experiment framework usage.

## License

MIT
npm package: @modular-prompt/simple-chat
Description: Sample implementation: Simple chat application using Moduler Prompt with MLX models
Latest version: 0.3.2

# Simple Chat - サンプル実装

Moduler Promptフレームワークを使用したチャットアプリケーションのサンプル実装です。実際のアプリケーションでフレームワークをどのように使用するかを示すリファレンス実装として提供されています。

## 概要

このパッケージは以下を実演します：
- PromptModuleの静的定義とコンテキストバインディング
- `merge`を使用したモジュール合成（`withMaterials`の活用）
- MLXドライバーを使用したAIモデルとの対話
- チャットログの管理とリソースファイルの処理

## インストール

```bash
npm install @modular-prompt/simple-chat
```

## 使用方法

### CLIとして使用

```bash
# 直接メッセージを送信
simple-chat "こんにちは"

# プロファイルを指定
simple-chat -p profile.yaml "質問があります"

# チャットログを保存・継続
simple-chat -l chat.json "会話を続けます"

# 標準入力から読み込み
echo "長い質問文..." | simple-chat --stdin

# オプションの組み合わせ
simple-chat -p custom.yaml -l session.json --temperature 0.8 "創造的な回答をお願いします"

# VLMモデルをtext-onlyモードで使用
simple-chat --model mlx-community/Qwen2-VL-2B-Instruct-4bit --text-only "こんにちは"
```

### ライブラリとして使用

```typescript
import { chatPromptModule, performAIChat } from '@modular-prompt/simple-chat';
```

## 対話プロファイル

対話プロファイルは、チャットの動作を制御するYAML形式の設定ファイルです。

### プロファイルの構造

```yaml
# 使用するAIモデル
model: "mlx-community/gemma-3-270m-it-qat-4bit"

# ドライバータイプ（現在はmlxのみサポート）
driver: "mlx"

# VLMモデルをtext-onlyモードで使用（オプション）
textOnly: false  # trueにするとVLM対応モデルを画像なしで使用

# システムプロンプト - AIの基本的な振る舞いを定義
systemPrompt: |
  あなたは親切で知識豊富なAIアシスタントです。
  ユーザーの質問に対して、正確で分かりやすい回答を提供してください。
  日本語で応答してください。

# 初回メッセージ（オプション）- 新規セッション開始時の挨拶
preMessage: "こんにちは！何かお手伝いできることはありますか？"

# 参照ファイル（オプション）- プロンプトに含める追加資料
resourceFiles:
  - "./docs/guide.md"
  - "./data/reference.txt"

# 生成オプション
options:
  temperature: 0.7      # 生成の創造性（0.0-2.0）
  maxTokens: 4000      # 最大トークン数
  topP: 0.9            # トップP サンプリング
```

### デフォルトプロファイル

プロファイルを指定しない場合、以下のデフォルト設定が使用されます：

- **model**: mlx-community/gemma-3-270m-it-qat-4bit
- **systemPrompt**: 親切で知識豊富なAIアシスタントとしての基本設定
- **temperature**: 0.7
- **maxTokens**: 4000

### プロファイルの活用例

#### 1. 技術サポート用プロファイル

```yaml
model: "mlx-community/gemma-3-270m-it-qat-4bit"
systemPrompt: |
  あなたはソフトウェア開発の専門家です。
  技術的な質問に対して、具体的なコード例を交えて回答してください。
  エラーの解決方法を段階的に説明してください。
options:
  temperature: 0.3  # より正確な回答のため低めに設定
```

#### 3. VLMモデルをテキストのみで使用

```yaml
model: "mlx-community/Qwen2-VL-2B-Instruct-4bit"
textOnly: true  # VLMモデルを画像なしで使用
systemPrompt: |
  あなたは親切で知識豊富なAIアシスタントです。
  テキストによる質問に回答してください。
options:
  temperature: 0.7
  maxTokens: 4000
```

#### 2. 創作支援用プロファイル

```yaml
model: "mlx-community/gemma-3-270m-it-qat-4bit"  
systemPrompt: |
  あなたは創造的な文章作成を支援するアシスタントです。
  ユーザーのアイデアを発展させ、独創的な提案を行ってください。
options:
  temperature: 1.2  # 創造性を高めるため高めに設定
  maxTokens: 8000  # 長い文章生成に対応
```

## 実装のポイント

このサンプル実装では、Moduler Promptフレームワークの主要な機能を実際のアプリケーションで活用する方法を示しています：

1. **静的なモジュール定義**: `chatPromptModule`は静的に定義されたテンプレート
2. **モジュールの合成**: `@modular-prompt/process`の`withMaterials`モジュールとの合成
3. **型安全なコンテキスト**: `ChatContext`による型定義
4. **段階的なデータバインディング**: createContext → データ設定 → compile

詳細は[プロンプトモジュール仕様書](../../docs/PROMPT_MODULE_SPECIFICATION.md)の実装例セクションを参照してください。