docs(headless/tabs): refactored all examples

Author: shairez

apps/website/.eslintrc.json

@@ -1,9 +1,9 @@
 {
   "extends": [
+    "../../.eslintrc.json",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:qwik/recommended",
-    "../../.eslintrc.json"
+    "plugin:qwik/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -12,9 +12,7 @@
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
-    },
-    "parser": "@typescript-eslint/parser",
-    "tsconfigRootDir": "__dirname"
+    }
   },
   "plugins": ["@typescript-eslint"],
   "ignorePatterns": ["!**/*"],

apps/website/src/_state/app-state.type.ts

@@ -1,8 +1,9 @@
+import { NoSerialize } from '@builder.io/qwik';
 import type { Highlighter } from 'shiki';
 
 export interface AppState {
   mode: 'light' | 'dark';
-  highlighter?: Highlighter;
+  highlighter?: NoSerialize<Highlighter>;
   isSidebarOpened: boolean;
   featureFlags?: {
     showFluffy?: boolean;

apps/website/src/_state/use-app-state.ts

@@ -1,25 +1,5 @@
-import { useContext, useContextProvider, useStore } from '@builder.io/qwik';
+import { useContext } from '@builder.io/qwik';
 import { APP_STATE_CONTEXT_ID } from './app-state-context-id';
-import { AppState } from './app-state.type';
-
-export const useAppStateProvider = () => {
-  const appState = useStore<AppState>({
-    mode: 'light',
-    isSidebarOpened: false,
-    featureFlags: {
-      showFluffy: import.meta.env.DEV,
-    },
-  });
-
-  // useTask$(async function createHighlighter() {
-  //   const highlighter = await shiki.getHighlighter({ theme: 'css-variables' });
-  //   appState.highlighter = highlighter;
-  // });
-
-  useContextProvider(APP_STATE_CONTEXT_ID, appState);
-
-  return appState;
-};
 
 export const useAppState = () => {
   const appState = useContext(APP_STATE_CONTEXT_ID);

apps/website/src/root.tsx

@@ -12,7 +12,8 @@ import {
 } from '@builder.io/qwik-city';
 import { RouterHead } from './routes/_components/router-head/router-head';
 
-import { useAppStateProvider } from './_state/use-app-state';
+import { APP_STATE_CONTEXT_ID } from './_state/app-state-context-id';
+import { AppState } from './_state/app-state.type';
 import { THEME_STORAGE_KEY, useCSSTheme } from './_state/use-css-theme';
 import { OLD_APP_STATE_CONTEXT_ID } from './constants';
 import globalStyles from './global.css?inline';
@@ -27,9 +28,17 @@ export default component$(() => {
    */
   useStyles$(globalStyles);
 
-  const appState = useAppStateProvider();
+  const appState = useStore<AppState>({
+    mode: 'light',
+    isSidebarOpened: false,
+    featureFlags: {
+      showFluffy: import.meta.env.DEV,
+    },
+  });
+
+  useContextProvider(APP_STATE_CONTEXT_ID, appState);
 
-  useVisibleTask$(() => {
+  useVisibleTask$(async () => {
     const userStoredTheme = localStorage.getItem(THEME_STORAGE_KEY);
     if (userStoredTheme) {
       appState.mode = userStoredTheme === 'dark' ? 'dark' : 'light';

apps/website/src/routes/docs/_components/highlight/get-or-create-highlighter.ts

@@ -0,0 +1,10 @@
+import { getHighlighter, type Highlighter } from 'shiki';
+
+let highlighter: Highlighter;
+export async function getOrCreateHighlighter() {
+  if (highlighter) {
+    return highlighter;
+  }
+  highlighter = await getHighlighter({ theme: 'css-variables' });
+  return highlighter;
+}

apps/website/src/routes/docs/headless/(components)/tabs/highlight.tsx renamed to apps/website/src/routes/docs/_components/highlight/highlight.tsx

@@ -1,6 +1,6 @@
 import { QwikIntrinsicElements, component$, useSignal, useTask$ } from '@builder.io/qwik';
 import { OmitSignalClass } from '@qwik-ui/type-utils';
-import shiki from 'shiki';
+import { getOrCreateHighlighter } from './get-or-create-highlighter';
 
 export type HighlightProps = OmitSignalClass<QwikIntrinsicElements['pre']> & {
   code: string;
@@ -17,10 +17,8 @@ export const Highlight = component$(
   }: HighlightProps) => {
     const codeSig = useSignal('');
 
-    // const appState = useContext(APP_STATE_CONTEXT_ID);
-
     useTask$(async function createHighlightedCode() {
-      const highlighter = await shiki.getHighlighter({ theme: 'css-variables' });
+      const highlighter = await getOrCreateHighlighter();
       let modifiedCode: string = code;
 
       let partsOfCode = modifiedCode.split(splitCommentStart);