Improvement ideas

[n-ce]

Hi I think, sonnet is a very ambitious library.
However I feel it's lacking in two departments.

• opinionated styling that fits with the framework (non JS)
• a script handler like jquery
  I think surreal will fit right into the project and ease developers into building sonnet apps faster
  https://github.com/gnat/surreal

[htmujahid]

Hi Animesh,

Thank you for your thoughtful suggestions!

Styling: Since Sonnet uses Vite.js as a foundation, it has great flexibility with styling solutions, ranging from Sass and CSS-in-JS to Tailwind and Bootstrap. This allows developers to choose the option that best fits their needs, whether it's lightweight or more robust.

Utility Methods: You’re right that Sonnet.js currently lacks built-in utility methods for event handling. I’m actively exploring a framework-agnostic approach for this, and I’m looking into how Bootstrap handles similar functionality to make it efficient and flexible. I’ll also take a closer look at Surreal and see if we could create an adapter for Sonnet.js. My goal is to keep Sonnet.js as close to vanilla JavaScript as possible.

Your feedback is valuable, and if you’re interested in contributing further, I’d be happy to discuss it with you. Thank you again for your support and for helping to make Sonnet better!

Warm regards

[n-ce]

My current go to framework is solid because

• Componentizer in the form of JSX
• built-in event handlers
• use only as much as needed (no need to use solidjs for the entire app)

React has generalised a pattern that does not apply everywhere and that is everything as components.
This pattern leads to more code than less most of the times and not all components need a javascript action. They can be purely HTML.

We should be able to have an HTML first app with the framework aiding in development of components.
Vanilla JS can take care of the rest.
Next we tackle the event and dom handling with something like surreal.
I understand the unopinionated styling part and I fully support that. However some examples with different styling options would be satisfying enough.
I am personally taking a look at open-props : https://github.com/argyleink/open-props as the front runner of this examples.

Couple that with HTMX. I think we have an fullstack ecosystem under a single philosophy. I might sound heavily opinionated, but I am open to improvements. At the end of the day we want to build simple, performant, maintainable and close to the platform software. I am excited to build a sonnet project soon!

[htmujahid]

I completely agree with you! Let’s explore some ways to make Sonnet even better.

[n-ce]

Is there not a simple way to start with sonnet-core in a vite vanilla project?

npm create-vite@latest
> vanilla + typescript
npm i @sonnet/core

(hopefully we can have a vite sonnet template in the future if it gets popular)

also I think the template literals are okay for small markup but we do need something more sturdy.
Now you might not like this idea, but I think JSX/TSX is it. Most editors will support it out of the box, and most developers are familiar with the syntax. There is already a compiler and with vite environment this should be possible.

[htmujahid]

npx create-sonnet-app

[htmujahid]

As far as template literal is concerned I am also bit conscious about that not because code completion issue, because this can be acheived using different extensions but I am concerned because of blank spaces in case of formatting.
I am hesitant with jsx just because run time and build time dependency. In case of string, it get injected to innerHtml but in case of jsx there is compiler needed for build and runtime

[n-ce]

npx create-sonnet-app

I can't find the vite config file in this case.

I am hesitant with jsx just because run time and build time dependency. In case of string, it get injected to innerHtml but in case of jsx there is compiler needed for build and runtime

Can you take a look at how solid does it? It probably uses a vite plugin, nothing is stopping us from doing something similar vite-plugin-sonnet.

[htmujahid]

you can create vite.config.js file as well if you need some customization for basic configuration you don't need vite.config.js file.
I'm looking into it how solid does this stuff, we can create a separate package for that. @sonnetjs/jsx
https://krausest.github.io/js-framework-benchmark/2024/table_chrome_130.0.6723.58.html the reason why sonnet is out performing in benchmarking is that it is not using any compiler it is just injecting html the way it is. So I am looking for something which does not have any impact on runtime performance

[n-ce]

you can create vite.config.js file as well if you need some customization for basic configuration you don't need vite.config.js file.

Thanks! I totally forgot usually we dont have a config file in vite-vanilla.

So I am looking for something which does not have any impact on runtime performance

If we don't try we won't know.

[n-ce]

There is also this library for some inspiration https://nanojsx.io it also comes with a componentizer.