https://github.com/rodneylab/sveltekit-components

Handy components for building sites in SvelteKit
https://github.com/rodneylab/sveltekit-components

leafletjs mapbox openstreetmap svelte svelte-components sveltekit

Last synced: 3 days ago
JSON representation

Handy components for building sites in SvelteKit

• Host: GitHub
• URL: https://github.com/rodneylab/sveltekit-components
• Owner: rodneylab
• License: bsd-3-clause
• Created: 2021-10-01T18:59:15.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-17T06:53:26.000Z (7 months ago)
• Last Synced: 2024-10-28T16:08:51.165Z (16 days ago)
• Topics: leafletjs, mapbox, openstreetmap, svelte, svelte-components, sveltekit
• Language: Svelte
• Homepage:
• Size: 686 KB
• Stars: 59
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: .github/SECURITY.md

Awesome Lists containing this project

README

        




  

    

  





  Sveltekit Components



# sveltekit-components

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/rodneylab/sveltekit-components)

Library of TypeScript friendly SvelteKit components for adding functionality to your SvelteKit apps.

## Setup

To install the package run

```shell

pnpm add -D @rodneylab/sveltekit-components @rodneylab/sveltekit-map-component

pnpm add --save-peer leaflet

```

## Components

### Form Fields

Add accessible text, email and password inputs to your SvelteKit site forms. See full SvelteKit form examples or get started with extracts below:

```svelte

	import {

		EmailInputField,

		PasswordInputField,

		TextArea,

		TextInputField,

	} from '@rodneylab/sveltekit-components';

	 {

			name = event.detail;

		}}

		style="padding-bottom:1rem"

	/>

	 {

			email = event.detail;

		}}

		style="padding-bottom:1rem"

	/>

	 {

			message = event.detail;

		}}

		style="padding-bottom:1rem"

	/>

	Submit form

	 {

			email = event.detail;

		}}

		style="padding-bottom:1rem"

	/>

	 {

			password = event.detail;

		}}

		style="padding-bottom:1rem;border-style:none"

	/>

	Submit form

```

### Image

Responsive image component with lazy loading support. Requires the vanilla-lazyload package for lazy loading and vite-imagetools for responsive image support:

```shell

pnpm install -D vanilla-lazyload vite-imagetools

```

You will also need to update `svelte.config.js` configuration to use vite-imagetools:

```javascript

/** @type {import('@sveltejs/kit').Config} */

import { imagetools } from 'vite-imagetools';

...

const config = {

  kit: {

    // hydrate the 
 element in src/app.html

    target: '#svelte',

    vite: {

      plugins: [imagetools()],

    },

  },

};


export default config;

```

For lazyloading, load the vanilla-lazyload script into the document in a layout component (e.g. `src/routes/__layout.svelte`):

```svelte

  import lazyload from 'vanilla-lazyload';

  import { browser } from '$app/environment';

  if (browser && !document.lazyloadInstance) {

    document.lazyloadInstance = new lazyload();

  }

```

Then use the `Image` component on a page:

```svelte

	import { onMount } from 'svelte';

	import { browser } from '$app/environment';

	import { Image } from '@rodneylab/sveltekit-components';

	import meta from '$lib/assets/your-image.jpg?w=768&metadata';

	import srcsetJpeg from '$lib/assets/your-image.jpg?w=1536;1280;768;640&jpeg&srcset';

	import srcsetWebp from '$lib/assets/your-image.jpg?w=1536;1280;768;640&webp&srcset';

	export let imageData;

	onMount(() => {

		if (browser) {

			document.lazyloadInstance.update();

		}

	});

	const { width, height, src } = meta;

	const sources = [

		{ srcset: srcsetWebp, type: 'image/webp' },

		{ srcset: srcsetJpeg, type: 'image/jpeg' },

	];

	const sizes = '(max-width: 672px) calc(100vw - 32px), 672px';

```

The code in `onMount` only needs to be called once for each page, so if, for example, you have component A, B and C all containing an image and included in page Z, add the `onMount` code only to page Z and add the `Image` component (without `onMount` code) to `A.svelte`, `B.svelte` and `C.svelte`.

If you want to load the image eagerly use the `loading` prop to specify this:

```svelte

```

Best practise is to load the largest contentful paint above the fold eagerly. Typically this means eager loading for banner images.

#### Props



alt: string

Text describing the image for screen reader users.

width: number

Nominal image width, used to help reduced cumulative layout shift.

height: number

Nominal image height, used to help reduced cumulative layout shift.

src: string

Image source. This is the fallback for older browsers.

sources: { srcset: string; type: string }[]

Array of source and types for responsive images.

placeholder: string

Can be a Base64 encoded, low resolution placeholder which is displayed while the full resolution image is loading.

sizes: string

Media query like string which helps the browser choose the right image size.

loading: string

Can be eager or lazy. Default is lazy.



See article on SvelteKit images which provides much more background on what these props are and how you might update them.

### Map

Add a map to your SvelteKit site using Mapbox with OpenStreetMap and LeafletJS. Requires a Mapbox access token, just add it your to the `.env` file in your project:

```plaintext

PUBLIC_MAPBOX_ACCESS_TOKEN=your.token

```

Add the component to a `.svelte` file in your project:

```svelte

	import { Map } from '@rodneylab/sveltekit-map-component';

	const latitude = 51.50162;

	const longitude = -0.14115;

	const zoom = 16;

	const location = { latitude, longitude };

```

## Further Info

To create your own SvelteKit component library see the video on creating a SvelteKit component library. Drop a comment on that page if you have a question.

Feel free to jump into the [Rodney Lab matrix chat room](https://matrix.to/#/%23rodney:matrix.org).