Overall Enhancements

[zodiacfireworks]

Hi!

I have been working on some enhancements for the IDE and I would like to share it :smile_cat:

Check a demonstrative video at Loom There is also a live version here

New Functionalities :rocket:

• ✅ Project management: Create, Update, Delete
• ✅ Grammar Import: On project creation you can provide a .lark file from the web and the grammar will be integrated to the project.
• ✅ Grammar export: After you have completed your grammar, you can download it.
• ✅ Test case management: Create, Update, Delete, Execute (one by one, and all at once)

UI Improvements :art:

• ✅ Support for dark and ligth themes
• ✅ Mobile friendly layout
• ✅ Enhance accessibility

Internal improvements :robot:

• ✅ Upgrade to Svelte 5 (and all dependencies)
• ✅ Update config files
  • Update config for ESLint and Pretier
  • Add .editorconfig to standardize coding styles across editors.
  • Add .nvmrc to specify Node.js version v22.16.0 for consistent development environments.
• ✅ Update github-pages.yml (from olf main.yml)
• ✅ Add Tailwind CSS for consistent styling.
• ✅ Add Storybook for component testing
• ✅ Add Playwright for end-to-end testing
• ✅ Add pre-commit hook in .husky/pre-commit to enforce code formatting, linting, and type checking before commits.
• ✅ Add unit tests
• ✅ Add e2e tests

Thank you for reviewing! :pray:

[erezsh]

Hi!

Can you explain why you think codemirrror would be an improvement over monaco?

Also

Reactive integration with Svelte components

what does this refer to?

You ended up committing a lot of unrelated files, where you only changed the white-space. It makes is really hard to look at the diff and understand what changed and what didn't.

[zodiacfireworks]

Hi!

You ended up committing a lot of unrelated files, where you only changed the white-space. It makes is really hard to look at the diff and understand what changed and what didn't.

I have undo all the changes and apply them again in small commits to facilitate review and tracking, there are some commit with a lot of changes due the application of npm format but theu only introduce those format changes not functionality.

I hope this make the review easier.

Can you explain why you think codemirrror would be an improvement over monaco?

Monaco editor is great and have a lot of features, but many of them are not required for this use case. On the other hand CodeMirror is small, plugable and is more relaible for web environments.

For the moment I have reverted that change and preserve the Monaco editor.

Reactive integration with Svelte components

what does this refer to?

It was a mistake :sweat_smile: