feat: polish qwik-city

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "qwik-monorepo",
-  "version": "0.0.20-4",
+  "version": "0.0.20-5",
   "scripts": {
     "build": "yarn node scripts --tsc --build --platform-binding-wasm-copy",
     "build.full": "yarn node scripts --tsc --build --api --eslint --platform-binding --wasm",

packages/create-qwik/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.20-4",
+  "version": "0.0.20-5",
   "description": "Interactive CLI and API for generating Qwik projects.",
   "bin": "create-qwik",
   "main": "index.js",

packages/docs/package.json

@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@builder.io/partytown": "^0.5.4",
-    "@builder.io/qwik": "0.0.20-4",
+    "@builder.io/qwik": "workspace:*",
     "@builder.io/qwik-city": "0.0.4",
     "@cloudflare/kv-asset-handler": "0.2.0",
     "@cloudflare/workers-types": "^3.10.0",

packages/docs/src/components/app/app.tsx

@@ -1,11 +1,8 @@
-import { component$, Host, useStore, useScopedStyles$ } from '@builder.io/qwik';
+import { component$, Host, useStore, useContextProvider, useScopedStyles$ } from '@builder.io/qwik';
 import styles from './global.css';
 import { Page } from '../page/page';
-
-export interface SiteStore {
-  headerMenuOpen: boolean;
-  sideMenuOpen: boolean;
-}
+import { GlobalStore, SiteStore } from '../../utils/context';
+import { useQwikCity } from '@builder.io/qwik-city';
 
 export const App = component$(() => {
   useScopedStyles$(styles);
@@ -15,14 +12,17 @@ export const App = component$(() => {
     sideMenuOpen: false,
   });
 
+  useContextProvider(GlobalStore, store);
+  useQwikCity();
+
   return (
     <Host
       class={{
         'header-open': store.headerMenuOpen,
         'menu-open': store.sideMenuOpen,
       }}
     >
-      <Page store={store} />
+      <Page />
     </Host>
   );
 });

packages/docs/src/components/content-nav/content-nav.tsx

@@ -6,10 +6,8 @@ export const ContentNav = component$(
   async () => {
     useScopedStyles$(styles);
 
-    const hostElm = useHostElement();
-
-    const page = await usePage(hostElm);
-    const pageIndex = usePageIndex(hostElm)!;
+    const page = usePage();
+    const pageIndex = usePageIndex()!;
 
     let prevText: string | undefined;
     let prevHref: string | undefined;

packages/docs/src/components/header/header.tsx

@@ -1,27 +1,24 @@
-import { component$, Host, $, useScopedStyles$ } from '@builder.io/qwik';
+import { component$, Host, $, useScopedStyles$, useContext } from '@builder.io/qwik';
 import { CloseIcon } from '../svgs/close-icon';
 import { DiscordLogo } from '../svgs/discord-logo';
 import { GithubLogo } from '../svgs/github-logo';
 import { MoreIcon } from '../svgs/more-icon';
 import { QwikLogo } from '../svgs/qwik-logo';
 import { TwitterLogo } from '../svgs/twitter-logo';
-import type { SiteStore } from '../app/app';
 import styles from './header.css?inline';
-
-interface HeaderProps {
-  store: SiteStore;
-}
+import { GlobalStore } from '../../utils/context';
 
 export const Header = component$(
-  (props: HeaderProps) => {
+  () => {
     useScopedStyles$(styles);
+    const globalStore = useContext(GlobalStore);
 
     const toggleMenu = $(() => {
-      props.store.headerMenuOpen = !props.store.headerMenuOpen;
+      globalStore.headerMenuOpen = !globalStore.headerMenuOpen;
     });
 
     const closeMenu = $(() => {
-      props.store.headerMenuOpen = false;
+      globalStore.headerMenuOpen = false;
     });
 
     return (

packages/docs/src/components/on-this-page/on-this-page.tsx

@@ -7,11 +7,9 @@ import { TwitterLogo } from '../svgs/twitter-logo';
 import styles from './on-this-page.css?inline';
 
 export const OnThisPage = component$(
-  async () => {
+  () => {
     useScopedStyles$(styles);
-
-    const hostElm = useHostElement();
-    const page = (await usePage(hostElm))!;
+    const page = usePage();
 
     const headings = page.headings.filter((h) => h.level === 2 || h.level === 3);
 

packages/docs/src/components/page/page.tsx

@@ -1,44 +1,39 @@
-import { component$, useHostElement } from '@builder.io/qwik';
+import { component$, useDocument } from '@builder.io/qwik';
 import { Builder } from '../../layouts/builder/builder';
-import { setHeadLinks, setHeadMeta, useLocation, usePage } from '@builder.io/qwik-city';
-import type { SiteStore } from '../app/app';
+import { setHeadLinks, setHeadMeta, getLocation, usePage } from '@builder.io/qwik-city';
 import Playground from '../../layouts/playground/playground';
 import Examples from '../../layouts/examples/examples';
 
-interface PageProps {
-  store: SiteStore;
-}
+export const Page = component$(() => {
+  const doc = useDocument();
 
-export const Page = component$(async (props: PageProps) => {
-  const hostElm = useHostElement();
-
-  const loc = useLocation(hostElm);
+  const loc = getLocation(doc);
   if (loc.pathname === '/playground') {
-    return <Playground store={props.store} />;
+    return <Playground />;
   }
   if (loc.pathname === '/examples') {
-    return <Examples store={props.store} />;
+    return <Examples />;
   }
 
-  const page = await usePage(hostElm);
+  const page = usePage();
   if (page) {
     const attrs = page.attributes;
     const Layout = page.layout;
     const Content = page.content;
 
-    setHeadMeta(hostElm, {
+    setHeadMeta(doc, {
       title: attrs.title + ' - Qwik',
       description: attrs.description,
     });
 
-    setHeadLinks(hostElm, [{ rel: 'canonical', href: page.url.href }]);
+    setHeadLinks(doc, [{ rel: 'canonical', href: page.url.href }]);
 
     return (
-      <Layout store={props.store}>
-        <Content store={props.store} />
+      <Layout>
+        <Content />
       </Layout>
     );
   }
 
-  return <Builder store={props.store} />;
+  return <Builder />;
 });

packages/docs/src/components/sidebar/sidebar.tsx

@@ -1,26 +1,21 @@
-import { component$, Host, useHostElement, useScopedStyles$ } from '@builder.io/qwik';
+import { component$, Host, useContext, useScopedStyles$ } from '@builder.io/qwik';
 import { usePage, usePageIndex } from '@builder.io/qwik-city';
-import type { SiteStore } from '../app/app';
+import { GlobalStore } from '../../utils/context';
 import { CloseIcon } from '../svgs/close-icon';
 import styles from './sidebar.css?inline';
 
-interface SideBarProps {
-  store: SiteStore;
-}
-
 export const SideBar = component$(
-  async (props: SideBarProps) => {
+  () => {
     useScopedStyles$(styles);
-
-    const hostElm = useHostElement();
-    const page = (await usePage(hostElm))!;
-    const navIndex = usePageIndex(hostElm);
+    const page = usePage();
+    const navIndex = usePageIndex();
+    const globalStore = useContext(GlobalStore);
 
     return (
       <Host class="sidebar">
         <nav class="breadcrumbs">
           <button
-            onClick$={() => (props.store.sideMenuOpen = !props.store.sideMenuOpen)}
+            onClick$={() => (globalStore.sideMenuOpen = !globalStore.sideMenuOpen)}
             type="button"
           >
             <span class="sr-only">Navigation</span>
@@ -43,7 +38,7 @@ export const SideBar = component$(
         <nav class="menu">
           <button
             class="menu-close lg:hidden"
-            onClick$={() => (props.store.sideMenuOpen = !props.store.sideMenuOpen)}
+            onClick$={() => (globalStore.sideMenuOpen = !globalStore.sideMenuOpen)}
             type="button"
           >
             <CloseIcon width={24} height={24} />

packages/docs/src/layouts/builder/builder.tsx

@@ -1,20 +1,15 @@
 import { component$, Host, useStyles$ } from '@builder.io/qwik';
 import { useLocation } from '../../utils/useLocation';
 import { Header } from '../../components/header/header';
-import type { SiteStore } from '../../components/app/app';
 import styles from './builder.css?inline';
 
-interface BuilderProps {
-  store: SiteStore;
-}
-
-export const Builder = component$(async (props: BuilderProps) => {
+export const Builder = component$(async () => {
   useStyles$(styles);
   const loc = useLocation();
   const html = await fetchQwikBuilderContent(loc.pathname);
   return (
     <Host>
-      <Header store={props.store} />
+      <Header />
       {html && <main class="builder" dangerouslySetInnerHTML={html} />}
     </Host>
   );

packages/docs/src/layouts/docs/docs.tsx

@@ -1,23 +1,18 @@
 import { component$, Host, Slot, useScopedStyles$ } from '@builder.io/qwik';
-import type { SiteStore } from '../../components/app/app';
 import { ContentNav } from '../../components/content-nav/content-nav';
 import { Footer } from '../../components/footer/footer';
 import { Header } from '../../components/header/header';
 import { OnThisPage } from '../../components/on-this-page/on-this-page';
 import { SideBar } from '../../components/sidebar/sidebar';
 import styles from './docs.css?inline';
 
-interface DocsLayoutProps {
-  store: SiteStore;
-}
-
-const DocsLayout = component$((props: DocsLayoutProps) => {
+const DocsLayout = component$(() => {
   useScopedStyles$(styles);
 
   return (
     <Host class="docs">
-      <Header store={props.store} />
-      <SideBar store={props.store} />
+      <Header />
+      <SideBar />
       <main>
         <article>
           <Slot />

packages/docs/src/layouts/examples/examples.tsx

@@ -1,24 +1,19 @@
 import {
-  $,
   component$,
   Host,
   useHostElement,
   useScopedStyles$,
   useWatch$,
   useStore,
 } from '@builder.io/qwik';
-import type { SiteStore } from '../../components/app/app';
+
 import { Repl } from '../../components/repl/repl';
 import styles from './examples.css?inline';
 import { Header } from '../../components/header/header';
 import { setHeadMeta, setHeadStyles } from '@builder.io/qwik-city';
 import exampleApps, { ExampleApp } from '@examples-data';
 
-interface ExamplesLayoutProps {
-  store: SiteStore;
-}
-
-const Examples = component$((props: ExamplesLayoutProps) => {
+const Examples = component$(() => {
   const hostElm = useHostElement();
 
   const store = useStore<ExamplesStore>(() => {
@@ -49,7 +44,7 @@ const Examples = component$((props: ExamplesLayoutProps) => {
 
   return (
     <Host class="examples">
-      <Header store={props.store} />
+      <Header />
 
       <div class="examples-menu-container">
         <div class="examples-menu">

packages/docs/src/layouts/playground/playground.tsx

@@ -9,19 +9,14 @@ import {
   useClientEffect$,
 } from '@builder.io/qwik';
 import type { TransformModuleInput } from '@builder.io/qwik/optimizer';
-import type { SiteStore } from '../../components/app/app';
 import { Repl } from '../../components/repl/repl';
 import styles from './playground.css?inline';
 import { Header } from '../../components/header/header';
 import { setHeadMeta, setHeadStyles } from '@builder.io/qwik-city';
 import playgroundApps from '@playground-data';
 import { useLocation } from '../../utils/useLocation';
 
-interface PlaygroundLayoutProps {
-  store: SiteStore;
-}
-
-const Playground = component$((props: PlaygroundLayoutProps) => {
+const Playground = component$(() => {
   const hostElm = useHostElement();
 
   const store = useStore<PlaygroundStore>(() => {
@@ -75,7 +70,7 @@ const Playground = component$((props: PlaygroundLayoutProps) => {
     <Host
       class={{ 'full-width': true, playground: true, 'repl-resize-active': store.colResizeActive }}
     >
-      <Header store={props.store} />
+      <Header />
 
       <Repl
         inputs={store.inputs}

packages/docs/src/layouts/tutorial/tutorial.tsx

@@ -7,7 +7,6 @@ import {
   useWatch$,
 } from '@builder.io/qwik';
 import { useLocation } from '../../utils/useLocation';
-import type { SiteStore } from '../../components/app/app';
 import { Repl } from '../../components/repl/repl';
 import styles from './tutorial.css?inline';
 import { TutorialContentFooter } from './tutorial-content-footer';
@@ -16,11 +15,7 @@ import tutorialSections, { TutorialApp } from '@tutorial-data';
 import { Header } from '../../components/header/header';
 import { setHeadStyles } from '@builder.io/qwik-city';
 
-interface TutorialLayoutProps {
-  store: SiteStore;
-}
-
-const Tutorial = component$((props: TutorialLayoutProps) => {
+const Tutorial = component$(() => {
   useScopedStyles$(styles);
 
   useWatch$(() => {
@@ -65,7 +60,7 @@ const Tutorial = component$((props: TutorialLayoutProps) => {
 
   return (
     <Host class="full-width tutorial">
-      <Header store={props.store} />
+      <Header />
       <main>
         <div class="tutorial-content-panel">
           <TutorialContentHeader current={current} />

packages/docs/src/utils/context.ts

@@ -0,0 +1,8 @@
+import { createContext } from '@builder.io/qwik';
+
+export interface SiteStore {
+  headerMenuOpen: boolean;
+  sideMenuOpen: boolean;
+}
+
+export const GlobalStore = createContext<SiteStore>('site-store');

packages/eslint-plugin-qwik/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-qwik",
-  "version": "0.0.20-4",
+  "version": "0.0.20-5",
   "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
   "main": "index.js",
   "author": "",

packages/qwik-city/package.json

@@ -15,6 +15,7 @@
     "@types/mdx": "2.0.2"
   },
   "devDependencies": {
+    "@builder.io/qwik": "workspace:*",
     "@microsoft/api-extractor": "7.24.0",
     "@types/github-slugger": "^1.3.0",
     "@types/marked": "^4.0.3",