Skip to content

Commit

Permalink
version 3.2.0-beta.6
Browse files Browse the repository at this point in the history
  • Loading branch information
@antonmak1
antonmak1 committed Nov 19, 2023
1 parent a2c4ed5 commit 7f9c900
Show file tree
Hide file tree
Showing 24 changed files with 1,382 additions and 1,043 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
],
"rules": {
"@typescript-eslint/no-explicit-any": ["off"],
"prefer-spread": ["off"]
"prefer-spread": ["off"],
"@typescript-eslint/no-this-alias": ["off"]
}
}
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "cample",
"version": "3.2.0-beta.5",
"version": "3.2.0-beta.6",
"description": "Cample.js - moderately fast reactive javascript framework. Reactivity without Virtual DOM!",
"main": "dist/index.js",
"types": "dist/index.d.ts",
Expand Down
36 changes: 29 additions & 7 deletions src/config/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,38 @@ export const CLICK_FUNCTION_NAME = "__click__";
export const EXCLAMATION_POINT = /(\!)/g;
export const { appendChild, insertBefore, removeChild, replaceChild } =
Node.prototype;
export const updText = Object.getOwnPropertyDescriptor(
CharacterData.prototype,
"data"
)?.set as (v: any) => void;
export const updText = (
Object.getOwnPropertyDescriptor(CharacterData.prototype, "data") as any
).set as (v: any) => void;
export const updClass = (
Object.getOwnPropertyDescriptor(Element.prototype, "className") as any
).set as (v: any) => void;
export const firstChild = (
Object.getOwnPropertyDescriptor(Node.prototype, "firstChild") as any
).get as (this: Element) => any;
export const nextSibling = (
Object.getOwnPropertyDescriptor(Node.prototype, "nextSibling") as any
).get as (this: Element) => any;
export const previousSibling = (
Object.getOwnPropertyDescriptor(Node.prototype, "previousSibling") as any
).get as (this: Element) => any;
export const getParentNode = (
Object.getOwnPropertyDescriptor(Node.prototype, "parentNode") as any
).get as (this: Element) => any;

export const addClass = DOMTokenList.prototype.add;
export const removeClass = DOMTokenList.prototype.remove;
export const cloneNode = Node.prototype.cloneNode;
export const { push } = Array.prototype;
export const { push, indexOf, map: mapArray, unshift } = Array.prototype;
export const { split } = String.prototype;
export const { setAttribute, removeAttribute, replaceChildren, remove } =
Element.prototype;
export const {
setAttribute,
removeAttribute,
replaceChildren,
remove,
hasAttribute,
getAttribute
} = Element.prototype;
export const { has: setHas, add } = Set.prototype;
export const { set, has, get } = Map.prototype;
export const { concat } = String.prototype;
38 changes: 0 additions & 38 deletions src/core/cample.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,13 @@ 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;
private _isListener: boolean;

constructor(
selector: SelectorType,
Expand All @@ -29,44 +27,10 @@ export class Cample {
this.trimHTML = options.trimHTML !== undefined ? options.trimHTML : false;
this.exportData = {};
this.style = "";
this._isListener = false;
}
render(template = "", options: OptionsType = {}): void {
this.template = renderTemplate(template, options);

const renderNode = (node: any, current: { cancelBubble: any }) => {
while (node) {
const eventListener = node[CLICK_FUNCTION_NAME];
if (eventListener && !node.disabled) {
eventListener.call(node);
if (current.cancelBubble) return;
}
node = node.parentNode || node.host;
}
};
const eventListener = (current: any) => {
const currentNode = current?.composedPath()[0] || current.target;
if (current.target !== currentNode) {
Object.defineProperty(current, "target", {
configurable: true,
value: currentNode
});
}
Object.defineProperty(current, "currentTarget", {
configurable: true,
get() {
return currentNode || document;
}
});
renderNode(currentNode, current);
};

const setEventListener = () => {
if (!this._isListener) {
document.addEventListener("click", eventListener);
this._isListener = true;
}
};
if (typeof this.selector === "string") {
const el: Element | null = document.querySelector(this.selector);
if (el) el.innerHTML = this.template;
Expand All @@ -90,7 +54,6 @@ export class Cample {
this.exportData[selector].value[exportId][index] = data;
this.exportData[selector].components.forEach((e) => {
e.render(
setEventListener,
this.trimHTML,
selector && this.exportData.hasOwnProperty(selector)
? this.exportData[selector].value
Expand All @@ -107,7 +70,6 @@ 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
Expand Down
122 changes: 48 additions & 74 deletions src/core/components/component/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { renderAttributes } from "../../functions/render/render-attributes";
import {
ComponentOptionsType,
SelectorType,
DynamicTextType,
StartType,
FunctionsArray,
ExportDataType,
Expand Down Expand Up @@ -39,11 +38,12 @@ import {
NodeValuesType,
CurrentKeyType,
AttributesValType,
CampleImportType,
NodeTextType,
ValueType,
ClassType,
FunctionEventType
FunctionEventType,
NodeValueType,
IndexObjNode,
RenderNodeFunctionType
} from "../../../types/types";
import {
checkFunction,
Expand Down Expand Up @@ -71,7 +71,7 @@ import { renderKeyData } from "../../functions/render/render-key-data";
import { updateText } from "../../functions/data/update-text";
import { updateAttributes } from "../../functions/data/update-attributes";
import { updateClass } from "../../functions/data/update-class";
import { cloneNode, push, updText } from "../../../config/config";
import { cloneNode, mapArray, push, updText } from "../../../config/config";

export class Component extends DataComponent {
public data: DataComponentType;
Expand All @@ -92,7 +92,6 @@ export class Component extends DataComponent {
}

render(
setEventListener: () => void,
trimHTML?: boolean,
exportData?: ExportDataType,
importId?: ExportIdType,
Expand All @@ -113,14 +112,14 @@ export class Component extends DataComponent {
for (const val of node.values) {
if (val.type === 1 || val.type === 2) {
if (val.type === 1) {
const value = val.value as NodeTextType;
const value = val as NodeTextType;
if (value.key.key === key) {
nodeIsKey = true;
break;
}
} else {
const value = val.value as AttributesValType;
if (value.keys.hasOwnProperty(key)) {
if ((value.keys as AttributesValType).hasOwnProperty(key)) {
nodeIsKey = true;
break;
}
Expand Down Expand Up @@ -202,12 +201,12 @@ export class Component extends DataComponent {
e.values.forEach((value) => {
switch (value.type) {
case 1:
const value1 = value.value as NodeTextType;
const value1 = value as NodeTextType;
const newData = String(
renderDynamic(value1.key, data, undefined)
);
if (value1.value !== newData) {
(value.value as NodeTextType).value = newData;
(value as NodeTextType).value = newData;
value.render(newData);
}
break;
Expand Down Expand Up @@ -243,22 +242,13 @@ export class Component extends DataComponent {
data: any,
importData: any
) => {
switch (key.type) {
case 0:
const firstKeyData = data[key.originKey];
return key.isProperty
? renderKeyData(firstKeyData, key.properties as Array<string>)
: firstKeyData;
case 1:
return renderValues(
key,
data,
importData,
undefined,
renderDynamic
);
default:
return undefined;
if (!key.isValue) {
const firstKeyData = data[key.originKey];
return key.isProperty
? renderKeyData(firstKeyData, key.properties as Array<string>)
: firstKeyData;
} else {
return renderValues(key, data, importData, undefined);
}
};
const newFunction = (
Expand Down Expand Up @@ -916,36 +906,25 @@ export class Component extends DataComponent {
el: templateElemenet
} = templateEl;
const el = cloneNode.call(templateElemenet, true);
const nodes: Array<number | ChildNode> = [...templateNodes];
const values: ValuesTemplateType = templateValues.map((o) => {
return {
...o,
value: !o.type ? o.value : { ...o.value }
} as ValueType;
});
let i = -1;
const lastIndex = nodes.length - 1;
function renderNode(node: ChildNode) {
i++;
const id = nodes.indexOf(i);
if (id > -1) {
nodes[id] = node;
}
if (node.nodeType === Node.ELEMENT_NODE) {
for (
let currentNode = node.firstChild;
currentNode;
currentNode = currentNode.nextSibling
) {
if (typeof nodes[lastIndex] !== "number") {
break;
} else {
renderNode(currentNode);
}
}
}
const length = templateNodes.length;
const nodes: Array<IndexObjNode | ChildNode | null> = [];
push.call(nodes, el as ChildNode);
for (let i = 0; i < length; i++) {
const templateNode = templateNodes[i];
const { render, rootId } = templateNode;
push.call(
nodes,
(render as RenderNodeFunctionType).call(nodes[rootId])
);
}
renderNode(el as ChildNode);
const values: ValuesTemplateType = mapArray.call(
templateValues,
(o) => {
return {
...o
} as ValueType;
}
) as ValuesTemplateType;
const attrFunc = (key: CurrentKeyType) =>
renderDynamic(key, data, undefined);
const newValues: NodeValuesType = [];
Expand All @@ -958,41 +937,36 @@ export class Component extends DataComponent {
const node = nodes[val.id as number] as Element;
switch (val.type) {
case 0:
const value1 = val.value as FunctionEventType;
value1(node);
const { render } = val;
(render as FunctionEventType)(node);
break;
case 1:
const value2 = val.value as DynamicTextType;
const newData = String(
renderDynamic(value2.key, data, undefined)
renderDynamic(val.key as CurrentKeyType, data, undefined)
);
const texts = value2.texts.map((e) => {
const texts = (val.texts as (number | Text)[]).map((e) => {
const node = nodes[e as number] as Text;
updText.call(node, newData);
return node;
});
newValues.push({
render: (value: any = undefined) => updateText(value, texts),
type: 1,
value: {
key: value2.key,
value: newData
}
});
key: val.key,
value: newData
} as NodeValueType);
break;
case 2:
const value3 = val.value as AttributesValType;
const fn = (fnNew: any, keys?: DynamicKeyObjectArrayType) =>
updateAttributes(node, value3, fnNew, keys);
updateAttributes(node, val, fnNew, keys);
fn(attrFunc, filtredKeys);
newValues.push({
render: fn,
type: 2,
value: value3
});
...(val as AttributesValType)
} as NodeValueType);
break;
case 3:
const value4 = val.value as CampleImportType;
const value4 = val;
const componentName = node.getAttribute("data-cample");
const keyImportString = value4.value;
if (keyImportString && componentName) {
Expand All @@ -1007,9 +981,9 @@ export class Component extends DataComponent {
}
break;
case 4:
const value5 = val.value as ClassType;
const value5 = val;
const fnClass = (fnNew: any) =>
updateClass(node.classList, value5, fnNew);
updateClass(node, value5, fnNew);
fnClass(attrFunc);
push.call(newValues, {
render: fnClass,
Expand Down Expand Up @@ -1167,7 +1141,7 @@ export class Component extends DataComponent {
currentComponent.dataFunctions
);
const { filtredKeys, obj: newTemplateObj } = parseTemplate(
setEventListener,
[] as any,
this.template as string,
index,
currentId,
Expand Down
Loading

0 comments on commit 7f9c900

Please sign in to comment.