native-document 1.0.94 → 1.0.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.94",
+  "version": "1.0.98",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/readme.md

@@ -317,4 +317,4 @@ Thanks to all contributors and the JavaScript community for inspiration.
 
 ---
 
-**Ready to build with native simplicity?** [Get Started →](docs/getting-started.md)
+**Ready to build with native simplicity?** [Get Started ->](docs/getting-started.md)

package/src/core/data/ObservableChecker.js

@@ -10,6 +10,8 @@ export default function ObservableChecker($observable, $checker) {
     this.unSubscriptions = [];
 }
 
+export const ObservablePipe = ObservableChecker;
+
 ObservableChecker.prototype.__$isObservableChecker = true;
 
 /**

package/src/core/data/ObservableItem.js

@@ -6,6 +6,10 @@ import PluginsManager from "../../core/utils/plugins-manager";
 import Validator from "../../core/utils/validator";
 import {ObservableWhen} from "./ObservableWhen";
 import {deepClone} from "../utils/helpers";
+import {Store} from "./Store";
+import { Formatters} from "../utils/formatters";
+import {Observable} from "./Observable";
+import {$getFromStorage, $saveToStorage} from "../utils/localstorage";
 
 /**
  *
@@ -368,6 +372,11 @@ ObservableItem.prototype.check = function(callback) {
     return new ObservableChecker(this, callback)
 };
 
+ObservableItem.prototype.transform = ObservableItem.prototype.check;
+ObservableItem.prototype.pluck = ObservableItem.prototype.check;
+ObservableItem.prototype.is = ObservableItem.prototype.check;
+ObservableItem.prototype.select = ObservableItem.prototype.check;
+
 /**
  * Gets a property value from the observable's current value.
  * If the property is an observable, returns its value.
@@ -483,4 +492,92 @@ ObservableItem.prototype.toString = function() {
  */
 ObservableItem.prototype.valueOf = function() {
     return this.$currentValue;
+};
+
+
+/**
+ * Creates a derived observable that formats the current value using Intl.
+ * Automatically reacts to both value changes and locale changes (Store.__nd.locale).
+ *
+ * @param {string | Function} type - Format type or custom formatter function
+ * @param {Object} [options={}] - Options passed to the formatter
+ * @returns {ObservableItem<string>}
+ *
+ * @example
+ * // Currency
+ * price.format('currency')                                      // "15 000 FCFA"
+ * price.format('currency', { currency: 'EUR' })                 // "15 000,00 €"
+ * price.format('currency', { notation: 'compact' })             // "15 K FCFA"
+ *
+ * // Number
+ * count.format('number')                                        // "15 000"
+ *
+ * // Percent
+ * rate.format('percent')                                        // "15,0 %"
+ * rate.format('percent', { decimals: 2 })                       // "15,00 %"
+ *
+ * // Date
+ * date.format('date')                                           // "3 mars 2026"
+ * date.format('date', { dateStyle: 'full' })                    // "mardi 3 mars 2026"
+ * date.format('date', { format: 'DD/MM/YYYY' })                 // "03/03/2026"
+ * date.format('date', { format: 'DD MMM YYYY' })                // "03 mar 2026"
+ * date.format('date', { format: 'DD MMMM YYYY' })               // "03 mars 2026"
+ *
+ * // Time
+ * date.format('time')                                           // "20:30"
+ * date.format('time', { second: '2-digit' })                    // "20:30:00"
+ * date.format('time', { format: 'HH:mm:ss' })                   // "20:30:00"
+ *
+ * // Datetime
+ * date.format('datetime')                                       // "3 mars 2026, 20:30"
+ * date.format('datetime', { dateStyle: 'full' })                // "mardi 3 mars 2026, 20:30"
+ * date.format('datetime', { format: 'DD/MM/YYYY HH:mm' })       // "03/03/2026 20:30"
+ *
+ * // Relative
+ * date.format('relative')                                       // "dans 11 jours"
+ * date.format('relative', { unit: 'month' })                    // "dans 1 mois"
+ *
+ * // Plural
+ * count.format('plural', { singular: 'billet', plural: 'billets' }) // "3 billets"
+ *
+ * // Custom formatter
+ * price.format(value => `${value.toLocaleString()} FCFA`)
+ *
+ * // Reacts to locale changes automatically
+ * Store.setLocale('en-US');
+ */
+ObservableItem.prototype.format = function(type, options = {}) {
+    const self = this;
+
+    if (typeof type === 'function') {
+        return new ObservableChecker(self, type);
+    }
+
+    if (process.env.NODE_ENV === 'development') {
+        if (!Formatters[type]) {
+            throw new NativeDocumentError(
+                `Observable.format : unknown type '${type}'. Available : ${Object.keys(Formatters).join(', ')}.`
+            );
+        }
+    }
+
+    const formatter = Formatters[type];
+    const localeObservable = Store.follow('locale');
+
+    return Observable.computed(() => formatter(self.val(), localeObservable.val(), options),
+        [self, localeObservable]
+    );
+};
+
+ObservableItem.prototype.persist = function(key, options = {}) {
+    let value = $getFromStorage(key, this.$currentValue);
+    if(options.get) {
+        value = options.get(value);
+    }
+    this.set(value);
+    const saver = $saveToStorage(this.$currentValue);
+    this.subscribe((newValue) => {
+        saver(key, options.set ? options.set(newValue) : newValue);
+    });
+    return this;
 };

package/src/core/data/ObservableObject.js

@@ -0,0 +1,182 @@
+import ObservableItem from "./ObservableItem";
+import Validator from "../utils/validator";
+import {nextTick} from "../utils/helpers";
+import {Observable} from "./Observable";
+
+export const ObservableObject = function(target, configs) {
+    ObservableItem.call(this, target);
+    this.$observables = {};
+    this.configs = configs;
+
+    this.$load(target);
+
+    for(const name in target) {
+        if(!Object.hasOwn(this, name)) {
+            Object.defineProperty(this, name, {
+                get: () => this.$observables[name],
+                set: (value) => this.$observables[name].set(value)
+            });
+        }
+    }
+
+};
+
+ObservableObject.prototype = Object.create(ObservableItem.prototype);
+
+Object.defineProperty(ObservableObject, '$value', {
+    get() {
+        return this.val();
+    },
+    set(value) {
+        this.set(value);
+    }
+})
+
+ObservableObject.prototype.__$isObservableObject = true;
+ObservableObject.prototype.__isProxy__ = true;
+
+ObservableObject.prototype.$load = function(initialValue) {
+    const configs = this.configs;
+    for(const key in initialValue) {
+        const itemValue = initialValue[key];
+        if(Array.isArray(itemValue)) {
+            if(configs?.deep !== false) {
+                const mappedItemValue = itemValue.map(item => {
+                    if(Validator.isJson(item)) {
+                        return Observable.json(item, configs);
+                    }
+                    if(Validator.isArray(item)) {
+                        return Observable.array(item, configs);
+                    }
+                    return Observable(item, configs);
+                });
+                this.$observables[key] = Observable.array(mappedItemValue, configs);
+                continue;
+            }
+            this.$observables[key] = Observable.array(itemValue, configs);
+            continue;
+        }
+        if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
+            this.$observables[key] = itemValue;
+            continue;
+        }
+        this.$observables[key] = Observable(itemValue, configs);
+    }
+};
+
+ObservableObject.prototype.val = function() {
+    const result = {};
+    for(const key in this.$observables) {
+        const dataItem = this.$observables[key];
+        if(Validator.isObservable(dataItem)) {
+            let value = dataItem.val();
+            if(Array.isArray(value)) {
+                value = value.map(item => {
+                    if(Validator.isObservable(item)) {
+                        return item.val();
+                    }
+                    if(Validator.isProxy(item)) {
+                        return item.$value;
+                    }
+                    return item;
+                });
+            }
+            result[key] = value;
+        } else if(Validator.isProxy(dataItem)) {
+            result[key] = dataItem.$value;
+        } else {
+            result[key] = dataItem;
+        }
+    }
+    return result;
+};
+ObservableObject.prototype.$val = ObservableObject.prototype.val;
+
+ObservableObject.prototype.get = function(property) {
+    const item = this.$observables[property];
+    if(Validator.isObservable(item)) {
+        return item.val();
+    }
+    if(Validator.isProxy(item)) {
+        return item.$value;
+    }
+    return item;
+};
+ObservableObject.prototype.$get = ObservableObject.prototype.get;
+
+ObservableObject.prototype.set = function(newData) {
+    const data = Validator.isProxy(newData) ? newData.$value : newData;
+    const configs = this.configs;
+
+    for(const key in data) {
+        const targetItem = this.$observables[key];
+        const newValueOrigin = newData[key];
+        const newValue = data[key];
+
+        if(Validator.isObservable(targetItem)) {
+            if(!Validator.isArray(newValue)) {
+                targetItem.set(newValue);
+                continue;
+            }
+            const firstElementFromOriginalValue = newValueOrigin.at(0);
+            if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
+                const newValues = newValue.map(item => {
+                    if(Validator.isProxy(firstElementFromOriginalValue)) {
+                        return Observable.init(item, configs);
+                    }
+                    return Observable(item, configs);
+                });
+                targetItem.set(newValues);
+                continue;
+            }
+            targetItem.set([...newValue]);
+            continue;
+        }
+        if(Validator.isProxy(targetItem)) {
+            targetItem.update(newValue);
+            continue;
+        }
+        this[key] = newValue;
+    }
+};
+ObservableObject.prototype.$set = ObservableObject.prototype.set;
+ObservableObject.prototype.$updateWith = ObservableObject.prototype.set;
+
+ObservableObject.prototype.observables = function() {
+    return Object.values(this.$observables);
+};
+ObservableObject.prototype.$observables = ObservableObject.prototype.observables;
+
+ObservableObject.prototype.keys = function() {
+    return Object.keys(this.$observables);
+};
+ObservableObject.prototype.$keys = ObservableObject.prototype.keys;
+ObservableObject.prototype.clone = function() {
+    return Observable.init(this.val(), this.configs);
+};
+ObservableObject.prototype.$clone = ObservableObject.prototype.clone;
+ObservableObject.prototype.reset = function() {
+    for(const key in this.$observables) {
+        this.$observables[key].reset();
+    }
+};
+ObservableObject.prototype.originalSubscribe = ObservableObject.prototype.subscribe;
+ObservableObject.prototype.subscribe = function(callback) {
+    const observables = this.observables();
+    const updatedValue = nextTick(() => {
+        this.$currentValue = this.val();
+        this.trigger()
+    });
+
+    this.originalSubscribe(callback);
+
+    for(let i = 0, length = observables.length; i < length; i++) {
+        const observable = observables[i];
+        observable.subscribe(updatedValue);
+    }
+};
+ObservableObject.prototype.configs = function() {
+    return this.configs;
+};
+
+ObservableObject.prototype.update = ObservableObject.prototype.set;