Listen for Compile/Run complete and access text of rendered HTML

[rebeccapeltz]

I'm interested in evaluating if the rendered HTML contains the correct image URL. This would help in assessing if the user is writing and running the code correctly. For example, I have some code that will render an image tag with a URL and I'd like to test if the image URL matches a regular expression. I see the image URL is in the iframe, but I can't access it there, and I don't know exactly when the HTML is rendered. https://poc-cloudinary-react-sandpack.netlify.app/

[danilowoz]

I think we could use the useTranspiledCode hook. This API was designed to return the transpiled module from the active file, in which you could parse the content and use it for whatever you need.

Let me know if it helps 😄

[EladBezalel]

FYI useTranspiledCode only works when you mimic SandpackTranspiledCode

sandpack/sandpack-react/src/components/TranspiledCode/index.tsx

Lines 35 to 46 in 8f50bb1

	const hiddenIframeRef = React.useRef<HTMLIFrameElement | null>(null);
	React.useEffect(() => {
	const hiddenIframe = hiddenIframeRef.current;
	if (hiddenIframe) {
	sandpack.registerBundler(hiddenIframe, "hidden");
	}
	return (): void => {
	sandpack.unregisterBundler("hidden");
	};
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

[sauron918]

I'd like to add some actions when clicking on decorators so I'm also trying to get an access to the rendered HTML in order to bind some event handlers.

Can you please share some working example with useTranspiledCode hook usage or maybe there is a better way to achieve that?

I need something more complicated that just elements hiding on click so workarounds like:

const decorators: Decorators = [];
decorators.push({
   elementAttributes: { "onclick": String(`alert('decorator is clicked')`) },
   ...
})

isn't suitable in my case.

UPD: few "dirty" workarounds found so far:

• associating the handler as a global function, and then referencing it as a string: "onclick": 'window.clickHandlerWithStateUpdate(event)'
• usage of MutationObserver