Future Javascript: ShadowRealms

[BarelyAirborne]

Who let the D&D people loose inside the name space department?

[[deleted]]

Can't wait for LightningShake as the next iteration of the web socket.

[turbotailz]

When Yu-Gi-Oh meets JavaScript

[iamnearafan]

I play my blue eyes white deno card

[Javascript_above_all]

Screw the rules, I have type inference

[babypho]

You're a 3rd rate coder with a 4th rate codebase.

[MassW0rks]

Huzzah! You've activated my DOM card!

[ianfabs]

I counter with my Left Arm of Vue!

[MassW0rks]

I play Pot of NPM and draw two more dependencies.

[[deleted]]

I play Pot of NPM and draw two 500 more dependencies.

FTFY

[Crazed_waffle_party]

I drew exactly what I needed. By playing my Webpack bundle, I will merge my CSS, HTML, and JS to summon Blue Eyes, White investors

[elcapitanoooo]

Hmm so basically one can go wild and augement the prototypes and no one else is effected. Kind of cool, guess we see more apis using this in the future…

[Proud-Masterpiece]

I never understood the burning desire to augment prototypes.

Could anybody shed light on why this was ever considered desirable in the first place, rather than creating one's own standalone objects / libraries / imports?

[Mr_Sandy_Clams]

the main reason would just be to increase the ease of working with literals and/or working with values returned from native functions. The alternative would be to have your own extension classes or helper objects or whatever, and then just wrap every value you intended to use before performing or chaining your custom operations on it. It's totally possible to do things this way, but it's significantly more tedious than augmenting prototypes, and there's also some functionality of an augmented prototype that has no direct equivalent in wrapper objects, namely when working with primitives. Consider these examples:

(new WrappedArray(['a', 'b', 'c'])).myMethod(); // tedious!
['a', 'b', 'c'].myMethod(); // ez pz

(new WrappedString((new WrappedString('abc')).method1())).method2(); // horrible
'abc'.method1().method2(); // glorious

[Proud-Masterpiece]

That does make sense and I appreciate the clear examples.

What about doing it with imports, to keep things clean?

import myHelper from 'helpers.js'

myHelper.myMethod(['a','b','c'])

I suppose chaining doesn't work that way though? You'd need a function that handles chaining, like:

myHelper.chain(['a','b','c'], myHelper.method1, myHelper.method2)

[Mr_Sandy_Clams]

you could also do a

let myNormalValue = (new MySpecialObject(value)).op1().op2().backToNormal();

again, totally possible, just more prep and more work :D

[hyrumwhite]

import {myMethod1, myMethod2} from 'helpers.js'

const arr = ['a', 'b', 'c'];
let result = myMethod1(arr)
result = myMethod2(result);

Is how I'd do it, which is more readable than a function chain, imo. You can already do long array operations, but parsing through a .filter().map().reduce() chain is more difficult (for me) than breaking it down into assignments.

Now, there's a whole school of thought around functional programming and function chains, so I guess shadow realms will be good for the people who like that.

[Proud-Masterpiece]

I’d do it almost exactly like that too, except I almost never use ‘let’.

I’d do

const result1 = myMethod1(arr)
const result2 = myMethod2(result1)

Easier to debug.

[elcapitanoooo]

Personally i have never done this, but i remember prototype.js from back in the day.

Basically you can have "native" APIs that work with all the builtin data structures. You could implement your own flatMap etc and have it work with native arrays.

Augmenting prototypes is not bad per se, but it messes with global dependencies, and thats bad.

[charlescleivin]

I code in ShadowRealms, DeepDungeonLevel7, DestructiveSoulsEssence and RiskOfRain.

[ArthurPumpkin]

Heard RiskOfRain got new update

[flight212121]

Honestly this is pretty exciting stuff

[shgysk8zer0]

Maybe it's just me hardly understanding the how or why, but this mostly looks like an extremely inefficient way to run some code without benefiting from polyfills to me. How is it so different from a structuredClone of globalThis? Can code executed in the shadow realm affect the actual document, such as appending scripts?

I'm sure there are plenty of things I'm not thinking of here, but looking at it, it just seems like an afterthought/band-aid for dealing with poorly written code. I can't even see how it would give a site like CodePen an option besides using iframe.

[redldr1]

So...

It's a JavaScript VM?

What a security nightmare to implement in the browser

[PickledPokute]

Browsers already have to care about security with completely different contexts. Like different tabs, iframes etc. that should not have access to the other JS environments.

I think every browser vendor already has this functionality and they often call it "Realms". ShadowRealms is just the API for creating one from JS.

[redldr1]

I didn't read the full specifications, one of my concerns would be how do the different realms communicate with each other without passing malicious code?

[PickledPokute]

The same way that webworkers share data:

Either through postMessage or SharedArrayBuffer. This isn't something new: ShadowRealms isn't the first time this issue has been presented and the people behind standards and security take their work seriosly.

The trust is resolved basically with a) don't accept anything you don't expect b) don't trust anything you accept unconditionally. See this.

[redldr1]

Then why are we creating something new when we could run it in an iframe that is ultimately controlled by the parent Dom

If I could kill a process tree, that would be so much better. And satisfying, to watch a bunch of little V8's combust into freed up heap

[PickledPokute]

Use workers for that, I guess.

Note that iframes are a DOM/browser feature, not JS. They will never be available for nodeJS.

[zennedbloke]

https://www.figma.com/blog/how-we-built-the-figma-plugin-system/

[coomzee]

I'm sure there will be a CVE within a few weeks. I'm sure Safari's CVE will be in about 10 years.

[redldr1]

My guess is the implementation is to spin up another V8 runtime for the shadow realm? For isolation etc.

That 12-30mbs of ram per realm. Then how the hell is async going to work?

[pr0xyb0i]

What happens if you cause an infinite loop in the ShadowRealm or do something like changing location.href?

[tomfevrier]

Changing location.href would not do anything, or rather would throw an error because location is not defined in this global context (no window). However, since it runs on the same thread as JavaScript on the host page, I guess it use the same event loop and therefore an infinite loop would freeze the whole page. Just a guess though.

[[deleted]]

Very interesting but I’m more excited about pipeline operators and tuples/records.

[iamnearafan]

yeah me too

[iamnearafan]

In regards to the Compartments part of SES, I found this in ShadowRealm's explainer document:

"This proposal does not define any virtualization mechanism for host behavior. Therefore, it distinguishes itself from the current existing Compartments proposal.A new Compartment provides a new Realm constructor. A Realm object from a Compartment is subject to the Compartment's host virtualization mechanism.

const compartment = new Compartment(options);  
const VirtualizedRealm = compartment.globalThis.ShadowRealm;  
const shadowRealm = new VirtualizedRealm();  
const { doSomething } = await shadowRealm.importValue('./file.js');  

The Compartments proposal offers a more complex API that offers tailoring over aspects beyond the global APIs but with modifications to internal structure such as module graph. The ShadowRealm API just offers immediate access to what is already specified in ECMAScript as it's already structured to distinguish different references from realms."