| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- /*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
- let globalObservableLogger;
- export function setLogger(logger) {
- globalObservableLogger = logger;
- }
- export function getLogger() {
- return globalObservableLogger;
- }
- export class ConsoleObservableLogger {
- constructor() {
- this.indentation = 0;
- this.changedObservablesSets = new WeakMap();
- }
- textToConsoleArgs(text) {
- return consoleTextToArgs([
- normalText(repeat('| ', this.indentation)),
- text,
- ]);
- }
- formatInfo(info) {
- return info.didChange
- ? [
- normalText(` `),
- styled(formatValue(info.oldValue, 70), {
- color: 'red',
- strikeThrough: true,
- }),
- normalText(` `),
- styled(formatValue(info.newValue, 60), {
- color: 'green',
- }),
- ]
- : [normalText(` (unchanged)`)];
- }
- handleObservableChanged(observable, info) {
- console.log(...this.textToConsoleArgs([
- formatKind('observable value changed'),
- styled(observable.debugName, { color: 'BlueViolet' }),
- ...this.formatInfo(info),
- ]));
- }
- formatChanges(changes) {
- if (changes.size === 0) {
- return undefined;
- }
- return styled(' (changed deps: ' +
- [...changes].map((o) => o.debugName).join(', ') +
- ')', { color: 'gray' });
- }
- handleDerivedCreated(derived) {
- const existingHandleChange = derived.handleChange;
- this.changedObservablesSets.set(derived, new Set());
- derived.handleChange = (observable, change) => {
- this.changedObservablesSets.get(derived).add(observable);
- return existingHandleChange.apply(derived, [observable, change]);
- };
- }
- handleDerivedRecomputed(derived, info) {
- const changedObservables = this.changedObservablesSets.get(derived);
- console.log(...this.textToConsoleArgs([
- formatKind('derived recomputed'),
- styled(derived.debugName, { color: 'BlueViolet' }),
- ...this.formatInfo(info),
- this.formatChanges(changedObservables)
- ]));
- changedObservables.clear();
- }
- handleFromEventObservableTriggered(observable, info) {
- console.log(...this.textToConsoleArgs([
- formatKind('observable from event triggered'),
- styled(observable.debugName, { color: 'BlueViolet' }),
- ...this.formatInfo(info),
- ]));
- }
- handleAutorunCreated(autorun) {
- const existingHandleChange = autorun.handleChange;
- this.changedObservablesSets.set(autorun, new Set());
- autorun.handleChange = (observable, change) => {
- this.changedObservablesSets.get(autorun).add(observable);
- return existingHandleChange.apply(autorun, [observable, change]);
- };
- }
- handleAutorunTriggered(autorun) {
- const changedObservables = this.changedObservablesSets.get(autorun);
- console.log(...this.textToConsoleArgs([
- formatKind('autorun'),
- styled(autorun.debugName, { color: 'BlueViolet' }),
- this.formatChanges(changedObservables)
- ]));
- changedObservables.clear();
- }
- handleBeginTransaction(transaction) {
- let transactionName = transaction.getDebugName();
- if (transactionName === undefined) {
- transactionName = '';
- }
- console.log(...this.textToConsoleArgs([
- formatKind('transaction'),
- styled(transactionName, { color: 'BlueViolet' }),
- ]));
- this.indentation++;
- }
- handleEndTransaction() {
- this.indentation--;
- }
- }
- function consoleTextToArgs(text) {
- const styles = new Array();
- const initial = {};
- const data = initial;
- let firstArg = '';
- function process(t) {
- if ('length' in t) {
- for (const item of t) {
- if (item) {
- process(item);
- }
- }
- }
- else if ('text' in t) {
- firstArg += `%c${t.text}`;
- styles.push(t.style);
- if (t.data) {
- Object.assign(data, t.data);
- }
- }
- else if ('data' in t) {
- Object.assign(data, t.data);
- }
- }
- process(text);
- const result = [firstArg, ...styles];
- if (Object.keys(data).length > 0) {
- result.push(data);
- }
- return result;
- }
- function normalText(text) {
- return styled(text, { color: 'black' });
- }
- function formatKind(kind) {
- return styled(padStr(`${kind}: `, 10), { color: 'black', bold: true });
- }
- function styled(text, options = {
- color: 'black',
- }) {
- function objToCss(styleObj) {
- return Object.entries(styleObj).reduce((styleString, [propName, propValue]) => {
- return `${styleString}${propName}:${propValue};`;
- }, '');
- }
- const style = {
- color: options.color,
- };
- if (options.strikeThrough) {
- style['text-decoration'] = 'line-through';
- }
- if (options.bold) {
- style['font-weight'] = 'bold';
- }
- return {
- text,
- style: objToCss(style),
- };
- }
- function formatValue(value, availableLen) {
- switch (typeof value) {
- case 'number':
- return '' + value;
- case 'string':
- if (value.length + 2 <= availableLen) {
- return `"${value}"`;
- }
- return `"${value.substr(0, availableLen - 7)}"+...`;
- case 'boolean':
- return value ? 'true' : 'false';
- case 'undefined':
- return 'undefined';
- case 'object':
- if (value === null) {
- return 'null';
- }
- if (Array.isArray(value)) {
- return formatArray(value, availableLen);
- }
- return formatObject(value, availableLen);
- case 'symbol':
- return value.toString();
- case 'function':
- return `[[Function${value.name ? ' ' + value.name : ''}]]`;
- default:
- return '' + value;
- }
- }
- function formatArray(value, availableLen) {
- let result = '[ ';
- let first = true;
- for (const val of value) {
- if (!first) {
- result += ', ';
- }
- if (result.length - 5 > availableLen) {
- result += '...';
- break;
- }
- first = false;
- result += `${formatValue(val, availableLen - result.length)}`;
- }
- result += ' ]';
- return result;
- }
- function formatObject(value, availableLen) {
- let result = '{ ';
- let first = true;
- for (const [key, val] of Object.entries(value)) {
- if (!first) {
- result += ', ';
- }
- if (result.length - 5 > availableLen) {
- result += '...';
- break;
- }
- first = false;
- result += `${key}: ${formatValue(val, availableLen - result.length)}`;
- }
- result += ' }';
- return result;
- }
- function repeat(str, count) {
- let result = '';
- for (let i = 1; i <= count; i++) {
- result += str;
- }
- return result;
- }
- function padStr(str, length) {
- while (str.length < length) {
- str += ' ';
- }
- return str;
- }
|