@vue-storefront/next 0.0.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.
Files changed (14) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +122 -0
  3. package/dist/chunk-EX6ADWAR.mjs +24 -0
  4. package/dist/client.d.mts +25 -0
  5. package/dist/client.d.ts +25 -0
  6. package/dist/client.js +62 -0
  7. package/dist/client.mjs +28 -0
  8. package/dist/index.d.mts +69 -0
  9. package/dist/index.d.ts +69 -0
  10. package/dist/index.js +121 -0
  11. package/dist/index.mjs +83 -0
  12. package/dist/types-m9jwrtV3.d.mts +69 -0
  13. package/dist/types-m9jwrtV3.d.ts +69 -0
  14. package/package.json +62 -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,122 @@
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
+ - base SDK options including the middleware and (optionally) the multistore configuration as a first argument,
22
+ - and a factory function for the SDK configuration as a second argument. Those factory function receives a context, useful for creating the SDK configuration.
23
+
24
+ See the example below illustrating the SDK configuration with Unified and Contentful modules.
25
+
26
+ ```ts
27
+ import {
28
+ contentfulModule,
29
+ ContentfulModuleType,
30
+ } from "@vsf-enterprise/contentful-sdk";
31
+ import { unifiedModule } from "@vsf-enterprise/unified-sdk";
32
+ import { CreateSdkOptions, createSdk } from "@vue-storefront/next";
33
+ import type { UnifiedApiExtension } from "../storefront-middleware/middleware.config";
34
+
35
+ const options: CreateSdkOptions = {
36
+ middleware: {
37
+ apiUrl: "http://localhost:4000",
38
+ },
39
+ };
40
+
41
+ export const { getSdk, createSdkContext } = createSdk(
42
+ options,
43
+ ({ buildModule, middlewareUrl, getRequestHeaders }) => ({
44
+ unified: buildModule(unifiedModule<UnifiedApiExtension>, {
45
+ apiUrl: middlewareUrl + "/commerce",
46
+ requestOptions: {
47
+ headers: getRequestHeaders,
48
+ },
49
+ }),
50
+ contentful: buildModule<ContentfulModuleType>(contentfulModule, {
51
+ apiUrl: middlewareUrl + "/cntf",
52
+ }),
53
+ }),
54
+ );
55
+ ```
56
+
57
+ The `createSdk` function returns
58
+ - the `getSdk` function, which is used to create the new SDK instance,
59
+ - and the `createSdkContext` function, which is used to create the SDK context, to share the same SDK instance on the Client side.
60
+
61
+ 3. Create SDK context in your app, it could be for example `hooks/sdk.ts` file:
62
+
63
+ ```ts
64
+ import { createSdkContext } from "@vue-storefront/next/client";
65
+ import { getSdk } from "../sdk.config";
66
+
67
+ export const [SdkProvider, useSdk] = createSdkContext(getSdk());
68
+ ```
69
+
70
+ 4. Register the `SdkProvider` in the root component of your app:
71
+
72
+ In `pages/_app.tsx` for **Pages Router**
73
+
74
+ ```tsx
75
+ import type { AppProps } from "next/app";
76
+ import { SdkProvider } from "../hooks";
77
+
78
+ export default function App({ Component, pageProps }: AppProps) {
79
+ return (
80
+ <SdkProvider>
81
+ <Component {...pageProps} />
82
+ </SdkProvider>
83
+ );
84
+ }
85
+ ```
86
+
87
+ or in `app/layout.tsx` for **App Router**
88
+
89
+ ```tsx
90
+ # app/layout.tsx
91
+ import { ReactNode } from "react";
92
+ import { Providers } from "./providers";
93
+
94
+ export default function RootLayout({ children }: { children: ReactNode }) {
95
+ return (
96
+ <html lang="en">
97
+ <body>
98
+ <Providers>{children}</Providers>
99
+ </body>
100
+ </html>
101
+ );
102
+ }
103
+ ```
104
+
105
+ ```tsx
106
+ # app/providers.tsx
107
+ "use client";
108
+
109
+ import { ReactNode } from "react";
110
+ import { SdkProvider } from "../hooks";
111
+
112
+ export function Providers({ children }: { children: ReactNode }) {
113
+ return <SdkProvider>{children}</SdkProvider>;
114
+ }
115
+ ```
116
+
117
+ 5. The example of using the SDK can be found in example applications:
118
+
119
+ - [Pages Router](./__tests__/apps/pages-router)
120
+ - [App Router](./__tests__/apps/app-router)
121
+
122
+ That's it! You can now use VueStorefront Next in your Next app ✨
package/dist/chunk-EX6ADWAR.mjs ADDED
@@ -0,0 +1,24 @@
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
+
21
+ export {
22
+ __spreadValues,
23
+ __spreadProps
24
+ };
package/dist/client.d.mts ADDED
@@ -0,0 +1,25 @@
1
+ import { SDKApi } from '@vue-storefront/sdk';
2
+ import React from 'react';
3
+ import { S as SdkProviderProps } from './types-m9jwrtV3.mjs';
4
+
5
+ /**
6
+ * Creates a new SDK context. This function is dedicated for the client-side usage.
7
+ *
8
+ * @example
9
+ * Create a new SDK context somewhere in your application. It may be the `hooks/sdk.ts` file.
10
+ *
11
+ * ```tsx
12
+ * import { createSdkContext } from "@vue-storefront/next/client";
13
+ * import { getSdk } from "../../sdk.config.ts";
14
+ *
15
+ * export const [SdkProvider, useSdk] = createSdkContext(getSdk());
16
+ * ```
17
+ * Then use the `SdkProvider` in the root component of your application.
18
+ * For Pages Router it would be the `pages/_app.tsx` file,
19
+ * and for the App Router it would be the `app/layout.tsx` file.
20
+ * Finally you can use the `useSdk` in any client component of your application.
21
+ * @returns [SdkProvider, useSdk] - The SDK provider and the `useSdk` hook.
22
+ */
23
+ declare function createSdkContext<TSdk extends SDKApi<any>>(sdk: TSdk): readonly [({ children }: SdkProviderProps) => React.JSX.Element, () => TSdk];
24
+
25
+ export { createSdkContext };
package/dist/client.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { SDKApi } from '@vue-storefront/sdk';
2
+ import React from 'react';
3
+ import { S as SdkProviderProps } from './types-m9jwrtV3.js';
4
+
5
+ /**
6
+ * Creates a new SDK context. This function is dedicated for the client-side usage.
7
+ *
8
+ * @example
9
+ * Create a new SDK context somewhere in your application. It may be the `hooks/sdk.ts` file.
10
+ *
11
+ * ```tsx
12
+ * import { createSdkContext } from "@vue-storefront/next/client";
13
+ * import { getSdk } from "../../sdk.config.ts";
14
+ *
15
+ * export const [SdkProvider, useSdk] = createSdkContext(getSdk());
16
+ * ```
17
+ * Then use the `SdkProvider` in the root component of your application.
18
+ * For Pages Router it would be the `pages/_app.tsx` file,
19
+ * and for the App Router it would be the `app/layout.tsx` file.
20
+ * Finally you can use the `useSdk` in any client component of your application.
21
+ * @returns [SdkProvider, useSdk] - The SDK provider and the `useSdk` hook.
22
+ */
23
+ declare function createSdkContext<TSdk extends SDKApi<any>>(sdk: TSdk): readonly [({ children }: SdkProviderProps) => React.JSX.Element, () => TSdk];
24
+
25
+ export { createSdkContext };
package/dist/client.js ADDED
@@ -0,0 +1,62 @@
1
+ "use client";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // src/client.ts
31
+ var client_exports = {};
32
+ __export(client_exports, {
33
+ createSdkContext: () => createSdkContext
34
+ });
35
+ module.exports = __toCommonJS(client_exports);
36
+
37
+ // src/sdk/client.tsx
38
+ var import_script = __toESM(require("next/script"));
39
+ var import_react = __toESM(require("react"));
40
+ function createSdkContext(sdk) {
41
+ const SdkContext = (0, import_react.createContext)(sdk);
42
+ function SdkProvider({ children }) {
43
+ return /* @__PURE__ */ import_react.default.createElement(SdkContext.Provider, { value: sdk }, /* @__PURE__ */ import_react.default.createElement(import_script.default, { strategy: "beforeInteractive", id: "vsfMetaTag" }, `
44
+ const vsfMetaTag = document.createElement("meta");
45
+ vsfMetaTag.setAttribute("name", "generator");
46
+ vsfMetaTag.setAttribute("content", "Vue Storefront 2");
47
+ document.head.appendChild(vsfMetaTag);
48
+ `), children);
49
+ }
50
+ const useSdk = () => {
51
+ const contextSdk = (0, import_react.useContext)(SdkContext);
52
+ if (!contextSdk) {
53
+ throw new Error("useSdk must be used within a SdkProvider");
54
+ }
55
+ return contextSdk;
56
+ };
57
+ return [SdkProvider, useSdk];
58
+ }
59
+ // Annotate the CommonJS export names for ESM import in node:
60
+ 0 && (module.exports = {
61
+ createSdkContext
62
+ });
package/dist/client.mjs ADDED
@@ -0,0 +1,28 @@
1
+ "use client";
2
+ import "./chunk-EX6ADWAR.mjs";
3
+
4
+ // src/sdk/client.tsx
5
+ import Script from "next/script";
6
+ import React, { createContext, useContext } from "react";
7
+ function createSdkContext(sdk) {
8
+ const SdkContext = createContext(sdk);
9
+ function SdkProvider({ children }) {
10
+ return /* @__PURE__ */ React.createElement(SdkContext.Provider, { value: sdk }, /* @__PURE__ */ React.createElement(Script, { strategy: "beforeInteractive", id: "vsfMetaTag" }, `
11
+ const vsfMetaTag = document.createElement("meta");
12
+ vsfMetaTag.setAttribute("name", "generator");
13
+ vsfMetaTag.setAttribute("content", "Vue Storefront 2");
14
+ document.head.appendChild(vsfMetaTag);
15
+ `), children);
16
+ }
17
+ const useSdk = () => {
18
+ const contextSdk = useContext(SdkContext);
19
+ if (!contextSdk) {
20
+ throw new Error("useSdk must be used within a SdkProvider");
21
+ }
22
+ return contextSdk;
23
+ };
24
+ return [SdkProvider, useSdk];
25
+ }
26
+ export {
27
+ createSdkContext
28
+ };
package/dist/index.d.mts ADDED
@@ -0,0 +1,69 @@
1
+ import { C as Config, a as CreateSdkReturn } from './types-m9jwrtV3.mjs';
2
+ import '@vue-storefront/sdk';
3
+ import 'react';
4
+
5
+ interface MiddlewareConfig {
6
+ /**
7
+ * The URL of the middleware.
8
+ * @example "http://localhost:4000"
9
+ */
10
+ apiUrl: string;
11
+ /**
12
+ * The URL of the middleware for server-side rendering.
13
+ * @example "http://localhost:4000"
14
+ */
15
+ ssrApiUrl?: string;
16
+ }
17
+ interface MultistoreConfig {
18
+ /**
19
+ * Whether the multistore is enabled or not.
20
+ * @example false
21
+ * @default false
22
+ */
23
+ enabled: boolean;
24
+ }
25
+ interface CreateSdkOptions {
26
+ multistore?: MultistoreConfig;
27
+ middleware: MiddlewareConfig;
28
+ }
29
+
30
+ /**
31
+ * Creates an SDK for the given configuration definition.
32
+ * @param options - The options for creating the SDK.
33
+ * @param configDefinition - The configuration definition for the SDK.
34
+ * @returns An object containing the `getSdk` function.
35
+ * @example
36
+ * ```tsx
37
+ * import {
38
+ * contentfulModule,
39
+ * ContentfulModuleType,
40
+ * } from "@vsf-enterprise/contentful-sdk";
41
+ * import { unifiedModule } from "@vsf-enterprise/unified-sdk";
42
+ * import { CreateSdkOptions, createSdk } from "@vue-storefront/next";
43
+ * import type { UnifiedApiExtension } from "../storefront-middleware/middleware.config";
44
+ *
45
+ * const options: CreateSdkOptions = {
46
+ * middleware: {
47
+ * apiUrl: "http://localhost:4000",
48
+ * },
49
+ * };
50
+ *
51
+ * export const { getSdk, createSdkContext } = createSdk(
52
+ * options,
53
+ * ({ buildModule, middlewareUrl, getRequestHeaders }) => ({
54
+ * unified: buildModule(unifiedModule<UnifiedApiExtension>, {
55
+ * apiUrl: middlewareUrl + "/commerce",
56
+ * requestOptions: {
57
+ * headers: getRequestHeaders,
58
+ * },
59
+ * }),
60
+ * contentful: buildModule<ContentfulModuleType>(contentfulModule, {
61
+ * apiUrl: middlewareUrl + "/cntf",
62
+ * }),
63
+ * }),
64
+ * );
65
+ * ```
66
+ */
67
+ declare function createSdk<TConfig extends Record<string, any>>(options: CreateSdkOptions, configDefinition: Config<TConfig>): CreateSdkReturn<TConfig>;
68
+
69
+ export { type CreateSdkOptions, createSdk };
package/dist/index.d.ts ADDED
@@ -0,0 +1,69 @@
1
+ import { C as Config, a as CreateSdkReturn } from './types-m9jwrtV3.js';
2
+ import '@vue-storefront/sdk';
3
+ import 'react';
4
+
5
+ interface MiddlewareConfig {
6
+ /**
7
+ * The URL of the middleware.
8
+ * @example "http://localhost:4000"
9
+ */
10
+ apiUrl: string;
11
+ /**
12
+ * The URL of the middleware for server-side rendering.
13
+ * @example "http://localhost:4000"
14
+ */
15
+ ssrApiUrl?: string;
16
+ }
17
+ interface MultistoreConfig {
18
+ /**
19
+ * Whether the multistore is enabled or not.
20
+ * @example false
21
+ * @default false
22
+ */
23
+ enabled: boolean;
24
+ }
25
+ interface CreateSdkOptions {
26
+ multistore?: MultistoreConfig;
27
+ middleware: MiddlewareConfig;
28
+ }
29
+
30
+ /**
31
+ * Creates an SDK for the given configuration definition.
32
+ * @param options - The options for creating the SDK.
33
+ * @param configDefinition - The configuration definition for the SDK.
34
+ * @returns An object containing the `getSdk` function.
35
+ * @example
36
+ * ```tsx
37
+ * import {
38
+ * contentfulModule,
39
+ * ContentfulModuleType,
40
+ * } from "@vsf-enterprise/contentful-sdk";
41
+ * import { unifiedModule } from "@vsf-enterprise/unified-sdk";
42
+ * import { CreateSdkOptions, createSdk } from "@vue-storefront/next";
43
+ * import type { UnifiedApiExtension } from "../storefront-middleware/middleware.config";
44
+ *
45
+ * const options: CreateSdkOptions = {
46
+ * middleware: {
47
+ * apiUrl: "http://localhost:4000",
48
+ * },
49
+ * };
50
+ *
51
+ * export const { getSdk, createSdkContext } = createSdk(
52
+ * options,
53
+ * ({ buildModule, middlewareUrl, getRequestHeaders }) => ({
54
+ * unified: buildModule(unifiedModule<UnifiedApiExtension>, {
55
+ * apiUrl: middlewareUrl + "/commerce",
56
+ * requestOptions: {
57
+ * headers: getRequestHeaders,
58
+ * },
59
+ * }),
60
+ * contentful: buildModule<ContentfulModuleType>(contentfulModule, {
61
+ * apiUrl: middlewareUrl + "/cntf",
62
+ * }),
63
+ * }),
64
+ * );
65
+ * ```
66
+ */
67
+ declare function createSdk<TConfig extends Record<string, any>>(options: CreateSdkOptions, configDefinition: Config<TConfig>): CreateSdkReturn<TConfig>;
68
+
69
+ export { type CreateSdkOptions, createSdk };
package/dist/index.js ADDED
@@ -0,0 +1,121 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
9
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10
+ var __spreadValues = (a, b) => {
11
+ for (var prop in b || (b = {}))
12
+ if (__hasOwnProp.call(b, prop))
13
+ __defNormalProp(a, prop, b[prop]);
14
+ if (__getOwnPropSymbols)
15
+ for (var prop of __getOwnPropSymbols(b)) {
16
+ if (__propIsEnum.call(b, prop))
17
+ __defNormalProp(a, prop, b[prop]);
18
+ }
19
+ return a;
20
+ };
21
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
22
+ var __export = (target, all) => {
23
+ for (var name in all)
24
+ __defProp(target, name, { get: all[name], enumerable: true });
25
+ };
26
+ var __copyProps = (to, from, except, desc) => {
27
+ if (from && typeof from === "object" || typeof from === "function") {
28
+ for (let key of __getOwnPropNames(from))
29
+ if (!__hasOwnProp.call(to, key) && key !== except)
30
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
31
+ }
32
+ return to;
33
+ };
34
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
35
+
36
+ // src/index.ts
37
+ var src_exports = {};
38
+ __export(src_exports, {
39
+ createSdk: () => createSdk
40
+ });
41
+ module.exports = __toCommonJS(src_exports);
42
+
43
+ // ../../shared/src/helpers/composeMiddlewareUrl.ts
44
+ function calculateMiddlewareUrl({
45
+ options,
46
+ headers
47
+ }) {
48
+ var _a, _b;
49
+ const { apiUrl, ssrApiUrl } = options.middleware;
50
+ if (typeof window !== "undefined") {
51
+ return apiUrl;
52
+ }
53
+ if (ssrApiUrl) {
54
+ return ssrApiUrl;
55
+ }
56
+ if (!((_a = options.multistore) == null ? void 0 : _a.enabled)) {
57
+ return apiUrl;
58
+ }
59
+ const forwardedHost = (_b = headers["x-forwarded-host"]) != null ? _b : headers.host;
60
+ const resolvedForwardedHost = forwardedHost && Array.isArray(forwardedHost) ? forwardedHost[0] : forwardedHost;
61
+ const url = new URL(apiUrl);
62
+ url.host = resolvedForwardedHost || new URL(apiUrl).host;
63
+ return url.href;
64
+ }
65
+ function removeTrailingSlash(url) {
66
+ return url.replace(/\/$/, "");
67
+ }
68
+ function composeMiddlewareUrl({
69
+ options,
70
+ headers
71
+ }) {
72
+ const url = calculateMiddlewareUrl({ options, headers });
73
+ return removeTrailingSlash(url);
74
+ }
75
+
76
+ // src/sdk/index.tsx
77
+ var import_sdk = require("@vue-storefront/sdk");
78
+
79
+ // src/sdk/helpers/resolveDynamicContext.ts
80
+ var BLACKLISTED_HEADERS = /* @__PURE__ */ new Set(["host"]);
81
+ function isAppRouterHeaders(headers) {
82
+ return headers && "entries" in headers;
83
+ }
84
+ function resolveDynamicContext(context) {
85
+ return __spreadProps(__spreadValues({}, context), {
86
+ getRequestHeaders() {
87
+ var _a;
88
+ const headers = ((_a = context.getRequestHeaders) == null ? void 0 : _a.call(context)) || {};
89
+ const resolvedHeaders = isAppRouterHeaders(headers) ? Object.fromEntries(headers.entries()) : headers;
90
+ return Object.fromEntries(
91
+ Object.entries(resolvedHeaders).filter(
92
+ ([key]) => !BLACKLISTED_HEADERS.has(key)
93
+ )
94
+ );
95
+ }
96
+ });
97
+ }
98
+
99
+ // src/sdk/index.tsx
100
+ function createSdk(options, configDefinition) {
101
+ function getSdk(dynamicContext = {}) {
102
+ const { getRequestHeaders } = resolveDynamicContext(dynamicContext);
103
+ const middlewareUrl = composeMiddlewareUrl({
104
+ options,
105
+ headers: getRequestHeaders()
106
+ });
107
+ const resolvedConfig = configDefinition({
108
+ buildModule: import_sdk.buildModule,
109
+ getRequestHeaders,
110
+ middlewareUrl
111
+ });
112
+ return (0, import_sdk.initSDK)(resolvedConfig);
113
+ }
114
+ return {
115
+ getSdk
116
+ };
117
+ }
118
+ // Annotate the CommonJS export names for ESM import in node:
119
+ 0 && (module.exports = {
120
+ createSdk
121
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,83 @@
1
+ import {
2
+ __spreadProps,
3
+ __spreadValues
4
+ } from "./chunk-EX6ADWAR.mjs";
5
+
6
+ // ../../shared/src/helpers/composeMiddlewareUrl.ts
7
+ function calculateMiddlewareUrl({
8
+ options,
9
+ headers
10
+ }) {
11
+ var _a, _b;
12
+ const { apiUrl, ssrApiUrl } = options.middleware;
13
+ if (typeof window !== "undefined") {
14
+ return apiUrl;
15
+ }
16
+ if (ssrApiUrl) {
17
+ return ssrApiUrl;
18
+ }
19
+ if (!((_a = options.multistore) == null ? void 0 : _a.enabled)) {
20
+ return apiUrl;
21
+ }
22
+ const forwardedHost = (_b = headers["x-forwarded-host"]) != null ? _b : headers.host;
23
+ const resolvedForwardedHost = forwardedHost && Array.isArray(forwardedHost) ? forwardedHost[0] : forwardedHost;
24
+ const url = new URL(apiUrl);
25
+ url.host = resolvedForwardedHost || new URL(apiUrl).host;
26
+ return url.href;
27
+ }
28
+ function removeTrailingSlash(url) {
29
+ return url.replace(/\/$/, "");
30
+ }
31
+ function composeMiddlewareUrl({
32
+ options,
33
+ headers
34
+ }) {
35
+ const url = calculateMiddlewareUrl({ options, headers });
36
+ return removeTrailingSlash(url);
37
+ }
38
+
39
+ // src/sdk/index.tsx
40
+ import { buildModule, initSDK } from "@vue-storefront/sdk";
41
+
42
+ // src/sdk/helpers/resolveDynamicContext.ts
43
+ var BLACKLISTED_HEADERS = /* @__PURE__ */ new Set(["host"]);
44
+ function isAppRouterHeaders(headers) {
45
+ return headers && "entries" in headers;
46
+ }
47
+ function resolveDynamicContext(context) {
48
+ return __spreadProps(__spreadValues({}, context), {
49
+ getRequestHeaders() {
50
+ var _a;
51
+ const headers = ((_a = context.getRequestHeaders) == null ? void 0 : _a.call(context)) || {};
52
+ const resolvedHeaders = isAppRouterHeaders(headers) ? Object.fromEntries(headers.entries()) : headers;
53
+ return Object.fromEntries(
54
+ Object.entries(resolvedHeaders).filter(
55
+ ([key]) => !BLACKLISTED_HEADERS.has(key)
56
+ )
57
+ );
58
+ }
59
+ });
60
+ }
61
+
62
+ // src/sdk/index.tsx
63
+ function createSdk(options, configDefinition) {
64
+ function getSdk(dynamicContext = {}) {
65
+ const { getRequestHeaders } = resolveDynamicContext(dynamicContext);
66
+ const middlewareUrl = composeMiddlewareUrl({
67
+ options,
68
+ headers: getRequestHeaders()
69
+ });
70
+ const resolvedConfig = configDefinition({
71
+ buildModule,
72
+ getRequestHeaders,
73
+ middlewareUrl
74
+ });
75
+ return initSDK(resolvedConfig);
76
+ }
77
+ return {
78
+ getSdk
79
+ };
80
+ }
81
+ export {
82
+ createSdk
83
+ };
package/dist/types-m9jwrtV3.d.mts ADDED
@@ -0,0 +1,69 @@
1
+ import { SDKApi, buildModule } from '@vue-storefront/sdk';
2
+ import { ReactNode } from 'react';
3
+
4
+ type GetSdkContext = {
5
+ /**
6
+ * A function that returns the request headers.
7
+ */
8
+ getRequestHeaders?: () => Record<string, string | string[] | undefined> | Headers;
9
+ };
10
+ type DynamicContext = {
11
+ getRequestHeaders: () => Record<string, string | string[]>;
12
+ };
13
+ type StaticContext = {
14
+ buildModule: typeof buildModule;
15
+ middlewareUrl: string;
16
+ };
17
+ type InjectedContext = DynamicContext & StaticContext;
18
+ type Config<TConfig> = (context: InjectedContext) => TConfig;
19
+ type SdkProviderProps = {
20
+ children: ReactNode;
21
+ };
22
+ interface CreateSdkReturn<TConfig extends Record<string, any>> {
23
+ /**
24
+ * Creates a new SDK instance. This function is dedicated for server-side usage,
25
+ * where a new SDK instance should be created for each request.
26
+ * For the client side usage, use the `createSdkContext` function instead.
27
+ *
28
+ * @param dynamicContext - The dynamic, request-specific, context
29
+ *
30
+ * @returns The SDK instance.
31
+ *
32
+ * @example
33
+ * For the Pages Router, you can use the `getSdk` function in the `getServerSideProps` function:
34
+ * ```tsx
35
+ * import type { GetServerSideProps } from "next";
36
+ * import { getSdk } from "../../sdk.config";
37
+ *
38
+ * export const getServerSideProps: GetServerSideProps = async ({ req }) => {
39
+ * const sdk = getSdk({
40
+ * getRequestHeaders: () => req.headers,
41
+ * });
42
+ * const { products } = await sdk.unified.getProducts();
43
+ *
44
+ * return {
45
+ * props: {...}
46
+ * }
47
+ * };
48
+ * ```
49
+ *
50
+ * @example
51
+ * For the App Router, you can use the `getSdk` function in your React Server Component:
52
+ * ```tsx
53
+ * import { headers } from "next/headers";
54
+ * import { getSdk } from "../../sdk.config";
55
+ *
56
+ * export default async function SsrPage() {
57
+ * const sdk = getSdk({
58
+ * getRequestHeaders: () => headers(),
59
+ * });
60
+ * const { products } = await sdk.unified.getProducts();
61
+ *
62
+ * return <div>...</div>
63
+ * };
64
+ * ```
65
+ */
66
+ getSdk: (dynamicContext?: GetSdkContext) => SDKApi<TConfig>;
67
+ }
68
+
69
+ export type { Config as C, SdkProviderProps as S, CreateSdkReturn as a };
package/dist/types-m9jwrtV3.d.ts ADDED
@@ -0,0 +1,69 @@
1
+ import { SDKApi, buildModule } from '@vue-storefront/sdk';
2
+ import { ReactNode } from 'react';
3
+
4
+ type GetSdkContext = {
5
+ /**
6
+ * A function that returns the request headers.
7
+ */
8
+ getRequestHeaders?: () => Record<string, string | string[] | undefined> | Headers;
9
+ };
10
+ type DynamicContext = {
11
+ getRequestHeaders: () => Record<string, string | string[]>;
12
+ };
13
+ type StaticContext = {
14
+ buildModule: typeof buildModule;
15
+ middlewareUrl: string;
16
+ };
17
+ type InjectedContext = DynamicContext & StaticContext;
18
+ type Config<TConfig> = (context: InjectedContext) => TConfig;
19
+ type SdkProviderProps = {
20
+ children: ReactNode;
21
+ };
22
+ interface CreateSdkReturn<TConfig extends Record<string, any>> {
23
+ /**
24
+ * Creates a new SDK instance. This function is dedicated for server-side usage,
25
+ * where a new SDK instance should be created for each request.
26
+ * For the client side usage, use the `createSdkContext` function instead.
27
+ *
28
+ * @param dynamicContext - The dynamic, request-specific, context
29
+ *
30
+ * @returns The SDK instance.
31
+ *
32
+ * @example
33
+ * For the Pages Router, you can use the `getSdk` function in the `getServerSideProps` function:
34
+ * ```tsx
35
+ * import type { GetServerSideProps } from "next";
36
+ * import { getSdk } from "../../sdk.config";
37
+ *
38
+ * export const getServerSideProps: GetServerSideProps = async ({ req }) => {
39
+ * const sdk = getSdk({
40
+ * getRequestHeaders: () => req.headers,
41
+ * });
42
+ * const { products } = await sdk.unified.getProducts();
43
+ *
44
+ * return {
45
+ * props: {...}
46
+ * }
47
+ * };
48
+ * ```
49
+ *
50
+ * @example
51
+ * For the App Router, you can use the `getSdk` function in your React Server Component:
52
+ * ```tsx
53
+ * import { headers } from "next/headers";
54
+ * import { getSdk } from "../../sdk.config";
55
+ *
56
+ * export default async function SsrPage() {
57
+ * const sdk = getSdk({
58
+ * getRequestHeaders: () => headers(),
59
+ * });
60
+ * const { products } = await sdk.unified.getProducts();
61
+ *
62
+ * return <div>...</div>
63
+ * };
64
+ * ```
65
+ */
66
+ getSdk: (dynamicContext?: GetSdkContext) => SDKApi<TConfig>;
67
+ }
68
+
69
+ export type { Config as C, SdkProviderProps as S, CreateSdkReturn as a };
package/package.json ADDED
@@ -0,0 +1,62 @@
1
+ {
2
+ "name": "@vue-storefront/next",
3
+ "description": "Vue Storefront dedicated features for Next.js",
4
+ "license": "MIT",
5
+ "version": "0.0.1",
6
+ "exports": {
7
+ ".": {
8
+ "import": "./dist/index.mjs",
9
+ "require": "./dist/index.js",
10
+ "types": "./dist/index.d.ts"
11
+ },
12
+ "./client": {
13
+ "import": "./dist/client.js",
14
+ "require": "./dist/client.js",
15
+ "types": "./dist/client.d.ts"
16
+ }
17
+ },
18
+ "typesVersions": {
19
+ "*": {
20
+ "*": [
21
+ "dist/index.d.ts"
22
+ ],
23
+ "client": [
24
+ "dist/client.d.ts"
25
+ ]
26
+ }
27
+ },
28
+ "files": [
29
+ "dist"
30
+ ],
31
+ "scripts": {
32
+ "build": "tsup && yarn build:app-router && yarn build:pages-router",
33
+ "build:app-router": "cd __tests__/apps/app-router && yarn build",
34
+ "build:pages-router": "cd __tests__/apps/pages-router && yarn build",
35
+ "dev:app-router": "cd __tests__/apps/app-router && yarn dev",
36
+ "dev:pages-router": "cd __tests__/apps/pages-router && yarn dev",
37
+ "dev:middleware": "cd ../../shared/src/__tests__/middleware && yarn dev",
38
+ "lint": "eslint . --ext .ts",
39
+ "test:app-router": "start-server-and-test dev:middleware localhost:4000/test_integration/success dev:app-router localhost:3000 \"yarn test:e2e\"",
40
+ "test:pages-router": "start-server-and-test dev:middleware localhost:4000/test_integration/success dev:pages-router localhost:3000 \"yarn test:e2e\"",
41
+ "test": "yarn test:app-router && yarn test:pages-router",
42
+ "test:e2e": "cd ../../shared/ && yarn test:e2e",
43
+ "test:unit": "vitest run"
44
+ },
45
+ "devDependencies": {
46
+ "@types/react": "^18.2.31",
47
+ "@types/react-dom": "^18.2.14",
48
+ "react-dom": "^18.2.0",
49
+ "start-server-and-test": "^2.0.3",
50
+ "tsup": "8.0.1",
51
+ "vitest": "^0.34.6"
52
+ },
53
+ "peerDependencies": {
54
+ "@vue-storefront/sdk": "^1.0.0",
55
+ "react": "^18.2.0",
56
+ "next": "^13.4.7 || ^14.0.0"
57
+ },
58
+ "engines": {
59
+ "npm": ">=8.0.0",
60
+ "node": ">=18.0.0"
61
+ }
62
+ }