Skip to content

Commit 79c0ba6

Browse files
antonmak1antonmak1
committed
version 3.2.0-alpha.32
1 parent d6d0872 commit 79c0ba6

File tree

7 files changed

+58
-75
lines changed

7 files changed

+58
-75
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cample",
3-
"version": "3.2.0-alpha.31",
3+
"version": "3.2.0-alpha.32",
44
"description": "Cample.js - fast modern javascript framework. Reactivity without virtual DOM!",
55
"main": "dist/index.js",
66
"types": "dist/index.d.ts",

‎src/config/config.ts

-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ export const TEXT_REGEX = /\{\{\s*([^}]+)\s*\}\}|([^{}]+)/g;
77
export const SPACE_REGEX = /\s+/g;
88
export const EXCLAMATION_POINT = /(\!)/g;
99
export const EACH_INDEX_NAME = "__campleEachIndex";
10-
export const CLICK_FUNCTION_NAME = "__campleFn";
11-
1210
export const { appendChild, insertBefore, removeChild, replaceChild } =
1311
Node.prototype;
1412
export const updText = (

‎src/core/cample.ts

+1-33
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,13 @@ import {
88
} from "../types/types";
99
import { renderTemplate } from "./functions/render/render-template";
1010
import { checkFunction, getExportData } from "../shared/utils";
11-
import { CLICK_FUNCTION_NAME } from "../config/config";
1211

1312
export class Cample {
1413
public selector: SelectorType;
1514
public template: string;
1615
public style: string;
1716
public trimHTML?: boolean;
1817
public exportData: ExportCampleDataType;
19-
public _isListener: boolean;
20-
public _el: Element | null;
2118

2219
constructor(
2320
selector: SelectorType,
@@ -30,40 +27,13 @@ export class Cample {
3027
this.trimHTML = options.trimHTML !== undefined ? options.trimHTML : false;
3128
this.exportData = {};
3229
this.style = "";
33-
this._isListener = false;
34-
this._el = null;
3530
}
3631
render(template = "", options: OptionsType = {}): void {
3732
this.template = renderTemplate(template, options);
3833

3934
if (typeof this.selector === "string") {
40-
const eventListener: EventListenerOrEventListenerObject = (
41-
current: Event
42-
) => {
43-
let node: any =
44-
current.composedPath !== undefined
45-
? current.composedPath()[0]
46-
: current.target;
47-
while (node !== null) {
48-
const eventListener = node[CLICK_FUNCTION_NAME];
49-
if (eventListener !== undefined && !node.disabled) {
50-
eventListener(current);
51-
if (current.cancelBubble) return;
52-
}
53-
node = node.parentNode;
54-
}
55-
};
5635
const el: Element | null = document.querySelector(this.selector);
57-
if (el !== null) {
58-
el.innerHTML = this.template;
59-
this._el = el;
60-
}
61-
const setEventListener = () => {
62-
if (!this._isListener && this._el !== null) {
63-
document.addEventListener("click", eventListener);
64-
this._isListener = true;
65-
}
66-
};
36+
if (el) el.innerHTML = this.template;
6737
Object.keys(options).forEach((e) => {
6838
if (options[e]._getStyle) {
6939
this.style += options[e]._getStyle;
@@ -84,7 +54,6 @@ export class Cample {
8454
for (let i = 0; i < this.exportData[selector].components.length; i++) {
8555
const e = this.exportData[selector].components[i];
8656
e.render(
87-
setEventListener,
8857
this.trimHTML,
8958
this.exportData[selector].value,
9059
undefined,
@@ -96,7 +65,6 @@ export class Cample {
9665
Object.keys(options).forEach((e, i) => {
9766
const selector = options[e]._getSelector;
9867
options[e].render(
99-
setEventListener,
10068
this.trimHTML,
10169
selector && this.exportData.hasOwnProperty(selector)
10270
? this.exportData[selector].value

‎src/core/components/component/component.ts

-2
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@ export class Component extends DataComponent {
9393
}
9494

9595
render(
96-
setEventListener: () => void,
9796
trimHTML?: boolean,
9897
exportData?: ExportDataType,
9998
importId?: ExportIdType,
@@ -909,7 +908,6 @@ export class Component extends DataComponent {
909908
this.functions
910909
);
911910
const { obj: newTemplateObj } = parseTemplate(
912-
setEventListener,
913911
renderDynamic,
914912
[
915913
renderFn1,

‎src/core/components/each/each.ts

-2
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@ export class Each extends DataComponent {
108108
}
109109

110110
render(
111-
setEventListener: () => void,
112111
trimHTML?: boolean,
113112
exportData?: ExportDataType,
114113
importId?: ExportIdType,
@@ -881,7 +880,6 @@ export class Each extends DataComponent {
881880
};
882881

883882
const { obj: newTemplateObj } = parseTemplate(
884-
setEventListener,
885883
renderDynamic,
886884
[
887885
renderFn1,

‎src/core/functions/parse/parse-template.ts

+56-31
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import {
66
indexOf,
77
pop,
88
unshift,
9-
updClass,
10-
CLICK_FUNCTION_NAME
9+
updClass
1110
} from "../../../config/config";
1211
import {
1312
checkFunction,
@@ -48,7 +47,6 @@ import { parseKey } from "./parse-key";
4847
import { parseText } from "./parse-text";
4948

5049
export const parseTemplate = (
51-
setEventListener: () => void,
5250
renderDynamic: (...args: any[]) => any,
5351
valueFunctions: [
5452
(...args: any[]) => string,
@@ -165,7 +163,6 @@ export const parseTemplate = (
165163
if (node.nodeType === Node.ELEMENT_NODE) {
166164
parseText(node as Element);
167165
renderEl(
168-
setEventListener,
169166
isEach,
170167
valueFunctions,
171168
eventArray,
@@ -318,25 +315,57 @@ export const parseTemplate = (
318315
);
319316
if (!checkFunction(fn)) createError("Data key is of function type");
320317
let setEvent: any;
318+
const argsLength = args.length;
321319
if (isEach === true) {
322-
if (keyEvent === "click") {
323-
setEvent = (
324-
element: Element,
325-
currentComponent: any,
326-
mainEl: Element,
327-
keyEl?: string,
328-
eachValue?: any
329-
) => {
330-
if (element) {
331-
const eventFn = (event: Event) => {
332-
const newArgs = args.map(({ renderedKey, getEventsDataFn }) =>
333-
getEventsDataFn(mainEl, index, renderedKey, eachValue)
334-
);
335-
fn(event).apply(this, newArgs);
336-
};
337-
element[CLICK_FUNCTION_NAME] = eventFn;
338-
}
339-
};
320+
if (argsLength > 0) {
321+
if (argsLength === 1) {
322+
setEvent = (
323+
element: Element,
324+
currentComponent: any,
325+
mainEl: Element,
326+
keyEl?: string,
327+
eachValue?: any
328+
) => {
329+
if (element) {
330+
const eventFn = (event: Event) => {
331+
const { renderedKey, getEventsDataFn } = args[0];
332+
const newArg = getEventsDataFn(
333+
mainEl,
334+
index,
335+
renderedKey,
336+
eachValue
337+
);
338+
fn(event)(newArg);
339+
};
340+
element.addEventListener(keyEvent, eventFn);
341+
}
342+
};
343+
} else {
344+
setEvent = (
345+
element: Element,
346+
currentComponent: any,
347+
mainEl: Element,
348+
keyEl?: string,
349+
eachValue?: any
350+
) => {
351+
if (element) {
352+
const eventFn = (event: Event) => {
353+
const newArgs = new Array(argsLength);
354+
for (let i = 0; i < argsLength; i++) {
355+
const { renderedKey, getEventsDataFn } = args[i];
356+
newArgs[i] = getEventsDataFn(
357+
mainEl,
358+
index,
359+
renderedKey,
360+
eachValue
361+
);
362+
}
363+
fn(event)(...newArgs);
364+
};
365+
element.addEventListener(keyEvent, eventFn);
366+
}
367+
};
368+
}
340369
} else {
341370
setEvent = (
342371
element: Element,
@@ -347,17 +376,14 @@ export const parseTemplate = (
347376
) => {
348377
if (element) {
349378
const eventFn = (event: Event) => {
350-
const newArgs = args.map(({ renderedKey, getEventsDataFn }) =>
351-
getEventsDataFn(mainEl, index, renderedKey, eachValue)
352-
);
353-
fn(event).apply(this, newArgs);
379+
fn(event)();
354380
};
355381
element.addEventListener(keyEvent, eventFn);
356382
}
357383
};
358384
}
359385
} else {
360-
if (keyEvent === "click") {
386+
if (argsLength > 0) {
361387
setEvent = (
362388
element: Element,
363389
currentComponent: any,
@@ -368,9 +394,9 @@ export const parseTemplate = (
368394
if (element) {
369395
const eventFn = (event: Event) => {
370396
const newArgs = args.map((e: any) => getEventsData1(e, id));
371-
fn(event).apply(this, newArgs);
397+
fn(event)(...newArgs);
372398
};
373-
element[CLICK_FUNCTION_NAME] = eventFn;
399+
element.addEventListener(keyEvent, eventFn);
374400
}
375401
};
376402
} else {
@@ -383,8 +409,7 @@ export const parseTemplate = (
383409
) => {
384410
if (element) {
385411
const eventFn = (event: Event) => {
386-
const newArgs = args.map((e: any) => getEventsData1(e, id));
387-
fn(event).apply(this, newArgs);
412+
fn(event)();
388413
};
389414
element.addEventListener(keyEvent, eventFn);
390415
}

‎src/core/functions/render/render-el.ts

-4
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ import { renderKey } from "./render-key";
3434
import { renderValues } from "./render-values";
3535

3636
export const renderEl = (
37-
setEventListener: () => void,
3837
isEach: boolean | undefined,
3938
valueFunctions: [
4039
(...args: any[]) => string,
@@ -232,9 +231,6 @@ export const renderEl = (
232231
})
233232
: args;
234233
const keyEvent = e.name.substring(1);
235-
if (keyEvent === "click") {
236-
setEventListener();
237-
}
238234
const event = {
239235
elId: 0,
240236
indexValue: values.length,

0 commit comments

Comments
 (0)