https://github.com/melt-ui/runes

Experimenting what Melt will look like with Runes
https://github.com/melt-ui/runes

Last synced: 7 days ago
JSON representation

Experimenting what Melt will look like with Runes

• Host: GitHub
• URL: https://github.com/melt-ui/runes
• Owner: melt-ui
• Created: 2024-01-18T16:32:09.000Z (10 months ago)
• Default Branch: develop
• Last Pushed: 2024-04-17T14:39:01.000Z (7 months ago)
• Last Synced: 2024-04-17T15:53:13.076Z (7 months ago)
• Language: TypeScript
• Size: 472 KB
• Stars: 29
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Melt UI Runes Experiment

## Introduction

This is an experiment that aims to migrate existing Melt UI builders to runes.

EDIT: After experimenting with Runes, we're fairly confident in a API to move forward. See the [Migration plan](MIGRATION.md) for more details.

### Credits

Most of the work has been done by [Abdelrahman](https://github.com/abdel-17)!

## New API

The new API relies on classes instead of stores for creating builders.

```svelte

	export let open;

	const {

		elements: { trigger, content, arrow },

		states,

	} = createTooltip({

		defaultOpen: open,

		onOpenChange: ({ curr, next }) => {

			open = next;

			return next;

		},

	});

	$: states.open.set(open);

Trigger

{#if open}

	


		


		
Hello world!

	

{/if}

```


```svelte

	let { open } = $props();

	const tooltip = new Tooltip({

		open: {

			get: () => open,

			set: (v) => (open = v),

		},

	});

Trigger

{#if open}

	


		


		
Hello world!

	

{/if}

```


I hear you saying "Ugh, classes". Let me explain the reasoning behind this choice:

1. They are more performant, especially with runes. No need for getters and setters for every state.

2. Destructuring makes it hard to use multiple builders in the same page because you need to rename multiple variables. This is no longer the case with the new API.

## Usage

Try out the new API yourself by cloning this repo.

```bash

git clone https://github.com/melt-ui/runes-experiment.git

```

You'll find three builders have been migrated to runes.

1. Label

2. Toggle

3. Tooltip

```ts

import { Label, Toggle, Tooltip } from "$lib/index.js";

```

You'll also find an example for each builder under the `src/routes/playground` directory.