native-document 1.0.280 → 1.0.282

package/devtools/ComponentRegistry.js

@@ -85,7 +85,9 @@ const ComponentRegistry = (function() {
                     version: 0,
                 });
             }
-            return wrapper(id, factory, metadata, registry.get(id));
+            const factoryWrapper = wrapper(id, factory, metadata, registry.get(id));
+            factoryWrapper.originalFactory = factory;
+            return factoryWrapper;
         },
         update(id, newFactory, globalId) {
             const component = registry.get(id);
@@ -99,6 +101,9 @@ const ComponentRegistry = (function() {
                 DebugManager.log('[HMR] Updating factory is not a function : ', newFactory);
                 return;
             }
+            if(oldFactory.originalFactory?.toString() === newFactory.originalFactory?.toString()) {
+                return;
+            }
             component.factory = newFactory;
             component.version++;
             const instances = Array.from(component.instances);
@@ -125,7 +130,15 @@ const ComponentRegistry = (function() {
             }
             timers.push({ timerId, cleaner });
         },
-        cleanTimer(id) {
+        cleanTimer(id, newFactory) {
+            const component = registry.get(id);
+            if(!component) {
+                DebugManager.warn(`[HMR] Component ${id} not found`);
+                return;
+            }
+            if(component.factory.originalFactory?.toString() === newFactory.originalFactory?.toString()) {
+                return;
+            }
             const timers = timerRegistry.get(id);
             if (!timers) {
                 return;

package/devtools/nd-vite-devtools.js

@@ -6,8 +6,8 @@ import transformNdForHrm from './src/transformers/transformNdForHrm.js';
 
 export default function NdViteDevtools(options) {
     const {
-        include = /\.nd\.js$/,
-        includeCustomFile = /\.nd\.js$/,
+        include = /\.js$/,
+        includeNdFile = /\.nd\.js$/,
         preserveState = true,
     } = options;
 
@@ -49,7 +49,7 @@ export default function NdViteDevtools(options) {
                 return null;
             }
 
-            if (includeCustomFile.test(id)) {
+            if (includeNdFile.test(id)) {
                 try {
                     return transformNdForHrm(code, id, { preserveState, ...options });
                 } catch (error) {

package/devtools/src/templates/hrm.hook.template.js

@@ -1,6 +1,49 @@
 
 if (import.meta.hot) {
     const componentIds = ${componentIds};
+
+    const cleanTimers = (newModule) => {
+        console.log('[HMR Browser] Calling ComponentRegistry.update()');
+        try {
+            let defaultId = '${id}';
+            for(const component of componentIds) {
+                if(newModule[component.name]) {
+                    ComponentRegistry.cleanTimer(component.id, newModule[component.name]);
+                }
+                if(component.isDefault) {
+                    defaultId = component.id;
+                }
+            }
+            if(newModule.default) {
+                ComponentRegistry.cleanTimer(defaultId, newModule.default)
+            }
+            console.log('[HMR Browser] ✓ Clean timer successful');
+        } catch (error) {
+            console.error('[HMR Browser] ✗ Clean timers failed:', error);
+        }
+    };
+
+
+    const updateComponents = (newModule) => {
+        try {
+            let defaultId = '${id}';
+            for(const component of componentIds) {
+                if(newModule[component.name]) {
+                    ComponentRegistry.update(component.id, newModule[component.name], '${id}');
+                }
+                if(component.isDefault) {
+                    defaultId = component.id;
+                }
+            }
+            if(newModule.default) {
+                ComponentRegistry.update(defaultId, newModule.default, '${id}');
+            }
+            // console.log('[HMR Browser] ✓ Update successful');
+        } catch (error) {
+            console.error('[HMR Browser] ✗ Update failed:', error);
+        }
+    };
+
     import.meta.hot.accept((newModule) => {
         // console.log('[HMR Browser] Update accepted for ${id}');
 
@@ -22,32 +65,9 @@ if (import.meta.hot) {
             // console.error('[HMR Browser] ComponentRegistry not found!');
             return;
         }
+        cleanTimers(newModule);
+        updateComponents(newModule);
 
-        console.log('[HMR Browser] Calling ComponentRegistry.update()');
-        try {
-            for(const componentId of componentIds) {
-                ComponentRegistry.cleanTimer(componentId);
-            }
-            ComponentRegistry.cleanTimer('${id}')
-            console.log('[HMR Browser] ✓ Clean timer successful');
-        } catch (error) {
-            console.error('[HMR Browser] ✗ Clean timers failed:', error);
-        }
-        try {
-            for(const componentId of componentIds) {
-                ComponentRegistry.cleanTimer(componentId);
-            }
-            ComponentRegistry.cleanTimer('${id}')
-
-            for(const componentId of componentIds) {
-                // console.log('[HMR Browser] ComponentId : '+componentId);
-                ComponentRegistry.update(componentId, newModule.default, '${id}');
-            }
-            ComponentRegistry.update('${id}', newModule.default, '${id}');
-            // console.log('[HMR Browser] ✓ Update successful');
-        } catch (error) {
-            console.error('[HMR Browser] ✗ Update failed:', error);
-        }
     });
 
     import.meta.hot.on('vite:error', (payload) => {

package/devtools/src/transformers/transformForHrm.js

@@ -32,16 +32,22 @@ export default function transformForHrm(code, id, options = {}) {
                 return;
             }
             const fnName = path.node.id.name;
+            let isDefaultExport = path.parent.type === 'ExportDefaultDeclaration';
             if(!/^[A-Z]/.test(fnName)) {
                 return;
             }
             const componentId = `${id}::${fnName}`;
-            componentIds.push(componentId);
+            const componentDetails = {
+                id: componentId,
+                name: fnName,
+                isDefault: false
+            };
+            componentIds.push(componentDetails);
 
             const wrappedCall = t.callExpression(
                 t.memberExpression(
                     t.identifier('ComponentRegistry'),
-                    t.identifier('register')
+                    t.identifier('register'),
                 ),
                 [
                     t.stringLiteral(componentId),
@@ -50,11 +56,12 @@ export default function transformForHrm(code, id, options = {}) {
                         path.node.params,
                         path.node.body,
                     ),
-                ]
+                ],
             );
 
             // Cas — export default function HomePage() {}
             if(path.parent.type === 'ExportDefaultDeclaration') {
+                componentDetails.isDefault = true;
                 const varDeclaration = t.variableDeclaration('const', [
                     t.variableDeclarator(t.identifier(fnName), wrappedCall),
                 ]);
@@ -82,6 +89,7 @@ export default function transformForHrm(code, id, options = {}) {
             }
             const fnName = path.node.id.name;
             const isComponent = /^[A-Z]/.test(fnName);
+
             if (!isComponent) {
                 return;
             }
@@ -89,7 +97,11 @@ export default function transformForHrm(code, id, options = {}) {
                 return;
             }
             const componentId = `${id}::${fnName}`;
-            componentIds.push(componentId);
+            componentIds.push({
+                id: componentId,
+                name: fnName,
+                isDefault: (path.parent.type === 'ExportDefaultDeclaration'),
+            });
 
             const wrappedCall = t.callExpression(
                 t.memberExpression(
@@ -106,6 +118,19 @@ export default function transformForHrm(code, id, options = {}) {
             path.node.init = wrappedCall;
             // path.skip();
         },
+        ExportDefaultDeclaration(path) {
+            const declaration = path.node.declaration;
+
+            if (t.isIdentifier(declaration)) {
+                const fnName = declaration.name;
+
+                const findPath = componentIds.find((item) => item.name === fnName);
+                if(findPath) {
+                    findPath.isDefault = true;
+                    // return;
+                }
+            }
+        },
         CallExpression(path) {
             const callee = path.node.callee;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.280",
+  "version": "1.0.282",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",