Add jsx option

README.md

@@ -216,3 +216,13 @@ You can define custom `render`/`createContext` calls by using the `imports` opti
   ],
 }
 ```
+
+## Other Configs
+
+### Granular Mode
+
+Granular mode for HMR (which allows independent HMR for components and templates) is enabled by default. You can disable this by adding `granular: false`.
+
+### JSX HMR
+
+JSX, by default, is moved to a separate component to perform granular HMR. To disable this, add `jsx: false`.

src/babel/core/types.ts

@@ -16,6 +16,7 @@ export type ImportDefinition = DefaultImportDefinition | NamedImportDefinition;
 
 export interface Options {
   granular?: boolean;
+  jsx?: boolean;
   bundler?: RuntimeType;
   fixRender?: boolean;
   imports?: {
@@ -32,6 +33,7 @@ export interface ImportIdentifierSpecifier {
 }
 
 export interface StateContext {
+  jsx: boolean;
   granular: boolean;
   opts: Options;
   specifiers: ImportIdentifierSpecifier[];

src/babel/index.ts

@@ -336,6 +336,7 @@ export default function solidRefreshPlugin(): babel.PluginObj<State> {
     visitor: {
       Program(programPath, context) {
         const state: StateContext = {
+          jsx: context.opts.jsx ?? true,
           granular: context.opts.granular ?? true,
           opts: context.opts,
           specifiers: [...IMPORT_SPECIFIERS],
@@ -356,14 +357,16 @@ export default function solidRefreshPlugin(): babel.PluginObj<State> {
             bubbleFunctionDeclaration(programPath, path);
           },
         });
-        programPath.traverse({
-          JSXElement(path) {
-            transformJSX(path);
-          },
-          JSXFragment(path) {
-            transformJSX(path);
-          },
-        });
+        if (state.jsx) {
+          programPath.traverse({
+            JSXElement(path) {
+              transformJSX(path);
+            },
+            JSXFragment(path) {
+              transformJSX(path);
+            },
+          });
+        }
         programPath.traverse({
           VariableDeclarator(path) {
             transformVariableDeclarator(state, path);