@nsis/dent-ui 0.1.0 → 0.2.1

package/.turbo/turbo-build.log

@@ -1,10 +1,10 @@
 $ vite build
-2:57:56 PM [vite-plugin-svelte] no Svelte config found at /home/runner/work/nsis-javascript-tools/nsis-javascript-tools/packages/dent-ui - using default configuration.
+9:28:12 PM [vite-plugin-svelte] no Svelte config found at /home/runner/work/nsis-javascript-tools/nsis-javascript-tools/packages/dent-ui - using default configuration.
 vite v8.1.3 building client environment for production...
 
 rendering chunks...
 computing gzip size...
 dist/index.html                  0.30 kB │ gzip:   0.22 kB
-dist/assets/index-CqDOLnCc.js  403.94 kB │ gzip: 131.52 kB
+dist/assets/index-RxzOIm4G.js  404.08 kB │ gzip: 132.91 kB
 
-✓ built in 219ms
+✓ built in 320ms

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @nsis/dent-ui
 
+## 0.2.1
+
+### Patch Changes
+
+- 952f39c: fix: expose `strict` prop on exported component
+
+## 0.2.0
+
+### Minor Changes
+
+- 105b544: add `strict` property to toggle case insensitity
+
+### Patch Changes
+
+- Updated dependencies [105b544]
+  - @nsis/codemirror@0.14.0
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -8,6 +8,19 @@
 
 [Demo Time](https://idleberg.github.io/nsis-javascript-tools/dent/) 🙌
 
+## Usage
+
+```svelte
+<script>
+  import DentUI from '@nsis/dent-ui/DentUI.svelte';
+</script>
+
+<DentUI strict={true} />
+```
+
+> [!NOTE]
+> By default, NSIS keywords are matched case-insensitively (e.g. `messagebox` and `MessageBox` are both highlighted). Set `strict` to `true` to require canonical casing.
+
 ## License
 
 This work is licensed under [The MIT License](LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nsis/dent-ui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Web UI for the Dent NSIS code formatter",
   "license": "MIT",
   "type": "module",
@@ -28,7 +28,7 @@
     "@codemirror/view": "^6.43.5",
     "@lezer/highlight": "^1.2.3",
     "svelte": "^5.56.4",
-    "@nsis/codemirror": "0.13.0",
+    "@nsis/codemirror": "0.14.0",
     "@nsis/dent": "0.13.0"
   },
   "devDependencies": {

package/src/App.svelte

@@ -2,11 +2,12 @@
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
 import { EditorState } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
-import { nsisLanguage } from '@nsis/codemirror';
 import { createFormatter } from '@nsis/dent';
 import { onDestroy, onMount } from 'svelte';
 import Editor from './Editor.svelte';
 
+let { strict = false }: { strict?: boolean } = $props();
+
 let dark = $state(document.documentElement.dataset.theme !== 'light');
 let themePreference = $state(localStorage.getItem('theme') || 'system');
 
@@ -121,7 +122,6 @@ function clear() {
 }
 
 const inputExtensions = [
-	nsisLanguage,
 	history(),
 	keymap.of([...defaultKeymap, ...historyKeymap]),
 	EditorView.lineWrapping,
@@ -130,12 +130,7 @@ const inputExtensions = [
 	}),
 ];
 
-const outputExtensions = [
-	nsisLanguage,
-	EditorState.readOnly.of(true),
-	EditorView.editable.of(false),
-	EditorView.lineWrapping,
-];
+const outputExtensions = [EditorState.readOnly.of(true), EditorView.editable.of(false), EditorView.lineWrapping];
 </script>
 
 <header>
@@ -206,15 +201,20 @@ const outputExtensions = [
 		<div class="pane-header">Input</div>
 		<Editor
 			{dark}
+			{strict}
 			extensions={inputExtensions}
 			label="NSIS input editor"
-			oncreate={(v) => { inputView = v; v.focus(); }}
+			oncreate={(v) => {
+				inputView = v;
+				v.focus();
+			}}
 		/>
 	</div>
 	<div class="editor-pane">
 		<div class="pane-header">Output</div>
 		<Editor
 			{dark}
+			{strict}
 			extensions={outputExtensions}
 			label="Formatted output editor"
 			oncreate={(v) => (outputView = v)}

package/src/Editor.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { Compartment, EditorState, type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
+import { nsis } from '@nsis/codemirror';
 import { onMount } from 'svelte';
 import { darkTheme, editorTheme, lightTheme } from './themes.ts';
 
@@ -8,23 +9,31 @@ let {
 	dark = true,
 	extensions = [],
 	label = '',
+	strict = false,
 	oncreate,
 }: {
 	dark?: boolean;
 	extensions?: Extension[];
 	label?: string;
+	strict?: boolean;
 	oncreate?: (view: EditorView) => void;
 } = $props();
 
 let container: HTMLDivElement;
 let view: EditorView | undefined;
 const themeCompartment = new Compartment();
+const langCompartment = new Compartment();
 
 onMount(() => {
 	view = new EditorView({
 		state: EditorState.create({
 			doc: '',
-			extensions: [themeCompartment.of(dark ? darkTheme : lightTheme), editorTheme, ...extensions],
+			extensions: [
+				themeCompartment.of(dark ? darkTheme : lightTheme),
+				langCompartment.of(nsis({ strict })),
+				editorTheme,
+				...extensions,
+			],
 		}),
 		parent: container,
 	});