version 3.2.0-alpha.47

Author: antonmak1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cample",
-  "version": "3.2.0-alpha.46",
+  "version": "3.2.0-alpha.47",
   "description": "Cample.js - one of the fastest frameworks without a virtual DOM on the Internet!",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/core/cample.ts

@@ -62,7 +62,18 @@ export class Cample {
       };
       const el: Element | null = document.querySelector(this.selector);
       if (el !== null) {
-        el.innerHTML = this.template;
+        const elementDocument = new DOMParser().parseFromString(
+          `<template>${this.template}</template>`,
+          "text/html"
+        );
+        const elWrapper = elementDocument.childNodes[0].childNodes[0]
+          .firstChild as HTMLTemplateElement;
+        const nodes = elWrapper.content.childNodes;
+        el.innerHTML = "";
+        for (let i = 0; i < nodes.length; i++) {
+          const currentNode = nodes[i];
+          el.appendChild(currentNode);
+        }
         this._el = el;
       }
       const setEventListener = () => {

src/shared/utils.ts

@@ -78,8 +78,12 @@ export const getIsValue = (key: string) => {
   } else return false;
 };
 export const getElement = (template: string, trim?: boolean) => {
-  const elWrapper = document.createElement("template");
-  elWrapper.innerHTML = trim ? template.trim() : template;
+  const elementDocument = new DOMParser().parseFromString(
+    `<template>${trim ? template.trim() : template}</template>`,
+    "text/html"
+  );
+  const elWrapper = elementDocument.childNodes[0].childNodes[0]
+    .firstChild as HTMLTemplateElement;
   if (elWrapper.content.children.length > 1) {
     createError("Component include only one node with type 'Element'");
   }
@@ -89,7 +93,7 @@ export const getElement = (template: string, trim?: boolean) => {
         if ((node as Element).tagName === "pre") return;
         break;
       case Node.TEXT_NODE:
-        if (!/\S/.test(node.textContent as string)) {
+        if (!/\S/.test(node.textContent!)) {
           node.remove();
           return;
         }
@@ -100,7 +104,9 @@ export const getElement = (template: string, trim?: boolean) => {
     }
   };
   prepareNode(elWrapper.content.childNodes[0]);
-  return elWrapper.content.firstElementChild;
+  const currentEl = elWrapper.content.firstElementChild;
+  if (!currentEl) createError("Element is undefined");
+  return currentEl;
 };
 export const isValuesEqual = (val: any, newVal: any): boolean => {
   if (val === newVal) return true;
@@ -485,12 +491,6 @@ export const getArrImportString = (
   }
 };
 
-export const checkNodes = (template: string): boolean => {
-  const el = document.createElement("template");
-  el.innerHTML = template;
-  return el.content.childNodes.length === 1;
-};
-
 export const getElements = (el: Element | null) => {
   const els: Array<Element> = [];
   if (el) {