@octanejs/monaco-editor 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Suren Atoyan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+# @octanejs/monaco-editor
+
+Monaco Editor components for Octane. This binding reuses `monaco-editor` and
+`@monaco-editor/loader` unchanged and ports the `@monaco-editor/react@4.7.0`
+adapter layer to compiled Octane components.
+
+```bash
+pnpm add @octanejs/monaco-editor monaco-editor
+```
+
+```tsrx
+import Editor, { loader } from '@octanejs/monaco-editor';
+import * as monaco from 'monaco-editor';
+
+loader.config({ monaco });
+
+export function CodeEditor(props: { value: string; onChange(value: string): void }) @{
+	<Editor
+		height="400px"
+		language="typescript"
+		value={props.value}
+		onChange={(value) => props.onChange(value ?? '')}
+	/>
+}
+```
+
+The root entry exports `Editor` (also the default export), `DiffEditor`,
+`useMonaco`, `loader`, and the corresponding public Monaco-backed prop and
+callback types. Models created by a component are disposed on unmount unless
+the matching `keepCurrent*Model` option preserves the active model.

package/UPSTREAM.md

@@ -0,0 +1,10 @@
+# Upstream
+
+- Package: `@monaco-editor/react`
+- Version: `4.7.0`
+- Source: https://github.com/suren-atoyan/monaco-react
+- License: MIT
+- Loader: `@monaco-editor/loader@1.7.0`
+
+The component and hook layer is re-authored for Octane. The framework-neutral
+Monaco editor and loader packages are consumed unchanged.

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@octanejs/monaco-editor",
+  "version": "0.0.1",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=22.22.2"
+  },
+  "description": "Monaco Editor components and loader hooks for Octane, ported from @monaco-editor/react without a React runtime dependency.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/monaco-editor"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "LICENSE",
+    "README.md",
+    "UPSTREAM.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@monaco-editor/loader": "1.7.0"
+  },
+  "peerDependencies": {
+    "monaco-editor": ">=0.25.0 <1",
+    "octane": "0.1.33"
+  },
+  "devDependencies": {
+    "@monaco-editor/react": "4.7.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "monaco-editor": "0.55.1",
+    "vitest": "^4.1.10",
+    "octane": "0.1.33",
+    "@octanejs/testing-library": "0.1.30"
+  },
+  "scripts": {
+    "test": "vitest run --root ../.. --project monaco-editor",
+    "typecheck": "tsrx-tsc --noEmit -p tsconfig.json"
+  }
+}

package/src/Container.tsrx

@@ -0,0 +1,43 @@
+import type { OctaneNode } from 'octane';
+
+import type { WrapperProps } from './types';
+
+const LOADING_STYLE = {
+	alignItems: 'center',
+	display: 'flex',
+	height: '100%',
+	justifyContent: 'center',
+	width: '100%',
+};
+
+export interface ContainerProps {
+	width: number | string;
+	height: number | string;
+	isEditorReady: boolean;
+	loading: OctaneNode;
+	containerRef: { current: HTMLDivElement | null };
+	className?: string;
+	wrapperProps: WrapperProps;
+}
+
+export function Container(props: ContainerProps) @{
+	const { width, height, isEditorReady, loading, containerRef, className, wrapperProps } = props;
+	const wrapperStyle = {
+		display: 'flex' as const,
+		position: 'relative' as const,
+		textAlign: 'initial' as const,
+		width,
+		height,
+	};
+	const editorStyle = {
+		display: isEditorReady ? undefined : 'none' as const,
+		width: '100%',
+	};
+
+	<section style={wrapperStyle} {...wrapperProps}>
+		@if (!isEditorReady) {
+			<div style={LOADING_STYLE}>{loading}</div>
+		}
+		<div ref={containerRef} style={editorStyle} class={className} />
+	</section>
+}

package/src/Container.tsrx.d.ts

@@ -0,0 +1,16 @@
+import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
+
+import type { WrapperProps } from './types';
+
+export interface ContainerProps {
+	width: number | string;
+	height: number | string;
+	isEditorReady: boolean;
+	loading: OctaneNode;
+	containerRef: { current: HTMLDivElement | null };
+	className?: string;
+	wrapperProps: WrapperProps;
+}
+
+export declare function Container(props: ContainerProps): Octane.JSX.Element;

package/src/DiffEditor.tsrx

@@ -0,0 +1,245 @@
+import loader from '@monaco-editor/loader';
+import type { editor } from 'monaco-editor';
+import { memo, useEffect, useRef, useState } from 'octane';
+
+import { Container } from './Container.tsrx';
+import { isLoaderCancelation } from './loader';
+import { getOrCreateModel, releaseModels } from './model';
+import type { DiffEditorProps, Monaco, MonacoDiffEditor } from './types';
+
+const noop = (): void => {};
+const EMPTY_OPTIONS: editor.IDiffEditorConstructionOptions = {};
+const EMPTY_WRAPPER_PROPS = {};
+
+function DiffEditorComponent(props: DiffEditorProps) @{
+	const {
+		original,
+		modified,
+		language,
+		originalLanguage,
+		modifiedLanguage,
+		originalModelPath,
+		modifiedModelPath,
+		keepCurrentOriginalModel = false,
+		keepCurrentModifiedModel = false,
+		theme = 'light',
+		loading = 'Loading...',
+		options = EMPTY_OPTIONS,
+		height = '100%',
+		width = '100%',
+		className,
+		wrapperProps = EMPTY_WRAPPER_PROPS,
+		beforeMount = noop,
+		onMount = noop,
+	} = props;
+
+	const [monaco, setMonaco] = useState<Monaco | null>(null);
+	const [isEditorReady, setIsEditorReady] = useState(false);
+	const editorRef = useRef<MonacoDiffEditor | null>(null);
+	const containerRef = useRef<HTMLDivElement | null>(null);
+	const leasedModelsRef = useRef(new Set<editor.ITextModel>());
+	const currentOriginalPathRef = useRef<string | undefined>(originalModelPath);
+	const currentModifiedPathRef = useRef<string | undefined>(modifiedModelPath);
+	const latestRef = useRef({
+		beforeMount,
+		keepCurrentModifiedModel,
+		keepCurrentOriginalModel,
+		onMount,
+	});
+
+	latestRef.current = {
+		beforeMount,
+		keepCurrentModifiedModel,
+		keepCurrentOriginalModel,
+		onMount,
+	};
+
+	useEffect(() => {
+		let active = true;
+		const request = loader.init();
+		request.then((loadedMonaco) => {
+			if (active) setMonaco(loadedMonaco);
+		}).catch((error: unknown) => {
+			if (active && !isLoaderCancelation(error)) {
+				console.error('Monaco initialization: error:', error);
+			}
+		});
+
+		return () => {
+			active = false;
+			request.cancel();
+		};
+	}, []);
+
+	useEffect(() => {
+		if (!monaco || !containerRef.current || editorRef.current) return;
+
+		let createdEditor: MonacoDiffEditor | null = null;
+		try {
+			latestRef.current.beforeMount(monaco);
+			const originalModel = getOrCreateModel(
+				monaco,
+				original ?? '',
+				originalLanguage ?? language ?? 'text',
+				originalModelPath,
+				leasedModelsRef.current,
+			);
+			const modifiedModel = getOrCreateModel(
+				monaco,
+				modified ?? '',
+				modifiedLanguage ?? language ?? 'text',
+				modifiedModelPath,
+				leasedModelsRef.current,
+			);
+			const editorInstance = monaco.editor.createDiffEditor(containerRef.current, {
+				automaticLayout: true,
+				...options,
+			});
+			createdEditor = editorInstance;
+			editorInstance.setModel({ original: originalModel, modified: modifiedModel });
+			editorRef.current = editorInstance;
+			currentOriginalPathRef.current = originalModelPath;
+			currentModifiedPathRef.current = modifiedModelPath;
+			monaco.editor.setTheme(theme);
+			setIsEditorReady(true);
+
+			return () => {
+				if (editorRef.current !== editorInstance) return;
+
+				const models = editorInstance.getModel();
+				editorInstance.dispose();
+				editorRef.current = null;
+
+				const preserved = new Set<editor.ITextModel>();
+				if (latestRef.current.keepCurrentOriginalModel && models?.original) {
+					preserved.add(models.original);
+				}
+				if (latestRef.current.keepCurrentModifiedModel && models?.modified) {
+					preserved.add(models.modified);
+				}
+				releaseModels(leasedModelsRef.current, preserved);
+			};
+		} catch (error) {
+			createdEditor?.dispose();
+			editorRef.current = null;
+			releaseModels(leasedModelsRef.current, new Set());
+			throw error;
+		}
+	}, [monaco]);
+
+	useEffect(() => {
+		const editorInstance = editorRef.current;
+		if (!isEditorReady || !editorInstance || !monaco) return;
+
+		// Reason: readiness must commit first so consumers can focus or measure a visible editor.
+		try {
+			latestRef.current.onMount(editorInstance, monaco);
+		} catch (error) {
+			editorInstance.dispose();
+			editorRef.current = null;
+			releaseModels(leasedModelsRef.current, new Set());
+			throw error;
+		}
+	}, [isEditorReady]);
+
+	useEffect(() => {
+		const editorInstance = editorRef.current;
+		const currentModels = editorInstance?.getModel();
+		if (!isEditorReady || !editorInstance || !currentModels || !monaco) return;
+
+		const nextOriginal =
+			originalModelPath === currentOriginalPathRef.current
+				? currentModels.original
+				: getOrCreateModel(
+						monaco,
+						original ?? '',
+						originalLanguage ?? language ?? 'text',
+						originalModelPath,
+						leasedModelsRef.current,
+					);
+		const nextModified =
+			modifiedModelPath === currentModifiedPathRef.current
+				? currentModels.modified
+				: getOrCreateModel(
+						monaco,
+						modified ?? '',
+						modifiedLanguage ?? language ?? 'text',
+						modifiedModelPath,
+						leasedModelsRef.current,
+					);
+
+		if (nextOriginal !== currentModels.original || nextModified !== currentModels.modified) {
+			editorInstance.setModel({
+				original: nextOriginal,
+				modified: nextModified,
+			});
+		}
+		currentOriginalPathRef.current = originalModelPath;
+		currentModifiedPathRef.current = modifiedModelPath;
+	}, [originalModelPath, modifiedModelPath]);
+
+	useEffect(() => {
+		if (isEditorReady) editorRef.current?.updateOptions(options);
+	}, [options]);
+
+	useEffect(() => {
+		const model = editorRef.current?.getModel()?.original;
+		const nextValue = original ?? '';
+		if (isEditorReady && model && model.getValue() !== nextValue) {
+			model.setValue(nextValue);
+		}
+	}, [isEditorReady, original, originalModelPath]);
+
+	useEffect(() => {
+		const editorInstance = editorRef.current?.getModifiedEditor();
+		const nextValue = modified ?? '';
+		if (!isEditorReady || !editorInstance || !monaco || editorInstance.getValue() === nextValue) {
+			return;
+		}
+
+		if (editorInstance.getOption(monaco.editor.EditorOption.readOnly)) {
+			editorInstance.setValue(nextValue);
+		} else {
+			const model = editorInstance.getModel();
+			if (!model) return;
+			editorInstance.executeEdits('', [
+				{
+					range: model.getFullModelRange(),
+					text: nextValue,
+					forceMoveMarkers: true,
+				},
+			]);
+			editorInstance.pushUndoStop();
+		}
+	}, [isEditorReady, modified, modifiedModelPath]);
+
+	useEffect(() => {
+		const models = editorRef.current?.getModel();
+		if (!isEditorReady || !models || !monaco) return;
+		monaco.editor.setModelLanguage(models.original, originalLanguage ?? language ?? 'text');
+		monaco.editor.setModelLanguage(models.modified, modifiedLanguage ?? language ?? 'text');
+	}, [
+		isEditorReady,
+		language,
+		originalLanguage,
+		modifiedLanguage,
+		originalModelPath,
+		modifiedModelPath,
+	]);
+
+	useEffect(() => {
+		if (isEditorReady && monaco) monaco.editor.setTheme(theme);
+	}, [theme]);
+
+	<Container
+		width={width}
+		height={height}
+		isEditorReady={isEditorReady}
+		loading={loading}
+		containerRef={containerRef}
+		className={className}
+		wrapperProps={wrapperProps}
+	/>
+}
+
+export const DiffEditor = memo(DiffEditorComponent);

package/src/DiffEditor.tsrx.d.ts

@@ -0,0 +1,5 @@
+import type { Octane } from 'octane/jsx-runtime';
+
+import type { DiffEditorProps } from './types';
+
+export declare const DiffEditor: (props: DiffEditorProps) => Octane.JSX.Element;

package/src/Editor.tsrx

@@ -0,0 +1,270 @@
+import loader from '@monaco-editor/loader';
+import type { IDisposable, editor } from 'monaco-editor';
+import { memo, useEffect, useRef, useState } from 'octane';
+
+import { Container } from './Container.tsrx';
+import { isLoaderCancelation } from './loader';
+import { getOrCreateModel, releaseModels } from './model';
+import type { EditorProps, Monaco, MonacoEditor } from './types';
+
+const noop = (): void => {};
+const EMPTY_OPTIONS: editor.IStandaloneEditorConstructionOptions = {};
+const EMPTY_OVERRIDE_SERVICES: editor.IEditorOverrideServices = {};
+const EMPTY_WRAPPER_PROPS = {};
+// Kept models outlive a component instance, so their view state must as well.
+const modelViewStates = new WeakMap<editor.ITextModel, editor.ICodeEditorViewState | null>();
+
+function EditorComponent(props: EditorProps) @{
+	const {
+		defaultValue,
+		defaultLanguage,
+		defaultPath,
+		value,
+		language,
+		path,
+		theme = 'light',
+		line,
+		loading = 'Loading...',
+		options = EMPTY_OPTIONS,
+		overrideServices = EMPTY_OVERRIDE_SERVICES,
+		saveViewState = true,
+		keepCurrentModel = false,
+		width = '100%',
+		height = '100%',
+		className,
+		wrapperProps = EMPTY_WRAPPER_PROPS,
+		beforeMount = noop,
+		onMount = noop,
+		onChange,
+		onValidate,
+	} = props;
+
+	const [monaco, setMonaco] = useState<Monaco | null>(null);
+	const [isEditorReady, setIsEditorReady] = useState(false);
+	const editorRef = useRef<MonacoEditor | null>(null);
+	const containerRef = useRef<HTMLDivElement | null>(null);
+	const contentSubscriptionRef = useRef<IDisposable | null>(null);
+	const markerSubscriptionRef = useRef<IDisposable | null>(null);
+	const leasedModelsRef = useRef(new Set<editor.ITextModel>());
+	const currentModelKeyRef = useRef<string | undefined>(path ?? defaultPath);
+	const preventChangeRef = useRef(false);
+	const latestRef = useRef({
+		beforeMount,
+		keepCurrentModel,
+		onChange,
+		onMount,
+		onValidate,
+		saveViewState,
+	});
+
+	latestRef.current = {
+		beforeMount,
+		keepCurrentModel,
+		onChange,
+		onMount,
+		onValidate,
+		saveViewState,
+	};
+
+	useEffect(() => {
+		let active = true;
+		const request = loader.init();
+
+		request.then((loadedMonaco) => {
+			if (active) setMonaco(loadedMonaco);
+		}).catch((error: unknown) => {
+			if (active && !isLoaderCancelation(error)) {
+				console.error('Monaco initialization: error:', error);
+			}
+		});
+
+		return () => {
+			active = false;
+			request.cancel();
+		};
+	}, []);
+
+	useEffect(() => {
+		if (!monaco || !containerRef.current || editorRef.current) return;
+
+		let createdEditor: MonacoEditor | null = null;
+		try {
+			latestRef.current.beforeMount(monaco);
+			const initialPath = path ?? defaultPath;
+			const initialModel = getOrCreateModel(
+				monaco,
+				value ?? defaultValue ?? '',
+				language ?? defaultLanguage ?? '',
+				initialPath,
+				leasedModelsRef.current,
+			);
+			const editorInstance = monaco.editor.create(
+				containerRef.current,
+				{
+					model: initialModel,
+					automaticLayout: true,
+					...options,
+				},
+				overrideServices,
+			);
+			createdEditor = editorInstance;
+
+			editorRef.current = editorInstance;
+			currentModelKeyRef.current = initialPath;
+			const initialViewState = modelViewStates.get(initialModel);
+			if (saveViewState && initialViewState) {
+				editorInstance.restoreViewState(initialViewState);
+			}
+			monaco.editor.setTheme(theme);
+			if (line !== undefined) editorInstance.revealLine(line);
+
+			contentSubscriptionRef.current = editorInstance.onDidChangeModelContent((event) => {
+				if (!preventChangeRef.current) {
+					latestRef.current.onChange?.(editorInstance.getValue(), event);
+				}
+			});
+			markerSubscriptionRef.current = monaco.editor.onDidChangeMarkers((uris) => {
+				const editorUri = editorInstance.getModel()?.uri;
+				if (editorUri && uris.some((uri) => uri.toString() === editorUri.toString())) {
+					latestRef.current.onValidate?.(monaco.editor.getModelMarkers({ resource: editorUri }));
+				}
+			});
+			setIsEditorReady(true);
+
+			return () => {
+				if (editorRef.current !== editorInstance) return;
+
+				contentSubscriptionRef.current?.dispose();
+				markerSubscriptionRef.current?.dispose();
+				contentSubscriptionRef.current = null;
+				markerSubscriptionRef.current = null;
+
+				const currentModel = editorInstance.getModel();
+				const latest = latestRef.current;
+				if (latest.saveViewState && latest.keepCurrentModel && currentModel) {
+					modelViewStates.set(currentModel, editorInstance.saveViewState());
+				}
+
+				editorInstance.dispose();
+				editorRef.current = null;
+				const preserved = new Set<editor.ITextModel>();
+				if (latest.keepCurrentModel && currentModel) preserved.add(currentModel);
+				releaseModels(leasedModelsRef.current, preserved);
+			};
+		} catch (error) {
+			contentSubscriptionRef.current?.dispose();
+			markerSubscriptionRef.current?.dispose();
+			contentSubscriptionRef.current = null;
+			markerSubscriptionRef.current = null;
+			createdEditor?.dispose();
+			editorRef.current = null;
+			releaseModels(leasedModelsRef.current, new Set());
+			throw error;
+		}
+	}, [monaco]);
+
+	useEffect(() => {
+		const editorInstance = editorRef.current;
+		if (!isEditorReady || !editorInstance || !monaco) return;
+
+		// Reason: readiness must commit first so consumers can focus or measure a visible editor.
+		try {
+			latestRef.current.onMount(editorInstance, monaco);
+		} catch (error) {
+			contentSubscriptionRef.current?.dispose();
+			markerSubscriptionRef.current?.dispose();
+			contentSubscriptionRef.current = null;
+			markerSubscriptionRef.current = null;
+			editorInstance.dispose();
+			editorRef.current = null;
+			releaseModels(leasedModelsRef.current, new Set());
+			throw error;
+		}
+	}, [isEditorReady]);
+
+	useEffect(() => {
+		const editorInstance = editorRef.current;
+		if (!isEditorReady || !editorInstance || !monaco) return;
+
+		const nextModelKey = path ?? defaultPath;
+		if (nextModelKey === currentModelKeyRef.current) return;
+
+		const currentModel = editorInstance.getModel();
+		if (saveViewState && currentModel) {
+			modelViewStates.set(currentModel, editorInstance.saveViewState());
+		}
+		const nextModel = getOrCreateModel(
+			monaco,
+			value ?? defaultValue ?? '',
+			language ?? defaultLanguage ?? '',
+			nextModelKey,
+			leasedModelsRef.current,
+		);
+		if (nextModel !== currentModel) editorInstance.setModel(nextModel);
+		currentModelKeyRef.current = nextModelKey;
+		const nextViewState = modelViewStates.get(nextModel);
+		if (saveViewState && nextViewState) {
+			editorInstance.restoreViewState(nextViewState);
+		}
+	}, [path]);
+
+	useEffect(() => {
+		if (isEditorReady) editorRef.current?.updateOptions(options);
+	}, [options]);
+
+	useEffect(() => {
+		const editorInstance = editorRef.current;
+		if (!isEditorReady || !editorInstance || !monaco || value === undefined) return;
+		if (value === editorInstance.getValue()) return;
+
+		preventChangeRef.current = true;
+		try {
+			if (editorInstance.getOption(monaco.editor.EditorOption.readOnly)) {
+				editorInstance.setValue(value);
+			} else {
+				const model = editorInstance.getModel();
+				if (!model) return;
+				editorInstance.executeEdits('', [
+					{
+						range: model.getFullModelRange(),
+						text: value,
+						forceMoveMarkers: true,
+					},
+				]);
+				editorInstance.pushUndoStop();
+			}
+		} finally {
+			preventChangeRef.current = false;
+		}
+	}, [isEditorReady, value, path]);
+
+	useEffect(() => {
+		const model = editorRef.current?.getModel();
+		if (isEditorReady && model && language && monaco) {
+			monaco.editor.setModelLanguage(model, language);
+		}
+	}, [isEditorReady, language, path]);
+
+	useEffect(() => {
+		if (isEditorReady && line !== undefined) {
+			editorRef.current?.revealLine(line);
+		}
+	}, [line]);
+
+	useEffect(() => {
+		if (isEditorReady && monaco) monaco.editor.setTheme(theme);
+	}, [theme]);
+
+	<Container
+		width={width}
+		height={height}
+		isEditorReady={isEditorReady}
+		loading={loading}
+		containerRef={containerRef}
+		className={className}
+		wrapperProps={wrapperProps}
+	/>
+}
+
+export const Editor = memo(EditorComponent);
+export default Editor;

package/src/Editor.tsrx.d.ts

@@ -0,0 +1,6 @@
+import type { Octane } from 'octane/jsx-runtime';
+
+import type { EditorProps } from './types';
+
+export declare const Editor: (props: EditorProps) => Octane.JSX.Element;
+export default Editor;

package/src/index.ts

@@ -0,0 +1,19 @@
+export { default, Editor } from './Editor.tsrx';
+export { DiffEditor } from './DiffEditor.tsrx';
+export { useMonaco } from './useMonaco.tsrx';
+export { default as loader } from '@monaco-editor/loader';
+export type {
+	BeforeMount,
+	DiffBeforeMount,
+	DiffEditorProps,
+	DiffOnMount,
+	EditorProps,
+	Monaco,
+	MonacoDiffEditor,
+	MonacoEditor,
+	OnChange,
+	OnMount,
+	OnValidate,
+	Theme,
+	WrapperProps,
+} from './types';

package/src/loader.ts

@@ -0,0 +1,5 @@
+export function isLoaderCancelation(error: unknown): boolean {
+	return (
+		typeof error === 'object' && error !== null && 'type' in error && error.type === 'cancelation'
+	);
+}

package/src/model.ts

@@ -0,0 +1,49 @@
+import type { editor } from 'monaco-editor';
+
+import type { Monaco } from './types';
+
+const bindingOwnedModels = new WeakSet<editor.ITextModel>();
+const modelLeaseCounts = new WeakMap<editor.ITextModel, number>();
+
+export function getOrCreateModel(
+	monaco: Monaco,
+	value: string,
+	language: string,
+	path: string | undefined,
+	leasedModels: Set<editor.ITextModel>,
+): editor.ITextModel {
+	const uri = path ? monaco.Uri.parse(path) : undefined;
+	const existing = uri ? monaco.editor.getModel(uri) : null;
+	const model = existing ?? monaco.editor.createModel(value, language || undefined, uri);
+	if (!existing) bindingOwnedModels.add(model);
+	if (!leasedModels.has(model)) {
+		leasedModels.add(model);
+		modelLeaseCounts.set(model, (modelLeaseCounts.get(model) ?? 0) + 1);
+	}
+	return model;
+}
+
+export function releaseModels(
+	leasedModels: Set<editor.ITextModel>,
+	preservedModels: ReadonlySet<editor.ITextModel>,
+): void {
+	for (const model of leasedModels) {
+		const nextLeaseCount = Math.max(0, (modelLeaseCounts.get(model) ?? 1) - 1);
+		if (nextLeaseCount === 0) {
+			modelLeaseCounts.delete(model);
+		} else {
+			modelLeaseCounts.set(model, nextLeaseCount);
+		}
+
+		if (nextLeaseCount === 0) {
+			if (preservedModels.has(model)) {
+				// The final keepCurrent* lease transfers ownership out of the binding.
+				bindingOwnedModels.delete(model);
+			} else if (bindingOwnedModels.has(model)) {
+				if (!model.isDisposed()) model.dispose();
+				bindingOwnedModels.delete(model);
+			}
+		}
+	}
+	leasedModels.clear();
+}

package/src/types.ts

@@ -0,0 +1,65 @@
+import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
+import type { editor } from 'monaco-editor';
+import type * as monaco from 'monaco-editor';
+
+export type Monaco = typeof monaco;
+export type Theme = 'vs-dark' | 'light';
+
+export type MonacoEditor = editor.IStandaloneCodeEditor;
+export type MonacoDiffEditor = editor.IStandaloneDiffEditor;
+
+export type BeforeMount = (monaco: Monaco) => void;
+export type OnMount = (editor: MonacoEditor, monaco: Monaco) => void;
+export type OnChange = (value: string | undefined, event: editor.IModelContentChangedEvent) => void;
+export type OnValidate = (markers: editor.IMarker[]) => void;
+
+export type DiffBeforeMount = (monaco: Monaco) => void;
+export type DiffOnMount = (editor: MonacoDiffEditor, monaco: Monaco) => void;
+
+export type WrapperProps = Omit<Octane.JSX.IntrinsicElements['section'], 'children'>;
+
+export interface EditorProps {
+	defaultValue?: string;
+	defaultLanguage?: string;
+	defaultPath?: string;
+	value?: string;
+	language?: string;
+	path?: string;
+	theme?: Theme | string;
+	line?: number;
+	loading?: OctaneNode;
+	options?: editor.IStandaloneEditorConstructionOptions;
+	overrideServices?: editor.IEditorOverrideServices;
+	saveViewState?: boolean;
+	keepCurrentModel?: boolean;
+	width?: number | string;
+	height?: number | string;
+	className?: string;
+	wrapperProps?: WrapperProps;
+	beforeMount?: BeforeMount;
+	onMount?: OnMount;
+	onChange?: OnChange;
+	onValidate?: OnValidate;
+}
+
+export interface DiffEditorProps {
+	original?: string;
+	modified?: string;
+	language?: string;
+	originalLanguage?: string;
+	modifiedLanguage?: string;
+	originalModelPath?: string;
+	modifiedModelPath?: string;
+	keepCurrentOriginalModel?: boolean;
+	keepCurrentModifiedModel?: boolean;
+	theme?: Theme | string;
+	loading?: OctaneNode;
+	options?: editor.IDiffEditorConstructionOptions;
+	width?: number | string;
+	height?: number | string;
+	className?: string;
+	wrapperProps?: WrapperProps;
+	beforeMount?: DiffBeforeMount;
+	onMount?: DiffOnMount;
+}

package/src/useMonaco.tsrx

@@ -0,0 +1,30 @@
+import loader from '@monaco-editor/loader';
+import { useEffect, useState } from 'octane';
+
+import { isLoaderCancelation } from './loader';
+import type { Monaco } from './types';
+
+export function useMonaco(): Monaco | null {
+	const [monaco, setMonaco] = useState<Monaco | null>(loader.__getMonacoInstance());
+
+	useEffect(() => {
+		if (monaco) return;
+
+		let active = true;
+		const request = loader.init();
+		request.then((loadedMonaco) => {
+			if (active) setMonaco(loadedMonaco);
+		}).catch((error: unknown) => {
+			if (active && !isLoaderCancelation(error)) {
+				console.error('Monaco initialization: error:', error);
+			}
+		});
+
+		return () => {
+			active = false;
+			request.cancel();
+		};
+	}, [monaco]);
+
+	return monaco;
+}

package/src/useMonaco.tsrx.d.ts

@@ -0,0 +1,3 @@
+import type { Monaco } from './types';
+
+export declare function useMonaco(): Monaco | null;