npm - @codady/coax - Versions diffs - 0.0.1 → 0.0.3 - Mend

@codady/coax 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/dist/coax.cjs.js +829 -140
package/dist/coax.cjs.min.js +3 -3
package/dist/coax.esm.js +823 -140
package/dist/coax.esm.min.js +3 -3
package/dist/coax.umd.js +849 -138
package/dist/coax.umd.min.js +3 -3
package/examples/.htaccess +0 -0
package/examples/append-highlight.html +82 -0
package/examples/color-selector.html +412 -0
package/examples/css-highlight.html +2 -18
package/examples/deepseek-highlight.html +91 -0
package/examples/js-highlight.html +2 -17
package/examples/md-highlight.html +60 -0
package/examples/nginx.htaccess +0 -0
package/examples/plain-highlight.html +47 -0
package/examples/replace-highlight.html +69 -0
package/examples/stream-highlight.html +64 -0
package/examples/theme-highlight.html +69 -0
package/package.json +19 -3
package/rollup.config.js +3 -3
package/src/Coax.js +50 -184
package/src/Coax.ts +56 -207
package/src/components/CoaxElem.js +457 -0
package/src/components/CoaxElem.ts +488 -0
package/src/modules.js +12 -0
package/src/modules.ts +23 -0
package/src/rules/css.js +11 -0
package/src/rules/css.ts +11 -0
package/src/rules/html.js +13 -0
package/src/rules/html.ts +13 -0
package/src/rules/javascript.js +10 -0
package/src/rules/javascript.ts +10 -0
package/src/rules/markdown.js +29 -0
package/src/rules/markdown.ts +41 -0
package/src/rules/ruleCss - /345/211/257/346/234/254.js" +10 -0
package/src/rules/ruleHTML - /345/211/257/346/234/254.js" +12 -0
package/src/rules/ruleJs - /345/211/257/346/234/254.js" +10 -0
package/src/rules/ruleTs - /345/211/257/346/234/254.js" +12 -0
package/src/rules/typescript.js +12 -0
package/src/rules/typescript.ts +12 -0
package/src/tools/copy.js +26 -0
package/src/tools/copy.ts +29 -0
package/tsconfig.json +2 -2

package/examples/deepseek-highlight.html ADDED Viewed

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DeepSeek Stream Demo</title>
+    <style>
+        #output {
+            font-family: monospace;
+            white-space: pre-wrap;
+            /* 保持格式 */
+            word-wrap: break-word;
+            border: 1px solid #ccc;
+            padding: 10px;
+            width: 80%;
+            margin: 0 auto;
+            height: 300px;
+            overflow-y: auto;
+        }
+    </style>
+</head>
+<body>
+    <ax-code lang="js"></ax-code>
+    <script src="../node_modules/@codady/utils/dist/utils.umd.js" type='text/javascript'></script>
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script>
+        async function fetchStreamedText() {
+            const outputElement = document.querySelector('ax-code');
+            const apiKey = 'sk-46066a43b74c4c7693282b9885fe8820';
+            const endpoint = 'https://api.deepseek.com/chat/completions';
+            fetch(endpoint, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": "Bearer " + apiKey
+                },
+                body: JSON.stringify({
+                    model: "deepseek-chat",
+                    messages: [
+                        {
+                            role: "user",
+                            content: `
+                            你必须遵守以下格式规则：
+1. 绝对不要使用markdown格式
+2. 绝对不要使用\`\`\`标记
+3. 直接输出JavaScript代码的函数
+4. 如果输出代码，直接以代码内容开始
+                            `
+                        }
+                    ],
+                    stream: true,  // 设置为 true，启用流式输出
+                    max_tokens: 1000,
+                    temperature: 0.3,
+                })
+            })
+                .then(async (response) => {
+                    if (!response.ok) {
+                        throw new Error("网络请求失败");
+                    }
+                    /*
+                    response.body = ReadableStream,decoder.decode(value, { stream: true }) =如下
+                     data: {"id":"36746ef4-7200-45dc-b731-282ca9e0baa0","object":"chat.completion.chunk","created":1768011313,"model":"deepseek-chat","system_fingerprint":"fp_eaab8d114b_prod0820_fp8_kvcache","choices":[{"index":0,"delta":{"content":"。"},"logprobs":null,"finish_reason":null}]}
+                    data: {"id":"36746ef4-7200-45dc-b731-282ca9e0baa0","object":"chat.completion.chunk","created":1768011313,"model":"deepseek-chat","system_fingerprint":"fp_eaab8d114b_prod0820_fp8_kvcache","choices":[{"index":0,"delta":{"content":""},"logprobs":null,"finish_reason":"stop"}],"usage":{"prompt_tokens":10,"completion_tokens":42,"total_tokens":52,"prompt_tokens_details":{"cached_tokens":0},"prompt_cache_hit_tokens":0,"prompt_cache_miss_tokens":10}}
+                    data: [DONE] */
+                    const resp = await utils.parseLLMStream(response.body, (str) => {
+                        console.log(str,12)
+                        outputElement.stream(str);
+                    });
+                    outputElement.closeLine();
+                    console.log(outputElement.source)
+                })
+                .catch(err => {
+                    console.error("请求失败:", err);
+                });
+        }
+        fetchStreamedText();
+    </script>
+</body>
+</html>

package/examples/js-highlight.html CHANGED Viewed

@@ -8,29 +8,14 @@
     <style>
         /* 白天模式变量 */
         :root {
-            --ax-js-keyword: #d73a49;
-            /* 鲜红色：用于 if, const, return */
-            --ax-js-string: #032f62;
-            /* 藏青色：字符串内容 */
-            --ax-js-func: #6f42c1;
-            /* 靓紫色：函数名调用 */
-            --ax-js-builtin: #e36209;
-            /* 亮橙色：console, Math, true */
-            --ax-js-number: #005cc5;
-            /* 蓝色：数字 */
-            --ax-js-op: #d73a49;
-            /* 红色：操作符，突出逻辑 */
-            --ax-js-comment: #6a737d;
-            /* 灰色：注释 */
-            --ax-js-punct: #24292e;
-            /* 深灰色：标点符号 */
         }
     </style>
 </head>
 <body>
-    <ax-code lang="js">
+    <ax-code streaming tools="copy" indexed lang="js">
         <code>
 /**
  * Simple animation function

package/examples/md-highlight.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Coax 代码高亮插件</title>
+    <style>
+        /* 白天模式变量 */
+        :root {
+            --ax-html-comment: #6a737d;
+            --ax-html-doctype: #005cc5;
+            --ax-html-tag: #22863a;
+            --ax-html-attr: #6f42c1;
+            --ax-html-string: #032f62;
+            --ax-html-bracket: #24292e;
+        }
+    </style>
+</head>
+<body>
+    <ax-code lang="md">
+        <code>
+# 这是一个一级标题
+## 这是一个二级标题
+### 这是一个三级标题
+#### 这是一个四级标题
+##### 这是一个五级标题
+###### 这是一个六级标题
+---
+这是一个段落文本，其中包含 **粗体** 和 *斜体*。
+[点击这里访问 OpenAI](https://www.openai.com)
+这是一段 `行内代码` 示例。
+```javascript
+// 这是一个 JavaScript 代码块
+function sayHello() {
+  console.log("Hello, World!");
+}
+        </code>
+    </ax-code>
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script type='text/javascript'>
+    </script>
+</body>
+</html>

package/examples/nginx.htaccess ADDED Viewed

File without changes

package/examples/plain-highlight.html ADDED Viewed

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Coax 代码高亮插件</title>
+    <style>
+        /* 白天模式变量 */
+        :root {}
+    </style>
+</head>
+<body>
+    <ax-code>
+        <code>
+/* Main Layout Style */
+.container > .header:hover {
+    display: flex;
+    width: 100%;
+    max-width: 1200px;
+    padding: 20px 1.5rem;
+    background-color: var(--primary-bg, #fff);
+    transition: all 300ms ease-in-out;
+    transform: rotate(5deg);
+}
+@media (max-width: 768px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+}
+        </code>
+    </ax-code>
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script type='text/javascript'>
+    </script>
+</body>
+</html>

package/examples/replace-highlight.html ADDED Viewed

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Coax 代码高亮插件</title>
+    <style>
+        /* 白天模式变量 */
+        :root {}
+    </style>
+</head>
+<body>
+    <ax-code streaming tools="copy" indexed lang="js">
+        <code>
+/**
+ * Simple animation function
+ */
+async function animate(element, duration) {
+    const start = Date.now();
+    if (!element) return false;
+    console.log("Animation started...");
+    while (Date.now() - start < duration) {
+        let progress = (Date.now() - start) / duration;
+        element.style.opacity = Math.min(progress, 1);
+        await Promise.resolve();
+    }
+    return true;
+}
+        </code>
+    </ax-code>
+    <button>替换代码</button>
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script type='text/javascript'>
+        let btn = document.querySelector('button');
+        let code = document.querySelector('ax-code');
+        btn.onclick = () => {
+            code.replace(`
+function calculateCircleArea(radius) {
+    if (typeof radius !== 'number' || radius <= 0) {
+        throw new Error('Radius must be a positive number');
+    }
+    return Math.PI * radius * radius;
+}
+function calculateCircleCircumference(radius) {
+    if (typeof radius !== 'number' || radius <= 0) {
+        throw new Error('Radius must be a positive number');
+    }
+    return 2 * Math.PI * radius;
+}
+            `)
+        }
+    </script>
+</body>
+</html>

package/examples/stream-highlight.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Coax 代码高亮插件</title>
+    <style>
+        /* 白天模式变量 */
+        :root {}
+    </style>
+</head>
+<body>
+    <ax-code tools="copy" indexed lang="js"></ax-code>
+    <textarea id="box">
+function calculateCircleArea(radius) {
+    if (typeof radius !== 'number' || radius <= 0) {
+        throw new Error('Radius must be a positive number');
+    }
+    return Math.PI * radius * radius;
+}
+function calculateCircleCircumference(radius) {
+    if (typeof radius !== 'number' || radius <= 0) {
+        throw new Error('Radius must be a positive number');
+    }
+    return 2 * Math.PI * radius;
+}
+</textarea>
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script type='text/javascript'>
+        let el = document.querySelector('ax-code'),
+           // arr = ['/**', '\n', ' * Simple', ' animation', ' function', '\n', ' */', '\n', 'async', ' function', ' animate', '(element,', 'duration) {', '\n',
+           //     '    const', ' start', ' = Date', '.now();', 'DONE'
+           // ],
+           arr = document.querySelector('#box').value.split('\n'),
+            index = 0;
+        let timer = setInterval(() => {
+            el.stream(arr[index]);
+            index++;
+            if (index >= arr.length) {
+                clearInterval(timer);
+            }
+        }, 50);
+    </script>
+</body>
+</html>

package/examples/theme-highlight.html ADDED Viewed

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Coax 代码高亮插件</title>
+    <style>
+        /* 白天模式变量 */
+        :root {}
+    </style>
+</head>
+<body>
+    <ax-code lang="css">
+        <code>
+/* Main Layout Style */
+.container > .header:hover {
+    display: flex;
+    width: 100%;
+    max-width: 1200px;
+    padding: 20px 1.5rem;
+    background-color: var(--primary-bg, #fff);
+    transition: all 300ms ease-in-out;
+    transform: rotate(5deg);
+}
+@media (max-width: 768px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+}
+        </code>
+    </ax-code>
+    <script type='module'>
+        const {CoaxElem,css} = await import('../dist/coax.esm.js');
+        css.themeStyles = `
+                    :host {
+                        --background:rgba(0,0,0,0.02);
+                        --border-color:rgba(0,0,0,0.08);
+                        --color-code:#333;
+                    }
+                   :host([scheme="dark"]){
+                        --background: #282c34;
+                        --border-color: transparent;
+                        --color-code: #abb2bf;
+                   }
+                    @media (prefers-color-scheme: dark) {
+                        :host{
+                            --background: #282c34;
+                            --border-color: transparent;
+                            --color-code: #abb2bf;
+                        }
+                    }
+        `;
+        customElements.define(`ax-code`, CoaxElem);
+    </script>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@codady/coax",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "publishConfig": {
     "access": "public"
   },
@@ -10,6 +10,20 @@
   "main": "./src/Coax.js",
   "type": "module",
   "types": "./src/coax.d.ts",
+    "exports": {
+    ".": {
+      "import": "./dist/coax.esm.js",
+      "require": "./dist/coax.cjs.js",
+      "browser": "./dist/coax.umd.js",
+      "default": "./dist/coax.esm.js",
+      "types": "./types/coax.d.ts"
+    },
+    "./src/*": {
+      "import": "./src/*.js",
+      "require": "./src/*.js",
+      "types": "./src/*.ts"
+    }
+  },
   "directories": {
     "doc": "docs"
   },
@@ -43,7 +57,7 @@
     "build": "rollup --config",
     "mini": "node script-mini.js",
     "push": "node script-push.js",
-    "all": "cross-env REPLACE=true npm run build && npm run css && npm run mini  &&  npm publish  && (npm run push || true)"
+    "all": "npm run build && npm run css && npm run mini  &&  npm publish  && (npm run push || true)"
   },
   "repository": {
     "type": "git",
@@ -69,6 +83,8 @@
   },
   "homepage": "https://www.axui.cn",
   "dependencies": {
+    "@codady/icax": "^0.0.5",
+    "@codady/utils": "^0.0.34",
     "simple-git": "^3.27.0"
   }
-}
+}

package/rollup.config.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- *  Last modified: 2026/01/04 16:00:42
+ *  Last modified: 2026/01/12 08:59:10
  */
 import resolve from '@rollup/plugin-node-resolve';
 import replace from 'rollup-plugin-replace';
@@ -40,7 +40,7 @@ export default [
     ],
   },
   {
-    input: './src/Coax.js',
+    input: './src/modules.js',
     output:
     {
       dir: './dist/',
@@ -53,7 +53,7 @@ export default [
     ],
   },
   {
-    input: './src/Coax.js',
+    input: './src/modules.js',
     output:
     {
       dir: './dist/',