refactor: improve code quality

data/themes.ts

@@ -91,7 +91,7 @@ export let themes = [
   },
 ]
 
-export let getThemeNameById = (id: string) => {
+export let getThemeNameById = (id: string): string => {
   let theme = themes.find(themeValue => themeValue.id === id)
   return theme ? theme.name : ''
 }

docs/adapters/netlify-edge/vite.config.ts

@@ -2,7 +2,7 @@ import { netlifyEdgeAdapter } from '@builder.io/qwik-city/adapters/netlify-edge/
 import { extendConfig } from '@builder.io/qwik-city/vite'
 import path from 'node:path'
 
-import baseConfig from '../../../vite.config.docs'
+import baseConfig from '../../../vite.config.documentation'
 
 export default extendConfig(baseConfig, () => ({
   build: {

docs/blocks/demo/index.tsx

@@ -37,7 +37,7 @@ export let Demo = component$(() => (
             </div>
             <IconList>
               {fileIcons.map(icon => (
-                <IconItem {...icon} />
+                <IconItem key={icon.id} {...icon} />
               ))}
             </IconList>
           </div>

docs/blocks/head/index.tsx

@@ -1,7 +1,7 @@
 import { useDocumentHead, useLocation } from '@builder.io/qwik-city'
 import { component$ } from '@builder.io/qwik'
 
-export const Head = component$(() => {
+export let Head = component$(() => {
   let head = useDocumentHead()
   let loc = useLocation()
 
@@ -18,31 +18,31 @@ export const Head = component$(() => {
       <link href="/apple-touch-icon.png" rel="apple-touch-icon" />
       <link href={`${import.meta.env.BASE_URL}manifest.json`} rel="manifest" />
 
-      {head.meta.map(m => (
-        <meta key={m.key} {...m} />
+      {head.meta.map(meta => (
+        <meta key={meta.key} {...meta} />
       ))}
 
-      {head.links.map(l => (
-        <link key={l.key} {...l} />
+      {head.links.map(link => (
+        <link key={link.key} {...link} />
       ))}
 
-      {head.styles.map(s => (
+      {head.styles.map(style => (
         <style
-          key={s.key}
-          {...s.props}
-          {...(s.props?.dangerouslySetInnerHTML
+          key={style.key}
+          {...style.props}
+          {...(style.props?.dangerouslySetInnerHTML
             ? {}
-            : { dangerouslySetInnerHTML: s.style })}
+            : { dangerouslySetInnerHTML: style.style })}
         />
       ))}
 
-      {head.scripts.map(s => (
+      {head.scripts.map(script => (
         <script
-          key={s.key}
-          {...s.props}
-          {...(s.props?.dangerouslySetInnerHTML
+          key={script.key}
+          {...script.props}
+          {...(script.props?.dangerouslySetInnerHTML
             ? {}
-            : { dangerouslySetInnerHTML: s.script })}
+            : { dangerouslySetInnerHTML: script.script })}
         />
       ))}
     </head>

docs/elements/code/index.tsx

@@ -1,6 +1,11 @@
+import type { Signal } from '@builder.io/qwik'
+import type { ThemeInput } from 'shiki'
+
 import { component$, useContext, useSignal, useTask$ } from '@builder.io/qwik'
 import { isDev } from '@builder.io/qwik/build'
 
+import type { Theme } from '../../typings'
+
 import { ThemeSourceContext, ThemeTypeContext, ThemeContext } from '../theme'
 import { createHighlighter } from '../../utils/create-highlighter'
 import { getThemeNameById } from '../../../data/themes'
@@ -36,12 +41,12 @@ root.render(<Counter />)`
 let metaGlobThemes = import.meta.glob('../../themes/*', {
   import: 'default',
   eager: !isDev,
-}) as Record<string, any>
+}) as Record<string, () => Promise<Promise<Theme>>>
 
 export let Code = component$(() => {
-  let theme = useContext(ThemeContext)
-  let themeSource = useContext(ThemeSourceContext)
-  let themeType = useContext(ThemeTypeContext)
+  let theme = useContext<Signal<string>>(ThemeContext)
+  let themeSource = useContext<Signal<Theme | null>>(ThemeSourceContext)
+  let themeType = useContext<Signal<string>>(ThemeTypeContext)
 
   let html = useSignal('')
 
@@ -53,8 +58,8 @@ export let Code = component$(() => {
     let themePath = `../../themes/${theme.value}.json`
 
     let themeValue = isDev
-      ? await metaGlobThemes[themePath]()
-      : metaGlobThemes[themePath]
+      ? await (metaGlobThemes[themePath] as unknown as () => Promise<Theme>)()
+      : (metaGlobThemes[themePath] as unknown as Theme)
 
     if (themeValue.name.toLowerCase().includes('light')) {
       themeType.value = 'light'
@@ -67,7 +72,7 @@ export let Code = component$(() => {
     themeSource.value = themeValue
 
     let highlighter = await createHighlighter()
-    await highlighter.loadTheme(themeValue)
+    await highlighter.loadTheme(themeValue as unknown as ThemeInput)
 
     let htmlValue = highlighter.codeToHtml(code, {
       theme: getThemeNameById(theme.value),

docs/elements/color-list/index.tsx

@@ -1,15 +1,20 @@
 import { useVisibleTask$, component$, useContext } from '@builder.io/qwik'
 import { isDev } from '@builder.io/qwik/build'
 
-import { updateBaseCSSVars, colorNames } from '../../utils/update-css-vars'
+import type { ThemeData } from '../../typings'
+
+import {
+  updateBaseCSSVariables,
+  colorNames,
+} from '../../utils/update-css-variables'
 import { ThemeTypeContext, ThemeContext } from '../theme'
 import { ColorItem } from '../color-item'
 import styles from './index.module.css'
 
 let metaGlobData = import.meta.glob('../../../themes/*', {
   import: 'default',
   eager: !isDev,
-}) as Record<string, any>
+}) as Record<string, () => Promise<ThemeData>>
 
 export let ColorList = component$(() => {
   let theme = useContext(ThemeContext)
@@ -21,11 +26,14 @@ export let ColorList = component$(() => {
 
     let dataPath = `../../../themes/${theme.value}.json`
 
-    let dataValue = isDev
-      ? await metaGlobData[dataPath]()
-      : metaGlobData[dataPath]
+    let dataValue = (
+      isDev ? await metaGlobData[dataPath]() : metaGlobData[dataPath]
+    ) as ThemeData
 
-    updateBaseCSSVars(dataValue.colors ?? [], themeType.value)
+    updateBaseCSSVariables(
+      dataValue.colors.length ? dataValue.colors : [],
+      themeType.value,
+    )
   })
 
   return (

docs/elements/icon-item/index.tsx

@@ -10,7 +10,7 @@ interface IconItemProps {
   id: string
 }
 
-export const IconItem = component$<IconItemProps>(
+export let IconItem = component$<IconItemProps>(
   ({ light = false, name, id }) => (
     <li class={styles.item}>
       <Icon light={light} id={id} />

docs/elements/icon/index.tsx

@@ -1,6 +1,8 @@
 import { component$, useContext, useSignal, useTask$ } from '@builder.io/qwik'
 import { isDev } from '@builder.io/qwik/build'
 
+import type { ThemeData } from '../../typings'
+
 import { ThemeTypeContext, ThemeContext } from '../theme'
 import { colorize } from '../../../extension/colorize'
 
@@ -13,12 +15,12 @@ let metaGlobIcons = import.meta.glob('../../../icons/files/*', {
   import: 'default',
   eager: !isDev,
   query: '?raw',
-}) as Record<string, any>
+}) as Record<string, () => Promise<string>>
 
 let metaGlobThemeData = import.meta.glob('../../../themes/*', {
   import: 'default',
   eager: !isDev,
-}) as Record<string, any>
+}) as Record<string, () => Promise<string>>
 
 export let Icon = component$<IconProps>(({ light, id }) => {
   let icon = useSignal<string | null>(null)
@@ -34,15 +36,15 @@ export let Icon = component$<IconProps>(({ light, id }) => {
       themeType.value === 'light' && light ? '-light' : ''
     }.svg`
 
-    let svgValue = isDev
-      ? await metaGlobIcons[iconPath]()
-      : metaGlobIcons[iconPath]
+    let svgValue = (
+      isDev ? await metaGlobIcons[iconPath]() : metaGlobIcons[iconPath]
+    ) as string
 
     let themeDataPath = `../../../themes/${theme.value}.json`
 
-    let themeData = isDev
+    let themeData = (isDev
       ? await metaGlobThemeData[themeDataPath]()
-      : metaGlobThemeData[themeDataPath]
+      : metaGlobThemeData[themeDataPath]) as unknown as ThemeData
 
     icon.value = await colorize(id, themeData, svgValue)
   })

docs/elements/theme-dropdown/index.tsx

@@ -1,10 +1,11 @@
+import type { NoSerialize } from '@builder.io/qwik'
 import type { FocusTrap } from 'focus-trap'
 
 import {
-  useVisibleTask$,
   component$,
   useContext,
   useSignal,
+  useTask$,
   $,
 } from '@builder.io/qwik'
 import { createFocusTrap } from 'focus-trap'
@@ -14,32 +15,38 @@ import { ThemeContext } from '../theme'
 import styles from './index.module.css'
 
 interface ThemeDropdownProps {
-  close: () => void
+  close: NoSerialize<() => void>
 }
 
 export let ThemeDropdown = component$<ThemeDropdownProps>(({ close }) => {
-  let ref = useSignal<HTMLDivElement | undefined>(undefined)
+  let reference = useSignal<HTMLDivElement | undefined>()
   let theme = useContext(ThemeContext)
-  let setTheme$ = $((themeValue: string) => {
+
+  let setTheme$ = $((themeValue: string): void => {
     theme.value = themeValue
-    close()
+    close?.()
   })
 
-  useVisibleTask$(() => {
+  useTask$(({ track }) => {
+    track(() => reference.value)
+
     let focusTrap: FocusTrap | null = null
-    if (ref.value) {
-      focusTrap = createFocusTrap(ref.value, {
+    if (reference.value) {
+      focusTrap = createFocusTrap(reference.value, {
         returnFocusOnDeactivate: false,
         allowOutsideClick: true,
       })
     }
-    let handleEscape = (event: KeyboardEvent) => {
+
+    let handleEscape = (event: KeyboardEvent): void => {
       if (event.key === 'Escape') {
-        close()
+        close?.()
       }
     }
+
     document.addEventListener('keydown', handleEscape)
     focusTrap?.activate()
+
     return () => {
       focusTrap?.deactivate()
       document.removeEventListener('keydown', handleEscape)
@@ -52,12 +59,12 @@ export let ThemeDropdown = component$<ThemeDropdownProps>(({ close }) => {
         '--total': themes.length,
       }}
       class={styles.dropdown}
-      ref={ref}
+      ref={reference}
     >
       {themes.map(({ name, id }) => (
         <button
-          onClick$={() => {
-            setTheme$(id)
+          onClick$={async () => {
+            await setTheme$(id)
           }}
           class={styles['dropdown-item']}
           data-umami-event="Select Theme"

docs/elements/theme-select/index.tsx

@@ -1,3 +1,5 @@
+import type { NoSerialize } from '@builder.io/qwik'
+
 import { component$, useContext, useSignal, $ } from '@builder.io/qwik'
 
 import { useClickOutside } from '../../hooks/use-click-outside'
@@ -9,15 +11,15 @@ import { Label } from '../label'
 
 export let ThemeSelect = component$(() => {
   let dropdownVisible = useSignal(false)
-  let ref = useSignal<HTMLDivElement | undefined>(undefined)
+  let reference = useSignal<HTMLDivElement | undefined>()
   let theme = useContext(ThemeContext)
   let closeDropdown = $(() => {
     dropdownVisible.value = false
   })
-  useClickOutside(ref, closeDropdown)
+  useClickOutside(reference, closeDropdown)
 
   return (
-    <div class={styles.wrapper} ref={ref}>
+    <div class={styles.wrapper} ref={reference}>
       <Label for="theme">Select Theme:</Label>
       <div class={styles['input-wrapper']}>
         <button
@@ -44,7 +46,11 @@ export let ThemeSelect = component$(() => {
           />
         </svg>
       </div>
-      {dropdownVisible.value && <ThemeDropdown close={closeDropdown} />}
+      {dropdownVisible.value && (
+        <ThemeDropdown
+          close={closeDropdown as unknown as NoSerialize<() => void>}
+        />
+      )}
     </div>
   )
 })

docs/elements/theme/index.tsx

@@ -9,38 +9,39 @@ import {
   Slot,
 } from '@builder.io/qwik'
 
-import { updateThemeCSSVars } from '../../utils/update-css-vars'
+import type { Arguments as ThemeArguments } from '../../utils/update-css-variables'
+import type { Theme as ThemeType } from '../../typings'
+
+import { updateThemeCSSVariables } from '../../utils/update-css-variables'
 
 export let ThemeContext = createContextId<Signal<string>>('docs.theme-context')
 
 export let ThemeTypeContext = createContextId<Signal<string>>(
   'docs.theme-type-context',
 )
 
-export let ThemeSourceContext = createContextId<Signal<Object | null>>(
+export let ThemeSourceContext = createContextId<Signal<ThemeType | null>>(
   'docs.theme-source-context',
 )
 
 export let Theme = component$(() => {
   let theme = useSignal('nord')
   let themeType = useSignal<'light' | 'dark'>('dark')
-  let themeSource = useSignal<Record<'colors', Record<string, string>> | null>(
-    null,
-  )
+  let themeSource = useSignal<ThemeType | null>(null)
 
   useContextProvider(ThemeContext, theme)
   useContextProvider(ThemeTypeContext, themeType)
   useContextProvider(ThemeSourceContext, themeSource)
 
-  useVisibleTask$(async ({ track }) => {
+  useVisibleTask$(({ track }) => {
     track(() => themeSource.value)
     track(() => themeType.value)
 
     if (themeSource.value) {
-      updateThemeCSSVars({
+      updateThemeCSSVariables({
         themeType: themeType.value,
         ...themeSource.value,
-      })
+      } as unknown as ThemeArguments)
     }
   })