@endorphinjs/template-runtime - npm Package Compare versions

Comparing version 0.5.4 to 0.5.7

dist/component.d.ts

@@ -65,4 +65,4 @@ import { Injector } from './injector';
     queued: boolean;
-    /** Indicates that component is currently rendering */
-    rendering: boolean;
+    /** Indicates that component is preparing to rendering */
+    preparing: boolean;
     /** Default props values */
@@ -151,2 +151,6 @@ defaultProps: object;
 /**
+ * Convert HTMLElement into Endorphin DOM component with given definition
+ */
+export declare function createComponentFromElement(el: HTMLElement | Component, definition: ComponentDefinition, root?: Component): Component;
+/**
  * Mounts given component
@@ -153,0 +157,0 @@ */

dist/injector.d.ts

@@ -18,3 +18,2 @@ import { LinkedList, LinkedListItem } from './linked-list';
 export interface Block {
-    $$block: true;
     parentNode?: void;
@@ -42,3 +41,3 @@ host: Component;
  */
-export declare function injectBlock<T extends Block>(injector: Injector, block: BlockInput<T, 'start' | 'end' | '$$block'>): T;
+export declare function injectBlock<T extends Block>(injector: Injector, block: BlockInput<T, 'start' | 'end'>): T;
 /**
@@ -45,0 +44,0 @@ * Returns named slot context from given component input’s injector. If slot context

dist/runtime.cjs.js

@@ -160,24 +160,2 @@ 'use strict';
 };
-/**
- * Represents given attribute value in element
- * @param {Element} elem
- * @param {string} name
- * @param {*} value
- */
-function representAttributeValue(elem, name, value) {
-    const type = typeof (value);
-    if (type === 'boolean') {
-        value = value ? '' : null;
-    }
-    else if (type === 'function') {
-        value = '𝑓';
-    }
-    else if (Array.isArray(value)) {
-        value = '[]';
-    }
-    else if (isDefined(value) && type === 'object') {
-        value = '{}';
-    }
-    isDefined(value) ? elem.setAttribute(name, value) : elem.removeAttribute(name);
-}
 function safeCall(fn, arg1, arg2) {
@@ -622,3 +600,2 @@ try {
     }
-    block.$$block = true;
     injector.ptr = block.end;
@@ -647,3 +624,3 @@ return block;
         let { value, next, prev } = item;
-        if (isBlock(value)) {
+        if (!isElement(value)) {
             next = value.end.next;
@@ -681,3 +658,3 @@ disposeBlock(value);
     while (item && item !== end) {
-        if (!isBlock(item.value)) {
+        if (isElement(item.value)) {
             node = item.value;
@@ -700,7 +677,4 @@ // NB it’s possible that a single block contains nodes from different
 }
-/**
- * Check if given value is a block
- */
-function isBlock(obj) {
-    return '$$block' in obj;
+function isElement(obj) {
+    return 'nodeType' in obj;
 }
@@ -945,2 +919,9 @@ /**
     const element = elem(name, cssScope);
+    return createComponentFromElement(element, definition, root);
+}
+/**
+ * Convert HTMLElement into Endorphin DOM component with given definition
+ */
+function createComponentFromElement(el, definition, root) {
+    const element = el;
     // Add host scope marker: we can’t rely on tag name since component
@@ -975,3 +956,3 @@ // definition is bound to element in runtime, not compile time
         mounted: false,
-        rendering: false,
+        preparing: false,
         update: void 0,
@@ -993,3 +974,3 @@ queued: false,
     const arg = changes || {};
-    componentModel.rendering = true;
+    componentModel.preparing = true;
     // Notify slot status
@@ -1004,5 +985,5 @@ for (const p in input.slots) {
     runHook(component, 'willRender', arg);
+    componentModel.preparing = false;
     componentModel.update = captureError(component, definition.default, component, getScope(component));
     componentModel.mounted = true;
-    componentModel.rendering = false;
     runHook(component, 'didRender', arg);
@@ -1056,3 +1037,3 @@ runHook(component, 'didMount', arg);
 function renderNext(component, changes) {
-    if (!component.componentModel.rendering) {
+    if (!component.componentModel.preparing) {
         renderComponent(component, changes);
@@ -1086,3 +1067,3 @@ }
     componentModel.queued = false;
-    componentModel.rendering = true;
+    componentModel.preparing = true;
     if (changes) {
@@ -1093,4 +1074,4 @@ runHook(component, 'didChange', arg);
     runHook(component, 'willRender', arg);
+    componentModel.preparing = false;
     captureError(component, componentModel.update, component, getScope(component));
-    componentModel.rendering = false;
     runHook(component, 'didRender', arg);
@@ -1131,3 +1112,3 @@ runHook(component, 'didUpdate', arg);
             if (!/^partial:/.test(p)) {
-                representAttributeValue(component, p.replace(/[A-Z]/g, kebabCase), current);
+                setAttributeExpression(component, p.replace(/[A-Z]/g, kebabCase), current);
             }
@@ -1232,3 +1213,3 @@ }
             // on next tick
-            if (componentModel.mounted && !componentModel.rendering) {
+            if (componentModel.mounted && !componentModel.preparing) {
                 scheduleRender(element);
@@ -1502,3 +1483,3 @@ }
         actualNext = getItem(item.end.next, end);
-        if (expectedPrev !== actualPrev && expectedNext !== actualNext) {
+        if (expectedPrev !== actualPrev || expectedNext !== actualNext) {
             // Blocks must be reordered
@@ -2102,2 +2083,3 @@ move(injector, item, expectedPrev ? expectedPrev.end : block.start);
 exports.createComponent = createComponent;
+exports.createComponentFromElement = createComponentFromElement;
 exports.createInjector = createInjector;
@@ -2104,0 +2086,0 @@ exports.createScope = createScope;

dist/runtime.es.js

@@ -156,24 +156,2 @@ /**
 };
-/**
- * Represents given attribute value in element
- * @param {Element} elem
- * @param {string} name
- * @param {*} value
- */
-function representAttributeValue(elem, name, value) {
-    const type = typeof (value);
-    if (type === 'boolean') {
-        value = value ? '' : null;
-    }
-    else if (type === 'function') {
-        value = '𝑓';
-    }
-    else if (Array.isArray(value)) {
-        value = '[]';
-    }
-    else if (isDefined(value) && type === 'object') {
-        value = '{}';
-    }
-    isDefined(value) ? elem.setAttribute(name, value) : elem.removeAttribute(name);
-}
 function safeCall(fn, arg1, arg2) {
@@ -618,3 +596,2 @@ try {
     }
-    block.$$block = true;
     injector.ptr = block.end;
@@ -643,3 +620,3 @@ return block;
         let { value, next, prev } = item;
-        if (isBlock(value)) {
+        if (!isElement(value)) {
             next = value.end.next;
@@ -677,3 +654,3 @@ disposeBlock(value);
     while (item && item !== end) {
-        if (!isBlock(item.value)) {
+        if (isElement(item.value)) {
             node = item.value;
@@ -696,7 +673,4 @@ // NB it’s possible that a single block contains nodes from different
 }
-/**
- * Check if given value is a block
- */
-function isBlock(obj) {
-    return '$$block' in obj;
+function isElement(obj) {
+    return 'nodeType' in obj;
 }
@@ -941,2 +915,9 @@ /**
     const element = elem(name, cssScope);
+    return createComponentFromElement(element, definition, root);
+}
+/**
+ * Convert HTMLElement into Endorphin DOM component with given definition
+ */
+function createComponentFromElement(el, definition, root) {
+    const element = el;
     // Add host scope marker: we can’t rely on tag name since component
@@ -971,3 +952,3 @@ // definition is bound to element in runtime, not compile time
         mounted: false,
-        rendering: false,
+        preparing: false,
         update: void 0,
@@ -989,3 +970,3 @@ queued: false,
     const arg = changes || {};
-    componentModel.rendering = true;
+    componentModel.preparing = true;
     // Notify slot status
@@ -1000,5 +981,5 @@ for (const p in input.slots) {
     runHook(component, 'willRender', arg);
+    componentModel.preparing = false;
     componentModel.update = captureError(component, definition.default, component, getScope(component));
     componentModel.mounted = true;
-    componentModel.rendering = false;
     runHook(component, 'didRender', arg);
@@ -1052,3 +1033,3 @@ runHook(component, 'didMount', arg);
 function renderNext(component, changes) {
-    if (!component.componentModel.rendering) {
+    if (!component.componentModel.preparing) {
         renderComponent(component, changes);
@@ -1082,3 +1063,3 @@ }
     componentModel.queued = false;
-    componentModel.rendering = true;
+    componentModel.preparing = true;
     if (changes) {
@@ -1089,4 +1070,4 @@ runHook(component, 'didChange', arg);
     runHook(component, 'willRender', arg);
+    componentModel.preparing = false;
     captureError(component, componentModel.update, component, getScope(component));
-    componentModel.rendering = false;
     runHook(component, 'didRender', arg);
@@ -1127,3 +1108,3 @@ runHook(component, 'didUpdate', arg);
             if (!/^partial:/.test(p)) {
-                representAttributeValue(component, p.replace(/[A-Z]/g, kebabCase), current);
+                setAttributeExpression(component, p.replace(/[A-Z]/g, kebabCase), current);
             }
@@ -1228,3 +1209,3 @@ }
             // on next tick
-            if (componentModel.mounted && !componentModel.rendering) {
+            if (componentModel.mounted && !componentModel.preparing) {
                 scheduleRender(element);
@@ -1498,3 +1479,3 @@ }
         actualNext = getItem(item.end.next, end);
-        if (expectedPrev !== actualPrev && expectedNext !== actualNext) {
+        if (expectedPrev !== actualPrev || expectedNext !== actualNext) {
             // Blocks must be reordered
@@ -2084,3 +2065,3 @@ move(injector, item, expectedPrev ? expectedPrev.end : block.start);
 export default endorphin;
-export { Store, addClass, addClassIf, addEvent, addPendingClass, addPendingClassIf, animate, appendChild, assign, attributeSet, call, classNames, composeTween, createAnimation, createComponent, createInjector, createScope, createSlot, cssAnimate, detachPendingEvents, disposeBlock, domInsert, domRemove, elem, elemNS, elemNSWithText, elemWithText, emptyBlockContent, enterScope, exitScope, filter, finalizeAttributes, finalizeAttributesNS, finalizePendingEvents, finalizePendingRefs, find, get, getPartial, getProp, getScope, getSlotContext, getState, getVar, injectBlock, insert, isolateElement, mountBlock, mountComponent, mountInnerHTML, mountIterator, mountKeyIterator, mountPartial, mountSlot, move, notifySlotUpdate, obj, pendingEvents, prepareScope, propsSet, removeEvent, removeRef, renderComponent, safeEventListener, scheduleRender, setAttribute, setAttributeExpression, setAttributeExpressionNS, setAttributeNS, setClass, setPendingAttribute, setPendingAttributeNS, setPendingEvent, setPendingRef, setRef, setScope, setVar, stopAnimation, subscribeStore, text, toggleClassIf, tweenAnimate, unmountBlock, unmountComponent, unmountInnerHTML, unmountIterator, unmountKeyIterator, unmountPartial, unmountSlot, updateAttributeExpression, updateAttributeExpressionNS, updateBlock, updateComponent, updateDefaultSlot, updateIncomingSlot, updateInnerHTML, updateIterator, updateKeyIterator, updatePartial, updateText };
+export { Store, addClass, addClassIf, addEvent, addPendingClass, addPendingClassIf, animate, appendChild, assign, attributeSet, call, classNames, composeTween, createAnimation, createComponent, createComponentFromElement, createInjector, createScope, createSlot, cssAnimate, detachPendingEvents, disposeBlock, domInsert, domRemove, elem, elemNS, elemNSWithText, elemWithText, emptyBlockContent, enterScope, exitScope, filter, finalizeAttributes, finalizeAttributesNS, finalizePendingEvents, finalizePendingRefs, find, get, getPartial, getProp, getScope, getSlotContext, getState, getVar, injectBlock, insert, isolateElement, mountBlock, mountComponent, mountInnerHTML, mountIterator, mountKeyIterator, mountPartial, mountSlot, move, notifySlotUpdate, obj, pendingEvents, prepareScope, propsSet, removeEvent, removeRef, renderComponent, safeEventListener, scheduleRender, setAttribute, setAttributeExpression, setAttributeExpressionNS, setAttributeNS, setClass, setPendingAttribute, setPendingAttributeNS, setPendingEvent, setPendingRef, setRef, setScope, setVar, stopAnimation, subscribeStore, text, toggleClassIf, tweenAnimate, unmountBlock, unmountComponent, unmountInnerHTML, unmountIterator, unmountKeyIterator, unmountPartial, unmountSlot, updateAttributeExpression, updateAttributeExpressionNS, updateBlock, updateComponent, updateDefaultSlot, updateIncomingSlot, updateInnerHTML, updateIterator, updateKeyIterator, updatePartial, updateText };
 //# sourceMappingURL=runtime.es.js.map

dist/utils.d.ts

@@ -41,11 +41,4 @@ import { Changes, ChangeSet } from './types';
 export declare function assignIfNeeded(prev: any, next: any): boolean;
-/**
- * Represents given attribute value in element
- * @param {Element} elem
- * @param {string} name
- * @param {*} value
- */
-export declare function representAttributeValue(elem: Element, name: string, value: any): void;
 export declare function safeCall<T, U, Y>(fn?: (p1?: T, p2?: U) => Y, arg1?: T, arg2?: U): Y | undefined;
 export declare function captureError<T, U, Y>(host: Component, fn?: (p1?: T, p2?: U) => Y, arg1?: T, arg2?: U): Y | undefined;
 export declare function runtimeError(host: Component, error: Error): void;

package.json

 {
   "name": "@endorphinjs/template-runtime",
-  "version": "0.5.4",
+  "version": "0.5.7",
   "description": "EndorphinJS template runtime, embedded with template bundles",
@@ -26,3 +26,3 @@ "main": "./dist/runtime.cjs.js",
   "devDependencies": {
-    "@endorphinjs/template-compiler": "^0.5.4",
+    "@endorphinjs/template-compiler": "^0.5.7",
     "@types/mocha": "^5.2.6",
@@ -53,3 +53,3 @@ "@types/node": "^11.13.10",
   },
-  "gitHead": "70a4c43ceb23b91360801e8b6452d45a89b07220"
+  "gitHead": "3ae6c86ba95ad44b2f7b71bd751db48ad2b0aae6"
 }

No alert changes

Worsened metrics

Total package byte prevSize

426451

decreased by-0.53%

Lines of code

5058

decreased by-0.8%

No dependency changes