open-index/open-npm huggingface dataset:
npm package: @mschnee/ssm-env
Description: Get your environment variables from SSM
Author: mschnee
Latest version: 1.0.2

ssm-env
=======

A very simple `cross-env`-like utility for running a program with and environment enriched from AWS SSM ParameterStore values.

With `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY` already in your environment, or in a `.env` file:

The arguments assume that you are using SSM Parameter Store with paths, e.g.

```
/global/static_file_host=https://static.yourdomain.com
/global/some_cool_key=42
/qa/app1/static_file_host=https://app1.static.yourdomain.com
```

`ssm-env` will never overwrite an environment variable once it's set.


## Examples
```sh
ssm-env exec "/qa/app1/" "/global/" -- node path/to/app.js
```

Manually specifying
```sh
ssm-env exec --awsAccessKeyId=yourkey --awsSecretAccessKey=yoursecret "/qa/app1/" "/global/" -- node path/to/app.js
```

To simply print out the environment:
```sh
ssm-env EXPORT "/qa/app1/" "/global/" -- node path/to/app.js
STATIC_FILE_HOST=https://app1.static.yourdomain.com
SOMNE_COOL_KEY=42
```

To save it to a file:
```sh
ssm-env EXPORT "/qa/app1/" "/global/" -- node path/to/app.js > .env
```
npm package: @mschoening/forge-publisher-gcs
Description: A Forge publisher for Google Cloud Storage
Author: Max Schoening
Latest version: 0.1.0

# @mschoening/forge-publisher-gcs

A fork of [forge-publisher-gcs](https://github.com/electron/forge/tree/main/packages/publisher/gcs) that allows setting metadata on the uploaded files.

This is useful to set cache-control headers.

To install dependencies:

```bash
bun install
```

To build:

```bash
bun run build
```

To publish:

```bash
npm publish
```
npm package: @mschoening/next-sass
Description: Import `.scss` and `.sass` files in your Next.js project
Latest version: 0.1.0

# Next.js + Sass

Import `.scss` and `.sass` files in your Next.js project

## Installation

```
npm install --save @zeit/next-sass node-sass
```

or

```
yarn add @zeit/next-sass node-sass
```

## Usage

### Without CSS modules

Create a `next.config.js` in your project

```js
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass()
```

Create a Sass file `styles.scss`

```css
$font-size: 50px;
.example {
  font-size: $font-size;
}
```

Create a page file `pages/index.js`

```js
import "../styles.scss"

export default () => <div className="example">Hello World!</div>
```

### With CSS modules

```js
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
  cssModules: true
})
```

Create a Sass file `styles.scss`

```css
$font-size: 50px;
.example {
  font-size: $font-size;
}
```

Create a page file `pages/index.js`

```js
import css from "../styles.scss"

export default () => <div className={css.example}>Hello World!</div>
```

### Production usage

In production the stylesheet is compiled to `.next/static/style.css`. You have to include it into the page using either [`next/head`](https://github.com/zeit/next.js#populating-head) or a custom [`_document.js`](https://github.com/zeit/next.js#custom-document). The file will be served from `/_next/static/style.css`

```js
// pages/index.js
import Head from 'next/head'

export default () => {
  return <div>
    <Head>
      <link rel="stylesheet" href="/_next/static/style.css">
    </Head>
  </div>
}
```

```js
// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css">
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}
```

### PostCSS plugins

Create a `next.config.js` in your project

```js
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass()
```

Create a `postcss.config.js`

```js
module.exports = {
  plugins: {
    // Illustrational
    'postcss-css-variables': {}
  }
}
```

Create a CSS file `styles.scss` the CSS here is using the css-variables postcss plugin.

```css
:root {
  --some-color: red;
}

.example {
  /* red */
  color: var(--some-color);
}
```

When `postcss.config.js` is not found `postcss-loader` will not be added and will not cause overhead.

### Configuring Next.js

Optionally you can add your custom Next.js configuration as parameter

```js
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
  webpack(config, options) {
    return config
  }
})
```
npm package: @mschoening/whoami
Description: Max Schoening
Author: Max Schoening
Latest version: 1.0.0

# whoami

```bash
$ npm install @mschoening/whoami
```

and

```js
console.log(require('@mschoening/whoami'));
```

to get my contact information.

## Credits

Thanks to [Guillermo Rauch](https://github.com/rauchg/rauchg) and [John K Paul](https://github.com/johnkpaul/johnkpaul) for the idea.
npm package: @mschop/alpine-web-components
Description: Use alpinejs with web components and shadow root
Author: mschop
Latest version: 2.0.1

# alpine-web-components

This library helps you with using AlpineJS with web components. This includes web components using shadow root.

## Install

1. Make sure you have AlpineJS installed and ready.
2. Install this library by running  `npm i @mschop/alpine-web-components`
3. Use classes AlpineWebComponent or AlpineComponent as base classes.

## How to use it

The following example shows you a basic "Counter" example.

```ts
import AlpineWebComponent from "alpine-shadow-component";
import type {State} from "../../AlpineWebComponent";

interface CounterState extends State {
    counter: number,
}

class Counter extends AlpineWebComponent {
    
    state: CounterState = {
        attributes: {},
        counter: 1,
    }
    
    template = `
        <span x-text=""></span>
        <button @click="counter++">+1</button>
        <button @click="component.resetCounter()">Reset</button>
    `
    
    resetCounter() {
        this.state.counter = 1
    }
    
    useShadow(): boolean {
        return false;
    }
}

window.customElements.define('my-counter', Counter);
```

You should now be able to reference the counter with `<my-counter></my-counter>`.

Note: Components are not automatically initialized. You need to call `.init()` on them. The common approach is to use `x-init` in the template:
```html
<my-counter x-init="$el.init()"></my-counter>
```

The component instance is attached as `state.component` but marked raw, so Alpine won't proxy the full custom element. You can call component methods from the Alpine scope:

```html
<button @click="component.resetCounter()">Reset</button>
```

Please see directory `example` for example on how to bind / update attributes etc..

## Attribute-based state (string-only, isolated)

The default behavior mirrors component state to HTML attributes (and reads attributes back into state). This keeps the component interface purely declarative and works well for primitives (string/number/boolean).

Key points:
- Attributes are always strings, so complex data must be serialized (e.g. JSON) via `attributeCasts`.
- When state changes, the attribute is updated and an `updated-<key>` event is emitted.
- When an attribute changes externally, the component state is updated.

This approach is useful when you want a clean HTML-only API and strict isolation between components. For complex data, consider property binding with `x-init` (see section above).

## Passing complex data (avoid JSON in attributes)

Attributes are strings, so passing objects requires JSON encoding/decoding. If you want to share complex data (objects, arrays, reactive proxies) between components, bind a **property** instead of an attribute.

Alpine's `x-init` run once on init. So you can simply passing complex objects by passing the value in x-init.

```html
<my-child x-init="
    $el.state.shared = parentState;
    $el.init();
"></my-child>
```

This keeps the template declarative while passing the actual object reference. Use attributes for primitives and properties for complex data.
npm package: @mschreiber68/img-fallback
Description: A decorator web component that allows an enclosed <img> to specify a fallback src.
Author: Mike Schreiber
Latest version: 0.0.7

## Usage
```javascript
import ImgFallback from '@mschreiber68/img-fallback';
```
```html
<img-fallback src="https://example.com/fallback-image.png">
    <img src="https://example.com/intended-image.png">
</img-fallback>
```

## Installation
### Install via NPM:
```shell
npm i @mschreiber68/img-fallback
```

### Download via CDN:
```html
<script type="module" src="https://unpkg.com/@mschreiber68/img-fallback@latest/dist/index.js"></script>
```

With either installation method, you must register the component as a custom element.
This allows you to customize the name of the element.

## Features
* Supports mutations (add/modify/remove) of wrapped `<img>` element
* Uses `display: contents;` so the `<img>` can be treated by layout styles as if the `<img-fallback>` isn't there.
* As a web component that doesn't modify its internal DOM, `<img-fallback>` is compatible with any frontend framework.

In order to simplify the implementation, fallback behavior is only applied to a single `<img>` in the inner DOM, and this `<img>` must be the first child of `<img-fallback>`. 

## Demo
https://mschreiber68.github.io/img-fallback/demo.html
npm package: @mschreiber68/modal-dialog
Description: A decorator web component that adds quality of life improvements to the Dialog element modal functionality.
Author: Mike Schreiber
Latest version: 0.0.3

## Overview
`<modal-dialog>` is a wrapper custom element that adds QoL features to `<dialog>` elements inside of it. 
Currently, the only feature is to close the `<dialog>` if its backdrop is clicked, but I may think of more features to add.

### Design
This custom element uses the light DOM and includes no styling. 
This allows the user to style and interact with the enclosed `<dialog>` element as normal while allowing the custom element to modify its behavior.

## Usage
Import in your Javascript bundle:
```javascript
// Custom element will automatically register itself.
import '@mschreiber68/modal-dialog'

// Can also import custom element class.
import { ModalDialog } from '@mschreiber68/modal-dialog'
```

```html
<modal-dialog>
    <dialog>
        <p>Modal Content</p>
    </dialog>
</modal-dialog>
```

## Installation
### Install via NPM:
```shell
npm i @mschreiber68/modal-dialog
```

### Download via CDN:
```html
<script src="https://unpkg.com/@mschreiber68/modal-dialog@latest/dist/cdn/index.js"></script>
```

## Demo
https://mschreiber68.github.io/modal-dialog/demo.html
npm package: @mschwitters/test-2
Description: A Vue.js Plugin
Author: Malte Schwitters
Latest version: 0.0.0

# test-2

[![npm](https://img.shields.io/npm/v/test-2.svg) ![npm](https://img.shields.io/npm/dm/test-2.svg)](https://www.npmjs.com/package/test-2)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

A Vue.js Plugin

## Table of contents

- [Installation](#installation)
- [Usage](#usage)
- [Example](#example)

# Installation

```
npm install --save test-2
```

## Default import

Install all the components:

```javascript
import Vue from 'vue'
import Test2 from 'test-2'

Vue.use(Test2)
```

Use specific components:

```javascript
import Vue from 'vue'
import { Test } from 'test-2'

Vue.component('test', Test)
```

**⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**

## Distribution import

Install all the components:

```javascript
import 'test-2/dist/test-2.css'
import Test2 from 'test-2/dist/test-2.common'

Vue.use(Test2)
```

Use specific components:

```javascript
import 'test-2/dist/test-2.css'
import { Test } from 'test-2/dist/test-2.common'

Vue.component('test', Test)
```

**⚠️ You may have to setup your bundler to embed the css file in your page.**

## Browser

```html
<link rel="stylesheet" href="test-2/dist/test-2.css"/>

<script src="vue.js"></script>
<script src="test-2/dist/test-2.browser.js"></script>
```

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the components:

```javascript
Vue.use(Test2)
```

Use specific components:

```javascript
Vue.component('test', Test2.Test)
```

## Source import

Install all the components:

```javascript
import Vue from 'vue'
import Test2 from 'test-2/src'

Vue.use(Test2)
```

Use specific components:

```javascript
import Vue from 'vue'
import { Test } from 'test-2/src'

Vue.component('test', Test)
```

**⚠️ You need to configure your bundler to compile `.vue` files.** More info [in the official documentation](https://vuejs.org/v2/guide/single-file-components.html).

# Usage

> TODO

# Example

> TODO

---

# Plugin Development

## Installation

The first time you create or clone your plugin, you need to install the default dependencies:

```
npm install
```

## Watch and compile

This will run webpack in watching mode and output the compiled files in the `dist` folder.

```
npm run dev
```

## Use it in another project

While developping, you can follow the install instructions of your plugin and link it into the project that uses it.

In the plugin folder:

```
npm link
```

In the other project folder:

```
npm link test-2
```

This will install it in the dependencies as a symlink, so that it gets any modifications made to the plugin.

## Publish to npm

You may have to login to npm before, with `npm adduser`. The plugin will be built in production mode before getting published on npm.

```
npm publish
```

## Manual build

This will build the plugin into the `dist` folder in production mode.

```
npm run build
```

---

## License

[MIT](http://opensource.org/licenses/MIT)