native-document 1.0.151 → 1.0.152

package/src/core/data/observable-helpers/observable.prototypes.js

@@ -0,0 +1,119 @@
+/**
+ * Creates an ObservableWhen that represents whether the observable equals a specific value.
+ * Returns an object that can be subscribed to and will emit true/false.
+ *
+ * @param {*} value - The value to compare against
+ * @returns {ObservableWhen} An ObservableWhen instance that tracks when the observable equals the value
+ * @example
+ * const status = Observable('idle');
+ * const isLoading = status.when('loading');
+ * isLoading.subscribe(active => console.log('Loading:', active));
+ * status.set('loading'); // Logs: "Loading: true"
+ */
+import {ObservableWhen} from "../ObservableWhen";
+import ObservableItem from "../ObservableItem";
+import ObservableChecker from "../ObservableChecker";
+import {Formatters} from "../../utils/formatters";
+import NativeDocumentError from "../../errors/NativeDocumentError";
+import {Observable} from "../Observable";
+
+ObservableItem.prototype.when = function(value) {
+    return new ObservableWhen(this, value);
+};
+
+
+
+/**
+ * Create an Observable checker instance
+ * @param callback
+ * @returns {ObservableChecker}
+ */
+ObservableItem.prototype.check = function(callback) {
+    return new ObservableChecker(this, callback)
+};
+
+ObservableItem.prototype.transform = ObservableItem.prototype.check;
+ObservableItem.prototype.pluck = function(property) {
+    return new ObservableChecker(this, (value) => value[property]);
+};
+ObservableItem.prototype.is = function(callbackOrValue) {
+    if(typeof callbackOrValue === 'function') {
+        return new ObservableChecker(this, callbackOrValue);
+    }
+    return new ObservableChecker(this, (value) => value === callbackOrValue);
+};
+ObservableItem.prototype.select = ObservableItem.prototype.check;
+
+/**
+ * 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 = Formatters.locale;
+
+    return Observable.computed(() => formatter(self.val(), localeObservable.val(), options),
+        [self, localeObservable]
+    );
+};

package/src/core/utils/validator.js

@@ -1,7 +1,5 @@
 import DebugManager from "./debug-manager";
 import NativeDocumentError from "../errors/NativeDocumentError";
-import ObservableChecker from "../data/ObservableChecker";
-import {NDElement} from "../wrappers/NDElement";
 
 const COMMON_NODE_TYPES = {
     ELEMENT: 1,
@@ -40,7 +38,7 @@ const Validator = {
         return value?.__Anchor__
     },
     isObservableChecker(value) {
-        return value?.__$isObservableChecker || value instanceof ObservableChecker;
+        return value?.__$isObservableChecker;
     },
     isArray(value) {
         return Array.isArray(value);
@@ -81,12 +79,12 @@ const Validator = {
     isValidChild(child) {
         return child === null ||
             this.isElement(child) ||
-            this.isObservable(child) ||
-            this.isNDElement(child) ||
+            child.__$Observable ||
+            child?.__$isNDElement ||
             ['string', 'number', 'boolean'].includes(typeof child);
     },
     isNDElement(child) {
-        return child?.__$isNDElement || child instanceof NDElement;
+        return child?.__$isNDElement;
     },
     isValidChildren(children) {
         if (!Array.isArray(children)) {

package/src/core/wrappers/ElementCreator.js

@@ -1,13 +1,7 @@
-import Anchor from "../elements/anchor/anchor";
 import Validator from "../utils/validator";
 import AttributesWrapper, { bindClassAttribute, bindStyleAttribute } from "./AttributesWrapper";
 import PluginsManager from "../utils/plugins-manager";
-import './prototypes/nd-element-extensions';
-import './prototypes/nd-element.transition.extensions';
-import './prototypes/attributes-extensions';
-import './prototypes/bind-class-extensions';
 
-const $nodeCache = new Map();
 let $textNodeCache = null;
 
 export const ElementCreator = {
@@ -64,9 +58,6 @@ export const ElementCreator = {
         const node = document.createElement(name);
         return node.cloneNode();
     },
-    createFragment: (name) => {
-        return Anchor('Fragment');
-    },
     bindTextNode: (textNode, value) => {
         if(value?.__$isObservable) {
             value.subscribe(newValue => textNode.nodeValue = newValue);

package/src/core/wrappers/NDElement.js

@@ -2,8 +2,6 @@ import DocumentObserver from "./DocumentObserver";
 import PluginsManager from "../utils/plugins-manager";
 import NativeDocumentError from "../errors/NativeDocumentError.js";
 import DebugManager from "../utils/debug-manager.js";
-import Anchor from "../elements/anchor/anchor";
-import {ElementCreator} from "./ElementCreator";
 
 export function NDElement(element) {
     this.$element = element;
@@ -15,11 +13,13 @@ export function NDElement(element) {
 
 NDElement.prototype.__$isNDElement = true;
 
+NDElement.$getChild = (el) => el;
+
 NDElement.prototype.ghostDom = function(element) {
     if(!this.$attachements) {
         this.$attachements = document.createDocumentFragment();
     }
-    this.$attachements.appendChild(ElementCreator.getChild(element));
+    this.$attachements.appendChild(NDElement.$getChild(element));
     return this;
 };
 

package/src/core/wrappers/prototypes/nd-element-extensions.js

@@ -5,6 +5,9 @@ import {ElementCreator} from "../ElementCreator";
 import PluginsManager from "../../utils/plugins-manager";
 import ObservableChecker from "../../data/ObservableChecker";
 
+
+NDElement.$getChild = ElementCreator.getChild;
+
 String.prototype.toNdElement = function () {
     return ElementCreator.createStaticTextNode(null, this);
 };