@shopify/hydrogen 0.6.3 → 0.8.0

package/dist/esnext/foundation/RenderCacheProvider/hook.js

@@ -0,0 +1,34 @@
+import { useContext } from 'react';
+import { RenderCacheContext } from './RenderCacheContext';
+import { hashKey } from '../../framework/cache';
+/**
+ * Returns the unique identifier for the current rendering request
+ */
+export function useRenderCache() {
+    const context = useContext(RenderCacheContext);
+    if (!context) {
+        throw new Error('No RenderCache Context found');
+    }
+    return context;
+}
+/**
+ * Returns data stored in the render cache
+ * It will throw the promise if data is not ready
+ */
+export function useRenderCacheData(key, fetcher) {
+    const cacheKey = hashKey(key);
+    const { cache } = useRenderCache();
+    if (!cache[cacheKey]) {
+        let data;
+        let promise;
+        cache[cacheKey] = () => {
+            if (data !== undefined)
+                return data;
+            if (!promise) {
+                promise = fetcher().then((r) => (data = { data: r }), (e) => (data = { data: e }));
+            }
+            throw promise;
+        };
+    }
+    return cache[cacheKey]();
+}

package/dist/esnext/foundation/RenderCacheProvider/index.d.ts

@@ -0,0 +1 @@
+export { RenderCacheProvider } from './RenderCacheProvider';

package/dist/esnext/foundation/RenderCacheProvider/index.js

@@ -0,0 +1 @@
+export { RenderCacheProvider } from './RenderCacheProvider';

package/dist/esnext/foundation/RenderCacheProvider/types.d.ts

@@ -0,0 +1,11 @@
+export declare type RenderCache = {
+    [key: string]: () => unknown;
+};
+export declare type RenderCacheProviderProps = {
+    /** A cache to hold all queries performed within a render request */
+    cache: RenderCache;
+    children?: React.ReactNode;
+};
+export interface RenderCacheResult<T> {
+    data: T;
+}

package/dist/esnext/foundation/RenderCacheProvider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/foundation/Router/ServerStateRouter.client.js

@@ -7,12 +7,14 @@ import { useServerState } from '../useServerState';
  * server state, which in turn fetches the correct server component.
  */
 export function ServerStateRouter() {
-    const { setServerState, pending } = useServerState();
+    const { setServerState, pending, serverState } = useServerState();
     const [isNavigating, setIsNavigating] = useState(false);
     const location = useLocation();
     useEffect(() => {
-        setIsNavigating(true);
-        setServerState('pathname', location.pathname);
+        if (serverState.pathname !== location.pathname) {
+            setIsNavigating(true);
+            setServerState('pathname', location.pathname);
+        }
     }, [location.pathname, setServerState]);
     useEffect(() => {
         /**

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.client.d.ts

@@ -1,17 +1,25 @@
 import React, { ReactNode } from 'react';
+declare global {
+    var __DEV__: boolean;
+}
+export interface ServerState {
+    pathname: string;
+    search: string;
+    [key: string]: any;
+}
+export interface ServerStateSetter {
+    (input: ((prev: ServerState) => Partial<ServerState>) | Partial<ServerState> | string, propValue?: any): void;
+}
 export interface ServerStateContextValue {
-    serverState: Record<string, any>;
-    setServerState(input: (() => void) | Record<string, any> | string, value?: string | Record<string, any>): void;
-    pending: any;
+    pending: boolean;
+    serverState: ServerState;
+    setServerState: ServerStateSetter;
 }
-export declare const ServerStateContext: React.Context<any>;
-interface Props {
-    serverState: Record<string, any>;
-    setServerState: React.Dispatch<React.SetStateAction<{
-        pathname: string;
-        search: string;
-    }>>;
+export declare const ServerStateContext: React.Context<ServerStateContextValue>;
+interface ServerStateProviderProps {
+    serverState: ServerState;
+    setServerState: React.Dispatch<React.SetStateAction<ServerState>>;
     children: ReactNode;
 }
-export declare function ServerStateProvider({ serverState, setServerState, children, }: Props): JSX.Element;
+export declare function ServerStateProvider({ serverState, setServerState, children, }: ServerStateProviderProps): JSX.Element;
 export {};

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.client.js

@@ -4,7 +4,7 @@ useTransition, } from 'react';
 export const ServerStateContext = createContext(null);
 export function ServerStateProvider({ serverState, setServerState, children, }) {
     const [pending, startTransition] = useTransition();
-    const setServerStateCallback = useCallback((input, value) => {
+    const setServerStateCallback = useCallback((input, propValue) => {
         /**
          * By wrapping this state change in a transition, React renders the new state
          * concurrently in a new "tree" instead of Suspending and showing the (blank)
@@ -13,26 +13,27 @@ export function ServerStateProvider({ serverState, setServerState, children, })
          * the `pending` flag also provided by the hook to display in the UI.
          */
         startTransition(() => {
-            // Support callback-style setState
-            if (typeof input === 'function') {
-                // @ts-ignore
-                return setServerState(input);
-            }
-            // Support a simple object, and spread it into the existing object.
-            if (typeof input === 'object') {
-                return setServerState((prev) => ({
+            return setServerState((prev) => {
+                let newValue;
+                if (typeof input === 'function') {
+                    newValue = input(prev);
+                }
+                else if (typeof input === 'string') {
+                    newValue = { [input]: propValue };
+                }
+                else {
+                    newValue = input;
+                }
+                if (__DEV__) {
+                    if ('request' in newValue || 'response' in newValue) {
+                        console.warn(`Custom "request" and "response" properties in server state are ignored. Use a different name.`);
+                    }
+                }
+                return {
                     ...prev,
-                    // @ts-ignore
-                    ...input,
-                }));
-            }
-            // Support a key, value as well.
-            if (typeof input === 'string') {
-                return setServerState((prev) => ({
-                    ...prev,
-                    [input]: value,
-                }));
-            }
+                    ...newValue,
+                };
+            });
         });
     }, [setServerState, startTransition]);
     const value = useMemo(() => ({

package/dist/esnext/foundation/ServerStateProvider/index.d.ts

@@ -1 +1,2 @@
-export { ServerStateProvider, ServerStateContext, ServerStateContextValue, } from './ServerStateProvider.client';
+export { ServerStateProvider, ServerStateContext, } from './ServerStateProvider.client';
+export type { ServerState, ServerStateContextValue, } from './ServerStateProvider.client';

package/dist/esnext/foundation/ShopifyProvider/ShopifyServerProvider.server.d.ts

@@ -1,8 +1,6 @@
 import { ReactElement } from 'react';
 import { ShopifyConfig } from '../../types';
-import { ReactQueryHydrationContext } from './types';
-export declare function ShopifyServerProvider({ children, shopifyConfig, hydrationContext, }: {
+export declare function ShopifyServerProvider({ children, shopifyConfig, }: {
     children: ReactElement;
     shopifyConfig: ShopifyConfig;
-    hydrationContext: ReactQueryHydrationContext;
 }): JSX.Element;

package/dist/esnext/foundation/ShopifyProvider/ShopifyServerProvider.server.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import { ShopifyProvider } from './ShopifyProvider';
-import { QueryProvider } from '../../hooks/useQuery';
-export function ShopifyServerProvider({ children, shopifyConfig, hydrationContext, }) {
-    return (React.createElement(ShopifyProvider, { shopifyConfig: shopifyConfig },
-        React.createElement(QueryProvider, { hydrationContext: hydrationContext }, children)));
+export function ShopifyServerProvider({ children, shopifyConfig, }) {
+    return (React.createElement(ShopifyProvider, { shopifyConfig: shopifyConfig }, children));
 }

package/dist/esnext/foundation/ShopifyProvider/types.d.ts

@@ -1,4 +1,3 @@
-import type { QueryClient } from 'react-query';
 import { ShopifyConfig } from '../../types';
 export declare type ShopifyProviderValue = ShopifyConfig;
 export declare type ShopifyProviderProps = {
@@ -8,7 +7,3 @@ export declare type ShopifyProviderProps = {
     children?: React.ReactNode;
     manager?: any;
 };
-export interface ReactQueryHydrationContext {
-    queryClient?: QueryClient;
-    dehydratedState?: any;
-}

package/dist/esnext/foundation/useQuery/hooks.d.ts

@@ -0,0 +1,17 @@
+import type { CacheOptions, QueryKey } from '../../types';
+import type { RenderCacheResult } from '../RenderCacheProvider/types';
+export interface HydrogenUseQueryOptions {
+    cache: CacheOptions;
+}
+/**
+ * The `useQuery` hook is a wrapper around Suspense calls and
+ * global runtime's Cache if it exist.
+ * It supports Suspense calls on the server and on the client.
+ */
+export declare function useQuery<T>(
+/** A string or array to uniquely identify the current query. */
+key: QueryKey, 
+/** An asynchronous query function like `fetch` which returns data. */
+queryFn: () => Promise<T>, 
+/** Options including `cache` to manage the cache behavior of the sub-request. */
+queryOptions?: HydrogenUseQueryOptions): RenderCacheResult<T>;

package/dist/esnext/{hooks → foundation}/useQuery/hooks.js

@@ -1,8 +1,10 @@
-import { useQuery as useReactQuery } from 'react-query';
 import { deleteItemFromCache, getItemFromCache, isStale, setItemInCache, } from '../../framework/cache';
 import { runDelayedFunction } from '../../framework/runtime';
+import { useRenderCacheData } from '../RenderCacheProvider/hook';
 /**
- * The `useQuery` hook is a wrapper around `useQuery` from `react-query`. It supports Suspense calls on the server and on the client.
+ * The `useQuery` hook is a wrapper around Suspense calls and
+ * global runtime's Cache if it exist.
+ * It supports Suspense calls on the server and on the client.
  */
 export function useQuery(
 /** A string or array to uniquely identify the current query. */
@@ -11,13 +13,19 @@ key,
 queryFn, 
 /** Options including `cache` to manage the cache behavior of the sub-request. */
 queryOptions) {
+    return useRenderCacheData(key, cachedQueryFnBuilder(key, queryFn, queryOptions));
+}
+function cachedQueryFnBuilder(key, queryFn, queryOptions) {
+    const resolvedQueryOptions = {
+        ...(queryOptions !== null && queryOptions !== void 0 ? queryOptions : {}),
+    };
     /**
      * Attempt to read the query from cache. If it doesn't exist or if it's stale, regenerate it.
      */
     async function cachedQueryFn() {
         const cacheResponse = await getItemFromCache(key);
         async function generateNewOutput() {
-            return await queryFn({});
+            return await queryFn();
         }
         if (cacheResponse) {
             const [output, response] = cacheResponse;
@@ -35,7 +43,7 @@ queryOptions) {
                     await setItemInCache(lockKey, true);
                     try {
                         const output = await generateNewOutput();
-                        await setItemInCache(key, output, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.cache);
+                        await setItemInCache(key, output, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache);
                     }
                     catch (e) {
                         console.error(`Error generating async response: ${e.message}`);
@@ -51,8 +59,8 @@ queryOptions) {
         /**
          * Important: Do this async
          */
-        runDelayedFunction(async () => await setItemInCache(key, newOutput, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.cache));
+        runDelayedFunction(async () => await setItemInCache(key, newOutput, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache));
         return newOutput;
     }
-    return useReactQuery(key, cachedQueryFn, queryOptions);
+    return cachedQueryFn;
 }

package/dist/esnext/foundation/useQuery/index.d.ts

@@ -0,0 +1 @@
+export { useQuery } from './hooks';

package/dist/esnext/foundation/useQuery/index.js

@@ -0,0 +1 @@
+export { useQuery } from './hooks';

package/dist/esnext/foundation/useServerState/use-server-state.d.ts

@@ -1,5 +1,5 @@
 /**
- * The `useServerState` hook allows you to [manage server state](/api/hydrogen/framework/server-state) when using Hydrogen as a React Server Component framework.
+ * The `useServerState` hook allows you to [manage server state](/custom-storefronts/hydrogen/framework/server-state) when using Hydrogen as a React Server Component framework.
  *
  * ## Return value
  *
@@ -12,4 +12,4 @@
  * | `pending`        | Whether a [transition is pending](https://github.com/reactwg/react-18/discussions/41). |
  *
  */
-export declare function useServerState(): any;
+export declare function useServerState(): import("../ServerStateProvider").ServerStateContextValue;

package/dist/esnext/foundation/useServerState/use-server-state.js

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { ServerStateContext } from '../ServerStateProvider';
 /**
- * The `useServerState` hook allows you to [manage server state](/api/hydrogen/framework/server-state) when using Hydrogen as a React Server Component framework.
+ * The `useServerState` hook allows you to [manage server state](/custom-storefronts/hydrogen/framework/server-state) when using Hydrogen as a React Server Component framework.
  *
  * ## Return value
  *

package/dist/esnext/framework/ClientMarker/ClientMarker.js

@@ -12,7 +12,6 @@ export function wrapInClientMarker(meta) {
     // Use object syntax here to make sure the function name
     // comes from the meta params for better error stacks.
     const wrappedComponent = {
-        // eslint-disable-next-line react/display-name
         [name]: (props) => React.createElement(ClientMarker, { ...{ props, meta } }),
     }[name];
     // Relay component properties such as `Image.Fragment`

package/dist/esnext/framework/Hydration/Cache.client.js

@@ -111,7 +111,9 @@ export async function convertHydrationResponseToReactComponents(response) {
 function createManifestFromWirePayload(payload) {
     return payload.split('\n').reduce((memo, row) => {
         const [key, ...values] = row.split(':');
-        memo[key] = JSON.parse(values.join(':'));
+        if (key) {
+            memo[key] = JSON.parse(values.join(':'));
+        }
         return memo;
     }, {});
 }

package/dist/esnext/framework/Hydration/ServerComponentResponse.server.d.ts

@@ -2,6 +2,10 @@ import { CacheOptions } from '../../types';
 export declare class ServerComponentResponse extends Response {
     private wait;
     private cacheOptions?;
+    customStatus?: {
+        code?: number;
+        text?: string;
+    };
     /**
      * Allow custom body to be a string or a Promise.
      */
@@ -14,6 +18,12 @@ export declare class ServerComponentResponse extends Response {
     canStream(): boolean;
     cache(options: CacheOptions): void;
     get cacheControlHeader(): string;
+    writeHead({ status, statusText, headers, }?: {
+        status?: number;
+        statusText?: string;
+        headers?: Record<string, any>;
+    }): void;
+    redirect(location: string, status?: number): void;
     /**
      * Send the response from a Server Component. Renders React components to string,
      * and returns `null` to make React happy.

package/dist/esnext/framework/Hydration/ServerComponentResponse.server.js

@@ -30,6 +30,19 @@ export class ServerComponentResponse extends Response {
         };
         return generateCacheControlHeader(options);
     }
+    writeHead({ status, statusText, headers, } = {}) {
+        if (status || statusText) {
+            this.customStatus = { code: status, text: statusText };
+        }
+        if (headers) {
+            for (const [key, value] of Object.entries(headers)) {
+                this.headers.set(key, value);
+            }
+        }
+    }
+    redirect(location, status = 307) {
+        this.writeHead({ status, headers: { location } });
+    }
     /**
      * Send the response from a Server Component. Renders React components to string,
      * and returns `null` to make React happy.

package/dist/esnext/framework/Hydration/wire.server.js

@@ -68,7 +68,7 @@ export function generateWireSyntaxFromRenderedHtml(html) {
         .map((component, idx) => {
         return `M${idx + 1}:${JSON.stringify(component)}`;
     })
-        .join('\n') + `\nJ0:${JSON.stringify(wireModel)}`);
+        .join('\n') + `\nJ0:${JSON.stringify(wireModel)}`).trim();
 }
 function isDomNode(item) {
     return item !== null && typeof item === 'object' && '_owner' in item;

package/dist/esnext/framework/Hydration/writer.server.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 /**
  * HydrationWriter is an implementation of `WritableStream` which
  * keeps track of chunks emitted from React's `pipeToNodeWritable`.

package/dist/esnext/framework/cache.d.ts

@@ -1,5 +1,4 @@
-import type { QueryKey } from 'react-query';
-import type { CacheOptions } from '../types';
+import type { CacheOptions, QueryKey } from '../types';
 export declare function generateCacheControlHeader(options: CacheOptions): string;
 /**
  * Use a preview header during development.
@@ -9,6 +8,7 @@ export declare function generateCacheControlHeader(options: CacheOptions): strin
 export declare function getCacheControlHeader({ dev }: {
     dev?: boolean;
 }): "cache-control-preview" | "cache-control";
+export declare function hashKey(key: QueryKey): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple
  * containing the `JSON.parse` version of the response as well

package/dist/esnext/framework/cache.js

@@ -21,7 +21,7 @@ export function generateCacheControlHeader(options) {
 export function getCacheControlHeader({ dev }) {
     return dev ? 'cache-control-preview' : 'cache-control';
 }
-function hashKey(key) {
+export function hashKey(key) {
     const rawKey = key instanceof Array ? key : [key];
     /**
      * TODO: Smarter hash

package/dist/esnext/framework/middleware.d.ts

@@ -10,9 +10,13 @@ declare type HydrogenMiddlewareArgs = {
     devServer?: ViteDevServer;
     cache?: Cache;
 };
+export declare function graphiqlMiddleware({ shopifyConfig, dev, }: {
+    shopifyConfig: ShopifyConfig;
+    dev: boolean;
+}): (request: IncomingMessage, response: http.ServerResponse, next: NextFunction) => Promise<void>;
 /**
  * Provides middleware to Node.js Express-like servers. Used by the Hydrogen
  * Vite dev server plugin as well as production Node.js implementation.
  */
-export default function hydrogenMiddleware({ dev, shopifyConfig, cache, indexTemplate, getServerEntrypoint, devServer, }: HydrogenMiddlewareArgs): (request: IncomingMessage, response: http.ServerResponse, next: NextFunction) => Promise<void>;
+export declare function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, devServer, }: HydrogenMiddlewareArgs): (request: IncomingMessage, response: http.ServerResponse, next: NextFunction) => Promise<void>;
 export {};

package/dist/esnext/framework/middleware.js

@@ -1,15 +1,20 @@
 import { graphiqlHtml } from './graphiql';
 import handleEvent from '../handle-event';
-/**
- * Provides middleware to Node.js Express-like servers. Used by the Hydrogen
- * Vite dev server plugin as well as production Node.js implementation.
- */
-export default function hydrogenMiddleware({ dev, shopifyConfig, cache, indexTemplate, getServerEntrypoint, devServer, }) {
+export function graphiqlMiddleware({ shopifyConfig, dev, }) {
     return async function (request, response, next) {
         const graphiqlRequest = dev && isGraphiqlRequest(request);
         if (graphiqlRequest) {
             return respondWithGraphiql(response, shopifyConfig);
         }
+        next();
+    };
+}
+/**
+ * Provides middleware to Node.js Express-like servers. Used by the Hydrogen
+ * Vite dev server plugin as well as production Node.js implementation.
+ */
+export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, devServer, }) {
+    return async function (request, response, next) {
         const url = new URL('http://' + request.headers.host + request.originalUrl);
         const isReactHydrationRequest = url.pathname === '/react';
         /**
@@ -96,9 +101,8 @@ export default function hydrogenMiddleware({ dev, shopifyConfig, cache, indexTem
 }
 function shouldInterceptRequest(request, isReactHydrationRequest) {
     var _a;
-    return ((/text\/html|application\/hydrogen/.test((_a = request.headers['accept']) !== null && _a !== void 0 ? _a : '') ||
-        isReactHydrationRequest) &&
-        request.url !== '/favicon.ico');
+    return (/text\/html|application\/hydrogen/.test((_a = request.headers['accept']) !== null && _a !== void 0 ? _a : '') ||
+        isReactHydrationRequest);
 }
 /**
  * /graphiql and /___graphql are supported

package/dist/esnext/framework/plugins/resolver.d.ts

@@ -0,0 +1 @@
+export declare function resolve(path: string): string;

package/dist/esnext/framework/plugins/resolver.js

@@ -0,0 +1,3 @@
+export function resolve(path) {
+    return require.resolve(path);
+}

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-config.js

@@ -1,7 +1,7 @@
 export default () => {
     return {
         name: 'vite-plugin-hydrogen-config',
-        config: () => ({
+        config: (_, env) => ({
             resolve: {
                 alias: {
                     /**
@@ -16,6 +16,17 @@ export default () => {
             },
             build: {
                 sourcemap: true,
+                /**
+                 * By default, SSR dedupe logic gets bundled which runs `require('module')`.
+                 * We don't want this in our workers runtime, because `require` is not supported.
+                 */
+                rollupOptions: process.env.WORKER
+                    ? {
+                        output: {
+                            format: 'es',
+                        },
+                    }
+                    : {},
             },
             ssr: {
                 external: ['isomorphic-dompurify'],
@@ -52,6 +63,9 @@ export default () => {
                     'react-router-dom',
                 ],
             },
+            define: {
+                __DEV__: env.mode !== 'production',
+            },
         }),
     };
 };

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-middleware.js

@@ -1,6 +1,6 @@
 import path from 'path';
 import { promises as fs } from 'fs';
-import hydrogenMiddleware from '../middleware';
+import { hydrogenMiddleware, graphiqlMiddleware } from '../middleware';
 import { InMemoryCache } from '../cache/in-memory';
 export default (shopifyConfig, pluginOptions) => {
     return {
@@ -17,7 +17,13 @@ export default (shopifyConfig, pluginOptions) => {
                 const indexHtml = await fs.readFile(resolve('index.html'), 'utf-8');
                 return await server.transformIndexHtml(url, indexHtml);
             }
-            server.middlewares.use(hydrogenMiddleware({
+            // The default vite middleware rewrites the URL `/graphqil` to `/index.html`
+            // By running this middleware first, we avoid that.
+            server.middlewares.use(graphiqlMiddleware({
+                shopifyConfig,
+                dev: true,
+            }));
+            return () => server.middlewares.use(hydrogenMiddleware({
                 dev: true,
                 shopifyConfig,
                 indexTemplate: getIndexTemplate,

package/dist/esnext/framework/plugins/vite-plugin-react-server-components-shim.js

@@ -1,5 +1,7 @@
+import { normalizePath } from 'vite';
 import path from 'path';
 import { proxyClientComponent } from '../server-components';
+import { resolve } from './resolver';
 export default () => {
     let config;
     return {
@@ -32,7 +34,7 @@ export default () => {
                     'When using Hydrogen components within Client Components, use the `@shopify/hydrogen/client` entrypoint instead.');
             }
         },
-        load(id, options) {
+        async load(id, options) {
             if (!isSSR(options))
                 return null;
             // Wrapped components won't match this becase they end in ?no-proxy
@@ -54,35 +56,23 @@ export default () => {
              */
             if (id.includes('/Hydration/client-imports')) {
                 // eslint-disable-next-line node/no-missing-require
-                const hydrogenPath = path.dirname(require.resolve('@shopify/hydrogen'));
+                const hydrogenPath = path.dirname(resolve('@shopify/hydrogen'));
                 const importerPath = path.join(hydrogenPath, 'framework', 'Hydration');
-                const importerToRootPath = path.relative(importerPath, config.root);
+                const importerToRootPath = normalizePath(path.relative(importerPath, config.root));
                 const [importerToRootNested] = importerToRootPath.match(/(\.\.\/)+(\.\.)?/) || [];
                 const userPrefix = path.normalize(path.join(importerPath, importerToRootNested.replace(/\/?$/, path.sep)));
                 const userGlob = path.join(importerToRootPath, 'src', '**/*.client.[jt]sx');
                 const libPrefix = hydrogenPath + path.sep;
                 const libGlob = path.join(path.relative(importerPath, hydrogenPath), 'components', '**/*.client.js');
                 return code
-                    .replace('__USER_COMPONENTS_PREFIX__', userPrefix)
-                    .replace('__USER_COMPONENTS_GLOB__', userGlob)
-                    .replace('__LIB_COMPONENTS_PREFIX__', libPrefix)
-                    .replace('__LIB_COMPONENTS_GLOB__', libGlob);
+                    .replace('__USER_COMPONENTS_PREFIX__', normalizePath(userPrefix))
+                    .replace('__USER_COMPONENTS_GLOB__', normalizePath(userGlob))
+                    .replace('__LIB_COMPONENTS_PREFIX__', normalizePath(libPrefix))
+                    .replace('__LIB_COMPONENTS_GLOB__', normalizePath(libGlob));
             }
         },
     };
-    // Mitigation for upcoming minor Vite update
-    // https://github.com/vitejs/vite/pull/5253
-    // TO-DO: When the vite package is updated with the above Vite PR,
-    // clean up this function and treat `options` param as objects
-    // from this point forward
-    // Timeline: Targetting for Vite 2.7
     function isSSR(options) {
-        if (typeof options === 'boolean') {
-            return options;
-        }
-        if (typeof options === 'object') {
-            return !!options.ssr;
-        }
-        return false;
+        return !!(options === null || options === void 0 ? void 0 : options.ssr);
     }
 };