@harmoniclabs/monaco-editor 0.52.0

package/website/src/website/style.scss

@@ -0,0 +1,96 @@
+.navbar {
+	background-color: #68217a !important;
+}
+
+.download-dropdown .dropdown-toggle::after {
+	display: none;
+}
+
+.code-oss-icon {
+	width: 24px;
+	height: 24px;
+	margin: 3px;
+	margin-right: 8px;
+	background-image: url(./code-oss.svg);
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+@media (min-width: 992px) {
+	.hidden-text {
+		display: none;
+	}
+
+	.nav-icon {
+		font-size: 20px;
+	}
+}
+
+.main {
+	flex: 1;
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.page {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+	box-sizing: border-box;
+}
+
+html,
+body,
+.root {
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	min-height: 0;
+}
+
+.monaco-editor-react {
+	box-sizing: border-box;
+}
+
+//.monaco-editor-react,
+.editor-container,
+.preview {
+	border: 1px solid #ced4da;
+}
+
+.preview {
+	height: 100%;
+
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+.monaco-editor {
+	position: absolute !important;
+	a {
+		text-decoration: none;
+	}
+}
+
+button.settings {
+	padding: 0px;
+	margin: 0px;
+}
+
+.full-iframe {
+	line-height: 0;
+	display: block;
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+
+	box-sizing: border-box;
+}

package/website/src/website/utils/Debouncer.ts

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Disposable } from "@hediet/std/disposable";
+
+export class Debouncer implements Disposable {
+	private timeout: NodeJS.Timeout | undefined = undefined;
+
+	constructor(private readonly debounceMs: number) {}
+
+	run(action: () => void): void {
+		this.clear();
+		this.timeout = setTimeout(action, this.debounceMs);
+	}
+
+	clear(): void {
+		if (this.timeout !== undefined) {
+			clearTimeout(this.timeout);
+			this.timeout = undefined;
+		}
+	}
+
+	dispose(): void {
+		this.clear();
+	}
+}

package/website/src/website/utils/ObservableHistory.ts

@@ -0,0 +1,89 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { autorun } from "mobx";
+import { Disposable } from "./utils";
+
+export interface ILocation {
+	hashValue: string | undefined;
+	searchParams: Record<string, string | undefined>;
+}
+
+export interface IHistoryModel {
+	// observable
+	location: ILocation;
+	historyId: number;
+
+	updateLocation(newLocation: ILocation): void;
+}
+
+export class HistoryController implements Disposable {
+	public readonly dispose = Disposable.fn();
+	private readonly model: IHistoryModel;
+	constructor(modelFactory: (initialLocation: ILocation) => IHistoryModel) {
+		this.model = modelFactory(getCurrentLocation());
+
+		const updateValue = () => {
+			this.model.updateLocation(getCurrentLocation());
+		};
+
+		window.addEventListener("popstate", updateValue);
+		this.dispose.track({
+			dispose: () => {
+				window.removeEventListener("popstate", updateValue);
+			},
+		});
+
+		window.addEventListener("hashchange", updateValue);
+		this.dispose.track({
+			dispose: () => {
+				window.removeEventListener("hashchange", updateValue);
+			},
+		});
+
+		this.dispose.track({
+			dispose: autorun(
+				() => {
+					const value = this.model.location;
+					this.setUrl(value, this.model.historyId);
+				},
+				{ name: "Update url" }
+			),
+		});
+	}
+
+	private lastHistoryId = 0;
+	private setUrl(newLocation: ILocation, historyId: number) {
+		const url = new URL(window.location.href);
+		url.hash = newLocation.hashValue ? "#" + newLocation.hashValue : "";
+
+		const searchParams = Object.entries(newLocation.searchParams).reduce(
+			(acc, [key, value]) => {
+				if (value !== undefined) {
+					acc[key] = value;
+				}
+				return acc;
+			},
+			{} as Record<string, string>
+		);
+
+		url.search = new URLSearchParams(searchParams).toString();
+		if (this.lastHistoryId === historyId) {
+			history.replaceState("", "", url.href);
+		} else {
+			this.lastHistoryId = historyId;
+			history.pushState("", "", url.href);
+		}
+	}
+}
+
+function getCurrentLocation(): ILocation {
+	const hashValue = window.location.hash.substr(1);
+	const searchParams: Record<string, string> = {};
+	for (const [key, value] of new URLSearchParams(window.location.search)) {
+		searchParams[key] = value;
+	}
+	return { hashValue, searchParams };
+}

package/website/src/website/utils/ObservablePromise.ts

@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { observable } from "mobx";
+
+export class ObservablePromise<T> {
+	public readonly promise: Promise<T>;
+
+	@observable.ref
+	private _error: unknown;
+
+	@observable.ref
+	private _value: T | null;
+
+	@observable.ref
+	private _resolved: boolean;
+
+	public get error(): unknown {
+		return this._error;
+	}
+
+	public get value(): T | null {
+		return this._value;
+	}
+
+	public get resolved(): boolean {
+		return this._resolved;
+	}
+
+	constructor(promise: Promise<T>) {
+		this.promise = promise;
+		this._value = null;
+		this._error = null;
+		this._resolved = false;
+
+		this.promise.then(
+			(value: T) => {
+				this._value = value;
+				this._resolved = true;
+			},
+			(error: unknown) => {
+				this._error = error;
+				this._resolved = true;
+			}
+		);
+	}
+}

package/website/src/website/utils/hotComponent.tsx

@@ -0,0 +1,49 @@
+import Module = require("module");
+import { observer } from "mobx-react";
+import * as React from "react";
+import { observable, runInAction } from "mobx";
+
+type ReactComponent<P = any> =
+	| React.ComponentClass<P>
+	| React.FunctionComponent<P>;
+
+const allComponents = new Map<string, { component: ReactComponent }>();
+
+export function hotComponent(
+	module: Module
+): <T extends ReactComponent>(Component: T) => T {
+	return <T extends ReactComponent>(component: T): T => {
+		const key = JSON.stringify({ id: module.id, name: component.name });
+
+		let result = allComponents.get(key);
+		if (!result) {
+			result = observable({ component: component });
+			allComponents.set(key, result);
+		} else {
+			setTimeout(() => {
+				runInAction(`Update Component ${component.name}`, () => {
+					result!.component = component;
+				});
+			}, 0);
+		}
+
+		const m = module as {
+			hot?: {
+				accept: ((
+					componentName: string,
+					callback: () => void
+				) => void) &
+					((callback: () => void) => void);
+			};
+		};
+
+		if (m.hot) {
+			m.hot.accept(() => {});
+		}
+
+		return observer((props: any) => {
+			const C = result!.component;
+			return <C {...props} />;
+		}) as any;
+	};
+}

package/website/src/website/utils/lzmaCompressor.ts

@@ -0,0 +1,39 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as lzma from "lzma/src/lzma_worker";
+import * as msgpack from "messagepack";
+import * as base64 from "base64-js";
+
+export class LzmaCompressor<T> {
+	encodeData<T>(json: T): string {
+		// normalize undefined
+		json = JSON.parse(JSON.stringify(json));
+		const data = msgpack.encode(json);
+		const compressed = new Uint8Array(lzma.LZMA.compress(data, 9));
+
+		const compressedStr = base64.fromByteArray(compressed);
+		if (compressedStr.indexOf("undefined") !== -1) {
+			debugger;
+		}
+		const result = compressedStr
+			.replace(/\+/g, "-") // Convert '+' to '-'
+			.replace(/\//g, "_") // Convert '/' to '_'
+			.replace(/=+$/, ""); // Remove ending '='
+
+		return result;
+	}
+
+	decodeData<T>(data: string): T {
+		data += Array(5 - (data.length % 4)).join("=");
+		data = data
+			.replace(/\-/g, "+") // Convert '-' to '+'
+			.replace(/\_/g, "/"); // Convert '_' to '/'
+		const compressed2 = base64.toByteArray(data);
+		const decompressed = lzma.LZMA.decompress(compressed2);
+		const origData = msgpack.decode(new Uint8Array(decompressed));
+		return origData as T;
+	}
+}

package/website/src/website/utils/ref.ts

@@ -0,0 +1,39 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { action, observable } from "mobx";
+
+export function ref<T, TProp extends keyof T>(
+	obj: T,
+	prop: TProp
+): IReference<T[TProp]> {
+	return {
+		get: () => obj[prop],
+		set: (value) => (obj[prop] = value),
+	};
+}
+
+export interface IReference<T, TSet = T> {
+	set(value: TSet): void;
+	get(): T;
+}
+
+export class ObservableReference<T> implements IReference<T> {
+	@observable
+	private value: T;
+
+	constructor(value: T) {
+		this.value = value;
+	}
+
+	@action
+	set(value: T): void {
+		this.value = value;
+	}
+
+	get(): T {
+		return this.value;
+	}
+}

package/website/src/website/utils/types.d.ts

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+declare interface NodeRequire {
+	context<T = unknown>(
+		path: string,
+		includeSubfolders: boolean,
+		regexp: RegExp
+	): SyncContext<T>;
+	context<T = unknown>(
+		path: string,
+		includeSubfolders: boolean,
+		regexp: RegExp,
+		mode: "lazy"
+	): AsyncContext<T>;
+}
+
+interface AsyncContext<T> {
+	keys(): string[];
+	(key: string): Promise<T>;
+}
+
+interface SyncContext<T> {
+	keys(): string[];
+	(key: string): T;
+}

package/website/src/website/utils/utils.ts

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { autorun, observable } from "mobx";
+import { Debouncer } from "./Debouncer";
+
+export function debouncedComputed<T, TDerived>(
+	debounceMs: number,
+	getData: () => T,
+	getDebouncedData: (value: T) => TDerived
+): DebouncedComputed<TDerived> {
+	return new DebouncedComputed(debounceMs, getData, getDebouncedData as any);
+}
+
+export class DebouncedComputed<T> {
+	private readonly debouncer = new Debouncer(this.debounceMs);
+
+	@observable
+	private _value: T | undefined = undefined;
+	public get value(): T | undefined {
+		return this._value;
+	}
+
+	private readonly r = autorun(() => {
+		const d = this.getData();
+		this.debouncer.clear();
+
+		this.debouncer.run(() => {
+			this._value = this.getDebouncedData(d);
+		});
+	});
+
+	constructor(
+		private readonly debounceMs: number,
+		private readonly getData: () => unknown,
+		private readonly getDebouncedData: (data: unknown) => T
+	) {}
+}
+
+export interface Disposable {
+	dispose(): void;
+}
+
+export namespace Disposable {
+	export function fn(): (() => void) & { track(d: Disposable): void } {
+		const disposables: Disposable[] = [];
+		const fn = () => {
+			disposables.forEach((d) => d.dispose());
+			disposables.length = 0;
+		};
+		fn.track = (d: Disposable) => {
+			disposables.push(d);
+		};
+		return fn;
+	}
+}