Fixed re exports (#150)

Author: Hugos68

.changeset/nine-beers-collect.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/floating-ui-svelte": patch
+---
+
+Restructure `@floating-ui/dom` re-exports.

packages/floating-ui-svelte/src/hooks/use-floating.svelte.ts

@@ -12,7 +12,7 @@ import { createPubSub } from "../internal/create-pub-sub.js";
 import { getDPR, roundByDPR } from "../internal/dpr.js";
 import { noop } from "../internal/noop.js";
 import { styleObjectToString } from "../internal/style-object-to-string.js";
-import type { OpenChangeReason } from "../internal/types.js";
+import type { OpenChangeReason } from "../types.js";
 import { useId } from "./use-id.js";
 
 interface FloatingElements {

packages/floating-ui-svelte/src/hooks/use-focus.svelte.ts

@@ -9,7 +9,7 @@ import {
 } from "../internal/dom.js";
 import { isMac, isSafari } from "../internal/environment.js";
 import { isTypeableElement } from "../internal/is-typable-element.js";
-import type { OpenChangeReason } from "../internal/types.js";
+import type { OpenChangeReason } from "../types.js";
 import type { FloatingContext } from "./use-floating.svelte.js";
 
 interface UseFocusOptions {

packages/floating-ui-svelte/src/index.ts

@@ -1,6 +1,12 @@
-export * from "@floating-ui/dom";
+/**
+ * Components
+ */
 export * from "./components/floating-arrow.svelte";
 export { default as FloatingArrow } from "./components/floating-arrow.svelte";
+
+/**
+ * Hooks
+ */
 export * from "./hooks/use-click.svelte.js";
 export * from "./hooks/use-dismiss.svelte.js";
 export * from "./hooks/use-floating.svelte.js";
@@ -9,3 +15,28 @@ export * from "./hooks/use-hover.svelte.js";
 export * from "./hooks/use-id.js";
 export * from "./hooks/use-interactions.svelte.js";
 export * from "./hooks/use-role.svelte.js";
+
+/**
+ * Types
+ */
+export * from "./types.js";
+
+/**
+ * Re-exports
+ */
+export {
+	autoPlacement,
+	autoUpdate,
+	arrow,
+	computePosition,
+	detectOverflow,
+	flip,
+	getOverflowAncestors,
+	hide,
+	inline,
+	limitShift,
+	offset,
+	platform,
+	shift,
+	size,
+} from "@floating-ui/dom";

packages/floating-ui-svelte/src/internal/types.ts renamed to packages/floating-ui-svelte/src/types.ts

@@ -1,15 +1,32 @@
-<script lang="ts">
-import { page } from "$app/state";
+<script lang="ts" module>
 import MoonlightDark from "$lib/themes/moonlight-dark.json";
-import type { BuiltinLanguage, SpecialLanguage } from "shiki";
+import type {
+	BuiltinLanguage,
+	SpecialLanguage,
+	ThemeRegistration,
+} from "shiki";
+import { createHighlighterCoreSync } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import bash from "shiki/langs/bash.mjs";
+import css from "shiki/langs/css.mjs";
+import html from "shiki/langs/html.mjs";
+import svelte from "shiki/langs/svelte.mjs";
+import ts from "shiki/langs/ts.mjs";
+
+const highlighter = createHighlighterCoreSync({
+	engine: createJavaScriptRegexEngine(),
+	langs: [svelte, html, css, ts, bash],
+	themes: [MoonlightDark as ThemeRegistration],
+});
+</script>
 
+<script lang="ts">
 interface Props {
 	code: string;
 	lang: BuiltinLanguage | SpecialLanguage;
 	mark?: Array<number | [number, number]>;
 }
 
-// Props
 let { code, lang = "text", mark = [] }: Props = $props();
 
 const highlightedLineNumbers = $derived(
@@ -22,16 +39,10 @@ const highlightedLineNumbers = $derived(
 	}),
 );
 
-// Process Language
 const renderedCode = $derived(
-	page.data.highlighter.codeToHtml(code.trim(), {
+	highlighter.codeToHtml(code.trim(), {
 		lang,
-		themes: {
-			// @ts-expect-error - Shiki theme type is annoyingly strict
-			dark: MoonlightDark,
-			// @ts-expect-error - Shiki theme type is annoyingly strict
-			light: MoonlightDark,
-		},
+		theme: MoonlightDark as ThemeRegistration,
 		transformers: [
 			/**
 			 * This transformer adds the `highlighted` class to lines that are to be highlighted.

sites/floating-ui-svelte.vercel.app/src/lib/components/CodeBlock/CodeBlock.svelte

@@ -1,28 +1,15 @@
 import { browser } from "$app/environment";
-import MoonlightDark from "$lib/themes/moonlight-dark.json";
-import { getHighlighter } from "shiki";
 import type { Pagefind } from "vite-plugin-pagefind/types";
 
 export async function load() {
-	const highlighter = await getHighlighter({
-		langs: ["svelte", "html", "css", "javascript", "typescript", "bash"],
-		// @ts-expect-error - Shiki theme type is annoyingly strict
-		themes: [MoonlightDark],
-	});
-
 	if (browser) {
 		// @ts-expect-error - Dynamic import
 		const pagefind: Pagefind = await import("/pagefind/pagefind.js");
 		await pagefind.init();
 		return {
-			highlighter,
 			pagefind,
 		};
 	}
-
-	return {
-		highlighter,
-	};
 }
 
 export const prerender = true;