tkeron 3.1.1 → 3.2.1

package/changelog.md

@@ -1,3 +1,15 @@
+# v3.2.1
+
+- removed path entry to @tkeron.
+
+# v3.2.0
+
+## Breaking changes
+
+- Added a simple library to support component development.
+- Modified the tsconfig.json file to use the root directory as a base.
+- Also, an index.ts file should be included in the root of the "comps" directory and components should be exported from there. This is to improve the length of component imports.
+
 # v3.1.1
 
 - placed the extensions.d.ts file in the root directory so that vscode recognizes css files, images, html, among others, as modules.

package/dist/cicd.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const fs_1 = require("fs");
 const path_1 = require("path");
 const libFiles_ts_1 = require("./libFiles.ts");
-for (const file of libFiles_ts_1.libFiles) {
-    (0, fs_1.copyFileSync)((0, path_1.join)("src", file), (0, path_1.join)("distFiles", file));
-}
+const copyFile_js_1 = require("./copyFile.js");
+(async () => {
+    const copiedFiles = [];
+    for (const file of libFiles_ts_1.libFiles) {
+        copiedFiles.push((0, copyFile_js_1.copyFile)((0, path_1.join)("src", file), (0, path_1.join)("distFiles", file)));
+    }
+    await Promise.all(copiedFiles);
+})();

package/dist/cmdInit.js

@@ -7,6 +7,7 @@ const buildLoaders_1 = require("./buildLoaders");
 const createTsConfigFile_1 = require("./createTsConfigFile");
 const fileExist_1 = require("./fileExist");
 const getOptions_1 = require("./getOptions");
+const copyDir_1 = require("./copyDir");
 const cmdInit = async ({ sourceDir, outputDir } = { sourceDir: "", outputDir: "" }) => {
     const options = (0, getOptions_1.getOptions)({ sourceDir, outputDir });
     sourceDir = options.sourceDir;
@@ -20,5 +21,8 @@ const cmdInit = async ({ sourceDir, outputDir } = { sourceDir: "", outputDir: ""
     const extModules = (0, buildLoaders_1.getExtModules)();
     const extModName = (0, path_1.join)(dotTkeron, "..", "extensions.d.ts");
     await (0, promises_1.writeFile)(extModName, extModules, { encoding: "utf-8" });
+    const tkeronLibSrc = (0, path_1.join)(__dirname, "..", "tkeron_library");
+    const tkeronLibDir = (0, path_1.join)(dotTkeron, "tkeron_library");
+    await (0, copyDir_1.copyDir)(tkeronLibSrc, tkeronLibDir);
 };
 exports.cmdInit = cmdInit;

package/dist/copyDir.d.ts

@@ -0,0 +1,2 @@
+import { CopyFileResponse } from "./copyFile";
+export declare const copyDir: (sourceDir: string, targetDir: string) => Promise<CopyFileResponse[]>;

package/dist/copyDir.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyDir = void 0;
+const path_1 = require("path");
+const getFilesRecursive_1 = require("./getFilesRecursive");
+const copyFile_1 = require("./copyFile");
+const copyDir = async (sourceDir, targetDir) => {
+    const files = (0, getFilesRecursive_1.getFilesRecursive)(sourceDir);
+    const allFilesPromises = [];
+    for (const file of files) {
+        const targetFileName = (0, path_1.normalize)(file).slice((0, path_1.normalize)(sourceDir).length);
+        const target = (0, path_1.join)(targetDir, targetFileName);
+        allFilesPromises.push((0, copyFile_1.copyFile)(file, target));
+    }
+    return await Promise.all(allFilesPromises);
+};
+exports.copyDir = copyDir;

package/dist/copyFile.d.ts

@@ -0,0 +1,8 @@
+export interface CopyFileResponse {
+    status: boolean;
+    message: string;
+    from: string;
+    to: string;
+    err?: Error;
+}
+export declare const copyFile: (from: string, to: string) => Promise<CopyFileResponse>;

package/dist/copyFile.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyFile = void 0;
+const fs_1 = require("fs");
+const promises_1 = require("fs/promises");
+const path_1 = require("path");
+const copyFile = async (from, to) => new Promise(async (resume) => {
+    const toDirectory = (0, path_1.dirname)(to);
+    await (0, promises_1.mkdir)(toDirectory, { recursive: true });
+    const rs = (0, fs_1.createReadStream)(from);
+    const ws = (0, fs_1.createWriteStream)(to);
+    rs.on("error", (err) => {
+        ws.close();
+        resume({ status: false, message: "error reading file", err, from, to });
+    });
+    ws.on("error", (err) => {
+        rs.close();
+        resume({ status: false, message: "error writing file", err, from, to });
+    });
+    rs.on("end", () => {
+        rs.close();
+        ws.close();
+        resume({ status: true, message: "file copied", from, to });
+    });
+    rs.pipe(ws);
+});
+exports.copyFile = copyFile;

package/dist/createTsConfigFile.js

@@ -14,10 +14,12 @@ const createTsConfigFile = async () => {
         "moduleResolution": "Node",
         "declaration": false,
         "skipLibCheck": true,
-        "baseUrl": "${sourceDir}",
         "paths": {
-            "@comps/*": [
-                "comps/*"
+            "@comps": [
+                "./${sourceDir}/comps",
+            ],
+            "@tkeron": [
+                "./.tkeron/tkeron_library"
             ],
         }
     },

package/dist/libFiles.ts.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.libFiles = void 0;
 exports.libFiles = [
-    "tkeron.ts",
     "eventEmitter.ts",
     "getType.ts",
     "runOncePerTime.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tkeron",
-  "version": "3.1.1",
+  "version": "3.2.1",
   "description": "Micro framework for developing web user interfaces with typescript.",
   "bin": {
     "tkeron": "dist/index.js",

package/tkeron_library/appendIn.ts

@@ -0,0 +1,48 @@
+import { TkeronElement } from "./element";
+import { settings } from "./settings";
+
+export const appendIn = (com: TkeronElement) => {
+  const appendInElement = (querySelector) => {
+    const element = document.querySelector(querySelector);
+    if (!element) return;
+    element.appendChild(com.htmlElement);
+  };
+
+  com.appendIn = {
+    body: <TkeronElement>{},
+    head: <TkeronElement>{},
+    element: (querySelector) => {
+      if (!settings.loaded) {
+        settings.runOnLoad.push(() => appendInElement(querySelector));
+        return com;
+      }
+      appendInElement(querySelector);
+      return com;
+    },
+  };
+
+  Object.defineProperty(com.appendIn, "body", {
+    get() {
+      if (!settings.loaded) {
+        settings.runOnLoad.push(() =>
+          document.body.appendChild(com.htmlElement)
+        );
+        return com;
+      }
+      document.body.appendChild(com.htmlElement);
+      return com;
+    },
+  });
+  Object.defineProperty(com.appendIn, "head", {
+    get() {
+      if (!settings.loaded) {
+        settings.runOnLoad.push(() =>
+          document.head.appendChild(com.htmlElement)
+        );
+        return com;
+      }
+      document.head.appendChild(com.htmlElement);
+      return com;
+    },
+  });
+};

package/tkeron_library/element.ts

@@ -0,0 +1,49 @@
+import { appendIn } from "./appendIn";
+import { setAttribute } from "./setAttribute";
+import { setHtml, setText } from "./setHtml_setText";
+
+export interface TkeronElement {
+  htmlElement: HTMLElement;
+  appendIn: {
+    body: TkeronElement;
+    head: TkeronElement;
+    element: (querySelector: string) => TkeronElement;
+  };
+  setHtml: (html: string) => TkeronElement;
+  setText: (text: string) => TkeronElement;
+  setAttribute: (attribute: string, value: string) => TkeronElement;
+}
+
+export interface TkeronElementArguments {
+  tag: string;
+  childs: TkeronElement[];
+}
+
+export const tk = (
+  args?: Partial<TkeronElementArguments> | string
+): TkeronElement => {
+  if (!args) args = {};
+
+  let { tag, childs } = typeof args === "object" ? args : <any>{};
+
+  if (typeof args === "string") tag = args;
+
+  if (!tag) tag = "div";
+
+  const com = <TkeronElement>{
+    htmlElement: document.createElement(tag),
+  };
+
+  //init chaining methods
+  appendIn(com);
+  setHtml(com);
+  setText(com);
+  setAttribute(com);
+
+  if (childs)
+    for (const child of childs) {
+      com.htmlElement.appendChild(child.htmlElement);
+    }
+
+  return com;
+};

package/tkeron_library/index.ts

@@ -0,0 +1,20 @@
+export * from "./element";
+import { tk } from "./element";
+import { settings } from "./settings";
+
+/**
+ * @param css {string} css code to append in style element
+ */
+export const addCss = (css: string) => {
+  tk({ tag: "style" });
+};
+
+/**
+ * Run on document load to render elements waiting for body element.
+ */
+document.addEventListener("DOMContentLoaded", () => {
+  settings.loaded = true;
+  for (const fn of settings.runOnLoad) {
+    fn();
+  }
+});

package/tkeron_library/setAttribute.ts

@@ -0,0 +1,8 @@
+import { TkeronElement } from "./element";
+
+export const setAttribute = (com: TkeronElement) => {
+  com.setAttribute = (attribute, value) => {
+    com.htmlElement.setAttribute(attribute, value);
+    return com;
+  };
+};

package/tkeron_library/setHtml_setText.ts

@@ -0,0 +1,15 @@
+import { TkeronElement } from "./element";
+
+export const setHtml = (com: TkeronElement) => {
+  com.setHtml = (html) => {
+    com.htmlElement.innerHTML = html;
+    return com;
+  };
+};
+
+export const setText = (com: TkeronElement) => {
+  com.setText = (text) => {
+    com.htmlElement.innerHTML = text;
+    return com;
+  };
+};

package/tkeron_library/settings.ts

@@ -0,0 +1,7 @@
+/**
+ * Tkeron general settings object
+ */
+export const settings = {
+  loaded: false,
+  runOnLoad: <CallableFunction[]>[],
+};

package/dist/tkeron.d.ts

@@ -1,44 +0,0 @@
-export interface tkeronOptions {
-    type?: string;
-    value?: string;
-}
-export interface Component {
-    readonly id: string;
-    value: string;
-    setValue(v: string): Component;
-    readonly parent: Component | null;
-    _setParent(c: Component | null): Component;
-    childs: Component[];
-    add(...c: Component[]): Component;
-    remove(c: Component): Component;
-    renderIn(query: string | HTMLElement): Component;
-    appendIn(query: string | HTMLElement): Component;
-    getHTMLElement(f: (el: HTMLElement) => void): Component;
-    getHTML(): string;
-    readonly classList: string[];
-    addClass(cls: string): Component;
-    removeClass(cls: string): Component;
-    readonly attributes: any;
-    addAttribute(attr: string, value: string): Component;
-    removeAttribute(attr: string): Component;
-    getElement(): HTMLElement;
-    setElement(el: HTMLElement): Component;
-    css(css: string): Component;
-    getCss(): string;
-    on(f: (_com: Component, _el: HTMLElement) => void): Component;
-    onRender(fn: () => void): Component;
-    onAppend(fn: () => void): Component;
-    send(...msg: any[]): Component;
-    onMessage(fn: (...msg: any[]) => void): Component;
-}
-export declare const tkeron: {
-    (opt?: tkeronOptions | string, ...classes: string[]): Component;
-    css(name: string, cssText: string): void;
-    script(anonFunc: CallableFunction, options?: scriptOptions): void;
-};
-export interface scriptOptions {
-    appendIn?: string;
-    runOnDOMContentLoaded?: boolean;
-    globalFunctions?: CallableFunction[];
-}
-export declare const version = "1.9.0";

package/dist/tkeron.js

@@ -1,255 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.version = exports.tkeron = void 0;
-const handlers = {};
-const addHandler = (id, event, fn) => {
-    if (typeof handlers[event] === "undefined")
-        handlers[event] = {};
-    if (typeof handlers[event][id] === "undefined")
-        handlers[event][id] = [];
-    handlers[event][id].push(fn);
-};
-const runHandlers = (id, event, ...args) => {
-    if (typeof handlers[event] === "undefined")
-        return;
-    if (typeof handlers[event][id] === "undefined")
-        return;
-    handlers[event][id].forEach((fn) => fn(...args));
-};
-const toHexString = (bytes) => bytes.reduce((str, byte) => str + byte.toString(16).padStart(2, "0"), "");
-const rnds = (n) => toHexString(crypto.getRandomValues(new Uint8Array(n))).slice(0, n);
-const IDs = [];
-const getID = () => {
-    const id = "tk_" + rnds(20);
-    //@ts-ignore
-    if (IDs.includes(id)) {
-        return getID();
-    }
-    return id;
-};
-const tkeron = (opt, ...classes) => {
-    if (typeof opt === "string") {
-        classes.push(opt);
-        opt = { type: "div" };
-    }
-    if (!opt)
-        opt = { type: "div" };
-    const valueProp = ["input", "textarea"].some((n) => {
-        if ("type" in opt)
-            return opt.type === n;
-    });
-    let el = document.createElement(opt.type || "div");
-    const priv = {
-        parent: {},
-        childs: [],
-        css: "",
-    };
-    priv.parent = null;
-    const com = {
-        id: getID(),
-        parent: priv.parent,
-        _setParent: (c) => {
-            priv.parent = c;
-            return com;
-        },
-        value: "",
-        setValue: (v) => {
-            com.value = v;
-            return com;
-        },
-        childs: priv.childs,
-        add: (...c) => {
-            c.forEach((_) => {
-                _._setParent(com);
-                priv.childs.push(_);
-                _.getHTMLElement((ele) => {
-                    el.appendChild(ele);
-                });
-            });
-            return com;
-        },
-        remove: (c) => {
-            c._setParent(null);
-            priv.childs = priv.childs.filter((_c) => {
-                if (_c.id === c.id)
-                    return false;
-                return true;
-            });
-            c.getHTMLElement((_el) => {
-                el.removeChild(_el);
-            });
-            return com;
-        },
-        renderIn: (query) => {
-            if (typeof query === "string") {
-                const domel = document.querySelector(query);
-                if (!domel) {
-                    document.addEventListener("DOMContentLoaded", () => {
-                        com.renderIn(query);
-                    });
-                    return com;
-                }
-                domel.innerHTML = "";
-                domel.appendChild(el);
-                runHandlers(com.id, 0 /* event.render */);
-                return com;
-            }
-            query.innerHTML = "";
-            query.appendChild(el);
-            runHandlers(com.id, 0 /* event.render */);
-            return com;
-        },
-        appendIn: (query) => {
-            if (typeof query === "string") {
-                const domel = document.querySelector(query);
-                if (!domel) {
-                    document.addEventListener("DOMContentLoaded", () => {
-                        com.appendIn(query);
-                    });
-                    return com;
-                }
-                domel.appendChild(el);
-                runHandlers(com.id, 1 /* event.append */);
-                return com;
-            }
-            query.appendChild(el);
-            runHandlers(com.id, 1 /* event.append */);
-            return com;
-        },
-        getHTMLElement: (f) => {
-            f(el);
-            return com;
-        },
-        getHTML: () => {
-            return el.outerHTML;
-        },
-        classList: [],
-        addClass: (cls) => {
-            el.classList.add(cls);
-            return com;
-        },
-        removeClass: (cls) => {
-            el.classList.remove(cls);
-            return com;
-        },
-        attributes: {},
-        addAttribute: (attr, value) => {
-            el.setAttribute(attr, value);
-            return com;
-        },
-        removeAttribute: (attr) => {
-            el.removeAttribute(attr);
-            return com;
-        },
-        getElement: () => {
-            return el;
-        },
-        setElement: (ele) => {
-            if (!ele)
-                throw Error("Component.setElement: Element must not be null.");
-            el = ele;
-            return com;
-        },
-        css: (css) => {
-            priv.css = css;
-            exports.tkeron.css(com.id, `#${com.id} {${css}}`);
-            com.addAttribute("id", com.id);
-            return com;
-        },
-        getCss: () => priv.css,
-        on: (f) => {
-            f(com, el);
-            return com;
-        },
-        onRender: (fn) => {
-            addHandler(com.id, 0 /* event.render */, fn);
-            return com;
-        },
-        onAppend: (fn) => {
-            addHandler(com.id, 1 /* event.append */, fn);
-            return com;
-        },
-        send: (...msg) => {
-            runHandlers(com.id, 2 /* event.msg */, ...msg);
-            return com;
-        },
-        onMessage: (fn) => {
-            addHandler(com.id, 2 /* event.msg */, fn);
-            return com;
-        },
-    };
-    Object.defineProperty(com, "attributes", {
-        get() {
-            return el.attributes;
-        },
-    });
-    Object.defineProperty(com, "value", {
-        get() {
-            if (valueProp) {
-                //@ts-ignore
-                return el.value;
-            }
-            return el.innerHTML;
-        },
-        set(v) {
-            if (valueProp) {
-                //@ts-ignore
-                el.value = v;
-                return true;
-            }
-            priv.childs.forEach((c) => c._setParent(null));
-            priv.childs.length = 0;
-            el.innerHTML = v;
-            return true;
-        },
-    });
-    Object.defineProperty(com, "classList", {
-        get() {
-            //@ts-ignore
-            return Array.from(el.classList);
-        },
-    });
-    if (typeof opt.value !== "undefined")
-        com.setValue(opt.value);
-    if (classes.length) {
-        classes.forEach((c) => {
-            com.addClass(c);
-        });
-    }
-    return com;
-};
-exports.tkeron = tkeron;
-exports.tkeron.css = (name, cssText) => {
-    const selctr = `style[name=${name}]`;
-    const cstyle = document.head.querySelector(selctr);
-    if (cstyle) {
-        cstyle.innerHTML = cssText;
-        return;
-    }
-    const style = document.createElement("style");
-    style.setAttribute("name", name);
-    style.innerHTML = cssText;
-    //@ts-ignore
-    style.selctr = selctr;
-    document.head.appendChild(style);
-};
-exports.tkeron.script = (anonFunc, options) => {
-    const { appendIn, runOnDOMContentLoaded, globalFunctions } = options || {};
-    let value = `(${anonFunc.toString()})();`;
-    if (runOnDOMContentLoaded)
-        value = `document.addEventListener("DOMContentLoaded",(${anonFunc.toString()}));`;
-    if (globalFunctions) {
-        let functions = "";
-        for (const func of globalFunctions) {
-            const name = func.name;
-            functions += `
-      const ${name} = ${func.toString()};
-      window.${name} = ${name};
-      `;
-        }
-        value = `${functions} ${value}`;
-    }
-    value = `/*tkeron-front-script ${value} tkeron-front-script*/`;
-    (0, exports.tkeron)({ type: "script", value }).appendIn(appendIn || "body");
-};
-exports.version = "1.9.0";

package/distFiles/tkeron.ts

@@ -1,319 +0,0 @@
-export interface tkeronOptions {
-  type?: string;
-  value?: string;
-}
-
-export interface Component {
-  readonly id: string;
-
-  value: string;
-  setValue(v: string): Component;
-
-  readonly parent: Component | null;
-  _setParent(c: Component | null): Component;
-  childs: Component[];
-  add(...c: Component[]): Component;
-  remove(c: Component): Component;
-
-  renderIn(query: string | HTMLElement): Component;
-  appendIn(query: string | HTMLElement): Component;
-
-  getHTMLElement(f: (el: HTMLElement) => void): Component;
-  getHTML(): string;
-
-  readonly classList: string[];
-  addClass(cls: string): Component;
-  removeClass(cls: string): Component;
-
-  readonly attributes: any;
-  addAttribute(attr: string, value: string): Component;
-  removeAttribute(attr: string): Component;
-
-  getElement(): HTMLElement;
-  setElement(el: HTMLElement): Component;
-
-  css(css: string): Component;
-  getCss(): string;
-
-  on(f: (_com: Component, _el: HTMLElement) => void): Component;
-
-  onRender(fn: () => void): Component;
-  onAppend(fn: () => void): Component;
-
-  send(...msg: any[]): Component;
-  onMessage(fn: (...msg: any[]) => void): Component;
-}
-
-const enum event {
-  render,
-  append,
-  msg,
-}
-const handlers: any = {};
-const addHandler = (id: string, event: event, fn: (...args: any[]) => void) => {
-  if (typeof handlers[event] === "undefined") handlers[event] = {} as any;
-  if (typeof handlers[event][id] === "undefined")
-    handlers[event][id] = [] as any[];
-  handlers[event][id].push(fn);
-};
-const runHandlers = (id: string, event: event, ...args: any[]) => {
-  if (typeof handlers[event] === "undefined") return;
-  if (typeof handlers[event][id] === "undefined") return;
-  handlers[event][id].forEach((fn: (...args: any[]) => void) => fn(...args));
-};
-
-const toHexString = (bytes: Uint8Array): string =>
-  bytes.reduce((str, byte) => str + byte.toString(16).padStart(2, "0"), "");
-const rnds = (n: number): string =>
-  toHexString(crypto.getRandomValues(new Uint8Array(n))).slice(0, n);
-
-const IDs: string[] = [];
-const getID = (): string => {
-  const id = "tk_" + rnds(20);
-  //@ts-ignore
-  if (IDs.includes(id)) {
-    return getID();
-  }
-  return id;
-};
-
-export const tkeron = (
-  opt?: tkeronOptions | string,
-  ...classes: string[]
-): Component => {
-  if (typeof opt === "string") {
-    classes.push(opt);
-    opt = { type: "div" };
-  }
-  if (!opt) opt = { type: "div" };
-  const valueProp: boolean = ["input", "textarea"].some((n) => {
-    if ("type" in (opt as any)) return (opt as any).type === n;
-  });
-  let el = document.createElement(opt.type || "div");
-  const priv = {
-    parent: {} as Component | null,
-    childs: [] as Component[],
-    css: "",
-  };
-  priv.parent = null;
-  const com: Component = {
-    id: getID(),
-    parent: priv.parent,
-    _setParent: (c: Component | null) => {
-      priv.parent = c;
-      return com;
-    },
-    value: "",
-    setValue: (v: string) => {
-      com.value = v;
-      return com;
-    },
-    childs: priv.childs,
-    add: (...c: Component[]) => {
-      c.forEach((_) => {
-        _._setParent(com);
-        priv.childs.push(_);
-        _.getHTMLElement((ele) => {
-          el.appendChild(ele);
-        });
-      });
-      return com;
-    },
-    remove: (c: Component) => {
-      c._setParent(null);
-      priv.childs = priv.childs.filter((_c) => {
-        if (_c.id === c.id) return false;
-        return true;
-      });
-      c.getHTMLElement((_el) => {
-        el.removeChild(_el);
-      });
-      return com;
-    },
-    renderIn: (query: string | HTMLElement) => {
-      if (typeof query === "string") {
-        const domel = document.querySelector(query);
-        if (!domel) {
-          document.addEventListener("DOMContentLoaded", () => {
-            com.renderIn(query);
-          });
-          return com;
-        }
-        domel.innerHTML = "";
-        domel.appendChild(el);
-        runHandlers(com.id, event.render);
-        return com;
-      }
-      (query as HTMLElement).innerHTML = "";
-      (query as HTMLElement).appendChild(el);
-      runHandlers(com.id, event.render);
-      return com;
-    },
-    appendIn: (query: string | HTMLElement) => {
-      if (typeof query === "string") {
-        const domel = document.querySelector(query);
-        if (!domel) {
-          document.addEventListener("DOMContentLoaded", () => {
-            com.appendIn(query);
-          });
-          return com;
-        }
-        domel.appendChild(el);
-        runHandlers(com.id, event.append);
-        return com;
-      }
-      (query as HTMLElement).appendChild(el);
-      runHandlers(com.id, event.append);
-      return com;
-    },
-    getHTMLElement: (f) => {
-      f(el);
-      return com;
-    },
-    getHTML: () => {
-      return el.outerHTML;
-    },
-    classList: [],
-    addClass: (cls: string) => {
-      el.classList.add(cls);
-      return com;
-    },
-    removeClass: (cls: string) => {
-      el.classList.remove(cls);
-      return com;
-    },
-    attributes: {},
-    addAttribute: (attr: string, value: string) => {
-      el.setAttribute(attr, value);
-      return com;
-    },
-    removeAttribute: (attr: string) => {
-      el.removeAttribute(attr);
-      return com;
-    },
-    getElement: () => {
-      return el;
-    },
-    setElement: (ele: HTMLElement) => {
-      if (!ele) throw Error("Component.setElement: Element must not be null.");
-      el = ele;
-      return com;
-    },
-    css: (css: string) => {
-      priv.css = css;
-      tkeron.css(com.id, `#${com.id} {${css}}`);
-      com.addAttribute("id", com.id);
-      return com;
-    },
-    getCss: () => priv.css,
-    on: (f) => {
-      f(com, el);
-      return com;
-    },
-    onRender: (fn) => {
-      addHandler(com.id, event.render, fn);
-      return com;
-    },
-    onAppend: (fn) => {
-      addHandler(com.id, event.append, fn);
-      return com;
-    },
-    send: (...msg: any[]) => {
-      runHandlers(com.id, event.msg, ...msg);
-      return com;
-    },
-    onMessage: (fn) => {
-      addHandler(com.id, event.msg, fn);
-      return com;
-    },
-  };
-
-  Object.defineProperty(com, "attributes", {
-    get() {
-      return el.attributes;
-    },
-  });
-  Object.defineProperty(com, "value", {
-    get() {
-      if (valueProp) {
-        //@ts-ignore
-        return el.value;
-      }
-      return el.innerHTML;
-    },
-    set(v: string) {
-      if (valueProp) {
-        //@ts-ignore
-        el.value = v;
-        return true;
-      }
-      priv.childs.forEach((c) => c._setParent(null));
-      priv.childs.length = 0;
-      el.innerHTML = v;
-      return true;
-    },
-  });
-  Object.defineProperty(com, "classList", {
-    get() {
-      //@ts-ignore
-      return Array.from(el.classList);
-    },
-  });
-
-  if (typeof opt.value !== "undefined") com.setValue(opt.value);
-
-  if (classes.length) {
-    classes.forEach((c) => {
-      com.addClass(c);
-    });
-  }
-
-  return com;
-};
-
-tkeron.css = (name: string, cssText: string) => {
-  const selctr = `style[name=${name}]`;
-  const cstyle = document.head.querySelector(selctr);
-  if (cstyle) {
-    cstyle.innerHTML = cssText;
-    return;
-  }
-  const style = document.createElement("style");
-  style.setAttribute("name", name);
-  style.innerHTML = cssText;
-  //@ts-ignore
-  style.selctr = selctr;
-
-  document.head.appendChild(style);
-};
-
-export interface scriptOptions {
-  appendIn?: string;
-  runOnDOMContentLoaded?: boolean;
-  globalFunctions?: CallableFunction[];
-}
-tkeron.script = (anonFunc: CallableFunction, options?: scriptOptions) => {
-  const { appendIn, runOnDOMContentLoaded, globalFunctions } =
-    options || ({} as scriptOptions);
-  let value = `(${anonFunc.toString()})();`;
-  if (runOnDOMContentLoaded)
-    value = `document.addEventListener("DOMContentLoaded",(${anonFunc.toString()}));`;
-
-  if (globalFunctions) {
-    let functions = "";
-    for (const func of globalFunctions) {
-      const name = func.name;
-      functions += `
-      const ${name} = ${func.toString()};
-      window.${name} = ${name};
-      `;
-    }
-    value = `${functions} ${value}`;
-  }
-
-  value = `/*tkeron-front-script ${value} tkeron-front-script*/`;
-
-  tkeron({ type: "script", value }).appendIn(appendIn || "body");
-};
-
-export const version = "1.9.0";