> For the complete documentation index, see [llms.txt](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/getting-started-with-sveltekit/creating-a-svelte-library-with-javascript-functions.md).

# 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.