native-document 1.0.76 → 1.0.78

package/src/core/wrappers/TemplateCloner.js

@@ -1,6 +1,5 @@
 import {ElementCreator} from "./ElementCreator";
 import {createTextNode} from "./HtmlElementWrapper";
-import Anchor from "../elements/anchor";
 import TemplateBinding from "./TemplateBinding";
 
 const cloneBindingsDataCache = new WeakMap();
@@ -11,7 +10,7 @@ const bindAttributes = (node, bindDingData, data) => {
     if(bindDingData.attributes) {
         attributes = {};
         for (const attr in bindDingData.attributes) {
-            attributes[attr] = bindDingData.attributes[attr](...data);
+            attributes[attr] = bindDingData.attributes[attr].apply(null, data);
         }
     }
 
@@ -19,7 +18,7 @@ const bindAttributes = (node, bindDingData, data) => {
         attributes = attributes || {};
         attributes.class = {};
         for (const className in bindDingData.classes) {
-            attributes.class[className] = bindDingData.classes[className](...data);
+            attributes.class[className] = bindDingData.classes[className].apply(null, data);
         }
     }
 
@@ -27,7 +26,7 @@ const bindAttributes = (node, bindDingData, data) => {
         attributes = attributes || {};
         attributes.style = {};
         for (const property in bindDingData.styles) {
-            attributes.style[property] = bindDingData.styles[property](...data);
+            attributes.style[property] = bindDingData.styles[property].apply(null, data);
         }
     }
 
@@ -39,6 +38,14 @@ const bindAttributes = (node, bindDingData, data) => {
     return null;
 };
 
+const findByPath = (root, path) => {
+    let target = root;
+    for (let i = 0, len = path.length; i < len; i++) {
+        target = target.childNodes[path[i]];
+    }
+    return target;
+};
+
 const $hydrateFn = function(hydrateFunction, targetType, element, property) {
     if(!cloneBindingsDataCache.has(element)) {
         // { classes, styles, attributes, value, attach }
@@ -59,7 +66,7 @@ const bindAttachMethods = function(node, bindDingData, data) {
     }
     for(const methodName in bindDingData.attach) {
         node.nd[methodName](function(...args) {
-            bindDingData.attach[methodName].call(this, ...[...args, ...data]);
+            bindDingData.attach[methodName].apply(this, [...args, ...data]);
         });
     }
 };
@@ -68,44 +75,78 @@ export function TemplateCloner($fn) {
     let $node = null;
     let $hasBindingData = false;
 
-    const clone = (node, data) => {
+    const $bindingPaths = [];
+
+    const clone = (node, data, path) => {
         const bindDingData = cloneBindingsDataCache.get(node);
         if(node.nodeType === 3) {
             if(bindDingData && bindDingData.value) {
+                $bindingPaths.push({
+                    path: [...path],
+                    fn: (data, targetNode, currentRoot) => {
+                        const newNode = bindDingData.value(data);
+                        targetNode.replaceWith(newNode);
+                        if (targetNode === currentRoot) {
+                            return newNode;
+                        }
+                        return null;
+                    }
+                });
                 return bindDingData.value(data);
             }
             return node.cloneNode(true);
         }
         const nodeCloned = node.cloneNode(node.fullCloneNode);
+        if(node.fullCloneNode) {
+            return nodeCloned;
+        }
         if(bindDingData) {
             bindAttributes(nodeCloned, bindDingData, data);
             bindAttachMethods(nodeCloned, bindDingData, data);
-        }
-        if(node.fullCloneNode) {
-            return nodeCloned;
+            $bindingPaths.push({
+                path: [...path],
+                fn: (data, targetNode) => {
+                    bindAttributes(targetNode, bindDingData, data);
+                    bindAttachMethods(targetNode, bindDingData, data);
+                }
+            })
         }
         const childNodes = node.childNodes;
         for(let i = 0, length = childNodes.length; i < length; i++) {
             const childNode = childNodes[i];
-            const childNodeCloned = clone(childNode, data);
+            path.push(i);
+            const childNodeCloned = clone(childNode, data, path);
+            path.pop();
             nodeCloned.appendChild(childNodeCloned);
         }
         return nodeCloned;
     };
 
-    this.clone = (data) => {
-        if(!$node) {
-            $node = $fn(this);
-            if(!$hasBindingData) {
-                const nodeCloned = $node.cloneNode(true);
-                nodeCloned.fullCloneNode = true;
-                return nodeCloned;
+    const cloneWithBindingPaths = (data) => {
+        let root = $node.cloneNode(true);
+
+        for (let i = 0, len = $bindingPaths.length; i < len; i++) {
+            const binding = $bindingPaths[i];
+            const target = findByPath(root, binding.path);
+            const newRoot = binding.fn(data, target, root);
+            if(newRoot) {
+                root = newRoot;
             }
         }
+
+        return root;
+    };
+
+    this.clone = (data) => {
+        $node = $fn(this);
         if(!$hasBindingData) {
+            this.clone = () => $node.cloneNode(true);
             return $node.cloneNode(true);
         }
-        return clone($node, data);
+
+        const firstClone = clone($node, data, []);
+        this.clone = cloneWithBindingPaths;
+        return firstClone;
     };
 
 
@@ -164,3 +205,4 @@ export function useCache(fn) {
         return wrapper([_, __, ...args]);
     };
 }
+w

package/src/core/wrappers/constants.js

@@ -1,2 +1,33 @@
 
-export const BOOLEAN_ATTRIBUTES = ['checked', 'selected', 'disabled', 'readonly', 'required', 'autofocus', 'multiple', 'autocomplete', 'hidden', 'contenteditable', 'spellcheck', 'translate', 'draggable', 'async', 'defer', 'autoplay', 'controls', 'loop', 'muted', 'download', 'reversed', 'open', 'default', 'formnovalidate', 'novalidate', 'scoped', 'itemscope', 'allowfullscreen', 'allowpaymentrequest', 'playsinline'];
+export const BOOLEAN_ATTRIBUTES = new Set([
+    'checked',
+    'selected',
+    'disabled',
+    'readonly',
+    'required',
+    'autofocus',
+    'multiple',
+    'autocomplete',
+    'hidden',
+    'contenteditable',
+    'spellcheck',
+    'translate',
+    'draggable',
+    'async',
+    'defer',
+    'autoplay',
+    'controls',
+    'loop',
+    'muted',
+    'download',
+    'reversed',
+    'open',
+    'default',
+    'formnovalidate',
+    'novalidate',
+    'scoped',
+    'itemscope',
+    'allowfullscreen',
+    'allowpaymentrequest',
+    'playsinline'
+]);

package/src/core/wrappers/prototypes/attributes-extensions.js

@@ -1,17 +1,30 @@
-import { bindAttributeWithObservable } from "../AttributesWrapper";
+import {bindAttributeWithObservable, bindBooleanAttribute} from "../AttributesWrapper";
 import ObservableItem from "../../data/ObservableItem";
 import TemplateBinding from "../TemplateBinding";
-
+import {BOOLEAN_ATTRIBUTES} from "../constants";
 
 
 String.prototype.handleNdAttribute = function(element, attributeName) {
     element.setAttribute(attributeName, this);
 };
 
+Number.prototype.handleNdAttribute = function(element, attributeName) {
+    element.setAttribute(attributeName, this);
+};
+
+Boolean.prototype.handleNdAttribute = function(element, attrName) {
+    bindBooleanAttribute(element, attrName, this);
+};
+
 ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
+    if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+        bindBooleanAttribute(element, attributeName, this);
+        return;
+    }
+
     bindAttributeWithObservable(element, attributeName, this);
 };
 
 TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
     this.$hydrate(element, attributeName);
-};
+};

package/src/core/wrappers/prototypes/bind-class-extensions.js

@@ -0,0 +1,18 @@
+import ObservableItem from "../../../core/data/ObservableItem";
+import {toggleElementClass} from "../AttributesWrapper";
+import {ObservableWhen} from "../../data/ObservableWhen";
+import TemplateBinding from "../../../core/wrappers/TemplateBinding";
+
+ObservableItem.prototype.bindNdClass = function(element, className) {
+    element.classes.toggle(className, this.val());
+    this.subscribe(toggleElementClass.bind(null, element, className));
+};
+
+ObservableWhen.prototype.bindNdClass = function(element, className) {
+    element.classes.toggle(className, this.isMath());
+    this.subscribe(toggleElementClass.bind(null, element, className));
+};
+
+TemplateBinding.prototype.bindNdClass = function(element, className) {
+    this.$hydrate(element, className);
+};

package/src/devtools/app/App.js

@@ -1,5 +1,5 @@
 import {Div} from "../../../elements";
-import DevToolsWidget from "../widget/DevToolsWidget";
+import DevToolsWidget from "../../devtools/widget/DevToolsWidget";
 
 export default function App() {
 

package/src/devtools/hrm/ComponentRegistry.js

@@ -1,4 +1,4 @@
-import {Anchor} from "../../../elements.js";
+import {Anchor} from "../../../elements";
 import Validator from "../../core/utils/validator";
 
 const ComponentRegistry = (function() {

package/src/router/Router.js

@@ -1,6 +1,6 @@
 import {Route} from "./Route.js";
 import Validator from "../core/utils/validator.js";
-import RouterError from "../core/errors/RouterError.js";
+import RouterError from "./errors/RouterError.js";
 import {RouteGroupHelper} from "./RouteGroupHelper.js";
 import {trim} from "../core/utils/helpers.js";
 import HashRouter from "./modes/HashRouter.js";

package/src/router/link.js

@@ -1,7 +1,7 @@
-import Validator from "../core/utils/validator.js";
-import {Link as NativeLink} from "../../elements.js";
-import Router, {DEFAULT_ROUTER_NAME} from "./Router.js";
-import RouterError from "../core/errors/RouterError.js";
+import Validator from "../core/utils/validator";
+import {Link as NativeLink} from "../../elements";
+import Router, {DEFAULT_ROUTER_NAME} from "./Router";
+import RouterError from "./errors/RouterError";
 
 
 export function Link(options, children){

package/src/router/modes/HistoryRouter.js

@@ -1,4 +1,3 @@
-import RouterError from '../../core/errors/RouterError';
 import DebugManager from "../../core/utils/debug-manager.js";
 
 export default function HistoryRouter() {

package/types/control-flow.d.ts

@@ -37,7 +37,6 @@ export interface ForEachFunction {
 export interface ForEachArrayFunction {
     <T>(data: ObservableArray<T>,
         callback: (item: T, index?: ObservableItem<number>) => ValidChild,
-        key?: string | ((item: T, defaultKey: number) => string),
         configs?: { pushDelay?: (items: T[]) => number, isParentUniqueChild: boolean, shouldKeepItemsInCache?: boolean }): DocumentFragment;
 }
 

package/types/filters/standard.d.ts

@@ -1,5 +1,4 @@
 import { ObservableOrValue, FilterResult } from './types';
-import {ObservableItem} from "../observable";
 
 
 export function equals<T>(

package/src/components/fom-control/default/DefaultLayout.js

@@ -1,8 +0,0 @@
-import {Button, Form} from "../../../../elements";
-
-export default function DefaultLayout({ fields, form }) {
-    return Form([
-        Object.values(fields),
-        Button({ type: 'submit', disabled: form.submitting }, 'Submit')
-    ]);
-}

package/src/components/fom-control/default/collection/DefaultCollectionLayout.js

@@ -1,12 +0,0 @@
-import {Button} from "../../../../../elements";
-
-export default function DefaultCollectionLayout({collection, data, Template}) {
-
-    return Div({ class: 'field-collection-layout'}, [
-        Div({ class: 'field-collection-layout-header'}, [
-            Button({ class: 'field-collection-layout-add-btn', type: 'button' }, ['Add +'])
-                .nd.onClick(() => collection.add())
-        ]),
-        ForEachArray(data, Template)
-    ]);
-}

package/src/components/fom-control/default/collection/DefaultCollectionTemplate.js

@@ -1,6 +0,0 @@
-
-
-export default function DefaultCollectionTemplate(item, index, {collection, fields}) {
-
-    return Object.values(fields);
-}

package/src/components/fom-control/field/types/CheckboxField.js

@@ -1,17 +0,0 @@
-import Field from "../Field";
-
-export default function CheckboxField(name, defaultConfig) {
-    Field.call(this, name, 'checkbox', defaultConfig);
-
-    Object.assign(this.$description, {
-        checked: false,
-    });
-}
-
-CheckboxField.prototype = Object.create(Field.prototype);
-CheckboxField.prototype.constructor = CheckboxField;
-
-CheckboxField.prototype.checked = function(value) {
-    this.$description.checked = value;
-    return this;
-};

package/src/components/fom-control/field/types/HiddenField.js

@@ -1,8 +0,0 @@
-import Field from "../Field";
-
-export default function HiddenField(name, defaultConfig) {
-    Field.call(this, name, 'hidden', defaultConfig);
-}
-
-HiddenField.prototype = Object.create(Field.prototype);
-HiddenField.prototype.constructor = HiddenField;

package/src/components/fom-control/index.js

@@ -1,8 +0,0 @@
-import Field from "./field/Field";
-import FormControl from "./FormControl";
-import './field/FieldFactory';
-
-export {
-    Field,
-    FormControl,
-}