aprog 1.8.7 → 1.8.9

package/index.js

@@ -20,3 +20,4 @@ export {
     toKebabCaseStringPrototype, toSnakeCaseStringPrototype,
     repeatHTMLElementPrototype
 } from './src/html.js';
+export { prism } from "./src/prism.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aprog",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "description": "Допоміжна бібліотека js",
   "main": "index.js",
   "scripts": {

package/src/aprog.js

@@ -230,6 +230,7 @@ export const input = (attributes = {}) => {
                         input.type = String(attrValue);
                         break;
                     case "class":
+                    case "className":
                         input.className = String(attrValue);
                         break;
                     case "style":
@@ -247,6 +248,10 @@ export const input = (attributes = {}) => {
                     case "disabled":
                         input.disabled = attrValue;
                         break;
+                    case "autofocus":
+                    case "focus":
+                        input.focus();
+                        break;
                     default:
                         if (name.startsWith("data")) {
                             const kebabName = name
@@ -275,6 +280,7 @@ export const label = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         label.className = String(attrValue);
                         break;
                     case "value":
@@ -325,6 +331,7 @@ export const form = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         form.className = String(attrValue);
                         break;
                     case "action":
@@ -384,6 +391,7 @@ export const div = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         div.className = String(attrValue);
                         break;
                     case "value":
@@ -434,6 +442,7 @@ export const a = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         a.className = String(attrValue);
                         break;
                     case "value":
@@ -484,6 +493,7 @@ export const span = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         span.className = String(attrValue);
                         break;
                     case "value":
@@ -534,6 +544,7 @@ export const textarea = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         textarea.className = String(attrValue);
                         break;
                     case "value":
@@ -584,6 +595,7 @@ export const pre = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         pre.className = String(attrValue);
                         break;
                     case "value":
@@ -634,6 +646,7 @@ export const button = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         button.className = String(attrValue);
                         break;
                     case "type":
@@ -685,6 +698,7 @@ export const select = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         select.className = String(attrValue);
                         break;
                     case "style":
@@ -777,7 +791,10 @@ export const hr = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             switch (name) {
-                case "class": hr.className = String(attrValue); break;
+                case "class":
+                case "className":
+                    hr.className = String(attrValue);
+                    break;
                 case "style": Object.entries(attrValue).forEach(([styleName, styleValue]) => {
                     switch (styleName) {
                         case "zIndex": hr.style[styleName] = `99999${styleValue}`; break;
@@ -796,7 +813,10 @@ export const meta = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             switch (name) {
-                case "class": meta.className = String(attrValue); break;
+                case "class":
+                case "className":
+                    meta.className = String(attrValue);
+                    break;
                 case "style": Object.entries(attrValue).forEach(([styleName, styleValue]) => {
                     switch (styleName) {
                         case "zIndex": meta.style[styleName] = `99999${styleValue}`; break;
@@ -820,6 +840,7 @@ export const table = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         table.className = String(attrValue);
                         break;
                     case "value":
@@ -873,6 +894,7 @@ export const caption = (attributes = {}) => {
                         caption.style.captionSide = String(attrValue);
                         break;
                     case "class":
+                    case "className":
                         caption.className = String(attrValue);
                         break;
                     case "value":
@@ -923,6 +945,7 @@ export const thead = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         thead.className = String(attrValue);
                         break;
                     case "value":
@@ -973,6 +996,7 @@ export const tbody = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         tbody.className = String(attrValue);
                         break;
                     case "value":
@@ -1023,6 +1047,7 @@ export const tr = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         tr.className = String(attrValue);
                         break;
                     case "value":
@@ -1073,6 +1098,7 @@ export const th = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         th.className = String(attrValue);
                         break;
                     case "value":
@@ -1123,6 +1149,7 @@ export const td = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         td.className = String(attrValue);
                         break;
                     case "value":
@@ -1174,6 +1201,7 @@ export const img = (attributes = {}) => {
             } else {
                 switch (name) {
                     case "class":
+                    case "className":
                         img.className = String(attrValue);
                         break;
                     case "src":

package/src/css/prism.css

@@ -0,0 +1,35 @@
+/* override Prism JSON color styles */
+:root {
+    --prism-white: #ffffff;
+    --prism-green: #008800;
+    --prism-red: #ff2800;
+    --prism-red-2: #C43B00;
+    --prism-blue-2: #1199dd;
+    --prism-orange: #ff8800;
+    --prism-violet: #881199;
+
+    /* GENERAL COLORS */
+    --prism-bg: #212121;
+    --prism-operator: #d0d0d0;
+    --prism-property: #A782BB;
+    --prism-string: #8EA765;
+    --prism-number: #118899;
+    --prism-boolean: #CC7832;
+}
+pre.token.block {
+    min-width: 100%;
+    width: max-content;
+    padding: 1rem;
+    color: var(--prism-property);
+    background-color: var(--prism-bg);
+}
+.token.punctuation, .token.operator { color: var(--prism-operator); }
+.token.property { color: var(--prism-property); }
+.token.string { color: var(--prism-string); }
+.token.number { color: var(--prism-number); }
+.token.boolean, .token.null { color: var(--prism-boolean); }
+.token.editor  {
+    font-weight: 700;
+    color: var(--prism-blue-2);
+    text-shadow: 0 0 6px rgba(255, 255, 255, 1);
+}

package/src/prism.js

@@ -0,0 +1,172 @@
+import {span} from "./aprog.js";
+import "./css/prism.css";
+
+export const prism = (text) => {
+    const container = document.createElement("pre");
+    container.className = "token block";
+    const stack = [];
+    let counter = 1;
+
+    const tokenRegex = /"(?:\\.|[^"\\])*"|true|false|null|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|[{}\[\],:]/g;
+    let lastIndex = 0;
+
+    const tokens = Array.from(text.matchAll(tokenRegex));
+
+    for (let i = 0; i < tokens.length; i++) {
+        const match = tokens[i];
+        const token = match[0];
+        const indexInText = match.index;
+        const nextToken = tokens[i + 1]?.[0];
+
+        if (indexInText > lastIndex) {
+            const between = text.slice(lastIndex, indexInText);
+            container.appendChild(document.createTextNode(between));
+        }
+
+        lastIndex = indexInText + token.length;
+
+        if (token === "{" || token === "[") {
+            const index = counter++;
+            stack.push(index);
+
+            const isEmpty = (token === "{" && nextToken === "}") || (token === "[" && nextToken === "]");
+
+            if (isEmpty) {
+                container.appendChild(span({
+                    class: "token punctuation",
+                    value: token
+                }));
+                continue;
+            }
+
+            const elementStart = span({
+                class: `token punctuation start-${index}`,
+                style: isEmpty ? {} : { cursor: "pointer" },
+                dataStart: "m",
+                value: isEmpty ? token : `<span class="token editor">-</span> ${token}`,
+                onClick: isEmpty ? null : (event) => {
+                    const el = event.target.closest(`.start-${index}`);
+                    const tokenType = token;
+
+                    if (!el) return;
+
+                    const hide = el.dataset.start === "m";
+                    el.dataset.start = hide ? "p" : "m";
+                    el.innerHTML = `<span class="token editor">${hide ? "+" : "-"}</span> ${tokenType}`;
+
+                    let sibling = el.nextSibling;
+
+                    while (sibling) {
+                        const next = sibling.nextSibling;
+
+                        if (
+                            sibling.nodeType === 1 &&
+                            sibling.classList.contains(`end-${index}`)
+                        ) {
+                            break;
+                        }
+
+                        if (sibling.nodeType === 1) {
+                            if (hide) {
+                                sibling.style.display = "none";
+                            } else {
+                                sibling.style.display = "";
+                            }
+                        } else if (sibling.nodeType === 3) {
+                            if (hide) {
+                                const span = document.createElement("span");
+                                span.className = `__hidden-text-${index}`;
+                                span.style.display = "none";
+                                span.appendChild(sibling.cloneNode());
+                                el.parentNode.insertBefore(span, sibling);
+                                el.parentNode.removeChild(sibling);
+                            } else {
+                                const existing = el.parentNode.querySelector(`.__hidden-text-${index}`);
+                                if (existing) {
+                                    const textNode = existing.firstChild;
+                                    el.parentNode.insertBefore(textNode, existing);
+                                    el.parentNode.removeChild(existing);
+                                }
+                            }
+                        }
+
+                        sibling = next;
+                    }
+
+                    const endNode = el.parentNode.querySelector(`.end-${index}`);
+                    if (hide) {
+                        const dots = document.createElement("span");
+                        dots.className = `__dots-${index}`;
+                        dots.textContent = " … ";
+                        endNode.parentNode.insertBefore(dots, endNode);
+                    } else {
+                        const allDots = el.parentNode.querySelectorAll(`span[class*="__dots-"]`);
+                        allDots.forEach(dot => {
+                            const num = parseInt(dot.className.match(/__dots-(\d+)/)?.[1], 10);
+                            if (!isNaN(num) && num >= index) dot.remove();
+                        });
+
+                        const allStarts = el.parentNode.querySelectorAll(`span[class*="start-"]`);
+                        allStarts.forEach(startEl => {
+                            const match = startEl.className.match(/start-(\d+)/);
+                            const num = parseInt(match?.[1], 10);
+                            if (!isNaN(num) && num >= index) {
+                                startEl.dataset.start = "m";
+                                const symbol = startEl.textContent.trim().slice(-1);
+                                startEl.innerHTML = `<span class="token editor">-</span> ${symbol}`;
+                            }
+                        });
+                    }
+                }
+            });
+            container.appendChild(elementStart);
+        } else if (token === "}" || token === "]") {
+            const index = stack.pop();
+            const elementEnd = document.createElement("span");
+            elementEnd.className = `token punctuation end-${index}`;
+            elementEnd.textContent = token;
+            container.appendChild(elementEnd);
+        } else if (token === ":") {
+            const el = document.createElement("span");
+            el.className = "token operator";
+            el.textContent = token;
+            container.appendChild(el);
+        } else if (token === ",") {
+            const el = document.createElement("span");
+            el.className = "token punctuation";
+            el.textContent = token;
+            container.appendChild(el);
+        } else if (/^"/.test(token)) {
+            const nextChar = text[match.index + token.length];
+            const content = token.slice(1, -1);
+            const el = document.createElement("span");
+            el.className = nextChar === ":" ? "token property" : "token string";
+            el.textContent = `"${content}"`;
+            container.appendChild(el);
+        } else if (/^-?\d/.test(token)) {
+            const el = document.createElement("span");
+            el.className = "token number";
+            el.textContent = token;
+            container.appendChild(el);
+        } else if (token === "true" || token === "false") {
+            const el = document.createElement("span");
+            el.className = "token boolean";
+            el.textContent = token;
+            container.appendChild(el);
+        } else if (token === "null") {
+            const el = document.createElement("span");
+            el.className = "token null keyword";
+            el.textContent = token;
+            container.appendChild(el);
+        }
+
+        lastIndex = match.index + token.length;
+    }
+
+    if (lastIndex < text.length) {
+        const remaining = text.slice(lastIndex);
+        container.appendChild(document.createTextNode(remaining));
+    }
+
+    return container;
+};