open-index/open-npm huggingface dataset:
npm package: @svebcomponents/auto-options
Description: `@svebcomponents/auto-options` is a rollup plugin that automatically generates type converter & attribute settings for your props when building web components using svelte. It does this, by leveraging your component's (typescript) AST to infer the names (
Latest version: 0.0.4

# `@svebcomponents/auto-options`

`@svebcomponents/auto-options` is a rollup plugin that automatically generates type converter & attribute settings for your props when building web components using svelte.
It does this, by leveraging your component's (typescript) AST to infer the names (& types) of your props and then injects the correct configuration into `<svelte:options/>`.

## Example

```svelte
<script lang="ts">
  let { myNumber }: { myNumber: number } = $props();
</script>

<h1>Awesome number: {myNumber}</h1>
```

will be automatically transformed to:

```svelte
<svelte:options customElement={{
  props: {
    myNumber: {
      type: "number",
      reflect: true,
      default: 0,
    },
  }
}} />
<script lang="ts">
  let { myNumber }: { myNumber: number } = $props();
</script>

<h1>Awesome number: {myNumber}</h1>
```

So now you can just use your component like this:

```html
<favorite-number my-number="42"></favorite-number>
```

## Usage

### Via `@svebcomponents/build`

If you are using `@svebcomponents/build` you don't need to do anything, since the rollup config generated by it already includes the plugin.

### Manual Usage

If you are not using `@svebcomponents/build` you can still use the plugin in your own rollup config.
You need to manually install it:

```bash
npm install -D @svebcomponents/auto-options
```

Then add the plugin to your rollup config:

```js
import autoOptions from "@svebcomponents/auto-options";

export default {
  plugins: [
    autoOptions(),
    // make sure to call the svelte plugin **after** the @svebcomponents/auto-options plugin
    svelte({
      compilerOptions: {
        customElement: true,
      },
    }),
  ],
};
```
npm package: @svebcomponents/build
Description: `@svebcomponents/build` is a package that can be used to provide a rollup configuration for building web components with Svelte.
Latest version: 0.0.7

# `@svebcomponents/build`

`@svebcomponents/build` is a package that can be used to provide a rollup configuration for building web components with Svelte.

## Installation

```bash
npm install -D @svebcomponents/build
```

Since `@svebcomponents/build` only generates a config for rollup, you'll still need to have rollup installed.

## Usage

in your `rollup.config.js`, call `defineConfig` to generate rollup configs (by default it outputs an array of two configs, one for the regular web component & one for the server-side renderable version of the web component):

```js
import { defineConfig } from "@svebcomponents/build";

// config object with default values
const config = defineConfig({
  /**
   * The entrypoint for the svelte component that is being transformed.
   */
  entry: "src/index.ts",
  /**
   * Whether to generate an SSR entry file for the web component.
   */
  ssr: true,
});
export default config;
```

then you can build your project with `rollup -c` and it will generate a `dist` folder with the following files:

- `client/index.js` - the entrypoint for the web component
- `server/index.js` - the server-side-renderable web component (you don't need to use this file directly)
- `server/ssr.js` - the entrypoint for the ElementRenderer for SSR

ensure that you have the following in your `package.json`, so that both the client side web component & the `ElementRenderer` can be imported by your users:

```json
{
  "exports": {
    ".": {
      "import": "./dist/client/index.js"
    },
    "./ssr": {
      "import": "./dist/server/ssr.js"
    }
  }
}
```
npm package: @svebcomponents/ssr
Description: `@svebcomponents/ssr` is a collection of tools for server-side rendering web components with Svelte.
Latest version: 0.0.7

# `@svebcomponents/ssr`

`@svebcomponents/ssr` is a collection of tools for server-side rendering web components with Svelte.

- Rollup Plugins
  - `pluginGenerateSsrEntry`
    - allows you to build server-side-renderable web components with Rollup
- Vite Plugins
  - `vitePluginSvebcomponentsSsr`
    - finds web components inside your svelte templates and replaces them with the `CustomElementWrapper.svelte` component
    - `CustomElementWrapper.svelte` is a noop on the client, but on the server it will render the web component using the `ElementRenderer` provided by the web component
- Runtime Utils
  - responsible for allowing you to render arbitrary web components in SvelteKit (or other vite based SSR frameworks) as long as they provide a `ElementRenderer`
  - `installShim`
    - installs `@lit-labs/ssr-dom-shim` shims, in order to...
      - ensure your server doesn't explode when importing web components
      - have a minimal working implementation of `customElements` on the server so web components ctors can be registered with tag names
  - `ElementRendererRegistry`
    - a registry for registering `ElementRenderers` that should be used for rendering custom elements
  - `SvelteCustomElementRenderer`
    - base class for `ElementRenderers` for server-side rendering web components build with `pluginGenerateSsrEntry` (via `@svebcomponents/build`)
npm package: @svecodocs/docs
Description: Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
Latest version: 0.0.0

# sv

Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
npm package: @svecodocs/kit
Description: Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
Latest version: 0.5.1

# create-svelte

Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```bash
npm run package
```

To create a production version of your showcase app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```bash
npm publish
```