@shopify/hydrogen 0.0.0-experimental-20220526194818

package/dist/esnext/components/ShopPayButton/index.js

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

package/dist/esnext/components/Video/Video.d.ts

@@ -0,0 +1,14 @@
+import { shopifyImageLoader } from '../../utilities';
+import type { Video as VideoType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+interface VideoProps {
+    /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */
+    data: PartialDeep<VideoType>;
+    /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */
+    previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];
+}
+/**
+ * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).
+ */
+export declare function Video(props: JSX.IntrinsicElements['video'] & VideoProps): JSX.Element;
+export {};

package/dist/esnext/components/Video/Video.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shopifyImageLoader } from '../../utilities';
+/**
+ * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).
+ */
+export function Video(props) {
+    var _a, _b;
+    const { data, previewImageOptions, id = data.id, playsInline = true, controls = true, ...passthroughProps } = props;
+    const posterUrl = shopifyImageLoader({
+        src: (_b = (_a = data.previewImage) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+        ...previewImageOptions,
+    });
+    if (!data.sources) {
+        throw new Error(`<Video/> requires a 'data.sources' array`);
+    }
+    return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    React.createElement("video", { ...passthroughProps, id: id, playsInline: playsInline, controls: controls, poster: posterUrl }, data.sources.map((source) => {
+        if (!((source === null || source === void 0 ? void 0 : source.url) && (source === null || source === void 0 ? void 0 : source.mimeType))) {
+            throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
+        }
+        return (React.createElement("source", { key: source.url, src: source.url, type: source.mimeType }));
+    })));
+}

package/dist/esnext/components/Video/index.d.ts

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

package/dist/esnext/components/Video/index.js

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

package/dist/esnext/components/index.d.ts

@@ -0,0 +1,28 @@
+export { Link } from './Link';
+export { MediaFile } from './MediaFile';
+export { Video } from './Video';
+export { Image } from './Image';
+export { ExternalVideo } from './ExternalVideo';
+export { AddToCartButton } from './AddToCartButton';
+export { ModelViewer } from './ModelViewer';
+export { Money } from './Money';
+export { Metafield } from './Metafield';
+export type { MetafieldType } from './Metafield';
+export { CartLineProvider, useCartLine } from './CartLineProvider';
+export { CartLineImage } from './CartLineImage';
+export { CartLinePrice } from './CartLinePrice';
+export { CartLineProductTitle } from './CartLineProductTitle';
+export { CartLineQuantity } from './CartLineQuantity';
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';
+export { CartLines } from './CartLines';
+export { CartCheckoutButton } from './CartCheckoutButton';
+export { CartShopPayButton } from './CartShopPayButton';
+export { CartEstimatedCost } from './CartEstimatedCost';
+export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
+export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
+export { ProductProvider, useProduct } from './ProductProvider';
+export { ProductPrice } from './ProductPrice';
+export { BuyNowButton } from './BuyNowButton';
+export { ShopPayButton } from './ShopPayButton';
+export { useCountry } from '../hooks/useCountry';
+export { Seo } from './Seo';

package/dist/esnext/components/index.js

@@ -0,0 +1,26 @@
+export { Link } from './Link';
+export { MediaFile } from './MediaFile';
+export { Video } from './Video';
+export { Image } from './Image';
+export { ExternalVideo } from './ExternalVideo';
+export { AddToCartButton } from './AddToCartButton';
+export { ModelViewer } from './ModelViewer';
+export { Money } from './Money';
+export { Metafield } from './Metafield';
+export { CartLineProvider, useCartLine } from './CartLineProvider';
+export { CartLineImage } from './CartLineImage';
+export { CartLinePrice } from './CartLinePrice';
+export { CartLineProductTitle } from './CartLineProductTitle';
+export { CartLineQuantity } from './CartLineQuantity';
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';
+export { CartLines } from './CartLines';
+export { CartCheckoutButton } from './CartCheckoutButton';
+export { CartShopPayButton } from './CartShopPayButton';
+export { CartEstimatedCost } from './CartEstimatedCost';
+export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
+export { ProductProvider, useProduct } from './ProductProvider';
+export { ProductPrice } from './ProductPrice';
+export { BuyNowButton } from './BuyNowButton';
+export { ShopPayButton } from './ShopPayButton';
+export { useCountry } from '../hooks/useCountry';
+export { Seo } from './Seo';

package/dist/esnext/components/types.d.ts

@@ -0,0 +1,71 @@
+import { ReactNode, ElementType, ComponentProps, ReactElement } from 'react';
+/**
+ * Inspired by HeadlessUI
+ * @see https://github.com/tailwindlabs/headlessui/blob/6a01c54b15bc0291af737dfc2a225dca88f3fa55/packages/\@headlessui-react/src/types.ts#L11-L13
+ */
+/**
+ * Used as a default value for TOmitableProps. Actual values will be element props
+ * we control e.g. `value` which we don't want developers to set on a component.
+ */
+declare const __: "__";
+declare type __ = typeof __;
+/**
+ * This helper type pulls the ComponentProps from a given `TTag` element. This is
+ * nice because it smartly pulls props from native HTML elements in addition to
+ * React components.
+ */
+declare type PropsOf<TTag = any> = TTag extends ElementType ? ComponentProps<TTag> : never;
+/**
+ * This is a "global" list of props we are always going to control, meaning
+ * we'll omit the original prop definition if it exists.
+ */
+declare type PropsWeControl = keyof OurProps;
+/**
+ * This is the "global" list of our props, similar to above. It is applied to
+ * every component using `Props`.
+ */
+declare type OurProps = {
+    children?: ReactNode;
+};
+declare type CleanProps<TTag, TOmitableProps extends keyof any = __> = TOmitableProps extends __ ? Omit<PropsOf<TTag>, PropsWeControl> : Omit<PropsOf<TTag>, TOmitableProps | PropsWeControl>;
+/**
+ * Props is a helper type which allows us to combine the base props of a given element `TTag`, combine "global" `OurProps`,
+ * and Omit props that we do not allow for the given component.
+ *
+ * ## How to use Props
+ *
+ * Think of it like a function!
+ * - The first arg, `TTag`, should extend `React.ElementType` and it might default to a native HTML element,
+ * like `input`.
+ * - The second arg, `TOmittableProps`, is optional. It is a string or union of strings that represent props
+ * that you do NOT allow in your component, because you overwrite them and control them yourself. One example
+ * of this is an `onClick` handler for e.g. a button.
+ *
+ * You can combine `Props` with your own type definition with & to define props for your component.
+ *
+ * Example:
+ *
+ * ```
+ * type MyProps = {
+ *   customThing: string
+ * }
+ *
+ * type PropsWeControl = 'onClick'
+ *
+ * export function MyButton<TTag extends React.ElementType = 'button'>(props: Props<TTag, PropsWeControl> & MyProps) {
+ *   const {customThing, children, ...passthroughProps} = props;
+ *
+ *   return <button {...passthroughProps} onClick={() => {}}>{children}</button>
+ * }
+ * ```
+ *
+ */
+export declare type Props<TTag, TOmitableProps extends keyof any = __> = CleanProps<TTag, TOmitableProps> & OurProps;
+/**
+ * While similar to `Props`, this props an additional second argument `TSlot` which represents the interface
+ * of the object passed to the callback via render props. Useful for headless components that expect render props.
+ */
+export declare type PropsWithSlot<TTag, TSlot = any, TOmitableProps extends keyof any = __> = CleanProps<TTag, TOmitableProps> & {
+    children?: ReactNode | ((props: TSlot) => ReactElement);
+};
+export {};

package/dist/esnext/components/types.js

@@ -0,0 +1,10 @@
+/**
+ * Inspired by HeadlessUI
+ * @see https://github.com/tailwindlabs/headlessui/blob/6a01c54b15bc0291af737dfc2a225dca88f3fa55/packages/\@headlessui-react/src/types.ts#L11-L13
+ */
+/**
+ * Used as a default value for TOmitableProps. Actual values will be element props
+ * we control e.g. `value` which we don't want developers to set on a component.
+ */
+const __ = '__';
+export {};

package/dist/esnext/config.d.ts

@@ -0,0 +1,3 @@
+import type { HydrogenConfig } from './types';
+export declare const defineConfig: (params: HydrogenConfig) => HydrogenConfig;
+export type { HydrogenConfig };

package/dist/esnext/config.js

@@ -0,0 +1 @@
+export const defineConfig = (params) => params;

package/dist/esnext/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const RSC_PATHNAME = "/__rsc";
+export declare const EVENT_PATHNAME = "/__event";
+export declare const EVENT_PATHNAME_REGEX: RegExp;
+export declare const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = "SHOPIFY_STOREFRONT_API_SECRET_TOKEN";
+export declare const STOREFRONT_API_SECRET_TOKEN_HEADER = "Shopify-Storefront-Private-Token";
+export declare const STOREFRONT_API_PUBLIC_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
+export declare const STOREFRONT_API_BUYER_IP_HEADER = "Shopify-Storefront-Buyer-IP";

package/dist/esnext/constants.js

@@ -0,0 +1,7 @@
+export const RSC_PATHNAME = '/__rsc';
+export const EVENT_PATHNAME = '/__event';
+export const EVENT_PATHNAME_REGEX = new RegExp(`^${EVENT_PATHNAME}/`);
+export const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = 'SHOPIFY_STOREFRONT_API_SECRET_TOKEN';
+export const STOREFRONT_API_SECRET_TOKEN_HEADER = 'Shopify-Storefront-Private-Token';
+export const STOREFRONT_API_PUBLIC_TOKEN_HEADER = 'X-Shopify-Storefront-Access-Token';
+export const STOREFRONT_API_BUYER_IP_HEADER = 'Shopify-Storefront-Buyer-IP';

package/dist/esnext/entry-client.d.ts

@@ -0,0 +1,3 @@
+import type { ClientHandler } from './types';
+declare const renderHydrogen: ClientHandler;
+export default renderHydrogen;

package/dist/esnext/entry-client.js

@@ -0,0 +1,73 @@
+/* eslint-disable hydrogen/no-state-in-server-components */
+import React, { Suspense, useState, StrictMode, Fragment, } from 'react';
+// @ts-expect-error hydrateRoot isn't on the TS types yet, but we're using React 18 so it exists
+import { hydrateRoot } from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useServerResponse } from './framework/Hydration/rsc';
+import { ServerPropsProvider } from './foundation/ServerPropsProvider';
+const DevTools = React.lazy(() => import('./components/DevTools.client'));
+const renderHydrogen = async (ClientWrapper, config) => {
+    const root = document.getElementById('root');
+    if (!root) {
+        console.error(`Could not find a root element <div id="root"></div> to render.`);
+        return;
+    }
+    if (import.meta.hot) {
+        import.meta.hot.on('hydrogen', ({ type, data }) => {
+            if (type === 'warn') {
+                console.warn(data);
+            }
+        });
+    }
+    // default to StrictMode on, unless explicitly turned off
+    const RootComponent = (config === null || config === void 0 ? void 0 : config.strictMode) !== false ? StrictMode : Fragment;
+    let hasCaughtError = false;
+    hydrateRoot(root, React.createElement(React.Fragment, null,
+        React.createElement(RootComponent, null,
+            React.createElement(ErrorBoundary, { FallbackComponent: Error },
+                React.createElement(Suspense, { fallback: null },
+                    React.createElement(Content, { clientWrapper: ClientWrapper })))),
+        typeof DevTools !== 'undefined' && (config === null || config === void 0 ? void 0 : config.showDevTools) ? (React.createElement(DevTools, null)) : null), {
+        onRecoverableError(e) {
+            if (__DEV__ && !hasCaughtError) {
+                hasCaughtError = true;
+                console.log(`React encountered an error while attempting to hydrate the application. ` +
+                    `This is likely due to a bug in React's Suspense behavior related to experimental server components, ` +
+                    `and it is safe to ignore this error.\n` +
+                    `Visit this issue to learn more: https://github.com/Shopify/hydrogen/issues/920.\n\n` +
+                    `The original error is printed below:`);
+                console.log(e);
+            }
+        },
+    });
+};
+export default renderHydrogen;
+function Content({ clientWrapper: ClientWrapper = ({ children }) => children, }) {
+    const [serverProps, setServerProps] = useState({
+        pathname: window.location.pathname,
+        search: window.location.search,
+    });
+    const response = useServerResponse(serverProps);
+    return (React.createElement(ServerPropsProvider, { initialServerProps: serverProps, setServerPropsForRsc: setServerProps },
+        React.createElement(ClientWrapper, null, response.readRoot())));
+}
+function Error({ error }) {
+    if (import.meta.env.DEV) {
+        return (React.createElement("div", { style: { padding: '1em' } },
+            React.createElement("h1", { style: { fontSize: '2em', marginBottom: '1em', fontWeight: 'bold' } }, "Error"),
+            React.createElement("pre", { style: { whiteSpace: 'pre-wrap' } }, error.stack)));
+    }
+    return (React.createElement("div", { style: {
+            padding: '2em',
+            textAlign: 'center',
+        } },
+        React.createElement("h1", { style: { fontSize: '2em', marginBottom: '1em', fontWeight: 'bold' } }, "Something's wrong here..."),
+        React.createElement("div", { style: { fontSize: '1.1em' } },
+            React.createElement("p", null, "We found an error while loading this page."),
+            React.createElement("p", null,
+                "Please, refresh or go back to the",
+                ' ',
+                React.createElement("a", { href: "/", style: { textDecoration: 'underline' } }, "home page"),
+                "."))));
+}
+/* eslint-enable hydrogen/no-state-in-server-components */

package/dist/esnext/entry-server.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="node" />
+import { Logger } from './utilities/log';
+import type { HydrogenConfig, ImportGlobEagerOutput } from './types';
+import { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
+import { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
+import type { ServerResponse, IncomingMessage } from 'http';
+import { RuntimeContext } from './framework/runtime';
+declare global {
+    var __WORKER__: boolean;
+}
+interface RequestHandlerOptions {
+    indexTemplate: string | ((url: string) => Promise<string | {
+        default: string;
+    }>);
+    cache?: Cache;
+    streamableResponse?: ServerResponse;
+    dev?: boolean;
+    context?: RuntimeContext;
+    nonce?: string;
+    buyerIpHeader?: string;
+}
+export interface RequestHandler {
+    (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
+}
+export declare const renderHydrogen: (App: any, hydrogenConfig?: HydrogenConfig | undefined) => RequestHandler;
+declare type SharedServerProps = {
+    state?: object | null;
+    request: ServerComponentRequest;
+    response: ServerComponentResponse;
+    log: Logger;
+};
+export declare type AppProps = SharedServerProps & {
+    routes?: ImportGlobEagerOutput;
+};
+export default renderHydrogen;