Svelte Design System
A very simple base for building a design system with Svelte.
Clone it with Git (or with degit, for actual use).
cd svelte-design-system
npm install # or yarn
Gotchas
Naming
Files with the .wc.svelte suffix will be built as web components, meaning that they must have an unique tag. View src/theme-container.wc.svelte for reference.
Tags
Tags should have a small preffix, probably something related to the company developing the design system. In our case here, I used pg for Pagar.me. This is to avoid potential clashes with 3rd party libraries or even changes to the DOM spec
Global styles
Global styles and web components don't mix too well. Ideally, you should use a themeing component to set CSS variables. View src/theme-container.wc.svelte and src/body-text.wc.svelte for reference.
Exporting web components
They should be exported from the src/index.js. This ideally should be automated in larger projects (we don't even have a npm serve or anything like that here).
Other References
https://javascript.plainenglish.io/can-you-build-web-components-with-svelte-3c8bc3c1cfd8
https://dev.to/silvio/how-to-create-a-web-components-in-svelte-2g4j
https://developers.google.com/web/fundamentals/web-components/best-practices
