npm - @jay-framework/fullstack-component - Versions diffs - 0.8.0 → 0.10.0 - Mend

@jay-framework/fullstack-component 0.8.0 → 0.10.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 (4) hide show

package/README.md CHANGED Viewed

@@ -26,16 +26,118 @@ The `@jay-framework/fullstack-component` package provides a fluent builder API f
 ## Rendering Phases
-- **Slow Rendering**: Use for static data that doesn't change often
-- **Fast Rendering**: Use for dynamic data that can be cached
-- **Partial Renders**: Only update the parts of the view state that change
-- **Carry Forward**: Pass data between render phases to avoid recomputation
+Jay Stack components support three rendering phases, each optimized for different data lifecycles:
-| Rendering Phase        | Rendered Where | When Rendered                  | Carry Forward      |
-| ---------------------- | -------------- | ------------------------------ | ------------------ |
-| Slowly Changing Render | SSR            | Build time or data change time | Slowly → Fast      |
-| Fast Changing Render   | SSR            | Page serving                   | Fast → Interactive |
-| Interactive Render     | CSR            | User interaction               | -                  |
+| Rendering Phase    | Rendered Where | When Rendered                  | Use Case                          |
+| ------------------ | -------------- | ------------------------------ | --------------------------------- |
+| **Slow (Static)**  | SSR            | Build time or data change time | Product names, descriptions, SKUs |
+| **Fast (Dynamic)** | SSR            | Page serving (per request)     | Inventory, pricing, availability  |
+| **Interactive**    | CSR            | User interaction               | Cart count, user selections       |
+### Phase-Based Type Validation
+Jay Stack automatically generates **phase-specific ViewState types** from your contracts, ensuring that each render function can only return properties appropriate for its phase. This prevents accidentally including fast-changing data in slow renders or slow data in fast renders.
+**Benefits:**
+- 🛡️ **Compile-time safety**: TypeScript catches phase violations before deployment
+- 📝 **Self-documenting**: The contract explicitly shows which data is static vs dynamic
+- ⚡ **Performance**: Ensures optimal caching and rendering strategies
+- 🎯 **Intent clarity**: Makes data lifecycle explicit in the contract
+**Example:**
+```typescript
+// TypeScript automatically knows which properties are valid in each phase
+.withSlowlyRender(async () => {
+    return partialRender({
+        productName: 'Widget',   // ✅ Allowed (slow phase)
+        price: 29.99,           // ❌ TypeScript Error: Not in SlowViewState
+    }, {});
+})
+.withFastRender(async () => {
+    return partialRender({
+        price: 29.99,           // ✅ Allowed (fast phase)
+        productName: 'Widget',   // ❌ TypeScript Error: Not in FastViewState
+    }, {});
+})
+```
+### Specifying Phases in Contracts
+You can annotate your contract properties with the `phase` attribute to control when data is rendered:
+#### Jay HTML Contract
+```html
+<html>
+  <head>
+    <script type="application/yaml-jay">
+      data:
+        # Static data - rendered at build time
+        - {tag: productName, dataType: string, phase: slow}
+        - {tag: description, dataType: string, phase: slow}
+        - {tag: sku, dataType: string, phase: slow}
+        # Dynamic data - rendered per request
+        - {tag: price, dataType: number, phase: fast}
+        - {tag: inStock, dataType: boolean, phase: fast}
+        # No phase specified = defaults to 'slow'
+        - {tag: category, dataType: string}
+    </script>
+  </head>
+  <body>
+    <div>
+      <h1>{productName}</h1>
+      <p>{description}</p>
+      <p>Price: ${price}</p>
+    </div>
+  </body>
+</html>
+```
+#### Jay Contract (Headless)
+```yaml
+name: product-contract
+tags:
+  # Static product information
+  - tag: productName
+    dataType: string
+    phase: slow
+  - tag: description
+    dataType: string
+    phase: slow
+  - tag: sku
+    dataType: string
+    phase: slow
+  # Dynamic pricing and availability
+  - tag: price
+    dataType: number
+    phase: fast
+  - tag: inStock
+    dataType: boolean
+    phase: fast
+  # Interactive elements go in refs, not data
+  interactive:
+    - tag: addToCartButton
+      elementType: [button]
+```
+**Phase Rules:**
+- `slow`: Value is set at build time (default if not specified)
+- `fast`: Value is set at request time
+- `fast+interactive`: Value is set at request time and can be modified on the client
+- `interactive` tags are implicitly `fast+interactive` and go into the `Refs` type, not `ViewState`
+- For nested objects, the parent's phase serves as the default for children
+- Array children cannot have an earlier phase than their parent array
 ## Installation
@@ -57,12 +159,15 @@ For headless components, create a Jay Contract file (`my-contract.jay-contract`)
   <head>
     <script type="application/yaml-jay">
       data:
-        id: string
-        name: string
-        age: number
-        address: string
-        stars: number
-        rating: number
+        # User profile data - slow changing
+        - {tag: id, dataType: string, phase: slow}
+        - {tag: name, dataType: string, phase: slow}
+        - {tag: age, dataType: number, phase: slow}
+        - {tag: address, dataType: string, phase: slow}
+        # User ratings - fast changing
+        - {tag: stars, dataType: number, phase: fast}
+        - {tag: rating, dataType: number, phase: fast}
     </script>
   </head>
   <body>
@@ -84,18 +189,31 @@ For headless components, create a Jay Contract file (`my-contract.jay-contract`)
 ```yaml
 name: my-contract
 tags:
+  # User profile data - slow changing
   - tag: id
     dataType: string
+    phase: slow
   - tag: name
     dataType: string
+    phase: slow
   - tag: age
     dataType: number
+    phase: slow
   - tag: address
     dataType: string
+    phase: slow
+  # User ratings - fast changing
   - tag: stars
     dataType: number
+    phase: fast
   - tag: rating
     dataType: number
+    phase: fast
 ```
 ### 2. Generate Definition Files
@@ -106,6 +224,47 @@ Run the Jay CLI to generate TypeScript definition files from your Jay HTML or co
 jay-cli definitions <path to your sources>
 ```
+This will generate a `.d.ts` file with:
+- **Full ViewState**: All properties from your contract
+- **Phase-specific ViewStates**: Separate types for `Slow`, `Fast`, and `Interactive` phases
+- **Contract type**: A `JayContract` type that includes all ViewState types
+**Generated Types Example** (`my-component.jay-html.d.ts`):
+```typescript
+import { JayContract } from '@jay-framework/fullstack-component';
+// Full ViewState - all properties
+export interface MyComponentViewState {
+  id: string;
+  name: string;
+  age: number;
+  address: string;
+  stars: number;
+  rating: number;
+}
+export interface MyComponentElementRefs {}
+// Phase-specific ViewStates (automatically generated)
+export type MyComponentSlowViewState = Pick<
+  MyComponentViewState,
+  'id' | 'name' | 'age' | 'address'
+>;
+export type MyComponentFastViewState = Pick<MyComponentViewState, 'stars' | 'rating'>;
+export type MyComponentInteractiveViewState = {};
+// Contract type with all ViewState types
+export type MyComponentContract = JayContract<
+  MyComponentViewState,
+  MyComponentElementRefs,
+  MyComponentSlowViewState,
+  MyComponentFastViewState,
+  MyComponentInteractiveViewState
+>;
+```
 ### 3. Build Your Full-Stack Component
 ```typescript
@@ -258,16 +417,24 @@ After props, the function receives the services declared using `withServices`.
 The function should return one of:
-- `PartialRender<ViewState, CarryForward>` - for partial rendering
+- `PartialRender<SlowViewState, CarryForward>` - for partial rendering
 - `ServerError5xx` - for server errors
 - `Redirect3xx` - for semi-static redirects
+**Type Safety:** TypeScript automatically validates that `partialRender` only receives properties from `SlowViewState` (as defined by `phase: slow` in your contract).
 ```typescript
 makeJayStackComponent<MyComponentContract>()
   .withServices(DATABASE_SERVICE)
   .withSlowlyRender(async (props, database: Database) => {
     const data = await database.getData();
-    return partialRender({ someKey: data.value }, { carryForwardKey: data.id });
+    return partialRender(
+      {
+        productName: data.name, // ✅ OK if phase: slow
+        // price: data.price,      // ❌ TypeScript error if phase: fast
+      },
+      { carryForwardKey: data.id },
+    );
   });
 ```
@@ -284,17 +451,26 @@ After that, the function receives the services declared using `withServices`.
 The function should return one of:
-- `PartialRender<ViewState, CarryForward>` - for partial rendering
+- `PartialRender<FastViewState, CarryForward>` - for partial rendering
 - `ServerError5xx` - for server errors
 - `ClientError4xx` - for client errors
 - `Redirect3xx` - for dynamic redirects
+**Type Safety:** TypeScript automatically validates that `partialRender` only receives properties from `FastViewState` (as defined by `phase: fast` in your contract).
 ```typescript
 makeJayStackComponent<MyComponentContract>()
   .withServices(INVENTORY_SERVICE)
   .withFastRender(async (props, carryForward, inventory: InventoryService) => {
     const status = await inventory.getStatus(carryForward.productId);
-    return partialRender({ inStock: status.available > 0 }, { carryForwardKey: 'data' });
+    return partialRender(
+      {
+        inStock: status.available > 0, // ✅ OK if phase: fast
+        price: 29.99, // ✅ OK if phase: fast
+        // productName: 'Widget',        // ❌ TypeScript error if phase: slow
+      },
+      { carryForwardKey: 'data' },
+    );
   });
 ```
@@ -357,6 +533,507 @@ Creates a redirect response.
 return redirect3xx(301, 'http://some.domain.com');
 ```
+## RenderPipeline - Functional Composition API
+The `RenderPipeline` class provides a functional programming approach to building render results with automatic error propagation and type-safe chaining.
+### Why Use RenderPipeline?
+Traditional render functions require manual error handling:
+```typescript
+// Traditional approach - verbose error handling
+async function renderSlowlyChanging(props) {
+  try {
+    const product = await getProductBySlug(props.slug);
+    if (!product) return notFound();
+    return partialRender({ name: product.name }, { productId: product.id });
+  } catch (error) {
+    return serverError5xx(503);
+  }
+}
+```
+With `RenderPipeline`, errors propagate automatically and you get clean, chainable code:
+```typescript
+// RenderPipeline approach - clean and composable
+async function renderSlowlyChanging(props) {
+  const Pipeline = RenderPipeline.for<ProductSlowVS, ProductCF>();
+  return Pipeline.try(() => getProductBySlug(props.slug))
+    .recover((err) => Pipeline.serverError(503, 'Database unavailable'))
+    .map((product) => (product ? product : Pipeline.notFound('Product not found')))
+    .toPhaseOutput((product) => ({
+      viewState: { name: product.name },
+      carryForward: { productId: product.id },
+    }));
+}
+```
+### Key Features
+- **Type-safe from start**: Declare target `ViewState` and `CarryForward` types upfront
+- **Unified `map()`**: Handles sync values, async values, and conditional errors
+- **Automatic error propagation**: Errors pass through the chain untouched
+- **Single async point**: Only `toPhaseOutput()` is async - all `map()` calls are sync
+- **Clean error recovery**: Handle errors at any point with `recover()`
+### Basic Usage
+```typescript
+import { RenderPipeline } from '@jay-framework/fullstack-component';
+// 1. Create a typed pipeline factory
+const Pipeline = RenderPipeline.for<MyViewState, MyCarryForward>();
+// 2. Start the pipeline
+Pipeline.ok(value)                    // Start with a value
+Pipeline.try(() => fetchData())       // Start with a function (catches errors)
+Pipeline.notFound('Not found')        // Start with an error
+// 3. Transform with map()
+pipeline
+    .map(x => x * 2)                           // Sync transformation
+    .map(async x => fetchDetails(x))           // Async transformation
+    .map(x => x.valid ? x : Pipeline.notFound()) // Conditional error
+// 4. Handle errors with recover()
+pipeline.recover(err => Pipeline.ok({ fallback: true }))
+// 5. Produce final output with toPhaseOutput()
+pipeline.toPhaseOutput(data => ({
+    viewState: { ... },
+    carryForward: { ... }
+}))
+```
+### Complete Example
+```typescript
+import { RenderPipeline, SlowlyRenderResult } from '@jay-framework/fullstack-component';
+interface ProductViewState {
+  name: string;
+  price: number;
+}
+interface ProductCarryForward {
+  productId: string;
+  inventoryItemId: string;
+}
+async function renderSlowlyChanging(
+  props: PageProps & { slug: string },
+): Promise<SlowlyRenderResult<ProductViewState, ProductCarryForward>> {
+  const Pipeline = RenderPipeline.for<ProductViewState, ProductCarryForward>();
+  return Pipeline.try(() => getProductBySlug(props.slug))
+    .recover((err) => Pipeline.serverError(503, 'Database unavailable'))
+    .map((product) =>
+      product ? product : Pipeline.notFound('Product not found', { slug: props.slug }),
+    )
+    .map(async (product) => {
+      // Chain additional async operations
+      const pricing = await getPricing(product.id);
+      return { ...product, pricing };
+    })
+    .toPhaseOutput((data) => ({
+      viewState: {
+        name: data.name,
+        price: data.pricing.amount,
+      },
+      carryForward: {
+        productId: data.id,
+        inventoryItemId: data.inventoryItemId,
+      },
+    }));
+}
+```
+### API Reference
+#### `RenderPipeline.for<ViewState, CarryForward>()`
+Creates a typed pipeline factory. Returns an object with entry point methods:
+```typescript
+const Pipeline = RenderPipeline.for<MyViewState, MyCarryForward>();
+Pipeline.ok(value); // Start with success value
+Pipeline.try(fn); // Start with function (catches errors)
+Pipeline.from(outcome); // Start from existing RenderOutcome
+Pipeline.notFound(msg, details); // Start with 404 error
+Pipeline.badRequest(msg); // Start with 400 error
+Pipeline.unauthorized(msg); // Start with 401 error
+Pipeline.forbidden(msg); // Start with 403 error
+Pipeline.serverError(status, msg); // Start with 5xx error
+Pipeline.clientError(status, msg); // Start with 4xx error
+Pipeline.redirect(status, url); // Start with redirect
+```
+#### `pipeline.map(fn)`
+Transforms the working value. Always returns `RenderPipeline` (sync).
+The function can return:
+- `U` - Plain value (sync transformation)
+- `Promise<U>` - Async value (resolved at `toPhaseOutput`)
+- `RenderPipeline<U>` - For conditional errors/branching
+```typescript
+pipeline
+  .map((x) => x * 2) // Sync
+  .map(async (x) => fetchData(x)) // Async
+  .map((x) => (x.valid ? x : Pipeline.notFound())); // Conditional
+```
+#### `pipeline.recover(fn)`
+Handles errors, potentially recovering to success:
+```typescript
+pipeline.recover((error) => {
+  console.error('Error:', error.message);
+  return Pipeline.ok({ fallback: true });
+});
+```
+#### `pipeline.toPhaseOutput(fn)`
+Converts to final `RenderOutcome`. This is the **only async method**.
+Resolves all pending promises and applies the final mapping to produce `ViewState` and `CarryForward`:
+```typescript
+await pipeline.toPhaseOutput((data) => ({
+  viewState: { name: data.name, value: data.value },
+  carryForward: { id: data.id },
+}));
+```
+#### Utility Methods
+```typescript
+pipeline.isOk(); // true if success state
+pipeline.isError(); // true if error state
+```
+### Error Types with Messages
+All error types now support optional `message`, `code`, and `details`:
+```typescript
+Pipeline.notFound('Product not found', { slug: 'my-product' });
+Pipeline.serverError(503, 'Database unavailable', { retryAfter: 30 });
+```
+The error types are:
+- `ServerError5xx` - Server errors (5xx status codes)
+- `ClientError4xx` - Client errors (4xx status codes)
+- `Redirect3xx` - Redirects (3xx status codes)
+## Complete Example with Phase Validation
+Here's a complete example showing how phase annotations in your contract provide compile-time type safety:
+### 1. Define Contract with Phases
+**`user-profile.jay-html`**:
+```html
+<html>
+  <head>
+    <script type="application/yaml-jay">
+      data:
+        # Static user info - rendered at build time
+        - {tag: userId, dataType: string, phase: slow}
+        - {tag: username, dataType: string, phase: slow}
+        - {tag: bio, dataType: string, phase: slow}
+        # Dynamic activity - rendered per request
+        - {tag: lastSeen, dataType: string, phase: fast}
+        - {tag: isOnline, dataType: boolean, phase: fast}
+        - {tag: followerCount, dataType: number, phase: fast}
+    </script>
+  </head>
+  <body>
+    <div>
+      <h1>{username}</h1>
+      <p>{bio}</p>
+      <p>Followers: {followerCount}</p>
+      <span>{isOnline ? 'Online' : 'Last seen: ' + lastSeen}</span>
+    </div>
+  </body>
+</html>
+```
+### 2. Generated Types
+**`user-profile.jay-html.d.ts`** (auto-generated):
+```typescript
+export interface UserProfileViewState {
+  userId: string;
+  username: string;
+  bio: string;
+  lastSeen: string;
+  isOnline: boolean;
+  followerCount: number;
+}
+export interface UserProfileElementRefs {}
+// Phase-specific types - automatically generated
+export type UserProfileSlowViewState = Pick<UserProfileViewState, 'userId' | 'username' | 'bio'>;
+export type UserProfileFastViewState = Pick<
+  UserProfileViewState,
+  'lastSeen' | 'isOnline' | 'followerCount'
+>;
+export type UserProfileInteractiveViewState = {};
+export type UserProfileContract = JayContract<
+  UserProfileViewState,
+  UserProfileElementRefs,
+  UserProfileSlowViewState,
+  UserProfileFastViewState,
+  UserProfileInteractiveViewState
+>;
+```
+### 3. Implement with Type Safety
+```typescript
+import {
+  makeJayStackComponent,
+  partialRender,
+  createJayService,
+} from '@jay-framework/fullstack-component';
+import { UserProfileContract } from './user-profile.jay-html';
+interface UserDatabase {
+  getUser(id: string): Promise<{ id: string; name: string; bio: string }>;
+}
+const USER_DB = createJayService<UserDatabase>('UserDB');
+interface ActivityService {
+  getUserActivity(id: string): Promise<{ lastSeen: string; isOnline: boolean; followers: number }>;
+}
+const ACTIVITY_SERVICE = createJayService<ActivityService>('Activity');
+export const userProfile = makeJayStackComponent<UserProfileContract>()
+  .withProps()
+  .withServices(USER_DB, ACTIVITY_SERVICE)
+  .withSlowlyRender(async (props, userDb) => {
+    // ✅ TypeScript knows only slow properties are allowed
+    const user = await userDb.getUser('123');
+    return partialRender(
+      {
+        userId: user.id,
+        username: user.name,
+        bio: user.bio,
+        // followerCount: 100,  // ❌ TypeScript Error: Property 'followerCount'
+        //    does not exist in type 'UserProfileSlowViewState'
+      },
+      { userId: user.id },
+    );
+  })
+  .withFastRender(async (props, carryForward, userDb, activityService) => {
+    // ✅ TypeScript knows only fast properties are allowed
+    const activity = await activityService.getUserActivity(carryForward.userId);
+    return partialRender(
+      {
+        lastSeen: activity.lastSeen,
+        isOnline: activity.isOnline,
+        followerCount: activity.followers,
+        // username: 'John',     // ❌ TypeScript Error: Property 'username'
+        //    does not exist in type 'UserProfileFastViewState'
+      },
+      {},
+    );
+  })
+  .withInteractive((props, refs) => {
+    return {
+      render: () => ({}),
+    };
+  });
+```
+**Key Benefits:**
+- 🔒 **Compile-time guarantees**: TypeScript prevents phase violations before deployment
+- 📊 **Clear separation**: Slow (static) data is visually separated from fast (dynamic) data
+- ⚡ **Optimal performance**: Framework can cache slow data aggressively
+- 🧹 **No boilerplate**: No manual type annotations needed in render functions
+## Server Actions
+Server actions enable client-side code to call server-side functions after the initial page load. They provide type-safe RPC communication between interactive components and the server.
+### Action Builder API
+```typescript
+import { makeJayAction, makeJayQuery, ActionError } from '@jay-framework/fullstack-component';
+```
+| Builder         | Default Method | Use Case                                            |
+| --------------- | -------------- | --------------------------------------------------- |
+| `makeJayAction` | POST           | Mutations: add to cart, submit form, update profile |
+| `makeJayQuery`  | GET            | Reads: search, get details, list items (cacheable)  |
+### Defining Actions
+```typescript
+// src/actions/cart.actions.ts
+import { makeJayAction, ActionError } from '@jay-framework/fullstack-component';
+import { CART_SERVICE, INVENTORY_SERVICE } from '../services';
+export const addToCart = makeJayAction('cart.addToCart')
+  .withServices(CART_SERVICE, INVENTORY_SERVICE)
+  .withHandler(async (input: { productId: string; quantity: number }, cartService, inventory) => {
+    const available = await inventory.getAvailableUnits(input.productId);
+    if (available < input.quantity) {
+      throw new ActionError('NOT_AVAILABLE', `Only ${available} units available`);
+    }
+    const cart = await cartService.addItem(input.productId, input.quantity);
+    return { cartItemCount: cart.items.length };
+  });
+```
+### Defining Queries (GET with Caching)
+```typescript
+// src/actions/search.actions.ts
+import { makeJayQuery } from '@jay-framework/fullstack-component';
+import { PRODUCTS_DATABASE_SERVICE } from '../services';
+export const searchProducts = makeJayQuery('products.search')
+  .withServices(PRODUCTS_DATABASE_SERVICE)
+  .withCaching({ maxAge: 60, staleWhileRevalidate: 120 })
+  .withHandler(async (input: { query: string; page?: number }, productsDb) => {
+    const results = await productsDb.search(input.query, {
+      page: input.page ?? 1,
+      limit: 20,
+    });
+    return {
+      products: results.items,
+      totalCount: results.total,
+      hasMore: results.hasMore,
+    };
+  });
+```
+### Builder Methods
+#### `.withServices(...serviceMarkers)`
+Inject server-side services (same pattern as `makeJayStackComponent`):
+```typescript
+export const addToCart = makeJayAction('cart.addToCart')
+  .withServices(CART_SERVICE, INVENTORY_SERVICE)
+  .withHandler(async (input, cartService, inventory) => {
+    // Services are injected after input
+  });
+```
+#### `.withMethod(method)`
+Override the default HTTP method (`GET`, `POST`, `PUT`, `PATCH`, `DELETE`):
+```typescript
+export const deleteProduct = makeJayAction('products.delete')
+  .withMethod('DELETE')
+  .withHandler(async (input: { id: string }) => {
+    /* ... */
+  });
+```
+#### `.withCaching(options)`
+Enable caching for GET requests:
+```typescript
+export const getCategories = makeJayQuery('products.categories')
+  .withCaching({ maxAge: 300, staleWhileRevalidate: 600 })
+  .withHandler(async () => {
+    /* ... */
+  });
+```
+### Error Handling
+Use `ActionError` for business logic errors (returns 422 status):
+```typescript
+import { ActionError } from '@jay-framework/fullstack-component';
+export const addToCart = makeJayAction('cart.addToCart').withHandler(
+  async (input, cartService, inventory) => {
+    const available = await inventory.check(input.productId);
+    if (available < input.quantity) {
+      throw new ActionError('NOT_AVAILABLE', 'Product is out of stock');
+    }
+    return { success: true };
+  },
+);
+```
+### Client Usage
+Actions are imported and called like regular async functions:
+```typescript
+// pages/products/[slug]/page.ts
+import { addToCart } from '../../../actions/cart.actions';
+import { ActionError } from '@jay-framework/fullstack-component';
+function ProductPageInteractive(props, refs, viewState, carryForward) {
+  refs.addToCart.onclick(async () => {
+    try {
+      const result = await addToCart({
+        productId: carryForward.productId,
+        quantity: 1,
+      });
+      // Success! result.cartItemCount is available
+    } catch (e) {
+      if (e instanceof ActionError) {
+        showNotification(e.message); // "Product is out of stock"
+      }
+    }
+  });
+  return { render: () => ({}) };
+}
+```
+### Auto-Registration
+Actions in `src/actions/*.actions.ts` are automatically discovered and registered on server startup. No manual registration needed.
+### Type Inference
+Input and output types are inferred from the handler function:
+```typescript
+export const addToCart = makeJayAction('cart.addToCart').withHandler(
+  async (
+    input: { productId: string; quantity: number }, // ← Input type
+  ) => {
+    return { cartItemCount: 5 }; // ← Output type
+  },
+);
+// Client gets full type safety
+const result = await addToCart({ productId: '123', quantity: 1 });
+//    ^? { cartItemCount: number }
+```
 ## Advanced Examples
 ### A Product Page with URL Parameters