@pack/hydrogen 0.0.2

package/README.md

@@ -0,0 +1 @@
+# hydrogen

package/dist/create-pack-client.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="@shopify/oxygen-workers-types" />
+import { PackClient } from '@pack/client';
+import { CacheLong } from '@shopify/hydrogen';
+import { PreviewSession } from './preview/preview-session';
+/** @see https://shopify.dev/docs/custom-storefronts/hydrogen/data-fetching/cache#caching-strategies */
+type CachingStrategy = ReturnType<typeof CacheLong>;
+interface EnvironmentOptions {
+    /**
+     * A Cache API instance.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Cache
+     */
+    cache: Cache;
+    /**
+     * A runtime utility for serverless environments
+     * @see https://developers.cloudflare.com/workers/runtime-apis/fetch-event/#waituntil
+     */
+    waitUntil: ExecutionContext['waitUntil'];
+}
+interface CreatePackClientOptions extends EnvironmentOptions {
+    apiUrl?: string;
+    token: string;
+    preview?: {
+        session: PreviewSession;
+    };
+    contentEnvironment?: string;
+}
+type Variables = Record<string, any>;
+interface QueryOptions {
+    variables?: Variables;
+    cache?: CachingStrategy;
+}
+interface QueryError {
+    message: string;
+    param?: string;
+    code?: string;
+    type: string;
+}
+interface QueryResponse<T> {
+    data: T | null;
+    error: QueryError | null;
+}
+export interface Pack {
+    isPreviewModeEnabled: () => boolean;
+    preview?: {
+        session: PreviewSession;
+    };
+    query: <T = any>(query: string, options?: QueryOptions) => Promise<QueryResponse<T>>;
+    isValidEditToken: PackClient['isValidEditToken'];
+}
+export declare function createPackClient(options: CreatePackClientOptions): Pack;
+export {};
+//# sourceMappingURL=create-pack-client.d.ts.map

package/dist/create-pack-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-pack-client.d.ts","sourceRoot":"","sources":["../src/create-pack-client.ts"],"names":[],"mappings":";AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,OAAO,EAAC,SAAS,EAAkB,MAAM,mBAAmB,CAAA;AAE5D,OAAO,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAA;AAExD,uGAAuG;AACvG,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA;AAEnD,UAAU,kBAAkB;IAC1B;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAA;IACZ;;;OAGG;IACH,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CACzC;AAED,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,cAAc,CAAA;KACxB,CAAA;IACD,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;AAEpC,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,eAAe,CAAA;CACxB;AAED,UAAU,UAAU;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAED,UAAU,aAAa,CAAC,CAAC;IACvB,IAAI,EAAE,CAAC,GAAG,IAAI,CAAA;IACd,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;CACzB;AAED,MAAM,WAAW,IAAI;IACnB,oBAAoB,EAAE,MAAM,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,cAAc,CAAA;KACxB,CAAA;IACD,KAAK,EAAE,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAA;IACpF,gBAAgB,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAA;CACjD;AA8BD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,IAAI,CA2CvE"}

package/dist/create-pack-client.js

@@ -0,0 +1,61 @@
+import { PackClient } from '@pack/client';
+import { CacheLong, createWithCache } from '@shopify/hydrogen';
+const PRODUCTION_ENVIRONMENT = 'production';
+/**
+ * Create an SHA-256 hash as a hex string
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string
+ */
+async function sha256(message) {
+    // encode as UTF-8
+    const messageBuffer = new TextEncoder().encode(message);
+    // hash the message
+    const hashBuffer = await crypto.subtle.digest('SHA-256', messageBuffer);
+    // convert bytes to hex string
+    return Array.from(new Uint8Array(hashBuffer))
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join('');
+}
+/**
+ * Hash query and its parameters for use as cache key
+ * NOTE: Oxygen deployment will break if the cache key is long or contains `\n`
+ */
+function hashQuery(query, variables) {
+    let hash = query;
+    if (variables !== null)
+        hash += JSON.stringify(variables);
+    return sha256(hash);
+}
+export function createPackClient(options) {
+    const { cache, waitUntil, preview, contentEnvironment, token, apiUrl } = options;
+    const previewEnabled = !!preview?.session.get('enabled');
+    const previewEnvironment = preview?.session.get('environment');
+    const clientContentEnvironment = previewEnvironment || contentEnvironment || PRODUCTION_ENVIRONMENT;
+    const packClient = new PackClient({
+        apiUrl,
+        token,
+        contentEnvironment: clientContentEnvironment,
+    });
+    return {
+        preview,
+        isPreviewModeEnabled: () => previewEnabled,
+        async query(query, { variables, cache: strategy = CacheLong() } = {}) {
+            const queryHash = await hashQuery(query, variables);
+            const withCache = createWithCache({
+                cache,
+                waitUntil,
+            });
+            const queryVariables = variables ? { ...variables } : {};
+            if (previewEnabled) {
+                queryVariables.version = 'CURRENT';
+            }
+            else {
+                queryVariables.version = 'PUBLISHED';
+            }
+            // Preview mode always bypasses the cache
+            if (previewEnabled)
+                return packClient.fetch(query, { variables: queryVariables });
+            return withCache(queryHash, strategy, () => packClient.fetch(query, { variables: queryVariables }));
+        },
+        isValidEditToken: (token) => packClient.isValidEditToken(token),
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Pack, createPackClient } from "./create-pack-client";
+import { PreviewSession } from "./preview/preview-session";
+import { action as previewModeAction, loader as previewModeLoader } from "./preview/preview-mode";
+export { type Pack, createPackClient, PreviewSession, previewModeAction, previewModeLoader, };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,MAAM,IAAI,iBAAiB,EAC3B,MAAM,IAAI,iBAAiB,EAC5B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,KAAK,IAAI,EACT,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,GAClB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+import { createPackClient } from "./create-pack-client";
+import { PreviewSession } from "./preview/preview-session";
+import { action as previewModeAction, loader as previewModeLoader, } from "./preview/preview-mode";
+export { createPackClient, PreviewSession, previewModeAction, previewModeLoader, };

package/dist/preview/preview-mode.d.ts

@@ -0,0 +1,11 @@
+import { type ActionFunction, type LoaderFunction } from "@shopify/remix-oxygen";
+/**
+ * A `POST` request to this route will exit preview mode
+ * POST /api/edit Content-Type: application/x-www-form-urlencoded
+ */
+export declare const action: ActionFunction;
+/**
+ * A `GET` request to this route will enter preview mode
+ */
+export declare const loader: LoaderFunction;
+//# sourceMappingURL=preview-mode.d.ts.map

package/dist/preview/preview-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-mode.d.ts","sourceRoot":"","sources":["../../src/preview/preview-mode.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEpB,MAAM,uBAAuB,CAAC;AAsB/B;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,cAkBpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,cA+BpB,CAAC"}

package/dist/preview/preview-mode.js

@@ -0,0 +1,73 @@
+import { json, redirect, } from "@shopify/remix-oxygen";
+const ROOT_PATH = "/";
+/**
+ * A not found response. Sets the status code.
+ */
+function notFound(message = "Not Found") {
+    return new Response(message, { status: 404, statusText: "Not Found" });
+}
+function isLocalPath(request, url) {
+    // Our domain, based on the current request path
+    const currentUrl = new URL(request.url);
+    // If url is relative, the 2nd argument will act as the base domain.
+    const urlToCheck = new URL(url, currentUrl.origin);
+    // If the origins don't match the slug is not on our domain.
+    return currentUrl.origin === urlToCheck.origin;
+}
+/**
+ * A `POST` request to this route will exit preview mode
+ * POST /api/edit Content-Type: application/x-www-form-urlencoded
+ */
+export const action = async ({ request, context }) => {
+    const { preview } = context.pack;
+    if (!(request.method === "POST" && preview?.session)) {
+        return json({ message: "Method not allowed" }, 405);
+    }
+    const body = await request.formData();
+    const slug = body.get("slug") ?? ROOT_PATH;
+    const redirectTo = isLocalPath(request, slug) ? slug : ROOT_PATH;
+    preview.session.set("enabled", false);
+    return redirect(redirectTo, {
+        headers: {
+            "Set-Cookie": await preview.session.destroy(),
+        },
+    });
+};
+/**
+ * A `GET` request to this route will enter preview mode
+ */
+export const loader = async function ({ request, context }) {
+    const { pack } = context;
+    if (!pack.preview?.session)
+        return notFound();
+    const { searchParams } = new URL(request.url);
+    const token = searchParams.get("token");
+    const environment = searchParams.get("environment");
+    const path = searchParams.get("path") ?? ROOT_PATH;
+    const redirectTo = isLocalPath(request, path) ? path : ROOT_PATH;
+    if (!searchParams.has("token")) {
+        throw new MissingTokenError();
+    }
+    const isValidToken = await pack.isValidEditToken(token);
+    if (!isValidToken) {
+        throw new InvalidTokenError();
+    }
+    pack.preview.session.set("enabled", true);
+    pack.preview.session.set("environment", environment);
+    return redirect(redirectTo, {
+        status: 307,
+        headers: {
+            "Set-Cookie": await pack.preview.session.commit(),
+        },
+    });
+};
+class MissingTokenError extends Response {
+    constructor() {
+        super("Missing token", { status: 401, statusText: "Unauthorized" });
+    }
+}
+class InvalidTokenError extends Response {
+    constructor() {
+        super("Invalid token", { status: 401, statusText: "Unauthorized" });
+    }
+}

package/dist/preview/preview-session.d.ts

@@ -0,0 +1,12 @@
+import { type Session, type SessionStorage } from '@shopify/remix-oxygen';
+export declare class PreviewSession {
+    #private;
+    constructor(sessionStorage: SessionStorage, session: Session);
+    static init(request: Request, secrets: string[]): Promise<PreviewSession>;
+    has(key: string): boolean;
+    get(key: string): any;
+    destroy(): Promise<string>;
+    set(key: string, value: any): void;
+    commit(): Promise<string>;
+}
+//# sourceMappingURL=preview-session.d.ts.map

package/dist/preview/preview-session.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-session.d.ts","sourceRoot":"","sources":["../../src/preview/preview-session.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,OAAO,EACZ,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAA;AAE9B,qBAAa,cAAc;;gBAIb,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO;WAK/C,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,cAAc,CAAC;IAe/E,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAIzB,GAAG,CAAC,GAAG,EAAE,MAAM;IAIf,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC;IAI1B,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAIlC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;CAG1B"}

package/dist/preview/preview-session.js

@@ -0,0 +1,36 @@
+import { createCookieSessionStorage, } from '@shopify/remix-oxygen';
+export class PreviewSession {
+    #sessionStorage;
+    #session;
+    constructor(sessionStorage, session) {
+        this.#sessionStorage = sessionStorage;
+        this.#session = session;
+    }
+    static async init(request, secrets) {
+        const storage = createCookieSessionStorage({
+            cookie: {
+                name: '__preview',
+                sameSite: 'none',
+                secure: true,
+                secrets,
+            },
+        });
+        const session = await storage.getSession(request.headers.get('Cookie'));
+        return new this(storage, session);
+    }
+    has(key) {
+        return this.#session.has(key);
+    }
+    get(key) {
+        return this.#session.get(key);
+    }
+    destroy() {
+        return this.#sessionStorage.destroySession(this.#session);
+    }
+    set(key, value) {
+        this.#session.set(key, value);
+    }
+    commit() {
+        return this.#sessionStorage.commitSession(this.#session);
+    }
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@pack/hydrogen",
+  "description": "Pack Hydrogen",
+  "version": "0.0.2",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "engines": {
+    "node": ">=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "npx rimraf dist",
+    "build": "npx tsc",
+    "test": "",
+    "test:watch": "npx vitest"
+  },
+  "author": "Pack",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pack/client": "^0.0.5",
+    "@shopify/hydrogen": "^2023.10.2",
+    "@shopify/remix-oxygen": "^2.0.1"
+  },
+  "devDependencies": {
+    "@shopify/oxygen-workers-types": "^4.0.0"
+  }
+}