npm - @shopify/hydrogen - Versions diffs - 0.1.0 - Mend

@shopify/hydrogen 0.1.0

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 (454) hide show

package/dist/node/handle-event.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+/// <reference types="node" />
+import type { ServerResponse } from 'http';
+import { ServerComponentRequest } from './foundation/Hydration/ServerComponentRequest.server';
+interface HydrogenFetchEvent {
+    /**
+     * Hydrogen only cares about a single property, since we pass `request` as a separate option.
+     */
+    waitUntil?: (callback: Promise<void>) => void;
+}
+export interface HandleEventOptions {
+    request: ServerComponentRequest;
+    entrypoint: any;
+    indexTemplate: string | ((url: string) => Promise<string>);
+    assetHandler?: (event: HydrogenFetchEvent, url: URL) => Promise<Response>;
+    cache?: Cache;
+    streamableResponse: ServerResponse;
+    dev?: boolean;
+}
+export default function handleEvent(event: HydrogenFetchEvent, { request, entrypoint, indexTemplate, assetHandler, cache, streamableResponse, dev, }: HandleEventOptions): Promise<Response | undefined>;
+export {};

package/dist/node/handle-event.js ADDED Viewed

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const EXPIRES_HEADER = 'Expires';
+const CACHE_TTL_IN_SECONDS = 60;
+async function handleEvent(event, { request, entrypoint, indexTemplate, assetHandler, cache, streamableResponse, dev, }) {
+    var _a, _b, _c;
+    if (cache) {
+        const response = await cache.match(request);
+        if (response && responseIsValid(response)) {
+            return response;
+        }
+    }
+    const url = new URL(request.url);
+    const isReactHydrationRequest = url.pathname === '/react';
+    try {
+        const template = typeof indexTemplate === 'function'
+            ? await indexTemplate(url.toString())
+            : indexTemplate;
+        /**
+         * If this is a request for an asset, and an asset handler is present, call it.
+         */
+        if (/\.(png|jpe?g|gif|css|js|svg|ico|map)$/i.test(url.pathname) &&
+            assetHandler) {
+            return assetHandler(event, url);
+        }
+        const { render, hydrate, stream } = entrypoint.default || entrypoint;
+        // @ts-ignore
+        if (dev && !(render && hydrate && stream)) {
+            throw new Error(`entry-server.jsx could not be loaded. This likely occurred because of a Vite compilation error.\n` +
+                `Please check your server logs for more information.`);
+        }
+        const isStreamable = streamableResponse && isStreamableRequest(url);
+        const context = {};
+        /**
+         * Stream back real-user responses, but for bots/etc,
+         * use `render` instead. This is because we need to inject <head>
+         * things for SEO reasons.
+         */
+        if (isStreamable) {
+            if (isReactHydrationRequest) {
+                hydrate(url, { context, request, response: streamableResponse });
+            }
+            else {
+                stream(url, { context, request, response: streamableResponse, template });
+            }
+            return;
+        }
+        const { body, bodyAttributes, htmlAttributes, componentResponse, ...head } = await render(url, { request, context, isReactHydrationRequest });
+        const headers = componentResponse.headers;
+        /**
+         * TODO: Set as part of cache-control headers when Oxygen support lands.
+         */
+        headers.set(EXPIRES_HEADER, new Date(Date.now() + CACHE_TTL_IN_SECONDS * 1000).toUTCString());
+        if (componentResponse.customBody) {
+            return new Response(await componentResponse.customBody, {
+                status: (_a = componentResponse.status) !== null && _a !== void 0 ? _a : 200,
+                headers,
+            });
+        }
+        let response;
+        if (isReactHydrationRequest) {
+            response = new Response(body, {
+                status: (_b = componentResponse.status) !== null && _b !== void 0 ? _b : 200,
+                headers,
+            });
+        }
+        else {
+            const html = template
+                .replace(`<div id="root"></div>`, `<div id="root" data-server-rendered="true">${body}</div>`)
+                .replace(/<head>(.*?)<\/head>/s, generateHeadTag(head))
+                .replace('<body', bodyAttributes ? `<body ${bodyAttributes}` : '$&')
+                .replace('<html', htmlAttributes ? `<html ${htmlAttributes}` : '$&');
+            headers.append('content-type', 'text/html');
+            response = new Response(html, {
+                status: (_c = componentResponse.status) !== null && _c !== void 0 ? _c : 200,
+                headers,
+            });
+        }
+        if (cache) {
+            /**
+             * Put response into cache. If the Worker runtime requires `event.waitUntil` to keep the request
+             * alive while the cache operation completes, use it. Otherwise, assume queued microtasks will finish.
+             */
+            if (typeof event.waitUntil === 'function') {
+                event.waitUntil(cache.put(request, response.clone()));
+            }
+            else {
+                cache.put(request, response.clone());
+            }
+        }
+        return response;
+    }
+    catch (e) {
+        console.log(e.stack);
+        return new Response(e.message || e.toString(), {
+            status: 500,
+        });
+    }
+}
+exports.default = handleEvent;
+/**
+ * Determine whether a current response is valid.
+ * This is necessary because the Oxygen Cache API does not yet
+ * support automatic expiration via cache-control headers.
+ * Eventually, a method like this may not be necessary.
+ */
+function responseIsValid(response) {
+    const expiration = response.headers.get(EXPIRES_HEADER);
+    if (!expiration)
+        return false;
+    return new Date(expiration) > new Date();
+}
+function isStreamableRequest(url) {
+    /**
+     * TODO: Add UA detection.
+     */
+    const isBot = url.searchParams.has('_bot');
+    return !isBot;
+}
+/**
+ * Generate the contents of the `head` tag, and update the existing `<title>` tag
+ * if one exists, and if a title is passed.
+ */
+function generateHeadTag(head) {
+    const headProps = ['base', 'meta', 'style', 'noscript', 'script', 'link'];
+    const { title, ...rest } = head;
+    const otherHeadProps = headProps
+        .map((prop) => rest[prop])
+        .filter(Boolean)
+        .join('\n');
+    return (_outerHtml, innerHtml) => {
+        let headHtml = otherHeadProps + innerHtml;
+        if (title) {
+            if (headHtml.includes('<title>')) {
+                headHtml = headHtml.replace(/(<title>(?:.|\n)*?<\/title>)/, title);
+            }
+            else {
+                headHtml += title;
+            }
+        }
+        return `<head>${headHtml}</head>`;
+    };
+}

package/dist/node/hooks/useQuery/QueryProvider.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import type { ReactQueryHydrationContext } from '../../foundation/ShopifyProvider/types';
+export declare function QueryProvider({ children, hydrationContext, }: {
+    children: ReactNode;
+    hydrationContext?: ReactQueryHydrationContext;
+}): JSX.Element;

package/dist/node/hooks/useQuery/QueryProvider.js ADDED Viewed

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueryProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const react_query_1 = require("react-query");
+const hydration_1 = require("react-query/hydration");
+function QueryProvider({ children, hydrationContext, }) {
+    const queryClient = new react_query_1.QueryClient({
+        defaultOptions: { queries: { suspense: true } },
+    });
+    if (hydrationContext) {
+        hydrationContext.queryClient = queryClient;
+    }
+    return (react_1.default.createElement(react_query_1.QueryClientProvider, { client: queryClient },
+        react_1.default.createElement(hydration_1.Hydrate, { state: hydrationContext === null || hydrationContext === void 0 ? void 0 : hydrationContext.dehydratedState }, children)));
+}
+exports.QueryProvider = QueryProvider;

package/dist/node/hooks/useQuery/hooks.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { UseQueryOptions, QueryKey } from 'react-query';
+/**
+ * useQuery is a wrapper around `fetch` which supports Suspense calls on the server
+ * and on the client. It is backed by `react-query`, and it accepts options to that package's
+ * `useQuery` hook.
+ *
+ * If the `init` object contains `accept` or `content-type` headers indicating JSON,
+ * the response will be converted to JSON. Otherwise, it will be read as text.
+ *
+ * @see https://react-query.tanstack.com/reference/useQuery
+ */
+export declare function useQuery<T>(url: string, init?: RequestInit, queryOptions?: UseQueryOptions<T, Error, T, QueryKey>): import("react-query").UseQueryResult<T, Error>;

package/dist/node/hooks/useQuery/hooks.js ADDED Viewed

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQuery = void 0;
+const react_query_1 = require("react-query");
+/**
+ * useQuery is a wrapper around `fetch` which supports Suspense calls on the server
+ * and on the client. It is backed by `react-query`, and it accepts options to that package's
+ * `useQuery` hook.
+ *
+ * If the `init` object contains `accept` or `content-type` headers indicating JSON,
+ * the response will be converted to JSON. Otherwise, it will be read as text.
+ *
+ * @see https://react-query.tanstack.com/reference/useQuery
+ */
+function useQuery(url, init, queryOptions) {
+    return react_query_1.useQuery(
+    /**
+     * TODO: Add better key generation, taking into account headers, etc.
+     */
+    [url, init === null || init === void 0 ? void 0 : init.body], async () => {
+        const response = await fetch(url, init);
+        if (!response.ok) {
+            throw new Error(`[useQuery] error: ${response.status} ${response.statusText}`);
+        }
+        const headers = new Headers(init === null || init === void 0 ? void 0 : init.headers);
+        const isJsonRequest = headers.get('accept') === 'application/json' ||
+            headers.get('content-type') === 'application/json';
+        const method = isJsonRequest ? 'json' : 'text';
+        return response[method]();
+    }, queryOptions);
+}
+exports.useQuery = useQuery;

package/dist/node/hooks/useQuery/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './hooks';
2	+ export * from './QueryProvider';

package/dist/node/hooks/useQuery/index.js ADDED Viewed

@@ -0,0 +1,14 @@
+"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("./hooks"), exports);
+__exportStar(require("./QueryProvider"), exports);

package/dist/node/types.d.ts ADDED Viewed

@@ -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/node/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";
2	+ Object.defineProperty(exports, "__esModule", { value: true });

package/dist/worker/foundation/Hydration/ServerComponentRequest.server.d.ts ADDED Viewed

@@ -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/worker/foundation/Hydration/ServerComponentRequest.server.js ADDED Viewed

@@ -0,0 +1,39 @@
+/**
+ * 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 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('=')));
+    }
+}
+/**
+ * @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/worker/foundation/Hydration/ServerComponentResponse.server.d.ts ADDED Viewed

@@ -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;
+}

package/dist/worker/foundation/Hydration/ServerComponentResponse.server.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { renderToString } from 'react-dom/server';
+export class ServerComponentResponse extends Response {
+    constructor() {
+        super(...arguments);
+        this.wait = false;
+        /**
+         * Allow custom body to be a string or a Promise.
+         */
+        this.customBody = '';
+    }
+    /**
+     * Buffer the current response until all queries have resolved,
+     * and prevent it from streaming back early.
+     */
+    doNotStream() {
+        this.wait = true;
+    }
+    canStream() {
+        return !this.wait;
+    }
+    /**
+     * Send the response from a Server Component. Renders React components to string,
+     * and returns `null` to make React happy.
+     */
+    send(body) {
+        if (typeof body === 'object' &&
+            body.$$typeof === Symbol.for('react.element')) {
+            this.customBody = renderToString(body);
+        }
+        else {
+            this.customBody = body;
+        }
+        return null;
+    }
+}