Repository files navigation

This is a community project to easily add integrations and other functionality to Svelte apps. Its goal is to solve the problems with downloading templates to start your app from:

• You have to wantall the functionality a template includes—no more, no less.

  Svelte Add has app initializers that let you select the exact integrations wanted:npm create @svelte-add/kit@latest

• You have to fall back on following a third party tutorial that could be outdated or take a lot of work to add things missing from that template.

  Svelte Add's "tutorials" are one step:npx --yes svelte-add@latest graphql-server

• You have to rely on the maintainer keeping the template updated as the tools it uses change and the official Svelte app template it was built on changes.

  Svelte Add's app initializers are always built on top of the latest version of the official Svelte app templates. Of course it still needs to be maintained as tools change (like Tailwind JIT, SvelteKit's conversion to just a Vite plugin, or the future rewrite of mdsvex), but because it is in a central location and contributed to by many people, problems are found quickly, and fixes are for everyone—not just one specific template.

In theory, these adders are the most likely to work correctly:

• 3D
• Bootstrap
• Bulma
• CoffeeScript
• Imagetools (work in progress)
• mdsvex
• PostCSS
• Routify (work in progress)
• SCSS/SASS
• Tailwind CSS
• Tauri (work in progress)

• Storybook

svelte-add is currently being rewritten, so many integrations are still external (added in a primitive and buggy way, unfortunately), until that is complete:

• Firebase Hosting (out of date)
• GraphQL server (out of date)
• Jest
• Pug
• Supabase

The preferred way to add integrations to a SvelteKit app is to start a new one, choosing the ones you want:

npm create @svelte-add/kit@latest# Follow the prompts to select the integrations you want

If you have a favorite setup, you can recreate it without having to provide any interactive input:

npm create @svelte-add/kit@latest my-new-svelte-kit-app -- --with postcss+mdsvex

Here's a more complete example: to migrate fromsapper-firebase-typescript-graphql-tailwindcss-actions-template to SvelteKit, this command can be run to recreate all the functionality:

npm create @svelte-add/kit@latest my-new-app -- --with firebase-hosting+typescript+graphql-server+tailwindcss+eslint+prettier --firebase-hosting-project my-project-123# NOTE: The Firebase Hosting adder doesn't support this yet.

• the output directory
• demos (defaultfalse): whether or not to include demonstration code to teach about SvelteKit and the integrations selected
• install (defaulttrue): whether or not to automatically install dependencies after adding integrations
• package-manager (defaultpnpm if installed, thenyarn if installed, thennpm): which package manager to use when initializing a Svelte app or installing dependencies
• with (defaultjavascript+css): the features (adders and built-in options likeeslint,prettier, andtypescript) to initialize the Svelte app with

The specific adders you're using might have their own options, so see theirREADME for that information. For example,the PostCSS adder takes anautoprefixer option.

The preferred way to add integrations to a Vite-powered Svelte app is to start a new one, choosing the ones you want:

npm create @svelte-add/vite@latest# Follow the prompts to select the integrations you want

If you have a favorite setup, you can recreate it without having to provide any interactive input:

npm create @svelte-add/vite@latest my-new-svelte-vite-app -- --with bulma+mdsvex

• the output directory
• demos (defaultfalse): whether or not to include demonstration code to teach about Vite and the integrations selected
• install (defaulttrue): whether or not to automatically install dependencies after adding integrations
• package-manager (defaultpnpm if installed, thenyarn if installed, thennpm): which package manager to use when initializing the Vite-powered Svelte app or installing dependencies
• with (defaultjavascript+css): the features (adders and built-in options likeeslint,prettier, andtypescript) to initialize the Svelte app with

The specific adders you're using might have their own options, so see theirREADME for that information. For example,the Tailwind CSS adder takes aforms option, atypography option, and adaisyui option.

Ideally, you cansvelte-add an integration any time after app initialization:

# Suppose you initialized a SvelteKit projectnpm create svelte# Did some work on the site# Then realized you want to write your styles in SCSSnpx --yes svelte-add@latest scss# None of your work should've been messed up and SCSS should work (in a perfect world)

but there are practically infinite scenarios that an automated tool like this cannot expect, so it doesn't always work. For that reason, we recommend choosing integrations with the appropriate app initializer (SvelteKit or Vite) for an instant result andcreating an issue for an eventual fix.

Adders should all becomposable, meaning that it should always be possible to run one after another without something breaking:

npx --yes svelte-add@latest coffeescriptnpx --yes svelte-add@latest mdsvex# CoffeeScript should still work

• the adder(s) to add (e.x.tailwindcss orpostcss+mdsvex+graphql-server)
• demos (defaultfalse): whether or not to include demonstration code to teach about the integrations added
• install (defaultfalse): whether or not to automatically install dependencies after adding integrations
• package-manager (defaultpnpm if installed, thenyarn if installed, thennpm): which package manager to use when installing dependencies

The specific adders you're using might have their own options, so see theirREADME for that information. For example,the PostCSS adder takes anautoprefixer option.

Like when making any significant changes to a repository, ensure you have a backup of your project beforesvelte-adding an integration.

# Create a git commit with the current project stategit add.git commit -m"before adding bootstrap"# Push it to the remote servergit push# Create another backup if you deem it necessary# Add an integrationnpx --yes svelte-add@latest bootstrap

If you are curious what changessvelte-add made to your code, you can usegit to examine what changed since the last commit:

git add --intent-to-add.git diff

And revert it if needed:

git reset --hard HEADgit clean -fd

No adders currently support Elder.js, but we would like to! If you can help, seethe open issue for it.

No adders currently support Routify. If you can helpsvelte-add support Routify, seethe open issue for it.

Sapper is no longer maintained. Use SvelteKit (see the "Creating a SvelteKit app with integrations" section).

Snowpack is no longer actively maintained, so we recommend using Vite if possible (see the "Creating a Vite-powered Svelte app with integrations" section).

There is no planned support for webpack- or Rollup-powered Svelte apps because Vite supersedes them. See the "Creating a Vite-powered Svelte app with integrations" section for the recommended approach.

SvelteKit now offers the option to setup Vitest when runningnpm create svelte@latest.

This is a community project! Here are some ways you can help:

• Battle test (combinations of) adders to make sure they're always composable and find other edge cases, bugs, etc.
• Fix known issues and missing features in an adder per the open issues in this repository (if it's built-in) or its repository (if it's external).
• Read this repository's open issues to talk aboutideas for new adders.
• Create apull request to add your adder to the external integration adders list. Most adders will be rewritten built-in tosvelte-add given enough time!

1. Clone the monorepo with submodules:git clone --recurse-submodules https://github.com/svelte-add/svelte-add

2. Install dependencies:pnpm install (make sure that you haveinstalledpnpm before)

3. Make changes to the project and verify them with:

   • pnpm -w lint (usually fixable withpnpm -w format)
   • pnpm -w check
   • pnpm -r test. Be careful, these test might need up to 10 minutes to complete. Consider usingpnpm -r test-one-adder. Modifyprojects/test/tests/one-adder/one-adder-fresh-project.js with the right adder and configuration to test.

4. Generate theREADMEs for the new and changed adders withpnpm -w generate-readmes

5. Update the used package versions from/projects/svelte-add/package-versions.js withpnpm -w update-packages

MIT

Svelte Add takes inspiration from existing projects:

• Preset
• snowpack-start
• stackmix

This README was generated with ❤️ byreadme-md-generator