ru.coon 3.0.80 → 3.0.81

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# Version 3.0.81, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/bd688d381953e5cc5d8011296b21dcd891bf1d7b)
+* ## Fixes
+* <span style='color:red'>fix</span> ([d82071], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/d82071dc2c72b15caf116564cd84ec5b5900bfc6))
+
+* refactoring ([9429b5], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/9429b536e6d3b30cfbf0afe349b6638dd62933bf))
+* update: CHANGELOG.md ([ef0a27], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/ef0a27156e4b211f6d5fbd1b37dedc6b978b03c9))
+
 # Version 3.0.80, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/3b43f1d4de9199df4725890955ab76c6e4491cdc)
 * refactoring OpenPanelPlugin ([67cd0c], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/67cd0c0b004f89f7fb3607497a43f960ae4f0735))
 * update: CHANGELOG.md ([6e78bf], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/6e78bf0dd1e0394557f2aba6b2fa56c1f022fc86))

package/package.json

@@ -4,7 +4,7 @@
     "name": "ru.coon"
   },
   "description": "",
-  "version": "3.0.80",
+  "version": "3.0.81",
   "repository": {
     "type": "git",
     "url": "git+http://gitlab-dbr.sigma-it.local/dbr/ru.coon"

package/src/IndentTemplate.js

@@ -0,0 +1,324 @@
+/* eslint-disable require-jsdoc */
+/**
+ * A template engine that uses indentation-based syntax to define structure,
+ * supporting mixins, loops, and variable interpolation.
+ */
+class IndentTemplate {
+    /**
+     * Creates a new IndentTemplate instance.
+     * @param {string} [template=''] - The initial template string
+     */
+    constructor(template = '') {
+        this._template = template;
+        this._ast = null;
+        this._mixins = {};
+    }
+
+    /**
+     * Sets or changes the template string.
+     * @param {string} template - The template string to set
+     * @returns {IndentTemplate} This instance for chaining
+     */
+    setTemplate(template) {
+        this._template = template;
+        this._ast = null;
+        this._mixins = {};
+        return this; // chainable
+    }
+
+    /**
+     * Compiles the template by parsing it into an AST and collecting mixins.
+     * @returns {IndentTemplate} This instance for chaining
+     * @throws {Error} If the template is empty or has invalid syntax
+     */
+    compile() {
+        if (!this._template) {
+            throw new Error('Шаблон пуст. Используй setTemplate(template).');
+        }
+
+        const rawLines = this._template
+            .split('\n')
+            .map((l) => l.replace(/\r$/, ''))
+            .filter((l) => l.trim().length > 0);
+
+        const lines = rawLines.map((line) => {
+            const m = line.match(/^(\s*)/);
+            const indent = m ? m[1].length : 0;
+            const level = Math.floor(indent / 2); // 2 пробела = 1 уровень
+            return {
+                level,
+                content: line.trim(),
+            };
+        });
+
+        this._mixins = {};
+        let index = 0;
+
+        const parseBlock = (expectedLevel) => {
+            const nodes = [];
+
+            while (index < lines.length) {
+                const {level, content} = lines[index];
+
+                if (level < expectedLevel) {
+                    break;
+                }
+                if (level > expectedLevel) {
+                    // некорректный отступ — считаем конец этого блока
+                    break;
+                }
+
+                // ---- миксин определение ------------------------------------
+                if (content.startsWith('@mixin ')) {
+                    if (expectedLevel !== 0) {
+                        throw new Error('@mixin должен быть на верхнем уровне без отступов');
+                    }
+
+                    const def = content.slice(7).trim(); // после "@mixin "
+                    const parts = def.split(/\s+/);
+                    const name = parts[0];
+                    const params = parts.slice(1); // список имён параметров
+
+                    index++;
+                    // тело миксина — блок на уровне 1
+                    const body = parseBlock(expectedLevel + 1);
+
+                    this._mixins[name] = {params, body};
+                    continue; // миксин не попадает в основной AST
+                }
+
+                // ---- цикл @for ---------------------------------------------
+                if (content.startsWith('@for ')) {
+                    const forLine = content.slice(5).trim(); // убираем "@for "
+                    const match = forLine.match(/^(\w+)\s+in\s+(.+)$/);
+                    if (!match) {
+                        throw new Error('Неверный синтаксис @for: ' + content);
+                    }
+                    const varName = match[1];
+                    const listExpr = match[2].trim();
+
+                    index++;
+                    const children = parseBlock(expectedLevel + 1);
+
+                    nodes.push({
+                        type: 'for',
+                        varName,
+                        listExpr,
+                        children,
+                    });
+                    continue;
+                }
+
+                // ---- использование миксина: @use name(arg1, arg2) ----------
+                if (content.startsWith('@use ')) {
+                    const call = content.slice(5).trim();
+                    const m = call.match(/^(\w+)\s*\((.*)\)$/);
+                    if (!m) {
+                        throw new Error('Неверный синтаксис @use: ' + content);
+                    }
+                    const mixinName = m[1];
+                    const argsRaw = m[2].trim();
+                    const argExprs = argsRaw ?
+                        argsRaw.split(',').map((s) => s.trim()) :
+                        [];
+
+                    index++;
+
+                    nodes.push({
+                        type: 'use',
+                        mixinName,
+                        argExprs,
+                    });
+                    continue;
+                }
+
+                // ---- обычный тег -------------------------------------------
+                const [tag, ...restParts] = content.split(/\s+/);
+                const text = restParts.join(' ');
+                const selfClosing = new Set(['br', 'hr', 'img', 'input', 'meta', 'link']);
+                const lowerTag = tag.toLowerCase();
+                const isSelfClosing = selfClosing.has(lowerTag);
+
+                index++;
+
+                let children = [];
+                if (!text && !isSelfClosing && index < lines.length) {
+                    const next = lines[index];
+                    if (next.level > expectedLevel) {
+                        children = parseBlock(expectedLevel + 1);
+                    }
+                }
+
+                nodes.push({
+                    type: 'tag',
+                    tag,
+                    text,
+                    isSelfClosing,
+                    children,
+                });
+            }
+
+            return nodes;
+        };
+
+        this._ast = parseBlock(0);
+        return this; // chainable
+    }
+
+    /**
+     * Builds the final HTML output by rendering the compiled template with provided data.
+     * @param {Object} [data={}] - The data object to render the template with
+     * @returns {string} The rendered HTML string
+     */
+    build(data = {}) {
+        if (!this._ast) {
+            this.compile();
+        }
+        return this._renderNodes(this._ast, data);
+    }
+
+    // ===================== RENDER =====================
+
+    /**
+     * Renders an array of nodes with the given scope.
+     * @param {Array} nodes - Array of AST nodes to render
+     * @param {Object} scope - The current scope/data context
+     * @returns {string} Concatenated rendered nodes
+     * @private
+     */
+    _renderNodes(nodes, scope) {
+        return nodes.map((node) => this._renderNode(node, scope)).join('');
+    }
+
+    /**
+     * Renders a single node based on its type.
+     * @param {Object} node - The AST node to render
+     * @param {Object} scope - The current scope/data context
+     * @returns {string} The rendered HTML for this node
+     * @private
+     */
+    _renderNode(node, scope) {
+    // for
+        if (node.type === 'for') {
+            const list = this._resolvePath(scope, node.listExpr);
+            if (!Array.isArray(list) || list.length === 0) {
+                return '';
+            }
+            let out = '';
+            for (const item of list) {
+                const childScope = Object.create(scope);
+                childScope[node.varName] = item;
+                out += this._renderNodes(node.children, childScope);
+            }
+            return out;
+        }
+
+        // use mixin
+        if (node.type === 'use') {
+            const def = this._mixins[node.mixinName];
+            if (!def) {
+                throw new Error(`Миксин "${node.mixinName}" не найден`);
+            }
+
+            const {params, body} = def;
+            const argValues = node.argExprs.map((expr) => this._resolvePath(scope, expr));
+
+            const childScope = Object.create(scope);
+            params.forEach((name, i) => {
+                childScope[name] = argValues[i];
+            });
+
+            return this._renderNodes(body, childScope);
+        }
+
+        // обычный тег
+        if (node.type === 'tag') {
+            const {tag, text, isSelfClosing, children} = node;
+
+            if (isSelfClosing) {
+                return `<${tag}>`;
+            }
+
+            const innerText = text ?
+                this._renderTextWithTemplates(text, scope) :
+                '';
+
+            const childrenHtml = children && children.length ?
+                this._renderNodes(children, scope) :
+                '';
+
+            return `<${tag}>${innerText}${childrenHtml}</${tag}>`;
+        }
+
+        return '';
+    }
+
+    /**
+     * Renders text with template expressions replaced by values from scope.
+     * @param {string} text - Text potentially containing template expressions
+     * @param {Object} scope - The current scope/data context
+     * @returns {string} Text with expressions replaced by values
+     * @private
+     */
+    _renderTextWithTemplates(text, scope) {
+        let result = '';
+        let lastIndex = 0;
+        const regex = /\{\{([^}]+)\}\}/g;
+
+        text.replace(regex, (match, expr, offset) => {
+            // статичный кусок до {{ ... }}
+            const staticPart = text.slice(lastIndex, offset);
+            result += this._escape(staticPart);
+
+            const value = this._resolvePath(scope, expr.trim());
+            const strVal = value == null ? '' : String(value);
+            result += this._escape(strVal);
+
+            lastIndex = offset + match.length;
+            return '';
+        });
+
+        // хвост после последнего {{ ... }}
+        const tail = text.slice(lastIndex);
+        result += this._escape(tail);
+
+        return result;
+    }
+
+    /**
+     * Resolves a dot-notation path in the scope object.
+     * @param {Object} scope - The scope object to look in
+     * @param {string} path - Dot-notation path like "user.name"
+     * @returns {*} The resolved value or undefined
+     * @private
+     */
+    _resolvePath(scope, path) {
+        if (!path) {
+            return undefined;
+        }
+        const parts = path.split('.');
+        let value = scope;
+        for (const part of parts) {
+            if (value == null) {
+                return undefined;
+            }
+            value = value[part];
+        }
+        return value;
+    }
+
+    /**
+     * Escapes HTML special characters in text.
+     * @param {string} text - Text to escape
+     * @returns {string} Escaped text
+     * @private
+     */
+    _escape(text) {
+        return String(text)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+}
+
+export default IndentTemplate;

package/src/Template.js

@@ -0,0 +1,420 @@
+/**
+ * A template engine that parses and compiles templates with custom syntax.
+ * Supports elements, mixins, loops, conditions, and variable interpolation.
+ */
+class Template {
+    /**
+     * Creates a new Template instance.
+     * @param {string} source - The template source string
+     */
+    constructor(source) {
+        this.source = source;
+        this.ast = this.parse(source);
+        this.renderFn = this.compile(this.ast);
+    }
+
+    /**
+     * Builds the final output by rendering the compiled template with provided context.
+     * @param {Object} context - The context object to render the template with
+     * @returns {string} The rendered output string
+     */
+    build(context = {}) {
+        return this.renderFn(context);
+    }
+
+    // ========== ПАРСЕР ==========
+
+    /**
+     * Parses the template source into an Abstract Syntax Tree (AST).
+     * @param {string} source - The template source string
+     * @returns {Object} The parsed AST representation
+     */
+    parse(source) {
+        const lines = source.split('\n').filter((line) => line.trim() !== '');
+        const mixins = new Map();
+        const {nodes} = this.parseBlock(lines, 0, 0, mixins);
+        return {type: 'Root', children: nodes, mixins};
+    }
+
+    /**
+     * Parses a block of lines at a specific indentation level.
+     * @param {string[]} lines - Array of template lines
+     * @param {number} start - Starting index in the lines array
+     * @param {number} indentLevel - Current indentation level
+     * @param {Map} mixins - Map of defined mixins
+     * @returns {Object} Object containing parsed nodes and the next index
+     */
+    parseBlock(lines, start, indentLevel, mixins) {
+        const nodes = [];
+        let i = start;
+
+        while (i < lines.length) {
+            const line = lines[i];
+            const match = line.match(/^ */);
+            const currentIndent = match ? match[0].length : 0;
+
+            if (currentIndent < indentLevel) {
+                break;
+            }
+            if (currentIndent !== indentLevel) {
+                throw new Error(`Invalid indentation at line ${i + 1}. Expected ${indentLevel}, got ${currentIndent}.`);
+            }
+
+            const content = line.trim();
+            let node;
+
+            if (content.startsWith('@mixin ')) {
+                const mixin = this.parseMixinDecl(content);
+                const {nodes: body, nextIndex} = this.parseBlock(lines, i + 1, indentLevel + 2, mixins);
+                mixin.body = body;
+                mixins.set(mixin.name, mixin);
+                node = mixin;
+                i = nextIndex;
+            } else if (content.startsWith('@use ')) {
+                const call = this.parseMixinCall(content);
+                const def = mixins.get(call.name);
+                if (!def) {
+                    throw new Error(`Undefined mixin: ${call.name}`);
+                }
+                node = {type: 'MixinCall', definition: def, args: call.args};
+                i++;
+            } else if (content.startsWith('@each ')) {
+                const each = this.parseEach(content);
+                const {nodes: body, nextIndex} = this.parseBlock(lines, i + 1, indentLevel + 2, mixins);
+                each.children = body;
+                node = each;
+                i = nextIndex;
+            } else if (content.startsWith('@if ')) {
+                const condition = content.slice(4).trim();
+                const ifNode = {type: 'If', condition, thenBranch: [], elseBranch: []};
+                const {nodes: thenBody, nextIndex: afterThen} = this.parseBlock(lines, i + 1, indentLevel + 2, mixins);
+                ifNode.thenBranch = thenBody;
+                i = afterThen;
+
+                // Проверяем, есть ли @else сразу после
+                if (i < lines.length) {
+                    const elseLine = lines[i].trim();
+                    const elseIndent = lines[i].match(/^ */)[0].length;
+                    if (elseIndent === indentLevel && elseLine === '@else') {
+                        const {nodes: elseBody, nextIndex: afterElse} = this.parseBlock(lines, i + 1, indentLevel + 2, mixins);
+                        ifNode.elseBranch = elseBody;
+                        i = afterElse;
+                    }
+                }
+
+                node = ifNode;
+            } else {
+                node = this.parseElement(content);
+                const {nodes: children, nextIndex} = this.parseBlock(lines, i + 1, indentLevel + 2, mixins);
+                node.children = children;
+                i = nextIndex;
+            }
+
+            if (node.type !== 'MixinDecl') {
+                nodes.push(node);
+            }
+        }
+
+        return {nodes, nextIndex: i};
+    }
+
+    /**
+     * Parses an element line into a structured object.
+     * @param {string} line - A line containing an element definition
+     * @returns {Object} Parsed element object
+     */
+    parseElement(line) {
+        const tagMatch = line.match(/^([a-zA-Z][a-zA-Z0-9]*)\b/);
+        if (!tagMatch) {
+            throw new Error(`Invalid tag: "${line}"`);
+        }
+        const tagName = tagMatch[1];
+        const rest = line.slice(tagMatch[0].length).trim();
+
+        const selfClosingTags = new Set([
+            'img', 'br', 'hr', 'input', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr'
+        ]);
+
+        const attrs = {};
+        let text = '';
+
+        // Простой парсинг: всё, что содержит = → атрибут; остальное — текст
+        const tokens = rest.match(/(?:[^"\s=]+|"[^"]*")+/g) || [];
+        let inAttrs = true;
+        for (const t of tokens) {
+            if (t.includes('=')) {
+                const [key, val] = t.split('=', 2);
+                let finalVal = val;
+                if ((val.startsWith('"') && val.endsWith('"')) ||
+            (val.startsWith('\'') && val.endsWith('\''))) {
+                    finalVal = val.slice(1, -1);
+                }
+                attrs[key] = finalVal;
+            } else if (inAttrs && !t.startsWith('"') && !t.includes('{{')) {
+                // Предполагаем, что это булев атрибут
+                attrs[t] = true;
+            } else {
+                inAttrs = false;
+                if (text) {
+                    text += ' ';
+                }
+                text += t;
+            }
+        }
+
+        return {
+            type: 'Element',
+            tagName,
+            attrs,
+            text,
+            children: [],
+            selfClosing: selfClosingTags.has(tagName),
+        };
+    }
+
+    /**
+     * Parses a mixin declaration line.
+     * @param {string} line - A line containing a mixin declaration
+     * @returns {Object} Parsed mixin declaration object
+     */
+    parseMixinDecl(line) {
+        const match = line.match(/^@mixin\s+([a-zA-Z_][a-zA-Z0-9_]*)\s*\(([^)]*)\)/);
+        if (!match) {
+            throw new Error(`Invalid mixin declaration: ${line}`);
+        }
+        const name = match[1];
+        const params = match[2].split(',').map((p) => p.trim()).filter((p) => p);
+        return {type: 'MixinDecl', name, params, body: []};
+    }
+
+    /**
+     * Parses a mixin call line.
+     * @param {string} line - A line containing a mixin call
+     * @returns {Object} Parsed mixin call object
+     */
+    parseMixinCall(line) {
+        const match = line.match(/^@use\s+([a-zA-Z_][a-zA-Z0-9_]*)\s*\(([^)]*)\)/);
+        if (!match) {
+            throw new Error(`Invalid mixin call: ${line}`);
+        }
+        const name = match[1];
+        const argsStr = match[2];
+
+        const args = [];
+        let current = '';
+        let inQuote = null;
+        for (let k = 0; k < argsStr.length; k++) {
+            const c = argsStr[k];
+            if (c === inQuote) {
+                inQuote = null;
+            } else if (!inQuote && (c === '"' || c === '\'')) {
+                inQuote = c;
+            } else if (!inQuote && c === ',') {
+                args.push(current.trim());
+                current = '';
+                continue;
+            }
+            current += c;
+        }
+        if (current.trim()) {
+            args.push(current.trim());
+        }
+
+        return {type: 'MixinCall', name, args};
+    }
+
+    /**
+     * Parses an each loop declaration.
+     * @param {string} line - A line containing an each loop declaration
+     * @returns {Object} Parsed each loop object
+     */
+    parseEach(line) {
+        const match = line.match(/^@each\s+([a-zA-Z_][a-zA-Z0-9_]*)\s+in\s+([a-zA-Z_][a-zA-Z0-9_.]*)/);
+        if (!match) {
+            throw new Error(`Invalid @each: ${line}`);
+        }
+        return {type: 'Each', iterator: match[1], collection: match[2], children: []};
+    }
+
+    // ========== КОМПИЛЯТОР ==========
+
+    /**
+     * Compiles the AST into a render function.
+     * @param {Object} ast - The Abstract Syntax Tree to compile
+     * @returns {Function} A function that renders the template with a given context
+     */
+    compile(ast) {
+        const code = this.generateCode(ast);
+        return new Function('ctx', `
+      const escape = (s) => {
+        if (s == null) return '';
+        return String(s)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#039;');
+      };
+      with(ctx || {}) {
+        return ${code};
+      }
+    `);
+    }
+
+    /**
+     * Generates JavaScript code from the AST nodes.
+     * @param {Object} node - The AST node to generate code for
+     * @returns {string} Generated JavaScript code as a string
+     */
+    generateCode(node) {
+        switch (node.type) {
+        case 'Root':
+            return node.children.map((child) => this.generateCode(child)).join(' + ') || '""';
+
+        case 'Element':
+            const {tagName, attrs, text, children: nodeChildren, selfClosing} = node;
+            let attrStr = '';
+            for (const [key, val] of Object.entries(attrs)) {
+                if (val === true) {
+                    attrStr += ` ${key}`;
+                } else {
+                    const expr = this.interpolateToExpr(val, true);
+                    attrStr += ` ${key}="\${${expr}}}`;
+                }
+            }
+
+            const textExpr = text ? this.interpolateToExpr(text, false) : '';
+            const childrenExpr = nodeChildren.map((child) => this.generateCode(child)).join(' + ');
+            const content = [textExpr, childrenExpr].filter((s) => s).join(' + ');
+
+            if (selfClosing) {
+                return '`<' + tagName + attrStr + '>`';
+            } else {
+                if (content) {
+                    return '`<' + tagName + attrStr + '>\${' + content + '}</' + tagName + '>``';
+                } else {
+                    return '`<' + tagName + attrStr + '></' + tagName + '>``';
+                }
+            }
+
+        case 'Each':
+            const {iterator, collection, children} = node;
+            const body = children.map((child) => this.generateCode(child)).join(' + ') || '""';
+            return `(Array.isArray(${collection}) ? ${collection}.map(${iterator} => ${body}).join('') : '')`;
+
+        case 'If':
+            const {condition, thenBranch, elseBranch} = node;
+            const thenCode = thenBranch.map((child) => this.generateCode(child)).join(' + ') || '""';
+            const elseCode = elseBranch.map((child) => this.generateCode(child)).join(' + ') || '""';
+            return `(${condition} ? ${thenCode} : ${elseCode})`;
+
+        case 'MixinCall':
+            const {definition, args} = node;
+            const paramMap = {};
+            definition.params.forEach((param, idx) => {
+                paramMap[param] = args[idx] || '""';
+            });
+            const substitutedBody = this.substituteParamsInAST(definition.body, paramMap);
+            const bodyCode = substitutedBody.map((child) => this.generateCode(child)).join(' + ') || '""';
+            return bodyCode;
+
+        default:
+            return '""';
+        }
+    }
+
+    /**
+     * Substitutes parameters in AST nodes with actual values.
+     * @param {Array} nodes - Array of AST nodes
+     * @param {Object} paramMap - Parameter mapping object
+     * @returns {Array} New array of AST nodes with substituted parameters
+     */
+    substituteParamsInAST(nodes, paramMap) {
+        return nodes.map((node) => {
+            const newNode = {...node};
+            if (node.type === 'Element') {
+                const newAttrs = {};
+                for (const [key, val] of Object.entries(node.attrs)) {
+                    newAttrs[key] = this.substituteInString(val, paramMap);
+                }
+                newNode.attrs = newAttrs;
+                newNode.text = this.substituteInString(node.text, paramMap);
+                newNode.children = this.substituteParamsInAST(node.children, paramMap);
+            } else if (node.type === 'Each' || node.type === 'If') {
+                newNode.children = this.substituteParamsInAST(node.children || node.thenBranch || [], paramMap);
+                if (node.elseBranch) {
+                    newNode.elseBranch = this.substituteParamsInAST(node.elseBranch, paramMap);
+                }
+            }
+            return newNode;
+        });
+    }
+
+    /**
+     * Substitutes parameter placeholders in a string with actual values.
+     * @param {string} str - String with parameter placeholders
+     * @param {Object} paramMap - Parameter mapping object
+     * @returns {string} String with substituted parameters
+     */
+    substituteInString(str, paramMap) {
+        if (!str) {
+            return str;
+        }
+        let result = str;
+        for (const [param, replacement] of Object.entries(paramMap)) {
+            const regex = new RegExp(`{{\\s*${param}\\s*}}`, 'g');
+            result = result.replace(regex, replacement);
+        }
+        return result;
+    }
+
+    /**
+     * Converts a string with interpolation expressions to executable JavaScript code.
+     * @param {string} str - String with interpolation expressions
+     * @param {boolean} inAttr - Whether the string is inside an attribute
+     * @returns {string} JavaScript code expression
+     */
+    interpolateToExpr(str, inAttr = false) {
+        if (!str || !/{{.*?}}/.test(str)) {
+            if (inAttr) {
+                return JSON.stringify(str);
+            } else {
+                return `escape(${JSON.stringify(str)})`;
+            }
+        }
+
+        str = str.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+        const parts = [];
+        let lastIndex = 0;
+        str.replace(/{{\s*([^}]+?)\s*}}/g, (match, expr, offset) => {
+            if (offset > lastIndex) {
+                const literal = str.slice(lastIndex, offset);
+                if (inAttr) {
+                    parts.push(JSON.stringify(literal));
+                } else {
+                    parts.push(`escape(${JSON.stringify(literal)})`;
+                }
+            }
+            expr = expr.trim();
+            if (inAttr) {
+                parts.push(expr);
+            } else {
+                parts.push(`escape(${expr})`);
+            }
+            lastIndex = offset + match.length;
+        });
+
+        if (lastIndex < str.length) {
+            const literal = str.slice(lastIndex);
+            if (inAttr) {
+                parts.push(JSON.stringify(literal));
+            } else {
+                parts.push(`escape(${JSON.stringify(literal)})`;
+            }
+        }
+
+        return parts.join(' + ') || '""';
+    }
+}
+
+export default Template;

package/src/app/viewPort/Permalink.d2

@@ -0,0 +1,27 @@
+Router{
+    assignUrl
+    urlAction
+}
+OCP{
+    label: openComponentPlugin
+}
+
+RegisterComponent{
+    RouteUnit{
+        shape: class
+        action: string
+        componentType: string
+        componentId: string
+        parameters: object
+        shortUrl: string
+        id: string
+    }
+}
+
+OCP ->  RegisterComponent
+Menu -> RegisterComponent
+
+RegisterComponent -> OpenComponent
+RegisterComponent -> Router.assignUrl
+OpenComponent -> CenterView.setActiveComponent
+Router.urlAction -> RegisterComponent

package/src/app/viewPort/Router.d2

@@ -0,0 +1,23 @@
+changeUrl->Router.routes./\#r/ReportId{label: загрузить репорт в dev-режиме}
+changeUrl->Router.routes./\#p/CustomPanelId :загрузить кастомную панель в dev-режиме
+changeUrl->Router.routes./\#UiElementCd :начитать uiElementCd для загрузки компонента пункта меню
+
+Router: {
+	routes: {
+		/\#r/ReportId
+		/\#p/CustomPanelId
+		/\#UiElementCd
+	}
+	routes./\#r/ReportId -> ReportPanel_create
+	routes./\#p/CustomPanelId -> loadUlElement(xtype=UiCustomPanel): async load
+	loadUlElement(xtype=UiCustomPanel) -> UiCustomPanel_instancing
+	routes./\#UiElementCd -> loadUlElement
+	loadUlElement -> 'xtype=ReportPanel'
+	loadUlElement -> 'xtype=UiCustomPanel' -> loadUlElement(xtype=UiCustomPanel)
+}
+
+Router.loadUlElement.'xtype=ReportPanel' -> ComponentFactory.createRootNavComponent
+
+ComponentFactory: {
+	createRootNavComponent
+}

package/src/nav/MenuFavorite.js

@@ -0,0 +1,84 @@
+Ext.define('Coon.nav.menu.MenuFavoriteElement', {
+    extend: 'Ext.Component',
+
+    xtype: 'MenuFavoriteElement',
+
+    config: {
+        menuItem: {},
+    },
+
+    renderData: {
+        iconCls: '',
+        iconBaseClass: 'svg-icon svg-icon-size-18',
+        text: '',
+    },
+
+    renderTpl: [
+        '<div id="{id}-divEl" data-ref="divEl" class="vb-item">',
+        '<i id="{id}-iconEl" data-ref="iconEl" class="vb-icon menu-item-main-icon {iconBaseClass} {iconCls}"></i>',
+        '<span class="menu-item-text-elem">',
+        '<i id="{id}-textEl" data-ref="textEl" class="vb-text svg-icon-size-18">{text}</i>',
+        '</span>',
+        '</div>'
+    ],
+    childEls: [
+        {
+            name: 'iconEl',
+            itemId: 'iconEl',
+        },
+        {
+            name: 'textEl',
+            itemId: 'textEl',
+        },
+        {
+            name: 'divEl',
+            itemId: 'divEl',
+        }
+    ],
+
+    initComponent() {
+        Ext.applyIf(
+            menubar.renderData,
+            {
+                iconCls: this.iconCls,
+                text: this.menuItem?.text,
+            }
+        );
+        this.callParent();
+    },
+
+    setText(text) {
+        text = text || this.menuItem.text;
+        if (!text) {
+            return;
+        }
+        this.textEl.setHtml(text || this.menuItem.text);
+    },
+    setSelected(state) {
+        if (state) {
+            this.divEl.addCls('selected');
+        } else {
+            this.divEl.removeCls('selected');
+        }
+    },
+
+    afterRender() {
+        const me = this;
+        me.iconCls && me.iconEl.addCls(me.iconCls);
+        me.setSelected(me.getMenuItem().selected);
+        me.setText();
+        me.divEl.on(
+            'click',
+            function() {
+                if (typeof me.onClick === 'function') {
+                    me.onClick.call(me.scope || me, me.menuItem.MENU_ENTRY_CD);
+                }
+                me.fireEvent('click', me.menuItem.MENU_ENTRY_CD);
+            }
+        );
+    },
+
+    onDestroy: function() {
+        this.divEl.removeAllListeners();
+    },
+});

package/src/uielement/component/UiCustomController.js

@@ -16,6 +16,9 @@ Ext.define('Coon.uielement.component.UiCustomController', {
         view.on('afterrender', function() {
             this.setCustomPanelTitle();
             this.processSecurePoints(view);
+            if (typeof this.onInit === 'function') {
+                this.onInit.call(view);
+            }
         }, this);
     },
 

package/src/uielement/plugin/OpenPanelPlugin.js

@@ -20,7 +20,7 @@ Ext.define('Coon.uielement.plugin.OpenPanelPlugin', {
         publishes: 'uiElementCd',
     },
 
-    init: function(view) {
+    init(view) {
         if (!this.handlerName) {
             Coon.log.error('OpenPanelPlugin.init: handlerName is required');
             return;
@@ -33,6 +33,7 @@ Ext.define('Coon.uielement.plugin.OpenPanelPlugin', {
             Coon.log.error('OpenPanelPlugin.init: uiElementCd is required');
             return;
         }
+        this.initialized = true;
         this.cmpController = view.getController();
         if (this.cmpController) {
             this.getViewModel = () => this.cmpController.getViewModel();
@@ -44,7 +45,14 @@ Ext.define('Coon.uielement.plugin.OpenPanelPlugin', {
         this.initBindable();
     },
 
-    getFromModel: function(value) {
+    /**
+     * Возвращает значение, подставляя его из ViewModel, если
+     * передана строка в формате `{path.to.value}`.
+     *
+     * @param {String|*} value Значение либо ссылка на значение во ViewModel в фигурных скобках.
+     * @returns {*} Разрешённое значение: либо из ViewModel, либо исходный параметр.
+     */
+    getResolvedValue(value) {
         if (
             Ext.isString(value) &&
             value.length > 2 &&
@@ -56,40 +64,48 @@ Ext.define('Coon.uielement.plugin.OpenPanelPlugin', {
         return value;
     },
 
-    handler: function() {
+    handler() {
+        if (!this.initialized) {
+            Coon.log.error('OpenPanelPlugin.handler: not initialized');
+            return;
+        }
         if (this.isTraceEnabled()) {
             this.tracePlugin(this.config.uiElementCd);
         }
-        this.uiElementCd = this.config.uiElementCd;
-        if (this.uiElementCd) {
-            this.uiElementCd = this.getFromModel(this.uiElementCd);
+        if (this.getUiElementCd()) {
+            this.uiElementCd = this.getResolvedValue(this.uiElementCd);
+            if (!this.uiElementCd) {
+                Coon.log.error('OpenPanelPlugin.handler: uiElementCd is not set');
+                return;
+            }
             const command = Ext.create('command.GetUIElementCommand');
             command.on('failure', function(error) {
                 Coon.log.error(`OpenPanelPlugin.handler: failed to get UIElement [${this.uiElementCd}]`, error);
-            });
-            command.on('complete', function(UIElementBean) {
-                const elementNS = Coon.uielement.UIElementBeanFields;
-                const exists = Ext.ClassManager.getByAlias('widget.' + UIElementBean[elementNS.$xtype]);
-                if (!exists) {
-                    Coon.log.log(UIElementBean.xtype + ' does not exist');
-                    return;
-                }
-                this.panelXType = UIElementBean[elementNS.$xtype];
-                try {
-                    this.openPanel(
-                        JSON5.parse(UIElementBean['propertyData'])
-                    );
-                } catch (ex) {
-                    Coon.log.error('OpenPanelPlugin.handler: invalid propertyData JSON5', ex);
-                    return;
-                }
             }, this);
+            command.on('complete', this.onUIElementLoaded, this);
             command.execute(this.uiElementCd);
         } else {
             this.openPanel();
         }
     },
 
+    onUIElementLoaded(UIElementBean) {
+        const exists = Ext.ClassManager.getByAlias('widget.' + UIElementBean.xtype);
+        if (!exists) {
+            Coon.log.log(UIElementBean.xtype + ' does not exist');
+            return;
+        }
+        this.panelXType = UIElementBean.xtype;
+        try {
+            this.openPanel(
+                JSON5.parse(UIElementBean['propertyData'])
+            );
+        } catch (ex) {
+            Coon.log.error('OpenPanelPlugin.handler: invalid propertyData JSON5', ex);
+            return;
+        }
+    },
+
     openInCenterView(panel, properties) {
         this.getCenterView();
         if (!this.centerView) {
@@ -98,7 +114,7 @@ Ext.define('Coon.uielement.plugin.OpenPanelPlugin', {
                 Ext.toast(`В режиме редактирования кастомной панели нельзя открыть панель ${this.uiElementCd} во вкладке.`);
             }
             Coon.log.debug('panel cannot be open in centerView from CustomPanelEditor');
-            return;
+            return true;
         }
 
         const componentContextId = Coon.util.ContextManager.generateKey(
@@ -180,23 +196,31 @@ Ext.define('Coon.uielement.plugin.OpenPanelPlugin', {
     setInitArguments() {
         this.initArguments = {};
         for (const name in this.parameters) {
-            this.initArguments[name] = this.getFromModel(this.parameters[name]);
+            this.initArguments[name] = this.getResolvedValue(this.parameters[name]);
         }
     },
 
-    openPanel: function(cmpProperties = {}) {
+    openPanel(cmpProperties = {}) {
         const properties = Ext.apply({}, cmpProperties, this.properties);
-        this.panelXType = this.getFromModel(this.panelXType);
+        this.panelXType = this.getResolvedValue(this.panelXType);
         if (!Ext.ClassManager.getByAlias(`widget.${this.panelXType}`)) {
             Coon.log.error(`OpenPanelPlugin.openPanel: panelXType [${this.panelXType}] does not exist`);
             return;
         }
+
+        if (!this.getCenterView() && this.openInTab) {
+            return Coon.log.error('panel cannot be open in centerView from CustomPanelEditor');
+        }
         const panel = Ext.widget(this.panelXType, properties);
 
         this.setInitArguments();
 
         if (this.openInTab) {
-            this.openInCenterView(panel, properties);
+            const error = this.openInCenterView(panel, properties);
+            if (error) {
+                panel.destroy();
+                return error;
+            }
         } else {
             this.openInWindowWrap(panel);
         }

package/src/version.js

@@ -1,4 +1,4 @@
 Ext.define('Coon.version', {
     singleton: true,
-    number: '3.0.80',
+    number: '3.0.81',
 });