@shopify/hydrogen 0.0.0-experimental-20220526194818

package/dist/esnext/foundation/FileSessionStorage/FileSessionStorage.js

@@ -0,0 +1,149 @@
+import { Cookie } from '../Cookie/Cookie';
+import { v4 as uid } from 'uuid';
+import path from 'path';
+import { promises as fsp } from 'fs';
+import { parseJSON } from '../../utilities/parse';
+async function wait() {
+    return new Promise((resolve) => setTimeout(resolve));
+}
+let writingLock = false;
+/**
+ * Concurrent requests with the same session can write interfere
+ * writing at the same file, which crashes the process. This locks
+ * so that only one file can be written at a time.
+ *
+ * A better solution would be to have a lock only for the same session.
+ */
+async function startFileLock(promise) {
+    if (!writingLock) {
+        writingLock = true;
+        await promise();
+        writingLock = false;
+    }
+    else {
+        await wait();
+        await startFileLock(promise);
+    }
+}
+/** The `FileSessionStorage` component persists session data to the file system.
+ */
+export const FileSessionStorage = function (
+/** The name of the cookie stored in the browser. */
+name, 
+/** A directory to store the session files in. Each session is stored in a separate file on the file system. */
+dir, 
+/** An optional object to configure [how the cookie is persisted in the browser](https://shopify.dev/api/hydrogen/components/framework/cookie#cookie-options). */
+cookieOptions) {
+    return function (log) {
+        const cookie = new Cookie(name, cookieOptions);
+        let data;
+        return {
+            async get(request) {
+                if (data)
+                    return data;
+                const sid = cookie.getSessionId(request) || uid();
+                const file = getSessionFile(dir, sid);
+                const fileContents = await getFile(file, cookie.expires, log);
+                data = fileContents.data;
+                return data;
+            },
+            async set(request, value) {
+                const sid = cookie.getSessionId(request) || uid();
+                const file = getSessionFile(dir, sid);
+                await writeFile(file, value, cookie.expires);
+                data = value;
+                cookie.setSessionid(sid);
+                return cookie.serialize();
+            },
+            async destroy(request) {
+                const sid = cookie.getSessionId(request);
+                if (sid) {
+                    const file = getSessionFile(dir, sid);
+                    await deleteFile(file);
+                }
+                data = undefined;
+                // @todo - set expires for Date in past
+                return cookie.destroy();
+            },
+        };
+    };
+};
+async function getFile(file, expires, log) {
+    let content = null;
+    const defaultFileContent = {
+        data: {},
+        expires,
+    };
+    await startFileLock(async () => {
+        try {
+            const textContent = await fsp.readFile(file, { encoding: 'utf-8' });
+            try {
+                content = parseJSON(textContent);
+            }
+            catch (error) {
+                log.warn(`Cannot parse existing session file: ${file}`);
+                content = defaultFileContent;
+            }
+            if (content.expires < new Date().getTime() ||
+                content === defaultFileContent) {
+                await fsp.unlink(file);
+                await fsp.writeFile(file, JSON.stringify(defaultFileContent), {
+                    encoding: 'utf-8',
+                    flag: 'wx',
+                });
+                content = defaultFileContent;
+            }
+        }
+        catch (error) {
+            if (error.code !== 'ENOENT')
+                throw error;
+            await fsp.mkdir(path.dirname(file), { recursive: true });
+            await fsp.writeFile(file, JSON.stringify(defaultFileContent), {
+                encoding: 'utf-8',
+                flag: 'wx',
+            });
+        }
+    });
+    return content ? content : defaultFileContent;
+}
+async function writeFile(file, data, expires) {
+    const content = {
+        data,
+        expires,
+    };
+    await startFileLock(async () => {
+        try {
+            await fsp.mkdir(path.dirname(file), { recursive: true });
+        }
+        catch (error) {
+            // directory already exists
+            if (error.code !== 'EEXIST')
+                throw error;
+        }
+        try {
+            await fsp.unlink(file);
+        }
+        catch (error) {
+            if (error.code !== 'ENOENT')
+                throw error;
+        }
+        await fsp.writeFile(file, JSON.stringify(content), {
+            encoding: 'utf-8',
+            flag: 'wx',
+        });
+    });
+}
+async function deleteFile(file) {
+    try {
+        await startFileLock(async () => {
+            await fsp.unlink(file);
+        });
+    }
+    catch (error) {
+        if (error.code !== 'ENOENT')
+            throw error;
+    }
+}
+function getSessionFile(dir, sid) {
+    return path.join(dir, sid.slice(0, 3), sid.slice(3));
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { HelmetProps as HeadProps } from 'react-helmet-async';
+export declare function Head({ children, ...props }: HeadProps & {
+    children: React.ReactNode;
+}): JSX.Element;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Helmet, HelmetData as HeadData, } from 'react-helmet-async';
+import { useEnvContext } from '../ssr-interop';
+const clientHeadData = new HeadData({});
+export function Head({ children, ...props }) {
+    const headData = useEnvContext((req) => req.ctx.head, clientHeadData);
+    return (
+    // @ts-ignore
+    React.createElement(Helmet, { ...props, helmetData: headData }, children));
+}

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

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

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

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

package/dist/esnext/foundation/MemorySessionStorage/MemorySessionStorage.d.ts

@@ -0,0 +1,5 @@
+import type { SessionStorageAdapter } from '../session/session';
+import type { CookieOptions } from '../Cookie/Cookie';
+/** The `MemorySessionStorage` component stores session data within Hydrogen runtime memory.
+ */
+export declare const MemorySessionStorage: (name: string, options: CookieOptions) => () => SessionStorageAdapter;

package/dist/esnext/foundation/MemorySessionStorage/MemorySessionStorage.js

@@ -0,0 +1,53 @@
+import { Cookie } from '../Cookie/Cookie';
+import { v4 as uid } from 'uuid';
+/** The `MemorySessionStorage` component stores session data within Hydrogen runtime memory.
+ */
+export const MemorySessionStorage = function (
+/** The name of the cookie stored in the browser. */
+name, 
+/** An optional object to configure [how the cookie is persisted in the browser](https://shopify.dev/api/hydrogen/components/framework/cookie#cookie-options). */
+options) {
+    const sessions = new Map();
+    return function () {
+        const cookie = new Cookie(name, options);
+        return {
+            async get(request) {
+                const sid = cookie.getSessionId(request);
+                let sessionData;
+                if (sid && sessions.has(sid)) {
+                    const { expires, data } = sessions.get(sid);
+                    if (expires < new Date().getTime()) {
+                        sessions.delete(sid);
+                        sessionData = {};
+                    }
+                    else {
+                        sessionData = data;
+                    }
+                }
+                else {
+                    sessionData = {};
+                }
+                return sessionData;
+            },
+            async set(request, value) {
+                let sid = cookie.getSessionId(request);
+                if (!sid) {
+                    sid = uid();
+                }
+                sessions.set(sid, {
+                    data: value,
+                    expires: cookie.expires,
+                });
+                cookie.setSessionid(sid);
+                return cookie.serialize();
+            },
+            async destroy(request) {
+                const sid = cookie.getSessionId(request);
+                if (sid) {
+                    sessions.delete(sid);
+                }
+                return cookie.destroy();
+            },
+        };
+    };
+};

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

@@ -0,0 +1,5 @@
+declare type RedirectProps = {
+    to: string;
+};
+export default function Redirect({ to }: RedirectProps): null;
+export {};

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

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useNavigate } from '../../foundation/useNavigate/useNavigate';
+export default function Redirect({ to }) {
+    const navigate = useNavigate();
+    useEffect(() => {
+        if (to.startsWith('http')) {
+            window.location.href = to;
+        }
+        else {
+            navigate(to);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return null;
+}

package/dist/esnext/foundation/Route/Route.server.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+export declare type RouteProps = {
+    /** The URL path where the route exists. The path can contain variables. For example, `/products/:handle`. */
+    path: string;
+    /** A reference to a React Server Component that's rendered when the route is active. */
+    page: ReactElement;
+};
+/**
+ * The `Route` component is used to set up a route in Hydrogen that's independent of the file system. Routes are
+ * matched in the order that they're defined.
+ */
+export declare function Route({ path, page }: RouteProps): ReactElement | null;

package/dist/esnext/foundation/Route/Route.server.js

@@ -0,0 +1,28 @@
+import React, { cloneElement } from 'react';
+import { useServerRequest } from '../ServerRequestProvider';
+import { matchPath } from '../../utilities/matchPath';
+import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
+/**
+ * The `Route` component is used to set up a route in Hydrogen that's independent of the file system. Routes are
+ * matched in the order that they're defined.
+ */
+export function Route({ path, page }) {
+    const request = useServerRequest();
+    const { routeRendered, serverProps } = request.ctx.router;
+    if (routeRendered)
+        return null;
+    if (path === '*') {
+        request.ctx.router.routeRendered = true;
+        return cloneElement(page, serverProps);
+    }
+    const match = matchPath(serverProps.pathname, {
+        path,
+        exact: true,
+    });
+    if (match) {
+        request.ctx.router.routeRendered = true;
+        request.ctx.router.routeParams = match.params;
+        return (React.createElement(RouteParamsProvider, { routeParams: match.params }, cloneElement(page, { params: match.params || {}, ...serverProps })));
+    }
+    return null;
+}

package/dist/esnext/foundation/Router/BrowserRouter.client.d.ts

@@ -0,0 +1,13 @@
+import { BrowserHistory, Location } from 'history';
+import React, { FC } from 'react';
+declare type RouterContextValue = {
+    history: BrowserHistory;
+    location: Location;
+};
+export declare const RouterContext: React.Context<{} | RouterContextValue>;
+export declare const BrowserRouter: FC<{
+    history?: BrowserHistory;
+}>;
+export declare function useRouter(): RouterContextValue;
+export declare function useLocation(): Location;
+export {};

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

@@ -0,0 +1,130 @@
+import { createBrowserHistory } from 'history';
+import React, { createContext, useContext, useMemo, useState, useEffect, useLayoutEffect, useCallback, } from 'react';
+import { META_ENV_SSR } from '../ssr-interop';
+import { useInternalServerProps } from '../useServerProps/use-server-props';
+export const RouterContext = createContext({});
+let isFirstLoad = true;
+const positions = {};
+export const BrowserRouter = ({ history: pHistory, children, }) => {
+    if (META_ENV_SSR)
+        return React.createElement(React.Fragment, null, children);
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const history = useMemo(() => pHistory || createBrowserHistory(), [pHistory]);
+    const [location, setLocation] = useState(history.location);
+    const [locationChanged, setLocationChanged] = useState(false);
+    const { pending, locationServerProps, setLocationServerProps } = useInternalServerProps();
+    useScrollRestoration({
+        location,
+        pending,
+        serverProps: locationServerProps,
+        locationChanged,
+        onFinishNavigating: () => setLocationChanged(false),
+    });
+    useLayoutEffect(() => {
+        const unlisten = history.listen(({ location: newLocation }) => {
+            positions[location.key] = window.scrollY;
+            setLocationServerProps({
+                pathname: newLocation.pathname,
+                search: newLocation.search,
+            });
+            setLocation(newLocation);
+            setLocationChanged(true);
+        });
+        return () => unlisten();
+    }, [
+        history,
+        location,
+        setLocationChanged,
+        setLocation,
+        setLocationServerProps,
+    ]);
+    /* eslint-enable react-hooks/rules-of-hooks */
+    return (React.createElement(RouterContext.Provider, { value: {
+            history,
+            location,
+        } }, children));
+};
+export function useRouter() {
+    const router = useContext(RouterContext);
+    if (!router && META_ENV_SSR) {
+        throw new Error('useRouter must be used within a <Router> component');
+    }
+    return router;
+}
+export function useLocation() {
+    return useRouter().location;
+}
+/**
+ * Run a callback before browser unload.
+ */
+function useBeforeUnload(callback) {
+    React.useEffect(() => {
+        window.addEventListener('beforeunload', callback);
+        return () => {
+            window.removeEventListener('beforeunload', callback);
+        };
+    }, [callback]);
+}
+function useScrollRestoration({ location, pending, serverProps, locationChanged, onFinishNavigating, }) {
+    /**
+     * Browsers have an API for scroll restoration. We wait for the page to load first,
+     * in case the browser is able to restore scroll position automatically, and then
+     * set it to manual mode.
+     */
+    useEffect(() => {
+        window.history.scrollRestoration = 'manual';
+    }, []);
+    /**
+     * If the page is reloading, allow the browser to handle its own scroll restoration.
+     */
+    useBeforeUnload(useCallback(() => {
+        window.history.scrollRestoration = 'auto';
+    }, []));
+    useLayoutEffect(() => {
+        // The app has just loaded
+        if (isFirstLoad || !locationChanged) {
+            isFirstLoad = false;
+            return;
+        }
+        const position = positions[location.key];
+        /**
+         * When serverState gets updated, `pending` is true while the fetch is in progress.
+         * When that resolves, the serverState is updated. We should wait until the internal
+         * location pointer and serverState match, and pending is false, to do any scrolling.
+         */
+        const finishedNavigating = !pending &&
+            location.pathname === serverProps.pathname &&
+            location.search === serverProps.search;
+        if (!finishedNavigating) {
+            return;
+        }
+        // If there is a location hash, scroll to it
+        if (location.hash) {
+            const element = document.querySelector(location.hash);
+            if (element) {
+                element.scrollIntoView();
+                onFinishNavigating();
+                return;
+            }
+        }
+        // If we have a matching position, scroll to it
+        if (position) {
+            window.scrollTo(0, position);
+            onFinishNavigating();
+            return;
+        }
+        // Scroll to the top of new pages
+        window.scrollTo(0, 0);
+        onFinishNavigating();
+    }, [
+        location.pathname,
+        location.search,
+        location.hash,
+        location.key,
+        pending,
+        serverProps.pathname,
+        serverProps.search,
+        locationChanged,
+        onFinishNavigating,
+    ]);
+}

package/dist/esnext/foundation/Router/Router.server.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+declare type RouterProps = {
+    /** Any React elements. */
+    children: Array<ReactElement> | ReactElement;
+};
+/**
+ * The `Router` component provides the context for routing in your Hydrogen app.
+ */
+export declare function Router({ children }: RouterProps): ReactElement;
+export {};

package/dist/esnext/foundation/Router/Router.server.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BrowserRouter } from './BrowserRouter.client';
+/**
+ * The `Router` component provides the context for routing in your Hydrogen app.
+ */
+export function Router({ children }) {
+    return React.createElement(BrowserRouter, null, children);
+}

package/dist/esnext/foundation/ServerPropsProvider/ServerPropsProvider.d.ts

@@ -0,0 +1,40 @@
+import React, { ReactNode } from 'react';
+declare global {
+    var __DEV__: boolean;
+}
+export interface LocationServerProps {
+    pathname: string;
+    search: string;
+}
+export interface ServerProps {
+    [key: string]: any;
+}
+declare type ServerPropsSetterInput = ((prev: ServerProps) => Partial<ServerProps>) | Partial<ServerProps> | string;
+export interface ServerPropsSetter {
+    (input: ServerPropsSetterInput, propValue?: any): void;
+}
+interface ProposedServerPropsSetter {
+    (input: ServerPropsSetterInput, propValue?: any): LocationServerProps;
+}
+interface BaseServerPropsContextValue {
+    pending: boolean;
+}
+export interface InternalServerPropsContextValue extends BaseServerPropsContextValue {
+    setLocationServerProps: ServerPropsSetter;
+    setServerProps: ServerPropsSetter;
+    serverProps: ServerProps;
+    locationServerProps: LocationServerProps;
+    getProposedLocationServerProps: ProposedServerPropsSetter;
+}
+export interface ServerPropsContextValue extends BaseServerPropsContextValue {
+    serverProps: ServerProps;
+    setServerProps: ServerPropsSetter;
+}
+export declare const ServerPropsContext: React.Context<InternalServerPropsContextValue>;
+interface ServerPropsProviderProps {
+    initialServerProps: LocationServerProps;
+    setServerPropsForRsc: React.Dispatch<React.SetStateAction<LocationServerProps>>;
+    children: ReactNode;
+}
+export declare function ServerPropsProvider({ initialServerProps, setServerPropsForRsc, children, }: ServerPropsProviderProps): JSX.Element;
+export {};

package/dist/esnext/foundation/ServerPropsProvider/ServerPropsProvider.js

@@ -0,0 +1,67 @@
+/* eslint-disable hydrogen/no-state-in-server-components */
+import React, { createContext, useMemo, useCallback, 
+// @ts-ignore
+useTransition, useState, } from 'react';
+const PRIVATE_PROPS = ['request', 'response'];
+export const ServerPropsContext = createContext(null);
+export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc, children, }) {
+    const [locationServerProps, setLocationServerProps] = useState(initialServerProps);
+    const [serverProps, setServerProps] = useState({});
+    const [pending, startTransition] = useTransition();
+    const setServerPropsCallback = useCallback((input, propValue) => {
+        startTransition(() => {
+            setServerProps((prev) => getNewValue(prev, input, propValue));
+            setServerPropsForRsc((prev) => getNewValue(prev, input, propValue));
+        });
+    }, [setServerProps, setServerPropsForRsc]);
+    const setLocationServerPropsCallback = useCallback((input, propValue) => {
+        // Flush the existing user server state when location changes, leaving only the persisted state
+        startTransition(() => {
+            setServerPropsForRsc((prev) => getNewValue(prev, input, propValue));
+            setServerProps({});
+            setLocationServerProps((prev) => getNewValue(prev, input, propValue));
+        });
+    }, [setServerProps, setServerPropsForRsc, setLocationServerProps]);
+    const getProposedLocationServerPropsCallback = useCallback((input, propValue) => {
+        return getNewValue(locationServerProps, input, propValue);
+    }, [locationServerProps]);
+    function getNewValue(prev, input, propValue) {
+        let newValue;
+        if (typeof input === 'function') {
+            newValue = input(prev);
+        }
+        else if (typeof input === 'string') {
+            newValue = { [input]: propValue };
+        }
+        else {
+            newValue = input;
+        }
+        if (__DEV__) {
+            const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
+            if (privateProp) {
+                console.warn(`Custom "${privateProp}" property in server state is ignored. Use a different name.`);
+            }
+        }
+        return {
+            ...prev,
+            ...newValue,
+        };
+    }
+    const value = useMemo(() => ({
+        pending,
+        locationServerProps,
+        serverProps,
+        setServerProps: setServerPropsCallback,
+        setLocationServerProps: setLocationServerPropsCallback,
+        getProposedLocationServerProps: getProposedLocationServerPropsCallback,
+    }), [
+        pending,
+        locationServerProps,
+        serverProps,
+        setServerPropsCallback,
+        setLocationServerPropsCallback,
+        getProposedLocationServerPropsCallback,
+    ]);
+    return (React.createElement(ServerPropsContext.Provider, { value: value }, children));
+}
+/* eslint-enable hydrogen/no-state-in-server-components */

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

@@ -0,0 +1,2 @@
+export { ServerPropsProvider, ServerPropsContext } from './ServerPropsProvider';
+export type { ServerProps, ServerPropsContextValue } from './ServerPropsProvider';

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

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

package/dist/esnext/foundation/ServerRequestProvider/ServerRequestProvider.d.ts

@@ -0,0 +1,23 @@
+import type { PreloadQueriesByURL, ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
+import type { QueryKey } from '../../types';
+declare type ServerRequestProviderProps = {
+    isRSC: boolean;
+    request: ServerComponentRequest;
+    children: JSX.Element;
+};
+export declare function ServerRequestProvider({ isRSC, request, children, }: ServerRequestProviderProps): JSX.Element;
+export declare function useServerRequest(): ServerComponentRequest;
+declare type RequestCacheResult<T> = {
+    data: T;
+    error?: never;
+} | {
+    data?: never;
+    error: Response | Error;
+};
+/**
+ * Returns data stored in the request cache.
+ * It will throw the promise if data is not ready.
+ */
+export declare function useRequestCacheData<T>(key: QueryKey, fetcher: () => T | Promise<T>): RequestCacheResult<T>;
+export declare function preloadRequestCacheData(request: ServerComponentRequest, preloadQueries?: PreloadQueriesByURL): void;
+export {};