@nsis/dent-ui 0.2.6 → 0.3.1

package/.gitignore

@@ -0,0 +1,12 @@
+# Package Manager
+bower_components/
+node_modules/
+npm-debug.log*
+vendor/
+package-lock.json
+yarn-error.log
+yarn.lock
+bin/
+
+# Build
+dist/

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @nsis/dent-ui
 
+## 0.3.1
+
+### Patch Changes
+
+- 2057e9a: allow selecting output viewer text
+
+## 0.3.0
+
+### Minor Changes
+
+- 5e3783a: add property that allows passing default script
+
+### Patch Changes
+
+- Updated dependencies [a7e61df]
+- Updated dependencies [29fec7f]
+- Updated dependencies [4792830]
+  - @nsis/codemirror@0.14.5
+  - @nsis/dent@0.14.1
+
 ## 0.2.6
 
 ### Patch Changes

package/index.html

@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-		<title>Dent UI</title>
+		<title>Playground | @nsis/dent-ui</title>
 	</head>
 	<body>
 		<div id="app"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nsis/dent-ui",
-  "version": "0.2.6",
+  "version": "0.3.1",
   "description": "Web UI for the Dent NSIS code formatter",
   "license": "MIT",
   "type": "module",
@@ -30,9 +30,9 @@
     "@codemirror/state": "^6.7.1",
     "@codemirror/view": "^6.43.8",
     "@lezer/highlight": "^1.2.3",
-    "svelte": "^5.56.9",
-    "@nsis/codemirror": "0.14.4",
-    "@nsis/dent": "0.14.0"
+    "@nsis/codemirror": "0.14.5",
+    "@nsis/dent": "0.14.1",
+    "svelte": "^5.56.9"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
@@ -51,6 +51,7 @@
     "lint:biome": "biome check",
     "lint:biome:ci": "biome ci",
     "check": "svelte-check --tsconfig ./tsconfig.json",
+    "pretest": "playwright install chromium",
     "test": "vitest run"
   }
 }

package/src/App.svelte

@@ -7,7 +7,7 @@ import { createFormatter } from '@nsis/dent';
 import { onDestroy, onMount } from 'svelte';
 import Editor from './Editor.svelte';
 
-let { strict = false }: { strict?: boolean } = $props();
+let { strict = false, sample = '' }: { strict?: boolean; sample?: string } = $props();
 
 let dark = $state(document.documentElement.dataset.theme !== 'light');
 let themePreference = $state(localStorage.getItem('theme') || 'system');
@@ -35,6 +35,12 @@ function handleColorSchemeChange() {
 
 onMount(() => {
 	mql.addEventListener('change', handleColorSchemeChange);
+
+	// Child editors have mounted by now, so both views exist. CodeMirror's
+	// updateListener doesn't fire for the initial document, which means a
+	// seeded input never triggers the auto-format path on its own.
+	if (sample) formatInput();
+
 	return () => mql.removeEventListener('change', handleColorSchemeChange);
 });
 
@@ -132,11 +138,11 @@ const inputExtensions = [
 	}),
 ];
 
-const outputExtensions = [EditorState.readOnly.of(true), EditorView.editable.of(false), EditorView.lineWrapping];
+const outputExtensions = [EditorState.readOnly.of(true), EditorView.lineWrapping];
 </script>
 
 <header>
-	<h1>Dent UI</h1>
+	<h1>Dent</h1>
 	<fieldset class="settings" aria-label="Formatter settings">
 		<label
 			><input
@@ -204,6 +210,7 @@ const outputExtensions = [EditorState.readOnly.of(true), EditorView.editable.of(
 		<Editor
 			{dark}
 			{strict}
+			doc={sample}
 			extensions={inputExtensions}
 			label="NSIS input editor"
 			oncreate={(v) => {
@@ -373,6 +380,11 @@ const outputExtensions = [EditorState.readOnly.of(true), EditorView.editable.of(
 		min-height: 0;
 	}
 
+	.editor-pane :global(.cm-content) {
+		-webkit-user-select: text;
+		user-select: text;
+	}
+
 	.editor-pane:first-child {
 		border-right: 1px solid var(--border);
 	}

package/src/Editor.svelte

@@ -7,12 +7,14 @@ import { darkTheme, editorTheme, lightTheme } from './themes.ts';
 
 let {
 	dark = true,
+	doc = '',
 	extensions = [],
 	label = '',
 	strict = false,
 	oncreate,
 }: {
 	dark?: boolean;
+	doc?: string;
 	extensions?: Extension[];
 	label?: string;
 	strict?: boolean;
@@ -27,7 +29,7 @@ const langCompartment = new Compartment();
 onMount(() => {
 	view = new EditorView({
 		state: EditorState.create({
-			doc: '',
+			doc,
 			extensions: [
 				themeCompartment.of(dark ? darkTheme : lightTheme),
 				langCompartment.of(nsis({ strict })),

package/test/App.test.ts

@@ -7,7 +7,7 @@ describe('App', () => {
 	it('renders the heading', async () => {
 		render(App);
 
-		await expect.element(page.getByRole('heading', { name: 'Dent UI' })).toBeVisible();
+		await expect.element(page.getByRole('heading', { name: 'Dent' })).toBeVisible();
 	});
 
 	it('renders formatter settings fieldset', async () => {
@@ -46,6 +46,14 @@ describe('App', () => {
 		await expect.element(page.getByRole('checkbox', { name: 'Auto-format' })).toBeChecked();
 	});
 
+	it('formats a seeded sample on mount, enabling Copy', async () => {
+		render(App, {
+			props: { sample: "name 'x'\nSection\nnop\nSectionEnd\n" },
+		});
+
+		await expect.element(page.getByRole('button', { name: 'Copy' })).toBeEnabled();
+	});
+
 	it('renders both editor panes', async () => {
 		render(App);
 

package/test/Editor.test.ts

@@ -35,4 +35,15 @@ describe('Editor', () => {
 		const view = oncreate.mock.calls[0]?.[0];
 		expect(view?.state.doc.toString()).toBe('');
 	});
+
+	it('initialises with the doc prop', () => {
+		const oncreate = vi.fn();
+
+		render(Editor, {
+			props: { label: 'Test editor', doc: 'Name "Test"', oncreate },
+		});
+
+		const view = oncreate.mock.calls[0]?.[0];
+		expect(view?.state.doc.toString()).toBe('Name "Test"');
+	});
 });

package/.turbo/turbo-build.log

@@ -1,15 +0,0 @@
-$ vite build
-10:01:22 PM [vite-plugin-svelte] no Svelte config found at /home/runner/work/nsis-org/nsis-org/packages/dent-ui - using default configuration.
-vite v8.2.1 building client environment for production...
-
-rendering chunks...
-computing gzip size...
-dist/index.html                  0.32 kB │ gzip:   0.23 kB
-dist/assets/index-t2NToYOv.js  559.24 kB │ gzip: 182.66 kB
-
-✓ built in 277ms
-[plugin builtin:vite-reporter] 
-(!) Some chunks are larger than 500 kB after minification. Consider:
-- Using dynamic import() to code-split the application
-- Use build.rolldownOptions.output.codeSplitting to improve chunking: https://rolldown.rs/reference/OutputOptions.codeSplitting
-- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.