native-document 1.0.14 → 1.0.16-8.1

package/src/core/utils/shortcut-manager.js

@@ -0,0 +1,242 @@
+import DebugManager from '../../core/utils/debug-manager';
+
+const isMac = navigator.platform.toUpperCase().includes('MAC')
+    || navigator.userAgent.includes('Mac');
+
+const MAC_SYMBOLS = {
+    meta:  '⌘',
+    shift: '⇧',
+    alt:   '⌥',
+    ctrl:  '⌃',
+};
+
+const WIN_LABELS = {
+    meta:  'Ctrl',
+    shift: 'Shift',
+    alt:   'Alt',
+    ctrl:  'Ctrl',
+};
+
+/**
+ * Parse a shortcut string into a normalized object.
+ * Supports:
+ *   Short convention : '+S', '++S', '+Shift+S'
+ *   Standard         : 'Ctrl+S', 'Cmd+S', 'Ctrl+Alt+S'
+ */
+const parse = (shortcut) => {
+    if(!shortcut) return null;
+
+    const result = { meta: false, shift: false, alt: false, ctrl: false, key: '' };
+
+    // Short convention — starts with '+'
+    if(shortcut.startsWith('+')) {
+        result.meta = true;
+
+        let rest = shortcut.slice(1);
+
+        // '++S' → alt
+        if(rest.startsWith('+')) {
+            result.alt = true;
+            rest = rest.slice(1);
+        }
+
+        const parts = rest.split('+').filter(Boolean);
+
+        for(const part of parts) {
+            const upper = part.toUpperCase();
+            if(upper === 'SHIFT')      result.shift = true;
+            else if(upper === 'ALT')   result.alt   = true;
+            else if(upper === 'CTRL')  result.ctrl  = true;
+            else                       result.key   = part.toUpperCase();
+        }
+
+        return result;
+    }
+
+    // Standard convention — 'Ctrl+S', 'Cmd+Shift+S'
+    const parts = shortcut.split('+').filter(Boolean);
+
+    for(const part of parts) {
+        const upper = part.toUpperCase();
+        if(upper === 'CTRL' || upper === 'CMD' || upper === 'META') result.meta  = true;
+        else if(upper === 'SHIFT')                                   result.shift = true;
+        else if(upper === 'ALT' || upper === 'OPTION')               result.alt   = true;
+        else                                                         result.key   = part.toUpperCase();
+    }
+
+    return result;
+};
+
+/**
+ * Normalize a parsed shortcut to a canonical key string
+ * used for storage and comparison.
+ */
+const normalize = (parsed) => {
+    const parts = [];
+    if(parsed.meta)  parts.push('meta');
+    if(parsed.ctrl)  parts.push('ctrl');
+    if(parsed.shift) parts.push('shift');
+    if(parsed.alt)   parts.push('alt');
+    parts.push(parsed.key.toLowerCase());
+    return parts.join('+');
+};
+
+const displayOnMac = (shortcut) => {
+    const parsed = parse(shortcut);
+    if(!parsed) return '';
+
+    const parts = [];
+
+    if(parsed.meta) {
+        parts.push(MAC_SYMBOLS.meta);
+    }
+    if(parsed.ctrl) {
+        parts.push(MAC_SYMBOLS.ctrl);
+    }
+    if(parsed.shift) {
+        parts.push(MAC_SYMBOLS.shift);
+    }
+    if(parsed.alt) {
+        parts.push(MAC_SYMBOLS.alt);
+    }
+    parts.push(parsed.key);
+
+    return parts.join(' ');
+};
+
+const displayOnWindows = (shortcut) => {
+    const parsed = parse(shortcut);
+    if(!parsed) return '';
+
+    const parts = [];
+    if(parsed.meta || parsed.ctrl) {
+        parts.push(WIN_LABELS.meta);
+    }
+    if(parsed.shift) {
+        parts.push(WIN_LABELS.shift);
+    }
+    if(parsed.alt) {
+        parts.push(WIN_LABELS.alt);
+    }
+    parts.push(parsed.key);
+
+    return parts.join('+');
+};
+
+/**
+ * Display a shortcut string for the current OS.
+ */
+const display = isMac ? displayOnMac : displayOnWindows;
+
+const $registry   = new Map();
+const $handlers   = new Map();
+
+const ShortcutManager = {
+
+    /**
+     * Register a shortcut.
+     * @param {string} shortcut
+     * @param {Function} handler
+     * @param {{ context?: string, force?: boolean, source?: string }} options
+     */
+    register(shortcut, handler, options = {}) {
+        const parsed = parse(shortcut);
+        if(!parsed || !parsed.key) {
+            DebugManager.warn(`ShortcutManager: invalid shortcut "${shortcut}"`);
+            return this;
+        }
+
+        const key     = normalize(parsed);
+        const context = options.context || 'global';
+        const source  = options.source  || 'unknown';
+        const mapKey  = context + ':' + key;
+
+        if($registry.has(mapKey) && !options.force) {
+            const existing = $registry.get(mapKey);
+            DebugManager.warn(
+                `ShortcutManager: "${shortcut}" is already registered by "${existing.source}" in context "${context}". Use { force: true } to override.`,
+            );
+            return this;
+        }
+
+        $registry.set(mapKey, {handler, source, context, parsed});
+        return this;
+    },
+
+    /**
+     * Unregister a shortcut.
+     */
+    unregister(shortcut, context = 'global') {
+        const parsed = parse(shortcut);
+        if(!parsed) return this;
+
+        const key    = normalize(parsed);
+        const mapKey = context + ':' + key;
+
+        $registry.delete(mapKey);
+        return this;
+    },
+
+    /**
+     * Display a shortcut for the current OS.
+     */
+    display,
+
+    /**
+     * Parse a shortcut string.
+     */
+    parse,
+
+    /**
+     * Check if a shortcut is registered.
+     */
+    has(shortcut, context = 'global') {
+        const parsed = parse(shortcut);
+        if(!parsed) return false;
+        return $registry.has(context + ':' + normalize(parsed));
+    },
+
+    /**
+     * Initialize the global keyboard listener.
+     */
+    init() {
+        if(this.$initialized) {
+            return this;
+        }
+
+        this.$initialized = true;
+
+        document.addEventListener('keydown', (e) => {
+            const key = e.key.toUpperCase();
+
+            const parts = [];
+            if(e.metaKey || e.ctrlKey) parts.push('meta');
+            if(e.ctrlKey && !e.metaKey) parts.push('ctrl');
+            if(e.shiftKey)              parts.push('shift');
+            if(e.altKey)                parts.push('alt');
+            parts.push(key.toLowerCase());
+            parts.push(key.toLowerCase());
+
+            const normalizedKey = parts.join('+');
+
+            const globalKey = 'global:' + normalizedKey;
+            if($registry.has(globalKey)) {
+                e.preventDefault();
+                $registry.get(globalKey).handler(e);
+                return;
+            }
+
+            for(const [mapKey, entry] of $registry.entries()) {
+                if(mapKey.endsWith(':' + normalizedKey) && entry.context !== 'global') {
+                    e.preventDefault();
+                    entry.handler(e);
+                    return;
+                }
+            }
+        });
+
+        return this;
+    },
+};
+
+export default ShortcutManager;

package/src/{utils → core/utils}/validator.js

@@ -1,17 +1,44 @@
-import ObservableItem from "../data/ObservableItem";
-import DebugManager from "./debug-manager";
-import NativeDocumentError from "../errors/NativeDocumentError";
-import ObservableChecker from "../data/ObservableChecker";
+import DebugManager from './debug-manager';
+import NativeDocumentError from '../errors/NativeDocumentError';
+
+const COMMON_NODE_TYPES = {
+    ELEMENT: 1,
+    TEXT: 3,
+    COMMENT: 8,
+    DOCUMENT: 9,
+    DOCUMENT_FRAGMENT: 11,
+};
+
+export const VALID_TYPES = [];
+VALID_TYPES[COMMON_NODE_TYPES.ELEMENT] = true;
+VALID_TYPES[COMMON_NODE_TYPES.TEXT] = true;
+VALID_TYPES[COMMON_NODE_TYPES.DOCUMENT_FRAGMENT] = true;
+VALID_TYPES[COMMON_NODE_TYPES.COMMENT] = true;
 
 const Validator = {
     isObservable(value) {
-        return value instanceof ObservableItem || value instanceof ObservableChecker;
+        return  value && (value.__$isObservable || value.__$Observable);
+    },
+    isTemplateBinding(value) {
+        return  value?.__$isTemplateBinding;
+    },
+    isObservableWhenResult(value) {
+        return value && (value.__$isObservableWhen || (typeof value === 'object' && '$target' in value && '$observer' in value));
+    },
+    isArrayObservable(value) {
+        return  value?.__$isObservableArray;
     },
     isProxy(value) {
-        return value?.__isProxy__
+        return value?.__isProxy__;
+    },
+    isObservableOrProxy(value) {
+        return value?.__$Observable;
+    },
+    isAnchor(value) {
+        return value?.__Anchor__;
     },
     isObservableChecker(value) {
-        return value instanceof ObservableChecker;
+        return value?.__$isObservableChecker;
     },
     isArray(value) {
         return Array.isArray(value);
@@ -32,27 +59,33 @@ const Validator = {
         return typeof value === 'function' && value.constructor.name === 'AsyncFunction';
     },
     isObject(value) {
-        return typeof value === 'object';
+        return typeof value === 'object' && value !== null;
     },
     isJson(value) {
-        return typeof value === 'object' && value !== null && value.constructor.name === 'Object' && !Array.isArray(value);
+        return !(typeof value !== 'object' || value === null || Array.isArray(value) || value.constructor.name !== 'Object');
     },
     isElement(value) {
-        return value instanceof HTMLElement || value instanceof DocumentFragment  || value instanceof Text;
+        return value && VALID_TYPES[value.nodeType];
+    },
+    isDOMNode(value) {
+        return VALID_TYPES[value.nodeType];
     },
     isFragment(value) {
-        return value instanceof DocumentFragment;
+        return value?.nodeType === COMMON_NODE_TYPES.DOCUMENT_FRAGMENT;
     },
     isStringOrObservable(value) {
         return this.isString(value) || this.isObservable(value);
     },
-
     isValidChild(child) {
         return child === null ||
             this.isElement(child) ||
-            this.isObservable(child) ||
+            child.__$Observable ||
+            child?.__$isNDElement ||
             ['string', 'number', 'boolean'].includes(typeof child);
     },
+    isNDElement(child) {
+        return child?.__$isNDElement;
+    },
     isValidChildren(children) {
         if (!Array.isArray(children)) {
             children = [children];
@@ -96,7 +129,16 @@ const Validator = {
         }
         return /\{\{#ObItem::\([0-9]+\)\}\}/.test(data);
     },
-    validateAttributes(attributes) {
+    validateAttributes(attributes) {},
+
+    validateEventCallback(callback) {
+        if (typeof callback !== 'function') {
+            throw new NativeDocumentError('Event callback must be a function');
+        }
+    },
+};
+if(process.env.NODE_ENV === 'development') {
+    Validator.validateAttributes = function(attributes) {
         if (!attributes || typeof attributes !== 'object') {
             return attributes;
         }
@@ -109,13 +151,7 @@ const Validator = {
         }
 
         return attributes;
-    },
-
-    validateEventCallback(callback) {
-        if (typeof callback !== 'function') {
-            throw new NativeDocumentError('Event callback must be a function');
-        }
-    }
-};
+    };
+}
 
 export default Validator;

package/src/core/wrappers/AttributesWrapper.js

@@ -0,0 +1,181 @@
+import Validator from '../utils/validator';
+import NativeDocumentError from '../errors/NativeDocumentError';
+import {BOOL_ATTRIBUTES_NAME, BOOLEAN_ATTRIBUTES} from './constants.js';
+import {Observable} from '../data/Observable';
+
+/**
+ * Applies a reactive class map to an HTMLElement.
+ * Each key is a CSS class name; each value is a boolean or ObservableItem<boolean>.
+ * If the value is an ObservableChecker emitting a string, toggles the class name dynamically.
+ *
+ * @param {HTMLElement} element - Target element
+ * @param {Record<string, boolean|ObservableItem<boolean>|ObservableChecker<boolean|string>>} data - Class map
+ */
+export const bindClassAttribute = (element, data) => {
+    for(const className in data) {
+        const value = data[className];
+        if(value.__$Observable) {
+            if(value.__$isObservableChecker) {
+                let lastClass = value.val();
+                if(typeof lastClass === 'string') {
+                    element.classes.toggle(lastClass, true);
+                    value.subscribe((currentValue) => {
+                        element.classes.remove(lastClass);
+                        element.classes.toggle(currentValue, true);
+                        lastClass = currentValue;
+                    });
+                    continue;
+                }
+            }
+            element.classes.toggle(className, value.val());
+            value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+            continue;
+        }
+        if(value.$hydrate) {
+            value.$hydrate(element, className);
+            continue;
+        }
+        element.classes.toggle(className, value);
+    }
+};
+
+/**
+ * Applies a reactive style map to an HTMLElement.
+ * Each key is a CSS property name (camelCase or CSS custom property `--var`);
+ * each value is a string or ObservableItem<string>.
+ * CSS custom properties are set via element.style.setProperty().
+ *
+ * @param {HTMLElement} element - Target element
+ * @param {Record<string, string|ObservableItem<string>>} data - Style map
+ */
+export const bindStyleAttribute = (element, data) => {
+    for(const styleName in data) {
+        const value = data[styleName];
+        const isCustomProperty = styleName.startsWith('--');
+
+        if(value.__$Observable) {
+            if(isCustomProperty) {
+                element.style.setProperty(styleName, value.val());
+                value.subscribe((newValue) => {
+                    if(newValue === false) {
+                        element.style.removeProperty(styleName);
+                        return;
+                    }
+                    element.style.setProperty(styleName, newValue);
+                });
+            } else {
+                element.style[styleName] = value.val();
+                value.subscribe((newValue) => {
+                    if(newValue === false) {
+                        element.style.removeProperty(styleName);
+                        return;
+                    }
+                    element.style[styleName] = newValue;
+                });
+            }
+            continue;
+        }
+
+        if(isCustomProperty) {
+            element.style.setProperty(styleName, value);
+            continue;
+        }
+
+        element.style[styleName] = value;
+    }
+};
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {string} attributeName
+ * @param {boolean|number|Observable} value
+ */
+export const bindBooleanAttribute = (element, attributeName, value) => {
+    const isObservable = value.__$isObservable;
+    const defaultValue = isObservable? value.val() : value;
+
+    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName];
+
+    if(Validator.isBoolean(defaultValue)) {
+        element[attributeRealName] = defaultValue;
+    }
+    else {
+        element[attributeRealName] = defaultValue === element.value;
+    }
+    if(isObservable) {
+        if(attributeName === 'checked') {
+            if(typeof defaultValue === 'boolean') {
+                element.addEventListener('input', () => value.set(element[attributeRealName]));
+            }
+            else {
+                element.addEventListener('input', () => value.set(element.value));
+            }
+            value.subscribe((newValue) => element[attributeRealName] = newValue);
+            return;
+        }
+        value.subscribe((newValue) => element[attributeRealName] = (newValue === element.value));
+    }
+};
+
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {string} attributeName
+ * @param {Observable} value
+ */
+export const bindAttributeWithObservable = (element, attributeName, value) => {
+    const applyValue = attributeName === 'value' ? (newValue) => element.value = newValue : (newValue) => element.setAttribute(attributeName, newValue);
+    value.subscribe(applyValue);
+
+    if(attributeName === 'value') {
+        element.value = value.val();
+        element.addEventListener('input', () => value.set(element.value));
+        return;
+    }
+    element.setAttribute(attributeName, value.val());
+};
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {Object} attributes
+ */
+const AttributesWrapper = (element, attributes) => {
+
+    if(process.env.NODE_ENV === 'development') {
+        Validator.validateAttributes(attributes);
+    }
+
+    for(const originalAttributeName in attributes) {
+        const attributeName = originalAttributeName.toLowerCase();
+        const value = attributes[originalAttributeName];
+        if(value == null) {
+            continue;
+        }
+        if(value.handleNdAttribute) {
+            value.handleNdAttribute(element, attributeName, value);
+            continue;
+        }
+        if(typeof value ===  'object') {
+            if(attributeName === 'class') {
+                bindClassAttribute(element, value);
+                continue;
+            }
+            if(attributeName === 'style') {
+                bindStyleAttribute(element, value);
+                continue;
+            }
+        }
+        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+            bindBooleanAttribute(element, attributeName, value);
+            continue;
+        }
+
+        element.setAttribute(attributeName, value);
+    }
+    return element;
+};
+
+export default AttributesWrapper;