carbon-components-svelte 0.85.0 → 0.85.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -40
- package/lib/index.js +1 -1
- package/lib/index.mjs +10 -9
- package/package.json +3 -3
- package/src/MultiSelect/MultiSelect.svelte +1 -1
- package/src/Search/Search.svelte +2 -2
- package/src/TextArea/TextArea.svelte +4 -1
- package/src/UIShell/HeaderAction.svelte +1 -0
- package/src/UIShell/HeaderPanelDivider.svelte +1 -1
- package/telemetry.yml +4 -1
- package/types/MultiSelect/MultiSelect.svelte.d.ts +1 -1
- package/types/TextArea/TextArea.svelte.d.ts +2 -2
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@ Design systems facilitate design and development through reuse, consistency, and
|
|
|
13
13
|
|
|
14
14
|
The Carbon Svelte portfolio also includes:
|
|
15
15
|
|
|
16
|
-
- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,
|
|
16
|
+
- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,300+ Carbon icons as Svelte components
|
|
17
17
|
- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,100+ Carbon pictograms as Svelte components
|
|
18
18
|
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
|
|
19
19
|
- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
|
|
@@ -87,37 +87,6 @@ import "carbon-components-svelte/css/g100.css";
|
|
|
87
87
|
import "carbon-components-svelte/css/all.css";
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
-
#### CDN
|
|
91
|
-
|
|
92
|
-
An alternative to loading styles is to link an external StyleSheet from a Content Delivery Network (CDN) like [unpkg.com](https://unpkg.com/).
|
|
93
|
-
|
|
94
|
-
This is best suited for rapid prototyping.
|
|
95
|
-
|
|
96
|
-
##### HTML
|
|
97
|
-
|
|
98
|
-
```html
|
|
99
|
-
<!DOCTYPE html>
|
|
100
|
-
<html>
|
|
101
|
-
<head>
|
|
102
|
-
<link
|
|
103
|
-
rel="stylesheet"
|
|
104
|
-
href="https://unpkg.com/carbon-components-svelte/css/white.css"
|
|
105
|
-
/>
|
|
106
|
-
</head>
|
|
107
|
-
</html>
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
##### `svelte:head`
|
|
111
|
-
|
|
112
|
-
```html
|
|
113
|
-
<svelte:head>
|
|
114
|
-
<link
|
|
115
|
-
rel="stylesheet"
|
|
116
|
-
href="https://unpkg.com/carbon-components-svelte/css/white.css"
|
|
117
|
-
/>
|
|
118
|
-
</svelte:head>
|
|
119
|
-
```
|
|
120
|
-
|
|
121
90
|
### SCSS
|
|
122
91
|
|
|
123
92
|
The most performant method to load styles is to import SCSS directly from carbon-components. Although it requires more set up, you can reduce the size of the bundle CSS by importing individual component styles instead of a pre-compiled CSS StyleSheet.
|
|
@@ -172,10 +141,13 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
|
|
|
172
141
|
|
|
173
142
|
**Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
|
|
174
143
|
|
|
175
|
-
## Preprocessors
|
|
144
|
+
## Preprocessors & Plugins
|
|
176
145
|
|
|
177
146
|
[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.
|
|
178
147
|
|
|
148
|
+
> [!NOTE]
|
|
149
|
+
> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library.
|
|
150
|
+
|
|
179
151
|
```sh
|
|
180
152
|
# Yarn
|
|
181
153
|
yarn add -D carbon-preprocess-svelte
|
|
@@ -189,7 +161,7 @@ pnpm i -D carbon-preprocess-svelte
|
|
|
189
161
|
|
|
190
162
|
### `optimizeImports`
|
|
191
163
|
|
|
192
|
-
`optimizeImports` is a
|
|
164
|
+
`optimizeImports` is a Svelte preprocessor that rewrites barrel imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can significantly speed up development and production build compile times while preserving typeahead and autocompletion offered by integrated development environments (IDE) like VS Code.
|
|
193
165
|
|
|
194
166
|
The preprocessor optimizes imports from the following packages:
|
|
195
167
|
|
|
@@ -201,15 +173,19 @@ The preprocessor optimizes imports from the following packages:
|
|
|
201
173
|
|
|
202
174
|
```diff
|
|
203
175
|
- import { Button } from "carbon-components-svelte";
|
|
204
|
-
- import { Add16 } from "carbon-icons-svelte";
|
|
205
|
-
- import { Airplane } from "carbon-pictograms-svelte";
|
|
206
176
|
+ import Button from "carbon-components-svelte/src/Button/Button.svelte";
|
|
207
|
-
|
|
177
|
+
|
|
178
|
+
- import { Add } from "carbon-icons-svelte";
|
|
179
|
+
+ import Add from "carbon-icons-svelte/lib/Add.svelte";
|
|
180
|
+
|
|
181
|
+
- import { Airplane } from "carbon-pictograms-svelte";
|
|
208
182
|
+ import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
|
|
209
183
|
```
|
|
210
184
|
|
|
211
185
|
#### Usage
|
|
212
186
|
|
|
187
|
+
See [examples](examples) for full configurations.
|
|
188
|
+
|
|
213
189
|
```js
|
|
214
190
|
// svelte.config.js
|
|
215
191
|
import { optimizeImports } from "carbon-preprocess-svelte";
|
|
@@ -219,21 +195,59 @@ export default {
|
|
|
219
195
|
};
|
|
220
196
|
```
|
|
221
197
|
|
|
222
|
-
`
|
|
198
|
+
Any other preprocessors that transpile code in the `script` block should be invoked before `optimizeImports`.
|
|
199
|
+
|
|
200
|
+
For example, `vitePreprocess` should precede `optimizeImports`.
|
|
223
201
|
|
|
224
202
|
```diff
|
|
225
203
|
// svelte.config.js
|
|
226
|
-
+ import
|
|
204
|
+
+ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
|
|
227
205
|
import { optimizeImports } from "carbon-preprocess-svelte";
|
|
228
206
|
|
|
229
207
|
export default {
|
|
230
208
|
preprocess: [
|
|
231
|
-
+
|
|
209
|
+
+ vitePreprocess(),
|
|
232
210
|
optimizeImports()
|
|
233
211
|
],
|
|
234
212
|
};
|
|
235
213
|
```
|
|
236
214
|
|
|
215
|
+
### `optimizeCss`
|
|
216
|
+
|
|
217
|
+
`optimizeCss` is a Vite plugin that removes unused Carbon styles at build time. The plugin is compatible with Rollup ([Vite](https://vitejs.dev/guide/api-plugin) extends the Rollup plugin API).
|
|
218
|
+
|
|
219
|
+
`carbon-components-svelte@0.85.0` or greater is required.
|
|
220
|
+
|
|
221
|
+
```diff
|
|
222
|
+
$ vite build
|
|
223
|
+
|
|
224
|
+
Optimized index-CU4gbKFa.css
|
|
225
|
+
- Before: 606.26 kB
|
|
226
|
+
+ After: 53.22 kB (-91.22%)
|
|
227
|
+
|
|
228
|
+
dist/index.html 0.34 kB │ gzip: 0.24 kB
|
|
229
|
+
dist/assets/index-CU4gbKFa.css 53.22 kB │ gzip: 6.91 kB
|
|
230
|
+
dist/assets/index-Ceijs3eO.js 53.65 kB │ gzip: 15.88 kB
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
> [!NOTE]
|
|
234
|
+
> This is a plugin and not a Svelte preprocessor. It should be added to the list of `vite.plugins`. For Vite set-ups, this plugin is only run when building the app. For Rollup and Webpack, you should conditionally apply the plugin to only execute when building for production.
|
|
235
|
+
|
|
236
|
+
#### Usage
|
|
237
|
+
|
|
238
|
+
See [examples](examples) for full configurations.
|
|
239
|
+
|
|
240
|
+
```js
|
|
241
|
+
// vite.config.js
|
|
242
|
+
import { sveltekit } from "@sveltejs/kit/vite";
|
|
243
|
+
import { optimizeCss } from "carbon-preprocess-svelte";
|
|
244
|
+
import { defineConfig } from "vite";
|
|
245
|
+
|
|
246
|
+
export default defineConfig({
|
|
247
|
+
plugins: [sveltekit(), optimizeCss()],
|
|
248
|
+
});
|
|
249
|
+
```
|
|
250
|
+
|
|
237
251
|
## Examples
|
|
238
252
|
|
|
239
253
|
- [examples/rollup](examples/rollup/)
|