How to convert string to compiled SolidJS in code

[ryanzec]

I am looking to create some like : https://formidable.com/open-source/react-live/ : the ability to take a string and in realtime add it in as a component. I am trying to take a look at the https://github.com/solidjs/solid-playground repo but having a hard time figuring out where in that repo is the string being converted into SolidJS code.

Could anyone point me in the right direction for figuring out how to compile a string into SolidJS code and in real time inject it into the current page?

[atk]

The playground uses babel and babel-preset-solid in the browser to do that. What do you want to achieve with this?

[ryanzec]

What do you want to achieve with this?

@atk I basically want to be able to create an interactive sandbox that can utilize my own components, similar to what mui does with its docs:

(reference: https://mui.com/material-ui/react-button/#basic-button)

In that example the code is editable and update the above content in real time.

[ryanzec]

It breaks on the main thread

[atk]

The error seems to happen in dynamic-routes.ts - where does that file come from?

[ryanzec]

It is custom code that generates routes dynamically, it is the file the loads the file that has the code that is attempting to do the transformations

[atk]

Can you look through the call stack where the call to _assert is made?

[ryanzec]

So this is weird, when I deployed this code to vercel, I started to get a different error:

SyntaxError: Cannot use import statement outside a module

reference link: https://train-ui-sigma.vercel.app/components/playground/default
referenced code: https://github.com/ryanzec/train-ui/blob/main/packages/utils/playground.sandbox.tsx