ECMAScript Module Support

[paulrosen]

I have the following in package.json:

"@webcoder49/code-input": "2.2.1",

I am trying to import it and have tried each of the following:

import CodeInput from "@webcoder49/code-input";
import {CodeInput} from "@webcoder49/code-input/code-input";
import codeInput from "@webcoder49/code-input/code-input";
import {codeInput} from "@webcoder49/code-input/code-input";
import {CodeInput} from "@webcoder49/code-input/code-input";
import {CodeInput, templates, registerTemplate} from "@webcoder49/code-input/code-input";

and some other variations.

The last version doesn't give me any errors in WebStorm's editor, but gives this when I run:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@webcoder49_code-input_code-input.js?v=0ada030b' does not provide an export named 'default'

Is there a complete example somewhere of how to use this in a vite project?

[paulrosen]

P.S. I notice that the tags in this repo go up to v2.5.0 but the latest version published to npm is 2.2.1.

[WebCoder49]

Importing issues

Does import "@webcoder49/code-input" (no from) then logging the codeInput object work?

code-input right now is a traditional JavaScript file which assigns all the library as an object to a global variable called codeInput; the plugins assign objects inside codeInput.plugins. However, when importing files in JavaScript one now tends to use the more modern but less well-supported ECMAScript Module or CommonJS Module format, which allows selective importing of objects, public/private encapsulation, etc., which code-input does not yet support (although there is a list of its intended public objects in its d.ts file). The example above may work for importing the vanilla JS.

I was a young teenager when I started this library and did not think about modular JS / Node; also I have tended to use vanilla JS rather than frameworks in the past. Funnily enough, now I am somewhat in a situation like yours, writing a larger package-installer-automated project so I'm getting more prepared to solve this!

NPM

Yes, I should really get the NPM builds working correctly as they're failing right now (#121). If you are OK with installing directly from the GitHub releases, you could use the following in your package.json, which imports the correct files with Yarn for me.

  "dependencies": {
    "code-input": "https://github.com/WebCoder49/code-input#v2.4.0",

[paulrosen]

That gives me ReferenceError: codeInput is not defined.

I know what you mean about the different JavaScript formats. It drives me crazy. I don't know the "right" way to do this, but I have a library that can be imported as both a script tag and through npm that you're welcome to take ideas from: https://github.com/paulrosen/abcjs

Also, you can see my project that I'm using to evaluate this here: https://github.com/paulrosen/abcjs-syntax-highlighting-example

The place that I'm stuck is in https://github.com/paulrosen/abcjs-syntax-highlighting-example/blob/main/src/components/AbcEditor.vue

I think it should work if I uncomment out the few lines.

[WebCoder49]

Thanks for this, @paulrosen! I'm looking into it.

[WebCoder49]

Oh! You're using TypeScript!

[paulrosen]

Yes, typescript/Vue/vite.

I got it to work, sort of. I added your library as a regular script tag. I get errors in both the IDE and the console because Vue doesn't recognize code-input and I had to put in a setTimeout because there seems to be a delay in getting the web component initialized.

But at least I can continue evaluating for the moment.

This is an awesome project and something I've wanted for years.

[WebCoder49]

That does feel very hacky so I'll look for a better solution.

I've found this but it's unfortunately currently proprietary: https://github.com/THEOplayer/documentation/blob/main/src/components/CodeInput/index.tsx. @MattiasBuelens, sorry for disturbing you but please could you let us know if you're willing/able to offer that largely boilerplate file under CC0 or MIT/Expat (compatible with this library's license, and MIT/Expat appears to be your favourite license) and if MIT/Expat provide the attribution you would like?

[WebCoder49]

Your setTimeout shouldn't be necessary with code-input≥v2.3.0, I believe: #108.

[WebCoder49]

@paulrosen you can now get the latest version of code-input (2.5.0) on NPM!

[paulrosen]

That uses require, which isn't available in my framework.

[WebCoder49]

I might be wrong (I don't have an environment to test it right now), but I believe the variable = require("path/to/file.js") lines could be replaced by import "path/to/file.js"? However, the bindings being read-only may cause issues for plugin importing.