@nsis/dent-ui 0.1.0 → 0.2.0
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/.turbo/turbo-build.log +3 -3
- package/CHANGELOG.md +11 -0
- package/README.md +26 -0
- package/package.json +2 -2
- package/src/App.svelte +1 -8
- package/src/Editor.svelte +10 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
$ vite build
|
|
2
|
-
|
|
2
|
+
8:42:00 PM [vite-plugin-svelte] no Svelte config found at /home/runner/work/nsis-javascript-tools/nsis-javascript-tools/packages/dent-ui - using default configuration.
|
|
3
3
|
[36mvite v8.1.3 [32mbuilding client environment for production...[36m[39m
|
|
4
4
|
[2K
|
|
5
5
|
rendering chunks...
|
|
6
6
|
computing gzip size...
|
|
7
7
|
dist/index.html 0.30 kB │ gzip: 0.22 kB
|
|
8
|
-
dist/assets/index-
|
|
8
|
+
dist/assets/index-COUmeiB0.js 404.01 kB │ gzip: 132.90 kB
|
|
9
9
|
|
|
10
|
-
[32m✓ built in
|
|
10
|
+
[32m✓ built in 218ms[39m
|
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -8,6 +8,32 @@
|
|
|
8
8
|
|
|
9
9
|
[Demo Time](https://idleberg.github.io/nsis-javascript-tools/dent/) 🙌
|
|
10
10
|
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```svelte
|
|
14
|
+
<script>
|
|
15
|
+
import Editor from '@nsis/dent-ui/Editor.svelte';
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<Editor
|
|
19
|
+
dark={true}
|
|
20
|
+
label="NSIS editor"
|
|
21
|
+
oncreate={(view) => view.focus()}
|
|
22
|
+
/>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Props
|
|
26
|
+
|
|
27
|
+
| Prop | Type | Default | Description |
|
|
28
|
+
| ------------ | --------------------------- | ------- | -------------------------------------- |
|
|
29
|
+
| `dark` | `boolean` | `true` | Use dark theme |
|
|
30
|
+
| `extensions` | `Extension[]` | `[]` | Additional CodeMirror extensions |
|
|
31
|
+
| `label` | `string` | `''` | Accessible label for the editor |
|
|
32
|
+
| `strict` | `boolean` | `false` | Case-sensitive NSIS keyword matching |
|
|
33
|
+
| `oncreate` | `(view: EditorView) => void`| — | Callback when the editor view is ready |
|
|
34
|
+
|
|
35
|
+
By default, NSIS keywords are matched case-insensitively (e.g. `messagebox` and `MessageBox` are both highlighted). Set `strict` to `true` to require canonical casing.
|
|
36
|
+
|
|
11
37
|
## License
|
|
12
38
|
|
|
13
39
|
This work is licensed under [The MIT License](LICENSE).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nsis/dent-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Web UI for the Dent NSIS code formatter",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@codemirror/view": "^6.43.5",
|
|
29
29
|
"@lezer/highlight": "^1.2.3",
|
|
30
30
|
"svelte": "^5.56.4",
|
|
31
|
-
"@nsis/codemirror": "0.
|
|
31
|
+
"@nsis/codemirror": "0.14.0",
|
|
32
32
|
"@nsis/dent": "0.13.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
package/src/App.svelte
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
|
|
3
3
|
import { EditorState } from '@codemirror/state';
|
|
4
4
|
import { EditorView, keymap } from '@codemirror/view';
|
|
5
|
-
import { nsisLanguage } from '@nsis/codemirror';
|
|
6
5
|
import { createFormatter } from '@nsis/dent';
|
|
7
6
|
import { onDestroy, onMount } from 'svelte';
|
|
8
7
|
import Editor from './Editor.svelte';
|
|
@@ -121,7 +120,6 @@ function clear() {
|
|
|
121
120
|
}
|
|
122
121
|
|
|
123
122
|
const inputExtensions = [
|
|
124
|
-
nsisLanguage,
|
|
125
123
|
history(),
|
|
126
124
|
keymap.of([...defaultKeymap, ...historyKeymap]),
|
|
127
125
|
EditorView.lineWrapping,
|
|
@@ -130,12 +128,7 @@ const inputExtensions = [
|
|
|
130
128
|
}),
|
|
131
129
|
];
|
|
132
130
|
|
|
133
|
-
const outputExtensions = [
|
|
134
|
-
nsisLanguage,
|
|
135
|
-
EditorState.readOnly.of(true),
|
|
136
|
-
EditorView.editable.of(false),
|
|
137
|
-
EditorView.lineWrapping,
|
|
138
|
-
];
|
|
131
|
+
const outputExtensions = [EditorState.readOnly.of(true), EditorView.editable.of(false), EditorView.lineWrapping];
|
|
139
132
|
</script>
|
|
140
133
|
|
|
141
134
|
<header>
|
package/src/Editor.svelte
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { Compartment, EditorState, type Extension } from '@codemirror/state';
|
|
3
3
|
import { EditorView } from '@codemirror/view';
|
|
4
|
+
import { nsis } from '@nsis/codemirror';
|
|
4
5
|
import { onMount } from 'svelte';
|
|
5
6
|
import { darkTheme, editorTheme, lightTheme } from './themes.ts';
|
|
6
7
|
|
|
@@ -8,23 +9,31 @@ let {
|
|
|
8
9
|
dark = true,
|
|
9
10
|
extensions = [],
|
|
10
11
|
label = '',
|
|
12
|
+
strict = false,
|
|
11
13
|
oncreate,
|
|
12
14
|
}: {
|
|
13
15
|
dark?: boolean;
|
|
14
16
|
extensions?: Extension[];
|
|
15
17
|
label?: string;
|
|
18
|
+
strict?: boolean;
|
|
16
19
|
oncreate?: (view: EditorView) => void;
|
|
17
20
|
} = $props();
|
|
18
21
|
|
|
19
22
|
let container: HTMLDivElement;
|
|
20
23
|
let view: EditorView | undefined;
|
|
21
24
|
const themeCompartment = new Compartment();
|
|
25
|
+
const langCompartment = new Compartment();
|
|
22
26
|
|
|
23
27
|
onMount(() => {
|
|
24
28
|
view = new EditorView({
|
|
25
29
|
state: EditorState.create({
|
|
26
30
|
doc: '',
|
|
27
|
-
extensions: [
|
|
31
|
+
extensions: [
|
|
32
|
+
themeCompartment.of(dark ? darkTheme : lightTheme),
|
|
33
|
+
langCompartment.of(nsis({ strict })),
|
|
34
|
+
editorTheme,
|
|
35
|
+
...extensions,
|
|
36
|
+
],
|
|
28
37
|
}),
|
|
29
38
|
parent: container,
|
|
30
39
|
});
|