rfcs VS jsx

Navigating to URLs with #hash-targets in them is not supported by most single-page-app frameworks due to the async rendering nature of modern web apps -- the browser can't scroll to a #hash-target on page load / transition because the element hasn't rendered yet. There is an issue about this for Ember here on the RFCs repo.

Ember.js development doesn’t stagnate. Progress is already being made for new improvements to the current component model. The RFC for first-class component templates has been accepted and merged in 2022 and will provide new benefits to Ember users. By first adopting Glimmer components, we’re prepared for what’s coming next.

yeah, I think that's being designed (for runtime).We have build-time efforts / validation already via official typescript support https://github.com/emberjs/rfcs/pull/748 with Glint: https://typed-ember.gitbook.io/glint/

During the 4.x series, we aim to finish the work to officially support TypeScript.

The latest versions of Ember.js (Octane) have built-in decorator support and they're discussed in the RFC:

https://github.com/emberjs/rfcs/blob/master/text/0408-decora...

https://guides.emberjs.com/release/in-depth-topics/native-cl...

At ok, legit. that's like a modifier from ember.

have you seen: https://github.com/emberjs/rfcs/pull/779? I think that addresses the "where does this come from?" in completion.

What I like about Ember is that it gives a lot of rigid structure that, at least at one point, made it comparatively easy to work on multiple Ember based projects and be productive sooner.

As you've pointed out, a problem with that project is that there's a ton of intimate knowledge for how things work under the hood or why things are the way they are. They also seem to oscillate between opting for simplicity and opting for complexity and magic.

One example would be the latest version of Ember which doesn't even ship with `@ember/render-modifiers` by default despite how everyone will end up installing it anyway because it's necessary; they were talking about providing an alternative based on the actor model, despite modifiers being far easier to understand, somehow they are still wrong:

> Either way, we recommend using these modifiers with caution. They are very useful for quickly bridging the gap between classic components and Glimmer components, but they are still generally an anti-pattern.

https://github.com/emberjs/ember-render-modifiers

Why on earth did they reinvent components and ship them without providing the supposedly correct way of interacting with their lifecycle? You actually have to install a separate add-on to develop a production-ready app with Ember, which completely flies in the face of the idea that you can run `ember new` and have pretty much everything you need.

Strangely (an thankfully), the RFC for the needlessly complicated alternative for lifecycle interaction is effectively stalled:

https://github.com/emberjs/rfcs/pull/567

By their own language, the only official way to interact with component/element lifecycle is an antipattern.

/rant

> Where is jsx defined, as a language?

https://facebook.github.io/jsx/ is the primary home.

> are there multiple transpiler implementations?

Yes. Off the top of my head:

Babel: https://babeljs.io/docs/babel-plugin-transform-react-jsx

Typescript: https://www.typescriptlang.org/docs/handbook/jsx.html

esbuild: https://esbuild.github.io/content-types/#jsx

> is it standardized at all?

In terms of well documented, yes. In terms of a TC-39 standard accepted as a part of JS and intended for browsers to consume? No. Unless you count how much it borrows from E4X [0] which was an optional part of the "lost version" of JS that was EcmaScript 4, then "sort of".

[0] https://en.wikipedia.org/wiki/ECMAScript_for_XML

Svelte syntax? Yes, there is upcoming initiative JSX 2.0 which includes shorthands like that. However, have no idea whether it will be released any time soon. So let's say "this is part of React/JSX 1.0" (shrugging)

Inherent support for JSX in the language itself

JavaScript ＋ HTML（DOM）＝　JSX

FWIW, the className prop is a React thing not a JSX thing. Other libraries which use JSX will happily accept a plain class prop. The React limitation is abstraction leakage: props are not attributes, they map to DOM properties.

But to the point that JSX is a DSL, that limitation is specifically because React itself is very tightly coupled to DOM semantics… but JSX explicitly has no built in semantics[1].

1: First sentence of https://facebook.github.io/jsx/ - “JSX is an XML-like syntax extension to ECMAScript without any defined semantics.”

JSX stands for 'JavaScript XML' and is a syntax extension for JavaScript. It is used to create DOM elements that are then rendered in the React DOM. Although it looks like HTML, it is actually an XML-like syntax specifically written for use in React. Interestingly, JSX is not valid JavaScript either. JSX needs to be compiled by a tool like Babel to be translated into regular JavaScript that a browser can understand. Put simply, JSX describes what the UI should look like, and React takes care of properly rendering it.

Alternatively, you can use JSX syntax (like with React), but then you need build-tools.

Note: For React component files (JSX) we'll use .tsx to maintain JSX support and for non React files we'll use the .ts file extension. However, if you want you could still use .ts file extension for React components without any problem.

I’m concerned that you’re falling into the same trap here with integrating your own variant of JSX, and mulling over adding more things like hyphens in unquoted object literal keys.

JSX is popular enough that it’s safe, ECMAScript isn’t going to break it, but your alterations to JSX are already significantly incompatible: you have being equivalent to JSX("input", {"class": "search"}, null), but the JSX everyone else is using has that equivalent to JSX(input.search, {}, null). I’m not certain if your JSX syntax is supposed to be able to be used with React code or anything else that uses JSX syntax, but if yes then it’ll be broken in a significant number of cases so that it’s worse than useless, and if no, well, it’s going to be misleading, and what if JSX did get merged into ECMAScript in some form? Then you’d be incompatible with ECMAScript again.

Same deal with hyphens in unquoted object literal keys: it’s not part of ECMAScript now, but just because it’d be a syntax error now doesn’t mean it always will be. Decorators in TypeScript are a good example of things going badly wrong even when an extremely popular project is involved.

I say: if you want to go JavaScript, go JavaScript, maaaaaybe plus standard JSX conforming with <https://facebook.github.io/jsx/>, and no further. Even if what you do is obviously superior, &c. &c. I’d apply the same reasoning on your fork of CSS: you introduced it for a good reason back then, but now it’s just friction, even if it’s a little better in a vacuum (and maybe it is in parts, maybe it isn’t in other parts).