Response streaming

src-web/components/Editor/Editor.tsx

@@ -1,4 +1,3 @@
-import { autocompletion } from '@codemirror/autocomplete';
 import type { Transaction, TransactionSpec } from '@codemirror/state';
 import { Compartment, EditorSelection, EditorState, Prec } from '@codemirror/state';
 import classnames from 'classnames';

src-web/components/Editor/completion/completion.ts

@@ -11,7 +11,6 @@ const variables = [
 ];
 
 export function myCompletions(context: CompletionContext) {
-  // console.log('COMPLETE', context);
   const toStartOfName = context.matchBefore(/\w*/);
   const toStartOfVariable = context.matchBefore(/\$\{.*/);
   const toMatch = toStartOfVariable ?? toStartOfName ?? null;

src-web/components/Editor/extensions.ts

@@ -9,14 +9,13 @@ import { html } from '@codemirror/lang-html';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
 import { xml } from '@codemirror/lang-xml';
+import type { LanguageSupport } from '@codemirror/language';
 import {
   bracketMatching,
   foldGutter,
   foldKeymap,
   HighlightStyle,
   indentOnInput,
-  LanguageSupport,
-  LRLanguage,
   syntaxHighlighting,
 } from '@codemirror/language';
 import { lintKeymap } from '@codemirror/lint';
@@ -33,12 +32,9 @@ import {
   lineNumbers,
   rectangularSelection,
 } from '@codemirror/view';
-import { parseMixed } from '@lezer/common';
 import { tags as t } from '@lezer/highlight';
-import { myCompletions } from './completion/completion';
-import { parser as twigParser } from './twig/twig';
+import { twig } from './twig/extension';
 import { url } from './url/extension';
-import { placeholders } from './widgets';
 
 export const myHighlightStyle = HighlightStyle.define([
   {
@@ -102,35 +98,7 @@ export function getLanguageExtension({
     return [base];
   }
 
-  const mixedTwigParser = twigParser.configure({
-    props: [
-      // Add basic folding/indent metadata
-      // foldNodeProp.add({ Conditional: foldInside }),
-      // indentNodeProp.add({
-      //   Conditional: (cx) => {
-      //     const closed = /^\s*\{% endif/.test(cx.textAfter);
-      //     return cx.lineIndent(cx.node.from) + (closed ? 0 : cx.unit);
-      //   },
-      // }),
-    ],
-    wrap: parseMixed((node) => {
-      return node.type.isTop
-        ? {
-            parser: base.language.parser,
-            overlay: (node) => node.type.name === 'Text',
-          }
-        : null;
-    }),
-  });
-
-  const twigLanguage = LRLanguage.define({ parser: mixedTwigParser, languageData: {} });
-  const completion = twigLanguage.data.of({
-    autocomplete: myCompletions,
-  });
-  const languageSupport = new LanguageSupport(twigLanguage, [completion]);
-  const completion2 = base.language.data.of({ autocomplete: myCompletions });
-  const languageSupport2 = new LanguageSupport(base.language, [completion2]);
-  return [languageSupport, languageSupport2, placeholders, base.support];
+  return twig(base);
 }
 
 export const baseExtensions = [

src-web/components/Editor/twig/extension.ts

@@ -0,0 +1,51 @@
+import { LRLanguage, LanguageSupport } from '@codemirror/language';
+import { parseMixed } from '@lezer/common';
+import { myCompletions } from '../completion/completion';
+import { placeholders } from '../widgets';
+import { parser as twigParser } from './twig';
+
+export function twig(base?: LanguageSupport) {
+  const parser = mixedOrPlainParser(base);
+  const twigLanguage = LRLanguage.define({ name: 'twig', parser, languageData: {} });
+  const completion = twigLanguage.data.of({
+    autocomplete: myCompletions,
+  });
+  const languageSupport = new LanguageSupport(twigLanguage, [completion]);
+
+  if (base) {
+    const completion2 = base.language.data.of({ autocomplete: myCompletions });
+    const languageSupport2 = new LanguageSupport(base.language, [completion2]);
+    return [languageSupport, languageSupport2, placeholders, base.support];
+  } else {
+    return [languageSupport, placeholders];
+  }
+}
+
+function mixedOrPlainParser(base?: LanguageSupport) {
+  if (base === undefined) {
+    return twigParser;
+  }
+
+  const mixedParser = twigParser.configure({
+    props: [
+      // Add basic folding/indent metadata
+      // foldNodeProp.add({ Conditional: foldInside }),
+      // indentNodeProp.add({
+      //   Conditional: (cx) => {
+      //     const closed = /^\s*\{% endif/.test(cx.textAfter);
+      //     return cx.lineIndent(cx.node.from) + (closed ? 0 : cx.unit);
+      //   },
+      // }),
+    ],
+    wrap: parseMixed((node) => {
+      return node.type.isTop
+        ? {
+            parser: base.language.parser,
+            overlay: (node) => node.type.name === 'Text',
+          }
+        : null;
+    }),
+  });
+
+  return mixedParser;
+}

src-web/components/ResponsePane.tsx

@@ -1,12 +1,12 @@
-import { useDeleteAllResponses, useDeleteResponse, useResponses } from '../hooks/useResponses';
 import { motion } from 'framer-motion';
-import { HStack, VStack } from './Stacks';
-import Editor from './Editor/Editor';
 import { useEffect, useMemo, useState } from 'react';
-import { WindowDragRegion } from './WindowDragRegion';
+import { useDeleteAllResponses, useDeleteResponse, useResponses } from '../hooks/useResponses';
 import { Dropdown } from './Dropdown';
-import { IconButton } from './IconButton';
+import Editor from './Editor/Editor';
 import { Icon } from './Icon';
+import { IconButton } from './IconButton';
+import { HStack, VStack } from './Stacks';
+import { WindowDragRegion } from './WindowDragRegion';
 
 interface Props {
   requestId: string;
@@ -19,9 +19,10 @@ export function ResponsePane({ requestId, error }: Props) {
   const responses = useResponses(requestId);
   const response = activeResponseId
     ? responses.data.find((r) => r.id === activeResponseId)
-    : responses.data[0];
+    : responses.data[responses.data.length - 1];
   const deleteResponse = useDeleteResponse(response);
   const deleteAllResponses = useDeleteAllResponses(response?.requestId);
+  error = response?.error ?? error;
 
   useEffect(() => {
     setActiveResponseId(null);
@@ -76,7 +77,9 @@ export function ResponsePane({ requestId, error }: Props) {
                 items="center"
                 className="italic text-gray-500 text-sm w-full h-10 mb-3 flex-shrink-0"
               >
-                <div className="w-full">
+                <div className="whitespace-nowrap">
+                  {response.updatedAt.toISOString()}
+                  &nbsp;&bull;&nbsp;
                   {response.status}
                   {response.statusReason && ` ${response.statusReason}`}
                   &nbsp;&bull;&nbsp;
@@ -84,7 +87,6 @@ export function ResponsePane({ requestId, error }: Props) {
                   {Math.round(response.body.length / 1000)} KB
                 </div>
                 <HStack items="center" className="ml-auto">
-                  <div className="font-mono">{response.url}</div>
                   {contentType.includes('html') && (
                     <IconButton
                       icon={viewMode === 'pretty' ? 'eye' : 'code'}
@@ -104,7 +106,7 @@ export function ResponsePane({ requestId, error }: Props) {
                 />
               ) : response?.body ? (
                 <Editor
-                  valueKey={response.id}
+                  valueKey={`${contentType}:${response.body}`}
                   defaultValue={response?.body}
                   contentType={contentType}
                 />