open-index/open-npm huggingface dataset:
npm package: @stemn/logger
Description: Logger for Stemn function calls
Latest version: 0.0.4

# Logger

A logging class that wraps logs with metadata related to an instance of a
service transaction

## Logger.log

Appends...
- service details
- transactionId
- epoch

## Logger.detailed  

Appends...
- service details
- transaction id
- transaction initiation epoch
- epoch
- delta from transaction initiation
- contents of the optional metadata object passed to the constructor

## Logger.instrumentFunction 

Returns a function instrumented with a logger.
Each call logs...
- function name
- library if specified
- service

A detailed option appends further data to the log as per Logger.detailed

## Logger.warn

Logger.log with orange colouring

## Logger.error

Logger.log with red colouring
npm package: @stemp/node
Description: Official Node.js/TypeScript SDK for the Stemp API
Author: Stemp
Latest version: 0.1.0

<p align="center">
  <img src="https://cdn.stemp.app/logo/color.svg" alt="stemp" height="64" />
</p>

<h3 align="center">Node.js / TypeScript SDK</h3>

<p align="center">
  Official SDK for the <a href="https://stemp.app">stemp API</a>.<br/>
  Auto-generated from the <a href="https://github.com/stempapp/openapi">OpenAPI spec</a> with full TypeScript types.
</p>

---

## Installation

```bash
npm install @stemp/node
```

## Quick Start

```typescript
import { Stemp } from '@stemp/node';

const stemp = new Stemp({ apiKey: 'sk_live_...' });

// List templates
const { data } = await stemp.templates.getTemplates();

// Send notification to all passes of a template
await stemp.notifications.sendToTemplate({
  path: { templateId: 'tpl_123' },
  body: { message: 'New reward available!' },
});

// Add a stamp
await stemp.stamps.addStamp({
  path: { passId: 'pass_456' },
});

// Add points
await stemp.points.addPoints({
  path: { passId: 'pass_456' },
  body: { amount: 100 },
});

// Manage webhooks
const { data: endpoints } = await stemp.webhooks.listEndpoints();
```

## Configuration

```typescript
const stemp = new Stemp({
  apiKey: 'sk_live_...',          // Required: your API token
  baseUrl: 'https://api.stemp.app/api',  // Optional: defaults to production
});
```

## Available Namespaces

| Namespace | Description |
|-----------|------------|
| `stemp.templates` | Template CRUD operations |
| `stemp.notifications` | Send push notifications |
| `stemp.stamps` | Stamp card operations |
| `stemp.points` | Points/loyalty operations |
| `stemp.pointsConfig` | Points configuration |
| `stemp.pointsRedemptions` | Points redemption management |
| `stemp.pointsRewardTiers` | Reward tier management |
| `stemp.walletPass` | Wallet pass operations |
| `stemp.webhooks` | Webhook endpoint management |
| `stemp.apiKeys` | API key management |
| `stemp.organizations` | Organization management |
| `stemp.users` | User management |
| `stemp.apps` | App management |
| `stemp.templateAssets` | Template asset management |
| `stemp.templatePresets` | Template presets |
| `stemp.stampConfig` | Stamp configuration |
| `stemp.stampRewards` | Stamp rewards |

## Advanced: Custom Client

For full control, use the generated SDK classes directly:

```typescript
import { createClient, createConfig, TemplateApi } from '@stemp/node';

const client = createClient(createConfig({
  baseUrl: 'https://api.stemp.app/api',
  auth: () => 'sk_live_...',
}));

const templates = new TemplateApi({ client });
const { data } = await templates.getTemplates();
```

## License

MIT
npm package: @stemuli/icons
Description: [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
Author: nondefyde
Latest version: 1.2.0

# @stemuli/icons

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @stemuli/icons
```

## Usage

```tsx
import { Search } from '@stemuli/icons'
import '@stemuli/icons/dist/index.css'

const Component {

  return <Search />
}
```

## License

MIT © [nondefyde](https://github.com/nondefyde)
npm package: @stemuli/test-ui
Description: ## Getting Started
Latest version: 0.0.11

# STEMuli UI Components Library w/Typescript [WIP]

## Getting Started

Simply run the commands below and you _should_ have a working storybook displaying all of our components.

- `git clone repo`
- `yarn install`
- `yarn dev`

## Adding Components

Each component follows the folder structure below:

- ComponentName
  - index.tsx
  - index.stories.tsx
  - styles.ts

### Index.tsx

Exports react component to be consumed

### Stories.tsx

Showcase of component for storybook

### Styles.ts

Exports a styled component consumed by the react component

## Publishing to NPM

When you are ready to publish the package to NPM, use the `release.prepare` script:

```shell
yarn run release.prepare -m "Commit message" --patch
```

This script will increment the version number in `package.json` based on the specified version type (`--patch`, `--minor`, or `--major` are valid switches). The script will also check in the changes, commit the changes, and create a git tag with the new version number.

After the script runs successfully, you will need to push the tag to Github. Once the tag is pushed, Travis CI will run and publish the package to NPM. This process usually takes 1-2 minutes.

```shell
git push origin x.y.z
```

Where x.y.z is the new version number (part of the script output).

Notes:

- If the git commit message is left blank, it will default to "[Release]"
- If the version type is left blank, `patch` will be used by default
npm package: @stemuli/ui
Description: ## Getting Started
Author: Anthony Oyathelemhi tonero91@gmail.com
Latest version: 0.0.2

# STEMuli UI Components Library w/Typescript [WIP]

## Getting Started

Simply run the commands below and you _should_ have a working storybook displaying all of our components.

- `git clone repo`
- `yarn install`
- `yarn dev`

## Adding Components

Each component follows the folder structure below:

- ComponentName
  - index.tsx
  - index.stories.tsx
  - styles.ts

### Index.tsx

Exports react component to be consumed

### Stories.tsx

Showcase of component for storybook

### Styles.ts

Exports a styled component consumed by the react component

## Publishing to NPM

When you are ready to publish the package to NPM, use the `release.prepare` script:

```shell
yarn run release.prepare -m "Commit message" --patch
```

This script will increment the version number in `package.json` based on the specified version type (`--patch`, `--minor`, or `--major` are valid switches). The script will also check in the changes, commit the changes, and create a git tag with the new version number.

After the script runs successfully, you will need to push the tag to Github. Once the tag is pushed, Travis CI will run and publish the package to NPM. This process usually takes 1-2 minutes.

```shell
git push origin x.y.z
```

Where x.y.z is the new version number (part of the script output).

Notes:

- If the git commit message is left blank, it will default to "[Release]"
- If the version type is left blank, `patch` will be used by default
npm package: @stemy/ngx-crud
Description: This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.3.
Author: stemy
Latest version: 19.9.2

# NgxUtils

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.3.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @stemy/ngx-dynamic-form
Description: This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.3.
Author: stemy
Latest version: 19.9.2

# NgxUtils

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.3.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @stemy/ngx-electron
Description: This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
Latest version: 17.0.3

# ConfiguratorUiCore

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @stemy/ngx-utils
Description: This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.3.
Author: stemy
Latest version: 19.9.9

# NgxUtils

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.3.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @sten-agency/vue-env-notify
Description: A VueJS package to let you know the environment you are currently interacting with in the browser.
Author: Faruq Alli-Balogun
Latest version: 0.1.4

# Vue Env Notify

A VueJS package to let you know the environment you are currently interacting with in the browser.

[![Known Vulnerabilities](https://badgen.net/bundlephobia/minzip/@sten-agency/vue-env-notify)](https://bundlephobia.com/result?p=@sten-agency/vue-env-notify)

[![npm version](https://badge.fury.io/js/%40sten-agency%2Fvue-env-notify.svg)](https://badge.fury.io/js/%40sten-agency%2Fvue-env-notify)

```shell
yarn add @sten-agency/vue-env-notify 

# npm i @sten-agency/vue-env-notify
```

## Setup

Add `id="favicon"` to your link tag for favicon.

```js
import Vue from 'vue'
import vueEnvNotify from "@sten-agency/vue-env-notify";

Vue.use(vueEnvNotify, {
  env: process.env.NODE_ENV,
  trackNetwork: true,
  offlineFavicon: null,
  envAssets: {
    development: null,
    staging: null,
    production: null,
  },
});
```

### Options

Name | Type | Description
---- | ---- | -----------
env | String | Set the NODE_ENV enviroment variable
trackNetwork | Boolean | Set to true or false
offlineFavicon | String | URL of your offline favicon
envAssets | Object | URL for the different environments

### Functions

Name | Usage
---- | ---- 
setTitle | `vueEnvNotify.setTitle(process.env.NODE_ENV, this.$route.meta.title);`


## To use page title features, follow the step below

In your `App.vue` file

1. Import vue-env-notify - `import vueEnvNotify from "@sten-agency/vue-env-notify";`
2. Add the code below to the mounted hook 

```js  
vueEnvNotify.setTitle(process.env.NODE_ENV, this.$route.meta.title);
```
3. Also watch for changes on `$route(to)`

```js  
$route(to) {
  vueEnvNotify.setTitle(process.env.NODE_ENV, to.meta.title);
},
```

and last don't forget to add `meta.title` to your route file like below.
```js
meta: {
  title: "Home Page", 
},
```
npm package: @stenajs-webui/calendar
Description: This package provides components and functionality for calendars,  and input fields using calendar functionality.
Author: mattias800
Latest version: 23.13.0

# stenajs-webui/calendar

This package provides components and functionality for calendars, 
and input fields using calendar functionality.

## Components

### Calendars

* [DateRangeCalendar](src/components/calendar-types/date-range-calendar/DateRangeCalendar.md)
* MultiDateCalendar
* SingleDateCalendar
* SingleWeekCalendar

### Input fields

* DateInput
* DateRangeInput
* DateTextInput
* TimeTextInput
npm package: @stenajs-webui/core
Description: The core library for @stenajs-webui.
Author: mattias800
Latest version: 23.13.0

# stenajs-webui/core

The core library for @stenajs-webui.

All other packages depend on core.

## View components

### Layout

Box is the main building stone which most other components are derived from.

- [Box](src/components/layout/box/Box.md)

#### Components derived from Box

- Column (same as Box, content is placed in a column)
- Row (same as Box, content is placed in a row)
- [Indent](src/components/layout/indent/Indent.md)
- [Space](src/components/layout/space/Space.md)
- [Spacing](src/components/layout/spacing/Spacing.md)

### Interaction

- [Clickable](src/components/interaction/Clickable.md)

### Decorators

- SeparatorLine

## Hooks

`core` includes a collection of hooks.
See [`src/hooks/README.md`](src/hooks/README.md) for details.

## Comparators

There are a few comparators that can be used to sort arrays of objects.

- byStringField
- byNumberField

```
const r = users
  .filter((user) => user.age > 17)
  .toSorted(byStringField((i) => i.name))
  .toReversed()
  .map((p) => `${p.firstName} ${p.lastName}`)
  .join(", ");
```
npm package: @stenajs-webui/elements
Description: This package contain simpler UI elements, such as buttons, chip, badge, etc.
Author: mattias800
Latest version: 23.13.0

# stenajs-webui/elements

This package contain simpler UI elements, such as buttons, chip, badge, etc.

These are primarly "dumb" components, with no (or very little) logic.

## Components

- [ActionMenu](src/components/ui/action-menu/ActionMenu.md)
- Badge
- Buttons
  - FlatButton
  - PrimaryButton
  - SecondaryButton
  - ButtonGroup
  - StandardButton (deprecated)
  - UpDownButtons
- Chip
- Icon
- Link
- Spinner
- ToggleButton
npm package: @stenajs-webui/forms
Description: This package contains components related to forms.
Author: mattias800
Latest version: 23.13.0

# stenajs-webui/forms

This package contains components related to forms.

## Components

- Checkbox
- Radio
- Switch
- TextInputs
  - [NumericTextInput](src/components/ui/numeric-text-input/NumericTextInput.md)
  - TextInput
  - TextArea
- Checkbox
npm package: @stenajs-webui/grid
Description: This package contains hooks and components that can help create grids that can be navigated similar to Excel.
Author: mattias800
Latest version: 23.13.0

# @stenajs-webui/grid

This package contains hooks and components that can help create grids that can be navigated similar to Excel.

# StandardTable

## Summary rows

Column configs has three options for summary rows:

- `renderSummaryCell`
- `summaryText`
- `summaryCellColSpan`

### renderSummaryCell and summaryText

If `renderSummaryCell` or `summaryText` is set for any column,
the table will get a summary row at the bottom.

#### `summaryText`

Receives `items` in argument object, and must return a string.

#### `renderSummaryCell`

Receives `items` and `text` in argument object.
If no `summaryText` was specified, then `text` will be undefined.

If no `renderSummaryCell` is specified, then a default renderer for summary
will be used.

Examples:

```
summaryText: ({ items }) =>
  String(sumBy(items, (item) => item.numPassengers ?? 0)),
```

```
renderSummaryCell: ({ items, text }) => (
  <Indent>
    <Tag label={text} />
  </Indent>
)
```

### summaryCellColSpan

`summaryCellColSpan` can be set to make the cell span multiple columns.

If any columns after the spanning column has summary options, they will be ignored.

If there are column groups, a column can only span over columns of that column group.

If `summaryCellColSpan` is too high and won't fit into the table (or column group) then
the col span will be limited so that it fits.
npm package: @stenajs-webui/grid-export
Description: This package adds ability to export Excel (.xlsx) documents.
Author: mattias800
Latest version: 23.13.0

# stenajs-webui/grid-export

This package adds ability to export Excel (.xlsx) documents.

It exports `StandardTableExcelExportButton` component
which takes props `config` (StandardTable config) and `items`.

It also takes prop `filename` which is optional.
Default is `exported-spreadsheet`. File extension is added automatically.

When the user clicks the button, the download starts immediately.

Example:

```
<Column>
  <StandardTableExcelExportButton
    config={config}
    items={items}
    filename={"exported-user-list"}
  />
  <StandardTable config={config} items={items} />
</Column>
```
npm package: @stenajs-webui/panels
Description: This package contains larger, more use‑case driven components built by composing primitives from other `@stenajs-webui/*` packages.
Author: mattias800
Latest version: 23.13.0

# @stenajs-webui/panels

This package contains larger, more use‑case driven components built by composing primitives from other `@stenajs-webui/*` packages.

Use these panels to quickly assemble common application scaffolding and rich UI building blocks.

## Components overview

- ActionMenuButton (and variants) — Buttons that open contextual action menus.
- CheckboxMenu — Menu with checkable items for multi‑select actions.
- Collapsible — Expand/collapse container with helpers for lists and grouped content.
- Drawer — Slide‑in container for side panels and temporary content.
- ErrorPanel & ErrorScreen — Display error messages and recovery actions.
- ImageCarousel — Inline image carousel with fullscreen, zoom, captions and counter.
- LoadingPanel & LoadingScreen — Loading placeholders for panels and full screen.
- NavBar — Application top navigation with buttons, search field, user menu, etc.
- Notifications — Toasts and in‑app notifications (Notification, NotificationList, UnreadDot).
- PageHeader — Page header layout and helpers (heading and rows).
- ProductCard — Rich product presentation card (uses ImageCarousel under the hood).
- ProductSummaryCard — Compact summary variant of product information.
- SelectedItemsActionsPanel — Sticky panel for bulk actions.
- SidebarMenu — Collapsible/pinnable sidebar navigation and rail menu.

Note: Not all subcomponents are listed; see Storybook for examples and usage.

## ImageCarousel usage

ImageCarousel relies on `yet-another-react-lightbox` and some of its plugins. Required styles are now included automatically by the panels package when you use ImageCarousel or components that render it (no manual CSS imports needed).

Basic example:

<ImageCarousel
  images={[
    {
      url: "https://example.com/image-900x600.jpg",
      alt: "Front view",
      width: 900,
      height: 600,
      title: "Front view",
      description: "Click to open fullscreen",
      fullscreenImage: {
        url: "https://example.com/image-1800x1200.jpg",
        width: 1800,
        height: 1200,
      },
    },
  ]}
  altLabelPrevious="Previous image"
  altLabelNext="Next image"
  altLabelClose="Close"
  altLabelZoomIn="Zoom in"
  altLabelZoomOut="Zoom out"
/>

Accessibility: Provide meaningful alt text and labels for all controls as shown above.

## ProductCard

ProductCard uses ImageCarousel internally to display images. The required lightbox styles are bundled automatically when using the component.
npm package: @stencil-community/helmet
Description: Declaratively update the head from a Stencil app.
Author: Ionic Team
Latest version: 0.3.3

[![@stencil-community/helmet](https://img.shields.io/npm/v/@stencil-community/helmet.svg)](https://npm.im/@stencil-community/helmet)

# Stencil Helmet

> Declaratively update the `<head>` from a Stencil app.

---

This is a [Stencil](https://github.com/ionic-team/stencil) component meant to be used within Stencil apps to declaratively update the document `<head>`. You pass it elements that you'd normally place in `<head>`, and it updates `<head>` accordingly. Each instance will override duplicate tags from preceding instances.

**Note** that, because it uses virtual DOM as input, stencil-helmet can only be used within Stencil apps and not as a standalone web component.

## Installation

```
npm install @stencil-community/helmet
```

## Usage

```jsx
import Helmet from '@stencil-community/helmet';

//...
export class MyComponent {
  render() {
    return (
      <div>
        <Helmet>
          <title>{this.title}</title>
          <meta name="description" content={this.description}/>
          <link rel="stylesheet" href="/styles.css"/>
        </Helmet>
      </div>
    );
  }
}
```
npm package: @stencil-community/less
Description: The Stencil Less Plugin
Author: Ionic Team
Latest version: 2.0.0

# @stencil-community/less

This package is used to easily precompile Less files within the Stencil components.

First, npm install within the project:

```bash
npm install @stencil-community/less --save-dev
```

Next, within the project's `stencil.config.js` file, import the plugin and add it to the config's `plugins` config:

#### stencil.config.ts
```ts
import { Config } from '@stencil/core';
import { less } from '@stencil-community/less';

export const config: Config = {
  plugins: [
    less()
  ]
};
```

During development, this plugin will kick-in for `.less` style urls, and precompile them to CSS.

## Options

### Plugins

The `plugins` config is an array of Less plugins.

```js
const LessPluginAutoPrefix = require('less-plugin-autoprefix');

exports.config = {
  plugins: [
    less({
      plugins: [
        new LessPluginAutoPrefix({
          browsers: ['last 2 versions']
        })
      ]
    })
  ]
};
```

### Inject Globals Less Paths

The `injectGlobalPaths` config is an array of paths that automatically get added as `@import` declarations to all components. This can be useful to inject Less variables, mixins and functions to override defaults of external collections. Relative paths within `injectGlobalPaths` should be relative to the `stencil.config.js` file.

```js
exports.config = {
  plugins: [
    less({
      injectGlobalPaths: [
        'src/globals/variables.less',
        'src/globals/mixins.less'
      ]
    })
  ]
};
```

Note that each of these files are always added to each component, so in most cases they shouldn't contain CSS because it'll get duplicated in each component. Instead, `injectGlobalPaths` should only be used for Less variables, mixins and functions, but not contain any CSS.

## Related

* [Less](https://www.npmjs.com/package/less)
* [LessPluginAutoPrefix](https://www.npmjs.com/package/less-plugin-autoprefix)
* [Stencil](https://stenciljs.com/)
* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com)
* [Ionic Components](https://www.npmjs.com/package/@ionic/core)
* [Ionicons](http://ionicons.com/)

## Contributing

Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
npm package: @stencil-community/postcss
Description: The Stencil PostCSS Plugin
Author: Ionic Team
Latest version: 2.2.0

# @stencil-community/postcss

This package is used in order to integrate with postcss and all of its plugins.

First, npm install within the project:

```
npm install @stencil-community/postcss --save-dev
```

Next, within the project's `stencil.config.ts` file, import the plugin and add
it to the `plugins` config. In the example below we're using the `autoprefixer` postcss plugin, so you'll also have to run:

```
npm install autoprefixer @types/autoprefixer --save-dev
```

This plugin requires Node.js 14 or higher. For older Node versions, see the 1.x release.

#### stencil.config.ts
```ts
import { Config } from '@stencil/core';
import { postcss } from '@stencil-community/postcss';
import autoprefixer from 'autoprefixer';

export const config: Config = {
  plugins: [
    postcss({
      plugins: [autoprefixer()]
    })
  ]
};
```

During development, this plugin will use postcss to process any plugins you may
have passed along.

## Options

Postcss has an ecosystem of plugins itself (a plugin for a plugin if you will).
For our example, we're using the autoprefixer plugin, and configuring its
options. Note, you can pass any valid autoprefixer option.

```js
exports.config = {
  plugins: [
    postcss({
      plugins: [
        autoprefixer({
          browsers: ['last 6 versions'],
          cascade: false
        })
      ]
    })
  ]
};
```

### Inject Globals Paths

The `injectGlobalPaths` config is an array of paths that automatically get added as `@import` declarations to all components. This can be useful to inject variables, mixins and functions to override defaults of external collections. Relative paths within `injectGlobalPaths` should be relative to the `stencil.config.js` file.

```js
exports.config = {
  plugins: [
    postcss({
      injectGlobalPaths: [
        'src/globals/variables.pcss',
        'src/globals/mixins.pcss'
      ]
    })
  ]
};
```

Note that each of these files are always added to each component, so in most cases they shouldn't contain CSS because it'll get duplicated in each component. Instead, `injectGlobalPaths` should only be used for Sass variables, mixins and functions, but not contain any CSS.

## Valid file extensions

This plugin will only transpile files whose extensions are `.css`, `.pcss`, or `.postcss`.

## Related

* [postcss](https://github.com/postcss/postcss)
* [autoprefixer](https://github.com/postcss/autoprefixer)
* [Stencil](https://stenciljs.com/)
* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com)
* [Ionic Components](https://www.npmjs.com/package/@ionic/core)
* [Ionicons](http://ionicons.com/)

## Contributing

Please see our [Contributor Code of
Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for
information on our rules of conduct.
npm package: @stencil-community/react-output-target
Description: React component wrappers for Stencil web components
Author: Stencil Community
Latest version: 0.0.4

<p align="center">
  <a href="#">
    <img alt="Stencil React Output Target" src="https://github.com/stencil-community/stencil-react-output-target/blob/main/.github/logo.png?raw=true" width="84" />
  </a>
</p>

<h1 align="center">
  Stencil React Output Target
</h1>

<p align="center">

The Stencil React Output Target simplifies the process for Stencil web component library creators by automatically generating React component wrappers for Stencil components. With this package, Stencil component authors can ensure type safety, while also enjoying the familiarity of React-style syntax for their components and APIs. This solution leverages the [`@lit/react`](https://www.npmjs.com/package/@lit/react) package to streamline the process, making it easier than ever to create Stencil components that integrate seamlessly with React applications.

</p>

<p align="center">
  <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Stencil React Output Target is released under the MIT license." />
  <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
</p>

## Installation

```bash
npm install @stencil-community/react-output-target --save-dev
```

## Usage

### Add the output target to your Stencil config

```ts
import { Config } from '@stencil/core';
import { reactOutputTarget } from '@stencil-community/react-output-target';

export const config: Config = {
  namespace: 'mycomponentlibrary',
  outputTargets: [
    {
      type: 'dist-custom-elements',
    },
    reactOutputTarget({
      outputPath: '../react-demo/src/components/react-components.ts',
    }),
  ],
};
```

> The react output target requires the `dist-custom-elements` output target to be configured as well. This is required to generate tree-shakable components.

### Install the `@lit/react` package in your React app

The generated React components depend on the `@lit/react` package.

```bash
npm install @lit/react --save
```

### Install the Stencil library in your React app or library

The React application should have a dependency to your Stencil library. This can be done with a variety approaches, including installing the npm package from the registry, symbolic linking, or using a tool like pnpm workspaces.

### Use the React components in your React app or library

```tsx
import { MyComponent } from './components/react-components';

export const App = () => {
  return (
    <div>
      <MyComponent
        first="Stencil"
        last="'Don't call me a framework' JS"
      ></MyComponent>
    </div>
  );
};
```
npm package: @stencil-tools/languageserver
Description: The Stencil Language Server (SLS) is built upon the [Language Server Protocol](https://github.com/Microsoft/language-server-protocol/blob/master/protocol.md). It enables anyone to add support for [Stencil](https://github.com/ionic-team/stencil) projects i
Author: Nate Moore
Latest version: 3.0.0-alpha.1

# Stencil Language Server

The Stencil Language Server (SLS) is built upon the [Language Server Protocol](https://github.com/Microsoft/language-server-protocol/blob/master/protocol.md). It enables anyone to add support for [Stencil](https://github.com/ionic-team/stencil) projects in their favorite editor.

## Installation
(This won't work yet!)
```bash
npm i stencil-languageserver
```

## Features
- Context-aware completions
	- Decorators (with Automatic Imports)
	- Component Lifecycle Methods
	- Component Methods (`hostData`, `render`)
	- `@Watch(...props)`
	- `@Listen(...events)`
- Document Links
- Diagnostics

To enable these features in your editor, you can install one of the extensions below (or build your own!)

## Editor Plugins
 - **Visual Studio Code**: [Stencil Tools](https://github.com/natemoo-re/vscode-stencil-tools) *(coming soon)*

## Creating an Editor Plugin


## LSP Extensions
This language server implements some LSP extensions, prefixed with an `x`.

- **[Files extension](https://github.com/sourcegraph/language-server-protocol/blob/master/extension-files.md)**
  Allows the server to request file contents without accessing the file system
npm package: @stencil/helmet
Description: Declaratively update the head from a Stencil app.
Author: Ionic Team
Latest version: 0.3.3
Deprecated: @stencil/helmet is no longer supported

[![CircleCI](https://img.shields.io/circleci/project/github/ionic-team/stencil-helmet/master.svg)](https://circleci.com/gh/ionic-team/stencil-helmet)
[![@stencil/helmet](https://img.shields.io/npm/v/@stencil/helmet.svg)](https://npm.im/@stencil/helmet)

# Stencil Helmet

> Declaratively update the `<head>` from a Stencil app.

---

This is a [Stencil](https://github.com/ionic-team/stencil) component meant to be used within Stencil apps to declaratively update the document `<head>`. You pass it elements that you'd normally place in `<head>`, and it updates `<head>` accordingly. Each instance will override duplicate tags from preceding instances.

**Note** that, because it uses virtual DOM as input, stencil-helmet can only be used within Stencil apps and not as a standalone web component.

## Installation

```
npm install @stencil/helmet
```

## Usage

```jsx
import Helmet from '@stencil/helmet';

//...
export class MyComponent {
  render() {
    return (
      <div>
        <Helmet>
          <title>{this.title}</title>
          <meta name="description" content={this.description}/>
          <link rel="stylesheet" href="/styles.css"/>
        </Helmet>
      </div>
    );
  }
}
```
npm package: @stencil/less
Description: The Stencil Less Plugin
Author: Ionic Team
Latest version: 1.0.0
Deprecated: @stencil/less is no longer supported

# @stencil/less

This package is used to easily precompile Less files within the Stencil components.

First, npm install within the project:

```bash
npm install @stencil/less --save-dev
```

Next, within the project's `stencil.config.js` file, import the plugin and add it to the config's `plugins` config:

#### stencil.config.ts
```ts
import { Config } from '@stencil/core';
import { less } from '@stencil/less';

export const config: Config = {
  plugins: [
    less()
  ]
};
```

During development, this plugin will kick-in for `.less` style urls, and precompile them to CSS.

## Options

### Plugins

The `plugins` config is an array of Less plugins.

```js
const LessPluginAutoPrefix = require('less-plugin-autoprefix');

exports.config = {
  plugins: [
    less({
      plugins: [
        new LessPluginAutoPrefix({
          browsers: ['last 2 versions']
        })
      ]
    })
  ]
};
```

### Inject Globals Less Paths

The `injectGlobalPaths` config is an array of paths that automatically get added as `@import` declarations to all components. This can be useful to inject Less variables, mixins and functions to override defaults of external collections. Relative paths within `injectGlobalPaths` should be relative to the `stencil.config.js` file.

```js
exports.config = {
  plugins: [
    less({
      injectGlobalPaths: [
        'src/globals/variables.less',
        'src/globals/mixins.less'
      ]
    })
  ]
};
```

Note that each of these files are always added to each component, so in most cases they shouldn't contain CSS because it'll get duplicated in each component. Instead, `injectGlobalPaths` should only be used for Less variables, mixins and functions, but not contain any CSS.

## Related

* [Less](https://www.npmjs.com/package/less)
* [LessPluginAutoPrefix](https://www.npmjs.com/package/less-plugin-autoprefix)
* [Stencil](https://stenciljs.com/)
* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com)
* [Ionic Components](https://www.npmjs.com/package/@ionic/core)
* [Ionicons](http://ionicons.com/)

## Contributing

Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
npm package: @stencil/postcss
Description: The Stencil PostCSS Plugin
Author: Ionic Team
Latest version: 2.1.0
Deprecated: @stencil/postcss has been deprecated. Please see the community-driven package, '@stencil-community/postcss'

# @stencil/postcss

This package is used in order to integrate with postcss and all of its plugins.

First, npm install within the project:

```
npm install @stencil/postcss --save-dev
```

Next, within the project's `stencil.config.ts` file, import the plugin and add
it to the `plugins` config. In the example below we're using the `autoprefixer` postcss plugin, so you'll also have to run:

```
npm install autoprefixer @types/autoprefixer --save-dev
```

This plugin requires Node.js 14 or higher. For older Node versions, see the 1.x release.

#### stencil.config.ts
```ts
import { Config } from '@stencil/core';
import { postcss } from '@stencil/postcss';
import autoprefixer from 'autoprefixer';

export const config: Config = {
  plugins: [
    postcss({
      plugins: [autoprefixer()]
    })
  ]
};
```

During development, this plugin will use postcss to process any plugins you may
have passed along.

## Options

Postcss has an ecosystem of plugins itself (a plugin for a plugin if you will).
For our example, we're using the autoprefixer plugin, and configuring its
options. Note, you can pass any valid autoprefixer option.

```js
exports.config = {
  plugins: [
    postcss({
      plugins: [
        autoprefixer({
          browsers: ['last 6 versions'],
          cascade: false
        })
      ]
    })
  ]
};
```

### Inject Globals Paths

The `injectGlobalPaths` config is an array of paths that automatically get added as `@import` declarations to all components. This can be useful to inject variables, mixins and functions to override defaults of external collections. Relative paths within `injectGlobalPaths` should be relative to the `stencil.config.js` file.

```js
exports.config = {
  plugins: [
    postcss({
      injectGlobalPaths: [
        'src/globals/variables.pcss',
        'src/globals/mixins.pcss'
      ]
    })
  ]
};
```

Note that each of these files are always added to each component, so in most cases they shouldn't contain CSS because it'll get duplicated in each component. Instead, `injectGlobalPaths` should only be used for Sass variables, mixins and functions, but not contain any CSS.

## Valid file extensions

This plugin will only transpile files whose extensions are `.css`, `.pcss`, or `.postcss`.

## Related

* [postcss](https://github.com/postcss/postcss)
* [autoprefixer](https://github.com/postcss/autoprefixer)
* [Stencil](https://stenciljs.com/)
* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com)
* [Ionic Components](https://www.npmjs.com/package/@ionic/core)
* [Ionicons](http://ionicons.com/)

## Contributing

Please see our [Contributor Code of
Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for
information on our rules of conduct.
npm package: @stencil/ssg
Description: Stencil Static Site Generation Utilities
Author: Ionic Team
Latest version: 0.0.22
Deprecated: @stencil/ssg is no longer supported

# Stencil Static Site Generation Utilities 🏎💨

Utility functions and helpers for building static sites with [Stencil](https://stenciljs.com/):

- Parse Markdown
- Parse HTML
- Parse Yaml Front Matter
- Code Syntax Highlighting with [Prism](https://prismjs.com/)
- Generate site table of contents
- Convert Markdown/HTML into serializable JSX
- Functional Component to render serialized JSX with minimal runtime
- Slugify text

## Syntax Highlighting 

Uses [Prism](https://prismjs.com/) at build-time for code block syntax highlighting. 
Prism JavaScript is not needed at run-time, however the Prism CSS must be provided by the site.

### Setting Code Language

    ```typescript
    const mph: number = 88;
    ```

### Adding Code Diffs

    ```diff-typescript
    - const mph: number = 88;
    + let year = 85;
    ```
npm package: @stencil/ssr
Description: A package for server-side rendering Stencil components.
Author: Ionic Team
Latest version: 0.3.1

# @stencil/ssr

> A package for server-side rendering Stencil components.

This package provides utilities for server-side rendering Stencil components in React. You can use it in Webpack, Next.js or Vite based applications, e.g. Remix.

## Install

Install this package via:

```sh
$ npm install --save-dev @stencil/ssr
```

## Setup

The package exports plugins for different compiler.

### Vite

In your e.g. Vite configuration, add the `stencilSSR` plugin as following:

```ts
import { defineConfig } from "vite";
import { stencilSSR } from "@stencil/ssr";

export default defineConfig({
  // ...
  plugins: [
    stencilSSR({
      module: import('component-library-react'),
      from: 'component-library-react',
      hydrateModule: import('component-library/hydrate'),
      serializeShadowRoot: 'declarative-shadow-dom'
    }),
  ],
});
```

### Next.js

If you are using Next.js, you can wrap your `NextConfig` as following:

```ts
// next.conf.mjs
import stencilSSR from '@stencil/ssr/next';

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default stencilSSR({
  module: import('component-library-react'),
  from: 'component-library-react',
  hydrateModule: import('component-library/hydrate'),
  serializeShadowRoot: {
    'scoped': ['my-counter'],
    default: 'declarative-shadow-dom',
  },
})(nextConfig);
```

### Webpack

In Webpack configurations you can set up this plugin as following:

```ts
const { StencilSSRWebpackPlugin } = require('@stencil/ssr/webpack')

module.exports = {
  //...
  plugins: [
    new StencilSSRWebpackPlugin({
      module: import('component-library-react'),
      from: 'component-library-react',
      hydrateModule: import('component-library/hydrate'),
      serializeShadowRoot: {
        'scoped': ['my-counter'],
        default: 'declarative-shadow-dom',
      },
    })
  ],
};
```

## Options

The plugin requires the following options:

#### `module`

The package or module import that exposes your wrapped Stencil components using the [React Output Target](https://www.npmjs.com/package/@stencil/react-output-target).

### `from`

The name of the library that exposes your Stencil components.

### `hydrateModule`

The import of the hydrate module generated by the [Stencil hydrate output target](https://stenciljs.com/docs/hydrate-app#how-to-use-the-hydrate-app).

For more information about Server Side Rendering with Stencil, checkout the [documentation](https://stenciljs.com/docs/server-side-rendering).

### `runtime`

The reference to the runtime package.
npm package: @stencil/stylus
Description: The Stencil Stylus Plugin
Author: Ionic Team
Latest version: 1.0.1
Deprecated: @stencil/stylus is no longer supported

# @stencil/stylus

This package is used to easily precompile Stylus files within the Stencil components.

First, npm install within the project:

```bash
npm install @stencil/stylus --save-dev
```

Next, within the project's `stencil.config.js` file, import the plugin and add it to the config's `plugins` config:

#### stencil.config.ts
```ts
import { Config } from '@stencil/core';
import { stylus } from '@stencil/stylus';

export const config: Config = {
  plugins: [
    stylus()
  ]
};
```

During development, this plugin will kick-in for `.styl` and `.stylus` style urls, and precompile them to CSS.

## Options

### Include Paths

The `includePaths` config is an array of paths that are used to resolve imports. By default, the plugin adds the project root dir and the current dir of the file to this array. The files should be relative to the root folder.

```js
exports.config = {
  plugins: [
    stylus({
      includePaths: [
        'src/globals'
      ]
    })
  ]
};
```

### Inject Globals Stylus Paths

The `injectGlobalPaths` config is an array of paths that automatically get added as `@import` declarations to all components. This can be useful to inject Stylus variables, mixins and functions to override defaults of external collections. Relative paths within `injectGlobalPaths` should be relative to the `stencil.config.js` file.

```js
exports.config = {
  plugins: [
    stylus({
      injectGlobalPaths: [
        'src/globals/variables.styl',
        'src/globals/mixins.styl'
      ]
    })
  ]
};
```

Note that each of these files are always added to each component, so in most cases they shouldn't contain CSS because it'll get duplicated in each component. Instead, `injectGlobalPaths` should only be used for Stylus variables, mixins and functions, but not contain any CSS.

### Plugins

The `plugins` config is an array of Stylus plugins.

```js
const axis = require('axis');
const nib = require('nib');

exports.config = {
  plugins: [
    stylus({
      plugins: [
        axis(),
        nib()
      ]
    })
  ]
};
```

## Related

* [Stylus](https://www.npmjs.com/package/stylus)
* [axis](https://www.npmjs.com/package/axis)
* [nib](https://www.npmjs.com/package/nib)
* [Stencil](https://stenciljs.com/)
* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com)
* [Ionic Components](https://www.npmjs.com/package/@ionic/core)
* [Ionicons](http://ionicons.com/)

## Contributing

Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
npm package: @stencil/types-output-target
Description: Generate native TypeScript type definitions for using Stencil web components in various frameworks (React, Vue, Svelte, Solid, Preact).
Author: Ionic Team
Latest version: 0.1.1

# @stencil/types-output-target

Automate the creation of type definitions for your Stencil web components.

- React (v19+ natively supports custom elements)
- Vue (v3+)
- Solid
- Svelte
- Preact

## Setup

### In Your Stencil Component Library

Install the `@stencil/types-output-target` package in your Stencil project as a development dependency:

```bash
npm install @stencil/types-output-target --save-dev
```

Configure the output target in your `stencil.config.ts` file:

```ts
import { Config } from '@stencil/core';
import { typesOutputTarget } from '@stencil/types-output-target';

export const config: Config = {
  outputTargets: [
    typesOutputTarget({
      reactTypesPath: 'dist/types',
      vueTypesPath: 'dist/types',
      solidTypesPath: 'dist/types',
      svelteTypesPath: 'dist/types',
      preactTypesPath: 'dist/types',
    }),
  ],
};
```

Build your Stencil project to generate the framework-specific type definitions:

```bash
npm run build
```

The component wrappers will be generated in the specified output directory.

### Peer Dependencies

Ensure that your Stencil component library's `package.json` includes the necessary peer dependencies for the frameworks you are targeting. For example, for React:

```json
"peerDependencies": {
  "@types/react": ">=19"
},
"peerDependenciesMeta": {
  "@types/react": {
    "optional": true
  }
}
```

### Using the Generated Types

Your users can now import the generated type definitions in their projects to get type support for your Stencil web components in their chosen framework. 
For example, in a React project:

```tsx
import 'your-component-library/react-types';
```
npm package: @stencil/utils
Description: Dev tools to improve cross platform experiences.
Author: ionic team
Latest version: 0.0.5
Deprecated: @stencil-utils is no longer supported

[![npm][npm-badge]][npm-badge-url]

# Stencil Utils

This is a simple set of tools that can be executed through a terminal or through function calls.

```
sd rimraf ./testdir
```

- **rimraf**
  - Provide a directory that should be recursively deleted from the filesystem
  - Example: `sd rimraf ./testdir`
- **copyDir**
  - Recursively copy all contents of one folder into another.
  - Example: `sd copyDir ./testdir ./testdir2`
- **mkdirp**
  - Create a directory and child directories based on path. Same as 'mkdir -p' in *nix systems.
  - Example: `sd mkdirp ./testdir/depth1/depth2/depth3`
- **concurrent**
  - Execute multiple commands concurrently on windows or *nix systems
  - Example: `sd concurrent "touch this" "del that"`

[npm-badge]: https://img.shields.io/npm/v/@stencil/utils.svg?style=flat-square
[npm-badge-url]: https://www.npmjs.com/package/@stencil/utils