Dialog

• adds the remove-body-scroll attribute to remove the scroll on document.body when the dialog is open.

Full Changelog: https://github.com/rossrobino/drab/compare/5.3.6...5.4.0

Full Changelog: https://github.com/rossrobino/drab/compare/5.3.5...5.3.6

Prefetch

• fix: uses the speculation rules API as a prefetch fallback instead of a link tag when supported, this has a few perf benefits highlighted here: MDN Reference.

Related issue: https://github.com/WICG/nav-speculation/issues/162#issuecomment-1977818473

Full Changelog: https://github.com/rossrobino/drab/compare/5.3.4...5.3.5

• update dependencies

Prefetch

• fix: remove unnecessary supports checks since speculation rules are a progressive enhancement.

Full Changelog: https://github.com/rossrobino/drab/compare/5.3.3...5.3.4

Prefetch

• fix: always add link tag for prefetch even when prerendering as a fallback in case speculations rules fails.

Full Changelog: https://github.com/rossrobino/drab/compare/5.3.2...5.3.3

Prefetch

• fix: use the Speculation Rules API for prefetching as well as prerendering when supported.
• fix: use fetch with low priority instead of link tag for prefetch when Speculation Rules is not supported.

Dialog

• fix: add click-outside-close attribute to Dialog type.

Full Changelog: https://github.com/rossrobino/drab/compare/5.3.1...5.3.2

• feat: adds the click-outside-close attribute to the dialog element.

Full Changelog: https://github.com/rossrobino/drab/compare/5.3.0...5.3.1

• fix: makes touch events passive to improve scroll performance

Full Changelog: https://github.com/rossrobino/drab/compare/5.2.3...5.3.0

• feat: adds intersection observer element, Intersect

Full Changelog: https://github.com/rossrobino/drab/compare/5.2.2...5.2.3

What's Changed

• fix-define-all-export by @rossrobino in https://github.com/rossrobino/drab/pull/19

Full Changelog: https://github.com/rossrobino/drab/compare/5.2.1...5.2.2

Full Changelog: https://github.com/rossrobino/drab/compare/5.2.0...5.2.1

5.2.0

• Adds new Prefetch element to progressively enhance HTMLAnchorElements and prefetch content before user navigation. Uses the platform link tag or optionally the experimental Speculation Rules API if supported to run client-side JS on the prefetched page in advance.

What's Changed

• Add example usage for Enhance by @colepeters in https://github.com/rossrobino/drab/pull/16
• Prefetch by @rossrobino in https://github.com/rossrobino/drab/pull/18

New Contributors

• @colepeters made their first contribution in https://github.com/rossrobino/drab/pull/16

Full Changelog: https://github.com/rossrobino/drab/compare/5.1.0...5.2.0

• Adds a new WakeLock element to ease the use of working with the WakeLock API.
• Improves swap behavior to store the value of the swapped content in the template.

What's Changed

• feat: add wakelock by @rossrobino in https://github.com/rossrobino/drab/pull/17

Full Changelog: https://github.com/rossrobino/drab/compare/5.0.2...5.1.0

What's Changed

• use tsc to compile esm by @rossrobino in https://github.com/rossrobino/drab/pull/15

Full Changelog: https://github.com/rossrobino/drab/compare/5.0.1...5.0.2

Full Changelog: https://github.com/rossrobino/drab/compare/5.0.0...5.0.1

This version adds attribute types for each custom element to provide auto-complete for JSX frameworks like React and Solid.

Types are included in the same entry point as the element as {ElementName}Attributes.

drab 5.0.0

What's Changed

• version 5 by @rossrobino in https://github.com/rossrobino/drab/pull/13

Full Changelog: https://github.com/rossrobino/drab/compare/4.1.7...5.0.0

Overview

Version 5 converts the library from Svelte components to custom elements.

Since drab already required users to provide most of the HTML via slots, the benefit of using Svelte to author the components was outweighed by the benefits of using custom elements, primarily the fact that custom elements can be used in any framework.

drab's custom elements do not use the shadow DOM, so the contents of each element can still be server-side rendered with a framework. drab also works with client side rendering, drab pushes back the execution of connectedCallback to the end of the micro-task queue so frameworks like Svelte render the HTML within the custom element before connectedCallback.

I appreciate all of the interest in the library, I hope these updates will enable it to reach a broader range of users and projects.

Migration

Example to convert a drab 4 Svelte component to utilize drab 5. See the docs for updated examples of each component.

drab 4

<script lang="ts">
	import { Editor } from "drab";
</script>

<Editor
	classButton="button button-primary"
	classControls="flex gap-2"
	classTextarea="input h-36 mb-2"
	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
	contentElements={[
		{
			title: "Bullet",
			text: "- ",
			display: "block",
			icon: "Bullet",
		},
		{
			title: "Italic",
			text: "*",
			display: "wrap",
			icon: "Italic",
			key: "i",
			class: "italic",
		},
		{
			title: "Anchor",
			text: "[text](href)",
			display: "inline",
			icon: "Anchor",
			key: "[",
		},
	]}
/>

drab 5

Ensure custom elements are being imported and defined in the browser only, since window is not available on the server. In Svelte, you can utilize onMount. This import only needs to run once for the element to be defined and used anywhere.

Instead of defining props with JavaScript, each prop is defined using HTML attributes instead. This authoring constraint has resulted in a much more consistent API that gives you complete access to the underlying markup. For example, you can see that you have more control over how each button is displayed and where it is rendered in relation to the textarea.

Instead of using slot props, drab identifies trigger and content elements via CSS selectors (default data-trigger and data-content), inspired by libraries such as Radix and Melt UI.

This also frees you from styling the components through props, you can now style the content of these elements however you like.

<script>
	import { onMount } from "svelte";

	// only execute on the client
	onMount(async () => {
		// only define once
		if (!customElements.get("drab-editor")) {
			const { Editor } = await import("drab/editor");
			customElements.define("drab-editor", Editor);
		}
	});
</script>

<drab-editor>
	<textarea
		data-content
		class="input mb-2 h-36"
		placeholder="asterisk: ctrl+i, anchor: ctrl+["
	></textarea>
	<div class="flex gap-2">
		<button
			data-trigger
			data-value="- "
			data-type="block"
			data-key="i"
			class="button button-primary"
		>
			Bullet
		</button>
		<button
			data-trigger
			data-value="*"
			data-type="wrap"
			class="button button-primary italic"
		>
			Italic
		</button>
		<button
			data-trigger
			data-value="[text](href)"
			data-type="inline"
			data-key="["
			class="button button-primary"
		>
			Anchor
		</button>
	</div>
</drab-editor>

Changes

Animation

drab now uses the Web Animations API instead of Svelte's animations.

Components

Each deprecated component is linked to a REPL to copy and paste if you need it.

You can also all of the version 4 components on GitHub. Most of them don't have many imports, so you can easily copy and paste into your project if you don't want to upgrade to v5.

• Sheet has been replaced with a more general purpose Dialog which animates the native HTMLDialogElement.
• Details has improved accessibility by animating the content of the HTMLDetailsElement instead of creating a copy outside of the content.
• Popover now animates the Popover API instead of using a custom JS solution (not supported in FireFox currently).
• FrettedChord has been removed, TBD if will be added back in a future release.
• Tablature has been removed, TBD if will be added back in a future release.
• DataTable is now called TableSort, and no longer has pagination.

Besides the configuration, the functionality of other components remain unchanged.

Full Changelog: https://github.com/rossrobino/drab/compare/4.1.6...4.1.7

Fixes component type for Editor.

What's Changed

• fix shortcuts not occurring for the editor by @rossrobino in https://github.com/rossrobino/drab/pull/12

Full Changelog: https://github.com/rossrobino/drab/compare/4.1.5...4.1.6

What's Changed

• Add spellcheck attribute to Editor by @Scorpil in https://github.com/rossrobino/drab/pull/11

New Contributors

• @Scorpil made their first contribution in https://github.com/rossrobino/drab/pull/11

Full Changelog: https://github.com/rossrobino/drab/compare/4.1.4...4.1.5

What's Changed

• unchecked index share button by @rossrobino in https://github.com/rossrobino/drab/pull/10

Full Changelog: https://github.com/rossrobino/drab/compare/4.1.3...4.1.4