npm - @qwik.dev/router - Versions diffs - 2.0.0-beta.6 → 2.0.0-beta.8 - Mend

@qwik.dev/router 2.0.0-beta.6 → 2.0.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/lib/index.d.ts +161 -48
package/lib/index.qwik.cjs +80 -15
package/lib/index.qwik.mjs +81 -16
package/lib/middleware/azure-swa/index.mjs +4 -3
package/lib/middleware/request-handler/index.d.ts +38 -43
package/lib/vite/index.cjs +558 -311
package/lib/vite/index.mjs +558 -311
package/package.json +15 -17

package/lib/index.d.ts CHANGED Viewed

@@ -12,6 +12,8 @@ import { QRLEventHandlerMulti } from '@qwik.dev/core';
 import { QwikIntrinsicElements } from '@qwik.dev/core';
 import { QwikJSX } from '@qwik.dev/core';
 import type { ReadonlySignal } from '@qwik.dev/core';
+import { Render } from '@qwik.dev/core/server';
+import { RenderOptions } from '@qwik.dev/core/server';
 import { RequestEvent } from '@qwik.dev/router/middleware/request-handler';
 import { RequestEventAction } from '@qwik.dev/router/middleware/request-handler';
 import { RequestEventBase } from '@qwik.dev/router/middleware/request-handler';
@@ -189,6 +191,38 @@ export { CookieOptions }
 export { CookieValue }
+/**
+ * Creates the `render()` function that is required by `createQwikRouter()`. It requires a function
+ * that returns the `jsx` and `options` for the renderer.
+ *
+ * @example
+ *
+ * ```tsx
+ * const renderer = createRenderer((opts) => {
+ *   if (opts.requestHeaders['x-hello'] === 'world') {
+ *     return { jsx: <Hello />, options: opts };
+ *   }
+ *   return { jsx: <Root />, options: {
+ *     ...opts,
+ *     serverData: {
+ *       ...opts.serverData,
+ *       documentHead: {
+ *         meta: [
+ *           { name: 'renderedAt', content: new Date().toISOString() },
+ *         ],
+ *       },
+ *     },
+ *   } };
+ * });
+ * ```
+ *
+ * @public
+ */
+export declare const createRenderer: (getOptions: (options: RendererOptions) => {
+    jsx: JSXOutput_2;
+    options: RendererOutputOptions;
+}) => Render;
 /** @public */
 export declare type DataValidator<T extends Record<string, any> = {}> = {
     validate(ev: RequestEvent, data: unknown): Promise<ValidatorReturn<T>>;
@@ -214,14 +248,35 @@ export declare interface DocumentHeadProps extends RouteLocation {
     readonly resolveValue: ResolveSyncValue;
 }
+/**
+ * This renders all the tags collected from `head`.
+ *
+ * You can partially override the head, for example if you want to change the title:
+ *
+ * ```tsx
+ * import { DocumentHeadTags, useDocumentHead } from '@qwik.dev/router';
+ *
+ * export default component$(() => {
+ *   const head = useDocumentHead();
+ *   return <DocumentHeadTags title={`${head.title} - My App`} />;
+ * });
+ * ```
+ *
+ * You don't have to use this component, you can also do it yourself for full control. Just copy the
+ * code from this component and modify it to your needs.
+ *
+ * Note that this component normally only runs once, during SSR. You can use Signals in your
+ * `src/root.tsx` to make runtime changes to `<head>` if needed.
+ *
+ * @public
+ */
+export declare const DocumentHeadTags: Component<DocumentHeadValue<Record<string, unknown>>>;
 /** @public */
 export declare interface DocumentHeadValue<FrontMatter extends Record<string, any> = Record<string, unknown>> {
     /** Sets `document.title`. */
     readonly title?: string;
-    /**
-     * Used to manually set meta tags in the head. Additionally, the `data` property could be used to
-     * set arbitrary data which the `<head>` component could later use to generate `<meta>` tags.
-     */
+    /** Used to manually set meta tags in the head. */
     readonly meta?: readonly DocumentMeta[];
     /** Used to manually append `<link>` elements to the `<head>`. */
     readonly links?: readonly DocumentLink[];
@@ -238,53 +293,59 @@ export declare interface DocumentHeadValue<FrontMatter extends Record<string, an
 }
 /** @public */
-export declare interface DocumentLink {
-    as?: string;
-    crossorigin?: string;
-    disabled?: boolean;
-    href?: string;
-    hreflang?: string;
-    id?: string;
-    imagesizes?: string;
-    imagesrcset?: string;
-    integrity?: string;
-    media?: string;
-    prefetch?: string;
-    referrerpolicy?: string;
-    rel?: string;
-    sizes?: string;
-    title?: string;
-    type?: string;
-    key?: string;
-}
+export declare type DocumentLink = QwikIntrinsicElements['link'];
 /** @public */
-export declare interface DocumentMeta {
-    readonly content?: string;
-    readonly httpEquiv?: string;
-    readonly name?: string;
-    readonly property?: string;
-    readonly key?: string;
-    readonly itemprop?: string;
-    readonly media?: string;
-}
-/** @beta */
-export declare interface DocumentScript {
-    readonly script?: string;
-    readonly props?: Readonly<QwikIntrinsicElements['script']>;
-    readonly key?: string;
-}
+export declare type DocumentMeta = QwikIntrinsicElements['meta'];
 /** @public */
-export declare interface DocumentStyle {
-    readonly style: string;
-    readonly props?: Readonly<QwikIntrinsicElements['style']>;
-    readonly key?: string;
-}
+export declare type DocumentScript = ((Omit<QwikIntrinsicElements['script'], 'dangerouslySetInnerHTML'> & {
+    props?: never;
+}) | {
+    key?: string;
+    /**
+     * The props of the script element. @deprecated Prefer setting the properties directly instead
+     * of using this property.
+     */
+    props: Readonly<QwikIntrinsicElements['script']>;
+}) & ({
+    /** The inline script content. */
+    script?: string;
+    dangerouslySetInnerHTML?: never;
+} | {
+    dangerouslySetInnerHTML?: string;
+    script?: never;
+});
+/** @public */
+export declare type DocumentStyle = Readonly<((Omit<QwikIntrinsicElements['style'], 'dangerouslySetInnerHTML'> & {
+    props?: never;
+}) | {
+    key?: string;
+    /**
+     * The props of the style element. @deprecated Prefer setting the properties directly
+     * instead of using this property.
+     */
+    props: Readonly<QwikIntrinsicElements['style']>;
+}) & ({
+    /** The inline style content. */
+    style?: string;
+    dangerouslySetInnerHTML?: never;
+} | {
+    dangerouslySetInnerHTML?: string;
+    style?: never;
+})>;
 declare type EndpointModuleLoader = () => Promise<RouteModule>;
+declare interface EndpointResponse {
+    status: number;
+    loaders: Record<string, unknown>;
+    loadersSerializationStrategy: Map<string, SerializationStrategy>;
+    formData?: FormData;
+    action?: string;
+}
 /** @public */
 export declare const ErrorBoundary: Component<ErrorBoundaryProps>;
@@ -427,6 +488,14 @@ export declare interface LinkProps extends AnchorAttributes {
     scroll?: boolean;
 }
+declare type LoadedRoute = [
+routeName: string,
+params: PathParams,
+mods: (RouteModule | ContentModule)[],
+menu: ContentMenu | undefined,
+routeBundleNames: string[] | undefined
+];
 /** @public */
 declare type Loader_2<RETURN> = {
     /**
@@ -510,6 +579,9 @@ declare type Prettify<T> = {} & {
  */
 export declare type PreventNavigateCallback = (url?: number | URL) => ValueOrPromise<boolean>;
+/** @public */
+export declare const Q_ROUTE = "q:route";
 /**
  * @deprecated Use `QWIK_ROUTER_SCROLLER` instead (will be removed in V3)
  * @public
@@ -526,7 +598,7 @@ export declare const QWIK_ROUTER_SCROLLER = "_qRouterScroller";
 export declare type QwikCityMockProps = QwikRouterMockProps;
 /**
- * @deprecated Use `QwikRouterMockProvider` instead. Will be removed in V3
+ * @deprecated Use `useQwikMockRouter()` instead. Will be removed in V3
  * @public
  */
 export declare const QwikCityMockProvider: Component<QwikRouterMockProps>;
@@ -538,13 +610,13 @@ export declare const QwikCityMockProvider: Component<QwikRouterMockProps>;
 export declare type QwikCityPlan = QwikRouterConfig;
 /**
- * @deprecated Use `QwikRouterProps` instead. will be removed in V3
+ * @deprecated Use `QwikRouterProps` instead. Will be removed in v3.
  * @public
  */
 export declare type QwikCityProps = QwikRouterProps;
 /**
- * @deprecated Use `QwikRouterProvider` instead. will be removed in V3
+ * @deprecated Use `useQwikRouter()` instead. Will be removed in v3.
  * @public
  */
 export declare const QwikCityProvider: Component<QwikRouterProps>;
@@ -559,6 +631,15 @@ export declare interface QwikRouterConfig {
     readonly cacheModules?: boolean;
 }
+/** @public */
+export declare interface QwikRouterEnvData {
+    routeName: string;
+    ev: RequestEvent;
+    params: PathParams;
+    response: EndpointResponse;
+    loadedRoute: LoadedRoute | null;
+}
 /** @public */
 export declare interface QwikRouterMockProps {
     url?: string;
@@ -583,7 +664,7 @@ export declare interface QwikRouterProps {
     viewTransition?: boolean;
 }
-/** @public */
+/** @public This is a wrapper around the `useQwikRouter()` hook. We recommend using the hook instead of this component. */
 export declare const QwikRouterProvider: Component<QwikRouterProps>;
 /** @public */
@@ -591,6 +672,18 @@ declare interface ReadonlySignal_2<T = unknown> {
     readonly value: T;
 }
+/** @public */
+export declare type RendererOptions = Omit<RenderOptions, 'serverData'> & {
+    serverData: ServerData;
+};
+/** @public */
+export declare type RendererOutputOptions = Omit<RenderOptions, 'serverData'> & {
+    serverData: ServerData & {
+        documentHead?: DocumentHeadValue;
+    } & Record<string, unknown>;
+};
 export { RequestEvent }
 export { RequestEventAction }
@@ -665,6 +758,18 @@ declare interface ServerConfig {
     fetchOptions?: any;
 }
+/** @public The server data that is provided by Qwik Router during SSR rendering. It can be retrieved with `useServerData(key)` in the server, but it is not available in the client. */
+export declare type ServerData = {
+    url: string;
+    requestHeaders: Record<string, string>;
+    locale: string | undefined;
+    nonce: string | undefined;
+    containerAttributes: Record<string, string> & {
+        [Q_ROUTE]: string;
+    };
+    qwikrouter: QwikRouterEnvData;
+};
 /** @public */
 export declare type ServerFunction = {
     (this: RequestEventBase, ...args: any[]): any;
@@ -788,6 +893,14 @@ export declare const usePreventNavigate$: (qrl: PreventNavigateCallback) => void
 /* Excluded from this release type: usePreventNavigateQrl */
+/**
+ * @public
+ * This hook initializes Qwik Router, providing the necessary context for it to work.
+ *
+ * This hook should be used once, at the root of your application.
+ */
+export declare const useQwikRouter: (props?: QwikRouterProps) => void;
 /** @beta */
 export declare const valibot$: ValibotConstructor;

package/lib/index.qwik.cjs CHANGED Viewed

@@ -7,6 +7,7 @@ const internal = require("@qwik.dev/core/internal");
 const qwikRouterConfig = require("@qwik-router-config");
 const zod = require("zod");
 const swRegister = require("@qwik-router-sw-register");
+const server = require("@qwik.dev/core/server");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -366,8 +367,8 @@ const Link = core.component$((props) => {
     children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
   });
 });
-const resolveHead = (endpoint, routeLocation, contentModules, locale) => {
-  const head = createDocumentHead();
+const resolveHead = (endpoint, routeLocation, contentModules, locale, defaults) => {
+  const head = createDocumentHead(defaults);
   const getData = (loaderOrAction) => {
     const id = loaderOrAction.__id;
     if (loaderOrAction.__brand === "server_loader") {
@@ -423,13 +424,23 @@ const mergeArray = (existingArr, newArr) => {
     }
   }
 };
-const createDocumentHead = () => ({
-  title: "",
-  meta: [],
-  links: [],
-  styles: [],
-  scripts: [],
-  frontmatter: {}
+const createDocumentHead = (defaults) => ({
+  title: defaults?.title || "",
+  meta: [
+    ...defaults?.meta || []
+  ],
+  links: [
+    ...defaults?.links || []
+  ],
+  styles: [
+    ...defaults?.styles || []
+  ],
+  scripts: [
+    ...defaults?.scripts || []
+  ],
+  frontmatter: {
+    ...defaults?.frontmatter
+  }
 });
 function matchRoute(route, path) {
   const routeIdx = startIdxSkipSlash(route);
@@ -841,7 +852,7 @@ const preventNav = {};
 const internalState = {
   navCount: 0
 };
-const QwikRouterProvider = core.component$((props) => {
+const useQwikRouter = (props) => {
   core.useStyles$(`
     @layer qwik {
       @supports selector(html:active-view-transition-type(type)) {
@@ -862,6 +873,7 @@ const QwikRouterProvider = core.component$((props) => {
   if (!urlEnv) {
     throw new Error(`Missing Qwik URL Env Data`);
   }
+  const serverHead = core.useServerData("documentHead");
   if (core.isServer) {
     if (env.ev.originalUrl.pathname !== env.ev.url.pathname && !__EXPERIMENTAL__.enableRequestRewrite) {
       throw new Error(`enableRequestRewrite is an experimental feature and is not enabled. Please enable the feature flag by adding \`experimental: ["enableRequestRewrite"]\` to your qwikVite plugin options.`);
@@ -901,7 +913,7 @@ const QwikRouterProvider = core.component$((props) => {
     replaceState: false,
     scroll: true
   });
-  const documentHead = core.useStore(createDocumentHead);
+  const documentHead = core.useStore(() => createDocumentHead(serverHead));
   const content = core.useStore({
     headings: void 0,
     menu: void 0
@@ -1106,7 +1118,7 @@ const QwikRouterProvider = core.component$((props) => {
           type: navType,
           dest: trackUrl
         };
-        const resolvedHead = resolveHead(clientPageData, routeLocation, contentModules, locale);
+        const resolvedHead = resolveHead(clientPageData, routeLocation, contentModules, locale, serverHead);
         content.headings = pageModule.headings;
         content.menu = menu;
         contentInternal.value = core.noSerialize(contentModules);
@@ -1254,7 +1266,7 @@ const QwikRouterProvider = core.component$((props) => {
             return internal._waitUntilRendered(elm);
           };
           const _waitNextPage = () => {
-            if (core.isServer || props.viewTransition === false) {
+            if (core.isServer || props?.viewTransition === false) {
               return navigate();
             } else {
               const viewTransition = startViewTransition({
@@ -1290,10 +1302,13 @@ const QwikRouterProvider = core.component$((props) => {
       run();
     }
   });
+};
+const QwikRouterProvider = core.component$((props) => {
+  useQwikRouter(props);
   return /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {});
 });
 const QwikCityProvider = QwikRouterProvider;
-const QwikRouterMockProvider = core.component$((props) => {
+const useQwikMockRouter = (props) => {
   const urlEnv = props.url ?? "http://localhost/";
   const url = new URL(urlEnv);
   const routeLocation = core.useStore({
@@ -1331,6 +1346,9 @@ const QwikRouterMockProvider = core.component$((props) => {
   core.useContextProvider(RouteStateContext, loaderState);
   core.useContextProvider(RouteActionContext, actionState);
   core.useContextProvider(RouteInternalContext, routeInternal);
+};
+const QwikRouterMockProvider = core.component$((props) => {
+  useQwikMockRouter(props);
   return /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {});
 });
 const QwikCityMockProvider = QwikRouterMockProvider;
@@ -1672,7 +1690,7 @@ const zodQrl = (qrl) => {
           }
         });
         const data = inputData ?? await ev.parseBody();
-        const result = await schema.safeParseAsync(data);
+        const result = await core.withLocale(ev.locale(), () => schema.safeParseAsync(data));
         if (result.success) {
           return result;
         } else {
@@ -1981,10 +1999,55 @@ function omitProps(obj, keys) {
   }
   return omittedObj;
 }
+const createRenderer = (getOptions) => {
+  return (opts) => {
+    const { jsx, options } = getOptions(opts);
+    return server.renderToStream(jsx, options);
+  };
+};
+const DocumentHeadTags = core.component$((props) => {
+  let head = useDocumentHead();
+  if (props) {
+    head = {
+      ...head,
+      ...props
+    };
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      head.title && /* @__PURE__ */ jsxRuntime.jsx("title", {
+        children: head.title
+      }),
+      head.meta.map((m) => /* @__PURE__ */ jsxRuntime.jsx("meta", {
+        ...m
+      })),
+      head.links.map((l) => /* @__PURE__ */ jsxRuntime.jsx("link", {
+        ...l
+      })),
+      head.styles.map((s) => {
+        const props2 = s.props || s;
+        return /* @__PURE__ */ core.createElement("style", {
+          ...props2,
+          dangerouslySetInnerHTML: s.style || props2.dangerouslySetInnerHTML,
+          key: s.key
+        });
+      }),
+      head.scripts.map((s) => {
+        const props2 = s.props || s;
+        return /* @__PURE__ */ core.createElement("script", {
+          ...props2,
+          dangerouslySetInnerHTML: s.script || props2.dangerouslySetInnerHTML,
+          key: s.key
+        });
+      })
+    ]
+  });
+});
 Object.defineProperty(exports, "z", {
   enumerable: true,
   get: () => zod.z
 });
+exports.DocumentHeadTags = DocumentHeadTags;
 exports.ErrorBoundary = ErrorBoundary;
 exports.Form = Form;
 exports.Link = Link;
@@ -1996,6 +2059,7 @@ exports.QwikRouterMockProvider = QwikRouterMockProvider;
 exports.QwikRouterProvider = QwikRouterProvider;
 exports.RouterOutlet = RouterOutlet;
 exports.ServiceWorkerRegister = ServiceWorkerRegister;
+exports.createRenderer = createRenderer;
 exports.globalAction$ = globalAction$;
 exports.globalActionQrl = globalActionQrl;
 exports.omitProps = omitProps;
@@ -2012,6 +2076,7 @@ exports.useLocation = useLocation;
 exports.useNavigate = useNavigate;
 exports.usePreventNavigate$ = usePreventNavigate$;
 exports.usePreventNavigateQrl = usePreventNavigateQrl;
+exports.useQwikRouter = useQwikRouter;
 exports.valibot$ = valibot$;
 exports.valibotQrl = valibotQrl;
 exports.validator$ = validator$;