Bug fixes for route boundaries, doc updates, various improvements to …

…architecture for css

docs/posts/4.7.0/guides/hydrogen-oxygen.mdx

@@ -0,0 +1,100 @@
+---
+title: "Integration with Shopify Hydrogen and Oxygen"
+description: "Guide on getting remix-development-tools working with Shopify Hydrogen and Oxygen"
+---
+
+## Adding remix-development-tools to your project
+
+Even though remix-development-tools is an ESM package, some of the dependencies it relies on are unfortunately not. This means that
+these dependencies will break the shopify CLI when running your Remix app built on top of Shopify Hydrogen and Oxygen.
+
+In case your package.json script `dev` command looks like this:
+
+```json
+  "dev": "shopify hydrogen dev --codegen",
+```
+
+This means you'll have to do the following to get it working.
+
+Go to your `vite.config.ts` and add `remix-development-tools`, depending on your project the file will look something like this:
+```diff
+import { defineConfig } from 'vite';
+import { hydrogen } from '@shopify/hydrogen/vite';
+import { oxygen } from '@shopify/mini-oxygen/vite';
+import { vitePlugin as remix} from '@remix-run/dev';
+import tsconfigPaths from 'vite-tsconfig-paths';
++ import { remixDevTools } from 'remix-development-tools';
+export default defineConfig({
+  plugins: [
++   remixDevTools(),
+    hydrogen(),
+    oxygen(),
+    remix({
+      presets: [hydrogen.preset()],
+      future: {
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true,
+      },
+    }),
+    tsconfigPaths(),
+  ],
+  build: {
+    assetsInlineLimit: 0,
+  },
+  ssr: {
+    optimizeDeps: {
+      include: [],
+    },
+  },
+});
+
+```
+## Adding problematic dependencies
+
+Add the following dependencies to `ssr.optimizeDeps.include` array:
+```diff
+export default defineConfig({
+  plugins: [
+    hydrogen(),
+    oxygen(),
+    remix({
+      presets: [hydrogen.preset()],
+      future: {
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true,
+      },
+    }),
+    tsconfigPaths(),
+  ],
+  build: {
+    assetsInlineLimit: 0,
+  },
++  ssr: {
++    optimizeDeps: {
++      include: [
++        'react-use-websocket',
++        'beautify',
++        'react-diff-viewer-continued',
++        'react-d3-tree',
++      ],
++    },
++  },
+});
+```
+
+### Debugging issues
+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:
+- `require is not defined`
+- `module.exports is not defined`
+- `Cannot find module 'X'`
+
+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
+directly used by remix-development-tools, but it's a dependency of a dependency that is used by remix-development-tools.
+
+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
+remix-development-tools. This package will be the last one in the stack trace.
+
+
+Enjoy your new remix-development-tools 🚀

docs/posts/main/guides/hydrogen-oxygen.mdx

@@ -0,0 +1,100 @@
+---
+title: "Integration with Shopify Hydrogen and Oxygen"
+description: "Guide on getting remix-development-tools working with Shopify Hydrogen and Oxygen"
+---
+
+## Adding remix-development-tools to your project
+
+Even though remix-development-tools is an ESM package, some of the dependencies it relies on are unfortunately not. This means that
+these dependencies will break the shopify CLI when running your Remix app built on top of Shopify Hydrogen and Oxygen.
+
+In case your package.json script `dev` command looks like this:
+
+```json
+  "dev": "shopify hydrogen dev --codegen",
+```
+
+This means you'll have to do the following to get it working.
+
+Go to your `vite.config.ts` and add `remix-development-tools`, depending on your project the file will look something like this:
+```diff
+import { defineConfig } from 'vite';
+import { hydrogen } from '@shopify/hydrogen/vite';
+import { oxygen } from '@shopify/mini-oxygen/vite';
+import { vitePlugin as remix} from '@remix-run/dev';
+import tsconfigPaths from 'vite-tsconfig-paths';
++ import { remixDevTools } from 'remix-development-tools';
+export default defineConfig({
+  plugins: [
++   remixDevTools(),
+    hydrogen(),
+    oxygen(),
+    remix({
+      presets: [hydrogen.preset()],
+      future: {
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true,
+      },
+    }),
+    tsconfigPaths(),
+  ],
+  build: {
+    assetsInlineLimit: 0,
+  },
+  ssr: {
+    optimizeDeps: {
+      include: [],
+    },
+  },
+});
+
+```
+## Adding problematic dependencies
+
+Add the following dependencies to `ssr.optimizeDeps.include` array:
+```diff
+export default defineConfig({
+  plugins: [
+    hydrogen(),
+    oxygen(),
+    remix({
+      presets: [hydrogen.preset()],
+      future: {
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true,
+      },
+    }),
+    tsconfigPaths(),
+  ],
+  build: {
+    assetsInlineLimit: 0,
+  },
++  ssr: {
++    optimizeDeps: {
++      include: [
++        'react-use-websocket',
++        'beautify',
++        'react-diff-viewer-continued',
++        'react-d3-tree',
++      ],
++    },
++  },
+});
+```
+
+### Debugging issues
+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:
+- `require is not defined`
+- `module.exports is not defined`
+- `Cannot find module 'X'`
+
+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
+directly used by remix-development-tools, but it's a dependency of a dependency that is used by remix-development-tools.
+
+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
+remix-development-tools. This package will be the last one in the stack trace.
+
+
+Enjoy your new remix-development-tools 🚀

docs/posts/main/metadata.json

@@ -13,6 +13,7 @@
     "examples": "features/examples",
     "migration": "guides/migration",
     "plugins": "guides/plugins",
+    "hydrogen": "guides/hydrogen-oxygen",
     "contributing": "guides/contributing"
   },
   "sections": [
@@ -114,6 +115,12 @@
       "section": "Guides",
       "slug": "plugins"
     },
+    "hydrogen": {
+      "title": "Hydrogen + Oxygen integration",
+      "description": "Using remix-development-tools with Hydrogen and Oxygen from Shopify.",
+      "section": "Guides",
+      "slug": "hydrogen"
+    },
     "contributing": {
       "title": "Contributing",
       "alternateTitle": "Contributing",

src/client/components/jsonRenderer.tsx

@@ -27,13 +27,16 @@ const JsonRenderer = ({ data }: JsonRendererProps) => {
 				: Object.entries(data)
 						.map(([key, value]) => {
 							if (isPromise(value)) {
-								value.then((res) => {
-									if (!ref.current) return
-									setJson((json: any) => ({
-										...json,
-										[key]: res,
-									}))
-								})
+								value
+									.then((res) => {
+										if (!ref.current) return
+										console.log(res)
+										setJson((json: any) => ({
+											...json,
+											[key]: res,
+										}))
+									})
+									.catch((e) => {})
 								return { [key]: "Loading deferred data..." }
 							}
 							return { [key]: value }
@@ -50,6 +53,7 @@ const JsonRenderer = ({ data }: JsonRendererProps) => {
 	useEffect(() => {
 		setJson(data)
 	}, [data])
+
 	if (typeof json === "string") {
 		return <div className="rdt-max-w-xs rdt-text-green-600">{json}</div>
 	}

src/client/context/rdtReducer.ts

@@ -15,15 +15,15 @@ export const defaultServerRouteState: ServerRouteInfo = {
 	loaders: [],
 	actions: [],
 }
-
+// classes created in input.css
 export const ROUTE_BOUNDARY_GRADIENTS = {
-	sea: "bg-green-100 bg-gradient-to-r from-cyan-500/50 to-blue-500/50",
-	hyper: "bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500",
-	gotham: "bg-gradient-to-r from-gray-700 via-gray-900 to-black",
-	gray: "bg-gradient-to-r from-gray-700/50 via-gray-900/50 to-black/50",
-	watermelon: "bg-gradient-to-r from-red-500 to-green-500",
-	ice: "bg-gradient-to-r from-rose-100 to-teal-100",
-	silver: "bg-gradient-to-r from-gray-100 to-gray-300",
+	sea: "sea-gradient",
+	hyper: "hyper-gradient",
+	gotham: "gotham-gradient",
+	gray: "gray-gradient",
+	watermelon: "watermelon-gradient",
+	ice: "ice-gradient",
+	silver: "silver-gradient",
 } as const
 
 export const RouteBoundaryOptions = Object.keys(ROUTE_BOUNDARY_GRADIENTS) as (keyof typeof ROUTE_BOUNDARY_GRADIENTS)[]

src/client/hooks/useSetRouteBoundaries.ts

@@ -14,10 +14,7 @@ export const useSetRouteBoundaries = () => {
 			// Overrides the hovering so the classes are force removed if needed
 			const hovering = isHovering ?? settings.isHoveringRoute
 			// Classes to apply/remove
-			const classes = [
-				"transition-all duration-200 rounded-lg apply-tw",
-				ROUTE_BOUNDARY_GRADIENTS[settings.routeBoundaryGradient],
-			].join(" ")
+			const classes = ROUTE_BOUNDARY_GRADIENTS[settings.routeBoundaryGradient]
 
 			const isRoot = settings.hoveredRoute === "root"
 			// 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 = () => {
 			if (element) {
 				// Root has no outlet so we need to use the body, otherwise we get the outlet that is the next sibling of the element
 				const outlet = element
-				for (const c of classes.split(" ")) {
-					outlet.classList[hovering ? "add" : "remove"](c)
+				for (const classItem of classes.split(" ")) {
+					outlet.classList[hovering ? "add" : "remove"](classItem)
 				}
 			}
-			if (element?.parentElement) {
-				element.parentElement.classList[hovering ? "add" : "remove"]("remix-dev-tools")
-			}
 		},
 		[settings.hoveredRoute, settings.isHoveringRoute, settings.routeBoundaryGradient, matches.length]
 	)

src/client/layout/MainPanel.tsx

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

src/input.css

@@ -559,52 +559,24 @@
 	@tailwind variants;
 }
 
-.apply-tw {
-	--tw-border-spacing-x: 0;
-	--tw-border-spacing-y: 0;
-	--tw-translate-x: 0;
-	--tw-translate-y: 0;
-	--tw-rotate: 0;
-	--tw-skew-x: 0;
-	--tw-skew-y: 0;
-	--tw-scale-x: 1;
-	--tw-scale-y: 1;
-	--tw-pan-x: ;
-	--tw-pan-y: ;
-	--tw-pinch-zoom: ;
-	--tw-scroll-snap-strictness: proximity;
-	--tw-gradient-from-position: ;
-	--tw-gradient-via-position: ;
-	--tw-gradient-to-position: ;
-	--tw-ordinal: ;
-	--tw-slashed-zero: ;
-	--tw-numeric-figure: ;
-	--tw-numeric-spacing: ;
-	--tw-numeric-fraction: ;
-	--tw-ring-inset: ;
-	--tw-ring-offset-width: 0px;
-	--tw-ring-offset-color: #fff;
-	--tw-ring-color: rgb(59 130 246 / 0.5);
-	--tw-ring-offset-shadow: 0 0 #0000;
-	--tw-ring-shadow: 0 0 #0000;
-	--tw-shadow: 0 0 #0000;
-	--tw-shadow-colored: 0 0 #0000;
-	--tw-blur: ;
-	--tw-brightness: ;
-	--tw-contrast: ;
-	--tw-grayscale: ;
-	--tw-hue-rotate: ;
-	--tw-invert: ;
-	--tw-saturate: ;
-	--tw-sepia: ;
-	--tw-drop-shadow: ;
-	--tw-backdrop-blur: ;
-	--tw-backdrop-brightness: ;
-	--tw-backdrop-contrast: ;
-	--tw-backdrop-grayscale: ;
-	--tw-backdrop-hue-rotate: ;
-	--tw-backdrop-invert: ;
-	--tw-backdrop-opacity: ;
-	--tw-backdrop-saturate: ;
-	--tw-backdrop-sepia: ;
+.sea-gradient {
+	@apply bg-green-100 bg-gradient-to-r from-cyan-500/50 to-blue-500/50
 }
+.hyper-gradient {
+	@apply bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500
+}
+.gotham-gradient {
+	@apply bg-gradient-to-r from-gray-700 via-gray-900 to-black
+}
+.gray-gradient {
+	@apply bg-gradient-to-r from-gray-700/50 via-gray-900/50 to-black/50
+}
+.watermelon-gradient {
+	@apply bg-gradient-to-r from-red-500 to-green-500
+}
+.ice-gradient {
+	@apply bg-gradient-to-r from-rose-100 to-teal-100
+}
+.silver-gradient {
+	@apply bg-gradient-to-r from-gray-100 to-gray-300
+}