Back inside my editor, I'm going to find that HTML string that we had put together to no longer are
we going to just directly try to inject some code into the string.
Instead, we're going to communicate all of our bundled code through that post message thing.
So I'm going to remove that.
I'm going to replace it with a little bit more HTML than what we had before inside this HTML, we're
going to show kind of a skeleton of an HTML document.
We're also going to write in a little bit of code inside there to start listening for events or messages
coming from the parent document.
If we ever receive an event from the parent document, we're going to assume that there are some kind
of code inside there.
We're then going to take that code and try to execute it all.
The code.
We're about to write inside of this string is going to be well, there's going to be a pretty good amount
of it.
We're going to eventually start to extract all this stuff into separate helper files.
Just better organize our project in general.
OK, so to get started, I'm going to put in an HTML element, was it off?
I'm going to put in a head.
I'll put in a body.
I'm going to put in a div with an ID of root.
We'll come back and discuss why we're adding that in in just a little bit.
Well, just to tell you right away, this is really just a convenience thing.
Remember, at some point in time, we probably want to allow our users to write in real components and
render them very easily.
So we're going to put this in just to give all of our users of our application some place to easily
rendering components after they've created them.
We'll make use of that in just a little bit.
I just want to add it in right away.
Well, then put in a script tag, and this is where we are going to set up some event listeners and
listen for a message coming from the parent document and hopefully that message might contain some code
inside of it.
So I'm going to add in window dot, add event listener, we're going to listen for a message.
We're going to receive the event.
I'm going to put in my ear function and immediately add in false as that third argument.
So inside this event object, this is an event object that is coming from our parent document.
There's going to be inside there, hopefully some data property.
Remember, we just saw that in the last video, all the information communicated with this event or
like the data that we're trying to pass along is inside of event data.
So we're going to assume that event data contains the code that we're trying to execute right now.
Let's just do a console log of event data.
OK, so that's all we need for right now.
After that, I'm going to go down to my iFrame, I'm going to add in a ref to it, so we're going to
get a reference to this iFrame then whenever we do our bundling process and get some new code out.
So here's our bundling process.
Whenever this bundling process is complete, rather than updating some code piece of states, we're
going to take that reference to the iFrame and use it to emit a message down into the iFrame.
So I'm going to first go up to the very top of the file, I'm going to add in a new ref that I'll call
iFrame.
I'm going to markets type as any right now.
I'm then going to make sure that I assign that ref to my iFrame element.
iFrame say Raif is Efraim.
And then again, right after our bundling process is complete, rather than updating any code piece
of states, we don't really care about that anymore because we're not going to use that code value at
all.
We were only using it before to print out the bundle code on the screen and all that stuff not really
necessary anymore.
I'm going to instead take a look at iframe that current.
That's going to be our iFrame element.
I'm going to attempt to post a message to it, so we're going to do a.
Post message.
We're going to provide all the code that was just created, so that's going to be a result that output
files at zero text.
And then again, the second argument here is going to be a star.
OK, let's save this.
I'm going to flip back over and again, we'll do a very quick test.
I'm going to add in the state council log of one, two, three.
And then submit, once I submit we're going to bundle a coat, we're going to emit an event down into
that iframe, our iFrame should receive that event.
That event should contain all of our code.
And right now our iFrame is set up to just log that code so we should see the bundled result of council
log one, two, three unclogged over here.
They'll submit.
And I made a very small mistake here.
I forgot one little line of code we got iframe current we need iframe current content window.
My mistake.
I apologize for that.
So I frame current content window post message.
Let's try that again.
Submit a there we go.
So this is a council log coming from inside the iFrame, and without a doubt, we have received this
code that we now want to somehow execute.
So to execute this code, we're going to fall back on that same technique that we took a look at a little
bit ago.
All we have to do is eval that code.
That's it.
That's all we have to do.
We're going to eval it.
That's going to cause that code to be executed.
We're going to see some result printed up.
We're going to see the result of it being executed.
Let's add that very last step in.
It's going to find our big snippet right here, rather than console logging the code.
I'm going to instead eval event data.
We'll eventually come back and wrap this with some try catches and some other stuff to better handle
errors, but right now this will be good enough.
OK, refresh on the log, one, two, three, an estimate, and there is our control log.
If I click on or this link over here will be taken to the execution context, essentially saying we
see that link right there, it is a execution or eval result from Evalyn, this code inside of our iFrame.
So this definitely looks good, means everything is working as expected.
So now we can start to do some really interesting things first, let's make sure that we can still or
that we can actually import react now without getting some kind of error message.
I'm going to import react, Dom.
From React, Dom, I'll just do a console log of React Dom to remember before when we were trying to
pass code down through that attribute, this code right here caused us to get a really nasty error message.
This will be a real check to make sure that everything is now working as expected by Simit.
There's a concern, logoff, react, um, so we can now use react on to a render components if we write
out a full component side of your let's try that out in the next video and make sure that we can actually
put this little kind of not so great code editor through its paces and make sure that it works, as
we would expect in creating stuff like reactor components and whatnot.