return the raw result from the relay when the request is coming from …

…a non-browser user agent (#593)

* return the raw result from the relay when the request is coming from a non-browser user agent

* clean up after myself

apps/zipper.dev/src/components/playground/tab-runs.tsx

@@ -26,6 +26,7 @@ import {
   Avatar,
   Button,
   Spacer,
+  Code,
 } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import {
@@ -46,6 +47,7 @@ import { JSONViewer } from '../json-editor';
 import { AppConsole } from './app-console';
 import { LogMessage } from '@zipper/types';
 import { TITLE_COLUMN_MIN_WIDTH } from './constants';
+import { Markdown } from '@zipper/ui';
 
 type HistoryTabProps = {
   appId: string;
@@ -372,7 +374,9 @@ const HistoryTab: React.FC<HistoryTabProps> = ({ appId }) => {
             <Heading fontSize="md" mb="4">
               Inputs
             </Heading>
-            <JSONViewer value={modalValue} options={{ readOnly: true }} />
+            <Markdown>{`\`\`\`js
+${modalValue}
+\`\`\``}</Markdown>
             {logValue.length > 0 && (
               <>
                 <Heading fontSize="md" my="4">

apps/zipper.dev/src/middleware.ts

@@ -1,8 +1,10 @@
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
-import { ZIPPER_TEMP_USER_ID_COOKIE_NAME } from '@zipper/utils';
+import {
+  hasBrowserLikeUserAgent,
+  ZIPPER_TEMP_USER_ID_COOKIE_NAME,
+} from '@zipper/utils';
 import { hasZipperEszipHeader } from '~/utils/eszip-utils';
-import { hasBrowserLikeUserAgent } from '~/utils/user-agent';
 
 const parseZipperSrcPath = (req: NextRequest) => {
   const matches = req.nextUrl.pathname.match(
@@ -25,7 +27,7 @@ export default async (req: NextRequest) => {
   const zipperSrcParams = parseZipperSrcPath(req);
   if (
     zipperSrcParams &&
-    (!hasBrowserLikeUserAgent(req) || hasZipperEszipHeader(req))
+    (!hasBrowserLikeUserAgent(req.headers) || hasZipperEszipHeader(req))
   ) {
     const { appSlug, filename } = zipperSrcParams;
     const url = new URL(`/api/src/${appSlug}/latest/${filename}`, req.url);

apps/zipper.run/src/middleware.ts

@@ -7,6 +7,7 @@ import htmlHandler from './api-handlers/html.handler';
 
 import {
   getZipperApiUrl,
+  hasBrowserLikeUserAgent,
   ZIPPER_TEMP_USER_ID_COOKIE_NAME,
 } from '@zipper/utils';
 import { jwtVerify } from 'jose';
@@ -95,6 +96,16 @@ async function maybeGetCustomResponse(
         return NextResponse.rewrite(url, { request: { headers } });
       }
     }
+
+    default: {
+      if (!hasBrowserLikeUserAgent(request.headers)) {
+        console.log('not a browser so returning the relay');
+        return serveRelay({
+          request,
+          bootOnly: false,
+        });
+      }
+    }
   }
 }
 

packages/@zipper-ui/src/components/code.tsx

@@ -18,7 +18,9 @@ export const Code = ({
       language.toLowerCase(),
     )
   ) {
-    code = prettierFormat(code);
+    try {
+      code = prettierFormat(code);
+    } catch (e) {}
   }
 
   return (

packages/@zipper-utils/generated/index.gen.ts

@@ -16,5 +16,6 @@ export * from '../src/utils/parseBody';
 export * from '../src/utils/safe-json';
 export * from '../src/utils/settings';
 export * from '../src/utils/url';
+export * from '../src/utils/user-agent';
 export * from '../src/utils/uuid';
 export * from '../src/constants';

packages/@zipper-utils/src/utils/user-agent.ts

@@ -0,0 +1,10 @@
+import Bowser from 'bowser';
+
+export const hasBrowserLikeUserAgent = (headers: Headers) => {
+  const parser = Bowser.getParser(headers.get('user-agent') || '');
+  return !!(
+    parser.getBrowserName() &&
+    parser.getEngineName() &&
+    parser.getOSName()
+  );
+};