Skip to content

Commit 90c2feb

Browse files
AlemTuzlakAlemTuzlak
committed
Bug fixes for route boundaries, doc updates, various improvements to architecture for css
1 parent 7e1d36a commit 90c2feb

File tree

10 files changed

+253
-79
lines changed

10 files changed

+253
-79
lines changed

Diff for: ‎docs/posts/4.7.0/guides/hydrogen-oxygen.mdx

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
title: "Integration with Shopify Hydrogen and Oxygen"
3+
description: "Guide on getting remix-development-tools working with Shopify Hydrogen and Oxygen"
4+
---
5+
6+
## Adding remix-development-tools to your project
7+
8+
Even though remix-development-tools is an ESM package, some of the dependencies it relies on are unfortunately not. This means that
9+
these dependencies will break the shopify CLI when running your Remix app built on top of Shopify Hydrogen and Oxygen.
10+
11+
In case your package.json script `dev` command looks like this:
12+
13+
```json
14+
"dev": "shopify hydrogen dev --codegen",
15+
```
16+
17+
This means you'll have to do the following to get it working.
18+
19+
Go to your `vite.config.ts` and add `remix-development-tools`, depending on your project the file will look something like this:
20+
```diff
21+
import { defineConfig } from 'vite';
22+
import { hydrogen } from '@shopify/hydrogen/vite';
23+
import { oxygen } from '@shopify/mini-oxygen/vite';
24+
import { vitePlugin as remix} from '@remix-run/dev';
25+
import tsconfigPaths from 'vite-tsconfig-paths';
26+
+ import { remixDevTools } from 'remix-development-tools';
27+
export default defineConfig({
28+
plugins: [
29+
+ remixDevTools(),
30+
hydrogen(),
31+
oxygen(),
32+
remix({
33+
presets: [hydrogen.preset()],
34+
future: {
35+
v3_fetcherPersist: true,
36+
v3_relativeSplatPath: true,
37+
v3_throwAbortReason: true,
38+
},
39+
}),
40+
tsconfigPaths(),
41+
],
42+
build: {
43+
assetsInlineLimit: 0,
44+
},
45+
ssr: {
46+
optimizeDeps: {
47+
include: [],
48+
},
49+
},
50+
});
51+
52+
```
53+
## Adding problematic dependencies
54+
55+
Add the following dependencies to `ssr.optimizeDeps.include` array:
56+
```diff
57+
export default defineConfig({
58+
plugins: [
59+
hydrogen(),
60+
oxygen(),
61+
remix({
62+
presets: [hydrogen.preset()],
63+
future: {
64+
v3_fetcherPersist: true,
65+
v3_relativeSplatPath: true,
66+
v3_throwAbortReason: true,
67+
},
68+
}),
69+
tsconfigPaths(),
70+
],
71+
build: {
72+
assetsInlineLimit: 0,
73+
},
74+
+ ssr: {
75+
+ optimizeDeps: {
76+
+ include: [
77+
+ 'react-use-websocket',
78+
+ 'beautify',
79+
+ 'react-diff-viewer-continued',
80+
+ 'react-d3-tree',
81+
+ ],
82+
+ },
83+
+ },
84+
});
85+
```
86+
87+
### Debugging issues
88+
If you're still having issues, look at the error log output by the Shopify CLI and see if there are any errors related to the dependencies, the usual errors you might see are:
89+
- `require is not defined`
90+
- `module.exports is not defined`
91+
- `Cannot find module 'X'`
92+
93+
This all indicated that there is a problem with a dependency that is used by remix-development-tools. Sometimes it's even a dependency not
94+
directly used by remix-development-tools, but it's a dependency of a dependency that is used by remix-development-tools.
95+
96+
So if adding the first depedency in the error stack strace does not work, see if there are any additional dependencies in the stack trace before
97+
remix-development-tools. This package will be the last one in the stack trace.
98+
99+
100+
Enjoy your new remix-development-tools 🚀

Diff for: ‎docs/posts/main/guides/hydrogen-oxygen.mdx

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
title: "Integration with Shopify Hydrogen and Oxygen"
3+
description: "Guide on getting remix-development-tools working with Shopify Hydrogen and Oxygen"
4+
---
5+
6+
## Adding remix-development-tools to your project
7+
8+
Even though remix-development-tools is an ESM package, some of the dependencies it relies on are unfortunately not. This means that
9+
these dependencies will break the shopify CLI when running your Remix app built on top of Shopify Hydrogen and Oxygen.
10+
11+
In case your package.json script `dev` command looks like this:
12+
13+
```json
14+
"dev": "shopify hydrogen dev --codegen",
15+
```
16+
17+
This means you'll have to do the following to get it working.
18+
19+
Go to your `vite.config.ts` and add `remix-development-tools`, depending on your project the file will look something like this:
20+
```diff
21+
import { defineConfig } from 'vite';
22+
import { hydrogen } from '@shopify/hydrogen/vite';
23+
import { oxygen } from '@shopify/mini-oxygen/vite';
24+
import { vitePlugin as remix} from '@remix-run/dev';
25+
import tsconfigPaths from 'vite-tsconfig-paths';
26+
+ import { remixDevTools } from 'remix-development-tools';
27+
export default defineConfig({
28+
plugins: [
29+
+ remixDevTools(),
30+
hydrogen(),
31+
oxygen(),
32+
remix({
33+
presets: [hydrogen.preset()],
34+
future: {
35+
v3_fetcherPersist: true,
36+
v3_relativeSplatPath: true,
37+
v3_throwAbortReason: true,
38+
},
39+
}),
40+
tsconfigPaths(),
41+
],
42+
build: {
43+
assetsInlineLimit: 0,
44+
},
45+
ssr: {
46+
optimizeDeps: {
47+
include: [],
48+
},
49+
},
50+
});
51+
52+
```
53+
## Adding problematic dependencies
54+
55+
Add the following dependencies to `ssr.optimizeDeps.include` array:
56+
```diff
57+
export default defineConfig({
58+
plugins: [
59+
hydrogen(),
60+
oxygen(),
61+
remix({
62+
presets: [hydrogen.preset()],
63+
future: {
64+
v3_fetcherPersist: true,
65+
v3_relativeSplatPath: true,
66+
v3_throwAbortReason: true,
67+
},
68+
}),
69+
tsconfigPaths(),
70+
],
71+
build: {
72+
assetsInlineLimit: 0,
73+
},
74+
+ ssr: {
75+
+ optimizeDeps: {
76+
+ include: [
77+
+ 'react-use-websocket',
78+
+ 'beautify',
79+
+ 'react-diff-viewer-continued',
80+
+ 'react-d3-tree',
81+
+ ],
82+
+ },
83+
+ },
84+
});
85+
```
86+
87+
### Debugging issues
88+
If you're still having issues, look at the error log output by the Shopify CLI and see if there are any errors related to the dependencies, the usual errors you might see are:
89+
- `require is not defined`
90+
- `module.exports is not defined`
91+
- `Cannot find module 'X'`
92+
93+
This all indicated that there is a problem with a dependency that is used by remix-development-tools. Sometimes it's even a dependency not
94+
directly used by remix-development-tools, but it's a dependency of a dependency that is used by remix-development-tools.
95+
96+
So if adding the first depedency in the error stack strace does not work, see if there are any additional dependencies in the stack trace before
97+
remix-development-tools. This package will be the last one in the stack trace.
98+
99+
100+
Enjoy your new remix-development-tools 🚀

Diff for: ‎docs/posts/main/metadata.json

+7
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"examples": "features/examples",
1414
"migration": "guides/migration",
1515
"plugins": "guides/plugins",
16+
"hydrogen": "guides/hydrogen-oxygen",
1617
"contributing": "guides/contributing"
1718
},
1819
"sections": [
@@ -114,6 +115,12 @@
114115
"section": "Guides",
115116
"slug": "plugins"
116117
},
118+
"hydrogen": {
119+
"title": "Hydrogen + Oxygen integration",
120+
"description": "Using remix-development-tools with Hydrogen and Oxygen from Shopify.",
121+
"section": "Guides",
122+
"slug": "hydrogen"
123+
},
117124
"contributing": {
118125
"title": "Contributing",
119126
"alternateTitle": "Contributing",

Diff for: ‎src/client/components/jsonRenderer.tsx

+11-7
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,16 @@ const JsonRenderer = ({ data }: JsonRendererProps) => {
2727
: Object.entries(data)
2828
.map(([key, value]) => {
2929
if (isPromise(value)) {
30-
value.then((res) => {
31-
if (!ref.current) return
32-
setJson((json: any) => ({
33-
...json,
34-
[key]: res,
35-
}))
36-
})
30+
value
31+
.then((res) => {
32+
if (!ref.current) return
33+
console.log(res)
34+
setJson((json: any) => ({
35+
...json,
36+
[key]: res,
37+
}))
38+
})
39+
.catch((e) => {})
3740
return { [key]: "Loading deferred data..." }
3841
}
3942
return { [key]: value }
@@ -50,6 +53,7 @@ const JsonRenderer = ({ data }: JsonRendererProps) => {
5053
useEffect(() => {
5154
setJson(data)
5255
}, [data])
56+
5357
if (typeof json === "string") {
5458
return <div className="rdt-max-w-xs rdt-text-green-600">{json}</div>
5559
}

Diff for: ‎src/client/context/rdtReducer.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ export const defaultServerRouteState: ServerRouteInfo = {
1515
loaders: [],
1616
actions: [],
1717
}
18-
18+
// classes created in input.css
1919
export const ROUTE_BOUNDARY_GRADIENTS = {
20-
sea: "bg-green-100 bg-gradient-to-r from-cyan-500/50 to-blue-500/50",
21-
hyper: "bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500",
22-
gotham: "bg-gradient-to-r from-gray-700 via-gray-900 to-black",
23-
gray: "bg-gradient-to-r from-gray-700/50 via-gray-900/50 to-black/50",
24-
watermelon: "bg-gradient-to-r from-red-500 to-green-500",
25-
ice: "bg-gradient-to-r from-rose-100 to-teal-100",
26-
silver: "bg-gradient-to-r from-gray-100 to-gray-300",
20+
sea: "sea-gradient",
21+
hyper: "hyper-gradient",
22+
gotham: "gotham-gradient",
23+
gray: "gray-gradient",
24+
watermelon: "watermelon-gradient",
25+
ice: "ice-gradient",
26+
silver: "silver-gradient",
2727
} as const
2828

2929
export const RouteBoundaryOptions = Object.keys(ROUTE_BOUNDARY_GRADIENTS) as (keyof typeof ROUTE_BOUNDARY_GRADIENTS)[]

Diff for: ‎src/client/hooks/useSetRouteBoundaries.ts

+3-9
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,7 @@ export const useSetRouteBoundaries = () => {
1414
// Overrides the hovering so the classes are force removed if needed
1515
const hovering = isHovering ?? settings.isHoveringRoute
1616
// Classes to apply/remove
17-
const classes = [
18-
"transition-all duration-200 rounded-lg apply-tw",
19-
ROUTE_BOUNDARY_GRADIENTS[settings.routeBoundaryGradient],
20-
].join(" ")
17+
const classes = ROUTE_BOUNDARY_GRADIENTS[settings.routeBoundaryGradient]
2118

2219
const isRoot = settings.hoveredRoute === "root"
2320
// We get all the elements with this class name, the last one is the one we want because strict mode applies 2x divs
@@ -30,13 +27,10 @@ export const useSetRouteBoundaries = () => {
3027
if (element) {
3128
// Root has no outlet so we need to use the body, otherwise we get the outlet that is the next sibling of the element
3229
const outlet = element
33-
for (const c of classes.split(" ")) {
34-
outlet.classList[hovering ? "add" : "remove"](c)
30+
for (const classItem of classes.split(" ")) {
31+
outlet.classList[hovering ? "add" : "remove"](classItem)
3532
}
3633
}
37-
if (element?.parentElement) {
38-
element.parentElement.classList[hovering ? "add" : "remove"]("remix-dev-tools")
39-
}
4034
},
4135
[settings.hoveredRoute, settings.isHoveringRoute, settings.routeBoundaryGradient, matches.length]
4236
)

Diff for: ‎src/client/layout/MainPanel.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const MainPanel = ({ children, isOpen, isEmbedded = false, className }: MainPane
3636
}}
3737
className={clsx(
3838
"duration-600 box-border flex w-screen flex-col overflow-auto bg-main text-white opacity-0 transition-all",
39-
isOpen ? "opacity-100 drop-shadow-2xl" : "h-0",
39+
isOpen ? "opacity-100 drop-shadow-2xl" : "!h-0",
4040
isResizing && "cursor-grabbing ",
4141
!isEmbedded ? `fixed left-0 ${panelLocation === "bottom" ? "bottom-0" : "top-0 border-b-2 border-main"}` : "",
4242
className

Diff for: ‎src/input.css

+20-48
Original file line numberDiff line numberDiff line change
@@ -559,52 +559,24 @@
559559
@tailwind variants;
560560
}
561561

562-
.apply-tw {
563-
--tw-border-spacing-x: 0;
564-
--tw-border-spacing-y: 0;
565-
--tw-translate-x: 0;
566-
--tw-translate-y: 0;
567-
--tw-rotate: 0;
568-
--tw-skew-x: 0;
569-
--tw-skew-y: 0;
570-
--tw-scale-x: 1;
571-
--tw-scale-y: 1;
572-
--tw-pan-x: ;
573-
--tw-pan-y: ;
574-
--tw-pinch-zoom: ;
575-
--tw-scroll-snap-strictness: proximity;
576-
--tw-gradient-from-position: ;
577-
--tw-gradient-via-position: ;
578-
--tw-gradient-to-position: ;
579-
--tw-ordinal: ;
580-
--tw-slashed-zero: ;
581-
--tw-numeric-figure: ;
582-
--tw-numeric-spacing: ;
583-
--tw-numeric-fraction: ;
584-
--tw-ring-inset: ;
585-
--tw-ring-offset-width: 0px;
586-
--tw-ring-offset-color: #fff;
587-
--tw-ring-color: rgb(59 130 246 / 0.5);
588-
--tw-ring-offset-shadow: 0 0 #0000;
589-
--tw-ring-shadow: 0 0 #0000;
590-
--tw-shadow: 0 0 #0000;
591-
--tw-shadow-colored: 0 0 #0000;
592-
--tw-blur: ;
593-
--tw-brightness: ;
594-
--tw-contrast: ;
595-
--tw-grayscale: ;
596-
--tw-hue-rotate: ;
597-
--tw-invert: ;
598-
--tw-saturate: ;
599-
--tw-sepia: ;
600-
--tw-drop-shadow: ;
601-
--tw-backdrop-blur: ;
602-
--tw-backdrop-brightness: ;
603-
--tw-backdrop-contrast: ;
604-
--tw-backdrop-grayscale: ;
605-
--tw-backdrop-hue-rotate: ;
606-
--tw-backdrop-invert: ;
607-
--tw-backdrop-opacity: ;
608-
--tw-backdrop-saturate: ;
609-
--tw-backdrop-sepia: ;
562+
.sea-gradient {
563+
@apply bg-green-100 bg-gradient-to-r from-cyan-500/50 to-blue-500/50
610564
}
565+
.hyper-gradient {
566+
@apply bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500
567+
}
568+
.gotham-gradient {
569+
@apply bg-gradient-to-r from-gray-700 via-gray-900 to-black
570+
}
571+
.gray-gradient {
572+
@apply bg-gradient-to-r from-gray-700/50 via-gray-900/50 to-black/50
573+
}
574+
.watermelon-gradient {
575+
@apply bg-gradient-to-r from-red-500 to-green-500
576+
}
577+
.ice-gradient {
578+
@apply bg-gradient-to-r from-rose-100 to-teal-100
579+
}
580+
.silver-gradient {
581+
@apply bg-gradient-to-r from-gray-100 to-gray-300
582+
}

0 commit comments

Comments
 (0)