@shopify/hydrogen-react 0.0.0-next-ebab9ba → 0.0.0-next-5c16c78
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 +24 -30
- package/dist/browser-dev/flatten-connection.mjs +7 -5
- package/dist/browser-dev/flatten-connection.mjs.map +1 -1
- package/dist/browser-prod/flatten-connection.mjs +7 -5
- package/dist/browser-prod/flatten-connection.mjs.map +1 -1
- package/dist/node-dev/flatten-connection.js +7 -5
- package/dist/node-dev/flatten-connection.js.map +1 -1
- package/dist/node-dev/flatten-connection.mjs +7 -5
- package/dist/node-dev/flatten-connection.mjs.map +1 -1
- package/dist/node-prod/flatten-connection.js +7 -5
- package/dist/node-prod/flatten-connection.js.map +1 -1
- package/dist/node-prod/flatten-connection.mjs +7 -5
- package/dist/node-prod/flatten-connection.mjs.map +1 -1
- package/dist/types/flatten-connection.d.ts +29 -9
- package/dist/umd/hydrogen-react.dev.js +7 -5
- package/dist/umd/hydrogen-react.dev.js.map +1 -1
- package/dist/umd/hydrogen-react.prod.js +1 -1
- package/dist/umd/hydrogen-react.prod.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -178,11 +178,31 @@ GraphQL autocompletion and validation will now work in `.graphql` files and in [
|
|
|
178
178
|
|
|
179
179
|
If you're having trouble getting it to work, then consult our [troubleshooting section](#graphql-autocompletion).
|
|
180
180
|
|
|
181
|
-
##
|
|
181
|
+
## TypeScript
|
|
182
182
|
|
|
183
|
-
Improve your development experience by
|
|
183
|
+
Improve your development experience by using storefront-kit's generated Types and helpers.
|
|
184
184
|
|
|
185
|
-
|
|
185
|
+
### Storefront API types
|
|
186
|
+
|
|
187
|
+
Storefront-Kit ships with generated TypeScript types that match the Storefront API and its objects. Import them from the `/storefront-api-types` package path:
|
|
188
|
+
|
|
189
|
+
```ts
|
|
190
|
+
import type {Product} from '@shopify/hydrogen-react/storefront-api-types';
|
|
191
|
+
|
|
192
|
+
const product: Product = {};
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
You can also use TypeScript's built-in helpers to create your own Types to fit your needs:
|
|
196
|
+
|
|
197
|
+
```ts
|
|
198
|
+
const partialProduct: Partial<Product> = {};
|
|
199
|
+
|
|
200
|
+
const productTitle: Pick<Product, 'title'> = '';
|
|
201
|
+
|
|
202
|
+
const productExceptTitle: Omit<Product, 'title'> = {};
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
### GraphQL CodeGen
|
|
186
206
|
|
|
187
207
|
To use GraphQL CodeGen, follow [their guide](https://the-guild.dev/graphql/codegen/docs/getting-started/installation) to get started. Then, when you have a `codegen.ts` file, you can modify the following lines in the codegen object to improve the CodgeGen experience:
|
|
188
208
|
|
|
@@ -205,7 +225,7 @@ const config: CodegenConfig = {
|
|
|
205
225
|
};
|
|
206
226
|
```
|
|
207
227
|
|
|
208
|
-
###
|
|
228
|
+
### The `StorefrontApiResponseError` and `StorefrontApiResponseOk` helpers
|
|
209
229
|
|
|
210
230
|
The following is an example:
|
|
211
231
|
|
|
@@ -230,32 +250,6 @@ async function FetchApi<DataGeneric>() {
|
|
|
230
250
|
}
|
|
231
251
|
```
|
|
232
252
|
|
|
233
|
-
### Use the `StorefrontApiResponse` helper
|
|
234
|
-
|
|
235
|
-
If you're using a library that handles 400/500 level errors for you, then you can use `StorefrontApiResponse`. To add typing to objects that are trying to match a Storefront API object shape, you can import the shape.
|
|
236
|
-
|
|
237
|
-
The following is an example:
|
|
238
|
-
|
|
239
|
-
```ts
|
|
240
|
-
import type {Product} from '@shopify/hydrogen-react/storefront-api-types';
|
|
241
|
-
|
|
242
|
-
const product: Product = {};
|
|
243
|
-
```
|
|
244
|
-
|
|
245
|
-
### Use TypeScript's helpers
|
|
246
|
-
|
|
247
|
-
To create your own object shapes, you can use TypeScript's built-in helpers.
|
|
248
|
-
|
|
249
|
-
The following is an example:
|
|
250
|
-
|
|
251
|
-
```ts
|
|
252
|
-
const partialProduct: Partial<Product> = {};
|
|
253
|
-
|
|
254
|
-
const productTitle: Pick<Product, 'title'> = '';
|
|
255
|
-
|
|
256
|
-
const productExceptTitle: Omit<Product, 'title'> = {};
|
|
257
|
-
```
|
|
258
|
-
|
|
259
253
|
## Troubleshooting
|
|
260
254
|
|
|
261
255
|
The following will help you troubleshoot common problems in this version of Hydrogen UI.
|
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
function flattenConnection(connection) {
|
|
2
2
|
if (!connection) {
|
|
3
|
-
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead
|
|
3
|
+
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;
|
|
4
4
|
{
|
|
5
5
|
throw new Error(noConnectionErr);
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
|
-
if (connection
|
|
8
|
+
if ("nodes" in connection) {
|
|
9
9
|
return connection.nodes;
|
|
10
10
|
}
|
|
11
|
-
if (connection.edges) {
|
|
11
|
+
if ("edges" in connection && Array.isArray(connection.edges)) {
|
|
12
12
|
return connection.edges.map((edge) => {
|
|
13
13
|
if (!(edge == null ? void 0 : edge.node)) {
|
|
14
|
-
throw new Error(
|
|
14
|
+
throw new Error(
|
|
15
|
+
"flattenConnection(): Connection edges must contain nodes"
|
|
16
|
+
);
|
|
15
17
|
}
|
|
16
18
|
return edge.node;
|
|
17
19
|
});
|
|
18
20
|
}
|
|
19
21
|
{
|
|
20
22
|
console.warn(
|
|
21
|
-
`The connection did not contain either "nodes" or "edges.node".
|
|
23
|
+
`flattenConnection(): The connection did not contain either "nodes" or "edges.node". Returning an empty array.`
|
|
22
24
|
);
|
|
23
25
|
}
|
|
24
26
|
return [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatten-connection.mjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<
|
|
1
|
+
{"version":3,"file":"flatten-connection.mjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<\n ConnectionGeneric extends\n | PartialDeep<ConnectionEdges, {recurseIntoArrays: true}>\n | PartialDeep<ConnectionNodes, {recurseIntoArrays: true}>\n | ConnectionEdges\n | ConnectionNodes\n>(\n connection?: ConnectionGeneric\n): ConnectionGeneric extends\n | {\n edges: {node: Array<infer ConnectionBaseType>};\n }\n | {\n nodes: Array<infer ConnectionBaseType>;\n }\n ? // if it's not a PartialDeep, then return the infered type\n ConnectionBaseType[]\n : ConnectionGeneric extends\n | PartialDeep<\n {edges: {node: Array<infer ConnectionBaseType>}},\n {recurseIntoArrays: true}\n >\n | PartialDeep<\n {\n nodes: Array<infer ConnectionBaseType>;\n },\n {recurseIntoArrays: true}\n >\n ? // if it is a PartialDeep, return a PartialDeep inferred type\n PartialDeep<ConnectionBaseType[], {recurseIntoArrays: true}>\n : never {\n if (!connection) {\n const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noConnectionErr);\n } else {\n console.error(noConnectionErr + ` Returning an empty array`);\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n }\n }\n\n if ('nodes' in connection) {\n // @ts-expect-error return type is failing\n return connection.nodes;\n }\n\n if ('edges' in connection && Array.isArray(connection.edges)) {\n // @ts-expect-error return type is failing\n return connection.edges.map((edge) => {\n if (!edge?.node) {\n throw new Error(\n 'flattenConnection(): Connection edges must contain nodes'\n );\n }\n return edge.node;\n });\n }\n\n if (__HYDROGEN_DEV__) {\n console.warn(\n `flattenConnection(): The connection did not contain either \"nodes\" or \"edges.node\". Returning an empty array.`\n );\n }\n\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n}\n\ntype ConnectionEdges = {\n edges: {node: Array<unknown>};\n};\n\ntype ConnectionNodes = {\n nodes: Array<unknown>;\n};\n"],"names":[],"mappings":"AAQO,SAAS,kBAOd,YAuBQ;AACR,MAAI,CAAC,YAAY;AACf,UAAM,kBAAkB,uEAAuE;AACzE;AACd,YAAA,IAAI,MAAM,eAAe;AAAA,IAKjC;AAAA,EACF;AAEA,MAAI,WAAW,YAAY;AAEzB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,cAAc,MAAM,QAAQ,WAAW,KAAK,GAAG;AAE5D,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAChC,UAAA,EAAC,6BAAM,OAAM;AACf,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AACA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AAEsB;AACZ,YAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAGA,SAAO;AACT;"}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
function flattenConnection(connection) {
|
|
2
2
|
if (!connection) {
|
|
3
|
-
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead
|
|
3
|
+
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;
|
|
4
4
|
{
|
|
5
|
-
console.error(noConnectionErr);
|
|
5
|
+
console.error(noConnectionErr + ` Returning an empty array`);
|
|
6
6
|
return [];
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
if (connection
|
|
9
|
+
if ("nodes" in connection) {
|
|
10
10
|
return connection.nodes;
|
|
11
11
|
}
|
|
12
|
-
if (connection.edges) {
|
|
12
|
+
if ("edges" in connection && Array.isArray(connection.edges)) {
|
|
13
13
|
return connection.edges.map((edge) => {
|
|
14
14
|
if (!(edge == null ? void 0 : edge.node)) {
|
|
15
|
-
throw new Error(
|
|
15
|
+
throw new Error(
|
|
16
|
+
"flattenConnection(): Connection edges must contain nodes"
|
|
17
|
+
);
|
|
16
18
|
}
|
|
17
19
|
return edge.node;
|
|
18
20
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatten-connection.mjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<
|
|
1
|
+
{"version":3,"file":"flatten-connection.mjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<\n ConnectionGeneric extends\n | PartialDeep<ConnectionEdges, {recurseIntoArrays: true}>\n | PartialDeep<ConnectionNodes, {recurseIntoArrays: true}>\n | ConnectionEdges\n | ConnectionNodes\n>(\n connection?: ConnectionGeneric\n): ConnectionGeneric extends\n | {\n edges: {node: Array<infer ConnectionBaseType>};\n }\n | {\n nodes: Array<infer ConnectionBaseType>;\n }\n ? // if it's not a PartialDeep, then return the infered type\n ConnectionBaseType[]\n : ConnectionGeneric extends\n | PartialDeep<\n {edges: {node: Array<infer ConnectionBaseType>}},\n {recurseIntoArrays: true}\n >\n | PartialDeep<\n {\n nodes: Array<infer ConnectionBaseType>;\n },\n {recurseIntoArrays: true}\n >\n ? // if it is a PartialDeep, return a PartialDeep inferred type\n PartialDeep<ConnectionBaseType[], {recurseIntoArrays: true}>\n : never {\n if (!connection) {\n const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noConnectionErr);\n } else {\n console.error(noConnectionErr + ` Returning an empty array`);\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n }\n }\n\n if ('nodes' in connection) {\n // @ts-expect-error return type is failing\n return connection.nodes;\n }\n\n if ('edges' in connection && Array.isArray(connection.edges)) {\n // @ts-expect-error return type is failing\n return connection.edges.map((edge) => {\n if (!edge?.node) {\n throw new Error(\n 'flattenConnection(): Connection edges must contain nodes'\n );\n }\n return edge.node;\n });\n }\n\n if (__HYDROGEN_DEV__) {\n console.warn(\n `flattenConnection(): The connection did not contain either \"nodes\" or \"edges.node\". Returning an empty array.`\n );\n }\n\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n}\n\ntype ConnectionEdges = {\n edges: {node: Array<unknown>};\n};\n\ntype ConnectionNodes = {\n nodes: Array<unknown>;\n};\n"],"names":[],"mappings":"AAQO,SAAS,kBAOd,YAuBQ;AACR,MAAI,CAAC,YAAY;AACf,UAAM,kBAAkB,uEAAuE;AAGxF;AACG,cAAA,MAAM,kBAAkB,2BAA2B;AAE3D,aAAO;IACT;AAAA,EACF;AAEA,MAAI,WAAW,YAAY;AAEzB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,cAAc,MAAM,QAAQ,WAAW,KAAK,GAAG;AAE5D,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAChC,UAAA,EAAC,6BAAM,OAAM;AACf,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AACA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AASA,SAAO;AACT;"}
|
|
@@ -2,25 +2,27 @@
|
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
3
|
function flattenConnection(connection) {
|
|
4
4
|
if (!connection) {
|
|
5
|
-
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead
|
|
5
|
+
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;
|
|
6
6
|
{
|
|
7
7
|
throw new Error(noConnectionErr);
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
|
-
if (connection
|
|
10
|
+
if ("nodes" in connection) {
|
|
11
11
|
return connection.nodes;
|
|
12
12
|
}
|
|
13
|
-
if (connection.edges) {
|
|
13
|
+
if ("edges" in connection && Array.isArray(connection.edges)) {
|
|
14
14
|
return connection.edges.map((edge) => {
|
|
15
15
|
if (!(edge == null ? void 0 : edge.node)) {
|
|
16
|
-
throw new Error(
|
|
16
|
+
throw new Error(
|
|
17
|
+
"flattenConnection(): Connection edges must contain nodes"
|
|
18
|
+
);
|
|
17
19
|
}
|
|
18
20
|
return edge.node;
|
|
19
21
|
});
|
|
20
22
|
}
|
|
21
23
|
{
|
|
22
24
|
console.warn(
|
|
23
|
-
`The connection did not contain either "nodes" or "edges.node".
|
|
25
|
+
`flattenConnection(): The connection did not contain either "nodes" or "edges.node". Returning an empty array.`
|
|
24
26
|
);
|
|
25
27
|
}
|
|
26
28
|
return [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatten-connection.js","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<
|
|
1
|
+
{"version":3,"file":"flatten-connection.js","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<\n ConnectionGeneric extends\n | PartialDeep<ConnectionEdges, {recurseIntoArrays: true}>\n | PartialDeep<ConnectionNodes, {recurseIntoArrays: true}>\n | ConnectionEdges\n | ConnectionNodes\n>(\n connection?: ConnectionGeneric\n): ConnectionGeneric extends\n | {\n edges: {node: Array<infer ConnectionBaseType>};\n }\n | {\n nodes: Array<infer ConnectionBaseType>;\n }\n ? // if it's not a PartialDeep, then return the infered type\n ConnectionBaseType[]\n : ConnectionGeneric extends\n | PartialDeep<\n {edges: {node: Array<infer ConnectionBaseType>}},\n {recurseIntoArrays: true}\n >\n | PartialDeep<\n {\n nodes: Array<infer ConnectionBaseType>;\n },\n {recurseIntoArrays: true}\n >\n ? // if it is a PartialDeep, return a PartialDeep inferred type\n PartialDeep<ConnectionBaseType[], {recurseIntoArrays: true}>\n : never {\n if (!connection) {\n const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noConnectionErr);\n } else {\n console.error(noConnectionErr + ` Returning an empty array`);\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n }\n }\n\n if ('nodes' in connection) {\n // @ts-expect-error return type is failing\n return connection.nodes;\n }\n\n if ('edges' in connection && Array.isArray(connection.edges)) {\n // @ts-expect-error return type is failing\n return connection.edges.map((edge) => {\n if (!edge?.node) {\n throw new Error(\n 'flattenConnection(): Connection edges must contain nodes'\n );\n }\n return edge.node;\n });\n }\n\n if (__HYDROGEN_DEV__) {\n console.warn(\n `flattenConnection(): The connection did not contain either \"nodes\" or \"edges.node\". Returning an empty array.`\n );\n }\n\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n}\n\ntype ConnectionEdges = {\n edges: {node: Array<unknown>};\n};\n\ntype ConnectionNodes = {\n nodes: Array<unknown>;\n};\n"],"names":[],"mappings":";;AAQO,SAAS,kBAOd,YAuBQ;AACR,MAAI,CAAC,YAAY;AACf,UAAM,kBAAkB,uEAAuE;AACzE;AACd,YAAA,IAAI,MAAM,eAAe;AAAA,IAKjC;AAAA,EACF;AAEA,MAAI,WAAW,YAAY;AAEzB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,cAAc,MAAM,QAAQ,WAAW,KAAK,GAAG;AAE5D,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAChC,UAAA,EAAC,6BAAM,OAAM;AACf,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AACA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AAEsB;AACZ,YAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAGA,SAAO;AACT;;"}
|
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
function flattenConnection(connection) {
|
|
2
2
|
if (!connection) {
|
|
3
|
-
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead
|
|
3
|
+
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;
|
|
4
4
|
{
|
|
5
5
|
throw new Error(noConnectionErr);
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
|
-
if (connection
|
|
8
|
+
if ("nodes" in connection) {
|
|
9
9
|
return connection.nodes;
|
|
10
10
|
}
|
|
11
|
-
if (connection.edges) {
|
|
11
|
+
if ("edges" in connection && Array.isArray(connection.edges)) {
|
|
12
12
|
return connection.edges.map((edge) => {
|
|
13
13
|
if (!(edge == null ? void 0 : edge.node)) {
|
|
14
|
-
throw new Error(
|
|
14
|
+
throw new Error(
|
|
15
|
+
"flattenConnection(): Connection edges must contain nodes"
|
|
16
|
+
);
|
|
15
17
|
}
|
|
16
18
|
return edge.node;
|
|
17
19
|
});
|
|
18
20
|
}
|
|
19
21
|
{
|
|
20
22
|
console.warn(
|
|
21
|
-
`The connection did not contain either "nodes" or "edges.node".
|
|
23
|
+
`flattenConnection(): The connection did not contain either "nodes" or "edges.node". Returning an empty array.`
|
|
22
24
|
);
|
|
23
25
|
}
|
|
24
26
|
return [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatten-connection.mjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<
|
|
1
|
+
{"version":3,"file":"flatten-connection.mjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<\n ConnectionGeneric extends\n | PartialDeep<ConnectionEdges, {recurseIntoArrays: true}>\n | PartialDeep<ConnectionNodes, {recurseIntoArrays: true}>\n | ConnectionEdges\n | ConnectionNodes\n>(\n connection?: ConnectionGeneric\n): ConnectionGeneric extends\n | {\n edges: {node: Array<infer ConnectionBaseType>};\n }\n | {\n nodes: Array<infer ConnectionBaseType>;\n }\n ? // if it's not a PartialDeep, then return the infered type\n ConnectionBaseType[]\n : ConnectionGeneric extends\n | PartialDeep<\n {edges: {node: Array<infer ConnectionBaseType>}},\n {recurseIntoArrays: true}\n >\n | PartialDeep<\n {\n nodes: Array<infer ConnectionBaseType>;\n },\n {recurseIntoArrays: true}\n >\n ? // if it is a PartialDeep, return a PartialDeep inferred type\n PartialDeep<ConnectionBaseType[], {recurseIntoArrays: true}>\n : never {\n if (!connection) {\n const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noConnectionErr);\n } else {\n console.error(noConnectionErr + ` Returning an empty array`);\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n }\n }\n\n if ('nodes' in connection) {\n // @ts-expect-error return type is failing\n return connection.nodes;\n }\n\n if ('edges' in connection && Array.isArray(connection.edges)) {\n // @ts-expect-error return type is failing\n return connection.edges.map((edge) => {\n if (!edge?.node) {\n throw new Error(\n 'flattenConnection(): Connection edges must contain nodes'\n );\n }\n return edge.node;\n });\n }\n\n if (__HYDROGEN_DEV__) {\n console.warn(\n `flattenConnection(): The connection did not contain either \"nodes\" or \"edges.node\". Returning an empty array.`\n );\n }\n\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n}\n\ntype ConnectionEdges = {\n edges: {node: Array<unknown>};\n};\n\ntype ConnectionNodes = {\n nodes: Array<unknown>;\n};\n"],"names":[],"mappings":"AAQO,SAAS,kBAOd,YAuBQ;AACR,MAAI,CAAC,YAAY;AACf,UAAM,kBAAkB,uEAAuE;AACzE;AACd,YAAA,IAAI,MAAM,eAAe;AAAA,IAKjC;AAAA,EACF;AAEA,MAAI,WAAW,YAAY;AAEzB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,cAAc,MAAM,QAAQ,WAAW,KAAK,GAAG;AAE5D,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAChC,UAAA,EAAC,6BAAM,OAAM;AACf,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AACA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AAEsB;AACZ,YAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAGA,SAAO;AACT;"}
|
|
@@ -2,19 +2,21 @@
|
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
3
|
function flattenConnection(connection) {
|
|
4
4
|
if (!connection) {
|
|
5
|
-
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead
|
|
5
|
+
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;
|
|
6
6
|
{
|
|
7
|
-
console.error(noConnectionErr);
|
|
7
|
+
console.error(noConnectionErr + ` Returning an empty array`);
|
|
8
8
|
return [];
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
|
-
if (connection
|
|
11
|
+
if ("nodes" in connection) {
|
|
12
12
|
return connection.nodes;
|
|
13
13
|
}
|
|
14
|
-
if (connection.edges) {
|
|
14
|
+
if ("edges" in connection && Array.isArray(connection.edges)) {
|
|
15
15
|
return connection.edges.map((edge) => {
|
|
16
16
|
if (!(edge == null ? void 0 : edge.node)) {
|
|
17
|
-
throw new Error(
|
|
17
|
+
throw new Error(
|
|
18
|
+
"flattenConnection(): Connection edges must contain nodes"
|
|
19
|
+
);
|
|
18
20
|
}
|
|
19
21
|
return edge.node;
|
|
20
22
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatten-connection.js","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<
|
|
1
|
+
{"version":3,"file":"flatten-connection.js","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<\n ConnectionGeneric extends\n | PartialDeep<ConnectionEdges, {recurseIntoArrays: true}>\n | PartialDeep<ConnectionNodes, {recurseIntoArrays: true}>\n | ConnectionEdges\n | ConnectionNodes\n>(\n connection?: ConnectionGeneric\n): ConnectionGeneric extends\n | {\n edges: {node: Array<infer ConnectionBaseType>};\n }\n | {\n nodes: Array<infer ConnectionBaseType>;\n }\n ? // if it's not a PartialDeep, then return the infered type\n ConnectionBaseType[]\n : ConnectionGeneric extends\n | PartialDeep<\n {edges: {node: Array<infer ConnectionBaseType>}},\n {recurseIntoArrays: true}\n >\n | PartialDeep<\n {\n nodes: Array<infer ConnectionBaseType>;\n },\n {recurseIntoArrays: true}\n >\n ? // if it is a PartialDeep, return a PartialDeep inferred type\n PartialDeep<ConnectionBaseType[], {recurseIntoArrays: true}>\n : never {\n if (!connection) {\n const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noConnectionErr);\n } else {\n console.error(noConnectionErr + ` Returning an empty array`);\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n }\n }\n\n if ('nodes' in connection) {\n // @ts-expect-error return type is failing\n return connection.nodes;\n }\n\n if ('edges' in connection && Array.isArray(connection.edges)) {\n // @ts-expect-error return type is failing\n return connection.edges.map((edge) => {\n if (!edge?.node) {\n throw new Error(\n 'flattenConnection(): Connection edges must contain nodes'\n );\n }\n return edge.node;\n });\n }\n\n if (__HYDROGEN_DEV__) {\n console.warn(\n `flattenConnection(): The connection did not contain either \"nodes\" or \"edges.node\". Returning an empty array.`\n );\n }\n\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n}\n\ntype ConnectionEdges = {\n edges: {node: Array<unknown>};\n};\n\ntype ConnectionNodes = {\n nodes: Array<unknown>;\n};\n"],"names":[],"mappings":";;AAQO,SAAS,kBAOd,YAuBQ;AACR,MAAI,CAAC,YAAY;AACf,UAAM,kBAAkB,uEAAuE;AAGxF;AACG,cAAA,MAAM,kBAAkB,2BAA2B;AAE3D,aAAO;IACT;AAAA,EACF;AAEA,MAAI,WAAW,YAAY;AAEzB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,cAAc,MAAM,QAAQ,WAAW,KAAK,GAAG;AAE5D,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAChC,UAAA,EAAC,6BAAM,OAAM;AACf,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AACA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AASA,SAAO;AACT;;"}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
function flattenConnection(connection) {
|
|
2
2
|
if (!connection) {
|
|
3
|
-
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead
|
|
3
|
+
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;
|
|
4
4
|
{
|
|
5
|
-
console.error(noConnectionErr);
|
|
5
|
+
console.error(noConnectionErr + ` Returning an empty array`);
|
|
6
6
|
return [];
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
if (connection
|
|
9
|
+
if ("nodes" in connection) {
|
|
10
10
|
return connection.nodes;
|
|
11
11
|
}
|
|
12
|
-
if (connection.edges) {
|
|
12
|
+
if ("edges" in connection && Array.isArray(connection.edges)) {
|
|
13
13
|
return connection.edges.map((edge) => {
|
|
14
14
|
if (!(edge == null ? void 0 : edge.node)) {
|
|
15
|
-
throw new Error(
|
|
15
|
+
throw new Error(
|
|
16
|
+
"flattenConnection(): Connection edges must contain nodes"
|
|
17
|
+
);
|
|
16
18
|
}
|
|
17
19
|
return edge.node;
|
|
18
20
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatten-connection.mjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<
|
|
1
|
+
{"version":3,"file":"flatten-connection.mjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<\n ConnectionGeneric extends\n | PartialDeep<ConnectionEdges, {recurseIntoArrays: true}>\n | PartialDeep<ConnectionNodes, {recurseIntoArrays: true}>\n | ConnectionEdges\n | ConnectionNodes\n>(\n connection?: ConnectionGeneric\n): ConnectionGeneric extends\n | {\n edges: {node: Array<infer ConnectionBaseType>};\n }\n | {\n nodes: Array<infer ConnectionBaseType>;\n }\n ? // if it's not a PartialDeep, then return the infered type\n ConnectionBaseType[]\n : ConnectionGeneric extends\n | PartialDeep<\n {edges: {node: Array<infer ConnectionBaseType>}},\n {recurseIntoArrays: true}\n >\n | PartialDeep<\n {\n nodes: Array<infer ConnectionBaseType>;\n },\n {recurseIntoArrays: true}\n >\n ? // if it is a PartialDeep, return a PartialDeep inferred type\n PartialDeep<ConnectionBaseType[], {recurseIntoArrays: true}>\n : never {\n if (!connection) {\n const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noConnectionErr);\n } else {\n console.error(noConnectionErr + ` Returning an empty array`);\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n }\n }\n\n if ('nodes' in connection) {\n // @ts-expect-error return type is failing\n return connection.nodes;\n }\n\n if ('edges' in connection && Array.isArray(connection.edges)) {\n // @ts-expect-error return type is failing\n return connection.edges.map((edge) => {\n if (!edge?.node) {\n throw new Error(\n 'flattenConnection(): Connection edges must contain nodes'\n );\n }\n return edge.node;\n });\n }\n\n if (__HYDROGEN_DEV__) {\n console.warn(\n `flattenConnection(): The connection did not contain either \"nodes\" or \"edges.node\". Returning an empty array.`\n );\n }\n\n // @ts-expect-error We don't want to crash prod, so return an empty array\n return [];\n}\n\ntype ConnectionEdges = {\n edges: {node: Array<unknown>};\n};\n\ntype ConnectionNodes = {\n nodes: Array<unknown>;\n};\n"],"names":[],"mappings":"AAQO,SAAS,kBAOd,YAuBQ;AACR,MAAI,CAAC,YAAY;AACf,UAAM,kBAAkB,uEAAuE;AAGxF;AACG,cAAA,MAAM,kBAAkB,2BAA2B;AAE3D,aAAO;IACT;AAAA,EACF;AAEA,MAAI,WAAW,YAAY;AAEzB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,cAAc,MAAM,QAAQ,WAAW,KAAK,GAAG;AAE5D,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAChC,UAAA,EAAC,6BAAM,OAAM;AACf,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AACA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AASA,SAAO;AACT;"}
|
|
@@ -5,15 +5,35 @@ import type { PartialDeep } from 'type-fest';
|
|
|
5
5
|
*
|
|
6
6
|
* If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
|
|
7
7
|
*/
|
|
8
|
-
export declare function flattenConnection<
|
|
8
|
+
export declare function flattenConnection<ConnectionGeneric extends PartialDeep<ConnectionEdges, {
|
|
9
9
|
recurseIntoArrays: true;
|
|
10
|
-
}>
|
|
10
|
+
}> | PartialDeep<ConnectionNodes, {
|
|
11
11
|
recurseIntoArrays: true;
|
|
12
|
-
}>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
nodes
|
|
18
|
-
}
|
|
12
|
+
}> | ConnectionEdges | ConnectionNodes>(connection?: ConnectionGeneric): ConnectionGeneric extends {
|
|
13
|
+
edges: {
|
|
14
|
+
node: Array<infer ConnectionBaseType>;
|
|
15
|
+
};
|
|
16
|
+
} | {
|
|
17
|
+
nodes: Array<infer ConnectionBaseType>;
|
|
18
|
+
} ? ConnectionBaseType[] : ConnectionGeneric extends PartialDeep<{
|
|
19
|
+
edges: {
|
|
20
|
+
node: Array<infer ConnectionBaseType>;
|
|
21
|
+
};
|
|
22
|
+
}, {
|
|
23
|
+
recurseIntoArrays: true;
|
|
24
|
+
}> | PartialDeep<{
|
|
25
|
+
nodes: Array<infer ConnectionBaseType>;
|
|
26
|
+
}, {
|
|
27
|
+
recurseIntoArrays: true;
|
|
28
|
+
}> ? PartialDeep<ConnectionBaseType[], {
|
|
29
|
+
recurseIntoArrays: true;
|
|
30
|
+
}> : never;
|
|
31
|
+
type ConnectionEdges = {
|
|
32
|
+
edges: {
|
|
33
|
+
node: Array<unknown>;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
type ConnectionNodes = {
|
|
37
|
+
nodes: Array<unknown>;
|
|
38
|
+
};
|
|
19
39
|
export {};
|
|
@@ -640,25 +640,27 @@
|
|
|
640
640
|
}
|
|
641
641
|
function flattenConnection(connection) {
|
|
642
642
|
if (!connection) {
|
|
643
|
-
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead
|
|
643
|
+
const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;
|
|
644
644
|
{
|
|
645
645
|
throw new Error(noConnectionErr);
|
|
646
646
|
}
|
|
647
647
|
}
|
|
648
|
-
if (connection
|
|
648
|
+
if ("nodes" in connection) {
|
|
649
649
|
return connection.nodes;
|
|
650
650
|
}
|
|
651
|
-
if (connection.edges) {
|
|
651
|
+
if ("edges" in connection && Array.isArray(connection.edges)) {
|
|
652
652
|
return connection.edges.map((edge) => {
|
|
653
653
|
if (!(edge == null ? void 0 : edge.node)) {
|
|
654
|
-
throw new Error(
|
|
654
|
+
throw new Error(
|
|
655
|
+
"flattenConnection(): Connection edges must contain nodes"
|
|
656
|
+
);
|
|
655
657
|
}
|
|
656
658
|
return edge.node;
|
|
657
659
|
});
|
|
658
660
|
}
|
|
659
661
|
{
|
|
660
662
|
console.warn(
|
|
661
|
-
`The connection did not contain either "nodes" or "edges.node".
|
|
663
|
+
`flattenConnection(): The connection did not contain either "nodes" or "edges.node". Returning an empty array.`
|
|
662
664
|
);
|
|
663
665
|
}
|
|
664
666
|
return [];
|