# Creating a Svelte Library with JavaScript Functions

This guide will walk you through the process of creating a Svelte library that includes both Svelte components and JavaScript functions. We'll also cover how to make your library available for use without Svelte.

### Setting Up Your Svelte Library

#### Step 1: Initialize Your Project

First, let's create a new Svelte library project using the `create-svelte` tool.

{% tabs %}
{% tab title="Terminal" %}

```bash
npm create svelte@latest my-svelte-library
cd my-svelte-library
npm install
```

{% endtab %}
{% endtabs %}

When prompted, choose the following options:

* Select "Library project"
* Choose whether you want to use TypeScript or not
* You can skip additional options like ESLint, Prettier, etc., for now

#### Step 2: Create a Svelte Component

Let's create a simple Svelte component in your library.

{% tabs %}
{% tab title="src/lib/MyComponent.svelte" %}

```html
<script>
  export let name = 'World';
</script>

<h1>Hello {name}!</h1>

<style>
  h1 {
    color: #ff3e00;
  }
</style>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
In Svelte, the `export` keyword before a variable makes it a prop that can be set from outside the component. Here, `name` is a prop with a default value of 'World'.
{% endhint %}

#### Step 3: Add JavaScript Functions

Now, let's add a JavaScript file with utility functions.

{% tabs %}
{% tab title="src/lib/utils.js" %}

```javascript
export function makeUrlFriendly(input) {
  return input.replace(/[^a-zA-Z0-9]+/g, '-').toLowerCase();
}

export function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
The `export` keyword before each function makes them available for import in other files. You can add as many functions as you need in this file.
{% endhint %}

#### Step 4: Update the Library Entry Point

Now, let's update the main entry point of your library to export both the component and the functions.

{% tabs %}
{% tab title="src/lib/index.js" %}

```javascript
export { default as MyComponent } from './MyComponent.svelte';
export * from './utils.js';
```

{% endtab %}
{% endtabs %}

This makes your `MyComponent` and all exported functions from `utils.js` available to users of your library.

#### Step 5: Configure Your Package

Update your `package.json` file to include the necessary configuration for your library.

{% tabs %}
{% tab title="package.json" %}

```json
{
  "name": "my-svelte-library",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build && npm run package",
    "preview": "vite preview",
    "package": "svelte-kit sync && svelte-package && publint",
    "prepublishOnly": "npm run package"
  },
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "svelte": "./dist/index.js",
      "default": "./dist/index.js"
    }
  },
  "files": ["dist"],
  "peerDependencies": {
    "svelte": "^4.0.0"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/kit": "^1.20.4",
    "@sveltejs/package": "^2.0.0",
    "publint": "^0.1.9",
    "svelte": "^4.0.5",
    "vite": "^4.4.2"
  },
  "svelte": "./dist/index.js",
  "type": "module"
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
The `"default": "./dist/index.js"` in the `exports` field makes your library available for use without Svelte. This allows users to import your JavaScript functions even if they're not using Svelte in their project.
{% endhint %}

#### Step 6: Build Your Library

Now you can build your library:

{% tabs %}
{% tab title="Terminal" %}

```bash
npm run package
```

{% endtab %}
{% endtabs %}

This will create a `dist` folder with your bundled library.

### Using Your Svelte Library

#### In a Svelte Project

Once your library is published (or if you're using it locally), you can use it in a Svelte project like this:

{% tabs %}
{% tab title="App.svelte" %}

```html
<script>
  import { MyComponent, makeUrlFriendly } from 'my-svelte-library';
  
  let input = '';
  let friendlyUrl = '';
  
  function handleInput() {
    friendlyUrl = makeUrlFriendly(input);
  }
</script>

<MyComponent name="Svelte Library" />

<input bind:value={input} on:input={handleInput} placeholder="Enter text">
<p>URL-friendly version: {friendlyUrl}</p>
```

{% endtab %}
{% endtabs %}

This will render:

{% tabs %}
{% tab title="localhost:3000" %}

## Hello Svelte Library!

URL-friendly version:
{% endtab %}
{% endtabs %}

#### In a Non-Svelte Project

You can also use the JavaScript functions in a non-Svelte project:

{% tabs %}
{% tab title="example.mjs" %}

```javascript
import { makeUrlFriendly, capitalizeFirstLetter } from 'my-svelte-library';

const originalText = "hello, world! this is a test.";
const friendlyUrl = makeUrlFriendly(originalText);
const capitalizedText = capitalizeFirstLetter(originalText);

console.log(friendlyUrl); // Outputs: "hello-world-this-is-a-test"
console.log(capitalizedText); // Outputs: "Hello, world! this is a test."
```

{% endtab %}
{% endtabs %}

### Publishing Your Library

To publish your library to npm, use the following command:

{% tabs %}
{% tab title="Terminal" %}

```bash
npm publish
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Make sure you're logged in to npm and have a unique package name before publishing.
{% endhint %}

By following this guide, you've created a versatile Svelte library that includes both Svelte components and JavaScript functions. This library can be used in Svelte projects and non-Svelte projects alike, making it a flexible tool for a wide range of applications.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/getting-started-with-sveltekit/creating-a-svelte-library-with-javascript-functions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.