We've now hit a pretty major checkpoint inside of reapplication, we've got an excellent code editor
put together.
We have the ability to take the code out of that ED, bundle it executed and eventually show it inside
of an iFrame somewhere down here.
So now we're going to start to do, as I've kind of long hinted at, but really been putting off a little
bit of code cleanup right now.
Our index DOT TSX file, the app component in particular, has a tremendous amount of code inside of
it that should probably not be inside of here.
So all this stuff about maybe bundling all this stuff around, generating some HTML and showing it inside
that iframe, that's all stuff that we should probably extract into some other location inside of our
project.
Let's first begin this big refactor by creating a new prevue component.
This Prevue component will be responsible for receiving some bundled code and then it will show that
iframe somewhere down on the screen.
So somewhere down here which are bundled code inside there and execute it.
OK, so to get started I'm going to find my components directory, create a new file inside there called
Prevue.
That's right away.
I know that I want to create some component called something like Prevue.
I'm going to export it.
And we can start thinking about the different props that preview is going to receive.
Well, without a doubt we probably won't preview to probably just receive some bundled code and then
just take that code, throw it into the iFrame and execute it.
So I'm going to define an interface that's going to define all the props that preview is going to receive.
I'll do interface review props.
And I'm going to say that this is going to receive some code as a string.
I'll then annotate the type of our preview component.
So once again.
Functional component angle brackets, preview ROPS.
We can then receive.
And then inside of here right now, we'll just show essentially an empty iFrame.
We'll come back and add in a lot more stuff to that iframe essentially all the stuff we have currently
inside TSX file.
But first, let's just do a little bit of copy paste or cut and paste from our app component over here
to start moving a couple of different things over.
So first, back inside of index tsks I'm going to go down and find that big old HTML snippet that we
currently have inside their is that big old bit of HTML.
I'm going to take this entire thing.
I'm going to cut it.
Go over to our preview TSX file and then I can really paste it anywhere inside of here, I might decide
to just put it right above the component itself.
They will eventually make use of that snippet and push it into our iFrame.
Let's continue doing a little bit more cut and paste to back inside of Index TSX.
The next thing I would like to do is find you might recall we've got that ref right here.
Or the Efrem right there.
I want to move that ref over so I'll do a cut.
And then a paste into our component.
We're getting an air around USRAP, let's make sure that we import USRAP at the very top.
OK, that's good.
Next up, we need to make sure that whenever we receive some new code inside of that Prevue component,
we push it down into our iFrame.
Remember right now, inside of unclick, whenever we do that bundling stuff, we set that HTML inside
the iFrame by directly assigning the SC property.
And this is what allowed us to kind of reset the contents of that frame.
So we don't really have access to our frame anymore inside of our app component.
So I'm going to cut that out.
Go over to a preview and then inside of here, I'm going to add in a use effect.
So we're going to say that any time that we get some new code, so that is going to go into our dependency
list, I want to take a look at our iFrame.
I want to update the property and reset the HTML inside their.
Then right away, once again, we're getting some air around U.S. fact.
I'll go up to the top, make sure I import use effect.
OK, so that's only going to reset the iFrame, but we do need to make sure that we eventually remember
we need to emit or kind of post a message into that frame.
So our code for that is back inside of index dot to go right after where we were bundling all of our
code.
I'm going to take all the stuff about posting that message, we're going to cut all that.
Look back over and put it right inside of that fact function, and you might recall that we were accessing
the results coming out, that bundling process directly.
But now, in theory, our previous component is going to be just receiving some kind of code prop.
So we don't really have access to this whole result thing anymore.
We're going to push down our code directly inside.
OK, that looks good.
I think the last immediate thing we should probably do is make sure that we add a couple of different
props to our iFrame element inside of here.
We need to make sure we wire up that roof.
A couple of other things as well.
So just as a quick reminder, inside of index, not the different things we need to really provide to
that iframe are probably initialized that inside there.
We need to add that sandbox stuff, set up the roof and then to make a little warning go away, we need
to also assign that title property.
So I'll just go ahead and cut all these things and cut them all, go back over to preview and just paste
them directly into that iframe.
OK, so this looks pretty good.
The last thing we really need to do is import our prevue component back over into indexed TSX and try
to use it inside their.
So back inside of index, I can go up to the very top, I'm going to import prevue from components,
prevue.
Let's scroll down a little bit.
We do not need the iFrame directly inside of here anymore.
Instead, we're going to make use of preview.
And the last thing we really need to do here is something that we had previously, but we removed at
some point in time.
We need to communicate our bundled code down into this component.
So that means that after we complete our entire bundling process with result right here, we need to
update a piece of state inside of our app component that will cause our component to render.
And we can then pass that new updated piece of state down into that preview thing.
So, again, we had previously had a piece of state to kind of handle all this stuff in the form of
that code piece of state.
But at some point in time, we deleted that.
I still have a comment here around it.
But like I said, we had removed the state declaration.
So I'm going to recreate that code piece of state at the top up here.
I'll do code and set code.
Then right after we finish all of our bundling, I'm going to comment that set code we had previously
had.
And then down at Prevue, we'll make sure that after we create that bundle, after we update that piece
of state, we will pass it down into our preview component.
OK, so let's save this.
I think that we've got something that probably should work at this point in time.
I'm going to go back over to my browser, make sure I do a refresh.
I'll add in a very simple right now on the blog of one, two, three.
And then I'm going to try to execute this stuff, so I'll click on Submit right there and sure enough,
I see one, two, three.
So that means we are, in fact, successfully executing that bundled code.
This looks pretty good.
Last little bit of cleanup I want to do, we're no longer really making use of that text area inside
of our app component so I can remove that text area because everything all that text input is really
coming now out of our code editor.
OK, so good change.
I know it was kind of all over the place as we did this refactor, but we definitely have a much better
way of actually executing some code through the use of our preview component now.
So let's take a pause right here and continue in just a minute.