Preview

.github/workflows/test.yml

@@ -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

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

@@ -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/website/README.md

@@ -35,15 +35,15 @@ Inside your project, you'll see the following directory structure:
 Use the `pnpm qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/).
 
 ```shell
-pnpm qwik add # or `yarn qwik add`
+pnpm qwik add # or `pnpm qwik add`
 ```
 
 ## Development
 
 Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
 
 ```shell
-npm start # or `yarn start`
+npm start # or `pnpm start`
 ```
 
 > Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
@@ -53,13 +53,19 @@ npm start # or `yarn start`
 The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.
 
 ```shell
-pnpm preview # or `yarn preview`
+pnpm preview # or `pnpm preview`
 ```
 
 ## Production
 
 The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.
 
 ```shell
-pnpm build # or `yarn build`
+pnpm build # or `pnpm build`
+```
+
+## Static Site Generator (Node.js)
+
+```shell
+pnpm build.server
 ```

apps/website/adapters/static/vite.config.ts

@@ -0,0 +1,19 @@
+import { staticAdapter } from '@builder.io/qwik-city/adapters/static/vite';
+import { extendConfig } from '@builder.io/qwik-city/vite';
+import baseConfig from '../../vite.config';
+
+export default extendConfig(baseConfig, () => {
+  return {
+    build: {
+      ssr: true,
+      rollupOptions: {
+        input: ['@qwik-city-plan'],
+      },
+    },
+    plugins: [
+      staticAdapter({
+        origin: 'https://qwikui.com',
+      }),
+    ],
+  };
+});

apps/website/project.json

@@ -47,7 +47,7 @@
           "mode": "production"
         },
         "production": {
-          "configFile": "apps/website/adapters/cloudflare-pages/vite.config.ts"
+          "configFile": "apps/website/adapters/static/vite.config.ts"
         }
       },
       "dependsOn": []

apps/website/src/_state/component-statuses.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/components/code-snippet/code-snippet.tsx

@@ -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/copy-css-config/copy-css-config.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/header/header.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/highlight/highlight.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/icons/logo.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"
       >