diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-12-13 02:07:04 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2021-12-14 02:14:23 +0100 |
commit | a96c52b21e7e590bbdd70b80896780a446fa2e8b (patch) | |
tree | 663619baa254577bb2f5342192e80bca692ad91d /subprojects/frontend | |
parent | build: move modules into subproject directory (diff) | |
download | refinery-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')
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 | ||
3 | module.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 @@ | |||
1 | module.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 @@ | |||
1 | plugins { | ||
2 | id 'refinery-frontend-workspace' | ||
3 | id 'refinery-sonarqube' | ||
4 | } | ||
5 | |||
6 | import org.siouan.frontendgradleplugin.infrastructure.gradle.RunYarn | ||
7 | |||
8 | def webpackOutputDir = "${buildDir}/webpack" | ||
9 | def productionResources = file("${webpackOutputDir}/production") | ||
10 | |||
11 | frontend { | ||
12 | assembleScript = 'assemble:webpack' | ||
13 | } | ||
14 | |||
15 | configurations { | ||
16 | productionAssets { | ||
17 | canBeConsumed = true | ||
18 | canBeResolved = false | ||
19 | } | ||
20 | } | ||
21 | |||
22 | def installFrontend = tasks.named('installFrontend') | ||
23 | |||
24 | def 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 | |||
34 | def assembleFrontend = tasks.named('assembleFrontend') | ||
35 | assembleFrontend.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 | |||
45 | artifacts { | ||
46 | productionAssets(productionResources) { | ||
47 | builtBy assembleFrontend | ||
48 | } | ||
49 | } | ||
50 | |||
51 | def 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 | |||
66 | def 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 | |||
81 | tasks.named('check') { | ||
82 | dependsOn(eslint, stylelint) | ||
83 | } | ||
84 | |||
85 | tasks.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 | |||
94 | sonarqube.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 @@ | |||
1 | import AppBar from '@mui/material/AppBar'; | ||
2 | import Box from '@mui/material/Box'; | ||
3 | import IconButton from '@mui/material/IconButton'; | ||
4 | import Toolbar from '@mui/material/Toolbar'; | ||
5 | import Typography from '@mui/material/Typography'; | ||
6 | import MenuIcon from '@mui/icons-material/Menu'; | ||
7 | import React from 'react'; | ||
8 | |||
9 | import { EditorArea } from './editor/EditorArea'; | ||
10 | import { EditorButtons } from './editor/EditorButtons'; | ||
11 | import { GenerateButton } from './editor/GenerateButton'; | ||
12 | |||
13 | export 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 @@ | |||
1 | import React, { createContext, useContext } from 'react'; | ||
2 | |||
3 | import { EditorStore } from './editor/EditorStore'; | ||
4 | import { ThemeStore } from './theme/ThemeStore'; | ||
5 | |||
6 | export 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 | |||
17 | const StoreContext = createContext<RootStore | undefined>(undefined); | ||
18 | |||
19 | export interface RootStoreProviderProps { | ||
20 | children: JSX.Element; | ||
21 | |||
22 | rootStore: RootStore; | ||
23 | } | ||
24 | |||
25 | export function RootStoreProvider({ children, rootStore }: RootStoreProviderProps): JSX.Element { | ||
26 | return ( | ||
27 | <StoreContext.Provider value={rootStore}> | ||
28 | {children} | ||
29 | </StoreContext.Provider> | ||
30 | ); | ||
31 | } | ||
32 | |||
33 | export 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 @@ | |||
1 | import { Command, EditorView } from '@codemirror/view'; | ||
2 | import { closeSearchPanel, openSearchPanel } from '@codemirror/search'; | ||
3 | import { closeLintPanel, openLintPanel } from '@codemirror/lint'; | ||
4 | import { observer } from 'mobx-react-lite'; | ||
5 | import React, { | ||
6 | useCallback, | ||
7 | useEffect, | ||
8 | useRef, | ||
9 | useState, | ||
10 | } from 'react'; | ||
11 | |||
12 | import { EditorParent } from './EditorParent'; | ||
13 | import { useRootStore } from '../RootStore'; | ||
14 | import { getLogger } from '../utils/logger'; | ||
15 | |||
16 | const log = getLogger('editor.EditorArea'); | ||
17 | |||
18 | function 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 | |||
66 | function 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 | |||
73 | export 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 @@ | |||
1 | import type { Diagnostic } from '@codemirror/lint'; | ||
2 | import { observer } from 'mobx-react-lite'; | ||
3 | import IconButton from '@mui/material/IconButton'; | ||
4 | import Stack from '@mui/material/Stack'; | ||
5 | import ToggleButton from '@mui/material/ToggleButton'; | ||
6 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | ||
7 | import CheckIcon from '@mui/icons-material/Check'; | ||
8 | import ErrorIcon from '@mui/icons-material/Error'; | ||
9 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; | ||
10 | import FormatPaint from '@mui/icons-material/FormatPaint'; | ||
11 | import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; | ||
12 | import RedoIcon from '@mui/icons-material/Redo'; | ||
13 | import SearchIcon from '@mui/icons-material/Search'; | ||
14 | import UndoIcon from '@mui/icons-material/Undo'; | ||
15 | import WarningIcon from '@mui/icons-material/Warning'; | ||
16 | import React from 'react'; | ||
17 | |||
18 | import { useRootStore } from '../RootStore'; | ||
19 | |||
20 | // Exhastive switch as proven by TypeScript. | ||
21 | // eslint-disable-next-line consistent-return | ||
22 | function 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 | |||
35 | export 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 @@ | |||
1 | import { 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 | */ | ||
12 | function 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 | |||
20 | export 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 @@ | |||
1 | import { autocompletion, completionKeymap } from '@codemirror/autocomplete'; | ||
2 | import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets'; | ||
3 | import { defaultKeymap, indentWithTab } from '@codemirror/commands'; | ||
4 | import { commentKeymap } from '@codemirror/comment'; | ||
5 | import { foldGutter, foldKeymap } from '@codemirror/fold'; | ||
6 | import { highlightActiveLineGutter, lineNumbers } from '@codemirror/gutter'; | ||
7 | import { classHighlightStyle } from '@codemirror/highlight'; | ||
8 | import { | ||
9 | history, | ||
10 | historyKeymap, | ||
11 | redo, | ||
12 | redoDepth, | ||
13 | undo, | ||
14 | undoDepth, | ||
15 | } from '@codemirror/history'; | ||
16 | import { indentOnInput } from '@codemirror/language'; | ||
17 | import { | ||
18 | Diagnostic, | ||
19 | lintKeymap, | ||
20 | setDiagnostics, | ||
21 | } from '@codemirror/lint'; | ||
22 | import { bracketMatching } from '@codemirror/matchbrackets'; | ||
23 | import { rectangularSelection } from '@codemirror/rectangular-selection'; | ||
24 | import { searchConfig, searchKeymap } from '@codemirror/search'; | ||
25 | import { | ||
26 | EditorState, | ||
27 | StateCommand, | ||
28 | StateEffect, | ||
29 | Transaction, | ||
30 | TransactionSpec, | ||
31 | } from '@codemirror/state'; | ||
32 | import { | ||
33 | drawSelection, | ||
34 | EditorView, | ||
35 | highlightActiveLine, | ||
36 | highlightSpecialChars, | ||
37 | keymap, | ||
38 | } from '@codemirror/view'; | ||
39 | import { | ||
40 | makeAutoObservable, | ||
41 | observable, | ||
42 | reaction, | ||
43 | } from 'mobx'; | ||
44 | |||
45 | import { findOccurrences, IOccurrence, setOccurrences } from './findOccurrences'; | ||
46 | import { problemLanguageSupport } from '../language/problemLanguageSupport'; | ||
47 | import { | ||
48 | IHighlightRange, | ||
49 | semanticHighlighting, | ||
50 | setSemanticHighlighting, | ||
51 | } from './semanticHighlighting'; | ||
52 | import type { ThemeStore } from '../theme/ThemeStore'; | ||
53 | import { getLogger } from '../utils/logger'; | ||
54 | import { XtextClient } from '../xtext/XtextClient'; | ||
55 | |||
56 | const log = getLogger('editor.EditorStore'); | ||
57 | |||
58 | export 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 @@ | |||
1 | import { observer } from 'mobx-react-lite'; | ||
2 | import Button from '@mui/material/Button'; | ||
3 | import PlayArrowIcon from '@mui/icons-material/PlayArrow'; | ||
4 | import React from 'react'; | ||
5 | |||
6 | import { useRootStore } from '../RootStore'; | ||
7 | |||
8 | const GENERATE_LABEL = 'Generate'; | ||
9 | |||
10 | export 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 @@ | |||
1 | import { StateEffect, StateField, TransactionSpec } from '@codemirror/state'; | ||
2 | import { EditorView, Decoration, DecorationSet } from '@codemirror/view'; | ||
3 | |||
4 | export type TransactionSpecFactory = (decorations: DecorationSet) => TransactionSpec; | ||
5 | |||
6 | export 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 @@ | |||
1 | import { Range, RangeSet } from '@codemirror/rangeset'; | ||
2 | import type { TransactionSpec } from '@codemirror/state'; | ||
3 | import { Decoration } from '@codemirror/view'; | ||
4 | |||
5 | import { decorationSetExtension } from './decorationSetExtension'; | ||
6 | |||
7 | export interface IOccurrence { | ||
8 | from: number; | ||
9 | |||
10 | to: number; | ||
11 | } | ||
12 | |||
13 | const [setOccurrencesInteral, findOccurrences] = decorationSetExtension(); | ||
14 | |||
15 | const writeDecoration = Decoration.mark({ | ||
16 | class: 'cm-problem-write', | ||
17 | }); | ||
18 | |||
19 | const readDecoration = Decoration.mark({ | ||
20 | class: 'cm-problem-read', | ||
21 | }); | ||
22 | |||
23 | export 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 | |||
35 | export { 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 @@ | |||
1 | import { RangeSet } from '@codemirror/rangeset'; | ||
2 | import type { TransactionSpec } from '@codemirror/state'; | ||
3 | import { Decoration } from '@codemirror/view'; | ||
4 | |||
5 | import { decorationSetExtension } from './decorationSetExtension'; | ||
6 | |||
7 | export interface IHighlightRange { | ||
8 | from: number; | ||
9 | |||
10 | to: number; | ||
11 | |||
12 | classes: string[]; | ||
13 | } | ||
14 | |||
15 | const [setSemanticHighlightingInternal, semanticHighlighting] = decorationSetExtension(); | ||
16 | |||
17 | export 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 | |||
24 | export { 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 @@ | |||
1 | declare const DEBUG: boolean; | ||
2 | |||
3 | declare const PACKAGE_NAME: string; | ||
4 | |||
5 | declare const PACKAGE_VERSION: string; | ||
6 | |||
7 | declare 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 @@ | |||
1 | import React from 'react'; | ||
2 | import { render } from 'react-dom'; | ||
3 | import CssBaseline from '@mui/material/CssBaseline'; | ||
4 | |||
5 | import { App } from './App'; | ||
6 | import { RootStore, RootStoreProvider } from './RootStore'; | ||
7 | import { ThemeProvider } from './theme/ThemeProvider'; | ||
8 | |||
9 | import './index.scss'; | ||
10 | |||
11 | const initialValue = `class Family { | ||
12 | contains Person[] members | ||
13 | } | ||
14 | |||
15 | class Person { | ||
16 | Person[] children opposite parent | ||
17 | Person[0..1] parent opposite children | ||
18 | int age | ||
19 | TaxStatus taxStatus | ||
20 | } | ||
21 | |||
22 | enum TaxStatus { | ||
23 | child, student, adult, retired | ||
24 | } | ||
25 | |||
26 | % A child cannot have any dependents. | ||
27 | pred invalidTaxStatus(Person p) <-> | ||
28 | taxStatus(p, child), | ||
29 | children(p, _q) | ||
30 | ; taxStatus(p, retired), | ||
31 | parent(p, q), | ||
32 | !taxStatus(q, retired). | ||
33 | |||
34 | direct 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 | |||
41 | indiv family. | ||
42 | Family(family). | ||
43 | members(family, anne). | ||
44 | members(family, bob). | ||
45 | members(family, ciri). | ||
46 | children(anne, ciri). | ||
47 | ?children(bob, ciri). | ||
48 | default children(ciri, *): false. | ||
49 | taxStatus(anne, adult). | ||
50 | age(anne, 35). | ||
51 | bobAge: 27. | ||
52 | age(bob, bobAge). | ||
53 | !age(ciri, bobAge). | ||
54 | |||
55 | scope Family = 1, Person += 5..10. | ||
56 | `; | ||
57 | |||
58 | const rootStore = new RootStore(initialValue); | ||
59 | |||
60 | const app = ( | ||
61 | <RootStoreProvider rootStore={rootStore}> | ||
62 | <ThemeProvider> | ||
63 | <CssBaseline /> | ||
64 | <App /> | ||
65 | </ThemeProvider> | ||
66 | </RootStoreProvider> | ||
67 | ); | ||
68 | |||
69 | render(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 @@ | |||
1 | import { EditorState } from '@codemirror/state'; | ||
2 | import type { SyntaxNode } from '@lezer/common'; | ||
3 | |||
4 | export 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 | */ | ||
12 | export 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 | */ | ||
50 | export 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 | */ | ||
78 | function 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 | |||
103 | export function foldWholeNode(node: SyntaxNode): FoldRange { | ||
104 | return { | ||
105 | from: node.from, | ||
106 | to: node.to, | ||
107 | }; | ||
108 | } | ||
109 | |||
110 | export 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 @@ | |||
1 | import { 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 | */ | ||
13 | function 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 | */ | ||
61 | function 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 | |||
69 | export function indentBlockComment(): number { | ||
70 | // Do not indent. | ||
71 | return -1; | ||
72 | } | ||
73 | |||
74 | export function indentDeclaration(context: TreeIndentContext): number { | ||
75 | return indentDeclarationStrategy(context, 1); | ||
76 | } | ||
77 | |||
78 | export 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 | |||
7 | statement { | ||
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 | |||
45 | ReferenceDeclaration { | ||
46 | (kw<"refers"> | kw<"contains">)? | ||
47 | RelationName | ||
48 | RelationName | ||
49 | ( "[" Multiplicity? "]" )? | ||
50 | (kw<"opposite"> RelationName)? | ||
51 | ";"? | ||
52 | } | ||
53 | |||
54 | Parameter { RelationName? VariableName } | ||
55 | |||
56 | Conjunction { ("," | Literal)+ } | ||
57 | |||
58 | OrOp { ";" } | ||
59 | |||
60 | Literal { NotOp? Atom (("=" | ":") sep1<"|", LogicValue>)? } | ||
61 | |||
62 | Atom { RelationName "+"? ParameterList<Argument> } | ||
63 | |||
64 | Action { ("," | ActionLiteral)+ } | ||
65 | |||
66 | ActionLiteral { | ||
67 | ckw<"new"> VariableName | | ||
68 | ckw<"delete"> VariableName | | ||
69 | Literal | ||
70 | } | ||
71 | |||
72 | Argument { VariableName | Constant } | ||
73 | |||
74 | AssertionArgument { NodeName | StarArgument | Constant } | ||
75 | |||
76 | Constant { Real | String } | ||
77 | |||
78 | LogicValue { | ||
79 | ckw<"true"> | ckw<"false"> | ckw<"unknown"> | ckw<"error"> | ||
80 | } | ||
81 | |||
82 | ScopeElement { RelationName ("=" | "+=") Multiplicity } | ||
83 | |||
84 | Multiplicity { (IntMult "..")? (IntMult | StarMult)} | ||
85 | |||
86 | RelationName { QualifiedName } | ||
87 | |||
88 | RuleName { QualifiedName } | ||
89 | |||
90 | IndividualNodeName { QualifiedName } | ||
91 | |||
92 | VariableName { QualifiedName } | ||
93 | |||
94 | NodeName { QualifiedName } | ||
95 | |||
96 | QualifiedName[implicitCompletion=true] { identifier ("::" identifier)* } | ||
97 | |||
98 | kw<term> { @specialize[@name={term},implicitCompletion=true]<identifier, term> } | ||
99 | |||
100 | ckw<term> { @extend[@name={term},implicitCompletion=true]<identifier, term> } | ||
101 | |||
102 | ParameterList<content> { "(" sep<",", content> ")" } | ||
103 | |||
104 | sep<separator, content> { sep1<separator, content>? } | ||
105 | |||
106 | sep1<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 @@ | |||
1 | import { styleTags, tags as t } from '@codemirror/highlight'; | ||
2 | import { | ||
3 | foldInside, | ||
4 | foldNodeProp, | ||
5 | indentNodeProp, | ||
6 | indentUnit, | ||
7 | LanguageSupport, | ||
8 | LRLanguage, | ||
9 | } from '@codemirror/language'; | ||
10 | import { LRParser } from '@lezer/lr'; | ||
11 | |||
12 | import { parser } from '../../build/generated/sources/lezer/problem'; | ||
13 | import { | ||
14 | foldBlockComment, | ||
15 | foldConjunction, | ||
16 | foldDeclaration, | ||
17 | foldWholeNode, | ||
18 | } from './folding'; | ||
19 | import { | ||
20 | indentBlockComment, | ||
21 | indentDeclaration, | ||
22 | indentPredicateOrRule, | ||
23 | } from './indentation'; | ||
24 | |||
25 | const 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 | |||
74 | const 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 | |||
88 | export 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 @@ | |||
1 | import { NodeProp } from '@lezer/common'; | ||
2 | |||
3 | export 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 @@ | |||
1 | import type { PaletteMode } from '@mui/material'; | ||
2 | |||
3 | import cssVariables from '../themeVariables.module.scss'; | ||
4 | |||
5 | export enum EditorTheme { | ||
6 | Light, | ||
7 | Dark, | ||
8 | } | ||
9 | |||
10 | export 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 | |||
42 | export const DEFAULT_THEME = EditorTheme.Dark; | ||
43 | |||
44 | export 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 @@ | |||
1 | import { observer } from 'mobx-react-lite'; | ||
2 | import { ThemeProvider as MaterialUiThemeProvider } from '@mui/material/styles'; | ||
3 | import React from 'react'; | ||
4 | |||
5 | import { useRootStore } from '../RootStore'; | ||
6 | |||
7 | export 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 @@ | |||
1 | import { makeAutoObservable } from 'mobx'; | ||
2 | import { | ||
3 | Theme, | ||
4 | createTheme, | ||
5 | responsiveFontSizes, | ||
6 | } from '@mui/material/styles'; | ||
7 | |||
8 | import { | ||
9 | EditorTheme, | ||
10 | EditorThemeData, | ||
11 | DEFAULT_THEME, | ||
12 | EDITOR_THEMES, | ||
13 | } from './EditorTheme'; | ||
14 | |||
15 | export 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 @@ | |||
1 | import { getLogger } from './logger'; | ||
2 | import { PendingTask } from './PendingTask'; | ||
3 | |||
4 | const log = getLogger('utils.ConditionVariable'); | ||
5 | |||
6 | export type Condition = () => boolean; | ||
7 | |||
8 | export 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 @@ | |||
1 | import { getLogger } from './logger'; | ||
2 | |||
3 | const log = getLogger('utils.PendingTask'); | ||
4 | |||
5 | export 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 @@ | |||
1 | export 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 @@ | |||
1 | import styles, { CSPair } from 'ansi-styles'; | ||
2 | import log from 'loglevel'; | ||
3 | import * as prefix from 'loglevel-plugin-prefix'; | ||
4 | |||
5 | const 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 | |||
13 | prefix.reg(log); | ||
14 | |||
15 | if (DEBUG) { | ||
16 | log.setLevel(log.levels.DEBUG); | ||
17 | } else { | ||
18 | log.setLevel(log.levels.WARN); | ||
19 | } | ||
20 | |||
21 | if ('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 | |||
38 | const appLogger = log.getLogger(PACKAGE_NAME); | ||
39 | |||
40 | appLogger.info('Version:', PACKAGE_NAME, PACKAGE_VERSION); | ||
41 | appLogger.info('Debug mode:', DEBUG); | ||
42 | |||
43 | export function getLoggerFromRoot(name: string | symbol): log.Logger { | ||
44 | return log.getLogger(name); | ||
45 | } | ||
46 | |||
47 | export 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 @@ | |||
1 | import type { | ||
2 | Completion, | ||
3 | CompletionContext, | ||
4 | CompletionResult, | ||
5 | } from '@codemirror/autocomplete'; | ||
6 | import { syntaxTree } from '@codemirror/language'; | ||
7 | import type { Transaction } from '@codemirror/state'; | ||
8 | import escapeStringRegexp from 'escape-string-regexp'; | ||
9 | |||
10 | import { implicitCompletion } from '../language/props'; | ||
11 | import type { UpdateService } from './UpdateService'; | ||
12 | import { getLogger } from '../utils/logger'; | ||
13 | import type { ContentAssistEntry } from './xtextServiceResults'; | ||
14 | |||
15 | const PROPOSALS_LIMIT = 1000; | ||
16 | |||
17 | const IDENTIFIER_REGEXP_STR = '[a-zA-Z0-9_]*'; | ||
18 | |||
19 | const HIGH_PRIORITY_KEYWORDS = ['<->', '~>']; | ||
20 | |||
21 | const log = getLogger('xtext.ContentAssistService'); | ||
22 | |||
23 | interface IFoundToken { | ||
24 | from: number; | ||
25 | |||
26 | to: number; | ||
27 | |||
28 | implicitCompletion: boolean; | ||
29 | |||
30 | text: string; | ||
31 | } | ||
32 | |||
33 | function 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 | |||
51 | function shouldCompleteImplicitly(token: IFoundToken | null, context: CompletionContext): boolean { | ||
52 | return token !== null | ||
53 | && token.implicitCompletion | ||
54 | && context.pos - token.from >= 2; | ||
55 | } | ||
56 | |||
57 | function 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 | |||
70 | function 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 | |||
97 | export 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 @@ | |||
1 | import type { EditorStore } from '../editor/EditorStore'; | ||
2 | import type { IHighlightRange } from '../editor/semanticHighlighting'; | ||
3 | import type { UpdateService } from './UpdateService'; | ||
4 | import { highlightingResult } from './xtextServiceResults'; | ||
5 | |||
6 | export 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 @@ | |||
1 | import { Transaction } from '@codemirror/state'; | ||
2 | |||
3 | import type { EditorStore } from '../editor/EditorStore'; | ||
4 | import type { IOccurrence } from '../editor/findOccurrences'; | ||
5 | import type { UpdateService } from './UpdateService'; | ||
6 | import { getLogger } from '../utils/logger'; | ||
7 | import { Timer } from '../utils/Timer'; | ||
8 | import { XtextWebSocketClient } from './XtextWebSocketClient'; | ||
9 | import { | ||
10 | isConflictResult, | ||
11 | occurrencesResult, | ||
12 | TextRegion, | ||
13 | } from './xtextServiceResults'; | ||
14 | |||
15 | const 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. | ||
19 | const CLEAR_OCCURRENCES_TIMEOUT_MS = 10; | ||
20 | |||
21 | const log = getLogger('xtext.OccurrencesService'); | ||
22 | |||
23 | function 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 | |||
36 | export 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 @@ | |||
1 | import { | ||
2 | ChangeDesc, | ||
3 | ChangeSet, | ||
4 | ChangeSpec, | ||
5 | StateEffect, | ||
6 | Transaction, | ||
7 | } from '@codemirror/state'; | ||
8 | import { nanoid } from 'nanoid'; | ||
9 | |||
10 | import type { EditorStore } from '../editor/EditorStore'; | ||
11 | import type { XtextWebSocketClient } from './XtextWebSocketClient'; | ||
12 | import { ConditionVariable } from '../utils/ConditionVariable'; | ||
13 | import { getLogger } from '../utils/logger'; | ||
14 | import { Timer } from '../utils/Timer'; | ||
15 | import { | ||
16 | ContentAssistEntry, | ||
17 | contentAssistResult, | ||
18 | documentStateResult, | ||
19 | formattingResult, | ||
20 | isConflictResult, | ||
21 | } from './xtextServiceResults'; | ||
22 | |||
23 | const UPDATE_TIMEOUT_MS = 500; | ||
24 | |||
25 | const WAIT_FOR_UPDATE_TIMEOUT_MS = 1000; | ||
26 | |||
27 | const log = getLogger('xtext.UpdateService'); | ||
28 | |||
29 | const setDirtyChanges = StateEffect.define<ChangeSet>(); | ||
30 | |||
31 | export interface IAbortSignal { | ||
32 | aborted: boolean; | ||
33 | } | ||
34 | |||
35 | export 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 @@ | |||
1 | import type { Diagnostic } from '@codemirror/lint'; | ||
2 | |||
3 | import type { EditorStore } from '../editor/EditorStore'; | ||
4 | import type { UpdateService } from './UpdateService'; | ||
5 | import { validationResult } from './xtextServiceResults'; | ||
6 | |||
7 | export 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 @@ | |||
1 | import type { | ||
2 | CompletionContext, | ||
3 | CompletionResult, | ||
4 | } from '@codemirror/autocomplete'; | ||
5 | import type { Transaction } from '@codemirror/state'; | ||
6 | |||
7 | import type { EditorStore } from '../editor/EditorStore'; | ||
8 | import { ContentAssistService } from './ContentAssistService'; | ||
9 | import { HighlightingService } from './HighlightingService'; | ||
10 | import { OccurrencesService } from './OccurrencesService'; | ||
11 | import { UpdateService } from './UpdateService'; | ||
12 | import { getLogger } from '../utils/logger'; | ||
13 | import { ValidationService } from './ValidationService'; | ||
14 | import { XtextWebSocketClient } from './XtextWebSocketClient'; | ||
15 | import { XtextWebPushService } from './xtextMessages'; | ||
16 | |||
17 | const log = getLogger('xtext.XtextClient'); | ||
18 | |||
19 | export 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 @@ | |||
1 | import { nanoid } from 'nanoid'; | ||
2 | |||
3 | import { getLogger } from '../utils/logger'; | ||
4 | import { PendingTask } from '../utils/PendingTask'; | ||
5 | import { Timer } from '../utils/Timer'; | ||
6 | import { | ||
7 | xtextWebErrorResponse, | ||
8 | XtextWebRequest, | ||
9 | xtextWebOkResponse, | ||
10 | xtextWebPushMessage, | ||
11 | XtextWebPushService, | ||
12 | } from './xtextMessages'; | ||
13 | import { pongResult } from './xtextServiceResults'; | ||
14 | |||
15 | const XTEXT_SUBPROTOCOL_V1 = 'tools.refinery.language.web.xtext.v1'; | ||
16 | |||
17 | const WEBSOCKET_CLOSE_OK = 1000; | ||
18 | |||
19 | const RECONNECT_DELAY_MS = [200, 1000, 5000, 30_000]; | ||
20 | |||
21 | const MAX_RECONNECT_DELAY_MS = RECONNECT_DELAY_MS[RECONNECT_DELAY_MS.length - 1]; | ||
22 | |||
23 | const BACKGROUND_IDLE_TIMEOUT_MS = 5 * 60 * 1000; | ||
24 | |||
25 | const PING_TIMEOUT_MS = 10 * 1000; | ||
26 | |||
27 | const REQUEST_TIMEOUT_MS = 1000; | ||
28 | |||
29 | const log = getLogger('xtext.XtextWebSocketClient'); | ||
30 | |||
31 | export type ReconnectHandler = () => void; | ||
32 | |||
33 | export type PushHandler = ( | ||
34 | resourceId: string, | ||
35 | stateId: string, | ||
36 | service: XtextWebPushService, | ||
37 | data: unknown, | ||
38 | ) => void; | ||
39 | |||
40 | enum State { | ||
41 | Initial, | ||
42 | Opening, | ||
43 | TabVisible, | ||
44 | TabHiddenIdle, | ||
45 | TabHiddenWaiting, | ||
46 | Error, | ||
47 | TimedOut, | ||
48 | } | ||
49 | |||
50 | export 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 @@ | |||
1 | import { z } from 'zod'; | ||
2 | |||
3 | export const xtextWebRequest = z.object({ | ||
4 | id: z.string().nonempty(), | ||
5 | request: z.unknown(), | ||
6 | }); | ||
7 | |||
8 | export type XtextWebRequest = z.infer<typeof xtextWebRequest>; | ||
9 | |||
10 | export const xtextWebOkResponse = z.object({ | ||
11 | id: z.string().nonempty(), | ||
12 | response: z.unknown(), | ||
13 | }); | ||
14 | |||
15 | export type XtextWebOkResponse = z.infer<typeof xtextWebOkResponse>; | ||
16 | |||
17 | export const xtextWebErrorKind = z.enum(['request', 'server']); | ||
18 | |||
19 | export type XtextWebErrorKind = z.infer<typeof xtextWebErrorKind>; | ||
20 | |||
21 | export const xtextWebErrorResponse = z.object({ | ||
22 | id: z.string().nonempty(), | ||
23 | error: xtextWebErrorKind, | ||
24 | message: z.string(), | ||
25 | }); | ||
26 | |||
27 | export type XtextWebErrorResponse = z.infer<typeof xtextWebErrorResponse>; | ||
28 | |||
29 | export const xtextWebPushService = z.enum(['highlight', 'validate']); | ||
30 | |||
31 | export type XtextWebPushService = z.infer<typeof xtextWebPushService>; | ||
32 | |||
33 | export const xtextWebPushMessage = z.object({ | ||
34 | resource: z.string().nonempty(), | ||
35 | stateId: z.string().nonempty(), | ||
36 | service: xtextWebPushService, | ||
37 | push: z.unknown(), | ||
38 | }); | ||
39 | |||
40 | export 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 @@ | |||
1 | import { z } from 'zod'; | ||
2 | |||
3 | export const pongResult = z.object({ | ||
4 | pong: z.string().nonempty(), | ||
5 | }); | ||
6 | |||
7 | export type PongResult = z.infer<typeof pongResult>; | ||
8 | |||
9 | export const documentStateResult = z.object({ | ||
10 | stateId: z.string().nonempty(), | ||
11 | }); | ||
12 | |||
13 | export type DocumentStateResult = z.infer<typeof documentStateResult>; | ||
14 | |||
15 | export const conflict = z.enum(['invalidStateId', 'canceled']); | ||
16 | |||
17 | export type Conflict = z.infer<typeof conflict>; | ||
18 | |||
19 | export const serviceConflictResult = z.object({ | ||
20 | conflict, | ||
21 | }); | ||
22 | |||
23 | export type ServiceConflictResult = z.infer<typeof serviceConflictResult>; | ||
24 | |||
25 | export function isConflictResult(result: unknown, conflictType: Conflict): boolean { | ||
26 | const parsedConflictResult = serviceConflictResult.safeParse(result); | ||
27 | return parsedConflictResult.success && parsedConflictResult.data.conflict === conflictType; | ||
28 | } | ||
29 | |||
30 | export const severity = z.enum(['error', 'warning', 'info', 'ignore']); | ||
31 | |||
32 | export type Severity = z.infer<typeof severity>; | ||
33 | |||
34 | export 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 | |||
43 | export type Issue = z.infer<typeof issue>; | ||
44 | |||
45 | export const validationResult = z.object({ | ||
46 | issues: issue.array(), | ||
47 | }); | ||
48 | |||
49 | export type ValidationResult = z.infer<typeof validationResult>; | ||
50 | |||
51 | export const replaceRegion = z.object({ | ||
52 | offset: z.number().int().nonnegative(), | ||
53 | length: z.number().int().nonnegative(), | ||
54 | text: z.string(), | ||
55 | }); | ||
56 | |||
57 | export type ReplaceRegion = z.infer<typeof replaceRegion>; | ||
58 | |||
59 | export const textRegion = z.object({ | ||
60 | offset: z.number().int().nonnegative(), | ||
61 | length: z.number().int().nonnegative(), | ||
62 | }); | ||
63 | |||
64 | export type TextRegion = z.infer<typeof textRegion>; | ||
65 | |||
66 | export 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 | |||
78 | export type ContentAssistEntry = z.infer<typeof contentAssistEntry>; | ||
79 | |||
80 | export const contentAssistResult = documentStateResult.extend({ | ||
81 | entries: contentAssistEntry.array(), | ||
82 | }); | ||
83 | |||
84 | export type ContentAssistResult = z.infer<typeof contentAssistResult>; | ||
85 | |||
86 | export const highlightingRegion = z.object({ | ||
87 | offset: z.number().int().nonnegative(), | ||
88 | length: z.number().int().nonnegative(), | ||
89 | styleClasses: z.string().nonempty().array(), | ||
90 | }); | ||
91 | |||
92 | export type HighlightingRegion = z.infer<typeof highlightingRegion>; | ||
93 | |||
94 | export const highlightingResult = z.object({ | ||
95 | regions: highlightingRegion.array(), | ||
96 | }); | ||
97 | |||
98 | export type HighlightingResult = z.infer<typeof highlightingResult>; | ||
99 | |||
100 | export const occurrencesResult = documentStateResult.extend({ | ||
101 | writeRegions: textRegion.array(), | ||
102 | readRegions: textRegion.array(), | ||
103 | }); | ||
104 | |||
105 | export type OccurrencesResult = z.infer<typeof occurrencesResult>; | ||
106 | |||
107 | export const formattingResult = documentStateResult.extend({ | ||
108 | formattedText: z.string(), | ||
109 | replaceRegion: textRegion, | ||
110 | }); | ||
111 | |||
112 | export 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 @@ | |||
1 | const fs = require('fs'); | ||
2 | const path = require('path'); | ||
3 | |||
4 | const { DefinePlugin } = require('webpack'); | ||
5 | const HtmlWebpackPlugin = require('html-webpack-plugin'); | ||
6 | const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload'); | ||
7 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | ||
8 | const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity'); | ||
9 | |||
10 | const packageInfo = require('./package.json'); | ||
11 | |||
12 | const currentNodeEnv = process.env.NODE_ENV || 'development'; | ||
13 | const devMode = currentNodeEnv !== 'production'; | ||
14 | const outputPath = path.resolve(__dirname, 'build/webpack', currentNodeEnv); | ||
15 | |||
16 | function portNumberOrElse (envName, fallback) { | ||
17 | const value = process.env[envName]; | ||
18 | return value ? parseInt(value) : fallback; | ||
19 | } | ||
20 | |||
21 | const listenHost = process.env['LISTEN_HOST'] || 'localhost'; | ||
22 | const listenPort = portNumberOrElse('LISTEN_PORT', 1313); | ||
23 | const apiHost = process.env['API_HOST'] || listenHost; | ||
24 | const apiPort = portNumberOrElse('API_PORT', 1312); | ||
25 | const publicHost = process.env['PUBLIC_HOST'] || listenHost; | ||
26 | const publicPort = portNumberOrElse('PUBLIC_PORT', listenPort); | ||
27 | |||
28 | module.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 | }; | ||