ar-design
Version:
AR Design is a (react | nextjs) ui library.
103 lines (102 loc) • 4.78 kB
JavaScript
import React from "react";
100004557273;
class Parser {
// Public
_setElements;
// Private
// private _lineBreakSpaces = 4;
constructor(setElements) {
this._setElements = setElements;
}
JsxToString = (child, subChilde = false, indentLevel = 0) => {
if (!React.isValidElement(child))
return;
let componentName = "";
let componentContent = child.props.children;
if (typeof child.type === "string")
componentName = child.type;
else {
const componentType = child.type;
componentName = componentType.displayName || componentType.name || "Unknown";
}
// Indent seviyesi için boşlukları ekle.
const indent = " ".repeat(indentLevel);
// Eğer `br` elementi ise işlemi sonlandır
if (componentName === "br")
return;
const attributes = Object.keys(child.props).filter((key) => key !== "children");
const attributesLength = attributes.length;
const attributesList = attributes
.map((key) => this.FormatAttributeValue(key, child.props[key]))
.join(" ");
const formattedTag = componentName[0]
? componentName[0].toUpperCase() === componentName[0]
? `[react-tag]${componentName}[/react-tag]`
: componentName
: "";
const formattedAttributes = attributesLength > 0 ? ` [attributes]${attributesList}[/attributes]` : "";
// Eğer gelen iç eleman bir nesneyse yeniden yapılan.
if (React.isValidElement(componentContent)) {
// İç içe tek bir çocuk eleman varsa recursive olarak işlemeye devam et
componentContent = `\n${this.JsxToString(componentContent, true, indentLevel + 1)}\n`;
}
else if (Array.isArray(componentContent)) {
// Eğer birden fazla çocuk varsa hepsini işle
componentContent = componentContent
.map((contentChild) => `[sub-item]${this.JsxToString(contentChild, true, indentLevel + 1)}[/sub-item]`)
.join("");
}
else if (typeof componentContent === "string") {
// Eğer metin içeriği varsa, trimle
componentContent = componentContent.trim();
}
// componentContent =
// attributesLength >= this._lineBreakSpaces ? `\n ${componentContent}\n` : componentContent;
const renderElement = componentContent != undefined
? `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes}[close]>[/close]${componentContent}${typeof child.props["children"] === "object" ? indent : ""}[open]</[/open][tag]${formattedTag}[/tag][close]>[/close]`
: `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes} [close]/>[/close]`;
!subChilde && this._setElements((prevElements) => [...prevElements, renderElement]);
return renderElement;
};
HandleEntries = (propValue) => {
if (React.isValidElement(propValue)) {
const x = propValue.type;
return `[react-element][react-tag]${x.displayName}[/react-tag][/react-element]`;
}
if (propValue && typeof propValue === "object") {
return `[curly-bracket] ${Object.entries(propValue)
.map(([key, value]) => `[attribute-key]${key}[/attribute-key][colon]:[/colon] ${this.HandleEntries(value)}`)
.join(", ")} [/curly-bracket]`;
}
return typeof propValue === "number"
? `[number]${propValue}[/number]`
: `[string]${propValue}[/string]`;
};
FormatAttributeValue = (key, value) => {
let result = "";
switch (typeof value) {
case "number":
result = `[number]${value}[/number]`;
break;
case "string":
result = `[string]${value}[/string]`;
break;
case "boolean":
result = `[boolean]${value}[/boolean]`;
break;
case "object":
const entries = Object.entries(value)
.map(([subKey, subValue]) => `[child-attribute][attribute-key]${subKey}[/attribute-key][colon]:[/colon] ${this.HandleEntries(subValue)}[/child-attribute]`)
.join(", ");
result = `[object]${entries}[/object]`;
break;
case "function":
result = `[function][/function]`;
break;
default:
return "";
}
return `[attribute][attribute-key]${key}[/attribute-key][equal]=[/equal]${result}[/attribute]`;
};
}
export default Parser;