open-index/open-npm huggingface dataset:
npm package: @format/bem
Description: BEM className generator adapted for React
Latest version: 0.0.5

# BEM

A small utility for creating old-school BEM classes, especially in a React context.

NOTE: Maintained for internal use only.

## Quickstart

Given a component definition

```
import { bem } from "bem";

export const AlertBar = ({ level, message }) => {
  const b = bem("alert-bar");

  return (
    <div className={b.e("wrapper")}>
      <p className={b.e("message").m(level)}>{message}</p>
    </div>
  );
};
```

Rendering

```
<AlertBar message="Hello!" level="warning" />
```

Yields

```
<div class="alert-bar__wrapper">
  <p class="alert-bar__message alert-bar__message--warning">Hello!</p>
</div>
```

## Examples

### Simple Elements
- `bem('alert-bar').e('wrapper')` yields `"alert-bar__wrapper"`

### String Modifiers
- `bem('alert-bar').m('warning')` yields `"alert-bar alert-bar--warning"`
- `bem('alert-bar').e('wrapper').m('warning')` yields `"alert-bar__wrapper alert-bar__wrapper--warning"`

### Array Modifiers
- `bem('alert-bar').m(['warning', 'condensed'])` yields `"alert-bar alert-bar--warning alert-bar--condensed"`
- `bem('alert-bar').e('wrapper').m(['warning', 'condensed'])` yields `"alert-bar__wrapper alert-bar__wrapper--warning" alert-bar__wrapper--condensed`

### Object Modifiers
- `bem('alert-bar').m({ warning: true, condensed: true })` yields `"alert-bar alert-bar--warning alert-bar--condensed"`
- `bem('alert-bar').e('wrapper').m({ warning: true, expanded: false })` yields `"alert-bar__wrapper alert-bar__wrapper--warning"`
npm package: @formatjs/bigdecimal
Description: BigInt-backed decimal arithmetic for ECMA-402 polyfills
Author: Long Ho
Latest version: 0.2.0

# @formatjs/bigdecimal

BigInt-backed decimal arithmetic library designed as a lightweight replacement for `decimal.js` in ECMA-402 polyfills.

## Representation

Values are represented as `mantissa × 10^exponent` where:

- `mantissa` is a `bigint` (signed, normalized — no trailing zeros)
- `exponent` is a `number` (integer scaling factor)
- Special flags handle NaN, ±Infinity, and -0

## API

Implements the 27 methods used by `@formatjs/ecma402-abstract`:

- **Arithmetic**: `times`, `div`, `plus`, `minus`, `mod`, `abs`, `negated`, `pow`, `floor`, `ceil`, `log`
- **Comparison**: `eq`, `lessThan`, `greaterThan`, `lessThanOrEqualTo`, `greaterThanOrEqualTo`
- **Queries**: `isZero`, `isNaN`, `isFinite`, `isNegative`, `isPositive`, `isInteger`
- **Conversion**: `toNumber`, `toString`
- **Static**: `BigDecimal.pow`, `BigDecimal.set`
npm package: @formatjs/ecma402-abstract
Description: A collection of implementation for ECMAScript abstract operations
Author: Long Ho
Latest version: 3.2.0

# ECMA402 Abstract

Implementation for various ECMAScript 402 abstract operations.

[![npm Version](https://img.shields.io/npm/v/@formatjs/ecma402-abstract.svg?style=flat-square)](https://www.npmjs.org/package/@formatjs/ecma402-abstract)

**IMPORTANT: This does not follow semver so please pin the version to the exact one that you need.**
npm package: @formatjs/icu-messageformat-parser
Description: Hand-written ICU MessageFormat parser with compatible output as [`intl-messageformat-parser`](https://www.npmjs.com/package/intl-messageformat-parser) but 6 - 10 times as fast.
Latest version: 3.5.3

# MessageFormat Parser

Hand-written ICU MessageFormat parser with compatible output as
[`intl-messageformat-parser`](https://www.npmjs.com/package/intl-messageformat-parser)
but 6 - 10 times as fast.

## Benchmarks

### JavaScript/TypeScript Parser

```
$ bazel run //packages/icu-messageformat-parser/benchmark:benchmark
complex_msg AST length 2599
normal_msg AST length 400
simple_msg AST length 79
string_msg AST length 36

complex_msg: 23.85 µs (41,931 ops/sec)
normal_msg:   3.27 µs (306,177 ops/sec)
simple_msg:   0.60 µs (1,675,766 ops/sec)
string_msg:   0.32 µs (3,113,287 ops/sec)
```

### Rust Parser (WASM)

The Rust parser (optimized build) is **2.6-3.7x faster** than the JavaScript parser:

```
$ bazel run -c opt //crates/icu_messageformat_parser:comparison_bench
complex_msg:  9.22 µs (2.59x faster than JS)
normal_msg:   1.14 µs (2.87x faster than JS)
simple_msg:   163 ns  (3.68x faster than JS)
string_msg:   118 ns  (2.71x faster than JS)
```

The Rust parser is also 10-11% faster than the SWC ICU MessageFormat parser.
npm package: @formatjs/intl-localematcher
Description: Intl.LocaleMatcher ponyfill
Author: Long Ho
Latest version: 0.8.2

# Intl LocaleMatcher

We've migrated the docs to https://formatjs.github.io/docs/polyfills/intl-localematcher.

## Performance

This package implements a highly optimized three-tier locale matching algorithm that provides excellent performance even with large locale sets (700+ locales).

### Benchmark Results

Benchmarked with 725 CLDR locales on Node.js:

| Scenario                                                | Latency | Throughput | Relative Performance |
| ------------------------------------------------------- | ------- | ---------- | -------------------- |
| **Tier 1: Exact Match** (`en`)                          | 1.38ms  | 730 ops/s  | Baseline             |
| **Tier 2: 1-level Fallback** (`en-US` → `en`)           | 1.39ms  | 725 ops/s  | 1.01x slower         |
| **Tier 2: Maximized Match** (`zh-TW` → `zh-Hant`)       | 1.40ms  | 720 ops/s  | 1.02x slower         |
| **Tier 3: CLDR Distance** (`sr-Latn-BA` → `sr-Latn-BA`) | 1.38ms  | 730 ops/s  | 1.00x slower         |
| **Tier 3: Fuzzy Match** (`en-XZ` → `en`)                | 1.50ms  | 670 ops/s  | 1.09x slower         |

### Real-world Impact

The optimization in this package resolved [issue #4936](https://github.com/formatjs/formatjs/issues/4936), where `DurationFormat` instantiation was taking **610ms** on React Native/Hermes due to slow locale matching against 700+ auto-loaded locales.

**After optimization:**

- Common case (`en-US`): **1.39ms** per instantiation
- Chinese locales (`zh-TW`): **1.40ms** per instantiation
- Serbo-Croatian locales: **1.38ms** per instantiation

**Performance improvement: 439x faster** 🚀

### Three-Tier Optimization

The algorithm uses three tiers for maximum performance:

1. **Tier 1 (Exact Match)**: O(1) Set lookup for exact locale matches
2. **Tier 2 (Maximization + Fallback)**: Progressive subtag removal with locale maximization
3. **Tier 3 (CLDR Distance)**: Full UTS #35 Enhanced Language Matching with memoization

This design ensures that common cases (exact matches and simple fallbacks) are extremely fast, while complex scenarios (script/region matching, language distances) still perform well.
npm package: @formatjs/swc-plugin-experimental
Description: SWC plugin for formatjs
Author: OJ Kwon
Latest version: 0.6.1
Deprecated: Please use @swc/plugin-formatjs

# @formatjs/swc-plugin-experimental

`@formatjs/swc-plugin-experimental` is a port of `babel-plugin-formatjs` written
in Rust, for the SWC's experimental [plugin][] system. Transform can currently
be performed via SWC's wasm-based plugin, and in the future also as a custom
pass in Rust-side transform chains.

[plugin]: https://github.com/swc-project/swc/issues/2635

## What does compatible exactly means?

This plugin attempts to mimic most of defined behavior of original plugin's test
fixture. However, due to differences of plugin interfaces, as well as known
limitations there are numbers of unsupported features with differences. You may
able to check the list of github issues, as well as checking test fixtures.

Notably, any dynamic configuration options (`overrideFn`, `onMsg`...) are not
supported, and few internal behaviors relying on static evaluation won't work.

**NOTE: Package can have breaking changes without major semver bump**

Given SWC's plugin interface itself is under experimental stage does not
gaurantee semver-based major bump yet, this package also does not gaurantee
semver compliant breaking changes yet. Please refer changelogs if you're
encountering unexpected breaking behavior across versions.

**Also, current implementation is largely unoptimized, and may have performance
issues as initial focus was to pass existing test fixtures only.**

# Usage

## Using SWC's wasm-based experimental plugin

First, install package via npm:

```
npm install --save-dev @formatjs/swc-plugin-experimental
```

Then add plugin into swc's configuration:

```ts
interface PluginOptions {
  pragma: string
  removeDefaultMessage: bool
  idInterpolationPattern?: string
  ast: bool
  extractSorceLocation: bool
  preserveWhitespace: bool
  additionalFunctionNames: Array<string>
  additionalComponentNames: Array<string>
}

jsc: {
  // ...
  experimental: {
    plugins: [
      [
        '@formatjs/swc-plugin-experimental',
        {
          // PluginOptions
        },
      ],
    ]
  }
}
```

<!--
## Using custom transform pass in Rust

There is a single interface exposed to create a visitor for the transform, which
you can pass into `before_custom_pass`.

```rust
create_formatjs_visitor<C: Clone + Comments, S: SourceMapper>(
    source_map: std::sync::Arc<S>,
    comments: C,
    plugin_options: FormatJSPluginOptions,
    filename: &str,
) -> FormatJSVisitor<C, S>
```

# Building / Testing

This package runs slightly modified original plugin's fixture tests against SWC
with its wasm plugin. `spec` contains set of the fixtures & unit test to run it,
as well as supplimental packages to interop between instrumentation visitor to
node.js runtime.

Few npm scripts are supported for wrapping those setups.

- `build:all`: Build all relative packages as debug build.
- `test`: Runs unit test for wasm plugin & custom transform.
-->
npm package: @formatjs/unplugin
Description: Universal build plugin for FormatJS — supports Vite, Webpack, Rollup, esbuild, and Rspack
Author: Long Ho
Latest version: 1.1.6

# @formatjs/unplugin

Universal build plugin for FormatJS AST transformations. Supports Vite, Webpack, Rollup, esbuild, and Rspack with one codebase.

Replicates the functionality of `babel-plugin-formatjs` and `@formatjs/ts-transformer` using `oxc-parser` + `magic-string` for fast, compiler-agnostic builds.

## Installation

```bash
npm install @formatjs/unplugin --save-dev
```

## Usage

### Vite

```ts
// vite.config.ts
import {defineConfig} from 'vite'
import formatjs from '@formatjs/unplugin/vite'

export default defineConfig({
  plugins: [
    formatjs({
      idInterpolationPattern: '[sha512:contenthash:base64:6]',
      ast: true,
    }),
  ],
})
```

### Webpack

```js
// webpack.config.js
const formatjs = require('@formatjs/unplugin/webpack').default

module.exports = {
  plugins: [
    formatjs({
      idInterpolationPattern: '[sha512:contenthash:base64:6]',
      ast: true,
    }),
  ],
}
```

### Rollup

```js
// rollup.config.js
import formatjs from '@formatjs/unplugin/rollup'

export default {
  plugins: [
    formatjs({
      idInterpolationPattern: '[sha512:contenthash:base64:6]',
      ast: true,
    }),
  ],
}
```

### esbuild

```js
import esbuild from 'esbuild'
import formatjs from '@formatjs/unplugin/esbuild'

esbuild.build({
  plugins: [
    formatjs({
      idInterpolationPattern: '[sha512:contenthash:base64:6]',
      ast: true,
    }),
  ],
})
```

### Rspack

```js
// rspack.config.js
const formatjs = require('@formatjs/unplugin/rspack').default

module.exports = {
  plugins: [
    formatjs({
      idInterpolationPattern: '[sha512:contenthash:base64:6]',
      ast: true,
    }),
  ],
}
```

## Options

| Option                     | Type       | Default                         | Description                             |
| -------------------------- | ---------- | ------------------------------- | --------------------------------------- |
| `idInterpolationPattern`   | `string`   | `[sha512:contenthash:base64:6]` | Pattern for generating message IDs      |
| `overrideIdFn`             | `function` | —                               | Custom function to generate message IDs |
| `removeDefaultMessage`     | `boolean`  | `false`                         | Remove `defaultMessage` from output     |
| `additionalComponentNames` | `string[]` | `[]`                            | Extra JSX component names to process    |
| `additionalFunctionNames`  | `string[]` | `[]`                            | Extra function names to process         |
| `ast`                      | `boolean`  | `false`                         | Pre-parse `defaultMessage` into AST     |
| `preserveWhitespace`       | `boolean`  | `false`                         | Keep original whitespace in messages    |
npm package: @formatjs/utils
Description: Collection of useful intl utilities
Author: Long Ho
Latest version: 2.2.3

# @formatjs/utils

Collection of useful internationalization (i18n) utilities for working with locales, countries, currencies, and timezones.

## Installation

```bash
npm install @formatjs/utils
```

## Features

- Country code canonicalization (ISO 3166)
- Default currency lookup by country
- Currency minor units and scale calculations (ISO 4217)
- Default locale detection
- Default timezone detection

## API

### Country Codes

#### `canonicalizeCountryCode(alpha3OrAlpha2?: string): string | undefined`

Canonicalize a country code to an ISO 3166 alpha-2 country code (uppercase).

```typescript
import {canonicalizeCountryCode} from '@formatjs/utils'

canonicalizeCountryCode('usa') // 'US'
canonicalizeCountryCode('USA') // 'US'
canonicalizeCountryCode('us') // 'US'
canonicalizeCountryCode('US') // 'US'
```

### Currency

#### `defaultCurrency(countryCode?: string): string`

Look up the default currency for a country code. Returns USD if not found.

```typescript
import {defaultCurrency} from '@formatjs/utils'

defaultCurrency('US') // 'USD'
defaultCurrency('GB') // 'GBP'
defaultCurrency('JP') // 'JPY'
```

#### `countriesUsingDefaultCurrency(currencyCode: string): string[]`

Look up countries that use a specific currency as their default.

```typescript
import {countriesUsingDefaultCurrency} from '@formatjs/utils'

countriesUsingDefaultCurrency('EUR') // ['AT', 'BE', 'CY', 'DE', 'EE', ...]
countriesUsingDefaultCurrency('USD') // ['US', 'EC', 'SV', ...]
```

#### `currencyMinorScale(currencyCode: string): number`

Returns the minor unit scale for a given ISO 4217 currency code. The minor unit scale is the power of 10 representing the number of decimal places used for the currency.

```typescript
import {currencyMinorScale} from '@formatjs/utils'

currencyMinorScale('USD') // 100 (2 decimal places)
currencyMinorScale('JPY') // 1 (0 decimal places)
currencyMinorScale('BHD') // 1000 (3 decimal places)
```

### Locale

#### `defaultLocale(): string`

Returns the default locale for the current environment.

```typescript
import {defaultLocale} from '@formatjs/utils'

defaultLocale() // e.g., 'en-US'
```

### Timezone

#### `defaultTimezone(): string`

Returns the default timezone for the current environment.

```typescript
import {defaultTimezone} from '@formatjs/utils'

defaultTimezone() // e.g., 'America/New_York'
```

## License

MIT
npm package: @formatjs/vite-plugin
Description: Vite plugin for FormatJS AST transformations
Author: Long Ho
Latest version: 1.1.0

# @formatjs/vite-plugin

Vite plugin for FormatJS AST transformations. Replicates the functionality of `babel-plugin-formatjs` and `@formatjs/ts-transformer` using `oxc-parser` + `magic-string` for fast, compiler-agnostic builds.

## Installation

```bash
npm install @formatjs/vite-plugin --save-dev
```

## Usage

```ts
// vite.config.ts
import {defineConfig} from 'vite'
import formatjs from '@formatjs/vite-plugin'

export default defineConfig({
  plugins: [
    formatjs({
      idInterpolationPattern: '[sha512:contenthash:base64:6]',
      ast: true,
    }),
  ],
})
```

## Options

| Option                     | Type       | Default                         | Description                             |
| -------------------------- | ---------- | ------------------------------- | --------------------------------------- |
| `idInterpolationPattern`   | `string`   | `[sha512:contenthash:base64:6]` | Pattern for generating message IDs      |
| `overrideIdFn`             | `function` | —                               | Custom function to generate message IDs |
| `removeDefaultMessage`     | `boolean`  | `false`                         | Remove `defaultMessage` from output     |
| `additionalComponentNames` | `string[]` | `[]`                            | Extra JSX component names to process    |
| `additionalFunctionNames`  | `string[]` | `[]`                            | Extra function names to process         |
| `ast`                      | `boolean`  | `false`                         | Pre-parse `defaultMessage` into AST     |
| `preserveWhitespace`       | `boolean`  | `false`                         | Keep original whitespace in messages    |
npm package: @formatomus/core
Description: Unstyled React form components which register to [react-hook-form](https://react-hook-form.com/) context automatically.
Latest version: 0.1.5

# Formatomus

Unstyled React form components which register to [react-hook-form](https://react-hook-form.com/) context automatically.

## Docs

[https://owenjs.github.io/formatomus/](https://owenjs.github.io/formatomus/)

## Install

```shell
npm install @formatomus/core react-hook-form @hookform/error-message
```

## HeadlessUI

Add HeadlessUI form components to your Formatomus forms!

```shell
npm install @formatomus/headlessui @headlessui/react
```
npm package: @formatomus/headlessui
Description: Unstyled HeadlessUI form components which register to [react-hook-form](https://react-hook-form.com/) context automatically.
Latest version: 0.1.4

# Formatomus HeadlessUI

Unstyled HeadlessUI form components which register to [react-hook-form](https://react-hook-form.com/) context automatically.

## Docs

[https://owenjs.github.io/formatomus/](https://owenjs.github.io/formatomus/)

## Install

`@formatomus/core` must be install for this package to work

```shell
npm install @formatomus/core react-hook-form @hookform/error-message @formatomus/headlessui @headlessui/react
```
npm package: @formatr/express
Description: Express.js integration for formatr template engine
Latest version: 0.1.0

# @formatr/express

Express.js middleware for formatr template engine.

## Installation

```bash
npm install @formatr/express @timur_manjosov/formatr express
```

## Usage

### Basic Setup

```typescript
import express from 'express';
import { formatrMiddleware } from '@formatr/express';

const app = express();

app.use(formatrMiddleware({
  templatesDir: './templates',
  extension: '.txt',
  cache: true,
}));

app.get('/hello', async (req, res) => {
  await res.formatr('greeting', { name: 'World' });
});

app.listen(3000);
```

### With Custom Filters

```typescript
app.use(formatrMiddleware({
  templatesDir: './templates',
  filters: {
    currency: (value) => `$${Number(value).toFixed(2)}`,
    upper: (value) => String(value).toUpperCase(),
  },
}));

app.get('/invoice', async (req, res) => {
  await res.formatr('invoice', {
    customer: 'John Doe',
    total: 99.99,
  });
});
```

### Async Rendering

For templates with async filters:

```typescript
app.get('/user/:id', async (req, res) => {
  await res.formatrAsync('user-profile', {
    userId: req.params.id,
  });
});
```

### Streaming Large Templates

```typescript
app.get('/report', async (req, res) => {
  await res.formatrStream('large-report', {
    data: largeDataset,
  });
});
```

## API

### `formatrMiddleware(options)`

Options:
- `templatesDir` (string, required): Directory containing template files
- `extension` (string, optional): File extension for templates (default: '.txt')
- `cache` (boolean | object, optional): Enable caching (default: false)
  - If object: `{ ttl: number, maxSize: number }`
- `filters` (object, optional): Custom filter functions
- `errorHandler` (function, optional): Custom error handler

### Response Methods

Added to Express response object:

- `res.formatr(templateName, context)`: Render template synchronously
- `res.formatrAsync(templateName, context)`: Render with async filter support
- `res.formatrStream(templateName, context)`: Stream template response

## License

MIT
npm package: @formatr/nestjs
Description: NestJS integration for formatr template engine
Latest version: 0.1.0

# @formatr/nestjs

NestJS module for formatr template engine with dependency injection support.

## Installation

```bash
npm install @formatr/nestjs @timur_manjosov/formatr @nestjs/common @nestjs/core
```

## Usage

### Module Registration

```typescript
import { Module } from '@nestjs/common';
import { FormatrModule } from '@formatr/nestjs';

@Module({
  imports: [
    FormatrModule.register({
      templatesDir: './templates',
      cache: true,
      filters: {
        currency: (value) => `$${Number(value).toFixed(2)}`,
      },
    }),
  ],
})
export class AppModule {}
```

### Using the Service

```typescript
import { Injectable } from '@nestjs/common';
import { FormatrService } from '@formatr/nestjs';

@Injectable()
export class EmailService {
  constructor(private readonly formatr: FormatrService) {}

  async sendWelcomeEmail(userId: number, userName: string) {
    const html = await this.formatr.render('welcome-email', {
      userId,
      userName,
    });
    
    // Send email...
  }
}
```

### Using the Decorator

```typescript
import { Controller, Get } from '@nestjs/common';
import { FormatrResponse } from '@formatr/nestjs';

@Controller('reports')
export class ReportsController {
  @Get('monthly')
  @FormatrResponse('monthly-report')
  getMonthlyReport() {
    return {
      month: 'December',
      revenue: 150000,
      expenses: 75000,
    };
  }
}
```

### Async Filters

```typescript
FormatrModule.register({
  templatesDir: './templates',
  asyncFilters: {
    fetchUser: async (userId) => {
      return await userService.findById(userId);
    },
  },
}),
```

Then use `renderAsync`:

```typescript
const html = await this.formatr.renderAsync('user-profile', { userId: 123 });
```

## API

### `FormatrModule.register(options)`

Options:
- `templatesDir` (string, required): Directory containing template files
- `extension` (string, optional): File extension for templates
- `cache` (boolean | object, optional): Enable caching
- `filters` (object, optional): Synchronous custom filters
- `asyncFilters` (object, optional): Asynchronous custom filters

### `FormatrService`

Methods:
- `render(templateName, context)`: Render template synchronously
- `renderAsync(templateName, context)`: Render with async filter support

### `@FormatrResponse(templateName)`

Decorator to automatically render controller responses using a template.

### `FormatrInterceptor`

Interceptor for automatic template rendering (use with `@FormatrResponse`).

## License

MIT
npm package: @formatr/react
Description: React hooks and components for formatr template engine
Latest version: 0.1.0

# @formatr/react

React hooks and components for formatr template engine.

## Installation

```bash
npm install @formatr/react @timur_manjosov/formatr react
```

## Usage

### Basic Hook

```tsx
import { useFormat } from '@formatr/react';

function Greeting({ name }: { name: string }) {
  const message = useFormat('Hello, {name}!', { name });
  return <div>{message}</div>;
}
```

### With Provider

```tsx
import { FormatrProvider, useFormat } from '@formatr/react';

function App() {
  return (
    <FormatrProvider
      filters={{
        upper: (v) => String(v).toUpperCase(),
        currency: (v) => `$${Number(v).toFixed(2)}`,
      }}
      locale="en-US"
    >
      <MyComponent />
    </FormatrProvider>
  );
}

function MyComponent() {
  const formatted = useFormat('{price|currency}', { price: 99.99 });
  return <div>{formatted}</div>;
}
```

### Async with Suspense

```tsx
import { Suspense } from 'react';
import { useAsyncFormat } from '@formatr/react';

function UserProfile({ userId }: { userId: number }) {
  const message = useAsyncFormat(
    'User: {userId|fetchUser.name}',
    { userId }
  );
  return <div>{message}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserProfile userId={123} />
    </Suspense>
  );
}
```

### Component API

```tsx
import { Format } from '@formatr/react';

function Invoice({ total }: { total: number }) {
  return (
    <Format
      template="Total: {total|currency}"
      context={{ total }}
    />
  );
}
```

## API

### `FormatrProvider`

Props:
- `children`: React children
- `filters`: Custom filter functions (optional)
- `locale`: Locale for internationalization (optional)

### `useFormat(template, context)`

Hook for synchronous template rendering.

Parameters:
- `template`: Template string with placeholders
- `context`: Context data object

Returns: Formatted string

### `useAsyncFormat(template, context)`

Hook for async template rendering with Suspense support.

Parameters:
- `template`: Template string with placeholders
- `context`: Context data object

Returns: Formatted string (suspends while loading)

### `Format`

Component for rendering templates.

Props:
- `template`: Template string
- `context`: Context data object

## License

MIT
npm package: @formatr/vue
Description: Vue 3 composables and components for formatr template engine
Latest version: 0.1.0

# @formatr/vue

Vue 3 composables and components for formatr template engine with reactive support.

## Installation

```bash
npm install @formatr/vue @timur_manjosov/formatr vue
```

## Usage

### Basic Composable

```vue
<script setup>
import { ref } from 'vue';
import { useFormat } from '@formatr/vue';

const name = ref('World');
const formatted = useFormat('Hello, {name}!', { name });

// Updates automatically when name changes
</script>

<template>
  <div>{{ formatted }}</div>
  <input v-model="name" />
</template>
```

### With Plugin

```typescript
import { createApp } from 'vue';
import { FormatrPlugin } from '@formatr/vue';
import App from './App.vue';

const app = createApp(App);

app.use(FormatrPlugin, {
  filters: {
    upper: (v) => String(v).toUpperCase(),
    currency: (v) => `$${Number(v).toFixed(2)}`,
  },
  locale: 'en-US',
});

app.mount('#app');
```

### Component API

```vue
<script setup>
import { ref } from 'vue';
import { Formatr } from '@formatr/vue';

const price = ref(99.99);
</script>

<template>
  <Formatr
    template="Price: {price|currency}"
    :context="{ price }"
  />
</template>
```

### Reactive Context

The composable automatically tracks reactive dependencies:

```vue
<script setup>
import { ref, reactive } from 'vue';
import { useFormat } from '@formatr/vue';

const user = reactive({
  name: 'Alice',
  age: 30,
});

const formatted = useFormat(
  'User: {name} (age: {age})',
  user
);

// Updates when user.name or user.age changes
</script>

<template>
  <div>{{ formatted }}</div>
  <button @click="user.age++">Increment Age</button>
</template>
```

## API

### `FormatrPlugin`

Vue plugin for global configuration.

Options:
- `filters`: Custom filter functions (optional)
- `locale`: Locale for internationalization (optional)

### `useFormat(template, context)`

Composable for reactive template formatting.

Parameters:
- `template`: Template string (can be ref or reactive)
- `context`: Context data object (can be ref or reactive)

Returns: Computed ref with formatted string

### `Formatr`

Component for rendering templates.

Props:
- `template`: Template string
- `context`: Context data object

## License

MIT
npm package: @formaxui/utils
Description: Formax UI utilities library
Author: Morteza Jamali
Latest version: 0.0.1

# Utils

Formax UI utilities library

> Note: This library is currently under development

## Installation

```text
yarn add @formaxui/utils

# OR

npm install --save @formaxui/utils
```

## Utilities

- [@formaxui/style](./src/lib/style/README.md) - **css-in-js** library for reactjs

## License

[MIT © Formax](./LICENSE)