Editor & Linter #3

erosman · 2024-12-21T13:38:16Z

At the moment, FireMonkey uses CodeMirror 5 for the code editor.
CodeMirror 5 uses CSSLint & JSHint for linting.

Unfortunately, CSSLint has been abandoned (last release Sep 20, 2016), therefore it doesn't support newer CSS implementations.
JSHint hasn't been updated for a while.

	Latest version	last update
jshint	2.13.6	Nov 11, 2022
CSSLint	1.0.3	Sep 20, 2016

I have been considering the update of the editor, but haven't been able to find a guide.

Note

There is a major consideration with bundling of software. In FireMonkey, some CodeMirror files have been updated to add more specific features. Such updates will not be possible with bundling packages.

CodeMirror 6

CodeMirror 6 - codemirror/dev

Monaco Editor

Ace

Ace - Ace

Minimal embed with JavaScript & CSS

Webpack

See also:

The text was updated successfully, but these errors were encountered:

DrakeTDL · 2025-01-29T18:19:52Z

This is a follow up on my comment here: erosman/support#632 (comment)

It took a while because I had lost my drive that contained my Monaco version and for some reason deleted my fork of erosman/support that also contained that version.
I recently found out about gharchive.org and found commits related to my deleted fork, I'm not sure it's was synced with the copy on my lost drive.

Here is the latest commit that I could find, if you are curious about how I implemented Manaco.
https://github.com/erosman/support/tree/282bcabfb54f5aca15a42b331527203285309f1c

Note on building

You'll need to edit a couple of files

diff --git a/.scripts/generateVersion.js b/.scripts/generateVersion.js
index d3d359f..7d2b28d 100644
--- a/.scripts/generateVersion.js
+++ b/.scripts/generateVersion.js
@@ -3,9 +3,9 @@ import git from 'isomorphic-git'
 
 const pad = (cal) => (cal < 10 ? '0' : '') + cal
 const logs = await git.log({
   fs,
-  dir: '/home/admin/Repos/github.com/DrakeTDL/FireMonkey',
-  ref: 'modifications'
   fs,
+  dir: '</path/to/source>',
+  ref: '282bcabfb54f5aca15a42b331527203285309f1c'
 })
 // const dates: Set<[number, number]> = new Set()
 let dates = {}

diff --git a/web-ext-config.js b/web-ext-config.js
index 19d6d95..df5888c 100644
--- a/web-ext-config.js
+++ b/web-ext-config.js
@@ -1,7 +1,7 @@
 import { writeFile } from "fs/promises"
 import webExt from "web-ext"
 import generateVersion from './.scripts/generateVersion.js'
-import manifest from './manifest.json' assert { type: 'json' }
+import manifest from './manifest.json' with { type: 'json' }
 
 const version = `${generateVersion[0][0]}${generateVersion[0][1]}`
 if (manifest.version.endsWith(version))

erosman · 2025-01-29T19:06:42Z

I was trying to compile the monaco-editor using webpack but run into errors.
I have asked around but haven’t had a reply yet.

Are these all the files needed or would they have other dependencies?

    <!-- Monaco Editor -->
    <script src="../../node_modules/monaco-editor/min/vs/loader.js" defer></script>
    <script src="../../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js" defer></script>
    <script src="../../node_modules/monaco-editor/min/vs/editor/editor.main.js" defer></script>
    <link rel="stylesheet" data-name="vs/editor/editor.main"
      href="../../node_modules/monaco-editor/min/vs/editor/editor.main.css" />

DrakeTDL · 2025-01-29T19:50:22Z

Only those files are needed to get a basic editor setup.

erosman · 2025-01-29T19:54:09Z

Do you have a finished zip of the extension to test?

DrakeTDL · 2025-01-29T20:08:22Z

Yea: firemonkey-2.67.202303161.zip

Although, its unfortunately wasn't the latest version as I thought as there are a couple issues that I know I fixed.

erosman · 2025-01-30T04:42:15Z

loader.js loads a lot of other files (/node_modules).
I was looking for a bundler or bundled version.

CDN examples:
https://cdnjs.com/libraries/monaco-editor
https://www.jsdelivr.com/package/npm/monaco-editor

DrakeTDL · 2025-01-30T09:28:47Z

Do you have a finished zip of the extension to test?

Perhaps I misunderstood what you meant here. Did you mean a zip of my version of FireMonkey or a simple extension that's using Monaco?

loader.js loads a lot of other files (/node_modules).

What files does it load exactly?

It would honestly be helpful if you could tell a little bit about your workflow. Like, when packaging FireMonkey, do you just zip it or do you use scripts and/or 3rd party tools (eg. web-ext)?

I just remember you mentioned that you don't use libraries. I assume that include tools like npm. If that's the case, I'll need to take a different approach.

Sidenote: I saw microsoft/monaco-editor#4793, following what you did, and I didn't get the errors you got when I built browser-esm-webpack.

Sidenot II: I remember you saying in an issue that your development workflow didn't include git, that was 4-5 years ago now. Is that still true today or not? if not, would you accept Pull Requests?

erosman · 2025-01-30T09:44:21Z

Perhaps I misunderstood what you meant here. Did you mean a zip of my version of FireMonkey or a simple extension that's using Monaco?

I wanted to see the end product.

What files does it load exactly?

Everything in the /node_modules folder in your zip.

It would honestly be helpful if you could tell a little bit about your workflow. Like, when packaging FireMonkey, do you just zip it or do you use scripts and/or 3rd party tools (eg. web-ext)?

I do everything on my own computer and then zip it. I don’t use any tools. I don’t use Github either.
I only use VS Code to write the code.

I just remember you mentioned that you don't use libraries. I assume that include tools like npm. If that's the case, I'll need to take a different approach.

I have npm which I use for ESLint, StyleLInt, etc for VS Code extensions, but I don’t use it to develop addons.

Sidenote: I saw microsoft/monaco-editor#4793, following what you did, and I didn't get the errors you got when I built browser-esm-webpack.

I don’t know what the problem is. I wanted to compile monco-editor and use is as standalone JS files.
I like monaco-editor and hope to be able to implement it.

Do you have the same set up?

├── css-loader@7.1.2
├── monaco-editor@0.52.2
├── npm@11.0.0
├── style-loader@4.0.0
├── webpack-cli@6.0.1
└── webpack@5.97.1

Sidenot II: I remember you saying in an issue that your development workflow didn't include git, that was 4-5 years ago now. Is that still true today or not? if not, would you accept Pull Requests?

It is the same now.
AFA, pull requests, I accept them but then I manually enter them in the code on my computer.
I don’t use git. The repository was created for user reference only.

erosman · 2025-01-30T20:07:58Z

I managed to get webpack to output (although with some errors).
It seems webpack didn't find webpack.config.js so I tried with

npx webpack build --config src/webpack.config.js

It generated 35 files which were 17.6 MB.

I think I better use a ready-made CDN versions.
I have to find an example that uses the CDN bundles without loader.js.

CDN examples:
https://cdnjs.com/libraries/monaco-editor
https://www.jsdelivr.com/package/npm/monaco-editor

DrakeTDL · 2025-01-31T04:22:55Z

Do you have the same set up?

The only thing different was my OS. I don't use Ubuntu, but still a Linux based distro nonetheless.

I'll open a draft PR in a couple days (currently busy with other stuff).

erosman · 2025-02-05T05:46:48Z

@DrakeTDL I have been testing with Webpack and got it to work. However, it generates more files than the one you had done which I think is due to using ESM.
If you can let me know the steps to produce the dependencies, I will work on it.

I would prefer to use ESM if possible (but the ESM doesn’t have a min version).
Is there a need for truescript support?

cc. @cyfung1031

DrakeTDL · 2025-02-05T21:40:59Z

If you can let me know the steps to produce the dependencies, I will work on it.

# To download the lastest monaco version and extract files to a desired path
$ curl $(npm view monaco-editor dist.tarball) | tar -zxvf - -C /path/to/src/lib/monaco  \
--strip-components=2 \
package/min/vs/loader.js \
package/min/vs/editor/editor.main.js \
package/min/vs/editor/editor.main.css \
package/min/vs/base/worker/workerMain.js \
package/min/vs/basic-languages/css/css.js \
package/min/vs/language/css/cssMode.js \
package/min/vs/language/css/cssWorker.js \
package/min/vs/basic-languages/javascript/javascript.js \
package/min/vs/language/typescript/tsMode.js \
package/min/vs/language/typescript/tsWorker.js \
package/min/vs/base/browser/ui/codicons/codicon/codicon.ttf

Monaco has no external dependencies.

Is there a need for truescript support?

AFAIK, you need the Typescript related files if you want the fancy stuff like auto-completion and hover tooltip in JavaScript.

The issue I came accross but didn't know how to fix was with the Web Workers.

erosman · 2025-02-05T22:13:10Z

I already have npm (11.0.0) and monaco-editor (0.52.2)
loader.js loads the files needed at runtime but in order to include them the addon, they have to be packed with the addon (like in your attachment zip).
How are those files generated?

cyfung1031 · 2025-02-06T00:06:39Z

@DrakeTDL I have been testing with Webpack and got it to work. However, it generates more files than the one you had done which I think is due to using ESM. If you can let me know the steps to produce the dependencies, I will work on it.

I would prefer to use ESM if possible (but the ESM doesn’t have a min version). Is there a need for truescript support?

cc. @cyfung1031

Would this help?
https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md

erosman · 2025-02-06T05:30:10Z

Would this help?
https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md

I have already tried that, both with and without Monaco Editor WebPack Plugin.
The result had too many files in one folder and all files changed which would make it difficult to track.

mode: 'production'

5628.app.js 
3622.app.js 
8542.app.js 
1446.app.js
...

mode: 'development'

vendors-node_modules_monaco-editor_esm_vs_platform_log_common_log_js.bundle.js 
vendors-node_modules_monaco-editor_esm_vs_editor_common_services_semanticTokensProviderStyling_js.bundle.js 
vendors-node_modules_monaco-editor_esm_vs_editor_common_services_modelService_js.bundle.js 
vendors-node_modules_monaco-editor_esm_vs_editor_common_services_markerDecorationsService_js.bundle.js 
vendors-node_modules_monaco-editor_esm_vs_editor_common_services_languagesRegistry_js.bundle.js 
vendors-node_modules_monaco-editor_esm_vs_editor_common_services_languageService_js.bundle.js
...

DrakeTDL · 2025-02-06T05:46:08Z

I think it's best to use esm webpack. I was having problems with using the /min version.

The result had too many files in one folder and all files changed which would make it difficult to track.

I found out that this sample (browser-esm-webpack-monaco-plugin) does exactly what you want. You can limit what is included with bundle. Limiting it to typescript, javascript, and css outputs less than 15 files.

I created a fork to showcase it: https://github.com/DrakeTDL/firemonkey/tree/monaco.

erosman · 2025-02-06T07:02:47Z

What command do you use to generate the files in the terminal?

https://github.com/DrakeTDL/firemonkey/blob/monaco/src/lib/monaco/monaco.js
There are no such directories after building.

Webpack generated 12 files but they are 32.7mb or 5mb zipped.

 "content_security_policy": "script-src 'self' 'wasm-unsafe-eval' 'unsafe-eval'",

unsafe-eval won’t be allowed in addons.

DrakeTDL · 2025-02-06T07:09:46Z

To generate to the files, run npm install than npm run build (perhaps that should be renamed to something else, it's kinda misleading) and it'll output the files in lib/monaco/generated.

Also the lib/monaco/monaco.js file is only used by webpack to generate the files. The file you want to use after doing the above is lib/monaco/generated/main.bundle.js

Webpack generated 12 files but they are 32.7mb or 5mb zipped.

It's possible to remove Monaco features that you don't plan on using, to get that size down a bit.

unsafe-eval won’t be allowed in addons.

What do you mean by that? Does AMO not allow extensions to use that value?
~~What ever the case, either Monaco or the Webpack bundle (in to my limited experience) fails to load without it.~~
Ok if you set webpack mode to production or none, then it is able to load without unsafe-eval

erosman · 2025-02-06T21:59:22Z

What do you mean by that? Does AMO not allow extensions to use that value?

Correct.

Valid examples

Note: Valid examples demonstrate the correct use of keys in CSP. However, extensions with 'unsafe-eval', remote script, blob, or remote sources in their CSP are not allowed for Firefox extensions per the add-on policies and due to significant security issues.

Ok if you set webpack mode to production or none, then it is able to load without unsafe-eval

I tried it and it became smaller 12.3mb and 2.9mb zipped, since they are minified.

I have to test it to see how it works out.

erosman · 2025-02-16T14:55:35Z

I haven’t tested it yet, but there is another consideration.
Extensions with machine generated minified code have to be reviewed by AMO before publication which could take a few weeks.

The best option would be either ...

Not use machine generated code (e.g. Webpack)
Use established libraries (e.g. CDN).

erosman added area: editor Editor issues area: linter Linter issues labels Dec 21, 2024

This was referenced Jan 26, 2025

FireMonkey: Userscript editing and linting erosman/support#632

Open

FR Units support? erosman/support#665

Open

FireMonkey: CSS error checker is faulty for more complex CSS rules. Option to turn it off? erosman/support#623

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Editor & Linter #3

Editor & Linter #3

erosman commented Dec 21, 2024 •

edited

Loading

DrakeTDL commented Jan 29, 2025

erosman commented Jan 29, 2025

DrakeTDL commented Jan 29, 2025

erosman commented Jan 29, 2025

DrakeTDL commented Jan 29, 2025 •

edited

Loading

erosman commented Jan 30, 2025

DrakeTDL commented Jan 30, 2025

erosman commented Jan 30, 2025 •

edited

Loading

erosman commented Jan 30, 2025 •

edited

Loading

DrakeTDL commented Jan 31, 2025

erosman commented Feb 5, 2025 •

edited

Loading

DrakeTDL commented Feb 5, 2025 •

edited

Loading

erosman commented Feb 5, 2025

cyfung1031 commented Feb 6, 2025

erosman commented Feb 6, 2025

DrakeTDL commented Feb 6, 2025

erosman commented Feb 6, 2025 •

edited

Loading

DrakeTDL commented Feb 6, 2025 •

edited

Loading

erosman commented Feb 6, 2025

erosman commented Feb 16, 2025

Editor & Linter #3

Editor & Linter #3

Comments

erosman commented Dec 21, 2024 • edited Loading

Note

CodeMirror 6

Monaco Editor

Ace

Webpack

DrakeTDL commented Jan 29, 2025

erosman commented Jan 29, 2025

DrakeTDL commented Jan 29, 2025

erosman commented Jan 29, 2025

DrakeTDL commented Jan 29, 2025 • edited Loading

erosman commented Jan 30, 2025

DrakeTDL commented Jan 30, 2025

erosman commented Jan 30, 2025 • edited Loading

erosman commented Jan 30, 2025 • edited Loading

DrakeTDL commented Jan 31, 2025

erosman commented Feb 5, 2025 • edited Loading

DrakeTDL commented Feb 5, 2025 • edited Loading

erosman commented Feb 5, 2025

cyfung1031 commented Feb 6, 2025

erosman commented Feb 6, 2025

DrakeTDL commented Feb 6, 2025

erosman commented Feb 6, 2025 • edited Loading

DrakeTDL commented Feb 6, 2025 • edited Loading

erosman commented Feb 6, 2025

erosman commented Feb 16, 2025

erosman commented Dec 21, 2024 •

edited

Loading

DrakeTDL commented Jan 29, 2025 •

edited

Loading

erosman commented Jan 30, 2025 •

edited

Loading

erosman commented Jan 30, 2025 •

edited

Loading

erosman commented Feb 5, 2025 •

edited

Loading

DrakeTDL commented Feb 5, 2025 •

edited

Loading

erosman commented Feb 6, 2025 •

edited

Loading

DrakeTDL commented Feb 6, 2025 •

edited

Loading