refactoring: minor updates, add FUNDING.yml (#99)

- Add `FUNDING.yml` file to enable GitHub Sponsors and Buy Me a Coffee support
- Reordered parameters in `useShikiHighlighter` for cleaner API
- Renamed the `createHighlighter` parameter to `highlighterFactory` for clarity and to avoid confusion with Shiki's `createHighlighter`
- Removed unused code in tests

Author: AVGVSTVS96

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: [AVGVSTVS96]
+buy_me_a_coffee: bassim96

package/src/core.ts

@@ -54,10 +54,16 @@ export const useShikiHighlighter: UseShikiHighlighter = (
   // Validate that highlighter is provided
   const highlighter = validateCoreHighlighter(options.highlighter);
 
-  return useBaseHook(code, lang, themeInput, async () => highlighter, {
-    ...options,
-    highlighter,
-  });
+  return useBaseHook(
+    code,
+    lang,
+    themeInput,
+    {
+      ...options,
+      highlighter,
+    },
+    async () => highlighter
+  );
 };
 
 /**

package/src/index.ts

@@ -40,8 +40,8 @@ export const useShikiHighlighter: UseShikiHighlighter = (
     code,
     lang,
     themeInput,
-    createFullHighlighter,
-    options
+    options,
+    createFullHighlighter
   );
 };
 

package/src/lib/hook.ts

@@ -44,17 +44,17 @@ const DEFAULT_THEMES: Themes = {
  * @param lang - Language for highlighting
  * @param themeInput - Theme or themes to use
  * @param options - Highlighting options
- * @param createHighlighter - Factory function to create highlighter (internal use)
+ * @param highlighterFactory - Factory function to create highlighter (internal use)
  */
 export const useShikiHighlighter = (
   code: string,
   lang: Language,
   themeInput: Theme | Themes,
-  createHighlighter: (
+  options: HighlighterOptions = {},
+  highlighterFactory: (
     langsToLoad: ShikiLanguageRegistration,
     themesToLoad: Theme[]
-  ) => Promise<Highlighter | HighlighterCore>,
-  options: HighlighterOptions = {}
+  ) => Promise<Highlighter | HighlighterCore>
 ) => {
   const [highlightedCode, setHighlightedCode] = useState<
     ReactNode | string | null
@@ -125,7 +125,7 @@ export const useShikiHighlighter = (
 
       const highlighter = stableOpts.highlighter
         ? stableOpts.highlighter
-        : await createHighlighter(
+        : await highlighterFactory(
             langsToLoad as ShikiLanguageRegistration,
             themesToLoad
           );

package/src/web.ts

@@ -40,8 +40,8 @@ export const useShikiHighlighter: UseShikiHighlighter = (
     code,
     lang,
     themeInput,
-    createWebHighlighter,
-    options
+    options,
+    createWebHighlighter
   );
 };
 

package/tests/component.test.tsx

@@ -14,9 +14,6 @@ const getContainer = (container: HTMLElement) =>
 const getLanguageLabel = (container: HTMLElement | null) =>
   container?.querySelector('#language-label') as HTMLElement | null;
 
-const getPreElement = (container: HTMLElement | null) =>
-  container?.querySelector('pre.shiki') as HTMLPreElement | null;
-
 describe('ShikiHighlighter Component', () => {
   describe('Component-specific Props', () => {
     test('renders with default pre element', async () => {

package/tests/hook.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import { useShikiHighlighter } from '../src/index';