version 3.2.0-alpha.41

Author: antonmak1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cample",
-  "version": "3.2.0-alpha.40",
+  "version": "3.2.0-alpha.41",
   "description": "Cample.js - fast modern javascript framework. Reactivity without virtual DOM!",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/config/config.ts

@@ -7,6 +7,7 @@ export const TEXT_REGEX = /\{\{\s*([^}]+)\s*\}\}|([^{}]+)/g;
 export const SPACE_REGEX = /\s+/g;
 export const EXCLAMATION_POINT = /(\!)/g;
 export const EACH_INDEX_NAME = "__campleEachIndex";
+export const CLICK_FUNCTION_NAME = "__campleFn";
 export const { appendChild, insertBefore, removeChild, replaceChild } =
   Node.prototype;
 export const updText = (

src/core/cample.ts

@@ -8,13 +8,16 @@ import {
 } from "../types/types";
 import { renderTemplate } from "./functions/render/render-template";
 import { checkFunction, getExportData } from "../shared/utils";
+import { CLICK_FUNCTION_NAME } from "../config/config";
 
 export class Cample {
   public selector: SelectorType;
   public template: string;
   public style: string;
   public trimHTML?: boolean;
   public exportData: ExportCampleDataType;
+  public _isListener: boolean;
+  public _el: Element | null;
 
   constructor(
     selector: SelectorType,
@@ -27,13 +30,39 @@ export class Cample {
     this.trimHTML = options.trimHTML !== undefined ? options.trimHTML : false;
     this.exportData = {};
     this.style = "";
+    this._isListener = false;
+    this._el = null;
   }
   render(template = "", options: OptionsType = {}): void {
     this.template = renderTemplate(template, options);
-
     if (typeof this.selector === "string") {
+      const eventListener: EventListenerOrEventListenerObject = (
+        current: Event
+      ) => {
+        let node: any =
+          current.composedPath !== undefined
+            ? current.composedPath()[0]
+            : current.target;
+        while (node !== null) {
+          const eventListener = node[CLICK_FUNCTION_NAME];
+          if (eventListener !== undefined && !node.disabled) {
+            eventListener(current);
+            if (current.cancelBubble) return;
+          }
+          node = node.parentNode;
+        }
+      };
       const el: Element | null = document.querySelector(this.selector);
-      if (el !== null) el.innerHTML = this.template;
+      if (el !== null) {
+        el.innerHTML = this.template;
+        this._el = el;
+      }
+      const setEventListener = () => {
+        if (!this._isListener && this._el !== null) {
+          document.addEventListener("click", eventListener);
+          this._isListener = true;
+        }
+      };
       Object.keys(options).forEach((e) => {
         if (options[e]._getStyle) {
           this.style += options[e]._getStyle;
@@ -54,6 +83,7 @@ export class Cample {
         for (let i = 0; i < this.exportData[selector].components.length; i++) {
           const e = this.exportData[selector].components[i];
           e.render(
+            setEventListener,
             this.trimHTML,
             this.exportData[selector].value,
             undefined,
@@ -65,6 +95,7 @@ export class Cample {
       Object.keys(options).forEach((e, i) => {
         const selector = options[e]._getSelector;
         options[e].render(
+          setEventListener,
           this.trimHTML,
           selector && this.exportData.hasOwnProperty(selector)
             ? this.exportData[selector].value

src/core/components/component/component.ts

@@ -95,6 +95,7 @@ export class Component extends DataComponent {
   }
 
   render(
+    setEventListener: () => void,
     trimHTML?: boolean,
     exportData?: ExportDataType,
     importId?: ExportIdType,
@@ -955,6 +956,7 @@ export class Component extends DataComponent {
                 this.functions
               );
             const { obj: newTemplateObj } = parseTemplate(
+              setEventListener,
               renderDynamic,
               [
                 renderFn1,

src/core/components/each/each.ts

@@ -110,6 +110,7 @@ export class Each extends DataComponent {
   }
 
   render(
+    setEventListener: () => void,
     trimHTML?: boolean,
     exportData?: ExportDataType,
     importId?: ExportIdType,
@@ -891,6 +892,7 @@ export class Each extends DataComponent {
           };
 
           const { obj: newTemplateObj } = parseTemplate(
+            setEventListener,
             renderDynamic,
             [
               renderFn1,