FireMonkey: Userscript editing and linting

[wltb]

I have a problem that is maybe related to #623: Newer JS syntax is not linted right, e.g. in classes, the private property marker # throws the linter off. A small (non-sensical) example:

class className {
  #prop;
  static #prop2;
  static {
    this.#prop2 = "txt";
  }
  constructor(arg) {
    this.#prop = arg;
    this.constructor.#func(arg);
  }

  static #func(arg) {
    return arg;
  }

  func2() {
    for(const [foo, bar] of Object.entries(this.#prop)) {
      if(this.constructor.#prop2.has(bar.toLowerCase())) this.constructor.#func(foo);
    }
  }
}

Maybe updating the linter solves this? BTW, CodeMirror fixed some small annoyances w.r.t. to drag+move/copy last year, an update that updates CodeMirror would be appreciated in any case.

Finally, CodeMirror apparently can be tweaked to allow autocomplete without pressing ctrl+space, see here for a small working configuration. Since this involves tweaking events, it seems that it can't work in FireMonkey as of now. Could something like this be added as an option in the future?

[erosman]

I have a problem that is maybe related to #623: Newer JS syntax is not linted right ...

It is similar.
FireMonkey uses CodeMirror 5 for the code editor and CodeMirror 5 uses JSHint to lint the JavaScript.

Unfortunately, JSHint has been abandoned (last release Nov 11, 2022), therefore it doesn't support newer JS implementations.
See also:

• esversion beyond 11

CodeMirror 6

CodeMirror 5 development has slowed down in favour of CodeMirror 6 which uses ESLint.

In order to use it in a browser extension, CodeMirror has to be compiled and I haven't found a guide for it yet.
I plan to switch to CodeMirror 6 as soon as I find a guide.

See also:

• Is there a step-by-step guide to pack CodeMirror to use in a browser extension?
• Is a browser version of CodeMirror 6 available?

[wltb]

Howdy @erosman,

I wish I could help you, but I've never used javascript outside of a browser. The only helpful thing I found was this small tutorial about bundling codemirror6 using rollup, but one first has to write a JS file and include the needed CM modules there oneself.

Maybe that helps a little?

[erosman]

Sadly, the node.js bundling software create a massive code. It is not only CodeMirror but Eslint & StyleLint that have to be packed.

[wltb]

Sadly, the node.js bundling software create a massive code. It is not only CodeMirror but Eslint & StyleLint that have to be packed.

Right. But all the way down, this is discussed. For minimizing, one can use

• minifiers (babel, terse),
• and tree-shaking.

According to the rollup tutorial, it has a plugin for terse which doesn't seem too hard to use on first glance, and tree-shaking is done automagically? I found this link where shaking is discussed a bit (in the bundlers configuration file, set the sideEffects flag to false, or something. This could work?!?).

[cyfung1031]

@erosman you can also consider monaco editor.

https://microsoft.github.io/monaco-editor/

unzip the zip file, copy the min into extension folder.

But the size is around 3.5MB

[erosman]

you can also consider monaco editor.

I use VS Code and the Monaco editor is a good editor.
I did ask them in How to use Monaco Editor in a browser extension?.

[DrakeTDL]

you can also consider monaco editor.

I use VS Code and the Monaco editor is a good editor. I did ask them in How to use Monaco Editor in a browser extension?.

You are able to use Monaco Editor in a browser extension (at least in Firefox) as I have modified FireMonkey to use it.

[erosman]

You are able to use Monaco Editor in a browser extension (at least in Firefox) as I have modified FireMonkey to use it.

Have you replaced CodeMirror with Monaco and added ESLint & StyleLint, or are you using the built-in Monaco linter?

[cyfung1031]

you can also consider monaco editor.

I use VS Code and the Monaco editor is a good editor. I did ask them in How to use Monaco Editor in a browser extension?.

Monaco Editor can work like CM5 that just to put the script tag and then run the script. It will load the dependency automatically provided that you have the correct folder path.

These are the files in the folder of the AMD bundled minimized version.

Put them into your extension's sub-folder.

Before adding the script,
set the following on your page.

       const vsPath = "/public/lib/monaco-editor/min/vs";

        // Setting up Monaco Editor requirements
        let require = {
          paths: {
            vs: vsPath,
          },
        };

        window.require = (window.require || {});
        window.require.paths = (window.require.paths || {});
        Object.assign(window.require.paths, require.paths);

Without the require.paths.vs, the script does not know the folder path.

Then you can add the script with src=${vsPath}/loader.js to your document.head

Afterwards, a global object monaco will be created on the page.

These are the example codes for the setup.

    const editorOptions = {
      automaticLayout: true,
      foldingStrategy: 'indentation',
      lineNumbers: 'on',
      readOnly: false,
      minimap: {
        enabled: false,
      },
      cursorStyle: 'line',
      scrollBeyondLastLine: false,
      showUnused: true,
      showDeprecated: true,
    };

    const compilerOptions = {
      allowNonTsExtensions: true,
      checkJs: true,
      noImplicitAny: true,

      allowJs: true,
      noUnusedLocals: false,
      noFallthroughCasesInSwitch: false,
      noImplicitThis: false,

    };

      // global settings
      monaco.languages.typescript.javascriptDefaults.setCompilerOptions(Object.assign({
        target: monaco.languages.typescript.ScriptTarget.ES2018,
      }, compilerOptions));

      // when the editor is created
      monaco.editor.onDidCreateEditor(()=>{
         console.log('the monaco editor is created')
       })

      // the div will be the container of the editor.
      // the value is the input code of the editor. You can change it later too
      const editor = monaco.editor.create(div, Object.assign({
        value: '',
        language: 'javascript'
      }, editorOptions));

     // set the code
      editor.getModel().setValue(newCode);

    // set global theme (`vs` for light, `vs-dark` for dark)
       monaco.editor.setTheme("vs-dark");

    // detect code change
    editor.onDidChangeModelContent(()=>{
             console.log('code changed', editor.getValue())
    });

---

If you consider to support old browsers, you should use 0.30.1 instead.

[DrakeTDL]

Have you replaced CodeMirror with Monaco and added ESLint & StyleLint, or are you using the built-in Monaco linter?

From memory, I replaced most (if not all) instances of CM with ME and rework most features that were dependent on CM. As for the linter, I did use Monaco's built-in linter.