From f79f7155c8320b875ae14abea033150796312e44 Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Fri, 12 Aug 2022 20:31:20 +0800
Subject: [PATCH 01/25] fix: add algolia quick demo

---
 packages/docs/algolia.json                    | 16 ++++++++++
 packages/docs/src/components/body/body.tsx    |  1 +
 packages/docs/src/components/head/head.tsx    |  2 ++
 .../docs/src/components/header/header.tsx     | 29 ++++++++++++++++--
 packages/docs/src/routes/sitemap.xml/index.ts | 30 +++++++++++++++++++
 5 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 packages/docs/algolia.json
 create mode 100644 packages/docs/src/routes/sitemap.xml/index.ts

diff --git a/packages/docs/algolia.json b/packages/docs/algolia.json
new file mode 100644
index 00000000000..5c50c261ee4
--- /dev/null
+++ b/packages/docs/algolia.json
@@ -0,0 +1,16 @@
+{
+  "index_name": "docsearch-legacy",
+  "sitemap_urls": ["http://host.docker.internal:3000/sitemap.xml"],
+  "selectors": {
+    "lvl0": {
+      "selector": "header a.active",
+      "global": true
+    },
+    "lvl1": "main article h1",
+    "lvl2": "main article h2",
+    "lvl3": "main article h3",
+    "lvl4": "main article h4",
+    "lvl5": "main article h5",
+    "text": "main article p,main article li,main article td"
+  }
+}
\ No newline at end of file
diff --git a/packages/docs/src/components/body/body.tsx b/packages/docs/src/components/body/body.tsx
index 81b321759d5..f2b469ba181 100644
--- a/packages/docs/src/components/body/body.tsx
+++ b/packages/docs/src/components/body/body.tsx
@@ -17,6 +17,7 @@ export const Body = component$(() => {
       }}
     >
       <Content />
+      <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
     </body>
   );
 });
diff --git a/packages/docs/src/components/head/head.tsx b/packages/docs/src/components/head/head.tsx
index 944ae5f19e0..0b23018b5ec 100644
--- a/packages/docs/src/components/head/head.tsx
+++ b/packages/docs/src/components/head/head.tsx
@@ -15,6 +15,7 @@ export const Head = component$(() => {
       <title>{head.title ? `${head.title} - Qwik` : `Qwik`}</title>
       <link rel="canonical" href={loc.href} />
       <meta name="viewport" content="width=device-width" />
+      {/* <link rel="preconnect" href="https://YOUR_APP_ID-dsn.algolia.net" crossorigin /> */}
 
       <Manifest />
       <Social loc={loc} head={head} />
@@ -31,6 +32,7 @@ export const Head = component$(() => {
       {head.styles.map((s) => (
         <style {...s.props} dangerouslySetInnerHTML={s.style} />
       ))}
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
     </head>
   );
 });
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 001c7e8039f..0a6c84ae364 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -1,4 +1,5 @@
-import { component$, $, useStyles$, useContext } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
+import { component$, $, useStyles$, useContext, useClientEffect$ } from '@builder.io/qwik';
 import { CloseIcon } from '../svgs/close-icon';
 import { DiscordLogo } from '../svgs/discord-logo';
 import { GithubLogo } from '../svgs/github-logo';
@@ -11,6 +12,25 @@ import { GlobalStore } from '../../context';
 export const Header = component$(() => {
   useStyles$(styles);
   const globalStore = useContext(GlobalStore);
+  const pathname = useLocation().pathname;
+
+  useClientEffect$(() => {
+    // @ts-ignore
+    window.docsearch({
+      container: '#docsearch',
+      appId: 'EGKUXMJIF5',
+      indexName: 'docsearch-legacy',
+      apiKey: 'f33b1a3676a3ee83ed7c133203a7e762',
+      transformItems(items: any[]) {
+        console.log(items)
+        return items.map(item => ({
+          ...item,
+          url: item.url?.replace('http://host.docker.internal:3000', window.origin)
+        }))
+      }
+    })
+  });
+
 
   const toggleMenu = $(() => {
     globalStore.headerMenuOpen = !globalStore.headerMenuOpen;
@@ -39,12 +59,15 @@ export const Header = component$(() => {
         </button>
         <ul className="md:grow md:flex md:justify-end md:p-4 menu-toolkit">
           <li>
-            <a href="/docs/overview" onClick$={closeMenu}>
+            <div id="docsearch"></div>
+          </li>
+          <li>
+            <a href="/docs/overview"  class={{ active: pathname.startsWith('/docs') }} onClick$={closeMenu}>
               <span>Docs</span>
             </a>
           </li>
           <li>
-            <a href="/qwikcity/overview" onClick$={closeMenu}>
+            <a href="/qwikcity/overview"  class={{ active: pathname.startsWith('/qwikcity') }} onClick$={closeMenu}>
               <span>Qwik City</span>
             </a>
           </li>
diff --git a/packages/docs/src/routes/sitemap.xml/index.ts b/packages/docs/src/routes/sitemap.xml/index.ts
new file mode 100644
index 00000000000..e052adfbc19
--- /dev/null
+++ b/packages/docs/src/routes/sitemap.xml/index.ts
@@ -0,0 +1,30 @@
+import type { RequestHandler } from '@builder.io/qwik-city';
+import cityPlan from '@qwik-city-plan';
+
+export const onGet: RequestHandler = ({ response }) => {
+  response.headers.set(
+    'Content-Type', 'application/xml',
+  );
+  const { routes = [] } = cityPlan
+  const pages = routes.map(([pattern]) => {
+    return pattern.source.split('\\/')
+      .filter(pathLike => ['^', '?$', '$'].indexOf(pathLike) < 0)
+      .join('/')
+  })
+    // can't deal with dynamic routes for now, currently just for testing docs search crawler
+    .filter(path => path.startsWith('docs') || path.startsWith('qwikcity'))
+
+  return `<?xml version="1.0" encoding="UTF-8" ?>
+	<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
+		${pages
+			.map(
+				(page) =>
+					`<url>
+			<loc>${website}/${page}</loc>
+		  </url>`
+			)
+			.join('')}
+	</urlset>`
+};
+
+const website = 'http://host.docker.internal:3000'

From 3533f9875207ba1e9fec670c30a157b015fa4142 Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Fri, 12 Aug 2022 20:42:48 +0800
Subject: [PATCH 02/25] docs: expaling current aloglia workflow

---
 packages/docs/README.md | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/packages/docs/README.md b/packages/docs/README.md
index 7b0cbce2916..7bc7ec6e27a 100644
--- a/packages/docs/README.md
+++ b/packages/docs/README.md
@@ -59,3 +59,35 @@ Then visit [http://localhost:8787/](http://localhost:8787/)
 If you don't already have an account, then [create a Cloudflare account here](https://dash.cloudflare.com/sign-up/pages). Next go to your dashboard and follow the [Cloudflare Pages deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-anything/).
 
 Within the projects "Settings" for "Build and deployments", the "Build command" should be `npm run build`, and the "Build output directory" should be set to `dist`.
+
+## Algolia search
+
+STILL WIP
+
+resource: https://docsearch.algolia.com/
+
+### crawler
+
+To crawl local server for testing index settings use this command
+
+```bash
+# create apiKey via https://www.algolia.com/account/api-keys
+touch .env
+# APPLICATION_ID=APPLICATION_ID
+# API_KEY=API_KEY
+
+docker run -it --rm --env-file=.env -e "CONFIG=$(cat ./packages/docs/algolia.json | jq -r tostring)" algolia/docsearch-scraper
+```
+
+see guide of [DocSearch-legacy docker command](https://docsearch.algolia.com/docs/legacy/run-your-own#run-the-crawl-from-the-docker-image)
+
+> In mac machine, docker container can access host's network, workaround is to use `host.docker.internal`
+
+More recommend way is use https://crawler.algolia.com/
+
+### searchbar
+
+there're two options for now
+
+1. @docsearch/js is react based widget render
+2. qwik implementation base on @algolia/autocomplete-js
\ No newline at end of file

From 3f2a8bdd5ff80ebe5716d5bd32eec38fbbeb4b3d Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Fri, 12 Aug 2022 20:48:17 +0800
Subject: [PATCH 03/25] fix: fmt

---
 packages/docs/README.md                       |  2 +-
 packages/docs/algolia.json                    |  2 +-
 .../docs/src/components/header/header.tsx     | 25 +++++++++-----
 packages/docs/src/routes/sitemap.xml/index.ts | 34 +++++++++----------
 4 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/packages/docs/README.md b/packages/docs/README.md
index 7bc7ec6e27a..a692f2e82c2 100644
--- a/packages/docs/README.md
+++ b/packages/docs/README.md
@@ -90,4 +90,4 @@ More recommend way is use https://crawler.algolia.com/
 there're two options for now
 
 1. @docsearch/js is react based widget render
-2. qwik implementation base on @algolia/autocomplete-js
\ No newline at end of file
+2. qwik implementation base on @algolia/autocomplete-js
diff --git a/packages/docs/algolia.json b/packages/docs/algolia.json
index 5c50c261ee4..4a6a437eb0e 100644
--- a/packages/docs/algolia.json
+++ b/packages/docs/algolia.json
@@ -13,4 +13,4 @@
     "lvl5": "main article h5",
     "text": "main article p,main article li,main article td"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 0a6c84ae364..6dd46f91583 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -22,16 +22,15 @@ export const Header = component$(() => {
       indexName: 'docsearch-legacy',
       apiKey: 'f33b1a3676a3ee83ed7c133203a7e762',
       transformItems(items: any[]) {
-        console.log(items)
-        return items.map(item => ({
+        console.log(items);
+        return items.map((item) => ({
           ...item,
-          url: item.url?.replace('http://host.docker.internal:3000', window.origin)
-        }))
-      }
-    })
+          url: item.url?.replace('http://host.docker.internal:3000', window.origin),
+        }));
+      },
+    });
   });
 
-
   const toggleMenu = $(() => {
     globalStore.headerMenuOpen = !globalStore.headerMenuOpen;
   });
@@ -62,12 +61,20 @@ export const Header = component$(() => {
             <div id="docsearch"></div>
           </li>
           <li>
-            <a href="/docs/overview"  class={{ active: pathname.startsWith('/docs') }} onClick$={closeMenu}>
+            <a
+              href="/docs/overview"
+              class={{ active: pathname.startsWith('/docs') }}
+              onClick$={closeMenu}
+            >
               <span>Docs</span>
             </a>
           </li>
           <li>
-            <a href="/qwikcity/overview"  class={{ active: pathname.startsWith('/qwikcity') }} onClick$={closeMenu}>
+            <a
+              href="/qwikcity/overview"
+              class={{ active: pathname.startsWith('/qwikcity') }}
+              onClick$={closeMenu}
+            >
               <span>Qwik City</span>
             </a>
           </li>
diff --git a/packages/docs/src/routes/sitemap.xml/index.ts b/packages/docs/src/routes/sitemap.xml/index.ts
index e052adfbc19..9c18d01bf9f 100644
--- a/packages/docs/src/routes/sitemap.xml/index.ts
+++ b/packages/docs/src/routes/sitemap.xml/index.ts
@@ -2,29 +2,29 @@ import type { RequestHandler } from '@builder.io/qwik-city';
 import cityPlan from '@qwik-city-plan';
 
 export const onGet: RequestHandler = ({ response }) => {
-  response.headers.set(
-    'Content-Type', 'application/xml',
-  );
-  const { routes = [] } = cityPlan
-  const pages = routes.map(([pattern]) => {
-    return pattern.source.split('\\/')
-      .filter(pathLike => ['^', '?$', '$'].indexOf(pathLike) < 0)
-      .join('/')
-  })
+  response.headers.set('Content-Type', 'application/xml');
+  const { routes = [] } = cityPlan;
+  const pages = routes
+    .map(([pattern]) => {
+      return pattern.source
+        .split('\\/')
+        .filter((pathLike) => ['^', '?$', '$'].indexOf(pathLike) < 0)
+        .join('/');
+    })
     // can't deal with dynamic routes for now, currently just for testing docs search crawler
-    .filter(path => path.startsWith('docs') || path.startsWith('qwikcity'))
+    .filter((path) => path.startsWith('docs') || path.startsWith('qwikcity'));
 
   return `<?xml version="1.0" encoding="UTF-8" ?>
 	<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
 		${pages
-			.map(
-				(page) =>
-					`<url>
+      .map(
+        (page) =>
+          `<url>
 			<loc>${website}/${page}</loc>
 		  </url>`
-			)
-			.join('')}
-	</urlset>`
+      )
+      .join('')}
+	</urlset>`;
 };
 
-const website = 'http://host.docker.internal:3000'
+const website = 'http://host.docker.internal:3000';

From ba3f77a56dc3cef5c729f0c3c84f4569261fe575 Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Fri, 12 Aug 2022 20:48:55 +0800
Subject: [PATCH 04/25] fix: rm console

---
 packages/docs/src/components/header/header.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 6dd46f91583..728c3a0020e 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -22,7 +22,6 @@ export const Header = component$(() => {
       indexName: 'docsearch-legacy',
       apiKey: 'f33b1a3676a3ee83ed7c133203a7e762',
       transformItems(items: any[]) {
-        console.log(items);
         return items.map((item) => ({
           ...item,
           url: item.url?.replace('http://host.docker.internal:3000', window.origin),

From f593238b0bb4f98c8010fe41951108b30c21a89f Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Fri, 12 Aug 2022 23:33:36 +0800
Subject: [PATCH 05/25] fix: move env file

---
 packages/docs/.env                            |  2 +
 packages/docs/README.md                       |  6 +--
 packages/docs/src/components/head/head.tsx    |  1 -
 .../docs/src/components/header/header.css     | 25 ++++++++++++-
 .../docs/src/components/header/header.tsx     | 25 ++-----------
 .../docs/src/components/header/search.tsx     | 37 +++++++++++++++++++
 packages/docs/src/routes/robot.txt/index.ts   |  8 ++++
 packages/docs/src/routes/sitemap.xml/index.ts |  8 ++--
 8 files changed, 80 insertions(+), 32 deletions(-)
 create mode 100644 packages/docs/.env
 create mode 100644 packages/docs/src/components/header/search.tsx
 create mode 100644 packages/docs/src/routes/robot.txt/index.ts

diff --git a/packages/docs/.env b/packages/docs/.env
new file mode 100644
index 00000000000..a39ce0a6a4f
--- /dev/null
+++ b/packages/docs/.env
@@ -0,0 +1,2 @@
+VITE_ALGOLIA_APP_ID=EGKUXMJIF5
+VITE_ALGOLIA_SEARCH_KEY=f33b1a3676a3ee83ed7c133203a7e762
\ No newline at end of file
diff --git a/packages/docs/README.md b/packages/docs/README.md
index a692f2e82c2..7132f88822a 100644
--- a/packages/docs/README.md
+++ b/packages/docs/README.md
@@ -66,7 +66,7 @@ STILL WIP
 
 resource: https://docsearch.algolia.com/
 
-### crawler
+### Crawler
 
 To crawl local server for testing index settings use this command
 
@@ -85,9 +85,9 @@ see guide of [DocSearch-legacy docker command](https://docsearch.algolia.com/doc
 
 More recommend way is use https://crawler.algolia.com/
 
-### searchbar
+### Search UI
 
 there're two options for now
 
-1. @docsearch/js is react based widget render
+1. @docsearch/js is react based render of autocomplete
 2. qwik implementation base on @algolia/autocomplete-js
diff --git a/packages/docs/src/components/head/head.tsx b/packages/docs/src/components/head/head.tsx
index 0b23018b5ec..ea184f1009e 100644
--- a/packages/docs/src/components/head/head.tsx
+++ b/packages/docs/src/components/head/head.tsx
@@ -15,7 +15,6 @@ export const Head = component$(() => {
       <title>{head.title ? `${head.title} - Qwik` : `Qwik`}</title>
       <link rel="canonical" href={loc.href} />
       <meta name="viewport" content="width=device-width" />
-      {/* <link rel="preconnect" href="https://YOUR_APP_ID-dsn.algolia.net" crossorigin /> */}
 
       <Manifest />
       <Social loc={loc} head={head} />
diff --git a/packages/docs/src/components/header/header.css b/packages/docs/src/components/header/header.css
index aad35ad6bad..d00921b85d9 100644
--- a/packages/docs/src/components/header/header.css
+++ b/packages/docs/src/components/header/header.css
@@ -1,4 +1,4 @@
-header {
+.header-container {
   height: calc(var(--header-height));
   margin-bottom: 6px;
   color: white;
@@ -68,6 +68,7 @@ header .header-inner {
   max-width: 1400px;
   margin-left: auto;
   margin-right: auto;
+  position: relative;
 }
 
 .full-width header .header-inner {
@@ -76,11 +77,31 @@ header .header-inner {
 
 header .header-logo {
   position: absolute;
-  top: 5px;
+  top: 0;
+  bottom: 0;
   left: max(0px, calc(50% - 45rem));
   padding-left: 1rem;
+  display: flex;
+  align-items: center;
 }
 
 .full-width header .header-logo {
   left: 0;
 }
+
+#docsearch {
+  --docsearch-searchbox-background: rgba(247, 248, 250, 1);
+  --docsearch-searchbox-focus-background: rgba(247, 248, 250, 1);
+  --docsearch-text-color: var(--docsearch-muted-color);
+}
+
+/* to override global.css */
+#docsearch button {
+  background-color: var(--docsearch-searchbox-background);
+}
+
+@media (max-width: 996px) {
+  #docsearch {
+    display: none;
+  }
+}
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 728c3a0020e..6a25c81fc49 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -1,5 +1,5 @@
 import { useLocation } from '@builder.io/qwik-city';
-import { component$, $, useStyles$, useContext, useClientEffect$ } from '@builder.io/qwik';
+import { component$, $, useStyles$, useContext } from '@builder.io/qwik';
 import { CloseIcon } from '../svgs/close-icon';
 import { DiscordLogo } from '../svgs/discord-logo';
 import { GithubLogo } from '../svgs/github-logo';
@@ -8,28 +8,13 @@ import { QwikLogo } from '../svgs/qwik-logo';
 import { TwitterLogo } from '../svgs/twitter-logo';
 import styles from './header.css?inline';
 import { GlobalStore } from '../../context';
+import { Search } from './search';
 
 export const Header = component$(() => {
   useStyles$(styles);
   const globalStore = useContext(GlobalStore);
   const pathname = useLocation().pathname;
 
-  useClientEffect$(() => {
-    // @ts-ignore
-    window.docsearch({
-      container: '#docsearch',
-      appId: 'EGKUXMJIF5',
-      indexName: 'docsearch-legacy',
-      apiKey: 'f33b1a3676a3ee83ed7c133203a7e762',
-      transformItems(items: any[]) {
-        return items.map((item) => ({
-          ...item,
-          url: item.url?.replace('http://host.docker.internal:3000', window.origin),
-        }));
-      },
-    });
-  });
-
   const toggleMenu = $(() => {
     globalStore.headerMenuOpen = !globalStore.headerMenuOpen;
   });
@@ -39,13 +24,14 @@ export const Header = component$(() => {
   });
 
   return (
-    <header>
+    <header class="header-container">
       <div class="header-inner">
         <div class="header-logo">
           <a href="/">
             <span className="sr-only">Qwik Homepage</span>
             <QwikLogo width={110} height={50} />
           </a>
+          <Search />
         </div>
         <button onClick$={toggleMenu} class="mobile-menu" type="button">
           <span class="more-icon">
@@ -56,9 +42,6 @@ export const Header = component$(() => {
           </span>
         </button>
         <ul className="md:grow md:flex md:justify-end md:p-4 menu-toolkit">
-          <li>
-            <div id="docsearch"></div>
-          </li>
           <li>
             <a
               href="/docs/overview"
diff --git a/packages/docs/src/components/header/search.tsx b/packages/docs/src/components/header/search.tsx
new file mode 100644
index 00000000000..f224a49c1db
--- /dev/null
+++ b/packages/docs/src/components/header/search.tsx
@@ -0,0 +1,37 @@
+import { component$, useClientEffect$ } from "@builder.io/qwik";
+
+export const Search = component$(() => {
+  // const head  = useDocumentHead()
+  const appId = import.meta.env.VITE_ALGOLIA_APP_ID
+  useClientEffect$(() => {
+    // FIXME: seems not work
+    // head.links.push({
+    //   rel: 'preconnect',
+    //   href: `https://${appId.toLowerCase()}-dsn.algolia.net`,
+    //   crossorigin: 'true'
+    // })
+    // head.links.push({
+    //   rel: 'stylesheet',
+    //   href: 'https://cdn.jsdelivr.net/npm/@docsearch/css@3',
+    // })
+
+    // @ts-ignore
+    window.docsearch({
+      container: '#docsearch',
+      appId,
+      indexName: 'docsearch-legacy',
+      apiKey: import.meta.env.VITE_ALGOLIA_SEARCH_KEY,
+      transformItems(items: any[]) {
+        return items.map((item) => ({
+          ...item,
+          // TODO: remove this after migrate to algolia crawler
+          url: item.url?.replace('http://host.docker.internal:3000', window.origin),
+        }));
+      },
+    });
+  });
+
+  return (
+    <div id="docsearch"></div>
+  );
+});
\ No newline at end of file
diff --git a/packages/docs/src/routes/robot.txt/index.ts b/packages/docs/src/routes/robot.txt/index.ts
new file mode 100644
index 00000000000..c9c9c2da154
--- /dev/null
+++ b/packages/docs/src/routes/robot.txt/index.ts
@@ -0,0 +1,8 @@
+import type { RequestHandler } from '@builder.io/qwik-city';
+
+export const onGet: RequestHandler = ({ url, response }) => {
+  response.headers.set('Content-Type', 'text/plain');
+  return `User-agent: *
+  Allow: /
+  Sitemap: https://${url.host}/sitemap.xml`
+}
\ No newline at end of file
diff --git a/packages/docs/src/routes/sitemap.xml/index.ts b/packages/docs/src/routes/sitemap.xml/index.ts
index 9c18d01bf9f..fbeb8853b34 100644
--- a/packages/docs/src/routes/sitemap.xml/index.ts
+++ b/packages/docs/src/routes/sitemap.xml/index.ts
@@ -1,7 +1,7 @@
 import type { RequestHandler } from '@builder.io/qwik-city';
 import cityPlan from '@qwik-city-plan';
 
-export const onGet: RequestHandler = ({ response }) => {
+export const onGet: RequestHandler = ({ url, response }) => {
   response.headers.set('Content-Type', 'application/xml');
   const { routes = [] } = cityPlan;
   const pages = routes
@@ -20,11 +20,9 @@ export const onGet: RequestHandler = ({ response }) => {
       .map(
         (page) =>
           `<url>
-			<loc>${website}/${page}</loc>
+			<loc>${url.origin}/${page}</loc>
 		  </url>`
       )
       .join('')}
 	</urlset>`;
-};
-
-const website = 'http://host.docker.internal:3000';
+};
\ No newline at end of file

From 0de9cd0f6f9b09e4512acf0449d1a2a59670ac3e Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Fri, 12 Aug 2022 23:34:31 +0800
Subject: [PATCH 06/25] fix: fmt

---
 packages/docs/src/components/header/search.tsx | 10 ++++------
 packages/docs/src/routes/robot.txt/index.ts    |  4 ++--
 packages/docs/src/routes/sitemap.xml/index.ts  |  2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/docs/src/components/header/search.tsx b/packages/docs/src/components/header/search.tsx
index f224a49c1db..0bb8c60ecba 100644
--- a/packages/docs/src/components/header/search.tsx
+++ b/packages/docs/src/components/header/search.tsx
@@ -1,8 +1,8 @@
-import { component$, useClientEffect$ } from "@builder.io/qwik";
+import { component$, useClientEffect$ } from '@builder.io/qwik';
 
 export const Search = component$(() => {
   // const head  = useDocumentHead()
-  const appId = import.meta.env.VITE_ALGOLIA_APP_ID
+  const appId = import.meta.env.VITE_ALGOLIA_APP_ID;
   useClientEffect$(() => {
     // FIXME: seems not work
     // head.links.push({
@@ -31,7 +31,5 @@ export const Search = component$(() => {
     });
   });
 
-  return (
-    <div id="docsearch"></div>
-  );
-});
\ No newline at end of file
+  return <div id="docsearch"></div>;
+});
diff --git a/packages/docs/src/routes/robot.txt/index.ts b/packages/docs/src/routes/robot.txt/index.ts
index c9c9c2da154..54893d721f7 100644
--- a/packages/docs/src/routes/robot.txt/index.ts
+++ b/packages/docs/src/routes/robot.txt/index.ts
@@ -4,5 +4,5 @@ export const onGet: RequestHandler = ({ url, response }) => {
   response.headers.set('Content-Type', 'text/plain');
   return `User-agent: *
   Allow: /
-  Sitemap: https://${url.host}/sitemap.xml`
-}
\ No newline at end of file
+  Sitemap: https://${url.host}/sitemap.xml`;
+};
diff --git a/packages/docs/src/routes/sitemap.xml/index.ts b/packages/docs/src/routes/sitemap.xml/index.ts
index fbeb8853b34..121669bf60f 100644
--- a/packages/docs/src/routes/sitemap.xml/index.ts
+++ b/packages/docs/src/routes/sitemap.xml/index.ts
@@ -25,4 +25,4 @@ export const onGet: RequestHandler = ({ url, response }) => {
       )
       .join('')}
 	</urlset>`;
-};
\ No newline at end of file
+};

From 16efc58fff816064c3846fe1598d71a52e6b1c92 Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Sat, 13 Aug 2022 09:59:38 +0800
Subject: [PATCH 07/25] fix: logo for mobile stylings

---
 packages/docs/src/components/header/header.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docs/src/components/header/header.css b/packages/docs/src/components/header/header.css
index d00921b85d9..b1be9fbc713 100644
--- a/packages/docs/src/components/header/header.css
+++ b/packages/docs/src/components/header/header.css
@@ -83,6 +83,7 @@ header .header-logo {
   padding-left: 1rem;
   display: flex;
   align-items: center;
+  height: var(--header-height);
 }
 
 .full-width header .header-logo {

From 567054d06648c6619d50bb128343bef24b8393c0 Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Tue, 16 Aug 2022 02:05:48 +0800
Subject: [PATCH 08/25] fix(docs): replace react-docsearch in qwik
 implmentation

---
 packages/docs/package.json                    |  10 +-
 packages/docs/src/components/body/body.tsx    |   1 -
 packages/docs/src/components/head/head.tsx    |   1 -
 .../docs/src/components/header/header.css     |  19 +-
 .../docs/src/components/header/header.tsx     |  16 +-
 .../docs/src/components/header/search.tsx     |  35 ----
 packages/docs/src/global.css                  |   5 +-
 yarn.lock                                     | 198 +++++++++++++++++-
 8 files changed, 219 insertions(+), 66 deletions(-)
 delete mode 100644 packages/docs/src/components/header/search.tsx

diff --git a/packages/docs/package.json b/packages/docs/package.json
index efa2f1e769f..6713dff1d25 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -19,8 +19,8 @@
   },
   "devDependencies": {
     "@builder.io/partytown": "^0.6.4",
-    "@builder.io/qwik": "0.0.100",
-    "@builder.io/qwik-city": "0.0.101",
+    "@builder.io/qwik": "^0.0.100",
+    "@builder.io/qwik-city": "^0.0.101",
     "@cloudflare/kv-asset-handler": "0.2.0",
     "autoprefixer": "10.4.7",
     "fflate": "^0.7.3",
@@ -42,5 +42,9 @@
     "node": ">=16"
   },
   "license": "MIT",
-  "private": true
+  "private": true,
+  "dependencies": {
+    "@docsearch/css": "^3.2.0",
+    "docsearch-qwik": "0.0.1"
+  }
 }
diff --git a/packages/docs/src/components/body/body.tsx b/packages/docs/src/components/body/body.tsx
index f2b469ba181..81b321759d5 100644
--- a/packages/docs/src/components/body/body.tsx
+++ b/packages/docs/src/components/body/body.tsx
@@ -17,7 +17,6 @@ export const Body = component$(() => {
       }}
     >
       <Content />
-      <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
     </body>
   );
 });
diff --git a/packages/docs/src/components/head/head.tsx b/packages/docs/src/components/head/head.tsx
index ea184f1009e..944ae5f19e0 100644
--- a/packages/docs/src/components/head/head.tsx
+++ b/packages/docs/src/components/head/head.tsx
@@ -31,7 +31,6 @@ export const Head = component$(() => {
       {head.styles.map((s) => (
         <style {...s.props} dangerouslySetInnerHTML={s.style} />
       ))}
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
     </head>
   );
 });
diff --git a/packages/docs/src/components/header/header.css b/packages/docs/src/components/header/header.css
index b1be9fbc713..22494c07886 100644
--- a/packages/docs/src/components/header/header.css
+++ b/packages/docs/src/components/header/header.css
@@ -6,7 +6,7 @@
   box-shadow: 0px 2px 5px #0000003d;
 }
 
-.fixed-header header {
+.fixed-header .header-container {
   position: fixed;
   top: 0;
   width: 100%;
@@ -89,20 +89,3 @@ header .header-logo {
 .full-width header .header-logo {
   left: 0;
 }
-
-#docsearch {
-  --docsearch-searchbox-background: rgba(247, 248, 250, 1);
-  --docsearch-searchbox-focus-background: rgba(247, 248, 250, 1);
-  --docsearch-text-color: var(--docsearch-muted-color);
-}
-
-/* to override global.css */
-#docsearch button {
-  background-color: var(--docsearch-searchbox-background);
-}
-
-@media (max-width: 996px) {
-  #docsearch {
-    display: none;
-  }
-}
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 6a25c81fc49..464fccaa232 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -1,5 +1,6 @@
 import { useLocation } from '@builder.io/qwik-city';
 import { component$, $, useStyles$, useContext } from '@builder.io/qwik';
+import { DocSearch } from 'docsearch-qwik';
 import { CloseIcon } from '../svgs/close-icon';
 import { DiscordLogo } from '../svgs/discord-logo';
 import { GithubLogo } from '../svgs/github-logo';
@@ -8,7 +9,6 @@ import { QwikLogo } from '../svgs/qwik-logo';
 import { TwitterLogo } from '../svgs/twitter-logo';
 import styles from './header.css?inline';
 import { GlobalStore } from '../../context';
-import { Search } from './search';
 
 export const Header = component$(() => {
   useStyles$(styles);
@@ -31,7 +31,19 @@ export const Header = component$(() => {
             <span className="sr-only">Qwik Homepage</span>
             <QwikLogo width={110} height={50} />
           </a>
-          <Search />
+          {/*  @ts-ignore */}
+          <DocSearch
+            appId={import.meta.env.VITE_ALGOLIA_APP_ID}
+            apiKey={import.meta.env.VITE_ALGOLIA_SEARCH_KEY}
+            indexName="docsearch-legacy"
+            transformItems$={(items: any[]) => {
+              return items.map((item) => ({
+                ...item,
+                // TODO: remove this after migrate to algolia crawler
+                url: item.url?.replace('http://host.docker.internal:3000', window.origin),
+              }));
+            }}
+          />
         </div>
         <button onClick$={toggleMenu} class="mobile-menu" type="button">
           <span class="more-icon">
diff --git a/packages/docs/src/components/header/search.tsx b/packages/docs/src/components/header/search.tsx
deleted file mode 100644
index 0bb8c60ecba..00000000000
--- a/packages/docs/src/components/header/search.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { component$, useClientEffect$ } from '@builder.io/qwik';
-
-export const Search = component$(() => {
-  // const head  = useDocumentHead()
-  const appId = import.meta.env.VITE_ALGOLIA_APP_ID;
-  useClientEffect$(() => {
-    // FIXME: seems not work
-    // head.links.push({
-    //   rel: 'preconnect',
-    //   href: `https://${appId.toLowerCase()}-dsn.algolia.net`,
-    //   crossorigin: 'true'
-    // })
-    // head.links.push({
-    //   rel: 'stylesheet',
-    //   href: 'https://cdn.jsdelivr.net/npm/@docsearch/css@3',
-    // })
-
-    // @ts-ignore
-    window.docsearch({
-      container: '#docsearch',
-      appId,
-      indexName: 'docsearch-legacy',
-      apiKey: import.meta.env.VITE_ALGOLIA_SEARCH_KEY,
-      transformItems(items: any[]) {
-        return items.map((item) => ({
-          ...item,
-          // TODO: remove this after migrate to algolia crawler
-          url: item.url?.replace('http://host.docker.internal:3000', window.origin),
-        }));
-      },
-    });
-  });
-
-  return <div id="docsearch"></div>;
-});
diff --git a/packages/docs/src/global.css b/packages/docs/src/global.css
index 7661273db28..42a2d2be724 100644
--- a/packages/docs/src/global.css
+++ b/packages/docs/src/global.css
@@ -1,7 +1,8 @@
 @import 'prism-themes/themes/prism-dracula.css';
+@import '@docsearch/css';
 
-code[class*='language-'],
-pre[class*='language-'] {
+code[class *='language-'],
+pre[class *='language-'] {
   font-family: Menlo, Monaco, 'Courier New', monospace;
   font-weight: normal;
   font-size: 12px;
diff --git a/yarn.lock b/yarn.lock
index f210410c352..46bce5780a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,6 +5,154 @@ __metadata:
   version: 6
   cacheKey: 8
 
+"@algolia/autocomplete-core@npm:^1.7.1":
+  version: 1.7.1
+  resolution: "@algolia/autocomplete-core@npm:1.7.1"
+  dependencies:
+    "@algolia/autocomplete-shared": 1.7.1
+  checksum: 511176e9c2a9f2e2be62552e48e72dadfcc6638cda4a2990fd3453aed3ce4e7d8ca1bd6a9ccb912430c77734b00a8b836aaad97facc1987157af4ac00f590f4a
+  languageName: node
+  linkType: hard
+
+"@algolia/autocomplete-shared@npm:1.7.1":
+  version: 1.7.1
+  resolution: "@algolia/autocomplete-shared@npm:1.7.1"
+  checksum: 0e137f1a470fab9b1bc493284b0be9b83503bda8aa37be9726a8fddf4791dccbd28f9eec399a7c75c1eb3196510dac7be454307fc97fbca2999f3fbc30756c28
+  languageName: node
+  linkType: hard
+
+"@algolia/cache-browser-local-storage@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/cache-browser-local-storage@npm:4.14.2"
+  dependencies:
+    "@algolia/cache-common": 4.14.2
+  checksum: e7d5f43ff01df5f21a2b5304b5d8f8ae25f2c6093e83e79556cb78ae07f342111ba77eba633b837b5b74a17293ea6a208acb1ade71782baafa9c2da7d58ee45c
+  languageName: node
+  linkType: hard
+
+"@algolia/cache-common@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/cache-common@npm:4.14.2"
+  checksum: 4fd04c714aee19f6eaaac4ae7e00e914a44473af9a84cf3c4260e436c6ea20f5590e05e9006d963372d84ce57268776811fcb929d79e0415b59d74779bd31ee7
+  languageName: node
+  linkType: hard
+
+"@algolia/cache-in-memory@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/cache-in-memory@npm:4.14.2"
+  dependencies:
+    "@algolia/cache-common": 4.14.2
+  checksum: d6981f812a368a38db21e52c98ec81a5c0eda5d896377f7bdcc04a0be1673ac9e184836d7973065fab84dc947a63fe959586468fc14b9a87e32f916959df6222
+  languageName: node
+  linkType: hard
+
+"@algolia/client-account@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/client-account@npm:4.14.2"
+  dependencies:
+    "@algolia/client-common": 4.14.2
+    "@algolia/client-search": 4.14.2
+    "@algolia/transporter": 4.14.2
+  checksum: 2e9eed5a4b8434775af87899bda8140d51eb2dd0cf08fc49370a4dc9541c220db9b241976dad14ae5d07a25f7ddafd9759a2eb462788f21a20f14e04968f98a4
+  languageName: node
+  linkType: hard
+
+"@algolia/client-analytics@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/client-analytics@npm:4.14.2"
+  dependencies:
+    "@algolia/client-common": 4.14.2
+    "@algolia/client-search": 4.14.2
+    "@algolia/requester-common": 4.14.2
+    "@algolia/transporter": 4.14.2
+  checksum: 61874e026c9d08dd628da443b5b34d1a3bb707a0283e727d94ee6d61057631039c5cf6303e6234cc6fbe84ff71c2758f952b664277715ca5761819aec73e7aad
+  languageName: node
+  linkType: hard
+
+"@algolia/client-common@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/client-common@npm:4.14.2"
+  dependencies:
+    "@algolia/requester-common": 4.14.2
+    "@algolia/transporter": 4.14.2
+  checksum: da2be279ac51e1b43c02c6d2bbf0d9cc8b1cb3250ad10a803fca609bcfb8164a8adc21281b599fd8aa322c04deea77d2f07adcae1a363952559472e781e26c71
+  languageName: node
+  linkType: hard
+
+"@algolia/client-personalization@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/client-personalization@npm:4.14.2"
+  dependencies:
+    "@algolia/client-common": 4.14.2
+    "@algolia/requester-common": 4.14.2
+    "@algolia/transporter": 4.14.2
+  checksum: 0dd25c84a40fe9853d14fadc3c8893e84bee370b5a3eb6730afe816afe1f92b970096d2dfb68073f606fa074fdeb66c3a73811d9a9a9774af5311f34d939fd72
+  languageName: node
+  linkType: hard
+
+"@algolia/client-search@npm:4.14.2, @algolia/client-search@npm:^4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/client-search@npm:4.14.2"
+  dependencies:
+    "@algolia/client-common": 4.14.2
+    "@algolia/requester-common": 4.14.2
+    "@algolia/transporter": 4.14.2
+  checksum: 2695bc9e8c98badb601b915dbb075dd92996af350b0e4915a7a3b7825bd45f20815534debcfcb51bb7f682ba5d09f3c41918edb36e0a7f7bb154d3b205825f65
+  languageName: node
+  linkType: hard
+
+"@algolia/logger-common@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/logger-common@npm:4.14.2"
+  checksum: a4000a98831d64c8d826ccece9f5f3a77bc000d93d74a7c6b51f186d3dfd96c0bb00934f70c69da8f3c4dfb9f30ce55ab59aca9ba79c3cc3e924597838a94429
+  languageName: node
+  linkType: hard
+
+"@algolia/logger-console@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/logger-console@npm:4.14.2"
+  dependencies:
+    "@algolia/logger-common": 4.14.2
+  checksum: 96c6209c7ef72cbc170b180f5b84c6523a5b6f4dea978c982577d2417eb19eb9c9ea3bc73089ced692a05bec141d66fd6d5401458d0aa162dbcace5017dbd127
+  languageName: node
+  linkType: hard
+
+"@algolia/requester-browser-xhr@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/requester-browser-xhr@npm:4.14.2"
+  dependencies:
+    "@algolia/requester-common": 4.14.2
+  checksum: 7d8666e21cd0d15dc2e25f6917464c2f98cf73e0d2fced94cc6a3c4e97a990b8b93d9531bbf6f3b1ff2342b9ce9760d1dcb64dbbf61a5f2c31fe4f42541deef2
+  languageName: node
+  linkType: hard
+
+"@algolia/requester-common@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/requester-common@npm:4.14.2"
+  checksum: 7de4148a55db56fe2bf18c1359cccbc2f41031fe2bfbc945d75f143b854638c51e7ec2ef9c6dc69b38d5edb87cd096ce5d7087680da32825562db79026ea39cc
+  languageName: node
+  linkType: hard
+
+"@algolia/requester-node-http@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/requester-node-http@npm:4.14.2"
+  dependencies:
+    "@algolia/requester-common": 4.14.2
+  checksum: 5f5fe8b040f73bd95c6bdb5b97396e078b629b2b4cd93fea671d545be375c79501c65296c34824f0ff8368b5b51edc7a6ad9e694b04223c1416dcda869c6f566
+  languageName: node
+  linkType: hard
+
+"@algolia/transporter@npm:4.14.2":
+  version: 4.14.2
+  resolution: "@algolia/transporter@npm:4.14.2"
+  dependencies:
+    "@algolia/cache-common": 4.14.2
+    "@algolia/logger-common": 4.14.2
+    "@algolia/requester-common": 4.14.2
+  checksum: 72c72013f3edb4d4484e7a43fb3c2555646ab04f422249514ed0309e20f41f5563f4c4dcf5623ca64c293624ecc74f87acaf2d9820e8c829cb5de067bdfe0257
+  languageName: node
+  linkType: hard
+
 "@babel/code-frame@npm:^7.0.0":
   version: 7.16.7
   resolution: "@babel/code-frame@npm:7.16.7"
@@ -96,7 +244,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@builder.io/qwik-city@0.0.101, @builder.io/qwik-city@workspace:packages/qwik-city":
+"@builder.io/qwik-city@^0.0.101, @builder.io/qwik-city@workspace:packages/qwik-city":
   version: 0.0.0-use.local
   resolution: "@builder.io/qwik-city@workspace:packages/qwik-city"
   dependencies:
@@ -162,7 +310,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@builder.io/qwik@0.0.100, @builder.io/qwik@workspace:*, @builder.io/qwik@workspace:packages/qwik":
+"@builder.io/qwik@^0.0.100, @builder.io/qwik@workspace:*, @builder.io/qwik@workspace:packages/qwik":
   version: 0.0.0-use.local
   resolution: "@builder.io/qwik@workspace:packages/qwik"
   languageName: unknown
@@ -252,6 +400,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@docsearch/css@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "@docsearch/css@npm:3.2.0"
+  checksum: fffad2df82d661bca7c51b857601404089d26f7b8f359a9130d9f3b9088e21bedc18d1fb7dd2f8d25f47e2237d47a45bb881a62656c8c53b76a6dd3a7c98de52
+  languageName: node
+  linkType: hard
+
 "@emotion/babel-plugin@npm:^11.7.1":
   version: 11.9.2
   resolution: "@emotion/babel-plugin@npm:11.9.2"
@@ -1868,6 +2023,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"algoliasearch@npm:^4.14.2":
+  version: 4.14.2
+  resolution: "algoliasearch@npm:4.14.2"
+  dependencies:
+    "@algolia/cache-browser-local-storage": 4.14.2
+    "@algolia/cache-common": 4.14.2
+    "@algolia/cache-in-memory": 4.14.2
+    "@algolia/client-account": 4.14.2
+    "@algolia/client-analytics": 4.14.2
+    "@algolia/client-common": 4.14.2
+    "@algolia/client-personalization": 4.14.2
+    "@algolia/client-search": 4.14.2
+    "@algolia/logger-common": 4.14.2
+    "@algolia/logger-console": 4.14.2
+    "@algolia/requester-browser-xhr": 4.14.2
+    "@algolia/requester-common": 4.14.2
+    "@algolia/requester-node-http": 4.14.2
+    "@algolia/transporter": 4.14.2
+  checksum: 4365a0d0f066f3ad6798e4dd0d7487cba1cf4546dac27e66cb84865f91955d6537dc5bad4e71d4bf22a68c0b721b1e6f20109203566ca1a252fe2713d713c0fd
+  languageName: node
+  linkType: hard
+
 "all-contributors-cli@npm:^6.20.0":
   version: 6.20.0
   resolution: "all-contributors-cli@npm:6.20.0"
@@ -3090,6 +3267,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"docsearch-qwik@npm:0.0.1":
+  version: 0.0.1
+  resolution: "docsearch-qwik@npm:0.0.1"
+  dependencies:
+    "@algolia/autocomplete-core": ^1.7.1
+    "@algolia/client-search": ^4.14.2
+    algoliasearch: ^4.14.2
+  checksum: 93399e1381690d450d2f305ddd7f94ac9556d6265847179e9dd0911cc7aaffde9888e43fef5bb1b55caf2fbf839c84fbdcda9751882f184142dce5268f4309c2
+  languageName: node
+  linkType: hard
+
 "doctrine@npm:^3.0.0":
   version: 3.0.0
   resolution: "doctrine@npm:3.0.0"
@@ -7373,10 +7561,12 @@ __metadata:
   resolution: "qwik-docs@workspace:packages/docs"
   dependencies:
     "@builder.io/partytown": ^0.6.4
-    "@builder.io/qwik": 0.0.100
-    "@builder.io/qwik-city": 0.0.101
+    "@builder.io/qwik": ^0.0.100
+    "@builder.io/qwik-city": ^0.0.101
     "@cloudflare/kv-asset-handler": 0.2.0
+    "@docsearch/css": ^3.2.0
     autoprefixer: 10.4.7
+    docsearch-qwik: 0.0.1
     fflate: ^0.7.3
     node-fetch: 3.2.9
     postcss: 8.4.14

From 85782688611036cf2d683700119143fbce6f8725 Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Tue, 16 Aug 2022 02:06:09 +0800
Subject: [PATCH 09/25] fix: fmt

---
 packages/docs/src/global.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/global.css b/packages/docs/src/global.css
index 42a2d2be724..c314d3cf2e1 100644
--- a/packages/docs/src/global.css
+++ b/packages/docs/src/global.css
@@ -1,8 +1,8 @@
 @import 'prism-themes/themes/prism-dracula.css';
 @import '@docsearch/css';
 
-code[class *='language-'],
-pre[class *='language-'] {
+code[class*='language-'],
+pre[class*='language-'] {
   font-family: Menlo, Monaco, 'Courier New', monospace;
   font-weight: normal;
   font-size: 12px;

From 95632cc9873504da6b275a690eb2dd882d4cd0c9 Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Sun, 21 Aug 2022 23:51:57 +0800
Subject: [PATCH 10/25] fix: upgrade doc search pin qwik version

---
 packages/docs/package.json                     |  8 +++-----
 packages/docs/src/components/header/header.tsx |  1 +
 yarn.lock                                      | 10 +++++-----
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index fac2659af40..95c33f0c130 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -22,7 +22,9 @@
     "@builder.io/qwik": "0.0.100-dev20220820024200",
     "@builder.io/qwik-city": "0.0.101-3",
     "@cloudflare/kv-asset-handler": "0.2.0",
+    "@docsearch/css": "^3.2.0",
     "autoprefixer": "10.4.7",
+    "docsearch-qwik": "0.0.3",
     "fflate": "^0.7.3",
     "node-fetch": "3.2.9",
     "postcss": "8.4.14",
@@ -42,9 +44,5 @@
     "node": ">=16"
   },
   "license": "MIT",
-  "private": true,
-  "dependencies": {
-    "@docsearch/css": "^3.2.0",
-    "docsearch-qwik": "0.0.1"
-  }
+  "private": true
 }
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 10c27c44906..21bfd89ff60 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -1,5 +1,6 @@
 import { useLocation } from '@builder.io/qwik-city';
 import { component$, $, useStyles$, useContext } from '@builder.io/qwik';
+// @ts-ignore
 import { DocSearch } from 'docsearch-qwik';
 import { CloseIcon } from '../svgs/close-icon';
 import { DiscordLogo } from '../svgs/discord-logo';
diff --git a/yarn.lock b/yarn.lock
index 89385b4f2b6..8c9f35d763d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3275,14 +3275,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"docsearch-qwik@npm:0.0.1":
-  version: 0.0.1
-  resolution: "docsearch-qwik@npm:0.0.1"
+"docsearch-qwik@npm:0.0.3":
+  version: 0.0.3
+  resolution: "docsearch-qwik@npm:0.0.3"
   dependencies:
     "@algolia/autocomplete-core": ^1.7.1
     "@algolia/client-search": ^4.14.2
     algoliasearch: ^4.14.2
-  checksum: 93399e1381690d450d2f305ddd7f94ac9556d6265847179e9dd0911cc7aaffde9888e43fef5bb1b55caf2fbf839c84fbdcda9751882f184142dce5268f4309c2
+  checksum: e309a19a61bce1d57ff78f72b349b463e71f5abc900cbb6e4f425938f182c2fe9d16f06096566e8ddcc35a3348b6b0f6ada0faace89e0e4d03b0b85abc240643
   languageName: node
   linkType: hard
 
@@ -7574,7 +7574,7 @@ __metadata:
     "@cloudflare/kv-asset-handler": 0.2.0
     "@docsearch/css": ^3.2.0
     autoprefixer: 10.4.7
-    docsearch-qwik: 0.0.1
+    docsearch-qwik: 0.0.3
     fflate: ^0.7.3
     node-fetch: 3.2.9
     postcss: 8.4.14

From b41642034e9c8ab4571a50e6cf1491f2cf2bca08 Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Mon, 22 Aug 2022 21:37:52 +0800
Subject: [PATCH 11/25] fix: move docsearch

---
 packages/docs/package.json                    |   6 +-
 .../docs/src/components/docsearch/README.md   |   5 +
 .../src/components/docsearch/algolia-logo.tsx |  30 ++
 .../src/components/docsearch/constants.ts     |   1 +
 .../docs/src/components/docsearch/context.ts  |   3 +
 .../docsearch/doc-search-button.tsx           |  61 ++++
 .../components/docsearch/doc-search-modal.tsx | 275 ++++++++++++++++++
 .../src/components/docsearch/doc-search.css   |  33 +++
 .../src/components/docsearch/doc-search.tsx   | 126 ++++++++
 .../src/components/docsearch/error-screen.tsx |  27 ++
 .../docs/src/components/docsearch/footer.tsx  |  94 ++++++
 .../src/components/docsearch/handleSearch.ts  | 166 +++++++++++
 .../docs/src/components/docsearch/hit.tsx     |  14 +
 .../docsearch/icons/ControlKeyIcon.tsx        |  15 +
 .../components/docsearch/icons/ErrorIcon.tsx  |  18 ++
 .../docsearch/icons/LoadingIcon.tsx           |  23 ++
 .../docsearch/icons/NoResultsIcon.tsx         |  18 ++
 .../components/docsearch/icons/RecentIcon.tsx |  16 +
 .../components/docsearch/icons/ResetIcon.tsx  |  16 +
 .../components/docsearch/icons/SearchIcon.tsx |  16 +
 .../components/docsearch/icons/SelectIcon.tsx |  18 ++
 .../components/docsearch/icons/SourceIcon.tsx |  55 ++++
 .../components/docsearch/icons/StarIcon.tsx   |  15 +
 .../docsearch/no-results-screen.tsx           |  67 +++++
 .../docs/src/components/docsearch/result.tsx  | 116 ++++++++
 .../components/docsearch/results-screen.tsx   |  64 ++++
 .../src/components/docsearch/screen-state.tsx |  58 ++++
 .../src/components/docsearch/search-box.tsx   | 172 +++++++++++
 .../docs/src/components/docsearch/snippet.tsx |  26 ++
 .../src/components/docsearch/start-screen.tsx | 134 +++++++++
 .../components/docsearch/stored-searches.ts   |  82 ++++++
 .../docsearch/types/DocSearchHit.ts           |  73 +++++
 .../docsearch/types/InternalDocSearchHit.ts   |   6 +
 .../docsearch/types/StoredDocSearchHit.ts     |   3 +
 .../src/components/docsearch/types/index.ts   |   3 +
 .../components/docsearch/useTouchEvents.ts    |  34 +++
 .../src/components/docsearch/useTrapFocus.ts  |  42 +++
 .../docsearch/utils/getActiveItem.ts          |  89 ++++++
 .../src/components/docsearch/utils/groupBy.ts |  20 ++
 .../components/docsearch/utils/identity.ts    |   3 +
 .../src/components/docsearch/utils/index.ts   |   4 +
 .../components/docsearch/utils/isSamsung.ts   |   5 +
 .../src/components/docsearch/utils/noop.ts    |   1 +
 .../docsearch/utils/removeHighlightTags.ts    |  19 ++
 .../docsearch/utils/stalledControl.ts         |  15 +
 .../docs/src/components/docsearch/version.ts  |   1 +
 .../docs/src/components/header/header.tsx     |   4 +-
 packages/docs/src/global.css                  |   1 -
 yarn.lock                                     |  26 +-
 49 files changed, 2092 insertions(+), 27 deletions(-)
 create mode 100644 packages/docs/src/components/docsearch/README.md
 create mode 100644 packages/docs/src/components/docsearch/algolia-logo.tsx
 create mode 100644 packages/docs/src/components/docsearch/constants.ts
 create mode 100644 packages/docs/src/components/docsearch/context.ts
 create mode 100644 packages/docs/src/components/docsearch/doc-search-button.tsx
 create mode 100644 packages/docs/src/components/docsearch/doc-search-modal.tsx
 create mode 100644 packages/docs/src/components/docsearch/doc-search.css
 create mode 100644 packages/docs/src/components/docsearch/doc-search.tsx
 create mode 100644 packages/docs/src/components/docsearch/error-screen.tsx
 create mode 100644 packages/docs/src/components/docsearch/footer.tsx
 create mode 100644 packages/docs/src/components/docsearch/handleSearch.ts
 create mode 100644 packages/docs/src/components/docsearch/hit.tsx
 create mode 100644 packages/docs/src/components/docsearch/icons/ControlKeyIcon.tsx
 create mode 100644 packages/docs/src/components/docsearch/icons/ErrorIcon.tsx
 create mode 100644 packages/docs/src/components/docsearch/icons/LoadingIcon.tsx
 create mode 100644 packages/docs/src/components/docsearch/icons/NoResultsIcon.tsx
 create mode 100644 packages/docs/src/components/docsearch/icons/RecentIcon.tsx
 create mode 100644 packages/docs/src/components/docsearch/icons/ResetIcon.tsx
 create mode 100644 packages/docs/src/components/docsearch/icons/SearchIcon.tsx
 create mode 100644 packages/docs/src/components/docsearch/icons/SelectIcon.tsx
 create mode 100644 packages/docs/src/components/docsearch/icons/SourceIcon.tsx
 create mode 100644 packages/docs/src/components/docsearch/icons/StarIcon.tsx
 create mode 100644 packages/docs/src/components/docsearch/no-results-screen.tsx
 create mode 100644 packages/docs/src/components/docsearch/result.tsx
 create mode 100644 packages/docs/src/components/docsearch/results-screen.tsx
 create mode 100644 packages/docs/src/components/docsearch/screen-state.tsx
 create mode 100644 packages/docs/src/components/docsearch/search-box.tsx
 create mode 100644 packages/docs/src/components/docsearch/snippet.tsx
 create mode 100644 packages/docs/src/components/docsearch/start-screen.tsx
 create mode 100644 packages/docs/src/components/docsearch/stored-searches.ts
 create mode 100644 packages/docs/src/components/docsearch/types/DocSearchHit.ts
 create mode 100644 packages/docs/src/components/docsearch/types/InternalDocSearchHit.ts
 create mode 100644 packages/docs/src/components/docsearch/types/StoredDocSearchHit.ts
 create mode 100644 packages/docs/src/components/docsearch/types/index.ts
 create mode 100644 packages/docs/src/components/docsearch/useTouchEvents.ts
 create mode 100644 packages/docs/src/components/docsearch/useTrapFocus.ts
 create mode 100644 packages/docs/src/components/docsearch/utils/getActiveItem.ts
 create mode 100644 packages/docs/src/components/docsearch/utils/groupBy.ts
 create mode 100644 packages/docs/src/components/docsearch/utils/identity.ts
 create mode 100644 packages/docs/src/components/docsearch/utils/index.ts
 create mode 100644 packages/docs/src/components/docsearch/utils/isSamsung.ts
 create mode 100644 packages/docs/src/components/docsearch/utils/noop.ts
 create mode 100644 packages/docs/src/components/docsearch/utils/removeHighlightTags.ts
 create mode 100644 packages/docs/src/components/docsearch/utils/stalledControl.ts
 create mode 100644 packages/docs/src/components/docsearch/version.ts

diff --git a/packages/docs/package.json b/packages/docs/package.json
index 95c33f0c130..7992d211ab0 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -18,13 +18,15 @@
     "fmt.check": "prettier --check ."
   },
   "devDependencies": {
+    "@algolia/autocomplete-core": "^1.7.1",
+    "@algolia/client-search": "^4.14.2",
     "@builder.io/partytown": "^0.6.4",
-    "@builder.io/qwik": "0.0.100-dev20220820024200",
+    "@builder.io/qwik": "^0.0.100",
     "@builder.io/qwik-city": "0.0.101-3",
     "@cloudflare/kv-asset-handler": "0.2.0",
     "@docsearch/css": "^3.2.0",
+    "algoliasearch": "^4.14.2",
     "autoprefixer": "10.4.7",
-    "docsearch-qwik": "0.0.3",
     "fflate": "^0.7.3",
     "node-fetch": "3.2.9",
     "postcss": "8.4.14",
diff --git a/packages/docs/src/components/docsearch/README.md b/packages/docs/src/components/docsearch/README.md
new file mode 100644
index 00000000000..05e30cc9fd1
--- /dev/null
+++ b/packages/docs/src/components/docsearch/README.md
@@ -0,0 +1,5 @@
+# Docsearch in qwik
+
+All the credits goes to Algolia's [docsearch-react](https://github.com/algolia/docsearch/tree/main/packages/docsearch-react)
+
+Only render part changed to qwik's component, trying to minimal effects of js blocking
diff --git a/packages/docs/src/components/docsearch/algolia-logo.tsx b/packages/docs/src/components/docsearch/algolia-logo.tsx
new file mode 100644
index 00000000000..01ad2eec853
--- /dev/null
+++ b/packages/docs/src/components/docsearch/algolia-logo.tsx
@@ -0,0 +1,30 @@
+import { component$ } from '@builder.io/qwik';
+
+type AlgoliaLogoTranslations = Partial<{
+  searchByText: string;
+}>;
+
+export type AlgoliaLogoProps = {
+  translations?: AlgoliaLogoTranslations;
+};
+
+export const AlgoliaLogo = component$(({ translations = {} }: AlgoliaLogoProps) => {
+  const { searchByText = 'Search by' } = translations;
+
+  return (
+    <a
+      href={`https://www.algolia.com/ref/docsearch/?utm_source=${window.location.hostname}&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <span class="DocSearch-Label">{searchByText}</span>
+      <svg width="77" height="19" aria-label="Algolia" role="img">
+        <path
+          d="M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </a>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/constants.ts b/packages/docs/src/components/docsearch/constants.ts
new file mode 100644
index 00000000000..bbeca55a1db
--- /dev/null
+++ b/packages/docs/src/components/docsearch/constants.ts
@@ -0,0 +1 @@
+export const MAX_QUERY_SIZE = 64;
diff --git a/packages/docs/src/components/docsearch/context.ts b/packages/docs/src/components/docsearch/context.ts
new file mode 100644
index 00000000000..55501fbb0fb
--- /dev/null
+++ b/packages/docs/src/components/docsearch/context.ts
@@ -0,0 +1,3 @@
+import { createContext } from '@builder.io/qwik';
+
+export const SearchContext = createContext('docsearch');
diff --git a/packages/docs/src/components/docsearch/doc-search-button.tsx b/packages/docs/src/components/docsearch/doc-search-button.tsx
new file mode 100644
index 00000000000..e433127a0fe
--- /dev/null
+++ b/packages/docs/src/components/docsearch/doc-search-button.tsx
@@ -0,0 +1,61 @@
+import { component$, useClientEffect$, useStore } from '@builder.io/qwik';
+import { ControlKeyIcon } from './icons/ControlKeyIcon';
+import { SearchIcon } from './icons/SearchIcon';
+
+export function isAppleDevice() {
+  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+}
+
+export type ButtonTranslations = Partial<{
+  buttonText: string;
+  buttonAriaLabel: string;
+}>;
+
+export interface DocSearchButtonProps {
+  ref: any;
+  translations?: ButtonTranslations;
+  onClick$: () => void;
+}
+
+export const DocSearchButton = component$((props: DocSearchButtonProps) => {
+  const ACTION_KEY_DEFAULT = 'Ctrl' as const;
+  const ACTION_KEY_APPLE = '⌘' as const;
+  const { translations = {} } = props;
+  const { buttonText = 'Search', buttonAriaLabel = 'Search' } = translations;
+  const store = useStore({
+    key: ACTION_KEY_APPLE,
+  } as {
+    key: typeof ACTION_KEY_APPLE | typeof ACTION_KEY_DEFAULT | null;
+  });
+
+  useClientEffect$(() => {
+    if (typeof navigator !== 'undefined') {
+      isAppleDevice() ? (store.key = ACTION_KEY_APPLE) : (store.key = ACTION_KEY_DEFAULT);
+    }
+  });
+  return (
+    <button
+      ref={props.ref}
+      onClick$={props.onClick$}
+      type="button"
+      class="DocSearch DocSearch-Button"
+      aria-label={buttonAriaLabel}
+    >
+      <span className="DocSearch-Button-Container">
+        <SearchIcon />
+        <span className="DocSearch-Button-Placeholder">{buttonText}</span>
+      </span>
+
+      <span className="DocSearch-Button-Keys">
+        {store.key !== null && (
+          <>
+            <kbd className="DocSearch-Button-Key">
+              {store.key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : store.key}
+            </kbd>
+            <kbd className="DocSearch-Button-Key">K</kbd>
+          </>
+        )}
+      </span>
+    </button>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/doc-search-modal.tsx b/packages/docs/src/components/docsearch/doc-search-modal.tsx
new file mode 100644
index 00000000000..8129ba64b3a
--- /dev/null
+++ b/packages/docs/src/components/docsearch/doc-search-modal.tsx
@@ -0,0 +1,275 @@
+import {
+  component$,
+  useRef,
+  mutable,
+  noSerialize,
+  useContextProvider,
+  useClientEffect$,
+} from '@builder.io/qwik';
+import { MAX_QUERY_SIZE } from './constants';
+import { SearchContext } from './context';
+import type { DocSearchProps, DocSearchState } from './doc-search';
+import type { FooterTranslations } from './footer';
+import { Footer } from './footer';
+import { handleSearch } from './handleSearch';
+import type { ScreenStateTranslations } from './screen-state';
+import { ScreenState } from './screen-state';
+import type { SearchBoxTranslations } from './search-box';
+import { SearchBox } from './search-box';
+import { createStoredSearches } from './stored-searches';
+import type { DocSearchHit, InternalDocSearchHit, StoredDocSearchHit } from './types';
+
+import { identity, noop } from './utils';
+import { clearStalled, setStalled } from './utils/stalledControl';
+
+export type ModalTranslations = Partial<{
+  searchBox: SearchBoxTranslations;
+  footer: FooterTranslations;
+}> &
+  ScreenStateTranslations;
+
+export type DocSearchModalProps = DocSearchProps & {
+  onClose$: () => void;
+  translations?: ModalTranslations;
+  state: DocSearchState;
+};
+
+export const DocSearchModal = component$(
+  ({
+    appId,
+    apiKey,
+    indexName,
+    state,
+    onClose$ = noop,
+    transformItems$ = identity,
+    disableUserPersonalization = false,
+    translations = {},
+  }: DocSearchModalProps) => {
+    const {
+      footer: footerTranslations,
+      searchBox: searchBoxTranslations,
+      ...screenStateTranslations
+    } = translations;
+    const containerRef = useRef();
+    const modalRef = useRef();
+    const formElementRef = useRef();
+    const dropdownRef = useRef();
+    const inputRef = useRef();
+    function saveRecentSearch(item: InternalDocSearchHit) {
+      if (disableUserPersonalization) {
+        return;
+      }
+
+      // We don't store `content` record, but their parent if available.
+      const search = item.type === 'content' ? item.__docsearch_parent : item;
+
+      // We save the recent search only if it's not favorited.
+      if (
+        search &&
+        state.favoriteSearches?.getAll().findIndex((x: any) => x.objectID === search.objectID) ===
+          -1
+      ) {
+        state.recentSearches?.add(search);
+      }
+    }
+
+    const onSelectItem = noSerialize(({ item, event }: any) => {
+      saveRecentSearch(item);
+      if (event) {
+        if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
+          onClose$.apply(undefined, []);
+        }
+      }
+    }) as any;
+
+    const onInput = noSerialize((event: Event) => {
+      // TODO: cancelable request
+      clearStalled();
+      const query = (event.target as HTMLInputElement).value.slice(0, MAX_QUERY_SIZE);
+      state.query = query;
+      state.activeItemId = null;
+      state.status = 'loading';
+      // set new stalledId
+      setStalled(() => {
+        state.status = 'stalled';
+      });
+      handleSearch(query, {
+        state: state,
+        appId: appId,
+        apiKey: apiKey,
+        indexName: indexName,
+        snippetLength: 10,
+        transformItems: (data: DocSearchHit[]) => {
+          return transformItems$.apply(undefined, [data]);
+        },
+      })
+        .then(({ collections }) => {
+          state.status = 'idle';
+          state.collections = collections.map((c) => ({
+            ...c,
+            source: {
+              items: c.items,
+              sourceId: c.sourceId,
+            },
+          }));
+          // TODO:
+          // if not opened, ensure open
+          // if actived before, set active
+        })
+        .finally(() => {
+          clearStalled();
+          state.status = 'idle';
+        });
+    });
+    useContextProvider(SearchContext, {
+      onSelectItem,
+      onInput,
+    });
+
+    // useTouchEvents({
+    //   getEnvironmentProps,
+    //   panelElement: dropdownRef.current as any,
+    //   formElement: formElementRef.current as any,
+    //   inputElement: inputRef.current as any,
+    // });
+
+    // TODO:
+    // useTrapFocus(containerRef as any);
+
+    useClientEffect$(() => {
+      state.favoriteSearches = createStoredSearches<StoredDocSearchHit>({
+        key: `__DOCSEARCH_FAVORITE_SEARCHES__${indexName}`,
+        limit: 10,
+      });
+      state.recentSearches = createStoredSearches<StoredDocSearchHit>({
+        key: `__DOCSEARCH_RECENT_SEARCHES__${indexName}`,
+        // We display 7 recent searches and there's no favorites, but only
+        // 4 when there are favorites.
+        limit: state.favoriteSearches?.getAll().length === 0 ? 7 : 4,
+      });
+
+      const initialQueryFromSelection =
+        typeof window !== 'undefined'
+          ? window.getSelection()!.toString().slice(0, MAX_QUERY_SIZE)
+          : '';
+      if (initialQueryFromSelection) {
+        state.initialQuery = initialQueryFromSelection;
+      }
+
+      document.body.classList.add('DocSearch--active');
+      const isMobileMediaQuery = window.matchMedia('(max-width: 768px)');
+
+      if (isMobileMediaQuery.matches) {
+        state.snippetLength = 5;
+      }
+
+      return () => {
+        document.body.classList.remove('DocSearch--active');
+
+        // IE11 doesn't support `scrollTo` so we check that the method exists
+        // first.
+        // window.scrollTo?.(0, initialScrollY);
+      };
+    });
+
+    useClientEffect$(({ track }) => {
+      track(state, 'query');
+      if (dropdownRef.current) {
+        dropdownRef.current.scrollTop = 0;
+      }
+    });
+
+    // We don't focus the input when there's an initial query (i.e. Selection
+    // Search) because users rather want to see the results directly, without the
+    // keyboard appearing.
+    // We therefore need to refresh the autocomplete instance to load all the
+    // results, which is usually triggered on focus.
+    useClientEffect$(({ track }) => {
+      const initialQuery = track(state, 'initialQuery');
+      if (initialQuery && initialQuery.length > 0) {
+        onInput?.({
+          target: {
+            value: initialQuery,
+          },
+        } as any);
+        if (inputRef.current) {
+          // @ts-ignore
+          inputRef.current.focus();
+        }
+      }
+    });
+
+    // We rely on a CSS property to set the modal height to the full viewport height
+    // because all mobile browsers don't compute their height the same way.
+    // See https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+    useClientEffect$(() => {
+      function setFullViewportHeight() {
+        if (modalRef.current) {
+          const vh = window.innerHeight * 0.01;
+          // @ts-ignore
+          modalRef.current.style.setProperty('--docsearch-vh', `${vh}px`);
+        }
+      }
+
+      setFullViewportHeight();
+
+      window.addEventListener('resize', setFullViewportHeight);
+
+      return () => {
+        window.removeEventListener('resize', setFullViewportHeight);
+      };
+    });
+
+    return (
+      <div
+        ref={containerRef}
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        aria-owns="docsearch-list"
+        aria-labelledby="docsearch-list"
+        class={[
+          'DocSearch',
+          'DocSearch-Container',
+          state.status === 'stalled' && 'DocSearch-Container--Stalled',
+          state.status === 'error' && 'DocSearch-Container--Errored',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        role="button"
+        tabIndex={0}
+        onMouseDown$={(event) => {
+          if (event.target === containerRef.current) {
+            onClose$.apply(undefined, []);
+          }
+        }}
+      >
+        <div class="DocSearch-Modal" ref={modalRef}>
+          <header class="DocSearch-SearchBar" ref={formElementRef}>
+            <SearchBox
+              state={state}
+              autoFocus={mutable(state.initialQuery?.length === 0)}
+              inputRef={inputRef as any}
+              translations={searchBoxTranslations}
+              onClose$={() => {
+                onClose$.apply(undefined, []);
+              }}
+            />
+          </header>
+
+          <div class="DocSearch-Dropdown" ref={dropdownRef}>
+            <ScreenState
+              state={state}
+              disableUserPersonalization={disableUserPersonalization}
+              inputRef={inputRef as any}
+              translations={mutable(screenStateTranslations)}
+            />
+          </div>
+
+          <footer class="DocSearch-Footer">
+            <Footer translations={footerTranslations} />
+          </footer>
+        </div>
+      </div>
+    );
+  }
+);
diff --git a/packages/docs/src/components/docsearch/doc-search.css b/packages/docs/src/components/docsearch/doc-search.css
new file mode 100644
index 00000000000..423a8cf4291
--- /dev/null
+++ b/packages/docs/src/components/docsearch/doc-search.css
@@ -0,0 +1,33 @@
+@import '@docsearch/css';
+
+.docsearch {
+  --docsearch-searchbox-background: rgba(247, 248, 250, 1);
+  --docsearch-searchbox-focus-background: rgba(247, 248, 250, 1);
+  color: rgb(33, 53, 71);
+}
+
+/* to override global.css */
+.docsearch .DocSearch-Button {
+  background-color: var(--docsearch-searchbox-background);
+  --docsearch-text-color: var(--docsearch-muted-color);
+}
+
+.docsearch kbd {
+  font-family: system-ui;
+}
+
+.docsearch ul li {
+  text-align: left;
+  margin: 0 0 4px 0;
+  padding: 0;
+}
+
+.docsearch a:hover {
+  text-decoration: none;
+}
+
+@media (max-width: 996px) {
+  .docsearch {
+    display: none;
+  }
+}
diff --git a/packages/docs/src/components/docsearch/doc-search.tsx b/packages/docs/src/components/docsearch/doc-search.tsx
new file mode 100644
index 00000000000..b9016c217de
--- /dev/null
+++ b/packages/docs/src/components/docsearch/doc-search.tsx
@@ -0,0 +1,126 @@
+import type { SearchClient } from 'algoliasearch/lite';
+import { component$, useStore, useStyles$, useRef } from '@builder.io/qwik';
+import type { DocSearchHit, InternalDocSearchHit, StoredDocSearchHit } from './types';
+import { ButtonTranslations, DocSearchButton } from './doc-search-button';
+import { DocSearchModal, ModalTranslations } from './doc-search-modal';
+import styles from './doc-search.css?inline';
+import type { StoredSearchPlugin } from './stored-searches';
+
+export type DocSearchTranslations = Partial<{
+  button: ButtonTranslations;
+  modal: ModalTranslations;
+}>;
+
+export type DocSearchState = {
+  isOpen: boolean;
+  query: string;
+  collections: {
+    items: InternalDocSearchHit[];
+  }[];
+  context: {
+    searchSuggestions: string[];
+  };
+  activeItemId: null | number;
+  snippetLength: number;
+  status: 'idle' | 'loading' | 'stalled' | 'error';
+  initialQuery?: string;
+  favoriteSearches?: StoredSearchPlugin<StoredDocSearchHit>;
+  recentSearches?: StoredSearchPlugin<StoredDocSearchHit>;
+};
+
+export interface DocSearchProps {
+  appId: string;
+  apiKey: string;
+  indexName: string;
+  transformItems$?: (items: DocSearchHit[]) => DocSearchHit[];
+  transformSearchClient?: (searchClient: SearchClient) => SearchClient;
+  disableUserPersonalization?: boolean;
+  translations?: DocSearchTranslations;
+}
+
+export function isEditingContent(event: KeyboardEvent): boolean {
+  const element = event.target as HTMLElement;
+  const tagName = element.tagName;
+
+  return (
+    element.isContentEditable ||
+    tagName === 'INPUT' ||
+    tagName === 'SELECT' ||
+    tagName === 'TEXTAREA'
+  );
+}
+
+export const DocSearch = component$((props: DocSearchProps) => {
+  useStyles$(styles);
+  const state = useStore<DocSearchState>({
+    isOpen: false,
+    initialQuery: '',
+    favoriteSearches: null as any,
+    recentSearches: null as any,
+    query: '',
+    collections: [],
+    context: {
+      searchSuggestions: [],
+    },
+    activeItemId: null,
+    status: 'idle',
+    snippetLength: 10,
+  });
+
+  const searchButtonRef = useRef();
+
+  return (
+    <div
+      class="docsearch"
+      window:onKeyDown$={(event: KeyboardEvent) => {
+        function open() {
+          // We check that no other DocSearch modal is showing before opening
+          // another one.
+          if (!document.body.classList.contains('DocSearch--active')) {
+            state.isOpen = true;
+          }
+        }
+        if (
+          (event.key === 'Escape' && state.isOpen) ||
+          // The `Cmd+K` shortcut both opens and closes the modal.
+          (event.key === 'k' && (event.metaKey || event.ctrlKey)) ||
+          // The `/` shortcut opens but doesn't close the modal because it's
+          // a character.
+          (!isEditingContent(event) && event.key === '/' && !state.isOpen)
+        ) {
+          // FIXME: not able to prevent
+          // event.preventDefault();
+
+          if (state.isOpen) {
+            state.isOpen = false;
+          } else if (!document.body.classList.contains('DocSearch--active')) {
+            open();
+          }
+        }
+
+        if (searchButtonRef && searchButtonRef.current === document.activeElement) {
+          if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) {
+            state.isOpen = true;
+            state.initialQuery = event.key;
+          }
+        }
+      }}
+    >
+      <DocSearchButton
+        ref={searchButtonRef}
+        onClick$={() => {
+          state.isOpen = true;
+        }}
+      />
+      {state.isOpen && (
+        <DocSearchModal
+          {...props}
+          state={state}
+          onClose$={() => {
+            state.isOpen = false;
+          }}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/error-screen.tsx b/packages/docs/src/components/docsearch/error-screen.tsx
new file mode 100644
index 00000000000..edd30be96d2
--- /dev/null
+++ b/packages/docs/src/components/docsearch/error-screen.tsx
@@ -0,0 +1,27 @@
+import { component$ } from '@builder.io/qwik';
+import { ErrorIcon } from './icons/ErrorIcon';
+
+export type ErrorScreenTranslations = Partial<{
+  titleText: string;
+  helpText: string;
+}>;
+
+type ErrorScreenProps = {
+  translations?: ErrorScreenTranslations;
+};
+
+export const ErrorScreen = component$(({ translations = {} }: ErrorScreenProps) => {
+  const {
+    titleText = 'Unable to fetch results',
+    helpText = 'You might want to check your network connection.',
+  } = translations;
+  return (
+    <div className="DocSearch-ErrorScreen">
+      <div className="DocSearch-Screen-Icon">
+        <ErrorIcon />
+      </div>
+      <p className="DocSearch-Title">{titleText}</p>
+      <p className="DocSearch-Help">{helpText}</p>
+    </div>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/footer.tsx b/packages/docs/src/components/docsearch/footer.tsx
new file mode 100644
index 00000000000..7e51d2a9e2e
--- /dev/null
+++ b/packages/docs/src/components/docsearch/footer.tsx
@@ -0,0 +1,94 @@
+import { component$, Slot } from '@builder.io/qwik';
+import { AlgoliaLogo } from './algolia-logo';
+
+export type FooterTranslations = Partial<{
+  selectText: string;
+  selectKeyAriaLabel: string;
+  navigateText: string;
+  navigateUpKeyAriaLabel: string;
+  navigateDownKeyAriaLabel: string;
+  closeText: string;
+  closeKeyAriaLabel: string;
+  searchByText: string;
+}>;
+
+type FooterProps = Partial<{
+  translations: FooterTranslations;
+}>;
+
+interface CommandIconProps {
+  ariaLabel: string;
+  d: string;
+}
+
+export const CommandIcon = component$((props: CommandIconProps) => {
+  return (
+    <svg width="15" height="15" aria-label={props.ariaLabel} role="img">
+      <g
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.2"
+      >
+        <path d={props.d} />
+      </g>
+    </svg>
+  );
+});
+
+export const Footer = component$(({ translations = {} }: FooterProps) => {
+  const {
+    selectText = 'to select',
+    selectKeyAriaLabel = 'Enter key',
+    navigateText = 'to navigate',
+    navigateUpKeyAriaLabel = 'Arrow up',
+    navigateDownKeyAriaLabel = 'Arrow down',
+    closeText = 'to close',
+    closeKeyAriaLabel = 'Escape key',
+    searchByText = 'Search by',
+  } = translations;
+
+  return (
+    <>
+      <div class="DocSearch-Logo">
+        <AlgoliaLogo translations={{ searchByText }} />
+      </div>
+      <ul class="DocSearch-Commands">
+        <li>
+          <kbd class="DocSearch-Commands-Key">
+            <CommandIcon
+              ariaLabel={selectKeyAriaLabel}
+              d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"
+            ></CommandIcon>
+          </kbd>
+          <span class="DocSearch-Label">{selectText}</span>
+        </li>
+        <li>
+          <kbd class="DocSearch-Commands-Key">
+            <CommandIcon
+              ariaLabel={navigateDownKeyAriaLabel}
+              d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"
+            ></CommandIcon>
+          </kbd>
+          <kbd class="DocSearch-Commands-Key">
+            <CommandIcon
+              ariaLabel={navigateUpKeyAriaLabel}
+              d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"
+            ></CommandIcon>
+          </kbd>
+          <span class="DocSearch-Label">{navigateText}</span>
+        </li>
+        <li>
+          <kbd class="DocSearch-Commands-Key">
+            <CommandIcon
+              ariaLabel={closeKeyAriaLabel}
+              d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"
+            ></CommandIcon>
+          </kbd>
+          <span class="DocSearch-Label">{closeText}</span>
+        </li>
+      </ul>
+    </>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/handleSearch.ts b/packages/docs/src/components/docsearch/handleSearch.ts
new file mode 100644
index 00000000000..8109516e995
--- /dev/null
+++ b/packages/docs/src/components/docsearch/handleSearch.ts
@@ -0,0 +1,166 @@
+// @ts-ignore
+import algoliasearch from 'algoliasearch/dist/algoliasearch-lite.esm.browser';
+import { flatten } from '@algolia/autocomplete-shared';
+import type { SearchClient } from 'algoliasearch/lite';
+import { preResolve, postResolve, resolve } from '@algolia/autocomplete-core/dist/esm/resolve';
+import { reshape } from '@algolia/autocomplete-core/dist/esm/reshape';
+import type { DocSearchHit } from './types';
+import { groupBy, removeHighlightTags } from './utils';
+
+import { version } from './version';
+
+let client: SearchClient;
+
+export function handleSearch(
+  query: string,
+  { state, appId, apiKey, indexName, snippetLength, transformSearchClient, transformItems }: any
+) {
+  if (!client) {
+    client = algoliasearch(appId, apiKey);
+    client.addAlgoliaAgent('docsearch', version);
+    if (transformSearchClient) {
+      client = transformSearchClient(client);
+    }
+  }
+  let q = Promise.resolve([] as any[]);
+  if (!query) {
+    q = Promise.resolve([
+      {
+        sourceId: 'recentSearches',
+        onSelect() {},
+        getItemUrl: ({ item }: any) => item.url,
+        getItems() {
+          return state.recentSearches?.getAll();
+        },
+      },
+      {
+        sourceId: 'favoriteSearches',
+        onSelect() {},
+        getItemUrl: ({ item }: any) => item.url,
+        getItems() {
+          return state.favoriteSearches?.getAll();
+        },
+      },
+    ]);
+  } else {
+    q = client
+      .search<DocSearchHit>([
+        {
+          query,
+          indexName,
+          params: {
+            attributesToRetrieve: [
+              'hierarchy.lvl0',
+              'hierarchy.lvl1',
+              'hierarchy.lvl2',
+              'hierarchy.lvl3',
+              'hierarchy.lvl4',
+              'hierarchy.lvl5',
+              'hierarchy.lvl6',
+              'content',
+              'type',
+              'url',
+            ],
+            attributesToSnippet: [
+              `hierarchy.lvl1:${snippetLength}`,
+              `hierarchy.lvl2:${snippetLength}`,
+              `hierarchy.lvl3:${snippetLength}`,
+              `hierarchy.lvl4:${snippetLength}`,
+              `hierarchy.lvl5:${snippetLength}`,
+              `hierarchy.lvl6:${snippetLength}`,
+              `content:${snippetLength}`,
+            ],
+            snippetEllipsisText: '…',
+            highlightPreTag: '<mark>',
+            highlightPostTag: '</mark>',
+            hitsPerPage: 20,
+          },
+        },
+      ])
+      .then(({ results }) => {
+        const { hits, nbHits } = results[0];
+        const rawSources = groupBy(hits, (hit) => removeHighlightTags(hit));
+
+        // We store the `lvl0`s to display them as search suggestions
+        // in the "no results" screen.
+        if ((state.context.searchSuggestions as any[]).length < Object.keys(rawSources).length) {
+          state.context.searchSuggestions = Object.keys(rawSources);
+        }
+        state.context.nbHits = nbHits;
+
+        return Object.values<DocSearchHit[]>(rawSources).map((items, index) => {
+          return {
+            sourceId: `hits${index}`,
+            items,
+            getItemUrl: ({ item }: any) => item.url,
+            getItemInputValue: () => {},
+            onSelect: () => {},
+            getItems() {
+              return Promise.all(
+                Object.values(groupBy(items, (item) => item.hierarchy.lvl1)).map((x) => {
+                  if (transformItems) {
+                    return transformItems(x);
+                  }
+                  return x;
+                })
+              ).then((resp) => {
+                return resp
+                  .map((groupedHits) =>
+                    groupedHits.map((item: any) => {
+                      return {
+                        ...item,
+                        __docsearch_parent:
+                          item.type !== 'lvl1' &&
+                          groupedHits.find(
+                            (siblingItem: any) =>
+                              siblingItem.type === 'lvl1' &&
+                              siblingItem.hierarchy.lvl1 === item.hierarchy.lvl1
+                          ),
+                      };
+                    })
+                  )
+                  .flat();
+              });
+            },
+          };
+        });
+      });
+  }
+  return q
+    .then((sources) => {
+      return Promise.all(
+        sources.map((source) => {
+          return Promise.resolve(source.getItems()).then((itemsOrDescription) =>
+            preResolve<any>(itemsOrDescription, source.sourceId)
+          );
+        })
+      )
+        .then(resolve)
+        .then((responses) => postResolve(responses, sources as any))
+        .then((collections) => {
+          return reshape({
+            collections,
+            props: {
+              reshape: ({ sources }: any) => sources,
+            } as any,
+            state: {} as any,
+          });
+        });
+    })
+    .then((collections) => {
+      let baseItemId = 0;
+      const value = collections.map<any>((collection) => ({
+        ...collection,
+        // We flatten the stored items to support calling `getAlgoliaResults`
+        // from the source itself.
+        items: flatten(collection.items as any).map((item: any) => ({
+          ...item,
+          __autocomplete_id: baseItemId++,
+        })),
+      }));
+
+      return {
+        collections: value,
+      };
+    });
+}
diff --git a/packages/docs/src/components/docsearch/hit.tsx b/packages/docs/src/components/docsearch/hit.tsx
new file mode 100644
index 00000000000..2820746f5a1
--- /dev/null
+++ b/packages/docs/src/components/docsearch/hit.tsx
@@ -0,0 +1,14 @@
+import { component$, Slot } from '@builder.io/qwik';
+import type { InternalDocSearchHit, StoredDocSearchHit } from './types';
+
+interface HitProps {
+  hit: InternalDocSearchHit | StoredDocSearchHit;
+}
+
+export const Hit = component$(({ hit }: HitProps) => {
+  return (
+    <a href={hit.url}>
+      <Slot />
+    </a>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/icons/ControlKeyIcon.tsx b/packages/docs/src/components/docsearch/icons/ControlKeyIcon.tsx
new file mode 100644
index 00000000000..1ebde32bd05
--- /dev/null
+++ b/packages/docs/src/components/docsearch/icons/ControlKeyIcon.tsx
@@ -0,0 +1,15 @@
+import { component$ } from '@builder.io/qwik';
+
+export const ControlKeyIcon = component$(() => {
+  return (
+    <svg width="15" height="15" class="DocSearch-Control-Key-Icon">
+      <path
+        d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953"
+        stroke-width="1.2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="square"
+      />
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/icons/ErrorIcon.tsx b/packages/docs/src/components/docsearch/icons/ErrorIcon.tsx
new file mode 100644
index 00000000000..5b2d48a5eda
--- /dev/null
+++ b/packages/docs/src/components/docsearch/icons/ErrorIcon.tsx
@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik';
+
+export const ErrorIcon = component$(() => {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 20 20"
+      fill="none"
+      fill-rule="evenodd"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M19 4.8a16 16 0 00-2-1.2m-3.3-1.2A16 16 0 001.1 4.7M16.7 8a12 12 0 00-2.8-1.4M10 6a12 12 0 00-6.7 2M12.3 14.7a4 4 0 00-4.5 0M14.5 11.4A8 8 0 0010 10M3 16L18 2M10 18h0"></path>
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/icons/LoadingIcon.tsx b/packages/docs/src/components/docsearch/icons/LoadingIcon.tsx
new file mode 100644
index 00000000000..1c7b781d6f7
--- /dev/null
+++ b/packages/docs/src/components/docsearch/icons/LoadingIcon.tsx
@@ -0,0 +1,23 @@
+import { component$ } from '@builder.io/qwik';
+
+export const LoadingIcon = component$(() => {
+  return (
+    <svg viewBox="0 0 38 38" stroke="currentColor" stroke-opacity=".5">
+      <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+          <circle stroke-opacity=".3" cx="18" cy="18" r="18" />
+          <path d="M36 18c0-9.94-8.06-18-18-18">
+            <animateTransform
+              attributeName="transform"
+              type="rotate"
+              from="0 18 18"
+              to="360 18 18"
+              dur="1s"
+              repeatCount="indefinite"
+            />
+          </path>
+        </g>
+      </g>
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/icons/NoResultsIcon.tsx b/packages/docs/src/components/docsearch/icons/NoResultsIcon.tsx
new file mode 100644
index 00000000000..8bfa33f346e
--- /dev/null
+++ b/packages/docs/src/components/docsearch/icons/NoResultsIcon.tsx
@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik';
+
+export const NoResultsIcon = component$(() => {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 20 20"
+      fill="none"
+      fill-rule="evenodd"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"></path>
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/icons/RecentIcon.tsx b/packages/docs/src/components/docsearch/icons/RecentIcon.tsx
new file mode 100644
index 00000000000..d4333fa1b15
--- /dev/null
+++ b/packages/docs/src/components/docsearch/icons/RecentIcon.tsx
@@ -0,0 +1,16 @@
+import { component$ } from '@builder.io/qwik';
+
+export const RecentIcon = component$(() => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path
+        d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z"
+        stroke="currentColor"
+        fill="none"
+        fill-rule="evenodd"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/icons/ResetIcon.tsx b/packages/docs/src/components/docsearch/icons/ResetIcon.tsx
new file mode 100644
index 00000000000..033fd99187d
--- /dev/null
+++ b/packages/docs/src/components/docsearch/icons/ResetIcon.tsx
@@ -0,0 +1,16 @@
+import { component$ } from '@builder.io/qwik';
+
+export const ResetIcon = component$(() => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path
+        d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z"
+        stroke="currentColor"
+        fill="none"
+        fill-rule="evenodd"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/icons/SearchIcon.tsx b/packages/docs/src/components/docsearch/icons/SearchIcon.tsx
new file mode 100644
index 00000000000..a8d98db050e
--- /dev/null
+++ b/packages/docs/src/components/docsearch/icons/SearchIcon.tsx
@@ -0,0 +1,16 @@
+import { component$ } from '@builder.io/qwik';
+
+export const SearchIcon = component$(() => {
+  return (
+    <svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20">
+      <path
+        d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+        stroke="currentColor"
+        fill="none"
+        fill-rule="evenodd"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/icons/SelectIcon.tsx b/packages/docs/src/components/docsearch/icons/SelectIcon.tsx
new file mode 100644
index 00000000000..c8eb4022ab9
--- /dev/null
+++ b/packages/docs/src/components/docsearch/icons/SelectIcon.tsx
@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik';
+
+export const SelectIcon = component$(() => {
+  return (
+    <svg class="DocSearch-Hit-Select-Icon" width="20" height="20" viewBox="0 0 20 20">
+      <g
+        stroke="currentColor"
+        fill="none"
+        fill-rule="evenodd"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M18 3v4c0 2-2 4-4 4H2" />
+        <path d="M8 17l-6-6 6-6" />
+      </g>
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/icons/SourceIcon.tsx b/packages/docs/src/components/docsearch/icons/SourceIcon.tsx
new file mode 100644
index 00000000000..ba742b00734
--- /dev/null
+++ b/packages/docs/src/components/docsearch/icons/SourceIcon.tsx
@@ -0,0 +1,55 @@
+import { component$ } from '@builder.io/qwik';
+
+export const LvlIcon = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path
+        d="M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4"
+        stroke="currentColor"
+        fill="none"
+        fill-rule="evenodd"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export const SourceIcon = component$((props: { type: string }) => {
+  switch (props.type) {
+    case 'lvl1':
+      return <LvlIcon />;
+    case 'content':
+      return <ContentIcon />;
+    default:
+      return <AnchorIcon />;
+  }
+});
+
+export function AnchorIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path
+        d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z"
+        stroke="currentColor"
+        fill="none"
+        fill-rule="evenodd"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function ContentIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path
+        d="M17 5H3h14zm0 5H3h14zm0 5H3h14z"
+        stroke="currentColor"
+        fill="none"
+        fill-rule="evenodd"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/docs/src/components/docsearch/icons/StarIcon.tsx b/packages/docs/src/components/docsearch/icons/StarIcon.tsx
new file mode 100644
index 00000000000..76d13168d0c
--- /dev/null
+++ b/packages/docs/src/components/docsearch/icons/StarIcon.tsx
@@ -0,0 +1,15 @@
+import { component$ } from '@builder.io/qwik';
+
+export const StarIcon = component$(() => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path
+        d="M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z"
+        stroke="currentColor"
+        fill="none"
+        fill-rule="evenodd"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/no-results-screen.tsx b/packages/docs/src/components/docsearch/no-results-screen.tsx
new file mode 100644
index 00000000000..710ff3e72f8
--- /dev/null
+++ b/packages/docs/src/components/docsearch/no-results-screen.tsx
@@ -0,0 +1,67 @@
+import { component$, useContext } from '@builder.io/qwik';
+import { SearchContext } from './context';
+import type { DocSearchState } from './doc-search';
+import { NoResultsIcon } from './icons/NoResultsIcon';
+
+export type NoResultsScreenTranslations = Partial<{
+  noResultsText: string;
+  suggestedQueryText: string;
+  reportMissingResultsText: string;
+  reportMissingResultsLinkText: string;
+}>;
+
+type NoResultsScreenProps = {
+  translations?: NoResultsScreenTranslations;
+  state: DocSearchState;
+};
+
+export const NoResultsScreen = component$(
+  ({ translations = {}, ...props }: NoResultsScreenProps) => {
+    const { noResultsText = 'No results for', suggestedQueryText = 'Try searching for' } =
+      translations;
+    const searchSuggestions: string[] | undefined = props.state.context
+      .searchSuggestions as string[];
+    const context: any = useContext(SearchContext);
+
+    return (
+      <div className="DocSearch-NoResults">
+        <div className="DocSearch-Screen-Icon">
+          <NoResultsIcon />
+        </div>
+        <p className="DocSearch-Title">
+          {noResultsText} "<strong>{props.state.query}</strong>"
+        </p>
+
+        {searchSuggestions && searchSuggestions.length > 0 && (
+          <div className="DocSearch-NoResults-Prefill-List">
+            <p className="DocSearch-Help">{suggestedQueryText}:</p>
+            <ul>
+              {searchSuggestions.slice(0, 3).reduce<any[]>(
+                (acc, search) => [
+                  ...acc,
+                  <li key={search}>
+                    <button
+                      className="DocSearch-Prefill"
+                      key={search}
+                      type="button"
+                      onClick$={() => {
+                        context.onInput?.({
+                          target: {
+                            value: search.toLowerCase() + ' ',
+                          },
+                        });
+                      }}
+                    >
+                      {search}
+                    </button>
+                  </li>,
+                ],
+                []
+              )}
+            </ul>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
diff --git a/packages/docs/src/components/docsearch/result.tsx b/packages/docs/src/components/docsearch/result.tsx
new file mode 100644
index 00000000000..638b296e320
--- /dev/null
+++ b/packages/docs/src/components/docsearch/result.tsx
@@ -0,0 +1,116 @@
+import { component$, mutable, Slot, useContext, useStore } from '@builder.io/qwik';
+import { SearchContext } from './context';
+import type { DocSearchState } from './doc-search';
+import { Snippet } from './snippet';
+import type { InternalDocSearchHit } from './types';
+
+export const Result = component$(
+  ({ state, item }: { state: DocSearchState; item: InternalDocSearchHit }) => {
+    const actionStore = useStore({
+      isDeleting: false,
+      isFavoriting: false,
+      action: null,
+    } as {
+      isDeleting: boolean;
+      isFavoriting: boolean;
+    });
+    const context: any = useContext(SearchContext);
+
+    return (
+      <li
+        role="option"
+        aria-selected={state.activeItemId === item.__autocomplete_id ? 'true' : undefined}
+        id={`docsearch-item-${item.__autocomplete_id}`}
+        onMouseMove$={() => {
+          if (state.activeItemId !== item.__autocomplete_id) {
+            state.activeItemId = item.__autocomplete_id;
+          }
+        }}
+        onClick$={(event: MouseEvent) => {
+          const searchList = [
+            event.target,
+            // @ts-ignore
+            event.target?.parentElement,
+            // @ts-ignore
+            event.target?.parentElement.parentElement,
+          ];
+          if (searchList.some((el) => el?.hasAttribute?.('preventdefault:click'))) {
+            return;
+          }
+          context.onSelectItem({
+            item,
+            event,
+          });
+        }}
+        class={[
+          'DocSearch-Hit',
+          (item as unknown as InternalDocSearchHit).__docsearch_parent && 'DocSearch-Hit--Child',
+          actionStore.isDeleting && 'DocSearch-Hit--deleting',
+          actionStore.isFavoriting && 'DocSearch-Hit--favoriting',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <a href={item.url}>
+          <div class="DocSearch-Hit-Container">
+            <Slot name="start-action"></Slot>
+            {/* @ts-ignore */}
+            {item.hierarchy[item.type] && item.type === 'lvl1' && (
+              <div class="DocSearch-Hit-content-wrapper">
+                <Snippet
+                  class="DocSearch-Hit-title"
+                  hit={mutable(item)}
+                  attribute={mutable('hierarchy.lvl1')}
+                />
+                {item.content && (
+                  <Snippet
+                    class="DocSearch-Hit-path"
+                    hit={mutable(item)}
+                    attribute={mutable('content')}
+                  />
+                )}
+              </div>
+            )}
+
+            {/* @ts-ignore */}
+            {item.hierarchy[item.type] &&
+              (item.type === 'lvl2' ||
+                item.type === 'lvl3' ||
+                item.type === 'lvl4' ||
+                item.type === 'lvl5' ||
+                item.type === 'lvl6') && (
+                <div class="DocSearch-Hit-content-wrapper">
+                  <Snippet
+                    class="DocSearch-Hit-title"
+                    hit={mutable(item)}
+                    attribute={mutable(undefined)}
+                  />
+                  <Snippet
+                    class="DocSearch-Hit-path"
+                    hit={mutable(item)}
+                    attribute={mutable('hierarchy.lvl1')}
+                  />
+                </div>
+              )}
+
+            {item.type === 'content' && (
+              <div class="DocSearch-Hit-content-wrapper">
+                <Snippet
+                  class="DocSearch-Hit-title"
+                  hit={mutable(item)}
+                  attribute={mutable('content')}
+                />
+                <Snippet
+                  class="DocSearch-Hit-path"
+                  hit={mutable(item)}
+                  attribute={mutable('hierarchy.lvl1')}
+                />
+              </div>
+            )}
+            <Slot name="end-action"></Slot>
+          </div>
+        </a>
+      </li>
+    );
+  }
+);
diff --git a/packages/docs/src/components/docsearch/results-screen.tsx b/packages/docs/src/components/docsearch/results-screen.tsx
new file mode 100644
index 00000000000..421e4905f9a
--- /dev/null
+++ b/packages/docs/src/components/docsearch/results-screen.tsx
@@ -0,0 +1,64 @@
+import { component$, mutable } from '@builder.io/qwik';
+import { Result } from './result';
+import { removeHighlightTags } from './utils';
+import { SelectIcon } from './icons/SelectIcon';
+import { SourceIcon } from './icons/SourceIcon';
+import type { DocSearchState } from './doc-search';
+
+export const ResultsScreen = component$((props: { state: DocSearchState }) => {
+  return (
+    <div class="DocSearch-Dropdown-Container">
+      {props.state.collections.map((collection) => {
+        if (collection.items.length === 0) {
+          return null;
+        }
+
+        const title = removeHighlightTags(collection.items[0]);
+        return (
+          <section class="DocSearch-Hits">
+            <div class="DocSearch-Hit-source">{title}</div>
+
+            <ul role="listbox" aria-labelledby="docsearch-label" id="docsearch-list">
+              {collection.items.map((item, index) => {
+                return (
+                  <Result state={props.state} item={mutable(item)}>
+                    {item.__docsearch_parent && (
+                      <svg q:slot="start-action" class="DocSearch-Hit-Tree" viewBox="0 0 24 54">
+                        <g
+                          stroke="currentColor"
+                          fill="none"
+                          fill-rule="evenodd"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          {item.__docsearch_parent !==
+                          collection.items[index + 1]?.__docsearch_parent ? (
+                            <path d="M8 6v21M20 27H8.3" />
+                          ) : (
+                            <path d="M8 6v42M20 27H8.3" />
+                          )}
+                        </g>
+                      </svg>
+                    )}
+                    <div q:slot="start-action" class="DocSearch-Hit-icon">
+                      <SourceIcon type={mutable(item.type)} />
+                    </div>
+                    <div q:slot="end-action" class="DocSearch-Hit-action">
+                      <SelectIcon />
+                    </div>
+                  </Result>
+                );
+              })}
+            </ul>
+          </section>
+        );
+      })}
+
+      {/* {props.resultsFooterComponent && (
+        <section class="DocSearch-HitsFooter">
+          <props.resultsFooterComponent state={props.state} />
+        </section>
+      )} */}
+    </div>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/screen-state.tsx b/packages/docs/src/components/docsearch/screen-state.tsx
new file mode 100644
index 00000000000..69611aa9695
--- /dev/null
+++ b/packages/docs/src/components/docsearch/screen-state.tsx
@@ -0,0 +1,58 @@
+import { component$, Ref } from '@builder.io/qwik';
+
+import type { DocSearchState } from './doc-search';
+import type { ErrorScreenTranslations } from './error-screen';
+import { ErrorScreen } from './error-screen';
+import type { NoResultsScreenTranslations } from './no-results-screen';
+import { NoResultsScreen } from './no-results-screen';
+import { ResultsScreen } from './results-screen';
+import type { StartScreenTranslations } from './start-screen';
+import { StartScreen } from './start-screen';
+
+export type ScreenStateTranslations = Partial<{
+  errorScreen: ErrorScreenTranslations;
+  startScreen: StartScreenTranslations;
+  noResultsScreen: NoResultsScreenTranslations;
+}>;
+
+export interface ScreenStateProps {
+  state: DocSearchState;
+  inputRef: Ref<HTMLInputElement | null>;
+  disableUserPersonalization: boolean;
+  translations: ScreenStateTranslations;
+}
+
+export const ScreenState = component$(
+  ({ translations = {}, state, disableUserPersonalization }: ScreenStateProps) => {
+    if (state.status === 'error') {
+      return <ErrorScreen translations={translations?.errorScreen} />;
+    }
+
+    const hasCollections = state.collections.some((collection) => collection.items.length > 0);
+
+    if (!state.query) {
+      return (
+        <StartScreen
+          disableUserPersonalization={disableUserPersonalization}
+          state={state}
+          translations={translations?.startScreen}
+        />
+      );
+    }
+
+    if (hasCollections === false) {
+      return <NoResultsScreen state={state} translations={translations?.noResultsScreen} />;
+    }
+
+    return <ResultsScreen state={state} />;
+  }
+);
+
+// TODO: prevent UI flickering
+// function areEqual(_prevProps, nextProps) {
+//   // We don't update the screen when Autocomplete is loading or stalled to
+//   // avoid UI flashes:
+//   //  - Empty screen → Results screen
+//   //  - NoResults screen → NoResults screen with another query
+//   return nextProps.state.status === 'loading' || nextProps.state.status === 'stalled';
+// }
diff --git a/packages/docs/src/components/docsearch/search-box.tsx b/packages/docs/src/components/docsearch/search-box.tsx
new file mode 100644
index 00000000000..f5888c067d3
--- /dev/null
+++ b/packages/docs/src/components/docsearch/search-box.tsx
@@ -0,0 +1,172 @@
+import { getNextActiveItemId } from '@algolia/autocomplete-core/dist/esm/utils';
+import { getItemsCount } from '@algolia/autocomplete-shared';
+import { component$, Ref, useClientEffect$, useContext } from '@builder.io/qwik';
+
+import { MAX_QUERY_SIZE } from './constants';
+import { SearchContext } from './context';
+import type { DocSearchState } from './doc-search';
+import { LoadingIcon } from './icons/LoadingIcon';
+import { ResetIcon } from './icons/ResetIcon';
+import { SearchIcon } from './icons/SearchIcon';
+import { getActiveItem } from './utils/getActiveItem';
+
+export type SearchBoxTranslations = Partial<{
+  resetButtonTitle: string;
+  resetButtonAriaLabel: string;
+  cancelButtonText: string;
+  cancelButtonAriaLabel: string;
+}>;
+
+interface SearchBoxProps {
+  state: DocSearchState;
+  autoFocus: boolean;
+  inputRef: Ref<HTMLInputElement | null>;
+  onClose$: () => void;
+  translations?: SearchBoxTranslations;
+}
+
+export const SearchBox = component$(({ translations = {}, ...props }: SearchBoxProps) => {
+  const {
+    resetButtonTitle = 'Clear the query',
+    resetButtonAriaLabel = 'Clear the query',
+    cancelButtonText = 'Cancel',
+    cancelButtonAriaLabel = 'Cancel',
+  } = translations;
+
+  useClientEffect$(() => {
+    if (props.autoFocus) {
+      props.inputRef.current?.focus();
+    }
+  });
+  const context: any = useContext(SearchContext);
+  return (
+    <>
+      <form
+        class="DocSearch-Form"
+        noValidate={true}
+        role="search"
+        action=""
+        preventdefault:submit
+        onReset$={() => {
+          props.state.query = '';
+          props.state.status = 'idle';
+          props.state.activeItemId = null;
+        }}
+      >
+        <label class="DocSearch-MagnifierLabel" htmlFor="docsearch-input" id="docsearch-label">
+          <SearchIcon />
+        </label>
+
+        <div class="DocSearch-LoadingIndicator">
+          <LoadingIcon />
+        </div>
+
+        <input
+          class="DocSearch-Input"
+          aria-autocomplete="both"
+          aria-activedescendant={undefined ? '' : 'docsearch-item-ITEM_ID'}
+          aria-control="docsearch-list"
+          aria-labelledby="docsearch-label"
+          value={props.state.query}
+          id="docsearch-input"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          maxLength={MAX_QUERY_SIZE}
+          enterKeyHint={props.state.activeItemId ? 'go' : 'search'}
+          spellCheck="false"
+          autoFocus={props.autoFocus}
+          placeholder="Search docs"
+          type="search"
+          ref={props.inputRef as any}
+          onInput$={(event: Event) => {
+            context.onInput?.(event);
+          }}
+          onChange$={(event: Event) => {
+            context.onInput?.(event);
+          }}
+          // TODO: preventdefault:keydown by key's condition
+          onKeyDown$={(event) => {
+            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+              const nextActiveId = getNextActiveItemId(
+                event.key === 'ArrowUp' ? -1 : 1,
+                props.state.activeItemId,
+                getItemsCount(props.state),
+                null
+              );
+              if (nextActiveId !== props.state.activeItemId) {
+                props.state.activeItemId = nextActiveId;
+                // scroll to if necessary
+                if (typeof document !== 'undefined') {
+                  const nodeItem = document.getElementById(
+                    `docsearch-item-${props.state.activeItemId}`
+                  );
+                  if (nodeItem) {
+                    if ((nodeItem as any).scrollIntoViewIfNeeded) {
+                      (nodeItem as any).scrollIntoViewIfNeeded(false);
+                    } else {
+                      nodeItem.scrollIntoView(false);
+                    }
+                  }
+                }
+              }
+            }
+            if (event.key === 'Escape') {
+              props.state.isOpen = false;
+              // TODO: cancel pending request
+            }
+            if (event.key === 'Enter') {
+              const { item, itemUrl } = getActiveItem({
+                ...props.state,
+              } as any)!;
+              if (event.metaKey || event.ctrlKey) {
+                if (itemUrl !== undefined) {
+                  context.onSelectItem({ item, event });
+                  const windowReference = window.open(itemUrl, '_blank', 'noopener');
+                  windowReference?.focus();
+                }
+              } else if (event.shiftKey) {
+                if (itemUrl !== undefined) {
+                  context.onSelectItem({ item, event });
+                  window.open(itemUrl, '_blank', 'noopener');
+                }
+              } else if (event.altKey) {
+                // Keep native browser behavior
+              } else {
+                if (itemUrl !== undefined) {
+                  context.onSelectItem({ item, event });
+                  location.assign(itemUrl);
+                }
+              }
+            }
+          }}
+          onFocus$={(e) => {
+            // noop
+          }}
+          onClick$={(e) => {
+            // noop
+          }}
+        />
+
+        <button
+          type="reset"
+          title={resetButtonTitle}
+          class="DocSearch-Reset"
+          aria-label={resetButtonAriaLabel}
+          hidden={!props.state.query}
+        >
+          <ResetIcon />
+        </button>
+      </form>
+
+      <button
+        class="DocSearch-Cancel"
+        type="reset"
+        aria-label={cancelButtonAriaLabel}
+        onClick$={() => props.onClose$.apply(null, [])}
+      >
+        {cancelButtonText}
+      </button>
+    </>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/snippet.tsx b/packages/docs/src/components/docsearch/snippet.tsx
new file mode 100644
index 00000000000..3d26d39ca28
--- /dev/null
+++ b/packages/docs/src/components/docsearch/snippet.tsx
@@ -0,0 +1,26 @@
+import { component$, mutable } from '@builder.io/qwik';
+
+export function getPropertyByPath(object: Record<string, any>, path: string): any {
+  const parts = path.split('.');
+
+  return parts.reduce((prev, current) => {
+    if (prev?.[current]) return prev[current];
+    return null;
+  }, object);
+}
+
+interface SnippetProps<TItem> {
+  hit: TItem;
+  attribute?: string;
+  tagName?: string;
+  [prop: string]: unknown;
+}
+
+export const Snippet = component$(
+  ({ hit, attribute, tagName = 'span', ...rest }: SnippetProps<any>) => {
+    const data =
+      getPropertyByPath(hit, `_snippetResult.${attribute ?? `hierarchy.${hit.type}`}.value`) ||
+      getPropertyByPath(hit, attribute ?? `hierarchy.${hit.type}`);
+    return <span {...rest} dangerouslySetInnerHTML={data} />;
+  }
+);
diff --git a/packages/docs/src/components/docsearch/start-screen.tsx b/packages/docs/src/components/docsearch/start-screen.tsx
new file mode 100644
index 00000000000..17f7965907d
--- /dev/null
+++ b/packages/docs/src/components/docsearch/start-screen.tsx
@@ -0,0 +1,134 @@
+import { RecentIcon } from './icons/RecentIcon';
+import { ResetIcon } from './icons/ResetIcon';
+import { StarIcon } from './icons/StarIcon';
+import { Result } from './result';
+import type { ScreenStateProps } from './screen-state';
+import { component$, mutable, useContext } from '@builder.io/qwik';
+import { SearchContext } from './context';
+
+export type StartScreenTranslations = Partial<{
+  recentSearchesTitle: string;
+  noRecentSearchesText: string;
+  saveRecentSearchButtonTitle: string;
+  removeRecentSearchButtonTitle: string;
+  favoriteSearchesTitle: string;
+  removeFavoriteSearchButtonTitle: string;
+}>;
+
+type StartScreenProps = Pick<ScreenStateProps, 'state' | 'disableUserPersonalization'> & {
+  translations?: StartScreenTranslations;
+};
+
+export const StartScreen = component$(({ translations = {}, ...props }: StartScreenProps) => {
+  const {
+    recentSearchesTitle = 'Recent',
+    noRecentSearchesText = 'No recent searches',
+    saveRecentSearchButtonTitle = 'Save this search',
+    removeRecentSearchButtonTitle = 'Remove this search from history',
+    favoriteSearchesTitle = 'Favorite',
+    removeFavoriteSearchButtonTitle = 'Remove this search from favorites',
+  } = translations;
+  const context: any = useContext(SearchContext);
+  const hasCollections = props.state.collections.some((collection) => collection.items.length > 0);
+  if (props.state.status === 'idle' && hasCollections === false) {
+    if (props.disableUserPersonalization) {
+      return null;
+    }
+
+    return (
+      <div className="DocSearch-StartScreen">
+        <p className="DocSearch-Help">{noRecentSearchesText}</p>
+      </div>
+    );
+  }
+
+  if (hasCollections === false) {
+    return null;
+  }
+  const recentCollection = props.state.collections[0];
+  const favCollection = props.state.collections[1];
+  return (
+    <div className="DocSearch-Dropdown-Container">
+      <section class="DocSearch-Hits">
+        <div class="DocSearch-Hit-source">{recentSearchesTitle}</div>
+
+        <ul role="listbox" aria-labelledby="docsearch-label" id="docsearch-list">
+          {recentCollection.items.map((item, index) => {
+            return (
+              <Result state={props.state} item={mutable(item)}>
+                <div q:slot="start-action" className="DocSearch-Hit-icon">
+                  <RecentIcon />
+                </div>
+                <div q:slot="end-action" class="DocSearch-Hit-action">
+                  <button
+                    className="DocSearch-Hit-action-button"
+                    title={saveRecentSearchButtonTitle}
+                    type="submit"
+                    preventDefault:click
+                    onClick$={(event) => {
+                      // @ts-ignore
+                      props.state.favoriteSearches?.add(item);
+                      // @ts-ignore
+                      props.state.recentSearches?.remove(item);
+                      // @ts-ignore
+                      context.onInput({ target: { value: '' } });
+                    }}
+                  >
+                    <StarIcon />
+                  </button>
+                </div>
+                <div className="DocSearch-Hit-action">
+                  <button
+                    className="DocSearch-Hit-action-button"
+                    title={removeRecentSearchButtonTitle}
+                    type="submit"
+                    preventDefault:click
+                    onClick$={(event) => {
+                      // @ts-ignore
+                      props.state.recentSearches?.remove(item);
+                      // @ts-ignore
+                      context.onInput({ target: { value: '' } });
+                    }}
+                  >
+                    <ResetIcon />
+                  </button>
+                </div>
+              </Result>
+            );
+          })}
+        </ul>
+      </section>
+      <section class="DocSearch-Hits">
+        <div class="DocSearch-Hit-source">{favoriteSearchesTitle}</div>
+
+        <ul role="listbox" aria-labelledby="docsearch-label" id="docsearch-list">
+          {favCollection.items.map((item, index) => {
+            return (
+              <Result state={props.state} item={mutable(item)}>
+                <div q:slot="start-action" className="DocSearch-Hit-icon">
+                  <StarIcon />
+                </div>
+                <div q:slot="end-action" class="DocSearch-Hit-action">
+                  <button
+                    className="DocSearch-Hit-action-button"
+                    title={removeFavoriteSearchButtonTitle}
+                    type="submit"
+                    preventDefault:click
+                    onClick$={(event) => {
+                      // @ts-ignore
+                      props.state.favoriteSearches?.remove(item);
+                      // @ts-ignore
+                      context.onInput({ target: { value: '' } });
+                    }}
+                  >
+                    <ResetIcon />
+                  </button>
+                </div>
+              </Result>
+            );
+          })}
+        </ul>
+      </section>
+    </div>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/stored-searches.ts b/packages/docs/src/components/docsearch/stored-searches.ts
new file mode 100644
index 00000000000..c2aca82e14d
--- /dev/null
+++ b/packages/docs/src/components/docsearch/stored-searches.ts
@@ -0,0 +1,82 @@
+import { noSerialize } from '@builder.io/qwik';
+import type { DocSearchHit, StoredDocSearchHit } from './types';
+
+function isLocalStorageSupported() {
+  const key = '__TEST_KEY__';
+
+  try {
+    localStorage.setItem(key, '');
+    localStorage.removeItem(key);
+
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+function createStorage<TItem>(key: string) {
+  if (isLocalStorageSupported() === false) {
+    return {
+      setItem() {},
+      getItem() {
+        return [];
+      },
+    };
+  }
+
+  return {
+    setItem(item: TItem[]) {
+      return window.localStorage.setItem(key, JSON.stringify(item));
+    },
+    getItem(): TItem[] {
+      const item = window.localStorage.getItem(key);
+
+      return item ? JSON.parse(item) : [];
+    },
+  };
+}
+
+type CreateStoredSearchesOptions = {
+  key: string;
+  limit?: number;
+};
+
+export type StoredSearchPlugin<TItem> = {
+  add: (item: TItem) => void;
+  remove: (item: TItem) => void;
+  getAll: () => TItem[];
+};
+
+export function createStoredSearches<TItem extends StoredDocSearchHit>({
+  key,
+  limit = 5,
+}: CreateStoredSearchesOptions): StoredSearchPlugin<TItem> {
+  const storage = createStorage<TItem>(key);
+  let items = storage.getItem().slice(0, limit);
+
+  // @ts-ignore
+  return noSerialize({
+    add(item: TItem) {
+      const { _highlightResult, _snippetResult, ...hit } = item as unknown as DocSearchHit;
+
+      const isQueryAlreadySaved = items.findIndex((x) => x.objectID === hit.objectID);
+
+      if (isQueryAlreadySaved > -1) {
+        items.splice(isQueryAlreadySaved, 1);
+      }
+
+      items.unshift(hit as TItem);
+      items = items.slice(0, limit);
+
+      storage.setItem(items);
+    },
+    remove(item: TItem) {
+      items = items.filter((x) => x.objectID !== item.objectID);
+
+      storage.setItem(items);
+    },
+    getAll() {
+      return items;
+    },
+  });
+}
diff --git a/packages/docs/src/components/docsearch/types/DocSearchHit.ts b/packages/docs/src/components/docsearch/types/DocSearchHit.ts
new file mode 100644
index 00000000000..609ac55a856
--- /dev/null
+++ b/packages/docs/src/components/docsearch/types/DocSearchHit.ts
@@ -0,0 +1,73 @@
+type ContentType = 'content' | 'lvl0' | 'lvl1' | 'lvl2' | 'lvl3' | 'lvl4' | 'lvl5' | 'lvl6';
+
+interface DocSearchHitAttributeHighlightResult {
+  value: string;
+  matchLevel: 'full' | 'none' | 'partial';
+  matchedWords: string[];
+  fullyHighlighted?: boolean;
+}
+
+interface DocSearchHitHighlightResultHierarchy {
+  lvl0: DocSearchHitAttributeHighlightResult;
+  lvl1: DocSearchHitAttributeHighlightResult;
+  lvl2: DocSearchHitAttributeHighlightResult;
+  lvl3: DocSearchHitAttributeHighlightResult;
+  lvl4: DocSearchHitAttributeHighlightResult;
+  lvl5: DocSearchHitAttributeHighlightResult;
+  lvl6: DocSearchHitAttributeHighlightResult;
+}
+
+interface DocSearchHitHighlightResult {
+  content: DocSearchHitAttributeHighlightResult;
+  hierarchy: DocSearchHitHighlightResultHierarchy;
+  hierarchy_camel: DocSearchHitHighlightResultHierarchy[];
+}
+
+interface DocSearchHitAttributeSnippetResult {
+  value: string;
+  matchLevel: 'full' | 'none' | 'partial';
+}
+
+interface DocSearchHitSnippetResult {
+  content: DocSearchHitAttributeSnippetResult;
+  hierarchy: DocSearchHitHighlightResultHierarchy;
+  hierarchy_camel: DocSearchHitHighlightResultHierarchy[];
+}
+
+export declare type DocSearchHit = {
+  objectID: string;
+  content: string | null;
+  url: string;
+  url_without_anchor: string;
+  type: ContentType;
+  anchor: string | null;
+  hierarchy: {
+    lvl0: string;
+    lvl1: string;
+    lvl2: string | null;
+    lvl3: string | null;
+    lvl4: string | null;
+    lvl5: string | null;
+    lvl6: string | null;
+  };
+  _highlightResult: DocSearchHitHighlightResult;
+  _snippetResult: DocSearchHitSnippetResult;
+  _rankingInfo?: {
+    promoted: boolean;
+    nbTypos: number;
+    firstMatchedWord: number;
+    proximityDistance?: number;
+    geoDistance: number;
+    geoPrecision?: number;
+    nbExactWords: number;
+    words: number;
+    filters: number;
+    userScore: number;
+    matchedGeoLocation?: {
+      lat: number;
+      lng: number;
+      distance: number;
+    };
+  };
+  _distinctSeqID?: number;
+};
diff --git a/packages/docs/src/components/docsearch/types/InternalDocSearchHit.ts b/packages/docs/src/components/docsearch/types/InternalDocSearchHit.ts
new file mode 100644
index 00000000000..7830c4fa0ea
--- /dev/null
+++ b/packages/docs/src/components/docsearch/types/InternalDocSearchHit.ts
@@ -0,0 +1,6 @@
+import type { DocSearchHit } from './DocSearchHit';
+
+export type InternalDocSearchHit = DocSearchHit & {
+  __docsearch_parent: InternalDocSearchHit | null;
+  __autocomplete_id: number;
+};
diff --git a/packages/docs/src/components/docsearch/types/StoredDocSearchHit.ts b/packages/docs/src/components/docsearch/types/StoredDocSearchHit.ts
new file mode 100644
index 00000000000..fecd79413d4
--- /dev/null
+++ b/packages/docs/src/components/docsearch/types/StoredDocSearchHit.ts
@@ -0,0 +1,3 @@
+import type { DocSearchHit } from './DocSearchHit';
+
+export type StoredDocSearchHit = Omit<DocSearchHit, '_highlightResult' | '_snippetResult'>;
diff --git a/packages/docs/src/components/docsearch/types/index.ts b/packages/docs/src/components/docsearch/types/index.ts
new file mode 100644
index 00000000000..93285bd19d8
--- /dev/null
+++ b/packages/docs/src/components/docsearch/types/index.ts
@@ -0,0 +1,3 @@
+export * from './DocSearchHit';
+export * from './InternalDocSearchHit';
+export * from './StoredDocSearchHit';
diff --git a/packages/docs/src/components/docsearch/useTouchEvents.ts b/packages/docs/src/components/docsearch/useTouchEvents.ts
new file mode 100644
index 00000000000..7fb2d3d904e
--- /dev/null
+++ b/packages/docs/src/components/docsearch/useTouchEvents.ts
@@ -0,0 +1,34 @@
+import type { AutocompleteApi } from '@algolia/autocomplete-core';
+import { useWatch$ } from '@builder.io/qwik';
+
+interface UseTouchEventsProps {
+  getEnvironmentProps: AutocompleteApi<any>['getEnvironmentProps'];
+  panelElement: HTMLDivElement | null;
+  formElement: HTMLDivElement | null;
+  inputElement: HTMLInputElement | null;
+}
+
+export function useTouchEvents({
+  getEnvironmentProps,
+  panelElement,
+  formElement,
+  inputElement,
+}: UseTouchEventsProps) {
+  useWatch$(() => {
+    // TODO:
+    // if (!(panelElement && formElement && inputElement)) {
+    //   return undefined;
+    // }
+    // const { onTouchStart, onTouchMove } = getEnvironmentProps({
+    //   panelElement,
+    //   formElement,
+    //   inputElement,
+    // });
+    // window.addEventListener('touchstart', onTouchStart);
+    // window.addEventListener('touchmove', onTouchMove);
+    // return () => {
+    //   window.removeEventListener('touchstart', onTouchStart);
+    //   window.removeEventListener('touchmove', onTouchMove);
+    // };
+  });
+}
diff --git a/packages/docs/src/components/docsearch/useTrapFocus.ts b/packages/docs/src/components/docsearch/useTrapFocus.ts
new file mode 100644
index 00000000000..24b2d69b84a
--- /dev/null
+++ b/packages/docs/src/components/docsearch/useTrapFocus.ts
@@ -0,0 +1,42 @@
+import { useWatch$ } from '@builder.io/qwik';
+
+interface UseTrapFocusProps {
+  containerRef: any;
+}
+
+export function useTrapFocus(props: UseTrapFocusProps) {
+  useWatch$(({ track }) => {
+    const container = track(props.containerRef, 'current') as HTMLElement;
+    if (!container) {
+      return undefined;
+    }
+
+    const focusableElements = container.querySelectorAll<HTMLElement>(
+      'a[href]:not([disabled]), button:not([disabled]), input:not([disabled])'
+    );
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    function trapFocus(event: KeyboardEvent) {
+      if (event.key !== 'Tab') {
+        return;
+      }
+
+      if (event.shiftKey) {
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+      } else if (document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+
+    container.addEventListener('keydown', trapFocus);
+
+    return () => {
+      container.removeEventListener('keydown', trapFocus);
+    };
+  });
+}
diff --git a/packages/docs/src/components/docsearch/utils/getActiveItem.ts b/packages/docs/src/components/docsearch/utils/getActiveItem.ts
new file mode 100644
index 00000000000..8ff6da80cc7
--- /dev/null
+++ b/packages/docs/src/components/docsearch/utils/getActiveItem.ts
@@ -0,0 +1,89 @@
+import type {
+  AutocompleteCollection,
+  AutocompleteState,
+  BaseItem,
+} from '@algolia/autocomplete-core';
+
+// We don't have access to the autocomplete source when we call `onKeyDown`
+// or `onClick` because those are native browser events.
+
+// However, we can get the source from the suggestion index.
+function getCollectionFromActiveItemId<TItem extends BaseItem>(
+  state: AutocompleteState<TItem>
+): AutocompleteCollection<TItem> | undefined {
+  // Given 3 sources with respectively 1, 2 and 3 suggestions: [1, 2, 3]
+  // We want to get the accumulated counts:
+  // [1, 1 + 2, 1 + 2 + 3] = [1, 3, 3 + 3] = [1, 3, 6]
+  const accumulatedCollectionsCount = state.collections
+    .map((collections) => collections.items.length)
+    .reduce<number[]>((acc, collectionsCount, index) => {
+      const previousValue = acc[index - 1] || 0;
+      const nextValue = previousValue + collectionsCount;
+
+      acc.push(nextValue);
+
+      return acc;
+    }, []);
+
+  // Based on the accumulated counts, we can infer the index of the suggestion.
+  const collectionIndex = accumulatedCollectionsCount.reduce((acc, current) => {
+    if (current <= state.activeItemId!) {
+      return acc + 1;
+    }
+
+    return acc;
+  }, 0);
+
+  return state.collections[collectionIndex];
+}
+
+/**
+ * Gets the highlighted index relative to a suggestion object (not the absolute
+ * highlighted index).
+ *
+ * Example:
+ *  [['a', 'b'], ['c', 'd', 'e'], ['f']]
+ *                      ↑
+ *         (absolute: 3, relative: 1)
+ */
+function getRelativeActiveItemId<TItem extends BaseItem>({
+  state,
+  collection,
+}: {
+  state: AutocompleteState<TItem>;
+  collection: AutocompleteCollection<TItem>;
+}): number {
+  let isOffsetFound = false;
+  let counter = 0;
+  let previousItemsOffset = 0;
+
+  while (isOffsetFound === false) {
+    const currentCollection = state.collections[counter];
+
+    if (currentCollection === collection) {
+      isOffsetFound = true;
+      break;
+    }
+
+    previousItemsOffset += currentCollection.items.length;
+
+    counter++;
+  }
+
+  return state.activeItemId! - previousItemsOffset;
+}
+
+export function getActiveItem<TItem extends BaseItem>(state: AutocompleteState<TItem>) {
+  const collection = getCollectionFromActiveItemId(state);
+
+  if (!collection) {
+    return null;
+  }
+
+  const item = collection.items[getRelativeActiveItemId({ state, collection })];
+
+  return {
+    item,
+    itemUrl: item.url as string,
+  };
+}
diff --git a/packages/docs/src/components/docsearch/utils/groupBy.ts b/packages/docs/src/components/docsearch/utils/groupBy.ts
new file mode 100644
index 00000000000..d0408bc408d
--- /dev/null
+++ b/packages/docs/src/components/docsearch/utils/groupBy.ts
@@ -0,0 +1,20 @@
+export function groupBy<TValue extends Record<string, unknown>>(
+  values: TValue[],
+  predicate: (value: TValue) => string
+): Record<string, TValue[]> {
+  return values.reduce<Record<string, TValue[]>>((acc, item) => {
+    const key = predicate(item);
+
+    if (!acc.hasOwnProperty(key)) {
+      acc[key] = [];
+    }
+
+    // We limit each section to show 5 hits maximum.
+    // This acts as a frontend alternative to `distinct`.
+    if (acc[key].length < 5) {
+      acc[key].push(item);
+    }
+
+    return acc;
+  }, {});
+}
diff --git a/packages/docs/src/components/docsearch/utils/identity.ts b/packages/docs/src/components/docsearch/utils/identity.ts
new file mode 100644
index 00000000000..440329edf7c
--- /dev/null
+++ b/packages/docs/src/components/docsearch/utils/identity.ts
@@ -0,0 +1,3 @@
+export function identity<TParam>(x: TParam): TParam {
+  return x;
+}
diff --git a/packages/docs/src/components/docsearch/utils/index.ts b/packages/docs/src/components/docsearch/utils/index.ts
new file mode 100644
index 00000000000..d070520aff4
--- /dev/null
+++ b/packages/docs/src/components/docsearch/utils/index.ts
@@ -0,0 +1,4 @@
+export * from './groupBy';
+export * from './identity';
+export * from './noop';
+export * from './removeHighlightTags';
diff --git a/packages/docs/src/components/docsearch/utils/isSamsung.ts b/packages/docs/src/components/docsearch/utils/isSamsung.ts
new file mode 100644
index 00000000000..ea849ca085f
--- /dev/null
+++ b/packages/docs/src/components/docsearch/utils/isSamsung.ts
@@ -0,0 +1,5 @@
+const regex = /((gt|sm)-|galaxy nexus)|samsung[- ]/i;
+
+export function isSamsung(userAgent: string) {
+  return Boolean(userAgent && userAgent.match(regex));
+}
diff --git a/packages/docs/src/components/docsearch/utils/noop.ts b/packages/docs/src/components/docsearch/utils/noop.ts
new file mode 100644
index 00000000000..cadb2cd0f59
--- /dev/null
+++ b/packages/docs/src/components/docsearch/utils/noop.ts
@@ -0,0 +1 @@
+export function noop(..._args: any[]): void {}
diff --git a/packages/docs/src/components/docsearch/utils/removeHighlightTags.ts b/packages/docs/src/components/docsearch/utils/removeHighlightTags.ts
new file mode 100644
index 00000000000..b5f0337d61c
--- /dev/null
+++ b/packages/docs/src/components/docsearch/utils/removeHighlightTags.ts
@@ -0,0 +1,19 @@
+import type { DocSearchHit, InternalDocSearchHit } from '../types';
+
+const regexHighlightTags = /(<mark>|<\/mark>)/g;
+const regexHasHighlightTags = RegExp(regexHighlightTags.source);
+
+export function removeHighlightTags(hit: DocSearchHit | InternalDocSearchHit): string {
+  const internalDocSearchHit = hit as InternalDocSearchHit;
+
+  if (!internalDocSearchHit.__docsearch_parent && !hit._highlightResult) {
+    return hit.hierarchy.lvl0;
+  }
+
+  const { value } =
+    (internalDocSearchHit.__docsearch_parent
+      ? internalDocSearchHit.__docsearch_parent?._highlightResult?.hierarchy?.lvl0
+      : hit._highlightResult?.hierarchy?.lvl0) || {};
+
+  return value && regexHasHighlightTags.test(value) ? value.replace(regexHighlightTags, '') : value;
+}
diff --git a/packages/docs/src/components/docsearch/utils/stalledControl.ts b/packages/docs/src/components/docsearch/utils/stalledControl.ts
new file mode 100644
index 00000000000..9759fede5e6
--- /dev/null
+++ b/packages/docs/src/components/docsearch/utils/stalledControl.ts
@@ -0,0 +1,15 @@
+const stallThreshold = 200;
+let stalledTimer: any;
+
+export function setStalled(cb: () => void) {
+  stalledTimer = setTimeout(() => {
+    cb();
+  }, stallThreshold);
+}
+
+export function clearStalled() {
+  if (stalledTimer) {
+    clearTimeout(stalledTimer);
+    stalledTimer = undefined;
+  }
+}
diff --git a/packages/docs/src/components/docsearch/version.ts b/packages/docs/src/components/docsearch/version.ts
new file mode 100644
index 00000000000..e8e3a5014b9
--- /dev/null
+++ b/packages/docs/src/components/docsearch/version.ts
@@ -0,0 +1 @@
+export const version = '3.2.0';
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 21bfd89ff60..82ff3965553 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -1,7 +1,6 @@
 import { useLocation } from '@builder.io/qwik-city';
 import { component$, $, useStyles$, useContext } from '@builder.io/qwik';
-// @ts-ignore
-import { DocSearch } from 'docsearch-qwik';
+import { DocSearch } from '../docsearch/doc-search';
 import { CloseIcon } from '../svgs/close-icon';
 import { DiscordLogo } from '../svgs/discord-logo';
 import { GithubLogo } from '../svgs/github-logo';
@@ -32,7 +31,6 @@ export const Header = component$(() => {
             <span className="sr-only">Qwik Homepage</span>
             <QwikLogo width={110} height={50} />
           </a>
-          {/*  @ts-ignore */}
           <DocSearch
             appId={import.meta.env.VITE_ALGOLIA_APP_ID}
             apiKey={import.meta.env.VITE_ALGOLIA_SEARCH_KEY}
diff --git a/packages/docs/src/global.css b/packages/docs/src/global.css
index c314d3cf2e1..7661273db28 100644
--- a/packages/docs/src/global.css
+++ b/packages/docs/src/global.css
@@ -1,5 +1,4 @@
 @import 'prism-themes/themes/prism-dracula.css';
-@import '@docsearch/css';
 
 code[class*='language-'],
 pre[class*='language-'] {
diff --git a/yarn.lock b/yarn.lock
index 8c9f35d763d..d50d50d2179 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -311,14 +311,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@builder.io/qwik@npm:0.0.100-dev20220820024200":
-  version: 0.0.100-dev20220820024200
-  resolution: "@builder.io/qwik@npm:0.0.100-dev20220820024200"
-  checksum: b9dd2dfad5c6d7a5e34402cd62c4278875df427a9fd7022f33ba9a447a70c47a301f424f34490b4888866455e2bed9aa1b09f42d5bab2bdb8e8dd7e6ea13c161
-  languageName: node
-  linkType: hard
-
-"@builder.io/qwik@workspace:*, @builder.io/qwik@workspace:packages/qwik":
+"@builder.io/qwik@^0.0.100, @builder.io/qwik@workspace:*, @builder.io/qwik@workspace:packages/qwik":
   version: 0.0.0-use.local
   resolution: "@builder.io/qwik@workspace:packages/qwik"
   languageName: unknown
@@ -3275,17 +3268,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"docsearch-qwik@npm:0.0.3":
-  version: 0.0.3
-  resolution: "docsearch-qwik@npm:0.0.3"
-  dependencies:
-    "@algolia/autocomplete-core": ^1.7.1
-    "@algolia/client-search": ^4.14.2
-    algoliasearch: ^4.14.2
-  checksum: e309a19a61bce1d57ff78f72b349b463e71f5abc900cbb6e4f425938f182c2fe9d16f06096566e8ddcc35a3348b6b0f6ada0faace89e0e4d03b0b85abc240643
-  languageName: node
-  linkType: hard
-
 "doctrine@npm:^3.0.0":
   version: 3.0.0
   resolution: "doctrine@npm:3.0.0"
@@ -7568,13 +7550,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "qwik-docs@workspace:packages/docs"
   dependencies:
+    "@algolia/autocomplete-core": ^1.7.1
+    "@algolia/client-search": ^4.14.2
     "@builder.io/partytown": ^0.6.4
-    "@builder.io/qwik": 0.0.100-dev20220820024200
+    "@builder.io/qwik": ^0.0.100
     "@builder.io/qwik-city": 0.0.101-3
     "@cloudflare/kv-asset-handler": 0.2.0
     "@docsearch/css": ^3.2.0
+    algoliasearch: ^4.14.2
     autoprefixer: 10.4.7
-    docsearch-qwik: 0.0.3
     fflate: ^0.7.3
     node-fetch: 3.2.9
     postcss: 8.4.14

From d4cb7b1ca241ff2c4fb52db616515cef76eb67a5 Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Mon, 22 Aug 2022 23:16:35 +0800
Subject: [PATCH 12/25] fix: remove irrelevant code

---
 packages/docs/.env                            |  3 +-
 packages/docs/README.md                       | 15 ++++------
 packages/docs/package.json                    |  4 +--
 .../docs/src/components/docsearch/README.md   |  2 +-
 .../docs/src/components/header/header.tsx     | 22 +++++++++++----
 packages/docs/src/routes/robot.txt/index.ts   |  8 ------
 packages/docs/src/routes/sitemap.xml/index.ts | 28 -------------------
 yarn.lock                                     | 27 +++++++++++++++---
 8 files changed, 50 insertions(+), 59 deletions(-)
 delete mode 100644 packages/docs/src/routes/robot.txt/index.ts
 delete mode 100644 packages/docs/src/routes/sitemap.xml/index.ts

diff --git a/packages/docs/.env b/packages/docs/.env
index a39ce0a6a4f..af399eac3ed 100644
--- a/packages/docs/.env
+++ b/packages/docs/.env
@@ -1,2 +1,3 @@
 VITE_ALGOLIA_APP_ID=EGKUXMJIF5
-VITE_ALGOLIA_SEARCH_KEY=f33b1a3676a3ee83ed7c133203a7e762
\ No newline at end of file
+VITE_ALGOLIA_SEARCH_KEY=f33b1a3676a3ee83ed7c133203a7e762
+VITE_ALGOLIA_INDEX=docsearch-legacy
\ No newline at end of file
diff --git a/packages/docs/README.md b/packages/docs/README.md
index 7132f88822a..2bf8f3c7059 100644
--- a/packages/docs/README.md
+++ b/packages/docs/README.md
@@ -68,7 +68,11 @@ resource: https://docsearch.algolia.com/
 
 ### Crawler
 
-To crawl local server for testing index settings use this command
+Setup in https://crawler.algolia.com/
+
+### Debug local site with crawler settings
+
+To crawl localhost site for testing index settings for content hierarchy. use this docker command
 
 ```bash
 # create apiKey via https://www.algolia.com/account/api-keys
@@ -82,12 +86,3 @@ docker run -it --rm --env-file=.env -e "CONFIG=$(cat ./packages/docs/algolia.jso
 see guide of [DocSearch-legacy docker command](https://docsearch.algolia.com/docs/legacy/run-your-own#run-the-crawl-from-the-docker-image)
 
 > In mac machine, docker container can access host's network, workaround is to use `host.docker.internal`
-
-More recommend way is use https://crawler.algolia.com/
-
-### Search UI
-
-there're two options for now
-
-1. @docsearch/js is react based render of autocomplete
-2. qwik implementation base on @algolia/autocomplete-js
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 7992d211ab0..e3ddb6f5492 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -21,8 +21,8 @@
     "@algolia/autocomplete-core": "^1.7.1",
     "@algolia/client-search": "^4.14.2",
     "@builder.io/partytown": "^0.6.4",
-    "@builder.io/qwik": "^0.0.100",
-    "@builder.io/qwik-city": "0.0.101-3",
+    "@builder.io/qwik": "0.0.100-dev20220820024200",
+    "@builder.io/qwik-city": "0.0.101",
     "@cloudflare/kv-asset-handler": "0.2.0",
     "@docsearch/css": "^3.2.0",
     "algoliasearch": "^4.14.2",
diff --git a/packages/docs/src/components/docsearch/README.md b/packages/docs/src/components/docsearch/README.md
index 05e30cc9fd1..36a92adde98 100644
--- a/packages/docs/src/components/docsearch/README.md
+++ b/packages/docs/src/components/docsearch/README.md
@@ -2,4 +2,4 @@
 
 All the credits goes to Algolia's [docsearch-react](https://github.com/algolia/docsearch/tree/main/packages/docsearch-react)
 
-Only render part changed to qwik's component, trying to minimal effects of js blocking
+Only render part port to qwik's component.
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 82ff3965553..754aee95058 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -34,11 +34,11 @@ export const Header = component$(() => {
           <DocSearch
             appId={import.meta.env.VITE_ALGOLIA_APP_ID}
             apiKey={import.meta.env.VITE_ALGOLIA_SEARCH_KEY}
-            indexName="docsearch-legacy"
+            indexName={import.meta.env.VITE_ALGOLIA_INDEX}
             transformItems$={(items: any[]) => {
               return items.map((item) => ({
                 ...item,
-                // TODO: remove this after migrate to algolia crawler
+                // TODO: remove this after migrate to algolia crawler together with search token & index name
                 url: item.url?.replace('http://host.docker.internal:3000', window.origin),
               }));
             }}
@@ -72,17 +72,29 @@ export const Header = component$(() => {
             </a>
           </li>
           <li>
-            <a href="/examples/introduction/hello-world/" onClick$={closeMenu}>
+            <a
+              href="/examples/introduction/hello-world/"
+              class={{ active: pathname.startsWith('/examples') }}
+              onClick$={closeMenu}
+            >
               <span>Examples</span>
             </a>
           </li>
           <li>
-            <a href="/tutorial/welcome/overview/" onClick$={closeMenu}>
+            <a
+              href="/tutorial/welcome/overview/"
+              class={{ active: pathname.startsWith('/tutorial') }}
+              onClick$={closeMenu}
+            >
               <span>Tutorial</span>
             </a>
           </li>
           <li>
-            <a href="/playground/" onClick$={closeMenu}>
+            <a
+              href="/playground/"
+              class={{ active: pathname.startsWith('/playground') }}
+              onClick$={closeMenu}
+            >
               <span>Playground</span>
             </a>
           </li>
diff --git a/packages/docs/src/routes/robot.txt/index.ts b/packages/docs/src/routes/robot.txt/index.ts
deleted file mode 100644
index 54893d721f7..00000000000
--- a/packages/docs/src/routes/robot.txt/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { RequestHandler } from '@builder.io/qwik-city';
-
-export const onGet: RequestHandler = ({ url, response }) => {
-  response.headers.set('Content-Type', 'text/plain');
-  return `User-agent: *
-  Allow: /
-  Sitemap: https://${url.host}/sitemap.xml`;
-};
diff --git a/packages/docs/src/routes/sitemap.xml/index.ts b/packages/docs/src/routes/sitemap.xml/index.ts
deleted file mode 100644
index 121669bf60f..00000000000
--- a/packages/docs/src/routes/sitemap.xml/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { RequestHandler } from '@builder.io/qwik-city';
-import cityPlan from '@qwik-city-plan';
-
-export const onGet: RequestHandler = ({ url, response }) => {
-  response.headers.set('Content-Type', 'application/xml');
-  const { routes = [] } = cityPlan;
-  const pages = routes
-    .map(([pattern]) => {
-      return pattern.source
-        .split('\\/')
-        .filter((pathLike) => ['^', '?$', '$'].indexOf(pathLike) < 0)
-        .join('/');
-    })
-    // can't deal with dynamic routes for now, currently just for testing docs search crawler
-    .filter((path) => path.startsWith('docs') || path.startsWith('qwikcity'));
-
-  return `<?xml version="1.0" encoding="UTF-8" ?>
-	<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
-		${pages
-      .map(
-        (page) =>
-          `<url>
-			<loc>${url.origin}/${page}</loc>
-		  </url>`
-      )
-      .join('')}
-	</urlset>`;
-};
diff --git a/yarn.lock b/yarn.lock
index d50d50d2179..e9967165280 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -244,7 +244,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@builder.io/qwik-city@0.0.101-3, @builder.io/qwik-city@workspace:packages/qwik-city":
+"@builder.io/qwik-city@npm:0.0.101":
+  version: 0.0.101
+  resolution: "@builder.io/qwik-city@npm:0.0.101"
+  dependencies:
+    "@mdx-js/mdx": 2.1.2
+    "@types/mdx": 2.0.2
+    source-map: 0.7.4
+    vfile: 5.3.4
+  checksum: 8cd1fc0920938f8c6963caa09d669d36e3784ed92ab021fd3a10235993d54a987b99169ed04fd6f01971cd7a7ab90a9585115e32a3e43dfa9b29e16f2a8fd983
+  languageName: node
+  linkType: hard
+
+"@builder.io/qwik-city@workspace:packages/qwik-city":
   version: 0.0.0-use.local
   resolution: "@builder.io/qwik-city@workspace:packages/qwik-city"
   dependencies:
@@ -311,7 +323,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@builder.io/qwik@^0.0.100, @builder.io/qwik@workspace:*, @builder.io/qwik@workspace:packages/qwik":
+"@builder.io/qwik@npm:0.0.100-dev20220820024200":
+  version: 0.0.100-dev20220820024200
+  resolution: "@builder.io/qwik@npm:0.0.100-dev20220820024200"
+  checksum: b9dd2dfad5c6d7a5e34402cd62c4278875df427a9fd7022f33ba9a447a70c47a301f424f34490b4888866455e2bed9aa1b09f42d5bab2bdb8e8dd7e6ea13c161
+  languageName: node
+  linkType: hard
+
+"@builder.io/qwik@workspace:*, @builder.io/qwik@workspace:packages/qwik":
   version: 0.0.0-use.local
   resolution: "@builder.io/qwik@workspace:packages/qwik"
   languageName: unknown
@@ -7553,8 +7572,8 @@ __metadata:
     "@algolia/autocomplete-core": ^1.7.1
     "@algolia/client-search": ^4.14.2
     "@builder.io/partytown": ^0.6.4
-    "@builder.io/qwik": ^0.0.100
-    "@builder.io/qwik-city": 0.0.101-3
+    "@builder.io/qwik": 0.0.100-dev20220820024200
+    "@builder.io/qwik-city": 0.0.101
     "@cloudflare/kv-asset-handler": 0.2.0
     "@docsearch/css": ^3.2.0
     algoliasearch: ^4.14.2

From a12c11c08992cefd7b68e3878dee5917fd5a5e35 Mon Sep 17 00:00:00 2001
From: yang bo <yangbohnzz@gmail.com>
Date: Mon, 22 Aug 2022 23:25:16 +0800
Subject: [PATCH 13/25] fix: city version

---
 packages/docs/package.json |  2 +-
 yarn.lock                  | 16 ++--------------
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index e3ddb6f5492..37958116eb6 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -22,7 +22,7 @@
     "@algolia/client-search": "^4.14.2",
     "@builder.io/partytown": "^0.6.4",
     "@builder.io/qwik": "0.0.100-dev20220820024200",
-    "@builder.io/qwik-city": "0.0.101",
+    "@builder.io/qwik-city": "0.0.101-3",
     "@cloudflare/kv-asset-handler": "0.2.0",
     "@docsearch/css": "^3.2.0",
     "algoliasearch": "^4.14.2",
diff --git a/yarn.lock b/yarn.lock
index e9967165280..fdf60fb6337 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -244,19 +244,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@builder.io/qwik-city@npm:0.0.101":
-  version: 0.0.101
-  resolution: "@builder.io/qwik-city@npm:0.0.101"
-  dependencies:
-    "@mdx-js/mdx": 2.1.2
-    "@types/mdx": 2.0.2
-    source-map: 0.7.4
-    vfile: 5.3.4
-  checksum: 8cd1fc0920938f8c6963caa09d669d36e3784ed92ab021fd3a10235993d54a987b99169ed04fd6f01971cd7a7ab90a9585115e32a3e43dfa9b29e16f2a8fd983
-  languageName: node
-  linkType: hard
-
-"@builder.io/qwik-city@workspace:packages/qwik-city":
+"@builder.io/qwik-city@0.0.101-3, @builder.io/qwik-city@workspace:packages/qwik-city":
   version: 0.0.0-use.local
   resolution: "@builder.io/qwik-city@workspace:packages/qwik-city"
   dependencies:
@@ -7573,7 +7561,7 @@ __metadata:
     "@algolia/client-search": ^4.14.2
     "@builder.io/partytown": ^0.6.4
     "@builder.io/qwik": 0.0.100-dev20220820024200
-    "@builder.io/qwik-city": 0.0.101
+    "@builder.io/qwik-city": 0.0.101-3
     "@cloudflare/kv-asset-handler": 0.2.0
     "@docsearch/css": ^3.2.0
     algoliasearch: ^4.14.2

From 3184a8f6758a60287eda34201b957f08bb0d4fae Mon Sep 17 00:00:00 2001
From: Manu MA <manu.mtza@gmail.com>
Date: Sun, 21 Aug 2022 17:12:14 +0100
Subject: [PATCH 14/25] 0.0.101 (#1098)

---
 package.json                             | 2 +-
 packages/create-qwik/package.json        | 2 +-
 packages/eslint-plugin-qwik/package.json | 2 +-
 packages/qwik/package.json               | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index b8bd3385a30..8d7c271b873 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "qwik-monorepo",
-  "version": "0.0.100",
+  "version": "0.0.101",
   "scripts": {
     "build": "tsm scripts/index.ts --tsc --build --qwikcity --api --platform-binding-wasm-copy",
     "build.full": "tsm scripts/index.ts --tsc --build --api --eslint --qwikcity --qwikreact --platform-binding --wasm",
diff --git a/packages/create-qwik/package.json b/packages/create-qwik/package.json
index 4a04a2f2ce5..ea22ffc3310 100644
--- a/packages/create-qwik/package.json
+++ b/packages/create-qwik/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.100",
+  "version": "0.0.101",
   "description": "Interactive CLI and API for generating Qwik projects.",
   "bin": "create-qwik",
   "main": "index.js",
diff --git a/packages/eslint-plugin-qwik/package.json b/packages/eslint-plugin-qwik/package.json
index 105345d7e16..c7aeaa5ee05 100644
--- a/packages/eslint-plugin-qwik/package.json
+++ b/packages/eslint-plugin-qwik/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-qwik",
-  "version": "0.0.100",
+  "version": "0.0.101",
   "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
   "main": "index.js",
   "author": "Builder Team",
diff --git a/packages/qwik/package.json b/packages/qwik/package.json
index 4a70d728a7e..682f4313515 100644
--- a/packages/qwik/package.json
+++ b/packages/qwik/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/qwik",
-  "version": "0.0.100",
+  "version": "0.0.101",
   "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
   "main": "./dist/core.cjs",
   "types": "./dist/core.d.ts",

From 5b57e2eff7bd514173db9c7a91b557efedbd7d6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20VIDIT?= <tidiview@users.noreply.github.com>
Date: Sun, 21 Aug 2022 18:13:30 +0200
Subject: [PATCH 15/25] docs: Update noSerialize() tutorial (#1102)

---
 .../docs/src/routes/tutorial/store/no-serialize/index.mdx     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/routes/tutorial/store/no-serialize/index.mdx b/packages/docs/src/routes/tutorial/store/no-serialize/index.mdx
index 7ffd14936b0..740f7a02154 100644
--- a/packages/docs/src/routes/tutorial/store/no-serialize/index.mdx
+++ b/packages/docs/src/routes/tutorial/store/no-serialize/index.mdx
@@ -6,4 +6,6 @@ Stores must always be serializable, however sometimes you may to want persist a
 
 When the application is paused, non-serializable properties are discarded.
 
-> **Your task**: Add a cleanup function in `store.cleanup` so that the `stop` button can clear the interval.
\ No newline at end of file
+> **Your task**: Add a cleanup function in `store.cleanup` so that the `stop` button can clear the interval with `clearInterval()`.
+> for that, add `noSerialize` import from '@builder.io/qwik' and use `noSerialize` function to wrap clearInterval function;
+`

From b7b9e23bf2bfbd21cd62efa4592f9fa2ddf6d1b8 Mon Sep 17 00:00:00 2001
From: Roberto Simonetti <robisim74@gmail.com>
Date: Sun, 21 Aug 2022 21:59:38 +0200
Subject: [PATCH 16/25] fix(sort_routes.ts): optional route parameters sorting
 (#1077)

fixes #1016
---
 packages/qwik-city/buildtime/routing/sort-routes.ts      | 4 ++--
 packages/qwik-city/buildtime/routing/sort-routes.unit.ts | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/qwik-city/buildtime/routing/sort-routes.ts b/packages/qwik-city/buildtime/routing/sort-routes.ts
index cbd0846532f..76aad9656dc 100644
--- a/packages/qwik-city/buildtime/routing/sort-routes.ts
+++ b/packages/qwik-city/buildtime/routing/sort-routes.ts
@@ -9,10 +9,10 @@ export function routeSortCompare(a: BuildRoute, b: BuildRoute) {
 
     // /x < /x/y, but /[...x]/y < /[...x]
     if (!sa) {
-      return a.id.includes('[...') ? 1 : -1;
+      return a.pathname.includes('[...') ? 1 : -1;
     }
     if (!sb) {
-      return b.id.includes('[...') ? -1 : 1;
+      return b.pathname.includes('[...') ? -1 : 1;
     }
 
     const maxParts = Math.max(sa.length, sb.length);
diff --git a/packages/qwik-city/buildtime/routing/sort-routes.unit.ts b/packages/qwik-city/buildtime/routing/sort-routes.unit.ts
index fc6f01eb484..f518ef4015d 100644
--- a/packages/qwik-city/buildtime/routing/sort-routes.unit.ts
+++ b/packages/qwik-city/buildtime/routing/sort-routes.unit.ts
@@ -1,6 +1,7 @@
 import { test } from 'uvu';
 import { equal } from 'uvu/assert';
 import type { BuildRoute } from '../types';
+import { createFileId } from '../utils/fs';
 import { parseRoutePathname } from './parse-pathname';
 import { routeSortCompare } from './sort-routes';
 
@@ -45,7 +46,7 @@ test('routeSortCompare', () => {
 function route(r: TestRoute) {
   const pathname = r.pathname || '/';
   const route: BuildRoute = {
-    id: pathname,
+    id: createFileId('', pathname),
     filePath: pathname,
     pathname,
     ext: '.tsx',

From 24d0b4a1455a9f5c4e1892647481477abf6b8db0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=A1ko=20Hevery?= <misko@hevery.com>
Date: Sun, 21 Aug 2022 15:16:52 -0700
Subject: [PATCH 17/25] fix(css): Added missing tests and behavior to CSS
 scoping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Félix Sanz <me@felixsanz.com>
---
 .../qwik/src/core/style/scoped-stylesheet.ts  | 344 ++++++++++++++++--
 .../src/core/style/scoped-stylesheet.unit.ts  | 244 +++++++++++--
 2 files changed, 530 insertions(+), 58 deletions(-)

diff --git a/packages/qwik/src/core/style/scoped-stylesheet.ts b/packages/qwik/src/core/style/scoped-stylesheet.ts
index 983d45ce158..4938090b7c5 100644
--- a/packages/qwik/src/core/style/scoped-stylesheet.ts
+++ b/packages/qwik/src/core/style/scoped-stylesheet.ts
@@ -1,14 +1,22 @@
+/* eslint-disable no-console */
 import { ComponentStylesPrefixContent } from '../util/markers';
 
+// Make sure this is always set to `false` in production, but it is useful to set for `true` in development for debugging.
+const DEBUG: boolean = false;
+
 export function scopeStylesheet(css: string, scopeId: string): string {
   const end = css.length;
   const out: string[] = [];
   const stack: MODE[] = [];
   let idx = 0;
   let lastIdx = idx;
-  let mode: MODE = MODE.selector as any;
+  let mode: MODE = MODE.rule as any;
   let lastCh = 0;
+  DEBUG && console.log('--------------------------');
   while (idx < end) {
+    DEBUG && console.log(css);
+    DEBUG && console.log(new Array(idx).fill(' ').join('') + '^');
+    DEBUG && console.log('MODE', ...stack.map(modeToString), modeToString(mode));
     let ch = css.charCodeAt(idx++);
     if (ch === CHAR.BACKSLASH) {
       idx++;
@@ -16,25 +24,79 @@ export function scopeStylesheet(css: string, scopeId: string): string {
     }
     const arcs = STATE_MACHINE[mode];
     for (let i = 0; i < arcs.length; i++) {
-      const [expectLastCh, expectCh, newMode] = arcs[i];
+      const arc = arcs[i];
+      const [expectLastCh, expectCh, newMode] = arc;
       if (
         expectLastCh === lastCh ||
         expectLastCh === CHAR.ANY ||
-        (expectLastCh === CHAR.IDENT && isIdent(lastCh))
+        (expectLastCh === CHAR.IDENT && isIdent(lastCh)) ||
+        (expectLastCh === CHAR.WHITESPACE && isWhiteSpace(lastCh))
       ) {
         if (
           expectCh === ch ||
           expectCh === CHAR.ANY ||
-          (expectCh === CHAR.NOT_IDENT_AND_NOT_DOT && !isIdent(ch) && ch !== CHAR.DOT)
+          (expectCh === CHAR.IDENT && isIdent(ch)) ||
+          (expectCh === CHAR.NOT_IDENT && !isIdent(ch) && ch !== CHAR.DOT) ||
+          (expectCh === CHAR.WHITESPACE && isWhiteSpace(ch))
         ) {
-          if (newMode === MODE.EXIT) {
-            mode = stack.pop() || MODE.selector;
-          } else if (mode === newMode) {
-            flush(idx - 1);
-            out.push('.', ComponentStylesPrefixContent, scopeId);
-          } else {
-            stack.push(mode);
-            mode = newMode;
+          if (arc.length == 3 || lookAhead(arc)) {
+            DEBUG &&
+              console.log(
+                'MATCH',
+                charToString(expectLastCh),
+                charToString(expectCh),
+                modeToString(newMode)
+              );
+            // We found a match!
+            if (newMode === MODE.EXIT || newMode == MODE.EXIT_INSERT_SCOPE) {
+              if (newMode === MODE.EXIT_INSERT_SCOPE) {
+                if (mode === MODE.starSelector && !isInGlobal()) {
+                  // Replace `*` with the scoping elementClassIdSelector.
+                  if (isChainedSelector(ch)) {
+                    // *foo
+                    flush(idx - 2);
+                  } else {
+                    // * (by itself)
+                    insertScopingSelector(idx - 2);
+                  }
+                  lastIdx++;
+                } else {
+                  if (!isChainedSelector(ch)) {
+                    // We are exiting one of the Selector so we may need to
+                    const offset =
+                      expectCh == CHAR.NOT_IDENT ? 1 : expectCh == CHAR.CLOSE_PARENTHESIS ? 2 : 0;
+                    insertScopingSelector(idx - offset);
+                  }
+                }
+              }
+              if (expectCh === CHAR.NOT_IDENT) {
+                // NOT_IDENT is not a real character more like lack of what we expected.
+                // if pseudoGlobal we need to give it a chance to exit as well.
+                // For this reason we need to reparse the last character again.
+                idx--;
+                ch = lastCh;
+              }
+              do {
+                mode = stack.pop() || MODE.rule;
+                if (mode === MODE.pseudoGlobal) {
+                  // Skip over the `)` in `:global(...)`.
+                  flush(idx - 1);
+                  lastIdx++;
+                }
+              } while (isSelfClosingRule(mode));
+            } else {
+              stack.push(mode);
+              if (mode === MODE.pseudoGlobal && newMode === MODE.rule) {
+                flush(idx - 8); // `:global(`.length
+                lastIdx = idx; // skip over ":global("
+              } else if (newMode === MODE.pseudoElement) {
+                // We are entering pseudoElement `::foo`; insert scoping in front of it.
+                insertScopingSelector(idx - 2);
+              }
+              mode = newMode;
+              ch == CHAR.SPACE; // Pretend not an identifier so that we don't flush again on elementClassIdSelector
+            }
+            break; // get out of the for loop as we found a match
           }
         }
       }
@@ -46,8 +108,35 @@ export function scopeStylesheet(css: string, scopeId: string): string {
 
   function flush(idx: number) {
     out.push(css.substring(lastIdx, idx));
+    DEBUG && console.log('FLUSH', out.join(''));
     lastIdx = idx;
   }
+  function insertScopingSelector(idx: number) {
+    if (mode === MODE.pseudoGlobal || isInGlobal()) return;
+
+    flush(idx);
+    const separator = stack.length && stack[stack.length - 1] === MODE.atRuleSelector ? '-' : '.';
+    out.push(separator, ComponentStylesPrefixContent, scopeId);
+    DEBUG && console.log('INSERT', out.join(''));
+  }
+  function lookAhead(arc: StateArc): boolean {
+    words: for (let arcIndx = 3; arcIndx < arc.length; arcIndx++) {
+      const txt = arc[arcIndx] as string;
+      for (let i = 0; i < txt.length; i++) {
+        if ((css.charCodeAt(idx + i) | CHAR.LOWERCASE) !== txt.charCodeAt(i)) {
+          continue words;
+        }
+      }
+      // we found a match;
+      idx += txt.length;
+      return true;
+    }
+    return false;
+  }
+
+  function isInGlobal(): boolean {
+    return stack.indexOf(MODE.pseudoGlobal) !== -1;
+  }
 }
 
 function isIdent(ch: number): boolean {
@@ -55,40 +144,124 @@ function isIdent(ch: number): boolean {
     (ch >= CHAR._0 && ch <= CHAR._9) ||
     (ch >= CHAR.A && ch <= CHAR.Z) ||
     (ch >= CHAR.a && ch <= CHAR.z) ||
+    ch >= 0x80 ||
     ch === CHAR.UNDERSCORE ||
     ch === CHAR.DASH
   );
 }
+function isChainedSelector(ch: number): boolean {
+  return (
+    ch === CHAR.COLON ||
+    ch === CHAR.DOT ||
+    ch === CHAR.OPEN_BRACKET ||
+    ch === CHAR.HASH ||
+    isIdent(ch)
+  );
+}
+
+function isSelfClosingRule(mode: MODE): boolean {
+  return (
+    mode === MODE.atRuleBlock ||
+    mode === MODE.atRuleSelector ||
+    mode === MODE.atRuleInert ||
+    mode === MODE.pseudoGlobal
+  );
+}
+
+function isWhiteSpace(ch: number): boolean {
+  return ch === CHAR.SPACE || ch === CHAR.TAB || ch === CHAR.NEWLINE || ch === CHAR.CARRIAGE_RETURN;
+}
+
+function modeToString(mode: MODE): string {
+  return [
+    'rule',
+    'elementClassIdSelector',
+    'starSelector',
+    'pseudoClassWithSelector',
+    'pseudoClass',
+    'pseudoGlobal',
+    'pseudoElement',
+    'attrSelector',
+    'inertParenthesis',
+    'inertBlock',
+    'atRuleSelector',
+    'atRuleBlock',
+    'atInert',
+    'body',
+    'stringSingle',
+    'stringDouble',
+    'commentMultiline',
+    'EXIT',
+    'EXIT_INSERT_SCOPE',
+  ][mode];
+}
+
+function charToString(ch: number): string {
+  return ['ANY', 'IDENT', 'NOT_IDENT', 'WHITESPACE'][ch] || String.fromCharCode(ch);
+}
 
 const enum MODE {
-  selector, // .selector {}
-  media, // .selector {}
-  body, // .selector {body}
+  rule, // top level initial space.
+  elementClassIdSelector, // .elementClassIdSelector {}
+  starSelector, // * {}
+  pseudoClassWithSelector, // :pseudoClass(elementClassIdSelector) {}
+  pseudoClass, // :pseudoClass {}
+  pseudoGlobal, // :global(elementClassIdSelector)
+  pseudoElement, // ::pseudoElement {}
+  attrSelector, // [attr] {}
+  inertParenthesis, // (ignored)
+  inertBlock, // {ignored}
+  atRuleSelector, // @keyframe elementClassIdSelector {}
+  atRuleBlock, // @media {elementClassIdSelector {}}
+  atRuleInert, // @atRule something;
+  body, // .elementClassIdSelector {body}
   stringSingle, // 'text'
   stringDouble, // 'text'
   commentMultiline, // /* ... */
-  EXIT, // Exit the mode (Not a real mode)
+  // NOT REAL MODES
+  EXIT, // Exit the mode
+  EXIT_INSERT_SCOPE, // Exit the mode INSERT SCOPE
 }
 
 const enum CHAR {
   ANY = 0,
   IDENT = 1,
-  NOT_IDENT_AND_NOT_DOT = 2,
+  NOT_IDENT = 2,
+  WHITESPACE = 3,
+  TAB = 9, // `\t`.charCodeAt(0);
+  NEWLINE = 10, // `\n`.charCodeAt(0);
+  CARRIAGE_RETURN = 13, // `\r`.charCodeAt(0);
   SPACE = 32, // ` `.charCodeAt(0);
-  FORWARD_SLASH = 47, // `/`.charCodeAt(0);
   DOUBLE_QUOTE = 34, // `"`.charCodeAt(0);
+  HASH = 35, // `#`.charCodeAt(0);
   SINGLE_QUOTE = 39, // `'`.charCodeAt(0);
+  OPEN_PARENTHESIS = 40, // `(`.charCodeAt(0);
+  CLOSE_PARENTHESIS = 41, // `)`.charCodeAt(0);
   STAR = 42, // `*`.charCodeAt(0);
+  COMMA = 44, // `,`.charCodeAt(0);
   DASH = 45, // `-`.charCodeAt(0);
   DOT = 46, // `.`.charCodeAt(0);
+  FORWARD_SLASH = 47, // `/`.charCodeAt(0);
+  _0 = 48, // `0`.charCodeAt(0);
+  _9 = 57, // `9`.charCodeAt(0);
+  COLON = 58, // `:`.charCodeAt(0);
+  SEMICOLON = 59, // `;`.charCodeAt(0);
+  LESS_THAN = 60, // `<`.charCodeAt(0);
   AT = 64, // `@`.charCodeAt(0);
   A = 65, // `A`.charCodeAt(0);
   Z = 90, // `Z`.charCodeAt(0);
-  _0 = 48, // `0`.charCodeAt(0);
-  _9 = 57, // `9`.charCodeAt(0);
+  OPEN_BRACKET = 91, // `[`.charCodeAt(0);
+  CLOSE_BRACKET = 93, // `]`.charCodeAt(0);
   BACKSLASH = 92, // `\\`.charCodeAt(0);
   UNDERSCORE = 95, // `_`.charCodeAt(0);
+  LOWERCASE = 0x20, // `a`.charCodeAt(0);
   a = 97, // `a`.charCodeAt(0);
+  d = 100, // `d`.charCodeAt(0);
+  g = 103, // 'g'.charCodeAt(0);
+  h = 104, // `h`.charCodeAt(0);
+  i = 105, // `i`.charCodeAt(0);
+  l = 108, // `l`.charCodeAt(0);
+  t = 116, // `t`.charCodeAt(0);
   z = 122, // `z`.charCodeAt(0);
   OPEN_BRACE = 123, // `{`.charCodeAt(0);
   CLOSE_BRACE = 125, // `}`.charCodeAt(0);
@@ -100,29 +273,130 @@ type StateArc = [
   /// If the current character is this:
   CHAR,
   /// Then transition to this state:
-  MODE
+  MODE,
+  /// Optional look ahead strings
+  ...string[]
+];
+
+const STRINGS_COMMENTS: StateArc[] = [
+  [CHAR.ANY, CHAR.SINGLE_QUOTE, MODE.stringSingle],
+  [CHAR.ANY, CHAR.DOUBLE_QUOTE, MODE.stringDouble],
+  [CHAR.ANY, CHAR.FORWARD_SLASH, MODE.commentMultiline, '*'],
 ];
 
 const STATE_MACHINE: StateArc[][] = [
   [
-    [CHAR.IDENT, CHAR.NOT_IDENT_AND_NOT_DOT, MODE.selector],
-    [CHAR.ANY, CHAR.AT, MODE.media],
+    /// rule
+    [CHAR.ANY, CHAR.STAR, MODE.starSelector],
+    [CHAR.ANY, CHAR.OPEN_BRACKET, MODE.attrSelector],
+    [CHAR.ANY, CHAR.COLON, MODE.pseudoElement, ':'],
+    [CHAR.ANY, CHAR.COLON, MODE.pseudoGlobal, 'global'],
+    [
+      CHAR.ANY,
+      CHAR.COLON,
+      MODE.pseudoClassWithSelector,
+      'has',
+      'host-context',
+      'not',
+      'where',
+      'is',
+      'matches',
+      'any',
+    ],
+    [CHAR.ANY, CHAR.COLON, MODE.pseudoClass],
+    [CHAR.ANY, CHAR.IDENT, MODE.elementClassIdSelector],
+    [CHAR.ANY, CHAR.DOT, MODE.elementClassIdSelector],
+    [CHAR.ANY, CHAR.HASH, MODE.elementClassIdSelector],
+    [CHAR.ANY, CHAR.AT, MODE.atRuleSelector, 'keyframe'],
+    [CHAR.ANY, CHAR.AT, MODE.atRuleBlock, 'media', 'supports'],
+    [CHAR.ANY, CHAR.AT, MODE.atRuleInert],
     [CHAR.ANY, CHAR.OPEN_BRACE, MODE.body],
     [CHAR.FORWARD_SLASH, CHAR.STAR, MODE.commentMultiline],
-  ] /*selector*/,
-  [
+    [CHAR.ANY, CHAR.SEMICOLON, MODE.EXIT],
     [CHAR.ANY, CHAR.CLOSE_BRACE, MODE.EXIT],
-    [CHAR.FORWARD_SLASH, CHAR.STAR, MODE.commentMultiline],
-    [CHAR.ANY, CHAR.OPEN_BRACE, MODE.selector],
-    [CHAR.FORWARD_SLASH, CHAR.STAR, MODE.commentMultiline],
-  ] /*media*/,
+    [CHAR.ANY, CHAR.CLOSE_PARENTHESIS, MODE.EXIT],
+    ...STRINGS_COMMENTS,
+  ],
   [
-    [CHAR.ANY, CHAR.CLOSE_BRACE, MODE.EXIT],
+    /// elementClassIdSelector
+    [CHAR.ANY, CHAR.NOT_IDENT, MODE.EXIT_INSERT_SCOPE],
+  ],
+  [
+    /// starSelector
+    [CHAR.ANY, CHAR.NOT_IDENT, MODE.EXIT_INSERT_SCOPE],
+  ],
+  [
+    /// pseudoClassWithSelector
+    [CHAR.ANY, CHAR.OPEN_PARENTHESIS, MODE.rule],
+    [CHAR.ANY, CHAR.NOT_IDENT, MODE.EXIT_INSERT_SCOPE],
+  ],
+  [
+    /// pseudoClass
+    [CHAR.ANY, CHAR.OPEN_PARENTHESIS, MODE.inertParenthesis],
+    [CHAR.ANY, CHAR.NOT_IDENT, MODE.EXIT_INSERT_SCOPE],
+  ],
+  [
+    /// pseudoGlobal
+    [CHAR.ANY, CHAR.OPEN_PARENTHESIS, MODE.rule],
+    [CHAR.ANY, CHAR.NOT_IDENT, MODE.EXIT],
+  ],
+  [
+    /// pseudoElement
+    [CHAR.ANY, CHAR.NOT_IDENT, MODE.EXIT],
+  ],
+  [
+    /// attrSelector
+    [CHAR.ANY, CHAR.CLOSE_BRACKET, MODE.EXIT_INSERT_SCOPE],
     [CHAR.ANY, CHAR.SINGLE_QUOTE, MODE.stringSingle],
     [CHAR.ANY, CHAR.DOUBLE_QUOTE, MODE.stringDouble],
-    [CHAR.FORWARD_SLASH, CHAR.STAR, MODE.commentMultiline],
-  ] /*body*/,
-  [[CHAR.ANY, CHAR.SINGLE_QUOTE, MODE.EXIT]] /*stringSingle*/,
-  [[CHAR.ANY, CHAR.DOUBLE_QUOTE, MODE.EXIT]] /*stringDouble*/,
-  [[CHAR.STAR, CHAR.FORWARD_SLASH, MODE.EXIT]] /*commentMultiline*/,
+  ],
+  [
+    /// inertParenthesis
+    [CHAR.ANY, CHAR.CLOSE_PARENTHESIS, MODE.EXIT],
+    ...STRINGS_COMMENTS,
+  ],
+  [
+    /// inertBlock
+    [CHAR.ANY, CHAR.CLOSE_BRACE, MODE.EXIT],
+    ...STRINGS_COMMENTS,
+  ],
+  [
+    /// atRuleSelector
+    [CHAR.ANY, CHAR.CLOSE_BRACE, MODE.EXIT],
+    [CHAR.WHITESPACE, CHAR.IDENT, MODE.elementClassIdSelector],
+    [CHAR.ANY, CHAR.COLON, MODE.pseudoGlobal, 'global'],
+    [CHAR.ANY, CHAR.OPEN_BRACE, MODE.body],
+    ...STRINGS_COMMENTS,
+  ],
+  [
+    /// atRuleBlock
+    [CHAR.ANY, CHAR.OPEN_BRACE, MODE.rule],
+    [CHAR.ANY, CHAR.SEMICOLON, MODE.EXIT],
+    ...STRINGS_COMMENTS,
+  ],
+  [
+    /// atRuleInert
+    [CHAR.ANY, CHAR.SEMICOLON, MODE.EXIT],
+    [CHAR.ANY, CHAR.OPEN_BRACE, MODE.inertBlock],
+    ...STRINGS_COMMENTS,
+  ],
+  [
+    /// body
+    [CHAR.ANY, CHAR.CLOSE_BRACE, MODE.EXIT],
+    [CHAR.ANY, CHAR.OPEN_BRACE, MODE.body],
+    [CHAR.ANY, CHAR.OPEN_PARENTHESIS, MODE.inertParenthesis],
+    ...STRINGS_COMMENTS,
+  ],
+  [
+    /// stringSingle
+    [CHAR.ANY, CHAR.SINGLE_QUOTE, MODE.EXIT],
+  ],
+  [
+    /// stringDouble
+    [CHAR.ANY, CHAR.DOUBLE_QUOTE, MODE.EXIT],
+  ],
+  [
+    /// commentMultiline
+    [CHAR.STAR, CHAR.FORWARD_SLASH, MODE.EXIT],
+  ],
 ];
diff --git a/packages/qwik/src/core/style/scoped-stylesheet.unit.ts b/packages/qwik/src/core/style/scoped-stylesheet.unit.ts
index ac37e862398..2881ca19d3c 100644
--- a/packages/qwik/src/core/style/scoped-stylesheet.unit.ts
+++ b/packages/qwik/src/core/style/scoped-stylesheet.unit.ts
@@ -4,45 +4,243 @@ import { scopeStylesheet } from './scoped-stylesheet';
 
 const scopedStyles = suite('scopedStyles');
 
-scopedStyles('element scoping', () => {
-  equal(scopeStylesheet('a{x}', 'ABC'), 'a.⭐️ABC{x}');
-  equal(scopeStylesheet('aa{x}', 'ABC'), 'aa.⭐️ABC{x}');
-  equal(scopeStylesheet('a-2{x}', 'ABC'), 'a-2.⭐️ABC{x}');
-  equal(scopeStylesheet('a_a{x}', 'ABC'), 'a_a.⭐️ABC{x}');
-  equal(scopeStylesheet('a {x}', 'ABC'), 'a.⭐️ABC {x}');
-  equal(scopeStylesheet('body {x}', 'ABC'), 'body.⭐️ABC {x}');
-  equal(scopeStylesheet('body {body{x}}', 'ABC'), 'body.⭐️ABC {body{x}}');
+scopedStyles('selectors', () => {
+  equal(scopeStylesheet('div {}', '_'), 'div.⭐️_ {}');
+  equal(scopeStylesheet('div {}div{} div {}', '_'), 'div.⭐️_ {}div.⭐️_{} div.⭐️_ {}');
+  equal(scopeStylesheet('div, p {}', '_'), 'div.⭐️_, p.⭐️_ {}');
+
+  equal(scopeStylesheet('div p {}', '_'), 'div.⭐️_ p.⭐️_ {}');
+  equal(scopeStylesheet('div > p {}', '_'), 'div.⭐️_ > p.⭐️_ {}');
+  equal(scopeStylesheet('div + p {}', '_'), 'div.⭐️_ + p.⭐️_ {}');
+  equal(scopeStylesheet('div ~ p {}', '_'), 'div.⭐️_ ~ p.⭐️_ {}');
+
+  equal(scopeStylesheet('.red {}', '_'), '.red.⭐️_ {}');
+  equal(scopeStylesheet('div.red {}', '_'), 'div.red.⭐️_ {}');
+});
+scopedStyles('unicode', () => {
+  equal(scopeStylesheet('.miško{}', '_'), '.miško.⭐️_{}');
+});
+scopedStyles('selectors with *', () => {
+  equal(scopeStylesheet('* {}', '_'), '.⭐️_ {}');
+  equal(scopeStylesheet('.red * {}', '_'), '.red.⭐️_ .⭐️_ {}');
+  equal(scopeStylesheet('#red * {}', '_'), '#red.⭐️_ .⭐️_ {}');
+});
+
+scopedStyles('selectors with chains', () => {
+  equal(scopeStylesheet('.red.text {}', '_'), '.red.text.⭐️_ {}');
+
+  equal(scopeStylesheet('#red {}', '_'), '#red.⭐️_ {}');
+  equal(scopeStylesheet('div#red {}', '_'), 'div#red.⭐️_ {}');
+
+  equal(scopeStylesheet('div { }', '_'), 'div.⭐️_ { }');
+  equal(scopeStylesheet('div {}', '_'), 'div.⭐️_ {}');
+  equal(
+    scopeStylesheet('div {background-color: blue; }', '_'),
+    'div.⭐️_ {background-color: blue; }'
+  );
+  equal(
+    scopeStylesheet('div { color: red !important; }', '_'),
+    'div.⭐️_ { color: red !important; }'
+  );
+  equal(scopeStylesheet('div{color:red;}', '_'), 'div.⭐️_{color:red;}');
+  equal(scopeStylesheet('div { content: "}"; }', '_'), 'div.⭐️_ { content: "}"; }');
+  equal(scopeStylesheet("div { content: '}'; }", '_'), "div.⭐️_ { content: '}'; }");
+});
+
+scopedStyles('attribute selectors', () => {
+  equal(scopeStylesheet('*[a]{}', '_'), '[a].⭐️_{}');
+  equal(scopeStylesheet('*[a] {}', '_'), '[a].⭐️_ {}');
+  equal(scopeStylesheet('*[target] span {}', '_'), '[target].⭐️_ span.⭐️_ {}');
+
+  equal(scopeStylesheet('a[target] {}', '_'), 'a[target].⭐️_ {}');
+  equal(scopeStylesheet('a[target="_blank"] {}', '_'), 'a[target="_blank"].⭐️_ {}');
+  equal(scopeStylesheet('input[type="button"] {}', '_'), 'input[type="button"].⭐️_ {}');
+
+  equal(scopeStylesheet('a[title~="red"] {}', '_'), 'a[title~="red"].⭐️_ {}');
+  equal(scopeStylesheet('a[class^="red"] {}', '_'), 'a[class^="red"].⭐️_ {}');
+  equal(scopeStylesheet('a[class|="red"] {}', '_'), 'a[class|="red"].⭐️_ {}');
+  equal(scopeStylesheet('a[class*="red"] {}', '_'), 'a[class*="red"].⭐️_ {}');
+  equal(scopeStylesheet('a[class$="red"] {}', '_'), 'a[class$="red"].⭐️_ {}');
+});
+
+scopedStyles('pseudo classes', () => {
+  equal(scopeStylesheet('p:lang(en) {}', '_'), 'p:lang(en).⭐️_ {}');
+  equal(scopeStylesheet('a:link {}', '_'), 'a:link.⭐️_ {}');
+  equal(scopeStylesheet('p:nth-child(2) {}', '_'), 'p:nth-child(2).⭐️_ {}');
+  equal(scopeStylesheet('p:nth-child(3n+1) {}', '_'), 'p:nth-child(3n+1).⭐️_ {}');
 });
+scopedStyles('pseudo classes without selector', () => {
+  equal(scopeStylesheet(':root {}', '_'), ':root.⭐️_ {}');
+});
+scopedStyles('pseudo selector with negation', () => {
+  equal(scopeStylesheet('p:not(.blue) {}', '_'), 'p:not(.blue.⭐️_).⭐️_ {}');
+});
+scopedStyles('pseudo selector with :nth', () => {
+  equal(scopeStylesheet('p:nth-child(3n+1):hover {}', '_'), 'p:nth-child(3n+1):hover.⭐️_ {}');
+  equal(scopeStylesheet('p:nth-child(3n+1) div {}', '_'), 'p:nth-child(3n+1).⭐️_ div.⭐️_ {}');
+});
+
+scopedStyles('pseudo elements', () => {
+  equal(scopeStylesheet('::selection {}', '_'), '.⭐️_::selection {}');
+  equal(scopeStylesheet(' ::space {}', '_'), ' .⭐️_::space {}');
+
+  equal(scopeStylesheet('a::before {}', '_'), 'a.⭐️_::before {}');
+  equal(scopeStylesheet('a::after {}', '_'), 'a.⭐️_::after {}');
+
+  equal(scopeStylesheet('a::first-line {}', '_'), 'a.⭐️_::first-line {}');
+
+  equal(scopeStylesheet('a.red::before {}', '_'), 'a.red.⭐️_::before {}');
+  equal(scopeStylesheet('a.red span::before {}', '_'), 'a.red.⭐️_ span.⭐️_::before {}');
+});
+
+scopedStyles('complex properties', () => {
+  equal(
+    scopeStylesheet('div { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }', '_'),
+    'div.⭐️_ { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }'
+  );
 
-scopedStyles('ignore string content', () => {
-  equal(scopeStylesheet('body{"}bar{"}', 'ABC'), 'body.⭐️ABC{"}bar{"}');
+  equal(
+    scopeStylesheet(
+      'div { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }',
+      '_'
+    ),
+    'div.⭐️_ { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }'
+  );
 });
 
-scopedStyles('escape', () => {
-  equal(scopeStylesheet('q\\:bar{}', 'ABC'), 'q\\:bar.⭐️ABC{}');
+scopedStyles('@keyframe', () => {
+  equal(
+    scopeStylesheet('@keyframes slidein {from{b:c(0%);}to{b:c(0%);}}', '_'),
+    '@keyframes slidein-⭐️_ {from{b:c(0%);}to{b:c(0%);}}'
+  );
+});
+
+scopedStyles('@font-face', () => {
+  equal(
+    scopeStylesheet(
+      '@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); }',
+      '_'
+    ),
+    '@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); }'
+  );
 });
 
-scopedStyles('class scoping', () => {
-  equal(scopeStylesheet('.class {}', 'ABC'), '.class.⭐️ABC {}');
-  equal(scopeStylesheet('.a.b.c {}', 'ABC'), '.a.b.c.⭐️ABC {}');
-  equal(scopeStylesheet('.div{}', 'ABC'), '.div.⭐️ABC{}');
+scopedStyles('@media', () => {
+  equal(
+    scopeStylesheet('@media screen and (min-width: 900px) { div {} }', '_'),
+    '@media screen and (min-width: 900px) { div.⭐️_ {} }'
+  );
 });
 
-scopedStyles('nested scoping', () => {
-  equal(scopeStylesheet('a > .b > c {}', 'ABC'), 'a.⭐️ABC > .b.⭐️ABC > c.⭐️ABC {}');
+scopedStyles('@supports', () => {
+  equal(
+    scopeStylesheet(
+      '@supports (display: flex) { @media screen and (min-width: 900px) { div {} } }',
+      '_'
+    ),
+    '@supports (display: flex) { @media screen and (min-width: 900px) { div.⭐️_ {} } }'
+  );
 });
 
-scopedStyles('media', () => {
+scopedStyles('@supports nested', () => {
+  equal(scopeStylesheet('@media screen(a:1){}div{}', '_'), '@media screen(a:1){}div.⭐️_{}');
+
+  equal(
+    scopeStylesheet('@supports(d:b){div{}@media screen(a:1){div{}}div{}}', '_'),
+    '@supports(d:b){div.⭐️_{}@media screen(a:1){div.⭐️_{}}div.⭐️_{}}'
+  );
+
   equal(
-    scopeStylesheet('@media(max-width: 999px){body{}}', 'ABC'),
-    '@media(max-width: 999px){body.⭐️ABC{}}'
+    scopeStylesheet('@supports not (not (transform-origin: 2px)) { div {} }', '_'),
+    '@supports not (not (transform-origin: 2px)) { div.⭐️_ {} }'
+  );
+  equal(
+    scopeStylesheet('@supports (display: grid) and (not (display: inline-grid)) { div {} }', '_'),
+    '@supports (display: grid) and (not (display: inline-grid)) { div.⭐️_ {} }'
+  );
+
+  equal(
+    scopeStylesheet(
+      '@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { div {} }',
+      '_'
+    ),
+    '@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { div.⭐️_ {} }'
   );
 });
 
 scopedStyles('comments', () => {
+  equal(scopeStylesheet('div {} /* comment */', '_'), 'div.⭐️_ {} /* comment */');
+  equal(scopeStylesheet('div { /**/ }', '_'), 'div.⭐️_ { /**/ }');
+  equal(scopeStylesheet('div /* comment */ {}', '_'), 'div.⭐️_ /* comment */ {}');
+  equal(scopeStylesheet('div/* comment */ {}', '_'), 'div.⭐️_/* comment */ {}');
+  equal(scopeStylesheet('/* comment */div {}', '_'), '/* comment */div.⭐️_ {}');
+  equal(
+    scopeStylesheet('div /* comment */ > span {}', '_'),
+    'div.⭐️_ /* comment */ > span.⭐️_ {}'
+  );
+});
+
+scopedStyles('global selector', () => {
+  equal(scopeStylesheet(':global(*) {}', '_'), '* {}');
+});
+scopedStyles('global selector with attribute', () => {
+  equal(scopeStylesheet(':global([t="("]) {}', '_'), '[t="("] {}');
+
+  equal(scopeStylesheet(':global(div) {}', '_'), 'div {}');
+  equal(scopeStylesheet(':global(div), p {}', '_'), 'div, p.⭐️_ {}');
+
+  equal(scopeStylesheet('div :global(p) {}', '_'), 'div.⭐️_ p {}');
+  equal(scopeStylesheet(':global(div) > p {}', '_'), 'div > p.⭐️_ {}');
+
+  equal(scopeStylesheet(':global(.red) {}', '_'), '.red {}');
+  equal(scopeStylesheet(':global(div).red {}', '_'), 'div.red.⭐️_ {}');
+  equal(scopeStylesheet(':global(div.red) {}', '_'), 'div.red {}');
+
+  equal(scopeStylesheet(':global(#red) {}', '_'), '#red {}');
+
+  equal(scopeStylesheet(':global(div) { }', '_'), 'div { }');
+  equal(scopeStylesheet(':global(div) {}', '_'), 'div {}');
+  equal(scopeStylesheet(':global(div){color:red;}', '_'), 'div{color:red;}');
+
+  equal(scopeStylesheet(':global(*[target]) {}', '_'), '*[target] {}');
+  equal(scopeStylesheet(':global(*[target]) span {}', '_'), '*[target] span.⭐️_ {}');
+  equal(scopeStylesheet('*[target] :global(span) {}', '_'), '[target].⭐️_ span {}');
+
+  equal(scopeStylesheet(':global(a):link {}', '_'), 'a:link.⭐️_ {}');
+  equal(scopeStylesheet(':global(a:link) {}', '_'), 'a:link {}');
+  equal(scopeStylesheet(':global(p:lang(en)) {}', '_'), 'p:lang(en) {}');
+  equal(scopeStylesheet(':global(p:nth-child(2)) {}', '_'), 'p:nth-child(2) {}');
+  equal(scopeStylesheet(':global(:root) {}', '_'), ':root {}');
+  equal(scopeStylesheet(':global(p:not(.blue)) {}', '_'), 'p:not(.blue) {}');
+});
+
+scopedStyles('nested global inside not', () => {
+  equal(scopeStylesheet('p:not(:global(.red)){}', '_'), 'p:not(.red).⭐️_{}');
+
+  equal(scopeStylesheet(':global(p:nth-child(3n+1):hover) {}', '_'), 'p:nth-child(3n+1):hover {}');
+  equal(scopeStylesheet(':global(p:nth-child(3n+1) div) {}', '_'), 'p:nth-child(3n+1) div {}');
+
+  equal(scopeStylesheet(':global(::selection) {}', '_'), '::selection {}');
+});
+scopedStyles('global with pseudo element', () => {
+  equal(scopeStylesheet(':global(a::after){}', '_'), 'a::after{}');
+  // equal(scopeStylesheet(':global(a)::before{}', '_'), 'a::before{}');
+
+  equal(scopeStylesheet(':global(a).red::before {}', '_'), 'a.red.⭐️_::before {}');
+  equal(scopeStylesheet(':global(a.red) span::before {}', '_'), 'a.red span.⭐️_::before {}');
+});
+
+scopedStyles('global with pseudo element', () => {
+  equal(
+    scopeStylesheet(
+      '@keyframes :global(slidein) { from { transform: translateX(0%); } to { transform: translateX(100%); } }',
+      '_'
+    ),
+    '@keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } }'
+  );
   equal(
-    scopeStylesheet('@media(max-width: 999px){/*body{}*/}', 'ABC'),
-    '@media(max-width: 999px){/*body{}*/}'
+    scopeStylesheet('@media screen and (min-width: 900px) { :global(div) {} }', '_'),
+    '@media screen and (min-width: 900px) { div {} }'
   );
 });
 

From 8fc629a7dec8784925b0d05eeb37f9fd0ab8f8c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=A1ko=20Hevery?= <misko@hevery.com>
Date: Sun, 21 Aug 2022 19:22:39 -0700
Subject: [PATCH 18/25] fix(css): correctly process vendor prefix and animation
 (#1104)

* fix(css): correctly process vendor prefix and animation

* fixup! fix(css): correctly process vendor prefix and animation
---
 .../qwik/src/core/style/scoped-stylesheet.ts  | 41 +++++++++++++++++--
 .../src/core/style/scoped-stylesheet.unit.ts  | 12 ++++++
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/packages/qwik/src/core/style/scoped-stylesheet.ts b/packages/qwik/src/core/style/scoped-stylesheet.ts
index 4938090b7c5..9c32d78ba96 100644
--- a/packages/qwik/src/core/style/scoped-stylesheet.ts
+++ b/packages/qwik/src/core/style/scoped-stylesheet.ts
@@ -12,6 +12,7 @@ export function scopeStylesheet(css: string, scopeId: string): string {
   let lastIdx = idx;
   let mode: MODE = MODE.rule as any;
   let lastCh = 0;
+  let lastMarkIdx = 0;
   DEBUG && console.log('--------------------------');
   while (idx < end) {
     DEBUG && console.log(css);
@@ -40,6 +41,10 @@ export function scopeStylesheet(css: string, scopeId: string): string {
           (expectCh === CHAR.WHITESPACE && isWhiteSpace(ch))
         ) {
           if (arc.length == 3 || lookAhead(arc)) {
+            if (arc.length > 3) {
+              // If matched on lookAhead than we we have to update current `ch`
+              ch = css.charCodeAt(idx - 1);
+            }
             DEBUG &&
               console.log(
                 'MATCH',
@@ -48,7 +53,10 @@ export function scopeStylesheet(css: string, scopeId: string): string {
                 modeToString(newMode)
               );
             // We found a match!
-            if (newMode === MODE.EXIT || newMode == MODE.EXIT_INSERT_SCOPE) {
+            if (newMode === MODE.MARK_INSERT_LOCATION) {
+              lastMarkIdx = idx - 1;
+              continue; // pretend no match.
+            } else if (newMode === MODE.EXIT || newMode == MODE.EXIT_INSERT_SCOPE) {
               if (newMode === MODE.EXIT_INSERT_SCOPE) {
                 if (mode === MODE.starSelector && !isInGlobal()) {
                   // Replace `*` with the scoping elementClassIdSelector.
@@ -60,6 +68,8 @@ export function scopeStylesheet(css: string, scopeId: string): string {
                     insertScopingSelector(idx - 2);
                   }
                   lastIdx++;
+                } else if (mode === MODE.animation) {
+                  insertScopingSelector(lastMarkIdx);
                 } else {
                   if (!isChainedSelector(ch)) {
                     // We are exiting one of the Selector so we may need to
@@ -115,20 +125,31 @@ export function scopeStylesheet(css: string, scopeId: string): string {
     if (mode === MODE.pseudoGlobal || isInGlobal()) return;
 
     flush(idx);
-    const separator = stack.length && stack[stack.length - 1] === MODE.atRuleSelector ? '-' : '.';
+    const parentMode = stack.length && stack[stack.length - 1];
+    const separator = parentMode === MODE.atRuleSelector || mode === MODE.animation ? '-' : '.';
     out.push(separator, ComponentStylesPrefixContent, scopeId);
     DEBUG && console.log('INSERT', out.join(''));
   }
   function lookAhead(arc: StateArc): boolean {
+    let prefix = 0; // Ignore vendor prefixes such as `-webkit-`.
+    if (css.charCodeAt(idx) === CHAR.DASH) {
+      for (let i = 1; i < 10; i++) {
+        // give up after 10 characters
+        if (css.charCodeAt(idx + i) === CHAR.DASH) {
+          prefix = i + 1;
+          break;
+        }
+      }
+    }
     words: for (let arcIndx = 3; arcIndx < arc.length; arcIndx++) {
       const txt = arc[arcIndx] as string;
       for (let i = 0; i < txt.length; i++) {
-        if ((css.charCodeAt(idx + i) | CHAR.LOWERCASE) !== txt.charCodeAt(i)) {
+        if ((css.charCodeAt(idx + i + prefix) | CHAR.LOWERCASE) !== txt.charCodeAt(i)) {
           continue words;
         }
       }
       // we found a match;
-      idx += txt.length;
+      idx += txt.length + prefix;
       return true;
     }
     return false;
@@ -191,8 +212,10 @@ function modeToString(mode: MODE): string {
     'stringSingle',
     'stringDouble',
     'commentMultiline',
+    'animation',
     'EXIT',
     'EXIT_INSERT_SCOPE',
+    'MARK_INSERT_LOCATION',
   ][mode];
 }
 
@@ -218,9 +241,11 @@ const enum MODE {
   stringSingle, // 'text'
   stringDouble, // 'text'
   commentMultiline, // /* ... */
+  animation,
   // NOT REAL MODES
   EXIT, // Exit the mode
   EXIT_INSERT_SCOPE, // Exit the mode INSERT SCOPE
+  MARK_INSERT_LOCATION, // Possible place to insert scope selector
 }
 
 const enum CHAR {
@@ -385,6 +410,7 @@ const STATE_MACHINE: StateArc[][] = [
     [CHAR.ANY, CHAR.CLOSE_BRACE, MODE.EXIT],
     [CHAR.ANY, CHAR.OPEN_BRACE, MODE.body],
     [CHAR.ANY, CHAR.OPEN_PARENTHESIS, MODE.inertParenthesis],
+    [CHAR.ANY, CHAR.a, MODE.animation, 'nimation-name:', 'nimation:'],
     ...STRINGS_COMMENTS,
   ],
   [
@@ -399,4 +425,11 @@ const STATE_MACHINE: StateArc[][] = [
     /// commentMultiline
     [CHAR.STAR, CHAR.FORWARD_SLASH, MODE.EXIT],
   ],
+  [
+    /// animation
+    [CHAR.IDENT, CHAR.NOT_IDENT, MODE.MARK_INSERT_LOCATION],
+    [CHAR.ANY, CHAR.SEMICOLON, MODE.EXIT_INSERT_SCOPE],
+    [CHAR.ANY, CHAR.CLOSE_BRACE, MODE.EXIT_INSERT_SCOPE],
+    ...STRINGS_COMMENTS,
+  ],
 ];
diff --git a/packages/qwik/src/core/style/scoped-stylesheet.unit.ts b/packages/qwik/src/core/style/scoped-stylesheet.unit.ts
index 2881ca19d3c..5214704b461 100644
--- a/packages/qwik/src/core/style/scoped-stylesheet.unit.ts
+++ b/packages/qwik/src/core/style/scoped-stylesheet.unit.ts
@@ -113,6 +113,18 @@ scopedStyles('@keyframe', () => {
     scopeStylesheet('@keyframes slidein {from{b:c(0%);}to{b:c(0%);}}', '_'),
     '@keyframes slidein-⭐️_ {from{b:c(0%);}to{b:c(0%);}}'
   );
+  equal(
+    scopeStylesheet('@-prefix-keyframes slidein {from{b:c(0%);}to{b:c(0%);}}', '_'),
+    '@-prefix-keyframes slidein-⭐️_ {from{b:c(0%);}to{b:c(0%);}}'
+  );
+});
+
+scopedStyles('animation-name', () => {
+  equal(scopeStylesheet('p{animation-name: x}', '_'), 'p.⭐️_{animation-name: x-⭐️_}');
+});
+
+scopedStyles('animation', () => {
+  equal(scopeStylesheet('p{animation: a b c }', '_'), 'p.⭐️_{animation: a b c-⭐️_ }');
 });
 
 scopedStyles('@font-face', () => {

From 9df54ed55370eed2c3ef2a6bff6dc4e7c89f1ee7 Mon Sep 17 00:00:00 2001
From: Steve Randy Tantra <525332+steverandy@users.noreply.github.com>
Date: Mon, 22 Aug 2022 16:17:01 +0800
Subject: [PATCH 19/25] fix: include full url in express middleware (#1105)

---
 packages/qwik-city/middleware/express/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/qwik-city/middleware/express/index.ts b/packages/qwik-city/middleware/express/index.ts
index f433b570252..9366f13ecdb 100644
--- a/packages/qwik-city/middleware/express/index.ts
+++ b/packages/qwik-city/middleware/express/index.ts
@@ -50,7 +50,7 @@ export function qwikCity(render: Render, opts?: QwikCityExpressOptions) {
 export interface QwikCityExpressOptions extends QwikCityRequestOptions {}
 
 function fromExpressHttp(req: Request, res: Response) {
-  const url = new URL(req.path, `${req.protocol}://${req.headers.host}`);
+  const url = new URL(req.url, `${req.protocol}://${req.headers.host}`);
   const requestHeaders = createHeaders();
   const nodeRequestHeaders = req.headers;
   for (const key in nodeRequestHeaders) {

From db4dea7da0d05b4d3ec6d1e8467a7b3a959b5581 Mon Sep 17 00:00:00 2001
From: Manu MA <manu.mtza@gmail.com>
Date: Mon, 22 Aug 2022 10:46:05 +0100
Subject: [PATCH 20/25] fix: useOn() on client bootstrapping (#1108)

---
 .../qwik/src/core/render/dom/render.unit.tsx  | 80 ++++++++++++++-----
 packages/qwik/src/core/render/dom/visitor.ts  | 21 +++--
 .../broadcast-events/broadcast-event.tsx      | 18 +++--
 starters/apps/e2e/src/components/ref/ref.tsx  | 31 +++++++
 starters/apps/e2e/src/entry.ssr.tsx           |  2 +
 starters/apps/e2e/src/root.tsx                |  6 ++
 starters/e2e/e2e.spec.ts                      | 56 +++++++++++++
 7 files changed, 181 insertions(+), 33 deletions(-)
 create mode 100644 starters/apps/e2e/src/components/ref/ref.tsx

diff --git a/packages/qwik/src/core/render/dom/render.unit.tsx b/packages/qwik/src/core/render/dom/render.unit.tsx
index 7aafce0164d..1e1d0954334 100644
--- a/packages/qwik/src/core/render/dom/render.unit.tsx
+++ b/packages/qwik/src/core/render/dom/render.unit.tsx
@@ -6,7 +6,7 @@ import { pauseContainer } from '../../object/store';
 import { useLexicalScope } from '../../use/use-lexical-scope.public';
 import { useStore } from '../../use/use-store.public';
 import { useClientEffect$, useServerMount$, useWatch$ } from '../../use/use-watch';
-import { useCleanup$ } from '../../use/use-on';
+import { useCleanup$, useOn } from '../../use/use-on';
 import { Slot } from '../jsx/slot.public';
 import { render } from './render.public';
 import { useStylesQrl } from '../../use/use-styles';
@@ -296,6 +296,29 @@ renderSuite('should project un-named slot component', async () => {
   );
 });
 
+renderSuite('should render host events on the first element', async () => {
+  const fixture = new ElementFixture();
+
+  await render(fixture.host, <UseEvents />);
+  await expectDOM(
+    fixture.host,
+    `
+  <host q:version="" q:container="resumed">
+    <!--qv q:key=sX: q:id=0-->
+    hello
+    <div
+      q:id="1"
+      on:qvisible="/runtimeQRL#_[0]"
+      on:click="/inlinedQRL#use-on-click"
+    >
+      thing
+    </div>
+    stuff
+    <!--/qv-->
+  </host>`
+  );
+});
+
 renderSuite('should project named slot component', async () => {
   const fixture = new ElementFixture();
 
@@ -401,30 +424,30 @@ renderSuite('should render a component with hooks', async () => {
   await expectRendered(
     fixture,
     `
-      <div>
-        <div q:id="1" id="effect"></div>
-        <div q:id="2" id="effect-destroy"></div>
-        <div id="watch">true</div>
-        <div q:id="3" id="watch-destroy"></div>
-        <div id="server-mount">true</div>
-        <div q:id="4" id="cleanup"></div>
-        <div id="reference">true</div>
-      </div>`
+    <div q:id="1" on:qvisible="/runtimeQRL#_[0]">
+      <div q:id="2" id="effect"></div>
+      <div q:id="3" id="effect-destroy"></div>
+      <div id="watch">true</div>
+      <div q:id="4" id="watch-destroy"></div>
+      <div id="server-mount">true</div>
+      <div q:id="5" id="cleanup"></div>
+      <div id="reference">true</div>
+    </div>`
   );
 
   await pauseContainer(fixture.host);
   await expectRendered(
     fixture,
     `
-      <div>
-        <div q:id="1" id="effect"></div>
-        <div q:id="2" id="effect-destroy"></div>
-        <div id="watch">true</div>
-        <div q:id="3" id="watch-destroy">true</div>
-        <div id="server-mount">true</div>
-        <div q:id="4" id="cleanup">true</div>
-        <div id="reference">true</div>
-      </div>`
+    <div q:id="1" on:qvisible="/runtimeQRL#_[0]">
+      <div q:id="2" id="effect"></div>
+      <div q:id="3" id="effect-destroy"></div>
+      <div id="watch">true</div>
+      <div q:id="4" id="watch-destroy">true</div>
+      <div id="server-mount">true</div>
+      <div q:id="5" id="cleanup">true</div>
+      <div id="reference">true</div>
+    </div>`
   );
 });
 
@@ -710,6 +733,25 @@ export const Transparent = component$(() => {
   return <Slot></Slot>;
 });
 
+export const UseEvents = component$(() => {
+  useClientEffect$(() => {
+    console.warn('hello');
+  });
+  useOn(
+    'click',
+    inlinedQrl(() => {
+      console.warn('click');
+    }, 'use-on-click')
+  );
+  return (
+    <>
+      hello
+      <div>thing</div>
+      stuff
+    </>
+  );
+});
+
 //////////////////////////////////////////////////////////////////////////////////////////
 export const Hooks = component$(() => {
   const watchDestroyDiv = useRef();
diff --git a/packages/qwik/src/core/render/dom/visitor.ts b/packages/qwik/src/core/render/dom/visitor.ts
index 70621b503f9..11adfd4e2ea 100644
--- a/packages/qwik/src/core/render/dom/visitor.ts
+++ b/packages/qwik/src/core/render/dom/visitor.ts
@@ -718,7 +718,7 @@ export const PROP_HANDLER_MAP: Record<string, PropHandler> = {
 };
 
 export const updateProperties = (
-  ctx: QContext,
+  elCtx: QContext,
   rctx: RenderContext,
   expectProps: Record<string, any>,
   isSvg: boolean
@@ -727,8 +727,8 @@ export const updateProperties = (
   if (keys.length === 0) {
     return false;
   }
-  let cache = ctx.$cache$;
-  const elm = ctx.$element$;
+  let cache = elCtx.$cache$;
+  const elm = elCtx.$element$;
   for (const key of keys) {
     if (key === 'children') {
       continue;
@@ -742,7 +742,7 @@ export const updateProperties = (
     // Early exit if value didnt change
     const cacheKey = key;
     if (!cache) {
-      cache = ctx.$cache$ = new Map();
+      cache = elCtx.$cache$ = new Map();
     }
     const oldValue = cache.get(cacheKey);
     if (newValue === oldValue) {
@@ -757,7 +757,7 @@ export const updateProperties = (
     }
 
     if (isOnProp(key)) {
-      setEvent(ctx, key, newValue);
+      setEvent(elCtx, key, newValue);
       continue;
     }
 
@@ -778,11 +778,16 @@ export const updateProperties = (
     // Fallback to render attribute
     setAttribute(rctx, elm, key, newValue);
   }
-  if (ctx.$listeners$) {
-    ctx.$listeners$.forEach((value, key) => {
-      setAttribute(rctx, elm, fromCamelToKebabCase(key), serializeQRLs(value, ctx));
+  const cmp = rctx.$currentComponent$;
+  if (cmp && !cmp.$attachedListeners$) {
+    cmp.$attachedListeners$ = true;
+    cmp.$ctx$.$listeners$?.forEach((qrl, eventName) => {
+      addQRLListener(elCtx, eventName, qrl);
     });
   }
+  elCtx.$listeners$?.forEach((value, key) => {
+    setAttribute(rctx, elm, fromCamelToKebabCase(key), serializeQRLs(value, elCtx));
+  });
   return false;
 };
 
diff --git a/starters/apps/e2e/src/components/broadcast-events/broadcast-event.tsx b/starters/apps/e2e/src/components/broadcast-events/broadcast-event.tsx
index 54b73687466..a7ca3980549 100644
--- a/starters/apps/e2e/src/components/broadcast-events/broadcast-event.tsx
+++ b/starters/apps/e2e/src/components/broadcast-events/broadcast-event.tsx
@@ -73,6 +73,9 @@ export function useSelfMouse() {
 }
 
 export const BroadcastEvents = component$(() => {
+  const state = useStore({
+    count: 0,
+  });
   return (
     <div>
       <ul>
@@ -87,7 +90,10 @@ export const BroadcastEvents = component$(() => {
         <li>1</li>
         <li>1</li>
       </ul>
-      <MouseEvents />
+      <button id="btn-toggle-render" type="button" onClick$={() => state.count++}>
+        Rerender
+      </button>
+      <MouseEvents key={state.count} />
     </div>
   );
 });
@@ -99,13 +105,13 @@ export const MouseEvents = component$(() => {
 
   return (
     <div>
-      <p>
-        (Document: x: {mouseDoc.x}, y: {mouseDoc.y}, inside: {mouseDoc.inside})
+      <p class="document">
+        (Document: x: {mouseDoc.x}, y: {mouseDoc.y})
       </p>
-      <p>
-        (Window: x: {mouseWin.x}, y: {mouseWin.y}, inside: {mouseWin.inside})
+      <p class="window">
+        (Window: x: {mouseWin.x}, y: {mouseWin.y})
       </p>
-      <p>
+      <p class="self">
         (Host: x: {mouseSelf.x}, y: {mouseSelf.y}, inside: {mouseSelf.inside})
       </p>
     </div>
diff --git a/starters/apps/e2e/src/components/ref/ref.tsx b/starters/apps/e2e/src/components/ref/ref.tsx
new file mode 100644
index 00000000000..0fe269958eb
--- /dev/null
+++ b/starters/apps/e2e/src/components/ref/ref.tsx
@@ -0,0 +1,31 @@
+import { component$, useStore, useRef, useClientEffect$ } from '@builder.io/qwik';
+
+export const RefRoot = component$(() => {
+  const state = useStore({
+    visible: false,
+  });
+  useClientEffect$(() => {
+    state.visible = true;
+  });
+
+  return (
+    <>
+      <div>
+        <Ref id="static"></Ref>
+        {state.visible && <Ref id="dynamic"></Ref>}
+      </div>
+    </>
+  );
+});
+
+export const Ref = component$((props: { id: string }) => {
+  const ref = useRef();
+  useClientEffect$(() => {
+    ref.current!.textContent = 'Rendered';
+  });
+  return (
+    <>
+      <div id={props.id} ref={ref} />
+    </>
+  );
+});
diff --git a/starters/apps/e2e/src/entry.ssr.tsx b/starters/apps/e2e/src/entry.ssr.tsx
index 2cb4cb91d5b..80f9dca4176 100644
--- a/starters/apps/e2e/src/entry.ssr.tsx
+++ b/starters/apps/e2e/src/entry.ssr.tsx
@@ -21,6 +21,7 @@ import { TreeshakingApp } from './components/treeshaking/treeshaking';
 import { Streaming } from './components/streaming/streaming';
 import { ResourceSerialization } from './components/resource/resource-serialization';
 import { MountRoot } from './components/mount/mount';
+import { RefRoot } from './components/ref/ref';
 
 /**
  * Entry point for server-side pre-rendering.
@@ -50,6 +51,7 @@ export default function (opts: RenderToStreamOptions, url: URL) {
     '/e2e/treeshaking': () => <TreeshakingApp />,
     '/e2e/streaming': () => <Streaming />,
     '/e2e/mount': () => <MountRoot />,
+    '/e2e/ref': () => <RefRoot />,
   };
   const Test = tests[url.pathname];
 
diff --git a/starters/apps/e2e/src/root.tsx b/starters/apps/e2e/src/root.tsx
index f274bc28607..31a1c70f21f 100644
--- a/starters/apps/e2e/src/root.tsx
+++ b/starters/apps/e2e/src/root.tsx
@@ -59,6 +59,12 @@ export const Root = component$(() => {
       <p>
         <a href="/e2e/mount">Mount</a>
       </p>
+      <p>
+        <a href="/e2e/streaming">Streaming</a>
+      </p>
+      <p>
+        <a href="/e2e/ref">Ref</a>
+      </p>
     </section>
   );
 });
diff --git a/starters/e2e/e2e.spec.ts b/starters/e2e/e2e.spec.ts
index fea2cbbc8fb..db2ed259b4a 100644
--- a/starters/e2e/e2e.spec.ts
+++ b/starters/e2e/e2e.spec.ts
@@ -724,4 +724,60 @@ AFTER useServerMount4()
 Click`);
     });
   });
+
+  test.describe('ref', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/e2e/ref');
+      page.on('pageerror', (err) => expect(err).toEqual(undefined));
+    });
+
+    test('should render correctly', async ({ page }) => {
+      const staticEl = await page.locator('#static');
+      const dynamic = await page.locator('#dynamic');
+      await expect(staticEl).toHaveText('Rendered');
+      await expect(dynamic).toHaveText('Rendered');
+    });
+  });
+
+  test.describe('broadcast-events', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/e2e/broadcast-events');
+      page.on('pageerror', (err) => expect(err).toEqual(undefined));
+    });
+
+    function tests() {
+      test('should render correctly', async ({ page }) => {
+        const document = await page.locator('p.document');
+        const window = await page.locator('p.window');
+        const self = await page.locator('p.self');
+
+        await expect(document).toHaveText('(Document: x: 0, y: 0)');
+        await expect(window).toHaveText('(Window: x: 0, y: 0)');
+        await expect(self).toHaveText('(Host: x: 0, y: 0, inside: false)');
+
+        await page.mouse.move(100, 50);
+
+        await expect(document).toHaveText('(Document: x: 100, y: 50)');
+        await expect(window).toHaveText('(Window: x: 100, y: 50)');
+        await expect(self).toHaveText('(Host: x: 0, y: 0, inside: false)');
+
+        await page.mouse.move(100, 300);
+
+        await expect(document).toHaveText('(Document: x: 100, y: 300)');
+        await expect(window).toHaveText('(Window: x: 100, y: 300)');
+        await expect(self).toHaveText('(Host: x: 100, y: 300, inside: true)');
+      });
+    }
+
+    tests();
+
+    test.describe('client rerender', () => {
+      test.beforeEach(async ({ page }) => {
+        const toggleRender = await page.locator('#btn-toggle-render');
+        await toggleRender.click();
+        await page.waitForTimeout(100);
+      });
+      tests();
+    });
+  });
 });

From 14071b595134f5dd28410de253d0b23833e47507 Mon Sep 17 00:00:00 2001
From: Manu MA <manu.mtza@gmail.com>
Date: Mon, 22 Aug 2022 11:03:45 +0100
Subject: [PATCH 21/25] refactor: remove useDocument() (#1107)

---
 .../tutorial/hooks/use-document/index.mdx     |  8 --------
 .../hooks/use-document/problem/app.tsx        |  5 -----
 .../hooks/use-document/solution/app.tsx       |  6 ------
 .../src/routes/tutorial/tutorial-menu.json    |  7 -------
 packages/qwik/src/core/api.md                 |  3 ---
 packages/qwik/src/core/index.ts               |  1 -
 packages/qwik/src/core/object/store.unit.tsx  | 10 +++-------
 .../qwik/src/core/use/use-document.public.ts  | 19 -------------------
 8 files changed, 3 insertions(+), 56 deletions(-)
 delete mode 100644 packages/docs/src/routes/tutorial/hooks/use-document/index.mdx
 delete mode 100644 packages/docs/src/routes/tutorial/hooks/use-document/problem/app.tsx
 delete mode 100644 packages/docs/src/routes/tutorial/hooks/use-document/solution/app.tsx
 delete mode 100644 packages/qwik/src/core/use/use-document.public.ts

diff --git a/packages/docs/src/routes/tutorial/hooks/use-document/index.mdx b/packages/docs/src/routes/tutorial/hooks/use-document/index.mdx
deleted file mode 100644
index 7bea20a6b6c..00000000000
--- a/packages/docs/src/routes/tutorial/hooks/use-document/index.mdx
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: useDocument()
----
-
-`useDocument()` returns the current `document`. In the browser `useDocument()` is identical to `document` (as browser only has one document). On the server, there is no global document; therefore, referring to `document` is `undefined`. Additionally, the server may be processing many different requests and therefore may have more than one `document` at a time. `useDocument()` on the server returns the document associated with the current application.
-
-IMPORTANT: Qwik currently uses [domino](https://www.npmjs.com/package/domino) on the server and `useDocument()` returns the domino instance. This is a temporary solution until Qwik switches to string concatenation on the server, in which case the `useDocument()` may be deprecated.
-
diff --git a/packages/docs/src/routes/tutorial/hooks/use-document/problem/app.tsx b/packages/docs/src/routes/tutorial/hooks/use-document/problem/app.tsx
deleted file mode 100644
index e4d82006a82..00000000000
--- a/packages/docs/src/routes/tutorial/hooks/use-document/problem/app.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { component$ } from '@builder.io/qwik';
-
-export const App = component$(() => {
-  return <my-app>Host element tag-name: {'print current document.location here'}</my-app>;
-});
diff --git a/packages/docs/src/routes/tutorial/hooks/use-document/solution/app.tsx b/packages/docs/src/routes/tutorial/hooks/use-document/solution/app.tsx
deleted file mode 100644
index bc735721646..00000000000
--- a/packages/docs/src/routes/tutorial/hooks/use-document/solution/app.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { component$, useDocument } from '@builder.io/qwik';
-
-export const App = component$(() => {
-  const doc = useDocument();
-  return <my-app>Host element tag-name: {doc.location.toString()}</my-app>;
-});
diff --git a/packages/docs/src/routes/tutorial/tutorial-menu.json b/packages/docs/src/routes/tutorial/tutorial-menu.json
index 8b7b1fa374c..c20fbd4e0ef 100644
--- a/packages/docs/src/routes/tutorial/tutorial-menu.json
+++ b/packages/docs/src/routes/tutorial/tutorial-menu.json
@@ -275,13 +275,6 @@
         "enableClientOutput": false,
         "enableSsrOutput": false
       },
-      {
-        "id": "use-document",
-        "title": "useDocument()",
-        "enableHtmlOutput": false,
-        "enableClientOutput": false,
-        "enableSsrOutput": false
-      },
       {
         "id": "use-on",
         "title": "useOn() / useOnDocument() / useOnWindow()",
diff --git a/packages/qwik/src/core/api.md b/packages/qwik/src/core/api.md
index 0150f120799..d704c9b7cc1 100644
--- a/packages/qwik/src/core/api.md
+++ b/packages/qwik/src/core/api.md
@@ -611,9 +611,6 @@ export const useContext: <STATE extends object>(context: Context<STATE>) => STAT
 // @public
 export const useContextProvider: <STATE extends object>(context: Context<STATE>, newValue: STATE) => void;
 
-// @alpha
-export const useDocument: () => Document;
-
 // @public (undocumented)
 export interface UseEffectOptions {
     eagerness?: EagernessOptions;
diff --git a/packages/qwik/src/core/index.ts b/packages/qwik/src/core/index.ts
index 72e68788572..f745081fa8b 100644
--- a/packages/qwik/src/core/index.ts
+++ b/packages/qwik/src/core/index.ts
@@ -59,7 +59,6 @@ export { _hW } from './render/dom/notify-render';
 //////////////////////////////////////////////////////////////////////////////////////////
 // use API
 //////////////////////////////////////////////////////////////////////////////////////////
-export { useDocument } from './use/use-document.public';
 export { useLexicalScope } from './use/use-lexical-scope.public';
 export { useStore } from './use/use-store.public';
 export { useRef } from './use/use-ref';
diff --git a/packages/qwik/src/core/object/store.unit.tsx b/packages/qwik/src/core/object/store.unit.tsx
index 5fb78bc8541..23dea4804ae 100644
--- a/packages/qwik/src/core/object/store.unit.tsx
+++ b/packages/qwik/src/core/object/store.unit.tsx
@@ -8,7 +8,6 @@ import { $ } from '../import/qrl.public';
 import { logDebug } from '../util/log';
 import { runtimeQrl } from '../import/qrl';
 import { pauseContainer } from '../object/store';
-import { useDocument } from '../use/use-document.public';
 import { suite } from 'uvu';
 import { equal } from 'uvu/assert';
 import { render } from '../render/dom/render.public';
@@ -33,7 +32,7 @@ storeSuite('should serialize content', async () => {
   <body q:version="" q:container="resumed">
     <div>
       <!--qv q:key=sX: q:id=0-->
-      <div q:id="1" on:click="/runtimeQRL#_[0 1 2 3 4 5 6 7 8 9 10 11]"></div>
+      <div q:id="1" on:click="/runtimeQRL#_[0 1 2 3 4 5 6 7 8 9 10]"></div>
       <!--/qv-->
     </div>
   </body>`
@@ -44,7 +43,7 @@ storeSuite('should serialize content', async () => {
   equal(JSON.parse(script.textContent!), {
     ctx: {
       '#1': {
-        r: '0 1 2 m 8 f 7 6 i! m k l',
+        r: '0 1 2 l 8 f 7 6 i! l k',
       },
     },
     objs: [
@@ -57,7 +56,7 @@ storeSuite('should serialize content', async () => {
         d: '6',
         e: '7',
         f: '8',
-        g: 'm',
+        g: 'l',
         h: '9',
         i: 'e',
       },
@@ -85,7 +84,6 @@ storeSuite('should serialize content', async () => {
       },
       0,
       '\u0001/runtimeQRL#_',
-      '\u0002',
       '\u0000',
     ],
     subs: [],
@@ -134,7 +132,6 @@ export const LexicalScope = component$(() => {
   const boolTrue = true;
   const boolFalse = false;
   const qrl = $(() => logDebug('qrl'));
-  const doc = useDocument();
   const thing = runtimeQrl(LexicalScope_render, [
     nu,
     str,
@@ -147,7 +144,6 @@ export const LexicalScope = component$(() => {
     state,
     noserialize,
     qrl,
-    doc,
   ]);
   return <div onClick$={thing}></div>;
 });
diff --git a/packages/qwik/src/core/use/use-document.public.ts b/packages/qwik/src/core/use/use-document.public.ts
deleted file mode 100644
index 2af1b4b6453..00000000000
--- a/packages/qwik/src/core/use/use-document.public.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useInvokeContext } from './use-core';
-
-// <docs markdown="../readme.md#useDocument">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-// (edit ../readme.md#useDocument instead)
-/**
- * Retrieves the document of the current element. It's important to use this method instead of
- * accessing `document` directly because during SSR, the global document might not exist.
- *
- * NOTE: `useDocument` method can only be used in the synchronous portion of the callback (before
- * any `await` statements.)
- *
- * @alpha
- */
-// </docs>
-export const useDocument = (): Document => {
-  const ctx = useInvokeContext();
-  return ctx.$doc$;
-};

From 6af78839c5e8bc55f8e9d6fe6226ad08edf6906f Mon Sep 17 00:00:00 2001
From: Raj Nigam <rajington@users.noreply.github.com>
Date: Mon, 22 Aug 2022 06:06:15 -0400
Subject: [PATCH 22/25] docs: fix and improve React examples (#1070)

---
 packages/docs/src/routes/docs/cheat-sheet/index.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/docs/src/routes/docs/cheat-sheet/index.mdx b/packages/docs/src/routes/docs/cheat-sheet/index.mdx
index 29b839ea3ea..f5dade88f36 100644
--- a/packages/docs/src/routes/docs/cheat-sheet/index.mdx
+++ b/packages/docs/src/routes/docs/cheat-sheet/index.mdx
@@ -76,7 +76,7 @@ export function Component() {
   const [value, setValue] = useState(0);
   return (
     <div>
-      Value is: ${value}
+      Value is: {value}
     </div>
   )
 }
@@ -108,7 +108,7 @@ export function Counter() {
   return (
     <>
       <div>
-        Value is: ${count}
+        Value is: {count}
       </div>
       <button onClick={() => setCount(count + 1)}>
         Increment
@@ -155,7 +155,7 @@ export function Clock() {
   });
   return (
     <div>
-      Seconds: ${seconds}
+      Seconds: {seconds}
     </div>
   )
 }
@@ -181,7 +181,7 @@ export const Fetch = component$(() => {
 
   return (
     <>
-      <div>${state.responseJson.name}</div>
+      <div>${state.responseJson?.name}</div>
       <input name="url" onInput$={(ev) => (state.url = ev.target.value)} />
     </>
   );
@@ -201,7 +201,7 @@ export function Fetch() {
   }, [url]);
   return (
     <>
-      <div>${responseJson.name}</div>
+      <div>{responseJson?.name}</div>
       <input name="url" onInput={(ev) => setUrl(ev.target.value)} />
     </>
   );
@@ -389,7 +389,7 @@ export function Presidents() {
   return (
     <ul>
       {presidents.map((president) => (
-        <li>
+        <li key={president.name + president.years}>
           {president.name} ({president.years})
         </li>
       ))}

From 4c460e028660a4993c6728defcbee624560446cb Mon Sep 17 00:00:00 2001
From: Jesper <376921+jesperp@users.noreply.github.com>
Date: Mon, 22 Aug 2022 12:18:31 +0200
Subject: [PATCH 23/25] docs: Update expired asciinema recording (#1059)

---
 packages/docs/src/routes/docs/getting-started/index.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/routes/docs/getting-started/index.mdx b/packages/docs/src/routes/docs/getting-started/index.mdx
index af1f197f7f2..5228f5a873f 100644
--- a/packages/docs/src/routes/docs/getting-started/index.mdx
+++ b/packages/docs/src/routes/docs/getting-started/index.mdx
@@ -31,7 +31,7 @@ $ npm init qwik@latest
 
 The CLI will guide you through an interactive menu to set the project-name and select one of the starters:
 
-<script id="asciicast-7Ielp9cJZfy0MglQvOxBLgUqF" src="https://asciinema.org/a/7Ielp9cJZfy0MglQvOxBLgUqF.js" async></script>
+<script id="asciicast-514542" src="https://asciinema.org/a/514542.js" async></script>
 
 After your new app is created, you will see an output like the following in your terminal:
 

From 460923b4319d48cf5d3c9f2121f3e56caac55695 Mon Sep 17 00:00:00 2001
From: Manu MA <manu.mtza@gmail.com>
Date: Mon, 22 Aug 2022 16:27:07 +0100
Subject: [PATCH 24/25] =?UTF-8?q?=F0=9F=8D=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/.env                            |  6 ++--
 packages/docs/package.json                    |  2 +-
 .../docsearch/doc-search-button.tsx           | 29 +++++--------------
 .../docs/src/components/docsearch/footer.tsx  |  2 +-
 .../docs/src/components/docsearch/snippet.tsx |  2 +-
 packages/docs/src/components/head/head.tsx    |  8 +++--
 .../docs/src/components/header/header.tsx     |  7 -----
 yarn.lock                                     | 11 ++-----
 8 files changed, 21 insertions(+), 46 deletions(-)

diff --git a/packages/docs/.env b/packages/docs/.env
index af399eac3ed..19fda158648 100644
--- a/packages/docs/.env
+++ b/packages/docs/.env
@@ -1,3 +1,3 @@
-VITE_ALGOLIA_APP_ID=EGKUXMJIF5
-VITE_ALGOLIA_SEARCH_KEY=f33b1a3676a3ee83ed7c133203a7e762
-VITE_ALGOLIA_INDEX=docsearch-legacy
\ No newline at end of file
+VITE_ALGOLIA_APP_ID=X0ISHY6M1I
+VITE_ALGOLIA_SEARCH_KEY=33e17ca2559e66c62577ab1d6c195a36
+VITE_ALGOLIA_INDEX=qwik
\ No newline at end of file
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 37958116eb6..f9c6647a4ab 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -21,7 +21,7 @@
     "@algolia/autocomplete-core": "^1.7.1",
     "@algolia/client-search": "^4.14.2",
     "@builder.io/partytown": "^0.6.4",
-    "@builder.io/qwik": "0.0.100-dev20220820024200",
+    "@builder.io/qwik": "^0.0.101",
     "@builder.io/qwik-city": "0.0.101-3",
     "@cloudflare/kv-asset-handler": "0.2.0",
     "@docsearch/css": "^3.2.0",
diff --git a/packages/docs/src/components/docsearch/doc-search-button.tsx b/packages/docs/src/components/docsearch/doc-search-button.tsx
index e433127a0fe..cecc529618f 100644
--- a/packages/docs/src/components/docsearch/doc-search-button.tsx
+++ b/packages/docs/src/components/docsearch/doc-search-button.tsx
@@ -1,4 +1,4 @@
-import { component$, useClientEffect$, useStore } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import { ControlKeyIcon } from './icons/ControlKeyIcon';
 import { SearchIcon } from './icons/SearchIcon';
 
@@ -18,21 +18,10 @@ export interface DocSearchButtonProps {
 }
 
 export const DocSearchButton = component$((props: DocSearchButtonProps) => {
-  const ACTION_KEY_DEFAULT = 'Ctrl' as const;
-  const ACTION_KEY_APPLE = '⌘' as const;
+  // const ACTION_KEY_DEFAULT = 'Ctrl' as const;
+  // const ACTION_KEY_APPLE = '⌘' as const;
   const { translations = {} } = props;
   const { buttonText = 'Search', buttonAriaLabel = 'Search' } = translations;
-  const store = useStore({
-    key: ACTION_KEY_APPLE,
-  } as {
-    key: typeof ACTION_KEY_APPLE | typeof ACTION_KEY_DEFAULT | null;
-  });
-
-  useClientEffect$(() => {
-    if (typeof navigator !== 'undefined') {
-      isAppleDevice() ? (store.key = ACTION_KEY_APPLE) : (store.key = ACTION_KEY_DEFAULT);
-    }
-  });
   return (
     <button
       ref={props.ref}
@@ -47,14 +36,10 @@ export const DocSearchButton = component$((props: DocSearchButtonProps) => {
       </span>
 
       <span className="DocSearch-Button-Keys">
-        {store.key !== null && (
-          <>
-            <kbd className="DocSearch-Button-Key">
-              {store.key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : store.key}
-            </kbd>
-            <kbd className="DocSearch-Button-Key">K</kbd>
-          </>
-        )}
+        <kbd className="DocSearch-Button-Key">
+          <ControlKeyIcon />
+        </kbd>
+        <kbd className="DocSearch-Button-Key">K</kbd>
       </span>
     </button>
   );
diff --git a/packages/docs/src/components/docsearch/footer.tsx b/packages/docs/src/components/docsearch/footer.tsx
index 7e51d2a9e2e..7e41ee792fc 100644
--- a/packages/docs/src/components/docsearch/footer.tsx
+++ b/packages/docs/src/components/docsearch/footer.tsx
@@ -1,4 +1,4 @@
-import { component$, Slot } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import { AlgoliaLogo } from './algolia-logo';
 
 export type FooterTranslations = Partial<{
diff --git a/packages/docs/src/components/docsearch/snippet.tsx b/packages/docs/src/components/docsearch/snippet.tsx
index 3d26d39ca28..b933df6afda 100644
--- a/packages/docs/src/components/docsearch/snippet.tsx
+++ b/packages/docs/src/components/docsearch/snippet.tsx
@@ -1,4 +1,4 @@
-import { component$, mutable } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 
 export function getPropertyByPath(object: Record<string, any>, path: string): any {
   const parts = path.split('.');
diff --git a/packages/docs/src/components/head/head.tsx b/packages/docs/src/components/head/head.tsx
index 944ae5f19e0..5498b005b5e 100644
--- a/packages/docs/src/components/head/head.tsx
+++ b/packages/docs/src/components/head/head.tsx
@@ -17,8 +17,12 @@ export const Head = component$(() => {
       <meta name="viewport" content="width=device-width" />
 
       <Manifest />
-      <Social loc={loc} head={head} />
-      <Vendor />
+      {import.meta.env.PROD && (
+        <>
+          <Social loc={loc} head={head} />
+          <Vendor />
+        </>
+      )}
 
       {head.meta.map((m) => (
         <meta {...m} />
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 754aee95058..62d888abbe9 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -35,13 +35,6 @@ export const Header = component$(() => {
             appId={import.meta.env.VITE_ALGOLIA_APP_ID}
             apiKey={import.meta.env.VITE_ALGOLIA_SEARCH_KEY}
             indexName={import.meta.env.VITE_ALGOLIA_INDEX}
-            transformItems$={(items: any[]) => {
-              return items.map((item) => ({
-                ...item,
-                // TODO: remove this after migrate to algolia crawler together with search token & index name
-                url: item.url?.replace('http://host.docker.internal:3000', window.origin),
-              }));
-            }}
           />
         </div>
         <button onClick$={toggleMenu} class="mobile-menu" type="button">
diff --git a/yarn.lock b/yarn.lock
index fdf60fb6337..84c733ef243 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -311,14 +311,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@builder.io/qwik@npm:0.0.100-dev20220820024200":
-  version: 0.0.100-dev20220820024200
-  resolution: "@builder.io/qwik@npm:0.0.100-dev20220820024200"
-  checksum: b9dd2dfad5c6d7a5e34402cd62c4278875df427a9fd7022f33ba9a447a70c47a301f424f34490b4888866455e2bed9aa1b09f42d5bab2bdb8e8dd7e6ea13c161
-  languageName: node
-  linkType: hard
-
-"@builder.io/qwik@workspace:*, @builder.io/qwik@workspace:packages/qwik":
+"@builder.io/qwik@^0.0.101, @builder.io/qwik@workspace:*, @builder.io/qwik@workspace:packages/qwik":
   version: 0.0.0-use.local
   resolution: "@builder.io/qwik@workspace:packages/qwik"
   languageName: unknown
@@ -7560,7 +7553,7 @@ __metadata:
     "@algolia/autocomplete-core": ^1.7.1
     "@algolia/client-search": ^4.14.2
     "@builder.io/partytown": ^0.6.4
-    "@builder.io/qwik": 0.0.100-dev20220820024200
+    "@builder.io/qwik": ^0.0.101
     "@builder.io/qwik-city": 0.0.101-3
     "@cloudflare/kv-asset-handler": 0.2.0
     "@docsearch/css": ^3.2.0

From 4d17f0cccd82ced015d77ffa99b0a1216a489496 Mon Sep 17 00:00:00 2001
From: Manu MA <manu.mtza@gmail.com>
Date: Mon, 22 Aug 2022 16:55:28 +0100
Subject: [PATCH 25/25] =?UTF-8?q?=F0=9F=9A=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/src/components/docsearch/search-box.tsx   | 1 -
 packages/docs/src/components/docsearch/utils/groupBy.ts | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/docs/src/components/docsearch/search-box.tsx b/packages/docs/src/components/docsearch/search-box.tsx
index f5888c067d3..212a7228480 100644
--- a/packages/docs/src/components/docsearch/search-box.tsx
+++ b/packages/docs/src/components/docsearch/search-box.tsx
@@ -64,7 +64,6 @@ export const SearchBox = component$(({ translations = {}, ...props }: SearchBoxP
         <input
           class="DocSearch-Input"
           aria-autocomplete="both"
-          aria-activedescendant={undefined ? '' : 'docsearch-item-ITEM_ID'}
           aria-control="docsearch-list"
           aria-labelledby="docsearch-label"
           value={props.state.query}
diff --git a/packages/docs/src/components/docsearch/utils/groupBy.ts b/packages/docs/src/components/docsearch/utils/groupBy.ts
index d0408bc408d..adf9a805e98 100644
--- a/packages/docs/src/components/docsearch/utils/groupBy.ts
+++ b/packages/docs/src/components/docsearch/utils/groupBy.ts
@@ -5,7 +5,7 @@ export function groupBy<TValue extends Record<string, unknown>>(
   return values.reduce<Record<string, TValue[]>>((acc, item) => {
     const key = predicate(item);
 
-    if (!acc.hasOwnProperty(key)) {
+    if (!Object.prototype.hasOwnProperty.call(acc, key)) {
       acc[key] = [];
     }