SolidJS•3w ago

`vite-plugin-solid` ignores/removes `/** @jsxImportSource ... */` pragma comment

I'm trying to use a custom JSX runtime for a single file using the @jsxImportSource pragma comment. Unfortunately it seems like that the vite-plugin-solid or maybe the babel-plugin-jsx-dom-expressions it uses replaces/ignores/removes these pragmas, so that all JSX functions in the compiled output always call template function from solid-js. If I remove the solid plugin from the vite.config.js file, the custom JSX runtime works correctly, but then I don't know how to get Solid to render correctly. For reference, here is part of the file where I want to treat the JSX as raw XML and render it using the xml-jsx-runtime package.

/** @jsxRuntime automatic */
/** @jsxImportSource xml-jsx-runtime/runtime */

export const XML = () => {
  return (
    <office:document-meta
      xmlns:meta="urn:oasis:names:tc:opendocument:xmlns:meta:1.0"
      office:version="1.3"
    >
      <office:meta>
        <meta:creation-date>2024-06-02T23:54:02.394823826</meta:creation-date>
      </office:meta>
    </office:document-meta>
  );
};

/** @jsxRuntime automatic */
/** @jsxImportSource xml-jsx-runtime/runtime */

export const XML = () => {
  return (
    <office:document-meta
      xmlns:meta="urn:oasis:names:tc:opendocument:xmlns:meta:1.0"
      office:version="1.3"
    >
      <office:meta>
        <meta:creation-date>2024-06-02T23:54:02.394823826</meta:creation-date>
      </office:meta>
    </office:document-meta>
  );
};

Is there anything I can do to have the vite-plugin-solid not override the custom import? Or is there a different way to achieve the goal in Solid? (this way seems to be supported by esbuild, typescript and the @babel/plugin-transform-react-jsx package)

1 Reply

Tim Basel•3w ago

I have found a workaround by suffixing the the files with .xml.tsx and excluding them from the plugin using solid({ exclude: ["**/*.xml.tsx"] }), but I still think Solid should support and respect the pragma comment.

Gaming

Programming

`vite-plugin-solid` ignores/removes `/** @jsxImportSource ... */` pragma comment