starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-01-11 20:00:29 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Move create request and fix slow HTML highlighting

Browse Source
This commit is contained in:
Gregory Schier
2023-10-26 09:42:19 -07:00
parent 8fd7979474
commit cba8a055d5
5 changed files with 39 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
package-lock.json generated
View File

@@ -8,17 +8,12 @@
"name": "yaak-app",
"version": "0.0.0",
"dependencies": {
"@codemirror/autocomplete": "6.2.0",
"@codemirror/commands": "^6.2.1",
"@codemirror/lang-html": "^6.4.2",
"@codemirror/lang-javascript": "^6.1.4",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-xml": "^6.0.2",
"@codemirror/language": "6.2.1",
"@codemirror/lint": "6.2.1",
"@codemirror/language": "^6.6.0",
"@codemirror/search": "^6.2.3",
"@codemirror/state": "6.2.0",
"@codemirror/view": "6.2.1",
"@lezer/generator": "^1.2.2",
"@lezer/highlight": "^1.1.3",
"@lezer/lr": "^1.3.3",
@@ -32,7 +27,7 @@
"@tauri-apps/api": "^1.5.1",
"buffer": "^6.0.3",
"classnames": "^2.3.2",
"cm6-graphql": "^0.0.10",
"cm6-graphql": "^0.0.9",
"codemirror": "^6.0.1",
"focus-trap-react": "^10.1.1",
"format-graphql": "^1.4.0",
@@ -50,7 +45,7 @@
},
"devDependencies": {
"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
"@tauri-apps/cli": "^1.5.6",
"@tauri-apps/cli": "^1.5.4",
"@types/node": "^18.7.10",
"@types/papaparse": "^5.3.7",
"@types/parse-color": "^1.0.1",
@@ -498,57 +493,6 @@
"@lezer/common": "^1.1.0"
}
},
"node_modules/@codemirror/lang-css": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz",
"integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==",
"dependencies": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@lezer/common": "^1.0.2",
"@lezer/css": "^1.0.0"
}
},
"node_modules/@codemirror/lang-html": {
"version": "6.4.6",
"resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.6.tgz",
"integrity": "sha512-E4C8CVupBksXvgLSme/zv31x91g06eZHSph7NczVxZW+/K+3XgJGWNT//2WLzaKSBoxpAjaOi5ZnPU1SHhjh3A==",
"dependencies": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/lang-css": "^6.0.0",
"@codemirror/lang-javascript": "^6.0.0",
"@codemirror/language": "^6.4.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.17.0",
"@lezer/common": "^1.0.0",
"@lezer/css": "^1.1.0",
"@lezer/html": "^1.3.0"
}
},
"node_modules/@codemirror/lang-html/node_modules/@codemirror/language": {
"version": "6.9.2",
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.2.tgz",
"integrity": "sha512-QGTQXSpAKDIzaSE96zNK1UfIUhPgkT1CLjh1N5qVzZuxgsEOhz5RqaN8QCIdyOQklGLx3MgHd9YrE3X3+Pl1ow==",
"dependencies": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.1.0",
"@lezer/highlight": "^1.0.0",
"@lezer/lr": "^1.0.0",
"style-mod": "^4.0.0"
}
},
"node_modules/@codemirror/lang-html/node_modules/@codemirror/view": {
"version": "6.21.4",
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.21.4.tgz",
"integrity": "sha512-WKVZ7nvN0lwWPfAf05WxWqTpwjC8YN3q5goj3CsSig7//DD81LULgOx3nBegqpqP0iygBqRmW8z0KSc2QTAdAg==",
"dependencies": {
"@codemirror/state": "^6.1.4",
"style-mod": "^4.1.0",
"w3c-keyname": "^2.2.4"
}
},
"node_modules/@codemirror/lang-javascript": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.1.tgz",
@@ -563,19 +507,6 @@
"@lezer/javascript": "^1.0.0"
}
},
"node_modules/@codemirror/lang-javascript/node_modules/@codemirror/language": {
"version": "6.9.2",
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.2.tgz",
"integrity": "sha512-QGTQXSpAKDIzaSE96zNK1UfIUhPgkT1CLjh1N5qVzZuxgsEOhz5RqaN8QCIdyOQklGLx3MgHd9YrE3X3+Pl1ow==",
"dependencies": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.1.0",
"@lezer/highlight": "^1.0.0",
"@lezer/lr": "^1.0.0",
"style-mod": "^4.0.0"
}
},
"node_modules/@codemirror/lang-javascript/node_modules/@codemirror/view": {
"version": "6.21.4",
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.21.4.tgz",
@@ -607,7 +538,7 @@
"@lezer/xml": "^1.0.0"
}
},
"node_modules/@codemirror/lang-xml/node_modules/@codemirror/language": {
"node_modules/@codemirror/language": {
"version": "6.9.2",
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.2.tgz",
"integrity": "sha512-QGTQXSpAKDIzaSE96zNK1UfIUhPgkT1CLjh1N5qVzZuxgsEOhz5RqaN8QCIdyOQklGLx3MgHd9YrE3X3+Pl1ow==",
@@ -620,19 +551,6 @@
"style-mod": "^4.0.0"
}
},
"node_modules/@codemirror/language": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
"integrity": "sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==",
"dependencies": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0",
"@lezer/highlight": "^1.0.0",
"@lezer/lr": "^1.0.0",
"style-mod": "^4.0.0"
}
},
"node_modules/@codemirror/lint": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.2.1.tgz",
@@ -1220,15 +1138,6 @@
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.0.tgz",
"integrity": "sha512-XPIN3cYDXsoJI/oDWoR2tD++juVrhgIago9xyKhZ7IhGlzdDM9QgC8D8saKNCz5pindGcznFr2HBSsEQSWnSjw=="
},
"node_modules/@lezer/css": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.3.tgz",
"integrity": "sha512-SjSM4pkQnQdJDVc80LYzEaMiNy9txsFbI7HsMgeVF28NdLaAdHNtQ+kB/QqDUzRBV/75NTXjJ/R5IdC8QQGxMg==",
"dependencies": {
"@lezer/highlight": "^1.0.0",
"@lezer/lr": "^1.0.0"
}
},
"node_modules/@lezer/generator": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/@lezer/generator/-/generator-1.5.1.tgz",
@@ -1249,16 +1158,6 @@
"@lezer/common": "^1.0.0"
}
},
"node_modules/@lezer/html": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.6.tgz",
"integrity": "sha512-Kk9HJARZTc0bAnMQUqbtuhFVsB4AnteR2BFUWfZV7L/x1H0aAKz6YabrfJ2gk/BEgjh9L3hg5O4y2IDZRBdzuQ==",
"dependencies": {
"@lezer/common": "^1.0.0",
"@lezer/highlight": "^1.0.0",
"@lezer/lr": "^1.0.0"
}
},
"node_modules/@lezer/javascript": {
"version": "1.4.8",
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.8.tgz",
@@ -3293,18 +3192,18 @@
}
},
"node_modules/cm6-graphql": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/cm6-graphql/-/cm6-graphql-0.0.10.tgz",
"integrity": "sha512-Phn+SBjpRkPFysVwTTY5JiuEX0U59czifVrfyu5CXwz7/Se7UTodA0C5+vdAPjWI2Z+7bMIXTfqGDaTGM5MmZw==",
"version": "0.0.9",
"resolved": "https://registry.npmjs.org/cm6-graphql/-/cm6-graphql-0.0.9.tgz",
"integrity": "sha512-MhdQMuVGwnyEk3I1BiLhpMEhOC7sTxmbq205cjdDtHysB0EtNLBoccy+7+h/+So90otjwJcSaty6vwp22WN6kw==",
"dependencies": {
"graphql-language-service": "^5.2.0"
"graphql-language-service": "^5.1.7"
},
"peerDependencies": {
"@codemirror/autocomplete": "6.2.0",
"@codemirror/language": "6.2.1",
"@codemirror/lint": "6.2.1",
"@codemirror/state": "6.2.0",
"@codemirror/view": "6.2.1",
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/state": "^6.1.0",
"@codemirror/view": "^6.1.2",
"@lezer/highlight": "^1.0.0",
"graphql": "^16.5.0"
}

11
package.json
View File

@@ -17,17 +17,12 @@
"prepare": "husky install"
},
"dependencies": {
"@codemirror/autocomplete": "6.2.0",
"@codemirror/commands": "^6.2.1",
"@codemirror/lang-html": "^6.4.2",
"@codemirror/lang-javascript": "^6.1.4",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-xml": "^6.0.2",
"@codemirror/language": "6.2.1",
"@codemirror/lint": "6.2.1",
"@codemirror/language": "^6.6.0",
"@codemirror/search": "^6.2.3",
"@codemirror/state": "6.2.0",
"@codemirror/view": "6.2.1",
"@lezer/generator": "^1.2.2",
"@lezer/highlight": "^1.1.3",
"@lezer/lr": "^1.3.3",
@@ -41,7 +36,7 @@
"@tauri-apps/api": "^1.5.1",
"buffer": "^6.0.3",
"classnames": "^2.3.2",
"cm6-graphql": "^0.0.10",
"cm6-graphql": "^0.0.9",
"codemirror": "^6.0.1",
"focus-trap-react": "^10.1.1",
"format-graphql": "^1.4.0",
@@ -58,7 +53,6 @@
"uuid": "^9.0.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^3.1.0",
"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
"@tauri-apps/cli": "^1.5.4",
"@types/node": "^18.7.10",
@@ -70,6 +64,7 @@
"@types/uuid": "^9.0.1",
"@typescript-eslint/eslint-plugin": "^5.57.0",
"@typescript-eslint/parser": "^5.57.0",
"@vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.34.0",
"eslint-config-prettier": "^8.6.0",

11
src-web/components/Sidebar.tsx
View File

@@ -22,6 +22,7 @@ import { DropMarker } from './DropMarker';
import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
import { IconButton } from './core/IconButton';
import { useCreateRequest } from '../hooks/useCreateRequest';
interface Props {
className?: string;
@@ -33,6 +34,7 @@ enum ItemTypes {
export const Sidebar = memo(function Sidebar({ className }: Props) {
const { hidden } = useSidebarHidden();
const createRequest = useCreateRequest({ navigateAfter: true });
const sidebarRef = useRef<HTMLDivElement>(null);
const activeRequestId = useActiveRequestId();
const activeEnvironmentId = useActiveEnvironmentId();
@@ -156,13 +158,18 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
'h-full relative grid grid-rows-[auto_minmax(0,1fr)_auto]',
)}
>
<HStack className="mt-1 mb-2 pt-1 mx-2" justifyContent="between" alignItems="center" space={1}>
<HStack
className="mt-1 mb-2 pt-1 mx-2"
justifyContent="between"
alignItems="center"
space={1}
>
<WorkspaceActionsDropdown
forDropdown={false}
className="text-left mb-0"
justify="start"
/>
<IconButton size="sm" icon="plusCircle" title="Create Request" />
<IconButton size="sm" icon="plusCircle" title="Create Request" onClick={() => createRequest.mutate({})} />
</HStack>
<VStack
as="ul"

36
src-web/components/SidebarActions.tsx
View File

@@ -1,37 +1,17 @@
import { memo, useCallback } from 'react';
import { useCreateRequest } from '../hooks/useCreateRequest';
import { memo } from 'react';
import { useSidebarHidden } from '../hooks/useSidebarHidden';
import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
import { IconButton } from './core/IconButton';
export const SidebarActions = memo(function SidebarActions() {
const { hidden, toggle } = useSidebarHidden();
const createRequest = useCreateRequest({ navigateAfter: true });
const handleCreateRequest = useCallback(() => {
createRequest.mutate({});
}, [createRequest]);
useListenToTauriEvent('new_request', () => {
createRequest.mutate({});
});
return (
<>
<IconButton
onClick={toggle}
className="pointer-events-auto"
size="sm"
title="Show sidebar"
icon={hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
/>
<IconButton
onClick={handleCreateRequest}
className="pointer-events-auto"
size="sm"
title="Show sidebar"
icon="plusCircle"
/>
</>
<IconButton
onClick={toggle}
className="pointer-events-auto"
size="sm"
title="Show sidebar"
icon={hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
/>
);
});

10
src-web/components/core/Editor/extensions.ts
View File

@@ -5,7 +5,6 @@ import {
completionKeymap,
} from '@codemirror/autocomplete';
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
import { html } from '@codemirror/lang-html';
import { javascript } from '@codemirror/lang-javascript';
import { json } from '@codemirror/lang-json';
import { xml } from '@codemirror/lang-xml';
@@ -87,7 +86,7 @@ const syntaxExtensions: Record<string, LanguageSupport> = {
'application/graphql': graphqlLanguageSupport(),
'application/json': json(),
'application/javascript': javascript(),
'text/html': html(),
'text/html': xml(), // HTML as xml because HTML is oddly slow
'application/xml': xml(),
'text/xml': xml(),
url: url(),
@@ -98,14 +97,17 @@ export function getLanguageExtension({
useTemplating = false,
environment,
autocomplete,
}: { environment: Environment | null } & Pick<EditorProps, 'contentType' | 'useTemplating' | 'autocomplete'>) {
}: { environment: Environment | null } & Pick<
EditorProps,
'contentType' | 'useTemplating' | 'autocomplete'
>) {
const justContentType = contentType?.split(';')[0] ?? contentType ?? '';
if (justContentType === 'application/graphql') {
return graphql();
}
const base = syntaxExtensions[justContentType] ?? text();
if (!useTemplating) {
return base ? base : [];
return base;
}
return twig(base, environment, autocomplete);