Skip to content

Commit 7553ac5

Browse files
DerGooglerDerGoogler
committed
Update sanitized-ids.md
1 parent 2bd4feb commit 7553ac5

1 file changed

Lines changed: 91 additions & 1 deletion

File tree

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

Lines changed: 91 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,69 @@
1+
<script setup>
2+
import { ref, computed } from 'vue';
3+
4+
const id = ref('bindhosts');
5+
6+
const _sanitizedId = computed(() => id.value.replace(/[^a-zA-Z0-9_]/g, "_"));
7+
const sanitizedId = computed(() => "$" + _sanitizedId.value);
8+
9+
const sanitizedIdWithFile = computed(() => {
10+
const sId = _sanitizedId.value;
11+
let prefix = "";
12+
13+
if (sId.length >= 2) {
14+
prefix = sId[0].toUpperCase() + sId[1];
15+
} else if (sId.length === 1) {
16+
prefix = sId[0].toUpperCase();
17+
}
18+
19+
return `$${prefix}File`;
20+
});
21+
22+
const sanitizedIdWithFileInputStream = computed(() => `${sanitizedIdWithFile.value}InputStream`);
23+
</script>
24+
125
### Sanitized Module in WebUI
226

327
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.
428

529
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.
630

31+
<div class="input-box">
32+
<h4>Enter your Module ID</h4>
33+
<input
34+
type="text"
35+
v-model="id"
36+
placeholder="ID"
37+
class="input-input"
38+
/>
39+
40+
<div class="language-JavaScript vp-adaptive-theme line-numbers-mode" data-v-c1522a89=""><button title="Copy Code"
41+
class="copy" data-v-c1522a89=""></button><span class="lang" data-v-c1522a89="">JavaScript</span>
42+
<pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"
43+
data-v-c1522a89=""><code data-v-c1522a89=""><span class="line" data-v-c1522a89=""><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;" data-v-c1522a89="">// Check if the ModuleInterface exists</span></span>
44+
<span class="line" data-v-c1522a89=""><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;" data-v-c1522a89="">Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;" data-v-c1522a89="">keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;" data-v-c1522a89="">({{ sanitizedId }}).</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;" data-v-c1522a89="">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;" data-v-c1522a89=""> &gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;" data-v-c1522a89=""> 0</span></span>
45+
<span class="line" data-v-c1522a89=""></span>
46+
<span class="line" data-v-c1522a89=""><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;" data-v-c1522a89="">// Check if the FileSystem API exists</span></span>
47+
<span class="line" data-v-c1522a89=""><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;" data-v-c1522a89="">Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;" data-v-c1522a89="">keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;" data-v-c1522a89="">({{ sanitizedIdWithFile }}).</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;" data-v-c1522a89="">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;" data-v-c1522a89=""> &gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;" data-v-c1522a89=""> 0</span></span>
48+
<span class="line" data-v-c1522a89=""></span>
49+
<span class="line" data-v-c1522a89=""><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;" data-v-c1522a89="">// Check if the FileInputStream exists</span></span>
50+
<span class="line" data-v-c1522a89=""><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;" data-v-c1522a89="">Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;" data-v-c1522a89="">keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;" data-v-c1522a89="">({{ sanitizedIdWithFileInputStream }}).</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;" data-v-c1522a89="">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;" data-v-c1522a89=""> &gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;" data-v-c1522a89=""> 0</span></span></code></pre>
51+
<div class="line-numbers-wrapper" aria-hidden="true" data-v-c1522a89=""><span class="line-number"
52+
data-v-c1522a89="">1</span><br data-v-c1522a89=""><span class="line-number" data-v-c1522a89="">2</span><br
53+
data-v-c1522a89=""><span class="line-number" data-v-c1522a89="">3</span><br data-v-c1522a89=""><span
54+
class="line-number" data-v-c1522a89="">4</span><br data-v-c1522a89=""><span class="line-number"
55+
data-v-c1522a89="">5</span><br data-v-c1522a89=""><span class="line-number" data-v-c1522a89="">6</span><br
56+
data-v-c1522a89=""><span class="line-number" data-v-c1522a89="">7</span><br data-v-c1522a89=""><span
57+
class="line-number" data-v-c1522a89="">8</span><br data-v-c1522a89=""></div>
58+
</div>
59+
60+
<ul>
61+
<li><code>window.{{ sanitizedId }}</code> - ModuleInterface</li>
62+
<li><code>window.{{ sanitizedIdWithFile }}</code> - FileSystem API</li>
63+
<li><code>window.{{ sanitizedIdWithFileInputStream }}</code> - FileSystem API</li>
64+
</ul>
65+
</div>
66+
767
### Purpose of `sanitizedModId`
868

969
1. **JavaScript Interface Naming**:
@@ -60,4 +120,34 @@ console.log(`Dark mode enabled: ${isDarkMode}`);
60120
// Recompose the WebUI
61121
moduleInterface.recompose();
62122
console.log("WebUI recomposed.");
63-
```
123+
```
124+
125+
<style scoped>
126+
.input-box {
127+
display: flex;
128+
flex-direction: column;
129+
justify-content: left;
130+
margin: 1rem 0;
131+
gap: 10px;
132+
}
133+
134+
.input-input {
135+
width: 100%;
136+
max-width: 400px;
137+
padding: 0.6rem 1rem;
138+
background-color: var(--vp-c-bg-alt);
139+
border-radius: 6px;
140+
font-size: 1rem;
141+
outline: none;
142+
color: #909399;
143+
transition: outline-color 0.3s ease;
144+
transition: outline-width 0.3s ease;
145+
transition: outline-style 0.3s ease;
146+
}
147+
148+
.input-input:focus {
149+
outline-color: var(--vp-c-brand-1);
150+
outline-width: 1px;
151+
outline-style: solid;
152+
}
153+
</style>

0 commit comments

Comments
 (0)