Skip to content

Commit 2b0f0e6

Browse files
DerGooglerDerGoogler
committed
Refactor SanitizedModId component to expose hidden APIs and enhance documentation with usage examples
1 parent f9b10b9 commit 2b0f0e6

File tree

2 files changed

+116
-18
lines changed

2 files changed

+116
-18
lines changed

‎docs/components/SanitizedModId.vue‎

Lines changed: 107 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,28 @@ const sanitizedIdWithFile = computed(() => {
2020
});
2121
2222
const sanitizedIdWithFileInputStream = computed(() => `${sanitizedIdWithFile.value}InputStream`);
23+
const sanitizedIdWithFileOutputStream = computed(() => `${sanitizedIdWithFile.value}OutputStream`);
2324
24-
defineExpose({
25-
sanitizedId,
26-
sanitizedIdWithFile,
27-
sanitizedIdWithFileInputStream,
28-
});
25+
const hiddenApis = [
26+
{
27+
name: "ModuleInterface",
28+
id: sanitizedId,
29+
},
30+
{
31+
name: "FileInterface",
32+
id: sanitizedIdWithFile,
33+
},
34+
{
35+
name: "FileInputInterface",
36+
id: sanitizedIdWithFileInputStream,
37+
},
38+
{
39+
name: "FileOutputInterface",
40+
id: sanitizedIdWithFileOutputStream,
41+
},
42+
];
43+
44+
defineExpose({ hiddenApis });
2945
</script>
3046

3147
<template>
@@ -34,21 +50,38 @@ defineExpose({
3450
<input type="text" v-model="id" placeholder="ID" class="input-input" />
3551

3652
<p>
37-
<code>$module_id</code> (<code>{{ sanitizedId }}</code>) is a sanitized version of the module ID. It is used to create unique variable names in JavaScript. The
38-
sanitized version replaces any non-alphanumeric characters with underscores and prefixes the ID with a dollar sign.
53+
<code>$module_id</code> (<code>{{ sanitizedId }}</code
54+
>) is a sanitized version of the module ID. It is used to create unique variable names in JavaScript. The sanitized version replaces
55+
any non-alphanumeric characters with underscores and prefixes the ID with a dollar sign.
3956
</p>
4057

41-
<ul>
42-
<li>
43-
<code>window.{{ sanitizedId }}</code> - <strong>ModuleInterface</strong>
44-
</li>
45-
<li>
46-
<code>window.{{ sanitizedIdWithFile }}</code> - <strong>FileManager</strong>
47-
</li>
48-
<li>
49-
<code>window.{{ sanitizedIdWithFileInputStream }}</code> - <strong>FileInputInterface</strong>
50-
</li>
51-
</ul>
58+
<div class="api-cards">
59+
<a v-for="api in hiddenApis" :key="api.id" :href="`https://docs.mmrl.dev/interfaces/Built-In_Interfaces.${api.name}.html`" target="_blank" class="api-card">
60+
<div class="api-header">
61+
<h5>{{ api.name }}</h5>
62+
<code class="api-variable">window.{{ api.id }}</code>
63+
</div>
64+
</a>
65+
</div>
66+
67+
<div class="code-sample">
68+
<h5>Usage Example</h5>
69+
<div class="language-js vp-adaptive-theme line-numbers-mode">
70+
<button title="Copy Code" class="copy"></button>
71+
<span class="lang">js</span>
72+
<pre
73+
class="shiki shiki-themes github-light github-dark vp-code"
74+
tabindex="0"
75+
><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {{ sanitizedId }} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'undefined'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &amp;&amp;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({{ sanitizedId }}).</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
76+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Running WebUI X!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
77+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre>
78+
<div class="line-numbers-wrapper" aria-hidden="true">
79+
<span class="line-number">1</span><br />
80+
<span class="line-number">2</span><br />
81+
<span class="line-number">3</span><br />
82+
</div>
83+
</div>
84+
</div>
5285
</div>
5386
</template>
5487

@@ -80,4 +113,60 @@ defineExpose({
80113
outline-width: 1px;
81114
outline-style: solid;
82115
}
116+
117+
.api-cards {
118+
display: grid;
119+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
120+
gap: 1rem;
121+
margin: 1rem 0;
122+
}
123+
124+
.api-card {
125+
background-color: var(--vp-c-bg-alt);
126+
border: 1px solid var(--vp-c-divider);
127+
border-radius: 8px;
128+
padding: 1rem;
129+
transition: all 0.3s ease;
130+
text-decoration: none !important;
131+
}
132+
133+
.api-card:hover {
134+
border-color: var(--vp-c-brand-1);
135+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
136+
transform: translateY(-2px);
137+
}
138+
139+
.api-header {
140+
display: flex;
141+
flex-direction: column;
142+
gap: 0.5rem;
143+
}
144+
145+
.api-header h5 {
146+
margin: 0;
147+
color: var(--vp-c-brand-1);
148+
font-size: 1.1rem;
149+
font-weight: 600;
150+
}
151+
152+
.api-variable {
153+
background-color: var(--vp-c-bg);
154+
padding: 0.4rem 0.6rem;
155+
border-radius: 4px;
156+
font-family: var(--vp-font-family-mono);
157+
font-size: 0.9rem;
158+
color: var(--vp-c-text-2);
159+
border: 1px solid var(--vp-c-divider);
160+
}
161+
162+
.code-sample {
163+
margin: 1.5rem 0;
164+
}
165+
166+
.code-sample h5 {
167+
margin: 0 0 0.5rem 0;
168+
color: var(--vp-c-text-1);
169+
font-size: 1.1rem;
170+
font-weight: 600;
171+
}
83172
</style>

‎docs/en/guide/webuix/sanitized-ids.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
1+
<script setup>
2+
import SanitizedModId from '../../../components/SanitizedModId.vue'
3+
</script>
4+
5+
16
### Sanitized Module in WebUI
27

38
The `sanitizedModId` is a property in the `WebUIOptions` class that provides a sanitized version of the `modId` string. This sanitized version ensures that the module ID is safe for use in contexts like file names, JavaScript interfaces, or other identifiers where special characters might cause issues.
49

510
The `sanitizedModId` is derived by replacing all characters in the `modId` that are not alphanumeric, underscores (`_`), or dots (`.`) with underscores (`_`). This ensures compatibility and avoids potential errors when the `modId` is used in various parts of the application.
611

12+
#### Try out yourself
13+
14+
<SanitizedModId />
15+
716
### Purpose of `sanitizedModId`
817

918
1. **JavaScript Interface Naming**:

0 commit comments

Comments
 (0)