HiJack vscode

[lemanschik]

I often need it for development and fast iteration and i want to share that know how as it took time to invent such great patterns :)

It is using the AMD Loader that means we can Monkey Patch it via simply applying current loaders.

example-amd-module-loader.js

"use strict";
/*!--------------------------------------------------------
 * Copyright (C) Microsoft Corporation. All rights reserved.
 *--------------------------------------------------------*/
var _amdLoaderGlobal = this, _commonjsGlobal = typeof global == "object" ? global : {}, AMDLoader;

now the module loader global gets patched up to isolate but all this gets circumvented by the concept of AMD Modules which are then.

bootstrap.js

"use strict";
(function(c, a) {
    typeof exports == "object" ? module.exports = a() : c.MonacoBootstrap = a()
}
)(this, function() {
    const c = typeof require == "function" ? require("module") : void 0
      , a = typeof require == "function" ? require("path") : void 0
      , f = typeof require == "function" ? require("fs") : void 0;

it will look for the global module thats where we would need to integrate

Introduction to ECMAScript Modules

const module = { exports: {} };
await import("bootstrap.js");
// will be assigned to our current module const as ES and Script modules share the same global

but lucky they use webpack that means. we can access window.define and window.require directly. Because they nested the variables wrong but do not tell that the wrong persons.

Let there be Magic!

If your language is english it is called Help => Developer tools

1. Open devtools and go to the sources tab
2. Click ‘Overrides’ in the top-left corner of devtools. It might be behind the ›› menu.
3. Click ‘Select folder for overrides’ and choose a local folder to save the files to
4. Click ‘Allow’ on the pop-up bar that’ll appear

now you can experiment in your console as life repl if you want to modify something simply use define and require to load the existing stuff. Happy iteration.

Extra:

Over time you will accumulate many versions you should try to orginize them into snippets and or diffrent workspace folders for diffrent parts of the overrides.

Now finaly the real unplanned escalation

the most generic Interface point between a ECMAScript engine and any other processing code is mostly the FileSystem. As it does use that methods to load additional stuff and do modifications if we patch the filesystem we patch it all.

const originalFs = require("fs");
define("fs",new Proxy()) // Trap it.

[lemanschik]

try to use the monaco editor with this pattern? maybe that updates the innerText property i am not sure but it works for codeMirror which is the ancestor

  public setValue(value: string): void {
    // https://stackoverflow.com/questions/16195644/in-chrome-undo-does-not-work-properly-for-input-element-after-contents-changed-p
    this.editor.selectionStart = 0;
    this.editor.selectionEnd = this.editor.value.length;
    document.execCommand('insertText', false, value);

Switch to document.execCommand that works in any text element as well as any element with contenteditable="true" and generates a trusted "input" event. The text is inserted at the caret position (replacing selection if any) just as if it was typed by a user. The only drawback compared to TextEvent event is that "input" event doesn't contain the inserted text.

document.execCommand('insertText', false, String.fromCharCode(8253)); document.execCommand('insertHTML', false, '‽'); // the same