@reuters-graphics/graphics-svelte-components
v0.3.32
Published
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
Downloads
90
Keywords
Readme
⚙️ graphics-svelte-components
Svelte components for graphics pages.
➡️ Components demos & docs site
Built with:
Quickstart
yarn add @reuters-graphics/graphics-svelte-components
<script>
import { Nav } from '@reuters-graphics/graphics-svelte-components';
</script>
<Nav />
📚 Read the docs...
... for details on using all the components included.
With SvelteKit/Vite
If you're using this package with SvelteKit (which uses Vite), you'll likely need to add some of its dependencies to Vite's dependency pre-bundling config. For example:
export default {
// ...
kit: {
// ...
vite: {
// ...
optimizeDeps: {
include: ['lodash-es', 'pym.js', 'classnames', 'ua-parser-js'],
},
},
},
};
If you're using the graphics kit this config is already included.
Developing new components
First step: make a branch for your new component.
Next, add your component in a folder one level below src/lib
, for example:
src/
lib/
MyComponent/ 👈
index.svelte 👈
Be sure to export your component from the library's entry module, src/lib/index.js
:
// src/lib/index.js
export { default as MyComponent } from './MyComponent/index.svelte';
To document and demo your component, add a docs.svx
file in your component directory:
MyComponent/
docs.svx 👈
index.svelte
Use Svelte in Markdown syntax to demo your component and document its features.
Note, you must add some basic frontmatter data -- a title, description and slug -- to make your demo page discoverable in the demo site.
Example
---
title: MyComponent
description: A component that does things.
slug: my-component
---
<script>
import MyComponent from './index.svelte';
import DemoContainer from '../_docs/DemoContainer/index.svelte';
</script>
# MyComponent
A component that does things.
```svelte
<script>
import { MyComponent } from '@reuters-graphics/graphics-svelte-components';
</script>
<MyComponent />
```
<DemoContainer>
<MyComponent />
</DemoContainer>
When you're ready, make a pull pequest for your component.
Publishing
Once you've completed documenting your component, commit it and then version the package, which will publish the library to npm:
git add .
git commit -m "my new component added"
git push origin master
npm version patch