feat: pd separate bundle

Author: mjuraschik

packages/commerce-sdk-react/package.json

@@ -14,10 +14,28 @@
   "author": "cc-pwa-kit@salesforce.com",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./page-designer": {
+      "types": "./dist/page-designer/index.d.ts",
+      "import": "./dist/page-designer/index.js",
+      "require": "./dist/page-designer/index.js",
+      "default": "./dist/page-designer/index.js"
+    },
+    "./hooks/*": "./dist/hooks/*",
+    "./components": "./dist/components/index.js",
+    "./package.json": "./package.json"
+  },
   "files": [
     "CHANGELOG.md",
     "LICENSE",
-    "+(auth|components|hooks|scripts)/**/!(*.test*).{ts,js}",
+    "+(auth|components|hooks|scripts|page-designer)/**/!(*.test*).{ts,js}",
     "*.{js,d.ts}",
     "!*.test*.{js,d.ts}",
     "!test*.*",
@@ -93,8 +111,5 @@
       "react": "^18.2.0",
       "react-dom": "^18.2.0"
     }
-  },
-  "publishConfig": {
-    "directory": "dist"
   }
 }

packages/commerce-sdk-react/src/components/ShopperExperience/Component/index.tsx

@@ -4,7 +4,12 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-import React, {type ReactElement, memo, Suspense} from 'react'
+import React, {
+    type ReactElement,
+    memo,
+    Suspense,
+    type ComponentType as ReactComponentType
+} from 'react'
 import {registry} from '../registry'
 import type {ComponentDesignMetadata} from '@salesforce/storefront-next-runtime/design/react'
 import type {ComponentType} from '../types'
@@ -15,6 +20,18 @@ export interface ComponentProps {
     regionId: string
 }
 
+/**
+ * Props that are passed to dynamic components loaded from the registry.
+ * This includes design metadata, component data, and region information.
+ */
+interface DynamicComponentProps extends Record<string, unknown> {
+    designMetadata: ComponentDesignMetadata
+    component: ComponentType
+    regions?: ComponentType['regions']
+    className?: string
+    regionId: string
+}
+
 export const Component = memo(function Component({
     component,
     className,
@@ -41,8 +58,11 @@ export const Component = memo(function Component({
         id: component.id
     }
 
+    // Cast DynamicComponent to accept our props since registry returns unknown type
+    const ComponentToRender = DynamicComponent as ReactComponentType<DynamicComponentProps>
+
     const componentElement = (
-        <DynamicComponent
+        <ComponentToRender
             {...(component.data ?? {})}
             designMetadata={designMetadata}
             component={component}
@@ -56,7 +76,7 @@ export const Component = memo(function Component({
     const isClient = typeof window !== 'undefined'
 
     if (!isClient) {
-        return componentElement
+        return <div>{componentElement}</div>
     }
 
     return (

packages/commerce-sdk-react/src/components/index.ts

@@ -4,5 +4,15 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-export * from './ShopperExperience'
-export * from './StorefrontPreview'
+
+/**
+ * Components Module
+ *
+ * This module exports general-purpose components for commerce applications.
+ *
+ * StorefrontPreview: A wrapper component for Business Manager preview integration.
+ * Import from this path: import { StorefrontPreview } from '@salesforce/commerce-sdk-react/components'
+ */
+
+// StorefrontPreview - general preview wrapper component
+export {StorefrontPreview} from './StorefrontPreview'

packages/commerce-sdk-react/src/hooks/index.ts

@@ -7,7 +7,6 @@
 export * from './ShopperBaskets'
 export * from './ShopperContexts'
 export * from './ShopperCustomers'
-export * from './ShopperExperience'
 export * from './ShopperGiftCertificates'
 export * from './ShopperLogin'
 export * from './ShopperOrders'
@@ -29,4 +28,3 @@ export {default as useConfig} from './useConfig'
 export {default as useDNT} from './useDNT'
 export {useCustomQuery} from './useQuery'
 export {useCustomMutation} from './useMutation'
-export {useGlobalAnchorBlock} from './useGlobalAnchorBlock'

packages/commerce-sdk-react/src/index.ts

@@ -7,6 +7,5 @@
 import CommerceApiProvider from './provider'
 export * from './hooks/types'
 export * from './hooks'
-export {registry} from './components'
 
 export {CommerceApiProvider}

packages/commerce-sdk-react/src/page-designer/index.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2026, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+/**
+ * Page Designer Integration Module
+ *
+ * This module provides components, hooks, and utilities for integrating
+ * Salesforce Page Designer with React applications. Import from this
+ * subpath only if you're using Page Designer features.
+ *
+ * @example
+ * ```typescript
+ * // Import Page Designer features
+ * import {
+ *   PageDesignerProvider,
+ *   usePageDesignerMode,
+ *   Page,
+ *   usePages
+ * } from '@salesforce/commerce-sdk-react/page-designer'
+ * ```
+ *
+ * @module page-designer
+ */
+
+// Re-export ShopperExperience components (Page Designer rendering)
+export * from '../components/ShopperExperience'
+
+// Re-export Page Designer hooks
+export * from '../hooks/ShopperExperience'
+export {useGlobalAnchorBlock} from '../hooks/useGlobalAnchorBlock'
+
+// Re-export the registry for component registration
+export {registry} from '../components/ShopperExperience'

packages/template-retail-react-app/app/components/_app/index.jsx

@@ -69,7 +69,7 @@ import {useUpdateShopperContext} from '@salesforce/retail-react-app/app/hooks/us
 // HOCs
 import {withCommerceSdkReact} from '@salesforce/retail-react-app/app/components/with-commerce-sdk-react/with-commerce-sdk-react'
 
-import {PageDesignerProvider} from '@salesforce/commerce-sdk-react/components'
+import {PageDesignerProvider} from '@salesforce/commerce-sdk-react/page-designer'
 import PageDesignerInit from '@salesforce/retail-react-app/app/components/page-designer-init'
 
 // Localization

packages/template-retail-react-app/app/components/page-designer-init/index.jsx

@@ -7,8 +7,10 @@
 
 import React, {useEffect} from 'react'
 import {Prompt} from 'react-router-dom'
-import {usePageDesignerMode} from '@salesforce/commerce-sdk-react/components'
-import {useGlobalAnchorBlock} from '@salesforce/commerce-sdk-react'
+import {
+    usePageDesignerMode,
+    useGlobalAnchorBlock
+} from '@salesforce/commerce-sdk-react/page-designer'
 
 /**
  * PageDesignerInit - Component that handles Page Designer initialization

packages/template-retail-react-app/app/page-designer/index.js

@@ -5,6 +5,6 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import {Page, pageType} from '@salesforce/commerce-sdk-react/components'
+import {Page, pageType} from '@salesforce/commerce-sdk-react/page-designer'
 
 export {Page, pageType}

packages/template-retail-react-app/app/page-designer/layouts/carousel/index.jsx

@@ -15,7 +15,7 @@ import {
     useBreakpoint,
     useBreakpointValue
 } from '@salesforce/retail-react-app/app/components/shared/ui'
-import {Component, regionPropType} from '@salesforce/commerce-sdk-react/components'
+import {Component, regionPropType} from '@salesforce/commerce-sdk-react/page-designer'
 import {ChevronLeftIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
 import {useEffect} from 'react'
 import {useIntl} from 'react-intl'