Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Execute complied code #2145

Closed
mbrevda opened this issue Mar 30, 2022 · 6 comments
Closed

Execute complied code #2145

mbrevda opened this issue Mar 30, 2022 · 6 comments

Comments

@mbrevda
Copy link

mbrevda commented Mar 30, 2022

I have a react component that I use as a template to generate a index.html file. This component takes the name of outputs (e.g. app-NU43JK4C.js) and inserts it as a script tag. The issue is that being in jsx, I need to compile this script before it can be executed. Ideally, I'd prefer not writing it to disk at all.

I'm aware of transpile, but that wont import all the dependencies.

Is there some way to compile and run code in a single go?

Here is a simplified version of the component:

import {renderToStaticMarkup} from 'react-dom/server'
import appleTouchIcon180 from 'icons/apple-touch-icon-180x180.png'
import faviconSvg from 'packages/frontend/src/static/favicon.svg'

const Index = ({app}) => {

  return (
    <html>
      <head>
        <link rel="icon" type="image/svg+xml" href={faviconSvg} />
        <link rel="apple-touch-icon" href={appleTouchIcon180} />
      </head>
      <body>
        <script src={app} />
      </body>
    </html>
  )
}

export default params => {
  return '<!DOCTYPE html>' + renderToStaticMarkup(<Index params={params} />)
}
@evanw
Copy link
Owner

evanw commented Mar 31, 2022

Do you mean like these?

I'm not affiliated with these projects and have not tried them, but I believe they do what you're asking for.

@hyrious
Copy link

hyrious commented Mar 31, 2022

Writing to disk isn't that harmful. But if you want to execute code written in ESM, there is a way -- via import(dataurl).

@mbrevda
Copy link
Author

mbrevda commented Mar 31, 2022 •
edited

Writing to disk isn't that harmful. But if you want to execute code written in ESM, there is a way -- via import(dataurl).

This exactly! Would be great if the API allowed for this directly. At the very least it might be worth documenting.

Thanks! Should I leave this open as a feature request?

@mbrevda
Copy link
Author

mbrevda commented Mar 31, 2022 •
edited

Also, while using import is quite clean it doesn't seem to have good ergonomics around error handling (see "stacktrace" screenshot, not much to see here!), which would be one more vote for a built in way to do this

Screen Shot 2022-03-31 at 7 24 54 AM

@hyrious
Copy link

hyrious commented Mar 31, 2022

That's true. So I still recommend you to really write it to disk, in which case you can use sourcemaps to point back to the real file.

@privatenumber
Copy link
Contributor

There is a request to allow passing in a virtual (in-memory) file-system here: #690

It looks like the use-cases described there are similar to this.

@mbrevda mbrevda closed this as completed Apr 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mbrevda @evanw @privatenumber @hyrious