|
6 | 6 | */
|
7 | 7 |
|
8 | 8 | import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
|
9 |
| -import {parseConfigPragmaAsString} from 'babel-plugin-react-compiler'; |
10 | 9 | import type {editor} from 'monaco-editor';
|
11 | 10 | import * as monaco from 'monaco-editor';
|
12 |
| -import parserBabel from 'prettier/plugins/babel'; |
13 |
| -import * as prettierPluginEstree from 'prettier/plugins/estree'; |
14 |
| -import * as prettier from 'prettier/standalone'; |
15 |
| -import {useState, useEffect} from 'react'; |
| 11 | +import {useState} from 'react'; |
16 | 12 | import {Resizable} from 're-resizable';
|
17 |
| -import {useStore} from '../StoreContext'; |
| 13 | +import {useStore, useStoreDispatch} from '../StoreContext'; |
18 | 14 | import {monacoOptions} from './monacoOptions';
|
| 15 | +import { |
| 16 | + generateOverridePragmaFromConfig, |
| 17 | + updateSourceWithOverridePragma, |
| 18 | +} from '../../lib/configUtils'; |
19 | 19 |
|
20 | 20 | loader.config({monaco});
|
21 | 21 |
|
22 | 22 | export default function ConfigEditor(): JSX.Element {
|
23 | 23 | const [, setMonaco] = useState<Monaco | null>(null);
|
24 | 24 | const store = useStore();
|
| 25 | + const dispatchStore = useStoreDispatch(); |
25 | 26 |
|
26 |
| - // Parse string-based override config from pragma comment and format it |
27 |
| - const [configJavaScript, setConfigJavaScript] = useState(''); |
| 27 | + const handleChange: (value: string | undefined) => void = async value => { |
| 28 | + if (value === undefined) return; |
28 | 29 |
|
29 |
| - useEffect(() => { |
30 |
| - const pragma = store.source.substring(0, store.source.indexOf('\n')); |
31 |
| - const configString = `(${parseConfigPragmaAsString(pragma)})`; |
| 30 | + try { |
| 31 | + const newPragma = await generateOverridePragmaFromConfig(value); |
| 32 | + const updatedSource = updateSourceWithOverridePragma( |
| 33 | + store.source, |
| 34 | + newPragma, |
| 35 | + ); |
32 | 36 |
|
33 |
| - prettier |
34 |
| - .format(configString, { |
35 |
| - semi: true, |
36 |
| - parser: 'babel-ts', |
37 |
| - plugins: [parserBabel, prettierPluginEstree], |
38 |
| - }) |
39 |
| - .then(formatted => { |
40 |
| - setConfigJavaScript(formatted); |
41 |
| - }) |
42 |
| - .catch(error => { |
43 |
| - console.error('Error formatting config:', error); |
44 |
| - setConfigJavaScript('({})'); // Return empty object if not valid for now |
45 |
| - //TODO: Add validation and error handling for config |
| 37 | + // Update the store with both the new config and updated source |
| 38 | + dispatchStore({ |
| 39 | + type: 'updateFile', |
| 40 | + payload: { |
| 41 | + source: updatedSource, |
| 42 | + config: value, |
| 43 | + }, |
46 | 44 | });
|
47 |
| - console.log('Config:', configString); |
48 |
| - }, [store.source]); |
49 |
| - |
50 |
| - const handleChange: (value: string | undefined) => void = value => { |
51 |
| - if (!value) return; |
52 |
| - |
53 |
| - // TODO: Implement sync logic to update pragma comments in the source |
54 |
| - console.log('Config changed:', value); |
| 45 | + } catch (_) { |
| 46 | + dispatchStore({ |
| 47 | + type: 'updateFile', |
| 48 | + payload: { |
| 49 | + source: store.source, |
| 50 | + config: value, |
| 51 | + }, |
| 52 | + }); |
| 53 | + } |
55 | 54 | };
|
56 | 55 |
|
57 | 56 | const handleMount: (
|
@@ -81,12 +80,11 @@ export default function ConfigEditor(): JSX.Element {
|
81 | 80 | <MonacoEditor
|
82 | 81 | path={'config.js'}
|
83 | 82 | language={'javascript'}
|
84 |
| - value={configJavaScript} |
| 83 | + value={store.config} |
85 | 84 | onMount={handleMount}
|
86 | 85 | onChange={handleChange}
|
87 | 86 | options={{
|
88 | 87 | ...monacoOptions,
|
89 |
| - readOnly: true, |
90 | 88 | lineNumbers: 'off',
|
91 | 89 | folding: false,
|
92 | 90 | renderLineHighlight: 'none',
|
|
0 commit comments