Upgrade docs/preview to Vite and TW4 (#2240)

* Remove tailwind v3 from example

* Migrate to Vite

* Fix reading and reloading docs

* Tailwind v4

* Check variables before starting

* Update Readme

* Remove build command from docs-preview utility

* Dedup package-lock.json, bump ws dependency

docs/preview/README.md

@@ -4,8 +4,12 @@ This tool makes it easier to preview reference docs that are deployed to shopify
 
 ## Usage
 
-Run the CLI with a path to the docs metadata file, and an app will boot up rendering a preview of the docs.
+Run the dev command from a path that contains a `docs/generated/generated_docs_data.json` file.
+
+Example from the `packages/hydrogen` or `packages/hydrogen-react` directories:
 
 ```bash
-node preview/bin/cli.js path/to/generated_docs_data.json
+npm run dev --prefix ../../docs/preview
 ```
+
+Alternatively, pass `GEN_DOCS_PATH` as an environment variable to overwrite the default path.

docs/preview/app/root.tsx

@@ -1,7 +1,6 @@
 import {json, type LinksFunction} from '@remix-run/node';
 import {
   Links,
-  LiveReload,
   Meta,
   NavLink,
   Outlet,
@@ -10,7 +9,7 @@ import {
   useLoaderData,
   useParams,
 } from '@remix-run/react';
-import stylesheet from '~/tailwind.css';
+import stylesheet from '~/tailwind.css?url';
 import {Fragment, useCallback, useState} from 'react';
 import he from 'he';
 
@@ -19,8 +18,7 @@ export const links: LinksFunction = () => [
 ];
 
 export async function loader() {
-  delete require.cache[process.env.DOCS_META_FILE!];
-  const data = require(process.env.DOCS_META_FILE!);
+  const {default: data} = await import('virtual:docs.json');
 
   for (const doc of data) {
     for (const tab of doc.defaultExample.codeblock.tabs) {
@@ -69,7 +67,6 @@ export default function App() {
         </div>
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

docs/preview/app/tailwind.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';

docs/preview/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+/// <reference types="@remix-run/node" />
+
+declare module 'virtual:docs.json' {
+  const value: Array<Record<string, any>>;
+  export default value;
+}

docs/preview/package.json

@@ -2,18 +2,17 @@
   "name": "docs-preview",
   "private": true,
   "sideEffects": false,
+  "type": "module",
   "scripts": {
-    "build": "remix build",
-    "dev": "remix dev",
+    "dev": "remix vite:dev",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/css-bundle": "^2.10.1",
     "@remix-run/node": "^2.10.1",
     "@remix-run/react": "^2.10.1",
     "@remix-run/serve": "^2.10.1",
     "he": "^1.2.0",
-    "isbot": "^3.6.8",
+    "isbot": "^3.8.0",
     "marked": "^9.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -22,13 +21,15 @@
   "devDependencies": {
     "@remix-run/dev": "^2.10.1",
     "@remix-run/eslint-config": "^2.10.1",
+    "@tailwindcss/vite": "4.0.0-alpha.16",
     "@types/he": "^1.2.1",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/react-syntax-highlighter": "^15.5.7",
     "eslint": "^8.38.0",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "engines": {
     "node": ">=18.0.0"

docs/preview/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "isolatedModules": true,

docs/preview/vite.config.js

@@ -0,0 +1,43 @@
+import path from 'node:path';
+import {defineConfig} from 'vite';
+import {vitePlugin as remix} from '@remix-run/dev';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import tailwindcss from '@tailwindcss/vite';
+
+const {INIT_CWD, GEN_DOCS_PATH} = process.env;
+
+if (!GEN_DOCS_PATH && INIT_CWD === process.env.PWD) {
+  const message =
+    '\n\nRun this utility from a directory that contains a generated docs folder,\n' +
+    'or set the `GEN_DOCS_PATH` environment variable to the path of the generated docs folder.\n\n';
+  const error = new Error(message);
+  error.stack = '';
+  throw error;
+}
+
+export default defineConfig({
+  plugins: [
+    remix({
+      ignoredRouteFiles: ['**/.*'],
+      future: {
+        v3_fetcherPersist: false,
+        v3_relativeSplatPath: false,
+        v3_throwAbortReason: false,
+      },
+    }),
+    tsconfigPaths(),
+    tailwindcss(),
+    {
+      name: 'docs:preview',
+      resolveId(id) {
+        if (id.startsWith('virtual:docs.json')) {
+          return {
+            id:
+              GEN_DOCS_PATH ??
+              path.join(INIT_CWD, 'docs/generated/generated_docs_data.json'),
+          };
+        }
+      },
+    },
+  ],
+});

examples/express/package.json

@@ -10,7 +10,6 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/css-bundle": "^2.10.1",
     "@remix-run/express": "^2.10.1",
     "@remix-run/node": "^2.10.1",
     "@remix-run/react": "^2.10.1",