@nsis/dent-ui 0.4.0 → 0.4.1

package/.turbo/turbo-build.log

@@ -1,15 +1,17 @@
 $ vite build
-6:45:36 PM [vite-plugin-svelte] no Svelte config found at /home/runner/work/nsis-org/nsis-org/packages/dent-ui - using default configuration.
+6:24:22 AM [vite-plugin-svelte] no Svelte config found at /home/runner/work/nsis-org/nsis-org/packages/dent-ui - using default configuration.
 vite v8.3.4 building client environment for production...
 transforming...
-✓ 136 modules transformed.
+✓ 149 modules transformed.
 rendering chunks...
 computing gzip size...
 dist/index.html                             0.34 kB │ gzip:   0.24 kB
 dist/assets/ardent_wasm_bg-Bz5RQ-Nz.wasm  209.73 kB │ gzip:  87.81 kB
-dist/assets/index-DisujktT.js             522.48 kB │ gzip: 172.68 kB
+dist/assets/web-CQZZv1Rg.js                 6.65 kB │ gzip:   2.73 kB
+dist/assets/dent-CuDUSuip.js               58.47 kB │ gzip:  17.01 kB
+dist/assets/index-COh98auV.js             517.77 kB │ gzip: 170.87 kB
 
-✓ built in 376ms
+✓ built in 364ms
 [plugin builtin:vite-reporter] 
 (!) Some chunks are larger than 500 kB after minification. Consider:
 - Using dynamic import() to code-split the application

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nsis/dent-ui
 
+## 0.4.1
+
+### Patch Changes
+
+- 4875a1f: add engine prop
+
 ## 0.4.0
 
 ### Minor Changes

package/README.md

@@ -6,7 +6,7 @@
 [![Version](https://img.shields.io/npm/v/@nsis/dent-ui?style=for-the-badge)](https://www.npmjs.org/package/@nsis/dent-ui)
 [![Build](https://img.shields.io/github/actions/workflow/status/idleberg/nsis-org/ci.yml?style=for-the-badge)](https://github.com/idleberg/nsis-org/actions)
 
-[Demo Time](https://idleberg.github.io/nsis-org/dent/) 🙌
+[Demo Time](https://idleberg.github.io/nsis-org/dent-ui/) 🙌
 
 ## Usage
 
@@ -21,6 +21,8 @@
 > [!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.
 
+Formatting uses [`@nsis/ardent-wasm`](../ardent-wasm#readme). Set `engine` to `"dent"` to use the classic [`@nsis/dent`](../dent#readme) instead. Only the selected engine is downloaded.
+
 ## License
 
 This work is licensed under [The MIT License](LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nsis/dent-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Web UI for the Dent NSIS code formatter",
   "license": "MIT",
   "type": "module",
@@ -32,6 +32,7 @@
     "@lezer/highlight": "^1.2.5",
     "@nsis/codemirror": "0.14.6",
     "@nsis/ardent-wasm": "0.1.0",
+    "@nsis/dent": "0.17.0",
     "svelte": "^5.57.2"
   },
   "devDependencies": {

package/src/App.svelte

@@ -3,11 +3,35 @@ import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
 import { indentOnInput } from '@codemirror/language';
 import { EditorState } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
-import { createFormatter } from '@nsis/ardent-wasm';
 import { onDestroy, onMount } from 'svelte';
 import Editor from './Editor.svelte';
 
-let { strict = false, sample = '' }: { strict?: boolean; sample?: string } = $props();
+let {
+	strict = false,
+	sample = '',
+	engine = 'ardent',
+}: { strict?: boolean; sample?: string; engine?: 'ardent' | 'dent' } = $props();
+
+// Each engine is its own chunk, so neither weighs on the initial bundle.
+const engines = {
+	ardent: () => import('@nsis/ardent-wasm'),
+	dent: () => import('@nsis/dent'),
+};
+
+// Re-imports only when `engine` changes; the module cache makes repeat switches free.
+const formatter = $derived(engines[engine]());
+let loading = $state(true);
+
+// Reading `formatter` here starts the download on mount rather than on the first format.
+$effect(() => {
+	const pending = formatter;
+	const done = () => {
+		if (pending === formatter) loading = false;
+	};
+
+	loading = true;
+	pending.then(done, done);
+});
 
 let dark = $state(document.documentElement.dataset.theme !== 'light');
 let themePreference = $state(localStorage.getItem('theme') || 'system');
@@ -69,16 +93,23 @@ function scheduleAutoFormat() {
 	debounceTimer = setTimeout(formatInput, 400);
 }
 
-function formatInput() {
-	error = '';
-	const source = inputView?.state.doc.toString() ?? '';
-
-	if (!source.trim()) {
-		setOutput('');
-		return;
-	}
+async function formatInput() {
+	const requested = engine;
 
 	try {
+		const { createFormatter } = await formatter;
+
+		// A newer engine took over while this one loaded.
+		if (requested !== engine) return;
+
+		error = '';
+		const source = inputView?.state.doc.toString() ?? '';
+
+		if (!source.trim()) {
+			setOutput('');
+			return;
+		}
+
 		const { format } = createFormatter({
 			useTabs,
 			singleQuote,
@@ -247,7 +278,9 @@ const outputExtensions = [EditorState.readOnly.of(true), EditorView.lineWrapping
 	<label class="auto-label">
 		<input type="checkbox" bind:checked={autoFormat} /> Auto-format
 	</label>
-	{#if status}
+	{#if loading}
+		<span class="status" role="status" aria-live="polite">Loading formatter engine…</span>
+	{:else if status}
 		<span class="status" role="status" aria-live="polite">{status}</span>
 	{/if}
 	{#if error}