@codady/coax 0.0.5 → 0.0.7
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.
- package/dist/coax.cjs.js +62 -23
- package/dist/coax.cjs.min.js +3 -3
- package/dist/coax.esm.js +62 -23
- package/dist/coax.esm.min.js +3 -3
- package/dist/coax.umd.js +62 -23
- package/dist/coax.umd.min.js +3 -3
- package/examples/{append-highlight.html → append.html} +2 -5
- package/examples/{css-highlight.html → css.html} +2 -5
- package/examples/{deepseek-highlight.html → deepseek.html} +3 -2
- package/examples/{html-highlight.html → html.html} +3 -13
- package/examples/index.html +214 -0
- package/examples/{js-highlight.html → js.html} +3 -4
- package/examples/{md-highlight.html → md.html} +2 -12
- package/examples/{theme-highlight.html → module.html} +4 -7
- package/examples/{plain-highlight.html → plain.html} +2 -5
- package/examples/{replace-highlight.html → replace.html} +2 -6
- package/examples/{stream-highlight.html → steam.html} +11 -16
- package/examples/{color-selector.html → theme.html} +1 -3
- package/examples/tools.html +42 -0
- package/examples/{ts-highlight.html → ts.html} +2 -20
- package/examples/typewriter.html +42 -0
- package/package.json +2 -2
- package/src/Coax.js +1 -1
- package/src/Coax.ts +1 -1
- package/src/components/Coax.js +44 -22
- package/src/components/Coax.ts +52 -23
- package/src/modules.js +1 -1
- package/src/modules.ts +1 -1
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Coax 示例入口页面</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
13
|
+
}
|
|
14
|
+
body {
|
|
15
|
+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
16
|
+
min-height: 100vh;
|
|
17
|
+
padding: 40px 20px;
|
|
18
|
+
color: #333;
|
|
19
|
+
}
|
|
20
|
+
.container {
|
|
21
|
+
max-width: 1200px;
|
|
22
|
+
margin: 0 auto;
|
|
23
|
+
}
|
|
24
|
+
header {
|
|
25
|
+
text-align: center;
|
|
26
|
+
margin-bottom: 50px;
|
|
27
|
+
}
|
|
28
|
+
h1 {
|
|
29
|
+
font-size: 3rem;
|
|
30
|
+
background: linear-gradient(90deg, #007aff, #5856d6);
|
|
31
|
+
-webkit-background-clip: text;
|
|
32
|
+
background-clip: text;
|
|
33
|
+
color: transparent;
|
|
34
|
+
margin-bottom: 10px;
|
|
35
|
+
}
|
|
36
|
+
.subtitle {
|
|
37
|
+
font-size: 1.2rem;
|
|
38
|
+
color: #666;
|
|
39
|
+
max-width: 800px;
|
|
40
|
+
margin: 0 auto 30px;
|
|
41
|
+
line-height: 1.6;
|
|
42
|
+
}
|
|
43
|
+
.grid {
|
|
44
|
+
display: grid;
|
|
45
|
+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
46
|
+
gap: 25px;
|
|
47
|
+
}
|
|
48
|
+
.card {
|
|
49
|
+
background: white;
|
|
50
|
+
border-radius: 16px;
|
|
51
|
+
padding: 25px;
|
|
52
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
|
53
|
+
transition: all 0.3s ease;
|
|
54
|
+
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
color: inherit;
|
|
57
|
+
display: block;
|
|
58
|
+
position: relative;
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
}
|
|
61
|
+
.card:hover {
|
|
62
|
+
transform: translateY(-8px);
|
|
63
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
|
|
64
|
+
border-color: #007aff;
|
|
65
|
+
}
|
|
66
|
+
.card::before {
|
|
67
|
+
content: '';
|
|
68
|
+
position: absolute;
|
|
69
|
+
top: 0;
|
|
70
|
+
left: 0;
|
|
71
|
+
width: 6px;
|
|
72
|
+
height: 100%;
|
|
73
|
+
background: linear-gradient(to bottom, #007aff, #5856d6);
|
|
74
|
+
}
|
|
75
|
+
.card h2 {
|
|
76
|
+
font-size: 1.4rem;
|
|
77
|
+
margin-bottom: 10px;
|
|
78
|
+
color: #1d1d1f;
|
|
79
|
+
}
|
|
80
|
+
.card p {
|
|
81
|
+
color: #86868b;
|
|
82
|
+
font-size: 0.95rem;
|
|
83
|
+
line-height: 1.5;
|
|
84
|
+
margin-bottom: 15px;
|
|
85
|
+
}
|
|
86
|
+
.filename {
|
|
87
|
+
display: inline-block;
|
|
88
|
+
background: #f5f5f7;
|
|
89
|
+
padding: 4px 12px;
|
|
90
|
+
border-radius: 20px;
|
|
91
|
+
font-family: 'Courier New', monospace;
|
|
92
|
+
font-size: 0.85rem;
|
|
93
|
+
color: #5856d6;
|
|
94
|
+
}
|
|
95
|
+
footer {
|
|
96
|
+
text-align: center;
|
|
97
|
+
margin-top: 60px;
|
|
98
|
+
color: #888;
|
|
99
|
+
font-size: 0.9rem;
|
|
100
|
+
}
|
|
101
|
+
@media (max-width: 768px) {
|
|
102
|
+
.grid {
|
|
103
|
+
grid-template-columns: 1fr;
|
|
104
|
+
}
|
|
105
|
+
h1 {
|
|
106
|
+
font-size: 2.2rem;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
</style>
|
|
110
|
+
</head>
|
|
111
|
+
<body>
|
|
112
|
+
<div class="container">
|
|
113
|
+
<header>
|
|
114
|
+
<h1>Coax 示例库</h1>
|
|
115
|
+
<p class="subtitle">
|
|
116
|
+
Coax 是一个现代化的代码高亮 Web 组件，支持实时流式输出、主题定制、多语言高亮等功能。
|
|
117
|
+
以下展示了 Coax 的各种功能示例，点击卡片查看详细演示。
|
|
118
|
+
</p>
|
|
119
|
+
<p>项目地址：<a href="https://www.npmjs.com/package/@codady/coax" target="_blank">https://www.npmjs.com/package/@codady/coax</a></p>
|
|
120
|
+
</header>
|
|
121
|
+
|
|
122
|
+
<main class="grid">
|
|
123
|
+
<a href="append.html" class="card">
|
|
124
|
+
<h2>使用 append 方法在末尾追加新代码高亮渲染</h2>
|
|
125
|
+
<p>演示如何动态在代码块尾部追加新的代码片段并实时高亮。</p>
|
|
126
|
+
<span class="filename">append.html</span>
|
|
127
|
+
</a>
|
|
128
|
+
|
|
129
|
+
<a href="css.html" class="card">
|
|
130
|
+
<h2>渲染 CSS 代码</h2>
|
|
131
|
+
<p>展示 CSS 代码的高亮效果，包括选择器、属性、值等语法元素。</p>
|
|
132
|
+
<span class="filename">css.html</span>
|
|
133
|
+
</a>
|
|
134
|
+
|
|
135
|
+
<a href="deepseek.html" class="card">
|
|
136
|
+
<h2>DeepSeek 真实流式输出代码</h2>
|
|
137
|
+
<p>集成 DeepSeek API 实现真实的流式代码输出与高亮。</p>
|
|
138
|
+
<span class="filename">deepseek.html</span>
|
|
139
|
+
</a>
|
|
140
|
+
|
|
141
|
+
<a href="html.html" class="card">
|
|
142
|
+
<h2>渲染 HTML 代码</h2>
|
|
143
|
+
<p>展示 HTML 代码的高亮，包括标签、属性、注释等。</p>
|
|
144
|
+
<span class="filename">html.html</span>
|
|
145
|
+
</a>
|
|
146
|
+
|
|
147
|
+
<a href="js.html" class="card">
|
|
148
|
+
<h2>渲染 JavaScript 代码</h2>
|
|
149
|
+
<p>JavaScript 代码高亮示例，包含函数、关键字、字符串等。</p>
|
|
150
|
+
<span class="filename">js.html</span>
|
|
151
|
+
</a>
|
|
152
|
+
|
|
153
|
+
<a href="md.html" class="card">
|
|
154
|
+
<h2>渲染 Markdown 格式代码</h2>
|
|
155
|
+
<p>Markdown 语法高亮，支持标题、列表、代码块等元素。</p>
|
|
156
|
+
<span class="filename">md.html</span>
|
|
157
|
+
</a>
|
|
158
|
+
|
|
159
|
+
<a href="module.html" class="card">
|
|
160
|
+
<h2>模块化定制高亮主题</h2>
|
|
161
|
+
<p>使用 ES 模块导入并自定义代码高亮主题颜色。</p>
|
|
162
|
+
<span class="filename">module.html</span>
|
|
163
|
+
</a>
|
|
164
|
+
|
|
165
|
+
<a href="plain.html" class="card">
|
|
166
|
+
<h2>默认未高亮渲染</h2>
|
|
167
|
+
<p>展示未启用语法高亮的原始代码显示效果。</p>
|
|
168
|
+
<span class="filename">plain.html</span>
|
|
169
|
+
</a>
|
|
170
|
+
|
|
171
|
+
<a href="replace.html" class="card">
|
|
172
|
+
<h2>使用 replace 方法整体替换代码</h2>
|
|
173
|
+
<p>演示如何整体替换代码块内容并重新高亮。</p>
|
|
174
|
+
<span class="filename">replace.html</span>
|
|
175
|
+
</a>
|
|
176
|
+
|
|
177
|
+
<a href="steam.html" class="card">
|
|
178
|
+
<h2>使用 stream 方法手动真实流式输出</h2>
|
|
179
|
+
<p>手动控制流式输出代码，模拟实时代码生成效果。</p>
|
|
180
|
+
<span class="filename">steam.html</span>
|
|
181
|
+
</a>
|
|
182
|
+
|
|
183
|
+
<a href="theme.html" class="card">
|
|
184
|
+
<h2>Coax 语法高亮配色增强实验室</h2>
|
|
185
|
+
<p>交互式配色实验室，可自定义各语言 token 颜色并实时预览。</p>
|
|
186
|
+
<span class="filename">theme.html</span>
|
|
187
|
+
</a>
|
|
188
|
+
|
|
189
|
+
<a href="tools.html" class="card">
|
|
190
|
+
<h2>Coax 代码高亮插件</h2>
|
|
191
|
+
<p>展示 Coax 内置工具插件，如复制代码等功能。</p>
|
|
192
|
+
<span class="filename">tools.html</span>
|
|
193
|
+
</a>
|
|
194
|
+
|
|
195
|
+
<a href="ts.html" class="card">
|
|
196
|
+
<h2>渲染 TypeScript 代码</h2>
|
|
197
|
+
<p>TypeScript 代码高亮，支持类型、装饰器等特性。</p>
|
|
198
|
+
<span class="filename">ts.html</span>
|
|
199
|
+
</a>
|
|
200
|
+
|
|
201
|
+
<a href="typewriter.html" class="card">
|
|
202
|
+
<h2>使用 speed 属性实现打字机效果</h2>
|
|
203
|
+
<p>模拟打字机效果的流式输出（非真正流式）。</p>
|
|
204
|
+
<span class="filename">typewriter.html</span>
|
|
205
|
+
</a>
|
|
206
|
+
</main>
|
|
207
|
+
|
|
208
|
+
<footer>
|
|
209
|
+
<p>Coax 示例库 © 2025</p>
|
|
210
|
+
<p>所有示例均使用 Coax 代码高亮 Web 组件实现。</p>
|
|
211
|
+
</footer>
|
|
212
|
+
</div>
|
|
213
|
+
</body>
|
|
214
|
+
</html>
|
|
@@ -4,14 +4,13 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Coax
|
|
8
|
-
<style>
|
|
9
|
-
</style>
|
|
7
|
+
<title>Coax - 渲染javascript代码</title>
|
|
10
8
|
|
|
11
9
|
</head>
|
|
12
10
|
|
|
13
11
|
<body>
|
|
14
|
-
<
|
|
12
|
+
<h1>Coax - 渲染javascript代码</h1>
|
|
13
|
+
<ax-code lang="js">
|
|
15
14
|
<code>
|
|
16
15
|
/**
|
|
17
16
|
* Simple animation function
|
|
@@ -4,22 +4,12 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Coax
|
|
8
|
-
<style>
|
|
9
|
-
/* 白天模式变量 */
|
|
10
|
-
:root {
|
|
11
|
-
--ax-html-comment: #6a737d;
|
|
12
|
-
--ax-html-doctype: #005cc5;
|
|
13
|
-
--ax-html-tag: #22863a;
|
|
14
|
-
--ax-html-attr: #6f42c1;
|
|
15
|
-
--ax-html-string: #032f62;
|
|
16
|
-
--ax-html-bracket: #24292e;
|
|
17
|
-
}
|
|
18
|
-
</style>
|
|
7
|
+
<title>Coax - 渲染markdown格式代码</title>
|
|
19
8
|
|
|
20
9
|
</head>
|
|
21
10
|
|
|
22
11
|
<body>
|
|
12
|
+
<h1>Coax - 渲染markdown格式代码</h1>
|
|
23
13
|
<ax-code lang="md">
|
|
24
14
|
<code>
|
|
25
15
|
# 这是一个一级标题
|
|
@@ -4,15 +4,12 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Coax
|
|
8
|
-
<style>
|
|
9
|
-
/* 白天模式变量 */
|
|
10
|
-
:root {}
|
|
11
|
-
</style>
|
|
7
|
+
<title>Coax - 模块化定制高亮主题</title>
|
|
12
8
|
|
|
13
9
|
</head>
|
|
14
10
|
|
|
15
11
|
<body>
|
|
12
|
+
<h1>Coax - 模块化定制高亮主题</h1>
|
|
16
13
|
<ax-code lang="css">
|
|
17
14
|
<code>
|
|
18
15
|
/* Main Layout Style */
|
|
@@ -39,7 +36,7 @@
|
|
|
39
36
|
|
|
40
37
|
<script type='module'>
|
|
41
38
|
|
|
42
|
-
const {
|
|
39
|
+
const {Coax,css} = await import('../dist/coax.esm.js');
|
|
43
40
|
|
|
44
41
|
css.themeStyles = `
|
|
45
42
|
:host {
|
|
@@ -60,7 +57,7 @@
|
|
|
60
57
|
}
|
|
61
58
|
}
|
|
62
59
|
`;
|
|
63
|
-
customElements.define(`ax-code`,
|
|
60
|
+
customElements.define(`ax-code`, Coax);
|
|
64
61
|
|
|
65
62
|
|
|
66
63
|
</script>
|
|
@@ -4,15 +4,12 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Coax
|
|
8
|
-
<style>
|
|
9
|
-
/* 白天模式变量 */
|
|
10
|
-
:root {}
|
|
11
|
-
</style>
|
|
7
|
+
<title>Coax - 默认未高亮渲染</title>
|
|
12
8
|
|
|
13
9
|
</head>
|
|
14
10
|
|
|
15
11
|
<body>
|
|
12
|
+
<h1>Coax - 默认未高亮渲染</h1>
|
|
16
13
|
<ax-code>
|
|
17
14
|
<code>
|
|
18
15
|
/* Main Layout Style */
|
|
@@ -4,15 +4,11 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Coax
|
|
8
|
-
<style>
|
|
9
|
-
/* 白天模式变量 */
|
|
10
|
-
:root {}
|
|
11
|
-
</style>
|
|
12
|
-
|
|
7
|
+
<title>Coax - 使用replace方法整体替换代码</title>
|
|
13
8
|
</head>
|
|
14
9
|
|
|
15
10
|
<body>
|
|
11
|
+
<h1>Coax - 使用replace方法整体替换代码</h1>
|
|
16
12
|
<ax-code streaming tools="copy" indexed lang="js">
|
|
17
13
|
<code>
|
|
18
14
|
/**
|
|
@@ -4,18 +4,17 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Coax
|
|
8
|
-
<style>
|
|
9
|
-
/* 白天模式变量 */
|
|
10
|
-
:root {}
|
|
11
|
-
</style>
|
|
7
|
+
<title>Coax - 使用stream方法手动真实流式输出</title>
|
|
12
8
|
|
|
13
9
|
</head>
|
|
14
10
|
|
|
15
11
|
<body>
|
|
12
|
+
<h1>Coax - 使用stream方法手动真实流式输出</h1>
|
|
16
13
|
<ax-code tools="copy" indexed lang="js"></ax-code>
|
|
17
14
|
|
|
18
|
-
<
|
|
15
|
+
<p></p>
|
|
16
|
+
|
|
17
|
+
<textarea id="box" style="width:800px;height:400px;">
|
|
19
18
|
function calculateCircleArea(radius) {
|
|
20
19
|
if (typeof radius !== 'number' || radius <= 0) {
|
|
21
20
|
throw new Error('Radius must be a positive number');
|
|
@@ -33,23 +32,19 @@ function calculateCircleCircumference(radius) {
|
|
|
33
32
|
return 2 * Math.PI * radius;
|
|
34
33
|
|
|
35
34
|
}
|
|
36
|
-
|
|
37
35
|
</textarea>
|
|
38
36
|
|
|
39
|
-
|
|
40
|
-
|
|
41
37
|
<script src="../dist/coax.umd.js" type='text/javascript'></script>
|
|
42
38
|
<script type='text/javascript'>
|
|
43
39
|
|
|
44
|
-
|
|
45
|
-
|
|
46
40
|
let el = document.querySelector('ax-code'),
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
41
|
+
// arr = ['/**', '\n', ' * Simple', ' animation', ' function', '\n', ' */', '\n', 'async', ' function', ' animate', '(element,', 'duration) {', '\n',
|
|
42
|
+
// ' const', ' start', ' = Date', '.now();', 'DONE'
|
|
43
|
+
// ],
|
|
44
|
+
//保留换行符,split(/(\n)/),split(/(?=\n)/),split(/(?<=\n)/)均可
|
|
45
|
+
arr = document.querySelector('#box').value.split(/(?<=\n)/),
|
|
51
46
|
index = 0;
|
|
52
|
-
|
|
47
|
+
console.log(arr)
|
|
53
48
|
let timer = setInterval(() => {
|
|
54
49
|
el.stream(arr[index]);
|
|
55
50
|
index++;
|
|
@@ -378,10 +378,8 @@
|
|
|
378
378
|
// 6. 简单的代码预览生成（模拟高亮逻辑）
|
|
379
379
|
function renderCode() {
|
|
380
380
|
const langConfig = config[currentLang];
|
|
381
|
-
let html = langConfig.code
|
|
382
|
-
.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
|
383
381
|
codeEl.setAttribute('lang', currentLang);
|
|
384
|
-
codeEl.replace(
|
|
382
|
+
codeEl.replace(langConfig.code);
|
|
385
383
|
}
|
|
386
384
|
|
|
387
385
|
function toggleDarkMode() {
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Coax 代码高亮插件</title>
|
|
8
|
+
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<h1>Coax 代码高亮插件</h1>
|
|
13
|
+
<ax-code tools="copy" lang="js">
|
|
14
|
+
<code>
|
|
15
|
+
/**
|
|
16
|
+
* Simple animation function
|
|
17
|
+
*/
|
|
18
|
+
async function animate(element, duration) {
|
|
19
|
+
const start = Date.now();
|
|
20
|
+
|
|
21
|
+
if (!element) return false;
|
|
22
|
+
|
|
23
|
+
console.log("Animation started...");
|
|
24
|
+
|
|
25
|
+
while (Date.now() - start < duration) {
|
|
26
|
+
let progress = (Date.now() - start) / duration;
|
|
27
|
+
element.style.opacity = Math.min(progress, 1);
|
|
28
|
+
await Promise.resolve();
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return true;
|
|
32
|
+
}
|
|
33
|
+
</code>
|
|
34
|
+
</ax-code>
|
|
35
|
+
|
|
36
|
+
<script src="../dist/coax.umd.js" type='text/javascript'></script>
|
|
37
|
+
<script type='text/javascript'>
|
|
38
|
+
|
|
39
|
+
</script>
|
|
40
|
+
</body>
|
|
41
|
+
|
|
42
|
+
</html>
|
|
@@ -4,30 +4,12 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Coax
|
|
8
|
-
<style>
|
|
9
|
-
/* 白天模式变量 */
|
|
10
|
-
:root {
|
|
11
|
-
--ax-ts-keyword: #d73a49;
|
|
12
|
-
/* 红色 */
|
|
13
|
-
--ax-ts-string: #032f62;
|
|
14
|
-
/* 深蓝 */
|
|
15
|
-
--ax-ts-decorator: #e36209;
|
|
16
|
-
/* 橙色 */
|
|
17
|
-
--ax-ts-type: #22863a;
|
|
18
|
-
/* 绿色：类和接口 */
|
|
19
|
-
--ax-ts-builtin: #005cc5;
|
|
20
|
-
/* 蓝色：基本类型 */
|
|
21
|
-
--ax-ts-func: #6f42c1;
|
|
22
|
-
/* 紫色 */
|
|
23
|
-
--ax-ts-op: #d73a49;
|
|
24
|
-
--ax-ts-comment: #6a737d;
|
|
25
|
-
}
|
|
26
|
-
</style>
|
|
7
|
+
<title>Coax - 渲染typescript代码</title>
|
|
27
8
|
|
|
28
9
|
</head>
|
|
29
10
|
|
|
30
11
|
<body>
|
|
12
|
+
<h1>Coax - 渲染typescript代码</h1>
|
|
31
13
|
<ax-code lang="ts">
|
|
32
14
|
<code>
|
|
33
15
|
@Component({
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Coax - 使用speed属性实现以打字方式模拟流式输出（非真正流式输出）</title>
|
|
8
|
+
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<h1>Coax - 使用speed属性实现以打字方式模拟流式输出（非真正流式输出）</h1>
|
|
13
|
+
<ax-code speed="10" lang="js">
|
|
14
|
+
<code>
|
|
15
|
+
/**
|
|
16
|
+
* Simple animation function
|
|
17
|
+
*/
|
|
18
|
+
async function animate(element, duration) {
|
|
19
|
+
const start = Date.now();
|
|
20
|
+
|
|
21
|
+
if (!element) return false;
|
|
22
|
+
|
|
23
|
+
console.log("Animation started...");
|
|
24
|
+
|
|
25
|
+
while (Date.now() - start < duration) {
|
|
26
|
+
let progress = (Date.now() - start) / duration;
|
|
27
|
+
element.style.opacity = Math.min(progress, 1);
|
|
28
|
+
await Promise.resolve();
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return true;
|
|
32
|
+
}
|
|
33
|
+
</code>
|
|
34
|
+
</ax-code>
|
|
35
|
+
|
|
36
|
+
<script src="../dist/coax.umd.js" type='text/javascript'></script>
|
|
37
|
+
<script type='text/javascript'>
|
|
38
|
+
|
|
39
|
+
</script>
|
|
40
|
+
</body>
|
|
41
|
+
|
|
42
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codady/coax",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"homepage": "https://www.axui.cn",
|
|
85
85
|
"dependencies": {
|
|
86
86
|
"@codady/icax": "^0.0.5",
|
|
87
|
-
"@codady/utils": "^0.0.
|
|
87
|
+
"@codady/utils": "^0.0.37",
|
|
88
88
|
"simple-git": "^3.27.0"
|
|
89
89
|
}
|
|
90
90
|
}
|
package/src/Coax.js
CHANGED
package/src/Coax.ts
CHANGED