@codady/coax 0.0.2 → 0.0.4

package/src/Coax.js

@@ -1,365 +1,19 @@
 /**
- *  Last modified: 2026/01/08 16:55:35
+ *  Last modified: 2026/01/12 14:12:01
  */
-import createTools from "@codady/utils/src/createTools.js";
-import icaxCopy from "@codady/icax/src/icaxCopy";
-import getEl from "@codady/utils/src/getEl.js";
-import createEl from "@codady/utils/src/createEl.js";
-import NAMESPACE from "@codady/utils/src/namespace.js";
-import icaxCheck from "@codady/icax/src/icaxCheck";
-import parseClasses from "@codady/utils/src/parseClasses.js";
-class Coax extends HTMLElement {
-    // A static Map to hold the configuration for different languages
-    static languages = new Map();
-    static tools = [];
-    source;
-    _renderQueued = false;
-    baseStylesEl;
-    themeStylesEl;
-    dynamicStylesEl;
-    highlightedCodeEl;
-    headerEl;
-    nameEl;
-    toolsEl;
-    alias;
-    constructor() {
-        super();
-        // Attach a Shadow DOM to the custom element
-        this.attachShadow({ mode: 'open' });
-        // Remove leading/trailing whitespace from the raw code content
-        this.source = this.textContent?.replace(/^\s*\n|\n\s*$/g, '') || '';
-        this.lang = 'plain';
-        this.alias = 'Plain Text';
-        // 1. 初始化基础骨架
-        this.shadowRoot.innerHTML = `
-            <style id="base-styles">
-                :host { 
-                    --border-width:1px;
-                    --border-style:solid;
-                    --radius:9px;
-                    --height:auto;
-                    --max-height:500px;
-                    --radius:9px;
-                    --padding:1em;
-                    --font-size:16px;
-                    --line-height:1.8;
-                    --background:rgb(247, 247, 247);
-                    --border-color:rgb(224, 224, 224);
-                    --color-code:rgb(51, 51, 51);
-                    --color-index:rgb(153, 153, 153);
-                    --color-stripe:rgb(224, 224, 224);
-                    --color-hover:rgb(224, 224, 224);
-                }           
-               :host([scheme="dark"]){
-                    --background: #282c34;
-                    --border-color: transparent;
-                    --color-code: #abb2bf;
-                    --color-index:rgb(153, 153, 153);
-                    --color-stripe:rgb(66, 66, 66);
-                    --color-hover:rgb(66, 66, 66);
-               }
-                @media (prefers-color-scheme: dark) {
-                    :host{
-                        --background: #282c34;
-                        --border-color: transparent;
-                        --color-code: #abb2bf;
-                        --color-index:rgb(153, 153, 153);
-                        --color-stripe:rgb(66, 66, 66);
-                        --color-hover:rgb(66, 66, 66);
-                    }
-                }
-                :host {
-                    font-size: var(--${NAMESPACE}-code-font-size,var(--font-size));
-                    display: block; 
-                    box-sizing:border-box;
-                    background:var(--${NAMESPACE}-code-background-color,var(--background));
-                    color:var(--${NAMESPACE}-code-color,var(--color-code));
-                    border:var(--${NAMESPACE}-code-border-width,var(--border-width)) var(--${NAMESPACE}-code-border-style,var(--border-style)) var(--${NAMESPACE}-code-border-color,var(--border-color));
-                    overflow:auto;
-                    transition: border-color 0.3s ease,color 0.3s ease;  
-                    border-radius: var(--${NAMESPACE}-code-radius,var(--radius));
-                }
-                #code-header{
-                    line-height:calc(var(--${NAMESPACE}-code-line-height,var(--line-height))*1.5);
-                    padding-inline-start:var(--${NAMESPACE}-code-padding,var(--padding));
-                    display:flex;
-                    
-                    >:first-child{
-                        flex:auto;
-                    }
-                }
-                #code-body{
-                    padding: var(--${NAMESPACE}-code-padding,var(--padding)) 0;
-                    height:var(--${NAMESPACE}-code-height,var(--height));
-                    max-height:var(--${NAMESPACE}-code-max-height,var(--max-height));
-                }
-                pre,code{
-                    font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace";
-                    margin:0; padding:0;
-                }
-                code>div{
-                    display:flex;
-                    padding:0 var(--${NAMESPACE}-code-padding,var(--padding));
-                    line-height: var(--${NAMESPACE}-code-line-height,var(--line-height));
-                    box-sizing:border-box;
-                    
-                    >div{
-                        flex:auto;
-                    }
-                }
-                :host([indexed]) code>div:before{
-                    display:inline-flex;
-                    color:var(--color-index);
-                    content: attr(data-index);
-                    min-width:var(--${NAMESPACE}-code-index-width,2em);
-                    margin-inline-end:var(--${NAMESPACE}-code-padding,8px);
-                }
-                :host([hoverable]) code>div:hover{
-                    background-color:var(--color-hover);
-                }
-                :host([striped]) code>div:nth-child(odd){
-                    background-color:var(--color-stripe);
-                }
-                :host([wrapped]) code>div{
-                    white-space: pre-wrap;
-                }
-                :host([unnamed]) #code-name{
-                    display:none;
-                }
-                .${NAMESPACE}-box-tools{
-                    >*{
-                        font-size:14px;
-                        display:inline-flex;
-                        align-items:center;
-                        justify-content:center;
-                        height:2em;
-                        line-height:2em;
-                        aspect-ratio:1/1;
-                        margin-inline-end:8px;
-                        transition:all 200ms ease;
-                        border-radius:6px;
-                        &:hover{
-                            cursor:pointer;
-                            background-color:rgba(0,0,0,.04);
-                        }
-                    }
-                    [rep=icon]{
-                        display:inline-flex;
-                        align-items:center;
-                        justify-content:center;
-                    }
-                }
-                [disabled]{
-                    pointer-event:none;
-                }
-            </style>
-            <style id="dynamic-styles"></style>
-            <style id="theme-styles"></style>
-            <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>
-            <div id="code-body">
-                <pre><code id="highlight-code"></code></pre>
-            </div>
-        `;
-        // 缓存引用
-        this.baseStylesEl = getEl('#base-styles', this.shadowRoot);
-        this.themeStylesEl = getEl('#theme-styles', this.shadowRoot);
-        this.dynamicStylesEl = getEl('#dynamic-styles', this.shadowRoot);
-        this.headerEl = getEl('#code-header', this.shadowRoot);
-        this.nameEl = getEl('#code-name', this.shadowRoot);
-        this.toolsEl = getEl('#code-tools', this.shadowRoot);
-        this.highlightedCodeEl = getEl('#highlight-code', this.shadowRoot);
-    }
-    /**
-         * Registers a new language with a set of syntax highlighting rules.
-         * @param name - The name of the programming language.
-         * @param config - Configuration for the language, including rules, theme, and optional CSS.
-         */
-    static register(name, config) {
-        // Store the language configuration in the static map
-        this.languages.set(name, { ...config });
-    }
-    //注册工具箱
-    static addTools(items) {
-        Coax.tools = items;
-    }
-    //加入工具箱
-    mountTools(toolItems) {
-        requestAnimationFrame(() => {
-            this.toolsEl.innerHTML = '';
-            let items = toolItems.map(k => {
-                k.action = k.action.bind(this);
-                return k;
-            });
-            this.toolsEl.appendChild(createTools(items));
-        });
-    }
-    // Called when the element is connected to the DOM
-    connectedCallback() {
-        this.render();
-    }
-    // Observed attributes for changes
-    static get observedAttributes() { return ['lang', 'height', 'max-height', 'tools']; }
-    /**
-    * Called when any of the observed attributes change.
-    */
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal)
-            return;
-        if (name === 'height' || name === 'max-height') {
-            this.updateStyleByRegExp(name, newVal);
-        }
-        else if (name === 'lang') {
-            //更新当前语言
-            this.lang = newVal;
-            this.render();
-        }
-        else if (name === 'unnamed') {
-            this.nameEl.innerHTML = newVal === null ? (this.alias || this.lang) : '';
-            this.nameEl.innerHTML = '';
-        }
-        else if (name === 'tools') {
-            if (!newVal)
-                this.toolsEl.innerHTML = '';
-            const tools = parseClasses(newVal), toolItems = Coax.tools.filter(k => tools.includes(k.name));
-            if (!toolItems.length)
-                return;
-            this.mountTools(toolItems);
-        }
-    }
-    /**
-      * 使用正则替换基础样式表中的特定属性，避免操作行内样式
-      */
-    updateStyleByRegExp(prop, value) {
-        // 构建正则：匹配属性名后面跟着冒号，直到分号或换行
-        // 例如：height:\s*[^;]+;
-        const regex = new RegExp(`;\\n\\s*${prop}:\\s*[^;]+;`, 'g');
-        // 替换为新的属性值
-        this.baseStylesEl.textContent = this.baseStylesEl.textContent.replace(regex, `;\n${prop}: ${value};`);
-    }
-    getCssPrefix(config) {
-        return (config?.cssPrefix || this.lang).replace(/[^a-zA-Z0-9_-]/g, '\\$&');
-    }
-    /**
-     * 处理新源码，按行高亮并追加到高亮区域
-     * @param newCode - 新的源码片段
-     */
-    highlight(newCode) {
-        const config = Coax.languages.get(this.lang), startIndex = this.highlightedCodeEl.children.length, 
-        // 将新源码按行分割
-        newCodeLines = newCode.split('\n'), 
-        // 如果没有找到配置，则输出原始代码，并不进行高亮处理
-        highlightedLines = newCodeLines.map((line, index) => {
-            let highlightedLine = line;
-            // 如果找到了配置，则进行高亮处理
-            if (config) {
-                const cssPrefix = this.getCssPrefix(config);
-                // 获取用于语法高亮的正则表达式
-                const combinedRegex = new RegExp(config.rules.map((r) => `(${r.pattern.source})`).join('|'), 'g');
-                // 进行高亮替换
-                highlightedLine = line.replace(combinedRegex, (match, ...args) => {
-                    const i = args.findIndex(val => val !== undefined);
-                    return i !== -1 && config.rules[i] ? `<span class="${NAMESPACE}-${cssPrefix}-${config.rules[i].token}">${match}</span>` : match;
-                });
-            }
-            // 创建一个 div 包裹每一行
-            const lineDiv = createEl('div', { 'data-index': startIndex + index });
-            lineDiv.innerHTML = `<div>${highlightedLine}</div>`; // 将高亮后的内容填充到 div 中
-            return lineDiv;
-        });
-        //
-        // 将新生成的行节点追加到 highlightedCodeEl 节点中
-        this.highlightedCodeEl.append(...highlightedLines);
-    }
-    injectThemeStyles() {
-        const config = Coax.languages.get(this.lang);
-        if (!config)
-            return;
-        // Get language name, fallback to 'js' if not provided
-        let cssPrefix = this.getCssPrefix(config), 
-        //Generate dynamic CSS classes for each syntax rule
-        // 为 rules 中的每一个 name 生成类似 .hl-name { color: var(--ax-code-name); }
-        lightStyles = config.rules.map((rule) => `
-                .${NAMESPACE}-${cssPrefix}-${rule.token} { color: var(--${NAMESPACE}-${cssPrefix}-${rule.token}${rule.color ? ',' + rule.color : ''});}`).join('\n'), darkStyles = '', schemeStyles = '';
-        darkStyles += `:host([scheme="dark"]){`;
-        darkStyles += config.rules.map((rule) => `
-                ${rule.color ? `
-                    .${NAMESPACE}-${cssPrefix}-${rule.token} {color: var(--${NAMESPACE}-${cssPrefix}-${rule.token},${rule.dark});}` : ``}`).join('\n');
-        darkStyles += `}`;
-        schemeStyles = `@media (prefers-color-scheme: dark){
-                                :host{
-            `;
-        schemeStyles += config.rules.map((rule) => `
-                ${rule.color ? `
-                    .${NAMESPACE}-${cssPrefix}-${rule.token} { color: var(--${NAMESPACE}-${cssPrefix}-${rule.token},${rule.dark}); }` : ``} `).join('\n');
-        schemeStyles += `}`;
-        // Set the inner HTML of the shadow root, including styles and highlighted code
-        // 2. 精确更新 DOM 节点而非重写 ShadowRoot
-        this.dynamicStylesEl.textContent = lightStyles + darkStyles + schemeStyles;
-        //附加主题样式
-        if (config?.themeStyles) {
-            this.themeStylesEl.textContent = config.themeStyles;
-        }
-        //更新别名
-        this.updateName(config);
-    }
-    updateName(config) {
-        if (this.hasAttribute('unnamed'))
-            return;
-        //更新别名
-        this.alias = config.alias || this.lang;
-        this.nameEl.innerHTML = this.alias;
-    }
-    /**
-         * Renders the highlighted code within the shadow DOM.
-         */
-    render() {
-        //同时多次改变属性，只执行一次
-        // 如果已经在队列中，则直接返回
-        if (this._renderQueued)
-            return;
-        this._renderQueued = true;
-        // 使用 requestAnimationFrame 将渲染推迟到下一帧
-        requestAnimationFrame(() => {
-            this.highlightedCodeEl.innerHTML = '';
-            //一次性渲染
-            this.highlight(this.source);
-            this.injectThemeStyles();
-            this._renderQueued = false;
-        });
-    }
-    /**
-    * 替换现有的源码并重新渲染
-    * @param newCode - 新的源码
-    */
-    replaceCode(newCode) {
-        // 更新原始代码为新代码
-        this.source = newCode;
-        //清空
-        this.highlightedCodeEl.innerHTML = '';
-        this.highlight(newCode);
-    }
-    /**
-     * 末尾新增源码，仅高亮新增的部分
-     * @param newCode - 新的源码片段
-     */
-    appendCode(newCode) {
-        // 将新的代码追加到现有代码末尾
-        this.source += `\n${newCode}`;
-        // 高亮新的部分
-        this.highlight(newCode);
-    }
-}
+'use strict';
+import NAMESPACE from "@codady/utils/namespace";
+import html from "./rules/html.js";
+import javascript from "./rules/javascript.js";
+import markdown from "./rules/markdown.js";
+import typescript from "./rules/typescript.js";
+import copy from "./tools/copy.js";
+import css from "./rules/css.js";
+import Coax from "./components/Coax.js";
+//注册语言类型
 Coax.register('css', {
-    rules: [
-        { token: 'comment', pattern: /\/\*[\s\S]*?\*\//, color: '#6a737d', dark: '#8b949e' },
-        { token: 'value', pattern: /(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/, color: '#61afef', dark: '#a5d6ff' },
-        { token: 'func', pattern: /[a-z-]+\(?=/, color: '#e36209', dark: '#ffa657' },
-        { token: 'property', pattern: /[a-z-]+(?=\s*:)/, color: '#005cc5', dark: '#79c0ff' },
-        { token: 'selector', pattern: /[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i, color: '#6f42c1', dark: '#d2a8ff' },
-        { token: 'unit', pattern: /(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/, color: '#d73a49', dark: '#ff7b72' },
-        { token: 'number', pattern: /\b\d+(\.\d+)?\b/, color: '#005cc5', dark: '#79c0ff' },
-        { token: 'punct', pattern: /[{}();:]/, color: '#24292e', dark: '#c9d1d9' }
-    ],
+    alias: 'CSS',
+    rules: css,
     /*     cssPrefix: 'css',
         themeStyles: `
                     :host {
@@ -382,65 +36,22 @@ Coax.register('css', {
         ` */
 });
 Coax.register('html', {
-    rules: [
-        { token: 'comment', pattern: /&lt;!--[\s\S]*?--&gt;/, color: '#6a737d', dark: '#8b949e' },
-        { token: 'doctype', pattern: /&lt;!DOCTYPE[\s\S]*?&gt;/i, color: '#005cc5', dark: '#56b6c2' },
-        // 匹配标签名: <div, </div
-        { token: 'tag', pattern: /&lt;\/?[a-zA-Z0-9]+/, color: '#22863a', dark: '#abb2bf' },
-        // 匹配属性名: class=
-        { token: 'attr', pattern: /[a-zA-Z-]+(?=\s*=\s*)/, color: '#6f42c1', dark: '#e06c75' },
-        // 匹配属性值: "value"
-        { token: 'string', pattern: /(['"])(?:\\.|[^\\])*?\1/, color: '#032f62', dark: '#f39c12' },
-        // 匹配标签闭合: >, />
-        { token: 'bracket', pattern: /\/?&gt;/, color: '#24292e', dark: '#f1f1f1' }
-    ],
+    alias: 'HTML',
+    rules: html,
 });
 Coax.register('js', {
     alias: 'Javascript',
-    rules: [
-        { token: 'comment', pattern: /\/\/[^\n]*|\/\*[\s\S]*?\*\//, color: '#6a737d', dark: '#8b949e' },
-        { token: 'string', pattern: /(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/, color: '#032f62', dark: '#61afef' },
-        { token: 'keyword', pattern: /\b(async|await|break|case|catch|class|const|continue|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|new|return|super|switch|this|throw|try|typeof|var|while|with|yield|let|static)\b/, color: '#e06c75', dark: '#d73a49' },
-        { token: 'builtin', pattern: /\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise)\b/, color: '#56b6c2', dark: '#61afef' },
-        { token: 'number', pattern: /\b\d+\b/, color: '#61afef', dark: '#d19a66' },
-        { token: 'func', pattern: /\b[a-zA-Z_]\w*(?=\s*\()/, color: '#e5c07b', dark: '#98c379' },
-        { token: 'op', pattern: /[+\-*/%=<>!&|^~]+/, color: '#d73a49', dark: '#e06c75' }
-    ],
+    rules: javascript,
 });
 Coax.register('ts', {
-    rules: [
-        { token: 'comment', pattern: /\/\/[^\n]*|\/\*[\s\S]*?\*\//, color: '#6a737d', dark: '#8b949e' },
-        { token: 'string', pattern: /(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/, color: '#032f62', dark: '#61afef' },
-        { token: 'decorator', pattern: /@[a-zA-Z_]\w*/, color: '#d19a66', dark: '#e5c07b' },
-        { token: 'keyword', pattern: /\b(abstract|as|async|await|break|case|catch|class|const|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|package|private|protected|public|readonly|return|set|static|super|switch|this|throw|try|type|typeof|var|while|with|yield)\b/, color: '#e06c75', dark: '#d73a49' },
-        { token: 'builtin', pattern: /\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|boolean|true|false|console|window|document)\b/, color: '#56b6c2', dark: '#61afef' },
-        { token: 'type', pattern: /\b[A-Z]\w*\b/, color: '#22863a', dark: '#8b949e' },
-        { token: 'number', pattern: /\b\d+\b/, color: '#61afef', dark: '#d19a66' },
-        { token: 'func', pattern: /\b[a-zA-Z_]\w*(?=\s*\()/, color: '#e5c07b', dark: '#98c379' },
-        { token: 'op', pattern: /(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/, color: '#d73a49', dark: '#e06c75' }
-    ],
+    alias: 'Typescript',
+    rules: typescript,
 });
-Coax.addTools([{
-        name: 'copy',
-        icon: icaxCopy(),
-        action: function (arg) {
-            arg.wrapEl.onclick = () => {
-                //this只是组件实例
-                navigator.clipboard.writeText(this.source)
-                    .then(() => {
-                    console.log('Text successfully copied to clipboard');
-                    arg.iconEl.innerHTML = icaxCheck();
-                    arg.iconEl.toggleAttribute('disabled', true);
-                    setTimeout(() => {
-                        //恢复
-                        arg.iconEl.removeAttribute('disabled');
-                        arg.iconEl.innerHTML = icaxCopy();
-                    }, 2000);
-                })
-                    .catch(err => {
-                    console.error('Error copying text to clipboard: ', err);
-                });
-            };
-        }
-    }]);
+Coax.register('md', {
+    alias: 'Markdown',
+    rules: markdown
+});
+//注册工具箱
+Coax.addTools([copy]);
 customElements.define(`${NAMESPACE}-code`, Coax);
+export default Coax;