Make sure to define a _jsxFilename for custom components (#1306)

mui · Nov 8, 2022 · ffba527 · ffba527
1 parent 5b88975
commit ffba527
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 12 deletions.
diff --git a/packages/toolpad-app/src/runtime/AppModulesProvider.tsx b/packages/toolpad-app/src/runtime/AppModulesProvider.tsx
@@ -46,7 +46,7 @@ export function AppModulesProvider({ dom, children }: AppModulesProviderProps) {
 
     if (content) {
       if (!fromCache) {
-        const createPromise = loadModule(content).then(
+        const createPromise = loadModule(content, id).then(
           (module: unknown) => {
             cache.set(cacheId, {
               state: 'loaded',

diff --git a/packages/toolpad-app/src/runtime/loadCodeComponent.tsx b/packages/toolpad-app/src/runtime/loadCodeComponent.tsx
@@ -16,8 +16,11 @@ export function ensureToolpadComponent<P>(Component: unknown): ToolpadComponent<
   return createComponent(Component);
 }
 
-export default async function loadCodeComponent(src: string): Promise<ToolpadComponent> {
-  const { default: Component } = await loadModule(src);
+export default async function loadCodeComponent(
+  src: string,
+  filename: string,
+): Promise<ToolpadComponent> {
+  const { default: Component } = await loadModule(src, filename);
 
   if (!ReactIs.isValidElementType(Component) || typeof Component === 'string') {
     throw new Error(`No React Component exported.`);

diff --git a/packages/toolpad-app/src/runtime/loadModule.tsx b/packages/toolpad-app/src/runtime/loadModule.tsx
@@ -49,14 +49,15 @@ async function createRequire(urlImports: string[]) {
   return require;
 }
 
-export default async function loadModule(src: string): Promise<any> {
+export default async function loadModule(src: string, filename: string): Promise<any> {
   const imports = findImports(src).filter((maybeUrl) => isAbsoluteUrl(maybeUrl));
 
   let compiled: TransformResult;
 
   try {
     compiled = transform(src, {
       transforms: ['jsx', 'typescript', 'imports'],
+      jsxRuntime: 'classic',
     });
   } catch (rawError) {
     const err = errorFrom(rawError);
@@ -77,10 +78,11 @@ export default async function loadModule(src: string): Promise<any> {
   };
 
   const instantiateModuleCode = `
-        (${Object.keys(globals).join(', ')}) => {
-          ${compiled.code}
-        }
-      `;
+    const _jsxFileName = ${JSON.stringify(filename)};
+    (${Object.keys(globals).join(', ')}) => {
+      ${compiled.code}
+    }
+  `;
 
   // eslint-disable-next-line no-eval
   const instantiateModule = (0, eval)(instantiateModuleCode);

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/CodeComponentEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/CodeComponentEditor/index.tsx
@@ -175,7 +175,10 @@ function CodeComponentEditorContent({ codeComponentNode }: CodeComponentEditorCo
   const frameDocument = frameRef.current?.contentDocument;
 
   const debouncedInput = useDebounced(input.attributes.code.value, 250);
-  const { Component: GeneratedComponent, error: compileError } = useCodeComponent(debouncedInput);
+  const { Component: GeneratedComponent, error: compileError } = useCodeComponent(
+    debouncedInput,
+    `/components/${codeComponentNode.name}`,
+  );
   const CodeComponent: ToolpadComponent<any> = useLatest(GeneratedComponent) || Noop;
 
   const { argTypes = {} } = CodeComponent[TOOLPAD_COMPONENT];

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/CodeComponentEditor/useCodeComponent.tsx b/packages/toolpad-app/src/toolpad/AppEditor/CodeComponentEditor/useCodeComponent.tsx
@@ -16,7 +16,7 @@ export type UseCodeComponent =
       error: Error;
     };
 
-export default function useCodeComponent(src: string | null): UseCodeComponent {
+export default function useCodeComponent(src: string | null, filename: string): UseCodeComponent {
   const [state, setState] = React.useState<UseCodeComponent>({});
 
   React.useEffect(() => {
@@ -25,7 +25,7 @@ export default function useCodeComponent(src: string | null): UseCodeComponent {
     }
 
     const startSrc = src;
-    loadCodeComponent(startSrc)
+    loadCodeComponent(startSrc, filename)
       .then((Component) => {
         if (startSrc === src) {
           setState({ Component });
@@ -36,7 +36,7 @@ export default function useCodeComponent(src: string | null): UseCodeComponent {
           setState({ error });
         }
       });
-  }, [src]);
+  }, [src, filename]);
 
   return state;
 }