native-document 1.0.15 → 1.0.16-8.2

package/src/core/elements/meta-data.js

@@ -0,0 +1,43 @@
+import HtmlElementWrapper from '../wrappers/HtmlElementWrapper';
+
+/**
+ * Creates a `<time>` element.
+ * @type {function(TimeAttributes=, NdChild|NdChild[]=): HTMLTimeElement}
+ */
+export const Time = HtmlElementWrapper('time');
+
+/**
+ * Creates a `<data>` element.
+ * @type {function(GlobalAttributes & { value?: Observable<string>|string }=, NdChild|NdChild[]=): HTMLDataElement}
+ */
+export const Data = HtmlElementWrapper('data');
+
+/**
+ * Creates an `<address>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
+export const Address = HtmlElementWrapper('address');
+
+/**
+ * Creates a `<kbd>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
+export const Kbd = HtmlElementWrapper('kbd');
+
+/**
+ * Creates a `<samp>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
+export const Samp = HtmlElementWrapper('samp');
+
+/**
+ * Creates a `<var>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
+export const Var = HtmlElementWrapper('var');
+
+/**
+ * Creates a `<wbr>` element.
+ * @type {function(GlobalAttributes=): HTMLElement}
+ */
+export const Wbr = HtmlElementWrapper('wbr');

package/src/core/elements/svg.js

@@ -0,0 +1,61 @@
+import SvgElementWrapper from '../wrappers/SvgElementWrapper';
+
+export const SvgSvg                 = SvgElementWrapper('svg');
+export const SvgCircle              = SvgElementWrapper('circle');
+export const SvgRect                = SvgElementWrapper('rect');
+export const SvgEllipse             = SvgElementWrapper('ellipse');
+export const SvgLine                = SvgElementWrapper('line');
+export const SvgPolyline            = SvgElementWrapper('polyline');
+export const SvgPolygon             = SvgElementWrapper('polygon');
+export const SvgPath                = SvgElementWrapper('path');
+export const SvgText                = SvgElementWrapper('text');
+export const SvgTSpan               = SvgElementWrapper('tspan');
+export const SvgTextPath            = SvgElementWrapper('textPath');
+export const SvgG                   = SvgElementWrapper('g');
+export const SvgDefs                = SvgElementWrapper('defs');
+export const SvgUse                 = SvgElementWrapper('use');
+export const SvgSymbol              = SvgElementWrapper('symbol');
+export const SvgClipPath            = SvgElementWrapper('clipPath');
+export const SvgMask                = SvgElementWrapper('mask');
+export const SvgMarker              = SvgElementWrapper('marker');
+export const SvgPattern             = SvgElementWrapper('pattern');
+export const SvgImage               = SvgElementWrapper('image');
+export const SvgForeignObject       = SvgElementWrapper('foreignObject');
+export const SvgSwitch              = SvgElementWrapper('switch');
+export const SvgLinearGradient      = SvgElementWrapper('linearGradient');
+export const SvgRadialGradient      = SvgElementWrapper('radialGradient');
+export const SvgStop                = SvgElementWrapper('stop');
+export const SvgFilter              = SvgElementWrapper('filter');
+export const SvgFEBlend             = SvgElementWrapper('feBlend');
+export const SvgFEColorMatrix       = SvgElementWrapper('feColorMatrix');
+export const SvgFEComposite         = SvgElementWrapper('feComposite');
+export const SvgFEFlood             = SvgElementWrapper('feFlood');
+export const SvgFEGaussianBlur      = SvgElementWrapper('feGaussianBlur');
+export const SvgFEMerge             = SvgElementWrapper('feMerge');
+export const SvgFEMergeNode         = SvgElementWrapper('feMergeNode');
+export const SvgFEOffset            = SvgElementWrapper('feOffset');
+export const SvgFETurbulence        = SvgElementWrapper('feTurbulence');
+export const SvgFEDisplacementMap   = SvgElementWrapper('feDisplacementMap');
+export const SvgFEDiffuseLighting   = SvgElementWrapper('feDiffuseLighting');
+export const SvgFESpecularLighting  = SvgElementWrapper('feSpecularLighting');
+export const SvgFEDistantLight      = SvgElementWrapper('feDistantLight');
+export const SvgFEPointLight        = SvgElementWrapper('fePointLight');
+export const SvgFESpotLight         = SvgElementWrapper('feSpotLight');
+export const SvgFEMorphology        = SvgElementWrapper('feMorphology');
+export const SvgFEConvolveMatrix    = SvgElementWrapper('feConvolveMatrix');
+export const SvgFEComponentTransfer = SvgElementWrapper('feComponentTransfer');
+export const SvgFEFuncR             = SvgElementWrapper('feFuncR');
+export const SvgFEFuncG             = SvgElementWrapper('feFuncG');
+export const SvgFEFuncB             = SvgElementWrapper('feFuncB');
+export const SvgFEFuncA             = SvgElementWrapper('feFuncA');
+export const SvgAnimate             = SvgElementWrapper('animate');
+export const SvgAnimateTransform    = SvgElementWrapper('animateTransform');
+export const SvgAnimateMotion       = SvgElementWrapper('animateMotion');
+export const SvgMPath               = SvgElementWrapper('mpath');
+export const SvgSet                 = SvgElementWrapper('set');
+export const SvgDesc                = SvgElementWrapper('desc');
+export const SvgTitle               = SvgElementWrapper('title');
+export const SvgMetadata            = SvgElementWrapper('metadata');
+export const SvgView                = SvgElementWrapper('view');
+export const SvgStyle               = SvgElementWrapper('style');
+export const SvgScript              = SvgElementWrapper('script');

package/src/core/elements/table.js

@@ -0,0 +1,73 @@
+import HtmlElementWrapper from '../wrappers/HtmlElementWrapper';
+
+/**
+ * Creates a `<caption>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableCaptionElement}
+ */
+export const Caption = HtmlElementWrapper('caption');
+
+/**
+ * Creates a `<table>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableElement}
+ */
+export const Table = HtmlElementWrapper('table');
+
+/**
+ * Creates a `<thead>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
+ */
+export const THead = HtmlElementWrapper('thead');
+
+/**
+ * Creates a `<tfoot>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
+ */
+export const TFoot = HtmlElementWrapper('tfoot');
+
+/**
+ * Creates a `<tbody>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
+ */
+export const TBody = HtmlElementWrapper('tbody');
+
+/**
+ * Creates a `<tr>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableRowElement}
+ */
+export const Tr = HtmlElementWrapper('tr');
+
+/**
+ * Alias for {@link Tr}.
+ * @type {typeof Tr}
+ */
+export const TRow = Tr;
+
+/**
+ * Creates a `<th>` element.
+ * @type {function(ThAttributes=, NdChild|NdChild[]=): HTMLTableCellElement}
+ */
+export const Th = HtmlElementWrapper('th');
+
+/**
+ * Alias for {@link Th}.
+ * @type {typeof Th}
+ */
+export const THeadCell = Th;
+
+/**
+ * Alias for {@link Th}.
+ * @type {typeof Th}
+ */
+export const TFootCell = Th;
+
+/**
+ * Creates a `<td>` element.
+ * @type {function(TdAttributes=, NdChild|NdChild[]=): HTMLTableCellElement}
+ */
+export const Td = HtmlElementWrapper('td');
+
+/**
+ * Alias for {@link Td}.
+ * @type {typeof Td}
+ */
+export const TBodyCell = Td;

package/src/{errors → core/errors}/ArgTypesError.js

@@ -2,6 +2,6 @@
 
 export default class ArgTypesError extends Error {
     constructor(message, errors) {
-        super(`${message}\n\n${errors.join("\n")}\n\n`);
+        super(`${message}\n\n${errors.join('\n')}\n\n`);
     }
 }

package/src/core/utils/HasEventEmitter.js

@@ -0,0 +1,85 @@
+/**
+ * Mixin constructor that adds a simple synchronous/async event emitter to any class.
+ * Extend or call this in your constructor to gain .on(), .trigger(), and .emit().
+ *
+ * @constructor
+ * @example
+ * function MyClass() {
+ *   HasEventEmitter.call(this);
+ * }
+ * MyClass.prototype = Object.create(HasEventEmitter.prototype);
+ * const instance = new MyClass();
+ * instance.on('ready', () => console.log('ready!'));
+ * instance.trigger('ready');
+ */
+export default function HasEventEmitter() {
+
+    this.__$events = null;
+
+}
+
+/**
+ * Registers a callback for the given event name.
+ * Multiple callbacks for the same event are collected into an array.
+ *
+ * @param {string} eventName - Event identifier
+ * @param {Function} callback - Handler to register
+ */
+HasEventEmitter.prototype.on = function(eventName, callback) {
+    if(!this.__$events) {
+        this.__$events = new Map();
+    }
+    if(!this.__$events.has(eventName)) {
+        this.__$events.set(eventName, callback);
+        return;
+    }
+    const existingCallback = this.__$events.get(eventName);
+    if(!Array.isArray(existingCallback)) {
+        this.__$events.set(eventName, [existingCallback, callback]);
+        return;
+    }
+    existingCallback.push(callback);
+};
+
+/**
+ * Returns true if at least one callback is registered for the given event.
+ *
+ * @param {string} eventName - Event identifier
+ * @returns {boolean}
+ */
+HasEventEmitter.prototype.hasListeners = function(eventName) {
+    if(!this.__$events) {
+        return false;
+    }
+    return !!this.__$events.get(eventName);
+};
+
+/**
+ * Fires all registered callbacks for the given event name, awaiting each one in sequence.
+ * Returns the result of the last callback. Alias: .emit()
+ *
+ * @param {string} eventName - Event identifier
+ * @param {...*} args - Arguments passed to each callback
+ * @returns {Promise<*>} Result of the last callback, or undefined if none
+ */
+HasEventEmitter.prototype.trigger = async function(eventName, ...args) {
+    if(!this.__$events) {
+        return;
+    }
+    const callbacks = this.__$events.get(eventName);
+    if(!callbacks) {
+        // throw new NativeDocumentError(this.constructor.name, 'Event '+eventName+' not found');
+        return;
+    }
+
+    if(typeof callbacks === 'function') {
+        return await Promise.resolve(callbacks.apply(this, args));
+    }
+
+    let result = null;
+    for(let i = 0, length = callbacks.length; i < length; i++) {
+        result = await Promise.resolve(await callbacks[i].apply(this, args));
+    }
+    return result;
+};
+HasEventEmitter.prototype.emit = HasEventEmitter.prototype.trigger;

package/src/core/utils/args-types.js

@@ -0,0 +1,140 @@
+import Validator from './validator';
+import ArgTypesError from '../errors/ArgTypesError';
+import NativeDocumentError from '../errors/NativeDocumentError';
+
+let withValidation = (fn) => fn;
+let ArgTypes = {};
+
+/**
+ *
+ * @type {{string: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      number: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      boolean: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      observable: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      element: (function(*): {name: *, type: string, validate: function(*): *}),
+ *      function: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      object: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      objectNotNull: (function(*): {name: *, type: string, validate: function(*): *}),
+ *      children: (function(*): {name: *, type: string, validate: function(*): *}),
+ *      attributes: (function(*): {name: *, type: string, validate: function(*): *}),
+ *      optional: (function(*): *&{optional: boolean}),
+ *      oneOf: (function(*, ...[*]): {name: *, type: string, types: *[],
+ *      validate: function(*): boolean})
+ * }}
+ */
+if(process.env.NODE_ENV === 'development') {
+    ArgTypes = {
+        string: (name) => ({ name, type: 'string', validate: (v) => Validator.isString(v) }),
+        number: (name) => ({ name, type: 'number', validate: (v) => Validator.isNumber(v) }),
+        boolean: (name) => ({ name, type: 'boolean', validate: (v) => Validator.isBoolean(v) }),
+        observable: (name) => ({ name, type: 'observable', validate: (v) => Validator.isObservable(v) }),
+        element: (name) => ({ name, type: 'element', validate: (v) => Validator.isElement(v) }),
+        function: (name) => ({ name, type: 'function', validate: (v) => Validator.isFunction(v) }),
+        object: (name) => ({ name, type: 'object', validate: (v) => (Validator.isObject(v)) }),
+        objectNotNull: (name) => ({ name, type: 'object', validate: (v) => (Validator.isObject(v) && v !== null) }),
+        children: (name) => ({ name, type: 'children', validate: (v) => Validator.validateChildren(v) }),
+        attributes: (name) => ({ name, type: 'attributes', validate: (v) => Validator.validateAttributes(v) }),
+
+        // Optional arguments
+        optional: (argType) => ({ ...argType, optional: true }),
+
+        // Union types
+        oneOf: (name, ...argTypes) => ({
+            name,
+            type: 'oneOf',
+            types: argTypes,
+            validate: (v) => argTypes.some(type => type.validate(v)),
+        }),
+    };
+
+
+    /**
+     *
+     * @param {Array} args
+     * @param {Array} argSchema
+     * @param {string} fnName
+     */
+    const validateArgs = (args, argSchema, fnName = 'Function') => {
+        if (!argSchema) return;
+
+        const errors = [];
+
+        // Check the number of arguments
+        const requiredCount = argSchema.filter(arg => !arg.optional).length;
+        if (args.length < requiredCount) {
+            errors.push(`${fnName}: Expected at least ${requiredCount} arguments, got ${args.length}`);
+        }
+
+        // Validate each argument
+        argSchema.forEach((schema, index) => {
+            const position = index + 1;
+            const value = args[index];
+
+            if (value === undefined) {
+                if (!schema.optional) {
+                    errors.push(`${fnName}: Missing required argument '${schema.name}' at position ${position}`);
+                }
+                return;
+            }
+
+            if (!schema.validate(value)) {
+                const valueTypeOf = value?.constructor?.name || typeof value;
+                errors.push(`${fnName}: Invalid argument '${schema.name}' at position ${position}, expected ${schema.type}, got ${valueTypeOf}`);
+            }
+        });
+
+        if (errors.length > 0) {
+            throw new ArgTypesError('Argument validation failed', errors);
+        }
+    };
+
+
+
+    /**
+     * @param {Function} fn
+     * @param {Array} argSchema
+     * @param {string} fnName
+     * @returns {Function}
+     */
+    withValidation = (fn, argSchema, fnName = 'Function') => {
+        if(!Validator.isArray(argSchema)) {
+            throw new NativeDocumentError('withValidation : argSchema must be an array');
+        }
+        return function(...args) {
+            validateArgs(args, argSchema, fn.name || fnName);
+            return fn.apply(this, args);
+        };
+    };
+}
+if(process.env.NODE_ENV === 'production') {
+    ArgTypes = {
+        string: () => true,
+        number: () => true,
+        boolean: () => true,
+        observable: () => true,
+        element: () => true,
+        function: () => true,
+        object: () => true,
+        objectNotNull: () => true,
+        children: () => true,
+        attributes: () => true,
+
+        // Optional arguments
+        optional: () => true,
+
+        // Union types
+        oneOf: () => true,
+    };
+}
+
+export const normalizeComponentArgs = function(props, children = null) {
+    if(props && children) {
+        return { props, children };
+    }
+    if(typeof props !== 'object' || Array.isArray(props) || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
+        return { props: children, children: props };
+    }
+    return { props, children };
+};
+
+export { ArgTypes, withValidation };

package/src/core/utils/cache.js

@@ -0,0 +1,5 @@
+import { once as _once, autoMemoize, autoOnce } from './memoize.js';
+
+export const once = fn => autoOnce(fn);
+export const singleton = fn => _once(fn);
+export const memoize = fn => autoMemoize(fn);

package/src/core/utils/callback-handler.js

@@ -0,0 +1,50 @@
+
+
+/**
+ * Associates a shared callback with per-target context objects.
+ * Useful when the same event handler needs to behave differently depending on which element triggered it,
+ * without creating a new function closure per element (e.g.: in TemplateCloner).
+ *
+ * @constructor
+ * @param {(context: *, ...args: any[]) => void} callback - Handler receiving the stored context followed by event arguments
+ * @example
+ * const handler = CallbackHandler((item, event) => list.removeItem(item));
+ * handler.set(buttonElement, todoItem);
+ * buttonElement.addEventListener('click', handler.callback);
+ * // When clicked, calls callback(todoItem, event)
+ */
+export function CallbackHandler(callback) {
+
+    if(!(this instanceof CallbackHandler)) {
+        return new CallbackHandler(callback);
+    }
+
+    const $contextSore = new WeakMap();
+
+    /**
+     * Associates a context value with a specific target (usually a DOM element).
+     * The context is retrieved and passed to the callback when .callback is invoked on that target.
+     *
+     * @param {object} target - The target object (usually an HTMLElement) used as the WeakMap key
+     * @param {*} context - The context value to store for this target
+     */
+    this.set = (target, context) => {
+        $contextSore.set(target, context);
+    };
+
+    /**
+     * Event handler function to attach to DOM elements.
+     * When called, look up the context stored for `this` (the element) and invoke the callback.
+     * Designed to be passed directly to addEventListener.
+     *
+     * @type {EventListener}
+     * @example
+     * element.addEventListener('click', handler.callback);
+     */
+    this.callback = function() {
+        const context = $contextSore.get(this);
+        if(context) {
+            callback(context, ...arguments);
+        }
+    };
+}

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

@@ -0,0 +1,40 @@
+let DebugManager = {};
+
+if(process.env.NODE_ENV === 'development') {
+    DebugManager = {
+        enabled: true,
+
+        enable() {
+            DebugManager.log('NativeDocument Debug Mode enabled');
+        },
+
+        disable() {
+            this.enabled = false;
+        },
+
+        log(category, message, data) {
+            console.group(`[${category}] ${message}`);
+            if (data) console.log(data);
+            console.trace();
+            console.groupEnd();
+        },
+
+        warn(category, message, data) {
+            console.warn(`[${category}] ${message}`, data);
+        },
+
+        error(category, message, error) {
+            console.error(`[${category}] ${message}`, error);
+        },
+    };
+
+}
+if(process.env.NODE_ENV === 'production') {
+    DebugManager = {
+        log() {},
+        warn() {},
+        error() {},
+        disable() {},
+    };
+}
+export default DebugManager;

package/src/core/utils/events.js

@@ -0,0 +1,148 @@
+export const EVENTS = [
+    'Click',
+    'DblClick',
+    'MouseDown',
+    'MouseEnter',
+    'MouseLeave',
+    'MouseMove',
+    'MouseOut',
+    'MouseOver',
+    'MouseUp',
+    'Wheel',
+    'KeyDown',
+    'KeyPress',
+    'KeyUp',
+    'Blur',
+    'Change',
+    'Focus',
+    'Input',
+    'Invalid',
+    'Reset',
+    'Search',
+    'Select',
+    'Submit',
+    'Drag',
+    'DragEnd',
+    'DragEnter',
+    'DragLeave',
+    'DragOver',
+    'DragStart',
+    'Drop',
+    'AfterPrint',
+    'BeforePrint',
+    'BeforeUnload',
+    'Error',
+    'HashChange',
+    'Load',
+    'Offline',
+    'Online',
+    'PageHide',
+    'PageShow',
+    'Resize',
+    'Scroll',
+    'Unload',
+    'Abort',
+    'CanPlay',
+    'CanPlayThrough',
+    'DurationChange',
+    'Emptied',
+    'Ended',
+    'LoadedData',
+    'LoadedMetadata',
+    'LoadStart',
+    'Pause',
+    'Play',
+    'Playing',
+    'Progress',
+    'RateChange',
+    'Seeked',
+    'Seeking',
+    'Stalled',
+    'Suspend',
+    'TimeUpdate',
+    'VolumeChange',
+    'Waiting',
+
+    'TouchCancel',
+    'TouchEnd',
+    'TouchMove',
+    'TouchStart',
+    'AnimationEnd',
+    'AnimationIteration',
+    'AnimationStart',
+    'TransitionEnd',
+    'Copy',
+    'Cut',
+    'Paste',
+    'FocusIn',
+    'FocusOut',
+    'ContextMenu',
+];
+
+export const EVENTS_WITH_PREVENT = [
+    'Click',
+    'DblClick',
+    'MouseDown',
+    'MouseUp',
+    'Wheel',
+    'KeyDown',
+    'KeyPress',
+    'Invalid',
+    'Reset',
+    'Submit',
+    'DragOver',
+    'Drop',
+    'BeforeUnload',
+    'TouchCancel',
+    'TouchEnd',
+    'TouchMove',
+    'TouchStart',
+    'Copy',
+    'Cut',
+    'Paste',
+    'ContextMenu',
+];
+
+export const EVENTS_WITH_STOP =  [
+    'Click',
+    'DblClick',
+    'MouseDown',
+    'MouseMove',
+    'MouseOut',
+    'MouseOver',
+    'MouseUp',
+    'Wheel',
+    'KeyDown',
+    'KeyPress',
+    'KeyUp',
+    'Change',
+    'Input',
+    'Invalid',
+    'Reset',
+    'Search',
+    'Select',
+    'Submit',
+    'Drag',
+    'DragEnd',
+    'DragEnter',
+    'DragLeave',
+    'DragOver',
+    'DragStart',
+    'Drop',
+    'BeforeUnload',
+    'HashChange',
+    'TouchCancel',
+    'TouchEnd',
+    'TouchMove',
+    'TouchStart',
+    'AnimationEnd',
+    'AnimationIteration',
+    'AnimationStart',
+    'TransitionEnd',
+    'Copy',
+    'Cut',
+    'Paste',
+    'FocusIn',
+    'FocusOut',
+    'ContextMenu',
+];