@replohq/sdk 1.8.0 → 1.8.1
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.
package/README.md
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
# `@replohq/sdk`
|
|
2
|
+
|
|
3
|
+
The Replo SDK provides the React providers, data loaders, cart utilities,
|
|
4
|
+
analytics, consent handling, routing helpers, and Next.js integrations used by
|
|
5
|
+
Replo-powered storefronts.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
Install the SDK and its runtime peers in a Next.js application:
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
pnpm add @replohq/sdk @opennextjs/cloudflare @tanstack/react-query
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
The application must use Next.js 15 or newer and React 18.2 or newer. React,
|
|
16
|
+
React DOM, and their type packages are peer dependencies and are normally
|
|
17
|
+
already present in a Next.js application.
|
|
18
|
+
|
|
19
|
+
## Set up the provider
|
|
20
|
+
|
|
21
|
+
Mount `ReploProvider` once around the application. It provides the query
|
|
22
|
+
client, cart state, analytics, and loader error handling used by the rest of
|
|
23
|
+
the SDK. Render managed third-party scripts separately with `ReploScripts` from
|
|
24
|
+
`@replohq/sdk/consent/replo-scripts`.
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
// app/layout.tsx
|
|
28
|
+
import { ReploProvider } from "@replohq/sdk/providers/replo-provider";
|
|
29
|
+
|
|
30
|
+
export default function RootLayout({ children }: React.PropsWithChildren) {
|
|
31
|
+
return (
|
|
32
|
+
<html lang="en">
|
|
33
|
+
<body>
|
|
34
|
+
<ReploProvider>{children}</ReploProvider>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
`ReploProvider` is an async Server Component. Components that use SDK hooks or
|
|
42
|
+
loaders must render beneath it.
|
|
43
|
+
|
|
44
|
+
## Data loaders
|
|
45
|
+
|
|
46
|
+
Data loaders retrieve data from integrations configured for the Replo project.
|
|
47
|
+
Use constants from `DATA_LOADER_KEYS` instead of copying loader-key strings.
|
|
48
|
+
The key selects the integration operation and is also the first part of the
|
|
49
|
+
React Query cache key.
|
|
50
|
+
|
|
51
|
+
Loader components are Client Components that pass data to a render function:
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
// components/product-title.tsx
|
|
55
|
+
"use client";
|
|
56
|
+
|
|
57
|
+
import { ProductLoader } from "@replohq/sdk/loaders/product-loader";
|
|
58
|
+
import { DATA_LOADER_KEYS } from "@replohq/sdk/loaders/loader-keys";
|
|
59
|
+
|
|
60
|
+
export function ProductTitle({ handle }: { handle: string }) {
|
|
61
|
+
return (
|
|
62
|
+
<ProductLoader
|
|
63
|
+
loaderKey={DATA_LOADER_KEYS.SHOPIFY_PRODUCT}
|
|
64
|
+
handle={handle}
|
|
65
|
+
loadingFallback={<p>Loading…</p>}
|
|
66
|
+
fallback={<p>Product unavailable.</p>}
|
|
67
|
+
>
|
|
68
|
+
{(product) => <h1>{product.title}</h1>}
|
|
69
|
+
</ProductLoader>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Loader environments and integrations
|
|
75
|
+
|
|
76
|
+
Loaders fetch on the server: directly during SSR, and through a Server Action
|
|
77
|
+
after hydration. The application needs its Replo project configuration in every
|
|
78
|
+
environment:
|
|
79
|
+
|
|
80
|
+
- During local development and builds, `wrangler.jsonc` must provide
|
|
81
|
+
`CANOPY_API_HOST` and `PROJECT_ID` in `vars`.
|
|
82
|
+
- In a deployed OpenNext/Cloudflare environment, provide the same values as
|
|
83
|
+
runtime bindings.
|
|
84
|
+
- Connect each integration in the Replo project; the site holds no provider
|
|
85
|
+
credentials.
|
|
86
|
+
|
|
87
|
+
Use these public loader components and keys for each configured integration:
|
|
88
|
+
|
|
89
|
+
| Integration | Loader component | `DATA_LOADER_KEYS` value |
|
|
90
|
+
| --- | --- | --- |
|
|
91
|
+
| Shopify Storefront | `ProductLoader` | `SHOPIFY_PRODUCT` |
|
|
92
|
+
| Replo product catalog | `ProductLoader` | `REPLO_PRODUCT` |
|
|
93
|
+
| Shopify Storefront | `CollectionLoader` | `SHOPIFY_COLLECTION` |
|
|
94
|
+
| Shopify Storefront | `CollectionProductsLoader` | `SHOPIFY_COLLECTION_PRODUCTS` |
|
|
95
|
+
| Shopify Storefront | `MetaobjectLoader` | `SHOPIFY_METAOBJECT` |
|
|
96
|
+
| Shopify Storefront | `MetaobjectsLoader` | `SHOPIFY_METAOBJECTS` |
|
|
97
|
+
| Okendo | `OkendoReviewsLoader` | `OKENDO_PRODUCT_REVIEWS` |
|
|
98
|
+
| Okendo | `OkendoReviewAggregateLoader` | `OKENDO_PRODUCT_REVIEW_AGGREGATE` |
|
|
99
|
+
| Rebuy | `RebuyRecommendationsLoader` | `REBUY_RECOMMENDATIONS` |
|
|
100
|
+
| Levanta | `LevantaProductLoader` | `LEVANTA_PRODUCT` |
|
|
101
|
+
| Smile.io | `SmileVipTiersLoader` | `SMILE_IO_VIP_TIERS` |
|
|
102
|
+
| Smile.io | `SmileEarningRulesLoader` | `SMILE_IO_EARNING_RULES` |
|
|
103
|
+
| Smile.io | `SmileRewardsLoader` | `SMILE_IO_REWARDS` |
|
|
104
|
+
| Yotpo | `YotpoReviewsLoader` | `YOTPO_PRODUCT_REVIEWS` |
|
|
105
|
+
| Yotpo | `YotpoReviewAggregateLoader` | `YOTPO_PRODUCT_REVIEW_AGGREGATE` |
|
|
106
|
+
| Reviews.io | `ReviewsIoReviewsLoader` | `REVIEWS_IO_PRODUCT_REVIEWS` |
|
|
107
|
+
| Reviews.io | `ReviewsIoReviewAggregateLoader` | `REVIEWS_IO_PRODUCT_REVIEW_AGGREGATE` |
|
|
108
|
+
| Loox | `LooxReviewsLoader` | `LOOX_PRODUCT_REVIEWS` |
|
|
109
|
+
| Loox | `LooxReviewAggregateLoader` | `LOOX_PRODUCT_REVIEW_AGGREGATE` |
|
|
110
|
+
| Judge.me | `JudgemeReviewsLoader` | `JUDGEME_PRODUCT_REVIEWS` |
|
|
111
|
+
| Judge.me | `JudgemeReviewAggregateLoader` | `JUDGEME_PRODUCT_REVIEW_AGGREGATE` |
|
|
112
|
+
| Statsig | `StatsigExperimentLoader` | `STATSIG_EXPERIMENT` |
|
|
113
|
+
| Contentful | `ContentfulEntryLoader` | `CONTENTFUL_ENTRY` |
|
|
114
|
+
| Contentful | `ContentfulEntriesLoader` | `CONTENTFUL_ENTRIES` |
|
|
115
|
+
|
|
116
|
+
Import each component from its kebab-case subpath, for example
|
|
117
|
+
`CollectionLoader` from `@replohq/sdk/loaders/collection-loader`.
|
|
118
|
+
|
|
119
|
+
### Prefetch on the server
|
|
120
|
+
|
|
121
|
+
`PrefetchedLoaders` is a Server Component that fetches loader data during SSR
|
|
122
|
+
and hydrates the React Query cache. Wrap the matching Client Component to avoid
|
|
123
|
+
a loading state on the first paint:
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
// app/products/[handle]/page.tsx
|
|
127
|
+
import { PrefetchedLoaders } from "@replohq/sdk/loaders/prefetch-loaders";
|
|
128
|
+
import { DATA_LOADER_KEYS } from "@replohq/sdk/loaders/loader-keys";
|
|
129
|
+
|
|
130
|
+
import { ProductTitle } from "../../../components/product-title";
|
|
131
|
+
|
|
132
|
+
export default async function ProductPage({
|
|
133
|
+
params,
|
|
134
|
+
}: {
|
|
135
|
+
params: Promise<{ handle: string }>;
|
|
136
|
+
}) {
|
|
137
|
+
const { handle } = await params;
|
|
138
|
+
|
|
139
|
+
return (
|
|
140
|
+
<PrefetchedLoaders
|
|
141
|
+
queries={[
|
|
142
|
+
{
|
|
143
|
+
loaderKey: DATA_LOADER_KEYS.SHOPIFY_PRODUCT,
|
|
144
|
+
args: { handle },
|
|
145
|
+
},
|
|
146
|
+
]}
|
|
147
|
+
>
|
|
148
|
+
<ProductTitle handle={handle} />
|
|
149
|
+
</PrefetchedLoaders>
|
|
150
|
+
);
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
The `loaderKey` and complete `args` object must exactly match the props used by
|
|
155
|
+
the loader component, including optional locale, pagination, or metafield
|
|
156
|
+
arguments. `PrefetchedLoaders` accepts `revalidateSeconds` per query; it
|
|
157
|
+
defaults to 60 seconds, and `false` enables indefinite tag-based caching.
|
|
158
|
+
|
|
159
|
+
Server-only code that does not hydrate a loader component can call
|
|
160
|
+
`invokeLoaderServer` from `@replohq/sdk/loaders/invoke-loader-server`.
|
|
161
|
+
|
|
162
|
+
## License
|
|
163
|
+
|
|
164
|
+
This package is proprietary software. See [LICENSE](./LICENSE)
|
|
165
|
+
(`SEE LICENSE IN LICENSE`) and the [Replo Terms of Service](https://replo.app/terms).
|
|
@@ -12,14 +12,8 @@ export declare function randomBase64Url(byteLength: number): string;
|
|
|
12
12
|
* `crypto.getRandomValues`, which carries no such restriction.
|
|
13
13
|
*/
|
|
14
14
|
export declare function randomUUID(): string;
|
|
15
|
-
/**
|
|
16
|
-
|
|
17
|
-
*
|
|
18
|
-
* Used for storing opaque secrets (e.g. public API tokens) where we want
|
|
19
|
-
* constant-length hex output suitable for a `VARCHAR(64)` column with a
|
|
20
|
-
* unique index.
|
|
21
|
-
*/
|
|
22
|
-
export declare function sha256Hex(input: string): Promise<string>;
|
|
15
|
+
/** Strings use UTF-8; binary inputs are hashed unchanged. */
|
|
16
|
+
export declare function sha256Hex(input: string | Parameters<typeof crypto.subtle.digest>[1]): Promise<string>;
|
|
23
17
|
export declare function constantTimeEqual({ left, right, }: {
|
|
24
18
|
left: Uint8Array;
|
|
25
19
|
right: Uint8Array;
|
|
@@ -70,4 +70,5 @@ export declare function fileExtensionFromUrl(url: string): string;
|
|
|
70
70
|
export declare function sanitizePublicHttpUrl(value: string | null, { preserveProtocol }?: {
|
|
71
71
|
preserveProtocol?: boolean;
|
|
72
72
|
}): string | null;
|
|
73
|
+
export declare function isPublicHttpsUrl(value: string): boolean;
|
|
73
74
|
export declare function safeHost(url: string): string | null;
|
package/lib/buildMetadata.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const BUILD_METADATA = {
|
|
2
2
|
"packageName": "@replohq/sdk",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.1",
|
|
4
4
|
"branch": "HEAD",
|
|
5
|
-
"commit": "
|
|
6
|
-
"builtAt": "2026-09-
|
|
5
|
+
"commit": "769a5347144bb3d6c77b6f06b075c8f6ad45a6b3",
|
|
6
|
+
"builtAt": "2026-09-16T18:01:00.137Z"
|
|
7
7
|
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@replohq/sdk",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.1",
|
|
4
4
|
"reploBuild": {
|
|
5
5
|
"packageName": "@replohq/sdk",
|
|
6
|
-
"version": "1.8.
|
|
6
|
+
"version": "1.8.1",
|
|
7
7
|
"branch": "HEAD",
|
|
8
|
-
"commit": "
|
|
9
|
-
"builtAt": "2026-09-
|
|
8
|
+
"commit": "769a5347144bb3d6c77b6f06b075c8f6ad45a6b3",
|
|
9
|
+
"builtAt": "2026-09-16T18:01:00.137Z"
|
|
10
10
|
},
|
|
11
11
|
"description": "Replo SDK — cart, analytics, and data loaders for agent-built Next.js sites.",
|
|
12
12
|
"license": "SEE LICENSE IN LICENSE",
|