aboutsummaryrefslogtreecommitdiffstats
path: root/subprojects/frontend
diff options
context:
space:
mode:
authorLibravatar Kristóf Marussy <kristof@marussy.com>2021-12-13 02:07:04 +0100
committerLibravatar Kristóf Marussy <kristof@marussy.com>2021-12-14 02:14:23 +0100
commita96c52b21e7e590bbdd70b80896780a446fa2e8b (patch)
tree663619baa254577bb2f5342192e80bca692ad91d /subprojects/frontend
parentbuild: move modules into subproject directory (diff)
downloadrefinery-a96c52b21e7e590bbdd70b80896780a446fa2e8b.tar.gz
refinery-a96c52b21e7e590bbdd70b80896780a446fa2e8b.tar.zst
refinery-a96c52b21e7e590bbdd70b80896780a446fa2e8b.zip
build: separate module for frontend
This allows us to simplify the webpack configuration and the gradle build scripts.
Diffstat (limited to 'subprojects/frontend')
-rw-r--r--subprojects/frontend/.eslintrc.js39
-rw-r--r--subprojects/frontend/.stylelintrc.js15
-rw-r--r--subprojects/frontend/build.gradle101
-rw-r--r--subprojects/frontend/package.json102
-rw-r--r--subprojects/frontend/src/App.tsx60
-rw-r--r--subprojects/frontend/src/RootStore.tsx39
-rw-r--r--subprojects/frontend/src/editor/EditorArea.tsx152
-rw-r--r--subprojects/frontend/src/editor/EditorButtons.tsx98
-rw-r--r--subprojects/frontend/src/editor/EditorParent.ts205
-rw-r--r--subprojects/frontend/src/editor/EditorStore.ts289
-rw-r--r--subprojects/frontend/src/editor/GenerateButton.tsx44
-rw-r--r--subprojects/frontend/src/editor/decorationSetExtension.ts39
-rw-r--r--subprojects/frontend/src/editor/findOccurrences.ts35
-rw-r--r--subprojects/frontend/src/editor/semanticHighlighting.ts24
-rw-r--r--subprojects/frontend/src/global.d.ts11
-rw-r--r--subprojects/frontend/src/index.html16
-rw-r--r--subprojects/frontend/src/index.scss16
-rw-r--r--subprojects/frontend/src/index.tsx69
-rw-r--r--subprojects/frontend/src/language/folding.ts115
-rw-r--r--subprojects/frontend/src/language/indentation.ts87
-rw-r--r--subprojects/frontend/src/language/problem.grammar149
-rw-r--r--subprojects/frontend/src/language/problemLanguageSupport.ts92
-rw-r--r--subprojects/frontend/src/language/props.ts7
-rw-r--r--subprojects/frontend/src/theme/EditorTheme.ts47
-rw-r--r--subprojects/frontend/src/theme/ThemeProvider.tsx15
-rw-r--r--subprojects/frontend/src/theme/ThemeStore.ts64
-rw-r--r--subprojects/frontend/src/themeVariables.module.scss9
-rw-r--r--subprojects/frontend/src/themes.scss38
-rw-r--r--subprojects/frontend/src/utils/ConditionVariable.ts64
-rw-r--r--subprojects/frontend/src/utils/PendingTask.ts60
-rw-r--r--subprojects/frontend/src/utils/Timer.ts33
-rw-r--r--subprojects/frontend/src/utils/logger.ts49
-rw-r--r--subprojects/frontend/src/xtext/ContentAssistService.ts219
-rw-r--r--subprojects/frontend/src/xtext/HighlightingService.ts37
-rw-r--r--subprojects/frontend/src/xtext/OccurrencesService.ts127
-rw-r--r--subprojects/frontend/src/xtext/UpdateService.ts363
-rw-r--r--subprojects/frontend/src/xtext/ValidationService.ts39
-rw-r--r--subprojects/frontend/src/xtext/XtextClient.ts86
-rw-r--r--subprojects/frontend/src/xtext/XtextWebSocketClient.ts362
-rw-r--r--subprojects/frontend/src/xtext/xtextMessages.ts40
-rw-r--r--subprojects/frontend/src/xtext/xtextServiceResults.ts112
-rw-r--r--subprojects/frontend/tsconfig.json18
-rw-r--r--subprojects/frontend/tsconfig.sonar.json16
-rw-r--r--subprojects/frontend/webpack.config.js164
44 files changed, 3766 insertions, 0 deletions
diff --git a/subprojects/frontend/.eslintrc.js b/subprojects/frontend/.eslintrc.js
new file mode 100644
index 00000000..aa7636f8
--- /dev/null
+++ b/subprojects/frontend/.eslintrc.js
@@ -0,0 +1,39 @@
1// Loosely based on
2// https://github.com/iamturns/create-exposed-app/blob/f14e435b8ce179c89cce3eea89e56202153a53da/.eslintrc.js
3module.exports = {
4 plugins: [
5 '@typescript-eslint',
6 ],
7 extends: [
8 'airbnb',
9 'airbnb-typescript',
10 'airbnb/hooks',
11 'plugin:@typescript-eslint/recommended',
12 'plugin:@typescript-eslint/recommended-requiring-type-checking',
13 ],
14 parserOptions: {
15 project: './tsconfig.json',
16 },
17 rules: {
18 // https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html
19 'import/prefer-default-export': 'off',
20 'import/no-default-export': 'error',
21 // propTypes are for runtime validation, but we rely on TypeScript for build-time validation:
22 // https://github.com/yannickcr/eslint-plugin-react/issues/2275#issuecomment-492003857
23 'react/prop-types': 'off',
24 // Make sure switches are exhaustive: https://stackoverflow.com/a/60166264
25 'default-case': 'off',
26 '@typescript-eslint/switch-exhaustiveness-check': 'error',
27 // https://github.com/airbnb/javascript/pull/2501
28 'react/function-component-definition': ['error', {
29 namedComponents: 'function-declaration',
30 }],
31 },
32 env: {
33 browser: true,
34 },
35 ignorePatterns: [
36 '*.js',
37 'build/**/*',
38 ],
39};
diff --git a/subprojects/frontend/.stylelintrc.js b/subprojects/frontend/.stylelintrc.js
new file mode 100644
index 00000000..7adf8f26
--- /dev/null
+++ b/subprojects/frontend/.stylelintrc.js
@@ -0,0 +1,15 @@
1module.exports = {
2 extends: 'stylelint-config-recommended-scss',
3 // Simplified for only :export to TypeScript based on
4 // https://github.com/pascalduez/stylelint-config-css-modules/blob/d792a6ac7d2bce8239edccbc5a72e0616f22d696/index.js
5 rules: {
6 'selector-pseudo-class-no-unknown': [
7 true,
8 {
9 ignorePseudoClasses: [
10 'export',
11 ],
12 },
13 ],
14 },
15};
diff --git a/subprojects/frontend/build.gradle b/subprojects/frontend/build.gradle
new file mode 100644
index 00000000..71444e89
--- /dev/null
+++ b/subprojects/frontend/build.gradle
@@ -0,0 +1,101 @@
1plugins {
2 id 'refinery-frontend-workspace'
3 id 'refinery-sonarqube'
4}
5
6import org.siouan.frontendgradleplugin.infrastructure.gradle.RunYarn
7
8def webpackOutputDir = "${buildDir}/webpack"
9def productionResources = file("${webpackOutputDir}/production")
10
11frontend {
12 assembleScript = 'assemble:webpack'
13}
14
15configurations {
16 productionAssets {
17 canBeConsumed = true
18 canBeResolved = false
19 }
20}
21
22def installFrontend = tasks.named('installFrontend')
23
24def generateLezerGrammar = tasks.register('generateLezerGrammar', RunYarn) {
25 dependsOn installFrontend
26 inputs.file 'src/language/problem.grammar'
27 inputs.file 'package.json'
28 inputs.file rootProject.file('yarn.lock')
29 outputs.file "${buildDir}/generated/sources/lezer/problem.ts"
30 outputs.file "${buildDir}/generated/sources/lezer/problem.terms.ts"
31 script = 'run assemble:lezer'
32}
33
34def assembleFrontend = tasks.named('assembleFrontend')
35assembleFrontend.configure {
36 dependsOn generateLezerGrammar
37 inputs.dir 'src'
38 inputs.file "${buildDir}/generated/sources/lezer/problem.ts"
39 inputs.file "${buildDir}/generated/sources/lezer/problem.terms.ts"
40 inputs.files('package.json', 'webpack.config.js')
41 inputs.file rootProject.file('yarn.lock')
42 outputs.dir productionResources
43}
44
45artifacts {
46 productionAssets(productionResources) {
47 builtBy assembleFrontend
48 }
49}
50
51def eslint = tasks.register('eslint', RunYarn) {
52 dependsOn installFrontend
53 inputs.dir 'src'
54 inputs.files('.eslintrc.js', 'tsconfig.json')
55 inputs.file rootProject.file('yarn.lock')
56 if (project.hasProperty('ci')) {
57 outputs.file "${buildDir}/eslint.json"
58 script = 'run check:eslint:ci'
59 } else {
60 script = 'run check:eslint'
61 }
62 group = 'verification'
63 description = 'Check for TypeScript errors.'
64}
65
66def stylelint = tasks.register('stylelint', RunYarn) {
67 dependsOn installFrontend
68 inputs.dir 'src'
69 inputs.file '.stylelintrc.js'
70 inputs.file rootProject.file('yarn.lock')
71 if (project.hasProperty('ci')) {
72 outputs.file "${buildDir}/stylelint.json"
73 script = 'run check:stylelint:ci'
74 } else {
75 script = 'run check:stylelint'
76 }
77 group = 'verification'
78 description = 'Check for Sass errors.'
79}
80
81tasks.named('check') {
82 dependsOn(eslint, stylelint)
83}
84
85tasks.register('webpackServe', RunYarn) {
86 dependsOn installFrontend
87 dependsOn generateLezerGrammar
88 outputs.dir "${webpackOutputDir}/development"
89 script = 'run serve'
90 group = 'run'
91 description = 'Start a Webpack dev server with hot module replacement.'
92}
93
94sonarqube.properties {
95 properties['sonar.sources'] += ['src']
96 property 'sonar.nodejs.executable', "${frontend.nodeInstallDirectory.get()}/bin/node"
97 property 'sonar.eslint.reportPaths', "${buildDir}/eslint.json"
98 property 'sonar.css.stylelint.reportPaths', "${buildDir}/stylelint.json"
99 // SonarJS does not pick up typescript files with `exactOptionalPropertyTypes`
100 property 'sonar.typescript.tsconfigPath', 'tsconfig.sonar.json'
101}
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
new file mode 100644
index 00000000..14795885
--- /dev/null
+++ b/subprojects/frontend/package.json
@@ -0,0 +1,102 @@
1{
2 "name": "@refinery/frontend",
3 "version": "0.0.0",
4 "description": "Web frontend for Refinery",
5 "main": "index.js",
6 "scripts": {
7 "assemble:lezer": "lezer-generator src/language/problem.grammar -o build/generated/sources/lezer/problem.ts",
8 "assemble:webpack": "webpack --node-env production",
9 "serve": "webpack serve --node-env development --hot",
10 "check": "yarn run check:eslint && yarn run check:stylelint",
11 "check:eslint": "eslint .",
12 "check:eslint:ci": "eslint -f json -o build/eslint.json .",
13 "check:stylelint": "stylelint src/**/*.scss",
14 "check:stylelint:ci": "stylelint -f json src/**/*.scss > build/stylelint.json"
15 },
16 "repository": {
17 "type": "git",
18 "url": "git+https://github.com/graphs4value/refinery.git"
19 },
20 "author": "Refinery authors",
21 "license": "EPL-2.0",
22 "bugs": {
23 "url": "https://github.com/graphs4value/issues"
24 },
25 "homepage": "https://refinery.tools",
26 "devDependencies": {
27 "@babel/core": "^7.16.0",
28 "@babel/plugin-transform-runtime": "^7.16.4",
29 "@babel/preset-env": "^7.16.4",
30 "@babel/preset-react": "^7.16.0",
31 "@babel/preset-typescript": "^7.16.0",
32 "@lezer/generator": "^0.15.2",
33 "@principalstudio/html-webpack-inject-preload": "^1.2.7",
34 "@types/react": "^17.0.37",
35 "@types/react-dom": "^17.0.11",
36 "@typescript-eslint/eslint-plugin": "^5.6.0",
37 "@typescript-eslint/parser": "^5.6.0",
38 "babel-loader": "^8.2.3",
39 "css-loader": "^6.5.1",
40 "eslint": "^8.4.1",
41 "eslint-config-airbnb": "^19.0.2",
42 "eslint-config-airbnb-typescript": "^16.1.0",
43 "eslint-import-resolver-node": "^0.3.6",
44 "eslint-plugin-import": "^2.25.3",
45 "eslint-plugin-jsx-a11y": "^6.5.1",
46 "eslint-plugin-react": "^7.27.1",
47 "eslint-plugin-react-hooks": "^4.3.0",
48 "html-webpack-plugin": "^5.5.0",
49 "image-webpack-loader": "^8.0.1",
50 "mini-css-extract-plugin": "^2.4.5",
51 "postcss": "^8.4.5",
52 "postcss-scss": "^4.0.2",
53 "sass": "^1.45.0",
54 "sass-loader": "^12.4.0",
55 "style-loader": "^3.3.1",
56 "stylelint": "^14.1.0",
57 "stylelint-config-recommended-scss": "^5.0.2",
58 "stylelint-scss": "^4.0.1",
59 "typescript": "~4.5.3",
60 "webpack": "^5.65.0",
61 "webpack-cli": "^4.9.1",
62 "webpack-dev-server": "^4.6.0",
63 "webpack-subresource-integrity": "^5.0.0"
64 },
65 "dependencies": {
66 "@babel/runtime": "^7.16.3",
67 "@codemirror/autocomplete": "^0.19.9",
68 "@codemirror/closebrackets": "^0.19.0",
69 "@codemirror/commands": "^0.19.6",
70 "@codemirror/comment": "^0.19.0",
71 "@codemirror/fold": "^0.19.2",
72 "@codemirror/gutter": "^0.19.9",
73 "@codemirror/highlight": "^0.19.6",
74 "@codemirror/history": "^0.19.0",
75 "@codemirror/language": "^0.19.7",
76 "@codemirror/lint": "^0.19.3",
77 "@codemirror/matchbrackets": "^0.19.3",
78 "@codemirror/rangeset": "^0.19.2",
79 "@codemirror/rectangular-selection": "^0.19.1",
80 "@codemirror/search": "^0.19.4",
81 "@codemirror/state": "^0.19.6",
82 "@codemirror/view": "^0.19.29",
83 "@emotion/react": "^11.7.1",
84 "@emotion/styled": "^11.6.0",
85 "@fontsource/jetbrains-mono": "^4.5.0",
86 "@fontsource/roboto": "^4.5.1",
87 "@lezer/common": "^0.15.10",
88 "@lezer/lr": "^0.15.5",
89 "@mui/icons-material": "5.2.1",
90 "@mui/material": "5.2.3",
91 "ansi-styles": "^6.1.0",
92 "escape-string-regexp": "^5.0.0",
93 "loglevel": "^1.8.0",
94 "loglevel-plugin-prefix": "^0.8.4",
95 "mobx": "^6.3.8",
96 "mobx-react-lite": "^3.2.2",
97 "nanoid": "^3.1.30",
98 "react": "^17.0.2",
99 "react-dom": "^17.0.2",
100 "zod": "^3.11.6"
101 }
102}
diff --git a/subprojects/frontend/src/App.tsx b/subprojects/frontend/src/App.tsx
new file mode 100644
index 00000000..54f92f9a
--- /dev/null
+++ b/subprojects/frontend/src/App.tsx
@@ -0,0 +1,60 @@
1import AppBar from '@mui/material/AppBar';
2import Box from '@mui/material/Box';
3import IconButton from '@mui/material/IconButton';
4import Toolbar from '@mui/material/Toolbar';
5import Typography from '@mui/material/Typography';
6import MenuIcon from '@mui/icons-material/Menu';
7import React from 'react';
8
9import { EditorArea } from './editor/EditorArea';
10import { EditorButtons } from './editor/EditorButtons';
11import { GenerateButton } from './editor/GenerateButton';
12
13export function App(): JSX.Element {
14 return (
15 <Box
16 display="flex"
17 flexDirection="column"
18 sx={{ height: '100vh' }}
19 >
20 <AppBar
21 position="static"
22 color="inherit"
23 >
24 <Toolbar>
25 <IconButton
26 edge="start"
27 sx={{ mr: 2 }}
28 color="inherit"
29 aria-label="menu"
30 >
31 <MenuIcon />
32 </IconButton>
33 <Typography
34 variant="h6"
35 component="h1"
36 flexGrow={1}
37 >
38 Refinery
39 </Typography>
40 </Toolbar>
41 </AppBar>
42 <Box
43 display="flex"
44 justifyContent="space-between"
45 alignItems="center"
46 p={1}
47 >
48 <EditorButtons />
49 <GenerateButton />
50 </Box>
51 <Box
52 flexGrow={1}
53 flexShrink={1}
54 sx={{ overflow: 'auto' }}
55 >
56 <EditorArea />
57 </Box>
58 </Box>
59 );
60}
diff --git a/subprojects/frontend/src/RootStore.tsx b/subprojects/frontend/src/RootStore.tsx
new file mode 100644
index 00000000..baf0b61e
--- /dev/null
+++ b/subprojects/frontend/src/RootStore.tsx
@@ -0,0 +1,39 @@
1import React, { createContext, useContext } from 'react';
2
3import { EditorStore } from './editor/EditorStore';
4import { ThemeStore } from './theme/ThemeStore';
5
6export class RootStore {
7 editorStore;
8
9 themeStore;
10
11 constructor(initialValue: string) {
12 this.themeStore = new ThemeStore();
13 this.editorStore = new EditorStore(initialValue, this.themeStore);
14 }
15}
16
17const StoreContext = createContext<RootStore | undefined>(undefined);
18
19export interface RootStoreProviderProps {
20 children: JSX.Element;
21
22 rootStore: RootStore;
23}
24
25export function RootStoreProvider({ children, rootStore }: RootStoreProviderProps): JSX.Element {
26 return (
27 <StoreContext.Provider value={rootStore}>
28 {children}
29 </StoreContext.Provider>
30 );
31}
32
33export const useRootStore = (): RootStore => {
34 const rootStore = useContext(StoreContext);
35 if (!rootStore) {
36 throw new Error('useRootStore must be used within RootStoreProvider');
37 }
38 return rootStore;
39};
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
new file mode 100644
index 00000000..dba20f6e
--- /dev/null
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -0,0 +1,152 @@
1import { Command, EditorView } from '@codemirror/view';
2import { closeSearchPanel, openSearchPanel } from '@codemirror/search';
3import { closeLintPanel, openLintPanel } from '@codemirror/lint';
4import { observer } from 'mobx-react-lite';
5import React, {
6 useCallback,
7 useEffect,
8 useRef,
9 useState,
10} from 'react';
11
12import { EditorParent } from './EditorParent';
13import { useRootStore } from '../RootStore';
14import { getLogger } from '../utils/logger';
15
16const log = getLogger('editor.EditorArea');
17
18function usePanel(
19 panelId: string,
20 stateToSet: boolean,
21 editorView: EditorView | null,
22 openCommand: Command,
23 closeCommand: Command,
24 closeCallback: () => void,
25) {
26 const [cachedViewState, setCachedViewState] = useState<boolean>(false);
27 useEffect(() => {
28 if (editorView === null || cachedViewState === stateToSet) {
29 return;
30 }
31 if (stateToSet) {
32 openCommand(editorView);
33 const buttonQuery = `.cm-${panelId}.cm-panel button[name="close"]`;
34 const closeButton = editorView.dom.querySelector(buttonQuery);
35 if (closeButton) {
36 log.debug('Addig close button callback to', panelId, 'panel');
37 // We must remove the event listener added by CodeMirror from the button
38 // that dispatches a transaction without going through `EditorStorre`.
39 // Cloning a DOM node removes event listeners,
40 // see https://stackoverflow.com/a/9251864
41 const closeButtonWithoutListeners = closeButton.cloneNode(true);
42 closeButtonWithoutListeners.addEventListener('click', (event) => {
43 closeCallback();
44 event.preventDefault();
45 });
46 closeButton.replaceWith(closeButtonWithoutListeners);
47 } else {
48 log.error('Opened', panelId, 'panel has no close button');
49 }
50 } else {
51 closeCommand(editorView);
52 }
53 setCachedViewState(stateToSet);
54 }, [
55 stateToSet,
56 editorView,
57 cachedViewState,
58 panelId,
59 openCommand,
60 closeCommand,
61 closeCallback,
62 ]);
63 return setCachedViewState;
64}
65
66function fixCodeMirrorAccessibility(editorView: EditorView) {
67 // Reported by Lighthouse 8.3.0.
68 const { contentDOM } = editorView;
69 contentDOM.removeAttribute('aria-expanded');
70 contentDOM.setAttribute('aria-label', 'Code editor');
71}
72
73export const EditorArea = observer(() => {
74 const { editorStore } = useRootStore();
75 const editorParentRef = useRef<HTMLDivElement | null>(null);
76 const [editorViewState, setEditorViewState] = useState<EditorView | null>(null);
77
78 const setSearchPanelOpen = usePanel(
79 'search',
80 editorStore.showSearchPanel,
81 editorViewState,
82 openSearchPanel,
83 closeSearchPanel,
84 useCallback(() => editorStore.setSearchPanelOpen(false), [editorStore]),
85 );
86
87 const setLintPanelOpen = usePanel(
88 'panel-lint',
89 editorStore.showLintPanel,
90 editorViewState,
91 openLintPanel,
92 closeLintPanel,
93 useCallback(() => editorStore.setLintPanelOpen(false), [editorStore]),
94 );
95
96 useEffect(() => {
97 if (editorParentRef.current === null) {
98 return () => {
99 // Nothing to clean up.
100 };
101 }
102
103 const editorView = new EditorView({
104 state: editorStore.state,
105 parent: editorParentRef.current,
106 dispatch: (transaction) => {
107 editorStore.onTransaction(transaction);
108 editorView.update([transaction]);
109 if (editorView.state !== editorStore.state) {
110 log.error(
111 'Failed to synchronize editor state - store state:',
112 editorStore.state,
113 'view state:',
114 editorView.state,
115 );
116 }
117 },
118 });
119 fixCodeMirrorAccessibility(editorView);
120 setEditorViewState(editorView);
121 setSearchPanelOpen(false);
122 setLintPanelOpen(false);
123 // `dispatch` is bound to the view instance,
124 // so it does not have to be called as a method.
125 // eslint-disable-next-line @typescript-eslint/unbound-method
126 editorStore.updateDispatcher(editorView.dispatch);
127 log.info('Editor created');
128
129 return () => {
130 editorStore.updateDispatcher(null);
131 editorView.destroy();
132 log.info('Editor destroyed');
133 };
134 }, [
135 editorParentRef,
136 editorStore,
137 setSearchPanelOpen,
138 setLintPanelOpen,
139 ]);
140
141 return (
142 <EditorParent
143 className="dark"
144 sx={{
145 '.cm-lineNumbers': editorStore.showLineNumbers ? {} : {
146 display: 'none !important',
147 },
148 }}
149 ref={editorParentRef}
150 />
151 );
152});
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
new file mode 100644
index 00000000..150aa00d
--- /dev/null
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -0,0 +1,98 @@
1import type { Diagnostic } from '@codemirror/lint';
2import { observer } from 'mobx-react-lite';
3import IconButton from '@mui/material/IconButton';
4import Stack from '@mui/material/Stack';
5import ToggleButton from '@mui/material/ToggleButton';
6import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
7import CheckIcon from '@mui/icons-material/Check';
8import ErrorIcon from '@mui/icons-material/Error';
9import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
10import FormatPaint from '@mui/icons-material/FormatPaint';
11import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
12import RedoIcon from '@mui/icons-material/Redo';
13import SearchIcon from '@mui/icons-material/Search';
14import UndoIcon from '@mui/icons-material/Undo';
15import WarningIcon from '@mui/icons-material/Warning';
16import React from 'react';
17
18import { useRootStore } from '../RootStore';
19
20// Exhastive switch as proven by TypeScript.
21// eslint-disable-next-line consistent-return
22function getLintIcon(severity: Diagnostic['severity'] | null) {
23 switch (severity) {
24 case 'error':
25 return <ErrorIcon fontSize="small" />;
26 case 'warning':
27 return <WarningIcon fontSize="small" />;
28 case 'info':
29 return <InfoOutlinedIcon fontSize="small" />;
30 case null:
31 return <CheckIcon fontSize="small" />;
32 }
33}
34
35export const EditorButtons = observer(() => {
36 const { editorStore } = useRootStore();
37
38 return (
39 <Stack
40 direction="row"
41 spacing={1}
42 >
43 <Stack
44 direction="row"
45 alignItems="center"
46 >
47 <IconButton
48 disabled={!editorStore.canUndo}
49 onClick={() => editorStore.undo()}
50 aria-label="Undo"
51 >
52 <UndoIcon fontSize="small" />
53 </IconButton>
54 <IconButton
55 disabled={!editorStore.canRedo}
56 onClick={() => editorStore.redo()}
57 aria-label="Redo"
58 >
59 <RedoIcon fontSize="small" />
60 </IconButton>
61 </Stack>
62 <ToggleButtonGroup
63 size="small"
64 >
65 <ToggleButton
66 selected={editorStore.showLineNumbers}
67 onClick={() => editorStore.toggleLineNumbers()}
68 aria-label="Show line numbers"
69 value="show-line-numbers"
70 >
71 <FormatListNumberedIcon fontSize="small" />
72 </ToggleButton>
73 <ToggleButton
74 selected={editorStore.showSearchPanel}
75 onClick={() => editorStore.toggleSearchPanel()}
76 aria-label="Show find/replace"
77 value="show-search-panel"
78 >
79 <SearchIcon fontSize="small" />
80 </ToggleButton>
81 <ToggleButton
82 selected={editorStore.showLintPanel}
83 onClick={() => editorStore.toggleLintPanel()}
84 aria-label="Show diagnostics panel"
85 value="show-lint-panel"
86 >
87 {getLintIcon(editorStore.highestDiagnosticLevel)}
88 </ToggleButton>
89 </ToggleButtonGroup>
90 <IconButton
91 onClick={() => editorStore.formatText()}
92 aria-label="Automatic format"
93 >
94 <FormatPaint fontSize="small" />
95 </IconButton>
96 </Stack>
97 );
98});
diff --git a/subprojects/frontend/src/editor/EditorParent.ts b/subprojects/frontend/src/editor/EditorParent.ts
new file mode 100644
index 00000000..94ca24ea
--- /dev/null
+++ b/subprojects/frontend/src/editor/EditorParent.ts
@@ -0,0 +1,205 @@
1import { styled } from '@mui/material/styles';
2
3/**
4 * Returns a squiggly underline background image encoded as a CSS `url()` data URI with Base64.
5 *
6 * Based on
7 * https://github.com/codemirror/lint/blob/f524b4a53b0183bb343ac1e32b228d28030d17af/src/lint.ts#L501
8 *
9 * @param color the color of the underline
10 * @returns the CSS `url()`
11 */
12function underline(color: string) {
13 const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">
14 <path d="m0 3 l2 -2 l1 0 l2 2 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>
15 </svg>`;
16 const svgBase64 = window.btoa(svg);
17 return `url('data:image/svg+xml;base64,${svgBase64}')`;
18}
19
20export const EditorParent = styled('div')(({ theme }) => {
21 const codeMirrorLintStyle: Record<string, unknown> = {};
22 (['error', 'warning', 'info'] as const).forEach((severity) => {
23 const color = theme.palette[severity].main;
24 codeMirrorLintStyle[`.cm-diagnostic-${severity}`] = {
25 borderLeftColor: color,
26 };
27 codeMirrorLintStyle[`.cm-lintRange-${severity}`] = {
28 backgroundImage: underline(color),
29 };
30 });
31
32 return {
33 background: theme.palette.background.default,
34 '&, .cm-editor': {
35 height: '100%',
36 },
37 '.cm-content': {
38 padding: 0,
39 },
40 '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': {
41 fontSize: 16,
42 fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
43 fontFeatureSettings: '"liga", "calt"',
44 fontWeight: 400,
45 letterSpacing: 0,
46 textRendering: 'optimizeLegibility',
47 },
48 '.cm-scroller': {
49 color: theme.palette.text.secondary,
50 },
51 '.cm-gutters': {
52 background: 'rgba(255, 255, 255, 0.1)',
53 color: theme.palette.text.disabled,
54 border: 'none',
55 },
56 '.cm-specialChar': {
57 color: theme.palette.secondary.main,
58 },
59 '.cm-activeLine': {
60 background: 'rgba(0, 0, 0, 0.3)',
61 },
62 '.cm-activeLineGutter': {
63 background: 'transparent',
64 },
65 '.cm-lineNumbers .cm-activeLineGutter': {
66 color: theme.palette.text.primary,
67 },
68 '.cm-cursor, .cm-cursor-primary': {
69 borderColor: theme.palette.primary.main,
70 background: theme.palette.common.black,
71 },
72 '.cm-selectionBackground': {
73 background: '#3e4453',
74 },
75 '.cm-focused': {
76 outline: 'none',
77 '.cm-selectionBackground': {
78 background: '#3e4453',
79 },
80 },
81 '.cm-panels-top': {
82 color: theme.palette.text.secondary,
83 },
84 '.cm-panel': {
85 '&, & button, & input': {
86 fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
87 },
88 background: theme.palette.background.paper,
89 borderTop: `1px solid ${theme.palette.divider}`,
90 'button[name="close"]': {
91 background: 'transparent',
92 color: theme.palette.text.secondary,
93 cursor: 'pointer',
94 },
95 },
96 '.cm-panel.cm-panel-lint': {
97 'button[name="close"]': {
98 // Close button interferes with scrollbar, so we better hide it.
99 // The panel can still be closed from the toolbar.
100 display: 'none',
101 },
102 ul: {
103 li: {
104 borderBottom: `1px solid ${theme.palette.divider}`,
105 cursor: 'pointer',
106 },
107 '[aria-selected]': {
108 background: '#3e4453',
109 color: theme.palette.text.primary,
110 },
111 '&:focus [aria-selected]': {
112 background: theme.palette.primary.main,
113 color: theme.palette.primary.contrastText,
114 },
115 },
116 },
117 '.cm-foldPlaceholder': {
118 background: theme.palette.background.paper,
119 borderColor: theme.palette.text.disabled,
120 color: theme.palette.text.secondary,
121 },
122 '.cmt-comment': {
123 fontStyle: 'italic',
124 color: theme.palette.text.disabled,
125 },
126 '.cmt-number': {
127 color: '#6188a6',
128 },
129 '.cmt-string': {
130 color: theme.palette.secondary.dark,
131 },
132 '.cmt-keyword': {
133 color: theme.palette.primary.main,
134 },
135 '.cmt-typeName, .cmt-macroName, .cmt-atom': {
136 color: theme.palette.text.primary,
137 },
138 '.cmt-variableName': {
139 color: '#c8ae9d',
140 },
141 '.cmt-problem-node': {
142 '&, & .cmt-variableName': {
143 color: theme.palette.text.secondary,
144 },
145 },
146 '.cmt-problem-individual': {
147 '&, & .cmt-variableName': {
148 color: theme.palette.text.primary,
149 },
150 },
151 '.cmt-problem-abstract, .cmt-problem-new': {
152 fontStyle: 'italic',
153 },
154 '.cmt-problem-containment': {
155 fontWeight: 700,
156 },
157 '.cmt-problem-error': {
158 '&, & .cmt-typeName': {
159 color: theme.palette.error.main,
160 },
161 },
162 '.cmt-problem-builtin': {
163 '&, & .cmt-typeName, & .cmt-atom, & .cmt-variableName': {
164 color: theme.palette.primary.main,
165 fontWeight: 400,
166 fontStyle: 'normal',
167 },
168 },
169 '.cm-tooltip-autocomplete': {
170 background: theme.palette.background.paper,
171 boxShadow: `0px 2px 4px -1px rgb(0 0 0 / 20%),
172 0px 4px 5px 0px rgb(0 0 0 / 14%),
173 0px 1px 10px 0px rgb(0 0 0 / 12%)`,
174 '.cm-completionIcon': {
175 color: theme.palette.text.secondary,
176 },
177 '.cm-completionLabel': {
178 color: theme.palette.text.primary,
179 },
180 '.cm-completionDetail': {
181 color: theme.palette.text.secondary,
182 fontStyle: 'normal',
183 },
184 '[aria-selected]': {
185 background: `${theme.palette.primary.main} !important`,
186 '.cm-completionIcon, .cm-completionLabel, .cm-completionDetail': {
187 color: theme.palette.primary.contrastText,
188 },
189 },
190 },
191 '.cm-completionIcon': {
192 width: 16,
193 padding: 0,
194 marginRight: '0.5em',
195 textAlign: 'center',
196 },
197 ...codeMirrorLintStyle,
198 '.cm-problem-write': {
199 background: 'rgba(255, 255, 128, 0.3)',
200 },
201 '.cm-problem-read': {
202 background: 'rgba(255, 255, 255, 0.15)',
203 },
204 };
205});
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
new file mode 100644
index 00000000..5760de28
--- /dev/null
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -0,0 +1,289 @@
1import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
2import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
3import { defaultKeymap, indentWithTab } from '@codemirror/commands';
4import { commentKeymap } from '@codemirror/comment';
5import { foldGutter, foldKeymap } from '@codemirror/fold';
6import { highlightActiveLineGutter, lineNumbers } from '@codemirror/gutter';
7import { classHighlightStyle } from '@codemirror/highlight';
8import {
9 history,
10 historyKeymap,
11 redo,
12 redoDepth,
13 undo,
14 undoDepth,
15} from '@codemirror/history';
16import { indentOnInput } from '@codemirror/language';
17import {
18 Diagnostic,
19 lintKeymap,
20 setDiagnostics,
21} from '@codemirror/lint';
22import { bracketMatching } from '@codemirror/matchbrackets';
23import { rectangularSelection } from '@codemirror/rectangular-selection';
24import { searchConfig, searchKeymap } from '@codemirror/search';
25import {
26 EditorState,
27 StateCommand,
28 StateEffect,
29 Transaction,
30 TransactionSpec,
31} from '@codemirror/state';
32import {
33 drawSelection,
34 EditorView,
35 highlightActiveLine,
36 highlightSpecialChars,
37 keymap,
38} from '@codemirror/view';
39import {
40 makeAutoObservable,
41 observable,
42 reaction,
43} from 'mobx';
44
45import { findOccurrences, IOccurrence, setOccurrences } from './findOccurrences';
46import { problemLanguageSupport } from '../language/problemLanguageSupport';
47import {
48 IHighlightRange,
49 semanticHighlighting,
50 setSemanticHighlighting,
51} from './semanticHighlighting';
52import type { ThemeStore } from '../theme/ThemeStore';
53import { getLogger } from '../utils/logger';
54import { XtextClient } from '../xtext/XtextClient';
55
56const log = getLogger('editor.EditorStore');
57
58export class EditorStore {
59 private readonly themeStore;
60
61 state: EditorState;
62
63 private readonly client: XtextClient;
64
65 showLineNumbers = false;
66
67 showSearchPanel = false;
68
69 showLintPanel = false;
70
71 errorCount = 0;
72
73 warningCount = 0;
74
75 infoCount = 0;
76
77 private readonly defaultDispatcher = (tr: Transaction): void => {
78 this.onTransaction(tr);
79 };
80
81 private dispatcher = this.defaultDispatcher;
82
83 constructor(initialValue: string, themeStore: ThemeStore) {
84 this.themeStore = themeStore;
85 this.state = EditorState.create({
86 doc: initialValue,
87 extensions: [
88 autocompletion({
89 activateOnTyping: true,
90 override: [
91 (context) => this.client.contentAssist(context),
92 ],
93 }),
94 classHighlightStyle.extension,
95 closeBrackets(),
96 bracketMatching(),
97 drawSelection(),
98 EditorState.allowMultipleSelections.of(true),
99 EditorView.theme({}, {
100 dark: this.themeStore.darkMode,
101 }),
102 findOccurrences,
103 highlightActiveLine(),
104 highlightActiveLineGutter(),
105 highlightSpecialChars(),
106 history(),
107 indentOnInput(),
108 rectangularSelection(),
109 searchConfig({
110 top: true,
111 matchCase: true,
112 }),
113 semanticHighlighting,
114 // We add the gutters to `extensions` in the order we want them to appear.
115 lineNumbers(),
116 foldGutter(),
117 keymap.of([
118 { key: 'Mod-Shift-f', run: () => this.formatText() },
119 ...closeBracketsKeymap,
120 ...commentKeymap,
121 ...completionKeymap,
122 ...foldKeymap,
123 ...historyKeymap,
124 indentWithTab,
125 // Override keys in `lintKeymap` to go through the `EditorStore`.
126 { key: 'Mod-Shift-m', run: () => this.setLintPanelOpen(true) },
127 ...lintKeymap,
128 // Override keys in `searchKeymap` to go through the `EditorStore`.
129 { key: 'Mod-f', run: () => this.setSearchPanelOpen(true), scope: 'editor search-panel' },
130 { key: 'Escape', run: () => this.setSearchPanelOpen(false), scope: 'editor search-panel' },
131 ...searchKeymap,
132 ...defaultKeymap,
133 ]),
134 problemLanguageSupport(),
135 ],
136 });
137 this.client = new XtextClient(this);
138 reaction(
139 () => this.themeStore.darkMode,
140 (darkMode) => {
141 log.debug('Update editor dark mode', darkMode);
142 this.dispatch({
143 effects: [
144 StateEffect.appendConfig.of(EditorView.theme({}, {
145 dark: darkMode,
146 })),
147 ],
148 });
149 },
150 );
151 makeAutoObservable(this, {
152 state: observable.ref,
153 });
154 }
155
156 updateDispatcher(newDispatcher: ((tr: Transaction) => void) | null): void {
157 this.dispatcher = newDispatcher || this.defaultDispatcher;
158 }
159
160 onTransaction(tr: Transaction): void {
161 log.trace('Editor transaction', tr);
162 this.state = tr.state;
163 this.client.onTransaction(tr);
164 }
165
166 dispatch(...specs: readonly TransactionSpec[]): void {
167 this.dispatcher(this.state.update(...specs));
168 }
169
170 doStateCommand(command: StateCommand): boolean {
171 return command({
172 state: this.state,
173 dispatch: this.dispatcher,
174 });
175 }
176
177 updateDiagnostics(diagnostics: Diagnostic[]): void {
178 this.dispatch(setDiagnostics(this.state, diagnostics));
179 this.errorCount = 0;
180 this.warningCount = 0;
181 this.infoCount = 0;
182 diagnostics.forEach(({ severity }) => {
183 switch (severity) {
184 case 'error':
185 this.errorCount += 1;
186 break;
187 case 'warning':
188 this.warningCount += 1;
189 break;
190 case 'info':
191 this.infoCount += 1;
192 break;
193 }
194 });
195 }
196
197 get highestDiagnosticLevel(): Diagnostic['severity'] | null {
198 if (this.errorCount > 0) {
199 return 'error';
200 }
201 if (this.warningCount > 0) {
202 return 'warning';
203 }
204 if (this.infoCount > 0) {
205 return 'info';
206 }
207 return null;
208 }
209
210 updateSemanticHighlighting(ranges: IHighlightRange[]): void {
211 this.dispatch(setSemanticHighlighting(ranges));
212 }
213
214 updateOccurrences(write: IOccurrence[], read: IOccurrence[]): void {
215 this.dispatch(setOccurrences(write, read));
216 }
217
218 /**
219 * @returns `true` if there is history to undo
220 */
221 get canUndo(): boolean {
222 return undoDepth(this.state) > 0;
223 }
224
225 // eslint-disable-next-line class-methods-use-this
226 undo(): void {
227 log.debug('Undo', this.doStateCommand(undo));
228 }
229
230 /**
231 * @returns `true` if there is history to redo
232 */
233 get canRedo(): boolean {
234 return redoDepth(this.state) > 0;
235 }
236
237 // eslint-disable-next-line class-methods-use-this
238 redo(): void {
239 log.debug('Redo', this.doStateCommand(redo));
240 }
241
242 toggleLineNumbers(): void {
243 this.showLineNumbers = !this.showLineNumbers;
244 log.debug('Show line numbers', this.showLineNumbers);
245 }
246
247 /**
248 * Sets whether the CodeMirror search panel should be open.
249 *
250 * This method can be used as a CodeMirror command,
251 * because it returns `false` if it didn't execute,
252 * allowing other commands for the same keybind to run instead.
253 * This matches the behavior of the `openSearchPanel` and `closeSearchPanel`
254 * commands from `'@codemirror/search'`.
255 *
256 * @param newShosSearchPanel whether we should show the search panel
257 * @returns `true` if the state was changed, `false` otherwise
258 */
259 setSearchPanelOpen(newShowSearchPanel: boolean): boolean {
260 if (this.showSearchPanel === newShowSearchPanel) {
261 return false;
262 }
263 this.showSearchPanel = newShowSearchPanel;
264 log.debug('Show search panel', this.showSearchPanel);
265 return true;
266 }
267
268 toggleSearchPanel(): void {
269 this.setSearchPanelOpen(!this.showSearchPanel);
270 }
271
272 setLintPanelOpen(newShowLintPanel: boolean): boolean {
273 if (this.showLintPanel === newShowLintPanel) {
274 return false;
275 }
276 this.showLintPanel = newShowLintPanel;
277 log.debug('Show lint panel', this.showLintPanel);
278 return true;
279 }
280
281 toggleLintPanel(): void {
282 this.setLintPanelOpen(!this.showLintPanel);
283 }
284
285 formatText(): boolean {
286 this.client.formatText();
287 return true;
288 }
289}
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
new file mode 100644
index 00000000..3834cec4
--- /dev/null
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -0,0 +1,44 @@
1import { observer } from 'mobx-react-lite';
2import Button from '@mui/material/Button';
3import PlayArrowIcon from '@mui/icons-material/PlayArrow';
4import React from 'react';
5
6import { useRootStore } from '../RootStore';
7
8const GENERATE_LABEL = 'Generate';
9
10export const GenerateButton = observer(() => {
11 const { editorStore } = useRootStore();
12 const { errorCount, warningCount } = editorStore;
13
14 const diagnostics: string[] = [];
15 if (errorCount > 0) {
16 diagnostics.push(`${errorCount} error${errorCount === 1 ? '' : 's'}`);
17 }
18 if (warningCount > 0) {
19 diagnostics.push(`${warningCount} warning${warningCount === 1 ? '' : 's'}`);
20 }
21 const summary = diagnostics.join(' and ');
22
23 if (errorCount > 0) {
24 return (
25 <Button
26 variant="outlined"
27 color="error"
28 onClick={() => editorStore.toggleLintPanel()}
29 >
30 {summary}
31 </Button>
32 );
33 }
34
35 return (
36 <Button
37 variant="outlined"
38 color={warningCount > 0 ? 'warning' : 'primary'}
39 startIcon={<PlayArrowIcon />}
40 >
41 {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`}
42 </Button>
43 );
44});
diff --git a/subprojects/frontend/src/editor/decorationSetExtension.ts b/subprojects/frontend/src/editor/decorationSetExtension.ts
new file mode 100644
index 00000000..2d630c20
--- /dev/null
+++ b/subprojects/frontend/src/editor/decorationSetExtension.ts
@@ -0,0 +1,39 @@
1import { StateEffect, StateField, TransactionSpec } from '@codemirror/state';
2import { EditorView, Decoration, DecorationSet } from '@codemirror/view';
3
4export type TransactionSpecFactory = (decorations: DecorationSet) => TransactionSpec;
5
6export function decorationSetExtension(): [TransactionSpecFactory, StateField<DecorationSet>] {
7 const setEffect = StateEffect.define<DecorationSet>();
8 const field = StateField.define<DecorationSet>({
9 create() {
10 return Decoration.none;
11 },
12 update(currentDecorations, transaction) {
13 let newDecorations: DecorationSet | null = null;
14 transaction.effects.forEach((effect) => {
15 if (effect.is(setEffect)) {
16 newDecorations = effect.value;
17 }
18 });
19 if (newDecorations === null) {
20 if (transaction.docChanged) {
21 return currentDecorations.map(transaction.changes);
22 }
23 return currentDecorations;
24 }
25 return newDecorations;
26 },
27 provide: (f) => EditorView.decorations.from(f),
28 });
29
30 function transactionSpecFactory(decorations: DecorationSet) {
31 return {
32 effects: [
33 setEffect.of(decorations),
34 ],
35 };
36 }
37
38 return [transactionSpecFactory, field];
39}
diff --git a/subprojects/frontend/src/editor/findOccurrences.ts b/subprojects/frontend/src/editor/findOccurrences.ts
new file mode 100644
index 00000000..92102746
--- /dev/null
+++ b/subprojects/frontend/src/editor/findOccurrences.ts
@@ -0,0 +1,35 @@
1import { Range, RangeSet } from '@codemirror/rangeset';
2import type { TransactionSpec } from '@codemirror/state';
3import { Decoration } from '@codemirror/view';
4
5import { decorationSetExtension } from './decorationSetExtension';
6
7export interface IOccurrence {
8 from: number;
9
10 to: number;
11}
12
13const [setOccurrencesInteral, findOccurrences] = decorationSetExtension();
14
15const writeDecoration = Decoration.mark({
16 class: 'cm-problem-write',
17});
18
19const readDecoration = Decoration.mark({
20 class: 'cm-problem-read',
21});
22
23export function setOccurrences(write: IOccurrence[], read: IOccurrence[]): TransactionSpec {
24 const decorations: Range<Decoration>[] = [];
25 write.forEach(({ from, to }) => {
26 decorations.push(writeDecoration.range(from, to));
27 });
28 read.forEach(({ from, to }) => {
29 decorations.push(readDecoration.range(from, to));
30 });
31 const rangeSet = RangeSet.of(decorations, true);
32 return setOccurrencesInteral(rangeSet);
33}
34
35export { findOccurrences };
diff --git a/subprojects/frontend/src/editor/semanticHighlighting.ts b/subprojects/frontend/src/editor/semanticHighlighting.ts
new file mode 100644
index 00000000..2aed421b
--- /dev/null
+++ b/subprojects/frontend/src/editor/semanticHighlighting.ts
@@ -0,0 +1,24 @@
1import { RangeSet } from '@codemirror/rangeset';
2import type { TransactionSpec } from '@codemirror/state';
3import { Decoration } from '@codemirror/view';
4
5import { decorationSetExtension } from './decorationSetExtension';
6
7export interface IHighlightRange {
8 from: number;
9
10 to: number;
11
12 classes: string[];
13}
14
15const [setSemanticHighlightingInternal, semanticHighlighting] = decorationSetExtension();
16
17export function setSemanticHighlighting(ranges: IHighlightRange[]): TransactionSpec {
18 const rangeSet = RangeSet.of(ranges.map(({ from, to, classes }) => Decoration.mark({
19 class: classes.map((c) => `cmt-problem-${c}`).join(' '),
20 }).range(from, to)), true);
21 return setSemanticHighlightingInternal(rangeSet);
22}
23
24export { semanticHighlighting };
diff --git a/subprojects/frontend/src/global.d.ts b/subprojects/frontend/src/global.d.ts
new file mode 100644
index 00000000..0533a46e
--- /dev/null
+++ b/subprojects/frontend/src/global.d.ts
@@ -0,0 +1,11 @@
1declare const DEBUG: boolean;
2
3declare const PACKAGE_NAME: string;
4
5declare const PACKAGE_VERSION: string;
6
7declare module '*.module.scss' {
8 const cssVariables: { [key in string]?: string };
9 // eslint-disable-next-line import/no-default-export
10 export default cssVariables;
11}
diff --git a/subprojects/frontend/src/index.html b/subprojects/frontend/src/index.html
new file mode 100644
index 00000000..f404aa8a
--- /dev/null
+++ b/subprojects/frontend/src/index.html
@@ -0,0 +1,16 @@
1<!DOCTYPE html>
2<html lang="en-US">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Refinery</title>
7 </head>
8 <body>
9 <noscript>
10 <p>
11 This application requires JavaScript to run.
12 </p>
13 </noscript>
14 <div id="app"></div>
15 </body>
16</html>
diff --git a/subprojects/frontend/src/index.scss b/subprojects/frontend/src/index.scss
new file mode 100644
index 00000000..ad876aaf
--- /dev/null
+++ b/subprojects/frontend/src/index.scss
@@ -0,0 +1,16 @@
1@use '@fontsource/roboto/scss/mixins' as Roboto;
2@use '@fontsource/jetbrains-mono/scss/mixins' as JetbrainsMono;
3
4$fontWeights: 300, 400, 500, 700;
5@each $weight in $fontWeights {
6 @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight);
7 @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight, $style: italic);
8}
9
10$monoFontWeights: 400, 700;
11@each $weight in $monoFontWeights {
12 @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight);
13 @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight, $style: italic);
14}
15@include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable');
16@include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable', $style: italic);
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
new file mode 100644
index 00000000..15b26adb
--- /dev/null
+++ b/subprojects/frontend/src/index.tsx
@@ -0,0 +1,69 @@
1import React from 'react';
2import { render } from 'react-dom';
3import CssBaseline from '@mui/material/CssBaseline';
4
5import { App } from './App';
6import { RootStore, RootStoreProvider } from './RootStore';
7import { ThemeProvider } from './theme/ThemeProvider';
8
9import './index.scss';
10
11const initialValue = `class Family {
12 contains Person[] members
13}
14
15class Person {
16 Person[] children opposite parent
17 Person[0..1] parent opposite children
18 int age
19 TaxStatus taxStatus
20}
21
22enum TaxStatus {
23 child, student, adult, retired
24}
25
26% A child cannot have any dependents.
27pred invalidTaxStatus(Person p) <->
28 taxStatus(p, child),
29 children(p, _q)
30 ; taxStatus(p, retired),
31 parent(p, q),
32 !taxStatus(q, retired).
33
34direct rule createChild(p):
35 children(p, newPerson) = unknown,
36 equals(newPerson, newPerson) = unknown
37 ~> new q,
38 children(p, q) = true,
39 taxStatus(q, child) = true.
40
41indiv family.
42Family(family).
43members(family, anne).
44members(family, bob).
45members(family, ciri).
46children(anne, ciri).
47?children(bob, ciri).
48default children(ciri, *): false.
49taxStatus(anne, adult).
50age(anne, 35).
51bobAge: 27.
52age(bob, bobAge).
53!age(ciri, bobAge).
54
55scope Family = 1, Person += 5..10.
56`;
57
58const rootStore = new RootStore(initialValue);
59
60const app = (
61 <RootStoreProvider rootStore={rootStore}>
62 <ThemeProvider>
63 <CssBaseline />
64 <App />
65 </ThemeProvider>
66 </RootStoreProvider>
67);
68
69render(app, document.getElementById('app'));
diff --git a/subprojects/frontend/src/language/folding.ts b/subprojects/frontend/src/language/folding.ts
new file mode 100644
index 00000000..5d51f796
--- /dev/null
+++ b/subprojects/frontend/src/language/folding.ts
@@ -0,0 +1,115 @@
1import { EditorState } from '@codemirror/state';
2import type { SyntaxNode } from '@lezer/common';
3
4export type FoldRange = { from: number, to: number };
5
6/**
7 * Folds a block comment between its delimiters.
8 *
9 * @param node the node to fold
10 * @returns the folding range or `null` is there is nothing to fold
11 */
12export function foldBlockComment(node: SyntaxNode): FoldRange {
13 return {
14 from: node.from + 2,
15 to: node.to - 2,
16 };
17}
18
19/**
20 * Folds a declaration after the first element if it appears on the opening line,
21 * otherwise folds after the opening keyword.
22 *
23 * @example
24 * First element on the opening line:
25 * ```
26 * scope Family = 1,
27 * Person += 5..10.
28 * ```
29 * becomes
30 * ```
31 * scope Family = 1,[...].
32 * ```
33 *
34 * @example
35 * First element not on the opening line:
36 * ```
37 * scope Family
38 * = 1,
39 * Person += 5..10.
40 * ```
41 * becomes
42 * ```
43 * scope [...].
44 * ```
45 *
46 * @param node the node to fold
47 * @param state the editor state
48 * @returns the folding range or `null` is there is nothing to fold
49 */
50export function foldDeclaration(node: SyntaxNode, state: EditorState): FoldRange | null {
51 const { firstChild: open, lastChild: close } = node;
52 if (open === null || close === null) {
53 return null;
54 }
55 const { cursor } = open;
56 const lineEnd = state.doc.lineAt(open.from).to;
57 let foldFrom = open.to;
58 while (cursor.next() && cursor.from < lineEnd) {
59 if (cursor.type.name === ',') {
60 foldFrom = cursor.to;
61 break;
62 }
63 }
64 return {
65 from: foldFrom,
66 to: close.from,
67 };
68}
69
70/**
71 * Folds a node only if it has at least one sibling of the same type.
72 *
73 * The folding range will be the entire `node`.
74 *
75 * @param node the node to fold
76 * @returns the folding range or `null` is there is nothing to fold
77 */
78function foldWithSibling(node: SyntaxNode): FoldRange | null {
79 const { parent } = node;
80 if (parent === null) {
81 return null;
82 }
83 const { firstChild } = parent;
84 if (firstChild === null) {
85 return null;
86 }
87 const { cursor } = firstChild;
88 let nSiblings = 0;
89 while (cursor.nextSibling()) {
90 if (cursor.type === node.type) {
91 nSiblings += 1;
92 }
93 if (nSiblings >= 2) {
94 return {
95 from: node.from,
96 to: node.to,
97 };
98 }
99 }
100 return null;
101}
102
103export function foldWholeNode(node: SyntaxNode): FoldRange {
104 return {
105 from: node.from,
106 to: node.to,
107 };
108}
109
110export function foldConjunction(node: SyntaxNode): FoldRange | null {
111 if (node.parent?.type?.name === 'PredicateBody') {
112 return foldWithSibling(node);
113 }
114 return foldWholeNode(node);
115}
diff --git a/subprojects/frontend/src/language/indentation.ts b/subprojects/frontend/src/language/indentation.ts
new file mode 100644
index 00000000..6d36ed3b
--- /dev/null
+++ b/subprojects/frontend/src/language/indentation.ts
@@ -0,0 +1,87 @@
1import { TreeIndentContext } from '@codemirror/language';
2
3/**
4 * Finds the `from` of first non-skipped token, if any,
5 * after the opening keyword in the first line of the declaration.
6 *
7 * Based on
8 * https://github.com/codemirror/language/blob/cd7f7e66fa51ddbce96cf9396b1b6127d0ca4c94/src/indent.ts#L246
9 *
10 * @param context the indentation context
11 * @returns the alignment or `null` if there is no token after the opening keyword
12 */
13function findAlignmentAfterOpening(context: TreeIndentContext): number | null {
14 const {
15 node: tree,
16 simulatedBreak,
17 } = context;
18 const openingToken = tree.childAfter(tree.from);
19 if (openingToken === null) {
20 return null;
21 }
22 const openingLine = context.state.doc.lineAt(openingToken.from);
23 const lineEnd = simulatedBreak == null || simulatedBreak <= openingLine.from
24 ? openingLine.to
25 : Math.min(openingLine.to, simulatedBreak);
26 const { cursor } = openingToken;
27 while (cursor.next() && cursor.from < lineEnd) {
28 if (!cursor.type.isSkipped) {
29 return cursor.from;
30 }
31 }
32 return null;
33}
34
35/**
36 * Indents text after declarations by a single unit if it begins on a new line,
37 * otherwise it aligns with the text after the declaration.
38 *
39 * Based on
40 * https://github.com/codemirror/language/blob/cd7f7e66fa51ddbce96cf9396b1b6127d0ca4c94/src/indent.ts#L275
41 *
42 * @example
43 * Result with no hanging indent (indent unit = 2 spaces, units = 1):
44 * ```
45 * scope
46 * Family = 1,
47 * Person += 5..10.
48 * ```
49 *
50 * @example
51 * Result with hanging indent:
52 * ```
53 * scope Family = 1,
54 * Person += 5..10.
55 * ```
56 *
57 * @param context the indentation context
58 * @param units the number of units to indent
59 * @returns the desired indentation level
60 */
61function indentDeclarationStrategy(context: TreeIndentContext, units: number): number {
62 const alignment = findAlignmentAfterOpening(context);
63 if (alignment !== null) {
64 return context.column(alignment);
65 }
66 return context.baseIndent + units * context.unit;
67}
68
69export function indentBlockComment(): number {
70 // Do not indent.
71 return -1;
72}
73
74export function indentDeclaration(context: TreeIndentContext): number {
75 return indentDeclarationStrategy(context, 1);
76}
77
78export function indentPredicateOrRule(context: TreeIndentContext): number {
79 const clauseIndent = indentDeclarationStrategy(context, 1);
80 if (/^\s+[;.]/.exec(context.textAfter) !== null) {
81 return clauseIndent - 2;
82 }
83 if (/^\s+(~>)/.exec(context.textAfter) !== null) {
84 return clauseIndent - 3;
85 }
86 return clauseIndent;
87}
diff --git a/subprojects/frontend/src/language/problem.grammar b/subprojects/frontend/src/language/problem.grammar
new file mode 100644
index 00000000..1ace2872
--- /dev/null
+++ b/subprojects/frontend/src/language/problem.grammar
@@ -0,0 +1,149 @@
1@detectDelim
2
3@external prop implicitCompletion from '../../../../src/language/props.ts'
4
5@top Problem { statement* }
6
7statement {
8 ProblemDeclaration {
9 ckw<"problem"> QualifiedName "."
10 } |
11 ClassDefinition {
12 ckw<"abstract">? ckw<"class"> RelationName
13 (ckw<"extends"> sep<",", RelationName>)?
14 (ClassBody { "{" ReferenceDeclaration* "}" } | ".")
15 } |
16 EnumDefinition {
17 ckw<"enum"> RelationName
18 (EnumBody { "{" sep<",", IndividualNodeName> "}" } | ".")
19 } |
20 PredicateDefinition {
21 (ckw<"error"> ckw<"pred">? | ckw<"direct">? ckw<"pred">)
22 RelationName ParameterList<Parameter>?
23 PredicateBody { ("<->" sep<OrOp, Conjunction>)? "." }
24 } |
25 RuleDefinition {
26 ckw<"direct">? ckw<"rule">
27 RuleName ParameterList<Parameter>?
28 RuleBody { ":" sep<OrOp, Conjunction> "~>" sep<OrOp, Action> "." }
29 } |
30 Assertion {
31 kw<"default">? (NotOp | UnknownOp)? RelationName
32 ParameterList<AssertionArgument> (":" LogicValue)? "."
33 } |
34 NodeValueAssertion {
35 IndividualNodeName ":" Constant "."
36 } |
37 IndividualDeclaration {
38 ckw<"indiv"> sep<",", IndividualNodeName> "."
39 } |
40 ScopeDeclaration {
41 kw<"scope"> sep<",", ScopeElement> "."
42 }
43}
44
45ReferenceDeclaration {
46 (kw<"refers"> | kw<"contains">)?
47 RelationName
48 RelationName
49 ( "[" Multiplicity? "]" )?
50 (kw<"opposite"> RelationName)?
51 ";"?
52}
53
54Parameter { RelationName? VariableName }
55
56Conjunction { ("," | Literal)+ }
57
58OrOp { ";" }
59
60Literal { NotOp? Atom (("=" | ":") sep1<"|", LogicValue>)? }
61
62Atom { RelationName "+"? ParameterList<Argument> }
63
64Action { ("," | ActionLiteral)+ }
65
66ActionLiteral {
67 ckw<"new"> VariableName |
68 ckw<"delete"> VariableName |
69 Literal
70}
71
72Argument { VariableName | Constant }
73
74AssertionArgument { NodeName | StarArgument | Constant }
75
76Constant { Real | String }
77
78LogicValue {
79 ckw<"true"> | ckw<"false"> | ckw<"unknown"> | ckw<"error">
80}
81
82ScopeElement { RelationName ("=" | "+=") Multiplicity }
83
84Multiplicity { (IntMult "..")? (IntMult | StarMult)}
85
86RelationName { QualifiedName }
87
88RuleName { QualifiedName }
89
90IndividualNodeName { QualifiedName }
91
92VariableName { QualifiedName }
93
94NodeName { QualifiedName }
95
96QualifiedName[implicitCompletion=true] { identifier ("::" identifier)* }
97
98kw<term> { @specialize[@name={term},implicitCompletion=true]<identifier, term> }
99
100ckw<term> { @extend[@name={term},implicitCompletion=true]<identifier, term> }
101
102ParameterList<content> { "(" sep<",", content> ")" }
103
104sep<separator, content> { sep1<separator, content>? }
105
106sep1<separator, content> { content (separator content)* }
107
108@skip { LineComment | BlockComment | whitespace }
109
110@tokens {
111 whitespace { std.whitespace+ }
112
113 LineComment { ("//" | "%") ![\n]* }
114
115 BlockComment { "/*" blockCommentRest }
116
117 blockCommentRest { ![*] blockCommentRest | "*" blockCommentAfterStar }
118
119 blockCommentAfterStar { "/" | "*" blockCommentAfterStar | ![/*] blockCommentRest }
120
121 @precedence { BlockComment, LineComment }
122
123 identifier { $[A-Za-z_] $[a-zA-Z0-9_]* }
124
125 int { $[0-9]+ }
126
127 IntMult { int }
128
129 StarMult { "*" }
130
131 Real { "-"? (exponential | int ("." (int | exponential))?) }
132
133 exponential { int ("e" | "E") ("+" | "-")? int }
134
135 String {
136 "'" (![\\'\n] | "\\" ![\n] | "\\\n")+ "'" |
137 "\"" (![\\"\n] | "\\" (![\n] | "\n"))* "\""
138 }
139
140 NotOp { "!" }
141
142 UnknownOp { "?" }
143
144 StarArgument { "*" }
145
146 "{" "}" "(" ")" "[" "]" "." ".." "," ":" "<->" "~>"
147}
148
149@detectDelim
diff --git a/subprojects/frontend/src/language/problemLanguageSupport.ts b/subprojects/frontend/src/language/problemLanguageSupport.ts
new file mode 100644
index 00000000..b858ba91
--- /dev/null
+++ b/subprojects/frontend/src/language/problemLanguageSupport.ts
@@ -0,0 +1,92 @@
1import { styleTags, tags as t } from '@codemirror/highlight';
2import {
3 foldInside,
4 foldNodeProp,
5 indentNodeProp,
6 indentUnit,
7 LanguageSupport,
8 LRLanguage,
9} from '@codemirror/language';
10import { LRParser } from '@lezer/lr';
11
12import { parser } from '../../build/generated/sources/lezer/problem';
13import {
14 foldBlockComment,
15 foldConjunction,
16 foldDeclaration,
17 foldWholeNode,
18} from './folding';
19import {
20 indentBlockComment,
21 indentDeclaration,
22 indentPredicateOrRule,
23} from './indentation';
24
25const parserWithMetadata = (parser as LRParser).configure({
26 props: [
27 styleTags({
28 LineComment: t.lineComment,
29 BlockComment: t.blockComment,
30 'problem class enum pred rule indiv scope': t.definitionKeyword,
31 'abstract extends refers contains opposite error direct default': t.modifier,
32 'true false unknown error': t.keyword,
33 'new delete': t.operatorKeyword,
34 NotOp: t.keyword,
35 UnknownOp: t.keyword,
36 OrOp: t.keyword,
37 StarArgument: t.keyword,
38 'IntMult StarMult Real': t.number,
39 StarMult: t.number,
40 String: t.string,
41 'RelationName/QualifiedName': t.typeName,
42 'RuleName/QualifiedName': t.macroName,
43 'IndividualNodeName/QualifiedName': t.atom,
44 'VariableName/QualifiedName': t.variableName,
45 '{ }': t.brace,
46 '( )': t.paren,
47 '[ ]': t.squareBracket,
48 '. .. , :': t.separator,
49 '<-> ~>': t.definitionOperator,
50 }),
51 indentNodeProp.add({
52 ProblemDeclaration: indentDeclaration,
53 UniqueDeclaration: indentDeclaration,
54 ScopeDeclaration: indentDeclaration,
55 PredicateBody: indentPredicateOrRule,
56 RuleBody: indentPredicateOrRule,
57 BlockComment: indentBlockComment,
58 }),
59 foldNodeProp.add({
60 ClassBody: foldInside,
61 EnumBody: foldInside,
62 ParameterList: foldInside,
63 PredicateBody: foldInside,
64 RuleBody: foldInside,
65 Conjunction: foldConjunction,
66 Action: foldWholeNode,
67 UniqueDeclaration: foldDeclaration,
68 ScopeDeclaration: foldDeclaration,
69 BlockComment: foldBlockComment,
70 }),
71 ],
72});
73
74const problemLanguage = LRLanguage.define({
75 parser: parserWithMetadata,
76 languageData: {
77 commentTokens: {
78 block: {
79 open: '/*',
80 close: '*/',
81 },
82 line: '%',
83 },
84 indentOnInput: /^\s*(?:\{|\}|\(|\)|;|\.|~>)$/,
85 },
86});
87
88export function problemLanguageSupport(): LanguageSupport {
89 return new LanguageSupport(problemLanguage, [
90 indentUnit.of(' '),
91 ]);
92}
diff --git a/subprojects/frontend/src/language/props.ts b/subprojects/frontend/src/language/props.ts
new file mode 100644
index 00000000..8e488bf5
--- /dev/null
+++ b/subprojects/frontend/src/language/props.ts
@@ -0,0 +1,7 @@
1import { NodeProp } from '@lezer/common';
2
3export const implicitCompletion = new NodeProp({
4 deserialize(s: string) {
5 return s === 'true';
6 },
7});
diff --git a/subprojects/frontend/src/theme/EditorTheme.ts b/subprojects/frontend/src/theme/EditorTheme.ts
new file mode 100644
index 00000000..294192fa
--- /dev/null
+++ b/subprojects/frontend/src/theme/EditorTheme.ts
@@ -0,0 +1,47 @@
1import type { PaletteMode } from '@mui/material';
2
3import cssVariables from '../themeVariables.module.scss';
4
5export enum EditorTheme {
6 Light,
7 Dark,
8}
9
10export class EditorThemeData {
11 className: string;
12
13 paletteMode: PaletteMode;
14
15 toggleDarkMode: EditorTheme;
16
17 foreground!: string;
18
19 foregroundHighlight!: string;
20
21 background!: string;
22
23 primary!: string;
24
25 secondary!: string;
26
27 constructor(className: string, paletteMode: PaletteMode, toggleDarkMode: EditorTheme) {
28 this.className = className;
29 this.paletteMode = paletteMode;
30 this.toggleDarkMode = toggleDarkMode;
31 Reflect.ownKeys(this).forEach((key) => {
32 if (!Reflect.get(this, key)) {
33 const cssKey = `${this.className}--${key.toString()}`;
34 if (cssKey in cssVariables) {
35 Reflect.set(this, key, cssVariables[cssKey]);
36 }
37 }
38 });
39 }
40}
41
42export const DEFAULT_THEME = EditorTheme.Dark;
43
44export const EDITOR_THEMES: { [key in EditorTheme]: EditorThemeData } = {
45 [EditorTheme.Light]: new EditorThemeData('light', 'light', EditorTheme.Dark),
46 [EditorTheme.Dark]: new EditorThemeData('dark', 'dark', EditorTheme.Light),
47};
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
new file mode 100644
index 00000000..f5b50be1
--- /dev/null
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -0,0 +1,15 @@
1import { observer } from 'mobx-react-lite';
2import { ThemeProvider as MaterialUiThemeProvider } from '@mui/material/styles';
3import React from 'react';
4
5import { useRootStore } from '../RootStore';
6
7export const ThemeProvider: React.FC = observer(({ children }) => {
8 const { themeStore } = useRootStore();
9
10 return (
11 <MaterialUiThemeProvider theme={themeStore.materialUiTheme}>
12 {children}
13 </MaterialUiThemeProvider>
14 );
15});
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts
new file mode 100644
index 00000000..ffaf6dde
--- /dev/null
+++ b/subprojects/frontend/src/theme/ThemeStore.ts
@@ -0,0 +1,64 @@
1import { makeAutoObservable } from 'mobx';
2import {
3 Theme,
4 createTheme,
5 responsiveFontSizes,
6} from '@mui/material/styles';
7
8import {
9 EditorTheme,
10 EditorThemeData,
11 DEFAULT_THEME,
12 EDITOR_THEMES,
13} from './EditorTheme';
14
15export class ThemeStore {
16 currentTheme: EditorTheme = DEFAULT_THEME;
17
18 constructor() {
19 makeAutoObservable(this);
20 }
21
22 toggleDarkMode(): void {
23 this.currentTheme = this.currentThemeData.toggleDarkMode;
24 }
25
26 private get currentThemeData(): EditorThemeData {
27 return EDITOR_THEMES[this.currentTheme];
28 }
29
30 get materialUiTheme(): Theme {
31 const themeData = this.currentThemeData;
32 const materialUiTheme = createTheme({
33 palette: {
34 mode: themeData.paletteMode,
35 background: {
36 default: themeData.background,
37 paper: themeData.background,
38 },
39 primary: {
40 main: themeData.primary,
41 },
42 secondary: {
43 main: themeData.secondary,
44 },
45 error: {
46 main: themeData.secondary,
47 },
48 text: {
49 primary: themeData.foregroundHighlight,
50 secondary: themeData.foreground,
51 },
52 },
53 });
54 return responsiveFontSizes(materialUiTheme);
55 }
56
57 get darkMode(): boolean {
58 return this.currentThemeData.paletteMode === 'dark';
59 }
60
61 get className(): string {
62 return this.currentThemeData.className;
63 }
64}
diff --git a/subprojects/frontend/src/themeVariables.module.scss b/subprojects/frontend/src/themeVariables.module.scss
new file mode 100644
index 00000000..85af4219
--- /dev/null
+++ b/subprojects/frontend/src/themeVariables.module.scss
@@ -0,0 +1,9 @@
1@import './themes';
2
3:export {
4 @each $themeName, $theme in $themes {
5 @each $variable, $value in $theme {
6 #{$themeName}--#{$variable}: $value,
7 }
8 }
9}
diff --git a/subprojects/frontend/src/themes.scss b/subprojects/frontend/src/themes.scss
new file mode 100644
index 00000000..a30f1de3
--- /dev/null
+++ b/subprojects/frontend/src/themes.scss
@@ -0,0 +1,38 @@
1$themes: (
2 'dark': (
3 'foreground': #abb2bf,
4 'foregroundHighlight': #eeffff,
5 'background': #212121,
6 'primary': #56b6c2,
7 'secondary': #ff5370,
8 'keyword': #56b6c2,
9 'predicate': #d6e9ff,
10 'variable': #c8ae9d,
11 'uniqueNode': #d6e9ff,
12 'number': #6e88a6,
13 'delimiter': #707787,
14 'comment': #5c6370,
15 'cursor': #56b6c2,
16 'selection': #3e4452,
17 'currentLine': rgba(0, 0, 0, 0.2),
18 'lineNumber': #5c6370,
19 ),
20 'light': (
21 'foreground': #abb2bf,
22 'background': #282c34,
23 'paper': #21252b,
24 'primary': #56b6c2,
25 'secondary': #ff5370,
26 'keyword': #56b6c2,
27 'predicate': #d6e9ff,
28 'variable': #c8ae9d,
29 'uniqueNode': #d6e9ff,
30 'number': #6e88a6,
31 'delimiter': #56606d,
32 'comment': #55606d,
33 'cursor': #f3efe7,
34 'selection': #3e4452,
35 'currentLine': #2c323c,
36 'lineNumber': #5c6370,
37 ),
38);
diff --git a/subprojects/frontend/src/utils/ConditionVariable.ts b/subprojects/frontend/src/utils/ConditionVariable.ts
new file mode 100644
index 00000000..0910dfa6
--- /dev/null
+++ b/subprojects/frontend/src/utils/ConditionVariable.ts
@@ -0,0 +1,64 @@
1import { getLogger } from './logger';
2import { PendingTask } from './PendingTask';
3
4const log = getLogger('utils.ConditionVariable');
5
6export type Condition = () => boolean;
7
8export class ConditionVariable {
9 condition: Condition;
10
11 defaultTimeout: number;
12
13 listeners: PendingTask<void>[] = [];
14
15 constructor(condition: Condition, defaultTimeout = 0) {
16 this.condition = condition;
17 this.defaultTimeout = defaultTimeout;
18 }
19
20 async waitFor(timeoutMs: number | null = null): Promise<void> {
21 if (this.condition()) {
22 return;
23 }
24 const timeoutOrDefault = timeoutMs || this.defaultTimeout;
25 let nowMs = Date.now();
26 const endMs = nowMs + timeoutOrDefault;
27 while (!this.condition() && nowMs < endMs) {
28 const remainingMs = endMs - nowMs;
29 const promise = new Promise<void>((resolve, reject) => {
30 if (this.condition()) {
31 resolve();
32 return;
33 }
34 const task = new PendingTask(resolve, reject, remainingMs);
35 this.listeners.push(task);
36 });
37 // We must keep waiting until the update has completed,
38 // so the tasks can't be started in parallel.
39 // eslint-disable-next-line no-await-in-loop
40 await promise;
41 nowMs = Date.now();
42 }
43 if (!this.condition()) {
44 log.error('Condition still does not hold after', timeoutOrDefault, 'ms');
45 throw new Error('Failed to wait for condition');
46 }
47 }
48
49 notifyAll(): void {
50 this.clearListenersWith((listener) => listener.resolve());
51 }
52
53 rejectAll(error: unknown): void {
54 this.clearListenersWith((listener) => listener.reject(error));
55 }
56
57 private clearListenersWith(callback: (listener: PendingTask<void>) => void) {
58 // Copy `listeners` so that we don't get into a race condition
59 // if one of the listeners adds another listener.
60 const { listeners } = this;
61 this.listeners = [];
62 listeners.forEach(callback);
63 }
64}
diff --git a/subprojects/frontend/src/utils/PendingTask.ts b/subprojects/frontend/src/utils/PendingTask.ts
new file mode 100644
index 00000000..51b79fb0
--- /dev/null
+++ b/subprojects/frontend/src/utils/PendingTask.ts
@@ -0,0 +1,60 @@
1import { getLogger } from './logger';
2
3const log = getLogger('utils.PendingTask');
4
5export class PendingTask<T> {
6 private readonly resolveCallback: (value: T) => void;
7
8 private readonly rejectCallback: (reason?: unknown) => void;
9
10 private resolved = false;
11
12 private timeout: number | null;
13
14 constructor(
15 resolveCallback: (value: T) => void,
16 rejectCallback: (reason?: unknown) => void,
17 timeoutMs?: number,
18 timeoutCallback?: () => void,
19 ) {
20 this.resolveCallback = resolveCallback;
21 this.rejectCallback = rejectCallback;
22 if (timeoutMs) {
23 this.timeout = setTimeout(() => {
24 if (!this.resolved) {
25 this.reject(new Error('Request timed out'));
26 if (timeoutCallback) {
27 timeoutCallback();
28 }
29 }
30 }, timeoutMs);
31 } else {
32 this.timeout = null;
33 }
34 }
35
36 resolve(value: T): void {
37 if (this.resolved) {
38 log.warn('Trying to resolve already resolved promise');
39 return;
40 }
41 this.markResolved();
42 this.resolveCallback(value);
43 }
44
45 reject(reason?: unknown): void {
46 if (this.resolved) {
47 log.warn('Trying to reject already resolved promise');
48 return;
49 }
50 this.markResolved();
51 this.rejectCallback(reason);
52 }
53
54 private markResolved() {
55 this.resolved = true;
56 if (this.timeout !== null) {
57 clearTimeout(this.timeout);
58 }
59 }
60}
diff --git a/subprojects/frontend/src/utils/Timer.ts b/subprojects/frontend/src/utils/Timer.ts
new file mode 100644
index 00000000..8f653070
--- /dev/null
+++ b/subprojects/frontend/src/utils/Timer.ts
@@ -0,0 +1,33 @@
1export class Timer {
2 readonly callback: () => void;
3
4 readonly defaultTimeout: number;
5
6 timeout: number | null = null;
7
8 constructor(callback: () => void, defaultTimeout = 0) {
9 this.callback = () => {
10 this.timeout = null;
11 callback();
12 };
13 this.defaultTimeout = defaultTimeout;
14 }
15
16 schedule(timeout: number | null = null): void {
17 if (this.timeout === null) {
18 this.timeout = setTimeout(this.callback, timeout || this.defaultTimeout);
19 }
20 }
21
22 reschedule(timeout: number | null = null): void {
23 this.cancel();
24 this.schedule(timeout);
25 }
26
27 cancel(): void {
28 if (this.timeout !== null) {
29 clearTimeout(this.timeout);
30 this.timeout = null;
31 }
32 }
33}
diff --git a/subprojects/frontend/src/utils/logger.ts b/subprojects/frontend/src/utils/logger.ts
new file mode 100644
index 00000000..306d122c
--- /dev/null
+++ b/subprojects/frontend/src/utils/logger.ts
@@ -0,0 +1,49 @@
1import styles, { CSPair } from 'ansi-styles';
2import log from 'loglevel';
3import * as prefix from 'loglevel-plugin-prefix';
4
5const colors: Partial<Record<string, CSPair>> = {
6 TRACE: styles.magenta,
7 DEBUG: styles.cyan,
8 INFO: styles.blue,
9 WARN: styles.yellow,
10 ERROR: styles.red,
11};
12
13prefix.reg(log);
14
15if (DEBUG) {
16 log.setLevel(log.levels.DEBUG);
17} else {
18 log.setLevel(log.levels.WARN);
19}
20
21if ('chrome' in window) {
22 // Only Chromium supports console ANSI escape sequences.
23 prefix.apply(log, {
24 format(level, name, timestamp) {
25 const formattedTimestamp = `${styles.gray.open}[${timestamp.toString()}]${styles.gray.close}`;
26 const levelColor = colors[level.toUpperCase()] || styles.red;
27 const formattedLevel = `${levelColor.open}${level}${levelColor.close}`;
28 const formattedName = `${styles.green.open}(${name || 'root'})${styles.green.close}`;
29 return `${formattedTimestamp} ${formattedLevel} ${formattedName}`;
30 },
31 });
32} else {
33 prefix.apply(log, {
34 template: '[%t] %l (%n)',
35 });
36}
37
38const appLogger = log.getLogger(PACKAGE_NAME);
39
40appLogger.info('Version:', PACKAGE_NAME, PACKAGE_VERSION);
41appLogger.info('Debug mode:', DEBUG);
42
43export function getLoggerFromRoot(name: string | symbol): log.Logger {
44 return log.getLogger(name);
45}
46
47export function getLogger(name: string | symbol): log.Logger {
48 return getLoggerFromRoot(`${PACKAGE_NAME}.${name.toString()}`);
49}
diff --git a/subprojects/frontend/src/xtext/ContentAssistService.ts b/subprojects/frontend/src/xtext/ContentAssistService.ts
new file mode 100644
index 00000000..8b872e06
--- /dev/null
+++ b/subprojects/frontend/src/xtext/ContentAssistService.ts
@@ -0,0 +1,219 @@
1import type {
2 Completion,
3 CompletionContext,
4 CompletionResult,
5} from '@codemirror/autocomplete';
6import { syntaxTree } from '@codemirror/language';
7import type { Transaction } from '@codemirror/state';
8import escapeStringRegexp from 'escape-string-regexp';
9
10import { implicitCompletion } from '../language/props';
11import type { UpdateService } from './UpdateService';
12import { getLogger } from '../utils/logger';
13import type { ContentAssistEntry } from './xtextServiceResults';
14
15const PROPOSALS_LIMIT = 1000;
16
17const IDENTIFIER_REGEXP_STR = '[a-zA-Z0-9_]*';
18
19const HIGH_PRIORITY_KEYWORDS = ['<->', '~>'];
20
21const log = getLogger('xtext.ContentAssistService');
22
23interface IFoundToken {
24 from: number;
25
26 to: number;
27
28 implicitCompletion: boolean;
29
30 text: string;
31}
32
33function findToken({ pos, state }: CompletionContext): IFoundToken | null {
34 const token = syntaxTree(state).resolveInner(pos, -1);
35 if (token === null) {
36 return null;
37 }
38 if (token.firstChild !== null) {
39 // We only autocomplete terminal nodes. If the current node is nonterminal,
40 // returning `null` makes us autocomplete with the empty prefix instead.
41 return null;
42 }
43 return {
44 from: token.from,
45 to: token.to,
46 implicitCompletion: token.type.prop(implicitCompletion) || false,
47 text: state.sliceDoc(token.from, token.to),
48 };
49}
50
51function shouldCompleteImplicitly(token: IFoundToken | null, context: CompletionContext): boolean {
52 return token !== null
53 && token.implicitCompletion
54 && context.pos - token.from >= 2;
55}
56
57function computeSpan(prefix: string, entryCount: number): RegExp {
58 const escapedPrefix = escapeStringRegexp(prefix);
59 if (entryCount < PROPOSALS_LIMIT) {
60 // Proposals with the current prefix fit the proposals limit.
61 // We can filter client side as long as the current prefix is preserved.
62 return new RegExp(`^${escapedPrefix}${IDENTIFIER_REGEXP_STR}$`);
63 }
64 // The current prefix overflows the proposals limits,
65 // so we have to fetch the completions again on the next keypress.
66 // Hopefully, it'll return a shorter list and we'll be able to filter client side.
67 return new RegExp(`^${escapedPrefix}$`);
68}
69
70function createCompletion(entry: ContentAssistEntry): Completion {
71 let boost: number;
72 switch (entry.kind) {
73 case 'KEYWORD':
74 // Some hard-to-type operators should be on top.
75 boost = HIGH_PRIORITY_KEYWORDS.includes(entry.proposal) ? 10 : -99;
76 break;
77 case 'TEXT':
78 case 'SNIPPET':
79 boost = -90;
80 break;
81 default: {
82 // Penalize qualified names (vs available unqualified names).
83 const extraSegments = entry.proposal.match(/::/g)?.length || 0;
84 boost = Math.max(-5 * extraSegments, -50);
85 }
86 break;
87 }
88 return {
89 label: entry.proposal,
90 detail: entry.description,
91 info: entry.documentation,
92 type: entry.kind?.toLowerCase(),
93 boost,
94 };
95}
96
97export class ContentAssistService {
98 private readonly updateService: UpdateService;
99
100 private lastCompletion: CompletionResult | null = null;
101
102 constructor(updateService: UpdateService) {
103 this.updateService = updateService;
104 }
105
106 onTransaction(transaction: Transaction): void {
107 if (this.shouldInvalidateCachedCompletion(transaction)) {
108 this.lastCompletion = null;
109 }
110 }
111
112 async contentAssist(context: CompletionContext): Promise<CompletionResult> {
113 const tokenBefore = findToken(context);
114 if (!context.explicit && !shouldCompleteImplicitly(tokenBefore, context)) {
115 return {
116 from: context.pos,
117 options: [],
118 };
119 }
120 let range: { from: number, to: number };
121 let prefix = '';
122 if (tokenBefore === null) {
123 range = {
124 from: context.pos,
125 to: context.pos,
126 };
127 prefix = '';
128 } else {
129 range = {
130 from: tokenBefore.from,
131 to: tokenBefore.to,
132 };
133 const prefixLength = context.pos - tokenBefore.from;
134 if (prefixLength > 0) {
135 prefix = tokenBefore.text.substring(0, context.pos - tokenBefore.from);
136 }
137 }
138 if (!context.explicit && this.shouldReturnCachedCompletion(tokenBefore)) {
139 log.trace('Returning cached completion result');
140 // Postcondition of `shouldReturnCachedCompletion`: `lastCompletion !== null`
141 return {
142 ...this.lastCompletion as CompletionResult,
143 ...range,
144 };
145 }
146 this.lastCompletion = null;
147 const entries = await this.updateService.fetchContentAssist({
148 resource: this.updateService.resourceName,
149 serviceType: 'assist',
150 caretOffset: context.pos,
151 proposalsLimit: PROPOSALS_LIMIT,
152 }, context);
153 if (context.aborted) {
154 return {
155 ...range,
156 options: [],
157 };
158 }
159 const options: Completion[] = [];
160 entries.forEach((entry) => {
161 if (prefix === entry.prefix) {
162 // Xtext will generate completions that do not complete the current token,
163 // e.g., `(` after trying to complete an indetifier,
164 // but we ignore those, since CodeMirror won't filter for them anyways.
165 options.push(createCompletion(entry));
166 }
167 });
168 log.debug('Fetched', options.length, 'completions from server');
169 this.lastCompletion = {
170 ...range,
171 options,
172 span: computeSpan(prefix, entries.length),
173 };
174 return this.lastCompletion;
175 }
176
177 private shouldReturnCachedCompletion(
178 token: { from: number, to: number, text: string } | null,
179 ): boolean {
180 if (token === null || this.lastCompletion === null) {
181 return false;
182 }
183 const { from, to, text } = token;
184 const { from: lastFrom, to: lastTo, span } = this.lastCompletion;
185 if (!lastTo) {
186 return true;
187 }
188 const [transformedFrom, transformedTo] = this.mapRangeInclusive(lastFrom, lastTo);
189 return from >= transformedFrom
190 && to <= transformedTo
191 && typeof span !== 'undefined'
192 && span.exec(text) !== null;
193 }
194
195 private shouldInvalidateCachedCompletion(transaction: Transaction): boolean {
196 if (!transaction.docChanged || this.lastCompletion === null) {
197 return false;
198 }
199 const { from: lastFrom, to: lastTo } = this.lastCompletion;
200 if (!lastTo) {
201 return true;
202 }
203 const [transformedFrom, transformedTo] = this.mapRangeInclusive(lastFrom, lastTo);
204 let invalidate = false;
205 transaction.changes.iterChangedRanges((fromA, toA) => {
206 if (fromA < transformedFrom || toA > transformedTo) {
207 invalidate = true;
208 }
209 });
210 return invalidate;
211 }
212
213 private mapRangeInclusive(lastFrom: number, lastTo: number): [number, number] {
214 const changes = this.updateService.computeChangesSinceLastUpdate();
215 const transformedFrom = changes.mapPos(lastFrom);
216 const transformedTo = changes.mapPos(lastTo, 1);
217 return [transformedFrom, transformedTo];
218 }
219}
diff --git a/subprojects/frontend/src/xtext/HighlightingService.ts b/subprojects/frontend/src/xtext/HighlightingService.ts
new file mode 100644
index 00000000..dfbb4a19
--- /dev/null
+++ b/subprojects/frontend/src/xtext/HighlightingService.ts
@@ -0,0 +1,37 @@
1import type { EditorStore } from '../editor/EditorStore';
2import type { IHighlightRange } from '../editor/semanticHighlighting';
3import type { UpdateService } from './UpdateService';
4import { highlightingResult } from './xtextServiceResults';
5
6export class HighlightingService {
7 private readonly store: EditorStore;
8
9 private readonly updateService: UpdateService;
10
11 constructor(store: EditorStore, updateService: UpdateService) {
12 this.store = store;
13 this.updateService = updateService;
14 }
15
16 onPush(push: unknown): void {
17 const { regions } = highlightingResult.parse(push);
18 const allChanges = this.updateService.computeChangesSinceLastUpdate();
19 const ranges: IHighlightRange[] = [];
20 regions.forEach(({ offset, length, styleClasses }) => {
21 if (styleClasses.length === 0) {
22 return;
23 }
24 const from = allChanges.mapPos(offset);
25 const to = allChanges.mapPos(offset + length);
26 if (to <= from) {
27 return;
28 }
29 ranges.push({
30 from,
31 to,
32 classes: styleClasses,
33 });
34 });
35 this.store.updateSemanticHighlighting(ranges);
36 }
37}
diff --git a/subprojects/frontend/src/xtext/OccurrencesService.ts b/subprojects/frontend/src/xtext/OccurrencesService.ts
new file mode 100644
index 00000000..bc865537
--- /dev/null
+++ b/subprojects/frontend/src/xtext/OccurrencesService.ts
@@ -0,0 +1,127 @@
1import { Transaction } from '@codemirror/state';
2
3import type { EditorStore } from '../editor/EditorStore';
4import type { IOccurrence } from '../editor/findOccurrences';
5import type { UpdateService } from './UpdateService';
6import { getLogger } from '../utils/logger';
7import { Timer } from '../utils/Timer';
8import { XtextWebSocketClient } from './XtextWebSocketClient';
9import {
10 isConflictResult,
11 occurrencesResult,
12 TextRegion,
13} from './xtextServiceResults';
14
15const FIND_OCCURRENCES_TIMEOUT_MS = 1000;
16
17// Must clear occurrences asynchronously from `onTransaction`,
18// because we must not emit a conflicting transaction when handling the pending transaction.
19const CLEAR_OCCURRENCES_TIMEOUT_MS = 10;
20
21const log = getLogger('xtext.OccurrencesService');
22
23function transformOccurrences(regions: TextRegion[]): IOccurrence[] {
24 const occurrences: IOccurrence[] = [];
25 regions.forEach(({ offset, length }) => {
26 if (length > 0) {
27 occurrences.push({
28 from: offset,
29 to: offset + length,
30 });
31 }
32 });
33 return occurrences;
34}
35
36export class OccurrencesService {
37 private readonly store: EditorStore;
38
39 private readonly webSocketClient: XtextWebSocketClient;
40
41 private readonly updateService: UpdateService;
42
43 private hasOccurrences = false;
44
45 private readonly findOccurrencesTimer = new Timer(() => {
46 this.handleFindOccurrences();
47 }, FIND_OCCURRENCES_TIMEOUT_MS);
48
49 private readonly clearOccurrencesTimer = new Timer(() => {
50 this.clearOccurrences();
51 }, CLEAR_OCCURRENCES_TIMEOUT_MS);
52
53 constructor(
54 store: EditorStore,
55 webSocketClient: XtextWebSocketClient,
56 updateService: UpdateService,
57 ) {
58 this.store = store;
59 this.webSocketClient = webSocketClient;
60 this.updateService = updateService;
61 }
62
63 onTransaction(transaction: Transaction): void {
64 if (transaction.docChanged) {
65 this.clearOccurrencesTimer.schedule();
66 this.findOccurrencesTimer.reschedule();
67 }
68 if (transaction.isUserEvent('select')) {
69 this.findOccurrencesTimer.reschedule();
70 }
71 }
72
73 private handleFindOccurrences() {
74 this.clearOccurrencesTimer.cancel();
75 this.updateOccurrences().catch((error) => {
76 log.error('Unexpected error while updating occurrences', error);
77 this.clearOccurrences();
78 });
79 }
80
81 private async updateOccurrences() {
82 await this.updateService.update();
83 const result = await this.webSocketClient.send({
84 resource: this.updateService.resourceName,
85 serviceType: 'occurrences',
86 expectedStateId: this.updateService.xtextStateId,
87 caretOffset: this.store.state.selection.main.head,
88 });
89 const allChanges = this.updateService.computeChangesSinceLastUpdate();
90 if (!allChanges.empty || isConflictResult(result, 'canceled')) {
91 // Stale occurrences result, the user already made some changes.
92 // We can safely ignore the occurrences and schedule a new find occurrences call.
93 this.clearOccurrences();
94 this.findOccurrencesTimer.schedule();
95 return;
96 }
97 const parsedOccurrencesResult = occurrencesResult.safeParse(result);
98 if (!parsedOccurrencesResult.success) {
99 log.error(
100 'Unexpected occurences result',
101 result,
102 'not an OccurrencesResult: ',
103 parsedOccurrencesResult.error,
104 );
105 this.clearOccurrences();
106 return;
107 }
108 const { stateId, writeRegions, readRegions } = parsedOccurrencesResult.data;
109 if (stateId !== this.updateService.xtextStateId) {
110 log.error('Unexpected state id, expected:', this.updateService.xtextStateId, 'got:', stateId);
111 this.clearOccurrences();
112 return;
113 }
114 const write = transformOccurrences(writeRegions);
115 const read = transformOccurrences(readRegions);
116 this.hasOccurrences = write.length > 0 || read.length > 0;
117 log.debug('Found', write.length, 'write and', read.length, 'read occurrences');
118 this.store.updateOccurrences(write, read);
119 }
120
121 private clearOccurrences() {
122 if (this.hasOccurrences) {
123 this.store.updateOccurrences([], []);
124 this.hasOccurrences = false;
125 }
126 }
127}
diff --git a/subprojects/frontend/src/xtext/UpdateService.ts b/subprojects/frontend/src/xtext/UpdateService.ts
new file mode 100644
index 00000000..e78944a9
--- /dev/null
+++ b/subprojects/frontend/src/xtext/UpdateService.ts
@@ -0,0 +1,363 @@
1import {
2 ChangeDesc,
3 ChangeSet,
4 ChangeSpec,
5 StateEffect,
6 Transaction,
7} from '@codemirror/state';
8import { nanoid } from 'nanoid';
9
10import type { EditorStore } from '../editor/EditorStore';
11import type { XtextWebSocketClient } from './XtextWebSocketClient';
12import { ConditionVariable } from '../utils/ConditionVariable';
13import { getLogger } from '../utils/logger';
14import { Timer } from '../utils/Timer';
15import {
16 ContentAssistEntry,
17 contentAssistResult,
18 documentStateResult,
19 formattingResult,
20 isConflictResult,
21} from './xtextServiceResults';
22
23const UPDATE_TIMEOUT_MS = 500;
24
25const WAIT_FOR_UPDATE_TIMEOUT_MS = 1000;
26
27const log = getLogger('xtext.UpdateService');
28
29const setDirtyChanges = StateEffect.define<ChangeSet>();
30
31export interface IAbortSignal {
32 aborted: boolean;
33}
34
35export class UpdateService {
36 resourceName: string;
37
38 xtextStateId: string | null = null;
39
40 private readonly store: EditorStore;
41
42 /**
43 * The changes being synchronized to the server if a full or delta text update is running,
44 * `null` otherwise.
45 */
46 private pendingUpdate: ChangeSet | null = null;
47
48 /**
49 * Local changes not yet sychronized to the server and not part of the running update, if any.
50 */
51 private dirtyChanges: ChangeSet;
52
53 private readonly webSocketClient: XtextWebSocketClient;
54
55 private readonly updatedCondition = new ConditionVariable(
56 () => this.pendingUpdate === null && this.xtextStateId !== null,
57 WAIT_FOR_UPDATE_TIMEOUT_MS,
58 );
59
60 private readonly idleUpdateTimer = new Timer(() => {
61 this.handleIdleUpdate();
62 }, UPDATE_TIMEOUT_MS);
63
64 constructor(store: EditorStore, webSocketClient: XtextWebSocketClient) {
65 this.resourceName = `${nanoid(7)}.problem`;
66 this.store = store;
67 this.dirtyChanges = this.newEmptyChangeSet();
68 this.webSocketClient = webSocketClient;
69 }
70
71 onReconnect(): void {
72 this.xtextStateId = null;
73 this.updateFullText().catch((error) => {
74 log.error('Unexpected error during initial update', error);
75 });
76 }
77
78 onTransaction(transaction: Transaction): void {
79 const setDirtyChangesEffect = transaction.effects.find(
80 (effect) => effect.is(setDirtyChanges),
81 ) as StateEffect<ChangeSet> | undefined;
82 if (setDirtyChangesEffect) {
83 const { value } = setDirtyChangesEffect;
84 if (this.pendingUpdate !== null) {
85 this.pendingUpdate = ChangeSet.empty(value.length);
86 }
87 this.dirtyChanges = value;
88 return;
89 }
90 if (transaction.docChanged) {
91 this.dirtyChanges = this.dirtyChanges.compose(transaction.changes);
92 this.idleUpdateTimer.reschedule();
93 }
94 }
95
96 /**
97 * Computes the summary of any changes happened since the last complete update.
98 *
99 * The result reflects any changes that happened since the `xtextStateId`
100 * version was uploaded to the server.
101 *
102 * @return the summary of changes since the last update
103 */
104 computeChangesSinceLastUpdate(): ChangeDesc {
105 return this.pendingUpdate?.composeDesc(this.dirtyChanges.desc) || this.dirtyChanges.desc;
106 }
107
108 private handleIdleUpdate() {
109 if (!this.webSocketClient.isOpen || this.dirtyChanges.empty) {
110 return;
111 }
112 if (this.pendingUpdate === null) {
113 this.update().catch((error) => {
114 log.error('Unexpected error during scheduled update', error);
115 });
116 }
117 this.idleUpdateTimer.reschedule();
118 }
119
120 private newEmptyChangeSet() {
121 return ChangeSet.of([], this.store.state.doc.length);
122 }
123
124 async updateFullText(): Promise<void> {
125 await this.withUpdate(() => this.doUpdateFullText());
126 }
127
128 private async doUpdateFullText(): Promise<[string, void]> {
129 const result = await this.webSocketClient.send({
130 resource: this.resourceName,
131 serviceType: 'update',
132 fullText: this.store.state.doc.sliceString(0),
133 });
134 const { stateId } = documentStateResult.parse(result);
135 return [stateId, undefined];
136 }
137
138 /**
139 * Makes sure that the document state on the server reflects recent
140 * local changes.
141 *
142 * Performs either an update with delta text or a full text update if needed.
143 * If there are not local dirty changes, the promise resolves immediately.
144 *
145 * @return a promise resolving when the update is completed
146 */
147 async update(): Promise<void> {
148 await this.prepareForDeltaUpdate();
149 const delta = this.computeDelta();
150 if (delta === null) {
151 return;
152 }
153 log.trace('Editor delta', delta);
154 await this.withUpdate(async () => {
155 const result = await this.webSocketClient.send({
156 resource: this.resourceName,
157 serviceType: 'update',
158 requiredStateId: this.xtextStateId,
159 ...delta,
160 });
161 const parsedDocumentStateResult = documentStateResult.safeParse(result);
162 if (parsedDocumentStateResult.success) {
163 return [parsedDocumentStateResult.data.stateId, undefined];
164 }
165 if (isConflictResult(result, 'invalidStateId')) {
166 return this.doFallbackToUpdateFullText();
167 }
168 throw parsedDocumentStateResult.error;
169 });
170 }
171
172 private doFallbackToUpdateFullText() {
173 if (this.pendingUpdate === null) {
174 throw new Error('Only a pending update can be extended');
175 }
176 log.warn('Delta update failed, performing full text update');
177 this.xtextStateId = null;
178 this.pendingUpdate = this.pendingUpdate.compose(this.dirtyChanges);
179 this.dirtyChanges = this.newEmptyChangeSet();
180 return this.doUpdateFullText();
181 }
182
183 async fetchContentAssist(
184 params: Record<string, unknown>,
185 signal: IAbortSignal,
186 ): Promise<ContentAssistEntry[]> {
187 await this.prepareForDeltaUpdate();
188 if (signal.aborted) {
189 return [];
190 }
191 const delta = this.computeDelta();
192 if (delta !== null) {
193 log.trace('Editor delta', delta);
194 const entries = await this.withUpdate(async () => {
195 const result = await this.webSocketClient.send({
196 ...params,
197 requiredStateId: this.xtextStateId,
198 ...delta,
199 });
200 const parsedContentAssistResult = contentAssistResult.safeParse(result);
201 if (parsedContentAssistResult.success) {
202 const { stateId, entries: resultEntries } = parsedContentAssistResult.data;
203 return [stateId, resultEntries];
204 }
205 if (isConflictResult(result, 'invalidStateId')) {
206 log.warn('Server state invalid during content assist');
207 const [newStateId] = await this.doFallbackToUpdateFullText();
208 // We must finish this state update transaction to prepare for any push events
209 // before querying for content assist, so we just return `null` and will query
210 // the content assist service later.
211 return [newStateId, null];
212 }
213 throw parsedContentAssistResult.error;
214 });
215 if (entries !== null) {
216 return entries;
217 }
218 if (signal.aborted) {
219 return [];
220 }
221 }
222 // Poscondition of `prepareForDeltaUpdate`: `xtextStateId !== null`
223 return this.doFetchContentAssist(params, this.xtextStateId as string);
224 }
225
226 private async doFetchContentAssist(params: Record<string, unknown>, expectedStateId: string) {
227 const result = await this.webSocketClient.send({
228 ...params,
229 requiredStateId: expectedStateId,
230 });
231 const { stateId, entries } = contentAssistResult.parse(result);
232 if (stateId !== expectedStateId) {
233 throw new Error(`Unexpected state id, expected: ${expectedStateId} got: ${stateId}`);
234 }
235 return entries;
236 }
237
238 async formatText(): Promise<void> {
239 await this.update();
240 let { from, to } = this.store.state.selection.main;
241 if (to <= from) {
242 from = 0;
243 to = this.store.state.doc.length;
244 }
245 log.debug('Formatting from', from, 'to', to);
246 await this.withUpdate(async () => {
247 const result = await this.webSocketClient.send({
248 resource: this.resourceName,
249 serviceType: 'format',
250 selectionStart: from,
251 selectionEnd: to,
252 });
253 const { stateId, formattedText } = formattingResult.parse(result);
254 this.applyBeforeDirtyChanges({
255 from,
256 to,
257 insert: formattedText,
258 });
259 return [stateId, null];
260 });
261 }
262
263 private computeDelta() {
264 if (this.dirtyChanges.empty) {
265 return null;
266 }
267 let minFromA = Number.MAX_SAFE_INTEGER;
268 let maxToA = 0;
269 let minFromB = Number.MAX_SAFE_INTEGER;
270 let maxToB = 0;
271 this.dirtyChanges.iterChangedRanges((fromA, toA, fromB, toB) => {
272 minFromA = Math.min(minFromA, fromA);
273 maxToA = Math.max(maxToA, toA);
274 minFromB = Math.min(minFromB, fromB);
275 maxToB = Math.max(maxToB, toB);
276 });
277 return {
278 deltaOffset: minFromA,
279 deltaReplaceLength: maxToA - minFromA,
280 deltaText: this.store.state.doc.sliceString(minFromB, maxToB),
281 };
282 }
283
284 private applyBeforeDirtyChanges(changeSpec: ChangeSpec) {
285 const pendingChanges = this.pendingUpdate?.compose(this.dirtyChanges) || this.dirtyChanges;
286 const revertChanges = pendingChanges.invert(this.store.state.doc);
287 const applyBefore = ChangeSet.of(changeSpec, revertChanges.newLength);
288 const redoChanges = pendingChanges.map(applyBefore.desc);
289 const changeSet = revertChanges.compose(applyBefore).compose(redoChanges);
290 this.store.dispatch({
291 changes: changeSet,
292 effects: [
293 setDirtyChanges.of(redoChanges),
294 ],
295 });
296 }
297
298 /**
299 * Executes an asynchronous callback that updates the state on the server.
300 *
301 * Ensures that updates happen sequentially and manages `pendingUpdate`
302 * and `dirtyChanges` to reflect changes being synchronized to the server
303 * and not yet synchronized to the server, respectively.
304 *
305 * Optionally, `callback` may return a second value that is retured by this function.
306 *
307 * Once the remote procedure call to update the server state finishes
308 * and returns the new `stateId`, `callback` must return _immediately_
309 * to ensure that the local `stateId` is updated likewise to be able to handle
310 * push messages referring to the new `stateId` from the server.
311 * If additional work is needed to compute the second value in some cases,
312 * use `T | null` instead of `T` as a return type and signal the need for additional
313 * computations by returning `null`. Thus additional computations can be performed
314 * outside of the critical section.
315 *
316 * @param callback the asynchronous callback that updates the server state
317 * @return a promise resolving to the second value returned by `callback`
318 */
319 private async withUpdate<T>(callback: () => Promise<[string, T]>): Promise<T> {
320 if (this.pendingUpdate !== null) {
321 throw new Error('Another update is pending, will not perform update');
322 }
323 this.pendingUpdate = this.dirtyChanges;
324 this.dirtyChanges = this.newEmptyChangeSet();
325 let newStateId: string | null = null;
326 try {
327 let result: T;
328 [newStateId, result] = await callback();
329 this.xtextStateId = newStateId;
330 this.pendingUpdate = null;
331 this.updatedCondition.notifyAll();
332 return result;
333 } catch (e) {
334 log.error('Error while update', e);
335 if (this.pendingUpdate === null) {
336 log.error('pendingUpdate was cleared during update');
337 } else {
338 this.dirtyChanges = this.pendingUpdate.compose(this.dirtyChanges);
339 }
340 this.pendingUpdate = null;
341 this.webSocketClient.forceReconnectOnError();
342 this.updatedCondition.rejectAll(e);
343 throw e;
344 }
345 }
346
347 /**
348 * Ensures that there is some state available on the server (`xtextStateId`)
349 * and that there is not pending update.
350 *
351 * After this function resolves, a delta text update is possible.
352 *
353 * @return a promise resolving when there is a valid state id but no pending update
354 */
355 private async prepareForDeltaUpdate() {
356 // If no update is pending, but the full text hasn't been uploaded to the server yet,
357 // we must start a full text upload.
358 if (this.pendingUpdate === null && this.xtextStateId === null) {
359 await this.updateFullText();
360 }
361 await this.updatedCondition.waitFor();
362 }
363}
diff --git a/subprojects/frontend/src/xtext/ValidationService.ts b/subprojects/frontend/src/xtext/ValidationService.ts
new file mode 100644
index 00000000..ff7d3700
--- /dev/null
+++ b/subprojects/frontend/src/xtext/ValidationService.ts
@@ -0,0 +1,39 @@
1import type { Diagnostic } from '@codemirror/lint';
2
3import type { EditorStore } from '../editor/EditorStore';
4import type { UpdateService } from './UpdateService';
5import { validationResult } from './xtextServiceResults';
6
7export class ValidationService {
8 private readonly store: EditorStore;
9
10 private readonly updateService: UpdateService;
11
12 constructor(store: EditorStore, updateService: UpdateService) {
13 this.store = store;
14 this.updateService = updateService;
15 }
16
17 onPush(push: unknown): void {
18 const { issues } = validationResult.parse(push);
19 const allChanges = this.updateService.computeChangesSinceLastUpdate();
20 const diagnostics: Diagnostic[] = [];
21 issues.forEach(({
22 offset,
23 length,
24 severity,
25 description,
26 }) => {
27 if (severity === 'ignore') {
28 return;
29 }
30 diagnostics.push({
31 from: allChanges.mapPos(offset),
32 to: allChanges.mapPos(offset + length),
33 severity,
34 message: description,
35 });
36 });
37 this.store.updateDiagnostics(diagnostics);
38 }
39}
diff --git a/subprojects/frontend/src/xtext/XtextClient.ts b/subprojects/frontend/src/xtext/XtextClient.ts
new file mode 100644
index 00000000..0898e725
--- /dev/null
+++ b/subprojects/frontend/src/xtext/XtextClient.ts
@@ -0,0 +1,86 @@
1import type {
2 CompletionContext,
3 CompletionResult,
4} from '@codemirror/autocomplete';
5import type { Transaction } from '@codemirror/state';
6
7import type { EditorStore } from '../editor/EditorStore';
8import { ContentAssistService } from './ContentAssistService';
9import { HighlightingService } from './HighlightingService';
10import { OccurrencesService } from './OccurrencesService';
11import { UpdateService } from './UpdateService';
12import { getLogger } from '../utils/logger';
13import { ValidationService } from './ValidationService';
14import { XtextWebSocketClient } from './XtextWebSocketClient';
15import { XtextWebPushService } from './xtextMessages';
16
17const log = getLogger('xtext.XtextClient');
18
19export class XtextClient {
20 private readonly webSocketClient: XtextWebSocketClient;
21
22 private readonly updateService: UpdateService;
23
24 private readonly contentAssistService: ContentAssistService;
25
26 private readonly highlightingService: HighlightingService;
27
28 private readonly validationService: ValidationService;
29
30 private readonly occurrencesService: OccurrencesService;
31
32 constructor(store: EditorStore) {
33 this.webSocketClient = new XtextWebSocketClient(
34 () => this.updateService.onReconnect(),
35 (resource, stateId, service, push) => this.onPush(resource, stateId, service, push),
36 );
37 this.updateService = new UpdateService(store, this.webSocketClient);
38 this.contentAssistService = new ContentAssistService(this.updateService);
39 this.highlightingService = new HighlightingService(store, this.updateService);
40 this.validationService = new ValidationService(store, this.updateService);
41 this.occurrencesService = new OccurrencesService(
42 store,
43 this.webSocketClient,
44 this.updateService,
45 );
46 }
47
48 onTransaction(transaction: Transaction): void {
49 // `ContentAssistService.prototype.onTransaction` needs the dirty change desc
50 // _before_ the current edit, so we call it before `updateService`.
51 this.contentAssistService.onTransaction(transaction);
52 this.updateService.onTransaction(transaction);
53 this.occurrencesService.onTransaction(transaction);
54 }
55
56 private onPush(resource: string, stateId: string, service: XtextWebPushService, push: unknown) {
57 const { resourceName, xtextStateId } = this.updateService;
58 if (resource !== resourceName) {
59 log.error('Unknown resource name: expected:', resourceName, 'got:', resource);
60 return;
61 }
62 if (stateId !== xtextStateId) {
63 log.error('Unexpected xtext state id: expected:', xtextStateId, 'got:', stateId);
64 // The current push message might be stale (referring to a previous state),
65 // so this is not neccessarily an error and there is no need to force-reconnect.
66 return;
67 }
68 switch (service) {
69 case 'highlight':
70 this.highlightingService.onPush(push);
71 return;
72 case 'validate':
73 this.validationService.onPush(push);
74 }
75 }
76
77 contentAssist(context: CompletionContext): Promise<CompletionResult> {
78 return this.contentAssistService.contentAssist(context);
79 }
80
81 formatText(): void {
82 this.updateService.formatText().catch((e) => {
83 log.error('Error while formatting text', e);
84 });
85 }
86}
diff --git a/subprojects/frontend/src/xtext/XtextWebSocketClient.ts b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
new file mode 100644
index 00000000..2ce20a54
--- /dev/null
+++ b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
@@ -0,0 +1,362 @@
1import { nanoid } from 'nanoid';
2
3import { getLogger } from '../utils/logger';
4import { PendingTask } from '../utils/PendingTask';
5import { Timer } from '../utils/Timer';
6import {
7 xtextWebErrorResponse,
8 XtextWebRequest,
9 xtextWebOkResponse,
10 xtextWebPushMessage,
11 XtextWebPushService,
12} from './xtextMessages';
13import { pongResult } from './xtextServiceResults';
14
15const XTEXT_SUBPROTOCOL_V1 = 'tools.refinery.language.web.xtext.v1';
16
17const WEBSOCKET_CLOSE_OK = 1000;
18
19const RECONNECT_DELAY_MS = [200, 1000, 5000, 30_000];
20
21const MAX_RECONNECT_DELAY_MS = RECONNECT_DELAY_MS[RECONNECT_DELAY_MS.length - 1];
22
23const BACKGROUND_IDLE_TIMEOUT_MS = 5 * 60 * 1000;
24
25const PING_TIMEOUT_MS = 10 * 1000;
26
27const REQUEST_TIMEOUT_MS = 1000;
28
29const log = getLogger('xtext.XtextWebSocketClient');
30
31export type ReconnectHandler = () => void;
32
33export type PushHandler = (
34 resourceId: string,
35 stateId: string,
36 service: XtextWebPushService,
37 data: unknown,
38) => void;
39
40enum State {
41 Initial,
42 Opening,
43 TabVisible,
44 TabHiddenIdle,
45 TabHiddenWaiting,
46 Error,
47 TimedOut,
48}
49
50export class XtextWebSocketClient {
51 private nextMessageId = 0;
52
53 private connection!: WebSocket;
54
55 private readonly pendingRequests = new Map<string, PendingTask<unknown>>();
56
57 private readonly onReconnect: ReconnectHandler;
58
59 private readonly onPush: PushHandler;
60
61 private state = State.Initial;
62
63 private reconnectTryCount = 0;
64
65 private readonly idleTimer = new Timer(() => {
66 this.handleIdleTimeout();
67 }, BACKGROUND_IDLE_TIMEOUT_MS);
68
69 private readonly pingTimer = new Timer(() => {
70 this.sendPing();
71 }, PING_TIMEOUT_MS);
72
73 private readonly reconnectTimer = new Timer(() => {
74 this.handleReconnect();
75 });
76
77 constructor(onReconnect: ReconnectHandler, onPush: PushHandler) {
78 this.onReconnect = onReconnect;
79 this.onPush = onPush;
80 document.addEventListener('visibilitychange', () => {
81 this.handleVisibilityChange();
82 });
83 this.reconnect();
84 }
85
86 private get isLogicallyClosed(): boolean {
87 return this.state === State.Error || this.state === State.TimedOut;
88 }
89
90 get isOpen(): boolean {
91 return this.state === State.TabVisible
92 || this.state === State.TabHiddenIdle
93 || this.state === State.TabHiddenWaiting;
94 }
95
96 private reconnect() {
97 if (this.isOpen || this.state === State.Opening) {
98 log.error('Trying to reconnect from', this.state);
99 return;
100 }
101 this.state = State.Opening;
102 const webSocketServer = window.origin.replace(/^http/, 'ws');
103 const webSocketUrl = `${webSocketServer}/xtext-service`;
104 this.connection = new WebSocket(webSocketUrl, XTEXT_SUBPROTOCOL_V1);
105 this.connection.addEventListener('open', () => {
106 if (this.connection.protocol !== XTEXT_SUBPROTOCOL_V1) {
107 log.error('Unknown subprotocol', this.connection.protocol, 'selected by server');
108 this.forceReconnectOnError();
109 }
110 if (document.visibilityState === 'hidden') {
111 this.handleTabHidden();
112 } else {
113 this.handleTabVisibleConnected();
114 }
115 log.info('Connected to websocket');
116 this.nextMessageId = 0;
117 this.reconnectTryCount = 0;
118 this.pingTimer.schedule();
119 this.onReconnect();
120 });
121 this.connection.addEventListener('error', (event) => {
122 log.error('Unexpected websocket error', event);
123 this.forceReconnectOnError();
124 });
125 this.connection.addEventListener('message', (event) => {
126 this.handleMessage(event.data);
127 });
128 this.connection.addEventListener('close', (event) => {
129 if (this.isLogicallyClosed && event.code === WEBSOCKET_CLOSE_OK
130 && this.pendingRequests.size === 0) {
131 log.info('Websocket closed');
132 return;
133 }
134 log.error('Websocket closed unexpectedly', event.code, event.reason);
135 this.forceReconnectOnError();
136 });
137 }
138
139 private handleVisibilityChange() {
140 if (document.visibilityState === 'hidden') {
141 if (this.state === State.TabVisible) {
142 this.handleTabHidden();
143 }
144 return;
145 }
146 this.idleTimer.cancel();
147 if (this.state === State.TabHiddenIdle || this.state === State.TabHiddenWaiting) {
148 this.handleTabVisibleConnected();
149 return;
150 }
151 if (this.state === State.TimedOut) {
152 this.reconnect();
153 }
154 }
155
156 private handleTabHidden() {
157 log.debug('Tab hidden while websocket is connected');
158 this.state = State.TabHiddenIdle;
159 this.idleTimer.schedule();
160 }
161
162 private handleTabVisibleConnected() {
163 log.debug('Tab visible while websocket is connected');
164 this.state = State.TabVisible;
165 }
166
167 private handleIdleTimeout() {
168 log.trace('Waiting for pending tasks before disconnect');
169 if (this.state === State.TabHiddenIdle) {
170 this.state = State.TabHiddenWaiting;
171 this.handleWaitingForDisconnect();
172 }
173 }
174
175 private handleWaitingForDisconnect() {
176 if (this.state !== State.TabHiddenWaiting) {
177 return;
178 }
179 const pending = this.pendingRequests.size;
180 if (pending === 0) {
181 log.info('Closing idle websocket');
182 this.state = State.TimedOut;
183 this.closeConnection(1000, 'idle timeout');
184 return;
185 }
186 log.info('Waiting for', pending, 'pending requests before closing websocket');
187 }
188
189 private sendPing() {
190 if (!this.isOpen) {
191 return;
192 }
193 const ping = nanoid();
194 log.trace('Ping', ping);
195 this.send({ ping }).then((result) => {
196 const parsedPongResult = pongResult.safeParse(result);
197 if (parsedPongResult.success && parsedPongResult.data.pong === ping) {
198 log.trace('Pong', ping);
199 this.pingTimer.schedule();
200 } else {
201 log.error('Invalid pong:', parsedPongResult, 'expected:', ping);
202 this.forceReconnectOnError();
203 }
204 }).catch((error) => {
205 log.error('Error while waiting for ping', error);
206 this.forceReconnectOnError();
207 });
208 }
209
210 send(request: unknown): Promise<unknown> {
211 if (!this.isOpen) {
212 throw new Error('Not open');
213 }
214 const messageId = this.nextMessageId.toString(16);
215 if (messageId in this.pendingRequests) {
216 log.error('Message id wraparound still pending', messageId);
217 this.rejectRequest(messageId, new Error('Message id wraparound'));
218 }
219 if (this.nextMessageId >= Number.MAX_SAFE_INTEGER) {
220 this.nextMessageId = 0;
221 } else {
222 this.nextMessageId += 1;
223 }
224 const message = JSON.stringify({
225 id: messageId,
226 request,
227 } as XtextWebRequest);
228 log.trace('Sending message', message);
229 return new Promise((resolve, reject) => {
230 const task = new PendingTask(resolve, reject, REQUEST_TIMEOUT_MS, () => {
231 this.removePendingRequest(messageId);
232 });
233 this.pendingRequests.set(messageId, task);
234 this.connection.send(message);
235 });
236 }
237
238 private handleMessage(messageStr: unknown) {
239 if (typeof messageStr !== 'string') {
240 log.error('Unexpected binary message', messageStr);
241 this.forceReconnectOnError();
242 return;
243 }
244 log.trace('Incoming websocket message', messageStr);
245 let message: unknown;
246 try {
247 message = JSON.parse(messageStr);
248 } catch (error) {
249 log.error('Json parse error', error);
250 this.forceReconnectOnError();
251 return;
252 }
253 const okResponse = xtextWebOkResponse.safeParse(message);
254 if (okResponse.success) {
255 const { id, response } = okResponse.data;
256 this.resolveRequest(id, response);
257 return;
258 }
259 const errorResponse = xtextWebErrorResponse.safeParse(message);
260 if (errorResponse.success) {
261 const { id, error, message: errorMessage } = errorResponse.data;
262 this.rejectRequest(id, new Error(`${error} error: ${errorMessage}`));
263 if (error === 'server') {
264 log.error('Reconnecting due to server error: ', errorMessage);
265 this.forceReconnectOnError();
266 }
267 return;
268 }
269 const pushMessage = xtextWebPushMessage.safeParse(message);
270 if (pushMessage.success) {
271 const {
272 resource,
273 stateId,
274 service,
275 push,
276 } = pushMessage.data;
277 this.onPush(resource, stateId, service, push);
278 } else {
279 log.error(
280 'Unexpected websocket message:',
281 message,
282 'not ok response because:',
283 okResponse.error,
284 'not error response because:',
285 errorResponse.error,
286 'not push message because:',
287 pushMessage.error,
288 );
289 this.forceReconnectOnError();
290 }
291 }
292
293 private resolveRequest(messageId: string, value: unknown) {
294 const pendingRequest = this.pendingRequests.get(messageId);
295 if (pendingRequest) {
296 pendingRequest.resolve(value);
297 this.removePendingRequest(messageId);
298 return;
299 }
300 log.error('Trying to resolve unknown request', messageId, 'with', value);
301 }
302
303 private rejectRequest(messageId: string, reason?: unknown) {
304 const pendingRequest = this.pendingRequests.get(messageId);
305 if (pendingRequest) {
306 pendingRequest.reject(reason);
307 this.removePendingRequest(messageId);
308 return;
309 }
310 log.error('Trying to reject unknown request', messageId, 'with', reason);
311 }
312
313 private removePendingRequest(messageId: string) {
314 this.pendingRequests.delete(messageId);
315 this.handleWaitingForDisconnect();
316 }
317
318 forceReconnectOnError(): void {
319 if (this.isLogicallyClosed) {
320 return;
321 }
322 this.abortPendingRequests();
323 this.closeConnection(1000, 'reconnecting due to error');
324 log.error('Reconnecting after delay due to error');
325 this.handleErrorState();
326 }
327
328 private abortPendingRequests() {
329 this.pendingRequests.forEach((request) => {
330 request.reject(new Error('Websocket disconnect'));
331 });
332 this.pendingRequests.clear();
333 }
334
335 private closeConnection(code: number, reason: string) {
336 this.pingTimer.cancel();
337 const { readyState } = this.connection;
338 if (readyState !== WebSocket.CLOSING && readyState !== WebSocket.CLOSED) {
339 this.connection.close(code, reason);
340 }
341 }
342
343 private handleErrorState() {
344 this.state = State.Error;
345 this.reconnectTryCount += 1;
346 const delay = RECONNECT_DELAY_MS[this.reconnectTryCount - 1] || MAX_RECONNECT_DELAY_MS;
347 log.info('Reconnecting in', delay, 'ms');
348 this.reconnectTimer.schedule(delay);
349 }
350
351 private handleReconnect() {
352 if (this.state !== State.Error) {
353 log.error('Unexpected reconnect in', this.state);
354 return;
355 }
356 if (document.visibilityState === 'hidden') {
357 this.state = State.TimedOut;
358 } else {
359 this.reconnect();
360 }
361 }
362}
diff --git a/subprojects/frontend/src/xtext/xtextMessages.ts b/subprojects/frontend/src/xtext/xtextMessages.ts
new file mode 100644
index 00000000..c4305fcf
--- /dev/null
+++ b/subprojects/frontend/src/xtext/xtextMessages.ts
@@ -0,0 +1,40 @@
1import { z } from 'zod';
2
3export const xtextWebRequest = z.object({
4 id: z.string().nonempty(),
5 request: z.unknown(),
6});
7
8export type XtextWebRequest = z.infer<typeof xtextWebRequest>;
9
10export const xtextWebOkResponse = z.object({
11 id: z.string().nonempty(),
12 response: z.unknown(),
13});
14
15export type XtextWebOkResponse = z.infer<typeof xtextWebOkResponse>;
16
17export const xtextWebErrorKind = z.enum(['request', 'server']);
18
19export type XtextWebErrorKind = z.infer<typeof xtextWebErrorKind>;
20
21export const xtextWebErrorResponse = z.object({
22 id: z.string().nonempty(),
23 error: xtextWebErrorKind,
24 message: z.string(),
25});
26
27export type XtextWebErrorResponse = z.infer<typeof xtextWebErrorResponse>;
28
29export const xtextWebPushService = z.enum(['highlight', 'validate']);
30
31export type XtextWebPushService = z.infer<typeof xtextWebPushService>;
32
33export const xtextWebPushMessage = z.object({
34 resource: z.string().nonempty(),
35 stateId: z.string().nonempty(),
36 service: xtextWebPushService,
37 push: z.unknown(),
38});
39
40export type XtextWebPushMessage = z.infer<typeof xtextWebPushMessage>;
diff --git a/subprojects/frontend/src/xtext/xtextServiceResults.ts b/subprojects/frontend/src/xtext/xtextServiceResults.ts
new file mode 100644
index 00000000..f79b059c
--- /dev/null
+++ b/subprojects/frontend/src/xtext/xtextServiceResults.ts
@@ -0,0 +1,112 @@
1import { z } from 'zod';
2
3export const pongResult = z.object({
4 pong: z.string().nonempty(),
5});
6
7export type PongResult = z.infer<typeof pongResult>;
8
9export const documentStateResult = z.object({
10 stateId: z.string().nonempty(),
11});
12
13export type DocumentStateResult = z.infer<typeof documentStateResult>;
14
15export const conflict = z.enum(['invalidStateId', 'canceled']);
16
17export type Conflict = z.infer<typeof conflict>;
18
19export const serviceConflictResult = z.object({
20 conflict,
21});
22
23export type ServiceConflictResult = z.infer<typeof serviceConflictResult>;
24
25export function isConflictResult(result: unknown, conflictType: Conflict): boolean {
26 const parsedConflictResult = serviceConflictResult.safeParse(result);
27 return parsedConflictResult.success && parsedConflictResult.data.conflict === conflictType;
28}
29
30export const severity = z.enum(['error', 'warning', 'info', 'ignore']);
31
32export type Severity = z.infer<typeof severity>;
33
34export const issue = z.object({
35 description: z.string().nonempty(),
36 severity,
37 line: z.number().int(),
38 column: z.number().int().nonnegative(),
39 offset: z.number().int().nonnegative(),
40 length: z.number().int().nonnegative(),
41});
42
43export type Issue = z.infer<typeof issue>;
44
45export const validationResult = z.object({
46 issues: issue.array(),
47});
48
49export type ValidationResult = z.infer<typeof validationResult>;
50
51export const replaceRegion = z.object({
52 offset: z.number().int().nonnegative(),
53 length: z.number().int().nonnegative(),
54 text: z.string(),
55});
56
57export type ReplaceRegion = z.infer<typeof replaceRegion>;
58
59export const textRegion = z.object({
60 offset: z.number().int().nonnegative(),
61 length: z.number().int().nonnegative(),
62});
63
64export type TextRegion = z.infer<typeof textRegion>;
65
66export const contentAssistEntry = z.object({
67 prefix: z.string(),
68 proposal: z.string().nonempty(),
69 label: z.string().optional(),
70 description: z.string().nonempty().optional(),
71 documentation: z.string().nonempty().optional(),
72 escapePosition: z.number().int().nonnegative().optional(),
73 textReplacements: replaceRegion.array(),
74 editPositions: textRegion.array(),
75 kind: z.string().nonempty(),
76});
77
78export type ContentAssistEntry = z.infer<typeof contentAssistEntry>;
79
80export const contentAssistResult = documentStateResult.extend({
81 entries: contentAssistEntry.array(),
82});
83
84export type ContentAssistResult = z.infer<typeof contentAssistResult>;
85
86export const highlightingRegion = z.object({
87 offset: z.number().int().nonnegative(),
88 length: z.number().int().nonnegative(),
89 styleClasses: z.string().nonempty().array(),
90});
91
92export type HighlightingRegion = z.infer<typeof highlightingRegion>;
93
94export const highlightingResult = z.object({
95 regions: highlightingRegion.array(),
96});
97
98export type HighlightingResult = z.infer<typeof highlightingResult>;
99
100export const occurrencesResult = documentStateResult.extend({
101 writeRegions: textRegion.array(),
102 readRegions: textRegion.array(),
103});
104
105export type OccurrencesResult = z.infer<typeof occurrencesResult>;
106
107export const formattingResult = documentStateResult.extend({
108 formattedText: z.string(),
109 replaceRegion: textRegion,
110});
111
112export type FormattingResult = z.infer<typeof formattingResult>;
diff --git a/subprojects/frontend/tsconfig.json b/subprojects/frontend/tsconfig.json
new file mode 100644
index 00000000..94c357c5
--- /dev/null
+++ b/subprojects/frontend/tsconfig.json
@@ -0,0 +1,18 @@
1{
2 "compilerOptions": {
3 "target": "es2020",
4 "module": "esnext",
5 "moduleResolution": "node",
6 "esModuleInterop": true,
7 "allowSyntheticDefaultImports": true,
8 "jsx": "react",
9 "strict": true,
10 "noImplicitOverride": true,
11 "noImplicitReturns": true,
12 "exactOptionalPropertyTypes": false,
13 "noEmit": true,
14 "skipLibCheck": true
15 },
16 "include": ["./src/**/*"],
17 "exclude": ["./build/generated/sources/lezer/*"]
18}
diff --git a/subprojects/frontend/tsconfig.sonar.json b/subprojects/frontend/tsconfig.sonar.json
new file mode 100644
index 00000000..9db12b91
--- /dev/null
+++ b/subprojects/frontend/tsconfig.sonar.json
@@ -0,0 +1,16 @@
1{
2 "compilerOptions": {
3 "target": "es2020",
4 "module": "esnext",
5 "moduleResolution": "node",
6 "esModuleInterop": true,
7 "allowSyntheticDefaultImports": true,
8 "jsx": "react",
9 "strict": true,
10 "noImplicitOverride": true,
11 "noImplicitReturns": true,
12 "noEmit": true,
13 "skipLibCheck": true
14 },
15 "include": ["./src/**/*"]
16}
diff --git a/subprojects/frontend/webpack.config.js b/subprojects/frontend/webpack.config.js
new file mode 100644
index 00000000..bacb7e4a
--- /dev/null
+++ b/subprojects/frontend/webpack.config.js
@@ -0,0 +1,164 @@
1const fs = require('fs');
2const path = require('path');
3
4const { DefinePlugin } = require('webpack');
5const HtmlWebpackPlugin = require('html-webpack-plugin');
6const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload');
7const MiniCssExtractPlugin = require('mini-css-extract-plugin');
8const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
9
10const packageInfo = require('./package.json');
11
12const currentNodeEnv = process.env.NODE_ENV || 'development';
13const devMode = currentNodeEnv !== 'production';
14const outputPath = path.resolve(__dirname, 'build/webpack', currentNodeEnv);
15
16function portNumberOrElse (envName, fallback) {
17 const value = process.env[envName];
18 return value ? parseInt(value) : fallback;
19}
20
21const listenHost = process.env['LISTEN_HOST'] || 'localhost';
22const listenPort = portNumberOrElse('LISTEN_PORT', 1313);
23const apiHost = process.env['API_HOST'] || listenHost;
24const apiPort = portNumberOrElse('API_PORT', 1312);
25const publicHost = process.env['PUBLIC_HOST'] || listenHost;
26const publicPort = portNumberOrElse('PUBLIC_PORT', listenPort);
27
28module.exports = {
29 mode: devMode ? 'development' : 'production',
30 entry: './src/index',
31 output: {
32 path: outputPath,
33 publicPath: '/',
34 filename: devMode ? '[name].js' : '[name].[contenthash].js',
35 assetModuleFilename: devMode ? '[name][ext]' : '[name].[contenthash][ext]',
36 clean: true,
37 crossOriginLoading: 'anonymous',
38 },
39 module: {
40 rules: [
41 {
42 test: /.[jt]sx?$/i,
43 include: [path.resolve(__dirname, 'src')],
44 use: [
45 {
46 loader: 'babel-loader',
47 options: {
48 presets: [
49 [
50 '@babel/preset-env',
51 {
52 targets: 'defaults',
53 },
54 ],
55 '@babel/preset-react',
56 [
57 '@babel/preset-typescript',
58 {
59 isTSX: true,
60 allExtensions: true,
61 allowDeclareFields: true,
62 onlyRemoveTypeImports: true,
63 optimizeConstEnums: true,
64 },
65 ]
66 ],
67 plugins: [
68 '@babel/plugin-transform-runtime',
69 ],
70 },
71 },
72 ],
73 },
74 {
75 test: /\.scss$/i,
76 use: [
77 devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
78 'css-loader',
79 {
80 loader: 'sass-loader',
81 options: {
82 implementation: require.resolve('sass'),
83 },
84 },
85 ],
86 },
87 {
88 test: /\.(gif|png|jpe?g|svg?)$/i,
89 use: [
90 {
91 loader: 'image-webpack-loader',
92 options: {
93 disable: true,
94 }
95 },
96 ],
97 type: 'asset',
98 },
99 {
100 test: /\.woff2?$/i,
101 type: 'asset/resource',
102 },
103 ],
104 },
105 resolve: {
106 extensions: ['.ts', '.tsx', '.js', '.jsx'],
107 },
108 devtool: devMode ? 'inline-source-map' : 'source-map',
109 optimization: {
110 providedExports: !devMode,
111 sideEffects: devMode ? 'flag' : true,
112 splitChunks: {
113 chunks: 'all',
114 },
115 },
116 devServer: {
117 client: {
118 logging: 'info',
119 overlay: true,
120 progress: true,
121 webSocketURL: {
122 hostname: publicHost,
123 port: publicPort,
124 protocol: publicPort === 443 ? 'wss' : 'ws',
125 },
126 },
127 compress: true,
128 host: listenHost,
129 port: listenPort,
130 proxy: {
131 '/xtext-service': {
132 target: `${apiPort === 443 ? 'https' : 'http'}://${apiHost}:${apiPort}`,
133 ws: true,
134 },
135 },
136 },
137 plugins: [
138 new DefinePlugin({
139 'DEBUG': JSON.stringify(devMode),
140 'PACKAGE_NAME': JSON.stringify(packageInfo.name),
141 'PACKAGE_VERSION': JSON.stringify(packageInfo.version),
142 }),
143 new MiniCssExtractPlugin({
144 filename: '[name].[contenthash].css',
145 chunkFilename: '[name].[contenthash].css',
146 }),
147 new SubresourceIntegrityPlugin(),
148 new HtmlWebpackPlugin({
149 template: 'src/index.html',
150 }),
151 new HtmlWebpackInjectPreload({
152 files: [
153 {
154 match: /(roboto-latin-(400|500)-normal|jetbrains-mono-latin-variable).*\.woff2/,
155 attributes: {
156 as: 'font',
157 type: 'font/woff2',
158 crossorigin: 'anonymous',
159 },
160 },
161 ],
162 }),
163 ],
164};
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-01 08:59:47 +0000