fix(hmr): use dispose global module and add checks for babel plugin (#5)

Author: matinzd

src/react-native/preview-registry.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from "react";
-import { Metadata, MetroModule, Preview } from "../shared/types";
+import { Metadata, Module, Preview } from "../shared/types";
 import { createSignalMap } from "../utils/signal-map";
 import { client } from "./setup-plugin";
 
@@ -17,15 +17,18 @@ export function getPreviewComponents(): Preview[] {
 }
 
 export function getComponentByName(name: string) {
-  return flattenRegistryEntries().find((entry) => entry.name === name)?.component || null;
+  return (
+    flattenRegistryEntries().find((entry) => entry.name === name)?.component ||
+    null
+  );
 }
 
 /**
  *
  * @internal
  */
 const __registerPreviewInternal = (
-  module: MetroModule,
+  module: Module,
   name: string,
   component: ComponentType,
   metadata?: Metadata
@@ -36,26 +39,23 @@ const __registerPreviewInternal = (
     module.id === undefined
   ) {
     console.warn(
-      `Cannot register preview "${name}" in production or in non Metro environment.`
+      `[Rozenite Preview Plugin] Cannot register preview "${name}" in production or in non Metro environment.`
     );
     return;
   }
 
   if (metadata?.isInsideReactComponent) {
     console.error(
-      'Do not call "registerPreview" inside a React lifecycle. Use it at the top level of your module.'
+      '[Rozenite Preview Plugin] Do not call "registerPreview" inside a React lifecycle. Use it at the top level of your module.'
     );
     return;
   }
 
   let moduleId = module.id;
 
-  const originalDisposeCallback = module.hot._disposeCallback;
-
-  module.hot._disposeCallback = () => {
-    originalDisposeCallback?.();
+  module.hot.dispose(() => {
     registry.delete(moduleId);
-  };
+  });
 
   const current = registry.get(module.id) || [];
 
@@ -73,8 +73,16 @@ const __registerPreviewInternal = (
  * @param name Preview name
  * @param component React component
  */
-export function registerPreview(name: string, component: React.ComponentType) {  
+export function registerPreview(name: string, component: React.ComponentType) {
+  if (arguments.length !== 4) {
+    console.warn("[Rozenite Preview Plugin] Babel plugin is not configured correctly. This will result in a broken preview.");
+    return;
+  }
+
   __registerPreviewInternal(
-    ...(arguments as unknown as [MetroModule, string, ComponentType, Metadata])
+    arguments[0] as Module,
+    arguments[1] as string,
+    arguments[2] as React.ComponentType,
+    arguments[3] as Metadata
   );
 }

src/shared/types.ts

@@ -33,8 +33,9 @@ type ModuleID = number;
 
 type Exports = any;
 
-// Ref: https://github.com/facebook/metro/blob/a81c99cf103be00181aa635fef94c6e3385a47bb/packages/metro-runtime/src/polyfills/require.js#L51
-export type MetroModule = {
+// Ref Metro: https://github.com/facebook/metro/blob/a81c99cf103be00181aa635fef94c6e3385a47bb/packages/metro-runtime/src/polyfills/require.js#L51
+// Ref RsPack: https://rspack.rs/api/runtime-api/hmr#dispose-or-adddisposehandler
+export type Module = {
   id?: ModuleID;
   exports: Exports;
   hot?: HotModuleReloadingData;