[Feature] Swappable renderer

[NullVoxPopuli]

Based on how much struggle I've been having with the VM latetly:

• Add test for conditional on to try to reproduce ember#20647 glimmerjs/glimmer-vm#1563
• Remove support for Partials glimmerjs/glimmer-vm#1547
• [Quest]: Proper ShadowDOM support #20644
  • [Bug] in-element cannot render into a document-fragment #20643
  • [Bug] declarative ShadowDOM is unable to have content rendered in to it #20642
• [Bug] 3.28 - Conditionally rendering a modifier throws error #20631
• [Bug] Wrong assertion when dragging a text node #20610
• [Bug] Local helpers and modifiers cause memory leaks #20535
• [Bug] vendor.js grows by 52 KB in production minified build in 5.6.0 compared to 5.5.0 #20628

And with the lack of ability for folks to iterate on implementing language improvements: emberjs/rfcs#816 (not due to lack of trying, but due to how the VM is hard to work with / maybe has a lot of baggage)

And with the amount of progressing happening on an alternate renderer:

• compat todos are done: Ember.js compatibility lifeart/glimmer-next#10 (we'll see tho if it works with ember-modifier, ember-resources, and bigger projects)

• faster reactivity technique: Reactivity concept lifeart/glimmer-next#41 (Update-only VM)

• looks like this is a list of remaining stuff: Explore lifeart/glimmer-next#3

  glimmer-next compared with svelte and ember

  https://krausest.github.io/js-framework-benchmark/2024/table_chrome_121.0.6167.85.html#eyJmcmFtZXdvcmtzIjpbImtleWVkL2VtYmVyIiwia2V5ZWQvZ2xpbW1lci0yIiwia2V5ZWQvZ3h0Iiwia2V5ZWQvc3ZlbHRlIl0sImJlbmNobWFya3MiOlsiMDFfcnVuMWsiLCIwMl9yZXBsYWNlMWsiLCIwM191cGRhdGUxMHRoMWtfeDE2IiwiMDRfc2VsZWN0MWsiLCIwNV9zd2FwMWsiLCIwNl9yZW1vdmUtb25lLTFrIiwiMDdfY3JlYXRlMTBrIiwiMDhfY3JlYXRlMWstYWZ0ZXIxa194MiIsIjA5X2NsZWFyMWtfeDgiLCIyMV9yZWFkeS1tZW1vcnkiLCIyMl9ydW4tbWVtb3J5IiwiMjNfdXBkYXRlNS1tZW1vcnkiLCIyNV9ydW4tY2xlYXItbWVtb3J5IiwiMjZfcnVuLTEway1tZW1vcnkiLCIzMV9zdGFydHVwLWNpIiwiMzJfc3RhcnR1cC1idCIsIjMzX3N0YXJ0dXAtbWFpbnRocmVhZGNvc3QiLCIzNF9zdGFydHVwLWludGVyYWN0aXZlIiwiNDFfc2l6ZS11bmNvbXByZXNzZWQiLCI0Ml9zaXplLWNvbXByZXNzZWQiLCI0M19maXJzdC1wYWludCJdLCJkaXNwbGF5TW9kZSI6MX0=

  

  

And with the desire to use Starbeam in the future, tho no one is really working on that as I write this

And with how we don't score whell in https://github.com/krausest/js-framework-benchmark (like it or not, this is how we are judged, so we must play the game)

And since we kinda need to migrate away from a pure-JSON representation of the complied templates so that we can explore more expressive syntax (something glimmer-next is already prepared to enable)

And with the ovelwhelming effort it feels like it would take to merge the 3 repos:

• this one: https://github.com/emberjs/ember.js
• glimmer-vm: https://github.com/glimmerjs/glimmer-vm
• glimmer.js: https://github.com/glimmerjs/glimmer.js
  (which honestly needs to happen anyway)

I've been wondering if we can work out a minimal public/intimate API for completely swapping out glimmer-vm / runtime such that folks can better experiment with improvements to ember.

As a quickly, barely thought out psuedo API, it could look like this, to support what we have today

import { registerRenderer } from '@ember/renderer';
// idk if these are real, but not the point
import { render } from '@glimmer/vm';
import { runtime } from '@glimmer/runtime';

registerRenderer({ render, runtime });

which could allow for someone to easily choose to use glimmer-next without forking ember-source.

import { registerRenderer } from '@ember/renderer';
// idk if these are real, but not the point
import { render, runtime } from 'glimmer-next';

registerRenderer({ render, runtime });

Or could allow someone to work on developing a native renderer for iOS and Android.

import { registerRenderer } from '@ember/renderer';
// idk if these are real, but not the point
import { render, runtime } from 'glimmer-android';

registerRenderer({ render, runtime });

---

One may consider that we have a lot to do, and we don't have enough steam to work on anything like this (like a native renderer).

I think we have people who currently aren't contributing as much, but would if they were able to, so we could enhance our parallel efforts -- widen the pipe, so to speak

---

Note as well, this issue could also be a call-for-help to have someone dedicate a bunch of time to improve the existing glimmer-vm.

[NullVoxPopuli]

Starbeam's vanilla renderer would be a good candidate here as well: starbeamjs/starbeam#152

[NullVoxPopuli]

Another use case: Terminal UI renderers -- similar to Ink https://github.com/vadimdemedes/ink
(I bet we could use way less memory pressure tho)

[NullVoxPopuli]

Looks like the place to implement this is in setupApplicationRegistry here:

https://github.com/emberjs/ember.js/blob/main/packages/%40ember/-internals/glimmer/lib/setup-registry.ts#L41

  registry.register('renderer:-dom', Renderer);

This is called from buildRegistry here:
https://github.com/emberjs/ember.js/blob/main/packages/%40ember/application/index.ts#L226

And that's called from init in the Application's suprer class, Engine, here:
https://github.com/emberjs/ember.js/blob/main/packages/%40ember/engine/index.ts#L335

  init(properties: object | undefined) {
    super.init(properties);
    this.buildRegistry();
  }

And we know application init occurs during boot with the Application class we create in app/app.js/ts.

So, we should be able to override the static buildRegistry and setup our own renderer:-dom.

So now it's a question of how much of Renderer is public API / (though, realistically, probably none of it, and we'd discover what should be public API through this process)

[NullVoxPopuli]

woah, look at all the renderers React has: https://github.com/chentsulin/awesome-react-renderer

there is certainly demand for this.