From 348a8e3d7283c40de6618846492dc537a92ddcb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roberto=20Asiel=20Guevara=20Casta=C3=B1eda?= Date: Tue, 30 Oct 2018 14:33:05 -0400 Subject: [PATCH 1/6] Added slot function helper --- src/index.ts | 31 +++++++++++++++---------------- src/utilities.ts | 6 +++++- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/index.ts b/src/index.ts index 9cbdcf0..efd3798 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,23 +1,22 @@ +import { _$Ctor } from './baseComp'; import { - _$removeChild, _$isType, _$noop, _$componentUpdate, _$bindClasses, - _$bindStyle, _$forLoop, _$each, _$bindBooleanAttr, _$setReference, _$isKey, - _$textUpdate, _$tagUpdate, _$removeReference, _$destroyComponent, _$setElements, - _$conditionalUpdate, _$emptyElse, _$htmlUpdate, _$addChild, _$toString, _$bindUpdate, + _$removeChild, _$isType, _$noop, _$componentUpdate, _$bindClasses, _$bindStyle, _$forLoop, + _$destroyComponent, _$setElements, _$conditionalUpdate, _$emptyElse, _$htmlUpdate, _$addChild, + _$each, _$bindBooleanAttr, _$setReference, _$isKey, _$textUpdate, _$tagUpdate, _$removeReference, + _$toString, _$bindUpdate, _$emptySlot, } from './utilities'; import { - _$el, _$svg, _$text, _$comment, _$setAttr, - _$removeStyle, _$getValue, _$bindMultiSelect, - _$select, _$docFragment, _$append, _$assignEl, _$removeEl, - _$getAttr, _$addListener, _$updateListener, _$removeListener, _$insertStyle, - _$bindGroup, _$updateMultiSelect + _$select, _$docFragment, _$append, _$assignEl, _$removeEl, _$getAttr, _$addListener, + _$updateListener, _$removeListener, _$insertStyle, _$bindGroup, _$updateMultiSelect, + _$el, _$svg, _$text, _$comment, _$setAttr, _$removeStyle, _$getValue, _$bindMultiSelect, } from './dom'; -import { _$Ctor } from './baseComp'; export { - _$removeChild, _$bindGroup, _$emptyElse, _$Ctor, _$bindMultiSelect, _$setAttr, - _$removeEl, _$assignEl, _$el, _$bindStyle, _$forLoop, _$each, _$insertStyle, _$removeStyle, - _$getAttr, _$addListener, _$updateListener, _$removeListener, _$bindClasses, _$destroyComponent, - _$svg, _$noop, _$toString, _$setReference, _$isType, _$isKey, _$select, _$docFragment, _$append, - _$updateMultiSelect, _$componentUpdate, _$htmlUpdate, _$tagUpdate, _$bindBooleanAttr, _$removeReference, - _$addChild, _$textUpdate, _$getValue, _$text, _$conditionalUpdate, _$bindUpdate, _$comment, _$setElements + _$bindUpdate, _$comment, _$setElements, _$emptySlot, + _$updateMultiSelect, _$componentUpdate, _$htmlUpdate, _$tagUpdate, _$bindBooleanAttr, + _$removeReference, _$addChild, _$textUpdate, _$getValue, _$text, _$conditionalUpdate, + _$noop, _$toString, _$setReference, _$isType, _$isKey, _$select, _$docFragment, _$append, + _$removeChild, _$bindGroup, _$emptyElse, _$Ctor, _$bindMultiSelect, _$setAttr, _$removeEl, + _$assignEl, _$el, _$bindStyle, _$forLoop, _$each, _$insertStyle, _$removeStyle, _$getAttr, + _$addListener, _$updateListener, _$removeListener, _$bindClasses, _$destroyComponent, _$svg, }; \ No newline at end of file diff --git a/src/utilities.ts b/src/utilities.ts index aa9ebe2..59289ce 100644 --- a/src/utilities.ts +++ b/src/utilities.ts @@ -1,6 +1,6 @@ import { PROP_MAP } from './constants'; import { _$toArgs, _$List } from './list'; -import { _$el, _$getAttr, _$setAttr, _$select, _$assignEl, _$removeEl } from './dom'; +import { _$el, _$getAttr, _$setAttr, _$select, _$assignEl, _$removeEl, _$docFragment } from './dom'; function _$toLowerCase(str: string) { return str.toLowerCase(); @@ -172,6 +172,10 @@ export function _$emptyElse() { export function _$isKey(event: KeyboardEvent, key: string) { return _$toLowerCase(event.key) === key || !!event[`${key}Key`]; } +export function _$emptySlot(inst: Component, slot: string) { + let slots = inst.$slots; + return slots[slot] && !slots[slot].hasChildNodes() ? (slots[slot] = _$docFragment()) : null; +} export function _$bindClasses(value: string | ObjectLike | (string | ObjectLike)[]) { let classes = ''; if (_$isString(value)) { From 7c529e5191e79fa470fb5099fcc79fe7386d2758 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roberto=20Asiel=20Guevara=20Casta=C3=B1eda?= Date: Tue, 30 Oct 2018 14:34:31 -0400 Subject: [PATCH 2/6] Added tslint configuration --- tslint.json | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 tslint.json diff --git a/tslint.json b/tslint.json new file mode 100644 index 0000000..6baf0eb --- /dev/null +++ b/tslint.json @@ -0,0 +1,13 @@ +{ + "rules": { + "semicolon": [ + true, "always" + ], + "triple-equals": [ + true, "allow-null-check" + ], + "quotemark": [ + true, "single" + ] + } +} \ No newline at end of file From fb246fc86ab3a6d7110f3b572a0d4162f78c4bfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roberto=20Asiel=20Guevara=20Casta=C3=B1eda?= Date: Tue, 30 Oct 2018 14:40:39 -0400 Subject: [PATCH 3/6] Bump to version 0.0.4 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 90db93a..e436cdc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "trebor-tools", - "version": "0.0.3", + "version": "0.0.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index ae6fd13..951ca1e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "trebor-tools", - "version": "0.0.3", + "version": "0.0.4", "description": "", "main": "index.js", "scripts": { From fab348b131f23e91b1f1c95d7384d67654f73387 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roberto=20Asiel=20Guevara=20Casta=C3=B1eda?= Date: Wed, 31 Oct 2018 10:37:14 -0400 Subject: [PATCH 4/6] Added hooks interface --- types.d.ts | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/types.d.ts b/types.d.ts index dff769b..42e7f2c 100644 --- a/types.d.ts +++ b/types.d.ts @@ -27,12 +27,12 @@ interface DirectiveOptions { modifiers: ObjectLike; } -interface ComponentOptions { - model: ObjectLike; - attrs: string[] | ObjectLike; - filters: ObjectLike<(...args: any[]) => any>; - children: ObjectLike; - directives: ObjectLike; +interface ComponentOptions extends ComponentHooks { + model?: ObjectLike; + attrs?: string[] | ObjectLike; + filters?: ObjectLike<(...args: any[]) => any>; + children?: ObjectLike; + directives?: ObjectLike; } interface ComponentTemplate { @@ -43,6 +43,19 @@ interface ComponentTemplate { $destroy(): void; } +interface ComponentHooks { + willCreate?(this: Component): void; + willMount?(this: Component): void; + willUpdate?(this: Component): void; + willUnmount?(this: Component): void; + willDestroy?(this: Component): void; + didCreate?(this: Component): void; + didMount?(this: Component): void; + didUpdate?(this: Component): void; + didUnmount?(this: Component): void; + didDestroy?(this: Component): void; +} + interface Component extends ComponentTemplate { $parent: Component; $parentEl: HTMLElement; From 2e3ddef37450df7da5466bbcc040974f42f768de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roberto=20Asiel=20Guevara=20Casta=C3=B1eda?= Date: Wed, 31 Oct 2018 10:38:07 -0400 Subject: [PATCH 5/6] Removed component name for simplicity --- src/baseComp.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/baseComp.ts b/src/baseComp.ts index 8aa38fd..f6e9c8b 100644 --- a/src/baseComp.ts +++ b/src/baseComp.ts @@ -165,13 +165,11 @@ _$assign(_$BaseComponent[PROP_MAP.h], { } }); -export function _$Ctor(moduleName: string, tpl: Function, options: Object) { - const ctor: ComponentConstructor = { - [moduleName](_$attrs, _$parent) { - _$BaseComponent.call(this, _$attrs, tpl, options, _$parent); - !_$parent && this.$create(); - } - }[moduleName]; +export function _$Ctor(tpl: Function, options: Object) { + const ctor: ComponentConstructor = function (_$attrs, _$parent) { + _$BaseComponent.call(this, _$attrs, tpl, options, _$parent); + !_$parent && this.$create(); + }; ctor.plugin = (fn: PluginFn, options?: ObjectLike) => { TPS.push({ options, fn }); }; From d9a5110353577f13664fb25d5ae13ce6dae53f1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roberto=20Asiel=20Guevara=20Casta=C3=B1eda?= Date: Wed, 31 Oct 2018 10:38:32 -0400 Subject: [PATCH 6/6] Added more slot helpers --- src/index.ts | 4 ++-- src/utilities.ts | 8 +++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/index.ts b/src/index.ts index efd3798..a5e8c52 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,7 @@ import { _$removeChild, _$isType, _$noop, _$componentUpdate, _$bindClasses, _$bindStyle, _$forLoop, _$destroyComponent, _$setElements, _$conditionalUpdate, _$emptyElse, _$htmlUpdate, _$addChild, _$each, _$bindBooleanAttr, _$setReference, _$isKey, _$textUpdate, _$tagUpdate, _$removeReference, - _$toString, _$bindUpdate, _$emptySlot, + _$toString, _$bindUpdate, _$emptySlot, _$appendToSlot, _$declareSlots } from './utilities'; import { _$select, _$docFragment, _$append, _$assignEl, _$removeEl, _$getAttr, _$addListener, @@ -12,7 +12,7 @@ import { } from './dom'; export { - _$bindUpdate, _$comment, _$setElements, _$emptySlot, + _$bindUpdate, _$comment, _$setElements, _$emptySlot, _$appendToSlot, _$declareSlots, _$updateMultiSelect, _$componentUpdate, _$htmlUpdate, _$tagUpdate, _$bindBooleanAttr, _$removeReference, _$addChild, _$textUpdate, _$getValue, _$text, _$conditionalUpdate, _$noop, _$toString, _$setReference, _$isType, _$isKey, _$select, _$docFragment, _$append, diff --git a/src/utilities.ts b/src/utilities.ts index 59289ce..3b6d396 100644 --- a/src/utilities.ts +++ b/src/utilities.ts @@ -1,6 +1,6 @@ import { PROP_MAP } from './constants'; import { _$toArgs, _$List } from './list'; -import { _$el, _$getAttr, _$setAttr, _$select, _$assignEl, _$removeEl, _$docFragment } from './dom'; +import { _$el, _$getAttr, _$setAttr, _$select, _$assignEl, _$removeEl, _$docFragment, _$append } from './dom'; function _$toLowerCase(str: string) { return str.toLowerCase(); @@ -176,6 +176,12 @@ export function _$emptySlot(inst: Component, slot: string) { let slots = inst.$slots; return slots[slot] && !slots[slot].hasChildNodes() ? (slots[slot] = _$docFragment()) : null; } +export function _$appendToSlot(slots: ObjectLike, slot: string, el: HTMLElement) { + !slots[slot].firstChild && _$append(slots[slot], el); +} +export function _$declareSlots($slots: ObjectLike, slots: string[]) { + _$each(slots, slot => { $slots[slot] = _$docFragment(); }); +} export function _$bindClasses(value: string | ObjectLike | (string | ObjectLike)[]) { let classes = ''; if (_$isString(value)) {