@liquidcommerce/elements-sdk 2.6.0-beta.42 → 2.6.0-beta.43

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 (67) hide show
  1. package/README.md +1 -1
  2. package/dist/index.checkout.esm.js +6743 -6733
  3. package/dist/index.esm.js +11214 -11143
  4. package/dist/ssr-stub.checkout.esm.js +18 -0
  5. package/dist/ssr-stub.esm.js +269 -0
  6. package/dist/types/auto-initialize/shared-utils.d.ts +3 -1
  7. package/dist/types/clients/base.d.ts +4 -1
  8. package/dist/types/clients/builder.d.ts +2 -1
  9. package/dist/types/clients/checkout.d.ts +2 -10
  10. package/dist/types/clients/main.d.ts +2 -1
  11. package/dist/types/core/client/client-action.service.d.ts +1 -1
  12. package/dist/types/core/client/client-config.service.d.ts +1 -1
  13. package/dist/types/core/pubsub/pubsub.service.d.ts +0 -2
  14. package/dist/types/core/singleton-manager.service.d.ts +1 -1
  15. package/dist/types/index.checkout.d.ts +3 -2
  16. package/dist/types/index.checkout.umd.d.ts +1 -1
  17. package/dist/types/index.d.ts +4 -1
  18. package/dist/types/interfaces/client.interface.d.ts +62 -0
  19. package/dist/types/interfaces/component.interface.d.ts +7 -0
  20. package/dist/types/interfaces/config.interface.d.ts +45 -0
  21. package/dist/types/interfaces/configs/address.interface.d.ts +1 -1
  22. package/dist/types/interfaces/configs/cart.interface.d.ts +1 -1
  23. package/dist/types/interfaces/configs/checkout.interface.d.ts +1 -1
  24. package/dist/types/interfaces/configs/global.interface.d.ts +1 -1
  25. package/dist/types/interfaces/configs/product-list.interface.d.ts +1 -1
  26. package/dist/types/interfaces/configs/product.interface.d.ts +1 -1
  27. package/dist/types/interfaces/injection.interface.d.ts +44 -0
  28. package/dist/types/modules/product/components/product-image-carousel.component.d.ts +3 -0
  29. package/dist/types/modules/product/components/product-retailers-carousel.component.d.ts +3 -0
  30. package/dist/types/modules/product-list/components/product-list-filters.component.d.ts +3 -1
  31. package/dist/types/modules/product-list/product-list.commands.d.ts +1 -1
  32. package/dist/types/modules/product-list/product-list.component.d.ts +1 -1
  33. package/dist/types/ssr/stub.checkout.d.ts +6 -0
  34. package/dist/types/ssr/stub.d.ts +10 -0
  35. package/docs/v1/README.md +2 -2
  36. package/docs/v1/api/actions/address-actions.md +11 -11
  37. package/docs/v1/api/actions/cart-actions.md +13 -13
  38. package/docs/v1/api/actions/checkout-actions.md +23 -23
  39. package/docs/v1/api/actions/product-actions.md +6 -6
  40. package/docs/v1/api/client.md +11 -11
  41. package/docs/v1/api/ui-helpers.md +11 -11
  42. package/docs/v1/examples/advanced-patterns.md +1 -1
  43. package/docs/v1/examples/checkout-flow.md +1 -1
  44. package/docs/v1/getting-started/concepts.md +7 -7
  45. package/docs/v1/getting-started/installation.md +2 -2
  46. package/docs/v1/getting-started/quick-start.md +3 -3
  47. package/docs/v1/guides/address-component.md +11 -11
  48. package/docs/v1/guides/best-practices.md +14 -14
  49. package/docs/v1/guides/cart-component.md +23 -23
  50. package/docs/v1/guides/checkout-component.md +24 -24
  51. package/docs/v1/guides/product-component.md +5 -5
  52. package/docs/v1/integration/nextjs.md +11 -2
  53. package/docs/v1/integration/react.md +3 -3
  54. package/docs/v1/integration/vanilla-js.md +1 -1
  55. package/docs/v1/integration/vue.md +24 -0
  56. package/docs/v1/reference/error-handling.md +2 -2
  57. package/docs/v1/reference/troubleshooting.md +10 -2
  58. package/package.json +13 -9
  59. package/dist/types/interfaces/core.interface.d.ts +0 -140
  60. package/docs/gitbook/actions.md +0 -964
  61. package/docs/gitbook/address.md +0 -48
  62. package/docs/gitbook/cart.md +0 -65
  63. package/docs/gitbook/checkout.md +0 -131
  64. package/docs/gitbook/events.md +0 -1765
  65. package/docs/gitbook/overview.md +0 -166
  66. package/docs/gitbook/product.md +0 -64
  67. package/docs/gitbook/quick-start-guide.md +0 -393
@@ -212,7 +212,7 @@ Programmatically interact with products:
212
212
  Retrieve product information:
213
213
 
214
214
  ```javascript
215
- const productData = window.elements.actions.product.getDetails('00619947000020');
215
+ const productData = window.LiquidCommerce.elements.actions.product.getDetails('00619947000020');
216
216
 
217
217
  console.log(productData);
218
218
  // {
@@ -388,10 +388,10 @@ Set address programmatically to skip prompting:
388
388
 
389
389
  ```javascript
390
390
  // Using Google Places ID
391
- await window.elements.actions.address.setAddressByPlacesId('ChIJ...');
391
+ await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId('ChIJ...');
392
392
 
393
393
  // Or manually
394
- await window.elements.actions.address.setAddressManually(
394
+ await window.LiquidCommerce.elements.actions.address.setAddressManually(
395
395
  {
396
396
  one: '123 Main St',
397
397
  two: 'Apt 4',
@@ -423,7 +423,7 @@ Presale products are handled automatically; no special configuration needed.
423
423
  Force a product to reload and rerender:
424
424
 
425
425
  ```javascript
426
- const components = window.elements.getInjectedComponents();
426
+ const components = window.LiquidCommerce.elements.getInjectedComponents();
427
427
  const productComponent = components.get('product-1');
428
428
 
429
429
  if (productComponent) {
@@ -656,7 +656,7 @@ document.querySelectorAll('.product-placeholder').forEach(el => {
656
656
  1. Check browser console for errors
657
657
  2. Verify container ID exists in the DOM
658
658
  3. Confirm product identifier is valid
659
- 4. Check that SDK is initialized (`window.elements` exists)
659
+ 4. Check that SDK is initialized (`window.LiquidCommerce.elements` exists)
660
660
 
661
661
  ### Wrong Pricing
662
662
 
@@ -1,6 +1,6 @@
1
1
  # Next.js Integration
2
2
 
3
- Use a client component (App Router) or `useEffect` in a client-only page (Pages Router). Initialize the SDK on the client.
3
+ The SDK is SSR-safe out of the box. When imported on the server, a lightweight stub is resolved automatically via the `node` export condition no dynamic imports or special configuration required. The real SDK activates on the client.
4
4
 
5
5
  ## App Router (Client Component)
6
6
 
@@ -48,9 +48,18 @@ export default function ProductPage() {
48
48
  }
49
49
  ```
50
50
 
51
+ ## SSR Behavior
52
+
53
+ When the module is evaluated during SSR (server components, `getServerSideProps`, middleware, etc.):
54
+
55
+ - All **types and enums** are available — TypeScript works identically.
56
+ - `Elements()` and `ElementsBuilder()` return `null` and log a warning.
57
+ - No browser APIs (`window`, `document`, `navigator`) are accessed.
58
+
59
+ You do **not** need `next/dynamic`, conditional `import()`, or `typeof window` guards in your own code.
60
+
51
61
  ## Notes
52
62
 
53
- - Do not initialize server-side (Window/Document required).
54
63
  - For ad blocker mitigation, configure the proxy (see [Proxy Setup](./proxy-setup.md)).
55
64
 
56
65
  ## Related Docs
@@ -44,8 +44,8 @@ import { useEffect } from 'react';
44
44
 
45
45
  export default function CartButton() {
46
46
  useEffect(() => {
47
- if (!window.elements) return;
48
- window.elements.ui.cartButton('header-cart', true);
47
+ if (!window.LiquidCommerce.elements) return;
48
+ window.LiquidCommerce.elements.ui.cartButton('header-cart', true);
49
49
  }, []);
50
50
 
51
51
  return <div id="header-cart"></div>;
@@ -54,7 +54,7 @@ export default function CartButton() {
54
54
 
55
55
  ## Notes
56
56
 
57
- - Initialize only on the client; the SDK uses browser APIs.
57
+ - The SDK is SSR-safe — importing it on the server resolves a no-op stub automatically. Initialize in `useEffect` to get the real client.
58
58
  - For multiple products, call `injectProductElement` with multiple entries.
59
59
 
60
60
  ## Related Docs
@@ -51,7 +51,7 @@ Use the CDN build for the fastest setup, or use NPM if you have a build step.
51
51
 
52
52
  <script>
53
53
  window.addEventListener('lce:actions.client_ready', async () => {
54
- const client = window.elements;
54
+ const client = window.LiquidCommerce.elements;
55
55
  await client.injectProductElement([
56
56
  { containerId: 'product', identifier: '00619947000020' }
57
57
  ]);
@@ -28,6 +28,30 @@ onMounted(async () => {
28
28
  </script>
29
29
  ```
30
30
 
31
+ ## Nuxt 3
32
+
33
+ The SDK is SSR-safe out of the box. When Nuxt evaluates the import on the server, a lightweight stub is resolved automatically — no `<ClientOnly>`, `process.client` checks, or dynamic imports required.
34
+
35
+ ```vue
36
+ <template>
37
+ <div id="product"></div>
38
+ </template>
39
+
40
+ <script setup>
41
+ import { onMounted } from 'vue';
42
+ import { Elements } from '@liquidcommerce/elements-sdk';
43
+
44
+ onMounted(async () => {
45
+ const client = await Elements('YOUR_API_KEY', { env: 'production' });
46
+ await client.injectProductElement([
47
+ { containerId: 'product', identifier: '00619947000020' }
48
+ ]);
49
+ });
50
+ </script>
51
+ ```
52
+
53
+ During SSR, `Elements()` returns `null` and logs a warning. All types and enums remain available for TypeScript.
54
+
31
55
  ## Related Docs
32
56
 
33
57
  - [Product Component](../guides/product-component.md)
@@ -19,7 +19,7 @@ class SDKError extends Error {
19
19
 
20
20
  ```javascript
21
21
  try {
22
- await window.elements.injectProductElement([
22
+ await window.LiquidCommerce.elements.injectProductElement([
23
23
  { containerId: 'product', identifier: 'invalid_id' }
24
24
  ]);
25
25
  } catch (error) {
@@ -34,7 +34,7 @@ try {
34
34
  The SDK catches and contains its own errors so your app keeps running:
35
35
 
36
36
  ```javascript
37
- window.elements.actions.cart.addProduct([/* invalid */]);
37
+ window.LiquidCommerce.elements.actions.cart.addProduct([/* invalid */]);
38
38
  console.log('App still working');
39
39
  ```
40
40
 
@@ -4,7 +4,7 @@ Common setup issues and how to resolve them.
4
4
 
5
5
  ## SDK Script Not Loading
6
6
 
7
- **Symptoms:** 404/CORS in Network tab, `window.elements` is undefined.
7
+ **Symptoms:** 404/CORS in Network tab, `window.LiquidCommerce.elements` is undefined.
8
8
 
9
9
  **Fixes:**
10
10
  - Verify the script URL and that the tag includes `data-liquid-commerce-elements`.
@@ -36,7 +36,7 @@ Common setup issues and how to resolve them.
36
36
  **Symptoms:** Add to cart works but cart stays closed.
37
37
 
38
38
  **Fixes:**
39
- - Ensure a cart button is configured or call `window.elements.actions.cart.openCart()`.
39
+ - Ensure a cart button is configured or call `window.LiquidCommerce.elements.actions.cart.openCart()`.
40
40
  - Check for JavaScript errors in the console.
41
41
 
42
42
  ## Checkout Issues
@@ -56,6 +56,14 @@ Common setup issues and how to resolve them.
56
56
  - Make sure the address is set and valid.
57
57
  - Listen for `lce:actions.address_failed` to surface errors.
58
58
 
59
+ ## SSR / Server-Side Rendering
60
+
61
+ **Symptoms:** Console warning "This SDK is designed for the browser. Calls made during SSR return null."
62
+
63
+ This is expected behavior. The SDK ships an SSR stub that is automatically resolved when bundled for Node.js (via the `node` export condition in `package.json`). The stub exports all types and enums for TypeScript compatibility and returns `null` from factory functions (`Elements`, `ElementsBuilder`, `ElementsCheckout`).
64
+
65
+ **No action required** — initialize the SDK in a client-only lifecycle hook (`useEffect`, `onMounted`, etc.) and the real client will activate in the browser.
66
+
59
67
  ## Related Docs
60
68
 
61
69
  - [Installation](../getting-started/installation.md)
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "LiquidCommerce Elements SDK",
4
4
  "license": "UNLICENSED",
5
5
  "author": "LiquidCommerce Team",
6
- "version": "2.6.0-beta.42",
6
+ "version": "2.6.0-beta.43",
7
7
  "homepage": "https://docs.liquidcommerce.co/elements-sdk",
8
8
  "repository": {
9
9
  "type": "git",
@@ -18,11 +18,15 @@
18
18
  "exports": {
19
19
  ".": {
20
20
  "types": "./dist/types/index.d.ts",
21
+ "node": "./dist/ssr-stub.esm.js",
22
+ "browser": "./dist/index.esm.js",
21
23
  "import": "./dist/index.esm.js",
22
24
  "default": "./dist/index.esm.js"
23
25
  },
24
26
  "./checkout": {
25
27
  "types": "./dist/types/index.checkout.d.ts",
28
+ "node": "./dist/ssr-stub.checkout.esm.js",
29
+ "browser": "./dist/index.checkout.esm.js",
26
30
  "import": "./dist/index.checkout.esm.js",
27
31
  "default": "./dist/index.checkout.esm.js"
28
32
  },
@@ -30,7 +34,7 @@
30
34
  },
31
35
  "files": [
32
36
  "dist",
33
- "docs",
37
+ "docs/v1",
34
38
  "README.md",
35
39
  "LICENSE"
36
40
  ],
@@ -77,9 +81,9 @@
77
81
  "embeddable commerce"
78
82
  ],
79
83
  "devDependencies": {
80
- "@biomejs/biome": "2.3.12",
81
- "@commitlint/cli": "^20.3.1",
82
- "@commitlint/config-conventional": "^20.3.1",
84
+ "@biomejs/biome": "2.3.13",
85
+ "@commitlint/cli": "^20.4.1",
86
+ "@commitlint/config-conventional": "^20.4.1",
83
87
  "@rollup/plugin-alias": "^6.0.0",
84
88
  "@rollup/plugin-commonjs": "^29.0.0",
85
89
  "@rollup/plugin-json": "^6.1.0",
@@ -89,18 +93,18 @@
89
93
  "@semantic-release/changelog": "^6.0.3",
90
94
  "@semantic-release/commit-analyzer": "^13.0.1",
91
95
  "@semantic-release/git": "^10.0.1",
92
- "@semantic-release/github": "^12.0.2",
96
+ "@semantic-release/github": "^12.0.3",
93
97
  "@semantic-release/npm": "^13.1.3",
94
98
  "@semantic-release/release-notes-generator": "^14.1.0",
95
99
  "@types/core-js": "^2.5.8",
96
- "@types/node": "^25.0.10",
100
+ "@types/node": "^25.2.0",
97
101
  "conventional-changelog-cli": "^5.0.0",
98
102
  "husky": "^9.1.7",
99
103
  "process": "^0.11.10",
100
- "rollup": "^4.56.0",
104
+ "rollup": "^4.57.1",
101
105
  "rollup-obfuscator": "^4.1.1",
102
106
  "rollup-plugin-typescript2": "^0.36.0",
103
- "semantic-release": "^25.0.2",
107
+ "semantic-release": "^25.0.3",
104
108
  "ts-node": "^10.9.2",
105
109
  "typescript": "^5.9.3"
106
110
  },
@@ -1,140 +0,0 @@
1
- import type { PRODUCT_LIST_FILTER_TYPES } from '@/constants';
2
- import type { IAddressActions } from '@/core/client/actions/client-address-action.service';
3
- import type { ICartActions } from '@/core/client/actions/client-cart-action.service';
4
- import type { ICheckoutActions } from '@/core/client/actions/client-checkout-action.service';
5
- import type { IProductActions } from '@/core/client/actions/client-product-action.service';
6
- import type { IClientConfigs } from '@/core/client/client-config.service';
7
- import type { ComponentType, DebugMode, ElementsEnv } from '@/enums';
8
- import type { IAddressOptions } from '@/modules/address/address.interface';
9
- import type { IPromoTicker, UpdateAddressComponent, UpdateCartComponent, UpdateCheckoutComponent, UpdateComponentGlobalConfigs, UpdateProductComponent } from './configs';
10
- export type DeepPartial<T> = {
11
- [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
12
- };
13
- export interface IElementsProxyConfig {
14
- baseUrl: string;
15
- headers?: Record<string, string>;
16
- }
17
- export interface ILiquidCommerceElementsDevelopmentConfig {
18
- customApiUrl?: string;
19
- paymentMethodId?: string;
20
- openShadowDom?: boolean;
21
- }
22
- export interface IClientCustomThemeConfig {
23
- global?: UpdateComponentGlobalConfigs;
24
- product?: UpdateProductComponent;
25
- address?: UpdateAddressComponent;
26
- cart?: UpdateCartComponent;
27
- checkout?: UpdateCheckoutComponent;
28
- }
29
- export interface ILiquidCommerceElementsCheckoutConfig {
30
- pageUrl: string;
31
- }
32
- export interface ILiquidCommerceElementsBaseConfig {
33
- env?: ElementsEnv;
34
- promoTicker?: IPromoTicker[];
35
- customTheme?: IClientCustomThemeConfig;
36
- debugMode?: DebugMode;
37
- checkout?: ILiquidCommerceElementsCheckoutConfig;
38
- }
39
- export interface ILiquidCommerceElementsBuilderConfig extends ILiquidCommerceElementsBaseConfig {
40
- }
41
- export interface ILiquidCommerceElementsConfig extends ILiquidCommerceElementsBaseConfig {
42
- proxy?: IElementsProxyConfig;
43
- development?: ILiquidCommerceElementsDevelopmentConfig;
44
- }
45
- export interface ILiquidCommerceElementsCheckoutClientConfig {
46
- env?: ElementsEnv;
47
- customTheme?: IClientCustomThemeConfig;
48
- debugMode?: DebugMode;
49
- checkout?: ILiquidCommerceElementsCheckoutConfig;
50
- proxy?: IElementsProxyConfig;
51
- development?: ILiquidCommerceElementsDevelopmentConfig;
52
- }
53
- export interface IInjectProductElement {
54
- containerId: string;
55
- identifier: string;
56
- }
57
- export type ProductListFilterType = (typeof PRODUCT_LIST_FILTER_TYPES)[keyof typeof PRODUCT_LIST_FILTER_TYPES];
58
- export interface IInjectProductListParams {
59
- containerId: string;
60
- rows?: number;
61
- columns?: number;
62
- filters?: ProductListFilterType[];
63
- productUrl?: string;
64
- }
65
- export interface IInjectProductListSearchParams {
66
- containerId: string;
67
- }
68
- export interface IInjectProductListFiltersParams {
69
- containerId: string;
70
- filters: ProductListFilterType[];
71
- }
72
- export interface IBuilderInjectElementParams {
73
- type: ComponentType;
74
- containerId: string;
75
- [key: string]: any;
76
- }
77
- export interface IInjectedComponent {
78
- getType(): ComponentType;
79
- getElement(): HTMLElement;
80
- rerender(): void;
81
- }
82
- export interface IProcessInjectElementParams {
83
- type: ComponentType;
84
- containerId: string;
85
- identifier?: string;
86
- options?: IAddressOptions;
87
- checkoutId?: string;
88
- hideHeader?: boolean;
89
- }
90
- export interface IInjectCheckoutParams {
91
- containerId: string;
92
- checkoutId?: string;
93
- hideHeader?: boolean;
94
- }
95
- export interface IInjectCheckoutBuilderParams extends IInjectCheckoutParams {
96
- simulatePresale?: boolean;
97
- presaleExpiresInMinutes?: number;
98
- }
99
- export interface ILiquidCommerceElementsUIMethod {
100
- cartButton(containerId: string, showItemsCount?: boolean): void;
101
- floatingCartButton(showItemsCount?: boolean): void;
102
- cartSubtotal(elementId: string): void;
103
- cartItemsCount(elementId: string, options?: {
104
- hideZero: boolean;
105
- }): void;
106
- }
107
- export interface ILiquidCommerceElementsActions {
108
- product: IProductActions;
109
- address: IAddressActions;
110
- cart: ICartActions;
111
- checkout: ICheckoutActions;
112
- }
113
- export interface ILiquidCommerceElementsBuilderClient {
114
- updateComponentGlobalConfigs(configs: UpdateComponentGlobalConfigs): Promise<void>;
115
- updateProductComponent(configs: UpdateProductComponent): Promise<void>;
116
- updateAddressComponent(configs: UpdateAddressComponent): void;
117
- updateCartComponent(configs: UpdateCartComponent): void;
118
- updateCheckoutComponent(configs: UpdateCheckoutComponent): void;
119
- injectElement(params: IBuilderInjectElementParams): Promise<IInjectedComponent | null>;
120
- injectProductElement(params: IInjectProductElement[]): Promise<IInjectedComponent[]>;
121
- injectAddressElement(containerId: string, options?: IAddressOptions): Promise<IInjectedComponent | null>;
122
- injectCartElement(containerId: string): Promise<IInjectedComponent | null>;
123
- injectCheckoutElement(params: IInjectCheckoutBuilderParams): Promise<IInjectedComponent | null>;
124
- injectProductList(params: IInjectProductListParams): Promise<void>;
125
- actions: ILiquidCommerceElementsActions;
126
- }
127
- export interface ILiquidCommerceElementsClient {
128
- injectProductElement(params: IInjectProductElement[]): Promise<IInjectedComponent[]>;
129
- injectAddressElement(containerId: string, options?: IAddressOptions): Promise<IInjectedComponent | null>;
130
- injectCartElement(containerId: string): Promise<IInjectedComponent | null>;
131
- injectCheckoutElement(params: IInjectCheckoutParams): Promise<IInjectedComponent | null>;
132
- injectProductList(params: IInjectProductListParams): Promise<void>;
133
- injectProductListSearch(params: IInjectProductListSearchParams): Promise<void>;
134
- injectProductListFilters(params: IInjectProductListFiltersParams): Promise<void>;
135
- ui: ILiquidCommerceElementsUIMethod;
136
- actions: ILiquidCommerceElementsActions;
137
- getInjectedComponents(): Map<string, IInjectedComponent>;
138
- }
139
- export type LiquidCommerceElementsClientConstructor = new (clientConfigs: IClientConfigs) => ILiquidCommerceElementsClient;
140
- export type LiquidCommerceElementsBuilderClientConstructor = new (clientConfigs: IClientConfigs) => ILiquidCommerceElementsBuilderClient;