├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    └── index.html
├── rollup.config.js
└── src
    ├── body-text.wc.svelte
    ├── index.js
    └── theme-container.wc.svelte


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist/
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Svelte Design System
 3 | 
 4 | A very simple base for building a design system with Svelte.
 5 | 
 6 | Clone it with Git (or with degit, for actual use).
 7 | 
 8 | ```bash
 9 | cd svelte-design-system
10 | npm install # or yarn
11 | ```
12 | 
13 | ## Gotchas
14 | 
15 | ### Naming
16 | 
17 | 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.
18 | 
19 | ### Tags
20 | 
21 | 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
22 | 
23 | ### Global styles
24 | 
25 | 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.
26 | 
27 | ### Exporting web components
28 | 
29 | 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).
30 | 
31 | # Other References
32 | 
33 | https://javascript.plainenglish.io/can-you-build-web-components-with-svelte-3c8bc3c1cfd8
34 | 
35 | https://dev.to/silvio/how-to-create-a-web-components-in-svelte-2g4j
36 | 
37 | https://developers.google.com/web/fundamentals/web-components/best-practices


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "SvelteComponent",
  3 |   "requires": true,
  4 |   "lockfileVersion": 1,
  5 |   "dependencies": {
  6 |     "@rollup/plugin-node-resolve": {
  7 |       "version": "9.0.0",
  8 |       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-9.0.0.tgz",
  9 |       "integrity": "sha512-gPz+utFHLRrd41WMP13Jq5mqqzHL3OXrfj3/MkSyB6UBIcuNt9j60GCbarzMzdf1VHFpOxfQh/ez7wyadLMqkg==",
 10 |       "dev": true,
 11 |       "requires": {
 12 |         "@rollup/pluginutils": "^3.1.0",
 13 |         "@types/resolve": "1.17.1",
 14 |         "builtin-modules": "^3.1.0",
 15 |         "deepmerge": "^4.2.2",
 16 |         "is-module": "^1.0.0",
 17 |         "resolve": "^1.17.0"
 18 |       }
 19 |     },
 20 |     "@rollup/pluginutils": {
 21 |       "version": "3.1.0",
 22 |       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
 23 |       "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
 24 |       "dev": true,
 25 |       "requires": {
 26 |         "@types/estree": "0.0.39",
 27 |         "estree-walker": "^1.0.1",
 28 |         "picomatch": "^2.2.2"
 29 |       }
 30 |     },
 31 |     "@types/estree": {
 32 |       "version": "0.0.39",
 33 |       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
 34 |       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
 35 |       "dev": true
 36 |     },
 37 |     "@types/node": {
 38 |       "version": "14.14.31",
 39 |       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.31.tgz",
 40 |       "integrity": "sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g==",
 41 |       "dev": true
 42 |     },
 43 |     "@types/resolve": {
 44 |       "version": "1.17.1",
 45 |       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
 46 |       "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
 47 |       "dev": true,
 48 |       "requires": {
 49 |         "@types/node": "*"
 50 |       }
 51 |     },
 52 |     "builtin-modules": {
 53 |       "version": "3.2.0",
 54 |       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
 55 |       "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
 56 |       "dev": true
 57 |     },
 58 |     "deepmerge": {
 59 |       "version": "4.2.2",
 60 |       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
 61 |       "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
 62 |       "dev": true
 63 |     },
 64 |     "estree-walker": {
 65 |       "version": "1.0.1",
 66 |       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
 67 |       "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
 68 |       "dev": true
 69 |     },
 70 |     "fsevents": {
 71 |       "version": "2.3.2",
 72 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
 73 |       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
 74 |       "dev": true,
 75 |       "optional": true
 76 |     },
 77 |     "function-bind": {
 78 |       "version": "1.1.1",
 79 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
 80 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 81 |       "dev": true
 82 |     },
 83 |     "has": {
 84 |       "version": "1.0.3",
 85 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
 86 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
 87 |       "dev": true,
 88 |       "requires": {
 89 |         "function-bind": "^1.1.1"
 90 |       }
 91 |     },
 92 |     "is-core-module": {
 93 |       "version": "2.2.0",
 94 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
 95 |       "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
 96 |       "dev": true,
 97 |       "requires": {
 98 |         "has": "^1.0.3"
 99 |       }
100 |     },
101 |     "is-module": {
102 |       "version": "1.0.0",
103 |       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
104 |       "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
105 |       "dev": true
106 |     },
107 |     "path-parse": {
108 |       "version": "1.0.6",
109 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
110 |       "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
111 |       "dev": true
112 |     },
113 |     "picomatch": {
114 |       "version": "2.2.2",
115 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
116 |       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
117 |       "dev": true
118 |     },
119 |     "require-relative": {
120 |       "version": "0.8.7",
121 |       "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
122 |       "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
123 |       "dev": true
124 |     },
125 |     "resolve": {
126 |       "version": "1.20.0",
127 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
128 |       "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
129 |       "dev": true,
130 |       "requires": {
131 |         "is-core-module": "^2.2.0",
132 |         "path-parse": "^1.0.6"
133 |       }
134 |     },
135 |     "rollup": {
136 |       "version": "2.39.1",
137 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.39.1.tgz",
138 |       "integrity": "sha512-9rfr0Z6j+vE+eayfNVFr1KZ+k+jiUl2+0e4quZafy1x6SFCjzFspfRSO2ZZQeWeX9noeDTUDgg6eCENiEPFvQg==",
139 |       "dev": true,
140 |       "requires": {
141 |         "fsevents": "~2.3.1"
142 |       }
143 |     },
144 |     "rollup-plugin-svelte": {
145 |       "version": "6.1.1",
146 |       "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-6.1.1.tgz",
147 |       "integrity": "sha512-ijnm0pH1ScrY4uxwaNXBpNVejVzpL2769hIEbAlnqNUWZrffLspu5/k9/l/Wsj3NrEHLQ6wCKGagVJonyfN7ow==",
148 |       "dev": true,
149 |       "requires": {
150 |         "require-relative": "^0.8.7",
151 |         "rollup-pluginutils": "^2.8.2",
152 |         "sourcemap-codec": "^1.4.8"
153 |       }
154 |     },
155 |     "rollup-pluginutils": {
156 |       "version": "2.8.2",
157 |       "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
158 |       "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
159 |       "dev": true,
160 |       "requires": {
161 |         "estree-walker": "^0.6.1"
162 |       },
163 |       "dependencies": {
164 |         "estree-walker": {
165 |           "version": "0.6.1",
166 |           "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
167 |           "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
168 |           "dev": true
169 |         }
170 |       }
171 |     },
172 |     "sourcemap-codec": {
173 |       "version": "1.4.8",
174 |       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
175 |       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
176 |       "dev": true
177 |     },
178 |     "svelte": {
179 |       "version": "3.32.3",
180 |       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.32.3.tgz",
181 |       "integrity": "sha512-5etu/wDwtewhnYO/631KKTjSmFrKohFLWNm1sWErVHXqGZ8eJLqrW0qivDSyYTcN8GbUqsR4LkIhftNFsjNehg==",
182 |       "dev": true
183 |     },
184 |     "svelte-themer": {
185 |       "version": "0.4.3",
186 |       "resolved": "https://registry.npmjs.org/svelte-themer/-/svelte-themer-0.4.3.tgz",
187 |       "integrity": "sha512-9zZrCrlZbUpxFKwtLMsXbvxMPLuGjo2RFt+8ffVhi/uSwRh/wEGhEVwKRrMeMPD8D/OV9Q0o4h9CfDRvghob6w=="
188 |     }
189 |   }
190 | }
191 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-design-system",
 3 |   "svelte": "src/index.js",
 4 |   "module": "dist/index.mjs",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "build": "rollup -c",
 8 |     "prepublishOnly": "npm run build"
 9 |   },
10 |   "devDependencies": {
11 |     "@rollup/plugin-node-resolve": "^9.0.0",
12 |     "rollup": "^2.0.0",
13 |     "rollup-plugin-svelte": "^6.0.0",
14 |     "svelte": "^3.0.0"
15 |   },
16 |   "keywords": [
17 |     "svelte"
18 |   ],
19 |   "files": [
20 |     "src",
21 |     "dist"
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>svelte-component</title>
 8 |     <script src="../dist/index.mjs" type="module"></script>
 9 |   </head>
10 |   <body>
11 |     <pg-theme-container secondary="purple">
12 |       <pg-body-text>
13 |         Hi there!
14 |       </pg-body-text>
15 |     </pg-theme-container>
16 | 
17 |     <p class="body-text">This has the same class as the body-text web component but the CSS styling doesn't collide.</p>
18 |   </body>
19 |   <style>
20 |     .body-text {
21 |       padding: 16px;
22 |       background-color: aliceblue;
23 |       color: black;
24 |       font-size: 12px;
25 |     }
26 |   </style>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from "rollup-plugin-svelte";
 2 | import resolve from "@rollup/plugin-node-resolve";
 3 | import pkg from "./package.json";
 4 | 
 5 | const name = pkg.name
 6 |   .replace(/^(@\S+\/)?(svelte-)?(\S+)/, "$3")
 7 |   .replace(/^\w/, (m) => m.toUpperCase())
 8 |   .replace(/-\w/g, (m) => m[1].toUpperCase());
 9 | 
10 | export default {
11 |   input: "src/index.js",
12 |   output: [
13 |     { file: pkg.module, format: "es" },
14 |     { file: pkg.main, format: "umd", name },
15 |   ],
16 |   plugins: [
17 |     svelte({ customElement: true, include: /\.wc\.svelte$/ }),
18 |     svelte({ customElement: false, exclude: /\.wc\.svelte$/ }),
19 |     resolve(),
20 |   ],
21 | };
22 | 


--------------------------------------------------------------------------------
/src/body-text.wc.svelte:
--------------------------------------------------------------------------------
 1 | <svelte:options tag="pg-body-text" />
 2 | 
 3 | <p class="body-text">
 4 |   <slot />
 5 | </p>
 6 | 
 7 | <style>
 8 |   .body-text {
 9 |     color: var(--secondary-color);
10 |     font-size: 18px;
11 |   }
12 | </style>
13 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as ThemeContainer }  from "./theme-container.wc.svelte"
2 | export { default as BodyText }  from './body-text.wc.svelte'
3 | 


--------------------------------------------------------------------------------
/src/theme-container.wc.svelte:
--------------------------------------------------------------------------------
 1 | <svelte:options tag="pg-theme-container" />
 2 | 
 3 | <script>
 4 |   export let primary = "green";
 5 |   export let secondary = "red";
 6 | </script>
 7 | 
 8 | <div style="--primary-color: {primary};--secondary-color: {secondary}">
 9 |   <slot />
10 | </div>
11 | 


--------------------------------------------------------------------------------