open-index/open-npm huggingface dataset:
npm package: @joeinnes/svelte-image
Description: Svelte Component for using image CDNs to dynamically serve responsive images.
Author: Joe Innes
Latest version: 0.0.4

# Svelte Image

A Svelte component which uses CDNs to serve responsive images.

## Usage

### Install
`npm i @joeinnes/svelte-image`

### Import
Note that except for the 'alt' tag, all tags are optional and their default values are shown in the example below.
```
<script>
  import { Image } from '@joeinnes/svelte-image';
</script>

<Image src="https://kit.svelte.dev/images/svelte-kit-machine.webp" alt="Some alt text which is required" aspectRatio="16/9" objectFit="cover" quality="80"  loading="lazy" hidpi={true} />
```

By default, the [Statically](https://statically.io) will be used. You can configure alternative providers by specifying a 'name' and a 'key'.

```
import { Image, provider } from '$lib/index';
provider.set({
  name: 'cloudimage',
  key: 'cloudimage_token'
});
```

Currently supported:
* Statically (zero configuration)
* Cloudimage (use your token as the 'key')

```
provider.set({
  name: 'cloudimage',
  key: 'cloudimage_token'
})
```
* Cloudinary (you need to create an HTTP Proxy media source, and then use your cloud name as the key)

```
provider.set({
  name: 'cloudinary',
  key: 'cloud_name'
})
```

## Notes and Caveats

* hidpi mode will load the image double size for retina displays.

* You should provide a full URL to the image, not a relative path.

* In case you're using Statically (ie: the default) and there's no supported extension (gif, jpg, jpeg, png, or webp) listed in the image path, then the component will render the original, unoptimised version (https://twitter.com/staticallyio/status/1405700757475663873). You may be able to work around this by adding an ignored query (eg: `&image.jpg`) to the end of the URL or somewhere in the path, but results may vary. For example, https://pbs.twimg.com/media/FEBzSvdWYAoVJGc?format=jpg&name=medium does not contain '.jpg', and appending `&image.jpg` does not work. However, you can add the .jpg after the ID: `https://pbs.twimg.com/media/FEBzSvdWYAoVJGc.jpg?format=jpg&name=medium`. This will vary depending on the origin.

## Aspect Ratio
Don't know exactly what aspect ratio your container will have when it loads on a user's screen? Use `bind:clientWidth` and `bind:clientHeight` to calculate the aspect ratio:

```
<script>
  import { Image } from '@joeinnes/svelte-image';
  let clientWidth = 0;
  let clientHeight = 0;
</script>

<div bind:clientWidth bind:clientHeight>
  <Image src="https://kit.svelte.dev/images/svelte-kit-machine.webp" alt="Some alt text which is required" aspectRatio={clientWidth + "/" + clientHeight} objectFit="cover" quality="80"  loading="lazy" hidpi={true} />
</div>
npm package: @joekav/go-fast
Description: A fast JavaScript parser written in Go, compiled to WebAssembly
Latest version: 0.0.5

# @aspect/go-fast

A fast JavaScript parser written in Go, compiled to WebAssembly. Outputs ESTree-compatible AST.

## Installation

```bash
npm install @aspect/go-fast
```

## Usage

### Node.js

```javascript
import { parseAsync } from "@aspect/go-fast";

const ast = await parseAsync("const x = 1 + 2;");
console.log(ast);
```

### Browser

```javascript
import { init, parse } from "@aspect/go-fast";

// Initialize WASM (fetches from CDN)
await init();

// Parse code
const ast = parse("const x = 1 + 2;");
console.log(ast);
```

### With Scope Resolution

```javascript
import { parseAsync } from "@aspect/go-fast";

const ast = await parseAsync("function foo(x) { return x; }", {
  resolve: true,
});

// Identifiers will have scopeContext field
```

## API

### `init(wasmUrl?: string): Promise<void>`

Initialize the WASM module. In browser environments, optionally provide a custom WASM URL.

### `parse(source: string, options?: ParseOptions): ParseResult`

Synchronously parse source code. Must call `init()` first.

### `parseAsync(source: string, options?: ParseOptions): Promise<ParseResult>`

Initialize (if needed) and parse in one call.

### Options

- `resolve?: boolean` - Enable scope resolution (adds `scopeContext` to identifiers)

## Output Format

Returns ESTree-compatible AST with:
- `type` - Node type (e.g., "Program", "Identifier", "BinaryExpression")
- `start` / `end` - Character offsets
- `scopeContext` - Scope identifier (when `resolve: true`)

## License

MIT
npm package: @joel-luis/eslint-config
Description: ESLint configuration used by Joel.
Latest version: 0.1.11

# ESLint config

## Whats included?

- Standard config base;
- React plugin;
- React Hooks plugin;
- JSX a11y plugin;
- Prettier;

## Setup

### React (with Next.js)

Install dependencies:

```
npm i -D eslint @joel-luis/eslint-config
```

Inside `.eslintrc.json`

```
{
  "extends": [
    "@joel-luis/eslint-config/next",
    "next/core-web-vitals"
  ]
}
```

### React (without Next.js)

Install dependencies:

```
npm i -D eslint @joel-luis/eslint-config
```

Inside `.eslintrc.json`

```
{
  "extends": "@joel-luis/eslint-config/react"
}
```

### Node.js

Install dependencies:

```
npm i -D eslint @joel-luis/eslint-config
```

Inside `.eslintrc.json`

```
{
  "extends": "@joel-luis/eslint-config/node"
}
```