@shopify/hydrogen 0.1.0

package/dist/esnext/index.d.ts

@@ -0,0 +1,9 @@
+export * from './foundation/';
+export * from './components/';
+export * from './hooks/';
+export * from './graphql/graphql-constants';
+export { flattenConnection } from './utilities';
+export { Helmet } from 'react-helmet-async';
+export * from './components/LocalizationProvider';
+export * from './components/CartProvider/CartServerProvider.server';
+export * from './hooks/useShopQuery';

package/dist/esnext/index.js

@@ -0,0 +1,11 @@
+export * from './foundation/';
+export * from './components/';
+export * from './hooks/';
+export * from './graphql/graphql-constants';
+export { flattenConnection } from './utilities';
+export { Helmet } from 'react-helmet-async';
+// This is exported here because it contains a Server Component
+export * from './components/LocalizationProvider';
+export * from './components/CartProvider/CartServerProvider.server';
+// Exported here because users shouldn't be making `useShopQuery` calls from the client
+export * from './hooks/useShopQuery';

package/dist/esnext/types.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="node" />
+import type { ServerResponse } from 'http';
+import type { ServerComponentResponse } from './foundation/Hydration/ServerComponentResponse.server';
+import type { ServerComponentRequest } from './foundation/Hydration/ServerComponentRequest.server';
+import type { Metafield } from './graphql/types/types';
+export declare type Renderer = (url: URL, options: {
+    request: ServerComponentRequest;
+    context?: Record<string, any>;
+    isReactHydrationRequest?: boolean;
+}) => Promise<{
+    body: string;
+    componentResponse: ServerComponentResponse;
+} & Record<string, any>>;
+export declare type Streamer = (url: URL, options: {
+    context: any;
+    request: ServerComponentRequest;
+    response: ServerResponse;
+    template: string;
+}) => void;
+export declare type Hydrator = (url: URL, options: {
+    context: any;
+    request: ServerComponentRequest;
+    response: ServerResponse;
+}) => void;
+export declare type EntryServerHandler = {
+    render: Renderer;
+    stream: Streamer;
+    hydrate: Hydrator;
+};
+export declare type ShopifyConfig = {
+    locale?: string;
+    storeDomain: string;
+    storefrontToken: string;
+    graphqlApiVersion?: string;
+};
+export declare type Hook = (params: {
+    url: URL;
+} & Record<string, any>) => any | Promise<any>;
+export declare type ServerHandler = (App: any, hook?: Hook) => {
+    render: Renderer;
+    stream: Streamer;
+    hydrate: Hydrator;
+};
+export declare type ClientHandler = (App: any, hook?: Hook) => Promise<void>;
+export interface GraphQLConnection<T> {
+    edges?: {
+        node: T;
+    }[];
+}
+export declare type RawMetafield = Partial<Metafield>;
+export declare type ParsedMetafield = Omit<Partial<Metafield>, 'value'> & {
+    value?: string | number | boolean | Record<any, string> | Date | Rating | Measurement;
+};
+export interface Rating {
+    value: number;
+    scale_min: number;
+    scale_max: number;
+}
+export interface Measurement {
+    unit: string;
+    value: number;
+}

package/dist/esnext/types.js

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

package/dist/esnext/utilities/connections.d.ts

@@ -0,0 +1,2 @@
+import { GraphQLConnection } from '../types';
+export declare function flattenConnection<T>(connection: GraphQLConnection<T>): T[];

package/dist/esnext/utilities/connections.js

@@ -0,0 +1,4 @@
+export function flattenConnection(connection) {
+    var _a;
+    return ((_a = connection.edges) !== null && _a !== void 0 ? _a : []).map((edge) => edge.node);
+}

package/dist/esnext/utilities/environment.d.ts

@@ -0,0 +1,2 @@
+export declare const isClient: () => boolean;
+export declare const isServer: () => boolean;

package/dist/esnext/utilities/environment.js

@@ -0,0 +1,2 @@
+export const isClient = () => typeof window !== 'undefined';
+export const isServer = () => !isClient();

package/dist/esnext/utilities/image_size.d.ts

@@ -0,0 +1,17 @@
+export declare type Width = string | 'original';
+export declare type Height = string | 'original';
+export declare type Crop = 'top' | 'bottom' | 'left' | 'right' | 'center';
+export declare type Scale = 2 | 3;
+export declare type Format = 'jpg' | 'pjpg';
+export interface ImageSizeOptions {
+    width?: Width;
+    height?: Height;
+    crop?: Crop;
+    scale?: Scale;
+    format?: Format;
+}
+/**
+ * Adds image size parameters to an image URL hosted by Shopify's CDN
+ */
+export declare function addImageSizeParametersToUrl(url: string, { width, height, crop, scale, format }: ImageSizeOptions): string;
+export declare function useImageUrl(url?: string, options?: ImageSizeOptions): string | undefined;

package/dist/esnext/utilities/image_size.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+// TODO: Are there other CDNs missing from here?
+const PRODUCTION_CDN_HOSTNAMES = [
+    'cdn.shopify.com',
+    'cdn.shopifycdn.net',
+    'shopify-assets.shopifycdn.com',
+    'shopify-assets.shopifycdn.net',
+];
+const LOCAL_CDN_HOSTNAMES = ['spin.dev'];
+/**
+ * Adds image size parameters to an image URL hosted by Shopify's CDN
+ */
+export function addImageSizeParametersToUrl(url, { width, height, crop, scale, format }) {
+    const newUrl = new URL(url);
+    const allowedCDNHostnames = PRODUCTION_CDN_HOSTNAMES.concat(LOCAL_CDN_HOSTNAMES);
+    if (!allowedCDNHostnames.some((allowedHostname) => newUrl.hostname.endsWith(allowedHostname))) {
+        throw new Error('addImageSizeParametersToUrl only operates on Shopify-served image assets');
+    }
+    const sizePath = width || height ? `_${width !== null && width !== void 0 ? width : ''}x${height !== null && height !== void 0 ? height : ''}` : '';
+    const cropPath = crop ? `_crop_${crop}` : '';
+    const scalePath = scale ? `@${scale}x` : '';
+    const progressive = format === 'pjpg' ? `.progressive` : '';
+    const asJPG = format === 'jpg' ? `.jpg` : '';
+    // We assume here that the last `.` is the delimiter
+    // between the file name and the file type
+    const fileDelimiterIndex = newUrl.pathname.lastIndexOf('.');
+    const fileName = newUrl.pathname.substr(0, fileDelimiterIndex);
+    const fileType = newUrl.pathname.substr(fileDelimiterIndex);
+    newUrl.pathname = `${fileName}${sizePath}${cropPath}${scalePath}${progressive}${fileType}${asJPG}`;
+    return newUrl.toString();
+}
+export function useImageUrl(url, options) {
+    return React.useMemo(() => {
+        if (url == null ||
+            options == null ||
+            (!options.width &&
+                !options.height &&
+                !options.crop &&
+                !options.scale &&
+                !options.format)) {
+            return url;
+        }
+        return addImageSizeParametersToUrl(url, options);
+    }, [options, url]);
+}

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

@@ -0,0 +1,8 @@
+export { addImageSizeParametersToUrl, ImageSizeOptions, useImageUrl, } from './image_size';
+export { YouTube, Vimeo, addParametersToEmbeddedVideoUrl, useEmbeddedVideoUrl, } from './video_parameters';
+export { loadScript } from './script_loader';
+export { wrapPromise } from './suspense';
+export { flattenConnection } from './connections';
+export { isClient, isServer } from './environment';
+export { getMeasurementAsParts, getMeasurementAsString } from './meaurement';
+export { parseMetafieldValue } from './metafields';

package/dist/esnext/utilities/index.js

@@ -0,0 +1,8 @@
+export { addImageSizeParametersToUrl, useImageUrl, } from './image_size';
+export { addParametersToEmbeddedVideoUrl, useEmbeddedVideoUrl, } from './video_parameters';
+export { loadScript } from './script_loader';
+export { wrapPromise } from './suspense';
+export { flattenConnection } from './connections';
+export { isClient, isServer } from './environment';
+export { getMeasurementAsParts, getMeasurementAsString } from './meaurement';
+export { parseMetafieldValue } from './metafields';

package/dist/esnext/utilities/meaurement.d.ts

@@ -0,0 +1,3 @@
+import { Measurement } from '../types';
+export declare function getMeasurementAsString(measurement: Measurement, locale?: string, options?: Intl.NumberFormatOptions): string;
+export declare function getMeasurementAsParts(measurement: Measurement, locale?: string, options?: Intl.NumberFormatOptions): Intl.NumberFormatPart[];

package/dist/esnext/utilities/meaurement.js

@@ -0,0 +1,98 @@
+const UNIT_MAPPING = {
+    // Dimension
+    mm: 'millimeter',
+    cm: 'centimeter',
+    m: 'meter',
+    in: 'inch',
+    ft: 'foot',
+    yd: 'yard',
+    // Volume
+    ml: 'milliliter',
+    l: 'liter',
+    us_fl_oz: 'fluid-ounce',
+    us_gal: 'gallon',
+    // Weight
+    kg: 'kilogram',
+    g: 'gram',
+    lb: 'pound',
+    oz: 'ounce',
+};
+export function getMeasurementAsString(measurement, locale = 'en-us', options = {}) {
+    let measure = {
+        value: measurement.value,
+        unit: UNIT_MAPPING[measurement.unit],
+    };
+    if (measure.unit == null) {
+        measure = convertToSupportedUnit(measurement.value, measurement.unit);
+    }
+    return new Intl.NumberFormat(locale, {
+        ...options,
+        unit: measure.unit,
+        style: 'unit',
+    }).format(measure.value);
+}
+export function getMeasurementAsParts(measurement, locale = 'en-us', options = {}) {
+    let measure = {
+        value: measurement.value,
+        unit: UNIT_MAPPING[measurement.unit],
+    };
+    if (measure.unit == null) {
+        measure = convertToSupportedUnit(measurement.value, measurement.unit);
+    }
+    return new Intl.NumberFormat(locale, {
+        ...options,
+        unit: measure.unit,
+        style: 'unit',
+    }).formatToParts(measure.value);
+}
+function convertToSupportedUnit(value, unit) {
+    switch (unit) {
+        case 'cl':
+            return {
+                value: value / 1000,
+                unit: 'liter',
+            };
+        case 'm3':
+            return {
+                value: value * 1000,
+                unit: 'liter',
+            };
+        case 'us_pt':
+            return {
+                value: value * 0.125,
+                unit: 'gallon',
+            };
+        case 'us_qt':
+            return {
+                value: value * 0.5,
+                unit: 'gallon',
+            };
+        case 'us_oz':
+            return {
+                value: value / 128,
+                unit: 'gallon',
+            };
+        case 'imp_pt':
+            return {
+                value: value / 6.661,
+                unit: 'gallon',
+            };
+        case 'imp_qt':
+            return {
+                value: value / 3.331,
+                unit: 'gallon',
+            };
+        case 'imp_gal':
+            return {
+                value: value / 1.201,
+                unit: 'gallon',
+            };
+        case 'imp_fl_oz':
+            return {
+                value: value * 0.96076,
+                unit: 'fluid-ounce',
+            };
+        default:
+            throw new Error(`Unit not supported: ${unit}`);
+    }
+}

package/dist/esnext/utilities/metafields.d.ts

@@ -0,0 +1,2 @@
+import { Metafield } from '../graphql/types/types';
+export declare function parseMetafieldValue(metafield: Partial<Metafield>): any;

package/dist/esnext/utilities/metafields.js

@@ -0,0 +1,32 @@
+export function parseMetafieldValue(metafield) {
+    if (metafield.value == null) {
+        return metafield.value;
+    }
+    switch (metafield.type) {
+        case 'boolean':
+            return metafield.value == 'true';
+        case 'number_integer':
+            return parseInt(metafield.value);
+        case 'number_decimal':
+            return parseFloat(metafield.value);
+        case 'date':
+        case 'date_time':
+            return new Date(metafield.value);
+        case 'json':
+        case 'weight':
+        case 'dimension':
+        case 'volume':
+        case 'rating':
+            return JSON.parse(metafield.value);
+        case 'color':
+        case 'single_line_text_field':
+        case 'multi_line_text_field':
+        case 'product_reference':
+        case 'page_reference':
+        case 'variant_reference':
+        case 'file_reference':
+        case 'url':
+        default:
+            return metafield.value;
+    }
+}

package/dist/esnext/utilities/script_loader.d.ts

@@ -0,0 +1,3 @@
+export declare function loadScript(src: string, options?: {
+    module?: boolean;
+}): Promise<boolean>;

package/dist/esnext/utilities/script_loader.js

@@ -0,0 +1,23 @@
+const SCRIPTS_LOADED = {};
+export function loadScript(src, options) {
+    const isScriptLoaded = SCRIPTS_LOADED[src];
+    if (isScriptLoaded) {
+        return isScriptLoaded;
+    }
+    const promise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        if (options === null || options === void 0 ? void 0 : options.module) {
+            script.type = 'module';
+        }
+        script.src = src;
+        script.onload = () => {
+            resolve(true);
+        };
+        script.onerror = () => {
+            reject(false);
+        };
+        document.body.appendChild(script);
+    });
+    SCRIPTS_LOADED[src] = promise;
+    return promise;
+}

package/dist/esnext/utilities/suspense.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Wrap the fetch promise in a way that React Suspense understands.
+ * Essentially, keep throwing something until you have legit data.
+ */
+export declare function wrapPromise(promise: Promise<any>): {
+    read: () => any;
+};

package/dist/esnext/utilities/suspense.js

@@ -0,0 +1,32 @@
+/**
+ * Wrap the fetch promise in a way that React Suspense understands.
+ * Essentially, keep throwing something until you have legit data.
+ */
+export function wrapPromise(promise) {
+    let status = 'pending';
+    let response;
+    const suspender = promise.then((res) => {
+        status = 'success';
+        response = res;
+    }, (err) => {
+        status = 'error';
+        response = err;
+        throw err;
+    });
+    const read = () => {
+        /**
+         * TODO: This logic doesn't hold up when an error is thrown. For some reason.
+         * We instead throw the exception above in the suspender. We should revisit
+         * this and add a better server fetch implementation.
+         */
+        switch (status) {
+            case 'pending':
+                throw suspender;
+            case 'error':
+                throw response;
+            default:
+                return response;
+        }
+    };
+    return { read };
+}

package/dist/esnext/utilities/video_parameters.d.ts

@@ -0,0 +1,47 @@
+export interface YouTube {
+    autoplay?: 0 | 1;
+    cc_lang_pref?: string;
+    cc_load_policy?: 1;
+    color?: 'red' | 'white';
+    controls?: 0 | 1;
+    disablekb?: 0 | 1;
+    enablejsapi?: 0 | 1;
+    end?: number;
+    fs?: 0 | 1;
+    hl?: string;
+    iv_load_policy?: 1 | 3;
+    list?: string;
+    list_type?: 'playlist' | 'user_uploads';
+    loop?: 0 | 1;
+    modest_branding?: 1;
+    origin?: string;
+    playlist?: string;
+    plays_inline?: 0 | 1;
+    rel?: 0 | 1;
+    start?: number;
+    widget_referrer?: string;
+}
+declare type VimeoBoolean = 0 | 1 | boolean;
+export interface Vimeo {
+    autopause?: VimeoBoolean;
+    autoplay?: VimeoBoolean;
+    background?: VimeoBoolean;
+    byline?: VimeoBoolean;
+    color?: string;
+    controls?: VimeoBoolean;
+    dnt?: VimeoBoolean;
+    loop?: VimeoBoolean;
+    muted?: VimeoBoolean;
+    pip?: VimeoBoolean;
+    playsinline?: VimeoBoolean;
+    portrait?: VimeoBoolean;
+    quality?: '240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k';
+    speed?: VimeoBoolean;
+    '#t'?: string;
+    texttrack?: string;
+    title?: VimeoBoolean;
+    transparent?: VimeoBoolean;
+}
+export declare function addParametersToEmbeddedVideoUrl(url: string, parameters?: YouTube | Vimeo): string;
+export declare function useEmbeddedVideoUrl(url: string, parameters?: YouTube | Vimeo): string;
+export {};

package/dist/esnext/utilities/video_parameters.js

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+export function addParametersToEmbeddedVideoUrl(url, parameters) {
+    if (parameters == null) {
+        return url;
+    }
+    const params = Object.keys(parameters).reduce((accumulator, param) => {
+        const value = parameters[param];
+        if (value == null) {
+            return accumulator;
+        }
+        return accumulator + `&${param}=${value}`;
+    }, '');
+    return `${url}?${params}`;
+}
+export function useEmbeddedVideoUrl(url, parameters) {
+    return useMemo(() => {
+        if (!parameters) {
+            return url;
+        }
+        return addParametersToEmbeddedVideoUrl(url, parameters);
+    }, [url, parameters]);
+}

package/dist/esnext/version.d.ts

@@ -0,0 +1 @@
+export declare const LIB_VERSION = "0.1.0";

package/dist/esnext/version.js

@@ -0,0 +1 @@
+export const LIB_VERSION = '0.1.0';

package/dist/node/foundation/ClientMarker/ClientMarker.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+interface Props {
+    name: string;
+    id: string;
+    props: any;
+    component: FunctionComponent;
+    named: boolean;
+}
+export declare function ClientMarker({ name, id, props: allProps, component: Component, named, }: Props): JSX.Element;
+export {};

package/dist/node/foundation/ClientMarker/ClientMarker.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientMarker = void 0;
+const react_1 = __importStar(require("react"));
+const HydrationContext_server_1 = require("../Hydration/HydrationContext.server");
+const react_utils_1 = require("../Hydration/react-utils");
+function ClientMarker({ name, id, props: allProps, component: Component, named, }) {
+    const isHydrating = react_1.useContext(HydrationContext_server_1.HydrationContext);
+    if (!isHydrating)
+        return react_1.default.createElement(Component, { ...allProps });
+    let { children, ...props } = allProps;
+    /**
+     * Convert props that happen to be React components to actual
+     * objects representing DOM elements. This is because we
+     * serialize props to JSON below, and React element Functions
+     * cannot be serialized.
+     */
+    props = react_utils_1.renderReactProps(props);
+    /**
+     * Components ending in *Provider are special components to
+     * Hydrogen's RSC implementation. They are rendered during
+     * the hydration process in the state tree even though they
+     * don't output any DOM. This is key to supporting crossing
+     * the server/client context boundary.
+     */
+    const shouldRenderDuringHydration = name.endsWith('Provider');
+    return (react_1.default.createElement("span", { "data-client-component": name, "data-id": id, "data-props": JSON.stringify(props), "data-named": named }, shouldRenderDuringHydration ? (react_1.default.createElement(Component, { ...allProps }, children)) : (children)));
+}
+exports.ClientMarker = ClientMarker;

package/dist/node/foundation/ClientMarker/index.d.ts

@@ -0,0 +1 @@
+export * from './ClientMarker';

package/dist/node/foundation/ClientMarker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ClientMarker"), exports);

package/dist/node/foundation/Hydration/HydrationContext.server.d.ts

@@ -0,0 +1 @@
+export declare const HydrationContext: import("react").Context<boolean>;

package/dist/node/foundation/Hydration/HydrationContext.server.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HydrationContext = void 0;
+const react_1 = require("react");
+exports.HydrationContext = react_1.createContext(false);

package/dist/node/foundation/Hydration/ServerComponentRequest.server.d.ts

@@ -0,0 +1,13 @@
+/**
+ * This augments the `Request` object from the Fetch API:
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
+ *
+ * - Adds a `cookies` map for easy access
+ * - Adds a static constructor to convert a Node.js `IncomingMessage` to a Request.
+ */
+export declare class ServerComponentRequest extends Request {
+    cookies: Map<string, string>;
+    constructor(input: any);
+    constructor(input: RequestInfo, init?: RequestInit);
+    private parseCookies;
+}

package/dist/node/foundation/Hydration/ServerComponentRequest.server.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerComponentRequest = void 0;
+/**
+ * This augments the `Request` object from the Fetch API:
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
+ *
+ * - Adds a `cookies` map for easy access
+ * - Adds a static constructor to convert a Node.js `IncomingMessage` to a Request.
+ */
+class ServerComponentRequest extends Request {
+    constructor(input, init) {
+        if (input instanceof Request) {
+            super(input, init);
+        }
+        else {
+            super(getUrlFromNodeRequest(input), {
+                headers: new Headers(input.headers),
+                method: input.method,
+            });
+        }
+        this.cookies = this.parseCookies();
+    }
+    parseCookies() {
+        const cookieString = this.headers.get('cookie') || '';
+        return new Map(cookieString
+            .split(';')
+            .map((chunk) => chunk.trim().split('=')));
+    }
+}
+exports.ServerComponentRequest = ServerComponentRequest;
+/**
+ * @see https://github.com/frandiox/vitedge/blob/17f3cd943e86d7c0c71a862985ddd6caa2899425/src/node/utils.js#L19-L24
+ *
+ * Note: Request can sometimes be an instance of Express request, where `originalUrl` is the true source of what the
+ * URL pathname is. We want to use that if it's present, so we union type this to `any`.
+ */
+function getUrlFromNodeRequest(request) {
+    var _a;
+    // TODO: Find out how to determine https from `request` object without forwarded proto
+    const secure = request.headers['x-forwarded-proto'] === 'https';
+    return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + ((_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url)}`).toString();
+}

package/dist/node/foundation/Hydration/ServerComponentResponse.server.d.ts

@@ -0,0 +1,18 @@
+export declare class ServerComponentResponse extends Response {
+    private wait;
+    /**
+     * Allow custom body to be a string or a Promise.
+     */
+    customBody: string | Promise<string>;
+    /**
+     * Buffer the current response until all queries have resolved,
+     * and prevent it from streaming back early.
+     */
+    doNotStream(): void;
+    canStream(): boolean;
+    /**
+     * Send the response from a Server Component. Renders React components to string,
+     * and returns `null` to make React happy.
+     */
+    send(body: any): null;
+}