native-document 1.0.94 → 1.0.98

package/types/nd-element.d.ts

@@ -33,6 +33,12 @@ export interface NDElement {
     mounted(callback: (node: HTMLElement) => void): this;
     unmounted(callback: (node: HTMLElement) => boolean | void): this;
 
+    beforeUnmount(id: string, callback: (this: NDElement, el: HTMLElement) => void | Promise<void>): this;
+    transition(transitionName: string): this;
+    transitionIn(transitionName: string): this;
+    transitionOut(transitionName: string): this;
+    animate(animationName: string): this;
+
     htmlElement(): HTMLElement;
     node(): HTMLElement;
     shadow(mode: ShadowMode, style?: string | null): this;

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;
@@ -103,35 +152,42 @@ export interface ObservableArray<T> extends ObservableItem<T[]> {
     whereEvery<K extends keyof T>(fields: K[], filter: FilterResult<T[K]>): ObservableArray<T>;
 }
 
-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 +204,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 +221,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;
-        }
-    `);
-}

package/src/devtools/hrm/transformComponent.js

@@ -1,129 +0,0 @@
-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';
-import { parse } from '@babel/parser';
-import { default as traverse } from '@babel/traverse';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const renameImportedObservables = (content, match) => {
-    let isObservableFound = false;
-    let isObservableShortFound = false;
-    const transformedContentArray = match.split(',').map(item => {
-        let trimmed = item.trim();
-
-        if (trimmed === 'Observable') {
-            isObservableFound = true;
-            return 'Observable as __OriginalObservable__';
-        }
-        if (trimmed === '$') {
-            isObservableShortFound = true;
-            return '$ as __$__';
-        }
-
-        return ` ${trimmed}`;
-    });
-    if(!isObservableFound && isObservableShortFound) {
-        transformedContentArray.push('Observable as __OriginalObservable__')
-    }
-    const transformedContent = transformedContentArray.join(', ');
-
-    return `import {${transformedContent} } from 'native-document'`;
-};
-
-function transformObservableImports(code, params) {
-    const renameImportationCode = code.replace(/import\s+\{([^}]+?)\}\s+from\s+['"]native-document['"]/g, renameImportedObservables);
-    const isRenamed = renameImportationCode !== code;
-
-    const s = new MagicString(renameImportationCode);
-    if(isRenamed) {
-        //Todo: move this code outside the function
-        const hrmObservableHookTemplate = fs.readFileSync(__dirname + '/hrm.orbservable.hook.template.js', 'utf8');
-        s.append(template(
-            hrmObservableHookTemplate,
-            params ?? {}
-        ));
-    }
-
-    return s.toString();
-}
-
-function transformObservableDeclarations(code) {
-    const regex = /(const|let|var)\s+([\w$]+)\s*=\s*(\$|Observable)(\.(?:init|array|json))?\s*\(/g;
-
-    return code.replace(regex, (match, varType, varName, caller, method) => {
-        const obsName = method ? `${caller}${method}` : 'Observable';
-        return `${varType} ${varName} = ${obsName}('${varName}', arguments[arguments.length - 1], `;
-    });
-}
-
-function template(code, params) {
-    let codeFormatted = code;
-    for(const key in params) {
-        codeFormatted = codeFormatted.replace(new RegExp("\\$\{"+key+"}", 'ig'), params[key]);
-    }
-    return codeFormatted;
-}
-
-export default function transformComponent(id, code, options) {
-    let hasDefaultExport = false;
-    let componentName = null;
-    let exportStart = 0;
-    let exportEnd = 0;
-    // TODO: move this line outside the function
-    const hrmHookTemplate = fs.readFileSync(__dirname + '/hrm.hook.template.js', 'utf8');
-    const formattedCode = transformObservableDeclarations(
-        transformObservableImports(code, { id, ...options }),
-    );
-    const s = new MagicString(formattedCode);
-    const codeParsed = parse(formattedCode, {
-        sourceType: 'module',
-        plugins: []
-    });
-
-    traverse.default(codeParsed, {
-        ExportDefaultDeclaration(path) {
-            hasDefaultExport = true;
-            const declaration = path.node.declaration;
-
-            if (declaration.id) {
-                componentName = declaration.id.name;
-            } else if (declaration.type === 'Identifier') {
-                componentName = declaration.name;
-            } else {
-                componentName = 'AnonymousComponent';
-            }
-
-            exportStart = path.node.start;
-            exportEnd = path.node.end;
-        },
-    });
-    if (!hasDefaultExport) {
-        return null;
-    }
-
-    const originalExport = formattedCode.slice(exportStart, exportEnd);
-    const hrmComponentName = `__HRM_${componentName}__`;
-    const newExport = originalExport.replace(
-        'export default',
-        `const ${hrmComponentName} =`
-    );
-    s.overwrite(exportStart, exportEnd, newExport);
-
-    const hrmHookTemplateFormatted = template(hrmHookTemplate, {
-        id
-    });
-
-    s.prepend('import ComponentRegistry from "native-document/src/devtools/hrm/ComponentRegistry";');
-    s.append(`export default ComponentRegistry.register('${id}', ${hrmComponentName}, { preserveState: ${options.preserveState} });`);
-    s.append(hrmHookTemplateFormatted);
-
-    return {
-        code: s.toString(),
-        map: s.generateMap({ source: id, hires: true })
-    };
-}

package/src/devtools/index.js

@@ -1,18 +0,0 @@
-import App from './app/App';
-import {DevToolsPlugin} from "./plugin";
-
-const Devtools = (function () {
-
-    return {
-        config() {
-            console.log('devtool init configuratzion');
-        },
-        init() {
-            const app = App();
-            document.body.parentNode.appendChild(app.$element);
-        },
-        plugin: DevToolsPlugin
-    }
-}());
-
-export default Devtools;

package/src/devtools/widget/DevToolsWidget.js

@@ -1,26 +0,0 @@
-import {Div, Button} from "../../../elements";
-import {DevToolService} from "../plugin";
-
-export default function DevToolsWidget() {
-    let shouldFollowPointer = false;
-    const setFullScreen = () => {
-        alert('Move to full-screen');
-    }
-
-    const $element = Div({ class: 'devtools-app-panel-widget', style: 'left: 50%; top: 95%' }, [
-        Div({ class: 'widget-label'}, DevToolService.createdObservable),
-        Button({ class: 'widget-button' }, 'Full').nd.onClick(setFullScreen)
-    ]);
-
-    $element.nd
-        .onStopMouseDown(() => shouldFollowPointer = true)
-        .onMouseUp((event) => shouldFollowPointer = false);
-
-    document.addEventListener('mousemove', (event) => {
-        if(shouldFollowPointer) {
-            $element.style = 'left: '+event.clientX+'px; top: '+event.clientY+'px';
-        }
-    });
-
-    return $element;
-};