native-document 1.0.158 → 1.0.160

package/devtools/transformers/src/transformComponentForHrm.js

@@ -1,6 +1,5 @@
 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';

package/dist/native-document.components.min.js

@@ -1,16 +1,16 @@
 var NativeComponents = (function (exports) {
     'use strict';
 
-    let DebugManager$2 = {};
+    let DebugManager$1 = {};
     {
-        DebugManager$2 = {
+        DebugManager$1 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager$1 = DebugManager$2;
+    var DebugManager$2 = DebugManager$1;
 
     class NativeDocumentError extends Error {
         constructor(message, context = {}) {
@@ -275,7 +275,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$2.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -900,7 +900,7 @@ var NativeComponents = (function (exports) {
                         const regex = new RegExp(pattern, flags);
                         return regex.test(String(value));
                     } catch (error){
-                        DebugManager$1.warn('Invalid regex pattern:', pattern, error);
+                        DebugManager$2.warn('Invalid regex pattern:', pattern, error);
                         return false;
                     }
                 }
@@ -2002,6 +2002,186 @@ var NativeComponents = (function (exports) {
         );
     };
 
+    const STATE = {
+        UNRESOLVED: 'unresolved',
+        PENDING:    'pending',
+        READY:      'ready',
+        REFRESHING: 'refreshing',
+        ERRORED:    'errored',
+    };
+
+    function ObservableResource(fn, deps, config) {
+        this.$fn = (config.debounce > 0) ? debounce(fn, config.debounce) : fn;
+        this.$dependencies = deps;
+        this.$config = config;
+        this.$controller  = null;
+        this.$subscriptions        = [];
+
+        this.data  = config.initial ?? new ObservableItem(null);
+        this.error = new ObservableItem(null);
+        this.state = new ObservableItem(STATE.UNRESOLVED);
+
+        this.loading = ObservableItem.computed(
+            (state) => state === STATE.PENDING || state === STATE.REFRESHING,
+            [this.state]
+        );
+
+        if (config.auto) {
+            if (deps.length > 0) {
+                this.$watchDependencies();
+                return;
+            }
+            this.fetch();
+        }
+    }
+
+    ObservableResource.prototype.$abort = function() {
+        if (this.$controller) {
+            this.$controller.abort();
+            this.$controller = null;
+        }
+    };
+
+    ObservableResource.prototype.$runWithAbortController = function(isRefetch = false) {
+        this.$abort();
+
+        this.$controller = new AbortController();
+        const signal = this.$controller.signal;
+
+        const hasData = this.data.val() !== null;
+        const nextState = isRefetch && hasData ? STATE.REFRESHING : STATE.PENDING;
+
+        this.error.set(null);
+        this.state.set(nextState);
+
+        const depValues = this.$dependencies.map(dep => dep.val());
+        const args = [...depValues, signal];
+
+        Promise.resolve(this.$fn(...args))
+            .then(result => {
+                if (signal.aborted) {
+                    return;
+                }
+                this.data.set(result);
+                this.error.set(null);
+                this.state.set(STATE.READY);
+                this.$controller = null;
+            })
+            .catch(err => {
+                if (signal.aborted) {
+                    return;
+                }
+                this.error.set(err);
+                this.state.set(STATE.ERRORED);
+                this.$controller = null;
+            });
+    };
+    ObservableResource.prototype.$runWithoutAbortController = function(isRefetch = false) {
+        const hasData = this.data.val() !== null;
+        const nextState = isRefetch && hasData ? STATE.REFRESHING : STATE.PENDING;
+
+        this.error.set(null);
+        this.state.set(nextState);
+
+        const args = this.$dependencies.map(dep => dep.val());
+
+        Promise.resolve(this.$fn(...args))
+            .then(result => {
+                this.data.set(result);
+                this.error.set(null);
+                this.state.set(STATE.READY);
+            })
+            .catch(err => {
+                this.error.set(err);
+                this.state.set(STATE.ERRORED);
+            });
+    };
+
+    ObservableResource.prototype.$run = function(isRefetch = false) {
+        const needsSignal = this.$fn.length > this.$dependencies.length;
+        if(needsSignal) {
+            this.$run = this.$runWithAbortController;
+            return this.$runWithAbortController(isRefetch);
+        }
+        this.$run = this.$runWithoutAbortController;
+
+        return this.$run(isRefetch);
+    };
+
+    ObservableResource.prototype.$watchDependencies = function() {
+        this.$subscriptions.forEach(unsub => unsub());
+        this.$subscriptions = [];
+
+        this.$dependencies.forEach(dep => {
+            const callback = () => this.$run(true);
+            dep.subscribe(callback);
+            this.$subscriptions.push(() => dep.unsubscribe(callback));
+        });
+        if (!this.$config.lazy) {
+            this.$run(false);
+        }
+    };
+
+    ObservableResource.prototype.fetch = function() {
+        this.$run(false);
+        return this;
+    };
+
+    ObservableResource.prototype.refetch = function() {
+        this.$run(true);
+        return this;
+    };
+
+    ObservableResource.prototype.mutate = function(value) {
+        this.data.set(value);
+        this.state.set(STATE.READY);
+        return this;
+    };
+
+    ObservableResource.prototype.destroy = function() {
+        this.$abort();
+        this.$subscriptions.forEach(unsub => unsub());
+        this.$subscriptions = [];
+    };
+
+    ObservableResource.prototype.isReady = function() {
+        return this.state.isEqualTo(STATE.READY);
+    };
+
+    ObservableResource.prototype.isPending = function() {
+        return this.state.isEqualTo(STATE.PENDING);
+    };
+
+    ObservableResource.prototype.isRefreshing = function() {
+        return this.state.isEqualTo(STATE.REFRESHING);
+    };
+
+    ObservableResource.prototype.isErrored = function() {
+        return this.state.isEqualTo(STATE.ERRORED);
+    };
+
+    ObservableResource.prototype.isUnresolved = function() {
+        return this.state.isEqualTo(STATE.UNRESOLVED);
+    };
+
+    ObservableResource.prototype.onSuccess = function(callback) {
+        this.data.subscribe((value) => {
+            if (this.state.val() === STATE.READY) {
+                callback(value);
+            }
+        });
+        return this;
+    };
+
+    ObservableResource.prototype.onError = function(callback) {
+        this.error.subscribe((err) => {
+            if (err !== null) {
+                callback(err);
+            }
+        });
+        return this;
+    };
+
     /**
      *
      * @param {*} value
@@ -2132,9 +2312,9 @@ var NativeComponents = (function (exports) {
      * const computed = Observable.computed(() => { ... }, batch);
      */
     Observable.computed = function(callback, dependencies = []) {
-        const initialValue = callback();
-        const observable = new ObservableItem(initialValue);
         const getValues = () => dependencies.map((item) => item.val());
+        const initialValue = callback(...getValues());
+        const observable = new ObservableItem(initialValue);
         const updatedValue = nextTick(() => observable.set(callback(...getValues())));
 
         if(Validator.isFunction(dependencies)) {
@@ -2203,6 +2383,15 @@ var NativeComponents = (function (exports) {
     Observable.object = Observable.init;
     Observable.json = Observable.init;
 
+
+    Observable.resource = function(fn, deps = [], options = false) {
+        const config = (typeof options === 'boolean')
+            ? { auto: options, debounce: 0, lazy: false }
+            : { auto: false, debounce: 0, lazy: false, ...options };
+
+        return new ObservableResource(fn, deps, config);
+    };
+
     const BOOLEAN_ATTRIBUTES = new Set([
         'checked',
         'selected',
@@ -2820,7 +3009,7 @@ var NativeComponents = (function (exports) {
                 return condition ? ElementCreator.getChild(child) : null;
             }
 
-            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable or boolean / "+comment, condition);
+            return DebugManager$2.warn('ShowIf', "ShowIf : condition must be an Observable or boolean / "+comment, condition);
         }
         const element = Anchor('Show if : '+(comment || ''));
 
@@ -3202,7 +3391,7 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$1.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
+                DebugManager$2.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
                 continue;
             }
 
@@ -3212,6 +3401,31 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+
+    NDElement.prototype.attr = function(name, value) {
+        if(value?.__$Observable) {
+            bindAttributeWithObservable(this.$element, name, value);
+            return this;
+        }
+        this.$element.setAttribute(name, value);
+    };
+
+    NDElement.prototype.attrs = function(attrs) {
+        AttributesWrapper(this.$element, attrs);
+        return this;
+    };
+
+    NDElement.prototype.class = function(classes) {
+        bindClassAttribute(this.$element, classes);
+        return this;
+    };
+
+    NDElement.prototype.style = function(style) {
+        bindStyleAttribute(this.$element, style);
+        return this;
+    };
+
+
     /**
      * Extends the NDElement prototype with new methods available to all NDElement instances.
      * Use this to add global methods to all NDElements.
@@ -3252,17 +3466,17 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$2.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$2.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$2.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -3435,6 +3649,10 @@ var NativeComponents = (function (exports) {
         return props;
     };
 
+    BaseComponent.prototype.props = function(props) {
+        this.$description.props = props;
+        return this;
+    };
 
     BaseComponent.prototype.style = function(style) {
         const props = this.getEditableProps();
@@ -3547,7 +3765,7 @@ var NativeComponents = (function (exports) {
      */
     Object.defineProperty(AccordionItem.prototype, 'id', {
         get() {
-            this.$description.id;
+            return this.$description.id;
         }
     });
 
@@ -3690,6 +3908,7 @@ var NativeComponents = (function (exports) {
      */
     AccordionItem.prototype.renderContent = function(renderFn) {
         this.$description.renderContent = renderFn;
+        return this;
     };
 
     /**
@@ -3984,7 +4203,7 @@ var NativeComponents = (function (exports) {
 
     Alert.preset = function(name, callback) {
         if (Alert.prototype[name] || Alert[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Alert.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Alert.`);
             return;
         }
         Alert[name] = (content, props) => callback(new Alert(content, props));
@@ -4298,7 +4517,7 @@ var NativeComponents = (function (exports) {
 
     Avatar.preset = function(name, callback) {
         if (Avatar.prototype[name] || Avatar[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Avatar.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Avatar.`);
             return;
         }
         Avatar[name] = (label, props) => callback(new Avatar(label, props));
@@ -4720,7 +4939,7 @@ var NativeComponents = (function (exports) {
 
     Badge.preset = function(name, callback) {
         if (Badge.prototype[name] || Badge[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Badge.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Badge.`);
             return;
         }
         Badge[name] = (content, props) => callback(new Badge(content, props));
@@ -4838,7 +5057,7 @@ var NativeComponents = (function (exports) {
 
     Breadcrumb.preset = function(name, callback) {
         if (Breadcrumb.prototype[name] || Breadcrumb[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Breadcrumb.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Breadcrumb.`);
             return;
         }
         Breadcrumb[name] = (props) => callback(new Breadcrumb(props));
@@ -4928,7 +5147,7 @@ var NativeComponents = (function (exports) {
 
     Button.preset = function(name, callback) {
         if (Button.prototype[name] || Button[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Button.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Button.`);
             return;
         }
         Button[name] = (label, props) => callback(new Button(label, props));
@@ -5810,7 +6029,7 @@ var NativeComponents = (function (exports) {
 
     Divider.preset = function(name, callback) {
         if (Divider.prototype[name] || Divider[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Divider.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Divider.`);
             return;
         }
         Divider[name] = (label, props) => callback(new Divider(label, props));
@@ -6229,7 +6448,7 @@ var NativeComponents = (function (exports) {
 
     Dropdown.preset = function(name, callback) {
         if (Dropdown.prototype[name] || Dropdown[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Dropdown.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Dropdown.`);
             return;
         }
         Dropdown[name] = (props) => callback(new Dropdown(props));
@@ -10284,7 +10503,7 @@ var NativeComponents = (function (exports) {
 
     Modal.preset = function(name, callback) {
         if (Modal.prototype[name] || Modal[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Modal.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Modal.`);
             return;
         }
         Modal[name] = (content, props) => callback(new Modal(content, props));
@@ -10535,7 +10754,7 @@ var NativeComponents = (function (exports) {
 
     Pagination.preset = function(name, callback) {
         if (Pagination.prototype[name] || Pagination[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Pagination.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Pagination.`);
             return;
         }
         Pagination[name] = (props) => callback(new Pagination(props));
@@ -10830,7 +11049,7 @@ var NativeComponents = (function (exports) {
 
     Popover.preset = function(name, callback) {
         if (Popover.prototype[name] || Popover[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Popover.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Popover.`);
             return;
         }
         Popover[name] = (content, props) => callback(new Popover(content, props));
@@ -11132,7 +11351,7 @@ var NativeComponents = (function (exports) {
 
     Progress.preset = function(name, callback) {
         if (Progress.prototype[name] || Progress[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Progress.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Progress.`);
             return;
         }
         Progress[name] = (props) => callback(new Progress(props));
@@ -11434,7 +11653,7 @@ var NativeComponents = (function (exports) {
 
     VStack.preset = function(name, callback) {
         if (VStack.prototype[name] || VStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in VStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in VStack.`);
             return;
         }
         VStack[name] = (content, props) => callback(new VStack(content, props));
@@ -11609,7 +11828,7 @@ var NativeComponents = (function (exports) {
 
     FixedStack.preset = function(name, callback) {
         if(FixedStack.prototype[name] || FixedStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in FixedStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in FixedStack.`);
             return;
         }
         FixedStack[name] = (content, props) => callback(new FixedStack(content, props));
@@ -11639,7 +11858,7 @@ var NativeComponents = (function (exports) {
 
     HStack.preset = function(name, callback) {
         if (HStack.prototype[name] || HStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in HStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in HStack.`);
             return;
         }
         HStack[name] = (content, props) => callback(new HStack(content, props));
@@ -11669,7 +11888,7 @@ var NativeComponents = (function (exports) {
 
     AbsoluteStack.preset = function(name, callback) {
         if(AbsoluteStack.prototype[name] || AbsoluteStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in AbsoluteStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in AbsoluteStack.`);
             return;
         }
         AbsoluteStack[name] = (content, props) => callback(new AbsoluteStack(content, props));
@@ -11699,7 +11918,7 @@ var NativeComponents = (function (exports) {
 
     RelativeStack.preset = function(name, callback) {
         if(RelativeStack.prototype[name] || RelativeStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in RelativeStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in RelativeStack.`);
             return;
         }
         RelativeStack[name] = (content, props) => callback(new RelativeStack(content, props));
@@ -12203,7 +12422,7 @@ var NativeComponents = (function (exports) {
      * @param {?Function=} customWrapper
      * @returns {Function}
      */
-    function HtmlElementWrapper(name, customWrapper = null) {
+    function  HtmlElementWrapper(name, customWrapper = null) {
         if(name) {
             if(customWrapper) {
                 let node = null;
@@ -12271,7 +12490,7 @@ var NativeComponents = (function (exports) {
 
     Skeleton.preset = function(name, callback) {
         if (Skeleton.prototype[name] || Skeleton[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Skeleton.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Skeleton.`);
             return;
         }
         Skeleton[name] = (props) => callback(new Skeleton(props));
@@ -12635,7 +12854,7 @@ var NativeComponents = (function (exports) {
 
     Spinner.preset = function(name, callback) {
         if (Spinner.prototype[name] || Spinner[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Spinner.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Spinner.`);
             return;
         }
         Spinner[name] = (props) => callback(new Spinner(props));
@@ -13205,7 +13424,7 @@ var NativeComponents = (function (exports) {
 
     Stepper.preset = function(name, callback) {
         if (Stepper.prototype[name] || Stepper[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Stepper.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Stepper.`);
             return;
         }
         Stepper[name] = (props) => callback(new Stepper(props));
@@ -13796,9 +14015,14 @@ var NativeComponents = (function (exports) {
         return new SimpleTable(props);
     };
 
-    SimpleTable.prototype.column = function(key, title, callback) {
+    SimpleTable.prototype.column = function(key, title, props, callback) {
+        if(typeof props === 'function') {
+            callback = props;
+            props = {};
+        }
         const column = new Column(key);
         column.title(title);
+        column.props(props);
         callback && callback(column);
         this.$description.columns.push(column);
         this.$description.header.push(column);
@@ -14014,9 +14238,15 @@ var NativeComponents = (function (exports) {
     // COLONNES
     // ---------------------------------------------
 
-    DataTable.prototype.column = function(key, title, callback) {
+
+    DataTable.prototype.column = function(key, title, props, callback) {
+        if(typeof props === 'function') {
+            callback = props;
+            props = {};
+        }
         const column = new Column(key);
         column.title(title);
+        column.props(props);
         callback && callback(column);
         this.$description.columns.push(column);
         this.$description.header.push(column);
@@ -14158,7 +14388,7 @@ var NativeComponents = (function (exports) {
 
     DataTable.prototype.selectedRows = function($obs) {
         if(!$obs.__$isObservableArray) {
-            DebugManager$1.warn('Database', 'selectedRow should take an Observable array');
+            DebugManager$2.warn('Database', 'selectedRow should take an Observable array');
         }
         this.$description.$selectedRows = $obs;
         return this;
@@ -14705,7 +14935,7 @@ var NativeComponents = (function (exports) {
 
     Tooltip.preset = function(name, callback) {
         if (Tooltip.prototype[name] || Tooltip[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Tooltip.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Tooltip.`);
             return;
         }
         Tooltip[name] = (content, props) => callback(new Tooltip(content, props));