@shopify/cli 3.76.2 → 3.77.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/hydrogen/bundle/analyzer.html +21 -17
- package/dist/assets/hydrogen/starter/CHANGELOG.md +116 -36
- package/dist/assets/hydrogen/starter/app/layout.tsx +46 -0
- package/dist/assets/hydrogen/starter/app/root.tsx +1 -42
- package/dist/assets/hydrogen/starter/app/routes/search.tsx +4 -3
- package/dist/assets/hydrogen/starter/app/routes.ts +7 -0
- package/dist/assets/hydrogen/starter/package.json +17 -15
- package/dist/assets/hydrogen/starter/tsconfig.json +1 -1
- package/dist/assets/hydrogen/starter/vite.config.ts +2 -1
- package/dist/assets/hydrogen/tailwind/package.json +1 -1
- package/dist/assets/hydrogen/vanilla-extract/package.json +2 -2
- package/dist/assets/hydrogen/virtual-routes/assets/debug-network.css +27 -10
- package/dist/assets/hydrogen/virtual-routes/assets/styles.css +13 -2
- package/dist/assets/hydrogen/virtual-routes/layout.jsx +39 -0
- package/dist/assets/hydrogen/virtual-routes/virtual-root-with-layout.jsx +63 -0
- package/dist/assets/hydrogen/virtual-routes/virtual-root.jsx +10 -8
- package/dist/assets/hydrogen/vite/package.json +1 -1
- package/dist/assets/hydrogen/vite/vite.config.js +1 -0
- package/dist/{chunk-SROPQDQ2.js → chunk-3LPRAP3C.js} +4 -4
- package/dist/{chunk-TYXJ553W.js → chunk-4QUBSR5N.js} +2 -2
- package/dist/{chunk-ZUCWDIGE.js → chunk-57Q6OQG4.js} +2 -2
- package/dist/{chunk-AZ3SNZKH.js → chunk-5Y3LMFTE.js} +3 -3
- package/dist/{chunk-2WTNMSEA.js → chunk-7N6KTS5H.js} +3 -3
- package/dist/{chunk-BJXULBKX.js → chunk-7TDJWEEF.js} +143 -28
- package/dist/{chunk-3UYXKXR6.js → chunk-7Z57GKMD.js} +21 -8
- package/dist/{chunk-IKXB6S5W.js → chunk-CYZVSCKE.js} +2 -2
- package/dist/{chunk-SO2JXJNK.js → chunk-DE23IXCV.js} +7 -7
- package/dist/{chunk-WFJKWPG7.js → chunk-DXETR7HO.js} +4 -4
- package/dist/{chunk-DZC6PFFO.js → chunk-F7YDVUG6.js} +2 -2
- package/dist/{chunk-7ZRFR7FA.js → chunk-FGOKII2H.js} +7 -7
- package/dist/{chunk-J64C3R6H.js → chunk-G2Z2JNWZ.js} +3 -3
- package/dist/{chunk-DTR7ATW4.js → chunk-HL6ZWA6P.js} +3 -3
- package/dist/{chunk-CBRJA5VT.js → chunk-IDLVFDLS.js} +4 -4
- package/dist/{chunk-EPUCFUDR.js → chunk-J2TFYL5Z.js} +3 -3
- package/dist/{chunk-OSETU22I.js → chunk-JA44NPON.js} +3 -3
- package/dist/{chunk-WYLW7KVV.js → chunk-KMLSEENO.js} +3 -3
- package/dist/{chunk-3DV6EZ24.js → chunk-KRRCKFNF.js} +7 -7
- package/dist/{chunk-VXUNILLD.js → chunk-LGVMVIUY.js} +6 -3
- package/dist/{chunk-LLYJXSNC.js → chunk-MJ5E3G6Z.js} +3 -3
- package/dist/{chunk-MIAZDAJI.js → chunk-NKPXKN63.js} +2 -2
- package/dist/{chunk-XAK5UQFR.js → chunk-NMVJRPWT.js} +2 -2
- package/dist/{chunk-J4VMFBCX.js → chunk-ODZP3BOI.js} +3 -3
- package/dist/{chunk-WOA7JN7E.js → chunk-OZYTPWJS.js} +12 -8
- package/dist/{chunk-6RHYOJ63.js → chunk-PFXZ73LI.js} +5 -5
- package/dist/{chunk-KTICPCDH.js → chunk-RXPX6QL6.js} +4 -4
- package/dist/{chunk-PNWJ2GZC.js → chunk-THDGA4UF.js} +5 -5
- package/dist/{chunk-AHNHLXEN.js → chunk-TIMSXB7V.js} +9 -6
- package/dist/{chunk-XOWOZYS5.js → chunk-V24VKC54.js} +3 -3
- package/dist/{chunk-JMXX7A4N.js → chunk-V2EXSXIB.js} +2 -2
- package/dist/{chunk-QP45KHVL.js → chunk-Y7SMROY2.js} +214 -121
- package/dist/{chunk-TKC27SYH.js → chunk-YKGXAR4K.js} +268 -241
- package/dist/{chunk-WXONIGO7.js → chunk-YUFBJAT6.js} +5 -2
- package/dist/{chunk-KI626P2Z.js → chunk-YW77LWOY.js} +3 -3
- package/dist/{chunk-3IUNQ4LM.js → chunk-ZPXCGFEZ.js} +4 -4
- package/dist/cli/commands/auth/logout.js +12 -12
- package/dist/cli/commands/auth/logout.test.js +13 -13
- package/dist/cli/commands/cache/clear.js +11 -11
- package/dist/cli/commands/debug/command-flags.js +11 -11
- package/dist/cli/commands/docs/generate.js +11 -11
- package/dist/cli/commands/docs/generate.test.js +11 -11
- package/dist/cli/commands/help.d.ts +1 -0
- package/dist/cli/commands/help.js +11 -11
- package/dist/cli/commands/kitchen-sink/async.js +12 -12
- package/dist/cli/commands/kitchen-sink/async.test.js +12 -12
- package/dist/cli/commands/kitchen-sink/index.js +14 -14
- package/dist/cli/commands/kitchen-sink/index.test.js +14 -14
- package/dist/cli/commands/kitchen-sink/prompts.js +12 -12
- package/dist/cli/commands/kitchen-sink/prompts.test.js +12 -12
- package/dist/cli/commands/kitchen-sink/static.js +12 -12
- package/dist/cli/commands/kitchen-sink/static.test.js +12 -12
- package/dist/cli/commands/notifications/generate.js +12 -12
- package/dist/cli/commands/notifications/list.js +12 -12
- package/dist/cli/commands/search.d.ts +1 -0
- package/dist/cli/commands/search.js +12 -12
- package/dist/cli/commands/upgrade.js +12 -12
- package/dist/cli/commands/version.js +12 -12
- package/dist/cli/commands/version.test.js +12 -12
- package/dist/cli/services/commands/notifications.js +7 -7
- package/dist/cli/services/commands/search.js +3 -3
- package/dist/cli/services/commands/search.test.js +3 -3
- package/dist/cli/services/commands/version.js +4 -4
- package/dist/cli/services/commands/version.test.js +5 -5
- package/dist/cli/services/kitchen-sink/async.js +3 -3
- package/dist/cli/services/kitchen-sink/prompts.js +3 -3
- package/dist/cli/services/kitchen-sink/static.js +3 -3
- package/dist/cli/services/upgrade.js +4 -4
- package/dist/cli/services/upgrade.test.js +5 -5
- package/dist/configs/all.yml +39 -3
- package/dist/configs/recommended.yml +36 -0
- package/dist/configs/theme-app-extension.yml +3 -3
- package/dist/{custom-oclif-loader-FMEBF4P4.js → custom-oclif-loader-OE7KHHEX.js} +3 -3
- package/dist/data/filters.json +270 -327
- package/dist/data/latest.json +1 -1
- package/dist/data/objects.json +1482 -3709
- package/dist/data/preset.json +6 -0
- package/dist/data/preset_blocks.json +6 -0
- package/dist/data/setting.json +167 -50
- package/dist/data/tags.json +45 -101
- package/dist/{error-handler-AMKMVQCR.js → error-handler-CLK6ULQD.js} +9 -9
- package/dist/hooks/postrun.js +7 -7
- package/dist/hooks/prerun.js +8 -8
- package/dist/index.js +6785 -2452
- package/dist/{local-2RXSPQ2I.js → local-YA7BWRS4.js} +3 -3
- package/dist/{morph-WRZ7XCTF.js → morph-UGAQHTEA.js} +9 -9
- package/dist/{node-X35R6UYP.js → node-66AIONQH.js} +15 -15
- package/dist/{node-package-manager-3GAIXEER.js → node-package-manager-BD2U7LUE.js} +4 -4
- package/dist/{path-GWAZZN2N.js → path-2K5HIMHZ.js} +2 -2
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/{ui-MTRH5XFP.js → ui-UIXIY6XH.js} +3 -3
- package/dist/{workerd-EHYW43DG.js → workerd-VYNSPDCR.js} +14 -14
- package/oclif.manifest.json +24 -19
- package/package.json +7 -7
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<!-- Open this file in your browser for an interactive view of your bundle -->
|
|
3
3
|
|
|
4
4
|
<!-- saved from url=(0034)https://esbuild.github.io/analyze/ -->
|
|
@@ -94,7 +94,9 @@
|
|
|
94
94
|
color: var(--fg-on);
|
|
95
95
|
}
|
|
96
96
|
code {
|
|
97
|
-
font:
|
|
97
|
+
font:
|
|
98
|
+
14px/20px Noto Sans Mono,
|
|
99
|
+
monospace;
|
|
98
100
|
background: rgba(127, 127, 127, 0.2);
|
|
99
101
|
padding: 2px 4px;
|
|
100
102
|
margin-bottom: -2px;
|
|
@@ -102,7 +104,9 @@
|
|
|
102
104
|
}
|
|
103
105
|
pre {
|
|
104
106
|
color: var(--pre);
|
|
105
|
-
font:
|
|
107
|
+
font:
|
|
108
|
+
14px/20px Noto Sans Mono,
|
|
109
|
+
monospace;
|
|
106
110
|
padding: 0;
|
|
107
111
|
margin: 0;
|
|
108
112
|
white-space: pre-wrap;
|
|
@@ -598,12 +602,12 @@
|
|
|
598
602
|
e === 1
|
|
599
603
|
? '1 byte'
|
|
600
604
|
: e < 1024
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
605
|
+
? xe(e) + ' bytes'
|
|
606
|
+
: e < 1024 * 1024
|
|
607
|
+
? Ke(e / 1024) + ' kb'
|
|
608
|
+
: e < 1024 * 1024 * 1024
|
|
609
|
+
? Ke(e / (1024 * 1024)) + ' mb'
|
|
610
|
+
: Ke(e / (1024 * 1024 * 1024)) + ' gb',
|
|
607
611
|
H = (e) =>
|
|
608
612
|
e
|
|
609
613
|
.replace(/&/g, '&')
|
|
@@ -873,10 +877,10 @@
|
|
|
873
877
|
e === Se
|
|
874
878
|
? ''
|
|
875
879
|
: e === we
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
+
? t + 'ESM'
|
|
881
|
+
: e === He
|
|
882
|
+
? t + 'CJS'
|
|
883
|
+
: t + 'ESM & CJS',
|
|
880
884
|
Ft = (e, t) => {
|
|
881
885
|
let r = t.o,
|
|
882
886
|
s = 0,
|
|
@@ -920,8 +924,8 @@
|
|
|
920
924
|
x === 'esm'
|
|
921
925
|
? (l += O.bytes)
|
|
922
926
|
: x === 'cjs'
|
|
923
|
-
|
|
924
|
-
|
|
927
|
+
? (o += O.bytes)
|
|
928
|
+
: (m += O.bytes),
|
|
925
929
|
n++,
|
|
926
930
|
(u += O.bytes);
|
|
927
931
|
}
|
|
@@ -1031,8 +1035,8 @@
|
|
|
1031
1035
|
(s.format === 'esm'
|
|
1032
1036
|
? '<br>Module format: <b>ESM</b>'
|
|
1033
1037
|
: s.format === 'cjs'
|
|
1034
|
-
|
|
1035
|
-
|
|
1038
|
+
? '<br>Module format: <b>CommonJS</b>'
|
|
1039
|
+
: '') +
|
|
1036
1040
|
'</p>'),
|
|
1037
1041
|
el(i, pt, t);
|
|
1038
1042
|
let u = d.createElement('a');
|
|
@@ -1,5 +1,85 @@
|
|
|
1
1
|
# skeleton
|
|
2
2
|
|
|
3
|
+
## 2025.1.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Bump Remix to 2.16.1 and vite to 6.2.0 ([#2784](https://github.com/Shopify/hydrogen/pull/2784)) by [@wizardlyhel](https://github.com/wizardlyhel)
|
|
8
|
+
|
|
9
|
+
- Update skeleton and create-hydrogen cli to 3.75.4 ([#2769](https://github.com/Shopify/hydrogen/pull/2769)) by [@juanpprieto](https://github.com/juanpprieto)
|
|
10
|
+
|
|
11
|
+
- Fixing typescript compile ([#2787](https://github.com/Shopify/hydrogen/pull/2787)) by [@balazsbajorics](https://github.com/balazsbajorics)
|
|
12
|
+
|
|
13
|
+
In tsconfig.json:
|
|
14
|
+
|
|
15
|
+
```diff
|
|
16
|
+
"types": [
|
|
17
|
+
"@shopify/oxygen-workers-types",
|
|
18
|
+
- "@remix-run/node",
|
|
19
|
+
+ "@remix-run/server-runtime",
|
|
20
|
+
"vite/client"
|
|
21
|
+
],
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
- Updates `@shopify/cli-kit`, `@shopify/cli` and `@shopify/plugin-cloudflare` to `3.77.0`. ([#2810](https://github.com/Shopify/hydrogen/pull/2810)) by [@seanparsons](https://github.com/seanparsons)
|
|
25
|
+
|
|
26
|
+
- Support for the Remix future flag `v3_routeConfig`. ([#2722](https://github.com/Shopify/hydrogen/pull/2722)) by [@seanparsons](https://github.com/seanparsons)
|
|
27
|
+
|
|
28
|
+
Please refer to the Remix documentation for more details on `v3_routeConfig` future flag: [https://remix.run/docs/en/main/start/future-flags#v3_routeconfig](https://remix.run/docs/en/main/start/future-flags#v3_routeconfig)
|
|
29
|
+
|
|
30
|
+
1. Add the following npm package dev dependencies:
|
|
31
|
+
|
|
32
|
+
```diff
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@remix-run/dev": "^2.16.1",
|
|
35
|
+
+ "@remix-run/fs-routes": "^2.16.1",
|
|
36
|
+
+ "@remix-run/route-config": "^2.16.1",
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
1. If you have `export function Layout` in your `root.tsx`, move this export into its own file. For example:
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
// /app/layout.tsx
|
|
43
|
+
export default function Layout() {
|
|
44
|
+
const nonce = useNonce();
|
|
45
|
+
const data = useRouteLoaderData<RootLoader>('root');
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<html lang="en">
|
|
49
|
+
...
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
1. Create a `routes.ts` file.
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
import { flatRoutes } from "@remix-run/fs-routes";
|
|
58
|
+
import { layout, type RouteConfig } from "@remix-run/route-config";
|
|
59
|
+
import { hydrogenRoutes } from "@shopify/hydrogen";
|
|
60
|
+
|
|
61
|
+
export default hydrogenRoutes([
|
|
62
|
+
// Your entire app reading from routes folder using Layout from layout.tsx
|
|
63
|
+
layout("./layout.tsx", await flatRoutes()),
|
|
64
|
+
]) satisfies RouteConfig;
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
1. Update your `vite.config.ts`.
|
|
68
|
+
|
|
69
|
+
```diff
|
|
70
|
+
export default defineConfig({
|
|
71
|
+
plugins: [
|
|
72
|
+
hydrogen(),
|
|
73
|
+
oxygen(),
|
|
74
|
+
remix({
|
|
75
|
+
- presets: [hydrogen.preset()],
|
|
76
|
+
+ presets: [hydrogen.v3preset()],
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
- Updated dependencies [[`0425e50d`](https://github.com/Shopify/hydrogen/commit/0425e50dafe2f42326cba67076e5fcea2905e885), [`74ef1ba7`](https://github.com/Shopify/hydrogen/commit/74ef1ba7d41988350e9d2c81731c90381943d1f0)]:
|
|
80
|
+
- @shopify/remix-oxygen@2.0.12
|
|
81
|
+
- @shopify/hydrogen@2025.1.3
|
|
82
|
+
|
|
3
83
|
## 2025.1.2
|
|
4
84
|
|
|
5
85
|
### Patch Changes
|
|
@@ -583,25 +663,25 @@
|
|
|
583
663
|
8. Update the `ProductForm` component.
|
|
584
664
|
|
|
585
665
|
```tsx
|
|
586
|
-
import {Link, useNavigate} from
|
|
587
|
-
import {type MappedProductOptions} from
|
|
666
|
+
import { Link, useNavigate } from "@remix-run/react";
|
|
667
|
+
import { type MappedProductOptions } from "@shopify/hydrogen";
|
|
588
668
|
import type {
|
|
589
669
|
Maybe,
|
|
590
670
|
ProductOptionValueSwatch,
|
|
591
|
-
} from
|
|
592
|
-
import {AddToCartButton} from
|
|
593
|
-
import {useAside} from
|
|
594
|
-
import type {ProductFragment} from
|
|
671
|
+
} from "@shopify/hydrogen/storefront-api-types";
|
|
672
|
+
import { AddToCartButton } from "./AddToCartButton";
|
|
673
|
+
import { useAside } from "./Aside";
|
|
674
|
+
import type { ProductFragment } from "storefrontapi.generated";
|
|
595
675
|
|
|
596
676
|
export function ProductForm({
|
|
597
677
|
productOptions,
|
|
598
678
|
selectedVariant,
|
|
599
679
|
}: {
|
|
600
680
|
productOptions: MappedProductOptions[];
|
|
601
|
-
selectedVariant: ProductFragment[
|
|
681
|
+
selectedVariant: ProductFragment["selectedOrFirstAvailableVariant"];
|
|
602
682
|
}) {
|
|
603
683
|
const navigate = useNavigate();
|
|
604
|
-
const {open} = useAside();
|
|
684
|
+
const { open } = useAside();
|
|
605
685
|
return (
|
|
606
686
|
<div className="product-form">
|
|
607
687
|
{productOptions.map((option) => (
|
|
@@ -635,8 +715,8 @@
|
|
|
635
715
|
to={`/products/${handle}?${variantUriQuery}`}
|
|
636
716
|
style={{
|
|
637
717
|
border: selected
|
|
638
|
-
?
|
|
639
|
-
:
|
|
718
|
+
? "1px solid black"
|
|
719
|
+
: "1px solid transparent",
|
|
640
720
|
opacity: available ? 1 : 0.3,
|
|
641
721
|
}}
|
|
642
722
|
>
|
|
@@ -653,13 +733,13 @@
|
|
|
653
733
|
<button
|
|
654
734
|
type="button"
|
|
655
735
|
className={`product-options-item${
|
|
656
|
-
exists && !selected ?
|
|
736
|
+
exists && !selected ? " link" : ""
|
|
657
737
|
}`}
|
|
658
738
|
key={option.name + name}
|
|
659
739
|
style={{
|
|
660
740
|
border: selected
|
|
661
|
-
?
|
|
662
|
-
:
|
|
741
|
+
? "1px solid black"
|
|
742
|
+
: "1px solid transparent",
|
|
663
743
|
opacity: available ? 1 : 0.3,
|
|
664
744
|
}}
|
|
665
745
|
disabled={!exists}
|
|
@@ -683,7 +763,7 @@
|
|
|
683
763
|
<AddToCartButton
|
|
684
764
|
disabled={!selectedVariant || !selectedVariant.availableForSale}
|
|
685
765
|
onClick={() => {
|
|
686
|
-
open(
|
|
766
|
+
open("cart");
|
|
687
767
|
}}
|
|
688
768
|
lines={
|
|
689
769
|
selectedVariant
|
|
@@ -697,7 +777,7 @@
|
|
|
697
777
|
: []
|
|
698
778
|
}
|
|
699
779
|
>
|
|
700
|
-
{selectedVariant?.availableForSale ?
|
|
780
|
+
{selectedVariant?.availableForSale ? "Add to cart" : "Sold out"}
|
|
701
781
|
</AddToCartButton>
|
|
702
782
|
</div>
|
|
703
783
|
);
|
|
@@ -720,7 +800,7 @@
|
|
|
720
800
|
aria-label={name}
|
|
721
801
|
className="product-option-label-swatch"
|
|
722
802
|
style={{
|
|
723
|
-
backgroundColor: color ||
|
|
803
|
+
backgroundColor: color || "transparent",
|
|
724
804
|
}}
|
|
725
805
|
>
|
|
726
806
|
{!!image && <img src={image} alt={name} />}
|
|
@@ -1221,21 +1301,21 @@
|
|
|
1221
1301
|
New `withCache.fetch` is for caching simple fetch requests. This method caches the responses if they are OK responses, and you can pass `shouldCacheResponse`, `cacheKey`, etc. to modify behavior. `data` is the consumed body of the response (we need to consume to cache it).
|
|
1222
1302
|
|
|
1223
1303
|
```ts
|
|
1224
|
-
const withCache = createWithCache({cache, waitUntil, request});
|
|
1304
|
+
const withCache = createWithCache({ cache, waitUntil, request });
|
|
1225
1305
|
|
|
1226
|
-
const {data, response} = await withCache.fetch<{data: T; error: string}>(
|
|
1227
|
-
|
|
1306
|
+
const { data, response } = await withCache.fetch<{ data: T; error: string }>(
|
|
1307
|
+
"my-cms.com/api",
|
|
1228
1308
|
{
|
|
1229
|
-
method:
|
|
1230
|
-
headers: {
|
|
1309
|
+
method: "POST",
|
|
1310
|
+
headers: { "Content-type": "application/json" },
|
|
1231
1311
|
body,
|
|
1232
1312
|
},
|
|
1233
1313
|
{
|
|
1234
1314
|
cacheStrategy: CacheLong(),
|
|
1235
1315
|
// Cache if there are no data errors or a specific data that make this result not suited for caching
|
|
1236
1316
|
shouldCacheResponse: (result) => !result?.error,
|
|
1237
|
-
cacheKey: [
|
|
1238
|
-
displayName:
|
|
1317
|
+
cacheKey: ["my-cms", body],
|
|
1318
|
+
displayName: "My CMS query",
|
|
1239
1319
|
},
|
|
1240
1320
|
);
|
|
1241
1321
|
```
|
|
@@ -1811,9 +1891,9 @@
|
|
|
1811
1891
|
|
|
1812
1892
|
```tsx
|
|
1813
1893
|
// app/lib/root-data.ts
|
|
1814
|
-
import {useMatches} from
|
|
1815
|
-
import type {SerializeFrom} from
|
|
1816
|
-
import type {loader} from
|
|
1894
|
+
import { useMatches } from "@remix-run/react";
|
|
1895
|
+
import type { SerializeFrom } from "@shopify/remix-oxygen";
|
|
1896
|
+
import type { loader } from "~/root";
|
|
1817
1897
|
|
|
1818
1898
|
/**
|
|
1819
1899
|
* Access the result of the root loader from a React component.
|
|
@@ -1975,10 +2055,10 @@
|
|
|
1975
2055
|
- This is an important fix to a bug with 404 routes and path-based i18n projects where some unknown routes would not properly render a 404. This fixes all new projects, but to fix existing projects, add a `($locale).tsx` route with the following contents: ([#1732](https://github.com/Shopify/hydrogen/pull/1732)) by [@blittle](https://github.com/blittle)
|
|
1976
2056
|
|
|
1977
2057
|
```ts
|
|
1978
|
-
import {type LoaderFunctionArgs} from
|
|
2058
|
+
import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
|
|
1979
2059
|
|
|
1980
|
-
export async function loader({params, context}: LoaderFunctionArgs) {
|
|
1981
|
-
const {language, country} = context.storefront.i18n;
|
|
2060
|
+
export async function loader({ params, context }: LoaderFunctionArgs) {
|
|
2061
|
+
const { language, country } = context.storefront.i18n;
|
|
1982
2062
|
|
|
1983
2063
|
if (
|
|
1984
2064
|
params.locale &&
|
|
@@ -1986,7 +2066,7 @@
|
|
|
1986
2066
|
) {
|
|
1987
2067
|
// If the locale URL param is defined, yet we still are still at the default locale
|
|
1988
2068
|
// then the the locale param must be invalid, send to the 404 page
|
|
1989
|
-
throw new Response(null, {status: 404});
|
|
2069
|
+
throw new Response(null, { status: 404 });
|
|
1990
2070
|
}
|
|
1991
2071
|
|
|
1992
2072
|
return null;
|
|
@@ -2042,11 +2122,11 @@
|
|
|
2042
2122
|
```yaml
|
|
2043
2123
|
projects:
|
|
2044
2124
|
default:
|
|
2045
|
-
schema:
|
|
2125
|
+
schema: "node_modules/@shopify/hydrogen/storefront.schema.json"
|
|
2046
2126
|
documents:
|
|
2047
|
-
-
|
|
2048
|
-
-
|
|
2049
|
-
-
|
|
2127
|
+
- "!*.d.ts"
|
|
2128
|
+
- "*.{ts,tsx,js,jsx}"
|
|
2129
|
+
- "app/**/*.{ts,tsx,js,jsx}"
|
|
2050
2130
|
```
|
|
2051
2131
|
|
|
2052
2132
|
- Improve resiliency of `HydrogenSession` ([#1583](https://github.com/Shopify/hydrogen/pull/1583)) by [@blittle](https://github.com/blittle)
|
|
@@ -2261,8 +2341,8 @@
|
|
|
2261
2341
|
```ts
|
|
2262
2342
|
// root.tsx
|
|
2263
2343
|
|
|
2264
|
-
import {useMatches} from
|
|
2265
|
-
import {type SerializeFrom} from
|
|
2344
|
+
import { useMatches } from "@remix-run/react";
|
|
2345
|
+
import { type SerializeFrom } from "@shopify/remix-oxygen";
|
|
2266
2346
|
|
|
2267
2347
|
export const useRootLoaderData = () => {
|
|
2268
2348
|
const [root] = useMatches();
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import {useNonce, Analytics} from '@shopify/hydrogen';
|
|
2
|
+
import {
|
|
3
|
+
Links,
|
|
4
|
+
Meta,
|
|
5
|
+
Scripts,
|
|
6
|
+
useRouteLoaderData,
|
|
7
|
+
ScrollRestoration,
|
|
8
|
+
Outlet,
|
|
9
|
+
} from '@remix-run/react';
|
|
10
|
+
import resetStyles from '~/styles/reset.css?url';
|
|
11
|
+
import appStyles from '~/styles/app.css?url';
|
|
12
|
+
import {PageLayout} from '~/components/PageLayout';
|
|
13
|
+
import { RootLoader } from './root';
|
|
14
|
+
|
|
15
|
+
export default function Layout() {
|
|
16
|
+
const nonce = useNonce();
|
|
17
|
+
const data = useRouteLoaderData<RootLoader>('root');
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<html lang="en">
|
|
21
|
+
<head>
|
|
22
|
+
<meta charSet="utf-8" />
|
|
23
|
+
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
24
|
+
<link rel="stylesheet" href={resetStyles}></link>
|
|
25
|
+
<link rel="stylesheet" href={appStyles}></link>
|
|
26
|
+
<Meta />
|
|
27
|
+
<Links />
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
{data ? (
|
|
31
|
+
<Analytics.Provider
|
|
32
|
+
cart={data.cart}
|
|
33
|
+
shop={data.shop}
|
|
34
|
+
consent={data.consent}
|
|
35
|
+
>
|
|
36
|
+
<PageLayout {...data}><Outlet /></PageLayout>
|
|
37
|
+
</Analytics.Provider>
|
|
38
|
+
) : (
|
|
39
|
+
<Outlet />
|
|
40
|
+
)}
|
|
41
|
+
<ScrollRestoration nonce={nonce} />
|
|
42
|
+
<Scripts nonce={nonce} />
|
|
43
|
+
</body>
|
|
44
|
+
</html>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
@@ -1,20 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {getShopAnalytics} from '@shopify/hydrogen';
|
|
2
2
|
import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
|
|
3
3
|
import {
|
|
4
|
-
Links,
|
|
5
|
-
Meta,
|
|
6
4
|
Outlet,
|
|
7
|
-
Scripts,
|
|
8
5
|
useRouteError,
|
|
9
|
-
useRouteLoaderData,
|
|
10
|
-
ScrollRestoration,
|
|
11
6
|
isRouteErrorResponse,
|
|
12
7
|
type ShouldRevalidateFunction,
|
|
13
8
|
} from '@remix-run/react';
|
|
14
9
|
import favicon from '~/assets/favicon.svg';
|
|
15
|
-
import resetStyles from '~/styles/reset.css?url';
|
|
16
|
-
import appStyles from '~/styles/app.css?url';
|
|
17
|
-
import {PageLayout} from '~/components/PageLayout';
|
|
18
10
|
import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
|
|
19
11
|
|
|
20
12
|
export type RootLoader = typeof loader;
|
|
@@ -141,39 +133,6 @@ function loadDeferredData({context}: LoaderFunctionArgs) {
|
|
|
141
133
|
};
|
|
142
134
|
}
|
|
143
135
|
|
|
144
|
-
export function Layout({children}: {children?: React.ReactNode}) {
|
|
145
|
-
const nonce = useNonce();
|
|
146
|
-
const data = useRouteLoaderData<RootLoader>('root');
|
|
147
|
-
|
|
148
|
-
return (
|
|
149
|
-
<html lang="en">
|
|
150
|
-
<head>
|
|
151
|
-
<meta charSet="utf-8" />
|
|
152
|
-
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
153
|
-
<link rel="stylesheet" href={resetStyles}></link>
|
|
154
|
-
<link rel="stylesheet" href={appStyles}></link>
|
|
155
|
-
<Meta />
|
|
156
|
-
<Links />
|
|
157
|
-
</head>
|
|
158
|
-
<body>
|
|
159
|
-
{data ? (
|
|
160
|
-
<Analytics.Provider
|
|
161
|
-
cart={data.cart}
|
|
162
|
-
shop={data.shop}
|
|
163
|
-
consent={data.consent}
|
|
164
|
-
>
|
|
165
|
-
<PageLayout {...data}>{children}</PageLayout>
|
|
166
|
-
</Analytics.Provider>
|
|
167
|
-
) : (
|
|
168
|
-
children
|
|
169
|
-
)}
|
|
170
|
-
<ScrollRestoration nonce={nonce} />
|
|
171
|
-
<Scripts nonce={nonce} />
|
|
172
|
-
</body>
|
|
173
|
-
</html>
|
|
174
|
-
);
|
|
175
|
-
}
|
|
176
|
-
|
|
177
136
|
export default function App() {
|
|
178
137
|
return <Outlet />;
|
|
179
138
|
}
|
|
@@ -19,9 +19,10 @@ export const meta: MetaFunction = () => {
|
|
|
19
19
|
export async function loader({request, context}: LoaderFunctionArgs) {
|
|
20
20
|
const url = new URL(request.url);
|
|
21
21
|
const isPredictive = url.searchParams.has('predictive');
|
|
22
|
-
const searchPromise =
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
const searchPromise: Promise<PredictiveSearchReturn | RegularSearchReturn> =
|
|
23
|
+
isPredictive
|
|
24
|
+
? predictiveSearch({request, context})
|
|
25
|
+
: regularSearch({request, context});
|
|
25
26
|
|
|
26
27
|
searchPromise.catch((error: Error) => {
|
|
27
28
|
console.error(error);
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import {flatRoutes} from '@remix-run/fs-routes';
|
|
2
|
+
import {layout, type RouteConfig} from '@remix-run/route-config';
|
|
3
|
+
import {hydrogenRoutes} from '@shopify/hydrogen';
|
|
4
|
+
|
|
5
|
+
export default hydrogenRoutes([
|
|
6
|
+
layout('./layout.tsx', (await flatRoutes())),
|
|
7
|
+
]) satisfies RouteConfig;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "skeleton",
|
|
3
3
|
"private": true,
|
|
4
4
|
"sideEffects": false,
|
|
5
|
-
"version": "2025.1.
|
|
5
|
+
"version": "2025.1.3",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"build": "shopify hydrogen build --codegen",
|
|
@@ -14,13 +14,13 @@
|
|
|
14
14
|
},
|
|
15
15
|
"prettier": "@shopify/prettier-config",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@remix-run/react": "^2.
|
|
18
|
-
"@remix-run/server-runtime": "^2.
|
|
19
|
-
"
|
|
20
|
-
"@shopify/
|
|
21
|
-
"
|
|
17
|
+
"@remix-run/react": "^2.16.1",
|
|
18
|
+
"@remix-run/server-runtime": "^2.16.1",
|
|
19
|
+
"graphql": "^16.10.0",
|
|
20
|
+
"@shopify/hydrogen": "2025.1.3",
|
|
21
|
+
"@shopify/remix-oxygen": "^2.0.12",
|
|
22
22
|
"graphql-tag": "^2.12.6",
|
|
23
|
-
"isbot": "^5.1.
|
|
23
|
+
"isbot": "^5.1.22",
|
|
24
24
|
"react": "^18.2.0",
|
|
25
25
|
"react-dom": "^18.2.0"
|
|
26
26
|
},
|
|
@@ -29,13 +29,16 @@
|
|
|
29
29
|
"@eslint/eslintrc": "^3.2.0",
|
|
30
30
|
"@eslint/js": "^9.18.0",
|
|
31
31
|
"@graphql-codegen/cli": "5.0.2",
|
|
32
|
-
"@remix-run/dev": "^2.
|
|
33
|
-
"@
|
|
34
|
-
"@
|
|
35
|
-
"@shopify/
|
|
36
|
-
"@shopify/
|
|
32
|
+
"@remix-run/dev": "^2.16.1",
|
|
33
|
+
"@remix-run/fs-routes": "^2.16.1",
|
|
34
|
+
"@remix-run/route-config": "^2.16.1",
|
|
35
|
+
"@shopify/cli": "~3.77.0",
|
|
36
|
+
"@shopify/hydrogen-codegen": "^0.3.3",
|
|
37
|
+
"@shopify/mini-oxygen": "^3.1.2",
|
|
38
|
+
"@shopify/oxygen-workers-types": "^4.1.6",
|
|
37
39
|
"@shopify/prettier-config": "^1.1.2",
|
|
38
|
-
"@total-typescript/ts-reset": "^0.
|
|
40
|
+
"@total-typescript/ts-reset": "^0.6.1",
|
|
41
|
+
"prettier": "^3.4.2",
|
|
39
42
|
"@types/eslint": "^9.6.1",
|
|
40
43
|
"@types/react": "^18.2.22",
|
|
41
44
|
"@types/react-dom": "^18.2.7",
|
|
@@ -51,9 +54,8 @@
|
|
|
51
54
|
"eslint-plugin-react": "^7.37.4",
|
|
52
55
|
"eslint-plugin-react-hooks": "^5.1.0",
|
|
53
56
|
"globals": "^15.14.0",
|
|
54
|
-
"prettier": "^2.8.4",
|
|
55
57
|
"typescript": "^5.2.2",
|
|
56
|
-
"vite": "^
|
|
58
|
+
"vite": "^6.2.0",
|
|
57
59
|
"vite-tsconfig-paths": "^4.3.1"
|
|
58
60
|
},
|
|
59
61
|
"engines": {
|
|
@@ -15,12 +15,13 @@ export default defineConfig({
|
|
|
15
15
|
hydrogen(),
|
|
16
16
|
oxygen(),
|
|
17
17
|
remix({
|
|
18
|
-
presets: [hydrogen.
|
|
18
|
+
presets: [hydrogen.v3preset()],
|
|
19
19
|
future: {
|
|
20
20
|
v3_fetcherPersist: true,
|
|
21
21
|
v3_relativeSplatPath: true,
|
|
22
22
|
v3_throwAbortReason: true,
|
|
23
23
|
v3_lazyRouteDiscovery: true,
|
|
24
|
+
v3_routeConfig: true,
|
|
24
25
|
v3_singleFetch: true,
|
|
25
26
|
},
|
|
26
27
|
}),
|
|
@@ -390,11 +390,8 @@ button:active.primary {
|
|
|
390
390
|
--gradient-color-end: transparent;
|
|
391
391
|
--background-color: transparent;
|
|
392
392
|
|
|
393
|
-
background-image:
|
|
394
|
-
|
|
395
|
-
var(--background-color),
|
|
396
|
-
var(--background-color)
|
|
397
|
-
),
|
|
393
|
+
background-image:
|
|
394
|
+
linear-gradient(to right, var(--background-color), var(--background-color)),
|
|
398
395
|
linear-gradient(to right, var(--background-color), var(--background-color)),
|
|
399
396
|
linear-gradient(
|
|
400
397
|
to right,
|
|
@@ -406,23 +403,43 @@ button:active.primary {
|
|
|
406
403
|
var(--gradient-color-start),
|
|
407
404
|
var(--gradient-color-end)
|
|
408
405
|
);
|
|
409
|
-
background-position:
|
|
406
|
+
background-position:
|
|
407
|
+
left center,
|
|
408
|
+
right center,
|
|
409
|
+
left center,
|
|
410
|
+
right center;
|
|
410
411
|
background-repeat: no-repeat;
|
|
411
412
|
background-color: var(--background-color);
|
|
412
|
-
background-size:
|
|
413
|
+
background-size:
|
|
414
|
+
20px 100%,
|
|
415
|
+
20px 100%,
|
|
416
|
+
0px 100%,
|
|
417
|
+
0px 100%;
|
|
413
418
|
background-attachment: local, local, scroll, scroll;
|
|
414
419
|
}
|
|
415
420
|
|
|
416
421
|
#tab-buttons-wrapper .fadCover.fadeLeft {
|
|
417
|
-
background-size:
|
|
422
|
+
background-size:
|
|
423
|
+
20px 100%,
|
|
424
|
+
20px 100%,
|
|
425
|
+
40px 100%,
|
|
426
|
+
0px 100%;
|
|
418
427
|
}
|
|
419
428
|
|
|
420
429
|
#tab-buttons-wrapper .fadCover.fadeRight {
|
|
421
|
-
background-size:
|
|
430
|
+
background-size:
|
|
431
|
+
20px 100%,
|
|
432
|
+
20px 100%,
|
|
433
|
+
0px 100%,
|
|
434
|
+
40px 100%;
|
|
422
435
|
}
|
|
423
436
|
|
|
424
437
|
#tab-buttons-wrapper .fadCover.fadeLeftRight {
|
|
425
|
-
background-size:
|
|
438
|
+
background-size:
|
|
439
|
+
20px 100%,
|
|
440
|
+
20px 100%,
|
|
441
|
+
40px 100%,
|
|
442
|
+
40px 100%;
|
|
426
443
|
}
|
|
427
444
|
|
|
428
445
|
.tabPanels .tabPanel {
|