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": { 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 }); }; diff --git a/src/index.ts b/src/index.ts index 9cbdcf0..a5e8c52 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, _$appendToSlot, _$declareSlots } 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, _$appendToSlot, _$declareSlots, + _$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..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 } from './dom'; +import { _$el, _$getAttr, _$setAttr, _$select, _$assignEl, _$removeEl, _$docFragment, _$append } from './dom'; function _$toLowerCase(str: string) { return str.toLowerCase(); @@ -172,6 +172,16 @@ 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 _$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)) { 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 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;