+ {reason} This will replace the current contents of{' '} + {documentState.label}. +
+ ), + proceedLabel: 'Overwrite', + danger: true, + }); + }, + [askForConfirmation, state] + ); + + const handleOpenHelp = useCallback(() => { + setHelpOpen(true); + }, []); + + const handleCloseHelp = useCallback(() => { + setHelpOpen(false); + }, []); + + const handleOpenFile = async (kind: WorkbenchDocumentKind) => { + try { + const opened = await openTextFile(kind); + if (!opened) return; + + const documentState = state[kind]; + + if (documentState.dirty) { + const mayProceed = await askForConfirmation({ + title: `Overwrite ${documentState.label}?`, + content: ( ++ Opening {opened.name} will replace the current + unsaved contents of {documentState.label}. +
+ ), + proceedLabel: 'Overwrite', + danger: true, + }); + + if (!mayProceed) return; + } + + replaceDocument(kind, opened.text, opened.name, false); + setStatusMessage(`Loaded ${opened.name}.`); + } catch (error) { + if (isAbortError(error)) return; + setStatusMessage( + error instanceof Error ? error.message : 'Failed to open file.' + ); + } + }; + + const handleSaveFile = async (kind: WorkbenchDocumentKind) => { + try { + const documentState = state[kind]; + const suggestedName = documentState.fileName ?? defaultFileName(kind); + const savedName = await saveTextFile({ + suggestedName, + text: documentState.text, + kind, + }); + + if (savedName) { + markDocumentSaved(kind, savedName); + setStatusMessage(`Saved ${savedName}.`); + } + } catch (error) { + if (isAbortError(error)) return; + setStatusMessage( + error instanceof Error ? error.message : 'Failed to save file.' + ); + } + }; + + const handleApplyTransformation = async () => { + setValidationTouched(true); + setRuntimeDiagnostics([]); + + const diagnostics = [...xmlDiagnostics, ...xsltDiagnostics]; + if (hasErrors(diagnostics)) { + setRuntimeDiagnostics(diagnostics); + setStatusMessage('Please fix validation errors before transforming.'); + return; + } + + if (state.options.askBeforeOverwritingOutput) { + const mayOverwriteOutput = await confirmOverwrite( + 'xmlOutput', + 'Applying the transformation writes a new result.' + ); + if (!mayOverwriteOutput) return; + } + + setBusy(true); + try { + const request = { + xmlText: state.xmlInput.text, + xsltText: state.xsltCode.text, + engine: state.selectedEngine, + }; + + const result = await runTransformation(request); + setRuntimeDiagnostics(result.diagnostics); + + if (hasErrors(result.diagnostics)) { + setStatusMessage( + 'Transformation failed because the input or stylesheet is invalid.' + ); + return; + } + + const output = state.options.prettifyOutputAfterTransform + ? tryFormatXml(result.output) + : result.output; + + replaceDocument('xmlOutput', output, state.xmlOutput.fileName, true); + const run = await createTransformationRun(request, output); + + setLastTransformation(run); + setStatusMessage(`Transformation completed with ${result.engine}.`); + } catch (error) { + setRuntimeDiagnostics([ + { + severity: 'error', + source: 'Transformation engine', + message: + error instanceof Error ? error.message : 'Transformation failed.', + }, + ]); + setStatusMessage('Transformation failed.'); + } finally { + setBusy(false); + } + }; + + const handleMoveOutputToInput = async () => { + if (!state.xmlOutput.text.trim()) { + setStatusMessage('The output editor is empty. Nothing to move.'); + return; + } + + const mayProceed = await confirmOverwrite( + 'xmlInput', + 'Moving output to input is useful for chained transformations.' + ); + if (!mayProceed) return; + + replaceDocument('xmlInput', state.xmlOutput.text, 'from-output.xml', true); + setStatusMessage('Moved output to XML input.'); + }; + + const handleFormat = async (kind: WorkbenchDocumentKind) => { + const documentState = state[kind]; + + try { + const formatted = formatXml(documentState.text); + if (formatted === documentState.text) { + setStatusMessage(`${documentState.label} is already formatted.`); + return; + } + + const mayProceed = await askForConfirmation({ + title: `Format ${documentState.label}?`, + content: ( ++ Formatting rewrites whitespace in{' '} + {documentState.label}. +
+ ), + proceedLabel: 'Format', + }); + + if (!mayProceed) return; + replaceDocument(kind, formatted, documentState.fileName, true); + setStatusMessage(`Formatted ${documentState.label}.`); + } catch (error) { + setStatusMessage( + error instanceof Error ? error.message : 'Could not format XML.' + ); + } + }; + + const handleValidate = () => { + setValidationTouched(true); + const allDiagnostics = [ + ...xmlDiagnostics, + ...xsltDiagnostics, + ...outputDiagnostics, + ]; + setRuntimeDiagnostics(allDiagnostics); + + if (allDiagnostics.length === 0) { + setStatusMessage('All current documents are well-formed.'); + return; + } + + setStatusMessage( + hasErrors(allDiagnostics) + ? 'Validation found errors.' + : 'Validation completed with warnings.' + ); + }; + + const handleReset = async () => { + const mayProceed = await askForConfirmation({ + title: 'Reset workspace?', + content: ( ++ This restores the example XML and XSLT, clears the output, and removes + the saved LocalStorage workspace. +
+ ), + proceedLabel: 'Reset workspace', + danger: true, + }); + + if (!mayProceed) return; + resetWorkspace(); + setRuntimeDiagnostics([]); + setValidationTouched(false); + setStatusMessage('Workspace reset.'); + }; + + const handleEngineChange = (engine: TransformEngineId) => { + setState((current) => ({ ...current, selectedEngine: engine })); + }; + + const handlePrettifyOutputAfterTransformChange = (enabled: boolean) => { + setState((current) => ({ + ...current, + options: { + ...current.options, + prettifyOutputAfterTransform: enabled, + }, + })); + }; + + const handleAskBeforeOverwritingOutputChange = (enabled: boolean) => { + setState((current) => ({ + ...current, + options: { + ...current.options, + askBeforeOverwritingOutput: enabled, + }, + })); + }; + const traceItems = useMemo(() => { + if (!state.xmlOutput.text.trim()) return []; + return createApproximateTrace( + state.xmlInput.text, + state.xsltCode.text, + state.xmlOutput.text + ); + }, [state.xmlInput.text, state.xsltCode.text, state.xmlOutput.text]); + + const displayedRuntimeDiagnostics = validationTouched + ? runtimeDiagnostics + : []; + + useEffect(() => { + const handleGlobalKeyDown = (event: KeyboardEvent) => { + if (event.defaultPrevented || event.repeat || event.isComposing) { + return; + } + + if (event.key === 'F1') { + event.preventDefault(); + event.stopPropagation(); + handleOpenHelp(); + return; + } + + const isApplyShortcut = + event.key === 'Enter' && + event.ctrlKey && + !event.altKey && + !event.shiftKey && + !event.metaKey; + + if (isApplyShortcut) { + event.preventDefault(); + event.stopPropagation(); + + if (!busy) { + void handleApplyTransformation(); + } + } + }; + + window.addEventListener('keydown', handleGlobalKeyDown, true); + + return () => { + window.removeEventListener('keydown', handleGlobalKeyDown, true); + }; + }, [busy, handleApplyTransformation, handleOpenHelp]); + + return ( ++ MVP approximation: result nodes are compared with simple + stylesheet template matches. Full execution tracing requires an + instrumented engine later. +
++ Run a transformation to see approximate result explanations. +
+ ) : ( +| Result | +Likely source | +Likely template | +Confidence | +
|---|---|---|---|
+ {item.resultPath}
+ |
+
+ {item.likelySourcePath ?? '—'}
+ |
+
+ {item.likelyTemplate ?? '—'}
+ |
+ {item.confidence} | +
No diagnostics.
; + } + + return ( +Local-only XML/XSLT transformation workbench.
++ The app keeps XML input, XSLT code, and XML output in three editor + panels. The current workspace is saved to LocalStorage and files are + opened/saved directly through the browser. +
+ +
+ The first version used the browser-native XSLTProcessor
+ , which is suitable for XSLT 1.0. This engine likely is to be retired
+ in late 2026. For XSLT 3.0, a SaxonJS engine was added that fully runs
+ in the browser (JS-only).
+
+ No upload code is included. Files are read locally by the browser + and the workspace is stored in your browser storage. +
+