open-index/open-npm huggingface dataset:
npm package: @jsx-email/row
Description: A JSX email component which separates content boundaries horizontally
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/row
[npm-url]: https://www.npmjs.com/package/@jsx-email/row

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/row

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which separates content boundaries horizontally
<div><br>

[`@jsx-email/row` Documentation](https://jsx.email/docs/components/row)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/row

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/row
# yarn add @jsx-email/row
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Section } from '@jsx-email/section';
import { Row } from '@jsx-email/row';
import { Column } from '@jsx-email/column';

const Email = () => {
  return (
    <Section>
      <Row>
        <Column>A</Column>
      </Row>
      <Row>
        <Column>B</Column>
      </Row>
      <Row>
        <Column>C</Column>
      </Row>
    </Section>
  );
};
```

Please see the [`@jsx-email/row` Documentation](https://jsx.email/docs/components/row) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/section
Description: A JSX email component which creates section bordaries that can be formatted with columns and rows
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/section
[npm-url]: https://www.npmjs.com/package/@jsx-email/section

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/section

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which creates section bordaries that can be formatted with columns and rows
<div><br>

[`@jsx-email/section` Documentation](https://jsx.email/docs/components/section)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/section

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/section
# yarn add @jsx-email/section
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Section } from '@jsx-email/section';
import { Column } from '@jsx-email/column';
import { Row } from '@jsx-email/row';
import { Text } from '@jsx-email/text';

const Email = () => {
  return (
    {/* A simple `section` */}
    <Section>
      <Text>Hello World</Text>
    </Section>

    {/* Formatted with `rows` and `columns` */}
     <Section>
      <Row>
        <Column>Column 1, Row 1</Column>
        <Column>Column 2, Row 1</Column>
      </Row>
      <Row>
        <Column>Column 1, Row 2</Column>
        <Column>Column 2, Row 2</Column>
      </Row>
    </Section>
  );
};
```

Please see the [`@jsx-email/section` Documentation](https://jsx.email/docs/components/section) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/tailwind
Description: A JSX email component which enables using Tailwind CSS to style emails
Latest version: 3.0.3
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/tailwind
[npm-url]: https://www.npmjs.com/package/@jsx-email/tailwind

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/tailwind

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which enables using Tailwind CSS to style emails.
<div><br>

[`@jsx-email/tailwind` Documentation](https://jsx.email/docs/components/tailwind)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/tailwind

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/tailwind
# yarn add @jsx-email/tailwind
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Button } from '@jsx-email/button';
import { Tailwind } from '@jsx-email/tailwind';

const Email = () => {
  return (
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: {
              'custom-color': '#ff0000'
            }
          }
        }
      }}
    >
      <Button href="https://example.com" className="text-custom-color bg-white mx-auto">
        Click me
      </Button>
    </Tailwind>
  );
};
```

Please see the [`@jsx-email/tailwind` Documentation](https://jsx.email/docs/components/tailwind) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/text
Description: A JSX email component which renders a paragraph element
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/text
[npm-url]: https://www.npmjs.com/package/@jsx-email/text

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div><br>

# @jsx-email/text

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which renders a paragraph element
<div>

[`@jsx-email/text` Documentation](https://jsx.email/docs/components/text)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/text

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/text
# yarn add @jsx-email/text
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Text } from '@jsx-email/text';

const Email = () => {
  return <Text>Lorem ipsum</Text>;
};
```

Please see the [`@jsx-email/text` Documentation](https://jsx.email/docs/components/text) for props and additional usage information.

## License

[MIT License](./LICENSE.md)
npm package: @jsx-lite/cli
Description: jsx-lite CLI
Latest version: 1.0.1

# JSX-Lite CLI

A CLI for jsx-lite.

## Installation

```bash
npm install -g @jsx-lite/cli
```

## Usage

```bash
jsx-lite compile --to=<format> < <input-file>
cat my-file.tsx | jsx-lite compile -t=<format>
jsx-lite compile -t=<format> <input-file>
```

Check the output from `jsx-lite compile --help`.

**Examples**

```bash
jsx-lite compile -t react component.tsx
jsx-lite compile -t react < component.tsx
cat component.tsx | jsx-lite compile -t html -
jsx-lite compile -t react --out-dir build -- src/**/*.tsx
```

## Options

Supported formats for `--to` are:

- `reactNative`
- `solid`
- `vue`
- `react`
- `template`
- `html`
- `customElement`
- `jsxLite`
- `builder`
- `swift`
- `svelte`
- `liquid`
- `angular`

Supported formats for `--from` are:

- `jsxLite`
- `builder`
- `liquid`

## Cook book

Here are some recipes for standard tasks

### Validate how Builder will transform JSX Lite

```bash
cat components/postscript.lite.tsx |
  jsx-lite compile -t builder - |
  jsx-lite compile -f builder -t jsxLite
```

### Run jsx-lite on file system change

Use a tool like [entr](https://github.com/eradman/entr) or [guard](https://github.com/guard/guard)

```
find . -name '*lite.tsx' | entr make /_
```

## Known issues

- Running `jsx-lite` from the root of this repository breaks due to some
  dynamic babel configuration look up
- Files that are created as the result of `--out-dir=<dir>` maintain the original
  file extension of the input file, which doesn't make any sense in the case of
  an html output.
- `--out=<file>` does not support concatenating multiple files together.

## Manual installation

```bash
git clone git@github.com:BuilderIO/jsx-lite.git
cd jsx-lite/packages/cli
npm install
npm run build
npm link
```

# License

MIT - see LICENSE
npm package: @jsx-tree/cli
Description: Analyze JSX files as a tree structure
Author: Kim Dohyeon
Latest version: 0.1.0

## JSX-Tree

A powerful tool to parse and visualize JSX/TSX files in a tree structure.

### Features

- Parse JSX/TSX files and display them in a readable tree structure
- Filter by components only
- Filter by HTML elements only
- Include or exclude text nodes
- Show file paths for components
- Include or exclude specific tags
- Control the displayed tree depth

### Installation

```bash
# Install globally
npm install -g jsx-tree

# Or use npx directly
npx jsx-tree [options] [file]
```

### Usage

```bash
# Basic usage
jsx-tree path/to/your-component.jsx

# Alternative command
jt path/to/your-component.jsx
```

### Options

```bash
Arguments:
  file                          Path to the entry file (optional if using -e or default file exists)

Options:
  -V, --version                 output the version number
  -f, --entry <file>            Path to the entry file (default: ./index.jsx or ./index.tsx)
  -c, --components-only         Display only component nodes (default: false)
  -H, --html-only               Display only HTML tag nodes (default: false)
  -t, --show-text               Display text nodes (default: false)
  -p, --show-path               Display the file path for each node (default: false)
  -i, --include-tags <tags...>  Include only specified tags or components
  -e, --exclude-tags <tags...>  Exclude specified tags or components
  -d, --depth <depth>           Limit the display depth of the tree
  -h, --help                    display help for command
```

### Examples

Show only components with file paths:

```bash
jsx-tree --components-only --show-path src/App.jsx
```

Show HTML elements:

```bash
jsx-tree --html-only src/components/Header.tsx
```

Include text nodes and limit depth to 3:

```bash
jsx-tree --show-text --depth 3 src/pages/Home.jsx
```

Show only Button and Card components:

```bash
jsx-tree --include-tags Button Card src/ui/Components.jsx
```

Exclude div and span tags:

```bash
jsx-tree --exclude-tags div span src/layout/Main.jsx
```

### Contributing

Contributions are welcome! Please feel free to submit a Pull Request.
npm package: @jsx6/build
Description: Build utility
Author: Davor hrg
Latest version: 0.2.4


## filters 

During copy task you can transform the copied file content using filters.

config for filter contains
- `filter` - function taht transforms and returns new value, but can return `undefined` to say no changes happened
- `include` - list of include glob patterns
- `exclude` - list of exclude glob patterns

example filter

```js
const changeBg = {
  include: ['index.html'],
  exclude: [],
  filter: str => {
    let srch = 'background: #eee;'
    if (str.includes(srch)) return str.replace(srch, 'background: blue;')
  },
}
```
npm package: @jsx6/dom-observer
Description: Performance for multiple ResizeObserver and IntersectionObserver
Author: Davor hrg
Latest version: 2.0.1

# Performance for multiple ResizeObserver and IntersectionObserver

TLDR: It is better to reuse them instead of creating new for each observed element.

Both of the observers have a penalty when number of observes rises, and if they are reused
many more elements can be observed before havin performance issues. 

Here is an article in angular for IntersectionObserver: https://www.bennadel.com/blog/3954-intersectionobserver-api-performance-many-vs-shared-in-angular-11-0-5.htm

Here is link about reusing ResizeObserver https://stackoverflow.com/questions/51528940/resizeobserver-one-vs-multiple-performance

This part of `jsx6` is intentionally separated as it is standalone set of utilities that are useful
by itself. Separation makes it simpler to use, and is less likely to deter devs from using the code.

# IntersectionObserver in action

Here is a video showing a IntersectionObserver that has 101 threshold(one for each pecent). 
This an unlikely real-world use case, but it is neat to show how the observer works.

This example also shows-off how `jsx6` library precisely controls exact parts that need to change
in DOM, and is doing this by having direct references to elements,attributes and text nodes that are dynamic.

https://user-images.githubusercontent.com/2480762/197420342-56ee3381-d9c5-4625-b193-1c2f00178f84.mp4
npm package: @jsx6/jsx-dev-runtime
Description: JSX dev runtime for jsx6
Author: Davor hrg
Latest version: 1.8.18

# JSX dev runtime

to use with esbuild cli:

`--jsx=automatic --jsx-import-source=@jsx6 --jsx-dev`

or esbuild JS API:

```json
{
  jsx: "automatic",
  jsxImportSource: "@jsx6",
  jsxDev: true,
}
```

## `jsxDEV` function

Create a development element (TypeScript type).

Parameters:

*   `type` (`unknown`)
    — element type: `Fragment` symbol, tag name (`string`), component
*   `props` ([`Props`][api-props])
    — element props, `children`, and maybe `node`
*   `key` (`string` or `undefined`)
    — dynamicly generated key to use
*   `isStaticChildren` (`boolean`)
    — whether two or more children are passed (in an array), which is whether
    `jsxs` or `jsx` would be used in production runtime
*   `source` ([`Source`][api-source])
    — info about source
*   `self` (`undefined`)
    — this is used by frameworks that have components

sample source entry:

```json
{
  fileName: "src/someFile.jsx",
  lineNumber: 4,
  columnNumber: 5
}
```
npm package: @jsx6/jsx-runtime
Description: jsx runtime for jsx6
Author: Davor hrg
Latest version: 1.8.18

# JSX runtime

This is implementation of `jsx-runtime` for jsx6.

to use with esbuild cli:

`--jsx=automatic --jsx-import-source=@jsx6`

or esbuild JS API:

```
{
  jsx: 'automatic',
  jsxImportSource: '@jsx6',
  ...
}
```

### `jsx`

Create a production element (TypeScript type). Called when no children or one child. Equivalent to `isStaticChildren=false` when in dev runtime.

###### Parameters

*   `type` (`unknown`)
    — element type: `Fragment` symbol, tag name (`string`), component
*   `props` ([`Props`][api-props])
    — element props, `children`, and maybe `node`
*   `key` (`string` or `undefined`)
    — dynamicly generated key to use

###### Returns

An element from your framework (`JSX.Element`).

## `jsxs`

Same as `jsx` but will be called when there is more than one child element. Equivalent to `isStaticChildren=true` when in dev runtime.
npm package: @jsx6/jsx6
Description: JSX and ES6+ UI library
Author: Davor hrg
Latest version: 1.8.18

JSX6


## From validation

We provide here way to walk through a form that can be used to mark validation results.
The actual code that does markging ins not in the source, but examples are provided instaed, as it may depend greatly form project to project.

Exmaple validation result:
```js
let exampleValid = window.exampleValid = {
  items:{
    name: {message:'Required', type:'required'},// validation error
    address: {},// ok
    // city: undefined,// missing key means validation has no error for that field
    contact: {// subform
      message: 'general message for subform',
      items:{
        name: {message:'Required', type:'required'},// validation error
        email: {message:'Invalid email format', type:'invalid'},// has value but it is invalid
      }
    }
  }
}
```

Example validation setup:

```js
// actual function you will use in your project
function markValid(el, vErr){
  formForEach(el, vErr, validationMarker, validationMarker)
}

// the function doing all the hard work, deciding how to convey validation information into the DOM
export function validationMarker(el, vErr){
  el = toDomNode(el)
  if(!el) return
  let err = vErr?.message
  let parent = el.parentNode
  if(!parent) {
    console.warn(el, vErr)
    throw Error('element without parent HTMLElement')
  }
  // loop can have textNode as base element, and it can not have attributes or calss
  if(el.setAttribute) classIf(el, 'validation-error', err)
  setAttribute(parent,'validation-error-message', err)
  setAttribute(parent,'validation-error-type', vErr?.message)
}

// define how components can declare a custom validation function
validationMarker.hasOverride = el=>el?.markValid
// call the custom validation function
validationMarker.callOverride = function(el, vErr){
  if(el?.markValid){
    try{
      el?.markValid(vErr)
    }catch(e){
      console.error('problem with ',el,'.markValid',e)
    }
  }
}
```


## web components tricks
vanilla JS automatic registration using static initilaizer

```js
  class MyCustomElement extends HTMLElement{
    static { customElements.define('my-custom-element', this) } 
  }
```

or let user define the component and even change the element name

```js
  class MyCustomElement extends HTMLElement {
    static define(tag='my-custom-element'){ customElements.define(tag, this) } 
  }
  // in that case user must call define before using it
  MyCustomElement.define()
```
npm package: @jsx6/signal
Description: signal implementation for vanilla JS or JSX
Author: Davor hrg
Latest version: 1.8.18

# signal implementation

For use with vanilla JS or JSX.

Priority is simpler implementation of the library, not going all the way for ease of use. Simplify debug versus adding guardrails so users don't shoot them selves in the foot.

Priority is also to propagate signal values immediately, to make use of stack trace for debugging. Performance improvements can be done before filling signals with values for critical code paths, and also after listenting to signal values (part of code that applies dom updates). 

# TC39 signals

Aim is to be compatible, and watch for practical ides from the proposal (team there explores differences and similarities in implementations ATM)

https://github.com/tc39/proposal-signals

It is actual proposal than aims to standardize signals, and allow easier migration and cosolidate conept.

It prefers signals that automatically find their dependencies during value evaluation. That is not implemented  here, as the library author is more comfortable with creating an explicit implementation.

## PERFORMANCE 

One simple performance improvement builtin from the start is value caching for each signal.

Another performance improvementt that will still keep proper stack trace is to collect listeners
during update to SignalBag and firing them after SignalBag updates are done. That would cause a derived signal
that creates `fullNname` using `$signal.firstName` and `$signal.lastName` to be updated only once. Going broader than this could be useful, but also counter productive if it breaks stack trace visibility of value propagation.

postponing value evaluation is one way to reduce changes, and increase performance

- priority is to evaluate immediately to simplify reasoning.
- batching is opt-in as it is an optimisation
- provide means to do batching for critical paths
npm package: @jsx6/signal-dom
Description: Update DOM using signals implementation for vanilla JS or JSX
Author: Davor hrg
Latest version: 1.8.18

# signal integration with vanillajs and DOM

Use with vanilla JS or JSX. Signals implementation `@jsx6/signal` is narutal fit for usage with `JSX`, and purpose of this lib is to explore if signals can be made useful
for vanillajs.