MDX Tests: Astro & Svelte 5 & Canvas

Lazy-Loading Svelte Component (with Astro wrapper)

import LazyLoadDemo from '@components/Notes/Examples/LazyLoadDemo.astro';

instantiate

<LazyLoadDemo />

▶ Interactive feature — view on fubits.dev

Simple Svelte 5 Component

import DynamicCssBefore from '@components/Notes/Examples/DynamicCssBefore.svelte';

instantiate

<DynamicCssBefore client:visible />

▶ Interactive feature — view on fubits.dev

Simple Svelte 5 Component (SVG)

import SvgOffsetPath from '@components/Notes/Examples/SvgOffsetPath.svelte';

instantiate

<SvgOffsetPath client:visible />

▶ Interactive feature — view on fubits.dev

Svelte 5 Component with Children

import CanvasDotplot from '@components/Notes/Examples/CanvasDotplot.svelte';

instantiate

<CanvasDotplot client:only="svelte">
	<div>
		<h4>
			<code>Astro Children</code>
		</h4>
	</div>
</CanvasDotplot>

Legacy Svelte 3/4 Component mixed with Svelte 5 Components

import Layers from '@components/Notes/Examples/Layers.svelte';

instantiate

<Layers client:visible />

▶ Interactive feature — view on fubits.dev