native-document 1.0.54 → 1.0.56

package/docs/anchor.md

@@ -10,7 +10,7 @@ Anchors are instances of the Anchor class that use two comment nodes as invisibl
 
 ```javascript
 // Create an anchor instance
-const anchor = new Anchor("My Content");
+const anchor = Anchor("My Content");
 // Or using the alias
 const anchor = new NativeDocumentFragment("My Content");
 
@@ -39,7 +39,7 @@ fragment.appendChild(Div("Standard fragment content"));
 
 ```javascript
 // Anchor is a NativeDocument class
-const anchor = new Anchor("Dynamic Area");
+const anchor = Anchor("Dynamic Area");
 anchor.appendChild(Div("Dynamic content")); // Uses comment markers system
 ```
 
@@ -49,8 +49,8 @@ anchor.appendChild(Div("Dynamic content")); // Uses comment markers system
 
 ```javascript
 // Create anchor with custom identifier
-const contentAnchor = new Anchor("Content Area");
-const listAnchor = new Anchor("Todo List");
+const contentAnchor = Anchor("Content Area");
+const listAnchor = Anchor("Todo List");
 
 // Anchor needs to be added to parent container
 const container = Div();
@@ -60,7 +60,7 @@ container.appendChild(contentAnchor);
 ### appendChild() - Add Content Between Markers
 
 ```javascript
-const anchor = new Anchor("Dynamic Section");
+const anchor = Anchor("Dynamic Section");
 const container = Div();
 container.appendChild(anchor);
 
@@ -80,7 +80,7 @@ anchor.appendChild(Div("Dynamic content 2"));
 ### insertBefore() - Positioned Insertion
 
 ```javascript
-const anchor = new Anchor("Ordered Content");
+const anchor = Anchor("Ordered Content");
 const element1 = Div("First");
 const element2 = Div("Second");
 
@@ -92,7 +92,7 @@ anchor.insertBefore(element2, element1); // Inserts before element1
 ### replaceContent() - Replace All Content
 
 ```javascript
-const anchor = new Anchor("Replaceable");
+const anchor = Anchor("Replaceable");
 anchor.appendChild(Div("Old content"));
 
 // Replace all content between markers with new content
@@ -104,7 +104,7 @@ anchor.replaceContent(Div("New content"));
 ### remove() vs removeChildren() vs clear()
 
 ```javascript
-const anchor = new Anchor("Content Management");
+const anchor = Anchor("Content Management");
 
 // Remove all content between markers (markers remain)
 anchor.remove(); // Content cleared, anchor can be reused
@@ -126,7 +126,7 @@ anchor.removeWithAnchors(); // Destroys the entire anchor system
 ### Access Markers
 
 ```javascript
-const anchor = new Anchor("My Anchor");
+const anchor = Anchor("My Anchor");
 
 // Get the start and end comment nodes
 const start = anchor.startElement();
@@ -141,7 +141,7 @@ console.log(end.textContent);   // "/ Anchor End My Anchor"
 ### Working with Arrays of Content
 
 ```javascript
-const anchor = new Anchor("Multi Content");
+const anchor = Anchor("Multi Content");
 const container = Div();
 container.appendChild(anchor);
 
@@ -158,7 +158,7 @@ anchor.appendChild([
 ### Dynamic Content Updates
 
 ```javascript
-const contentAnchor = new Anchor("Dynamic Updates");
+const contentAnchor = Anchor("Dynamic Updates");
 const isLoading = Observable(true);
 const data = Observable(null);
 
@@ -248,7 +248,7 @@ const fragment = Fragment(
 
 ```javascript
 // Dynamic content area that can be updated multiple times
-const anchor = new Anchor("Updates");
+const anchor = Anchor("Updates");
 anchor.appendChild(Div("Initial content"));
 anchor.remove(); // Clear content
 anchor.appendChild(Div("New content")); // Add different content - markers remain
@@ -259,7 +259,7 @@ anchor.appendChild(Div("New content")); // Add different content - markers remai
 ### Memory Management
 ```javascript
 // Anchors are automatically cleaned up when removed from DOM
-const anchor = new Anchor("Temporary");
+const anchor = Anchor("Temporary");
 
 // Manual cleanup if needed
 anchor.removeWithAnchors(); // Fully destroys anchor and frees memory
@@ -285,7 +285,7 @@ anchor.appendChild(Div("Item 2"));
 ```javascript
 
 function ConditionalList(condition, items) {
-    const anchor = new Anchor("ConditionalList");
+    const anchor = Anchor("ConditionalList");
 
     const updateContent = (value) => {
         console.log(value);
@@ -320,9 +320,9 @@ document.body.appendChild(Div([
 
 ```javascript
 function LayoutManager() {
-    const header = new Anchor("Header");
-    const content = new Anchor("Content");
-    const footer = new Anchor("Footer");
+    const header = Anchor("Header");
+    const content = Anchor("Content");
+    const footer = Anchor("Footer");
     
     return {
         setHeader: (component) => header.replaceContent(component),

package/hrm.js

@@ -0,0 +1,7 @@
+import NdViteHotReload from "./src/hrm/nd-vite-hot-reload.js";
+import transformComponent from "./src/hrm/transformComponent.js";
+
+export {
+    transformComponent,
+    NdViteHotReload,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "main": "index.js",
   "type": "module",
   "scripts": {
@@ -12,10 +12,13 @@
   "license": "ISC",
   "description": "",
   "devDependencies": {
+    "@babel/parser": "^7.28.5",
+    "@babel/traverse": "^7.28.5",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "eslint": "^9.33.0",
+    "magic-string": "^0.30.21",
     "rollup": "^4.53.3"
   }
-}
+}

package/src/elements/anchor.js

@@ -105,6 +105,8 @@ export default function Anchor(name, isUniqueChild = false) {
         parent.insertBefore(child, anchorEnd);
     };
 
+    element.setContent = element.replaceContent;
+
     element.insertBefore = function(child, anchor = null) {
         element.appendChild(child, anchor);
     };

package/src/elements/control/for-each-array.js

@@ -6,7 +6,7 @@ import { ElementCreator } from "../../wrappers/ElementCreator";
 import NativeDocumentError from "../../errors/NativeDocumentError";
 
 export function ForEachArray(data, callback, key, configs = {}) {
-    const element = new Anchor('ForEach Array');
+    const element = Anchor('ForEach Array');
     const blockEnd = element.endElement();
     const blockStart = element.startElement();
 

package/src/elements/control/for-each.js

@@ -15,7 +15,7 @@ import NativeDocumentError from "../../errors/NativeDocumentError";
  * @returns {DocumentFragment}
  */
 export function ForEach(data, callback, key, { shouldKeepItemsInCache = false } = {}) {
-    const element = new Anchor('ForEach');
+    const element = Anchor('ForEach');
     const blockEnd = element.endElement();
     const blockStart = element.startElement();
 

package/src/elements/control/show-if.js

@@ -16,7 +16,7 @@ export const ShowIf = function(condition, child, { comment = null, shouldKeepInC
     if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
         return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
     }
-    const element = new Anchor('Show if : '+(comment || ''));
+    const element = Anchor('Show if : '+(comment || ''));
 
     let childElement = null;
     const getChildElement = () => {

package/src/elements/control/switch.js

@@ -18,7 +18,7 @@ export const Match = function($condition, values, shouldKeepInCache = true) {
         throw new NativeDocumentError("Toggle : condition must be an Observable");
     }
 
-    const anchor = new Anchor('Match');
+    const anchor = Anchor('Match');
     const cache = new Map();
 
     const getItem = function(key) {

package/src/hrm/ComponentRegistry.js

@@ -0,0 +1,83 @@
+import {Anchor} from "../../elements.js";
+
+const ComponentRegistry = (function() {
+    console.log('ça s excecute')
+
+    const registry = new Map();
+
+    const wrapper = function(id, factory, metadata, registryItem) {
+        const factoryName = factory.name;
+
+        return function(...args) {
+            const lastParams = args[0];
+            console.log({ lastParams })
+            if(lastParams?.__instance) {
+                const instance = lastParams.__instance;
+                const componentArgs = Array.from(instance.context.args).pop();
+                const newInstance = factory(...componentArgs);
+                instance.anchor.setContent(newInstance);
+                return;
+            }
+            const instance = factory(...args);
+            const anchor = Anchor(factoryName);
+            anchor.setContent(instance);
+            registryItem.instances.add({
+                anchor,
+                context: {
+                    args
+                }
+            });
+            console.log({ instance, anchor });
+            return anchor;
+        };
+    }
+
+    return {
+        /**
+         * @param {string} id
+         * @param {Function} factory
+         * @param {Object} metadata
+         */
+        register(id, factory, metadata = {}) {
+            if (!registry.has(id)) {
+                registry.set(id, {
+                    factory,
+                    instances: new Set(),
+                    metadata,
+                    states: {},
+                    version: 0
+                });
+            }
+            return wrapper(id, factory, metadata, registry.get(id));
+        },
+        update(id, newFactory) {
+            const component = registry.get(id);
+            if(!component) {
+                console.warn(`[HMR] Component ${id} not found`);
+                return;
+            }
+            console.log(`[HMR] Updating ${component.instances.size} instance(s) of ${id}`);
+            const oldFactory = component.factory;
+            component.factory = newFactory;
+            component.version++;
+            const instances = Array.from(component.instances);
+            for (const instance of instances) {
+                try {
+                    this.updateInstance(instance, newFactory);
+                } catch (error) {
+                    console.error('[HMR] Update failed:', error);
+                    // Rollback
+                    component.factory = oldFactory;
+                    component.version--;
+                    throw error;
+                }
+            }
+        },
+        updateInstance(instance, newFactory) {
+            console.log(Array.from(registry.entries()))
+            return newFactory({ __instance: instance });
+        }
+    };
+}());
+
+export default ComponentRegistry;

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

@@ -0,0 +1,52 @@
+
+if (import.meta.hot) {
+    import.meta.hot.accept((newModule) => {
+        console.log('[HMR Browser] Update accepted for ${id}');
+
+        if (!newModule) {
+            console.error('[HMR Browser] newModule is undefined!');
+            return;
+        }
+
+        try {
+            if (typeof window === 'undefined') {
+                console.error('[HMR Browser] window is undefined!');
+                return;
+            }
+        } catch (e) {
+            return;
+        }
+
+        // const NativeDocument = window.NativeDocument;
+        // if (!NativeDocument) {
+        //     console.error('[HMR Browser] NativeDocument not found on window!');
+        //     return;
+        // }
+
+        if (!ComponentRegistry) {
+            console.error('[HMR Browser] ComponentRegistry not found!');
+            return;
+        }
+
+        console.log('[HMR Browser] Calling ComponentRegistry.update()');
+        try {
+            ComponentRegistry.update('${id}', newModule.default);
+            console.log('[HMR Browser] ✓ Update successful');
+        } catch (error) {
+            console.error('[HMR Browser] ✗ Update failed:', error);
+        }
+    });
+
+    import.meta.hot.on('vite:error', (payload) => {
+        console.error('[HMR Browser] Vite error:', payload);
+    });
+
+
+    import.meta.hot.on('nd:update', (payload) => {
+        console.error('[HMR Browser] ND:Update:', payload);
+    });
+
+    import.meta.hot.dispose(() => {
+        console.log('[HMR Browser] Disposing ${id}');
+    });
+}

package/src/hrm/nd-vite-hot-reload.js

@@ -0,0 +1,46 @@
+// vite-plugin-native-document-hmr.js
+import transformComponent from "./transformComponent.js";
+
+export default function NdViteHotReload(options) {
+    const {
+        include = /\.nd\.js$/,
+        preserveState = true
+    } = options;
+
+    return {
+        name: 'vite-plugin-native-document-hmr',
+        apply: 'serve',
+        enforce: 'post',
+
+        handleHotUpdate({ file, server, modules }) {
+            if (!include.test(file)) {
+                return;
+            }
+
+            // Notify the browser about the change
+            server.ws.send({
+                type: 'nd-hmr-file',
+                event: 'nd:update',
+                data: { file, msg: 'The content has changed' }
+            });
+
+            // We will manage all manually
+            return modules.filter(Boolean);
+        },
+        transform(code, id) {
+            if (!include.test(id)) return null;
+            if (id.includes('node_modules')) return null;
+
+            try {
+                return transformComponent(id, code, { preserveState });
+            } catch (error) {
+                console.error(`[NativeDocument] Transform error in ${id}:`, error);
+                return null;
+            }
+        },
+
+        configResolved() {
+            console.log('[NativeDocument] HMR Plugin loaded ✓');
+        }
+    };
+}

package/src/hrm/transformComponent.js

@@ -0,0 +1,74 @@
+import fs from 'node:fs';
+import path from 'node:path';
+// import { parse } from '@babel/parser';
+import MagicString from 'magic-string';
+
+import { fileURLToPath } from 'node:url';
+import { parse } from '@babel/parser';
+import { default as traverse } from '@babel/traverse';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+export default function transformComponent(id, code) {
+    let hasDefaultExport = false;
+    let componentName = null;
+    let exportStart = 0;
+    let exportEnd = 0;
+    // TODO: move this line outside the function
+    const hrmHookTemplate = fs.readFileSync(__dirname + '/hrm.hook.template.js', 'utf8');
+    const s = new MagicString('');
+    const codeParsed = parse(code, {
+        sourceType: 'module',
+        plugins: []
+    });
+
+    console.log(traverse)
+    traverse(codeParsed, {
+        ExportDefaultDeclaration(path) {
+            hasDefaultExport = true;
+            const declaration = path.node.declaration;
+
+            if (declaration.id) {
+                componentName = declaration.id.name;
+            } else if (declaration.type === 'Identifier') {
+                componentName = declaration.name;
+            } else {
+                componentName = 'AnonymousComponent';
+            }
+
+            exportStart = path.node.start;
+            exportEnd = path.node.end;
+        }
+    });
+    if (!hasDefaultExport) {
+        return null;
+    }
+
+    const originalExport = code.slice(exportStart, exportEnd);
+    const hrmComponentName = `__HRM_${componentName}__`;
+    const newExport = originalExport.replace(
+        'export default',
+        `const ${hrmComponentName} =`
+    );
+    s.overwrite(exportStart, exportEnd, newExport);
+
+    const data = {
+        id: id,
+    };
+    let hrmHookTemplateFormatted = hrmHookTemplate;
+    for(const key in data) {
+        hrmHookTemplateFormatted = hrmHookTemplateFormatted.replace(new RegExp("\\$\{"+key+"}", 'ig'), data[key]);
+    }
+
+    s.append('import ComponentRegistry from "native-document/src/hrm/ComponentRegistry";');
+    s.append(code);
+    s.append(`export default ComponentRegistry.register('${id}', ${hrmComponentName}, { preserveState: ${options.preserveState} });`);
+    s.append(hrmHookTemplateFormatted);
+
+    return {
+        code: s.toString(),
+        map: s.generateMap({ source: id, hires: true })
+    };
+}

package/src/wrappers/ElementCreator.js

@@ -65,7 +65,7 @@ export const ElementCreator = {
             $nodeCache.set(name, node);
             return node.cloneNode();
         }
-        return new Anchor('Fragment');
+        return Anchor('Fragment');
     },
     /**
      *

package/src/wrappers/SingletonView.js

@@ -21,7 +21,7 @@ export function SingletonView($viewCreator) {
 
     this.createSection = (name, fn) => {
         $components = $components || {};
-        const anchor = new Anchor('Component '+name);
+        const anchor = Anchor('Component '+name);
 
         $components[name] = function(...args) {
             anchor.removeChildren();