Skip to content

Commit 7bd957e

Browse files
DerGooglerDerGoogler
committed
add proper docs back
1 parent 6abae34 commit 7bd957e

20 files changed

Lines changed: 448 additions & 128 deletions

‎docs/.vitepress/config/en.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,18 @@ function sidebarGuide() {
102102
link: "/guide/webuix/",
103103
collapsed: true,
104104
items: [
105+
{
106+
text: "API",
107+
collapsed: true,
108+
items: [
109+
{ text: "ModuleInterface", link: "/guide/webuix/api/ModuleInterface" },
110+
{ text: "FileInterface", link: "/guide/webuix/api/FileInterface" },
111+
{ text: "FileInputInterface", link: "/guide/webuix/api/FileInputInterface" },
112+
{ text: "ApplicationInterface", link: "/guide/webuix/api/ApplicationInterface" },
113+
{ text: "UserManagerInterface", link: "/guide/webuix/api/UserManagerInterface" },
114+
{ text: "PackageManagerInterface", link: "/guide/webuix/api/PackageManagerInterface" },
115+
],
116+
},
105117
{ text: "Index Setup", link: "/guide/webuix/index-setup" },
106118
{ text: "Config", link: "/guide/webuix/config" },
107119
{ text: "Sanitized Module ID's", link: "/guide/webuix/sanitized-ids" },

‎docs/components/SanitizedModId.vue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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+
24+
defineExpose({
25+
sanitizedId,
26+
sanitizedIdWithFile,
27+
sanitizedIdWithFileInputStream,
28+
});
29+
</script>
30+
31+
<template>
32+
<div class="input-box">
33+
<h4>Enter your Module ID</h4>
34+
<input type="text" v-model="id" placeholder="ID" class="input-input" />
35+
36+
<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.
39+
</p>
40+
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>
52+
</div>
53+
</template>
54+
55+
<style scoped>
56+
.input-box {
57+
display: flex;
58+
flex-direction: column;
59+
justify-content: left;
60+
margin: 1rem 0;
61+
gap: 10px;
62+
}
63+
64+
.input-input {
65+
width: 100%;
66+
max-width: 400px;
67+
padding: 0.6rem 1rem;
68+
background-color: var(--vp-c-bg-alt);
69+
border-radius: 6px;
70+
font-size: 1rem;
71+
outline: none;
72+
color: #909399;
73+
transition: outline-color 0.3s ease;
74+
transition: outline-width 0.3s ease;
75+
transition: outline-style 0.3s ease;
76+
}
77+
78+
.input-input:focus {
79+
outline-color: var(--vp-c-brand-1);
80+
outline-width: 1px;
81+
outline-style: solid;
82+
}
83+
</style>

‎docs/en/guide/webuix/api/ApplicationInterface.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# ApplicationInterface API
2+
3+
::: code-group
4+
5+
<<< @/webui-x-types/ApplicationInterface.ts{3}
6+
7+
<<< @/webui-x-types/WXApp.ts
8+
9+
:::

‎docs/en/guide/webuix/api/FileInputInterface.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup>
2+
import SanitizedModId from '../../../../components/SanitizedModId.vue'
3+
</script>
4+
5+
# InputStream API
6+
7+
<SanitizedModId />
8+
9+
::: code-group
10+
11+
<<< @/webui-x-types/FileInputInterface.ts{3}
12+
13+
<<< @/webui-x-types/FileInputInterfaceStream.ts
14+
15+
:::

‎docs/en/guide/webuix/api/FileInterface.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script setup>
2+
import SanitizedModId from '../../../../components/SanitizedModId.vue'
3+
</script>
4+
5+
# FileInterface API
6+
7+
<SanitizedModId />
8+
9+
::: code-group
10+
11+
<<< @/webui-x-types/FileInterface.ts{1}
12+
13+
:::

‎docs/en/guide/webuix/api/ModuleInterface.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script setup>
2+
import SanitizedModId from '../../../../components/SanitizedModId.vue'
3+
</script>
4+
5+
# ModuleInterface API
6+
7+
<SanitizedModId />
8+
9+
::: code-group
10+
11+
<<< @/webui-x-types/ModuleInterface.ts{1}
12+
13+
:::

‎docs/en/guide/webuix/api/PackageManagerInterface.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# PackageManagerInterface API
2+
3+
::: code-group
4+
5+
<<< @/webui-x-types/PackageManagerInterface.ts{4}
6+
7+
<<< @/webui-x-types/WXApplicationInfo.ts
8+
9+
<<< @/webui-x-types/FileInputInterfaceStream.ts
10+
11+
:::

‎docs/en/guide/webuix/api/UserManagerInterface.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# UserManagerInterface API
2+
3+
::: code-group
4+
5+
<<< @/webui-x-types/UserManagerInterface.ts{3}
6+
7+
<<< @/webui-x-types/WXUserInfo.ts
8+
9+
:::

‎docs/en/guide/webuix/api/user-manager.md‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

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

Lines changed: 1 addition & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,9 @@
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-
251
### Sanitized Module in WebUI
262

273
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.
284

295
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.
306

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-
677
### Purpose of `sanitizedModId`
688

699
1. **JavaScript Interface Naming**:
@@ -120,34 +60,4 @@ console.log(`Dark mode enabled: ${isDarkMode}`);
12060
// Recompose the WebUI
12161
moduleInterface.recompose();
12262
console.log("WebUI recomposed.");
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>
63+
```

0 commit comments

Comments
 (0)