move to SSG adapter (#941)

* allow people to pass handlers to modal close

* moving to the static adapter

* 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]>

* fix(website): click on copy code

---------

Co-authored-by: jack shelton <[email protected]>
Co-authored-by: Jack Shelton <[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>

Author: 4 people

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/cloudflare-pages/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/adapters/static/vite.config.ts

@@ -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/project.json

@@ -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,32 @@ 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 ({ track }) => {
+      track(() => code);
+      await addShiki$();
     });
 
     return (

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

@@ -105,5 +105,10 @@ export default defineConfig(async () => {
         'Cache-Control': 'public, max-age=600',
       },
     },
+    optimizeDeps: {
+      // Put problematic deps that break bundling here, mostly those with binaries.
+      // For example ['better-sqlite3'] if you use that in server functions.
+      exclude: ['shiki'],
+    },
   };
 });