Preview (#940)

* chore(website): bump to qwik 1.7.3 + entry files output (#926)

* Revert-new-sw (#927)

* Revert "change to new sw impl"

This reverts commit 3081504.

* chore(website): charSet -> charset in root.tsx

* Remove-import-meta-glob-eager-true (#928)

* chore(website): remove import.meta.glob eager true

* chore(website): comment out vite config trick to se chunk names

* chore(pkg.pr.new): remove 0.0.9 flag (#921)

* chore(qwik-themes): move code internally + signal implementation (#922)

* chore(qwik-themes): move code internally under _state folder

* chore(themes): linting

* fix(themes): use signals instead of stores

* chore(themes provider): useVisibleTask to useOnWindow

* chore(themes): move to qwik-ui/themes

* Tooltip Beta (#934)

* feat(tooltip): implement tooltip to beta phase

* fix(tooltip): small tweaks to the tooltip state

* fix: remove animations form tooltip docs and fix placement example

* feat(tooltip): implement onOpenChange$

* chore: fix changeset type

* test: update placement test to remove loop

* fix: remove breaking examples and tooltip route

* fix: checkbox tests preventing us from opening pw

* refactor: deprecate popover hover prop in favor of tooltip

* latest

---------

Co-authored-by: Christopher Woolum <[email protected]>

* fix: comment out bundle issue when changing user pref (#935)

* chore(website): disable qwikVite linter to speed up preview and builds (#936)

* Inline comp docs (#931)

* allow people to pass handlers to modal close

* docs: improve contributor guide

* docs: mention inline components

* add utils changeset (#937)

* Version Packages (#917)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore(/themes): turn visible task to strategy:document-idle (#938)

* chore(/themes): turn visible task to strategy:document-idle

* fix(themes): add timeout to themeSig assignment to localstorage

* fix(themes): augment timeout to themeSig assignment to localstorage

* fix(website): remove js execution on load by assigning themes sig on click (#939)

* feat: static adapter

* use improved shiki node version now that we're on static

---------

Co-authored-by: Maïeul <[email protected]>
Co-authored-by: Christopher Woolum <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: maiieul <[email protected]>

Author: 4 people

.changeset/slow-jokes-sleep.md

@@ -40,6 +40,6 @@ jobs:
         with:
           node_version: 20
       - run: pnpm release.prepare --parallel=false
-      - run: pnpm dlx pkg-pr-new@^0.0.9 publish --pnpm ./dist/packages/kit-headless ./dist/packages/kit-styled ./dist/packages/cli ./dist/packages/utils
+      - run: pnpm dlx pkg-pr-new publish --pnpm ./dist/packages/kit-headless ./dist/packages/kit-styled ./dist/packages/cli ./dist/packages/utils
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GITHUB_TOKEN is provided automatically in any repository

.github/workflows/test.yml

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { isDev } from '@builder.io/qwik/build';
 
 // The below `/src/routes/docs/**/**/examples/*.tsx` patterns are here so that import.meta.glob works both for styled and headless routes.
 // For example:
@@ -11,7 +10,6 @@ function createMetaGlobComponents() {
     '../../../../website/src/routes/docs/**/**/examples/*.tsx',
     {
       import: 'default',
-      eager: isDev ? false : true,
     },
   );
 

apps/component-tests/src/components/showcase-test/component-imports.ts

@@ -49,6 +49,6 @@ export const statusByComponent: ComponentKitsStatuses = {
     Select: ComponentStatus.Beta,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
-    Tooltip: ComponentStatus.Draft,
+    Tooltip: ComponentStatus.Beta,
   },
 };

apps/website/src/_state/component-statuses.ts

@@ -1,6 +1,5 @@
 import { PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
 import { useLocation } from '@builder.io/qwik-city';
-import { isDev } from '@builder.io/qwik/build';
 import { Highlight } from '../highlight/highlight';
 
 // The below `/src/routes/docs/**/**/snippets/*.tsx` pattern is here so that import.meta.glob works both for styled and headless routes.
@@ -12,7 +11,6 @@ import { Highlight } from '../highlight/highlight';
 const codeSnippets: any = import.meta.glob('/src/routes/docs/**/**/snippets/*', {
   query: '?raw',
   import: 'default',
-  eager: isDev ? false : true,
 });
 
 type CodeSnippetProps = PropsOf<'div'> & {
@@ -30,9 +28,7 @@ export const CodeSnippet = component$<CodeSnippetProps>(({ name }) => {
   const codeSnippetSig = useSignal<string>();
 
   useTask$(async () => {
-    codeSnippetSig.value = isDev
-      ? await codeSnippets[snippetPath]() // We need to call `await codeSnippets[snippetPath]()` in development as it is `eager:false`
-      : codeSnippets[snippetPath]; // We need to directly access the `codeSnippets[snippetPath]` expression in preview/production as it is `eager:true`
+    codeSnippetSig.value = await codeSnippets[snippetPath](); // We need to call `await codeSnippets[snippetPath]()` in development as it is `eager:false`
   });
 
   return (

apps/website/src/components/code-snippet/code-snippet.tsx

@@ -3,7 +3,7 @@ import { Modal } from '@qwik-ui/headless';
 import { Button } from '~/components/ui';
 import { extractThemeCSS } from '@qwik-ui/utils';
 import { LuX } from '@qwikest/icons/lucide';
-import { useTheme } from 'qwik-themes';
+import { useTheme } from '@qwik-ui/themes';
 import globalCSS from '~/global.css?raw';
 import { Highlight } from '../highlight/highlight';
 
@@ -12,16 +12,17 @@ export default component$(() => {
 
   const cssThemeOutput = useSignal<string>('');
 
-  const { theme } = useTheme();
+  const { themeSig, defaultTheme, storageKey } = useTheme();
 
   return (
     <Modal.Root bind:show={showSig}>
       <Button
         onClick$={() => {
+          themeSig.value = localStorage.getItem(storageKey) ?? defaultTheme;
           cssThemeOutput.value = extractThemeCSS(
-            theme === 'dark' || theme === 'light'
+            themeSig.value === 'dark' || themeSig.value === 'light'
               ? 'border-radius-0 simple primary-cyan-600 light base-slate'
-              : theme,
+              : themeSig.value,
             globalCSS,
           );
           showSig.value = true;

apps/website/src/components/copy-css-config/copy-css-config.tsx

@@ -20,7 +20,8 @@ import { MoonIcon } from '../icons/MoonIcon';
 import { SunIcon } from '../icons/SunIcon';
 import { LogoIcon, LogoWithBorders } from '../icons/logo';
 
-import { useTheme } from 'qwik-themes';
+import { useTheme } from '@qwik-ui/themes';
+
 import { Modal } from '@qwik-ui/headless';
 import { useAppState } from '~/_state/use-app-state';
 import { LuX } from '@qwikest/icons/lucide';
@@ -126,13 +127,13 @@ export default component$(({ showVersion = false }: HeaderProps) => {
     }
   });
 
-  const { theme } = useTheme();
+  const { themeSig } = useTheme();
 
   return (
     <Modal.Root
       class={cn(
         'sticky top-0 z-10 flex h-16 justify-center border-b bg-background',
-        theme?.includes('brutalist') && 'border-b-2',
+        themeSig.value?.includes('brutalist') && 'border-b-2',
       )}
       bind:show={isSidebarOpenedSig}
     >
@@ -219,7 +220,7 @@ export default component$(({ showVersion = false }: HeaderProps) => {
 });
 
 const DarkModeToggle = component$<PropsOf<typeof Button>>(({ ...props }) => {
-  const { theme, setTheme } = useTheme();
+  const { themeSig } = useTheme();
   const switchLightDark = $((input: string | string[]): string | string[] | undefined => {
     const switchWord = (word: string): string =>
       word.includes('light')
@@ -237,7 +238,9 @@ const DarkModeToggle = component$<PropsOf<typeof Button>>(({ ...props }) => {
       aria-label="Toggle dark mode"
       size="icon"
       look="ghost"
-      onClick$={async () => setTheme(await switchLightDark(theme || 'light'))}
+      onClick$={async () =>
+        (themeSig.value = await switchLightDark(themeSig.value || 'light'))
+      }
     >
       <div class="hidden dark:block">
         <MoonIcon />

apps/website/src/components/header/header.tsx

@@ -1,23 +1,12 @@
-import { ClassList, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import { ClassList, PropsOf, component$, useSignal, useTask$, $ } from '@builder.io/qwik';
 import { CodeCopy } from '../code-copy/code-copy';
 import { cn } from '@qwik-ui/utils';
-import poimandres from 'shiki/themes/poimandres.mjs';
-import html from 'shiki/langs/html.mjs';
-import css from 'shiki/langs/css.mjs';
-import tsx from 'shiki/langs/tsx.mjs';
-import { createHighlighterCore, BundledLanguage } from 'shiki/index.mjs';
-
-// Create a single highlighter instance
-const highlighterPromise = createHighlighterCore({
-  themes: [poimandres],
-  langs: [html, css, tsx],
-  loadWasm: import('shiki/wasm'),
-});
+import { codeToHtml } from 'shiki';
 
 export type HighlightProps = PropsOf<'div'> & {
   code: string;
   copyCodeClass?: ClassList;
-  language?: BundledLanguage;
+  language?: 'tsx' | 'html' | 'css';
   splitCommentStart?: string;
   splitCommentEnd?: string;
 };
@@ -33,26 +22,31 @@ export const Highlight = component$(
   }: HighlightProps) => {
     const codeSig = useSignal('');
 
-    useTask$(async ({ track }) => {
-      track(() => code);
+    const addShiki$ = $(async () => {
       let modifiedCode: string = code;
 
       let partsOfCode = modifiedCode.split(splitCommentStart);
+
       if (partsOfCode.length > 1) {
         modifiedCode = partsOfCode[1];
       }
 
       partsOfCode = modifiedCode.split(splitCommentEnd);
+
       if (partsOfCode.length > 1) {
         modifiedCode = partsOfCode[0];
       }
 
-      const highlighter = await highlighterPromise;
-      const str = highlighter.codeToHtml(modifiedCode, {
+      const str = await codeToHtml(modifiedCode, {
         lang: language,
         theme: 'poimandres',
       });
-      codeSig.value = str;
+
+      codeSig.value = str.toString();
+    });
+
+    useTask$(async () => {
+      await addShiki$();
     });
 
     return (

apps/website/src/components/highlight/highlight.tsx

@@ -1,6 +1,6 @@
 import { PropsOf, component$ } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
-import { useTheme } from 'qwik-themes';
+import { useTheme } from '@qwik-ui/themes';
 
 export const Logo = component$<PropsOf<'svg'>>(({ ...props }) => {
   return (
@@ -57,7 +57,7 @@ export const Logo = component$<PropsOf<'svg'>>(({ ...props }) => {
 });
 
 export const LogoWithBorders = component$<PropsOf<'svg'>>(({ ...props }) => {
-  const { theme } = useTheme();
+  const { themeSig } = useTheme();
   return (
     <svg
       {...props}
@@ -72,7 +72,7 @@ export const LogoWithBorders = component$<PropsOf<'svg'>>(({ ...props }) => {
       clip-rule="evenodd"
     >
       <g
-        class={cn(theme?.includes('light') ? 'stroke-black' : 'stroke-white')}
+        class={cn(themeSig.value?.includes('light') ? 'stroke-black' : 'stroke-white')}
         stroke-width="8"
         fill="none"
       >
@@ -118,7 +118,7 @@ export const LogoWithBorders = component$<PropsOf<'svg'>>(({ ...props }) => {
 });
 
 export const LogoIcon = component$<PropsOf<'svg'>>(({ ...props }) => {
-  const { theme } = useTheme();
+  const { themeSig } = useTheme();
   return (
     <svg
       {...props}
@@ -129,7 +129,7 @@ export const LogoIcon = component$<PropsOf<'svg'>>(({ ...props }) => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
-        class={cn(theme?.includes('light') ? 'stroke-black' : 'stroke-white')}
+        class={cn(themeSig.value?.includes('light') ? 'stroke-black' : 'stroke-white')}
         stroke-width="8"
         fill="none"
       >

apps/website/src/components/icons/logo.tsx

@@ -10,7 +10,8 @@ import {
   cn,
 } from '@qwik-ui/utils';
 import { LuSlidersHorizontal, LuX } from '@qwikest/icons/lucide';
-import { useTheme } from 'qwik-themes';
+import { useTheme } from '@qwik-ui/themes';
+
 import { Button, Modal, buttonVariants } from '~/components/ui';
 
 import { useAppState } from '~/_state/use-app-state';
@@ -19,10 +20,10 @@ import CopyCssConfig from '../copy-css-config/copy-css-config';
 export default component$<PropsOf<typeof Button>>(() => {
   const rootStore = useAppState();
 
-  const { theme, setTheme } = useTheme();
+  const { themeSig } = useTheme();
 
   const themeComputedObjectSig = useComputed$((): ThemeConfig => {
-    if (!theme || theme === 'light') {
+    if (!themeSig.value || themeSig.value === 'light') {
       return {
         font: ThemeFonts.SANS,
         mode: ThemeModes.LIGHT,
@@ -33,7 +34,7 @@ export default component$<PropsOf<typeof Button>>(() => {
       };
     }
 
-    if (theme === 'dark') {
+    if (themeSig.value === 'dark') {
       return {
         font: ThemeFonts.SANS,
         mode: ThemeModes.DARK,
@@ -44,7 +45,9 @@ export default component$<PropsOf<typeof Button>>(() => {
       };
     }
 
-    const themeArray = Array.isArray(theme) ? theme : theme.split(' ');
+    const themeArray = Array.isArray(themeSig.value)
+      ? themeSig.value
+      : themeSig.value.split(' ');
     return {
       font: themeArray[0],
       mode: themeArray[1],
@@ -91,7 +94,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                 themeComputedObjectSig.value.font = ThemeFonts.SANS;
               }
               themeComputedObjectSig.value.style = el.value;
-              setTheme(await themeStoreToThemeClasses$());
+              themeSig.value = await themeStoreToThemeClasses$();
             }}
           >
             <option value={'simple'}>Simple</option>
@@ -114,7 +117,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                   onClick$={async () => {
                     themeComputedObjectSig.value.baseColor = baseColor;
 
-                    setTheme(await themeStoreToThemeClasses$());
+                    themeSig.value = await themeStoreToThemeClasses$();
                   }}
                   class={cn(
                     'flex h-3 w-3 items-center justify-center rounded-none',
@@ -165,7 +168,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                     size="icon"
                     onClick$={async () => {
                       themeComputedObjectSig.value.primaryColor = primaryColor;
-                      setTheme(await themeStoreToThemeClasses$());
+                      themeSig.value = await themeStoreToThemeClasses$();
                     }}
                     class={cn(
                       'h-3 w-3 rounded-none',
@@ -182,7 +185,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                       primaryColor === 'primary-zinc-900' ||
                       primaryColor === 'primary-neutral-900' ||
                       primaryColor === 'primary-stone-900') &&
-                    theme?.includes('dark') ? (
+                    themeSig.value?.includes('dark') ? (
                       <span
                         class={cn(
                           'flex h-[10px] w-[10px] shrink-0 rounded-none',
@@ -439,7 +442,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                     look="outline"
                     onClick$={async () => {
                       themeComputedObjectSig.value.borderRadius = borderRadius;
-                      setTheme(await themeStoreToThemeClasses$());
+                      themeSig.value = await themeStoreToThemeClasses$();
                     }}
                     class={cn('w-12', isActive && 'mb-2 border-ring')}
                   >
@@ -462,7 +465,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                 themeComputedObjectSig.value.mode =
                   themeComputedObjectSig.value.mode?.includes('light') ? 'dark' : 'light';
 
-                setTheme(await themeStoreToThemeClasses$());
+                themeSig.value = await themeStoreToThemeClasses$();
               }}
             />
           </div>
@@ -471,7 +474,9 @@ export default component$<PropsOf<typeof Button>>(() => {
         <footer class=" flex w-full justify-between gap-4">
           <Button
             look="ghost"
-            onClick$={() => setTheme(theme?.includes('dark') ? 'dark' : 'light')}
+            onClick$={() => {
+              themeSig.value = themeSig.value?.includes('dark') ? 'dark' : 'light';
+            }}
           >
             Reset
           </Button>