Add typescript, vite and vitest

[NansPellicari]

Add typescript to the project.
Change webpack to vite for build.
Use vitest and rewrite test.
Depends on #286

[L-Zuluaga]

Hi, I really appreciate your contribution—great job on this! 🎉
I’ve left a few comments for review.

Additionally, I wanted to confirm, have you tested whether Webpack-based Editor.js projects using the plugin remain unaffected? 🤔
Since the previous setup relied on Webpack’s UMD output, I just want to make sure the transition doesn’t introduce compatibility issues for users relying on CommonJS or direct browser usage, also ensure the commits are correctly signed.

Looking forward to your update!

[L-Zuluaga]

file lacks of an EOL

[L-Zuluaga]

file lacks of an EOL

[L-Zuluaga]

file lacks of an EOL

[NansPellicari]

Ah yes thanks, sorry about that, I'll manage that tomorrow

[NansPellicari]

Hi @L-Zuluaga,
I've just pushed to fix it.
I took advantage of this fix to add eslint-config-prettier plugin on the project and add vscode settings samples and recommanded extensions to help for application of contribution guidelines.
Tell me if it's ok for you!

[NansPellicari]

Hi, I really appreciate your contribution—great job on this! 🎉 I’ve left a few comments for review.

Additionally, I wanted to confirm, have you tested whether Webpack-based Editor.js projects using the plugin remain unaffected? 🤔 Since the previous setup relied on Webpack’s UMD output, I just want to make sure the transition doesn’t introduce compatibility issues for users relying on CommonJS or direct browser usage, also ensure the commits are correctly signed.

Looking forward to your update!

Arf no you're right, I didn't test it on a webpack project or direct browser usage, i'm not sure about compatibility.
I'll test it next week and keep you in touch!

[NansPellicari]

Hi @L-Zuluaga,
I've pushed again this branch after testting the build with vite and importation of the library from browser and as module.

point 1

I've favored to create 2 build files :

• the first for UMD output for CDN and to not break the current process, I keep the built filename as it was dist/bundle.js 'cause I assumed it will not break the export to the CDN servers
• the second for ESM output to comply to the modern official module system for Javascript

You can look at the package.json to see how this 2 files are managed for exports.

What is important to noticed is the combined filesize for the dist folder is lower than the previous webpack build:

New:

Old:

point 2

You can noticed that i've updated the node version on the CI to 18.x to make new added dependencies (for tests) working on CI
About that, it should not be a good practice to reflect this in the package.json ? Like:

"engines" : { 
    "node" : ">=18.0.0"
  }

point 3

I can't change the target branch for merge, so github shows 2 commits in this MR, but it will not be the case if the target branch is v2.0

[miguelnietoa]

Hey @NansPellicari, thanks for contributing. I just left a few comments, could you review them?

[miguelnietoa]

Shouldn't we add index.html here to make sure it's not included in the bundle?

[miguelnietoa]

Could we remove this comment? or place it before const editor = new EditorJS({ and make sure it's written in English!

[miguelnietoa]

Kindly add engines: nodejs >= 18 as you suggested in the comment

"engines" : { 
  "node" : ">=18.0.0"
}

[miguelnietoa]

Hi @NansPellicari
I noticed some unexpected behavior in the plugin that seems to have been introduced with the changes in PR #286. Could you please take a closer look when you get a chance?

Here's a video:

2025-04-17.13-09-20.mp4