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/worker/handle-event.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+/// <reference types="@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/worker/handle-event.js ADDED Viewed

@@ -0,0 +1,140 @@
+const EXPIRES_HEADER = 'Expires';
+const CACHE_TTL_IN_SECONDS = 60;
+export default 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,
+        });
+    }
+}
+/**
+ * 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/worker/handle-worker-event.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { HandleEventOptions } from './handle-event';
+interface FetchEvent {
+    request: Request;
+    waitUntil?: (callback: Promise<void>) => void;
+}
+/**
+ * This is a wrapper around `handleEvent` that upgrades Request to ServerComponentRequest,
+ * so the rest of the application downstream has access to things like `request.cookies`, etc.
+ */
+export default function handleWorkerEvent(event: FetchEvent, options: HandleEventOptions): Promise<Response | undefined>;
+export {};

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

@@ -0,0 +1,14 @@
+import { ServerComponentRequest } from './foundation/Hydration/ServerComponentRequest.server';
+import handleEvent from './handle-event';
+/**
+ * This is a wrapper around `handleEvent` that upgrades Request to ServerComponentRequest,
+ * so the rest of the application downstream has access to things like `request.cookies`, etc.
+ */
+export default async function handleWorkerEvent(event, options) {
+    const request = new ServerComponentRequest(event.request);
+    /**
+     * Note: We need to pass `request` as a separate option since Cloudflare (and other Worker
+     * runtimes, presumably) does not like when `event` is mutated.
+     */
+    return handleEvent(event, { ...options, request });
+}

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

@@ -0,0 +1,62 @@
+/// <reference types="@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/worker/types.js ADDED Viewed

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

package/entry-client.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default} from './dist/esnext/entry-client';

package/entry-client.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default} from './dist/esnext/entry-client';

package/entry-server.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default} from './dist/esnext/entry-server';

package/entry-server.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default} from './dist/esnext/entry-server';

package/marker.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {ClientMarker} from './dist/esnext/foundation/ClientMarker';

package/middleware.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './dist/node/framework/middleware';

package/middleware.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ module.exports = require('./dist/node/framework/middleware');

package/package.json ADDED Viewed

@@ -0,0 +1,98 @@
+{
+  "name": "@shopify/hydrogen",
+  "publishConfig": {
+    "access": "public",
+    "@shopify:registry": "https://registry.npmjs.org"
+  },
+  "version": "0.1.0",
+  "description": "Modern custom Shopify storefronts",
+  "license": "MIT",
+  "main": "dist/esnext/index.js",
+  "types": "dist/esnext/index.d.ts",
+  "files": [
+    "dist",
+    "plugin.js",
+    "plugin.d.ts",
+    "entry-server.js",
+    "entry-server.d.ts",
+    "client.js",
+    "client.d.ts",
+    "entry-client.js",
+    "entry-client.d.ts",
+    "marker.js",
+    "middleware.js",
+    "middleware.d.ts",
+    "worker.js"
+  ],
+  "scripts": {
+    "predev": "rimraf ./dist",
+    "dev": "run-p dev-esnext dev-node dev-worker",
+    "dev-esnext": "tsc -w --incremental --p tsconfig.build.json",
+    "dev-node": "tsc -w --incremental --p tsconfig.cjs.json",
+    "dev-worker": "tsc -w --incremental --p tsconfig.worker.json",
+    "prebuild": "rimraf dist && yarn lint",
+    "build": "run-p build-esnext build-node build-worker",
+    "build-esnext": "tsc --p tsconfig.build.json",
+    "build-node": "tsc --p tsconfig.cjs.json",
+    "build-worker": "tsc --p tsconfig.worker.json",
+    "lint": "eslint --ext .ts src/** --no-error-on-unmatched-pattern",
+    "format": "prettier --write --parser typescript \"src/**/*.ts\"",
+    "graphql-types": "graphql-codegen --config codegen.yml && yarn format",
+    "prepack": "yarn build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Shopify/hydrogen.git",
+    "directory": "packages/hydrogen"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.16",
+    "@graphql-codegen/cli": "^1.21.4",
+    "@graphql-codegen/graphql-modules-preset": "^1.2.5",
+    "@graphql-codegen/import-types-preset": "^1.18.1",
+    "@graphql-codegen/introspection": "1.18.2",
+    "@graphql-codegen/near-operation-file-preset": "^1.18.0",
+    "@graphql-codegen/typed-document-node": "^1.18.5",
+    "@graphql-codegen/typescript": "^1.22.0",
+    "@graphql-codegen/typescript-graphql-files-modules": "1.18.1",
+    "@graphql-codegen/typescript-operations": "^1.17.16",
+    "@graphql-codegen/typescript-react-apollo": "2.2.4",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@rollup/plugin-graphql": "^1.0.0",
+    "@types/connect": "^3.4.34",
+    "@types/graphql": "^14.5.0",
+    "@types/node": "^15.12.4",
+    "@types/node-fetch": "^2.5.9",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "@types/react-router-dom": "^5.1.7",
+    "babel-loader": "^8.2.2",
+    "postcss": "^8",
+    "raw-loader": "^4.0.2",
+    "rimraf": "^3.0.2",
+    "tailwindcss": "^2.1.1"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router-dom": "^5.2.0",
+    "vite": "^2.5.7"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^1.0.0-beta.0",
+    "connect": "^3.7.0",
+    "fast-glob": "^3.2.5",
+    "focus-trap-react": "^8.5.0",
+    "graphql": "^15.5.0",
+    "html-dom-parser": "^1.0.1",
+    "html-react-parser": "^1.2.6",
+    "isomorphic-dompurify": "^0.13.0",
+    "node-fetch": "^2.6.1",
+    "react-error-boundary": "^3.1.3",
+    "react-helmet-async": "^1.0.9",
+    "react-query": "^3.18.1",
+    "react-ssr-prepass": "^1.4.0",
+    "vite-plugin-inspect": "^0.3.6"
+  },
+  "gitHead": "3708002670428336e09facaf4c12068cc75b6859"
+}

package/plugin.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default} from './dist/node/framework/plugin';

package/plugin.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ module.exports = require('./dist/node/framework/plugin');

package/worker.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default} from './dist/worker/handle-worker-event';