native-document 1.0.95 → 1.0.99

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

@@ -1,137 +1,10 @@
 import Validator from "../../utils/validator";
 import {Observable} from "../Observable";
+import {ObservableObject} from "../ObservableObject";
 
-const ObservableObjectValue = function(data) {
-    const result = {};
-    for(const key in data) {
-        const dataItem = data[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;
-};
-
-const ObservableGet = function(target, property) {
-    const item = target[property];
-    if(Validator.isObservable(item)) {
-        return item.val();
-    }
-    if(Validator.isProxy(item)) {
-        return item.$value;
-    }
-    return item;
-};
 
-/**
- * Creates an observable proxy for an object where each property becomes an observable.
- * Properties can be accessed directly or via getter methods.
- *
- * @param {Object} initialValue - Initial object value
- * @param {Object|null} [configs=null] - Configuration options
- * // @param {boolean} [configs.propagation=true] - Whether changes propagate to parent
- * @param {boolean} [configs.deep=false] - Whether to make nested objects observable
- * @param {boolean} [configs.reset=false] - Whether to enable reset() method
- * @returns {ObservableProxy} A proxy where each property is an observable
- * @example
- * const user = Observable.init({
- *   name: 'John',
- *   age: 25,
- *   address: { city: 'NYC' }
- * }, { deep: true });
- *
- * user.name.val(); // 'John'
- * user.name.set('Jane');
- * user.name = 'Jane X'
- * user.age.subscribe(val => console.log('Age:', val));
- */
 Observable.init = function(initialValue, configs = null) {
-    const data = {};
-    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);
-                });
-                data[key] = Observable.array(mappedItemValue, configs);
-                continue;
-            }
-            data[key] = Observable.array(itemValue, configs);
-            continue;
-        }
-        if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
-            data[key] = itemValue;
-            continue;
-        }
-        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(), configs);
-
-    const $updateWith = (values) => {
-        Observable.update(proxy, values);
-    };
-
-    const $get = (key) => ObservableGet(data, key);
-
-    const proxy = new Proxy(data, {
-        get(target, property) {
-            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) {
-                Validator.isObservable(newValue)
-                    ? target[prop].set(newValue.val())
-                    : target[prop].set(newValue);
-                return true;
-            }
-            return true;
-        }
-    });
-
-    return proxy;
+    return new ObservableObject(initialValue, configs)
 };
 
 /**
@@ -166,42 +39,5 @@ Observable.value = function(data) {
     return 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];
-        const newValueOrigin = newData[key];
-        const newValue = data[key];
-
-        if(Validator.isObservable(targetItem)) {
-            if(Validator.isArray(newValue)) {
-                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;
-            }
-            targetItem.set(newValue);
-            continue;
-        }
-        if(Validator.isProxy(targetItem)) {
-            Observable.update(targetItem, newValue);
-            continue;
-        }
-        $target[key] = newValue;
-    }
-};
-
 Observable.object = Observable.init;
 Observable.json = Observable.init;

package/src/core/utils/formatters.js

@@ -0,0 +1,91 @@
+const $parseDateParts = (value, locale) => {
+    const d = new Date(value);
+    return {
+        d,
+        parts: new Intl.DateTimeFormat(locale, {
+            year:   'numeric',
+            month:  'long',
+            day:    '2-digit',
+            hour:   '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+        }).formatToParts(d).reduce((acc, { type, value }) => {
+            acc[type] = value;
+            return acc;
+        }, {})
+    };
+};
+
+const $applyDatePattern = (pattern, d, parts) => {
+    const pad = n => String(n).padStart(2, '0');
+    return pattern
+        .replace('YYYY', parts.year)
+        .replace('YY',   parts.year.slice(-2))
+        .replace('MMMM', parts.month)
+        .replace('MMM',  parts.month.slice(0, 3))
+        .replace('MM',   pad(d.getMonth() + 1))
+        .replace('DD',   pad(d.getDate()))
+        .replace('D',    d.getDate())
+        .replace('HH',   parts.hour)
+        .replace('mm',   parts.minute)
+        .replace('ss',   parts.second);
+};
+
+export const Formatters = {
+
+    currency: (value, locale, { currency = 'XOF', notation, minimumFractionDigits, maximumFractionDigits } = {}) =>
+        new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            notation,
+            minimumFractionDigits,
+            maximumFractionDigits
+        }).format(value),
+
+    number: (value, locale, { notation, minimumFractionDigits, maximumFractionDigits } = {}) =>
+        new Intl.NumberFormat(locale, {
+            notation,
+            minimumFractionDigits,
+            maximumFractionDigits
+        }).format(value),
+
+    percent: (value, locale, { decimals = 1 } = {}) =>
+        new Intl.NumberFormat(locale, {
+            style:                'percent',
+            maximumFractionDigits: decimals
+        }).format(value),
+
+    date: (value, locale, { format, dateStyle = 'long' } = {}) => {
+        if (format) {
+            const { d, parts } = $parseDateParts(value, locale);
+            return $applyDatePattern(format, d, parts);
+        }
+        return new Intl.DateTimeFormat(locale, { dateStyle }).format(new Date(value));
+    },
+
+    time: (value, locale, { format, hour = '2-digit', minute = '2-digit', second } = {}) => {
+        if (format) {
+            const { d, parts } = $parseDateParts(value, locale);
+            return $applyDatePattern(format, d, parts);
+        }
+        return new Intl.DateTimeFormat(locale, { hour, minute, second }).format(new Date(value));
+    },
+
+    datetime: (value, locale, { format, dateStyle = 'long', hour = '2-digit', minute = '2-digit', second } = {}) => {
+        if (format) {
+            const { d, parts } = $parseDateParts(value, locale);
+            return $applyDatePattern(format, d, parts);
+        }
+        return new Intl.DateTimeFormat(locale, { dateStyle, hour, minute, second }).format(new Date(value));
+    },
+
+    relative: (value, locale, { unit = 'day', numeric = 'auto' } = {}) => {
+        const diff = Math.round((value - Date.now()) / (1000 * 60 * 60 * 24));
+        return new Intl.RelativeTimeFormat(locale, { numeric }).format(diff, unit);
+    },
+
+    plural: (value, locale, { singular, plural } = {}) => {
+        const rule = new Intl.PluralRules(locale).select(value);
+        return `${value} ${rule === 'one' ? singular : plural}`;
+    },
+};

package/src/core/utils/localstorage.js

@@ -0,0 +1,57 @@
+import NativeDocumentError from "../errors/NativeDocumentError";
+
+export const LocalStorage = {
+    getJson(key) {
+        let value = localStorage.getItem(key);
+        try {
+            return JSON.parse(value);
+        } catch (e) {
+            throw new NativeDocumentError('invalid_json:'+key);
+        }
+    },
+    getNumber(key) {
+        return Number(this.get(key));
+    },
+    getBool(key) {
+        const value = this.get(key);
+        return value === 'true' || value === '1';
+    },
+    setJson(key, value) {
+        localStorage.setItem(key, JSON.stringify(value));
+    },
+    setBool(key, value) {
+        localStorage.setItem(key, value ? 'true' : 'false');
+    },
+    get(key, defaultValue = null) {
+        return localStorage.getItem(key) || defaultValue;
+    },
+    set(key, value) {
+        return localStorage.setItem(key, value);
+    },
+    remove(key) {
+        localStorage.removeItem(key);
+    },
+    has(key) {
+        return localStorage.getItem(key) != null;
+    }
+}
+
+export const $getFromStorage = (key, value) => {
+    if(!LocalStorage.has(key)) {
+        return value;
+    }
+    switch (typeof value) {
+        case 'object': return LocalStorage.getJson(key) ?? value;
+        case 'boolean': return LocalStorage.getBool(key) ?? value;
+        case 'number': return LocalStorage.getNumber(key) ?? value;
+        default: return LocalStorage.get(key, value) ?? value;
+    }
+};
+
+export const $saveToStorage = (value) => {
+    switch (typeof value) {
+        case 'object': return LocalStorage.setJson;
+        case 'boolean': return LocalStorage.setBool;
+        default: return LocalStorage.set;
+    }
+};

package/src/core/utils/validator.js

@@ -1,9 +1,7 @@
-import ObservableItem from "../data/ObservableItem";
 import DebugManager from "./debug-manager";
 import NativeDocumentError from "../errors/NativeDocumentError";
 import ObservableChecker from "../data/ObservableChecker";
 import {NDElement} from "../wrappers/NDElement";
-import TemplateBinding from "../wrappers/TemplateBinding";
 
 const COMMON_NODE_TYPES = {
     ELEMENT: 1,

package/src/fetch/NativeFetch.js

@@ -36,11 +36,14 @@ export default function NativeFetch($baseUrl) {
                 configs.body = params;
             }
             else {
-                configs.headers['Content-Type'] = 'application/json';
                 if(method !== 'GET') {
+                    configs.headers['Content-Type'] = 'application/json';
                     configs.body = JSON.stringify(params);
                 } else {
-                    configs.params = params;
+                    const queryString = new URLSearchParams(params).toString();
+                    if (queryString) {
+                        endpoint = endpoint + (endpoint.includes('?') ? '&' : '?') + queryString;
+                    }
                 }
             }
         }

package/types/observable.d.ts

@@ -1,7 +1,47 @@
-import {FilterResult, PredicateMap} from "./filters/types";
+import {FilterResult, PredicateMap} from "./filters";
 
 export type Unsubscribe = () => void;
 
+export type FormatType = 'currency' | 'number' | 'percent' | 'date' | 'time' | 'datetime' | 'relative' | 'plural';
+
+export interface FormatOptions {
+    // currency
+    currency?: string;
+    notation?: 'standard' | 'scientific' | 'engineering' | 'compact';
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    // percent
+    decimals?: number;
+    // date / datetime
+    dateStyle?: 'full' | 'long' | 'medium' | 'short';
+    format?: string;
+    // time / datetime
+    hour?: '2-digit' | 'numeric';
+    minute?: '2-digit' | 'numeric';
+    second?: '2-digit' | 'numeric';
+    // relative
+    unit?: 'day' | 'week' | 'month' | 'year' | 'hour' | 'minute' | 'second';
+    numeric?: 'always' | 'auto';
+    // plural
+    singular?: string;
+    plural?: string;
+}
+
+export interface FormattersStatic {
+    currency(value: number, locale: string, options?: FormatOptions): string;
+    number(value: number, locale: string, options?: FormatOptions): string;
+    percent(value: number, locale: string, options?: FormatOptions): string;
+    date(value: Date | number, locale: string, options?: FormatOptions): string;
+    time(value: Date | number, locale: string, options?: FormatOptions): string;
+    datetime(value: Date | number, locale: string, options?: FormatOptions): string;
+    relative(value: Date | number, locale: string, options?: FormatOptions): string;
+    plural(value: number, locale: string, options?: FormatOptions): string;
+    [key: string]: (value: any, locale: string, options?: FormatOptions) => string;
+}
+
+export declare const Formatters: FormattersStatic;
+
+
 // Observable system type definitions
 export interface ObservableItem<T = any> {
     readonly $currentValue: T;
@@ -22,12 +62,21 @@ export interface ObservableItem<T = any> {
     on(value: T, callback: ObservableItem<boolean> | ((isActive: boolean) => void)): () => void;
 
     check<U>(callback: (value: T) => U): ObservableChecker<U>;
-    get<U>(callback: (value: T) => U): ObservableChecker<U>;
+    transform<U>(callback: (value: T) => U): ObservableChecker<U>;
+    is<U>(callback: (value: T) => U): ObservableChecker<U>;
+    select<U>(callback: (value: T) => U): ObservableChecker<U>;
+    pluck<U>(callback: (value: T) => U): ObservableChecker<U>;
+    format(type: FormatType | ((value: T) => string), options?: FormatOptions): ObservableItem<string>;
+    get(key: string | number): any;
     when(value: T): ObservableWhen<T>;
     off(value: T, callback?: Function): void;
     once(predicate: T | ((value: T) => boolean), callback: (value: T) => void): void;
     onCleanup(callback: () => void): void;
     intercept(callback: (newValue: T, currentValue: T) => T | undefined): this;
+    persist(key: string, options?: {
+        get?: (value: any) => T;
+        set?: (value: T) => any;
+    }): this;
     disconnectAll(): void;
 
     toString(): string;
@@ -101,37 +150,46 @@ export interface ObservableArray<T> extends ObservableItem<T[]> {
     where(predicates: PredicateMap<T>): ObservableArray<T>;
     whereSome<K extends keyof T>(fields: K[], filter: FilterResult<T[K]>): ObservableArray<T>;
     whereEvery<K extends keyof T>(fields: K[], filter: FilterResult<T[K]>): ObservableArray<T>;
+
+    deepSubscribe(callback: (value: T[]) => void): () => void;
 }
 
-export type ObservableProxy<T extends Record<string, any>> = {
+export type ObservableObject<T extends Record<string, any>> = ObservableItem<T> & {
+    readonly __$isObservableObject: true;
     readonly __isProxy__: true;
-    readonly $value: T;
+    readonly $observables: { [K in keyof T]: ObservableItem<T[K]> };
     readonly configs: ObservableConfig | null;
+
+    $load(initialValue: Partial<T>): void;
     $val(): T;
     val(): T;
-    $get(key: string): any;
     get(key: string): any;
-    $clone(): ObservableProxy<T>;
-    clone(): ObservableProxy<T>;
-    $updateWith(values: Partial<T>): void;
-    $set(values: Partial<T>): void;
+    $get(key: string): any;
     set(values: Partial<T>): void;
+    $set(values: Partial<T>): void;
+    $updateWith(values: Partial<T>): void;
+    update(values: Partial<T>): void;
     reset(): void;
+    clone(): ObservableObject<T>;
+    $clone(): ObservableObject<T>;
     keys(): string[];
+    $keys(): string[];
+    observables(): ObservableItem<any>[];
 } & {
     [K in keyof T]: T[K] extends (infer U)[]
         ? ObservableArray<U>
         : T[K] extends Record<string, any>
-            ? ObservableProxy<T[K]>
+            ? ObservableObject<T[K]>
             : ObservableItem<T[K]>;
 };
 
+
 export interface BatchFunction<TArgs extends any[] = any[], TReturn = any> {
     (...args: TArgs): TReturn;
     readonly $observer: ObservableItem<number>;
 }
 
-export type ValidComputedDependencies = Array<ObservableItem | ObservableArray<any> | ObservableChecker | ObservableProxy<any>>;
+export type ValidComputedDependencies = Array<ObservableItem | ObservableArray<any> | ObservableChecker | ObservableObject<any>>;
 
 export interface AutoCleanupOptions {
     interval?: number;
@@ -148,9 +206,9 @@ export interface ObservableStatic {
     <T>(value: T, configs?: ObservableConfig | null): ObservableItem<T>;
     array<T>(target: T[] | null, configs?: ObservableConfig | null): ObservableArray<T>;
 
-    init<T extends Record<string, any>>(value: T, configs?: ObservableConfig | null): ObservableProxy<T>;
-    object<T extends Record<string, any>>(value: T, configs?: ObservableConfig | null): ObservableProxy<T>;
-    json<T extends Record<string, any>>(value: T, configs?: ObservableConfig | null): ObservableProxy<T>;
+    init<T extends Record<string, any>>(value: T, configs?: ObservableConfig | null): ObservableObject<T>;
+    object<T extends Record<string, any>>(value: T, configs?: ObservableConfig | null): ObservableObject<T>;
+    json<T extends Record<string, any>>(value: T, configs?: ObservableConfig | null): ObservableObject<T>;
 
     computed<T>(callback: () => T, dependencies?: ValidComputedDependencies | BatchFunction): ObservableItem<T>;
     computed<T>(callback: () => T, batchFunction?: BatchFunction): ObservableItem<T>;
@@ -165,5 +223,5 @@ export interface ObservableStatic {
     getById(id: number): ObservableItem | null;
     cleanup(observable: ObservableItem): void;
     autoCleanup(enable?: boolean, options?: AutoCleanupOptions): void;
-    arrayOfObject<T extends Record<string, any>>(data: T[]): ObservableProxy<T>[];
+    arrayOfObject<T extends Record<string, any>>(data: T[]): ObservableObject<T>[];
 }

package/types/plugins-manager.d.ts

@@ -1,4 +1,4 @@
-import {NDElement} from "./elements";
+import {NDElement} from "./nd-element";
 import {ObservableItem} from "./observable";
 import { Map} from "./polyfill";
 

package/types/store.d.ts

@@ -1,12 +1,39 @@
-// Store system type definitions
 import { ObservableItem } from './observable';
-import {Set} from "./polyfill";
+import { Set } from "./polyfill";
+
+export type StoreGroupInstance = StoreStatic & {
+    readonly $name: string;
+};
 
 export interface StoreStatic {
     create<T>(name: string, value: T): ObservableItem<T>;
-    use<T>(name: string): ObservableItem<T>;
-    follow<T>(name: string): ObservableItem<T>;
+    createResettable<T>(name: string, value: T): ObservableItem<T>;
+    createComposed<T>(
+        name: string,
+        computation: () => T,
+        dependencies: (string | ObservableItem<any>)[]
+    ): ObservableItem<T>;
+    createPersistent<T>(name: string, value: T, localStorageKey?: string): ObservableItem<T>;
+    createPersistentResettable<T>(name: string, value: T, localStorageKey?: string): ObservableItem<T>;
+
+    has(name: string): boolean;
     get<T>(name: string): ObservableItem<T> | null;
-    getWithSubscribers<T>(name: string): { observer: ObservableItem<T>; subscribers: Set<ObservableItem<T>> } | undefined;
+    getWithSubscribers<T>(name: string): {
+        observer: ObservableItem<T>;
+        subscribers: Set<ObservableItem<T>>;
+    } | null;
+
+    use<T>(name: string): ObservableItem<T>;
+    follow<T>(name: string): Readonly<ObservableItem<T>>;
+
+    reset(name: string): void;
     delete(name: string): void;
-}
+
+    group(callback: (group: StoreGroupInstance) => void): StoreGroupInstance;
+    group(name: string, callback: (group: StoreGroupInstance) => void): StoreGroupInstance;
+
+    readonly [key: string]: ObservableItem<any> | unknown;
+}
+
+export declare const StoreFactory: () => StoreStatic;
+export declare const Store: StoreStatic;

package/hrm.js

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

package/src/devtools/app/App.js

@@ -1,66 +0,0 @@
-import {Div} from "../../../elements";
-import DevToolsWidget from "../../devtools/widget/DevToolsWidget";
-
-export default function App() {
-
-
-    return Div(
-        Div({ class: 'devtools-app-panel-wrapper pin-to-right' }, [
-            DevToolsWidget,
-            Div({ class: 'devtools-app-panel' }),
-            Div('Gogo Panel')
-        ]),
-    ).nd.closedShadow(`
-        .devtools-app-panel-wrapper {
-            position: fixed;
-            width: 0px;
-            background: red;
-            animate: .25s linear;
-        }
-        .devtools-app-panel-wrapper.pin-to-right {
-            right: 0;
-            top: 0;
-            bottom: 0;
-        }
-        .devtools-app-panel-widget {
-            position: fixed;
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(5px);
-            padding: 2px;
-            width: 150px;
-            height: 30px;
-            border-radius: 5px;
-            border: 1px solid black;
-            z-index: 10000009;
-            color: white;
-            cursor: pointer;
-            transform: translate(-50%, -50%);
-            display: flex;
-            justify-content: space-between;
-            align-items: stretch;
-            align-content: center;
-        }
-        .widget-button {
-            width: 30px;
-            padding: 2px;
-            background: rgba(0, 0, 0, 0.8);
-            border: 1px solid black;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            align-content: center;
-            color: white;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: .9rem;
-        }
-        .widget-label {
-            font-weight: bold;
-            font-size: 1.5rem;
-            flex: 1;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-    `);
-}