• Stars
    star
    551
  • Rank 77,616 (Top 2 %)
  • Language
    JavaScript
  • Created about 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A base for building shareable Svelte components

Psst โ€”ย looking for a more complete solution? Check out SvelteKit and its package command which gives you more built-in features like TypeScript transpilation, type definition generation and a built-in playground to test your library.

Looking for an app template instead? Go here --> sveltejs/template


component-template

A base for building shareable Svelte components. Clone it with degit:

npx degit sveltejs/component-template my-new-component
cd my-new-component
npm install # or yarn

Your component's source code lives in src/Component.svelte.

You can create a package that exports multiple components by adding them to the src directory and editing src/index.js to reexport them as named exports.

TODO

  • some firm opinions about the best way to test components
  • update degit so that it automates some of the setup work

Setting up

  • Run npm init (or yarn init)
  • Replace this README with your own

Consuming components

Your package.json has a "svelte" field pointing to src/index.js, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields in your webpack config includes "svelte"). This is recommended.

For everyone else, npm run build will bundle your component's source code into a plain JavaScript module (dist/index.mjs) and a UMD script (dist/index.js). This will happen automatically when you publish your component to npm, courtesy of the prepublishOnly hook in package.json.

More Repositories

1

svelte

Cybernetically enhanced web apps
JavaScript
75,642
star
2

kit

web development, streamlined
JavaScript
17,332
star
3

sapper

The next small thing in web development, powered by Svelte
TypeScript
7,031
star
4

realworld

SvelteKit implementation of the RealWorld app
Svelte
2,129
star
5

template

Template for building basic applications with Svelte
JavaScript
1,732
star
6

svelte-preprocess

A โœจ magical โœจ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
TypeScript
1,687
star
7

svelte-devtools

A browser extension to inspect Svelte application by extending your browser devtools capabilities
Svelte
1,312
star
8

language-tools

The Svelte Language Server, and official extensions which use it
TypeScript
1,128
star
9

vite-plugin-svelte

Svelte plugin for http://vitejs.dev/
JavaScript
787
star
10

sapper-template

Starter template for Sapper apps
JavaScript
706
star
11

prettier-plugin-svelte

Format your svelte components using prettier.
TypeScript
684
star
12

svelte-virtual-list

A virtual list component for Svelte apps
JavaScript
656
star
13

integrations

Ways to incorporate Svelte into your stack
633
star
14

gl

A (very experimental) project to bring WebGL to Svelte
JavaScript
608
star
15

svelte-loader

Webpack loader for svelte components.
JavaScript
591
star
16

community-legacy

Svelte community meetups, packages, resources, recipes, showcase websites, and more
Svelte
565
star
17

rollup-plugin-svelte

Compile Svelte components with Rollup
JavaScript
489
star
18

learn.svelte.dev

A soup-to-nuts interactive tutorial on how to build apps with Svelte
Svelte
440
star
19

eslint-plugin-svelte3

An ESLint plugin for Svelte v3 components.
JavaScript
377
star
20

svelte-scroller

A <Scroller> component for Svelte apps
Svelte
337
star
21

template-webpack

Template for building basic Svelte applications with webpack
JavaScript
301
star
22

sites

Monorepo for the sites in the Svelte ecosystem
Svelte
277
star
23

svelte-repl

The <Repl> component used on the Svelte website
Svelte
273
star
24

rfcs

RFCs for changes to Svelte
269
star
25

eslint-plugin-svelte

ESLint plugin for Svelte using AST
TypeScript
242
star
26

sapper-studio

An electron app for building Sapper projects
HTML
220
star
27

v2.svelte.dev

The Svelte v2 website
HTML
209
star
28

svelte-hmr

HMR commons for Svelte 3
JavaScript
201
star
29

site-kit

Svelte
173
star
30

hn.svelte.dev

Hacker News clone built with Svelte and Sapper
Svelte
163
star
31

svelte-todomvc

TodoMVC implemented in Svelte
Svelte
137
star
32

svelte-subdivide

A component for building Blender-style layouts in Svelte apps
JavaScript
129
star
33

svelte-cli

Command line interface for Svelte
JavaScript
104
star
34

gestures

Svelte actions for cross-platform gesture detection
TypeScript
88
star
35

svelte-hackernews

WIP Hacker News clone written in Svelte
JavaScript
78
star
36

svelte-eslint-parser

Svelte parser for ESLint
TypeScript
74
star
37

svelte-custom-elements

Turn Svelte components into web components
JavaScript
49
star
38

svelte-extras

Extra methods for Svelte components
JavaScript
43
star
39

sapper-template-rollup

Starter Rollup template for Sapper apps
JavaScript
40
star
40

svelte-upgrade

Upgrade your Svelte templates for version 2
JavaScript
36
star
41

branding

Logos etc for Svelte and related projects
35
star
42

hn.svelte.technology

Hacker News, built with Sapper
HTML
35
star
43

svelte-transitions

Officially supported transition plugins for Svelte
JavaScript
34
star
44

examples

A collection of Svelte(Kit) examples
33
star
45

sapper-template-webpack

Starter webpack template for Sapper apps
JavaScript
33
star
46

kit-template-default

The default SvelteKit template, generated with create-svelte
Svelte
32
star
47

discord-bot

TypeScript
32
star
48

svelte-atom

Syntax, diagnostics, and other smarts for Svelte in Atom
JavaScript
30
star
49

community

27
star
50

svelte-dbmonster

Svelte implementation of DBMonster
JavaScript
26
star
51

template-custom-element

Template for building basic applications with Svelte and custom elements
HTML
21
star
52

generate-ssr

Server-side rendering for Svelte
JavaScript
20
star
53

kit-sandbox

A sandbox for maintainers
JavaScript
17
star
54

template-store

Demonstrating the use of svelte/store
JavaScript
17
star
55

svelte-transitions-draw

Draw transition plugin for Svelte
JavaScript
16
star
56

api.svelte.dev

The API worker source for https://api.svelte.dev
TypeScript
14
star
57

sapper-legacy.svelte.dev

Old docs site for Sapper
HTML
13
star
58

action-deploy-docs

github action for the svelte org to deploy documentation to the svelte api
TypeScript
12
star
59

svelte-bench

Benchmarks for Svelte
JavaScript
10
star
60

sveltegram

Sapper/Svelte remix of nextgram
JavaScript
8
star
61

svelte-transitions-fade

Fade transition plugin for Svelte
JavaScript
8
star
62

assets

Large static files used on the Svelte website
7
star
63

svelte-transitions-slide

Slide transition plugin for Svelte
JavaScript
5
star
64

svelte-transitions-fly

Fly transition plugin for Svelte
JavaScript
4
star
65

redirects

Redirect old Svelte websites to their shiny new equivalents
JavaScript
3
star