diff --git a/README.md b/README.md index 28481d2..23acb0f 100644 --- a/README.md +++ b/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`. diff --git a/src/babel/core/types.ts b/src/babel/core/types.ts index 5aa7327..6d595a3 100644 --- a/src/babel/core/types.ts +++ b/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[]; diff --git a/src/babel/index.ts b/src/babel/index.ts index 043aeac..4363e1d 100644 --- a/src/babel/index.ts +++ b/src/babel/index.ts @@ -336,6 +336,7 @@ export default function solidRefreshPlugin(): babel.PluginObj { 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 { 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);