Merge branch 'build/v2' into no-cjs

Author: JerryWu1234

.changeset/afraid-wolves-heal.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: checking if object is serializable in dev mode

.changeset/heavy-clouds-walk.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': minor
+---
+
+feat: support promises in attributes

.changeset/large-turtles-write.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: don't emit script before qwik style element

.changeset/pre.json

@@ -17,6 +17,7 @@
   "changesets": [
     "afraid-bags-jam",
     "afraid-garlics-greet",
+    "afraid-wolves-heal",
     "all-cloths-hammer",
     "angry-boats-lose",
     "angry-grapes-itch",
@@ -59,6 +60,7 @@
     "friendly-gorillas-walk",
     "friendly-sloths-return",
     "funny-apricots-learn",
+    "funny-feet-wish",
     "fuzzy-files-kiss",
     "fuzzy-jobs-compare",
     "fuzzy-worlds-kneel",
@@ -78,6 +80,7 @@
     "itchy-comics-develop",
     "kind-toes-glow",
     "large-houses-watch",
+    "large-turtles-write",
     "lazy-tigers-dig",
     "lemon-dingos-dance",
     "lemon-tools-bathe",
@@ -91,6 +94,7 @@
     "mean-tires-cover",
     "mean-webs-try",
     "nervous-terms-explode",
+    "nice-teams-grow",
     "nine-otters-repeat",
     "ninety-crabs-lay",
     "ninety-pets-win",
@@ -102,6 +106,7 @@
     "open-beds-grab",
     "orange-otters-attend",
     "plain-eggs-clean",
+    "polite-parents-win",
     "polite-sloths-visit",
     "pretty-glasses-mate",
     "pretty-parents-draw",
@@ -126,6 +131,7 @@
     "sharp-apples-relate",
     "shiny-readers-double",
     "short-suits-bet",
+    "shy-carpets-switch",
     "shy-shirts-glow",
     "shy-walls-shake",
     "silly-pans-wear",

packages/create-qwik/CHANGELOG.md

@@ -1,5 +1,7 @@
 # create-qwik
 
+## 2.0.0-beta.13
+
 ## 2.0.0-beta.12
 
 ## 2.0.0-beta.11

packages/create-qwik/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-qwik",
   "description": "Interactive CLI for create Qwik projects and adding features.",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.13",
   "author": "Qwik Team",
   "bin": "./create-qwik.mjs",
   "bugs": "https://github.com/QwikDev/qwik/issues",

packages/docs/src/components/router-head/router-head.tsx

@@ -1,12 +1,14 @@
-import { component$ } from '@qwik.dev/core';
-import { useDocumentHead, useLocation } from '@qwik.dev/router';
+import { component$, untrack } from '@qwik.dev/core';
+import { DocumentHeadTags, useDocumentHead, useLocation } from '@qwik.dev/router';
 import { Social } from './social';
-import { InjectThemeScript } from '../theme-toggle';
 import { Vendor } from './vendor';
 
+/** The dynamic head content */
 export const RouterHead = component$(() => {
-  const { url } = useLocation();
   const head = useDocumentHead();
+  const { url } = useLocation();
+  const href = head.frontmatter?.canonical || untrack(() => url.href);
+
   const title = head.title
     ? `${head.title} 📚 Qwik Documentation`
     : `Qwik - Framework reimagined for the edge`;
@@ -47,45 +49,23 @@ export const RouterHead = component$(() => {
       }
     },
   };
-
   return (
     <>
-      <title>{title}</title>
       <meta name="description" content={description} />
-      <link rel="canonical" href={head.frontmatter?.canonical || url.href} />
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <meta name="apple-mobile-web-app-title" content="Qwik" />
-      <meta name="application-name" content="Qwik" />
-      <meta name="apple-mobile-web-app-title" content="Qwik" />
-      <meta name="theme-color" content="#006ce9" />
-      <meta name="color-scheme" content="dark light" />
-
-      <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
-      <link rel="icon" href="/favicons/favicon.svg" type="image/svg+xml" />
+      <link rel="canonical" href={href} />
 
       {import.meta.env.PROD && (
         <>
-          <Social title={title} description={description} href={url.href} ogImage={OGImage.URL} />
+          <Social title={title} description={description} href={href} ogImage={OGImage.URL} />
           <Vendor />
         </>
       )}
 
-      {head.meta
+      <DocumentHeadTags
+        title={title}
         // Skip description because that was already added at the top
-        .filter((s) => s.name !== 'description')
-        .map((m, key) => (
-          <meta key={key} {...m} />
-        ))}
-
-      {head.links.map((l, key) => (
-        <link key={key} {...l} />
-      ))}
-
-      {head.styles.map((s, key) => (
-        <style key={key} {...s.props} dangerouslySetInnerHTML={s.style} />
-      ))}
-
-      <InjectThemeScript />
+        meta={head.meta.filter((s) => s.name !== 'description')}
+      />
     </>
   );
 });

packages/docs/src/repl/ui/repl-commands.tsx

@@ -1,11 +1,7 @@
 import { createPlaygroundShareUrl } from './repl-share-url';
 import type { ReplAppInput } from '../types';
 
-export const ReplCommands = ({
-  input,
-  enableCopyToPlayground,
-  enableDownload,
-}: ReplCommandProps) => {
+export const ReplCommands = ({ input, enableCopyToPlayground }: ReplCommandProps) => {
   return (
     <div class="repl-commands">
       {enableCopyToPlayground ? (

packages/docs/src/root.tsx

@@ -1,18 +1,10 @@
 import { component$, useContextProvider, useStore } from '@qwik.dev/core';
 import { Insights } from '@qwik.dev/core/insights';
-import {
-  RouterOutlet,
-  ServiceWorkerRegister,
-  useDocumentHead,
-  useLocation,
-  useQwikRouter,
-} from '@qwik.dev/router';
-import RealMetricsOptimization from './components/real-metrics-optimization/real-metrics-optimization';
-import { Social } from './components/router-head/social';
-import { Vendor } from './components/router-head/vendor';
+import { RouterOutlet, useQwikRouter } from '@qwik.dev/router';
+import { RouterHead } from './components/router-head/router-head';
 import { InjectThemeScript } from './components/theme-toggle';
-import { BUILDER_PUBLIC_API_KEY } from './constants';
 import { GlobalStore, type SiteStore } from './context';
+
 import './global.css';
 
 export const uwu = /*javascript*/ `
@@ -50,8 +42,6 @@ export const uwu = /*javascript*/ `
 
 export default component$(() => {
   useQwikRouter();
-  const head = useDocumentHead();
-  const { url } = useLocation();
 
   const store = useStore<SiteStore>({
     headerMenuOpen: false,
@@ -62,55 +52,11 @@ export default component$(() => {
 
   useContextProvider(GlobalStore, store);
 
-  const title = head.title
-    ? `${head.title} 📚 Qwik Documentation`
-    : `Qwik - Framework reimagined for the edge`;
-  const description =
-    head.meta.find((m) => m.name === 'description')?.content ||
-    `No hydration, auto lazy-loading, edge-optimized, and fun 🎉!`;
-
-  const OGImage = {
-    imageURL: '',
-    ogImgTitle: '',
-    ogImgSubTitle: '' as string | undefined,
-
-    get URL() {
-      //turn the title into array with [0] -> Title [1] -> subTitle
-      const arrayedTitle = title.split(' | ');
-      const ogImageUrl = new URL('https://opengraphqwik.vercel.app/api/og?level=1');
-
-      // biggerTitle
-      this.ogImgTitle = arrayedTitle[0];
-      //smallerTitle
-      this.ogImgSubTitle = arrayedTitle[1]
-        ? arrayedTitle[1].replace(' 📚 Qwik Documentation', '')
-        : undefined;
-
-      //decide whether or not to show dynamic OGimage or use docs default social card
-      if (this.ogImgSubTitle == undefined || this.ogImgTitle == undefined) {
-        this.imageURL = new URL(`/logos/social-card.jpg`, url).href;
-
-        return this.imageURL;
-      } else {
-        ogImageUrl.searchParams.set('title', this.ogImgTitle);
-        ogImageUrl.searchParams.set('subtitle', this.ogImgSubTitle);
-        // ogImageUrl.searchParams.set('level', this.routeLevel.toString());
-
-        this.imageURL = ogImageUrl.toString();
-
-        return this.imageURL;
-      }
-    },
-  };
-
   return (
     <>
       <head>
         <meta charset="utf-8" />
 
-        <title>{title}</title>
-        <meta name="description" content={description} />
-        <link rel="canonical" href={head.frontmatter?.canonical || url.href} />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="apple-mobile-web-app-title" content="Qwik" />
         <meta name="application-name" content="Qwik" />
@@ -121,38 +67,11 @@ export default component$(() => {
         <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
         <link rel="icon" href="/favicons/favicon.svg" type="image/svg+xml" />
 
-        {import.meta.env.PROD && (
-          <>
-            <Social title={title} description={description} href={url.href} ogImage={OGImage.URL} />
-            <Vendor />
-          </>
-        )}
-
-        {/* The below are tags that were collected from all the `head` exports in the current route. */}
-        {head.meta
-          // Skip description because that was already added at the top
-          .filter((s) => s.name !== 'description')
-          .map((m, key) => (
-            <meta key={key} {...m} />
-          ))}
-
-        {head.links.map((l, key) => (
-          <link key={key} {...l} />
-        ))}
-
-        {head.styles.map((s, key) => (
-          <style key={key} {...s.props} dangerouslySetInnerHTML={s.style} />
-        ))}
-
-        {head.scripts.map((s, key) => (
-          <script key={key} {...s.props} dangerouslySetInnerHTML={s.script} />
-        ))}
+        <RouterHead />
 
         <InjectThemeScript />
         <script dangerouslySetInnerHTML={uwu} />
 
-        <ServiceWorkerRegister />
-
         <script dangerouslySetInnerHTML={`(${collectSymbols})()`} />
         <Insights />
       </head>
@@ -164,7 +83,6 @@ export default component$(() => {
       >
         {/* This renders the current route, including all Layout components. */}
         <RouterOutlet />
-        <RealMetricsOptimization builderApiKey={BUILDER_PUBLIC_API_KEY} />
       </body>
     </>
   );

packages/docs/src/routes/api/qwik-router/api.json

@@ -726,7 +726,7 @@
         }
       ],
       "kind": "Variable",
-      "content": "This is a wrapper around the `useQwikRouter()` hook. We recommend using the hook instead of this component.\n\n\n```typescript\nQwikRouterProvider: import(\"@qwik.dev/core\").Component<QwikRouterProps>\n```",
+      "content": "This is a wrapper around the `useQwikRouter()` hook. We recommend using the hook instead of this component, unless you have a good reason to make your root component reactive.\n\n\n```typescript\nQwikRouterProvider: import(\"@qwik.dev/core\").Component<QwikRouterProps>\n```",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx",
       "mdFile": "router.qwikrouterprovider.md"
     },