Distributing a self-contained script

[marijnh]

Firstly, thanks for doing this. Before I found it, running ESLint in the browser seemed impossible. With this, it only seems painful.

After several hours of messing around with Rollup and Babel, I managed to create an ESLint file that I can load in IE11. It's a 1.3mb monster that I'd rather not check into version control, but I'm also loath to include this entire build process with all the plugins that it requires in my package's build process. So I'm leaning towards stuffing it into a separate npm package. But that package already sort of exists here, and it seems you even have a way to keep it up to date.

Would you consider including a full, self-contained built artifact in this package? Or adjust your scripts to publish a second package with such a file?

[marijnh]

Ah, never mind this—there'd be no single right way to do it, since you'd be bundling up all kinds of polyfills due to the way the codebase is using modern JS all over. I'll just set up a crude thing myself and handle the updates manually.

[mercmobily]

This is weird... @marijnh, I keep on virtually bumping into you! I was about to write to you about precisely this issue... Is there a plan for CodeMirror 6 to use EsLint? Seeing your ticket here, I assume that's the way you are going... is that right?

[marijnh]

See the esLint export in @codemirror/lang-javascript.

[shipagency]

Oh c'mon, no way!!!

[PaperPrototype]

Just finished finding a solution that actually works eslint-linter-browserify in case if anyone been struggling with this! Took me 4 hours to finally discover this solution :P

import { basicSetup } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view';
import { javascript, esLint } from '@codemirror/lang-javascript';
import { csharp } from '@replit/codemirror-lang-csharp'
import { indentWithTab } from '@codemirror/commands';
import checkboxPlugin from '$lib/mirrorext/checkboxPlugin';
import colorPickerPlugin from '$lib/mirrorext/colorPickerPlugin';
import { ViewUpdate } from '@codemirror/view';
import {html} from "@codemirror/lang-html"
import { lintGutter, linter } from "@codemirror/lint";

// Uses linter.mjs
import * as eslint from "eslint-linter-browserify";

// import {globals} from "./p5js"

const config = {
    languageOptions: {
        parserOptions: {
            ecmaVersion: 2022,
            sourceType: "module",
        },
        globals: {
            // globals
        },
    },
    rules: {
        // semi: ["warn", "always"],
        quotes: ["warn", "single"],
        indent: ["warn", 2],
        "no-undef": "error",
        // other rules...
    },
};

// Create an instance of ESLint linter
// const eslintLinter = new eslint.Linter();
const jsLinterExtension = linter(esLint(new eslint.Linter(), config))

function javascriptState(text = "", callback:(view:ViewUpdate) => void = () => {}) {
    return EditorState.create({
        doc: text,
        extensions: [
            basicSetup,
            javascript(),
            EditorView.updateListener.of((view) => {
                // if (code !== view.state.doc.toString()) {
                //     console.log("start", view.startState)
                //     console.log("current", view.state)
                //     console.log("from", view.view.viewport.from)
                //     console.log("to", view.view.viewport.to)
                // }
                // code = view.state.doc.toString();
                // const anchor = view.state.selection.main.anchor;
                // const head = view.state.selection.main.head;
                // cursor = { anchor, head };
                /* line and column
                let cursor = view.state.doc.lineAt(head);
                let line = cursor.number;
                let col = head - cursor.from;
                console.log('line = ' + line + ' col = ' + col);
                */
                if (view.docChanged) callback(view)
            }),
            keymap.of([indentWithTab]),
            checkboxPlugin,
            colorPickerPlugin,
            defaultTheme,
            jsLinterExtension,
            lintGutter(),
        ],
    })
}

If you are unsure how here is some example code (that I used and it worked wonderfully) -> https://github.com/UziTech/eslint-linter-browserify/blob/master/example/script.js