@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 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 };
@@ -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
+ });
@@ -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
+ };