Minor template updates and fixes

.changeset/weak-windows-burn.md

@@ -0,0 +1,6 @@
+---
+'demo-store': patch
+'@shopify/create-hydrogen': patch
+---
+
+Improved types of `HydrogenSession` when accessing `session.get('customerAccessToken')`.

examples/customer-api/tsconfig.json

@@ -5,8 +5,9 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
+    "module": "ES2022",
     "target": "ES2022",
     "strict": true,
     "allowJs": true,

templates/demo-store/app/lib/session.server.ts

@@ -10,12 +10,12 @@ import {
  * swap out the cookie-based implementation with something else!
  */
 export class HydrogenSession {
-  constructor(
-    private sessionStorage: SessionStorage,
-    private session: Session,
-  ) {
-    this.session = session;
-    this.sessionStorage = sessionStorage;
+  #sessionStorage;
+  #session;
+
+  constructor(sessionStorage: SessionStorage, session: Session) {
+    this.#sessionStorage = sessionStorage;
+    this.#session = session;
   }
 
   static async init(request: Request, secrets: string[]) {
@@ -34,31 +34,31 @@ export class HydrogenSession {
     return new this(storage, session);
   }
 
-  has(key: string) {
-    return this.session.has(key);
+  get has() {
+    return this.#session.has;
   }
 
-  get(key: string) {
-    return this.session.get(key);
+  get get() {
+    return this.#session.get;
   }
 
-  destroy() {
-    return this.sessionStorage.destroySession(this.session);
+  get flash() {
+    return this.#session.flash;
   }
 
-  flash(key: string, value: any) {
-    this.session.flash(key, value);
+  get unset() {
+    return this.#session.unset;
   }
 
-  unset(key: string) {
-    this.session.unset(key);
+  get set() {
+    return this.#session.set;
   }
 
-  set(key: string, value: any) {
-    this.session.set(key, value);
+  destroy() {
+    return this.#sessionStorage.destroySession(this.#session);
   }
 
   commit() {
-    return this.sessionStorage.commitSession(this.session);
+    return this.#sessionStorage.commitSession(this.#session);
   }
 }

templates/demo-store/app/lib/utils.ts

@@ -1,5 +1,4 @@
 import {useLocation, useMatches} from '@remix-run/react';
-import {parse as parseCookie} from 'worktop/cookie';
 import type {MoneyV2} from '@shopify/hydrogen/storefront-api-types';
 import typographicBase from 'typographic-base';
 
@@ -332,13 +331,3 @@ export function isLocalPath(url: string) {
 
   return false;
 }
-
-/**
- * Shopify's 'Online Store' stores cart IDs in a 'cart' cookie.
- * By doing the same, merchants can switch from the Online Store to Hydrogen
- * without customers losing carts.
- */
-export function getCartId(request: Request) {
-  const cookies = parseCookie(request.headers.get('Cookie') || '');
-  return cookies.cart ? `gid://shopify/Cart/${cookies.cart}` : undefined;
-}

templates/demo-store/app/routes/($locale).account.tsx

@@ -51,7 +51,7 @@ export async function loader({request, context, params}: LoaderArgs) {
   const {pathname} = new URL(request.url);
   const locale = params.locale;
   const customerAccessToken = await context.session.get('customerAccessToken');
-  const isAuthenticated = Boolean(customerAccessToken);
+  const isAuthenticated = !!customerAccessToken;
   const loginPath = locale ? `/${locale}/account/login` : '/account/login';
   const isAccountPage = /^\/account\/?$/.test(pathname);
 

templates/demo-store/package.json

@@ -34,8 +34,7 @@
     "react-use": "^17.4.0",
     "schema-dts": "^1.1.0",
     "tiny-invariant": "^1.2.0",
-    "typographic-base": "^1.0.4",
-    "worktop": "^0.7.3"
+    "typographic-base": "^1.0.4"
   },
   "devDependencies": {
     "@remix-run/dev": "1.19.1",

templates/demo-store/remix.env.d.ts

@@ -24,17 +24,24 @@ declare global {
   }
 }
 
-/**
- * Declare local additions to `AppLoadContext` to include the session utilities we injected in `server.ts`.
- */
 declare module '@shopify/remix-oxygen' {
+  /**
+   * Declare local additions to the Remix loader context.
+   */
   export interface AppLoadContext {
     waitUntil: ExecutionContext['waitUntil'];
     session: HydrogenSession;
     storefront: Storefront;
     cart: HydrogenCart;
     env: Env;
   }
+
+  /**
+   * Declare the data we expect to access via `context.session`.
+   */
+  export interface SessionData {
+    customerAccessToken: string;
+  }
 }
 
 // Needed to make this file a module.

templates/demo-store/server.ts

@@ -32,7 +32,7 @@ export default {
         throw new Error('SESSION_SECRET environment variable is not set');
       }
 
-      const waitUntil = (p: Promise<any>) => executionContext.waitUntil(p);
+      const waitUntil = executionContext.waitUntil.bind(executionContext);
       const [cache, session] = await Promise.all([
         caches.open('hydrogen'),
         HydrogenSession.init(request, [env.SESSION_SECRET]),

templates/demo-store/tsconfig.json

@@ -5,7 +5,7 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "module": "ES2022",
     "target": "ES2022",

templates/hello-world/tsconfig.json

@@ -5,7 +5,7 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "module": "ES2022",
     "target": "ES2022",

templates/skeleton/app/root.tsx

@@ -63,8 +63,8 @@ export async function loader({context}: LoaderArgs) {
 
   // validate the customer access token is valid
   const {isLoggedIn, headers} = await validateCustomerAccessToken(
-    customerAccessToken,
     session,
+    customerAccessToken,
   );
 
   // defer the cart query by not awaiting it
@@ -198,17 +198,19 @@ export function CatchBoundary() {
  *  ```
  *  */
 async function validateCustomerAccessToken(
-  customerAccessToken: CustomerAccessToken,
   session: HydrogenSession,
+  customerAccessToken?: CustomerAccessToken,
 ) {
   let isLoggedIn = false;
   const headers = new Headers();
   if (!customerAccessToken?.accessToken || !customerAccessToken?.expiresAt) {
     return {isLoggedIn, headers};
   }
-  const expiresAt = new Date(customerAccessToken.expiresAt);
-  const dateNow = new Date();
+
+  const expiresAt = new Date(customerAccessToken.expiresAt).getTime();
+  const dateNow = Date.now();
   const customerAccessTokenExpired = expiresAt < dateNow;
+
   if (customerAccessTokenExpired) {
     session.unset('customerAccessToken');
     headers.append('Set-Cookie', await session.commit());

templates/skeleton/app/routes/account.tsx

@@ -10,7 +10,7 @@ export async function loader({request, context}: LoaderArgs) {
   const {session, storefront} = context;
   const {pathname} = new URL(request.url);
   const customerAccessToken = await session.get('customerAccessToken');
-  const isLoggedIn = Boolean(customerAccessToken?.accessToken);
+  const isLoggedIn = !!customerAccessToken?.accessToken;
   const isAccountHome = pathname === '/account' || pathname === '/account/';
   const isPrivateRoute =
     /^\/account\/(orders|orders\/.*|profile|addresses|addresses\/.*)$/.test(

templates/skeleton/app/routes/cart.tsx

@@ -54,7 +54,7 @@ export async function action({request, context}: ActionArgs) {
     case CartForm.ACTIONS.BuyerIdentityUpdate: {
       result = await cart.updateBuyerIdentity({
         ...inputs.buyerIdentity,
-        customerAccessToken,
+        customerAccessToken: customerAccessToken?.accessToken,
       });
       break;
     }

templates/skeleton/remix.env.d.ts

@@ -6,6 +6,7 @@
 import '@total-typescript/ts-reset';
 
 import type {Storefront, HydrogenCart} from '@shopify/hydrogen';
+import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
 import type {HydrogenSession} from './server';
 
 declare global {
@@ -26,15 +27,22 @@ declare global {
   }
 }
 
-/**
- * Declare local additions to `AppLoadContext` to include the session utilities we injected in `server.ts`.
- */
 declare module '@shopify/remix-oxygen' {
+  /**
+   * Declare local additions to the Remix loader context.
+   */
   export interface AppLoadContext {
     env: Env;
     cart: HydrogenCart;
     storefront: Storefront;
     session: HydrogenSession;
     waitUntil: ExecutionContext['waitUntil'];
   }
+
+  /**
+   * Declare the data we expect to access via `context.session`.
+   */
+  export interface SessionData {
+    customerAccessToken: CustomerAccessToken;
+  }
 }

templates/skeleton/server.ts

@@ -32,7 +32,7 @@ export default {
         throw new Error('SESSION_SECRET environment variable is not set');
       }
 
-      const waitUntil = (p: Promise<any>) => executionContext.waitUntil(p);
+      const waitUntil = executionContext.waitUntil.bind(executionContext);
       const [cache, session] = await Promise.all([
         caches.open('hydrogen'),
         HydrogenSession.init(request, [env.SESSION_SECRET]),
@@ -99,10 +99,13 @@ export default {
  * swap out the cookie-based implementation with something else!
  */
 export class HydrogenSession {
-  constructor(
-    private sessionStorage: SessionStorage,
-    private session: Session,
-  ) {}
+  #sessionStorage;
+  #session;
+
+  constructor(sessionStorage: SessionStorage, session: Session) {
+    this.#sessionStorage = sessionStorage;
+    this.#session = session;
+  }
 
   static async init(request: Request, secrets: string[]) {
     const storage = createCookieSessionStorage({
@@ -120,32 +123,32 @@ export class HydrogenSession {
     return new this(storage, session);
   }
 
-  has(key: string) {
-    return this.session.has(key);
+  get has() {
+    return this.#session.has;
   }
 
-  get(key: string) {
-    return this.session.get(key);
+  get get() {
+    return this.#session.get;
   }
 
-  destroy() {
-    return this.sessionStorage.destroySession(this.session);
+  get flash() {
+    return this.#session.flash;
   }
 
-  flash(key: string, value: any) {
-    this.session.flash(key, value);
+  get unset() {
+    return this.#session.unset;
   }
 
-  unset(key: string) {
-    this.session.unset(key);
+  get set() {
+    return this.#session.set;
   }
 
-  set(key: string, value: any) {
-    this.session.set(key, value);
+  destroy() {
+    return this.#sessionStorage.destroySession(this.#session);
   }
 
   commit() {
-    return this.sessionStorage.commitSession(this.session);
+    return this.#sessionStorage.commitSession(this.#session);
   }
 }
 

templates/skeleton/tsconfig.json

@@ -5,7 +5,7 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "module": "ES2022",
     "target": "ES2022",