open-index/open-npm huggingface dataset:
npm package: @fyn-software/rekindled
Description: Beautiful errors for Remix, both in browser and console
Latest version: 0.1.76

# Rekindled
Beautiful errors for Remix, both in browser and console.

This project is inspired by php's ignition. 
I am personally in love with the idea of solutions. 
In many occasions during development you run in to errors that are not always obvious as to what might be the cause. 
However, from a library author's perspective it might be. But with today's mechanisms you probably end up googling the error message, maybe prefixed by the libraries name. 
You then often end up on stack overflow, a github issue, or maybe an FAQ.

Solutions try to resolve this. Where you propose a solution -if applicable- at the same time you throw the error. 

## Freatures:

- Works without JS (uses JS solely for progressively enhancing the experience)
- development environment only, in production the children passed into `Rekindled` are rendered
- Solutions (is a to-do)
- Pretty and interactive console and terminal experiences (as a to-do)

## Installation

`npm i @fyn-software/rekindled`



## Usage

Setting up Rekindled is as easy as: 

### 1. Wrap your error boundary's element.
`/app/routes/root.tsx`
```tsx
import { Rekindled } from '@fyn-software/rekindled';

export function ErrorBoundary({ error }: { error: Error })
{
    return <Rekindled traceEndpoint="/error" error={error}>
        <h1>Whoops!</h1>
        <h2>We ran into an error: {error.message}</h2>
        <p>{error.stack}</p>
    </Rekindled>
}
```

### 2. Set up an endpoint for getting detailed information

`/app/routes/error.tsx`

```ts
import { LoaderFunction } from 'remix';
import { rekindle } from '@fyn-software/rekindled/api.server.js';

export const loader: LoaderFunction = async ({ request }) => {
    const error = JSON.parse(decodeURIComponent(new URL(request.url).searchParams.get('error')!));

    return rekindle(error);
};
```

### 3. Use the error page!

![preview][1]

### Options
| option        | type      | default value           | Description                                                            |
|---------------|-----------|-------------------------|------------------------------------------------------------------------|
| traceEndpoint | `string`  | none, field is required | Route to the endpoint where you have loader that returns `rekindle`    |
| error         | `Error`   | none, field is required | The error to be handled by Rekindled                                   |
| shown         | `boolean` | `false`                 | This option handles if the Rekindled dialog should be shown by default |



# TODO

- [x] Create/Fix intial component for Remix
- [ ] Add feature: Terminal "rendering" for nicer errors
- [ ] Add feature: Dark theme
- [ ] Add feature: Implement container queries so that Rekindled can run wel as a nested element somewhere on a page
- [ ] Add feature: Implement `Solution`



[1]: preview.png
npm package: @fyn-software/remix-shadow-root
Description: Allows for declaritive shadowroot optimized for use with Remix
Author: Chris Kruining
Latest version: 1.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @fyn-software/remix-shadow-root
Lets you add a declaritive shadow root to components, allowing you to use the shadow DOM. This provides scoped CSS.

## Installation
`npm i @fyn-software/remix-shadow-root`

## Usage
```jsx
import React from 'react';
import RemixShadowRoot from '@fyn-software/remix-shadow-root';

export default function MyComponent()
{
    return <outer-element>
        <RemixShadowRoot>
            <h1>this is my awesome shadow DOM</h1>
        </RemixShadowRoot>
    </outer-element>
}
```

## Props
| Prop   | Type     | Values             | Default | Description                                                                                           |
|--------|----------|--------------------|---------|-------------------------------------------------------------------------------------------------------|
| `mode` | `String` | `open` or `closed` | `open`  | Sets the [mode](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode) of the shadow root. |

## Notes
- A minimum of React 16 is required.
- TypeScript definitions included and should not require configuration
- Works in all modern browsers except non-Chromium Edge. Click [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#Browser_compatibility) for current browser support.
- Not all HTML elements allow you to attach a shadow root. Click [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#Elements_you_can_attach_a_shadow_to) for more information.
npm package: @fynal-ai/apm
Description: APM(Agent Package Manager) CLI and library
Author: fynal-ai
Latest version: 0.1.22

APM(Agent Package Manager) CLI and library

## Install as CLI

```sh
pnpm add -g @fynal-ai/apm
```

```sh
apm --help
```

```
Usage:

- show help
  apm
  apm --help
- show version
  apm --version
  apm -v
- create agent in cwd from template
  apm init
  apm init --author <author> --name <name> --executor <executor>
  apm init --author <author> --name <name> --executor <executor> --force
- install agent from local folder or agent store. If no agent name is specified, the agent in the current folder is installed. Duplicate agents are overwritten.
  apm install <agent-folder>
  apm install
  apm install .
  apm install <name>[:version]
- uninstall agent. If no agent name is specified, the agent in the current folder is uninstalled in APM Server.
  apm uninstall
  apm uninstall <name>[:version]
- list installed agents in APM Server
  apm list
  apm list --limit 20
  apm list --q "hello"
  apm list --executor nodejs
- publish cwd agent folder to Agent Store
  apm publish
- login to agent store. If no username is specified, the username in $HOME/.apm/apm.json is used.
  apm login
  apm login --username <username>
  apm login --username <username> --password <password>
- search agents in Agent Store
  apm search
  apm search --limit 20
  apm search --q "hello"
  apm search --executor nodejs
- Update apm package to latest in local Node.Js Agent Folders together:
  for i in $(ls); do pnpm add @fynal-ai/apm:latest --dir $i; done
- Install local Agent Folders together to APM Server:
  for i in $(ls); do apm install $i; done
```

## Program Usage

We package some utilities to help you to create agent.

```js
import { APMAgent } from '@fynal-ai/apm';

class Agent {
	constructor() {
		this.apmAgent = new APMAgent();
	}
	async run(input, saveconfig) {
		const output = {
			text: 'text',
		};

		this.apmAgent.save_output(saveconfig, output); // save output by saveconfig when saveconfig is setted, or print output to console

		return output;
	}
}
```

## Dev

Join US to Contribute:

1. fork at https://github.com/fynal-ai/apm
2. goto `apm-nodejs` directory
3. change code in `src` directory
4. change version in `package.json`
5. (login) pnpm config set '//registry.npmjs.org/:\_authToken' <YOUR_PUBLISH_TOKEN>
6. publish to npm
   ```sh
   pnpm run pubish
   ```

## Q&A

### items.findLastIndex is not a function

Upgrade Node.Js to >= 18.0.0

### apm --help is Atom Package Manage but not Agent Package Manage

1. which apm
2. mv <path/to/apm> <path/to/apm2>
npm package: @fynixjs/fynix
Description: 🚀 Lightweight TypeScript framework with built-in security, database, ORM, and zero-config deployment. Decorators + DI + Entity/Models + MySQL + JWT out of the box!
Author: Resty Gonzales
Latest version: 1.1.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

ERROR: No README data found!
npm package: @fynixorg/cli
Description: CLI to create a new Fynix app
Author: Resty Gonzales
Latest version: 1.0.6

# create-fynix-app

CLI tool to quickly scaffold a new Fynix application.

## Usage

```bash
npx create-fynix-app my-app
cd my-app
npm install
npm run dev
```

## What it does

- Creates a new project directory
- Copies the Fynix template with all necessary files
- Sets up package.json with your project name
- Ready to run with `npm run dev`

## Requirements

- Node.js 14 or higher

## License

MIT
npm package: @fynixorg/types-fynix
Description: TypeScript language service plugin for Fynix (.fnx) single file components
Author: Resty Gonzales
Latest version: 1.0.1

# TypeScript Fynix Plugin

A TypeScript language service plugin that enables full TypeScript support for Fynix (`.fnx`) single file components.

## Features

-  Module resolution for `.fnx` files
-  TypeScript IntelliSense and autocomplete
-  Type checking and error detection
- Go to definition and references
- Hover information
- Automatic transformation of `.fnx` to `.tsx`

## Installation

```bash
npm install typescript-fynix-plugin
```

## Usage

Add the plugin to your `tsconfig.json`:

```json
{
  "compilerOptions": {
    "jsx": "react",
    "moduleResolution": "node",
    "plugins": [
      {
        "name": "typescript-fynix-plugin"
      }
    ]
  }
}
```

Then restart your TypeScript server or reload your IDE.

## What it does

This plugin allows you to import `.fnx` files in TypeScript:

```typescript
import MyComponent from "./components/MyComponent.fnx";
```

The plugin automatically:

1. Resolves `.fnx` file imports
2. Transforms Fynix single file components to TypeScript/TSX
3. Provides full TypeScript language features

## Fynix File Format

Fynix files use a `.fnx` extension with this structure:

```html
<logic setup="ts">
  import { useState } from "react"; const [count, setCount] = useState(0);
</logic>

<view>
  <div>
    <h1>Count: {count}</h1>
    <button onClick="{()" ="">setCount(count + 1)}>Increment</button>
  </div>
</view>

<style scoped>
  h1 {
    color: blue;
  }
</style>
```

## Requirements

- TypeScript >= 4.0.0
- Node.js >= 14.0.0

## License

MIT

## Author

Resty Gonzales <restygonzales749@gmail.com>
npm package: @fynixorg/ui
Description: Core package for Fynix UI framework - A lightweight, reactive UI framework with TypeScript support.
Author: Resty Gonzales
Latest version: 1.0.24

# Fynix Core

This is the core package for the Fynix UI framework. It contains the essential runtime, hooks, context, and utilities for building Fynix-based applications.

## Structure
- `runtime.js`: Main runtime logic
- `context/`: Context management
- `custom/`: Custom UI elements
- `error/`: Error overlays and handling
- `fynix/`: Fynix core logic
- `hooks/`: Reactivity and utility hooks
- `plugins/`: Plugins (e.g., Vite integration)
- `router/`: Routing logic
- `types/`: TypeScript type definitions
- `global.d.ts`: Global type extensions

## Usage
Install via npm after publishing:

```sh
npm install fynix-core
```

Then import in your project:

```js
import { ... } from 'fynix-core';
```

## Development
- Ensure all files are included in `package.json`.
- Update type definitions in `global.d.ts` as needed.
- Export all public APIs via the `exports` field in `package.json`.

## License
MIT
npm package: @fynnix/utf8-bytes
Description: return an array of bytes from a unicode string
Author: James Halliday
Latest version: 0.0.1

# utf8-bytes

return an array of all the bytes in a unicode string

[![build status](https://secure.travis-ci.org/substack/utf8-bytes.png)](http://travis-ci.org/substack/utf8-bytes)

This module is like `Buffer(str).toJSON()`, but without using `Buffer`.

# example

``` js
var bytes = require('utf8-bytes');
console.log(bytes('[☉,☼]'));
```

output:

```
$ node example/utf8-bytes.js
[ 91, 226, 152, 137, 44, 226, 152, 188, 93 ]
```

# methods

``` js
var bytes = require('utf8-bytes')
```

## bytes(str)

Return an array of integers from 0 through 255, inclusive, representing the
bytes in the unicode string `str`.

# install

With [npm](https://npmjs.org) do:

```
npm install utf8-bytes
```

# license

MIT
npm package: @fyno/inapp
Description: React SDK for invoking Fyno inapp notifications center
Author: Fyno
Latest version: 1.0.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @fyno/inapp

> React SDK for Fyno's inapp notification center

[![NPM](https://img.shields.io/npm/v/@fyno/inapp.svg)](https://www.npmjs.com/package/@fyno/inapp) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![Fyno: Fire your notifications](https://fynodev.s3.ap-south-1.amazonaws.com/others/Fyno_Banner.jpeg)

## Install

```bash
npm install --save @fyno/inapp
```

## Usage
Before installing Inapp Notification Center make sure you have generated HMAC signature in the backend by following the below process
```jsx
import crypto from "crypto";
const computedUserHmac = crypto
  .createHmac("sha256", "WSID"+"INTEGRATION_TOKEN")
  .update("USER_ID")
  .digest("hex");

```

```jsx
import {FynoInappCenter} from '@fyno/inapp'

class Example extends Component {
  const config = {
    userId: 'USER_ID',
    workspaceId: 'WSID',
    signature: 'computedUserHmac'
    themeConfig: {
      logo: 'LINK_TO_BRAND_LOGO',
      primary: 'PRIMARY_COLOR',
      lightBackground: 'LIGHT_THEME_BACKGROUND_COLOR',
      darkBackground: 'DARK_THEME_BACKGROUND_COLOR'
    }, //optional
    notificationSettings: {
      sound: 'LINK_TO_NOTIFICATION_SOUND'
    } //optional
  }
  render() {
    return <FynoInappCenter {...config}/>
  }
}
```
OR

```jsx
import {FynoInApp} from '@fyno/inapp'

class Example extends Component {

  const themeConfig: {
      logo: 'LINK_TO_BRAND_LOGO',
      primary: 'PRIMARY_COLOR',
      lightBackground: 'LIGHT_THEME_BACKGROUND_COLOR',
      darkBackground: 'DARK_THEME_BACKGROUND_COLOR'
  }
  const notificationSettings = {
    sound: 'LINK_TO_NOTIFICATION_SOUND'
  }
  render() {  
    return <FynoInappCenter user="{userid}" workspace="{workspace_id}" signature="{signature generated from backend}" themeConfig={themeConfig} notificationSettings={notificationSettings}/>
  }
}
```