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.
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
added html importing from js file #1528
Conversation
@KeineLimonade how is this not backwards compatible? As far as I can see, importing an html file in JS is broken currently. (It doesn't return the name today) What are some of the benefits of getting just the path back? The only one I see is that you can create a link to the new html page from JS. But in the component driven world of react, you don't have separate html pages anymore. Just swapping components. This PR is also very useful for angular templates and other frameworks that use a component or single page app type model. |
Nevermind, I forgot that I have a plugin that overrides the default behavior the same way your PR will does. |
@KeineLimonade what plugin do you use? Can you elaborate on your usecases? |
I generate HTML files for my blog based on files with a I simply use a local plugin that extends HTML Asset |
Personally, I would prefer an |
Yeah the problem with using |
// needs to be included in the generated javascript file | ||
await this.writeModule( | ||
mod.id, | ||
`module.exports=${JSON.stringify(mod.generated.html)}` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The problem with inlining like this is that we do additional processing on the HTML output in the HTML packager, which wouldn't be accounted for here. For example, we insert additional script/style tags when you import css from js etc. This problem is related to #1456, which is about doing the exact opposite of this and inlining JS/CSS into HTML. We should be able to solve both issues with the same architecture.
@devongovett It seems like more broadly, the problem is that there's no toggle option to switch between "put the file in the bundle and give me its URL" and "give me me the export or relevant string contents for the file" for any given import statement. Webpack mostly has the same issue, but works around it somewhat by having |
Yeah IMO there needs to be a syntax similar to |
Ok I made a new PR based on this one which supports async importing of HTML into JS, along with fake "sync" importing similar to how we handle it for WASM. Until we can actually run the HTML packager inside the JS packager to get the full HTML output inlined, this is a reasonable solution. #1732 |
This is inspired by the work @pierredavidbelanger did in #926
This PR is to get the following code to work
Right now, that command will throw an error.
I believe it should give you a string representation of the HTML which you could then set
innerHTML
on some element to display it.In the PR I referenced above, there was some discussion that importing a html file in javascript should return a path to the file in
dist
. That doesn't work today either and I find that less useful than return the contents of the html file.I'm not sure the way I implemented it is the right way to do this. When a JS file is importing an html file, right now the
HTMLPackager
will write the file intodist
as you would expect and run all of the hashing on the name + dependencies. But then when JSPackager is getting ready to write out the javascript file, it previously didn't write out the generated (String representation) of the html into the javascript file. That is what this PR fixes.Let me know what you think.