Skip to content

Commit f12c6ee

Browse files
InDIOSInDIOS
authored
Merge pull request #2 from InDIOS/development
Bump to version 0.0.2
2 parents ace19c8 + a7bc68a commit f12c6ee

File tree

9 files changed

+115
-60
lines changed

9 files changed

+115
-60
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"name": "trebor-tools",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"description": "",
55
"main": "index.js",
66
"scripts": {
77
"compile": "tsc -p . -w",
8-
"build": "rollup -c rollup.config.js"
8+
"build": "tsc -p . && rollup -c rollup.config.js"
99
},
1010
"keywords": [],
1111
"author": "InDIOS",

‎rollup.config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ const path = require('path');
22

33
const input = path.join(__dirname, './src/index.js');
44
const output = [{
5-
name: 'TreborTool',
65
format: 'es',
76
file: path.join(__dirname, 'index.js'),
87
sourcemap: true

‎src/baseComp.ts‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { _$getValue } from './dom';
21
import { _$List } from './list';
3-
import { _$each, _$define, PROP_MAP, TPS, _$assign, _$isType, _$isString, _$isFunction, _$hasProp, _$toType, _$directive, _$isArray, _$toPlainObject, _$accesor, _$subscribers, _$isValueAttr, _$toString } from './utilities';
2+
import { _$getValue } from './dom';
3+
import { _$each, _$define, PROP_MAP, TPS, _$assign, _$isType, _$isString, _$isFunction, _$hasProp, _$toType, _$directive, _$isArray, _$toPlainObject, _$accesor, _$subscribers, _$isValueAttr, _$toString, _$extends } from './utilities';
44

55
const PROPS = ['$slots', '$refs', '$filters', '$directives', '_events', '_watchers'];
66

7-
export function _$BaseComponent(attrs: AttrParams, template: TemplateFn, options: ComponentOptions, parent: Component) {
7+
function _$BaseComponent(attrs: AttrParams, template: TemplateFn, options: ComponentOptions, parent: Component) {
88
const self = this;
99
const _$set = (prop: string, value: any) => { _$define(self, prop, { value, writable: true }); };
1010
if (!attrs) attrs = {};
@@ -165,3 +165,17 @@ _$assign(_$BaseComponent[PROP_MAP.h], {
165165
};
166166
}
167167
});
168+
169+
export function _$Ctor(moduleName: string, tpl: Function, options: Object) {
170+
const ctor: ComponentConstructor = <any>{
171+
[moduleName](_$attrs, _$parent) {
172+
_$BaseComponent.call(this, _$attrs, tpl, options, _$parent);
173+
!_$parent && this.$create();
174+
}
175+
}[moduleName];
176+
ctor.plugin = (fn: PluginFn, options?: ObjectLike<any>) => {
177+
TPS.push({ options, fn });
178+
};
179+
_$extends(ctor, _$BaseComponent);
180+
return ctor;
181+
}

‎src/dom.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { _$List } from './list';
22
import { _$toString, _$isString, _$isType, _$isValueAttr, PROP_MAP, _$hasProp } from './utilities';
33

4-
export function _$select(selector: string | Element, parent?: Element) {
5-
return _$isString(selector) ? (parent || document).querySelector(<string>selector) : <Element>selector;
4+
export function _$select(selector: string | Element, parent?: Element): HTMLElement {
5+
return _$isString(selector) ? (parent || document).querySelector(<string>selector) : <HTMLElement>selector;
66
}
77
export function _$docFragment() {
88
return document.createDocumentFragment();
@@ -91,7 +91,7 @@ export function _$insertStyle(id: string, css: string) {
9191
isNew = true;
9292
style = _$el('style');
9393
style.id = id;
94-
_$setAttr(style, ['refs', '1']);
94+
_$setAttr(style, ['refs', 1]);
9595
}
9696
if (style.textContent !== css) {
9797
style.textContent = css;
@@ -100,17 +100,17 @@ export function _$insertStyle(id: string, css: string) {
100100
_$append(document.head, style);
101101
} else {
102102
let count = +_$getAttr(style, 'refs');
103-
_$setAttr(style, ['refs', _$toString(++count)]);
103+
_$setAttr(style, ['refs', ++count]);
104104
}
105105
}
106-
export function _$deleteStyle(id: string) {
106+
export function _$removeStyle(id: string) {
107107
let style = _$select(`#${id}`, document.head);
108108
if (style) {
109109
let count = +_$getAttr(style, 'refs');
110110
if (--count === 0) {
111111
_$removeEl(style, document.head);
112112
} else {
113-
_$setAttr(style, ['refs', _$toString(count)]);
113+
_$setAttr(style, ['refs', count]);
114114
}
115115
}
116116
}

‎src/index.ts‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
import {
2-
_$removeChild, _$extend, _$isType, _$noop,
3-
_$setReference, _$isKey, _$conditionalUpdate, _$emptyElse,
4-
_$addChild, _$toString, _$bindUpdate, _$textUpdate, _$tagUpdate,
5-
_$bindClasses, _$bindStyle, _$forLoop, _$each, _$bindBooleanAttr,
2+
_$removeChild, _$isType, _$noop, _$componentUpdate, _$bindClasses,
3+
_$bindStyle, _$forLoop, _$each, _$bindBooleanAttr, _$setReference, _$isKey,
4+
_$textUpdate, _$tagUpdate, _$removeReference, _$destroyComponent, _$setElements,
5+
_$conditionalUpdate, _$emptyElse, _$htmlUpdate, _$addChild, _$toString, _$bindUpdate,
66
} from './utilities';
77
import {
88
_$el, _$svg, _$text, _$comment, _$setAttr,
9-
_$deleteStyle, _$getValue, _$bindMultiSelect,
9+
_$removeStyle, _$getValue, _$bindMultiSelect,
1010
_$select, _$docFragment, _$append, _$assignEl, _$removeEl,
1111
_$getAttr, _$addListener, _$updateListener, _$removeListener, _$insertStyle,
1212
_$bindGroup, _$updateMultiSelect
1313
} from './dom';
14-
import { _$BaseComponent } from './baseComp';
14+
import { _$Ctor } from './baseComp';
1515

1616
export {
17-
_$svg, _$noop, _$toString, _$setReference, _$isType, _$isKey,
18-
_$select, _$docFragment, _$append, _$removeEl, _$assignEl, _$el,
19-
_$bindStyle, _$forLoop, _$each, _$insertStyle, _$deleteStyle, _$addChild,
20-
_$textUpdate, _$getValue, _$text, _$conditionalUpdate, _$bindUpdate, _$comment,
21-
_$extend, _$removeChild, _$bindGroup, _$emptyElse, _$BaseComponent, _$bindMultiSelect,
22-
_$setAttr, _$getAttr, _$addListener, _$updateListener, _$removeListener, _$bindClasses,
23-
_$updateMultiSelect,
17+
_$removeChild, _$bindGroup, _$emptyElse, _$Ctor, _$bindMultiSelect, _$setAttr,
18+
_$removeEl, _$assignEl, _$el, _$bindStyle, _$forLoop, _$each, _$insertStyle, _$removeStyle,
19+
_$getAttr, _$addListener, _$updateListener, _$removeListener, _$bindClasses, _$destroyComponent,
20+
_$svg, _$noop, _$toString, _$setReference, _$isType, _$isKey, _$select, _$docFragment, _$append,
21+
_$updateMultiSelect, _$componentUpdate, _$htmlUpdate, _$tagUpdate, _$bindBooleanAttr, _$removeReference,
22+
_$addChild, _$textUpdate, _$getValue, _$text, _$conditionalUpdate, _$bindUpdate, _$comment, _$setElements
2423
};

‎src/list.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PROP_MAP, _$isType, _$isArray, _$define, _$assign, _$extend, _$dispatch } from './utilities';
1+
import { PROP_MAP, _$isType, _$isArray, _$define, _$assign, _$extends, _$dispatch } from './utilities';
22

33
const array = Array[PROP_MAP.h];
44
export function _$toArgs(args: IArguments, start: number = 0): any[] {
@@ -20,7 +20,7 @@ export function _$List(value: any[], root: Component, key: string) {
2020
desc.writable = true;
2121
_$define(self, 'length', _$assign({ value: self.length }, desc));
2222
}
23-
_$extend(_$List, Array);
23+
_$extends(_$List, Array);
2424
['pop', 'push', 'reverse', 'shift', 'sort', 'fill', 'unshift', 'splice'].forEach(method => {
2525
_$List[PROP_MAP.h][method] = function () {
2626
let self = this;

‎src/utilities.ts‎

Lines changed: 72 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { _$toArgs, _$List } from './list';
2-
import { _$el, _$getAttr, _$setAttr, _$select, _$assignEl } from './dom';
2+
import { _$el, _$getAttr, _$setAttr, _$select, _$assignEl, _$removeEl } from './dom';
33

44
function _$toLowerCase(str: string) {
55
return str.toLowerCase();
@@ -19,6 +19,9 @@ export const _$assign = Object['assign'] || function (t: Object) {
1919
}
2020
return t;
2121
};
22+
export function _$apply(callee: Function, args: any[], globs: any[], thisArg: any = null) {
23+
return callee.apply(thisArg, args.concat(globs));
24+
}
2225
export function _$isValueAttr(attr: string) {
2326
return attr === 'value';
2427
}
@@ -38,10 +41,7 @@ export function _$dispatch(root: Component, key: string, oldVal, value) {
3841
}
3942
root.$update();
4043
}
41-
export function _$extend(ctor: Function, exts: Function) {
42-
ctor['plugin'] = function (fn: PluginFn, options?: ObjectLike<any>) {
43-
TPS.push({ options, fn });
44-
};
44+
export function _$extends(ctor: Function, exts: Function) {
4545
ctor[PROP_MAP.h] = Object.create(exts[PROP_MAP.h]);
4646
ctor[PROP_MAP.h].constructor = ctor;
4747
}
@@ -135,13 +135,16 @@ export function _$toPlainObject(obj: Component) {
135135
});
136136
return _$isObject(obj) ? data : obj;
137137
}
138-
export function _$setReference(obj: Object, prop: string) {
139-
const value = [];
140-
_$define(obj, prop, {
141-
get: () => value.length <= 1 ? value[0] : value,
142-
set: val => { val && !~value.indexOf(val) && value.push(val); },
143-
enumerable: true, configurable: true
144-
});
138+
export function _$setReference(refs: Object, prop: string, node: HTMLElement) {
139+
if (!_$hasProp(refs, prop)) {
140+
const value = [];
141+
_$define(refs, prop, {
142+
get: () => value.length <= 1 ? value[0] : value,
143+
set: val => { val && !~value.indexOf(val) && value.push(val); },
144+
enumerable: true, configurable: true
145+
});
146+
}
147+
refs[prop] = node;
145148
}
146149
export function _$accesor(object: Component, path: string, value?: any) {
147150
return path.split('.').reduce((obj, key, i, arr) => {
@@ -198,41 +201,78 @@ export function _$bindStyle(value: string | ObjectLike<any>) {
198201
return '';
199202
}
200203
}
201-
export function _$conditionalUpdate(block: { type: string } & ComponentTemplate, condition: Function, inst: Component, parent: Element, anchor: Element) {
202-
if (block && block.type === condition(inst).type) {
203-
block.$update(inst);
204+
export function _$conditionalUpdate(block: { type: string } & ComponentTemplate, condition: Function, parent: Element, anchor: Element, inst: Component) {
205+
let globs = _$toArgs(arguments, 5);
206+
if (block && block.type === _$apply(condition, [inst], globs).type) {
207+
_$apply(block.$update, [inst], globs, block);
204208
} else {
205209
block && block.$destroy();
206-
block = condition(inst);
210+
block = _$apply(condition, [inst], globs);
207211
block.$create();
208-
block.$mount(parent, anchor);
212+
block.$mount(parent || inst.$parentEl, anchor);
209213
}
210214
return block;
211215
}
212216
export function _$bindUpdate(el: (HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement) & { _value: any }, binding: [string, any]) {
213217
let [attr, value] = binding;
214-
let _value: string | boolean = attr === 'checked' ? !!value : _$toString(value);
215-
if (/value|checked/.test(attr)) {
216-
if (el[attr] !== _value) el[attr] = _$isValueAttr(attr) ? _value : value;
217-
el[PROP_MAP._] = _$isValueAttr(attr) ? value : el[PROP_MAP.v];
218+
let _value: string = _$toString(value);
219+
if (_$isValueAttr(attr)) {
220+
if (el[attr] !== _value) el[attr] = _value;
221+
el[PROP_MAP._] = value;
218222
} else if (_$getAttr(el, attr) !== _value) {
219223
_$setAttr(el, [attr, _value]);
220224
}
221225
}
222-
export function _$bindBooleanAttr(el: Element, attrAndValue: [string, any]) {
223-
let [attr, value, hasAttr] = attrAndValue.concat([el.hasAttribute(attrAndValue[0])]);
224-
value == null || value === false ? hasAttr && el.removeAttribute(attr) : _$setAttr(el, [attr, '']);
226+
export function _$bindBooleanAttr(el: HTMLElement, attrAndValue: [string, any]) {
227+
let [attr, value] = attrAndValue;
228+
el[attr] = value == null || value === false ? (el.removeAttribute(attr), false) : (_$setAttr(el, [attr, '']), true);
225229
}
226230
export function _$textUpdate(text: Text, value: string) {
227231
if (text.data !== (value = _$toString(value))) text.data = value;
228232
}
229233
export function _$tagUpdate<T extends keyof HTMLElementTagNameMap>(node: HTMLElement, tag: T) {
230234
return _$toLowerCase(tag) !== _$toLowerCase(node.tagName) ? _$assignEl(node, _$el(tag)) : node;
231235
}
236+
export function _$removeReference(refs: Object, prop: string, node: HTMLElement) {
237+
let nodes = refs[prop];
238+
_$isArray(nodes) ? refs[prop].splice(nodes.indexOf(node), 1) : (delete refs[prop]);
239+
}
240+
export function _$htmlUpdate(node: HTMLElement, value: string) {
241+
if (node.innerHTML !== (value = _$toString(value))) node.innerHTML = value;
242+
}
243+
export function _$componentUpdate(parent: Component, Ctor: ComponentConstructor, inst: Component, value: ComponentConstructor, attrs: AttrParams, el: HTMLElement, sibling: HTMLElement) {
244+
if (value === Ctor) {
245+
inst && inst.$update();
246+
} else {
247+
Ctor = value;
248+
if (inst) {
249+
inst.$destroy();
250+
_$removeChild(parent, inst);
251+
}
252+
if (inst) {
253+
inst = _$addChild(parent, Ctor, attrs);
254+
inst.$create();
255+
inst.$mount(el, sibling);
256+
}
257+
}
258+
return [inst, Ctor];
259+
}
260+
export function _$destroyComponent(component: Component) {
261+
component.$unmount();
262+
component.$parent = null;
263+
component.$parentEl = null;
264+
component.$siblingEl = null;
265+
component.$children.splice(0, component.$children.length);
266+
}
267+
export function _$setElements(component: Component, parent: HTMLElement, sibling?: HTMLElement) {
268+
let brother = _$select(sibling);
269+
component.$siblingEl = brother;
270+
component.$parentEl = sibling && brother.parentElement || _$select(parent);
271+
}
232272
export function _$forLoop(root: Component, obj: any[], loop: (...args: any[]) => ComponentTemplate) {
233273
let items: ObjectLike<ComponentTemplate> = {}, loopParent: Element, loopSibling: Element;
234274
let globs = _$toArgs(arguments, 3);
235-
_$each(obj, (item, i) => { items[i] = loop.apply(null, [root, item, i].concat(globs)); });
275+
_$each(obj, (item, i, index) => { items[i] = _$apply(loop, [root, item, i, index], globs); });
236276
return {
237277
$create() {
238278
_$each(items, item => { item.$create(); });
@@ -244,17 +284,17 @@ export function _$forLoop(root: Component, obj: any[], loop: (...args: any[]) =>
244284
},
245285
$update(root: Component, obj: any[]) {
246286
let globs = _$toArgs(arguments, 2);
247-
_$each(items, (item, i) => {
287+
_$each(items, (item, i, index) => {
248288
if (obj[i]) {
249-
item.$update.apply(item, [root, obj[i], i].concat(globs));
289+
_$apply(item.$update, [root, obj[i], i, index], globs, item);
250290
} else {
251291
item.$destroy();
252292
delete items[i];
253293
}
254294
});
255-
_$each(obj, (item, i) => {
295+
_$each(obj, (item, i, index) => {
256296
if (!items[i]) {
257-
items[i] = loop.apply(null, [root, item, i].concat(globs));
297+
items[i] = _$apply(loop, [root, item, i, index], globs);
258298
items[i].$create();
259299
items[i].$mount(loopParent, loopSibling);
260300
}
@@ -265,10 +305,11 @@ export function _$forLoop(root: Component, obj: any[], loop: (...args: any[]) =>
265305
}
266306
};
267307
}
268-
export function _$each<T>(obj: T, cb: (value: IterateValue<T>, key: IterateKey<T>) => void) {
308+
export function _$each<T>(obj: T, cb: (value: IterateValue<T>, key: IterateKey<T>, index?: number) => void) {
309+
let i = 0;
269310
for (const key in obj) {
270311
if (_$hasProp(obj, key)) {
271-
cb(<any>obj[key], <any>(isNaN(+key) ? key : +key));
312+
cb(<any>obj[key], <any>(isNaN(+key) ? key : +key), i++);
272313
}
273314
}
274315
}

‎types.d.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,14 @@ interface ComponentTemplate {
3939
$create(): void;
4040
$mount(parent: string | Element, sibling?: string | boolean | Element): void;
4141
$update(state: Component, ...args: any[]): void;
42-
$unmout(): void;
42+
$unmount(): void;
4343
$destroy(): void;
4444
}
4545

4646
interface Component extends ComponentTemplate {
4747
$parent: Component;
48+
$parentEl: HTMLElement;
49+
$siblingEl: HTMLElement;
4850
readonly $refs: ObjectLike<HTMLElement[]>;
4951
readonly $slots: ObjectLike<DocumentFragment>;
5052
readonly $filters: ObjectLike<(...args: any[]) => any>;

0 commit comments

Comments
 (0)