textlint / editor

textlint editor project.
https://textlint-editor.netlify.app/
MIT License
134 stars 8 forks source link

Any plans to support ESM on textlint-script-compiler? #84

Closed r7kamura closed 8 months ago

r7kamura commented 8 months ago

As a background, I am currently trying to combine monaco-editor with textlint so that users can easily try textlint in their browsers. In the meantime, I am hoping to create something that works as an Chrome extension, as follows:

image

It seems that textlint's ESM support is gradually progressing these days. So, my current interest on textlint/editor is whether textlint-script-compiler has any plans to support a feature that would generate code that could be read from ESM. Currently, I think it outputs code that contains require, so it can't be used from ESM, right?

Most Chrome extensions these days seem to be generated by Vite, which by default tries to create ESM packages, so I am happy to have the compiled code available from ESM. Of course, it is still possible to use code compiled by textlinter-script-compiler by adding a workaround to switch the package from ESM to CJS for this issue.


P.S. I simply wanted to ask the question to determine how to structure my project at thiis time, while communicating that there is such a motivation about textlint-script-compiler. If you have no particular plans, feel free to say "No" and close this issue.

azu commented 8 months ago

textlint-script-compiler has any plans to support a feature that would generate code that could be read from ESM

@textlint/script-compiler generate a Web Worker code.

const worker = new Worker("./worker.js");

I thought Web Worker had nothing to do with CJS and ESM, but you want to load it with new Worker(src, { type: "module" })?

I think it outputs code that contains require, so it can't be used from ESM, right?

It is possible that some textlint rule is using a dynamic require. @textlint/script-compiler(webpack) cannot transpile dynamic require, it is possible that the require is left in the output code. In other words, it is possible that a build will output code that does not work.

What is the rule that causes the error? It may be a rule that does not work in any browser.

r7kamura commented 8 months ago

I see, thanks for the detailed explanation.

As a first example, I tried to run textlint-script-compiler in my ESM project only with https://github.com/textlint-ja/textlint-rule-no-dropping-the-ra rule, and the output file seemed to contain require.

I'm not sure how the compiler works, but this kind of require is only included when compiling with an ESM project:

image

So, you mean that there is no room for any require at textlint side, and textlint-rule-no-dropping-the-ra's implementation contains some dynamic imports, right? If so, then this issue seems resolved, as it is not a problem on the compiler side.

azu commented 8 months ago

fmm, This output is unexpected.

I've created a example repo, but these output does not include require("@textlint/textlint-plugin-markdown"). (This require function will be inlined by @textlint/script-compiler). https://github.com/azu/textlint-script-compiler-textlint-rule-no-dropping-the-ra

azu commented 8 months ago

I figure out.

If package.json has "type": "module", the output code is broken,

I do not understand the reason.

r7kamura commented 8 months ago

Yes, that's it. So, as a workaround, I have temporarily switched my project from ESM to CJS by removing the "type": "module" part for this issue. I'm wondering if maybe webpack sees this part and changes the way it compiles something 🤔

azu commented 8 months ago

https://github.com/textlint/editor/releases/tag/v0.16.2 will fix it. please try it

r7kamura commented 8 months ago

I tried v0.16.2 and confirmed that it works well with ESM. Thank you!