Ayobami Ogundiran 👋

I really appreciate your input. Okay, that is a great point. Thank for the input.

Yet, another implementation details.

Regular html is not a reusable component but this one is. You can't encapsulate regular html, you can encapsulate this one.

Then it is not html.

It is built on html which is a core part of the web making it a web component.

It is a web component as a concept.

If it can do what we have here, it is a web component as far as I am concerned.

I know what it means as someone who has worked with it. I used it knowing fully well people using web component would want to disagree.

All arguments I have received are all about implementation details but not the real concepts.

If it works directly in the browser, it is a web component.

I followed this JSX specifications to make it work.

facebook.github.io/jsx/

Though it uses web standards, it operates like JSX.

Maybe we'll all know what to call it later. My focus now is to make it the best of both worlds — web component and JSX.

Or is it qualified to be a web component?

It output html strings that land in the DOM and are re-renderable just like in JSX and probably with the most efficient state management for the frontend.

It meets all JSX criteria.

Or what is the standard definition of JSX?

You're right but I believe my approach will be baked into browsers in the future just like jQuery once it proves its superiority.

But for now, you're right.

It works everywhere even on the servers or any platform that uses JavaScript/Typescript because it has no syntax of it own.

It uses vanilla JavaScript.

That means, it is vanilla JavaScript. Since Angular and Vue are JavaScript frameworks, it works with them.

I will create demos with them soon.

No, this JSX is different. What we know currently as the web component is way "hackier" than this.

Don't forget, we have to go with the current implementation details of web component because it was the only possible way to do

Now, I have built JSX interpreter that works in browsers.

So there is another way to do it to achieve all the functionalities of the web component in browsers and servers

I see your point.

You're saying the custom component won't reflect in the DOM.

But judging from the fundamental description from the MDN, web component is about reusability, encapsulation and co.

What you referenced is the current implementation details of web component.

Koras.jsx is another.

But it is an encapsulated, reusable component just like it is described here.

You can use it like <Articles articles=${article} />. Isn't this a custom element?

It works directly in browsers with *no build step*.

The web component we have today is just an implementation of this description.

It doesn't, it leverages the DOM to use JSX.

I am working on its docs but you can check the stuff I built with it.

Blog —
Demo: codingnninja.github.io/sapablog

source: github.com/codingnninja...

Music player —
Demo: codingnninja.github.io/lovePlay

source: github.com/codingnninja...

"Web Components are a set of web standards that allow developers to create reusable, encapsulated, and self-contained custom elements for web apps"

If that is true, can we say koras.jsx is a web component? It would probably outlive your *web Component* 💯

So JavaScripty ✅

We can memoize components in koras.jsx.

Any flaw here?

React doesn't render itself. You make it so 😂

Even your job becomes enjoyable when it is all this and no one needs to push you to do what you love to do.

The secret to doing a great job is to love what you do.

Programming is fun if you don't make it about the code.

It is about the lives to change, money to make, relationships to form, pleasure to experience, kids to protect and people to educate.

Everything becomes fun 🤩

For example,

// manage a and b state
function add(a, b) {
return a + b;
}

// first state
const five = add(2, 3);
// another state
const four = add(2, 2);

The function helps us manage the changes — the state of a and b — to get expected result.

When you understand better, you will realize programming is basically state management 🤩.

I mean programming is about processing data passed to your application.

It is determining what changes, setting suitable environment and co., making sure it syncs with the rest of the app without issues

It is fun rendering and re-rendering JSX with vanilla JavaScript using koras.jsx. 🤩