@reuters-graphics/graphics-svelte-components

⚙️ 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