@vue-storefront/next 0.0.0-20250722194236
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/LICENSE.md +21 -0
- package/README.md +124 -0
- package/dist/chunk-FWCSY2DS.mjs +37 -0
- package/dist/client.d.mts +45 -0
- package/dist/client.d.ts +45 -0
- package/dist/client.js +201 -0
- package/dist/client.mjs +144 -0
- package/dist/index.d.mts +180 -0
- package/dist/index.d.ts +180 -0
- package/dist/index.js +202 -0
- package/dist/index.mjs +157 -0
- package/dist/types-B9h_AU7R.d.mts +209 -0
- package/dist/types-B9h_AU7R.d.ts +209 -0
- package/package.json +58 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Vue Storefront
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
# @vue-storefront/next
|
|
2
|
+
|
|
3
|
+
## Quick Setup
|
|
4
|
+
|
|
5
|
+
1. Add `@vue-storefront/next` dependency to your project
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
# Using pnpm
|
|
9
|
+
pnpm add -D @vue-storefront/next
|
|
10
|
+
|
|
11
|
+
# Using yarn
|
|
12
|
+
yarn add --dev @vue-storefront/next
|
|
13
|
+
|
|
14
|
+
# Using npm
|
|
15
|
+
npm install --save-dev @vue-storefront/next
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
2. Create SDK config file - `sdk.config.ts` in root directory of your project:
|
|
19
|
+
|
|
20
|
+
The `createSdk` function expects
|
|
21
|
+
|
|
22
|
+
- base SDK options including the middleware and (optionally) the multistore configuration as a first argument,
|
|
23
|
+
- and a factory function for the SDK configuration as a second argument. Those factory function receives a context, useful for creating the SDK configuration.
|
|
24
|
+
|
|
25
|
+
See the example below illustrating the SDK configuration with Unified and Contentful modules.
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import {
|
|
29
|
+
contentfulModule,
|
|
30
|
+
ContentfulModuleType,
|
|
31
|
+
} from "@vsf-enterprise/contentful-sdk";
|
|
32
|
+
import { unifiedModule } from "@vsf-enterprise/unified-sdk";
|
|
33
|
+
import { CreateSdkOptions, createSdk } from "@vue-storefront/next";
|
|
34
|
+
import type { UnifiedApiExtension } from "../storefront-middleware/middleware.config";
|
|
35
|
+
|
|
36
|
+
const options: CreateSdkOptions = {
|
|
37
|
+
middleware: {
|
|
38
|
+
apiUrl: "http://localhost:4000",
|
|
39
|
+
},
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export const { getSdk, createSdkContext } = createSdk(
|
|
43
|
+
options,
|
|
44
|
+
({ buildModule, middlewareUrl, getRequestHeaders }) => ({
|
|
45
|
+
unified: buildModule(unifiedModule<UnifiedApiExtension>, {
|
|
46
|
+
apiUrl: middlewareUrl + "/commerce",
|
|
47
|
+
requestOptions: {
|
|
48
|
+
headers: getRequestHeaders,
|
|
49
|
+
},
|
|
50
|
+
}),
|
|
51
|
+
contentful: buildModule<ContentfulModuleType>(contentfulModule, {
|
|
52
|
+
apiUrl: middlewareUrl + "/cntf",
|
|
53
|
+
}),
|
|
54
|
+
}),
|
|
55
|
+
);
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
The `createSdk` function returns
|
|
59
|
+
|
|
60
|
+
- the `getSdk` function, which is used to create the new SDK instance,
|
|
61
|
+
- and the `createSdkContext` function, which is used to create the SDK context, to share the same SDK instance on the Client side.
|
|
62
|
+
|
|
63
|
+
3. Create SDK context in your app, it could be for example `hooks/sdk.ts` file:
|
|
64
|
+
|
|
65
|
+
```ts
|
|
66
|
+
import { createSdkContext } from "@vue-storefront/next/client";
|
|
67
|
+
import { getSdk } from "../sdk.config";
|
|
68
|
+
|
|
69
|
+
export const [SdkProvider, useSdk] = createSdkContext(getSdk());
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
4. Register the `SdkProvider` in the root component of your app:
|
|
73
|
+
|
|
74
|
+
In `pages/_app.tsx` for **Pages Router**
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
import type { AppProps } from "next/app";
|
|
78
|
+
import { SdkProvider } from "../hooks";
|
|
79
|
+
|
|
80
|
+
export default function App({ Component, pageProps }: AppProps) {
|
|
81
|
+
return (
|
|
82
|
+
<SdkProvider>
|
|
83
|
+
<Component {...pageProps} />
|
|
84
|
+
</SdkProvider>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
or in `app/layout.tsx` for **App Router**
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
# app/layout.tsx
|
|
93
|
+
import { ReactNode } from "react";
|
|
94
|
+
import { Providers } from "./providers";
|
|
95
|
+
|
|
96
|
+
export default function RootLayout({ children }: { children: ReactNode }) {
|
|
97
|
+
return (
|
|
98
|
+
<html lang="en">
|
|
99
|
+
<body>
|
|
100
|
+
<Providers>{children}</Providers>
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
# app/providers.tsx
|
|
109
|
+
"use client";
|
|
110
|
+
|
|
111
|
+
import { ReactNode } from "react";
|
|
112
|
+
import { SdkProvider } from "../hooks";
|
|
113
|
+
|
|
114
|
+
export function Providers({ children }: { children: ReactNode }) {
|
|
115
|
+
return <SdkProvider>{children}</SdkProvider>;
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
5. The example of using the SDK can be found in example applications:
|
|
120
|
+
|
|
121
|
+
- [Pages Router](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/next/__tests__/apps/pages-router)
|
|
122
|
+
- [App Router](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/next/__tests__/apps/app-router)
|
|
123
|
+
|
|
124
|
+
That's it! You can now use VueStorefront Next in your Next app ✨
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export {
|
|
34
|
+
__spreadValues,
|
|
35
|
+
__spreadProps,
|
|
36
|
+
__objRest
|
|
37
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { SDKApi } from '@alokai/connect/sdk';
|
|
2
|
+
import { S as SfContract, C as CreateSdkContextReturn } from './types-B9h_AU7R.mjs';
|
|
3
|
+
export { M as Maybe, b as SfState, a as SfStateProps, c as createSfStateProvider } from './types-B9h_AU7R.mjs';
|
|
4
|
+
import 'next/headers';
|
|
5
|
+
import 'react';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Creates a new Alokai context which is a combination of SDK and state contexts.
|
|
9
|
+
* This function is dedicated for the client-side usage.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* Create a new Alokai context somewhere in your application. It may be the `hooks/sdk.ts` file.
|
|
13
|
+
*
|
|
14
|
+
* ```tsx
|
|
15
|
+
* 'use client';
|
|
16
|
+
*
|
|
17
|
+
* import { createAlokaiContext } from "@vue-storefront/next/client";
|
|
18
|
+
* import type { Sdk } from './sdk.server';
|
|
19
|
+
* import type { SfContract } from 'storefront-middleware/types';
|
|
20
|
+
*
|
|
21
|
+
* export const {
|
|
22
|
+
* AlokaiProvider,
|
|
23
|
+
* useSdk,
|
|
24
|
+
* useSfCartState,
|
|
25
|
+
* useSfCurrenciesState,
|
|
26
|
+
* useSfCurrencyState,
|
|
27
|
+
* useSfCustomerState,
|
|
28
|
+
* } = createAlokaiContext<Sdk, SfContract>();
|
|
29
|
+
* ```
|
|
30
|
+
* This is also a place where you can import hooks for handling the state management.
|
|
31
|
+
* You can read more about the state management in the documentation https://docs.alokai.com/sdk/getting-started/state-management.
|
|
32
|
+
* Then use the `AlokaiProvider` in the root component of your application.
|
|
33
|
+
* For Pages Router it would be the `pages/_app.tsx` file,
|
|
34
|
+
* and for the App Router it would be the `app/layout.tsx` file.
|
|
35
|
+
* Finally, you can use the `useSdk` in any client component of your application.
|
|
36
|
+
* @returns AlokaiProvider - The Alokai Context Provider.
|
|
37
|
+
* @returns useSdk - The SDK provider and the `useSdk` hook.
|
|
38
|
+
* @returns useSfCartState - Hook that return Cart state with `SfCart` type.
|
|
39
|
+
* @returns useSfCurrenciesState - Hook that return Currencies state with `SfCurrency` type.
|
|
40
|
+
* @returns useSfCurrencyState - Hook that return Currency state with `SfCurrency[]` type.
|
|
41
|
+
* @returns useSfCustomerState - Hook that return Customer state with `SfCustomer` type.
|
|
42
|
+
*/
|
|
43
|
+
declare function createAlokaiContext<TSdk extends SDKApi<any>, TSfContract extends SfContract>(): CreateSdkContextReturn<TSdk, TSfContract>;
|
|
44
|
+
|
|
45
|
+
export { CreateSdkContextReturn, SfContract, createAlokaiContext };
|
package/dist/client.d.ts
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { SDKApi } from '@alokai/connect/sdk';
|
|
2
|
+
import { S as SfContract, C as CreateSdkContextReturn } from './types-B9h_AU7R.js';
|
|
3
|
+
export { M as Maybe, b as SfState, a as SfStateProps, c as createSfStateProvider } from './types-B9h_AU7R.js';
|
|
4
|
+
import 'next/headers';
|
|
5
|
+
import 'react';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Creates a new Alokai context which is a combination of SDK and state contexts.
|
|
9
|
+
* This function is dedicated for the client-side usage.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* Create a new Alokai context somewhere in your application. It may be the `hooks/sdk.ts` file.
|
|
13
|
+
*
|
|
14
|
+
* ```tsx
|
|
15
|
+
* 'use client';
|
|
16
|
+
*
|
|
17
|
+
* import { createAlokaiContext } from "@vue-storefront/next/client";
|
|
18
|
+
* import type { Sdk } from './sdk.server';
|
|
19
|
+
* import type { SfContract } from 'storefront-middleware/types';
|
|
20
|
+
*
|
|
21
|
+
* export const {
|
|
22
|
+
* AlokaiProvider,
|
|
23
|
+
* useSdk,
|
|
24
|
+
* useSfCartState,
|
|
25
|
+
* useSfCurrenciesState,
|
|
26
|
+
* useSfCurrencyState,
|
|
27
|
+
* useSfCustomerState,
|
|
28
|
+
* } = createAlokaiContext<Sdk, SfContract>();
|
|
29
|
+
* ```
|
|
30
|
+
* This is also a place where you can import hooks for handling the state management.
|
|
31
|
+
* You can read more about the state management in the documentation https://docs.alokai.com/sdk/getting-started/state-management.
|
|
32
|
+
* Then use the `AlokaiProvider` in the root component of your application.
|
|
33
|
+
* For Pages Router it would be the `pages/_app.tsx` file,
|
|
34
|
+
* and for the App Router it would be the `app/layout.tsx` file.
|
|
35
|
+
* Finally, you can use the `useSdk` in any client component of your application.
|
|
36
|
+
* @returns AlokaiProvider - The Alokai Context Provider.
|
|
37
|
+
* @returns useSdk - The SDK provider and the `useSdk` hook.
|
|
38
|
+
* @returns useSfCartState - Hook that return Cart state with `SfCart` type.
|
|
39
|
+
* @returns useSfCurrenciesState - Hook that return Currencies state with `SfCurrency` type.
|
|
40
|
+
* @returns useSfCurrencyState - Hook that return Currency state with `SfCurrency[]` type.
|
|
41
|
+
* @returns useSfCustomerState - Hook that return Customer state with `SfCustomer` type.
|
|
42
|
+
*/
|
|
43
|
+
declare function createAlokaiContext<TSdk extends SDKApi<any>, TSfContract extends SfContract>(): CreateSdkContextReturn<TSdk, TSfContract>;
|
|
44
|
+
|
|
45
|
+
export { CreateSdkContextReturn, SfContract, createAlokaiContext };
|
package/dist/client.js
ADDED
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __defProps = Object.defineProperties;
|
|
6
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
8
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
9
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
10
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
11
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
12
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
13
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
14
|
+
var __spreadValues = (a, b) => {
|
|
15
|
+
for (var prop in b || (b = {}))
|
|
16
|
+
if (__hasOwnProp.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
if (__getOwnPropSymbols)
|
|
19
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
20
|
+
if (__propIsEnum.call(b, prop))
|
|
21
|
+
__defNormalProp(a, prop, b[prop]);
|
|
22
|
+
}
|
|
23
|
+
return a;
|
|
24
|
+
};
|
|
25
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
26
|
+
var __objRest = (source, exclude) => {
|
|
27
|
+
var target = {};
|
|
28
|
+
for (var prop in source)
|
|
29
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
30
|
+
target[prop] = source[prop];
|
|
31
|
+
if (source != null && __getOwnPropSymbols)
|
|
32
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
33
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
34
|
+
target[prop] = source[prop];
|
|
35
|
+
}
|
|
36
|
+
return target;
|
|
37
|
+
};
|
|
38
|
+
var __export = (target, all) => {
|
|
39
|
+
for (var name in all)
|
|
40
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
41
|
+
};
|
|
42
|
+
var __copyProps = (to, from, except, desc) => {
|
|
43
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
44
|
+
for (let key of __getOwnPropNames(from))
|
|
45
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
46
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
47
|
+
}
|
|
48
|
+
return to;
|
|
49
|
+
};
|
|
50
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
51
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
52
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
53
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
54
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
55
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
56
|
+
mod
|
|
57
|
+
));
|
|
58
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
59
|
+
|
|
60
|
+
// src/client.ts
|
|
61
|
+
var client_exports = {};
|
|
62
|
+
__export(client_exports, {
|
|
63
|
+
createAlokaiContext: () => createAlokaiContext,
|
|
64
|
+
createSfStateProvider: () => createSfStateProvider
|
|
65
|
+
});
|
|
66
|
+
module.exports = __toCommonJS(client_exports);
|
|
67
|
+
|
|
68
|
+
// src/alokai-provider.tsx
|
|
69
|
+
var import_instrumentation_next_component = require("@alokai/instrumentation-next-component");
|
|
70
|
+
var import_script = __toESM(require("next/script"));
|
|
71
|
+
var import_react2 = __toESM(require("react"));
|
|
72
|
+
|
|
73
|
+
// src/state.tsx
|
|
74
|
+
var import_react = __toESM(require("react"));
|
|
75
|
+
var import_zustand = require("zustand");
|
|
76
|
+
var createSfState = (initialData) => {
|
|
77
|
+
return (0, import_zustand.createStore)()((set) => __spreadProps(__spreadValues({
|
|
78
|
+
cart: null,
|
|
79
|
+
customer: null
|
|
80
|
+
}, initialData), {
|
|
81
|
+
setCart: (cart) => set({ cart }),
|
|
82
|
+
setCurrencies: (currencies) => set({ currencies }),
|
|
83
|
+
setCurrency: (currency) => set({ currency }),
|
|
84
|
+
setCustomer: (customer) => set({ customer }),
|
|
85
|
+
setLocale: (locale) => set({ locale }),
|
|
86
|
+
setLocales: (locales) => set({ locales })
|
|
87
|
+
}));
|
|
88
|
+
};
|
|
89
|
+
function createSfStateProvider() {
|
|
90
|
+
const SfStateContext = (0, import_react.createContext)(null);
|
|
91
|
+
function SfStateProvider({
|
|
92
|
+
children,
|
|
93
|
+
initialData
|
|
94
|
+
}) {
|
|
95
|
+
const stateReference = (0, import_react.useRef)();
|
|
96
|
+
if (!stateReference.current) {
|
|
97
|
+
stateReference.current = createSfState(initialData);
|
|
98
|
+
}
|
|
99
|
+
return /* @__PURE__ */ import_react.default.createElement(SfStateContext.Provider, { value: stateReference.current }, children);
|
|
100
|
+
}
|
|
101
|
+
function getSfStateContext() {
|
|
102
|
+
const context = (0, import_react.useContext)(SfStateContext);
|
|
103
|
+
if (!context)
|
|
104
|
+
throw new Error("Missing SfStateContext.Provider in the tree");
|
|
105
|
+
return context;
|
|
106
|
+
}
|
|
107
|
+
function useSfCurrencyState() {
|
|
108
|
+
const { currency, setCurrency } = (0, import_zustand.useStore)(
|
|
109
|
+
getSfStateContext(),
|
|
110
|
+
(state) => ({
|
|
111
|
+
currency: state.currency,
|
|
112
|
+
setCurrency: state.setCurrency
|
|
113
|
+
})
|
|
114
|
+
);
|
|
115
|
+
return [currency, setCurrency];
|
|
116
|
+
}
|
|
117
|
+
function useSfCurrenciesState() {
|
|
118
|
+
const { currencies, setCurrencies } = (0, import_zustand.useStore)(
|
|
119
|
+
getSfStateContext(),
|
|
120
|
+
(state) => ({
|
|
121
|
+
currencies: state.currencies,
|
|
122
|
+
setCurrencies: state.setCurrencies
|
|
123
|
+
})
|
|
124
|
+
);
|
|
125
|
+
return [currencies, setCurrencies];
|
|
126
|
+
}
|
|
127
|
+
function useSfLocaleState() {
|
|
128
|
+
const { locale, setLocale } = (0, import_zustand.useStore)(getSfStateContext(), (state) => ({
|
|
129
|
+
locale: state.locale,
|
|
130
|
+
setLocale: state.setLocale
|
|
131
|
+
}));
|
|
132
|
+
return [locale, setLocale];
|
|
133
|
+
}
|
|
134
|
+
function useSfLocalesState() {
|
|
135
|
+
const { locales, setLocales } = (0, import_zustand.useStore)(getSfStateContext(), (state) => ({
|
|
136
|
+
locales: state.locales,
|
|
137
|
+
setLocales: state.setLocales
|
|
138
|
+
}));
|
|
139
|
+
return [locales, setLocales];
|
|
140
|
+
}
|
|
141
|
+
function useSfCartState() {
|
|
142
|
+
const { cart, setCart } = (0, import_zustand.useStore)(getSfStateContext(), (state) => ({
|
|
143
|
+
cart: state.cart,
|
|
144
|
+
setCart: state.setCart
|
|
145
|
+
}));
|
|
146
|
+
return [cart, setCart];
|
|
147
|
+
}
|
|
148
|
+
function useSfCustomerState() {
|
|
149
|
+
const { customer, setCustomer } = (0, import_zustand.useStore)(
|
|
150
|
+
getSfStateContext(),
|
|
151
|
+
(state) => ({
|
|
152
|
+
customer: state.customer,
|
|
153
|
+
setCustomer: state.setCustomer
|
|
154
|
+
})
|
|
155
|
+
);
|
|
156
|
+
return [customer, setCustomer];
|
|
157
|
+
}
|
|
158
|
+
return {
|
|
159
|
+
SfStateProvider,
|
|
160
|
+
useSfCartState,
|
|
161
|
+
useSfCurrenciesState,
|
|
162
|
+
useSfCurrencyState,
|
|
163
|
+
useSfCustomerState,
|
|
164
|
+
useSfLocalesState,
|
|
165
|
+
useSfLocaleState
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// src/alokai-provider.tsx
|
|
170
|
+
function createAlokaiContext() {
|
|
171
|
+
const SdkContext = (0, import_react2.createContext)(null);
|
|
172
|
+
const _a = createSfStateProvider(), { SfStateProvider } = _a, rest = __objRest(_a, ["SfStateProvider"]);
|
|
173
|
+
function AlokaiProvider({
|
|
174
|
+
children,
|
|
175
|
+
initialData,
|
|
176
|
+
sdk
|
|
177
|
+
}) {
|
|
178
|
+
const metaTagScript = `
|
|
179
|
+
const vsfMetaTag = document.createElement("meta");
|
|
180
|
+
vsfMetaTag.setAttribute("name", "generator");
|
|
181
|
+
vsfMetaTag.setAttribute("content", "Alokai Storefront");
|
|
182
|
+
document.head.appendChild(vsfMetaTag);
|
|
183
|
+
`;
|
|
184
|
+
return /* @__PURE__ */ import_react2.default.createElement(SdkContext.Provider, { value: sdk }, /* @__PURE__ */ import_react2.default.createElement(import_script.default, { id: "vsfMetaTag", strategy: "beforeInteractive" }, `
|
|
185
|
+
${metaTagScript}
|
|
186
|
+
`), /* @__PURE__ */ import_react2.default.createElement(import_instrumentation_next_component.AlokaiInstrumentation, null), /* @__PURE__ */ import_react2.default.createElement(SfStateProvider, { initialData }, children));
|
|
187
|
+
}
|
|
188
|
+
const useSdk = () => {
|
|
189
|
+
const contextSdk = (0, import_react2.useContext)(SdkContext);
|
|
190
|
+
if (!contextSdk) {
|
|
191
|
+
throw new Error("useSdk must be used within a AlokaiProvider");
|
|
192
|
+
}
|
|
193
|
+
return contextSdk;
|
|
194
|
+
};
|
|
195
|
+
return __spreadValues({ AlokaiProvider, useSdk }, rest);
|
|
196
|
+
}
|
|
197
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
198
|
+
0 && (module.exports = {
|
|
199
|
+
createAlokaiContext,
|
|
200
|
+
createSfStateProvider
|
|
201
|
+
});
|
package/dist/client.mjs
ADDED
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
__objRest,
|
|
4
|
+
__spreadProps,
|
|
5
|
+
__spreadValues
|
|
6
|
+
} from "./chunk-FWCSY2DS.mjs";
|
|
7
|
+
|
|
8
|
+
// src/alokai-provider.tsx
|
|
9
|
+
import { AlokaiInstrumentation } from "@alokai/instrumentation-next-component";
|
|
10
|
+
import Script from "next/script";
|
|
11
|
+
import React2, { createContext as createContext2, useContext as useContext2 } from "react";
|
|
12
|
+
|
|
13
|
+
// src/state.tsx
|
|
14
|
+
import React, {
|
|
15
|
+
createContext,
|
|
16
|
+
useContext,
|
|
17
|
+
useRef
|
|
18
|
+
} from "react";
|
|
19
|
+
import { createStore, useStore } from "zustand";
|
|
20
|
+
var createSfState = (initialData) => {
|
|
21
|
+
return createStore()((set) => __spreadProps(__spreadValues({
|
|
22
|
+
cart: null,
|
|
23
|
+
customer: null
|
|
24
|
+
}, initialData), {
|
|
25
|
+
setCart: (cart) => set({ cart }),
|
|
26
|
+
setCurrencies: (currencies) => set({ currencies }),
|
|
27
|
+
setCurrency: (currency) => set({ currency }),
|
|
28
|
+
setCustomer: (customer) => set({ customer }),
|
|
29
|
+
setLocale: (locale) => set({ locale }),
|
|
30
|
+
setLocales: (locales) => set({ locales })
|
|
31
|
+
}));
|
|
32
|
+
};
|
|
33
|
+
function createSfStateProvider() {
|
|
34
|
+
const SfStateContext = createContext(null);
|
|
35
|
+
function SfStateProvider({
|
|
36
|
+
children,
|
|
37
|
+
initialData
|
|
38
|
+
}) {
|
|
39
|
+
const stateReference = useRef();
|
|
40
|
+
if (!stateReference.current) {
|
|
41
|
+
stateReference.current = createSfState(initialData);
|
|
42
|
+
}
|
|
43
|
+
return /* @__PURE__ */ React.createElement(SfStateContext.Provider, { value: stateReference.current }, children);
|
|
44
|
+
}
|
|
45
|
+
function getSfStateContext() {
|
|
46
|
+
const context = useContext(SfStateContext);
|
|
47
|
+
if (!context)
|
|
48
|
+
throw new Error("Missing SfStateContext.Provider in the tree");
|
|
49
|
+
return context;
|
|
50
|
+
}
|
|
51
|
+
function useSfCurrencyState() {
|
|
52
|
+
const { currency, setCurrency } = useStore(
|
|
53
|
+
getSfStateContext(),
|
|
54
|
+
(state) => ({
|
|
55
|
+
currency: state.currency,
|
|
56
|
+
setCurrency: state.setCurrency
|
|
57
|
+
})
|
|
58
|
+
);
|
|
59
|
+
return [currency, setCurrency];
|
|
60
|
+
}
|
|
61
|
+
function useSfCurrenciesState() {
|
|
62
|
+
const { currencies, setCurrencies } = useStore(
|
|
63
|
+
getSfStateContext(),
|
|
64
|
+
(state) => ({
|
|
65
|
+
currencies: state.currencies,
|
|
66
|
+
setCurrencies: state.setCurrencies
|
|
67
|
+
})
|
|
68
|
+
);
|
|
69
|
+
return [currencies, setCurrencies];
|
|
70
|
+
}
|
|
71
|
+
function useSfLocaleState() {
|
|
72
|
+
const { locale, setLocale } = useStore(getSfStateContext(), (state) => ({
|
|
73
|
+
locale: state.locale,
|
|
74
|
+
setLocale: state.setLocale
|
|
75
|
+
}));
|
|
76
|
+
return [locale, setLocale];
|
|
77
|
+
}
|
|
78
|
+
function useSfLocalesState() {
|
|
79
|
+
const { locales, setLocales } = useStore(getSfStateContext(), (state) => ({
|
|
80
|
+
locales: state.locales,
|
|
81
|
+
setLocales: state.setLocales
|
|
82
|
+
}));
|
|
83
|
+
return [locales, setLocales];
|
|
84
|
+
}
|
|
85
|
+
function useSfCartState() {
|
|
86
|
+
const { cart, setCart } = useStore(getSfStateContext(), (state) => ({
|
|
87
|
+
cart: state.cart,
|
|
88
|
+
setCart: state.setCart
|
|
89
|
+
}));
|
|
90
|
+
return [cart, setCart];
|
|
91
|
+
}
|
|
92
|
+
function useSfCustomerState() {
|
|
93
|
+
const { customer, setCustomer } = useStore(
|
|
94
|
+
getSfStateContext(),
|
|
95
|
+
(state) => ({
|
|
96
|
+
customer: state.customer,
|
|
97
|
+
setCustomer: state.setCustomer
|
|
98
|
+
})
|
|
99
|
+
);
|
|
100
|
+
return [customer, setCustomer];
|
|
101
|
+
}
|
|
102
|
+
return {
|
|
103
|
+
SfStateProvider,
|
|
104
|
+
useSfCartState,
|
|
105
|
+
useSfCurrenciesState,
|
|
106
|
+
useSfCurrencyState,
|
|
107
|
+
useSfCustomerState,
|
|
108
|
+
useSfLocalesState,
|
|
109
|
+
useSfLocaleState
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// src/alokai-provider.tsx
|
|
114
|
+
function createAlokaiContext() {
|
|
115
|
+
const SdkContext = createContext2(null);
|
|
116
|
+
const _a = createSfStateProvider(), { SfStateProvider } = _a, rest = __objRest(_a, ["SfStateProvider"]);
|
|
117
|
+
function AlokaiProvider({
|
|
118
|
+
children,
|
|
119
|
+
initialData,
|
|
120
|
+
sdk
|
|
121
|
+
}) {
|
|
122
|
+
const metaTagScript = `
|
|
123
|
+
const vsfMetaTag = document.createElement("meta");
|
|
124
|
+
vsfMetaTag.setAttribute("name", "generator");
|
|
125
|
+
vsfMetaTag.setAttribute("content", "Alokai Storefront");
|
|
126
|
+
document.head.appendChild(vsfMetaTag);
|
|
127
|
+
`;
|
|
128
|
+
return /* @__PURE__ */ React2.createElement(SdkContext.Provider, { value: sdk }, /* @__PURE__ */ React2.createElement(Script, { id: "vsfMetaTag", strategy: "beforeInteractive" }, `
|
|
129
|
+
${metaTagScript}
|
|
130
|
+
`), /* @__PURE__ */ React2.createElement(AlokaiInstrumentation, null), /* @__PURE__ */ React2.createElement(SfStateProvider, { initialData }, children));
|
|
131
|
+
}
|
|
132
|
+
const useSdk = () => {
|
|
133
|
+
const contextSdk = useContext2(SdkContext);
|
|
134
|
+
if (!contextSdk) {
|
|
135
|
+
throw new Error("useSdk must be used within a AlokaiProvider");
|
|
136
|
+
}
|
|
137
|
+
return contextSdk;
|
|
138
|
+
};
|
|
139
|
+
return __spreadValues({ AlokaiProvider, useSdk }, rest);
|
|
140
|
+
}
|
|
141
|
+
export {
|
|
142
|
+
createAlokaiContext,
|
|
143
|
+
createSfStateProvider
|
|
144
|
+
};
|