✨ auto. hmr

playground/src/main.tsx

@@ -2,16 +2,5 @@ import { render } from "solid-js/dom";
 
 const App = () => <h1>Hello world!!!</h1>;
 
-const rootEl = document.getElementById("app");
-const dispose = render(() => App, rootEl);
-
-// HMR stuff, this will be automatically removed during build
-// /!\ You need to add "vite" in the "compilerOptions.types" of your tsconfig.json
-// if you want to avoid type errors here
-if (import.meta.hot) {
-  import.meta.hot.accept();
-  import.meta.hot.dispose(() => {
-    dispose();
-    rootEl.textContent = "";
-  });
-}
+export const rootEl = document.getElementById("app");
+export const dispose = render(() => App, rootEl);

playground/vite.config.ts

@@ -5,10 +5,6 @@ const config: UserConfig = {
   root: "src",
   outDir: "dist",
   plugins: [solidPlugin()],
-  // Vite and Esbuild being opinionated about how to manage JSX,
-  // you need to disable it to prevent extra stuff going in your bundle
-  // Luckily, vite is still quite fast even skipping Esbuild
-  enableEsbuild: false,
 };
 
 export default config;

src/plugin.ts

@@ -4,6 +4,7 @@ import {
   RollupBabelInputPluginOptions,
 } from "@rollup/plugin-babel";
 import { transformFileAsync, TransformOptions } from "@babel/core";
+import dd from "dedent";
 
 export function solidPlugin(options?: SolidPluginOptions): Plugin {
   const babel = options?.babel ?? {};
@@ -52,7 +53,7 @@ export function solidPlugin(options?: SolidPluginOptions): Plugin {
           // If the transformation is successful, return it as as js content
           if (result) {
             ctx.type = "js";
-            ctx.body = result.code;
+            ctx.body = addHMR(result.code);
             ctx.map = result.map;
             return;
           }
@@ -62,9 +63,27 @@ export function solidPlugin(options?: SolidPluginOptions): Plugin {
         await next();
       });
     },
+    enableRollupPluginVue: false,
   };
 }
 
+function addHMR(code: string) {
+  if (!code.includes(`const dispose`)) return code;
+  if (!code.includes(`const rootEl`)) return code;
+
+  return dd`
+    ${code}
+
+    if (import.meta.hot) {
+      import.meta.hot.accept();
+      import.meta.hot.dispose(() => {
+        dispose();
+        rootEl.textContent = "";
+      });
+    }
+  `;
+}
+
 export default solidPlugin;
 
 // TYPES