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.
npm create svelte@latest my-svelte-library
cd my-svelte-library
npm install
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.
<script>
export let name = 'World';
</script>
<h1>Hello {name}!</h1>
<style>
h1 {
color: #ff3e00;
}
</style>
Step 3: Add JavaScript Functions
Now, let's add a JavaScript file with utility functions.
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);
}
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.
export { default as MyComponent } from './MyComponent.svelte';
export * from './utils.js';
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.
{
"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"
}
Step 6: Build Your Library
Now you can build your library:
npm run package
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:
<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>
This will render:
In a Non-Svelte Project
You can also use the JavaScript functions in a non-Svelte project:
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."
Publishing Your Library
To publish your library to npm, use the following command:
npm publish
Make sure you're logged in to npm and have a unique package name before publishing.
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.
Last updated