Sveltekit Components

Sajakhtar

Sveltekit Components

Courtesy of LevelUpTutorial by Scott Tolinski

Everything you need to build a Svelte project, powered by create-svelte;

JS Plugins

npm install -g marked

Storybook.js

Storybook is a plugin that allows you to test out things, build components and see them in action without them having to be inside your application.

npx sb init

Change ./.storybook/main.js to ./.storybook/main.cjs. Change ./.storybook/preview.js to ./.storybook/preview.cjs.

.cjs stands for common JS to allow require module syntax.

Remove the Svelte options from ./.storybook/main.cjs.

// Remove this
"svelteOptions": {
  "preprocess": require("../svelte.config.js").preprocess
}

To run Storybook

  npm run storybook

This will open the following URL in the browser: http://localhost:6006/?path=/story/example-introduction--page

With the @storybook/addon-svelte-csf addon in ./.storybook/main.cjs, we can write stories in svelte language in the ./storiesdirectory or files with stories extension. Storybook looks for files with the story extentions e.g..stories.js`.

Creating a NPM package with Svelte

Everything in the ./lib folder is made available as a package. Everything in the ./routes folder is seen as the documentation for the package.

Add "package": "svelte-kit package", to scripts in package.json

npm run package

This will create a ./package directory with all the components, including a package.json that will have all the components as exports. Then you'd have to npm publish package to publish it.

Prequisites:

npm i svelte2tsx
npm i typescript

Creating a project

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

# create a new project in the current directory
npm init svelte@next

# create a new project in my-app
npm init svelte@next my-app

Note: the @next is temporary

Developing

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

npm run dev

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

Building

Before creating a production version of your app, install an adapter for your target environment. Then:

npm run build

You can preview the built app with npm run preview, regardless of whether you installed an adapter. This should not be used to serve your app in production.

Top categories