native-document 1.0.53 → 1.0.55

package/src/data/ObservableItem.js

@@ -5,13 +5,15 @@ import ObservableChecker from "./ObservableChecker";
 import PluginsManager from "../utils/plugins-manager";
 import Validator from "../utils/validator";
 import {ObservableWhen} from "./ObservableWhen";
+import {deepClone} from "../utils/helpers.js";
 
 /**
  *
  * @param {*} value
+ * @param {{ propagation: boolean, reset: boolean} | null} configs
  * @class ObservableItem
  */
-export default function ObservableItem(value) {
+export default function ObservableItem(value, configs = null) {
     this.$previousValue = null;
     this.$currentValue = value;
     this.$isCleanedUp = false;
@@ -20,6 +22,14 @@ export default function ObservableItem(value) {
     this.$watchers = null;
 
     this.$memoryId = null;
+
+    if(configs) {
+        this.configs = configs;
+        if(configs.reset) {
+            this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
+        }
+    }
+
     PluginsManager.emit('CreateObservable', this);
 }
 
@@ -259,4 +269,16 @@ ObservableItem.prototype.toBool = function() {
 
 ObservableItem.prototype.toggle = function() {
     this.set(!this.$currentValue);
+};
+
+ObservableItem.prototype.reset = function() {
+    if(!this.configs?.reset) {
+        return;
+    }
+    const resetValue = (Validator.isObject(this.$initialValue))
+        ? deepClone(this.$initialValue, (observable) => {
+            observable.reset();
+        })
+        : this.$initialValue;
+    this.set(resetValue)
 };

package/src/data/observable-helpers/array.js

@@ -5,8 +5,9 @@ import ObservableArray from "../ObservableArray.js";
 /**
  *
  * @param {Array} target
+ * @param {{propagation: boolean, deep: boolean, reset: boolean}|null} configs
  * @returns {ObservableArray}
  */
-Observable.array = function(target) {
-    return new ObservableArray(target);
+Observable.array = function(target, configs = null) {
+    return new ObservableArray(target, configs);
 };

package/src/data/observable-helpers/object.js

@@ -1,8 +1,5 @@
 import Validator from "../../utils/validator";
 import {Observable} from "../Observable";
-import ObservableItem from "../ObservableItem";
-
-
 
 const ObservableObjectValue = function(data) {
     const result = {};
@@ -45,40 +42,47 @@ const ObservableGet = function(target, property) {
 /**
  *
  * @param {Object} initialValue
- * @param {{propagation: boolean, deep: boolean}} configs
+ * @param {{propagation: boolean, deep: boolean, reset: boolean}|null} configs
  * @returns {Proxy}
  */
-Observable.init = function(initialValue, { propagation= false, deep = true } = {}) {
+Observable.init = function(initialValue, configs = null) {
     const data = {};
     for(const key in initialValue) {
         const itemValue = initialValue[key];
         if(Array.isArray(itemValue)) {
-            if(deep) {
+            if(configs?.deep !== false) {
                 const mappedItemValue = itemValue.map(item => {
                     if(Validator.isJson(item)) {
-                        return Observable.json(item, { propagation, deep });
+                        return Observable.json(item, configs);
                     }
                     if(Validator.isArray(item)) {
-                        return Observable.array(item, { propagation, deep });
+                        return Observable.array(item, configs);
                     }
-                    return Observable(item);
+                    return Observable(item, configs);
                 });
-                data[key] = Observable.array(mappedItemValue, { propagation });
+                data[key] = Observable.array(mappedItemValue, configs);
                 continue;
             }
-            data[key] = Observable.array(itemValue, { propagation });
+            data[key] = Observable.array(itemValue, configs);
             continue;
         }
         if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
             data[key] = itemValue;
             continue;
         }
-        data[key] = Observable(itemValue);
+        data[key] = Observable(itemValue, configs);
+    }
+
+    const $reset = () => {
+        for(const key in data) {
+            const item = data[key];
+            item.reset();
+        }
     }
 
     const $val = () => ObservableObjectValue(data);
 
-    const $clone = () => Observable.init($val(), { propagation, deep });
+    const $clone = () => Observable.init($val(), configs);
 
     const $updateWith = (values) => {
         Observable.update(proxy, values);
@@ -88,34 +92,17 @@ Observable.init = function(initialValue, { propagation= false, deep = true } = {
 
     const proxy = new Proxy(data, {
         get(target, property) {
-            if(property === '__isProxy__') {
-                return true;
-            }
-            if(property === '$value') {
-                return $val();
-            }
-            if(property === '$clone') {
-                return $clone;
-            }
-            if(property === '$keys') {
-                return Object.keys(initialValue);
-            }
-            if(property === '$observables') {
-                return Object.values(target);
-            }
-            if(property === '$set' || property === '$updateWith') {
-                return $updateWith;
-            }
-            if(property === '$get') {
-                return $get;
-            }
-            if(property === '$val') {
-                return $val;
-            }
-            if(target[property] !== undefined) {
-                return target[property];
-            }
-            return undefined;
+            if(property === '__isProxy__') { return true; }
+            if(property === '$value') { return $val() }
+            if(property === 'get' || property === '$get') { return $get; }
+            if(property === 'val' || property === '$val') { return $val; }
+            if(property === 'set' || property === '$set' || property === '$updateWith') { return $updateWith; }
+            if(property === 'observables' || property === '$observables') { return Object.values(target); }
+            if(property === 'keys'|| property === '$keys') { return Object.keys(initialValue); }
+            if(property === 'clone' || property === '$clone') { return $clone; }
+            if(property === 'reset') { return $reset; }
+            if(property === 'configs') { return configs; }
+            return target[property];
         },
         set(target, prop, newValue) {
             if(target[prop] !== undefined) {
@@ -166,6 +153,7 @@ Observable.value = function(data) {
 
 Observable.update = function($target, newData) {
     const data = Validator.isProxy(newData) ? newData.$value : newData;
+    const configs = $target.configs;
 
     for(const key in data) {
         const targetItem = $target[key];
@@ -178,9 +166,9 @@ Observable.update = function($target, newData) {
                 if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
                     const newValues = newValue.map(item => {
                         if(Validator.isProxy(firstElementFromOriginalValue)) {
-                            return Observable.init(item);
+                            return Observable.init(item, configs);
                         }
-                        return Observable(item);
+                        return Observable(item, configs);
                     });
                     targetItem.set(newValues);
                     continue;

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) {
@@ -49,9 +49,20 @@ export const Match = function($condition, values, shouldKeepInCache = true) {
         if(content) {
             anchor.appendChild(content);
         }
-    })
+    });
 
-    return anchor;
+    return anchor.nd.with({
+        add(key, view, shouldFocusOn = false) {
+            values[key] = view;
+            if(shouldFocusOn) {
+                $condition.set(key);
+            }
+        },
+        remove(key) {
+            shouldKeepInCache && cache.delete(key);
+            delete values[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,32 @@
+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';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default function transformComponent(id, code) {
+    // TODO: move this line outside the function
+    const hrmHookTemplate = fs.readFileSync(__dirname + '/hrm.hook.template.js', 'utf8');
+    const s = new MagicString('');
+
+    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(hrmHookTemplateFormatted);
+
+    return {
+        code: s.toString(),
+        map: s.generateMap({ source: id, hires: true })
+    };
+}

package/src/utils/helpers.js

@@ -57,4 +57,36 @@ export const getKey = (item, defaultKey, key) => {
 
 export const trim = function(str, char) {
     return str.replace(new RegExp(`^[${char}]+|[${char}]+$`, 'g'), '');
-}
+}
+
+export const deepClone = (value, onObservableFound) => {
+    // Primitives
+    if (value === null || typeof value !== 'object') {
+        return value;
+    }
+
+    // Dates
+    if (value instanceof Date) {
+        return new Date(value.getTime());
+    }
+
+    // Arrays
+    if (Array.isArray(value)) {
+        return value.map(item => deepClone(item));
+    }
+
+    // Observables - keep the référence
+    if (Validator.isObservable(value)) {
+        onObservableFound && onObservableFound(value);
+        return value;
+    }
+
+    // Objects
+    const cloned = {};
+    for (const key in value) {
+        if (value.hasOwnProperty(key)) {
+            cloned[key] = deepClone(value[key]);
+        }
+    }
+    return cloned;
+};

package/src/utils/validator.js

@@ -50,7 +50,7 @@ const Validator = {
         return typeof value === 'function' && value.constructor.name === 'AsyncFunction';
     },
     isObject(value) {
-        return typeof value === 'object';
+        return typeof value === 'object' && value !== null;
     },
     isJson(value) {
         return typeof value === 'object' && value !== null && !Array.isArray(value) && value.constructor.name === 'Object';

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/NDElement.js

@@ -1,6 +1,9 @@
 import DocumentObserver from "./DocumentObserver";
 import PluginsManager from "../utils/plugins-manager";
 import Validator from "../utils/validator";
+import NativeDocumentError from "../errors/NativeDocumentError.js";
+import DebugManager from "../utils/debug-manager.js";
+
 import {EVENTS} from "../utils/events";
 
 export function NDElement(element) {
@@ -19,6 +22,11 @@ NDElement.prototype.ref = function(target, name) {
     return this;
 };
 
+NDElement.prototype.refSelf = function(target, name) {
+    target[name] = this;
+    return this;
+};
+
 NDElement.prototype.unmountChildren = function() {
     let element = this.$element;
     for(let i = 0, length = element.children.length; i < length; i++) {
@@ -209,4 +217,78 @@ for(const event of EVENTS) {
         captureEventWrapper(this.$element, eventName, directHandler);
         return this;
     };
-}
+}
+
+NDElement.prototype.with = function(methods) {
+    if (!methods || typeof methods !== 'object') {
+        throw new NativeDocumentError('extend() requires an object of methods');
+    }
+    if(process.env.NODE_ENV === 'development') {
+        if (!this.$localExtensions) {
+            this.$localExtensions = new Map();
+        }
+    }
+
+    for (const name in methods) {
+        const method = methods[name];
+
+        if (typeof method !== 'function') {
+            console.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
+            continue;
+        }
+        if(process.env.NODE_ENV === 'development') {
+            if (this[name] && !this.$localExtensions.has(name)) {
+                DebugManager.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
+            }
+            this.$localExtensions.set(name, method);
+        }
+
+        this[name] = method.bind(this);
+    }
+
+    return this;
+}
+
+NDElement.extend = function(methods) {
+    if (!methods || typeof methods !== 'object') {
+        throw new NativeDocumentError('NDElement.extend() requires an object of methods');
+    }
+
+    if (Array.isArray(methods)) {
+        throw new NativeDocumentError('NDElement.extend() requires an object, not an array');
+    }
+
+    const protectedMethods = new Set([
+        'constructor', 'valueOf', '$element', '$observer',
+        'ref', 'remove', 'cleanup', 'with', 'extend', 'attach',
+        'lifecycle', 'mounted', 'unmounted', 'unmountChildren'
+    ]);
+
+    for (const name in methods) {
+        if (!methods.hasOwnProperty(name)) {
+            continue;
+        }
+
+        const method = methods[name];
+
+        if (typeof method !== 'function') {
+            DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+            continue;
+        }
+
+        if (protectedMethods.has(name)) {
+            DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
+            throw new NativeDocumentError(`Cannot override protected method "${name}"`);
+        }
+
+        if (NDElement.prototype[name]) {
+            DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+        }
+
+        NDElement.prototype[name] = method;
+    }
+
+    PluginsManager.emit('NDElementExtended', methods);
+
+    return NDElement;
+};

package/src/wrappers/NdPrototype.js

@@ -1,9 +1,19 @@
 import { NDElement } from "./NDElement";
 
-Object.defineProperty(HTMLElement.prototype, 'nd', {
+const property = {
     configurable: true,
     get() {
-        return new NDElement(this);
+        return  new NDElement(this);
+    }
+};
+
+Object.defineProperty(HTMLElement.prototype, 'nd', property);
+
+Object.defineProperty(DocumentFragment.prototype, 'nd', property);
+Object.defineProperty(NDElement.prototype, 'nd', {
+    configurable: true,
+    get: function() {
+        return this;
     }
 });
 

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();