@reuters-graphics/graphics-svelte-components

⚙️ graphics-svelte-components

Svelte components for graphics pages.

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 components

Add your component in a folder one level below src/lib, for example:

src/
  lib/
    MyComponent/
      index.svelte

To document your component, add a docs.svx file in your component directory:

MyComponent/
  docs.svx
  index.svelte

Use Svelte in Markdown syntax to document your component's features in your docs.

IMPORTANT: You MUST add some frontmatter data to your docs, including a title, description and slug.

---
title: MyComponent
description: A component that does things.
slug: my-component
---

# MyComponent

etc.

Once you've completed documenting your component, commit it and then version the package to release:

npm version patch