From df3618107d83c6e81bc4ce0377a4623594a4f3d7 Mon Sep 17 00:00:00 2001 From: wuls Date: Thu, 14 Sep 2023 19:39:32 +0800 Subject: [PATCH 1/7] fix --- packages/toolpad-app/src/server/localMode.ts | 8 ++++++- packages/toolpad-app/src/server/rpcServer.ts | 3 +++ .../src/toolpad/AppEditor/BindingEditor.tsx | 16 +++++++++---- packages/toolpad-app/src/utils/prettier.ts | 23 +++++++++++++++---- 4 files changed, 41 insertions(+), 9 deletions(-) diff --git a/packages/toolpad-app/src/server/localMode.ts b/packages/toolpad-app/src/server/localMode.ts index 1c4c98c42a8..459f4af150e 100644 --- a/packages/toolpad-app/src/server/localMode.ts +++ b/packages/toolpad-app/src/server/localMode.ts @@ -39,7 +39,7 @@ import { themeSchema, API_VERSION, } from './schema'; -import { format } from '../utils/prettier'; +import { format, resolvePrettierConfig } from '../utils/prettier'; import { Body as AppDomFetchBody, FetchQuery, @@ -1190,6 +1190,12 @@ class ToolpadProject { await fs.rm(pageFolder, { force: true, recursive: true }); } + async getPrettierConfig() { + const root = this.getRoot(); + const config = await resolvePrettierConfig(root); + return config; + } + getRuntimeConfig(): RuntimeConfig { return { externalUrl: diff --git a/packages/toolpad-app/src/server/rpcServer.ts b/packages/toolpad-app/src/server/rpcServer.ts index d0370865ebb..c632fd5d428 100644 --- a/packages/toolpad-app/src/server/rpcServer.ts +++ b/packages/toolpad-app/src/server/rpcServer.ts @@ -19,6 +19,9 @@ export function createRpcServer(project: ToolpadProject) { getVersionInfo: createMethod(({ params }) => { return project.getVersionInfo(...params); }), + getPrettierConfig: createMethod(({ params }) => { + return project.getPrettierConfig(...params); + }), }, mutation: { saveDom: createMethod(({ params }) => { diff --git a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx index 288f450c4ca..39032598157 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx @@ -54,6 +54,8 @@ import { useDom } from '../AppState'; import * as appDom from '../../appDom'; import { getBindingType, getBindingValue } from '../../bindings'; +import client from '../../api'; + // eslint-disable-next-line import/no-cycle import BindableEditor from './PageEditor/BindableEditor'; @@ -492,6 +494,7 @@ export function BindingEditorDialog({ open, onClose, }: BindingEditorDialogProps) { + const { data } = client.useQuery('getPrettierConfig', []); const { propType, label } = useBindingEditorContext(); const [input, setInput] = React.useState(value); @@ -501,18 +504,22 @@ export function BindingEditorDialog({ const committedInput = React.useRef | null>(input); - const handleSave = React.useCallback(() => { + const handleSave = React.useCallback(async () => { let newValue = input; if ((input as JsExpressionAttrValue)?.$$jsExpression) { + const jsExpression = await tryFormatExpression( + (input as JsExpressionAttrValue).$$jsExpression, + data!, + ); newValue = { - $$jsExpression: tryFormatExpression((input as JsExpressionAttrValue).$$jsExpression), + $$jsExpression: jsExpression, }; } committedInput.current = newValue; onChange(newValue); - }, [onChange, input]); + }, [onChange, input, data]); const hasUnsavedChanges = input ? getBindingType(input) !== @@ -611,7 +618,8 @@ export function BindingEditor({ envVarNames, }: BindingEditorProps) { const [open, setOpen] = React.useState(false); - + // const { data } = client.useQuery('getPrettierConfig', []); + // console.log(data, '.>>>>'); const handleOpen = React.useCallback(() => setOpen(true), []); const handleClose = React.useCallback(() => setOpen(false), []); diff --git a/packages/toolpad-app/src/utils/prettier.ts b/packages/toolpad-app/src/utils/prettier.ts index 5cfdf713ec8..0d31d11b8e6 100644 --- a/packages/toolpad-app/src/utils/prettier.ts +++ b/packages/toolpad-app/src/utils/prettier.ts @@ -6,11 +6,19 @@ const DEFAULT_OPTIONS = { plugins: [parserBabel], }; +/** + * get prettier config file + */ +export async function resolvePrettierConfig(filePath: string) { + const config = await prettier.resolveConfig(filePath); + return config; +} + /** * Formats a javascript source with `prettier`. */ export async function format(code: string, filePath: string): Promise { - const readConfig = await prettier.resolveConfig(filePath); + const readConfig = await resolvePrettierConfig(filePath); return prettier.format(code, { ...readConfig, ...DEFAULT_OPTIONS, @@ -20,8 +28,12 @@ export async function format(code: string, filePath: string): Promise { /** * Formats a javascript expression with `prettier`. */ -export function formatExpression(code: string): string { +export async function formatExpression( + code: string, + config?: prettier.Options | null, +): Promise { const formatted = prettier.format(code, { + ...config, ...DEFAULT_OPTIONS, semi: false, }); @@ -34,9 +46,12 @@ export function formatExpression(code: string): string { /** * Formats a javascript expression with `prettier`, if it's valid. */ -export function tryFormatExpression(code: string): string { +export async function tryFormatExpression( + code: string, + config?: prettier.Options, +): Promise { try { - return formatExpression(code); + return formatExpression(code, config); } catch (err) { return code; } From 21bdcbc0a757b8701d294bc22ac457e752f10069 Mon Sep 17 00:00:00 2001 From: wuls Date: Thu, 14 Sep 2023 19:48:31 +0800 Subject: [PATCH 2/7] delete code --- packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx index 39032598157..3dcf6e2faf5 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx @@ -618,8 +618,6 @@ export function BindingEditor({ envVarNames, }: BindingEditorProps) { const [open, setOpen] = React.useState(false); - // const { data } = client.useQuery('getPrettierConfig', []); - // console.log(data, '.>>>>'); const handleOpen = React.useCallback(() => setOpen(true), []); const handleClose = React.useCallback(() => setOpen(false), []); From 5b393f5bec4dfbbcc6ad39a23c25e2b667f1985c Mon Sep 17 00:00:00 2001 From: wuls Date: Mon, 25 Sep 2023 15:00:37 +0800 Subject: [PATCH 3/7] text --- .../src/toolpad/AppEditor/BindingEditor.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx index afb529b8034..b8aa5c09fb7 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx @@ -223,7 +223,6 @@ export function ValueBindingEditor({ value, onChange }: ValueBindingEditorProps) Make the "{label}" property dynamic with a JavaScript expression. This property expects a type: {propType?.type || 'any'}. - - + + + The prettier config could not be loaded and therefore the code would not be formatted + + From bd25f0fa3bba33c72d17ad4e286b19856bae50dd Mon Sep 17 00:00:00 2001 From: wuls Date: Mon, 25 Sep 2023 16:49:00 +0800 Subject: [PATCH 4/7] add tips for error --- .../src/toolpad/AppEditor/BindingEditor.tsx | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx index b8aa5c09fb7..9800a6fbe9a 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx @@ -183,9 +183,11 @@ function getValueBindingTab(value: Maybe>) { } export interface ValueBindingEditorProps - extends WithControlledProp {} + extends WithControlledProp { + error: boolean; +} -export function ValueBindingEditor({ value, onChange }: ValueBindingEditorProps) { +export function ValueBindingEditor({ value, onChange, error }: ValueBindingEditorProps) { const { label, globalScope, @@ -205,7 +207,7 @@ export function ValueBindingEditor({ value, onChange }: ValueBindingEditorProps) const handleTabChange = (event: React.SyntheticEvent, newValue: BindableType) => { setActiveTab(newValue); }; - + console.log(error, '>>>>'); const jsExpressionBindingEditor = ( @@ -233,15 +235,18 @@ export function ValueBindingEditor({ value, onChange }: ValueBindingEditorProps) } onChange={onChange} /> - - - The prettier config could not be loaded and therefore the code would not be formatted - - + {error ? ( + + + Error while reading the prettier configuration: The prettier config could not be + loaded and therefore the code would not be formatted + + + ) : null} @@ -572,6 +577,7 @@ export function BindingEditorDialog({ setInput(newValue)} /> ) : ( Date: Mon, 25 Sep 2023 17:31:34 +0800 Subject: [PATCH 5/7] fix --- packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx index 9800a6fbe9a..5211b12e019 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx @@ -207,7 +207,6 @@ export function ValueBindingEditor({ value, onChange, error }: ValueBindingEdito const handleTabChange = (event: React.SyntheticEvent, newValue: BindableType) => { setActiveTab(newValue); }; - console.log(error, '>>>>'); const jsExpressionBindingEditor = ( From 94d9205f36e78490ffc40a7e6d7ccf23f1fc44c5 Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 27 Sep 2023 16:47:35 +0800 Subject: [PATCH 6/7] fix --- .../src/toolpad/AppEditor/BindingEditor.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx index 5211b12e019..8120fd6dbef 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx @@ -184,7 +184,7 @@ function getValueBindingTab(value: Maybe>) { export interface ValueBindingEditorProps extends WithControlledProp { - error: boolean; + error: unknown; } export function ValueBindingEditor({ value, onChange, error }: ValueBindingEditorProps) { @@ -241,8 +241,9 @@ export function ValueBindingEditor({ value, onChange, error }: ValueBindingEdito }} > - Error while reading the prettier configuration: The prettier config could not be - loaded and therefore the code would not be formatted + Error while reading the prettier configuration: + {(error as string) ?? + 'The prettier config could not be loaded and therefore the code would not be formatted'} ) : null} @@ -505,7 +506,7 @@ export function BindingEditorDialog({ open, onClose, }: BindingEditorDialogProps) { - const { data } = client.useQuery('getPrettierConfig', []); + const { error, data } = client.useQuery('getPrettierConfig', []); const { propType, label } = useBindingEditorContext(); const [input, setInput] = React.useState(value); @@ -576,7 +577,7 @@ export function BindingEditorDialog({ setInput(newValue)} /> ) : ( Date: Sun, 1 Oct 2023 19:05:03 +0800 Subject: [PATCH 7/7] error --- packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx index 8120fd6dbef..4c4075eb7d9 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx @@ -37,6 +37,7 @@ import { import { createProvidedContext } from '@mui/toolpad-utils/react'; import { TabContext, TabList } from '@mui/lab'; import useDebounced from '@mui/toolpad-utils/hooks/useDebounced'; +import { errorFrom } from '@mui/toolpad-utils/errors'; import { JsExpressionEditor } from './PageEditor/JsExpressionEditor'; import JsonView from '../../components/JsonView'; import useLatest from '../../utils/useLatest'; @@ -242,7 +243,7 @@ export function ValueBindingEditor({ value, onChange, error }: ValueBindingEdito > Error while reading the prettier configuration: - {(error as string) ?? + {errorFrom(error).message ?? 'The prettier config could not be loaded and therefore the code would not be formatted'}