format IDE code

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,
@@ -1199,6 +1199,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: this.options.externalUrl,

packages/toolpad-app/src/server/rpcServer.ts

@@ -19,6 +19,9 @@ export function createRpcServer(project: ToolpadProject) {
  getVersionInfo: createMethod<typeof project.getVersionInfo>(({ params }) => {
  return project.getVersionInfo(...params);
  }),
+ getPrettierConfig: createMethod<typeof project.getPrettierConfig>(({ params }) => {
+ return project.getPrettierConfig(...params);
+ }),
  },
  mutation: {
  saveDom: createMethod<typeof project.saveDom>(({ params }) => {

packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx

@@ -54,6 +54,8 @@ import { useAppState } 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';
 
@@ -181,9 +183,11 @@ function getValueBindingTab(value: Maybe<BindableAttrValue<any>>) {
 }
 
 export interface ValueBindingEditorProps
- extends WithControlledProp<JsExpressionAttrValue | EnvAttrValue | null> {}
+ extends WithControlledProp<JsExpressionAttrValue | EnvAttrValue | null> {
+ error: unknown;
+}
 
-export function ValueBindingEditor({ value, onChange }: ValueBindingEditorProps) {
+export function ValueBindingEditor({ value, onChange, error }: ValueBindingEditorProps) {
  const {
  label,
  globalScope,
@@ -203,7 +207,6 @@ export function ValueBindingEditor({ value, onChange }: ValueBindingEditorProps)
  const handleTabChange = (event: React.SyntheticEvent, newValue: BindableType) => {
  setActiveTab(newValue);
  };
-
  const jsExpressionBindingEditor = (
  <Stack direction="row" sx={{ height: 400, gap: 2, my: hasEnv ? 3 : 0 }}>
  <GlobalScopeExplorer sx={{ width: 250 }} value={globalScope} meta={globalScopeMeta} />
@@ -221,7 +224,6 @@ export function ValueBindingEditor({ value, onChange }: ValueBindingEditorProps)
  Make the &quot;{label}&quot; property dynamic with a JavaScript expression. This property
  expects a type: <code>{propType?.type || 'any'}</code>.
  </Typography>
-
  <JsExpressionBindingEditor
  globalScope={globalScope}
  globalScopeMeta={globalScopeMeta}
@@ -232,7 +234,19 @@ export function ValueBindingEditor({ value, onChange }: ValueBindingEditorProps)
  }
  onChange={onChange}
  />
-
+ {error ? (
+ <Box
+ sx={{
+ marginTop: '20px',
+ }}
+ >
+ <Typography sx={{ mb: 2, color: 'red' }}>
+ Error while reading the prettier configuration:
+ {(error as string) ??
+ 'The prettier config could not be loaded and therefore the code would not be formatted'}
+ </Typography>
+ </Box>
+ ) : null}
  <JsExpressionPreview jsRuntime={jsRuntime} input={value} globalScope={globalScope} />
  </Box>
  </Stack>
@@ -492,6 +506,7 @@ export function BindingEditorDialog<V>({
  open,
  onClose,
 }: BindingEditorDialogProps<V>) {
+ const { error, data } = client.useQuery('getPrettierConfig', []);
  const { propType, label } = useBindingEditorContext();
 
  const [input, setInput] = React.useState(value);
@@ -501,18 +516,22 @@ export function BindingEditorDialog<V>({
 
  const committedInput = React.useRef<BindableAttrValue<V> | 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) !==
@@ -558,6 +577,7 @@ export function BindingEditorDialog<V>({
  <ActionEditor value={input} onChange={(newValue) => setInput(newValue)} />
  ) : (
  <ValueBindingEditor
+ error={error}
  value={
  (input as JsExpressionAttrValue)?.$$jsExpression || (input as EnvAttrValue)?.$$env
  ? (input as JsExpressionAttrValue | EnvAttrValue)
@@ -611,7 +631,6 @@ export function BindingEditor<V>({
  envVarNames,
 }: BindingEditorProps<V>) {
  const [open, setOpen] = React.useState(false);
-
  const handleOpen = React.useCallback(() => setOpen(true), []);
  const handleClose = React.useCallback(() => setOpen(false), []);
 

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<string> {
- 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<string> {
 /**
  * Formats a javascript expression with `prettier`.
  */
-export function formatExpression(code: string): string {
+export async function formatExpression(
+ code: string,
+ config?: prettier.Options | null,
+): Promise<string> {
  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<string> {
  try {
- return formatExpression(code);
+ return formatExpression(code, config);
  } catch (err) {
  return code;
  }